diff --git a/docs/catalog/blocks/app-showcase.mdx b/docs/catalog/blocks/app-showcase.mdx
index 7bac206143..df55af6d1c 100644
--- a/docs/catalog/blocks/app-showcase.mdx
+++ b/docs/catalog/blocks/app-showcase.mdx
@@ -3,7 +3,12 @@ title: "App Showcase"
 description: "Fitness app product showcase with three floating smartphone screens"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="app-showcase preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/app-showcase.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/app-showcase.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/apple-money-count.mdx b/docs/catalog/blocks/apple-money-count.mdx
index b4afdbe189..bb39986ff7 100644
--- a/docs/catalog/blocks/apple-money-count.mdx
+++ b/docs/catalog/blocks/apple-money-count.mdx
@@ -3,7 +3,12 @@ title: "Apple Money Count"
 description: "Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="apple-money-count preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/apple-money-count.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/apple-money-count.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/beat-freeze-cut.mdx b/docs/catalog/blocks/beat-freeze-cut.mdx
index 609ca35eb4..49f3db207d 100644
--- a/docs/catalog/blocks/beat-freeze-cut.mdx
+++ b/docs/catalog/blocks/beat-freeze-cut.mdx
@@ -3,7 +3,12 @@ title: "Beat Freeze Cut"
 description: "A beat-driven speed ramp, freeze-frame hit, and hard-cut sequence for music-led promos and montages."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="beat-freeze-cut preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/beat-freeze-cut.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/beat-freeze-cut.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/blue-sweater-intro-video.mdx b/docs/catalog/blocks/blue-sweater-intro-video.mdx
index b2493f6609..af1bdf7cb2 100644
--- a/docs/catalog/blocks/blue-sweater-intro-video.mdx
+++ b/docs/catalog/blocks/blue-sweater-intro-video.mdx
@@ -3,7 +3,12 @@ title: "Blue Sweater Intro Video"
 description: "Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="blue-sweater-intro-video preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/blue-sweater-intro-video.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/blue-sweater-intro-video.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/camcorder-hud.mdx b/docs/catalog/blocks/camcorder-hud.mdx
index 869898e177..d08423a02e 100644
--- a/docs/catalog/blocks/camcorder-hud.mdx
+++ b/docs/catalog/blocks/camcorder-hud.mdx
@@ -3,7 +3,12 @@ title: "Camcorder HUD"
 description: "Responsive REC, battery, editable date placeholder, and timeline-driven counter overlay for creator-camera and camcorder treatments"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="camcorder-hud preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/camcorder-hud.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/camcorder-hud.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/chromatic-radial-split.mdx b/docs/catalog/blocks/chromatic-radial-split.mdx
index e2aa85bd76..23bb4ff21e 100644
--- a/docs/catalog/blocks/chromatic-radial-split.mdx
+++ b/docs/catalog/blocks/chromatic-radial-split.mdx
@@ -3,7 +3,12 @@ title: "Chromatic Radial Split"
 description: "Shader transition with chromatic aberration radial split"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="chromatic-radial-split preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/chromatic-radial-split.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/chromatic-radial-split.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/cinematic-zoom.mdx b/docs/catalog/blocks/cinematic-zoom.mdx
index 6608bf5cc6..cc864e241e 100644
--- a/docs/catalog/blocks/cinematic-zoom.mdx
+++ b/docs/catalog/blocks/cinematic-zoom.mdx
@@ -3,7 +3,12 @@ title: "Cinematic Zoom"
 description: "Shader transition with dramatic zoom blur"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="cinematic-zoom preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/cinematic-zoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cinematic-zoom.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-3d-extrude.mdx b/docs/catalog/blocks/code-3d-extrude.mdx
index 79e664fb7e..4a56707c3c 100644
--- a/docs/catalog/blocks/code-3d-extrude.mdx
+++ b/docs/catalog/blocks/code-3d-extrude.mdx
@@ -3,7 +3,12 @@ title: "Code 3D Extrude"
 description: "Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-3d-extrude preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-3d-extrude.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-3d-extrude.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-diff.mdx b/docs/catalog/blocks/code-diff.mdx
index d5cdc69433..ed926b1740 100644
--- a/docs/catalog/blocks/code-diff.mdx
+++ b/docs/catalog/blocks/code-diff.mdx
@@ -3,7 +3,12 @@ title: "Code Diff"
 description: "An edit shown as a colored diff — removed lines collapse in red, added lines expand in green."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-diff preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-diff.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-diff.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-highlight.mdx b/docs/catalog/blocks/code-highlight.mdx
index 9088875946..ae760eae55 100644
--- a/docs/catalog/blocks/code-highlight.mdx
+++ b/docs/catalog/blocks/code-highlight.mdx
@@ -3,7 +3,12 @@ title: "Code Highlight Sweep"
 description: "A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. `line` is 0-based: `line: 1` targets the second displayed line (unlike code-scroll, whose target is 1-based)."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-highlight preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-morph.mdx b/docs/catalog/blocks/code-morph.mdx
index 2206351336..2b0e47f02a 100644
--- a/docs/catalog/blocks/code-morph.mdx
+++ b/docs/catalog/blocks/code-morph.mdx
@@ -3,7 +3,12 @@ title: "Code Morph"
 description: "One snippet transforms into another — tokens glide between positions, leavers fade out, enterers fade in. Shiki Magic Move re-driven as a paused GSAP timeline."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-morph preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-morph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-morph.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-particle-assemble.mdx b/docs/catalog/blocks/code-particle-assemble.mdx
index 505cab4066..357e5a2a7a 100644
--- a/docs/catalog/blocks/code-particle-assemble.mdx
+++ b/docs/catalog/blocks/code-particle-assemble.mdx
@@ -3,7 +3,12 @@ title: "Code Particle Assemble"
 description: "Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-particle-assemble preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-particle-assemble.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-particle-assemble.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-scroll.mdx b/docs/catalog/blocks/code-scroll.mdx
index d80bc6974b..2628afcf6a 100644
--- a/docs/catalog/blocks/code-scroll.mdx
+++ b/docs/catalog/blocks/code-scroll.mdx
@@ -3,7 +3,12 @@ title: "Code Scroll To Line"
 description: "The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-scroll preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-scroll.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-scroll.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-shader-dissolve.mdx b/docs/catalog/blocks/code-shader-dissolve.mdx
index f98e066cc5..1edd4216f2 100644
--- a/docs/catalog/blocks/code-shader-dissolve.mdx
+++ b/docs/catalog/blocks/code-shader-dissolve.mdx
@@ -3,7 +3,12 @@ title: "Code Shader Dissolve"
 description: "The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-shader-dissolve preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-shader-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-shader-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
index 706a8bb607..3317ef6611 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-basic.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Basic"
 description: "Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-basic.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-basic preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-basic.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
index f868bca4b2..f30aac82e7 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-dark.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Clear Dark"
 description: "Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-dark.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-clear-dark preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-clear-dark.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
index 94ed3e3c94..0bc449b47e 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-clear-light.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Clear Light"
 description: "Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-clear-light.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-clear-light preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-clear-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
index 235ddc2d24..9f8fe83bc3 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-grass.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Grass"
 description: "Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-grass.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-grass preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-grass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
index 0e18f07ba1..9ec7ebad00 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-homebrew.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Homebrew"
 description: "Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-homebrew.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-homebrew preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-homebrew.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
index 0afc74ee28..03c06ec442 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-man-page.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Man Page"
 description: "Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-man-page.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-man-page preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-man-page.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
index 80b6272e37..ad98919ad6 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-novel.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Novel"
 description: "Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-novel.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-novel preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-novel.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
index 8c0a0d345a..74d8ba4e18 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-ocean.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Ocean"
 description: "Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-ocean.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-ocean preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-ocean.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
index 8868cfe93e..d105f37fb4 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-pro.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Pro"
 description: "Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-pro.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-pro preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-pro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
index f5502c3829..ffc64e527d 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-red-sands.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Red Sands"
 description: "Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-red-sands.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-red-sands preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-red-sands.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
index 06ce2faaf9..ba1d7b74f7 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Silver Aerogel"
 description: "Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-silver-aerogel preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
index 29f801e4a3..73272dd426 100644
--- a/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
+++ b/docs/catalog/blocks/code-snippet-apple-terminal-solid-colors.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Apple Terminal Solid Colors"
 description: "Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-apple-terminal-solid-colors.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-apple-terminal-solid-colors preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-apple-terminal-solid-colors.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-dark-2026.mdx b/docs/catalog/blocks/code-snippet-dark-2026.mdx
index 6b569a5000..f995b4275d 100644
--- a/docs/catalog/blocks/code-snippet-dark-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-2026.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Dark 2026"
 description: "VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-dark-2026 preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-2026.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-2026.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-dark-modern.mdx b/docs/catalog/blocks/code-snippet-dark-modern.mdx
index 4873bc35d7..c86431fcdd 100644
--- a/docs/catalog/blocks/code-snippet-dark-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-modern.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Dark Modern"
 description: "VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-dark-modern preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-modern.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-modern.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-dark-plus.mdx b/docs/catalog/blocks/code-snippet-dark-plus.mdx
index 96430e1cb6..d9ac3e0017 100644
--- a/docs/catalog/blocks/code-snippet-dark-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-dark-plus.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Dark+"
 description: "VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-dark-plus preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-dark-plus.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-dark-plus.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-flight.mdx b/docs/catalog/blocks/code-snippet-flight.mdx
index d81f7f674d..3ac6ed22ab 100644
--- a/docs/catalog/blocks/code-snippet-flight.mdx
+++ b/docs/catalog/blocks/code-snippet-flight.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet Flight"
 description: "Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-flight preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-flight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-flight.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
index abdc6ab640..da4599724e 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast-light.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - High Contrast Light"
 description: "VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-high-contrast-light preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-high-contrast-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast-light.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-high-contrast.mdx b/docs/catalog/blocks/code-snippet-high-contrast.mdx
index 12fe78ba84..dc0888210d 100644
--- a/docs/catalog/blocks/code-snippet-high-contrast.mdx
+++ b/docs/catalog/blocks/code-snippet-high-contrast.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - High Contrast"
 description: "VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-high-contrast preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-high-contrast.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-high-contrast.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-light-2026.mdx b/docs/catalog/blocks/code-snippet-light-2026.mdx
index c294f8c434..0180f22bb6 100644
--- a/docs/catalog/blocks/code-snippet-light-2026.mdx
+++ b/docs/catalog/blocks/code-snippet-light-2026.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Light 2026"
 description: "VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-light-2026 preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-2026.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-2026.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-light-modern.mdx b/docs/catalog/blocks/code-snippet-light-modern.mdx
index d3900ad99b..ca00fb4a04 100644
--- a/docs/catalog/blocks/code-snippet-light-modern.mdx
+++ b/docs/catalog/blocks/code-snippet-light-modern.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Light Modern"
 description: "VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-light-modern preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-modern.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-modern.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-light-plus.mdx b/docs/catalog/blocks/code-snippet-light-plus.mdx
index f041e2961b..ae50a3c0b6 100644
--- a/docs/catalog/blocks/code-snippet-light-plus.mdx
+++ b/docs/catalog/blocks/code-snippet-light-plus.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Light+"
 description: "VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-light-plus preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-light-plus.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-light-plus.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-monokai.mdx b/docs/catalog/blocks/code-snippet-monokai.mdx
index c83dd588f0..fb538ee0cc 100644
--- a/docs/catalog/blocks/code-snippet-monokai.mdx
+++ b/docs/catalog/blocks/code-snippet-monokai.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Monokai"
 description: "VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-monokai preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-monokai.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-monokai.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-solarized-light.mdx b/docs/catalog/blocks/code-snippet-solarized-light.mdx
index f6efad7ffd..4a6eb7772a 100644
--- a/docs/catalog/blocks/code-snippet-solarized-light.mdx
+++ b/docs/catalog/blocks/code-snippet-solarized-light.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Solarized Light"
 description: "VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-solarized-light preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-solarized-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-solarized-light.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
index f8f46f6c72..60e0c40348 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-dark.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Visual Studio Dark"
 description: "VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-visual-studio-dark preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-visual-studio-dark.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-dark.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
index efdd243db0..78bbdce96c 100644
--- a/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
+++ b/docs/catalog/blocks/code-snippet-visual-studio-light.mdx
@@ -3,7 +3,12 @@ title: "Code Snippet - Visual Studio Light"
 description: "VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-snippet-visual-studio-light preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-snippet-visual-studio-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-snippet-visual-studio-light.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/code-typing.mdx b/docs/catalog/blocks/code-typing.mdx
index 726ea5c6c6..50de9c4feb 100644
--- a/docs/catalog/blocks/code-typing.mdx
+++ b/docs/catalog/blocks/code-typing.mdx
@@ -3,7 +3,12 @@ title: "Code Typing"
 description: "Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="code-typing preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/code-typing.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/code-typing.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/cross-warp-morph.mdx b/docs/catalog/blocks/cross-warp-morph.mdx
index 8b3c32efb3..9546e0b190 100644
--- a/docs/catalog/blocks/cross-warp-morph.mdx
+++ b/docs/catalog/blocks/cross-warp-morph.mdx
@@ -3,7 +3,12 @@ title: "Cross Warp Morph"
 description: "Shader transition with cross-warped morphing"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="cross-warp-morph preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/cross-warp-morph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/cross-warp-morph.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/data-chart.mdx b/docs/catalog/blocks/data-chart.mdx
index 279fa08723..ed64a130b5 100644
--- a/docs/catalog/blocks/data-chart.mdx
+++ b/docs/catalog/blocks/data-chart.mdx
@@ -3,7 +3,12 @@ title: "Data Chart"
 description: "Animated bar + line chart with staggered reveal, NYT-style typography, and value labels"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="data-chart preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/data-chart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/data-chart.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/domain-warp-dissolve.mdx b/docs/catalog/blocks/domain-warp-dissolve.mdx
index ed9e581995..e83caa78c2 100644
--- a/docs/catalog/blocks/domain-warp-dissolve.mdx
+++ b/docs/catalog/blocks/domain-warp-dissolve.mdx
@@ -3,7 +3,12 @@ title: "Domain Warp Dissolve"
 description: "Shader transition with fractal noise domain warping"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="domain-warp-dissolve preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/domain-warp-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/domain-warp-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/editorial-flash-overlay.mdx b/docs/catalog/blocks/editorial-flash-overlay.mdx
index d816ccc781..4cb15cbe52 100644
--- a/docs/catalog/blocks/editorial-flash-overlay.mdx
+++ b/docs/catalog/blocks/editorial-flash-overlay.mdx
@@ -3,7 +3,12 @@ title: "Editorial Flash Overlay"
 description: "Finite neutral-warm light layers for a seek-safe camera-flash cut or social reveal"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="editorial-flash-overlay preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/editorial-flash-overlay.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/editorial-flash-overlay.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/flash-through-white.mdx b/docs/catalog/blocks/flash-through-white.mdx
index c10d69424f..84f6b05f4a 100644
--- a/docs/catalog/blocks/flash-through-white.mdx
+++ b/docs/catalog/blocks/flash-through-white.mdx
@@ -3,7 +3,12 @@ title: "Flash Through White"
 description: "Shader transition with white flash crossfade"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="flash-through-white preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flash-through-white.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flash-through-white.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/flowchart-vertical.mdx b/docs/catalog/blocks/flowchart-vertical.mdx
index 150d75536f..5cd84e3a2d 100644
--- a/docs/catalog/blocks/flowchart-vertical.mdx
+++ b/docs/catalog/blocks/flowchart-vertical.mdx
@@ -3,7 +3,12 @@ title: "Flowchart Vertical"
 description: "Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="flowchart-vertical preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flowchart-vertical.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart-vertical.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/flowchart.mdx b/docs/catalog/blocks/flowchart.mdx
index 8e45923c5f..8ae139dce6 100644
--- a/docs/catalog/blocks/flowchart.mdx
+++ b/docs/catalog/blocks/flowchart.mdx
@@ -3,7 +3,12 @@ title: "Flowchart"
 description: "Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="flowchart preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/flowchart.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/flowchart.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/freeze-frame-dressing.mdx b/docs/catalog/blocks/freeze-frame-dressing.mdx
index e8a0e0d943..528f785cf3 100644
--- a/docs/catalog/blocks/freeze-frame-dressing.mdx
+++ b/docs/catalog/blocks/freeze-frame-dressing.mdx
@@ -3,7 +3,12 @@ title: "Freeze-Frame Dressing"
 description: "Timeline-driven paper, tape, and flash dressing for a freeze-frame or background-removed subject"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="freeze-frame-dressing preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/freeze-frame-dressing.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/freeze-frame-dressing.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/glitch.mdx b/docs/catalog/blocks/glitch.mdx
index 2df95eb7fd..9aa59880fb 100644
--- a/docs/catalog/blocks/glitch.mdx
+++ b/docs/catalog/blocks/glitch.mdx
@@ -3,7 +3,12 @@ title: "Glitch"
 description: "Shader transition with digital glitch artifacts"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="glitch preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/glitch.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/glitch.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/gravitational-lens.mdx b/docs/catalog/blocks/gravitational-lens.mdx
index 01f12ebfd8..ee14546fcc 100644
--- a/docs/catalog/blocks/gravitational-lens.mdx
+++ b/docs/catalog/blocks/gravitational-lens.mdx
@@ -3,7 +3,12 @@ title: "Gravitational Lens"
 description: "Shader transition with gravitational lensing distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="gravitational-lens preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/gravitational-lens.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/gravitational-lens.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/hw-frame.mdx b/docs/catalog/blocks/hw-frame.mdx
index 7515993d85..ab3e7fa0d7 100644
--- a/docs/catalog/blocks/hw-frame.mdx
+++ b/docs/catalog/blocks/hw-frame.mdx
@@ -3,7 +3,12 @@ title: "Sketched Frame"
 description: "Media in a hand-drawn border with corner doodles and a handwritten caption; the unit tilts slightly and boils (images inside the block; keep live footage in the host)"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-frame preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-frame.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-frame.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/hw-path-text.mdx b/docs/catalog/blocks/hw-path-text.mdx
index 74592ac67f..190e2f226f 100644
--- a/docs/catalog/blocks/hw-path-text.mdx
+++ b/docs/catalog/blocks/hw-path-text.mdx
@@ -3,7 +3,12 @@ title: "Text Along a Path"
 description: "Handwriting flowing along any SVG path with a per-character reveal; the path is the only geometry input"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-path-text preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-path-text.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-path-text.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/hw-pipeline.mdx b/docs/catalog/blocks/hw-pipeline.mdx
index 969855905e..df9a740036 100644
--- a/docs/catalog/blocks/hw-pipeline.mdx
+++ b/docs/catalog/blocks/hw-pipeline.mdx
@@ -3,7 +3,12 @@ title: "Hand-Drawn Flowchart"
 description: "Wobbled boxes with handwritten labels joined by curved connectors, drawing on in sequence from a node list"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-pipeline preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-pipeline.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-pipeline.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/hw-scribble-transition.mdx b/docs/catalog/blocks/hw-scribble-transition.mdx
index 3c672f8775..23b2181448 100644
--- a/docs/catalog/blocks/hw-scribble-transition.mdx
+++ b/docs/catalog/blocks/hw-scribble-transition.mdx
@@ -3,7 +3,12 @@ title: "Scribble Transition"
 description: "Overlay transition: scribble bands accumulate to cover the frame with a solid backstop, the host cuts beneath, and the scribble clears"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-scribble-transition preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-scribble-transition.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-scribble-transition.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/hw-text-cloud.mdx b/docs/catalog/blocks/hw-text-cloud.mdx
index 6cb7a489fa..127a92fcad 100644
--- a/docs/catalog/blocks/hw-text-cloud.mdx
+++ b/docs/catalog/blocks/hw-text-cloud.mdx
@@ -3,7 +3,12 @@ title: "Speech Bubble"
 description: "Hand-drawn speech bubble with a positionable tail: outline draws on, paper fill fades in, handwritten text types per character; boils"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-text-cloud preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-text-cloud.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-text-cloud.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/hw-title.mdx b/docs/catalog/blocks/hw-title.mdx
index d6c22ba167..0ade02d3b3 100644
--- a/docs/catalog/blocks/hw-title.mdx
+++ b/docs/catalog/blocks/hw-title.mdx
@@ -3,7 +3,12 @@ title: "Handwritten Title"
 description: "Handwritten display text with a scalar-driven word-by-word highlight sweep and a seeded squiggle underline sized to the text; boils"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-title preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/hw-title.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/hw-title.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/instagram-follow.mdx b/docs/catalog/blocks/instagram-follow.mdx
index 82dc2bb456..7c09726816 100644
--- a/docs/catalog/blocks/instagram-follow.mdx
+++ b/docs/catalog/blocks/instagram-follow.mdx
@@ -3,7 +3,12 @@ title: "Instagram Follow"
 description: "Animated Instagram follow overlay with profile card and follow button"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="instagram-follow preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/instagram-follow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/instagram-follow.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/ios26-liquid-glass.mdx b/docs/catalog/blocks/ios26-liquid-glass.mdx
index dd2176d725..2973195634 100644
--- a/docs/catalog/blocks/ios26-liquid-glass.mdx
+++ b/docs/catalog/blocks/ios26-liquid-glass.mdx
@@ -3,7 +3,12 @@ title: "iOS 26 Liquid Glass Home Screen"
 description: "3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="ios26-liquid-glass preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ios26-liquid-glass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ios26-liquid-glass.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/light-leak.mdx b/docs/catalog/blocks/light-leak.mdx
index c5bd15150e..1af9934441 100644
--- a/docs/catalog/blocks/light-leak.mdx
+++ b/docs/catalog/blocks/light-leak.mdx
@@ -3,7 +3,12 @@ title: "Light Leak"
 description: "Shader transition with cinematic light leak overlay"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="light-leak preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/light-leak.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/light-leak.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/liquid-glass-context-menu.mdx b/docs/catalog/blocks/liquid-glass-context-menu.mdx
index 06eacb5995..a4886b75fb 100644
--- a/docs/catalog/blocks/liquid-glass-context-menu.mdx
+++ b/docs/catalog/blocks/liquid-glass-context-menu.mdx
@@ -3,7 +3,12 @@ title: "Liquid Glass Context Menu"
 description: "Frosted glass context menu panel drifting over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="liquid-glass-context-menu preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-context-menu.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-context-menu.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/liquid-glass-media-controls.mdx b/docs/catalog/blocks/liquid-glass-media-controls.mdx
index 9e21431d33..6f650c316d 100644
--- a/docs/catalog/blocks/liquid-glass-media-controls.mdx
+++ b/docs/catalog/blocks/liquid-glass-media-controls.mdx
@@ -3,7 +3,12 @@ title: "Liquid Glass Media Controls"
 description: "Frosted glass media control panels spreading over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="liquid-glass-media-controls preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-media-controls.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-media-controls.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/liquid-glass-notification.mdx b/docs/catalog/blocks/liquid-glass-notification.mdx
index 9b4ae2cb94..5dfa189160 100644
--- a/docs/catalog/blocks/liquid-glass-notification.mdx
+++ b/docs/catalog/blocks/liquid-glass-notification.mdx
@@ -3,7 +3,12 @@ title: "Liquid Glass Notification"
 description: "Frosted glass notification cards floating over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="liquid-glass-notification preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-notification.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-notification.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/liquid-glass-widgets.mdx b/docs/catalog/blocks/liquid-glass-widgets.mdx
index 261209937b..bd87d8a856 100644
--- a/docs/catalog/blocks/liquid-glass-widgets.mdx
+++ b/docs/catalog/blocks/liquid-glass-widgets.mdx
@@ -3,7 +3,12 @@ title: "Liquid Glass Widgets"
 description: "Frosted glass stat cards, showcase panel and pill chips over an aurora shader background"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="liquid-glass-widgets preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/liquid-glass-widgets.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/liquid-glass-widgets.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/logo-outro.mdx b/docs/catalog/blocks/logo-outro.mdx
index 21a7171044..6744171765 100644
--- a/docs/catalog/blocks/logo-outro.mdx
+++ b/docs/catalog/blocks/logo-outro.mdx
@@ -3,7 +3,12 @@ title: "Logo Outro"
 description: "Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="logo-outro preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/logo-outro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/logo-outro.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lower-third-bild.mdx b/docs/catalog/blocks/lower-third-bild.mdx
index 8fe0ae306d..ff49d43aa0 100644
--- a/docs/catalog/blocks/lower-third-bild.mdx
+++ b/docs/catalog/blocks/lower-third-bild.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — BILD Style"
 description: "News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lower-third-bild preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lower-third-bild.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lower-third-bild.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-accent-underline.mdx b/docs/catalog/blocks/lt-accent-underline.mdx
index 2e972e10f9..35d33b3908 100644
--- a/docs/catalog/blocks/lt-accent-underline.mdx
+++ b/docs/catalog/blocks/lt-accent-underline.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Accent Underline"
 description: "Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-accent-underline preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-accent-underline.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-accent-underline.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-bold-block.mdx b/docs/catalog/blocks/lt-bold-block.mdx
index 9a2f93d384..64ad216639 100644
--- a/docs/catalog/blocks/lt-bold-block.mdx
+++ b/docs/catalog/blocks/lt-bold-block.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Bold Block"
 description: "High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-bold-block preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-bold-block.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-bold-block.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-clean-bar.mdx b/docs/catalog/blocks/lt-clean-bar.mdx
index 03c18ffb89..0dad63e4f6 100644
--- a/docs/catalog/blocks/lt-clean-bar.mdx
+++ b/docs/catalog/blocks/lt-clean-bar.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Clean Bar"
 description: "Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-clean-bar preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-clean-bar.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-clean-bar.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-color-block.mdx b/docs/catalog/blocks/lt-color-block.mdx
index 90ddf3a39b..5fd21e0368 100644
--- a/docs/catalog/blocks/lt-color-block.mdx
+++ b/docs/catalog/blocks/lt-color-block.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Color Block"
 description: "High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-color-block preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-color-block.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-color-block.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-dark-card.mdx b/docs/catalog/blocks/lt-dark-card.mdx
index 0d81ee1428..f549cbdb3b 100644
--- a/docs/catalog/blocks/lt-dark-card.mdx
+++ b/docs/catalog/blocks/lt-dark-card.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Dark Card"
 description: "Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-dark-card preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-dark-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-dark-card.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-kicker-name.mdx b/docs/catalog/blocks/lt-kicker-name.mdx
index 9f9bb30d39..08bb2c5704 100644
--- a/docs/catalog/blocks/lt-kicker-name.mdx
+++ b/docs/catalog/blocks/lt-kicker-name.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Kicker Name"
 description: "Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-kicker-name preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-kicker-name.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-kicker-name.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-mask-reveal.mdx b/docs/catalog/blocks/lt-mask-reveal.mdx
index d7e5deea32..73c67a47d0 100644
--- a/docs/catalog/blocks/lt-mask-reveal.mdx
+++ b/docs/catalog/blocks/lt-mask-reveal.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Mask Reveal"
 description: "Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-mask-reveal preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-mask-reveal.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-mask-reveal.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-side-rule.mdx b/docs/catalog/blocks/lt-side-rule.mdx
index 673f3fcbdb..b6c29d3573 100644
--- a/docs/catalog/blocks/lt-side-rule.mdx
+++ b/docs/catalog/blocks/lt-side-rule.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Side Rule"
 description: "Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-side-rule preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-side-rule.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-side-rule.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-soft-pill.mdx b/docs/catalog/blocks/lt-soft-pill.mdx
index eb42446e5d..fb48e2b92b 100644
--- a/docs/catalog/blocks/lt-soft-pill.mdx
+++ b/docs/catalog/blocks/lt-soft-pill.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Soft Pill"
 description: "Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-soft-pill preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-soft-pill.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-soft-pill.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/lt-stack-bars.mdx b/docs/catalog/blocks/lt-stack-bars.mdx
index 1067d2be7b..ca4da75317 100644
--- a/docs/catalog/blocks/lt-stack-bars.mdx
+++ b/docs/catalog/blocks/lt-stack-bars.mdx
@@ -3,7 +3,12 @@ title: "Lower Third — Stack Bars"
 description: "Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="lt-stack-bars preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/lt-stack-bars.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/lt-stack-bars.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/macos-notification.mdx b/docs/catalog/blocks/macos-notification.mdx
index fd5fa2810c..8dc5b65201 100644
--- a/docs/catalog/blocks/macos-notification.mdx
+++ b/docs/catalog/blocks/macos-notification.mdx
@@ -3,7 +3,12 @@ title: "macOS Notification"
 description: "Animated macOS-style notification banner with app icon and message"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="macos-notification preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/macos-notification.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-notification.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
index 284995acaf..571c706354 100644
--- a/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
+++ b/docs/catalog/blocks/macos-tahoe-liquid-glass.mdx
@@ -3,7 +3,12 @@ title: "macOS Tahoe Liquid Glass Desktop"
 description: "3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="macos-tahoe-liquid-glass preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/macos-tahoe-liquid-glass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/macos-tahoe-liquid-glass.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/mk-background.mdx b/docs/catalog/blocks/mk-background.mdx
index f9f1d9f689..0406a26043 100644
--- a/docs/catalog/blocks/mk-background.mdx
+++ b/docs/catalog/blocks/mk-background.mdx
@@ -3,7 +3,12 @@ title: "Minimal Gradient Background"
 description: "Procedural soft-blob gradient backdrop in a minimalist presentation style: two radial blobs drifting over a base color, with an animatable rounded-card bar mask and optional frosted-glass mode"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-background preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-background.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-background.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/mk-callout-highlight.mdx b/docs/catalog/blocks/mk-callout-highlight.mdx
index 49a91731cc..406e2a6078 100644
--- a/docs/catalog/blocks/mk-callout-highlight.mdx
+++ b/docs/catalog/blocks/mk-callout-highlight.mdx
@@ -3,7 +3,12 @@ title: "Word-Sweep Highlight"
 description: "A sentence whose word-by-word emphasis is driven by a single scalar — tween it to sync the highlight with a voiceover"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-callout-highlight preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-callout-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-callout-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/mk-clone-wall-transition.mdx b/docs/catalog/blocks/mk-clone-wall-transition.mdx
index bc921077eb..334cb4648d 100644
--- a/docs/catalog/blocks/mk-clone-wall-transition.mdx
+++ b/docs/catalog/blocks/mk-clone-wall-transition.mdx
@@ -3,7 +3,12 @@ title: "Text Clone Wall Transition"
 description: "Overlay transition: a tiled word wall covers the frame, inverts via difference blending, and clears — hard-cut the content beneath while covered"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-clone-wall-transition preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-clone-wall-transition.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-clone-wall-transition.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/mk-line-graph.mdx b/docs/catalog/blocks/mk-line-graph.mdx
index 8c30ca0701..9bcf4463a2 100644
--- a/docs/catalog/blocks/mk-line-graph.mdx
+++ b/docs/catalog/blocks/mk-line-graph.mdx
@@ -3,7 +3,12 @@ title: "Minimal Line Graph"
 description: "One or two SVG series draw on with dots popping and value labels riding the draw front; dim baseline axis, x-labels, color-dot legend"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-line-graph preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-line-graph.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-line-graph.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/mk-placeholder-grid.mdx b/docs/catalog/blocks/mk-placeholder-grid.mdx
index 57773aa67a..416c66e80d 100644
--- a/docs/catalog/blocks/mk-placeholder-grid.mdx
+++ b/docs/catalog/blocks/mk-placeholder-grid.mdx
@@ -3,7 +3,12 @@ title: "Rounded Media Grid"
 description: "N-up rounded-corner media grid (2-up, 3-up, 4-up, 3x2, hero plus two): per-cell inside-scale framing, staggered box-in entrance, slow settle"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-placeholder-grid preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-placeholder-grid.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-placeholder-grid.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/mk-progress-stat.mdx b/docs/catalog/blocks/mk-progress-stat.mdx
index ef713b4df4..e8eedd0340 100644
--- a/docs/catalog/blocks/mk-progress-stat.mdx
+++ b/docs/catalog/blocks/mk-progress-stat.mdx
@@ -3,7 +3,12 @@ title: "Count-Up Stat Card"
 description: "Big-numeral statistic with count-up, label, thin progress track filling to value/max, and caption; light and dark schemes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-progress-stat preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-progress-stat.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-progress-stat.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/mk-specs-list.mdx b/docs/catalog/blocks/mk-specs-list.mdx
index 5be540bb56..6b4eadd733 100644
--- a/docs/catalog/blocks/mk-specs-list.mdx
+++ b/docs/catalog/blocks/mk-specs-list.mdx
@@ -3,7 +3,12 @@ title: "Specs Checklist"
 description: "Left-aligned specs/traits checklist over footage or a board: rows slide in staggered with an accent underline sweep; light and dark schemes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-specs-list preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/mk-specs-list.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/mk-specs-list.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/news-ticker.mdx b/docs/catalog/blocks/news-ticker.mdx
index df689c280c..60f134dd82 100644
--- a/docs/catalog/blocks/news-ticker.mdx
+++ b/docs/catalog/blocks/news-ticker.mdx
@@ -3,7 +3,12 @@ title: "News Ticker"
 description: "Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="news-ticker preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/news-ticker.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/news-ticker.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/north-korea-locked-down.mdx b/docs/catalog/blocks/north-korea-locked-down.mdx
index e9c0d95ef8..6a088e7fe0 100644
--- a/docs/catalog/blocks/north-korea-locked-down.mdx
+++ b/docs/catalog/blocks/north-korea-locked-down.mdx
@@ -3,7 +3,12 @@ title: "North Korea Locked Down"
 description: "Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="north-korea-locked-down preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/north-korea-locked-down.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/north-korea-locked-down.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/nyc-paris-flight.mdx b/docs/catalog/blocks/nyc-paris-flight.mdx
index 7f09281046..ff86459155 100644
--- a/docs/catalog/blocks/nyc-paris-flight.mdx
+++ b/docs/catalog/blocks/nyc-paris-flight.mdx
@@ -3,7 +3,12 @@ title: "NYC Paris Flight"
 description: "Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="nyc-paris-flight preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/nyc-paris-flight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/nyc-paris-flight.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/organic-light-leak-overlay.mdx b/docs/catalog/blocks/organic-light-leak-overlay.mdx
index 47ddc42ddd..138d0b94e3 100644
--- a/docs/catalog/blocks/organic-light-leak-overlay.mdx
+++ b/docs/catalog/blocks/organic-light-leak-overlay.mdx
@@ -3,7 +3,12 @@ title: "Organic Light Leak Overlay"
 description: "Finite CSS light-leak overlay for memory beats and motivated transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="organic-light-leak-overlay preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/organic-light-leak-overlay.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/organic-light-leak-overlay.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/reddit-post.mdx b/docs/catalog/blocks/reddit-post.mdx
index cf13693acb..425d7e6150 100644
--- a/docs/catalog/blocks/reddit-post.mdx
+++ b/docs/catalog/blocks/reddit-post.mdx
@@ -3,7 +3,12 @@ title: "Reddit Post Card"
 description: "Animated Reddit post card overlay with upvotes and comments"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="reddit-post preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/reddit-post.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/reddit-post.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/ridged-burn.mdx b/docs/catalog/blocks/ridged-burn.mdx
index b37067644e..c7bd070ca2 100644
--- a/docs/catalog/blocks/ridged-burn.mdx
+++ b/docs/catalog/blocks/ridged-burn.mdx
@@ -3,7 +3,12 @@ title: "Ridged Burn"
 description: "Shader transition with ridged turbulence burn effect"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="ridged-burn preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ridged-burn.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ridged-burn.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/ripple-waves.mdx b/docs/catalog/blocks/ripple-waves.mdx
index 7617bc94e8..1bfcadf280 100644
--- a/docs/catalog/blocks/ripple-waves.mdx
+++ b/docs/catalog/blocks/ripple-waves.mdx
@@ -3,7 +3,12 @@ title: "Ripple Waves"
 description: "Shader transition with concentric ripple wave distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="ripple-waves preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ripple-waves.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ripple-waves.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/sdf-iris.mdx b/docs/catalog/blocks/sdf-iris.mdx
index 0c5620978f..7a0a51a0cb 100644
--- a/docs/catalog/blocks/sdf-iris.mdx
+++ b/docs/catalog/blocks/sdf-iris.mdx
@@ -3,7 +3,12 @@ title: "SDF Iris"
 description: "Shader transition with signed distance field iris reveal"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="sdf-iris preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/sdf-iris.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/sdf-iris.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/spain-map.mdx b/docs/catalog/blocks/spain-map.mdx
index 138c9b9201..bbbb11d221 100644
--- a/docs/catalog/blocks/spain-map.mdx
+++ b/docs/catalog/blocks/spain-map.mdx
@@ -3,7 +3,12 @@ title: "Spain Map"
 description: "Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="spain-map preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/spain-map.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spain-map.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/spotify-card.mdx b/docs/catalog/blocks/spotify-card.mdx
index 5375a0d0cd..1cbee6200d 100644
--- a/docs/catalog/blocks/spotify-card.mdx
+++ b/docs/catalog/blocks/spotify-card.mdx
@@ -3,7 +3,12 @@ title: "Spotify Now Playing"
 description: "Animated Spotify now-playing card with album art and progress bar"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="spotify-card preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/spotify-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/spotify-card.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/swirl-vortex.mdx b/docs/catalog/blocks/swirl-vortex.mdx
index 0b3a669e51..57d587786e 100644
--- a/docs/catalog/blocks/swirl-vortex.mdx
+++ b/docs/catalog/blocks/swirl-vortex.mdx
@@ -3,7 +3,12 @@ title: "Swirl Vortex"
 description: "Shader transition with swirling vortex distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="swirl-vortex preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/swirl-vortex.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/swirl-vortex.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/thermal-distortion.mdx b/docs/catalog/blocks/thermal-distortion.mdx
index 5578803506..8db5b2f9a7 100644
--- a/docs/catalog/blocks/thermal-distortion.mdx
+++ b/docs/catalog/blocks/thermal-distortion.mdx
@@ -3,7 +3,12 @@ title: "Thermal Distortion"
 description: "Shader transition with heat haze thermal distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="thermal-distortion preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/thermal-distortion.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/thermal-distortion.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/tiktok-follow.mdx b/docs/catalog/blocks/tiktok-follow.mdx
index 6224367fe0..0b06199a49 100644
--- a/docs/catalog/blocks/tiktok-follow.mdx
+++ b/docs/catalog/blocks/tiktok-follow.mdx
@@ -3,7 +3,12 @@ title: "TikTok Follow"
 description: "Animated TikTok follow overlay with profile card and follow button"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="tiktok-follow preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/tiktok-follow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/tiktok-follow.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-3d.mdx b/docs/catalog/blocks/transitions-3d.mdx
index 554fd608ed..0694de09cb 100644
--- a/docs/catalog/blocks/transitions-3d.mdx
+++ b/docs/catalog/blocks/transitions-3d.mdx
@@ -3,7 +3,12 @@ title: "3D Transitions"
 description: "Showcase of 3D perspective flip and rotate transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-3d preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-3d.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-3d.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-blur.mdx b/docs/catalog/blocks/transitions-blur.mdx
index 7da3aa55ab..e8a577efbe 100644
--- a/docs/catalog/blocks/transitions-blur.mdx
+++ b/docs/catalog/blocks/transitions-blur.mdx
@@ -3,7 +3,12 @@ title: "Blur Transitions"
 description: "Showcase of blur-based transitions between scenes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-blur preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-blur.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-blur.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-cover.mdx b/docs/catalog/blocks/transitions-cover.mdx
index 81055e9d43..b9b25665d5 100644
--- a/docs/catalog/blocks/transitions-cover.mdx
+++ b/docs/catalog/blocks/transitions-cover.mdx
@@ -3,7 +3,12 @@ title: "Cover Transitions"
 description: "Showcase of cover/uncover slide transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-cover preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-cover.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-cover.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-destruction.mdx b/docs/catalog/blocks/transitions-destruction.mdx
index 1834f8a1b5..67898092b0 100644
--- a/docs/catalog/blocks/transitions-destruction.mdx
+++ b/docs/catalog/blocks/transitions-destruction.mdx
@@ -3,7 +3,12 @@ title: "Destruction Transitions"
 description: "Showcase of destructive break-apart transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-destruction preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-destruction.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-destruction.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-dissolve.mdx b/docs/catalog/blocks/transitions-dissolve.mdx
index 4d44438410..e7cf17af76 100644
--- a/docs/catalog/blocks/transitions-dissolve.mdx
+++ b/docs/catalog/blocks/transitions-dissolve.mdx
@@ -3,7 +3,12 @@ title: "Dissolve Transitions"
 description: "Showcase of dissolve and fade transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-dissolve preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-dissolve.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-dissolve.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-distortion.mdx b/docs/catalog/blocks/transitions-distortion.mdx
index 8dc4392740..f952da0000 100644
--- a/docs/catalog/blocks/transitions-distortion.mdx
+++ b/docs/catalog/blocks/transitions-distortion.mdx
@@ -3,7 +3,12 @@ title: "Distortion Transitions"
 description: "Showcase of warp and distortion transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-distortion preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-distortion.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-distortion.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-grid.mdx b/docs/catalog/blocks/transitions-grid.mdx
index 6557ee574e..cc273ec8ab 100644
--- a/docs/catalog/blocks/transitions-grid.mdx
+++ b/docs/catalog/blocks/transitions-grid.mdx
@@ -3,7 +3,12 @@ title: "Grid Transitions"
 description: "Showcase of grid-based tile transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-grid preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-grid.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-grid.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-light.mdx b/docs/catalog/blocks/transitions-light.mdx
index 20c7d15593..d0a88ffbe8 100644
--- a/docs/catalog/blocks/transitions-light.mdx
+++ b/docs/catalog/blocks/transitions-light.mdx
@@ -3,7 +3,12 @@ title: "Light Transitions"
 description: "Showcase of light-based glow and flash transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-light preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-light.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-light.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-mechanical.mdx b/docs/catalog/blocks/transitions-mechanical.mdx
index 30f199702f..c912cf5997 100644
--- a/docs/catalog/blocks/transitions-mechanical.mdx
+++ b/docs/catalog/blocks/transitions-mechanical.mdx
@@ -3,7 +3,12 @@ title: "Mechanical Transitions"
 description: "Showcase of mechanical shutter and iris transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-mechanical preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-mechanical.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-mechanical.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-other.mdx b/docs/catalog/blocks/transitions-other.mdx
index 6f3b9a1675..33f6d3a897 100644
--- a/docs/catalog/blocks/transitions-other.mdx
+++ b/docs/catalog/blocks/transitions-other.mdx
@@ -3,7 +3,12 @@ title: "Other Transitions"
 description: "Showcase of miscellaneous creative transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-other preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-other.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-other.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-push.mdx b/docs/catalog/blocks/transitions-push.mdx
index 89f828d5a0..f7d1df616d 100644
--- a/docs/catalog/blocks/transitions-push.mdx
+++ b/docs/catalog/blocks/transitions-push.mdx
@@ -3,7 +3,12 @@ title: "Push Transitions"
 description: "Showcase of push and slide transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-push preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-push.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-push.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-radial.mdx b/docs/catalog/blocks/transitions-radial.mdx
index fcd7f1727a..e9048baf40 100644
--- a/docs/catalog/blocks/transitions-radial.mdx
+++ b/docs/catalog/blocks/transitions-radial.mdx
@@ -3,7 +3,12 @@ title: "Radial Transitions"
 description: "Showcase of radial wipe and reveal transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-radial preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-radial.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-radial.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/transitions-scale.mdx b/docs/catalog/blocks/transitions-scale.mdx
index e9d3c44e10..a00af1997e 100644
--- a/docs/catalog/blocks/transitions-scale.mdx
+++ b/docs/catalog/blocks/transitions-scale.mdx
@@ -3,7 +3,12 @@ title: "Scale Transitions"
 description: "Showcase of scale and zoom transitions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="transitions-scale preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/transitions-scale.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/transitions-scale.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/ui-3d-reveal.mdx b/docs/catalog/blocks/ui-3d-reveal.mdx
index 236faf2adc..b2e61d86e8 100644
--- a/docs/catalog/blocks/ui-3d-reveal.mdx
+++ b/docs/catalog/blocks/ui-3d-reveal.mdx
@@ -3,7 +3,12 @@ title: "3D UI Reveal"
 description: "Perspective 3D reveal animation for UI elements"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="ui-3d-reveal preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/ui-3d-reveal.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/ui-3d-reveal.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/us-map-bubble.mdx b/docs/catalog/blocks/us-map-bubble.mdx
index 6c9758859b..fb41a5db95 100644
--- a/docs/catalog/blocks/us-map-bubble.mdx
+++ b/docs/catalog/blocks/us-map-bubble.mdx
@@ -3,7 +3,12 @@ title: "US Bubble Map"
 description: "Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="us-map-bubble preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map-bubble.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-bubble.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/us-map-flow.mdx b/docs/catalog/blocks/us-map-flow.mdx
index 48bcfca32d..7617e48496 100644
--- a/docs/catalog/blocks/us-map-flow.mdx
+++ b/docs/catalog/blocks/us-map-flow.mdx
@@ -3,7 +3,12 @@ title: "US Flow Map"
 description: "Animated connection arcs between US cities over a base map — composable origin-destination flow visualization"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="us-map-flow preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map-flow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-flow.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/us-map-hex.mdx b/docs/catalog/blocks/us-map-hex.mdx
index e2b33130c2..03cdd050e8 100644
--- a/docs/catalog/blocks/us-map-hex.mdx
+++ b/docs/catalog/blocks/us-map-hex.mdx
@@ -3,7 +3,12 @@ title: "US Hex Grid Map"
 description: "Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="us-map-hex preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map-hex.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map-hex.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/us-map.mdx b/docs/catalog/blocks/us-map.mdx
index f1ed14ad1b..b69d016cbb 100644
--- a/docs/catalog/blocks/us-map.mdx
+++ b/docs/catalog/blocks/us-map.mdx
@@ -3,7 +3,12 @@ title: "US Map"
 description: "Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="us-map preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/us-map.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/us-map.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vfx-iphone-device.mdx b/docs/catalog/blocks/vfx-iphone-device.mdx
index 29deacf74c..5439bc45b7 100644
--- a/docs/catalog/blocks/vfx-iphone-device.mdx
+++ b/docs/catalog/blocks/vfx-iphone-device.mdx
@@ -3,7 +3,12 @@ title: "iPhone & MacBook 3D Showcase"
 description: "Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vfx-iphone-device preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-iphone-device.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-iphone-device.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vfx-liquid-background.mdx b/docs/catalog/blocks/vfx-liquid-background.mdx
index e878a50ed5..832cff0df1 100644
--- a/docs/catalog/blocks/vfx-liquid-background.mdx
+++ b/docs/catalog/blocks/vfx-liquid-background.mdx
@@ -3,7 +3,12 @@ title: "Liquid Background"
 description: "Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vfx-liquid-background preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-liquid-background.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-background.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vfx-liquid-glass.mdx b/docs/catalog/blocks/vfx-liquid-glass.mdx
index c486fdc193..0cd08bc015 100644
--- a/docs/catalog/blocks/vfx-liquid-glass.mdx
+++ b/docs/catalog/blocks/vfx-liquid-glass.mdx
@@ -3,7 +3,12 @@ title: "Liquid Glass"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vfx-liquid-glass preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-liquid-glass.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-liquid-glass.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vfx-magnetic.mdx b/docs/catalog/blocks/vfx-magnetic.mdx
index a174e16ad5..61a27d7903 100644
--- a/docs/catalog/blocks/vfx-magnetic.mdx
+++ b/docs/catalog/blocks/vfx-magnetic.mdx
@@ -3,7 +3,12 @@ title: "Magnetic"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vfx-magnetic preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-magnetic.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-magnetic.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vfx-portal.mdx b/docs/catalog/blocks/vfx-portal.mdx
index 1eed276a73..d998b6536e 100644
--- a/docs/catalog/blocks/vfx-portal.mdx
+++ b/docs/catalog/blocks/vfx-portal.mdx
@@ -3,7 +3,12 @@ title: "Portal"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vfx-portal preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-portal.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-portal.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vfx-shatter.mdx b/docs/catalog/blocks/vfx-shatter.mdx
index 7cb1cf546f..c0d3f9a612 100644
--- a/docs/catalog/blocks/vfx-shatter.mdx
+++ b/docs/catalog/blocks/vfx-shatter.mdx
@@ -3,7 +3,12 @@ title: "Shatter"
 description: "VFX composition block"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vfx-shatter preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-shatter.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-shatter.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vfx-text-cursor.mdx b/docs/catalog/blocks/vfx-text-cursor.mdx
index 6d1c8a2b85..e7ab2a90c3 100644
--- a/docs/catalog/blocks/vfx-text-cursor.mdx
+++ b/docs/catalog/blocks/vfx-text-cursor.mdx
@@ -3,7 +3,12 @@ title: "VFX Text Cursor"
 description: "Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vfx-text-cursor preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vfx-text-cursor.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vfx-text-cursor.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/vpn-youtube-spot.mdx b/docs/catalog/blocks/vpn-youtube-spot.mdx
index 6e1835b89e..53db43d86d 100644
--- a/docs/catalog/blocks/vpn-youtube-spot.mdx
+++ b/docs/catalog/blocks/vpn-youtube-spot.mdx
@@ -3,7 +3,12 @@ title: "VPN YouTube Spot"
 description: "Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects."
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vpn-youtube-spot preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/vpn-youtube-spot.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/vpn-youtube-spot.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/whip-pan.mdx b/docs/catalog/blocks/whip-pan.mdx
index 8390feed14..ec8a49a3a9 100644
--- a/docs/catalog/blocks/whip-pan.mdx
+++ b/docs/catalog/blocks/whip-pan.mdx
@@ -3,7 +3,12 @@ title: "Whip Pan"
 description: "Shader transition simulating a fast camera whip pan"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="whip-pan preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/whip-pan.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/whip-pan.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/world-map.mdx b/docs/catalog/blocks/world-map.mdx
index 3e52e907ad..2ec85be065 100644
--- a/docs/catalog/blocks/world-map.mdx
+++ b/docs/catalog/blocks/world-map.mdx
@@ -3,7 +3,12 @@ title: "World Map"
 description: "Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="world-map preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/world-map.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/world-map.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/x-post.mdx b/docs/catalog/blocks/x-post.mdx
index 3e07e60718..de512db21d 100644
--- a/docs/catalog/blocks/x-post.mdx
+++ b/docs/catalog/blocks/x-post.mdx
@@ -3,7 +3,12 @@ title: "X Post Card"
 description: "Animated X/Twitter post card overlay with engagement metrics"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="x-post preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/x-post.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/x-post.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/yt-comment-card.mdx b/docs/catalog/blocks/yt-comment-card.mdx
index 281ceefbaa..6cbd0c20ad 100644
--- a/docs/catalog/blocks/yt-comment-card.mdx
+++ b/docs/catalog/blocks/yt-comment-card.mdx
@@ -3,7 +3,12 @@ title: "Comment Cards"
 description: "Social comments typing on over footage: avatar pop, username and time, per-character typewriter, likes row; image avatars or initials chips"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-comment-card preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-comment-card.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-comment-card.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/yt-lcd-background.mdx b/docs/catalog/blocks/yt-lcd-background.mdx
index dc0d8c5053..c7480e0751 100644
--- a/docs/catalog/blocks/yt-lcd-background.mdx
+++ b/docs/catalog/blocks/yt-lcd-background.mdx
@@ -3,7 +3,12 @@ title: "Scanline Board Background"
 description: "Textured paper board: scanlines with slow drift, optional pixel grid, static grain, and display text with a blur-focus entrance and chromatic-fringe title"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-lcd-background preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-lcd-background.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lcd-background.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/yt-logo-intro.mdx b/docs/catalog/blocks/yt-logo-intro.mdx
index 31341d3870..637b6ba68b 100644
--- a/docs/catalog/blocks/yt-logo-intro.mdx
+++ b/docs/catalog/blocks/yt-logo-intro.mdx
@@ -3,7 +3,12 @@ title: "Logo Intro Sequence"
 description: "Logo stamp pops on a lined board, a kicker line gives way to the title with an accent arrow chip; seeded line distortion"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-logo-intro preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-logo-intro.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-logo-intro.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/yt-lower-third.mdx b/docs/catalog/blocks/yt-lower-third.mdx
index 8356c59fa5..2869f68c0c 100644
--- a/docs/catalog/blocks/yt-lower-third.mdx
+++ b/docs/catalog/blocks/yt-lower-third.mdx
@@ -3,7 +3,12 @@ title: "YouTube Lower Third"
 description: "Animated YouTube subscribe lower third with avatar and channel info"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-lower-third preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-lower-third.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-lower-third.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/yt-prism-title.mdx b/docs/catalog/blocks/yt-prism-title.mdx
index 5148a4afbb..2381bf03f8 100644
--- a/docs/catalog/blocks/yt-prism-title.mdx
+++ b/docs/catalog/blocks/yt-prism-title.mdx
@@ -3,7 +3,12 @@ title: "Chromatic Fringe Title"
 description: "Display title on a transparent root: blur-focus entrance, red/blue fringe that settles then breathes, perspective bow, slow scale drift"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-prism-title preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-prism-title.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-prism-title.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/blocks/yt-vertical-fill.mdx b/docs/catalog/blocks/yt-vertical-fill.mdx
index 429ea95c20..cdfd67f4bc 100644
--- a/docs/catalog/blocks/yt-vertical-fill.mdx
+++ b/docs/catalog/blocks/yt-vertical-fill.mdx
@@ -3,7 +3,12 @@ title: "Vertical Media Filler"
 description: "Portrait media filling a widescreen frame via blurred-scale, mirror, or copy side fills; grid texture and foreground contrast lift (images inside the block; keep live footage in the host)"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-vertical-fill preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/blocks/yt-vertical-fill.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/blocks/yt-vertical-fill.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-clip-wipe.mdx b/docs/catalog/components/caption-clip-wipe.mdx
index d170381921..8a65e717fe 100644
--- a/docs/catalog/components/caption-clip-wipe.mdx
+++ b/docs/catalog/components/caption-clip-wipe.mdx
@@ -3,7 +3,12 @@ title: "Clip Wipe"
 description: "Left-to-right clip-path wipe reveal per word"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-clip-wipe preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-clip-wipe.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-clip-wipe.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-editorial-emphasis.mdx b/docs/catalog/components/caption-editorial-emphasis.mdx
index b2111c041a..1044dce6df 100644
--- a/docs/catalog/components/caption-editorial-emphasis.mdx
+++ b/docs/catalog/components/caption-editorial-emphasis.mdx
@@ -3,7 +3,12 @@ title: "Editorial Emphasis"
 description: "Dual-font system with dramatic size contrast for emphasis words"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-editorial-emphasis preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-editorial-emphasis.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-editorial-emphasis.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-emoji-pop.mdx b/docs/catalog/components/caption-emoji-pop.mdx
index bbb8348b41..ec12d07018 100644
--- a/docs/catalog/components/caption-emoji-pop.mdx
+++ b/docs/catalog/components/caption-emoji-pop.mdx
@@ -3,7 +3,12 @@ title: "Emoji Pop"
 description: "Emoji integration with stroked text and horizontal squeeze entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-emoji-pop preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-emoji-pop.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-emoji-pop.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-glitch-rgb.mdx b/docs/catalog/components/caption-glitch-rgb.mdx
index 1cc7a04383..bde3d6a4e4 100644
--- a/docs/catalog/components/caption-glitch-rgb.mdx
+++ b/docs/catalog/components/caption-glitch-rgb.mdx
@@ -3,7 +3,12 @@ title: "Glitch RGB"
 description: "RGB chromatic aberration with CRT scanline overlay"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-glitch-rgb preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-glitch-rgb.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-glitch-rgb.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-gradient-fill.mdx b/docs/catalog/components/caption-gradient-fill.mdx
index fcc64ac141..94cfad6e08 100644
--- a/docs/catalog/components/caption-gradient-fill.mdx
+++ b/docs/catalog/components/caption-gradient-fill.mdx
@@ -3,7 +3,12 @@ title: "Gradient Fill"
 description: "Gradient-clipped text with elastic bounce entrance"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-gradient-fill preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-gradient-fill.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-gradient-fill.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-highlight.mdx b/docs/catalog/components/caption-highlight.mdx
index 3f3ad6e607..7eb5afa2ce 100644
--- a/docs/catalog/components/caption-highlight.mdx
+++ b/docs/catalog/components/caption-highlight.mdx
@@ -3,7 +3,12 @@ title: "Highlight"
 description: "Red background sweep behind each active word, TikTok-style"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-highlight preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-kinetic-slam.mdx b/docs/catalog/components/caption-kinetic-slam.mdx
index efb32ef2c7..df972e479a 100644
--- a/docs/catalog/components/caption-kinetic-slam.mdx
+++ b/docs/catalog/components/caption-kinetic-slam.mdx
@@ -3,7 +3,12 @@ title: "Kinetic Slam"
 description: "Full-screen single-word display with alternating entrance directions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-kinetic-slam preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-kinetic-slam.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-kinetic-slam.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-matrix-decode.mdx b/docs/catalog/components/caption-matrix-decode.mdx
index d363539901..d87d1a3699 100644
--- a/docs/catalog/components/caption-matrix-decode.mdx
+++ b/docs/catalog/components/caption-matrix-decode.mdx
@@ -3,7 +3,12 @@ title: "Matrix Decode"
 description: "Character scramble animation before text reveal"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-matrix-decode preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-matrix-decode.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-matrix-decode.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-neon-accent.mdx b/docs/catalog/components/caption-neon-accent.mdx
index 1ab8619c42..45124d77c0 100644
--- a/docs/catalog/components/caption-neon-accent.mdx
+++ b/docs/catalog/components/caption-neon-accent.mdx
@@ -3,7 +3,12 @@ title: "Neon Accent"
 description: "Multi-color neon glow accents with wiggle drift animation"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-neon-accent preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-neon-accent.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-accent.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-neon-glow.mdx b/docs/catalog/components/caption-neon-glow.mdx
index 54302cbcfa..6ec27a0ac2 100644
--- a/docs/catalog/components/caption-neon-glow.mdx
+++ b/docs/catalog/components/caption-neon-glow.mdx
@@ -3,7 +3,12 @@ title: "Neon Glow"
 description: "Cyan and magenta neon glow with keyword accent colors"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-neon-glow preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-neon-glow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-neon-glow.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-parallax-layers.mdx b/docs/catalog/components/caption-parallax-layers.mdx
index d0ae48c6ad..6f236d5d78 100644
--- a/docs/catalog/components/caption-parallax-layers.mdx
+++ b/docs/catalog/components/caption-parallax-layers.mdx
@@ -3,7 +3,12 @@ title: "Parallax Layers"
 description: "Behind-subject 3D text layering with vertical stretch effect"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-parallax-layers preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-parallax-layers.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-parallax-layers.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-particle-burst.mdx b/docs/catalog/components/caption-particle-burst.mdx
index 898ea1e0ee..e4382dfda5 100644
--- a/docs/catalog/components/caption-particle-burst.mdx
+++ b/docs/catalog/components/caption-particle-burst.mdx
@@ -3,7 +3,12 @@ title: "Particle Burst"
 description: "Keyword words trigger colored particle explosions"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-particle-burst preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-particle-burst.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-particle-burst.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-pill-karaoke.mdx b/docs/catalog/components/caption-pill-karaoke.mdx
index 09f5b0db51..1cbcfd7dff 100644
--- a/docs/catalog/components/caption-pill-karaoke.mdx
+++ b/docs/catalog/components/caption-pill-karaoke.mdx
@@ -3,7 +3,12 @@ title: "Pill Karaoke"
 description: "Pill-shaped container with per-word karaoke color highlight"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-pill-karaoke preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-pill-karaoke.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-pill-karaoke.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-texture.mdx b/docs/catalog/components/caption-texture.mdx
index b771c36574..bd429e4fb6 100644
--- a/docs/catalog/components/caption-texture.mdx
+++ b/docs/catalog/components/caption-texture.mdx
@@ -3,7 +3,12 @@ title: "Texture"
 description: "Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-texture preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-texture.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-texture.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/caption-weight-shift.mdx b/docs/catalog/components/caption-weight-shift.mdx
index 90b91b5e5d..6d83f5c8d8 100644
--- a/docs/catalog/components/caption-weight-shift.mdx
+++ b/docs/catalog/components/caption-weight-shift.mdx
@@ -3,7 +3,12 @@ title: "Weight Shift"
 description: "Elegant font-weight transition between caption lines"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="caption-weight-shift preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/caption-weight-shift.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/caption-weight-shift.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/grain-overlay.mdx b/docs/catalog/components/grain-overlay.mdx
index 20adf620fa..d74235f6c4 100644
--- a/docs/catalog/components/grain-overlay.mdx
+++ b/docs/catalog/components/grain-overlay.mdx
@@ -3,7 +3,12 @@ title: "Grain Overlay"
 description: "Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="grain-overlay preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/grain-overlay.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grain-overlay.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/grid-pixelate-wipe.mdx b/docs/catalog/components/grid-pixelate-wipe.mdx
index 9ebe64c678..03450af138 100644
--- a/docs/catalog/components/grid-pixelate-wipe.mdx
+++ b/docs/catalog/components/grid-pixelate-wipe.mdx
@@ -3,7 +3,12 @@ title: "Grid Pixelate Wipe"
 description: "Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="grid-pixelate-wipe preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/grid-pixelate-wipe.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/grid-pixelate-wipe.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/hw-arrow.mdx b/docs/catalog/components/hw-arrow.mdx
index f493c0272f..c2f6fc9aaa 100644
--- a/docs/catalog/components/hw-arrow.mdx
+++ b/docs/catalog/components/hw-arrow.mdx
@@ -3,7 +3,12 @@ title: "Hand-Drawn Arrow"
 description: "Wobbled draw-on arrow with straight, gentle, and swoop curve presets; boils while on screen"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-arrow preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-arrow.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-arrow.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/hw-boil.mdx b/docs/catalog/components/hw-boil.mdx
index 5883808aaf..8f0591dd31 100644
--- a/docs/catalog/components/hw-boil.mdx
+++ b/docs/catalog/components/hw-boil.mdx
@@ -3,7 +3,12 @@ title: "Hand-Drawn Boil"
 description: "Hand-drawn jitter that re-poses every N frames, as seek-safe helpers: pose derives from quantized timeline time through a seeded hash; includes the shared onUpdate dispatcher and a wobbled-ellipse path generator"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-boil preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-boil.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-boil.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/hw-box-label.mdx b/docs/catalog/components/hw-box-label.mdx
index 323da55c7b..8611292323 100644
--- a/docs/catalog/components/hw-box-label.mdx
+++ b/docs/catalog/components/hw-box-label.mdx
@@ -3,7 +3,12 @@ title: "Hand-Drawn Box Label"
 description: "Wobbled rounded rectangle draws around a region with a handwritten label above or centered"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-box-label preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-box-label.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-box-label.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/hw-callout-circle.mdx b/docs/catalog/components/hw-callout-circle.mdx
index 9066ff2afb..6970f941dd 100644
--- a/docs/catalog/components/hw-callout-circle.mdx
+++ b/docs/catalog/components/hw-callout-circle.mdx
@@ -3,7 +3,12 @@ title: "Scribble Callout Circle"
 description: "Wobbled ellipse draws around a target with optional scribble fill, curved connector, and handwritten label"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-callout-circle preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-callout-circle.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-callout-circle.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/hw-underline.mdx b/docs/catalog/components/hw-underline.mdx
index 04bf6f266e..751465f3ac 100644
--- a/docs/catalog/components/hw-underline.mdx
+++ b/docs/catalog/components/hw-underline.mdx
@@ -3,7 +3,12 @@ title: "Squiggle Marks"
 description: "Hand-drawn squiggle underline, double-pass strikethrough, and bracket marks that draw on"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="hw-underline preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/hw-underline.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/hw-underline.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/mk-emphasis-type.mdx b/docs/catalog/components/mk-emphasis-type.mdx
index c5561ebd8a..b1926e7313 100644
--- a/docs/catalog/components/mk-emphasis-type.mdx
+++ b/docs/catalog/components/mk-emphasis-type.mdx
@@ -3,7 +3,12 @@ title: "Background Emphasis Type"
 description: "Oversized low-contrast background word drifting slowly behind the subject — typography as texture"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-emphasis-type preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/mk-emphasis-type.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-emphasis-type.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/mk-usage-arc.mdx b/docs/catalog/components/mk-usage-arc.mdx
index 340ed69214..e5a58695eb 100644
--- a/docs/catalog/components/mk-usage-arc.mdx
+++ b/docs/catalog/components/mk-usage-arc.mdx
@@ -3,7 +3,12 @@ title: "Hairline Arc Gauge"
 description: "Thin circular gauge that draws on while its percentage counts up; one helper call drives both"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="mk-usage-arc preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/mk-usage-arc.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/mk-usage-arc.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/morph-text.mdx b/docs/catalog/components/morph-text.mdx
index 66b9051859..042bde804a 100644
--- a/docs/catalog/components/morph-text.mdx
+++ b/docs/catalog/components/morph-text.mdx
@@ -3,7 +3,12 @@ title: "Morph Text"
 description: "Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/morph-text.mp4" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="morph-text preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/morph-text.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/motion-blur.mdx b/docs/catalog/components/motion-blur.mdx
index f8c1a6b138..b0569deb3f 100644
--- a/docs/catalog/components/motion-blur.mdx
+++ b/docs/catalog/components/motion-blur.mdx
@@ -3,7 +3,12 @@ title: "Motion Blur"
 description: "Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="motion-blur preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/motion-blur.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/motion-blur.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/parallax-unzoom.mdx b/docs/catalog/components/parallax-unzoom.mdx
index 1fbeef7c0f..b4e30c2cda 100644
--- a/docs/catalog/components/parallax-unzoom.mdx
+++ b/docs/catalog/components/parallax-unzoom.mdx
@@ -3,7 +3,12 @@ title: "Parallax Unzoom"
 description: "Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom)"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="parallax-unzoom preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/parallax-unzoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-unzoom.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/parallax-zoom.mdx b/docs/catalog/components/parallax-zoom.mdx
index 21b895f518..ed82a2a54c 100644
--- a/docs/catalog/components/parallax-zoom.mdx
+++ b/docs/catalog/components/parallax-zoom.mdx
@@ -3,7 +3,12 @@ title: "Parallax Zoom"
 description: "Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="parallax-zoom preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/parallax-zoom.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/parallax-zoom.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/shimmer-sweep.mdx b/docs/catalog/components/shimmer-sweep.mdx
index ede8830937..817d318428 100644
--- a/docs/catalog/components/shimmer-sweep.mdx
+++ b/docs/catalog/components/shimmer-sweep.mdx
@@ -3,7 +3,12 @@ title: "Shimmer Sweep"
 description: "Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="shimmer-sweep preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/shimmer-sweep.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/shimmer-sweep.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/vignette.mdx b/docs/catalog/components/vignette.mdx
index 11484a9e78..c29c3efa7c 100644
--- a/docs/catalog/components/vignette.mdx
+++ b/docs/catalog/components/vignette.mdx
@@ -3,7 +3,12 @@ title: "Vignette"
 description: "Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="vignette preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/vignette.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/vignette.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/yt-camera-move.mdx b/docs/catalog/components/yt-camera-move.mdx
index ea6276c194..37a121a5e9 100644
--- a/docs/catalog/components/yt-camera-move.mdx
+++ b/docs/catalog/components/yt-camera-move.mdx
@@ -3,7 +3,12 @@ title: "Camera Punch-In"
 description: "Dynamic zoom, slide, and 3D tilt-pan helpers for any wrapper (video, include, card) with cubic-easing defaults and an edge-defocus pulse overlay"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-camera-move preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-camera-move.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-camera-move.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/yt-circle-pointer.mdx b/docs/catalog/components/yt-circle-pointer.mdx
index 1893960f12..b196700073 100644
--- a/docs/catalog/components/yt-circle-pointer.mdx
+++ b/docs/catalog/components/yt-circle-pointer.mdx
@@ -3,7 +3,12 @@ title: "Pointer Circle + Countdown"
 description: "Draw-on annotation ellipse around a target plus a countdown chip that pulses each tick"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-circle-pointer preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-circle-pointer.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-circle-pointer.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/yt-feather-highlight.mdx b/docs/catalog/components/yt-feather-highlight.mdx
index fdb6e72ec9..b0dc74bdb5 100644
--- a/docs/catalog/components/yt-feather-highlight.mdx
+++ b/docs/catalog/components/yt-feather-highlight.mdx
@@ -3,7 +3,12 @@ title: "Feathered Spotlight"
 description: "Dims the frame except a feathered ellipse; the hole's position and size are CSS variables, so helpers glide the spotlight between targets"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-feather-highlight preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-feather-highlight.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-feather-highlight.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/catalog/components/yt-screen-warp.mdx b/docs/catalog/components/yt-screen-warp.mdx
index 5e6213c895..b35b381cad 100644
--- a/docs/catalog/components/yt-screen-warp.mdx
+++ b/docs/catalog/components/yt-screen-warp.mdx
@@ -3,7 +3,12 @@ title: "On-Screen Display Effect"
 description: "Grid, scanline, vignette, and sheen overlay plus a 3D-warp wrapper class that makes footage read as if playing on a physical display"
 ---
 
-<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.mp4" poster="https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png" autoPlay muted loop playsInline />
+<iframe
+  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"
+  title="yt-screen-warp preview"
+  loading="lazy"
+  srcDoc={`<!doctype html><html><head><meta charset="utf-8"><style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}hyperframes-player{display:block;width:100%;height:100%}</style><script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@0.7/dist/hyperframes-player.global.js"><\/script></head><body><script>fetch("/public/catalog/components/yt-screen-warp.json").then(function(r){return r.json()}).then(function(d){var p=document.createElement("hyperframes-player");p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");p.setAttribute("poster","https://static.heygen.ai/hyperframes-oss/docs/images/catalog/components/yt-screen-warp.png");document.body.appendChild(p)});<\/script></body></html>`}
+/>
 
 ## Install
 
diff --git a/docs/public/catalog/assets/00bd6b886fd23c9e.jpg b/docs/public/catalog/assets/00bd6b886fd23c9e.jpg
new file mode 100644
index 0000000000..ea48e518c6
Binary files /dev/null and b/docs/public/catalog/assets/00bd6b886fd23c9e.jpg differ
diff --git a/docs/public/catalog/assets/035c4aed3d580776.jpg b/docs/public/catalog/assets/035c4aed3d580776.jpg
new file mode 100644
index 0000000000..077705a002
Binary files /dev/null and b/docs/public/catalog/assets/035c4aed3d580776.jpg differ
diff --git a/docs/public/catalog/assets/0467760f53ee4d6c.jpg b/docs/public/catalog/assets/0467760f53ee4d6c.jpg
new file mode 100644
index 0000000000..3903507d07
Binary files /dev/null and b/docs/public/catalog/assets/0467760f53ee4d6c.jpg differ
diff --git a/docs/public/catalog/assets/056cc5ffda649bc6.jpeg b/docs/public/catalog/assets/056cc5ffda649bc6.jpeg
new file mode 100644
index 0000000000..1f3e465cd2
Binary files /dev/null and b/docs/public/catalog/assets/056cc5ffda649bc6.jpeg differ
diff --git a/docs/public/catalog/assets/0743c9b7b918b0d9.woff2 b/docs/public/catalog/assets/0743c9b7b918b0d9.woff2
new file mode 100644
index 0000000000..b6480d659c
Binary files /dev/null and b/docs/public/catalog/assets/0743c9b7b918b0d9.woff2 differ
diff --git a/docs/public/catalog/assets/0780dac27f53fe4c.jpg b/docs/public/catalog/assets/0780dac27f53fe4c.jpg
new file mode 100644
index 0000000000..3fe8efcde5
Binary files /dev/null and b/docs/public/catalog/assets/0780dac27f53fe4c.jpg differ
diff --git a/docs/public/catalog/assets/10409e2bcf2a6bc6.png b/docs/public/catalog/assets/10409e2bcf2a6bc6.png
new file mode 100644
index 0000000000..c98365032e
Binary files /dev/null and b/docs/public/catalog/assets/10409e2bcf2a6bc6.png differ
diff --git a/docs/public/catalog/assets/133975c557f2b1d5.jpg b/docs/public/catalog/assets/133975c557f2b1d5.jpg
new file mode 100644
index 0000000000..3279638836
Binary files /dev/null and b/docs/public/catalog/assets/133975c557f2b1d5.jpg differ
diff --git a/docs/public/catalog/assets/14425ba9c695763c.woff2 b/docs/public/catalog/assets/14425ba9c695763c.woff2
new file mode 100644
index 0000000000..585887339e
Binary files /dev/null and b/docs/public/catalog/assets/14425ba9c695763c.woff2 differ
diff --git a/docs/public/catalog/assets/14beda4f8011bbcc.jpg b/docs/public/catalog/assets/14beda4f8011bbcc.jpg
new file mode 100644
index 0000000000..e7f2ba592a
Binary files /dev/null and b/docs/public/catalog/assets/14beda4f8011bbcc.jpg differ
diff --git a/docs/public/catalog/assets/183a84d8c46fc058.jpg b/docs/public/catalog/assets/183a84d8c46fc058.jpg
new file mode 100644
index 0000000000..bfd11fcaaa
Binary files /dev/null and b/docs/public/catalog/assets/183a84d8c46fc058.jpg differ
diff --git a/docs/public/catalog/assets/1e7da3801fb49746.jpg b/docs/public/catalog/assets/1e7da3801fb49746.jpg
new file mode 100644
index 0000000000..0d1c628ac7
Binary files /dev/null and b/docs/public/catalog/assets/1e7da3801fb49746.jpg differ
diff --git a/docs/public/catalog/assets/1f67e32b14a9ed2e.wav b/docs/public/catalog/assets/1f67e32b14a9ed2e.wav
new file mode 100644
index 0000000000..c72b462e05
Binary files /dev/null and b/docs/public/catalog/assets/1f67e32b14a9ed2e.wav differ
diff --git a/docs/public/catalog/assets/28c3466d1ecbf30e.jpg b/docs/public/catalog/assets/28c3466d1ecbf30e.jpg
new file mode 100644
index 0000000000..236f696322
Binary files /dev/null and b/docs/public/catalog/assets/28c3466d1ecbf30e.jpg differ
diff --git a/docs/public/catalog/assets/2bb6166f2b46a075.jpg b/docs/public/catalog/assets/2bb6166f2b46a075.jpg
new file mode 100644
index 0000000000..994653ef38
Binary files /dev/null and b/docs/public/catalog/assets/2bb6166f2b46a075.jpg differ
diff --git a/docs/public/catalog/assets/2e5732c61470a890.woff2 b/docs/public/catalog/assets/2e5732c61470a890.woff2
new file mode 100644
index 0000000000..4889581437
Binary files /dev/null and b/docs/public/catalog/assets/2e5732c61470a890.woff2 differ
diff --git a/docs/public/catalog/assets/37cf02fd6afa7181.jpg b/docs/public/catalog/assets/37cf02fd6afa7181.jpg
new file mode 100644
index 0000000000..24dc61dc17
Binary files /dev/null and b/docs/public/catalog/assets/37cf02fd6afa7181.jpg differ
diff --git a/docs/public/catalog/assets/38198e4cc4ae82c0.png b/docs/public/catalog/assets/38198e4cc4ae82c0.png
new file mode 100644
index 0000000000..3b7c4ba981
Binary files /dev/null and b/docs/public/catalog/assets/38198e4cc4ae82c0.png differ
diff --git a/docs/public/catalog/assets/38fd49c8d14115e2.jpg b/docs/public/catalog/assets/38fd49c8d14115e2.jpg
new file mode 100644
index 0000000000..886c240ab3
Binary files /dev/null and b/docs/public/catalog/assets/38fd49c8d14115e2.jpg differ
diff --git a/docs/public/catalog/assets/3df3bfa4dd7eb335.jpg b/docs/public/catalog/assets/3df3bfa4dd7eb335.jpg
new file mode 100644
index 0000000000..2aac50833d
Binary files /dev/null and b/docs/public/catalog/assets/3df3bfa4dd7eb335.jpg differ
diff --git a/docs/public/catalog/assets/407d01c660156970.jpg b/docs/public/catalog/assets/407d01c660156970.jpg
new file mode 100644
index 0000000000..4735f43773
Binary files /dev/null and b/docs/public/catalog/assets/407d01c660156970.jpg differ
diff --git a/docs/public/catalog/assets/425c0713a8176f92.woff2 b/docs/public/catalog/assets/425c0713a8176f92.woff2
new file mode 100644
index 0000000000..77e42594c1
Binary files /dev/null and b/docs/public/catalog/assets/425c0713a8176f92.woff2 differ
diff --git a/docs/public/catalog/assets/44b382d4775c2bb8.woff2 b/docs/public/catalog/assets/44b382d4775c2bb8.woff2
new file mode 100644
index 0000000000..bfdc691d46
Binary files /dev/null and b/docs/public/catalog/assets/44b382d4775c2bb8.woff2 differ
diff --git a/docs/public/catalog/assets/47bad99ea6861b47.webp b/docs/public/catalog/assets/47bad99ea6861b47.webp
new file mode 100644
index 0000000000..383d554f34
Binary files /dev/null and b/docs/public/catalog/assets/47bad99ea6861b47.webp differ
diff --git a/docs/public/catalog/assets/4a3b80889cebb41a.jpg b/docs/public/catalog/assets/4a3b80889cebb41a.jpg
new file mode 100644
index 0000000000..12311bd5b2
Binary files /dev/null and b/docs/public/catalog/assets/4a3b80889cebb41a.jpg differ
diff --git a/docs/public/catalog/assets/523ef5a35af5993c.jpg b/docs/public/catalog/assets/523ef5a35af5993c.jpg
new file mode 100644
index 0000000000..a6d9ae080b
Binary files /dev/null and b/docs/public/catalog/assets/523ef5a35af5993c.jpg differ
diff --git a/docs/public/catalog/assets/57085df38b273be8.jpg b/docs/public/catalog/assets/57085df38b273be8.jpg
new file mode 100644
index 0000000000..a16da13a34
Binary files /dev/null and b/docs/public/catalog/assets/57085df38b273be8.jpg differ
diff --git a/docs/public/catalog/assets/5771b437cfcf77fb.jpg b/docs/public/catalog/assets/5771b437cfcf77fb.jpg
new file mode 100644
index 0000000000..4f944ae6b4
Binary files /dev/null and b/docs/public/catalog/assets/5771b437cfcf77fb.jpg differ
diff --git a/docs/public/catalog/assets/5a88ad5abfd02f99.woff2 b/docs/public/catalog/assets/5a88ad5abfd02f99.woff2
new file mode 100644
index 0000000000..951b85324e
Binary files /dev/null and b/docs/public/catalog/assets/5a88ad5abfd02f99.woff2 differ
diff --git a/docs/public/catalog/assets/60a68dd7210c966c.jpg b/docs/public/catalog/assets/60a68dd7210c966c.jpg
new file mode 100644
index 0000000000..2279b8c282
Binary files /dev/null and b/docs/public/catalog/assets/60a68dd7210c966c.jpg differ
diff --git a/docs/public/catalog/assets/61facab3428ae59c.woff2 b/docs/public/catalog/assets/61facab3428ae59c.woff2
new file mode 100644
index 0000000000..6d19fc8c25
Binary files /dev/null and b/docs/public/catalog/assets/61facab3428ae59c.woff2 differ
diff --git a/docs/public/catalog/assets/6f56409fd3d64bb8.woff2 b/docs/public/catalog/assets/6f56409fd3d64bb8.woff2
new file mode 100644
index 0000000000..a68fb101cd
Binary files /dev/null and b/docs/public/catalog/assets/6f56409fd3d64bb8.woff2 differ
diff --git a/docs/public/catalog/assets/719ca431702bfc23.jpg b/docs/public/catalog/assets/719ca431702bfc23.jpg
new file mode 100644
index 0000000000..e00ea5c9cc
Binary files /dev/null and b/docs/public/catalog/assets/719ca431702bfc23.jpg differ
diff --git a/docs/public/catalog/assets/7254a2cfd76b60b5.woff2 b/docs/public/catalog/assets/7254a2cfd76b60b5.woff2
new file mode 100644
index 0000000000..82ce894c37
Binary files /dev/null and b/docs/public/catalog/assets/7254a2cfd76b60b5.woff2 differ
diff --git a/docs/public/catalog/assets/73c4fffc131648df.wav b/docs/public/catalog/assets/73c4fffc131648df.wav
new file mode 100644
index 0000000000..ae3d811097
Binary files /dev/null and b/docs/public/catalog/assets/73c4fffc131648df.wav differ
diff --git a/docs/public/catalog/assets/7523c0cc7f5c088a.woff2 b/docs/public/catalog/assets/7523c0cc7f5c088a.woff2
new file mode 100644
index 0000000000..412c9ac536
Binary files /dev/null and b/docs/public/catalog/assets/7523c0cc7f5c088a.woff2 differ
diff --git a/docs/public/catalog/assets/75b7b8e878ea0c33.woff2 b/docs/public/catalog/assets/75b7b8e878ea0c33.woff2
new file mode 100644
index 0000000000..10ee1a8721
Binary files /dev/null and b/docs/public/catalog/assets/75b7b8e878ea0c33.woff2 differ
diff --git a/docs/public/catalog/assets/86801da39dc457b8.jpg b/docs/public/catalog/assets/86801da39dc457b8.jpg
new file mode 100644
index 0000000000..e710fc2418
Binary files /dev/null and b/docs/public/catalog/assets/86801da39dc457b8.jpg differ
diff --git a/docs/public/catalog/assets/86f591a856149aaa.jpg b/docs/public/catalog/assets/86f591a856149aaa.jpg
new file mode 100644
index 0000000000..ad73252f40
Binary files /dev/null and b/docs/public/catalog/assets/86f591a856149aaa.jpg differ
diff --git a/docs/public/catalog/assets/8909904ab6c872eb.woff2 b/docs/public/catalog/assets/8909904ab6c872eb.woff2
new file mode 100644
index 0000000000..f15b025d66
Binary files /dev/null and b/docs/public/catalog/assets/8909904ab6c872eb.woff2 differ
diff --git a/docs/public/catalog/assets/891951df5e8b5b0f.woff2 b/docs/public/catalog/assets/891951df5e8b5b0f.woff2
new file mode 100644
index 0000000000..5a3423426f
Binary files /dev/null and b/docs/public/catalog/assets/891951df5e8b5b0f.woff2 differ
diff --git a/docs/public/catalog/assets/919d352f7d618546.jpg b/docs/public/catalog/assets/919d352f7d618546.jpg
new file mode 100644
index 0000000000..92116c7f80
Binary files /dev/null and b/docs/public/catalog/assets/919d352f7d618546.jpg differ
diff --git a/docs/public/catalog/assets/982e87145e1f7aa4.png b/docs/public/catalog/assets/982e87145e1f7aa4.png
new file mode 100644
index 0000000000..0a9d0e077a
Binary files /dev/null and b/docs/public/catalog/assets/982e87145e1f7aa4.png differ
diff --git a/docs/public/catalog/assets/9aa8de5cd5092f03.jpg b/docs/public/catalog/assets/9aa8de5cd5092f03.jpg
new file mode 100644
index 0000000000..da674ae8c3
Binary files /dev/null and b/docs/public/catalog/assets/9aa8de5cd5092f03.jpg differ
diff --git a/docs/public/catalog/assets/a0ed0190c4b361cb.jpg b/docs/public/catalog/assets/a0ed0190c4b361cb.jpg
new file mode 100644
index 0000000000..c3d9cccbb5
Binary files /dev/null and b/docs/public/catalog/assets/a0ed0190c4b361cb.jpg differ
diff --git a/docs/public/catalog/assets/a1c4ba842d1941d5.jpg b/docs/public/catalog/assets/a1c4ba842d1941d5.jpg
new file mode 100644
index 0000000000..8d2571c5ad
Binary files /dev/null and b/docs/public/catalog/assets/a1c4ba842d1941d5.jpg differ
diff --git a/docs/public/catalog/assets/a300f59c31d2ea16.jpg b/docs/public/catalog/assets/a300f59c31d2ea16.jpg
new file mode 100644
index 0000000000..d5ca2e945b
Binary files /dev/null and b/docs/public/catalog/assets/a300f59c31d2ea16.jpg differ
diff --git a/docs/public/catalog/assets/a870d0d14a481633.jpg b/docs/public/catalog/assets/a870d0d14a481633.jpg
new file mode 100644
index 0000000000..63bd79fb30
Binary files /dev/null and b/docs/public/catalog/assets/a870d0d14a481633.jpg differ
diff --git a/docs/public/catalog/assets/b9d66d1708156f76.woff2 b/docs/public/catalog/assets/b9d66d1708156f76.woff2
new file mode 100644
index 0000000000..85b8ace25d
Binary files /dev/null and b/docs/public/catalog/assets/b9d66d1708156f76.woff2 differ
diff --git a/docs/public/catalog/assets/bd3c8b0cb5fa618c.woff2 b/docs/public/catalog/assets/bd3c8b0cb5fa618c.woff2
new file mode 100644
index 0000000000..981284b69a
Binary files /dev/null and b/docs/public/catalog/assets/bd3c8b0cb5fa618c.woff2 differ
diff --git a/docs/public/catalog/assets/c6ba3c460ea77557.png b/docs/public/catalog/assets/c6ba3c460ea77557.png
new file mode 100644
index 0000000000..2cff579e61
Binary files /dev/null and b/docs/public/catalog/assets/c6ba3c460ea77557.png differ
diff --git a/docs/public/catalog/assets/d0d4e818808f2a0b.woff2 b/docs/public/catalog/assets/d0d4e818808f2a0b.woff2
new file mode 100644
index 0000000000..3a4e333fc9
Binary files /dev/null and b/docs/public/catalog/assets/d0d4e818808f2a0b.woff2 differ
diff --git a/docs/public/catalog/assets/d5c0ed7b8b5dde97.woff2 b/docs/public/catalog/assets/d5c0ed7b8b5dde97.woff2
new file mode 100644
index 0000000000..4db8333cac
Binary files /dev/null and b/docs/public/catalog/assets/d5c0ed7b8b5dde97.woff2 differ
diff --git a/docs/public/catalog/assets/da6ec924a99c8d3c.jpg b/docs/public/catalog/assets/da6ec924a99c8d3c.jpg
new file mode 100644
index 0000000000..596d527624
Binary files /dev/null and b/docs/public/catalog/assets/da6ec924a99c8d3c.jpg differ
diff --git a/docs/public/catalog/assets/df3dc3536491ffca.woff2 b/docs/public/catalog/assets/df3dc3536491ffca.woff2
new file mode 100644
index 0000000000..d5cf9541b0
Binary files /dev/null and b/docs/public/catalog/assets/df3dc3536491ffca.woff2 differ
diff --git a/docs/public/catalog/assets/e234267390ffd6ff.woff2 b/docs/public/catalog/assets/e234267390ffd6ff.woff2
new file mode 100644
index 0000000000..0a42261744
Binary files /dev/null and b/docs/public/catalog/assets/e234267390ffd6ff.woff2 differ
diff --git a/docs/public/catalog/assets/e3da3426014c6290.wav b/docs/public/catalog/assets/e3da3426014c6290.wav
new file mode 100644
index 0000000000..fff1a74458
Binary files /dev/null and b/docs/public/catalog/assets/e3da3426014c6290.wav differ
diff --git a/docs/public/catalog/assets/e54cc7816d9d1215.jpg b/docs/public/catalog/assets/e54cc7816d9d1215.jpg
new file mode 100644
index 0000000000..a06d0b265e
Binary files /dev/null and b/docs/public/catalog/assets/e54cc7816d9d1215.jpg differ
diff --git a/docs/public/catalog/assets/e830283620536135.jpg b/docs/public/catalog/assets/e830283620536135.jpg
new file mode 100644
index 0000000000..816d5ee0e8
Binary files /dev/null and b/docs/public/catalog/assets/e830283620536135.jpg differ
diff --git a/docs/public/catalog/assets/f0d9dd220ced5635.jpg b/docs/public/catalog/assets/f0d9dd220ced5635.jpg
new file mode 100644
index 0000000000..ae9c23d192
Binary files /dev/null and b/docs/public/catalog/assets/f0d9dd220ced5635.jpg differ
diff --git a/docs/public/catalog/assets/f1f4fe4111dbd265.wav b/docs/public/catalog/assets/f1f4fe4111dbd265.wav
new file mode 100644
index 0000000000..3dd731b052
Binary files /dev/null and b/docs/public/catalog/assets/f1f4fe4111dbd265.wav differ
diff --git a/docs/public/catalog/assets/f6c2640a1c19c3e3.jpg b/docs/public/catalog/assets/f6c2640a1c19c3e3.jpg
new file mode 100644
index 0000000000..b24bdd1b1e
Binary files /dev/null and b/docs/public/catalog/assets/f6c2640a1c19c3e3.jpg differ
diff --git a/docs/public/catalog/assets/f9f942c43b465616.svg b/docs/public/catalog/assets/f9f942c43b465616.svg
new file mode 100644
index 0000000000..1d5721e7c0
--- /dev/null
+++ b/docs/public/catalog/assets/f9f942c43b465616.svg
@@ -0,0 +1,31 @@
+<svg width="263" height="79" viewBox="0 0 263 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z" fill="white"/>
+<path d="M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z" fill="white"/>
+<path d="M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z" fill="white"/>
+<path d="M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z" fill="white"/>
+<path d="M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z" fill="white"/>
+<path d="M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z" fill="white"/>
+<path d="M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z" fill="url(#paint0_linear_2204_3044)"/>
+<path d="M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z" fill="url(#paint1_linear_2204_3044)"/>
+<path d="M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z" fill="white"/>
+<path d="M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z" fill="white"/>
+<path d="M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z" fill="white"/>
+<path d="M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z" fill="white"/>
+<path d="M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z" fill="white"/>
+<path d="M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z" fill="white"/>
+<path d="M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z" fill="white"/>
+<path d="M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z" fill="white"/>
+<path d="M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z" fill="white"/>
+<path d="M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z" fill="white"/>
+<path d="M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_2204_3044" x1="225.869" y1="-3.06048e-05" x2="222.845" y2="37.4821" gradientUnits="userSpaceOnUse">
+<stop stop-color="#06E3FA"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+<linearGradient id="paint1_linear_2204_3044" x1="230.87" y1="39" x2="244.661" y2="6.30303" gradientUnits="userSpaceOnUse">
+<stop stop-color="#06E3FA"/>
+<stop offset="1" stop-color="#4FDB5E"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/docs/public/catalog/blocks/app-showcase.json b/docs/public/catalog/blocks/app-showcase.json
new file mode 100644
index 0000000000..e36f9b61d6
--- /dev/null
+++ b/docs/public/catalog/blocks/app-showcase.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>app-showcase</title>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #0a0a0f;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"app-showcase\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"5.5\"\n    >\n      <!-- Background -->\n      <div class=\"s3-bg\" id=\"s3Bg\"></div>\n      <div class=\"s3-bg-glow\" id=\"s3BgGlow\"></div>\n\n      <!-- Stage wrapper for ambient scale -->\n      <div class=\"s3-stage\" id=\"s3Stage\">\n        <!-- ═══════════════════════════════════════\n           LEFT PHONE — Lifestyle / Motivational\n      ═══════════════════════════════════════ -->\n        <div class=\"s3-phone s3-phone-left\" id=\"s3PhoneLeft\">\n          <div class=\"s3-bezel\">\n            <div class=\"s3-notch\"></div>\n            <div class=\"s3-screen s3-screen-left\">\n              <!-- Abstract exercise shapes -->\n              <div class=\"left-shapes\">\n                <svg viewBox=\"0 0 304 400\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\">\n                  <!-- Abstract running figure — geometric -->\n                  <circle cx=\"152\" cy=\"80\" r=\"28\" fill=\"#271f15\" opacity=\"0.15\" />\n                  <line\n                    x1=\"152\"\n                    y1=\"108\"\n                    x2=\"152\"\n                    y2=\"200\"\n                    stroke=\"#271f15\"\n                    stroke-width=\"6\"\n                    stroke-linecap=\"round\"\n                    opacity=\"0.15\"\n                  />\n                  <line\n                    x1=\"152\"\n                    y1=\"145\"\n                    x2=\"115\"\n                    y2=\"175\"\n                    stroke=\"#271f15\"\n                    stroke-width=\"6\"\n                    stroke-linecap=\"round\"\n                    opacity=\"0.15\"\n                  />\n                  <line\n                    x1=\"152\"\n                    y1=\"145\"\n                    x2=\"195\"\n                    y2=\"165\"\n                    stroke=\"#271f15\"\n                    stroke-width=\"6\"\n                    stroke-linecap=\"round\"\n                    opacity=\"0.15\"\n                  />\n                  <line\n                    x1=\"152\"\n                    y1=\"200\"\n                    x2=\"120\"\n                    y2=\"260\"\n                    stroke=\"#271f15\"\n                    stroke-width=\"6\"\n                    stroke-linecap=\"round\"\n                    opacity=\"0.15\"\n                  />\n                  <line\n                    x1=\"152\"\n                    y1=\"200\"\n                    x2=\"190\"\n                    y2=\"255\"\n                    stroke=\"#271f15\"\n                    stroke-width=\"6\"\n                    stroke-linecap=\"round\"\n                    opacity=\"0.15\"\n                  />\n                  <!-- Decorative arcs -->\n                  <path\n                    d=\"M60 300 Q152 240 244 300\"\n                    stroke=\"#e4fa72\"\n                    stroke-width=\"3\"\n                    fill=\"none\"\n                    opacity=\"0.5\"\n                  />\n                  <path\n                    d=\"M40 330 Q152 260 264 330\"\n                    stroke=\"#e4fa72\"\n                    stroke-width=\"2\"\n                    fill=\"none\"\n                    opacity=\"0.3\"\n                  />\n                </svg>\n              </div>\n              <div class=\"left-bottom\">\n                <div class=\"left-tagline\" id=\"s3Tagline\">Unleash Full Potential</div>\n                <div class=\"left-cta\">START NOW</div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- ═══════════════════════════════════════\n           CENTER PHONE — Dashboard (Hero)\n      ═══════════════════════════════════════ -->\n        <div class=\"s3-phone s3-phone-center\" id=\"s3PhoneCenter\">\n          <div class=\"s3-bezel\">\n            <div class=\"s3-notch\"></div>\n            <div class=\"s3-screen s3-screen-center\">\n              <!-- Header -->\n              <div class=\"center-header\">\n                <div class=\"center-avatar\">JM</div>\n                <div class=\"center-user-info\">\n                  <div class=\"center-name\">James Medrano</div>\n                  <div class=\"center-subtitle\">Premium Member</div>\n                </div>\n                <div class=\"center-bell\">\n                  <svg viewBox=\"0 0 20 20\" width=\"20\" height=\"20\" fill=\"none\">\n                    <path\n                      d=\"M10 2a5 5 0 00-5 5v3l-1.5 2.5h13L15 10V7a5 5 0 00-5-5z\"\n                      stroke=\"#7c857c\"\n                      stroke-width=\"1.4\"\n                      stroke-linejoin=\"round\"\n                    />\n                    <path\n                      d=\"M8 16.5a2 2 0 004 0\"\n                      stroke=\"#7c857c\"\n                      stroke-width=\"1.4\"\n                      stroke-linecap=\"round\"\n                    />\n                    <circle cx=\"14\" cy=\"5\" r=\"3\" fill=\"#e4fa72\" />\n                  </svg>\n                </div>\n              </div>\n\n              <!-- Weekly Goal -->\n              <div class=\"center-goal\">\n                <div class=\"goal-label\">Weekly Goal</div>\n                <div class=\"goal-ring-wrap\">\n                  <svg class=\"goal-ring\" viewBox=\"0 0 140 140\">\n                    <circle\n                      class=\"ring-track\"\n                      cx=\"70\"\n                      cy=\"70\"\n                      r=\"52\"\n                      fill=\"none\"\n                      stroke=\"#333\"\n                      stroke-width=\"10\"\n                    />\n                    <circle\n                      class=\"ring-fill\"\n                      id=\"s3Ring\"\n                      cx=\"70\"\n                      cy=\"70\"\n                      r=\"52\"\n                      fill=\"none\"\n                      stroke=\"#e4fa72\"\n                      stroke-width=\"10\"\n                      stroke-linecap=\"round\"\n                      transform=\"rotate(-90 70 70)\"\n                    />\n                  </svg>\n                  <div class=\"goal-count\">\n                    <span class=\"goal-num\">2</span>\n                    <span class=\"goal-sep\">/</span>\n                    <span class=\"goal-den\">3</span>\n                  </div>\n                </div>\n                <div class=\"goal-days\">\n                  <span class=\"day done\">M</span>\n                  <span class=\"day done\">T</span>\n                  <span class=\"day\">W</span>\n                  <span class=\"day\">T</span>\n                  <span class=\"day\">F</span>\n                  <span class=\"day\">S</span>\n                  <span class=\"day\">S</span>\n                </div>\n              </div>\n\n              <!-- Your Progress -->\n              <div class=\"center-progress\">\n                <div class=\"progress-header\">\n                  <span class=\"progress-title\">Your Progress</span>\n                  <span class=\"progress-link\">See all</span>\n                </div>\n                <div class=\"progress-bars\">\n                  <div class=\"bar-row\">\n                    <div class=\"bar-icon\">\n                      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\">\n                        <path\n                          d=\"M8 2l1.5 3H13l-2.5 2 1 3L8 8.5 4.5 10l1-3L3 5h3.5z\"\n                          fill=\"#e4fa72\"\n                        />\n                      </svg>\n                    </div>\n                    <div class=\"bar-info\">\n                      <span class=\"bar-name\">Running</span>\n                      <span class=\"bar-val\">5.2 km</span>\n                    </div>\n                    <div class=\"bar-track\"><div class=\"bar-value bar-v1\" id=\"s3Bar1\"></div></div>\n                  </div>\n                  <div class=\"bar-row\">\n                    <div class=\"bar-icon\">\n                      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\">\n                        <circle cx=\"8\" cy=\"8\" r=\"5\" stroke=\"#e4fa72\" stroke-width=\"2\" />\n                      </svg>\n                    </div>\n                    <div class=\"bar-info\">\n                      <span class=\"bar-name\">Cycling</span>\n                      <span class=\"bar-val\">12.8 km</span>\n                    </div>\n                    <div class=\"bar-track\"><div class=\"bar-value bar-v2\" id=\"s3Bar2\"></div></div>\n                  </div>\n                  <div class=\"bar-row\">\n                    <div class=\"bar-icon\">\n                      <svg viewBox=\"0 0 16 16\" width=\"14\" height=\"14\" fill=\"none\">\n                        <rect\n                          x=\"3\"\n                          y=\"6\"\n                          width=\"10\"\n                          height=\"6\"\n                          rx=\"1\"\n                          stroke=\"#e4fa72\"\n                          stroke-width=\"1.5\"\n                        />\n                        <path d=\"M6 6V4a2 2 0 014 0v2\" stroke=\"#e4fa72\" stroke-width=\"1.5\" />\n                      </svg>\n                    </div>\n                    <div class=\"bar-info\">\n                      <span class=\"bar-name\">Strength</span>\n                      <span class=\"bar-val\">45 min</span>\n                    </div>\n                    <div class=\"bar-track\"><div class=\"bar-value bar-v3\" id=\"s3Bar3\"></div></div>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- ═══════════════════════════════════════\n           RIGHT PHONE — Calories Data\n      ═══════════════════════════════════════ -->\n        <div class=\"s3-phone s3-phone-right\" id=\"s3PhoneRight\">\n          <div class=\"s3-bezel\">\n            <div class=\"s3-notch\"></div>\n            <div class=\"s3-screen s3-screen-right\">\n              <div class=\"right-header\">\n                <div class=\"right-title\">Burned Calories</div>\n                <div class=\"right-value\">740 <span class=\"right-unit\">kcal</span></div>\n              </div>\n\n              <div class=\"right-graph-wrap\">\n                <svg class=\"right-graph\" viewBox=\"0 0 260 130\" xmlns=\"http://www.w3.org/2000/svg\">\n                  <!-- Grid lines -->\n                  <line\n                    x1=\"10\"\n                    y1=\"25\"\n                    x2=\"250\"\n                    y2=\"25\"\n                    stroke=\"#d9e0bc\"\n                    stroke-width=\"0.5\"\n                    opacity=\"0.5\"\n                  />\n                  <line\n                    x1=\"10\"\n                    y1=\"55\"\n                    x2=\"250\"\n                    y2=\"55\"\n                    stroke=\"#d9e0bc\"\n                    stroke-width=\"0.5\"\n                    opacity=\"0.5\"\n                  />\n                  <line\n                    x1=\"10\"\n                    y1=\"85\"\n                    x2=\"250\"\n                    y2=\"85\"\n                    stroke=\"#d9e0bc\"\n                    stroke-width=\"0.5\"\n                    opacity=\"0.5\"\n                  />\n                  <line\n                    x1=\"10\"\n                    y1=\"115\"\n                    x2=\"250\"\n                    y2=\"115\"\n                    stroke=\"#d9e0bc\"\n                    stroke-width=\"0.5\"\n                    opacity=\"0.5\"\n                  />\n                  <!-- Area fill -->\n                  <path\n                    class=\"graph-area\"\n                    id=\"s3GraphArea\"\n                    d=\"M10,105 L50,80 90,90 130,45 170,60 210,25 250,35 250,115 10,115 Z\"\n                    fill=\"#e4fa72\"\n                    opacity=\"0.15\"\n                  />\n                  <!-- Line -->\n                  <polyline\n                    class=\"graph-line\"\n                    id=\"s3GraphLine\"\n                    points=\"10,105 50,80 90,90 130,45 170,60 210,25 250,35\"\n                    fill=\"none\"\n                    stroke=\"#e4fa72\"\n                    stroke-width=\"2.5\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                  <!-- Dots -->\n                  <circle class=\"graph-dot\" cx=\"10\" cy=\"105\" r=\"3.5\" fill=\"#e4fa72\" />\n                  <circle class=\"graph-dot\" cx=\"50\" cy=\"80\" r=\"3.5\" fill=\"#e4fa72\" />\n                  <circle class=\"graph-dot\" cx=\"90\" cy=\"90\" r=\"3.5\" fill=\"#e4fa72\" />\n                  <circle class=\"graph-dot\" cx=\"130\" cy=\"45\" r=\"3.5\" fill=\"#e4fa72\" />\n                  <circle class=\"graph-dot\" cx=\"170\" cy=\"60\" r=\"3.5\" fill=\"#e4fa72\" />\n                  <circle class=\"graph-dot\" cx=\"210\" cy=\"25\" r=\"3.5\" fill=\"#e4fa72\" />\n                  <circle class=\"graph-dot\" cx=\"250\" cy=\"35\" r=\"3.5\" fill=\"#e4fa72\" />\n                </svg>\n                <div class=\"right-labels\">\n                  <span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span\n                  ><span>Sat</span><span>Sun</span>\n                </div>\n              </div>\n\n              <div class=\"right-stats\">\n                <div class=\"stat-pill\">\n                  <span class=\"stat-dot\" style=\"background: #e4fa72\"></span>\n                  <span class=\"stat-label\">Active</span>\n                  <span class=\"stat-num\">540</span>\n                </div>\n                <div class=\"stat-pill\">\n                  <span class=\"stat-dot\" style=\"background: #7c857c\"></span>\n                  <span class=\"stat-label\">Rest</span>\n                  <span class=\"stat-num\">200</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <style>\n        @import url(\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap\");\n\n        [data-composition-id=\"app-showcase\"] {\n          position: relative;\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          font-family: \"DM Sans\", sans-serif;\n          color: #271f15;\n        }\n\n        /* ── Background ── */\n        [data-composition-id=\"app-showcase\"] .s3-bg {\n          position: absolute;\n          inset: 0;\n          background: linear-gradient(160deg, #f1f2ec 0%, #e8ecda 40%, #f1f2ec 100%);\n        }\n        [data-composition-id=\"app-showcase\"] .s3-bg-glow {\n          position: absolute;\n          width: 900px;\n          height: 900px;\n          top: 50%;\n          left: 50%;\n          transform: translate(-50%, -50%);\n          background: radial-gradient(circle, rgba(228, 250, 114, 0.18) 0%, transparent 70%);\n          border-radius: 50%;\n        }\n\n        /* ── Stage ── */\n        [data-composition-id=\"app-showcase\"] .s3-stage {\n          position: absolute;\n          inset: 0;\n          transform-origin: center center;\n        }\n\n        /* ── Phones ── */\n        [data-composition-id=\"app-showcase\"] .s3-phone {\n          position: absolute;\n          width: 320px;\n          height: 650px;\n          top: 215px;\n          left: 800px;\n        }\n        [data-composition-id=\"app-showcase\"] .s3-phone-center {\n          z-index: 30;\n        }\n        [data-composition-id=\"app-showcase\"] .s3-phone-left {\n          z-index: 20;\n        }\n        [data-composition-id=\"app-showcase\"] .s3-phone-right {\n          z-index: 20;\n        }\n\n        /* ── Bezel ── */\n        [data-composition-id=\"app-showcase\"] .s3-bezel {\n          width: 100%;\n          height: 100%;\n          border-radius: 42px;\n          background: #271f15;\n          padding: 8px;\n          box-shadow:\n            0 24px 64px rgba(39, 31, 21, 0.35),\n            0 4px 16px rgba(39, 31, 21, 0.15);\n          position: relative;\n          overflow: hidden;\n        }\n        [data-composition-id=\"app-showcase\"] .s3-notch {\n          position: absolute;\n          top: 8px;\n          left: 50%;\n          transform: translateX(-50%);\n          width: 100px;\n          height: 26px;\n          background: #271f15;\n          border-radius: 0 0 18px 18px;\n          z-index: 5;\n        }\n\n        /* ── Screens ── */\n        [data-composition-id=\"app-showcase\"] .s3-screen {\n          width: 100%;\n          height: 100%;\n          border-radius: 36px;\n          overflow: hidden;\n          position: relative;\n        }\n\n        /* Left screen */\n        [data-composition-id=\"app-showcase\"] .s3-screen-left {\n          background: linear-gradient(160deg, #d9e0bc 0%, #c8d4a0 50%, #b8c78a 100%);\n          display: flex;\n          flex-direction: column;\n          justify-content: flex-end;\n        }\n        [data-composition-id=\"app-showcase\"] .left-shapes {\n          position: absolute;\n          top: 40px;\n          left: 0;\n          width: 100%;\n          height: 400px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        [data-composition-id=\"app-showcase\"] .left-shapes svg {\n          width: 200px;\n          height: 280px;\n        }\n        [data-composition-id=\"app-showcase\"] .left-bottom {\n          padding: 0 28px 40px;\n          position: relative;\n          z-index: 2;\n        }\n        [data-composition-id=\"app-showcase\"] .left-tagline {\n          font-size: 28px;\n          font-weight: 700;\n          color: #271f15;\n          line-height: 1.15;\n          margin-bottom: 16px;\n          letter-spacing: -0.02em;\n        }\n        [data-composition-id=\"app-showcase\"] .left-cta {\n          display: inline-block;\n          background: #271f15;\n          color: #e4fa72;\n          font-size: 13px;\n          font-weight: 700;\n          letter-spacing: 0.08em;\n          padding: 10px 28px;\n          border-radius: 24px;\n        }\n\n        /* Center screen */\n        [data-composition-id=\"app-showcase\"] .s3-screen-center {\n          background: #1a1a1a;\n          padding: 42px 22px 22px;\n          display: flex;\n          flex-direction: column;\n          gap: 18px;\n        }\n\n        [data-composition-id=\"app-showcase\"] .center-header {\n          display: flex;\n          align-items: center;\n          gap: 10px;\n        }\n        [data-composition-id=\"app-showcase\"] .center-avatar {\n          width: 40px;\n          height: 40px;\n          border-radius: 50%;\n          background: linear-gradient(135deg, #e4fa72, #d9e0bc);\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-size: 15px;\n          font-weight: 700;\n          color: #271f15;\n          flex-shrink: 0;\n        }\n        [data-composition-id=\"app-showcase\"] .center-user-info {\n          flex: 1;\n        }\n        [data-composition-id=\"app-showcase\"] .center-name {\n          font-size: 18px;\n          font-weight: 700;\n          color: #f1f2ec;\n          line-height: 1.2;\n        }\n        [data-composition-id=\"app-showcase\"] .center-subtitle {\n          font-size: 12px;\n          font-weight: 400;\n          color: #7c857c;\n          margin-top: 1px;\n        }\n        [data-composition-id=\"app-showcase\"] .center-bell {\n          flex-shrink: 0;\n        }\n\n        /* Weekly Goal */\n        [data-composition-id=\"app-showcase\"] .center-goal {\n          background: #242424;\n          border-radius: 20px;\n          padding: 18px 16px;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 12px;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-label {\n          font-size: 15px;\n          font-weight: 500;\n          color: #7c857c;\n          align-self: flex-start;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-ring-wrap {\n          position: relative;\n          width: 130px;\n          height: 130px;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-ring {\n          width: 100%;\n          height: 100%;\n        }\n        [data-composition-id=\"app-showcase\"] .ring-track {\n          opacity: 0.3;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-count {\n          position: absolute;\n          inset: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          gap: 2px;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-num {\n          font-size: 36px;\n          font-weight: 700;\n          color: #e4fa72;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-sep {\n          font-size: 24px;\n          font-weight: 400;\n          color: #7c857c;\n          margin: 0 2px;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-den {\n          font-size: 24px;\n          font-weight: 400;\n          color: #7c857c;\n        }\n        [data-composition-id=\"app-showcase\"] .goal-days {\n          display: flex;\n          gap: 8px;\n        }\n        [data-composition-id=\"app-showcase\"] .day {\n          width: 28px;\n          height: 28px;\n          border-radius: 50%;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-size: 11px;\n          font-weight: 500;\n          color: #7c857c;\n          background: #1a1a1a;\n        }\n        [data-composition-id=\"app-showcase\"] .day.done {\n          background: #e4fa72;\n          color: #271f15;\n          font-weight: 700;\n        }\n\n        /* Progress section */\n        [data-composition-id=\"app-showcase\"] .center-progress {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n        }\n        [data-composition-id=\"app-showcase\"] .progress-header {\n          display: flex;\n          justify-content: space-between;\n          align-items: center;\n        }\n        [data-composition-id=\"app-showcase\"] .progress-title {\n          font-size: 15px;\n          font-weight: 500;\n          color: #f1f2ec;\n        }\n        [data-composition-id=\"app-showcase\"] .progress-link {\n          font-size: 12px;\n          font-weight: 400;\n          color: #e4fa72;\n        }\n        [data-composition-id=\"app-showcase\"] .progress-bars {\n          display: flex;\n          flex-direction: column;\n          gap: 12px;\n        }\n        [data-composition-id=\"app-showcase\"] .bar-row {\n          display: flex;\n          align-items: center;\n          gap: 10px;\n        }\n        [data-composition-id=\"app-showcase\"] .bar-icon {\n          width: 28px;\n          height: 28px;\n          border-radius: 8px;\n          background: #2a2a2a;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          flex-shrink: 0;\n        }\n        [data-composition-id=\"app-showcase\"] .bar-info {\n          width: 70px;\n          flex-shrink: 0;\n        }\n        [data-composition-id=\"app-showcase\"] .bar-name {\n          display: block;\n          font-size: 12px;\n          font-weight: 500;\n          color: #f1f2ec;\n          line-height: 1.2;\n        }\n        [data-composition-id=\"app-showcase\"] .bar-val {\n          display: block;\n          font-size: 10px;\n          font-weight: 400;\n          color: #7c857c;\n        }\n        [data-composition-id=\"app-showcase\"] .bar-track {\n          flex: 1;\n          height: 8px;\n          background: #2a2a2a;\n          border-radius: 4px;\n          overflow: hidden;\n        }\n        [data-composition-id=\"app-showcase\"] .bar-value {\n          height: 100%;\n          border-radius: 4px;\n          background: #e4fa72;\n          width: 0%;\n        }\n\n        /* Right screen */\n        [data-composition-id=\"app-showcase\"] .s3-screen-right {\n          background: #f1f2ec;\n          padding: 42px 20px 24px;\n          display: flex;\n          flex-direction: column;\n          gap: 14px;\n        }\n        [data-composition-id=\"app-showcase\"] .right-header {\n          display: flex;\n          flex-direction: column;\n          gap: 4px;\n        }\n        [data-composition-id=\"app-showcase\"] .right-title {\n          font-size: 14px;\n          font-weight: 500;\n          color: #7c857c;\n        }\n        [data-composition-id=\"app-showcase\"] .right-value {\n          font-size: 40px;\n          font-weight: 700;\n          color: #271f15;\n          line-height: 1;\n          letter-spacing: -0.03em;\n        }\n        [data-composition-id=\"app-showcase\"] .right-unit {\n          font-size: 20px;\n          font-weight: 400;\n          color: #7c857c;\n        }\n\n        [data-composition-id=\"app-showcase\"] .right-graph-wrap {\n          flex: 1;\n          display: flex;\n          flex-direction: column;\n          gap: 6px;\n        }\n        [data-composition-id=\"app-showcase\"] .right-graph {\n          width: 100%;\n          flex: 1;\n        }\n        [data-composition-id=\"app-showcase\"] .right-labels {\n          display: flex;\n          justify-content: space-between;\n          padding: 0 6px;\n          font-size: 10px;\n          font-weight: 400;\n          color: #7c857c;\n        }\n\n        [data-composition-id=\"app-showcase\"] .right-stats {\n          display: flex;\n          gap: 12px;\n        }\n        [data-composition-id=\"app-showcase\"] .stat-pill {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          background: #e8ecda;\n          border-radius: 20px;\n          padding: 8px 14px;\n        }\n        [data-composition-id=\"app-showcase\"] .stat-dot {\n          width: 8px;\n          height: 8px;\n          border-radius: 50%;\n          flex-shrink: 0;\n        }\n        [data-composition-id=\"app-showcase\"] .stat-label {\n          font-size: 12px;\n          font-weight: 400;\n          color: #7c857c;\n        }\n        [data-composition-id=\"app-showcase\"] .stat-num {\n          font-size: 13px;\n          font-weight: 700;\n          color: #271f15;\n        }\n      </style>\n\n      <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n      <script>\n        (function () {\n          var S = '[data-composition-id=\"app-showcase\"] ';\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n\n          // ── SVG setup ──\n          var graphLine = document.querySelector(S + \"#s3GraphLine\");\n          var graphLen = graphLine.getTotalLength();\n          gsap.set(graphLine, { strokeDasharray: graphLen, strokeDashoffset: graphLen });\n\n          var graphArea = document.querySelector(S + \"#s3GraphArea\");\n          gsap.set(graphArea, { opacity: 0 });\n\n          var graphDots = document.querySelectorAll(S + \".graph-dot\");\n          gsap.set(graphDots, { opacity: 0, scale: 0 });\n\n          var CIRC = 2 * 3.14159265 * 52;\n          gsap.set(S + \"#s3Ring\", { strokeDasharray: CIRC, strokeDashoffset: CIRC });\n\n          // ── Initial states ──\n          gsap.set(S + \".s3-bg\", { opacity: 0 });\n          gsap.set(S + \".s3-bg-glow\", { opacity: 0 });\n          // Center phone: starts scaled down + hidden\n          gsap.set(S + \"#s3PhoneCenter\", { opacity: 0, scale: 0.85 });\n          // Side phones: start stacked behind center (same position), hidden\n          gsap.set(S + \"#s3PhoneLeft\", { opacity: 0, x: 0, rotation: 0 });\n          gsap.set(S + \"#s3PhoneRight\", { opacity: 0, x: 0, rotation: 0 });\n          gsap.set(S + \".bar-value\", { width: \"0%\" });\n          gsap.set(S + \"#s3Tagline\", { opacity: 0, y: 20 });\n          gsap.set(S + \".left-cta\", { opacity: 0, y: 12 });\n\n          // ════════════════════════════════════\n          // BUILD PHASE (0–2s)\n          // ════════════════════════════════════\n\n          // Background\n          tl.to(S + \".s3-bg\", { opacity: 1, duration: 0.8, ease: \"power1.out\" }, 0);\n          tl.to(S + \".s3-bg-glow\", { opacity: 1, duration: 1.2, ease: \"power1.out\" }, 0.2);\n\n          // Center phone — scales up first\n          tl.to(\n            S + \"#s3PhoneCenter\",\n            {\n              scale: 1,\n              opacity: 1,\n              duration: 0.7,\n              ease: \"back.out(1.4)\",\n            },\n            0.2,\n          );\n\n          // Side phones: opacity matches center (0.7s, back.out), fan starts at 0.1\n          tl.to(S + \"#s3PhoneLeft\", { opacity: 1, duration: 0.7, ease: \"back.out(1.4)\" }, 0.3);\n          tl.to(\n            S + \"#s3PhoneLeft\",\n            {\n              x: -340,\n              rotation: -12,\n              duration: 1.2,\n              ease: \"expo.out\",\n            },\n            0.3,\n          );\n\n          tl.to(S + \"#s3PhoneRight\", { opacity: 1, duration: 0.7, ease: \"back.out(1.4)\" }, 0.4);\n          tl.to(\n            S + \"#s3PhoneRight\",\n            {\n              x: 340,\n              rotation: 12,\n              duration: 1.2,\n              ease: \"expo.out\",\n            },\n            0.4,\n          );\n\n          // ════════════════════════════════════\n          // BREATHE PHASE (2–4s)\n          // ════════════════════════════════════\n\n          // Progress ring fills to 2/3\n          tl.to(\n            S + \"#s3Ring\",\n            {\n              strokeDashoffset: CIRC * (1 - 2 / 3),\n              duration: 1.2,\n              ease: \"circ.out\",\n            },\n            1.8,\n          );\n\n          // Activity bars stagger in\n          tl.to(S + \"#s3Bar1\", { width: \"75%\", duration: 0.8, ease: \"power3.out\" }, 2.1);\n          tl.to(S + \"#s3Bar2\", { width: \"50%\", duration: 0.8, ease: \"power3.out\" }, 2.3);\n          tl.to(S + \"#s3Bar3\", { width: \"90%\", duration: 0.8, ease: \"power3.out\" }, 2.5);\n\n          // Graph line draws on\n          tl.to(\n            graphLine,\n            {\n              strokeDashoffset: 0,\n              duration: 1.4,\n              ease: \"sine.inOut\",\n            },\n            2.0,\n          );\n\n          // Graph area fades in\n          tl.to(graphArea, { opacity: 0.15, duration: 0.8, ease: \"power1.out\" }, 2.6);\n\n          // Graph dots pop in\n          tl.to(\n            graphDots,\n            {\n              opacity: 1,\n              scale: 1,\n              duration: 0.3,\n              ease: \"back.out(2)\",\n              stagger: { each: 0.06, ease: \"power2.in\" },\n            },\n            3.0,\n          );\n\n          // Tagline and CTA on left phone\n          tl.to(\n            S + \"#s3Tagline\",\n            {\n              opacity: 1,\n              y: 0,\n              duration: 0.6,\n              ease: \"power2.out\",\n            },\n            2.2,\n          );\n          tl.to(\n            S + \".left-cta\",\n            {\n              opacity: 1,\n              y: 0,\n              duration: 0.5,\n              ease: \"power2.out\",\n            },\n            2.5,\n          );\n\n          // Ambient slow scale push\n          tl.to(\n            S + \"#s3Stage\",\n            {\n              scale: 1.02,\n              duration: 3.5,\n              ease: \"sine.inOut\",\n            },\n            2.0,\n          );\n\n          // ════════════════════════════════════\n          // RESOLVE PHASE (4–5.5s)\n          // ════════════════════════════════════\n\n          // Subtle glow pulse on lime accent elements\n          tl.to(S + \".ring-fill\", { opacity: 0.65, duration: 0.6, ease: \"sine.inOut\" }, 4.0);\n          tl.to(S + \".ring-fill\", { opacity: 1, duration: 0.6, ease: \"sine.inOut\" }, 4.6);\n\n          tl.to(S + \".bar-value\", { opacity: 0.7, duration: 0.6, ease: \"sine.inOut\" }, 4.1);\n          tl.to(S + \".bar-value\", { opacity: 1, duration: 0.6, ease: \"sine.inOut\" }, 4.7);\n\n          tl.to(graphLine, { opacity: 0.65, duration: 0.6, ease: \"sine.inOut\" }, 4.05);\n          tl.to(graphLine, { opacity: 1, duration: 0.6, ease: \"sine.inOut\" }, 4.65);\n\n          window.__timelines[\"app-showcase\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/apple-money-count.json b/docs/public/catalog/blocks/apple-money-count.json
new file mode 100644
index 0000000000..9320779599
--- /dev/null
+++ b/docs/public/catalog/blocks/apple-money-count.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #fdfefe;\n      }\n\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #fdfefe;\n        color: #111315;\n        font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n      }\n\n      .green-flash {\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n        background: #30d158;\n        opacity: 0;\n      }\n\n      .stage-content {\n        position: relative;\n        z-index: 5;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        justify-content: center;\n        padding: 120px 160px;\n      }\n\n      .amount-wrap {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-width: 1080px;\n        min-height: 260px;\n      }\n\n      .amount {\n        position: relative;\n        color: #111315;\n        font-size: 190px;\n        font-weight: 900;\n        line-height: 0.9;\n        letter-spacing: 0;\n        font-variant-numeric: tabular-nums;\n        text-align: center;\n        white-space: nowrap;\n        text-shadow:\n          0 3px 0 rgba(255, 255, 255, 0.58),\n          0 18px 36px rgba(17, 19, 21, 0.14),\n          0 42px 92px rgba(17, 19, 21, 0.1);\n        will-change: transform, color, opacity, text-shadow;\n      }\n\n      .money-burst {\n        position: absolute;\n        inset: 0;\n        z-index: 8;\n        pointer-events: none;\n      }\n\n      .money-icon {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        display: grid;\n        place-items: center;\n        opacity: 0;\n        filter: drop-shadow(0 20px 24px rgba(7, 84, 31, 0.2));\n        will-change: transform, opacity, filter;\n      }\n\n      .money-icon.bill {\n        width: 96px;\n        height: 52px;\n        border-radius: 10px;\n        background: #30d158;\n        box-shadow:\n          inset 0 0 0 3px rgba(7, 84, 31, 0.2),\n          inset 0 -10px 18px rgba(7, 84, 31, 0.1),\n          0 16px 26px rgba(7, 84, 31, 0.2),\n          0 34px 64px rgba(7, 84, 31, 0.16);\n      }\n\n      .money-icon.bill::before {\n        position: absolute;\n        inset: 9px 16px;\n        border: 2px solid rgba(7, 84, 31, 0.28);\n        border-radius: 999px;\n        content: \"\";\n      }\n\n      .money-icon.coin {\n        width: 64px;\n        height: 64px;\n        border-radius: 50%;\n        background: radial-gradient(circle at 34% 30%, #fff7a6 0%, #ffd54f 40%, #d9a514 100%);\n        box-shadow:\n          inset 0 0 0 4px rgba(111, 76, 0, 0.12),\n          inset 0 -8px 14px rgba(111, 76, 0, 0.1),\n          0 16px 30px rgba(111, 76, 0, 0.18),\n          0 34px 58px rgba(111, 76, 0, 0.12);\n      }\n\n      .money-icon .mark {\n        position: relative;\n        z-index: 1;\n        color: #07541f;\n        font-size: 30px;\n        font-weight: 900;\n        line-height: 1;\n      }\n\n      .money-icon.coin .mark {\n        color: #6f4c00;\n        font-size: 28px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"apple-money-count\"\n      data-root=\"true\"\n      data-start=\"0\"\n      data-duration=\"5\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"greenFlash\" class=\"green-flash\"></div>\n      <div class=\"stage-content\">\n        <div class=\"amount-wrap\">\n          <div id=\"amount\" class=\"amount\">$0</div>\n        </div>\n      </div>\n      <div id=\"moneyBurst\" class=\"money-burst\" data-layout-allow-overflow></div>\n      <audio\n        id=\"sfxTrack\"\n        data-start=\"0\"\n        data-duration=\"5\"\n        data-track-index=\"9\"\n        src=\"/public/catalog/assets/1f67e32b14a9ed2e.wav\"\n        data-volume=\"0.92\"\n      ></audio>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const amount = document.querySelector(\"#amount\");\n      const moneyBurst = document.querySelector(\"#moneyBurst\");\n      const countState = { value: 0 };\n\n      function formatMoney(value) {\n        const bounded = Math.max(0, Math.min(10000, value));\n        const rounded = Math.round(bounded);\n        return \"$\" + rounded.toLocaleString(\"en-US\");\n      }\n\n      function renderAmount(value) {\n        amount.textContent = formatMoney(value);\n      }\n\n      const moneyIcons = [];\n      const moneySpecs = [];\n\n      for (let i = 0; i < 62; i += 1) {\n        const icon = document.createElement(\"div\");\n        const isCoin = i % 3 === 0;\n        icon.className = \"money-icon \" + (isCoin ? \"coin\" : \"bill\");\n        icon.innerHTML = '<span class=\"mark\">$</span>';\n        moneyBurst.appendChild(icon);\n        moneyIcons.push(icon);\n\n        const angle = i * 2.399963229728653;\n        const ring = i % 5;\n        const radiusX = 260 + ring * 145 + (i % 7) * 12;\n        const radiusY = 160 + ring * 78 + (i % 6) * 12;\n        const offsetX = (i % 4) * 24 - 36;\n        const offsetY = (i % 5) * 18 - 36;\n        const x = Math.max(-865, Math.min(865, Math.cos(angle) * radiusX + offsetX));\n        const y = Math.max(-465, Math.min(465, Math.sin(angle * 1.13) * radiusY + offsetY));\n\n        moneySpecs.push({\n          x,\n          y,\n          delay: (i % 8) * 0.025,\n          duration: 0.74 + (i % 5) * 0.045,\n          fadeDelay: (i % 5) * 0.05,\n          rotation: ((i * 43) % 160) - 80,\n          scale: isCoin ? 0.72 + (i % 4) * 0.08 : 0.68 + (i % 5) * 0.07,\n        });\n      }\n\n      renderAmount(0);\n\n      const tl = gsap.timeline({\n        paused: true,\n        defaults: { ease: \"power3.out\" },\n      });\n\n      gsap.set(moneyIcons, {\n        x: 0,\n        y: 0,\n        xPercent: -50,\n        yPercent: -50,\n        opacity: 0,\n        scale: 0.18,\n        transformOrigin: \"50% 50%\",\n      });\n\n      tl.from(\n        \"#amount\",\n        {\n          y: 26,\n          opacity: 0,\n          scale: 0.985,\n          duration: 0.45,\n          ease: \"power2.out\",\n        },\n        0,\n      );\n\n      tl.to(\n        countState,\n        {\n          value: 10000,\n          duration: 3.16,\n          ease: \"none\",\n          onUpdate: () => renderAmount(countState.value),\n          onComplete: () => renderAmount(10000),\n        },\n        0,\n      );\n\n      tl.to(\n        \"#amount\",\n        {\n          color: \"#30d158\",\n          textShadow:\n            \"0 3px 0 rgba(255,255,255,0.52), 0 18px 40px rgba(48,209,88,0.3), 0 46px 96px rgba(7,84,31,0.2)\",\n          duration: 0.18,\n        },\n        3.16,\n      );\n      tl.to(\"#amount\", { scale: 1.06, duration: 0.16, ease: \"back.out(2.2)\" }, 3.16);\n      tl.to(\"#amount\", { scale: 1, duration: 0.23, ease: \"power2.out\" }, 3.33);\n\n      tl.to(\"#greenFlash\", { opacity: 0.34, duration: 0.08, ease: \"none\" }, 3.16);\n      tl.to(\"#greenFlash\", { opacity: 0.22, duration: 0.76, ease: \"none\" }, 3.24);\n      tl.to(\"#greenFlash\", { opacity: 0, duration: 0.16, ease: \"power2.out\" }, 4);\n\n      moneyIcons.forEach((icon, i) => {\n        const spec = moneySpecs[i];\n        tl.to(\n          icon,\n          {\n            x: spec.x,\n            y: spec.y,\n            rotation: spec.rotation,\n            scale: spec.scale,\n            opacity: 1,\n            duration: spec.duration,\n            ease: \"power4.out\",\n          },\n          3.28 + spec.delay,\n        );\n        tl.to(\n          icon,\n          {\n            y: spec.y + (spec.y < 0 ? -58 : 58),\n            scale: spec.scale * 0.54,\n            opacity: 0,\n            duration: 0.38,\n            ease: \"power2.in\",\n          },\n          4.18 + spec.fadeDelay,\n        );\n      });\n\n      tl.to(\"#amount\", { opacity: 0, scale: 0.985, duration: 0.28, ease: \"power2.in\" }, 4.36);\n\n      window.__timelines[\"apple-money-count\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/beat-freeze-cut.json b/docs/public/catalog/blocks/beat-freeze-cut.json
new file mode 100644
index 0000000000..b3fff8908d
--- /dev/null
+++ b/docs/public/catalog/blocks/beat-freeze-cut.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Beat Freeze Cut</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700;800;900&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0b0d10;\n      }\n\n      /*\n        EDIT / STUDIO PARAMS\n        ────────────────────\n        Studio color params (CSS custom properties on the root):\n          --bg-color       default #0B0D10\n          --accent-color   default #00E5C7\n\n        Numeric / string params (beat times, labels, intensity) are NOT in the\n        formal registry params schema today (only color keys are used by\n        existing blocks). Edit the CONFIG object in the script below instead.\n      */\n\n      #bfc-root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        --bg-color: #0b0d10;\n        --accent-color: #00e5c7;\n        --bfc-ink: #f4f6f8;\n        --bfc-muted: #a0a8b0;\n        --bfc-panel: #14181f;\n        --bfc-panel-2: #1a2029;\n        --bfc-line: rgba(255, 255, 255, 0.08);\n        font-family:\n          \"Inter\",\n          system-ui,\n          -apple-system,\n          sans-serif;\n        color: var(--bfc-ink);\n      }\n\n      #bfc-bg {\n        position: absolute;\n        inset: 0;\n        background:\n          radial-gradient(ellipse 80% 60% at 50% 40%, rgba(0, 229, 199, 0.07) 0%, transparent 55%),\n          radial-gradient(\n            ellipse 50% 40% at 80% 80%,\n            rgba(255, 255, 255, 0.03) 0%,\n            transparent 50%\n          ),\n          var(--bg-color);\n      }\n\n      #bfc-grid {\n        position: absolute;\n        inset: 0;\n        opacity: 0.22;\n        background-image:\n          linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);\n        background-size: 80px 80px;\n        mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 20%, transparent 75%);\n        pointer-events: none;\n      }\n\n      #bfc-stage {\n        position: absolute;\n        inset: 0;\n        transform-origin: 50% 48%;\n        will-change: transform, filter;\n      }\n\n      #bfc-shot-a,\n      #bfc-shot-b {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n      }\n\n      #bfc-shot-b {\n        visibility: hidden;\n        opacity: 0;\n      }\n\n      /* ── Shot A: single product card hero ── */\n      #bfc-a-crop {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        transform-origin: 50% 50%;\n      }\n\n      #bfc-a-card {\n        position: relative;\n        width: 680px;\n        height: 720px;\n        border-radius: 36px;\n        background:\n          linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, transparent 40%),\n          linear-gradient(180deg, var(--bfc-panel-2) 0%, var(--bfc-panel) 100%);\n        border: 1px solid var(--bfc-line);\n        box-shadow:\n          0 40px 120px rgba(0, 0, 0, 0.55),\n          0 0 0 1px rgba(0, 229, 199, 0.08),\n          inset 0 1px 0 rgba(255, 255, 255, 0.06);\n        overflow: hidden;\n        transform-origin: 50% 50%;\n      }\n\n      #bfc-a-card-glow {\n        position: absolute;\n        left: 50%;\n        top: 28%;\n        width: 420px;\n        height: 420px;\n        margin-left: -210px;\n        margin-top: -210px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(0, 229, 199, 0.28) 0%, transparent 68%);\n        opacity: 0.85;\n        pointer-events: none;\n      }\n\n      #bfc-a-wave {\n        position: absolute;\n        left: 64px;\n        right: 64px;\n        top: 120px;\n        height: 220px;\n      }\n\n      #bfc-a-wave svg {\n        width: 100%;\n        height: 100%;\n        display: block;\n      }\n\n      #bfc-a-wave-path {\n        fill: none;\n        stroke: var(--accent-color);\n        stroke-width: 4;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        opacity: 0.95;\n      }\n\n      #bfc-a-wave-fill {\n        fill: var(--accent-color);\n        opacity: 0.12;\n      }\n\n      #bfc-a-bars {\n        position: absolute;\n        left: 80px;\n        right: 80px;\n        bottom: 160px;\n        height: 96px;\n        display: flex;\n        align-items: flex-end;\n        gap: 10px;\n      }\n\n      .bfc-bar {\n        flex: 1;\n        border-radius: 6px 6px 2px 2px;\n        background: linear-gradient(180deg, var(--accent-color) 0%, rgba(0, 229, 199, 0.25) 100%);\n        transform-origin: 50% 100%;\n        height: 40%;\n      }\n\n      #bfc-a-meta {\n        position: absolute;\n        left: 64px;\n        right: 64px;\n        bottom: 56px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n\n      #bfc-a-kicker {\n        font-size: 18px;\n        font-weight: 600;\n        letter-spacing: 0.18em;\n        text-transform: uppercase;\n        color: var(--bfc-muted);\n      }\n\n      #bfc-a-pill {\n        font-size: 15px;\n        font-weight: 700;\n        letter-spacing: 0.08em;\n        text-transform: uppercase;\n        color: #04120f;\n        background: var(--accent-color);\n        padding: 8px 16px;\n        border-radius: 999px;\n      }\n\n      /* ── Shot B: split layout, higher info density ── */\n      #bfc-b-layout {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        grid-template-columns: 1.05fr 0.95fr;\n        gap: 48px;\n        padding: 100px 110px;\n        align-items: center;\n      }\n\n      #bfc-b-left {\n        display: flex;\n        flex-direction: column;\n        gap: 28px;\n        transform-origin: 0% 50%;\n      }\n\n      #bfc-b-eyebrow {\n        font-size: 20px;\n        font-weight: 700;\n        letter-spacing: 0.22em;\n        text-transform: uppercase;\n        color: var(--accent-color);\n      }\n\n      #bfc-b-title {\n        font-size: 128px;\n        font-weight: 900;\n        line-height: 0.92;\n        letter-spacing: -0.04em;\n        text-transform: uppercase;\n        color: var(--bfc-ink);\n      }\n\n      #bfc-b-sub {\n        font-size: 28px;\n        font-weight: 500;\n        color: var(--bfc-muted);\n        max-width: 520px;\n        line-height: 1.35;\n      }\n\n      #bfc-b-right {\n        display: flex;\n        flex-direction: column;\n        gap: 18px;\n      }\n\n      .bfc-b-card {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 24px;\n        padding: 28px 32px;\n        border-radius: 20px;\n        background: linear-gradient(135deg, var(--bfc-panel-2), var(--bfc-panel));\n        border: 1px solid var(--bfc-line);\n        box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);\n      }\n\n      .bfc-b-card-label {\n        font-size: 18px;\n        font-weight: 600;\n        letter-spacing: 0.12em;\n        text-transform: uppercase;\n        color: var(--bfc-muted);\n      }\n\n      .bfc-b-card-value {\n        font-size: 42px;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        color: var(--bfc-ink);\n      }\n\n      .bfc-b-card-value.accent {\n        color: var(--accent-color);\n      }\n\n      #bfc-b-accent-bar {\n        width: 120px;\n        height: 6px;\n        border-radius: 999px;\n        background: var(--accent-color);\n        opacity: 0.9;\n      }\n\n      /* ── Intro / transient typography ── */\n      #bfc-intro {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 72px;\n        display: flex;\n        justify-content: center;\n        pointer-events: none;\n        z-index: 20;\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      #bfc-intro-label {\n        font-size: 18px;\n        font-weight: 700;\n        letter-spacing: 0.28em;\n        text-transform: uppercase;\n        color: var(--bfc-muted);\n        padding: 10px 18px;\n        border: 1px solid var(--bfc-line);\n        border-radius: 999px;\n        background: rgba(11, 13, 16, 0.55);\n        backdrop-filter: blur(8px);\n      }\n\n      #bfc-hit-type {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        pointer-events: none;\n        z-index: 30;\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      #bfc-hit-type-text {\n        font-size: 160px;\n        font-weight: 900;\n        letter-spacing: -0.04em;\n        text-transform: uppercase;\n        color: var(--bfc-ink);\n        text-shadow:\n          0 0 40px rgba(0, 229, 199, 0.35),\n          0 8px 40px rgba(0, 0, 0, 0.55);\n        -webkit-text-stroke: 2px rgba(0, 0, 0, 0.35);\n        paint-order: stroke fill;\n      }\n\n      /* ── Freeze frame treatment ── */\n      #bfc-freeze {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        z-index: 25;\n        opacity: 0;\n        visibility: hidden;\n      }\n\n      #bfc-freeze-outline {\n        position: absolute;\n        inset: 48px;\n        border: 3px solid var(--accent-color);\n        border-radius: 8px;\n        box-shadow:\n          0 0 0 1px rgba(0, 229, 199, 0.25),\n          inset 0 0 0 1px rgba(0, 229, 199, 0.15),\n          0 0 48px rgba(0, 229, 199, 0.2);\n        opacity: 0;\n      }\n\n      #bfc-freeze-flash {\n        position: absolute;\n        inset: 0;\n        background: #ffffff;\n        opacity: 0;\n        mix-blend-mode: screen;\n      }\n\n      #bfc-freeze-contour {\n        position: absolute;\n        inset: 0;\n        background:\n          linear-gradient(90deg, transparent 0%, rgba(0, 229, 199, 0.08) 48%, transparent 52%),\n          radial-gradient(ellipse 40% 55% at 50% 48%, transparent 40%, rgba(0, 229, 199, 0.18) 100%);\n        opacity: 0;\n        mix-blend-mode: screen;\n      }\n\n      #bfc-freeze-badge {\n        position: absolute;\n        top: 80px;\n        right: 96px;\n        font-size: 16px;\n        font-weight: 800;\n        letter-spacing: 0.2em;\n        text-transform: uppercase;\n        color: #04120f;\n        background: var(--accent-color);\n        padding: 10px 18px;\n        border-radius: 6px;\n        opacity: 0;\n      }\n\n      /* ── Hard-cut connector (directional stretch / blur) ── */\n      #bfc-cut {\n        position: absolute;\n        inset: -8% -20%;\n        pointer-events: none;\n        z-index: 40;\n        opacity: 0;\n        visibility: hidden;\n        background: linear-gradient(\n          90deg,\n          transparent 0%,\n          rgba(0, 229, 199, 0.12) 35%,\n          rgba(255, 255, 255, 0.55) 50%,\n          rgba(0, 229, 199, 0.12) 65%,\n          transparent 100%\n        );\n        filter: blur(18px);\n        transform-origin: 50% 50%;\n      }\n\n      #bfc-vignette {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        z-index: 15;\n        background: radial-gradient(\n          ellipse 75% 70% at 50% 50%,\n          transparent 45%,\n          rgba(0, 0, 0, 0.55) 100%\n        );\n        opacity: 0.85;\n      }\n\n      #bfc-driver {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        opacity: 0;\n        pointer-events: none;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"bfc-root\"\n      data-composition-id=\"beat-freeze-cut\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"bfc-bg\" aria-hidden=\"true\"></div>\n      <div id=\"bfc-grid\" aria-hidden=\"true\"></div>\n\n      <div id=\"bfc-stage\">\n        <!-- Shot A -->\n        <div id=\"bfc-shot-a\">\n          <div id=\"bfc-a-crop\" data-layout-allow-overflow>\n            <div id=\"bfc-a-card\" data-layout-allow-overflow>\n              <div id=\"bfc-a-card-glow\" aria-hidden=\"true\"></div>\n              <div id=\"bfc-a-wave\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 592 220\" preserveAspectRatio=\"none\">\n                  <path\n                    id=\"bfc-a-wave-fill\"\n                    d=\"M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80 L592,220 L0,220 Z\"\n                  />\n                  <path\n                    id=\"bfc-a-wave-path\"\n                    d=\"M0,160 C40,150 60,90 100,100 C140,110 160,40 200,55 C240,70 260,150 300,140 C340,130 360,30 400,45 C440,60 460,130 500,120 C540,110 560,70 592,80\"\n                  />\n                </svg>\n              </div>\n              <div id=\"bfc-a-bars\" aria-hidden=\"true\">\n                <div class=\"bfc-bar\" id=\"bfc-bar-0\" style=\"height: 34%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-1\" style=\"height: 58%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-2\" style=\"height: 42%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-3\" style=\"height: 78%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-4\" style=\"height: 52%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-5\" style=\"height: 88%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-6\" style=\"height: 46%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-7\" style=\"height: 64%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-8\" style=\"height: 36%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-9\" style=\"height: 72%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-10\" style=\"height: 48%\"></div>\n                <div class=\"bfc-bar\" id=\"bfc-bar-11\" style=\"height: 92%\"></div>\n              </div>\n              <div id=\"bfc-a-meta\">\n                <span id=\"bfc-a-kicker\">MUSIC PROMO</span>\n                <span id=\"bfc-a-pill\">LIVE</span>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Shot B -->\n        <div id=\"bfc-shot-b\">\n          <div id=\"bfc-b-layout\">\n            <div id=\"bfc-b-left\">\n              <div id=\"bfc-b-eyebrow\">Next shot</div>\n              <div id=\"bfc-b-title\">HARD<br />CUT</div>\n              <div id=\"bfc-b-accent-bar\" aria-hidden=\"true\"></div>\n              <div id=\"bfc-b-sub\">\n                Beat-locked freeze, then cut. Built for music-led promos and montages.\n              </div>\n            </div>\n            <div id=\"bfc-b-right\">\n              <div class=\"bfc-b-card\" id=\"bfc-b-card-0\">\n                <span class=\"bfc-b-card-label\">Ramp</span>\n                <span class=\"bfc-b-card-value accent\">1.35→2.2</span>\n              </div>\n              <div class=\"bfc-b-card\" id=\"bfc-b-card-1\">\n                <span class=\"bfc-b-card-label\">Freeze</span>\n                <span class=\"bfc-b-card-value\">0.8s</span>\n              </div>\n              <div class=\"bfc-b-card\" id=\"bfc-b-card-2\">\n                <span class=\"bfc-b-card-label\">Cut</span>\n                <span class=\"bfc-b-card-value accent\">3.00</span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div id=\"bfc-vignette\" aria-hidden=\"true\"></div>\n\n      <div id=\"bfc-intro\" aria-hidden=\"true\">\n        <span id=\"bfc-intro-label\">ON THE BEAT</span>\n      </div>\n\n      <div id=\"bfc-hit-type\" aria-hidden=\"true\">\n        <span id=\"bfc-hit-type-text\">DROP</span>\n      </div>\n\n      <div id=\"bfc-freeze\" aria-hidden=\"true\">\n        <div id=\"bfc-freeze-flash\"></div>\n        <div id=\"bfc-freeze-contour\"></div>\n        <div id=\"bfc-freeze-outline\"></div>\n        <div id=\"bfc-freeze-badge\">FREEZE</div>\n      </div>\n\n      <div id=\"bfc-cut\" aria-hidden=\"true\"></div>\n\n      <div id=\"bfc-driver\" class=\"clip\" data-start=\"0\" data-duration=\"6\" data-track-index=\"0\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ── EDIT ME (not Studio params — see HTML comment) ──────────────\n        var CONFIG = {\n          primaryLabel: \"DROP\",\n          secondaryLabel: \"ON THE BEAT\",\n          beat1: 0.7,\n          beat2: 2.2,\n          freezeTime: 2.2,\n          intensity: 1.0,\n        };\n        // ────────────────────────────────────────────────────────────────\n\n        var DURATION = 6;\n        var intensity = Math.max(0.6, Math.min(1.4, Number(CONFIG.intensity) || 1));\n        var beat1 = Number(CONFIG.beat1) || 0.7;\n        var beat2 = Number(CONFIG.beat2) || 2.2;\n        var freezeAt = Number(CONFIG.freezeTime) || beat2;\n        var cutAt = 3.0;\n        var beat3 = 4.7;\n        var holdAt = 5.2;\n\n        var root = document.getElementById(\"bfc-root\");\n        var stage = document.getElementById(\"bfc-stage\");\n        var shotA = document.getElementById(\"bfc-shot-a\");\n        var shotB = document.getElementById(\"bfc-shot-b\");\n        var aCrop = document.getElementById(\"bfc-a-crop\");\n        var aCard = document.getElementById(\"bfc-a-card\");\n        var intro = document.getElementById(\"bfc-intro\");\n        var introLabel = document.getElementById(\"bfc-intro-label\");\n        var hitType = document.getElementById(\"bfc-hit-type\");\n        var hitText = document.getElementById(\"bfc-hit-type-text\");\n        var freeze = document.getElementById(\"bfc-freeze\");\n        var freezeOutline = document.getElementById(\"bfc-freeze-outline\");\n        var freezeFlash = document.getElementById(\"bfc-freeze-flash\");\n        var freezeContour = document.getElementById(\"bfc-freeze-contour\");\n        var freezeBadge = document.getElementById(\"bfc-freeze-badge\");\n        var cutFx = document.getElementById(\"bfc-cut\");\n        var bLeft = document.getElementById(\"bfc-b-left\");\n        var bCards = [\n          document.getElementById(\"bfc-b-card-0\"),\n          document.getElementById(\"bfc-b-card-1\"),\n          document.getElementById(\"bfc-b-card-2\"),\n        ];\n        var bars = [];\n        for (var bi = 0; bi < 12; bi++) {\n          bars.push(document.getElementById(\"bfc-bar-\" + bi));\n        }\n\n        // Apply editable labels\n        if (hitText) hitText.textContent = CONFIG.primaryLabel || \"DROP\";\n        if (introLabel) introLabel.textContent = CONFIG.secondaryLabel || \"ON THE BEAT\";\n\n        // Accent color from CSS var → freeze/glow that use hardcoded rgba fallbacks\n        // stay coherent because stroke/fill already use var(--accent-color).\n\n        var tl = gsap.timeline({ paused: true });\n\n        // Initial states (no CSS transform conflicts on animated props)\n        gsap.set(stage, { scale: 1, x: 0, y: 0, filter: \"blur(0px) brightness(1)\" });\n        gsap.set(aCrop, { scale: 1, x: 0, y: 0 });\n        // Card visible at t=0 so catalog snapshots are never a black frame\n        gsap.set(aCard, { scale: 0.9, y: 20, opacity: 1 });\n        gsap.set(shotA, { opacity: 1, visibility: \"visible\" });\n        gsap.set(shotB, { opacity: 0, visibility: \"hidden\" });\n        gsap.set(intro, { opacity: 0, visibility: \"hidden\", y: -12 });\n        gsap.set(hitType, { opacity: 0, visibility: \"hidden\", scale: 1.15 });\n        gsap.set(freeze, { opacity: 0, visibility: \"hidden\" });\n        gsap.set([freezeOutline, freezeFlash, freezeContour, freezeBadge], { opacity: 0 });\n        gsap.set(cutFx, { opacity: 0, visibility: \"hidden\", scaleX: 0.4, x: -200 });\n        gsap.set(bLeft, { opacity: 0, x: -48 });\n        gsap.set(bCards, { opacity: 0, x: 40 });\n        gsap.set(bars, { scaleY: 0.55 });\n\n        // Full duration anchor (seek-safe length)\n        tl.to({}, { duration: DURATION, ease: \"none\" }, 0);\n\n        // ── 0.00–0.70: intro push-in + secondary type ──\n        tl.to(aCard, { scale: 1, y: 0, duration: 0.55, ease: \"power3.out\" }, 0);\n        tl.to(stage, { scale: 1 + 0.04 * intensity, duration: 0.7, ease: \"power1.out\" }, 0);\n        tl.to(bars, { scaleY: 1, duration: 0.5, ease: \"power2.out\", stagger: 0.02 }, 0.12);\n        tl.set(intro, { visibility: \"visible\" }, 0.12);\n        tl.to(intro, { opacity: 1, y: 0, duration: 0.28, ease: \"power2.out\" }, 0.12);\n        tl.to(intro, { opacity: 0, y: -8, duration: 0.18, ease: \"power2.in\" }, 0.52);\n        tl.set(intro, { visibility: \"hidden\", opacity: 0 }, 0.7);\n\n        // ── 0.70–1.35: beat 1 — hard reframe ──\n        tl.to(\n          aCrop,\n          {\n            scale: 1 + 0.18 * intensity,\n            x: -80 * intensity,\n            y: 24 * intensity,\n            duration: 0.22,\n            ease: \"power4.out\",\n          },\n          beat1,\n        );\n        tl.to(\n          stage,\n          {\n            scale: 1.08 * intensity > 1.2 ? 1.2 : 1 + 0.08 * intensity,\n            duration: 0.28,\n            ease: \"expo.out\",\n          },\n          beat1,\n        );\n        tl.to(\n          bars,\n          {\n            scaleY: function (i) {\n              // Deterministic bar pattern (no Math.random)\n              var pattern = [0.55, 1.15, 0.7, 1.35, 0.9, 1.4, 0.65, 1.1, 0.5, 1.25, 0.8, 1.45];\n              return pattern[i % pattern.length];\n            },\n            duration: 0.18,\n            ease: \"power3.out\",\n            stagger: 0.01,\n          },\n          beat1,\n        );\n\n        // ── 1.35–2.20: speed ramp into freeze ──\n        var rampStart = 1.35;\n        var rampDur = Math.max(0.2, freezeAt - rampStart);\n        tl.to(\n          aCrop,\n          {\n            scale: 1.28 * (0.9 + 0.1 * intensity),\n            x: 28 * intensity,\n            y: -12 * intensity,\n            duration: rampDur,\n            ease: \"power3.in\",\n          },\n          rampStart,\n        );\n        tl.to(\n          stage,\n          {\n            scale: 1.12,\n            filter: \"blur(0px) brightness(1.08)\",\n            duration: rampDur,\n            ease: \"power2.in\",\n          },\n          rampStart,\n        );\n        tl.to(\n          bars,\n          {\n            scaleY: 1.55,\n            duration: rampDur * 0.85,\n            ease: \"power2.in\",\n            stagger: { each: 0.012, from: \"center\" },\n          },\n          rampStart,\n        );\n\n        // ── 2.20–3.00: freeze hit (snap-on for seek/snapshot stability) ──\n        tl.set(freeze, { visibility: \"visible\", opacity: 1 }, freezeAt);\n        tl.set(freezeOutline, { opacity: 1 }, freezeAt);\n        tl.set(freezeContour, { opacity: 0.85 }, freezeAt);\n        tl.set(freezeBadge, { opacity: 1 }, freezeAt);\n        tl.set(hitType, { visibility: \"visible\", opacity: 1, scale: 1 }, freezeAt);\n        // Hold crop/stage where ramp ended\n        tl.to(aCrop, { duration: 0.01, ease: \"none\" }, freezeAt);\n        tl.to(\n          stage,\n          {\n            scale: 1.12,\n            filter: \"blur(0px) brightness(1.15)\",\n            duration: 0.05,\n            ease: \"power4.out\",\n          },\n          freezeAt,\n        );\n        // Single exposure flash (not a strobe sequence)\n        tl.fromTo(\n          freezeFlash,\n          { opacity: 0.55 * intensity },\n          { opacity: 0, duration: 0.28, ease: \"power2.out\" },\n          freezeAt,\n        );\n        tl.to(\n          hitType,\n          { opacity: 0, scale: 0.96, duration: 0.2, ease: \"power2.in\" },\n          freezeAt + 0.55,\n        );\n        tl.set(hitType, { visibility: \"hidden\", opacity: 0 }, freezeAt + 0.78);\n        // Soft settle of freeze dressing before cut\n        tl.to(\n          [freezeOutline, freezeContour, freezeBadge],\n          { opacity: 0.75, duration: 0.35, ease: \"sine.out\" },\n          freezeAt + 0.35,\n        );\n\n        // ── 3.00–3.35: hard cut connector ──\n        tl.set(cutFx, { visibility: \"visible\" }, cutAt);\n        tl.fromTo(\n          cutFx,\n          { opacity: 0, scaleX: 0.35, x: -280 },\n          {\n            opacity: 0.95,\n            scaleX: 1.6,\n            x: 120,\n            duration: 0.12,\n            ease: \"power4.in\",\n          },\n          cutAt,\n        );\n        tl.to(\n          stage,\n          {\n            filter: \"blur(14px) brightness(1.35)\",\n            scaleX: 1.35,\n            scaleY: 0.92,\n            duration: 0.12,\n            ease: \"power3.in\",\n          },\n          cutAt,\n        );\n        // Switch shots mid-cut — shot B content lands immediately (no black gap)\n        var switchAt = cutAt + 0.14;\n        tl.set(shotA, { opacity: 0, visibility: \"hidden\" }, switchAt);\n        tl.set(shotB, { opacity: 1, visibility: \"visible\" }, switchAt);\n        tl.set(hitType, { opacity: 0, visibility: \"hidden\" }, switchAt);\n        tl.set(\n          [freeze, freezeOutline, freezeFlash, freezeContour, freezeBadge],\n          { opacity: 0, visibility: \"hidden\" },\n          switchAt,\n        );\n        tl.set(freeze, { visibility: \"hidden\" }, switchAt);\n        // Shot B content visible on switch (offset settles after)\n        tl.set(bLeft, { opacity: 1, x: -24 }, switchAt);\n        tl.set(bCards, { opacity: 1, x: 24 }, switchAt);\n        tl.to(\n          stage,\n          {\n            filter: \"blur(0px) brightness(1)\",\n            scale: 1,\n            scaleX: 1,\n            scaleY: 1,\n            x: 0,\n            y: 0,\n            duration: 0.18,\n            ease: \"power3.out\",\n          },\n          switchAt,\n        );\n        tl.to(cutFx, { opacity: 0, x: 360, duration: 0.16, ease: \"power2.out\" }, cutAt + 0.16);\n        tl.set(cutFx, { visibility: \"hidden\", opacity: 0 }, cutAt + 0.34);\n\n        // ── after switch: shot B settle (no scale overlap with recover) ──\n        tl.to(bLeft, { x: 0, duration: 0.4, ease: \"power3.out\" }, switchAt);\n        tl.to(\n          bCards,\n          {\n            x: 0,\n            duration: 0.38,\n            ease: \"power3.out\",\n            stagger: 0.06,\n          },\n          switchAt + 0.04,\n        );\n        tl.to(stage, { scale: 1.02, duration: 1.17, ease: \"sine.out\" }, switchAt + 0.18);\n\n        // ── 4.70–5.20: final beat punch-in ──\n        tl.to(\n          stage,\n          {\n            scale: 1.08 * (0.9 + 0.1 * intensity),\n            duration: 0.14,\n            ease: \"power4.out\",\n          },\n          beat3,\n        );\n        tl.to(\n          bCards[1],\n          {\n            scale: 1.04,\n            duration: 0.12,\n            ease: \"power3.out\",\n          },\n          beat3,\n        );\n        tl.to(\n          bCards[1],\n          {\n            scale: 1,\n            duration: 0.22,\n            ease: \"power2.out\",\n          },\n          beat3 + 0.14,\n        );\n        // Micro freeze feel: brief hold of scale\n        tl.to(\n          stage,\n          { scale: 1.08 * (0.9 + 0.1 * intensity), duration: 0.2, ease: \"none\" },\n          beat3 + 0.14,\n        );\n\n        // ── 5.20–6.00: hold readable end card (≥0.8s) ──\n        tl.to(stage, { scale: 1.03, duration: 0.35, ease: \"power2.out\" }, holdAt);\n        // Ensure transient layers stay dead through end\n        tl.set(intro, { opacity: 0, visibility: \"hidden\" }, holdAt);\n        tl.set(hitType, { opacity: 0, visibility: \"hidden\" }, holdAt);\n        tl.set(freeze, { opacity: 0, visibility: \"hidden\" }, holdAt);\n        tl.set(cutFx, { opacity: 0, visibility: \"hidden\" }, holdAt);\n\n        window.__timelines[\"beat-freeze-cut\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/blue-sweater-intro-video.json b/docs/public/catalog/blocks/blue-sweater-intro-video.json
new file mode 100644
index 0000000000..4fa7e45358
--- /dev/null
+++ b/docs/public/catalog/blocks/blue-sweater-intro-video.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Blue Sweater Intro Video</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      :root {\n        --bg: #f7f1ef;\n        --ink: #11110f;\n        --muted: #807d76;\n        --line: #dcd8cf;\n        --panel: #fbfaf6;\n        --claude: #c85f45;\n        --orange: #c86532;\n        --blue: #1486b8;\n        --panel-shadow: rgba(36, 31, 24, 0.08);\n      }\n\n      * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: var(--bg);\n        color: var(--ink);\n        font-family: \"Helvetica Neue\", Arial, sans-serif;\n      }\n\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: var(--bg);\n        isolation: isolate;\n      }\n\n      .clip,\n      .base {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n      }\n\n      .clip {\n        opacity: 0;\n      }\n\n      .base {\n        background: var(--bg);\n        opacity: 1;\n      }\n\n      #burst {\n        z-index: 6;\n      }\n\n      #brand {\n        z-index: 5;\n      }\n\n      .scene-content {\n        position: relative;\n        display: flex;\n        width: 100%;\n        height: 100%;\n        padding: 126px 160px 128px;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .warm-block {\n        width: 720px;\n        height: 154px;\n        background: var(--orange);\n        border-radius: 6px;\n        clip-path: polygon(2% 4%, 98% 0, 100% 88%, 96% 98%, 4% 94%, 0 12%);\n      }\n\n      .title {\n        color: var(--ink);\n        font-size: 100px;\n        font-weight: 620;\n        line-height: 0.92;\n        letter-spacing: -0.055em;\n        white-space: nowrap;\n      }\n\n      .wordmark {\n        position: absolute;\n        left: 50%;\n        top: 50.5%;\n        transform: translate(-50%, -50%);\n        display: flex;\n        align-items: baseline;\n        gap: 19px;\n        color: var(--ink);\n        font-size: 88px;\n        font-weight: 620;\n        line-height: 0.9;\n        letter-spacing: -0.058em;\n        white-space: nowrap;\n      }\n\n      .brand-algrow {\n        font-weight: 650;\n      }\n\n      .brand-claude {\n        font-weight: 540;\n      }\n\n      .wordmark .brand-x {\n        font-family: Georgia, \"Times New Roman\", serif;\n        font-size: 0.84em;\n        font-weight: 400;\n        letter-spacing: -0.02em;\n      }\n\n      .cursor {\n        position: absolute;\n        left: 0;\n        top: 0;\n        z-index: 20;\n        width: 98px;\n        height: 120px;\n        opacity: 0;\n        filter: drop-shadow(0 10px 22px rgba(20, 134, 184, 0.24));\n        transform-origin: 13px 6px;\n      }\n\n      .cursor svg,\n      .claude-star svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n\n      .claude-star {\n        position: absolute;\n        color: var(--claude);\n      }\n\n      .star-center {\n        left: 960px;\n        top: 530px;\n        width: 150px;\n        height: 150px;\n        transform: translate(-50%, -50%);\n      }\n\n      .star-brand {\n        left: 1084px;\n        top: 482px;\n        width: 24px;\n        height: 24px;\n      }\n\n      .star-panel {\n        left: 398px;\n        top: 272px;\n        width: 42px;\n        height: 42px;\n      }\n\n      .burst-block {\n        position: absolute;\n        background: var(--orange);\n        border-radius: 9px;\n        clip-path: polygon(\n          2% 8%,\n          14% 4%,\n          42% 5%,\n          63% 2%,\n          92% 5%,\n          99% 12%,\n          97% 88%,\n          86% 96%,\n          55% 94%,\n          28% 98%,\n          5% 92%,\n          0 18%\n        );\n        z-index: 4;\n        will-change: transform, opacity, filter;\n      }\n\n      .burst-a {\n        left: 735px;\n        top: 418px;\n        width: 162px;\n        height: 90px;\n      }\n\n      .burst-b {\n        left: 920px;\n        top: 414px;\n        width: 172px;\n        height: 92px;\n      }\n\n      .burst-c {\n        left: 1300px;\n        top: 420px;\n        width: 96px;\n        height: 92px;\n      }\n\n      .burst-d {\n        left: 790px;\n        top: 648px;\n        width: 172px;\n        height: 94px;\n      }\n\n      .burst-e {\n        left: 1042px;\n        top: 642px;\n        width: 90px;\n        height: 96px;\n      }\n\n      .burst-f {\n        left: 1110px;\n        top: 476px;\n        width: 64px;\n        height: 44px;\n        opacity: 0;\n      }\n\n      .selection-box {\n        position: absolute;\n        left: 380px;\n        top: 252px;\n        width: 550px;\n        height: 176px;\n        border: 1px solid rgba(198, 173, 144, 0.32);\n        background: rgba(228, 206, 181, 0.34);\n        opacity: 0;\n        transform-origin: 0 0;\n        z-index: 1;\n      }\n\n      .intro-remnants {\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n        pointer-events: none;\n      }\n\n      .intro-remnant {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        color: var(--ink);\n        font-size: 100px;\n        font-weight: 620;\n        line-height: 0.92;\n        letter-spacing: -0.055em;\n        white-space: nowrap;\n        opacity: 0;\n        will-change: transform, opacity, filter;\n      }\n\n      .rem-a {\n        margin-left: -220px;\n        margin-top: -44px;\n      }\n\n      .rem-b {\n        margin-left: -42px;\n        margin-top: -42px;\n      }\n\n      .rem-c {\n        margin-left: 155px;\n        margin-top: -48px;\n      }\n\n      .rem-d {\n        margin-left: -82px;\n        margin-top: -4px;\n      }\n\n      .fragment-word {\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n        pointer-events: none;\n      }\n\n      .frag {\n        position: absolute;\n        color: var(--ink);\n        font-size: 88px;\n        font-weight: 590;\n        line-height: 0.9;\n        letter-spacing: -0.055em;\n        opacity: 0;\n        white-space: nowrap;\n        will-change: transform, opacity, filter;\n      }\n\n      .frag-alg {\n        left: 649px;\n        top: 484px;\n      }\n\n      .frag-row {\n        left: 770px;\n        top: 495px;\n      }\n\n      .frag-x {\n        left: 932px;\n        top: 484px;\n      }\n\n      .frag-clau {\n        left: 1000px;\n        top: 480px;\n      }\n\n      .frag-de {\n        left: 1162px;\n        top: 480px;\n      }\n\n      .final-wordmark {\n        position: absolute;\n        inset: 0;\n        z-index: 3;\n        color: var(--ink);\n        opacity: 0;\n        pointer-events: none;\n        will-change: transform, opacity, filter;\n      }\n\n      .final-wordmark span {\n        position: absolute;\n        white-space: nowrap;\n        line-height: 0.9;\n      }\n\n      .final-algrow {\n        left: 690px;\n        top: 484px;\n        font-size: 88px;\n        font-weight: 590;\n        letter-spacing: -0.055em;\n        transform: scaleX(1);\n        transform-origin: 0 0;\n      }\n\n      .final-x {\n        left: 884px;\n        top: 484px;\n        font-size: 88px;\n        font-weight: 590;\n        letter-spacing: -0.055em;\n      }\n\n      .final-claude {\n        left: 955px;\n        top: 480px;\n        font-size: 88px;\n        font-weight: 590;\n        letter-spacing: -0.055em;\n        transform: scaleX(1);\n        transform-origin: 0 0;\n      }\n\n      .ui-content {\n        align-items: center;\n        justify-content: center;\n      }\n\n      .input-stack {\n        position: relative;\n        width: 1300px;\n        height: 332px;\n        transform-origin: 50% 50%;\n      }\n\n      .input-panel {\n        position: absolute;\n        left: 0;\n        width: 100%;\n        background: var(--panel);\n        border: 1px solid var(--line);\n        border-radius: 42px;\n        box-shadow: 0 18px 50px var(--panel-shadow);\n        opacity: 0;\n      }\n\n      .panel-empty {\n        top: -54px;\n        height: 306px;\n        opacity: 1;\n      }\n\n      .panel-full {\n        top: 0;\n        height: 318px;\n      }\n\n      .panel-thinking {\n        top: 7px;\n        height: 304px;\n      }\n\n      .placeholder {\n        position: absolute;\n        left: 54px;\n        top: 48px;\n        color: var(--muted);\n        font-size: 34px;\n        line-height: 1.15;\n        letter-spacing: -0.03em;\n      }\n\n      .prompt-text {\n        position: absolute;\n        left: 54px;\n        right: 56px;\n        top: 42px;\n        bottom: 110px;\n        color: var(--ink);\n        font-size: 32px;\n        font-weight: 400;\n        line-height: 1.16;\n        letter-spacing: -0.035em;\n      }\n\n      .prompt-text span {\n        opacity: 0;\n      }\n\n      .panel-plus {\n        position: absolute;\n        left: 52px;\n        bottom: 44px;\n        width: 42px;\n        height: 42px;\n      }\n\n      .panel-plus::before,\n      .panel-plus::after {\n        content: \"\";\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        width: 34px;\n        height: 2px;\n        background: var(--ink);\n        transform: translate(-50%, -50%);\n      }\n\n      .panel-plus::after {\n        transform: translate(-50%, -50%) rotate(90deg);\n      }\n\n      .model {\n        position: absolute;\n        right: 126px;\n        bottom: 48px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        color: var(--ink);\n        font-size: 30px;\n        line-height: 1;\n        letter-spacing: -0.045em;\n      }\n\n      .panel-empty .model {\n        right: 78px;\n      }\n\n      .model .muted {\n        color: var(--muted);\n      }\n\n      .chevron {\n        width: 14px;\n        height: 14px;\n        border-right: 2px solid var(--muted);\n        border-bottom: 2px solid var(--muted);\n        transform: rotate(45deg) translateY(-5px);\n      }\n\n      .send-button {\n        position: absolute;\n        right: 42px;\n        bottom: 38px;\n        display: grid;\n        place-items: center;\n        width: 64px;\n        height: 64px;\n        border-radius: 17px;\n        background: var(--claude);\n        box-shadow: 0 10px 20px rgba(200, 95, 69, 0.18);\n        opacity: 0;\n        transform-origin: 50% 50%;\n      }\n\n      .panel-thinking .send-button {\n        opacity: 1;\n      }\n\n      .send-button svg {\n        width: 30px;\n        height: 30px;\n      }\n\n      .thinking-line {\n        position: absolute;\n        left: 54px;\n        top: 48px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        color: var(--ink);\n        font-size: 30px;\n        line-height: 1;\n        letter-spacing: -0.035em;\n        opacity: 0;\n      }\n\n      .thinking-line .claude-star {\n        position: relative;\n        left: auto;\n        top: auto;\n        width: 24px;\n        height: 24px;\n      }\n\n      .x-result {\n        position: absolute;\n        left: 54px;\n        top: 44px;\n        display: flex;\n        align-items: center;\n        gap: 18px;\n        color: var(--ink);\n        font-size: 30px;\n        line-height: 1;\n        letter-spacing: -0.035em;\n        opacity: 0;\n      }\n\n      .x-trigger {\n        display: grid;\n        place-items: center;\n        width: 48px;\n        height: 48px;\n        border-radius: 15px;\n        background: var(--ink);\n        color: var(--panel);\n        font-size: 29px;\n        font-weight: 680;\n        letter-spacing: -0.06em;\n        box-shadow: 0 14px 28px rgba(17, 17, 15, 0.18);\n      }\n\n      .social-card {\n        position: absolute;\n        left: 560px;\n        top: 178px;\n        width: 800px;\n        height: 430px;\n        border: 1px solid var(--line);\n        border-radius: 36px;\n        background: var(--panel);\n        box-shadow: 0 28px 70px rgba(36, 31, 24, 0.13);\n        opacity: 0;\n        overflow: hidden;\n        transform-origin: 50% 50%;\n      }\n\n      .social-card::before {\n        content: \"\";\n        position: absolute;\n        inset: 0 0 auto;\n        height: 150px;\n        background: linear-gradient(135deg, rgba(20, 134, 184, 0.14), rgba(200, 95, 69, 0.12));\n      }\n\n      .social-x {\n        position: absolute;\n        right: 28px;\n        top: 24px;\n        display: grid;\n        place-items: center;\n        width: 44px;\n        height: 44px;\n        border-radius: 14px;\n        background: var(--ink);\n        color: var(--panel);\n        font-size: 28px;\n        font-weight: 680;\n      }\n\n      .social-avatar {\n        position: absolute;\n        left: 52px;\n        top: 94px;\n        width: 118px;\n        height: 118px;\n        border: 5px solid var(--panel);\n        border-radius: 50%;\n        object-fit: cover;\n        object-position: 50% 50%;\n        box-shadow: 0 18px 34px rgba(20, 134, 184, 0.2);\n      }\n\n      .social-name {\n        position: absolute;\n        left: 52px;\n        top: 236px;\n        color: var(--ink);\n        font-size: 44px;\n        font-weight: 620;\n        line-height: 1;\n        letter-spacing: -0.055em;\n      }\n\n      .social-handle {\n        position: absolute;\n        left: 52px;\n        top: 288px;\n        color: var(--muted);\n        font-size: 26px;\n        line-height: 1;\n        letter-spacing: -0.025em;\n      }\n\n      .social-bio {\n        position: absolute;\n        left: 52px;\n        right: 52px;\n        top: 334px;\n        color: var(--ink);\n        font-size: 25px;\n        line-height: 1.16;\n        letter-spacing: -0.035em;\n      }\n\n      .follow-button {\n        position: absolute;\n        right: 46px;\n        top: 236px;\n        display: grid;\n        place-items: center;\n        width: 174px;\n        height: 54px;\n        border-radius: 18px;\n        background: var(--ink);\n        color: var(--panel);\n        font-size: 24px;\n        font-weight: 620;\n        letter-spacing: -0.035em;\n        overflow: hidden;\n        transform-origin: 50% 50%;\n      }\n\n      .follow-label {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        inset: 0;\n        white-space: nowrap;\n      }\n\n      .follow-label-following {\n        opacity: 0;\n      }\n\n      .follow-check {\n        display: block;\n        width: 20px;\n        height: 20px;\n      }\n\n      .follow-check svg {\n        display: block;\n        width: 100%;\n        height: 100%;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"blue-sweater-intro-video\"\n      data-start=\"0\"\n      data-duration=\"12\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div\n        id=\"base\"\n        class=\"clip base\"\n        data-start=\"0\"\n        data-duration=\"12\"\n        data-track-index=\"0\"\n        style=\"z-index: 0\"\n      ></div>\n\n      <div\n        id=\"warmup\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"0.48\"\n        data-track-index=\"1\"\n        style=\"z-index: 2\"\n      >\n        <div class=\"scene-content\">\n          <div id=\"warmBlock\" class=\"warm-block\"></div>\n        </div>\n      </div>\n\n      <div\n        id=\"intro\"\n        class=\"clip\"\n        data-start=\"0.38\"\n        data-duration=\"1.28\"\n        data-track-index=\"2\"\n        style=\"z-index: 3\"\n      >\n        <div class=\"scene-content\">\n          <h1 id=\"introTitle\" class=\"title\">Introducing</h1>\n        </div>\n      </div>\n\n      <div\n        id=\"burst\"\n        class=\"clip\"\n        data-start=\"1.38\"\n        data-duration=\"1.54\"\n        data-track-index=\"3\"\n        style=\"z-index: 4\"\n      >\n        <div class=\"scene-content\">\n          <div class=\"selection-box\"></div>\n          <div class=\"intro-remnants\" aria-hidden=\"true\">\n            <span class=\"intro-remnant rem-a\">Intro</span>\n            <span class=\"intro-remnant rem-b\">ducin</span>\n            <span class=\"intro-remnant rem-c\">g</span>\n            <span class=\"intro-remnant rem-d\">tro</span>\n          </div>\n          <div class=\"burst-block burst-a\"></div>\n          <div class=\"burst-block burst-b\"></div>\n          <div class=\"burst-block burst-c\"></div>\n          <div class=\"burst-block burst-d\"></div>\n          <div class=\"burst-block burst-e\"></div>\n          <div class=\"burst-block burst-f\"></div>\n          <div class=\"claude-star star-center burst-star\" aria-hidden=\"true\">\n            <svg viewBox=\"-50 -50 100 100\">\n              <g stroke=\"currentColor\" stroke-width=\"8\" stroke-linecap=\"round\">\n                <line x1=\"0\" y1=\"-38\" x2=\"0\" y2=\"38\" />\n                <line x1=\"-38\" y1=\"0\" x2=\"38\" y2=\"0\" />\n                <line x1=\"-27\" y1=\"-27\" x2=\"27\" y2=\"27\" />\n                <line x1=\"-27\" y1=\"27\" x2=\"27\" y2=\"-27\" />\n                <line x1=\"-14\" y1=\"-35\" x2=\"14\" y2=\"35\" />\n                <line x1=\"-35\" y1=\"-14\" x2=\"35\" y2=\"14\" />\n              </g>\n            </svg>\n          </div>\n        </div>\n      </div>\n\n      <div\n        id=\"brand\"\n        class=\"clip\"\n        data-start=\"2.04\"\n        data-duration=\"1.04\"\n        data-track-index=\"4\"\n        style=\"z-index: 5\"\n      >\n        <div class=\"scene-content\">\n          <div class=\"fragment-word\" aria-hidden=\"true\">\n            <span class=\"frag frag-alg\">blu</span>\n            <span class=\"frag frag-row\">e</span>\n            <span class=\"frag frag-x\">x</span>\n            <span class=\"frag frag-clau\">swea</span>\n            <span class=\"frag frag-de\">ter</span>\n          </div>\n          <div class=\"final-wordmark\" aria-hidden=\"true\">\n            <span class=\"final-algrow\">blue</span>\n            <span class=\"final-x\">x</span>\n            <span class=\"final-claude\">sweater</span>\n          </div>\n        </div>\n      </div>\n\n      <div\n        id=\"ui\"\n        class=\"clip\"\n        data-start=\"2.76\"\n        data-duration=\"9\"\n        data-track-index=\"5\"\n        style=\"z-index: 6\"\n      >\n        <div class=\"scene-content ui-content\">\n          <div class=\"claude-star star-panel\" aria-hidden=\"true\">\n            <svg viewBox=\"-50 -50 100 100\">\n              <g stroke=\"currentColor\" stroke-width=\"8\" stroke-linecap=\"round\">\n                <line x1=\"0\" y1=\"-38\" x2=\"0\" y2=\"38\" />\n                <line x1=\"-38\" y1=\"0\" x2=\"38\" y2=\"0\" />\n                <line x1=\"-27\" y1=\"-27\" x2=\"27\" y2=\"27\" />\n                <line x1=\"-27\" y1=\"27\" x2=\"27\" y2=\"-27\" />\n                <line x1=\"-14\" y1=\"-35\" x2=\"14\" y2=\"35\" />\n                <line x1=\"-35\" y1=\"-14\" x2=\"35\" y2=\"14\" />\n              </g>\n            </svg>\n          </div>\n\n          <div class=\"input-stack\">\n            <div class=\"input-panel panel-empty\">\n              <div class=\"placeholder\">How can I help you today?</div>\n              <div class=\"panel-plus\"></div>\n              <div class=\"model\">\n                <span>Opus 5.0 <span class=\"muted\">Extended</span></span>\n                <span class=\"chevron\"></span>\n              </div>\n            </div>\n\n            <div class=\"input-panel panel-full\">\n              <div id=\"promptText\" class=\"prompt-text\">\n                Recommend one X creator who actively explores AI technology and, like me, is\n                building an AI startup. I want someone practical, curious, and worth following.\n              </div>\n              <div class=\"panel-plus\"></div>\n              <div class=\"model\">\n                <span>Opus 5.0 <span class=\"muted\">Extended</span></span>\n                <span class=\"chevron\"></span>\n              </div>\n              <div id=\"sendFull\" class=\"send-button\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                  <path\n                    d=\"M16 25V8M16 8L9 15M16 8L23 15\"\n                    stroke=\"#FBFAF6\"\n                    stroke-width=\"3.3\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            <div class=\"input-panel panel-thinking\">\n              <div class=\"thinking-line\">\n                <span class=\"claude-star\" aria-hidden=\"true\">\n                  <svg viewBox=\"-50 -50 100 100\">\n                    <g stroke=\"currentColor\" stroke-width=\"8\" stroke-linecap=\"round\">\n                      <line x1=\"0\" y1=\"-38\" x2=\"0\" y2=\"38\" />\n                      <line x1=\"-38\" y1=\"0\" x2=\"38\" y2=\"0\" />\n                      <line x1=\"-27\" y1=\"-27\" x2=\"27\" y2=\"27\" />\n                      <line x1=\"-27\" y1=\"27\" x2=\"27\" y2=\"-27\" />\n                      <line x1=\"-14\" y1=\"-35\" x2=\"14\" y2=\"35\" />\n                      <line x1=\"-35\" y1=\"-14\" x2=\"35\" y2=\"14\" />\n                    </g>\n                  </svg>\n                </span>\n                <span>thinking</span>\n              </div>\n              <div class=\"x-result\">\n                <span class=\"x-trigger\">x</span>\n                <span>Open the recommended X profile</span>\n              </div>\n              <div class=\"panel-plus\"></div>\n              <div class=\"model\">\n                <span>Opus 5.0 <span class=\"muted\">Extended</span></span>\n                <span class=\"chevron\"></span>\n              </div>\n              <div class=\"send-button\" aria-hidden=\"true\">\n                <svg viewBox=\"0 0 32 32\" fill=\"none\">\n                  <path\n                    d=\"M16 25V8M16 8L9 15M16 8L23 15\"\n                    stroke=\"#FBFAF6\"\n                    stroke-width=\"3.3\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </div>\n          <div class=\"social-card\" aria-hidden=\"true\">\n            <div class=\"social-x\">x</div>\n            <img class=\"social-avatar\" src=\"/public/catalog/assets/10409e2bcf2a6bc6.png\" alt=\"\" />\n            <div class=\"social-name\">joe sai</div>\n            <div class=\"social-handle\">@_blue_sweater_</div>\n            <div class=\"follow-button\">\n              <span class=\"follow-label follow-label-follow\">Follow</span>\n              <span class=\"follow-label follow-label-following\">\n                <span>Following</span>\n                <span class=\"follow-check\" aria-hidden=\"true\">\n                  <svg\n                    viewBox=\"0 0 24 24\"\n                    fill=\"none\"\n                    stroke=\"#FBFAF6\"\n                    stroke-width=\"2.8\"\n                    stroke-linecap=\"round\"\n                    stroke-linejoin=\"round\"\n                  >\n                    <polyline points=\"20 6 9 17 4 12\"></polyline>\n                  </svg>\n                </span>\n              </span>\n            </div>\n            <div class=\"social-bio\">\n              Exploring AI technology and building an AI startup in public.\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <div\n        id=\"cursor\"\n        class=\"clip cursor\"\n        data-start=\"0\"\n        data-duration=\"12\"\n        data-track-index=\"9\"\n        aria-hidden=\"true\"\n        style=\"z-index: 20\"\n      >\n        <svg viewBox=\"0 0 98 120\" fill=\"none\">\n          <path\n            d=\"M13 6L86 80L51 85L35 114L13 6Z\"\n            fill=\"#1486B8\"\n            stroke=\"#F7F5EF\"\n            stroke-width=\"7\"\n            stroke-linejoin=\"round\"\n          />\n        </svg>\n      </div>\n\n      <audio\n        id=\"audio-mix\"\n        data-start=\"0\"\n        data-duration=\"12\"\n        data-track-index=\"20\"\n        src=\"/public/catalog/assets/73c4fffc131648df.wav\"\n        data-volume=\"1\"\n      ></audio>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const promptEl = document.querySelector(\"#promptText\");\n      const promptText = promptEl.textContent.replace(/\\s+/g, \" \").trim();\n      promptEl.textContent = \"\";\n      for (const char of promptText) {\n        const span = document.createElement(\"span\");\n        span.textContent = char;\n        promptEl.appendChild(span);\n      }\n\n      const tl = gsap.timeline({ paused: true, defaults: { ease: \"power3.out\" } });\n\n      tl.set([\"#warmup\", \"#intro\", \"#burst\", \"#brand\", \"#ui\"], { opacity: 0 });\n      tl.set(\"#cursor\", { x: 690, y: 846, rotation: -8, scale: 0.72, opacity: 0 });\n      tl.set(\".panel-full\", { opacity: 0 });\n      tl.set(\".panel-thinking\", { opacity: 0 });\n      tl.set(\".prompt-text span\", { opacity: 0 });\n      tl.set(\"#sendFull\", { opacity: 0, scale: 0.84 });\n      tl.set([\".selection-box\", \".intro-remnant\", \".frag\", \".final-wordmark\"], { opacity: 0 });\n      tl.set([\".x-result\", \".social-card\"], { opacity: 0 });\n      tl.set(\".x-trigger\", { scale: 1 });\n\n      tl.to(\"#warmup\", { opacity: 1, duration: 0.01 }, 0);\n      tl.fromTo(\n        \"#warmBlock\",\n        { x: -820, scaleX: 0.42, opacity: 0, filter: \"blur(14px)\" },\n        { x: -25, scaleX: 1, opacity: 1, filter: \"blur(0px)\", duration: 0.22, ease: \"power2.out\" },\n        0.02,\n      );\n      tl.to(\n        \"#warmBlock\",\n        { x: 620, opacity: 0, filter: \"blur(18px)\", duration: 0.24, ease: \"power2.in\" },\n        0.25,\n      );\n      tl.to(\"#warmup\", { opacity: 0, duration: 0.08 }, 0.4);\n\n      tl.to(\"#intro\", { opacity: 1, duration: 0.1 }, 0.44);\n      tl.fromTo(\n        \"#introTitle\",\n        { opacity: 0, y: 26, filter: \"blur(10px)\" },\n        { opacity: 1, y: 0, filter: \"blur(0px)\", duration: 0.46, ease: \"expo.out\" },\n        0.48,\n      );\n      tl.to(\"#cursor\", { opacity: 1, duration: 0.12 }, 0.44);\n      tl.to(\n        \"#cursor\",\n        { x: 942, y: 604, rotation: -3, duration: 0.36, ease: \"power2.inOut\", overwrite: \"auto\" },\n        0.44,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 982, y: 642, rotation: -6, duration: 0.24, ease: \"power2.inOut\", overwrite: \"auto\" },\n        1.28,\n      );\n      tl.to(\n        \"#introTitle\",\n        { opacity: 0.26, filter: \"blur(4px)\", duration: 0.03, ease: \"power2.in\" },\n        1.43,\n      );\n      tl.fromTo(\n        \".intro-remnant\",\n        { opacity: 0, x: 0, y: 0, filter: \"blur(2px)\" },\n        {\n          opacity: 0.32,\n          x: (index) => [-22, 8, 32, -10][index],\n          y: (index) => [-10, 5, -18, 28][index],\n          filter: \"blur(7px)\",\n          duration: 0.055,\n          stagger: 0.004,\n          ease: \"power2.out\",\n        },\n        1.435,\n      );\n      tl.to(\n        \"#introTitle\",\n        { opacity: 0, y: -8, filter: \"blur(10px)\", duration: 0.08, ease: \"power2.in\" },\n        1.47,\n      );\n      tl.to(\n        \".intro-remnant\",\n        { opacity: 0, filter: \"blur(11px)\", duration: 0.07, ease: \"power2.in\" },\n        1.49,\n      );\n      tl.to(\"#intro\", { opacity: 0, duration: 0.06 }, 1.56);\n\n      tl.to(\"#burst\", { opacity: 1, duration: 0.02 }, 1.4);\n      tl.fromTo(\n        \".burst-star\",\n        { opacity: 0, scale: 0.08, rotation: -20 },\n        { opacity: 1, scale: 0.16, rotation: -6, duration: 0.08, ease: \"power2.out\" },\n        1.43,\n      );\n      tl.to(\n        \".burst-star\",\n        { scale: 1, rotation: 0, duration: 0.42, ease: \"expo.out\", overwrite: \"auto\" },\n        1.55,\n      );\n      const blockPaths = [\n        {\n          source: [-1, 28],\n          scatter: [-160, -96],\n          drift: [-151, -126],\n          select: [-82, -86],\n          squeeze: [19, -68],\n          release: [19, -68],\n          fade: 2.17,\n        },\n        {\n          source: [-11, 5],\n          scatter: [165, -123],\n          drift: [153, -126],\n          select: [61, -118],\n          squeeze: [-81, -65],\n          release: [-81, -65],\n          fade: 2.17,\n        },\n        {\n          source: [-3, -8],\n          scatter: [169, -28],\n          drift: [174, -24],\n          select: [127, 9],\n          squeeze: [37, 70],\n          release: [-78, 96],\n          fade: 2.33,\n        },\n        {\n          source: [-9, 2],\n          scatter: [-153, 80],\n          drift: [-157, 76],\n          select: [-133, 39],\n          squeeze: [-90, -40],\n          release: [-90, -40],\n          fade: 2.17,\n        },\n        {\n          source: [-7, -13],\n          scatter: [-10, 129],\n          drift: [-17, 128],\n          select: [-38, 83],\n          squeeze: [-67, -18],\n          release: [-92, -87],\n          fade: 2.33,\n        },\n      ];\n      gsap.utils.toArray(\".burst-block\").forEach((block, index) => {\n        const path = blockPaths[index];\n        if (!path) {\n          tl.set(block, { opacity: 0 });\n          return;\n        }\n        tl.set(\n          block,\n          {\n            x: path.source[0],\n            y: path.source[1],\n            scale: 0.78,\n            rotation: index % 2 ? 3 : -3,\n            filter: \"blur(8px)\",\n          },\n          1.45,\n        );\n        tl.to(\n          block,\n          {\n            opacity: 1,\n            scale: 1,\n            rotation: 0,\n            filter: \"blur(0px)\",\n            duration: 0.055,\n            ease: \"power3.out\",\n          },\n          1.455,\n        );\n        tl.to(\n          block,\n          {\n            x: path.scatter[0],\n            y: path.scatter[1],\n            rotation: index % 2 ? 2 : -2,\n            duration: 0.2,\n            ease: \"sine.out\",\n          },\n          1.5,\n        );\n        tl.to(\n          block,\n          {\n            x: path.drift[0],\n            y: path.drift[1],\n            rotation: index % 2 ? 1 : -1,\n            duration: 0.2,\n            ease: \"sine.inOut\",\n          },\n          1.7,\n        );\n        tl.to(\n          block,\n          { x: path.select[0], y: path.select[1], rotation: 0, duration: 0.2, ease: \"sine.inOut\" },\n          1.9,\n        );\n        tl.to(\n          block,\n          {\n            x: path.squeeze[0],\n            y: path.squeeze[1],\n            scale: 1,\n            rotation: 0,\n            filter: \"blur(0.6px)\",\n            duration: 0.07,\n            ease: \"sine.inOut\",\n          },\n          2.1,\n        );\n        tl.to(\n          block,\n          {\n            x: path.release[0],\n            y: path.release[1],\n            scale: 0.84,\n            rotation: 0,\n            filter: \"blur(1.5px)\",\n            duration: 0.05,\n            ease: \"sine.inOut\",\n          },\n          2.17,\n        );\n        tl.to(\n          block,\n          { opacity: 0, scale: 0.38, filter: \"blur(7px)\", duration: 0.05, ease: \"power2.in\" },\n          path.fade,\n        );\n      });\n      tl.to(\n        \"#cursor\",\n        { x: 1540, y: 112, rotation: -9, duration: 0.26, ease: \"power2.inOut\", overwrite: \"auto\" },\n        1.56,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 380, y: 252, rotation: -7, duration: 0.16, ease: \"power2.inOut\", overwrite: \"auto\" },\n        1.82,\n      );\n      tl.fromTo(\n        \".selection-box\",\n        { opacity: 0, scaleX: 0.06, scaleY: 0.1, x: 0, y: 0, filter: \"blur(3px)\" },\n        {\n          opacity: 1,\n          scaleX: 1,\n          scaleY: 1,\n          x: 42,\n          y: 52,\n          filter: \"blur(0px)\",\n          duration: 0.18,\n          ease: \"power2.out\",\n        },\n        1.96,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 930, y: 478, rotation: -4, duration: 0.14, ease: \"power2.inOut\", overwrite: \"auto\" },\n        1.96,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 1168, y: 560, rotation: -4, duration: 0.14, ease: \"power2.inOut\", overwrite: \"auto\" },\n        2.12,\n      );\n      tl.to(\n        \".selection-box\",\n        { x: 220, y: 158, width: 640, height: 190, duration: 0.2, ease: \"power2.inOut\" },\n        2.16,\n      );\n      tl.to(\n        \".burst-star\",\n        {\n          x: 118,\n          y: -62,\n          scale: 0.16,\n          opacity: 0.45,\n          duration: 0.18,\n          ease: \"power2.inOut\",\n          overwrite: \"auto\",\n        },\n        2.12,\n      );\n\n      tl.to(\"#brand\", { opacity: 1, duration: 0.04 }, 2.08);\n\n      const fragmentMotion = [\n        {\n          selector: \".frag-alg\",\n          from: [112, -118, 4],\n          carry: [88, -96],\n          settle: [20, -24],\n          lock: [0, 0],\n          visible: 1,\n        },\n        {\n          selector: \".frag-row\",\n          from: [-12, 78, 5],\n          carry: [-22, 56],\n          settle: [-8, 18],\n          lock: [0, 0],\n          visible: 1,\n        },\n        {\n          selector: \".frag-x\",\n          from: [38, 70, 7],\n          carry: [18, 48],\n          settle: [6, 14],\n          lock: [0, 0],\n          visible: 0.82,\n        },\n        {\n          selector: \".frag-clau\",\n          from: [-82, -108, 4],\n          carry: [-54, -78],\n          settle: [-18, -18],\n          lock: [0, 0],\n          visible: 1,\n        },\n        {\n          selector: \".frag-de\",\n          from: [62, 22, 5],\n          carry: [38, 12],\n          settle: [12, 4],\n          lock: [0, 0],\n          visible: 1,\n        },\n      ];\n\n      fragmentMotion.forEach((piece, index) => {\n        tl.fromTo(\n          piece.selector,\n          {\n            opacity: 0,\n            x: piece.from[0],\n            y: piece.from[1],\n            scale: 0.99,\n            filter: `blur(${piece.from[2]}px)`,\n          },\n          {\n            opacity: piece.visible,\n            x: piece.carry[0],\n            y: piece.carry[1],\n            scale: 1,\n            filter: \"blur(1.2px)\",\n            duration: 0.16,\n            ease: \"sine.out\",\n            overwrite: \"auto\",\n          },\n          2.12 + index * 0.004,\n        );\n        tl.to(\n          piece.selector,\n          {\n            x: piece.settle[0],\n            y: piece.settle[1],\n            opacity: piece.visible,\n            filter: \"blur(0.35px)\",\n            duration: 0.28,\n            ease: \"power3.out\",\n            overwrite: \"auto\",\n          },\n          2.28 + index * 0.003,\n        );\n        tl.to(\n          piece.selector,\n          {\n            opacity: 0,\n            x: piece.settle[0] + [8, -6, 2, -8, 6][index],\n            y: piece.settle[1] + [-6, 7, 4, -5, 3][index],\n            filter: \"blur(4px)\",\n            duration: 0.14,\n            ease: \"power2.out\",\n            overwrite: \"auto\",\n          },\n          2.31 + index * 0.002,\n        );\n      });\n\n      tl.fromTo(\n        \".final-wordmark\",\n        { opacity: 0, x: -12, y: 8, scale: 0.995, filter: \"blur(5px)\" },\n        {\n          opacity: 1,\n          x: 0,\n          y: 0,\n          scale: 1,\n          filter: \"blur(0px)\",\n          duration: 0.24,\n          ease: \"power4.out\",\n          overwrite: \"auto\",\n        },\n        2.38,\n      );\n      tl.to(\".burst-star\", { opacity: 0, duration: 0.12, ease: \"power2.in\" }, 2.32);\n      tl.to(\n        \".selection-box\",\n        { opacity: 0, filter: \"blur(5px)\", duration: 0.16, ease: \"power2.in\" },\n        2.33,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 1256, y: 587, rotation: -3, duration: 0.3, ease: \"power2.inOut\", overwrite: \"auto\" },\n        2.34,\n      );\n      tl.to(\"#burst\", { opacity: 0, filter: \"blur(6px)\", duration: 0.14, ease: \"power2.in\" }, 2.58);\n      tl.to(\"#cursor\", { opacity: 0, duration: 0.13, ease: \"power2.in\" }, 2.86);\n      tl.set(\"#cursor\", { opacity: 0 }, 3.0);\n      tl.to(\n        \"#brand\",\n        { opacity: 0, y: 26, filter: \"blur(9px)\", duration: 0.22, ease: \"power2.in\" },\n        2.9,\n      );\n\n      tl.to(\"#ui\", { opacity: 1, duration: 0.08 }, 3.02);\n      tl.fromTo(\n        \".input-stack\",\n        { opacity: 0, scale: 0.88, y: 92, filter: \"blur(14px)\" },\n        { opacity: 1, scale: 1, y: 0, filter: \"blur(0px)\", duration: 0.66, ease: \"expo.out\" },\n        3.05,\n      );\n      tl.fromTo(\n        \".star-panel\",\n        { opacity: 0, scale: 0.5, rotation: -16 },\n        { opacity: 1, scale: 1, rotation: 0, duration: 0.38, ease: \"power3.out\" },\n        3.18,\n      );\n      tl.fromTo(\".placeholder\", { opacity: 0, y: 12 }, { opacity: 1, y: 0, duration: 0.34 }, 3.3);\n      tl.fromTo(\n        \".panel-empty .panel-plus, .panel-empty .model\",\n        { opacity: 0, y: 10 },\n        { opacity: 1, y: 0, duration: 0.3, stagger: 0.06 },\n        3.42,\n      );\n\n      tl.to(\".panel-empty\", { opacity: 0, duration: 0.18, ease: \"power2.inOut\" }, 4.12);\n      tl.to(\".panel-full\", { opacity: 1, duration: 0.18, ease: \"power2.inOut\" }, 4.12);\n      tl.to(\n        \".input-stack\",\n        { scale: 1.32, x: 300, y: -100, duration: 0.26, ease: \"power2.inOut\" },\n        4.14,\n      );\n      tl.to(\".input-stack\", { scale: 1, x: 0, y: 0, duration: 0.74, ease: \"power2.inOut\" }, 4.92);\n\n      tl.to(\n        \".prompt-text span\",\n        { opacity: 1, duration: 0.01, stagger: { amount: 2.85 }, ease: \"none\" },\n        4.18,\n      );\n      tl.to(\"#sendFull\", { opacity: 1, scale: 1, duration: 0.24, ease: \"power3.out\" }, 7.32);\n      tl.fromTo(\n        \"#cursor\",\n        { x: 1328, y: 900, rotation: -6, scale: 1, opacity: 0 },\n        {\n          x: 1530,\n          y: 900,\n          rotation: -5,\n          scale: 1,\n          opacity: 1,\n          duration: 0.48,\n          ease: \"power2.inOut\",\n        },\n        6.92,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 1512, y: 620, rotation: -5, duration: 0.5, ease: \"power2.inOut\" },\n        7.44,\n      );\n\n      tl.to(\"#sendFull\", { scale: 0.86, duration: 0.08, ease: \"power2.in\" }, 7.9);\n      tl.to(\"#sendFull\", { scale: 1, duration: 0.14, ease: \"back.out(1.7)\" }, 7.98);\n      tl.to(\".panel-full\", { opacity: 0, duration: 0.16, ease: \"power2.inOut\" }, 8.15);\n      tl.to(\".panel-thinking\", { opacity: 1, duration: 0.18, ease: \"power2.inOut\" }, 8.15);\n      tl.set(\".thinking-line\", { opacity: 0 }, 8.24);\n      tl.to(\n        \".thinking-line\",\n        { opacity: 1, duration: 0.3, ease: \"power3.out\", overwrite: \"auto\" },\n        8.25,\n      );\n      tl.to(\"#cursor\", { x: 1554, y: 620, rotation: -5, duration: 0.28, ease: \"power2.out\" }, 7.94);\n      tl.to(\n        \".thinking-line\",\n        { opacity: 0, duration: 0.18, ease: \"power2.inOut\", overwrite: \"auto\" },\n        8.64,\n      );\n      tl.fromTo(\n        \".x-result\",\n        { opacity: 0, y: 12 },\n        { opacity: 1, y: 0, duration: 0.28, ease: \"power3.out\" },\n        8.82,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 365, y: 418, rotation: -6, duration: 0.58, ease: \"power2.inOut\", overwrite: \"auto\" },\n        8.74,\n      );\n      tl.to(\n        \".x-trigger\",\n        {\n          keyframes: [\n            { scale: 0.88, duration: 0.08, ease: \"power2.in\" },\n            { scale: 1, duration: 0.14, ease: \"back.out(1.7)\" },\n          ],\n          overwrite: \"auto\",\n        },\n        9.34,\n      );\n      tl.to(\".x-result\", { opacity: 0, y: -8, duration: 0.18, ease: \"power2.inOut\" }, 9.5);\n      tl.to(\n        \".input-stack\",\n        {\n          opacity: 0,\n          scale: 0.93,\n          y: 26,\n          filter: \"blur(12px)\",\n          duration: 0.4,\n          ease: \"power3.inOut\",\n        },\n        9.5,\n      );\n      tl.to(\n        \".star-panel\",\n        { opacity: 0, scale: 0.72, rotation: 12, duration: 0.28, ease: \"power2.inOut\" },\n        9.5,\n      );\n      tl.fromTo(\n        \".social-card\",\n        { opacity: 0, y: 34, scale: 0.88, filter: \"blur(12px)\" },\n        { opacity: 1, y: 0, scale: 1, filter: \"blur(0px)\", duration: 0.6, ease: \"expo.out\" },\n        9.86,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 1408, y: 246, rotation: -5, duration: 0.42, ease: \"power2.inOut\", overwrite: \"auto\" },\n        9.96,\n      );\n      tl.to(\n        \"#cursor\",\n        { x: 1242, y: 446, rotation: -5, duration: 0.36, ease: \"power2.inOut\", overwrite: \"auto\" },\n        10.5,\n      );\n      tl.to(\".follow-button\", { scale: 0.9, duration: 0.08, ease: \"power2.in\" }, 10.88);\n      tl.to(\n        \".follow-button\",\n        { scale: 1, backgroundColor: \"#2f2f2f\", duration: 0.28, ease: \"elastic.out(1, 0.45)\" },\n        10.96,\n      );\n      tl.to(\".follow-label-follow\", { opacity: 0, duration: 0.08, ease: \"none\" }, 10.96);\n      tl.to(\".follow-label-following\", { opacity: 1, duration: 0.08, ease: \"none\" }, 10.99);\n      tl.to(\n        \"#cursor\",\n        { x: 1286, y: 472, rotation: -5, duration: 0.16, ease: \"power2.out\", overwrite: \"auto\" },\n        11,\n      );\n\n      window.__timelines[\"blue-sweater-intro-video\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/camcorder-hud.json b/docs/public/catalog/blocks/camcorder-hud.json
new file mode 100644
index 0000000000..02bbec4311
--- /dev/null
+++ b/docs/public/catalog/blocks/camcorder-hud.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n  <head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/0743c9b7b918b0d9.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/0743c9b7b918b0d9.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/bd3c8b0cb5fa618c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/bd3c8b0cb5fa618c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/bd3c8b0cb5fa618c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/bd3c8b0cb5fa618c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/bd3c8b0cb5fa618c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/bd3c8b0cb5fa618c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-4a, U+4c-57, U+59, U+5b-5f, U+61-7d, U+b7, U+2014;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=1920, height=1080\">\n    <title>Camcorder HUD - Demo</title>\n    <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n    <style>* {\n        box-sizing: border-box;\n      }\n\n      html,\n      body,\n      #camcorder-hud-demo {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #050505;\n      }\n\n      #ch-demo-backdrop,\n      #ch-demo-overlay {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      #ch-demo-backdrop {\n        object-fit: cover;\n      }\n\n*,\n      [data-composition-id=\"camcorder-hud\"] *::before,\n      [data-composition-id=\"camcorder-hud\"] *::after {\n        box-sizing: border-box;\n      }\n\n      [data-composition-id=\"camcorder-hud\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"camcorder-hud\"] > [data-hf-inner-root],\n      [data-composition-id=\"camcorder-hud\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"camcorder-hud\"] > [data-hf-inner-root] {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud {\n        --hf-camcorder-color: #fff;\n        --hf-camcorder-accent: #f12c2c;\n        --hf-camcorder-inset: 5vmin;\n        --hf-camcorder-font-size: 3.7vmin;\n        position: absolute;\n        inset: 0;\n        color: var(--hf-camcorder-color);\n        font-family: Inter, monospace;\n        font-size: var(--hf-camcorder-font-size);\n        font-weight: 700;\n        line-height: 1.25;\n        pointer-events: none;\n        -webkit-text-stroke: 0.12vmin rgb(0 0 0 / 92%);\n        text-shadow: 0 0.2vmin 0.6vmin rgb(0 0 0 / 90%);\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-corner {\n        position: absolute;\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-record {\n        top: var(--hf-camcorder-inset);\n        left: var(--hf-camcorder-inset);\n        display: flex;\n        align-items: center;\n        gap: 1.8vmin;\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-record-dot {\n        width: 2.2vmin;\n        height: 2.2vmin;\n        border-radius: 50%;\n        background: var(--hf-camcorder-accent);\n        box-shadow: 0 0 0.9vmin color-mix(in srgb, var(--hf-camcorder-accent) 55%, transparent);\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-battery {\n        top: var(--hf-camcorder-inset);\n        right: var(--hf-camcorder-inset);\n        width: 7vmin;\n        height: 3.5vmin;\n        border: 0.35vmin solid currentcolor;\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-battery::before {\n        position: absolute;\n        top: 0.7vmin;\n        left: 0.7vmin;\n        width: 4.7vmin;\n        height: 1.4vmin;\n        background: currentcolor;\n        content: \"\";\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-battery::after {\n        position: absolute;\n        top: 0.7vmin;\n        right: -1vmin;\n        width: 0.7vmin;\n        height: 1.4vmin;\n        background: currentcolor;\n        content: \"\";\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-date {\n        bottom: var(--hf-camcorder-inset);\n        left: var(--hf-camcorder-inset);\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-counter {\n        right: var(--hf-camcorder-inset);\n        bottom: var(--hf-camcorder-inset);\n        text-align: right;\n      }\n\n      [data-composition-id=\"camcorder-hud\"] #ch-hud .ch-mode {\n        display: block;\n        margin-bottom: 0.7vmin;\n        font-size: 2.6vmin;\n      }</style>\n  </head>\n  <body>\n    <div id=\"camcorder-hud-demo\" data-composition-id=\"camcorder-hud-demo\" data-start=\"0\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\">\n      <img id=\"ch-demo-backdrop\" class=\"clip\" src=\"/public/catalog/assets/a870d0d14a481633.jpg\" data-start=\"0\" data-duration=\"4\" data-track-index=\"0\" alt=\"Creator recording a video\">\n      <div style=\"width:1920px;height:1080px\" data-composition-file=\"camcorder-hud.html\" id=\"ch-demo-overlay\" data-composition-id=\"camcorder-hud\" data-start=\"0\" data-duration=\"4\" data-track-index=\"1\" data-width=\"1920\" data-height=\"1080\"><div style=\"width:1920px;height:1080px\" data-hf-inner-root=\"true\" data-hf-authored-id=\"camcorder-hud\" data-width=\"1920\" data-height=\"1080\">\n      <div id=\"ch-hud\" data-hf-counter-start=\"0\" aria-hidden=\"true\">\n        <div class=\"ch-corner ch-record\"><span class=\"ch-record-dot\"></span><span>REC</span></div>\n        <div class=\"ch-corner ch-battery\"></div>\n        <div class=\"ch-corner ch-date\">JAN 01 2000<br>12:00 AM</div>\n        <div class=\"ch-corner ch-counter\">\n          <span class=\"ch-mode\">SP · 16:9</span><span class=\"ch-counter-value\">00:00:00</span>\n        </div>\n      </div>\n    </div></div>\n    </div>\n\n    \n  <script>const tl = gsap.timeline({ paused: true });\n      tl.to(\"#ch-demo-backdrop\", { scale: 1.02, duration: 4, ease: \"none\" }, 0);\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"camcorder-hud-demo\"] = tl;\n;\n(function(){\n  var __hfCompId = \"camcorder-hud\";\n  var __hfTimelineCompId = \"camcorder-hud\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"camcorder-hud\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"camcorder-hud\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"camcorder-hud\\\"|'camcorder-hud')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"camcorder-hud\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n      window.__timelines = window.__timelines || {};\n\n      var hud = document.getElementById(\"ch-hud\");\n      var counter = hud && hud.querySelector(\".ch-counter-value\");\n      var recordDot = hud && hud.querySelector(\".ch-record-dot\");\n      var host = hud && hud.closest(\"[data-composition-id]\");\n      if (!hud || !counter || !recordDot || !host) {\n        throw new Error(\"Camcorder HUD could not find its composition host\");\n      }\n\n      var compositionId = host.getAttribute(\"data-composition-id\");\n      var duration = Number(host.getAttribute(\"data-duration\")) || 4;\n      var counterStart = Number(hud.getAttribute(\"data-hf-counter-start\")) || 0;\n      var state = { seconds: 0 };\n\n      function formatCounter(value) {\n        var seconds = Math.max(0, Math.floor(value));\n        var hours = Math.floor(seconds / 3600);\n        var minutes = Math.floor((seconds % 3600) / 60);\n        var remainder = seconds % 60;\n        return [hours, minutes, remainder]\n          .map(function (part) {\n            return String(part).padStart(2, \"0\");\n          })\n          .join(\":\");\n      }\n\n      function updateHud() {\n        counter.textContent = formatCounter(counterStart + state.seconds);\n        recordDot.style.opacity = Math.floor(state.seconds / 0.55) % 2 === 0 ? \"1\" : \"0.25\";\n      }\n\n      var tl = gsap.timeline({ paused: true });\n      tl.to(state, { seconds: duration, duration: duration, ease: \"none\", onUpdate: updateHud }, 0);\n      updateHud();\n      window.__timelines[compositionId] = tl;\n    \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/chromatic-radial-split.json b/docs/public/catalog/blocks/chromatic-radial-split.json
new file mode 100644
index 0000000000..2f56daab05
--- /dev/null
+++ b/docs/public/catalog/blocks/chromatic-radial-split.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #22223b;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #7678ed;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #7678ed;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #7678ed;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #7678ed;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #7678ed;\n          background: rgba(118, 120, 237, 0.06);\n          border: 1px solid rgba(118, 120, 237, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #9a8c98;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">08 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #22223b\">\n        <div class=\"scene-label\" style=\"color: #7678ed\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #7678ed; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #22223b\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Chromatic Radial Split</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use chromatic radial split shader transition\"</div>\n        <div class=\"bp-desc\">\n          RGB channels separate and converge radially. From-scene splits outward, to-scene converges\n          inward.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"void main(){vec2 c=v_uv-.5;float fromShift=u_progress*.06;float fr=texture2D(u_from,clamp(v_uv+c*fromShift,0.,1.)).r;float fg=texture2D(u_from,v_uv).g;float fb=texture2D(u_from,clamp(v_uv-c*fromShift,0.,1.)).b;vec3 fromSplit=vec3(fr,fg,fb);float toShift=(1.-u_progress)*.06;float tr=texture2D(u_to,clamp(v_uv-c*toShift,0.,1.)).r;float tg=texture2D(u_to,v_uv).g;float tb=texture2D(u_to,clamp(v_uv+c*toShift,0.,1.)).b;vec3 toSplit=vec3(tr,tg,tb);gl_FragColor=vec4(mix(fromSplit,toSplit,u_progress),1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/cinematic-zoom.json b/docs/public/catalog/blocks/cinematic-zoom.json
new file mode 100644
index 0000000000..4789c157b9
--- /dev/null
+++ b/docs/public/catalog/blocks/cinematic-zoom.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #3d348b;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #f7b801;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #f7b801;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #f7b801;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #f7b801;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #f7b801;\n          background: rgba(247, 184, 1, 0.06);\n          border: 1px solid rgba(247, 184, 1, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #a0a0c0;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">07 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #3d348b\">\n        <div class=\"scene-label\" style=\"color: #f7b801\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #f7b801; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #3d348b\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Cinematic Zoom</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use cinematic zoom shader transition\"</div>\n        <div class=\"bp-desc\">\n          Both scenes zoom-blur with per-channel radial offset. From zooms outward, to zooms inward\n          from tight.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"void main(){vec2 d=v_uv-vec2(.5);float fromS=u_progress*.08;float toS=(1.-u_progress)*.06;float fr=0.,fg=0.,fb=0.;for(int i=0;i<12;i++){float f=float(i)/12.;fr+=texture2D(u_from,v_uv-d*(fromS*1.06)*f).r;fg+=texture2D(u_from,v_uv-d*fromS*f).g;fb+=texture2D(u_from,v_uv-d*(fromS*.94)*f).b;}vec3 fromBl=vec3(fr,fg,fb)/12.;float tr=0.,tg=0.,tb=0.;for(int i=0;i<12;i++){float f=float(i)/12.;tr+=texture2D(u_to,v_uv+d*(toS*1.06)*f).r;tg+=texture2D(u_to,v_uv+d*toS*f).g;tb+=texture2D(u_to,v_uv+d*(toS*.94)*f).b;}vec3 toBl=vec3(tr,tg,tb)/12.;gl_FragColor=vec4(mix(fromBl,toBl,u_progress),1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-3d-extrude.json b/docs/public/catalog/blocks/code-3d-extrude.json
new file mode 100644
index 0000000000..7f36534341
--- /dev/null
+++ b/docs/public/catalog/blocks/code-3d-extrude.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code 3D Extrude</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n      }\n      #gl {\n        position: absolute;\n        inset: 0;\n        width: 1920px;\n        height: 1080px;\n        display: block;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-3d-extrude\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <canvas id=\"gl\" width=\"1920\" height=\"1080\"></canvas>\n    </div>\n    <script>\n      window.__TOKENS = {\n        feature: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: 'async function loadConfig(path) {\\n  const raw = await readFile(path, \"utf8\")\\n  const config = JSON.parse(raw)\\n  return validate(config)\\n}',\n              tokens: [\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0\",\n                  content: \"async\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4\",\n                  content: \"loadConfig\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6\",\n                  content: \"path\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12\",\n                  content: \"raw\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16\",\n                  content: \"await\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18\",\n                  content: \"readFile\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19\",\n                  content: \"(path,\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21\",\n                  content: '\"utf8\"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27\",\n                  content: \"config\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31\",\n                  content: \"JSON\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32\",\n                  content: \".\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33\",\n                  content: \"parse\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34\",\n                  content: \"(raw)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37\",\n                  content: \"return\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39\",\n                  content: \"validate\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40\",\n                  content: \"(config)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = {\n        id: \"code-3d-extrude\",\n        effect: \"extrude\",\n        seq: \"feature\",\n        duration: 8,\n        seed: 7,\n      };\n    </script>\n    <script>\n      // hf-code-anim-gl.js — WebGL code-animation engine for the \"crazy\" Code Animations blocks.\n      //\n      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once\n      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve\n      // shader, or a GPU particle system. Determinism per the project contract:\n      //   - render only via tl.eventCallback(\"onUpdate\", …) + one initial render() — never rAF\n      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now\n      //   - canvas drawn once after document.fonts.ready (final glyph metrics)\n      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame\n      //\n      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        // ---- seeded PRNG (no Math.random) -----------------------------------------\n        function mulberry32(a) {\n          return function () {\n            a |= 0;\n            a = (a + 0x6d2b79f5) | 0;\n            var t = Math.imul(a ^ (a >>> 15), 1 | a);\n            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n          };\n        }\n\n        // ---- split a token state into lines of {content,color} --------------------\n        function splitLines(state) {\n          var lines = [[]];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push([]);\n              continue;\n            }\n            lines[lines.length - 1].push(t);\n          }\n          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();\n          return lines;\n        }\n\n        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------\n        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.\n        function drawCodeToCanvas(state, opts) {\n          opts = opts || {};\n          var fontPx = opts.fontPx || 36;\n          var lineH = opts.lineH || 54;\n          var padX = opts.padX || 70;\n          var padY = opts.padY || 60;\n          var weight = opts.weight || 500;\n          var font = weight + \" \" + fontPx + 'px \"JetBrains Mono\", monospace';\n\n          var lines = splitLines(state);\n          var measure = document.createElement(\"canvas\").getContext(\"2d\");\n          measure.font = font;\n          var maxW = 0;\n          for (var i = 0; i < lines.length; i++) {\n            var w = 0;\n            for (var j = 0; j < lines[i].length; j++)\n              w += measure.measureText(lines[i][j].content).width;\n            if (w > maxW) maxW = w;\n          }\n          var W = Math.max(2, Math.ceil(maxW + padX * 2));\n          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));\n\n          var canvas = document.createElement(\"canvas\");\n          canvas.width = W;\n          canvas.height = H;\n          var ctx = canvas.getContext(\"2d\");\n          if (opts.transparent) {\n            ctx.clearRect(0, 0, W, H);\n          } else {\n            ctx.fillStyle = opts.bg || \"#0b0f17\";\n            ctx.fillRect(0, 0, W, H);\n          }\n          ctx.textBaseline = \"top\";\n          ctx.font = font;\n          for (var li = 0; li < lines.length; li++) {\n            var x = padX;\n            var y = padY + li * lineH;\n            for (var k = 0; k < lines[li].length; k++) {\n              var tok = lines[li][k];\n              ctx.fillStyle = tok.color;\n              ctx.fillText(tok.content, x, y);\n              x += ctx.measureText(tok.content).width;\n            }\n          }\n          return {\n            canvas: canvas,\n            W: W,\n            H: H,\n            lines: lines.length,\n            lineH: lineH,\n            padY: padY,\n            fontPx: fontPx,\n          };\n        }\n\n        function fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur) {\n          scene.background = new THREE.Color(0x05070b);\n          var code = drawCodeToCanvas(state, {\n            fontPx: 38,\n            lineH: 56,\n            padX: 80,\n            padY: 70,\n            weight: 600,\n          });\n          var tex = new THREE.CanvasTexture(code.canvas);\n          tex.minFilter = THREE.LinearFilter;\n          tex.magFilter = THREE.LinearFilter;\n          tex.generateMipmaps = false;\n\n          var aspect = code.W / code.H;\n          var slabH = 6.2;\n          var slabW = slabH * aspect;\n          var depth = 0.5;\n\n          // beveled slab: rounded extruded rectangle\n          var hw = slabW / 2;\n          var hh = slabH / 2;\n          var r = 0.18;\n          var shape = new THREE.Shape();\n          shape.moveTo(-hw + r, -hh);\n          shape.lineTo(hw - r, -hh);\n          shape.quadraticCurveTo(hw, -hh, hw, -hh + r);\n          shape.lineTo(hw, hh - r);\n          shape.quadraticCurveTo(hw, hh, hw - r, hh);\n          shape.lineTo(-hw + r, hh);\n          shape.quadraticCurveTo(-hw, hh, -hw, hh - r);\n          shape.lineTo(-hw, -hh + r);\n          shape.quadraticCurveTo(-hw, -hh, -hw + r, -hh);\n          var geo = new THREE.ExtrudeGeometry(shape, {\n            depth: depth,\n            bevelEnabled: true,\n            bevelThickness: 0.12,\n            bevelSize: 0.1,\n            bevelSegments: 3,\n            steps: 1,\n          });\n          geo.center();\n          // UVs from ExtrudeGeometry don't map the texture nicely to the face; remap front-face UVs from XY bounds.\n          geo.computeBoundingBox();\n          var bb = geo.boundingBox;\n          var sizeX = bb.max.x - bb.min.x;\n          var sizeY = bb.max.y - bb.min.y;\n          var pos = geo.attributes.position;\n          var uv = geo.attributes.uv;\n          for (var vi = 0; vi < pos.count; vi++) {\n            uv.setXY(vi, (pos.getX(vi) - bb.min.x) / sizeX, (pos.getY(vi) - bb.min.y) / sizeY);\n          }\n          uv.needsUpdate = true;\n\n          // Face is an unlit \"screen\" — shows the exact vivid Shiki colors (no PBR/emissive wash).\n          // The 3D read comes from the lit, beveled EDGES + perspective, like a glowing monitor.\n          var faceMat = new THREE.MeshBasicMaterial({ map: tex });\n          var edgeMat = new THREE.MeshStandardMaterial({\n            color: 0x141d2b,\n            roughness: 0.3,\n            metalness: 0.4,\n          });\n          // ExtrudeGeometry groups: 0 = front+back faces, 1 = sides. Front shows the code.\n          var slab = new THREE.Mesh(geo, [faceMat, edgeMat]);\n          scene.add(slab);\n\n          scene.add(new THREE.AmbientLight(0xffffff, 0.5));\n          var key = new THREE.DirectionalLight(0xbcd4ff, 1.25);\n          key.position.set(5, 7, 9);\n          scene.add(key);\n          var rim = new THREE.DirectionalLight(0x4fffa0, 0.45);\n          rim.position.set(-7, -3, 5);\n          scene.add(rim);\n\n          camera.position.set(0, 0, 10);\n\n          // fit camera distance so the WHOLE slab fits (width-limited for wide code), ~78% fill\n          var vfov = (camera.fov * Math.PI) / 180;\n          var screenAspect = 1920 / 1080;\n          var fitH = slabH / 2 / Math.tan(vfov / 2) / 0.78;\n          var fitW = slabW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.78;\n          var fitZ = Math.max(fitH, fitW);\n\n          st.rotY = -1.0;\n          st.rotX = 0.4;\n          st.camZ = fitZ + 6;\n          tl.to(st, { rotY: 0, rotX: 0, camZ: fitZ, duration: dur * 0.6, ease: \"power3.out\" }, 0);\n          // gentle breathing drift at rest (subtle — stays readable)\n          tl.to(\n            st,\n            { rotY: 0.06, rotX: -0.02, duration: dur * 0.4, ease: \"sine.inOut\" },\n            dur * 0.6,\n          );\n\n          return function () {\n            slab.rotation.y = st.rotY;\n            slab.rotation.x = st.rotX;\n            camera.position.z = st.camZ;\n            camera.lookAt(0, 0, 0);\n            // boot loop's render() issues the single renderer.render() — don't double-render here\n          };\n        }\n\n        // ---- dispatch + boot ------------------------------------------------------\n        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {\n          var state = T[spec.seq].states[0];\n          var dur = spec.duration;\n          if (spec.effect === \"extrude\")\n            return fxExtrude(THREE, scene, camera, renderer, state, st, tl, dur);\n          return function () {};\n        }\n\n        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.\n        // One-shot renders exit per job so nothing leaks there; this guards long-lived\n        // Studio/player sessions that reload. Fires only on unload — never during capture.\n        function disposeGL(renderer, scene) {\n          scene.traverse(function (o) {\n            if (o.geometry && o.geometry.dispose) o.geometry.dispose();\n            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];\n            mats.forEach(function (m) {\n              if (m.map && m.map.dispose) m.map.dispose();\n              if (\n                m.uniforms &&\n                m.uniforms.uTex &&\n                m.uniforms.uTex.value &&\n                m.uniforms.uTex.value.dispose\n              ) {\n                m.uniforms.uTex.value.dispose();\n              }\n              if (m.dispose) m.dispose();\n            });\n          });\n          if (renderer.dispose) renderer.dispose();\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var root = document.getElementById(\"root\");\n          var glcanvas = document.getElementById(\"gl\");\n          var W = 1920;\n          var H = 1080;\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          window.__timelines[spec.id] = tl; // register synchronously\n\n          var THREE = window.THREE;\n          var renderer = new THREE.WebGLRenderer({\n            canvas: glcanvas,\n            antialias: true,\n            alpha: false,\n            preserveDrawingBuffer: true,\n          });\n          renderer.setPixelRatio(1);\n          renderer.setSize(W, H, false);\n          var scene = new THREE.Scene();\n          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);\n          var st = {};\n\n          document.fonts.ready.then(function () {\n            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);\n            function render() {\n              renderFn();\n              renderer.render(scene, camera);\n            }\n            tl.eventCallback(\"onUpdate\", render);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            render(); // paint frame 0\n            window.addEventListener(\"beforeunload\", function () {\n              disposeGL(renderer, scene);\n            });\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-diff.json b/docs/public/catalog/blocks/code-diff.json
new file mode 100644
index 0000000000..acc32adffc
--- /dev/null
+++ b/docs/public/catalog/blocks/code-diff.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Diff</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        font-family: \"JetBrains Mono\", monospace;\n        color: #e6edf3;\n      }\n      .bg-field {\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);\n      }\n      .bg-grid {\n        position: absolute;\n        inset: 0;\n        background-image:\n          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);\n        background-size: 64px 64px;\n        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);\n      }\n      .bg-glow {\n        position: absolute;\n        width: 900px;\n        height: 900px;\n        border-radius: 50%;\n        filter: blur(120px);\n        opacity: 0.5;\n      }\n      .bg-glow.a {\n        background: #1f6feb55;\n        left: -180px;\n        top: -200px;\n      }\n      .bg-glow.b {\n        background: #2ea04355;\n        right: -200px;\n        bottom: -260px;\n      }\n      .editor {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 1380px;\n        height: 800px;\n        background: #0b0f17;\n        border: 1px solid #1d2733;\n        border-radius: 16px;\n        box-shadow:\n          0 40px 120px rgba(0, 0, 0, 0.6),\n          0 2px 0 rgba(255, 255, 255, 0.03) inset;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n      .titlebar {\n        height: 56px;\n        flex: 0 0 56px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 0 22px;\n        background: linear-gradient(#11161f, #0c111a);\n        border-bottom: 1px solid #1b2430;\n      }\n      .dots {\n        display: flex;\n        gap: 10px;\n      }\n      .dot {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n      }\n      .dot.r {\n        background: #ff5f57;\n      }\n      .dot.y {\n        background: #febc2e;\n      }\n      .dot.g {\n        background: #28c840;\n      }\n      .filename {\n        font-size: 19px;\n        color: #8b98a9;\n        letter-spacing: 0.2px;\n      }\n      .filename .accent {\n        color: #d6e2f0;\n      }\n      .code-surface {\n        position: relative;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      .scene {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        will-change: opacity;\n      }\n      .code {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        right: 0;\n        padding: 0 44px 0 104px;\n        font-size: 30px;\n        line-height: 46px;\n        font-variant-ligatures: none;\n        tab-size: 2;\n      }\n      .gutter {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        width: 84px;\n        padding-right: 18px;\n        font-size: 30px;\n        line-height: 46px;\n        text-align: right;\n        color: #828c9b;\n        user-select: none;\n      }\n      .ln {\n        display: block;\n        height: 46px;\n      }\n      .line {\n        display: block;\n        min-height: 46px;\n        white-space: pre;\n        position: relative;\n        z-index: 1;\n      }\n      .tok {\n        display: inline-block;\n        white-space: pre;\n        will-change: transform, opacity;\n      }\n      .caret {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 3px;\n        height: 32px;\n        margin-top: 6px;\n        background: #58a6ff;\n        border-radius: 1px;\n        z-index: 3;\n      }\n      .hl-box {\n        position: absolute;\n        background: rgba(88, 166, 255, 0.16);\n        border-left: 3px solid #58a6ff;\n        border-radius: 6px;\n        z-index: 0;\n        overflow: hidden;\n      }\n      .diff-line {\n        display: block;\n        min-height: 0;\n        line-height: 46px;\n        white-space: pre;\n        position: relative;\n        overflow: hidden;\n        padding-left: 14px;\n      }\n      .diff-sign {\n        display: inline-block;\n        width: 22px;\n        color: #41506220;\n      }\n      .diff-del {\n        background: rgba(248, 81, 73, 0.12);\n        box-shadow: inset 3px 0 #f85149;\n      }\n      .diff-add {\n        background: rgba(63, 185, 80, 0.12);\n        box-shadow: inset 3px 0 #3fb950;\n      }\n      .diff-del .diff-sign {\n        color: #f85149;\n      }\n      .diff-add .diff-sign {\n        color: #3fb950;\n      }\n      .flight-block {\n        position: absolute;\n        white-space: pre;\n        font-size: 27px;\n        line-height: 40px;\n        padding: 11px 22px;\n        border-radius: 11px;\n        background: #0f1722;\n        border: 1px solid #233044;\n        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);\n        will-change: transform, opacity;\n      }\n      .flight-target {\n        position: absolute;\n        border: 1.5px dashed #2a3a4f;\n        border-radius: 14px;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-diff\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"bg-field\" data-layout-ignore></div>\n      <div class=\"bg-grid\" data-layout-ignore></div>\n      <div class=\"bg-glow a\" data-layout-ignore></div>\n      <div class=\"bg-glow b\" data-layout-ignore></div>\n      <div class=\"editor\" id=\"editor\" data-layout-ignore>\n        <div class=\"titlebar\">\n          <div class=\"dots\">\n            <span class=\"dot r\"></span><span class=\"dot y\"></span><span class=\"dot g\"></span>\n          </div>\n          <span class=\"filename\"><span class=\"accent\">greet.js</span> — Code Diff</span>\n        </div>\n        <div class=\"code-surface\" id=\"surface\"></div>\n      </div>\n    </div>\n    <script>\n      window.__TOKENS = {\n        diff: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: 'function greet(name) {\\n  console.log(\"hi \" + name)\\n}',\n              tokens: [\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2\",\n                  content: \"greet\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4\",\n                  content: \"name\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-8\",\n                  content: \"console.\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9\",\n                  content: \"log\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-11\",\n                  content: '\"hi \"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-12\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-13\",\n                  content: \"+\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-14\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-15\",\n                  content: \"name)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-18\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n            {\n              code: 'function greet(name, lang) {\\n  const msg = translate(\"hi\", lang)\\n  console.log(`${msg} ${name}`)\\n}',\n              tokens: [\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-0\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-2\",\n                  content: \"greet\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-3\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-4\",\n                  content: \"name\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-5\",\n                  content: \",\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-6\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-7\",\n                  content: \"lang\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-5\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-6\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-7\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-11\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-12\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-13\",\n                  content: \"msg\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-14\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-15\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-16\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-17\",\n                  content: \"translate\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-10\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-19\",\n                  content: '\"hi\"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-20\",\n                  content: \", lang)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-21\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-22\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-23\",\n                  content: \"console.\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-9\",\n                  content: \"log\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-25\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-26\",\n                  content: \"`${\",\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-27\",\n                  content: \"msg\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-28\",\n                  content: \"} ${\",\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-29\",\n                  content: \"name\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-30\",\n                  content: \"}`\",\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-31\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-16\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"97wperY-uI8_OA5W5UX94Q5keKEoIobaKXQ6V8Tcd5I-17\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"w2rmoAdPXgC70S4pDXgHIIwz8Jqq0QKYf1B6jvTMUJ8-34\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = { id: \"code-diff\", effect: \"diff\", seq: \"diff\", duration: 6 };\n    </script>\n    <script>\n      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.\n      //\n      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and\n      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —\n      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement\n      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets\n      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the\n      // engine builds one scene that fills the composition and registers window.__timelines[id].\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        function lineDiv() {\n          var d = document.createElement(\"div\");\n          d.className = \"line\";\n          return d;\n        }\n\n        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.\n        function renderState(codeEl, state) {\n          codeEl.textContent = \"\";\n          var keyToEl = new Map();\n          var line = lineDiv();\n          codeEl.appendChild(line);\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              line = lineDiv();\n              codeEl.appendChild(line);\n              continue;\n            }\n            var span = document.createElement(\"span\");\n            span.className = \"tok\";\n            span.textContent = t.content;\n            span.style.color = t.color;\n            if (t.fontStyle & 1) span.style.fontStyle = \"italic\";\n            if (t.fontStyle & 2) span.style.fontWeight = \"700\";\n            line.appendChild(span);\n            keyToEl.set(t.key, span);\n          }\n          var last = codeEl.lastChild;\n          if (last && last.className === \"line\" && last.children.length === 0)\n            codeEl.removeChild(last);\n          return keyToEl;\n        }\n\n        function rectsOf(keyToEl) {\n          var m = new Map();\n          keyToEl.forEach(function (el, k) {\n            var r = el.getBoundingClientRect();\n            m.set(k, { left: r.left, top: r.top });\n          });\n          return m;\n        }\n\n        function makeScene(surface, withGutter) {\n          var scene = document.createElement(\"div\");\n          scene.className = \"scene\";\n          if (withGutter) {\n            var g = document.createElement(\"div\");\n            g.className = \"gutter\";\n            scene.appendChild(g);\n          }\n          var code = document.createElement(\"div\");\n          code.className = \"code\";\n          scene.appendChild(code);\n          surface.appendChild(scene);\n          return { scene: scene, code: code, gutter: scene.querySelector(\".gutter\") };\n        }\n\n        function fillGutter(g, n) {\n          var html = \"\";\n          for (var i = 1; i <= n; i++) html += '<span class=\"ln\">' + i + \"</span>\";\n          g.innerHTML = html;\n        }\n\n        function splitLines(state) {\n          var lines = [{ text: \"\", tokens: [] }];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push({ text: \"\", tokens: [] });\n              continue;\n            }\n            var cur = lines[lines.length - 1];\n            cur.tokens.push(t);\n            cur.text += t.content;\n          }\n          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();\n          return lines;\n        }\n\n        function lineDiff(a, b) {\n          var n = a.length;\n          var m = b.length;\n          var dp = [];\n          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));\n          for (var i = n - 1; i >= 0; i--) {\n            for (var j = m - 1; j >= 0; j--) {\n              dp[i][j] =\n                a[i].text === b[j].text\n                  ? dp[i + 1][j + 1] + 1\n                  : Math.max(dp[i + 1][j], dp[i][j + 1]);\n            }\n          }\n          var ops = [];\n          var i = 0;\n          var j = 0;\n          while (i < n && j < m) {\n            if (a[i].text === b[j].text) {\n              ops.push({ type: \"same\", line: b[j] });\n              i++;\n              j++;\n            } else if (dp[i + 1][j] >= dp[i][j + 1]) {\n              ops.push({ type: \"del\", line: a[i] });\n              i++;\n            } else {\n              ops.push({ type: \"add\", line: b[j] });\n              j++;\n            }\n          }\n          while (i < n) ops.push({ type: \"del\", line: a[i++] });\n          while (j < m) ops.push({ type: \"add\", line: b[j++] });\n          return ops;\n        }\n\n        // ---- single-scene effect builders (fade in, play, hold to end) -------------\n        var FADE = 0.45;\n\n        function diff(tl, surface, states, start) {\n          var DEL = 0.55;\n          var ADD = 0.6;\n          var ops = lineDiff(splitLines(states[0]), splitLines(states[1]));\n          var parts = makeScene(surface, false);\n          var code = parts.code;\n          var delEls = [];\n          var addEls = [];\n          ops.forEach(function (op) {\n            var ln = document.createElement(\"div\");\n            ln.className =\n              \"diff-line\" +\n              (op.type === \"del\" ? \" diff-del\" : op.type === \"add\" ? \" diff-add\" : \"\");\n            var sign = document.createElement(\"span\");\n            sign.className = \"diff-sign\";\n            sign.textContent = op.type === \"del\" ? \"- \" : op.type === \"add\" ? \"+ \" : \"  \";\n            ln.appendChild(sign);\n            op.line.tokens.forEach(function (t) {\n              var s = document.createElement(\"span\");\n              s.className = \"tok\";\n              s.textContent = t.content;\n              s.style.color = t.color;\n              ln.appendChild(s);\n            });\n            code.appendChild(ln);\n            if (op.type === \"del\") delEls.push(ln);\n            if (op.type === \"add\") addEls.push(ln);\n          });\n          tl.set(parts.scene, { opacity: 0 }, 0);\n          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: \"power1.out\" }, start);\n          var atDel = start + FADE + 0.3;\n          delEls.forEach(function (el, k) {\n            tl.fromTo(\n              el,\n              { height: 46, opacity: 1 },\n              { height: 0, opacity: 0, duration: DEL, ease: \"power2.inOut\" },\n              atDel + k * 0.08,\n            );\n          });\n          var atAdd = atDel + DEL + 0.15;\n          addEls.forEach(function (el, k) {\n            tl.set(el, { height: 0, opacity: 0 }, 0);\n            tl.fromTo(\n              el,\n              { height: 0, opacity: 0 },\n              { height: 46, opacity: 1, duration: ADD, ease: \"power2.out\" },\n              atAdd + k * 0.12,\n            );\n          });\n        }\n\n        function buildEffect(tl, surface, spec) {\n          var start = 0.45;\n          var seq = T[spec.seq];\n          if (spec.effect === \"diff\") diff(tl, surface, seq.states, start);\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var surface = document.getElementById(\"surface\");\n          var root = document.getElementById(\"root\");\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          // Build inside fonts.ready (glyph metrics must be final), then register.\n          // Register ONLY after the timeline is fully built: the runtime's\n          // sub-composition readiness gate treats \"key present\" as \"ready\" and\n          // nests the child once. An empty timeline registered before this build\n          // would be nested empty and never re-nested → blank render when used as\n          // a sub-composition. See the contract in engine frameCapture.ts.\n          document.fonts.ready.then(function () {\n            tl.from(\"#editor\", { opacity: 0, scale: 0.985, duration: 0.5, ease: \"power2.out\" }, 0);\n            buildEffect(tl, surface, spec);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            window.__timelines[\"code-diff\"] = tl; // register AFTER setup completes\n            if (typeof window.__hfForceTimelineRebind === \"function\") {\n              window.__hfForceTimelineRebind(); // re-nest now that we are populated\n            }\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-highlight.json b/docs/public/catalog/blocks/code-highlight.json
new file mode 100644
index 0000000000..ee972f774f
--- /dev/null
+++ b/docs/public/catalog/blocks/code-highlight.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Highlight Sweep</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        font-family: \"JetBrains Mono\", monospace;\n        color: #e6edf3;\n      }\n      .bg-field {\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);\n      }\n      .bg-grid {\n        position: absolute;\n        inset: 0;\n        background-image:\n          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);\n        background-size: 64px 64px;\n        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);\n      }\n      .bg-glow {\n        position: absolute;\n        width: 900px;\n        height: 900px;\n        border-radius: 50%;\n        filter: blur(120px);\n        opacity: 0.5;\n      }\n      .bg-glow.a {\n        background: #1f6feb55;\n        left: -180px;\n        top: -200px;\n      }\n      .bg-glow.b {\n        background: #2ea04355;\n        right: -200px;\n        bottom: -260px;\n      }\n      .editor {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 1380px;\n        height: 800px;\n        background: #0b0f17;\n        border: 1px solid #1d2733;\n        border-radius: 16px;\n        box-shadow:\n          0 40px 120px rgba(0, 0, 0, 0.6),\n          0 2px 0 rgba(255, 255, 255, 0.03) inset;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n      .titlebar {\n        height: 56px;\n        flex: 0 0 56px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 0 22px;\n        background: linear-gradient(#11161f, #0c111a);\n        border-bottom: 1px solid #1b2430;\n      }\n      .dots {\n        display: flex;\n        gap: 10px;\n      }\n      .dot {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n      }\n      .dot.r {\n        background: #ff5f57;\n      }\n      .dot.y {\n        background: #febc2e;\n      }\n      .dot.g {\n        background: #28c840;\n      }\n      .filename {\n        font-size: 19px;\n        color: #8b98a9;\n        letter-spacing: 0.2px;\n      }\n      .filename .accent {\n        color: #d6e2f0;\n      }\n      .code-surface {\n        position: relative;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      .scene {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        will-change: opacity;\n      }\n      .code {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        right: 0;\n        padding: 0 44px 0 104px;\n        font-size: 30px;\n        line-height: 46px;\n        font-variant-ligatures: none;\n        tab-size: 2;\n      }\n      .gutter {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        width: 84px;\n        padding-right: 18px;\n        font-size: 30px;\n        line-height: 46px;\n        text-align: right;\n        color: #828c9b;\n        user-select: none;\n      }\n      .ln {\n        display: block;\n        height: 46px;\n      }\n      .line {\n        display: block;\n        min-height: 46px;\n        white-space: pre;\n        position: relative;\n        z-index: 1;\n      }\n      .tok {\n        display: inline-block;\n        white-space: pre;\n        will-change: transform, opacity;\n      }\n      .caret {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 3px;\n        height: 32px;\n        margin-top: 6px;\n        background: #58a6ff;\n        border-radius: 1px;\n        z-index: 3;\n      }\n      .hl-box {\n        position: absolute;\n        background: rgba(88, 166, 255, 0.16);\n        border-left: 3px solid #58a6ff;\n        border-radius: 6px;\n        z-index: 0;\n        overflow: hidden;\n      }\n      .diff-line {\n        display: block;\n        min-height: 0;\n        line-height: 46px;\n        white-space: pre;\n        position: relative;\n        overflow: hidden;\n        padding-left: 14px;\n      }\n      .diff-sign {\n        display: inline-block;\n        width: 22px;\n        color: #41506220;\n      }\n      .diff-del {\n        background: rgba(248, 81, 73, 0.12);\n        box-shadow: inset 3px 0 #f85149;\n      }\n      .diff-add {\n        background: rgba(63, 185, 80, 0.12);\n        box-shadow: inset 3px 0 #3fb950;\n      }\n      .diff-del .diff-sign {\n        color: #f85149;\n      }\n      .diff-add .diff-sign {\n        color: #3fb950;\n      }\n      .flight-block {\n        position: absolute;\n        white-space: pre;\n        font-size: 27px;\n        line-height: 40px;\n        padding: 11px 22px;\n        border-radius: 11px;\n        background: #0f1722;\n        border: 1px solid #233044;\n        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);\n        will-change: transform, opacity;\n      }\n      .flight-target {\n        position: absolute;\n        border: 1.5px dashed #2a3a4f;\n        border-radius: 14px;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-highlight\"\n      data-start=\"0\"\n      data-duration=\"5\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"bg-field\" data-layout-ignore></div>\n      <div class=\"bg-grid\" data-layout-ignore></div>\n      <div class=\"bg-glow a\" data-layout-ignore></div>\n      <div class=\"bg-glow b\" data-layout-ignore></div>\n      <div class=\"editor\" id=\"editor\" data-layout-ignore>\n        <div class=\"titlebar\">\n          <div class=\"dots\">\n            <span class=\"dot r\"></span><span class=\"dot y\"></span><span class=\"dot g\"></span>\n          </div>\n          <span class=\"filename\"\n            ><span class=\"accent\">loadConfig.js</span> — Code Highlight Sweep</span\n          >\n        </div>\n        <div class=\"code-surface\" id=\"surface\"></div>\n      </div>\n    </div>\n    <script>\n      window.__TOKENS = {\n        feature: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: 'async function loadConfig(path) {\\n  const raw = await readFile(path, \"utf8\")\\n  const config = JSON.parse(raw)\\n  return validate(config)\\n}',\n              tokens: [\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0\",\n                  content: \"async\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4\",\n                  content: \"loadConfig\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6\",\n                  content: \"path\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12\",\n                  content: \"raw\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16\",\n                  content: \"await\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18\",\n                  content: \"readFile\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19\",\n                  content: \"(path,\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21\",\n                  content: '\"utf8\"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27\",\n                  content: \"config\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31\",\n                  content: \"JSON\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32\",\n                  content: \".\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33\",\n                  content: \"parse\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34\",\n                  content: \"(raw)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37\",\n                  content: \"return\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39\",\n                  content: \"validate\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40\",\n                  content: \"(config)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = {\n        id: \"code-highlight\",\n        effect: \"highlight\",\n        seq: \"feature\",\n        // `line` is ZERO-BASED: line: 1 highlights the SECOND displayed line\n        // (gutter 2). Note code-scroll's target is 1-based — don't carry a\n        // value between the two blocks without re-checking it.\n        line: 1,\n        duration: 5,\n      };\n    </script>\n    <script>\n      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.\n      //\n      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and\n      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —\n      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement\n      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets\n      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the\n      // engine builds one scene that fills the composition and registers window.__timelines[id].\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        function lineDiv() {\n          var d = document.createElement(\"div\");\n          d.className = \"line\";\n          return d;\n        }\n\n        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.\n        function renderState(codeEl, state) {\n          codeEl.textContent = \"\";\n          var keyToEl = new Map();\n          var line = lineDiv();\n          codeEl.appendChild(line);\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              line = lineDiv();\n              codeEl.appendChild(line);\n              continue;\n            }\n            var span = document.createElement(\"span\");\n            span.className = \"tok\";\n            span.textContent = t.content;\n            span.style.color = t.color;\n            if (t.fontStyle & 1) span.style.fontStyle = \"italic\";\n            if (t.fontStyle & 2) span.style.fontWeight = \"700\";\n            line.appendChild(span);\n            keyToEl.set(t.key, span);\n          }\n          var last = codeEl.lastChild;\n          if (last && last.className === \"line\" && last.children.length === 0)\n            codeEl.removeChild(last);\n          return keyToEl;\n        }\n\n        function rectsOf(keyToEl) {\n          var m = new Map();\n          keyToEl.forEach(function (el, k) {\n            var r = el.getBoundingClientRect();\n            m.set(k, { left: r.left, top: r.top });\n          });\n          return m;\n        }\n\n        function makeScene(surface, withGutter) {\n          var scene = document.createElement(\"div\");\n          scene.className = \"scene\";\n          if (withGutter) {\n            var g = document.createElement(\"div\");\n            g.className = \"gutter\";\n            scene.appendChild(g);\n          }\n          var code = document.createElement(\"div\");\n          code.className = \"code\";\n          scene.appendChild(code);\n          surface.appendChild(scene);\n          return { scene: scene, code: code, gutter: scene.querySelector(\".gutter\") };\n        }\n\n        function fillGutter(g, n) {\n          var html = \"\";\n          for (var i = 1; i <= n; i++) html += '<span class=\"ln\">' + i + \"</span>\";\n          g.innerHTML = html;\n        }\n\n        function splitLines(state) {\n          var lines = [{ text: \"\", tokens: [] }];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push({ text: \"\", tokens: [] });\n              continue;\n            }\n            var cur = lines[lines.length - 1];\n            cur.tokens.push(t);\n            cur.text += t.content;\n          }\n          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();\n          return lines;\n        }\n\n        function lineDiff(a, b) {\n          var n = a.length;\n          var m = b.length;\n          var dp = [];\n          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));\n          for (var i = n - 1; i >= 0; i--) {\n            for (var j = m - 1; j >= 0; j--) {\n              dp[i][j] =\n                a[i].text === b[j].text\n                  ? dp[i + 1][j + 1] + 1\n                  : Math.max(dp[i + 1][j], dp[i][j + 1]);\n            }\n          }\n          var ops = [];\n          var i = 0;\n          var j = 0;\n          while (i < n && j < m) {\n            if (a[i].text === b[j].text) {\n              ops.push({ type: \"same\", line: b[j] });\n              i++;\n              j++;\n            } else if (dp[i + 1][j] >= dp[i][j + 1]) {\n              ops.push({ type: \"del\", line: a[i] });\n              i++;\n            } else {\n              ops.push({ type: \"add\", line: b[j] });\n              j++;\n            }\n          }\n          while (i < n) ops.push({ type: \"del\", line: a[i++] });\n          while (j < m) ops.push({ type: \"add\", line: b[j++] });\n          return ops;\n        }\n\n        // ---- single-scene effect builders (fade in, play, hold to end) -------------\n        var FADE = 0.45;\n\n        function highlight(tl, surface, state, start, targetIdx) {\n          var SWEEP = 0.9;\n          var parts = makeScene(surface, true);\n          var code = parts.code;\n          renderState(code, state);\n          var lines = code.querySelectorAll(\".line\");\n          fillGutter(parts.gutter, lines.length);\n          var base = code.getBoundingClientRect();\n          var idx = Math.max(0, Math.min(lines.length - 1, targetIdx));\n          var lr = lines[idx].getBoundingClientRect();\n          var box = document.createElement(\"div\");\n          box.className = \"hl-box\";\n          box.style.left = lr.left - base.left - 8 + \"px\";\n          box.style.top = lr.top - base.top - 1 + \"px\";\n          box.style.height = lr.height + 2 + \"px\";\n          code.insertBefore(box, code.firstChild);\n          tl.set(parts.scene, { opacity: 0 }, 0);\n          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: \"power1.out\" }, start);\n          var at = start + FADE + 0.2;\n          tl.fromTo(\n            box,\n            { width: 0, opacity: 0 },\n            { width: lr.width + 18, opacity: 1, duration: SWEEP, ease: \"power2.inOut\" },\n            at,\n          );\n          for (var i = 0; i < lines.length; i++) {\n            if (i === idx) continue;\n            tl.fromTo(\n              lines[i],\n              { opacity: 1 },\n              { opacity: 0.45, duration: SWEEP, ease: \"power2.inOut\" },\n              at,\n            );\n          }\n        }\n\n        function buildEffect(tl, surface, spec) {\n          var start = 0.45;\n          var seq = T[spec.seq];\n          if (spec.effect === \"highlight\")\n            highlight(tl, surface, seq.states[0], start, spec.line || 0);\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var surface = document.getElementById(\"surface\");\n          var root = document.getElementById(\"root\");\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          // Build inside fonts.ready (glyph metrics must be final), then register.\n          // Register ONLY after the timeline is fully built: the runtime's\n          // sub-composition readiness gate treats \"key present\" as \"ready\" and\n          // nests the child once. An empty timeline registered before this build\n          // would be nested empty and never re-nested → blank render when used as\n          // a sub-composition. See the contract in engine frameCapture.ts.\n          document.fonts.ready.then(function () {\n            tl.from(\"#editor\", { opacity: 0, scale: 0.985, duration: 0.5, ease: \"power2.out\" }, 0);\n            buildEffect(tl, surface, spec);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            window.__timelines[\"code-highlight\"] = tl; // register AFTER setup completes\n            if (typeof window.__hfForceTimelineRebind === \"function\") {\n              window.__hfForceTimelineRebind(); // re-nest now that we are populated\n            }\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-morph.json b/docs/public/catalog/blocks/code-morph.json
new file mode 100644
index 0000000000..d553cc018f
--- /dev/null
+++ b/docs/public/catalog/blocks/code-morph.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Morph</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        font-family: \"JetBrains Mono\", monospace;\n        color: #e6edf3;\n      }\n      .bg-field {\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);\n      }\n      .bg-grid {\n        position: absolute;\n        inset: 0;\n        background-image:\n          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);\n        background-size: 64px 64px;\n        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);\n      }\n      .bg-glow {\n        position: absolute;\n        width: 900px;\n        height: 900px;\n        border-radius: 50%;\n        filter: blur(120px);\n        opacity: 0.5;\n      }\n      .bg-glow.a {\n        background: #1f6feb55;\n        left: -180px;\n        top: -200px;\n      }\n      .bg-glow.b {\n        background: #2ea04355;\n        right: -200px;\n        bottom: -260px;\n      }\n      .editor {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 1380px;\n        height: 800px;\n        background: #0b0f17;\n        border: 1px solid #1d2733;\n        border-radius: 16px;\n        box-shadow:\n          0 40px 120px rgba(0, 0, 0, 0.6),\n          0 2px 0 rgba(255, 255, 255, 0.03) inset;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n      .titlebar {\n        height: 56px;\n        flex: 0 0 56px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 0 22px;\n        background: linear-gradient(#11161f, #0c111a);\n        border-bottom: 1px solid #1b2430;\n      }\n      .dots {\n        display: flex;\n        gap: 10px;\n      }\n      .dot {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n      }\n      .dot.r {\n        background: #ff5f57;\n      }\n      .dot.y {\n        background: #febc2e;\n      }\n      .dot.g {\n        background: #28c840;\n      }\n      .filename {\n        font-size: 19px;\n        color: #8b98a9;\n        letter-spacing: 0.2px;\n      }\n      .filename .accent {\n        color: #d6e2f0;\n      }\n      .code-surface {\n        position: relative;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      .scene {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        will-change: opacity;\n      }\n      .code {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        right: 0;\n        padding: 0 44px 0 104px;\n        font-size: 30px;\n        line-height: 46px;\n        font-variant-ligatures: none;\n        tab-size: 2;\n      }\n      .gutter {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        width: 84px;\n        padding-right: 18px;\n        font-size: 30px;\n        line-height: 46px;\n        text-align: right;\n        color: #828c9b;\n        user-select: none;\n      }\n      .ln {\n        display: block;\n        height: 46px;\n      }\n      .line {\n        display: block;\n        min-height: 46px;\n        white-space: pre;\n        position: relative;\n        z-index: 1;\n      }\n      .tok {\n        display: inline-block;\n        white-space: pre;\n        will-change: transform, opacity;\n      }\n      .caret {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 3px;\n        height: 32px;\n        margin-top: 6px;\n        background: #58a6ff;\n        border-radius: 1px;\n        z-index: 3;\n      }\n      .hl-box {\n        position: absolute;\n        background: rgba(88, 166, 255, 0.16);\n        border-left: 3px solid #58a6ff;\n        border-radius: 6px;\n        z-index: 0;\n        overflow: hidden;\n      }\n      .diff-line {\n        display: block;\n        min-height: 0;\n        line-height: 46px;\n        white-space: pre;\n        position: relative;\n        overflow: hidden;\n        padding-left: 14px;\n      }\n      .diff-sign {\n        display: inline-block;\n        width: 22px;\n        color: #41506220;\n      }\n      .diff-del {\n        background: rgba(248, 81, 73, 0.12);\n        box-shadow: inset 3px 0 #f85149;\n      }\n      .diff-add {\n        background: rgba(63, 185, 80, 0.12);\n        box-shadow: inset 3px 0 #3fb950;\n      }\n      .diff-del .diff-sign {\n        color: #f85149;\n      }\n      .diff-add .diff-sign {\n        color: #3fb950;\n      }\n      .flight-block {\n        position: absolute;\n        white-space: pre;\n        font-size: 27px;\n        line-height: 40px;\n        padding: 11px 22px;\n        border-radius: 11px;\n        background: #0f1722;\n        border: 1px solid #233044;\n        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);\n        will-change: transform, opacity;\n      }\n      .flight-target {\n        position: absolute;\n        border: 1.5px dashed #2a3a4f;\n        border-radius: 14px;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-morph\"\n      data-start=\"0\"\n      data-duration=\"7\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"bg-field\" data-layout-ignore></div>\n      <div class=\"bg-grid\" data-layout-ignore></div>\n      <div class=\"bg-glow a\" data-layout-ignore></div>\n      <div class=\"bg-glow b\" data-layout-ignore></div>\n      <div class=\"editor\" id=\"editor\" data-layout-ignore>\n        <div class=\"titlebar\">\n          <div class=\"dots\">\n            <span class=\"dot r\"></span><span class=\"dot y\"></span><span class=\"dot g\"></span>\n          </div>\n          <span class=\"filename\"><span class=\"accent\">refactor.js</span> — Code Morph</span>\n        </div>\n        <div class=\"code-surface\" id=\"surface\"></div>\n      </div>\n    </div>\n    <script>\n      window.__TOKENS = {\n        morph: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: \"function activeNames(users) {\\n  const out = []\\n  for (const u of users) {\\n    if (u.active) {\\n      out.push(u.name)\\n    }\\n  }\\n  return out\\n}\",\n              tokens: [\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2\",\n                  content: \"activeNames\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4\",\n                  content: \"users\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-8\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-9\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-10\",\n                  content: \"out\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-11\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-12\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-13\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-14\",\n                  content: \"[]\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-15\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-16\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-17\",\n                  content: \"for\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-18\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-19\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-20\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-21\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-22\",\n                  content: \"u\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-23\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-24\",\n                  content: \"of\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-26\",\n                  content: \"users) {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28\",\n                  content: \"    \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-29\",\n                  content: \"if\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-30\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-31\",\n                  content: \"(u.active) {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-33\",\n                  content: \"      \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-34\",\n                  content: \"out.\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-35\",\n                  content: \"push\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-36\",\n                  content: \"(u.name)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-37\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-38\",\n                  content: \"    \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-39\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-40\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-41\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-42\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-43\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-44\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45\",\n                  content: \"return\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-46\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-47\",\n                  content: \"out\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-50\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n            {\n              code: \"function activeNames(users) {\\n  return users\\n    .filter((u) => u.active)\\n    .map((u) => u.name)\\n}\",\n              tokens: [\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-0\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2\",\n                  content: \"activeNames\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4\",\n                  content: \"users\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-5\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-45\",\n                  content: \"return\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-25\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-10\",\n                  content: \"users\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-27\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-28\",\n                  content: \"    \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-13\",\n                  content: \".\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14\",\n                  content: \"filter\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15\",\n                  content: \"((\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16\",\n                  content: \"u\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19\",\n                  content: \"=>\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-21\",\n                  content: \"u.active)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-32\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-23\",\n                  content: \"    \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-24\",\n                  content: \".\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25\",\n                  content: \"map\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26\",\n                  content: \"((\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27\",\n                  content: \"u\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30\",\n                  content: \"=>\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32\",\n                  content: \"u.name)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-48\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-49\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-35\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n            {\n              code: \"const activeNames = (users) =>\\n  users.filter((u) => u.active).map((u) => u.name)\",\n              tokens: [\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-0\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-2\",\n                  content: \"activeNames\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-4\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-5\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-3\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-4\",\n                  content: \"users\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-8\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-9\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-10\",\n                  content: \"=>\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-6\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"cfXrCrtsS58oX7T9biOwW03CrZ_pwg-hqJg3fwn5hnI-7\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-13\",\n                  content: \"users.\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-14\",\n                  content: \"filter\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-15\",\n                  content: \"((\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-16\",\n                  content: \"u\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-17\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-18\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-19\",\n                  content: \"=>\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-20\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-21\",\n                  content: \"u.active).\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-25\",\n                  content: \"map\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-26\",\n                  content: \"((\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-27\",\n                  content: \"u\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-28\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-29\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-30\",\n                  content: \"=>\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-31\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"KLQk7s1CBJrsZpvwO8c9gegRDNZCQJPa3bwM3fTRST0-32\",\n                  content: \"u.name)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"VbRPavhdCez1s__eeEAO0aeZdY95Uxi4jXsI1pxJzag-30\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = { id: \"code-morph\", effect: \"morph\", seq: \"morph\", duration: 7 };\n    </script>\n    <script>\n      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.\n      //\n      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and\n      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —\n      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement\n      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets\n      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the\n      // engine builds one scene that fills the composition and registers window.__timelines[id].\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        function lineDiv() {\n          var d = document.createElement(\"div\");\n          d.className = \"line\";\n          return d;\n        }\n\n        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.\n        function renderState(codeEl, state) {\n          codeEl.textContent = \"\";\n          var keyToEl = new Map();\n          var line = lineDiv();\n          codeEl.appendChild(line);\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              line = lineDiv();\n              codeEl.appendChild(line);\n              continue;\n            }\n            var span = document.createElement(\"span\");\n            span.className = \"tok\";\n            span.textContent = t.content;\n            span.style.color = t.color;\n            if (t.fontStyle & 1) span.style.fontStyle = \"italic\";\n            if (t.fontStyle & 2) span.style.fontWeight = \"700\";\n            line.appendChild(span);\n            keyToEl.set(t.key, span);\n          }\n          var last = codeEl.lastChild;\n          if (last && last.className === \"line\" && last.children.length === 0)\n            codeEl.removeChild(last);\n          return keyToEl;\n        }\n\n        function rectsOf(keyToEl) {\n          var m = new Map();\n          keyToEl.forEach(function (el, k) {\n            var r = el.getBoundingClientRect();\n            m.set(k, { left: r.left, top: r.top });\n          });\n          return m;\n        }\n\n        function makeScene(surface, withGutter) {\n          var scene = document.createElement(\"div\");\n          scene.className = \"scene\";\n          if (withGutter) {\n            var g = document.createElement(\"div\");\n            g.className = \"gutter\";\n            scene.appendChild(g);\n          }\n          var code = document.createElement(\"div\");\n          code.className = \"code\";\n          scene.appendChild(code);\n          surface.appendChild(scene);\n          return { scene: scene, code: code, gutter: scene.querySelector(\".gutter\") };\n        }\n\n        function fillGutter(g, n) {\n          var html = \"\";\n          for (var i = 1; i <= n; i++) html += '<span class=\"ln\">' + i + \"</span>\";\n          g.innerHTML = html;\n        }\n\n        function splitLines(state) {\n          var lines = [{ text: \"\", tokens: [] }];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push({ text: \"\", tokens: [] });\n              continue;\n            }\n            var cur = lines[lines.length - 1];\n            cur.tokens.push(t);\n            cur.text += t.content;\n          }\n          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();\n          return lines;\n        }\n\n        function lineDiff(a, b) {\n          var n = a.length;\n          var m = b.length;\n          var dp = [];\n          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));\n          for (var i = n - 1; i >= 0; i--) {\n            for (var j = m - 1; j >= 0; j--) {\n              dp[i][j] =\n                a[i].text === b[j].text\n                  ? dp[i + 1][j + 1] + 1\n                  : Math.max(dp[i + 1][j], dp[i][j + 1]);\n            }\n          }\n          var ops = [];\n          var i = 0;\n          var j = 0;\n          while (i < n && j < m) {\n            if (a[i].text === b[j].text) {\n              ops.push({ type: \"same\", line: b[j] });\n              i++;\n              j++;\n            } else if (dp[i + 1][j] >= dp[i][j + 1]) {\n              ops.push({ type: \"del\", line: a[i] });\n              i++;\n            } else {\n              ops.push({ type: \"add\", line: b[j] });\n              j++;\n            }\n          }\n          while (i < n) ops.push({ type: \"del\", line: a[i++] });\n          while (j < m) ops.push({ type: \"add\", line: b[j++] });\n          return ops;\n        }\n\n        // ---- single-scene effect builders (fade in, play, hold to end) -------------\n        var FADE = 0.45;\n\n        function morph(tl, surface, states, start) {\n          var STEP = 1.2;\n          var HOLD = 1.0;\n          var t = start;\n          for (var s = 0; s < states.length - 1; s++) {\n            var parts = makeScene(surface, false);\n            var code = parts.code;\n            var fromEls = renderState(code, states[s]);\n            var fromR = rectsOf(fromEls);\n            var toEls = renderState(code, states[s + 1]);\n            var toR = rectsOf(toEls);\n            var base = code.getBoundingClientRect();\n            var seg = gsap.timeline();\n            var ENTER_AT = STEP * 0.45;\n            var FD = STEP * 0.5;\n            toEls.forEach(function (el, k) {\n              var fr = fromR.get(k);\n              var tr = toR.get(k);\n              if (fr) {\n                seg.fromTo(\n                  el,\n                  { x: fr.left - tr.left, y: fr.top - tr.top },\n                  { x: 0, y: 0, duration: STEP, ease: \"power2.inOut\" },\n                  0,\n                );\n              } else {\n                seg.fromTo(\n                  el,\n                  { opacity: 0 },\n                  { opacity: 1, duration: FD, ease: \"power1.out\" },\n                  ENTER_AT,\n                );\n              }\n            });\n            var toKeys = new Set(toEls.keys());\n            var fromState = states[s];\n            for (var i = 0; i < fromState.tokens.length; i++) {\n              var tok = fromState.tokens[i];\n              if (tok.content === \"\\n\" || toKeys.has(tok.key) || !fromR.has(tok.key)) continue;\n              var r = fromR.get(tok.key);\n              var span = document.createElement(\"span\");\n              span.className = \"tok\";\n              span.textContent = tok.content;\n              span.style.position = \"absolute\";\n              span.style.left = r.left - base.left + \"px\";\n              span.style.top = r.top - base.top + \"px\";\n              span.style.color = tok.color;\n              code.appendChild(span);\n              seg.fromTo(span, { opacity: 1 }, { opacity: 0, duration: FD, ease: \"power1.in\" }, 0);\n            }\n            var segStart = t + FADE;\n            var segEnd = segStart + STEP + HOLD;\n            var isLast = s === states.length - 2;\n            tl.set(parts.scene, { opacity: 0 }, 0);\n            tl.to(parts.scene, { opacity: 1, duration: FADE, ease: \"power1.out\" }, t);\n            if (!isLast)\n              tl.to(parts.scene, { opacity: 0, duration: FADE, ease: \"power1.in\" }, segEnd - FADE);\n            tl.add(seg, segStart);\n            t = segEnd - FADE;\n          }\n        }\n\n        function buildEffect(tl, surface, spec) {\n          var start = 0.45;\n          var seq = T[spec.seq];\n          if (spec.effect === \"morph\") morph(tl, surface, seq.states, start);\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var surface = document.getElementById(\"surface\");\n          var root = document.getElementById(\"root\");\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          // Build inside fonts.ready (glyph metrics must be final), then register.\n          // Register ONLY after the timeline is fully built: the runtime's\n          // sub-composition readiness gate treats \"key present\" as \"ready\" and\n          // nests the child once. An empty timeline registered before this build\n          // would be nested empty and never re-nested → blank render when used as\n          // a sub-composition. See the contract in engine frameCapture.ts.\n          document.fonts.ready.then(function () {\n            tl.from(\"#editor\", { opacity: 0, scale: 0.985, duration: 0.5, ease: \"power2.out\" }, 0);\n            buildEffect(tl, surface, spec);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            window.__timelines[\"code-morph\"] = tl; // register AFTER setup completes\n            if (typeof window.__hfForceTimelineRebind === \"function\") {\n              window.__hfForceTimelineRebind(); // re-nest now that we are populated\n            }\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-particle-assemble.json b/docs/public/catalog/blocks/code-particle-assemble.json
new file mode 100644
index 0000000000..8f79c0049f
--- /dev/null
+++ b/docs/public/catalog/blocks/code-particle-assemble.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Particle Assemble</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n      }\n      #gl {\n        position: absolute;\n        inset: 0;\n        width: 1920px;\n        height: 1080px;\n        display: block;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-particle-assemble\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <canvas id=\"gl\" width=\"1920\" height=\"1080\"></canvas>\n    </div>\n    <script>\n      window.__TOKENS = {\n        assemble: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: \"const app = pipe(\\n  parse,\\n  optimize,\\n  emit,\\n)\",\n              tokens: [\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-0\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-2\",\n                  content: \"app\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-4\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-5\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-6\",\n                  content: \"pipe\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-7\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-8\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-9\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-10\",\n                  content: \"parse,\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-11\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-12\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-13\",\n                  content: \"optimize,\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-14\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-15\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-16\",\n                  content: \"emit,\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-17\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-18\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"AFffx9qQBGKnMZ-vDjoaRwC68xQloGJNUSICY1myCK4-19\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = {\n        id: \"code-particle-assemble\",\n        effect: \"particles\",\n        seq: \"assemble\",\n        duration: 8,\n        seed: 23,\n      };\n    </script>\n    <script>\n      // hf-code-anim-gl.js — WebGL code-animation engine for the \"crazy\" Code Animations blocks.\n      //\n      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once\n      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve\n      // shader, or a GPU particle system. Determinism per the project contract:\n      //   - render only via tl.eventCallback(\"onUpdate\", …) + one initial render() — never rAF\n      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now\n      //   - canvas drawn once after document.fonts.ready (final glyph metrics)\n      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame\n      //\n      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        // ---- seeded PRNG (no Math.random) -----------------------------------------\n        function mulberry32(a) {\n          return function () {\n            a |= 0;\n            a = (a + 0x6d2b79f5) | 0;\n            var t = Math.imul(a ^ (a >>> 15), 1 | a);\n            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n          };\n        }\n\n        // ---- split a token state into lines of {content,color} --------------------\n        function splitLines(state) {\n          var lines = [[]];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push([]);\n              continue;\n            }\n            lines[lines.length - 1].push(t);\n          }\n          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();\n          return lines;\n        }\n\n        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------\n        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.\n        function drawCodeToCanvas(state, opts) {\n          opts = opts || {};\n          var fontPx = opts.fontPx || 36;\n          var lineH = opts.lineH || 54;\n          var padX = opts.padX || 70;\n          var padY = opts.padY || 60;\n          var weight = opts.weight || 500;\n          var font = weight + \" \" + fontPx + 'px \"JetBrains Mono\", monospace';\n\n          var lines = splitLines(state);\n          var measure = document.createElement(\"canvas\").getContext(\"2d\");\n          measure.font = font;\n          var maxW = 0;\n          for (var i = 0; i < lines.length; i++) {\n            var w = 0;\n            for (var j = 0; j < lines[i].length; j++)\n              w += measure.measureText(lines[i][j].content).width;\n            if (w > maxW) maxW = w;\n          }\n          var W = Math.max(2, Math.ceil(maxW + padX * 2));\n          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));\n\n          var canvas = document.createElement(\"canvas\");\n          canvas.width = W;\n          canvas.height = H;\n          var ctx = canvas.getContext(\"2d\");\n          if (opts.transparent) {\n            ctx.clearRect(0, 0, W, H);\n          } else {\n            ctx.fillStyle = opts.bg || \"#0b0f17\";\n            ctx.fillRect(0, 0, W, H);\n          }\n          ctx.textBaseline = \"top\";\n          ctx.font = font;\n          for (var li = 0; li < lines.length; li++) {\n            var x = padX;\n            var y = padY + li * lineH;\n            for (var k = 0; k < lines[li].length; k++) {\n              var tok = lines[li][k];\n              ctx.fillStyle = tok.color;\n              ctx.fillText(tok.content, x, y);\n              x += ctx.measureText(tok.content).width;\n            }\n          }\n          return {\n            canvas: canvas,\n            W: W,\n            H: H,\n            lines: lines.length,\n            lineH: lineH,\n            padY: padY,\n            fontPx: fontPx,\n          };\n        }\n\n        function fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, seed) {\n          scene.background = new THREE.Color(0x05070b);\n          var code = drawCodeToCanvas(state, {\n            fontPx: 46,\n            lineH: 70,\n            padX: 70,\n            padY: 64,\n            weight: 700,\n          });\n          var cw = code.W;\n          var ch = code.H;\n          var data = code.canvas.getContext(\"2d\").getImageData(0, 0, cw, ch).data;\n          var rng = mulberry32(((seed || 1) * 2654435761) >>> 0);\n\n          var worldW = 13.0;\n          var worldH = worldW * (ch / cw);\n\n          // sample glyph pixels (brighter than the dark bg) on a fixed grid\n          var step = 2;\n          var tx = [];\n          var col = [];\n          for (var y = 0; y < ch; y += step) {\n            for (var x = 0; x < cw; x += step) {\n              var idx = (y * cw + x) * 4;\n              var r = data[idx];\n              var g = data[idx + 1];\n              var b = data[idx + 2];\n              if (r + g + b < 120) continue; // skip background\n              tx.push((x / cw - 0.5) * worldW, -(y / ch - 0.5) * worldH, 0);\n              col.push(r / 255, g / 255, b / 255);\n            }\n          }\n          var n = tx.length / 3;\n\n          var positions = new Float32Array(n * 3);\n          var aOrigin = new Float32Array(n * 3);\n          var aTarget = new Float32Array(tx);\n          var aColor = new Float32Array(col);\n          var aDelay = new Float32Array(n);\n          for (var i = 0; i < n; i++) {\n            var sx = (rng() * 2 - 1) * worldW * 1.15;\n            var sy = (rng() * 2 - 1) * worldH * 1.7;\n            var sz = (rng() * 2 - 1) * 9.0 - 2.0;\n            aOrigin[i * 3] = sx;\n            aOrigin[i * 3 + 1] = sy;\n            aOrigin[i * 3 + 2] = sz;\n            positions[i * 3] = sx;\n            positions[i * 3 + 1] = sy;\n            positions[i * 3 + 2] = sz;\n            aDelay[i] = rng();\n          }\n\n          var geo = new THREE.BufferGeometry();\n          geo.setAttribute(\"position\", new THREE.BufferAttribute(positions, 3));\n          geo.setAttribute(\"aOrigin\", new THREE.BufferAttribute(aOrigin, 3));\n          geo.setAttribute(\"aTarget\", new THREE.BufferAttribute(aTarget, 3));\n          geo.setAttribute(\"aColor\", new THREE.BufferAttribute(aColor, 3));\n          geo.setAttribute(\"aDelay\", new THREE.BufferAttribute(aDelay, 1));\n\n          var uniforms = { uProgress: { value: 0 }, uSize: { value: 3.4 } };\n          var mat = new THREE.ShaderMaterial({\n            uniforms: uniforms,\n            transparent: true,\n            depthTest: false,\n            depthWrite: false,\n            blending: THREE.NormalBlending,\n            vertexShader: [\n              \"attribute vec3 aOrigin; attribute vec3 aTarget; attribute vec3 aColor; attribute float aDelay;\",\n              \"uniform float uProgress; uniform float uSize;\",\n              \"varying vec3 vColor; varying float vP;\",\n              \"void main(){\",\n              \"  float span = 0.62;\",\n              \"  float p = clamp((uProgress - aDelay*(1.0-span)) / span, 0.0, 1.0);\",\n              \"  p = p*p*(3.0-2.0*p);\",\n              \"  vec3 pos = mix(aOrigin, aTarget, p);\",\n              \"  vec4 mv = modelViewMatrix * vec4(pos, 1.0);\",\n              \"  gl_Position = projectionMatrix * mv;\",\n              \"  gl_PointSize = uSize * (60.0 / -mv.z) * (0.45 + 0.55*p);\",\n              \"  vColor = aColor; vP = p;\",\n              \"}\",\n            ].join(\"\\n\"),\n            fragmentShader: [\n              \"precision highp float;\",\n              \"varying vec3 vColor; varying float vP;\",\n              \"void main(){\",\n              \"  vec2 d = gl_PointCoord - 0.5;\",\n              \"  float r2 = dot(d, d);\",\n              \"  if (r2 > 0.25) discard;\",\n              \"  float a = smoothstep(0.25, 0.02, r2);\",\n              // brighter & whiter in flight, resolves to true color as it lands\n              \"  vec3 c = mix(vColor + vec3(0.32)*(1.0-vP), vColor, vP);\",\n              \"  gl_FragColor = vec4(c, a * (0.7 + 0.3*vP));\",\n              \"}\",\n            ].join(\"\\n\"),\n          });\n\n          var pts = new THREE.Points(geo, mat);\n          scene.add(pts);\n\n          camera.position.set(0, 0, 10);\n          var vfov = (camera.fov * Math.PI) / 180;\n          var sa = 1920 / 1080;\n          var fitH = worldH / 2 / Math.tan(vfov / 2) / 0.78;\n          var fitW = worldW / 2 / (Math.tan(vfov / 2) * sa) / 0.78;\n          camera.position.z = Math.max(fitH, fitW);\n          camera.lookAt(0, 0, 0);\n\n          tl.to(uniforms.uProgress, { value: 1.0, duration: dur * 0.72, ease: \"power2.out\" }, 0);\n\n          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.\n          return function () {};\n        }\n\n        // ---- dispatch + boot ------------------------------------------------------\n        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {\n          var state = T[spec.seq].states[0];\n          var dur = spec.duration;\n          if (spec.effect === \"particles\")\n            return fxParticles(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);\n          return function () {};\n        }\n\n        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.\n        // One-shot renders exit per job so nothing leaks there; this guards long-lived\n        // Studio/player sessions that reload. Fires only on unload — never during capture.\n        function disposeGL(renderer, scene) {\n          scene.traverse(function (o) {\n            if (o.geometry && o.geometry.dispose) o.geometry.dispose();\n            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];\n            mats.forEach(function (m) {\n              if (m.map && m.map.dispose) m.map.dispose();\n              if (\n                m.uniforms &&\n                m.uniforms.uTex &&\n                m.uniforms.uTex.value &&\n                m.uniforms.uTex.value.dispose\n              ) {\n                m.uniforms.uTex.value.dispose();\n              }\n              if (m.dispose) m.dispose();\n            });\n          });\n          if (renderer.dispose) renderer.dispose();\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var root = document.getElementById(\"root\");\n          var glcanvas = document.getElementById(\"gl\");\n          var W = 1920;\n          var H = 1080;\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          window.__timelines[spec.id] = tl; // register synchronously\n\n          var THREE = window.THREE;\n          var renderer = new THREE.WebGLRenderer({\n            canvas: glcanvas,\n            antialias: true,\n            alpha: false,\n            preserveDrawingBuffer: true,\n          });\n          renderer.setPixelRatio(1);\n          renderer.setSize(W, H, false);\n          var scene = new THREE.Scene();\n          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);\n          var st = {};\n\n          document.fonts.ready.then(function () {\n            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);\n            function render() {\n              renderFn();\n              renderer.render(scene, camera);\n            }\n            tl.eventCallback(\"onUpdate\", render);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            render(); // paint frame 0\n            window.addEventListener(\"beforeunload\", function () {\n              disposeGL(renderer, scene);\n            });\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-scroll.json b/docs/public/catalog/blocks/code-scroll.json
new file mode 100644
index 0000000000..fbb854abd7
--- /dev/null
+++ b/docs/public/catalog/blocks/code-scroll.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Scroll To Line</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        font-family: \"JetBrains Mono\", monospace;\n        color: #e6edf3;\n      }\n      .bg-field {\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);\n      }\n      .bg-grid {\n        position: absolute;\n        inset: 0;\n        background-image:\n          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);\n        background-size: 64px 64px;\n        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);\n      }\n      .bg-glow {\n        position: absolute;\n        width: 900px;\n        height: 900px;\n        border-radius: 50%;\n        filter: blur(120px);\n        opacity: 0.5;\n      }\n      .bg-glow.a {\n        background: #1f6feb55;\n        left: -180px;\n        top: -200px;\n      }\n      .bg-glow.b {\n        background: #2ea04355;\n        right: -200px;\n        bottom: -260px;\n      }\n      .editor {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 1380px;\n        height: 800px;\n        background: #0b0f17;\n        border: 1px solid #1d2733;\n        border-radius: 16px;\n        box-shadow:\n          0 40px 120px rgba(0, 0, 0, 0.6),\n          0 2px 0 rgba(255, 255, 255, 0.03) inset;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n      .titlebar {\n        height: 56px;\n        flex: 0 0 56px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 0 22px;\n        background: linear-gradient(#11161f, #0c111a);\n        border-bottom: 1px solid #1b2430;\n      }\n      .dots {\n        display: flex;\n        gap: 10px;\n      }\n      .dot {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n      }\n      .dot.r {\n        background: #ff5f57;\n      }\n      .dot.y {\n        background: #febc2e;\n      }\n      .dot.g {\n        background: #28c840;\n      }\n      .filename {\n        font-size: 19px;\n        color: #8b98a9;\n        letter-spacing: 0.2px;\n      }\n      .filename .accent {\n        color: #d6e2f0;\n      }\n      .code-surface {\n        position: relative;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      .scene {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        will-change: opacity;\n      }\n      .code {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        right: 0;\n        padding: 0 44px 0 104px;\n        font-size: 30px;\n        line-height: 46px;\n        font-variant-ligatures: none;\n        tab-size: 2;\n      }\n      .gutter {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        width: 84px;\n        padding-right: 18px;\n        font-size: 30px;\n        line-height: 46px;\n        text-align: right;\n        color: #828c9b;\n        user-select: none;\n      }\n      .ln {\n        display: block;\n        height: 46px;\n      }\n      .line {\n        display: block;\n        min-height: 46px;\n        white-space: pre;\n        position: relative;\n        z-index: 1;\n      }\n      .tok {\n        display: inline-block;\n        white-space: pre;\n        will-change: transform, opacity;\n      }\n      .caret {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 3px;\n        height: 32px;\n        margin-top: 6px;\n        background: #58a6ff;\n        border-radius: 1px;\n        z-index: 3;\n      }\n      .hl-box {\n        position: absolute;\n        background: rgba(88, 166, 255, 0.16);\n        border-left: 3px solid #58a6ff;\n        border-radius: 6px;\n        z-index: 0;\n        overflow: hidden;\n      }\n      .diff-line {\n        display: block;\n        min-height: 0;\n        line-height: 46px;\n        white-space: pre;\n        position: relative;\n        overflow: hidden;\n        padding-left: 14px;\n      }\n      .diff-sign {\n        display: inline-block;\n        width: 22px;\n        color: #41506220;\n      }\n      .diff-del {\n        background: rgba(248, 81, 73, 0.12);\n        box-shadow: inset 3px 0 #f85149;\n      }\n      .diff-add {\n        background: rgba(63, 185, 80, 0.12);\n        box-shadow: inset 3px 0 #3fb950;\n      }\n      .diff-del .diff-sign {\n        color: #f85149;\n      }\n      .diff-add .diff-sign {\n        color: #3fb950;\n      }\n      .flight-block {\n        position: absolute;\n        white-space: pre;\n        font-size: 27px;\n        line-height: 40px;\n        padding: 11px 22px;\n        border-radius: 11px;\n        background: #0f1722;\n        border: 1px solid #233044;\n        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);\n        will-change: transform, opacity;\n      }\n      .flight-target {\n        position: absolute;\n        border: 1.5px dashed #2a3a4f;\n        border-radius: 14px;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-scroll\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"bg-field\" data-layout-ignore></div>\n      <div class=\"bg-grid\" data-layout-ignore></div>\n      <div class=\"bg-glow a\" data-layout-ignore></div>\n      <div class=\"bg-glow b\" data-layout-ignore></div>\n      <div class=\"editor\" id=\"editor\" data-layout-ignore>\n        <div class=\"titlebar\">\n          <div class=\"dots\">\n            <span class=\"dot r\"></span><span class=\"dot y\"></span><span class=\"dot g\"></span>\n          </div>\n          <span class=\"filename\"\n            ><span class=\"accent\">fetchWithRetry.js</span> — Code Scroll To Line</span\n          >\n        </div>\n        <div class=\"code-surface\" id=\"surface\"></div>\n      </div>\n    </div>\n    <script>\n      window.__TOKENS = {\n        scroll: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: 'import { createClient } from \"./client\"\\nimport { logger } from \"./logger\"\\n\\nconst RETRIES = 3\\n\\nexport async function fetchWithRetry(url, opts = {}) {\\n  const client = createClient(opts)\\n  let lastError = null\\n\\n  for (let attempt = 1; attempt <= RETRIES; attempt++) {\\n    try {\\n      const res = await client.get(url)\\n      if (res.ok) return res.body\\n      lastError = new Error(\"bad status \" + res.status)\\n    } catch (err) {\\n      lastError = err\\n      logger.warn(\"attempt \" + attempt + \" failed\")\\n    }\\n    await sleep(attempt * 250)\\n  }\\n\\n  throw lastError\\n}',\n              tokens: [\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-0\",\n                  content: \"import\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-1\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-2\",\n                  content: \"{ createClient }\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-3\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-4\",\n                  content: \"from\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-5\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-6\",\n                  content: '\"./client\"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-7\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-8\",\n                  content: \"import\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-9\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-10\",\n                  content: \"{ logger }\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-11\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-12\",\n                  content: \"from\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-13\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-14\",\n                  content: '\"./logger\"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-15\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-16\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-17\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-18\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-19\",\n                  content: \"RETRIES\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-20\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-21\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-22\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-23\",\n                  content: \"3\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-24\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-25\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-26\",\n                  content: \"export\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-27\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-28\",\n                  content: \"async\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-29\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-30\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-31\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-32\",\n                  content: \"fetchWithRetry\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-33\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-34\",\n                  content: \"url\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-35\",\n                  content: \",\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-36\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-37\",\n                  content: \"opts\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-38\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-39\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-40\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-41\",\n                  content: \"{}) {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-42\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-43\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-44\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-45\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-46\",\n                  content: \"client\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-47\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-48\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-49\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-50\",\n                  content: \"createClient\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-51\",\n                  content: \"(opts)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-52\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-53\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-54\",\n                  content: \"let\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-55\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-56\",\n                  content: \"lastError\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-57\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-58\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-59\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-60\",\n                  content: \"null\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-61\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-62\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-63\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-64\",\n                  content: \"for\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-65\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-66\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-67\",\n                  content: \"let\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-68\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-69\",\n                  content: \"attempt\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-70\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-71\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-72\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-73\",\n                  content: \"1\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-74\",\n                  content: \"; attempt\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-75\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-76\",\n                  content: \"<=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-77\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-78\",\n                  content: \"RETRIES\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-79\",\n                  content: \"; attempt\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-80\",\n                  content: \"++\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-81\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-82\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-83\",\n                  content: \"    \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-84\",\n                  content: \"try\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-85\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-86\",\n                  content: \"{\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-87\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-88\",\n                  content: \"      \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-89\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-90\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-91\",\n                  content: \"res\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-92\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-93\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-94\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-95\",\n                  content: \"await\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-96\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-97\",\n                  content: \"client.\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-98\",\n                  content: \"get\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-99\",\n                  content: \"(url)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-100\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-101\",\n                  content: \"      \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-102\",\n                  content: \"if\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-103\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-104\",\n                  content: \"(res.ok)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-105\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-106\",\n                  content: \"return\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-107\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-108\",\n                  content: \"res.body\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-109\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-110\",\n                  content: \"      \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-111\",\n                  content: \"lastError\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-112\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-113\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-114\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-115\",\n                  content: \"new\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-116\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-117\",\n                  content: \"Error\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-118\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-119\",\n                  content: '\"bad status \"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-120\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-121\",\n                  content: \"+\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-122\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-123\",\n                  content: \"res.status)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-124\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-125\",\n                  content: \"    \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-126\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-127\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-128\",\n                  content: \"catch\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-129\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-130\",\n                  content: \"(err) {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-131\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-132\",\n                  content: \"      \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-133\",\n                  content: \"lastError\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-134\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-135\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-136\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-137\",\n                  content: \"err\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-138\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-139\",\n                  content: \"      \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-140\",\n                  content: \"logger.\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-141\",\n                  content: \"warn\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-142\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-143\",\n                  content: '\"attempt \"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-144\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-145\",\n                  content: \"+\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-146\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-147\",\n                  content: \"attempt\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-148\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-149\",\n                  content: \"+\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-150\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-151\",\n                  content: '\" failed\"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-152\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-153\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-154\",\n                  content: \"    \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-155\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-156\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-157\",\n                  content: \"    \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-158\",\n                  content: \"await\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-159\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-160\",\n                  content: \"sleep\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-161\",\n                  content: \"(attempt\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-162\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-163\",\n                  content: \"*\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-164\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-165\",\n                  content: \"250\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-166\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-167\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-168\",\n                  content: \"  \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-169\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-170\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-171\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-172\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-173\",\n                  content: \"throw\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-174\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-175\",\n                  content: \"lastError\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-176\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-177\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"6U7qGxh2CDhvI0ceuM27xH3XqTO366G3BCJIpOE3Ez8-178\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = {\n        id: \"code-scroll\",\n        effect: \"scroll\",\n        seq: \"scroll\",\n        line: 12,\n        duration: 6,\n      };\n    </script>\n    <script>\n      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.\n      //\n      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and\n      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —\n      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement\n      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets\n      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the\n      // engine builds one scene that fills the composition and registers window.__timelines[id].\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        function lineDiv() {\n          var d = document.createElement(\"div\");\n          d.className = \"line\";\n          return d;\n        }\n\n        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.\n        function renderState(codeEl, state) {\n          codeEl.textContent = \"\";\n          var keyToEl = new Map();\n          var line = lineDiv();\n          codeEl.appendChild(line);\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              line = lineDiv();\n              codeEl.appendChild(line);\n              continue;\n            }\n            var span = document.createElement(\"span\");\n            span.className = \"tok\";\n            span.textContent = t.content;\n            span.style.color = t.color;\n            if (t.fontStyle & 1) span.style.fontStyle = \"italic\";\n            if (t.fontStyle & 2) span.style.fontWeight = \"700\";\n            line.appendChild(span);\n            keyToEl.set(t.key, span);\n          }\n          var last = codeEl.lastChild;\n          if (last && last.className === \"line\" && last.children.length === 0)\n            codeEl.removeChild(last);\n          return keyToEl;\n        }\n\n        function rectsOf(keyToEl) {\n          var m = new Map();\n          keyToEl.forEach(function (el, k) {\n            var r = el.getBoundingClientRect();\n            m.set(k, { left: r.left, top: r.top });\n          });\n          return m;\n        }\n\n        function makeScene(surface, withGutter) {\n          var scene = document.createElement(\"div\");\n          scene.className = \"scene\";\n          if (withGutter) {\n            var g = document.createElement(\"div\");\n            g.className = \"gutter\";\n            scene.appendChild(g);\n          }\n          var code = document.createElement(\"div\");\n          code.className = \"code\";\n          scene.appendChild(code);\n          surface.appendChild(scene);\n          return { scene: scene, code: code, gutter: scene.querySelector(\".gutter\") };\n        }\n\n        function fillGutter(g, n) {\n          var html = \"\";\n          for (var i = 1; i <= n; i++) html += '<span class=\"ln\">' + i + \"</span>\";\n          g.innerHTML = html;\n        }\n\n        function splitLines(state) {\n          var lines = [{ text: \"\", tokens: [] }];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push({ text: \"\", tokens: [] });\n              continue;\n            }\n            var cur = lines[lines.length - 1];\n            cur.tokens.push(t);\n            cur.text += t.content;\n          }\n          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();\n          return lines;\n        }\n\n        function lineDiff(a, b) {\n          var n = a.length;\n          var m = b.length;\n          var dp = [];\n          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));\n          for (var i = n - 1; i >= 0; i--) {\n            for (var j = m - 1; j >= 0; j--) {\n              dp[i][j] =\n                a[i].text === b[j].text\n                  ? dp[i + 1][j + 1] + 1\n                  : Math.max(dp[i + 1][j], dp[i][j + 1]);\n            }\n          }\n          var ops = [];\n          var i = 0;\n          var j = 0;\n          while (i < n && j < m) {\n            if (a[i].text === b[j].text) {\n              ops.push({ type: \"same\", line: b[j] });\n              i++;\n              j++;\n            } else if (dp[i + 1][j] >= dp[i][j + 1]) {\n              ops.push({ type: \"del\", line: a[i] });\n              i++;\n            } else {\n              ops.push({ type: \"add\", line: b[j] });\n              j++;\n            }\n          }\n          while (i < n) ops.push({ type: \"del\", line: a[i++] });\n          while (j < m) ops.push({ type: \"add\", line: b[j++] });\n          return ops;\n        }\n\n        // ---- single-scene effect builders (fade in, play, hold to end) -------------\n        var FADE = 0.45;\n\n        function scroll(tl, surface, state, start, targetLine) {\n          var SCROLL = 1.7;\n          var parts = makeScene(surface, true);\n          var code = parts.code;\n          renderState(code, state);\n          var lines = code.querySelectorAll(\".line\");\n          fillGutter(parts.gutter, lines.length);\n          var surfRect = surface.getBoundingClientRect();\n          var idx = Math.max(0, Math.min(lines.length - 1, targetLine - 1));\n          var lr = lines[idx].getBoundingClientRect();\n          var lineCenter = lr.top + lr.height / 2 - surfRect.top;\n          var dy = surfRect.height * 0.5 - lineCenter;\n          var box = document.createElement(\"div\");\n          box.className = \"hl-box\";\n          box.style.left = lines[idx].offsetLeft - 8 + \"px\";\n          box.style.top = lines[idx].offsetTop - 1 + \"px\";\n          box.style.width = lr.width + 18 + \"px\";\n          box.style.height = lr.height + 2 + \"px\";\n          code.insertBefore(box, code.firstChild);\n          tl.set(parts.scene, { opacity: 0 }, 0);\n          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: \"power1.out\" }, start);\n          tl.set(box, { opacity: 0 }, 0);\n          var at = start + FADE + 0.35;\n          tl.fromTo(\n            [code, parts.gutter],\n            { y: 0 },\n            { y: dy, duration: SCROLL, ease: \"power2.inOut\" },\n            at,\n          );\n          var arrAt = at + SCROLL;\n          for (var i = 0; i < lines.length; i++) {\n            if (i === idx) continue;\n            tl.fromTo(\n              lines[i],\n              { opacity: 1 },\n              { opacity: 0.35, duration: 0.5, ease: \"power1.out\" },\n              arrAt - 0.35,\n            );\n          }\n          tl.to(box, { opacity: 1, duration: 0.45, ease: \"power1.out\" }, arrAt - 0.35);\n        }\n\n        function buildEffect(tl, surface, spec) {\n          var start = 0.45;\n          var seq = T[spec.seq];\n          if (spec.effect === \"scroll\") scroll(tl, surface, seq.states[0], start, spec.line || 1);\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var surface = document.getElementById(\"surface\");\n          var root = document.getElementById(\"root\");\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          // Build inside fonts.ready (glyph metrics must be final), then register.\n          // Register ONLY after the timeline is fully built: the runtime's\n          // sub-composition readiness gate treats \"key present\" as \"ready\" and\n          // nests the child once. An empty timeline registered before this build\n          // would be nested empty and never re-nested → blank render when used as\n          // a sub-composition. See the contract in engine frameCapture.ts.\n          document.fonts.ready.then(function () {\n            tl.from(\"#editor\", { opacity: 0, scale: 0.985, duration: 0.5, ease: \"power2.out\" }, 0);\n            buildEffect(tl, surface, spec);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            window.__timelines[\"code-scroll\"] = tl; // register AFTER setup completes\n            if (typeof window.__hfForceTimelineRebind === \"function\") {\n              window.__hfForceTimelineRebind(); // re-nest now that we are populated\n            }\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-shader-dissolve.json b/docs/public/catalog/blocks/code-shader-dissolve.json
new file mode 100644
index 0000000000..53bf0b86db
--- /dev/null
+++ b/docs/public/catalog/blocks/code-shader-dissolve.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Shader Dissolve</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n      }\n      #gl {\n        position: absolute;\n        inset: 0;\n        width: 1920px;\n        height: 1080px;\n        display: block;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-shader-dissolve\"\n      data-start=\"0\"\n      data-duration=\"7\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <canvas id=\"gl\" width=\"1920\" height=\"1080\"></canvas>\n    </div>\n    <script>\n      window.__TOKENS = {\n        compile: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: \"function compile(src) {\\n  const ast = parse(src)\\n  const ir = optimize(ast)\\n  return emit(ir)\\n}\",\n              tokens: [\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-0\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-2\",\n                  content: \"compile\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-3\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-4\",\n                  content: \"src\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-5\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-6\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-7\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-8\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-9\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-10\",\n                  content: \"ast\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-11\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-12\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-13\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-14\",\n                  content: \"parse\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-15\",\n                  content: \"(src)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-16\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-17\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-18\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-19\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-20\",\n                  content: \"ir\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-21\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-22\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-23\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-24\",\n                  content: \"optimize\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-25\",\n                  content: \"(ast)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-26\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-27\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-28\",\n                  content: \"return\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-29\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-30\",\n                  content: \"emit\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-31\",\n                  content: \"(ir)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-32\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-33\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"zGtBjd8ajYlOewpKFJD53Oc7W94UowxIfV0186O1l8A-34\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = {\n        id: \"code-shader-dissolve\",\n        effect: \"dissolve\",\n        seq: \"compile\",\n        duration: 7,\n        seed: 11,\n      };\n    </script>\n    <script>\n      // hf-code-anim-gl.js — WebGL code-animation engine for the \"crazy\" Code Animations blocks.\n      //\n      // Bridges the baked Shiki tokens (window.__TOKENS) into Three.js: the tokens are drawn once\n      // to an offscreen 2D canvas (a CanvasTexture), which then drives a lit 3D slab, a dissolve\n      // shader, or a GPU particle system. Determinism per the project contract:\n      //   - render only via tl.eventCallback(\"onUpdate\", …) + one initial render() — never rAF\n      //   - all randomness from a seeded mulberry32 — never Math.random / Date.now\n      //   - canvas drawn once after document.fonts.ready (final glyph metrics)\n      //   - paused GSAP timeline registered on window.__timelines[id]; HF seeks it per frame\n      //\n      // Each block sets window.__BLOCK = { id, effect, seq, duration, seed } and includes this engine.\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        // ---- seeded PRNG (no Math.random) -----------------------------------------\n        function mulberry32(a) {\n          return function () {\n            a |= 0;\n            a = (a + 0x6d2b79f5) | 0;\n            var t = Math.imul(a ^ (a >>> 15), 1 | a);\n            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n          };\n        }\n\n        // ---- split a token state into lines of {content,color} --------------------\n        function splitLines(state) {\n          var lines = [[]];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push([]);\n              continue;\n            }\n            lines[lines.length - 1].push(t);\n          }\n          while (lines.length && lines[lines.length - 1].length === 0) lines.pop();\n          return lines;\n        }\n\n        // ---- THE BRIDGE: draw baked tokens to an offscreen 2D canvas ---------------\n        // Returns { canvas, W, H, lines, lineH, padY, fontPx } so effects can sample it.\n        function drawCodeToCanvas(state, opts) {\n          opts = opts || {};\n          var fontPx = opts.fontPx || 36;\n          var lineH = opts.lineH || 54;\n          var padX = opts.padX || 70;\n          var padY = opts.padY || 60;\n          var weight = opts.weight || 500;\n          var font = weight + \" \" + fontPx + 'px \"JetBrains Mono\", monospace';\n\n          var lines = splitLines(state);\n          var measure = document.createElement(\"canvas\").getContext(\"2d\");\n          measure.font = font;\n          var maxW = 0;\n          for (var i = 0; i < lines.length; i++) {\n            var w = 0;\n            for (var j = 0; j < lines[i].length; j++)\n              w += measure.measureText(lines[i][j].content).width;\n            if (w > maxW) maxW = w;\n          }\n          var W = Math.max(2, Math.ceil(maxW + padX * 2));\n          var H = Math.max(2, Math.ceil(lines.length * lineH + padY * 2));\n\n          var canvas = document.createElement(\"canvas\");\n          canvas.width = W;\n          canvas.height = H;\n          var ctx = canvas.getContext(\"2d\");\n          if (opts.transparent) {\n            ctx.clearRect(0, 0, W, H);\n          } else {\n            ctx.fillStyle = opts.bg || \"#0b0f17\";\n            ctx.fillRect(0, 0, W, H);\n          }\n          ctx.textBaseline = \"top\";\n          ctx.font = font;\n          for (var li = 0; li < lines.length; li++) {\n            var x = padX;\n            var y = padY + li * lineH;\n            for (var k = 0; k < lines[li].length; k++) {\n              var tok = lines[li][k];\n              ctx.fillStyle = tok.color;\n              ctx.fillText(tok.content, x, y);\n              x += ctx.measureText(tok.content).width;\n            }\n          }\n          return {\n            canvas: canvas,\n            W: W,\n            H: H,\n            lines: lines.length,\n            lineH: lineH,\n            padY: padY,\n            fontPx: fontPx,\n          };\n        }\n\n        function fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, seed) {\n          scene.background = new THREE.Color(0x05070b);\n          var code = drawCodeToCanvas(state, {\n            fontPx: 40,\n            lineH: 60,\n            padX: 90,\n            padY: 80,\n            weight: 600,\n          });\n          var tex = new THREE.CanvasTexture(code.canvas);\n          tex.minFilter = THREE.LinearFilter;\n          tex.magFilter = THREE.LinearFilter;\n          tex.generateMipmaps = false;\n\n          var aspect = code.W / code.H;\n          var planeH = 6.6;\n          var planeW = planeH * aspect;\n\n          var uniforms = {\n            uTex: { value: tex },\n            uProgress: { value: 0 },\n            uSeed: { value: (seed || 1) * 13.37 },\n          };\n          var mat = new THREE.ShaderMaterial({\n            uniforms: uniforms,\n            transparent: true,\n            vertexShader: [\n              \"varying vec2 vUv;\",\n              \"void main(){ vUv = uv; gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0); }\",\n            ].join(\"\\n\"),\n            fragmentShader: [\n              \"precision highp float;\",\n              \"uniform sampler2D uTex;\",\n              \"uniform float uProgress;\",\n              \"uniform float uSeed;\",\n              \"varying vec2 vUv;\",\n              \"float hash(vec2 p){ p=fract(p*vec2(123.34,456.21)); p+=dot(p,p+45.32); return fract(p.x*p.y); }\",\n              \"float noise(vec2 p){ vec2 i=floor(p),f=fract(p); float a=hash(i),b=hash(i+vec2(1.,0.)),c=hash(i+vec2(0.,1.)),d=hash(i+vec2(1.,1.)); vec2 u=f*f*(3.-2.*f); return mix(mix(a,b,u.x),mix(c,d,u.x),u.y); }\",\n              \"void main(){\",\n              \"  vec2 uv = vUv;\",\n              // multi-octave seeded noise field\n              \"  float n = noise(uv*16.0+uSeed)*0.6 + noise(uv*48.0+uSeed*1.7)*0.3 + noise(uv*120.0+uSeed*2.3)*0.1;\",\n              \"  float edge = 0.12;\",\n              \"  float reveal = smoothstep(n-edge, n+edge, uProgress);\", // 0 hidden -> 1 shown\n              // chromatic fringe strongest at the dissolving edge\n              \"  float band = reveal*(1.0-reveal)*4.0;\",\n              \"  float off = band*0.010;\",\n              \"  float r = texture2D(uTex, uv+vec2(off,0.0)).r;\",\n              \"  float g = texture2D(uTex, uv).g;\",\n              \"  float b = texture2D(uTex, uv-vec2(off,0.0)).b;\",\n              \"  vec3 codeCol = vec3(r,g,b);\",\n              // additive cyan edge glow along the dissolve front\n              \"  vec3 glow = vec3(0.30,0.72,1.0) * band * 0.9;\",\n              \"  vec3 outc = codeCol*reveal + glow;\",\n              \"  float a = max(reveal, band*0.8);\",\n              \"  gl_FragColor = vec4(outc, a);\",\n              \"}\",\n            ].join(\"\\n\"),\n          });\n\n          var plane = new THREE.Mesh(new THREE.PlaneGeometry(planeW, planeH), mat);\n          scene.add(plane);\n\n          camera.position.set(0, 0, 10);\n          var vfov = (camera.fov * Math.PI) / 180;\n          var screenAspect = 1920 / 1080;\n          var fitH = planeH / 2 / Math.tan(vfov / 2) / 0.82;\n          var fitW = planeW / 2 / (Math.tan(vfov / 2) * screenAspect) / 0.82;\n          camera.position.z = Math.max(fitH, fitW);\n          camera.lookAt(0, 0, 0);\n\n          // compile in, then hold crisp. Overshoot to 1.15 so even max-noise pixels\n          // (n up to ~1.0, edge 0.12) fully resolve — no leftover specks at rest.\n          tl.to(uniforms.uProgress, { value: 1.15, duration: dur * 0.62, ease: \"power1.inOut\" }, 0);\n\n          // uProgress is tweened by GSAP; the boot loop's render() draws once per frame.\n          return function () {};\n        }\n\n        // ---- dispatch + boot ------------------------------------------------------\n        function buildEffect(THREE, scene, camera, renderer, spec, st, tl) {\n          var state = T[spec.seq].states[0];\n          var dur = spec.duration;\n          if (spec.effect === \"dissolve\")\n            return fxDissolve(THREE, scene, camera, renderer, state, st, tl, dur, spec.seed);\n          return function () {};\n        }\n\n        // Free GPU resources (renderer, geometries, materials, textures) on page teardown.\n        // One-shot renders exit per job so nothing leaks there; this guards long-lived\n        // Studio/player sessions that reload. Fires only on unload — never during capture.\n        function disposeGL(renderer, scene) {\n          scene.traverse(function (o) {\n            if (o.geometry && o.geometry.dispose) o.geometry.dispose();\n            var mats = o.material ? (Array.isArray(o.material) ? o.material : [o.material]) : [];\n            mats.forEach(function (m) {\n              if (m.map && m.map.dispose) m.map.dispose();\n              if (\n                m.uniforms &&\n                m.uniforms.uTex &&\n                m.uniforms.uTex.value &&\n                m.uniforms.uTex.value.dispose\n              ) {\n                m.uniforms.uTex.value.dispose();\n              }\n              if (m.dispose) m.dispose();\n            });\n          });\n          if (renderer.dispose) renderer.dispose();\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var root = document.getElementById(\"root\");\n          var glcanvas = document.getElementById(\"gl\");\n          var W = 1920;\n          var H = 1080;\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          window.__timelines[spec.id] = tl; // register synchronously\n\n          var THREE = window.THREE;\n          var renderer = new THREE.WebGLRenderer({\n            canvas: glcanvas,\n            antialias: true,\n            alpha: false,\n            preserveDrawingBuffer: true,\n          });\n          renderer.setPixelRatio(1);\n          renderer.setSize(W, H, false);\n          var scene = new THREE.Scene();\n          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 200);\n          var st = {};\n\n          document.fonts.ready.then(function () {\n            var renderFn = buildEffect(THREE, scene, camera, renderer, spec, st, tl);\n            function render() {\n              renderFn();\n              renderer.render(scene, camera);\n            }\n            tl.eventCallback(\"onUpdate\", render);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            render(); // paint frame 0\n            window.addEventListener(\"beforeunload\", function () {\n              disposeGL(renderer, scene);\n            });\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-basic.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-basic.json
new file mode 100644
index 0000000000..c5798069ee
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-basic.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Basic</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #ececec;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(135deg, #e8e8e8 0%, #d8d8d8 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.25),\n          0 10px 30px rgba(0, 0, 0, 0.15);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #ececec;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        gap: 0;\n        flex-shrink: 0;\n        border-bottom: 1px solid #d0d0d0;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #333333;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #ffffff;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #000000;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #000000;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #000000;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #000000;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #000000;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #000000;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-basic\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line\">Last login: Mon Jun 2 09:14:22 on ttys001</span>\n            <span class=\"output-line\">total 48</span>\n            <span class=\"output-line bold\">drwxr-xr-x 8 user staff 256 Jun 2 09:10 .</span>\n            <span class=\"output-line\">drwxr-xr-x 42 user staff 1344 Jun 1 18:22 ..</span>\n            <span class=\"output-line\">-rw-r--r-- 1 user staff 872 May 30 14:05 README.md</span>\n            <span class=\"output-line bold\">drwxr-xr-x 5 user staff 160 Jun 2 09:10 dist</span>\n            <span class=\"output-line bold\"\n              >drwxr-xr-x 12 user staff 384 Jun 2 09:10 node_modules</span\n            >\n            <span class=\"output-line\">-rw-r--r-- 1 user staff 1204 Jun 2 09:08 package.json</span>\n            <span class=\"output-line bold\">drwxr-xr-x 6 user staff 192 Jun 2 09:10 src</span>\n            <span class=\"output-line\">-rw-r--r-- 1 user staff 348 May 29 11:42 tsconfig.json</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"ls -la\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      // Phase 1 (0–0.5s): hold on empty prompt\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      // Phase 2 (0.5–2s): type command char by char\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      // Phase 3 (2.2s): hide cursor, show first output line (login message)\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      // Phase 4 (2.5s): clear command, show ls output line by line\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return; // already shown\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.08);\n      });\n\n      // Phase 5 (4s): new prompt with blinking cursor\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.0);\n\n      // Phase 6 (4.2–10s): blink cursor 3 times then stop\n      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.6);\n\n      window.__timelines[\"code-snippet-apple-terminal-basic\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-dark.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-dark.json
new file mode 100644
index 0000000000..409bdf55c6
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-dark.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Clear Dark</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #1a1a1a;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(135deg, #1a1a1a 0%, #111111 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.7),\n          0 10px 30px rgba(0, 0, 0, 0.5);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: rgba(0, 0, 0, 0.4);\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #ffffff;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: rgba(0, 0, 0, 0.7);\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #ffffff;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #ffffff;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #ffffff;\n      }\n\n      .output-line.dim {\n        color: rgba(255, 255, 255, 0.6);\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #888888;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #ffffff;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #888888;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-clear-dark\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys002</span>\n            <span class=\"output-line\">Scanning dependencies...</span>\n            <span class=\"output-line\">Found 3 vulnerabilities (1 moderate, 2 low)</span>\n            <span class=\"output-line dim\"> package: lodash@4.17.20</span>\n            <span class=\"output-line dim\"> severity: moderate</span>\n            <span class=\"output-line dim\"> fix: lodash@4.17.21</span>\n            <span class=\"output-line dim\"> package: minimist@1.2.5</span>\n            <span class=\"output-line dim\"> severity: low</span>\n            <span class=\"output-line dim\"> fix: minimist@1.2.6</span>\n            <span class=\"output-line bold\">Run `npm audit fix` to fix them.</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"npm audit\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.2);\n\n      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.8);\n\n      window.__timelines[\"code-snippet-apple-terminal-clear-dark\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-light.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-light.json
new file mode 100644
index 0000000000..c255db03e4
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-clear-light.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Clear Light</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.18),\n          0 10px 30px rgba(0, 0, 0, 0.1);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: rgba(255, 255, 255, 0.4);\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.08);\n        position: relative;\n        backdrop-filter: blur(10px);\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #333333;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: rgba(255, 255, 255, 0.7);\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #000000;\n        backdrop-filter: blur(8px);\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #000000;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n      }\n\n      .output-line.muted {\n        color: #666666;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #888888;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #000000;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #888888;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-clear-light\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line muted\">Last login: Mon Jun 2 09:14:22 on ttys003</span>\n            <span class=\"output-line bold\">git log --oneline -8</span>\n            <span class=\"output-line\">a3f2c19 fix: correct off-by-one in pagination</span>\n            <span class=\"output-line\">b7e8d04 feat: add dark mode toggle</span>\n            <span class=\"output-line\">c1a9f55 refactor: extract auth helpers</span>\n            <span class=\"output-line\">d4e2b31 test: add unit tests for parser</span>\n            <span class=\"output-line\">e6c8a72 docs: update API reference</span>\n            <span class=\"output-line\">f9b1d44 chore: bump dependencies</span>\n            <span class=\"output-line\">2a7e890 feat: implement search endpoint</span>\n            <span class=\"output-line\">3c5f012 init: project bootstrap</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac myproject % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"git log --oneline -8\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.09);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac myproject % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.0);\n\n      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.6);\n\n      window.__timelines[\"code-snippet-apple-terminal-clear-light\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-grass.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-grass.json
new file mode 100644
index 0000000000..ffff124ea5
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-grass.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Grass</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000000;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: radial-gradient(ellipse at center, #0a1a0a 0%, #000000 70%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 193, 0, 0.15),\n          0 10px 30px rgba(0, 0, 0, 0.8);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #1c1c1c;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #00c100;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #00c100;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #000000;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #00c100;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #00c100;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #00c100;\n      }\n\n      .output-line.dim {\n        color: #006600;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #00c100;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #00c100;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #00c100;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-grass\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys004</span>\n            <span class=\"output-line\">Running test suite...</span>\n            <span class=\"output-line dim\"> ✓ should initialize with defaults (2ms)</span>\n            <span class=\"output-line dim\"> ✓ should parse config correctly (4ms)</span>\n            <span class=\"output-line dim\"> ✓ should handle empty input (1ms)</span>\n            <span class=\"output-line dim\"> ✓ should reject invalid tokens (3ms)</span>\n            <span class=\"output-line dim\"> ✓ should emit events on change (5ms)</span>\n            <span class=\"output-line dim\"> ✓ should clean up on destroy (2ms)</span>\n            <span class=\"output-line bold\"> 6 passing (18ms)</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"npm test\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.12);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.0);\n\n      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.6);\n\n      window.__timelines[\"code-snippet-apple-terminal-grass\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-homebrew.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-homebrew.json
new file mode 100644
index 0000000000..554fdf1853
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-homebrew.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Homebrew</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000000;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: radial-gradient(ellipse at center, #0d1a0d 0%, #000000 70%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 207, 0, 0.18),\n          0 10px 30px rgba(0, 0, 0, 0.85);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #1c1c1c;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #006900;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #00cf00;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #000000;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #00cf00;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #00cf00;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #00de00;\n      }\n\n      .output-line.dim {\n        color: #006600;\n      }\n\n      .output-line.bright {\n        color: #48f800;\n        font-weight: bold;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #48f800;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #00cf00;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #48f800;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-homebrew\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys005</span>\n            <span class=\"output-line\">==> Updating Homebrew...</span>\n            <span class=\"output-line dim\">Already up-to-date.</span>\n            <span class=\"output-line\">==> Outdated formulae</span>\n            <span class=\"output-line\">node 20.11.0 -> 22.3.0</span>\n            <span class=\"output-line\">python 3.11.6 -> 3.12.4</span>\n            <span class=\"output-line\">git 2.43.0 -> 2.45.2</span>\n            <span class=\"output-line\">ffmpeg 6.1.1 -> 7.0.0</span>\n            <span class=\"output-line bright\">==> Run `brew upgrade` to update 4 formulae.</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"brew outdated\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.2);\n\n      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.8);\n\n      window.__timelines[\"code-snippet-apple-terminal-homebrew\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-man-page.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-man-page.json
new file mode 100644
index 0000000000..282fb60e39
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-man-page.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Man Page</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(135deg, #ede87a 0%, #ddd566 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.2),\n          0 10px 30px rgba(0, 0, 0, 0.12);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #f0e680;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #c8be40;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #333333;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #fef49c;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #000000;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #000000;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n      }\n\n      .output-line.indent {\n        padding-left: 24px;\n        color: #222222;\n      }\n\n      .output-line.section {\n        font-weight: bold;\n        margin-top: 2px;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #000000;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #000000;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #000000;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-man-page\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">man — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line section\">CURL(1) General Commands Manual CURL(1)</span>\n            <span class=\"output-line\"></span>\n            <span class=\"output-line section\">NAME</span>\n            <span class=\"output-line indent\">curl -- transfer a URL</span>\n            <span class=\"output-line\"></span>\n            <span class=\"output-line section\">SYNOPSIS</span>\n            <span class=\"output-line indent\">curl [options / URLs]</span>\n            <span class=\"output-line\"></span>\n            <span class=\"output-line section\">DESCRIPTION</span>\n            <span class=\"output-line indent\"\n              >curl is a tool for transferring data from or to a server using URLs.</span\n            >\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"man curl\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.4);\n\n      outputLines.forEach((line, i) => {\n        tl.set(line, { opacity: 1 }, 2.5 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.0);\n\n      const blinkTimes = [4.2, 4.6, 5.0, 5.4, 5.8, 6.2];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.6);\n\n      window.__timelines[\"code-snippet-apple-terminal-man-page\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-novel.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-novel.json
new file mode 100644
index 0000000000..49ded8c789
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-novel.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Novel</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(135deg, #c9a86c 0%, #b8955a 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(62, 41, 0, 0.3),\n          0 10px 30px rgba(0, 0, 0, 0.15);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #c9a86c;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #a88040;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #3e2900;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 600;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #dfc18a;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #3e2900;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #3e2900;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #3e2900;\n      }\n\n      .output-line.muted {\n        color: #7a5a20;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #3e2900;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #3e2900;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #3e2900;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-novel\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line muted\">Last login: Mon Jun 2 09:14:22 on ttys006</span>\n            <span class=\"output-line muted\">Python 3.12.4 (main, Jun 6 2024, 18:26:44)</span>\n            <span class=\"output-line muted\"\n              >Type \"help\", \"copyright\", \"credits\" or \"license\" for more information.</span\n            >\n            <span class=\"output-line bold\">>>> import hyperframes</span>\n            <span class=\"output-line bold\">>>> hf = hyperframes.Composition(\"intro.html\")</span>\n            <span class=\"output-line\">>>> hf.duration</span>\n            <span class=\"output-line\">12.0</span>\n            <span class=\"output-line\">>>> hf.dimensions</span>\n            <span class=\"output-line\">Dimensions(width=1920, height=1080)</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"python3\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.2);\n\n      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.8);\n\n      window.__timelines[\"code-snippet-apple-terminal-novel\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-ocean.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-ocean.json
new file mode 100644
index 0000000000..d77ca4f39a
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-ocean.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Ocean</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #1a3f9e;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: radial-gradient(ellipse at center, #224fbe 0%, #0e2878 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.6),\n          0 10px 30px rgba(34, 79, 190, 0.3);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #1a3f9e;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid rgba(255, 255, 255, 0.15);\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #ffffff;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #224fbe;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #ffffff;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #ffffff;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #ffffff;\n      }\n\n      .output-line.dim {\n        color: rgba(255, 255, 255, 0.65);\n      }\n\n      .output-line.success {\n        color: #7fffb3;\n        font-weight: bold;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: rgba(255, 255, 255, 0.8);\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #ffffff;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #ffffff;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-ocean\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys007</span>\n            <span class=\"output-line bold\">docker ps</span>\n            <span class=\"output-line dim\">CONTAINER ID IMAGE COMMAND CREATED</span>\n            <span class=\"output-line\"\n              >a1b2c3d4e5f6 nginx:latest \"/docker-entrypoint.…\" 2 hours ago</span\n            >\n            <span class=\"output-line\"\n              >b2c3d4e5f6a7 postgres:15 \"docker-entrypoint.s…\" 2 hours ago</span\n            >\n            <span class=\"output-line\"\n              >c3d4e5f6a7b8 redis:alpine \"docker-entrypoint.s…\" 2 hours ago</span\n            >\n            <span class=\"output-line success\">3 containers running</span>\n            <span class=\"output-line dim\">Use 'docker logs CONTAINER' to view output</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"docker ps\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.2);\n\n      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.8);\n\n      window.__timelines[\"code-snippet-apple-terminal-ocean\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-pro.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-pro.json
new file mode 100644
index 0000000000..f219ef4a11
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-pro.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Pro</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000000;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: radial-gradient(ellipse at center, #141414 0%, #000000 70%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(136, 255, 103, 0.08),\n          0 10px 30px rgba(0, 0, 0, 0.9);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #1c1c1c;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #333333;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #bbbbbb;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #000000;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #bbbbbb;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #bbbbbb;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #ffffff;\n      }\n\n      .output-line.accent {\n        color: #88ff67;\n        font-weight: bold;\n      }\n\n      .output-line.dim {\n        color: #666666;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #88ff67;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #bbbbbb;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #88ff67;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-pro\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys008</span>\n            <span class=\"output-line dim\">Building production bundle...</span>\n            <span class=\"output-line\"> vite v5.3.1 building for production...</span>\n            <span class=\"output-line\"> ✓ 142 modules transformed.</span>\n            <span class=\"output-line\"> dist/index.html 0.48 kB</span>\n            <span class=\"output-line\"> dist/assets/index-Cv3rN.js 284.12 kB</span>\n            <span class=\"output-line\"> dist/assets/index-Du4mP.css 42.08 kB</span>\n            <span class=\"output-line accent\"> ✓ built in 2.31s</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac myapp % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"npm run build\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac myapp % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.2);\n\n      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.8);\n\n      window.__timelines[\"code-snippet-apple-terminal-pro\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-red-sands.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-red-sands.json
new file mode 100644
index 0000000000..84514899cc
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-red-sands.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Red Sands</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #7b140e;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: radial-gradient(ellipse at center, #8a1a12 0%, #4a0a06 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.7),\n          0 10px 30px rgba(123, 20, 14, 0.4);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #5e0f0a;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #8b2018;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #ffe1b9;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #7b140e;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #ffe1b9;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #ffe1b9;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #ffffff;\n      }\n\n      .output-line.dim {\n        color: #c4916a;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #ffe1b9;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #ffe1b9;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #ffffff;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-red-sands\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys009</span>\n            <span class=\"output-line\">Fetching https://api.example.com/status</span>\n            <span class=\"output-line dim\"> HTTP/2 200</span>\n            <span class=\"output-line dim\"> content-type: application/json</span>\n            <span class=\"output-line dim\"> x-request-id: a3f9c21e-04b2-4d78</span>\n            <span class=\"output-line\">{</span>\n            <span class=\"output-line\"> \"status\": \"healthy\",</span>\n            <span class=\"output-line\"> \"version\": \"2.4.1\",</span>\n            <span class=\"output-line bold\"> \"uptime\": \"14d 6h 32m\"</span>\n            <span class=\"output-line\">}</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"curl -s api.example.com/status | jq\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.4);\n\n      const blinkTimes = [4.6, 5.0, 5.4, 5.8, 6.2, 6.6];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 7.0);\n\n      window.__timelines[\"code-snippet-apple-terminal-red-sands\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.json
new file mode 100644
index 0000000000..acd68bd16e
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-silver-aerogel.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Silver Aerogel</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #2a2a2a;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: radial-gradient(ellipse at center, #3a3a3a 0%, #1c1c1c 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.6),\n          0 10px 30px rgba(232, 232, 232, 0.05);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #2a2a2a;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #444444;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #ffffff;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #3d3d3d;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #ffffff;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #ffffff;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #ffffff;\n      }\n\n      .output-line.dim {\n        color: #aaaaaa;\n      }\n\n      .output-line.success {\n        color: #7fffb3;\n      }\n\n      .output-line.warn {\n        color: #ffd700;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #e8e8e8;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #ffffff;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #e8e8e8;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-silver-aerogel\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys010</span>\n            <span class=\"output-line\">Checking system resources...</span>\n            <span class=\"output-line\">Filesystem Size Used Avail Use%</span>\n            <span class=\"output-line\">/dev/disk3s1s1 460G 142G 302G 32%</span>\n            <span class=\"output-line dim\">/dev/disk3s6 460G 5.0G 302G 2%</span>\n            <span class=\"output-line\">/dev/disk3s2 460G 11G 302G 4%</span>\n            <span class=\"output-line warn\">Memory: 14.2 GB / 16.0 GB used (89%)</span>\n            <span class=\"output-line success\">CPU: 8-core, 12% load average</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"df -h && vm_stat\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.2);\n\n      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.8);\n\n      window.__timelines[\"code-snippet-apple-terminal-silver-aerogel\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-apple-terminal-solid-colors.json b/docs/public/catalog/blocks/code-snippet-apple-terminal-solid-colors.json
new file mode 100644
index 0000000000..718e7ce718
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-apple-terminal-solid-colors.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Apple Terminal Solid Colors</title>\n    <style>\n      html,\n      body {\n        margin: 0;\n        padding: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #4c0099;\n        font-family: \"SF Mono\", Menlo, Monaco, Consolas, \"Courier New\", monospace;\n      }\n\n      #scene {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: radial-gradient(ellipse at center, #5a00b3 0%, #2e0060 100%);\n      }\n\n      .terminal-window {\n        width: 1400px;\n        height: 700px;\n        border-radius: 10px;\n        overflow: hidden;\n        box-shadow:\n          0 30px 80px rgba(0, 0, 0, 0.7),\n          0 10px 30px rgba(76, 0, 153, 0.4);\n        display: flex;\n        flex-direction: column;\n      }\n\n      .titlebar {\n        height: 38px;\n        background: #3a0077;\n        display: flex;\n        align-items: center;\n        padding: 0 14px;\n        flex-shrink: 0;\n        border-bottom: 1px solid #6600bb;\n        position: relative;\n      }\n\n      .traffic-lights {\n        display: flex;\n        gap: 8px;\n        align-items: center;\n      }\n\n      .traffic-lights span {\n        width: 13px;\n        height: 13px;\n        border-radius: 50%;\n        display: inline-block;\n      }\n\n      .traffic-lights .close {\n        background: #ff5f57;\n        border: 1px solid #e0443e;\n      }\n\n      .traffic-lights .minimize {\n        background: #ffbd2e;\n        border: 1px solid #dfa123;\n      }\n\n      .traffic-lights .fullscreen {\n        background: #28c840;\n        border: 1px solid #1aab29;\n      }\n\n      .window-title {\n        position: absolute;\n        left: 50%;\n        transform: translateX(-50%);\n        font-size: 13px;\n        color: #ffffff;\n        font-family: -apple-system, BlinkMacSystemFont, \"SF Pro Text\", sans-serif;\n        font-weight: 500;\n        letter-spacing: -0.1px;\n      }\n\n      .terminal-canvas {\n        flex: 1;\n        background: #4c0099;\n        padding: 18px 20px;\n        overflow: hidden;\n        font-size: 14px;\n        line-height: 1.6;\n        color: #ffffff;\n      }\n\n      .output-lines {\n        margin-bottom: 4px;\n      }\n\n      .output-line {\n        display: block;\n        white-space: pre;\n        opacity: 0;\n        color: #ffffff;\n      }\n\n      .output-line.bold {\n        font-weight: bold;\n        color: #ffffff;\n      }\n\n      .output-line.dim {\n        color: rgba(255, 255, 255, 0.55);\n      }\n\n      .output-line.accent {\n        color: #cc99ff;\n        font-weight: bold;\n      }\n\n      .input-line {\n        display: flex;\n        align-items: center;\n        white-space: pre;\n      }\n\n      .prompt {\n        color: #cc99ff;\n        font-weight: bold;\n        user-select: none;\n      }\n\n      .typed-command {\n        color: #ffffff;\n      }\n\n      .cursor-block {\n        display: inline-block;\n        width: 9px;\n        height: 16px;\n        background: #ffffff;\n        vertical-align: text-bottom;\n        margin-left: 1px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"scene\"\n      data-composition-id=\"code-snippet-apple-terminal-solid-colors\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"terminal-window\">\n        <div class=\"titlebar\">\n          <div class=\"traffic-lights\">\n            <span class=\"close\"></span>\n            <span class=\"minimize\"></span>\n            <span class=\"fullscreen\"></span>\n          </div>\n          <span class=\"window-title\">bash — 80×24</span>\n        </div>\n        <div class=\"terminal-canvas\">\n          <div class=\"output-lines\">\n            <span class=\"output-line dim\">Last login: Mon Jun 2 09:14:22 on ttys011</span>\n            <span class=\"output-line\">Initializing HyperFrames project...</span>\n            <span class=\"output-line dim\"> Creating project structure</span>\n            <span class=\"output-line dim\"> Copying template files</span>\n            <span class=\"output-line dim\"> Installing dependencies</span>\n            <span class=\"output-line\"> added 142 packages in 3.4s</span>\n            <span class=\"output-line accent\"> ✓ Project ready at ./my-video</span>\n            <span class=\"output-line bold\"> Run: cd my-video && npx hyperframes preview</span>\n          </div>\n          <div class=\"input-line\">\n            <span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span\n            ><span class=\"cursor-block\"></span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const command = \"npx hyperframes init my-video\";\n      const typedEl = document.querySelector(\".typed-command\");\n      const cursorEl = document.querySelector(\".cursor-block\");\n      const outputLines = document.querySelectorAll(\".output-line\");\n\n      const tl = gsap.timeline({ paused: true });\n\n      tl.set(typedEl, { text: \"\" }, 0);\n\n      const charDuration = 1.5 / command.length;\n      command.split(\"\").forEach((char, i) => {\n        tl.add(\n          () => {\n            typedEl.textContent = command.slice(0, i + 1);\n          },\n          0.5 + i * charDuration,\n        );\n      });\n\n      tl.set(cursorEl, { opacity: 0 }, 2.2);\n      tl.set(outputLines[0], { opacity: 1 }, 2.3);\n\n      tl.add(() => {\n        typedEl.textContent = \"\";\n      }, 2.5);\n\n      outputLines.forEach((line, i) => {\n        if (i === 0) return;\n        tl.set(line, { opacity: 1 }, 2.8 + i * 0.1);\n      });\n\n      tl.add(() => {\n        const inputLine = document.querySelector(\".input-line\");\n        const newPrompt = document.createElement(\"div\");\n        newPrompt.className = \"input-line\";\n        newPrompt.innerHTML =\n          '<span class=\"prompt\">user@Mac ~ % </span><span class=\"typed-command\"></span><span class=\"cursor-block\" id=\"final-cursor\"></span>';\n        inputLine.style.display = \"none\";\n        inputLine.parentNode.appendChild(newPrompt);\n      }, 4.2);\n\n      const blinkTimes = [4.4, 4.8, 5.2, 5.6, 6.0, 6.4];\n      blinkTimes.forEach((t, i) => {\n        tl.add(() => {\n          const fc = document.getElementById(\"final-cursor\");\n          if (fc) fc.style.opacity = i % 2 === 0 ? \"0\" : \"1\";\n        }, t);\n      });\n      tl.add(() => {\n        const fc = document.getElementById(\"final-cursor\");\n        if (fc) fc.style.opacity = \"1\";\n      }, 6.8);\n\n      window.__timelines[\"code-snippet-apple-terminal-solid-colors\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-dark-2026.json b/docs/public/catalog/blocks/code-snippet-dark-2026.json
new file mode 100644
index 0000000000..b46eb0ee7d
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-dark-2026.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-dark-2026\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-dark-2026\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-dark-2026\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-dark-2026\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .status-left,\n          [data-composition-id=\"code-snippet-dark-2026\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-dark-2026\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-dark-2026.html\" data-composition-id=\"code-snippet-dark-2026\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-dark-2026\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Dark 2026</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">2026-dark.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-dark-2026\";\n  var __hfTimelineCompId = \"code-snippet-dark-2026\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-dark-2026\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-dark-2026\\\"|'vscode-dark-2026')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-dark-2026\";\n  var __hfTimelineCompId = \"code-snippet-dark-2026\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-dark-2026\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-dark-2026\\\"|'vscode-dark-2026')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-dark-2026\"] =\n            window.__timelines[\"vscode-dark-2026\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-dark-2026\", {\n            id: \"dark-2026\",\n            label: \"Dark 2026\",\n            sourceFile: \"2026-dark.json\",\n            uiTheme: \"vs-dark\",\n            colors: {\n              \"activityBar.activeBorder\": \"#bfbfbf\",\n              \"activityBar.background\": \"#191A1B\",\n              \"activityBar.border\": \"#2A2B2CFF\",\n              \"activityBar.foreground\": \"#bfbfbf\",\n              \"activityBar.inactiveForeground\": \"#8C8C8C\",\n              \"editor.background\": \"#121314\",\n              \"editor.foreground\": \"#BBBEBF\",\n              \"editor.lineHighlightBackground\": \"#242526\",\n              \"editor.selectionBackground\": \"#276782dd\",\n              \"editorGroup.border\": \"#FFFFFF17\",\n              \"editorGroupHeader.tabsBackground\": \"#191A1B\",\n              \"editorGroupHeader.tabsBorder\": \"#2A2B2CFF\",\n              \"editorLineNumber.activeForeground\": \"#BBBEBF\",\n              \"editorLineNumber.foreground\": \"#858889\",\n              foreground: \"#bfbfbf\",\n              \"icon.foreground\": \"#8C8C8C\",\n              \"panel.background\": \"#191A1B\",\n              \"panel.border\": \"#2A2B2CFF\",\n              \"sideBar.background\": \"#191A1B\",\n              \"sideBar.border\": \"#2A2B2CFF\",\n              \"sideBar.foreground\": \"#bfbfbf\",\n              \"sideBarSectionHeader.background\": \"#191A1B\",\n              \"sideBarSectionHeader.border\": \"#2A2B2CFF\",\n              \"sideBarSectionHeader.foreground\": \"#bfbfbf\",\n              \"sideBarTitle.foreground\": \"#bfbfbf\",\n              \"statusBar.background\": \"#191A1B\",\n              \"statusBar.border\": \"#2A2B2CFF\",\n              \"statusBar.foreground\": \"#8C8C8C\",\n              \"statusBarItem.remoteBackground\": \"#0078D4\",\n              \"statusBarItem.remoteForeground\": \"#FFFFFF\",\n              \"tab.activeBackground\": \"#121314\",\n              \"tab.activeBorder\": \"#121314\",\n              \"tab.activeBorderTop\": \"#3994BC\",\n              \"tab.activeForeground\": \"#bfbfbf\",\n              \"tab.border\": \"#2A2B2CFF\",\n              \"tab.inactiveBackground\": \"#191A1B\",\n              \"tab.inactiveForeground\": \"#8C8C8C\",\n              \"terminal.background\": \"#191A1B\",\n              \"terminal.foreground\": \"#CCCCCC\",\n              \"terminalCursor.foreground\": \"#bfbfbf\",\n              \"titleBar.activeBackground\": \"#191A1B\",\n              \"titleBar.activeForeground\": \"#8C8C8C\",\n            },\n            tokens: {\n              comment: \"#8b949e\",\n              keyword: \"#c9d1d9\",\n              function: \"#79c0ff\",\n              string: \"#a5d6ff\",\n              number: \"#79c0ff\",\n              variable: \"#c9d1d9\",\n              parameter: \"#ffa657\",\n              operator: \"#ff7b72\",\n              punctuation: \"#ffa657\",\n              className: \"#7ee787\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-dark-modern.json b/docs/public/catalog/blocks/code-snippet-dark-modern.json
new file mode 100644
index 0000000000..632f7e2ff0
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-dark-modern.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-dark-modern\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-dark-modern\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-dark-modern\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-dark-modern\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .status-left,\n          [data-composition-id=\"code-snippet-dark-modern\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-dark-modern\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-dark-modern.html\" data-composition-id=\"code-snippet-dark-modern\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-dark-modern\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Dark Modern</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">dark_modern.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-dark-modern\";\n  var __hfTimelineCompId = \"code-snippet-dark-modern\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-dark-modern\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-dark-modern\\\"|'vscode-dark-modern')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-dark-modern\";\n  var __hfTimelineCompId = \"code-snippet-dark-modern\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-dark-modern\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-dark-modern\\\"|'vscode-dark-modern')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-dark-modern\"] =\n            window.__timelines[\"vscode-dark-modern\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-dark-modern\", {\n            id: \"dark-modern\",\n            label: \"Dark Modern\",\n            sourceFile: \"dark_modern.json\",\n            uiTheme: \"vs-dark\",\n            colors: {\n              \"activityBar.activeBorder\": \"#0078D4\",\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.border\": \"#2B2B2B\",\n              \"activityBar.foreground\": \"#D7D7D7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"editor.background\": \"#1F1F1F\",\n              \"editor.foreground\": \"#CCCCCC\",\n              \"editorGroup.border\": \"#FFFFFF17\",\n              \"editorGroupHeader.tabsBackground\": \"#181818\",\n              \"editorGroupHeader.tabsBorder\": \"#2B2B2B\",\n              \"editorLineNumber.activeForeground\": \"#CCCCCC\",\n              \"editorLineNumber.foreground\": \"#6E7681\",\n              foreground: \"#CCCCCC\",\n              \"icon.foreground\": \"#CCCCCC\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2B2B2B\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.border\": \"#2B2B2B\",\n              \"sideBar.foreground\": \"#CCCCCC\",\n              \"sideBarSectionHeader.background\": \"#181818\",\n              \"sideBarSectionHeader.border\": \"#2B2B2B\",\n              \"sideBarSectionHeader.foreground\": \"#CCCCCC\",\n              \"sideBarTitle.foreground\": \"#CCCCCC\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.border\": \"#2B2B2B\",\n              \"statusBar.foreground\": \"#CCCCCC\",\n              \"statusBarItem.remoteBackground\": \"#0078D4\",\n              \"statusBarItem.remoteForeground\": \"#FFFFFF\",\n              \"tab.activeBackground\": \"#1F1F1F\",\n              \"tab.activeBorder\": \"#1F1F1F\",\n              \"tab.activeBorderTop\": \"#0078D4\",\n              \"tab.activeForeground\": \"#FFFFFF\",\n              \"tab.border\": \"#2B2B2B\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9D9D9D\",\n              \"terminal.foreground\": \"#CCCCCC\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#CCCCCC\",\n            },\n            tokens: {\n              comment: \"#6A9955\",\n              keyword: \"#d7ba7d\",\n              function: \"#DCDCAA\",\n              string: \"#d16969\",\n              number: \"#b5cea8\",\n              variable: \"#4FC1FF\",\n              parameter: \"#9CDCFE\",\n              operator: \"#d7ba7d\",\n              punctuation: \"#CE9178\",\n              className: \"#4EC9B0\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-dark-plus.json b/docs/public/catalog/blocks/code-snippet-dark-plus.json
new file mode 100644
index 0000000000..8a24ec9c13
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-dark-plus.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-dark-plus\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-dark-plus\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-dark-plus\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-dark-plus\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .status-left,\n          [data-composition-id=\"code-snippet-dark-plus\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-dark-plus\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-dark-plus.html\" data-composition-id=\"code-snippet-dark-plus\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-dark-plus\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Dark+</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">dark_plus.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-dark-plus\";\n  var __hfTimelineCompId = \"code-snippet-dark-plus\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-dark-plus\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-dark-plus\\\"|'vscode-dark-plus')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-dark-plus\";\n  var __hfTimelineCompId = \"code-snippet-dark-plus\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-dark-plus\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-dark-plus\\\"|'vscode-dark-plus')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-dark-plus\"] =\n            window.__timelines[\"vscode-dark-plus\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-dark-plus\", {\n            id: \"dark-plus\",\n            label: \"Dark+\",\n            sourceFile: \"dark_plus.json\",\n            uiTheme: \"vs-dark\",\n            colors: {\n              \"editor.background\": \"#1E1E1E\",\n              \"editor.foreground\": \"#D4D4D4\",\n              \"sideBarSectionHeader.background\": \"#0000\",\n              \"sideBarSectionHeader.border\": \"#ccc3\",\n              \"sideBarTitle.foreground\": \"#BBBBBB\",\n              \"statusBarItem.remoteBackground\": \"#16825D\",\n              \"statusBarItem.remoteForeground\": \"#FFF\",\n            },\n            tokens: {\n              comment: \"#6A9955\",\n              keyword: \"#d7ba7d\",\n              function: \"#DCDCAA\",\n              string: \"#d16969\",\n              number: \"#b5cea8\",\n              variable: \"#4FC1FF\",\n              parameter: \"#9CDCFE\",\n              operator: \"#d7ba7d\",\n              punctuation: \"#CE9178\",\n              className: \"#4EC9B0\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-flight.json b/docs/public/catalog/blocks/code-snippet-flight.json
new file mode 100644
index 0000000000..382eaffdf4
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-flight.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Snippet Flight</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        font-family: \"JetBrains Mono\", monospace;\n        color: #e6edf3;\n      }\n      .bg-field {\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);\n      }\n      .bg-grid {\n        position: absolute;\n        inset: 0;\n        background-image:\n          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);\n        background-size: 64px 64px;\n        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);\n      }\n      .bg-glow {\n        position: absolute;\n        width: 900px;\n        height: 900px;\n        border-radius: 50%;\n        filter: blur(120px);\n        opacity: 0.5;\n      }\n      .bg-glow.a {\n        background: #1f6feb55;\n        left: -180px;\n        top: -200px;\n      }\n      .bg-glow.b {\n        background: #2ea04355;\n        right: -200px;\n        bottom: -260px;\n      }\n      .editor {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 1380px;\n        height: 800px;\n        background: #0b0f17;\n        border: 1px solid #1d2733;\n        border-radius: 16px;\n        box-shadow:\n          0 40px 120px rgba(0, 0, 0, 0.6),\n          0 2px 0 rgba(255, 255, 255, 0.03) inset;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n      .titlebar {\n        height: 56px;\n        flex: 0 0 56px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 0 22px;\n        background: linear-gradient(#11161f, #0c111a);\n        border-bottom: 1px solid #1b2430;\n      }\n      .dots {\n        display: flex;\n        gap: 10px;\n      }\n      .dot {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n      }\n      .dot.r {\n        background: #ff5f57;\n      }\n      .dot.y {\n        background: #febc2e;\n      }\n      .dot.g {\n        background: #28c840;\n      }\n      .filename {\n        font-size: 19px;\n        color: #8b98a9;\n        letter-spacing: 0.2px;\n      }\n      .filename .accent {\n        color: #d6e2f0;\n      }\n      .code-surface {\n        position: relative;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      .scene {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        will-change: opacity;\n      }\n      .code {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        right: 0;\n        padding: 0 44px 0 104px;\n        font-size: 30px;\n        line-height: 46px;\n        font-variant-ligatures: none;\n        tab-size: 2;\n      }\n      .gutter {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        width: 84px;\n        padding-right: 18px;\n        font-size: 30px;\n        line-height: 46px;\n        text-align: right;\n        color: #828c9b;\n        user-select: none;\n      }\n      .ln {\n        display: block;\n        height: 46px;\n      }\n      .line {\n        display: block;\n        min-height: 46px;\n        white-space: pre;\n        position: relative;\n        z-index: 1;\n      }\n      .tok {\n        display: inline-block;\n        white-space: pre;\n        will-change: transform, opacity;\n      }\n      .caret {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 3px;\n        height: 32px;\n        margin-top: 6px;\n        background: #58a6ff;\n        border-radius: 1px;\n        z-index: 3;\n      }\n      .hl-box {\n        position: absolute;\n        background: rgba(88, 166, 255, 0.16);\n        border-left: 3px solid #58a6ff;\n        border-radius: 6px;\n        z-index: 0;\n        overflow: hidden;\n      }\n      .diff-line {\n        display: block;\n        min-height: 0;\n        line-height: 46px;\n        white-space: pre;\n        position: relative;\n        overflow: hidden;\n        padding-left: 14px;\n      }\n      .diff-sign {\n        display: inline-block;\n        width: 22px;\n        color: #41506220;\n      }\n      .diff-del {\n        background: rgba(248, 81, 73, 0.12);\n        box-shadow: inset 3px 0 #f85149;\n      }\n      .diff-add {\n        background: rgba(63, 185, 80, 0.12);\n        box-shadow: inset 3px 0 #3fb950;\n      }\n      .diff-del .diff-sign {\n        color: #f85149;\n      }\n      .diff-add .diff-sign {\n        color: #3fb950;\n      }\n      .flight-block {\n        position: absolute;\n        white-space: pre;\n        font-size: 27px;\n        line-height: 40px;\n        padding: 11px 22px;\n        border-radius: 11px;\n        background: #0f1722;\n        border: 1px solid #233044;\n        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);\n        will-change: transform, opacity;\n      }\n      .flight-target {\n        position: absolute;\n        border: 1.5px dashed #2a3a4f;\n        border-radius: 14px;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-snippet-flight\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"bg-field\" data-layout-ignore></div>\n      <div class=\"bg-grid\" data-layout-ignore></div>\n      <div class=\"bg-glow a\" data-layout-ignore></div>\n      <div class=\"bg-glow b\" data-layout-ignore></div>\n      <div class=\"editor\" id=\"editor\" data-layout-ignore>\n        <div class=\"titlebar\">\n          <div class=\"dots\">\n            <span class=\"dot r\"></span><span class=\"dot y\"></span><span class=\"dot g\"></span>\n          </div>\n          <span class=\"filename\"\n            ><span class=\"accent\">pipeline.js</span> — Code Snippet Flight</span\n          >\n        </div>\n        <div class=\"code-surface\" id=\"surface\"></div>\n      </div>\n    </div>\n    <script>\n      window.__TOKENS = {\n        flight: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: \"const x = parse(input)\",\n              tokens: [\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-2\",\n                  content: \"x\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-6\",\n                  content: \"parse\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-7\",\n                  content: \"(input)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-8\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n            {\n              code: \"const y = transform(x)\",\n              tokens: [\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-2\",\n                  content: \"y\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-6\",\n                  content: \"transform\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-7\",\n                  content: \"(x)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"ulDeJnFQa2Vy-61y5zTTA7sNfq7d4aUawNMAxQ6sVgg-8\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n            {\n              code: \"const z = render(y)\",\n              tokens: [\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-0\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-2\",\n                  content: \"z\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-4\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"qABRRXThYBzvlFJqemsh1aauYJqWMIPHhxkj-uoxex4-5\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-6\",\n                  content: \"render\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-7\",\n                  content: \"(y)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"wFuhzZNydG-3inU2s1h1gU8Kivya8CAP9gl9S4MBQj4-8\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = { id: \"code-snippet-flight\", effect: \"flight\", seq: \"flight\", duration: 6 };\n    </script>\n    <script>\n      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.\n      //\n      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and\n      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —\n      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement\n      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets\n      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the\n      // engine builds one scene that fills the composition and registers window.__timelines[id].\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        function lineDiv() {\n          var d = document.createElement(\"div\");\n          d.className = \"line\";\n          return d;\n        }\n\n        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.\n        function renderState(codeEl, state) {\n          codeEl.textContent = \"\";\n          var keyToEl = new Map();\n          var line = lineDiv();\n          codeEl.appendChild(line);\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              line = lineDiv();\n              codeEl.appendChild(line);\n              continue;\n            }\n            var span = document.createElement(\"span\");\n            span.className = \"tok\";\n            span.textContent = t.content;\n            span.style.color = t.color;\n            if (t.fontStyle & 1) span.style.fontStyle = \"italic\";\n            if (t.fontStyle & 2) span.style.fontWeight = \"700\";\n            line.appendChild(span);\n            keyToEl.set(t.key, span);\n          }\n          var last = codeEl.lastChild;\n          if (last && last.className === \"line\" && last.children.length === 0)\n            codeEl.removeChild(last);\n          return keyToEl;\n        }\n\n        function rectsOf(keyToEl) {\n          var m = new Map();\n          keyToEl.forEach(function (el, k) {\n            var r = el.getBoundingClientRect();\n            m.set(k, { left: r.left, top: r.top });\n          });\n          return m;\n        }\n\n        function makeScene(surface, withGutter) {\n          var scene = document.createElement(\"div\");\n          scene.className = \"scene\";\n          if (withGutter) {\n            var g = document.createElement(\"div\");\n            g.className = \"gutter\";\n            scene.appendChild(g);\n          }\n          var code = document.createElement(\"div\");\n          code.className = \"code\";\n          scene.appendChild(code);\n          surface.appendChild(scene);\n          return { scene: scene, code: code, gutter: scene.querySelector(\".gutter\") };\n        }\n\n        function fillGutter(g, n) {\n          var html = \"\";\n          for (var i = 1; i <= n; i++) html += '<span class=\"ln\">' + i + \"</span>\";\n          g.innerHTML = html;\n        }\n\n        function splitLines(state) {\n          var lines = [{ text: \"\", tokens: [] }];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push({ text: \"\", tokens: [] });\n              continue;\n            }\n            var cur = lines[lines.length - 1];\n            cur.tokens.push(t);\n            cur.text += t.content;\n          }\n          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();\n          return lines;\n        }\n\n        function lineDiff(a, b) {\n          var n = a.length;\n          var m = b.length;\n          var dp = [];\n          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));\n          for (var i = n - 1; i >= 0; i--) {\n            for (var j = m - 1; j >= 0; j--) {\n              dp[i][j] =\n                a[i].text === b[j].text\n                  ? dp[i + 1][j + 1] + 1\n                  : Math.max(dp[i + 1][j], dp[i][j + 1]);\n            }\n          }\n          var ops = [];\n          var i = 0;\n          var j = 0;\n          while (i < n && j < m) {\n            if (a[i].text === b[j].text) {\n              ops.push({ type: \"same\", line: b[j] });\n              i++;\n              j++;\n            } else if (dp[i + 1][j] >= dp[i][j + 1]) {\n              ops.push({ type: \"del\", line: a[i] });\n              i++;\n            } else {\n              ops.push({ type: \"add\", line: b[j] });\n              j++;\n            }\n          }\n          while (i < n) ops.push({ type: \"del\", line: a[i++] });\n          while (j < m) ops.push({ type: \"add\", line: b[j++] });\n          return ops;\n        }\n\n        // ---- single-scene effect builders (fade in, play, hold to end) -------------\n        var FADE = 0.45;\n\n        function flight(tl, surface, states, start) {\n          var FLY = 0.95;\n          var STAGGER = 0.26;\n          var GAP = 20;\n          var parts = makeScene(surface, false);\n          parts.code.remove();\n          var scene = parts.scene;\n          var target = document.createElement(\"div\");\n          target.className = \"flight-target\";\n          scene.appendChild(target);\n          var W = surface.clientWidth;\n          var H = surface.clientHeight;\n\n          var blocks = states.map(function (st) {\n            var blk = document.createElement(\"div\");\n            blk.className = \"flight-block\";\n            renderState(blk, st);\n            scene.appendChild(blk);\n            return blk;\n          });\n          var n = blocks.length;\n\n          // Pass 1: measure natural size, then make every chip the SAME width (symmetry).\n          var maxW = 0;\n          var chipH = 0;\n          blocks.forEach(function (blk) {\n            var r = blk.getBoundingClientRect();\n            if (r.width > maxW) maxW = r.width;\n            if (r.height > chipH) chipH = r.height;\n          });\n          blocks.forEach(function (blk) {\n            blk.style.width = maxW + \"px\";\n          });\n\n          // Pass 2: evenly-stacked, left-aligned, group centered in the surface.\n          var stackH = n * chipH + (n - 1) * GAP;\n          var destLeft = Math.round((W - maxW) / 2);\n          var topY = Math.round((H - stackH) / 2);\n          blocks.forEach(function (blk, i) {\n            var destY = topY + i * (chipH + GAP);\n            blk.style.left = destLeft + \"px\";\n            blk.style.top = destY + \"px\";\n            // fly straight in from the left to the shared left edge — clean, no skew\n            var srcX = destLeft - W * 0.32;\n            tl.fromTo(\n              blk,\n              { x: srcX - destLeft, opacity: 0, scale: 0.96 },\n              { x: 0, opacity: 1, scale: 1, duration: FLY, ease: \"power3.out\" },\n              start + FADE + i * STAGGER,\n            );\n          });\n\n          // Even-padded panel tightly wrapping the uniform stack.\n          var padX = 30;\n          var padY = 24;\n          target.style.left = destLeft - padX + \"px\";\n          target.style.top = topY - padY + \"px\";\n          target.style.width = maxW + padX * 2 + \"px\";\n          target.style.height = stackH + padY * 2 + \"px\";\n          var landAt = start + FADE + (n - 1) * STAGGER + FLY;\n          tl.set(scene, { opacity: 1 }, 0);\n          tl.to(target, { opacity: 1, duration: 0.5, ease: \"power1.out\" }, landAt - 0.5);\n        }\n\n        function buildEffect(tl, surface, spec) {\n          var start = 0.45;\n          var seq = T[spec.seq];\n          if (spec.effect === \"flight\") flight(tl, surface, seq.states, start);\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var surface = document.getElementById(\"surface\");\n          var root = document.getElementById(\"root\");\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          window.__timelines[\"code-snippet-flight\"] = tl; // register synchronously\n          document.fonts.ready.then(function () {\n            tl.from(\"#editor\", { opacity: 0, scale: 0.985, duration: 0.5, ease: \"power2.out\" }, 0);\n            buildEffect(tl, surface, spec);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-high-contrast-light.json b/docs/public/catalog/blocks/code-snippet-high-contrast-light.json
new file mode 100644
index 0000000000..2d867f14e2
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-high-contrast-light.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-high-contrast-light\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-high-contrast-light\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-high-contrast-light\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .status-left,\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast-light\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-high-contrast-light.html\" data-composition-id=\"code-snippet-high-contrast-light\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-high-contrast-light\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Default High Contrast Light</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">hc_light.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-high-contrast-light\";\n  var __hfTimelineCompId = \"code-snippet-high-contrast-light\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-high-contrast-light\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-high-contrast-light\\\"|'vscode-high-contrast-light')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-high-contrast-light\";\n  var __hfTimelineCompId = \"code-snippet-high-contrast-light\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-high-contrast-light\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-high-contrast-light\\\"|'vscode-high-contrast-light')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-high-contrast-light\"] =\n            window.__timelines[\"vscode-high-contrast-light\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-high-contrast-light\", {\n            id: \"high-contrast-light\",\n            label: \"Default High Contrast Light\",\n            sourceFile: \"hc_light.json\",\n            uiTheme: \"vs\",\n            colors: {\n              \"statusBarItem.remoteBackground\": \"#FFFFFF\",\n              \"statusBarItem.remoteForeground\": \"#000000\",\n            },\n            tokens: {\n              comment: \"#515151\",\n              keyword: \"#EE0000\",\n              function: \"#5e2cbc\",\n              string: \"#811F3F\",\n              number: \"#096d48\",\n              variable: \"#02715D\",\n              parameter: \"#001080\",\n              operator: \"#EE0000\",\n              punctuation: \"#D16969\",\n              className: \"#185E73\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-high-contrast.json b/docs/public/catalog/blocks/code-snippet-high-contrast.json
new file mode 100644
index 0000000000..ac95416371
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-high-contrast.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-high-contrast\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-high-contrast\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-high-contrast\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-high-contrast\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .status-left,\n          [data-composition-id=\"code-snippet-high-contrast\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-high-contrast\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-high-contrast.html\" data-composition-id=\"code-snippet-high-contrast\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-high-contrast\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Default High Contrast</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">hc_black.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-high-contrast\";\n  var __hfTimelineCompId = \"code-snippet-high-contrast\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-high-contrast\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-high-contrast\\\"|'vscode-high-contrast')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-high-contrast\";\n  var __hfTimelineCompId = \"code-snippet-high-contrast\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-high-contrast\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-high-contrast\\\"|'vscode-high-contrast')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-high-contrast\"] =\n            window.__timelines[\"vscode-high-contrast\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-high-contrast\", {\n            id: \"high-contrast\",\n            label: \"Default High Contrast\",\n            sourceFile: \"hc_black.json\",\n            uiTheme: \"vs-dark\",\n            colors: {\n              \"editor.background\": \"#000000\",\n              \"editor.foreground\": \"#FFFFFF\",\n              \"editor.selectionBackground\": \"#FFFFFF\",\n              \"sideBarTitle.foreground\": \"#FFFFFF\",\n              \"statusBarItem.remoteBackground\": \"#00000000\",\n            },\n            tokens: {\n              comment: \"#7ca668\",\n              keyword: \"#C586C0\",\n              function: \"#DCDCAA\",\n              string: \"#d16969\",\n              number: \"#b5cea8\",\n              variable: \"#9CDCFE\",\n              parameter: \"#9CDCFE\",\n              operator: \"#569cd6\",\n              punctuation: \"#4EC9B0\",\n              className: \"#4EC9B0\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-light-2026.json b/docs/public/catalog/blocks/code-snippet-light-2026.json
new file mode 100644
index 0000000000..0ea1a26735
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-light-2026.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-light-2026\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-light-2026\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-light-2026\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-light-2026\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .status-left,\n          [data-composition-id=\"code-snippet-light-2026\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-light-2026\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-light-2026.html\" data-composition-id=\"code-snippet-light-2026\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-light-2026\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Light 2026</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">2026-light.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-light-2026\";\n  var __hfTimelineCompId = \"code-snippet-light-2026\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-light-2026\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-light-2026\\\"|'vscode-light-2026')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-light-2026\";\n  var __hfTimelineCompId = \"code-snippet-light-2026\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-light-2026\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-light-2026\\\"|'vscode-light-2026')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-light-2026\"] =\n            window.__timelines[\"vscode-light-2026\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-light-2026\", {\n            id: \"light-2026\",\n            label: \"Light 2026\",\n            sourceFile: \"2026-light.json\",\n            uiTheme: \"vs\",\n            colors: {\n              \"activityBar.activeBorder\": \"#000000\",\n              \"activityBar.background\": \"#FAFAFD\",\n              \"activityBar.border\": \"#F0F1F2FF\",\n              \"activityBar.foreground\": \"#202020\",\n              \"activityBar.inactiveForeground\": \"#606060\",\n              \"editor.background\": \"#FFFFFF\",\n              \"editor.foreground\": \"#202020\",\n              \"editor.lineHighlightBackground\": \"#EAEAEA40\",\n              \"editor.selectionBackground\": \"#0069CC40\",\n              \"editorGroup.border\": \"#E5E5E5\",\n              \"editorGroupHeader.tabsBackground\": \"#FAFAFD\",\n              \"editorGroupHeader.tabsBorder\": \"#F0F1F2FF\",\n              \"editorLineNumber.activeForeground\": \"#202020\",\n              \"editorLineNumber.foreground\": \"#606060\",\n              foreground: \"#202020\",\n              \"icon.foreground\": \"#606060\",\n              \"panel.background\": \"#FAFAFD\",\n              \"panel.border\": \"#F0F1F2FF\",\n              \"sideBar.background\": \"#FAFAFD\",\n              \"sideBar.border\": \"#F0F1F2FF\",\n              \"sideBar.foreground\": \"#202020\",\n              \"sideBarSectionHeader.background\": \"#FAFAFD\",\n              \"sideBarSectionHeader.border\": \"#F0F1F2FF\",\n              \"sideBarSectionHeader.foreground\": \"#202020\",\n              \"sideBarTitle.foreground\": \"#202020\",\n              \"statusBar.background\": \"#FAFAFD\",\n              \"statusBar.border\": \"#F0F1F2FF\",\n              \"statusBar.foreground\": \"#606060\",\n              \"statusBarItem.remoteBackground\": \"#005FB8\",\n              \"statusBarItem.remoteForeground\": \"#FFFFFF\",\n              \"tab.activeBackground\": \"#FFFFFF\",\n              \"tab.activeBorder\": \"#FFFFFF\",\n              \"tab.activeBorderTop\": \"#000000\",\n              \"tab.activeForeground\": \"#202020\",\n              \"tab.border\": \"#F0F1F2FF\",\n              \"tab.inactiveBackground\": \"#FAFAFD\",\n              \"tab.inactiveForeground\": \"#606060\",\n              \"terminal.foreground\": \"#3B3B3B\",\n              \"terminalCursor.foreground\": \"#202020\",\n              \"titleBar.activeBackground\": \"#FAFAFD\",\n              \"titleBar.activeForeground\": \"#606060\",\n            },\n            tokens: {\n              comment: \"#6e7781\",\n              keyword: \"#1f2328\",\n              function: \"#0550ae\",\n              string: \"#0a3069\",\n              number: \"#0550ae\",\n              variable: \"#1f2328\",\n              parameter: \"#953800\",\n              operator: \"#cf222e\",\n              punctuation: \"#953800\",\n              className: \"#116329\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-light-modern.json b/docs/public/catalog/blocks/code-snippet-light-modern.json
new file mode 100644
index 0000000000..f0c80c3c01
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-light-modern.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-light-modern\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-light-modern\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-light-modern\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-light-modern\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .status-left,\n          [data-composition-id=\"code-snippet-light-modern\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-light-modern\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-light-modern.html\" data-composition-id=\"code-snippet-light-modern\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-light-modern\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Light Modern</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">light_modern.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-light-modern\";\n  var __hfTimelineCompId = \"code-snippet-light-modern\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-light-modern\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-light-modern\\\"|'vscode-light-modern')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-light-modern\";\n  var __hfTimelineCompId = \"code-snippet-light-modern\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-light-modern\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-light-modern\\\"|'vscode-light-modern')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-light-modern\"] =\n            window.__timelines[\"vscode-light-modern\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-light-modern\", {\n            id: \"light-modern\",\n            label: \"Light Modern\",\n            sourceFile: \"light_modern.json\",\n            uiTheme: \"vs\",\n            colors: {\n              \"activityBar.activeBorder\": \"#005FB8\",\n              \"activityBar.background\": \"#F8F8F8\",\n              \"activityBar.border\": \"#E5E5E5\",\n              \"activityBar.foreground\": \"#1F1F1F\",\n              \"activityBar.inactiveForeground\": \"#616161\",\n              \"editor.background\": \"#FFFFFF\",\n              \"editor.foreground\": \"#3B3B3B\",\n              \"editorGroup.border\": \"#E5E5E5\",\n              \"editorGroupHeader.tabsBackground\": \"#F8F8F8\",\n              \"editorGroupHeader.tabsBorder\": \"#E5E5E5\",\n              \"editorLineNumber.activeForeground\": \"#171184\",\n              \"editorLineNumber.foreground\": \"#6E7681\",\n              foreground: \"#3B3B3B\",\n              \"icon.foreground\": \"#3B3B3B\",\n              \"panel.background\": \"#F8F8F8\",\n              \"panel.border\": \"#E5E5E5\",\n              \"sideBar.background\": \"#F8F8F8\",\n              \"sideBar.border\": \"#E5E5E5\",\n              \"sideBar.foreground\": \"#3B3B3B\",\n              \"sideBarSectionHeader.background\": \"#F8F8F8\",\n              \"sideBarSectionHeader.border\": \"#E5E5E5\",\n              \"sideBarSectionHeader.foreground\": \"#3B3B3B\",\n              \"sideBarTitle.foreground\": \"#3B3B3B\",\n              \"statusBar.background\": \"#F8F8F8\",\n              \"statusBar.border\": \"#E5E5E5\",\n              \"statusBar.foreground\": \"#3B3B3B\",\n              \"statusBarItem.remoteBackground\": \"#005FB8\",\n              \"statusBarItem.remoteForeground\": \"#FFFFFF\",\n              \"tab.activeBackground\": \"#FFFFFF\",\n              \"tab.activeBorder\": \"#F8F8F8\",\n              \"tab.activeBorderTop\": \"#005FB8\",\n              \"tab.activeForeground\": \"#3B3B3B\",\n              \"tab.border\": \"#E5E5E5\",\n              \"tab.inactiveBackground\": \"#F8F8F8\",\n              \"tab.inactiveForeground\": \"#868686\",\n              \"terminal.foreground\": \"#3B3B3B\",\n              \"terminalCursor.foreground\": \"#005FB8\",\n              \"titleBar.activeBackground\": \"#F8F8F8\",\n              \"titleBar.activeForeground\": \"#1E1E1E\",\n            },\n            tokens: {\n              comment: \"#008000\",\n              keyword: \"#EE0000\",\n              function: \"#795E26\",\n              string: \"#811f3f\",\n              number: \"#098658\",\n              variable: \"#0070C1\",\n              parameter: \"#001080\",\n              operator: \"#EE0000\",\n              punctuation: \"#d16969\",\n              className: \"#267f99\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-light-plus.json b/docs/public/catalog/blocks/code-snippet-light-plus.json
new file mode 100644
index 0000000000..c970319c51
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-light-plus.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-light-plus\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-light-plus\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-light-plus\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-light-plus\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .status-left,\n          [data-composition-id=\"code-snippet-light-plus\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-light-plus\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-light-plus.html\" data-composition-id=\"code-snippet-light-plus\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-light-plus\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Light+</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">light_plus.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-light-plus\";\n  var __hfTimelineCompId = \"code-snippet-light-plus\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-light-plus\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-light-plus\\\"|'vscode-light-plus')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-light-plus\";\n  var __hfTimelineCompId = \"code-snippet-light-plus\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-light-plus\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-light-plus\\\"|'vscode-light-plus')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-light-plus\"] =\n            window.__timelines[\"vscode-light-plus\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-light-plus\", {\n            id: \"light-plus\",\n            label: \"Light+\",\n            sourceFile: \"light_plus.json\",\n            uiTheme: \"vs\",\n            colors: {\n              \"editor.background\": \"#FFFFFF\",\n              \"editor.foreground\": \"#000000\",\n              \"sideBarSectionHeader.background\": \"#0000\",\n              \"sideBarSectionHeader.border\": \"#61616130\",\n              \"sideBarTitle.foreground\": \"#6F6F6F\",\n              \"statusBarItem.remoteBackground\": \"#16825D\",\n              \"statusBarItem.remoteForeground\": \"#FFF\",\n            },\n            tokens: {\n              comment: \"#008000\",\n              keyword: \"#EE0000\",\n              function: \"#795E26\",\n              string: \"#811f3f\",\n              number: \"#098658\",\n              variable: \"#0070C1\",\n              parameter: \"#001080\",\n              operator: \"#EE0000\",\n              punctuation: \"#d16969\",\n              className: \"#267f99\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-monokai.json b/docs/public/catalog/blocks/code-snippet-monokai.json
new file mode 100644
index 0000000000..7f303ad185
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-monokai.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-monokai\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-monokai\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-monokai\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-monokai\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .status-left,\n          [data-composition-id=\"code-snippet-monokai\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-monokai\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-monokai.html\" data-composition-id=\"code-snippet-monokai\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-monokai\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Monokai</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">monokai-color-theme.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-monokai\";\n  var __hfTimelineCompId = \"code-snippet-monokai\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-monokai\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-monokai\\\"|'vscode-monokai')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-monokai\";\n  var __hfTimelineCompId = \"code-snippet-monokai\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-monokai\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-monokai\\\"|'vscode-monokai')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-monokai\"] =\n            window.__timelines[\"vscode-monokai\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-monokai\", {\n            id: \"monokai\",\n            label: \"Monokai\",\n            sourceFile: \"monokai-color-theme.json\",\n            uiTheme: \"vs-dark\",\n            colors: {\n              \"activityBar.background\": \"#272822\",\n              \"activityBar.foreground\": \"#f8f8f2\",\n              \"editor.background\": \"#272822\",\n              \"editor.foreground\": \"#f8f8f2\",\n              \"editor.lineHighlightBackground\": \"#3e3d32\",\n              \"editor.selectionBackground\": \"#878b9180\",\n              \"editorGroup.border\": \"#34352f\",\n              \"editorGroupHeader.tabsBackground\": \"#1e1f1c\",\n              \"editorLineNumber.activeForeground\": \"#c2c2bf\",\n              \"editorLineNumber.foreground\": \"#90908a\",\n              \"panel.border\": \"#414339\",\n              \"sideBar.background\": \"#1e1f1c\",\n              \"sideBarSectionHeader.background\": \"#272822\",\n              \"statusBar.background\": \"#414339\",\n              \"statusBarItem.remoteBackground\": \"#AC6218\",\n              \"tab.border\": \"#1e1f1c\",\n              \"tab.inactiveBackground\": \"#34352f\",\n              \"tab.inactiveForeground\": \"#ccccc7\",\n              \"titleBar.activeBackground\": \"#1e1f1c\",\n            },\n            tokens: {\n              comment: \"#88846f\",\n              keyword: \"#66D9EF\",\n              function: \"#66D9EF\",\n              string: \"#AE81FF\",\n              number: \"#AE81FFA0\",\n              variable: \"#FD971F\",\n              parameter: \"#FD971F\",\n              operator: \"#F92672\",\n              punctuation: \"#A6E22E\",\n              className: \"#66D9EF\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-solarized-light.json b/docs/public/catalog/blocks/code-snippet-solarized-light.json
new file mode 100644
index 0000000000..83cf7f99ed
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-solarized-light.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-solarized-light\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-solarized-light\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-solarized-light\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-solarized-light\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .status-left,\n          [data-composition-id=\"code-snippet-solarized-light\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-solarized-light\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-solarized-light.html\" data-composition-id=\"code-snippet-solarized-light\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-solarized-light\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Solarized Light</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">solarized-light-color-theme.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-solarized-light\";\n  var __hfTimelineCompId = \"code-snippet-solarized-light\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-solarized-light\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-solarized-light\\\"|'vscode-solarized-light')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-solarized-light\";\n  var __hfTimelineCompId = \"code-snippet-solarized-light\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-solarized-light\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-solarized-light\\\"|'vscode-solarized-light')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-solarized-light\"] =\n            window.__timelines[\"vscode-solarized-light\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-solarized-light\", {\n            id: \"solarized-light\",\n            label: \"Solarized Light\",\n            sourceFile: \"solarized-light-color-theme.json\",\n            uiTheme: \"vs\",\n            colors: {\n              \"activityBar.background\": \"#DDD6C1\",\n              \"activityBar.foreground\": \"#584c27\",\n              \"editor.background\": \"#FDF6E3\",\n              \"editor.foreground\": \"#657B83\",\n              \"editor.lineHighlightBackground\": \"#EEE8D5\",\n              \"editor.selectionBackground\": \"#EEE8D5\",\n              \"editorGroup.border\": \"#DDD6C1\",\n              \"editorGroupHeader.tabsBackground\": \"#D9D2C2\",\n              \"editorLineNumber.activeForeground\": \"#567983\",\n              \"panel.border\": \"#DDD6C1\",\n              \"sideBar.background\": \"#EEE8D5\",\n              \"sideBarTitle.foreground\": \"#586E75\",\n              \"statusBar.background\": \"#EEE8D5\",\n              \"statusBar.foreground\": \"#586E75\",\n              \"statusBarItem.remoteBackground\": \"#AC9D57\",\n              \"tab.activeBackground\": \"#FDF6E3\",\n              \"tab.border\": \"#DDD6C1\",\n              \"tab.inactiveBackground\": \"#D3CBB7\",\n              \"tab.inactiveForeground\": \"#586E75\",\n              \"terminal.background\": \"#FDF6E3\",\n              \"titleBar.activeBackground\": \"#EEE8D5\",\n            },\n            tokens: {\n              comment: \"#93A1A1\",\n              keyword: \"#CB4B16\",\n              function: \"#268BD2\",\n              string: \"#DC322F\",\n              number: \"#D33682\",\n              variable: \"#268BD2\",\n              parameter: \"#9CDCFE\",\n              operator: \"#859900\",\n              punctuation: \"#DC322F\",\n              className: \"#CB4B16\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-visual-studio-dark.json b/docs/public/catalog/blocks/code-snippet-visual-studio-dark.json
new file mode 100644
index 0000000000..a2e09b6f8a
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-visual-studio-dark.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-visual-studio-dark\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-visual-studio-dark\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-visual-studio-dark\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .status-left,\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-dark\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-visual-studio-dark.html\" data-composition-id=\"code-snippet-visual-studio-dark\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-visual-studio-dark\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Visual Studio Dark</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">dark_vs.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-visual-studio-dark\";\n  var __hfTimelineCompId = \"code-snippet-visual-studio-dark\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-visual-studio-dark\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-visual-studio-dark\\\"|'vscode-visual-studio-dark')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-visual-studio-dark\";\n  var __hfTimelineCompId = \"code-snippet-visual-studio-dark\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-visual-studio-dark\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-visual-studio-dark\\\"|'vscode-visual-studio-dark')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-visual-studio-dark\"] =\n            window.__timelines[\"vscode-visual-studio-dark\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-visual-studio-dark\", {\n            id: \"visual-studio-dark\",\n            label: \"Visual Studio Dark\",\n            sourceFile: \"dark_vs.json\",\n            uiTheme: \"vs-dark\",\n            colors: {\n              \"editor.background\": \"#1E1E1E\",\n              \"editor.foreground\": \"#D4D4D4\",\n              \"sideBarSectionHeader.background\": \"#0000\",\n              \"sideBarSectionHeader.border\": \"#ccc3\",\n              \"sideBarTitle.foreground\": \"#BBBBBB\",\n              \"statusBarItem.remoteBackground\": \"#16825D\",\n              \"statusBarItem.remoteForeground\": \"#FFF\",\n            },\n            tokens: {\n              comment: \"#6A9955\",\n              keyword: \"#d4d4d4\",\n              function: \"#9cdcfe\",\n              string: \"#d16969\",\n              number: \"#b5cea8\",\n              variable: \"#569cd6\",\n              parameter: \"#9CDCFE\",\n              operator: \"#569cd6\",\n              punctuation: \"#569cd6\",\n              className: \"#9cdcfe\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-snippet-visual-studio-light.json b/docs/public/catalog/blocks/code-snippet-visual-studio-light.json
new file mode 100644
index 0000000000..3a10c7a0d0
--- /dev/null
+++ b/docs/public/catalog/blocks/code-snippet-visual-studio-light.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n<head><style data-hyperframes-deterministic-fonts=\"true\">@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/8909904ab6c872eb.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/6f56409fd3d64bb8.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/d5c0ed7b8b5dde97.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/7254a2cfd76b60b5.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 100;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 200;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 300;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 500;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 600;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Inter\";\n  src: url(\"/public/catalog/assets/e234267390ffd6ff.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 800;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/425c0713a8176f92.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/b9d66d1708156f76.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Segoe UI\";\n  src: url(\"/public/catalog/assets/7523c0cc7f5c088a.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 900;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Menlo\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Monaco\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/5a88ad5abfd02f99.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Consolas\";\n  src: url(\"/public/catalog/assets/df3dc3536491ffca.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/14425ba9c695763c.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 400;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/d0d4e818808f2a0b.woff2\") format(\"woff2\");\n  font-style: normal;\n  font-weight: 700;\n  font-display: block;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/61facab3428ae59c.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 400;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}\n\n@font-face {\n  font-family: \"Courier New\";\n  src: url(\"/public/catalog/assets/44b382d4775c2bb8.woff2\") format(\"woff2\");\n  font-style: italic;\n  font-weight: 700;\n  font-display: block;\n  unicode-range: U+a, U+20-23, U+25-49, U+4c-57, U+59-7d, U+2014, U+203a, U+2304, U+25c7;\n}</style><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=1920, height=1080\">\n  <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n  <style>* { margin: 0; padding: 0; } html, body { width: 1920px; height: 1080px; overflow: hidden; background: #ffffff; }\n\n* {\n            box-sizing: border-box;\n            letter-spacing: 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-visual-studio-light\"] > [data-hf-inner-root],\n          [data-composition-id=\"code-snippet-visual-studio-light\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"code-snippet-visual-studio-light\"] > [data-hf-inner-root] {\n            margin: 0;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background: #000000;\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .vscode-theme-scene {\n            --activity-bg: #181818;\n            --activity-fg: #d7d7d7;\n            --activity-muted: #868686;\n            --activity-active: #0078d4;\n            --sidebar-bg: #181818;\n            --sidebar-fg: #cccccc;\n            --sidebar-border: #2b2b2b;\n            --tab-bg: #181818;\n            --tab-active-bg: #1f1f1f;\n            --tab-active-fg: #ffffff;\n            --tab-inactive-fg: #9d9d9d;\n            --tab-border: #2b2b2b;\n            --editor-bg: #1f1f1f;\n            --editor-fg: #cccccc;\n            --editor-line: rgba(255, 255, 255, 0.04);\n            --gutter-fg: #6e7681;\n            --gutter-active-fg: #cccccc;\n            --panel-bg: #181818;\n            --panel-border: #2b2b2b;\n            --status-bg: #181818;\n            --status-fg: #cccccc;\n            --status-border: #2b2b2b;\n            --title-bg: #181818;\n            --title-fg: #cccccc;\n            --token-comment: #6a9955;\n            --token-keyword: #c586c0;\n            --token-function: #dcdcaa;\n            --token-string: #ce9178;\n            --token-number: #b5cea8;\n            --token-variable: #9cdcfe;\n            --token-parameter: #9cdcfe;\n            --token-operator: #d4d4d4;\n            --token-punctuation: #d4d4d4;\n            --token-class-name: #4ec9b0;\n            position: relative;\n            width: 1920px;\n            height: 1080px;\n            overflow: hidden;\n            background:\n              linear-gradient(180deg, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.32)),\n              url(\"/public/catalog/assets/056cc5ffda649bc6.jpeg\") center / cover no-repeat;\n            color: var(--editor-fg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .scene-content {\n            position: relative;\n            z-index: 1;\n            width: 100%;\n            height: 100%;\n            padding: 54px 70px 92px;\n            display: flex;\n            flex-direction: column;\n            gap: 16px;\n            perspective: 2200px;\n            perspective-origin: 56% 52%;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .header {\n            display: flex;\n            align-items: end;\n            justify-content: space-between;\n            min-height: 66px;\n            text-shadow:\n              0 2px 12px rgba(0, 0, 0, 0.42),\n              0 14px 34px rgba(0, 0, 0, 0.32);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .kicker {\n            margin: 0 0 7px;\n            color: var(--gutter-fg);\n            font-size: 15px;\n            font-weight: 650;\n            text-transform: uppercase;\n            text-shadow:\n              0 2px 8px rgba(0, 0, 0, 0.48),\n              0 10px 26px rgba(0, 0, 0, 0.36);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .title {\n            margin: 0;\n            color: var(--editor-fg);\n            font-size: 44px;\n            line-height: 1;\n            font-weight: 760;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .source-note {\n            width: 510px;\n            color: var(--gutter-fg);\n            font-size: 16px;\n            line-height: 1.35;\n            text-align: right;\n            text-shadow:\n              0 2px 10px rgba(0, 0, 0, 0.46),\n              0 12px 30px rgba(0, 0, 0, 0.34);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .workbench {\n            height: 824px;\n            display: grid;\n            grid-template-columns: 54px 290px 1fr;\n            grid-template-rows: 36px 1fr 26px;\n            overflow: hidden;\n            border: 1px solid var(--sidebar-border);\n            border-radius: 8px;\n            background: var(--editor-bg);\n            box-shadow: 0 34px 90px rgba(0, 0, 0, 0.42);\n            transform: translateZ(0);\n            transform-origin: 82% 50%;\n            transform-style: preserve-3d;\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .titlebar {\n            grid-column: 1 / -1;\n            display: grid;\n            grid-template-columns: 120px 1fr 210px;\n            align-items: center;\n            background: var(--title-bg);\n            color: var(--title-fg);\n            border-bottom: 1px solid var(--tab-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .traffic {\n            display: flex;\n            gap: 8px;\n            padding-left: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .traffic span {\n            width: 12px;\n            height: 12px;\n            border-radius: 999px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .traffic span:nth-child(1) {\n            background: #ff5f57;\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .traffic span:nth-child(2) {\n            background: #ffbd2e;\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .traffic span:nth-child(3) {\n            background: #28c840;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .window-title {\n            justify-self: center;\n            opacity: 0.84;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .command-center {\n            justify-self: end;\n            width: 176px;\n            height: 22px;\n            margin-right: 16px;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            border: 1px solid color-mix(in srgb, var(--title-fg), transparent 78%);\n            border-radius: 5px;\n            color: color-mix(in srgb, var(--title-fg), transparent 18%);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .activity {\n            grid-row: 2 / 3;\n            background: var(--activity-bg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            padding: 10px 0;\n            gap: 18px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .activity-icon {\n            width: 28px;\n            height: 28px;\n            color: var(--activity-muted);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .activity-icon.active {\n            color: var(--activity-fg);\n            border-left: 2px solid var(--activity-active);\n            padding-left: 4px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .sidebar {\n            grid-row: 2 / 3;\n            background: var(--sidebar-bg);\n            color: var(--sidebar-fg);\n            border-right: 1px solid var(--sidebar-border);\n            display: flex;\n            flex-direction: column;\n            min-width: 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .sidebar-title {\n            height: 38px;\n            display: flex;\n            align-items: center;\n            padding: 0 20px;\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .section-title {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 6px;\n            padding: 0 14px;\n            background: color-mix(in srgb, var(--sidebar-bg), var(--sidebar-fg) 5%);\n            border-top: 1px solid var(--sidebar-border);\n            border-bottom: 1px solid var(--sidebar-border);\n            color: var(--sidebar-fg);\n            font-size: 11px;\n            font-weight: 700;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tree {\n            padding: 8px 0;\n            font-size: 13px;\n            line-height: 24px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tree-row {\n            height: 24px;\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 10px 0 18px;\n            color: color-mix(in srgb, var(--sidebar-fg), transparent 8%);\n            white-space: nowrap;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tree-row.child {\n            padding-left: 34px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tree-row.selected {\n            background: color-mix(in srgb, var(--sidebar-fg), transparent 88%);\n            color: var(--sidebar-fg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .editor-area {\n            grid-row: 2 / 3;\n            display: grid;\n            grid-template-rows: 36px 30px 1fr 138px;\n            min-width: 0;\n            background: var(--editor-bg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tabs {\n            display: flex;\n            background: var(--tab-bg);\n            border-bottom: 1px solid var(--tab-border);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tab {\n            width: 205px;\n            height: 36px;\n            display: flex;\n            align-items: center;\n            gap: 8px;\n            padding: 0 13px;\n            border-right: 1px solid var(--tab-border);\n            background: var(--tab-active-bg);\n            color: var(--tab-active-fg);\n            border-top: 2px solid var(--activity-active);\n            font-size: 13px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tab.inactive {\n            background: var(--tab-bg);\n            color: var(--tab-inactive-fg);\n            border-top-color: transparent;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .breadcrumbs {\n            display: flex;\n            align-items: center;\n            gap: 7px;\n            padding: 0 18px;\n            color: var(--gutter-fg);\n            border-bottom: 1px solid color-mix(in srgb, var(--tab-border), transparent 20%);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .editor {\n            position: relative;\n            overflow: hidden;\n            background: var(--editor-bg);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 18px;\n            line-height: 1.52;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .active-line {\n            position: absolute;\n            left: 0;\n            right: 0;\n            top: 0;\n            height: 28px;\n            background: var(--editor-line);\n            will-change: transform;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .code {\n            position: relative;\n            padding: 20px 36px 18px 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .line {\n            height: 28px;\n            display: grid;\n            grid-template-columns: 72px 1fr;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .line-number {\n            padding-right: 18px;\n            color: var(--gutter-fg);\n            text-align: right;\n            user-select: none;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .line.is-active .line-number {\n            color: var(--gutter-active-fg);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .line-code {\n            white-space: pre;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .char {\n            opacity: 0;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-comment {\n            color: var(--token-comment);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-keyword {\n            color: var(--token-keyword);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-function {\n            color: var(--token-function);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-string {\n            color: var(--token-string);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-number {\n            color: var(--token-number);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-variable {\n            color: var(--token-variable);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-parameter {\n            color: var(--token-parameter);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-operator {\n            color: var(--token-operator);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-punctuation {\n            color: var(--token-punctuation);\n          }\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .tok-class-name {\n            color: var(--token-class-name);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .caret {\n            position: absolute;\n            left: 0;\n            top: 0;\n            z-index: 3;\n            display: block;\n            width: 2px;\n            height: 22px;\n            background: var(--editor-fg);\n            pointer-events: none;\n            will-change: transform, opacity;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .terminal {\n            display: grid;\n            grid-template-rows: 32px 1fr;\n            background: var(--panel-bg);\n            border-top: 1px solid var(--panel-border);\n            color: var(--editor-fg);\n            font-family: Menlo, Monaco, Consolas, \"Courier New\", monospace;\n            font-size: 14px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .panel-tabs {\n            display: flex;\n            align-items: center;\n            gap: 22px;\n            padding: 0 18px;\n            border-bottom: 1px solid var(--panel-border);\n            color: var(--gutter-fg);\n            font-family:\n              Inter,\n              -apple-system,\n              BlinkMacSystemFont,\n              \"Segoe UI\",\n              sans-serif;\n            font-size: 12px;\n            text-transform: uppercase;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .panel-tabs .active {\n            color: var(--editor-fg);\n            border-bottom: 1px solid var(--activity-active);\n            height: 32px;\n            display: flex;\n            align-items: center;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .terminal-body {\n            padding: 12px 20px;\n            color: var(--editor-fg);\n            line-height: 1.8;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .prompt {\n            color: var(--token-function);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .statusbar {\n            grid-column: 1 / -1;\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            background: var(--status-bg);\n            color: var(--status-fg);\n            border-top: 1px solid var(--status-border);\n            font-size: 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .status-left,\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .status-right {\n            display: flex;\n            align-items: center;\n            gap: 18px;\n            padding: 0 12px;\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] .remote {\n            align-self: stretch;\n            display: flex;\n            align-items: center;\n            padding: 0 12px;\n            margin-left: -12px;\n            background: var(--status-remote-bg, var(--activity-active));\n            color: var(--status-remote-fg, #ffffff);\n          }\n\n          [data-composition-id=\"code-snippet-visual-studio-light\"] svg {\n            display: block;\n          }</style>\n</head>\n<body>\n  <div data-composition-id=\"preview-root\" data-width=\"1920\" data-height=\"1080\" data-start=\"0\" data-duration=\"11\">\n    <div style=\"width:1920px;height:1080px\" data-composition-file=\"compositions/code-snippet-visual-studio-light.html\" data-composition-id=\"code-snippet-visual-studio-light\" data-start=\"0\" data-duration=\"11\" data-track-index=\"0\" data-width=\"1920\" data-height=\"1080\"><div class=\"vscode-theme-scene\" data-composition-id=\"vscode-visual-studio-light\" data-width=\"1920\" data-height=\"1080\"><head></head><body></body>\n        <main class=\"scene-content\">\n          <section class=\"header\">\n            <div>\n              <p class=\"kicker\">Official VS Code built-in theme</p>\n              <h1 class=\"title\"><span class=\"theme-label\">Visual Studio Light</span></h1>\n            </div>\n            <p class=\"source-note\">\n              Typing `functional_toolkit.py` with workbench colors from\n              <span class=\"theme-source\">light_vs.json</span>.\n            </p>\n          </section>\n\n          <section class=\"workbench\">\n            <div class=\"titlebar\">\n              <div class=\"traffic\"><span></span><span></span><span></span></div>\n              <div class=\"window-title\">functional-toolkit - Visual Studio Code</div>\n              <div class=\"command-center\">Search</div>\n            </div>\n\n            <aside class=\"activity\" aria-label=\"Activity bar\">\n              <svg class=\"activity-icon active\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"currentColor\" d=\"M4 4h7v7H4V4Zm9 0h7v7h-7V4ZM4 13h7v7H4v-7Zm9 0h7v7h-7v-7Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"m21 21-5.2-5.2M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M8 18 3 12l5-6m8 12 5-6-5-6\" />\n              </svg>\n              <svg class=\"activity-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                <path fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" d=\"M12 3v18m0-18 6 6m-6-6L6 9m6 12 6-6m-6 6-6-6\" />\n              </svg>\n            </aside>\n\n            <aside class=\"sidebar\">\n              <div class=\"sidebar-title\">Explorer</div>\n              <div class=\"section-title\">⌄ Functional Toolkit</div>\n              <div class=\"tree\">\n                <div class=\"tree-row\">⌄ src</div>\n                <div class=\"tree-row child selected\">◇ functional_toolkit.py</div>\n                <div class=\"tree-row child\">◇ test_toolkit.py</div>\n                <div class=\"tree-row\">◇ pyproject.toml</div>\n                <div class=\"tree-row\">◇ README.md</div>\n              </div>\n            </aside>\n\n            <section class=\"editor-area\">\n              <div class=\"tabs\">\n                <div class=\"tab\">◇ functional_toolkit.py</div>\n                <div class=\"tab inactive\">README.md</div>\n              </div>\n              <div class=\"breadcrumbs\">functional-toolkit › src › functional_toolkit.py</div>\n              <div class=\"editor\">\n                <div class=\"active-line\"></div>\n                <div class=\"code\"></div>\n              </div>\n              <div class=\"terminal\">\n                <div class=\"panel-tabs\">\n                  <span class=\"active\">Terminal</span><span>Problems</span><span>Output</span>\n                </div>\n                <div class=\"terminal-body\">\n                  <div><span class=\"prompt\">functional-toolkit %</span> python -m pytest</div>\n                  <div>collected 3 items</div>\n                  <div>tests/test_toolkit.py ... <span class=\"tok-comment\">passed</span></div>\n                </div>\n              </div>\n            </section>\n\n            <footer class=\"statusbar\">\n              <div class=\"status-left\">\n                <span class=\"remote\">main</span>\n                <span>0 errors</span>\n                <span>0 warnings</span>\n              </div>\n              <div class=\"status-right\">\n                <span>Ln 17, Col 1</span>\n                <span>Spaces: 4</span>\n                <span>UTF-8</span>\n                <span>Python 3.12</span>\n              </div>\n            </footer>\n          </section>\n        </main>\n        \n        \n        \n        \n      </div></div>\n  </div>\n  \n<script>window.__timelines = window.__timelines || {};\n    window.__timelines[\"preview-root\"] = gsap.timeline({ paused: true });\n;\n(function(){\n  var __hfCompId = \"vscode-visual-studio-light\";\n  var __hfTimelineCompId = \"code-snippet-visual-studio-light\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-visual-studio-light\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-visual-studio-light\\\"|'vscode-visual-studio-light')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          (() => {\n            const codeLines = [\n              [{ text: \"# A small functional toolkit\", token: \"comment\" }],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"pluck_deep\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"key\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"obj\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"k\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"k\", token: \"variable\" },\n                { text: \"]\", token: \"punctuation\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"key\", token: \"variable\" },\n                { text: \".split\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"'.'\", token: \"string\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"obj\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"compose\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"*\", token: \"operator\" },\n                { text: \"fns\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: \"return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"res\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"reduce\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"lambda\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"fn\", token: \"parameter\" },\n                { text: \": \", token: \"punctuation\" },\n                { text: \"fn\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"acc\", token: \"variable\" },\n                { text: \"), \", token: \"punctuation\" },\n                { text: \"fns\", token: \"variable\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"res\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [],\n              [\n                { text: \"def\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"unfold\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"f\", token: \"parameter\" },\n                { text: \", \", token: \"punctuation\" },\n                { text: \"seed\", token: \"parameter\" },\n                { text: \"):\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    \", token: \"plain\" },\n                { text: '\"\"\"Build a list by repeatedly applying f to a seed.\"\"\"', token: \"string\" },\n              ],\n              [\n                { text: \"    acc\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"[]\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"    while\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"True\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        result\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"f\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"seed\", token: \"variable\" },\n                { text: \")\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        if\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \" is \", token: \"keyword\" },\n                { text: \"None\", token: \"className\" },\n                { text: \":\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"            return\", token: \"keyword\" },\n                { text: \" \", token: \"plain\" },\n                { text: \"acc\", token: \"variable\" },\n              ],\n              [\n                { text: \"        acc\", token: \"variable\" },\n                { text: \".append\", token: \"function\" },\n                { text: \"(\", token: \"punctuation\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"0\", token: \"number\" },\n                { text: \"])\", token: \"punctuation\" },\n              ],\n              [\n                { text: \"        seed\", token: \"variable\" },\n                { text: \" = \", token: \"operator\" },\n                { text: \"result\", token: \"variable\" },\n                { text: \"[\", token: \"punctuation\" },\n                { text: \"1\", token: \"number\" },\n                { text: \"]\", token: \"punctuation\" },\n              ],\n              [],\n            ];\n\n            const fallback = {\n              \"activityBar.background\": \"#181818\",\n              \"activityBar.foreground\": \"#d7d7d7\",\n              \"activityBar.inactiveForeground\": \"#868686\",\n              \"activityBar.activeBorder\": \"#0078d4\",\n              \"sideBar.background\": \"#181818\",\n              \"sideBar.foreground\": \"#cccccc\",\n              \"sideBar.border\": \"#2b2b2b\",\n              \"tab.activeBackground\": \"#1f1f1f\",\n              \"tab.activeForeground\": \"#ffffff\",\n              \"tab.inactiveBackground\": \"#181818\",\n              \"tab.inactiveForeground\": \"#9d9d9d\",\n              \"tab.border\": \"#2b2b2b\",\n              \"editor.background\": \"#1f1f1f\",\n              \"editor.foreground\": \"#cccccc\",\n              \"editor.lineHighlightBackground\": \"#ffffff0a\",\n              \"editorLineNumber.foreground\": \"#6e7681\",\n              \"editorLineNumber.activeForeground\": \"#cccccc\",\n              \"panel.background\": \"#181818\",\n              \"panel.border\": \"#2b2b2b\",\n              \"statusBar.background\": \"#181818\",\n              \"statusBar.foreground\": \"#cccccc\",\n              \"statusBar.border\": \"#2b2b2b\",\n              \"titleBar.activeBackground\": \"#181818\",\n              \"titleBar.activeForeground\": \"#cccccc\",\n            };\n\n            function color(theme, key) {\n              return theme.colors[key] || fallback[key] || theme.colors.foreground || \"#cccccc\";\n            }\n\n            function solarizedGrey(theme) {\n              return (\n                theme.colors[\"tab.inactiveForeground\"] ||\n                theme.colors[\"editor.foreground\"] ||\n                \"#586E75\"\n              );\n            }\n\n            function setVar(root, name, value) {\n              root.style.setProperty(name, value);\n            }\n\n            function applyTheme(root, theme) {\n              const solarizedUiGrey = theme.id === \"solarized-light\" ? solarizedGrey(theme) : null;\n              setVar(root, \"--activity-bg\", color(theme, \"activityBar.background\"));\n              setVar(\n                root,\n                \"--activity-fg\",\n                solarizedUiGrey || color(theme, \"activityBar.foreground\"),\n              );\n              setVar(\n                root,\n                \"--activity-muted\",\n                solarizedUiGrey || color(theme, \"activityBar.inactiveForeground\"),\n              );\n              setVar(root, \"--activity-active\", color(theme, \"activityBar.activeBorder\"));\n              setVar(root, \"--sidebar-bg\", color(theme, \"sideBar.background\"));\n              setVar(root, \"--sidebar-fg\", solarizedUiGrey || color(theme, \"sideBar.foreground\"));\n              setVar(root, \"--sidebar-border\", color(theme, \"sideBar.border\"));\n              setVar(root, \"--tab-bg\", color(theme, \"tab.inactiveBackground\"));\n              setVar(root, \"--tab-active-bg\", color(theme, \"tab.activeBackground\"));\n              setVar(\n                root,\n                \"--tab-active-fg\",\n                solarizedUiGrey || color(theme, \"tab.activeForeground\"),\n              );\n              setVar(\n                root,\n                \"--tab-inactive-fg\",\n                solarizedUiGrey || color(theme, \"tab.inactiveForeground\"),\n              );\n              setVar(root, \"--tab-border\", color(theme, \"tab.border\"));\n              setVar(root, \"--editor-bg\", color(theme, \"editor.background\"));\n              setVar(root, \"--editor-fg\", color(theme, \"editor.foreground\"));\n              setVar(root, \"--editor-line\", color(theme, \"editor.lineHighlightBackground\"));\n              setVar(root, \"--gutter-fg\", color(theme, \"editorLineNumber.foreground\"));\n              setVar(root, \"--gutter-active-fg\", color(theme, \"editorLineNumber.activeForeground\"));\n              setVar(root, \"--panel-bg\", color(theme, \"panel.background\"));\n              setVar(root, \"--panel-border\", color(theme, \"panel.border\"));\n              setVar(root, \"--status-bg\", color(theme, \"statusBar.background\"));\n              setVar(root, \"--status-fg\", color(theme, \"statusBar.foreground\"));\n              setVar(root, \"--status-border\", color(theme, \"statusBar.border\"));\n              setVar(root, \"--status-remote-bg\", color(theme, \"statusBarItem.remoteBackground\"));\n              setVar(\n                root,\n                \"--status-remote-fg\",\n                solarizedUiGrey || color(theme, \"statusBarItem.remoteForeground\"),\n              );\n              setVar(root, \"--title-bg\", color(theme, \"titleBar.activeBackground\"));\n              setVar(\n                root,\n                \"--title-fg\",\n                solarizedUiGrey || color(theme, \"titleBar.activeForeground\"),\n              );\n              setVar(root, \"--token-comment\", theme.tokens.comment);\n              setVar(root, \"--token-keyword\", theme.tokens.keyword);\n              setVar(root, \"--token-function\", theme.tokens.function);\n              setVar(root, \"--token-string\", theme.tokens.string);\n              setVar(root, \"--token-number\", theme.tokens.number);\n              setVar(root, \"--token-variable\", theme.tokens.variable);\n              setVar(root, \"--token-parameter\", theme.tokens.parameter);\n              setVar(root, \"--token-operator\", theme.tokens.operator);\n              setVar(root, \"--token-punctuation\", theme.tokens.punctuation);\n              setVar(root, \"--token-class-name\", theme.tokens.className);\n            }\n\n            function renderCode(root) {\n              const code = root.querySelector(\".code\");\n              codeLines.forEach((segments, index) => {\n                const line = document.createElement(\"div\");\n                line.className = \"line\";\n                line.dataset.lineIndex = String(index);\n\n                const lineNumber = document.createElement(\"span\");\n                lineNumber.className = \"line-number\";\n                lineNumber.textContent = String(index + 1);\n                line.appendChild(lineNumber);\n\n                const lineCode = document.createElement(\"span\");\n                lineCode.className = \"line-code\";\n                segments.forEach((segment) => {\n                  [...segment.text].forEach((char) => {\n                    const span = document.createElement(\"span\");\n                    span.className =\n                      segment.token === \"plain\"\n                        ? \"char\"\n                        : \"char tok-\" +\n                          segment.token.replace(/[A-Z]/g, (match) => \"-\" + match.toLowerCase());\n                    span.dataset.lineIndex = String(index);\n                    span.textContent = char;\n                    lineCode.appendChild(span);\n                  });\n                });\n                line.appendChild(lineCode);\n                code.appendChild(line);\n              });\n\n              const caret = document.createElement(\"span\");\n              caret.className = \"caret\";\n              root.querySelector(\".editor\").appendChild(caret);\n            }\n\n            function caretPointForElement(editor, el) {\n              const editorBox = editor.getBoundingClientRect();\n              const charBox = el.getBoundingClientRect();\n              return {\n                x: charBox.right - editorBox.left + 2,\n                y: charBox.top - editorBox.top + 3,\n              };\n            }\n\n            function caretPointForLineStart(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              const codeBox = line.querySelector(\".line-code\").getBoundingClientRect();\n              return {\n                x: codeBox.left - editorBox.left,\n                y: lineBox.top - editorBox.top + 3,\n              };\n            }\n\n            function lineHighlightY(editor, line) {\n              const editorBox = editor.getBoundingClientRect();\n              const lineBox = line.getBoundingClientRect();\n              return lineBox.top - editorBox.top;\n            }\n\n            function buildTimeline(root, compositionId) {\n              const tl = gsap.timeline({ paused: true });\n              const editor = root.querySelector(\".editor\");\n              const caret = root.querySelector(\".caret\");\n              const activeLine = root.querySelector(\".active-line\");\n              const lineEls = gsap.utils.toArray(root.querySelectorAll(\".line\"));\n              const lineStartTimes = [];\n              const charSchedule = [];\n              let cursorTime = 0.95;\n\n              lineEls.forEach((line, lineIndex) => {\n                const lineChars = gsap.utils.toArray(line.querySelectorAll(\".char\"));\n                lineStartTimes[lineIndex] = cursorTime;\n                lineChars.forEach((char, charIndex) => {\n                  charSchedule.push({ char, time: cursorTime + charIndex * 0.012 });\n                });\n                cursorTime += Math.max(lineChars.length * 0.012, 0.08) + 0.045;\n              });\n\n              gsap.set(activeLine, { y: lineHighlightY(editor, lineEls[0]) });\n              gsap.set(caret, caretPointForLineStart(editor, lineEls[0]));\n\n              tl.from(\n                root.querySelector(\".header\"),\n                { y: 24, opacity: 0, duration: 0.45, ease: \"power3.out\" },\n                0,\n              );\n              tl.from(\n                root.querySelector(\".workbench\"),\n                { y: 42, opacity: 0, scale: 0.986, duration: 0.58, ease: \"power3.out\" },\n                0.1,\n              );\n              tl.from(activeLine, { opacity: 0, duration: 0.22, ease: \"power2.out\" }, 0.74);\n              lineStartTimes.forEach((time, lineIndex) => {\n                const line = lineEls[lineIndex];\n                tl.set(activeLine, { y: lineHighlightY(editor, line) }, time);\n                tl.set(caret, caretPointForLineStart(editor, line), time);\n                tl.call(\n                  () => {\n                    lineEls.forEach((item) => item.classList.toggle(\"is-active\", item === line));\n                  },\n                  [],\n                  time,\n                );\n              });\n              charSchedule.forEach(({ char, time }) => {\n                tl.set(char, { opacity: 1 }, time);\n                tl.set(caret, caretPointForElement(editor, char), time + 0.002);\n              });\n              tl.to(\n                root.querySelector(\".caret\"),\n                { opacity: 0, duration: 0.34, repeat: 25, yoyo: true, ease: \"steps(1)\" },\n                0.95,\n              );\n              tl.from(\n                root.querySelector(\".terminal\"),\n                { y: 140, opacity: 0, duration: 0.56, ease: \"power3.out\" },\n                7.55,\n              );\n              tl.from(\n                root.querySelector(\".terminal-body\").children,\n                { opacity: 0, y: 8, duration: 0.24, stagger: 0.16, ease: \"power2.out\" },\n                8.05,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: -10.5, z: 74, duration: 0.72, ease: \"power2.inOut\" },\n                9.35,\n              );\n              tl.to(\n                root.querySelector(\".workbench\"),\n                { rotateY: 0, z: 0, duration: 0.62, ease: \"power2.inOut\" },\n                10.08,\n              );\n\n              window.__timelines = window.__timelines || {};\n              window.__timelines[compositionId] = tl;\n\n              const previewTime = new URLSearchParams(window.location.search).get(\"t\");\n              if (previewTime !== null) {\n                tl.time(Number(previewTime));\n              }\n            }\n\n            window.createVSCodeThemeComposition = (compositionId, themeOrId) => {\n              const root =\n                document.querySelector(\n                  '[data-composition-id=\"' + compositionId + '\"] .vscode-theme-scene',\n                ) ||\n                document.querySelector(\n                  '.vscode-theme-scene[data-composition-id=\"' + compositionId + '\"]',\n                ) ||\n                document.querySelector('[data-composition-id=\"' + compositionId + '\"]');\n              const theme =\n                typeof themeOrId === \"string\"\n                  ? window.VSCODE_THEME_REGISTRY.find((item) => item.id === themeOrId)\n                  : themeOrId;\n              if (!root || !theme) return;\n              root.querySelector(\".theme-label\").textContent = theme.label;\n              root.querySelector(\".theme-source\").textContent = theme.sourceFile;\n              applyTheme(root, theme);\n              renderCode(root);\n              buildTimeline(root, compositionId);\n            };\n          })();\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();\n;\n(function(){\n  var __hfCompId = \"vscode-visual-studio-light\";\n  var __hfTimelineCompId = \"code-snippet-visual-studio-light\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = null;\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"code-snippet-visual-studio-light\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"vscode-visual-studio-light\\\"|'vscode-visual-studio-light')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vscode-visual-studio-light\"] =\n            window.__timelines[\"vscode-visual-studio-light\"] || gsap.timeline({ paused: true });\n          window.createVSCodeThemeComposition(\"vscode-visual-studio-light\", {\n            id: \"visual-studio-light\",\n            label: \"Visual Studio Light\",\n            sourceFile: \"light_vs.json\",\n            uiTheme: \"vs\",\n            colors: {\n              \"editor.background\": \"#FFFFFF\",\n              \"editor.foreground\": \"#000000\",\n              \"sideBarSectionHeader.background\": \"#0000\",\n              \"sideBarSectionHeader.border\": \"#61616130\",\n              \"sideBarTitle.foreground\": \"#6F6F6F\",\n              \"statusBarItem.remoteBackground\": \"#16825D\",\n              \"statusBarItem.remoteForeground\": \"#FFF\",\n            },\n            tokens: {\n              comment: \"#008000\",\n              keyword: \"#000000\",\n              function: \"#0451a5\",\n              string: \"#811f3f\",\n              number: \"#098658\",\n              variable: \"#0000ff\",\n              parameter: \"#9CDCFE\",\n              operator: \"#0000ff\",\n              punctuation: \"#800000\",\n              className: \"#0451a5\",\n            },\n          });\n        \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/code-typing.json b/docs/public/catalog/blocks/code-typing.json
new file mode 100644
index 0000000000..7285cd550e
--- /dev/null
+++ b/docs/public/catalog/blocks/code-typing.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Code Typing</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #05070b;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        font-family: \"JetBrains Mono\", monospace;\n        color: #e6edf3;\n      }\n      .bg-field {\n        position: absolute;\n        inset: 0;\n        background: radial-gradient(1200px 700px at 50% 18%, #0e1726 0%, #070b12 55%, #05070b 100%);\n      }\n      .bg-grid {\n        position: absolute;\n        inset: 0;\n        background-image:\n          linear-gradient(rgba(88, 166, 255, 0.05) 1px, transparent 1px),\n          linear-gradient(90deg, rgba(88, 166, 255, 0.05) 1px, transparent 1px);\n        background-size: 64px 64px;\n        mask-image: radial-gradient(1100px 620px at 50% 42%, #000 0%, transparent 78%);\n      }\n      .bg-glow {\n        position: absolute;\n        width: 900px;\n        height: 900px;\n        border-radius: 50%;\n        filter: blur(120px);\n        opacity: 0.5;\n      }\n      .bg-glow.a {\n        background: #1f6feb55;\n        left: -180px;\n        top: -200px;\n      }\n      .bg-glow.b {\n        background: #2ea04355;\n        right: -200px;\n        bottom: -260px;\n      }\n      .editor {\n        position: absolute;\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n        width: 1380px;\n        height: 800px;\n        background: #0b0f17;\n        border: 1px solid #1d2733;\n        border-radius: 16px;\n        box-shadow:\n          0 40px 120px rgba(0, 0, 0, 0.6),\n          0 2px 0 rgba(255, 255, 255, 0.03) inset;\n        overflow: hidden;\n        display: flex;\n        flex-direction: column;\n      }\n      .titlebar {\n        height: 56px;\n        flex: 0 0 56px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 0 22px;\n        background: linear-gradient(#11161f, #0c111a);\n        border-bottom: 1px solid #1b2430;\n      }\n      .dots {\n        display: flex;\n        gap: 10px;\n      }\n      .dot {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n      }\n      .dot.r {\n        background: #ff5f57;\n      }\n      .dot.y {\n        background: #febc2e;\n      }\n      .dot.g {\n        background: #28c840;\n      }\n      .filename {\n        font-size: 19px;\n        color: #8b98a9;\n        letter-spacing: 0.2px;\n      }\n      .filename .accent {\n        color: #d6e2f0;\n      }\n      .code-surface {\n        position: relative;\n        flex: 1 1 auto;\n        overflow: hidden;\n      }\n      .scene {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        will-change: opacity;\n      }\n      .code {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        right: 0;\n        padding: 0 44px 0 104px;\n        font-size: 30px;\n        line-height: 46px;\n        font-variant-ligatures: none;\n        tab-size: 2;\n      }\n      .gutter {\n        position: absolute;\n        top: 38px;\n        left: 0;\n        width: 84px;\n        padding-right: 18px;\n        font-size: 30px;\n        line-height: 46px;\n        text-align: right;\n        color: #828c9b;\n        user-select: none;\n      }\n      .ln {\n        display: block;\n        height: 46px;\n      }\n      .line {\n        display: block;\n        min-height: 46px;\n        white-space: pre;\n        position: relative;\n        z-index: 1;\n      }\n      .tok {\n        display: inline-block;\n        white-space: pre;\n        will-change: transform, opacity;\n      }\n      .caret {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 3px;\n        height: 32px;\n        margin-top: 6px;\n        background: #58a6ff;\n        border-radius: 1px;\n        z-index: 3;\n      }\n      .hl-box {\n        position: absolute;\n        background: rgba(88, 166, 255, 0.16);\n        border-left: 3px solid #58a6ff;\n        border-radius: 6px;\n        z-index: 0;\n        overflow: hidden;\n      }\n      .diff-line {\n        display: block;\n        min-height: 0;\n        line-height: 46px;\n        white-space: pre;\n        position: relative;\n        overflow: hidden;\n        padding-left: 14px;\n      }\n      .diff-sign {\n        display: inline-block;\n        width: 22px;\n        color: #41506220;\n      }\n      .diff-del {\n        background: rgba(248, 81, 73, 0.12);\n        box-shadow: inset 3px 0 #f85149;\n      }\n      .diff-add {\n        background: rgba(63, 185, 80, 0.12);\n        box-shadow: inset 3px 0 #3fb950;\n      }\n      .diff-del .diff-sign {\n        color: #f85149;\n      }\n      .diff-add .diff-sign {\n        color: #3fb950;\n      }\n      .flight-block {\n        position: absolute;\n        white-space: pre;\n        font-size: 27px;\n        line-height: 40px;\n        padding: 11px 22px;\n        border-radius: 11px;\n        background: #0f1722;\n        border: 1px solid #233044;\n        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5);\n        will-change: transform, opacity;\n      }\n      .flight-target {\n        position: absolute;\n        border: 1.5px dashed #2a3a4f;\n        border-radius: 14px;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"code-typing\"\n      data-start=\"0\"\n      data-duration=\"5\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"bg-field\" data-layout-ignore></div>\n      <div class=\"bg-grid\" data-layout-ignore></div>\n      <div class=\"bg-glow a\" data-layout-ignore></div>\n      <div class=\"bg-glow b\" data-layout-ignore></div>\n      <div class=\"editor\" id=\"editor\" data-layout-ignore>\n        <div class=\"titlebar\">\n          <div class=\"dots\">\n            <span class=\"dot r\"></span><span class=\"dot y\"></span><span class=\"dot g\"></span>\n          </div>\n          <span class=\"filename\"><span class=\"accent\">loadConfig.js</span> — Code Typing</span>\n        </div>\n        <div class=\"code-surface\" id=\"surface\"></div>\n      </div>\n    </div>\n    <script>\n      window.__TOKENS = {\n        feature: {\n          lang: \"js\",\n          theme: \"github-dark\",\n          bg: \"#24292e\",\n          fg: \"#e1e4e8\",\n          states: [\n            {\n              code: 'async function loadConfig(path) {\\n  const raw = await readFile(path, \"utf8\")\\n  const config = JSON.parse(raw)\\n  return validate(config)\\n}',\n              tokens: [\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-0\",\n                  content: \"async\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-1\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-2\",\n                  content: \"function\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-3\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-4\",\n                  content: \"loadConfig\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-5\",\n                  content: \"(\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-6\",\n                  content: \"path\",\n                  color: \"#FFAB70\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-7\",\n                  content: \") {\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-8\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-9\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-10\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-11\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-12\",\n                  content: \"raw\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-13\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-14\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-15\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-16\",\n                  content: \"await\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-17\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-18\",\n                  content: \"readFile\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-19\",\n                  content: \"(path,\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-20\",\n                  content: \" \",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-21\",\n                  content: '\"utf8\"',\n                  color: \"#9ECBFF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-22\",\n                  content: \")\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-23\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-24\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-25\",\n                  content: \"const\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-26\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-27\",\n                  content: \"config\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-28\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-29\",\n                  content: \"=\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-30\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-31\",\n                  content: \"JSON\",\n                  color: \"#79B8FF\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-32\",\n                  content: \".\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-33\",\n                  content: \"parse\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-34\",\n                  content: \"(raw)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-35\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-36\",\n                  content: \"  \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-37\",\n                  content: \"return\",\n                  color: \"#F97583\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-38\",\n                  content: \" \",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-39\",\n                  content: \"validate\",\n                  color: \"#B392F0\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-40\",\n                  content: \"(config)\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-41\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-42\",\n                  content: \"}\",\n                  color: \"#E1E4E8\",\n                  fontStyle: 0,\n                },\n                {\n                  key: \"SPx9u4TyzfMqSHpbjPHnWFQU8lPVEPieF6W5Vtu-bNA-43\",\n                  content: \"\\n\",\n                  color: \"#e1e4e8\",\n                  fontStyle: 0,\n                },\n              ],\n            },\n          ],\n        },\n      };\n      window.__BLOCK = { id: \"code-typing\", effect: \"typing\", seq: \"feature\", duration: 5 };\n    </script>\n    <script>\n      // hf-code-anim.js — self-contained code-animation engine for HyperFrames registry blocks.\n      //\n      // Reuses Shiki Magic Move's baked output (window.__TOKENS, baked at author time) and\n      // drives the animation as a PAUSED GSAP timeline the HyperFrames engine seeks per frame —\n      // NOT CSS transitions (those break under non-sequential frame seeking). FLIP measurement\n      // runs once inside document.fonts.ready (glyph metrics must be final). Each block sets\n      // window.__BLOCK = { id, effect, seq, line?, duration } and includes this engine; the\n      // engine builds one scene that fills the composition and registers window.__timelines[id].\n      (function () {\n        \"use strict\";\n        var T = window.__TOKENS || {};\n\n        function lineDiv() {\n          var d = document.createElement(\"div\");\n          d.className = \"line\";\n          return d;\n        }\n\n        // Render a code state's keyed tokens into codeEl as lines of inline-block .tok spans.\n        function renderState(codeEl, state) {\n          codeEl.textContent = \"\";\n          var keyToEl = new Map();\n          var line = lineDiv();\n          codeEl.appendChild(line);\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              line = lineDiv();\n              codeEl.appendChild(line);\n              continue;\n            }\n            var span = document.createElement(\"span\");\n            span.className = \"tok\";\n            span.textContent = t.content;\n            span.style.color = t.color;\n            if (t.fontStyle & 1) span.style.fontStyle = \"italic\";\n            if (t.fontStyle & 2) span.style.fontWeight = \"700\";\n            line.appendChild(span);\n            keyToEl.set(t.key, span);\n          }\n          var last = codeEl.lastChild;\n          if (last && last.className === \"line\" && last.children.length === 0)\n            codeEl.removeChild(last);\n          return keyToEl;\n        }\n\n        function rectsOf(keyToEl) {\n          var m = new Map();\n          keyToEl.forEach(function (el, k) {\n            var r = el.getBoundingClientRect();\n            m.set(k, { left: r.left, top: r.top });\n          });\n          return m;\n        }\n\n        function makeScene(surface, withGutter) {\n          var scene = document.createElement(\"div\");\n          scene.className = \"scene\";\n          if (withGutter) {\n            var g = document.createElement(\"div\");\n            g.className = \"gutter\";\n            scene.appendChild(g);\n          }\n          var code = document.createElement(\"div\");\n          code.className = \"code\";\n          scene.appendChild(code);\n          surface.appendChild(scene);\n          return { scene: scene, code: code, gutter: scene.querySelector(\".gutter\") };\n        }\n\n        function fillGutter(g, n) {\n          var html = \"\";\n          for (var i = 1; i <= n; i++) html += '<span class=\"ln\">' + i + \"</span>\";\n          g.innerHTML = html;\n        }\n\n        function splitLines(state) {\n          var lines = [{ text: \"\", tokens: [] }];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              lines.push({ text: \"\", tokens: [] });\n              continue;\n            }\n            var cur = lines[lines.length - 1];\n            cur.tokens.push(t);\n            cur.text += t.content;\n          }\n          if (lines.length && lines[lines.length - 1].tokens.length === 0) lines.pop();\n          return lines;\n        }\n\n        function lineDiff(a, b) {\n          var n = a.length;\n          var m = b.length;\n          var dp = [];\n          for (var i = 0; i <= n; i++) dp.push(new Array(m + 1).fill(0));\n          for (var i = n - 1; i >= 0; i--) {\n            for (var j = m - 1; j >= 0; j--) {\n              dp[i][j] =\n                a[i].text === b[j].text\n                  ? dp[i + 1][j + 1] + 1\n                  : Math.max(dp[i + 1][j], dp[i][j + 1]);\n            }\n          }\n          var ops = [];\n          var i = 0;\n          var j = 0;\n          while (i < n && j < m) {\n            if (a[i].text === b[j].text) {\n              ops.push({ type: \"same\", line: b[j] });\n              i++;\n              j++;\n            } else if (dp[i + 1][j] >= dp[i][j + 1]) {\n              ops.push({ type: \"del\", line: a[i] });\n              i++;\n            } else {\n              ops.push({ type: \"add\", line: b[j] });\n              j++;\n            }\n          }\n          while (i < n) ops.push({ type: \"del\", line: a[i++] });\n          while (j < m) ops.push({ type: \"add\", line: b[j++] });\n          return ops;\n        }\n\n        // ---- single-scene effect builders (fade in, play, hold to end) -------------\n        var FADE = 0.45;\n\n        function typing(tl, surface, state, start) {\n          var PER = 0.028; // seconds per character — smooth, fast typewriter\n          var parts = makeScene(surface, true);\n          var code = parts.code;\n\n          // Per-CHARACTER render (granular reveal reads smoother than per-token pops).\n          code.textContent = \"\";\n          var line = document.createElement(\"div\");\n          line.className = \"line\";\n          code.appendChild(line);\n          var chars = [];\n          for (var i = 0; i < state.tokens.length; i++) {\n            var t = state.tokens[i];\n            if (t.content === \"\\n\") {\n              line = document.createElement(\"div\");\n              line.className = \"line\";\n              code.appendChild(line);\n              continue;\n            }\n            for (var c = 0; c < t.content.length; c++) {\n              var span = document.createElement(\"span\");\n              span.className = \"tok\";\n              span.textContent = t.content[c];\n              span.style.color = t.color;\n              if (t.fontStyle & 1) span.style.fontStyle = \"italic\";\n              if (t.fontStyle & 2) span.style.fontWeight = \"700\";\n              line.appendChild(span);\n              chars.push({ el: span, ws: t.content[c] === \" \" });\n            }\n          }\n          var last = code.lastChild;\n          if (last && last.className === \"line\" && last.children.length === 0)\n            code.removeChild(last);\n\n          fillGutter(parts.gutter, code.querySelectorAll(\".line\").length);\n          var base = code.getBoundingClientRect();\n          var caret = document.createElement(\"div\");\n          caret.className = \"caret\";\n          code.appendChild(caret);\n\n          tl.set(parts.scene, { opacity: 0 }, 0);\n          tl.to(parts.scene, { opacity: 1, duration: FADE, ease: \"power1.out\" }, start);\n\n          var t0 = start + FADE;\n          if (chars.length) {\n            var r0 = chars[0].el.getBoundingClientRect();\n            tl.set(caret, { x: r0.left - base.left, y: r0.top - base.top, opacity: 1 }, 0);\n          }\n          chars.forEach(function (c, i) {\n            var at = t0 + i * PER;\n            tl.set(c.el, { opacity: 0 }, 0);\n            // soft per-char fade (overlaps neighbors → smooth wave); whitespace appears instantly\n            tl.to(c.el, { opacity: 1, duration: c.ws ? 0.01 : 0.12, ease: \"power1.out\" }, at);\n            // caret glides at constant speed to each char's right edge (linear = no stop-start jitter)\n            var r = c.el.getBoundingClientRect();\n            tl.to(\n              caret,\n              { x: r.right - base.left, y: r.top - base.top, duration: PER, ease: \"none\" },\n              at,\n            );\n          });\n        }\n\n        function buildEffect(tl, surface, spec) {\n          var start = 0.45;\n          var seq = T[spec.seq];\n          if (spec.effect === \"typing\") typing(tl, surface, seq.states[0], start);\n        }\n\n        function go() {\n          var spec = window.__BLOCK;\n          var surface = document.getElementById(\"surface\");\n          var root = document.getElementById(\"root\");\n          window.__timelines = window.__timelines || {};\n          var tl = gsap.timeline({ paused: true });\n          // Build inside fonts.ready (glyph metrics must be final), then register.\n          // Register ONLY after the timeline is fully built: the runtime's\n          // sub-composition readiness gate treats \"key present\" as \"ready\" and\n          // nests the child once. An empty timeline registered before this build\n          // would be nested empty and never re-nested → blank render when used as\n          // a sub-composition. See the contract in engine frameCapture.ts.\n          document.fonts.ready.then(function () {\n            tl.from(\"#editor\", { opacity: 0, scale: 0.985, duration: 0.5, ease: \"power2.out\" }, 0);\n            buildEffect(tl, surface, spec);\n            var dur = parseFloat(root.dataset.duration) || tl.duration();\n            tl.to({}, { duration: dur }, 0); // pad to full composition length\n            window.__timelines[\"code-typing\"] = tl; // register AFTER setup completes\n            if (typeof window.__hfForceTimelineRebind === \"function\") {\n              window.__hfForceTimelineRebind(); // re-nest now that we are populated\n            }\n          });\n        }\n\n        if (document.readyState === \"loading\") document.addEventListener(\"DOMContentLoaded\", go);\n        else go();\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/cross-warp-morph.json b/docs/public/catalog/blocks/cross-warp-morph.json
new file mode 100644
index 0000000000..f72e1c8ea9
--- /dev/null
+++ b/docs/public/catalog/blocks/cross-warp-morph.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #283618;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #a7c957;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #a7c957;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #a7c957;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #a7c957;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #a7c957;\n          background: rgba(167, 201, 87, 0.06);\n          border: 1px solid rgba(167, 201, 87, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #8aaa9a;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">13 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #283618\">\n        <div class=\"scene-label\" style=\"color: #a7c957\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #a7c957; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #283618\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Cross-Warp Morph</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use cross-warp morph shader transition\"</div>\n        <div class=\"bp-desc\">\n          Both scenes displace along a shared FBM noise field in opposite directions. Noise-driven\n          blend boundary.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var NQ =\n          \"float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\" +\n          \"float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);\" +\n          \"f=f*f*f*(f*(f*6.-15.)+10.);\" +\n          \"return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),\" +\n          \"mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}\" +\n          \"float fbm(vec2 p){float v=0.,a=.5;\" +\n          \"mat2 R=mat2(.8,.6,-.6,.8);\" +\n          \"for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            NQ +\n            \"void main(){vec2 disp=vec2(fbm(v_uv*3.),fbm(v_uv*3.+vec2(7.3,3.7)))-.5;vec2 fromUv=clamp(v_uv+disp*u_progress*.5,0.,1.);vec2 toUv=clamp(v_uv-disp*(1.-u_progress)*.5,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);float n=fbm(v_uv*4.+vec2(3.1,1.7));float blend=smoothstep(.4,.6,n+u_progress*1.2-.6);gl_FragColor=mix(A,B,blend);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/data-chart.json b/docs/public/catalog/blocks/data-chart.json
new file mode 100644
index 0000000000..a2a205f1a9
--- /dev/null
+++ b/docs/public/catalog/blocks/data-chart.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Data Chart</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&family=Libre+Franklin:wght@300;400;600&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #faf9f6;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"data-chart\"\n      data-composition-id=\"data-chart\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"15\"\n    >\n      <div class=\"chart-container\">\n        <!-- Header Section -->\n        <div class=\"header\">\n          <h1 class=\"headline\">Monthly Revenue vs. Conversion Rate</h1>\n          <p class=\"subtitle\">Jan–Jun 2024, in thousands</p>\n          <div class=\"key\">\n            <div class=\"key-item\">\n              <div class=\"key-box revenue-box\"></div>\n              <span class=\"key-text\">Revenue</span>\n            </div>\n            <div class=\"key-item\">\n              <div class=\"key-line conversion-line\"></div>\n              <span class=\"key-text\">Conversion Rate</span>\n            </div>\n          </div>\n        </div>\n\n        <!-- SVG Chart Area -->\n        <svg class=\"chart-svg\" viewBox=\"0 0 1600 700\" preserveAspectRatio=\"xMidYMid meet\">\n          <!-- Gridlines Group -->\n          <g class=\"gridlines\"></g>\n\n          <!-- X-Axis Labels -->\n          <g class=\"x-axis-labels\"></g>\n\n          <!-- Bars Group (Revenue) -->\n          <g class=\"bars-group\"></g>\n\n          <!-- Bar Labels Group -->\n          <g class=\"bar-labels-group\"></g>\n\n          <!-- Line Group (Conversion Rate) -->\n          <g class=\"line-group\">\n            <path class=\"conversion-path\" fill=\"none\" stroke=\"#326FA8\" stroke-width=\"1.5\" />\n            <circle class=\"line-dot\" r=\"5\" fill=\"#326FA8\" style=\"opacity: 0\" />\n          </g>\n\n          <!-- Line Labels Group -->\n          <g class=\"line-labels-group\"></g>\n\n          <!-- Baseline -->\n          <line x1=\"100\" y1=\"600\" x2=\"1500\" y2=\"600\" stroke=\"black\" stroke-width=\"1\" />\n        </svg>\n\n        <!-- Source Line -->\n        <div class=\"source\">Source: Internal analytics</div>\n      </div>\n\n      <style>\n        [data-composition-id=\"data-chart\"] {\n          width: 1920px;\n          height: 1080px;\n          background-color: #faf9f6;\n          font-family: \"Libre Franklin\", sans-serif;\n          color: #333;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          overflow: hidden;\n        }\n\n        [data-composition-id=\"data-chart\"] .chart-container {\n          width: 1600px;\n          height: 900px;\n          display: flex;\n          flex-direction: column;\n          position: relative;\n          transform: scale(1.15);\n          transform-origin: center center;\n        }\n\n        [data-composition-id=\"data-chart\"] .header {\n          margin-bottom: 40px;\n          text-align: left;\n        }\n\n        [data-composition-id=\"data-chart\"] .headline {\n          font-family: \"Libre Baskerville\", serif;\n          font-size: 42px;\n          margin: 0;\n          padding: 0;\n          clip-path: inset(0 100% 0 0);\n          white-space: nowrap;\n        }\n\n        [data-composition-id=\"data-chart\"] .subtitle {\n          font-size: 16px;\n          color: #666;\n          margin: 8px 0 16px 0;\n          clip-path: inset(0 100% 0 0);\n          white-space: nowrap;\n        }\n\n        [data-composition-id=\"data-chart\"] .key {\n          display: flex;\n          gap: 24px;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"data-chart\"] .key-item {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n        }\n\n        [data-composition-id=\"data-chart\"] .key-box {\n          width: 10px;\n          height: 10px;\n          background-color: #5c5c5c;\n        }\n\n        [data-composition-id=\"data-chart\"] .key-line {\n          width: 16px;\n          height: 1.5px;\n          background-color: #326fa8;\n        }\n\n        [data-composition-id=\"data-chart\"] .key-text {\n          font-size: 13px;\n          color: #666;\n        }\n\n        [data-composition-id=\"data-chart\"] .chart-svg {\n          width: 100%;\n          height: 600px;\n          overflow: visible;\n        }\n\n        [data-composition-id=\"data-chart\"] .source {\n          position: absolute;\n          bottom: 0;\n          left: 0;\n          font-size: 11px;\n          color: #999;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"data-chart\"] .grid-line {\n          stroke: #e8e8e8;\n          stroke-width: 0.5px;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"data-chart\"] .axis-label {\n          font-size: 14px;\n          fill: #666;\n          text-anchor: middle;\n        }\n\n        [data-composition-id=\"data-chart\"] .bar {\n          fill: #5c5c5c;\n        }\n\n        [data-composition-id=\"data-chart\"] .bar-label {\n          font-size: 14px;\n          fill: #333;\n          text-anchor: middle;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"data-chart\"] .line-label {\n          font-size: 14px;\n          fill: #326fa8;\n          font-weight: 600;\n          text-anchor: middle;\n          opacity: 0;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const svg = document.querySelector('[data-composition-id=\"data-chart\"] .chart-svg');\n          const tl = gsap.timeline({ paused: true });\n\n          // Data\n          const months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"];\n          const revenueData = [8, 12, 15, 11, 18, 22];\n          const conversionData = [2.1, 2.8, 3.2, 2.9, 3.8, 4.2];\n\n          // Chart Dimensions\n          const chartWidth = 1400;\n          const chartHeight = 500;\n          const startX = 100;\n          const startY = 600;\n          const barWidth = 80;\n          const spacing = (chartWidth - barWidth * months.length) / (months.length + 1);\n\n          // Scales\n          const maxRevenue = 25;\n          const maxConversion = 5;\n\n          const getBarY = (val) => startY - (val / maxRevenue) * chartHeight;\n          const getLineY = (val) => startY - (val / maxConversion) * chartHeight;\n          const getX = (i) => startX + spacing + i * (barWidth + spacing) + barWidth / 2;\n\n          // Setup Elements\n          const gridGroup = svg.querySelector(\".gridlines\");\n          const xAxisGroup = svg.querySelector(\".x-axis-labels\");\n          const barsGroup = svg.querySelector(\".bars-group\");\n          const barLabelsGroup = svg.querySelector(\".bar-labels-group\");\n          const lineLabelsGroup = svg.querySelector(\".line-labels-group\");\n          const conversionPath = svg.querySelector(\".conversion-path\");\n          const lineDot = svg.querySelector(\".line-dot\");\n\n          // Create Gridlines\n          for (let i = 1; i <= 5; i++) {\n            const y = startY - i * (chartHeight / 5);\n            const line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n            line.setAttribute(\"x1\", startX);\n            line.setAttribute(\"y1\", y);\n            line.setAttribute(\"x2\", startX + chartWidth);\n            line.setAttribute(\"y2\", y);\n            line.setAttribute(\"class\", \"grid-line\");\n            gridGroup.appendChild(line);\n          }\n\n          // Create X-Axis Labels & Bars & Bar Labels\n          const linePoints = [];\n          months.forEach((month, i) => {\n            const x = getX(i);\n\n            const label = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n            label.setAttribute(\"x\", x);\n            label.setAttribute(\"y\", startY + 30);\n            label.setAttribute(\"class\", \"axis-label\");\n            label.textContent = month;\n            xAxisGroup.appendChild(label);\n\n            const barHeight = (revenueData[i] / maxRevenue) * chartHeight;\n            const bar = document.createElementNS(\"http://www.w3.org/2000/svg\", \"rect\");\n            bar.setAttribute(\"x\", x - barWidth / 2);\n            bar.setAttribute(\"y\", startY);\n            bar.setAttribute(\"width\", barWidth);\n            bar.setAttribute(\"height\", 0);\n            bar.setAttribute(\"class\", \"bar\");\n            barsGroup.appendChild(bar);\n\n            const barLabel = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n            barLabel.setAttribute(\"x\", x);\n            barLabel.setAttribute(\"y\", getBarY(revenueData[i]) - 10);\n            barLabel.setAttribute(\"class\", \"bar-label\");\n            barLabel.textContent = `$${revenueData[i]}K`;\n            barLabelsGroup.appendChild(barLabel);\n\n            linePoints.push(`${x},${getLineY(conversionData[i])}`);\n\n            const lineLabel = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n            lineLabel.setAttribute(\"x\", x);\n            lineLabel.setAttribute(\"y\", getLineY(conversionData[i]) - 15);\n            lineLabel.setAttribute(\"class\", \"line-label\");\n            lineLabel.textContent = `${conversionData[i]}%`;\n            lineLabelsGroup.appendChild(lineLabel);\n          });\n\n          // Set Path Data\n          conversionPath.setAttribute(\"d\", `M ${linePoints.join(\" L \")}`);\n          const pathLength = conversionPath.getTotalLength();\n          conversionPath.style.strokeDasharray = pathLength;\n          conversionPath.style.strokeDashoffset = pathLength;\n\n          // --- ANIMATION TIMELINE ---\n\n          tl.to(\n            '[data-composition-id=\"data-chart\"] .headline',\n            {\n              clipPath: \"inset(0 0% 0 0)\",\n              duration: 1.2,\n              ease: \"power1.inOut\",\n            },\n            0,\n          );\n\n          tl.to(\n            '[data-composition-id=\"data-chart\"] .subtitle',\n            {\n              clipPath: \"inset(0 0% 0 0)\",\n              duration: 1.2,\n              ease: \"power1.inOut\",\n            },\n            0.2,\n          );\n\n          tl.to(\n            '[data-composition-id=\"data-chart\"] .key',\n            {\n              opacity: 1,\n              duration: 0.4,\n              ease: \"power2.out\",\n            },\n            1.0,\n          );\n\n          tl.to(\n            '[data-composition-id=\"data-chart\"] .grid-line',\n            {\n              opacity: 1,\n              duration: 0.5,\n              stagger: 0.25,\n              ease: \"power2.out\",\n            },\n            0.5,\n          );\n\n          // Bars\n          const bars = barsGroup.querySelectorAll(\".bar\");\n          const barLabels = barLabelsGroup.querySelectorAll(\".bar-label\");\n\n          bars.forEach((bar, i) => {\n            const barHeight = (revenueData[i] / maxRevenue) * chartHeight;\n            const startTime = 1.5 + i * 0.5;\n\n            tl.to(\n              bar,\n              {\n                attr: { height: barHeight, y: startY - barHeight },\n                duration: 0.8,\n                ease: \"power2.out\",\n              },\n              startTime,\n            );\n\n            tl.to(\n              barLabels[i],\n              {\n                opacity: 1,\n                duration: 0.3,\n                ease: \"power2.out\",\n              },\n              startTime + 0.8,\n            );\n          });\n\n          // Line\n          const lastBarStartTime = 1.5 + (months.length - 1) * 0.5;\n          const lineStartTime = lastBarStartTime + 0.5;\n\n          tl.to(\n            conversionPath,\n            {\n              strokeDashoffset: 0,\n              duration: 3,\n              ease: \"none\",\n            },\n            lineStartTime,\n          );\n\n          // Line Dot & Labels\n          tl.set(\n            lineDot,\n            {\n              opacity: 1,\n              attr: { cx: getX(0), cy: getLineY(conversionData[0]) },\n            },\n            lineStartTime,\n          );\n\n          const lineLabels = lineLabelsGroup.querySelectorAll(\".line-label\");\n          months.forEach((_, i) => {\n            if (i > 0) {\n              const x = getX(i);\n              const y = getLineY(conversionData[i]);\n              tl.to(\n                lineDot,\n                {\n                  attr: { cx: x, cy: y },\n                  duration: 3 / (months.length - 1),\n                  ease: \"none\",\n                },\n                lineStartTime + ((i - 1) / (months.length - 1)) * 3,\n              );\n            }\n\n            const labelTime = lineStartTime + (i / (months.length - 1)) * 3 + 0.2;\n\n            lineLabels[i].textContent = \"0.0%\";\n\n            tl.to(\n              lineLabels[i],\n              {\n                opacity: 1,\n                duration: 0.1,\n                ease: \"power2.out\",\n              },\n              labelTime,\n            );\n\n            const dummy = { val: 0 };\n            tl.to(\n              dummy,\n              {\n                val: conversionData[i],\n                duration: 0.8,\n                ease: \"power2.out\",\n                onUpdate: () => {\n                  lineLabels[i].textContent = dummy.val.toFixed(1) + \"%\";\n                },\n              },\n              labelTime,\n            );\n          });\n\n          // Source Line\n          tl.to(\n            '[data-composition-id=\"data-chart\"] .source',\n            {\n              opacity: 1,\n              duration: 0.5,\n              ease: \"power2.out\",\n            },\n            \">+0.5\",\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"data-chart\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/domain-warp-dissolve.json b/docs/public/catalog/blocks/domain-warp-dissolve.json
new file mode 100644
index 0000000000..26e3aa07fa
--- /dev/null
+++ b/docs/public/catalog/blocks/domain-warp-dissolve.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #0d1b2a;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #00f5d4;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #00f5d4;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #00f5d4;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #00f5d4;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #00f5d4;\n          background: rgba(0, 245, 212, 0.06);\n          border: 1px solid rgba(0, 245, 212, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #8aa8c0;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">01 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #0d1b2a\">\n        <div class=\"scene-label\" style=\"color: #00f5d4\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #00f5d4; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #0d1b2a\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Domain Warp Dissolve</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use domain warp dissolve shader transition\"</div>\n        <div class=\"bp-desc\">\n          Cascaded fbm(p + fbm(p)) displaces both scenes along a warp field. Iridescent\n          cosine-palette edge glow.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var NQ =\n          \"float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\" +\n          \"float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);\" +\n          \"f=f*f*f*(f*(f*6.-15.)+10.);\" +\n          \"return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),\" +\n          \"mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}\" +\n          \"float fbm(vec2 p){float v=0.,a=.5;\" +\n          \"mat2 R=mat2(.8,.6,-.6,.8);\" +\n          \"for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}\";\n        var CP =\n          \"vec3 palette(float t,vec3 a,vec3 b,vec3 c,vec3 d){\" + \"return a+b*cos(6.2832*(c*t+d));}\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            NQ +\n            CP +\n            \"void main(){vec2 q=vec2(fbm(v_uv*3.),fbm(v_uv*3.+vec2(5.2,1.3)));vec2 r=vec2(fbm(v_uv*3.+q*4.+vec2(1.7,9.2)),fbm(v_uv*3.+q*4.+vec2(8.3,2.8)));float n=fbm(v_uv*3.+r*2.);vec2 warpDir=(q-.5)*.4;vec4 A=texture2D(u_from,clamp(v_uv+warpDir*u_progress,0.,1.));vec4 B=texture2D(u_to,clamp(v_uv-warpDir*(1.-u_progress),0.,1.));float e=smoothstep(u_progress-.08,u_progress+.08,n);float ed=abs(n-u_progress);float em=smoothstep(.1,0.,ed)*(1.-step(1.,u_progress));vec3 ec=palette(ed*8.,vec3(.5),vec3(.5),vec3(1.),vec3(0.,.33,.67));gl_FragColor=vec4(mix(B,A,e).rgb+ec*em*2.,1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/editorial-flash-overlay.json b/docs/public/catalog/blocks/editorial-flash-overlay.json
new file mode 100644
index 0000000000..dfaf5b02f7
--- /dev/null
+++ b/docs/public/catalog/blocks/editorial-flash-overlay.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n  <head><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n    <meta charset=\"UTF-8\">\n    <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n    <style>*,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body,\n      #editorial-flash-demo {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #080808;\n      }\n\n      #ef-demo-backdrop,\n      #ef-demo-overlay {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      #ef-demo-backdrop {\n        object-fit: cover;\n      }\n\n*,\n      [data-composition-id=\"editorial-flash-overlay\"] *::before,\n      [data-composition-id=\"editorial-flash-overlay\"] *::after {\n        box-sizing: border-box;\n      }\n\n      [data-composition-id=\"editorial-flash-overlay\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"editorial-flash-overlay\"] > [data-hf-inner-root],\n      [data-composition-id=\"editorial-flash-overlay\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"editorial-flash-overlay\"] > [data-hf-inner-root] {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      [data-composition-id=\"editorial-flash-overlay\"] #ef-flash {\n        --hf-editorial-flash-wash: 255 253 250;\n        --hf-editorial-flash-warm: 255 174 105;\n        --hf-editorial-flash-cool: 183 218 255;\n        position: absolute;\n        inset: -12%;\n        overflow: hidden;\n        pointer-events: none;\n      }\n\n      [data-composition-id=\"editorial-flash-overlay\"] #ef-flash .ef-layer {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        will-change: opacity, transform;\n      }\n\n      [data-composition-id=\"editorial-flash-overlay\"] #ef-wash {\n        background: rgb(var(--hf-editorial-flash-wash));\n      }\n\n      [data-composition-id=\"editorial-flash-overlay\"] #ef-core {\n        inset: -18%;\n        background: radial-gradient(\n          ellipse 68% 92% at 37% 47%,\n          rgb(255 255 255) 0%,\n          rgb(255 255 255 / 98%) 20%,\n          rgb(var(--hf-editorial-flash-wash) / 86%) 45%,\n          rgb(var(--hf-editorial-flash-warm) / 32%) 67%,\n          transparent 86%\n        );\n        mix-blend-mode: screen;\n        transform-origin: 38% 48%;\n      }\n\n      [data-composition-id=\"editorial-flash-overlay\"] #ef-sweep {\n        inset: -28%;\n        background: linear-gradient(\n          108deg,\n          transparent 21%,\n          rgb(var(--hf-editorial-flash-warm) / 10%) 38%,\n          rgb(var(--hf-editorial-flash-wash) / 90%) 49%,\n          rgb(255 255 255 / 98%) 53%,\n          rgb(var(--hf-editorial-flash-cool) / 24%) 62%,\n          transparent 79%\n        );\n        mix-blend-mode: screen;\n      }</style>\n  </head>\n  <body>\n    <div id=\"editorial-flash-demo\" data-composition-id=\"editorial-flash-demo\" data-start=\"0\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\">\n      <img id=\"ef-demo-backdrop\" class=\"clip\" src=\"/public/catalog/assets/035c4aed3d580776.jpg\" alt=\"\" data-start=\"0\" data-duration=\"4\" data-track-index=\"0\">\n      <div style=\"width:1920px;height:1080px\" data-composition-file=\"editorial-flash-overlay.html\" id=\"ef-demo-overlay\" data-composition-id=\"editorial-flash-overlay\" data-start=\"0\" data-duration=\"4\" data-track-index=\"1\" data-width=\"1920\" data-height=\"1080\"><div style=\"width:1920px;height:1080px\" data-hf-inner-root=\"true\" data-hf-authored-id=\"editorial-flash-overlay\" data-width=\"1920\" data-height=\"1080\">\n      <div id=\"ef-flash\" aria-hidden=\"true\">\n        <div id=\"ef-wash\" class=\"ef-layer\"></div>\n        <div id=\"ef-core\" class=\"ef-layer\" data-layout-allow-overflow=\"\"></div>\n        <div id=\"ef-sweep\" class=\"ef-layer\" data-layout-allow-overflow=\"\"></div>\n      </div>\n    </div></div>\n    </div>\n\n    \n  <script>var tl = gsap.timeline({ paused: true });\n      tl.to(\"#ef-demo-backdrop\", { scale: 1.035, duration: 4, ease: \"none\" }, 0);\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"editorial-flash-demo\"] = tl;\n;\n(function(){\n  var __hfCompId = \"editorial-flash-overlay\";\n  var __hfTimelineCompId = \"editorial-flash-overlay\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"editorial-flash-overlay\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"editorial-flash-overlay\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"editorial-flash-overlay\\\"|'editorial-flash-overlay')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"editorial-flash-overlay\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n      window.__timelines = window.__timelines || {};\n\n      var flash = document.getElementById(\"ef-flash\");\n      var host = flash && flash.closest(\"[data-composition-id]\");\n      if (!host) throw new Error(\"Editorial Flash could not find its composition host\");\n\n      var compositionId = host.getAttribute(\"data-composition-id\");\n      var duration = Number(host.getAttribute(\"data-duration\")) || 4;\n      var hit = Math.max(0.12, duration * 0.58);\n      var tl = gsap.timeline({ paused: true });\n\n      tl.to({}, { duration: duration, ease: \"none\" }, 0);\n      tl.to(\"#ef-wash\", { opacity: 0.92, duration: 0.04, ease: \"power4.in\" }, hit);\n      tl.fromTo(\n        \"#ef-core\",\n        { opacity: 0, scale: 0.86, rotation: -5 },\n        { opacity: 1, scale: 1, rotation: -5, duration: 0.05, ease: \"power4.in\" },\n        hit - 0.01,\n      );\n      tl.fromTo(\n        \"#ef-sweep\",\n        { opacity: 0, xPercent: -12, rotation: -2 },\n        { opacity: 0.9, xPercent: 8, rotation: -2, duration: 0.04, ease: \"power4.in\" },\n        hit,\n      );\n      tl.to(\"#ef-wash\", { opacity: 0, duration: 0.18, ease: \"power3.out\" }, hit + 0.04);\n      tl.to(\n        \"#ef-core\",\n        { opacity: 0, scale: 1.18, rotation: -5, duration: 0.34, ease: \"power2.out\" },\n        hit + 0.04,\n      );\n      tl.to(\n        \"#ef-sweep\",\n        { opacity: 0, xPercent: 28, rotation: -2, duration: 0.3, ease: \"power2.out\" },\n        hit + 0.04,\n      );\n\n      window.__timelines[compositionId] = tl;\n    \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/flash-through-white.json b/docs/public/catalog/blocks/flash-through-white.json
new file mode 100644
index 0000000000..79d27974ff
--- /dev/null
+++ b/docs/public/catalog/blocks/flash-through-white.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #03071e;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #ffba08;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #ffba08;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #ffba08;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #ffba08;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #ffba08;\n          background: rgba(255, 186, 8, 0.06);\n          border: 1px solid rgba(255, 186, 8, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #888;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">12 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #03071e\">\n        <div class=\"scene-label\" style=\"color: #ffba08\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #ffba08; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #03071e\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Flash Through White</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use flash through white shader transition\"</div>\n        <div class=\"bp-desc\">\n          Both scenes brighten to a white midpoint. Works on dark backgrounds where\n          color-dip-to-black is invisible.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);float toWhite=smoothstep(0.,.45,u_progress);vec3 fromC=mix(A.rgb,vec3(1.),toWhite);float fromWhite=1.-smoothstep(.5,1.,u_progress);vec3 toC=mix(B.rgb,vec3(1.),fromWhite);gl_FragColor=vec4(mix(fromC,toC,smoothstep(.35,.65,u_progress)),1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/flowchart-vertical.json b/docs/public/catalog/blocks/flowchart-vertical.json
new file mode 100644
index 0000000000..ed846c2fb7
--- /dev/null
+++ b/docs/public/catalog/blocks/flowchart-vertical.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1440, height=2560\" />\n    <title>Flowchart Vertical</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1440px;\n        height: 2560px;\n        overflow: hidden;\n        background-color: #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"flowchart-vertical\"\n      data-composition-id=\"flowchart-vertical\"\n      data-width=\"1440\"\n      data-height=\"2560\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"canvas\">\n        <svg class=\"connectors\" width=\"1440\" height=\"2560\" viewBox=\"0 0 1440 2560\">\n          <!-- Level 1 to 2 -->\n          <path\n            id=\"path-1-L\"\n            class=\"connector\"\n            d=\"M 720 210 L 720 360 L 440 360 L 440 530\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-1-R\"\n            class=\"connector\"\n            d=\"M 720 210 L 720 360 L 1000 360 L 1000 530\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Left side) -->\n          <path\n            id=\"path-2-LL\"\n            class=\"connector\"\n            d=\"M 440 590 L 440 760 L 280 760 L 280 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-LR\"\n            class=\"connector\"\n            d=\"M 440 590 L 440 760 L 600 760 L 600 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Right side) -->\n          <path\n            id=\"path-2-RL\"\n            class=\"connector\"\n            d=\"M 1000 590 L 1000 760 L 840 760 L 840 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-RR\"\n            class=\"connector\"\n            d=\"M 1000 590 L 1000 760 L 1160 760 L 1160 930\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n        </svg>\n\n        <div id=\"label-yes\" class=\"connector-label\">Yes</div>\n        <div id=\"label-not-sure\" class=\"connector-label\">Not sure</div>\n\n        <!-- Level 1 -->\n        <div id=\"node-root\" class=\"node yellow\" style=\"left: 720px; top: 180px\">\n          Should I learn to code?\n        </div>\n\n        <!-- Level 2 -->\n        <div id=\"node-yes\" class=\"node green\" style=\"left: 440px; top: 560px\">Yes</div>\n        <div id=\"node-not-sure\" class=\"node peach\" style=\"left: 1000px; top: 560px\">Not sure</div>\n\n        <!-- Level 3 -->\n        <div id=\"node-python\" class=\"node lavender\" style=\"left: 280px; top: 960px\">\n          <div style=\"position: relative; display: inline-block\">\n            <span id=\"python-text\">Start with Pythom</span>\n            <svg class=\"squiggle-container\" width=\"64\" height=\"6\" viewBox=\"0 0 64 6\">\n              <path\n                id=\"squiggle\"\n                d=\"M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3\"\n                fill=\"none\"\n                stroke=\"#E53935\"\n                stroke-width=\"2\"\n              />\n            </svg>\n          </div>\n        </div>\n        <div id=\"node-nocode\" class=\"node blue\" style=\"left: 600px; top: 960px\">\n          Try no-code first\n        </div>\n        <div id=\"node-website\" class=\"node pink\" style=\"left: 840px; top: 960px\">\n          Build a personal website\n        </div>\n        <div id=\"node-course\" class=\"node yellow\" style=\"left: 1160px; top: 960px\">\n          Take a free intro course\n        </div>\n\n        <!-- Cursor -->\n        <div id=\"cursor\" class=\"cursor-container\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z\"\n              fill=\"white\"\n              stroke=\"black\"\n            />\n          </svg>\n          <div class=\"cursor-tag\">You</div>\n        </div>\n\n        <!-- Emoji -->\n        <div id=\"emoji-thumb\" class=\"emoji\">👍</div>\n\n        <!-- Overlay -->\n        <div id=\"fade-overlay\"></div>\n      </div>\n\n      <style>\n        #flowchart-vertical {\n          width: 1440px;\n          height: 2560px;\n          background-color: #ffffff;\n          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);\n          background-size: 20px 20px;\n          position: absolute;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        #flowchart-vertical .canvas {\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          transform: none;\n          transform-origin: 720px 640px;\n        }\n\n        #flowchart-vertical .node {\n          position: absolute;\n          transform: translate(-50%, -50%) scale(0);\n          padding: 16px 24px;\n          border-radius: 12px;\n          font-size: 18px;\n          font-weight: 500;\n          color: #333;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          white-space: nowrap;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          z-index: 10;\n        }\n\n        #flowchart-vertical .node.yellow {\n          background-color: #e8d44d;\n        }\n        #flowchart-vertical .node.green {\n          background-color: #c2e8a0;\n        }\n        #flowchart-vertical .node.peach {\n          background-color: #f5c5a3;\n        }\n        #flowchart-vertical .node.lavender {\n          background-color: #d4c5f9;\n        }\n        #flowchart-vertical .node.blue {\n          background-color: #a8d8f0;\n        }\n        #flowchart-vertical .node.pink {\n          background-color: #f8b4c8;\n        }\n\n        #flowchart-vertical .connectors {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: 5;\n          pointer-events: none;\n        }\n\n        #flowchart-vertical .connector {\n          stroke-dasharray: 1000;\n          stroke-dashoffset: 1000;\n        }\n\n        #flowchart-vertical .connector-label {\n          position: absolute;\n          font-size: 14px;\n          font-weight: 600;\n          color: #333;\n          background: white;\n          padding: 2px 6px;\n          border-radius: 4px;\n          opacity: 0;\n          z-index: 6;\n          transform: translate(-50%, -50%);\n        }\n\n        #flowchart-vertical #label-yes {\n          left: 580px;\n          top: 420px;\n        }\n        #flowchart-vertical #label-not-sure {\n          left: 860px;\n          top: 420px;\n        }\n\n        #flowchart-vertical .cursor-container {\n          position: absolute;\n          left: 1440px;\n          top: 2560px;\n          z-index: 100;\n          pointer-events: none;\n          display: flex;\n          align-items: flex-start;\n        }\n\n        #flowchart-vertical .cursor-tag {\n          background-color: #9747ff;\n          color: white;\n          padding: 2px 8px;\n          border-radius: 4px;\n          font-size: 12px;\n          font-weight: 600;\n          margin-left: 4px;\n          margin-top: 12px;\n        }\n\n        #flowchart-vertical .squiggle-container {\n          position: absolute;\n          right: 0;\n          bottom: -4px;\n          opacity: 0;\n        }\n\n        #flowchart-vertical .emoji {\n          position: absolute;\n          font-size: 32px;\n          left: 390px;\n          top: 960px;\n          transform: translate(-50%, -50%) scale(0);\n          z-index: 20;\n        }\n\n        #flowchart-vertical #fade-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: white;\n          opacity: 0;\n          z-index: 1000;\n          pointer-events: none;\n        }\n\n        #flowchart-vertical .selection-border {\n          position: absolute;\n          top: -4px;\n          left: -4px;\n          right: -4px;\n          bottom: -4px;\n          border: 2px solid #0b84f3;\n          border-radius: 16px;\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        #flowchart-vertical .text-highlight {\n          background-color: #d0e4ff;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n          const S = \"#flowchart-vertical\";\n          const nodePython = document.querySelector(S + \" #node-python\");\n          const pythonText = document.querySelector(S + \" #python-text\");\n\n          // 1. Root node scales in\n          tl.to(S + \" #node-root\", { scale: 1, duration: 0.4, ease: \"power2.out\" });\n\n          // 2. Hold\n          tl.addLabel(\"hold1\", \"+=0.6\");\n\n          // 3. Connectors draw\n          tl.to(\n            S + \" .connector#path-1-L, \" + S + \" .connector#path-1-R\",\n            { strokeDashoffset: 0, duration: 0.5, ease: \"none\" },\n            \"hold1\",\n          );\n\n          tl.to(\n            S + \" #label-yes, \" + S + \" #label-not-sure\",\n            { opacity: 1, duration: 0.2 },\n            \"hold1+=0.25\",\n          );\n\n          // 4. Level 2 nodes\n          tl.to(S + \" #node-yes\", { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" }, \"hold1+=0.4\");\n          tl.to(\n            S + \" #node-not-sure\",\n            { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n            \"hold1+=0.6\",\n          );\n\n          // 5. Hold\n          tl.addLabel(\"hold2\", \"+=0.5\");\n\n          // 6. Level 2→3 connectors\n          tl.to(\n            S +\n              \" .connector#path-2-LL, \" +\n              S +\n              \" .connector#path-2-LR, \" +\n              S +\n              \" .connector#path-2-RL, \" +\n              S +\n              \" .connector#path-2-RR\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"none\" },\n            \"hold2\",\n          );\n\n          // 7. Leaf nodes\n          const leafNodes = [\n            S + \" #node-python\",\n            S + \" #node-nocode\",\n            S + \" #node-website\",\n            S + \" #node-course\",\n          ];\n          leafNodes.forEach((id, i) => {\n            tl.to(\n              id,\n              { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n              `hold2+=${0.3 + i * 0.15}`,\n            );\n          });\n\n          tl.to(S + \" .squiggle-container\", { opacity: 1, duration: 0.1 }, \"hold2+=0.3\");\n\n          // 8. Hold\n          tl.addLabel(\"hold3\", \"+=0.8\");\n\n          // 9. Cursor drifts in\n          tl.to(S + \" #cursor\", { x: -1110, y: -1560, duration: 1, ease: \"power1.inOut\" }, \"hold3\");\n\n          // 10. Cursor clicks — selection border\n          tl.add(() => {\n            if (!nodePython) return;\n            if (!nodePython.querySelector(\".selection-border\")) {\n              const border = document.createElement(\"div\");\n              border.className = \"selection-border\";\n              nodePython.appendChild(border);\n            }\n            gsap.set(S + \" .selection-border\", { opacity: 1 });\n          }, \"hold3+=1\");\n\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold3+=1\",\n          );\n\n          // 11. Hold\n          tl.addLabel(\"hold4\", \"+=0.3\");\n\n          // 12. Double-click to highlight \"Pythom\"\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: \"auto\" },\n            \"hold4\",\n          );\n          tl.add(() => {\n            if (!pythonText) return;\n            pythonText.innerHTML = 'Start with <span class=\"text-highlight\">Pythom</span>';\n          }, \"hold4+=0.1\");\n\n          // 13. Hold\n          tl.addLabel(\"hold5\", \"+=0.2\");\n\n          // 14. Type correction: \"Pythom\" → \"Python\" — positioned relative to the \"hold5\"\n          // label. Reading tl.labels back is unavailable under the render compiler's GSAP\n          // proxy (it throws before the timeline is registered, leaving the block blank),\n          // so use GSAP's own label-relative position syntax instead.\n          const words = [\"P\", \"Py\", \"Pyt\", \"Pyth\", \"Pytho\", \"Python\"];\n          words.forEach((word, i) => {\n            tl.add(\n              () => {\n                if (pythonText)\n                  pythonText.innerHTML = `Start with <span class=\"text-highlight\">${word}</span>`;\n              },\n              `hold5+=${i * 0.05}`,\n            );\n          });\n\n          const typingEnd = words.length * 0.05;\n          tl.add(() => {\n            if (pythonText) pythonText.innerHTML = \"Start with Python\";\n            gsap.set(S + \" .squiggle-container\", { opacity: 0 });\n          }, `hold5+=${typingEnd}`);\n\n          // 15. Hold\n          tl.addLabel(\"hold6\", `hold5+=${typingEnd + 0.5}`);\n\n          // 16. Cursor clicks away to deselect\n          tl.to(S + \" #cursor\", { x: -1050, y: -1520, duration: 0.3, overwrite: \"auto\" }, \"hold6\");\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold6+=0.3\",\n          );\n          tl.to(S + \" .selection-border\", { opacity: 0, duration: 0.1 }, \"hold6+=0.3\");\n\n          // 17. Emoji pop\n          tl.to(\n            S + \" #emoji-thumb\",\n            { scale: 1, duration: 0.15, ease: \"back.out(2)\" },\n            \"hold6+=0.4\",\n          );\n\n          // 18. Hold\n          tl.addLabel(\"hold7\", \"+=2\");\n\n          // 19. Fade out\n          tl.to(S + \" #fade-overlay\", { opacity: 1, duration: 0.5 }, \"hold7\");\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"flowchart-vertical\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/flowchart.json b/docs/public/catalog/blocks/flowchart.json
new file mode 100644
index 0000000000..4e207b91b0
--- /dev/null
+++ b/docs/public/catalog/blocks/flowchart.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Flowchart</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"flowchart\"\n      data-composition-id=\"flowchart\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"canvas\">\n        <svg class=\"connectors\" width=\"1920\" height=\"1080\" viewBox=\"0 0 1920 1080\">\n          <!-- Level 1 to 2 -->\n          <path\n            id=\"path-1-L\"\n            class=\"connector\"\n            d=\"M 960 130 L 960 200 L 600 200 L 600 270\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-1-R\"\n            class=\"connector\"\n            d=\"M 960 130 L 960 200 L 1320 200 L 1320 270\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Left side) -->\n          <path\n            id=\"path-2-LL\"\n            class=\"connector\"\n            d=\"M 600 330 L 600 400 L 400 400 L 400 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-LR\"\n            class=\"connector\"\n            d=\"M 600 330 L 600 400 L 800 400 L 800 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n\n          <!-- Level 2 to 3 (Right side) -->\n          <path\n            id=\"path-2-RL\"\n            class=\"connector\"\n            d=\"M 1320 330 L 1320 400 L 1120 400 L 1120 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n          <path\n            id=\"path-2-RR\"\n            class=\"connector\"\n            d=\"M 1320 330 L 1320 400 L 1520 400 L 1520 470\"\n            fill=\"none\"\n            stroke=\"#333\"\n            stroke-width=\"4\"\n          />\n        </svg>\n\n        <div id=\"label-yes\" class=\"connector-label\">Yes</div>\n        <div id=\"label-not-sure\" class=\"connector-label\">Not sure</div>\n\n        <!-- Level 1 -->\n        <div id=\"node-root\" class=\"node yellow\" style=\"left: 960px; top: 100px\">\n          Should I learn to code?\n        </div>\n\n        <!-- Level 2 -->\n        <div id=\"node-yes\" class=\"node green\" style=\"left: 600px; top: 300px\">Yes</div>\n        <div id=\"node-not-sure\" class=\"node peach\" style=\"left: 1320px; top: 300px\">Not sure</div>\n\n        <!-- Level 3 -->\n        <div id=\"node-python\" class=\"node lavender\" style=\"left: 400px; top: 500px\">\n          <div style=\"position: relative; display: inline-block\">\n            <span id=\"python-text\">Start with Pythom</span>\n            <svg class=\"squiggle-container\" width=\"64\" height=\"6\" viewBox=\"0 0 64 6\">\n              <path\n                id=\"squiggle\"\n                d=\"M 0 3 Q 2 0 4 3 T 8 3 T 12 3 T 16 3 T 20 3 T 24 3 T 28 3 T 32 3 T 36 3 T 40 3 T 44 3 T 48 3 T 52 3 T 56 3 T 60 3 T 64 3\"\n                fill=\"none\"\n                stroke=\"#E53935\"\n                stroke-width=\"2\"\n              />\n            </svg>\n          </div>\n        </div>\n        <div id=\"node-nocode\" class=\"node blue\" style=\"left: 800px; top: 500px\">\n          Try no-code first\n        </div>\n        <div id=\"node-website\" class=\"node pink\" style=\"left: 1120px; top: 500px\">\n          Build a personal website\n        </div>\n        <div id=\"node-course\" class=\"node yellow\" style=\"left: 1520px; top: 500px\">\n          Take a free intro course\n        </div>\n\n        <!-- Cursor -->\n        <div id=\"cursor\" class=\"cursor-container\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M5.65376 12.3673H5.46026L5.31717 12.4976L0.500002 16.8829L0.500002 1.19841L11.7841 12.3673H5.65376Z\"\n              fill=\"white\"\n              stroke=\"black\"\n            />\n          </svg>\n          <div class=\"cursor-tag\">You</div>\n        </div>\n\n        <!-- Emoji -->\n        <div id=\"emoji-thumb\" class=\"emoji\">👍</div>\n\n        <!-- Overlay -->\n        <div id=\"fade-overlay\"></div>\n      </div>\n\n      <style>\n        [data-composition-id=\"flowchart\"] {\n          width: 1920px;\n          height: 1080px;\n          background-color: #ffffff;\n          background-image: radial-gradient(#e5e5e5 1px, transparent 1px);\n          background-size: 20px 20px;\n          position: absolute;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"flowchart\"] .canvas {\n          width: 100%;\n          height: 100%;\n          position: absolute;\n          transform: scale(1.2);\n          transform-origin: 960px 300px;\n        }\n\n        [data-composition-id=\"flowchart\"] .node {\n          position: absolute;\n          transform: translate(-50%, -50%) scale(0);\n          padding: 16px 24px;\n          border-radius: 12px;\n          font-size: 18px;\n          font-weight: 500;\n          color: #333;\n          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n          white-space: nowrap;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          z-index: 10;\n        }\n\n        [data-composition-id=\"flowchart\"] .node.yellow {\n          background-color: #e8d44d;\n        }\n        [data-composition-id=\"flowchart\"] .node.green {\n          background-color: #c2e8a0;\n        }\n        [data-composition-id=\"flowchart\"] .node.peach {\n          background-color: #f5c5a3;\n        }\n        [data-composition-id=\"flowchart\"] .node.lavender {\n          background-color: #d4c5f9;\n        }\n        [data-composition-id=\"flowchart\"] .node.blue {\n          background-color: #a8d8f0;\n        }\n        [data-composition-id=\"flowchart\"] .node.pink {\n          background-color: #f8b4c8;\n        }\n\n        [data-composition-id=\"flowchart\"] .connectors {\n          position: absolute;\n          top: 0;\n          left: 0;\n          z-index: 5;\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"flowchart\"] .connector {\n          stroke-dasharray: 1000;\n          stroke-dashoffset: 1000;\n        }\n\n        [data-composition-id=\"flowchart\"] .connector-label {\n          position: absolute;\n          font-size: 14px;\n          font-weight: 600;\n          color: #333;\n          background: white;\n          padding: 2px 6px;\n          border-radius: 4px;\n          opacity: 0;\n          z-index: 6;\n          transform: translate(-50%, -50%);\n        }\n\n        [data-composition-id=\"flowchart\"] #label-yes {\n          left: 780px;\n          top: 230px;\n        }\n        [data-composition-id=\"flowchart\"] #label-not-sure {\n          left: 1140px;\n          top: 230px;\n        }\n\n        [data-composition-id=\"flowchart\"] .cursor-container {\n          position: absolute;\n          left: 1920px;\n          top: 1080px;\n          z-index: 100;\n          pointer-events: none;\n          display: flex;\n          align-items: flex-start;\n        }\n\n        [data-composition-id=\"flowchart\"] .cursor-tag {\n          background-color: #9747ff;\n          color: white;\n          padding: 2px 8px;\n          border-radius: 4px;\n          font-size: 12px;\n          font-weight: 600;\n          margin-left: 4px;\n          margin-top: 12px;\n        }\n\n        [data-composition-id=\"flowchart\"] .squiggle-container {\n          position: absolute;\n          right: 0;\n          bottom: -4px;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"flowchart\"] .emoji {\n          position: absolute;\n          font-size: 32px;\n          left: 510px;\n          top: 500px;\n          transform: translate(-50%, -50%) scale(0);\n          z-index: 20;\n        }\n\n        [data-composition-id=\"flowchart\"] #fade-overlay {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          background-color: white;\n          opacity: 0;\n          z-index: 1000;\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"flowchart\"] .selection-border {\n          position: absolute;\n          top: -4px;\n          left: -4px;\n          right: -4px;\n          bottom: -4px;\n          border: 2px solid #0b84f3;\n          border-radius: 16px;\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"flowchart\"] .text-highlight {\n          background-color: #d0e4ff;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n          const S = '[data-composition-id=\"flowchart\"]';\n          const nodePython = document.querySelector(S + \" #node-python\");\n          const pythonText = document.querySelector(S + \" #python-text\");\n\n          // 1. Root node scales in\n          tl.to(S + \" #node-root\", { scale: 1, duration: 0.4, ease: \"power2.out\" });\n\n          // 2. Hold\n          tl.addLabel(\"hold1\", \"+=0.6\");\n\n          // 3. Connectors draw\n          tl.to(\n            S + \" .connector#path-1-L, \" + S + \" .connector#path-1-R\",\n            { strokeDashoffset: 0, duration: 0.5, ease: \"none\" },\n            \"hold1\",\n          );\n\n          tl.to(\n            S + \" #label-yes, \" + S + \" #label-not-sure\",\n            { opacity: 1, duration: 0.2 },\n            \"hold1+=0.25\",\n          );\n\n          // 4. Level 2 nodes\n          tl.to(S + \" #node-yes\", { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" }, \"hold1+=0.4\");\n          tl.to(\n            S + \" #node-not-sure\",\n            { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n            \"hold1+=0.6\",\n          );\n\n          // 5. Hold\n          tl.addLabel(\"hold2\", \"+=0.5\");\n\n          // 6. Level 2→3 connectors\n          tl.to(\n            S +\n              \" .connector#path-2-LL, \" +\n              S +\n              \" .connector#path-2-LR, \" +\n              S +\n              \" .connector#path-2-RL, \" +\n              S +\n              \" .connector#path-2-RR\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"none\" },\n            \"hold2\",\n          );\n\n          // 7. Leaf nodes\n          const leafNodes = [\n            S + \" #node-python\",\n            S + \" #node-nocode\",\n            S + \" #node-website\",\n            S + \" #node-course\",\n          ];\n          leafNodes.forEach((id, i) => {\n            tl.to(\n              id,\n              { scale: 1, duration: 0.4, ease: \"back.out(1.7)\" },\n              `hold2+=${0.3 + i * 0.15}`,\n            );\n          });\n\n          tl.to(S + \" .squiggle-container\", { opacity: 1, duration: 0.1 }, \"hold2+=0.3\");\n\n          // 8. Hold\n          tl.addLabel(\"hold3\", \"+=0.8\");\n\n          // 9. Cursor drifts in\n          tl.to(S + \" #cursor\", { x: -1470, y: -540, duration: 1, ease: \"power1.inOut\" }, \"hold3\");\n\n          // 10. Cursor clicks — selection border\n          tl.add(() => {\n            if (!nodePython) return;\n            if (!nodePython.querySelector(\".selection-border\")) {\n              const border = document.createElement(\"div\");\n              border.className = \"selection-border\";\n              nodePython.appendChild(border);\n            }\n            gsap.set(S + \" .selection-border\", { opacity: 1 });\n          }, \"hold3+=1\");\n\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold3+=1\",\n          );\n\n          // 11. Hold\n          tl.addLabel(\"hold4\", \"+=0.3\");\n\n          // 12. Double-click to highlight \"Pythom\"\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 3, overwrite: \"auto\" },\n            \"hold4\",\n          );\n          tl.add(() => {\n            if (!pythonText) return;\n            pythonText.innerHTML = 'Start with <span class=\"text-highlight\">Pythom</span>';\n          }, \"hold4+=0.1\");\n\n          // 13. Hold\n          tl.addLabel(\"hold5\", \"+=0.2\");\n\n          // 14. Type correction: \"Pythom\" → \"Python\" — positioned relative to the \"hold5\"\n          // label. Reading tl.labels back is unavailable under the render compiler's GSAP\n          // proxy (it throws before the timeline is registered, leaving the block blank),\n          // so use GSAP's own label-relative position syntax instead.\n          const words = [\"P\", \"Py\", \"Pyt\", \"Pyth\", \"Pytho\", \"Python\"];\n          words.forEach((word, i) => {\n            tl.add(\n              () => {\n                if (pythonText)\n                  pythonText.innerHTML = `Start with <span class=\"text-highlight\">${word}</span>`;\n              },\n              `hold5+=${i * 0.05}`,\n            );\n          });\n\n          const typingEnd = words.length * 0.05;\n          tl.add(() => {\n            if (pythonText) pythonText.innerHTML = \"Start with Python\";\n            gsap.set(S + \" .squiggle-container\", { opacity: 0 });\n          }, `hold5+=${typingEnd}`);\n\n          // 15. Hold\n          tl.addLabel(\"hold6\", `hold5+=${typingEnd + 0.5}`);\n\n          // 16. Cursor clicks away to deselect\n          tl.to(S + \" #cursor\", { x: -1420, y: -500, duration: 0.3, overwrite: \"auto\" }, \"hold6\");\n          tl.to(\n            S + \" #cursor\",\n            { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: \"auto\" },\n            \"hold6+=0.3\",\n          );\n          tl.to(S + \" .selection-border\", { opacity: 0, duration: 0.1 }, \"hold6+=0.3\");\n\n          // 17. Emoji pop\n          tl.to(\n            S + \" #emoji-thumb\",\n            { scale: 1, duration: 0.15, ease: \"back.out(2)\" },\n            \"hold6+=0.4\",\n          );\n\n          // 18. Hold\n          tl.addLabel(\"hold7\", \"+=2\");\n\n          // 19. Fade out\n          tl.to(S + \" #fade-overlay\", { opacity: 1, duration: 0.5 }, \"hold7\");\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"flowchart\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/freeze-frame-dressing.json b/docs/public/catalog/blocks/freeze-frame-dressing.json
new file mode 100644
index 0000000000..cb26dc1170
--- /dev/null
+++ b/docs/public/catalog/blocks/freeze-frame-dressing.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n  <head><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n    <meta charset=\"UTF-8\">\n    <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n    <style>*,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body,\n      #freeze-frame-demo {\n        width: 960px;\n        height: 540px;\n        margin: 0;\n        overflow: hidden;\n        background: #111;\n      }\n\n      #freeze-demo-background,\n      #freeze-demo-cutout,\n      #freeze-demo-overlay {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      #freeze-demo-background {\n        object-fit: cover;\n        filter: saturate(0.28) contrast(1.1) brightness(0.72);\n        transform: scale(1.04) rotate(-0.4deg);\n      }\n\n      #freeze-demo-cutout {\n        z-index: 10;\n        object-fit: contain;\n        filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff)\n          drop-shadow(0 -3px 0 #fff) drop-shadow(14px 18px 8px rgb(16 18 23 / 46%));\n      }\n\n      #freeze-demo-overlay {\n        z-index: 20;\n      }\n\n*,\n      [data-composition-id=\"freeze-frame-dressing\"] *::before,\n      [data-composition-id=\"freeze-frame-dressing\"] *::after {\n        box-sizing: border-box;\n      }\n\n      [data-composition-id=\"freeze-frame-dressing\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"freeze-frame-dressing\"] > [data-hf-inner-root],\n      [data-composition-id=\"freeze-frame-dressing\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"freeze-frame-dressing\"] > [data-hf-inner-root] {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      [data-composition-id=\"freeze-frame-dressing\"] #hf-freeze-paper {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        background:\n          linear-gradient(115deg, rgb(248 84 73 / 86%) 0 16%, transparent 16%),\n          linear-gradient(345deg, rgb(255 221 82 / 92%) 0 17%, transparent 17%),\n          linear-gradient(rgb(244 240 224 / 78%), rgb(244 240 224 / 78%));\n        clip-path: polygon(2% 8%, 97% 2%, 94% 94%, 6% 98%);\n        mix-blend-mode: screen;\n        pointer-events: none;\n      }\n\n      [data-composition-id=\"freeze-frame-dressing\"] .hf-freeze-tape {\n        position: absolute;\n        width: 12.5vmin;\n        height: 2.9vmin;\n        opacity: 0;\n        background: rgb(255 236 168 / 76%);\n        border: 1px solid rgb(110 91 55 / 18%);\n        box-shadow: 0 0.3vmin 0.8vmin rgb(20 16 10 / 18%);\n        pointer-events: none;\n      }\n\n      [data-composition-id=\"freeze-frame-dressing\"] #hf-freeze-tape-a {\n        top: 8%;\n        left: 12.5%;\n        transform: rotate(-8deg);\n      }\n\n      [data-composition-id=\"freeze-frame-dressing\"] #hf-freeze-tape-b {\n        right: 12.5%;\n        bottom: 7%;\n        transform: rotate(7deg);\n      }\n\n      [data-composition-id=\"freeze-frame-dressing\"] #hf-freeze-flash {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        background: #fff;\n        pointer-events: none;\n      }</style>\n  </head>\n  <body>\n    <div id=\"freeze-frame-demo\" data-composition-id=\"freeze-frame-demo\" data-start=\"0\" data-duration=\"4\" data-width=\"960\" data-height=\"540\">\n      <img id=\"freeze-demo-background\" class=\"clip\" src=\"/public/catalog/assets/5771b437cfcf77fb.jpg\" alt=\"\" data-start=\"0\" data-duration=\"4\" data-track-index=\"0\">\n      <img id=\"freeze-demo-cutout\" class=\"clip\" src=\"/public/catalog/assets/47bad99ea6861b47.webp\" alt=\"\" data-start=\"0\" data-duration=\"4\" data-track-index=\"1\">\n      <div style=\"width:960px;height:540px\" data-composition-file=\"freeze-frame-dressing.html\" id=\"freeze-demo-overlay\" data-composition-id=\"freeze-frame-dressing\" data-start=\"0\" data-duration=\"4\" data-track-index=\"2\" data-width=\"960\" data-height=\"540\"><div style=\"width:1920px;height:1080px\" data-hf-inner-root=\"true\" data-hf-authored-id=\"freeze-frame-dressing\" data-width=\"1920\" data-height=\"1080\">\n      <div id=\"hf-freeze-paper\" aria-hidden=\"true\"></div>\n      <div id=\"hf-freeze-tape-a\" class=\"hf-freeze-tape\" aria-hidden=\"true\"></div>\n      <div id=\"hf-freeze-tape-b\" class=\"hf-freeze-tape\" aria-hidden=\"true\"></div>\n      <div id=\"hf-freeze-flash\" aria-hidden=\"true\"></div>\n    </div></div>\n    </div>\n\n    \n  <script>var tl = gsap.timeline({ paused: true });\n      tl.fromTo(\n        \"#freeze-demo-cutout\",\n        { y: 42, scale: 0.86, rotation: -2 },\n        { y: 0, scale: 1, rotation: 0.4, duration: 0.5, ease: \"back.out(1.35)\" },\n        1,\n      );\n      tl.to({}, { duration: 4, ease: \"none\" }, 0);\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"freeze-frame-demo\"] = tl;\n;\n(function(){\n  var __hfCompId = \"freeze-frame-dressing\";\n  var __hfTimelineCompId = \"freeze-frame-dressing\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"freeze-frame-dressing\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"freeze-frame-dressing\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"freeze-frame-dressing\\\"|'freeze-frame-dressing')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"freeze-frame-dressing\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n      window.__timelines = window.__timelines || {};\n\n      var paper = document.getElementById(\"hf-freeze-paper\");\n      var host = paper && paper.closest(\"[data-composition-id]\");\n      if (!host) throw new Error(\"Freeze-Frame Dressing could not find its composition host\");\n\n      var compositionId = host.getAttribute(\"data-composition-id\");\n      var duration = Number(host.getAttribute(\"data-duration\")) || 4;\n      var hit = Math.max(0.1, duration * 0.24);\n      var exit = Math.max(hit + 0.7, duration - 0.3);\n      var tl = gsap.timeline({ paused: true });\n\n      tl.to({}, { duration: duration, ease: \"none\" }, 0);\n      tl.to(\"#hf-freeze-flash\", { opacity: 0.95, duration: 0.06, ease: \"power2.out\" }, hit);\n      tl.to(\"#hf-freeze-flash\", { opacity: 0, duration: 0.24, ease: \"power2.in\" }, hit + 0.06);\n      tl.to(\"#hf-freeze-paper\", { opacity: 0.64, duration: 0.18, ease: \"power2.out\" }, hit + 0.04);\n      tl.fromTo(\n        \"#hf-freeze-tape-a\",\n        { opacity: 0, scale: 1.18 },\n        { opacity: 1, scale: 1, duration: 0.24, ease: \"power2.out\" },\n        hit + 0.3,\n      );\n      tl.fromTo(\n        \"#hf-freeze-tape-b\",\n        { opacity: 0, scale: 1.18 },\n        { opacity: 1, scale: 1, duration: 0.24, ease: \"power2.out\" },\n        hit + 0.42,\n      );\n      tl.to(\n        [\"#hf-freeze-paper\", \"#hf-freeze-tape-a\", \"#hf-freeze-tape-b\"],\n        { opacity: 0, duration: 0.24, ease: \"power2.in\" },\n        exit,\n      );\n\n      window.__timelines[compositionId] = tl;\n    \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/glitch.json b/docs/public/catalog/blocks/glitch.json
new file mode 100644
index 0000000000..54591811e3
--- /dev/null
+++ b/docs/public/catalog/blocks/glitch.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #293241;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #ee6c4d;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #ee6c4d;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #ee6c4d;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #ee6c4d;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #ee6c4d;\n          background: rgba(238, 108, 77, 0.06);\n          border: 1px solid rgba(238, 108, 77, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #98c1d9;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">09 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #293241\">\n        <div class=\"scene-label\" style=\"color: #ee6c4d\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #ee6c4d; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #293241\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Glitch</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use glitch shader transition\"</div>\n        <div class=\"bp-desc\">\n          Scan lines, block scramble, chromatic aberration, brightness flicker, and color\n          posterization.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"float rand(vec2 co){return fract(sin(dot(co,vec2(12.9898,78.233)))*43758.5453);}void main(){float inten=u_progress*(1.-u_progress)*4.;float lineY=floor(v_uv.y*60.)/60.;float lineDisp=(rand(vec2(lineY,floor(u_progress*17.)))-.5)*.18*inten;vec2 block=floor(v_uv*vec2(12.,8.));float br=rand(block+vec2(floor(u_progress*11.)));float ba=step(.83,br)*inten;vec2 bd=(vec2(rand(block*2.1),rand(block*3.7))-.5)*.35*ba;vec2 uv=clamp(v_uv+vec2(lineDisp,0.)+bd,0.,1.);float shift=inten*.035;float r=texture2D(u_from,uv+vec2(shift,0.)).r;float g=texture2D(u_from,uv).g;float b=texture2D(u_from,uv-vec2(shift,0.)).b;vec3 col=vec3(r,g,b);col-=step(.5,fract(v_uv.y*u_resolution.y*.5))*.05*inten;col*=1.+(rand(vec2(floor(u_progress*23.)))-.5)*.3*inten;float levels=mix(256.,8.,inten*.5);col=floor(col*levels)/levels;gl_FragColor=mix(vec4(col,1.),texture2D(u_to,v_uv),u_progress);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/gravitational-lens.json b/docs/public/catalog/blocks/gravitational-lens.json
new file mode 100644
index 0000000000..329297cd61
--- /dev/null
+++ b/docs/public/catalog/blocks/gravitational-lens.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #10002b;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #f20089;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #f20089;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #f20089;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #f20089;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #f20089;\n          background: rgba(242, 0, 137, 0.06);\n          border: 1px solid rgba(242, 0, 137, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #a080a0;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">06 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #10002b\">\n        <div class=\"scene-label\" style=\"color: #f20089\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #f20089; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #10002b\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Gravitational Lens</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use gravitational lens shader transition\"</div>\n        <div class=\"bp-desc\">\n          Content warps toward a gravity well with chromatic aberration and event horizon darkening.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"void main(){vec4 B=texture2D(u_to,v_uv);vec2 uv=v_uv-.5;float dist=length(uv);float pull=u_progress*2.;float warpStr=pull*.3/(dist+.1);vec2 warped=clamp(v_uv-uv*warpStr,0.,1.);vec4 A=texture2D(u_from,warped);float horizon=smoothstep(0.,.3,dist/(1.-u_progress*.85+.001));float shift=pull*.02/(dist+.2);float r=texture2D(u_from,clamp(v_uv-uv*(warpStr+shift),0.,1.)).r;float b=texture2D(u_from,clamp(v_uv-uv*(warpStr-shift),0.,1.)).b;vec3 lensed=vec3(r,A.g,b)*horizon;gl_FragColor=vec4(mix(lensed,B.rgb,smoothstep(.3,.9,u_progress)),1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/hw-frame.json b/docs/public/catalog/blocks/hw-frame.json
new file mode 100644
index 0000000000..f29076c9ee
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-frame.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #hw-fr-root {\n        --hw-font-print: \"Caveat\", cursive;\n        --hw-font-script: \"Caveat\", cursive;\n        --hw-ink: #f4f2ec;\n        --hw-accent-warm: #ffb020;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #1b1a1e;\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n      }\n      #hw-fr-media {\n        position: absolute;\n        overflow: hidden;\n        border-radius: 10px;\n      }\n      #hw-fr-media img,\n      #hw-fr-media .hw-fr-fill {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      .hw-fr-fill {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 700;\n        font-size: 110px;\n        color: rgba(244, 242, 236, 0.9);\n        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);\n      }\n      #hw-fr-svg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      #hw-fr-svg path {\n        fill: none;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      #hw-fr-border {\n        stroke: var(--hw-ink);\n        stroke-width: 7;\n      }\n      .hw-fr-doodle {\n        stroke: var(--hw-accent-warm);\n        stroke-width: 5;\n      }\n      #hw-fr-caption {\n        position: absolute;\n        width: 100%;\n        text-align: center;\n        font-weight: 700;\n        font-size: 58px;\n        color: var(--hw-ink);\n        opacity: 0;\n        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"hw-fr-root\"\n      data-composition-id=\"hw-frame\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"hw-fr-media\"></div>\n      <svg id=\"hw-fr-svg\" viewBox=\"0 0 1920 1080\"><path id=\"hw-fr-border\"></path></svg>\n      <div id=\"hw-fr-caption\"></div>\n      <div\n        id=\"hw-fr-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           A sketched frame: content inside a hand-drawn border with\n           corner doodles + optional caption. IMAGES ONLY inside this block\n           (learning: the runtime never seeks media elements inside\n           sub-compositions) — for live footage keep the media element in\n           the HOST root positioned over the documented media slot below;\n           layering two framed clips = instant PiP. */\n        var CONFIG = {\n          src: null, // IMAGE path; null -> stand-in gradient (demo)\n          slot: { x: 480, y: 180, w: 960, h: 620 }, // the media window (documented for host-side footage)\n          caption: \"our trip!\",\n          doodles: true, // corner sparks\n          tilt: -1.2, // deg — the whole framed unit sits slightly rotated\n          seed: 14,\n          boil: { enabled: true, amp: 1.6, rot: 0.35, frameDrop: 3 },\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 8;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var IN = clamp(DUR * 0.08, 0.3, 0.8);\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        /* hw family runtime */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n        window.hwWobbleRect = function (w, h, r, seed, amp) {\n          amp = amp === undefined ? 3.5 : amp;\n          function wob(n) {\n            return window.hwHash(n, seed) * amp;\n          }\n          var d = \"M \" + (r + wob(1)) + \" \" + wob(2);\n          d += \" L \" + (w / 2 + wob(3)) + \" \" + wob(4);\n          d += \" L \" + (w - r + wob(5)) + \" \" + wob(6);\n          d += \" Q \" + (w + wob(7)) + \" \" + wob(8) + \" \" + (w + wob(9)) + \" \" + (r + wob(10));\n          d += \" L \" + (w + wob(11)) + \" \" + (h / 2 + wob(12));\n          d += \" L \" + (w + wob(13)) + \" \" + (h - r + wob(14));\n          d +=\n            \" Q \" +\n            (w + wob(15)) +\n            \" \" +\n            (h + wob(16)) +\n            \" \" +\n            (w - r + wob(17)) +\n            \" \" +\n            (h + wob(18));\n          d += \" L \" + (w / 2 + wob(19)) + \" \" + (h + wob(20));\n          d += \" L \" + (r + wob(21)) + \" \" + (h + wob(22));\n          d += \" Q \" + wob(23) + \" \" + (h + wob(24)) + \" \" + wob(25) + \" \" + (h - r + wob(26));\n          d += \" L \" + wob(27) + \" \" + (h / 2 + wob(28));\n          d += \" L \" + wob(29) + \" \" + (r + wob(30));\n          d += \" Q \" + wob(31) + \" \" + wob(32) + \" \" + (r + wob(33)) + \" \" + wob(34);\n          return d;\n        };\n\n        var S = CONFIG.slot;\n        var media = document.getElementById(\"hw-fr-media\");\n        media.style.left = S.x + \"px\";\n        media.style.top = S.y + \"px\";\n        media.style.width = S.w + \"px\";\n        media.style.height = S.h + \"px\";\n        if (CONFIG.src) {\n          var img = document.createElement(\"img\");\n          img.src = CONFIG.src;\n          media.appendChild(img);\n        } else {\n          var d = document.createElement(\"div\");\n          d.className = \"hw-fr-fill\";\n          d.textContent = \"photo\";\n          media.appendChild(d);\n        }\n\n        /* border drawn slightly outside the slot */\n        var NS = \"http://www.w3.org/2000/svg\";\n        var border = document.getElementById(\"hw-fr-border\");\n        var m = 16;\n        border.setAttribute(\"d\", window.hwWobbleRect(S.w + m * 2, S.h + m * 2, 18, CONFIG.seed, 5));\n        border.setAttribute(\"transform\", \"translate(\" + (S.x - m) + \" \" + (S.y - m) + \")\");\n\n        /* corner doodles: little three-spark bursts */\n        var svg = document.getElementById(\"hw-fr-svg\");\n        var doodles = [];\n        if (CONFIG.doodles) {\n          [\n            [S.x - 40, S.y - 34],\n            [S.x + S.w + 40, S.y - 26],\n            [S.x + S.w + 36, S.y + S.h + 30],\n          ].forEach(function (pt, i) {\n            var p = document.createElementNS(NS, \"path\");\n            p.setAttribute(\"class\", \"hw-fr-doodle\");\n            p.setAttribute(\"id\", \"hw-fr-doodle-\" + i);\n            var dd = \"\";\n            for (var k = 0; k < 3; k++) {\n              var a = -0.6 - k * 0.5 + window.hwHash(i * 9 + k, CONFIG.seed) * 0.2;\n              var l = 26 + window.hwHash(i * 9 + k + 4, CONFIG.seed) * 8;\n              dd +=\n                \"M \" +\n                pt[0] +\n                \" \" +\n                pt[1] +\n                \" l \" +\n                (Math.cos(a) * l).toFixed(1) +\n                \" \" +\n                (Math.sin(a) * l).toFixed(1) +\n                \" \";\n            }\n            p.setAttribute(\"d\", dd);\n            svg.appendChild(p);\n            doodles.push(p);\n          });\n        }\n\n        var caption = document.getElementById(\"hw-fr-caption\");\n        caption.textContent = CONFIG.caption || \"\";\n        caption.style.top = S.y + S.h + 42 + \"px\";\n\n        var tl = gsap.timeline({ paused: true });\n\n        if (CONFIG.animationIn) {\n          gsap.set(media, { opacity: 0, scale: 0.96 });\n          tl.to(media, { opacity: 1, scale: 1, duration: IN * 1.4, ease: \"power2.out\" }, IN * 0.8);\n        }\n        var blen = border.getTotalLength();\n        gsap.set(border, { strokeDasharray: blen, strokeDashoffset: blen });\n        tl.to(border, { strokeDashoffset: 0, duration: 0.9, ease: \"power2.inOut\" }, 0.2);\n        doodles.forEach(function (p, i) {\n          var l = p.getTotalLength();\n          gsap.set(p, { strokeDasharray: l, strokeDashoffset: l });\n          tl.to(p, { strokeDashoffset: 0, duration: 0.3, ease: \"power2.out\" }, 1.1 + i * 0.12);\n        });\n        if (CONFIG.caption) tl.to(caption, { opacity: 1, duration: 0.4, ease: \"power2.out\" }, 1.4);\n\n        /* whole framed unit tilts + boils together */\n        var unit = [media, svg, caption];\n        gsap.set(unit, { rotation: CONFIG.tilt, transformOrigin: \"50% 50%\" });\n        if (CONFIG.boil.enabled) {\n          window.hwBoil(tl, unit, {\n            amp: CONFIG.boil.amp,\n            rot: CONFIG.boil.rot,\n            frameDrop: CONFIG.boil.frameDrop,\n            seed: CONFIG.seed,\n            baseRot: CONFIG.tilt,\n          });\n        }\n\n        if (CONFIG.animationOut) {\n          tl.to(unit, { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(\"#hw-fr-root\", { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"hw-frame\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/hw-path-text.json b/docs/public/catalog/blocks/hw-path-text.json
new file mode 100644
index 0000000000..10a2751b90
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-path-text.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-path-text.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-path-text.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      #hw-pt-root {\n        --hw-font-print: \"Caveat\", cursive;\n        --hw-font-script: \"Caveat\", cursive;\n        --hw-ink: #f4f2ec;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent;\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n      }\n      #hw-pt-svg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      /* The textPath carrier is geometry only — without fill:none it inherits\n         SVG's default black fill and renders as a solid blob under the text. */\n      #hw-pt-path {\n        fill: none;\n      }\n      #hw-pt-guide {\n        fill: none;\n        stroke: rgba(244, 242, 236, 0.22);\n        stroke-width: 3;\n        stroke-dasharray: 2 14;\n        stroke-linecap: round;\n      }\n      #hw-pt-svg text {\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n        font-weight: 700;\n        fill: var(--hw-ink);\n      }\n      #hw-pt-svg tspan {\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"hw-pt-root\"\n      data-composition-id=\"hw-path-text\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <svg id=\"hw-pt-svg\" viewBox=\"0 0 1920 1080\">\n        <path id=\"hw-pt-path\" d=\"\"></path>\n        <path id=\"hw-pt-guide\" d=\"\"></path>\n        <text id=\"hw-pt-text\" font-size=\"92\">\n          <textPath id=\"hw-pt-tp\" href=\"#hw-pt-path\" startOffset=\"4%\"></textPath>\n        </text>\n      </svg>\n      <div\n        id=\"hw-pt-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           Handwriting along any path — custom path text, natively via\n           SVG textPath (no Fusion overlay). CONFIG.d is the whole design. */\n        var CONFIG = {\n          text: \"come on this wild journey with me...\",\n          d: \"M 220 700 C 520 480, 900 820, 1230 560 S 1700 380, 1780 420\",\n          fontSize: 92,\n          showGuide: true, // faint dotted guide under the writing\n          typeCharDelay: 0.05,\n          seed: 12,\n          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },\n          animationOut: true,\n        };\n\n        var DUR = 6;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        /* hw family runtime */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n\n        document.getElementById(\"hw-pt-path\").setAttribute(\"d\", CONFIG.d);\n        if (CONFIG.showGuide) document.getElementById(\"hw-pt-guide\").setAttribute(\"d\", CONFIG.d);\n        document.getElementById(\"hw-pt-text\").setAttribute(\"font-size\", CONFIG.fontSize);\n\n        /* per-char tspans along the path */\n        var NS = \"http://www.w3.org/2000/svg\";\n        var tp = document.getElementById(\"hw-pt-tp\");\n        Array.from(CONFIG.text).forEach(function (ch) {\n          var t = document.createElementNS(NS, \"tspan\");\n          t.textContent = ch;\n          tp.appendChild(t);\n        });\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* guide draws first, then the handwriting types along it */\n        var guide = document.getElementById(\"hw-pt-guide\");\n        if (CONFIG.showGuide) {\n          var glen = guide.getTotalLength();\n          gsap.set(guide, { strokeDasharray: \"2 14\", strokeDashoffset: glen });\n          tl.to(guide, { strokeDashoffset: 0, duration: 0.9, ease: \"power2.inOut\" }, 0.2);\n        }\n        var chars = tp.querySelectorAll(\"tspan\");\n        var delay = Math.min(CONFIG.typeCharDelay, 2.6 / Math.max(1, chars.length));\n        tl.to(chars, { opacity: 1, duration: 0.03, stagger: delay, ease: \"none\" }, 0.7);\n\n        if (CONFIG.boil.enabled) {\n          window.hwBoil(tl, \"#hw-pt-svg\", {\n            amp: CONFIG.boil.amp,\n            rot: CONFIG.boil.rot,\n            frameDrop: CONFIG.boil.frameDrop,\n            seed: CONFIG.seed,\n          });\n        }\n\n        if (CONFIG.animationOut) {\n          tl.to(\"#hw-pt-svg\", { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(\"#hw-pt-root\", { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"hw-path-text\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/hw-pipeline.json b/docs/public/catalog/blocks/hw-pipeline.json
new file mode 100644
index 0000000000..50288aa9ee
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-pipeline.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-pipeline.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-pipeline.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      #hw-pl-root {\n        --hw-font-print: \"Caveat\", cursive;\n        --hw-font-script: \"Caveat\", cursive;\n        --hw-ink: #f4f2ec;\n        /* Warm marker accent, matching hw-frame / hw-title / hw-underline. The\n           previous #6d6dff read as a default UI blue against the family's ink. */\n        --hw-accent: #ffb020;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage or boards */\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n      }\n      #hw-pl-svg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      #hw-pl-svg path {\n        fill: none;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .hw-pl-box {\n        stroke: var(--hw-ink);\n        stroke-width: 6;\n      }\n      .hw-pl-conn {\n        stroke: var(--hw-accent);\n        stroke-width: 5;\n      }\n      .hw-pl-label {\n        position: absolute;\n        text-align: center;\n        font-weight: 700;\n        color: var(--hw-ink);\n        white-space: nowrap;\n        opacity: 0;\n        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"hw-pl-root\"\n      data-composition-id=\"hw-pipeline\"\n      data-start=\"0\"\n      data-duration=\"7\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <svg id=\"hw-pl-svg\" viewBox=\"0 0 1920 1080\"></svg>\n      <div id=\"hw-pl-labels\"></div>\n      <div\n        id=\"hw-pl-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"7\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           A flowchart \"pipeline\": wobbled boxes joined by curved\n           connectors, drawing on in sequence, all boiling. */\n        var CONFIG = {\n          nodes: [{ label: \"Idea\" }, { label: \"Record\" }, { label: \"Shine!\" }],\n          boxW: 320,\n          boxH: 170,\n          gap: 190, // px between boxes\n          y: 455, // top of the row; x centers automatically\n          fontSize: 56,\n          seed: 11,\n          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },\n          animationOut: true,\n        };\n\n        var DUR = 7;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        /* hw family runtime */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n        window.hwWobbleRect = function (w, h, r, seed, amp) {\n          amp = amp === undefined ? 3.5 : amp;\n          function wob(n) {\n            return window.hwHash(n, seed) * amp;\n          }\n          var d = \"M \" + (r + wob(1)) + \" \" + wob(2);\n          d += \" L \" + (w / 2 + wob(3)) + \" \" + wob(4);\n          d += \" L \" + (w - r + wob(5)) + \" \" + wob(6);\n          d += \" Q \" + (w + wob(7)) + \" \" + wob(8) + \" \" + (w + wob(9)) + \" \" + (r + wob(10));\n          d += \" L \" + (w + wob(11)) + \" \" + (h / 2 + wob(12));\n          d += \" L \" + (w + wob(13)) + \" \" + (h - r + wob(14));\n          d +=\n            \" Q \" +\n            (w + wob(15)) +\n            \" \" +\n            (h + wob(16)) +\n            \" \" +\n            (w - r + wob(17)) +\n            \" \" +\n            (h + wob(18));\n          d += \" L \" + (w / 2 + wob(19)) + \" \" + (h + wob(20));\n          d += \" L \" + (r + wob(21)) + \" \" + (h + wob(22));\n          d += \" Q \" + wob(23) + \" \" + (h + wob(24)) + \" \" + wob(25) + \" \" + (h - r + wob(26));\n          d += \" L \" + wob(27) + \" \" + (h / 2 + wob(28));\n          d += \" L \" + wob(29) + \" \" + (r + wob(30));\n          d += \" Q \" + wob(31) + \" \" + wob(32) + \" \" + (r + wob(33)) + \" \" + wob(34);\n          return d;\n        };\n\n        var NS = \"http://www.w3.org/2000/svg\";\n        var svg = document.getElementById(\"hw-pl-svg\");\n        var labels = document.getElementById(\"hw-pl-labels\");\n        var n = CONFIG.nodes.length;\n        var totalW = n * CONFIG.boxW + (n - 1) * CONFIG.gap;\n        var x0 = (1920 - totalW) / 2;\n\n        var boxes = [],\n          conns = [],\n          labelEls = [];\n        CONFIG.nodes.forEach(function (node, i) {\n          var bx = x0 + i * (CONFIG.boxW + CONFIG.gap);\n          /* outer g owns the translate (GSAP transforms REPLACE the SVG\n             transform attribute — never boil the element that carries it);\n             inner g is the boil target */\n          var gOuter = document.createElementNS(NS, \"g\");\n          gOuter.setAttribute(\"transform\", \"translate(\" + bx + \" \" + CONFIG.y + \")\");\n          var g = document.createElementNS(NS, \"g\");\n          g.setAttribute(\"id\", \"hw-pl-box-g-\" + i);\n          gOuter.appendChild(g);\n          var p = document.createElementNS(NS, \"path\");\n          p.setAttribute(\"class\", \"hw-pl-box\");\n          p.setAttribute(\"id\", \"hw-pl-box-\" + i);\n          p.setAttribute(\"d\", window.hwWobbleRect(CONFIG.boxW, CONFIG.boxH, 24, CONFIG.seed + i));\n          g.appendChild(p);\n          svg.appendChild(gOuter);\n          boxes.push(p);\n\n          var label = document.createElement(\"div\");\n          label.className = \"hw-pl-label\";\n          label.id = \"hw-pl-label-\" + i;\n          label.textContent = node.label;\n          label.style.left = bx + \"px\";\n          label.style.top = CONFIG.y + CONFIG.boxH / 2 - CONFIG.fontSize * 0.62 + \"px\";\n          label.style.width = CONFIG.boxW + \"px\";\n          label.style.fontSize = CONFIG.fontSize + \"px\";\n          labels.appendChild(label);\n          labelEls.push(label);\n\n          if (i < n - 1) {\n            var cx = bx + CONFIG.boxW,\n              cy = CONFIG.y + CONFIG.boxH / 2;\n            var ex = cx + CONFIG.gap,\n              ey = cy;\n            var c = document.createElementNS(NS, \"path\");\n            c.setAttribute(\"class\", \"hw-pl-conn\");\n            c.setAttribute(\"id\", \"hw-pl-conn-\" + i);\n            var sx = cx + 10,\n              tx = ex - 10;\n            var qx = cx + CONFIG.gap / 2 + window.hwHash(i * 9 + 2, CONFIG.seed) * 16,\n              qy = cy - 46 - window.hwHash(i * 9 + 3, CONFIG.seed) * 12;\n            /* Barbs follow the curve's incoming tangent. A quadratic's tangent\n               at its end is (end - control); barbs fixed to horizontal left the\n               head detached from a curve that arrives descending. Symmetric\n               length and angle, so it reads as one arrowhead. */\n            var ang = Math.atan2(ey - qy, tx - qx) + Math.PI;\n            var BARB = 26,\n              SPREAD = 0.42;\n            var b1x = tx + BARB * Math.cos(ang - SPREAD),\n              b1y = ey + BARB * Math.sin(ang - SPREAD);\n            var b2x = tx + BARB * Math.cos(ang + SPREAD),\n              b2y = ey + BARB * Math.sin(ang + SPREAD);\n            c.setAttribute(\n              \"d\",\n              \"M \" +\n                sx +\n                \" \" +\n                cy +\n                \" Q \" +\n                qx +\n                \" \" +\n                qy +\n                \" \" +\n                tx +\n                \" \" +\n                ey +\n                \" M \" +\n                tx +\n                \" \" +\n                ey +\n                \" L \" +\n                b1x +\n                \" \" +\n                b1y +\n                \" M \" +\n                tx +\n                \" \" +\n                ey +\n                \" L \" +\n                b2x +\n                \" \" +\n                b2y,\n            );\n            svg.appendChild(c);\n            conns.push(c);\n          }\n        });\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* sequence: box draws -> label -> connector -> next box... */\n        var t = 0.3;\n        CONFIG.nodes.forEach(function (_, i) {\n          var p = boxes[i];\n          var len = p.getTotalLength();\n          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });\n          tl.to(p, { strokeDashoffset: 0, duration: 0.65, ease: \"power2.inOut\" }, t);\n          tl.to(labelEls[i], { opacity: 1, duration: 0.35, ease: \"power2.out\" }, t + 0.45);\n          t += 0.7;\n          if (i < conns.length) {\n            var c = conns[i];\n            var cl = c.getTotalLength();\n            gsap.set(c, { strokeDasharray: cl, strokeDashoffset: cl });\n            tl.to(c, { strokeDashoffset: 0, duration: 0.45, ease: \"power2.inOut\" }, t);\n            t += 0.5;\n          }\n        });\n\n        if (CONFIG.boil.enabled) {\n          var targets = boxes.map(function (_, i) {\n            return \"#hw-pl-box-g-\" + i;\n          });\n          window.hwBoil(tl, targets.concat([\".hw-pl-conn\", \".hw-pl-label\"]), {\n            amp: CONFIG.boil.amp,\n            rot: CONFIG.boil.rot,\n            frameDrop: CONFIG.boil.frameDrop,\n            seed: CONFIG.seed,\n          });\n        }\n\n        if (CONFIG.animationOut) {\n          tl.to([svg, labels], { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(\"#hw-pl-root\", { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"hw-pipeline\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/hw-scribble-transition.json b/docs/public/catalog/blocks/hw-scribble-transition.json
new file mode 100644
index 0000000000..b2df6ebf97
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-scribble-transition.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #hw-st-root {\n        /* Warm marker accent, consistent with the rest of the hw family.\n           Override per use via CONFIG.color. */\n        --hw-accent: #ffb020;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent;\n      }\n      #hw-st-svg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n      #hw-st-svg path {\n        fill: none;\n        stroke: var(--hw-accent);\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      /* solid backstop that guarantees full coverage at the midpoint */\n      #hw-st-solid {\n        position: absolute;\n        inset: 0;\n        background: var(--hw-accent);\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"hw-st-root\"\n      data-composition-id=\"hw-scribble-transition\"\n      data-start=\"0\"\n      data-duration=\"2.2\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <svg id=\"hw-st-svg\" viewBox=\"0 0 1920 1080\" data-layout-allow-overflow></svg>\n      <div id=\"hw-st-solid\"></div>\n      <div\n        id=\"hw-st-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"2.2\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           Overlay-transition (the mk-clone-wall model): fat scribble strokes\n           sweep across and cover the frame, a solid backstop guarantees full\n           coverage at the midpoint (the host hard-cuts beneath, ~0.9-1.4s\n           local), then everything clears. Place spanning the host's cut. */\n        var CONFIG = {\n          color: null, // css color; null = --hw-accent (warm marker)\n          bands: 7, // horizontal scribble bands\n          strokeScale: 1.0,\n          seed: 17,\n        };\n\n        var W = 1920,\n          H = 1080,\n          DUR = 2.2;\n\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n\n        var root = document.getElementById(\"hw-st-root\");\n        if (CONFIG.color) root.style.setProperty(\"--hw-accent\", CONFIG.color);\n        var NS = \"http://www.w3.org/2000/svg\";\n        var svg = document.getElementById(\"hw-st-svg\");\n\n        /* fat zigzag bands, each covering a horizontal slice edge-to-edge */\n        var bandH = H / CONFIG.bands;\n        var paths = [];\n        for (var b = 0; b < CONFIG.bands; b++) {\n          var y0 = b * bandH + bandH / 2;\n          var d = \"M -80 \" + (y0 + window.hwHash(b * 17, CONFIG.seed) * 20).toFixed(1);\n          var zigs = 7;\n          for (var i = 1; i <= zigs; i++) {\n            var x = (W + 160) * (i / zigs) - 80;\n            var y =\n              y0 + (i % 2 ? -1 : 1) * bandH * 0.32 + window.hwHash(b * 17 + i, CONFIG.seed) * 16;\n            d += \" L \" + x.toFixed(1) + \" \" + y.toFixed(1);\n          }\n          var p = document.createElementNS(NS, \"path\");\n          p.setAttribute(\"d\", d);\n          p.setAttribute(\"stroke-width\", Math.ceil(bandH * 0.85 * CONFIG.strokeScale));\n          p.setAttribute(\"id\", \"hw-st-band-\" + b);\n          svg.appendChild(p);\n          paths.push(p);\n        }\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* 0-0.85: bands scribble on (staggered, alternating direction) */\n        paths.forEach(function (p, i) {\n          var len = p.getTotalLength();\n          gsap.set(p, { strokeDasharray: len, strokeDashoffset: i % 2 ? -len : len });\n          tl.to(p, { strokeDashoffset: 0, duration: 0.55, ease: \"power2.in\" }, 0.04 * i);\n        });\n        /* 0.8: solid backstop snaps in beneath the finished scribble — full\n           coverage guaranteed 0.85-1.35 (the host's cut window) */\n        tl.to(\"#hw-st-solid\", { opacity: 1, duration: 0.12, ease: \"none\" }, 0.8);\n\n        /* 1.35-1.95: clear — bands scribble off the other way, backstop lifts */\n        tl.to(\"#hw-st-solid\", { opacity: 0, duration: 0.15, ease: \"none\" }, 1.42);\n        paths.forEach(function (p, i) {\n          var len = p.getTotalLength();\n          tl.to(\n            p,\n            { strokeDashoffset: i % 2 ? len : -len, duration: 0.5, ease: \"power2.out\" },\n            1.42 + 0.035 * i,\n          );\n        });\n\n        /* hard kill the moment the last band clears (learning: kill roots\n           when the final fade completes, not at DUR) */\n        tl.set(root, { visibility: \"hidden\" }, 2.17);\n\n        window.__timelines[\"hw-scribble-transition\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/hw-text-cloud.json b/docs/public/catalog/blocks/hw-text-cloud.json
new file mode 100644
index 0000000000..68a18994f5
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-text-cloud.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #hw-tc-root {\n        /* ---- hw tokens ---- */\n        --hw-font-print: \"Caveat\", cursive;\n        --hw-font-script: \"Caveat\", cursive;\n        --hw-ink: #f4f2ec;\n        --hw-ink-dark: #26241f;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage */\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n      }\n      #hw-tc-wrap {\n        position: absolute;\n        pointer-events: none;\n      }\n      #hw-tc-wrap svg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      #hw-tc-fill {\n        fill: var(--hw-ink);\n        opacity: 0;\n      }\n      #hw-tc-stroke {\n        fill: none;\n        stroke: var(--hw-ink-dark);\n        stroke-width: 4;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      #hw-tc-text {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        font-weight: 700;\n        color: var(--hw-ink-dark);\n        line-height: 1.05;\n      }\n      #hw-tc-text .ch {\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"hw-tc-root\"\n      data-composition-id=\"hw-text-cloud\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"hw-tc-wrap\">\n        <svg id=\"hw-tc-svg\">\n          <path id=\"hw-tc-fill\"></path>\n          <path id=\"hw-tc-stroke\"></path>\n        </svg>\n        <div id=\"hw-tc-text\"></div>\n      </div>\n      <div\n        id=\"hw-tc-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           Speech bubble with a movable tip (pointable at any subject): wobbled\n           cloud, draw-on outline, paper fill, per-char handwritten text. */\n        var CONFIG = {\n          text: \"what are you looking at?\",\n          x: 620, // wrapper left\n          y: 180, // wrapper top\n          w: 560,\n          h: 300,\n          fontSize: 58,\n          tip: { side: \"bottom-left\", len: 90 }, // \"bottom-left\"|\"bottom-right\"\n          seed: 6,\n          boil: { enabled: true, amp: 1.6, rot: 0.4, frameDrop: 3 },\n          typeCharDelay: 0.03,\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 6;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        /* hw family runtime */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n\n        /* wobbled cloud with a tail tip */\n        function cloudPath(W, H, tip, seed) {\n          var cx = W / 2,\n            cy = H / 2 - 14,\n            rx = W / 2 - 12,\n            ry = H / 2 - 34;\n          var N = 16,\n            pts = [];\n          for (var i = 0; i < N; i++) {\n            var a = (i / N) * Math.PI * 2;\n            var wr = 1 + window.hwHash(i * 11 + 3, seed) * 0.06;\n            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);\n          }\n          var mx = (pts[0][0] + pts[N - 1][0]) / 2,\n            my = (pts[0][1] + pts[N - 1][1]) / 2;\n          var d = \"M\" + mx.toFixed(1) + \" \" + my.toFixed(1);\n          for (var j = 0; j < N; j++) {\n            var p = pts[j],\n              q = pts[(j + 1) % N];\n            d +=\n              \" Q\" +\n              p[0].toFixed(1) +\n              \" \" +\n              p[1].toFixed(1) +\n              \" \" +\n              ((p[0] + q[0]) / 2).toFixed(1) +\n              \" \" +\n              ((p[1] + q[1]) / 2).toFixed(1);\n          }\n          d += \"Z\";\n          /* tail */\n          var left = tip.side !== \"bottom-right\";\n          var bx = cx + (left ? -rx * 0.45 : rx * 0.45),\n            by = cy + ry * 0.92;\n          var tx = bx + (left ? -tip.len * 0.5 : tip.len * 0.5),\n            ty = by + tip.len;\n          d +=\n            \" M \" +\n            (bx - 26).toFixed(1) +\n            \" \" +\n            (by - 6).toFixed(1) +\n            \" Q \" +\n            (bx - 8 + window.hwHash(31, seed) * 6).toFixed(1) +\n            \" \" +\n            ((by + ty) / 2).toFixed(1) +\n            \" \" +\n            tx.toFixed(1) +\n            \" \" +\n            ty.toFixed(1) +\n            \" Q \" +\n            (bx + 18).toFixed(1) +\n            \" \" +\n            ((by + ty) / 2).toFixed(1) +\n            \" \" +\n            (bx + 30).toFixed(1) +\n            \" \" +\n            (by - 2).toFixed(1);\n          return d;\n        }\n\n        var wrap = document.getElementById(\"hw-tc-wrap\");\n        wrap.style.left = CONFIG.x + \"px\";\n        wrap.style.top = CONFIG.y + \"px\";\n        wrap.style.width = CONFIG.w + \"px\";\n        wrap.style.height = CONFIG.h + \"px\";\n        var svg = document.getElementById(\"hw-tc-svg\");\n        svg.setAttribute(\"viewBox\", \"0 0 \" + CONFIG.w + \" \" + CONFIG.h);\n        var d = cloudPath(CONFIG.w, CONFIG.h, CONFIG.tip, CONFIG.seed);\n        document.getElementById(\"hw-tc-fill\").setAttribute(\"d\", d);\n        document.getElementById(\"hw-tc-stroke\").setAttribute(\"d\", d);\n\n        var text = document.getElementById(\"hw-tc-text\");\n        text.style.left = CONFIG.w * 0.12 + \"px\";\n        text.style.top = CONFIG.h * 0.1 + \"px\";\n        text.style.width = CONFIG.w * 0.76 + \"px\";\n        text.style.height = CONFIG.h * 0.62 + \"px\";\n        text.style.fontSize = CONFIG.fontSize + \"px\";\n        var inner = document.createElement(\"div\");\n        Array.from(CONFIG.text).forEach(function (ch) {\n          var s = document.createElement(\"span\");\n          s.className = \"ch\";\n          s.textContent = ch;\n          inner.appendChild(s);\n        });\n        text.appendChild(inner);\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* draw outline, fade fill, type text */\n        var stroke = document.getElementById(\"hw-tc-stroke\");\n        var len = stroke.getTotalLength();\n        gsap.set(stroke, { strokeDasharray: len, strokeDashoffset: len });\n        var t0 = CONFIG.animationIn ? 0.3 : 0;\n        if (CONFIG.animationIn) {\n          tl.to(stroke, { strokeDashoffset: 0, duration: 0.8, ease: \"power2.inOut\" }, t0);\n          tl.to(\"#hw-tc-fill\", { opacity: 0.94, duration: 0.4, ease: \"power2.out\" }, t0 + 0.55);\n        } else {\n          gsap.set(stroke, { strokeDashoffset: 0 });\n          gsap.set(\"#hw-tc-fill\", { opacity: 0.94 });\n        }\n        var chars = text.querySelectorAll(\".ch\");\n        var delay = Math.min(CONFIG.typeCharDelay, 1.8 / Math.max(1, chars.length));\n        tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: \"none\" }, t0 + 0.9);\n\n        if (CONFIG.boil.enabled) {\n          window.hwBoil(tl, \"#hw-tc-wrap\", {\n            amp: CONFIG.boil.amp,\n            rot: CONFIG.boil.rot,\n            frameDrop: CONFIG.boil.frameDrop,\n            seed: CONFIG.seed,\n          });\n        }\n\n        if (CONFIG.animationOut) {\n          tl.to(wrap, { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(\"#hw-tc-root\", { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"hw-text-cloud\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/hw-title.json b/docs/public/catalog/blocks/hw-title.json
new file mode 100644
index 0000000000..f5049b5f88
--- /dev/null
+++ b/docs/public/catalog/blocks/hw-title.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-title.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-title.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      #hw-t-root {\n        /* ---- hw tokens ---- */\n        --hw-font-print: \"Caveat\", cursive;\n        --hw-font-script: \"Caveat\", cursive;\n        --hw-ink: #f4f2ec;\n        --hw-ink-dark: #26241f;\n        --hw-accent-warm: #ffb020;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage or a board */\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n      }\n      #hw-t-wrap {\n        position: absolute;\n        pointer-events: none;\n      }\n      #hw-t-line {\n        font-weight: 700;\n        line-height: 1.1;\n        white-space: nowrap;\n        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);\n      }\n      #hw-t-line .w {\n        display: inline;\n      }\n      #hw-t-under {\n        overflow: visible;\n        display: block;\n      }\n      #hw-t-under path {\n        fill: none;\n        stroke: var(--hw-accent-warm);\n        stroke-width: 7;\n        stroke-linecap: round;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"hw-t-root\"\n      data-composition-id=\"hw-title\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"hw-t-wrap\">\n        <div id=\"hw-t-line\"></div>\n        <svg id=\"hw-t-under\" width=\"10\" height=\"34\"><path id=\"hw-t-under-path\"></path></svg>\n      </div>\n      <div\n        id=\"hw-t-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           Handwritten title with the highlight-sweep scalar (the shared\n           mk-callout-highlight mechanic) + squiggle underline + the boil.\n           Demonstrates the dispatcher composing sweep + boil on one\n           timeline (learning: one onUpdate — everything through hwOnUpdate). */\n        var CONFIG = {\n          text: \"shine like the star you are\",\n          fontSize: 120,\n          scheme: \"chalk\", // \"chalk\" (white, over footage) | \"ink\" (dark, boards)\n          sweep: { enabled: true, start: 0.8, end: 3.2 },\n          underline: { enabled: true, wobble: 6 },\n          boil: { enabled: true, amp: 1.4, rot: 0.3, frameDrop: 3 },\n          seed: 8,\n          x: null, // null = centered\n          y: null,\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 6;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var IN = clamp(DUR * 0.08, 0.3, 0.8);\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        /* hw family runtime */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n\n        var FULL = CONFIG.scheme === \"ink\" ? \"#26241f\" : \"#f4f2ec\";\n        var FAINT = CONFIG.scheme === \"ink\" ? \"rgba(38,36,31,0.3)\" : \"rgba(244,242,236,0.32)\";\n\n        var wrap = document.getElementById(\"hw-t-wrap\");\n        var line = document.getElementById(\"hw-t-line\");\n        line.style.fontSize = CONFIG.fontSize + \"px\";\n\n        /* word spans */\n        var wordEls = [];\n        CONFIG.text.split(/\\s+/).forEach(function (w, i) {\n          if (i > 0) line.appendChild(document.createTextNode(\" \"));\n          var span = document.createElement(\"span\");\n          span.className = \"w\";\n          span.textContent = w;\n          span.style.color = CONFIG.sweep.enabled ? FAINT : FULL;\n          line.appendChild(span);\n          wordEls.push(span);\n        });\n\n        /* measure + position; build squiggle underline to match width */\n        var rect = line.getBoundingClientRect();\n        wrap.style.left =\n          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + \"px\";\n        wrap.style.top =\n          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) - 20 : CONFIG.y) + \"px\";\n\n        var underPath = document.getElementById(\"hw-t-under-path\");\n        if (CONFIG.underline.enabled) {\n          var uw = Math.round(rect.width);\n          var svg = document.getElementById(\"hw-t-under\");\n          svg.setAttribute(\"width\", uw);\n          svg.setAttribute(\"viewBox\", \"0 0 \" + uw + \" 34\");\n          var segs = Math.max(6, Math.round(uw / 90));\n          var d = \"M 2 \" + (16 + window.hwHash(0, CONFIG.seed) * 4).toFixed(1);\n          for (var i = 1; i <= segs; i++) {\n            var x = (uw / segs) * i;\n            var y = 16 + window.hwHash(i * 5 + 1, CONFIG.seed) * CONFIG.underline.wobble;\n            var cxp = x - uw / segs / 2 + window.hwHash(i * 5 + 2, CONFIG.seed) * 10;\n            var cyp = 16 + (i % 2 ? -1 : 1) * (8 + window.hwHash(i * 5 + 3, CONFIG.seed) * 4);\n            d +=\n              \" Q \" +\n              cxp.toFixed(1) +\n              \" \" +\n              cyp.toFixed(1) +\n              \" \" +\n              x.toFixed(1) +\n              \" \" +\n              y.toFixed(1);\n          }\n          underPath.setAttribute(\"d\", d);\n        } else {\n          document.getElementById(\"hw-t-under\").style.display = \"none\";\n        }\n\n        var tl = gsap.timeline({ paused: true });\n\n        if (CONFIG.animationIn) {\n          gsap.set(wrap, { opacity: 0 });\n          tl.to(wrap, { opacity: 1, duration: IN, ease: \"power2.out\" }, 0.1);\n        }\n\n        /* the sweep scalar — registered through the dispatcher so it\n           coexists with the boil on the same timeline */\n        if (CONFIG.sweep.enabled) {\n          var mix = gsap.utils.interpolate(FAINT, FULL);\n          var st = { p: 0 };\n          window.hwOnUpdate(tl, function () {\n            var k = st.p * wordEls.length;\n            for (var i = 0; i < wordEls.length; i++) {\n              var f = Math.max(0, Math.min(1, k - i));\n              wordEls[i].style.color = mix(f);\n            }\n          });\n          tl.to(\n            st,\n            { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: \"none\" },\n            CONFIG.sweep.start,\n          );\n        }\n\n        /* underline draws as the sweep lands */\n        if (CONFIG.underline.enabled) {\n          var len = underPath.getTotalLength();\n          gsap.set(underPath, { strokeDasharray: len, strokeDashoffset: len });\n          var uAt = CONFIG.sweep.enabled ? CONFIG.sweep.end - 0.2 : 0.8;\n          tl.to(underPath, { strokeDashoffset: 0, duration: 0.7, ease: \"power2.inOut\" }, uAt);\n        }\n\n        if (CONFIG.boil.enabled) {\n          window.hwBoil(tl, \"#hw-t-wrap\", {\n            amp: CONFIG.boil.amp,\n            rot: CONFIG.boil.rot,\n            frameDrop: CONFIG.boil.frameDrop,\n            seed: CONFIG.seed,\n          });\n        }\n\n        if (CONFIG.animationOut) {\n          tl.to(wrap, { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(\"#hw-t-root\", { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"hw-title\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/instagram-follow.json b/docs/public/catalog/blocks/instagram-follow.json
new file mode 100644
index 0000000000..664dea4885
--- /dev/null
+++ b/docs/public/catalog/blocks/instagram-follow.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n      }\n      html,\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      body {\n        width: 1080px;\n        height: 1920px;\n        font-family: \"DM Sans\", sans-serif;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .lower-third {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        display: flex;\n        align-items: center;\n        gap: 30px;\n        background: #1a1a1a;\n        border-radius: 75px;\n        padding: 25px 40px 25px 25px;\n        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);\n      }\n\n      [data-composition-id=\"instagram-follow\"] .avatar {\n        width: 120px;\n        height: 120px;\n        border-radius: 50%;\n        object-fit: cover;\n        flex-shrink: 0;\n        border: 3px solid #333;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .profile-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        margin-right: 20px;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .name-row {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .display-name {\n        font-size: 42px;\n        font-weight: 700;\n        color: #ffffff;\n        line-height: 1.3;\n        letter-spacing: -0.01em;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .verified-badge {\n        width: 34px;\n        height: 34px;\n        flex-shrink: 0;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .verified-badge svg {\n        width: 34px;\n        height: 34px;\n        display: block;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .handle {\n        font-size: 28px;\n        font-weight: 400;\n        color: #a0a0a0;\n        line-height: 1.3;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .follower-count {\n        font-size: 25px;\n        font-weight: 400;\n        color: #737373;\n        line-height: 1.3;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .follow-btn {\n        position: relative;\n        width: 250px;\n        height: 80px;\n        border-radius: 40px;\n        background: #0095f6;\n        flex-shrink: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .btn-text {\n        position: absolute;\n        font-family: \"DM Sans\", sans-serif;\n        font-size: 30px;\n        font-weight: 700;\n        color: #ffffff;\n        letter-spacing: 0.02em;\n        white-space: nowrap;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .btn-text-follow {\n        opacity: 1;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .btn-text-following {\n        opacity: 0;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .chevron-icon {\n        display: inline-block;\n        width: 18px;\n        height: 18px;\n      }\n\n      [data-composition-id=\"instagram-follow\"] .chevron-icon svg {\n        width: 18px;\n        height: 18px;\n        display: block;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"instagram-follow\"\n      data-width=\"1080\"\n      data-height=\"1920\"\n      data-start=\"0\"\n      data-duration=\"4.5\"\n    >\n      <div\n        id=\"card\"\n        class=\"clip lower-third\"\n        data-start=\"0\"\n        data-duration=\"4.5\"\n        data-track-index=\"0\"\n      >\n        <img class=\"avatar\" src=\"/public/catalog/assets/a300f59c31d2ea16.jpg\" alt=\"HeyGen\" crossorigin=\"anonymous\" />\n        <div class=\"profile-info\">\n          <div class=\"name-row\">\n            <div class=\"display-name\">HeyGen</div>\n            <span class=\"verified-badge\"\n              ><svg viewBox=\"0 0 40 40\" fill=\"none\">\n                <circle cx=\"20\" cy=\"20\" r=\"20\" fill=\"#0095F6\" />\n                <path d=\"M17.5 27.5L10 20l2.5-2.5 5 5 10-10L30 15 17.5 27.5z\" fill=\"#fff\" /></svg\n            ></span>\n          </div>\n          <div class=\"handle\">@heygen_official</div>\n          <div class=\"follower-count\">47.5K followers</div>\n        </div>\n        <div id=\"follow-btn\" class=\"follow-btn\">\n          <span id=\"btn-follow\" class=\"btn-text btn-text-follow\">Follow</span>\n          <span id=\"btn-following\" class=\"btn-text btn-text-following\">\n            <span>Following</span>\n            <span class=\"chevron-icon\"\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"#fff\"\n                stroke-width=\"3\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"6 9 12 15 18 9\"></polyline></svg\n            ></span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n\n      var card = document.getElementById(\"card\");\n      var btn = document.getElementById(\"follow-btn\");\n      var textFollow = document.getElementById(\"btn-follow\");\n      var textFollowing = document.getElementById(\"btn-following\");\n\n      // Start off-screen\n      gsap.set(card, { y: 300, opacity: 0 });\n\n      // Slide in from bottom\n      tl.to(\n        card,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.5,\n          ease: \"power3.out\",\n        },\n        0.1,\n      );\n\n      // Hold, then button press-in\n      tl.to(\n        btn,\n        {\n          scale: 0.92,\n          duration: 0.15,\n          ease: \"power2.out\",\n        },\n        1.0,\n      );\n\n      // Button release with spring bounce\n      tl.to(\n        btn,\n        {\n          scale: 1,\n          duration: 0.4,\n          ease: \"elastic.out(1, 0.4)\",\n        },\n        1.15,\n      );\n\n      // Button background: IG blue → dark gray\n      tl.to(\n        btn,\n        {\n          backgroundColor: \"#2f2f2f\",\n          duration: 0.12,\n          ease: \"none\",\n        },\n        1.15,\n      );\n\n      // Fade out \"Follow\", fade in \"Following\"\n      tl.to(\n        textFollow,\n        {\n          opacity: 0,\n          duration: 0.08,\n          ease: \"none\",\n        },\n        1.15,\n      );\n\n      tl.to(\n        textFollowing,\n        {\n          opacity: 1,\n          duration: 0.08,\n          ease: \"none\",\n        },\n        1.18,\n      );\n\n      // Slide out to bottom\n      tl.to(\n        card,\n        {\n          y: 300,\n          opacity: 0,\n          duration: 0.25,\n          ease: \"power3.in\",\n        },\n        3.8,\n      );\n\n      window.__timelines[\"instagram-follow\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/ios26-liquid-glass.json b/docs/public/catalog/blocks/ios26-liquid-glass.json
new file mode 100644
index 0000000000..b4df19ec43
--- /dev/null
+++ b/docs/public/catalog/blocks/ios26-liquid-glass.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #050508;\n        overflow: hidden;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #050508;\n      }\n      .ios-home {\n        position: relative;\n        height: 844px;\n        overflow: hidden;\n        background: #010101;\n      }\n      .ios-wallpaper {\n        position: absolute;\n        inset: 0;\n        background:\n          radial-gradient(ellipse at 50% 50%, rgba(12, 16, 24, 0.96), transparent 31%),\n          radial-gradient(circle at 50% 54%, rgba(255, 255, 255, 0.06), transparent 8%),\n          linear-gradient(180deg, #020202, #000);\n      }\n      .ios-wallpaper::before,\n      .ios-wallpaper::after {\n        content: \"\";\n        position: absolute;\n        left: 92px;\n        top: 210px;\n        width: 210px;\n        height: 360px;\n        border-radius: 50% 50% 42% 46%;\n        border: 4px solid transparent;\n        background:\n          linear-gradient(#020202, #020202) padding-box,\n          conic-gradient(\n              from 215deg,\n              rgba(255, 255, 255, 0),\n              rgba(255, 255, 255, 0.92),\n              rgba(53, 131, 255, 0.92),\n              rgba(38, 255, 168, 0.8),\n              rgba(255, 63, 54, 0.72),\n              rgba(255, 255, 255, 0)\n            )\n            border-box;\n        filter: blur(0.35px) saturate(1.25);\n        opacity: 0.82;\n        transform: rotate(7deg);\n      }\n      .ios-wallpaper::after {\n        left: 118px;\n        top: 400px;\n        width: 140px;\n        height: 190px;\n        border-width: 3px;\n        opacity: 0.62;\n        transform: rotate(-27deg);\n      }\n      .ios-status {\n        position: relative;\n        z-index: 2;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 27px 30px 10px;\n        color: #f6f6f6;\n        font-size: 22px;\n        font-weight: 760;\n        letter-spacing: 0;\n        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);\n      }\n      .ios-status-left,\n      .ios-status-right {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n      .ios-location {\n        display: grid;\n        place-items: center;\n        width: 18px;\n        height: 18px;\n        border-radius: 999px;\n        background: #2f80ed;\n        color: #fff;\n        font-size: 12px;\n        line-height: 1;\n      }\n      .ios-signal {\n        display: flex;\n        align-items: end;\n        gap: 3px;\n        height: 18px;\n      }\n      .ios-signal span {\n        width: 5px;\n        border-radius: 3px;\n        background: rgba(255, 255, 255, 0.92);\n      }\n      .ios-signal span:nth-child(1) {\n        height: 7px;\n      }\n      .ios-signal span:nth-child(2) {\n        height: 10px;\n      }\n      .ios-signal span:nth-child(3) {\n        height: 13px;\n      }\n      .ios-signal span:nth-child(4) {\n        height: 17px;\n        background: rgba(255, 255, 255, 0.48);\n      }\n      .ios-wifi {\n        position: relative;\n        width: 23px;\n        height: 17px;\n      }\n      .ios-wifi span {\n        position: absolute;\n        left: 50%;\n        border: 4px solid rgba(255, 255, 255, 0.94);\n        border-color: rgba(255, 255, 255, 0.94) transparent transparent transparent;\n        border-radius: 50%;\n        transform: translateX(-50%);\n      }\n      .ios-wifi span:nth-child(1) {\n        top: 0;\n        width: 28px;\n        height: 28px;\n      }\n      .ios-wifi span:nth-child(2) {\n        top: 6px;\n        width: 18px;\n        height: 18px;\n      }\n      .ios-wifi span:nth-child(3) {\n        top: 13px;\n        width: 7px;\n        height: 7px;\n        border-radius: 999px;\n        background: #fff;\n        border: 0;\n      }\n      .ios-battery {\n        position: relative;\n        min-width: 34px;\n        height: 21px;\n        padding: 1px 5px 0;\n        border-radius: 6px;\n        background: #59d768;\n        color: #fff;\n        font-size: 15px;\n        font-weight: 850;\n        line-height: 20px;\n      }\n      .ios-battery::after {\n        content: \"\";\n        position: absolute;\n        right: -3px;\n        top: 7px;\n        width: 3px;\n        height: 7px;\n        border-radius: 0 3px 3px 0;\n        background: rgba(255, 255, 255, 0.5);\n      }\n      .ios-app-grid {\n        position: relative;\n        z-index: 2;\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 14px 22px;\n        padding: 20px 28px 0;\n      }\n      .ios-app {\n        position: relative;\n        text-align: center;\n      }\n      .ios-app-icon,\n      .ios-dock-icon {\n        display: block;\n        object-fit: cover;\n        box-shadow:\n          0 8px 20px rgba(0, 0, 0, 0.34),\n          inset 0 1px 0 rgba(255, 255, 255, 0.24);\n        filter: grayscale(1) saturate(0.08) contrast(1.2) brightness(0.86);\n      }\n      .ios-app-icon {\n        width: 62px;\n        height: 62px;\n        margin: 0 auto 7px;\n        border-radius: 18px;\n      }\n      .ios-app-label {\n        color: #fff;\n        font-size: 13px;\n        font-weight: 640;\n        line-height: 1.1;\n        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);\n        white-space: nowrap;\n      }\n      .ios-badge {\n        position: absolute;\n        top: -8px;\n        right: -8px;\n        min-width: 24px;\n        padding: 3px 7px;\n        border-radius: 999px;\n        background: #f7f7f7;\n        color: #303030;\n        font-size: 15px;\n        font-weight: 700;\n        font-variant-numeric: tabular-nums;\n        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.32);\n      }\n      .ios-search-pill {\n        position: absolute;\n        z-index: 2;\n        left: 50%;\n        bottom: 105px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 7px;\n        width: 116px;\n        padding: 9px 0;\n        border-radius: 19px;\n        background: rgba(255, 255, 255, 0.11);\n        border: 1px solid rgba(255, 255, 255, 0.1);\n        color: rgba(255, 255, 255, 0.72);\n        font-size: 15px;\n        font-weight: 650;\n        text-align: center;\n        transform: translateX(-50%);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.17),\n          0 10px 22px rgba(0, 0, 0, 0.34);\n      }\n      .ios-search-pill::before {\n        content: \"\";\n        width: 12px;\n        height: 12px;\n        border: 3px solid rgba(255, 255, 255, 0.72);\n        border-radius: 999px;\n        box-sizing: border-box;\n      }\n      .ios-search-pill::after {\n        content: \"\";\n        width: 7px;\n        height: 3px;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.72);\n        transform: rotate(45deg) translate(-6px, 6px);\n        margin-left: -10px;\n      }\n      .ios-notification-layer {\n        display: none;\n        position: absolute;\n        z-index: 5;\n        top: 82px;\n        left: 15px;\n        right: 15px;\n        height: 222px;\n        pointer-events: none;\n      }\n      .ios-notification-card {\n        position: absolute;\n        left: 0;\n        right: 0;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        min-height: 60px;\n        padding: 9px 12px;\n        border-radius: 23px;\n        border: 1px solid rgba(255, 255, 255, 0.27);\n        background:\n          linear-gradient(135deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.13)),\n          rgba(140, 150, 164, 0.52);\n        -webkit-backdrop-filter: blur(22px) saturate(1.35);\n        backdrop-filter: blur(22px) saturate(1.35);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.46),\n          0 14px 34px rgba(0, 0, 0, 0.38);\n        opacity: 0;\n        transform: translateY(-120px) scale(0.98);\n      }\n      .ios-notification-card:nth-child(2) {\n        top: 68px;\n      }\n      .ios-notification-card:nth-child(3) {\n        top: 136px;\n      }\n      .ios-notification-icon {\n        width: 38px;\n        height: 38px;\n        border-radius: 11px;\n        background-position: center;\n        background-size: cover;\n        flex: 0 0 auto;\n      }\n      .ios-notification-messages {\n        background-image: url(\"/public/catalog/assets/183a84d8c46fc058.jpg\");\n      }\n      .ios-notification-hyperframes {\n        background-image: url(\"/public/catalog/assets/919d352f7d618546.jpg\");\n      }\n      .ios-notification-gmail {\n        background-image: url(\"/public/catalog/assets/f0d9dd220ced5635.jpg\");\n      }\n      .ios-icon-preload {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        opacity: 0;\n        pointer-events: none;\n      }\n      .ios-notification-copy {\n        min-width: 0;\n        flex: 1;\n      }\n      .ios-notification-title {\n        display: flex;\n        justify-content: space-between;\n        gap: 8px;\n        color: #fff;\n        font-size: 12px;\n        font-weight: 750;\n      }\n      .ios-notification-body {\n        margin-top: 2px;\n        color: rgba(255, 255, 255, 0.72);\n        font-size: 11px;\n        line-height: 1.25;\n      }\n      .ios-dock {\n        position: absolute;\n        z-index: 2;\n        left: 14px;\n        right: 14px;\n        bottom: 13px;\n        display: flex;\n        justify-content: space-around;\n        padding: 10px 16px;\n        border-radius: 37px;\n        background: rgba(255, 255, 255, 0.08);\n        border: 1px solid rgba(255, 255, 255, 0.16);\n        -webkit-backdrop-filter: blur(18px) saturate(1.2);\n        backdrop-filter: blur(18px) saturate(1.2);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.16),\n          0 14px 36px rgba(0, 0, 0, 0.24);\n      }\n      .ios-dock-item {\n        position: relative;\n        width: 62px;\n        height: 62px;\n      }\n      .ios-dock-icon {\n        width: 62px;\n        height: 62px;\n        border-radius: 18px;\n        background-position: center;\n        background-size: cover;\n      }\n      .ios-dock-phone {\n        background-image: url(\"/public/catalog/assets/da6ec924a99c8d3c.jpg\");\n      }\n      .ios-dock-brave {\n        background-image: url(\"/public/catalog/assets/407d01c660156970.jpg\");\n      }\n      .ios-dock-whatsapp {\n        background-image: url(\"/public/catalog/assets/37cf02fd6afa7181.jpg\");\n      }\n      .ios-dock-music {\n        background-image: url(\"/public/catalog/assets/00bd6b886fd23c9e.jpg\");\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"ios26-liquid-glass\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"15\"\n      data-root=\"true\"\n    >\n      <!-- LIVE HTML captured every frame via drawElementImage  -->\n      <canvas\n        id=\"cap-phone\"\n        layoutsubtree\n        width=\"390\"\n        height=\"844\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 390px;\n          height: 844px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <div\n          id=\"phone-html\"\n          style=\"\n            width: 390px;\n            height: 844px;\n            overflow: hidden;\n            font-family: Inter, system-ui, sans-serif;\n            color: #e2e8f0;\n          \"\n        >\n          <div id=\"phone-scroll\" class=\"ios-home\" style=\"color: #fff; transform: translateY(0)\">\n            <div id=\"phone-title\" style=\"display: none\"></div>\n            <span id=\"phone-count\" style=\"display: none\"></span>\n            <div id=\"phone-cards\" style=\"display: none\"></div>\n            <img\n              id=\"ios-notify-messages-preload\"\n              class=\"ios-icon-preload\"\n              src=\"/public/catalog/assets/183a84d8c46fc058.jpg\"\n              alt=\"\"\n            />\n            <div class=\"ios-wallpaper\"></div>\n            <div class=\"ios-status\">\n              <div class=\"ios-status-left\">\n                <span style=\"font-variant-numeric: tabular-nums\">15:16</span>\n                <span class=\"ios-location\">▲</span>\n              </div>\n              <div class=\"ios-status-right\">\n                <div class=\"ios-signal\"><span></span><span></span><span></span><span></span></div>\n                <div class=\"ios-wifi\"><span></span><span></span><span></span></div>\n                <div class=\"ios-battery\">92</div>\n              </div>\n            </div>\n            <div id=\"ios-app-grid\" class=\"ios-app-grid\">\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/4a3b80889cebb41a.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Weather</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/86f591a856149aaa.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Stocks</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/133975c557f2b1d5.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Find My</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/e830283620536135.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Home</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/e54cc7816d9d1215.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Books</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/38fd49c8d14115e2.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">iTunes Store</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/57085df38b273be8.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Fitness</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/0467760f53ee4d6c.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Watch</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/f6c2640a1c19c3e3.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Contacts</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/0780dac27f53fe4c.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Files</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/28c3466d1ecbf30e.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Translate</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/a1c4ba842d1941d5.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Calendar</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/2bb6166f2b46a075.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Photos</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/719ca431702bfc23.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">ChatGPT</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/919d352f7d618546.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Slack</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/a0ed0190c4b361cb.jpg\" alt=\"\" />\n                <span class=\"ios-badge\">1</span>\n                <div class=\"ios-app-label\">Instagram</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/60a68dd7210c966c.jpg\" alt=\"\" />\n                <span class=\"ios-badge\">4</span>\n                <div class=\"ios-app-label\">X</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/86801da39dc457b8.jpg\" alt=\"\" />\n                <span class=\"ios-badge\">797</span>\n                <div class=\"ios-app-label\">Proton Mail</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/f0d9dd220ced5635.jpg\" alt=\"\" />\n                <span class=\"ios-badge\">31.8K</span>\n                <div class=\"ios-app-label\">Gmail</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/9aa8de5cd5092f03.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Revolut</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/da6ec924a99c8d3c.jpg\" alt=\"\" />\n                <span class=\"ios-badge\">9+</span>\n                <div class=\"ios-app-label\">Phone</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/407d01c660156970.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Brave</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/37cf02fd6afa7181.jpg\" alt=\"\" />\n                <span class=\"ios-badge\">282</span>\n                <div class=\"ios-app-label\">WhatsApp</div>\n              </div>\n              <div class=\"ios-app\">\n                <img class=\"ios-app-icon\" src=\"/public/catalog/assets/00bd6b886fd23c9e.jpg\" alt=\"\" />\n                <div class=\"ios-app-label\">Music</div>\n              </div>\n            </div>\n\n            <div class=\"ios-notification-layer\">\n              <div id=\"ios-notification-a\" class=\"ios-notification-card\">\n                <div class=\"ios-notification-icon ios-notification-messages\"></div>\n                <div class=\"ios-notification-copy\">\n                  <div class=\"ios-notification-title\"><span>Messages</span><span>now</span></div>\n                  <div class=\"ios-notification-body\">Liquid Glass preview is ready for review.</div>\n                </div>\n              </div>\n              <div id=\"ios-notification-b\" class=\"ios-notification-card\">\n                <div class=\"ios-notification-icon ios-notification-hyperframes\"></div>\n                <div class=\"ios-notification-copy\">\n                  <div class=\"ios-notification-title\"><span>HyperFrames</span><span>1m</span></div>\n                  <div class=\"ios-notification-body\">One-worker render is ready.</div>\n                </div>\n              </div>\n              <div id=\"ios-notification-c\" class=\"ios-notification-card\">\n                <div class=\"ios-notification-icon ios-notification-gmail\"></div>\n                <div class=\"ios-notification-copy\">\n                  <div class=\"ios-notification-title\"><span>Gmail</span><span>2m</span></div>\n                  <div class=\"ios-notification-body\">Preview videos are live on CDN.</div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"ios-search-pill\">Search</div>\n\n            <div id=\"ios-real-dock\" class=\"ios-dock\">\n              <div class=\"ios-dock-item\">\n                <div class=\"ios-dock-icon ios-dock-phone\"></div>\n                <span class=\"ios-badge\">9+</span>\n              </div>\n              <div class=\"ios-dock-item\">\n                <div class=\"ios-dock-icon ios-dock-brave\"></div>\n              </div>\n              <div class=\"ios-dock-item\">\n                <div class=\"ios-dock-icon ios-dock-whatsapp\"></div>\n                <span class=\"ios-badge\">282</span>\n              </div>\n              <div class=\"ios-dock-item\">\n                <div class=\"ios-dock-icon ios-dock-music\"></div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </canvas>\n\n      <canvas\n        id=\"cap-laptop\"\n        layoutsubtree\n        width=\"1440\"\n        height=\"900\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1440px;\n          height: 900px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <div\n          id=\"laptop-html\"\n          style=\"\n            width: 1440px;\n            height: 900px;\n            overflow: hidden;\n            font-family: Inter, system-ui, sans-serif;\n            color: #e2e8f0;\n          \"\n        >\n          <div\n            id=\"laptop-scroll\"\n            style=\"background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)\"\n          >\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                padding: 18px 36px;\n                border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n              \"\n            >\n              <span\n                style=\"\n                  font-weight: 800;\n                  font-size: 17px;\n                  background: linear-gradient(135deg, #34d399, #3b82f6);\n                  -webkit-background-clip: text;\n                  -webkit-text-fill-color: transparent;\n                \"\n                >HyperFrames</span\n              >\n              <div\n                style=\"display: flex; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5)\"\n              >\n                <span>Docs</span><span>Playground</span><span>Pricing</span>\n              </div>\n              <span\n                style=\"\n                  font-size: 11px;\n                  font-weight: 600;\n                  padding: 6px 14px;\n                  border-radius: 6px;\n                  background: #10b981;\n                  color: #fff;\n                \"\n                >Log in</span\n              >\n            </div>\n            <div\n              id=\"laptop-title\"\n              style=\"\n                font-size: 40px;\n                font-weight: 800;\n                letter-spacing: -1px;\n                padding: 28px 36px 10px;\n                opacity: 0;\n              \"\n            >\n              Community Playground\n            </div>\n            <div style=\"font-size: 13px; color: rgba(255, 255, 255, 0.4); padding: 0 36px 18px\">\n              Create videos with HTML — powered by HyperFrames\n            </div>\n            <div style=\"display: flex; gap: 8px; padding: 0 36px 20px\">\n              <span\n                style=\"\n                  font-size: 10px;\n                  font-weight: 600;\n                  padding: 5px 12px;\n                  border-radius: 16px;\n                  background: rgba(16, 185, 129, 0.15);\n                  color: #10b981;\n                  border: 1px solid rgba(16, 185, 129, 0.3);\n                \"\n                >Examples</span\n              ><span\n                id=\"laptop-count\"\n                style=\"\n                  font-size: 10px;\n                  font-weight: 600;\n                  padding: 5px 12px;\n                  border-radius: 16px;\n                  border: 1px solid rgba(255, 255, 255, 0.1);\n                  color: rgba(255, 255, 255, 0.5);\n                \"\n                >Catalog 0</span\n              >\n            </div>\n            <div\n              id=\"laptop-cards\"\n              style=\"\n                display: grid;\n                grid-template-columns: repeat(3, 1fr);\n                gap: 14px;\n                padding: 0 36px 36px;\n              \"\n            ></div>\n          </div>\n        </div>\n      </canvas>\n\n      <canvas\n        id=\"theater\"\n        width=\"1920\"\n        height=\"1080\"\n        style=\"position: absolute; top: 0; left: 0; width: 1920px; height: 1080px\"\n      ></canvas>\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"15\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      var W = 1920,\n        H = 1080,\n        PI = Math.PI;\n\n      // ── Renderer ───────────────────────────────────────────────────────\n      var renderer = new THREE.WebGLRenderer({\n        canvas: document.getElementById(\"theater\"),\n        antialias: true,\n        preserveDrawingBuffer: true,\n      });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n      renderer.toneMapping = THREE.ACESFilmicToneMapping;\n      renderer.toneMappingExposure = 1.15;\n      renderer.outputEncoding = THREE.sRGBEncoding;\n      renderer.setClearColor(0x050508, 1);\n\n      var scene = new THREE.Scene();\n      scene.background = new THREE.Color(0x050508);\n      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);\n\n      // ── Environment Map ────────────────────────────────────────────────\n      var eC = document.createElement(\"canvas\");\n      eC.width = 1024;\n      eC.height = 512;\n      var ec = eC.getContext(\"2d\");\n      var eg = ec.createLinearGradient(0, 0, 1024, 512);\n      eg.addColorStop(0, \"#020307\");\n      eg.addColorStop(0.15, \"#1a1a2e\");\n      eg.addColorStop(0.3, \"#ffffff\");\n      eg.addColorStop(0.45, \"#0a0a1e\");\n      eg.addColorStop(0.6, \"#ffffff\");\n      eg.addColorStop(0.75, \"#1e1e2e\");\n      eg.addColorStop(1, \"#020307\");\n      ec.fillStyle = eg;\n      ec.fillRect(0, 0, 1024, 512);\n      ec.globalCompositeOperation = \"screen\";\n      for (var ei = 0; ei < 7; ei++) {\n        ec.fillStyle = \"rgba(255,255,255,\" + (ei % 2 === 0 ? 0.15 : 0.08) + \")\";\n        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);\n      }\n      var eT = new THREE.CanvasTexture(eC);\n      eT.mapping = THREE.EquirectangularReflectionMapping;\n      var pm = new THREE.PMREMGenerator(renderer);\n      scene.environment = pm.fromEquirectangular(eT).texture;\n      eT.dispose();\n      pm.dispose();\n\n      // ── Three.js shader backdrop ────────────────────────────────────────\n      var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };\n      var bgPlane = new THREE.Mesh(\n        new THREE.PlaneGeometry(28, 16),\n        new THREE.ShaderMaterial({\n          uniforms: bgUniforms,\n          vertexShader:\n            \"varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}\",\n          fragmentShader:\n            \"uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}\",\n          depthTest: false,\n          depthWrite: false,\n        }),\n      );\n      bgPlane.position.z = -7.5;\n      scene.add(bgPlane);\n\n      // Vibrant aurora-colored floor\n      var floor = new THREE.Mesh(\n        new THREE.PlaneGeometry(30, 30),\n        new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.86, roughness: 0.22 }),\n      );\n      floor.rotation.x = -PI / 2;\n      floor.position.y = -2.5;\n      scene.add(floor);\n\n      scene.add(new THREE.AmbientLight(0x222233, 0.5));\n      var kL = new THREE.DirectionalLight(0xffffff, 2.2);\n      kL.position.set(-3, 4, 5);\n      scene.add(kL);\n      var rL = new THREE.PointLight(0x6366f1, 3, 15);\n      rL.position.set(4, 2, 3);\n      scene.add(rL);\n      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);\n      wL.position.set(-3, -1, 4);\n      scene.add(wL);\n\n      // ── Live HTML → WebGL Texture  ─\n      var capPhoneCvs = document.getElementById(\"cap-phone\");\n      var capPhoneCtx = capPhoneCvs.getContext(\"2d\");\n      var phoneHtmlEl = document.getElementById(\"phone-html\");\n\n      var capLapCvs = document.getElementById(\"cap-laptop\");\n      var capLapCtx = capLapCvs.getContext(\"2d\");\n      var lapHtmlEl = document.getElementById(\"laptop-html\");\n\n      var apiOk = (function () {\n        var tc = document.createElement(\"canvas\");\n        if (!(\"layoutSubtree\" in tc)) return false;\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        var ctx = tc.getContext(\"2d\");\n        return ctx && typeof ctx.drawElementImage === \"function\";\n      })();\n      var paintReady = false;\n\n      function waitForImages() {\n        var images = Array.prototype.slice.call(document.querySelectorAll(\"img\"));\n        return Promise.all(\n          images.map(function (image) {\n            if (image.complete) return Promise.resolve();\n            return new Promise(function (resolveImage) {\n              image.onload = resolveImage;\n              image.onerror = resolveImage;\n            });\n          }),\n        );\n      }\n\n      function waitForPaint(canvas) {\n        return new Promise(function (resolvePaint) {\n          if (!canvas || typeof canvas.requestPaint !== \"function\") {\n            resolvePaint();\n            return;\n          }\n          var resolved = false;\n          function done() {\n            if (resolved) return;\n            resolved = true;\n            canvas.onpaint = null;\n            resolvePaint();\n          }\n          canvas.onpaint = done;\n          canvas.requestPaint();\n          setTimeout(done, 100);\n        });\n      }\n\n      // Generate card HTML for both screens\n      var cardData = [\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#2563eb)\",\n          text: \"100M+ AI team\",\n          title: \"Notion Showcase\",\n          meta: \"15s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#4a1942,#db2777)\",\n          text: \"Design System v4\",\n          title: \"Dribbble Showcase\",\n          meta: \"12s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#451a03,#f59e0b)\",\n          text: \"$1.9T Market Cap\",\n          title: \"Stripe Showcase\",\n          meta: \"10s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#064e3b,#10b981)\",\n          text: \"Ship faster with AI\",\n          title: \"Vercel Promo\",\n          meta: \"20s · 1080×1920\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#3b82f6)\",\n          text: \"Privacy App\",\n          title: \"iPhone App Store\",\n          meta: \"8s · 1080×1920\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#4a1942,#a855f7)\",\n          text: \"Audio Visualizer\",\n          title: \"Spotify Remix\",\n          meta: \"15s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#064e3b,#059669)\",\n          text: \"Code Animation\",\n          title: \"Terminal Demo\",\n          meta: \"12s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#451a03,#d97706)\",\n          text: \"Launch Video\",\n          title: \"Product Hunt\",\n          meta: \"30s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#6366f1)\",\n          text: \"3D Devices\",\n          title: \"Device Mockups\",\n          meta: \"15s · 1920×1080\",\n        },\n      ];\n      function makeCardHTML(cd, isMobile) {\n        var fs = isMobile ? 12 : 16;\n        return (\n          '<div style=\"background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +\n          (isMobile ? 10 : 12) +\n          'px;overflow:hidden;opacity:0\" class=\"anim-card\">' +\n          '<div style=\"width:100%;aspect-ratio:16/9;background:' +\n          cd.bg +\n          ';display:flex;align-items:center;justify-content:center\"><span style=\"font-size:' +\n          fs +\n          'px;font-weight:700;color:rgba(255,255,255,0.7)\">' +\n          cd.text +\n          \"</span></div>\" +\n          '<div style=\"padding:' +\n          (isMobile ? \"8px 10px\" : \"10px 14px\") +\n          '\"><div style=\"font-size:' +\n          (isMobile ? 11 : 13) +\n          'px;font-weight:600;margin-bottom:2px\">' +\n          cd.title +\n          '</div><div style=\"font-size:' +\n          (isMobile ? 9 : 10) +\n          'px;color:rgba(255,255,255,0.3)\">' +\n          cd.meta +\n          \"</div></div></div>\"\n        );\n      }\n      var phoneCardsEl = document.getElementById(\"phone-cards\");\n      var laptopCardsEl = document.getElementById(\"laptop-cards\");\n      for (var ci = 0; ci < cardData.length; ci++) {\n        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);\n        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);\n      }\n\n      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);\n      phoneTex.minFilter = THREE.LinearFilter;\n      phoneTex.magFilter = THREE.LinearFilter;\n      phoneTex.generateMipmaps = false;\n      var lapTex = new THREE.CanvasTexture(capLapCvs);\n      lapTex.minFilter = THREE.LinearFilter;\n      lapTex.magFilter = THREE.LinearFilter;\n      lapTex.generateMipmaps = false;\n      var glassBuffer = document.createElement(\"canvas\");\n      glassBuffer.width = 390;\n      glassBuffer.height = 844;\n      var glassBufferCtx = glassBuffer.getContext(\"2d\");\n\n      function pathRoundRect(ctx, x, y, w, h, r) {\n        var rr = Math.min(r, w / 2, h / 2);\n        ctx.beginPath();\n        ctx.moveTo(x + rr, y);\n        ctx.lineTo(x + w - rr, y);\n        ctx.quadraticCurveTo(x + w, y, x + w, y + rr);\n        ctx.lineTo(x + w, y + h - rr);\n        ctx.quadraticCurveTo(x + w, y + h, x + w - rr, y + h);\n        ctx.lineTo(x + rr, y + h);\n        ctx.quadraticCurveTo(x, y + h, x, y + h - rr);\n        ctx.lineTo(x, y + rr);\n        ctx.quadraticCurveTo(x, y, x + rr, y);\n        ctx.closePath();\n      }\n\n      function drawNotificationCard(ctx, progress, top, iconSelector, title, time, body) {\n        var p = Math.max(0, Math.min(1, progress));\n        if (p <= 0.001) return;\n        var q = notificationEase(p);\n        var lift = Math.sin(q * PI);\n        var y = 106 + top + (1 - q) * -58 + lift * 6;\n        var x = 13;\n        var w = 364;\n        var h = 66 + lift * 2;\n        ctx.save();\n        ctx.globalAlpha = q * 0.98;\n        ctx.shadowColor = \"rgba(0,0,0,0.54)\";\n        ctx.shadowBlur = 22;\n        ctx.shadowOffsetY = 14;\n        pathRoundRect(ctx, x, y, w, h, 23);\n        ctx.clip();\n        ctx.filter = \"blur(12px) saturate(1.55) brightness(1.24)\";\n        ctx.drawImage(glassBuffer, -4, -4, 398, 852);\n        ctx.filter = \"none\";\n        pathRoundRect(ctx, x, y, w, h, 23);\n        var fill = ctx.createLinearGradient(x, y, x + w, y + h);\n        fill.addColorStop(0, \"rgba(255,255,255,0.54)\");\n        fill.addColorStop(0.45, \"rgba(188,202,219,0.46)\");\n        fill.addColorStop(1, \"rgba(94,108,130,0.36)\");\n        ctx.fillStyle = fill;\n        ctx.fill();\n        ctx.globalCompositeOperation = \"screen\";\n        var caustic = ctx.createLinearGradient(x + 40, y, x + w - 20, y + h);\n        caustic.addColorStop(0, \"rgba(255,255,255,0.18)\");\n        caustic.addColorStop(0.36, \"rgba(117,230,255,0.15)\");\n        caustic.addColorStop(0.64, \"rgba(255,143,220,0.12)\");\n        caustic.addColorStop(1, \"rgba(255,255,255,0.08)\");\n        ctx.fillStyle = caustic;\n        ctx.fillRect(x, y, w, h);\n        ctx.globalCompositeOperation = \"source-over\";\n        ctx.shadowColor = \"transparent\";\n        pathRoundRect(ctx, x + 0.5, y + 0.5, w - 1, h - 1, 22.5);\n        ctx.strokeStyle = \"rgba(255,255,255,0.72)\";\n        ctx.lineWidth = 1;\n        ctx.stroke();\n        ctx.beginPath();\n        ctx.moveTo(x + 24, y + 11);\n        ctx.bezierCurveTo(x + 105, y - 2, x + 220, y + 7, x + w - 42, y + 12);\n        ctx.strokeStyle = \"rgba(255,255,255,0.38)\";\n        ctx.lineWidth = 2;\n        ctx.stroke();\n        pathRoundRect(ctx, x + 10, y + 14, 38, 38, 11);\n        ctx.fillStyle = \"rgba(255,255,255,0.58)\";\n        ctx.fill();\n        var icon = document.querySelector(iconSelector);\n        if (icon && icon.complete) {\n          ctx.save();\n          pathRoundRect(ctx, x + 10, y + 14, 38, 38, 11);\n          ctx.clip();\n          ctx.drawImage(icon, x + 10, y + 14, 38, 38);\n          ctx.restore();\n        }\n        ctx.fillStyle = \"#fff\";\n        ctx.shadowColor = \"rgba(0,0,0,0.32)\";\n        ctx.shadowBlur = 3;\n        ctx.shadowOffsetY = 1;\n        ctx.font = \"800 13px Inter, system-ui, sans-serif\";\n        ctx.textBaseline = \"top\";\n        ctx.fillText(title, x + 60, y + 13);\n        ctx.globalAlpha = q * 0.92;\n        ctx.font = \"800 12px Inter, system-ui, sans-serif\";\n        ctx.fillText(time, x + w - ctx.measureText(time).width - 14, y + 13);\n        ctx.globalAlpha = q * 0.95;\n        ctx.font = \"650 12px Inter, system-ui, sans-serif\";\n        ctx.fillText(body, x + 60, y + 34);\n        ctx.restore();\n      }\n\n      function drawCanvasNotifications(ctx) {\n        glassBufferCtx.clearRect(0, 0, 390, 844);\n        glassBufferCtx.drawImage(ctx.canvas, 0, 0);\n        drawNotificationCard(\n          ctx,\n          S.iosN1,\n          0,\n          \"#ios-notify-messages-preload\",\n          \"Messages\",\n          \"now\",\n          \"Liquid Glass preview is ready for review.\",\n        );\n        drawNotificationCard(\n          ctx,\n          S.iosN2,\n          68,\n          'img[src=\"/public/catalog/assets/919d352f7d618546.jpg\"]',\n          \"HyperFrames\",\n          \"1m\",\n          \"One-worker render is ready.\",\n        );\n        drawNotificationCard(\n          ctx,\n          S.iosN3,\n          136,\n          'img[src=\"/public/catalog/assets/f0d9dd220ced5635.jpg\"]',\n          \"Gmail\",\n          \"2m\",\n          \"Preview videos are live on CDN.\",\n        );\n      }\n\n      function captureScreens() {\n        if (!apiOk || !paintReady) return;\n        try {\n          capPhoneCtx.clearRect(0, 0, 390, 844);\n          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);\n          drawCanvasNotifications(capPhoneCtx);\n          capLapCtx.clearRect(0, 0, 1440, 900);\n          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);\n          phoneTex.needsUpdate = true;\n          lapTex.needsUpdate = true;\n        } catch (e) {}\n      }\n\n      // ── Turntable Group (both devices rotate together for 360° orbit) ──\n      var turntable = new THREE.Group();\n      scene.add(turntable);\n\n      // ── Model Groups ───────────────────────────────────────────────────\n      var phoneGrp = new THREE.Group();\n      turntable.add(phoneGrp);\n      var lapGrp = new THREE.Group();\n      turntable.add(lapGrp);\n      var ready = 0;\n\n      var draco = new THREE.DRACOLoader();\n      draco.setDecoderPath(\"https://www.gstatic.com/draco/versioned/decoders/1.5.6/\");\n      var loader = new THREE.GLTFLoader();\n      loader.setDRACOLoader(draco);\n\n      // iPhone\n      loader.load(\"models/iphone.glb\", function (gltf) {\n        var m = gltf.scene;\n        var box = new THREE.Box3().setFromObject(m);\n        var sz = box.getSize(new THREE.Vector3());\n        var s = 3.2 / sz.y;\n        m.scale.setScalar(s);\n        box.setFromObject(m);\n        m.position.sub(box.getCenter(new THREE.Vector3()));\n        m.traverse(function (child) {\n          if (!child.isMesh) return;\n          if (child.material && child.material.emissiveMap) {\n            child.material = new THREE.MeshBasicMaterial({ map: phoneTex });\n          }\n        });\n        phoneGrp.add(m);\n        ready++;\n        if (ready === 1) onReady();\n      });\n\n      function onReady() {\n        waitForImages()\n          .then(function () {\n            return waitForPaint(capPhoneCvs);\n          })\n          .then(function () {\n            paintReady = true;\n            captureScreens();\n            render();\n          });\n      }\n\n      // ── Cubic Bezier Implementation ────────────────────────────────────\n      function cbz(p1x, p1y, p2x, p2y) {\n        var ax = 3 * p1x - 3 * p2x + 1,\n          bx = 3 * p2x - 6 * p1x,\n          cx = 3 * p1x;\n        var ay = 3 * p1y - 3 * p2y + 1,\n          by = 3 * p2y - 6 * p1y,\n          cy = 3 * p1y;\n        return function (t) {\n          var s = t;\n          for (var i = 0; i < 12; i++) {\n            var x = ((ax * s + bx) * s + cx) * s - t;\n            var dx = (3 * ax * s + 2 * bx) * s + cx;\n            if (Math.abs(dx) < 1e-10) break;\n            s -= x / dx;\n          }\n          s = Math.max(0, Math.min(1, s));\n          return ((ay * s + by) * s + cy) * s;\n        };\n      }\n\n      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);\n      var notificationEase = cbz(0.22, 0.0, 0.16, 1.0);\n      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);\n      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);\n      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);\n      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);\n\n      // ── Animation State ────────────────────────────────────────────────\n      var S = {\n        phX: 0,\n        phY: 0.1,\n        phZ: 0.5,\n        phRX: 0,\n        phRY: PI,\n        phRZ: 0,\n        lpX: 10,\n        lpY: -0.2,\n        lpZ: -0.6,\n        lpRX: 0,\n        lpRY: 0,\n        lpRZ: 0,\n        cX: 0,\n        cY: 0.18,\n        cZ: 6.15,\n        clX: 0,\n        clY: 0.1,\n        clZ: 0,\n        drift: 0,\n        turn: 0,\n        cardReveal: 0,\n        titleFade: 0,\n        counter: 0,\n        iosN1: 0,\n        iosN2: 0,\n        iosN3: 0,\n        p: 0,\n      };\n\n      function render() {\n        var d = S.drift;\n\n        // ── Animate live HTML content (captured to texture every frame) ──\n        // Title fade-in\n        document.getElementById(\"phone-title\").style.opacity = S.titleFade;\n        document.getElementById(\"laptop-title\").style.opacity = S.titleFade;\n        // Counter\n        var cnt = Math.round(S.counter);\n        document.getElementById(\"phone-count\").textContent = \"Catalog \" + cnt;\n        document.getElementById(\"laptop-count\").textContent = \"Catalog \" + cnt;\n        // Staggered card reveal\n        var allCards = document.querySelectorAll(\".anim-card\");\n        for (var ci2 = 0; ci2 < allCards.length; ci2++) {\n          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));\n          allCards[ci2].style.opacity = cardProgress;\n          allCards[ci2].style.transform = \"translateY(\" + (1 - cardProgress) * 15 + \"px)\";\n        }\n        function dropNotification(id, progress) {\n          var el = document.getElementById(id);\n          if (!el) return;\n          var p = Math.max(0, Math.min(1, progress));\n          var q = notificationEase(p);\n          var overshoot = Math.sin(q * PI) * 5;\n          el.style.opacity = q;\n          el.style.transform =\n            \"translateY(\" + ((1 - q) * -125 + overshoot) + \"px) scale(\" + (0.98 + q * 0.02) + \")\";\n        }\n        dropNotification(\"ios-notification-a\", S.iosN1);\n        dropNotification(\"ios-notification-b\", S.iosN2);\n        dropNotification(\"ios-notification-c\", S.iosN3);\n        // Re-capture HTML to texture\n        captureScreens();\n\n        phoneGrp.position.set(\n          S.phX + Math.sin(d * 0.5) * 0.015,\n          S.phY + Math.sin(d * 0.7) * 0.008,\n          S.phZ + Math.cos(d * 0.4) * 0.008,\n        );\n        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);\n        lapGrp.position.set(\n          S.lpX - Math.sin(d * 0.4) * 0.012,\n          S.lpY + Math.sin(d * 0.6) * 0.006,\n          S.lpZ + Math.cos(d * 0.35) * 0.008,\n        );\n        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);\n        turntable.rotation.y = S.turn;\n        bgUniforms.uTime.value = d;\n        camera.position.set(S.cX, S.cY, S.cZ);\n        camera.lookAt(S.clX, S.clY, S.clZ);\n        renderer.render(scene, camera);\n      }\n\n      // ── GSAP Timeline — Product Review Edit ────────────────────────────\n      var tl = gsap.timeline({ paused: true });\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"ios26-liquid-glass\"] = tl;\n\n      tl.to(S, { p: 1, drift: 15, duration: 15, ease: \"none\" }, 0);\n\n      // ── iOS 26 Showcase: full-device hero with a subtle drift-in ──\n      tl.to(S, { cZ: 6.45, duration: 12, ease: driftEase }, 0.5);\n      tl.to(S, { cY: 0.16, duration: 12, ease: driftEase }, 0.5);\n\n      // Very gentle tilt — shows the glass icon refraction from slightly different angles\n      tl.to(S, { phRY: PI + 0.04, phRX: 0.01, duration: 4, ease: breatheEase }, 0.5);\n      tl.to(S, { phRY: PI - 0.03, phRX: -0.008, duration: 4, ease: breatheEase }, 4.5);\n      tl.to(S, { phRY: PI + 0.02, phRX: 0.005, duration: 4, ease: breatheEase }, 8.5);\n\n      // No scroll — keep the home screen static\n      // No 360° turntable — just the gentle zoom out\n\n      // Move MacBook off screen so it doesn't appear\n      tl.set(S, { lpX: 10 }, 0);\n      tl.to(S, { iosN1: 1, duration: 0.72, ease: \"none\" }, 0.85);\n      tl.to(S, { iosN2: 1, duration: 0.74, ease: \"none\" }, 1.7);\n      tl.to(S, { iosN3: 1, duration: 0.76, ease: \"none\" }, 2.55);\n      tl.to({}, { duration: 15, ease: \"none\", onUpdate: render }, 0);\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/light-leak.json b/docs/public/catalog/blocks/light-leak.json
new file mode 100644
index 0000000000..77b11166f9
--- /dev/null
+++ b/docs/public/catalog/blocks/light-leak.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #001524;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #fb8b24;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #fb8b24;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #fb8b24;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #fb8b24;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #fb8b24;\n          background: rgba(251, 139, 36, 0.06);\n          border: 1px solid rgba(251, 139, 36, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #708d81;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">14 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #001524\">\n        <div class=\"scene-label\" style=\"color: #fb8b24\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #fb8b24; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #001524\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Light Leak</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use light leak shader transition\"</div>\n        <div class=\"bp-desc\">\n          Beer-Lambert exponential falloff with ACES tone mapping and directional flare streak.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"vec3 aces(vec3 x){return clamp((x*(2.51*x+.03))/(x*(2.43*x+.59)+.14),0.,1.);}void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);vec2 lp=vec2(1.3,-.2);float dist=length(v_uv-lp);float leak=clamp(exp(-dist*1.8)*u_progress*4.,0.,1.);vec3 warmColor=mix(vec3(1.,.5,.15),vec3(1.,.9,.75),dist*.7);float flare=exp(-abs(v_uv.y-(-.2+v_uv.x*.3))*15.)*leak*.3;vec3 overexposed=A.rgb+warmColor*leak*3.+vec3(1.,.8,.5)*flare;overexposed=aces(overexposed);gl_FragColor=vec4(mix(overexposed,B.rgb,smoothstep(.15,.85,u_progress)),1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/liquid-glass-context-menu.json b/docs/public/catalog/blocks/liquid-glass-context-menu.json
new file mode 100644
index 0000000000..34b8287259
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-context-menu.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Liquid Glass Context Menu</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"></script>\n    <script src=\"data:text/javascript;base64,dmFyIExpcXVpZEdsYXNzID0gKCgpID0+IHsKICB2YXIgRSA9IE9iamVjdC5kZWZpbmVQcm9wZXJ0eTsKICB2YXIgRCA9IE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3I7CiAgdmFyIHogPSBPYmplY3QuZ2V0T3duUHJvcGVydHlOYW1lczsKICB2YXIgTiA9IE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHk7CiAgdmFyIE8gPSAobSwgZSkgPT4gewogICAgICBmb3IgKHZhciB0IGluIGUpIEUobSwgdCwgeyBnZXQ6IGVbdF0sIGVudW1lcmFibGU6ICEwIH0pOwogICAgfSwKICAgIEggPSAobSwgZSwgdCwgcikgPT4gewogICAgICBpZiAoKGUgJiYgdHlwZW9mIGUgPT0gIm9iamVjdCIpIHx8IHR5cGVvZiBlID09ICJmdW5jdGlvbiIpCiAgICAgICAgZm9yIChsZXQgbiBvZiB6KGUpKQogICAgICAgICAgIU4uY2FsbChtLCBuKSAmJgogICAgICAgICAgICBuICE9PSB0ICYmCiAgICAgICAgICAgIEUobSwgbiwgeyBnZXQ6ICgpID0+IGVbbl0sIGVudW1lcmFibGU6ICEociA9IEQoZSwgbikpIHx8IHIuZW51bWVyYWJsZSB9KTsKICAgICAgcmV0dXJuIG07CiAgICB9OwogIHZhciBJID0gKG0pID0+IEgoRSh7fSwgIl9fZXNNb2R1bGUiLCB7IHZhbHVlOiAhMCB9KSwgbSk7CiAgdmFyIFkgPSB7fTsKICBPKFksIHsKICAgIENTU19QUk9QRVJUWV9NQVA6ICgpID0+IF8sCiAgICBERUZBVUxUUzogKCkgPT4gdywKICAgIEdsYXNzUmVuZGVyZXJHUFU6ICgpID0+IHksCiAgICBMaXF1aWRHbGFzc0NhbnZhczogKCkgPT4gUiwKICB9KTsKICB2YXIgdyA9IHsKICAgICAgYmx1ckFtb3VudDogMCwKICAgICAgcmVmcmFjdGlvbjogMC42OSwKICAgICAgY2hyb21BYmVycmF0aW9uOiAwLjA1LAogICAgICBlZGdlSGlnaGxpZ2h0OiAwLjA1LAogICAgICBzcGVjdWxhcjogMCwKICAgICAgZnJlc25lbDogMSwKICAgICAgZGlzdG9ydGlvbjogMCwKICAgICAgY29ybmVyUmFkaXVzOiA2NSwKICAgICAgelJhZGl1czogNDAsCiAgICAgIG9wYWNpdHk6IDEsCiAgICAgIHNhdHVyYXRpb246IDAsCiAgICAgIHRpbnRTdHJlbmd0aDogMCwKICAgICAgYnJpZ2h0bmVzczogMCwKICAgICAgc2hhZG93T3BhY2l0eTogMC4zLAogICAgICBzaGFkb3dTcHJlYWQ6IDEwLAogICAgICBzaGFkb3dPZmZzZXRZOiAxLAogICAgICBiZXZlbE1vZGU6IDAsCiAgICB9LAogICAgXyA9IHsKICAgICAgIi0tbGctYmx1ciI6ICJibHVyQW1vdW50IiwKICAgICAgIi0tbGctcmVmcmFjdGlvbiI6ICJyZWZyYWN0aW9uIiwKICAgICAgIi0tbGctY2hyb20tYWJlcnJhdGlvbiI6ICJjaHJvbUFiZXJyYXRpb24iLAogICAgICAiLS1sZy1lZGdlLWhpZ2hsaWdodCI6ICJlZGdlSGlnaGxpZ2h0IiwKICAgICAgIi0tbGctc3BlY3VsYXIiOiAic3BlY3VsYXIiLAogICAgICAiLS1sZy1mcmVzbmVsIjogImZyZXNuZWwiLAogICAgICAiLS1sZy1kaXN0b3J0aW9uIjogImRpc3RvcnRpb24iLAogICAgICAiLS1sZy1jb3JuZXItcmFkaXVzIjogImNvcm5lclJhZGl1cyIsCiAgICAgICItLWxnLXotcmFkaXVzIjogInpSYWRpdXMiLAogICAgICAiLS1sZy1vcGFjaXR5IjogIm9wYWNpdHkiLAogICAgICAiLS1sZy1zYXR1cmF0aW9uIjogInNhdHVyYXRpb24iLAogICAgICAiLS1sZy10aW50IjogInRpbnRTdHJlbmd0aCIsCiAgICAgICItLWxnLWJyaWdodG5lc3MiOiAiYnJpZ2h0bmVzcyIsCiAgICAgICItLWxnLXNoYWRvdy1vcGFjaXR5IjogInNoYWRvd09wYWNpdHkiLAogICAgICAiLS1sZy1zaGFkb3ctc3ByZWFkIjogInNoYWRvd1NwcmVhZCIsCiAgICAgICItLWxnLXNoYWRvdy1vZmZzZXQteSI6ICJzaGFkb3dPZmZzZXRZIiwKICAgICAgIi0tbGctYmV2ZWwtbW9kZSI6ICJiZXZlbE1vZGUiLAogICAgfSwKICAgIEwgPSA2LAogICAgVCA9IDIwOwogIHZhciBxID0gYC8vIEJsaXQgc2hhZGVyIC0gY29weSB0ZXh0dXJlIHdpdGggVVYgdHJhbnNmb3JtCgpzdHJ1Y3QgQmxpdFVuaWZvcm1zIHsKICBzY2FsZTogdmVjMmYsCiAgb2Zmc2V0OiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBCbGl0VW5pZm9ybXM7CkBncm91cCgwKSBAYmluZGluZygxKSB2YXIgdGV4U2FtcGxlcjogc2FtcGxlcjsKQGdyb3VwKDApIEBiaW5kaW5nKDIpIHZhciB0ZXg6IHRleHR1cmVfMmQ8ZjMyPjsKCnN0cnVjdCBWZXJ0ZXhPdXRwdXQgewogIEBidWlsdGluKHBvc2l0aW9uKSBwb3NpdGlvbjogdmVjNGYsCiAgQGxvY2F0aW9uKDApIHV2OiB2ZWMyZiwKfQoKQHZlcnRleApmbiB2ZXJ0ZXhNYWluKEBsb2NhdGlvbigwKSBwb3M6IHZlYzJmKSAtPiBWZXJ0ZXhPdXRwdXQgewogIHZhciBvdXQ6IFZlcnRleE91dHB1dDsKICBvdXQudXYgPSBwb3MgKiAwLjUgKyAwLjU7CiAgb3V0LnBvc2l0aW9uID0gdmVjNGYocG9zLCAwLjAsIDEuMCk7CiAgcmV0dXJuIG91dDsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIHJldHVybiB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKiB1LnNjYWxlICsgdS5vZmZzZXQpOwp9CmAsCiAgICBrID0gYC8vIEJsdXIgc2hhZGVyIC0gOS10YXAgR2F1c3NpYW4gYmx1ciAoc2luZ2xlIGRpcmVjdGlvbikKCnN0cnVjdCBCbHVyVW5pZm9ybXMgewogIGRpcjogdmVjMmYsCiAgX3BhZDogdmVjMmYsCn0KCkBncm91cCgwKSBAYmluZGluZygwKSB2YXI8dW5pZm9ybT4gdTogQmx1clVuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgdGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSB1djogdmVjMmYsCn0KCkB2ZXJ0ZXgKZm4gdmVydGV4TWFpbihAbG9jYXRpb24oMCkgcG9zOiB2ZWMyZikgLT4gVmVydGV4T3V0cHV0IHsKICB2YXIgb3V0OiBWZXJ0ZXhPdXRwdXQ7CiAgb3V0LnV2ID0gcG9zICogMC41ICsgMC41OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKHBvcywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCkBmcmFnbWVudApmbiBmcmFnbWVudE1haW4oaW46IFZlcnRleE91dHB1dCkgLT4gQGxvY2F0aW9uKDApIHZlYzRmIHsKICB2YXIgcyA9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51dikgKiAwLjIyNzAyNzsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogMS4wKSAqIDAuMTk0NTk0OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiAxLjApICogMC4xOTQ1OTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKyB1LmRpciAqIDIuMCkgKiAwLjEyMTYyMjsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diAtIHUuZGlyICogMi4wKSAqIDAuMTIxNjIyOwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2ICsgdS5kaXIgKiAzLjApICogMC4wNTQwNTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgLSB1LmRpciAqIDMuMCkgKiAwLjA1NDA1NDsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogNC4wKSAqIDAuMDE2MjE2OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiA0LjApICogMC4wMTYyMTY7CiAgcmV0dXJuIHM7Cn0KYCwKICAgIFcgPSBgLy8gR2xhc3Mgc2hhZGVyIC0gdGhlIGNvcmUgbGlxdWlkIGdsYXNzIGVmZmVjdAoKc3RydWN0IEdsYXNzVW5pZm9ybXMgewogIGNlbnRlcjogdmVjMmYsCiAgc2l6ZTogdmVjMmYsCiAgcmVzOiB2ZWMyZiwKICByYWRpdXM6IGYzMiwKICBwYWQ6IGYzMiwKICByZWZyYWN0OiBmMzIsCiAgY2hyb21hOiBmMzIsCiAgZWRnZUhMOiBmMzIsCiAgc3BlYzogZjMyLAogIGZyZXNuZWw6IGYzMiwKICBkaXN0b3J0OiBmMzIsCiAgYWxwaGE6IGYzMiwKICBzYXQ6IGYzMiwKICB0aW50OiBmMzIsCiAgelJhZGl1czogZjMyLAogIGJyaWdodG5lc3M6IGYzMiwKICBzaGFkb3dBbHBoYTogZjMyLAogIHNoYWRvd1NwcmVhZDogZjMyLAogIHNoYWRvd09mZlk6IGYzMiwKICBiZXZlbE1vZGU6IGYzMiwKICBfcGFkOiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBHbGFzc1VuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgYmdUZXg6IHRleHR1cmVfMmQ8ZjMyPjsKQGdyb3VwKDApIEBiaW5kaW5nKDMpIHZhciBibHVyVGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSBsb2NhbFB4OiB2ZWMyZiwKICBAbG9jYXRpb24oMSkgc2NyZWVuVVY6IHZlYzJmLAp9CgpAdmVydGV4CmZuIHZlcnRleE1haW4oQGxvY2F0aW9uKDApIHBvczogdmVjMmYpIC0+IFZlcnRleE91dHB1dCB7CiAgdmFyIG91dDogVmVydGV4T3V0cHV0OwogIGxldCB0b3RhbCA9IHUuc2l6ZSArIHZlYzJmKHUucGFkICogMi4wKTsKICBvdXQubG9jYWxQeCA9IHBvcyAqIHRvdGFsOwogIGxldCBweCA9IHUuY2VudGVyICsgcG9zICogdG90YWw7CiAgb3V0LnNjcmVlblVWID0gdmVjMmYocHgueCAvIHUucmVzLngsIDEuMCAtIHB4LnkgLyB1LnJlcy55KTsKICB2YXIgbmRjID0gKHB4IC8gdS5yZXMpICogMi4wIC0gMS4wOwogIG5kYy55ID0gLW5kYy55OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKG5kYywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCi8vIFJvdW5kZWQtcmVjdCBzaWduZWQgZGlzdGFuY2UKZm4gcnJTREYocDogdmVjMmYsIGI6IHZlYzJmLCByOiBmMzIpIC0+IGYzMiB7CiAgbGV0IHEgPSBhYnMocCkgLSBiICsgdmVjMmYocik7CiAgcmV0dXJuIG1pbihtYXgocS54LCBxLnkpLCAwLjApICsgbGVuZ3RoKG1heChxLCB2ZWMyZigwLjApKSkgLSByOwp9CgovLyBCZXZlbCBoZWlnaHQgZmllbGQKZm4gYmV2ZWxIZWlnaHQoZDogZjMyLCB6UjogZjMyKSAtPiBmMzIgewogIGlmIChkIDw9IDAuMCkgeyByZXR1cm4gMC4wOyB9CiAgaWYgKGQgPj0gelIpIHsgcmV0dXJuIHpSOyB9CiAgcmV0dXJuIHNxcnQoZCAqICgyLjAgKiB6UiAtIGQpKTsKfQoKZm4gaGFzaChwOiB2ZWMyZikgLT4gZjMyIHsKICByZXR1cm4gZnJhY3Qoc2luKGRvdChwLCB2ZWMyZigxMjcuMSwgMzExLjcpKSkgKiA0Mzc1OC41NDUzKTsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIGxldCBoYWxmXyA9IHUuc2l6ZSAqIDAuNTsKICBsZXQgciA9IG1pbih1LnJhZGl1cywgbWluKGhhbGZfLngsIGhhbGZfLnkpKTsKICBsZXQgc2RmID0gcnJTREYoaW4ubG9jYWxQeCwgaGFsZl8sIHIpOwoKICAvLyBBbnRpLWFsaWFzZWQgbWFzawogIGxldCBtYXNrID0gMS4wIC0gc21vb3Roc3RlcCgtMS41LCAwLjUsIHNkZik7CgogIGxldCBtYXhEID0gbWluKGhhbGZfLngsIGhhbGZfLnkpOwogIGxldCBpbnNpZGUgPSAtc2RmOwogIGxldCBlZGdlID0gc21vb3Roc3RlcChtYXhEICogMC4zNSwgMC4wLCBpbnNpZGUpOwoKICAvLyBTdXJmYWNlIG5vcm1hbCB2aWEgYmV2ZWwgaGVpZ2h0IGZpZWxkCiAgbGV0IHpSID0gdS56UmFkaXVzOwogIGxldCBlID0gMi4wOwogIGxldCBkQyA9IGluc2lkZTsKICBsZXQgZFIgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZEwgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZFUgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgZEQgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgaEMgPSBiZXZlbEhlaWdodChkQywgelIpOwogIGxldCBoUiA9IGJldmVsSGVpZ2h0KGRSLCB6Uik7CiAgbGV0IGhMID0gYmV2ZWxIZWlnaHQoZEwsIHpSKTsKICBsZXQgaFUgPSBiZXZlbEhlaWdodChkVSwgelIpOwogIGxldCBoRCA9IGJldmVsSGVpZ2h0KGRELCB6Uik7CiAgbGV0IGhHcmFkID0gdmVjMmYoaFIgLSBoTCwgaFUgLSBoRCkgLyAoMi4wICogZSk7CiAgbGV0IE4gPSBub3JtYWxpemUodmVjM2YoLWhHcmFkLCAxLjApKTsKCiAgbGV0IGRlcHRoID0gc21vb3Roc3RlcCgwLjAsIHpSLCBpbnNpZGUpOwoKICAvLyBSZWZyYWN0aW9uIC0gY29tcHV0ZSBib3RoIG1vZGVzIGFuZCBzZWxlY3QKICBsZXQgcHhUb1VWID0gdmVjMmYoMS4wLCAtMS4wKSAvIHUucmVzOwogIGxldCBpb3IgPSAxLjU7CiAgbGV0IHJlZnJQb3cgPSAxLjAgLSAxLjAgLyBpb3I7CiAgbGV0IHRoaWNrbmVzcyA9IGhDICogMi4wOwogIGxldCB0aGlja05vcm0gPSB0aGlja25lc3MgLyBtYXgoelIgKiAyLjAsIDEuMCk7CgogIC8vIEJpY29udmV4IG1vZGUKICBsZXQgZXhpdFJlZnIgPSBoR3JhZCAqIHJlZnJQb3c7CiAgbGV0IGVudHJ5UmVmciA9IGhHcmFkICogcmVmclBvdzsKICBsZXQgdGhyb3VnaFJlZnIgPSBlbnRyeVJlZnIgKiB0aGlja05vcm0gKiAwLjU7CiAgdmFyIHJlZnJQeEJpY29udmV4ID0gKGV4aXRSZWZyICsgZW50cnlSZWZyICsgdGhyb3VnaFJlZnIpICogdS5yZWZyYWN0ICogMzAuMDsKICBsZXQgY2VudGVyRGlyID0gLWluLmxvY2FsUHggLyBtYXgoaGFsZl8sIHZlYzJmKDEuMCkpOwogIHJlZnJQeEJpY29udmV4ICs9IGNlbnRlckRpciAqIHUucmVmcmFjdCAqIDQuMCAqIGRlcHRoOwoKICAvLyBEb21lIG1vZGUKICBsZXQgcmVmclB4RG9tZSA9IC1pbi5sb2NhbFB4ICogdS5yZWZyYWN0ICogZGVwdGggKiAwLjM1OwoKICAvLyBTZWxlY3QgYmFzZWQgb24gYmV2ZWwgbW9kZQogIGxldCByZWZyUHggPSBzZWxlY3QocmVmclB4Qmljb252ZXgsIHJlZnJQeERvbWUsIHUuYmV2ZWxNb2RlID49IDAuNSk7CiAgbGV0IHJlZnIgPSByZWZyUHggKiBweFRvVVY7CgogIC8vIE1pY3JvLWRpc3RvcnRpb24gbm9pc2UKICBsZXQgbnMgPSBpbi5sb2NhbFB4ICogMC4wODsKICBsZXQgYWJzUHhUb1VWID0gdmVjMmYoMS4wKSAvIHUucmVzOwogIGxldCBtaWNybyA9ICh2ZWMyZihoYXNoKG5zKSwgaGFzaChucyArIHZlYzJmKDM3LjApKSkgLSAwLjUpICogdS5kaXN0b3J0ICogNC4wICogYWJzUHhUb1VWOwoKICAvLyBDaHJvbWF0aWMgYWJlcnJhdGlvbgogIGxldCBjYVMgPSB1LmNocm9tYSAqIDE4LjAgKiAoZWRnZSAqIDAuNyArIDAuMykgKiAyLjA7CiAgbGV0IGNhRCA9IE4ueHkgKiBjYVMgKiBweFRvVVY7CiAgbGV0IGJhc2UgPSBpbi5zY3JlZW5VViArIHJlZnIgKyBtaWNybzsKCiAgLy8gU2FtcGxlIHRleHR1cmVzIChtdXN0IGJlIGluIHVuaWZvcm0gY29udHJvbCBmbG93KQogIGxldCBzaGFycFIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlICsgY2FEKS5yOwogIGxldCBzaGFycEcgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBzaGFycEIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlIC0gY2FEKS5iOwogIGxldCBzaGFycCA9IHZlYzNmKHNoYXJwUiwgc2hhcnBHLCBzaGFycEIpOwoKICBsZXQgYmx1clIgPSB0ZXh0dXJlU2FtcGxlKGJsdXJUZXgsIHRleFNhbXBsZXIsIGJhc2UgKyBjYUQpLnI7CiAgbGV0IGJsdXJHID0gdGV4dHVyZVNhbXBsZShibHVyVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBibHVyQiA9IHRleHR1cmVTYW1wbGUoYmx1clRleCwgdGV4U2FtcGxlciwgYmFzZSAtIGNhRCkuYjsKICBsZXQgYmx1ciA9IHZlYzNmKGJsdXJSLCBibHVyRywgYmx1ckIpOwoKICAvLyBFZGdlLXdlaWdodGVkIGJsdXIgbWl4CiAgbGV0IGVkZ2VNaXggPSAxLjAgLSBlZGdlICogMC4xNTsKICB2YXIgY29sID0gbWl4KHNoYXJwLCBibHVyLCBlZGdlTWl4KTsKCiAgLy8gQnJpZ2h0bmVzcwogIGNvbCAqPSAxLjAgKyB1LmJyaWdodG5lc3M7CgogIC8vIFNhdHVyYXRpb24KICBsZXQgbHVtID0gZG90KGNvbCwgdmVjM2YoMC4yOTksIDAuNTg3LCAwLjExNCkpOwogIGNvbCA9IG1peCh2ZWMzZihsdW0pLCBjb2wsIDEuMCArIHUuc2F0KTsKCiAgLy8gQ29vbCBnbGFzcyB0aW50CiAgY29sID0gbWl4KGNvbCwgY29sICogdmVjM2YoMC45MiwgMC45NSwgMS4wNSksIHUudGludCk7CiAgY29sICo9IDEuMCArIDAuMDYgKiBkZXB0aDsKCiAgLy8gRnJlc25lbAogIGxldCBmcmVzID0gcG93KDEuMCAtIGFicyhOLnopLCA0LjApICogdS5mcmVzbmVsOwoKICAvLyBTcGVjdWxhciBoaWdobGlnaHRzIChtdWx0aS1saWdodCBCbGlubi1QaG9uZykKICBsZXQgViA9IHZlYzNmKDAuMCwgMC4wLCAxLjApOwogIGxldCBMMSA9IG5vcm1hbGl6ZSh2ZWMzZigwLjQsIDAuNywgMS4wKSk7CiAgbGV0IEgxID0gbm9ybWFsaXplKEwxICsgVik7CiAgbGV0IHNwMSA9IHBvdyhtYXgoZG90KE4sIEgxKSwgMC4wKSwgOTAuMCk7CiAgbGV0IEwyID0gbm9ybWFsaXplKHZlYzNmKC0wLjMsIC0wLjUsIDEuMCkpOwogIGxldCBIMiA9IG5vcm1hbGl6ZShMMiArIFYpOwogIGxldCBzcDIgPSBwb3cobWF4KGRvdChOLCBIMiksIDAuMCksIDUwLjApICogMC4zOwogIGxldCBMMyA9IG5vcm1hbGl6ZSh2ZWMzZigwLjEsIDAuMywgMS4wKSk7CiAgbGV0IHNwQiA9IHBvdyhtYXgoZG90KE4sIEwzKSwgMC4wKSwgNi4wKSAqIDAuMTsKICBsZXQgTDQgPSBub3JtYWxpemUodmVjM2YoMC4wLCAwLjksIDAuNCkpOwogIGxldCBINCA9IG5vcm1hbGl6ZShMNCArIFYpOwogIGxldCBzcDQgPSBwb3cobWF4KGRvdChOLCBINCksIDAuMCksIDEyMC4wKSAqIDAuNjsKICBsZXQgdG90YWxTcGVjID0gKHNwMSArIHNwMiArIHNwQiArIHNwNCkgKiB1LnNwZWM7CgogIC8vIElubmVyIGJvcmRlciAvIHN0cm9rZSBoaWdobGlnaHQKICBsZXQgYm9yZGVyV2lkdGggPSAxLjU7CiAgbGV0IGlubmVyU3Ryb2tlID0gc21vb3Roc3RlcCgtYm9yZGVyV2lkdGggLSAxLjAsIC1ib3JkZXJXaWR0aCwgc2RmKQogICAgICAgICAgICAgICAgICAqICgxLjAgLSBzbW9vdGhzdGVwKC0xLjAsIDAuMCwgc2RmKSk7CiAgbGV0IHRvcEJpYXMgPSAwLjUgKyAwLjUgKiAoLWluLmxvY2FsUHgueSAvIGhhbGZfLnkpOwogIGxldCBpbm5lclN0cm9rZUZpbmFsID0gaW5uZXJTdHJva2UgKiAoMC40ICsgMC42ICogdG9wQmlhcyk7CgogIC8vIEVkZ2UgaGlnaGxpZ2h0ICYgaW5uZXIgZ2xvdwogIGxldCByaW0gPSBlZGdlICogdS5lZGdlSEwgKiAwLjIyOwogIGxldCBpbm5lckdsb3cgPSBzbW9vdGhzdGVwKDUuMCwgMC4wLCAtc2RmKSAqIHUuZWRnZUhMICogMC4xNTsKCiAgLy8gRW52aXJvbm1lbnQtbGlrZSByZWZsZWN0aW9uIChmYWtlKQogIGxldCBlbnZSZWZsID0gKE4ueSAqIDAuNSArIDAuNSkgKiBmcmVzICogMC4wODsKCiAgLy8gQ29tcG9zaXRlIGdsYXNzIGVmZmVjdAogIHZhciBmaW4gPSBjb2w7CiAgZmluICs9IHZlYzNmKHRvdGFsU3BlYyk7CiAgZmluICs9IHZlYzNmKHJpbSArIGlubmVyR2xvdyk7CiAgZmluICs9IHZlYzNmKGlubmVyU3Ryb2tlRmluYWwgKiB1LmVkZ2VITCAqIDAuNTUpOwogIGZpbiArPSB2ZWMzZihlbnZSZWZsKTsKICBmaW4gPSBtaXgoZmluLCB2ZWMzZigxLjApLCBmcmVzICogMC4yKTsKCiAgLy8gU2hhZG93IGNhbGN1bGF0aW9uIChvdXRzaWRlIHBhbmVsKQogIGxldCBzZGZTaGFkb3cgPSByclNERihpbi5sb2NhbFB4IC0gdmVjMmYoMC4wLCB1LnNoYWRvd09mZlkpLCBoYWxmXywgcik7CiAgbGV0IHNoYWRvd0QgPSBtYXgoc2RmU2hhZG93IC0gMS4wLCAwLjApOwogIGxldCBzcHJlYWQgPSBtYXgodS5zaGFkb3dTcHJlYWQsIDEuMCk7CiAgbGV0IGZhbGxvZmYgPSAxLjAgLyAoc3ByZWFkICogc3ByZWFkKTsKICBsZXQgb3V0ZXJTaGFkb3cgPSBleHAoLXNoYWRvd0QgKiBzaGFkb3dEICogZmFsbG9mZikgKiAwLjY1OwogIGxldCBjb250YWN0U2hhZG93ID0gZXhwKC1zaGFkb3dEICogMC4wOCAvIG1heChzcHJlYWQgKiAwLjA0LCAwLjAxKSkgKiAwLjM1OwogIGxldCBzaGFkb3cgPSAob3V0ZXJTaGFkb3cgKyBjb250YWN0U2hhZG93KSAqIHUuc2hhZG93QWxwaGE7CgogIC8vIFNlbGVjdCBiZXR3ZWVuIHNoYWRvdyAob3V0c2lkZSkgYW5kIGdsYXNzIChpbnNpZGUpCiAgbGV0IGlzT3V0c2lkZSA9IHNkZiA+IDAuMDsKICBsZXQgZmluYWxDb2xvciA9IHNlbGVjdChmaW4sIHZlYzNmKDAuMCksIGlzT3V0c2lkZSk7CiAgbGV0IGZpbmFsQWxwaGEgPSBzZWxlY3QobWFzayAqIHUuYWxwaGEsIHNoYWRvdywgaXNPdXRzaWRlKTsKCiAgcmV0dXJuIHZlYzRmKGZpbmFsQ29sb3IsIGZpbmFsQWxwaGEpOwp9CmAsCiAgICB5ID0gY2xhc3MgewogICAgICBjYW52YXM7CiAgICAgIGRldmljZSA9IG51bGw7CiAgICAgIGNvbnRleHQgPSBudWxsOwogICAgICBmb3JtYXQgPSAiYmdyYTh1bm9ybSI7CiAgICAgIGJsaXRQaXBlbGluZSA9IG51bGw7CiAgICAgIGJsdXJQaXBlbGluZSA9IG51bGw7CiAgICAgIGdsYXNzUGlwZWxpbmUgPSBudWxsOwogICAgICBxdWFkQnVmZmVyID0gbnVsbDsKICAgICAgcGFuZWxCdWZmZXIgPSBudWxsOwogICAgICBibGl0VW5pZm9ybUJ1ZmZlciA9IG51bGw7CiAgICAgIGJsdXJVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgZ2xhc3NVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgc2FtcGxlciA9IG51bGw7CiAgICAgIHRhcmdldENhY2hlID0gbmV3IE1hcCgpOwogICAgICBhY3RpdmVUYXJnZXRzID0gbnVsbDsKICAgICAgYmdUZXh0dXJlID0gbnVsbDsKICAgICAgYmdUZXh0dXJlVmlldyA9IG51bGw7CiAgICAgIHdpZHRoID0gMDsKICAgICAgaGVpZ2h0ID0gMDsKICAgICAgX2luaXRQcm9taXNlID0gbnVsbDsKICAgICAgX2luaXRpYWxpemVkID0gITE7CiAgICAgIGNvbnN0cnVjdG9yKCkgewogICAgICAgICgodGhpcy5jYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgICAodGhpcy5jYW52YXMuc3R5bGUuZGlzcGxheSA9ICJub25lIiksCiAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMuY2FudmFzKSk7CiAgICAgIH0KICAgICAgYXN5bmMgaW5pdCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgID8gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgIDogKCh0aGlzLl9pbml0UHJvbWlzZSA9IHRoaXMuX2RvSW5pdCgpKSwgdGhpcy5faW5pdFByb21pc2UpOwogICAgICB9CiAgICAgIGFzeW5jIF9kb0luaXQoKSB7CiAgICAgICAgaWYgKCFuYXZpZ2F0b3IuZ3B1KSByZXR1cm4gKGNvbnNvbGUud2FybigiV2ViR1BVIG5vdCBzdXBwb3J0ZWQiKSwgITEpOwogICAgICAgIGxldCBlID0gYXdhaXQgbmF2aWdhdG9yLmdwdS5yZXF1ZXN0QWRhcHRlcigpOwogICAgICAgIHJldHVybiBlCiAgICAgICAgICA/ICgodGhpcy5kZXZpY2UgPSBhd2FpdCBlLnJlcXVlc3REZXZpY2UoKSksCiAgICAgICAgICAgIHRoaXMuZGV2aWNlCiAgICAgICAgICAgICAgPyAoKHRoaXMuY29udGV4dCA9IHRoaXMuY2FudmFzLmdldENvbnRleHQoIndlYmdwdSIpKSwKICAgICAgICAgICAgICAgIHRoaXMuY29udGV4dAogICAgICAgICAgICAgICAgICA/ICgodGhpcy5mb3JtYXQgPSBuYXZpZ2F0b3IuZ3B1LmdldFByZWZlcnJlZENhbnZhc0Zvcm1hdCgpKSwKICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbnRleHQuY29uZmlndXJlKHsKICAgICAgICAgICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgICAgICAgICBmb3JtYXQ6IHRoaXMuZm9ybWF0LAogICAgICAgICAgICAgICAgICAgICAgYWxwaGFNb2RlOiAicHJlbXVsdGlwbGllZCIsCiAgICAgICAgICAgICAgICAgICAgfSksCiAgICAgICAgICAgICAgICAgICAgdGhpcy5faW5pdFBpcGVsaW5lcygpLAogICAgICAgICAgICAgICAgICAgIHRoaXMuX2luaXRCdWZmZXJzKCksCiAgICAgICAgICAgICAgICAgICAgKHRoaXMuX2luaXRpYWxpemVkID0gITApLAogICAgICAgICAgICAgICAgICAgICEwKQogICAgICAgICAgICAgICAgICA6IChjb25zb2xlLndhcm4oIkZhaWxlZCB0byBnZXQgV2ViR1BVIGNvbnRleHQiKSwgITEpKQogICAgICAgICAgICAgIDogKGNvbnNvbGUud2FybigiRmFpbGVkIHRvIGdldCBXZWJHUFUgZGV2aWNlIiksICExKSkKICAgICAgICAgIDogKGNvbnNvbGUud2FybigiTm8gV2ViR1BVIGFkYXB0ZXIgZm91bmQiKSwgITEpOwogICAgICB9CiAgICAgIGdldCBpbml0aWFsaXplZCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICAgIH0KICAgICAgX2luaXRQaXBlbGluZXMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICB0aGlzLnNhbXBsZXIgPSBlLmNyZWF0ZVNhbXBsZXIoewogICAgICAgICAgbWFnRmlsdGVyOiAibGluZWFyIiwKICAgICAgICAgIG1pbkZpbHRlcjogImxpbmVhciIsCiAgICAgICAgICBhZGRyZXNzTW9kZVU6ICJjbGFtcC10by1lZGdlIiwKICAgICAgICAgIGFkZHJlc3NNb2RlVjogImNsYW1wLXRvLWVkZ2UiLAogICAgICAgIH0pOwogICAgICAgIGxldCB0ID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBxIH0pLAogICAgICAgICAgciA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsaXRQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW3JdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogdCwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiB0LCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBuID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBrIH0pLAogICAgICAgICAgaSA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsdXJQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2ldIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogbiwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiBuLCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBzID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBXIH0pLAogICAgICAgICAgbCA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAzLCB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwgdGV4dHVyZTogeyBzYW1wbGVUeXBlOiAiZmxvYXQiIH0gfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIHRoaXMuZ2xhc3NQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2xdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogcywKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsKICAgICAgICAgICAgbW9kdWxlOiBzLAogICAgICAgICAgICBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwKICAgICAgICAgICAgdGFyZ2V0czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGZvcm1hdDogdGhpcy5mb3JtYXQsCiAgICAgICAgICAgICAgICBibGVuZDogewogICAgICAgICAgICAgICAgICBjb2xvcjogewogICAgICAgICAgICAgICAgICAgIHNyY0ZhY3RvcjogInNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgb3BlcmF0aW9uOiAiYWRkIiwKICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgYWxwaGE6IHsgc3JjRmFjdG9yOiAib25lIiwgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsIG9wZXJhdGlvbjogImFkZCIgfSwKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0sCiAgICAgICAgICBwcmltaXRpdmU6IHsgdG9wb2xvZ3k6ICJ0cmlhbmdsZS1zdHJpcCIgfSwKICAgICAgICB9KTsKICAgICAgfQogICAgICBfaW5pdEJ1ZmZlcnMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICAoKHRoaXMucXVhZEJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlZFUlRFWCwKICAgICAgICAgIG1hcHBlZEF0Q3JlYXRpb246ICEwLAogICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5xdWFkQnVmZmVyLmdldE1hcHBlZFJhbmdlKCkpLnNldChbLTEsIC0xLCAxLCAtMSwgLTEsIDEsIDEsIDFdKSwKICAgICAgICAgIHRoaXMucXVhZEJ1ZmZlci51bm1hcCgpLAogICAgICAgICAgKHRoaXMucGFuZWxCdWZmZXIgPSBlLmNyZWF0ZUJ1ZmZlcih7CiAgICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVkVSVEVYLAogICAgICAgICAgICBtYXBwZWRBdENyZWF0aW9uOiAhMCwKICAgICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5wYW5lbEJ1ZmZlci5nZXRNYXBwZWRSYW5nZSgpKS5zZXQoWwogICAgICAgICAgICAtMC41LCAtMC41LCAwLjUsIC0wLjUsIC0wLjUsIDAuNSwgMC41LCAwLjUsCiAgICAgICAgICBdKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIudW5tYXAoKSwKICAgICAgICAgICh0aGlzLmJsaXRVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmJsdXJVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmdsYXNzVW5pZm9ybUJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgICAgc2l6ZTogMTEyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVU5JRk9STSB8IEdQVUJ1ZmZlclVzYWdlLkNPUFlfRFNULAogICAgICAgICAgfSkpKTsKICAgICAgfQogICAgICByZXNpemUoZSwgdCkgewogICAgICAgIGlmICghKHRoaXMud2lkdGggPT09IGUgJiYgdGhpcy5oZWlnaHQgPT09IHQpKSB7CiAgICAgICAgICAoKHRoaXMud2lkdGggPSBlKSwgKHRoaXMuaGVpZ2h0ID0gdCkpOwogICAgICAgICAgZm9yIChsZXQgciBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KHIpOwogICAgICAgICAgKHRoaXMudGFyZ2V0Q2FjaGUuY2xlYXIoKSwgKHRoaXMuYWN0aXZlVGFyZ2V0cyA9IG51bGwpKTsKICAgICAgICB9CiAgICAgIH0KICAgICAgdXBsb2FkQW5kQmx1cihlLCB0LCByLCBuLCBpLCBzKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuX3NldEFjdGl2ZVNpemUobiwgaSkpIHJldHVybjsKICAgICAgICBsZXQgbCA9IHRoaXMuZGV2aWNlLAogICAgICAgICAgYSA9IHRoaXMud2lkdGgsCiAgICAgICAgICB1ID0gdGhpcy5oZWlnaHQsCiAgICAgICAgICBvID0gdGhpcy5hY3RpdmVUYXJnZXRzLAogICAgICAgICAgZCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImNhbnZhcyIpOwogICAgICAgICgoZC53aWR0aCA9IGEpLAogICAgICAgICAgKGQuaGVpZ2h0ID0gdSksCiAgICAgICAgICBkLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKGUsIC10LCAtciksCiAgICAgICAgICAoIXRoaXMuYmdUZXh0dXJlIHx8IHRoaXMuYmdUZXh0dXJlLndpZHRoICE9PSBhIHx8IHRoaXMuYmdUZXh0dXJlLmhlaWdodCAhPT0gdSkgJiYKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlICYmIHRoaXMuYmdUZXh0dXJlLmRlc3Ryb3koKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlID0gbC5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgICAgICBzaXplOiBbYSwgdV0sCiAgICAgICAgICAgICAgZm9ybWF0OiAicmdiYTh1bm9ybSIsCiAgICAgICAgICAgICAgdXNhZ2U6CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuVEVYVFVSRV9CSU5ESU5HIHwKICAgICAgICAgICAgICAgIEdQVVRleHR1cmVVc2FnZS5DT1BZX0RTVCB8CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgICAgIH0pKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlVmlldyA9IHRoaXMuYmdUZXh0dXJlLmNyZWF0ZVZpZXcoKSkpLAogICAgICAgICAgbC5xdWV1ZS5jb3B5RXh0ZXJuYWxJbWFnZVRvVGV4dHVyZSgKICAgICAgICAgICAgeyBzb3VyY2U6IGQsIGZsaXBZOiAhMCB9LAogICAgICAgICAgICB7IHRleHR1cmU6IHRoaXMuYmdUZXh0dXJlIH0sCiAgICAgICAgICAgIFthLCB1XSwKICAgICAgICAgICkpOwogICAgICAgIGxldCBmID0gbC5jcmVhdGVDb21tYW5kRW5jb2RlcigpOwogICAgICAgIHRoaXMuX2JsaXRQYXNzKGYsIHRoaXMuYmdUZXh0dXJlVmlldywgby5iZy52aWV3LCBhLCB1LCAxLCAxLCAwLCAwKTsKICAgICAgICBsZXQgaCA9IG8uYmx1ckEudywKICAgICAgICAgIGIgPSBvLmJsdXJBLmg7CiAgICAgICAgaWYgKCh0aGlzLl9ibGl0UGFzcyhmLCBvLmJnLnZpZXcsIG8uYmx1ckEudmlldywgaCwgYiwgMSwgMSwgMCwgMCksIHMgPiAwKSkgewogICAgICAgICAgbGV0IGcgPSBzICogMi41OwogICAgICAgICAgZm9yIChsZXQgcCA9IDA7IHAgPCBMOyBwKyspCiAgICAgICAgICAgICh0aGlzLl9ibHVyUGFzcyhmLCBvLmJsdXJBLnZpZXcsIG8uYmx1ckIudmlldywgaCwgYiwgZyAvIGgsIDApLAogICAgICAgICAgICAgIHRoaXMuX2JsdXJQYXNzKGYsIG8uYmx1ckIudmlldywgby5ibHVyQS52aWV3LCBoLCBiLCAwLCBnIC8gYikpOwogICAgICAgIH0KICAgICAgICBsLnF1ZXVlLnN1Ym1pdChbZi5maW5pc2goKV0pOwogICAgICB9CiAgICAgIF9ibGl0UGFzcyhlLCB0LCByLCBuLCBpLCBzLCBsLCBhLCB1KSB7CiAgICAgICAgbGV0IG8gPSB0aGlzLmRldmljZTsKICAgICAgICBvLnF1ZXVlLndyaXRlQnVmZmVyKHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIsIDAsIG5ldyBGbG9hdDMyQXJyYXkoW3MsIGwsIGEsIHVdKSk7CiAgICAgICAgbGV0IGQgPSBvLmNyZWF0ZUJpbmRHcm91cCh7CiAgICAgICAgICAgIGxheW91dDogdGhpcy5ibGl0UGlwZWxpbmUuZ2V0QmluZEdyb3VwTGF5b3V0KDApLAogICAgICAgICAgICBlbnRyaWVzOiBbCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAwLCByZXNvdXJjZTogeyBidWZmZXI6IHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IHQgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pLAogICAgICAgICAgYyA9IGUuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHIsCiAgICAgICAgICAgICAgICBsb2FkT3A6ICJjbGVhciIsCiAgICAgICAgICAgICAgICBzdG9yZU9wOiAic3RvcmUiLAogICAgICAgICAgICAgICAgY2xlYXJWYWx1ZTogeyByOiAwLCBnOiAwLCBiOiAwLCBhOiAwIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIChjLnNldFBpcGVsaW5lKHRoaXMuYmxpdFBpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIGQpLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5xdWFkQnVmZmVyKSwKICAgICAgICAgIGMuc2V0Vmlld3BvcnQoMCwgMCwgbiwgaSwgMCwgMSksCiAgICAgICAgICBjLmRyYXcoNCksCiAgICAgICAgICBjLmVuZCgpKTsKICAgICAgfQogICAgICBfYmx1clBhc3MoZSwgdCwgciwgbiwgaSwgcywgbCkgewogICAgICAgIGxldCBhID0gdGhpcy5kZXZpY2U7CiAgICAgICAgYS5xdWV1ZS53cml0ZUJ1ZmZlcih0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLCAwLCBuZXcgRmxvYXQzMkFycmF5KFtzLCBsLCAwLCAwXSkpOwogICAgICAgIGxldCB1ID0gYS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuYmx1clBpcGVsaW5lLmdldEJpbmRHcm91cExheW91dCgwKSwKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsgYmluZGluZzogMCwgcmVzb3VyY2U6IHsgYnVmZmVyOiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyIH0gfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDEsIHJlc291cmNlOiB0aGlzLnNhbXBsZXIgfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDIsIHJlc291cmNlOiB0IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KSwKICAgICAgICAgIG8gPSBlLmJlZ2luUmVuZGVyUGFzcyh7CiAgICAgICAgICAgIGNvbG9yQXR0YWNobWVudHM6IFsKICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICB2aWV3OiByLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAoby5zZXRQaXBlbGluZSh0aGlzLmJsdXJQaXBlbGluZSksCiAgICAgICAgICBvLnNldEJpbmRHcm91cCgwLCB1KSwKICAgICAgICAgIG8uc2V0VmVydGV4QnVmZmVyKDAsIHRoaXMucXVhZEJ1ZmZlciksCiAgICAgICAgICBvLnNldFZpZXdwb3J0KDAsIDAsIG4sIGksIDAsIDEpLAogICAgICAgICAgby5kcmF3KDQpLAogICAgICAgICAgby5lbmQoKSk7CiAgICAgIH0KICAgICAgcmVuZGVyR2xhc3NQYW5lbChlLCB0LCByLCBuKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuY29udGV4dCkgcmV0dXJuOwogICAgICAgIGxldCBpID0gdGhpcy5kZXZpY2UsCiAgICAgICAgICBzID0gdGhpcy53aWR0aCwKICAgICAgICAgIGwgPSB0aGlzLmhlaWdodCwKICAgICAgICAgIGEgPSB0aGlzLmFjdGl2ZVRhcmdldHMsCiAgICAgICAgICB1ID0gbmV3IEZsb2F0MzJBcnJheShbCiAgICAgICAgICAgIHMgKiAwLjUsCiAgICAgICAgICAgIGwgKiAwLjUsCiAgICAgICAgICAgIHQgKiBuLAogICAgICAgICAgICByICogbiwKICAgICAgICAgICAgcywKICAgICAgICAgICAgbCwKICAgICAgICAgICAgZS5jb3JuZXJSYWRpdXMgKiBuLAogICAgICAgICAgICBUICogbiwKICAgICAgICAgICAgZS5yZWZyYWN0aW9uLAogICAgICAgICAgICBlLmNocm9tQWJlcnJhdGlvbiwKICAgICAgICAgICAgZS5lZGdlSGlnaGxpZ2h0LAogICAgICAgICAgICBlLnNwZWN1bGFyLAogICAgICAgICAgICBlLmZyZXNuZWwsCiAgICAgICAgICAgIGUuZGlzdG9ydGlvbiwKICAgICAgICAgICAgZS5vcGFjaXR5LAogICAgICAgICAgICBlLnNhdHVyYXRpb24sCiAgICAgICAgICAgIGUudGludFN0cmVuZ3RoLAogICAgICAgICAgICBlLnpSYWRpdXMgKiBuLAogICAgICAgICAgICBlLmJyaWdodG5lc3MsCiAgICAgICAgICAgIGUuc2hhZG93T3BhY2l0eSwKICAgICAgICAgICAgZS5zaGFkb3dTcHJlYWQgKiBuLAogICAgICAgICAgICBlLnNoYWRvd09mZnNldFkgKiBuLAogICAgICAgICAgICBlLmJldmVsTW9kZSwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgIF0pOwogICAgICAgIGkucXVldWUud3JpdGVCdWZmZXIodGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIsIDAsIHUpOwogICAgICAgIGxldCBvID0gaS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuZ2xhc3NQaXBlbGluZS5nZXRCaW5kR3JvdXBMYXlvdXQoMCksCiAgICAgICAgICAgIGVudHJpZXM6IFsKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDAsIHJlc291cmNlOiB7IGJ1ZmZlcjogdGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IGEuYmcudmlldyB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMywgcmVzb3VyY2U6IGEuYmx1ckEudmlldyB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSksCiAgICAgICAgICBkID0gaS5jcmVhdGVDb21tYW5kRW5jb2RlcigpLAogICAgICAgICAgYyA9IGQuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHRoaXMuY29udGV4dC5nZXRDdXJyZW50VGV4dHVyZSgpLmNyZWF0ZVZpZXcoKSwKICAgICAgICAgICAgICAgIGxvYWRPcDogImxvYWQiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSk7CiAgICAgICAgKGMuc2V0UGlwZWxpbmUodGhpcy5nbGFzc1BpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIG8pLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5wYW5lbEJ1ZmZlciksCiAgICAgICAgICBjLnNldFZpZXdwb3J0KDAsIDAsIHMsIGwsIDAsIDEpLAogICAgICAgICAgYy5kcmF3KDQpLAogICAgICAgICAgYy5lbmQoKSwKICAgICAgICAgIGkucXVldWUuc3VibWl0KFtkLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGNsZWFyKCkgewogICAgICAgIGlmICghdGhpcy5faW5pdGlhbGl6ZWQgfHwgIXRoaXMuZGV2aWNlIHx8ICF0aGlzLmNvbnRleHQpIHJldHVybjsKICAgICAgICBsZXQgZSA9IHRoaXMuZGV2aWNlLmNyZWF0ZUNvbW1hbmRFbmNvZGVyKCksCiAgICAgICAgICB0ID0gZS5iZWdpblJlbmRlclBhc3MoewogICAgICAgICAgICBjb2xvckF0dGFjaG1lbnRzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgdmlldzogdGhpcy5jb250ZXh0LmdldEN1cnJlbnRUZXh0dXJlKCkuY3JlYXRlVmlldygpLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAodC5zZXRWaWV3cG9ydCgwLCAwLCB0aGlzLndpZHRoLCB0aGlzLmhlaWdodCwgMCwgMSksCiAgICAgICAgICB0LmVuZCgpLAogICAgICAgICAgdGhpcy5kZXZpY2UucXVldWUuc3VibWl0KFtlLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGRlc3Ryb3koKSB7CiAgICAgICAgZm9yIChsZXQgZSBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KGUpOwogICAgICAgICh0aGlzLnRhcmdldENhY2hlLmNsZWFyKCksCiAgICAgICAgICB0aGlzLmJnVGV4dHVyZSAmJiB0aGlzLmJnVGV4dHVyZS5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLnF1YWRCdWZmZXIgJiYgdGhpcy5xdWFkQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIgJiYgdGhpcy5wYW5lbEJ1ZmZlci5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmJsaXRVbmlmb3JtQnVmZmVyICYmIHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIuZGVzdHJveSgpLAogICAgICAgICAgdGhpcy5ibHVyVW5pZm9ybUJ1ZmZlciAmJiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyICYmIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZGV2aWNlPy5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmNhbnZhcy5yZW1vdmUoKSk7CiAgICAgIH0KICAgICAgX3NldEFjdGl2ZVNpemUoZSwgdCkgewogICAgICAgIGlmIChlIDw9IDAgfHwgdCA8PSAwKSByZXR1cm4gITE7CiAgICAgICAgKCh0aGlzLndpZHRoID0gZSksCiAgICAgICAgICAodGhpcy5oZWlnaHQgPSB0KSwKICAgICAgICAgICh0aGlzLmNhbnZhcy53aWR0aCA8IGUgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IDwgdCkgJiYKICAgICAgICAgICAgKCh0aGlzLmNhbnZhcy53aWR0aCA9IE1hdGgubWF4KHRoaXMuY2FudmFzLndpZHRoLCBlKSksCiAgICAgICAgICAgICh0aGlzLmNhbnZhcy5oZWlnaHQgPSBNYXRoLm1heCh0aGlzLmNhbnZhcy5oZWlnaHQsIHQpKSwKICAgICAgICAgICAgdGhpcy5jb250ZXh0Py5jb25maWd1cmUoewogICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgZm9ybWF0OiB0aGlzLmZvcm1hdCwKICAgICAgICAgICAgICBhbHBoYU1vZGU6ICJwcmVtdWx0aXBsaWVkIiwKICAgICAgICAgICAgfSkpKTsKICAgICAgICBsZXQgciA9IGAke2V9eCR7dH1gLAogICAgICAgICAgbiA9IHRoaXMudGFyZ2V0Q2FjaGUuZ2V0KHIpOwogICAgICAgIHJldHVybiAoCiAgICAgICAgICBuIHx8CiAgICAgICAgICAgICgobiA9IHsKICAgICAgICAgICAgICBiZzogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQTogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQjogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgfSksCiAgICAgICAgICAgIHRoaXMudGFyZ2V0Q2FjaGUuc2V0KHIsIG4pKSwKICAgICAgICAgICh0aGlzLmFjdGl2ZVRhcmdldHMgPSBuKSwKICAgICAgICAgICEwCiAgICAgICAgKTsKICAgICAgfQogICAgICBfbWFrZVRhcmdldChlLCB0KSB7CiAgICAgICAgbGV0IHIgPSB0aGlzLmRldmljZS5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgIHNpemU6IFtlLCB0XSwKICAgICAgICAgIGZvcm1hdDogInJnYmE4dW5vcm0iLAogICAgICAgICAgdXNhZ2U6IEdQVVRleHR1cmVVc2FnZS5URVhUVVJFX0JJTkRJTkcgfCBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgfSk7CiAgICAgICAgcmV0dXJuIHsgdGV4dHVyZTogciwgdmlldzogci5jcmVhdGVWaWV3KCksIHc6IGUsIGg6IHQgfTsKICAgICAgfQogICAgICBfZnJlZVRhcmdldChlKSB7CiAgICAgICAgZSAmJiBlLnRleHR1cmUuZGVzdHJveSgpOwogICAgICB9CiAgICAgIF9mcmVlVGFyZ2V0U2V0KGUpIHsKICAgICAgICAodGhpcy5fZnJlZVRhcmdldChlLmJnKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJBKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJCKSk7CiAgICAgIH0KICAgIH07CiAgdmFyIFIgPSBjbGFzcyB7CiAgICBjYW52YXM7CiAgICBjdHg7CiAgICByZW5kZXJlcjsKICAgIHNjZW5lQ2FudmFzOwogICAgc2NlbmVDdHg7CiAgICBkcmF3RWxlbWVudEltYWdlOwogICAgX2luaXRQcm9taXNlOwogICAgX2luaXRpYWxpemVkID0gITE7CiAgICBjb25zdHJ1Y3RvcihlKSB7CiAgICAgICgodGhpcy5jYW52YXMgPSBlKSwKICAgICAgICAodGhpcy5jdHggPSBlLmdldENvbnRleHQoIjJkIikpLAogICAgICAgICh0aGlzLnJlbmRlcmVyID0gbmV3IHkoKSksCiAgICAgICAgKHRoaXMuc2NlbmVDYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgKHRoaXMuc2NlbmVDdHggPSB0aGlzLnNjZW5lQ2FudmFzLmdldENvbnRleHQoIjJkIikpKTsKICAgICAgbGV0IHQgPSB0aGlzLmN0eDsKICAgICAgKCh0aGlzLmRyYXdFbGVtZW50SW1hZ2UgPSB0LmRyYXdFbGVtZW50SW1hZ2U/LmJpbmQodCkgPz8gdC5kcmF3RWxlbWVudD8uYmluZCh0KSA/PyBudWxsKSwKICAgICAgICAodGhpcy5faW5pdFByb21pc2UgPSB0aGlzLl9pbml0V2ViR1BVKCkpKTsKICAgIH0KICAgIGFzeW5jIF9pbml0V2ViR1BVKCkgewogICAgICB0cnkgewogICAgICAgIHJldHVybiAoYXdhaXQgdGhpcy5yZW5kZXJlci5pbml0KCkpCiAgICAgICAgICA/ICgodGhpcy5faW5pdGlhbGl6ZWQgPSAhMCksIGNvbnNvbGUubG9nKCJMaXF1aWRHbGFzczogV2ViR1BVIHJlbmRlcmVyIGluaXRpYWxpemVkIiksICEwKQogICAgICAgICAgOiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBub3QgYXZhaWxhYmxlIiksICExKTsKICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgIHJldHVybiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBpbml0IGZhaWxlZCIsIGUpLCAhMSk7CiAgICAgIH0KICAgIH0KICAgIGdldCBpc1JlYWR5KCkgewogICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICB9CiAgICBhc3luYyB3YWl0Rm9ySW5pdCgpIHsKICAgICAgcmV0dXJuIHRoaXMuX2luaXRQcm9taXNlOwogICAgfQogICAgcmVuZGVyKCkgewogICAgICBsZXQgZSA9IHRoaXMuY2FudmFzLndpZHRoLAogICAgICAgIHQgPSB0aGlzLmNhbnZhcy5oZWlnaHQ7CiAgICAgIGlmIChlID09PSAwIHx8IHQgPT09IDAgfHwgIXRoaXMuZHJhd0VsZW1lbnRJbWFnZSB8fCAhdGhpcy5faW5pdGlhbGl6ZWQpIHJldHVybjsKICAgICAgdGhpcy5jdHguY2xlYXJSZWN0KDAsIDAsIGUsIHQpOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSBBcnJheS5mcm9tKHRoaXMuY2FudmFzLmNoaWxkcmVuKSwKICAgICAgICBzID0gQXJyYXkuZnJvbSh0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIikpLAogICAgICAgIGwgPSBuZXcgU2V0KHMpOwogICAgICBpLmxlbmd0aCA9PT0gMCAmJgogICAgICAgICF0aGlzLl9fbGdfd2Fybl9lbXB0eSAmJgogICAgICAgIChjb25zb2xlLndhcm4oIkxpcXVpZEdsYXNzOiBObyBjaGlsZHJlbiBmb3VuZCBpbnNpZGUgdGhlIGNhbnZhcyB0byByZW5kZXIuIiksCiAgICAgICAgKHRoaXMuX19sZ193YXJuX2VtcHR5ID0gITApKTsKICAgICAgZm9yIChsZXQgYSBvZiBpKQogICAgICAgIGlmICghbC5oYXMoYSkpIHsKICAgICAgICAgIGxldCB1ID0gYSwKICAgICAgICAgICAgbyA9IHRoaXMuX2dldEVsZW1lbnRQb3NpdGlvbih1LCBuKTsKICAgICAgICAgIGlmIChvLncgPD0gMCB8fCBvLmggPD0gMCkgY29udGludWU7CiAgICAgICAgICBsZXQgZCA9IG8ueCAqIHIsCiAgICAgICAgICAgIGMgPSBvLnkgKiByOwogICAgICAgICAgdHJ5IHsKICAgICAgICAgICAgbGV0IGYgPSB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoYSwgZCwgYyk7CiAgICAgICAgICAgIGYgJiYgKHUuc3R5bGUudHJhbnNmb3JtID0gZi50b1N0cmluZygpKTsKICAgICAgICAgIH0gY2F0Y2ggKGYpIHsKICAgICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgICAgIChjb25zb2xlLndhcm4oCiAgICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byBkcmF3IGJhY2tncm91bmQgZWxlbWVudCAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICAgIGYubWVzc2FnZSB8fCBmLAogICAgICAgICAgICAgICksCiAgICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWQgPSAhMCkpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgZm9yIChsZXQgYSBvZiBzKQogICAgICAgIHRyeSB7CiAgICAgICAgICB0aGlzLl9yZW5kZXJHbGFzc0VsZW1lbnQoYSwgbiwgcik7CiAgICAgICAgfSBjYXRjaCAodSkgewogICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZF9nbGFzcyB8fAogICAgICAgICAgICAoY29uc29sZS5lcnJvcigKICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byByZW5kZXIgZ2xhc3MgZWZmZWN0IGZvciAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICB1Lm1lc3NhZ2UgfHwgdSwKICAgICAgICAgICAgKSwKICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWRfZ2xhc3MgPSAhMCkpOwogICAgICAgIH0KICAgIH0KICAgIHJlbmRlckdsYXNzRWxlbWVudHMoKSB7CiAgICAgIGxldCBlID0gdGhpcy5jYW52YXMud2lkdGgsCiAgICAgICAgdCA9IHRoaXMuY2FudmFzLmhlaWdodDsKICAgICAgaWYgKGUgPT09IDAgfHwgdCA9PT0gMCB8fCAhdGhpcy5kcmF3RWxlbWVudEltYWdlIHx8ICF0aGlzLl9pbml0aWFsaXplZCkgcmV0dXJuOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSB0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIik7CiAgICAgIGZvciAobGV0IHMgb2YgaSkgdGhpcy5fcmVuZGVyR2xhc3NFbGVtZW50KHMsIG4sIHIpOwogICAgfQogICAgX3BhcnNlQ1NTTGVuZ3RoKGUsIHQpIHsKICAgICAgcmV0dXJuICFlIHx8IGUgPT09ICJhdXRvIgogICAgICAgID8gTmFOCiAgICAgICAgOiAoKGUgPSBlLnRyaW0oKSksCiAgICAgICAgICBlLnN0YXJ0c1dpdGgoImNhbGMoIikKICAgICAgICAgICAgPyB0aGlzLl9wYXJzZUNhbGMoZSwgdCkKICAgICAgICAgICAgOiBlLmVuZHNXaXRoKCIlIikKICAgICAgICAgICAgICA/IChwYXJzZUZsb2F0KGUpIC8gMTAwKSAqIHQKICAgICAgICAgICAgICA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfcGFyc2VDYWxjKGUsIHQpIHsKICAgICAgbGV0IHIgPSBlLm1hdGNoKC9jYWxjXCgoLispXCkvKTsKICAgICAgaWYgKCFyKSByZXR1cm4gMDsKICAgICAgbGV0IG4gPSByWzFdLnRyaW0oKSwKICAgICAgICBpID0gbi5tYXRjaCgvKC4rKVxzKlwrXHMqKC4rKS8pLAogICAgICAgIHMgPSBuLm1hdGNoKC8oLispXHMqLVxzKiguKykvKTsKICAgICAgaWYgKHMpIHsKICAgICAgICBsZXQgbCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKHNbMV0udHJpbSgpLCB0KSwKICAgICAgICAgIGEgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChzWzJdLnRyaW0oKSwgdCk7CiAgICAgICAgcmV0dXJuIGwgLSBhOwogICAgICB9CiAgICAgIGlmIChpKSB7CiAgICAgICAgbGV0IGwgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChpWzFdLnRyaW0oKSwgdCksCiAgICAgICAgICBhID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoaVsyXS50cmltKCksIHQpOwogICAgICAgIHJldHVybiBsICsgYTsKICAgICAgfQogICAgICByZXR1cm4gdGhpcy5fcGFyc2VDU1NMZW5ndGgobiwgdCk7CiAgICB9CiAgICBfcGFyc2VUcmFuc2Zvcm0oZSwgdCwgcikgewogICAgICBsZXQgbiA9IDAsCiAgICAgICAgaSA9IDA7CiAgICAgIGlmICghZSB8fCBlID09PSAibm9uZSIpIHJldHVybiB7IHR4OiBuLCB0eTogaSB9OwogICAgICBsZXQgcyA9IGUubWF0Y2goL3RyYW5zbGF0ZVwoXHMqKFteLCldKykoPzpccyosXHMqKFteKV0rKSk/XHMqXCkvKTsKICAgICAgcyAmJgogICAgICAgICgobiA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1sxXSwgdCkpLAogICAgICAgIChpID0gc1syXSA/IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1syXSwgcikgOiAwKSk7CiAgICAgIGxldCBsID0gZS5tYXRjaCgvdHJhbnNsYXRlWFwoXHMqKFteKV0rKVxzKlwpLyk7CiAgICAgIGwgJiYgKG4gPSB0aGlzLl9wYXJzZVRyYW5zbGF0ZVZhbHVlKGxbMV0sIHQpKTsKICAgICAgbGV0IGEgPSBlLm1hdGNoKC90cmFuc2xhdGVZXChccyooW14pXSspXHMqXCkvKTsKICAgICAgYSAmJiAoaSA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoYVsxXSwgcikpOwogICAgICBsZXQgdSA9IGUubWF0Y2goL3RyYW5zbGF0ZTNkXChccyooW14sXSspXHMqLFxzKihbXixdKylccyosXHMqW14pXStccypcKS8pOwogICAgICByZXR1cm4gKAogICAgICAgIHUgJiYgKChuID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzFdLCB0KSksIChpID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzJdLCByKSkpLAogICAgICAgIHsgdHg6IG4sIHR5OiBpIH0KICAgICAgKTsKICAgIH0KICAgIF9wYXJzZVRyYW5zbGF0ZVZhbHVlKGUsIHQpIHsKICAgICAgcmV0dXJuICgoZSA9IGUudHJpbSgpKSwgZS5lbmRzV2l0aCgiJSIpID8gKHBhcnNlRmxvYXQoZSkgLyAxMDApICogdCA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfZ2V0RWxlbWVudFBvc2l0aW9uKGUsIHQpIHsKICAgICAgbGV0IHIgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIG4gPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLndpZHRoKSB8fCB0aGlzLmNhbnZhcy53aWR0aCB8fCAxNTM2LAogICAgICAgIGkgPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLmhlaWdodCkgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IHx8IDEwMjQsCiAgICAgICAgcyA9IGUuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCksCiAgICAgICAgbCA9IHMud2lkdGggfHwgcGFyc2VGbG9hdChyLndpZHRoKSB8fCAwLAogICAgICAgIGEgPSBzLmhlaWdodCB8fCBwYXJzZUZsb2F0KHIuaGVpZ2h0KSB8fCAwLAogICAgICAgIHUgPSAwLAogICAgICAgIG8gPSAwLAogICAgICAgIGQgPSBlLnN0eWxlLAogICAgICAgIGMgPSBkLmxlZnQgfHwgci5sZWZ0LAogICAgICAgIGYgPSBkLnJpZ2h0IHx8IHIucmlnaHQsCiAgICAgICAgaCA9IGQudG9wIHx8IHIudG9wLAogICAgICAgIGIgPSBkLmJvdHRvbSB8fCByLmJvdHRvbSwKICAgICAgICBnID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYywgbiksCiAgICAgICAgcCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKGYsIG4pLAogICAgICAgIHYgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChoLCBpKSwKICAgICAgICBTID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYiwgaSksCiAgICAgICAgUCA9IHBhcnNlRmxvYXQoci5tYXJnaW5MZWZ0KSB8fCAwLAogICAgICAgIHggPSBwYXJzZUZsb2F0KHIubWFyZ2luUmlnaHQpIHx8IDAsCiAgICAgICAgTSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Ub3ApIHx8IDAsCiAgICAgICAgQSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Cb3R0b20pIHx8IDAsCiAgICAgICAgRyA9ICFpc05hTihnKSwKICAgICAgICBVID0gIWlzTmFOKHApOwogICAgICBHICYmIFUgJiYgZyA9PT0gMCAmJiBwID09PSAwCiAgICAgICAgPyAodSA9IChuIC0gbCkgLyAyKQogICAgICAgIDogKEcgJiYgVSkgfHwgRwogICAgICAgICAgPyAodSA9IGcgKyBQKQogICAgICAgICAgOiBVICYmICh1ID0gbiAtIGwgLSBwIC0geCk7CiAgICAgIGxldCBCID0gIWlzTmFOKHYpLAogICAgICAgIEMgPSAhaXNOYU4oUyk7CiAgICAgIEIgJiYgQyAmJiB2ID09PSAwICYmIFMgPT09IDAKICAgICAgICA/IChvID0gKGkgLSBhKSAvIDIpCiAgICAgICAgOiAoQiAmJiBDKSB8fCBCCiAgICAgICAgICA/IChvID0gdiArIE0pCiAgICAgICAgICA6IEMgJiYgKG8gPSBpIC0gYSAtIFMgLSBBKTsKICAgICAgbGV0IHsgdHg6IFYsIHR5OiBGIH0gPSB0aGlzLl9wYXJzZVRyYW5zZm9ybShyLnRyYW5zZm9ybSwgbCwgYSk7CiAgICAgIHJldHVybiAoKHUgKz0gViksIChvICs9IEYpLCB7IHg6IHUsIHk6IG8sIHc6IGwsIGg6IGEgfSk7CiAgICB9CiAgICBfcmVuZGVyR2xhc3NFbGVtZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9nZXRDb25maWdGcm9tQ1NTKGUpLAogICAgICAgIGkgPSB0aGlzLl9nZXRFbGVtZW50UG9zaXRpb24oZSwgdCksCiAgICAgICAgcyA9IGkueCwKICAgICAgICBsID0gaS55LAogICAgICAgIGEgPSBpLncsCiAgICAgICAgdSA9IGkuaCwKICAgICAgICBvID0gcyAqIHIsCiAgICAgICAgZCA9IGwgKiByLAogICAgICAgIGMgPSBhICogciwKICAgICAgICBmID0gdSAqIHIsCiAgICAgICAgaCA9IFQgKiByLAogICAgICAgIGIgPSBvIC0gaCwKICAgICAgICBnID0gZCAtIGgsCiAgICAgICAgcCA9IGMgKyBoICogMiwKICAgICAgICB2ID0gZiArIGggKiAyOwogICAgICB0aGlzLl9jYXB0dXJlUmVnaW9uKGIsIGcsIHAsIHYpOwogICAgICBsZXQgUyA9IE1hdGgucm91bmQocCksCiAgICAgICAgUCA9IE1hdGgucm91bmQodik7CiAgICAgICh0aGlzLnJlbmRlcmVyLmNsZWFyKCksCiAgICAgICAgdGhpcy5yZW5kZXJlci51cGxvYWRBbmRCbHVyKHRoaXMuc2NlbmVDYW52YXMsIDAsIDAsIFMsIFAsIG4uYmx1ckFtb3VudCksCiAgICAgICAgdGhpcy5yZW5kZXJlci5yZW5kZXJHbGFzc1BhbmVsKG4sIGEsIHUsIHIpLAogICAgICAgIHRoaXMuY3R4LmRyYXdJbWFnZSh0aGlzLnJlbmRlcmVyLmNhbnZhcywgMCwgMCwgcCwgdiwgYiwgZywgcCwgdikpOwogICAgICB0cnkgewogICAgICAgIGxldCB4ID0gdGhpcy5fZHJhd0dsYXNzRWxlbWVudENvbnRlbnQoZSwgbywgZCk7CiAgICAgICAgeCAmJiAoZS5zdHlsZS50cmFuc2Zvcm0gPSB4LnRvU3RyaW5nKCkpOwogICAgICB9IGNhdGNoICh4KSB7CiAgICAgICAgZS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgKGNvbnNvbGUud2FybigKICAgICAgICAgICAgYExpcXVpZEdsYXNzOiBGYWlsZWQgdG8gZHJhdyBnbGFzcyBlbGVtZW50ICR7ZS50YWdOYW1lfS4ke2UuY2xhc3NOYW1lfTpgLAogICAgICAgICAgICB4LAogICAgICAgICAgKSwKICAgICAgICAgIChlLl9fbGdfZXJyb3JfbG9nZ2VkID0gITApKTsKICAgICAgfQogICAgfQogICAgX2RyYXdHbGFzc0VsZW1lbnRDb250ZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9zdXBwcmVzc0dsYXNzQ2hyb21lKGUpOwogICAgICB0cnkgewogICAgICAgIHJldHVybiB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoZSwgdCwgcik7CiAgICAgIH0gZmluYWxseSB7CiAgICAgICAgdGhpcy5fcmVzdG9yZUlubGluZVN0eWxlcyhlLCBuKTsKICAgICAgfQogICAgfQogICAgX3N1cHByZXNzR2xhc3NDaHJvbWUoZSkgewogICAgICBsZXQgdCA9IG5ldyBNYXAoKSwKICAgICAgICByID0gWwogICAgICAgICAgImJhY2tncm91bmQiLAogICAgICAgICAgImJhY2tncm91bmRDb2xvciIsCiAgICAgICAgICAiYmFja2dyb3VuZEltYWdlIiwKICAgICAgICAgICJib3JkZXJDb2xvciIsCiAgICAgICAgICAiYm94U2hhZG93IiwKICAgICAgICAgICJmaWx0ZXIiLAogICAgICAgICAgIm91dGxpbmVDb2xvciIsCiAgICAgICAgXTsKICAgICAgZm9yIChsZXQgbiBvZiByKSB0LnNldChuLCBlLnN0eWxlW25dKTsKICAgICAgcmV0dXJuICgKICAgICAgICAoZS5zdHlsZS5iYWNrZ3JvdW5kID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZEltYWdlID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5ib3JkZXJDb2xvciA9ICJ0cmFuc3BhcmVudCIpLAogICAgICAgIChlLnN0eWxlLmJveFNoYWRvdyA9ICJub25lIiksCiAgICAgICAgKGUuc3R5bGUuZmlsdGVyID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5vdXRsaW5lQ29sb3IgPSAidHJhbnNwYXJlbnQiKSwKICAgICAgICB0CiAgICAgICk7CiAgICB9CiAgICBfcmVzdG9yZUlubGluZVN0eWxlcyhlLCB0KSB7CiAgICAgIGZvciAobGV0IFtyLCBuXSBvZiB0KSBlLnN0eWxlW3JdID0gbjsKICAgIH0KICAgIF9jYXB0dXJlUmVnaW9uKGUsIHQsIHIsIG4pIHsKICAgICAgbGV0IGkgPSBNYXRoLnJvdW5kKHIpLAogICAgICAgIHMgPSBNYXRoLnJvdW5kKG4pOwogICAgICAoKHRoaXMuc2NlbmVDYW52YXMud2lkdGggIT09IGkgfHwgdGhpcy5zY2VuZUNhbnZhcy5oZWlnaHQgIT09IHMpICYmCiAgICAgICAgKCh0aGlzLnNjZW5lQ2FudmFzLndpZHRoID0gaSksICh0aGlzLnNjZW5lQ2FudmFzLmhlaWdodCA9IHMpKSwKICAgICAgICAodGhpcy5zY2VuZUN0eC5maWxsU3R5bGUgPSAiI2ZmZmZmZiIpLAogICAgICAgIHRoaXMuc2NlbmVDdHguZmlsbFJlY3QoMCwgMCwgaSwgcyksCiAgICAgICAgdGhpcy5zY2VuZUN0eC5kcmF3SW1hZ2UodGhpcy5jYW52YXMsIGUsIHQsIHIsIG4sIDAsIDAsIGksIHMpKTsKICAgIH0KICAgIF9nZXRDb25maWdGcm9tQ1NTKGUpIHsKICAgICAgbGV0IHQgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIHIgPSB7IC4uLncgfTsKICAgICAgZm9yIChsZXQgW24sIGldIG9mIE9iamVjdC5lbnRyaWVzKF8pKSB7CiAgICAgICAgbGV0IHMgPSB0LmdldFByb3BlcnR5VmFsdWUobikudHJpbSgpOwogICAgICAgIGlmIChzKSB7CiAgICAgICAgICBsZXQgbCA9IHBhcnNlRmxvYXQocyk7CiAgICAgICAgICBpc05hTihsKSB8fCAocltpXSA9IGwpOwogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gcjsKICAgIH0KICAgIGRlc3Ryb3koKSB7CiAgICAgIHRoaXMucmVuZGVyZXIuZGVzdHJveSgpOwogICAgfQogIH07CiAgcmV0dXJuIEkoWSk7Cn0pKCk7Cg==\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #0a0218;\n        overflow: hidden;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #three-canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        z-index: 0;\n      }\n      #glass-canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        z-index: 1;\n      }\n\n      /* ── Glass Panel ── */\n      .menu-panel {\n        position: absolute;\n        width: 390px;\n        height: 506px;\n        background: rgba(255, 255, 255, 0.15);\n        --lg-blur: 0.56;\n        --lg-refraction: 0.52;\n        --lg-corner-radius: 30;\n        --lg-z-radius: 48;\n        --lg-specular: 0.26;\n        --lg-fresnel: 1;\n        --lg-edge-highlight: 0.2;\n        --lg-chrom-aberration: 0.035;\n        --lg-tint: 0.88;\n        --lg-brightness: 0.54;\n        --lg-shadow-opacity: 0;\n        --lg-shadow-spread: 0;\n        --lg-shadow-offset-y: 0;\n        --lg-saturation: -0.24;\n      }\n      #glass-menu {\n        top: 270px;\n        left: 1980px;\n      }\n      .file-panel {\n        position: absolute;\n        top: 372px;\n        left: 500px;\n        width: 360px;\n        height: 104px;\n        background: rgba(255, 255, 255, 0.11);\n        --lg-blur: 0.52;\n        --lg-refraction: 0.48;\n        --lg-corner-radius: 28;\n        --lg-z-radius: 36;\n        --lg-specular: 0.28;\n        --lg-fresnel: 0.94;\n        --lg-edge-highlight: 0.18;\n        --lg-chrom-aberration: 0.03;\n        --lg-tint: 0.74;\n        --lg-brightness: 0.34;\n        --lg-shadow-opacity: 0;\n        --lg-shadow-spread: 0;\n        --lg-shadow-offset-y: 0;\n        --lg-saturation: -0.18;\n      }\n      .submenu-panel {\n        position: absolute;\n        top: 456px;\n        left: 1980px;\n        width: 230px;\n        height: 58px;\n        background: rgba(255, 255, 255, 0.11);\n        --lg-blur: 0.52;\n        --lg-refraction: 0.5;\n        --lg-corner-radius: 20;\n        --lg-z-radius: 28;\n        --lg-specular: 0.3;\n        --lg-fresnel: 0.96;\n        --lg-edge-highlight: 0.18;\n        --lg-chrom-aberration: 0.03;\n        --lg-tint: 0.74;\n        --lg-brightness: 0.36;\n        --lg-shadow-opacity: 0;\n        --lg-shadow-spread: 0;\n        --lg-shadow-offset-y: 0;\n        --lg-saturation: -0.2;\n      }\n\n      /* ── Text Overlay ── */\n      .text-overlay {\n        position: absolute;\n        z-index: 2;\n        pointer-events: none;\n      }\n      .context-file {\n        position: absolute;\n        top: 340px;\n        left: 500px;\n        z-index: 2;\n        width: 360px;\n        height: 104px;\n        display: flex;\n        align-items: center;\n        gap: 18px;\n        padding: 18px 22px;\n        border-radius: 26px;\n        background: linear-gradient(\n          180deg,\n          rgba(255, 255, 255, 0.095) 0%,\n          rgba(255, 255, 255, 0.036) 38%,\n          rgba(255, 255, 255, 0.006) 100%\n        );\n        box-shadow: none;\n      }\n      .file-icon {\n        width: 58px;\n        height: 68px;\n        flex-shrink: 0;\n        border-radius: 16px;\n        background:\n          linear-gradient(135deg, rgba(6, 227, 250, 0.92), rgba(79, 219, 94, 0.85)),\n          rgba(255, 255, 255, 0.12);\n        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);\n      }\n      .file-meta {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n      .file-title {\n        color: rgba(5, 17, 28, 0.9);\n        font-size: 21px;\n        font-weight: 780;\n        letter-spacing: 0;\n        text-shadow:\n          0 1px 0 rgba(255, 255, 255, 0.24),\n          0 10px 20px rgba(255, 255, 255, 0.14);\n      }\n      .file-subtitle {\n        color: rgba(5, 17, 28, 0.72);\n        font-size: 15px;\n        font-weight: 650;\n        text-shadow:\n          0 1px 0 rgba(255, 255, 255, 0.2),\n          0 8px 18px rgba(255, 255, 255, 0.12);\n      }\n      .pointer {\n        position: absolute;\n        top: 395px;\n        left: 778px;\n        z-index: 4;\n        width: 34px;\n        height: 44px;\n        border-radius: 2px;\n        background: #fff;\n        clip-path: polygon(0 0, 0 100%, 31% 73%, 47% 100%, 62% 93%, 46% 67%, 82% 67%);\n        filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.4));\n      }\n      .click-ring {\n        position: absolute;\n        top: 390px;\n        left: 770px;\n        z-index: 3;\n        width: 46px;\n        height: 46px;\n        border: 2px solid rgba(255, 255, 255, 0.75);\n        border-radius: 50%;\n        opacity: 0;\n      }\n      .menu-text {\n        width: 390px;\n        height: 506px;\n        display: flex;\n        flex-direction: column;\n        padding: 18px 0;\n        background: transparent;\n        border-radius: 30px;\n        box-shadow: none;\n        overflow: hidden;\n      }\n      #text-menu {\n        top: 270px;\n        left: 1980px;\n      }\n\n      .menu-highlight {\n        position: absolute;\n        top: 17px;\n        left: 14px;\n        z-index: 0;\n        width: 362px;\n        height: 52px;\n        border-radius: 17px;\n        background:\n          radial-gradient(circle at 24% 22%, rgba(255, 255, 255, 0.48), transparent 42%),\n          linear-gradient(90deg, rgba(255, 255, 255, 0.29), rgba(255, 255, 255, 0.12));\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.38),\n          inset 0 -1px 0 rgba(255, 255, 255, 0.1);\n        opacity: 0;\n      }\n      .menu-item {\n        position: relative;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 14px 28px;\n        font-size: 18px;\n        font-weight: 650;\n        color: rgb(0, 7, 14);\n        cursor: default;\n        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.26);\n      }\n      .menu-item svg {\n        width: 22px;\n        height: 22px;\n        flex-shrink: 0;\n        stroke: rgb(0, 7, 14);\n        fill: none;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .menu-sep {\n        height: 1px;\n        margin: 10px 28px;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);\n      }\n      .menu-footer {\n        position: relative;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 14px 26px;\n        margin-top: auto;\n      }\n      .menu-footer-item {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 4px;\n        font-size: 13px;\n        font-weight: 650;\n        color: rgba(0, 7, 14, 0.9);\n        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.24);\n      }\n      .menu-footer-item svg {\n        width: 24px;\n        height: 24px;\n        stroke: rgba(0, 7, 14, 0.84);\n        fill: none;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .menu-kbd {\n        margin-left: auto;\n        font-size: 14px;\n        font-weight: 650;\n        color: rgba(0, 7, 14, 0.82);\n        font-variant-numeric: tabular-nums;\n      }\n      .submenu-preview {\n        position: absolute;\n        top: 456px;\n        left: 1980px;\n        z-index: 2;\n        width: 230px;\n        height: 58px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 20px;\n        background: transparent;\n        box-shadow: none;\n        color: rgba(0, 7, 14, 0.92);\n        font-size: 15px;\n        font-weight: 760;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"liquid-glass-context-menu\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-root=\"true\"\n    >\n      <canvas id=\"three-canvas\" width=\"1920\" height=\"1080\"></canvas>\n\n      <canvas id=\"glass-canvas\" layoutsubtree width=\"1920\" height=\"1080\">\n        <div id=\"glass-file\" class=\"file-panel liquid-glass\"></div>\n        <div id=\"glass-menu\" class=\"menu-panel liquid-glass\"></div>\n        <div id=\"glass-submenu\" class=\"submenu-panel liquid-glass\"></div>\n      </canvas>\n\n      <div id=\"context-file\" class=\"context-file\">\n        <div class=\"file-icon\"></div>\n        <div class=\"file-meta\">\n          <div class=\"file-title\">liquid-glass.mov</div>\n          <div class=\"file-subtitle\">Preview render - 08s</div>\n        </div>\n      </div>\n      <div id=\"click-ring\" class=\"click-ring\"></div>\n      <div id=\"pointer\" class=\"pointer\"></div>\n\n      <div id=\"text-menu\" class=\"text-overlay menu-text\">\n        <div id=\"menu-highlight\" class=\"menu-highlight\"></div>\n        <div class=\"menu-item\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\" />\n            <polyline points=\"16 6 12 2 8 6\" />\n            <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\" />\n          </svg>\n          <span>Share</span>\n        </div>\n        <div class=\"menu-item\">\n          <svg viewBox=\"0 0 24 24\">\n            <path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" />\n          </svg>\n          <span>Add to Bookmarks</span>\n        </div>\n        <div class=\"menu-item\">\n          <svg viewBox=\"0 0 24 24\"><path d=\"M12 5v14M5 12h14\" /></svg>\n          <span>Add Bookmark to...</span>\n        </div>\n        <div class=\"menu-sep\"></div>\n        <div class=\"menu-item\">\n          <svg viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n            <line x1=\"9\" y1=\"3\" x2=\"9\" y2=\"21\" />\n          </svg>\n          <span>New Tab</span>\n          <span class=\"menu-kbd\">&#8984;T</span>\n        </div>\n        <div class=\"menu-item\">\n          <svg viewBox=\"0 0 24 24\">\n            <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\" />\n            <path d=\"M9 3v18\" />\n            <path d=\"M14 9l3 3-3 3\" />\n          </svg>\n          <span>New Private Tab</span>\n          <span class=\"menu-kbd\">&#8679;&#8984;N</span>\n        </div>\n        <div class=\"menu-sep\"></div>\n        <div class=\"menu-footer\">\n          <div class=\"menu-footer-item\">\n            <svg viewBox=\"0 0 24 24\">\n              <path d=\"M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z\" />\n            </svg>\n            <span>Bookmarks</span>\n          </div>\n          <div class=\"menu-footer-item\">\n            <svg viewBox=\"0 0 24 24\">\n              <rect x=\"3\" y=\"3\" width=\"7\" height=\"7\" />\n              <rect x=\"14\" y=\"3\" width=\"7\" height=\"7\" />\n              <rect x=\"3\" y=\"14\" width=\"7\" height=\"7\" />\n              <rect x=\"14\" y=\"14\" width=\"7\" height=\"7\" />\n            </svg>\n            <span>All Tabs</span>\n          </div>\n        </div>\n      </div>\n      <div id=\"submenu-preview\" class=\"submenu-preview\">Open in New Tab</div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      var W = 1920,\n        H = 1080,\n        DURATION = 8;\n\n      /* ── Three.js Aurora Shader ─────────────────────────────────────── */\n      var vs = \"varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }\";\n      var fs = [\n        \"precision highp float;\",\n        \"varying vec2 vUv;\",\n        \"uniform float uTime;\",\n        \"vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n        \"vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n        \"vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}\",\n        \"vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}\",\n        \"float snoise(vec3 v){\",\n        \"  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);\",\n        \"  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);\",\n        \"  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;\",\n        \"  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);\",\n        \"  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;\",\n        \"  i=mod289(i);\",\n        \"  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));\",\n        \"  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;\",\n        \"  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);\",\n        \"  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);\",\n        \"  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);\",\n        \"  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;\",\n        \"  vec4 sh=-step(h,vec4(0.0));\",\n        \"  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;\",\n        \"  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);\",\n        \"  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));\",\n        \"  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;\",\n        \"  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;\",\n        \"  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));\",\n        \"}\",\n        \"void main(){\",\n        \"  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;\",\n        \"  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;\",\n        \"  vec2 wp=p+vec2(wx,wy);\",\n        \"  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));\",\n        \"  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));\",\n        \"  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);\",\n        \"  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);\",\n        \"  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);\",\n        \"  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;\",\n        \"  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;\",\n        \"  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;\",\n        \"  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);\",\n        \"  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);\",\n        \"  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);\",\n        \"  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);\",\n        \"  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);\",\n        \"  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);\",\n        \"  vec3 col=base;\",\n        \"  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));\",\n        \"  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));\",\n        \"  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));\",\n        \"  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;\",\n        \"  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;\",\n        \"  col*=1.0-pow(abs(ridge1),4.0)*0.15;\",\n        \"  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));\",\n        \"  col*=0.65+vig*0.5;\",\n        \"  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);\",\n        \"  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));\",\n        \"  gl_FragColor=vec4(col,1.0);\",\n        \"}\",\n      ].join(\"\\n\");\n\n      /* ── Three.js Setup ─────────────────────────────────────────────── */\n      var threeCanvas = document.getElementById(\"three-canvas\");\n      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n\n      var scene = new THREE.Scene();\n      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n      var uniforms = { uTime: { value: 0 } };\n      var mat = new THREE.ShaderMaterial({\n        vertexShader: vs,\n        fragmentShader: fs,\n        uniforms: uniforms,\n      });\n      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), mat);\n      scene.add(quad);\n\n      /* ── Glass Canvas ───────────────────────────────────────────────── */\n      var glassCanvas = document.getElementById(\"glass-canvas\");\n      var ctx = glassCanvas.getContext(\"2d\");\n      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);\n      var lgReady = false;\n\n      function renderGlass(time) {\n        if (!lgReady) return;\n        uniforms.uTime.value = time;\n        renderer.render(scene, camera);\n        ctx.clearRect(0, 0, W, H);\n        ctx.drawImage(threeCanvas, 0, 0, W, H);\n        lg.renderGlassElements();\n      }\n\n      function requestGlassRender(time) {\n        if (glassCanvas.requestPaint) {\n          glassCanvas.onpaint = function () {\n            renderGlass(time);\n          };\n          glassCanvas.requestPaint();\n          return;\n        }\n        renderGlass(time);\n      }\n\n      lg.waitForInit().then(function (ok) {\n        if (!ok) return;\n        lgReady = true;\n        requestGlassRender(0);\n      });\n\n      /* ── GSAP Timeline ──────────────────────────────────────────────── */\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var gm = document.getElementById(\"glass-menu\");\n      var gf = document.getElementById(\"glass-file\");\n      var gsm = document.getElementById(\"glass-submenu\");\n      var tm = document.getElementById(\"text-menu\");\n      var pointer = document.getElementById(\"pointer\");\n      var fileCard = document.getElementById(\"context-file\");\n\n      gsap.set([gm, tm], {\n        left: 860,\n        top: 270,\n        opacity: 0,\n        scale: 0.82,\n        y: -8,\n        transformOrigin: \"0% 18%\",\n      });\n      // glass (#glass-file) is html-in-canvas — stays on left/top (exempt, no stutter)\n      gsap.set(gf, { top: 372, opacity: 1, scale: 1, transformOrigin: \"78% 54%\" });\n      // plain DOM (#context-file) — CSS resting top is 340px, so top:372 becomes y:32\n      gsap.set(fileCard, { y: 32, opacity: 1, scale: 1, transformOrigin: \"78% 54%\" });\n      gsap.set([gsm, \"#submenu-preview\"], {\n        left: 1980,\n        opacity: 0,\n        scale: 0.86,\n        x: -12,\n        transformOrigin: \"0% 50%\",\n      });\n      gsap.set(\".menu-item\", { y: -4, opacity: 0 });\n      // #menu-highlight plain DOM — CSS resting top:17; top:17 seed is y:0, tweens use y\n      gsap.set(\"#menu-highlight\", { y: 0, opacity: 0 });\n\n      tl.to(gf, { top: 340, duration: 0.38, ease: \"power3.out\" }, 0.1);\n      tl.to(fileCard, { y: 0, duration: 0.38, ease: \"power3.out\" }, 0.1);\n      // #pointer plain DOM — CSS resting left:778 top:395; convert left/top → x/y offsets\n      tl.fromTo(\n        pointer,\n        { x: -158, y: 125 },\n        { x: 0, y: 0, duration: 0.55, ease: \"power3.out\" },\n        0.35,\n      );\n      tl.set(\"#click-ring\", { left: 756, top: 372, scale: 0.72 }, 0.84);\n      tl.to(\"#click-ring\", { opacity: 0.7, scale: 1.18, duration: 0.16, ease: \"power2.out\" }, 0.86);\n      tl.to(\"#click-ring\", { opacity: 0, scale: 1.8, duration: 0.28, ease: \"power2.out\" }, 1.02);\n      tl.to(\n        [gf, fileCard],\n        { scale: 0.985, duration: 0.08, ease: \"power2.out\", yoyo: true, repeat: 1 },\n        0.86,\n      );\n\n      tl.to([gm, tm], { opacity: 1, scale: 1, y: 0, duration: 0.36, ease: \"back.out(1.08)\" }, 0.98);\n      tl.to(\n        \".menu-item\",\n        { y: 0, opacity: 1, duration: 0.24, ease: \"power3.out\", stagger: 0.026 },\n        1.07,\n      );\n\n      tl.to(\"#menu-highlight\", { opacity: 1, duration: 0.12, ease: \"none\" }, 1.35);\n      tl.to(\"#menu-highlight\", { y: 52, duration: 0.22, ease: \"power2.out\" }, 2.0);\n      tl.to(pointer, { x: 350, y: 73, duration: 0.46, ease: \"power3.inOut\" }, 2.48);\n      tl.to(\"#menu-highlight\", { y: 170, duration: 0.22, ease: \"power2.out\" }, 2.58);\n      tl.set([gsm, \"#submenu-preview\"], { left: 1236 }, 3.04);\n      tl.fromTo(\n        [gsm, \"#submenu-preview\"],\n        { scale: 0.86, opacity: 0, x: -12 },\n        { scale: 1, opacity: 1, x: 0, duration: 0.24, ease: \"back.out(1.04)\" },\n        3.08,\n      );\n      tl.to(pointer, { x: 540, y: 89, duration: 0.5, ease: \"power3.inOut\" }, 3.32);\n      tl.set(\"#click-ring\", { left: 1295, top: 461, scale: 0.72 }, 3.86);\n      tl.to(\n        \"#click-ring\",\n        { opacity: 0.72, scale: 1.08, duration: 0.12, ease: \"power2.out\" },\n        3.88,\n      );\n      tl.to(\"#click-ring\", { opacity: 0, scale: 1.58, duration: 0.24, ease: \"power2.out\" }, 4.0);\n      tl.to(\n        [gsm, \"#submenu-preview\"],\n        { scale: 0.965, duration: 0.09, ease: \"power2.out\", yoyo: true, repeat: 1 },\n        3.92,\n      );\n\n      tl.to(pointer, { opacity: 0, duration: 0.35, ease: \"power2.out\" }, 5.85);\n\n      /* Duration driver */\n      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: \"none\" }, 0);\n\n      tl.eventCallback(\"onUpdate\", function () {\n        requestGlassRender(tl.time());\n      });\n\n      window.__timelines[\"liquid-glass-context-menu\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/liquid-glass-media-controls.json b/docs/public/catalog/blocks/liquid-glass-media-controls.json
new file mode 100644
index 0000000000..ddd3a84a72
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-media-controls.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Liquid Glass Media Controls</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"></script>\n    <script src=\"data:text/javascript;base64,dmFyIExpcXVpZEdsYXNzID0gKCgpID0+IHsKICB2YXIgRSA9IE9iamVjdC5kZWZpbmVQcm9wZXJ0eTsKICB2YXIgRCA9IE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3I7CiAgdmFyIHogPSBPYmplY3QuZ2V0T3duUHJvcGVydHlOYW1lczsKICB2YXIgTiA9IE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHk7CiAgdmFyIE8gPSAobSwgZSkgPT4gewogICAgICBmb3IgKHZhciB0IGluIGUpIEUobSwgdCwgeyBnZXQ6IGVbdF0sIGVudW1lcmFibGU6ICEwIH0pOwogICAgfSwKICAgIEggPSAobSwgZSwgdCwgcikgPT4gewogICAgICBpZiAoKGUgJiYgdHlwZW9mIGUgPT0gIm9iamVjdCIpIHx8IHR5cGVvZiBlID09ICJmdW5jdGlvbiIpCiAgICAgICAgZm9yIChsZXQgbiBvZiB6KGUpKQogICAgICAgICAgIU4uY2FsbChtLCBuKSAmJgogICAgICAgICAgICBuICE9PSB0ICYmCiAgICAgICAgICAgIEUobSwgbiwgeyBnZXQ6ICgpID0+IGVbbl0sIGVudW1lcmFibGU6ICEociA9IEQoZSwgbikpIHx8IHIuZW51bWVyYWJsZSB9KTsKICAgICAgcmV0dXJuIG07CiAgICB9OwogIHZhciBJID0gKG0pID0+IEgoRSh7fSwgIl9fZXNNb2R1bGUiLCB7IHZhbHVlOiAhMCB9KSwgbSk7CiAgdmFyIFkgPSB7fTsKICBPKFksIHsKICAgIENTU19QUk9QRVJUWV9NQVA6ICgpID0+IF8sCiAgICBERUZBVUxUUzogKCkgPT4gdywKICAgIEdsYXNzUmVuZGVyZXJHUFU6ICgpID0+IHksCiAgICBMaXF1aWRHbGFzc0NhbnZhczogKCkgPT4gUiwKICB9KTsKICB2YXIgdyA9IHsKICAgICAgYmx1ckFtb3VudDogMCwKICAgICAgcmVmcmFjdGlvbjogMC42OSwKICAgICAgY2hyb21BYmVycmF0aW9uOiAwLjA1LAogICAgICBlZGdlSGlnaGxpZ2h0OiAwLjA1LAogICAgICBzcGVjdWxhcjogMCwKICAgICAgZnJlc25lbDogMSwKICAgICAgZGlzdG9ydGlvbjogMCwKICAgICAgY29ybmVyUmFkaXVzOiA2NSwKICAgICAgelJhZGl1czogNDAsCiAgICAgIG9wYWNpdHk6IDEsCiAgICAgIHNhdHVyYXRpb246IDAsCiAgICAgIHRpbnRTdHJlbmd0aDogMCwKICAgICAgYnJpZ2h0bmVzczogMCwKICAgICAgc2hhZG93T3BhY2l0eTogMC4zLAogICAgICBzaGFkb3dTcHJlYWQ6IDEwLAogICAgICBzaGFkb3dPZmZzZXRZOiAxLAogICAgICBiZXZlbE1vZGU6IDAsCiAgICB9LAogICAgXyA9IHsKICAgICAgIi0tbGctYmx1ciI6ICJibHVyQW1vdW50IiwKICAgICAgIi0tbGctcmVmcmFjdGlvbiI6ICJyZWZyYWN0aW9uIiwKICAgICAgIi0tbGctY2hyb20tYWJlcnJhdGlvbiI6ICJjaHJvbUFiZXJyYXRpb24iLAogICAgICAiLS1sZy1lZGdlLWhpZ2hsaWdodCI6ICJlZGdlSGlnaGxpZ2h0IiwKICAgICAgIi0tbGctc3BlY3VsYXIiOiAic3BlY3VsYXIiLAogICAgICAiLS1sZy1mcmVzbmVsIjogImZyZXNuZWwiLAogICAgICAiLS1sZy1kaXN0b3J0aW9uIjogImRpc3RvcnRpb24iLAogICAgICAiLS1sZy1jb3JuZXItcmFkaXVzIjogImNvcm5lclJhZGl1cyIsCiAgICAgICItLWxnLXotcmFkaXVzIjogInpSYWRpdXMiLAogICAgICAiLS1sZy1vcGFjaXR5IjogIm9wYWNpdHkiLAogICAgICAiLS1sZy1zYXR1cmF0aW9uIjogInNhdHVyYXRpb24iLAogICAgICAiLS1sZy10aW50IjogInRpbnRTdHJlbmd0aCIsCiAgICAgICItLWxnLWJyaWdodG5lc3MiOiAiYnJpZ2h0bmVzcyIsCiAgICAgICItLWxnLXNoYWRvdy1vcGFjaXR5IjogInNoYWRvd09wYWNpdHkiLAogICAgICAiLS1sZy1zaGFkb3ctc3ByZWFkIjogInNoYWRvd1NwcmVhZCIsCiAgICAgICItLWxnLXNoYWRvdy1vZmZzZXQteSI6ICJzaGFkb3dPZmZzZXRZIiwKICAgICAgIi0tbGctYmV2ZWwtbW9kZSI6ICJiZXZlbE1vZGUiLAogICAgfSwKICAgIEwgPSA2LAogICAgVCA9IDIwOwogIHZhciBxID0gYC8vIEJsaXQgc2hhZGVyIC0gY29weSB0ZXh0dXJlIHdpdGggVVYgdHJhbnNmb3JtCgpzdHJ1Y3QgQmxpdFVuaWZvcm1zIHsKICBzY2FsZTogdmVjMmYsCiAgb2Zmc2V0OiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBCbGl0VW5pZm9ybXM7CkBncm91cCgwKSBAYmluZGluZygxKSB2YXIgdGV4U2FtcGxlcjogc2FtcGxlcjsKQGdyb3VwKDApIEBiaW5kaW5nKDIpIHZhciB0ZXg6IHRleHR1cmVfMmQ8ZjMyPjsKCnN0cnVjdCBWZXJ0ZXhPdXRwdXQgewogIEBidWlsdGluKHBvc2l0aW9uKSBwb3NpdGlvbjogdmVjNGYsCiAgQGxvY2F0aW9uKDApIHV2OiB2ZWMyZiwKfQoKQHZlcnRleApmbiB2ZXJ0ZXhNYWluKEBsb2NhdGlvbigwKSBwb3M6IHZlYzJmKSAtPiBWZXJ0ZXhPdXRwdXQgewogIHZhciBvdXQ6IFZlcnRleE91dHB1dDsKICBvdXQudXYgPSBwb3MgKiAwLjUgKyAwLjU7CiAgb3V0LnBvc2l0aW9uID0gdmVjNGYocG9zLCAwLjAsIDEuMCk7CiAgcmV0dXJuIG91dDsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIHJldHVybiB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKiB1LnNjYWxlICsgdS5vZmZzZXQpOwp9CmAsCiAgICBrID0gYC8vIEJsdXIgc2hhZGVyIC0gOS10YXAgR2F1c3NpYW4gYmx1ciAoc2luZ2xlIGRpcmVjdGlvbikKCnN0cnVjdCBCbHVyVW5pZm9ybXMgewogIGRpcjogdmVjMmYsCiAgX3BhZDogdmVjMmYsCn0KCkBncm91cCgwKSBAYmluZGluZygwKSB2YXI8dW5pZm9ybT4gdTogQmx1clVuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgdGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSB1djogdmVjMmYsCn0KCkB2ZXJ0ZXgKZm4gdmVydGV4TWFpbihAbG9jYXRpb24oMCkgcG9zOiB2ZWMyZikgLT4gVmVydGV4T3V0cHV0IHsKICB2YXIgb3V0OiBWZXJ0ZXhPdXRwdXQ7CiAgb3V0LnV2ID0gcG9zICogMC41ICsgMC41OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKHBvcywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCkBmcmFnbWVudApmbiBmcmFnbWVudE1haW4oaW46IFZlcnRleE91dHB1dCkgLT4gQGxvY2F0aW9uKDApIHZlYzRmIHsKICB2YXIgcyA9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51dikgKiAwLjIyNzAyNzsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogMS4wKSAqIDAuMTk0NTk0OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiAxLjApICogMC4xOTQ1OTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKyB1LmRpciAqIDIuMCkgKiAwLjEyMTYyMjsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diAtIHUuZGlyICogMi4wKSAqIDAuMTIxNjIyOwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2ICsgdS5kaXIgKiAzLjApICogMC4wNTQwNTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgLSB1LmRpciAqIDMuMCkgKiAwLjA1NDA1NDsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogNC4wKSAqIDAuMDE2MjE2OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiA0LjApICogMC4wMTYyMTY7CiAgcmV0dXJuIHM7Cn0KYCwKICAgIFcgPSBgLy8gR2xhc3Mgc2hhZGVyIC0gdGhlIGNvcmUgbGlxdWlkIGdsYXNzIGVmZmVjdAoKc3RydWN0IEdsYXNzVW5pZm9ybXMgewogIGNlbnRlcjogdmVjMmYsCiAgc2l6ZTogdmVjMmYsCiAgcmVzOiB2ZWMyZiwKICByYWRpdXM6IGYzMiwKICBwYWQ6IGYzMiwKICByZWZyYWN0OiBmMzIsCiAgY2hyb21hOiBmMzIsCiAgZWRnZUhMOiBmMzIsCiAgc3BlYzogZjMyLAogIGZyZXNuZWw6IGYzMiwKICBkaXN0b3J0OiBmMzIsCiAgYWxwaGE6IGYzMiwKICBzYXQ6IGYzMiwKICB0aW50OiBmMzIsCiAgelJhZGl1czogZjMyLAogIGJyaWdodG5lc3M6IGYzMiwKICBzaGFkb3dBbHBoYTogZjMyLAogIHNoYWRvd1NwcmVhZDogZjMyLAogIHNoYWRvd09mZlk6IGYzMiwKICBiZXZlbE1vZGU6IGYzMiwKICBfcGFkOiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBHbGFzc1VuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgYmdUZXg6IHRleHR1cmVfMmQ8ZjMyPjsKQGdyb3VwKDApIEBiaW5kaW5nKDMpIHZhciBibHVyVGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSBsb2NhbFB4OiB2ZWMyZiwKICBAbG9jYXRpb24oMSkgc2NyZWVuVVY6IHZlYzJmLAp9CgpAdmVydGV4CmZuIHZlcnRleE1haW4oQGxvY2F0aW9uKDApIHBvczogdmVjMmYpIC0+IFZlcnRleE91dHB1dCB7CiAgdmFyIG91dDogVmVydGV4T3V0cHV0OwogIGxldCB0b3RhbCA9IHUuc2l6ZSArIHZlYzJmKHUucGFkICogMi4wKTsKICBvdXQubG9jYWxQeCA9IHBvcyAqIHRvdGFsOwogIGxldCBweCA9IHUuY2VudGVyICsgcG9zICogdG90YWw7CiAgb3V0LnNjcmVlblVWID0gdmVjMmYocHgueCAvIHUucmVzLngsIDEuMCAtIHB4LnkgLyB1LnJlcy55KTsKICB2YXIgbmRjID0gKHB4IC8gdS5yZXMpICogMi4wIC0gMS4wOwogIG5kYy55ID0gLW5kYy55OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKG5kYywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCi8vIFJvdW5kZWQtcmVjdCBzaWduZWQgZGlzdGFuY2UKZm4gcnJTREYocDogdmVjMmYsIGI6IHZlYzJmLCByOiBmMzIpIC0+IGYzMiB7CiAgbGV0IHEgPSBhYnMocCkgLSBiICsgdmVjMmYocik7CiAgcmV0dXJuIG1pbihtYXgocS54LCBxLnkpLCAwLjApICsgbGVuZ3RoKG1heChxLCB2ZWMyZigwLjApKSkgLSByOwp9CgovLyBCZXZlbCBoZWlnaHQgZmllbGQKZm4gYmV2ZWxIZWlnaHQoZDogZjMyLCB6UjogZjMyKSAtPiBmMzIgewogIGlmIChkIDw9IDAuMCkgeyByZXR1cm4gMC4wOyB9CiAgaWYgKGQgPj0gelIpIHsgcmV0dXJuIHpSOyB9CiAgcmV0dXJuIHNxcnQoZCAqICgyLjAgKiB6UiAtIGQpKTsKfQoKZm4gaGFzaChwOiB2ZWMyZikgLT4gZjMyIHsKICByZXR1cm4gZnJhY3Qoc2luKGRvdChwLCB2ZWMyZigxMjcuMSwgMzExLjcpKSkgKiA0Mzc1OC41NDUzKTsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIGxldCBoYWxmXyA9IHUuc2l6ZSAqIDAuNTsKICBsZXQgciA9IG1pbih1LnJhZGl1cywgbWluKGhhbGZfLngsIGhhbGZfLnkpKTsKICBsZXQgc2RmID0gcnJTREYoaW4ubG9jYWxQeCwgaGFsZl8sIHIpOwoKICAvLyBBbnRpLWFsaWFzZWQgbWFzawogIGxldCBtYXNrID0gMS4wIC0gc21vb3Roc3RlcCgtMS41LCAwLjUsIHNkZik7CgogIGxldCBtYXhEID0gbWluKGhhbGZfLngsIGhhbGZfLnkpOwogIGxldCBpbnNpZGUgPSAtc2RmOwogIGxldCBlZGdlID0gc21vb3Roc3RlcChtYXhEICogMC4zNSwgMC4wLCBpbnNpZGUpOwoKICAvLyBTdXJmYWNlIG5vcm1hbCB2aWEgYmV2ZWwgaGVpZ2h0IGZpZWxkCiAgbGV0IHpSID0gdS56UmFkaXVzOwogIGxldCBlID0gMi4wOwogIGxldCBkQyA9IGluc2lkZTsKICBsZXQgZFIgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZEwgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZFUgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgZEQgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgaEMgPSBiZXZlbEhlaWdodChkQywgelIpOwogIGxldCBoUiA9IGJldmVsSGVpZ2h0KGRSLCB6Uik7CiAgbGV0IGhMID0gYmV2ZWxIZWlnaHQoZEwsIHpSKTsKICBsZXQgaFUgPSBiZXZlbEhlaWdodChkVSwgelIpOwogIGxldCBoRCA9IGJldmVsSGVpZ2h0KGRELCB6Uik7CiAgbGV0IGhHcmFkID0gdmVjMmYoaFIgLSBoTCwgaFUgLSBoRCkgLyAoMi4wICogZSk7CiAgbGV0IE4gPSBub3JtYWxpemUodmVjM2YoLWhHcmFkLCAxLjApKTsKCiAgbGV0IGRlcHRoID0gc21vb3Roc3RlcCgwLjAsIHpSLCBpbnNpZGUpOwoKICAvLyBSZWZyYWN0aW9uIC0gY29tcHV0ZSBib3RoIG1vZGVzIGFuZCBzZWxlY3QKICBsZXQgcHhUb1VWID0gdmVjMmYoMS4wLCAtMS4wKSAvIHUucmVzOwogIGxldCBpb3IgPSAxLjU7CiAgbGV0IHJlZnJQb3cgPSAxLjAgLSAxLjAgLyBpb3I7CiAgbGV0IHRoaWNrbmVzcyA9IGhDICogMi4wOwogIGxldCB0aGlja05vcm0gPSB0aGlja25lc3MgLyBtYXgoelIgKiAyLjAsIDEuMCk7CgogIC8vIEJpY29udmV4IG1vZGUKICBsZXQgZXhpdFJlZnIgPSBoR3JhZCAqIHJlZnJQb3c7CiAgbGV0IGVudHJ5UmVmciA9IGhHcmFkICogcmVmclBvdzsKICBsZXQgdGhyb3VnaFJlZnIgPSBlbnRyeVJlZnIgKiB0aGlja05vcm0gKiAwLjU7CiAgdmFyIHJlZnJQeEJpY29udmV4ID0gKGV4aXRSZWZyICsgZW50cnlSZWZyICsgdGhyb3VnaFJlZnIpICogdS5yZWZyYWN0ICogMzAuMDsKICBsZXQgY2VudGVyRGlyID0gLWluLmxvY2FsUHggLyBtYXgoaGFsZl8sIHZlYzJmKDEuMCkpOwogIHJlZnJQeEJpY29udmV4ICs9IGNlbnRlckRpciAqIHUucmVmcmFjdCAqIDQuMCAqIGRlcHRoOwoKICAvLyBEb21lIG1vZGUKICBsZXQgcmVmclB4RG9tZSA9IC1pbi5sb2NhbFB4ICogdS5yZWZyYWN0ICogZGVwdGggKiAwLjM1OwoKICAvLyBTZWxlY3QgYmFzZWQgb24gYmV2ZWwgbW9kZQogIGxldCByZWZyUHggPSBzZWxlY3QocmVmclB4Qmljb252ZXgsIHJlZnJQeERvbWUsIHUuYmV2ZWxNb2RlID49IDAuNSk7CiAgbGV0IHJlZnIgPSByZWZyUHggKiBweFRvVVY7CgogIC8vIE1pY3JvLWRpc3RvcnRpb24gbm9pc2UKICBsZXQgbnMgPSBpbi5sb2NhbFB4ICogMC4wODsKICBsZXQgYWJzUHhUb1VWID0gdmVjMmYoMS4wKSAvIHUucmVzOwogIGxldCBtaWNybyA9ICh2ZWMyZihoYXNoKG5zKSwgaGFzaChucyArIHZlYzJmKDM3LjApKSkgLSAwLjUpICogdS5kaXN0b3J0ICogNC4wICogYWJzUHhUb1VWOwoKICAvLyBDaHJvbWF0aWMgYWJlcnJhdGlvbgogIGxldCBjYVMgPSB1LmNocm9tYSAqIDE4LjAgKiAoZWRnZSAqIDAuNyArIDAuMykgKiAyLjA7CiAgbGV0IGNhRCA9IE4ueHkgKiBjYVMgKiBweFRvVVY7CiAgbGV0IGJhc2UgPSBpbi5zY3JlZW5VViArIHJlZnIgKyBtaWNybzsKCiAgLy8gU2FtcGxlIHRleHR1cmVzIChtdXN0IGJlIGluIHVuaWZvcm0gY29udHJvbCBmbG93KQogIGxldCBzaGFycFIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlICsgY2FEKS5yOwogIGxldCBzaGFycEcgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBzaGFycEIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlIC0gY2FEKS5iOwogIGxldCBzaGFycCA9IHZlYzNmKHNoYXJwUiwgc2hhcnBHLCBzaGFycEIpOwoKICBsZXQgYmx1clIgPSB0ZXh0dXJlU2FtcGxlKGJsdXJUZXgsIHRleFNhbXBsZXIsIGJhc2UgKyBjYUQpLnI7CiAgbGV0IGJsdXJHID0gdGV4dHVyZVNhbXBsZShibHVyVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBibHVyQiA9IHRleHR1cmVTYW1wbGUoYmx1clRleCwgdGV4U2FtcGxlciwgYmFzZSAtIGNhRCkuYjsKICBsZXQgYmx1ciA9IHZlYzNmKGJsdXJSLCBibHVyRywgYmx1ckIpOwoKICAvLyBFZGdlLXdlaWdodGVkIGJsdXIgbWl4CiAgbGV0IGVkZ2VNaXggPSAxLjAgLSBlZGdlICogMC4xNTsKICB2YXIgY29sID0gbWl4KHNoYXJwLCBibHVyLCBlZGdlTWl4KTsKCiAgLy8gQnJpZ2h0bmVzcwogIGNvbCAqPSAxLjAgKyB1LmJyaWdodG5lc3M7CgogIC8vIFNhdHVyYXRpb24KICBsZXQgbHVtID0gZG90KGNvbCwgdmVjM2YoMC4yOTksIDAuNTg3LCAwLjExNCkpOwogIGNvbCA9IG1peCh2ZWMzZihsdW0pLCBjb2wsIDEuMCArIHUuc2F0KTsKCiAgLy8gQ29vbCBnbGFzcyB0aW50CiAgY29sID0gbWl4KGNvbCwgY29sICogdmVjM2YoMC45MiwgMC45NSwgMS4wNSksIHUudGludCk7CiAgY29sICo9IDEuMCArIDAuMDYgKiBkZXB0aDsKCiAgLy8gRnJlc25lbAogIGxldCBmcmVzID0gcG93KDEuMCAtIGFicyhOLnopLCA0LjApICogdS5mcmVzbmVsOwoKICAvLyBTcGVjdWxhciBoaWdobGlnaHRzIChtdWx0aS1saWdodCBCbGlubi1QaG9uZykKICBsZXQgViA9IHZlYzNmKDAuMCwgMC4wLCAxLjApOwogIGxldCBMMSA9IG5vcm1hbGl6ZSh2ZWMzZigwLjQsIDAuNywgMS4wKSk7CiAgbGV0IEgxID0gbm9ybWFsaXplKEwxICsgVik7CiAgbGV0IHNwMSA9IHBvdyhtYXgoZG90KE4sIEgxKSwgMC4wKSwgOTAuMCk7CiAgbGV0IEwyID0gbm9ybWFsaXplKHZlYzNmKC0wLjMsIC0wLjUsIDEuMCkpOwogIGxldCBIMiA9IG5vcm1hbGl6ZShMMiArIFYpOwogIGxldCBzcDIgPSBwb3cobWF4KGRvdChOLCBIMiksIDAuMCksIDUwLjApICogMC4zOwogIGxldCBMMyA9IG5vcm1hbGl6ZSh2ZWMzZigwLjEsIDAuMywgMS4wKSk7CiAgbGV0IHNwQiA9IHBvdyhtYXgoZG90KE4sIEwzKSwgMC4wKSwgNi4wKSAqIDAuMTsKICBsZXQgTDQgPSBub3JtYWxpemUodmVjM2YoMC4wLCAwLjksIDAuNCkpOwogIGxldCBINCA9IG5vcm1hbGl6ZShMNCArIFYpOwogIGxldCBzcDQgPSBwb3cobWF4KGRvdChOLCBINCksIDAuMCksIDEyMC4wKSAqIDAuNjsKICBsZXQgdG90YWxTcGVjID0gKHNwMSArIHNwMiArIHNwQiArIHNwNCkgKiB1LnNwZWM7CgogIC8vIElubmVyIGJvcmRlciAvIHN0cm9rZSBoaWdobGlnaHQKICBsZXQgYm9yZGVyV2lkdGggPSAxLjU7CiAgbGV0IGlubmVyU3Ryb2tlID0gc21vb3Roc3RlcCgtYm9yZGVyV2lkdGggLSAxLjAsIC1ib3JkZXJXaWR0aCwgc2RmKQogICAgICAgICAgICAgICAgICAqICgxLjAgLSBzbW9vdGhzdGVwKC0xLjAsIDAuMCwgc2RmKSk7CiAgbGV0IHRvcEJpYXMgPSAwLjUgKyAwLjUgKiAoLWluLmxvY2FsUHgueSAvIGhhbGZfLnkpOwogIGxldCBpbm5lclN0cm9rZUZpbmFsID0gaW5uZXJTdHJva2UgKiAoMC40ICsgMC42ICogdG9wQmlhcyk7CgogIC8vIEVkZ2UgaGlnaGxpZ2h0ICYgaW5uZXIgZ2xvdwogIGxldCByaW0gPSBlZGdlICogdS5lZGdlSEwgKiAwLjIyOwogIGxldCBpbm5lckdsb3cgPSBzbW9vdGhzdGVwKDUuMCwgMC4wLCAtc2RmKSAqIHUuZWRnZUhMICogMC4xNTsKCiAgLy8gRW52aXJvbm1lbnQtbGlrZSByZWZsZWN0aW9uIChmYWtlKQogIGxldCBlbnZSZWZsID0gKE4ueSAqIDAuNSArIDAuNSkgKiBmcmVzICogMC4wODsKCiAgLy8gQ29tcG9zaXRlIGdsYXNzIGVmZmVjdAogIHZhciBmaW4gPSBjb2w7CiAgZmluICs9IHZlYzNmKHRvdGFsU3BlYyk7CiAgZmluICs9IHZlYzNmKHJpbSArIGlubmVyR2xvdyk7CiAgZmluICs9IHZlYzNmKGlubmVyU3Ryb2tlRmluYWwgKiB1LmVkZ2VITCAqIDAuNTUpOwogIGZpbiArPSB2ZWMzZihlbnZSZWZsKTsKICBmaW4gPSBtaXgoZmluLCB2ZWMzZigxLjApLCBmcmVzICogMC4yKTsKCiAgLy8gU2hhZG93IGNhbGN1bGF0aW9uIChvdXRzaWRlIHBhbmVsKQogIGxldCBzZGZTaGFkb3cgPSByclNERihpbi5sb2NhbFB4IC0gdmVjMmYoMC4wLCB1LnNoYWRvd09mZlkpLCBoYWxmXywgcik7CiAgbGV0IHNoYWRvd0QgPSBtYXgoc2RmU2hhZG93IC0gMS4wLCAwLjApOwogIGxldCBzcHJlYWQgPSBtYXgodS5zaGFkb3dTcHJlYWQsIDEuMCk7CiAgbGV0IGZhbGxvZmYgPSAxLjAgLyAoc3ByZWFkICogc3ByZWFkKTsKICBsZXQgb3V0ZXJTaGFkb3cgPSBleHAoLXNoYWRvd0QgKiBzaGFkb3dEICogZmFsbG9mZikgKiAwLjY1OwogIGxldCBjb250YWN0U2hhZG93ID0gZXhwKC1zaGFkb3dEICogMC4wOCAvIG1heChzcHJlYWQgKiAwLjA0LCAwLjAxKSkgKiAwLjM1OwogIGxldCBzaGFkb3cgPSAob3V0ZXJTaGFkb3cgKyBjb250YWN0U2hhZG93KSAqIHUuc2hhZG93QWxwaGE7CgogIC8vIFNlbGVjdCBiZXR3ZWVuIHNoYWRvdyAob3V0c2lkZSkgYW5kIGdsYXNzIChpbnNpZGUpCiAgbGV0IGlzT3V0c2lkZSA9IHNkZiA+IDAuMDsKICBsZXQgZmluYWxDb2xvciA9IHNlbGVjdChmaW4sIHZlYzNmKDAuMCksIGlzT3V0c2lkZSk7CiAgbGV0IGZpbmFsQWxwaGEgPSBzZWxlY3QobWFzayAqIHUuYWxwaGEsIHNoYWRvdywgaXNPdXRzaWRlKTsKCiAgcmV0dXJuIHZlYzRmKGZpbmFsQ29sb3IsIGZpbmFsQWxwaGEpOwp9CmAsCiAgICB5ID0gY2xhc3MgewogICAgICBjYW52YXM7CiAgICAgIGRldmljZSA9IG51bGw7CiAgICAgIGNvbnRleHQgPSBudWxsOwogICAgICBmb3JtYXQgPSAiYmdyYTh1bm9ybSI7CiAgICAgIGJsaXRQaXBlbGluZSA9IG51bGw7CiAgICAgIGJsdXJQaXBlbGluZSA9IG51bGw7CiAgICAgIGdsYXNzUGlwZWxpbmUgPSBudWxsOwogICAgICBxdWFkQnVmZmVyID0gbnVsbDsKICAgICAgcGFuZWxCdWZmZXIgPSBudWxsOwogICAgICBibGl0VW5pZm9ybUJ1ZmZlciA9IG51bGw7CiAgICAgIGJsdXJVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgZ2xhc3NVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgc2FtcGxlciA9IG51bGw7CiAgICAgIHRhcmdldENhY2hlID0gbmV3IE1hcCgpOwogICAgICBhY3RpdmVUYXJnZXRzID0gbnVsbDsKICAgICAgYmdUZXh0dXJlID0gbnVsbDsKICAgICAgYmdUZXh0dXJlVmlldyA9IG51bGw7CiAgICAgIHdpZHRoID0gMDsKICAgICAgaGVpZ2h0ID0gMDsKICAgICAgX2luaXRQcm9taXNlID0gbnVsbDsKICAgICAgX2luaXRpYWxpemVkID0gITE7CiAgICAgIGNvbnN0cnVjdG9yKCkgewogICAgICAgICgodGhpcy5jYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgICAodGhpcy5jYW52YXMuc3R5bGUuZGlzcGxheSA9ICJub25lIiksCiAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMuY2FudmFzKSk7CiAgICAgIH0KICAgICAgYXN5bmMgaW5pdCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgID8gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgIDogKCh0aGlzLl9pbml0UHJvbWlzZSA9IHRoaXMuX2RvSW5pdCgpKSwgdGhpcy5faW5pdFByb21pc2UpOwogICAgICB9CiAgICAgIGFzeW5jIF9kb0luaXQoKSB7CiAgICAgICAgaWYgKCFuYXZpZ2F0b3IuZ3B1KSByZXR1cm4gKGNvbnNvbGUud2FybigiV2ViR1BVIG5vdCBzdXBwb3J0ZWQiKSwgITEpOwogICAgICAgIGxldCBlID0gYXdhaXQgbmF2aWdhdG9yLmdwdS5yZXF1ZXN0QWRhcHRlcigpOwogICAgICAgIHJldHVybiBlCiAgICAgICAgICA/ICgodGhpcy5kZXZpY2UgPSBhd2FpdCBlLnJlcXVlc3REZXZpY2UoKSksCiAgICAgICAgICAgIHRoaXMuZGV2aWNlCiAgICAgICAgICAgICAgPyAoKHRoaXMuY29udGV4dCA9IHRoaXMuY2FudmFzLmdldENvbnRleHQoIndlYmdwdSIpKSwKICAgICAgICAgICAgICAgIHRoaXMuY29udGV4dAogICAgICAgICAgICAgICAgICA/ICgodGhpcy5mb3JtYXQgPSBuYXZpZ2F0b3IuZ3B1LmdldFByZWZlcnJlZENhbnZhc0Zvcm1hdCgpKSwKICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbnRleHQuY29uZmlndXJlKHsKICAgICAgICAgICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgICAgICAgICBmb3JtYXQ6IHRoaXMuZm9ybWF0LAogICAgICAgICAgICAgICAgICAgICAgYWxwaGFNb2RlOiAicHJlbXVsdGlwbGllZCIsCiAgICAgICAgICAgICAgICAgICAgfSksCiAgICAgICAgICAgICAgICAgICAgdGhpcy5faW5pdFBpcGVsaW5lcygpLAogICAgICAgICAgICAgICAgICAgIHRoaXMuX2luaXRCdWZmZXJzKCksCiAgICAgICAgICAgICAgICAgICAgKHRoaXMuX2luaXRpYWxpemVkID0gITApLAogICAgICAgICAgICAgICAgICAgICEwKQogICAgICAgICAgICAgICAgICA6IChjb25zb2xlLndhcm4oIkZhaWxlZCB0byBnZXQgV2ViR1BVIGNvbnRleHQiKSwgITEpKQogICAgICAgICAgICAgIDogKGNvbnNvbGUud2FybigiRmFpbGVkIHRvIGdldCBXZWJHUFUgZGV2aWNlIiksICExKSkKICAgICAgICAgIDogKGNvbnNvbGUud2FybigiTm8gV2ViR1BVIGFkYXB0ZXIgZm91bmQiKSwgITEpOwogICAgICB9CiAgICAgIGdldCBpbml0aWFsaXplZCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICAgIH0KICAgICAgX2luaXRQaXBlbGluZXMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICB0aGlzLnNhbXBsZXIgPSBlLmNyZWF0ZVNhbXBsZXIoewogICAgICAgICAgbWFnRmlsdGVyOiAibGluZWFyIiwKICAgICAgICAgIG1pbkZpbHRlcjogImxpbmVhciIsCiAgICAgICAgICBhZGRyZXNzTW9kZVU6ICJjbGFtcC10by1lZGdlIiwKICAgICAgICAgIGFkZHJlc3NNb2RlVjogImNsYW1wLXRvLWVkZ2UiLAogICAgICAgIH0pOwogICAgICAgIGxldCB0ID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBxIH0pLAogICAgICAgICAgciA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsaXRQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW3JdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogdCwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiB0LCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBuID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBrIH0pLAogICAgICAgICAgaSA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsdXJQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2ldIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogbiwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiBuLCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBzID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBXIH0pLAogICAgICAgICAgbCA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAzLCB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwgdGV4dHVyZTogeyBzYW1wbGVUeXBlOiAiZmxvYXQiIH0gfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIHRoaXMuZ2xhc3NQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2xdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogcywKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsKICAgICAgICAgICAgbW9kdWxlOiBzLAogICAgICAgICAgICBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwKICAgICAgICAgICAgdGFyZ2V0czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGZvcm1hdDogdGhpcy5mb3JtYXQsCiAgICAgICAgICAgICAgICBibGVuZDogewogICAgICAgICAgICAgICAgICBjb2xvcjogewogICAgICAgICAgICAgICAgICAgIHNyY0ZhY3RvcjogInNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgb3BlcmF0aW9uOiAiYWRkIiwKICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgYWxwaGE6IHsgc3JjRmFjdG9yOiAib25lIiwgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsIG9wZXJhdGlvbjogImFkZCIgfSwKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0sCiAgICAgICAgICBwcmltaXRpdmU6IHsgdG9wb2xvZ3k6ICJ0cmlhbmdsZS1zdHJpcCIgfSwKICAgICAgICB9KTsKICAgICAgfQogICAgICBfaW5pdEJ1ZmZlcnMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICAoKHRoaXMucXVhZEJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlZFUlRFWCwKICAgICAgICAgIG1hcHBlZEF0Q3JlYXRpb246ICEwLAogICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5xdWFkQnVmZmVyLmdldE1hcHBlZFJhbmdlKCkpLnNldChbLTEsIC0xLCAxLCAtMSwgLTEsIDEsIDEsIDFdKSwKICAgICAgICAgIHRoaXMucXVhZEJ1ZmZlci51bm1hcCgpLAogICAgICAgICAgKHRoaXMucGFuZWxCdWZmZXIgPSBlLmNyZWF0ZUJ1ZmZlcih7CiAgICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVkVSVEVYLAogICAgICAgICAgICBtYXBwZWRBdENyZWF0aW9uOiAhMCwKICAgICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5wYW5lbEJ1ZmZlci5nZXRNYXBwZWRSYW5nZSgpKS5zZXQoWwogICAgICAgICAgICAtMC41LCAtMC41LCAwLjUsIC0wLjUsIC0wLjUsIDAuNSwgMC41LCAwLjUsCiAgICAgICAgICBdKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIudW5tYXAoKSwKICAgICAgICAgICh0aGlzLmJsaXRVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmJsdXJVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmdsYXNzVW5pZm9ybUJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgICAgc2l6ZTogMTEyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVU5JRk9STSB8IEdQVUJ1ZmZlclVzYWdlLkNPUFlfRFNULAogICAgICAgICAgfSkpKTsKICAgICAgfQogICAgICByZXNpemUoZSwgdCkgewogICAgICAgIGlmICghKHRoaXMud2lkdGggPT09IGUgJiYgdGhpcy5oZWlnaHQgPT09IHQpKSB7CiAgICAgICAgICAoKHRoaXMud2lkdGggPSBlKSwgKHRoaXMuaGVpZ2h0ID0gdCkpOwogICAgICAgICAgZm9yIChsZXQgciBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KHIpOwogICAgICAgICAgKHRoaXMudGFyZ2V0Q2FjaGUuY2xlYXIoKSwgKHRoaXMuYWN0aXZlVGFyZ2V0cyA9IG51bGwpKTsKICAgICAgICB9CiAgICAgIH0KICAgICAgdXBsb2FkQW5kQmx1cihlLCB0LCByLCBuLCBpLCBzKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuX3NldEFjdGl2ZVNpemUobiwgaSkpIHJldHVybjsKICAgICAgICBsZXQgbCA9IHRoaXMuZGV2aWNlLAogICAgICAgICAgYSA9IHRoaXMud2lkdGgsCiAgICAgICAgICB1ID0gdGhpcy5oZWlnaHQsCiAgICAgICAgICBvID0gdGhpcy5hY3RpdmVUYXJnZXRzLAogICAgICAgICAgZCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImNhbnZhcyIpOwogICAgICAgICgoZC53aWR0aCA9IGEpLAogICAgICAgICAgKGQuaGVpZ2h0ID0gdSksCiAgICAgICAgICBkLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKGUsIC10LCAtciksCiAgICAgICAgICAoIXRoaXMuYmdUZXh0dXJlIHx8IHRoaXMuYmdUZXh0dXJlLndpZHRoICE9PSBhIHx8IHRoaXMuYmdUZXh0dXJlLmhlaWdodCAhPT0gdSkgJiYKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlICYmIHRoaXMuYmdUZXh0dXJlLmRlc3Ryb3koKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlID0gbC5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgICAgICBzaXplOiBbYSwgdV0sCiAgICAgICAgICAgICAgZm9ybWF0OiAicmdiYTh1bm9ybSIsCiAgICAgICAgICAgICAgdXNhZ2U6CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuVEVYVFVSRV9CSU5ESU5HIHwKICAgICAgICAgICAgICAgIEdQVVRleHR1cmVVc2FnZS5DT1BZX0RTVCB8CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgICAgIH0pKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlVmlldyA9IHRoaXMuYmdUZXh0dXJlLmNyZWF0ZVZpZXcoKSkpLAogICAgICAgICAgbC5xdWV1ZS5jb3B5RXh0ZXJuYWxJbWFnZVRvVGV4dHVyZSgKICAgICAgICAgICAgeyBzb3VyY2U6IGQsIGZsaXBZOiAhMCB9LAogICAgICAgICAgICB7IHRleHR1cmU6IHRoaXMuYmdUZXh0dXJlIH0sCiAgICAgICAgICAgIFthLCB1XSwKICAgICAgICAgICkpOwogICAgICAgIGxldCBmID0gbC5jcmVhdGVDb21tYW5kRW5jb2RlcigpOwogICAgICAgIHRoaXMuX2JsaXRQYXNzKGYsIHRoaXMuYmdUZXh0dXJlVmlldywgby5iZy52aWV3LCBhLCB1LCAxLCAxLCAwLCAwKTsKICAgICAgICBsZXQgaCA9IG8uYmx1ckEudywKICAgICAgICAgIGIgPSBvLmJsdXJBLmg7CiAgICAgICAgaWYgKCh0aGlzLl9ibGl0UGFzcyhmLCBvLmJnLnZpZXcsIG8uYmx1ckEudmlldywgaCwgYiwgMSwgMSwgMCwgMCksIHMgPiAwKSkgewogICAgICAgICAgbGV0IGcgPSBzICogMi41OwogICAgICAgICAgZm9yIChsZXQgcCA9IDA7IHAgPCBMOyBwKyspCiAgICAgICAgICAgICh0aGlzLl9ibHVyUGFzcyhmLCBvLmJsdXJBLnZpZXcsIG8uYmx1ckIudmlldywgaCwgYiwgZyAvIGgsIDApLAogICAgICAgICAgICAgIHRoaXMuX2JsdXJQYXNzKGYsIG8uYmx1ckIudmlldywgby5ibHVyQS52aWV3LCBoLCBiLCAwLCBnIC8gYikpOwogICAgICAgIH0KICAgICAgICBsLnF1ZXVlLnN1Ym1pdChbZi5maW5pc2goKV0pOwogICAgICB9CiAgICAgIF9ibGl0UGFzcyhlLCB0LCByLCBuLCBpLCBzLCBsLCBhLCB1KSB7CiAgICAgICAgbGV0IG8gPSB0aGlzLmRldmljZTsKICAgICAgICBvLnF1ZXVlLndyaXRlQnVmZmVyKHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIsIDAsIG5ldyBGbG9hdDMyQXJyYXkoW3MsIGwsIGEsIHVdKSk7CiAgICAgICAgbGV0IGQgPSBvLmNyZWF0ZUJpbmRHcm91cCh7CiAgICAgICAgICAgIGxheW91dDogdGhpcy5ibGl0UGlwZWxpbmUuZ2V0QmluZEdyb3VwTGF5b3V0KDApLAogICAgICAgICAgICBlbnRyaWVzOiBbCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAwLCByZXNvdXJjZTogeyBidWZmZXI6IHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IHQgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pLAogICAgICAgICAgYyA9IGUuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHIsCiAgICAgICAgICAgICAgICBsb2FkT3A6ICJjbGVhciIsCiAgICAgICAgICAgICAgICBzdG9yZU9wOiAic3RvcmUiLAogICAgICAgICAgICAgICAgY2xlYXJWYWx1ZTogeyByOiAwLCBnOiAwLCBiOiAwLCBhOiAwIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIChjLnNldFBpcGVsaW5lKHRoaXMuYmxpdFBpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIGQpLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5xdWFkQnVmZmVyKSwKICAgICAgICAgIGMuc2V0Vmlld3BvcnQoMCwgMCwgbiwgaSwgMCwgMSksCiAgICAgICAgICBjLmRyYXcoNCksCiAgICAgICAgICBjLmVuZCgpKTsKICAgICAgfQogICAgICBfYmx1clBhc3MoZSwgdCwgciwgbiwgaSwgcywgbCkgewogICAgICAgIGxldCBhID0gdGhpcy5kZXZpY2U7CiAgICAgICAgYS5xdWV1ZS53cml0ZUJ1ZmZlcih0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLCAwLCBuZXcgRmxvYXQzMkFycmF5KFtzLCBsLCAwLCAwXSkpOwogICAgICAgIGxldCB1ID0gYS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuYmx1clBpcGVsaW5lLmdldEJpbmRHcm91cExheW91dCgwKSwKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsgYmluZGluZzogMCwgcmVzb3VyY2U6IHsgYnVmZmVyOiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyIH0gfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDEsIHJlc291cmNlOiB0aGlzLnNhbXBsZXIgfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDIsIHJlc291cmNlOiB0IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KSwKICAgICAgICAgIG8gPSBlLmJlZ2luUmVuZGVyUGFzcyh7CiAgICAgICAgICAgIGNvbG9yQXR0YWNobWVudHM6IFsKICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICB2aWV3OiByLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAoby5zZXRQaXBlbGluZSh0aGlzLmJsdXJQaXBlbGluZSksCiAgICAgICAgICBvLnNldEJpbmRHcm91cCgwLCB1KSwKICAgICAgICAgIG8uc2V0VmVydGV4QnVmZmVyKDAsIHRoaXMucXVhZEJ1ZmZlciksCiAgICAgICAgICBvLnNldFZpZXdwb3J0KDAsIDAsIG4sIGksIDAsIDEpLAogICAgICAgICAgby5kcmF3KDQpLAogICAgICAgICAgby5lbmQoKSk7CiAgICAgIH0KICAgICAgcmVuZGVyR2xhc3NQYW5lbChlLCB0LCByLCBuKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuY29udGV4dCkgcmV0dXJuOwogICAgICAgIGxldCBpID0gdGhpcy5kZXZpY2UsCiAgICAgICAgICBzID0gdGhpcy53aWR0aCwKICAgICAgICAgIGwgPSB0aGlzLmhlaWdodCwKICAgICAgICAgIGEgPSB0aGlzLmFjdGl2ZVRhcmdldHMsCiAgICAgICAgICB1ID0gbmV3IEZsb2F0MzJBcnJheShbCiAgICAgICAgICAgIHMgKiAwLjUsCiAgICAgICAgICAgIGwgKiAwLjUsCiAgICAgICAgICAgIHQgKiBuLAogICAgICAgICAgICByICogbiwKICAgICAgICAgICAgcywKICAgICAgICAgICAgbCwKICAgICAgICAgICAgZS5jb3JuZXJSYWRpdXMgKiBuLAogICAgICAgICAgICBUICogbiwKICAgICAgICAgICAgZS5yZWZyYWN0aW9uLAogICAgICAgICAgICBlLmNocm9tQWJlcnJhdGlvbiwKICAgICAgICAgICAgZS5lZGdlSGlnaGxpZ2h0LAogICAgICAgICAgICBlLnNwZWN1bGFyLAogICAgICAgICAgICBlLmZyZXNuZWwsCiAgICAgICAgICAgIGUuZGlzdG9ydGlvbiwKICAgICAgICAgICAgZS5vcGFjaXR5LAogICAgICAgICAgICBlLnNhdHVyYXRpb24sCiAgICAgICAgICAgIGUudGludFN0cmVuZ3RoLAogICAgICAgICAgICBlLnpSYWRpdXMgKiBuLAogICAgICAgICAgICBlLmJyaWdodG5lc3MsCiAgICAgICAgICAgIGUuc2hhZG93T3BhY2l0eSwKICAgICAgICAgICAgZS5zaGFkb3dTcHJlYWQgKiBuLAogICAgICAgICAgICBlLnNoYWRvd09mZnNldFkgKiBuLAogICAgICAgICAgICBlLmJldmVsTW9kZSwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgIF0pOwogICAgICAgIGkucXVldWUud3JpdGVCdWZmZXIodGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIsIDAsIHUpOwogICAgICAgIGxldCBvID0gaS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuZ2xhc3NQaXBlbGluZS5nZXRCaW5kR3JvdXBMYXlvdXQoMCksCiAgICAgICAgICAgIGVudHJpZXM6IFsKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDAsIHJlc291cmNlOiB7IGJ1ZmZlcjogdGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IGEuYmcudmlldyB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMywgcmVzb3VyY2U6IGEuYmx1ckEudmlldyB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSksCiAgICAgICAgICBkID0gaS5jcmVhdGVDb21tYW5kRW5jb2RlcigpLAogICAgICAgICAgYyA9IGQuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHRoaXMuY29udGV4dC5nZXRDdXJyZW50VGV4dHVyZSgpLmNyZWF0ZVZpZXcoKSwKICAgICAgICAgICAgICAgIGxvYWRPcDogImxvYWQiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSk7CiAgICAgICAgKGMuc2V0UGlwZWxpbmUodGhpcy5nbGFzc1BpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIG8pLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5wYW5lbEJ1ZmZlciksCiAgICAgICAgICBjLnNldFZpZXdwb3J0KDAsIDAsIHMsIGwsIDAsIDEpLAogICAgICAgICAgYy5kcmF3KDQpLAogICAgICAgICAgYy5lbmQoKSwKICAgICAgICAgIGkucXVldWUuc3VibWl0KFtkLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGNsZWFyKCkgewogICAgICAgIGlmICghdGhpcy5faW5pdGlhbGl6ZWQgfHwgIXRoaXMuZGV2aWNlIHx8ICF0aGlzLmNvbnRleHQpIHJldHVybjsKICAgICAgICBsZXQgZSA9IHRoaXMuZGV2aWNlLmNyZWF0ZUNvbW1hbmRFbmNvZGVyKCksCiAgICAgICAgICB0ID0gZS5iZWdpblJlbmRlclBhc3MoewogICAgICAgICAgICBjb2xvckF0dGFjaG1lbnRzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgdmlldzogdGhpcy5jb250ZXh0LmdldEN1cnJlbnRUZXh0dXJlKCkuY3JlYXRlVmlldygpLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAodC5zZXRWaWV3cG9ydCgwLCAwLCB0aGlzLndpZHRoLCB0aGlzLmhlaWdodCwgMCwgMSksCiAgICAgICAgICB0LmVuZCgpLAogICAgICAgICAgdGhpcy5kZXZpY2UucXVldWUuc3VibWl0KFtlLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGRlc3Ryb3koKSB7CiAgICAgICAgZm9yIChsZXQgZSBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KGUpOwogICAgICAgICh0aGlzLnRhcmdldENhY2hlLmNsZWFyKCksCiAgICAgICAgICB0aGlzLmJnVGV4dHVyZSAmJiB0aGlzLmJnVGV4dHVyZS5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLnF1YWRCdWZmZXIgJiYgdGhpcy5xdWFkQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIgJiYgdGhpcy5wYW5lbEJ1ZmZlci5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmJsaXRVbmlmb3JtQnVmZmVyICYmIHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIuZGVzdHJveSgpLAogICAgICAgICAgdGhpcy5ibHVyVW5pZm9ybUJ1ZmZlciAmJiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyICYmIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZGV2aWNlPy5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmNhbnZhcy5yZW1vdmUoKSk7CiAgICAgIH0KICAgICAgX3NldEFjdGl2ZVNpemUoZSwgdCkgewogICAgICAgIGlmIChlIDw9IDAgfHwgdCA8PSAwKSByZXR1cm4gITE7CiAgICAgICAgKCh0aGlzLndpZHRoID0gZSksCiAgICAgICAgICAodGhpcy5oZWlnaHQgPSB0KSwKICAgICAgICAgICh0aGlzLmNhbnZhcy53aWR0aCA8IGUgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IDwgdCkgJiYKICAgICAgICAgICAgKCh0aGlzLmNhbnZhcy53aWR0aCA9IE1hdGgubWF4KHRoaXMuY2FudmFzLndpZHRoLCBlKSksCiAgICAgICAgICAgICh0aGlzLmNhbnZhcy5oZWlnaHQgPSBNYXRoLm1heCh0aGlzLmNhbnZhcy5oZWlnaHQsIHQpKSwKICAgICAgICAgICAgdGhpcy5jb250ZXh0Py5jb25maWd1cmUoewogICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgZm9ybWF0OiB0aGlzLmZvcm1hdCwKICAgICAgICAgICAgICBhbHBoYU1vZGU6ICJwcmVtdWx0aXBsaWVkIiwKICAgICAgICAgICAgfSkpKTsKICAgICAgICBsZXQgciA9IGAke2V9eCR7dH1gLAogICAgICAgICAgbiA9IHRoaXMudGFyZ2V0Q2FjaGUuZ2V0KHIpOwogICAgICAgIHJldHVybiAoCiAgICAgICAgICBuIHx8CiAgICAgICAgICAgICgobiA9IHsKICAgICAgICAgICAgICBiZzogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQTogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQjogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgfSksCiAgICAgICAgICAgIHRoaXMudGFyZ2V0Q2FjaGUuc2V0KHIsIG4pKSwKICAgICAgICAgICh0aGlzLmFjdGl2ZVRhcmdldHMgPSBuKSwKICAgICAgICAgICEwCiAgICAgICAgKTsKICAgICAgfQogICAgICBfbWFrZVRhcmdldChlLCB0KSB7CiAgICAgICAgbGV0IHIgPSB0aGlzLmRldmljZS5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgIHNpemU6IFtlLCB0XSwKICAgICAgICAgIGZvcm1hdDogInJnYmE4dW5vcm0iLAogICAgICAgICAgdXNhZ2U6IEdQVVRleHR1cmVVc2FnZS5URVhUVVJFX0JJTkRJTkcgfCBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgfSk7CiAgICAgICAgcmV0dXJuIHsgdGV4dHVyZTogciwgdmlldzogci5jcmVhdGVWaWV3KCksIHc6IGUsIGg6IHQgfTsKICAgICAgfQogICAgICBfZnJlZVRhcmdldChlKSB7CiAgICAgICAgZSAmJiBlLnRleHR1cmUuZGVzdHJveSgpOwogICAgICB9CiAgICAgIF9mcmVlVGFyZ2V0U2V0KGUpIHsKICAgICAgICAodGhpcy5fZnJlZVRhcmdldChlLmJnKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJBKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJCKSk7CiAgICAgIH0KICAgIH07CiAgdmFyIFIgPSBjbGFzcyB7CiAgICBjYW52YXM7CiAgICBjdHg7CiAgICByZW5kZXJlcjsKICAgIHNjZW5lQ2FudmFzOwogICAgc2NlbmVDdHg7CiAgICBkcmF3RWxlbWVudEltYWdlOwogICAgX2luaXRQcm9taXNlOwogICAgX2luaXRpYWxpemVkID0gITE7CiAgICBjb25zdHJ1Y3RvcihlKSB7CiAgICAgICgodGhpcy5jYW52YXMgPSBlKSwKICAgICAgICAodGhpcy5jdHggPSBlLmdldENvbnRleHQoIjJkIikpLAogICAgICAgICh0aGlzLnJlbmRlcmVyID0gbmV3IHkoKSksCiAgICAgICAgKHRoaXMuc2NlbmVDYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgKHRoaXMuc2NlbmVDdHggPSB0aGlzLnNjZW5lQ2FudmFzLmdldENvbnRleHQoIjJkIikpKTsKICAgICAgbGV0IHQgPSB0aGlzLmN0eDsKICAgICAgKCh0aGlzLmRyYXdFbGVtZW50SW1hZ2UgPSB0LmRyYXdFbGVtZW50SW1hZ2U/LmJpbmQodCkgPz8gdC5kcmF3RWxlbWVudD8uYmluZCh0KSA/PyBudWxsKSwKICAgICAgICAodGhpcy5faW5pdFByb21pc2UgPSB0aGlzLl9pbml0V2ViR1BVKCkpKTsKICAgIH0KICAgIGFzeW5jIF9pbml0V2ViR1BVKCkgewogICAgICB0cnkgewogICAgICAgIHJldHVybiAoYXdhaXQgdGhpcy5yZW5kZXJlci5pbml0KCkpCiAgICAgICAgICA/ICgodGhpcy5faW5pdGlhbGl6ZWQgPSAhMCksIGNvbnNvbGUubG9nKCJMaXF1aWRHbGFzczogV2ViR1BVIHJlbmRlcmVyIGluaXRpYWxpemVkIiksICEwKQogICAgICAgICAgOiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBub3QgYXZhaWxhYmxlIiksICExKTsKICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgIHJldHVybiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBpbml0IGZhaWxlZCIsIGUpLCAhMSk7CiAgICAgIH0KICAgIH0KICAgIGdldCBpc1JlYWR5KCkgewogICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICB9CiAgICBhc3luYyB3YWl0Rm9ySW5pdCgpIHsKICAgICAgcmV0dXJuIHRoaXMuX2luaXRQcm9taXNlOwogICAgfQogICAgcmVuZGVyKCkgewogICAgICBsZXQgZSA9IHRoaXMuY2FudmFzLndpZHRoLAogICAgICAgIHQgPSB0aGlzLmNhbnZhcy5oZWlnaHQ7CiAgICAgIGlmIChlID09PSAwIHx8IHQgPT09IDAgfHwgIXRoaXMuZHJhd0VsZW1lbnRJbWFnZSB8fCAhdGhpcy5faW5pdGlhbGl6ZWQpIHJldHVybjsKICAgICAgdGhpcy5jdHguY2xlYXJSZWN0KDAsIDAsIGUsIHQpOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSBBcnJheS5mcm9tKHRoaXMuY2FudmFzLmNoaWxkcmVuKSwKICAgICAgICBzID0gQXJyYXkuZnJvbSh0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIikpLAogICAgICAgIGwgPSBuZXcgU2V0KHMpOwogICAgICBpLmxlbmd0aCA9PT0gMCAmJgogICAgICAgICF0aGlzLl9fbGdfd2Fybl9lbXB0eSAmJgogICAgICAgIChjb25zb2xlLndhcm4oIkxpcXVpZEdsYXNzOiBObyBjaGlsZHJlbiBmb3VuZCBpbnNpZGUgdGhlIGNhbnZhcyB0byByZW5kZXIuIiksCiAgICAgICAgKHRoaXMuX19sZ193YXJuX2VtcHR5ID0gITApKTsKICAgICAgZm9yIChsZXQgYSBvZiBpKQogICAgICAgIGlmICghbC5oYXMoYSkpIHsKICAgICAgICAgIGxldCB1ID0gYSwKICAgICAgICAgICAgbyA9IHRoaXMuX2dldEVsZW1lbnRQb3NpdGlvbih1LCBuKTsKICAgICAgICAgIGlmIChvLncgPD0gMCB8fCBvLmggPD0gMCkgY29udGludWU7CiAgICAgICAgICBsZXQgZCA9IG8ueCAqIHIsCiAgICAgICAgICAgIGMgPSBvLnkgKiByOwogICAgICAgICAgdHJ5IHsKICAgICAgICAgICAgbGV0IGYgPSB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoYSwgZCwgYyk7CiAgICAgICAgICAgIGYgJiYgKHUuc3R5bGUudHJhbnNmb3JtID0gZi50b1N0cmluZygpKTsKICAgICAgICAgIH0gY2F0Y2ggKGYpIHsKICAgICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgICAgIChjb25zb2xlLndhcm4oCiAgICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byBkcmF3IGJhY2tncm91bmQgZWxlbWVudCAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICAgIGYubWVzc2FnZSB8fCBmLAogICAgICAgICAgICAgICksCiAgICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWQgPSAhMCkpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgZm9yIChsZXQgYSBvZiBzKQogICAgICAgIHRyeSB7CiAgICAgICAgICB0aGlzLl9yZW5kZXJHbGFzc0VsZW1lbnQoYSwgbiwgcik7CiAgICAgICAgfSBjYXRjaCAodSkgewogICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZF9nbGFzcyB8fAogICAgICAgICAgICAoY29uc29sZS5lcnJvcigKICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byByZW5kZXIgZ2xhc3MgZWZmZWN0IGZvciAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICB1Lm1lc3NhZ2UgfHwgdSwKICAgICAgICAgICAgKSwKICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWRfZ2xhc3MgPSAhMCkpOwogICAgICAgIH0KICAgIH0KICAgIHJlbmRlckdsYXNzRWxlbWVudHMoKSB7CiAgICAgIGxldCBlID0gdGhpcy5jYW52YXMud2lkdGgsCiAgICAgICAgdCA9IHRoaXMuY2FudmFzLmhlaWdodDsKICAgICAgaWYgKGUgPT09IDAgfHwgdCA9PT0gMCB8fCAhdGhpcy5kcmF3RWxlbWVudEltYWdlIHx8ICF0aGlzLl9pbml0aWFsaXplZCkgcmV0dXJuOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSB0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIik7CiAgICAgIGZvciAobGV0IHMgb2YgaSkgdGhpcy5fcmVuZGVyR2xhc3NFbGVtZW50KHMsIG4sIHIpOwogICAgfQogICAgX3BhcnNlQ1NTTGVuZ3RoKGUsIHQpIHsKICAgICAgcmV0dXJuICFlIHx8IGUgPT09ICJhdXRvIgogICAgICAgID8gTmFOCiAgICAgICAgOiAoKGUgPSBlLnRyaW0oKSksCiAgICAgICAgICBlLnN0YXJ0c1dpdGgoImNhbGMoIikKICAgICAgICAgICAgPyB0aGlzLl9wYXJzZUNhbGMoZSwgdCkKICAgICAgICAgICAgOiBlLmVuZHNXaXRoKCIlIikKICAgICAgICAgICAgICA/IChwYXJzZUZsb2F0KGUpIC8gMTAwKSAqIHQKICAgICAgICAgICAgICA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfcGFyc2VDYWxjKGUsIHQpIHsKICAgICAgbGV0IHIgPSBlLm1hdGNoKC9jYWxjXCgoLispXCkvKTsKICAgICAgaWYgKCFyKSByZXR1cm4gMDsKICAgICAgbGV0IG4gPSByWzFdLnRyaW0oKSwKICAgICAgICBpID0gbi5tYXRjaCgvKC4rKVxzKlwrXHMqKC4rKS8pLAogICAgICAgIHMgPSBuLm1hdGNoKC8oLispXHMqLVxzKiguKykvKTsKICAgICAgaWYgKHMpIHsKICAgICAgICBsZXQgbCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKHNbMV0udHJpbSgpLCB0KSwKICAgICAgICAgIGEgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChzWzJdLnRyaW0oKSwgdCk7CiAgICAgICAgcmV0dXJuIGwgLSBhOwogICAgICB9CiAgICAgIGlmIChpKSB7CiAgICAgICAgbGV0IGwgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChpWzFdLnRyaW0oKSwgdCksCiAgICAgICAgICBhID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoaVsyXS50cmltKCksIHQpOwogICAgICAgIHJldHVybiBsICsgYTsKICAgICAgfQogICAgICByZXR1cm4gdGhpcy5fcGFyc2VDU1NMZW5ndGgobiwgdCk7CiAgICB9CiAgICBfcGFyc2VUcmFuc2Zvcm0oZSwgdCwgcikgewogICAgICBsZXQgbiA9IDAsCiAgICAgICAgaSA9IDA7CiAgICAgIGlmICghZSB8fCBlID09PSAibm9uZSIpIHJldHVybiB7IHR4OiBuLCB0eTogaSB9OwogICAgICBsZXQgcyA9IGUubWF0Y2goL3RyYW5zbGF0ZVwoXHMqKFteLCldKykoPzpccyosXHMqKFteKV0rKSk/XHMqXCkvKTsKICAgICAgcyAmJgogICAgICAgICgobiA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1sxXSwgdCkpLAogICAgICAgIChpID0gc1syXSA/IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1syXSwgcikgOiAwKSk7CiAgICAgIGxldCBsID0gZS5tYXRjaCgvdHJhbnNsYXRlWFwoXHMqKFteKV0rKVxzKlwpLyk7CiAgICAgIGwgJiYgKG4gPSB0aGlzLl9wYXJzZVRyYW5zbGF0ZVZhbHVlKGxbMV0sIHQpKTsKICAgICAgbGV0IGEgPSBlLm1hdGNoKC90cmFuc2xhdGVZXChccyooW14pXSspXHMqXCkvKTsKICAgICAgYSAmJiAoaSA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoYVsxXSwgcikpOwogICAgICBsZXQgdSA9IGUubWF0Y2goL3RyYW5zbGF0ZTNkXChccyooW14sXSspXHMqLFxzKihbXixdKylccyosXHMqW14pXStccypcKS8pOwogICAgICByZXR1cm4gKAogICAgICAgIHUgJiYgKChuID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzFdLCB0KSksIChpID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzJdLCByKSkpLAogICAgICAgIHsgdHg6IG4sIHR5OiBpIH0KICAgICAgKTsKICAgIH0KICAgIF9wYXJzZVRyYW5zbGF0ZVZhbHVlKGUsIHQpIHsKICAgICAgcmV0dXJuICgoZSA9IGUudHJpbSgpKSwgZS5lbmRzV2l0aCgiJSIpID8gKHBhcnNlRmxvYXQoZSkgLyAxMDApICogdCA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfZ2V0RWxlbWVudFBvc2l0aW9uKGUsIHQpIHsKICAgICAgbGV0IHIgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIG4gPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLndpZHRoKSB8fCB0aGlzLmNhbnZhcy53aWR0aCB8fCAxNTM2LAogICAgICAgIGkgPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLmhlaWdodCkgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IHx8IDEwMjQsCiAgICAgICAgcyA9IGUuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCksCiAgICAgICAgbCA9IHMud2lkdGggfHwgcGFyc2VGbG9hdChyLndpZHRoKSB8fCAwLAogICAgICAgIGEgPSBzLmhlaWdodCB8fCBwYXJzZUZsb2F0KHIuaGVpZ2h0KSB8fCAwLAogICAgICAgIHUgPSAwLAogICAgICAgIG8gPSAwLAogICAgICAgIGQgPSBlLnN0eWxlLAogICAgICAgIGMgPSBkLmxlZnQgfHwgci5sZWZ0LAogICAgICAgIGYgPSBkLnJpZ2h0IHx8IHIucmlnaHQsCiAgICAgICAgaCA9IGQudG9wIHx8IHIudG9wLAogICAgICAgIGIgPSBkLmJvdHRvbSB8fCByLmJvdHRvbSwKICAgICAgICBnID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYywgbiksCiAgICAgICAgcCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKGYsIG4pLAogICAgICAgIHYgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChoLCBpKSwKICAgICAgICBTID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYiwgaSksCiAgICAgICAgUCA9IHBhcnNlRmxvYXQoci5tYXJnaW5MZWZ0KSB8fCAwLAogICAgICAgIHggPSBwYXJzZUZsb2F0KHIubWFyZ2luUmlnaHQpIHx8IDAsCiAgICAgICAgTSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Ub3ApIHx8IDAsCiAgICAgICAgQSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Cb3R0b20pIHx8IDAsCiAgICAgICAgRyA9ICFpc05hTihnKSwKICAgICAgICBVID0gIWlzTmFOKHApOwogICAgICBHICYmIFUgJiYgZyA9PT0gMCAmJiBwID09PSAwCiAgICAgICAgPyAodSA9IChuIC0gbCkgLyAyKQogICAgICAgIDogKEcgJiYgVSkgfHwgRwogICAgICAgICAgPyAodSA9IGcgKyBQKQogICAgICAgICAgOiBVICYmICh1ID0gbiAtIGwgLSBwIC0geCk7CiAgICAgIGxldCBCID0gIWlzTmFOKHYpLAogICAgICAgIEMgPSAhaXNOYU4oUyk7CiAgICAgIEIgJiYgQyAmJiB2ID09PSAwICYmIFMgPT09IDAKICAgICAgICA/IChvID0gKGkgLSBhKSAvIDIpCiAgICAgICAgOiAoQiAmJiBDKSB8fCBCCiAgICAgICAgICA/IChvID0gdiArIE0pCiAgICAgICAgICA6IEMgJiYgKG8gPSBpIC0gYSAtIFMgLSBBKTsKICAgICAgbGV0IHsgdHg6IFYsIHR5OiBGIH0gPSB0aGlzLl9wYXJzZVRyYW5zZm9ybShyLnRyYW5zZm9ybSwgbCwgYSk7CiAgICAgIHJldHVybiAoKHUgKz0gViksIChvICs9IEYpLCB7IHg6IHUsIHk6IG8sIHc6IGwsIGg6IGEgfSk7CiAgICB9CiAgICBfcmVuZGVyR2xhc3NFbGVtZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9nZXRDb25maWdGcm9tQ1NTKGUpLAogICAgICAgIGkgPSB0aGlzLl9nZXRFbGVtZW50UG9zaXRpb24oZSwgdCksCiAgICAgICAgcyA9IGkueCwKICAgICAgICBsID0gaS55LAogICAgICAgIGEgPSBpLncsCiAgICAgICAgdSA9IGkuaCwKICAgICAgICBvID0gcyAqIHIsCiAgICAgICAgZCA9IGwgKiByLAogICAgICAgIGMgPSBhICogciwKICAgICAgICBmID0gdSAqIHIsCiAgICAgICAgaCA9IFQgKiByLAogICAgICAgIGIgPSBvIC0gaCwKICAgICAgICBnID0gZCAtIGgsCiAgICAgICAgcCA9IGMgKyBoICogMiwKICAgICAgICB2ID0gZiArIGggKiAyOwogICAgICB0aGlzLl9jYXB0dXJlUmVnaW9uKGIsIGcsIHAsIHYpOwogICAgICBsZXQgUyA9IE1hdGgucm91bmQocCksCiAgICAgICAgUCA9IE1hdGgucm91bmQodik7CiAgICAgICh0aGlzLnJlbmRlcmVyLmNsZWFyKCksCiAgICAgICAgdGhpcy5yZW5kZXJlci51cGxvYWRBbmRCbHVyKHRoaXMuc2NlbmVDYW52YXMsIDAsIDAsIFMsIFAsIG4uYmx1ckFtb3VudCksCiAgICAgICAgdGhpcy5yZW5kZXJlci5yZW5kZXJHbGFzc1BhbmVsKG4sIGEsIHUsIHIpLAogICAgICAgIHRoaXMuY3R4LmRyYXdJbWFnZSh0aGlzLnJlbmRlcmVyLmNhbnZhcywgMCwgMCwgcCwgdiwgYiwgZywgcCwgdikpOwogICAgICB0cnkgewogICAgICAgIGxldCB4ID0gdGhpcy5fZHJhd0dsYXNzRWxlbWVudENvbnRlbnQoZSwgbywgZCk7CiAgICAgICAgeCAmJiAoZS5zdHlsZS50cmFuc2Zvcm0gPSB4LnRvU3RyaW5nKCkpOwogICAgICB9IGNhdGNoICh4KSB7CiAgICAgICAgZS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgKGNvbnNvbGUud2FybigKICAgICAgICAgICAgYExpcXVpZEdsYXNzOiBGYWlsZWQgdG8gZHJhdyBnbGFzcyBlbGVtZW50ICR7ZS50YWdOYW1lfS4ke2UuY2xhc3NOYW1lfTpgLAogICAgICAgICAgICB4LAogICAgICAgICAgKSwKICAgICAgICAgIChlLl9fbGdfZXJyb3JfbG9nZ2VkID0gITApKTsKICAgICAgfQogICAgfQogICAgX2RyYXdHbGFzc0VsZW1lbnRDb250ZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9zdXBwcmVzc0dsYXNzQ2hyb21lKGUpOwogICAgICB0cnkgewogICAgICAgIHJldHVybiB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoZSwgdCwgcik7CiAgICAgIH0gZmluYWxseSB7CiAgICAgICAgdGhpcy5fcmVzdG9yZUlubGluZVN0eWxlcyhlLCBuKTsKICAgICAgfQogICAgfQogICAgX3N1cHByZXNzR2xhc3NDaHJvbWUoZSkgewogICAgICBsZXQgdCA9IG5ldyBNYXAoKSwKICAgICAgICByID0gWwogICAgICAgICAgImJhY2tncm91bmQiLAogICAgICAgICAgImJhY2tncm91bmRDb2xvciIsCiAgICAgICAgICAiYmFja2dyb3VuZEltYWdlIiwKICAgICAgICAgICJib3JkZXJDb2xvciIsCiAgICAgICAgICAiYm94U2hhZG93IiwKICAgICAgICAgICJmaWx0ZXIiLAogICAgICAgICAgIm91dGxpbmVDb2xvciIsCiAgICAgICAgXTsKICAgICAgZm9yIChsZXQgbiBvZiByKSB0LnNldChuLCBlLnN0eWxlW25dKTsKICAgICAgcmV0dXJuICgKICAgICAgICAoZS5zdHlsZS5iYWNrZ3JvdW5kID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZEltYWdlID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5ib3JkZXJDb2xvciA9ICJ0cmFuc3BhcmVudCIpLAogICAgICAgIChlLnN0eWxlLmJveFNoYWRvdyA9ICJub25lIiksCiAgICAgICAgKGUuc3R5bGUuZmlsdGVyID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5vdXRsaW5lQ29sb3IgPSAidHJhbnNwYXJlbnQiKSwKICAgICAgICB0CiAgICAgICk7CiAgICB9CiAgICBfcmVzdG9yZUlubGluZVN0eWxlcyhlLCB0KSB7CiAgICAgIGZvciAobGV0IFtyLCBuXSBvZiB0KSBlLnN0eWxlW3JdID0gbjsKICAgIH0KICAgIF9jYXB0dXJlUmVnaW9uKGUsIHQsIHIsIG4pIHsKICAgICAgbGV0IGkgPSBNYXRoLnJvdW5kKHIpLAogICAgICAgIHMgPSBNYXRoLnJvdW5kKG4pOwogICAgICAoKHRoaXMuc2NlbmVDYW52YXMud2lkdGggIT09IGkgfHwgdGhpcy5zY2VuZUNhbnZhcy5oZWlnaHQgIT09IHMpICYmCiAgICAgICAgKCh0aGlzLnNjZW5lQ2FudmFzLndpZHRoID0gaSksICh0aGlzLnNjZW5lQ2FudmFzLmhlaWdodCA9IHMpKSwKICAgICAgICAodGhpcy5zY2VuZUN0eC5maWxsU3R5bGUgPSAiI2ZmZmZmZiIpLAogICAgICAgIHRoaXMuc2NlbmVDdHguZmlsbFJlY3QoMCwgMCwgaSwgcyksCiAgICAgICAgdGhpcy5zY2VuZUN0eC5kcmF3SW1hZ2UodGhpcy5jYW52YXMsIGUsIHQsIHIsIG4sIDAsIDAsIGksIHMpKTsKICAgIH0KICAgIF9nZXRDb25maWdGcm9tQ1NTKGUpIHsKICAgICAgbGV0IHQgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIHIgPSB7IC4uLncgfTsKICAgICAgZm9yIChsZXQgW24sIGldIG9mIE9iamVjdC5lbnRyaWVzKF8pKSB7CiAgICAgICAgbGV0IHMgPSB0LmdldFByb3BlcnR5VmFsdWUobikudHJpbSgpOwogICAgICAgIGlmIChzKSB7CiAgICAgICAgICBsZXQgbCA9IHBhcnNlRmxvYXQocyk7CiAgICAgICAgICBpc05hTihsKSB8fCAocltpXSA9IGwpOwogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gcjsKICAgIH0KICAgIGRlc3Ryb3koKSB7CiAgICAgIHRoaXMucmVuZGVyZXIuZGVzdHJveSgpOwogICAgfQogIH07CiAgcmV0dXJuIEkoWSk7Cn0pKCk7Cg==\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #0a0218;\n        overflow: hidden;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #three-canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        z-index: 0;\n      }\n      #glass-canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        z-index: 1;\n      }\n\n      /* ── Glass Panels ── */\n      .glass-panel {\n        position: absolute;\n        background: rgba(255, 255, 255, 0.055);\n        --lg-blur: 0.42;\n        --lg-refraction: 0.92;\n        --lg-corner-radius: 36;\n        --lg-z-radius: 58;\n        --lg-specular: 0.46;\n        --lg-fresnel: 1.15;\n        --lg-edge-highlight: 0.34;\n        --lg-chrom-aberration: 0.08;\n        --lg-shadow-opacity: 0;\n        --lg-shadow-spread: 0;\n        --lg-shadow-offset-y: 0;\n        --lg-saturation: 1.1;\n      }\n      .search-panel {\n        width: 640px;\n        height: 72px;\n        --lg-corner-radius: 24;\n      }\n      .toggle-panel {\n        width: 640px;\n        height: 64px;\n        --lg-corner-radius: 44;\n      }\n      .media-panel {\n        width: 640px;\n        height: 116px;\n        --lg-corner-radius: 44;\n      }\n      .slider-panel {\n        width: 640px;\n        height: 76px;\n        --lg-corner-radius: 28;\n      }\n\n      #glass-search {\n        top: 300px;\n        left: 640px;\n      }\n      #glass-toggle {\n        top: 390px;\n        left: 640px;\n      }\n      #glass-media {\n        top: 476px;\n        left: 640px;\n      }\n      #glass-slider {\n        top: 616px;\n        left: 640px;\n      }\n\n      /* ── Text Overlays ── */\n      .text-overlay {\n        position: absolute;\n        z-index: 2;\n        pointer-events: none;\n      }\n\n      /* Search bar */\n      .search-text {\n        width: 640px;\n        height: 72px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        padding: 0 28px;\n        background: transparent;\n        border-radius: 24px;\n        box-shadow: none;\n      }\n      .search-text svg {\n        width: 22px;\n        height: 22px;\n        stroke: rgba(255, 255, 255, 0.86);\n        fill: none;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        flex-shrink: 0;\n      }\n      .search-label {\n        font-size: 19px;\n        font-weight: 650;\n        color: #fff;\n        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);\n      }\n      .search-caret {\n        width: 2px;\n        height: 25px;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.82);\n        opacity: 0;\n      }\n      #text-search {\n        top: 300px;\n        left: 640px;\n      }\n\n      /* Toggle row */\n      .toggle-text {\n        width: 640px;\n        height: 64px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0;\n        position: relative;\n        padding: 6px;\n        background: transparent;\n        border-radius: 44px;\n        box-shadow: none;\n      }\n      .toggle-active-pill {\n        position: absolute;\n        top: 6px;\n        left: 6px;\n        z-index: 0;\n        width: 209px;\n        height: 52px;\n        border-radius: 999px;\n        background:\n          radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.32), transparent 42%),\n          rgba(255, 255, 255, 0.14);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.32),\n          inset 0 -1px 0 rgba(255, 255, 255, 0.09);\n      }\n      .toggle-item {\n        flex: 1;\n        position: relative;\n        z-index: 1;\n        text-align: center;\n        font-size: 16px;\n        font-weight: 700;\n        color: rgba(255, 255, 255, 0.96);\n        line-height: 52px;\n        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);\n      }\n      .toggle-item.active {\n        color: #fff;\n      }\n      #text-toggle {\n        top: 390px;\n        left: 640px;\n      }\n\n      /* Media pill */\n      .media-text {\n        width: 640px;\n        height: 116px;\n        display: flex;\n        align-items: center;\n        gap: 22px;\n        padding: 0 24px;\n        background: transparent;\n        border-radius: 44px;\n        box-shadow: none;\n      }\n      .album-art {\n        position: relative;\n        overflow: hidden;\n        width: 78px;\n        height: 78px;\n        border-radius: 20px;\n        background:\n          radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.78), transparent 16%),\n          conic-gradient(from 210deg, #06e3fa, #4fdb5e, #f59e0b, #ec4899, #06e3fa);\n        flex-shrink: 0;\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.28),\n          0 12px 26px rgba(0, 0, 0, 0.24);\n      }\n      .album-sheen {\n        position: absolute;\n        top: -10px;\n        left: -70px;\n        width: 38px;\n        height: 110px;\n        background: rgba(255, 255, 255, 0.34);\n        filter: blur(8px);\n        transform: rotate(24deg);\n      }\n      .media-info {\n        display: flex;\n        flex-direction: column;\n        gap: 7px;\n        flex: 1;\n        min-width: 0;\n      }\n      .media-title {\n        font-size: 22px;\n        font-weight: 700;\n        color: #fff;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);\n      }\n      .media-artist {\n        font-size: 16px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.84);\n        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);\n      }\n      .media-meta-row {\n        display: flex;\n        align-items: center;\n        gap: 9px;\n      }\n      .live-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: #4ade80;\n        box-shadow: 0 0 14px rgba(74, 222, 128, 0.76);\n      }\n      .sound-wave {\n        display: flex;\n        align-items: end;\n        gap: 3px;\n        height: 16px;\n      }\n      .sound-wave span {\n        width: 3px;\n        height: 7px;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.74);\n      }\n      .transport {\n        display: flex;\n        align-items: center;\n        gap: 24px;\n        margin-left: auto;\n        padding-right: 4px;\n      }\n      .transport svg {\n        width: 28px;\n        height: 28px;\n        fill: #fff;\n        stroke: none;\n      }\n      .transport .play-btn svg {\n        width: 38px;\n        height: 38px;\n      }\n      #text-media {\n        top: 476px;\n        left: 640px;\n      }\n\n      /* Brightness slider */\n      .slider-text {\n        width: 640px;\n        height: 76px;\n        display: flex;\n        align-items: center;\n        gap: 18px;\n        padding: 0 28px;\n        background: transparent;\n        border-radius: 28px;\n        box-shadow: none;\n      }\n      .slider-text svg {\n        width: 26px;\n        height: 26px;\n        stroke: rgba(255, 255, 255, 0.88);\n        fill: none;\n        stroke-width: 2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        flex-shrink: 0;\n      }\n      .slider-track {\n        flex: 1;\n        height: 8px;\n        background: rgba(255, 255, 255, 0.24);\n        border-radius: 4px;\n        position: relative;\n      }\n      .slider-fill {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 34%;\n        height: 100%;\n        background: #fff;\n        border-radius: 3px;\n        box-shadow: 0 0 14px rgba(255, 255, 255, 0.5);\n      }\n      .slider-pct {\n        font-size: 17px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.9);\n        font-variant-numeric: tabular-nums;\n        width: 42px;\n        text-align: right;\n        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);\n      }\n      #text-slider {\n        top: 616px;\n        left: 640px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"liquid-glass-media-controls\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-root=\"true\"\n    >\n      <canvas id=\"three-canvas\" width=\"1920\" height=\"1080\"></canvas>\n\n      <canvas id=\"glass-canvas\" layoutsubtree width=\"1920\" height=\"1080\">\n        <div id=\"glass-search\" class=\"glass-panel search-panel liquid-glass\"></div>\n        <div id=\"glass-toggle\" class=\"glass-panel toggle-panel liquid-glass\"></div>\n        <div id=\"glass-media\" class=\"glass-panel media-panel liquid-glass\"></div>\n        <div id=\"glass-slider\" class=\"glass-panel slider-panel liquid-glass\"></div>\n      </canvas>\n\n      <!-- Search bar -->\n      <div id=\"text-search\" class=\"text-overlay search-text\">\n        <svg viewBox=\"0 0 24 24\">\n          <circle cx=\"11\" cy=\"11\" r=\"8\" />\n          <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\" />\n        </svg>\n        <span id=\"search-label\" class=\"search-label\">Search</span>\n        <span id=\"search-caret\" class=\"search-caret\"></span>\n      </div>\n\n      <!-- Toggle row -->\n      <div id=\"text-toggle\" class=\"text-overlay toggle-text\">\n        <div id=\"toggle-pill\" class=\"toggle-active-pill\"></div>\n        <div class=\"toggle-item active\">All</div>\n        <div class=\"toggle-item\">Favorites</div>\n        <div class=\"toggle-item\">Recent</div>\n      </div>\n\n      <!-- Media pill -->\n      <div id=\"text-media\" class=\"text-overlay media-text\">\n        <div class=\"album-art\"><span id=\"album-sheen\" class=\"album-sheen\"></span></div>\n        <div class=\"media-info\">\n          <div class=\"media-title\">Midnight Drive</div>\n          <div class=\"media-meta-row\">\n            <span id=\"live-dot\" class=\"live-dot\"></span>\n            <div class=\"media-artist\">Glass Resonance</div>\n            <div id=\"sound-wave\" class=\"sound-wave\">\n              <span></span><span></span><span></span><span></span>\n            </div>\n          </div>\n        </div>\n        <div class=\"transport\">\n          <span>\n            <svg viewBox=\"0 0 24 24\">\n              <polygon points=\"19 20 9 12 19 4\" />\n              <line x1=\"5\" y1=\"4\" x2=\"5\" y2=\"20\" stroke=\"#fff\" stroke-width=\"2\" />\n            </svg>\n          </span>\n          <span class=\"play-btn\">\n            <svg viewBox=\"0 0 24 24\"><polygon points=\"5 3 19 12 5 21\" /></svg>\n          </span>\n          <span>\n            <svg viewBox=\"0 0 24 24\">\n              <polygon points=\"5 4 15 12 5 20\" />\n              <line x1=\"19\" y1=\"4\" x2=\"19\" y2=\"20\" stroke=\"#fff\" stroke-width=\"2\" />\n            </svg>\n          </span>\n        </div>\n      </div>\n\n      <!-- Brightness slider -->\n      <div id=\"text-slider\" class=\"text-overlay slider-text\">\n        <svg viewBox=\"0 0 24 24\">\n          <circle cx=\"12\" cy=\"12\" r=\"5\" />\n          <line x1=\"12\" y1=\"1\" x2=\"12\" y2=\"3\" />\n          <line x1=\"12\" y1=\"21\" x2=\"12\" y2=\"23\" />\n          <line x1=\"4.22\" y1=\"4.22\" x2=\"5.64\" y2=\"5.64\" />\n          <line x1=\"18.36\" y1=\"18.36\" x2=\"19.78\" y2=\"19.78\" />\n          <line x1=\"1\" y1=\"12\" x2=\"3\" y2=\"12\" />\n          <line x1=\"21\" y1=\"12\" x2=\"23\" y2=\"12\" />\n          <line x1=\"4.22\" y1=\"19.78\" x2=\"5.64\" y2=\"18.36\" />\n          <line x1=\"18.36\" y1=\"5.64\" x2=\"19.78\" y2=\"4.22\" />\n        </svg>\n        <div class=\"slider-track\"><div id=\"slider-fill\" class=\"slider-fill\"></div></div>\n        <span id=\"slider-pct\" class=\"slider-pct\">34%</span>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      var W = 1920,\n        H = 1080,\n        DURATION = 8;\n\n      /* ── Three.js Aurora Shader ─────────────────────────────────────── */\n      var vs = \"varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }\";\n      var fs = [\n        \"precision highp float;\",\n        \"varying vec2 vUv;\",\n        \"uniform float uTime;\",\n        \"vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n        \"vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n        \"vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}\",\n        \"vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}\",\n        \"float snoise(vec3 v){\",\n        \"  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);\",\n        \"  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);\",\n        \"  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;\",\n        \"  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);\",\n        \"  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;\",\n        \"  i=mod289(i);\",\n        \"  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));\",\n        \"  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;\",\n        \"  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);\",\n        \"  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);\",\n        \"  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);\",\n        \"  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;\",\n        \"  vec4 sh=-step(h,vec4(0.0));\",\n        \"  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;\",\n        \"  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);\",\n        \"  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));\",\n        \"  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;\",\n        \"  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;\",\n        \"  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));\",\n        \"}\",\n        \"void main(){\",\n        \"  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;\",\n        \"  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;\",\n        \"  vec2 wp=p+vec2(wx,wy);\",\n        \"  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));\",\n        \"  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));\",\n        \"  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);\",\n        \"  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);\",\n        \"  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);\",\n        \"  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;\",\n        \"  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;\",\n        \"  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;\",\n        \"  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);\",\n        \"  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);\",\n        \"  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);\",\n        \"  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);\",\n        \"  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);\",\n        \"  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);\",\n        \"  vec3 col=base;\",\n        \"  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));\",\n        \"  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));\",\n        \"  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));\",\n        \"  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;\",\n        \"  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;\",\n        \"  col*=1.0-pow(abs(ridge1),4.0)*0.15;\",\n        \"  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));\",\n        \"  col*=0.65+vig*0.5;\",\n        \"  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);\",\n        \"  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));\",\n        \"  gl_FragColor=vec4(col,1.0);\",\n        \"}\",\n      ].join(\"\\n\");\n\n      /* ── Three.js Setup ─────────────────────────────────────────────── */\n      var threeCanvas = document.getElementById(\"three-canvas\");\n      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n\n      var scene = new THREE.Scene();\n      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n      var uniforms = { uTime: { value: 0 } };\n      var shaderMat = new THREE.ShaderMaterial({\n        vertexShader: vs,\n        fragmentShader: fs,\n        uniforms: uniforms,\n      });\n      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);\n      scene.add(quad);\n\n      /* ── Glass Canvas ───────────────────────────────────────────────── */\n      var glassCanvas = document.getElementById(\"glass-canvas\");\n      var ctx = glassCanvas.getContext(\"2d\");\n      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);\n      var lgReady = false;\n\n      function renderGlass(time) {\n        if (!lgReady) return;\n        uniforms.uTime.value = time;\n        renderer.render(scene, camera);\n        ctx.clearRect(0, 0, W, H);\n        ctx.drawImage(threeCanvas, 0, 0, W, H);\n        lg.renderGlassElements();\n      }\n\n      function requestGlassRender(time) {\n        if (glassCanvas.requestPaint) {\n          glassCanvas.onpaint = function () {\n            renderGlass(time);\n          };\n          glassCanvas.requestPaint();\n          return;\n        }\n        renderGlass(time);\n      }\n\n      lg.waitForInit().then(function (ok) {\n        if (!ok) return;\n        lgReady = true;\n        requestGlassRender(0);\n      });\n\n      /* ── GSAP Timeline ──────────────────────────────────────────────── */\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var gs = document.getElementById(\"glass-search\");\n      var gt = document.getElementById(\"glass-toggle\");\n      var gm = document.getElementById(\"glass-media\");\n      var gsl = document.getElementById(\"glass-slider\");\n      var ts = document.getElementById(\"text-search\");\n      var tt = document.getElementById(\"text-toggle\");\n      var tm = document.getElementById(\"text-media\");\n      var tsl = document.getElementById(\"text-slider\");\n      var searchLabel = document.getElementById(\"search-label\");\n      var sliderPct = document.getElementById(\"slider-pct\");\n      var sliderValue = { value: 34 };\n\n      // Glass panels live inside <canvas layoutsubtree> (html-in-canvas): the canvas lib\n      // reads their sub-pixel computed top/left, so animating layout props on them does\n      // NOT stutter and is exempt from gsap_non_transform_motion. They keep top/left.\n      // Plain-DOM text overlays DO stutter on layout props, so they use transforms (x/y).\n      // CSS resting tops — search 300, toggle 390, media 476, slider 616 — are the\n      // transform base; the original set seeded top:1160, i.e. y = 1160 - restingTop.\n      gsap.set([gs, gt, gm, gsl], { top: 1160, opacity: 1 });\n      gsap.set(ts, { y: 860, opacity: 1 });\n      gsap.set(tt, { y: 770, opacity: 1 });\n      gsap.set(tm, { y: 684, opacity: 1 });\n      gsap.set(tsl, { y: 544, opacity: 1 });\n      gsap.set(\"#sound-wave span\", { height: 7 });\n\n      tl.to(gs, { top: 300, duration: 0.48, ease: \"power3.out\" }, 0.12);\n      tl.to(ts, { y: 0, duration: 0.48, ease: \"power3.out\" }, 0.12);\n      tl.to(gt, { top: 390, duration: 0.44, ease: \"power3.out\" }, 0.22);\n      tl.to(tt, { y: 0, duration: 0.44, ease: \"power3.out\" }, 0.22);\n      tl.to(gm, { top: 476, duration: 0.44, ease: \"power3.out\" }, 0.32);\n      tl.to(tm, { y: 0, duration: 0.44, ease: \"power3.out\" }, 0.32);\n      tl.to(gsl, { top: 616, duration: 0.46, ease: \"power3.out\" }, 0.42);\n      tl.to(tsl, { y: 0, duration: 0.46, ease: \"power3.out\" }, 0.42);\n\n      tl.call(\n        function () {\n          searchLabel.textContent = \"Search Music\";\n        },\n        null,\n        0.9,\n      );\n      tl.to(\n        \"#search-caret\",\n        { opacity: 1, duration: 0.1, yoyo: true, repeat: 5, ease: \"none\" },\n        0.94,\n      );\n      tl.call(\n        function () {\n          searchLabel.textContent = \"Midnight Drive\";\n        },\n        null,\n        1.55,\n      );\n      tl.to(\"#toggle-pill\", { x: 209, duration: 0.24, ease: \"power2.out\" }, 1.82);\n      tl.to(\n        \".play-btn\",\n        { scale: 0.86, duration: 0.12, ease: \"power2.out\", yoyo: true, repeat: 1 },\n        2.18,\n      );\n      tl.to(\"#album-sheen\", { x: 182, duration: 0.75, ease: \"power2.out\" }, 2.2);\n      tl.to(\n        \"#sound-wave span\",\n        { height: 15, duration: 0.22, ease: \"power2.inOut\", stagger: 0.05, yoyo: true, repeat: 12 },\n        2.2,\n      );\n      tl.to(\n        sliderValue,\n        {\n          value: 82,\n          duration: 4.4,\n          ease: \"none\",\n          onUpdate: function () {\n            sliderPct.textContent = Math.round(sliderValue.value) + \"%\";\n          },\n        },\n        1.2,\n      );\n      tl.to(\"#slider-fill\", { width: \"82%\", duration: 4.4, ease: \"none\" }, 1.2);\n      tl.to(\n        \"#live-dot\",\n        { scale: 1.45, duration: 0.24, ease: \"power2.out\", yoyo: true, repeat: 4 },\n        2.6,\n      );\n      tl.to(\"#toggle-pill\", { x: 419, duration: 0.24, ease: \"power2.out\" }, 4.15);\n\n      // Settle + exit. Split so glass panels keep relative top (exempt, html-in-canvas)\n      // and plain-DOM text overlays use the relative transform equivalent (y). Inline\n      // array literals so the linter can resolve each group's targets; a pre-declared\n      // array variable resolves to __unresolved__ and would lose the canvas exemption.\n      tl.to(\n        [gs, gt, gm, gsl],\n        { top: \"-=8\", duration: 0.22, ease: \"power2.out\", yoyo: true, repeat: 1 },\n        5.55,\n      );\n      tl.to(\n        [ts, tt, tm, tsl],\n        { y: \"-=8\", duration: 0.22, ease: \"power2.out\", yoyo: true, repeat: 1 },\n        5.55,\n      );\n      tl.to([gs, gt, gm, gsl], { top: \"+=760\", duration: 0.42, ease: \"power2.in\" }, 6.72);\n      tl.to([ts, tt, tm, tsl], { y: \"+=760\", duration: 0.42, ease: \"power2.in\" }, 6.72);\n\n      /* Duration driver */\n      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: \"none\" }, 0);\n\n      tl.eventCallback(\"onUpdate\", function () {\n        requestGlassRender(tl.time());\n      });\n\n      window.__timelines[\"liquid-glass-media-controls\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/liquid-glass-notification.json b/docs/public/catalog/blocks/liquid-glass-notification.json
new file mode 100644
index 0000000000..0072115b31
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-notification.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"></script>\n    <script src=\"data:text/javascript;base64,dmFyIExpcXVpZEdsYXNzID0gKCgpID0+IHsKICB2YXIgRSA9IE9iamVjdC5kZWZpbmVQcm9wZXJ0eTsKICB2YXIgRCA9IE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3I7CiAgdmFyIHogPSBPYmplY3QuZ2V0T3duUHJvcGVydHlOYW1lczsKICB2YXIgTiA9IE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHk7CiAgdmFyIE8gPSAobSwgZSkgPT4gewogICAgICBmb3IgKHZhciB0IGluIGUpIEUobSwgdCwgeyBnZXQ6IGVbdF0sIGVudW1lcmFibGU6ICEwIH0pOwogICAgfSwKICAgIEggPSAobSwgZSwgdCwgcikgPT4gewogICAgICBpZiAoKGUgJiYgdHlwZW9mIGUgPT0gIm9iamVjdCIpIHx8IHR5cGVvZiBlID09ICJmdW5jdGlvbiIpCiAgICAgICAgZm9yIChsZXQgbiBvZiB6KGUpKQogICAgICAgICAgIU4uY2FsbChtLCBuKSAmJgogICAgICAgICAgICBuICE9PSB0ICYmCiAgICAgICAgICAgIEUobSwgbiwgeyBnZXQ6ICgpID0+IGVbbl0sIGVudW1lcmFibGU6ICEociA9IEQoZSwgbikpIHx8IHIuZW51bWVyYWJsZSB9KTsKICAgICAgcmV0dXJuIG07CiAgICB9OwogIHZhciBJID0gKG0pID0+IEgoRSh7fSwgIl9fZXNNb2R1bGUiLCB7IHZhbHVlOiAhMCB9KSwgbSk7CiAgdmFyIFkgPSB7fTsKICBPKFksIHsKICAgIENTU19QUk9QRVJUWV9NQVA6ICgpID0+IF8sCiAgICBERUZBVUxUUzogKCkgPT4gdywKICAgIEdsYXNzUmVuZGVyZXJHUFU6ICgpID0+IHksCiAgICBMaXF1aWRHbGFzc0NhbnZhczogKCkgPT4gUiwKICB9KTsKICB2YXIgdyA9IHsKICAgICAgYmx1ckFtb3VudDogMCwKICAgICAgcmVmcmFjdGlvbjogMC42OSwKICAgICAgY2hyb21BYmVycmF0aW9uOiAwLjA1LAogICAgICBlZGdlSGlnaGxpZ2h0OiAwLjA1LAogICAgICBzcGVjdWxhcjogMCwKICAgICAgZnJlc25lbDogMSwKICAgICAgZGlzdG9ydGlvbjogMCwKICAgICAgY29ybmVyUmFkaXVzOiA2NSwKICAgICAgelJhZGl1czogNDAsCiAgICAgIG9wYWNpdHk6IDEsCiAgICAgIHNhdHVyYXRpb246IDAsCiAgICAgIHRpbnRTdHJlbmd0aDogMCwKICAgICAgYnJpZ2h0bmVzczogMCwKICAgICAgc2hhZG93T3BhY2l0eTogMC4zLAogICAgICBzaGFkb3dTcHJlYWQ6IDEwLAogICAgICBzaGFkb3dPZmZzZXRZOiAxLAogICAgICBiZXZlbE1vZGU6IDAsCiAgICB9LAogICAgXyA9IHsKICAgICAgIi0tbGctYmx1ciI6ICJibHVyQW1vdW50IiwKICAgICAgIi0tbGctcmVmcmFjdGlvbiI6ICJyZWZyYWN0aW9uIiwKICAgICAgIi0tbGctY2hyb20tYWJlcnJhdGlvbiI6ICJjaHJvbUFiZXJyYXRpb24iLAogICAgICAiLS1sZy1lZGdlLWhpZ2hsaWdodCI6ICJlZGdlSGlnaGxpZ2h0IiwKICAgICAgIi0tbGctc3BlY3VsYXIiOiAic3BlY3VsYXIiLAogICAgICAiLS1sZy1mcmVzbmVsIjogImZyZXNuZWwiLAogICAgICAiLS1sZy1kaXN0b3J0aW9uIjogImRpc3RvcnRpb24iLAogICAgICAiLS1sZy1jb3JuZXItcmFkaXVzIjogImNvcm5lclJhZGl1cyIsCiAgICAgICItLWxnLXotcmFkaXVzIjogInpSYWRpdXMiLAogICAgICAiLS1sZy1vcGFjaXR5IjogIm9wYWNpdHkiLAogICAgICAiLS1sZy1zYXR1cmF0aW9uIjogInNhdHVyYXRpb24iLAogICAgICAiLS1sZy10aW50IjogInRpbnRTdHJlbmd0aCIsCiAgICAgICItLWxnLWJyaWdodG5lc3MiOiAiYnJpZ2h0bmVzcyIsCiAgICAgICItLWxnLXNoYWRvdy1vcGFjaXR5IjogInNoYWRvd09wYWNpdHkiLAogICAgICAiLS1sZy1zaGFkb3ctc3ByZWFkIjogInNoYWRvd1NwcmVhZCIsCiAgICAgICItLWxnLXNoYWRvdy1vZmZzZXQteSI6ICJzaGFkb3dPZmZzZXRZIiwKICAgICAgIi0tbGctYmV2ZWwtbW9kZSI6ICJiZXZlbE1vZGUiLAogICAgfSwKICAgIEwgPSA2LAogICAgVCA9IDIwOwogIHZhciBxID0gYC8vIEJsaXQgc2hhZGVyIC0gY29weSB0ZXh0dXJlIHdpdGggVVYgdHJhbnNmb3JtCgpzdHJ1Y3QgQmxpdFVuaWZvcm1zIHsKICBzY2FsZTogdmVjMmYsCiAgb2Zmc2V0OiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBCbGl0VW5pZm9ybXM7CkBncm91cCgwKSBAYmluZGluZygxKSB2YXIgdGV4U2FtcGxlcjogc2FtcGxlcjsKQGdyb3VwKDApIEBiaW5kaW5nKDIpIHZhciB0ZXg6IHRleHR1cmVfMmQ8ZjMyPjsKCnN0cnVjdCBWZXJ0ZXhPdXRwdXQgewogIEBidWlsdGluKHBvc2l0aW9uKSBwb3NpdGlvbjogdmVjNGYsCiAgQGxvY2F0aW9uKDApIHV2OiB2ZWMyZiwKfQoKQHZlcnRleApmbiB2ZXJ0ZXhNYWluKEBsb2NhdGlvbigwKSBwb3M6IHZlYzJmKSAtPiBWZXJ0ZXhPdXRwdXQgewogIHZhciBvdXQ6IFZlcnRleE91dHB1dDsKICBvdXQudXYgPSBwb3MgKiAwLjUgKyAwLjU7CiAgb3V0LnBvc2l0aW9uID0gdmVjNGYocG9zLCAwLjAsIDEuMCk7CiAgcmV0dXJuIG91dDsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIHJldHVybiB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKiB1LnNjYWxlICsgdS5vZmZzZXQpOwp9CmAsCiAgICBrID0gYC8vIEJsdXIgc2hhZGVyIC0gOS10YXAgR2F1c3NpYW4gYmx1ciAoc2luZ2xlIGRpcmVjdGlvbikKCnN0cnVjdCBCbHVyVW5pZm9ybXMgewogIGRpcjogdmVjMmYsCiAgX3BhZDogdmVjMmYsCn0KCkBncm91cCgwKSBAYmluZGluZygwKSB2YXI8dW5pZm9ybT4gdTogQmx1clVuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgdGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSB1djogdmVjMmYsCn0KCkB2ZXJ0ZXgKZm4gdmVydGV4TWFpbihAbG9jYXRpb24oMCkgcG9zOiB2ZWMyZikgLT4gVmVydGV4T3V0cHV0IHsKICB2YXIgb3V0OiBWZXJ0ZXhPdXRwdXQ7CiAgb3V0LnV2ID0gcG9zICogMC41ICsgMC41OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKHBvcywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCkBmcmFnbWVudApmbiBmcmFnbWVudE1haW4oaW46IFZlcnRleE91dHB1dCkgLT4gQGxvY2F0aW9uKDApIHZlYzRmIHsKICB2YXIgcyA9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51dikgKiAwLjIyNzAyNzsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogMS4wKSAqIDAuMTk0NTk0OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiAxLjApICogMC4xOTQ1OTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKyB1LmRpciAqIDIuMCkgKiAwLjEyMTYyMjsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diAtIHUuZGlyICogMi4wKSAqIDAuMTIxNjIyOwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2ICsgdS5kaXIgKiAzLjApICogMC4wNTQwNTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgLSB1LmRpciAqIDMuMCkgKiAwLjA1NDA1NDsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogNC4wKSAqIDAuMDE2MjE2OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiA0LjApICogMC4wMTYyMTY7CiAgcmV0dXJuIHM7Cn0KYCwKICAgIFcgPSBgLy8gR2xhc3Mgc2hhZGVyIC0gdGhlIGNvcmUgbGlxdWlkIGdsYXNzIGVmZmVjdAoKc3RydWN0IEdsYXNzVW5pZm9ybXMgewogIGNlbnRlcjogdmVjMmYsCiAgc2l6ZTogdmVjMmYsCiAgcmVzOiB2ZWMyZiwKICByYWRpdXM6IGYzMiwKICBwYWQ6IGYzMiwKICByZWZyYWN0OiBmMzIsCiAgY2hyb21hOiBmMzIsCiAgZWRnZUhMOiBmMzIsCiAgc3BlYzogZjMyLAogIGZyZXNuZWw6IGYzMiwKICBkaXN0b3J0OiBmMzIsCiAgYWxwaGE6IGYzMiwKICBzYXQ6IGYzMiwKICB0aW50OiBmMzIsCiAgelJhZGl1czogZjMyLAogIGJyaWdodG5lc3M6IGYzMiwKICBzaGFkb3dBbHBoYTogZjMyLAogIHNoYWRvd1NwcmVhZDogZjMyLAogIHNoYWRvd09mZlk6IGYzMiwKICBiZXZlbE1vZGU6IGYzMiwKICBfcGFkOiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBHbGFzc1VuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgYmdUZXg6IHRleHR1cmVfMmQ8ZjMyPjsKQGdyb3VwKDApIEBiaW5kaW5nKDMpIHZhciBibHVyVGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSBsb2NhbFB4OiB2ZWMyZiwKICBAbG9jYXRpb24oMSkgc2NyZWVuVVY6IHZlYzJmLAp9CgpAdmVydGV4CmZuIHZlcnRleE1haW4oQGxvY2F0aW9uKDApIHBvczogdmVjMmYpIC0+IFZlcnRleE91dHB1dCB7CiAgdmFyIG91dDogVmVydGV4T3V0cHV0OwogIGxldCB0b3RhbCA9IHUuc2l6ZSArIHZlYzJmKHUucGFkICogMi4wKTsKICBvdXQubG9jYWxQeCA9IHBvcyAqIHRvdGFsOwogIGxldCBweCA9IHUuY2VudGVyICsgcG9zICogdG90YWw7CiAgb3V0LnNjcmVlblVWID0gdmVjMmYocHgueCAvIHUucmVzLngsIDEuMCAtIHB4LnkgLyB1LnJlcy55KTsKICB2YXIgbmRjID0gKHB4IC8gdS5yZXMpICogMi4wIC0gMS4wOwogIG5kYy55ID0gLW5kYy55OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKG5kYywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCi8vIFJvdW5kZWQtcmVjdCBzaWduZWQgZGlzdGFuY2UKZm4gcnJTREYocDogdmVjMmYsIGI6IHZlYzJmLCByOiBmMzIpIC0+IGYzMiB7CiAgbGV0IHEgPSBhYnMocCkgLSBiICsgdmVjMmYocik7CiAgcmV0dXJuIG1pbihtYXgocS54LCBxLnkpLCAwLjApICsgbGVuZ3RoKG1heChxLCB2ZWMyZigwLjApKSkgLSByOwp9CgovLyBCZXZlbCBoZWlnaHQgZmllbGQKZm4gYmV2ZWxIZWlnaHQoZDogZjMyLCB6UjogZjMyKSAtPiBmMzIgewogIGlmIChkIDw9IDAuMCkgeyByZXR1cm4gMC4wOyB9CiAgaWYgKGQgPj0gelIpIHsgcmV0dXJuIHpSOyB9CiAgcmV0dXJuIHNxcnQoZCAqICgyLjAgKiB6UiAtIGQpKTsKfQoKZm4gaGFzaChwOiB2ZWMyZikgLT4gZjMyIHsKICByZXR1cm4gZnJhY3Qoc2luKGRvdChwLCB2ZWMyZigxMjcuMSwgMzExLjcpKSkgKiA0Mzc1OC41NDUzKTsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIGxldCBoYWxmXyA9IHUuc2l6ZSAqIDAuNTsKICBsZXQgciA9IG1pbih1LnJhZGl1cywgbWluKGhhbGZfLngsIGhhbGZfLnkpKTsKICBsZXQgc2RmID0gcnJTREYoaW4ubG9jYWxQeCwgaGFsZl8sIHIpOwoKICAvLyBBbnRpLWFsaWFzZWQgbWFzawogIGxldCBtYXNrID0gMS4wIC0gc21vb3Roc3RlcCgtMS41LCAwLjUsIHNkZik7CgogIGxldCBtYXhEID0gbWluKGhhbGZfLngsIGhhbGZfLnkpOwogIGxldCBpbnNpZGUgPSAtc2RmOwogIGxldCBlZGdlID0gc21vb3Roc3RlcChtYXhEICogMC4zNSwgMC4wLCBpbnNpZGUpOwoKICAvLyBTdXJmYWNlIG5vcm1hbCB2aWEgYmV2ZWwgaGVpZ2h0IGZpZWxkCiAgbGV0IHpSID0gdS56UmFkaXVzOwogIGxldCBlID0gMi4wOwogIGxldCBkQyA9IGluc2lkZTsKICBsZXQgZFIgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZEwgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZFUgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgZEQgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgaEMgPSBiZXZlbEhlaWdodChkQywgelIpOwogIGxldCBoUiA9IGJldmVsSGVpZ2h0KGRSLCB6Uik7CiAgbGV0IGhMID0gYmV2ZWxIZWlnaHQoZEwsIHpSKTsKICBsZXQgaFUgPSBiZXZlbEhlaWdodChkVSwgelIpOwogIGxldCBoRCA9IGJldmVsSGVpZ2h0KGRELCB6Uik7CiAgbGV0IGhHcmFkID0gdmVjMmYoaFIgLSBoTCwgaFUgLSBoRCkgLyAoMi4wICogZSk7CiAgbGV0IE4gPSBub3JtYWxpemUodmVjM2YoLWhHcmFkLCAxLjApKTsKCiAgbGV0IGRlcHRoID0gc21vb3Roc3RlcCgwLjAsIHpSLCBpbnNpZGUpOwoKICAvLyBSZWZyYWN0aW9uIC0gY29tcHV0ZSBib3RoIG1vZGVzIGFuZCBzZWxlY3QKICBsZXQgcHhUb1VWID0gdmVjMmYoMS4wLCAtMS4wKSAvIHUucmVzOwogIGxldCBpb3IgPSAxLjU7CiAgbGV0IHJlZnJQb3cgPSAxLjAgLSAxLjAgLyBpb3I7CiAgbGV0IHRoaWNrbmVzcyA9IGhDICogMi4wOwogIGxldCB0aGlja05vcm0gPSB0aGlja25lc3MgLyBtYXgoelIgKiAyLjAsIDEuMCk7CgogIC8vIEJpY29udmV4IG1vZGUKICBsZXQgZXhpdFJlZnIgPSBoR3JhZCAqIHJlZnJQb3c7CiAgbGV0IGVudHJ5UmVmciA9IGhHcmFkICogcmVmclBvdzsKICBsZXQgdGhyb3VnaFJlZnIgPSBlbnRyeVJlZnIgKiB0aGlja05vcm0gKiAwLjU7CiAgdmFyIHJlZnJQeEJpY29udmV4ID0gKGV4aXRSZWZyICsgZW50cnlSZWZyICsgdGhyb3VnaFJlZnIpICogdS5yZWZyYWN0ICogMzAuMDsKICBsZXQgY2VudGVyRGlyID0gLWluLmxvY2FsUHggLyBtYXgoaGFsZl8sIHZlYzJmKDEuMCkpOwogIHJlZnJQeEJpY29udmV4ICs9IGNlbnRlckRpciAqIHUucmVmcmFjdCAqIDQuMCAqIGRlcHRoOwoKICAvLyBEb21lIG1vZGUKICBsZXQgcmVmclB4RG9tZSA9IC1pbi5sb2NhbFB4ICogdS5yZWZyYWN0ICogZGVwdGggKiAwLjM1OwoKICAvLyBTZWxlY3QgYmFzZWQgb24gYmV2ZWwgbW9kZQogIGxldCByZWZyUHggPSBzZWxlY3QocmVmclB4Qmljb252ZXgsIHJlZnJQeERvbWUsIHUuYmV2ZWxNb2RlID49IDAuNSk7CiAgbGV0IHJlZnIgPSByZWZyUHggKiBweFRvVVY7CgogIC8vIE1pY3JvLWRpc3RvcnRpb24gbm9pc2UKICBsZXQgbnMgPSBpbi5sb2NhbFB4ICogMC4wODsKICBsZXQgYWJzUHhUb1VWID0gdmVjMmYoMS4wKSAvIHUucmVzOwogIGxldCBtaWNybyA9ICh2ZWMyZihoYXNoKG5zKSwgaGFzaChucyArIHZlYzJmKDM3LjApKSkgLSAwLjUpICogdS5kaXN0b3J0ICogNC4wICogYWJzUHhUb1VWOwoKICAvLyBDaHJvbWF0aWMgYWJlcnJhdGlvbgogIGxldCBjYVMgPSB1LmNocm9tYSAqIDE4LjAgKiAoZWRnZSAqIDAuNyArIDAuMykgKiAyLjA7CiAgbGV0IGNhRCA9IE4ueHkgKiBjYVMgKiBweFRvVVY7CiAgbGV0IGJhc2UgPSBpbi5zY3JlZW5VViArIHJlZnIgKyBtaWNybzsKCiAgLy8gU2FtcGxlIHRleHR1cmVzIChtdXN0IGJlIGluIHVuaWZvcm0gY29udHJvbCBmbG93KQogIGxldCBzaGFycFIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlICsgY2FEKS5yOwogIGxldCBzaGFycEcgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBzaGFycEIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlIC0gY2FEKS5iOwogIGxldCBzaGFycCA9IHZlYzNmKHNoYXJwUiwgc2hhcnBHLCBzaGFycEIpOwoKICBsZXQgYmx1clIgPSB0ZXh0dXJlU2FtcGxlKGJsdXJUZXgsIHRleFNhbXBsZXIsIGJhc2UgKyBjYUQpLnI7CiAgbGV0IGJsdXJHID0gdGV4dHVyZVNhbXBsZShibHVyVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBibHVyQiA9IHRleHR1cmVTYW1wbGUoYmx1clRleCwgdGV4U2FtcGxlciwgYmFzZSAtIGNhRCkuYjsKICBsZXQgYmx1ciA9IHZlYzNmKGJsdXJSLCBibHVyRywgYmx1ckIpOwoKICAvLyBFZGdlLXdlaWdodGVkIGJsdXIgbWl4CiAgbGV0IGVkZ2VNaXggPSAxLjAgLSBlZGdlICogMC4xNTsKICB2YXIgY29sID0gbWl4KHNoYXJwLCBibHVyLCBlZGdlTWl4KTsKCiAgLy8gQnJpZ2h0bmVzcwogIGNvbCAqPSAxLjAgKyB1LmJyaWdodG5lc3M7CgogIC8vIFNhdHVyYXRpb24KICBsZXQgbHVtID0gZG90KGNvbCwgdmVjM2YoMC4yOTksIDAuNTg3LCAwLjExNCkpOwogIGNvbCA9IG1peCh2ZWMzZihsdW0pLCBjb2wsIDEuMCArIHUuc2F0KTsKCiAgLy8gQ29vbCBnbGFzcyB0aW50CiAgY29sID0gbWl4KGNvbCwgY29sICogdmVjM2YoMC45MiwgMC45NSwgMS4wNSksIHUudGludCk7CiAgY29sICo9IDEuMCArIDAuMDYgKiBkZXB0aDsKCiAgLy8gRnJlc25lbAogIGxldCBmcmVzID0gcG93KDEuMCAtIGFicyhOLnopLCA0LjApICogdS5mcmVzbmVsOwoKICAvLyBTcGVjdWxhciBoaWdobGlnaHRzIChtdWx0aS1saWdodCBCbGlubi1QaG9uZykKICBsZXQgViA9IHZlYzNmKDAuMCwgMC4wLCAxLjApOwogIGxldCBMMSA9IG5vcm1hbGl6ZSh2ZWMzZigwLjQsIDAuNywgMS4wKSk7CiAgbGV0IEgxID0gbm9ybWFsaXplKEwxICsgVik7CiAgbGV0IHNwMSA9IHBvdyhtYXgoZG90KE4sIEgxKSwgMC4wKSwgOTAuMCk7CiAgbGV0IEwyID0gbm9ybWFsaXplKHZlYzNmKC0wLjMsIC0wLjUsIDEuMCkpOwogIGxldCBIMiA9IG5vcm1hbGl6ZShMMiArIFYpOwogIGxldCBzcDIgPSBwb3cobWF4KGRvdChOLCBIMiksIDAuMCksIDUwLjApICogMC4zOwogIGxldCBMMyA9IG5vcm1hbGl6ZSh2ZWMzZigwLjEsIDAuMywgMS4wKSk7CiAgbGV0IHNwQiA9IHBvdyhtYXgoZG90KE4sIEwzKSwgMC4wKSwgNi4wKSAqIDAuMTsKICBsZXQgTDQgPSBub3JtYWxpemUodmVjM2YoMC4wLCAwLjksIDAuNCkpOwogIGxldCBINCA9IG5vcm1hbGl6ZShMNCArIFYpOwogIGxldCBzcDQgPSBwb3cobWF4KGRvdChOLCBINCksIDAuMCksIDEyMC4wKSAqIDAuNjsKICBsZXQgdG90YWxTcGVjID0gKHNwMSArIHNwMiArIHNwQiArIHNwNCkgKiB1LnNwZWM7CgogIC8vIElubmVyIGJvcmRlciAvIHN0cm9rZSBoaWdobGlnaHQKICBsZXQgYm9yZGVyV2lkdGggPSAxLjU7CiAgbGV0IGlubmVyU3Ryb2tlID0gc21vb3Roc3RlcCgtYm9yZGVyV2lkdGggLSAxLjAsIC1ib3JkZXJXaWR0aCwgc2RmKQogICAgICAgICAgICAgICAgICAqICgxLjAgLSBzbW9vdGhzdGVwKC0xLjAsIDAuMCwgc2RmKSk7CiAgbGV0IHRvcEJpYXMgPSAwLjUgKyAwLjUgKiAoLWluLmxvY2FsUHgueSAvIGhhbGZfLnkpOwogIGxldCBpbm5lclN0cm9rZUZpbmFsID0gaW5uZXJTdHJva2UgKiAoMC40ICsgMC42ICogdG9wQmlhcyk7CgogIC8vIEVkZ2UgaGlnaGxpZ2h0ICYgaW5uZXIgZ2xvdwogIGxldCByaW0gPSBlZGdlICogdS5lZGdlSEwgKiAwLjIyOwogIGxldCBpbm5lckdsb3cgPSBzbW9vdGhzdGVwKDUuMCwgMC4wLCAtc2RmKSAqIHUuZWRnZUhMICogMC4xNTsKCiAgLy8gRW52aXJvbm1lbnQtbGlrZSByZWZsZWN0aW9uIChmYWtlKQogIGxldCBlbnZSZWZsID0gKE4ueSAqIDAuNSArIDAuNSkgKiBmcmVzICogMC4wODsKCiAgLy8gQ29tcG9zaXRlIGdsYXNzIGVmZmVjdAogIHZhciBmaW4gPSBjb2w7CiAgZmluICs9IHZlYzNmKHRvdGFsU3BlYyk7CiAgZmluICs9IHZlYzNmKHJpbSArIGlubmVyR2xvdyk7CiAgZmluICs9IHZlYzNmKGlubmVyU3Ryb2tlRmluYWwgKiB1LmVkZ2VITCAqIDAuNTUpOwogIGZpbiArPSB2ZWMzZihlbnZSZWZsKTsKICBmaW4gPSBtaXgoZmluLCB2ZWMzZigxLjApLCBmcmVzICogMC4yKTsKCiAgLy8gU2hhZG93IGNhbGN1bGF0aW9uIChvdXRzaWRlIHBhbmVsKQogIGxldCBzZGZTaGFkb3cgPSByclNERihpbi5sb2NhbFB4IC0gdmVjMmYoMC4wLCB1LnNoYWRvd09mZlkpLCBoYWxmXywgcik7CiAgbGV0IHNoYWRvd0QgPSBtYXgoc2RmU2hhZG93IC0gMS4wLCAwLjApOwogIGxldCBzcHJlYWQgPSBtYXgodS5zaGFkb3dTcHJlYWQsIDEuMCk7CiAgbGV0IGZhbGxvZmYgPSAxLjAgLyAoc3ByZWFkICogc3ByZWFkKTsKICBsZXQgb3V0ZXJTaGFkb3cgPSBleHAoLXNoYWRvd0QgKiBzaGFkb3dEICogZmFsbG9mZikgKiAwLjY1OwogIGxldCBjb250YWN0U2hhZG93ID0gZXhwKC1zaGFkb3dEICogMC4wOCAvIG1heChzcHJlYWQgKiAwLjA0LCAwLjAxKSkgKiAwLjM1OwogIGxldCBzaGFkb3cgPSAob3V0ZXJTaGFkb3cgKyBjb250YWN0U2hhZG93KSAqIHUuc2hhZG93QWxwaGE7CgogIC8vIFNlbGVjdCBiZXR3ZWVuIHNoYWRvdyAob3V0c2lkZSkgYW5kIGdsYXNzIChpbnNpZGUpCiAgbGV0IGlzT3V0c2lkZSA9IHNkZiA+IDAuMDsKICBsZXQgZmluYWxDb2xvciA9IHNlbGVjdChmaW4sIHZlYzNmKDAuMCksIGlzT3V0c2lkZSk7CiAgbGV0IGZpbmFsQWxwaGEgPSBzZWxlY3QobWFzayAqIHUuYWxwaGEsIHNoYWRvdywgaXNPdXRzaWRlKTsKCiAgcmV0dXJuIHZlYzRmKGZpbmFsQ29sb3IsIGZpbmFsQWxwaGEpOwp9CmAsCiAgICB5ID0gY2xhc3MgewogICAgICBjYW52YXM7CiAgICAgIGRldmljZSA9IG51bGw7CiAgICAgIGNvbnRleHQgPSBudWxsOwogICAgICBmb3JtYXQgPSAiYmdyYTh1bm9ybSI7CiAgICAgIGJsaXRQaXBlbGluZSA9IG51bGw7CiAgICAgIGJsdXJQaXBlbGluZSA9IG51bGw7CiAgICAgIGdsYXNzUGlwZWxpbmUgPSBudWxsOwogICAgICBxdWFkQnVmZmVyID0gbnVsbDsKICAgICAgcGFuZWxCdWZmZXIgPSBudWxsOwogICAgICBibGl0VW5pZm9ybUJ1ZmZlciA9IG51bGw7CiAgICAgIGJsdXJVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgZ2xhc3NVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgc2FtcGxlciA9IG51bGw7CiAgICAgIHRhcmdldENhY2hlID0gbmV3IE1hcCgpOwogICAgICBhY3RpdmVUYXJnZXRzID0gbnVsbDsKICAgICAgYmdUZXh0dXJlID0gbnVsbDsKICAgICAgYmdUZXh0dXJlVmlldyA9IG51bGw7CiAgICAgIHdpZHRoID0gMDsKICAgICAgaGVpZ2h0ID0gMDsKICAgICAgX2luaXRQcm9taXNlID0gbnVsbDsKICAgICAgX2luaXRpYWxpemVkID0gITE7CiAgICAgIGNvbnN0cnVjdG9yKCkgewogICAgICAgICgodGhpcy5jYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgICAodGhpcy5jYW52YXMuc3R5bGUuZGlzcGxheSA9ICJub25lIiksCiAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMuY2FudmFzKSk7CiAgICAgIH0KICAgICAgYXN5bmMgaW5pdCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgID8gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgIDogKCh0aGlzLl9pbml0UHJvbWlzZSA9IHRoaXMuX2RvSW5pdCgpKSwgdGhpcy5faW5pdFByb21pc2UpOwogICAgICB9CiAgICAgIGFzeW5jIF9kb0luaXQoKSB7CiAgICAgICAgaWYgKCFuYXZpZ2F0b3IuZ3B1KSByZXR1cm4gKGNvbnNvbGUud2FybigiV2ViR1BVIG5vdCBzdXBwb3J0ZWQiKSwgITEpOwogICAgICAgIGxldCBlID0gYXdhaXQgbmF2aWdhdG9yLmdwdS5yZXF1ZXN0QWRhcHRlcigpOwogICAgICAgIHJldHVybiBlCiAgICAgICAgICA/ICgodGhpcy5kZXZpY2UgPSBhd2FpdCBlLnJlcXVlc3REZXZpY2UoKSksCiAgICAgICAgICAgIHRoaXMuZGV2aWNlCiAgICAgICAgICAgICAgPyAoKHRoaXMuY29udGV4dCA9IHRoaXMuY2FudmFzLmdldENvbnRleHQoIndlYmdwdSIpKSwKICAgICAgICAgICAgICAgIHRoaXMuY29udGV4dAogICAgICAgICAgICAgICAgICA/ICgodGhpcy5mb3JtYXQgPSBuYXZpZ2F0b3IuZ3B1LmdldFByZWZlcnJlZENhbnZhc0Zvcm1hdCgpKSwKICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbnRleHQuY29uZmlndXJlKHsKICAgICAgICAgICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgICAgICAgICBmb3JtYXQ6IHRoaXMuZm9ybWF0LAogICAgICAgICAgICAgICAgICAgICAgYWxwaGFNb2RlOiAicHJlbXVsdGlwbGllZCIsCiAgICAgICAgICAgICAgICAgICAgfSksCiAgICAgICAgICAgICAgICAgICAgdGhpcy5faW5pdFBpcGVsaW5lcygpLAogICAgICAgICAgICAgICAgICAgIHRoaXMuX2luaXRCdWZmZXJzKCksCiAgICAgICAgICAgICAgICAgICAgKHRoaXMuX2luaXRpYWxpemVkID0gITApLAogICAgICAgICAgICAgICAgICAgICEwKQogICAgICAgICAgICAgICAgICA6IChjb25zb2xlLndhcm4oIkZhaWxlZCB0byBnZXQgV2ViR1BVIGNvbnRleHQiKSwgITEpKQogICAgICAgICAgICAgIDogKGNvbnNvbGUud2FybigiRmFpbGVkIHRvIGdldCBXZWJHUFUgZGV2aWNlIiksICExKSkKICAgICAgICAgIDogKGNvbnNvbGUud2FybigiTm8gV2ViR1BVIGFkYXB0ZXIgZm91bmQiKSwgITEpOwogICAgICB9CiAgICAgIGdldCBpbml0aWFsaXplZCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICAgIH0KICAgICAgX2luaXRQaXBlbGluZXMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICB0aGlzLnNhbXBsZXIgPSBlLmNyZWF0ZVNhbXBsZXIoewogICAgICAgICAgbWFnRmlsdGVyOiAibGluZWFyIiwKICAgICAgICAgIG1pbkZpbHRlcjogImxpbmVhciIsCiAgICAgICAgICBhZGRyZXNzTW9kZVU6ICJjbGFtcC10by1lZGdlIiwKICAgICAgICAgIGFkZHJlc3NNb2RlVjogImNsYW1wLXRvLWVkZ2UiLAogICAgICAgIH0pOwogICAgICAgIGxldCB0ID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBxIH0pLAogICAgICAgICAgciA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsaXRQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW3JdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogdCwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiB0LCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBuID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBrIH0pLAogICAgICAgICAgaSA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsdXJQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2ldIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogbiwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiBuLCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBzID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBXIH0pLAogICAgICAgICAgbCA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAzLCB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwgdGV4dHVyZTogeyBzYW1wbGVUeXBlOiAiZmxvYXQiIH0gfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIHRoaXMuZ2xhc3NQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2xdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogcywKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsKICAgICAgICAgICAgbW9kdWxlOiBzLAogICAgICAgICAgICBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwKICAgICAgICAgICAgdGFyZ2V0czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGZvcm1hdDogdGhpcy5mb3JtYXQsCiAgICAgICAgICAgICAgICBibGVuZDogewogICAgICAgICAgICAgICAgICBjb2xvcjogewogICAgICAgICAgICAgICAgICAgIHNyY0ZhY3RvcjogInNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgb3BlcmF0aW9uOiAiYWRkIiwKICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgYWxwaGE6IHsgc3JjRmFjdG9yOiAib25lIiwgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsIG9wZXJhdGlvbjogImFkZCIgfSwKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0sCiAgICAgICAgICBwcmltaXRpdmU6IHsgdG9wb2xvZ3k6ICJ0cmlhbmdsZS1zdHJpcCIgfSwKICAgICAgICB9KTsKICAgICAgfQogICAgICBfaW5pdEJ1ZmZlcnMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICAoKHRoaXMucXVhZEJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlZFUlRFWCwKICAgICAgICAgIG1hcHBlZEF0Q3JlYXRpb246ICEwLAogICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5xdWFkQnVmZmVyLmdldE1hcHBlZFJhbmdlKCkpLnNldChbLTEsIC0xLCAxLCAtMSwgLTEsIDEsIDEsIDFdKSwKICAgICAgICAgIHRoaXMucXVhZEJ1ZmZlci51bm1hcCgpLAogICAgICAgICAgKHRoaXMucGFuZWxCdWZmZXIgPSBlLmNyZWF0ZUJ1ZmZlcih7CiAgICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVkVSVEVYLAogICAgICAgICAgICBtYXBwZWRBdENyZWF0aW9uOiAhMCwKICAgICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5wYW5lbEJ1ZmZlci5nZXRNYXBwZWRSYW5nZSgpKS5zZXQoWwogICAgICAgICAgICAtMC41LCAtMC41LCAwLjUsIC0wLjUsIC0wLjUsIDAuNSwgMC41LCAwLjUsCiAgICAgICAgICBdKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIudW5tYXAoKSwKICAgICAgICAgICh0aGlzLmJsaXRVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmJsdXJVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmdsYXNzVW5pZm9ybUJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgICAgc2l6ZTogMTEyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVU5JRk9STSB8IEdQVUJ1ZmZlclVzYWdlLkNPUFlfRFNULAogICAgICAgICAgfSkpKTsKICAgICAgfQogICAgICByZXNpemUoZSwgdCkgewogICAgICAgIGlmICghKHRoaXMud2lkdGggPT09IGUgJiYgdGhpcy5oZWlnaHQgPT09IHQpKSB7CiAgICAgICAgICAoKHRoaXMud2lkdGggPSBlKSwgKHRoaXMuaGVpZ2h0ID0gdCkpOwogICAgICAgICAgZm9yIChsZXQgciBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KHIpOwogICAgICAgICAgKHRoaXMudGFyZ2V0Q2FjaGUuY2xlYXIoKSwgKHRoaXMuYWN0aXZlVGFyZ2V0cyA9IG51bGwpKTsKICAgICAgICB9CiAgICAgIH0KICAgICAgdXBsb2FkQW5kQmx1cihlLCB0LCByLCBuLCBpLCBzKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuX3NldEFjdGl2ZVNpemUobiwgaSkpIHJldHVybjsKICAgICAgICBsZXQgbCA9IHRoaXMuZGV2aWNlLAogICAgICAgICAgYSA9IHRoaXMud2lkdGgsCiAgICAgICAgICB1ID0gdGhpcy5oZWlnaHQsCiAgICAgICAgICBvID0gdGhpcy5hY3RpdmVUYXJnZXRzLAogICAgICAgICAgZCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImNhbnZhcyIpOwogICAgICAgICgoZC53aWR0aCA9IGEpLAogICAgICAgICAgKGQuaGVpZ2h0ID0gdSksCiAgICAgICAgICBkLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKGUsIC10LCAtciksCiAgICAgICAgICAoIXRoaXMuYmdUZXh0dXJlIHx8IHRoaXMuYmdUZXh0dXJlLndpZHRoICE9PSBhIHx8IHRoaXMuYmdUZXh0dXJlLmhlaWdodCAhPT0gdSkgJiYKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlICYmIHRoaXMuYmdUZXh0dXJlLmRlc3Ryb3koKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlID0gbC5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgICAgICBzaXplOiBbYSwgdV0sCiAgICAgICAgICAgICAgZm9ybWF0OiAicmdiYTh1bm9ybSIsCiAgICAgICAgICAgICAgdXNhZ2U6CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuVEVYVFVSRV9CSU5ESU5HIHwKICAgICAgICAgICAgICAgIEdQVVRleHR1cmVVc2FnZS5DT1BZX0RTVCB8CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgICAgIH0pKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlVmlldyA9IHRoaXMuYmdUZXh0dXJlLmNyZWF0ZVZpZXcoKSkpLAogICAgICAgICAgbC5xdWV1ZS5jb3B5RXh0ZXJuYWxJbWFnZVRvVGV4dHVyZSgKICAgICAgICAgICAgeyBzb3VyY2U6IGQsIGZsaXBZOiAhMCB9LAogICAgICAgICAgICB7IHRleHR1cmU6IHRoaXMuYmdUZXh0dXJlIH0sCiAgICAgICAgICAgIFthLCB1XSwKICAgICAgICAgICkpOwogICAgICAgIGxldCBmID0gbC5jcmVhdGVDb21tYW5kRW5jb2RlcigpOwogICAgICAgIHRoaXMuX2JsaXRQYXNzKGYsIHRoaXMuYmdUZXh0dXJlVmlldywgby5iZy52aWV3LCBhLCB1LCAxLCAxLCAwLCAwKTsKICAgICAgICBsZXQgaCA9IG8uYmx1ckEudywKICAgICAgICAgIGIgPSBvLmJsdXJBLmg7CiAgICAgICAgaWYgKCh0aGlzLl9ibGl0UGFzcyhmLCBvLmJnLnZpZXcsIG8uYmx1ckEudmlldywgaCwgYiwgMSwgMSwgMCwgMCksIHMgPiAwKSkgewogICAgICAgICAgbGV0IGcgPSBzICogMi41OwogICAgICAgICAgZm9yIChsZXQgcCA9IDA7IHAgPCBMOyBwKyspCiAgICAgICAgICAgICh0aGlzLl9ibHVyUGFzcyhmLCBvLmJsdXJBLnZpZXcsIG8uYmx1ckIudmlldywgaCwgYiwgZyAvIGgsIDApLAogICAgICAgICAgICAgIHRoaXMuX2JsdXJQYXNzKGYsIG8uYmx1ckIudmlldywgby5ibHVyQS52aWV3LCBoLCBiLCAwLCBnIC8gYikpOwogICAgICAgIH0KICAgICAgICBsLnF1ZXVlLnN1Ym1pdChbZi5maW5pc2goKV0pOwogICAgICB9CiAgICAgIF9ibGl0UGFzcyhlLCB0LCByLCBuLCBpLCBzLCBsLCBhLCB1KSB7CiAgICAgICAgbGV0IG8gPSB0aGlzLmRldmljZTsKICAgICAgICBvLnF1ZXVlLndyaXRlQnVmZmVyKHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIsIDAsIG5ldyBGbG9hdDMyQXJyYXkoW3MsIGwsIGEsIHVdKSk7CiAgICAgICAgbGV0IGQgPSBvLmNyZWF0ZUJpbmRHcm91cCh7CiAgICAgICAgICAgIGxheW91dDogdGhpcy5ibGl0UGlwZWxpbmUuZ2V0QmluZEdyb3VwTGF5b3V0KDApLAogICAgICAgICAgICBlbnRyaWVzOiBbCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAwLCByZXNvdXJjZTogeyBidWZmZXI6IHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IHQgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pLAogICAgICAgICAgYyA9IGUuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHIsCiAgICAgICAgICAgICAgICBsb2FkT3A6ICJjbGVhciIsCiAgICAgICAgICAgICAgICBzdG9yZU9wOiAic3RvcmUiLAogICAgICAgICAgICAgICAgY2xlYXJWYWx1ZTogeyByOiAwLCBnOiAwLCBiOiAwLCBhOiAwIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIChjLnNldFBpcGVsaW5lKHRoaXMuYmxpdFBpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIGQpLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5xdWFkQnVmZmVyKSwKICAgICAgICAgIGMuc2V0Vmlld3BvcnQoMCwgMCwgbiwgaSwgMCwgMSksCiAgICAgICAgICBjLmRyYXcoNCksCiAgICAgICAgICBjLmVuZCgpKTsKICAgICAgfQogICAgICBfYmx1clBhc3MoZSwgdCwgciwgbiwgaSwgcywgbCkgewogICAgICAgIGxldCBhID0gdGhpcy5kZXZpY2U7CiAgICAgICAgYS5xdWV1ZS53cml0ZUJ1ZmZlcih0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLCAwLCBuZXcgRmxvYXQzMkFycmF5KFtzLCBsLCAwLCAwXSkpOwogICAgICAgIGxldCB1ID0gYS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuYmx1clBpcGVsaW5lLmdldEJpbmRHcm91cExheW91dCgwKSwKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsgYmluZGluZzogMCwgcmVzb3VyY2U6IHsgYnVmZmVyOiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyIH0gfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDEsIHJlc291cmNlOiB0aGlzLnNhbXBsZXIgfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDIsIHJlc291cmNlOiB0IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KSwKICAgICAgICAgIG8gPSBlLmJlZ2luUmVuZGVyUGFzcyh7CiAgICAgICAgICAgIGNvbG9yQXR0YWNobWVudHM6IFsKICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICB2aWV3OiByLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAoby5zZXRQaXBlbGluZSh0aGlzLmJsdXJQaXBlbGluZSksCiAgICAgICAgICBvLnNldEJpbmRHcm91cCgwLCB1KSwKICAgICAgICAgIG8uc2V0VmVydGV4QnVmZmVyKDAsIHRoaXMucXVhZEJ1ZmZlciksCiAgICAgICAgICBvLnNldFZpZXdwb3J0KDAsIDAsIG4sIGksIDAsIDEpLAogICAgICAgICAgby5kcmF3KDQpLAogICAgICAgICAgby5lbmQoKSk7CiAgICAgIH0KICAgICAgcmVuZGVyR2xhc3NQYW5lbChlLCB0LCByLCBuKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuY29udGV4dCkgcmV0dXJuOwogICAgICAgIGxldCBpID0gdGhpcy5kZXZpY2UsCiAgICAgICAgICBzID0gdGhpcy53aWR0aCwKICAgICAgICAgIGwgPSB0aGlzLmhlaWdodCwKICAgICAgICAgIGEgPSB0aGlzLmFjdGl2ZVRhcmdldHMsCiAgICAgICAgICB1ID0gbmV3IEZsb2F0MzJBcnJheShbCiAgICAgICAgICAgIHMgKiAwLjUsCiAgICAgICAgICAgIGwgKiAwLjUsCiAgICAgICAgICAgIHQgKiBuLAogICAgICAgICAgICByICogbiwKICAgICAgICAgICAgcywKICAgICAgICAgICAgbCwKICAgICAgICAgICAgZS5jb3JuZXJSYWRpdXMgKiBuLAogICAgICAgICAgICBUICogbiwKICAgICAgICAgICAgZS5yZWZyYWN0aW9uLAogICAgICAgICAgICBlLmNocm9tQWJlcnJhdGlvbiwKICAgICAgICAgICAgZS5lZGdlSGlnaGxpZ2h0LAogICAgICAgICAgICBlLnNwZWN1bGFyLAogICAgICAgICAgICBlLmZyZXNuZWwsCiAgICAgICAgICAgIGUuZGlzdG9ydGlvbiwKICAgICAgICAgICAgZS5vcGFjaXR5LAogICAgICAgICAgICBlLnNhdHVyYXRpb24sCiAgICAgICAgICAgIGUudGludFN0cmVuZ3RoLAogICAgICAgICAgICBlLnpSYWRpdXMgKiBuLAogICAgICAgICAgICBlLmJyaWdodG5lc3MsCiAgICAgICAgICAgIGUuc2hhZG93T3BhY2l0eSwKICAgICAgICAgICAgZS5zaGFkb3dTcHJlYWQgKiBuLAogICAgICAgICAgICBlLnNoYWRvd09mZnNldFkgKiBuLAogICAgICAgICAgICBlLmJldmVsTW9kZSwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgIF0pOwogICAgICAgIGkucXVldWUud3JpdGVCdWZmZXIodGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIsIDAsIHUpOwogICAgICAgIGxldCBvID0gaS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuZ2xhc3NQaXBlbGluZS5nZXRCaW5kR3JvdXBMYXlvdXQoMCksCiAgICAgICAgICAgIGVudHJpZXM6IFsKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDAsIHJlc291cmNlOiB7IGJ1ZmZlcjogdGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IGEuYmcudmlldyB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMywgcmVzb3VyY2U6IGEuYmx1ckEudmlldyB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSksCiAgICAgICAgICBkID0gaS5jcmVhdGVDb21tYW5kRW5jb2RlcigpLAogICAgICAgICAgYyA9IGQuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHRoaXMuY29udGV4dC5nZXRDdXJyZW50VGV4dHVyZSgpLmNyZWF0ZVZpZXcoKSwKICAgICAgICAgICAgICAgIGxvYWRPcDogImxvYWQiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSk7CiAgICAgICAgKGMuc2V0UGlwZWxpbmUodGhpcy5nbGFzc1BpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIG8pLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5wYW5lbEJ1ZmZlciksCiAgICAgICAgICBjLnNldFZpZXdwb3J0KDAsIDAsIHMsIGwsIDAsIDEpLAogICAgICAgICAgYy5kcmF3KDQpLAogICAgICAgICAgYy5lbmQoKSwKICAgICAgICAgIGkucXVldWUuc3VibWl0KFtkLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGNsZWFyKCkgewogICAgICAgIGlmICghdGhpcy5faW5pdGlhbGl6ZWQgfHwgIXRoaXMuZGV2aWNlIHx8ICF0aGlzLmNvbnRleHQpIHJldHVybjsKICAgICAgICBsZXQgZSA9IHRoaXMuZGV2aWNlLmNyZWF0ZUNvbW1hbmRFbmNvZGVyKCksCiAgICAgICAgICB0ID0gZS5iZWdpblJlbmRlclBhc3MoewogICAgICAgICAgICBjb2xvckF0dGFjaG1lbnRzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgdmlldzogdGhpcy5jb250ZXh0LmdldEN1cnJlbnRUZXh0dXJlKCkuY3JlYXRlVmlldygpLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAodC5zZXRWaWV3cG9ydCgwLCAwLCB0aGlzLndpZHRoLCB0aGlzLmhlaWdodCwgMCwgMSksCiAgICAgICAgICB0LmVuZCgpLAogICAgICAgICAgdGhpcy5kZXZpY2UucXVldWUuc3VibWl0KFtlLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGRlc3Ryb3koKSB7CiAgICAgICAgZm9yIChsZXQgZSBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KGUpOwogICAgICAgICh0aGlzLnRhcmdldENhY2hlLmNsZWFyKCksCiAgICAgICAgICB0aGlzLmJnVGV4dHVyZSAmJiB0aGlzLmJnVGV4dHVyZS5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLnF1YWRCdWZmZXIgJiYgdGhpcy5xdWFkQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIgJiYgdGhpcy5wYW5lbEJ1ZmZlci5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmJsaXRVbmlmb3JtQnVmZmVyICYmIHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIuZGVzdHJveSgpLAogICAgICAgICAgdGhpcy5ibHVyVW5pZm9ybUJ1ZmZlciAmJiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyICYmIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZGV2aWNlPy5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmNhbnZhcy5yZW1vdmUoKSk7CiAgICAgIH0KICAgICAgX3NldEFjdGl2ZVNpemUoZSwgdCkgewogICAgICAgIGlmIChlIDw9IDAgfHwgdCA8PSAwKSByZXR1cm4gITE7CiAgICAgICAgKCh0aGlzLndpZHRoID0gZSksCiAgICAgICAgICAodGhpcy5oZWlnaHQgPSB0KSwKICAgICAgICAgICh0aGlzLmNhbnZhcy53aWR0aCA8IGUgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IDwgdCkgJiYKICAgICAgICAgICAgKCh0aGlzLmNhbnZhcy53aWR0aCA9IE1hdGgubWF4KHRoaXMuY2FudmFzLndpZHRoLCBlKSksCiAgICAgICAgICAgICh0aGlzLmNhbnZhcy5oZWlnaHQgPSBNYXRoLm1heCh0aGlzLmNhbnZhcy5oZWlnaHQsIHQpKSwKICAgICAgICAgICAgdGhpcy5jb250ZXh0Py5jb25maWd1cmUoewogICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgZm9ybWF0OiB0aGlzLmZvcm1hdCwKICAgICAgICAgICAgICBhbHBoYU1vZGU6ICJwcmVtdWx0aXBsaWVkIiwKICAgICAgICAgICAgfSkpKTsKICAgICAgICBsZXQgciA9IGAke2V9eCR7dH1gLAogICAgICAgICAgbiA9IHRoaXMudGFyZ2V0Q2FjaGUuZ2V0KHIpOwogICAgICAgIHJldHVybiAoCiAgICAgICAgICBuIHx8CiAgICAgICAgICAgICgobiA9IHsKICAgICAgICAgICAgICBiZzogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQTogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQjogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgfSksCiAgICAgICAgICAgIHRoaXMudGFyZ2V0Q2FjaGUuc2V0KHIsIG4pKSwKICAgICAgICAgICh0aGlzLmFjdGl2ZVRhcmdldHMgPSBuKSwKICAgICAgICAgICEwCiAgICAgICAgKTsKICAgICAgfQogICAgICBfbWFrZVRhcmdldChlLCB0KSB7CiAgICAgICAgbGV0IHIgPSB0aGlzLmRldmljZS5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgIHNpemU6IFtlLCB0XSwKICAgICAgICAgIGZvcm1hdDogInJnYmE4dW5vcm0iLAogICAgICAgICAgdXNhZ2U6IEdQVVRleHR1cmVVc2FnZS5URVhUVVJFX0JJTkRJTkcgfCBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgfSk7CiAgICAgICAgcmV0dXJuIHsgdGV4dHVyZTogciwgdmlldzogci5jcmVhdGVWaWV3KCksIHc6IGUsIGg6IHQgfTsKICAgICAgfQogICAgICBfZnJlZVRhcmdldChlKSB7CiAgICAgICAgZSAmJiBlLnRleHR1cmUuZGVzdHJveSgpOwogICAgICB9CiAgICAgIF9mcmVlVGFyZ2V0U2V0KGUpIHsKICAgICAgICAodGhpcy5fZnJlZVRhcmdldChlLmJnKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJBKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJCKSk7CiAgICAgIH0KICAgIH07CiAgdmFyIFIgPSBjbGFzcyB7CiAgICBjYW52YXM7CiAgICBjdHg7CiAgICByZW5kZXJlcjsKICAgIHNjZW5lQ2FudmFzOwogICAgc2NlbmVDdHg7CiAgICBkcmF3RWxlbWVudEltYWdlOwogICAgX2luaXRQcm9taXNlOwogICAgX2luaXRpYWxpemVkID0gITE7CiAgICBjb25zdHJ1Y3RvcihlKSB7CiAgICAgICgodGhpcy5jYW52YXMgPSBlKSwKICAgICAgICAodGhpcy5jdHggPSBlLmdldENvbnRleHQoIjJkIikpLAogICAgICAgICh0aGlzLnJlbmRlcmVyID0gbmV3IHkoKSksCiAgICAgICAgKHRoaXMuc2NlbmVDYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgKHRoaXMuc2NlbmVDdHggPSB0aGlzLnNjZW5lQ2FudmFzLmdldENvbnRleHQoIjJkIikpKTsKICAgICAgbGV0IHQgPSB0aGlzLmN0eDsKICAgICAgKCh0aGlzLmRyYXdFbGVtZW50SW1hZ2UgPSB0LmRyYXdFbGVtZW50SW1hZ2U/LmJpbmQodCkgPz8gdC5kcmF3RWxlbWVudD8uYmluZCh0KSA/PyBudWxsKSwKICAgICAgICAodGhpcy5faW5pdFByb21pc2UgPSB0aGlzLl9pbml0V2ViR1BVKCkpKTsKICAgIH0KICAgIGFzeW5jIF9pbml0V2ViR1BVKCkgewogICAgICB0cnkgewogICAgICAgIHJldHVybiAoYXdhaXQgdGhpcy5yZW5kZXJlci5pbml0KCkpCiAgICAgICAgICA/ICgodGhpcy5faW5pdGlhbGl6ZWQgPSAhMCksIGNvbnNvbGUubG9nKCJMaXF1aWRHbGFzczogV2ViR1BVIHJlbmRlcmVyIGluaXRpYWxpemVkIiksICEwKQogICAgICAgICAgOiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBub3QgYXZhaWxhYmxlIiksICExKTsKICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgIHJldHVybiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBpbml0IGZhaWxlZCIsIGUpLCAhMSk7CiAgICAgIH0KICAgIH0KICAgIGdldCBpc1JlYWR5KCkgewogICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICB9CiAgICBhc3luYyB3YWl0Rm9ySW5pdCgpIHsKICAgICAgcmV0dXJuIHRoaXMuX2luaXRQcm9taXNlOwogICAgfQogICAgcmVuZGVyKCkgewogICAgICBsZXQgZSA9IHRoaXMuY2FudmFzLndpZHRoLAogICAgICAgIHQgPSB0aGlzLmNhbnZhcy5oZWlnaHQ7CiAgICAgIGlmIChlID09PSAwIHx8IHQgPT09IDAgfHwgIXRoaXMuZHJhd0VsZW1lbnRJbWFnZSB8fCAhdGhpcy5faW5pdGlhbGl6ZWQpIHJldHVybjsKICAgICAgdGhpcy5jdHguY2xlYXJSZWN0KDAsIDAsIGUsIHQpOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSBBcnJheS5mcm9tKHRoaXMuY2FudmFzLmNoaWxkcmVuKSwKICAgICAgICBzID0gQXJyYXkuZnJvbSh0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIikpLAogICAgICAgIGwgPSBuZXcgU2V0KHMpOwogICAgICBpLmxlbmd0aCA9PT0gMCAmJgogICAgICAgICF0aGlzLl9fbGdfd2Fybl9lbXB0eSAmJgogICAgICAgIChjb25zb2xlLndhcm4oIkxpcXVpZEdsYXNzOiBObyBjaGlsZHJlbiBmb3VuZCBpbnNpZGUgdGhlIGNhbnZhcyB0byByZW5kZXIuIiksCiAgICAgICAgKHRoaXMuX19sZ193YXJuX2VtcHR5ID0gITApKTsKICAgICAgZm9yIChsZXQgYSBvZiBpKQogICAgICAgIGlmICghbC5oYXMoYSkpIHsKICAgICAgICAgIGxldCB1ID0gYSwKICAgICAgICAgICAgbyA9IHRoaXMuX2dldEVsZW1lbnRQb3NpdGlvbih1LCBuKTsKICAgICAgICAgIGlmIChvLncgPD0gMCB8fCBvLmggPD0gMCkgY29udGludWU7CiAgICAgICAgICBsZXQgZCA9IG8ueCAqIHIsCiAgICAgICAgICAgIGMgPSBvLnkgKiByOwogICAgICAgICAgdHJ5IHsKICAgICAgICAgICAgbGV0IGYgPSB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoYSwgZCwgYyk7CiAgICAgICAgICAgIGYgJiYgKHUuc3R5bGUudHJhbnNmb3JtID0gZi50b1N0cmluZygpKTsKICAgICAgICAgIH0gY2F0Y2ggKGYpIHsKICAgICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgICAgIChjb25zb2xlLndhcm4oCiAgICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byBkcmF3IGJhY2tncm91bmQgZWxlbWVudCAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICAgIGYubWVzc2FnZSB8fCBmLAogICAgICAgICAgICAgICksCiAgICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWQgPSAhMCkpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgZm9yIChsZXQgYSBvZiBzKQogICAgICAgIHRyeSB7CiAgICAgICAgICB0aGlzLl9yZW5kZXJHbGFzc0VsZW1lbnQoYSwgbiwgcik7CiAgICAgICAgfSBjYXRjaCAodSkgewogICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZF9nbGFzcyB8fAogICAgICAgICAgICAoY29uc29sZS5lcnJvcigKICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byByZW5kZXIgZ2xhc3MgZWZmZWN0IGZvciAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICB1Lm1lc3NhZ2UgfHwgdSwKICAgICAgICAgICAgKSwKICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWRfZ2xhc3MgPSAhMCkpOwogICAgICAgIH0KICAgIH0KICAgIHJlbmRlckdsYXNzRWxlbWVudHMoKSB7CiAgICAgIGxldCBlID0gdGhpcy5jYW52YXMud2lkdGgsCiAgICAgICAgdCA9IHRoaXMuY2FudmFzLmhlaWdodDsKICAgICAgaWYgKGUgPT09IDAgfHwgdCA9PT0gMCB8fCAhdGhpcy5kcmF3RWxlbWVudEltYWdlIHx8ICF0aGlzLl9pbml0aWFsaXplZCkgcmV0dXJuOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSB0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIik7CiAgICAgIGZvciAobGV0IHMgb2YgaSkgdGhpcy5fcmVuZGVyR2xhc3NFbGVtZW50KHMsIG4sIHIpOwogICAgfQogICAgX3BhcnNlQ1NTTGVuZ3RoKGUsIHQpIHsKICAgICAgcmV0dXJuICFlIHx8IGUgPT09ICJhdXRvIgogICAgICAgID8gTmFOCiAgICAgICAgOiAoKGUgPSBlLnRyaW0oKSksCiAgICAgICAgICBlLnN0YXJ0c1dpdGgoImNhbGMoIikKICAgICAgICAgICAgPyB0aGlzLl9wYXJzZUNhbGMoZSwgdCkKICAgICAgICAgICAgOiBlLmVuZHNXaXRoKCIlIikKICAgICAgICAgICAgICA/IChwYXJzZUZsb2F0KGUpIC8gMTAwKSAqIHQKICAgICAgICAgICAgICA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfcGFyc2VDYWxjKGUsIHQpIHsKICAgICAgbGV0IHIgPSBlLm1hdGNoKC9jYWxjXCgoLispXCkvKTsKICAgICAgaWYgKCFyKSByZXR1cm4gMDsKICAgICAgbGV0IG4gPSByWzFdLnRyaW0oKSwKICAgICAgICBpID0gbi5tYXRjaCgvKC4rKVxzKlwrXHMqKC4rKS8pLAogICAgICAgIHMgPSBuLm1hdGNoKC8oLispXHMqLVxzKiguKykvKTsKICAgICAgaWYgKHMpIHsKICAgICAgICBsZXQgbCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKHNbMV0udHJpbSgpLCB0KSwKICAgICAgICAgIGEgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChzWzJdLnRyaW0oKSwgdCk7CiAgICAgICAgcmV0dXJuIGwgLSBhOwogICAgICB9CiAgICAgIGlmIChpKSB7CiAgICAgICAgbGV0IGwgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChpWzFdLnRyaW0oKSwgdCksCiAgICAgICAgICBhID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoaVsyXS50cmltKCksIHQpOwogICAgICAgIHJldHVybiBsICsgYTsKICAgICAgfQogICAgICByZXR1cm4gdGhpcy5fcGFyc2VDU1NMZW5ndGgobiwgdCk7CiAgICB9CiAgICBfcGFyc2VUcmFuc2Zvcm0oZSwgdCwgcikgewogICAgICBsZXQgbiA9IDAsCiAgICAgICAgaSA9IDA7CiAgICAgIGlmICghZSB8fCBlID09PSAibm9uZSIpIHJldHVybiB7IHR4OiBuLCB0eTogaSB9OwogICAgICBsZXQgcyA9IGUubWF0Y2goL3RyYW5zbGF0ZVwoXHMqKFteLCldKykoPzpccyosXHMqKFteKV0rKSk/XHMqXCkvKTsKICAgICAgcyAmJgogICAgICAgICgobiA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1sxXSwgdCkpLAogICAgICAgIChpID0gc1syXSA/IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1syXSwgcikgOiAwKSk7CiAgICAgIGxldCBsID0gZS5tYXRjaCgvdHJhbnNsYXRlWFwoXHMqKFteKV0rKVxzKlwpLyk7CiAgICAgIGwgJiYgKG4gPSB0aGlzLl9wYXJzZVRyYW5zbGF0ZVZhbHVlKGxbMV0sIHQpKTsKICAgICAgbGV0IGEgPSBlLm1hdGNoKC90cmFuc2xhdGVZXChccyooW14pXSspXHMqXCkvKTsKICAgICAgYSAmJiAoaSA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoYVsxXSwgcikpOwogICAgICBsZXQgdSA9IGUubWF0Y2goL3RyYW5zbGF0ZTNkXChccyooW14sXSspXHMqLFxzKihbXixdKylccyosXHMqW14pXStccypcKS8pOwogICAgICByZXR1cm4gKAogICAgICAgIHUgJiYgKChuID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzFdLCB0KSksIChpID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzJdLCByKSkpLAogICAgICAgIHsgdHg6IG4sIHR5OiBpIH0KICAgICAgKTsKICAgIH0KICAgIF9wYXJzZVRyYW5zbGF0ZVZhbHVlKGUsIHQpIHsKICAgICAgcmV0dXJuICgoZSA9IGUudHJpbSgpKSwgZS5lbmRzV2l0aCgiJSIpID8gKHBhcnNlRmxvYXQoZSkgLyAxMDApICogdCA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfZ2V0RWxlbWVudFBvc2l0aW9uKGUsIHQpIHsKICAgICAgbGV0IHIgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIG4gPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLndpZHRoKSB8fCB0aGlzLmNhbnZhcy53aWR0aCB8fCAxNTM2LAogICAgICAgIGkgPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLmhlaWdodCkgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IHx8IDEwMjQsCiAgICAgICAgcyA9IGUuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCksCiAgICAgICAgbCA9IHMud2lkdGggfHwgcGFyc2VGbG9hdChyLndpZHRoKSB8fCAwLAogICAgICAgIGEgPSBzLmhlaWdodCB8fCBwYXJzZUZsb2F0KHIuaGVpZ2h0KSB8fCAwLAogICAgICAgIHUgPSAwLAogICAgICAgIG8gPSAwLAogICAgICAgIGQgPSBlLnN0eWxlLAogICAgICAgIGMgPSBkLmxlZnQgfHwgci5sZWZ0LAogICAgICAgIGYgPSBkLnJpZ2h0IHx8IHIucmlnaHQsCiAgICAgICAgaCA9IGQudG9wIHx8IHIudG9wLAogICAgICAgIGIgPSBkLmJvdHRvbSB8fCByLmJvdHRvbSwKICAgICAgICBnID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYywgbiksCiAgICAgICAgcCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKGYsIG4pLAogICAgICAgIHYgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChoLCBpKSwKICAgICAgICBTID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYiwgaSksCiAgICAgICAgUCA9IHBhcnNlRmxvYXQoci5tYXJnaW5MZWZ0KSB8fCAwLAogICAgICAgIHggPSBwYXJzZUZsb2F0KHIubWFyZ2luUmlnaHQpIHx8IDAsCiAgICAgICAgTSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Ub3ApIHx8IDAsCiAgICAgICAgQSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Cb3R0b20pIHx8IDAsCiAgICAgICAgRyA9ICFpc05hTihnKSwKICAgICAgICBVID0gIWlzTmFOKHApOwogICAgICBHICYmIFUgJiYgZyA9PT0gMCAmJiBwID09PSAwCiAgICAgICAgPyAodSA9IChuIC0gbCkgLyAyKQogICAgICAgIDogKEcgJiYgVSkgfHwgRwogICAgICAgICAgPyAodSA9IGcgKyBQKQogICAgICAgICAgOiBVICYmICh1ID0gbiAtIGwgLSBwIC0geCk7CiAgICAgIGxldCBCID0gIWlzTmFOKHYpLAogICAgICAgIEMgPSAhaXNOYU4oUyk7CiAgICAgIEIgJiYgQyAmJiB2ID09PSAwICYmIFMgPT09IDAKICAgICAgICA/IChvID0gKGkgLSBhKSAvIDIpCiAgICAgICAgOiAoQiAmJiBDKSB8fCBCCiAgICAgICAgICA/IChvID0gdiArIE0pCiAgICAgICAgICA6IEMgJiYgKG8gPSBpIC0gYSAtIFMgLSBBKTsKICAgICAgbGV0IHsgdHg6IFYsIHR5OiBGIH0gPSB0aGlzLl9wYXJzZVRyYW5zZm9ybShyLnRyYW5zZm9ybSwgbCwgYSk7CiAgICAgIHJldHVybiAoKHUgKz0gViksIChvICs9IEYpLCB7IHg6IHUsIHk6IG8sIHc6IGwsIGg6IGEgfSk7CiAgICB9CiAgICBfcmVuZGVyR2xhc3NFbGVtZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9nZXRDb25maWdGcm9tQ1NTKGUpLAogICAgICAgIGkgPSB0aGlzLl9nZXRFbGVtZW50UG9zaXRpb24oZSwgdCksCiAgICAgICAgcyA9IGkueCwKICAgICAgICBsID0gaS55LAogICAgICAgIGEgPSBpLncsCiAgICAgICAgdSA9IGkuaCwKICAgICAgICBvID0gcyAqIHIsCiAgICAgICAgZCA9IGwgKiByLAogICAgICAgIGMgPSBhICogciwKICAgICAgICBmID0gdSAqIHIsCiAgICAgICAgaCA9IFQgKiByLAogICAgICAgIGIgPSBvIC0gaCwKICAgICAgICBnID0gZCAtIGgsCiAgICAgICAgcCA9IGMgKyBoICogMiwKICAgICAgICB2ID0gZiArIGggKiAyOwogICAgICB0aGlzLl9jYXB0dXJlUmVnaW9uKGIsIGcsIHAsIHYpOwogICAgICBsZXQgUyA9IE1hdGgucm91bmQocCksCiAgICAgICAgUCA9IE1hdGgucm91bmQodik7CiAgICAgICh0aGlzLnJlbmRlcmVyLmNsZWFyKCksCiAgICAgICAgdGhpcy5yZW5kZXJlci51cGxvYWRBbmRCbHVyKHRoaXMuc2NlbmVDYW52YXMsIDAsIDAsIFMsIFAsIG4uYmx1ckFtb3VudCksCiAgICAgICAgdGhpcy5yZW5kZXJlci5yZW5kZXJHbGFzc1BhbmVsKG4sIGEsIHUsIHIpLAogICAgICAgIHRoaXMuY3R4LmRyYXdJbWFnZSh0aGlzLnJlbmRlcmVyLmNhbnZhcywgMCwgMCwgcCwgdiwgYiwgZywgcCwgdikpOwogICAgICB0cnkgewogICAgICAgIGxldCB4ID0gdGhpcy5fZHJhd0dsYXNzRWxlbWVudENvbnRlbnQoZSwgbywgZCk7CiAgICAgICAgeCAmJiAoZS5zdHlsZS50cmFuc2Zvcm0gPSB4LnRvU3RyaW5nKCkpOwogICAgICB9IGNhdGNoICh4KSB7CiAgICAgICAgZS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgKGNvbnNvbGUud2FybigKICAgICAgICAgICAgYExpcXVpZEdsYXNzOiBGYWlsZWQgdG8gZHJhdyBnbGFzcyBlbGVtZW50ICR7ZS50YWdOYW1lfS4ke2UuY2xhc3NOYW1lfTpgLAogICAgICAgICAgICB4LAogICAgICAgICAgKSwKICAgICAgICAgIChlLl9fbGdfZXJyb3JfbG9nZ2VkID0gITApKTsKICAgICAgfQogICAgfQogICAgX2RyYXdHbGFzc0VsZW1lbnRDb250ZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9zdXBwcmVzc0dsYXNzQ2hyb21lKGUpOwogICAgICB0cnkgewogICAgICAgIHJldHVybiB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoZSwgdCwgcik7CiAgICAgIH0gZmluYWxseSB7CiAgICAgICAgdGhpcy5fcmVzdG9yZUlubGluZVN0eWxlcyhlLCBuKTsKICAgICAgfQogICAgfQogICAgX3N1cHByZXNzR2xhc3NDaHJvbWUoZSkgewogICAgICBsZXQgdCA9IG5ldyBNYXAoKSwKICAgICAgICByID0gWwogICAgICAgICAgImJhY2tncm91bmQiLAogICAgICAgICAgImJhY2tncm91bmRDb2xvciIsCiAgICAgICAgICAiYmFja2dyb3VuZEltYWdlIiwKICAgICAgICAgICJib3JkZXJDb2xvciIsCiAgICAgICAgICAiYm94U2hhZG93IiwKICAgICAgICAgICJmaWx0ZXIiLAogICAgICAgICAgIm91dGxpbmVDb2xvciIsCiAgICAgICAgXTsKICAgICAgZm9yIChsZXQgbiBvZiByKSB0LnNldChuLCBlLnN0eWxlW25dKTsKICAgICAgcmV0dXJuICgKICAgICAgICAoZS5zdHlsZS5iYWNrZ3JvdW5kID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZEltYWdlID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5ib3JkZXJDb2xvciA9ICJ0cmFuc3BhcmVudCIpLAogICAgICAgIChlLnN0eWxlLmJveFNoYWRvdyA9ICJub25lIiksCiAgICAgICAgKGUuc3R5bGUuZmlsdGVyID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5vdXRsaW5lQ29sb3IgPSAidHJhbnNwYXJlbnQiKSwKICAgICAgICB0CiAgICAgICk7CiAgICB9CiAgICBfcmVzdG9yZUlubGluZVN0eWxlcyhlLCB0KSB7CiAgICAgIGZvciAobGV0IFtyLCBuXSBvZiB0KSBlLnN0eWxlW3JdID0gbjsKICAgIH0KICAgIF9jYXB0dXJlUmVnaW9uKGUsIHQsIHIsIG4pIHsKICAgICAgbGV0IGkgPSBNYXRoLnJvdW5kKHIpLAogICAgICAgIHMgPSBNYXRoLnJvdW5kKG4pOwogICAgICAoKHRoaXMuc2NlbmVDYW52YXMud2lkdGggIT09IGkgfHwgdGhpcy5zY2VuZUNhbnZhcy5oZWlnaHQgIT09IHMpICYmCiAgICAgICAgKCh0aGlzLnNjZW5lQ2FudmFzLndpZHRoID0gaSksICh0aGlzLnNjZW5lQ2FudmFzLmhlaWdodCA9IHMpKSwKICAgICAgICAodGhpcy5zY2VuZUN0eC5maWxsU3R5bGUgPSAiI2ZmZmZmZiIpLAogICAgICAgIHRoaXMuc2NlbmVDdHguZmlsbFJlY3QoMCwgMCwgaSwgcyksCiAgICAgICAgdGhpcy5zY2VuZUN0eC5kcmF3SW1hZ2UodGhpcy5jYW52YXMsIGUsIHQsIHIsIG4sIDAsIDAsIGksIHMpKTsKICAgIH0KICAgIF9nZXRDb25maWdGcm9tQ1NTKGUpIHsKICAgICAgbGV0IHQgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIHIgPSB7IC4uLncgfTsKICAgICAgZm9yIChsZXQgW24sIGldIG9mIE9iamVjdC5lbnRyaWVzKF8pKSB7CiAgICAgICAgbGV0IHMgPSB0LmdldFByb3BlcnR5VmFsdWUobikudHJpbSgpOwogICAgICAgIGlmIChzKSB7CiAgICAgICAgICBsZXQgbCA9IHBhcnNlRmxvYXQocyk7CiAgICAgICAgICBpc05hTihsKSB8fCAocltpXSA9IGwpOwogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gcjsKICAgIH0KICAgIGRlc3Ryb3koKSB7CiAgICAgIHRoaXMucmVuZGVyZXIuZGVzdHJveSgpOwogICAgfQogIH07CiAgcmV0dXJuIEkoWSk7Cn0pKCk7Cg==\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n      }\n      body {\n        font-family: \"Inter\", sans-serif;\n        color: #fff;\n      }\n\n      #three-canvas {\n        position: absolute;\n        inset: 0;\n        z-index: 0;\n        display: block;\n      }\n      #glass-canvas {\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n        display: block;\n        width: 1920px;\n        height: 1080px;\n      }\n      .text-overlay {\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n        pointer-events: none;\n      }\n\n      .glass-panel {\n        position: absolute;\n        width: 520px;\n        height: 118px;\n        background: rgba(255, 255, 255, 0.06);\n        --lg-blur: 0.22;\n        --lg-refraction: 0.6;\n        --lg-corner-radius: 36;\n        --lg-z-radius: 38;\n        --lg-specular: 0.2;\n        --lg-fresnel: 0.9;\n        --lg-edge-highlight: 0.1;\n        --lg-chrom-aberration: 0.05;\n        --lg-shadow-opacity: 0.35;\n        --lg-shadow-spread: 14;\n        --lg-shadow-offset-y: 4;\n        --lg-saturation: 0.25;\n      }\n      .glass-panel.p1 {\n        top: 60px;\n        left: 1340px;\n      }\n      .glass-panel.p2 {\n        top: 196px;\n        left: 1340px;\n      }\n\n      .notif-card {\n        position: absolute;\n        width: 520px;\n        height: 118px;\n        padding: 18px 24px;\n        display: flex;\n        align-items: center;\n        gap: 16px;\n        color: #fff;\n      }\n      .notif-card.c1 {\n        top: 60px;\n        left: 1340px;\n      }\n      .notif-card.c2 {\n        top: 196px;\n        left: 1340px;\n      }\n\n      .avatar {\n        width: 48px;\n        height: 48px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 19px;\n        font-weight: 800;\n        flex-shrink: 0;\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.35),\n          0 10px 24px rgba(0, 0, 0, 0.24);\n      }\n      .avatar-ja {\n        width: 128px;\n        border-radius: 20px;\n        background: rgba(2, 4, 10, 0.72);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.18),\n          0 10px 24px rgba(0, 0, 0, 0.24);\n      }\n      .hyperframes-logo {\n        width: 102px;\n        height: auto;\n        display: block;\n      }\n      .avatar-kl {\n        background: linear-gradient(135deg, #ff7ab6, #8b5cf6);\n      }\n      .notif-body {\n        flex: 1;\n        min-width: 0;\n      }\n      .notif-header {\n        display: flex;\n        align-items: baseline;\n        gap: 8px;\n        margin-bottom: 3px;\n      }\n      .notif-name {\n        font-size: 20px;\n        font-weight: 700;\n      }\n      .notif-time {\n        font-size: 14px;\n        font-weight: 500;\n        color: rgba(255, 255, 255, 0.55);\n      }\n      .notif-text {\n        font-size: 17px;\n        font-weight: 500;\n        color: rgba(255, 255, 255, 0.88);\n        line-height: 1.32;\n      }\n      .notif-progress {\n        position: absolute;\n        right: 26px;\n        bottom: 15px;\n        left: 168px;\n        height: 3px;\n        overflow: hidden;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.18);\n      }\n      .notif-progress-fill {\n        width: 0%;\n        height: 100%;\n        border-radius: inherit;\n        background: linear-gradient(90deg, #06e3fa, #4fdb5e);\n        box-shadow: 0 0 16px rgba(79, 219, 94, 0.55);\n      }\n      .status-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: #06e3fa;\n        box-shadow: 0 0 16px rgba(6, 227, 250, 0.65);\n      }\n      .notif-actions {\n        position: absolute;\n        right: 22px;\n        bottom: 13px;\n        display: flex;\n        gap: 8px;\n        opacity: 0;\n      }\n      .action-chip {\n        padding: 5px 11px;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.16);\n        color: rgba(255, 255, 255, 0.94);\n        font-size: 12px;\n        font-weight: 750;\n        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);\n      }\n      .typing-dots {\n        display: inline-flex;\n        gap: 3px;\n        margin-left: 5px;\n        transform: translateY(-1px);\n      }\n      .typing-dots span {\n        width: 4px;\n        height: 4px;\n        border-radius: 50%;\n        background: rgba(255, 255, 255, 0.72);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"liquid-glass-notification\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <canvas id=\"three-canvas\"></canvas>\n\n      <canvas id=\"glass-canvas\" layoutsubtree width=\"1920\" height=\"1080\">\n        <div class=\"glass-panel liquid-glass p1\" id=\"gp1\"></div>\n        <div class=\"glass-panel liquid-glass p2\" id=\"gp2\"></div>\n      </canvas>\n\n      <div class=\"text-overlay\">\n        <div class=\"notif-card c1\" id=\"txt1\">\n          <div class=\"avatar avatar-ja\">\n            <img\n              class=\"hyperframes-logo\"\n              src=\"/public/catalog/assets/f9f942c43b465616.svg\"\n              alt=\"HyperFrames\"\n            />\n          </div>\n          <div class=\"notif-body\">\n            <div class=\"notif-header\">\n              <span class=\"notif-name\">Render complete</span>\n              <span class=\"status-dot\" id=\"status-dot\"></span>\n              <span class=\"notif-time\" id=\"render-status\">rendering</span>\n            </div>\n            <div class=\"notif-text\" id=\"render-copy\">\n              Liquid glass preview is encoding with GPU capture.\n            </div>\n            <div class=\"notif-progress\">\n              <div class=\"notif-progress-fill\" id=\"render-progress\"></div>\n            </div>\n          </div>\n        </div>\n        <div class=\"notif-card c2\" id=\"txt2\">\n          <div class=\"avatar avatar-kl\">M</div>\n          <div class=\"notif-body\">\n            <div class=\"notif-header\">\n              <span class=\"notif-name\">Messages</span>\n              <span class=\"notif-time\">now</span>\n            </div>\n            <div class=\"notif-text\">\n              Miguel: can it feel alive but still native?\n              <span class=\"typing-dots\" id=\"typing-dots\"\n                ><span></span><span></span><span></span\n              ></span>\n            </div>\n            <div class=\"notif-actions\" id=\"reply-actions\">\n              <span class=\"action-chip\">Reply</span>\n              <span class=\"action-chip\">Mark Read</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var threeCanvas = document.getElementById(\"three-canvas\");\n        var threeRenderer = new THREE.WebGLRenderer({\n          canvas: threeCanvas,\n          antialias: false,\n          preserveDrawingBuffer: true,\n        });\n        threeRenderer.setSize(1920, 1080);\n        threeRenderer.setPixelRatio(1);\n        var threeScene = new THREE.Scene();\n        var threeCamera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n\n        var fs = [\n          \"precision highp float;\",\n          \"varying vec2 vUv;\",\n          \"uniform float uTime;\",\n          \"vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n          \"vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n          \"vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}\",\n          \"vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}\",\n          \"float snoise(vec3 v){\",\n          \"  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);\",\n          \"  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);\",\n          \"  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;\",\n          \"  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);\",\n          \"  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;\",\n          \"  i=mod289(i);\",\n          \"  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));\",\n          \"  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;\",\n          \"  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);\",\n          \"  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);\",\n          \"  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);\",\n          \"  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;\",\n          \"  vec4 sh=-step(h,vec4(0.0));\",\n          \"  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;\",\n          \"  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);\",\n          \"  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));\",\n          \"  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;\",\n          \"  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;\",\n          \"  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));\",\n          \"}\",\n          \"void main(){\",\n          \"  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;\",\n          \"  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;\",\n          \"  vec2 wp=p+vec2(wx,wy);\",\n          \"  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));\",\n          \"  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));\",\n          \"  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);\",\n          \"  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);\",\n          \"  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);\",\n          \"  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;\",\n          \"  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;\",\n          \"  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;\",\n          \"  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);\",\n          \"  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);\",\n          \"  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);\",\n          \"  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);\",\n          \"  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);\",\n          \"  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);\",\n          \"  vec3 col=base;\",\n          \"  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));\",\n          \"  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));\",\n          \"  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));\",\n          \"  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;\",\n          \"  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;\",\n          \"  col*=1.0-pow(abs(ridge1),4.0)*0.15;\",\n          \"  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));\",\n          \"  col*=0.65+vig*0.5;\",\n          \"  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);\",\n          \"  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));\",\n          \"  gl_FragColor=vec4(col,1.0);\",\n          \"}\",\n        ].join(\"\\n\");\n\n        var uniforms = { uTime: { value: 0.0 } };\n        threeScene.add(\n          new THREE.Mesh(\n            new THREE.PlaneGeometry(2, 2),\n            new THREE.ShaderMaterial({\n              vertexShader:\n                \"varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }\",\n              fragmentShader: fs,\n              uniforms: uniforms,\n            }),\n          ),\n        );\n        threeRenderer.render(threeScene, threeCamera);\n\n        var glassCanvas = document.getElementById(\"glass-canvas\");\n        var glassCtx = glassCanvas.getContext(\"2d\");\n        var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);\n\n        function renderFrame(time) {\n          uniforms.uTime.value = time;\n          threeRenderer.render(threeScene, threeCamera);\n          if (!lg.isReady) return;\n          glassCtx.clearRect(0, 0, 1920, 1080);\n          glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);\n          lg.renderGlassElements();\n        }\n\n        var lgReady = false;\n        lg.waitForInit().then(function (ok) {\n          if (!ok) return;\n          lgReady = true;\n          glassCanvas.onpaint = function () {\n            renderFrame(0);\n          };\n          if (glassCanvas.requestPaint) glassCanvas.requestPaint();\n        });\n\n        window.__timelines = window.__timelines || {};\n        var tl = gsap.timeline({ paused: true });\n\n        tl.to(\n          {},\n          {\n            duration: 8,\n            ease: \"none\",\n            onUpdate: function () {\n              var t = tl.time();\n              uniforms.uTime.value = t;\n              threeRenderer.render(threeScene, threeCamera);\n              if (lgReady) {\n                glassCanvas.onpaint = function () {\n                  glassCtx.clearRect(0, 0, 1920, 1080);\n                  glassCtx.drawImage(threeCanvas, 0, 0, 1920, 1080);\n                  lg.renderGlassElements();\n                };\n                if (glassCanvas.requestPaint) glassCanvas.requestPaint();\n              }\n            },\n          },\n          0,\n        );\n\n        var renderStatus = document.getElementById(\"render-status\");\n        var renderCopy = document.getElementById(\"render-copy\");\n\n        gsap.set([\"#gp1\", \"#gp2\"], { left: \"1980px\", opacity: 0 });\n        gsap.set([\"#txt1\", \"#txt2\"], { x: 640, opacity: 0 });\n        gsap.set(\"#reply-actions\", { y: 8, opacity: 0 });\n        gsap.set(\"#typing-dots span\", { opacity: 0.35 });\n\n        tl.to(\"#gp1\", { left: \"1326px\", opacity: 1, duration: 0.38, ease: \"power3.out\" }, 0.18);\n        tl.to(\"#txt1\", { x: -14, opacity: 1, duration: 0.38, ease: \"power3.out\" }, 0.18);\n        tl.to(\"#gp1\", { left: \"1340px\", duration: 0.16, ease: \"power2.out\" }, 0.56);\n        tl.to(\"#txt1\", { x: 0, duration: 0.16, ease: \"power2.out\" }, 0.56);\n\n        tl.to(\"#gp2\", { left: \"1326px\", opacity: 1, duration: 0.36, ease: \"power3.out\" }, 0.82);\n        tl.to(\"#txt2\", { x: -14, opacity: 1, duration: 0.36, ease: \"power3.out\" }, 0.82);\n        tl.to(\"#gp2\", { left: \"1340px\", duration: 0.16, ease: \"power2.out\" }, 1.18);\n        tl.to(\"#txt2\", { x: 0, duration: 0.16, ease: \"power2.out\" }, 1.18);\n\n        tl.to(\"#render-progress\", { width: \"100%\", duration: 3.4, ease: \"none\" }, 0.82);\n        tl.to(\n          \"#status-dot\",\n          { scale: 1.45, duration: 0.18, ease: \"power2.out\", yoyo: true, repeat: 1 },\n          1.1,\n        );\n        tl.to(\n          \"#typing-dots span\",\n          {\n            opacity: 1,\n            y: -2,\n            duration: 0.22,\n            ease: \"power2.out\",\n            stagger: 0.08,\n            yoyo: true,\n            repeat: 5,\n          },\n          1.2,\n        );\n        tl.to(\"#gp2\", { top: \"+=10\", duration: 0.18, ease: \"power2.out\" }, 2.55);\n        tl.to(\"#txt2\", { y: \"+=10\", duration: 0.18, ease: \"power2.out\" }, 2.55);\n        tl.to(\"#gp2\", { top: \"-=10\", duration: 0.22, ease: \"power2.out\" }, 2.73);\n        tl.to(\"#txt2\", { y: \"-=10\", duration: 0.22, ease: \"power2.out\" }, 2.73);\n        tl.to(\"#reply-actions\", { y: 0, opacity: 1, duration: 0.24, ease: \"power2.out\" }, 2.72);\n        tl.to(\n          \"#status-dot\",\n          {\n            backgroundColor: \"#4ade80\",\n            boxShadow: \"0 0 18px rgba(74, 222, 128, 0.8)\",\n            duration: 0.15,\n          },\n          4.25,\n        );\n        tl.call(\n          function () {\n            renderStatus.textContent = \"complete\";\n            renderCopy.textContent = \"liquid-glass-notification.mp4 is ready.\";\n          },\n          null,\n          4.25,\n        );\n        tl.to(\n          \"#gp1\",\n          { top: \"-=8\", duration: 0.2, ease: \"power2.out\", yoyo: true, repeat: 1 },\n          4.25,\n        );\n        tl.to(\n          \"#txt1\",\n          { y: \"-=8\", duration: 0.2, ease: \"power2.out\", yoyo: true, repeat: 1 },\n          4.25,\n        );\n\n        tl.to(\"#gp1\", { left: \"1980px\", opacity: 0, duration: 0.42, ease: \"power2.in\" }, 6.72);\n        tl.to(\"#txt1\", { x: 640, opacity: 0, duration: 0.42, ease: \"power2.in\" }, 6.72);\n        tl.to(\"#gp2\", { left: \"1980px\", opacity: 0, duration: 0.42, ease: \"power2.in\" }, 6.9);\n        tl.to(\"#txt2\", { x: 640, opacity: 0, duration: 0.42, ease: \"power2.in\" }, 6.9);\n\n        window.__timelines[\"liquid-glass-notification\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/liquid-glass-widgets.json b/docs/public/catalog/blocks/liquid-glass-widgets.json
new file mode 100644
index 0000000000..69850546c9
--- /dev/null
+++ b/docs/public/catalog/blocks/liquid-glass-widgets.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Liquid Glass Widgets</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js\"></script>\n    <script src=\"data:text/javascript;base64,dmFyIExpcXVpZEdsYXNzID0gKCgpID0+IHsKICB2YXIgRSA9IE9iamVjdC5kZWZpbmVQcm9wZXJ0eTsKICB2YXIgRCA9IE9iamVjdC5nZXRPd25Qcm9wZXJ0eURlc2NyaXB0b3I7CiAgdmFyIHogPSBPYmplY3QuZ2V0T3duUHJvcGVydHlOYW1lczsKICB2YXIgTiA9IE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHk7CiAgdmFyIE8gPSAobSwgZSkgPT4gewogICAgICBmb3IgKHZhciB0IGluIGUpIEUobSwgdCwgeyBnZXQ6IGVbdF0sIGVudW1lcmFibGU6ICEwIH0pOwogICAgfSwKICAgIEggPSAobSwgZSwgdCwgcikgPT4gewogICAgICBpZiAoKGUgJiYgdHlwZW9mIGUgPT0gIm9iamVjdCIpIHx8IHR5cGVvZiBlID09ICJmdW5jdGlvbiIpCiAgICAgICAgZm9yIChsZXQgbiBvZiB6KGUpKQogICAgICAgICAgIU4uY2FsbChtLCBuKSAmJgogICAgICAgICAgICBuICE9PSB0ICYmCiAgICAgICAgICAgIEUobSwgbiwgeyBnZXQ6ICgpID0+IGVbbl0sIGVudW1lcmFibGU6ICEociA9IEQoZSwgbikpIHx8IHIuZW51bWVyYWJsZSB9KTsKICAgICAgcmV0dXJuIG07CiAgICB9OwogIHZhciBJID0gKG0pID0+IEgoRSh7fSwgIl9fZXNNb2R1bGUiLCB7IHZhbHVlOiAhMCB9KSwgbSk7CiAgdmFyIFkgPSB7fTsKICBPKFksIHsKICAgIENTU19QUk9QRVJUWV9NQVA6ICgpID0+IF8sCiAgICBERUZBVUxUUzogKCkgPT4gdywKICAgIEdsYXNzUmVuZGVyZXJHUFU6ICgpID0+IHksCiAgICBMaXF1aWRHbGFzc0NhbnZhczogKCkgPT4gUiwKICB9KTsKICB2YXIgdyA9IHsKICAgICAgYmx1ckFtb3VudDogMCwKICAgICAgcmVmcmFjdGlvbjogMC42OSwKICAgICAgY2hyb21BYmVycmF0aW9uOiAwLjA1LAogICAgICBlZGdlSGlnaGxpZ2h0OiAwLjA1LAogICAgICBzcGVjdWxhcjogMCwKICAgICAgZnJlc25lbDogMSwKICAgICAgZGlzdG9ydGlvbjogMCwKICAgICAgY29ybmVyUmFkaXVzOiA2NSwKICAgICAgelJhZGl1czogNDAsCiAgICAgIG9wYWNpdHk6IDEsCiAgICAgIHNhdHVyYXRpb246IDAsCiAgICAgIHRpbnRTdHJlbmd0aDogMCwKICAgICAgYnJpZ2h0bmVzczogMCwKICAgICAgc2hhZG93T3BhY2l0eTogMC4zLAogICAgICBzaGFkb3dTcHJlYWQ6IDEwLAogICAgICBzaGFkb3dPZmZzZXRZOiAxLAogICAgICBiZXZlbE1vZGU6IDAsCiAgICB9LAogICAgXyA9IHsKICAgICAgIi0tbGctYmx1ciI6ICJibHVyQW1vdW50IiwKICAgICAgIi0tbGctcmVmcmFjdGlvbiI6ICJyZWZyYWN0aW9uIiwKICAgICAgIi0tbGctY2hyb20tYWJlcnJhdGlvbiI6ICJjaHJvbUFiZXJyYXRpb24iLAogICAgICAiLS1sZy1lZGdlLWhpZ2hsaWdodCI6ICJlZGdlSGlnaGxpZ2h0IiwKICAgICAgIi0tbGctc3BlY3VsYXIiOiAic3BlY3VsYXIiLAogICAgICAiLS1sZy1mcmVzbmVsIjogImZyZXNuZWwiLAogICAgICAiLS1sZy1kaXN0b3J0aW9uIjogImRpc3RvcnRpb24iLAogICAgICAiLS1sZy1jb3JuZXItcmFkaXVzIjogImNvcm5lclJhZGl1cyIsCiAgICAgICItLWxnLXotcmFkaXVzIjogInpSYWRpdXMiLAogICAgICAiLS1sZy1vcGFjaXR5IjogIm9wYWNpdHkiLAogICAgICAiLS1sZy1zYXR1cmF0aW9uIjogInNhdHVyYXRpb24iLAogICAgICAiLS1sZy10aW50IjogInRpbnRTdHJlbmd0aCIsCiAgICAgICItLWxnLWJyaWdodG5lc3MiOiAiYnJpZ2h0bmVzcyIsCiAgICAgICItLWxnLXNoYWRvdy1vcGFjaXR5IjogInNoYWRvd09wYWNpdHkiLAogICAgICAiLS1sZy1zaGFkb3ctc3ByZWFkIjogInNoYWRvd1NwcmVhZCIsCiAgICAgICItLWxnLXNoYWRvdy1vZmZzZXQteSI6ICJzaGFkb3dPZmZzZXRZIiwKICAgICAgIi0tbGctYmV2ZWwtbW9kZSI6ICJiZXZlbE1vZGUiLAogICAgfSwKICAgIEwgPSA2LAogICAgVCA9IDIwOwogIHZhciBxID0gYC8vIEJsaXQgc2hhZGVyIC0gY29weSB0ZXh0dXJlIHdpdGggVVYgdHJhbnNmb3JtCgpzdHJ1Y3QgQmxpdFVuaWZvcm1zIHsKICBzY2FsZTogdmVjMmYsCiAgb2Zmc2V0OiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBCbGl0VW5pZm9ybXM7CkBncm91cCgwKSBAYmluZGluZygxKSB2YXIgdGV4U2FtcGxlcjogc2FtcGxlcjsKQGdyb3VwKDApIEBiaW5kaW5nKDIpIHZhciB0ZXg6IHRleHR1cmVfMmQ8ZjMyPjsKCnN0cnVjdCBWZXJ0ZXhPdXRwdXQgewogIEBidWlsdGluKHBvc2l0aW9uKSBwb3NpdGlvbjogdmVjNGYsCiAgQGxvY2F0aW9uKDApIHV2OiB2ZWMyZiwKfQoKQHZlcnRleApmbiB2ZXJ0ZXhNYWluKEBsb2NhdGlvbigwKSBwb3M6IHZlYzJmKSAtPiBWZXJ0ZXhPdXRwdXQgewogIHZhciBvdXQ6IFZlcnRleE91dHB1dDsKICBvdXQudXYgPSBwb3MgKiAwLjUgKyAwLjU7CiAgb3V0LnBvc2l0aW9uID0gdmVjNGYocG9zLCAwLjAsIDEuMCk7CiAgcmV0dXJuIG91dDsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIHJldHVybiB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKiB1LnNjYWxlICsgdS5vZmZzZXQpOwp9CmAsCiAgICBrID0gYC8vIEJsdXIgc2hhZGVyIC0gOS10YXAgR2F1c3NpYW4gYmx1ciAoc2luZ2xlIGRpcmVjdGlvbikKCnN0cnVjdCBCbHVyVW5pZm9ybXMgewogIGRpcjogdmVjMmYsCiAgX3BhZDogdmVjMmYsCn0KCkBncm91cCgwKSBAYmluZGluZygwKSB2YXI8dW5pZm9ybT4gdTogQmx1clVuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgdGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSB1djogdmVjMmYsCn0KCkB2ZXJ0ZXgKZm4gdmVydGV4TWFpbihAbG9jYXRpb24oMCkgcG9zOiB2ZWMyZikgLT4gVmVydGV4T3V0cHV0IHsKICB2YXIgb3V0OiBWZXJ0ZXhPdXRwdXQ7CiAgb3V0LnV2ID0gcG9zICogMC41ICsgMC41OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKHBvcywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCkBmcmFnbWVudApmbiBmcmFnbWVudE1haW4oaW46IFZlcnRleE91dHB1dCkgLT4gQGxvY2F0aW9uKDApIHZlYzRmIHsKICB2YXIgcyA9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51dikgKiAwLjIyNzAyNzsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogMS4wKSAqIDAuMTk0NTk0OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiAxLjApICogMC4xOTQ1OTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgKyB1LmRpciAqIDIuMCkgKiAwLjEyMTYyMjsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diAtIHUuZGlyICogMi4wKSAqIDAuMTIxNjIyOwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2ICsgdS5kaXIgKiAzLjApICogMC4wNTQwNTQ7CiAgcyArPSB0ZXh0dXJlU2FtcGxlKHRleCwgdGV4U2FtcGxlciwgaW4udXYgLSB1LmRpciAqIDMuMCkgKiAwLjA1NDA1NDsKICBzICs9IHRleHR1cmVTYW1wbGUodGV4LCB0ZXhTYW1wbGVyLCBpbi51diArIHUuZGlyICogNC4wKSAqIDAuMDE2MjE2OwogIHMgKz0gdGV4dHVyZVNhbXBsZSh0ZXgsIHRleFNhbXBsZXIsIGluLnV2IC0gdS5kaXIgKiA0LjApICogMC4wMTYyMTY7CiAgcmV0dXJuIHM7Cn0KYCwKICAgIFcgPSBgLy8gR2xhc3Mgc2hhZGVyIC0gdGhlIGNvcmUgbGlxdWlkIGdsYXNzIGVmZmVjdAoKc3RydWN0IEdsYXNzVW5pZm9ybXMgewogIGNlbnRlcjogdmVjMmYsCiAgc2l6ZTogdmVjMmYsCiAgcmVzOiB2ZWMyZiwKICByYWRpdXM6IGYzMiwKICBwYWQ6IGYzMiwKICByZWZyYWN0OiBmMzIsCiAgY2hyb21hOiBmMzIsCiAgZWRnZUhMOiBmMzIsCiAgc3BlYzogZjMyLAogIGZyZXNuZWw6IGYzMiwKICBkaXN0b3J0OiBmMzIsCiAgYWxwaGE6IGYzMiwKICBzYXQ6IGYzMiwKICB0aW50OiBmMzIsCiAgelJhZGl1czogZjMyLAogIGJyaWdodG5lc3M6IGYzMiwKICBzaGFkb3dBbHBoYTogZjMyLAogIHNoYWRvd1NwcmVhZDogZjMyLAogIHNoYWRvd09mZlk6IGYzMiwKICBiZXZlbE1vZGU6IGYzMiwKICBfcGFkOiB2ZWMyZiwKfQoKQGdyb3VwKDApIEBiaW5kaW5nKDApIHZhcjx1bmlmb3JtPiB1OiBHbGFzc1VuaWZvcm1zOwpAZ3JvdXAoMCkgQGJpbmRpbmcoMSkgdmFyIHRleFNhbXBsZXI6IHNhbXBsZXI7CkBncm91cCgwKSBAYmluZGluZygyKSB2YXIgYmdUZXg6IHRleHR1cmVfMmQ8ZjMyPjsKQGdyb3VwKDApIEBiaW5kaW5nKDMpIHZhciBibHVyVGV4OiB0ZXh0dXJlXzJkPGYzMj47CgpzdHJ1Y3QgVmVydGV4T3V0cHV0IHsKICBAYnVpbHRpbihwb3NpdGlvbikgcG9zaXRpb246IHZlYzRmLAogIEBsb2NhdGlvbigwKSBsb2NhbFB4OiB2ZWMyZiwKICBAbG9jYXRpb24oMSkgc2NyZWVuVVY6IHZlYzJmLAp9CgpAdmVydGV4CmZuIHZlcnRleE1haW4oQGxvY2F0aW9uKDApIHBvczogdmVjMmYpIC0+IFZlcnRleE91dHB1dCB7CiAgdmFyIG91dDogVmVydGV4T3V0cHV0OwogIGxldCB0b3RhbCA9IHUuc2l6ZSArIHZlYzJmKHUucGFkICogMi4wKTsKICBvdXQubG9jYWxQeCA9IHBvcyAqIHRvdGFsOwogIGxldCBweCA9IHUuY2VudGVyICsgcG9zICogdG90YWw7CiAgb3V0LnNjcmVlblVWID0gdmVjMmYocHgueCAvIHUucmVzLngsIDEuMCAtIHB4LnkgLyB1LnJlcy55KTsKICB2YXIgbmRjID0gKHB4IC8gdS5yZXMpICogMi4wIC0gMS4wOwogIG5kYy55ID0gLW5kYy55OwogIG91dC5wb3NpdGlvbiA9IHZlYzRmKG5kYywgMC4wLCAxLjApOwogIHJldHVybiBvdXQ7Cn0KCi8vIFJvdW5kZWQtcmVjdCBzaWduZWQgZGlzdGFuY2UKZm4gcnJTREYocDogdmVjMmYsIGI6IHZlYzJmLCByOiBmMzIpIC0+IGYzMiB7CiAgbGV0IHEgPSBhYnMocCkgLSBiICsgdmVjMmYocik7CiAgcmV0dXJuIG1pbihtYXgocS54LCBxLnkpLCAwLjApICsgbGVuZ3RoKG1heChxLCB2ZWMyZigwLjApKSkgLSByOwp9CgovLyBCZXZlbCBoZWlnaHQgZmllbGQKZm4gYmV2ZWxIZWlnaHQoZDogZjMyLCB6UjogZjMyKSAtPiBmMzIgewogIGlmIChkIDw9IDAuMCkgeyByZXR1cm4gMC4wOyB9CiAgaWYgKGQgPj0gelIpIHsgcmV0dXJuIHpSOyB9CiAgcmV0dXJuIHNxcnQoZCAqICgyLjAgKiB6UiAtIGQpKTsKfQoKZm4gaGFzaChwOiB2ZWMyZikgLT4gZjMyIHsKICByZXR1cm4gZnJhY3Qoc2luKGRvdChwLCB2ZWMyZigxMjcuMSwgMzExLjcpKSkgKiA0Mzc1OC41NDUzKTsKfQoKQGZyYWdtZW50CmZuIGZyYWdtZW50TWFpbihpbjogVmVydGV4T3V0cHV0KSAtPiBAbG9jYXRpb24oMCkgdmVjNGYgewogIGxldCBoYWxmXyA9IHUuc2l6ZSAqIDAuNTsKICBsZXQgciA9IG1pbih1LnJhZGl1cywgbWluKGhhbGZfLngsIGhhbGZfLnkpKTsKICBsZXQgc2RmID0gcnJTREYoaW4ubG9jYWxQeCwgaGFsZl8sIHIpOwoKICAvLyBBbnRpLWFsaWFzZWQgbWFzawogIGxldCBtYXNrID0gMS4wIC0gc21vb3Roc3RlcCgtMS41LCAwLjUsIHNkZik7CgogIGxldCBtYXhEID0gbWluKGhhbGZfLngsIGhhbGZfLnkpOwogIGxldCBpbnNpZGUgPSAtc2RmOwogIGxldCBlZGdlID0gc21vb3Roc3RlcChtYXhEICogMC4zNSwgMC4wLCBpbnNpZGUpOwoKICAvLyBTdXJmYWNlIG5vcm1hbCB2aWEgYmV2ZWwgaGVpZ2h0IGZpZWxkCiAgbGV0IHpSID0gdS56UmFkaXVzOwogIGxldCBlID0gMi4wOwogIGxldCBkQyA9IGluc2lkZTsKICBsZXQgZFIgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZEwgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKGUsIDAuMCksIGhhbGZfLCByKTsKICBsZXQgZFUgPSAtcnJTREYoaW4ubG9jYWxQeCArIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgZEQgPSAtcnJTREYoaW4ubG9jYWxQeCAtIHZlYzJmKDAuMCwgZSksIGhhbGZfLCByKTsKICBsZXQgaEMgPSBiZXZlbEhlaWdodChkQywgelIpOwogIGxldCBoUiA9IGJldmVsSGVpZ2h0KGRSLCB6Uik7CiAgbGV0IGhMID0gYmV2ZWxIZWlnaHQoZEwsIHpSKTsKICBsZXQgaFUgPSBiZXZlbEhlaWdodChkVSwgelIpOwogIGxldCBoRCA9IGJldmVsSGVpZ2h0KGRELCB6Uik7CiAgbGV0IGhHcmFkID0gdmVjMmYoaFIgLSBoTCwgaFUgLSBoRCkgLyAoMi4wICogZSk7CiAgbGV0IE4gPSBub3JtYWxpemUodmVjM2YoLWhHcmFkLCAxLjApKTsKCiAgbGV0IGRlcHRoID0gc21vb3Roc3RlcCgwLjAsIHpSLCBpbnNpZGUpOwoKICAvLyBSZWZyYWN0aW9uIC0gY29tcHV0ZSBib3RoIG1vZGVzIGFuZCBzZWxlY3QKICBsZXQgcHhUb1VWID0gdmVjMmYoMS4wLCAtMS4wKSAvIHUucmVzOwogIGxldCBpb3IgPSAxLjU7CiAgbGV0IHJlZnJQb3cgPSAxLjAgLSAxLjAgLyBpb3I7CiAgbGV0IHRoaWNrbmVzcyA9IGhDICogMi4wOwogIGxldCB0aGlja05vcm0gPSB0aGlja25lc3MgLyBtYXgoelIgKiAyLjAsIDEuMCk7CgogIC8vIEJpY29udmV4IG1vZGUKICBsZXQgZXhpdFJlZnIgPSBoR3JhZCAqIHJlZnJQb3c7CiAgbGV0IGVudHJ5UmVmciA9IGhHcmFkICogcmVmclBvdzsKICBsZXQgdGhyb3VnaFJlZnIgPSBlbnRyeVJlZnIgKiB0aGlja05vcm0gKiAwLjU7CiAgdmFyIHJlZnJQeEJpY29udmV4ID0gKGV4aXRSZWZyICsgZW50cnlSZWZyICsgdGhyb3VnaFJlZnIpICogdS5yZWZyYWN0ICogMzAuMDsKICBsZXQgY2VudGVyRGlyID0gLWluLmxvY2FsUHggLyBtYXgoaGFsZl8sIHZlYzJmKDEuMCkpOwogIHJlZnJQeEJpY29udmV4ICs9IGNlbnRlckRpciAqIHUucmVmcmFjdCAqIDQuMCAqIGRlcHRoOwoKICAvLyBEb21lIG1vZGUKICBsZXQgcmVmclB4RG9tZSA9IC1pbi5sb2NhbFB4ICogdS5yZWZyYWN0ICogZGVwdGggKiAwLjM1OwoKICAvLyBTZWxlY3QgYmFzZWQgb24gYmV2ZWwgbW9kZQogIGxldCByZWZyUHggPSBzZWxlY3QocmVmclB4Qmljb252ZXgsIHJlZnJQeERvbWUsIHUuYmV2ZWxNb2RlID49IDAuNSk7CiAgbGV0IHJlZnIgPSByZWZyUHggKiBweFRvVVY7CgogIC8vIE1pY3JvLWRpc3RvcnRpb24gbm9pc2UKICBsZXQgbnMgPSBpbi5sb2NhbFB4ICogMC4wODsKICBsZXQgYWJzUHhUb1VWID0gdmVjMmYoMS4wKSAvIHUucmVzOwogIGxldCBtaWNybyA9ICh2ZWMyZihoYXNoKG5zKSwgaGFzaChucyArIHZlYzJmKDM3LjApKSkgLSAwLjUpICogdS5kaXN0b3J0ICogNC4wICogYWJzUHhUb1VWOwoKICAvLyBDaHJvbWF0aWMgYWJlcnJhdGlvbgogIGxldCBjYVMgPSB1LmNocm9tYSAqIDE4LjAgKiAoZWRnZSAqIDAuNyArIDAuMykgKiAyLjA7CiAgbGV0IGNhRCA9IE4ueHkgKiBjYVMgKiBweFRvVVY7CiAgbGV0IGJhc2UgPSBpbi5zY3JlZW5VViArIHJlZnIgKyBtaWNybzsKCiAgLy8gU2FtcGxlIHRleHR1cmVzIChtdXN0IGJlIGluIHVuaWZvcm0gY29udHJvbCBmbG93KQogIGxldCBzaGFycFIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlICsgY2FEKS5yOwogIGxldCBzaGFycEcgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBzaGFycEIgPSB0ZXh0dXJlU2FtcGxlKGJnVGV4LCB0ZXhTYW1wbGVyLCBiYXNlIC0gY2FEKS5iOwogIGxldCBzaGFycCA9IHZlYzNmKHNoYXJwUiwgc2hhcnBHLCBzaGFycEIpOwoKICBsZXQgYmx1clIgPSB0ZXh0dXJlU2FtcGxlKGJsdXJUZXgsIHRleFNhbXBsZXIsIGJhc2UgKyBjYUQpLnI7CiAgbGV0IGJsdXJHID0gdGV4dHVyZVNhbXBsZShibHVyVGV4LCB0ZXhTYW1wbGVyLCBiYXNlKS5nOwogIGxldCBibHVyQiA9IHRleHR1cmVTYW1wbGUoYmx1clRleCwgdGV4U2FtcGxlciwgYmFzZSAtIGNhRCkuYjsKICBsZXQgYmx1ciA9IHZlYzNmKGJsdXJSLCBibHVyRywgYmx1ckIpOwoKICAvLyBFZGdlLXdlaWdodGVkIGJsdXIgbWl4CiAgbGV0IGVkZ2VNaXggPSAxLjAgLSBlZGdlICogMC4xNTsKICB2YXIgY29sID0gbWl4KHNoYXJwLCBibHVyLCBlZGdlTWl4KTsKCiAgLy8gQnJpZ2h0bmVzcwogIGNvbCAqPSAxLjAgKyB1LmJyaWdodG5lc3M7CgogIC8vIFNhdHVyYXRpb24KICBsZXQgbHVtID0gZG90KGNvbCwgdmVjM2YoMC4yOTksIDAuNTg3LCAwLjExNCkpOwogIGNvbCA9IG1peCh2ZWMzZihsdW0pLCBjb2wsIDEuMCArIHUuc2F0KTsKCiAgLy8gQ29vbCBnbGFzcyB0aW50CiAgY29sID0gbWl4KGNvbCwgY29sICogdmVjM2YoMC45MiwgMC45NSwgMS4wNSksIHUudGludCk7CiAgY29sICo9IDEuMCArIDAuMDYgKiBkZXB0aDsKCiAgLy8gRnJlc25lbAogIGxldCBmcmVzID0gcG93KDEuMCAtIGFicyhOLnopLCA0LjApICogdS5mcmVzbmVsOwoKICAvLyBTcGVjdWxhciBoaWdobGlnaHRzIChtdWx0aS1saWdodCBCbGlubi1QaG9uZykKICBsZXQgViA9IHZlYzNmKDAuMCwgMC4wLCAxLjApOwogIGxldCBMMSA9IG5vcm1hbGl6ZSh2ZWMzZigwLjQsIDAuNywgMS4wKSk7CiAgbGV0IEgxID0gbm9ybWFsaXplKEwxICsgVik7CiAgbGV0IHNwMSA9IHBvdyhtYXgoZG90KE4sIEgxKSwgMC4wKSwgOTAuMCk7CiAgbGV0IEwyID0gbm9ybWFsaXplKHZlYzNmKC0wLjMsIC0wLjUsIDEuMCkpOwogIGxldCBIMiA9IG5vcm1hbGl6ZShMMiArIFYpOwogIGxldCBzcDIgPSBwb3cobWF4KGRvdChOLCBIMiksIDAuMCksIDUwLjApICogMC4zOwogIGxldCBMMyA9IG5vcm1hbGl6ZSh2ZWMzZigwLjEsIDAuMywgMS4wKSk7CiAgbGV0IHNwQiA9IHBvdyhtYXgoZG90KE4sIEwzKSwgMC4wKSwgNi4wKSAqIDAuMTsKICBsZXQgTDQgPSBub3JtYWxpemUodmVjM2YoMC4wLCAwLjksIDAuNCkpOwogIGxldCBINCA9IG5vcm1hbGl6ZShMNCArIFYpOwogIGxldCBzcDQgPSBwb3cobWF4KGRvdChOLCBINCksIDAuMCksIDEyMC4wKSAqIDAuNjsKICBsZXQgdG90YWxTcGVjID0gKHNwMSArIHNwMiArIHNwQiArIHNwNCkgKiB1LnNwZWM7CgogIC8vIElubmVyIGJvcmRlciAvIHN0cm9rZSBoaWdobGlnaHQKICBsZXQgYm9yZGVyV2lkdGggPSAxLjU7CiAgbGV0IGlubmVyU3Ryb2tlID0gc21vb3Roc3RlcCgtYm9yZGVyV2lkdGggLSAxLjAsIC1ib3JkZXJXaWR0aCwgc2RmKQogICAgICAgICAgICAgICAgICAqICgxLjAgLSBzbW9vdGhzdGVwKC0xLjAsIDAuMCwgc2RmKSk7CiAgbGV0IHRvcEJpYXMgPSAwLjUgKyAwLjUgKiAoLWluLmxvY2FsUHgueSAvIGhhbGZfLnkpOwogIGxldCBpbm5lclN0cm9rZUZpbmFsID0gaW5uZXJTdHJva2UgKiAoMC40ICsgMC42ICogdG9wQmlhcyk7CgogIC8vIEVkZ2UgaGlnaGxpZ2h0ICYgaW5uZXIgZ2xvdwogIGxldCByaW0gPSBlZGdlICogdS5lZGdlSEwgKiAwLjIyOwogIGxldCBpbm5lckdsb3cgPSBzbW9vdGhzdGVwKDUuMCwgMC4wLCAtc2RmKSAqIHUuZWRnZUhMICogMC4xNTsKCiAgLy8gRW52aXJvbm1lbnQtbGlrZSByZWZsZWN0aW9uIChmYWtlKQogIGxldCBlbnZSZWZsID0gKE4ueSAqIDAuNSArIDAuNSkgKiBmcmVzICogMC4wODsKCiAgLy8gQ29tcG9zaXRlIGdsYXNzIGVmZmVjdAogIHZhciBmaW4gPSBjb2w7CiAgZmluICs9IHZlYzNmKHRvdGFsU3BlYyk7CiAgZmluICs9IHZlYzNmKHJpbSArIGlubmVyR2xvdyk7CiAgZmluICs9IHZlYzNmKGlubmVyU3Ryb2tlRmluYWwgKiB1LmVkZ2VITCAqIDAuNTUpOwogIGZpbiArPSB2ZWMzZihlbnZSZWZsKTsKICBmaW4gPSBtaXgoZmluLCB2ZWMzZigxLjApLCBmcmVzICogMC4yKTsKCiAgLy8gU2hhZG93IGNhbGN1bGF0aW9uIChvdXRzaWRlIHBhbmVsKQogIGxldCBzZGZTaGFkb3cgPSByclNERihpbi5sb2NhbFB4IC0gdmVjMmYoMC4wLCB1LnNoYWRvd09mZlkpLCBoYWxmXywgcik7CiAgbGV0IHNoYWRvd0QgPSBtYXgoc2RmU2hhZG93IC0gMS4wLCAwLjApOwogIGxldCBzcHJlYWQgPSBtYXgodS5zaGFkb3dTcHJlYWQsIDEuMCk7CiAgbGV0IGZhbGxvZmYgPSAxLjAgLyAoc3ByZWFkICogc3ByZWFkKTsKICBsZXQgb3V0ZXJTaGFkb3cgPSBleHAoLXNoYWRvd0QgKiBzaGFkb3dEICogZmFsbG9mZikgKiAwLjY1OwogIGxldCBjb250YWN0U2hhZG93ID0gZXhwKC1zaGFkb3dEICogMC4wOCAvIG1heChzcHJlYWQgKiAwLjA0LCAwLjAxKSkgKiAwLjM1OwogIGxldCBzaGFkb3cgPSAob3V0ZXJTaGFkb3cgKyBjb250YWN0U2hhZG93KSAqIHUuc2hhZG93QWxwaGE7CgogIC8vIFNlbGVjdCBiZXR3ZWVuIHNoYWRvdyAob3V0c2lkZSkgYW5kIGdsYXNzIChpbnNpZGUpCiAgbGV0IGlzT3V0c2lkZSA9IHNkZiA+IDAuMDsKICBsZXQgZmluYWxDb2xvciA9IHNlbGVjdChmaW4sIHZlYzNmKDAuMCksIGlzT3V0c2lkZSk7CiAgbGV0IGZpbmFsQWxwaGEgPSBzZWxlY3QobWFzayAqIHUuYWxwaGEsIHNoYWRvdywgaXNPdXRzaWRlKTsKCiAgcmV0dXJuIHZlYzRmKGZpbmFsQ29sb3IsIGZpbmFsQWxwaGEpOwp9CmAsCiAgICB5ID0gY2xhc3MgewogICAgICBjYW52YXM7CiAgICAgIGRldmljZSA9IG51bGw7CiAgICAgIGNvbnRleHQgPSBudWxsOwogICAgICBmb3JtYXQgPSAiYmdyYTh1bm9ybSI7CiAgICAgIGJsaXRQaXBlbGluZSA9IG51bGw7CiAgICAgIGJsdXJQaXBlbGluZSA9IG51bGw7CiAgICAgIGdsYXNzUGlwZWxpbmUgPSBudWxsOwogICAgICBxdWFkQnVmZmVyID0gbnVsbDsKICAgICAgcGFuZWxCdWZmZXIgPSBudWxsOwogICAgICBibGl0VW5pZm9ybUJ1ZmZlciA9IG51bGw7CiAgICAgIGJsdXJVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgZ2xhc3NVbmlmb3JtQnVmZmVyID0gbnVsbDsKICAgICAgc2FtcGxlciA9IG51bGw7CiAgICAgIHRhcmdldENhY2hlID0gbmV3IE1hcCgpOwogICAgICBhY3RpdmVUYXJnZXRzID0gbnVsbDsKICAgICAgYmdUZXh0dXJlID0gbnVsbDsKICAgICAgYmdUZXh0dXJlVmlldyA9IG51bGw7CiAgICAgIHdpZHRoID0gMDsKICAgICAgaGVpZ2h0ID0gMDsKICAgICAgX2luaXRQcm9taXNlID0gbnVsbDsKICAgICAgX2luaXRpYWxpemVkID0gITE7CiAgICAgIGNvbnN0cnVjdG9yKCkgewogICAgICAgICgodGhpcy5jYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgICAodGhpcy5jYW52YXMuc3R5bGUuZGlzcGxheSA9ICJub25lIiksCiAgICAgICAgICBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkKHRoaXMuY2FudmFzKSk7CiAgICAgIH0KICAgICAgYXN5bmMgaW5pdCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgID8gdGhpcy5faW5pdFByb21pc2UKICAgICAgICAgIDogKCh0aGlzLl9pbml0UHJvbWlzZSA9IHRoaXMuX2RvSW5pdCgpKSwgdGhpcy5faW5pdFByb21pc2UpOwogICAgICB9CiAgICAgIGFzeW5jIF9kb0luaXQoKSB7CiAgICAgICAgaWYgKCFuYXZpZ2F0b3IuZ3B1KSByZXR1cm4gKGNvbnNvbGUud2FybigiV2ViR1BVIG5vdCBzdXBwb3J0ZWQiKSwgITEpOwogICAgICAgIGxldCBlID0gYXdhaXQgbmF2aWdhdG9yLmdwdS5yZXF1ZXN0QWRhcHRlcigpOwogICAgICAgIHJldHVybiBlCiAgICAgICAgICA/ICgodGhpcy5kZXZpY2UgPSBhd2FpdCBlLnJlcXVlc3REZXZpY2UoKSksCiAgICAgICAgICAgIHRoaXMuZGV2aWNlCiAgICAgICAgICAgICAgPyAoKHRoaXMuY29udGV4dCA9IHRoaXMuY2FudmFzLmdldENvbnRleHQoIndlYmdwdSIpKSwKICAgICAgICAgICAgICAgIHRoaXMuY29udGV4dAogICAgICAgICAgICAgICAgICA/ICgodGhpcy5mb3JtYXQgPSBuYXZpZ2F0b3IuZ3B1LmdldFByZWZlcnJlZENhbnZhc0Zvcm1hdCgpKSwKICAgICAgICAgICAgICAgICAgICB0aGlzLmNvbnRleHQuY29uZmlndXJlKHsKICAgICAgICAgICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgICAgICAgICBmb3JtYXQ6IHRoaXMuZm9ybWF0LAogICAgICAgICAgICAgICAgICAgICAgYWxwaGFNb2RlOiAicHJlbXVsdGlwbGllZCIsCiAgICAgICAgICAgICAgICAgICAgfSksCiAgICAgICAgICAgICAgICAgICAgdGhpcy5faW5pdFBpcGVsaW5lcygpLAogICAgICAgICAgICAgICAgICAgIHRoaXMuX2luaXRCdWZmZXJzKCksCiAgICAgICAgICAgICAgICAgICAgKHRoaXMuX2luaXRpYWxpemVkID0gITApLAogICAgICAgICAgICAgICAgICAgICEwKQogICAgICAgICAgICAgICAgICA6IChjb25zb2xlLndhcm4oIkZhaWxlZCB0byBnZXQgV2ViR1BVIGNvbnRleHQiKSwgITEpKQogICAgICAgICAgICAgIDogKGNvbnNvbGUud2FybigiRmFpbGVkIHRvIGdldCBXZWJHUFUgZGV2aWNlIiksICExKSkKICAgICAgICAgIDogKGNvbnNvbGUud2FybigiTm8gV2ViR1BVIGFkYXB0ZXIgZm91bmQiKSwgITEpOwogICAgICB9CiAgICAgIGdldCBpbml0aWFsaXplZCgpIHsKICAgICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICAgIH0KICAgICAgX2luaXRQaXBlbGluZXMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICB0aGlzLnNhbXBsZXIgPSBlLmNyZWF0ZVNhbXBsZXIoewogICAgICAgICAgbWFnRmlsdGVyOiAibGluZWFyIiwKICAgICAgICAgIG1pbkZpbHRlcjogImxpbmVhciIsCiAgICAgICAgICBhZGRyZXNzTW9kZVU6ICJjbGFtcC10by1lZGdlIiwKICAgICAgICAgIGFkZHJlc3NNb2RlVjogImNsYW1wLXRvLWVkZ2UiLAogICAgICAgIH0pOwogICAgICAgIGxldCB0ID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBxIH0pLAogICAgICAgICAgciA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsaXRQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW3JdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogdCwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiB0LCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBuID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBrIH0pLAogICAgICAgICAgaSA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICB0aGlzLmJsdXJQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2ldIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogbiwKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsgbW9kdWxlOiBuLCBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwgdGFyZ2V0czogW3sgZm9ybWF0OiAicmdiYTh1bm9ybSIgfV0gfSwKICAgICAgICAgIHByaW1pdGl2ZTogeyB0b3BvbG9neTogInRyaWFuZ2xlLXN0cmlwIiB9LAogICAgICAgIH0pOwogICAgICAgIGxldCBzID0gZS5jcmVhdGVTaGFkZXJNb2R1bGUoeyBjb2RlOiBXIH0pLAogICAgICAgICAgbCA9IGUuY3JlYXRlQmluZEdyb3VwTGF5b3V0KHsKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGJpbmRpbmc6IDAsCiAgICAgICAgICAgICAgICB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5WRVJURVggfCBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwKICAgICAgICAgICAgICAgIGJ1ZmZlcjogeyB0eXBlOiAidW5pZm9ybSIgfSwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHNhbXBsZXI6IHsgdHlwZTogImZpbHRlcmluZyIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgdmlzaWJpbGl0eTogR1BVU2hhZGVyU3RhZ2UuRlJBR01FTlQsIHRleHR1cmU6IHsgc2FtcGxlVHlwZTogImZsb2F0IiB9IH0sCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAzLCB2aXNpYmlsaXR5OiBHUFVTaGFkZXJTdGFnZS5GUkFHTUVOVCwgdGV4dHVyZTogeyBzYW1wbGVUeXBlOiAiZmxvYXQiIH0gfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIHRoaXMuZ2xhc3NQaXBlbGluZSA9IGUuY3JlYXRlUmVuZGVyUGlwZWxpbmUoewogICAgICAgICAgbGF5b3V0OiBlLmNyZWF0ZVBpcGVsaW5lTGF5b3V0KHsgYmluZEdyb3VwTGF5b3V0czogW2xdIH0pLAogICAgICAgICAgdmVydGV4OiB7CiAgICAgICAgICAgIG1vZHVsZTogcywKICAgICAgICAgICAgZW50cnlQb2ludDogInZlcnRleE1haW4iLAogICAgICAgICAgICBidWZmZXJzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgYXJyYXlTdHJpZGU6IDgsCiAgICAgICAgICAgICAgICBhdHRyaWJ1dGVzOiBbeyBzaGFkZXJMb2NhdGlvbjogMCwgb2Zmc2V0OiAwLCBmb3JtYXQ6ICJmbG9hdDMyeDIiIH1dLAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9LAogICAgICAgICAgZnJhZ21lbnQ6IHsKICAgICAgICAgICAgbW9kdWxlOiBzLAogICAgICAgICAgICBlbnRyeVBvaW50OiAiZnJhZ21lbnRNYWluIiwKICAgICAgICAgICAgdGFyZ2V0czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIGZvcm1hdDogdGhpcy5mb3JtYXQsCiAgICAgICAgICAgICAgICBibGVuZDogewogICAgICAgICAgICAgICAgICBjb2xvcjogewogICAgICAgICAgICAgICAgICAgIHNyY0ZhY3RvcjogInNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsCiAgICAgICAgICAgICAgICAgICAgb3BlcmF0aW9uOiAiYWRkIiwKICAgICAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgICAgICAgYWxwaGE6IHsgc3JjRmFjdG9yOiAib25lIiwgZHN0RmFjdG9yOiAib25lLW1pbnVzLXNyYy1hbHBoYSIsIG9wZXJhdGlvbjogImFkZCIgfSwKICAgICAgICAgICAgICAgIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0sCiAgICAgICAgICBwcmltaXRpdmU6IHsgdG9wb2xvZ3k6ICJ0cmlhbmdsZS1zdHJpcCIgfSwKICAgICAgICB9KTsKICAgICAgfQogICAgICBfaW5pdEJ1ZmZlcnMoKSB7CiAgICAgICAgbGV0IGUgPSB0aGlzLmRldmljZTsKICAgICAgICAoKHRoaXMucXVhZEJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlZFUlRFWCwKICAgICAgICAgIG1hcHBlZEF0Q3JlYXRpb246ICEwLAogICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5xdWFkQnVmZmVyLmdldE1hcHBlZFJhbmdlKCkpLnNldChbLTEsIC0xLCAxLCAtMSwgLTEsIDEsIDEsIDFdKSwKICAgICAgICAgIHRoaXMucXVhZEJ1ZmZlci51bm1hcCgpLAogICAgICAgICAgKHRoaXMucGFuZWxCdWZmZXIgPSBlLmNyZWF0ZUJ1ZmZlcih7CiAgICAgICAgICAgIHNpemU6IDMyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVkVSVEVYLAogICAgICAgICAgICBtYXBwZWRBdENyZWF0aW9uOiAhMCwKICAgICAgICAgIH0pKSwKICAgICAgICAgIG5ldyBGbG9hdDMyQXJyYXkodGhpcy5wYW5lbEJ1ZmZlci5nZXRNYXBwZWRSYW5nZSgpKS5zZXQoWwogICAgICAgICAgICAtMC41LCAtMC41LCAwLjUsIC0wLjUsIC0wLjUsIDAuNSwgMC41LCAwLjUsCiAgICAgICAgICBdKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIudW5tYXAoKSwKICAgICAgICAgICh0aGlzLmJsaXRVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmJsdXJVbmlmb3JtQnVmZmVyID0gZS5jcmVhdGVCdWZmZXIoewogICAgICAgICAgICBzaXplOiAxNiwKICAgICAgICAgICAgdXNhZ2U6IEdQVUJ1ZmZlclVzYWdlLlVOSUZPUk0gfCBHUFVCdWZmZXJVc2FnZS5DT1BZX0RTVCwKICAgICAgICAgIH0pKSwKICAgICAgICAgICh0aGlzLmdsYXNzVW5pZm9ybUJ1ZmZlciA9IGUuY3JlYXRlQnVmZmVyKHsKICAgICAgICAgICAgc2l6ZTogMTEyLAogICAgICAgICAgICB1c2FnZTogR1BVQnVmZmVyVXNhZ2UuVU5JRk9STSB8IEdQVUJ1ZmZlclVzYWdlLkNPUFlfRFNULAogICAgICAgICAgfSkpKTsKICAgICAgfQogICAgICByZXNpemUoZSwgdCkgewogICAgICAgIGlmICghKHRoaXMud2lkdGggPT09IGUgJiYgdGhpcy5oZWlnaHQgPT09IHQpKSB7CiAgICAgICAgICAoKHRoaXMud2lkdGggPSBlKSwgKHRoaXMuaGVpZ2h0ID0gdCkpOwogICAgICAgICAgZm9yIChsZXQgciBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KHIpOwogICAgICAgICAgKHRoaXMudGFyZ2V0Q2FjaGUuY2xlYXIoKSwgKHRoaXMuYWN0aXZlVGFyZ2V0cyA9IG51bGwpKTsKICAgICAgICB9CiAgICAgIH0KICAgICAgdXBsb2FkQW5kQmx1cihlLCB0LCByLCBuLCBpLCBzKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuX3NldEFjdGl2ZVNpemUobiwgaSkpIHJldHVybjsKICAgICAgICBsZXQgbCA9IHRoaXMuZGV2aWNlLAogICAgICAgICAgYSA9IHRoaXMud2lkdGgsCiAgICAgICAgICB1ID0gdGhpcy5oZWlnaHQsCiAgICAgICAgICBvID0gdGhpcy5hY3RpdmVUYXJnZXRzLAogICAgICAgICAgZCA9IGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQoImNhbnZhcyIpOwogICAgICAgICgoZC53aWR0aCA9IGEpLAogICAgICAgICAgKGQuaGVpZ2h0ID0gdSksCiAgICAgICAgICBkLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKGUsIC10LCAtciksCiAgICAgICAgICAoIXRoaXMuYmdUZXh0dXJlIHx8IHRoaXMuYmdUZXh0dXJlLndpZHRoICE9PSBhIHx8IHRoaXMuYmdUZXh0dXJlLmhlaWdodCAhPT0gdSkgJiYKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlICYmIHRoaXMuYmdUZXh0dXJlLmRlc3Ryb3koKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlID0gbC5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgICAgICBzaXplOiBbYSwgdV0sCiAgICAgICAgICAgICAgZm9ybWF0OiAicmdiYTh1bm9ybSIsCiAgICAgICAgICAgICAgdXNhZ2U6CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuVEVYVFVSRV9CSU5ESU5HIHwKICAgICAgICAgICAgICAgIEdQVVRleHR1cmVVc2FnZS5DT1BZX0RTVCB8CiAgICAgICAgICAgICAgICBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgICAgIH0pKSwKICAgICAgICAgICAgKHRoaXMuYmdUZXh0dXJlVmlldyA9IHRoaXMuYmdUZXh0dXJlLmNyZWF0ZVZpZXcoKSkpLAogICAgICAgICAgbC5xdWV1ZS5jb3B5RXh0ZXJuYWxJbWFnZVRvVGV4dHVyZSgKICAgICAgICAgICAgeyBzb3VyY2U6IGQsIGZsaXBZOiAhMCB9LAogICAgICAgICAgICB7IHRleHR1cmU6IHRoaXMuYmdUZXh0dXJlIH0sCiAgICAgICAgICAgIFthLCB1XSwKICAgICAgICAgICkpOwogICAgICAgIGxldCBmID0gbC5jcmVhdGVDb21tYW5kRW5jb2RlcigpOwogICAgICAgIHRoaXMuX2JsaXRQYXNzKGYsIHRoaXMuYmdUZXh0dXJlVmlldywgby5iZy52aWV3LCBhLCB1LCAxLCAxLCAwLCAwKTsKICAgICAgICBsZXQgaCA9IG8uYmx1ckEudywKICAgICAgICAgIGIgPSBvLmJsdXJBLmg7CiAgICAgICAgaWYgKCh0aGlzLl9ibGl0UGFzcyhmLCBvLmJnLnZpZXcsIG8uYmx1ckEudmlldywgaCwgYiwgMSwgMSwgMCwgMCksIHMgPiAwKSkgewogICAgICAgICAgbGV0IGcgPSBzICogMi41OwogICAgICAgICAgZm9yIChsZXQgcCA9IDA7IHAgPCBMOyBwKyspCiAgICAgICAgICAgICh0aGlzLl9ibHVyUGFzcyhmLCBvLmJsdXJBLnZpZXcsIG8uYmx1ckIudmlldywgaCwgYiwgZyAvIGgsIDApLAogICAgICAgICAgICAgIHRoaXMuX2JsdXJQYXNzKGYsIG8uYmx1ckIudmlldywgby5ibHVyQS52aWV3LCBoLCBiLCAwLCBnIC8gYikpOwogICAgICAgIH0KICAgICAgICBsLnF1ZXVlLnN1Ym1pdChbZi5maW5pc2goKV0pOwogICAgICB9CiAgICAgIF9ibGl0UGFzcyhlLCB0LCByLCBuLCBpLCBzLCBsLCBhLCB1KSB7CiAgICAgICAgbGV0IG8gPSB0aGlzLmRldmljZTsKICAgICAgICBvLnF1ZXVlLndyaXRlQnVmZmVyKHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIsIDAsIG5ldyBGbG9hdDMyQXJyYXkoW3MsIGwsIGEsIHVdKSk7CiAgICAgICAgbGV0IGQgPSBvLmNyZWF0ZUJpbmRHcm91cCh7CiAgICAgICAgICAgIGxheW91dDogdGhpcy5ibGl0UGlwZWxpbmUuZ2V0QmluZEdyb3VwTGF5b3V0KDApLAogICAgICAgICAgICBlbnRyaWVzOiBbCiAgICAgICAgICAgICAgeyBiaW5kaW5nOiAwLCByZXNvdXJjZTogeyBidWZmZXI6IHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IHQgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pLAogICAgICAgICAgYyA9IGUuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHIsCiAgICAgICAgICAgICAgICBsb2FkT3A6ICJjbGVhciIsCiAgICAgICAgICAgICAgICBzdG9yZU9wOiAic3RvcmUiLAogICAgICAgICAgICAgICAgY2xlYXJWYWx1ZTogeyByOiAwLCBnOiAwLCBiOiAwLCBhOiAwIH0sCiAgICAgICAgICAgICAgfSwKICAgICAgICAgICAgXSwKICAgICAgICAgIH0pOwogICAgICAgIChjLnNldFBpcGVsaW5lKHRoaXMuYmxpdFBpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIGQpLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5xdWFkQnVmZmVyKSwKICAgICAgICAgIGMuc2V0Vmlld3BvcnQoMCwgMCwgbiwgaSwgMCwgMSksCiAgICAgICAgICBjLmRyYXcoNCksCiAgICAgICAgICBjLmVuZCgpKTsKICAgICAgfQogICAgICBfYmx1clBhc3MoZSwgdCwgciwgbiwgaSwgcywgbCkgewogICAgICAgIGxldCBhID0gdGhpcy5kZXZpY2U7CiAgICAgICAgYS5xdWV1ZS53cml0ZUJ1ZmZlcih0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLCAwLCBuZXcgRmxvYXQzMkFycmF5KFtzLCBsLCAwLCAwXSkpOwogICAgICAgIGxldCB1ID0gYS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuYmx1clBpcGVsaW5lLmdldEJpbmRHcm91cExheW91dCgwKSwKICAgICAgICAgICAgZW50cmllczogWwogICAgICAgICAgICAgIHsgYmluZGluZzogMCwgcmVzb3VyY2U6IHsgYnVmZmVyOiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyIH0gfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDEsIHJlc291cmNlOiB0aGlzLnNhbXBsZXIgfSwKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDIsIHJlc291cmNlOiB0IH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KSwKICAgICAgICAgIG8gPSBlLmJlZ2luUmVuZGVyUGFzcyh7CiAgICAgICAgICAgIGNvbG9yQXR0YWNobWVudHM6IFsKICAgICAgICAgICAgICB7CiAgICAgICAgICAgICAgICB2aWV3OiByLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAoby5zZXRQaXBlbGluZSh0aGlzLmJsdXJQaXBlbGluZSksCiAgICAgICAgICBvLnNldEJpbmRHcm91cCgwLCB1KSwKICAgICAgICAgIG8uc2V0VmVydGV4QnVmZmVyKDAsIHRoaXMucXVhZEJ1ZmZlciksCiAgICAgICAgICBvLnNldFZpZXdwb3J0KDAsIDAsIG4sIGksIDAsIDEpLAogICAgICAgICAgby5kcmF3KDQpLAogICAgICAgICAgby5lbmQoKSk7CiAgICAgIH0KICAgICAgcmVuZGVyR2xhc3NQYW5lbChlLCB0LCByLCBuKSB7CiAgICAgICAgaWYgKCF0aGlzLl9pbml0aWFsaXplZCB8fCAhdGhpcy5kZXZpY2UgfHwgIXRoaXMuY29udGV4dCkgcmV0dXJuOwogICAgICAgIGxldCBpID0gdGhpcy5kZXZpY2UsCiAgICAgICAgICBzID0gdGhpcy53aWR0aCwKICAgICAgICAgIGwgPSB0aGlzLmhlaWdodCwKICAgICAgICAgIGEgPSB0aGlzLmFjdGl2ZVRhcmdldHMsCiAgICAgICAgICB1ID0gbmV3IEZsb2F0MzJBcnJheShbCiAgICAgICAgICAgIHMgKiAwLjUsCiAgICAgICAgICAgIGwgKiAwLjUsCiAgICAgICAgICAgIHQgKiBuLAogICAgICAgICAgICByICogbiwKICAgICAgICAgICAgcywKICAgICAgICAgICAgbCwKICAgICAgICAgICAgZS5jb3JuZXJSYWRpdXMgKiBuLAogICAgICAgICAgICBUICogbiwKICAgICAgICAgICAgZS5yZWZyYWN0aW9uLAogICAgICAgICAgICBlLmNocm9tQWJlcnJhdGlvbiwKICAgICAgICAgICAgZS5lZGdlSGlnaGxpZ2h0LAogICAgICAgICAgICBlLnNwZWN1bGFyLAogICAgICAgICAgICBlLmZyZXNuZWwsCiAgICAgICAgICAgIGUuZGlzdG9ydGlvbiwKICAgICAgICAgICAgZS5vcGFjaXR5LAogICAgICAgICAgICBlLnNhdHVyYXRpb24sCiAgICAgICAgICAgIGUudGludFN0cmVuZ3RoLAogICAgICAgICAgICBlLnpSYWRpdXMgKiBuLAogICAgICAgICAgICBlLmJyaWdodG5lc3MsCiAgICAgICAgICAgIGUuc2hhZG93T3BhY2l0eSwKICAgICAgICAgICAgZS5zaGFkb3dTcHJlYWQgKiBuLAogICAgICAgICAgICBlLnNoYWRvd09mZnNldFkgKiBuLAogICAgICAgICAgICBlLmJldmVsTW9kZSwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgICAgMCwKICAgICAgICAgIF0pOwogICAgICAgIGkucXVldWUud3JpdGVCdWZmZXIodGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIsIDAsIHUpOwogICAgICAgIGxldCBvID0gaS5jcmVhdGVCaW5kR3JvdXAoewogICAgICAgICAgICBsYXlvdXQ6IHRoaXMuZ2xhc3NQaXBlbGluZS5nZXRCaW5kR3JvdXBMYXlvdXQoMCksCiAgICAgICAgICAgIGVudHJpZXM6IFsKICAgICAgICAgICAgICB7IGJpbmRpbmc6IDAsIHJlc291cmNlOiB7IGJ1ZmZlcjogdGhpcy5nbGFzc1VuaWZvcm1CdWZmZXIgfSB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMSwgcmVzb3VyY2U6IHRoaXMuc2FtcGxlciB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMiwgcmVzb3VyY2U6IGEuYmcudmlldyB9LAogICAgICAgICAgICAgIHsgYmluZGluZzogMywgcmVzb3VyY2U6IGEuYmx1ckEudmlldyB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSksCiAgICAgICAgICBkID0gaS5jcmVhdGVDb21tYW5kRW5jb2RlcigpLAogICAgICAgICAgYyA9IGQuYmVnaW5SZW5kZXJQYXNzKHsKICAgICAgICAgICAgY29sb3JBdHRhY2htZW50czogWwogICAgICAgICAgICAgIHsKICAgICAgICAgICAgICAgIHZpZXc6IHRoaXMuY29udGV4dC5nZXRDdXJyZW50VGV4dHVyZSgpLmNyZWF0ZVZpZXcoKSwKICAgICAgICAgICAgICAgIGxvYWRPcDogImxvYWQiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICB9LAogICAgICAgICAgICBdLAogICAgICAgICAgfSk7CiAgICAgICAgKGMuc2V0UGlwZWxpbmUodGhpcy5nbGFzc1BpcGVsaW5lKSwKICAgICAgICAgIGMuc2V0QmluZEdyb3VwKDAsIG8pLAogICAgICAgICAgYy5zZXRWZXJ0ZXhCdWZmZXIoMCwgdGhpcy5wYW5lbEJ1ZmZlciksCiAgICAgICAgICBjLnNldFZpZXdwb3J0KDAsIDAsIHMsIGwsIDAsIDEpLAogICAgICAgICAgYy5kcmF3KDQpLAogICAgICAgICAgYy5lbmQoKSwKICAgICAgICAgIGkucXVldWUuc3VibWl0KFtkLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGNsZWFyKCkgewogICAgICAgIGlmICghdGhpcy5faW5pdGlhbGl6ZWQgfHwgIXRoaXMuZGV2aWNlIHx8ICF0aGlzLmNvbnRleHQpIHJldHVybjsKICAgICAgICBsZXQgZSA9IHRoaXMuZGV2aWNlLmNyZWF0ZUNvbW1hbmRFbmNvZGVyKCksCiAgICAgICAgICB0ID0gZS5iZWdpblJlbmRlclBhc3MoewogICAgICAgICAgICBjb2xvckF0dGFjaG1lbnRzOiBbCiAgICAgICAgICAgICAgewogICAgICAgICAgICAgICAgdmlldzogdGhpcy5jb250ZXh0LmdldEN1cnJlbnRUZXh0dXJlKCkuY3JlYXRlVmlldygpLAogICAgICAgICAgICAgICAgbG9hZE9wOiAiY2xlYXIiLAogICAgICAgICAgICAgICAgc3RvcmVPcDogInN0b3JlIiwKICAgICAgICAgICAgICAgIGNsZWFyVmFsdWU6IHsgcjogMCwgZzogMCwgYjogMCwgYTogMCB9LAogICAgICAgICAgICAgIH0sCiAgICAgICAgICAgIF0sCiAgICAgICAgICB9KTsKICAgICAgICAodC5zZXRWaWV3cG9ydCgwLCAwLCB0aGlzLndpZHRoLCB0aGlzLmhlaWdodCwgMCwgMSksCiAgICAgICAgICB0LmVuZCgpLAogICAgICAgICAgdGhpcy5kZXZpY2UucXVldWUuc3VibWl0KFtlLmZpbmlzaCgpXSkpOwogICAgICB9CiAgICAgIGRlc3Ryb3koKSB7CiAgICAgICAgZm9yIChsZXQgZSBvZiB0aGlzLnRhcmdldENhY2hlLnZhbHVlcygpKSB0aGlzLl9mcmVlVGFyZ2V0U2V0KGUpOwogICAgICAgICh0aGlzLnRhcmdldENhY2hlLmNsZWFyKCksCiAgICAgICAgICB0aGlzLmJnVGV4dHVyZSAmJiB0aGlzLmJnVGV4dHVyZS5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLnF1YWRCdWZmZXIgJiYgdGhpcy5xdWFkQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMucGFuZWxCdWZmZXIgJiYgdGhpcy5wYW5lbEJ1ZmZlci5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmJsaXRVbmlmb3JtQnVmZmVyICYmIHRoaXMuYmxpdFVuaWZvcm1CdWZmZXIuZGVzdHJveSgpLAogICAgICAgICAgdGhpcy5ibHVyVW5pZm9ybUJ1ZmZlciAmJiB0aGlzLmJsdXJVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyICYmIHRoaXMuZ2xhc3NVbmlmb3JtQnVmZmVyLmRlc3Ryb3koKSwKICAgICAgICAgIHRoaXMuZGV2aWNlPy5kZXN0cm95KCksCiAgICAgICAgICB0aGlzLmNhbnZhcy5yZW1vdmUoKSk7CiAgICAgIH0KICAgICAgX3NldEFjdGl2ZVNpemUoZSwgdCkgewogICAgICAgIGlmIChlIDw9IDAgfHwgdCA8PSAwKSByZXR1cm4gITE7CiAgICAgICAgKCh0aGlzLndpZHRoID0gZSksCiAgICAgICAgICAodGhpcy5oZWlnaHQgPSB0KSwKICAgICAgICAgICh0aGlzLmNhbnZhcy53aWR0aCA8IGUgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IDwgdCkgJiYKICAgICAgICAgICAgKCh0aGlzLmNhbnZhcy53aWR0aCA9IE1hdGgubWF4KHRoaXMuY2FudmFzLndpZHRoLCBlKSksCiAgICAgICAgICAgICh0aGlzLmNhbnZhcy5oZWlnaHQgPSBNYXRoLm1heCh0aGlzLmNhbnZhcy5oZWlnaHQsIHQpKSwKICAgICAgICAgICAgdGhpcy5jb250ZXh0Py5jb25maWd1cmUoewogICAgICAgICAgICAgIGRldmljZTogdGhpcy5kZXZpY2UsCiAgICAgICAgICAgICAgZm9ybWF0OiB0aGlzLmZvcm1hdCwKICAgICAgICAgICAgICBhbHBoYU1vZGU6ICJwcmVtdWx0aXBsaWVkIiwKICAgICAgICAgICAgfSkpKTsKICAgICAgICBsZXQgciA9IGAke2V9eCR7dH1gLAogICAgICAgICAgbiA9IHRoaXMudGFyZ2V0Q2FjaGUuZ2V0KHIpOwogICAgICAgIHJldHVybiAoCiAgICAgICAgICBuIHx8CiAgICAgICAgICAgICgobiA9IHsKICAgICAgICAgICAgICBiZzogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQTogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgICBibHVyQjogdGhpcy5fbWFrZVRhcmdldChlLCB0KSwKICAgICAgICAgICAgfSksCiAgICAgICAgICAgIHRoaXMudGFyZ2V0Q2FjaGUuc2V0KHIsIG4pKSwKICAgICAgICAgICh0aGlzLmFjdGl2ZVRhcmdldHMgPSBuKSwKICAgICAgICAgICEwCiAgICAgICAgKTsKICAgICAgfQogICAgICBfbWFrZVRhcmdldChlLCB0KSB7CiAgICAgICAgbGV0IHIgPSB0aGlzLmRldmljZS5jcmVhdGVUZXh0dXJlKHsKICAgICAgICAgIHNpemU6IFtlLCB0XSwKICAgICAgICAgIGZvcm1hdDogInJnYmE4dW5vcm0iLAogICAgICAgICAgdXNhZ2U6IEdQVVRleHR1cmVVc2FnZS5URVhUVVJFX0JJTkRJTkcgfCBHUFVUZXh0dXJlVXNhZ2UuUkVOREVSX0FUVEFDSE1FTlQsCiAgICAgICAgfSk7CiAgICAgICAgcmV0dXJuIHsgdGV4dHVyZTogciwgdmlldzogci5jcmVhdGVWaWV3KCksIHc6IGUsIGg6IHQgfTsKICAgICAgfQogICAgICBfZnJlZVRhcmdldChlKSB7CiAgICAgICAgZSAmJiBlLnRleHR1cmUuZGVzdHJveSgpOwogICAgICB9CiAgICAgIF9mcmVlVGFyZ2V0U2V0KGUpIHsKICAgICAgICAodGhpcy5fZnJlZVRhcmdldChlLmJnKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJBKSwgdGhpcy5fZnJlZVRhcmdldChlLmJsdXJCKSk7CiAgICAgIH0KICAgIH07CiAgdmFyIFIgPSBjbGFzcyB7CiAgICBjYW52YXM7CiAgICBjdHg7CiAgICByZW5kZXJlcjsKICAgIHNjZW5lQ2FudmFzOwogICAgc2NlbmVDdHg7CiAgICBkcmF3RWxlbWVudEltYWdlOwogICAgX2luaXRQcm9taXNlOwogICAgX2luaXRpYWxpemVkID0gITE7CiAgICBjb25zdHJ1Y3RvcihlKSB7CiAgICAgICgodGhpcy5jYW52YXMgPSBlKSwKICAgICAgICAodGhpcy5jdHggPSBlLmdldENvbnRleHQoIjJkIikpLAogICAgICAgICh0aGlzLnJlbmRlcmVyID0gbmV3IHkoKSksCiAgICAgICAgKHRoaXMuc2NlbmVDYW52YXMgPSBkb2N1bWVudC5jcmVhdGVFbGVtZW50KCJjYW52YXMiKSksCiAgICAgICAgKHRoaXMuc2NlbmVDdHggPSB0aGlzLnNjZW5lQ2FudmFzLmdldENvbnRleHQoIjJkIikpKTsKICAgICAgbGV0IHQgPSB0aGlzLmN0eDsKICAgICAgKCh0aGlzLmRyYXdFbGVtZW50SW1hZ2UgPSB0LmRyYXdFbGVtZW50SW1hZ2U/LmJpbmQodCkgPz8gdC5kcmF3RWxlbWVudD8uYmluZCh0KSA/PyBudWxsKSwKICAgICAgICAodGhpcy5faW5pdFByb21pc2UgPSB0aGlzLl9pbml0V2ViR1BVKCkpKTsKICAgIH0KICAgIGFzeW5jIF9pbml0V2ViR1BVKCkgewogICAgICB0cnkgewogICAgICAgIHJldHVybiAoYXdhaXQgdGhpcy5yZW5kZXJlci5pbml0KCkpCiAgICAgICAgICA/ICgodGhpcy5faW5pdGlhbGl6ZWQgPSAhMCksIGNvbnNvbGUubG9nKCJMaXF1aWRHbGFzczogV2ViR1BVIHJlbmRlcmVyIGluaXRpYWxpemVkIiksICEwKQogICAgICAgICAgOiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBub3QgYXZhaWxhYmxlIiksICExKTsKICAgICAgfSBjYXRjaCAoZSkgewogICAgICAgIHJldHVybiAoY29uc29sZS5lcnJvcigiTGlxdWlkR2xhc3M6IFdlYkdQVSBpbml0IGZhaWxlZCIsIGUpLCAhMSk7CiAgICAgIH0KICAgIH0KICAgIGdldCBpc1JlYWR5KCkgewogICAgICByZXR1cm4gdGhpcy5faW5pdGlhbGl6ZWQ7CiAgICB9CiAgICBhc3luYyB3YWl0Rm9ySW5pdCgpIHsKICAgICAgcmV0dXJuIHRoaXMuX2luaXRQcm9taXNlOwogICAgfQogICAgcmVuZGVyKCkgewogICAgICBsZXQgZSA9IHRoaXMuY2FudmFzLndpZHRoLAogICAgICAgIHQgPSB0aGlzLmNhbnZhcy5oZWlnaHQ7CiAgICAgIGlmIChlID09PSAwIHx8IHQgPT09IDAgfHwgIXRoaXMuZHJhd0VsZW1lbnRJbWFnZSB8fCAhdGhpcy5faW5pdGlhbGl6ZWQpIHJldHVybjsKICAgICAgdGhpcy5jdHguY2xlYXJSZWN0KDAsIDAsIGUsIHQpOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSBBcnJheS5mcm9tKHRoaXMuY2FudmFzLmNoaWxkcmVuKSwKICAgICAgICBzID0gQXJyYXkuZnJvbSh0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIikpLAogICAgICAgIGwgPSBuZXcgU2V0KHMpOwogICAgICBpLmxlbmd0aCA9PT0gMCAmJgogICAgICAgICF0aGlzLl9fbGdfd2Fybl9lbXB0eSAmJgogICAgICAgIChjb25zb2xlLndhcm4oIkxpcXVpZEdsYXNzOiBObyBjaGlsZHJlbiBmb3VuZCBpbnNpZGUgdGhlIGNhbnZhcyB0byByZW5kZXIuIiksCiAgICAgICAgKHRoaXMuX19sZ193YXJuX2VtcHR5ID0gITApKTsKICAgICAgZm9yIChsZXQgYSBvZiBpKQogICAgICAgIGlmICghbC5oYXMoYSkpIHsKICAgICAgICAgIGxldCB1ID0gYSwKICAgICAgICAgICAgbyA9IHRoaXMuX2dldEVsZW1lbnRQb3NpdGlvbih1LCBuKTsKICAgICAgICAgIGlmIChvLncgPD0gMCB8fCBvLmggPD0gMCkgY29udGludWU7CiAgICAgICAgICBsZXQgZCA9IG8ueCAqIHIsCiAgICAgICAgICAgIGMgPSBvLnkgKiByOwogICAgICAgICAgdHJ5IHsKICAgICAgICAgICAgbGV0IGYgPSB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoYSwgZCwgYyk7CiAgICAgICAgICAgIGYgJiYgKHUuc3R5bGUudHJhbnNmb3JtID0gZi50b1N0cmluZygpKTsKICAgICAgICAgIH0gY2F0Y2ggKGYpIHsKICAgICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgICAgIChjb25zb2xlLndhcm4oCiAgICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byBkcmF3IGJhY2tncm91bmQgZWxlbWVudCAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICAgIGYubWVzc2FnZSB8fCBmLAogICAgICAgICAgICAgICksCiAgICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWQgPSAhMCkpOwogICAgICAgICAgfQogICAgICAgIH0KICAgICAgZm9yIChsZXQgYSBvZiBzKQogICAgICAgIHRyeSB7CiAgICAgICAgICB0aGlzLl9yZW5kZXJHbGFzc0VsZW1lbnQoYSwgbiwgcik7CiAgICAgICAgfSBjYXRjaCAodSkgewogICAgICAgICAgYS5fX2xnX2Vycm9yX2xvZ2dlZF9nbGFzcyB8fAogICAgICAgICAgICAoY29uc29sZS5lcnJvcigKICAgICAgICAgICAgICBgTGlxdWlkR2xhc3M6IEZhaWxlZCB0byByZW5kZXIgZ2xhc3MgZWZmZWN0IGZvciAke2EudGFnTmFtZX0uJHthLmNsYXNzTmFtZX06YCwKICAgICAgICAgICAgICB1Lm1lc3NhZ2UgfHwgdSwKICAgICAgICAgICAgKSwKICAgICAgICAgICAgKGEuX19sZ19lcnJvcl9sb2dnZWRfZ2xhc3MgPSAhMCkpOwogICAgICAgIH0KICAgIH0KICAgIHJlbmRlckdsYXNzRWxlbWVudHMoKSB7CiAgICAgIGxldCBlID0gdGhpcy5jYW52YXMud2lkdGgsCiAgICAgICAgdCA9IHRoaXMuY2FudmFzLmhlaWdodDsKICAgICAgaWYgKGUgPT09IDAgfHwgdCA9PT0gMCB8fCAhdGhpcy5kcmF3RWxlbWVudEltYWdlIHx8ICF0aGlzLl9pbml0aWFsaXplZCkgcmV0dXJuOwogICAgICBsZXQgciA9IHdpbmRvdy5kZXZpY2VQaXhlbFJhdGlvIHx8IDEsCiAgICAgICAgbiA9IHRoaXMuY2FudmFzLmdldEJvdW5kaW5nQ2xpZW50UmVjdCgpLAogICAgICAgIGkgPSB0aGlzLmNhbnZhcy5xdWVyeVNlbGVjdG9yQWxsKCIubGlxdWlkLWdsYXNzIik7CiAgICAgIGZvciAobGV0IHMgb2YgaSkgdGhpcy5fcmVuZGVyR2xhc3NFbGVtZW50KHMsIG4sIHIpOwogICAgfQogICAgX3BhcnNlQ1NTTGVuZ3RoKGUsIHQpIHsKICAgICAgcmV0dXJuICFlIHx8IGUgPT09ICJhdXRvIgogICAgICAgID8gTmFOCiAgICAgICAgOiAoKGUgPSBlLnRyaW0oKSksCiAgICAgICAgICBlLnN0YXJ0c1dpdGgoImNhbGMoIikKICAgICAgICAgICAgPyB0aGlzLl9wYXJzZUNhbGMoZSwgdCkKICAgICAgICAgICAgOiBlLmVuZHNXaXRoKCIlIikKICAgICAgICAgICAgICA/IChwYXJzZUZsb2F0KGUpIC8gMTAwKSAqIHQKICAgICAgICAgICAgICA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfcGFyc2VDYWxjKGUsIHQpIHsKICAgICAgbGV0IHIgPSBlLm1hdGNoKC9jYWxjXCgoLispXCkvKTsKICAgICAgaWYgKCFyKSByZXR1cm4gMDsKICAgICAgbGV0IG4gPSByWzFdLnRyaW0oKSwKICAgICAgICBpID0gbi5tYXRjaCgvKC4rKVxzKlwrXHMqKC4rKS8pLAogICAgICAgIHMgPSBuLm1hdGNoKC8oLispXHMqLVxzKiguKykvKTsKICAgICAgaWYgKHMpIHsKICAgICAgICBsZXQgbCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKHNbMV0udHJpbSgpLCB0KSwKICAgICAgICAgIGEgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChzWzJdLnRyaW0oKSwgdCk7CiAgICAgICAgcmV0dXJuIGwgLSBhOwogICAgICB9CiAgICAgIGlmIChpKSB7CiAgICAgICAgbGV0IGwgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChpWzFdLnRyaW0oKSwgdCksCiAgICAgICAgICBhID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoaVsyXS50cmltKCksIHQpOwogICAgICAgIHJldHVybiBsICsgYTsKICAgICAgfQogICAgICByZXR1cm4gdGhpcy5fcGFyc2VDU1NMZW5ndGgobiwgdCk7CiAgICB9CiAgICBfcGFyc2VUcmFuc2Zvcm0oZSwgdCwgcikgewogICAgICBsZXQgbiA9IDAsCiAgICAgICAgaSA9IDA7CiAgICAgIGlmICghZSB8fCBlID09PSAibm9uZSIpIHJldHVybiB7IHR4OiBuLCB0eTogaSB9OwogICAgICBsZXQgcyA9IGUubWF0Y2goL3RyYW5zbGF0ZVwoXHMqKFteLCldKykoPzpccyosXHMqKFteKV0rKSk/XHMqXCkvKTsKICAgICAgcyAmJgogICAgICAgICgobiA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1sxXSwgdCkpLAogICAgICAgIChpID0gc1syXSA/IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoc1syXSwgcikgOiAwKSk7CiAgICAgIGxldCBsID0gZS5tYXRjaCgvdHJhbnNsYXRlWFwoXHMqKFteKV0rKVxzKlwpLyk7CiAgICAgIGwgJiYgKG4gPSB0aGlzLl9wYXJzZVRyYW5zbGF0ZVZhbHVlKGxbMV0sIHQpKTsKICAgICAgbGV0IGEgPSBlLm1hdGNoKC90cmFuc2xhdGVZXChccyooW14pXSspXHMqXCkvKTsKICAgICAgYSAmJiAoaSA9IHRoaXMuX3BhcnNlVHJhbnNsYXRlVmFsdWUoYVsxXSwgcikpOwogICAgICBsZXQgdSA9IGUubWF0Y2goL3RyYW5zbGF0ZTNkXChccyooW14sXSspXHMqLFxzKihbXixdKylccyosXHMqW14pXStccypcKS8pOwogICAgICByZXR1cm4gKAogICAgICAgIHUgJiYgKChuID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzFdLCB0KSksIChpID0gdGhpcy5fcGFyc2VUcmFuc2xhdGVWYWx1ZSh1WzJdLCByKSkpLAogICAgICAgIHsgdHg6IG4sIHR5OiBpIH0KICAgICAgKTsKICAgIH0KICAgIF9wYXJzZVRyYW5zbGF0ZVZhbHVlKGUsIHQpIHsKICAgICAgcmV0dXJuICgoZSA9IGUudHJpbSgpKSwgZS5lbmRzV2l0aCgiJSIpID8gKHBhcnNlRmxvYXQoZSkgLyAxMDApICogdCA6IHBhcnNlRmxvYXQoZSkgfHwgMCk7CiAgICB9CiAgICBfZ2V0RWxlbWVudFBvc2l0aW9uKGUsIHQpIHsKICAgICAgbGV0IHIgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIG4gPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLndpZHRoKSB8fCB0aGlzLmNhbnZhcy53aWR0aCB8fCAxNTM2LAogICAgICAgIGkgPSBwYXJzZUZsb2F0KGdldENvbXB1dGVkU3R5bGUodGhpcy5jYW52YXMpLmhlaWdodCkgfHwgdGhpcy5jYW52YXMuaGVpZ2h0IHx8IDEwMjQsCiAgICAgICAgcyA9IGUuZ2V0Qm91bmRpbmdDbGllbnRSZWN0KCksCiAgICAgICAgbCA9IHMud2lkdGggfHwgcGFyc2VGbG9hdChyLndpZHRoKSB8fCAwLAogICAgICAgIGEgPSBzLmhlaWdodCB8fCBwYXJzZUZsb2F0KHIuaGVpZ2h0KSB8fCAwLAogICAgICAgIHUgPSAwLAogICAgICAgIG8gPSAwLAogICAgICAgIGQgPSBlLnN0eWxlLAogICAgICAgIGMgPSBkLmxlZnQgfHwgci5sZWZ0LAogICAgICAgIGYgPSBkLnJpZ2h0IHx8IHIucmlnaHQsCiAgICAgICAgaCA9IGQudG9wIHx8IHIudG9wLAogICAgICAgIGIgPSBkLmJvdHRvbSB8fCByLmJvdHRvbSwKICAgICAgICBnID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYywgbiksCiAgICAgICAgcCA9IHRoaXMuX3BhcnNlQ1NTTGVuZ3RoKGYsIG4pLAogICAgICAgIHYgPSB0aGlzLl9wYXJzZUNTU0xlbmd0aChoLCBpKSwKICAgICAgICBTID0gdGhpcy5fcGFyc2VDU1NMZW5ndGgoYiwgaSksCiAgICAgICAgUCA9IHBhcnNlRmxvYXQoci5tYXJnaW5MZWZ0KSB8fCAwLAogICAgICAgIHggPSBwYXJzZUZsb2F0KHIubWFyZ2luUmlnaHQpIHx8IDAsCiAgICAgICAgTSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Ub3ApIHx8IDAsCiAgICAgICAgQSA9IHBhcnNlRmxvYXQoci5tYXJnaW5Cb3R0b20pIHx8IDAsCiAgICAgICAgRyA9ICFpc05hTihnKSwKICAgICAgICBVID0gIWlzTmFOKHApOwogICAgICBHICYmIFUgJiYgZyA9PT0gMCAmJiBwID09PSAwCiAgICAgICAgPyAodSA9IChuIC0gbCkgLyAyKQogICAgICAgIDogKEcgJiYgVSkgfHwgRwogICAgICAgICAgPyAodSA9IGcgKyBQKQogICAgICAgICAgOiBVICYmICh1ID0gbiAtIGwgLSBwIC0geCk7CiAgICAgIGxldCBCID0gIWlzTmFOKHYpLAogICAgICAgIEMgPSAhaXNOYU4oUyk7CiAgICAgIEIgJiYgQyAmJiB2ID09PSAwICYmIFMgPT09IDAKICAgICAgICA/IChvID0gKGkgLSBhKSAvIDIpCiAgICAgICAgOiAoQiAmJiBDKSB8fCBCCiAgICAgICAgICA/IChvID0gdiArIE0pCiAgICAgICAgICA6IEMgJiYgKG8gPSBpIC0gYSAtIFMgLSBBKTsKICAgICAgbGV0IHsgdHg6IFYsIHR5OiBGIH0gPSB0aGlzLl9wYXJzZVRyYW5zZm9ybShyLnRyYW5zZm9ybSwgbCwgYSk7CiAgICAgIHJldHVybiAoKHUgKz0gViksIChvICs9IEYpLCB7IHg6IHUsIHk6IG8sIHc6IGwsIGg6IGEgfSk7CiAgICB9CiAgICBfcmVuZGVyR2xhc3NFbGVtZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9nZXRDb25maWdGcm9tQ1NTKGUpLAogICAgICAgIGkgPSB0aGlzLl9nZXRFbGVtZW50UG9zaXRpb24oZSwgdCksCiAgICAgICAgcyA9IGkueCwKICAgICAgICBsID0gaS55LAogICAgICAgIGEgPSBpLncsCiAgICAgICAgdSA9IGkuaCwKICAgICAgICBvID0gcyAqIHIsCiAgICAgICAgZCA9IGwgKiByLAogICAgICAgIGMgPSBhICogciwKICAgICAgICBmID0gdSAqIHIsCiAgICAgICAgaCA9IFQgKiByLAogICAgICAgIGIgPSBvIC0gaCwKICAgICAgICBnID0gZCAtIGgsCiAgICAgICAgcCA9IGMgKyBoICogMiwKICAgICAgICB2ID0gZiArIGggKiAyOwogICAgICB0aGlzLl9jYXB0dXJlUmVnaW9uKGIsIGcsIHAsIHYpOwogICAgICBsZXQgUyA9IE1hdGgucm91bmQocCksCiAgICAgICAgUCA9IE1hdGgucm91bmQodik7CiAgICAgICh0aGlzLnJlbmRlcmVyLmNsZWFyKCksCiAgICAgICAgdGhpcy5yZW5kZXJlci51cGxvYWRBbmRCbHVyKHRoaXMuc2NlbmVDYW52YXMsIDAsIDAsIFMsIFAsIG4uYmx1ckFtb3VudCksCiAgICAgICAgdGhpcy5yZW5kZXJlci5yZW5kZXJHbGFzc1BhbmVsKG4sIGEsIHUsIHIpLAogICAgICAgIHRoaXMuY3R4LmRyYXdJbWFnZSh0aGlzLnJlbmRlcmVyLmNhbnZhcywgMCwgMCwgcCwgdiwgYiwgZywgcCwgdikpOwogICAgICB0cnkgewogICAgICAgIGxldCB4ID0gdGhpcy5fZHJhd0dsYXNzRWxlbWVudENvbnRlbnQoZSwgbywgZCk7CiAgICAgICAgeCAmJiAoZS5zdHlsZS50cmFuc2Zvcm0gPSB4LnRvU3RyaW5nKCkpOwogICAgICB9IGNhdGNoICh4KSB7CiAgICAgICAgZS5fX2xnX2Vycm9yX2xvZ2dlZCB8fAogICAgICAgICAgKGNvbnNvbGUud2FybigKICAgICAgICAgICAgYExpcXVpZEdsYXNzOiBGYWlsZWQgdG8gZHJhdyBnbGFzcyBlbGVtZW50ICR7ZS50YWdOYW1lfS4ke2UuY2xhc3NOYW1lfTpgLAogICAgICAgICAgICB4LAogICAgICAgICAgKSwKICAgICAgICAgIChlLl9fbGdfZXJyb3JfbG9nZ2VkID0gITApKTsKICAgICAgfQogICAgfQogICAgX2RyYXdHbGFzc0VsZW1lbnRDb250ZW50KGUsIHQsIHIpIHsKICAgICAgaWYgKCF0aGlzLmRyYXdFbGVtZW50SW1hZ2UpIHJldHVybjsKICAgICAgbGV0IG4gPSB0aGlzLl9zdXBwcmVzc0dsYXNzQ2hyb21lKGUpOwogICAgICB0cnkgewogICAgICAgIHJldHVybiB0aGlzLmRyYXdFbGVtZW50SW1hZ2UoZSwgdCwgcik7CiAgICAgIH0gZmluYWxseSB7CiAgICAgICAgdGhpcy5fcmVzdG9yZUlubGluZVN0eWxlcyhlLCBuKTsKICAgICAgfQogICAgfQogICAgX3N1cHByZXNzR2xhc3NDaHJvbWUoZSkgewogICAgICBsZXQgdCA9IG5ldyBNYXAoKSwKICAgICAgICByID0gWwogICAgICAgICAgImJhY2tncm91bmQiLAogICAgICAgICAgImJhY2tncm91bmRDb2xvciIsCiAgICAgICAgICAiYmFja2dyb3VuZEltYWdlIiwKICAgICAgICAgICJib3JkZXJDb2xvciIsCiAgICAgICAgICAiYm94U2hhZG93IiwKICAgICAgICAgICJmaWx0ZXIiLAogICAgICAgICAgIm91dGxpbmVDb2xvciIsCiAgICAgICAgXTsKICAgICAgZm9yIChsZXQgbiBvZiByKSB0LnNldChuLCBlLnN0eWxlW25dKTsKICAgICAgcmV0dXJuICgKICAgICAgICAoZS5zdHlsZS5iYWNrZ3JvdW5kID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZENvbG9yID0gInRyYW5zcGFyZW50IiksCiAgICAgICAgKGUuc3R5bGUuYmFja2dyb3VuZEltYWdlID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5ib3JkZXJDb2xvciA9ICJ0cmFuc3BhcmVudCIpLAogICAgICAgIChlLnN0eWxlLmJveFNoYWRvdyA9ICJub25lIiksCiAgICAgICAgKGUuc3R5bGUuZmlsdGVyID0gIm5vbmUiKSwKICAgICAgICAoZS5zdHlsZS5vdXRsaW5lQ29sb3IgPSAidHJhbnNwYXJlbnQiKSwKICAgICAgICB0CiAgICAgICk7CiAgICB9CiAgICBfcmVzdG9yZUlubGluZVN0eWxlcyhlLCB0KSB7CiAgICAgIGZvciAobGV0IFtyLCBuXSBvZiB0KSBlLnN0eWxlW3JdID0gbjsKICAgIH0KICAgIF9jYXB0dXJlUmVnaW9uKGUsIHQsIHIsIG4pIHsKICAgICAgbGV0IGkgPSBNYXRoLnJvdW5kKHIpLAogICAgICAgIHMgPSBNYXRoLnJvdW5kKG4pOwogICAgICAoKHRoaXMuc2NlbmVDYW52YXMud2lkdGggIT09IGkgfHwgdGhpcy5zY2VuZUNhbnZhcy5oZWlnaHQgIT09IHMpICYmCiAgICAgICAgKCh0aGlzLnNjZW5lQ2FudmFzLndpZHRoID0gaSksICh0aGlzLnNjZW5lQ2FudmFzLmhlaWdodCA9IHMpKSwKICAgICAgICAodGhpcy5zY2VuZUN0eC5maWxsU3R5bGUgPSAiI2ZmZmZmZiIpLAogICAgICAgIHRoaXMuc2NlbmVDdHguZmlsbFJlY3QoMCwgMCwgaSwgcyksCiAgICAgICAgdGhpcy5zY2VuZUN0eC5kcmF3SW1hZ2UodGhpcy5jYW52YXMsIGUsIHQsIHIsIG4sIDAsIDAsIGksIHMpKTsKICAgIH0KICAgIF9nZXRDb25maWdGcm9tQ1NTKGUpIHsKICAgICAgbGV0IHQgPSBnZXRDb21wdXRlZFN0eWxlKGUpLAogICAgICAgIHIgPSB7IC4uLncgfTsKICAgICAgZm9yIChsZXQgW24sIGldIG9mIE9iamVjdC5lbnRyaWVzKF8pKSB7CiAgICAgICAgbGV0IHMgPSB0LmdldFByb3BlcnR5VmFsdWUobikudHJpbSgpOwogICAgICAgIGlmIChzKSB7CiAgICAgICAgICBsZXQgbCA9IHBhcnNlRmxvYXQocyk7CiAgICAgICAgICBpc05hTihsKSB8fCAocltpXSA9IGwpOwogICAgICAgIH0KICAgICAgfQogICAgICByZXR1cm4gcjsKICAgIH0KICAgIGRlc3Ryb3koKSB7CiAgICAgIHRoaXMucmVuZGVyZXIuZGVzdHJveSgpOwogICAgfQogIH07CiAgcmV0dXJuIEkoWSk7Cn0pKCk7Cg==\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #0a0218;\n        overflow: hidden;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      #three-canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        z-index: 0;\n      }\n      #glass-canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        z-index: 1;\n      }\n\n      /* ── Glass Panels ── */\n      .glass-panel {\n        position: absolute;\n        background: rgba(255, 255, 255, 0.025);\n        --lg-blur: 0.42;\n        --lg-refraction: 0.82;\n        --lg-corner-radius: 28;\n        --lg-z-radius: 46;\n        --lg-specular: 0.34;\n        --lg-fresnel: 1.25;\n        --lg-edge-highlight: 0.26;\n        --lg-chrom-aberration: 0.08;\n        --lg-shadow-opacity: 0;\n        --lg-shadow-spread: 0;\n        --lg-shadow-offset-y: 0;\n        --lg-saturation: 0.38;\n      }\n      .stat-card {\n        width: 220px;\n        height: 220px;\n      }\n      .showcase-card {\n        width: 500px;\n        height: 320px;\n      }\n      .pill-chip {\n        width: 130px;\n        height: 36px;\n        --lg-corner-radius: 40;\n      }\n\n      #glass-stat1 {\n        top: 300px;\n        left: 200px;\n      }\n      #glass-stat2 {\n        top: 300px;\n        left: 460px;\n      }\n      #glass-stat3 {\n        top: 300px;\n        left: 720px;\n      }\n      #glass-showcase {\n        top: 380px;\n        left: 1100px;\n      }\n      #glass-pill1 {\n        top: 720px;\n        left: 300px;\n      }\n      #glass-pill2 {\n        top: 720px;\n        left: 460px;\n      }\n      #glass-pill3 {\n        top: 720px;\n        left: 620px;\n      }\n\n      /* ── Text Overlays ── */\n      .text-overlay {\n        position: absolute;\n        z-index: 2;\n        pointer-events: none;\n      }\n\n      /* Stat cards */\n      .stat-text {\n        width: 220px;\n        height: 220px;\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n        padding: 22px;\n        border-radius: 28px;\n        background:\n          linear-gradient(\n            150deg,\n            rgba(255, 255, 255, 0.28),\n            rgba(255, 255, 255, 0.06) 46%,\n            rgba(255, 255, 255, 0.16)\n          ),\n          linear-gradient(180deg, rgba(9, 18, 31, 0.2), rgba(255, 255, 255, 0.04));\n        border: 1px solid rgba(255, 255, 255, 0.36);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.5),\n          inset 0 -18px 38px rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.38);\n      }\n      .stat-text::before,\n      .showcase-text::before,\n      .pill-text::before {\n        content: \"\";\n        position: absolute;\n        inset: 1px;\n        border-radius: inherit;\n        pointer-events: none;\n        background: linear-gradient(\n          120deg,\n          rgba(255, 255, 255, 0.44),\n          transparent 28%,\n          transparent 66%,\n          rgba(255, 255, 255, 0.2)\n        );\n        opacity: 0.32;\n        mix-blend-mode: screen;\n      }\n      .stat-label {\n        position: relative;\n        font-size: 14px;\n        font-weight: 650;\n        color: #fff;\n        text-transform: uppercase;\n        letter-spacing: 1.5px;\n      }\n      .stat-value {\n        position: relative;\n        font-size: 52px;\n        font-weight: 700;\n        color: #fff;\n        font-variant-numeric: tabular-nums;\n        line-height: 1;\n      }\n      .stat-unit {\n        position: relative;\n        font-size: 24px;\n        font-weight: 500;\n        color: #fff;\n      }\n      .mini-meter {\n        position: relative;\n        width: 140px;\n        height: 6px;\n        overflow: hidden;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.28);\n      }\n      .mini-meter-fill {\n        width: 0%;\n        height: 100%;\n        border-radius: inherit;\n        background: linear-gradient(90deg, #06e3fa, #4fdb5e);\n        box-shadow: 0 0 12px rgba(79, 219, 94, 0.55);\n      }\n      .battery-shell {\n        position: relative;\n        width: 118px;\n        height: 40px;\n        padding: 4px;\n        border: 2px solid rgba(255, 255, 255, 0.66);\n        border-radius: 12px;\n      }\n      .battery-shell::after {\n        content: \"\";\n        position: absolute;\n        top: 12px;\n        right: -9px;\n        width: 5px;\n        height: 14px;\n        border-radius: 0 5px 5px 0;\n        background: rgba(255, 255, 255, 0.66);\n      }\n      .battery-fill {\n        width: 72%;\n        height: 100%;\n        border-radius: 8px;\n        background: linear-gradient(90deg, #4ade80, #06e3fa);\n        box-shadow: 0 0 18px rgba(74, 222, 128, 0.45);\n      }\n      .steps-ring {\n        width: 106px;\n        height: 106px;\n        display: grid;\n        place-items: center;\n        border-radius: 50%;\n        background: conic-gradient(#a78bfa 0deg, #06e3fa 180deg, rgba(255, 255, 255, 0.18) 180deg);\n      }\n      .steps-ring-inner {\n        width: 78px;\n        height: 78px;\n        display: grid;\n        place-items: center;\n        border-radius: 50%;\n        background: rgba(7, 10, 18, 0.36);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.22),\n          inset 0 -8px 20px rgba(0, 0, 0, 0.14);\n        color: #fff;\n        font-size: 30px;\n        font-weight: 800;\n        font-variant-numeric: tabular-nums;\n      }\n      #text-stat1 {\n        top: 300px;\n        left: 200px;\n      }\n      #text-stat2 {\n        top: 300px;\n        left: 460px;\n      }\n      #text-stat3 {\n        top: 300px;\n        left: 720px;\n      }\n\n      /* Showcase card */\n      .showcase-text {\n        width: 500px;\n        height: 320px;\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 20px;\n        padding: 32px;\n        border-radius: 28px;\n        background:\n          radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.38), transparent 24%),\n          linear-gradient(\n            135deg,\n            rgba(255, 255, 255, 0.24),\n            rgba(255, 255, 255, 0.07) 52%,\n            rgba(255, 255, 255, 0.18)\n          );\n        border: 1px solid rgba(255, 255, 255, 0.38);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.5),\n          inset 0 -24px 48px rgba(255, 255, 255, 0.08);\n        overflow: hidden;\n        text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);\n      }\n      .showcase-icon {\n        position: relative;\n        width: 168px;\n        height: 52px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .showcase-logo {\n        width: 150px;\n        height: auto;\n        display: block;\n      }\n      .showcase-title {\n        position: relative;\n        font-size: 28px;\n        font-weight: 700;\n        color: #fff;\n        text-align: center;\n        line-height: 1.2;\n      }\n      .showcase-desc {\n        position: relative;\n        font-size: 15px;\n        font-weight: 500;\n        color: #fff;\n        text-align: center;\n        line-height: 1.5;\n        max-width: 380px;\n      }\n      .showcase-status {\n        position: relative;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        color: #fff;\n        font-size: 14px;\n        font-weight: 700;\n      }\n      .showcase-dot {\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        background: #4ade80;\n        box-shadow: 0 0 14px rgba(74, 222, 128, 0.7);\n      }\n      .showcase-progress {\n        position: relative;\n        width: 300px;\n        height: 7px;\n        overflow: hidden;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.18);\n      }\n      .showcase-progress-fill {\n        width: 18%;\n        height: 100%;\n        border-radius: inherit;\n        background: linear-gradient(90deg, #06e3fa, #4fdb5e);\n      }\n      #text-showcase {\n        top: 380px;\n        left: 1100px;\n      }\n\n      /* Pill chips */\n      .pill-text {\n        width: 130px;\n        height: 36px;\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        border-radius: 40px;\n        background: linear-gradient(130deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.1));\n        border: 1px solid rgba(255, 255, 255, 0.34);\n        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);\n        overflow: hidden;\n      }\n      .pill-dot {\n        position: relative;\n        width: 8px;\n        height: 8px;\n        border-radius: 50%;\n        flex-shrink: 0;\n      }\n      .dot-green {\n        background: #4ade80;\n      }\n      .dot-blue {\n        background: #60a5fa;\n      }\n      .dot-violet {\n        background: #a78bfa;\n      }\n      .pill-label {\n        position: relative;\n        font-size: 13px;\n        font-weight: 600;\n        color: #fff;\n      }\n      #text-pill1 {\n        top: 720px;\n        left: 300px;\n      }\n      #text-pill2 {\n        top: 720px;\n        left: 460px;\n      }\n      #text-pill3 {\n        top: 720px;\n        left: 620px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"liquid-glass-widgets\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-root=\"true\"\n    >\n      <canvas id=\"three-canvas\" width=\"1920\" height=\"1080\"></canvas>\n\n      <canvas id=\"glass-canvas\" layoutsubtree width=\"1920\" height=\"1080\">\n        <div id=\"glass-stat1\" class=\"glass-panel stat-card liquid-glass\"></div>\n        <div id=\"glass-stat2\" class=\"glass-panel stat-card liquid-glass\"></div>\n        <div id=\"glass-stat3\" class=\"glass-panel stat-card liquid-glass\"></div>\n        <div id=\"glass-showcase\" class=\"glass-panel showcase-card liquid-glass\"></div>\n        <div id=\"glass-pill1\" class=\"glass-panel pill-chip liquid-glass\"></div>\n        <div id=\"glass-pill2\" class=\"glass-panel pill-chip liquid-glass\"></div>\n        <div id=\"glass-pill3\" class=\"glass-panel pill-chip liquid-glass\"></div>\n      </canvas>\n\n      <!-- Stat cards -->\n      <div id=\"text-stat1\" class=\"text-overlay stat-text\">\n        <span class=\"stat-label\">Temperature</span>\n        <span class=\"stat-value\"\n          ><span id=\"temp-value\">21</span><span class=\"stat-unit\">&deg;</span></span\n        >\n        <div class=\"mini-meter\"><div id=\"temp-meter\" class=\"mini-meter-fill\"></div></div>\n      </div>\n      <div id=\"text-stat2\" class=\"text-overlay stat-text\">\n        <span class=\"stat-label\">Battery</span>\n        <div class=\"battery-shell\"><div id=\"battery-fill\" class=\"battery-fill\"></div></div>\n        <span class=\"stat-value\"\n          ><span id=\"battery-value\">87</span><span class=\"stat-unit\">%</span></span\n        >\n      </div>\n      <div id=\"text-stat3\" class=\"text-overlay stat-text\">\n        <span class=\"stat-label\">Steps</span>\n        <div id=\"steps-ring\" class=\"steps-ring\">\n          <div id=\"steps-value\" class=\"steps-ring-inner\">8.2K</div>\n        </div>\n      </div>\n\n      <!-- Showcase card -->\n      <div id=\"text-showcase\" class=\"text-overlay showcase-text\">\n        <div class=\"showcase-icon\">\n          <img class=\"showcase-logo\" src=\"/public/catalog/assets/f9f942c43b465616.svg\" alt=\"HyperFrames\" />\n        </div>\n        <div class=\"showcase-title\">Preview pipeline</div>\n        <div class=\"showcase-desc\">\n          Write HTML, render video. Ship compositions at the speed of code.\n        </div>\n        <div class=\"showcase-status\">\n          <span class=\"showcase-dot\" id=\"showcase-dot\"></span\n          ><span id=\"showcase-status\">Encoding frames</span>\n        </div>\n        <div class=\"showcase-progress\">\n          <div id=\"showcase-progress\" class=\"showcase-progress-fill\"></div>\n        </div>\n      </div>\n\n      <!-- Pill chips -->\n      <div id=\"text-pill1\" class=\"text-overlay pill-text\">\n        <span class=\"pill-dot dot-green\"></span>\n        <span class=\"pill-label\">Connected</span>\n      </div>\n      <div id=\"text-pill2\" class=\"text-overlay pill-text\">\n        <span class=\"pill-dot dot-blue\"></span>\n        <span class=\"pill-label\">Bluetooth</span>\n      </div>\n      <div id=\"text-pill3\" class=\"text-overlay pill-text\">\n        <span class=\"pill-dot dot-violet\"></span>\n        <span class=\"pill-label\">Focus</span>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      var W = 1920,\n        H = 1080,\n        DURATION = 8;\n\n      /* ── Three.js Aurora Shader ─────────────────────────────────────── */\n      var vs = \"varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position, 1.0); }\";\n      var fs = [\n        \"precision highp float;\",\n        \"varying vec2 vUv;\",\n        \"uniform float uTime;\",\n        \"vec3 mod289(vec3 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n        \"vec4 mod289(vec4 x){return x-floor(x*(1.0/289.0))*289.0;}\",\n        \"vec4 permute(vec4 x){return mod289(((x*34.0)+1.0)*x);}\",\n        \"vec4 taylorInvSqrt(vec4 r){return 1.79284291400159-0.85373472095314*r;}\",\n        \"float snoise(vec3 v){\",\n        \"  const vec2 C=vec2(1.0/6.0,1.0/3.0);const vec4 D=vec4(0.0,0.5,1.0,2.0);\",\n        \"  vec3 i=floor(v+dot(v,C.yyy));vec3 x0=v-i+dot(i,C.xxx);\",\n        \"  vec3 g=step(x0.yzx,x0.xyz);vec3 l=1.0-g;\",\n        \"  vec3 i1=min(g.xyz,l.zxy);vec3 i2=max(g.xyz,l.zxy);\",\n        \"  vec3 x1=x0-i1+C.xxx;vec3 x2=x0-i2+C.yyy;vec3 x3=x0-D.yyy;\",\n        \"  i=mod289(i);\",\n        \"  vec4 p=permute(permute(permute(i.z+vec4(0.0,i1.z,i2.z,1.0))+i.y+vec4(0.0,i1.y,i2.y,1.0))+i.x+vec4(0.0,i1.x,i2.x,1.0));\",\n        \"  float n_=0.142857142857;vec3 ns=n_*D.wyz-D.xzx;\",\n        \"  vec4 j=p-49.0*floor(p*ns.z*ns.z);vec4 x_=floor(j*ns.z);vec4 y_=floor(j-7.0*x_);\",\n        \"  vec4 x=x_*ns.x+ns.yyyy;vec4 y=y_*ns.x+ns.yyyy;vec4 h=1.0-abs(x)-abs(y);\",\n        \"  vec4 b0=vec4(x.xy,y.xy);vec4 b1=vec4(x.zw,y.zw);\",\n        \"  vec4 s0=floor(b0)*2.0+1.0;vec4 s1=floor(b1)*2.0+1.0;\",\n        \"  vec4 sh=-step(h,vec4(0.0));\",\n        \"  vec4 a0=b0.xzyw+s0.xzyw*sh.xxyy;vec4 a1=b1.xzyw+s1.xzyw*sh.zzww;\",\n        \"  vec3 p0=vec3(a0.xy,h.x);vec3 p1=vec3(a0.zw,h.y);vec3 p2=vec3(a1.xy,h.z);vec3 p3=vec3(a1.zw,h.w);\",\n        \"  vec4 norm=taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2,p2),dot(p3,p3)));\",\n        \"  p0*=norm.x;p1*=norm.y;p2*=norm.z;p3*=norm.w;\",\n        \"  vec4 m=max(0.6-vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);m=m*m;\",\n        \"  return 42.0*dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));\",\n        \"}\",\n        \"void main(){\",\n        \"  vec2 uv=vUv;float ar=1920.0/1080.0;vec2 p=vec2(uv.x*ar,uv.y);float t=uTime*0.06;\",\n        \"  float wx=snoise(vec3(p*1.4,t*0.5))*0.2;float wy=snoise(vec3(p*1.4+100.0,t*0.5))*0.2;\",\n        \"  vec2 wp=p+vec2(wx,wy);\",\n        \"  vec3 base=mix(vec3(0.10,0.02,0.22),vec3(0.04,0.10,0.25),smoothstep(0.0,1.0,uv.x*0.6+uv.y*0.4));\",\n        \"  float angle=0.65;float ridgeUv=dot(wp,vec2(cos(angle),sin(angle)));\",\n        \"  float ridge1=sin(ridgeUv*8.0+t*2.0+snoise(vec3(wp*0.8,t))*1.5);\",\n        \"  float ridge2=sin(ridgeUv*5.5-t*1.4+snoise(vec3(wp*1.2+50.0,t*0.7))*2.0);\",\n        \"  float ridge3=sin(ridgeUv*12.0+t*3.0+snoise(vec3(wp*0.6+80.0,t*0.4))*1.0);\",\n        \"  float crease1=pow(abs(ridge1),0.35)*sign(ridge1)*0.5+0.5;\",\n        \"  float crease2=pow(abs(ridge2),0.4)*sign(ridge2)*0.5+0.5;\",\n        \"  float crease3=pow(abs(ridge3),0.5)*sign(ridge3)*0.5+0.5;\",\n        \"  vec3 warm=mix(vec3(0.9,0.4,0.08),vec3(0.95,0.65,0.15),crease1);\",\n        \"  float warmZone=smoothstep(0.15,0.75,uv.x+uv.y*0.4+snoise(vec3(uv*2.0,t))*0.3);\",\n        \"  vec3 cool=mix(vec3(0.02,0.4,0.55),vec3(0.25,0.7,0.82),crease2);\",\n        \"  float coolZone=smoothstep(0.25,0.85,1.2-uv.x+uv.y*0.5+snoise(vec3(uv*2.0+40.0,t*0.8))*0.25);\",\n        \"  vec3 hot=mix(vec3(0.8,0.1,0.4),vec3(0.6,0.08,0.65),crease3);\",\n        \"  float hotZone=smoothstep(0.5,0.9,snoise(vec3(uv*2.5+20.0,t*0.6))*0.5+0.5);\",\n        \"  vec3 col=base;\",\n        \"  col=mix(col,warm,warmZone*0.75*smoothstep(0.3,0.7,crease1));\",\n        \"  col=mix(col,cool,coolZone*0.65*smoothstep(0.2,0.65,crease2));\",\n        \"  col=mix(col,hot,hotZone*0.5*smoothstep(0.35,0.8,crease3));\",\n        \"  float edgeGlow=pow(1.0-abs(ridge1),6.0)*0.4+pow(1.0-abs(ridge2),5.0)*0.25;\",\n        \"  col+=edgeGlow*mix(warm,cool,uv.x)*0.8;\",\n        \"  col*=1.0-pow(abs(ridge1),4.0)*0.15;\",\n        \"  float vig=1.0-smoothstep(0.5,1.5,length((uv-0.5)*vec2(1.3,1.0)));\",\n        \"  col*=0.65+vig*0.5;\",\n        \"  float luma=dot(col,vec3(0.299,0.587,0.114));col=mix(vec3(luma),col,1.5);\",\n        \"  col=clamp(col,0.0,1.0);col=pow(col,vec3(0.9));\",\n        \"  gl_FragColor=vec4(col,1.0);\",\n        \"}\",\n      ].join(\"\\n\");\n\n      /* ── Three.js Setup ─────────────────────────────────────────────── */\n      var threeCanvas = document.getElementById(\"three-canvas\");\n      var renderer = new THREE.WebGLRenderer({ canvas: threeCanvas, alpha: false });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n\n      var scene = new THREE.Scene();\n      var camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);\n      var uniforms = { uTime: { value: 0 } };\n      var shaderMat = new THREE.ShaderMaterial({\n        vertexShader: vs,\n        fragmentShader: fs,\n        uniforms: uniforms,\n      });\n      var quad = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), shaderMat);\n      scene.add(quad);\n\n      /* ── Glass Canvas ───────────────────────────────────────────────── */\n      var glassCanvas = document.getElementById(\"glass-canvas\");\n      var ctx = glassCanvas.getContext(\"2d\");\n      var lg = new LiquidGlass.LiquidGlassCanvas(glassCanvas);\n      var lgReady = false;\n\n      function renderGlass(time) {\n        if (!lgReady) return;\n        uniforms.uTime.value = time;\n        renderer.render(scene, camera);\n        ctx.clearRect(0, 0, W, H);\n        ctx.drawImage(threeCanvas, 0, 0, W, H);\n        lg.renderGlassElements();\n      }\n\n      function requestGlassRender(time) {\n        if (glassCanvas.requestPaint) {\n          glassCanvas.onpaint = function () {\n            renderGlass(time);\n          };\n          glassCanvas.requestPaint();\n          return;\n        }\n        renderGlass(time);\n      }\n\n      lg.waitForInit().then(function (ok) {\n        if (!ok) return;\n        lgReady = true;\n        requestGlassRender(0);\n      });\n\n      /* ── GSAP Timeline ──────────────────────────────────────────────── */\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      /* Glass + text element pairs */\n      var s1g = document.getElementById(\"glass-stat1\");\n      var s2g = document.getElementById(\"glass-stat2\");\n      var s3g = document.getElementById(\"glass-stat3\");\n      var scg = document.getElementById(\"glass-showcase\");\n      var p1g = document.getElementById(\"glass-pill1\");\n      var p2g = document.getElementById(\"glass-pill2\");\n      var p3g = document.getElementById(\"glass-pill3\");\n      var s1t = document.getElementById(\"text-stat1\");\n      var s2t = document.getElementById(\"text-stat2\");\n      var s3t = document.getElementById(\"text-stat3\");\n      var sct = document.getElementById(\"text-showcase\");\n      var p1t = document.getElementById(\"text-pill1\");\n      var p2t = document.getElementById(\"text-pill2\");\n      var p3t = document.getElementById(\"text-pill3\");\n\n      var tempValue = document.getElementById(\"temp-value\");\n      var batteryValue = document.getElementById(\"battery-value\");\n      var stepsValue = document.getElementById(\"steps-value\");\n      var stepsRing = document.getElementById(\"steps-ring\");\n      var showcaseStatus = document.getElementById(\"showcase-status\");\n      var tempCounter = { value: 21 };\n      var batteryCounter = { value: 87 };\n      var stepsCounter = { value: 8.2 };\n\n      // Glass panels (rasterized by the html-in-canvas API) animate top — the API\n      // reads sub-pixel getComputedStyle().top, so layout-prop motion does not\n      // stutter and the lint rule exempts them. Plain-DOM text overlays DO stutter on\n      // layout props, so they animate the transform equivalent (y). y is relative to\n      // each text element's CSS resting top (stats 300, showcase 380, pills 720), so the\n      // initial seed to visual 1160 is y = 1160 - restingTop.\n      var glassPanels = [s1g, s2g, s3g, scg, p1g, p2g, p3g];\n      var statText = [s1t, s2t, s3t];\n      var showcaseText = sct;\n      var pillText = [p1t, p2t, p3t];\n      gsap.set(glassPanels, { opacity: 1, top: 1160 });\n      gsap.set(statText, { opacity: 1, y: 860 }); // 1160 - 300\n      gsap.set(showcaseText, { opacity: 1, y: 780 }); // 1160 - 380\n      gsap.set(pillText, { opacity: 1, y: 440 }); // 1160 - 720\n\n      tl.to(s1g, { top: 300, duration: 0.46, ease: \"power3.out\" }, 0.12);\n      tl.to(s1t, { y: 0, duration: 0.46, ease: \"power3.out\" }, 0.12); // 300 - 300\n      tl.to(s2g, { top: 300, duration: 0.46, ease: \"power3.out\" }, 0.24);\n      tl.to(s2t, { y: 0, duration: 0.46, ease: \"power3.out\" }, 0.24); // 300 - 300\n      tl.to(s3g, { top: 300, duration: 0.46, ease: \"power3.out\" }, 0.36);\n      tl.to(s3t, { y: 0, duration: 0.46, ease: \"power3.out\" }, 0.36); // 300 - 300\n      tl.to(scg, { top: 380, duration: 0.5, ease: \"power3.out\" }, 0.5);\n      tl.to(sct, { y: 0, duration: 0.5, ease: \"power3.out\" }, 0.5); // 380 - 380\n      tl.to(p1g, { top: 720, duration: 0.32, ease: \"power3.out\" }, 0.9);\n      tl.to(p1t, { y: 0, duration: 0.32, ease: \"power3.out\" }, 0.9); // 720 - 720\n      tl.to(p2g, { top: 720, duration: 0.32, ease: \"power3.out\" }, 1.0);\n      tl.to(p2t, { y: 0, duration: 0.32, ease: \"power3.out\" }, 1.0); // 720 - 720\n      tl.to(p3g, { top: 720, duration: 0.32, ease: \"power3.out\" }, 1.1);\n      tl.to(p3t, { y: 0, duration: 0.32, ease: \"power3.out\" }, 1.1); // 720 - 720\n\n      tl.to(\"#temp-meter\", { width: \"76%\", duration: 1.7, ease: \"power2.out\" }, 0.9);\n      tl.to(\n        tempCounter,\n        {\n          value: 25,\n          duration: 2.2,\n          ease: \"power2.out\",\n          onUpdate: function () {\n            tempValue.textContent = Math.round(tempCounter.value);\n          },\n        },\n        0.9,\n      );\n      tl.to(\"#battery-fill\", { width: \"91%\", duration: 2.4, ease: \"power2.out\" }, 1.05);\n      tl.to(\n        batteryCounter,\n        {\n          value: 91,\n          duration: 2.4,\n          ease: \"power2.out\",\n          onUpdate: function () {\n            batteryValue.textContent = Math.round(batteryCounter.value);\n          },\n        },\n        1.05,\n      );\n      tl.to(\n        stepsCounter,\n        {\n          value: 9.1,\n          duration: 2.6,\n          ease: \"power2.out\",\n          onUpdate: function () {\n            var degrees = Math.round(stepsCounter.value * 31.4);\n            stepsValue.textContent = stepsCounter.value.toFixed(1) + \"K\";\n            stepsRing.style.background =\n              \"conic-gradient(#a78bfa 0deg, #06e3fa \" +\n              degrees +\n              \"deg, rgba(255, 255, 255, 0.18) \" +\n              degrees +\n              \"deg)\";\n          },\n        },\n        1.2,\n      );\n      tl.to(\"#showcase-progress\", { width: \"92%\", duration: 4.1, ease: \"none\" }, 1.2);\n      tl.to(\n        \"#showcase-dot\",\n        { scale: 1.5, duration: 0.25, ease: \"power2.out\", yoyo: true, repeat: 7 },\n        1.4,\n      );\n      tl.call(\n        function () {\n          showcaseStatus.textContent = \"Preview ready\";\n        },\n        null,\n        5.2,\n      );\n      tl.to(scg, { top: \"-=10\", duration: 0.2, ease: \"power2.out\", yoyo: true, repeat: 1 }, 5.2);\n      tl.to(sct, { y: \"-=10\", duration: 0.2, ease: \"power2.out\", yoyo: true, repeat: 1 }, 5.2);\n      tl.to(\n        \".pill-dot\",\n        { scale: 1.55, duration: 0.2, ease: \"power2.out\", stagger: 0.12, yoyo: true, repeat: 3 },\n        2.2,\n      );\n\n      tl.to(\n        [s1g, s2g, s3g],\n        { top: \"-=12\", duration: 0.2, ease: \"power2.out\", yoyo: true, repeat: 1 },\n        5.7,\n      );\n      tl.to(\n        [s1t, s2t, s3t],\n        { y: \"-=12\", duration: 0.2, ease: \"power2.out\", yoyo: true, repeat: 1 },\n        5.7,\n      );\n      tl.to(\n        [s1g, s2g, s3g, scg, p1g, p2g, p3g],\n        { top: \"+=760\", duration: 0.42, ease: \"power2.in\" },\n        6.74,\n      );\n      tl.to(\n        [s1t, s2t, s3t, sct, p1t, p2t, p3t],\n        { y: \"+=760\", duration: 0.42, ease: \"power2.in\" },\n        6.74,\n      );\n\n      /* Duration driver */\n      tl.to({ v: 0 }, { v: 1, duration: DURATION, ease: \"none\" }, 0);\n\n      tl.eventCallback(\"onUpdate\", function () {\n        requestGlassRender(tl.time());\n      });\n\n      window.__timelines[\"liquid-glass-widgets\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/logo-outro.json b/docs/public/catalog/blocks/logo-outro.json
new file mode 100644
index 0000000000..87c2a26b8c
--- /dev/null
+++ b/docs/public/catalog/blocks/logo-outro.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Logo Outro</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0a0f;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"logo-outro\"\n      data-composition-id=\"logo-outro\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"6\"\n    >\n      <div class=\"canvas\">\n        <!-- Glow effect behind the logo -->\n        <div class=\"logo-glow\"></div>\n\n        <!-- Logo Container -->\n        <div class=\"logo-container\">\n          <svg viewBox=\"0 0 160 240\" width=\"160\" height=\"240\" class=\"logo-svg\">\n            <!-- Replace these paths with your own logo SVG -->\n            <path\n              class=\"logo-piece logo-tl\"\n              d=\"M 0 40 C 0 17.9 17.9 0 40 0 L 80 0 L 80 80 L 40 80 C 17.9 80 0 62.1 0 40 Z\"\n              fill=\"#F24E1E\"\n            />\n            <path\n              class=\"logo-piece logo-tr\"\n              d=\"M 80 0 L 120 0 C 142.1 0 160 17.9 160 40 C 160 62.1 142.1 80 120 80 L 80 80 L 80 0 Z\"\n              fill=\"#A259FF\"\n            />\n            <path\n              class=\"logo-piece logo-ml\"\n              d=\"M 0 120 C 0 97.9 17.9 80 40 80 L 80 80 L 80 160 L 40 160 C 17.9 160 0 142.1 0 120 Z\"\n              fill=\"#FF7262\"\n            />\n            <circle class=\"logo-piece logo-mr\" cx=\"120\" cy=\"120\" r=\"40\" fill=\"#1ABCFE\" />\n            <path\n              class=\"logo-piece logo-bl\"\n              d=\"M 0 200 C 0 177.9 17.9 160 40 160 L 80 160 L 80 200 C 80 222.1 62.1 240 40 240 C 17.9 240 0 222.1 0 200 Z\"\n              fill=\"#0ACF83\"\n            />\n          </svg>\n        </div>\n\n        <div class=\"text-container\">\n          <div class=\"tagline\">Nothing great is made alone.</div>\n          <div class=\"url-pill\">\n            <span class=\"url-text\">figma.com</span>\n          </div>\n        </div>\n      </div>\n\n      <style>\n        [data-composition-id=\"logo-outro\"] .canvas {\n          width: 1920px;\n          height: 1080px;\n          background: #0a0a0f;\n          position: relative;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"logo-outro\"] .logo-container {\n          position: absolute;\n          left: 880px;\n          top: 380px;\n          width: 160px;\n          height: 240px;\n          z-index: 2;\n        }\n\n        [data-composition-id=\"logo-outro\"] .logo-piece {\n          transform-origin: center center;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"logo-outro\"] .logo-glow {\n          position: absolute;\n          left: 760px;\n          top: 300px;\n          width: 400px;\n          height: 400px;\n          background: radial-gradient(circle, rgba(162, 89, 255, 0.25) 0%, rgba(10, 10, 15, 0) 70%);\n          border-radius: 50%;\n          opacity: 0;\n          pointer-events: none;\n          z-index: 1;\n        }\n\n        [data-composition-id=\"logo-outro\"] .text-container {\n          position: absolute;\n          top: 720px;\n          width: 100%;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          z-index: 3;\n        }\n\n        [data-composition-id=\"logo-outro\"] .tagline {\n          font-size: 44px;\n          font-weight: 500;\n          color: white;\n          opacity: 0;\n          margin-bottom: 32px;\n          text-align: center;\n        }\n\n        [data-composition-id=\"logo-outro\"] .url-pill {\n          background: #1a1a1f;\n          border: 1px solid #2c2c2c;\n          border-radius: 100px;\n          padding: 8px 24px;\n          opacity: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        [data-composition-id=\"logo-outro\"] .url-text {\n          font-size: 18px;\n          color: #666;\n          letter-spacing: 0.5px;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n\n          const pieces = {\n            tl: '[data-composition-id=\"logo-outro\"] .logo-tl',\n            tr: '[data-composition-id=\"logo-outro\"] .logo-tr',\n            ml: '[data-composition-id=\"logo-outro\"] .logo-ml',\n            mr: '[data-composition-id=\"logo-outro\"] .logo-mr',\n            bl: '[data-composition-id=\"logo-outro\"] .logo-bl',\n          };\n\n          const pieceArray = [pieces.tl, pieces.tr, pieces.ml, pieces.mr, pieces.bl];\n          const logoGlow = '[data-composition-id=\"logo-outro\"] .logo-glow';\n          const tagline = '[data-composition-id=\"logo-outro\"] .tagline';\n          const urlPill = '[data-composition-id=\"logo-outro\"] .url-pill';\n\n          // 1. Pieces slide in from the right with ripple stagger\n          pieceArray.forEach((piece, i) => {\n            tl.fromTo(\n              piece,\n              { x: 1920, opacity: 0 },\n              { x: 0, opacity: 1, duration: 1.2, ease: \"power4.out\" },\n              i * 0.08,\n            );\n          });\n\n          // 2. Expand and close\n          const expandTime = 1.2;\n\n          tl.to(\n            pieceArray,\n            { scale: 1.15, duration: 0.5, ease: \"back.out(1.7)\", stagger: 0.02 },\n            expandTime,\n          );\n\n          tl.to(pieceArray, { scale: 1, duration: 0.4, ease: \"power2.inOut\" }, expandTime + 0.3);\n\n          // 3. Glow bloom\n          tl.fromTo(\n            logoGlow,\n            { opacity: 0, scale: 0.5 },\n            { opacity: 1, scale: 1.2, duration: 0.4, ease: \"power2.out\" },\n            expandTime,\n          );\n          tl.to(\n            logoGlow,\n            { opacity: 0, scale: 1.8, duration: 1.2, ease: \"power2.out\" },\n            expandTime + 0.4,\n          );\n\n          // 4. Tagline and URL pill fade in\n          const textStartTime = expandTime + 0.8;\n          tl.fromTo(\n            tagline,\n            { opacity: 0, y: 20 },\n            { opacity: 1, y: 0, duration: 1, ease: \"power3.out\" },\n            textStartTime,\n          );\n\n          tl.fromTo(\n            urlPill,\n            { opacity: 0, y: 15 },\n            { opacity: 1, y: 0, duration: 0.8, ease: \"power3.out\" },\n            textStartTime + 0.4,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"logo-outro\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lower-third-bild.json b/docs/public/catalog/blocks/lower-third-bild.json
new file mode 100644
index 0000000000..2eb3ce2fbe
--- /dev/null
+++ b/docs/public/catalog/blocks/lower-third-bild.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <style>\n      @font-face {\n        font-family: \"Barlow Condensed\";\n        font-style: normal;\n        font-weight: 700;\n        font-display: block;\n        src: url(\"/public/catalog/assets/75b7b8e878ea0c33.woff2\") format(\"woff2\");\n      }\n      @font-face {\n        font-family: \"Barlow Condensed\";\n        font-style: normal;\n        font-weight: 800;\n        font-display: block;\n        src: url(\"/public/catalog/assets/2e5732c61470a890.woff2\") format(\"woff2\");\n      }\n    </style>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #lb-root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      #lb-main-outer {\n        position: absolute;\n        bottom: 215px;\n        left: 80px;\n        padding-right: 14px;\n        padding-bottom: 14px;\n      }\n\n      #lb-main-text {\n        font-family: \"Barlow Condensed\", sans-serif;\n        font-size: 88px;\n        font-weight: 800;\n        line-height: 1.05;\n        color: #212529;\n        background: #ffffff;\n        padding: 10px 22px 8px;\n        white-space: nowrap;\n        text-transform: uppercase;\n        letter-spacing: 0.02em;\n        box-shadow: 12px 12px 0 0 #dd0000;\n      }\n\n      #lb-sub-outer {\n        position: absolute;\n        bottom: 135px;\n        left: 80px;\n        padding-right: 10px;\n        padding-bottom: 10px;\n      }\n\n      #lb-sub-text {\n        font-family: \"Barlow Condensed\", sans-serif;\n        font-size: 48px;\n        font-weight: 700;\n        line-height: 1.1;\n        color: #ffffff;\n        background: #dd0000;\n        padding: 6px 18px 5px;\n        white-space: nowrap;\n        text-transform: uppercase;\n        letter-spacing: 0.04em;\n        box-shadow: 8px 8px 0 0 #ffffff;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"lb-root\"\n      data-composition-id=\"lower-third-bild\"\n      data-composition-variables='{\"TXT_MAIN_1_Line\":{\"type\":\"string\",\"default\":\"BILD EXKLUSIV\"},\"TXT_SUB\":{\"type\":\"string\",\"default\":\"Sonderbericht\"}}'\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div\n        id=\"lb-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n\n      <div id=\"lb-main-outer\">\n        <div id=\"lb-main-text\"></div>\n      </div>\n\n      <div id=\"lb-sub-outer\">\n        <div id=\"lb-sub-text\"></div>\n      </div>\n\n      <script>\n        (function () {\n          window.__timelines = window.__timelines || {};\n\n          var vars =\n            window.__hyperframes && window.__hyperframes.getVariables\n              ? window.__hyperframes.getVariables()\n              : {};\n\n          var mainText = (vars.TXT_MAIN_1_Line || \"BILD EXKLUSIV\").trim();\n          var subText = (vars.TXT_SUB || \"Sonderbericht\").trim();\n\n          var dur = parseFloat(document.getElementById(\"lb-drv\").dataset.duration) || 8;\n\n          document.getElementById(\"lb-main-text\").textContent = mainText;\n          document.getElementById(\"lb-sub-text\").textContent = subText || \" \";\n\n          var mainOuter = document.getElementById(\"lb-main-outer\");\n          var subOuter = document.getElementById(\"lb-sub-outer\");\n\n          var tl = gsap.timeline({ paused: true });\n\n          gsap.set([mainOuter, subOuter], { opacity: 1 });\n\n          tl.set([mainOuter, subOuter], { opacity: 0, visibility: \"hidden\" }, dur);\n\n          window.__timelines[\"lower-third-bild\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-accent-underline.json b/docs/public/catalog/blocks/lt-accent-underline.json
new file mode 100644
index 0000000000..e5d731d10b
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-accent-underline.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 130px;\n        bottom: 120px;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 14px;\n      }\n      #root .lt-name {\n        font-family: \"Oswald\", sans-serif;\n        font-size: 76px;\n        font-weight: 700;\n        color: #ffffff;\n        line-height: 0.96;\n        letter-spacing: 0.005em;\n        text-transform: uppercase;\n        white-space: nowrap;\n        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);\n      }\n      #root .lt-rule {\n        height: 6px;\n        width: 100%;\n        background: #46e5b7;\n        border-radius: 3px;\n        transform-origin: 0% 50%;\n      }\n      #root .lt-role {\n        font-family: \"Space Mono\", monospace;\n        font-size: 28px;\n        font-weight: 400;\n        color: #e7eaf0;\n        line-height: 1.2;\n        letter-spacing: 0.04em;\n        white-space: nowrap;\n        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-accent-underline\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-name\" class=\"lt-name\">Dr. Maya Chen</div>\n          <div id=\"lt-rule\" class=\"lt-rule\"></div>\n          <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var rule = document.getElementById(\"lt-rule\");\n      var role = document.getElementById(\"lt-role\");\n\n      // Name slides up, accent rule draws left→right, role fades up under it.\n      gsap.set(nameEl, { y: 28, opacity: 0 });\n      gsap.set(rule, { scaleX: 0 });\n      gsap.set(role, { y: 16, opacity: 0 });\n\n      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.55, ease: \"power3.out\" }, 0.1);\n      tl.to(rule, { scaleX: 1, duration: 0.5, ease: \"power4.out\" }, 0.3);\n      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: \"power3.out\" }, 0.46);\n\n      // Exit: role fades, rule retracts, name lifts, then hard kill.\n      tl.to(role, { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 4.25);\n      tl.to(rule, { scaleX: 0, duration: 0.3, ease: \"power2.in\" }, 4.3);\n      tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: \"power2.in\" }, 4.35);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-accent-underline\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-bold-block.json b/docs/public/catalog/blocks/lt-bold-block.json
new file mode 100644
index 0000000000..53eb245ed5
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-bold-block.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 120px;\n        bottom: 116px;\n      }\n      #root .lt-block {\n        background: #141518;\n        padding: 18px 34px 22px 30px;\n        display: inline-flex;\n        flex-direction: column;\n        gap: 12px;\n        will-change: clip-path;\n      }\n      #root .lt-name {\n        font-family: \"Archivo Black\", sans-serif;\n        font-size: 58px;\n        font-weight: 400;\n        color: #ffffff;\n        line-height: 0.98;\n        letter-spacing: -0.015em;\n        text-transform: uppercase;\n        white-space: nowrap;\n      }\n      #root .lt-tagwrap {\n        overflow: hidden;\n      }\n      #root .lt-tag {\n        display: inline-block;\n        background: #ffd23f;\n        color: #141518;\n        font-family: \"Space Mono\", monospace;\n        font-size: 24px;\n        font-weight: 700;\n        letter-spacing: 0.06em;\n        text-transform: uppercase;\n        padding: 7px 16px;\n        white-space: nowrap;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-bold-block\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-block\" class=\"lt-block\">\n            <div id=\"lt-name\" class=\"lt-name\">Maya Chen</div>\n            <div class=\"lt-tagwrap\">\n              <span id=\"lt-tag\" class=\"lt-tag\">Host · Neuroscientist</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var block = document.getElementById(\"lt-block\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var tag = document.getElementById(\"lt-tag\");\n\n      // Solid block wipes in from the left, name slams up inside it, tag pops up after.\n      gsap.set(block, { clipPath: \"inset(0 100% 0 0)\" });\n      gsap.set(nameEl, { y: 30, opacity: 0 });\n      gsap.set(tag, { y: 40 });\n\n      tl.to(block, { clipPath: \"inset(0 0% 0 0)\", duration: 0.5, ease: \"power4.out\" }, 0.1);\n      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: \"back.out(1.6)\" }, 0.26);\n      tl.to(tag, { y: 0, duration: 0.45, ease: \"back.out(2)\" }, 0.5);\n\n      // Exit: block wipes out to the left, then hard kill.\n      tl.to(block, { clipPath: \"inset(0 0 0 100%)\", duration: 0.4, ease: \"power3.in\" }, 4.3);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-bold-block\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-clean-bar.json b/docs/public/catalog/blocks/lt-clean-bar.json
new file mode 100644
index 0000000000..0fcd1900b4
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-clean-bar.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"Montserrat\", sans-serif;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 120px;\n        bottom: 110px;\n        display: flex;\n        align-items: stretch;\n        border-radius: 16px;\n        overflow: hidden;\n        box-shadow: 0 14px 44px rgba(15, 17, 21, 0.18);\n        will-change: clip-path;\n      }\n      #root .lt-tab {\n        width: 12px;\n        background: #ff5a36;\n        flex-shrink: 0;\n      }\n      #root .lt-body {\n        background: #ffffff;\n        padding: 22px 40px 24px 30px;\n        display: flex;\n        flex-direction: column;\n        gap: 7px;\n      }\n      #root .lt-name {\n        font-size: 52px;\n        font-weight: 700;\n        color: #0f1115;\n        line-height: 1.06;\n        letter-spacing: -0.015em;\n        white-space: nowrap;\n      }\n      #root .lt-role {\n        font-size: 27px;\n        font-weight: 400;\n        color: #5a6170;\n        line-height: 1.2;\n        letter-spacing: 0.01em;\n        white-space: nowrap;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-clean-bar\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-tab\" class=\"lt-tab\"></div>\n          <div class=\"lt-body\">\n            <div id=\"lt-name\" class=\"lt-name\">Dr. Maya Chen</div>\n            <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var card = document.getElementById(\"lt\");\n      var tab = document.getElementById(\"lt-tab\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var role = document.getElementById(\"lt-role\");\n\n      // Card wipes in from the left (clip-path), accent tab grows, text rises with a small stagger.\n      gsap.set(card, { clipPath: \"inset(0 100% 0 0)\" });\n      gsap.set(tab, { scaleY: 0, transformOrigin: \"50% 0%\" });\n      gsap.set(nameEl, { y: 22, opacity: 0 });\n      gsap.set(role, { y: 22, opacity: 0 });\n\n      tl.to(card, { clipPath: \"inset(0 0% 0 0)\", duration: 0.55, ease: \"power3.out\" }, 0.1);\n      tl.to(tab, { scaleY: 1, duration: 0.45, ease: \"power2.out\" }, 0.28);\n      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.5, ease: \"power3.out\" }, 0.34);\n      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: \"power3.out\" }, 0.44);\n\n      // Exit: settle out, then hard kill the inner element.\n      tl.to(card, { y: 18, opacity: 0, duration: 0.35, ease: \"power2.in\" }, 4.3);\n      tl.set(card, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-clean-bar\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-color-block.json b/docs/public/catalog/blocks/lt-color-block.json
new file mode 100644
index 0000000000..c86cd22c3c
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-color-block.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 120px;\n        bottom: 116px;\n      }\n      #root .lt-block {\n        background: #2756ff;\n        padding: 20px 36px 24px 32px;\n        box-shadow: 0 16px 44px rgba(39, 86, 255, 0.34);\n        display: inline-flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n      #root .lt-name {\n        font-family: \"League Gothic\", sans-serif;\n        font-size: 84px;\n        font-weight: 400;\n        color: #ffffff;\n        line-height: 0.86;\n        letter-spacing: 0.01em;\n        text-transform: uppercase;\n        white-space: nowrap;\n      }\n      #root .lt-role {\n        font-family: \"Space Mono\", monospace;\n        font-size: 24px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.86);\n        line-height: 1.2;\n        letter-spacing: 0.05em;\n        white-space: nowrap;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-color-block\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-block\" class=\"lt-block\">\n            <div id=\"lt-name\" class=\"lt-name\">Dr. Maya Chen</div>\n            <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var block = document.getElementById(\"lt-block\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var role = document.getElementById(\"lt-role\");\n\n      // Color block slides in from the left and overshoots slightly; name and role rise inside it.\n      gsap.set(block, { x: -80, opacity: 0 });\n      gsap.set(nameEl, { y: 24, opacity: 0 });\n      gsap.set(role, { y: 18, opacity: 0 });\n\n      tl.to(block, { x: 0, opacity: 1, duration: 0.5, ease: \"back.out(1.4)\" }, 0.1);\n      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.42, ease: \"power3.out\" }, 0.3);\n      tl.to(role, { y: 0, opacity: 1, duration: 0.42, ease: \"power3.out\" }, 0.4);\n\n      // Exit: slide out left, hard kill.\n      tl.to(block, { x: -60, opacity: 0, duration: 0.35, ease: \"power2.in\" }, 4.3);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-color-block\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-dark-card.json b/docs/public/catalog/blocks/lt-dark-card.json
new file mode 100644
index 0000000000..d24f7c88fc
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-dark-card.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"Montserrat\", sans-serif;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 120px;\n        bottom: 110px;\n      }\n      #root .lt-card {\n        background: #16181d;\n        border-radius: 14px;\n        padding: 24px 38px 26px 32px;\n        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.4);\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n      }\n      #root .lt-name {\n        font-size: 48px;\n        font-weight: 700;\n        color: #ffffff;\n        line-height: 1.02;\n        letter-spacing: -0.015em;\n        white-space: nowrap;\n      }\n      #root .lt-underline {\n        height: 4px;\n        width: 100%;\n        background: #f5b942;\n        border-radius: 2px;\n        transform-origin: 0% 50%;\n      }\n      #root .lt-role {\n        font-size: 25px;\n        font-weight: 400;\n        color: #aeb6c2;\n        line-height: 1.2;\n        letter-spacing: 0.02em;\n        white-space: nowrap;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-dark-card\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-card\" class=\"lt-card\">\n            <div id=\"lt-name\" class=\"lt-name\">Dr. Maya Chen</div>\n            <div id=\"lt-underline\" class=\"lt-underline\"></div>\n            <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var card = document.getElementById(\"lt-card\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var underline = document.getElementById(\"lt-underline\");\n      var role = document.getElementById(\"lt-role\");\n\n      // Card slides up from below, name fades, accent underline draws, role fades.\n      gsap.set(card, { y: 60, opacity: 0 });\n      gsap.set(nameEl, { y: 14, opacity: 0 });\n      gsap.set(underline, { scaleX: 0 });\n      gsap.set(role, { opacity: 0 });\n\n      tl.to(card, { y: 0, opacity: 1, duration: 0.5, ease: \"power3.out\" }, 0.1);\n      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: \"power3.out\" }, 0.26);\n      tl.to(underline, { scaleX: 1, duration: 0.5, ease: \"power4.out\" }, 0.42);\n      tl.to(role, { opacity: 1, duration: 0.45, ease: \"power2.out\" }, 0.56);\n\n      // Exit: slide down + hard kill.\n      tl.to(card, { y: 24, opacity: 0, duration: 0.35, ease: \"power2.in\" }, 4.3);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-dark-card\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-kicker-name.json b/docs/public/catalog/blocks/lt-kicker-name.json
new file mode 100644
index 0000000000..2a0c66f428
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-kicker-name.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 130px;\n        bottom: 122px;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 14px;\n      }\n      #root .lt-kickwrap {\n        overflow: hidden;\n      }\n      #root .lt-kicker {\n        display: inline-block;\n        font-family: \"Space Mono\", monospace;\n        font-size: 22px;\n        font-weight: 700;\n        color: #141518;\n        background: #46e5b7;\n        padding: 6px 14px;\n        letter-spacing: 0.1em;\n        text-transform: uppercase;\n        white-space: nowrap;\n      }\n      #root .lt-name {\n        font-family: \"Archivo Black\", sans-serif;\n        font-size: 70px;\n        font-weight: 400;\n        color: #ffffff;\n        line-height: 0.98;\n        letter-spacing: -0.015em;\n        text-transform: uppercase;\n        white-space: nowrap;\n        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);\n      }\n      #root .lt-baseline {\n        height: 5px;\n        width: 100%;\n        background: #46e5b7;\n        border-radius: 3px;\n        transform-origin: 0% 50%;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-kicker-name\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div class=\"lt-kickwrap\">\n            <span id=\"lt-kicker\" class=\"lt-kicker\">Episode 47</span>\n          </div>\n          <div id=\"lt-name\" class=\"lt-name\">Maya Chen</div>\n          <div id=\"lt-baseline\" class=\"lt-baseline\"></div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var kicker = document.getElementById(\"lt-kicker\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var baseline = document.getElementById(\"lt-baseline\");\n\n      // Kicker drops in, name slams up, accent baseline draws.\n      gsap.set(kicker, { y: -40 });\n      gsap.set(nameEl, { y: 34, opacity: 0 });\n      gsap.set(baseline, { scaleX: 0 });\n\n      tl.to(kicker, { y: 0, duration: 0.42, ease: \"back.out(2)\" }, 0.1);\n      tl.to(nameEl, { y: 0, opacity: 1, duration: 0.45, ease: \"back.out(1.5)\" }, 0.32);\n      tl.to(baseline, { scaleX: 1, duration: 0.5, ease: \"power4.out\" }, 0.5);\n\n      // Exit: baseline retracts, text lifts, hard kill.\n      tl.to(baseline, { scaleX: 0, duration: 0.3, ease: \"power2.in\" }, 4.25);\n      tl.to(nameEl, { y: -16, opacity: 0, duration: 0.32, ease: \"power2.in\" }, 4.3);\n      tl.to(kicker, { y: -40, duration: 0.3, ease: \"power2.in\" }, 4.32);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-kicker-name\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-mask-reveal.json b/docs/public/catalog/blocks/lt-mask-reveal.json
new file mode 100644
index 0000000000..da68c070e5
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-mask-reveal.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"Montserrat\", sans-serif;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 130px;\n        bottom: 122px;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 14px;\n      }\n      #root .lt-namewrap {\n        position: relative;\n        overflow: hidden;\n        padding: 2px 0;\n      }\n      #root .lt-name {\n        font-size: 72px;\n        font-weight: 900;\n        color: #ffffff;\n        line-height: 0.98;\n        letter-spacing: -0.02em;\n        white-space: nowrap;\n        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.45);\n        will-change: clip-path;\n      }\n      #root .lt-sweep {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        width: 8px;\n        background: #ffd23f;\n      }\n      #root .lt-role {\n        font-size: 28px;\n        font-weight: 500;\n        color: #e7eaf0;\n        line-height: 1.2;\n        letter-spacing: 0.02em;\n        white-space: nowrap;\n        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-mask-reveal\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div class=\"lt-namewrap\">\n            <div id=\"lt-name\" class=\"lt-name\">Dr. Maya Chen</div>\n            <div id=\"lt-sweep\" class=\"lt-sweep\"></div>\n          </div>\n          <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var sweep = document.getElementById(\"lt-sweep\");\n      var role = document.getElementById(\"lt-role\");\n\n      // An accent sweep crosses left→right; the name is revealed by a clip-path wipe behind it; role fades up.\n      // Sweep travel: left:\"100%\" was parent-relative (offsetParent = .lt-namewrap). Since the sweep is\n      // only 8px wide, xPercent would travel just 8px, so translate by the container width in pixels instead.\n      // The .lt-namewrap shrink-wraps the name \"Dr. Maya Chen\" to 536px (no horizontal padding/border, so\n      // clientWidth == content width), which is exactly what left:\"100%\" resolved to.\n      var SWEEP_TRAVEL = 536;\n      gsap.set(nameEl, { clipPath: \"inset(0 100% 0 0)\" });\n      gsap.set(sweep, { x: 0, opacity: 0 });\n      gsap.set(role, { y: 14, opacity: 0 });\n\n      tl.to(sweep, { opacity: 1, duration: 0.12, ease: \"none\" }, 0.1);\n      tl.to(sweep, { x: SWEEP_TRAVEL, duration: 0.55, ease: \"power2.inOut\" }, 0.12);\n      tl.to(nameEl, { clipPath: \"inset(0 0% 0 0)\", duration: 0.5, ease: \"power2.inOut\" }, 0.16);\n      tl.to(sweep, { opacity: 0, duration: 0.15, ease: \"none\" }, 0.6);\n      tl.to(role, { y: 0, opacity: 1, duration: 0.5, ease: \"power3.out\" }, 0.55);\n\n      // Exit: name un-wipes, role fades, hard kill.\n      tl.to(role, { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 4.25);\n      tl.to(nameEl, { clipPath: \"inset(0 0 0 100%)\", duration: 0.4, ease: \"power2.in\" }, 4.3);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-mask-reveal\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-side-rule.json b/docs/public/catalog/blocks/lt-side-rule.json
new file mode 100644
index 0000000000..5fc8120cee
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-side-rule.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 130px;\n        bottom: 120px;\n        display: flex;\n        align-items: stretch;\n        gap: 26px;\n      }\n      #root .lt-bar {\n        width: 8px;\n        background: #46e5b7;\n        border-radius: 4px;\n        transform-origin: 50% 0%;\n        flex-shrink: 0;\n      }\n      #root .lt-text {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        gap: 12px;\n      }\n      #root .lt-name {\n        font-family: \"League Gothic\", sans-serif;\n        font-size: 92px;\n        font-weight: 400;\n        color: #ffffff;\n        line-height: 0.86;\n        letter-spacing: 0.01em;\n        text-transform: uppercase;\n        white-space: nowrap;\n        text-shadow: 0 2px 22px rgba(0, 0, 0, 0.5);\n      }\n      #root .lt-role {\n        font-family: \"JetBrains Mono\", monospace;\n        font-size: 26px;\n        font-weight: 400;\n        color: #e7eaf0;\n        line-height: 1.2;\n        letter-spacing: 0.04em;\n        white-space: nowrap;\n        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-side-rule\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-bar\" class=\"lt-bar\"></div>\n          <div class=\"lt-text\">\n            <div id=\"lt-name\" class=\"lt-name\">Dr. Maya Chen</div>\n            <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var bar = document.getElementById(\"lt-bar\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var role = document.getElementById(\"lt-role\");\n\n      // Vertical accent bar draws top→down, name and role slide in from the left.\n      gsap.set(bar, { scaleY: 0 });\n      gsap.set(nameEl, { x: -24, opacity: 0 });\n      gsap.set(role, { x: -24, opacity: 0 });\n\n      tl.to(bar, { scaleY: 1, duration: 0.5, ease: \"power3.out\" }, 0.1);\n      tl.to(nameEl, { x: 0, opacity: 1, duration: 0.5, ease: \"power3.out\" }, 0.26);\n      tl.to(role, { x: 0, opacity: 1, duration: 0.5, ease: \"power3.out\" }, 0.38);\n\n      // Exit: bar retracts, text lifts, hard kill.\n      tl.to(role, { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 4.25);\n      tl.to(nameEl, { y: -14, opacity: 0, duration: 0.32, ease: \"power2.in\" }, 4.3);\n      tl.to(bar, { scaleY: 0, duration: 0.32, ease: \"power2.in\" }, 4.32);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-side-rule\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-soft-pill.json b/docs/public/catalog/blocks/lt-soft-pill.json
new file mode 100644
index 0000000000..aa88586fdb
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-soft-pill.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"Montserrat\", sans-serif;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 120px;\n        bottom: 120px;\n      }\n      #root .lt-pill {\n        display: flex;\n        align-items: center;\n        gap: 22px;\n        background: #ffffff;\n        border-radius: 999px;\n        padding: 20px 40px 20px 26px;\n        box-shadow: 0 16px 46px rgba(15, 17, 21, 0.2);\n        transform-origin: 0% 100%;\n        will-change: transform;\n      }\n      #root .lt-dot {\n        width: 18px;\n        height: 18px;\n        border-radius: 50%;\n        background: #ff5a36;\n        flex-shrink: 0;\n      }\n      #root .lt-text {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n      }\n      #root .lt-name {\n        font-size: 46px;\n        font-weight: 700;\n        color: #0f1115;\n        line-height: 1.04;\n        letter-spacing: -0.015em;\n        white-space: nowrap;\n      }\n      #root .lt-role {\n        font-size: 25px;\n        font-weight: 400;\n        color: #5a6170;\n        line-height: 1.2;\n        letter-spacing: 0.01em;\n        white-space: nowrap;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-soft-pill\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-pill\" class=\"lt-pill\">\n            <div id=\"lt-dot\" class=\"lt-dot\"></div>\n            <div class=\"lt-text\">\n              <div id=\"lt-name\" class=\"lt-name\">Dr. Maya Chen</div>\n              <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var pill = document.getElementById(\"lt-pill\");\n      var dot = document.getElementById(\"lt-dot\");\n      var nameEl = document.getElementById(\"lt-name\");\n      var role = document.getElementById(\"lt-role\");\n\n      // Pill scales up from the lower-left anchor, dot pulses in, text settles.\n      gsap.set(pill, { scale: 0.88, y: 18, opacity: 0 });\n      gsap.set(dot, { scale: 0 });\n      gsap.set([nameEl, role], { opacity: 0, x: -10 });\n\n      tl.to(pill, { scale: 1, y: 0, opacity: 1, duration: 0.55, ease: \"back.out(1.7)\" }, 0.1);\n      tl.to(dot, { scale: 1, duration: 0.4, ease: \"back.out(3)\" }, 0.4);\n      tl.to(nameEl, { opacity: 1, x: 0, duration: 0.45, ease: \"power3.out\" }, 0.42);\n      tl.to(role, { opacity: 1, x: 0, duration: 0.45, ease: \"power3.out\" }, 0.5);\n\n      // Exit: settle down + hard kill.\n      tl.to(pill, { scale: 0.94, y: 14, opacity: 0, duration: 0.35, ease: \"power2.in\" }, 4.3);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-soft-pill\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/lt-stack-bars.json b/docs/public/catalog/blocks/lt-stack-bars.json
new file mode 100644
index 0000000000..2cf9517d39
--- /dev/null
+++ b/docs/public/catalog/blocks/lt-stack-bars.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n      }\n\n      #root .lt {\n        position: absolute;\n        left: 120px;\n        bottom: 116px;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 8px;\n      }\n      #root .lt-namebar {\n        background: #141518;\n        padding: 14px 30px;\n        will-change: clip-path;\n      }\n      #root .lt-name {\n        font-family: \"Archivo Black\", sans-serif;\n        font-size: 52px;\n        font-weight: 400;\n        color: #ffffff;\n        line-height: 1;\n        letter-spacing: -0.015em;\n        text-transform: uppercase;\n        white-space: nowrap;\n      }\n      #root .lt-rolebar {\n        background: #ffd23f;\n        padding: 9px 22px;\n        margin-left: 14px;\n        will-change: clip-path;\n      }\n      #root .lt-role {\n        font-family: \"Space Mono\", monospace;\n        font-size: 23px;\n        font-weight: 700;\n        color: #141518;\n        line-height: 1;\n        letter-spacing: 0.06em;\n        text-transform: uppercase;\n        white-space: nowrap;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"lt-stack-bars\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.8\"\n    >\n      <div id=\"lt-clip\" class=\"clip\" data-start=\"0\" data-duration=\"4.8\" data-track-index=\"0\">\n        <div id=\"lt\" class=\"lt\">\n          <div id=\"lt-namebar\" class=\"lt-namebar\">\n            <div id=\"lt-name\" class=\"lt-name\">Maya Chen</div>\n          </div>\n          <div id=\"lt-rolebar\" class=\"lt-rolebar\">\n            <div id=\"lt-role\" class=\"lt-role\">Host · Neuroscientist</div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var wrap = document.getElementById(\"lt\");\n      var namebar = document.getElementById(\"lt-namebar\");\n      var rolebar = document.getElementById(\"lt-rolebar\");\n\n      // Name bar wipes in from the left; role bar wipes in from the right (opposing).\n      gsap.set(namebar, { clipPath: \"inset(0 100% 0 0)\" });\n      gsap.set(rolebar, { clipPath: \"inset(0 0 0 100%)\" });\n\n      tl.to(namebar, { clipPath: \"inset(0 0% 0 0)\", duration: 0.5, ease: \"power4.out\" }, 0.1);\n      tl.to(rolebar, { clipPath: \"inset(0 0% 0 0%)\", duration: 0.5, ease: \"power4.out\" }, 0.34);\n\n      // Exit: both wipe back out, hard kill.\n      tl.to(rolebar, { clipPath: \"inset(0 0 0 100%)\", duration: 0.32, ease: \"power3.in\" }, 4.25);\n      tl.to(namebar, { clipPath: \"inset(0 100% 0 0)\", duration: 0.36, ease: \"power3.in\" }, 4.32);\n      tl.set(wrap, { visibility: \"hidden\" }, 4.75);\n\n      window.__timelines[\"lt-stack-bars\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/macos-notification.json b/docs/public/catalog/blocks/macos-notification.json
new file mode 100644
index 0000000000..eaacd5d2bb
--- /dev/null
+++ b/docs/public/catalog/blocks/macos-notification.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"Inter\", sans-serif;\n      }\n\n      [data-composition-id=\"macos-notification\"] .notification-card {\n        position: absolute;\n        top: 24px;\n        right: 24px;\n        width: 380px;\n        background: rgba(30, 30, 30, 0.82);\n        backdrop-filter: blur(40px);\n        -webkit-backdrop-filter: blur(40px);\n        border-radius: 16px;\n        padding: 16px;\n        box-shadow:\n          0 8px 32px rgba(0, 0, 0, 0.4),\n          inset 0 0 0 0.5px rgba(255, 255, 255, 0.1);\n        display: flex;\n        gap: 12px;\n        align-items: flex-start;\n      }\n\n      [data-composition-id=\"macos-notification\"] .app-icon {\n        width: 36px;\n        height: 36px;\n        border-radius: 8px;\n        flex-shrink: 0;\n        overflow: hidden;\n      }\n\n      [data-composition-id=\"macos-notification\"] .app-icon svg {\n        width: 36px;\n        height: 36px;\n        display: block;\n      }\n\n      [data-composition-id=\"macos-notification\"] .notification-content {\n        flex: 1;\n        min-width: 0;\n      }\n\n      [data-composition-id=\"macos-notification\"] .notification-header {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 2px;\n      }\n\n      [data-composition-id=\"macos-notification\"] .app-name {\n        font-size: 13px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.5);\n        text-transform: uppercase;\n        letter-spacing: 0.02em;\n      }\n\n      [data-composition-id=\"macos-notification\"] .time-label {\n        font-size: 13px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.35);\n      }\n\n      [data-composition-id=\"macos-notification\"] .notification-title {\n        font-size: 15px;\n        font-weight: 600;\n        color: #ffffff;\n        line-height: 1.3;\n        margin-bottom: 2px;\n      }\n\n      [data-composition-id=\"macos-notification\"] .notification-body {\n        font-size: 13px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.6);\n        line-height: 1.35;\n        display: -webkit-box;\n        -webkit-line-clamp: 2;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"macos-notification\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"5\"\n    >\n      <div\n        id=\"notification\"\n        class=\"clip notification-card\"\n        data-start=\"0\"\n        data-duration=\"5\"\n        data-track-index=\"0\"\n      >\n        <div class=\"app-icon\">\n          <svg viewBox=\"0 0 36 36\" fill=\"none\">\n            <defs>\n              <linearGradient\n                id=\"icon-grad\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"36\"\n                y2=\"36\"\n                gradientUnits=\"userSpaceOnUse\"\n              >\n                <stop offset=\"0%\" stop-color=\"#6366f1\" />\n                <stop offset=\"100%\" stop-color=\"#8b5cf6\" />\n              </linearGradient>\n            </defs>\n            <rect width=\"36\" height=\"36\" rx=\"8\" fill=\"url(#icon-grad)\" />\n            <text\n              x=\"18\"\n              y=\"23\"\n              text-anchor=\"middle\"\n              font-family=\"Inter, sans-serif\"\n              font-size=\"14\"\n              font-weight=\"700\"\n              fill=\"#fff\"\n            >\n              HF\n            </text>\n          </svg>\n        </div>\n        <div class=\"notification-content\">\n          <div class=\"notification-header\">\n            <span class=\"app-name\">HyperFrames</span>\n            <span class=\"time-label\">now</span>\n          </div>\n          <div class=\"notification-title\">Prompt to replace this title</div>\n          <div class=\"notification-body\">\n            Prompt to change this body text, the app icon, and the app name to match your content.\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n      var notification = document.getElementById(\"notification\");\n\n      // Start off-screen to the right\n      gsap.set(notification, { x: 420, opacity: 0 });\n\n      // Slide in from right\n      tl.to(\n        notification,\n        {\n          x: 0,\n          opacity: 1,\n          duration: 0.5,\n          ease: \"power3.out\",\n        },\n        0.2,\n      );\n\n      // Slide out to right\n      tl.to(\n        notification,\n        {\n          x: 420,\n          opacity: 0,\n          duration: 0.3,\n          ease: \"power3.in\",\n        },\n        4.2,\n      );\n\n      window.__timelines[\"macos-notification\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/macos-tahoe-liquid-glass.json b/docs/public/catalog/blocks/macos-tahoe-liquid-glass.json
new file mode 100644
index 0000000000..bba4543e00
--- /dev/null
+++ b/docs/public/catalog/blocks/macos-tahoe-liquid-glass.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #050508;\n        overflow: hidden;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #050508;\n      }\n      .tahoe-desktop {\n        position: relative;\n        width: 1440px;\n        height: 900px;\n        overflow: hidden;\n        isolation: isolate;\n        background-image:\n          linear-gradient(\n            180deg,\n            rgba(7, 18, 34, 0.08),\n            rgba(7, 18, 34, 0.02) 44%,\n            rgba(7, 18, 34, 0.22)\n          ),\n          url(\"/public/catalog/assets/3df3bfa4dd7eb335.jpg\");\n        background-size: cover;\n        background-position: center center;\n        color: #fff;\n      }\n      .tahoe-desktop::before {\n        content: \"\";\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        z-index: 0;\n        background:\n          radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.2), transparent 28%),\n          linear-gradient(90deg, rgba(0, 0, 0, 0.1), transparent 32%, rgba(255, 255, 255, 0.08));\n      }\n      .tahoe-menu-bar {\n        position: relative;\n        z-index: 6;\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        height: 28px;\n        padding: 5px 14px;\n        background: rgba(20, 47, 83, 0.28);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.22);\n        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);\n        font-size: 10px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.94);\n        backdrop-filter: blur(30px) saturate(1.45);\n      }\n      .tahoe-stage {\n        position: relative;\n        z-index: 5;\n        height: 690px;\n      }\n      .tahoe-window {\n        position: absolute;\n        left: 106px;\n        top: 226px;\n        width: 610px;\n        height: 360px;\n        z-index: 5;\n        overflow: hidden;\n        border: 1px solid rgba(255, 255, 255, 0.34);\n        border-radius: 18px;\n        background: rgba(246, 252, 255, 0.7);\n        color: rgba(18, 40, 66, 0.92);\n        backdrop-filter: blur(26px) saturate(1.3);\n        box-shadow:\n          0 22px 58px rgba(6, 38, 82, 0.22),\n          inset 0 1px 0 rgba(255, 255, 255, 0.62);\n      }\n      .tahoe-window-titlebar {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        height: 38px;\n        padding: 9px 14px;\n        background: rgba(255, 255, 255, 0.34);\n        border-bottom: 1px solid rgba(255, 255, 255, 0.28);\n      }\n      .tahoe-traffic-light {\n        display: inline-block;\n        width: 12px;\n        height: 12px;\n        border-radius: 50%;\n      }\n      .tahoe-finder-body {\n        position: relative;\n        display: flex;\n        height: 322px;\n      }\n      .tahoe-sidebar {\n        width: 158px;\n        padding: 12px;\n        border-right: 1px solid rgba(255, 255, 255, 0.26);\n        background: rgba(255, 255, 255, 0.2);\n        font-size: 10px;\n      }\n      .tahoe-sidebar-row {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 6px 8px;\n        border-radius: 8px;\n        color: rgba(10, 35, 64, 0.78);\n      }\n      .tahoe-sidebar-row.active {\n        background: rgba(52, 147, 236, 0.26);\n        color: rgba(4, 50, 110, 0.98);\n        font-weight: 700;\n      }\n      .tahoe-sidebar-icon {\n        width: 16px;\n        height: 16px;\n        object-fit: cover;\n        border-radius: 5px;\n        flex: 0 0 auto;\n      }\n      .tahoe-file-grid {\n        flex: 1;\n        display: grid;\n        grid-template-columns: repeat(4, 1fr);\n        gap: 10px 8px;\n        align-content: start;\n        padding: 18px 18px;\n      }\n      .tahoe-file {\n        padding: 8px;\n        text-align: center;\n      }\n      .tahoe-folder-icon,\n      .tahoe-document-icon {\n        position: relative;\n        width: 54px;\n        height: 42px;\n        margin: 0 auto 8px;\n        border-radius: 10px;\n        background: linear-gradient(180deg, #9fe1ff 0%, #258dff 100%);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.5),\n          0 10px 20px rgba(0, 0, 0, 0.24);\n      }\n      .tahoe-folder-icon::before {\n        content: \"\";\n        position: absolute;\n        top: -7px;\n        left: 6px;\n        width: 26px;\n        height: 12px;\n        border-radius: 7px 7px 2px 2px;\n        background: linear-gradient(180deg, #9ad8ff 0%, #3ca2ff 100%);\n      }\n      .tahoe-document-icon {\n        width: 40px;\n        height: 52px;\n        border-radius: 8px;\n        background: linear-gradient(180deg, #ffffff 0%, #cfd8e6 100%);\n      }\n      .tahoe-document-icon::after {\n        content: \"\";\n        position: absolute;\n        top: 9px;\n        left: 9px;\n        width: 22px;\n        height: 3px;\n        border-radius: 2px;\n        background: #7b8796;\n        box-shadow:\n          0 9px 0 #9aa5b2,\n          0 18px 0 #b2bcc8;\n      }\n      .tahoe-file-label {\n        color: rgba(7, 31, 58, 0.94);\n        font-size: 10px;\n        font-weight: 700;\n        line-height: 1.15;\n        text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);\n      }\n      .tahoe-widgets {\n        position: absolute;\n        left: 28px;\n        top: 44px;\n        z-index: 5;\n        display: grid;\n        grid-template-columns: 92px 92px;\n        gap: 8px;\n      }\n      .tahoe-widget {\n        overflow: hidden;\n        border: 1px solid rgba(255, 255, 255, 0.42);\n        border-radius: 18px;\n        background: rgba(247, 253, 255, 0.72);\n        color: rgba(14, 45, 76, 0.9);\n        backdrop-filter: blur(26px) saturate(1.45);\n        box-shadow:\n          0 18px 34px rgba(13, 61, 115, 0.2),\n          inset 0 1px 0 rgba(255, 255, 255, 0.72);\n      }\n      .tahoe-calendar-widget {\n        width: 92px;\n        height: 110px;\n        padding: 9px;\n      }\n      .tahoe-weather-widget {\n        width: 92px;\n        height: 110px;\n        padding: 9px;\n        background: linear-gradient(160deg, rgba(30, 119, 238, 0.72), rgba(255, 255, 255, 0.44));\n        color: #fff;\n      }\n      .tahoe-media-widget {\n        grid-column: 1 / span 2;\n        width: 192px;\n        height: 96px;\n        background:\n          linear-gradient(140deg, rgba(13, 16, 22, 0.12), rgba(255, 255, 255, 0.24)),\n          radial-gradient(circle at 18% 20%, #ffb88b, transparent 32%),\n          radial-gradient(circle at 76% 28%, #ed2f7a, transparent 34%),\n          linear-gradient(135deg, #451a03, #0f172a);\n      }\n      .tahoe-calendar-days {\n        display: grid;\n        grid-template-columns: repeat(7, 1fr);\n        gap: 2px;\n        margin-top: 7px;\n        font-size: 5.5px;\n        font-weight: 800;\n        text-align: center;\n        color: rgba(20, 51, 83, 0.66);\n      }\n      .tahoe-glass-panel {\n        border: 1px solid rgba(255, 255, 255, 0.22);\n        border-radius: 24px;\n        background:\n          linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.1)),\n          rgba(10, 14, 24, 0.78);\n        box-shadow:\n          inset 0 1px 0 rgba(255, 255, 255, 0.32),\n          0 20px 54px rgba(0, 0, 0, 0.34);\n      }\n      .tahoe-notification {\n        position: absolute;\n        z-index: 7;\n        top: 58px;\n        right: 36px;\n        width: 374px;\n        display: flex;\n        gap: 12px;\n        min-height: 86px;\n        padding: 14px 16px;\n        border: 1px solid rgba(255, 255, 255, 0.42);\n        border-radius: 28px;\n        background:\n          linear-gradient(\n            140deg,\n            rgba(255, 255, 255, 0.62),\n            rgba(255, 255, 255, 0.26) 48%,\n            rgba(255, 255, 255, 0.42)\n          ),\n          rgba(233, 249, 255, 0.56);\n        color: #fff;\n        backdrop-filter: blur(30px) saturate(1.55);\n        box-shadow:\n          0 22px 46px rgba(4, 55, 112, 0.25),\n          inset 0 1px 0 rgba(255, 255, 255, 0.72),\n          inset 0 -18px 38px rgba(255, 255, 255, 0.1);\n      }\n      .tahoe-notification::before {\n        content: \"\";\n        position: absolute;\n        inset: 1px;\n        border-radius: inherit;\n        pointer-events: none;\n        background: linear-gradient(\n          120deg,\n          rgba(255, 255, 255, 0.58),\n          transparent 34%,\n          rgba(255, 255, 255, 0.22)\n        );\n        mix-blend-mode: screen;\n        opacity: 0.5;\n      }\n      .tahoe-notification img {\n        position: relative;\n        width: 40px;\n        height: 40px;\n        border-radius: 10px;\n        object-fit: cover;\n        flex: 0 0 auto;\n      }\n      .tahoe-panel-title {\n        position: relative;\n        color: rgba(8, 30, 58, 0.98);\n        font-size: 17px;\n        font-weight: 800;\n        line-height: 1.1;\n        text-shadow: 0 1px 6px rgba(255, 255, 255, 0.56);\n      }\n      .tahoe-panel-subtitle {\n        position: relative;\n        margin-top: 4px;\n        color: rgba(9, 36, 66, 0.86);\n        font-size: 12.5px;\n        font-weight: 700;\n        line-height: 1.35;\n        text-shadow: 0 1px 6px rgba(255, 255, 255, 0.48);\n      }\n      .tahoe-control-center {\n        padding: 14px;\n      }\n      .tahoe-toggle-grid {\n        display: grid;\n        grid-template-columns: repeat(2, 1fr);\n        gap: 10px;\n        margin-top: 12px;\n      }\n      .tahoe-toggle {\n        min-height: 48px;\n        padding: 9px 10px;\n        border-radius: 16px;\n        background: rgba(255, 255, 255, 0.16);\n        color: rgba(255, 255, 255, 0.9);\n        font-size: 12px;\n        font-weight: 760;\n        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);\n      }\n      .tahoe-toggle.active {\n        background: linear-gradient(135deg, rgba(0, 122, 255, 0.9), rgba(52, 211, 153, 0.68));\n      }\n      .tahoe-slider {\n        height: 12px;\n        margin-top: 12px;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.18);\n        overflow: hidden;\n      }\n      .tahoe-slider::before {\n        content: \"\";\n        display: block;\n        width: 72%;\n        height: 100%;\n        border-radius: inherit;\n        background: linear-gradient(90deg, #a7f3d0, #38bdf8, #c084fc);\n      }\n      .tahoe-media {\n        padding: 14px;\n      }\n      .tahoe-media-row {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        margin-top: 12px;\n      }\n      .tahoe-album {\n        width: 48px;\n        height: 48px;\n        border-radius: 14px;\n        background: linear-gradient(135deg, #ec4899, #f59e0b 48%, #38bdf8);\n        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);\n      }\n      .tahoe-dock {\n        position: absolute;\n        z-index: 6;\n        left: 50%;\n        bottom: 24px;\n        width: auto;\n        display: flex;\n        align-items: flex-end;\n        gap: 7px;\n        padding: 8px 12px;\n        border: 1px solid rgba(255, 255, 255, 0.42);\n        border-radius: 22px;\n        background: rgba(255, 255, 255, 0.52);\n        transform: translateX(-50%);\n        backdrop-filter: blur(28px) saturate(1.45);\n        box-shadow:\n          0 22px 44px rgba(6, 38, 82, 0.24),\n          inset 0 1px 0 rgba(255, 255, 255, 0.72);\n      }\n      .tahoe-dock-icon {\n        display: block;\n        width: 46px;\n        height: 46px;\n        object-fit: cover;\n        border-radius: 13px;\n        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.28);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"macos-tahoe-liquid-glass\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"15\"\n      data-root=\"true\"\n    >\n      <!-- LIVE HTML captured every frame via drawElementImage  -->\n      <canvas\n        id=\"cap-phone\"\n        layoutsubtree\n        aria-hidden=\"true\"\n        width=\"390\"\n        height=\"844\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 390px;\n          height: 844px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <div\n          id=\"phone-html\"\n          style=\"\n            width: 390px;\n            height: 844px;\n            overflow: hidden;\n            font-family: Inter, system-ui, sans-serif;\n            color: #e2e8f0;\n          \"\n        >\n          <div\n            id=\"phone-scroll\"\n            style=\"background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)\"\n          >\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                padding: 14px 18px;\n                border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n              \"\n            >\n              <span\n                style=\"\n                  font-weight: 800;\n                  font-size: 14px;\n                  background: linear-gradient(135deg, #34d399, #3b82f6);\n                  -webkit-background-clip: text;\n                  -webkit-text-fill-color: transparent;\n                \"\n                >HyperFrames</span\n              ><span\n                style=\"\n                  font-size: 10px;\n                  font-weight: 600;\n                  padding: 5px 12px;\n                  border-radius: 6px;\n                  background: #10b981;\n                  color: #fff;\n                \"\n                >Log in</span\n              >\n            </div>\n            <div\n              id=\"phone-title\"\n              style=\"\n                font-size: 26px;\n                font-weight: 800;\n                letter-spacing: -0.5px;\n                padding: 18px 18px 6px;\n                line-height: 1.1;\n                opacity: 0;\n              \"\n            >\n              Community Playground\n            </div>\n            <div style=\"font-size: 11px; color: rgba(255, 255, 255, 0.4); padding: 0 18px 14px\">\n              Made with HyperFrames\n            </div>\n            <div style=\"display: flex; gap: 6px; padding: 0 18px 14px\">\n              <span\n                style=\"\n                  font-size: 9px;\n                  font-weight: 600;\n                  padding: 4px 10px;\n                  border-radius: 16px;\n                  background: rgba(16, 185, 129, 0.15);\n                  color: #10b981;\n                  border: 1px solid rgba(16, 185, 129, 0.3);\n                \"\n                >Examples</span\n              ><span\n                id=\"phone-count\"\n                style=\"\n                  font-size: 9px;\n                  font-weight: 600;\n                  padding: 4px 10px;\n                  border-radius: 16px;\n                  border: 1px solid rgba(255, 255, 255, 0.1);\n                  color: rgba(255, 255, 255, 0.5);\n                \"\n                >Catalog 0</span\n              >\n            </div>\n            <div id=\"phone-cards\" style=\"display: grid; gap: 10px; padding: 0 18px 18px\"></div>\n          </div>\n        </div>\n      </canvas>\n\n      <img\n        src=\"/public/catalog/assets/3df3bfa4dd7eb335.jpg\"\n        alt=\"\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      />\n\n      <canvas\n        id=\"cap-laptop\"\n        layoutsubtree\n        aria-hidden=\"true\"\n        width=\"1440\"\n        height=\"900\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1440px;\n          height: 900px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <div\n          id=\"laptop-html\"\n          style=\"\n            width: 1440px;\n            height: 900px;\n            overflow: hidden;\n            font-family: Inter, system-ui, sans-serif;\n            color: #e2e8f0;\n          \"\n        >\n          <div id=\"laptop-scroll\" class=\"tahoe-desktop\" style=\"transform: translateY(0)\">\n            <div id=\"laptop-title\" style=\"display: none\"></div>\n            <span id=\"laptop-count\" style=\"display: none\"></span>\n            <div id=\"laptop-cards\" style=\"display: none\"></div>\n            <!-- Menu Bar -->\n            <div class=\"tahoe-menu-bar\">\n              <span style=\"font-weight: 800; font-size: 15px\">&#63743;</span>\n              <span style=\"font-weight: 600\">Finder</span>\n              <span>File</span><span>Edit</span><span>View</span><span>Go</span><span>Window</span\n              ><span>Help</span>\n              <div style=\"flex: 1\"></div>\n              <span style=\"font-size: 10px\">CC</span>\n              <span style=\"font-size: 10px\">Search</span>\n              <span style=\"font-size: 10px\">92%</span>\n              <span style=\"font-size: 10px\">Wi-Fi</span>\n              <span style=\"font-size: 10px; font-variant-numeric: tabular-nums\"\n                >Tue Apr 1 9:41 AM</span\n              >\n            </div>\n            <div class=\"tahoe-widgets\">\n              <div class=\"tahoe-widget tahoe-calendar-widget\">\n                <div style=\"font-size: 6px; font-weight: 900; color: rgba(249, 66, 58, 0.84)\">\n                  APRIL\n                </div>\n                <div class=\"tahoe-calendar-days\">\n                  <span>S</span><span>M</span><span>T</span><span>W</span><span>T</span\n                  ><span>F</span><span>S</span> <span></span><span></span\n                  ><span style=\"color: #fff; background: #f0423a; border-radius: 99px\">1</span\n                  ><span>2</span><span>3</span><span>4</span><span>5</span> <span>6</span\n                  ><span>7</span><span>8</span><span>9</span><span>10</span><span>11</span\n                  ><span>12</span> <span>13</span><span>14</span><span>15</span><span>16</span\n                  ><span>17</span><span>18</span><span>19</span> <span>20</span><span>21</span\n                  ><span>22</span><span>23</span><span>24</span><span>25</span><span>26</span>\n                </div>\n              </div>\n              <div class=\"tahoe-widget tahoe-weather-widget\">\n                <div style=\"font-size: 7px; font-weight: 900\">San Francisco</div>\n                <div style=\"font-size: 28px; font-weight: 800; line-height: 1; margin-top: 4px\">\n                  53&deg;\n                </div>\n                <div style=\"font-size: 7px; font-weight: 800; opacity: 0.9; margin-top: 12px\">\n                  Partly Cloudy\n                </div>\n                <div style=\"font-size: 6px; font-weight: 800; opacity: 0.82\">H:58° L:50°</div>\n              </div>\n              <div class=\"tahoe-widget tahoe-media-widget\"></div>\n            </div>\n            <div id=\"mac-toast\" class=\"tahoe-notification\">\n              <img src=\"/public/catalog/assets/183a84d8c46fc058.jpg\" alt=\"\" />\n              <div>\n                <div class=\"tahoe-panel-title\">\n                  <span>Messages</span> <span style=\"font-size: 11px; opacity: 0.78\">now</span>\n                </div>\n                <div class=\"tahoe-panel-subtitle\">Liquid Glass preview is ready for review.</div>\n              </div>\n            </div>\n            <div class=\"tahoe-stage\">\n              <div class=\"tahoe-window\">\n                <div class=\"tahoe-window-titlebar\">\n                  <span class=\"tahoe-traffic-light\" style=\"background: #ff5f57\"></span>\n                  <span class=\"tahoe-traffic-light\" style=\"background: #febc2e\"></span>\n                  <span class=\"tahoe-traffic-light\" style=\"background: #28c840\"></span>\n                  <span\n                    style=\"\n                      flex: 1;\n                      text-align: center;\n                      font-size: 13px;\n                      font-weight: 600;\n                      color: rgba(20, 46, 76, 0.72);\n                    \"\n                    >HyperFrames</span\n                  >\n                </div>\n                <div id=\"macos-finder-body\" class=\"tahoe-finder-body\">\n                  <div class=\"tahoe-sidebar\">\n                    <div class=\"tahoe-sidebar-row active\">\n                      <img class=\"tahoe-sidebar-icon\" src=\"/public/catalog/assets/c6ba3c460ea77557.png\" alt=\"\" />\n                      Favorites\n                    </div>\n                    <div class=\"tahoe-sidebar-row\">\n                      <img class=\"tahoe-sidebar-icon\" src=\"/public/catalog/assets/0780dac27f53fe4c.jpg\" alt=\"\" />\n                      Home\n                    </div>\n                    <div class=\"tahoe-sidebar-row\">\n                      <img class=\"tahoe-sidebar-icon\" src=\"/public/catalog/assets/1e7da3801fb49746.jpg\" alt=\"\" />\n                      Desktop\n                    </div>\n                    <div class=\"tahoe-sidebar-row\">\n                      <img class=\"tahoe-sidebar-icon\" src=\"/public/catalog/assets/523ef5a35af5993c.jpg\" alt=\"\" />\n                      Downloads\n                    </div>\n                    <div class=\"tahoe-sidebar-row\">\n                      <img class=\"tahoe-sidebar-icon\" src=\"/public/catalog/assets/2bb6166f2b46a075.jpg\" alt=\"\" />\n                      Pictures\n                    </div>\n                    <div class=\"tahoe-sidebar-row\">\n                      <img class=\"tahoe-sidebar-icon\" src=\"/public/catalog/assets/00bd6b886fd23c9e.jpg\" alt=\"\" />\n                      Music\n                    </div>\n                  </div>\n                  <div class=\"tahoe-file-grid\">\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-folder-icon\"></div>\n                      <div class=\"tahoe-file-label\">packages</div>\n                    </div>\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-folder-icon\"></div>\n                      <div class=\"tahoe-file-label\">registry</div>\n                    </div>\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-folder-icon\"></div>\n                      <div class=\"tahoe-file-label\">docs</div>\n                    </div>\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-folder-icon\"></div>\n                      <div class=\"tahoe-file-label\">skills</div>\n                    </div>\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-document-icon\"></div>\n                      <div class=\"tahoe-file-label\">AGENTS.md</div>\n                    </div>\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-document-icon\"></div>\n                      <div class=\"tahoe-file-label\">package.json</div>\n                    </div>\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-folder-icon\"></div>\n                      <div class=\"tahoe-file-label\">playground</div>\n                    </div>\n                    <div class=\"tahoe-file\">\n                      <div class=\"tahoe-folder-icon\"></div>\n                      <div class=\"tahoe-file-label\">scripts</div>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <div class=\"tahoe-dock\">\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/c6ba3c460ea77557.png\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/1e7da3801fb49746.jpg\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/523ef5a35af5993c.jpg\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/a1c4ba842d1941d5.jpg\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/2bb6166f2b46a075.jpg\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/183a84d8c46fc058.jpg\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/00bd6b886fd23c9e.jpg\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/407d01c660156970.jpg\" alt=\"\" />\n              <img class=\"tahoe-dock-icon\" src=\"/public/catalog/assets/919d352f7d618546.jpg\" alt=\"\" />\n            </div>\n          </div>\n        </div>\n      </canvas>\n\n      <canvas\n        id=\"theater\"\n        width=\"1920\"\n        height=\"1080\"\n        style=\"position: absolute; top: 0; left: 0; width: 1920px; height: 1080px\"\n      ></canvas>\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"15\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      var W = 1920,\n        H = 1080,\n        PI = Math.PI;\n\n      // ── Renderer ───────────────────────────────────────────────────────\n      var renderer = new THREE.WebGLRenderer({\n        canvas: document.getElementById(\"theater\"),\n        antialias: true,\n        preserveDrawingBuffer: true,\n      });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n      renderer.toneMapping = THREE.ACESFilmicToneMapping;\n      renderer.toneMappingExposure = 1.15;\n      renderer.outputEncoding = THREE.sRGBEncoding;\n      renderer.setClearColor(0x050508, 1);\n\n      var scene = new THREE.Scene();\n      scene.background = new THREE.Color(0x050508);\n      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);\n\n      // ── Environment Map ────────────────────────────────────────────────\n      var eC = document.createElement(\"canvas\");\n      eC.width = 1024;\n      eC.height = 512;\n      var ec = eC.getContext(\"2d\");\n      var eg = ec.createLinearGradient(0, 0, 1024, 512);\n      eg.addColorStop(0, \"#020307\");\n      eg.addColorStop(0.15, \"#1a1a2e\");\n      eg.addColorStop(0.3, \"#ffffff\");\n      eg.addColorStop(0.45, \"#0a0a1e\");\n      eg.addColorStop(0.6, \"#ffffff\");\n      eg.addColorStop(0.75, \"#1e1e2e\");\n      eg.addColorStop(1, \"#020307\");\n      ec.fillStyle = eg;\n      ec.fillRect(0, 0, 1024, 512);\n      ec.globalCompositeOperation = \"screen\";\n      for (var ei = 0; ei < 7; ei++) {\n        ec.fillStyle = \"rgba(255,255,255,\" + (ei % 2 === 0 ? 0.15 : 0.08) + \")\";\n        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);\n      }\n      var eT = new THREE.CanvasTexture(eC);\n      eT.mapping = THREE.EquirectangularReflectionMapping;\n      var pm = new THREE.PMREMGenerator(renderer);\n      scene.environment = pm.fromEquirectangular(eT).texture;\n      eT.dispose();\n      pm.dispose();\n\n      // ── Three.js shader backdrop ────────────────────────────────────────\n      var bgUniforms = { uTime: { value: 0 }, uAspect: { value: W / H } };\n      var bgPlane = new THREE.Mesh(\n        new THREE.PlaneGeometry(28, 16),\n        new THREE.ShaderMaterial({\n          uniforms: bgUniforms,\n          vertexShader:\n            \"varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}\",\n          fragmentShader:\n            \"uniform float uTime;uniform float uAspect;varying vec2 v;float wave(vec2 p,float s,float t){return sin(p.x*s+p.y*s*.57+uTime*t);}void main(){vec2 p=v*2.0-1.0;p.x*=uAspect;float w=wave(p,3.0,.22)+.55*wave(p.yx+vec2(.7,-.2),5.1,.16)+.32*wave(p+vec2(-.4,.5),8.0,-.12);float a=smoothstep(-.75,1.05,w);vec3 navy=vec3(.015,.013,.055);vec3 cyan=vec3(.02,.42,.72);vec3 violet=vec3(.30,.08,.55);vec3 amber=vec3(.95,.42,.04);float ribbon=smoothstep(.22,.95,sin(p.x*2.2-p.y*3.1+uTime*.18));vec3 c=mix(navy,cyan,a);c=mix(c,violet,smoothstep(.16,1.1,wave(p+vec2(.8,.1),2.4,.1)));c+=amber*ribbon*.33;float glow=exp(-dot(p+vec2(.62,-.08),p+vec2(.62,-.08))*1.7);c+=vec3(.10,.45,.55)*glow;float vign=smoothstep(1.85,.25,length(p));gl_FragColor=vec4(c*vign,1.0);}\",\n          depthTest: false,\n          depthWrite: false,\n        }),\n      );\n      bgPlane.position.z = -7.5;\n      scene.add(bgPlane);\n\n      var floor = new THREE.Mesh(\n        new THREE.PlaneGeometry(30, 30),\n        new THREE.MeshStandardMaterial({ color: 0x081427, metalness: 0.9, roughness: 0.2 }),\n      );\n      floor.rotation.x = -PI / 2;\n      floor.position.y = -2.5;\n      scene.add(floor);\n\n      scene.add(new THREE.AmbientLight(0x222233, 0.5));\n      var kL = new THREE.DirectionalLight(0xffffff, 2.2);\n      kL.position.set(-3, 4, 5);\n      scene.add(kL);\n      var rL = new THREE.PointLight(0x6366f1, 3, 15);\n      rL.position.set(4, 2, 3);\n      scene.add(rL);\n      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);\n      wL.position.set(-3, -1, 4);\n      scene.add(wL);\n\n      // ── Live HTML → WebGL Texture  ─\n      var capPhoneCvs = document.getElementById(\"cap-phone\");\n      var capPhoneCtx = capPhoneCvs.getContext(\"2d\");\n      var phoneHtmlEl = document.getElementById(\"phone-html\");\n\n      var capLapCvs = document.getElementById(\"cap-laptop\");\n      var capLapCtx = capLapCvs.getContext(\"2d\");\n      var lapHtmlEl = document.getElementById(\"laptop-html\");\n\n      var apiOk = (function () {\n        var tc = document.createElement(\"canvas\");\n        if (!(\"layoutSubtree\" in tc)) return false;\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        var ctx = tc.getContext(\"2d\");\n        return ctx && typeof ctx.drawElementImage === \"function\";\n      })();\n      var paintReady = false;\n\n      function waitForImages() {\n        var images = Array.prototype.slice.call(document.querySelectorAll(\"img\"));\n        return Promise.all(\n          images.map(function (image) {\n            if (image.complete) return Promise.resolve();\n            return new Promise(function (resolveImage) {\n              image.onload = resolveImage;\n              image.onerror = resolveImage;\n            });\n          }),\n        );\n      }\n\n      function waitForPaint(canvas) {\n        return new Promise(function (resolvePaint) {\n          if (!canvas || typeof canvas.requestPaint !== \"function\") {\n            resolvePaint();\n            return;\n          }\n          var resolved = false;\n          function done() {\n            if (resolved) return;\n            resolved = true;\n            canvas.onpaint = null;\n            resolvePaint();\n          }\n          canvas.onpaint = done;\n          canvas.requestPaint();\n          setTimeout(done, 100);\n        });\n      }\n\n      // Generate card HTML for both screens\n      var cardData = [\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#2563eb)\",\n          text: \"100M+ AI team\",\n          title: \"Notion Showcase\",\n          meta: \"15s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#4a1942,#db2777)\",\n          text: \"Design System v4\",\n          title: \"Dribbble Showcase\",\n          meta: \"12s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#451a03,#f59e0b)\",\n          text: \"$1.9T Market Cap\",\n          title: \"Stripe Showcase\",\n          meta: \"10s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#064e3b,#10b981)\",\n          text: \"Ship faster with AI\",\n          title: \"Vercel Promo\",\n          meta: \"20s · 1080×1920\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#3b82f6)\",\n          text: \"Privacy App\",\n          title: \"iPhone App Store\",\n          meta: \"8s · 1080×1920\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#4a1942,#a855f7)\",\n          text: \"Audio Visualizer\",\n          title: \"Spotify Remix\",\n          meta: \"15s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#064e3b,#059669)\",\n          text: \"Code Animation\",\n          title: \"Terminal Demo\",\n          meta: \"12s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#451a03,#d97706)\",\n          text: \"Launch Video\",\n          title: \"Product Hunt\",\n          meta: \"30s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#6366f1)\",\n          text: \"3D Devices\",\n          title: \"Device Mockups\",\n          meta: \"15s · 1920×1080\",\n        },\n      ];\n      function makeCardHTML(cd, isMobile) {\n        var fs = isMobile ? 12 : 16;\n        return (\n          '<div style=\"background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +\n          (isMobile ? 10 : 12) +\n          'px;overflow:hidden;opacity:0\" class=\"anim-card\">' +\n          '<div style=\"width:100%;aspect-ratio:16/9;background:' +\n          cd.bg +\n          ';display:flex;align-items:center;justify-content:center\"><span style=\"font-size:' +\n          fs +\n          'px;font-weight:700;color:rgba(255,255,255,0.7)\">' +\n          cd.text +\n          \"</span></div>\" +\n          '<div style=\"padding:' +\n          (isMobile ? \"8px 10px\" : \"10px 14px\") +\n          '\"><div style=\"font-size:' +\n          (isMobile ? 11 : 13) +\n          'px;font-weight:600;margin-bottom:2px\">' +\n          cd.title +\n          '</div><div style=\"font-size:' +\n          (isMobile ? 9 : 10) +\n          'px;color:rgba(255,255,255,0.3)\">' +\n          cd.meta +\n          \"</div></div></div>\"\n        );\n      }\n      var phoneCardsEl = document.getElementById(\"phone-cards\");\n      var laptopCardsEl = document.getElementById(\"laptop-cards\");\n      for (var ci = 0; ci < cardData.length; ci++) {\n        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);\n        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);\n      }\n\n      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);\n      phoneTex.minFilter = THREE.LinearFilter;\n      phoneTex.magFilter = THREE.LinearFilter;\n      phoneTex.generateMipmaps = false;\n      var lapTex = new THREE.CanvasTexture(capLapCvs);\n      lapTex.minFilter = THREE.LinearFilter;\n      lapTex.magFilter = THREE.LinearFilter;\n      lapTex.generateMipmaps = false;\n      var macToastIcon = document.querySelector(\"#mac-toast img\");\n      var macDockIcons = Array.prototype.slice.call(document.querySelectorAll(\".tahoe-dock-icon\"));\n      var macSidebarIcons = Array.prototype.slice.call(\n        document.querySelectorAll(\".tahoe-sidebar-icon\"),\n      );\n\n      function roundedRect(ctx, x, y, w, h, r) {\n        ctx.beginPath();\n        ctx.moveTo(x + r, y);\n        ctx.lineTo(x + w - r, y);\n        ctx.quadraticCurveTo(x + w, y, x + w, y + r);\n        ctx.lineTo(x + w, y + h - r);\n        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);\n        ctx.lineTo(x + r, y + h);\n        ctx.quadraticCurveTo(x, y + h, x, y + h - r);\n        ctx.lineTo(x, y + r);\n        ctx.quadraticCurveTo(x, y, x + r, y);\n        ctx.closePath();\n      }\n\n      function drawRoundedImage(ctx, image, x, y, w, h, r) {\n        if (!image || !image.complete) return;\n        ctx.save();\n        roundedRect(ctx, x, y, w, h, r);\n        ctx.clip();\n        ctx.drawImage(image, x, y, w, h);\n        ctx.restore();\n      }\n\n      function drawGlassPanel(ctx, x, y, w, h, r) {\n        var g = ctx.createLinearGradient(x, y, x + w, y + h);\n        g.addColorStop(0, \"rgba(255,255,255,0.82)\");\n        g.addColorStop(0.46, \"rgba(245,253,255,0.42)\");\n        g.addColorStop(1, \"rgba(211,237,255,0.3)\");\n        ctx.save();\n        ctx.shadowColor = \"rgba(7,47,96,0.2)\";\n        ctx.shadowBlur = 24;\n        ctx.shadowOffsetY = 12;\n        roundedRect(ctx, x, y, w, h, r);\n        ctx.fillStyle = g;\n        ctx.fill();\n        ctx.shadowColor = \"transparent\";\n        ctx.lineWidth = 1.25;\n        ctx.strokeStyle = \"rgba(255,255,255,0.72)\";\n        ctx.stroke();\n        roundedRect(ctx, x + 2, y + 2, w - 4, h - 4, Math.max(0, r - 2));\n        ctx.strokeStyle = \"rgba(255,255,255,0.24)\";\n        ctx.stroke();\n        ctx.restore();\n      }\n\n      function drawMenuBar(ctx) {\n        ctx.save();\n        var g = ctx.createLinearGradient(0, 0, 1440, 0);\n        g.addColorStop(0, \"rgba(255,255,255,0.34)\");\n        g.addColorStop(0.52, \"rgba(255,255,255,0.18)\");\n        g.addColorStop(1, \"rgba(255,255,255,0.3)\");\n        ctx.fillStyle = g;\n        ctx.fillRect(0, 0, 1440, 28);\n        ctx.strokeStyle = \"rgba(255,255,255,0.46)\";\n        ctx.lineWidth = 1;\n        ctx.beginPath();\n        ctx.moveTo(0, 28);\n        ctx.lineTo(1440, 28);\n        ctx.stroke();\n        ctx.fillStyle = \"rgba(255,255,255,0.96)\";\n        ctx.font = \"800 14px Inter, system-ui, sans-serif\";\n        ctx.fillText(\"Finder\", 50, 18);\n        ctx.font = \"700 11px Inter, system-ui, sans-serif\";\n        var items = [\"File\", \"Edit\", \"View\", \"Go\", \"Window\", \"Help\"];\n        for (var mi = 0; mi < items.length; mi++) ctx.fillText(items[mi], 108 + mi * 46, 18);\n        ctx.textAlign = \"right\";\n        ctx.fillText(\"92%   Wi-Fi   Tue Apr 1 9:41 AM\", 1414, 18);\n        ctx.textAlign = \"left\";\n        ctx.restore();\n      }\n\n      function drawDesktopWidgets(ctx) {\n        ctx.save();\n        ctx.textBaseline = \"top\";\n        drawGlassPanel(ctx, 28, 48, 100, 112, 18);\n        ctx.fillStyle = \"rgba(239,68,68,0.92)\";\n        ctx.font = \"900 8px Inter, system-ui, sans-serif\";\n        ctx.fillText(\"APRIL\", 44, 62);\n        ctx.fillStyle = \"rgba(15,45,80,0.72)\";\n        ctx.font = \"800 7px Inter, system-ui, sans-serif\";\n        var days = [\"S\", \"M\", \"T\", \"W\", \"T\", \"F\", \"S\"];\n        for (var di = 0; di < days.length; di++) ctx.fillText(days[di], 42 + di * 10, 82);\n        for (var da = 1; da <= 26; da++) {\n          var dx = 42 + ((da + 1) % 7) * 10;\n          var dy = 98 + Math.floor((da + 1) / 7) * 12;\n          if (da === 1) {\n            ctx.fillStyle = \"#ef4444\";\n            ctx.beginPath();\n            ctx.arc(dx + 3, dy + 4, 6, 0, PI * 2);\n            ctx.fill();\n            ctx.fillStyle = \"#fff\";\n          } else {\n            ctx.fillStyle = \"rgba(15,45,80,0.62)\";\n          }\n          ctx.fillText(String(da), dx, dy);\n        }\n\n        drawGlassPanel(ctx, 138, 48, 112, 112, 18);\n        var wg = ctx.createLinearGradient(138, 48, 250, 160);\n        wg.addColorStop(0, \"rgba(43,133,245,0.72)\");\n        wg.addColorStop(0.64, \"rgba(163,220,255,0.54)\");\n        wg.addColorStop(1, \"rgba(255,255,255,0.3)\");\n        roundedRect(ctx, 138, 48, 112, 112, 18);\n        ctx.fillStyle = wg;\n        ctx.fill();\n        ctx.fillStyle = \"rgba(255,255,255,0.96)\";\n        ctx.font = \"900 9px Inter, system-ui, sans-serif\";\n        ctx.fillText(\"San Francisco\", 154, 64);\n        ctx.font = \"900 31px Inter, system-ui, sans-serif\";\n        ctx.fillText(\"53°\", 154, 84);\n        ctx.font = \"800 8px Inter, system-ui, sans-serif\";\n        ctx.fillText(\"Partly Cloudy\", 154, 130);\n        ctx.fillText(\"H:58° L:50°\", 154, 142);\n\n        drawGlassPanel(ctx, 28, 170, 222, 92, 22);\n        var pg = ctx.createLinearGradient(44, 188, 130, 244);\n        pg.addColorStop(0, \"#ffb27a\");\n        pg.addColorStop(0.52, \"#ce2b6f\");\n        pg.addColorStop(1, \"#1d4ed8\");\n        roundedRect(ctx, 44, 188, 72, 56, 14);\n        ctx.fillStyle = pg;\n        ctx.fill();\n        ctx.fillStyle = \"rgba(18,40,68,0.92)\";\n        ctx.font = \"900 14px Inter, system-ui, sans-serif\";\n        ctx.fillText(\"Now Playing\", 130, 193);\n        ctx.font = \"800 10px Inter, system-ui, sans-serif\";\n        ctx.fillStyle = \"rgba(18,40,68,0.68)\";\n        ctx.fillText(\"Glass preview mix\", 130, 216);\n        ctx.restore();\n      }\n\n      function drawFinderWindow(ctx) {\n        var x = 112;\n        var y = 236;\n        var w = 620;\n        var h = 338;\n        drawGlassPanel(ctx, x, y, w, h, 18);\n        roundedRect(ctx, x, y, w, 42, 18);\n        ctx.fillStyle = \"rgba(255,255,255,0.38)\";\n        ctx.fill();\n        ctx.fillStyle = \"#ff5f57\";\n        ctx.beginPath();\n        ctx.arc(x + 26, y + 21, 6, 0, PI * 2);\n        ctx.fill();\n        ctx.fillStyle = \"#febc2e\";\n        ctx.beginPath();\n        ctx.arc(x + 46, y + 21, 6, 0, PI * 2);\n        ctx.fill();\n        ctx.fillStyle = \"#28c840\";\n        ctx.beginPath();\n        ctx.arc(x + 66, y + 21, 6, 0, PI * 2);\n        ctx.fill();\n        ctx.fillStyle = \"rgba(14,42,74,0.72)\";\n        ctx.font = \"800 13px Inter, system-ui, sans-serif\";\n        ctx.textAlign = \"center\";\n        ctx.fillText(\"HyperFrames\", x + w / 2, y + 25);\n        ctx.textAlign = \"left\";\n\n        ctx.fillStyle = \"rgba(255,255,255,0.23)\";\n        ctx.fillRect(x, y + 42, 164, h - 42);\n        var sidebar = [\"Favorites\", \"Home\", \"Desktop\", \"Downloads\", \"Pictures\", \"Music\"];\n        for (var si = 0; si < sidebar.length; si++) {\n          var sy = y + 70 + si * 34;\n          if (si === 0) {\n            roundedRect(ctx, x + 16, sy - 17, 132, 26, 8);\n            ctx.fillStyle = \"rgba(43,139,235,0.24)\";\n            ctx.fill();\n          }\n          drawRoundedImage(ctx, macSidebarIcons[si], x + 28, sy - 14, 18, 18, 5);\n          ctx.fillStyle = \"rgba(18,45,76,0.78)\";\n          ctx.font =\n            si === 0\n              ? \"900 12px Inter, system-ui, sans-serif\"\n              : \"800 12px Inter, system-ui, sans-serif\";\n          ctx.fillText(sidebar[si], x + 54, sy);\n        }\n\n        var files = [\n          \"packages\",\n          \"registry\",\n          \"docs\",\n          \"skills\",\n          \"AGENTS.md\",\n          \"package.json\",\n          \"playground\",\n          \"scripts\",\n        ];\n        for (var fi = 0; fi < files.length; fi++) {\n          var fx = x + 226 + (fi % 4) * 94;\n          var fy = y + 94 + Math.floor(fi / 4) * 112;\n          roundedRect(ctx, fx, fy, 54, 42, 10);\n          ctx.fillStyle =\n            fi === 4 || fi === 5 ? \"rgba(255,255,255,0.82)\" : \"rgba(112,202,255,0.74)\";\n          ctx.fill();\n          if (fi < 4 || fi > 5) {\n            roundedRect(ctx, fx + 4, fy - 8, 28, 13, 6);\n            ctx.fillStyle = \"rgba(119,204,255,0.78)\";\n            ctx.fill();\n          } else {\n            ctx.fillStyle = \"rgba(104,122,142,0.46)\";\n            ctx.fillRect(fx + 10, fy + 12, 34, 3);\n            ctx.fillRect(fx + 10, fy + 22, 26, 3);\n          }\n          ctx.fillStyle = \"rgba(12,38,68,0.9)\";\n          ctx.font = \"900 11px Inter, system-ui, sans-serif\";\n          ctx.textAlign = \"center\";\n          ctx.fillText(files[fi], fx + 27, fy + 62);\n          ctx.textAlign = \"left\";\n        }\n      }\n\n      function drawNotification(ctx, x, y) {\n        drawGlassPanel(ctx, x, y, 390, 96, 28);\n        drawRoundedImage(ctx, macToastIcon, x + 20, y + 22, 44, 44, 12);\n        ctx.fillStyle = \"rgba(10,34,62,0.96)\";\n        ctx.font = \"900 18px Inter, system-ui, sans-serif\";\n        ctx.fillText(\"Messages\", x + 80, y + 26);\n        ctx.font = \"800 12px Inter, system-ui, sans-serif\";\n        ctx.fillStyle = \"rgba(10,34,62,0.58)\";\n        ctx.fillText(\"now\", x + 176, y + 28);\n        ctx.font = \"800 13px Inter, system-ui, sans-serif\";\n        ctx.fillStyle = \"rgba(10,34,62,0.78)\";\n        ctx.fillText(\"Liquid Glass preview is ready for review.\", x + 80, y + 54);\n      }\n\n      function drawDock(ctx) {\n        var icons = macDockIcons;\n        var size = 46;\n        var gap = 8;\n        var padX = 14;\n        var padY = 9;\n        var w = icons.length * size + (icons.length - 1) * gap + padX * 2;\n        var x = Math.round((1440 - w) / 2);\n        var y = 792;\n        drawGlassPanel(ctx, x, y, w, size + padY * 2, 23);\n        for (var ii = 0; ii < icons.length; ii++) {\n          var ix = x + padX + ii * (size + gap);\n          drawRoundedImage(ctx, icons[ii], ix, y + padY, size, size, 13);\n        }\n      }\n\n      function drawMacGlassOverlay(ctx) {\n        ctx.save();\n        drawMenuBar(ctx);\n        drawDesktopWidgets(ctx);\n        drawFinderWindow(ctx);\n        ctx.textBaseline = \"top\";\n        if (S.macToastOpacity > 0.01) {\n          ctx.save();\n          ctx.globalAlpha = S.macToastOpacity;\n          drawNotification(ctx, S.macToastX, S.macToastY);\n          ctx.restore();\n        }\n        drawDock(ctx);\n        ctx.restore();\n      }\n\n      function captureScreens() {\n        if (!apiOk || !paintReady) return;\n        try {\n          capPhoneCtx.clearRect(0, 0, 390, 844);\n          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);\n          capLapCtx.clearRect(0, 0, 1440, 900);\n          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);\n          drawMacGlassOverlay(capLapCtx);\n          phoneTex.needsUpdate = true;\n          lapTex.needsUpdate = true;\n        } catch (e) {}\n      }\n\n      // ── Turntable Group (both devices rotate together for 360° orbit) ──\n      var turntable = new THREE.Group();\n      scene.add(turntable);\n\n      // ── Model Groups ───────────────────────────────────────────────────\n      var phoneGrp = new THREE.Group();\n      turntable.add(phoneGrp);\n      var lapGrp = new THREE.Group();\n      turntable.add(lapGrp);\n      var ready = 0;\n\n      var draco = new THREE.DRACOLoader();\n      draco.setDecoderPath(\"https://www.gstatic.com/draco/versioned/decoders/1.5.6/\");\n      var loader = new THREE.GLTFLoader();\n      loader.setDRACOLoader(draco);\n\n      // MacBook\n      loader.load(\"models/macbook.glb\", function (gltf) {\n        var m = gltf.scene;\n        var box = new THREE.Box3().setFromObject(m);\n        var sz = box.getSize(new THREE.Vector3());\n        var s = 4.5 / Math.max(sz.x, sz.z);\n        m.scale.setScalar(s);\n        box.setFromObject(m);\n        m.position.sub(box.getCenter(new THREE.Vector3()));\n\n        m.traverse(function (child) {\n          if (child.isMesh && (child.name === \"matte\" || child.name === \"Matte\")) {\n            child.material = new THREE.MeshBasicMaterial({ map: lapTex });\n          }\n        });\n\n        // Apple logo on back of lid — exact coords from model inspection:\n        // back mesh center: (0, 0.04, -1.54), matte center: (0, 0.15, -1.56)\n        // Back surface faces -Z. Logo at z = -1.63 (outside back surface), facing -Z.\n        var lc = document.createElement(\"canvas\");\n        lc.width = 256;\n        lc.height = 256;\n        var lx = lc.getContext(\"2d\");\n        lx.clearRect(0, 0, 256, 256);\n        lx.save();\n        lx.translate(128, 128);\n        lx.scale(11, 11);\n        lx.translate(-12, -13);\n        lx.fillStyle = \"#b8b8bc\";\n        lx.fill(\n          new Path2D(\n            \"M18.71,19.5C17.88,20.49 17,21.4 15.66,21.42C14.29,21.45 13.73,20.56 12.18,20.56C10.63,20.56 9.99,21.4 8.74,21.45C7.44,21.5 6.47,20.36 5.62,19.39C3.89,17.39 2.59,13.78 4.37,11.37C5.25,10.17 6.61,9.42 8.08,9.4C9.4,9.37 10.62,10.35 11.43,10.35C12.24,10.35 13.72,9.17 15.32,9.35C15.98,9.38 17.66,9.61 18.72,11.17C18.62,11.23 16.39,12.52 16.42,15.19C16.45,18.37 19.18,19.35 19.21,19.36ZM15.23,7.7C15.96,6.82 16.43,5.6 16.31,4.38C15.25,4.42 13.97,5.09 13.22,5.96C12.55,6.74 11.98,7.99 12.12,9.18C13.29,9.27 14.5,8.57 15.23,7.7Z\",\n          ),\n        );\n        lx.restore();\n        var logoTex = new THREE.CanvasTexture(lc);\n        logoTex.minFilter = THREE.LinearFilter;\n        var appleLogoMesh = new THREE.Mesh(\n          new THREE.PlaneGeometry(0.55, 0.55),\n          new THREE.MeshBasicMaterial({\n            map: logoTex,\n            transparent: true,\n            depthWrite: false,\n            side: THREE.DoubleSide,\n          }),\n        );\n        appleLogoMesh.position.set(0, 0.1, -1.63);\n        appleLogoMesh.rotation.y = PI;\n        m.add(appleLogoMesh);\n\n        lapGrp.add(m);\n        ready++;\n        if (ready === 1) onReady();\n      });\n\n      function onReady() {\n        waitForImages()\n          .then(function () {\n            return waitForPaint(capLapCvs);\n          })\n          .then(function () {\n            paintReady = true;\n            captureScreens();\n            render();\n          });\n      }\n\n      // ── Cubic Bezier Implementation ────────────────────────────────────\n      function cbz(p1x, p1y, p2x, p2y) {\n        var ax = 3 * p1x - 3 * p2x + 1,\n          bx = 3 * p2x - 6 * p1x,\n          cx = 3 * p1x;\n        var ay = 3 * p1y - 3 * p2y + 1,\n          by = 3 * p2y - 6 * p1y,\n          cy = 3 * p1y;\n        return function (t) {\n          var s = t;\n          for (var i = 0; i < 12; i++) {\n            var x = ((ax * s + bx) * s + cx) * s - t;\n            var dx = (3 * ax * s + 2 * bx) * s + cx;\n            if (Math.abs(dx) < 1e-10) break;\n            s -= x / dx;\n          }\n          s = Math.max(0, Math.min(1, s));\n          return ((ay * s + by) * s + cy) * s;\n        };\n      }\n\n      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);\n      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);\n      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);\n      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);\n      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);\n\n      // ── Animation State ────────────────────────────────────────────────\n      var S = {\n        phX: 0,\n        phY: 0.1,\n        phZ: 0.5,\n        phRX: 0,\n        phRY: PI,\n        phRZ: 0,\n        lpX: 10,\n        lpY: -0.2,\n        lpZ: -0.6,\n        lpRX: 0,\n        lpRY: 0,\n        lpRZ: 0,\n        cX: 0,\n        cY: 0.15,\n        cZ: 2.8,\n        clX: 0,\n        clY: 0.1,\n        clZ: 0,\n        drift: 0,\n        turn: 0,\n        cardReveal: 0,\n        titleFade: 0,\n        counter: 0,\n        macToastOpacity: 0,\n        macToastX: 1464,\n        macToastY: 62,\n        macPanel: 0,\n        p: 0,\n      };\n\n      function render() {\n        var d = S.drift;\n\n        // ── Animate live HTML content (captured to texture every frame) ──\n        // Title fade-in\n        document.getElementById(\"phone-title\").style.opacity = S.titleFade;\n        document.getElementById(\"laptop-title\").style.opacity = S.titleFade;\n        // Counter\n        var cnt = Math.round(S.counter);\n        document.getElementById(\"phone-count\").textContent = \"Catalog \" + cnt;\n        document.getElementById(\"laptop-count\").textContent = \"Catalog \" + cnt;\n        // Staggered card reveal\n        var allCards = document.querySelectorAll(\".anim-card\");\n        for (var ci2 = 0; ci2 < allCards.length; ci2++) {\n          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));\n          allCards[ci2].style.opacity = cardProgress;\n          allCards[ci2].style.transform = \"translateY(\" + (1 - cardProgress) * 15 + \"px)\";\n        }\n        var macToast = document.getElementById(\"mac-toast\");\n        var macControl = document.getElementById(\"mac-control\");\n        var macMedia = document.getElementById(\"mac-media\");\n        if (macToast) {\n          macToast.style.opacity = S.macToastOpacity;\n          macToast.style.transform = \"translateX(\" + (S.macToastX - 1002) + \"px)\";\n          macToast.style.filter = \"none\";\n        }\n        if (macControl) {\n          macControl.style.opacity = 0.5 + S.macPanel * 0.5;\n          macControl.style.transform = \"translateY(\" + (1 - S.macPanel) * 18 + \"px)\";\n        }\n        if (macMedia) {\n          macMedia.style.opacity = 0.55 + S.macPanel * 0.45;\n          macMedia.style.transform = \"translateY(\" + (1 - S.macPanel) * 18 + \"px)\";\n        }\n        // Re-capture HTML to texture\n        captureScreens();\n\n        phoneGrp.position.set(\n          S.phX + Math.sin(d * 0.5) * 0.015,\n          S.phY + Math.sin(d * 0.7) * 0.008,\n          S.phZ + Math.cos(d * 0.4) * 0.008,\n        );\n        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);\n        lapGrp.position.set(\n          S.lpX - Math.sin(d * 0.4) * 0.012,\n          S.lpY + Math.sin(d * 0.6) * 0.006,\n          S.lpZ + Math.cos(d * 0.35) * 0.008,\n        );\n        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);\n        turntable.rotation.y = S.turn;\n        bgUniforms.uTime.value = d;\n        camera.position.set(S.cX, S.cY, S.cZ);\n        camera.lookAt(S.clX, S.clY, S.clZ);\n        renderer.render(scene, camera);\n      }\n\n      // ── GSAP Timeline — Product Review Edit ────────────────────────────\n      var tl = gsap.timeline({ paused: true });\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"macos-tahoe-liquid-glass\"] = tl;\n\n      tl.to(S, { p: 1, drift: 15, duration: 15, ease: \"none\", onUpdate: render }, 0);\n\n      // ── macOS Tahoe: MacBook hero — zoomed close, slow pull-back ──\n      // Move iPhone off screen immediately\n      tl.set(S, { phX: 10 }, 0);\n      // Start MacBook centered and close\n      tl.set(S, { lpX: 0, lpRY: 0 }, 0);\n      tl.set(S, { cX: 0, clX: 0, cZ: 4.5, cY: 0.4, clY: -0.1 }, 0);\n\n      // Slow zoom out\n      tl.to(S, { cZ: 7, cY: 0.6, duration: 12, ease: driftEase }, 0.5);\n\n      // Gentle breathing tilt\n      tl.to(S, { lpRY: 0.04, duration: 4, ease: breatheEase }, 1);\n      tl.to(S, { lpRY: -0.03, duration: 4, ease: breatheEase }, 5);\n      tl.to(S, { lpRY: 0.02, duration: 4, ease: breatheEase }, 9);\n\n      // ── Live HTML Animations (captured to 3D textures every frame) ──\n      // Title fade in\n      tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);\n      // Counter animates up\n      tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);\n      // Cards stagger in (0→1 reveals all cards sequentially)\n      tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);\n      tl.set(S, { macToastX: 1464, macToastY: 62, macToastOpacity: 0 }, 0);\n      tl.to(S, { macToastX: 988, macToastOpacity: 1, duration: 0.38, ease: \"power3.out\" }, 0.45);\n      tl.to(S, { macToastX: 1002, duration: 0.16, ease: \"power2.out\" }, 0.83);\n      tl.to(S, { macToastY: 72, duration: 0.18, ease: \"power2.out\" }, 4.25);\n      tl.to(S, { macToastY: 62, duration: 0.22, ease: \"power2.out\" }, 4.43);\n      tl.to(S, { macPanel: 1, duration: 1.1, ease: breatheEase }, 0.45);\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/mk-background.json b/docs/public/catalog/blocks/mk-background.json
new file mode 100644
index 0000000000..a85b0dfc89
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-background.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #mk-bg-root {\n        /* ---- mk tokens: override these in the host to re-skin the family ---- */\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-stage: #f5f5f7;\n        --mk-base: #ffffff;\n        --mk-blob-1: #ff7ac8;\n        --mk-blob-2: #45d6c8;\n        --mk-stage-dark: #000000;\n        --mk-base-dark: #0a0a0c;\n        --mk-blob-1-dark: #7d5cff;\n        --mk-blob-2-dark: #2d1b69;\n        --mk-radius-card: 40px;\n        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: var(--mk-stage);\n      }\n      #mk-bg-root.mk-dark {\n        background: var(--mk-stage-dark);\n      }\n      /* The \"Bar\" — an animatable rounded-rect mask. Full-bleed by default,\n         animatable down to a floating card over the stage. */\n      #mk-bg-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        border-radius: 0;\n        background: var(--mk-base);\n        box-shadow: var(--mk-shadow);\n      }\n      .mk-dark #mk-bg-card {\n        background: var(--mk-base-dark);\n      }\n      /* Soft radial blobs — the procedural \"mesh gradient\". Two oversized\n         radial gradients with a long falloff, drifting slowly. */\n      .mk-bg-blob {\n        position: absolute;\n        border-radius: 50%;\n        will-change: transform;\n      }\n      #mk-bg-blob1 {\n        background: radial-gradient(\n          circle closest-side,\n          var(--mk-blob-1) 0%,\n          rgba(255, 255, 255, 0) 72%\n        );\n      }\n      #mk-bg-blob2 {\n        background: radial-gradient(\n          circle closest-side,\n          var(--mk-blob-2) 0%,\n          rgba(255, 255, 255, 0) 72%\n        );\n      }\n      .mk-dark #mk-bg-blob1 {\n        background: radial-gradient(\n          circle closest-side,\n          var(--mk-blob-1-dark) 0%,\n          rgba(0, 0, 0, 0) 72%\n        );\n      }\n      .mk-dark #mk-bg-blob2 {\n        background: radial-gradient(\n          circle closest-side,\n          var(--mk-blob-2-dark) 0%,\n          rgba(0, 0, 0, 0) 72%\n        );\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"mk-bg-root\"\n      data-composition-id=\"mk-background\"\n      data-start=\"0\"\n      data-duration=\"10\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"mk-bg-card\">\n        <div id=\"mk-bg-blob1\" class=\"mk-bg-blob\" data-layout-allow-overflow></div>\n        <div id=\"mk-bg-blob2\" class=\"mk-bg-blob\" data-layout-allow-overflow></div>\n      </div>\n      <div\n        id=\"mk-bg-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"10\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ---- */\n        var CONFIG = {\n          scheme: \"light\", // \"light\" | \"dark\"\n          animationIn: true, // fade/settle entrance\n          animationOut: true, // fade exit\n          drift: true, // ambient blob motion\n          // Soft BG blobs: center as fraction of canvas, radius in px\n          blob1: { x: 0.28, y: 0.32, r: 950, opacity: 0.85 },\n          blob2: { x: 0.74, y: 0.66, r: 1100, opacity: 0.8 },\n          // Bar mask (rounded-rect card). demo:true plays full-bleed -> card -> full-bleed\n          bar: {\n            demo: true, // full-bleed -> rounded card -> full-bleed showcase\n            x: 240,\n            y: 140,\n            width: 1440,\n            height: 800,\n            roundness: 40,\n          },\n          // Content opacity + frost only matter with footage beneath the block\n          contentOpacity: 1,\n          frostBlur: 0, // px; e.g. 24 for the frosted-card look over footage\n        };\n\n        var W = 1920,\n          H = 1080,\n          DUR = 10;\n\n        var root = document.getElementById(\"mk-bg-root\");\n        var card = document.getElementById(\"mk-bg-card\");\n        var blob1 = document.getElementById(\"mk-bg-blob1\");\n        var blob2 = document.getElementById(\"mk-bg-blob2\");\n\n        if (CONFIG.scheme === \"dark\") root.classList.add(\"mk-dark\");\n\n        function placeBlob(el, b) {\n          var d = b.r * 2;\n          el.style.width = d + \"px\";\n          el.style.height = d + \"px\";\n          el.style.left = b.x * W - b.r + \"px\";\n          el.style.top = b.y * H - b.r + \"px\";\n          el.style.opacity = String(b.opacity);\n        }\n        placeBlob(blob1, CONFIG.blob1);\n        placeBlob(blob2, CONFIG.blob2);\n\n        card.style.opacity = String(CONFIG.contentOpacity);\n        if (CONFIG.frostBlur > 0) {\n          card.style.backdropFilter = \"blur(\" + CONFIG.frostBlur + \"px) saturate(1.4)\";\n        }\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* entrance — fade + blobs settle (power3, no bounce) */\n        if (CONFIG.animationIn) {\n          tl.from(root, { opacity: 0, duration: 0.7, ease: \"power2.out\" }, 0);\n          tl.from([blob1, blob2], { scale: 1.14, duration: 1.2, ease: \"power3.out\" }, 0);\n        }\n\n        /* ambient drift — slow sine yoyo, seek-safe timeline tweens */\n        if (CONFIG.drift) {\n          tl.to(\n            blob1,\n            { x: 70, y: 42, duration: 2.35, ease: \"sine.inOut\", yoyo: true, repeat: 3 },\n            0.3,\n          );\n          tl.to(\n            blob2,\n            { x: -84, y: -36, duration: 2.35, ease: \"sine.inOut\", yoyo: true, repeat: 3 },\n            0.3,\n          );\n        }\n\n        /* bar-mask demo: full-bleed -> rounded card over the stage -> full-bleed.\n           Offset via x/y transforms, not top/left: layout properties snap to\n           integer device pixels and stutter under seek-by-frame capture. The\n           card's CSS base is top:0/left:0, so the transform values match 1:1. */\n        if (CONFIG.bar.demo) {\n          tl.to(\n            card,\n            {\n              y: CONFIG.bar.y,\n              x: CONFIG.bar.x,\n              width: CONFIG.bar.width,\n              height: CONFIG.bar.height,\n              borderRadius: CONFIG.bar.roundness,\n              duration: 1.1,\n              ease: \"power3.inOut\",\n            },\n            3.8,\n          );\n          tl.to(\n            card,\n            {\n              y: 0,\n              x: 0,\n              width: W,\n              height: H,\n              borderRadius: 0,\n              duration: 1.0,\n              ease: \"power3.inOut\",\n            },\n            7.6,\n          );\n        }\n\n        /* exit + hard kill */\n        if (CONFIG.animationOut) {\n          tl.to(root, { opacity: 0, duration: 0.4, ease: \"power2.in\" }, DUR - 0.45);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"mk-background\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/mk-callout-highlight.json b/docs/public/catalog/blocks/mk-callout-highlight.json
new file mode 100644
index 0000000000..b7969a6ba1
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-callout-highlight.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #mk-ch-root {\n        /* ---- mk tokens: override in the host to re-skin the family ---- */\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-ink: #1d1d1f;\n        /* faint = transient pre-sweep tier (tweens up to full ink) — distinct from the family --mk-ink-dim */\n        --mk-ink-faint: #bcbcc2;\n        --mk-ink-dark: #f5f5f7;\n        --mk-ink-faint-dark: rgba(245, 245, 247, 0.32);\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage or mk-background */\n      }\n      #mk-ch-box {\n        position: absolute;\n        font-family: var(--mk-font);\n        font-weight: 500;\n        letter-spacing: -0.015em;\n      }\n      .mk-ch-word {\n        display: inline;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"mk-ch-root\"\n      data-composition-id=\"mk-callout-highlight\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"mk-ch-box\" data-layout-allow-occlusion></div>\n      <div\n        id=\"mk-ch-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ----\n           The mechanic: one scalar (highlight progress 0..1) sweeps word-by-word\n           emphasis across the sentence — a \"highlight amount\"\n           slider. Tween the scalar over the speaker's sentence to follow speech. */\n        var CONFIG = {\n          scheme: \"light\", // \"light\" (ink on light bg) | \"dark\" (white on footage)\n          text: \"Functionality was our goal from the very beginning\",\n          fontSize: 60,\n          lineHeight: 1.3,\n          maxWidth: 700, // px; sentence wraps inside this\n          x: 1030, // box left edge; null = centered horizontally\n          y: null, // box top edge; null = centered vertically\n          align: \"left\",\n          sweep: { start: 1.2, end: 6.2 }, // block-local seconds, linear\n          animationIn: true, // fade/rise entrance before the sweep\n          animationOut: true,\n        };\n\n        var DUR = 8;\n        var root = document.getElementById(\"mk-ch-root\");\n        var box = document.getElementById(\"mk-ch-box\");\n\n        var FULL = CONFIG.scheme === \"dark\" ? \"#f5f5f7\" : \"#1d1d1f\";\n        var FAINT = CONFIG.scheme === \"dark\" ? \"rgba(245,245,247,0.32)\" : \"#bcbcc2\";\n\n        box.style.fontSize = CONFIG.fontSize + \"px\";\n        box.style.lineHeight = String(CONFIG.lineHeight);\n        box.style.maxWidth = CONFIG.maxWidth + \"px\";\n        box.style.textAlign = CONFIG.align;\n\n        /* build word spans */\n        var wordEls = [];\n        CONFIG.text.split(/\\s+/).forEach(function (w, i) {\n          if (i > 0) box.appendChild(document.createTextNode(\" \"));\n          var span = document.createElement(\"span\");\n          span.id = \"mk-ch-w-\" + i;\n          span.className = \"mk-ch-word\";\n          span.textContent = w;\n          span.style.color = FAINT;\n          box.appendChild(span);\n          wordEls.push(span);\n        });\n\n        /* position (measure after building) */\n        var rect = box.getBoundingClientRect();\n        box.style.left =\n          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + \"px\";\n        box.style.top =\n          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + \"px\";\n\n        /* state proxy: GSAP animates st.p, render derives every word color from it */\n        var st = { p: 0 };\n        var mix = gsap.utils.interpolate(FAINT, FULL);\n        function render() {\n          var k = st.p * wordEls.length;\n          for (var i = 0; i < wordEls.length; i++) {\n            var f = Math.max(0, Math.min(1, k - i));\n            wordEls[i].style.color = mix(f);\n          }\n        }\n\n        var tl = gsap.timeline({ paused: true });\n\n        if (CONFIG.animationIn) {\n          gsap.set(box, { opacity: 0, y: 24 });\n          tl.to(box, { opacity: 1, y: 0, duration: 0.7, ease: \"power3.out\" }, 0.3);\n        }\n\n        /* the highlight sweep — one scalar, linear so it tracks speech evenly.\n           To follow a real voiceover, replace with several tweens between\n           per-phrase progress values (keyframes on the slider). */\n        tl.to(\n          st,\n          { p: 1, duration: CONFIG.sweep.end - CONFIG.sweep.start, ease: \"none\" },\n          CONFIG.sweep.start,\n        );\n\n        if (CONFIG.animationOut) {\n          tl.to(box, { opacity: 0, y: -16, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        tl.eventCallback(\"onUpdate\", render);\n        render();\n\n        window.__timelines[\"mk-callout-highlight\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/mk-clone-wall-transition.json b/docs/public/catalog/blocks/mk-clone-wall-transition.json
new file mode 100644
index 0000000000..cc2e1586c6
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-clone-wall-transition.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #mk-cw-root {\n        /* ---- mk tokens: override in the host to re-skin the family ---- */\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-ink: #1d1d1f;\n        --mk-paper: #ffffff;\n        --mk-blob-1: #ff7ac8;\n        --mk-blob-2: #45d6c8;\n        --mk-radius-card: 40px;\n        --mk-shadow: 0 30px 80px rgba(0, 0, 0, 0.22);\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent;\n      }\n      /* the wall: paper sheet + tiled word rows + inversion layer, exits as one */\n      #mk-cw-wall {\n        position: absolute;\n        inset: 0;\n        background: var(--mk-paper);\n        /* no overflow:hidden — the composition root clips; isolation keeps the\n           difference blend scoped to the wall's own tiles */\n        isolation: isolate;\n      }\n      .mk-cw-row {\n        position: absolute;\n        white-space: nowrap;\n        font-family: var(--mk-font);\n        font-weight: 600;\n        letter-spacing: -0.02em;\n        color: var(--mk-ink);\n        line-height: 1;\n      }\n      .mk-cw-tile {\n        display: inline-block;\n      }\n      /* inversion sweep — a paper-colored rect in difference blend:\n         a paper-colored rect XORs the wall, flipping paper<->ink as it arrives */\n      #mk-cw-invert {\n        position: absolute;\n        inset: 0;\n        background: var(--mk-paper);\n        mix-blend-mode: difference;\n      }\n      /* the outgoing frame shrinking to a rounded card mid-transition */\n      #mk-cw-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        border-radius: 0;\n        overflow: hidden;\n        background: linear-gradient(\n          120deg,\n          #fdfbfd 0%,\n          var(--mk-blob-1) 38%,\n          var(--mk-blob-2) 100%\n        );\n        box-shadow: var(--mk-shadow);\n        transform-origin: 50% 50%;\n      }\n      #mk-cw-card img {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"mk-cw-root\"\n      data-composition-id=\"mk-clone-wall-transition\"\n      data-start=\"0\"\n      data-duration=\"2.4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"mk-cw-wall\" data-layout-allow-overflow>\n        <div id=\"mk-cw-tiles\" data-layout-allow-overflow></div>\n        <div id=\"mk-cw-invert\" data-layout-allow-overflow></div>\n      </div>\n      <div id=\"mk-cw-card\" data-layout-allow-overflow></div>\n      <div\n        id=\"mk-cw-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"2.4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ----\n           Overlay-transition model: place this block spanning the host's cut\n           point (e.g. start 0.9s before the cut). The wall fully covers the\n           frame from ~0.6s to ~1.9s local — hard-cut the content beneath\n           anywhere in that window. */\n        var CONFIG = {\n          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens\n          word: \"HyperFrames\", // the cloned word\n          fontSize: 240, // px — the tiled text size\n          spreadX: 90, // px gap between tiles (tile spread X)\n          spreadY: 60, // px gap between rows (Spread Y)\n          brickOffset: true, // alternate rows offset by half a tile\n          card: {\n            enabled: true, // outgoing-frame card. In real use set src to a\n            src: null, //     still of the outgoing clip; null = family gradient\n          },\n          driftX: -46, // slow wall drift during the hold\n        };\n\n        var W = 1920,\n          H = 1080,\n          DUR = 2.4;\n\n        var root = document.getElementById(\"mk-cw-root\");\n        var wall = document.getElementById(\"mk-cw-wall\");\n        var tilesBox = document.getElementById(\"mk-cw-tiles\");\n        var invert = document.getElementById(\"mk-cw-invert\");\n        var card = document.getElementById(\"mk-cw-card\");\n\n        /* build the tile wall — rows of repeated words, brick-offset */\n        var rowH = CONFIG.fontSize + CONFIG.spreadY;\n        var rows = Math.ceil(H / rowH) + 1;\n        /* rough tile width estimate to fill each row past both edges */\n        var tileW = CONFIG.word.length * CONFIG.fontSize * 0.58 + CONFIG.spreadX;\n        var perRow = Math.ceil(W / tileW) + 2;\n        for (var r = 0; r < rows; r++) {\n          var row = document.createElement(\"div\");\n          row.id = \"mk-cw-row-\" + r;\n          row.className = \"mk-cw-row\";\n          /* rows intentionally run past the canvas and sit beneath the card */\n          row.setAttribute(\"data-layout-allow-overflow\", \"\");\n          row.setAttribute(\"data-layout-allow-occlusion\", \"\");\n          row.style.fontSize = CONFIG.fontSize + \"px\";\n          row.style.top = r * rowH - CONFIG.fontSize * 0.35 + \"px\";\n          var offset = CONFIG.brickOffset && r % 2 === 1 ? -Math.round(tileW / 2) : 0;\n          row.style.left = offset - tileW + \"px\";\n          for (var c = 0; c < perRow + 1; c++) {\n            var tile = document.createElement(\"span\");\n            tile.className = \"mk-cw-tile\";\n            tile.textContent = CONFIG.word;\n            tile.style.marginRight = CONFIG.spreadX + \"px\";\n            row.appendChild(tile);\n          }\n          tilesBox.appendChild(row);\n        }\n\n        if (CONFIG.card.enabled && CONFIG.card.src) {\n          var img = document.createElement(\"img\");\n          img.src = CONFIG.card.src;\n          card.appendChild(img);\n        }\n        if (!CONFIG.card.enabled) card.style.display = \"none\";\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* The wall sits in place from t=0, fully hidden beneath the\n           full-bleed card — the card's shrink IS the wall's reveal. */\n\n        /* 0.2–0.95  outgoing frame shrinks to a rounded card on the wall.\n           x/y rather than left/top — layout properties snap to integer device\n           pixels under seek-by-frame capture. Base is top:0/left:0, so the\n           values carry over unchanged, and the later scale composes cleanly. */\n        if (CONFIG.card.enabled) {\n          tl.to(\n            card,\n            {\n              y: 330,\n              x: 640,\n              width: 640,\n              height: 420,\n              borderRadius: 40,\n              duration: 0.75,\n              ease: \"power3.inOut\",\n            },\n            0.2,\n          );\n          /* 1.35–1.75  card is put away */\n          tl.to(card, { scale: 0.6, opacity: 0, duration: 0.4, ease: \"power2.in\" }, 1.35);\n        }\n\n        /* slow drift keeps the wall alive during the hold */\n        tl.to(tilesBox, { x: CONFIG.driftX, duration: 1.8, ease: \"sine.inOut\" }, 0.3);\n\n        /* 0.85–1.5  inversion sweeps in and STAYS — wall flips ink<->paper */\n        gsap.set(invert, { x: -W });\n        tl.to(invert, { x: 0, duration: 0.65, ease: \"power3.inOut\" }, 0.85);\n\n        /* 1.9–2.35  the inverted wall fades off, revealing the cut beneath */\n        tl.to(wall, { opacity: 0, duration: 0.45, ease: \"power2.inOut\" }, 1.9);\n\n        /* hard kills — wall and card die the moment their fades complete */\n        if (CONFIG.card.enabled) tl.set(card, { visibility: \"hidden\" }, 1.76);\n        tl.set(root, { visibility: \"hidden\" }, 2.36);\n\n        window.__timelines[\"mk-clone-wall-transition\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/mk-line-graph.json b/docs/public/catalog/blocks/mk-line-graph.json
new file mode 100644
index 0000000000..0cbc28d5ab
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-line-graph.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #mk-lg-root {\n        /* ---- mk tokens: override in the host to re-skin the family ---- */\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-ink: #1d1d1f;\n        --mk-ink-dim: #6e6e73;\n        --mk-accent: #0071e3;\n        --mk-paper: #ffffff;\n        --mk-blob-2: #45d6c8;\n        --mk-axis: rgba(29, 29, 31, 0.22);\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage or mk-background */\n        font-family: var(--mk-font);\n      }\n      #mk-lg-svg {\n        position: absolute;\n        inset: 0;\n      }\n      .mk-lg-line {\n        fill: none;\n        stroke-width: 5;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .mk-lg-dot {\n        stroke-width: 4;\n        fill: var(--mk-paper);\n      }\n      .mk-lg-axis {\n        stroke: var(--mk-axis);\n        stroke-width: 2;\n      }\n      .mk-lg-value {\n        position: absolute;\n        font-weight: 600;\n        font-size: 30px;\n        letter-spacing: -0.01em;\n        color: var(--mk-ink);\n        font-variant-numeric: tabular-nums;\n        /* Horizontal centring only. The label's vertical offset is baked into\n           `top` instead of a CSS translate, because the entrance tween animates\n           `y` and GSAP rewrites this transform, dropping any vertical shift. */\n        transform: translate(-50%, 0);\n        line-height: 38px;\n        white-space: nowrap;\n      }\n      .mk-lg-xlabel {\n        position: absolute;\n        font-weight: 400;\n        font-size: 26px;\n        color: var(--mk-ink-dim);\n        transform: translateX(-50%);\n        white-space: nowrap;\n      }\n      .mk-lg-legend {\n        position: absolute;\n        display: flex;\n        gap: 40px;\n      }\n      .mk-lg-legend-item {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        font-weight: 500;\n        font-size: 30px;\n        color: var(--mk-ink-dim);\n      }\n      .mk-lg-legend-dot {\n        width: 14px;\n        height: 14px;\n        border-radius: 50%;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"mk-lg-root\"\n      data-composition-id=\"mk-line-graph\"\n      data-start=\"0\"\n      data-duration=\"7\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <svg id=\"mk-lg-svg\" viewBox=\"0 0 1920 1080\"></svg>\n      <div id=\"mk-lg-labels\"></div>\n      <div\n        id=\"mk-lg-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"7\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ----\n           A minimal presentation line graph: 1–2 series draw on, dots pop, value labels\n           ride their points, axes dimmer than labels (clear hierarchy). */\n        var CONFIG = {\n          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens\n          series: [\n            { name: \"Renders\", color: null /* accent */, values: [12, 26, 22, 38, 44, 58] },\n            { name: \"Projects\", color: null /* blob-2 */, values: [8, 14, 18, 16, 28, 36] },\n          ],\n          xLabels: [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\"],\n          showValues: true,\n          area: { x: 160, y: 240, w: 980, h: 500 }, // plot rectangle\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 7;\n        var NS = \"http://www.w3.org/2000/svg\";\n        var root = document.getElementById(\"mk-lg-root\");\n        var svg = document.getElementById(\"mk-lg-svg\");\n        var labels = document.getElementById(\"mk-lg-labels\");\n        var A = CONFIG.area;\n\n        var accent = getComputedStyle(root).getPropertyValue(\"--mk-accent\").trim();\n        var blob2 = getComputedStyle(root).getPropertyValue(\"--mk-blob-2\").trim();\n        if (CONFIG.series[1] && !CONFIG.series[1].color) CONFIG.series[1].color = blob2;\n\n        /* scale: 0..max(all values)*1.15 into the plot rect */\n        var max = 0;\n        CONFIG.series.forEach(function (s) {\n          s.values.forEach(function (v) {\n            if (v > max) max = v;\n          });\n        });\n        max *= 1.15;\n        var n = CONFIG.series[0].values.length;\n        function px(i) {\n          return A.x + (i / (n - 1)) * A.w;\n        }\n        function py(v) {\n          return A.y + A.h - (v / max) * A.h;\n        }\n\n        /* baseline axis */\n        var axis = document.createElementNS(NS, \"line\");\n        axis.setAttribute(\"class\", \"mk-lg-axis\");\n        axis.setAttribute(\"x1\", A.x - 20);\n        axis.setAttribute(\"y1\", A.y + A.h);\n        axis.setAttribute(\"x2\", A.x + A.w + 20);\n        axis.setAttribute(\"y2\", A.y + A.h);\n        axis.id = \"mk-lg-axis\";\n        svg.appendChild(axis);\n\n        /* series paths, dots, value labels */\n        var paths = [],\n          dots = [],\n          vals = [];\n        CONFIG.series.forEach(function (s, si) {\n          var color = s.color || accent;\n          var d = s.values\n            .map(function (v, i) {\n              return (i === 0 ? \"M\" : \"L\") + px(i) + \" \" + py(v);\n            })\n            .join(\" \");\n          var path = document.createElementNS(NS, \"path\");\n          path.setAttribute(\"class\", \"mk-lg-line\");\n          path.setAttribute(\"d\", d);\n          path.setAttribute(\"stroke\", color);\n          path.id = \"mk-lg-path-\" + si;\n          svg.appendChild(path);\n          paths.push(path);\n\n          s.values.forEach(function (v, i) {\n            var dot = document.createElementNS(NS, \"circle\");\n            dot.setAttribute(\"class\", \"mk-lg-dot\");\n            dot.setAttribute(\"cx\", px(i));\n            dot.setAttribute(\"cy\", py(v));\n            dot.setAttribute(\"r\", 9);\n            dot.setAttribute(\"stroke\", color);\n            dot.id = \"mk-lg-dot-\" + si + \"-\" + i;\n            svg.appendChild(dot);\n            dots.push({ el: dot, si: si, i: i });\n\n            if (CONFIG.showValues) {\n              var val = document.createElement(\"div\");\n              /* Series after the first label downward. With every series\n                 labelling upward the numbers collide wherever the lines run\n                 close together. GAP clears the dot radius plus line stroke. */\n              var below = si > 0;\n              var GAP = 22;\n              val.className = \"mk-lg-value\";\n              val.id = \"mk-lg-val-\" + si + \"-\" + i;\n              val.textContent = v;\n              val.style.left = px(i) + \"px\";\n              val.style.top = py(v) + (below ? GAP : -(GAP + 38)) + \"px\";\n              labels.appendChild(val);\n              vals.push({ el: val, si: si, i: i });\n            }\n          });\n        });\n\n        /* x labels + legend */\n        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {\n          var xl = document.createElement(\"div\");\n          xl.className = \"mk-lg-xlabel\";\n          xl.id = \"mk-lg-xl-\" + i;\n          xl.textContent = t;\n          xl.style.left = px(i) + \"px\";\n          xl.style.top = A.y + A.h + 24 + \"px\";\n          labels.appendChild(xl);\n        });\n        var legend = document.createElement(\"div\");\n        legend.className = \"mk-lg-legend\";\n        legend.id = \"mk-lg-legend\";\n        legend.style.left = A.x + \"px\";\n        legend.style.top = A.y + A.h + 90 + \"px\";\n        CONFIG.series.forEach(function (s) {\n          var item = document.createElement(\"div\");\n          item.className = \"mk-lg-legend-item\";\n          var dot = document.createElement(\"span\");\n          dot.className = \"mk-lg-legend-dot\";\n          dot.style.background = s.color || accent;\n          item.appendChild(dot);\n          item.appendChild(document.createTextNode(s.name));\n          legend.appendChild(item);\n        });\n        labels.appendChild(legend);\n\n        var tl = gsap.timeline({ paused: true });\n        var DRAW = 1.3;\n\n        /* entrance: axis + x labels settle first */\n        gsap.set([axis, legend], { opacity: 0 });\n        tl.to(axis, { opacity: 1, duration: 0.5, ease: \"power2.out\" }, 0.2);\n        CONFIG.xLabels.slice(0, n).forEach(function (t, i) {\n          var xl = document.getElementById(\"mk-lg-xl-\" + i);\n          gsap.set(xl, { opacity: 0, y: 10 });\n          tl.to(xl, { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, 0.25 + i * 0.05);\n        });\n\n        /* draw each series, dots + values riding the draw front */\n        CONFIG.series.forEach(function (s, si) {\n          var t0 = (CONFIG.animationIn ? 0.5 : 0) + si * 0.35;\n          var path = paths[si];\n          var len = path.getTotalLength();\n          gsap.set(path, { strokeDasharray: len, strokeDashoffset: len });\n          tl.to(path, { strokeDashoffset: 0, duration: DRAW, ease: \"power2.inOut\" }, t0);\n\n          s.values.forEach(function (v, i) {\n            var dot = document.getElementById(\"mk-lg-dot-\" + si + \"-\" + i);\n            var td = t0 + (i / (n - 1)) * DRAW * 0.92;\n            gsap.set(dot, { scale: 0, transformOrigin: \"50% 50%\" });\n            tl.to(dot, { scale: 1, duration: 0.35, ease: \"back.out(1.2)\" }, td);\n            if (CONFIG.showValues) {\n              var val = document.getElementById(\"mk-lg-val-\" + si + \"-\" + i);\n              gsap.set(val, { opacity: 0, y: 8 });\n              tl.to(val, { opacity: 1, y: 0, duration: 0.35, ease: \"power2.out\" }, td + 0.06);\n            }\n          });\n        });\n\n        tl.to(legend, { opacity: 1, duration: 0.5, ease: \"power2.out\" }, 2.3);\n\n        /* exit + hard kill */\n        if (CONFIG.animationOut) {\n          tl.to([svg, labels], { opacity: 0, y: -20, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"mk-line-graph\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/mk-placeholder-grid.json b/docs/public/catalog/blocks/mk-placeholder-grid.json
new file mode 100644
index 0000000000..ab94db4d64
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-placeholder-grid.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #mk-pg-root {\n        /* ---- mk tokens: override in the host to re-skin the family ---- */\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-ink-dim: #6e6e73;\n        --mk-paper: #ffffff;\n        --mk-blob-1: #ff7ac8;\n        --mk-blob-2: #45d6c8;\n        --mk-accent-dark: #7d5cff;\n        --mk-blob-1-soft: #ffd3ec;\n        --mk-blob-2-soft: #d9fff8;\n        --mk-accent-dark-soft: #cabdff;\n        --mk-well-warm: #ffb86b;\n        --mk-well-warm-soft: #ffe3c2;\n        --mk-well-sky: #5cb8ff;\n        --mk-well-sky-soft: #cfe9ff;\n        --mk-well-rose: #ff8f8f;\n        --mk-well-rose-soft: #ffd6d6;\n        --mk-well-num: rgba(255, 255, 255, 0.9);\n        --mk-radius-card: 40px;\n        --mk-shadow: 0 24px 64px rgba(0, 0, 0, 0.16);\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* pair with mk-background beneath for the gradient backdrop */\n      }\n      .mk-pg-cell {\n        position: absolute;\n        border-radius: var(--mk-radius-card);\n        overflow: hidden;\n        background: var(--mk-paper);\n        box-shadow: var(--mk-shadow);\n      }\n      .mk-pg-media {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      /* empty drop-zone well: soft gradient + index numeral */\n      .mk-pg-well {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .mk-pg-well-num {\n        font-family: var(--mk-font);\n        font-weight: 600;\n        font-size: 88px;\n        letter-spacing: -0.02em;\n        color: var(--mk-well-num);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"mk-pg-root\"\n      data-composition-id=\"mk-placeholder-grid\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"mk-pg-grid\"></div>\n      <div\n        id=\"mk-pg-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ---- */\n        var CONFIG = {\n          // no scheme param — scheme-agnostic; re-skin via the --mk-* tokens\n          layout: \"1+2\", // \"2up\" | \"3up\" | \"4up\" | \"3x2\" | \"1+2\" (hero left + two stacked)\n          margin: 120, // outer margin, px\n          gap: 40, // px between cells\n          radius: 40, // cell corner radius (rounded-edge look)\n          // One entry per cell (in layout order). src: image path, or null for a\n          // styled drop-zone well. insideScale: media scale inside the mask —\n          // an \"inside scale\" convention (1 = cover-fit).\n          cells: [\n            { src: null, insideScale: 1 },\n            { src: null, insideScale: 1 },\n            { src: null, insideScale: 1 },\n          ],\n          kenBurns: true, // slow media settle inside the mask\n          stagger: 0.15, // \"box, box, box\" entrance\n          animationIn: true,\n          animationOut: true,\n        };\n\n        /* decorative fills for empty wells (cycled) */\n        var WELL_FILLS = [\n          \"linear-gradient(135deg, var(--mk-blob-1) 0%, var(--mk-blob-1-soft) 100%)\",\n          \"linear-gradient(135deg, var(--mk-blob-2) 0%, var(--mk-blob-2-soft) 100%)\",\n          \"linear-gradient(135deg, var(--mk-accent-dark) 0%, var(--mk-accent-dark-soft) 100%)\",\n          \"linear-gradient(135deg, var(--mk-well-warm) 0%, var(--mk-well-warm-soft) 100%)\",\n          \"linear-gradient(135deg, var(--mk-well-sky) 0%, var(--mk-well-sky-soft) 100%)\",\n          \"linear-gradient(135deg, var(--mk-well-rose) 0%, var(--mk-well-rose-soft) 100%)\",\n        ];\n\n        var W = 1920,\n          H = 1080,\n          DUR = 8;\n\n        function rects(layout, m, g) {\n          var iw = W - 2 * m,\n            ih = H - 2 * m;\n          function grid(cols, rows) {\n            var cw = (iw - (cols - 1) * g) / cols,\n              ch = (ih - (rows - 1) * g) / rows,\n              out = [];\n            for (var r = 0; r < rows; r++)\n              for (var c = 0; c < cols; c++)\n                out.push({ x: m + c * (cw + g), y: m + r * (ch + g), w: cw, h: ch });\n            return out;\n          }\n          if (layout === \"2up\") return grid(2, 1);\n          if (layout === \"3up\") return grid(3, 1);\n          if (layout === \"4up\") return grid(2, 2);\n          if (layout === \"3x2\") return grid(3, 2);\n          /* \"1+2\": hero left (58%), two stacked right */\n          var w1 = Math.round((iw - g) * 0.58),\n            w2 = iw - g - w1,\n            h2 = (ih - g) / 2;\n          return [\n            { x: m, y: m, w: w1, h: ih },\n            { x: m + w1 + g, y: m, w: w2, h: h2 },\n            { x: m + w1 + g, y: m + h2 + g, w: w2, h: h2 },\n          ];\n        }\n\n        var root = document.getElementById(\"mk-pg-root\");\n        var grid = document.getElementById(\"mk-pg-grid\");\n        var R = rects(CONFIG.layout, CONFIG.margin, CONFIG.gap);\n\n        var cells = [],\n          medias = [];\n        R.forEach(function (r, i) {\n          var conf = CONFIG.cells[i] || {};\n          var cell = document.createElement(\"div\");\n          cell.id = \"mk-pg-cell-\" + i;\n          cell.className = \"mk-pg-cell\";\n          cell.style.left = r.x + \"px\";\n          cell.style.top = r.y + \"px\";\n          cell.style.width = r.w + \"px\";\n          cell.style.height = r.h + \"px\";\n          cell.style.borderRadius = CONFIG.radius + \"px\";\n\n          var inner;\n          if (conf.src) {\n            inner = document.createElement(\"img\");\n            inner.className = \"mk-pg-media\";\n            inner.src = conf.src;\n          } else {\n            inner = document.createElement(\"div\");\n            inner.className = \"mk-pg-well\";\n            inner.style.background = WELL_FILLS[i % WELL_FILLS.length];\n            var num = document.createElement(\"span\");\n            num.className = \"mk-pg-well-num\";\n            num.textContent = String(i + 1);\n            inner.appendChild(num);\n          }\n          inner.id = \"mk-pg-inner-\" + i;\n          inner.setAttribute(\"data-layout-allow-overflow\", \"\"); // ken-burns scales past the mask by design\n          cell.appendChild(inner);\n          grid.appendChild(cell);\n          cells.push(cell);\n          medias.push(inner);\n\n          gsap.set(inner, { scale: conf.insideScale || 1 });\n        });\n\n        var tl = gsap.timeline({ paused: true });\n\n        cells.forEach(function (cell, i) {\n          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;\n\n          if (CONFIG.animationIn) {\n            gsap.set(cell, { opacity: 0, scale: 0.92, y: 28 });\n            tl.to(cell, { opacity: 1, scale: 1, y: 0, duration: 0.65, ease: \"power3.out\" }, t0);\n          }\n\n          if (CONFIG.kenBurns) {\n            var base = (CONFIG.cells[i] && CONFIG.cells[i].insideScale) || 1;\n            tl.fromTo(\n              medias[i],\n              { scale: base * 1.06 },\n              { scale: base, duration: DUR - t0 - 0.6, ease: \"sine.out\" },\n              t0,\n            );\n          }\n        });\n\n        /* exit + hard kill */\n        if (CONFIG.animationOut) {\n          tl.to(grid, { opacity: 0, y: -20, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"mk-placeholder-grid\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/mk-progress-stat.json b/docs/public/catalog/blocks/mk-progress-stat.json
new file mode 100644
index 0000000000..077c69cadb
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-progress-stat.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #mk-ps-root {\n        /* ---- mk tokens: override in the host to re-skin the family ---- */\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-ink: #1d1d1f;\n        --mk-ink-dim: #6e6e73;\n        --mk-ink-dark: #f5f5f7;\n        --mk-ink-dim-dark: #a1a1a6;\n        --mk-accent: #0071e3;\n        --mk-accent-dark: #7d5cff;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage or mk-background */\n      }\n      #mk-ps-group {\n        position: absolute;\n        font-family: var(--mk-font);\n      }\n      #mk-ps-num {\n        font-weight: 600;\n        font-size: 190px;\n        line-height: 1;\n        letter-spacing: -0.03em;\n        color: var(--mk-ink);\n        font-variant-numeric: tabular-nums;\n      }\n      #mk-ps-label {\n        margin-top: 10px;\n        font-weight: 500;\n        font-size: 42px;\n        letter-spacing: -0.01em;\n        color: var(--mk-ink);\n      }\n      #mk-ps-track {\n        position: relative;\n        margin-top: 28px;\n        height: 6px;\n        border-radius: 3px;\n        background: rgba(29, 29, 31, 0.1);\n        overflow: hidden;\n      }\n      #mk-ps-fill {\n        position: absolute;\n        inset: 0;\n        border-radius: 3px;\n        background: var(--mk-accent);\n        transform-origin: left center;\n      }\n      #mk-ps-caption {\n        margin-top: 22px;\n        font-weight: 400;\n        font-size: 30px;\n        color: var(--mk-ink-dim);\n      }\n      .mk-dark #mk-ps-num,\n      .mk-dark #mk-ps-label {\n        color: var(--mk-ink-dark);\n      }\n      .mk-dark #mk-ps-caption {\n        color: var(--mk-ink-dim-dark);\n      }\n      .mk-dark #mk-ps-track {\n        background: rgba(245, 245, 247, 0.18);\n      }\n      .mk-dark #mk-ps-fill {\n        background: var(--mk-accent-dark);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"mk-ps-root\"\n      data-composition-id=\"mk-progress-stat\"\n      data-start=\"0\"\n      data-duration=\"7\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"mk-ps-group\">\n        <div id=\"mk-ps-num\">0</div>\n        <div id=\"mk-ps-label\"></div>\n        <div id=\"mk-ps-track\"><div id=\"mk-ps-fill\"></div></div>\n        <div id=\"mk-ps-caption\"></div>\n      </div>\n      <div\n        id=\"mk-ps-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"7\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ----\n           A \"22 · Goals reached\" progress card: big count-up\n           numeral, label, thin accent track filling to value/max, caption. */\n        var CONFIG = {\n          scheme: \"light\", // \"light\" | \"dark\"\n          value: 22,\n          suffix: \"\", // e.g. \"%\", \"K\"\n          label: \"Goals reached\",\n          caption: \"Great job, we are getting closer!\",\n          max: 30, // track fills to value/max\n          trackWidth: 480, // px\n          x: 1300, // group left edge; null = centered\n          y: 250, // group top edge; null = centered\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 7;\n        var root = document.getElementById(\"mk-ps-root\");\n        var group = document.getElementById(\"mk-ps-group\");\n        var num = document.getElementById(\"mk-ps-num\");\n        var fill = document.getElementById(\"mk-ps-fill\");\n\n        if (CONFIG.scheme === \"dark\") root.classList.add(\"mk-dark\");\n        document.getElementById(\"mk-ps-label\").textContent = CONFIG.label;\n        document.getElementById(\"mk-ps-caption\").textContent = CONFIG.caption;\n        document.getElementById(\"mk-ps-track\").style.width = CONFIG.trackWidth + \"px\";\n\n        /* position (measure after filling text) */\n        var rect = group.getBoundingClientRect();\n        group.style.left =\n          (CONFIG.x === null ? Math.round((1920 - rect.width) / 2) : CONFIG.x) + \"px\";\n        group.style.top =\n          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + \"px\";\n\n        var tl = gsap.timeline({ paused: true });\n\n        if (CONFIG.animationIn) {\n          gsap.set(group, { opacity: 0, y: 28 });\n          tl.to(group, { opacity: 1, y: 0, duration: 0.7, ease: \"power3.out\" }, 0.3);\n        }\n\n        /* count-up + track fill on the same ease (the data-viz recipe) */\n        var st = { v: 0 };\n        tl.to(\n          st,\n          {\n            v: CONFIG.value,\n            duration: 1.6,\n            ease: \"power2.out\",\n            onUpdate: function () {\n              num.textContent = Math.round(st.v) + CONFIG.suffix;\n            },\n          },\n          0.5,\n        );\n        gsap.set(fill, { scaleX: 0 });\n        tl.to(fill, { scaleX: CONFIG.value / CONFIG.max, duration: 1.6, ease: \"power2.out\" }, 0.5);\n\n        if (CONFIG.animationOut) {\n          tl.to(group, { opacity: 0, y: -20, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"mk-progress-stat\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/mk-specs-list.json b/docs/public/catalog/blocks/mk-specs-list.json
new file mode 100644
index 0000000000..843429afd4
--- /dev/null
+++ b/docs/public/catalog/blocks/mk-specs-list.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #mk-sl-root {\n        /* ---- mk tokens: override in the host to re-skin the family ---- */\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-ink: #1d1d1f;\n        --mk-ink-dim: #6e6e73;\n        --mk-ink-dark: #f5f5f7;\n        --mk-ink-dim-dark: #a1a1a6;\n        --mk-accent: #0071e3;\n        --mk-accent-dark: #7d5cff;\n        --mk-hairline: 2px;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage or mk-background */\n      }\n      #mk-sl-scrim {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 62%);\n        opacity: 0;\n      }\n      #mk-sl-col {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n      }\n      .mk-sl-row {\n        font-family: var(--mk-font);\n        line-height: 1;\n        opacity: 0;\n      }\n      .mk-sl-text {\n        display: flex;\n        align-items: baseline;\n        gap: 18px;\n        white-space: nowrap;\n      }\n      .mk-sl-label {\n        font-weight: 600;\n        font-size: 46px;\n        letter-spacing: -0.015em;\n        color: var(--mk-ink);\n      }\n      .mk-sl-value {\n        font-weight: 400;\n        font-size: 40px;\n        letter-spacing: -0.01em;\n        color: var(--mk-ink-dim);\n      }\n      .mk-sl-line {\n        position: relative;\n        margin-top: 22px;\n        height: var(--mk-hairline);\n        background: rgba(0, 0, 0, 0.1);\n        border-radius: 2px;\n        overflow: hidden;\n      }\n      .mk-sl-line-fill {\n        position: absolute;\n        inset: 0;\n        background: var(--mk-accent);\n        transform-origin: left center;\n      }\n      /* dark scheme: white rows for use over footage (overlay look) */\n      .mk-dark .mk-sl-label {\n        color: var(--mk-ink-dark);\n      }\n      .mk-dark .mk-sl-value {\n        color: var(--mk-ink-dim-dark);\n      }\n      .mk-dark .mk-sl-line {\n        background: rgba(255, 255, 255, 0.18);\n      }\n      .mk-dark .mk-sl-line-fill {\n        background: var(--mk-accent-dark);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"mk-sl-root\"\n      data-composition-id=\"mk-specs-list\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"mk-sl-scrim\"></div>\n      <div id=\"mk-sl-col\"></div>\n      <div\n        id=\"mk-sl-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ---- */\n        var CONFIG = {\n          scheme: \"light\", // \"light\" (ink rows) | \"dark\" (white rows, for footage)\n          rows: [\n            { label: \"Design\", value: \"Minimal, clean lines\" },\n            { label: \"Typography\", value: \"Inter SemiBold\" },\n            { label: \"Motion\", value: \"Restrained, no bounce\" },\n            { label: \"Color\", value: \"Stage + one accent\" },\n            { label: \"Shapes\", value: \"Capsules & rounded cards\" },\n          ],\n          underline: true, // accent sweep under each row\n          lineWidth: 660, // px\n          scrim: 0, // 0–1 left-edge dark scrim for readability over footage\n          x: 160, // column left edge\n          rowGap: 44, // px between rows\n          stagger: 0.18, // s between row entrances\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 8;\n        var root = document.getElementById(\"mk-sl-root\");\n        var col = document.getElementById(\"mk-sl-col\");\n        var scrim = document.getElementById(\"mk-sl-scrim\");\n\n        if (CONFIG.scheme === \"dark\") root.classList.add(\"mk-dark\");\n        scrim.style.opacity = String(CONFIG.scrim);\n\n        /* build rows */\n        CONFIG.rows.forEach(function (r, i) {\n          var row = document.createElement(\"div\");\n          row.id = \"mk-sl-row-\" + i;\n          row.className = \"mk-sl-row\";\n          if (i > 0) row.style.marginTop = CONFIG.rowGap + \"px\";\n\n          var text = document.createElement(\"div\");\n          text.className = \"mk-sl-text\";\n          var label = document.createElement(\"span\");\n          label.className = \"mk-sl-label\";\n          label.textContent = r.label;\n          text.appendChild(label);\n          if (r.value) {\n            var value = document.createElement(\"span\");\n            value.className = \"mk-sl-value\";\n            value.textContent = r.value;\n            text.appendChild(value);\n          }\n          row.appendChild(text);\n\n          if (CONFIG.underline) {\n            var line = document.createElement(\"div\");\n            line.className = \"mk-sl-line\";\n            line.style.width = CONFIG.lineWidth + \"px\";\n            var fill = document.createElement(\"div\");\n            fill.id = \"mk-sl-fill-\" + i;\n            fill.className = \"mk-sl-line-fill\";\n            line.appendChild(fill);\n            row.appendChild(line);\n          }\n          col.appendChild(row);\n        });\n\n        /* center the column vertically */\n        var colH =\n          CONFIG.rows.length * (46 + 22 + (CONFIG.underline ? 2 : 0)) +\n          (CONFIG.rows.length - 1) * CONFIG.rowGap;\n        col.style.left = CONFIG.x + \"px\";\n        col.style.top = Math.round((1080 - colH) / 2) + \"px\";\n\n        var tl = gsap.timeline({ paused: true });\n\n        CONFIG.rows.forEach(function (r, i) {\n          var row = document.getElementById(\"mk-sl-row-\" + i);\n          var t0 = (CONFIG.animationIn ? 0.3 : 0) + i * CONFIG.stagger;\n\n          if (CONFIG.animationIn) {\n            gsap.set(row, { opacity: 0, x: -36 });\n            tl.to(row, { opacity: 1, x: 0, duration: 0.7, ease: \"power3.out\" }, t0);\n          } else {\n            gsap.set(row, { opacity: 1 });\n          }\n\n          if (CONFIG.underline) {\n            var fill = document.getElementById(\"mk-sl-fill-\" + i);\n            gsap.set(fill, { scaleX: 0 });\n            tl.to(fill, { scaleX: 1, duration: 0.8, ease: \"power2.inOut\" }, t0 + 0.15);\n          }\n        });\n\n        /* exit + hard kill */\n        if (CONFIG.animationOut) {\n          tl.to(col, { opacity: 0, y: -20, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n          tl.to(scrim, { opacity: 0, duration: 0.4, ease: \"power2.in\" }, DUR - 0.5);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"mk-specs-list\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/news-ticker.json b/docs/public/catalog/blocks/news-ticker.json
new file mode 100644
index 0000000000..163af66f1f
--- /dev/null
+++ b/docs/public/catalog/blocks/news-ticker.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>News Ticker</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      body {\n        font-family: \"Inter\", sans-serif;\n      }\n\n      #nt-root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        color: #f8fafc;\n        background: transparent;\n      }\n\n      #nt-root .nt-shell {\n        position: absolute;\n        left: 96px;\n        right: 96px;\n        bottom: 72px;\n        height: 216px;\n        filter: drop-shadow(0 28px 44px rgba(0, 0, 0, 0.32));\n      }\n\n      #nt-root .nt-panel {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n        border: 1px solid rgba(255, 255, 255, 0.18);\n        border-radius: 28px;\n        background:\n          linear-gradient(180deg, rgba(21, 31, 48, 0.96), rgba(7, 13, 24, 0.98)),\n          linear-gradient(90deg, rgba(201, 31, 45, 0.72), transparent 38%);\n      }\n\n      #nt-root .nt-panel::before {\n        position: absolute;\n        inset: 0;\n        content: \"\";\n        background:\n          radial-gradient(circle at 14% 0%, rgba(255, 255, 255, 0.2), transparent 26%),\n          linear-gradient(\n            110deg,\n            transparent 0 42%,\n            rgba(255, 255, 255, 0.06) 42% 43%,\n            transparent 43% 100%\n          );\n        opacity: 0.72;\n        pointer-events: none;\n      }\n\n      #nt-root .nt-top-row {\n        position: absolute;\n        left: 0;\n        right: 0;\n        top: 0;\n        height: 126px;\n        display: flex;\n        align-items: stretch;\n      }\n\n      #nt-root .nt-brand {\n        width: 294px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 16px;\n        background: linear-gradient(135deg, #e11d2e, #9f1220);\n        box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.16);\n      }\n\n      #nt-root .nt-live-dot {\n        width: 18px;\n        height: 18px;\n        border-radius: 999px;\n        background: #ffffff;\n        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55);\n      }\n\n      #nt-root .nt-brand-text {\n        display: flex;\n        flex-direction: column;\n        gap: 4px;\n        text-transform: uppercase;\n      }\n\n      #nt-root .nt-live {\n        font-size: 22px;\n        font-weight: 900;\n        line-height: 1;\n        letter-spacing: 0.16em;\n      }\n\n      #nt-root .nt-desk {\n        font-size: 15px;\n        font-weight: 700;\n        line-height: 1;\n        letter-spacing: 0.22em;\n        color: #ffffff;\n      }\n\n      #nt-root .nt-headline-wrap {\n        position: relative;\n        flex: 1;\n        display: flex;\n        align-items: center;\n        padding: 0 250px 0 44px;\n        overflow: hidden;\n      }\n\n      #nt-root .nt-headline {\n        position: relative;\n        z-index: 1;\n        font-size: 48px;\n        font-weight: 850;\n        line-height: 1.02;\n        letter-spacing: 0;\n        white-space: nowrap;\n        color: #ffffff;\n        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.34);\n      }\n\n      #nt-root .nt-headline-accent {\n        color: #ff4455;\n      }\n\n      #nt-root .nt-time {\n        position: absolute;\n        top: 25px;\n        right: 38px;\n        padding: 10px 16px;\n        border: 1px solid rgba(255, 255, 255, 0.18);\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.08);\n        color: rgba(255, 255, 255, 0.74);\n        font-size: 18px;\n        font-weight: 700;\n        line-height: 1;\n        letter-spacing: 0.08em;\n        font-variant-numeric: tabular-nums;\n      }\n\n      #nt-root .nt-bottom-row {\n        position: absolute;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        height: 90px;\n        display: flex;\n        align-items: center;\n        border-top: 1px solid rgba(255, 255, 255, 0.11);\n        background: rgba(2, 6, 13, 0.58);\n      }\n\n      #nt-root .nt-label {\n        width: 294px;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-right: 1px solid rgba(255, 255, 255, 0.14);\n        background: #5f0712;\n        color: #ffffff;\n        font-size: 24px;\n        font-weight: 900;\n        line-height: 1;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n      }\n\n      #nt-root .nt-ticker-window {\n        position: relative;\n        flex: 1;\n        height: 100%;\n        overflow: hidden;\n        background: #050b15;\n      }\n\n      #nt-root .nt-ticker-window::before,\n      #nt-root .nt-ticker-window::after {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        z-index: 2;\n        width: 90px;\n        content: \"\";\n        pointer-events: none;\n      }\n\n      #nt-root .nt-ticker-window::before {\n        left: 0;\n        background: linear-gradient(90deg, #050b15, transparent);\n      }\n\n      #nt-root .nt-ticker-window::after {\n        right: 0;\n        background: linear-gradient(270deg, #050b15, transparent);\n      }\n\n      #nt-root .nt-ticker-track {\n        position: absolute;\n        left: 34px;\n        top: 0;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        gap: 34px;\n        white-space: nowrap;\n        will-change: transform;\n      }\n\n      #nt-root .nt-item {\n        display: inline-flex;\n        align-items: center;\n        gap: 14px;\n        padding: 13px 18px;\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 999px;\n        background: #08111f;\n        color: #ffffff;\n        font-size: 31px;\n        font-weight: 650;\n        line-height: 1;\n        letter-spacing: 0;\n      }\n\n      #nt-root .nt-separator {\n        width: 9px;\n        height: 9px;\n        border-radius: 999px;\n        background: #e11d2e;\n        box-shadow: 0 0 22px rgba(225, 29, 46, 0.75);\n      }\n\n      #nt-root .nt-metric {\n        padding: 4px 8px;\n        border-radius: 8px;\n        background: #063344;\n        color: #c8f8ff;\n        font-weight: 850;\n        font-variant-numeric: tabular-nums;\n      }\n\n      #nt-root .nt-flash {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: -260px;\n        z-index: 3;\n        width: 210px;\n        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent);\n        transform: skewX(-16deg);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"nt-root\"\n      data-composition-id=\"news-ticker\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"7\"\n    >\n      <section\n        id=\"nt-shell\"\n        class=\"clip nt-shell\"\n        data-start=\"0\"\n        data-duration=\"7\"\n        data-track-index=\"0\"\n      >\n        <div class=\"nt-panel\">\n          <div id=\"nt-flash\" class=\"nt-flash\"></div>\n          <div class=\"nt-top-row\">\n            <div id=\"nt-brand\" class=\"nt-brand\">\n              <div id=\"nt-live-dot\" class=\"nt-live-dot\"></div>\n              <div class=\"nt-brand-text\">\n                <div class=\"nt-live\">Live</div>\n                <div class=\"nt-desk\">Global Desk</div>\n              </div>\n            </div>\n            <div class=\"nt-headline-wrap\">\n              <h1 id=\"nt-headline\" class=\"nt-headline\">\n                AI video tools move from <span class=\"nt-headline-accent\">prototype</span> to\n                production\n              </h1>\n              <div id=\"nt-time\" class=\"nt-time\">09:41 UTC</div>\n            </div>\n          </div>\n          <div class=\"nt-bottom-row\">\n            <div id=\"nt-label\" class=\"nt-label\">Breaking</div>\n            <div class=\"nt-ticker-window\">\n              <div id=\"nt-ticker-track\" class=\"nt-ticker-track\">\n                <span class=\"nt-item\"\n                  ><span class=\"nt-separator\"></span>Creator teams shorten launch cycles by\n                  <span class=\"nt-metric\">38%</span></span\n                >\n                <span class=\"nt-item\"\n                  ><span class=\"nt-separator\"></span>Rendering queues clear in under\n                  <span class=\"nt-metric\">2 min</span></span\n                >\n                <span class=\"nt-item\"\n                  ><span class=\"nt-separator\"></span>New catalog blocks trending across product\n                  demos</span\n                >\n                <span class=\"nt-item\"\n                  ><span class=\"nt-separator\"></span>Studio editors adopt HTML-first motion\n                  systems</span\n                >\n                <span class=\"nt-item\"\n                  ><span class=\"nt-separator\"></span>Creator teams shorten launch cycles by\n                  <span class=\"nt-metric\">38%</span></span\n                >\n                <span class=\"nt-item\"\n                  ><span class=\"nt-separator\"></span>Rendering queues clear in under\n                  <span class=\"nt-metric\">2 min</span></span\n                >\n              </div>\n            </div>\n          </div>\n        </div>\n      </section>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n      var shell = document.getElementById(\"nt-shell\");\n      var brand = document.getElementById(\"nt-brand\");\n      var headline = document.getElementById(\"nt-headline\");\n      var label = document.getElementById(\"nt-label\");\n      var tickerTrack = document.getElementById(\"nt-ticker-track\");\n      var liveDot = document.getElementById(\"nt-live-dot\");\n      var flash = document.getElementById(\"nt-flash\");\n      var time = document.getElementById(\"nt-time\");\n\n      gsap.set(shell, { y: 260, opacity: 0 });\n      gsap.set(brand, { x: -80, opacity: 0 });\n      gsap.set(headline, { y: 26, opacity: 0, clipPath: \"inset(0 100% 0 0)\" });\n      gsap.set(label, { y: 18, opacity: 0 });\n      gsap.set(time, { y: -10, opacity: 0 });\n      gsap.set(tickerTrack, { x: 1260 });\n\n      tl.to(shell, { y: 0, opacity: 1, duration: 0.52, ease: \"power4.out\" }, 0);\n      tl.to(brand, { x: 0, opacity: 1, duration: 0.42, ease: \"power3.out\" }, 0.08);\n      tl.to(\n        headline,\n        {\n          y: 0,\n          opacity: 1,\n          clipPath: \"inset(0 0% 0 0)\",\n          duration: 0.62,\n          ease: \"power3.out\",\n        },\n        0.18,\n      );\n      tl.to(time, { y: 0, opacity: 1, duration: 0.32, ease: \"power2.out\" }, 0.5);\n      tl.to(label, { y: 0, opacity: 1, duration: 0.28, ease: \"power2.out\" }, 0.55);\n      tl.to(flash, { x: 2040, duration: 0.86, ease: \"power2.inOut\" }, 0.34);\n      tl.to(\n        tickerTrack,\n        {\n          x: -1120,\n          duration: 6.05,\n          ease: \"none\",\n        },\n        0.62,\n      );\n      tl.to(\n        liveDot,\n        {\n          scale: 1.32,\n          boxShadow: \"0 0 0 18px rgba(255,255,255,0)\",\n          duration: 0.42,\n          repeat: 11,\n          yoyo: true,\n          ease: \"sine.inOut\",\n        },\n        0.58,\n      );\n      tl.to(flash, { x: 4080, duration: 0.72, ease: \"power2.inOut\" }, 3.42);\n      tl.to(shell, { y: 170, opacity: 0, duration: 0.34, ease: \"power3.in\" }, 6.62);\n\n      window.__timelines[\"news-ticker\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/north-korea-locked-down.json b/docs/public/catalog/blocks/north-korea-locked-down.json
new file mode 100644
index 0000000000..9007e1f307
--- /dev/null
+++ b/docs/public/catalog/blocks/north-korea-locked-down.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #eef3f4;\n        font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n      }\n\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #eef3f4;\n        color: #151515;\n      }\n\n      .camera {\n        position: absolute;\n        inset: 0;\n        z-index: 0;\n        transform-origin: 50% 51%;\n        will-change: transform, filter;\n      }\n\n      .map {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .paper-depth {\n        position: absolute;\n        inset: 0;\n        background:\n          radial-gradient(circle at 52% 50%, rgba(255, 255, 255, 0.08), transparent 28%),\n          linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(10, 20, 24, 0.12));\n        mix-blend-mode: multiply;\n        pointer-events: none;\n      }\n\n      .annotation {\n        position: absolute;\n        left: 652px;\n        top: 235px;\n        z-index: 4;\n        width: 560px;\n        height: 392px;\n        overflow: visible;\n        transform-origin: center;\n        will-change: transform, opacity;\n      }\n\n      .scribble {\n        position: absolute;\n        inset: 0;\n        width: 560px;\n        height: 392px;\n        overflow: visible;\n      }\n\n      .scribble path {\n        fill: none;\n        stroke: #e21d2f;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        filter: drop-shadow(0 8px 12px rgba(226, 29, 47, 0.24));\n      }\n\n      #circle-a {\n        stroke-width: 12;\n        stroke-dasharray: 980;\n        stroke-dashoffset: 980;\n      }\n\n      #circle-b {\n        stroke-width: 6;\n        opacity: 0.82;\n        stroke-dasharray: 910;\n        stroke-dashoffset: 910;\n      }\n\n      .label {\n        position: absolute;\n        left: 50%;\n        top: -146px;\n        transform: translateX(-50%) scale(0.82);\n        transform-origin: 50% 100%;\n        min-width: 370px;\n        padding: 18px 26px 20px;\n        border-radius: 18px;\n        color: #ffffff;\n        background: #111111;\n        box-shadow:\n          0 22px 54px rgba(25, 4, 7, 0.24),\n          inset 0 0 0 1px rgba(255, 255, 255, 0.12);\n        font-size: 60px;\n        line-height: 0.9;\n        font-weight: 900;\n        letter-spacing: 0;\n        text-align: center;\n        text-transform: uppercase;\n        opacity: 0;\n      }\n\n      .label::after {\n        content: \"\";\n        position: absolute;\n        left: 50%;\n        bottom: -16px;\n        width: 32px;\n        height: 32px;\n        background: #111111;\n        transform: translateX(-50%) rotate(45deg);\n      }\n\n      .red-wash {\n        position: absolute;\n        inset: 0;\n        z-index: 2;\n        background:\n          radial-gradient(\n            circle at 50% 48%,\n            rgba(255, 59, 48, 0.3),\n            rgba(255, 59, 48, 0.06) 42%,\n            rgba(79, 0, 8, 0.22) 100%\n          ),\n          linear-gradient(90deg, rgba(99, 0, 12, 0.12), rgba(255, 59, 48, 0.2));\n        opacity: 0;\n        mix-blend-mode: multiply;\n        pointer-events: none;\n      }\n\n      .scanline {\n        position: absolute;\n        inset: 0;\n        z-index: 3;\n        opacity: 0;\n        background: repeating-linear-gradient(\n          0deg,\n          rgba(65, 0, 0, 0.12) 0,\n          rgba(65, 0, 0, 0.12) 1px,\n          transparent 1px,\n          transparent 7px\n        );\n        mix-blend-mode: multiply;\n        pointer-events: none;\n      }\n\n      .corner {\n        position: absolute;\n        z-index: 6;\n        width: 84px;\n        height: 84px;\n        border-color: rgba(17, 17, 17, 0.62);\n        opacity: 0;\n      }\n\n      .corner.tl {\n        left: 86px;\n        top: 78px;\n        border-top: 5px solid;\n        border-left: 5px solid;\n      }\n\n      .corner.tr {\n        right: 86px;\n        top: 78px;\n        border-top: 5px solid;\n        border-right: 5px solid;\n      }\n\n      .corner.bl {\n        left: 86px;\n        bottom: 78px;\n        border-bottom: 5px solid;\n        border-left: 5px solid;\n      }\n\n      .corner.br {\n        right: 86px;\n        bottom: 78px;\n        border-bottom: 5px solid;\n        border-right: 5px solid;\n      }\n\n      .attribution {\n        position: absolute;\n        right: 28px;\n        bottom: 22px;\n        z-index: 7;\n        color: rgba(17, 17, 17, 0.44);\n        font-size: 19px;\n        font-weight: 650;\n        opacity: 0.7;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"north-korea-locked-down\"\n      data-root=\"true\"\n      data-start=\"0\"\n      data-duration=\"7\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"camera\" class=\"camera\">\n        <img class=\"map\" src=\"/public/catalog/assets/38198e4cc4ae82c0.png\" alt=\"\" />\n        <div class=\"paper-depth\"></div>\n      </div>\n\n      <div id=\"annotation\" class=\"annotation\">\n        <div id=\"label\" class=\"label\">LOCKED<br />DOWN</div>\n        <svg class=\"scribble\" viewBox=\"0 0 560 392\" aria-hidden=\"true\" data-layout-ignore>\n          <path\n            id=\"circle-a\"\n            d=\"M 74 211 C 42 119 118 42 254 36 C 410 30 524 111 508 222 C 494 320 350 377 208 346 C 94 322 37 278 74 211\"\n          />\n          <path\n            id=\"circle-b\"\n            d=\"M 92 231 C 33 150 105 55 243 44 C 408 31 529 126 501 244 C 480 334 335 370 197 342 C 83 319 47 269 92 231\"\n          />\n        </svg>\n      </div>\n\n      <div id=\"redWash\" class=\"red-wash\"></div>\n      <div id=\"scanline\" class=\"scanline\"></div>\n      <div class=\"corner tl\"></div>\n      <div class=\"corner tr\"></div>\n      <div class=\"corner bl\"></div>\n      <div class=\"corner br\"></div>\n      <div class=\"attribution\">© OpenStreetMap contributors © CARTO</div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const tl = gsap.timeline({\n        paused: true,\n        defaults: { overwrite: \"auto\" },\n      });\n\n      tl.fromTo(\n        \"#camera\",\n        { scale: 0.92, x: -70, y: 18, filter: \"saturate(0.92) contrast(0.98)\" },\n        {\n          scale: 2.12,\n          x: -56,\n          y: -22,\n          filter: \"saturate(1.08) contrast(1.04)\",\n          duration: 3.18,\n          ease: \"expo.inOut\",\n        },\n        0,\n      );\n      tl.to(\"#camera\", { scale: 2.2, x: -44, y: -34, duration: 0.42, ease: \"back.out(1.5)\" }, 3.18);\n      tl.from(\n        \".corner\",\n        { opacity: 0, scale: 0.72, duration: 0.28, stagger: 0.035, ease: \"power3.out\" },\n        0.42,\n      );\n      tl.to(\".corner\", { opacity: 0.72, duration: 0.18, ease: \"power2.out\" }, 1.2);\n      tl.fromTo(\n        \"#annotation\",\n        { opacity: 0, scale: 0.92, x: 4, y: -4 },\n        { opacity: 1, scale: 1, x: 0, y: 0, duration: 0.16, ease: \"power2.out\" },\n        3.12,\n      );\n      tl.to(\"#circle-a\", { strokeDashoffset: 0, duration: 0.62, ease: \"power2.out\" }, 3.24);\n      tl.to(\"#circle-b\", { strokeDashoffset: 0, duration: 0.44, ease: \"power3.out\" }, 3.46);\n      tl.to(\"#label\", { opacity: 1, scale: 1, duration: 0.28, ease: \"back.out(2.1)\" }, 3.78);\n      tl.to(\"#redWash\", { opacity: 1, duration: 0.24, ease: \"power2.out\" }, 3.82);\n      tl.to(\"#scanline\", { opacity: 0.44, duration: 0.18, ease: \"none\" }, 3.86);\n      tl.to(\n        \"#annotation\",\n        { scale: 1.045, duration: 0.14, yoyo: true, repeat: 1, ease: \"sine.inOut\" },\n        4.1,\n      );\n      tl.to(\"#camera\", { scale: 2.06, x: -82, y: -8, duration: 2.35, ease: \"sine.inOut\" }, 4.2);\n      tl.to(\"#redWash\", { opacity: 0.82, duration: 2.35, ease: \"sine.inOut\" }, 4.2);\n      tl.to(\".corner\", { opacity: 0.38, duration: 0.72, ease: \"sine.inOut\" }, 5.82);\n      tl.to(\"#label\", { y: -6, duration: 0.4, yoyo: true, repeat: 1, ease: \"sine.inOut\" }, 5.94);\n\n      window.__timelines[\"north-korea-locked-down\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/nyc-paris-flight.json b/docs/public/catalog/blocks/nyc-paris-flight.json
new file mode 100644
index 0000000000..9b9df260b3
--- /dev/null
+++ b/docs/public/catalog/blocks/nyc-paris-flight.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n        margin: 0;\n        padding: 0;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #f5f5f7;\n        font-family: -apple-system, BlinkMacSystemFont, \"Helvetica Neue\", Arial, sans-serif;\n      }\n\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #f5f5f7;\n        color: #1d1d1f;\n      }\n\n      .stage {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        background: #f5f5f7;\n      }\n\n      .map-plane {\n        position: absolute;\n        inset: 0;\n        transform-origin: 52% 48%;\n        will-change: transform, opacity;\n      }\n\n      .map-image {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n\n      .soft-ocean {\n        position: absolute;\n        inset: 0;\n        background:\n          radial-gradient(circle at 50% 24%, rgba(0, 113, 227, 0.18), rgba(0, 113, 227, 0) 34%),\n          linear-gradient(180deg, rgba(245, 245, 247, 0.05), rgba(245, 245, 247, 0.3));\n        mix-blend-mode: multiply;\n        opacity: 0.72;\n      }\n\n      .route-svg,\n      .doodle-svg {\n        position: absolute;\n        inset: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: visible;\n      }\n\n      .route-glow {\n        fill: none;\n        stroke: rgba(0, 113, 227, 0.23);\n        stroke-width: 24;\n        stroke-linecap: round;\n        stroke-dasharray: 2000;\n        stroke-dashoffset: 2000;\n        filter: blur(4px);\n      }\n\n      .route-path {\n        fill: none;\n        stroke: #0071e3;\n        stroke-width: 9;\n        stroke-linecap: round;\n        stroke-dasharray: 2000;\n        stroke-dashoffset: 2000;\n        filter: drop-shadow(0 10px 20px rgba(0, 113, 227, 0.22));\n      }\n\n      .route-thread {\n        fill: none;\n        stroke: rgba(255, 255, 255, 0.86);\n        stroke-width: 3;\n        stroke-linecap: round;\n        stroke-dasharray: 2000;\n        stroke-dashoffset: 2000;\n      }\n\n      .route-tick {\n        position: absolute;\n        width: 14px;\n        height: 14px;\n        margin: -7px 0 0 -7px;\n        border-radius: 999px;\n        background: #ffffff;\n        border: 3px solid #0071e3;\n        box-shadow: 0 8px 26px rgba(0, 113, 227, 0.32);\n        opacity: 0;\n      }\n\n      .pin {\n        position: absolute;\n        width: 26px;\n        height: 26px;\n        border-radius: 999px;\n        background: #ffffff;\n        border: 7px solid #0071e3;\n        box-shadow:\n          0 15px 34px rgba(0, 0, 0, 0.18),\n          0 0 0 10px rgba(0, 113, 227, 0.12);\n        transform: translate(-50%, -50%);\n        transform-origin: center;\n        will-change: transform, opacity;\n      }\n\n      .pin::after {\n        content: \"\";\n        position: absolute;\n        inset: -20px;\n        border-radius: 999px;\n        border: 2px solid rgba(0, 113, 227, 0.25);\n      }\n\n      .pin-label {\n        position: absolute;\n        top: 32px;\n        min-width: 142px;\n        padding: 12px 16px 13px;\n        border-radius: 20px;\n        background: rgba(255, 255, 255, 0.84);\n        border: 1px solid rgba(255, 255, 255, 0.88);\n        color: #1d1d1f;\n        font-size: 22px;\n        font-weight: 800;\n        line-height: 1;\n        letter-spacing: 0;\n        box-shadow: 0 18px 38px rgba(29, 29, 31, 0.16);\n        backdrop-filter: blur(18px);\n        white-space: nowrap;\n      }\n\n      .pin-label span {\n        display: block;\n        margin-top: 7px;\n        color: #6e6e73;\n        font-size: 13px;\n        font-weight: 700;\n      }\n\n      #nyc-pin {\n        left: 308.41px;\n        top: 584.16px;\n      }\n\n      #nyc-pin .pin-label {\n        left: 28px;\n      }\n\n      #paris-pin {\n        left: 1611.59px;\n        top: 387.84px;\n      }\n\n      #paris-pin .pin-label {\n        right: 28px;\n      }\n\n      .plane {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 112px;\n        height: 112px;\n        offset-path: path(\"M 308.41 584.158 C 650 520 1120 245 1611.59 387.842\");\n        offset-distance: 0%;\n        offset-rotate: auto;\n        offset-anchor: 50% 50%;\n        transform-origin: center;\n        filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.24));\n        opacity: 1;\n        will-change: offset-distance, transform, opacity;\n      }\n\n      .plane-core {\n        position: absolute;\n        inset: 0;\n        transform-origin: center;\n        will-change: transform;\n      }\n\n      .plane svg {\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n\n      .doodle-line {\n        fill: none;\n        stroke: #ff3b30;\n        stroke-width: 13;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        stroke-dasharray: 900;\n        stroke-dashoffset: 900;\n        filter: drop-shadow(0 10px 14px rgba(255, 59, 48, 0.18));\n      }\n\n      .doodle-line.secondary {\n        stroke-width: 6;\n        opacity: 0.82;\n      }\n\n      .paris-pulse {\n        position: absolute;\n        left: 1611.59px;\n        top: 387.84px;\n        width: 126px;\n        height: 126px;\n        margin: -63px 0 0 -63px;\n        border-radius: 999px;\n        border: 4px solid rgba(255, 59, 48, 0.34);\n        opacity: 0;\n      }\n\n      .landing-badge {\n        position: absolute;\n        left: 1500px;\n        top: 502px;\n        padding: 15px 20px 16px;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.9);\n        color: #d70015;\n        font-size: 24px;\n        font-weight: 900;\n        line-height: 1;\n        letter-spacing: 0;\n        box-shadow: 0 20px 44px rgba(29, 29, 31, 0.14);\n        opacity: 0;\n        transform: scale(0.78);\n        transform-origin: center;\n      }\n\n      .title-stack {\n        position: absolute;\n        left: 82px;\n        top: 70px;\n        z-index: 6;\n        max-width: 780px;\n        padding: 30px 34px 33px;\n        border-radius: 30px;\n        background: rgba(255, 255, 255, 0.72);\n        border: 1px solid rgba(255, 255, 255, 0.86);\n        box-shadow: 0 28px 70px rgba(29, 29, 31, 0.12);\n        backdrop-filter: blur(22px);\n      }\n\n      .eyebrow {\n        color: #6e6e73;\n        font-size: 19px;\n        font-weight: 800;\n        letter-spacing: 0;\n      }\n\n      .headline {\n        margin-top: 11px;\n        color: #1d1d1f;\n        font-size: 84px;\n        font-weight: 900;\n        line-height: 0.92;\n        letter-spacing: 0;\n      }\n\n      .headline span {\n        color: #0071e3;\n      }\n\n      .route-meta {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-top: 18px;\n        color: #6e6e73;\n        font-size: 25px;\n        font-weight: 800;\n      }\n\n      .route-meta i {\n        display: block;\n        width: 54px;\n        height: 6px;\n        border-radius: 999px;\n        background: #0071e3;\n      }\n\n      .attribution {\n        position: absolute;\n        right: 28px;\n        bottom: 24px;\n        z-index: 5;\n        padding: 8px 12px;\n        border-radius: 999px;\n        background: rgba(255, 255, 255, 0.68);\n        color: rgba(29, 29, 31, 0.76);\n        font-size: 14px;\n        font-weight: 700;\n        line-height: 1;\n      }\n\n      .white-screen {\n        position: absolute;\n        inset: 0;\n        z-index: 30;\n        background: #ffffff;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"nyc-paris-flight\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div\n        id=\"flight-scene\"\n        class=\"clip stage\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"0\"\n      >\n        <div id=\"map-plane\" class=\"map-plane\" data-layout-allow-overflow>\n          <img class=\"map-image\" src=\"/public/catalog/assets/982e87145e1f7aa4.png\" alt=\"\" />\n          <div class=\"soft-ocean\" data-layout-ignore></div>\n\n          <svg class=\"route-svg\" viewBox=\"0 0 1920 1080\" aria-hidden=\"true\" data-layout-ignore>\n            <path\n              id=\"route-glow\"\n              class=\"route-glow\"\n              d=\"M 308.41 584.158 C 650 520 1120 245 1611.59 387.842\"\n            />\n            <path\n              id=\"route-path\"\n              class=\"route-path\"\n              d=\"M 308.41 584.158 C 650 520 1120 245 1611.59 387.842\"\n            />\n            <path\n              id=\"route-thread\"\n              class=\"route-thread\"\n              d=\"M 308.41 584.158 C 650 520 1120 245 1611.59 387.842\"\n            />\n          </svg>\n\n          <div class=\"route-tick\" style=\"left: 481.8px; top: 539.7px\"></div>\n          <div class=\"route-tick\" style=\"left: 647.6px; top: 486.5px\"></div>\n          <div class=\"route-tick\" style=\"left: 824.8px; top: 430.6px\"></div>\n          <div class=\"route-tick\" style=\"left: 1011.5px; top: 382.4px\"></div>\n          <div class=\"route-tick\" style=\"left: 1206.1px; top: 352.3px\"></div>\n          <div class=\"route-tick\" style=\"left: 1406.7px; top: 350.7px\"></div>\n\n          <div id=\"nyc-pin\" class=\"pin\">\n            <div class=\"pin-label\">New York<span>JFK / NYC</span></div>\n          </div>\n\n          <div id=\"paris-pin\" class=\"pin\">\n            <div class=\"pin-label\">Paris<span>CDG / FR</span></div>\n          </div>\n\n          <div id=\"plane\" class=\"plane\" aria-hidden=\"true\">\n            <div id=\"plane-core\" class=\"plane-core\">\n              <svg viewBox=\"-64 -64 128 128\">\n                <path\n                  d=\"M 58 0 C 52 -10 37 -15 15 -16 L -18 -56 C -23 -62 -34 -58 -32 -49 L -21 -15 L -48 -12 C -56 -11 -60 -6 -60 0 C -60 6 -56 11 -48 12 L -21 15 L -32 49 C -34 58 -23 62 -18 56 L 15 16 C 37 15 52 10 58 0 Z\"\n                  fill=\"#ffffff\"\n                />\n                <path\n                  d=\"M 54 0 C 46 -6 33 -9 14 -10 L -19 -50 C -21 -53 -25 -52 -25 -47 L -15 -10 L -49 -6 C -53 -5 -55 -2 -55 0 C -55 2 -53 5 -49 6 L -15 10 L -25 47 C -25 52 -21 53 -19 50 L 14 10 C 33 9 46 6 54 0 Z\"\n                  fill=\"#0071e3\"\n                />\n                <circle cx=\"18\" cy=\"0\" r=\"6\" fill=\"#f5f5f7\" opacity=\"0.95\" />\n              </svg>\n            </div>\n          </div>\n\n          <svg class=\"doodle-svg\" viewBox=\"0 0 1920 1080\" aria-hidden=\"true\" data-layout-ignore>\n            <path\n              id=\"doodle-a\"\n              class=\"doodle-line\"\n              d=\"M 1510 382 C 1505 323 1560 287 1627 300 C 1700 315 1740 358 1720 416 C 1705 468 1624 486 1556 462 C 1518 449 1494 417 1510 382\"\n            />\n            <path\n              id=\"doodle-b\"\n              class=\"doodle-line secondary\"\n              d=\"M 1518 396 C 1488 356 1528 307 1605 296 C 1688 284 1748 338 1730 397 C 1713 453 1641 480 1570 463 C 1526 453 1504 427 1518 396\"\n            />\n          </svg>\n\n          <div id=\"paris-pulse\" class=\"paris-pulse\"></div>\n          <div id=\"landing-badge\" class=\"landing-badge\">ARRIVED</div>\n        </div>\n\n        <div class=\"title-stack\">\n          <div class=\"eyebrow\">Six-second transatlantic hop</div>\n          <div class=\"headline\">NEW YORK <span>TO</span> PARIS</div>\n          <div class=\"route-meta\">\n            <i></i>\n            <p>5,837 km compressed</p>\n          </div>\n        </div>\n\n        <div class=\"attribution\">© OpenStreetMap contributors © CARTO</div>\n        <div id=\"white-screen\" class=\"white-screen\"></div>\n      </div>\n\n      <audio\n        id=\"sfx\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"1\"\n        src=\"/public/catalog/assets/e3da3426014c6290.wav\"\n        data-volume=\"0.95\"\n      ></audio>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      const tl = gsap.timeline({\n        paused: true,\n        defaults: { overwrite: \"auto\" },\n      });\n\n      tl.from(\n        \"#map-plane\",\n        { scale: 1.1, x: -38, y: 20, opacity: 0.94, duration: 1.05, ease: \"power2.out\" },\n        0.16,\n      );\n      tl.from(\n        \".title-stack\",\n        { y: 28, scale: 0.97, opacity: 0, duration: 0.52, ease: \"expo.out\" },\n        0.24,\n      );\n      tl.from(\".eyebrow\", { x: -22, opacity: 0, duration: 0.36, ease: \"power3.out\" }, 0.32);\n      tl.from(\".headline\", { y: 34, opacity: 0, duration: 0.5, ease: \"back.out(1.45)\" }, 0.4);\n      tl.from(\".route-meta\", { x: -26, opacity: 0, duration: 0.38, ease: \"circ.out\" }, 0.58);\n\n      tl.from(\"#nyc-pin\", { scale: 0.12, opacity: 0, duration: 0.34, ease: \"back.out(2.8)\" }, 0.7);\n      tl.from(\n        \"#paris-pin\",\n        { scale: 0.12, opacity: 0, duration: 0.34, ease: \"elastic.out(1, 0.5)\" },\n        0.86,\n      );\n\n      tl.from(\"#plane\", { scale: 0.48, opacity: 0, duration: 0.3, ease: \"back.out(2.2)\" }, 1.08);\n      tl.to(\"#route-glow\", { strokeDashoffset: 0, duration: 3.1, ease: \"power1.inOut\" }, 1.16);\n      tl.to(\"#route-path\", { strokeDashoffset: 0, duration: 3.05, ease: \"power2.inOut\" }, 1.2);\n      tl.to(\"#route-thread\", { strokeDashoffset: 0, duration: 2.92, ease: \"sine.inOut\" }, 1.26);\n      tl.to(\"#plane\", { offsetDistance: \"100%\", duration: 3.25, ease: \"sine.inOut\" }, 1.17);\n      tl.to(\n        \"#plane-core\",\n        { scale: 1.06, duration: 0.2, repeat: 12, yoyo: true, ease: \"sine.inOut\" },\n        1.22,\n      );\n      tl.to(\"#map-plane\", { scale: 1.025, duration: 3.2, ease: \"sine.inOut\" }, 1.28);\n\n      gsap.utils.toArray(\".route-tick\").forEach((tick, index) => {\n        tl.fromTo(\n          tick,\n          { scale: 0.2, opacity: 0 },\n          { scale: 1, opacity: 1, duration: 0.16, ease: \"back.out(3)\" },\n          1.34 + index * 0.44,\n        );\n        tl.to(\n          tick,\n          { scale: 0.6, opacity: 0.18, duration: 0.34, ease: \"power2.out\" },\n          1.48 + index * 0.44,\n        );\n      });\n\n      tl.from(\n        \"#paris-pulse\",\n        { scale: 0.52, opacity: 0, duration: 0.26, ease: \"back.out(2.4)\" },\n        4.06,\n      );\n      tl.to(\"#doodle-a\", { strokeDashoffset: 0, duration: 0.54, ease: \"power2.out\" }, 4.18);\n      tl.to(\"#doodle-b\", { strokeDashoffset: 0, duration: 0.36, ease: \"power3.out\" }, 4.36);\n      tl.to(\"#paris-pulse\", { scale: 1.5, opacity: 0, duration: 0.58, ease: \"power3.out\" }, 4.64);\n\n      tl.to(\"#plane-core\", { scale: 1.23, duration: 0.16, ease: \"back.out(3)\" }, 4.96);\n      tl.to(\"#plane-core\", { scale: 0.9, duration: 0.12, ease: \"power2.in\" }, 5.12);\n      tl.to(\"#plane-core\", { scale: 1, duration: 0.22, ease: \"elastic.out(1, 0.45)\" }, 5.24);\n      tl.to(\n        \"#landing-badge\",\n        { scale: 1, opacity: 1, duration: 0.28, ease: \"back.out(2.4)\" },\n        5.02,\n      );\n      tl.to(\n        \"#landing-badge\",\n        { scale: 1.06, duration: 0.16, yoyo: true, repeat: 1, ease: \"sine.inOut\" },\n        5.3,\n      );\n\n      tl.set(\"#white-screen\", { opacity: 1 }, 5.5);\n\n      window.__timelines[\"nyc-paris-flight\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/organic-light-leak-overlay.json b/docs/public/catalog/blocks/organic-light-leak-overlay.json
new file mode 100644
index 0000000000..d961bdb1af
--- /dev/null
+++ b/docs/public/catalog/blocks/organic-light-leak-overlay.json
@@ -0,0 +1 @@
+{"html":"<!DOCTYPE html>\n<html lang=\"en\">\n  <head><style data-hyperframes-text-rendering=\"true\">html,body,*{text-rendering:geometricPrecision}</style>\n    <meta charset=\"UTF-8\">\n    <script>/* inlined: https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js */\n/*!\n * GSAP 3.14.2\n * https://gsap.com\n * \n * @license Copyright 2025, GreenSock. All rights reserved.\n * Subject to the terms at https://gsap.com/standard-license.\n * @author: Jack Doyle, jack@greensock.com\n */\n\n!function(t,e){\"object\"==typeof exports&&\"undefined\"!=typeof module?e(exports):\"function\"==typeof define&&define.amd?define([\"exports\"],e):e((t=t||self).window=t.window||{})}(this,function(e){\"use strict\";function _inheritsLoose(t,e){t.prototype=Object.create(e.prototype),(t.prototype.constructor=t).__proto__=e}function _assertThisInitialized(t){if(void 0===t)throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\");return t}function r(t){return\"string\"==typeof t}function s(t){return\"function\"==typeof t}function t(t){return\"number\"==typeof t}function u(t){return void 0===t}function v(t){return\"object\"==typeof t}function w(t){return!1!==t}function x(){return\"undefined\"!=typeof window}function y(t){return s(t)||r(t)}function R(t){return(i=bt(t,ht))&&Fe}function S(t,e){return console.warn(\"Invalid property\",t,\"set to\",e,\"Missing plugin? gsap.registerPlugin()\")}function T(t,e){return!e&&console.warn(t)}function U(t,e){return t&&(ht[t]=e)&&i&&(i[t]=e)||ht}function V(){return 0}function ga(t){var e,r,i=t[0];if(v(i)||s(i)||(t=[t]),!(e=(i._gsap||{}).harness)){for(r=yt.length;r--&&!yt[r].targetTest(i););e=yt[r]}for(r=t.length;r--;)t[r]&&(t[r]._gsap||(t[r]._gsap=new Xt(t[r],e)))||t.splice(r,1);return t}function ha(t){return t._gsap||ga(Pt(t))[0]._gsap}function ia(t,e,r){return(r=t[e])&&s(r)?t[e]():u(r)&&t.getAttribute&&t.getAttribute(e)||r}function ja(t,e){return(t=t.split(\",\")).forEach(e)||t}function ka(t){return Math.round(1e5*t)/1e5||0}function la(t){return Math.round(1e7*t)/1e7||0}function ma(t,e){var r=e.charAt(0),i=parseFloat(e.substr(2));return t=parseFloat(t),\"+\"===r?t+i:\"-\"===r?t-i:\"*\"===r?t*i:t/i}function na(t,e){for(var r=e.length,i=0;t.indexOf(e[i])<0&&++i<r;);return i<r}function oa(){var t,e,r=pt.length,i=pt.slice(0);for(_t={},t=pt.length=0;t<r;t++)(e=i[t])&&e._lazy&&(e.render(e._lazy[0],e._lazy[1],!0)._lazy=0)}function pa(t){return!!(t._initted||t._startAt||t.add)}function qa(t,e,r,i){pt.length&&!I&&oa(),t.render(e,r,i||!!(I&&e<0&&pa(t))),pt.length&&!I&&oa()}function ra(t){var e=parseFloat(t);return(e||0===e)&&(t+\"\").match(ot).length<2?e:r(t)?t.trim():t}function sa(t){return t}function ta(t,e){for(var r in e)r in t||(t[r]=e[r]);return t}function wa(t,e){for(var r in e)\"__proto__\"!==r&&\"constructor\"!==r&&\"prototype\"!==r&&(t[r]=v(e[r])?wa(t[r]||(t[r]={}),e[r]):e[r]);return t}function xa(t,e){var r,i={};for(r in t)r in e||(i[r]=t[r]);return i}function ya(t){var e=t.parent||L,r=t.keyframes?function _setKeyframeDefaults(i){return function(t,e){for(var r in e)r in t||\"duration\"===r&&i||\"ease\"===r||(t[r]=e[r])}}($(t.keyframes)):ta;if(w(t.inherit))for(;e;)r(t,e.vars.defaults),e=e.parent||e._dp;return t}function Aa(t,e,r,i,n){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var a,s=t[i];if(n)for(a=e[n];s&&s[n]>a;)s=s._prev;return s?(e._next=s._next,s._next=e):(e._next=t[r],t[r]=e),e._next?e._next._prev=e:t[i]=e,e._prev=s,e.parent=e._dp=t,e}function Ba(t,e,r,i){void 0===r&&(r=\"_first\"),void 0===i&&(i=\"_last\");var n=e._prev,a=e._next;n?n._next=a:t[r]===e&&(t[r]=a),a?a._prev=n:t[i]===e&&(t[i]=n),e._next=e._prev=e.parent=null}function Ca(t,e){t.parent&&(!e||t.parent.autoRemoveChildren)&&t.parent.remove&&t.parent.remove(t),t._act=0}function Da(t,e){if(t&&(!e||e._end>t._dur||e._start<0))for(var r=t;r;)r._dirty=1,r=r.parent;return t}function Fa(t,e,r,i){return t._startAt&&(I?t._startAt.revert(ft):t.vars.immediateRender&&!t.vars.autoRevert||t._startAt.render(e,!0,i))}function Ha(t){return t._repeat?wt(t._tTime,t=t.duration()+t._rDelay)*t:0}function Ja(t,e){return(t-e._start)*e._ts+(0<=e._ts?0:e._dirty?e.totalDuration():e._tDur)}function Ka(t){return t._end=la(t._start+(t._tDur/Math.abs(t._ts||t._rts||q)||0))}function La(t,e){var r=t._dp;return r&&r.smoothChildTiming&&t._ts&&(t._start=la(r._time-(0<t._ts?e/t._ts:((t._dirty?t.totalDuration():t._tDur)-e)/-t._ts)),Ka(t),r._dirty||Da(r,t)),t}function Ma(t,e){var r;if((e._time||!e._dur&&e._initted||e._start<t._time&&(e._dur||!e.add))&&(r=Ja(t.rawTime(),e),(!e._dur||Mt(0,e.totalDuration(),r)-e._tTime>q)&&e.render(r,!0)),Da(t,e)._dp&&t._initted&&t._time>=t._dur&&t._ts){if(t._dur<t.duration())for(r=t;r._dp;)0<=r.rawTime()&&r.totalTime(r._tTime),r=r._dp;t._zTime=-q}}function Na(e,r,i,n){return r.parent&&Ca(r),r._start=la((t(i)?i:i||e!==L?Ot(e,i,r):e._time)+r._delay),r._end=la(r._start+(r.totalDuration()/Math.abs(r.timeScale())||0)),Aa(e,r,\"_first\",\"_last\",e._sort?\"_start\":0),xt(r)||(e._recent=r),n||Ma(e,r),e._ts<0&&La(e,e._tTime),e}function Oa(t,e){return(ht.ScrollTrigger||S(\"scrollTrigger\",e))&&ht.ScrollTrigger.create(e,t)}function Pa(t,e,r,i,n){return Qt(t,e,n),t._initted?!r&&t._pt&&!I&&(t._dur&&!1!==t.vars.lazy||!t._dur&&t.vars.lazy)&&f!==It.frame?(pt.push(t),t._lazy=[n,i],1):void 0:1}function Ua(t,e,r,i){var n=t._repeat,a=la(e)||0,s=t._tTime/t._tDur;return s&&!i&&(t._time*=a/t._dur),t._dur=a,t._tDur=n?n<0?1e10:la(a*(n+1)+t._rDelay*n):a,0<s&&!i&&La(t,t._tTime=t._tDur*s),t.parent&&Ka(t),r||Da(t.parent,t),t}function Va(t){return t instanceof Zt?Da(t):Ua(t,t._dur)}function Ya(e,r,i){var n,a,s=t(r[1]),o=(s?2:1)+(e<2?0:1),u=r[o];if(s&&(u.duration=r[1]),u.parent=i,e){for(n=u,a=i;a&&!(\"immediateRender\"in n);)n=a.vars.defaults||{},a=w(a.vars.inherit)&&a.parent;u.immediateRender=w(n.immediateRender),e<2?u.runBackwards=1:u.startAt=r[o-1]}return new te(r[0],u,r[1+o])}function Za(t,e){return t||0===t?e(t):e}function _a(t,e){return r(t)&&(e=ut.exec(t))?e[1]:\"\"}function cb(t,e){return t&&v(t)&&\"length\"in t&&(!e&&!t.length||t.length-1 in t&&v(t[0]))&&!t.nodeType&&t!==h}function fb(r){return r=Pt(r)[0]||T(\"Invalid scope\")||{},function(t){var e=r.current||r.nativeElement||r;return Pt(t,e.querySelectorAll?e:e===r?T(\"Invalid scope\")||a.createElement(\"div\"):r)}}function gb(t){return t.sort(function(){return.5-Math.random()})}function hb(t){if(s(t))return t;var p=v(t)?t:{each:t},_=Vt(p.ease),m=p.from||0,g=parseFloat(p.base)||0,y={},e=0<m&&m<1,T=isNaN(m)||e,b=p.axis,w=m,x=m;return r(m)?w=x={center:.5,edges:.5,end:1}[m]||0:!e&&T&&(w=m[0],x=m[1]),function(t,e,r){var i,n,a,s,o,u,h,l,f,d=(r||p).length,c=y[d];if(!c){if(!(f=\"auto\"===p.grid?0:(p.grid||[1,X])[1])){for(h=-X;h<(h=r[f++].getBoundingClientRect().left)&&f<d;);f<d&&f--}for(c=y[d]=[],i=T?Math.min(f,d)*w-.5:m%f,n=f===X?0:T?d*x/f-.5:m/f|0,l=X,u=h=0;u<d;u++)a=u%f-i,s=n-(u/f|0),c[u]=o=b?Math.abs(\"y\"===b?s:a):J(a*a+s*s),h<o&&(h=o),o<l&&(l=o);\"random\"===m&&gb(c),c.max=h-l,c.min=l,c.v=d=(parseFloat(p.amount)||parseFloat(p.each)*(d<f?d-1:b?\"y\"===b?d/f:f:Math.max(f,d/f))||0)*(\"edges\"===m?-1:1),c.b=d<0?g-d:g,c.u=_a(p.amount||p.each)||0,_=_&&d<0?jt(_):_}return d=(c[t]-c.min)/c.max||0,la(c.b+(_?_(d):d)*c.v)+c.u}}function ib(i){var n=Math.pow(10,((i+\"\").split(\".\")[1]||\"\").length);return function(e){var r=la(Math.round(parseFloat(e)/i)*i*n);return(r-r%1)/n+(t(e)?0:_a(e))}}function jb(h,e){var l,f,r=$(h);return!r&&v(h)&&(l=r=h.radius||X,h.values?(h=Pt(h.values),(f=!t(h[0]))&&(l*=l)):h=ib(h.increment)),Za(e,r?s(h)?function(t){return f=h(t),Math.abs(f-t)<=l?f:t}:function(e){for(var r,i,n=parseFloat(f?e.x:e),a=parseFloat(f?e.y:0),s=X,o=0,u=h.length;u--;)(r=f?(r=h[u].x-n)*r+(i=h[u].y-a)*i:Math.abs(h[u]-n))<s&&(s=r,o=u);return o=!l||s<=l?h[o]:e,f||o===e||t(e)?o:o+_a(e)}:ib(h))}function kb(t,e,r,i){return Za($(t)?!e:!0===r?!!(r=0):!i,function(){return $(t)?t[~~(Math.random()*t.length)]:(r=r||1e-5)&&(i=r<1?Math.pow(10,(r+\"\").length-2):1)&&Math.floor(Math.round((t-r/2+Math.random()*(e-t+.99*r))/r)*r*i)/i})}function ob(e,r,t){return Za(t,function(t){return e[~~r(t)]})}function rb(t){return t.replace(tt,function(t){var e=t.indexOf(\"[\")+1,r=t.substring(e||7,e?t.indexOf(\"]\"):t.length-1).split(et);return kb(e?r:+r[0],e?0:+r[1],+r[2]||1e-5)})}function ub(t,e,r){var i,n,a,s=t.labels,o=X;for(i in s)(n=s[i]-e)<0==!!r&&n&&o>(n=Math.abs(n))&&(a=i,o=n);return a}function wb(t){return Ca(t),t.scrollTrigger&&t.scrollTrigger.kill(!!I),t.progress()<1&&Dt(t,\"onInterrupt\"),t}function zb(t){if(t)if(t=!t.name&&t.default||t,x()||t.headless){var e=t.name,r=s(t),i=e&&!r&&t.init?function(){this._props=[]}:t,n={init:V,render:ve,add:Jt,kill:Te,modifier:ye,rawVars:0},a={targetTest:0,get:0,getSetter:le,aliases:{},register:0};if(Lt(),t!==i){if(mt[e])return;ta(i,ta(xa(t,n),a)),bt(i.prototype,bt(n,xa(t,a))),mt[i.prop=e]=i,t.targetTest&&(yt.push(i),ct[e]=1),e=(\"css\"===e?\"CSS\":e.charAt(0).toUpperCase()+e.substr(1))+\"Plugin\"}U(e,i),t.register&&t.register(Fe,i,we)}else St.push(t)}function Cb(t,e,r){return(6*(t+=t<0?1:1<t?-1:0)<1?e+(r-e)*t*6:t<.5?r:3*t<2?e+(r-e)*(2/3-t)*6:e)*zt+.5|0}function Db(e,r,i){var n,a,s,o,u,h,l,f,d,c,p=e?t(e)?[e>>16,e>>8&zt,e&zt]:0:Et.black;if(!p){if(\",\"===e.substr(-1)&&(e=e.substr(0,e.length-1)),Et[e])p=Et[e];else if(\"#\"===e.charAt(0)){if(e.length<6&&(e=\"#\"+(n=e.charAt(1))+n+(a=e.charAt(2))+a+(s=e.charAt(3))+s+(5===e.length?e.charAt(4)+e.charAt(4):\"\")),9===e.length)return[(p=parseInt(e.substr(1,6),16))>>16,p>>8&zt,p&zt,parseInt(e.substr(7),16)/255];p=[(e=parseInt(e.substr(1),16))>>16,e>>8&zt,e&zt]}else if(\"hsl\"===e.substr(0,3))if(p=c=e.match(rt),r){if(~e.indexOf(\"=\"))return p=e.match(it),i&&p.length<4&&(p[3]=1),p}else o=+p[0]%360/360,u=p[1]/100,n=2*(h=p[2]/100)-(a=h<=.5?h*(u+1):h+u-h*u),3<p.length&&(p[3]*=1),p[0]=Cb(o+1/3,n,a),p[1]=Cb(o,n,a),p[2]=Cb(o-1/3,n,a);else p=e.match(rt)||Et.transparent;p=p.map(Number)}return r&&!c&&(n=p[0]/zt,a=p[1]/zt,s=p[2]/zt,h=((l=Math.max(n,a,s))+(f=Math.min(n,a,s)))/2,l===f?o=u=0:(d=l-f,u=.5<h?d/(2-l-f):d/(l+f),o=l===n?(a-s)/d+(a<s?6:0):l===a?(s-n)/d+2:(n-a)/d+4,o*=60),p[0]=~~(o+.5),p[1]=~~(100*u+.5),p[2]=~~(100*h+.5)),i&&p.length<4&&(p[3]=1),p}function Eb(t){var r=[],i=[],n=-1;return t.split(Rt).forEach(function(t){var e=t.match(nt)||[];r.push.apply(r,e),i.push(n+=e.length+1)}),r.c=i,r}function Fb(t,e,r){var i,n,a,s,o=\"\",u=(t+o).match(Rt),h=e?\"hsla(\":\"rgba(\",l=0;if(!u)return t;if(u=u.map(function(t){return(t=Db(t,e,1))&&h+(e?t[0]+\",\"+t[1]+\"%,\"+t[2]+\"%,\"+t[3]:t.join(\",\"))+\")\"}),r&&(a=Eb(t),(i=r.c).join(o)!==a.c.join(o)))for(s=(n=t.replace(Rt,\"1\").split(nt)).length-1;l<s;l++)o+=n[l]+(~i.indexOf(l)?u.shift()||h+\"0,0,0,0)\":(a.length?a:u.length?u:r).shift());if(!n)for(s=(n=t.split(Rt)).length-1;l<s;l++)o+=n[l]+u[l];return o+n[s]}function Ib(t){var e,r=t.join(\" \");if(Rt.lastIndex=0,Rt.test(r))return e=Ft.test(r),t[1]=Fb(t[1],e),t[0]=Fb(t[0],e,Eb(t[1])),!0}function Rb(t){var e=(t+\"\").split(\"(\"),r=Bt[e[0]];return r&&1<e.length&&r.config?r.config.apply(null,~t.indexOf(\"{\")?[function _parseObjectInString(t){for(var e,r,i,n={},a=t.substr(1,t.length-3).split(\":\"),s=a[0],o=1,u=a.length;o<u;o++)r=a[o],e=o!==u-1?r.lastIndexOf(\",\"):r.length,i=r.substr(0,e),n[s]=isNaN(i)?i.replace(Nt,\"\").trim():+i,s=r.substr(e+1).trim();return n}(e[1])]:function _valueInParentheses(t){var e=t.indexOf(\"(\")+1,r=t.indexOf(\")\"),i=t.indexOf(\"(\",e);return t.substring(e,~i&&i<r?t.indexOf(\")\",r+1):r)}(t).split(\",\").map(ra)):Bt._CE&&Yt.test(t)?Bt._CE(\"\",t):r}function Tb(t,e){for(var r,i=t._first;i;)i instanceof Zt?Tb(i,e):!i.vars.yoyoEase||i._yoyo&&i._repeat||i._yoyo===e||(i.timeline?Tb(i.timeline,e):(r=i._ease,i._ease=i._yEase,i._yEase=r,i._yoyo=e)),i=i._next}function Vb(t,e,r,i){void 0===r&&(r=function easeOut(t){return 1-e(1-t)}),void 0===i&&(i=function easeInOut(t){return t<.5?e(2*t)/2:1-e(2*(1-t))/2});var n,a={easeIn:e,easeOut:r,easeInOut:i};return ja(t,function(t){for(var e in Bt[t]=ht[t]=a,Bt[n=t.toLowerCase()]=r,a)Bt[n+(\"easeIn\"===e?\".in\":\"easeOut\"===e?\".out\":\".inOut\")]=Bt[t+\".\"+e]=a[e]}),a}function Wb(e){return function(t){return t<.5?(1-e(1-2*t))/2:.5+e(2*(t-.5))/2}}function Xb(r,t,e){function Lm(t){return 1===t?1:i*Math.pow(2,-10*t)*G((t-a)*n)+1}var i=1<=t?t:1,n=(e||(r?.3:.45))/(t<1?t:1),a=n/Z*(Math.asin(1/i)||0),s=\"out\"===r?Lm:\"in\"===r?function(t){return 1-Lm(1-t)}:Wb(Lm);return n=Z/n,s.config=function(t,e){return Xb(r,t,e)},s}function Yb(e,r){function Tm(t){return t?--t*t*((r+1)*t+r)+1:0}void 0===r&&(r=1.70158);var t=\"out\"===e?Tm:\"in\"===e?function(t){return 1-Tm(1-t)}:Wb(Tm);return t.config=function(t){return Yb(e,t)},t}var F,I,l,L,h,n,a,i,o,f,d,c,p,_,m,g,b,k,O,M,C,P,A,D,z,E,B,Y,N={autoSleep:120,force3D:\"auto\",nullTargetWarn:1,units:{lineHeight:\"\"}},j={duration:.5,overwrite:!1,delay:0},X=1e8,q=1/X,Z=2*Math.PI,W=Z/4,H=0,J=Math.sqrt,Q=Math.cos,G=Math.sin,K=\"function\"==typeof ArrayBuffer&&ArrayBuffer.isView||function(){},$=Array.isArray,tt=/random\\([^)]+\\)/g,et=/,\\s*/g,rt=/(?:-?\\.?\\d|\\.)+/gi,it=/[-+=.]*\\d+[.e\\-+]*\\d*[e\\-+]*\\d*/g,nt=/[-+=.]*\\d+[.e-]*\\d*[a-z%]*/g,at=/[-+=.]*\\d+\\.?\\d*(?:e-|e\\+)?\\d*/gi,st=/[+-]=-?[.\\d]+/,ot=/[^,'\"\\[\\]\\s]+/gi,ut=/^[+\\-=e\\s\\d]*\\d+[.\\d]*([a-z]*|%)\\s*$/i,ht={},lt={suppressEvents:!0,isStart:!0,kill:!1},ft={suppressEvents:!0,kill:!1},dt={suppressEvents:!0},ct={},pt=[],_t={},mt={},gt={},vt=30,yt=[],Tt=\"\",bt=function _merge(t,e){for(var r in e)t[r]=e[r];return t},wt=function _animationCycle(t,e){var r=Math.floor(t=la(t/e));return t&&r===t?r-1:r},xt=function _isFromOrFromStart(t){var e=t.data;return\"isFromStart\"===e||\"isStart\"===e},kt={_start:0,endTime:V,totalDuration:V},Ot=function _parsePosition(t,e,i){var n,a,s,o=t.labels,u=t._recent||kt,h=t.duration()>=X?u.endTime(!1):t._dur;return r(e)&&(isNaN(e)||e in o)?(a=e.charAt(0),s=\"%\"===e.substr(-1),n=e.indexOf(\"=\"),\"<\"===a||\">\"===a?(0<=n&&(e=e.replace(/=/,\"\")),(\"<\"===a?u._start:u.endTime(0<=u._repeat))+(parseFloat(e.substr(1))||0)*(s?(n<0?u:i).totalDuration()/100:1)):n<0?(e in o||(o[e]=h),o[e]):(a=parseFloat(e.charAt(n-1)+e.substr(n+1)),s&&i&&(a=a/100*($(i)?i[0]:i).totalDuration()),1<n?_parsePosition(t,e.substr(0,n-1),i)+a:h+a)):null==e?h:+e},Mt=function _clamp(t,e,r){return r<t?t:e<r?e:r},Ct=[].slice,Pt=function toArray(t,e,i){return l&&!e&&l.selector?l.selector(t):!r(t)||i||!n&&Lt()?$(t)?function _flatten(t,e,i){return void 0===i&&(i=[]),t.forEach(function(t){return r(t)&&!e||cb(t,1)?i.push.apply(i,Pt(t)):i.push(t)})||i}(t,i):cb(t)?Ct.call(t,0):t?[t]:[]:Ct.call((e||a).querySelectorAll(t),0)},At=function mapRange(e,t,r,i,n){var a=t-e,s=i-r;return Za(n,function(t){return r+((t-e)/a*s||0)})},Dt=function _callback(t,e,r){var i,n,a,s=t.vars,o=s[e],u=l,h=t._ctx;if(o)return i=s[e+\"Params\"],n=s.callbackScope||t,r&&pt.length&&oa(),h&&(l=h),a=i?o.apply(n,i):o.call(n),l=u,a},St=[],zt=255,Et={aqua:[0,zt,zt],lime:[0,zt,0],silver:[192,192,192],black:[0,0,0],maroon:[128,0,0],teal:[0,128,128],blue:[0,0,zt],navy:[0,0,128],white:[zt,zt,zt],olive:[128,128,0],yellow:[zt,zt,0],orange:[zt,165,0],gray:[128,128,128],purple:[128,0,128],green:[0,128,0],red:[zt,0,0],pink:[zt,192,203],cyan:[0,zt,zt],transparent:[zt,zt,zt,0]},Rt=function(){var t,e=\"(?:\\\\b(?:(?:rgb|rgba|hsl|hsla)\\\\(.+?\\\\))|\\\\B#(?:[0-9a-f]{3,4}){1,2}\\\\b\";for(t in Et)e+=\"|\"+t+\"\\\\b\";return new RegExp(e+\")\",\"gi\")}(),Ft=/hsl[a]?\\(/,It=(O=Date.now,M=500,C=33,P=O(),A=P,z=D=1e3/240,g={time:0,frame:0,tick:function tick(){Al(!0)},deltaRatio:function deltaRatio(t){return b/(1e3/(t||60))},wake:function wake(){o&&(!n&&x()&&(h=n=window,a=h.document||{},ht.gsap=Fe,(h.gsapVersions||(h.gsapVersions=[])).push(Fe.version),R(i||h.GreenSockGlobals||!h.gsap&&h||{}),St.forEach(zb)),m=\"undefined\"!=typeof requestAnimationFrame&&requestAnimationFrame,p&&g.sleep(),_=m||function(t){return setTimeout(t,z-1e3*g.time+1|0)},c=1,Al(2))},sleep:function sleep(){(m?cancelAnimationFrame:clearTimeout)(p),c=0,_=V},lagSmoothing:function lagSmoothing(t,e){M=t||1/0,C=Math.min(e||33,M)},fps:function fps(t){D=1e3/(t||240),z=1e3*g.time+D},add:function add(n,t,e){var a=t?function(t,e,r,i){n(t,e,r,i),g.remove(a)}:n;return g.remove(n),E[e?\"unshift\":\"push\"](a),Lt(),a},remove:function remove(t,e){~(e=E.indexOf(t))&&E.splice(e,1)&&e<=k&&k--},_listeners:E=[]}),Lt=function _wake(){return!c&&It.wake()},Bt={},Yt=/^[\\d.\\-M][\\d.\\-,\\s]/,Nt=/[\"']/g,jt=function _invertEase(e){return function(t){return 1-e(1-t)}},Vt=function _parseEase(t,e){return t&&(s(t)?t:Bt[t]||Rb(t))||e};function Al(t){var e,r,i,n,a=O()-A,s=!0===t;if((M<a||a<0)&&(P+=a-C),(0<(e=(i=(A+=a)-P)-z)||s)&&(n=++g.frame,b=i-1e3*g.time,g.time=i/=1e3,z+=e+(D<=e?4:D-e),r=1),s||(p=_(Al)),r)for(k=0;k<E.length;k++)E[k](i,b,n,t)}function jn(t){return t<Y?B*t*t:t<.7272727272727273?B*Math.pow(t-1.5/2.75,2)+.75:t<.9090909090909092?B*(t-=2.25/2.75)*t+.9375:B*Math.pow(t-2.625/2.75,2)+.984375}ja(\"Linear,Quad,Cubic,Quart,Quint,Strong\",function(t,e){var r=e<5?e+1:e;Vb(t+\",Power\"+(r-1),e?function(t){return Math.pow(t,r)}:function(t){return t},function(t){return 1-Math.pow(1-t,r)},function(t){return t<.5?Math.pow(2*t,r)/2:1-Math.pow(2*(1-t),r)/2})}),Bt.Linear.easeNone=Bt.none=Bt.Linear.easeIn,Vb(\"Elastic\",Xb(\"in\"),Xb(\"out\"),Xb()),B=7.5625,Y=1/2.75,Vb(\"Bounce\",function(t){return 1-jn(1-t)},jn),Vb(\"Expo\",function(t){return Math.pow(2,10*(t-1))*t+t*t*t*t*t*t*(1-t)}),Vb(\"Circ\",function(t){return-(J(1-t*t)-1)}),Vb(\"Sine\",function(t){return 1===t?1:1-Q(t*W)}),Vb(\"Back\",Yb(\"in\"),Yb(\"out\"),Yb()),Bt.SteppedEase=Bt.steps=ht.SteppedEase={config:function config(t,e){void 0===t&&(t=1);var r=1/t,i=t+(e?0:1),n=e?1:0;return function(t){return((i*Mt(0,.99999999,t)|0)+n)*r}}},j.ease=Bt[\"quad.out\"],ja(\"onComplete,onUpdate,onStart,onRepeat,onReverseComplete,onInterrupt\",function(t){return Tt+=t+\",\"+t+\"Params,\"});var Ut,Xt=function GSCache(t,e){this.id=H++,(t._gsap=this).target=t,this.harness=e,this.get=e?e.get:ia,this.set=e?e.getSetter:le},qt=((Ut=Animation.prototype).delay=function delay(t){return t||0===t?(this.parent&&this.parent.smoothChildTiming&&this.startTime(this._start+t-this._delay),this._delay=t,this):this._delay},Ut.duration=function duration(t){return arguments.length?this.totalDuration(0<this._repeat?t+(t+this._rDelay)*this._repeat:t):this.totalDuration()&&this._dur},Ut.totalDuration=function totalDuration(t){return arguments.length?(this._dirty=0,Ua(this,this._repeat<0?t:(t-this._repeat*this._rDelay)/(this._repeat+1))):this._tDur},Ut.totalTime=function totalTime(t,e){if(Lt(),!arguments.length)return this._tTime;var r=this._dp;if(r&&r.smoothChildTiming&&this._ts){for(La(this,t),!r._dp||r.parent||Ma(r,this);r&&r.parent;)r.parent._time!==r._start+(0<=r._ts?r._tTime/r._ts:(r.totalDuration()-r._tTime)/-r._ts)&&r.totalTime(r._tTime,!0),r=r.parent;!this.parent&&this._dp.autoRemoveChildren&&(0<this._ts&&t<this._tDur||this._ts<0&&0<t||!this._tDur&&!t)&&Na(this._dp,this,this._start-this._delay)}return(this._tTime!==t||!this._dur&&!e||this._initted&&Math.abs(this._zTime)===q||!this._initted&&this._dur&&t||!t&&!this._initted&&(this.add||this._ptLookup))&&(this._ts||(this._pTime=t),qa(this,t,e)),this},Ut.time=function time(t,e){return arguments.length?this.totalTime(Math.min(this.totalDuration(),t+Ha(this))%(this._dur+this._rDelay)||(t?this._dur:0),e):this._time},Ut.totalProgress=function totalProgress(t,e){return arguments.length?this.totalTime(this.totalDuration()*t,e):this.totalDuration()?Math.min(1,this._tTime/this._tDur):0<=this.rawTime()&&this._initted?1:0},Ut.progress=function progress(t,e){return arguments.length?this.totalTime(this.duration()*(!this._yoyo||1&this.iteration()?t:1-t)+Ha(this),e):this.duration()?Math.min(1,this._time/this._dur):0<this.rawTime()?1:0},Ut.iteration=function iteration(t,e){var r=this.duration()+this._rDelay;return arguments.length?this.totalTime(this._time+(t-1)*r,e):this._repeat?wt(this._tTime,r)+1:1},Ut.timeScale=function timeScale(t,e){if(!arguments.length)return this._rts===-q?0:this._rts;if(this._rts===t)return this;var r=this.parent&&this._ts?Ja(this.parent._time,this):this._tTime;return this._rts=+t||0,this._ts=this._ps||t===-q?0:this._rts,this.totalTime(Mt(-Math.abs(this._delay),this.totalDuration(),r),!1!==e),Ka(this),function _recacheAncestors(t){for(var e=t.parent;e&&e.parent;)e._dirty=1,e.totalDuration(),e=e.parent;return t}(this)},Ut.paused=function paused(t){return arguments.length?(this._ps!==t&&((this._ps=t)?(this._pTime=this._tTime||Math.max(-this._delay,this.rawTime()),this._ts=this._act=0):(Lt(),this._ts=this._rts,this.totalTime(this.parent&&!this.parent.smoothChildTiming?this.rawTime():this._tTime||this._pTime,1===this.progress()&&Math.abs(this._zTime)!==q&&(this._tTime-=q)))),this):this._ps},Ut.startTime=function startTime(t){if(arguments.length){this._start=la(t);var e=this.parent||this._dp;return!e||!e._sort&&this.parent||Na(e,this,this._start-this._delay),this}return this._start},Ut.endTime=function endTime(t){return this._start+(w(t)?this.totalDuration():this.duration())/Math.abs(this._ts||1)},Ut.rawTime=function rawTime(t){var e=this.parent||this._dp;return e?t&&(!this._ts||this._repeat&&this._time&&this.totalProgress()<1)?this._tTime%(this._dur+this._rDelay):this._ts?Ja(e.rawTime(t),this):this._tTime:this._tTime},Ut.revert=function revert(t){void 0===t&&(t=dt);var e=I;return I=t,pa(this)&&(this.timeline&&this.timeline.revert(t),this.totalTime(-.01,t.suppressEvents)),\"nested\"!==this.data&&!1!==t.kill&&this.kill(),I=e,this},Ut.globalTime=function globalTime(t){for(var e=this,r=arguments.length?t:e.rawTime();e;)r=e._start+r/(Math.abs(e._ts)||1),e=e._dp;return!this.parent&&this._sat?this._sat.globalTime(t):r},Ut.repeat=function repeat(t){return arguments.length?(this._repeat=t===1/0?-2:t,Va(this)):-2===this._repeat?1/0:this._repeat},Ut.repeatDelay=function repeatDelay(t){if(arguments.length){var e=this._time;return this._rDelay=t,Va(this),e?this.time(e):this}return this._rDelay},Ut.yoyo=function yoyo(t){return arguments.length?(this._yoyo=t,this):this._yoyo},Ut.seek=function seek(t,e){return this.totalTime(Ot(this,t),w(e))},Ut.restart=function restart(t,e){return this.play().totalTime(t?-this._delay:0,w(e)),this._dur||(this._zTime=-q),this},Ut.play=function play(t,e){return null!=t&&this.seek(t,e),this.reversed(!1).paused(!1)},Ut.reverse=function reverse(t,e){return null!=t&&this.seek(t||this.totalDuration(),e),this.reversed(!0).paused(!1)},Ut.pause=function pause(t,e){return null!=t&&this.seek(t,e),this.paused(!0)},Ut.resume=function resume(){return this.paused(!1)},Ut.reversed=function reversed(t){return arguments.length?(!!t!==this.reversed()&&this.timeScale(-this._rts||(t?-q:0)),this):this._rts<0},Ut.invalidate=function invalidate(){return this._initted=this._act=0,this._zTime=-q,this},Ut.isActive=function isActive(){var t,e=this.parent||this._dp,r=this._start;return!(e&&!(this._ts&&this._initted&&e.isActive()&&(t=e.rawTime(!0))>=r&&t<this.endTime(!0)-q))},Ut.eventCallback=function eventCallback(t,e,r){var i=this.vars;return 1<arguments.length?(e?(i[t]=e,r&&(i[t+\"Params\"]=r),\"onUpdate\"===t&&(this._onUpdate=e)):delete i[t],this):i[t]},Ut.then=function then(t){var i=this,n=i._prom;return new Promise(function(e){function Fo(){var t=i.then;i.then=null,n&&n(),s(r)&&(r=r(i))&&(r.then||r===i)&&(i.then=t),e(r),i.then=t}var r=s(t)?t:sa;i._initted&&1===i.totalProgress()&&0<=i._ts||!i._tTime&&i._ts<0?Fo():i._prom=Fo})},Ut.kill=function kill(){wb(this)},Animation);function Animation(t){this.vars=t,this._delay=+t.delay||0,(this._repeat=t.repeat===1/0?-2:t.repeat||0)&&(this._rDelay=t.repeatDelay||0,this._yoyo=!!t.yoyo||!!t.yoyoEase),this._ts=1,Ua(this,+t.duration,1,1),this.data=t.data,l&&(this._ctx=l).data.push(this),c||It.wake()}ta(qt.prototype,{_time:0,_start:0,_end:0,_tTime:0,_tDur:0,_dirty:0,_repeat:0,_yoyo:!1,parent:null,_initted:!1,_rDelay:0,_ts:1,_dp:0,ratio:0,_zTime:-q,_prom:0,_ps:!1,_rts:1});var Zt=function(i){function Timeline(t,e){var r;return void 0===t&&(t={}),(r=i.call(this,t)||this).labels={},r.smoothChildTiming=!!t.smoothChildTiming,r.autoRemoveChildren=!!t.autoRemoveChildren,r._sort=w(t.sortChildren),L&&Na(t.parent||L,_assertThisInitialized(r),e),t.reversed&&r.reverse(),t.paused&&r.paused(!0),t.scrollTrigger&&Oa(_assertThisInitialized(r),t.scrollTrigger),r}_inheritsLoose(Timeline,i);var e=Timeline.prototype;return e.to=function to(t,e,r){return Ya(0,arguments,this),this},e.from=function from(t,e,r){return Ya(1,arguments,this),this},e.fromTo=function fromTo(t,e,r,i){return Ya(2,arguments,this),this},e.set=function set(t,e,r){return e.duration=0,e.parent=this,ya(e).repeatDelay||(e.repeat=0),e.immediateRender=!!e.immediateRender,new te(t,e,Ot(this,r),1),this},e.call=function call(t,e,r){return Na(this,te.delayedCall(0,t,e),r)},e.staggerTo=function staggerTo(t,e,r,i,n,a,s){return r.duration=e,r.stagger=r.stagger||i,r.onComplete=a,r.onCompleteParams=s,r.parent=this,new te(t,r,Ot(this,n)),this},e.staggerFrom=function staggerFrom(t,e,r,i,n,a,s){return r.runBackwards=1,ya(r).immediateRender=w(r.immediateRender),this.staggerTo(t,e,r,i,n,a,s)},e.staggerFromTo=function staggerFromTo(t,e,r,i,n,a,s,o){return i.startAt=r,ya(i).immediateRender=w(i.immediateRender),this.staggerTo(t,e,i,n,a,s,o)},e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_=this._time,m=this._dirty?this.totalDuration():this._tDur,g=this._dur,v=t<=0?0:la(t),y=this._zTime<0!=t<0&&(this._initted||!g);if(this!==L&&m<v&&0<=t&&(v=m),v!==this._tTime||r||y){if(_!==this._time&&g&&(v+=this._time-_,t+=this._time-_),i=v,f=this._start,u=!(l=this._ts),y&&(g||(_=this._zTime),!t&&e||(this._zTime=t)),this._repeat){if(c=this._yoyo,o=g+this._rDelay,this._repeat<-1&&t<0)return this.totalTime(100*o+t,e,r);if(i=la(v%o),v===m?(s=this._repeat,i=g):((s=~~(d=la(v/o)))&&s===d&&(i=g,s--),g<i&&(i=g)),d=wt(this._tTime,o),!_&&this._tTime&&d!==s&&this._tTime-d*o-this._dur<=0&&(d=s),c&&1&s&&(i=g-i,p=1),s!==d&&!this._lock){var T=c&&1&d,b=T===(c&&1&s);if(s<d&&(T=!T),_=T?0:v%g?g:v,this._lock=1,this.render(_||(p?0:la(s*o)),e,!g)._lock=0,this._tTime=v,!e&&this.parent&&Dt(this,\"onRepeat\"),this.vars.repeatRefresh&&!p&&(this.invalidate()._lock=1,d=s),_&&_!==this._time||u!=!this._ts||this.vars.onRepeat&&!this.parent&&!this._act)return this;if(g=this._dur,m=this._tDur,b&&(this._lock=2,_=T?g:-1e-4,this.render(_,!0),this.vars.repeatRefresh&&!p&&this.invalidate()),this._lock=0,!this._ts&&!u)return this;Tb(this,p)}}if(this._hasPause&&!this._forcing&&this._lock<2&&(h=function _findNextPauseTween(t,e,r){var i;if(e<r)for(i=t._first;i&&i._start<=r;){if(\"isPause\"===i.data&&i._start>e)return i;i=i._next}else for(i=t._last;i&&i._start>=r;){if(\"isPause\"===i.data&&i._start<e)return i;i=i._prev}}(this,la(_),la(i)))&&(v-=i-(i=h._start)),this._tTime=v,this._time=i,this._act=!l,this._initted||(this._onUpdate=this.vars.onUpdate,this._initted=1,this._zTime=t,_=0),!_&&v&&g&&!e&&!d&&(Dt(this,\"onStart\"),this._tTime!==v))return this;if(_<=i&&0<=t)for(n=this._first;n;){if(a=n._next,(n._act||i>=n._start)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(i-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(i-n._start)*n._ts,e,r),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=-q);break}}n=a}else{n=this._last;for(var w=t<0?t:i;n;){if(a=n._prev,(n._act||w<=n._end)&&n._ts&&h!==n){if(n.parent!==this)return this.render(t,e,r);if(n.render(0<n._ts?(w-n._start)*n._ts:(n._dirty?n.totalDuration():n._tDur)+(w-n._start)*n._ts,e,r||I&&pa(n)),i!==this._time||!this._ts&&!u){h=0,a&&(v+=this._zTime=w?-q:q);break}}n=a}}if(h&&!e&&(this.pause(),h.render(_<=i?0:-q)._zTime=_<=i?1:-1,this._ts))return this._start=f,Ka(this),this.render(t,e,r);this._onUpdate&&!e&&Dt(this,\"onUpdate\",!0),(v===m&&this._tTime>=this.totalDuration()||!v&&_)&&(f!==this._start&&Math.abs(l)===Math.abs(this._ts)||this._lock||(!t&&g||!(v===m&&0<this._ts||!v&&this._ts<0)||Ca(this,1),e||t<0&&!_||!v&&!_&&m||(Dt(this,v===m&&0<=t?\"onComplete\":\"onReverseComplete\",!0),!this._prom||v<m&&0<this.timeScale()||this._prom())))}return this},e.add=function add(e,i){var n=this;if(t(i)||(i=Ot(this,i,e)),!(e instanceof qt)){if($(e))return e.forEach(function(t){return n.add(t,i)}),this;if(r(e))return this.addLabel(e,i);if(!s(e))return this;e=te.delayedCall(0,e)}return this!==e?Na(this,e,i):this},e.getChildren=function getChildren(t,e,r,i){void 0===t&&(t=!0),void 0===e&&(e=!0),void 0===r&&(r=!0),void 0===i&&(i=-X);for(var n=[],a=this._first;a;)a._start>=i&&(a instanceof te?e&&n.push(a):(r&&n.push(a),t&&n.push.apply(n,a.getChildren(!0,e,r)))),a=a._next;return n},e.getById=function getById(t){for(var e=this.getChildren(1,1,1),r=e.length;r--;)if(e[r].vars.id===t)return e[r]},e.remove=function remove(t){return r(t)?this.removeLabel(t):s(t)?this.killTweensOf(t):(t.parent===this&&Ba(this,t),t===this._recent&&(this._recent=this._last),Da(this))},e.totalTime=function totalTime(t,e){return arguments.length?(this._forcing=1,!this._dp&&this._ts&&(this._start=la(It.time-(0<this._ts?t/this._ts:(this.totalDuration()-t)/-this._ts))),i.prototype.totalTime.call(this,t,e),this._forcing=0,this):this._tTime},e.addLabel=function addLabel(t,e){return this.labels[t]=Ot(this,e),this},e.removeLabel=function removeLabel(t){return delete this.labels[t],this},e.addPause=function addPause(t,e,r){var i=te.delayedCall(0,e||V,r);return i.data=\"isPause\",this._hasPause=1,Na(this,i,Ot(this,t))},e.removePause=function removePause(t){var e=this._first;for(t=Ot(this,t);e;)e._start===t&&\"isPause\"===e.data&&Ca(e),e=e._next},e.killTweensOf=function killTweensOf(t,e,r){for(var i=this.getTweensOf(t,r),n=i.length;n--;)Wt!==i[n]&&i[n].kill(t,e);return this},e.getTweensOf=function getTweensOf(e,r){for(var i,n=[],a=Pt(e),s=this._first,o=t(r);s;)s instanceof te?na(s._targets,a)&&(o?(!Wt||s._initted&&s._ts)&&s.globalTime(0)<=r&&s.globalTime(s.totalDuration())>r:!r||s.isActive())&&n.push(s):(i=s.getTweensOf(a,r)).length&&n.push.apply(n,i),s=s._next;return n},e.tweenTo=function tweenTo(t,e){e=e||{};var r,i=this,n=Ot(i,t),a=e.startAt,s=e.onStart,o=e.onStartParams,u=e.immediateRender,h=te.to(i,ta({ease:e.ease||\"none\",lazy:!1,immediateRender:!1,time:n,overwrite:\"auto\",duration:e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale())||q,onStart:function onStart(){if(i.pause(),!r){var t=e.duration||Math.abs((n-(a&&\"time\"in a?a.time:i._time))/i.timeScale());h._dur!==t&&Ua(h,t,0,1).render(h._time,!0,!0),r=1}s&&s.apply(h,o||[])}},e));return u?h.render(0):h},e.tweenFromTo=function tweenFromTo(t,e,r){return this.tweenTo(e,ta({startAt:{time:Ot(this,t)}},r))},e.recent=function recent(){return this._recent},e.nextLabel=function nextLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t))},e.previousLabel=function previousLabel(t){return void 0===t&&(t=this._time),ub(this,Ot(this,t),1)},e.currentLabel=function currentLabel(t){return arguments.length?this.seek(t,!0):this.previousLabel(this._time+q)},e.shiftChildren=function shiftChildren(t,e,r){void 0===r&&(r=0);var i,n=this._first,a=this.labels;for(t=la(t);n;)n._start>=r&&(n._start+=t,n._end+=t),n=n._next;if(e)for(i in a)a[i]>=r&&(a[i]+=t);return Da(this)},e.invalidate=function invalidate(t){var e=this._first;for(this._lock=0;e;)e.invalidate(t),e=e._next;return i.prototype.invalidate.call(this,t)},e.clear=function clear(t){void 0===t&&(t=!0);for(var e,r=this._first;r;)e=r._next,this.remove(r),r=e;return this._dp&&(this._time=this._tTime=this._pTime=0),t&&(this.labels={}),Da(this)},e.totalDuration=function totalDuration(t){var e,r,i,n=0,a=this,s=a._last,o=X;if(arguments.length)return a.timeScale((a._repeat<0?a.duration():a.totalDuration())/(a.reversed()?-t:t));if(a._dirty){for(i=a.parent;s;)e=s._prev,s._dirty&&s.totalDuration(),o<(r=s._start)&&a._sort&&s._ts&&!a._lock?(a._lock=1,Na(a,s,r-s._delay,1)._lock=0):o=r,r<0&&s._ts&&(n-=r,(!i&&!a._dp||i&&i.smoothChildTiming)&&(a._start+=la(r/a._ts),a._time-=r,a._tTime-=r),a.shiftChildren(-r,!1,-Infinity),o=0),s._end>n&&s._ts&&(n=s._end),s=e;Ua(a,a===L&&a._time>n?a._time:n,1,1),a._dirty=0}return a._tDur},Timeline.updateRoot=function updateRoot(t){if(L._ts&&(qa(L,Ja(t,L)),f=It.frame),It.frame>=vt){vt+=N.autoSleep||120;var e=L._first;if((!e||!e._ts)&&N.autoSleep&&It._listeners.length<2){for(;e&&!e._ts;)e=e._next;e||It.sleep()}}},Timeline}(qt);ta(Zt.prototype,{_lock:0,_hasPause:0,_forcing:0});function dc(t,e,i,n,a,o){var u,h,l,f;if(mt[t]&&!1!==(u=new mt[t]).init(a,u.rawVars?e[t]:function _processVars(t,e,i,n,a){if(s(t)&&(t=Gt(t,a,e,i,n)),!v(t)||t.style&&t.nodeType||$(t)||K(t))return r(t)?Gt(t,a,e,i,n):t;var o,u={};for(o in t)u[o]=Gt(t[o],a,e,i,n);return u}(e[t],n,a,o,i),i,n,o)&&(i._pt=h=new we(i._pt,a,t,0,1,u.render,u,0,u.priority),i!==d))for(l=i._ptLookup[i._targets.indexOf(a)],f=u._props.length;f--;)l[u._props[f]]=h;return u}function jc(t,r,e,i){var n,a,s=r.ease||i||\"power1.inOut\";if($(r))a=e[t]||(e[t]=[]),r.forEach(function(t,e){return a.push({t:e/(r.length-1)*100,v:t,e:s})});else for(n in r)a=e[n]||(e[n]=[]),\"ease\"===n||a.push({t:parseFloat(t),v:r[n],e:s})}var Wt,Ht,Jt=function _addPropTween(t,e,i,n,a,o,u,h,l,f){s(n)&&(n=n(a||0,t,o));var d,c=t[e],p=\"get\"!==i?i:s(c)?l?t[e.indexOf(\"set\")||!s(t[\"get\"+e.substr(3)])?e:\"get\"+e.substr(3)](l):t[e]():c,_=s(c)?l?ue:re:ee;if(r(n)&&(~n.indexOf(\"random(\")&&(n=rb(n)),\"=\"===n.charAt(1)&&(!(d=ma(p,n)+(_a(p)||0))&&0!==d||(n=d))),!f||p!==n||Ht)return isNaN(p*n)||\"\"===n?(c||e in t||S(e,n),function _addComplexStringPropTween(t,e,r,i,n,a,s){var o,u,h,l,f,d,c,p,_=new we(this._pt,t,e,0,1,ge,null,n),m=0,g=0;for(_.b=r,_.e=i,r+=\"\",(c=~(i+=\"\").indexOf(\"random(\"))&&(i=rb(i)),a&&(a(p=[r,i],t,e),r=p[0],i=p[1]),u=r.match(at)||[];o=at.exec(i);)l=o[0],f=i.substring(m,o.index),h?h=(h+1)%5:\"rgba(\"===f.substr(-5)&&(h=1),l!==u[g++]&&(d=parseFloat(u[g-1])||0,_._pt={_next:_._pt,p:f||1===g?f:\",\",s:d,c:\"=\"===l.charAt(1)?ma(d,l)-d:parseFloat(l)-d,m:h&&h<4?Math.round:0},m=at.lastIndex);return _.c=m<i.length?i.substring(m,i.length):\"\",_.fp=s,(st.test(i)||c)&&(_.e=0),this._pt=_}.call(this,t,e,p,n,_,h||N.stringFilter,l)):(d=new we(this._pt,t,e,+p||0,n-(p||0),\"boolean\"==typeof c?_e:ce,0,_),l&&(d.fp=l),u&&d.modifier(u,this,t),this._pt=d)},Qt=function _initTween(t,e,r){var i,n,a,s,o,u,h,l,f,d,c,p,_,m=t.vars,g=m.ease,v=m.startAt,y=m.immediateRender,T=m.lazy,b=m.onUpdate,x=m.runBackwards,k=m.yoyoEase,O=m.keyframes,M=m.autoRevert,C=t._dur,P=t._startAt,A=t._targets,D=t.parent,S=D&&\"nested\"===D.data?D.vars.targets:A,z=\"auto\"===t._overwrite&&!F,E=t.timeline;if(!E||O&&g||(g=\"none\"),t._ease=Vt(g,j.ease),t._yEase=k?jt(Vt(!0===k?g:k,j.ease)):0,k&&t._yoyo&&!t._repeat&&(k=t._yEase,t._yEase=t._ease,t._ease=k),t._from=!E&&!!m.runBackwards,!E||O&&!m.stagger){if(p=(l=A[0]?ha(A[0]).harness:0)&&m[l.prop],i=xa(m,ct),P&&(P._zTime<0&&P.progress(1),e<0&&x&&y&&!M?P.render(-1,!0):P.revert(x&&C?ft:lt),P._lazy=0),v){if(Ca(t._startAt=te.set(A,ta({data:\"isStart\",overwrite:!1,parent:D,immediateRender:!0,lazy:!P&&w(T),startAt:null,delay:0,onUpdate:b&&function(){return Dt(t,\"onUpdate\")},stagger:0},v))),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I||!y&&!M)&&t._startAt.revert(ft),y&&C&&e<=0&&r<=0)return void(e&&(t._zTime=e))}else if(x&&C&&!P)if(e&&(y=!1),a=ta({overwrite:!1,data:\"isFromStart\",lazy:y&&!P&&w(T),immediateRender:y,stagger:0,parent:D},i),p&&(a[l.prop]=p),Ca(t._startAt=te.set(A,a)),t._startAt._dp=0,t._startAt._sat=t,e<0&&(I?t._startAt.revert(ft):t._startAt.render(-1,!0)),t._zTime=e,y){if(!e)return}else _initTween(t._startAt,q,q);for(t._pt=t._ptCache=0,T=C&&w(T)||T&&!C,n=0;n<A.length;n++){if(h=(o=A[n])._gsap||ga(A)[n]._gsap,t._ptLookup[n]=d={},_t[h.id]&&pt.length&&oa(),c=S===A?n:S.indexOf(o),l&&!1!==(f=new l).init(o,p||i,t,c,S)&&(t._pt=s=new we(t._pt,o,f.name,0,1,f.render,f,0,f.priority),f._props.forEach(function(t){d[t]=s}),f.priority&&(u=1)),!l||p)for(a in i)mt[a]&&(f=dc(a,i,t,c,o,S))?f.priority&&(u=1):d[a]=s=Jt.call(t,o,a,\"get\",i[a],c,S,0,m.stringFilter);t._op&&t._op[n]&&t.kill(o,t._op[n]),z&&t._pt&&(Wt=t,L.killTweensOf(o,d,t.globalTime(e)),_=!t.parent,Wt=0),t._pt&&T&&(_t[h.id]=1)}u&&be(t),t._onInit&&t._onInit(t)}t._onUpdate=b,t._initted=(!t._op||t._pt)&&!_,O&&e<=0&&E.render(X,!0,!0)},Gt=function _parseFuncOrString(t,e,i,n,a){return s(t)?t.call(e,i,n,a):r(t)&&~t.indexOf(\"random(\")?rb(t):t},Kt=Tt+\"repeat,repeatDelay,yoyo,repeatRefresh,yoyoEase,autoRevert\",$t={};ja(Kt+\",id,stagger,delay,duration,paused,scrollTrigger\",function(t){return $t[t]=1});var te=function(R){function Tween(e,r,i,n){var a;\"number\"==typeof r&&(i.duration=r,r=i,i=null);var s,o,u,h,l,f,d,c,p=(a=R.call(this,n?r:ya(r))||this).vars,_=p.duration,m=p.delay,g=p.immediateRender,b=p.stagger,x=p.overwrite,k=p.keyframes,O=p.defaults,M=p.scrollTrigger,C=p.yoyoEase,P=r.parent||L,A=($(e)||K(e)?t(e[0]):\"length\"in r)?[e]:Pt(e);if(a._targets=A.length?ga(A):T(\"GSAP target \"+e+\" not found. https://gsap.com\",!N.nullTargetWarn)||[],a._ptLookup=[],a._overwrite=x,k||b||y(_)||y(m)){if(r=a.vars,(s=a.timeline=new Zt({data:\"nested\",defaults:O||{},targets:P&&\"nested\"===P.data?P.vars.targets:A})).kill(),s.parent=s._dp=_assertThisInitialized(a),s._start=0,b||y(_)||y(m)){if(h=A.length,d=b&&hb(b),v(b))for(l in b)~Kt.indexOf(l)&&((c=c||{})[l]=b[l]);for(o=0;o<h;o++)(u=xa(r,$t)).stagger=0,C&&(u.yoyoEase=C),c&&bt(u,c),f=A[o],u.duration=+Gt(_,_assertThisInitialized(a),o,f,A),u.delay=(+Gt(m,_assertThisInitialized(a),o,f,A)||0)-a._delay,!b&&1===h&&u.delay&&(a._delay=m=u.delay,a._start+=m,u.delay=0),s.to(f,u,d?d(o,f,A):0),s._ease=Bt.none;s.duration()?_=m=0:a.timeline=0}else if(k){ya(ta(s.vars.defaults,{ease:\"none\"})),s._ease=Vt(k.ease||r.ease||\"none\");var D,S,z,E=0;if($(k))k.forEach(function(t){return s.to(A,t,\">\")}),s.duration();else{for(l in u={},k)\"ease\"===l||\"easeEach\"===l||jc(l,k[l],u,k.easeEach);for(l in u)for(D=u[l].sort(function(t,e){return t.t-e.t}),o=E=0;o<D.length;o++)(z={ease:(S=D[o]).e,duration:(S.t-(o?D[o-1].t:0))/100*_})[l]=S.v,s.to(A,z,E),E+=z.duration;s.duration()<_&&s.to({},{duration:_-s.duration()})}}_||a.duration(_=s.duration())}else a.timeline=0;return!0!==x||F||(Wt=_assertThisInitialized(a),L.killTweensOf(A),Wt=0),Na(P,_assertThisInitialized(a),i),r.reversed&&a.reverse(),r.paused&&a.paused(!0),(g||!_&&!k&&a._start===la(P._time)&&w(g)&&function _hasNoPausedAncestors(t){return!t||t._ts&&_hasNoPausedAncestors(t.parent)}(_assertThisInitialized(a))&&\"nested\"!==P.data)&&(a._tTime=-q,a.render(Math.max(0,-m)||0)),M&&Oa(_assertThisInitialized(a),M),a}_inheritsLoose(Tween,R);var e=Tween.prototype;return e.render=function render(t,e,r){var i,n,a,s,o,u,h,l,f,d=this._time,c=this._tDur,p=this._dur,_=t<0,m=c-q<t&&!_?c:t<q?0:t;if(p){if(m!==this._tTime||!t||r||!this._initted&&this._tTime||this._startAt&&this._zTime<0!=_||this._lazy){if(i=m,l=this.timeline,this._repeat){if(s=p+this._rDelay,this._repeat<-1&&_)return this.totalTime(100*s+t,e,r);if(i=la(m%s),m===c?(a=this._repeat,i=p):(a=~~(o=la(m/s)))&&a===o?(i=p,a--):p<i&&(i=p),(u=this._yoyo&&1&a)&&(f=this._yEase,i=p-i),o=wt(this._tTime,s),i===d&&!r&&this._initted&&a===o)return this._tTime=m,this;a!==o&&(l&&this._yEase&&Tb(l,u),this.vars.repeatRefresh&&!u&&!this._lock&&i!==s&&this._initted&&(this._lock=r=1,this.render(la(s*a),!0).invalidate()._lock=0))}if(!this._initted){if(Pa(this,_?t:i,r,e,m))return this._tTime=0,this;if(!(d===this._time||r&&this.vars.repeatRefresh&&a!==o))return this;if(p!==this._dur)return this.render(t,e,r)}if(this._tTime=m,this._time=i,!this._act&&this._ts&&(this._act=1,this._lazy=0),this.ratio=h=(f||this._ease)(i/p),this._from&&(this.ratio=h=1-h),!d&&m&&!e&&!o&&(Dt(this,\"onStart\"),this._tTime!==m))return this;for(n=this._pt;n;)n.r(h,n.d),n=n._next;l&&l.render(t<0?t:l._dur*l._ease(i/this._dur),e,r)||this._startAt&&(this._zTime=t),this._onUpdate&&!e&&(_&&Fa(this,t,0,r),Dt(this,\"onUpdate\")),this._repeat&&a!==o&&this.vars.onRepeat&&!e&&this.parent&&Dt(this,\"onRepeat\"),m!==this._tDur&&m||this._tTime!==m||(_&&!this._onUpdate&&Fa(this,t,0,!0),!t&&p||!(m===this._tDur&&0<this._ts||!m&&this._ts<0)||Ca(this,1),e||_&&!d||!(m||d||u)||(Dt(this,m===c?\"onComplete\":\"onReverseComplete\",!0),!this._prom||m<c&&0<this.timeScale()||this._prom()))}}else!function _renderZeroDurationTween(t,e,r,i){var n,a,s,o=t.ratio,u=e<0||!e&&(!t._start&&function _parentPlayheadIsBeforeStart(t){var e=t.parent;return e&&e._ts&&e._initted&&!e._lock&&(e.rawTime()<0||_parentPlayheadIsBeforeStart(e))}(t)&&(t._initted||!xt(t))||(t._ts<0||t._dp._ts<0)&&!xt(t))?0:1,h=t._rDelay,l=0;if(h&&t._repeat&&(l=Mt(0,t._tDur,e),a=wt(l,h),t._yoyo&&1&a&&(u=1-u),a!==wt(t._tTime,h)&&(o=1-u,t.vars.repeatRefresh&&t._initted&&t.invalidate())),u!==o||I||i||t._zTime===q||!e&&t._zTime){if(!t._initted&&Pa(t,e,i,r,l))return;for(s=t._zTime,t._zTime=e||(r?q:0),r=r||e&&!s,t.ratio=u,t._from&&(u=1-u),t._time=0,t._tTime=l,n=t._pt;n;)n.r(u,n.d),n=n._next;e<0&&Fa(t,e,0,!0),t._onUpdate&&!r&&Dt(t,\"onUpdate\"),l&&t._repeat&&!r&&t.parent&&Dt(t,\"onRepeat\"),(e>=t._tDur||e<0)&&t.ratio===u&&(u&&Ca(t,1),r||I||(Dt(t,u?\"onComplete\":\"onReverseComplete\",!0),t._prom&&t._prom()))}else t._zTime||(t._zTime=e)}(this,t,e,r);return this},e.targets=function targets(){return this._targets},e.invalidate=function invalidate(t){return t&&this.vars.runBackwards||(this._startAt=0),this._pt=this._op=this._onUpdate=this._lazy=this.ratio=0,this._ptLookup=[],this.timeline&&this.timeline.invalidate(t),R.prototype.invalidate.call(this,t)},e.resetTo=function resetTo(t,e,r,i,n){c||It.wake(),this._ts||this.play();var a,s=Math.min(this._dur,(this._dp._time-this._start)*this._ts);return this._initted||Qt(this,s),a=this._ease(s/this._dur),function _updatePropTweens(t,e,r,i,n,a,s,o){var u,h,l,f,d=(t._pt&&t._ptCache||(t._ptCache={}))[e];if(!d)for(d=t._ptCache[e]=[],l=t._ptLookup,f=t._targets.length;f--;){if((u=l[f][e])&&u.d&&u.d._pt)for(u=u.d._pt;u&&u.p!==e&&u.fp!==e;)u=u._next;if(!u)return Ht=1,t.vars[e]=\"+=0\",Qt(t,s),Ht=0,o?T(e+\" not eligible for reset\"):1;d.push(u)}for(f=d.length;f--;)(u=(h=d[f])._pt||h).s=!i&&0!==i||n?u.s+(i||0)+a*u.c:i,u.c=r-u.s,h.e&&(h.e=ka(r)+_a(h.e)),h.b&&(h.b=u.s+_a(h.b))}(this,t,e,r,i,a,s,n)?this.resetTo(t,e,r,i,1):(La(this,0),this.parent||Aa(this._dp,this,\"_first\",\"_last\",this._dp._sort?\"_start\":0),this.render(0))},e.kill=function kill(t,e){if(void 0===e&&(e=\"all\"),!(t||e&&\"all\"!==e))return this._lazy=this._pt=0,this.parent?wb(this):this.scrollTrigger&&this.scrollTrigger.kill(!!I),this;if(this.timeline){var i=this.timeline.totalDuration();return this.timeline.killTweensOf(t,e,Wt&&!0!==Wt.vars.overwrite)._first||wb(this),this.parent&&i!==this.timeline.totalDuration()&&Ua(this,this._dur*this.timeline._tDur/i,0,1),this}var n,a,s,o,u,h,l,f=this._targets,d=t?Pt(t):f,c=this._ptLookup,p=this._pt;if((!e||\"all\"===e)&&function _arraysMatch(t,e){for(var r=t.length,i=r===e.length;i&&r--&&t[r]===e[r];);return r<0}(f,d))return\"all\"===e&&(this._pt=0),wb(this);for(n=this._op=this._op||[],\"all\"!==e&&(r(e)&&(u={},ja(e,function(t){return u[t]=1}),e=u),e=function _addAliasesToVars(t,e){var r,i,n,a,s=t[0]?ha(t[0]).harness:0,o=s&&s.aliases;if(!o)return e;for(i in r=bt({},e),o)if(i in r)for(n=(a=o[i].split(\",\")).length;n--;)r[a[n]]=r[i];return r}(f,e)),l=f.length;l--;)if(~d.indexOf(f[l]))for(u in a=c[l],\"all\"===e?(n[l]=e,o=a,s={}):(s=n[l]=n[l]||{},o=e),o)(h=a&&a[u])&&(\"kill\"in h.d&&!0!==h.d.kill(u)||Ba(this,h,\"_pt\"),delete a[u]),\"all\"!==s&&(s[u]=1);return this._initted&&!this._pt&&p&&wb(this),this},Tween.to=function to(t,e,r){return new Tween(t,e,r)},Tween.from=function from(t,e){return Ya(1,arguments)},Tween.delayedCall=function delayedCall(t,e,r,i){return new Tween(e,0,{immediateRender:!1,lazy:!1,overwrite:!1,delay:t,onComplete:e,onReverseComplete:e,onCompleteParams:r,onReverseCompleteParams:r,callbackScope:i})},Tween.fromTo=function fromTo(t,e,r){return Ya(2,arguments)},Tween.set=function set(t,e){return e.duration=0,e.repeatDelay||(e.repeat=0),new Tween(t,e)},Tween.killTweensOf=function killTweensOf(t,e,r){return L.killTweensOf(t,e,r)},Tween}(qt);ta(te.prototype,{_targets:[],_lazy:0,_startAt:0,_op:0,_onInit:0}),ja(\"staggerTo,staggerFrom,staggerFromTo\",function(r){te[r]=function(){var t=new Zt,e=Ct.call(arguments,0);return e.splice(\"staggerFromTo\"===r?5:4,0,0),t[r].apply(t,e)}});function rc(t,e,r){return t.setAttribute(e,r)}function zc(t,e,r,i){i.mSet(t,e,i.m.call(i.tween,r,i.mt),i)}var ee=function _setterPlain(t,e,r){return t[e]=r},re=function _setterFunc(t,e,r){return t[e](r)},ue=function _setterFuncWithParam(t,e,r,i){return t[e](i.fp,r)},le=function _getSetter(t,e){return s(t[e])?re:u(t[e])&&t.setAttribute?rc:ee},ce=function _renderPlain(t,e){return e.set(e.t,e.p,Math.round(1e6*(e.s+e.c*t))/1e6,e)},_e=function _renderBoolean(t,e){return e.set(e.t,e.p,!!(e.s+e.c*t),e)},ge=function _renderComplexString(t,e){var r=e._pt,i=\"\";if(!t&&e.b)i=e.b;else if(1===t&&e.e)i=e.e;else{for(;r;)i=r.p+(r.m?r.m(r.s+r.c*t):Math.round(1e4*(r.s+r.c*t))/1e4)+i,r=r._next;i+=e.c}e.set(e.t,e.p,i,e)},ve=function _renderPropTweens(t,e){for(var r=e._pt;r;)r.r(t,r.d),r=r._next},ye=function _addPluginModifier(t,e,r,i){for(var n,a=this._pt;a;)n=a._next,a.p===i&&a.modifier(t,e,r),a=n},Te=function _killPropTweensOf(t){for(var e,r,i=this._pt;i;)r=i._next,i.p===t&&!i.op||i.op===t?Ba(this,i,\"_pt\"):i.dep||(e=1),i=r;return!e},be=function _sortPropTweensByPriority(t){for(var e,r,i,n,a=t._pt;a;){for(e=a._next,r=i;r&&r.pr>a.pr;)r=r._next;(a._prev=r?r._prev:n)?a._prev._next=a:i=a,(a._next=r)?r._prev=a:n=a,a=e}t._pt=i},we=(PropTween.prototype.modifier=function modifier(t,e,r){this.mSet=this.mSet||this.set,this.set=zc,this.m=t,this.mt=r,this.tween=e},PropTween);function PropTween(t,e,r,i,n,a,s,o,u){this.t=e,this.s=i,this.c=n,this.p=r,this.r=a||ce,this.d=s||this,this.set=o||ee,this.pr=u||0,(this._next=t)&&(t._prev=this)}ja(Tt+\"parent,duration,ease,delay,overwrite,runBackwards,startAt,yoyo,immediateRender,repeat,repeatDelay,data,paused,reversed,lazy,callbackScope,stringFilter,id,yoyoEase,stagger,inherit,repeatRefresh,keyframes,autoRevert,scrollTrigger\",function(t){return ct[t]=1}),ht.TweenMax=ht.TweenLite=te,ht.TimelineLite=ht.TimelineMax=Zt,L=new Zt({sortChildren:!1,defaults:j,autoRemoveChildren:!0,id:\"root\",smoothChildTiming:!0}),N.stringFilter=Ib;function Hc(t){return(Oe[t]||Me).map(function(t){return t()})}function Ic(){var t=Date.now(),o=[];2<t-Ce&&(Hc(\"matchMediaInit\"),ke.forEach(function(t){var e,r,i,n,a=t.queries,s=t.conditions;for(r in a)(e=h.matchMedia(a[r]).matches)&&(i=1),e!==s[r]&&(s[r]=e,n=1);n&&(t.revert(),i&&o.push(t))}),Hc(\"matchMediaRevert\"),o.forEach(function(e){return e.onMatch(e,function(t){return e.add(null,t)})}),Ce=t,Hc(\"matchMedia\"))}var xe,ke=[],Oe={},Me=[],Ce=0,Pe=0,De=((xe=Context.prototype).add=function add(t,i,n){function Jw(){var t,e=l,r=a.selector;return e&&e!==a&&e.data.push(a),n&&(a.selector=fb(n)),l=a,t=i.apply(a,arguments),s(t)&&a._r.push(t),l=e,a.selector=r,a.isReverted=!1,t}s(t)&&(n=i,i=t,t=s);var a=this;return a.last=Jw,t===s?Jw(a,function(t){return a.add(null,t)}):t?a[t]=Jw:Jw},xe.ignore=function ignore(t){var e=l;l=null,t(this),l=e},xe.getTweens=function getTweens(){var e=[];return this.data.forEach(function(t){return t instanceof Context?e.push.apply(e,t.getTweens()):t instanceof te&&!(t.parent&&\"nested\"===t.parent.data)&&e.push(t)}),e},xe.clear=function clear(){this._r.length=this.data.length=0},xe.kill=function kill(i,t){var n=this;if(i?function(){for(var t,e=n.getTweens(),r=n.data.length;r--;)\"isFlip\"===(t=n.data[r]).data&&(t.revert(),t.getChildren(!0,!0,!1).forEach(function(t){return e.splice(e.indexOf(t),1)}));for(e.map(function(t){return{g:t._dur||t._delay||t._sat&&!t._sat.vars.immediateRender?t.globalTime(0):-1/0,t:t}}).sort(function(t,e){return e.g-t.g||-1/0}).forEach(function(t){return t.t.revert(i)}),r=n.data.length;r--;)(t=n.data[r])instanceof Zt?\"nested\"!==t.data&&(t.scrollTrigger&&t.scrollTrigger.revert(),t.kill()):t instanceof te||!t.revert||t.revert(i);n._r.forEach(function(t){return t(i,n)}),n.isReverted=!0}():this.data.forEach(function(t){return t.kill&&t.kill()}),this.clear(),t)for(var e=ke.length;e--;)ke[e].id===this.id&&ke.splice(e,1)},xe.revert=function revert(t){this.kill(t||{})},Context);function Context(t,e){this.selector=e&&fb(e),this.data=[],this._r=[],this.isReverted=!1,this.id=Pe++,t&&this.add(t)}var Se,Ee=((Se=MatchMedia.prototype).add=function add(t,e,r){v(t)||(t={matches:t});var i,n,a,s=new De(0,r||this.scope),o=s.conditions={};for(n in l&&!s.selector&&(s.selector=l.selector),this.contexts.push(s),e=s.add(\"onMatch\",e),s.queries=t)\"all\"===n?a=1:(i=h.matchMedia(t[n]))&&(ke.indexOf(s)<0&&ke.push(s),(o[n]=i.matches)&&(a=1),i.addListener?i.addListener(Ic):i.addEventListener(\"change\",Ic));return a&&e(s,function(t){return s.add(null,t)}),this},Se.revert=function revert(t){this.kill(t||{})},Se.kill=function kill(e){this.contexts.forEach(function(t){return t.kill(e,!0)})},MatchMedia);function MatchMedia(t){this.contexts=[],this.scope=t,l&&l.data.push(this)}var Re={registerPlugin:function registerPlugin(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];e.forEach(function(t){return zb(t)})},timeline:function timeline(t){return new Zt(t)},getTweensOf:function getTweensOf(t,e){return L.getTweensOf(t,e)},getProperty:function getProperty(i,t,e,n){r(i)&&(i=Pt(i)[0]);var a=ha(i||{}).get,s=e?sa:ra;return\"native\"===e&&(e=\"\"),i?t?s((mt[t]&&mt[t].get||a)(i,t,e,n)):function(t,e,r){return s((mt[t]&&mt[t].get||a)(i,t,e,r))}:i},quickSetter:function quickSetter(r,e,i){if(1<(r=Pt(r)).length){var n=r.map(function(t){return Fe.quickSetter(t,e,i)}),a=n.length;return function(t){for(var e=a;e--;)n[e](t)}}r=r[0]||{};var s=mt[e],o=ha(r),u=o.harness&&(o.harness.aliases||{})[e]||e,h=s?function(t){var e=new s;d._pt=0,e.init(r,i?t+i:t,d,0,[r]),e.render(1,e),d._pt&&ve(1,d)}:o.set(r,u);return s?h:function(t){return h(r,u,i?t+i:t,o,1)}},quickTo:function quickTo(t,i,e){function by(t,e,r){return n.resetTo(i,t,e,r)}var r,n=Fe.to(t,ta(((r={})[i]=\"+=0.1\",r.paused=!0,r.stagger=0,r),e||{}));return by.tween=n,by},isTweening:function isTweening(t){return 0<L.getTweensOf(t,!0).length},defaults:function defaults(t){return t&&t.ease&&(t.ease=Vt(t.ease,j.ease)),wa(j,t||{})},config:function config(t){return wa(N,t||{})},registerEffect:function registerEffect(t){var i=t.name,n=t.effect,e=t.plugins,a=t.defaults,r=t.extendTimeline;(e||\"\").split(\",\").forEach(function(t){return t&&!mt[t]&&!ht[t]&&T(i+\" effect requires \"+t+\" plugin.\")}),gt[i]=function(t,e,r){return n(Pt(t),ta(e||{},a),r)},r&&(Zt.prototype[i]=function(t,e,r){return this.add(gt[i](t,v(e)?e:(r=e)&&{},this),r)})},registerEase:function registerEase(t,e){Bt[t]=Vt(e)},parseEase:function parseEase(t,e){return arguments.length?Vt(t,e):Bt},getById:function getById(t){return L.getById(t)},exportRoot:function exportRoot(t,e){void 0===t&&(t={});var r,i,n=new Zt(t);for(n.smoothChildTiming=w(t.smoothChildTiming),L.remove(n),n._dp=0,n._time=n._tTime=L._time,r=L._first;r;)i=r._next,!e&&!r._dur&&r instanceof te&&r.vars.onComplete===r._targets[0]||Na(n,r,r._start-r._delay),r=i;return Na(L,n,0),n},context:function context(t,e){return t?new De(t,e):l},matchMedia:function matchMedia(t){return new Ee(t)},matchMediaRefresh:function matchMediaRefresh(){return ke.forEach(function(t){var e,r,i=t.conditions;for(r in i)i[r]&&(i[r]=!1,e=1);e&&t.revert()})||Ic()},addEventListener:function addEventListener(t,e){var r=Oe[t]||(Oe[t]=[]);~r.indexOf(e)||r.push(e)},removeEventListener:function removeEventListener(t,e){var r=Oe[t],i=r&&r.indexOf(e);0<=i&&r.splice(i,1)},utils:{wrap:function wrap(e,t,r){var i=t-e;return $(e)?ob(e,wrap(0,e.length),t):Za(r,function(t){return(i+(t-e)%i)%i+e})},wrapYoyo:function wrapYoyo(e,t,r){var i=t-e,n=2*i;return $(e)?ob(e,wrapYoyo(0,e.length-1),t):Za(r,function(t){return e+(i<(t=(n+(t-e)%n)%n||0)?n-t:t)})},distribute:hb,random:kb,snap:jb,normalize:function normalize(t,e,r){return At(t,e,0,1,r)},getUnit:_a,clamp:function clamp(e,r,t){return Za(t,function(t){return Mt(e,r,t)})},splitColor:Db,toArray:Pt,selector:fb,mapRange:At,pipe:function pipe(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];return function(t){return e.reduce(function(t,e){return e(t)},t)}},unitize:function unitize(e,r){return function(t){return e(parseFloat(t))+(r||_a(t))}},interpolate:function interpolate(e,i,t,n){var a=isNaN(e+i)?0:function(t){return(1-t)*e+t*i};if(!a){var s,o,u,h,l,f=r(e),d={};if(!0===t&&(n=1)&&(t=null),f)e={p:e},i={p:i};else if($(e)&&!$(i)){for(u=[],h=e.length,l=h-2,o=1;o<h;o++)u.push(interpolate(e[o-1],e[o]));h--,a=function func(t){t*=h;var e=Math.min(l,~~t);return u[e](t-e)},t=i}else n||(e=bt($(e)?[]:{},e));if(!u){for(s in i)Jt.call(d,e,s,\"get\",i[s]);a=function func(t){return ve(t,d)||(f?e.p:e)}}}return Za(t,a)},shuffle:gb},install:R,effects:gt,ticker:It,updateRoot:Zt.updateRoot,plugins:mt,globalTimeline:L,core:{PropTween:we,globals:U,Tween:te,Timeline:Zt,Animation:qt,getCache:ha,_removeLinkedListItem:Ba,reverting:function reverting(){return I},context:function context(t){return t&&l&&(l.data.push(t),t._ctx=l),l},suppressOverwrites:function suppressOverwrites(t){return F=t}}};ja(\"to,from,fromTo,delayedCall,set,killTweensOf\",function(t){return Re[t]=te[t]}),It.add(Zt.updateRoot),d=Re.to({},{duration:0});function Mc(t,e){for(var r=t._pt;r&&r.p!==e&&r.op!==e&&r.fp!==e;)r=r._next;return r}function Oc(t,a){return{name:t,headless:1,rawVars:1,init:function init(t,n,e){e._onInit=function(t){var e,i;if(r(n)&&(e={},ja(n,function(t){return e[t]=1}),n=e),a){for(i in e={},n)e[i]=a(n[i]);n=e}!function _addModifiers(t,e){var r,i,n,a=t._targets;for(r in e)for(i=a.length;i--;)(n=(n=t._ptLookup[i][r])&&n.d)&&(n._pt&&(n=Mc(n,r)),n&&n.modifier&&n.modifier(e[r],t,a[i],r))}(t,n)}}}}var Fe=Re.registerPlugin({name:\"attr\",init:function init(t,e,r,i,n){var a,s,o;for(a in this.tween=r,e)o=t.getAttribute(a)||\"\",(s=this.add(t,\"setAttribute\",(o||0)+\"\",e[a],i,n,0,0,a)).op=a,s.b=o,this._props.push(a)},render:function render(t,e){for(var r=e._pt;r;)I?r.set(r.t,r.p,r.b,r):r.r(t,r.d),r=r._next}},{name:\"endArray\",headless:1,init:function init(t,e){for(var r=e.length;r--;)this.add(t,r,t[r]||0,e[r],0,0,0,0,0,1)}},Oc(\"roundProps\",ib),Oc(\"modifiers\"),Oc(\"snap\",jb))||Re;te.version=Zt.version=Fe.version=\"3.14.2\",o=1,x()&&Lt();function yd(t,e){return e.set(e.t,e.p,Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function zd(t,e){return e.set(e.t,e.p,1===t?e.e:Math.round(1e4*(e.s+e.c*t))/1e4+e.u,e)}function Ad(t,e){return e.set(e.t,e.p,t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Bd(t,e){return e.set(e.t,e.p,1===t?e.e:t?Math.round(1e4*(e.s+e.c*t))/1e4+e.u:e.b,e)}function Cd(t,e){var r=e.s+e.c*t;e.set(e.t,e.p,~~(r+(r<0?-.5:.5))+e.u,e)}function Dd(t,e){return e.set(e.t,e.p,t?e.e:e.b,e)}function Ed(t,e){return e.set(e.t,e.p,1!==t?e.b:e.e,e)}function Fd(t,e,r){return t.style[e]=r}function Gd(t,e,r){return t.style.setProperty(e,r)}function Hd(t,e,r){return t._gsap[e]=r}function Id(t,e,r){return t._gsap.scaleX=t._gsap.scaleY=r}function Jd(t,e,r,i,n){var a=t._gsap;a.scaleX=a.scaleY=r,a.renderTransform(n,a)}function Kd(t,e,r,i,n){var a=t._gsap;a[e]=r,a.renderTransform(n,a)}function Nd(t,e){var r=this,i=this.target,n=i.style,a=i._gsap;if(t in hr&&n){if(this.tfm=this.tfm||{},\"transform\"===t)return mr.transform.split(\",\").forEach(function(t){return Nd.call(r,t,e)});if(~(t=mr[t]||t).indexOf(\",\")?t.split(\",\").forEach(function(t){return r.tfm[t]=xr(i,t)}):this.tfm[t]=a.x?a[t]:xr(i,t),t===vr&&(this.tfm.zOrigin=a.zOrigin),0<=this.props.indexOf(gr))return;a.svg&&(this.svgo=i.getAttribute(\"data-svg-origin\"),this.props.push(vr,e,\"\")),t=gr}(n||e)&&this.props.push(t,e,n[t])}function Od(t){t.translate&&(t.removeProperty(\"translate\"),t.removeProperty(\"scale\"),t.removeProperty(\"rotate\"))}function Pd(){var t,e,r=this.props,i=this.target,n=i.style,a=i._gsap;for(t=0;t<r.length;t+=3)r[t+1]?2===r[t+1]?i[r[t]](r[t+2]):i[r[t]]=r[t+2]:r[t+2]?n[r[t]]=r[t+2]:n.removeProperty(\"--\"===r[t].substr(0,2)?r[t]:r[t].replace(cr,\"-$1\").toLowerCase());if(this.tfm){for(e in this.tfm)a[e]=this.tfm[e];a.svg&&(a.renderTransform(),i.setAttribute(\"data-svg-origin\",this.svgo||\"\")),(t=Ue())&&t.isStart||n[gr]||(Od(n),a.zOrigin&&n[vr]&&(n[vr]+=\" \"+a.zOrigin+\"px\",a.zOrigin=0,a.renderTransform()),a.uncache=1)}}function Qd(t,e){var r={target:t,props:[],revert:Pd,save:Nd};return t._gsap||Fe.core.getCache(t),e&&t.style&&t.nodeType&&e.split(\",\").forEach(function(t){return r.save(t)}),r}function Sd(t,e){var r=Le.createElementNS?Le.createElementNS((e||\"http://www.w3.org/1999/xhtml\").replace(/^https/,\"http\"),t):Le.createElement(t);return r&&r.style?r:Le.createElement(t)}function Td(t,e,r){var i=getComputedStyle(t);return i[e]||i.getPropertyValue(e.replace(cr,\"-$1\").toLowerCase())||i.getPropertyValue(e)||!r&&Td(t,Tr(e)||e,1)||\"\"}function Wd(){(function _windowExists(){return\"undefined\"!=typeof window})()&&window.document&&(Ie=window,Le=Ie.document,Ye=Le.documentElement,je=Sd(\"div\")||{style:{}},Sd(\"div\"),gr=Tr(gr),vr=gr+\"Origin\",je.style.cssText=\"border-width:0;line-height:0;position:absolute;padding:0\",Xe=!!Tr(\"perspective\"),Ue=Fe.core.reverting,Ne=1)}function Xd(t){var e,r=t.ownerSVGElement,i=Sd(\"svg\",r&&r.getAttribute(\"xmlns\")||\"http://www.w3.org/2000/svg\"),n=t.cloneNode(!0);n.style.display=\"block\",i.appendChild(n),Ye.appendChild(i);try{e=n.getBBox()}catch(t){}return i.removeChild(n),Ye.removeChild(i),e}function Yd(t,e){for(var r=e.length;r--;)if(t.hasAttribute(e[r]))return t.getAttribute(e[r])}function Zd(e){var r,i;try{r=e.getBBox()}catch(t){r=Xd(e),i=1}return r&&(r.width||r.height)||i||(r=Xd(e)),!r||r.width||r.x||r.y?r:{x:+Yd(e,[\"x\",\"cx\",\"x1\"])||0,y:+Yd(e,[\"y\",\"cy\",\"y1\"])||0,width:0,height:0}}function $d(t){return!(!t.getCTM||t.parentNode&&!t.ownerSVGElement||!Zd(t))}function _d(t,e){if(e){var r,i=t.style;e in hr&&e!==vr&&(e=gr),i.removeProperty?(\"ms\"!==(r=e.substr(0,2))&&\"webkit\"!==e.substr(0,6)||(e=\"-\"+e),i.removeProperty(\"--\"===r?e:e.replace(cr,\"-$1\").toLowerCase())):i.removeAttribute(e)}}function ae(t,e,r,i,n,a){var s=new we(t._pt,e,r,0,1,a?Ed:Dd);return(t._pt=s).b=i,s.e=n,t._props.push(r),s}function de(t,e,r,i){var n,a,s,o,u=parseFloat(r)||0,h=(r+\"\").trim().substr((u+\"\").length)||\"px\",l=je.style,f=pr.test(e),d=\"svg\"===t.tagName.toLowerCase(),c=(d?\"client\":\"offset\")+(f?\"Width\":\"Height\"),p=\"px\"===i,_=\"%\"===i;if(i===h||!u||br[i]||br[h])return u;if(\"px\"===h||p||(u=de(t,e,r,\"px\")),o=t.getCTM&&$d(t),(_||\"%\"===h)&&(hr[e]||~e.indexOf(\"adius\")))return n=o?t.getBBox()[f?\"width\":\"height\"]:t[c],ka(_?u/n*100:u/100*n);if(l[f?\"width\":\"height\"]=100+(p?h:i),a=\"rem\"!==i&&~e.indexOf(\"adius\")||\"em\"===i&&t.appendChild&&!d?t:t.parentNode,o&&(a=(t.ownerSVGElement||{}).parentNode),a&&a!==Le&&a.appendChild||(a=Le.body),(s=a._gsap)&&_&&s.width&&f&&s.time===It.time&&!s.uncache)return ka(u/s.width*100);if(!_||\"height\"!==e&&\"width\"!==e)!_&&\"%\"!==h||wr[Td(a,\"display\")]||(l.position=Td(t,\"position\")),a===t&&(l.position=\"static\"),a.appendChild(je),n=je[c],a.removeChild(je),l.position=\"absolute\";else{var m=t.style[e];t.style[e]=100+i,n=t[c],m?t.style[e]=m:_d(t,e)}return f&&_&&((s=ha(a)).time=It.time,s.width=a[c]),ka(p?n*u/100:n&&u?100/n*u:0)}function fe(t,e,r,i){if(!r||\"none\"===r){var n=Tr(e,t,1),a=n&&Td(t,n,1);a&&a!==r?(e=n,r=a):\"borderColor\"===e&&(r=Td(t,\"borderTopColor\"))}var s,o,u,h,l,f,d,c,p,_,m,g=new we(this._pt,t.style,e,0,1,ge),v=0,y=0;if(g.b=r,g.e=i,r+=\"\",\"var(--\"===(i+=\"\").substring(0,6)&&(i=Td(t,i.substring(4,i.indexOf(\")\")))),\"auto\"===i&&(f=t.style[e],t.style[e]=i,i=Td(t,e)||i,f?t.style[e]=f:_d(t,e)),Ib(s=[r,i]),i=s[1],u=(r=s[0]).match(nt)||[],(i.match(nt)||[]).length){for(;o=nt.exec(i);)d=o[0],p=i.substring(v,o.index),l?l=(l+1)%5:\"rgba(\"!==p.substr(-5)&&\"hsla(\"!==p.substr(-5)||(l=1),d!==(f=u[y++]||\"\")&&(h=parseFloat(f)||0,m=f.substr((h+\"\").length),\"=\"===d.charAt(1)&&(d=ma(h,d)+m),c=parseFloat(d),_=d.substr((c+\"\").length),v=nt.lastIndex-_.length,_||(_=_||N.units[e]||m,v===i.length&&(i+=_,g.e+=_)),m!==_&&(h=de(t,e,f,_)||0),g._pt={_next:g._pt,p:p||1===y?p:\",\",s:h,c:c-h,m:l&&l<4||\"zIndex\"===e?Math.round:0});g.c=v<i.length?i.substring(v,i.length):\"\"}else g.r=\"display\"===e&&\"none\"===i?Ed:Dd;return st.test(i)&&(g.e=0),this._pt=g}function he(t){var e=t.split(\" \"),r=e[0],i=e[1]||\"50%\";return\"top\"!==r&&\"bottom\"!==r&&\"left\"!==i&&\"right\"!==i||(t=r,r=i,i=t),e[0]=kr[r]||r,e[1]=kr[i]||i,e.join(\" \")}function ie(t,e){if(e.tween&&e.tween._time===e.tween._dur){var r,i,n,a=e.t,s=a.style,o=e.u,u=a._gsap;if(\"all\"===o||!0===o)s.cssText=\"\",i=1;else for(n=(o=o.split(\",\")).length;-1<--n;)r=o[n],hr[r]&&(i=1,r=\"transformOrigin\"===r?vr:gr),_d(a,r);i&&(_d(a,gr),u&&(u.svg&&a.removeAttribute(\"transform\"),s.scale=s.rotate=s.translate=\"none\",Pr(a,1),u.uncache=1,Od(s)))}}function me(t){return\"matrix(1, 0, 0, 1, 0, 0)\"===t||\"none\"===t||!t}function ne(t){var e=Td(t,gr);return me(e)?Mr:e.substr(7).match(it).map(ka)}function oe(t,e){var r,i,n,a,s=t._gsap||ha(t),o=t.style,u=ne(t);return s.svg&&t.getAttribute(\"transform\")?\"1,0,0,1,0,0\"===(u=[(n=t.transform.baseVal.consolidate().matrix).a,n.b,n.c,n.d,n.e,n.f]).join(\",\")?Mr:u:(u!==Mr||t.offsetParent||t===Ye||s.svg||(n=o.display,o.display=\"block\",(r=t.parentNode)&&(t.offsetParent||t.getBoundingClientRect().width)||(a=1,i=t.nextElementSibling,Ye.appendChild(t)),u=ne(t),n?o.display=n:_d(t,\"display\"),a&&(i?r.insertBefore(t,i):r?r.appendChild(t):Ye.removeChild(t))),e&&6<u.length?[u[0],u[1],u[4],u[5],u[12],u[13]]:u)}function pe(t,e,r,i,n,a){var s,o,u,h=t._gsap,l=n||oe(t,!0),f=h.xOrigin||0,d=h.yOrigin||0,c=h.xOffset||0,p=h.yOffset||0,_=l[0],m=l[1],g=l[2],v=l[3],y=l[4],T=l[5],b=e.split(\" \"),w=parseFloat(b[0])||0,x=parseFloat(b[1])||0;r?l!==Mr&&(o=_*v-m*g)&&(u=w*(-m/o)+x*(_/o)-(_*T-m*y)/o,w=w*(v/o)+x*(-g/o)+(g*T-v*y)/o,x=u):(w=(s=Zd(t)).x+(~b[0].indexOf(\"%\")?w/100*s.width:w),x=s.y+(~(b[1]||b[0]).indexOf(\"%\")?x/100*s.height:x)),i||!1!==i&&h.smooth?(y=w-f,T=x-d,h.xOffset=c+(y*_+T*g)-y,h.yOffset=p+(y*m+T*v)-T):h.xOffset=h.yOffset=0,h.xOrigin=w,h.yOrigin=x,h.smooth=!!i,h.origin=e,h.originIsAbsolute=!!r,t.style[vr]=\"0px 0px\",a&&(ae(a,h,\"xOrigin\",f,w),ae(a,h,\"yOrigin\",d,x),ae(a,h,\"xOffset\",c,h.xOffset),ae(a,h,\"yOffset\",p,h.yOffset)),t.setAttribute(\"data-svg-origin\",w+\" \"+x)}function se(t,e,r){var i=_a(e);return ka(parseFloat(e)+parseFloat(de(t,\"x\",r+\"px\",i)))+i}function ze(t,e,i,n,a){var s,o,u=360,h=r(a),l=parseFloat(a)*(h&&~a.indexOf(\"rad\")?lr:1)-n,f=n+l+\"deg\";return h&&(\"short\"===(s=a.split(\"_\")[1])&&(l%=u)!==l%180&&(l+=l<0?u:-u),\"cw\"===s&&l<0?l=(l+36e9)%u-~~(l/u)*u:\"ccw\"===s&&0<l&&(l=(l-36e9)%u-~~(l/u)*u)),t._pt=o=new we(t._pt,e,i,n,l,zd),o.e=f,o.u=\"deg\",t._props.push(i),o}function Ae(t,e){for(var r in e)t[r]=e[r];return t}function Be(t,e,r){var i,n,a,s,o,u,h,l=Ae({},r._gsap),f=r.style;for(n in l.svg?(a=r.getAttribute(\"transform\"),r.setAttribute(\"transform\",\"\"),f[gr]=e,i=Pr(r,1),_d(r,gr),r.setAttribute(\"transform\",a)):(a=getComputedStyle(r)[gr],f[gr]=e,i=Pr(r,1),f[gr]=a),hr)(a=l[n])!==(s=i[n])&&\"perspective,force3D,transformOrigin,svgOrigin\".indexOf(n)<0&&(o=_a(a)!==(h=_a(s))?de(r,n,a,h):parseFloat(a),u=parseFloat(s),t._pt=new we(t._pt,i,n,o,u-o,yd),t._pt.u=h||0,t._props.push(n));Ae(i,l)}var Ie,Le,Ye,Ne,je,Ve,Ue,Xe,qe=Bt.Power0,Ze=Bt.Power1,We=Bt.Power2,He=Bt.Power3,Je=Bt.Power4,Qe=Bt.Linear,Ge=Bt.Quad,Ke=Bt.Cubic,$e=Bt.Quart,tr=Bt.Quint,er=Bt.Strong,rr=Bt.Elastic,ir=Bt.Back,nr=Bt.SteppedEase,ar=Bt.Bounce,sr=Bt.Sine,or=Bt.Expo,ur=Bt.Circ,hr={},lr=180/Math.PI,fr=Math.PI/180,dr=Math.atan2,cr=/([A-Z])/g,pr=/(left|right|width|margin|padding|x)/i,_r=/[\\s,\\(]\\S/,mr={autoAlpha:\"opacity,visibility\",scale:\"scaleX,scaleY\",alpha:\"opacity\"},gr=\"transform\",vr=gr+\"Origin\",yr=\"O,Moz,ms,Ms,Webkit\".split(\",\"),Tr=function _checkPropPrefix(t,e,r){var i=(e||je).style,n=5;if(t in i&&!r)return t;for(t=t.charAt(0).toUpperCase()+t.substr(1);n--&&!(yr[n]+t in i););return n<0?null:(3===n?\"ms\":0<=n?yr[n]:\"\")+t},br={deg:1,rad:1,turn:1},wr={grid:1,flex:1},xr=function _get(t,e,r,i){var n;return Ne||Wd(),e in mr&&\"transform\"!==e&&~(e=mr[e]).indexOf(\",\")&&(e=e.split(\",\")[0]),hr[e]&&\"transform\"!==e?(n=Pr(t,i),n=\"transformOrigin\"!==e?n[e]:n.svg?n.origin:Ar(Td(t,vr))+\" \"+n.zOrigin+\"px\"):(n=t.style[e])&&\"auto\"!==n&&!i&&!~(n+\"\").indexOf(\"calc(\")||(n=Or[e]&&Or[e](t,e,r)||Td(t,e)||ia(t,e)||(\"opacity\"===e?1:0)),r&&!~(n+\"\").trim().indexOf(\" \")?de(t,e,n,r)+r:n},kr={top:\"0%\",bottom:\"100%\",left:\"0%\",right:\"100%\",center:\"50%\"},Or={clearProps:function clearProps(t,e,r,i,n){if(\"isFromStart\"!==n.data){var a=t._pt=new we(t._pt,e,r,0,0,ie);return a.u=i,a.pr=-10,a.tween=n,t._props.push(r),1}}},Mr=[1,0,0,1,0,0],Cr={},Pr=function _parseTransform(t,e){var r=t._gsap||new Xt(t);if(\"x\"in r&&!e&&!r.uncache)return r;var i,n,a,s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x,k,O,M,C,P,A,D,S,z,E,R,F=t.style,I=r.scaleX<0,L=\"deg\",B=getComputedStyle(t),Y=Td(t,vr)||\"0\";return i=n=a=u=h=l=f=d=c=0,s=o=1,r.svg=!(!t.getCTM||!$d(t)),B.translate&&(\"none\"===B.translate&&\"none\"===B.scale&&\"none\"===B.rotate||(F[gr]=(\"none\"!==B.translate?\"translate3d(\"+(B.translate+\" 0 0\").split(\" \").slice(0,3).join(\", \")+\") \":\"\")+(\"none\"!==B.rotate?\"rotate(\"+B.rotate+\") \":\"\")+(\"none\"!==B.scale?\"scale(\"+B.scale.split(\" \").join(\",\")+\") \":\"\")+(\"none\"!==B[gr]?B[gr]:\"\")),F.scale=F.rotate=F.translate=\"none\"),m=oe(t,r.svg),r.svg&&(M=r.uncache?(C=t.getBBox(),Y=r.xOrigin-C.x+\"px \"+(r.yOrigin-C.y)+\"px\",\"\"):!e&&t.getAttribute(\"data-svg-origin\"),pe(t,M||Y,!!M||r.originIsAbsolute,!1!==r.smooth,m)),p=r.xOrigin||0,_=r.yOrigin||0,m!==Mr&&(T=m[0],b=m[1],w=m[2],x=m[3],i=k=m[4],n=O=m[5],6===m.length?(s=Math.sqrt(T*T+b*b),o=Math.sqrt(x*x+w*w),u=T||b?dr(b,T)*lr:0,(f=w||x?dr(w,x)*lr+u:0)&&(o*=Math.abs(Math.cos(f*fr))),r.svg&&(i-=p-(p*T+_*w),n-=_-(p*b+_*x))):(R=m[6],z=m[7],A=m[8],D=m[9],S=m[10],E=m[11],i=m[12],n=m[13],a=m[14],h=(g=dr(R,S))*lr,g&&(M=k*(v=Math.cos(-g))+A*(y=Math.sin(-g)),C=O*v+D*y,P=R*v+S*y,A=k*-y+A*v,D=O*-y+D*v,S=R*-y+S*v,E=z*-y+E*v,k=M,O=C,R=P),l=(g=dr(-w,S))*lr,g&&(v=Math.cos(-g),E=x*(y=Math.sin(-g))+E*v,T=M=T*v-A*y,b=C=b*v-D*y,w=P=w*v-S*y),u=(g=dr(b,T))*lr,g&&(M=T*(v=Math.cos(g))+b*(y=Math.sin(g)),C=k*v+O*y,b=b*v-T*y,O=O*v-k*y,T=M,k=C),h&&359.9<Math.abs(h)+Math.abs(u)&&(h=u=0,l=180-l),s=ka(Math.sqrt(T*T+b*b+w*w)),o=ka(Math.sqrt(O*O+R*R)),g=dr(k,O),f=2e-4<Math.abs(g)?g*lr:0,c=E?1/(E<0?-E:E):0),r.svg&&(M=t.getAttribute(\"transform\"),r.forceCSS=t.setAttribute(\"transform\",\"\")||!me(Td(t,gr)),M&&t.setAttribute(\"transform\",M))),90<Math.abs(f)&&Math.abs(f)<270&&(I?(s*=-1,f+=u<=0?180:-180,u+=u<=0?180:-180):(o*=-1,f+=f<=0?180:-180)),e=e||r.uncache,r.x=i-((r.xPercent=i&&(!e&&r.xPercent||(Math.round(t.offsetWidth/2)===Math.round(-i)?-50:0)))?t.offsetWidth*r.xPercent/100:0)+\"px\",r.y=n-((r.yPercent=n&&(!e&&r.yPercent||(Math.round(t.offsetHeight/2)===Math.round(-n)?-50:0)))?t.offsetHeight*r.yPercent/100:0)+\"px\",r.z=a+\"px\",r.scaleX=ka(s),r.scaleY=ka(o),r.rotation=ka(u)+L,r.rotationX=ka(h)+L,r.rotationY=ka(l)+L,r.skewX=f+L,r.skewY=d+L,r.transformPerspective=c+\"px\",(r.zOrigin=parseFloat(Y.split(\" \")[2])||!e&&r.zOrigin||0)&&(F[vr]=Ar(Y)),r.xOffset=r.yOffset=0,r.force3D=N.force3D,r.renderTransform=r.svg?Fr:Xe?Rr:Dr,r.uncache=0,r},Ar=function _firstTwoOnly(t){return(t=t.split(\" \"))[0]+\" \"+t[1]},Dr=function _renderNon3DTransforms(t,e){e.z=\"0px\",e.rotationY=e.rotationX=\"0deg\",e.force3D=0,Rr(t,e)},Sr=\"0deg\",zr=\"0px\",Er=\") \",Rr=function _renderCSSTransforms(t,e){var r=e||this,i=r.xPercent,n=r.yPercent,a=r.x,s=r.y,o=r.z,u=r.rotation,h=r.rotationY,l=r.rotationX,f=r.skewX,d=r.skewY,c=r.scaleX,p=r.scaleY,_=r.transformPerspective,m=r.force3D,g=r.target,v=r.zOrigin,y=\"\",T=\"auto\"===m&&t&&1!==t||!0===m;if(v&&(l!==Sr||h!==Sr)){var b,w=parseFloat(h)*fr,x=Math.sin(w),k=Math.cos(w);w=parseFloat(l)*fr,b=Math.cos(w),a=se(g,a,x*b*-v),s=se(g,s,-Math.sin(w)*-v),o=se(g,o,k*b*-v+v)}_!==zr&&(y+=\"perspective(\"+_+Er),(i||n)&&(y+=\"translate(\"+i+\"%, \"+n+\"%) \"),!T&&a===zr&&s===zr&&o===zr||(y+=o!==zr||T?\"translate3d(\"+a+\", \"+s+\", \"+o+\") \":\"translate(\"+a+\", \"+s+Er),u!==Sr&&(y+=\"rotate(\"+u+Er),h!==Sr&&(y+=\"rotateY(\"+h+Er),l!==Sr&&(y+=\"rotateX(\"+l+Er),f===Sr&&d===Sr||(y+=\"skew(\"+f+\", \"+d+Er),1===c&&1===p||(y+=\"scale(\"+c+\", \"+p+Er),g.style[gr]=y||\"translate(0, 0)\"},Fr=function _renderSVGTransforms(t,e){var r,i,n,a,s,o=e||this,u=o.xPercent,h=o.yPercent,l=o.x,f=o.y,d=o.rotation,c=o.skewX,p=o.skewY,_=o.scaleX,m=o.scaleY,g=o.target,v=o.xOrigin,y=o.yOrigin,T=o.xOffset,b=o.yOffset,w=o.forceCSS,x=parseFloat(l),k=parseFloat(f);d=parseFloat(d),c=parseFloat(c),(p=parseFloat(p))&&(c+=p=parseFloat(p),d+=p),d||c?(d*=fr,c*=fr,r=Math.cos(d)*_,i=Math.sin(d)*_,n=Math.sin(d-c)*-m,a=Math.cos(d-c)*m,c&&(p*=fr,s=Math.tan(c-p),n*=s=Math.sqrt(1+s*s),a*=s,p&&(s=Math.tan(p),r*=s=Math.sqrt(1+s*s),i*=s)),r=ka(r),i=ka(i),n=ka(n),a=ka(a)):(r=_,a=m,i=n=0),(x&&!~(l+\"\").indexOf(\"px\")||k&&!~(f+\"\").indexOf(\"px\"))&&(x=de(g,\"x\",l,\"px\"),k=de(g,\"y\",f,\"px\")),(v||y||T||b)&&(x=ka(x+v-(v*r+y*n)+T),k=ka(k+y-(v*i+y*a)+b)),(u||h)&&(s=g.getBBox(),x=ka(x+u/100*s.width),k=ka(k+h/100*s.height)),s=\"matrix(\"+r+\",\"+i+\",\"+n+\",\"+a+\",\"+x+\",\"+k+\")\",g.setAttribute(\"transform\",s),w&&(g.style[gr]=s)};ja(\"padding,margin,Width,Radius\",function(e,r){var t=\"Right\",i=\"Bottom\",n=\"Left\",o=(r<3?[\"Top\",t,i,n]:[\"Top\"+n,\"Top\"+t,i+t,i+n]).map(function(t){return r<2?e+t:\"border\"+t+e});Or[1<r?\"border\"+e:e]=function(e,t,r,i,n){var a,s;if(arguments.length<4)return a=o.map(function(t){return xr(e,t,r)}),5===(s=a.join(\" \")).split(a[0]).length?a[0]:s;a=(i+\"\").split(\" \"),s={},o.forEach(function(t,e){return s[t]=a[e]=a[e]||a[(e-1)/2|0]}),e.init(t,s,n)}});var Ir,Lr,Br,Yr={name:\"css\",register:Wd,targetTest:function targetTest(t){return t.style&&t.nodeType},init:function init(t,e,i,n,a){var s,o,u,h,l,f,d,c,p,_,m,g,v,y,T,b,w,x=this._props,k=t.style,O=i.vars.startAt;for(d in Ne||Wd(),this.styles=this.styles||Qd(t),b=this.styles.props,this.tween=i,e)if(\"autoRound\"!==d&&(o=e[d],!mt[d]||!dc(d,e,i,n,t,a)))if(l=typeof o,f=Or[d],\"function\"===l&&(l=typeof(o=o.call(i,n,t,a))),\"string\"===l&&~o.indexOf(\"random(\")&&(o=rb(o)),f)f(this,t,d,o,i)&&(T=1);else if(\"--\"===d.substr(0,2))s=(getComputedStyle(t).getPropertyValue(d)+\"\").trim(),o+=\"\",Rt.lastIndex=0,Rt.test(s)||(c=_a(s),(p=_a(o))?c!==p&&(s=de(t,d,s,p)+p):c&&(o+=c)),this.add(k,\"setProperty\",s,o,n,a,0,0,d),x.push(d),b.push(d,0,k[d]);else if(\"undefined\"!==l){if(O&&d in O?(s=\"function\"==typeof O[d]?O[d].call(i,n,t,a):O[d],r(s)&&~s.indexOf(\"random(\")&&(s=rb(s)),_a(s+\"\")||\"auto\"===s||(s+=N.units[d]||_a(xr(t,d))||\"\"),\"=\"===(s+\"\").charAt(1)&&(s=xr(t,d))):s=xr(t,d),h=parseFloat(s),(_=\"string\"===l&&\"=\"===o.charAt(1)&&o.substr(0,2))&&(o=o.substr(2)),u=parseFloat(o),d in mr&&(\"autoAlpha\"===d&&(1===h&&\"hidden\"===xr(t,\"visibility\")&&u&&(h=0),b.push(\"visibility\",0,k.visibility),ae(this,k,\"visibility\",h?\"inherit\":\"hidden\",u?\"inherit\":\"hidden\",!u)),\"scale\"!==d&&\"transform\"!==d&&~(d=mr[d]).indexOf(\",\")&&(d=d.split(\",\")[0])),m=d in hr){if(this.styles.save(d),w=o,\"string\"===l&&\"var(--\"===o.substring(0,6)){if(\"calc(\"===(o=Td(t,o.substring(4,o.indexOf(\")\")))).substring(0,5)){var M=t.style.perspective;t.style.perspective=o,o=Td(t,\"perspective\"),M?t.style.perspective=M:_d(t,\"perspective\")}u=parseFloat(o)}if(g||((v=t._gsap).renderTransform&&!e.parseTransform||Pr(t,e.parseTransform),y=!1!==e.smoothOrigin&&v.smooth,(g=this._pt=new we(this._pt,k,gr,0,1,v.renderTransform,v,0,-1)).dep=1),\"scale\"===d)this._pt=new we(this._pt,v,\"scaleY\",v.scaleY,(_?ma(v.scaleY,_+u):u)-v.scaleY||0,yd),this._pt.u=0,x.push(\"scaleY\",d),d+=\"X\";else{if(\"transformOrigin\"===d){b.push(vr,0,k[vr]),o=he(o),v.svg?pe(t,o,0,y,0,this):((p=parseFloat(o.split(\" \")[2])||0)!==v.zOrigin&&ae(this,v,\"zOrigin\",v.zOrigin,p),ae(this,k,d,Ar(s),Ar(o)));continue}if(\"svgOrigin\"===d){pe(t,o,1,y,0,this);continue}if(d in Cr){ze(this,v,d,h,_?ma(h,_+o):o);continue}if(\"smoothOrigin\"===d){ae(this,v,\"smooth\",v.smooth,o);continue}if(\"force3D\"===d){v[d]=o;continue}if(\"transform\"===d){Be(this,o,t);continue}}}else d in k||(d=Tr(d)||d);if(m||(u||0===u)&&(h||0===h)&&!_r.test(o)&&d in k)u=u||0,(c=(s+\"\").substr((h+\"\").length))!==(p=_a(o)||(d in N.units?N.units[d]:c))&&(h=de(t,d,s,p)),this._pt=new we(this._pt,m?v:k,d,h,(_?ma(h,_+u):u)-h,m||\"px\"!==p&&\"zIndex\"!==d||!1===e.autoRound?yd:Cd),this._pt.u=p||0,m&&w!==o?(this._pt.b=s,this._pt.e=w,this._pt.r=Bd):c!==p&&\"%\"!==p&&(this._pt.b=s,this._pt.r=Ad);else if(d in k)fe.call(this,t,d,s,_?_+o:o);else if(d in t)this.add(t,d,s||t[d],_?_+o:o,n,a);else if(\"parseTransform\"!==d){S(d,o);continue}m||(d in k?b.push(d,0,k[d]):\"function\"==typeof t[d]?b.push(d,2,t[d]()):b.push(d,1,s||t[d])),x.push(d)}T&&be(this)},render:function render(t,e){if(e.tween._time||!Ue())for(var r=e._pt;r;)r.r(t,r.d),r=r._next;else e.styles.revert()},get:xr,aliases:mr,getSetter:function getSetter(t,e,r){var i=mr[e];return i&&i.indexOf(\",\")<0&&(e=i),e in hr&&e!==vr&&(t._gsap.x||xr(t,\"x\"))?r&&Ve===r?\"scale\"===e?Id:Hd:(Ve=r||{})&&(\"scale\"===e?Jd:Kd):t.style&&!u(t.style[e])?Fd:~e.indexOf(\"-\")?Gd:le(t,e)},core:{_removeProperty:_d,_getMatrix:oe}};Fe.utils.checkPrefix=Tr,Fe.core.getStyleSaver=Qd,Br=ja((Ir=\"x,y,z,scale,scaleX,scaleY,xPercent,yPercent\")+\",\"+(Lr=\"rotation,rotationX,rotationY,skewX,skewY\")+\",transform,transformOrigin,svgOrigin,force3D,smoothOrigin,transformPerspective\",function(t){hr[t]=1}),ja(Lr,function(t){N.units[t]=\"deg\",Cr[t]=1}),mr[Br[13]]=Ir+\",\"+Lr,ja(\"0:translateX,1:translateY,2:translateZ,8:rotate,8:rotationZ,8:rotateZ,9:rotateX,10:rotateY\",function(t){var e=t.split(\":\");mr[e[1]]=Br[e[0]]}),ja(\"x,y,z,top,right,bottom,left,width,height,fontSize,padding,margin,perspective\",function(t){N.units[t]=\"px\"}),Fe.registerPlugin(Yr);var Nr=Fe.registerPlugin(Yr)||Fe,jr=Nr.core.Tween;e.Back=ir,e.Bounce=ar,e.CSSPlugin=Yr,e.Circ=ur,e.Cubic=Ke,e.Elastic=rr,e.Expo=or,e.Linear=Qe,e.Power0=qe,e.Power1=Ze,e.Power2=We,e.Power3=He,e.Power4=Je,e.Quad=Ge,e.Quart=$e,e.Quint=tr,e.Sine=sr,e.SteppedEase=nr,e.Strong=er,e.TimelineLite=Zt,e.TimelineMax=Zt,e.TweenLite=te,e.TweenMax=jr,e.default=Nr,e.gsap=Nr;if (typeof(window)===\"undefined\"||window!==e){Object.defineProperty(e,\"__esModule\",{value:!0})} else {delete e.default}});\n\n\n</script>\n    <style>*,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body,\n      #organic-light-leak-demo {\n        width: 960px;\n        height: 540px;\n        margin: 0;\n        overflow: hidden;\n        background: #090909;\n      }\n\n      #light-leak-demo-backdrop,\n      #light-leak-demo-overlay {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n\n      #light-leak-demo-backdrop {\n        object-fit: cover;\n      }\n\n      #light-leak-demo-overlay {\n        z-index: 20;\n      }\n\n*,\n      [data-composition-id=\"organic-light-leak-overlay\"] *::before,\n      [data-composition-id=\"organic-light-leak-overlay\"] *::after {\n        box-sizing: border-box;\n      }\n\n      [data-composition-id=\"organic-light-leak-overlay\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"organic-light-leak-overlay\"] > [data-hf-inner-root],\n      [data-composition-id=\"organic-light-leak-overlay\"]:not(:has([data-hf-inner-root])), [data-composition-id=\"organic-light-leak-overlay\"] > [data-hf-inner-root] {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: transparent;\n      }\n\n      [data-composition-id=\"organic-light-leak-overlay\"] #hf-light-leak {\n        position: absolute;\n        inset: -16%;\n        opacity: 0;\n        overflow: hidden;\n        pointer-events: none;\n        mix-blend-mode: screen;\n      }\n\n      [data-composition-id=\"organic-light-leak-overlay\"] #hf-light-leak .hf-leak-layer {\n        position: absolute;\n        inset: -20%;\n        will-change: opacity, transform;\n      }\n\n      [data-composition-id=\"organic-light-leak-overlay\"] #hf-light-leak .hf-leak-amber {\n        background:\n          radial-gradient(ellipse 52% 110% at 10% 58%, rgb(255 241 197 / 92%), transparent 45%),\n          radial-gradient(ellipse 72% 120% at 24% 54%, rgb(255 126 57 / 78%), transparent 66%);\n        filter: blur(2.8vmin);\n      }\n\n      [data-composition-id=\"organic-light-leak-overlay\"] #hf-light-leak .hf-leak-red {\n        background: radial-gradient(\n          ellipse 58% 105% at 78% 34%,\n          rgb(255 79 61 / 72%),\n          rgb(255 44 92 / 28%) 48%,\n          transparent 76%\n        );\n        filter: blur(4vmin);\n      }\n\n      [data-composition-id=\"organic-light-leak-overlay\"] #hf-light-leak .hf-leak-gold {\n        background: linear-gradient(\n          104deg,\n          transparent 24%,\n          rgb(255 144 62 / 30%) 40%,\n          rgb(255 247 205 / 72%) 51%,\n          rgb(255 124 48 / 22%) 62%,\n          transparent 78%\n        );\n        filter: blur(2vmin);\n      }</style>\n  </head>\n  <body>\n    <div id=\"organic-light-leak-demo\" data-composition-id=\"organic-light-leak-demo\" data-start=\"0\" data-duration=\"4\" data-width=\"960\" data-height=\"540\">\n      <img id=\"light-leak-demo-backdrop\" class=\"clip\" src=\"/public/catalog/assets/14beda4f8011bbcc.jpg\" alt=\"\" data-start=\"0\" data-duration=\"4\" data-track-index=\"0\">\n      <div style=\"width:960px;height:540px\" data-composition-file=\"organic-light-leak-overlay.html\" id=\"light-leak-demo-overlay\" data-composition-id=\"organic-light-leak-overlay\" data-start=\"0\" data-duration=\"4\" data-track-index=\"1\" data-width=\"960\" data-height=\"540\"><div style=\"width:1920px;height:1080px\" data-hf-inner-root=\"true\" data-hf-authored-id=\"organic-light-leak-overlay\" data-width=\"1920\" data-height=\"1080\">\n      <div id=\"hf-light-leak\" aria-hidden=\"true\">\n        <div class=\"hf-leak-layer hf-leak-amber\"></div>\n        <div class=\"hf-leak-layer hf-leak-red\"></div>\n        <div class=\"hf-leak-layer hf-leak-gold\"></div>\n      </div>\n    </div></div>\n    </div>\n\n    \n  <script>var tl = gsap.timeline({ paused: true });\n      tl.to(\"#light-leak-demo-backdrop\", { scale: 1.025, duration: 4, ease: \"none\" }, 0);\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"organic-light-leak-demo\"] = tl;\n;\n(function(){\n  var __hfCompId = \"organic-light-leak-overlay\";\n  var __hfTimelineCompId = \"organic-light-leak-overlay\";\n  var __hfErrorLabel = \"[Compiler] Composition script failed\";\n  var __hfAuthoredRootId = \"organic-light-leak-overlay\";\n  var __hfAuthoredRootAttr = \"data-hf-authored-id\";\n  var __hfEscapeAttr = function(value) {\n    return (value + \"\").replace(/\\\\/g, \"\\\\\\\\\").replace(/\"/g, \"\\\\\\\"\");\n  };\n  var __hfRootSelector = \"[data-composition-id=\\\"organic-light-leak-overlay\\\"]\" || (__hfCompId\n    ? '[data-composition-id=\"' + __hfEscapeAttr(__hfCompId) + '\"]'\n    : \"\");\n  var __hfRoot = null;\n  var __hfRootSelectorPattern = \"\\\\[\\\\s*data-composition-id\\\\s*=\\\\s*(?:\\\"organic-light-leak-overlay\\\"|'organic-light-leak-overlay')\\\\s*\\\\]\";\n  var __hfTimingSelectorPattern = \"\\\\s*\\\\[\\\\s*data-(?:start|duration)\\\\s*=\\\\s*(?:\\\"[^\\\"]*\\\"|'[^']*')\\\\s*\\\\]\";\n  var __hfAuthoredRootIdForms = [\"organic-light-leak-overlay\"];\n  var __hfAuthoredRootSelector = __hfAuthoredRootId\n    ? \"[\" + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(__hfAuthoredRootId) + '\"]'\n    : \"\";\n  var __hfIsSelectorNameChar = function(char) {\n    return !!char && /[\\w-]/.test(char);\n  };\n  var __hfReplaceAuthoredRootIdSelectors = function(selector) {\n    if (!__hfAuthoredRootSelector || !__hfAuthoredRootIdForms.length || typeof selector !== \"string\") {\n      return selector;\n    }\n    var result = \"\";\n    var bracketDepth = 0;\n    var quote = null;\n    for (var index = 0; index < selector.length; index += 1) {\n      var char = selector[index];\n      var previousChar = index > 0 ? selector[index - 1] : \"\";\n      if (quote) {\n        result += char;\n        if (char === quote && previousChar !== \"\\\\\") {\n          quote = null;\n        }\n        continue;\n      }\n      if (char === '\"' || char === \"'\") {\n        quote = char;\n        result += char;\n        continue;\n      }\n      if (char === \"[\") {\n        bracketDepth += 1;\n        result += char;\n        continue;\n      }\n      if (char === \"]\") {\n        bracketDepth = Math.max(0, bracketDepth - 1);\n        result += char;\n        continue;\n      }\n      if (char === \"#\" && bracketDepth === 0) {\n        var matchedForm = null;\n        for (var formIndex = 0; formIndex < __hfAuthoredRootIdForms.length; formIndex += 1) {\n          var form = __hfAuthoredRootIdForms[formIndex];\n          if (selector.slice(index + 1, index + 1 + form.length) === form) {\n            matchedForm = form;\n            break;\n          }\n        }\n        if (matchedForm) {\n          var nextChar = selector[index + 1 + matchedForm.length];\n          if (!__hfIsSelectorNameChar(nextChar)) {\n            result += __hfAuthoredRootSelector;\n            index += matchedForm.length;\n            continue;\n          }\n        }\n      }\n      result += char;\n    }\n    return result;\n  };\n  var __hfNormalizeSelector = function(selector) {\n    if (!__hfCompId || typeof selector !== \"string\") return selector;\n    var normalized = selector\n      .replace(new RegExp(__hfRootSelectorPattern + '(?:' + __hfTimingSelectorPattern + ')+', 'g'), __hfRootSelector)\n      .replace(new RegExp('(?:' + __hfTimingSelectorPattern + ')+' + __hfRootSelectorPattern, 'g'), __hfRootSelector);\n    if (__hfAuthoredRootSelector) {\n      normalized = __hfReplaceAuthoredRootIdSelectors(normalized);\n    }\n    return normalized;\n  };\n  var __hfFindRoot = function() {\n    if (!__hfRoot && __hfRootSelector) {\n      __hfRoot = window.document.querySelector(__hfRootSelector);\n    }\n    return __hfRoot;\n  };\n  var __hfContains = function(node) {\n    var root = __hfFindRoot();\n    return !root || node === root || root.contains(node);\n  };\n  var __hfQueryAll = function(selector) {\n    var root = __hfFindRoot();\n    if (!root || typeof selector !== \"string\") {\n      return window.document.querySelectorAll(selector);\n    }\n    return Array.prototype.filter.call(window.document.querySelectorAll(__hfNormalizeSelector(selector)), function(node) {\n      return __hfContains(node);\n    });\n  };\n  var __hfQueryOne = function(selector) {\n    var matches = __hfQueryAll(selector);\n    return matches[0] || null;\n  };\n  var __hfGetElementById = function(id) {\n    var found = window.document.getElementById(id);\n    if (found && __hfContains(found)) return found;\n    var root = __hfFindRoot();\n    if (!root) return found || null;\n    var idValue = id + \"\";\n    if (__hfAuthoredRootId && __hfAuthoredRootId === idValue && root.getAttribute && root.getAttribute(__hfAuthoredRootAttr) === idValue) {\n      return root;\n    }\n    if (root.id === idValue) return root;\n    if (typeof root.querySelector !== \"function\") return null;\n    try {\n      var authoredRootMatch = root.querySelector('[' + __hfAuthoredRootAttr + '=\"' + __hfEscapeAttr(idValue) + '\"]');\n      if (authoredRootMatch) return authoredRootMatch;\n    } catch {}\n    if (typeof CSS !== \"undefined\" && CSS && typeof CSS.escape === \"function\") {\n      try {\n        return root.querySelector(\"#\" + CSS.escape(idValue)) || null;\n      } catch {}\n    }\n    try {\n      return root.querySelector('[id=\"' + __hfEscapeAttr(idValue) + '\"]') || null;\n    } catch {}\n    return null;\n  };\n  var __hfScopedDocument = typeof Proxy === \"function\"\n    ? new Proxy(window.document, {\n        get: function(target, prop, receiver) {\n          if (prop === \"querySelector\") return __hfQueryOne;\n          if (prop === \"querySelectorAll\") return __hfQueryAll;\n          if (prop === \"getElementById\") return __hfGetElementById;\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      })\n    : window.document;\n  var __hfTimelineRegistryProxy = null;\n  var __hfGetTimelineRegistry = function() {\n    window.__timelines = window.__timelines || {};\n    if (!__hfCompId || __hfCompId === __hfTimelineCompId || typeof Proxy !== \"function\") {\n      return window.__timelines;\n    }\n    if (!__hfTimelineRegistryProxy) {\n      __hfTimelineRegistryProxy = new Proxy(window.__timelines, {\n        get: function(target, prop, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.get(target, prop, target);\n          }\n          var authoredValue = Reflect.get(target, prop, target);\n          return authoredValue === undefined\n            ? Reflect.get(target, __hfTimelineCompId, target)\n            : authoredValue;\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop !== __hfCompId) {\n            return Reflect.set(target, prop, value, target);\n          }\n          // The authored node remains in the compiled DOM when its local id\n          // differs from the runtime mount id, so readiness legitimately sees\n          // both compositions. Publish the same timeline under both identities\n          // instead of replacing one with the other.\n          var authoredSet = Reflect.set(target, __hfCompId, value, target);\n          var runtimeSet = Reflect.set(target, __hfTimelineCompId, value, target);\n          return authoredSet && runtimeSet;\n        },\n      });\n    }\n    return __hfTimelineRegistryProxy;\n  };\n  var __hfScopedWindow = typeof Proxy === \"function\"\n    ? new Proxy(window, {\n        get: function(target, prop, receiver) {\n          if (prop === \"__timelines\") return __hfGetTimelineRegistry();\n          // Inside a sub-composition, __hyperframes is passed as a bare script\n          // param bound to the SCOPED variant (per-comp getVariables). But\n          // authors routinely write the documented window.__hyperframes.\n          // getVariables() form, which would otherwise fall through to the host\n          // page's base __hyperframes and return the WRONG (or empty) variables\n          // for this instance. Route it to the scoped variant too so both\n          // spellings resolve to this composition's own variables.\n          // (__hfScopedHyperframes is a hoisted var assigned below, before any\n          // sub-comp script -- the only code that reads this -- runs.)\n          if (prop === \"__hyperframes\") return __hfScopedHyperframes;\n          return Reflect.get(target, prop, target);\n        },\n        set: function(target, prop, value, receiver) {\n          if (prop === \"__timelines\") {\n            // Common authoring boilerplate assigns the registry back to\n            // itself (window.__timelines = window.__timelines || {}). The\n            // getter above returns our proxy; do not replace the canonical\n            // registry with that proxy or later wrappers will stack proxies.\n            if (value === __hfTimelineRegistryProxy) return true;\n            target.__timelines = value || {};\n            __hfTimelineRegistryProxy = null;\n            return true;\n          }\n          return Reflect.set(target, prop, value, target);\n        },\n      })\n    : window;\n  var __hfResolveGsapTarget = function(target) {\n    if (typeof target !== \"string\") return target;\n    return __hfQueryAll(target);\n  };\n  var __hfScopeTimeline = function(timeline) {\n    if (!timeline || timeline.__hfScopedCompositionRoot === __hfFindRoot()) return timeline;\n    [\"to\", \"from\", \"fromTo\", \"set\"].forEach(function(method) {\n      var original = timeline[method];\n      if (typeof original !== \"function\") return;\n      timeline[method] = function(target) {\n        var args = Array.prototype.slice.call(arguments);\n        args[0] = __hfResolveGsapTarget(target);\n        return original.apply(timeline, args);\n      };\n    });\n    try {\n      Object.defineProperty(timeline, \"__hfScopedCompositionRoot\", {\n        value: __hfFindRoot(),\n        configurable: true,\n      });\n    } catch {\n      // Best-effort: timelines coming from user code may have a frozen target\n      // or a non-extensible defineProperty path. Swallow — the scoped root\n      // is an enrichment, not a correctness invariant for playback.\n    }\n    return timeline;\n  };\n  var __hfBaseGsap = typeof gsap === \"undefined\" ? window.gsap : gsap;\n  var __hfScopedGsap = !__hfBaseGsap || typeof Proxy !== \"function\"\n    ? __hfBaseGsap\n    : new Proxy(__hfBaseGsap, {\n        get: function(target, prop, receiver) {\n          if (prop === \"timeline\") {\n            return function() {\n              return __hfScopeTimeline(target.timeline.apply(target, arguments));\n            };\n          }\n          if (prop === \"to\" || prop === \"from\" || prop === \"fromTo\" || prop === \"set\") {\n            return function(firstArg) {\n              var args = Array.prototype.slice.call(arguments);\n              args[0] = __hfResolveGsapTarget(firstArg);\n              return target[prop].apply(target, args);\n            };\n          }\n          if (prop === \"utils\" && target.utils && typeof Proxy === \"function\") {\n            return new Proxy(target.utils, {\n              get: function(utilsTarget, utilsProp, utilsReceiver) {\n                if (utilsProp === \"toArray\") {\n                  return function(firstArg) {\n                    var args = Array.prototype.slice.call(arguments);\n                    args[0] = __hfResolveGsapTarget(firstArg);\n                    return utilsTarget.toArray.apply(utilsTarget, args);\n                  };\n                }\n                if (utilsProp === \"selector\") {\n                  return function(base) {\n                    var baseEl = typeof base === \"string\" ? __hfQueryOne(base) : base;\n                    var root = baseEl || __hfFindRoot();\n                    return function(selector) {\n                      if (!root || typeof selector !== \"string\") return [];\n                      return Array.prototype.filter.call(\n                        window.document.querySelectorAll(__hfNormalizeSelector(selector)),\n                        function(node) {\n                          return node === root || (typeof root.contains === \"function\" && root.contains(node));\n                        },\n                      );\n                    };\n                  };\n                }\n                var value = Reflect.get(utilsTarget, utilsProp, utilsTarget);\n                return typeof value === \"function\" ? value.bind(utilsTarget) : value;\n              },\n            });\n          }\n          var value = Reflect.get(target, prop, target);\n          return typeof value === \"function\" ? value.bind(target) : value;\n        },\n      });\n  var __hfBaseHyperframes = window.__hyperframes;\n  var __hfScopedHyperframes = !__hfBaseHyperframes\n    ? __hfBaseHyperframes\n    : Object.assign({}, __hfBaseHyperframes, {\n        getVariables: function() {\n          var byComp = window.__hfVariablesByComp;\n          var scoped = byComp && __hfTimelineCompId ? byComp[__hfTimelineCompId] : null;\n          return scoped ? Object.assign({}, scoped) : {};\n        },\n      });\n  var __hfRun = function() {\n    try {\n      (function(document, gsap, window, __hyperframes) {\n\n      window.__timelines = window.__timelines || {};\n\n      var leak = document.getElementById(\"hf-light-leak\");\n      var host = leak && leak.closest(\"[data-composition-id]\");\n      if (!host) throw new Error(\"Organic Light Leak could not find its composition host\");\n\n      var compositionId = host.getAttribute(\"data-composition-id\");\n      var duration = Number(host.getAttribute(\"data-duration\")) || 4;\n      var tl = gsap.timeline({ paused: true });\n\n      tl.to({}, { duration: duration, ease: \"none\" }, 0);\n      tl.fromTo(\n        leak,\n        { opacity: 0 },\n        { opacity: 0.9, duration: duration * 0.24, ease: \"sine.out\" },\n        duration * 0.08,\n      );\n      tl.to(leak, { opacity: 0.46, duration: duration * 0.2, ease: \"sine.inOut\" }, duration * 0.42);\n      tl.to(leak, { opacity: 0, duration: duration * 0.26, ease: \"sine.in\" }, duration * 0.68);\n      tl.fromTo(\n        \".hf-leak-amber\",\n        { xPercent: -20, scale: 0.92, rotation: -4 },\n        { xPercent: 18, scale: 1.1, rotation: 2, duration: duration, ease: \"sine.inOut\" },\n        0,\n      );\n      tl.fromTo(\n        \".hf-leak-red\",\n        { xPercent: 20, yPercent: -8, scale: 1.08 },\n        { xPercent: -16, yPercent: 8, scale: 0.94, duration: duration, ease: \"sine.inOut\" },\n        0,\n      );\n      tl.fromTo(\n        \".hf-leak-gold\",\n        { xPercent: -28, rotation: -6 },\n        { xPercent: 24, rotation: 4, duration: duration, ease: \"sine.inOut\" },\n        0,\n      );\n\n      window.__timelines[compositionId] = tl;\n    \n      }).call(window, __hfScopedDocument, __hfScopedGsap, __hfScopedWindow, __hfScopedHyperframes);\n    } catch (_err) {\n      console.error(__hfErrorLabel, __hfCompId, _err);\n    }\n  };\n  __hfFindRoot();\n  __hfRun();\n})();</script></body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/reddit-post.json b/docs/public/catalog/blocks/reddit-post.json
new file mode 100644
index 0000000000..e8e19e633f
--- /dev/null
+++ b/docs/public/catalog/blocks/reddit-post.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"DM Sans\", sans-serif;\n      }\n\n      [data-composition-id=\"reddit-post\"] .reddit-card {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 860px;\n        background: #1a1a2e;\n        border-radius: 16px;\n        padding: 32px;\n        box-shadow: 0 12px 60px rgba(0, 0, 0, 0.6);\n      }\n\n      /* Header */\n      [data-composition-id=\"reddit-post\"] .post-header {\n        display: flex;\n        align-items: center;\n        gap: 14px;\n        margin-bottom: 24px;\n      }\n\n      [data-composition-id=\"reddit-post\"] .subreddit-icon {\n        width: 48px;\n        height: 48px;\n        flex-shrink: 0;\n      }\n\n      [data-composition-id=\"reddit-post\"] .subreddit-icon svg {\n        width: 48px;\n        height: 48px;\n        display: block;\n      }\n\n      [data-composition-id=\"reddit-post\"] .post-meta {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n      }\n\n      [data-composition-id=\"reddit-post\"] .subreddit-name {\n        font-size: 28px;\n        font-weight: 700;\n        color: #d7dadc;\n        line-height: 1.3;\n      }\n\n      [data-composition-id=\"reddit-post\"] .post-author {\n        font-size: 24px;\n        font-weight: 400;\n        color: #818384;\n        line-height: 1.3;\n      }\n\n      /* Content */\n      [data-composition-id=\"reddit-post\"] .post-title {\n        font-size: 38px;\n        font-weight: 700;\n        color: #d7dadc;\n        line-height: 1.35;\n        margin-bottom: 16px;\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      [data-composition-id=\"reddit-post\"] .post-body {\n        font-size: 28px;\n        font-weight: 400;\n        color: #818384;\n        line-height: 1.45;\n        margin-bottom: 28px;\n        display: -webkit-box;\n        -webkit-line-clamp: 3;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      /* Action bar */\n      [data-composition-id=\"reddit-post\"] .action-bar {\n        display: flex;\n        align-items: center;\n        gap: 28px;\n        padding-top: 20px;\n        border-top: 1px solid #343536;\n      }\n\n      [data-composition-id=\"reddit-post\"] .vote-group {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        background: #272729;\n        border-radius: 24px;\n        padding: 8px 16px;\n      }\n\n      [data-composition-id=\"reddit-post\"] .vote-btn {\n        width: 32px;\n        height: 32px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n      }\n\n      [data-composition-id=\"reddit-post\"] .vote-btn svg {\n        width: 28px;\n        height: 28px;\n        display: block;\n      }\n\n      [data-composition-id=\"reddit-post\"] .vote-count {\n        font-size: 26px;\n        font-weight: 700;\n        color: #d7dadc;\n        min-width: 50px;\n        text-align: center;\n      }\n\n      [data-composition-id=\"reddit-post\"] .action-btn {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        background: #272729;\n        border-radius: 24px;\n        padding: 10px 20px;\n      }\n\n      [data-composition-id=\"reddit-post\"] .action-btn svg {\n        width: 26px;\n        height: 26px;\n        display: block;\n      }\n\n      [data-composition-id=\"reddit-post\"] .action-btn span {\n        font-size: 24px;\n        font-weight: 400;\n        color: #818384;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"reddit-post\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"5\"\n    >\n      <div id=\"card\" class=\"clip reddit-card\" data-start=\"0\" data-duration=\"5\" data-track-index=\"0\">\n        <!-- Header -->\n        <div class=\"post-header\">\n          <div class=\"subreddit-icon\">\n            <svg viewBox=\"0 0 48 48\" fill=\"none\">\n              <circle cx=\"24\" cy=\"24\" r=\"24\" fill=\"#4A90D9\" />\n              <text\n                x=\"24\"\n                y=\"30\"\n                text-anchor=\"middle\"\n                font-family=\"DM Sans, sans-serif\"\n                font-size=\"22\"\n                font-weight=\"700\"\n                fill=\"#fff\"\n              >\n                r/\n              </text>\n            </svg>\n          </div>\n          <div class=\"post-meta\">\n            <span class=\"subreddit-name\">r/hyperframes</span>\n            <span class=\"post-author\">u/placeholder_user &middot; 3h</span>\n          </div>\n        </div>\n\n        <!-- Content -->\n        <div class=\"post-title\">Prompt to change this title to whatever you want</div>\n        <div class=\"post-body\">\n          Prompt to change this body text, the subreddit, username, and vote count to match your\n          content.\n        </div>\n\n        <!-- Action bar -->\n        <div class=\"action-bar\">\n          <div class=\"vote-group\">\n            <div id=\"upvote-btn\" class=\"vote-btn\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\">\n                <path id=\"upvote-arrow\" d=\"M12 4L3 14h5v6h8v-6h5L12 4z\" fill=\"#818384\" />\n              </svg>\n            </div>\n            <span id=\"vote-count\" class=\"vote-count\">4.2k</span>\n            <div class=\"vote-btn\">\n              <svg viewBox=\"0 0 24 24\" fill=\"none\">\n                <path d=\"M12 20l9-10h-5V4H8v6H3l9 10z\" fill=\"#818384\" />\n              </svg>\n            </div>\n          </div>\n\n          <div class=\"action-btn\">\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"#818384\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z\" />\n            </svg>\n            <span>328</span>\n          </div>\n\n          <div class=\"action-btn\">\n            <svg\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"#818384\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            >\n              <path d=\"M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8\" />\n              <polyline points=\"16 6 12 2 8 6\" />\n              <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\" />\n            </svg>\n            <span>Share</span>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n\n      var card = document.getElementById(\"card\");\n      var upvoteBtn = document.getElementById(\"upvote-btn\");\n      var upvoteArrow = document.getElementById(\"upvote-arrow\");\n      var voteCount = document.getElementById(\"vote-count\");\n\n      // Start off-screen below\n      gsap.set(card, { y: 400, opacity: 0 });\n\n      // Slide in from bottom\n      tl.to(\n        card,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.6,\n          ease: \"power3.out\",\n        },\n        0.1,\n      );\n\n      // Upvote press-in\n      tl.to(\n        upvoteBtn,\n        {\n          scale: 0.85,\n          duration: 0.12,\n          ease: \"power2.out\",\n        },\n        1.5,\n      );\n\n      // Upvote release with spring bounce\n      tl.to(\n        upvoteBtn,\n        {\n          scale: 1,\n          duration: 0.4,\n          ease: \"elastic.out(1, 0.4)\",\n        },\n        1.62,\n      );\n\n      // Arrow turns orange\n      tl.to(\n        upvoteArrow,\n        {\n          attr: { fill: \"#ff4500\" },\n          duration: 0.12,\n          ease: \"none\",\n        },\n        1.62,\n      );\n\n      // Vote count turns orange + increments\n      tl.to(\n        voteCount,\n        {\n          color: \"#ff4500\",\n          duration: 0.12,\n          ease: \"none\",\n          onStart: function () {\n            voteCount.textContent = \"4.3k\";\n          },\n        },\n        1.62,\n      );\n\n      // Slide out to bottom\n      tl.to(\n        card,\n        {\n          y: 400,\n          opacity: 0,\n          duration: 0.3,\n          ease: \"power3.in\",\n        },\n        4.2,\n      );\n\n      window.__timelines[\"reddit-post\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/ridged-burn.json b/docs/public/catalog/blocks/ridged-burn.json
new file mode 100644
index 0000000000..430896c7cb
--- /dev/null
+++ b/docs/public/catalog/blocks/ridged-burn.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #0b090a;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #e5383b;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #e5383b;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #e5383b;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #e5383b;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #e5383b;\n          background: rgba(229, 56, 59, 0.06);\n          border: 1px solid rgba(229, 56, 59, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #777;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">02 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #0b090a\">\n        <div class=\"scene-label\" style=\"color: #e5383b\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #e5383b; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #0b090a\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Ridged Burn</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use ridged burn shader transition\"</div>\n        <div class=\"bp-desc\">\n          abs(noise) creates sharp lightning-crack edges. Blackbody color gradient with\n          high-frequency ember sparks.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var NQ =\n          \"float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\" +\n          \"float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);\" +\n          \"f=f*f*f*(f*(f*6.-15.)+10.);\" +\n          \"return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),\" +\n          \"mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}\" +\n          \"float fbm(vec2 p){float v=0.,a=.5;\" +\n          \"mat2 R=mat2(.8,.6,-.6,.8);\" +\n          \"for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            NQ +\n            \"float ridged(vec2 p){float v=0.,a=.5;mat2 R=mat2(.8,.6,-.6,.8);for(int i=0;i<5;i++){v+=a*abs(vnoise(p)*2.-1.);p=R*p*2.02;a*=.5;}return v;}void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);float n=ridged(v_uv*4.);float e=smoothstep(u_progress-.04,u_progress+.04,n);float heat=smoothstep(.12,0.,abs(n-u_progress))*(1.-step(1.,u_progress));vec3 burn=mix(vec3(.4,0,0),vec3(1,.4,0),smoothstep(0.,.25,heat));burn=mix(burn,vec3(1,.85,.3),smoothstep(.25,.5,heat));burn=mix(burn,vec3(1),smoothstep(.5,1.,heat));float sparks=step(.92,vnoise(v_uv*80.))*heat*3.;gl_FragColor=vec4(mix(B,A,e).rgb+burn*heat*3.5+vec3(1.,.7,.3)*sparks,1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/ripple-waves.json b/docs/public/catalog/blocks/ripple-waves.json
new file mode 100644
index 0000000000..e80a4018a1
--- /dev/null
+++ b/docs/public/catalog/blocks/ripple-waves.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #264653;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #e9c46a;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #e9c46a;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #e9c46a;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #e9c46a;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #e9c46a;\n          background: rgba(233, 196, 106, 0.06);\n          border: 1px solid rgba(233, 196, 106, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #8aaa9a;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">05 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #264653\">\n        <div class=\"scene-label\" style=\"color: #e9c46a\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #e9c46a; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #264653\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Ripple Waves</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use ripple waves shader transition\"</div>\n        <div class=\"bp-desc\">\n          Exponential sine waves with sharp crests and broad troughs. Both scenes ripple in opposite\n          phases.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"void main(){vec2 uv=v_uv-.5;float dist=length(uv);vec2 dir=normalize(uv+.001);float fromAmp=u_progress*.04;float fw1=exp(sin(dist*25.-u_progress*12.)-1.);float fw2=exp(sin(dist*50.-u_progress*18.)-1.)*.5;vec2 fromUv=clamp(v_uv+dir*(fw1+fw2)*fromAmp,0.,1.);float toAmp=(1.-u_progress)*.04;float tw1=exp(sin(dist*25.+u_progress*12.)-1.);float tw2=exp(sin(dist*50.+u_progress*18.)-1.)*.5;vec2 toUv=clamp(v_uv-dir*(tw1+tw2)*toAmp,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);float peak=fw1*u_progress;vec3 tint=vec3(.9,.95,1.)*peak*.1;gl_FragColor=vec4(mix(A.rgb+tint,B.rgb,u_progress),1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/sdf-iris.json b/docs/public/catalog/blocks/sdf-iris.json
new file mode 100644
index 0000000000..127238a54c
--- /dev/null
+++ b/docs/public/catalog/blocks/sdf-iris.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #003049;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #ffc300;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #ffc300;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #ffc300;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #ffc300;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #ffc300;\n          background: rgba(255, 195, 0, 0.06);\n          border: 1px solid rgba(255, 195, 0, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #7a9ab0;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">04 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #003049\">\n        <div class=\"scene-label\" style=\"color: #ffc300\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #ffc300; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #003049\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">SDF Iris</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use sdf iris shader transition\"</div>\n        <div class=\"bp-desc\">\n          Aspect-corrected circle SDF opening from center. Triple onion ring glow with warm\n          exponential falloff.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"void main(){vec4 A=texture2D(u_from,v_uv),B=texture2D(u_to,v_uv);vec2 uv=(v_uv-.5)*vec2(u_resolution.x/u_resolution.y,1.);float d=length(uv);float radius=u_progress*1.2;float fw=.003;float edge=smoothstep(radius+fw,radius-fw,d);float ring1=exp(-abs(d-radius)*25.);float ring2=exp(-abs(d-radius+.04)*20.)*.5;float ring3=exp(-abs(d-radius+.08)*15.)*.25;float glow=(ring1+ring2+ring3)*u_progress*(1.-u_progress)*4.;gl_FragColor=vec4(mix(A,B,edge).rgb+vec3(1.,.85,.6)*glow*.6,1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/spain-map.json b/docs/public/catalog/blocks/spain-map.json
new file mode 100644
index 0000000000..d81773580a
--- /dev/null
+++ b/docs/public/catalog/blocks/spain-map.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"es\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Spain Map</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #0f172a;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"spain-map\"\n      data-composition-id=\"spain-map\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"map-container\">\n        <div class=\"header\">\n          <h1 class=\"headline\">PIB per c&aacute;pita por Comunidad Aut&oacute;noma</h1>\n          <p class=\"subtitle\">Producto Interior Bruto per c&aacute;pita, estimaci&oacute;n 2024</p>\n        </div>\n\n        <svg class=\"map-svg\" viewBox=\"0 0 1400 820\" preserveAspectRatio=\"xMidYMid meet\">\n          <g class=\"regions-group\"></g>\n          <g class=\"labels-group\"></g>\n        </svg>\n\n        <div class=\"legend\">\n          <span class=\"legend-label legend-low\">Bajo</span>\n          <div class=\"legend-bar\"></div>\n          <span class=\"legend-label legend-high\">Alto</span>\n        </div>\n\n        <div class=\"source\">Fuente: Instituto Nacional de Estad&iacute;stica</div>\n      </div>\n\n      <style>\n        #spain-map {\n          width: 1920px;\n          height: 1080px;\n          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n          font-family: \"Inter\", sans-serif;\n          color: #e2e8f0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          overflow: hidden;\n        }\n\n        #spain-map .map-container {\n          width: 1700px;\n          height: 950px;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          position: relative;\n        }\n\n        #spain-map .header {\n          text-align: center;\n          margin-bottom: 20px;\n        }\n\n        #spain-map .headline {\n          font-size: 48px;\n          font-weight: 700;\n          letter-spacing: -0.02em;\n          color: #f8fafc;\n          clip-path: inset(0 100% 0 0);\n        }\n\n        #spain-map .subtitle {\n          font-size: 20px;\n          font-weight: 300;\n          color: #94a3b8;\n          margin-top: 8px;\n          opacity: 0;\n        }\n\n        #spain-map .map-svg {\n          width: 1500px;\n          height: 750px;\n          overflow: visible;\n        }\n\n        #spain-map .region-path {\n          stroke: #1e293b;\n          stroke-width: 0.8;\n          opacity: 0;\n          cursor: default;\n        }\n\n        #spain-map .region-label {\n          font-size: 11px;\n          font-weight: 500;\n          fill: #f8fafc;\n          text-anchor: middle;\n          dominant-baseline: central;\n          opacity: 0;\n          pointer-events: none;\n        }\n\n        #spain-map .legend {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          margin-top: 16px;\n          opacity: 0;\n        }\n\n        #spain-map .legend-bar {\n          width: 300px;\n          height: 12px;\n          border-radius: 6px;\n          background: linear-gradient(90deg, #7f1d1d, #dc2626, #fbbf24);\n        }\n\n        #spain-map .legend-label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #94a3b8;\n        }\n\n        #spain-map .source {\n          position: absolute;\n          bottom: 0;\n          right: 40px;\n          font-size: 12px;\n          color: #475569;\n          opacity: 0;\n        }\n      </style>\n\n      <script>\n        (function () {\n          var SPAIN_TOPO_URL =\n            \"https://cdn.jsdelivr.net/npm/es-atlas@0.6.0/es/autonomous_regions.json\";\n\n          var data = {\n            \"01\": { name: \"Andalucía\", abbr: \"AND\", gdp: 20200 },\n            \"02\": { name: \"Aragón\", abbr: \"ARA\", gdp: 30500 },\n            \"03\": { name: \"Asturias\", abbr: \"AST\", gdp: 24100 },\n            \"04\": { name: \"Illes Balears\", abbr: \"BAL\", gdp: 28900 },\n            \"05\": { name: \"Canarias\", abbr: \"CAN\", gdp: 21500 },\n            \"06\": { name: \"Cantabria\", abbr: \"CNT\", gdp: 25200 },\n            \"07\": { name: \"Castilla y León\", abbr: \"CYL\", gdp: 25800 },\n            \"08\": { name: \"Castilla-La Mancha\", abbr: \"CLM\", gdp: 21400 },\n            \"09\": { name: \"Catalunya\", abbr: \"CAT\", gdp: 33700 },\n            10: { name: \"Comunitat Valenciana\", abbr: \"VAL\", gdp: 23800 },\n            11: { name: \"Extremadura\", abbr: \"EXT\", gdp: 19200 },\n            12: { name: \"Galicia\", abbr: \"GAL\", gdp: 24500 },\n            13: { name: \"Comunidad de Madrid\", abbr: \"MAD\", gdp: 38100 },\n            14: { name: \"Región de Murcia\", abbr: \"MUR\", gdp: 22100 },\n            15: { name: \"Navarra\", abbr: \"NAV\", gdp: 35200 },\n            16: { name: \"País Vasco\", abbr: \"PVA\", gdp: 36800 },\n            17: { name: \"La Rioja\", abbr: \"RIO\", gdp: 29800 },\n            18: { name: \"Ceuta\", abbr: \"CEU\", gdp: 21000 },\n            19: { name: \"Melilla\", abbr: \"MEL\", gdp: 19500 },\n          };\n\n          var nameMap = {};\n          for (var key in data) {\n            nameMap[data[key].name.toLowerCase()] = key;\n          }\n\n          var minGdp = 19200;\n          var maxGdp = 38100;\n\n          function gdpToColor(gdp) {\n            var t = Math.min(Math.max((gdp - minGdp) / (maxGdp - minGdp), 0), 1);\n            if (t < 0.5) {\n              var s = t / 0.5;\n              return lerpColor([127, 29, 29], [220, 38, 38], s);\n            } else {\n              var s2 = (t - 0.5) / 0.5;\n              return lerpColor([220, 38, 38], [251, 191, 36], s2);\n            }\n          }\n\n          function lerpColor(a, b, t) {\n            var r = Math.round(a[0] + (b[0] - a[0]) * t);\n            var g = Math.round(a[1] + (b[1] - a[1]) * t);\n            var bl = Math.round(a[2] + (b[2] - a[2]) * t);\n            return \"rgb(\" + r + \",\" + g + \",\" + bl + \")\";\n          }\n\n          function findData(feature) {\n            var id = String(feature.id).padStart(2, \"0\");\n            if (data[id]) return data[id];\n            var fname = (feature.properties && feature.properties.name) || \"\";\n            var fnameLower = fname.toLowerCase();\n            for (var k in data) {\n              var dname = data[k].name.toLowerCase();\n              if (fnameLower.indexOf(dname) >= 0 || dname.indexOf(fnameLower) >= 0) {\n                return data[k];\n              }\n            }\n            return null;\n          }\n\n          var svg = document.querySelector(\"#spain-map .map-svg\");\n          var regionsGroup = svg.querySelector(\".regions-group\");\n          var labelsGroup = svg.querySelector(\".labels-group\");\n          var tl = gsap.timeline({ paused: true });\n\n          fetch(SPAIN_TOPO_URL)\n            .then(function (r) {\n              return r.json();\n            })\n            .then(function (es) {\n              var featureCollection = topojson.feature(es, es.objects.autonomous_regions);\n              var features = featureCollection.features;\n\n              var projection = d3\n                .geoConicConformal()\n                .center([0, 39.5])\n                .rotate([3.5, 0])\n                .fitSize([1200, 750], featureCollection);\n              var path = d3.geoPath().projection(projection);\n\n              var sortedFeatures = features\n                .filter(function (f) {\n                  return findData(f) !== null;\n                })\n                .sort(function (a, b) {\n                  return findData(a).gdp - findData(b).gdp;\n                });\n\n              sortedFeatures.forEach(function (feature) {\n                var info = findData(feature);\n                if (!info) return;\n\n                var d = path(feature);\n                if (!d) return;\n\n                var el = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n                el.setAttribute(\"d\", d);\n                el.setAttribute(\"class\", \"region-path\");\n                el.setAttribute(\"data-region\", info.abbr);\n                el.setAttribute(\"data-gdp\", String(info.gdp));\n                el.style.fill = gdpToColor(info.gdp);\n                regionsGroup.appendChild(el);\n\n                var centroid = path.centroid(feature);\n                if (centroid[0] && centroid[1]) {\n                  var label = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n                  label.setAttribute(\"x\", String(centroid[0]));\n                  label.setAttribute(\"y\", String(centroid[1]));\n                  label.setAttribute(\"class\", \"region-label\");\n                  label.textContent = info.abbr;\n                  labelsGroup.appendChild(label);\n                }\n              });\n\n              buildTimeline();\n            });\n\n          function buildTimeline() {\n            var regionPaths = regionsGroup.querySelectorAll(\".region-path\");\n            var regionLabels = labelsGroup.querySelectorAll(\".region-label\");\n\n            tl.to(\n              \"#spain-map .headline\",\n              {\n                clipPath: \"inset(0 0% 0 0)\",\n                duration: 1.0,\n                ease: \"power2.inOut\",\n              },\n              0,\n            );\n\n            tl.to(\n              \"#spain-map .subtitle\",\n              {\n                opacity: 1,\n                duration: 0.6,\n                ease: \"power2.out\",\n              },\n              0.4,\n            );\n\n            tl.to(\n              regionPaths,\n              {\n                opacity: 1,\n                scale: 1,\n                duration: 0.4,\n                stagger: {\n                  each: 0.08,\n                  from: \"center\",\n                },\n                ease: \"back.out(1.4)\",\n              },\n              1.0,\n            );\n\n            tl.to(\n              regionLabels,\n              {\n                opacity: 1,\n                duration: 0.3,\n                stagger: {\n                  each: 0.05,\n                  from: \"center\",\n                },\n                ease: \"power2.out\",\n              },\n              4.0,\n            );\n\n            tl.to(\n              \"#spain-map .legend\",\n              {\n                opacity: 1,\n                y: 0,\n                duration: 0.6,\n                ease: \"power2.out\",\n              },\n              5.5,\n            );\n\n            tl.to(\n              \"#spain-map .source\",\n              {\n                opacity: 1,\n                duration: 0.5,\n                ease: \"power2.out\",\n              },\n              6.0,\n            );\n\n            var highlightRegions = [\"MAD\", \"PVA\", \"NAV\"];\n            highlightRegions.forEach(function (abbr, i) {\n              var el = regionsGroup.querySelector('[data-region=\"' + abbr + '\"]');\n              if (!el) return;\n\n              tl.to(\n                el,\n                {\n                  filter: \"brightness(1.5) drop-shadow(0 0 8px rgba(255,255,255,0.4))\",\n                  stroke: \"#f8fafc\",\n                  strokeWidth: 2.5,\n                  duration: 0.5,\n                  ease: \"power2.out\",\n                },\n                6.5 + i * 0.8,\n              );\n\n              tl.to(\n                el,\n                {\n                  filter: \"brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0))\",\n                  stroke: \"#1e293b\",\n                  strokeWidth: 0.8,\n                  duration: 0.5,\n                  ease: \"power2.in\",\n                },\n                7.0 + i * 0.8,\n              );\n            });\n\n            window.__timelines = window.__timelines || {};\n            window.__timelines[\"spain-map\"] = tl;\n          }\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/spotify-card.json b/docs/public/catalog/blocks/spotify-card.json
new file mode 100644
index 0000000000..795f159c24
--- /dev/null
+++ b/docs/public/catalog/blocks/spotify-card.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      body {\n        width: 1080px;\n        height: 1920px;\n        font-family: \"Inter\", sans-serif;\n      }\n\n      [data-composition-id=\"spotify-card\"] .card {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        margin-top: -495px;\n        margin-left: -390px;\n        width: 780px;\n        background: linear-gradient(\n          165deg,\n          rgba(140, 155, 170, 0.42) 0%,\n          rgba(100, 115, 130, 0.35) 30%,\n          rgba(75, 88, 105, 0.38) 60%,\n          rgba(60, 72, 88, 0.44) 100%\n        );\n        border-radius: 28px;\n        padding: 36px;\n        border: 1px solid rgba(255, 255, 255, 0.22);\n        box-shadow:\n          0 24px 48px rgba(0, 0, 0, 0.3),\n          0 2px 6px rgba(0, 0, 0, 0.12),\n          inset 0 1px 0 rgba(255, 255, 255, 0.32),\n          inset 0 -1px 0 rgba(0, 0, 0, 0.12);\n        backdrop-filter: blur(40px) saturate(180%);\n        -webkit-backdrop-filter: blur(40px) saturate(180%);\n        overflow: hidden;\n      }\n\n      /* Specular highlight — light refraction across top */\n      [data-composition-id=\"spotify-card\"] .card::before {\n        content: \"\";\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 55%;\n        background: linear-gradient(\n          180deg,\n          rgba(255, 255, 255, 0.18) 0%,\n          rgba(255, 255, 255, 0.07) 35%,\n          transparent 100%\n        );\n        border-radius: 28px 28px 0 0;\n        pointer-events: none;\n      }\n\n      /* Edge shine — bottom rim catch light */\n      [data-composition-id=\"spotify-card\"] .card::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 20px;\n        right: 20px;\n        height: 1px;\n        background: linear-gradient(\n          90deg,\n          transparent 0%,\n          rgba(255, 255, 255, 0.08) 30%,\n          rgba(255, 255, 255, 0.12) 50%,\n          rgba(255, 255, 255, 0.08) 70%,\n          transparent 100%\n        );\n        pointer-events: none;\n      }\n\n      /* Album Art */\n      [data-composition-id=\"spotify-card\"] .album-art {\n        width: 708px;\n        height: 708px;\n        border-radius: 16px;\n        overflow: hidden;\n        position: relative;\n        z-index: 1;\n        background: linear-gradient(145deg, #1db954 0%, #17a34a 30%, #0f7234 60%, #191414 100%);\n        margin-bottom: 36px;\n      }\n\n      [data-composition-id=\"spotify-card\"] .album-art-icon {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        opacity: 0.2;\n      }\n\n      /* Track Info */\n      [data-composition-id=\"spotify-card\"] .track-info {\n        position: relative;\n        z-index: 1;\n        margin-bottom: 28px;\n        padding: 0 8px;\n      }\n\n      [data-composition-id=\"spotify-card\"] .track-name {\n        font-size: 52px;\n        font-weight: 700;\n        color: #ffffff;\n        letter-spacing: -0.02em;\n        line-height: 1.15;\n        margin-bottom: 8px;\n      }\n\n      [data-composition-id=\"spotify-card\"] .artist-name {\n        font-size: 34px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.7);\n        line-height: 1.3;\n      }\n\n      /* Spotify Branding */\n      [data-composition-id=\"spotify-card\"] .spotify-brand {\n        position: relative;\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        padding: 0 8px;\n      }\n\n      [data-composition-id=\"spotify-card\"] .spotify-logo {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [data-composition-id=\"spotify-card\"] .spotify-brand-text {\n        font-size: 26px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.55);\n        letter-spacing: 0.01em;\n      }\n    </style>\n  </head>\n  <body>\n<style>body { transform: scale(0.55); transform-origin: center center; }</style>\n    <div\n      id=\"root\"\n      data-composition-id=\"spotify-card\"\n      data-width=\"1080\"\n      data-height=\"1920\"\n      data-start=\"0\"\n      data-duration=\"5\"\n    >\n      <div id=\"card\" class=\"clip card\" data-start=\"0\" data-duration=\"5\" data-track-index=\"0\">\n        <!-- Album Art -->\n        <div id=\"album-art\" class=\"album-art\">\n          <svg class=\"album-art-icon\" width=\"200\" height=\"200\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n              d=\"M9 18V5l12-2v13\"\n              stroke=\"rgba(255,255,255,0.7)\"\n              stroke-width=\"1\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n            <circle cx=\"6\" cy=\"18\" r=\"3\" stroke=\"rgba(255,255,255,0.7)\" stroke-width=\"1\" />\n            <circle cx=\"18\" cy=\"16\" r=\"3\" stroke=\"rgba(255,255,255,0.7)\" stroke-width=\"1\" />\n          </svg>\n        </div>\n\n        <!-- Track Info -->\n        <div class=\"track-info\">\n          <div id=\"track-name\" class=\"track-name\">HyperFrames</div>\n          <div id=\"artist-name\" class=\"artist-name\">HeyGen</div>\n        </div>\n\n        <!-- Spotify Branding -->\n        <div id=\"spotify-brand\" class=\"spotify-brand\">\n          <div class=\"spotify-logo\">\n            <svg width=\"32\" height=\"32\" viewBox=\"0 0 16 16\" fill=\"rgba(255,255,255,0.55)\">\n              <path\n                d=\"M8 0a8 8 0 1 0 0 16A8 8 0 0 0 8 0m3.669 11.538a.5.5 0 0 1-.686.165c-1.879-1.147-4.243-1.407-7.028-.77a.499.499 0 0 1-.222-.973c3.048-.696 5.662-.397 7.77.892a.5.5 0 0 1 .166.686m.979-2.178a.624.624 0 0 1-.858.205c-2.15-1.321-5.428-1.704-7.972-.932a.625.625 0 0 1-.362-1.194c2.905-.881 6.517-.454 8.986 1.063a.624.624 0 0 1 .206.858m.084-2.268C10.154 5.56 5.9 5.419 3.438 6.166a.748.748 0 1 1-.434-1.432c2.825-.857 7.523-.692 10.492 1.07a.747.747 0 1 1-.764 1.288\"\n              />\n            </svg>\n          </div>\n          <span class=\"spotify-brand-text\">Spotify</span>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n\n      var card = document.getElementById(\"card\");\n      var albumArt = document.getElementById(\"album-art\");\n      var trackName = document.getElementById(\"track-name\");\n      var artistName = document.getElementById(\"artist-name\");\n      var spotifyBrand = document.getElementById(\"spotify-brand\");\n\n      // Start state\n      gsap.set(card, { y: 60, opacity: 0, scale: 0.94 });\n      gsap.set(trackName, { y: 20, opacity: 0 });\n      gsap.set(artistName, { y: 16, opacity: 0 });\n      gsap.set(spotifyBrand, { y: 12, opacity: 0 });\n\n      // ── Card entrance ────────────────────────────────────────\n      tl.to(\n        card,\n        {\n          y: 0,\n          opacity: 1,\n          scale: 1,\n          duration: 0.7,\n          ease: \"power3.out\",\n        },\n        0.1,\n      );\n\n      // ── Text stagger in ─────────────────────────────────────\n      tl.to(\n        trackName,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.5,\n          ease: \"power2.out\",\n        },\n        0.55,\n      );\n\n      tl.to(\n        artistName,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.45,\n          ease: \"power2.out\",\n        },\n        0.7,\n      );\n\n      tl.to(\n        spotifyBrand,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.4,\n          ease: \"power2.out\",\n        },\n        0.85,\n      );\n\n      // ── Subtle album art breathe ────────────────────────────\n      tl.to(\n        albumArt,\n        {\n          scale: 1.015,\n          duration: 1.5,\n          ease: \"power1.inOut\",\n          yoyo: true,\n          repeat: 1,\n        },\n        1.2,\n      );\n\n      // ── Card exit ────────────────────────────────────────────\n      tl.to(\n        card,\n        {\n          y: -40,\n          opacity: 0,\n          scale: 0.96,\n          duration: 0.5,\n          ease: \"power2.in\",\n        },\n        4.2,\n      );\n\n      window.__timelines[\"spotify-card\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/swirl-vortex.json b/docs/public/catalog/blocks/swirl-vortex.json
new file mode 100644
index 0000000000..bc3bed8cde
--- /dev/null
+++ b/docs/public/catalog/blocks/swirl-vortex.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #073b4c;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #06d6a0;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #06d6a0;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #06d6a0;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #06d6a0;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #06d6a0;\n          background: rgba(6, 214, 160, 0.06);\n          border: 1px solid rgba(6, 214, 160, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #7a9ab0;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">10 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #073b4c\">\n        <div class=\"scene-label\" style=\"color: #06d6a0\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #06d6a0; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #073b4c\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Swirl Vortex</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use swirl vortex shader transition\"</div>\n        <div class=\"bp-desc\">\n          Both scenes swirl in opposite directions with FBM-warped spiral path. Organic distortion.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var NQ =\n          \"float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\" +\n          \"float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);\" +\n          \"f=f*f*f*(f*(f*6.-15.)+10.);\" +\n          \"return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),\" +\n          \"mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}\" +\n          \"float fbm(vec2 p){float v=0.,a=.5;\" +\n          \"mat2 R=mat2(.8,.6,-.6,.8);\" +\n          \"for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            NQ +\n            \"void main(){vec2 uv=v_uv-.5;float dist=length(uv);float warp=fbm(v_uv*4.)*.5;float fromAng=u_progress*(1.-dist)*10.+warp*u_progress*3.;float fs=sin(fromAng),fc=cos(fromAng);vec2 fromUv=clamp(vec2(uv.x*fc-uv.y*fs,uv.x*fs+uv.y*fc)+.5,0.,1.);float toAng=-(1.-u_progress)*(1.-dist)*10.-warp*(1.-u_progress)*3.;float ts=sin(toAng),tc=cos(toAng);vec2 toUv=clamp(vec2(uv.x*tc-uv.y*ts,uv.x*ts+uv.y*tc)+.5,0.,1.);vec4 A=texture2D(u_from,fromUv);vec4 B=texture2D(u_to,toUv);gl_FragColor=mix(A,B,u_progress);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/thermal-distortion.json b/docs/public/catalog/blocks/thermal-distortion.json
new file mode 100644
index 0000000000..9308f208f4
--- /dev/null
+++ b/docs/public/catalog/blocks/thermal-distortion.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #3d405b;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #e07a5f;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #e07a5f;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #e07a5f;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #e07a5f;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #e07a5f;\n          background: rgba(224, 122, 95, 0.06);\n          border: 1px solid rgba(224, 122, 95, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #a0a0b0;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">11 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #3d405b\">\n        <div class=\"scene-label\" style=\"color: #e07a5f\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #e07a5f; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #3d405b\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Thermal Distortion</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use thermal distortion shader transition\"</div>\n        <div class=\"bp-desc\">\n          FBM-driven heat shimmer rising from the bottom. Sine displacement modulated by noise with\n          warm haze.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var NQ =\n          \"float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}\" +\n          \"float vnoise(vec2 p){vec2 i=floor(p),f=fract(p);\" +\n          \"f=f*f*f*(f*(f*6.-15.)+10.);\" +\n          \"return mix(mix(hash(i),hash(i+vec2(1,0)),f.x),\" +\n          \"mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),f.x),f.y);}\" +\n          \"float fbm(vec2 p){float v=0.,a=.5;\" +\n          \"mat2 R=mat2(.8,.6,-.6,.8);\" +\n          \"for(int i=0;i<5;i++){v+=a*vnoise(p);p=R*p*2.02;a*=.5;}return v;}\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            NQ +\n            \"void main(){float heat=u_progress*1.5;float yFade=smoothstep(1.,0.,v_uv.y);float shimmer=sin(v_uv.y*40.+fbm(v_uv*6.)*8.)*fbm(v_uv*3.+vec2(0.,u_progress*2.));float dispX=shimmer*heat*.03*yFade;vec2 fromUv=clamp(v_uv+vec2(dispX,0.),0.,1.);vec4 A=texture2D(u_from,fromUv);float invShimmer=sin(v_uv.y*40.+fbm(v_uv*6.+3.)*8.)*fbm(v_uv*3.+vec2(3.,u_progress*2.));float dispX2=invShimmer*(1.-u_progress)*.03*yFade;vec2 toUv=clamp(v_uv+vec2(dispX2,0.),0.,1.);vec4 B=texture2D(u_to,toUv);float haze=heat*yFade*.15*(1.-u_progress);gl_FragColor=vec4(mix(A.rgb,B.rgb,u_progress)+vec3(1.,.9,.7)*haze,1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/tiktok-follow.json b/docs/public/catalog/blocks/tiktok-follow.json
new file mode 100644
index 0000000000..50aba3d6ab
--- /dev/null
+++ b/docs/public/catalog/blocks/tiktok-follow.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n      }\n      html,\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      body {\n        width: 1080px;\n        height: 1920px;\n        font-family: \"DM Sans\", sans-serif;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .lower-third {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        display: flex;\n        align-items: center;\n        gap: 30px;\n        background: #1a1a1a;\n        border-radius: 75px;\n        padding: 25px 40px 25px 25px;\n        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .avatar {\n        width: 120px;\n        height: 120px;\n        border-radius: 50%;\n        object-fit: cover;\n        flex-shrink: 0;\n        border: 3px solid #333;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .profile-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        margin-right: 20px;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .display-name {\n        font-size: 42px;\n        font-weight: 700;\n        color: #ffffff;\n        line-height: 1.3;\n        letter-spacing: -0.01em;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .handle {\n        font-size: 28px;\n        font-weight: 400;\n        color: #a0a0a0;\n        line-height: 1.3;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .follower-count {\n        font-size: 25px;\n        font-weight: 400;\n        color: #737373;\n        line-height: 1.3;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .follow-btn {\n        position: relative;\n        width: 250px;\n        height: 80px;\n        border-radius: 40px;\n        background: #fe2c55;\n        flex-shrink: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .btn-text {\n        position: absolute;\n        font-family: \"DM Sans\", sans-serif;\n        font-size: 30px;\n        font-weight: 700;\n        color: #ffffff;\n        letter-spacing: 0.02em;\n        white-space: nowrap;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .btn-text-follow {\n        opacity: 1;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .btn-text-following {\n        opacity: 0;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .check-icon {\n        display: inline-block;\n        width: 22px;\n        height: 22px;\n      }\n\n      [data-composition-id=\"tiktok-follow\"] .check-icon svg {\n        width: 22px;\n        height: 22px;\n        display: block;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"tiktok-follow\"\n      data-width=\"1080\"\n      data-height=\"1920\"\n      data-start=\"0\"\n      data-duration=\"4.5\"\n    >\n      <div\n        id=\"card\"\n        class=\"clip lower-third\"\n        data-start=\"0\"\n        data-duration=\"4.5\"\n        data-track-index=\"0\"\n      >\n        <img class=\"avatar\" src=\"/public/catalog/assets/a300f59c31d2ea16.jpg\" alt=\"HeyGen\" crossorigin=\"anonymous\" />\n        <div class=\"profile-info\">\n          <div class=\"display-name\">HeyGen</div>\n          <div class=\"handle\">@heygen.com</div>\n          <div class=\"follower-count\">1,999 followers</div>\n        </div>\n        <div id=\"follow-btn\" class=\"follow-btn\">\n          <span id=\"btn-follow\" class=\"btn-text btn-text-follow\">Follow</span>\n          <span id=\"btn-following\" class=\"btn-text btn-text-following\">\n            <span>Following</span>\n            <span class=\"check-icon\"\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"#fff\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\"></polyline></svg\n            ></span>\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n\n      var card = document.getElementById(\"card\");\n      var btn = document.getElementById(\"follow-btn\");\n      var textFollow = document.getElementById(\"btn-follow\");\n      var textFollowing = document.getElementById(\"btn-following\");\n\n      // Start off-screen\n      gsap.set(card, { y: 300, opacity: 0 });\n\n      // Slide in from bottom\n      tl.to(\n        card,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.5,\n          ease: \"power3.out\",\n        },\n        0.1,\n      );\n\n      // Hold, then button press-in\n      tl.to(\n        btn,\n        {\n          scale: 0.92,\n          duration: 0.15,\n          ease: \"power2.out\",\n        },\n        1.0,\n      );\n\n      // Button release with spring bounce\n      tl.to(\n        btn,\n        {\n          scale: 1,\n          duration: 0.4,\n          ease: \"elastic.out(1, 0.4)\",\n        },\n        1.15,\n      );\n\n      // Button background: rose-red → dark gray\n      tl.to(\n        btn,\n        {\n          backgroundColor: \"#2f2f2f\",\n          duration: 0.12,\n          ease: \"none\",\n        },\n        1.15,\n      );\n\n      // Fade out \"Follow\", fade in \"Following\"\n      tl.to(\n        textFollow,\n        {\n          opacity: 0,\n          duration: 0.08,\n          ease: \"none\",\n        },\n        1.15,\n      );\n\n      tl.to(\n        textFollowing,\n        {\n          opacity: 1,\n          duration: 0.08,\n          ease: \"none\",\n        },\n        1.18,\n      );\n\n      // Slide out to bottom\n      tl.to(\n        card,\n        {\n          y: 300,\n          opacity: 0,\n          duration: 0.25,\n          ease: \"power3.in\",\n        },\n        3.8,\n      );\n\n      window.__timelines[\"tiktok-follow\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-3d.json b/docs/public/catalog/blocks/transitions-3d.json
new file mode 100644
index 0000000000..3a7039fa8b
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-3d.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <title>3D Transitions</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        transform-style: preserve-3d;\n      }\n\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        backface-visibility: hidden;\n      }\n\n      #scene1 {\n        z-index: 1;\n      }\n      #scene2 {\n        z-index: 2;\n        opacity: 0;\n      }\n\n      #s1 {\n        background: #1b263b;\n      }\n      #s2 {\n        background: #e07a5f;\n      }\n\n      .big-text {\n        font-size: 200px;\n        font-weight: 900;\n        line-height: 1;\n        user-select: none;\n        pointer-events: none;\n      }\n      #s1 .big-text {\n        color: rgba(255, 255, 255, 0.08);\n      }\n      #s2 .big-text {\n        color: rgba(255, 255, 255, 0.15);\n      }\n\n      .label {\n        font-size: 32px;\n        font-weight: 600;\n        letter-spacing: 6px;\n        text-transform: uppercase;\n        margin-top: 12px;\n      }\n      #s1 .label {\n        color: #778da9;\n      }\n      #s2 .label {\n        color: #fff;\n      }\n\n      #info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 1920px;\n        height: 80px;\n        background: rgba(0, 0, 0, 0.88);\n        z-index: 100;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n      }\n      #info-bar span {\n        color: #fff;\n        font-size: 22px;\n        font-weight: 500;\n        letter-spacing: 2px;\n      }\n\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        z-index: 200;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        opacity: 0;\n      }\n      #title-card .category {\n        font-size: 64px;\n        font-weight: 800;\n        color: #fff;\n        letter-spacing: 8px;\n        text-transform: uppercase;\n      }\n      #title-card .subtitle {\n        font-size: 24px;\n        font-weight: 400;\n        color: #778da9;\n        margin-top: 16px;\n        letter-spacing: 4px;\n      }\n\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        z-index: 200;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        opacity: 0;\n      }\n      #outro-card .category {\n        font-size: 48px;\n        font-weight: 700;\n        color: #778da9;\n        letter-spacing: 6px;\n        text-transform: uppercase;\n      }\n\n      /* 3D perspective wrapper */\n      #composition {\n        perspective: 1200px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"composition\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"11\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"title-card\">\n        <div class=\"category\">3D Transitions</div>\n        <div class=\"subtitle\">1 Transition</div>\n      </div>\n\n      <div id=\"scene1\" class=\"scene\">\n        <div id=\"s1\" class=\"scene-inner\">\n          <div class=\"big-text\">ONE</div>\n          <div class=\"label\">Scene A</div>\n        </div>\n      </div>\n\n      <div id=\"scene2\" class=\"scene\">\n        <div id=\"s2\" class=\"scene-inner\">\n          <div class=\"big-text\">TWO</div>\n          <div class=\"label\">Scene B</div>\n        </div>\n      </div>\n\n      <div id=\"info-bar\"><span id=\"info-text\">Transition Name</span></div>\n\n      <div id=\"outro-card\">\n        <div class=\"category\">End of 3D Transitions</div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              skewX: 0,\n              clipPath: \"none\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              skewX: 0,\n              clipPath: \"none\",\n            },\n            t,\n          );\n        }\n\n        /* ── Title card (3s) ── */\n        tl.set(\"#title-card\", { opacity: 1 }, 0);\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.5 }, 2.5);\n        t = 3;\n\n        /* ── Demo 1: 3D Card Flip ── */\n        resetScenes();\n        tl.set(\"#info-text\", { textContent: \"3D Card Flip\" }, t);\n        tl.to(\"#info-bar\", { opacity: 1, duration: 0.3 }, t);\n        t += 1.5;\n        var T = t;\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.set(\"#s2\", { rotationY: -180 }, T);\n        tl.to(\"#s1\", { rotationY: 180, duration: 0.6, ease: \"power2.inOut\" }, T);\n        tl.to(\"#s2\", { rotationY: 0, duration: 0.6, ease: \"power2.inOut\" }, T);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.65);\n        t = T + 1.5;\n        tl.to(\"#info-bar\", { opacity: 0, duration: 0.3 }, t);\n        t += 0.5;\n\n        /* ── Outro (3s) ── */\n        tl.set(\"#outro-card\", { opacity: 1 }, t);\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.5 }, t + 2.5);\n\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-blur.json b/docs/public/catalog/blocks/transitions-blur.json
new file mode 100644
index 0000000000..e93494ab2b
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-blur.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 24px 60px;\n        display: flex;\n        align-items: center;\n        gap: 40px;\n        opacity: 0;\n      }\n      .info-num {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e07a5f;\n        letter-spacing: 0.1em;\n      }\n      .info-name {\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-desc {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n      }\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n      }\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"20\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div\n          id=\"title-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          TRANSITION CATALOG\n        </div>\n        <div\n          id=\"title-main\"\n          style=\"font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          Blur Transitions\n        </div>\n        <div\n          id=\"title-count\"\n          style=\"\n            font-size: 24px;\n            font-weight: 400;\n            color: rgba(255, 255, 255, 0.4);\n            margin-top: 12px;\n            opacity: 0;\n          \"\n        >\n          3 transitions\n        </div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"z-index: 1\">\n        <div class=\"scene-inner\" id=\"s1\" style=\"background: #1b263b\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #778da9;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE A\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"z-index: 2; opacity: 0\">\n        <div class=\"scene-inner\" id=\"s2\" style=\"background: #e07a5f\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)\">\n            TWO\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #fff;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE B\n          </div>\n        </div>\n      </div>\n\n      <!-- Info Bars -->\n      <div id=\"info-1\" class=\"info-bar\">\n        <div class=\"info-num\">01</div>\n        <div class=\"info-name\">Blur Through</div>\n        <div class=\"info-desc\">Use a blur through transition</div>\n      </div>\n      <div id=\"info-2\" class=\"info-bar\">\n        <div class=\"info-num\">02</div>\n        <div class=\"info-name\">Directional Blur</div>\n        <div class=\"info-desc\">Use a directional blur transition with motion skew</div>\n      </div>\n      <div id=\"info-3\" class=\"info-bar\">\n        <div class=\"info-num\">03</div>\n        <div class=\"info-name\">Calm Blur Through</div>\n        <div class=\"info-desc\">Use a slow calm blur through transition</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div\n          id=\"outro-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          BLUR TRANSITIONS\n        </div>\n        <div\n          id=\"outro-main\"\n          style=\"font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          3 Transitions\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        // === TITLE CARD (3s) ===\n        tl.to(\"#title-label\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#title-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.fromTo(\n          \"#title-count\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          t + 1.0,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n        t += 3;\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n        }\n\n        // === TRANSITION 1: Blur Through ===\n        resetScenes();\n        tl.to(\"#info-1\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        var T = t + 1.5;\n        tl.to(\n          \"#s1\",\n          { filter: \"blur(15px)\", scale: 1.05, opacity: 0, duration: 0.4, ease: \"power2.in\" },\n          T,\n        );\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\n          \"#s2\",\n          { filter: \"blur(15px)\", scale: 0.95, opacity: 0 },\n          { filter: \"blur(0px)\", scale: 1, opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          T + 0.2,\n        );\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-1\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 2: Directional Blur ===\n        resetScenes();\n        tl.to(\"#info-2\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.to(\n          \"#s1\",\n          {\n            filter: \"blur(12px)\",\n            skewX: -8,\n            x: -200,\n            opacity: 0,\n            duration: 0.4,\n            ease: \"power3.in\",\n          },\n          T,\n        );\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\n          \"#s2\",\n          { filter: \"blur(12px)\", skewX: 8, x: 200, opacity: 0 },\n          { filter: \"blur(0px)\", skewX: 0, x: 0, opacity: 1, duration: 0.4, ease: \"power3.out\" },\n          T + 0.15,\n        );\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-2\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 3: Calm Blur Through ===\n        resetScenes();\n        tl.to(\"#info-3\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.to(\"#s1\", { filter: \"blur(30px)\", scale: 1.08, duration: 0.5, ease: \"power1.in\" }, T);\n        tl.to(\"#s1\", { opacity: 0, duration: 0.3, ease: \"power1.in\" }, T + 0.3);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.3);\n        tl.fromTo(\n          \"#s2\",\n          { filter: \"blur(30px)\", scale: 0.92, opacity: 0 },\n          { filter: \"blur(30px)\", scale: 0.92, opacity: 1, duration: 0.2, ease: \"none\" },\n          T + 0.5,\n        );\n        tl.to(\"#s2\", { filter: \"blur(0px)\", scale: 1, duration: 0.7, ease: \"power1.out\" }, T + 0.7);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-3\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === OUTRO (3s) ===\n        tl.set(\"#scene1\", { opacity: 0 }, t);\n        tl.set(\"#scene2\", { opacity: 0 }, t);\n        tl.to(\"#outro-card\", { opacity: 1, duration: 0.4, ease: \"power2.inOut\" }, t);\n        tl.to(\"#outro-label\", { opacity: 1, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#outro-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-cover.json b/docs/public/catalog/blocks/transitions-cover.json
new file mode 100644
index 0000000000..5331473f56
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-cover.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Cover Transitions Showcase</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n\n      /* Title Card */\n      #title-card {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        opacity: 1;\n      }\n      #title-card h1 {\n        font-size: 72px;\n        font-weight: 800;\n        color: #fff;\n        letter-spacing: -1px;\n        opacity: 0;\n        transform: translateY(30px);\n      }\n      #title-card .subtitle {\n        font-size: 28px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.5);\n        margin-top: 12px;\n        opacity: 0;\n        transform: translateY(20px);\n      }\n\n      /* Scenes */\n      #scene1,\n      #scene2 {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n      }\n      #scene1 {\n        background: #1b263b;\n        z-index: 2;\n        opacity: 0;\n      }\n      #scene2 {\n        background: #e07a5f;\n        z-index: 1;\n        opacity: 0;\n      }\n\n      .scene-number {\n        font-size: 180px;\n        font-weight: 900;\n        line-height: 1;\n        opacity: 0.12;\n        letter-spacing: -6px;\n      }\n      #scene1 .scene-number {\n        color: #fff;\n      }\n      #scene2 .scene-number {\n        color: #000;\n      }\n\n      .scene-label {\n        font-size: 48px;\n        font-weight: 700;\n        margin-top: -20px;\n      }\n      #scene1 .scene-label {\n        color: #fff;\n      }\n      #scene2 .scene-label {\n        color: #fff;\n      }\n\n      /* Info bar */\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 80px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0 48px;\n      }\n      #scene1 .info-bar {\n        background: rgba(0, 0, 0, 0.3);\n      }\n      #scene2 .info-bar {\n        background: rgba(0, 0, 0, 0.2);\n      }\n      .info-bar .label {\n        font-size: 18px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.7);\n        text-transform: uppercase;\n        letter-spacing: 2px;\n      }\n      .info-bar .desc {\n        font-size: 16px;\n        color: rgba(255, 255, 255, 0.5);\n        font-style: italic;\n      }\n\n      /* Outro */\n      #outro {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n      }\n      #outro h2 {\n        font-size: 56px;\n        font-weight: 800;\n        color: #fff;\n        opacity: 0;\n        transform: translateY(20px);\n      }\n      #outro .tag {\n        font-size: 22px;\n        color: rgba(255, 255, 255, 0.4);\n        margin-top: 10px;\n        opacity: 0;\n        transform: translateY(15px);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"comp\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"21\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      style=\"position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <h1 id=\"title-h1\">Cover Transitions</h1>\n        <div class=\"subtitle\" id=\"title-sub\">3 transition styles</div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\">\n        <div class=\"scene-number\">ONE</div>\n        <div class=\"scene-label\">SCENE A</div>\n        <div class=\"info-bar\">\n          <span class=\"label\" id=\"info-label-a\"></span>\n          <span class=\"desc\" id=\"info-desc-a\"></span>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\">\n        <div class=\"scene-number\">TWO</div>\n        <div class=\"scene-label\">SCENE B</div>\n        <div class=\"info-bar\">\n          <span class=\"label\" id=\"info-label-b\"></span>\n          <span class=\"desc\" id=\"info-desc-b\"></span>\n        </div>\n      </div>\n\n      <!-- Staggered Blocks Wipes -->\n      <div\n        id=\"wipe-a\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          background: #f72585;\n          z-index: 50;\n          transform: translateX(-1920px);\n        \"\n      ></div>\n      <div\n        id=\"wipe-b\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          background: #7209b7;\n          z-index: 49;\n          transform: translateX(-1920px);\n        \"\n      ></div>\n\n      <!-- Horizontal Blinds Container -->\n      <div\n        id=\"blinds-container\"\n        style=\"position: absolute; inset: 0; z-index: 50; pointer-events: none\"\n      ></div>\n\n      <!-- Vertical Blinds Container -->\n      <div\n        id=\"vblinds-container\"\n        style=\"position: absolute; inset: 0; z-index: 50; pointer-events: none\"\n      ></div>\n\n      <!-- Outro -->\n      <div id=\"outro\">\n        <h2 id=\"outro-h2\">Cover Transitions</h2>\n        <div class=\"tag\" id=\"outro-tag\">End of showcase</div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        // Generate horizontal blind strips\n        var blindsHTML = \"\";\n        for (var i = 0; i < 8; i++) {\n          blindsHTML +=\n            '<div id=\"blind-' +\n            i +\n            '\" style=\"position:absolute; left:0; width:1920px; height:135px; top:' +\n            i * 135 +\n            \"px; background:\" +\n            [\n              \"#3A0CA3\",\n              \"#4361EE\",\n              \"#4CC9F0\",\n              \"#F72585\",\n              \"#3A0CA3\",\n              \"#4361EE\",\n              \"#4CC9F0\",\n              \"#F72585\",\n            ][i] +\n            '; transform:translateX(-1920px);\"></div>';\n        }\n        document.getElementById(\"blinds-container\").innerHTML = blindsHTML;\n\n        // Generate vertical blind strips\n        var vblindsHTML = \"\";\n        for (var i = 0; i < 8; i++) {\n          vblindsHTML +=\n            '<div id=\"vblind-' +\n            i +\n            '\" style=\"position:absolute; top:0; height:1080px; width:240px; left:' +\n            i * 240 +\n            \"px; background:\" +\n            [\n              \"#3A0CA3\",\n              \"#4361EE\",\n              \"#4CC9F0\",\n              \"#F72585\",\n              \"#3A0CA3\",\n              \"#4361EE\",\n              \"#4CC9F0\",\n              \"#F72585\",\n            ][i] +\n            '; transform:translateY(-1080px);\"></div>';\n        }\n        document.getElementById(\"vblinds-container\").innerHTML = vblindsHTML;\n\n        var tl = gsap.timeline({ paused: false });\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n\n        // Transition demos config\n        var demos = [\n          { label: \"STAGGERED BLOCKS\", desc: \"Use a staggered color blocks transition\" },\n          { label: \"HORIZONTAL BLINDS\", desc: \"Use a horizontal blinds transition\" },\n          { label: \"VERTICAL BLINDS\", desc: \"Use a vertical blinds transition\" },\n        ];\n\n        // Reset scenes helper\n        function resetScenes(t, demoIndex) {\n          tl.set(\"#scene1\", { opacity: 1 }, t);\n          tl.set(\"#scene2\", { opacity: 0 }, t);\n          tl.set(\"#info-label-a\", { textContent: demos[demoIndex].label }, t);\n          tl.set(\"#info-desc-a\", { textContent: demos[demoIndex].desc }, t);\n          tl.set(\"#info-label-b\", { textContent: demos[demoIndex].label }, t);\n          tl.set(\"#info-desc-b\", { textContent: demos[demoIndex].desc }, t);\n          // Reset wipes\n          tl.set(\"#wipe-a\", { x: -1920 }, t);\n          tl.set(\"#wipe-b\", { x: -1920 }, t);\n          // Reset horizontal blinds\n          for (var i = 0; i < 8; i++) {\n            tl.set(\"#blind-\" + i, { x: -1920 }, t);\n          }\n          // Reset vertical blinds\n          for (var i = 0; i < 8; i++) {\n            tl.set(\"#vblind-\" + i, { y: -1080 }, t);\n          }\n        }\n\n        // ===== TITLE CARD (0s - 3s) =====\n        tl.to(\"#title-h1\", { opacity: 1, y: 0, duration: 0.6, ease: \"power2.out\" }, 0.3);\n        tl.to(\"#title-sub\", { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" }, 0.6);\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power1.inOut\" }, 2.5);\n\n        // ===== DEMO 1: STAGGERED BLOCKS (3s - 8s) =====\n        var T1 = 3;\n        resetScenes(T1, 0);\n        // Show Scene A for a beat, then transition at midpoint\n        var T = T1 + 2;\n        tl.set(\"#wipe-a\", { x: -1920 }, T - 0.01);\n        tl.set(\"#wipe-b\", { x: -1920 }, T - 0.01);\n        tl.to(\"#wipe-a\", { x: 0, duration: 0.25, ease: \"power3.inOut\" }, T);\n        tl.to(\"#wipe-b\", { x: 0, duration: 0.25, ease: \"power3.inOut\" }, T + 0.06);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.2);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.2);\n        tl.to(\"#wipe-a\", { x: 1920, duration: 0.25, ease: \"power3.inOut\" }, T + 0.28);\n        tl.to(\"#wipe-b\", { x: 1920, duration: 0.25, ease: \"power3.inOut\" }, T + 0.34);\n\n        // ===== DEMO 2: HORIZONTAL BLINDS (8s - 13s) =====\n        var T2 = 8;\n        resetScenes(T2, 1);\n        T = T2 + 2;\n        var stagger = 0.03;\n        for (var i = 0; i < 8; i++) {\n          tl.fromTo(\n            \"#blind-\" + i,\n            { x: -1920 },\n            { x: 0, duration: 0.2, ease: \"power3.inOut\" },\n            T + i * stagger,\n          );\n        }\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.5);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.5);\n        for (var i = 0; i < 8; i++) {\n          tl.to(\n            \"#blind-\" + i,\n            { x: 1920, duration: 0.2, ease: \"power3.inOut\" },\n            T + 0.55 + i * stagger,\n          );\n        }\n\n        // ===== DEMO 3: VERTICAL BLINDS (13s - 18s) =====\n        var T3 = 13;\n        resetScenes(T3, 2);\n        T = T3 + 2;\n        for (var i = 0; i < 8; i++) {\n          tl.fromTo(\n            \"#vblind-\" + i,\n            { y: -1080 },\n            { y: 0, duration: 0.2, ease: \"power3.inOut\" },\n            T + i * 0.03,\n          );\n        }\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.5);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.5);\n        for (var i = 0; i < 8; i++) {\n          tl.to(\n            \"#vblind-\" + i,\n            { y: 1080, duration: 0.2, ease: \"power3.inOut\" },\n            T + 0.55 + i * 0.03,\n          );\n        }\n\n        // ===== OUTRO (18s - 21s) =====\n        tl.to(\"#scene1\", { opacity: 0, duration: 0.3 }, 18);\n        tl.to(\"#scene2\", { opacity: 0, duration: 0.3 }, 18);\n        tl.to(\"#outro\", { opacity: 1, duration: 0.4, ease: \"power1.inOut\" }, 18.2);\n        tl.to(\"#outro-h2\", { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" }, 18.5);\n        tl.to(\"#outro-tag\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, 18.8);\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-destruction.json b/docs/public/catalog/blocks/transitions-destruction.json
new file mode 100644
index 0000000000..f68d93be03
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-destruction.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 24px 60px;\n        display: flex;\n        align-items: center;\n        gap: 40px;\n        opacity: 0;\n      }\n      .info-num {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e07a5f;\n        letter-spacing: 0.1em;\n      }\n      .info-name {\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-desc {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n      }\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n      }\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"14\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div\n          id=\"title-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          TRANSITION CATALOG\n        </div>\n        <div\n          id=\"title-main\"\n          style=\"font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          Destruction Transitions\n        </div>\n        <div\n          id=\"title-count\"\n          style=\"\n            font-size: 24px;\n            font-weight: 400;\n            color: rgba(255, 255, 255, 0.4);\n            margin-top: 12px;\n            opacity: 0;\n          \"\n        >\n          1 transition\n        </div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"z-index: 1\">\n        <div class=\"scene-inner\" id=\"s1\" style=\"background: #1b263b\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #778da9;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE A\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"z-index: 2; opacity: 0\">\n        <div class=\"scene-inner\" id=\"s2\" style=\"background: #e07a5f\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)\">\n            TWO\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #fff;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE B\n          </div>\n        </div>\n      </div>\n\n      <!-- Burn Canvas -->\n      <canvas\n        id=\"burn-canvas\"\n        width=\"1920\"\n        height=\"1080\"\n        style=\"position: absolute; inset: 0; z-index: 40; pointer-events: none\"\n      ></canvas>\n\n      <!-- Info Bar -->\n      <div id=\"info-1\" class=\"info-bar\">\n        <div class=\"info-num\">01</div>\n        <div class=\"info-name\">Page Burn</div>\n        <div class=\"info-desc\">Use a page burn destruction transition</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div\n          id=\"outro-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          DESTRUCTION TRANSITIONS\n        </div>\n        <div\n          id=\"outro-main\"\n          style=\"font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          1 Transition\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        // === TITLE CARD (3s) ===\n        tl.to(\"#title-label\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#title-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.fromTo(\n          \"#title-count\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          t + 1.0,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n        t += 3;\n\n        // === TRANSITION 1: Page Burn (8s total: 2s build, 3s burn, 3s settle) ===\n        tl.set(\n          \"#scene1\",\n          {\n            opacity: 1,\n            x: 0,\n            y: 0,\n            scale: 1,\n            rotation: 0,\n            filter: \"none\",\n            clipPath: \"none\",\n            zIndex: 1,\n          },\n          t,\n        );\n        tl.set(\n          \"#scene2\",\n          {\n            opacity: 0,\n            x: 0,\n            y: 0,\n            scale: 1,\n            rotation: 0,\n            filter: \"none\",\n            clipPath: \"none\",\n            zIndex: 2,\n          },\n          t,\n        );\n        tl.set(\"#s1\", { opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, filter: \"none\" }, t);\n        tl.set(\"#s2\", { opacity: 1, x: 0, y: 0, scale: 1, rotation: 0, filter: \"none\" }, t);\n\n        // Show info bar\n        tl.to(\"#info-1\", { opacity: 1, duration: 0.3 }, t + 0.2);\n\n        // Burn transition starts at t+2\n        var T = t + 2;\n\n        var burnCanvas = document.getElementById(\"burn-canvas\");\n        var burnCtx = burnCanvas.getContext(\"2d\");\n        var burnState = { progress: 0 };\n\n        function noise(x) {\n          var ix = Math.floor(x),\n            fx = x - ix;\n          var a = Math.sin(ix * 127.1 + 311.7) * 43758.5453;\n          var b = Math.sin((ix + 1) * 127.1 + 311.7) * 43758.5453;\n          var t2 = fx * fx * (3 - 2 * fx);\n          return a - Math.floor(a) + (b - Math.floor(b) - (a - Math.floor(a))) * t2;\n        }\n\n        function drawBurn(progress) {\n          burnCtx.clearRect(0, 0, 1920, 1080);\n          if (progress <= 0 || progress >= 1) return;\n\n          var maxR = 1400;\n          var cx = 960,\n            cy = 540;\n\n          // Draw fire edge glow\n          burnCtx.beginPath();\n          var steps = 60;\n          for (var i = 0; i <= steps; i++) {\n            var angle = (i / steps) * Math.PI * 2;\n            var baseR = progress * maxR;\n            var r =\n              baseR + noise(angle * 3 + progress * 4) * 80 + noise(angle * 8 + progress * 9) * 30;\n            var px = cx + Math.cos(angle) * r;\n            var py = cy + Math.sin(angle) * r;\n            if (i === 0) burnCtx.moveTo(px, py);\n            else burnCtx.lineTo(px, py);\n          }\n          burnCtx.closePath();\n\n          // Orange/red edge glow\n          var grad = burnCtx.createRadialGradient(\n            cx,\n            cy,\n            progress * maxR * 0.8,\n            cx,\n            cy,\n            progress * maxR * 1.1,\n          );\n          grad.addColorStop(0, \"rgba(0,0,0,0)\");\n          grad.addColorStop(0.7, \"rgba(255,100,0,0.6)\");\n          grad.addColorStop(0.9, \"rgba(255,50,0,0.8)\");\n          grad.addColorStop(1, \"rgba(200,30,0,0.4)\");\n          burnCtx.fillStyle = grad;\n          burnCtx.fill();\n\n          // Inner ember particles\n          var particleCount = Math.floor(progress * 40);\n          for (var p = 0; p < particleCount; p++) {\n            var pAngle = noise(p * 0.7 + progress * 2) * Math.PI * 2;\n            var pDist = progress * maxR * (0.85 + noise(p * 1.3 + progress * 5) * 0.15);\n            var ex = cx + Math.cos(pAngle) * pDist;\n            var ey = cy + Math.sin(pAngle) * pDist;\n            var pSize = 2 + noise(p * 2.1) * 4;\n            burnCtx.beginPath();\n            burnCtx.arc(ex, ey, pSize, 0, Math.PI * 2);\n            burnCtx.fillStyle =\n              \"rgba(255,\" +\n              Math.floor(80 + noise(p * 3) * 120) +\n              \",0,\" +\n              (0.4 + noise(p * 1.7) * 0.4) +\n              \")\";\n            burnCtx.fill();\n          }\n        }\n\n        // Animate burn progress over 3 seconds\n        tl.to(\n          burnState,\n          {\n            progress: 1,\n            duration: 3.0,\n            ease: \"power1.in\",\n            onUpdate: function () {\n              var p = burnState.progress;\n              drawBurn(p);\n              var scene1El = document.getElementById(\"scene1\");\n              if (p <= 0) {\n                scene1El.style.clipPath = \"none\";\n              } else if (p < 1) {\n                // Shrink scene1 with circular clip from center\n                var radius = Math.max(0, 75 - p * 80);\n                scene1El.style.clipPath = \"circle(\" + radius + \"% at 50% 50%)\";\n              } else {\n                scene1El.style.clipPath = \"circle(0% at 50% 50%)\";\n              }\n            },\n          },\n          T,\n        );\n\n        // Scene 2 fades in from behind as burn progresses\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.5);\n        tl.fromTo(\n          \"#s2\",\n          { opacity: 0 },\n          { opacity: 1, duration: 2.0, ease: \"power1.out\" },\n          T + 0.5,\n        );\n\n        // Clean up after burn completes\n        tl.set(\"#scene1\", { opacity: 0, clipPath: \"none\" }, T + 3.0);\n        tl.call(\n          function () {\n            burnCtx.clearRect(0, 0, 1920, 1080);\n          },\n          null,\n          T + 3.0,\n        );\n\n        // Settle time (hold scene B)\n        t = T + 3.0 + 2.0;\n        tl.to(\"#info-1\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === OUTRO (3s) ===\n        tl.set(\"#scene1\", { opacity: 0 }, t);\n        tl.set(\"#scene2\", { opacity: 0 }, t);\n        tl.to(\"#outro-card\", { opacity: 1, duration: 0.4, ease: \"power2.inOut\" }, t);\n        tl.to(\"#outro-label\", { opacity: 1, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#outro-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-dissolve.json b/docs/public/catalog/blocks/transitions-dissolve.json
new file mode 100644
index 0000000000..545d731907
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-dissolve.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 24px 60px;\n        display: flex;\n        align-items: center;\n        gap: 40px;\n        opacity: 0;\n      }\n      .info-num {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e07a5f;\n        letter-spacing: 0.1em;\n      }\n      .info-name {\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-desc {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n      }\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n      }\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"24\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div\n          id=\"title-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          TRANSITION CATALOG\n        </div>\n        <div\n          id=\"title-main\"\n          style=\"font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          Dissolve Transitions\n        </div>\n        <div\n          id=\"title-count\"\n          style=\"\n            font-size: 24px;\n            font-weight: 400;\n            color: rgba(255, 255, 255, 0.4);\n            margin-top: 12px;\n            opacity: 0;\n          \"\n        >\n          4 transitions\n        </div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"z-index: 1\">\n        <div class=\"scene-inner\" id=\"s1\" style=\"background: #1b263b\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #778da9;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE A\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"z-index: 2; opacity: 0\">\n        <div class=\"scene-inner\" id=\"s2\" style=\"background: #e07a5f\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)\">\n            TWO\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #fff;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE B\n          </div>\n        </div>\n      </div>\n\n      <!-- Info Bars -->\n      <div id=\"info-1\" class=\"info-bar\">\n        <div class=\"info-num\">01</div>\n        <div class=\"info-name\">Crossfade</div>\n        <div class=\"info-desc\">Use a crossfade transition</div>\n      </div>\n      <div id=\"info-2\" class=\"info-bar\">\n        <div class=\"info-num\">02</div>\n        <div class=\"info-name\">Blur Crossfade</div>\n        <div class=\"info-desc\">Use a blur crossfade transition</div>\n      </div>\n      <div id=\"info-3\" class=\"info-bar\">\n        <div class=\"info-num\">03</div>\n        <div class=\"info-name\">Focus Pull</div>\n        <div class=\"info-desc\">Use a focus pull transition</div>\n      </div>\n      <div id=\"info-4\" class=\"info-bar\">\n        <div class=\"info-num\">04</div>\n        <div class=\"info-name\">Color Dip</div>\n        <div class=\"info-desc\">Use a color dip to black transition</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div\n          id=\"outro-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          DISSOLVE TRANSITIONS\n        </div>\n        <div\n          id=\"outro-main\"\n          style=\"font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          4 Transitions\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        // === TITLE CARD (3s) ===\n        tl.to(\"#title-label\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#title-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.fromTo(\n          \"#title-count\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          t + 1.0,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n        t += 3;\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n        }\n\n        // === TRANSITION 1: Crossfade ===\n        resetScenes();\n        tl.to(\"#info-1\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        var T = t + 1.5;\n        tl.to(\"#s1\", { opacity: 0, duration: 0.5, ease: \"power2.inOut\" }, T);\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\"#s2\", { opacity: 0 }, { opacity: 1, duration: 0.5, ease: \"power2.inOut\" }, T);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-1\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 2: Blur Crossfade ===\n        resetScenes();\n        tl.to(\"#info-2\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.to(\n          \"#s1\",\n          { filter: \"blur(10px)\", scale: 1.03, opacity: 0, duration: 0.5, ease: \"power2.inOut\" },\n          T,\n        );\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\n          \"#s2\",\n          { filter: \"blur(10px)\", scale: 0.97, opacity: 0 },\n          { filter: \"blur(0px)\", scale: 1, opacity: 1, duration: 0.5, ease: \"power2.inOut\" },\n          T + 0.1,\n        );\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-2\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 3: Focus Pull ===\n        resetScenes();\n        tl.to(\"#info-3\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.to(\"#s1\", { filter: \"blur(15px)\", duration: 0.5, ease: \"power1.in\" }, T);\n        tl.to(\"#s1\", { opacity: 0, duration: 0.3, ease: \"power2.in\" }, T + 0.25);\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\n          \"#s2\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.3, ease: \"power2.out\" },\n          T + 0.25,\n        );\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-3\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 4: Color Dip ===\n        resetScenes();\n        tl.to(\"#info-4\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.to(\"#s1\", { opacity: 0, duration: 0.2, ease: \"power2.in\" }, T);\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\n          \"#s2\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.2, ease: \"power2.out\" },\n          T + 0.25,\n        );\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-4\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === OUTRO (3s) ===\n        tl.set(\"#scene1\", { opacity: 0 }, t);\n        tl.set(\"#scene2\", { opacity: 0 }, t);\n        tl.to(\"#outro-card\", { opacity: 1, duration: 0.4, ease: \"power2.inOut\" }, t);\n        tl.to(\"#outro-label\", { opacity: 1, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#outro-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-distortion.json b/docs/public/catalog/blocks/transitions-distortion.json
new file mode 100644
index 0000000000..6a13d25e82
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-distortion.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Distortion Transitions</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n      }\n\n      .scene {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      #scene1 .scene-inner {\n        background: #1b263b;\n      }\n      #scene2 .scene-inner {\n        background: #e07a5f;\n      }\n\n      .scene-num {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 200px;\n        font-weight: 900;\n        color: rgba(255, 255, 255, 0.08);\n        line-height: 1;\n      }\n      .scene-label {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 48px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.25);\n        letter-spacing: 12px;\n        text-transform: uppercase;\n        margin-top: 10px;\n      }\n\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 28px 60px;\n        opacity: 0;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n      .info-bar .info-name {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 32px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-bar .info-cat {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 18px;\n        font-weight: 500;\n        color: rgba(255, 255, 255, 0.4);\n        letter-spacing: 4px;\n        text-transform: uppercase;\n      }\n\n      /* Title / Outro */\n      #title-card,\n      #outro-card {\n        position: absolute;\n        inset: 0;\n        z-index: 200;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        background: #0d1117;\n        opacity: 0;\n      }\n      .card-title {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 72px;\n        font-weight: 800;\n        color: #fff;\n      }\n      .card-sub {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 28px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.4);\n        margin-top: 16px;\n        letter-spacing: 6px;\n        text-transform: uppercase;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"main\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"21\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      style=\"position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div class=\"card-title\">Distortion Transitions</div>\n        <div class=\"card-sub\">Glitch &bull; Chromatic &bull; Ripple</div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"opacity: 0\">\n        <div id=\"s1\" class=\"scene-inner\">\n          <div class=\"scene-num\">ONE</div>\n          <div class=\"scene-label\">Scene A</div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"opacity: 0\">\n        <div id=\"s2\" class=\"scene-inner\">\n          <div class=\"scene-num\">TWO</div>\n          <div class=\"scene-label\">Scene B</div>\n        </div>\n      </div>\n\n      <!-- RGB channel overlays for glitch/chromatic -->\n      <div\n        id=\"glitch-r\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          z-index: 30;\n          opacity: 0;\n          pointer-events: none;\n          mix-blend-mode: screen;\n        \"\n      >\n        <div\n          class=\"scene-inner\"\n          style=\"\n            background: rgba(229, 56, 59, 0.35);\n            width: 100%;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n          \"\n        >\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n        </div>\n      </div>\n      <div\n        id=\"glitch-b\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          z-index: 30;\n          opacity: 0;\n          pointer-events: none;\n          mix-blend-mode: screen;\n        \"\n      >\n        <div\n          class=\"scene-inner\"\n          style=\"\n            background: rgba(72, 191, 227, 0.35);\n            width: 100%;\n            height: 100%;\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            flex-direction: column;\n          \"\n        >\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n        </div>\n      </div>\n\n      <!-- Info Bars -->\n      <div id=\"info1\" class=\"info-bar\">\n        <div class=\"info-name\">Glitch</div>\n        <div class=\"info-cat\">Distortion</div>\n      </div>\n      <div id=\"info2\" class=\"info-bar\">\n        <div class=\"info-name\">Chromatic Aberration</div>\n        <div class=\"info-cat\">Distortion</div>\n      </div>\n      <div id=\"info3\" class=\"info-bar\">\n        <div class=\"info-name\">Ripple</div>\n        <div class=\"info-cat\">Distortion</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div class=\"card-title\">Distortion Transitions</div>\n        <div class=\"card-sub\">End</div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ defaults: { ease: \"none\" } });\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n\n        function resetScenes() {\n          tl.set(\"#scene1\", { opacity: 1 });\n          tl.set(\"#scene2\", { opacity: 0 });\n          tl.set(\"#s1\", { x: 0, y: 0, scale: 1, filter: \"blur(0px)\", opacity: 1 });\n          tl.set(\"#s2\", { x: 0, y: 0, scale: 1, filter: \"blur(0px)\", opacity: 1 });\n          tl.set(\"#glitch-r\", { opacity: 0, x: 0, y: 0 });\n          tl.set(\"#glitch-b\", { opacity: 0, x: 0, y: 0 });\n        }\n\n        // ===== TITLE CARD (0–3s) =====\n        tl.set(\"#title-card\", { opacity: 1 }, 0);\n        tl.fromTo(\n          \".card-title\",\n          { y: 30, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.6, ease: \"power2.out\" },\n          0.4,\n        );\n        tl.fromTo(\n          \".card-sub\",\n          { y: 20, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.5, ease: \"power2.out\" },\n          0.8,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.in\" }, 2.6);\n\n        // ===== DEMO 1: Glitch (3–8s) =====\n        var T;\n\n        // Reset & show scene A\n        tl.call(function () {}, [], 3);\n        resetScenes();\n\n        // Show info bar\n        tl.to(\"#info1\", { opacity: 1, duration: 0.3, ease: \"power2.out\" }, 3);\n\n        // Hold 1.5s, transition at T=4.5\n        T = 4.5;\n\n        // Glitch transition\n        tl.set(\"#glitch-r\", { opacity: 1, x: 40, y: -8 }, T);\n        tl.set(\"#glitch-b\", { opacity: 1, x: -30, y: 12 }, T);\n        tl.set(\"#s1\", { x: -15 }, T);\n\n        tl.set(\"#glitch-r\", { x: -30, y: 15 }, T + 0.03);\n        tl.set(\"#glitch-b\", { x: 50, y: -10 }, T + 0.03);\n        tl.set(\"#s1\", { x: 20 }, T + 0.03);\n\n        tl.set(\"#glitch-r\", { x: 60, y: -20 }, T + 0.06);\n        tl.set(\"#glitch-b\", { x: -40, y: 8 }, T + 0.06);\n        tl.set(\"#s1\", { x: -25 }, T + 0.06);\n\n        tl.set(\"#glitch-r\", { x: -20, y: 5 }, T + 0.09);\n        tl.set(\"#glitch-b\", { x: 35, y: -15 }, T + 0.09);\n\n        // Swap at T + 0.12\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.12);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.12);\n\n        // Clear\n        tl.set(\"#glitch-r\", { opacity: 0, x: 0, y: 0 }, T + 0.15);\n        tl.set(\"#glitch-b\", { opacity: 0, x: 0, y: 0 }, T + 0.15);\n        tl.set(\"#s1\", { x: 0 }, T + 0.15);\n\n        // Hold 1.0s, hide info, gap 0.5s\n        tl.to(\"#info1\", { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 7.0);\n\n        // ===== DEMO 2: Chromatic Aberration (8–13s) =====\n        tl.call(function () {}, [], 8);\n        resetScenes();\n\n        tl.to(\"#info2\", { opacity: 1, duration: 0.3, ease: \"power2.out\" }, 8);\n\n        T = 9.5;\n\n        // Chromatic aberration transition\n        tl.set(\"#glitch-r\", { opacity: 0.6, x: 0 }, T);\n        tl.set(\"#glitch-b\", { opacity: 0.6, x: 0 }, T);\n        tl.to(\"#glitch-r\", { x: -80, opacity: 0.8, duration: 0.3, ease: \"power2.in\" }, T);\n        tl.to(\"#glitch-b\", { x: 80, opacity: 0.8, duration: 0.3, ease: \"power2.in\" }, T);\n\n        // Swap\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.3);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.3);\n\n        // Converge back\n        tl.to(\"#glitch-r\", { x: 0, opacity: 0, duration: 0.3, ease: \"power2.out\" }, T + 0.3);\n        tl.to(\"#glitch-b\", { x: 0, opacity: 0, duration: 0.3, ease: \"power2.out\" }, T + 0.3);\n\n        tl.to(\"#info2\", { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 12.0);\n\n        // ===== DEMO 3: Ripple (13–18s) =====\n        tl.call(function () {}, [], 13);\n        resetScenes();\n\n        tl.to(\"#info3\", { opacity: 1, duration: 0.3, ease: \"power2.out\" }, 13);\n\n        T = 14.5;\n\n        // Ripple distortion transition\n        tl.to(\"#s1\", { x: 30, scale: 1.02, duration: 0.04, ease: \"none\" }, T);\n        tl.to(\n          \"#s1\",\n          { x: -25, scale: 0.98, filter: \"blur(4px)\", duration: 0.04, ease: \"none\" },\n          T + 0.04,\n        );\n        tl.to(\n          \"#s1\",\n          { x: 20, scale: 1.01, filter: \"blur(6px)\", duration: 0.04, ease: \"none\" },\n          T + 0.08,\n        );\n        tl.to(\n          \"#s1\",\n          { x: -15, scale: 0.99, filter: \"blur(8px)\", duration: 0.04, ease: \"none\" },\n          T + 0.12,\n        );\n        tl.to(\n          \"#s1\",\n          { x: 10, opacity: 0, filter: \"blur(10px)\", duration: 0.04, ease: \"none\" },\n          T + 0.16,\n        );\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.16);\n        tl.fromTo(\n          \"#s2\",\n          { x: -15, scale: 1.02, filter: \"blur(8px)\" },\n          { x: 0, scale: 1, filter: \"blur(0px)\", duration: 0.2, ease: \"power2.out\" },\n          T + 0.2,\n        );\n\n        tl.to(\"#info3\", { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 17.0);\n\n        // ===== OUTRO (18–21s) =====\n        tl.set(\"#scene1\", { opacity: 0 }, 18);\n        tl.set(\"#scene2\", { opacity: 0 }, 18);\n        tl.set(\"#outro-card\", { opacity: 1 }, 18);\n        tl.fromTo(\n          \"#outro-card .card-title\",\n          { y: 30, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.6, ease: \"power2.out\" },\n          18.3,\n        );\n        tl.fromTo(\n          \"#outro-card .card-sub\",\n          { y: 20, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.5, ease: \"power2.out\" },\n          18.7,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.in\" }, 20.5);\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-grid.json b/docs/public/catalog/blocks/transitions-grid.json
new file mode 100644
index 0000000000..4eb8451976
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-grid.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Grid Transitions</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n      }\n\n      .scene {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      #scene1 .scene-inner {\n        background: #1b263b;\n      }\n      #scene2 .scene-inner {\n        background: #e07a5f;\n      }\n\n      .scene-num {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 200px;\n        font-weight: 900;\n        color: rgba(255, 255, 255, 0.08);\n        line-height: 1;\n      }\n      .scene-label {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 48px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.25);\n        letter-spacing: 12px;\n        text-transform: uppercase;\n        margin-top: 10px;\n      }\n\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 28px 60px;\n        opacity: 0;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n      }\n      .info-bar .info-name {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 32px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-bar .info-cat {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 18px;\n        font-weight: 500;\n        color: rgba(255, 255, 255, 0.4);\n        letter-spacing: 4px;\n        text-transform: uppercase;\n      }\n\n      /* Title / Outro */\n      #title-card,\n      #outro-card {\n        position: absolute;\n        inset: 0;\n        z-index: 200;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        background: #0d1117;\n        opacity: 0;\n      }\n      .card-title {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 72px;\n        font-weight: 800;\n        color: #fff;\n      }\n      .card-sub {\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n        font-size: 28px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.4);\n        margin-top: 16px;\n        letter-spacing: 6px;\n        text-transform: uppercase;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"main\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"11\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      style=\"position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div class=\"card-title\">Grid Transitions</div>\n        <div class=\"card-sub\">Grid Dissolve</div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"opacity: 0\">\n        <div id=\"s1\" class=\"scene-inner\">\n          <div class=\"scene-num\">ONE</div>\n          <div class=\"scene-label\">Scene A</div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"opacity: 0\">\n        <div id=\"s2\" class=\"scene-inner\">\n          <div class=\"scene-num\">TWO</div>\n          <div class=\"scene-label\">Scene B</div>\n        </div>\n      </div>\n\n      <!-- Grid container -->\n      <div\n        id=\"grid-container\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          z-index: 50;\n          pointer-events: none;\n          display: grid;\n          grid-template-columns: repeat(4, 480px);\n          grid-template-rows: repeat(3, 360px);\n        \"\n      ></div>\n\n      <!-- Info Bar -->\n      <div id=\"info1\" class=\"info-bar\">\n        <div class=\"info-name\">Grid Dissolve</div>\n        <div class=\"info-cat\">Grid</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div class=\"card-title\">Grid Transitions</div>\n        <div class=\"card-sub\">End</div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ defaults: { ease: \"none\" } });\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n\n        // Generate grid cells\n        var gridColors = [\n          \"#F72585\",\n          \"#7209B7\",\n          \"#3A0CA3\",\n          \"#4361EE\",\n          \"#4CC9F0\",\n          \"#F72585\",\n          \"#7209B7\",\n          \"#3A0CA3\",\n          \"#4361EE\",\n          \"#4CC9F0\",\n          \"#F72585\",\n          \"#7209B7\",\n        ];\n        var gridHTML = \"\";\n        for (var g = 0; g < 12; g++) {\n          gridHTML +=\n            '<div id=\"cell-' +\n            g +\n            '\" style=\"background:' +\n            gridColors[g % gridColors.length] +\n            '; opacity:0;\"></div>';\n        }\n        document.getElementById(\"grid-container\").innerHTML = gridHTML;\n\n        function resetScenes() {\n          tl.set(\"#scene1\", { opacity: 1 });\n          tl.set(\"#scene2\", { opacity: 0 });\n          tl.set(\"#s1\", { x: 0, y: 0, scale: 1, filter: \"blur(0px)\", opacity: 1 });\n          tl.set(\"#s2\", { x: 0, y: 0, scale: 1, filter: \"blur(0px)\", opacity: 1 });\n          for (var g = 0; g < 12; g++) {\n            tl.set(\"#cell-\" + g, { opacity: 0 });\n          }\n        }\n\n        // ===== TITLE CARD (0–3s) =====\n        tl.set(\"#title-card\", { opacity: 1 }, 0);\n        tl.fromTo(\n          \".card-title\",\n          { y: 30, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.6, ease: \"power2.out\" },\n          0.4,\n        );\n        tl.fromTo(\n          \".card-sub\",\n          { y: 20, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.5, ease: \"power2.out\" },\n          0.8,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.in\" }, 2.6);\n\n        // ===== DEMO 1: Grid Dissolve (3–8s) =====\n        var T;\n\n        tl.call(function () {}, [], 3);\n        resetScenes();\n\n        // Show info bar\n        tl.to(\"#info1\", { opacity: 1, duration: 0.3, ease: \"power2.out\" }, 3);\n\n        // Hold 1.5s, transition at T=4.5\n        T = 4.5;\n\n        // Cell positions (col, row) and distance from center (1.5, 1)\n        var cells = [];\n        for (var g = 0; g < 12; g++) {\n          var col = g % 4;\n          var row = Math.floor(g / 4);\n          var dist = Math.sqrt(Math.pow(col - 1.5, 2) + Math.pow(row - 1, 2));\n          cells.push({ id: g, dist: dist });\n        }\n        cells.sort(function (a, b) {\n          return a.dist - b.dist;\n        });\n\n        // Ripple in from center\n        var stag = 0.04;\n        for (var c = 0; c < cells.length; c++) {\n          tl.to(\n            \"#cell-\" + cells[c].id,\n            { opacity: 1, duration: 0.15, ease: \"power2.out\" },\n            T + c * stag,\n          );\n        }\n\n        // Swap scenes at midpoint\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.35);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.35);\n\n        // Ripple out\n        for (var c = 0; c < cells.length; c++) {\n          tl.to(\n            \"#cell-\" + cells[c].id,\n            { opacity: 0, duration: 0.15, ease: \"power2.in\" },\n            T + 0.5 + c * stag,\n          );\n        }\n\n        // Hold 1.0s, hide info, gap 0.5s\n        tl.to(\"#info1\", { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 7.0);\n\n        // ===== OUTRO (8–11s) =====\n        tl.set(\"#scene1\", { opacity: 0 }, 8);\n        tl.set(\"#scene2\", { opacity: 0 }, 8);\n        tl.set(\"#outro-card\", { opacity: 1 }, 8);\n        tl.fromTo(\n          \"#outro-card .card-title\",\n          { y: 30, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.6, ease: \"power2.out\" },\n          8.3,\n        );\n        tl.fromTo(\n          \"#outro-card .card-sub\",\n          { y: 20, opacity: 0 },\n          { y: 0, opacity: 1, duration: 0.5, ease: \"power2.out\" },\n          8.7,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.in\" }, 10.5);\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-light.json b/docs/public/catalog/blocks/transitions-light.json
new file mode 100644
index 0000000000..822df058b0
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-light.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>Light Transitions Showcase</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n\n      /* Title Card */\n      #title-card {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        opacity: 1;\n      }\n      #title-card h1 {\n        font-size: 72px;\n        font-weight: 800;\n        color: #fff;\n        letter-spacing: -1px;\n        opacity: 0;\n        transform: translateY(30px);\n      }\n      #title-card .subtitle {\n        font-size: 28px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.5);\n        margin-top: 12px;\n        opacity: 0;\n        transform: translateY(20px);\n      }\n\n      /* Scenes */\n      #scene1,\n      #scene2 {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n      }\n      #scene1 {\n        background: #1b263b;\n        z-index: 2;\n        opacity: 0;\n      }\n      #scene2 {\n        background: #e07a5f;\n        z-index: 1;\n        opacity: 0;\n      }\n\n      .scene-number {\n        font-size: 180px;\n        font-weight: 900;\n        line-height: 1;\n        opacity: 0.12;\n        letter-spacing: -6px;\n      }\n      #scene1 .scene-number {\n        color: #fff;\n      }\n      #scene2 .scene-number {\n        color: #000;\n      }\n\n      .scene-label {\n        font-size: 48px;\n        font-weight: 700;\n        margin-top: -20px;\n      }\n      #scene1 .scene-label {\n        color: #fff;\n      }\n      #scene2 .scene-label {\n        color: #fff;\n      }\n\n      /* Info bar */\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 80px;\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 0 48px;\n      }\n      #scene1 .info-bar {\n        background: rgba(0, 0, 0, 0.3);\n      }\n      #scene2 .info-bar {\n        background: rgba(0, 0, 0, 0.2);\n      }\n      .info-bar .label {\n        font-size: 18px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.7);\n        text-transform: uppercase;\n        letter-spacing: 2px;\n      }\n      .info-bar .desc {\n        font-size: 16px;\n        color: rgba(255, 255, 255, 0.5);\n        font-style: italic;\n      }\n\n      /* Outro */\n      #outro {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        background: linear-gradient(135deg, #0d1b2a 0%, #1b263b 100%);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n      }\n      #outro h2 {\n        font-size: 56px;\n        font-weight: 800;\n        color: #fff;\n        opacity: 0;\n        transform: translateY(20px);\n      }\n      #outro .tag {\n        font-size: 22px;\n        color: rgba(255, 255, 255, 0.4);\n        margin-top: 10px;\n        opacity: 0;\n        transform: translateY(15px);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"comp\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"21\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      style=\"position: relative; width: 1920px; height: 1080px; overflow: hidden; background: #000\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <h1 id=\"title-h1\">Light Transitions</h1>\n        <div class=\"subtitle\" id=\"title-sub\">3 transition styles</div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\">\n        <div class=\"scene-number\">ONE</div>\n        <div class=\"scene-label\">SCENE A</div>\n        <div class=\"info-bar\">\n          <span class=\"label\" id=\"info-label-a\"></span>\n          <span class=\"desc\" id=\"info-desc-a\"></span>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\">\n        <div class=\"scene-number\">TWO</div>\n        <div class=\"scene-label\">SCENE B</div>\n        <div class=\"info-bar\">\n          <span class=\"label\" id=\"info-label-b\"></span>\n          <span class=\"desc\" id=\"info-desc-b\"></span>\n        </div>\n      </div>\n\n      <!-- Light Leak Overlays -->\n      <div\n        id=\"leak-warm\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), transparent 60%);\n          z-index: 50;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n      <div\n        id=\"leak-1\"\n        style=\"\n          position: absolute;\n          top: -200px;\n          left: -400px;\n          width: 2400px;\n          height: 1500px;\n          background: radial-gradient(ellipse at 30% 40%, rgba(255, 140, 0, 0.5), transparent 50%);\n          z-index: 51;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n      <div\n        id=\"leak-2\"\n        style=\"\n          position: absolute;\n          top: -100px;\n          left: -200px;\n          width: 2400px;\n          height: 1400px;\n          background: radial-gradient(ellipse at 60% 50%, rgba(255, 200, 0, 0.4), transparent 50%);\n          z-index: 51;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n\n      <!-- Flash Overlay -->\n      <div\n        id=\"flash-overlay\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          background: #fff;\n          z-index: 50;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n\n      <!-- Film Burn Overlays -->\n      <div\n        id=\"burn-a\"\n        style=\"\n          position: absolute;\n          top: -300px;\n          right: -800px;\n          width: 2400px;\n          height: 1800px;\n          background: radial-gradient(ellipse at 70% 40%, rgba(255, 100, 0, 0.5), transparent 50%);\n          z-index: 51;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n      <div\n        id=\"burn-b\"\n        style=\"\n          position: absolute;\n          top: -200px;\n          right: -600px;\n          width: 2400px;\n          height: 1600px;\n          background: radial-gradient(ellipse at 80% 50%, rgba(255, 160, 0, 0.4), transparent 50%);\n          z-index: 51;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n      <div\n        id=\"burn-c\"\n        style=\"\n          position: absolute;\n          top: -100px;\n          right: -500px;\n          width: 2200px;\n          height: 1400px;\n          background: radial-gradient(ellipse at 60% 60%, rgba(255, 200, 50, 0.3), transparent 50%);\n          z-index: 51;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n\n      <!-- Outro -->\n      <div id=\"outro\">\n        <h2 id=\"outro-h2\">Light Transitions</h2>\n        <div class=\"tag\" id=\"outro-tag\">End of showcase</div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: false });\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n\n        // Transition demos config\n        var demos = [\n          { label: \"LIGHT LEAK\", desc: \"Use a light leak transition with warm overlays\" },\n          { label: \"OVEREXPOSURE BURN\", desc: \"Use an overexposure burn transition\" },\n          { label: \"FILM BURN\", desc: \"Use a film burn transition with warm edge bleeds\" },\n        ];\n\n        // Reset scenes helper\n        function resetScenes(t, demoIndex) {\n          tl.set(\"#scene1\", { opacity: 1, filter: \"none\", scale: 1 }, t);\n          tl.set(\"#scene2\", { opacity: 0 }, t);\n          tl.set(\"#info-label-a\", { textContent: demos[demoIndex].label }, t);\n          tl.set(\"#info-desc-a\", { textContent: demos[demoIndex].desc }, t);\n          tl.set(\"#info-label-b\", { textContent: demos[demoIndex].label }, t);\n          tl.set(\"#info-desc-b\", { textContent: demos[demoIndex].desc }, t);\n          // Reset light leak overlays\n          tl.set(\"#leak-warm\", { opacity: 0 }, t);\n          tl.set(\"#leak-1\", { opacity: 0, x: 0 }, t);\n          tl.set(\"#leak-2\", { opacity: 0, x: 0 }, t);\n          // Reset flash\n          tl.set(\"#flash-overlay\", { opacity: 0 }, t);\n          // Reset burn overlays\n          tl.set(\"#burn-a\", { opacity: 0, x: 0 }, t);\n          tl.set(\"#burn-b\", { opacity: 0, x: 0 }, t);\n          tl.set(\"#burn-c\", { opacity: 0, x: 0 }, t);\n        }\n\n        // ===== TITLE CARD (0s - 3s) =====\n        tl.to(\"#title-h1\", { opacity: 1, y: 0, duration: 0.6, ease: \"power2.out\" }, 0.3);\n        tl.to(\"#title-sub\", { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" }, 0.6);\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power1.inOut\" }, 2.5);\n\n        // ===== DEMO 1: LIGHT LEAK (3s - 8s) =====\n        var T1 = 3;\n        resetScenes(T1, 0);\n        var T = T1 + 2;\n        tl.to(\"#leak-warm\", { opacity: 0.4, duration: 0.3, ease: \"power1.in\" }, T);\n        tl.to(\"#leak-1\", { opacity: 0.9, x: 300, duration: 0.5, ease: \"sine.inOut\" }, T + 0.05);\n        tl.to(\"#leak-2\", { opacity: 0.8, x: 200, duration: 0.6, ease: \"sine.inOut\" }, T + 0.1);\n        tl.to(\"#leak-warm\", { opacity: 0.6, duration: 0.15, ease: \"power2.in\" }, T + 0.35);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.45);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.45);\n        tl.to(\"#leak-warm\", { opacity: 0, duration: 0.4, ease: \"power2.out\" }, T + 0.5);\n        tl.to(\"#leak-1\", { opacity: 0, x: 600, duration: 0.35, ease: \"power1.out\" }, T + 0.5);\n        tl.to(\"#leak-2\", { opacity: 0, x: 400, duration: 0.35, ease: \"power1.out\" }, T + 0.55);\n\n        // ===== DEMO 2: OVEREXPOSURE BURN (8s - 13s) =====\n        var T2 = 8;\n        resetScenes(T2, 1);\n        T = T2 + 2;\n        tl.to(\n          \"#scene1\",\n          { filter: \"brightness(1.5)\", scale: 1.03, duration: 0.2, ease: \"power1.in\" },\n          T,\n        );\n        tl.to(\n          \"#scene1\",\n          { filter: \"brightness(3)\", scale: 1.06, duration: 0.2, ease: \"power2.in\" },\n          T + 0.2,\n        );\n        tl.to(\"#flash-overlay\", { opacity: 0.5, duration: 0.25, ease: \"power1.in\" }, T + 0.15);\n        tl.to(\"#flash-overlay\", { opacity: 1, duration: 0.15, ease: \"power2.in\" }, T + 0.4);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.55);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.55);\n        tl.set(\"#scene1\", { filter: \"none\", scale: 1 }, T + 0.55);\n        tl.to(\"#flash-overlay\", { opacity: 0, duration: 0.35, ease: \"power2.out\" }, T + 0.55);\n\n        // ===== DEMO 3: FILM BURN (13s - 18s) =====\n        var T3 = 13;\n        resetScenes(T3, 2);\n        T = T3 + 2;\n        tl.to(\"#burn-a\", { opacity: 1, x: -300, duration: 0.4, ease: \"power1.in\" }, T);\n        tl.to(\"#burn-b\", { opacity: 1, x: -500, duration: 0.5, ease: \"power1.in\" }, T + 0.05);\n        tl.to(\"#burn-c\", { opacity: 1, x: -200, duration: 0.45, ease: \"power1.in\" }, T + 0.1);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.35);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.35);\n        tl.to(\"#burn-a\", { opacity: 0, duration: 0.3, ease: \"power2.out\" }, T + 0.45);\n        tl.to(\"#burn-b\", { opacity: 0, duration: 0.3, ease: \"power2.out\" }, T + 0.5);\n        tl.to(\"#burn-c\", { opacity: 0, duration: 0.3, ease: \"power2.out\" }, T + 0.55);\n\n        // ===== OUTRO (18s - 21s) =====\n        tl.to(\"#scene1\", { opacity: 0, duration: 0.3 }, 18);\n        tl.to(\"#scene2\", { opacity: 0, duration: 0.3 }, 18);\n        tl.to(\"#outro\", { opacity: 1, duration: 0.4, ease: \"power1.inOut\" }, 18.2);\n        tl.to(\"#outro-h2\", { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" }, 18.5);\n        tl.to(\"#outro-tag\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, 18.8);\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-mechanical.json b/docs/public/catalog/blocks/transitions-mechanical.json
new file mode 100644
index 0000000000..746ff12240
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-mechanical.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 24px 60px;\n        display: flex;\n        align-items: center;\n        gap: 40px;\n        opacity: 0;\n      }\n      .info-num {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e07a5f;\n        letter-spacing: 0.1em;\n      }\n      .info-name {\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-desc {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n      }\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n      }\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"15\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div\n          id=\"title-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          TRANSITION CATALOG\n        </div>\n        <div\n          id=\"title-main\"\n          style=\"font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          Mechanical Transitions\n        </div>\n        <div\n          id=\"title-count\"\n          style=\"\n            font-size: 24px;\n            font-weight: 400;\n            color: rgba(255, 255, 255, 0.4);\n            margin-top: 12px;\n            opacity: 0;\n          \"\n        >\n          2 transitions\n        </div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"z-index: 1\">\n        <div class=\"scene-inner\" id=\"s1\" style=\"background: #1b263b\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #778da9;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE A\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"z-index: 2; opacity: 0\">\n        <div class=\"scene-inner\" id=\"s2\" style=\"background: #e07a5f\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)\">\n            TWO\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #fff;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE B\n          </div>\n        </div>\n      </div>\n\n      <!-- Shutter Halves -->\n      <div\n        id=\"shutter-top\"\n        style=\"\n          position: absolute;\n          top: -540px;\n          left: 0;\n          width: 1920px;\n          height: 540px;\n          background: #111;\n          z-index: 50;\n        \"\n      ></div>\n      <div\n        id=\"shutter-bot\"\n        style=\"\n          position: absolute;\n          bottom: -540px;\n          left: 0;\n          width: 1920px;\n          height: 540px;\n          background: #111;\n          z-index: 50;\n        \"\n      ></div>\n\n      <!-- Info Bars -->\n      <div id=\"info-1\" class=\"info-bar\">\n        <div class=\"info-num\">01</div>\n        <div class=\"info-name\">Shutter</div>\n        <div class=\"info-desc\">Use a shutter close/open transition</div>\n      </div>\n      <div id=\"info-2\" class=\"info-bar\">\n        <div class=\"info-num\">02</div>\n        <div class=\"info-name\">Clock Wipe</div>\n        <div class=\"info-desc\">Use a clock wipe transition</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div\n          id=\"outro-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          MECHANICAL TRANSITIONS\n        </div>\n        <div\n          id=\"outro-main\"\n          style=\"font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          2 Transitions\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        // === TITLE CARD (3s) ===\n        tl.to(\"#title-label\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#title-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.fromTo(\n          \"#title-count\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          t + 1.0,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n        t += 3;\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n          tl.set(\"#shutter-top\", { y: 0 }, t);\n          tl.set(\"#shutter-bot\", { y: 0 }, t);\n        }\n\n        // === TRANSITION 1: Shutter ===\n        resetScenes();\n        tl.to(\"#info-1\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        var T = t + 1.5;\n        tl.to(\"#shutter-top\", { y: 540, duration: 0.25, ease: \"power3.in\" }, T);\n        tl.to(\"#shutter-bot\", { y: -540, duration: 0.25, ease: \"power3.in\" }, T);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.25);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.25);\n        tl.to(\"#shutter-top\", { y: 0, duration: 0.25, ease: \"power3.out\" }, T + 0.3);\n        tl.to(\"#shutter-bot\", { y: 0, duration: 0.25, ease: \"power3.out\" }, T + 0.3);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-1\", { opacity: 0, duration: 0.2 }, t);\n        // Reset shutters after demo\n        tl.set(\"#shutter-top\", { y: 0 }, t + 0.2);\n        tl.set(\"#shutter-bot\", { y: 0 }, t + 0.2);\n        t += 0.5;\n\n        // === TRANSITION 2: Clock Wipe ===\n        resetScenes();\n        tl.to(\"#info-2\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        var d = 0.1;\n        tl.set(\n          \"#scene2\",\n          {\n            opacity: 1,\n            zIndex: 10,\n            clipPath:\n              \"polygon(50% 50%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%, 50% 0%)\",\n          },\n          T,\n        );\n        tl.to(\n          \"#scene2\",\n          {\n            clipPath:\n              \"polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 50%)\",\n            duration: d,\n            ease: \"none\",\n          },\n          T,\n        );\n        tl.to(\n          \"#scene2\",\n          {\n            clipPath:\n              \"polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 50% 100%, 50% 100%)\",\n            duration: d,\n            ease: \"none\",\n          },\n          T + d,\n        );\n        tl.to(\n          \"#scene2\",\n          {\n            clipPath:\n              \"polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 50%)\",\n            duration: d,\n            ease: \"none\",\n          },\n          T + d * 2,\n        );\n        tl.to(\n          \"#scene2\",\n          {\n            clipPath:\n              \"polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%, 100% 100%, 50% 100%, 0% 100%, 0% 50%, 0% 0%)\",\n            duration: d,\n            ease: \"none\",\n          },\n          T + d * 3,\n        );\n        tl.set(\"#scene2\", { clipPath: \"none\", zIndex: 2 }, T + d * 4 + 0.02);\n        tl.set(\"#scene1\", { opacity: 0 }, T + d * 4 + 0.02);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-2\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === OUTRO (3s) ===\n        tl.set(\"#scene1\", { opacity: 0 }, t);\n        tl.set(\"#scene2\", { opacity: 0 }, t);\n        tl.to(\"#outro-card\", { opacity: 1, duration: 0.4, ease: \"power2.inOut\" }, t);\n        tl.to(\"#outro-label\", { opacity: 1, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#outro-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-other.json b/docs/public/catalog/blocks/transitions-other.json
new file mode 100644
index 0000000000..992615b992
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-other.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 24px 60px;\n        display: flex;\n        align-items: center;\n        gap: 40px;\n        opacity: 0;\n      }\n      .info-num {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e07a5f;\n        letter-spacing: 0.1em;\n      }\n      .info-name {\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-desc {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n      }\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n      }\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"20\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div\n          id=\"title-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          TRANSITION CATALOG\n        </div>\n        <div\n          id=\"title-main\"\n          style=\"font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          Other Transitions\n        </div>\n        <div\n          id=\"title-count\"\n          style=\"\n            font-size: 24px;\n            font-weight: 400;\n            color: rgba(255, 255, 255, 0.4);\n            margin-top: 12px;\n            opacity: 0;\n          \"\n        >\n          3 transitions\n        </div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"z-index: 1\">\n        <div class=\"scene-inner\" id=\"s1\" style=\"background: #1b263b\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #778da9;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE A\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"z-index: 2; opacity: 0\">\n        <div class=\"scene-inner\" id=\"s2\" style=\"background: #e07a5f\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)\">\n            TWO\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #fff;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE B\n          </div>\n        </div>\n      </div>\n\n      <!-- Flash Overlay -->\n      <div\n        id=\"flash-overlay\"\n        style=\"\n          position: absolute;\n          inset: 0;\n          background: #fff;\n          z-index: 50;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      ></div>\n\n      <!-- Morph Circle -->\n      <div\n        id=\"morph-circle\"\n        style=\"\n          position: absolute;\n          top: 50%;\n          left: 50%;\n          width: 50px;\n          height: 50px;\n          border-radius: 50%;\n          transform: translate(-50%, -50%) scale(0);\n          z-index: 50;\n          opacity: 0;\n          pointer-events: none;\n          background: #e07a5f;\n        \"\n      ></div>\n\n      <!-- Info Bars -->\n      <div id=\"info-1\" class=\"info-bar\">\n        <div class=\"info-num\">01</div>\n        <div class=\"info-name\">Flash Cut</div>\n        <div class=\"info-desc\">Use a flash cut transition</div>\n      </div>\n      <div id=\"info-2\" class=\"info-bar\">\n        <div class=\"info-num\">02</div>\n        <div class=\"info-name\">Gravity Drop</div>\n        <div class=\"info-desc\">Use a gravity drop transition</div>\n      </div>\n      <div id=\"info-3\" class=\"info-bar\">\n        <div class=\"info-num\">03</div>\n        <div class=\"info-name\">Morph Circle</div>\n        <div class=\"info-desc\">Use a morph circle expanding transition</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div\n          id=\"outro-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          OTHER TRANSITIONS\n        </div>\n        <div\n          id=\"outro-main\"\n          style=\"font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          3 Transitions\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        // === TITLE CARD (3s) ===\n        tl.to(\"#title-label\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#title-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.fromTo(\n          \"#title-count\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          t + 1.0,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n        t += 3;\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n        }\n\n        // === TRANSITION 1: Flash Cut ===\n        resetScenes();\n        tl.to(\"#info-1\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        var T = t + 1.5;\n        tl.to(\"#flash-overlay\", { opacity: 1, duration: 0.03, ease: \"power4.out\" }, T);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.03);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.03);\n        tl.to(\"#flash-overlay\", { opacity: 0, duration: 0.1, ease: \"power2.out\" }, T + 0.05);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-1\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 2: Gravity Drop ===\n        resetScenes();\n        tl.to(\"#info-2\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.set(\"#scene2\", { opacity: 1, zIndex: 1 }, T);\n        tl.set(\"#scene1\", { zIndex: 10 }, T);\n        tl.to(\"#s1\", { y: 1200, rotation: 4, duration: 0.5, ease: \"power3.in\" }, T);\n        tl.set(\"#scene1\", { opacity: 0, zIndex: 1 }, T + 0.55);\n        tl.set(\"#scene2\", { zIndex: 2 }, T + 0.55);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-2\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 3: Morph Circle ===\n        resetScenes();\n        tl.to(\"#info-3\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.set(\"#morph-circle\", { opacity: 1, scale: 0 }, T);\n        tl.to(\"#morph-circle\", { scale: 60, duration: 0.5, ease: \"power3.in\" }, T);\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.4);\n        tl.set(\"#scene2\", { opacity: 1 }, T + 0.4);\n        tl.to(\"#morph-circle\", { opacity: 0, duration: 0.15, ease: \"power2.out\" }, T + 0.5);\n        tl.set(\"#morph-circle\", { scale: 0 }, T + 0.7);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-3\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === OUTRO (3s) ===\n        tl.set(\"#scene1\", { opacity: 0 }, t);\n        tl.set(\"#scene2\", { opacity: 0 }, t);\n        tl.to(\"#outro-card\", { opacity: 1, duration: 0.4, ease: \"power2.inOut\" }, t);\n        tl.to(\"#outro-label\", { opacity: 1, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#outro-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-push.json b/docs/public/catalog/blocks/transitions-push.json
new file mode 100644
index 0000000000..01dd870787
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-push.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 24px 60px;\n        display: flex;\n        align-items: center;\n        gap: 40px;\n        opacity: 0;\n      }\n      .info-num {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e07a5f;\n        letter-spacing: 0.1em;\n      }\n      .info-name {\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-desc {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n      }\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n      }\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"24\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div\n          id=\"title-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          TRANSITION CATALOG\n        </div>\n        <div\n          id=\"title-main\"\n          style=\"font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          Push Transitions\n        </div>\n        <div\n          id=\"title-count\"\n          style=\"\n            font-size: 24px;\n            font-weight: 400;\n            color: rgba(255, 255, 255, 0.4);\n            margin-top: 12px;\n            opacity: 0;\n          \"\n        >\n          4 transitions\n        </div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"z-index: 1\">\n        <div class=\"scene-inner\" id=\"s1\" style=\"background: #1b263b\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #778da9;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE A\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"z-index: 2; opacity: 0\">\n        <div class=\"scene-inner\" id=\"s2\" style=\"background: #e07a5f\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)\">\n            TWO\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #fff;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE B\n          </div>\n        </div>\n      </div>\n\n      <!-- Info Bars -->\n      <div id=\"info-1\" class=\"info-bar\">\n        <div class=\"info-num\">01</div>\n        <div class=\"info-name\">Push Slide</div>\n        <div class=\"info-desc\">Use a push slide transition</div>\n      </div>\n      <div id=\"info-2\" class=\"info-bar\">\n        <div class=\"info-num\">02</div>\n        <div class=\"info-name\">Vertical Push</div>\n        <div class=\"info-desc\">Use a vertical push transition</div>\n      </div>\n      <div id=\"info-3\" class=\"info-bar\">\n        <div class=\"info-num\">03</div>\n        <div class=\"info-name\">Elastic Push</div>\n        <div class=\"info-desc\">Use an elastic push transition with overshoot</div>\n      </div>\n      <div id=\"info-4\" class=\"info-bar\">\n        <div class=\"info-num\">04</div>\n        <div class=\"info-name\">Squeeze</div>\n        <div class=\"info-desc\">Use a squeeze transition</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div\n          id=\"outro-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          PUSH TRANSITIONS\n        </div>\n        <div\n          id=\"outro-main\"\n          style=\"font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          4 Transitions\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        // === TITLE CARD (3s) ===\n        tl.to(\"#title-label\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#title-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.fromTo(\n          \"#title-count\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          t + 1.0,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n        t += 3;\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n        }\n\n        // === TRANSITION 1: Push Slide ===\n        resetScenes();\n        tl.to(\"#info-1\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        var T = t + 1.5;\n        tl.to(\"#s1\", { x: -1920, duration: 0.5, ease: \"power3.inOut\" }, T);\n        tl.fromTo(\"#s2\", { x: 1920 }, { x: 0, duration: 0.5, ease: \"power3.inOut\" }, T);\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-1\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 2: Vertical Push ===\n        resetScenes();\n        tl.to(\"#info-2\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.to(\"#s1\", { y: -1080, duration: 0.5, ease: \"power3.inOut\" }, T);\n        tl.fromTo(\"#s2\", { y: 1080 }, { y: 0, duration: 0.5, ease: \"power3.inOut\" }, T);\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-2\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 3: Elastic Push ===\n        resetScenes();\n        tl.to(\"#info-3\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.to(\"#s1\", { x: -1920, duration: 0.5, ease: \"power3.in\" }, T);\n        tl.fromTo(\"#s2\", { x: 1920 }, { x: 30, duration: 0.4, ease: \"power4.out\" }, T + 0.1);\n        tl.to(\"#s2\", { x: -15, duration: 0.15, ease: \"sine.inOut\" }, T + 0.5);\n        tl.to(\"#s2\", { x: 0, duration: 0.1, ease: \"sine.out\" }, T + 0.65);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-3\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 4: Squeeze ===\n        resetScenes();\n        tl.to(\"#info-4\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.to(\n          \"#s1\",\n          { scaleX: 0, transformOrigin: \"left center\", duration: 0.4, ease: \"power3.inOut\" },\n          T,\n        );\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\n          \"#s2\",\n          { scaleX: 0, transformOrigin: \"right center\" },\n          { scaleX: 1, duration: 0.4, ease: \"power3.inOut\" },\n          T + 0.1,\n        );\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.5);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-4\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === OUTRO (3s) ===\n        tl.set(\"#scene1\", { opacity: 0 }, t);\n        tl.set(\"#scene2\", { opacity: 0 }, t);\n        tl.to(\"#outro-card\", { opacity: 1, duration: 0.4, ease: \"power2.inOut\" }, t);\n        tl.to(\"#outro-label\", { opacity: 1, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#outro-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-radial.json b/docs/public/catalog/blocks/transitions-radial.json
new file mode 100644
index 0000000000..c9d66d6917
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-radial.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <title>Radial Transitions</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n\n      #scene1 {\n        z-index: 1;\n      }\n      #scene2 {\n        z-index: 2;\n        opacity: 0;\n      }\n\n      #s1 {\n        background: #1b263b;\n      }\n      #s2 {\n        background: #e07a5f;\n      }\n\n      .big-text {\n        font-size: 200px;\n        font-weight: 900;\n        line-height: 1;\n        user-select: none;\n        pointer-events: none;\n      }\n      #s1 .big-text {\n        color: rgba(255, 255, 255, 0.08);\n      }\n      #s2 .big-text {\n        color: rgba(255, 255, 255, 0.15);\n      }\n\n      .label {\n        font-size: 32px;\n        font-weight: 600;\n        letter-spacing: 6px;\n        text-transform: uppercase;\n        margin-top: 12px;\n      }\n      #s1 .label {\n        color: #778da9;\n      }\n      #s2 .label {\n        color: #fff;\n      }\n\n      #info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        width: 1920px;\n        height: 80px;\n        background: rgba(0, 0, 0, 0.88);\n        z-index: 100;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n      }\n      #info-bar span {\n        color: #fff;\n        font-size: 22px;\n        font-weight: 500;\n        letter-spacing: 2px;\n      }\n\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        z-index: 200;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        opacity: 0;\n      }\n      #title-card .category {\n        font-size: 64px;\n        font-weight: 800;\n        color: #fff;\n        letter-spacing: 8px;\n        text-transform: uppercase;\n      }\n      #title-card .subtitle {\n        font-size: 24px;\n        font-weight: 400;\n        color: #778da9;\n        margin-top: 16px;\n        letter-spacing: 4px;\n      }\n\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        z-index: 200;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        opacity: 0;\n      }\n      #outro-card .category {\n        font-size: 48px;\n        font-weight: 700;\n        color: #778da9;\n        letter-spacing: 6px;\n        text-transform: uppercase;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"composition\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"20\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"title-card\">\n        <div class=\"category\">Radial Transitions</div>\n        <div class=\"subtitle\">3 Transitions</div>\n      </div>\n\n      <div id=\"scene1\" class=\"scene\">\n        <div id=\"s1\" class=\"scene-inner\">\n          <div class=\"big-text\">ONE</div>\n          <div class=\"label\">Scene A</div>\n        </div>\n      </div>\n\n      <div id=\"scene2\" class=\"scene\">\n        <div id=\"s2\" class=\"scene-inner\">\n          <div class=\"big-text\">TWO</div>\n          <div class=\"label\">Scene B</div>\n        </div>\n      </div>\n\n      <div id=\"info-bar\"><span id=\"info-text\">Transition Name</span></div>\n\n      <div id=\"outro-card\">\n        <div class=\"category\">End of Radial Transitions</div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        var demos = [\n          { name: \"Circle Iris\", time: 0 },\n          { name: \"Diamond Iris\", time: 0 },\n          { name: \"Diagonal Split\", time: 0 },\n        ];\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              skewX: 0,\n              clipPath: \"none\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              rotationY: 0,\n              filter: \"none\",\n              skewX: 0,\n              clipPath: \"none\",\n            },\n            t,\n          );\n        }\n\n        /* ── Title card (3s) ── */\n        tl.set(\"#title-card\", { opacity: 1 }, 0);\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.5 }, 2.5);\n        t = 3;\n\n        /* ── Demo 1: Circle Iris ── */\n        resetScenes();\n        tl.set(\"#info-text\", { textContent: \"Circle Iris\" }, t);\n        tl.to(\"#info-bar\", { opacity: 1, duration: 0.3 }, t);\n        t += 1.5;\n        var T = t;\n        demos[0].time = T;\n        tl.set(\"#scene2\", { opacity: 1, clipPath: \"circle(0% at 50% 50%)\" }, T);\n        tl.to(\n          \"#scene2\",\n          { clipPath: \"circle(75% at 50% 50%)\", duration: 0.5, ease: \"power2.out\" },\n          T,\n        );\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.5);\n        tl.set(\"#scene2\", { clipPath: \"none\" }, T + 0.55);\n        t = T + 1.5;\n        tl.to(\"#info-bar\", { opacity: 0, duration: 0.3 }, t);\n        t += 0.5;\n\n        /* ── Demo 2: Diamond Iris ── */\n        resetScenes();\n        tl.set(\"#info-text\", { textContent: \"Diamond Iris\" }, t);\n        tl.to(\"#info-bar\", { opacity: 1, duration: 0.3 }, t);\n        t += 1.5;\n        T = t;\n        demos[1].time = T;\n        tl.set(\n          \"#scene2\",\n          { opacity: 1, clipPath: \"polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)\" },\n          T,\n        );\n        tl.to(\n          \"#scene2\",\n          {\n            clipPath: \"polygon(50% -20%, 120% 50%, 50% 120%, -20% 50%)\",\n            duration: 0.5,\n            ease: \"power2.out\",\n          },\n          T,\n        );\n        tl.set(\"#scene1\", { opacity: 0 }, T + 0.5);\n        tl.set(\"#scene2\", { clipPath: \"none\" }, T + 0.55);\n        t = T + 1.5;\n        tl.to(\"#info-bar\", { opacity: 0, duration: 0.3 }, t);\n        t += 0.5;\n\n        /* ── Demo 3: Diagonal Split ── */\n        resetScenes();\n        tl.set(\"#info-text\", { textContent: \"Diagonal Split\" }, t);\n        tl.to(\"#info-bar\", { opacity: 1, duration: 0.3 }, t);\n        t += 1.5;\n        T = t;\n        demos[2].time = T;\n        tl.set(\"#scene2\", { opacity: 1, zIndex: 1 }, T);\n        tl.set(\n          \"#scene1\",\n          { zIndex: 10, clipPath: \"polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)\" },\n          T,\n        );\n        tl.to(\n          \"#scene1\",\n          {\n            clipPath: \"polygon(60% 0%, 100% 0%, 100% 40%, 60% 0%)\",\n            duration: 0.5,\n            ease: \"power3.inOut\",\n          },\n          T,\n        );\n        tl.set(\"#scene1\", { opacity: 0, zIndex: 1, clipPath: \"none\" }, T + 0.55);\n        tl.set(\"#scene2\", { zIndex: 2 }, T + 0.55);\n        t = T + 1.5;\n        tl.to(\"#info-bar\", { opacity: 0, duration: 0.3 }, t);\n        t += 0.5;\n\n        /* ── Outro (3s) ── */\n        tl.set(\"#outro-card\", { opacity: 1 }, t);\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.5 }, t + 2.5);\n\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/transitions-scale.json b/docs/public/catalog/blocks/transitions-scale.json
new file mode 100644
index 0000000000..f52d61d8b8
--- /dev/null
+++ b/docs/public/catalog/blocks/transitions-scale.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n        font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Helvetica, Arial, sans-serif;\n      }\n      .scene {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n      .scene-inner {\n        width: 100%;\n        height: 100%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n      }\n      .info-bar {\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        z-index: 100;\n        background: rgba(0, 0, 0, 0.88);\n        padding: 24px 60px;\n        display: flex;\n        align-items: center;\n        gap: 40px;\n        opacity: 0;\n      }\n      .info-num {\n        font-size: 14px;\n        font-weight: 700;\n        color: #e07a5f;\n        letter-spacing: 0.1em;\n      }\n      .info-name {\n        font-size: 20px;\n        font-weight: 700;\n        color: #fff;\n      }\n      .info-desc {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n      }\n      #title-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n      }\n      #outro-card {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        background: #0d1b2a;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-direction: column;\n        z-index: 50;\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"15\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- Title Card -->\n      <div id=\"title-card\">\n        <div\n          id=\"title-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          TRANSITION CATALOG\n        </div>\n        <div\n          id=\"title-main\"\n          style=\"font-size: 72px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          Scale Transitions\n        </div>\n        <div\n          id=\"title-count\"\n          style=\"\n            font-size: 24px;\n            font-weight: 400;\n            color: rgba(255, 255, 255, 0.4);\n            margin-top: 12px;\n            opacity: 0;\n          \"\n        >\n          2 transitions\n        </div>\n      </div>\n\n      <!-- Scene A -->\n      <div id=\"scene1\" class=\"scene\" style=\"z-index: 1\">\n        <div class=\"scene-inner\" id=\"s1\" style=\"background: #1b263b\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.08)\">\n            ONE\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #778da9;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE A\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B -->\n      <div id=\"scene2\" class=\"scene\" style=\"z-index: 2; opacity: 0\">\n        <div class=\"scene-inner\" id=\"s2\" style=\"background: #e07a5f\">\n          <div style=\"font-size: 200px; font-weight: 900; color: rgba(255, 255, 255, 0.15)\">\n            TWO\n          </div>\n          <div\n            style=\"\n              font-size: 32px;\n              font-weight: 700;\n              color: #fff;\n              letter-spacing: 0.15em;\n              margin-top: -20px;\n            \"\n          >\n            SCENE B\n          </div>\n        </div>\n      </div>\n\n      <!-- Info Bars -->\n      <div id=\"info-1\" class=\"info-bar\">\n        <div class=\"info-num\">01</div>\n        <div class=\"info-name\">Zoom Through</div>\n        <div class=\"info-desc\">Use a zoom through transition</div>\n      </div>\n      <div id=\"info-2\" class=\"info-bar\">\n        <div class=\"info-num\">02</div>\n        <div class=\"info-name\">Zoom Out</div>\n        <div class=\"info-desc\">Use a zoom out transition</div>\n      </div>\n\n      <!-- Outro Card -->\n      <div id=\"outro-card\">\n        <div\n          id=\"outro-label\"\n          style=\"\n            font-size: 14px;\n            font-weight: 700;\n            color: #e07a5f;\n            letter-spacing: 0.2em;\n            text-transform: uppercase;\n            opacity: 0;\n          \"\n        >\n          SCALE TRANSITIONS\n        </div>\n        <div\n          id=\"outro-main\"\n          style=\"font-size: 56px; font-weight: 900; color: #fff; margin-top: 16px; opacity: 0\"\n        >\n          2 Transitions\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        var tl = gsap.timeline({ paused: true });\n        var t = 0;\n\n        // === TITLE CARD (3s) ===\n        tl.to(\"#title-label\", { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#title-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.fromTo(\n          \"#title-count\",\n          { opacity: 0 },\n          { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n          t + 1.0,\n        );\n        tl.to(\"#title-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n        t += 3;\n\n        function resetScenes() {\n          tl.set(\n            \"#scene1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 1,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#scene2\",\n            {\n              opacity: 0,\n              x: 0,\n              y: 0,\n              scale: 1,\n              scaleX: 1,\n              rotation: 0,\n              filter: \"none\",\n              clipPath: \"none\",\n              zIndex: 2,\n              skewX: 0,\n            },\n            t,\n          );\n          tl.set(\n            \"#s1\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n          tl.set(\n            \"#s2\",\n            {\n              opacity: 1,\n              x: 0,\n              y: 0,\n              scale: 1,\n              rotation: 0,\n              filter: \"none\",\n              skewX: 0,\n              scaleX: 1,\n              transformOrigin: \"50% 50%\",\n            },\n            t,\n          );\n        }\n\n        // === TRANSITION 1: Zoom Through ===\n        resetScenes();\n        tl.to(\"#info-1\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        var T = t + 1.5;\n        tl.to(\n          \"#s1\",\n          { scale: 2.5, opacity: 0, filter: \"blur(8px)\", duration: 0.4, ease: \"power3.in\" },\n          T,\n        );\n        tl.set(\"#scene2\", { opacity: 1 }, T);\n        tl.fromTo(\n          \"#s2\",\n          { scale: 0.5, opacity: 0, filter: \"blur(8px)\" },\n          { scale: 1, opacity: 1, filter: \"blur(0px)\", duration: 0.4, ease: \"power3.out\" },\n          T + 0.15,\n        );\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-1\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === TRANSITION 2: Zoom Out ===\n        resetScenes();\n        tl.to(\"#info-2\", { opacity: 1, duration: 0.3 }, t + 0.2);\n        T = t + 1.5;\n        tl.set(\"#scene2\", { opacity: 1, zIndex: 1 }, T);\n        tl.set(\"#scene1\", { zIndex: 10, transformOrigin: \"50% 50%\" }, T);\n        tl.to(\"#s1\", { scale: 0.3, opacity: 0, duration: 0.4, ease: \"power3.in\" }, T);\n        tl.set(\"#scene1\", { zIndex: 1 }, T + 0.5);\n        tl.set(\"#scene2\", { zIndex: 2 }, T + 0.5);\n        t = T + 1.5 + 1.0;\n        tl.to(\"#info-2\", { opacity: 0, duration: 0.2 }, t);\n        t += 0.5;\n\n        // === OUTRO (3s) ===\n        tl.set(\"#scene1\", { opacity: 0 }, t);\n        tl.set(\"#scene2\", { opacity: 0 }, t);\n        tl.to(\"#outro-card\", { opacity: 1, duration: 0.4, ease: \"power2.inOut\" }, t);\n        tl.to(\"#outro-label\", { opacity: 1, duration: 0.4, ease: \"power2.out\" }, t + 0.3);\n        tl.fromTo(\n          \"#outro-main\",\n          { opacity: 0, y: 20 },\n          { opacity: 1, y: 0, duration: 0.5, ease: \"power2.out\" },\n          t + 0.6,\n        );\n        tl.to(\"#outro-card\", { opacity: 0, duration: 0.4, ease: \"power2.inOut\" }, t + 2.4);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"main\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/ui-3d-reveal.json b/docs/public/catalog/blocks/ui-3d-reveal.json
new file mode 100644
index 0000000000..3feea359f5
--- /dev/null
+++ b/docs/public/catalog/blocks/ui-3d-reveal.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>ui-3d-reveal</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #0a0a0f;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      data-composition-id=\"ui-3d-reveal\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"13\"\n    >\n      <!-- Background: Figma outer canvas dark -->\n      <div class=\"bg-base\"></div>\n      <div class=\"bg-glow\" id=\"bgGlow\"></div>\n\n      <!-- ══════════════════════════════════════════\n         INTRO: Figma logo stroke draw + fill\n    ══════════════════════════════════════════ -->\n      <div class=\"intro-layer\" id=\"introLayer\">\n        <svg class=\"intro-svg\" viewBox=\"0 0 1920 1080\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g class=\"intro-logo\" transform=\"translate(865, 397.5)\">\n            <!-- Fill layer -->\n            <path\n              class=\"il-fill il-fill-1\"\n              d=\"M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z\"\n              fill=\"#F24E1E\"\n              opacity=\"0\"\n            />\n            <path\n              class=\"il-fill il-fill-2\"\n              d=\"M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z\"\n              fill=\"#FF7262\"\n              opacity=\"0\"\n            />\n            <path\n              class=\"il-fill il-fill-3\"\n              d=\"M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z\"\n              fill=\"#A259FF\"\n              opacity=\"0\"\n            />\n            <circle\n              class=\"il-fill il-fill-4\"\n              cx=\"142.5\"\n              cy=\"142.5\"\n              r=\"47.5\"\n              fill=\"#1ABCFE\"\n              opacity=\"0\"\n            />\n            <path\n              class=\"il-fill il-fill-5\"\n              d=\"M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z\"\n              fill=\"#0ACF83\"\n              opacity=\"0\"\n            />\n            <!-- Stroke layer -->\n            <path\n              class=\"il-stroke il-stroke-1\"\n              d=\"M95 0H47.5C21.27 0 0 21.27 0 47.5S21.27 95 47.5 95H95V0Z\"\n              fill=\"none\"\n              stroke=\"#F24E1E\"\n              stroke-width=\"2\"\n            />\n            <path\n              class=\"il-stroke il-stroke-2\"\n              d=\"M95 0V95H142.5C168.73 95 190 73.73 190 47.5S168.73 0 142.5 0H95Z\"\n              fill=\"none\"\n              stroke=\"#FF7262\"\n              stroke-width=\"2\"\n            />\n            <path\n              class=\"il-stroke il-stroke-3\"\n              d=\"M95 95H47.5C21.27 95 0 116.27 0 142.5S21.27 190 47.5 190H95V95Z\"\n              fill=\"none\"\n              stroke=\"#A259FF\"\n              stroke-width=\"2\"\n            />\n            <circle\n              class=\"il-stroke il-stroke-4\"\n              cx=\"142.5\"\n              cy=\"142.5\"\n              r=\"47.5\"\n              fill=\"none\"\n              stroke=\"#1ABCFE\"\n              stroke-width=\"2\"\n            />\n            <path\n              class=\"il-stroke il-stroke-5\"\n              d=\"M47.5 190C21.27 190 0 211.27 0 237.5S21.27 285 47.5 285 95 263.73 95 237.5V190H47.5Z\"\n              fill=\"none\"\n              stroke=\"#0ACF83\"\n              stroke-width=\"2\"\n            />\n          </g>\n        </svg>\n      </div>\n\n      <!-- 3D scene -->\n      <div class=\"scene\" id=\"scene\">\n        <div class=\"card-glow\" id=\"cardGlow\"></div>\n\n        <div class=\"card-wrapper\" id=\"cardWrapper\">\n          <!-- ═══════════════════════════════════════\n             FRONT FACE — Figma Interface\n        ═══════════════════════════════════════ -->\n          <div class=\"ui-card\" id=\"uiCard\">\n            <!-- ── TOOLBAR ── -->\n            <div class=\"fig-toolbar\" id=\"figToolbar\">\n              <!-- Left: logo + tools -->\n              <div class=\"tb-left\">\n                <div class=\"fig-logo\">\n                  <svg width=\"18\" height=\"26\" viewBox=\"0 0 18 26\" fill=\"none\">\n                    <rect x=\"0\" y=\"0\" width=\"9\" height=\"9\" rx=\"4.5\" fill=\"#F24E1E\" />\n                    <rect x=\"9\" y=\"0\" width=\"9\" height=\"9\" rx=\"4.5\" fill=\"#FF7262\" />\n                    <rect x=\"0\" y=\"8.5\" width=\"9\" height=\"9\" rx=\"4.5\" fill=\"#A259FF\" />\n                    <circle cx=\"13.5\" cy=\"13\" r=\"4.5\" fill=\"#1ABCFE\" />\n                    <rect x=\"0\" y=\"17\" width=\"9\" height=\"9\" rx=\"4.5\" fill=\"#0ACF83\" />\n                  </svg>\n                </div>\n                <div class=\"tool-divider\"></div>\n                <div class=\"tool-group\">\n                  <div class=\"tool-btn active\" title=\"Move (V)\">\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"14\" height=\"14\">\n                      <path d=\"M2 2l5 12 2-4 4-2L2 2z\" fill=\"currentColor\" />\n                    </svg>\n                  </div>\n                  <div class=\"tool-btn\" title=\"Scale (K)\">\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"14\" height=\"14\">\n                      <path\n                        d=\"M3 3l10 10M10 3h3v3M3 10H6\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                  </div>\n                  <div class=\"tool-divider\"></div>\n                  <div class=\"tool-btn\" title=\"Frame (F)\">\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"14\" height=\"14\">\n                      <rect\n                        x=\"2\"\n                        y=\"5\"\n                        width=\"12\"\n                        height=\"9\"\n                        rx=\"1\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.4\"\n                      />\n                      <path\n                        d=\"M5 5V3M11 5V3M5 14v2M11 14v2M2 8H0M14 8h2\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.4\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                  </div>\n                  <div class=\"tool-btn\" title=\"Rectangle (R)\">\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"14\" height=\"14\">\n                      <rect\n                        x=\"2\"\n                        y=\"4\"\n                        width=\"12\"\n                        height=\"9\"\n                        rx=\"1.5\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.4\"\n                      />\n                    </svg>\n                  </div>\n                  <div class=\"tool-btn\" title=\"Text (T)\">\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"14\" height=\"14\">\n                      <path\n                        d=\"M2 4h12M8 4v9M5 13h6\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.5\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                  </div>\n                  <div class=\"tool-btn\" title=\"Pen (P)\">\n                    <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"14\" height=\"14\">\n                      <path\n                        d=\"M3 13L8 3l5 10M5.5 8.5h5\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.4\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                  </div>\n                </div>\n              </div>\n\n              <!-- Center: file breadcrumb -->\n              <div class=\"tb-center\">\n                <span class=\"file-name\">App Redesign</span>\n                <span class=\"file-chevron\">›</span>\n                <span class=\"file-page\">Design System</span>\n                <svg class=\"file-arrow\" viewBox=\"0 0 10 6\" width=\"10\" height=\"6\" fill=\"none\">\n                  <path\n                    d=\"M1 1l4 4 4-4\"\n                    stroke=\"currentColor\"\n                    stroke-width=\"1.4\"\n                    stroke-linecap=\"round\"\n                  />\n                </svg>\n              </div>\n\n              <!-- Right: mode tabs + share + avatars -->\n              <div class=\"tb-right\">\n                <div class=\"mode-tabs\">\n                  <span class=\"mode-tab\">Design</span>\n                  <span class=\"mode-tab active\">Dev</span>\n                </div>\n                <div class=\"share-btn\">\n                  <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"12\" height=\"12\">\n                    <path\n                      d=\"M4 8H12M9 5l3 3-3 3\"\n                      stroke=\"white\"\n                      stroke-width=\"1.5\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                  Share\n                </div>\n                <div class=\"avatar-cluster\">\n                  <div class=\"fig-avatar\" style=\"background: #a259ff; z-index: 3\">S</div>\n                  <div\n                    class=\"fig-avatar\"\n                    style=\"background: #f24e1e; z-index: 2; margin-left: -8px\"\n                  >\n                    J\n                  </div>\n                  <div\n                    class=\"fig-avatar\"\n                    style=\"background: #1abcfe; z-index: 1; margin-left: -8px\"\n                  >\n                    K\n                  </div>\n                </div>\n                <div class=\"present-btn\">▶</div>\n              </div>\n            </div>\n\n            <!-- ── BODY ── -->\n            <div class=\"fig-body\">\n              <!-- LAYERS PANEL -->\n              <div class=\"fig-layers\" id=\"figLayers\">\n                <div class=\"panel-tabs\">\n                  <span class=\"ptab active\">Layers</span>\n                  <span class=\"ptab\">Assets</span>\n                </div>\n\n                <div class=\"layer-search\">\n                  <svg viewBox=\"0 0 14 14\" fill=\"none\" width=\"12\" height=\"12\">\n                    <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.3\" />\n                    <path\n                      d=\"M9.5 9.5l2.5 2.5\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"1.3\"\n                      stroke-linecap=\"round\"\n                    />\n                  </svg>\n                  <span class=\"search-placeholder\">Search layers</span>\n                </div>\n\n                <div class=\"layer-list\">\n                  <div class=\"layer-item page-item\">\n                    <svg class=\"li-icon\" viewBox=\"0 0 12 12\" fill=\"none\" width=\"12\" height=\"12\">\n                      <rect\n                        x=\"1\"\n                        y=\"1\"\n                        width=\"8\"\n                        height=\"10\"\n                        rx=\"1\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                      />\n                      <path\n                        d=\"M3 4h5M3 7h3\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <span>Page 1</span>\n                  </div>\n\n                  <div class=\"layer-item frame-item expanded\">\n                    <svg class=\"li-collapse\" viewBox=\"0 0 8 8\" width=\"8\" height=\"8\" fill=\"none\">\n                      <path\n                        d=\"M2 3l2 2 2-2\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <svg\n                      class=\"li-icon frame-icon\"\n                      viewBox=\"0 0 12 12\"\n                      fill=\"none\"\n                      width=\"12\"\n                      height=\"12\"\n                    >\n                      <rect\n                        x=\"2\"\n                        y=\"3\"\n                        width=\"8\"\n                        height=\"6\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                      />\n                      <path\n                        d=\"M4 3V1M8 3V1M4 9v2M8 9v2M2 6H0M10 6h2\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <span>HeyGen — Home</span>\n                  </div>\n\n                  <div class=\"layer-item group-item indent-1\">\n                    <svg class=\"li-collapse\" viewBox=\"0 0 8 8\" width=\"8\" height=\"8\" fill=\"none\">\n                      <path\n                        d=\"M2 3l2 2 2-2\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <svg class=\"li-icon\" viewBox=\"0 0 12 12\" fill=\"none\" width=\"12\" height=\"12\">\n                      <rect\n                        x=\"1\"\n                        y=\"1\"\n                        width=\"10\"\n                        height=\"10\"\n                        rx=\"1\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                      />\n                    </svg>\n                    <span>Navigation</span>\n                  </div>\n\n                  <div class=\"layer-item comp-item indent-2\">\n                    <svg\n                      class=\"li-icon comp-icon\"\n                      viewBox=\"0 0 12 12\"\n                      fill=\"none\"\n                      width=\"12\"\n                      height=\"12\"\n                    >\n                      <path\n                        d=\"M6 1L11 6 6 11 1 6z\"\n                        fill=\"none\"\n                        stroke=\"#A259FF\"\n                        stroke-width=\"1.2\"\n                      />\n                    </svg>\n                    <span>Logo / Mark</span>\n                  </div>\n\n                  <div class=\"layer-item text-item indent-2\">\n                    <svg class=\"li-icon\" viewBox=\"0 0 12 12\" fill=\"none\" width=\"12\" height=\"12\">\n                      <path\n                        d=\"M2 3h8M6 3v7M3 10h6\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <span>Nav Links</span>\n                  </div>\n\n                  <div class=\"layer-item comp-item indent-2 selected-layer\" id=\"selectedLayer\">\n                    <svg\n                      class=\"li-icon comp-icon\"\n                      viewBox=\"0 0 12 12\"\n                      fill=\"none\"\n                      width=\"12\"\n                      height=\"12\"\n                    >\n                      <path\n                        d=\"M6 1L11 6 6 11 1 6z\"\n                        fill=\"none\"\n                        stroke=\"#A259FF\"\n                        stroke-width=\"1.2\"\n                      />\n                    </svg>\n                    <span>Create Card</span>\n                  </div>\n\n                  <div class=\"layer-item group-item indent-1 collapsed\">\n                    <svg\n                      class=\"li-collapse\"\n                      viewBox=\"0 0 8 8\"\n                      width=\"8\"\n                      height=\"8\"\n                      fill=\"none\"\n                      style=\"transform: rotate(-90deg)\"\n                    >\n                      <path\n                        d=\"M2 3l2 2 2-2\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <svg class=\"li-icon\" viewBox=\"0 0 12 12\" fill=\"none\" width=\"12\" height=\"12\">\n                      <rect\n                        x=\"1\"\n                        y=\"1\"\n                        width=\"10\"\n                        height=\"10\"\n                        rx=\"1\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                      />\n                    </svg>\n                    <span>Hero</span>\n                  </div>\n\n                  <div class=\"layer-item group-item indent-1 collapsed\">\n                    <svg\n                      class=\"li-collapse\"\n                      viewBox=\"0 0 8 8\"\n                      width=\"8\"\n                      height=\"8\"\n                      fill=\"none\"\n                      style=\"transform: rotate(-90deg)\"\n                    >\n                      <path\n                        d=\"M2 3l2 2 2-2\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <svg class=\"li-icon\" viewBox=\"0 0 12 12\" fill=\"none\" width=\"12\" height=\"12\">\n                      <rect\n                        x=\"1\"\n                        y=\"1\"\n                        width=\"10\"\n                        height=\"10\"\n                        rx=\"1\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                      />\n                    </svg>\n                    <span>Feature Grid</span>\n                  </div>\n\n                  <div class=\"layer-item group-item indent-1 collapsed\">\n                    <svg\n                      class=\"li-collapse\"\n                      viewBox=\"0 0 8 8\"\n                      width=\"8\"\n                      height=\"8\"\n                      fill=\"none\"\n                      style=\"transform: rotate(-90deg)\"\n                    >\n                      <path\n                        d=\"M2 3l2 2 2-2\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                        stroke-linecap=\"round\"\n                      />\n                    </svg>\n                    <svg class=\"li-icon\" viewBox=\"0 0 12 12\" fill=\"none\" width=\"12\" height=\"12\">\n                      <rect\n                        x=\"1\"\n                        y=\"1\"\n                        width=\"10\"\n                        height=\"10\"\n                        rx=\"1\"\n                        stroke=\"currentColor\"\n                        stroke-width=\"1.2\"\n                      />\n                    </svg>\n                    <span>Footer</span>\n                  </div>\n                </div>\n\n                <div class=\"page-bar\">\n                  <div class=\"pbar-tab active\">Design System</div>\n                  <div class=\"pbar-tab\">Landing</div>\n                  <div class=\"pbar-add\">+</div>\n                </div>\n              </div>\n\n              <!-- CANVAS -->\n              <div class=\"fig-canvas\" id=\"figCanvas\">\n                <div class=\"canvas-frame-label\">HeyGen — Home</div>\n\n                <!-- The artboard / HeyGen app.heygen.com — light mode -->\n                <div class=\"artboard\" id=\"artboard\">\n                  <!-- ══ LEFT ICON NAV (56px) ══ -->\n                  <div class=\"hg-icnav\">\n                    <div class=\"hg-iclogo\">\n                      <img\n                        src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAA4CAYAAACohjseAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAOKADAAQAAAABAAAAOAAAAAANV2hTAAAM+0lEQVRoBe2ZeZAU1R3Hf6+n59zZ2WWQQ0MUgqCoq6iIgIKYAgoTExMPCGI8qqIUJpZHLINltNQylWiViUlKqxRTKB6UWwWFURQPXJVDUTSAinIootzsxVw93dPdL9/f6+ndddwZd5a1yj/2Vb199/F53987ppeo3/WvQP8K9K9A/wr8EFfgk3VJWvPC70jKgD+9hqVy08zlcsXcu2XCz/u+Q9HnAzQ2Rmnk0JVBcicTSaG1fva5OX3+8TzOyBekPTlJAWmR7WTpuacvFFf0+fglHWol6SNLfrz2LP34wQeD5EypEaaIaxZFaupHDFy+YBp37OTojVXtRIEI6aGBNPf3K+XBG16Spx/ZoJVb9x3g+tWnxc3smrgw43GtQBFhwlsUi8W1YDT5EE/jy9liRsQh13W9SQVqaVBNiN677Xl5Z+Vp9r60bwCbmuK1gdzbcS0fipBJYcpTGHBBhCGkY/H4Cckld/xYTTNPn77a1jlhVjOZoHsfeEmu6cztu1ifANbHM5viupUIQ7UwzJJ9qBgPijxFaiP6oPrAczzt7bPEKXUOSVYxg9HTOAX4GIrE6JxHXpctT66U4/sOj+iIAQe+v+yVRND6CQOFoBorxsoFNQ6RB9ggyqI1sTP8ExXVDrxSVFEAkEGz8BGNknqI1j79prynryCPCDC5ftkDdSFjRhgqKSiGBBiD+mmG1FEeqA+Hz3r51uU88RtH0LEJmyTHWUH27BjUFKTXW3TX8ib5bmOXK8arUf3fXgMOWf/snLqwdWuUlSqqx6rpSjXOAySXMTCrGEBYE5nKU5w3ThR0hzIvtHZOmOGUA3YO8YRBZydfp+ZlTfLczlrVx/xuq2o5ZF1jQ0I3FkcDOcFAvM88k0QIWF15T1Ud5hoommworsWnNF7xbx5sgkPDB+dI7jQ85TgvCyVz8NJBiDTWpP7otHxz+Yvyb1zeG1c14KCmh+N1kfbVsbCls/kxUJAVUqboKcZQCrSoroojL5nLky6dCE/0P7NEa9SmhbtbSO4xPTPNFN88OSHJwMykK0kWKDDMlH/671L3g8a7ZahayKoB62sCGxOhXJ2nVBEEk+d95oP4cAyqs9kKQ4VHWcJ9Y/aSa/1Jbpgj5h3l0kO7m0m+nSECF6WViQrAeSryIaTZRMcZ8ozEaGpe9JSc6rfvSVgV4Inv/mNlXU1+pLfXfJUQFpXyYLw0AytTVfAmDfgqTaaZ3Vg6qXdmi1tGmTQhnCH30XaSBh89UI5NFcjKVHOSM4mG2m7tKOmuemyx83eV0YM/qpse1KMx7zxwf20t3aYJV03cGx9HHgBgTPCIAwqBSnaNR/ZkqNCSbXvxsqXJSmOd95zcaAXp1B3o5Ryd6HL0Gy0QJaFgsCApCFW5eweyfGZra+deLb7zAOoR4Jg1f51dP8BeogtX8AisjHJYWVaN+diU+DBRM0ChAufet6ZlPms0vzb7xcFeo8p/N2yQwfu+oBVtQZqiB3DjoO9deLSfDMhbspL4Z4i3nOhaik2zr9LGVurxOwEb1t3bEIu6H8ailo6LWvXVAciwSkFvCF0DIKpI1HN3p8hoTrua7b62au7rMytNolJZU5OMPHWQHmwN0+U5nRImlG0TUgzJSbEgRbRZaM/cfGX5XyUVAac2Xh83RiZ2x2JaXYfJYTZ8iDCEUrOLauahNkrvOezaOdMICu2tdVeu/nmlyZcrG7u56epkMHxJi+00bmqY/FRpvcsfl1P2D6CFIkLDwyna8NIccU5pHT9dEXDSezdvrUmI0Wx+DFgUEGbpKcWdFHIZOrRjt7Qylilsua22JnLB2jlr9/oDVBuO/2jV50Pq3RHtgcNC4FYwCpFC2rSa05bcmnHD6w5njUU06SJs0565soAT3rr+vvqjxR2iwyw7DxByLdq7dRdl21Kmlcvvj+iB+Vuu2/KyP+SKhw8OPYYijyQjofEREaiz8LRut52WVst59rwbav/s1ysNj12/7KMRR4tTHDxz+Jnsqqcyrgzsbldq2IkBMt0wZU3XMB13d8HRNxYovKJlzMQnS/vy02UBp6y75mDdIDFIVYQ1asKm5l37qG1/m51Pp9twJ/9z+/ytf/E7arp7Z2TQ0IH/SoZCM+qDwWFhVyte234NIgu325ac8XU0Hpt40m/Fvs4SxF5ddOfY4TX31MQDOFd0D473M6D4Scqhq75+4PIvlnMosU8OZZ3/7Rs96Yxv9FdMYMt27wIil9Dwyy7TmqJDX+53cql0RhQKq7Zfv+2Sri12Pm7cVavrv4kFAqPCLl5u7Io/aLvW43iIhDY2Fjvu47zxIfbwMCEES6VcfSxwUywe4kuoQy0+miWUc6GgendDDoZUirLCiPP2iYSCDX4/pWFZwJbPv1i8d4v5K9uydkV1/cId135ywG+854nMNXEKzw/pgdNCrghhxLJQfhsOfe5RkejQ9xfl2KRnqPKVz0wbnIwOcLDnlGJKNU89z0xZKZzMrqekb7JYIHIA77h4GZRxZQE3X/H+dWjDXjljsfwpPhfdrkkxKeBSjO8n9N5jx3B8QfOe4KZH6cGJfmPh5m9MJAbilmX1PMv2IDy1GI7TvpmqRVD9eHvTtPPNfl+lYVlArggzClhL6AlN0i9hTAlhl92ypf12pJVqaObA465WJoXHCSWCwZo1j7Yee+685Fe6rv9IinDR/Lw95pshd+TF/YOGr+MiMB8+8GZBWQNX/ZarCGgvoY/0Ao35VqseZEgAKZF9MLRhBdnZCAEpDCEnIPmVoGDQ4R2KBE+YzdLfXwzn8AmKUEJhH07VQ37eLBTaA7GbuN/uXFnAzPNyCKWqh+sAK47GVszC82FQYEBQF4pxKBdS1TQdm0hT+0kdItiDXN8uXg3qkGFAtGV4/xR1cCBl86kH6eRT08XhvhWUBXQ1GoAxqnIMx2bIUqjtyWn2XcC4TCmI0CQ7yNWhDn7jhpR63j7zpOa4Uzw1uZ5StnhFcDybTm9Ln3zq7VxWznk9dVOa+IX4zFGv524KS7J4n/lwvNfYs0oMp9TiECMpMIQcZ69rAfyFw2raEp+LAcmhCzAb8YLKQxrqcZzzbABy3DRt27Lz01T7Cn+8AcpUwKn8RJkilY3fFhjc21smevLV4kOEYQzYhw/DoYX6nMdhAYelVXA9ExWaUlDB8Z4DiINvBL6qDMVpW3mUQdVcLrvAaGj4utL8uKwiYHS2mG9FaGdpJ75ibIZ8cHDIUBxXymHyCgh5vjn66uGrGVkMy+0CQpkoFHQZRh0orBIUYpW+oRyuW6Ui9mU2k95gNJzwILr/Tld2D/otI4JOzEZpdSRP4/nuY1NkE+TDwj88lHKcB8+A6kApxrkfhu3I8645/jwIU8TdACc1fpoVT08VohIG40uczVVd5gDj/s28aRgH3OncricOrSo7MUtY8Vni7FSU7sdvMZcPEfZKObRmOGVyiCv1EKo08n3V2BwZiM1YeW7DKgeKJkpBxze/TuU8xSwoyd4BqIlDwUpnrqXzR7RXnnVnKYbsmUteJha0xmgG1MwwHIMxUA4TZZAOGMQ5T5koQjZFhsvCGBmU89X+Q+gS7A5OQl4GLEgd/TIYDhJYL38nt5C2sZNMQBqH215zTh/+TM9m7NXCMD13w34tVrVLGtYapU954mqyDIo4q8aQHPp7jMF8GAWKcl9FTtv+BnGFZJUK6nCBSoBiIHy+Aiwuc4RWLnuYGo75Wc9n69XEMNW5kbPE4REXi5PaYvSYGcRnS54oe1arCKuUYrXgfUgGUwuBkM2TAWVQVy85vtMKgOK9ZkK9PODwHVylCzhBpYN3gJGahY2srtlqZoxheudGXyTmpWN0qYH/lzFYVxCG8RVTMAzEsMjvKON0kL94shPSxtFvwiwZjKFgvsqr4raWJTT22FdVvMo/vQbkcRouEMtagzQiE6NdJiac4XuPYYogrBjnMTz7Dljkc7yg4xkPxy8ZfEXFYeKBcV6HS6X20+lD53akq4wcESCPNWWm2DfuAjE8E6WlecAwnG+KSq0icFcFUzhw8qgno5p60eF3MJ6Z3UylYLmUyvbqw5W/Dt306hdVF54/XVxqRui6fJgKHWaI3pVZArIDFnG+R9UrKKypPchPtW5da/tDNPGYD7st62FmmZ572Lqk2sypYmE2RKdYUTrAQOqQQeibJqumHgnFdkIvAqorvKSztvYdNG7IH0tyq072KSCPfvFksQ1+aD5Gq/gjLcP5YKxaV+eKIqDo8vWYKxhGjkL2eV3r9jbe54D+ROZOEtPwWL8d54ZTCqbqANaJkmd+heD9ZOS8/ZhKtWLfTaYTB+31+zqSsGRNj6Sr7tsu/ECeiXfYcvxcGMbvV9/hl+D2G8aL0X6aVm8+kwI102nSyF7/s7Ojry6R7x3QH+vhD+RMfBO8Ck+8ITCb9/4wTizwy/rD/hXoX4H+FehfgR/qCvwfTSeznkI0t8oAAAAASUVORK5CYII=\"\n                        width=\"30\"\n                        height=\"30\"\n                        style=\"display: block\"\n                        alt=\"HeyGen\"\n                      />\n                    </div>\n                    <div class=\"hg-icitem\">\n                      <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n                        <circle cx=\"8\" cy=\"5.5\" r=\"2.8\" stroke=\"currentColor\" stroke-width=\"1.3\" />\n                        <path\n                          d=\"M2 14.5c0-3.31 2.69-6 6-6s6 2.69 6 6\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.3\"\n                          stroke-linecap=\"round\"\n                        />\n                      </svg>\n                      <span>Avatar</span>\n                    </div>\n                    <div class=\"hg-icitem hg-icactive\">\n                      <div class=\"hg-icbg\">\n                        <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"15\" height=\"15\">\n                          <circle cx=\"8\" cy=\"5.5\" r=\"2.5\" stroke=\"white\" stroke-width=\"1.3\" />\n                          <path\n                            d=\"M2.5 14c0-3.04 2.46-5.5 5.5-5.5s5.5 2.46 5.5 5.5\"\n                            stroke=\"white\"\n                            stroke-width=\"1.3\"\n                            stroke-linecap=\"round\"\n                          />\n                        </svg>\n                      </div>\n                      <span>Video Agent</span>\n                    </div>\n                    <div class=\"hg-icitem\">\n                      <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n                        <path\n                          d=\"M3 4l3 8M10 4l3 8M6 10h4\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.4\"\n                          stroke-linecap=\"round\"\n                        />\n                      </svg>\n                      <span>Motion Cut</span>\n                    </div>\n                    <div class=\"hg-icitem\">\n                      <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n                        <path\n                          d=\"M2 4h12M8 4v9M5 13h6\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.4\"\n                          stroke-linecap=\"round\"\n                        />\n                        <circle cx=\"12\" cy=\"3\" r=\"1.5\" fill=\"#3B82F6\" />\n                      </svg>\n                      <span>Translate</span>\n                    </div>\n                    <div class=\"hg-icitem\">\n                      <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n                        <rect\n                          x=\"2\"\n                          y=\"2\"\n                          width=\"5\"\n                          height=\"5\"\n                          rx=\"1.5\"\n                          fill=\"currentColor\"\n                          opacity=\"0.45\"\n                        />\n                        <rect\n                          x=\"9\"\n                          y=\"2\"\n                          width=\"5\"\n                          height=\"5\"\n                          rx=\"1.5\"\n                          fill=\"currentColor\"\n                          opacity=\"0.45\"\n                        />\n                        <rect\n                          x=\"2\"\n                          y=\"9\"\n                          width=\"5\"\n                          height=\"5\"\n                          rx=\"1.5\"\n                          fill=\"currentColor\"\n                          opacity=\"0.45\"\n                        />\n                        <rect\n                          x=\"9\"\n                          y=\"9\"\n                          width=\"5\"\n                          height=\"5\"\n                          rx=\"1.5\"\n                          fill=\"currentColor\"\n                          opacity=\"0.45\"\n                        />\n                      </svg>\n                      <span>Apps</span>\n                    </div>\n                    <div class=\"hg-icitem\">\n                      <svg viewBox=\"0 0 16 16\" fill=\"none\" width=\"16\" height=\"16\">\n                        <path\n                          d=\"M2 6a2 2 0 012-2h2l2 2h4a2 2 0 012 2v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.3\"\n                        />\n                      </svg>\n                      <span>Projects</span>\n                    </div>\n                    <div class=\"hg-icuser\">J</div>\n                  </div>\n\n                  <!-- ══ HISTORY PANEL (105px) ══ -->\n                  <div class=\"hg-histpanel\">\n                    <div class=\"hg-histhead\">\n                      <span>Video Agent</span>\n                      <svg viewBox=\"0 0 14 14\" fill=\"none\" width=\"12\" height=\"12\">\n                        <rect\n                          x=\"1\"\n                          y=\"1\"\n                          width=\"4.5\"\n                          height=\"12\"\n                          rx=\"1\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.2\"\n                        />\n                        <rect\n                          x=\"8.5\"\n                          y=\"1\"\n                          width=\"4.5\"\n                          height=\"12\"\n                          rx=\"1\"\n                          stroke=\"currentColor\"\n                          stroke-width=\"1.2\"\n                        />\n                      </svg>\n                    </div>\n                    <div class=\"hg-newitem\">\n                      <svg viewBox=\"0 0 12 12\" fill=\"none\" width=\"11\" height=\"11\">\n                        <path\n                          d=\"M1 6.5L6 1.5l5 5V11H7.5V8H4.5v3H1V6.5Z\"\n                          fill=\"#3B82F6\"\n                          fill-opacity=\"0.85\"\n                        />\n                      </svg>\n                      New video\n                    </div>\n                    <div class=\"hg-histcat\">YESTERDAY</div>\n                    <div class=\"hg-histrow\">AI Skills Gap: Alien</div>\n                    <div class=\"hg-histcat\">PREVIOUS 3 DAYS</div>\n                    <div class=\"hg-histrow\">AI Skills Gap: Alien</div>\n                    <div class=\"hg-histrow\">Product Strategy: An AI...</div>\n                    <div class=\"hg-histrow\">S9</div>\n                    <div class=\"hg-histrow\">S7</div>\n                    <div class=\"hg-histrow\">S5</div>\n                    <div class=\"hg-histrow\">S3</div>\n                    <div class=\"hg-histcat\">PREVIOUS 7 DAYS</div>\n                    <div class=\"hg-histrow\">S8 lock</div>\n                    <div class=\"hg-histrow\">S4</div>\n                    <div class=\"hg-histrow\">S2</div>\n                    <div class=\"hg-histrow\">Moody t2</div>\n                  </div>\n\n                  <!-- ══ MAIN CONTENT (359px) ══ -->\n                  <div class=\"hg-maincnt\">\n                    <!-- Top-right icon cluster -->\n                    <div class=\"hg-toprighticons\">\n                      <div class=\"hg-ticon\">\n                        <svg viewBox=\"0 0 14 14\" fill=\"none\" width=\"11\" height=\"11\">\n                          <circle cx=\"6\" cy=\"6\" r=\"4.5\" stroke=\"currentColor\" stroke-width=\"1.3\" />\n                          <path\n                            d=\"M9.5 9.5l2.5 2.5\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.3\"\n                            stroke-linecap=\"round\"\n                          />\n                        </svg>\n                      </div>\n                      <div class=\"hg-ticon hg-notifico\">\n                        <svg viewBox=\"0 0 14 14\" fill=\"none\" width=\"11\" height=\"11\">\n                          <path\n                            d=\"M7 1.5a4 4 0 00-4 4v3l-1 2h10l-1-2v-3a4 4 0 00-4-4z\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.2\"\n                          />\n                          <path\n                            d=\"M5.5 10.5a1.5 1.5 0 003 0\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.2\"\n                          />\n                        </svg>\n                        <div class=\"hg-notifbadge\">99+</div>\n                      </div>\n                      <div class=\"hg-ticon\">\n                        <svg viewBox=\"0 0 14 14\" fill=\"none\" width=\"11\" height=\"11\">\n                          <path\n                            d=\"M7 2l1.2 3.8H12L9 8.2l1.2 3.8L7 9.5l-3.2 2.5L5 8.2 2 5.8h3.8z\"\n                            stroke=\"currentColor\"\n                            stroke-width=\"1.1\"\n                          />\n                        </svg>\n                      </div>\n                    </div>\n\n                    <!-- Hero heading -->\n                    <div class=\"hg-herotitle\">Turn your ideas into<br />production-ready video</div>\n\n                    <!-- ─ Create card ─ -->\n                    <div class=\"hg-createcard\" id=\"hgCreateCard\">\n                      <!-- Selector row: Avatar | Voice | Style -->\n                      <div class=\"hg-selrow\">\n                        <div class=\"hg-sel\">\n                          <span class=\"hg-sellbl\">Avatar</span>\n                          <div class=\"hg-selbox\">\n                            <div class=\"hg-avphoto\"></div>\n                            <span class=\"hg-seltxt\">Jordan</span>\n                          </div>\n                        </div>\n                        <div class=\"hg-seldiv\"></div>\n                        <div class=\"hg-sel\">\n                          <span class=\"hg-sellbl\">Voice</span>\n                          <div class=\"hg-selbox\">\n                            <div class=\"hg-voicebars\">\n                              <div class=\"hg-vbar\" style=\"height: 5px\"></div>\n                              <div class=\"hg-vbar\" style=\"height: 9px\"></div>\n                              <div class=\"hg-vbar\" style=\"height: 7px\"></div>\n                              <div class=\"hg-vbar\" style=\"height: 11px\"></div>\n                              <div class=\"hg-vbar\" style=\"height: 5px\"></div>\n                            </div>\n                            <span class=\"hg-seltxt\">Auto</span>\n                          </div>\n                        </div>\n                        <div class=\"hg-seldiv\"></div>\n                        <div class=\"hg-sel\">\n                          <span class=\"hg-sellbl\">Style</span>\n                          <div class=\"hg-selbox\">\n                            <div class=\"hg-styleico\">\n                              <svg viewBox=\"0 0 14 14\" fill=\"none\" width=\"12\" height=\"12\">\n                                <rect\n                                  x=\"1\"\n                                  y=\"1\"\n                                  width=\"12\"\n                                  height=\"12\"\n                                  rx=\"2\"\n                                  stroke=\"currentColor\"\n                                  stroke-width=\"1.2\"\n                                />\n                                <path\n                                  d=\"M4.5 7l2 2 3-3\"\n                                  stroke=\"currentColor\"\n                                  stroke-width=\"1.2\"\n                                  stroke-linecap=\"round\"\n                                />\n                              </svg>\n                            </div>\n                            <span class=\"hg-seltxt\">Auto</span>\n                          </div>\n                        </div>\n                        <div class=\"hg-settico\">\n                          <svg viewBox=\"0 0 14 14\" fill=\"none\" width=\"13\" height=\"13\">\n                            <circle cx=\"7\" cy=\"7\" r=\"2\" stroke=\"currentColor\" stroke-width=\"1.2\" />\n                            <path\n                              d=\"M7 1.5V3M7 11v1.5M1.5 7H3M11 7h1.5M3.4 3.4l1 1M9.6 9.6l1 1M3.4 10.6l1-1M9.6 4.4l1-1\"\n                              stroke=\"currentColor\"\n                              stroke-width=\"1.2\"\n                              stroke-linecap=\"round\"\n                            />\n                          </svg>\n                        </div>\n                      </div>\n                      <!-- Input -->\n                      <div class=\"hg-cinput\">Describe your video idea ...</div>\n                      <!-- Bottom bar -->\n                      <div class=\"hg-cbottom\">\n                        <div class=\"hg-cbleft\">\n                          <div class=\"hg-cbtn\">\n                            <svg viewBox=\"0 0 12 12\" fill=\"none\" width=\"11\" height=\"11\">\n                              <path\n                                d=\"M6 2v8M2 6h8\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"1.4\"\n                                stroke-linecap=\"round\"\n                              />\n                            </svg>\n                          </div>\n                          <div class=\"hg-cbtn\">\n                            <svg viewBox=\"0 0 12 12\" fill=\"none\" width=\"11\" height=\"11\">\n                              <path\n                                d=\"M6 1.5l1 3H10L7.5 6.5l1 3L6 8 3.5 9.5l1-3L2 4.5H5z\"\n                                fill=\"#9CA3AF\"\n                              />\n                            </svg>\n                          </div>\n                          <div class=\"hg-cbtn\">\n                            <svg viewBox=\"0 0 12 12\" fill=\"none\" width=\"11\" height=\"11\">\n                              <path\n                                d=\"M1.5 3h9M1.5 6h9M1.5 9h6\"\n                                stroke=\"currentColor\"\n                                stroke-width=\"1.3\"\n                                stroke-linecap=\"round\"\n                              />\n                            </svg>\n                          </div>\n                        </div>\n                        <div class=\"hg-cbright\">\n                          <div class=\"hg-genbtn\">\n                            <svg viewBox=\"0 0 10 10\" fill=\"none\" width=\"9\" height=\"9\">\n                              <path d=\"M5 1l1 3h3L7 6l1 3L5 7.5 2 9l1-3L1 4h3z\" fill=\"#6B7280\" />\n                            </svg>\n                            Generate\n                            <svg viewBox=\"0 0 8 6\" fill=\"none\" width=\"8\" height=\"6\">\n                              <path\n                                d=\"M1 1l3 3 3-3\"\n                                stroke=\"#6B7280\"\n                                stroke-width=\"1.3\"\n                                stroke-linecap=\"round\"\n                              />\n                            </svg>\n                          </div>\n                          <div class=\"hg-submitbtn\">\n                            <svg viewBox=\"0 0 12 12\" fill=\"none\" width=\"10\" height=\"10\">\n                              <path\n                                d=\"M6 9V3M3 6l3-3 3 3\"\n                                stroke=\"white\"\n                                stroke-width=\"1.5\"\n                                stroke-linecap=\"round\"\n                                stroke-linejoin=\"round\"\n                              />\n                            </svg>\n                          </div>\n                        </div>\n                      </div>\n                    </div>\n\n                    <!-- Styles from community -->\n                    <div class=\"hg-stylessec\">\n                      <div class=\"hg-stitle\">Styles from the community</div>\n                      <div class=\"hg-spills\">\n                        <div class=\"hg-spill hg-spactive\">All Styles</div>\n                        <div class=\"hg-spill\">Retro Tech</div>\n                        <div class=\"hg-spill\">Iconic Artist</div>\n                        <div class=\"hg-spill\">Pop Culture</div>\n                        <div class=\"hg-spill\">Print</div>\n                        <div class=\"hg-spill\">Cinematic</div>\n                      </div>\n                      <div class=\"hg-scards\">\n                        <div\n                          class=\"hg-sc\"\n                          style=\"background: linear-gradient(135deg, #1b2a5e, #2d4a9a)\"\n                        >\n                          <span class=\"hg-sclbl\">IMPLEMENTATION DEPTH</span>\n                        </div>\n                        <div\n                          class=\"hg-sc\"\n                          style=\"background: linear-gradient(160deg, #c9ad88, #b89668)\"\n                        >\n                          <span\n                            class=\"hg-sclbl\"\n                            style=\"font-style: italic; color: #3d2810; font-size: 5.5px\"\n                            >Strategy means saying NO</span\n                          >\n                        </div>\n                        <div\n                          class=\"hg-sc\"\n                          style=\"\n                            background: #ede9e0;\n                            display: flex;\n                            align-items: center;\n                            justify-content: center;\n                          \"\n                        >\n                          <span style=\"color: #cc4422; font-size: 14px; font-weight: 700\">?</span>\n                        </div>\n                        <div\n                          class=\"hg-sc\"\n                          style=\"background: linear-gradient(135deg, #8b1515, #c92020)\"\n                        >\n                          <span class=\"hg-sclbl\" style=\"color: #ffd9a0; font-size: 5px\"\n                            >THINK BIG.<br />START SMALL.</span\n                          >\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Figma selection handles on the first video card -->\n                <div class=\"selection-ring\" id=\"selectionRing\">\n                  <div class=\"sel-handle tl\"></div>\n                  <div class=\"sel-handle tr\"></div>\n                  <div class=\"sel-handle bl\"></div>\n                  <div class=\"sel-handle br\"></div>\n                  <div class=\"sel-label\">Create Card · W 322 H 110</div>\n                </div>\n              </div>\n\n              <!-- DESIGN PROPERTIES PANEL -->\n              <div class=\"fig-props\" id=\"figProps\">\n                <div class=\"panel-tabs\">\n                  <span class=\"ptab active\">Design</span>\n                  <span class=\"ptab\">Prototype</span>\n                  <span class=\"ptab\">Inspect</span>\n                </div>\n\n                <!-- Alignment row -->\n                <div class=\"prop-align\">\n                  <div class=\"align-btn\">⬓</div>\n                  <div class=\"align-btn\">⬒</div>\n                  <div class=\"align-btn active-align\">⬔</div>\n                  <div class=\"align-divider\"></div>\n                  <div class=\"align-btn\">⬕</div>\n                  <div class=\"align-btn\">⬗</div>\n                </div>\n\n                <!-- Frame section -->\n                <div class=\"prop-section\">\n                  <div class=\"prop-row-2\">\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">W</span>\n                      <span class=\"prop-val\">108</span>\n                    </div>\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">H</span>\n                      <span class=\"prop-val\">34</span>\n                    </div>\n                  </div>\n                  <div class=\"prop-row-2\">\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">X</span>\n                      <span class=\"prop-val\">1244</span>\n                    </div>\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">Y</span>\n                      <span class=\"prop-val\">18</span>\n                    </div>\n                  </div>\n                  <div class=\"prop-row-2\">\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">↺</span>\n                      <span class=\"prop-val\">0°</span>\n                    </div>\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">⌐</span>\n                      <span class=\"prop-val\">8</span>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Auto layout -->\n                <div class=\"prop-section\">\n                  <div class=\"prop-section-head\">\n                    <span class=\"prop-section-label\">Auto layout</span>\n                    <span class=\"prop-section-icon\">−</span>\n                  </div>\n                  <div class=\"prop-row-2\">\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">→</span>\n                      <span class=\"prop-val\">12px</span>\n                    </div>\n                    <div class=\"prop-field\">\n                      <span class=\"prop-pre\">⊡</span>\n                      <span class=\"prop-val\">14 / 8</span>\n                    </div>\n                  </div>\n                </div>\n\n                <!-- Fill -->\n                <div class=\"prop-section\">\n                  <div class=\"prop-section-head\">\n                    <span class=\"prop-section-label\">Fill</span>\n                    <span class=\"prop-section-icon\">+</span>\n                  </div>\n                  <div class=\"fill-row\">\n                    <div class=\"fill-preview\" style=\"background: #6366f1\"></div>\n                    <span class=\"fill-hex\">6366F1</span>\n                    <span class=\"fill-pct\">100%</span>\n                  </div>\n                </div>\n\n                <!-- Stroke -->\n                <div class=\"prop-section\">\n                  <div class=\"prop-section-head\">\n                    <span class=\"prop-section-label\">Stroke</span>\n                    <span class=\"prop-section-icon\">+</span>\n                  </div>\n                  <div class=\"fill-row muted\">\n                    <span class=\"prop-empty\">No strokes</span>\n                  </div>\n                </div>\n\n                <!-- Effects -->\n                <div class=\"prop-section\">\n                  <div class=\"prop-section-head\">\n                    <span class=\"prop-section-label\">Effects</span>\n                    <span class=\"prop-section-icon\">+</span>\n                  </div>\n                  <div class=\"effect-row\">\n                    <div class=\"effect-dot\"></div>\n                    <span class=\"effect-name\">Drop shadow</span>\n                  </div>\n                </div>\n\n                <!-- Export -->\n                <div class=\"prop-section\">\n                  <div class=\"prop-section-head\">\n                    <span class=\"prop-section-label\">Export</span>\n                    <span class=\"prop-section-icon\">+</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n            <!-- /fig-body -->\n          </div>\n          <!-- /ui-card -->\n\n          <!-- RIGHT DEPTH FACE -->\n          <div class=\"depth-right\" id=\"depthRight\"></div>\n        </div>\n        <!-- /card-wrapper -->\n      </div>\n      <!-- /scene -->\n\n      <!-- ══════════════════════════════════════════\n         OUTRO: Logo rebuild + tagline + URL pill\n    ══════════════════════════════════════════ -->\n      <div class=\"outro-layer\" id=\"outroLayer\">\n        <svg class=\"outro-svg\" viewBox=\"0 0 1920 1080\" xmlns=\"http://www.w3.org/2000/svg\">\n          <g class=\"outro-logo\" transform=\"translate(880, 310)\">\n            <!-- Fill layer -->\n            <path\n              class=\"ol-fill ol-fill-1\"\n              d=\"M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z\"\n              fill=\"#F24E1E\"\n              opacity=\"0\"\n            />\n            <path\n              class=\"ol-fill ol-fill-2\"\n              d=\"M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z\"\n              fill=\"#FF7262\"\n              opacity=\"0\"\n            />\n            <path\n              class=\"ol-fill ol-fill-3\"\n              d=\"M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z\"\n              fill=\"#A259FF\"\n              opacity=\"0\"\n            />\n            <circle class=\"ol-fill ol-fill-4\" cx=\"120\" cy=\"120\" r=\"40\" fill=\"#1ABCFE\" opacity=\"0\" />\n            <path\n              class=\"ol-fill ol-fill-5\"\n              d=\"M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z\"\n              fill=\"#0ACF83\"\n              opacity=\"0\"\n            />\n            <!-- Stroke layer -->\n            <path\n              class=\"ol-stroke ol-stroke-1\"\n              d=\"M80 0H40C17.9 0 0 17.9 0 40S17.9 80 40 80H80V0Z\"\n              fill=\"none\"\n              stroke=\"#F24E1E\"\n              stroke-width=\"2\"\n            />\n            <path\n              class=\"ol-stroke ol-stroke-2\"\n              d=\"M80 0V80H120C142.1 80 160 62.1 160 40S142.1 0 120 0H80Z\"\n              fill=\"none\"\n              stroke=\"#FF7262\"\n              stroke-width=\"2\"\n            />\n            <path\n              class=\"ol-stroke ol-stroke-3\"\n              d=\"M80 80H40C17.9 80 0 97.9 0 120S17.9 160 40 160H80V80Z\"\n              fill=\"none\"\n              stroke=\"#A259FF\"\n              stroke-width=\"2\"\n            />\n            <circle\n              class=\"ol-stroke ol-stroke-4\"\n              cx=\"120\"\n              cy=\"120\"\n              r=\"40\"\n              fill=\"none\"\n              stroke=\"#1ABCFE\"\n              stroke-width=\"2\"\n            />\n            <path\n              class=\"ol-stroke ol-stroke-5\"\n              d=\"M40 160C17.9 160 0 177.9 0 200S17.9 240 40 240 80 222.1 80 200V160H40Z\"\n              fill=\"none\"\n              stroke=\"#0ACF83\"\n              stroke-width=\"2\"\n            />\n          </g>\n\n          <!-- Tagline — individual tspan letters for stagger -->\n          <text class=\"outro-tagline\" x=\"960\" y=\"648\" text-anchor=\"middle\">\n            <tspan class=\"otl\">N</tspan>\n            <tspan class=\"otl\">o</tspan>\n            <tspan class=\"otl\">t</tspan>\n            <tspan class=\"otl\">h</tspan>\n            <tspan class=\"otl\">i</tspan>\n            <tspan class=\"otl\">n</tspan>\n            <tspan class=\"otl\">g</tspan>\n            <tspan class=\"otl\"></tspan>\n            <tspan class=\"otl\">g</tspan>\n            <tspan class=\"otl\">r</tspan>\n            <tspan class=\"otl\">e</tspan>\n            <tspan class=\"otl\">a</tspan>\n            <tspan class=\"otl\">t</tspan>\n            <tspan class=\"otl\"></tspan>\n            <tspan class=\"otl\">i</tspan>\n            <tspan class=\"otl\">s</tspan>\n            <tspan class=\"otl\"></tspan>\n            <tspan class=\"otl\">m</tspan>\n            <tspan class=\"otl\">a</tspan>\n            <tspan class=\"otl\">d</tspan>\n            <tspan class=\"otl\">e</tspan>\n            <tspan class=\"otl\"></tspan>\n            <tspan class=\"otl\">a</tspan>\n            <tspan class=\"otl\">l</tspan>\n            <tspan class=\"otl\">o</tspan>\n            <tspan class=\"otl\">n</tspan>\n            <tspan class=\"otl\">e</tspan>\n            <tspan class=\"otl\">.</tspan>\n          </text>\n\n          <!-- URL pill -->\n          <rect\n            class=\"url-border\"\n            x=\"885\"\n            y=\"688\"\n            width=\"150\"\n            height=\"40\"\n            rx=\"20\"\n            fill=\"none\"\n            stroke=\"#3C3C3C\"\n            stroke-width=\"1.5\"\n          />\n          <rect\n            class=\"url-bg\"\n            x=\"885\"\n            y=\"688\"\n            width=\"150\"\n            height=\"40\"\n            rx=\"20\"\n            fill=\"#2C2C2C\"\n            opacity=\"0\"\n          />\n          <text\n            class=\"url-text\"\n            x=\"960\"\n            y=\"713\"\n            text-anchor=\"middle\"\n            fill=\"#868686\"\n            font-size=\"16\"\n            font-weight=\"400\"\n            opacity=\"0\"\n          >\n            figma.com\n          </text>\n        </svg>\n      </div>\n\n      <!-- Fade to black -->\n      <div class=\"outro-fade\" id=\"outroFade\"></div>\n\n      <style>\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap\");\n\n        /*\n        Figma palette:\n        canvas-bg:    #1E1E1E\n        panel-bg:     #2C2C2C\n        panel-dark:   #252525\n        toolbar:      #2C2C2C\n        divider:      rgba(255,255,255,0.1)\n        text:         #E8E8E8\n        text-muted:   #868686\n        text-dim:     #555555\n        selected-bg:  rgba(24,160,251,0.14)\n        blue:         #18A0FB\n        purple:       #A259FF\n        green:        #0ACF83\n        red:          #F24E1E\n        orange:       #FF7262\n      */\n\n        [data-composition-id=\"ui-3d-reveal\"] {\n          position: relative;\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          font-family: \"Inter\", sans-serif;\n          background: #111111;\n        }\n\n        /* ── Background ── */\n        [data-composition-id=\"ui-3d-reveal\"] .bg-base {\n          position: absolute;\n          inset: 0;\n          background: #111111;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .bg-glow {\n          position: absolute;\n          inset: 0;\n          background:\n            radial-gradient(\n              ellipse 900px 600px at 50% 52%,\n              rgba(24, 160, 251, 0.06) 0%,\n              transparent 65%\n            ),\n            radial-gradient(\n              ellipse 500px 300px at 20% 75%,\n              rgba(162, 89, 255, 0.04) 0%,\n              transparent 60%\n            );\n          pointer-events: none;\n        }\n\n        /* ── Scene ── */\n        [data-composition-id=\"ui-3d-reveal\"] .scene {\n          position: absolute;\n          inset: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          perspective: 2800px;\n          perspective-origin: 50% 50%;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .card-glow {\n          position: absolute;\n          width: 1200px;\n          height: 780px;\n          border-radius: 24px;\n          background: radial-gradient(\n            ellipse at 50% 50%,\n            rgba(24, 160, 251, 0.18) 0%,\n            transparent 65%\n          );\n          filter: blur(50px);\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .card-wrapper {\n          position: relative;\n          transform-style: preserve-3d;\n          will-change: transform;\n        }\n\n        /* ── Front face ── */\n        [data-composition-id=\"ui-3d-reveal\"] .ui-card {\n          width: 1100px;\n          height: 680px;\n          background: #1e1e1e;\n          border-radius: 12px;\n          overflow: hidden;\n          border: 1px solid rgba(255, 255, 255, 0.1);\n          position: relative;\n          box-shadow:\n            inset -1px 0 0 rgba(24, 160, 251, 0.2),\n            0 40px 120px rgba(0, 0, 0, 0.7);\n        }\n\n        /* ── Depth face ── */\n        [data-composition-id=\"ui-3d-reveal\"] .depth-right {\n          position: absolute;\n          top: 12px;\n          left: 1100px;\n          width: 10px;\n          height: 656px;\n          transform-origin: 0% 50%;\n          transform: rotateY(90deg);\n          background: linear-gradient(\n            to right,\n            rgba(80, 160, 255, 0.4) 0%,\n            rgba(40, 100, 200, 0.2) 40%,\n            rgba(10, 20, 50, 0.9) 100%\n          );\n          border-radius: 3px 2px 2px 3px;\n        }\n\n        /* ═══════════════════════════\n         TOOLBAR\n      ═══════════════════════════ */\n        [data-composition-id=\"ui-3d-reveal\"] .fig-toolbar {\n          height: 48px;\n          background: #2c2c2c;\n          border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n          display: flex;\n          align-items: center;\n          padding: 0 12px;\n          gap: 0;\n          flex-shrink: 0;\n          position: relative;\n          z-index: 2;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .tb-left {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          flex: 0 0 auto;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .fig-logo {\n          width: 32px;\n          height: 32px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          border-radius: 6px;\n          cursor: default;\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .fig-logo:hover {\n          background: rgba(255, 255, 255, 0.08);\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .tool-divider {\n          width: 1px;\n          height: 20px;\n          background: rgba(255, 255, 255, 0.12);\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .tool-group {\n          display: flex;\n          align-items: center;\n          gap: 2px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .tool-btn {\n          width: 30px;\n          height: 30px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          border-radius: 5px;\n          color: #868686;\n          cursor: default;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .tool-btn.active {\n          background: rgba(24, 160, 251, 0.18);\n          color: #18a0fb;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .tb-center {\n          flex: 1;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          gap: 5px;\n          font-size: 12px;\n          color: #e8e8e8;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .file-name {\n          font-weight: 500;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .file-chevron {\n          color: #555;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .file-page {\n          color: #868686;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .file-arrow {\n          color: #868686;\n          margin-left: 2px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .tb-right {\n          flex: 0 0 auto;\n          display: flex;\n          align-items: center;\n          gap: 8px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .mode-tabs {\n          display: flex;\n          background: rgba(255, 255, 255, 0.06);\n          border-radius: 6px;\n          padding: 2px;\n          gap: 2px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .mode-tab {\n          font-size: 11px;\n          font-weight: 500;\n          color: #868686;\n          padding: 4px 10px;\n          border-radius: 4px;\n          cursor: default;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .mode-tab.active {\n          background: #3c3c3c;\n          color: #e8e8e8;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .share-btn {\n          display: flex;\n          align-items: center;\n          gap: 5px;\n          background: #18a0fb;\n          color: white;\n          font-size: 11px;\n          font-weight: 600;\n          padding: 6px 12px;\n          border-radius: 6px;\n          cursor: default;\n          white-space: nowrap;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .avatar-cluster {\n          display: flex;\n          align-items: center;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .fig-avatar {\n          width: 26px;\n          height: 26px;\n          border-radius: 50%;\n          font-size: 9px;\n          font-weight: 700;\n          color: white;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          border: 2px solid #2c2c2c;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .present-btn {\n          width: 28px;\n          height: 28px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          border-radius: 5px;\n          background: rgba(255, 255, 255, 0.06);\n          color: #868686;\n          font-size: 9px;\n          cursor: default;\n        }\n\n        /* ═══════════════════════════\n         BODY LAYOUT\n      ═══════════════════════════ */\n        [data-composition-id=\"ui-3d-reveal\"] .fig-body {\n          display: flex;\n          height: 632px; /* 680 - 48 toolbar */\n        }\n\n        /* ═══════════════════════════\n         LAYERS PANEL\n      ═══════════════════════════ */\n        [data-composition-id=\"ui-3d-reveal\"] .fig-layers {\n          width: 210px;\n          flex-shrink: 0;\n          background: #2c2c2c;\n          border-right: 1px solid rgba(255, 255, 255, 0.08);\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .panel-tabs {\n          display: flex;\n          border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ptab {\n          flex: 1;\n          text-align: center;\n          font-size: 11px;\n          font-weight: 500;\n          color: #868686;\n          padding: 9px 0 8px;\n          cursor: default;\n          border-bottom: 2px solid transparent;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ptab.active {\n          color: #e8e8e8;\n          border-bottom-color: #18a0fb;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .layer-search {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          padding: 7px 10px;\n          border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n          color: #555;\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .search-placeholder {\n          font-size: 11px;\n          color: #555;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .layer-list {\n          flex: 1;\n          overflow: hidden;\n          padding: 4px 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .layer-item {\n          display: flex;\n          align-items: center;\n          gap: 5px;\n          padding: 4px 8px;\n          font-size: 11px;\n          color: #868686;\n          cursor: default;\n          height: 26px;\n          white-space: nowrap;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .layer-item.page-item {\n          color: #e8e8e8;\n          font-weight: 500;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .layer-item.frame-item {\n          color: #e8e8e8;\n          font-weight: 500;\n          padding-left: 6px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .layer-item.indent-1 {\n          padding-left: 18px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .layer-item.indent-2 {\n          padding-left: 30px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .layer-item.comp-item {\n          color: #c9a0ff;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .frame-icon {\n          color: #6ca9ff !important;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .selected-layer {\n          background: rgba(24, 160, 251, 0.15);\n          border-radius: 4px;\n          color: #18a0fb !important;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .li-collapse {\n          color: #555;\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .li-icon {\n          flex-shrink: 0;\n          color: #868686;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .comp-icon {\n          color: #a259ff !important;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .page-bar {\n          display: flex;\n          align-items: center;\n          border-top: 1px solid rgba(255, 255, 255, 0.08);\n          padding: 0 4px;\n          height: 34px;\n          flex-shrink: 0;\n          gap: 2px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .pbar-tab {\n          font-size: 10px;\n          color: #868686;\n          padding: 4px 8px;\n          border-radius: 4px;\n          white-space: nowrap;\n          cursor: default;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .pbar-tab.active {\n          background: rgba(255, 255, 255, 0.08);\n          color: #e8e8e8;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .pbar-add {\n          font-size: 14px;\n          color: #555;\n          padding: 2px 6px;\n          cursor: default;\n          margin-left: auto;\n        }\n\n        /* ═══════════════════════════\n         CANVAS\n      ═══════════════════════════ */\n        [data-composition-id=\"ui-3d-reveal\"] .fig-canvas {\n          flex: 1;\n          background: #1e1e1e;\n          position: relative;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .canvas-frame-label {\n          position: absolute;\n          top: 18px;\n          left: 50%;\n          transform: translateX(-50%);\n          font-size: 10px;\n          color: #555;\n          white-space: nowrap;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .artboard {\n          width: 520px;\n          height: 360px;\n          background: #ffffff;\n          border-radius: 4px;\n          overflow: hidden;\n          position: relative;\n          display: flex;\n          box-shadow:\n            0 8px 40px rgba(0, 0, 0, 0.5),\n            0 0 0 1px rgba(0, 0, 0, 0.08);\n          margin-top: 20px;\n        }\n\n        /* ── Artboard content ── */\n        [data-composition-id=\"ui-3d-reveal\"] .ab-nav {\n          height: 44px;\n          background: #fff;\n          border-bottom: 1px solid #f0f0f0;\n          display: flex;\n          align-items: center;\n          padding: 0 20px;\n          gap: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-logo-mark {\n          width: 22px;\n          height: 22px;\n          background: #6366f1;\n          border-radius: 6px;\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-logo-text {\n          width: 48px;\n          height: 10px;\n          background: #1a1a1a;\n          border-radius: 3px;\n          margin-left: 8px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-nav-links {\n          display: flex;\n          gap: 14px;\n          flex: 1;\n          justify-content: center;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-link {\n          width: 28px;\n          height: 8px;\n          background: #d0d0d0;\n          border-radius: 3px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-cta-btn {\n          background: #6366f1;\n          color: white;\n          font-size: 10px;\n          font-weight: 600;\n          padding: 6px 14px;\n          border-radius: 6px;\n          white-space: nowrap;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-hero {\n          padding: 28px 24px 20px;\n          background: #fafafa;\n          border-bottom: 1px solid #f0f0f0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-badge {\n          display: inline-flex;\n          align-items: center;\n          font-size: 9px;\n          font-weight: 500;\n          color: #6366f1;\n          background: #eef2ff;\n          padding: 3px 8px;\n          border-radius: 20px;\n          margin-bottom: 10px;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-h1 {\n          font-size: 22px;\n          font-weight: 700;\n          color: #111;\n          line-height: 1.2;\n          letter-spacing: -0.04em;\n          margin-bottom: 8px;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-sub {\n          font-size: 10px;\n          color: #6b6b6b;\n          margin-bottom: 14px;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-hero-btns {\n          display: flex;\n          gap: 8px;\n          align-items: center;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-btn-primary {\n          background: #6366f1;\n          color: white;\n          font-size: 9px;\n          font-weight: 600;\n          padding: 7px 16px;\n          border-radius: 6px;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-btn-ghost {\n          font-size: 9px;\n          color: #6366f1;\n          font-weight: 500;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-cards {\n          display: flex;\n          gap: 10px;\n          padding: 16px 20px;\n          background: #fff;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-card {\n          flex: 1;\n          background: #f8f9fa;\n          border: 1px solid #efefef;\n          border-radius: 8px;\n          padding: 12px 10px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-card-icon {\n          width: 24px;\n          height: 24px;\n          border-radius: 6px;\n          margin-bottom: 8px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-card-title {\n          width: 70%;\n          height: 7px;\n          background: #d0d0d0;\n          border-radius: 3px;\n          margin-bottom: 6px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .ab-card-body {\n          width: 90%;\n          height: 6px;\n          background: #e8e8e8;\n          border-radius: 3px;\n        }\n\n        /* ── Selection handles ── */\n        [data-composition-id=\"ui-3d-reveal\"] .selection-ring {\n          position: absolute;\n          width: 322px;\n          height: 110px;\n          border: 1px solid #18a0fb;\n          pointer-events: none;\n          /* positioned over the create card in main content */\n          top: calc(50% - 40px);\n          left: calc(50% + 86px);\n          transform: translate(-50%, -50%);\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .sel-handle {\n          position: absolute;\n          width: 7px;\n          height: 7px;\n          background: white;\n          border: 1.5px solid #18a0fb;\n          border-radius: 1px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .sel-handle.tl {\n          top: -4px;\n          left: -4px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .sel-handle.tr {\n          top: -4px;\n          right: -4px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .sel-handle.bl {\n          bottom: -4px;\n          left: -4px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .sel-handle.br {\n          bottom: -4px;\n          right: -4px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .sel-label {\n          position: absolute;\n          top: -22px;\n          left: -1px;\n          font-size: 9px;\n          color: #18a0fb;\n          white-space: nowrap;\n          font-family: \"Inter\", sans-serif;\n          font-weight: 500;\n        }\n\n        /* ═══════════════════════════\n         PROPERTIES PANEL\n      ═══════════════════════════ */\n        [data-composition-id=\"ui-3d-reveal\"] .fig-props {\n          width: 240px;\n          flex-shrink: 0;\n          background: #2c2c2c;\n          border-left: 1px solid rgba(255, 255, 255, 0.08);\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-align {\n          display: flex;\n          align-items: center;\n          gap: 3px;\n          padding: 8px 12px;\n          border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .align-btn {\n          width: 24px;\n          height: 24px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          border-radius: 4px;\n          color: #868686;\n          font-size: 14px;\n          cursor: default;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .active-align {\n          background: rgba(255, 255, 255, 0.08);\n          color: #e8e8e8;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .align-divider {\n          width: 1px;\n          height: 16px;\n          background: rgba(255, 255, 255, 0.1);\n          margin: 0 2px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-section {\n          padding: 10px 12px;\n          border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-section-head {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          margin-bottom: 8px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-section-label {\n          font-size: 11px;\n          font-weight: 500;\n          color: #e8e8e8;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-section-icon {\n          font-size: 14px;\n          color: #555;\n          cursor: default;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-row-2 {\n          display: grid;\n          grid-template-columns: 1fr 1fr;\n          gap: 6px;\n          margin-bottom: 5px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-field {\n          display: flex;\n          align-items: center;\n          gap: 5px;\n          background: rgba(255, 255, 255, 0.06);\n          border-radius: 4px;\n          padding: 5px 7px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-pre {\n          font-size: 10px;\n          color: #555;\n          flex-shrink: 0;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-val {\n          font-size: 11px;\n          color: #e8e8e8;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .fill-row {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .fill-preview {\n          width: 18px;\n          height: 18px;\n          border-radius: 3px;\n          border: 1px solid rgba(255, 255, 255, 0.15);\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .fill-hex {\n          font-size: 11px;\n          color: #e8e8e8;\n          font-family: \"Inter\", sans-serif;\n          flex: 1;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .fill-pct {\n          font-size: 11px;\n          color: #868686;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .prop-empty {\n          font-size: 11px;\n          color: #555;\n          font-style: italic;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .effect-row {\n          display: flex;\n          align-items: center;\n          gap: 7px;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .effect-dot {\n          width: 8px;\n          height: 8px;\n          border-radius: 50%;\n          background: rgba(255, 255, 255, 0.2);\n          flex-shrink: 0;\n        }\n\n        [data-composition-id=\"ui-3d-reveal\"] .effect-name {\n          font-size: 11px;\n          color: #868686;\n        }\n\n        /* ═══════════════════════════\n         HEYGEN APP UI — LIGHT MODE\n      ═══════════════════════════ */\n\n        /* ── Icon nav (56px) ── */\n        [data-composition-id=\"ui-3d-reveal\"] .hg-icnav {\n          width: 56px;\n          flex-shrink: 0;\n          height: 360px;\n          background: #ffffff;\n          border-right: 1px solid #ebebeb;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          padding-top: 0;\n          position: relative;\n          overflow: hidden;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-iclogo {\n          width: 56px;\n          height: 50px;\n          flex-shrink: 0;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          border-bottom: 1px solid #f0f0f0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-icitem {\n          width: 100%;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 3px;\n          padding: 8px 0;\n          color: #9ca3af;\n          cursor: default;\n          flex-shrink: 0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-icitem span {\n          font-size: 7px;\n          color: inherit;\n          font-family: \"Inter\", sans-serif;\n          text-align: center;\n          line-height: 1;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-icactive {\n          color: #10b8a9 !important;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-icactive span {\n          color: #10b8a9 !important;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-icbg {\n          width: 34px;\n          height: 34px;\n          border-radius: 9px;\n          background: #10b8a9;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-icuser {\n          position: absolute;\n          bottom: 10px;\n          width: 26px;\n          height: 26px;\n          border-radius: 50%;\n          background: #1a1a1a;\n          font-size: 9px;\n          font-weight: 700;\n          color: white;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        /* ── History panel (120px) ── */\n        [data-composition-id=\"ui-3d-reveal\"] .hg-histpanel {\n          width: 120px;\n          flex-shrink: 0;\n          height: 360px;\n          background: #f7f7f8;\n          border-right: 1px solid #ebebeb;\n          display: flex;\n          flex-direction: column;\n          overflow: hidden;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-histhead {\n          height: 44px;\n          flex-shrink: 0;\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: 0 10px;\n          font-size: 10px;\n          font-weight: 600;\n          color: #111;\n          border-bottom: 1px solid #efefef;\n          font-family: \"Inter\", sans-serif;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-newitem {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          padding: 7px 8px;\n          margin: 6px 6px 0;\n          background: #e8f0fe;\n          border-radius: 7px;\n          font-size: 9.5px;\n          font-weight: 500;\n          color: #1a1a1a;\n          flex-shrink: 0;\n          font-family: \"Inter\", sans-serif;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-histcat {\n          font-size: 7px;\n          font-weight: 600;\n          color: #b0b0b0;\n          letter-spacing: 0.06em;\n          padding: 9px 10px 3px;\n          flex-shrink: 0;\n          font-family: \"Inter\", sans-serif;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-histrow {\n          padding: 3.5px 10px;\n          font-size: 9px;\n          color: #444;\n          white-space: nowrap;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          flex-shrink: 0;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        /* ── Main content (359px) ── */\n        [data-composition-id=\"ui-3d-reveal\"] .hg-maincnt {\n          flex: 1;\n          height: 360px;\n          background: #ffffff;\n          position: relative;\n          display: flex;\n          flex-direction: column;\n          padding: 10px 14px 10px;\n          overflow: hidden;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-toprighticons {\n          position: absolute;\n          top: 9px;\n          right: 10px;\n          display: flex;\n          align-items: center;\n          gap: 6px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-ticon {\n          width: 26px;\n          height: 26px;\n          border-radius: 50%;\n          border: 1px solid #e5e7eb;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          color: #6b7280;\n          cursor: default;\n          position: relative;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-notifico {\n          position: relative;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-notifbadge {\n          position: absolute;\n          top: -5px;\n          right: -7px;\n          background: #ef4444;\n          color: white;\n          font-size: 5.5px;\n          font-weight: 700;\n          padding: 1.5px 3px;\n          border-radius: 8px;\n          font-family: \"Inter\", sans-serif;\n          border: 1.5px solid white;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-herotitle {\n          font-size: 15px;\n          font-weight: 800;\n          color: #111111;\n          line-height: 1.22;\n          letter-spacing: -0.04em;\n          margin-bottom: 12px;\n          font-family: \"Inter\", sans-serif;\n          padding-right: 84px;\n          margin-top: 2px;\n        }\n\n        /* ── Create card ── */\n        [data-composition-id=\"ui-3d-reveal\"] .hg-createcard {\n          border: 2px solid #7dd4cf;\n          border-radius: 12px;\n          overflow: hidden;\n          background: #ffffff;\n          flex-shrink: 0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-selrow {\n          display: flex;\n          align-items: stretch;\n          border-bottom: 1px solid #f3f4f6;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-sel {\n          flex: 1;\n          padding: 8px 10px;\n          display: flex;\n          flex-direction: column;\n          gap: 5px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-seldiv {\n          width: 1px;\n          background: #f0f0f0;\n          flex-shrink: 0;\n          margin: 8px 0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-settico {\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          padding: 0 10px;\n          color: #9ca3af;\n          flex-shrink: 0;\n          border-left: 1px solid #f0f0f0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-sellbl {\n          font-size: 8px;\n          color: #9ca3af;\n          font-weight: 500;\n          font-family: \"Inter\", sans-serif;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-selbox {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n          background: #f4f4f5;\n          border-radius: 7px;\n          padding: 5px 7px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-avphoto {\n          width: 30px;\n          height: 26px;\n          border-radius: 5px;\n          flex-shrink: 0;\n          background: linear-gradient(170deg, #7a4b2a 0%, #b07540 45%, #d4a070 100%);\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-seltxt {\n          font-size: 9px;\n          font-weight: 500;\n          color: #1a1a1a;\n          font-family: \"Inter\", sans-serif;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-voicebars {\n          display: flex;\n          align-items: center;\n          gap: 2px;\n          width: 22px;\n          justify-content: center;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-vbar {\n          width: 2.5px;\n          background: #c4c4c4;\n          border-radius: 1.5px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-styleico {\n          width: 22px;\n          height: 22px;\n          background: #e8e8e8;\n          border-radius: 5px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          color: #888;\n          flex-shrink: 0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-cinput {\n          padding: 10px 12px 8px;\n          font-size: 10px;\n          color: #c4c4c4;\n          font-family: \"Inter\", sans-serif;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-cbottom {\n          display: flex;\n          align-items: center;\n          justify-content: space-between;\n          padding: 6px 10px;\n          border-top: 1px solid #f3f4f6;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-cbleft {\n          display: flex;\n          align-items: center;\n          gap: 6px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-cbtn {\n          width: 24px;\n          height: 24px;\n          border: 1px solid #e4e4e7;\n          border-radius: 6px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          color: #6b7280;\n          cursor: default;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-cbright {\n          display: flex;\n          align-items: center;\n          gap: 5px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-genbtn {\n          display: flex;\n          align-items: center;\n          gap: 4px;\n          background: #f4f4f5;\n          border: 1px solid #e4e4e7;\n          border-radius: 8px;\n          padding: 5px 9px;\n          font-size: 9px;\n          font-weight: 500;\n          color: #374151;\n          font-family: \"Inter\", sans-serif;\n          cursor: default;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-submitbtn {\n          width: 26px;\n          height: 26px;\n          border-radius: 50%;\n          background: #111111;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n          cursor: default;\n        }\n\n        /* ── Styles from community ── */\n        [data-composition-id=\"ui-3d-reveal\"] .hg-stylessec {\n          margin-top: 10px;\n          flex: 1;\n          overflow: hidden;\n          display: flex;\n          flex-direction: column;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-stitle {\n          font-size: 10.5px;\n          font-weight: 600;\n          color: #111;\n          margin-bottom: 7px;\n          flex-shrink: 0;\n          font-family: \"Inter\", sans-serif;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-spills {\n          display: flex;\n          gap: 5px;\n          margin-bottom: 8px;\n          flex-shrink: 0;\n          overflow: hidden;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-spill {\n          font-size: 8.5px;\n          font-weight: 500;\n          white-space: nowrap;\n          padding: 4px 9px;\n          border: 1.5px solid #e0e0e3;\n          border-radius: 20px;\n          color: #555;\n          font-family: \"Inter\", sans-serif;\n          cursor: default;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-spactive {\n          border-color: #10b8a9;\n          color: #10b8a9;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-scards {\n          display: grid;\n          grid-template-columns: repeat(4, 1fr);\n          gap: 6px;\n          flex: 1;\n          overflow: hidden;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-sc {\n          border-radius: 6px;\n          overflow: hidden;\n          display: flex;\n          align-items: flex-end;\n          padding: 5px;\n          position: relative;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .hg-sclbl {\n          font-size: 6px;\n          font-weight: 700;\n          color: rgba(255, 255, 255, 0.85);\n          font-family: \"Inter\", sans-serif;\n          letter-spacing: 0.04em;\n          line-height: 1.3;\n          text-transform: uppercase;\n        }\n\n        /* ══ INTRO LAYER ══ */\n        [data-composition-id=\"ui-3d-reveal\"] .intro-layer {\n          position: absolute;\n          inset: 0;\n          z-index: 10;\n          pointer-events: none;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .intro-svg {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .il-stroke {\n          stroke-linecap: round;\n          stroke-linejoin: round;\n        }\n\n        /* ══ OUTRO LAYER ══ */\n        [data-composition-id=\"ui-3d-reveal\"] .outro-layer {\n          position: absolute;\n          inset: 0;\n          z-index: 10;\n          pointer-events: none;\n          opacity: 0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .outro-svg {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .ol-stroke {\n          stroke-linecap: round;\n          stroke-linejoin: round;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .outro-tagline {\n          font-family: \"Inter\", sans-serif;\n          font-size: 42px;\n          font-weight: 500;\n          fill: #fff;\n          letter-spacing: -0.5px;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .otl {\n          opacity: 0;\n        }\n        [data-composition-id=\"ui-3d-reveal\"] .url-border {\n          stroke-dasharray: 500;\n          stroke-dashoffset: 500;\n        }\n\n        /* ══ OUTRO FADE OVERLAY ══ */\n        [data-composition-id=\"ui-3d-reveal\"] .outro-fade {\n          position: absolute;\n          inset: 0;\n          background: #000;\n          opacity: 0;\n          z-index: 20;\n          pointer-events: none;\n        }\n      </style>\n\n      <script>\n        (function () {\n          var S = '[data-composition-id=\"ui-3d-reveal\"]';\n          var tl = gsap.timeline({ paused: true });\n\n          var wrapper = document.querySelector(S + \" .card-wrapper\");\n          var scene = document.querySelector(S + \" .scene\");\n          var cardGlow = document.querySelector(S + \" .card-glow\");\n\n          // ── Calculate intro stroke lengths ──\n          document.querySelectorAll(S + \" .il-stroke\").forEach(function (el) {\n            var len =\n              el.tagName === \"circle\"\n                ? 2 * Math.PI * parseFloat(el.getAttribute(\"r\"))\n                : el.getTotalLength();\n            el.style.strokeDasharray = len;\n            el.style.strokeDashoffset = len;\n          });\n\n          // ── Calculate outro stroke lengths ──\n          document.querySelectorAll(S + \" .ol-stroke\").forEach(function (el) {\n            var len =\n              el.tagName === \"circle\"\n                ? 2 * Math.PI * parseFloat(el.getAttribute(\"r\"))\n                : el.getTotalLength();\n            el.style.strokeDasharray = len;\n            el.style.strokeDashoffset = len;\n          });\n\n          // ─────────────────────────────────────────────────────\n          // INITIAL STATE\n          // ─────────────────────────────────────────────────────\n          gsap.set(wrapper, { opacity: 0, scale: 0.74, rotationY: 0, y: 24 });\n          gsap.set(\n            [\n              S + \" .fig-toolbar\",\n              S + \" .fig-layers\",\n              S + \" .fig-props\",\n              S + \" .fig-canvas\",\n              S + \" .layer-item\",\n              S + \" .selection-ring\",\n            ],\n            { opacity: 0 },\n          );\n          gsap.set(S + \" .fig-toolbar\", { y: -10 });\n          gsap.set(S + \" .fig-layers\", { x: -16 });\n          gsap.set(S + \" .fig-props\", { x: 16 });\n          gsap.set(S + \" .layer-item\", { x: -8 });\n          gsap.set(S + \" .artboard\", { scale: 0.94, opacity: 0 });\n\n          // ═════════════════════════════════════════════════════\n          // PHASE 0 — LOGO INTRO  (0 – 1.35s)\n          // Stroke draw cascade → color fill flash → scale to 0\n          // ═════════════════════════════════════════════════════\n\n          tl.to(\n            S + \" .il-stroke-1\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"power1.inOut\" },\n            0.0,\n          );\n          tl.to(\n            S + \" .il-stroke-2\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"power1.inOut\" },\n            0.06,\n          );\n          tl.to(\n            S + \" .il-stroke-3\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"power1.inOut\" },\n            0.12,\n          );\n          tl.to(\n            S + \" .il-stroke-4\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"power1.inOut\" },\n            0.18,\n          );\n          tl.to(\n            S + \" .il-stroke-5\",\n            { strokeDashoffset: 0, duration: 0.4, ease: \"power1.inOut\" },\n            0.24,\n          );\n\n          tl.to(S + \" .il-fill-1\", { opacity: 1, duration: 0.08 }, 0.5);\n          tl.to(S + \" .il-fill-2\", { opacity: 1, duration: 0.08 }, 0.54);\n          tl.to(S + \" .il-fill-3\", { opacity: 1, duration: 0.08 }, 0.58);\n          tl.to(S + \" .il-fill-4\", { opacity: 1, duration: 0.08 }, 0.62);\n          tl.to(S + \" .il-fill-5\", { opacity: 1, duration: 0.08 }, 0.66);\n          tl.to(S + \" .il-stroke\", { opacity: 0.3, duration: 0.15 }, 0.6);\n\n          // Scale the logo down to nothing\n          tl.to(S + \" .il-stroke\", { opacity: 0, duration: 0.2 }, 1.0);\n          tl.to(\n            S + \" .intro-logo\",\n            {\n              scale: 0,\n              transformOrigin: \"95px 142.5px\",\n              duration: 0.35,\n              ease: \"power2.in\",\n            },\n            1.0,\n          );\n\n          // ═════════════════════════════════════════════════════\n          // PHASE 1 — FLAT REVEAL  (1.5 – 3.4s)\n          // ═════════════════════════════════════════════════════\n          var T = 1.5;\n\n          tl.to(\n            wrapper,\n            {\n              opacity: 1,\n              scale: 0.79,\n              y: 0,\n              duration: 0.55,\n              ease: \"expo.out\",\n            },\n            T + 0.0,\n          );\n\n          tl.to(\n            cardGlow,\n            {\n              opacity: 0.5,\n              duration: 0.8,\n              ease: \"power2.out\",\n            },\n            T + 0.05,\n          );\n\n          tl.to(\n            S + \" .fig-toolbar\",\n            {\n              opacity: 1,\n              y: 0,\n              duration: 0.4,\n              ease: \"power2.out\",\n            },\n            T + 0.23,\n          );\n\n          tl.to(\n            S + \" .fig-layers\",\n            {\n              opacity: 1,\n              x: 0,\n              duration: 0.45,\n              ease: \"expo.out\",\n            },\n            T + 0.35,\n          );\n\n          tl.to(\n            S + \" .fig-props\",\n            {\n              opacity: 1,\n              x: 0,\n              duration: 0.45,\n              ease: \"expo.out\",\n            },\n            T + 0.37,\n          );\n\n          tl.to(\n            S + \" .fig-canvas\",\n            {\n              opacity: 1,\n              duration: 0.4,\n              ease: \"power2.out\",\n            },\n            T + 0.45,\n          );\n\n          tl.to(\n            S + \" .artboard\",\n            {\n              opacity: 1,\n              scale: 1,\n              duration: 0.55,\n              ease: \"back.out(1.4)\",\n            },\n            T + 0.5,\n          );\n\n          tl.to(\n            S + \" .layer-item\",\n            {\n              opacity: 1,\n              x: 0,\n              duration: 0.35,\n              stagger: { each: 0.045, ease: \"power1.in\" },\n              ease: \"power2.out\",\n            },\n            T + 0.57,\n          );\n\n          tl.to(\n            S + \" .selection-ring\",\n            {\n              opacity: 1,\n              duration: 0.25,\n              ease: \"power2.out\",\n            },\n            T + 1.25,\n          );\n\n          // ═════════════════════════════════════════════════════\n          // PHASE 2 — CAMERA PUSH  (3.5 – 4.8s)\n          // Bigger zoom: 0.79 → 1.15 so the UI fills the frame\n          // ═════════════════════════════════════════════════════\n\n          tl.to(\n            wrapper,\n            {\n              scale: 1.15,\n              duration: 1.3,\n              ease: \"power3.inOut\",\n            },\n            3.5,\n          );\n\n          tl.to(\n            cardGlow,\n            {\n              opacity: 0.85,\n              scale: 1.25,\n              duration: 1.2,\n              ease: \"power2.inOut\",\n            },\n            3.5,\n          );\n\n          // ═════════════════════════════════════════════════════\n          // PHASE 3 — 3D TILT  (4.2 – 5.55s)\n          // Steeper angle (-34°) for more dramatic depth reveal\n          // ═════════════════════════════════════════════════════\n\n          tl.to(\n            wrapper,\n            {\n              rotationY: -34,\n              duration: 1.35,\n              ease: \"expo.out\",\n            },\n            4.2,\n          );\n\n          tl.to(\n            wrapper,\n            {\n              y: -16,\n              duration: 1.1,\n              ease: \"power2.out\",\n            },\n            4.3,\n          );\n\n          // ═════════════════════════════════════════════════════\n          // PHASE 4 — 3D HOLD  (5.55 – 7.3s)\n          // ═════════════════════════════════════════════════════\n\n          tl.to(\n            wrapper,\n            {\n              y: -8,\n              rotationY: -31,\n              duration: 0.9,\n              ease: \"sine.inOut\",\n            },\n            5.55,\n          );\n\n          tl.to(\n            wrapper,\n            {\n              y: -20,\n              rotationY: -35,\n              duration: 0.9,\n              ease: \"sine.inOut\",\n            },\n            6.45,\n          );\n\n          tl.to(\n            cardGlow,\n            {\n              opacity: 0.7,\n              duration: 0.9,\n              ease: \"sine.inOut\",\n              yoyo: true,\n              repeat: 1,\n            },\n            5.55,\n          );\n\n          // ═════════════════════════════════════════════════════\n          // SLIDE OFF — 3D depth fly-away  (7.3 – 7.85s)\n          // Scene x exits left. Wrapper z shrinks into distance.\n          // Deeper z (-4000) + steeper rotation (-55°) = very\n          // dramatic 3D exit — card turns away and vanishes.\n          // ═════════════════════════════════════════════════════\n\n          tl.to(\n            scene,\n            {\n              x: -2200,\n              duration: 0.55,\n              ease: \"power4.in\",\n            },\n            7.3,\n          );\n\n          tl.to(\n            wrapper,\n            {\n              z: -7500,\n              rotationY: -65,\n              duration: 0.55,\n              ease: \"power4.in\",\n            },\n            7.3,\n          );\n\n          tl.to(\n            cardGlow,\n            {\n              opacity: 0,\n              duration: 0.3,\n              ease: \"power3.in\",\n            },\n            7.3,\n          );\n\n          // ═════════════════════════════════════════════════════\n          // OUTRO — LOGO BUILD + TAGLINE + PILL  (7.9 – 13s)\n          // ═════════════════════════════════════════════════════\n          var O = 7.9;\n\n          tl.set(S + \" .outro-layer\", { opacity: 1 }, O);\n\n          // Stroke draw cascade\n          tl.to(\n            S + \" .ol-stroke-1\",\n            { strokeDashoffset: 0, duration: 0.8, ease: \"power1.inOut\" },\n            O + 0.0,\n          );\n          tl.to(\n            S + \" .ol-stroke-2\",\n            { strokeDashoffset: 0, duration: 0.8, ease: \"power1.inOut\" },\n            O + 0.15,\n          );\n          tl.to(\n            S + \" .ol-stroke-3\",\n            { strokeDashoffset: 0, duration: 0.8, ease: \"power1.inOut\" },\n            O + 0.3,\n          );\n          tl.to(\n            S + \" .ol-stroke-4\",\n            { strokeDashoffset: 0, duration: 0.8, ease: \"power1.inOut\" },\n            O + 0.45,\n          );\n          tl.to(\n            S + \" .ol-stroke-5\",\n            { strokeDashoffset: 0, duration: 0.8, ease: \"power1.inOut\" },\n            O + 0.6,\n          );\n\n          // Color fill cascade\n          tl.to(S + \" .ol-fill-1\", { opacity: 1, duration: 0.15, ease: \"power1.out\" }, O + 1.4);\n          tl.to(S + \" .ol-fill-2\", { opacity: 1, duration: 0.15, ease: \"power1.out\" }, O + 1.55);\n          tl.to(S + \" .ol-fill-3\", { opacity: 1, duration: 0.15, ease: \"power1.out\" }, O + 1.7);\n          tl.to(S + \" .ol-fill-4\", { opacity: 1, duration: 0.15, ease: \"power1.out\" }, O + 1.85);\n          tl.to(S + \" .ol-fill-5\", { opacity: 1, duration: 0.15, ease: \"power1.out\" }, O + 2.0);\n          tl.to(S + \" .ol-stroke\", { opacity: 0.3, duration: 0.4, ease: \"none\" }, O + 1.8);\n\n          // Subtle scale settle\n          tl.fromTo(\n            S + \" .outro-logo\",\n            { scale: 1, transformOrigin: \"80px 120px\" },\n            { scale: 1.04, duration: 0.2, ease: \"power2.out\" },\n            O + 2.3,\n          );\n          tl.to(\n            S + \" .outro-logo\",\n            {\n              scale: 1,\n              transformOrigin: \"80px 120px\",\n              duration: 0.2,\n              ease: \"power2.inOut\",\n            },\n            O + 2.5,\n          );\n\n          // Tagline letter stagger\n          var letters = document.querySelectorAll(S + \" .otl\");\n          for (var k = 0; k < letters.length; k++) {\n            tl.fromTo(\n              letters[k],\n              { opacity: 0, y: 8 },\n              { opacity: 1, y: 0, duration: 0.12, ease: \"power2.out\" },\n              O + 2.8 + k * 0.025,\n            );\n          }\n\n          // URL pill: stroke draw → fill → text\n          tl.to(\n            S + \" .url-border\",\n            {\n              strokeDashoffset: 0,\n              duration: 0.35,\n              ease: \"power1.inOut\",\n            },\n            O + 3.8,\n          );\n          tl.to(S + \" .url-bg\", { opacity: 1, duration: 0.15 }, O + 4.15);\n          tl.to(S + \" .url-text\", { opacity: 1, duration: 0.2 }, O + 4.2);\n\n          // Fade to black\n          tl.to(\n            S + \" .outro-fade\",\n            {\n              opacity: 1,\n              duration: 0.6,\n              ease: \"none\",\n            },\n            O + 4.8,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"ui-3d-reveal\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/us-map-bubble.json b/docs/public/catalog/blocks/us-map-bubble.json
new file mode 100644
index 0000000000..9548a8102f
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map-bubble.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>US Bubble Map</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #0f172a;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"us-map-bubble\"\n      data-composition-id=\"us-map-bubble\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"map-container\">\n        <div class=\"header\">\n          <h1 class=\"headline\">Top 20 US Cities by Population</h1>\n          <p class=\"subtitle\">Proportional bubble markers by metropolitan population</p>\n        </div>\n\n        <svg class=\"map-svg\" viewBox=\"0 0 1400 820\" preserveAspectRatio=\"xMidYMid meet\">\n          <g class=\"states-group\"></g>\n          <g class=\"connections-group\"></g>\n          <g class=\"bubbles-group\"></g>\n          <g class=\"callouts-group\"></g>\n        </svg>\n\n        <div class=\"source\">Source: U.S. Census Bureau, 2024</div>\n      </div>\n\n      <style>\n        #us-map-bubble {\n          width: 1920px;\n          height: 1080px;\n          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n          font-family: \"Inter\", sans-serif;\n          color: #e2e8f0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          overflow: hidden;\n        }\n\n        #us-map-bubble .map-container {\n          width: 1700px;\n          height: 950px;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          position: relative;\n        }\n\n        #us-map-bubble .header {\n          text-align: center;\n          margin-bottom: 20px;\n        }\n\n        #us-map-bubble .headline {\n          font-size: 52px;\n          font-weight: 700;\n          letter-spacing: -0.02em;\n          color: #f8fafc;\n          clip-path: inset(0 100% 0 0);\n        }\n\n        #us-map-bubble .subtitle {\n          font-size: 20px;\n          font-weight: 300;\n          color: #94a3b8;\n          margin-top: 8px;\n          opacity: 0;\n        }\n\n        #us-map-bubble .map-svg {\n          width: 1500px;\n          height: 750px;\n          overflow: visible;\n        }\n\n        #us-map-bubble .state-path {\n          fill: #1e293b;\n          stroke: #334155;\n          stroke-width: 0.5;\n          opacity: 0;\n        }\n\n        #us-map-bubble .city-bubble {\n          fill: rgba(59, 130, 246, 0.6);\n          stroke: #ffffff;\n          stroke-width: 1;\n          transform-origin: center center;\n          transform: scale(0);\n        }\n\n        #us-map-bubble .city-pulse {\n          fill: none;\n          stroke: rgba(59, 130, 246, 0.4);\n          stroke-width: 2;\n          opacity: 0;\n        }\n\n        #us-map-bubble .callout-group {\n          opacity: 0;\n        }\n\n        #us-map-bubble .callout-line {\n          stroke: rgba(148, 163, 184, 0.5);\n          stroke-width: 1;\n          fill: none;\n        }\n\n        #us-map-bubble .callout-name {\n          font-size: 13px;\n          font-weight: 600;\n          fill: #f8fafc;\n        }\n\n        #us-map-bubble .callout-value {\n          font-size: 11px;\n          font-weight: 400;\n          fill: #94a3b8;\n        }\n\n        #us-map-bubble .connection-line {\n          stroke: rgba(59, 130, 246, 0.3);\n          stroke-width: 1;\n          fill: none;\n          stroke-dasharray: 6 4;\n        }\n\n        #us-map-bubble .source {\n          position: absolute;\n          bottom: 0;\n          right: 40px;\n          font-size: 12px;\n          color: #475569;\n          opacity: 0;\n        }\n      </style>\n\n      <script>\n        (function () {\n          var US_TOPO_URL = \"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\";\n\n          var cities = [\n            { name: \"New York\", lat: 40.7128, lon: -74.006, pop: 8300000 },\n            { name: \"Los Angeles\", lat: 34.0522, lon: -118.2437, pop: 3900000 },\n            { name: \"Chicago\", lat: 41.8781, lon: -87.6298, pop: 2700000 },\n            { name: \"Houston\", lat: 29.7604, lon: -95.3698, pop: 2300000 },\n            { name: \"Phoenix\", lat: 33.4484, lon: -112.074, pop: 1600000 },\n            { name: \"Philadelphia\", lat: 39.9526, lon: -75.1652, pop: 1600000 },\n            { name: \"San Antonio\", lat: 29.4241, lon: -98.4936, pop: 1400000 },\n            { name: \"San Diego\", lat: 32.7157, lon: -117.1611, pop: 1400000 },\n            { name: \"Dallas\", lat: 32.7767, lon: -96.797, pop: 1300000 },\n            { name: \"Jacksonville\", lat: 30.3322, lon: -81.6557, pop: 950000 },\n            { name: \"Austin\", lat: 30.2672, lon: -97.7431, pop: 960000 },\n            { name: \"San Jose\", lat: 37.3382, lon: -121.8863, pop: 1000000 },\n            { name: \"Fort Worth\", lat: 32.7555, lon: -97.3308, pop: 930000 },\n            { name: \"Columbus\", lat: 39.9612, lon: -82.9988, pop: 910000 },\n            { name: \"Charlotte\", lat: 35.2271, lon: -80.8431, pop: 870000 },\n            { name: \"Indianapolis\", lat: 39.7684, lon: -86.1581, pop: 880000 },\n            { name: \"San Francisco\", lat: 37.7749, lon: -122.4194, pop: 870000 },\n            { name: \"Seattle\", lat: 47.6062, lon: -122.3321, pop: 740000 },\n            { name: \"Denver\", lat: 39.7392, lon: -104.9903, pop: 710000 },\n            { name: \"Nashville\", lat: 36.1627, lon: -86.7816, pop: 690000 },\n          ];\n\n          var radiusScale = d3.scaleSqrt().domain([500000, 8500000]).range([6, 45]);\n\n          var svg = document.querySelector(\"#us-map-bubble .map-svg\");\n          var statesGroup = svg.querySelector(\".states-group\");\n          var bubblesGroup = svg.querySelector(\".bubbles-group\");\n          var calloutsGroup = svg.querySelector(\".callouts-group\");\n          var connectionsGroup = svg.querySelector(\".connections-group\");\n          var tl = gsap.timeline({ paused: true });\n\n          function formatPop(n) {\n            if (n >= 1000000) {\n              return (n / 1000000).toFixed(1) + \"M\";\n            }\n            return (n / 1000).toFixed(0) + \"K\";\n          }\n\n          fetch(US_TOPO_URL)\n            .then(function (r) {\n              return r.json();\n            })\n            .then(function (us) {\n              var states = topojson.feature(us, us.objects.states).features;\n              var projection = d3.geoAlbersUsa().fitSize([1380, 800], {\n                type: \"FeatureCollection\",\n                features: states,\n              });\n              var path = d3.geoPath().projection(projection);\n\n              states.forEach(function (feature) {\n                var d = path(feature);\n                if (!d) return;\n\n                var el = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n                el.setAttribute(\"d\", d);\n                el.setAttribute(\"class\", \"state-path\");\n                statesGroup.appendChild(el);\n              });\n\n              var projectedCities = [];\n              cities.forEach(function (city) {\n                var coords = projection([city.lon, city.lat]);\n                if (!coords) return;\n                projectedCities.push({\n                  name: city.name,\n                  pop: city.pop,\n                  x: coords[0],\n                  y: coords[1],\n                  r: radiusScale(city.pop),\n                });\n              });\n\n              projectedCities.sort(function (a, b) {\n                return b.pop - a.pop;\n              });\n\n              var nycCoords = null;\n              projectedCities.forEach(function (city) {\n                if (city.name === \"New York\") {\n                  nycCoords = { x: city.x, y: city.y };\n                }\n              });\n\n              var connectionTargets = [\"Los Angeles\", \"Chicago\", \"Houston\", \"Phoenix\"];\n              connectionTargets.forEach(function (targetName) {\n                if (!nycCoords) return;\n                var target = null;\n                projectedCities.forEach(function (c) {\n                  if (c.name === targetName) target = c;\n                });\n                if (!target) return;\n\n                var midX = (nycCoords.x + target.x) / 2;\n                var midY = Math.min(nycCoords.y, target.y) - 60;\n\n                var pathD =\n                  \"M \" +\n                  nycCoords.x +\n                  \" \" +\n                  nycCoords.y +\n                  \" Q \" +\n                  midX +\n                  \" \" +\n                  midY +\n                  \" \" +\n                  target.x +\n                  \" \" +\n                  target.y;\n\n                var line = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n                line.setAttribute(\"d\", pathD);\n                line.setAttribute(\"class\", \"connection-line\");\n                connectionsGroup.appendChild(line);\n\n                var length = line.getTotalLength();\n                line.style.strokeDasharray = length;\n                line.style.strokeDashoffset = length;\n              });\n\n              projectedCities.forEach(function (city) {\n                var circle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");\n                circle.setAttribute(\"cx\", city.x);\n                circle.setAttribute(\"cy\", city.y);\n                circle.setAttribute(\"r\", city.r);\n                circle.setAttribute(\"class\", \"city-bubble\");\n                circle.setAttribute(\"data-city\", city.name);\n                bubblesGroup.appendChild(circle);\n              });\n\n              var pulseCircle = document.createElementNS(\"http://www.w3.org/2000/svg\", \"circle\");\n              if (nycCoords) {\n                pulseCircle.setAttribute(\"cx\", nycCoords.x);\n                pulseCircle.setAttribute(\"cy\", nycCoords.y);\n                pulseCircle.setAttribute(\"r\", radiusScale(8300000));\n                pulseCircle.setAttribute(\"class\", \"city-pulse\");\n                bubblesGroup.appendChild(pulseCircle);\n              }\n\n              var top5 = projectedCities.slice(0, 5);\n              top5.forEach(function (city, i) {\n                var g = document.createElementNS(\"http://www.w3.org/2000/svg\", \"g\");\n                g.setAttribute(\"class\", \"callout-group\");\n\n                var offsetX = city.r + 12;\n                var offsetY = -8;\n\n                if (city.name === \"Los Angeles\" || city.name === \"San Francisco\") {\n                  offsetX = -(city.r + 80);\n                }\n\n                var calloutLine = document.createElementNS(\"http://www.w3.org/2000/svg\", \"line\");\n                calloutLine.setAttribute(\"x1\", city.x);\n                calloutLine.setAttribute(\"y1\", city.y);\n                calloutLine.setAttribute(\"x2\", city.x + offsetX);\n                calloutLine.setAttribute(\"y2\", city.y + offsetY);\n                calloutLine.setAttribute(\"class\", \"callout-line\");\n                g.appendChild(calloutLine);\n\n                var nameText = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n                nameText.setAttribute(\"x\", city.x + offsetX + (offsetX > 0 ? 6 : -6));\n                nameText.setAttribute(\"y\", city.y + offsetY - 2);\n                nameText.setAttribute(\"class\", \"callout-name\");\n                if (offsetX < 0) {\n                  nameText.setAttribute(\"text-anchor\", \"end\");\n                }\n                nameText.textContent = city.name;\n                g.appendChild(nameText);\n\n                var valueText = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n                valueText.setAttribute(\"x\", city.x + offsetX + (offsetX > 0 ? 6 : -6));\n                valueText.setAttribute(\"y\", city.y + offsetY + 14);\n                valueText.setAttribute(\"class\", \"callout-value\");\n                if (offsetX < 0) {\n                  valueText.setAttribute(\"text-anchor\", \"end\");\n                }\n                valueText.textContent = formatPop(city.pop) + \" residents\";\n                g.appendChild(valueText);\n\n                calloutsGroup.appendChild(g);\n              });\n\n              buildTimeline(projectedCities, pulseCircle);\n            });\n\n          function buildTimeline(projectedCities, pulseCircle) {\n            var statePaths = statesGroup.querySelectorAll(\".state-path\");\n            var bubbles = bubblesGroup.querySelectorAll(\".city-bubble\");\n            var callouts = calloutsGroup.querySelectorAll(\".callout-group\");\n            var connections = connectionsGroup.querySelectorAll(\".connection-line\");\n\n            tl.to(\n              \"#us-map-bubble .headline\",\n              {\n                clipPath: \"inset(0 0% 0 0)\",\n                duration: 1.0,\n                ease: \"power2.inOut\",\n              },\n              0,\n            );\n\n            tl.to(\n              \"#us-map-bubble .subtitle\",\n              {\n                opacity: 1,\n                duration: 0.6,\n                ease: \"power2.out\",\n              },\n              0.4,\n            );\n\n            tl.to(\n              statePaths,\n              {\n                opacity: 0.8,\n                duration: 0.6,\n                ease: \"power2.out\",\n              },\n              0.8,\n            );\n\n            tl.to(\n              bubbles,\n              {\n                scale: 1,\n                duration: 0.5,\n                stagger: {\n                  each: 0.08,\n                  from: \"start\",\n                },\n                ease: \"back.out(1.7)\",\n              },\n              1.5,\n            );\n\n            tl.set(callouts, { x: 20 }, 3.9);\n\n            tl.to(\n              callouts,\n              {\n                opacity: 1,\n                x: 0,\n                duration: 0.6,\n                stagger: 0.3,\n                ease: \"power2.out\",\n              },\n              4.0,\n            );\n\n            connections.forEach(function (line) {\n              tl.to(\n                line,\n                {\n                  strokeDashoffset: 0,\n                  duration: 1.2,\n                  ease: \"power2.inOut\",\n                },\n                6.0,\n              );\n            });\n\n            if (pulseCircle) {\n              tl.to(\n                pulseCircle,\n                {\n                  opacity: 1,\n                  duration: 0.01,\n                },\n                8.0,\n              );\n\n              tl.fromTo(\n                pulseCircle,\n                {\n                  attr: { r: radiusScale(8300000) },\n                  opacity: 0.6,\n                },\n                {\n                  attr: { r: radiusScale(8300000) + 30 },\n                  opacity: 0,\n                  duration: 1.5,\n                  repeat: 2,\n                  ease: \"power2.out\",\n                },\n                8.0,\n              );\n            }\n\n            tl.to(\n              \"#us-map-bubble .source\",\n              {\n                opacity: 1,\n                duration: 0.5,\n                ease: \"power2.out\",\n              },\n              5.5,\n            );\n\n            window.__timelines = window.__timelines || {};\n            window.__timelines[\"us-map-bubble\"] = tl;\n          }\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/us-map-flow.json b/docs/public/catalog/blocks/us-map-flow.json
new file mode 100644
index 0000000000..3a75533453
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map-flow.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>US Flow Map</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0f172a;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"us-map-flow\"\n      data-composition-id=\"us-map-flow\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"flow-header\">\n        <h1 class=\"flow-headline\">Interstate Flow Connections</h1>\n        <p class=\"flow-subtitle\">Relative volume of major city-to-city corridors</p>\n      </div>\n\n      <svg class=\"flow-svg\" viewBox=\"0 0 1920 1080\" preserveAspectRatio=\"xMidYMid meet\">\n        <defs>\n          <filter id=\"arc-glow\">\n            <feGaussianBlur stdDeviation=\"3\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n          <filter id=\"dot-glow\">\n            <feGaussianBlur stdDeviation=\"4\" result=\"blur\" />\n            <feMerge>\n              <feMergeNode in=\"blur\" />\n              <feMergeNode in=\"SourceGraphic\" />\n            </feMerge>\n          </filter>\n        </defs>\n        <g class=\"states-group\"></g>\n        <g class=\"arcs-group\"></g>\n        <g class=\"traveling-dots-group\"></g>\n        <g class=\"city-dots-group\"></g>\n        <g class=\"city-labels-group\"></g>\n      </svg>\n\n      <div class=\"flow-source\">Source: Illustrative data</div>\n\n      <style>\n        #us-map-flow {\n          position: relative;\n          width: 1920px;\n          height: 1080px;\n          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n          font-family: \"Inter\", sans-serif;\n          color: #ffffff;\n          overflow: hidden;\n        }\n\n        #us-map-flow .flow-header {\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          z-index: 2;\n        }\n\n        #us-map-flow .flow-headline {\n          font-size: 48px;\n          font-weight: 700;\n          color: #f8fafc;\n          letter-spacing: -0.02em;\n          clip-path: inset(0 100% 0 0);\n        }\n\n        #us-map-flow .flow-subtitle {\n          font-size: 22px;\n          font-weight: 300;\n          color: #94a3b8;\n          margin-top: 8px;\n          opacity: 0;\n        }\n\n        #us-map-flow .flow-svg {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n        }\n\n        #us-map-flow .state-path {\n          fill: #1e293b;\n          stroke: #334155;\n          stroke-width: 0.5;\n          opacity: 0;\n        }\n\n        #us-map-flow .arc-path {\n          fill: none;\n          stroke: #3b82f6;\n          filter: url(#arc-glow);\n          stroke-linecap: round;\n        }\n\n        #us-map-flow .city-dot {\n          fill: #ffffff;\n          filter: url(#dot-glow);\n          opacity: 0;\n        }\n\n        #us-map-flow .city-label {\n          fill: #cbd5e1;\n          font-family: \"Inter\", sans-serif;\n          font-size: 13px;\n          font-weight: 500;\n          opacity: 0;\n        }\n\n        #us-map-flow .traveling-dot {\n          fill: #60a5fa;\n          opacity: 0;\n        }\n\n        #us-map-flow .flow-source {\n          position: absolute;\n          bottom: 30px;\n          right: 60px;\n          font-size: 14px;\n          font-weight: 400;\n          color: #475569;\n          opacity: 0;\n        }\n      </style>\n\n      <script>\n        (function () {\n          var NS = \"http://www.w3.org/2000/svg\";\n          var root = document.getElementById(\"us-map-flow\");\n          var svg = root.querySelector(\".flow-svg\");\n          var statesGroup = svg.querySelector(\".states-group\");\n          var arcsGroup = svg.querySelector(\".arcs-group\");\n          var travelingDotsGroup = svg.querySelector(\".traveling-dots-group\");\n          var cityDotsGroup = svg.querySelector(\".city-dots-group\");\n          var cityLabelsGroup = svg.querySelector(\".city-labels-group\");\n\n          var tl = gsap.timeline({ paused: true });\n\n          /* --- City data: name → [longitude, latitude] (D3 uses [lon, lat]) --- */\n          var cities = {\n            \"San Francisco\": [-122.4194, 37.7749],\n            \"New York\": [-74.006, 40.7128],\n            \"Los Angeles\": [-118.2437, 34.0522],\n            Chicago: [-87.6298, 41.8781],\n            Seattle: [-122.3321, 47.6062],\n            Austin: [-97.7431, 30.2672],\n            Miami: [-80.1918, 25.7617],\n            Denver: [-104.9903, 39.7392],\n            Houston: [-95.3698, 29.7604],\n            Atlanta: [-84.388, 33.749],\n            Boston: [-71.0589, 42.3601],\n            Dallas: [-96.797, 32.7767],\n          };\n\n          /* --- Flow connections --- */\n          var flows = [\n            { from: \"San Francisco\", to: \"New York\", volume: 100 },\n            { from: \"Los Angeles\", to: \"Chicago\", volume: 85 },\n            { from: \"Seattle\", to: \"Austin\", volume: 70 },\n            { from: \"New York\", to: \"Miami\", volume: 90 },\n            { from: \"Chicago\", to: \"Denver\", volume: 65 },\n            { from: \"Houston\", to: \"Atlanta\", volume: 75 },\n            { from: \"Boston\", to: \"San Francisco\", volume: 80 },\n            { from: \"Denver\", to: \"Los Angeles\", volume: 60 },\n            { from: \"Atlanta\", to: \"Dallas\", volume: 55 },\n            { from: \"Miami\", to: \"New York\", volume: 50 },\n            { from: \"Austin\", to: \"Seattle\", volume: 45 },\n            { from: \"Dallas\", to: \"Chicago\", volume: 40 },\n          ];\n\n          var maxVolume = 100;\n          var minWidth = 1.5;\n          var maxWidth = 4;\n\n          /* --- Projection centered on continental US --- */\n          var projection = d3.geoAlbersUsa().scale(1300).translate([960, 560]);\n\n          var pathGen = d3.geoPath().projection(projection);\n\n          /* --- Project city positions --- */\n          var projected = {};\n          var cityNames = Object.keys(cities);\n          cityNames.forEach(function (name) {\n            var p = projection(cities[name]);\n            if (p) {\n              projected[name] = { x: p[0], y: p[1] };\n            }\n          });\n\n          /* --- Unique city list for dots/labels (only those that project) --- */\n          var visibleCities = Object.keys(projected);\n\n          /* --- Build arc path string (quadratic bezier curving upward) --- */\n          function buildArcPath(fromName, toName) {\n            var p1 = projected[fromName];\n            var p2 = projected[toName];\n            if (!p1 || !p2) return null;\n            var x1 = p1.x;\n            var y1 = p1.y;\n            var x2 = p2.x;\n            var y2 = p2.y;\n            var midX = (x1 + x2) / 2;\n            var midY = Math.min(y1, y2) - Math.abs(x2 - x1) * 0.15;\n            return \"M\" + x1 + \",\" + y1 + \" Q\" + midX + \",\" + midY + \" \" + x2 + \",\" + y2;\n          }\n\n          /* --- Load topology and render states --- */\n          d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\").then(function (us) {\n            var states = topojson.feature(us, us.objects.states).features;\n\n            states.forEach(function (feature) {\n              var d = pathGen(feature);\n              if (!d) return;\n              var path = document.createElementNS(NS, \"path\");\n              path.setAttribute(\"d\", d);\n              path.setAttribute(\"class\", \"state-path\");\n              statesGroup.appendChild(path);\n            });\n\n            /* --- Create arc paths --- */\n            var arcPaths = [];\n            flows.forEach(function (flow) {\n              var d = buildArcPath(flow.from, flow.to);\n              if (!d) return;\n\n              var strokeW = minWidth + (flow.volume / maxVolume) * (maxWidth - minWidth);\n              var arcOpacity = 0.4 + (flow.volume / maxVolume) * 0.6;\n\n              var path = document.createElementNS(NS, \"path\");\n              path.setAttribute(\"d\", d);\n              path.setAttribute(\"class\", \"arc-path\");\n              path.setAttribute(\"stroke-width\", strokeW);\n              path.style.opacity = arcOpacity;\n              arcsGroup.appendChild(path);\n\n              var len = path.getTotalLength();\n              path.style.strokeDasharray = len;\n              path.style.strokeDashoffset = len;\n\n              arcPaths.push({ el: path, length: len });\n            });\n\n            /* --- Create city dots --- */\n            visibleCities.forEach(function (name) {\n              var p = projected[name];\n              var circle = document.createElementNS(NS, \"circle\");\n              circle.setAttribute(\"cx\", p.x);\n              circle.setAttribute(\"cy\", p.y);\n              circle.setAttribute(\"r\", 5);\n              circle.setAttribute(\"class\", \"city-dot\");\n              cityDotsGroup.appendChild(circle);\n            });\n\n            /* --- Create city labels with offset --- */\n            visibleCities.forEach(function (name) {\n              var p = projected[name];\n              var text = document.createElementNS(NS, \"text\");\n              text.setAttribute(\"x\", p.x + 10);\n              text.setAttribute(\"y\", p.y - 10);\n              text.setAttribute(\"class\", \"city-label\");\n              text.textContent = name;\n              cityLabelsGroup.appendChild(text);\n            });\n\n            /* --- Create traveling dots (one per arc) --- */\n            var travelingDots = [];\n            arcPaths.forEach(function () {\n              var dot = document.createElementNS(NS, \"circle\");\n              dot.setAttribute(\"r\", 3);\n              dot.setAttribute(\"class\", \"traveling-dot\");\n              travelingDotsGroup.appendChild(dot);\n              travelingDots.push(dot);\n            });\n\n            /* ===== GSAP TIMELINE ===== */\n\n            /* 0s: headline clip-path wipe */\n            tl.to(\n              \"#us-map-flow .flow-headline\",\n              {\n                clipPath: \"inset(0 0% 0 0)\",\n                duration: 1,\n                ease: \"power2.inOut\",\n              },\n              0,\n            );\n\n            /* 0.3s: subtitle fade */\n            tl.to(\n              \"#us-map-flow .flow-subtitle\",\n              {\n                opacity: 1,\n                duration: 0.5,\n                ease: \"power2.out\",\n              },\n              0.3,\n            );\n\n            /* 0.6s: states fade in */\n            tl.to(\n              \"#us-map-flow .state-path\",\n              {\n                opacity: 1,\n                duration: 0.8,\n                ease: \"power2.out\",\n              },\n              0.6,\n            );\n\n            /* 1.5s: city dots pop in */\n            tl.to(\n              \"#us-map-flow .city-dot\",\n              {\n                opacity: 1,\n                scale: 1,\n                transformOrigin: \"center center\",\n                duration: 0.4,\n                stagger: 0.05,\n                ease: \"back.out(1.7)\",\n              },\n              1.5,\n            );\n\n            /* 2.5s: city labels fade in */\n            tl.to(\n              \"#us-map-flow .city-label\",\n              {\n                opacity: 1,\n                duration: 0.3,\n                stagger: 0.05,\n                ease: \"power2.out\",\n              },\n              2.5,\n            );\n\n            /* 3.5s: arcs draw sequentially */\n            arcPaths.forEach(function (arc, i) {\n              tl.to(\n                arc.el,\n                {\n                  strokeDashoffset: 0,\n                  duration: 1,\n                  ease: \"power2.inOut\",\n                },\n                3.5 + i * 0.2,\n              );\n            });\n\n            /* 7.0s: traveling dots animate along paths */\n            arcPaths.forEach(function (arc, i) {\n              var dot = travelingDots[i];\n              var pathEl = arc.el;\n              var pathLength = arc.length;\n\n              tl.set(dot, { opacity: 0.9 }, 7.0 + i * 0.1);\n\n              var progress = { value: 0 };\n              tl.to(\n                progress,\n                {\n                  value: 1,\n                  duration: 1.5,\n                  ease: \"power1.inOut\",\n                  onUpdate: function () {\n                    var pt = pathEl.getPointAtLength(progress.value * pathLength);\n                    dot.setAttribute(\"cx\", pt.x);\n                    dot.setAttribute(\"cy\", pt.y);\n                  },\n                  onComplete: function () {\n                    gsap.to(dot, { opacity: 0, duration: 0.3 });\n                  },\n                },\n                7.0 + i * 0.1,\n              );\n            });\n\n            /* 9.0s: source fade in */\n            tl.to(\n              \"#us-map-flow .flow-source\",\n              {\n                opacity: 1,\n                duration: 0.6,\n                ease: \"power2.out\",\n              },\n              9.0,\n            );\n\n            /* Register timeline */\n            window.__timelines = window.__timelines || {};\n            window.__timelines[\"us-map-flow\"] = tl;\n          });\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/us-map-hex.json b/docs/public/catalog/blocks/us-map-hex.json
new file mode 100644
index 0000000000..79b40b2a38
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map-hex.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>US Hex Grid Map</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"us-map-hex\"\n      data-composition-id=\"us-map-hex\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"10\"\n    >\n      <div class=\"map-header\">\n        <h1 class=\"map-headline\">Median Household Income by State</h1>\n        <p class=\"map-subtitle\">American Community Survey, 2024</p>\n      </div>\n\n      <svg class=\"hex-svg\" viewBox=\"0 0 1920 1080\" preserveAspectRatio=\"xMidYMid meet\">\n        <g class=\"hex-grid\"></g>\n        <g class=\"hex-labels\"></g>\n      </svg>\n\n      <div class=\"map-legend\">\n        <div class=\"legend-label legend-low\">$52k</div>\n        <div class=\"legend-bar\"></div>\n        <div class=\"legend-label legend-high\">$107k</div>\n      </div>\n\n      <div class=\"map-source\">Source: U.S. Census Bureau, American Community Survey 2024</div>\n\n      <style>\n        #us-map-hex {\n          width: 1920px;\n          height: 1080px;\n          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n          font-family: \"Inter\", sans-serif;\n          color: #f8fafc;\n          position: relative;\n          overflow: hidden;\n        }\n\n        #us-map-hex .map-header {\n          position: absolute;\n          top: 48px;\n          left: 80px;\n          z-index: 2;\n        }\n\n        #us-map-hex .map-headline {\n          font-size: 48px;\n          font-weight: 700;\n          letter-spacing: -0.02em;\n          color: #f8fafc;\n          clip-path: inset(0 100% 0 0);\n          white-space: nowrap;\n        }\n\n        #us-map-hex .map-subtitle {\n          font-size: 20px;\n          font-weight: 400;\n          color: #94a3b8;\n          margin-top: 8px;\n          opacity: 0;\n        }\n\n        #us-map-hex .hex-svg {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n        }\n\n        #us-map-hex .hex-poly {\n          stroke: #0f172a;\n          stroke-width: 2;\n          opacity: 0;\n        }\n\n        #us-map-hex .hex-text {\n          font-family: \"Inter\", sans-serif;\n          font-size: 14px;\n          font-weight: 600;\n          fill: #0f172a;\n          text-anchor: middle;\n          dominant-baseline: central;\n          pointer-events: none;\n          opacity: 0;\n        }\n\n        #us-map-hex .hex-text.light-text {\n          fill: #fef3c7;\n        }\n\n        #us-map-hex .map-legend {\n          position: absolute;\n          bottom: 80px;\n          left: 80px;\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          opacity: 0;\n        }\n\n        #us-map-hex .legend-bar {\n          width: 240px;\n          height: 16px;\n          border-radius: 4px;\n          background: linear-gradient(90deg, #451a03 0%, #f59e0b 50%, #fef3c7 100%);\n        }\n\n        #us-map-hex .legend-label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #94a3b8;\n        }\n\n        #us-map-hex .map-source {\n          position: absolute;\n          bottom: 48px;\n          left: 80px;\n          font-size: 12px;\n          color: #475569;\n          opacity: 0;\n        }\n      </style>\n\n      <script>\n        (function () {\n          var NS = \"http://www.w3.org/2000/svg\";\n          var hexGrid = document.querySelector(\"#us-map-hex .hex-grid\");\n          var hexLabels = document.querySelector(\"#us-map-hex .hex-labels\");\n\n          /* --- State grid positions (col, row) --- */\n          var positions = {\n            ME: [10, 0],\n            VT: [9, 1],\n            NH: [10, 1],\n            WA: [0, 2],\n            MT: [1, 2],\n            ND: [2, 2],\n            MN: [3, 2],\n            WI: [4, 2],\n            MI: [7, 2],\n            NY: [8, 2],\n            MA: [9, 2],\n            RI: [10, 2],\n            ID: [0, 3],\n            WY: [1, 3],\n            SD: [2, 3],\n            IA: [3, 3],\n            IL: [4, 3],\n            IN: [5, 3],\n            OH: [6, 3],\n            PA: [7, 3],\n            NJ: [8, 3],\n            CT: [9, 3],\n            OR: [0, 4],\n            NV: [1, 4],\n            CO: [2, 4],\n            NE: [3, 4],\n            MO: [4, 4],\n            KY: [5, 4],\n            WV: [6, 4],\n            VA: [7, 4],\n            MD: [8, 4],\n            DE: [9, 4],\n            CA: [0, 5],\n            UT: [1, 5],\n            NM: [2, 5],\n            KS: [3, 5],\n            AR: [4, 5],\n            TN: [5, 5],\n            NC: [6, 5],\n            SC: [7, 5],\n            DC: [8, 5],\n            AZ: [1, 6],\n            OK: [3, 6],\n            LA: [4, 6],\n            MS: [5, 6],\n            AL: [6, 6],\n            GA: [7, 6],\n            HI: [0, 7],\n            TX: [3, 7],\n            FL: [7, 7],\n            AK: [0, 8],\n          };\n\n          /* --- Median household income (2024 ACS, rounded to nearest $1k) --- */\n          var income = {\n            MD: 106998,\n            NJ: 101778,\n            MA: 101079,\n            CT: 92545,\n            HI: 91010,\n            NH: 90845,\n            WA: 90325,\n            CA: 89648,\n            CO: 87598,\n            VA: 87249,\n            UT: 86833,\n            MN: 84313,\n            AK: 83601,\n            NY: 81386,\n            RI: 81370,\n            IL: 79253,\n            OR: 76632,\n            DE: 75932,\n            WI: 72458,\n            NV: 71646,\n            VT: 71560,\n            PA: 71610,\n            ND: 71017,\n            NE: 70654,\n            TX: 70813,\n            AZ: 70821,\n            ID: 69973,\n            MT: 68091,\n            GA: 67992,\n            ME: 67587,\n            FL: 67917,\n            IA: 67684,\n            WY: 67249,\n            SD: 66894,\n            MI: 66986,\n            IN: 65834,\n            OH: 64018,\n            MO: 63594,\n            KS: 66354,\n            NC: 65070,\n            TN: 63426,\n            SC: 62064,\n            OK: 60438,\n            KY: 57584,\n            NM: 58257,\n            AL: 57563,\n            LA: 55728,\n            WV: 52520,\n            AR: 53289,\n            MS: 52434,\n            DC: 101722,\n          };\n\n          /* --- Color interpolation --- */\n          var incomeValues = [];\n          var stateKeys = Object.keys(income);\n          for (var i = 0; i < stateKeys.length; i++) {\n            incomeValues.push(income[stateKeys[i]]);\n          }\n          var minIncome = Math.min.apply(null, incomeValues);\n          var maxIncome = Math.max.apply(null, incomeValues);\n\n          function lerp(a, b, t) {\n            return a + (b - a) * t;\n          }\n\n          function hexToRgb(hex) {\n            var r = parseInt(hex.substring(1, 3), 16);\n            var g = parseInt(hex.substring(3, 5), 16);\n            var b = parseInt(hex.substring(5, 7), 16);\n            return [r, g, b];\n          }\n\n          var colorLow = hexToRgb(\"#451a03\");\n          var colorMid = hexToRgb(\"#f59e0b\");\n          var colorHigh = hexToRgb(\"#fef3c7\");\n\n          function getColor(val) {\n            var t = (val - minIncome) / (maxIncome - minIncome);\n            var r, g, b;\n            if (t < 0.5) {\n              var t2 = t / 0.5;\n              r = Math.round(lerp(colorLow[0], colorMid[0], t2));\n              g = Math.round(lerp(colorLow[1], colorMid[1], t2));\n              b = Math.round(lerp(colorLow[2], colorMid[2], t2));\n            } else {\n              var t2 = (t - 0.5) / 0.5;\n              r = Math.round(lerp(colorMid[0], colorHigh[0], t2));\n              g = Math.round(lerp(colorMid[1], colorHigh[1], t2));\n              b = Math.round(lerp(colorMid[2], colorHigh[2], t2));\n            }\n            return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n          }\n\n          /* Determine if text should be light on dark hex */\n          function isLightText(val) {\n            var t = (val - minIncome) / (maxIncome - minIncome);\n            return t < 0.35;\n          }\n\n          /* --- Hex geometry (flat-top) --- */\n          var hexW = 80;\n          var hexS = hexW / 2;\n          var hexH = hexS * Math.sqrt(3);\n          var startX = 480;\n          var startY = 200;\n\n          function hexCenter(col, row) {\n            var cx = startX + col * (hexW * 0.75);\n            var cy = startY + row * hexH;\n            if (row % 2 === 1) {\n              cx += hexW * 0.375;\n            }\n            return [cx, cy];\n          }\n\n          function hexPoints(cx, cy) {\n            var pts = [\n              [cx - hexS, cy],\n              [cx - hexS / 2, cy - hexH / 2],\n              [cx + hexS / 2, cy - hexH / 2],\n              [cx + hexS, cy],\n              [cx + hexS / 2, cy + hexH / 2],\n              [cx - hexS / 2, cy + hexH / 2],\n            ];\n            var strs = [];\n            for (var i = 0; i < pts.length; i++) {\n              strs.push(pts[i][0].toFixed(2) + \",\" + pts[i][1].toFixed(2));\n            }\n            return strs.join(\" \");\n          }\n\n          /* --- Compute center of all hexes for stagger distance --- */\n          var allCenters = [];\n          var allStates = Object.keys(positions);\n          for (var i = 0; i < allStates.length; i++) {\n            var pos = positions[allStates[i]];\n            var center = hexCenter(pos[0], pos[1]);\n            allCenters.push(center);\n          }\n          var avgCx = 0;\n          var avgCy = 0;\n          for (var i = 0; i < allCenters.length; i++) {\n            avgCx += allCenters[i][0];\n            avgCy += allCenters[i][1];\n          }\n          avgCx /= allCenters.length;\n          avgCy /= allCenters.length;\n\n          /* --- Create hex elements --- */\n          var hexPolys = [];\n          var hexTexts = [];\n          var distances = [];\n\n          for (var i = 0; i < allStates.length; i++) {\n            var st = allStates[i];\n            var pos = positions[st];\n            var center = hexCenter(pos[0], pos[1]);\n            var cx = center[0];\n            var cy = center[1];\n\n            var poly = document.createElementNS(NS, \"polygon\");\n            poly.setAttribute(\"points\", hexPoints(cx, cy));\n            poly.setAttribute(\"fill\", getColor(income[st]));\n            poly.setAttribute(\"class\", \"hex-poly\");\n            poly.setAttribute(\"data-state\", st);\n            hexGrid.appendChild(poly);\n            hexPolys.push(poly);\n\n            var text = document.createElementNS(NS, \"text\");\n            text.setAttribute(\"x\", cx);\n            text.setAttribute(\"y\", cy);\n            var textClass = \"hex-text\";\n            if (isLightText(income[st])) {\n              textClass += \" light-text\";\n            }\n            text.setAttribute(\"class\", textClass);\n            text.textContent = st;\n            hexLabels.appendChild(text);\n            hexTexts.push(text);\n\n            var dx = cx - avgCx;\n            var dy = cy - avgCy;\n            distances.push(Math.sqrt(dx * dx + dy * dy));\n          }\n\n          /* --- Sort indices by distance from center (for stagger) --- */\n          var sortedIndices = [];\n          for (var i = 0; i < allStates.length; i++) {\n            sortedIndices.push(i);\n          }\n          sortedIndices.sort(function (a, b) {\n            return distances[a] - distances[b];\n          });\n\n          var sortedPolys = [];\n          var sortedTexts = [];\n          for (var i = 0; i < sortedIndices.length; i++) {\n            sortedPolys.push(hexPolys[sortedIndices[i]]);\n            sortedTexts.push(hexTexts[sortedIndices[i]]);\n          }\n\n          /* --- GSAP Timeline --- */\n          var tl = gsap.timeline({ paused: true });\n\n          /* 0s: headline wipe */\n          tl.to(\n            \"#us-map-hex .map-headline\",\n            {\n              clipPath: \"inset(0 0% 0 0)\",\n              duration: 1,\n              ease: \"power2.inOut\",\n            },\n            0,\n          );\n\n          /* 0.3s: subtitle fade */\n          tl.to(\n            \"#us-map-hex .map-subtitle\",\n            {\n              opacity: 1,\n              duration: 0.5,\n              ease: \"power2.out\",\n            },\n            0.3,\n          );\n\n          /* 0.8s: hexagons stagger in from center outward */\n          tl.fromTo(\n            sortedPolys,\n            {\n              opacity: 0,\n              scale: 0,\n              transformOrigin: \"50% 50%\",\n            },\n            {\n              opacity: 1,\n              scale: 1,\n              duration: 0.4,\n              stagger: 0.03,\n              ease: \"back.out(1.4)\",\n            },\n            0.8,\n          );\n\n          /* 3.5s: state labels fade in */\n          tl.fromTo(\n            sortedTexts,\n            { opacity: 0 },\n            {\n              opacity: 1,\n              duration: 0.3,\n              stagger: 0.02,\n              ease: \"power2.out\",\n            },\n            3.5,\n          );\n\n          /* 5.0s: legend fade */\n          tl.to(\n            \"#us-map-hex .map-legend\",\n            {\n              opacity: 1,\n              duration: 0.6,\n              ease: \"power2.out\",\n            },\n            5.0,\n          );\n\n          /* 5.5s: source fade */\n          tl.to(\n            \"#us-map-hex .map-source\",\n            {\n              opacity: 1,\n              duration: 0.5,\n              ease: \"power2.out\",\n            },\n            5.5,\n          );\n\n          /* 6.0s: top 5 income states pulse */\n          var topStates = [\"MD\", \"NJ\", \"MA\", \"CT\", \"HI\"];\n          var topPolys = [];\n          for (var i = 0; i < topStates.length; i++) {\n            for (var j = 0; j < allStates.length; j++) {\n              if (allStates[j] === topStates[i]) {\n                topPolys.push(hexPolys[j]);\n                break;\n              }\n            }\n          }\n\n          tl.to(\n            topPolys,\n            {\n              filter: \"brightness(1.4)\",\n              duration: 0.4,\n              stagger: 0.08,\n              ease: \"power2.out\",\n            },\n            6.0,\n          );\n\n          tl.to(\n            topPolys,\n            {\n              filter: \"brightness(1)\",\n              duration: 0.4,\n              stagger: 0.08,\n              ease: \"power2.in\",\n            },\n            6.8,\n          );\n\n          tl.to(\n            topPolys,\n            {\n              filter: \"brightness(1.3)\",\n              duration: 0.3,\n              stagger: 0.06,\n              ease: \"power2.out\",\n            },\n            7.4,\n          );\n\n          tl.to(\n            topPolys,\n            {\n              filter: \"brightness(1)\",\n              duration: 0.5,\n              stagger: 0.06,\n              ease: \"power2.in\",\n            },\n            8.0,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"us-map-hex\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/us-map.json b/docs/public/catalog/blocks/us-map.json
new file mode 100644
index 0000000000..551c5ae301
--- /dev/null
+++ b/docs/public/catalog/blocks/us-map.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>US Map</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background-color: #0f172a;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"us-map\"\n      data-composition-id=\"us-map\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n    >\n      <div class=\"map-container\">\n        <div class=\"header\">\n          <h1 class=\"headline\">Population Density by State</h1>\n          <p class=\"subtitle\">Residents per square mile, 2024 Census estimates</p>\n        </div>\n\n        <svg class=\"map-svg\" viewBox=\"0 0 1400 820\" preserveAspectRatio=\"xMidYMid meet\">\n          <g class=\"states-group\"></g>\n          <g class=\"labels-group\"></g>\n        </svg>\n\n        <div class=\"legend\">\n          <span class=\"legend-label legend-low\">Low</span>\n          <div class=\"legend-bar\"></div>\n          <span class=\"legend-label legend-high\">High</span>\n        </div>\n\n        <div class=\"source\">Source: U.S. Census Bureau</div>\n      </div>\n\n      <style>\n        #us-map {\n          width: 1920px;\n          height: 1080px;\n          background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n          font-family: \"Inter\", sans-serif;\n          color: #e2e8f0;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          overflow: hidden;\n        }\n\n        #us-map .map-container {\n          width: 1700px;\n          height: 950px;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          position: relative;\n        }\n\n        #us-map .header {\n          text-align: center;\n          margin-bottom: 20px;\n        }\n\n        #us-map .headline {\n          font-size: 52px;\n          font-weight: 700;\n          letter-spacing: -0.02em;\n          color: #f8fafc;\n          clip-path: inset(0 100% 0 0);\n        }\n\n        #us-map .subtitle {\n          font-size: 20px;\n          font-weight: 300;\n          color: #94a3b8;\n          margin-top: 8px;\n          opacity: 0;\n        }\n\n        #us-map .map-svg {\n          width: 1500px;\n          height: 750px;\n          overflow: visible;\n        }\n\n        #us-map .state-path {\n          stroke: #1e293b;\n          stroke-width: 1.2;\n          opacity: 0;\n          cursor: default;\n        }\n\n        #us-map .state-label {\n          font-size: 10px;\n          font-weight: 500;\n          fill: #f8fafc;\n          text-anchor: middle;\n          dominant-baseline: central;\n          opacity: 0;\n          pointer-events: none;\n          text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);\n        }\n\n        #us-map .legend {\n          display: flex;\n          align-items: center;\n          gap: 12px;\n          margin-top: 16px;\n          opacity: 0;\n        }\n\n        #us-map .legend-bar {\n          width: 300px;\n          height: 12px;\n          border-radius: 6px;\n          background: linear-gradient(90deg, #1e3a5f, #2563eb, #7c3aed, #ec4899);\n        }\n\n        #us-map .legend-label {\n          font-size: 14px;\n          font-weight: 500;\n          color: #94a3b8;\n        }\n\n        #us-map .source {\n          position: absolute;\n          bottom: 0;\n          right: 40px;\n          font-size: 12px;\n          color: #475569;\n          opacity: 0;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const US_TOPO_URL = \"https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json\";\n\n          const stateData = {\n            \"01\": { name: \"Alabama\", abbr: \"AL\", density: 99.2 },\n            \"02\": { name: \"Alaska\", abbr: \"AK\", density: 1.3 },\n            \"04\": { name: \"Arizona\", abbr: \"AZ\", density: 63.5 },\n            \"05\": { name: \"Arkansas\", abbr: \"AR\", density: 58.1 },\n            \"06\": { name: \"California\", abbr: \"CA\", density: 253.9 },\n            \"08\": { name: \"Colorado\", abbr: \"CO\", density: 56.5 },\n            \"09\": { name: \"Connecticut\", abbr: \"CT\", density: 738.1 },\n            10: { name: \"Delaware\", abbr: \"DE\", density: 508.0 },\n            12: { name: \"Florida\", abbr: \"FL\", density: 410.5 },\n            13: { name: \"Georgia\", abbr: \"GA\", density: 185.6 },\n            15: { name: \"Hawaii\", abbr: \"HI\", density: 226.6 },\n            16: { name: \"Idaho\", abbr: \"ID\", density: 22.8 },\n            17: { name: \"Illinois\", abbr: \"IL\", density: 228.2 },\n            18: { name: \"Indiana\", abbr: \"IN\", density: 186.7 },\n            19: { name: \"Iowa\", abbr: \"IA\", density: 57.1 },\n            20: { name: \"Kansas\", abbr: \"KS\", density: 35.9 },\n            21: { name: \"Kentucky\", abbr: \"KY\", density: 113.2 },\n            22: { name: \"Louisiana\", abbr: \"LA\", density: 107.7 },\n            23: { name: \"Maine\", abbr: \"ME\", density: 43.8 },\n            24: { name: \"Maryland\", abbr: \"MD\", density: 636.1 },\n            25: { name: \"Massachusetts\", abbr: \"MA\", density: 901.2 },\n            26: { name: \"Michigan\", abbr: \"MI\", density: 176.4 },\n            27: { name: \"Minnesota\", abbr: \"MN\", density: 71.7 },\n            28: { name: \"Mississippi\", abbr: \"MS\", density: 63.5 },\n            29: { name: \"Missouri\", abbr: \"MO\", density: 89.5 },\n            30: { name: \"Montana\", abbr: \"MT\", density: 7.6 },\n            31: { name: \"Nebraska\", abbr: \"NE\", density: 25.3 },\n            32: { name: \"Nevada\", abbr: \"NV\", density: 28.3 },\n            33: { name: \"New Hampshire\", abbr: \"NH\", density: 153.2 },\n            34: { name: \"New Jersey\", abbr: \"NJ\", density: 1263.0 },\n            35: { name: \"New Mexico\", abbr: \"NM\", density: 17.4 },\n            36: { name: \"New York\", abbr: \"NY\", density: 415.3 },\n            37: { name: \"North Carolina\", abbr: \"NC\", density: 214.7 },\n            38: { name: \"North Dakota\", abbr: \"ND\", density: 11.3 },\n            39: { name: \"Ohio\", abbr: \"OH\", density: 288.8 },\n            40: { name: \"Oklahoma\", abbr: \"OK\", density: 57.7 },\n            41: { name: \"Oregon\", abbr: \"OR\", density: 43.9 },\n            42: { name: \"Pennsylvania\", abbr: \"PA\", density: 286.1 },\n            44: { name: \"Rhode Island\", abbr: \"RI\", density: 1061.4 },\n            45: { name: \"South Carolina\", abbr: \"SC\", density: 170.2 },\n            46: { name: \"South Dakota\", abbr: \"SD\", density: 12.2 },\n            47: { name: \"Tennessee\", abbr: \"TN\", density: 167.0 },\n            48: { name: \"Texas\", abbr: \"TX\", density: 112.8 },\n            49: { name: \"Utah\", abbr: \"UT\", density: 40.3 },\n            50: { name: \"Vermont\", abbr: \"VT\", density: 68.0 },\n            51: { name: \"Virginia\", abbr: \"VA\", density: 218.6 },\n            53: { name: \"Washington\", abbr: \"WA\", density: 115.9 },\n            54: { name: \"West Virginia\", abbr: \"WV\", density: 74.6 },\n            55: { name: \"Wisconsin\", abbr: \"WI\", density: 108.8 },\n            56: { name: \"Wyoming\", abbr: \"WY\", density: 5.8 },\n          };\n\n          const maxDensity = 500;\n\n          function densityToColor(d) {\n            const t = Math.min(d / maxDensity, 1);\n            if (t < 0.33) {\n              const s = t / 0.33;\n              return lerpColor([30, 58, 95], [37, 99, 235], s);\n            } else if (t < 0.66) {\n              const s = (t - 0.33) / 0.33;\n              return lerpColor([37, 99, 235], [124, 58, 237], s);\n            } else {\n              const s = (t - 0.66) / 0.34;\n              return lerpColor([124, 58, 237], [236, 72, 153], s);\n            }\n          }\n\n          function lerpColor(a, b, t) {\n            const r = Math.round(a[0] + (b[0] - a[0]) * t);\n            const g = Math.round(a[1] + (b[1] - a[1]) * t);\n            const bl = Math.round(a[2] + (b[2] - a[2]) * t);\n            return \"rgb(\" + r + \",\" + g + \",\" + bl + \")\";\n          }\n\n          const svg = document.querySelector(\"#us-map .map-svg\");\n          const statesGroup = svg.querySelector(\".states-group\");\n          const labelsGroup = svg.querySelector(\".labels-group\");\n          const tl = gsap.timeline({ paused: true });\n\n          fetch(US_TOPO_URL)\n            .then((r) => r.json())\n            .then((us) => {\n              const states = topojson.feature(us, us.objects.states).features;\n              const projection = d3\n                .geoAlbersUsa()\n                .fitSize([1380, 800], { type: \"FeatureCollection\", features: states });\n              const path = d3.geoPath().projection(projection);\n\n              const sortedStates = states\n                .filter((f) => stateData[String(f.id).padStart(2, \"0\")])\n                .sort((a, b) => {\n                  const aData = stateData[String(a.id).padStart(2, \"0\")];\n                  const bData = stateData[String(b.id).padStart(2, \"0\")];\n                  return aData.density - bData.density;\n                });\n\n              sortedStates.forEach((feature) => {\n                const fips = String(feature.id).padStart(2, \"0\");\n                const info = stateData[fips];\n                if (!info) return;\n\n                const d = path(feature);\n                if (!d) return;\n\n                const el = document.createElementNS(\"http://www.w3.org/2000/svg\", \"path\");\n                el.setAttribute(\"d\", d);\n                el.setAttribute(\"class\", \"state-path\");\n                el.setAttribute(\"data-state\", info.abbr);\n                el.setAttribute(\"data-density\", info.density);\n                el.style.fill = densityToColor(info.density);\n                statesGroup.appendChild(el);\n\n                const centroid = path.centroid(feature);\n                if (centroid[0] && centroid[1]) {\n                  const label = document.createElementNS(\"http://www.w3.org/2000/svg\", \"text\");\n                  label.setAttribute(\"x\", centroid[0]);\n                  label.setAttribute(\"y\", centroid[1]);\n                  label.setAttribute(\"class\", \"state-label\");\n                  label.textContent = info.abbr;\n                  labelsGroup.appendChild(label);\n                }\n              });\n\n              buildTimeline();\n            });\n\n          function buildTimeline() {\n            const statePaths = statesGroup.querySelectorAll(\".state-path\");\n            const stateLabels = labelsGroup.querySelectorAll(\".state-label\");\n\n            tl.to(\n              \"#us-map .headline\",\n              {\n                clipPath: \"inset(0 0% 0 0)\",\n                duration: 1.0,\n                ease: \"power2.inOut\",\n              },\n              0,\n            );\n\n            tl.to(\n              \"#us-map .subtitle\",\n              {\n                opacity: 1,\n                duration: 0.6,\n                ease: \"power2.out\",\n              },\n              0.4,\n            );\n\n            tl.to(\n              statePaths,\n              {\n                opacity: 1,\n                scale: 1,\n                duration: 0.4,\n                stagger: {\n                  each: 0.06,\n                  from: \"center\",\n                },\n                ease: \"back.out(1.4)\",\n              },\n              1.0,\n            );\n\n            tl.to(\n              stateLabels,\n              {\n                opacity: 1,\n                duration: 0.3,\n                stagger: {\n                  each: 0.04,\n                  from: \"center\",\n                },\n                ease: \"power2.out\",\n              },\n              3.5,\n            );\n\n            tl.to(\n              \"#us-map .legend\",\n              {\n                opacity: 1,\n                y: 0,\n                duration: 0.6,\n                ease: \"power2.out\",\n              },\n              5.0,\n            );\n\n            tl.to(\n              \"#us-map .source\",\n              {\n                opacity: 1,\n                duration: 0.5,\n                ease: \"power2.out\",\n              },\n              5.5,\n            );\n\n            const highlightStates = [\"CA\", \"NY\", \"TX\", \"FL\", \"NJ\"];\n            highlightStates.forEach((abbr, i) => {\n              const el = statesGroup.querySelector('[data-state=\"' + abbr + '\"]');\n              if (!el) return;\n\n              tl.to(\n                el,\n                {\n                  filter: \"brightness(1.6) drop-shadow(0 0 8px rgba(255,255,255,0.4))\",\n                  stroke: \"#f8fafc\",\n                  strokeWidth: 2.5,\n                  duration: 0.5,\n                  ease: \"power2.out\",\n                },\n                6.5 + i * 0.8,\n              );\n\n              tl.to(\n                el,\n                {\n                  filter: \"brightness(1) drop-shadow(0 0 0px rgba(255,255,255,0))\",\n                  stroke: \"#1e293b\",\n                  strokeWidth: 1.2,\n                  duration: 0.5,\n                  ease: \"power2.in\",\n                },\n                7.0 + i * 0.8,\n              );\n            });\n\n            window.__timelines = window.__timelines || {};\n            window.__timelines[\"us-map\"] = tl;\n          }\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vfx-iphone-device.json b/docs/public/catalog/blocks/vfx-iphone-device.json
new file mode 100644
index 0000000000..ae8b5605df
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-iphone-device.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Devices Canvas — HTML-in-Canvas API Showcase</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/DRACOLoader.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/loaders/GLTFLoader.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #050508;\n        overflow: hidden;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #050508;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"devices-canvas\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"15\"\n      data-root=\"true\"\n    >\n      <!-- LIVE HTML captured every frame via drawElementImage  -->\n      <canvas\n        id=\"cap-phone\"\n        layoutsubtree\n        width=\"390\"\n        height=\"844\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 390px;\n          height: 844px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <div\n          id=\"phone-html\"\n          style=\"\n            width: 390px;\n            height: 844px;\n            overflow: hidden;\n            font-family: Inter, system-ui, sans-serif;\n            color: #e2e8f0;\n          \"\n        >\n          <div\n            id=\"phone-scroll\"\n            style=\"background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)\"\n          >\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                padding: 14px 18px;\n                border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n              \"\n            >\n              <span\n                style=\"\n                  font-weight: 800;\n                  font-size: 14px;\n                  background: linear-gradient(135deg, #34d399, #3b82f6);\n                  -webkit-background-clip: text;\n                  -webkit-text-fill-color: transparent;\n                \"\n                >HyperFrames</span\n              ><span\n                style=\"\n                  font-size: 10px;\n                  font-weight: 600;\n                  padding: 5px 12px;\n                  border-radius: 6px;\n                  background: #10b981;\n                  color: #fff;\n                \"\n                >Log in</span\n              >\n            </div>\n            <div\n              id=\"phone-title\"\n              style=\"\n                font-size: 26px;\n                font-weight: 800;\n                letter-spacing: -0.5px;\n                padding: 18px 18px 6px;\n                line-height: 1.1;\n                opacity: 0;\n              \"\n            >\n              Community Playground\n            </div>\n            <div style=\"font-size: 11px; color: rgba(255, 255, 255, 0.4); padding: 0 18px 14px\">\n              Made with HyperFrames\n            </div>\n            <div style=\"display: flex; gap: 6px; padding: 0 18px 14px\">\n              <span\n                style=\"\n                  font-size: 9px;\n                  font-weight: 600;\n                  padding: 4px 10px;\n                  border-radius: 16px;\n                  background: rgba(16, 185, 129, 0.15);\n                  color: #10b981;\n                  border: 1px solid rgba(16, 185, 129, 0.3);\n                \"\n                >Examples</span\n              ><span\n                id=\"phone-count\"\n                style=\"\n                  font-size: 9px;\n                  font-weight: 600;\n                  padding: 4px 10px;\n                  border-radius: 16px;\n                  border: 1px solid rgba(255, 255, 255, 0.1);\n                  color: rgba(255, 255, 255, 0.5);\n                \"\n                >Catalog 0</span\n              >\n            </div>\n            <div id=\"phone-cards\" style=\"display: grid; gap: 10px; padding: 0 18px 18px\"></div>\n          </div>\n        </div>\n      </canvas>\n\n      <canvas\n        id=\"cap-laptop\"\n        layoutsubtree\n        width=\"1440\"\n        height=\"900\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1440px;\n          height: 900px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <div\n          id=\"laptop-html\"\n          style=\"\n            width: 1440px;\n            height: 900px;\n            overflow: hidden;\n            font-family: Inter, system-ui, sans-serif;\n            color: #e2e8f0;\n          \"\n        >\n          <div\n            id=\"laptop-scroll\"\n            style=\"background: linear-gradient(180deg, #0a0a12, #0f0f1a); transform: translateY(0)\"\n          >\n            <div\n              style=\"\n                display: flex;\n                align-items: center;\n                justify-content: space-between;\n                padding: 18px 36px;\n                border-bottom: 1px solid rgba(255, 255, 255, 0.06);\n              \"\n            >\n              <span\n                style=\"\n                  font-weight: 800;\n                  font-size: 17px;\n                  background: linear-gradient(135deg, #34d399, #3b82f6);\n                  -webkit-background-clip: text;\n                  -webkit-text-fill-color: transparent;\n                \"\n                >HyperFrames</span\n              >\n              <div\n                style=\"display: flex; gap: 20px; font-size: 12px; color: rgba(255, 255, 255, 0.5)\"\n              >\n                <span>Docs</span><span>Playground</span><span>Pricing</span>\n              </div>\n              <span\n                style=\"\n                  font-size: 11px;\n                  font-weight: 600;\n                  padding: 6px 14px;\n                  border-radius: 6px;\n                  background: #10b981;\n                  color: #fff;\n                \"\n                >Log in</span\n              >\n            </div>\n            <div\n              id=\"laptop-title\"\n              style=\"\n                font-size: 40px;\n                font-weight: 800;\n                letter-spacing: -1px;\n                padding: 28px 36px 10px;\n                opacity: 0;\n              \"\n            >\n              Community Playground\n            </div>\n            <div style=\"font-size: 13px; color: rgba(255, 255, 255, 0.4); padding: 0 36px 18px\">\n              Create videos with HTML — powered by HyperFrames\n            </div>\n            <div style=\"display: flex; gap: 8px; padding: 0 36px 20px\">\n              <span\n                style=\"\n                  font-size: 10px;\n                  font-weight: 600;\n                  padding: 5px 12px;\n                  border-radius: 16px;\n                  background: rgba(16, 185, 129, 0.15);\n                  color: #10b981;\n                  border: 1px solid rgba(16, 185, 129, 0.3);\n                \"\n                >Examples</span\n              ><span\n                id=\"laptop-count\"\n                style=\"\n                  font-size: 10px;\n                  font-weight: 600;\n                  padding: 5px 12px;\n                  border-radius: 16px;\n                  border: 1px solid rgba(255, 255, 255, 0.1);\n                  color: rgba(255, 255, 255, 0.5);\n                \"\n                >Catalog 0</span\n              >\n            </div>\n            <div\n              id=\"laptop-cards\"\n              style=\"\n                display: grid;\n                grid-template-columns: repeat(3, 1fr);\n                gap: 14px;\n                padding: 0 36px 36px;\n              \"\n            ></div>\n          </div>\n        </div>\n      </canvas>\n\n      <canvas\n        id=\"theater\"\n        width=\"1920\"\n        height=\"1080\"\n        style=\"position: absolute; top: 0; left: 0; width: 1920px; height: 1080px\"\n      ></canvas>\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"15\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      var W = 1920,\n        H = 1080,\n        PI = Math.PI;\n\n      // ── Renderer ───────────────────────────────────────────────────────\n      var renderer = new THREE.WebGLRenderer({\n        canvas: document.getElementById(\"theater\"),\n        antialias: true,\n        preserveDrawingBuffer: true,\n      });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n      renderer.toneMapping = THREE.ACESFilmicToneMapping;\n      renderer.toneMappingExposure = 1.15;\n      renderer.outputEncoding = THREE.sRGBEncoding;\n      renderer.setClearColor(0x050508, 1);\n\n      var scene = new THREE.Scene();\n      scene.background = new THREE.Color(0x050508);\n      var camera = new THREE.PerspectiveCamera(34, W / H, 0.1, 100);\n\n      // ── Environment Map ────────────────────────────────────────────────\n      var eC = document.createElement(\"canvas\");\n      eC.width = 1024;\n      eC.height = 512;\n      var ec = eC.getContext(\"2d\");\n      var eg = ec.createLinearGradient(0, 0, 1024, 512);\n      eg.addColorStop(0, \"#020307\");\n      eg.addColorStop(0.15, \"#1a1a2e\");\n      eg.addColorStop(0.3, \"#ffffff\");\n      eg.addColorStop(0.45, \"#0a0a1e\");\n      eg.addColorStop(0.6, \"#ffffff\");\n      eg.addColorStop(0.75, \"#1e1e2e\");\n      eg.addColorStop(1, \"#020307\");\n      ec.fillStyle = eg;\n      ec.fillRect(0, 0, 1024, 512);\n      ec.globalCompositeOperation = \"screen\";\n      for (var ei = 0; ei < 7; ei++) {\n        ec.fillStyle = \"rgba(255,255,255,\" + (ei % 2 === 0 ? 0.15 : 0.08) + \")\";\n        ec.fillRect((ei % 3) * 100, 60 + ei * 56, 700, 3 + (ei % 2) * 2);\n      }\n      var eT = new THREE.CanvasTexture(eC);\n      eT.mapping = THREE.EquirectangularReflectionMapping;\n      var pm = new THREE.PMREMGenerator(renderer);\n      scene.environment = pm.fromEquirectangular(eT).texture;\n      eT.dispose();\n      pm.dispose();\n\n      // ── Background ─────────────────────────────────────────────────────\n      scene.add(\n        new THREE.Mesh(\n          new THREE.PlaneGeometry(22, 14),\n          new THREE.ShaderMaterial({\n            uniforms: {},\n            vertexShader:\n              \"varying vec2 v;void main(){v=uv;gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);}\",\n            fragmentShader:\n              \"varying vec2 v;void main(){vec3 c=vec3(0.02,0.02,0.03);c+=vec3(0.05,0.02,0.1)*exp(-pow(length(v-vec2(0.3,0.55)),2.0)*5.0);c+=vec3(0.02,0.05,0.1)*exp(-pow(length(v-vec2(0.7,0.45)),2.0)*5.0);gl_FragColor=vec4(c,1.0);}\",\n            depthWrite: false,\n          }),\n        ),\n      ).position.z = -6;\n\n      var floor = new THREE.Mesh(\n        new THREE.PlaneGeometry(30, 30),\n        new THREE.MeshStandardMaterial({ color: 0x050508, metalness: 0.95, roughness: 0.18 }),\n      );\n      floor.rotation.x = -PI / 2;\n      floor.position.y = -2.5;\n      scene.add(floor);\n\n      scene.add(new THREE.AmbientLight(0x222233, 0.5));\n      var kL = new THREE.DirectionalLight(0xffffff, 2.2);\n      kL.position.set(-3, 4, 5);\n      scene.add(kL);\n      var rL = new THREE.PointLight(0x6366f1, 3, 15);\n      rL.position.set(4, 2, 3);\n      scene.add(rL);\n      var wL = new THREE.PointLight(0xffc8a8, 1.5, 12);\n      wL.position.set(-3, -1, 4);\n      scene.add(wL);\n\n      // ── Live HTML → WebGL Texture  ─\n      var capPhoneCvs = document.getElementById(\"cap-phone\");\n      var capPhoneCtx = capPhoneCvs.getContext(\"2d\");\n      var phoneHtmlEl = document.getElementById(\"phone-html\");\n      var phoneScrollEl = document.getElementById(\"phone-scroll\");\n\n      var capLapCvs = document.getElementById(\"cap-laptop\");\n      var capLapCtx = capLapCvs.getContext(\"2d\");\n      var lapHtmlEl = document.getElementById(\"laptop-html\");\n      var lapScrollEl = document.getElementById(\"laptop-scroll\");\n\n      var apiOk = (function () {\n        var tc = document.createElement(\"canvas\");\n        if (!(\"layoutSubtree\" in tc)) return false;\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        var ctx = tc.getContext(\"2d\");\n        return ctx && typeof ctx.drawElementImage === \"function\";\n      })();\n      var paintReady = false;\n\n      // Generate card HTML for both screens\n      var cardData = [\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#2563eb)\",\n          text: \"100M+ AI team\",\n          title: \"Notion Showcase\",\n          meta: \"15s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#4a1942,#db2777)\",\n          text: \"Design System v4\",\n          title: \"Dribbble Showcase\",\n          meta: \"12s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#451a03,#f59e0b)\",\n          text: \"$1.9T Market Cap\",\n          title: \"Stripe Showcase\",\n          meta: \"10s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#064e3b,#10b981)\",\n          text: \"Ship faster with AI\",\n          title: \"Vercel Promo\",\n          meta: \"20s · 1080×1920\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#3b82f6)\",\n          text: \"Privacy App\",\n          title: \"iPhone App Store\",\n          meta: \"8s · 1080×1920\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#4a1942,#a855f7)\",\n          text: \"Audio Visualizer\",\n          title: \"Spotify Remix\",\n          meta: \"15s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#064e3b,#059669)\",\n          text: \"Code Animation\",\n          title: \"Terminal Demo\",\n          meta: \"12s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#451a03,#d97706)\",\n          text: \"Launch Video\",\n          title: \"Product Hunt\",\n          meta: \"30s · 1920×1080\",\n        },\n        {\n          bg: \"linear-gradient(135deg,#1e3a5f,#6366f1)\",\n          text: \"3D Devices\",\n          title: \"Device Mockups\",\n          meta: \"15s · 1920×1080\",\n        },\n      ];\n      function makeCardHTML(cd, isMobile) {\n        var fs = isMobile ? 12 : 16;\n        return (\n          '<div style=\"background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:' +\n          (isMobile ? 10 : 12) +\n          'px;overflow:hidden;opacity:0\" class=\"anim-card\">' +\n          '<div style=\"width:100%;aspect-ratio:16/9;background:' +\n          cd.bg +\n          ';display:flex;align-items:center;justify-content:center\"><span style=\"font-size:' +\n          fs +\n          'px;font-weight:700;color:rgba(255,255,255,0.7)\">' +\n          cd.text +\n          \"</span></div>\" +\n          '<div style=\"padding:' +\n          (isMobile ? \"8px 10px\" : \"10px 14px\") +\n          '\"><div style=\"font-size:' +\n          (isMobile ? 11 : 13) +\n          'px;font-weight:600;margin-bottom:2px\">' +\n          cd.title +\n          '</div><div style=\"font-size:' +\n          (isMobile ? 9 : 10) +\n          'px;color:rgba(255,255,255,0.3)\">' +\n          cd.meta +\n          \"</div></div></div>\"\n        );\n      }\n      var phoneCardsEl = document.getElementById(\"phone-cards\");\n      var laptopCardsEl = document.getElementById(\"laptop-cards\");\n      for (var ci = 0; ci < cardData.length; ci++) {\n        if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);\n        laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);\n      }\n\n      var phoneTex = new THREE.CanvasTexture(capPhoneCvs);\n      phoneTex.minFilter = THREE.LinearFilter;\n      phoneTex.magFilter = THREE.LinearFilter;\n      phoneTex.generateMipmaps = false;\n      var lapTex = new THREE.CanvasTexture(capLapCvs);\n      lapTex.minFilter = THREE.LinearFilter;\n      lapTex.magFilter = THREE.LinearFilter;\n      lapTex.generateMipmaps = false;\n\n      function captureScreens() {\n        if (!apiOk || !paintReady) return;\n        try {\n          capPhoneCtx.clearRect(0, 0, 390, 844);\n          capPhoneCtx.drawElementImage(phoneHtmlEl, 0, 0, 390, 844);\n          capLapCtx.clearRect(0, 0, 1440, 900);\n          capLapCtx.drawElementImage(lapHtmlEl, 0, 0, 1440, 900);\n          phoneTex.needsUpdate = true;\n          lapTex.needsUpdate = true;\n        } catch (e) {}\n      }\n\n      // ── Turntable Group (both devices rotate together for 360° orbit) ──\n      var turntable = new THREE.Group();\n      scene.add(turntable);\n\n      // ── Model Groups ───────────────────────────────────────────────────\n      var phoneGrp = new THREE.Group();\n      turntable.add(phoneGrp);\n      var lapGrp = new THREE.Group();\n      turntable.add(lapGrp);\n      var ready = 0;\n\n      var draco = new THREE.DRACOLoader();\n      draco.setDecoderPath(\"https://www.gstatic.com/draco/versioned/decoders/1.5.6/\");\n      var loader = new THREE.GLTFLoader();\n      loader.setDRACOLoader(draco);\n\n      // ── Morphing Glass Lens (single, shared between devices) ───────────\n      var glassMat = new THREE.MeshPhysicalMaterial({\n        color: 0xffffff,\n        metalness: 0,\n        roughness: 0.02,\n        transmission: 1,\n        thickness: 1.8,\n        ior: 1.45,\n        attenuationColor: new THREE.Color(0xe8f4ff),\n        attenuationDistance: 10,\n        clearcoat: 1,\n        clearcoatRoughness: 0.03,\n        specularIntensity: 1,\n        envMapIntensity: 2.5,\n        transparent: true,\n        opacity: 0.85,\n        side: THREE.DoubleSide,\n      });\n\n      var glassGeos = [\n        new THREE.SphereGeometry(0.22, 32, 32),\n        new THREE.IcosahedronGeometry(0.22, 1),\n        new THREE.OctahedronGeometry(0.25, 0),\n        new THREE.DodecahedronGeometry(0.22, 0),\n        new THREE.TetrahedronGeometry(0.28, 0),\n        new THREE.TorusGeometry(0.16, 0.07, 16, 32),\n      ];\n      var glassLens = new THREE.Mesh(glassGeos[0], glassMat);\n      glassLens.renderOrder = 10;\n\n      // iPhone\n      loader.load(\"models/iphone.glb\", function (gltf) {\n        var m = gltf.scene;\n        var box = new THREE.Box3().setFromObject(m);\n        var sz = box.getSize(new THREE.Vector3());\n        var s = 3.2 / sz.y;\n        m.scale.setScalar(s);\n        box.setFromObject(m);\n        m.position.sub(box.getCenter(new THREE.Vector3()));\n        m.traverse(function (child) {\n          if (!child.isMesh) return;\n          if (child.material && child.material.emissiveMap) {\n            child.material = new THREE.MeshBasicMaterial({ map: phoneTex });\n          }\n        });\n        scene.add(glassLens);\n\n        phoneGrp.add(m);\n        ready++;\n        if (ready === 2) onReady();\n      });\n\n      // MacBook\n      loader.load(\"models/macbook.glb\", function (gltf) {\n        var m = gltf.scene;\n        var box = new THREE.Box3().setFromObject(m);\n        var sz = box.getSize(new THREE.Vector3());\n        var s = 4.5 / Math.max(sz.x, sz.z);\n        m.scale.setScalar(s);\n        box.setFromObject(m);\n        m.position.sub(box.getCenter(new THREE.Vector3()));\n\n        m.traverse(function (child) {\n          if (child.isMesh && (child.name === \"matte\" || child.name === \"Matte\")) {\n            child.material = new THREE.MeshBasicMaterial({ map: lapTex });\n          }\n        });\n\n        // Apple logo on back of lid — exact coords from model inspection:\n        // back mesh center: (0, 0.04, -1.54), matte center: (0, 0.15, -1.56)\n        // Back surface faces -Z. Logo at z = -1.63 (outside back surface), facing -Z.\n        var lc = document.createElement(\"canvas\");\n        lc.width = 256;\n        lc.height = 256;\n        var lx = lc.getContext(\"2d\");\n        lx.clearRect(0, 0, 256, 256);\n        lx.save();\n        lx.translate(128, 128);\n        lx.scale(11, 11);\n        lx.translate(-12, -13);\n        lx.fillStyle = \"#b8b8bc\";\n        lx.fill(\n          new Path2D(\n            \"M18.71,19.5C17.88,20.49 17,21.4 15.66,21.42C14.29,21.45 13.73,20.56 12.18,20.56C10.63,20.56 9.99,21.4 8.74,21.45C7.44,21.5 6.47,20.36 5.62,19.39C3.89,17.39 2.59,13.78 4.37,11.37C5.25,10.17 6.61,9.42 8.08,9.4C9.4,9.37 10.62,10.35 11.43,10.35C12.24,10.35 13.72,9.17 15.32,9.35C15.98,9.38 17.66,9.61 18.72,11.17C18.62,11.23 16.39,12.52 16.42,15.19C16.45,18.37 19.18,19.35 19.21,19.36ZM15.23,7.7C15.96,6.82 16.43,5.6 16.31,4.38C15.25,4.42 13.97,5.09 13.22,5.96C12.55,6.74 11.98,7.99 12.12,9.18C13.29,9.27 14.5,8.57 15.23,7.7Z\",\n          ),\n        );\n        lx.restore();\n        var logoTex = new THREE.CanvasTexture(lc);\n        logoTex.minFilter = THREE.LinearFilter;\n        var appleLogoMesh = new THREE.Mesh(\n          new THREE.PlaneGeometry(0.55, 0.55),\n          new THREE.MeshBasicMaterial({\n            map: logoTex,\n            transparent: true,\n            depthWrite: false,\n            side: THREE.DoubleSide,\n          }),\n        );\n        appleLogoMesh.position.set(0, 0.1, -1.63);\n        appleLogoMesh.rotation.y = PI;\n        m.add(appleLogoMesh);\n\n        lapGrp.add(m);\n        ready++;\n        if (ready === 2) onReady();\n      });\n\n      function onReady() {\n        paintReady = true;\n        captureScreens();\n      }\n\n      // ── Cubic Bezier Implementation ────────────────────────────────────\n      function cbz(p1x, p1y, p2x, p2y) {\n        var ax = 3 * p1x - 3 * p2x + 1,\n          bx = 3 * p2x - 6 * p1x,\n          cx = 3 * p1x;\n        var ay = 3 * p1y - 3 * p2y + 1,\n          by = 3 * p2y - 6 * p1y,\n          cy = 3 * p1y;\n        return function (t) {\n          var s = t;\n          for (var i = 0; i < 12; i++) {\n            var x = ((ax * s + bx) * s + cx) * s - t;\n            var dx = (3 * ax * s + 2 * bx) * s + cx;\n            if (Math.abs(dx) < 1e-10) break;\n            s -= x / dx;\n          }\n          s = Math.max(0, Math.min(1, s));\n          return ((ay * s + by) * s + cy) * s;\n        };\n      }\n\n      var enterEase = cbz(0.16, 1.0, 0.3, 1.0);\n      var spinEase = cbz(0.76, 0.0, 0.18, 1.0);\n      var driftEase = cbz(0.45, 0.0, 0.15, 1.0);\n      var snapEase = cbz(0.22, 1.15, 0.36, 1.0);\n      var breatheEase = cbz(0.37, 0.0, 0.63, 1.0);\n\n      // ── Animation State ────────────────────────────────────────────────\n      var S = {\n        phX: 0,\n        phY: 0.1,\n        phZ: 0.5,\n        phRX: 0,\n        phRY: PI,\n        phRZ: 0,\n        lpX: 10,\n        lpY: -0.2,\n        lpZ: -0.6,\n        lpRX: 0,\n        lpRY: 0,\n        lpRZ: 0,\n        cX: 0,\n        cY: 0.15,\n        cZ: 2.8,\n        clX: 0,\n        clY: 0.1,\n        clZ: 0,\n        drift: 0,\n        turn: 0,\n        scroll: 0,\n        cardReveal: 0,\n        titleFade: 0,\n        counter: 0,\n        p: 0,\n      };\n\n      function render() {\n        var d = S.drift;\n\n        // ── Animate live HTML content (captured to texture every frame) ──\n        // Title fade-in\n        document.getElementById(\"phone-title\").style.opacity = S.titleFade;\n        document.getElementById(\"laptop-title\").style.opacity = S.titleFade;\n        // Counter\n        var cnt = Math.round(S.counter);\n        document.getElementById(\"phone-count\").textContent = \"Catalog \" + cnt;\n        document.getElementById(\"laptop-count\").textContent = \"Catalog \" + cnt;\n        // Staggered card reveal\n        var allCards = document.querySelectorAll(\".anim-card\");\n        for (var ci2 = 0; ci2 < allCards.length; ci2++) {\n          var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));\n          allCards[ci2].style.opacity = cardProgress;\n          allCards[ci2].style.transform = \"translateY(\" + (1 - cardProgress) * 15 + \"px)\";\n        }\n        // Scroll\n        phoneScrollEl.style.transform = \"translateY(-\" + S.scroll * 500 + \"px)\";\n        lapScrollEl.style.transform = \"translateY(-\" + S.scroll * 300 + \"px)\";\n        // Re-capture HTML to texture\n        captureScreens();\n\n        phoneGrp.position.set(\n          S.phX + Math.sin(d * 0.5) * 0.015,\n          S.phY + Math.sin(d * 0.7) * 0.008,\n          S.phZ + Math.cos(d * 0.4) * 0.008,\n        );\n        phoneGrp.rotation.set(S.phRX, S.phRY, S.phRZ);\n        lapGrp.position.set(\n          S.lpX - Math.sin(d * 0.4) * 0.012,\n          S.lpY + Math.sin(d * 0.6) * 0.006,\n          S.lpZ + Math.cos(d * 0.35) * 0.008,\n        );\n        lapGrp.rotation.set(S.lpRX, S.lpRY, S.lpRZ);\n        turntable.rotation.y = S.turn;\n        // Single morphing glass — orbits around device edges, never overlaps screen\n        var t = tl.time();\n        var geoIdx = Math.floor(d * 0.8) % glassGeos.length;\n        if (glassLens.geometry !== glassGeos[geoIdx]) glassLens.geometry = glassGeos[geoIdx];\n        glassLens.rotation.set(d * 0.7, d * 0.9, d * 0.4);\n\n        // Glass glides across screen surface — hide during rotations to avoid clipping\n        glassLens.visible = t < 3.3 || (t >= 9.5 && t < 12.5) || t >= 13.5;\n        var gx, gy, gz;\n        if (t < 7) {\n          // Slide across iPhone screen face\n          var px = phoneGrp.position.x,\n            py = phoneGrp.position.y,\n            pz = phoneGrp.position.z;\n          gx = px + Math.sin(d * 1.4) * 0.35;\n          gy = py + Math.cos(d * 1.1) * 0.6;\n          gz = pz + 0.15;\n        } else if (t < 11) {\n          // Slide across MacBook screen face\n          var lx2 = lapGrp.position.x,\n            ly2 = lapGrp.position.y,\n            lz2 = lapGrp.position.z;\n          gx = lx2 + Math.sin(d * 1.2) * 1.2;\n          gy = ly2 + 0.3 + Math.cos(d * 0.9) * 0.6;\n          gz = lz2 + 0.2;\n        } else {\n          // Glide between both screens\n          var mx = (phoneGrp.position.x + lapGrp.position.x) * 0.5;\n          var my = (phoneGrp.position.y + lapGrp.position.y) * 0.5;\n          gx = mx + Math.sin(d * 1.0) * 1.5;\n          gy = my + 0.2 + Math.cos(d * 0.8) * 0.5;\n          gz = 0.3;\n        }\n        glassLens.position.set(gx, gy, gz);\n        camera.position.set(S.cX, S.cY, S.cZ);\n        camera.lookAt(S.clX, S.clY, S.clZ);\n        renderer.render(scene, camera);\n      }\n\n      // ── GSAP Timeline — Product Review Edit ────────────────────────────\n      var tl = gsap.timeline({ paused: true });\n      window.__timelines = window.__timelines || {};\n      window.__timelines[\"devices-canvas\"] = tl;\n\n      tl.to(S, { p: 1, drift: 15, duration: 15, ease: \"none\", onUpdate: render }, 0);\n\n      // ── Act 1 (0–3.5s): iPhone FRONT — hero close-up showing hyperframes.dev\n      tl.to(S, { phRY: PI + 0.06, phRX: 0.015, duration: 1.5, ease: breatheEase }, 0.3);\n      tl.to(S, { phRY: PI - 0.04, phRX: -0.01, duration: 1.5, ease: breatheEase }, 1.8);\n\n      // ── Act 2 (3.5–7s): iPhone spins 180° to show BACK (camera, titanium, Apple logo)\n      tl.to(S, { phRY: PI * 2, duration: 2.2, ease: spinEase }, 3.5);\n      tl.to(S, { cZ: 4.8, cY: 0.25, duration: 2, ease: driftEase }, 3.5);\n      // Hold back view — slight orbit to appreciate hardware\n      tl.to(\n        S,\n        { phRY: PI * 2 + 0.15, phRX: 0.04, cX: 0.15, duration: 1.5, ease: breatheEase },\n        5.5,\n      );\n\n      // ── Act 3 (7–9s): iPhone spins back to front, then exits LEFT off screen\n      tl.to(S, { phRY: PI * 3, duration: 1.8, ease: snapEase }, 7);\n      tl.to(S, { cZ: 3.5, cY: 0.2, duration: 1.5, ease: driftEase }, 7);\n      tl.to(S, { phX: -6, phZ: 0.3, duration: 2, ease: spinEase }, 8);\n\n      // ── Act 4 (9–11s): MacBook enters from right, hero close-up\n      tl.to(S, { lpX: 0, duration: 2, ease: enterEase }, 9);\n      tl.to(S, { cX: 0, clX: 0, cZ: 5, cY: 0.3, clY: -0.1, duration: 2, ease: driftEase }, 9);\n      tl.to(S, { lpRY: 0.06, duration: 1.5, ease: breatheEase }, 10);\n\n      // ── Act 5 (11–12.5s): iPhone returns, both settle for turntable\n      tl.to(S, { phX: -2.0, duration: 1.5, ease: enterEase }, 11);\n      tl.to(S, { lpX: 2.2, duration: 1.5, ease: breatheEase }, 11);\n      tl.to(\n        S,\n        { cX: 0.1, clX: 0.1, cZ: 7.5, cY: 0.5, clY: -0.1, duration: 1.5, ease: driftEase },\n        11,\n      );\n      tl.to(S, { phRY: PI * 3, lpRY: 0, duration: 1, ease: breatheEase }, 11);\n\n      // ── Act 6 (12.5–15s): 360° turntable — both devices rotate together\n      tl.to(S, { turn: PI * 2, duration: 2.5, ease: spinEase }, 12.5);\n\n      // ── Live HTML Animations (captured to 3D textures every frame) ──\n      // Title fade in\n      tl.to(S, { titleFade: 1, duration: 0.8, ease: breatheEase }, 0.3);\n      // Counter animates up\n      tl.to(S, { counter: 43, duration: 2, ease: driftEase }, 0.5);\n      // Cards stagger in (0→1 reveals all cards sequentially)\n      tl.to(S, { cardReveal: 1, duration: 3, ease: breatheEase }, 0.8);\n      // Scroll during hero shots\n      tl.to(S, { scroll: 0.6, duration: 3, ease: breatheEase }, 1.5);\n      tl.to(S, { scroll: 0, duration: 1.5, ease: driftEase }, 7);\n      // Scroll on MacBook reveal\n      tl.to(S, { scroll: 0.8, duration: 3, ease: breatheEase }, 9.5);\n      tl.to(S, { scroll: 0.3, duration: 2, ease: driftEase }, 13);\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vfx-liquid-background.json b/docs/public/catalog/blocks/vfx-liquid-background.json
new file mode 100644
index 0000000000..0b2b78484c
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-liquid-background.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n  </head>\n  <body style=\"margin: 0; overflow: hidden\">\n    <div\n      id=\"root\"\n      data-composition-id=\"vfx-liquid-background\"\n      data-root=\"true\"\n      data-start=\"0\"\n      data-duration=\"12\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <!-- ═══════════════ PANEL A: Fintech Dashboard ═══════════════ -->\n      <div\n        id=\"panel-a\"\n        data-panel-a\n        style=\"\n          position: absolute;\n          left: 0;\n          top: 0;\n          width: 1920px;\n          height: 1080px;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      >\n        <div\n          style=\"\n            width: 100%;\n            height: 100%;\n            background: #0a0e17;\n            color: #e2e8f0;\n            font-family:\n              &quot;Inter&quot;,\n              -apple-system,\n              BlinkMacSystemFont,\n              sans-serif;\n            padding: 60px 80px;\n            display: flex;\n            flex-direction: column;\n          \"\n        >\n          <!-- Top bar -->\n          <div\n            style=\"\n              display: flex;\n              justify-content: space-between;\n              align-items: center;\n              margin-bottom: 48px;\n            \"\n          >\n            <div style=\"display: flex; align-items: center; gap: 12px\">\n              <div\n                style=\"\n                  width: 36px;\n                  height: 36px;\n                  border-radius: 10px;\n                  background: linear-gradient(135deg, #6366f1, #8b5cf6);\n                \"\n              ></div>\n              <span style=\"font-size: 22px; font-weight: 700; letter-spacing: -0.02em\">Vault</span>\n            </div>\n            <div style=\"display: flex; gap: 32px; font-size: 15px; color: #64748b\">\n              <span style=\"color: #e2e8f0\">Portfolio</span>\n              <span>Markets</span>\n              <span>Activity</span>\n              <span>Settings</span>\n            </div>\n            <div\n              style=\"\n                width: 40px;\n                height: 40px;\n                border-radius: 50%;\n                background: #1e293b;\n                border: 2px solid #334155;\n              \"\n            ></div>\n          </div>\n\n          <!-- Balance section -->\n          <div style=\"margin-bottom: 40px\">\n            <div\n              style=\"\n                font-size: 14px;\n                color: #64748b;\n                letter-spacing: 0.08em;\n                text-transform: uppercase;\n                margin-bottom: 8px;\n              \"\n            >\n              Total Balance\n            </div>\n            <div style=\"display: flex; align-items: baseline; gap: 16px\">\n              <span\n                style=\"font-size: 72px; font-weight: 800; letter-spacing: -0.03em; color: #f8fafc\"\n                >$2,847,391.24</span\n              >\n              <span\n                style=\"\n                  padding: 6px 14px;\n                  border-radius: 20px;\n                  background: rgba(34, 197, 94, 0.15);\n                  color: #4ade80;\n                  font-size: 16px;\n                  font-weight: 600;\n                \"\n                >+12.4%</span\n              >\n            </div>\n          </div>\n\n          <!-- Chart area -->\n          <div style=\"flex: 1; min-height: 0; margin-bottom: 40px; position: relative\">\n            <svg\n              viewBox=\"0 0 1760 360\"\n              style=\"width: 100%; height: 100%\"\n              preserveAspectRatio=\"none\"\n            >\n              <defs>\n                <linearGradient id=\"chart-grad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n                  <stop offset=\"0%\" stop-color=\"#6366f1\" stop-opacity=\"0.4\" />\n                  <stop offset=\"100%\" stop-color=\"#6366f1\" stop-opacity=\"0\" />\n                </linearGradient>\n              </defs>\n              <path\n                d=\"M0,280 C150,260 300,180 450,200 C600,220 700,120 880,140 C1060,160 1150,60 1320,80 C1490,100 1600,40 1760,30 L1760,360 L0,360 Z\"\n                fill=\"url(#chart-grad)\"\n              />\n              <path\n                d=\"M0,280 C150,260 300,180 450,200 C600,220 700,120 880,140 C1060,160 1150,60 1320,80 C1490,100 1600,40 1760,30\"\n                fill=\"none\"\n                stroke=\"#6366f1\"\n                stroke-width=\"3\"\n              />\n            </svg>\n          </div>\n\n          <!-- Holdings row -->\n          <div style=\"display: flex; gap: 24px\">\n            <div style=\"flex: 1; background: #111827; border-radius: 16px; padding: 24px\">\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                  margin-bottom: 12px;\n                \"\n              >\n                <div style=\"display: flex; align-items: center; gap: 10px\">\n                  <div\n                    style=\"\n                      width: 32px;\n                      height: 32px;\n                      border-radius: 8px;\n                      background: #1e293b;\n                      display: flex;\n                      align-items: center;\n                      justify-content: center;\n                      font-size: 12px;\n                      font-weight: 700;\n                      color: #94a3b8;\n                    \"\n                  >\n                    AA\n                  </div>\n                  <div>\n                    <div style=\"font-weight: 600; font-size: 16px\">AAPL</div>\n                    <div style=\"font-size: 13px; color: #64748b\">Apple Inc.</div>\n                  </div>\n                </div>\n                <span style=\"color: #4ade80; font-size: 14px; font-weight: 600\">+2.31%</span>\n              </div>\n              <div style=\"font-size: 28px; font-weight: 700\">$189.84</div>\n            </div>\n            <div style=\"flex: 1; background: #111827; border-radius: 16px; padding: 24px\">\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                  margin-bottom: 12px;\n                \"\n              >\n                <div style=\"display: flex; align-items: center; gap: 10px\">\n                  <div\n                    style=\"\n                      width: 32px;\n                      height: 32px;\n                      border-radius: 8px;\n                      background: #1e293b;\n                      display: flex;\n                      align-items: center;\n                      justify-content: center;\n                      font-size: 12px;\n                      font-weight: 700;\n                      color: #94a3b8;\n                    \"\n                  >\n                    NV\n                  </div>\n                  <div>\n                    <div style=\"font-weight: 600; font-size: 16px\">NVDA</div>\n                    <div style=\"font-size: 13px; color: #64748b\">NVIDIA Corp.</div>\n                  </div>\n                </div>\n                <span style=\"color: #4ade80; font-size: 14px; font-weight: 600\">+5.67%</span>\n              </div>\n              <div style=\"font-size: 28px; font-weight: 700\">$721.33</div>\n            </div>\n            <div style=\"flex: 1; background: #111827; border-radius: 16px; padding: 24px\">\n              <div\n                style=\"\n                  display: flex;\n                  justify-content: space-between;\n                  align-items: center;\n                  margin-bottom: 12px;\n                \"\n              >\n                <div style=\"display: flex; align-items: center; gap: 10px\">\n                  <div\n                    style=\"\n                      width: 32px;\n                      height: 32px;\n                      border-radius: 8px;\n                      background: #1e293b;\n                      display: flex;\n                      align-items: center;\n                      justify-content: center;\n                      font-size: 12px;\n                      font-weight: 700;\n                      color: #94a3b8;\n                    \"\n                  >\n                    TS\n                  </div>\n                  <div>\n                    <div style=\"font-weight: 600; font-size: 16px\">TSLA</div>\n                    <div style=\"font-size: 13px; color: #64748b\">Tesla Inc.</div>\n                  </div>\n                </div>\n                <span style=\"color: #f87171; font-size: 14px; font-weight: 600\">-1.42%</span>\n              </div>\n              <div style=\"font-size: 28px; font-weight: 700\">$248.50</div>\n            </div>\n          </div>\n\n          <!-- Bottom nav -->\n          <div\n            style=\"\n              display: flex;\n              justify-content: center;\n              gap: 48px;\n              margin-top: 32px;\n              padding-top: 24px;\n              border-top: 1px solid #1e293b;\n            \"\n          >\n            <div\n              style=\"\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                gap: 4px;\n                color: #6366f1;\n              \"\n            >\n              <div\n                style=\"\n                  width: 24px;\n                  height: 24px;\n                  border-radius: 6px;\n                  background: #6366f1;\n                  opacity: 0.2;\n                \"\n              ></div>\n              <span style=\"font-size: 12px; font-weight: 500\">Home</span>\n            </div>\n            <div\n              style=\"\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                gap: 4px;\n                color: #64748b;\n              \"\n            >\n              <div style=\"width: 24px; height: 24px; border-radius: 6px; background: #334155\"></div>\n              <span style=\"font-size: 12px\">Trade</span>\n            </div>\n            <div\n              style=\"\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                gap: 4px;\n                color: #64748b;\n              \"\n            >\n              <div style=\"width: 24px; height: 24px; border-radius: 6px; background: #334155\"></div>\n              <span style=\"font-size: 12px\">Wallet</span>\n            </div>\n            <div\n              style=\"\n                display: flex;\n                flex-direction: column;\n                align-items: center;\n                gap: 4px;\n                color: #64748b;\n              \"\n            >\n              <div style=\"width: 24px; height: 24px; border-radius: 6px; background: #334155\"></div>\n              <span style=\"font-size: 12px\">Profile</span>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- ═══════════════ PANEL B: Social Feed ═══════════════ -->\n      <div\n        id=\"panel-b\"\n        data-panel-b\n        style=\"\n          position: absolute;\n          left: 0;\n          top: 0;\n          width: 1920px;\n          height: 1080px;\n          opacity: 0;\n          pointer-events: none;\n        \"\n      >\n        <div\n          style=\"\n            width: 100%;\n            height: 100%;\n            background: #0f1419;\n            color: #e7e9ea;\n            font-family:\n              &quot;Inter&quot;,\n              -apple-system,\n              BlinkMacSystemFont,\n              sans-serif;\n            padding: 60px 80px;\n            display: flex;\n            flex-direction: column;\n          \"\n        >\n          <!-- Profile header -->\n          <div\n            style=\"\n              display: flex;\n              align-items: center;\n              gap: 16px;\n              margin-bottom: 32px;\n              padding-bottom: 28px;\n              border-bottom: 1px solid #2f3336;\n            \"\n          >\n            <div\n              style=\"\n                width: 56px;\n                height: 56px;\n                border-radius: 50%;\n                background: linear-gradient(135deg, #1d9bf0, #7856ff);\n              \"\n            ></div>\n            <div>\n              <div style=\"font-size: 22px; font-weight: 700\">Sarah Chen</div>\n              <div style=\"font-size: 16px; color: #71767b\">@sarahchen</div>\n            </div>\n            <div\n              style=\"\n                margin-left: auto;\n                padding: 8px 20px;\n                border-radius: 20px;\n                background: #1d9bf0;\n                color: #fff;\n                font-size: 15px;\n                font-weight: 600;\n              \"\n            >\n              Follow\n            </div>\n          </div>\n\n          <!-- Compose -->\n          <div\n            style=\"\n              display: flex;\n              align-items: center;\n              gap: 16px;\n              padding: 20px 0;\n              margin-bottom: 24px;\n              border-bottom: 1px solid #2f3336;\n            \"\n          >\n            <div style=\"width: 44px; height: 44px; border-radius: 50%; background: #1e293b\"></div>\n            <span style=\"font-size: 20px; color: #71767b\">What's happening?</span>\n          </div>\n\n          <!-- Post 1 -->\n          <div style=\"padding: 24px 0; border-bottom: 1px solid #2f3336\">\n            <div style=\"display: flex; gap: 14px\">\n              <div\n                style=\"\n                  width: 44px;\n                  height: 44px;\n                  border-radius: 50%;\n                  background: linear-gradient(135deg, #1d9bf0, #7856ff);\n                  flex-shrink: 0;\n                \"\n              ></div>\n              <div style=\"flex: 1\">\n                <div style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 6px\">\n                  <span style=\"font-weight: 700; font-size: 16px\">Sarah Chen</span>\n                  <span style=\"color: #71767b; font-size: 15px\">@sarahchen · 2h</span>\n                </div>\n                <div style=\"font-size: 17px; line-height: 1.5; margin-bottom: 14px\">\n                  Just shipped the new real-time collaboration feature. The CRDT sync engine handles\n                  50k concurrent edits without breaking a sweat. This is what engineering craft\n                  looks like.\n                </div>\n                <div style=\"display: flex; gap: 48px; color: #71767b; font-size: 14px\">\n                  <span>42 replies</span>\n                  <span style=\"color: #00ba7c\">1.2K retweets</span>\n                  <span style=\"color: #f91880\">8.4K likes</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Post 2 -->\n          <div style=\"padding: 24px 0; border-bottom: 1px solid #2f3336\">\n            <div style=\"display: flex; gap: 14px\">\n              <div\n                style=\"\n                  width: 44px;\n                  height: 44px;\n                  border-radius: 50%;\n                  background: linear-gradient(135deg, #ff6b35, #ffc107);\n                  flex-shrink: 0;\n                \"\n              ></div>\n              <div style=\"flex: 1\">\n                <div style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 6px\">\n                  <span style=\"font-weight: 700; font-size: 16px\">Alex Rivera</span>\n                  <span style=\"color: #71767b; font-size: 15px\">@alexrivera · 4h</span>\n                </div>\n                <div style=\"font-size: 17px; line-height: 1.5; margin-bottom: 14px\">\n                  The secret to great developer tools: make the easy things instant and the hard\n                  things possible. Stop adding config options and start removing them.\n                </div>\n                <div style=\"display: flex; gap: 48px; color: #71767b; font-size: 14px\">\n                  <span>18 replies</span>\n                  <span style=\"color: #00ba7c\">847 retweets</span>\n                  <span style=\"color: #f91880\">3.1K likes</span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <!-- Post 3 -->\n          <div style=\"padding: 24px 0\">\n            <div style=\"display: flex; gap: 14px\">\n              <div\n                style=\"\n                  width: 44px;\n                  height: 44px;\n                  border-radius: 50%;\n                  background: linear-gradient(135deg, #10b981, #06b6d4);\n                  flex-shrink: 0;\n                \"\n              ></div>\n              <div style=\"flex: 1\">\n                <div style=\"display: flex; align-items: center; gap: 8px; margin-bottom: 6px\">\n                  <span style=\"font-weight: 700; font-size: 16px\">Maya Patel</span>\n                  <span style=\"color: #71767b; font-size: 15px\">@mayapatel · 6h</span>\n                </div>\n                <div style=\"font-size: 17px; line-height: 1.5; margin-bottom: 14px\">\n                  Benchmarked our new rendering pipeline against the previous version. 4.7x faster\n                  on large scenes. Sometimes the best optimization is rewriting the architecture\n                  from scratch.\n                </div>\n                <div style=\"display: flex; gap: 48px; color: #71767b; font-size: 14px\">\n                  <span>31 replies</span>\n                  <span style=\"color: #00ba7c\">2.3K retweets</span>\n                  <span style=\"color: #f91880\">11K likes</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- ═══════════════ THREE.JS CANVAS ═══════════════ -->\n      <canvas\n        id=\"liquid-canvas\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"12\"\n        data-track-index=\"0\"\n        style=\"position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; z-index: 10\"\n      ></canvas>\n\n      <!-- ═══════════════ STYLES ═══════════════ -->\n      <style>\n        @import url(\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=block\");\n\n        [data-composition-id=\"vfx-liquid-background\"] {\n          background: #000;\n          position: relative;\n          overflow: hidden;\n        }\n      </style>\n\n      <!-- ═══════════════ SCRIPTS ═══════════════ -->\n      <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n      <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n\n      <script>\n        window.__timelines = window.__timelines || {};\n\n        setTimeout(function () {\n          // ── Capture panel textures via html2canvas-like rasterization ──\n          // We use hidden canvases + drawImage of the panels for texture source.\n          // Since drawElementImage requires chrome flags, we rasterize the panels\n          // into canvas textures using SVG foreignObject serialization.\n\n          var W = 1920;\n          var H = 1080;\n          var canvas = document.getElementById(\"liquid-canvas\");\n\n          // ── Rasterize an HTML panel into a canvas texture ──\n          function rasterizePanel(panelEl) {\n            return new Promise(function (resolve) {\n              // Clone the panel, make it visible for serialization\n              var clone = panelEl.cloneNode(true);\n              clone.style.opacity = \"1\";\n              clone.style.position = \"relative\";\n              clone.style.left = \"0\";\n              clone.style.top = \"0\";\n\n              var svgNS = \"http://www.w3.org/2000/svg\";\n              var xhtmlNS = \"http://www.w3.org/1999/xhtml\";\n\n              var svg = document.createElementNS(svgNS, \"svg\");\n              svg.setAttribute(\"width\", W);\n              svg.setAttribute(\"height\", H);\n              svg.setAttribute(\"xmlns\", svgNS);\n\n              var fo = document.createElementNS(svgNS, \"foreignObject\");\n              fo.setAttribute(\"width\", \"100%\");\n              fo.setAttribute(\"height\", \"100%\");\n\n              // Wrap in a body-like container with the font\n              var wrapper = document.createElementNS(xhtmlNS, \"div\");\n              wrapper.setAttribute(\"xmlns\", xhtmlNS);\n              wrapper.style.cssText =\n                \"width:\" + W + \"px;height:\" + H + \"px;margin:0;padding:0;overflow:hidden;\";\n              wrapper.innerHTML = clone.innerHTML;\n              fo.appendChild(wrapper);\n              svg.appendChild(fo);\n\n              var svgData = new XMLSerializer().serializeToString(svg);\n              var img = new Image();\n              var blob = new Blob([svgData], { type: \"image/svg+xml;charset=utf-8\" });\n              var url = URL.createObjectURL(blob);\n\n              img.onload = function () {\n                var c = document.createElement(\"canvas\");\n                c.width = W;\n                c.height = H;\n                var ctx = c.getContext(\"2d\");\n                ctx.drawImage(img, 0, 0, W, H);\n                URL.revokeObjectURL(url);\n                resolve(c);\n              };\n              img.onerror = function () {\n                // Fallback: solid color canvas\n                var c = document.createElement(\"canvas\");\n                c.width = W;\n                c.height = H;\n                var ctx = c.getContext(\"2d\");\n                ctx.fillStyle = panelEl.id === \"panel-a\" ? \"#0a0e17\" : \"#0f1419\";\n                ctx.fillRect(0, 0, W, H);\n                URL.revokeObjectURL(url);\n                resolve(c);\n              };\n              img.src = url;\n            });\n          }\n\n          // ── Fallback: create panel textures from direct canvas drawing ──\n          function drawPanelATexture() {\n            var c = document.createElement(\"canvas\");\n            c.width = W;\n            c.height = H;\n            var ctx = c.getContext(\"2d\");\n\n            // Background\n            ctx.fillStyle = \"#0a0e17\";\n            ctx.fillRect(0, 0, W, H);\n\n            // Logo\n            var grad = ctx.createLinearGradient(80, 60, 116, 96);\n            grad.addColorStop(0, \"#6366f1\");\n            grad.addColorStop(1, \"#8b5cf6\");\n            roundRect(ctx, 80, 60, 36, 36, 10, grad);\n\n            ctx.fillStyle = \"#e2e8f0\";\n            ctx.font = \"700 22px Inter, sans-serif\";\n            ctx.fillText(\"Vault\", 126, 86);\n\n            // Nav\n            ctx.font = \"400 15px Inter, sans-serif\";\n            ctx.fillStyle = \"#e2e8f0\";\n            ctx.fillText(\"Portfolio\", 600, 82);\n            ctx.fillStyle = \"#64748b\";\n            ctx.fillText(\"Markets\", 700, 82);\n            ctx.fillText(\"Activity\", 800, 82);\n            ctx.fillText(\"Settings\", 900, 82);\n\n            // Balance label\n            ctx.fillStyle = \"#64748b\";\n            ctx.font = \"400 14px Inter, sans-serif\";\n            ctx.letterSpacing = \"0.08em\";\n            ctx.fillText(\"TOTAL BALANCE\", 80, 150);\n\n            // Balance amount\n            ctx.fillStyle = \"#f8fafc\";\n            ctx.font = \"800 72px Inter, sans-serif\";\n            ctx.fillText(\"$2,847,391.24\", 80, 230);\n\n            // Badge\n            ctx.fillStyle = \"rgba(34,197,94,0.15)\";\n            roundRect(ctx, 780, 195, 100, 32, 16, \"rgba(34,197,94,0.15)\");\n            ctx.fillStyle = \"#4ade80\";\n            ctx.font = \"600 16px Inter, sans-serif\";\n            ctx.fillText(\"+12.4%\", 793, 217);\n\n            // Chart area - gradient fill\n            ctx.beginPath();\n            ctx.moveTo(80, 500);\n            ctx.bezierCurveTo(280, 480, 460, 400, 640, 420);\n            ctx.bezierCurveTo(820, 440, 920, 340, 1100, 360);\n            ctx.bezierCurveTo(1280, 380, 1370, 280, 1540, 300);\n            ctx.bezierCurveTo(1710, 320, 1780, 260, 1840, 250);\n            ctx.lineTo(1840, 600);\n            ctx.lineTo(80, 600);\n            ctx.closePath();\n            var chartGrad = ctx.createLinearGradient(0, 250, 0, 600);\n            chartGrad.addColorStop(0, \"rgba(99,102,241,0.4)\");\n            chartGrad.addColorStop(1, \"rgba(99,102,241,0)\");\n            ctx.fillStyle = chartGrad;\n            ctx.fill();\n\n            // Chart line\n            ctx.beginPath();\n            ctx.moveTo(80, 500);\n            ctx.bezierCurveTo(280, 480, 460, 400, 640, 420);\n            ctx.bezierCurveTo(820, 440, 920, 340, 1100, 360);\n            ctx.bezierCurveTo(1280, 380, 1370, 280, 1540, 300);\n            ctx.bezierCurveTo(1710, 320, 1780, 260, 1840, 250);\n            ctx.strokeStyle = \"#6366f1\";\n            ctx.lineWidth = 3;\n            ctx.stroke();\n\n            // Holding cards\n            var cardY = 660;\n            var cards = [\n              {\n                sym: \"AAPL\",\n                name: \"Apple Inc.\",\n                price: \"$189.84\",\n                change: \"+2.31%\",\n                color: \"#4ade80\",\n              },\n              {\n                sym: \"NVDA\",\n                name: \"NVIDIA Corp.\",\n                price: \"$721.33\",\n                change: \"+5.67%\",\n                color: \"#4ade80\",\n              },\n              {\n                sym: \"TSLA\",\n                name: \"Tesla Inc.\",\n                price: \"$248.50\",\n                change: \"-1.42%\",\n                color: \"#f87171\",\n              },\n            ];\n            var cardW = 540;\n            for (var i = 0; i < 3; i++) {\n              var cx = 80 + i * (cardW + 24);\n              roundRect(ctx, cx, cardY, cardW, 150, 16, \"#111827\");\n\n              ctx.fillStyle = \"#1e293b\";\n              roundRect(ctx, cx + 24, cardY + 24, 32, 32, 8, \"#1e293b\");\n\n              ctx.fillStyle = \"#94a3b8\";\n              ctx.font = \"700 12px Inter, sans-serif\";\n              ctx.fillText(cards[i].sym.substring(0, 2), cx + 32, cardY + 46);\n\n              ctx.fillStyle = \"#e2e8f0\";\n              ctx.font = \"600 16px Inter, sans-serif\";\n              ctx.fillText(cards[i].sym, cx + 68, cardY + 40);\n\n              ctx.fillStyle = \"#64748b\";\n              ctx.font = \"400 13px Inter, sans-serif\";\n              ctx.fillText(cards[i].name, cx + 68, cardY + 58);\n\n              ctx.fillStyle = cards[i].color;\n              ctx.font = \"600 14px Inter, sans-serif\";\n              ctx.fillText(cards[i].change, cx + cardW - 80, cardY + 44);\n\n              ctx.fillStyle = \"#e2e8f0\";\n              ctx.font = \"700 28px Inter, sans-serif\";\n              ctx.fillText(cards[i].price, cx + 24, cardY + 120);\n            }\n\n            // Bottom nav bar\n            ctx.strokeStyle = \"#1e293b\";\n            ctx.lineWidth = 1;\n            ctx.beginPath();\n            ctx.moveTo(80, 880);\n            ctx.lineTo(1840, 880);\n            ctx.stroke();\n\n            var navItems = [\"Home\", \"Trade\", \"Wallet\", \"Profile\"];\n            var navCx = W / 2 - ((navItems.length - 1) * 48) / 2;\n            for (var n = 0; n < navItems.length; n++) {\n              var nx = navCx + (n - 1.5) * 96;\n              ctx.fillStyle = n === 0 ? \"rgba(99,102,241,0.2)\" : \"#334155\";\n              roundRect(ctx, nx - 12, 900, 24, 24, 6, ctx.fillStyle);\n              ctx.fillStyle = n === 0 ? \"#6366f1\" : \"#64748b\";\n              ctx.font = (n === 0 ? \"500\" : \"400\") + \" 12px Inter, sans-serif\";\n              ctx.fillText(navItems[n], nx - 12, 944);\n            }\n\n            return c;\n          }\n\n          function drawPanelBTexture() {\n            var c = document.createElement(\"canvas\");\n            c.width = W;\n            c.height = H;\n            var ctx = c.getContext(\"2d\");\n\n            // Background\n            ctx.fillStyle = \"#0f1419\";\n            ctx.fillRect(0, 0, W, H);\n\n            // Profile header\n            var profileGrad = ctx.createLinearGradient(80, 60, 136, 116);\n            profileGrad.addColorStop(0, \"#1d9bf0\");\n            profileGrad.addColorStop(1, \"#7856ff\");\n            ctx.beginPath();\n            ctx.arc(108, 88, 28, 0, Math.PI * 2);\n            ctx.fillStyle = profileGrad;\n            ctx.fill();\n\n            ctx.fillStyle = \"#e7e9ea\";\n            ctx.font = \"700 22px Inter, sans-serif\";\n            ctx.fillText(\"Sarah Chen\", 150, 82);\n            ctx.fillStyle = \"#71767b\";\n            ctx.font = \"400 16px Inter, sans-serif\";\n            ctx.fillText(\"@sarahchen\", 150, 104);\n\n            // Follow button\n            roundRect(ctx, 1720, 68, 100, 40, 20, \"#1d9bf0\");\n            ctx.fillStyle = \"#fff\";\n            ctx.font = \"600 15px Inter, sans-serif\";\n            ctx.fillText(\"Follow\", 1744, 94);\n\n            // Separator\n            ctx.strokeStyle = \"#2f3336\";\n            ctx.lineWidth = 1;\n            ctx.beginPath();\n            ctx.moveTo(80, 140);\n            ctx.lineTo(1840, 140);\n            ctx.stroke();\n\n            // Compose\n            ctx.beginPath();\n            ctx.arc(102, 178, 22, 0, Math.PI * 2);\n            ctx.fillStyle = \"#1e293b\";\n            ctx.fill();\n            ctx.fillStyle = \"#71767b\";\n            ctx.font = \"400 20px Inter, sans-serif\";\n            ctx.fillText(\"What's happening?\", 140, 184);\n\n            ctx.beginPath();\n            ctx.moveTo(80, 216);\n            ctx.lineTo(1840, 216);\n            ctx.strokeStyle = \"#2f3336\";\n            ctx.stroke();\n\n            // Posts\n            var posts = [\n              {\n                name: \"Sarah Chen\",\n                handle: \"@sarahchen\",\n                time: \"2h\",\n                grad: [\"#1d9bf0\", \"#7856ff\"],\n                text: \"Just shipped the new real-time collaboration feature. The CRDT sync engine handles 50k concurrent edits without breaking a sweat.\",\n                replies: \"42\",\n                retweets: \"1.2K\",\n                likes: \"8.4K\",\n              },\n              {\n                name: \"Alex Rivera\",\n                handle: \"@alexrivera\",\n                time: \"4h\",\n                grad: [\"#ff6b35\", \"#ffc107\"],\n                text: \"The secret to great developer tools: make the easy things instant and the hard things possible. Stop adding config options.\",\n                replies: \"18\",\n                retweets: \"847\",\n                likes: \"3.1K\",\n              },\n              {\n                name: \"Maya Patel\",\n                handle: \"@mayapatel\",\n                time: \"6h\",\n                grad: [\"#10b981\", \"#06b6d4\"],\n                text: \"Benchmarked our new rendering pipeline against the previous version. 4.7x faster on large scenes. Architecture rewrite pays off.\",\n                replies: \"31\",\n                retweets: \"2.3K\",\n                likes: \"11K\",\n              },\n            ];\n\n            var py = 240;\n            for (var p = 0; p < posts.length; p++) {\n              var post = posts[p];\n              // Avatar\n              var ag = ctx.createLinearGradient(80, py + 4, 124, py + 48);\n              ag.addColorStop(0, post.grad[0]);\n              ag.addColorStop(1, post.grad[1]);\n              ctx.beginPath();\n              ctx.arc(102, py + 26, 22, 0, Math.PI * 2);\n              ctx.fillStyle = ag;\n              ctx.fill();\n\n              // Name and handle\n              ctx.fillStyle = \"#e7e9ea\";\n              ctx.font = \"700 16px Inter, sans-serif\";\n              ctx.fillText(post.name, 140, py + 20);\n              ctx.fillStyle = \"#71767b\";\n              ctx.font = \"400 15px Inter, sans-serif\";\n              ctx.fillText(\n                post.handle + \" · \" + post.time,\n                140 + ctx.measureText(post.name).width + 10,\n                py + 20,\n              );\n\n              // Post text\n              ctx.fillStyle = \"#e7e9ea\";\n              ctx.font = \"400 17px Inter, sans-serif\";\n              wrapText(ctx, post.text, 140, py + 50, 1680, 26);\n\n              // Engagement\n              var ey = py + 120;\n              ctx.font = \"400 14px Inter, sans-serif\";\n              ctx.fillStyle = \"#71767b\";\n              ctx.fillText(post.replies + \" replies\", 140, ey);\n              ctx.fillStyle = \"#00ba7c\";\n              ctx.fillText(post.retweets + \" retweets\", 340, ey);\n              ctx.fillStyle = \"#f91880\";\n              ctx.fillText(post.likes + \" likes\", 560, ey);\n\n              // Separator\n              py += 160;\n              if (p < 2) {\n                ctx.beginPath();\n                ctx.moveTo(80, py);\n                ctx.lineTo(1840, py);\n                ctx.strokeStyle = \"#2f3336\";\n                ctx.stroke();\n              }\n              py += 20;\n            }\n\n            return c;\n          }\n\n          function wrapText(ctx, text, x, y, maxWidth, lineHeight) {\n            var words = text.split(\" \");\n            var line = \"\";\n            for (var n = 0; n < words.length; n++) {\n              var testLine = line + words[n] + \" \";\n              if (ctx.measureText(testLine).width > maxWidth && n > 0) {\n                ctx.fillText(line.trim(), x, y);\n                line = words[n] + \" \";\n                y += lineHeight;\n              } else {\n                line = testLine;\n              }\n            }\n            ctx.fillText(line.trim(), x, y);\n          }\n\n          function roundRect(ctx, x, y, w, h, r, fill) {\n            ctx.beginPath();\n            ctx.moveTo(x + r, y);\n            ctx.lineTo(x + w - r, y);\n            ctx.quadraticCurveTo(x + w, y, x + w, y + r);\n            ctx.lineTo(x + w, y + h - r);\n            ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);\n            ctx.lineTo(x + r, y + h);\n            ctx.quadraticCurveTo(x, y + h, x, y + h - r);\n            ctx.lineTo(x, y + r);\n            ctx.quadraticCurveTo(x, y, x + r, y);\n            ctx.closePath();\n            if (fill) {\n              ctx.fillStyle = fill;\n              ctx.fill();\n            }\n          }\n\n          // ── Build textures (canvas-drawn fallback — works everywhere) ──\n          var canvasA = drawPanelATexture();\n          var canvasB = drawPanelBTexture();\n\n          // ═══════════════════════════════════════════════════════\n          // THREE.JS LIQUID SIMULATION\n          // ═══════════════════════════════════════════════════════\n\n          var renderer = new THREE.WebGLRenderer({\n            canvas: canvas,\n            antialias: true,\n            alpha: false,\n          });\n          renderer.setSize(W, H, false);\n          renderer.setPixelRatio(1);\n          renderer.setClearColor(0x000000, 1);\n\n          var scene = new THREE.Scene();\n\n          // Camera: slight perspective to show surface deformation\n          var camera = new THREE.PerspectiveCamera(45, W / H, 0.1, 100);\n          camera.position.set(0, 0, 2.8);\n          camera.lookAt(0, 0, 0);\n\n          // Create textures from panel canvases\n          var textureA = new THREE.CanvasTexture(canvasA);\n          textureA.minFilter = THREE.LinearFilter;\n          textureA.magFilter = THREE.LinearFilter;\n\n          var textureB = new THREE.CanvasTexture(canvasB);\n          textureB.minFilter = THREE.LinearFilter;\n          textureB.magFilter = THREE.LinearFilter;\n\n          // ── Shader material ──\n          var vertexShader = [\n            \"uniform float uTime;\",\n            \"uniform float uWaveIntensity;\",\n            \"uniform float uRippleIntensity;\",\n            \"varying vec2 vUv;\",\n            \"varying float vDisplacement;\",\n            \"\",\n            \"void main() {\",\n            \"  vUv = uv;\",\n            \"  vec3 pos = position;\",\n            \"\",\n            \"  // Wave 1: large slow horizontal wave\",\n            \"  float wave1 = sin(pos.x * 3.0 + uTime * 1.2) * 0.04 * uWaveIntensity;\",\n            \"\",\n            \"  // Wave 2: medium diagonal wave\",\n            \"  float wave2 = sin((pos.x + pos.y) * 5.0 + uTime * 1.8) * 0.025 * uWaveIntensity;\",\n            \"\",\n            \"  // Wave 3: small fast ripples\",\n            \"  float wave3 = sin(pos.x * 12.0 - uTime * 3.0) * sin(pos.y * 10.0 + uTime * 2.5) * 0.015 * uRippleIntensity;\",\n            \"\",\n            \"  float displacement = wave1 + wave2 + wave3;\",\n            \"  pos.z += displacement;\",\n            \"  vDisplacement = displacement;\",\n            \"\",\n            \"  gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\",\n            \"}\",\n          ].join(\"\\n\");\n\n          var fragmentShader = [\n            \"uniform sampler2D uTextureA;\",\n            \"uniform sampler2D uTextureB;\",\n            \"uniform float uTime;\",\n            \"uniform float uMix;\",\n            \"uniform float uWaveIntensity;\",\n            \"uniform float uRippleIntensity;\",\n            \"varying vec2 vUv;\",\n            \"varying float vDisplacement;\",\n            \"\",\n            \"void main() {\",\n            \"  // Distort UVs to match vertex displacement for consistency\",\n            \"  vec2 distortedUv = vUv;\",\n            \"  distortedUv.x += sin(vUv.y * 10.0 + uTime * 1.8) * 0.008 * uWaveIntensity;\",\n            \"  distortedUv.y += sin(vUv.x * 8.0 + uTime * 1.2) * 0.006 * uWaveIntensity;\",\n            \"\",\n            \"  // Small ripple distortion\",\n            \"  distortedUv.x += sin(vUv.x * 20.0 - uTime * 3.0) * 0.003 * uRippleIntensity;\",\n            \"  distortedUv.y += cos(vUv.y * 18.0 + uTime * 2.5) * 0.003 * uRippleIntensity;\",\n            \"\",\n            \"  vec4 colorA = texture2D(uTextureA, distortedUv);\",\n            \"  vec4 colorB = texture2D(uTextureB, distortedUv);\",\n            \"\",\n            \"  // Crossfade between panels\",\n            \"  vec4 color = mix(colorA, colorB, uMix);\",\n            \"\",\n            \"  // Subtle specular highlight from displacement\",\n            \"  float highlight = vDisplacement * 3.0;\",\n            \"  color.rgb += vec3(highlight * 0.15, highlight * 0.12, highlight * 0.2);\",\n            \"\",\n            \"  // Slight vignette\",\n            \"  float vignette = 1.0 - 0.3 * length((vUv - 0.5) * 1.4);\",\n            \"  color.rgb *= vignette;\",\n            \"\",\n            \"  gl_FragColor = color;\",\n            \"}\",\n          ].join(\"\\n\");\n\n          var uniforms = {\n            uTime: { value: 0.0 },\n            uTextureA: { value: textureA },\n            uTextureB: { value: textureB },\n            uMix: { value: 0.0 },\n            uWaveIntensity: { value: 0.0 },\n            uRippleIntensity: { value: 0.0 },\n          };\n\n          var material = new THREE.ShaderMaterial({\n            vertexShader: vertexShader,\n            fragmentShader: fragmentShader,\n            uniforms: uniforms,\n            side: THREE.FrontSide,\n          });\n\n          // Subdivided plane: 100x60 segments for smooth deformation\n          // Size matches camera frustum at z=0 for the perspective camera\n          var planeW = 4.8;\n          var planeH = planeW * (H / W);\n          var geometry = new THREE.PlaneGeometry(planeW, planeH, 100, 60);\n          var mesh = new THREE.Mesh(geometry, material);\n          scene.add(mesh);\n\n          // ── Render function ──\n          function renderAt(t) {\n            uniforms.uTime.value = t;\n            renderer.render(scene, camera);\n          }\n\n          // ═══════════════════════════════════════════════════════\n          // GSAP DRIVER TIMELINE\n          // ═══════════════════════════════════════════════════════\n\n          var tl = gsap.timeline({ paused: true });\n\n          // Phase 1 (0-2s): Panel A appears, gentle waves begin\n          tl.to(\n            uniforms.uWaveIntensity,\n            {\n              value: 1.0,\n              duration: 2,\n              ease: \"power2.out\",\n            },\n            0,\n          );\n\n          tl.to(\n            uniforms.uRippleIntensity,\n            {\n              value: 0.6,\n              duration: 2.5,\n              ease: \"power2.out\",\n            },\n            0.5,\n          );\n\n          // Phase 2 (2-4.5s): Waves flowing, camera tilts slightly\n          tl.to(\n            camera.rotation,\n            {\n              x: 0.06,\n              y: -0.04,\n              duration: 2.5,\n              ease: \"power1.inOut\",\n            },\n            2,\n          );\n\n          // Phase 3 (4.5-5.5s): Waves intensify for transition\n          tl.to(\n            uniforms.uWaveIntensity,\n            {\n              value: 2.5,\n              duration: 1.0,\n              ease: \"power2.in\",\n            },\n            4.5,\n          );\n\n          tl.to(\n            uniforms.uRippleIntensity,\n            {\n              value: 2.0,\n              duration: 1.0,\n              ease: \"power2.in\",\n            },\n            4.5,\n          );\n\n          // Phase 4 (5-7s): Crossfade from Panel A to Panel B\n          tl.to(\n            uniforms.uMix,\n            {\n              value: 1.0,\n              duration: 2.0,\n              ease: \"power2.inOut\",\n            },\n            5,\n          );\n\n          // Phase 5 (6.5-8.5s): Waves settle back down\n          tl.to(\n            uniforms.uWaveIntensity,\n            {\n              value: 1.0,\n              duration: 2.0,\n              ease: \"power2.out\",\n            },\n            6.5,\n          );\n\n          tl.to(\n            uniforms.uRippleIntensity,\n            {\n              value: 0.5,\n              duration: 2.0,\n              ease: \"power2.out\",\n            },\n            6.5,\n          );\n\n          // Camera returns to center\n          tl.to(\n            camera.rotation,\n            {\n              x: -0.03,\n              y: 0.03,\n              duration: 2.5,\n              ease: \"power1.inOut\",\n            },\n            6.5,\n          );\n\n          // Phase 6 (9-11s): Gentle breathing waves on Panel B\n          tl.to(\n            uniforms.uWaveIntensity,\n            {\n              value: 0.7,\n              duration: 2.0,\n              ease: \"sine.inOut\",\n            },\n            9,\n          );\n\n          tl.to(\n            uniforms.uRippleIntensity,\n            {\n              value: 0.3,\n              duration: 2.0,\n              ease: \"sine.inOut\",\n            },\n            9,\n          );\n\n          // Phase 7 (10.5-12s): Waves fade to still\n          tl.to(\n            uniforms.uWaveIntensity,\n            {\n              value: 0.0,\n              duration: 1.5,\n              ease: \"power2.inOut\",\n            },\n            10.5,\n          );\n\n          tl.to(\n            uniforms.uRippleIntensity,\n            {\n              value: 0.0,\n              duration: 1.5,\n              ease: \"power2.inOut\",\n            },\n            10.5,\n          );\n\n          tl.to(\n            camera.rotation,\n            {\n              x: 0,\n              y: 0,\n              duration: 1.5,\n              ease: \"power2.inOut\",\n            },\n            10.5,\n          );\n\n          // Driver tween: runs the full 12s, drives uTime and renders each frame\n          tl.to(\n            { frame: 0 },\n            {\n              frame: 1,\n              duration: 12,\n              ease: \"none\",\n              onUpdate: function () {\n                var time = tl.time();\n                uniforms.uTime.value = time;\n                renderer.render(scene, camera);\n              },\n            },\n            0,\n          );\n\n          window.__timelines[\"vfx-liquid-background\"] = tl;\n\n          // ── hf-seek integration for Three.js adapter ──\n          window.addEventListener(\"hf-seek\", function (e) {\n            var t = e.detail.time;\n            tl.seek(t);\n            uniforms.uTime.value = t;\n            renderer.render(scene, camera);\n          });\n\n          // Initial render\n          renderAt(0);\n        }, 0);\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vfx-liquid-glass.json b/docs/public/catalog/blocks/vfx-liquid-glass.json
new file mode 100644
index 0000000000..345bdd79c5
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-liquid-glass.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Liquid Glass Parallax</title>\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/CopyShader.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/shaders/LuminosityHighPassShader.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/EffectComposer.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/RenderPass.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/ShaderPass.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/examples/js/postprocessing/UnrealBloomPass.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #030407;\n        overflow: hidden;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #030407;\n      }\n\n      .text-source {\n        width: 1920px;\n        height: 1080px;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        background: linear-gradient(160deg, #030407 0%, #0a1020 40%, #070910 70%, #030407 100%);\n        text-align: center;\n        padding: 0 120px;\n        gap: 32px;\n        position: relative;\n        overflow: hidden;\n      }\n      .text-source::before {\n        content: \"\";\n        position: absolute;\n        width: 700px;\n        height: 700px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(0, 212, 255, 0.06) 0%, transparent 70%);\n        top: -150px;\n        right: -100px;\n        pointer-events: none;\n      }\n      .text-source::after {\n        content: \"\";\n        position: absolute;\n        width: 500px;\n        height: 500px;\n        border-radius: 50%;\n        background: radial-gradient(circle, rgba(124, 58, 237, 0.05) 0%, transparent 70%);\n        bottom: -100px;\n        left: -50px;\n        pointer-events: none;\n      }\n      .badge {\n        font-size: 14px;\n        font-weight: 600;\n        letter-spacing: 3px;\n        text-transform: uppercase;\n        color: rgba(0, 212, 255, 0.8);\n      }\n      .text-source h1 {\n        font-size: 148px;\n        font-weight: 900;\n        line-height: 0.9;\n        color: rgba(248, 249, 253, 0.96);\n        text-shadow: 0 0 60px rgba(255, 255, 255, 0.15);\n        letter-spacing: -5px;\n        max-width: 1400px;\n      }\n      .text-source h1 span {\n        background: linear-gradient(135deg, #00d4ff, #a855f7);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n      }\n      .subtitle {\n        font-size: 28px;\n        font-weight: 400;\n        color: rgba(255, 255, 255, 0.35);\n        max-width: 800px;\n        line-height: 1.5;\n      }\n      .stats {\n        display: flex;\n        gap: 48px;\n        margin-top: 16px;\n      }\n      .stat {\n        text-align: center;\n      }\n      .stat-val {\n        font-size: 42px;\n        font-weight: 800;\n        color: #00d4ff;\n        letter-spacing: -1px;\n      }\n      .stat-label {\n        font-size: 12px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.3);\n        text-transform: uppercase;\n        letter-spacing: 2px;\n        margin-top: 4px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"liquid-glass\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"20\"\n      data-root=\"true\"\n    >\n      <canvas\n        id=\"cap-text\"\n        layoutsubtree\n        width=\"1920\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <div class=\"text-source\">\n          <div class=\"badge\">Write HTML → Render Video</div>\n          <h1>Ship videos <span>10x faster</span></h1>\n          <div class=\"subtitle\">\n            HTML is the source of truth for video. No timeline editors, no After Effects — just\n            code.\n          </div>\n          <div class=\"stats\">\n            <div class=\"stat\">\n              <div class=\"stat-val\">47x</div>\n              <div class=\"stat-label\">Faster than AE</div>\n            </div>\n            <div class=\"stat\">\n              <div class=\"stat-val\">12.4K</div>\n              <div class=\"stat-label\">Creators</div>\n            </div>\n            <div class=\"stat\">\n              <div class=\"stat-val\">2.4M</div>\n              <div class=\"stat-label\">Videos Rendered</div>\n            </div>\n          </div>\n        </div>\n      </canvas>\n\n      <canvas\n        id=\"theater\"\n        width=\"1920\"\n        height=\"1080\"\n        style=\"position: absolute; top: 0; left: 0; width: 1920px; height: 1080px\"\n      ></canvas>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"20\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      var W = 1920,\n        H = 1080,\n        DURATION = 20,\n        ASPECT = W / H;\n      var TEXT_Z = -3.08;\n\n      // ── Seeded PRNG ────────────────────────────────────────────────────\n      function seededRandom(seed) {\n        var v = seed >>> 0;\n        return function () {\n          v += 0x6d2b79f5;\n          var m = v;\n          m = Math.imul(m ^ (m >>> 15), m | 1);\n          m ^= m + Math.imul(m ^ (m >>> 7), m | 61);\n          return ((m ^ (m >>> 14)) >>> 0) / 4294967296;\n        };\n      }\n\n      // ── Voronoi (self-contained, no d3) ────────────────────────────────\n      function polygonArea(pts) {\n        var a = 0;\n        for (var i = 0; i < pts.length; i++) {\n          var j = (i + 1) % pts.length;\n          a += pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];\n        }\n        return a * 0.5;\n      }\n\n      function polygonCentroid(pts) {\n        var sa = polygonArea(pts) || 1;\n        var cx = 0,\n          cy = 0;\n        for (var i = 0; i < pts.length; i++) {\n          var j = (i + 1) % pts.length;\n          var f = pts[i][0] * pts[j][1] - pts[j][0] * pts[i][1];\n          cx += (pts[i][0] + pts[j][0]) * f;\n          cy += (pts[i][1] + pts[j][1]) * f;\n        }\n        return { x: cx / (6 * sa), y: cy / (6 * sa) };\n      }\n\n      function clipPoly(poly, px, py, nx, ny) {\n        var out = [];\n        for (var i = 0; i < poly.length; i++) {\n          var c = poly[i],\n            n = poly[(i + 1) % poly.length];\n          var dc = (c[0] - px) * nx + (c[1] - py) * ny;\n          var dn = (n[0] - px) * nx + (n[1] - py) * ny;\n          if (dc <= 0) out.push(c);\n          if (dc <= 0 !== dn <= 0) {\n            var t = dc / (dc - dn);\n            out.push([c[0] + t * (n[0] - c[0]), c[1] + t * (n[1] - c[1])]);\n          }\n        }\n        return out;\n      }\n\n      function computeVoronoi(points, xmin, ymin, xmax, ymax) {\n        var cells = [];\n        for (var i = 0; i < points.length; i++) {\n          var px = points[i][0],\n            py = points[i][1];\n          var poly = [\n            [xmin, ymin],\n            [xmax, ymin],\n            [xmax, ymax],\n            [xmin, ymax],\n          ];\n          for (var j = 0; j < points.length; j++) {\n            if (i === j) continue;\n            var qx = points[j][0],\n              qy = points[j][1];\n            var mx = (px + qx) * 0.5,\n              my = (py + qy) * 0.5;\n            poly = clipPoly(poly, mx, my, qx - px, qy - py);\n            if (poly.length < 3) break;\n          }\n          cells.push(poly.length >= 3 ? poly : null);\n        }\n        return cells;\n      }\n\n      // ── Feature Detection ──────────────────────────────────────────────\n      function canCapture() {\n        var tc = document.createElement(\"canvas\");\n        if (!(\"layoutSubtree\" in tc)) return false;\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        var ctx = tc.getContext(\"2d\");\n        return ctx && typeof ctx.drawElementImage === \"function\";\n      }\n      var apiOk = canCapture();\n\n      // ── Capture backdrop ───────────────────────────────────────────────\n      var capCanvas = document.getElementById(\"cap-text\");\n      var capCtx = capCanvas.getContext(\"2d\");\n      var textEl = capCanvas.querySelector(\".text-source\");\n\n      function captureBackdrop() {\n        capCtx.clearRect(0, 0, W, H);\n        if (apiOk) {\n          capCtx.drawElementImage(textEl, 0, 0, W, H);\n        } else {\n          var g = capCtx.createLinearGradient(0, 0, W, H);\n          g.addColorStop(0, \"#030407\");\n          g.addColorStop(0.5, \"#070910\");\n          g.addColorStop(1, \"#030407\");\n          capCtx.fillStyle = g;\n          capCtx.fillRect(0, 0, W, H);\n          capCtx.textAlign = \"center\";\n          capCtx.textBaseline = \"middle\";\n          capCtx.font = \"900 172px Inter, system-ui, sans-serif\";\n          capCtx.shadowColor = \"rgba(255,255,255,0.22)\";\n          capCtx.shadowBlur = 20;\n          capCtx.fillStyle = \"rgba(248,249,253,0.94)\";\n          capCtx.fillText(\"Liquid Glass\", W / 2, H / 2 - 80);\n          capCtx.fillText(\"Design\", W / 2, H / 2 + 90);\n        }\n      }\n\n      // ── Three.js Renderer ──────────────────────────────────────────────\n      var theaterCanvas = document.getElementById(\"theater\");\n      var renderer = new THREE.WebGLRenderer({\n        canvas: theaterCanvas,\n        antialias: true,\n        alpha: false,\n        powerPreference: \"high-performance\",\n        preserveDrawingBuffer: true,\n      });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n      renderer.outputEncoding = THREE.sRGBEncoding;\n      renderer.toneMapping = THREE.ACESFilmicToneMapping;\n      renderer.toneMappingExposure = 1.08;\n      renderer.setClearColor(0x030407, 1);\n\n      var scene = new THREE.Scene();\n      scene.background = new THREE.Color(0x030407);\n\n      // ── Environment Map (procedural) ───────────────────────────────────\n      var envCanvas = document.createElement(\"canvas\");\n      envCanvas.width = 1024;\n      envCanvas.height = 512;\n      var ectx = envCanvas.getContext(\"2d\");\n      var eg = ectx.createLinearGradient(0, 0, 1024, 512);\n      eg.addColorStop(0, \"#020307\");\n      eg.addColorStop(0.18, \"#ffffff\");\n      eg.addColorStop(0.24, \"#7fdcff\");\n      eg.addColorStop(0.42, \"#07101c\");\n      eg.addColorStop(0.58, \"#ffffff\");\n      eg.addColorStop(0.64, \"#ffc4a6\");\n      eg.addColorStop(0.82, \"#0b0c12\");\n      eg.addColorStop(1, \"#020307\");\n      ectx.fillStyle = eg;\n      ectx.fillRect(0, 0, 1024, 512);\n      ectx.globalCompositeOperation = \"screen\";\n      var envRng = seededRandom(999);\n      for (var ei = 0; ei < 9; ei++) {\n        var ey = 36 + ei * 52;\n        ectx.fillStyle = \"rgba(255,255,255,\" + (ei % 3 === 0 ? 0.22 : 0.1) + \")\";\n        ectx.fillRect((ei % 2) * 120, ey, 1024 * 0.72, 4 + (ei % 3) * 2);\n      }\n      var envTex = new THREE.CanvasTexture(envCanvas);\n      envTex.mapping = THREE.EquirectangularReflectionMapping;\n      var pmrem = new THREE.PMREMGenerator(renderer);\n      var envMap = pmrem.fromEquirectangular(envTex);\n      scene.environment = envMap.texture;\n      envTex.dispose();\n      pmrem.dispose();\n\n      // ── Camera ─────────────────────────────────────────────────────────\n      var CAM_Z = 9.35;\n      var camera = new THREE.PerspectiveCamera(34, ASPECT, 0.1, 80);\n      camera.position.set(0, 0, CAM_Z);\n\n      // ── Scene Groups ───────────────────────────────────────────────────\n      var rig = new THREE.Group();\n      scene.add(rig);\n      var textRig = new THREE.Group();\n      rig.add(textRig);\n\n      // ── Backdrop Plane (text behind glass) ─────────────────────────────\n      var backdropTex = new THREE.CanvasTexture(capCanvas);\n      backdropTex.minFilter = THREE.LinearFilter;\n      backdropTex.magFilter = THREE.LinearFilter;\n      backdropTex.generateMipmaps = false;\n\n      function viewportAtZ(z) {\n        var d = camera.position.z - z;\n        var h = 2 * Math.tan(THREE.MathUtils.degToRad(camera.fov * 0.5)) * d;\n        return { w: h * camera.aspect, h: h };\n      }\n      var vp = viewportAtZ(TEXT_Z);\n      var backdropMesh = new THREE.Mesh(\n        new THREE.PlaneGeometry(vp.w * 1.18, vp.h * 1.18),\n        new THREE.MeshBasicMaterial({ map: backdropTex, depthWrite: true, depthTest: true }),\n      );\n      backdropMesh.position.z = TEXT_Z;\n      backdropMesh.renderOrder = -4;\n      textRig.add(backdropMesh);\n\n      // ── Light Bands ────────────────────────────────────────────────────\n      var bandSpecs = [\n        [-2.8, 1.45, -1.78, 3.2, 0.035, 0.13, 0x9edaff, 0.24],\n        [2.7, -1.24, -1.76, 3.0, 0.032, -0.1, 0xffd1b5, 0.18],\n        [0.0, 2.05, -1.82, 5.2, 0.026, 0.02, 0xffffff, 0.13],\n        [-0.55, -1.92, -1.8, 4.2, 0.024, -0.03, 0xc7f6ff, 0.1],\n      ];\n      bandSpecs.forEach(function (s) {\n        var m = new THREE.Mesh(\n          new THREE.PlaneGeometry(s[3], s[4]),\n          new THREE.MeshBasicMaterial({\n            color: s[6],\n            transparent: true,\n            opacity: s[7],\n            blending: THREE.AdditiveBlending,\n            depthWrite: false,\n          }),\n        );\n        m.position.set(s[0], s[1], s[2]);\n        m.rotation.z = s[5];\n        rig.add(m);\n      });\n\n      // ── Glass Shards (Voronoi fracture) ────────────────────────────────\n      var LAYOUT = { width: 9.7, height: 5.78, cols: 9, rows: 6, seed: 5297 };\n      var rng = seededRandom(LAYOUT.seed);\n      var seedPoints = [];\n      var cw = LAYOUT.width / LAYOUT.cols,\n        ch = LAYOUT.height / LAYOUT.rows;\n\n      for (var row = 0; row < LAYOUT.rows; row++) {\n        for (var col = 0; col < LAYOUT.cols; col++) {\n          var cp =\n            1 -\n            Math.min(\n              0.62,\n              Math.hypot((col + 0.5) / LAYOUT.cols - 0.5, (row + 0.5) / LAYOUT.rows - 0.5),\n            );\n          var jx = (rng() - 0.5) * cw * (0.58 + cp * 0.16);\n          var jy = (rng() - 0.5) * ch * (0.58 + cp * 0.16);\n          seedPoints.push([(col + 0.5) * cw + jx, (row + 0.5) * ch + jy]);\n        }\n      }\n\n      var voronoiCells = computeVoronoi(seedPoints, 0, 0, LAYOUT.width, LAYOUT.height);\n\n      var glassRig = new THREE.Group();\n      glassRig.scale.setScalar(1.025);\n      glassRig.position.set(0, 0, 0.08);\n      rig.add(glassRig);\n\n      var panes = [];\n      var GAP_SCALE = 0.954;\n\n      for (var pi = 0; pi < voronoiCells.length; pi++) {\n        var cell = voronoiCells[pi];\n        if (!cell || cell.length < 3) continue;\n\n        var worldPts = cell.map(function (p) {\n          return [p[0] - LAYOUT.width / 2, LAYOUT.height / 2 - p[1]];\n        });\n        var area = Math.abs(polygonArea(worldPts));\n        if (area < 0.034) continue;\n\n        var cent = polygonCentroid(worldPts);\n        var rad = new THREE.Vector2(cent.x, cent.y);\n        var radLen = Math.max(rad.length(), 0.001);\n        rad.divideScalar(radLen);\n\n        var localPts = worldPts.map(function (p) {\n          return [(p[0] - cent.x) * GAP_SCALE, (p[1] - cent.y) * GAP_SCALE];\n        });\n        var outward = 0.046 + rng() * 0.105;\n        var depthLift = (area / (LAYOUT.width * LAYOUT.height)) * 1.42;\n        var phase = pi * 0.71 + rng() * 4;\n        var depth = 0.18 + rng() * 0.1;\n        var bevel = Math.min(0.108, Math.sqrt(area) * 0.095);\n        var roughness = pi % 7 === 0 ? 0.08 + rng() * 0.035 : 0.012 + rng() * 0.038;\n        var thickness = 1.45 + rng() * 1.25;\n\n        // Geometry\n        var shape = new THREE.Shape();\n        localPts.forEach(function (p, idx) {\n          idx === 0 ? shape.moveTo(p[0], p[1]) : shape.lineTo(p[0], p[1]);\n        });\n        shape.closePath();\n        var geo = new THREE.ExtrudeGeometry(shape, {\n          depth: depth,\n          bevelEnabled: true,\n          bevelThickness: bevel,\n          bevelSize: bevel,\n          bevelSegments: 9,\n          curveSegments: 2,\n          steps: 2,\n        });\n        geo.center();\n        geo.computeVertexNormals();\n\n        // Material\n        var mat = new THREE.MeshPhysicalMaterial({\n          color: 0xf7fbff,\n          metalness: 0,\n          roughness: roughness,\n          transmission: 1,\n          thickness: thickness,\n          ior: 1.55,\n          attenuationColor: new THREE.Color(0xe5f8ff),\n          attenuationDistance: 12,\n          clearcoat: 1,\n          clearcoatRoughness: Math.min(0.12, roughness + 0.035),\n          specularIntensity: 1,\n          envMapIntensity: 2.1,\n          transparent: true,\n          opacity: 0.76,\n          side: THREE.DoubleSide,\n        });\n\n        var pane = new THREE.Group();\n        var mesh = new THREE.Mesh(geo, mat);\n        mesh.renderOrder = 4 + pi;\n        pane.add(mesh);\n\n        // Edge highlights (white + cyan + pink for chromatic aberration look)\n        var edgeGeo = new THREE.EdgesGeometry(geo, 18);\n        var whiteEdge = new THREE.LineSegments(\n          edgeGeo,\n          new THREE.LineBasicMaterial({\n            color: 0xffffff,\n            transparent: true,\n            opacity: roughness > 0.08 ? 0.32 : 0.44,\n            blending: THREE.AdditiveBlending,\n            depthWrite: false,\n          }),\n        );\n        pane.add(whiteEdge);\n        var cyanEdge = new THREE.LineSegments(\n          edgeGeo.clone(),\n          new THREE.LineBasicMaterial({\n            color: 0x72e8ff,\n            transparent: true,\n            opacity: 0.18,\n            blending: THREE.AdditiveBlending,\n            depthWrite: false,\n          }),\n        );\n        cyanEdge.position.set(0.008, -0.002, -0.008);\n        pane.add(cyanEdge);\n        var pinkEdge = new THREE.LineSegments(\n          edgeGeo.clone(),\n          new THREE.LineBasicMaterial({\n            color: 0xff6f8d,\n            transparent: true,\n            opacity: 0.14,\n            blending: THREE.AdditiveBlending,\n            depthWrite: false,\n          }),\n        );\n        pinkEdge.position.set(-0.009, 0.003, 0.006);\n        pane.add(pinkEdge);\n\n        var basePos = new THREE.Vector3(\n          cent.x + rad.x * outward,\n          cent.y + rad.y * outward,\n          0.28 + depthLift + rng() * 0.18,\n        );\n        var baseRot = new THREE.Euler(\n          (rng() - 0.5) * 0.074,\n          (rng() - 0.5) * 0.086,\n          (rng() - 0.5) * 0.052,\n        );\n        pane.position.copy(basePos);\n        pane.rotation.copy(baseRot);\n\n        pane.userData = {\n          basePos: basePos.clone(),\n          baseRot: { x: baseRot.x, y: baseRot.y, z: baseRot.z },\n          phase: phase,\n          speed: 0.28 + rng() * 0.16,\n          drift: new THREE.Vector3(\n            0.02 + rng() * 0.026,\n            0.018 + rng() * 0.024,\n            0.068 + rng() * 0.092,\n          ),\n          rotDrift: new THREE.Vector3(\n            0.016 + rng() * 0.026,\n            0.018 + rng() * 0.03,\n            0.008 + rng() * 0.016,\n          ),\n          ptrWeight: 0.04 + rng() * 0.052,\n          rad: rad.clone(),\n          baseOpacity: 0.76,\n          baseRoughness: roughness,\n          glassMat: mat,\n          edgeW: whiteEdge.material,\n          edgeC: cyanEdge.material,\n          edgeP: pinkEdge.material,\n          edgeWBase: whiteEdge.material.opacity,\n          edgeCBase: cyanEdge.material.opacity,\n          edgePBase: pinkEdge.material.opacity,\n        };\n\n        panes.push(pane);\n        glassRig.add(pane);\n      }\n\n      // ── Lighting ───────────────────────────────────────────────────────\n      scene.add(new THREE.HemisphereLight(0xe8f0ff, 0x07040b, 1.1));\n      var keyLight = new THREE.DirectionalLight(0xffffff, 3.4);\n      keyLight.position.set(-3.8, 4.4, 5.6);\n      scene.add(keyLight);\n      var edgeLight = new THREE.PointLight(0x8bdcff, 14, 12);\n      edgeLight.position.set(3.1, 1.4, 3.4);\n      scene.add(edgeLight);\n      var warmLight = new THREE.PointLight(0xffc8a8, 7, 12);\n      warmLight.position.set(-4.4, -2.2, 3.2);\n      scene.add(warmLight);\n\n      // ── Post-Processing ────────────────────────────────────────────────\n      var GrainShader = {\n        uniforms: { tDiffuse: { value: null }, time: { value: 0 }, strength: { value: 0.024 } },\n        vertexShader:\n          \"varying vec2 vUv; void main(){ vUv=uv; gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0); }\",\n        fragmentShader: [\n          \"uniform sampler2D tDiffuse; uniform float time; uniform float strength; varying vec2 vUv;\",\n          \"float n(vec2 v){ return fract(sin(dot(v+time,vec2(12.9898,78.233)))*43758.5453); }\",\n          \"void main(){\",\n          \"  vec4 c=texture2D(tDiffuse,vUv);\",\n          \"  c.rgb+=(n(vUv*vec2(1520.0,940.0))-0.5)*strength;\",\n          \"  c.rgb=pow(max(c.rgb,vec3(0.0)),vec3(0.985));\",\n          \"  gl_FragColor=c;\",\n          \"}\",\n        ].join(\"\\n\"),\n      };\n\n      var composer = new THREE.EffectComposer(renderer);\n      composer.addPass(new THREE.RenderPass(scene, camera));\n      var bloomPass = new THREE.UnrealBloomPass(new THREE.Vector2(W, H), 0.32, 0.4, 0.86);\n      composer.addPass(bloomPass);\n      var grainPass = new THREE.ShaderPass(GrainShader);\n      composer.addPass(grainPass);\n\n      // ── Pointer State (GSAP-animated, replaces mouse) ──────────────────\n      var ptr = { x: 0.16, y: 0.04 };\n      var REVEAL_R = 2.18;\n      var PTR_WORLD = new THREE.Vector2();\n\n      function updatePtrWorld() {\n        PTR_WORLD.set(ptr.x * 4.86, ptr.y * 2.84);\n      }\n\n      // ── Render Function (deterministic, seekable) ──────────────────────\n      function renderScene(elapsed) {\n        updatePtrWorld();\n\n        camera.position.x = ptr.x * 0.38;\n        camera.position.y = -ptr.y * 0.27;\n        camera.position.z = CAM_Z;\n        camera.lookAt(0, 0, 0);\n\n        textRig.position.x = -ptr.x * 0.56;\n        textRig.position.y = ptr.y * 0.36;\n        textRig.position.z = Math.sin(elapsed * 0.28) * 0.018;\n        textRig.rotation.x = ptr.y * 0.028;\n        textRig.rotation.y = ptr.x * 0.042;\n\n        glassRig.rotation.x = -ptr.y * 0.064;\n        glassRig.rotation.y = ptr.x * 0.078;\n\n        edgeLight.position.x = 3.1 + ptr.x * 0.9;\n        edgeLight.position.y = 1.4 + ptr.y * 0.55;\n        warmLight.position.x = -4.4 - ptr.x * 0.65;\n\n        for (var i = 0; i < panes.length; i++) {\n          var pane = panes[i];\n          var d = pane.userData;\n          var t = elapsed * d.speed + d.phase;\n          var ptrDist = PTR_WORLD.distanceTo(new THREE.Vector2(d.basePos.x, d.basePos.y));\n          var reveal = Math.pow(Math.max(0, 1 - ptrDist / REVEAL_R), 2);\n          var shatter = reveal * 0.36;\n          var awayX = d.basePos.x - PTR_WORLD.x;\n          var awayY = d.basePos.y - PTR_WORLD.y;\n          var awayLen = Math.max(Math.hypot(awayX, awayY), 0.001);\n          var revealSpread = reveal * 0.24;\n          var shatterSpread = shatter * 0.68;\n          var pSlide = d.ptrWeight * 1.9;\n\n          pane.position.x =\n            d.basePos.x +\n            Math.sin(t * 0.42) * d.drift.x +\n            ptr.x * pSlide +\n            (awayX / awayLen) * (revealSpread + shatterSpread);\n          pane.position.y =\n            d.basePos.y +\n            Math.cos(t * 0.38) * d.drift.y -\n            ptr.y * pSlide * 0.72 +\n            (awayY / awayLen) * (revealSpread + shatterSpread * 0.84);\n          pane.position.z =\n            d.basePos.z + Math.sin(t * 0.52 + i) * d.drift.z + reveal * 0.32 + shatter * 0.74;\n\n          pane.rotation.x =\n            d.baseRot.x +\n            Math.sin(t * 0.46) * d.rotDrift.x -\n            ptr.y * d.ptrWeight * 1.15 +\n            reveal * (awayY / awayLen) * 0.16 +\n            shatter * (awayY / awayLen) * 0.58;\n          pane.rotation.y =\n            d.baseRot.y +\n            Math.cos(t * 0.43) * d.rotDrift.y +\n            ptr.x * d.ptrWeight * 1.38 -\n            reveal * (awayX / awayLen) * 0.2 -\n            shatter * (awayX / awayLen) * 0.66;\n          pane.rotation.z =\n            d.baseRot.z +\n            Math.sin(t * 0.34) * d.rotDrift.z +\n            reveal * Math.sin(t + i) * 0.028 +\n            shatter * (d.rad.x * awayY - d.rad.y * awayX) * 0.18;\n\n          d.glassMat.opacity = d.baseOpacity + shatter * 0.14;\n          d.glassMat.roughness = Math.min(0.14, d.baseRoughness + shatter * 0.048);\n          d.edgeW.opacity = d.edgeWBase + shatter * 0.34;\n          d.edgeC.opacity = d.edgeCBase + shatter * 0.22;\n          d.edgeP.opacity = d.edgePBase + shatter * 0.2;\n        }\n\n        grainPass.uniforms.time.value = elapsed;\n        composer.render();\n      }\n\n      // ── GSAP Timeline ──────────────────────────────────────────────────\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      tl.to({ _: 0 }, { _: 1, duration: DURATION, ease: \"none\" }, 0);\n\n      // Pointer choreography — smooth wandering reveal\n      tl.set(ptr, { x: 0.16, y: 0.04 }, 0);\n      tl.to(ptr, { x: 0.45, y: -0.15, duration: 3.5, ease: \"sine.inOut\" }, 0.5);\n      tl.to(ptr, { x: -0.35, y: 0.25, duration: 3.5, ease: \"sine.inOut\" }, 4);\n      tl.to(ptr, { x: 0.15, y: -0.35, duration: 3, ease: \"sine.inOut\" }, 7.5);\n      tl.to(ptr, { x: -0.45, y: 0.05, duration: 3, ease: \"sine.inOut\" }, 10.5);\n      tl.to(ptr, { x: 0.3, y: 0.2, duration: 3, ease: \"sine.inOut\" }, 13.5);\n      tl.to(ptr, { x: -0.1, y: -0.1, duration: 2.5, ease: \"sine.inOut\" }, 16.5);\n      tl.to(ptr, { x: 0.16, y: 0.04, duration: 1, ease: \"power2.inOut\" }, 19);\n\n      tl.eventCallback(\"onUpdate\", function () {\n        renderScene(tl.time());\n      });\n\n      window.__timelines[\"liquid-glass\"] = tl;\n\n      setTimeout(function () {\n        captureBackdrop();\n        backdropTex.needsUpdate = true;\n        tl.seek(0);\n      }, 0);\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vfx-magnetic.json b/docs/public/catalog/blocks/vfx-magnetic.json
new file mode 100644
index 0000000000..9463a61096
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-magnetic.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Magnetic Cursor — HTML-in-Canvas</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #0c0c0c;\n        overflow: hidden;\n        font-family:\n          system-ui,\n          -apple-system,\n          sans-serif;\n        color: #e8e8e8;\n      }\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0c0c0c;\n      }\n      canvas {\n        display: block;\n      }\n\n      .page-content {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        font-family:\n          system-ui,\n          -apple-system,\n          sans-serif;\n        color: #e8e8e8;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      .page-inner {\n        max-width: 900px;\n        padding: 0 48px;\n      }\n      .heading {\n        font-size: 64px;\n        font-weight: 700;\n        line-height: 1.15;\n        letter-spacing: -0.03em;\n        color: #f0f0f0;\n        margin-bottom: 32px;\n      }\n      .heading em {\n        font-style: normal;\n        color: #70c7ed;\n      }\n      .body-text {\n        font-size: 22px;\n        line-height: 1.7;\n        color: rgba(255, 255, 255, 0.6);\n        margin-bottom: 24px;\n      }\n      .body-text:last-of-type {\n        margin-bottom: 48px;\n      }\n      .hint {\n        font-size: 15px;\n        color: rgba(255, 255, 255, 0.3);\n        font-family: ui-monospace, \"SF Mono\", monospace;\n        margin-bottom: 48px;\n        letter-spacing: 0.02em;\n      }\n      .card-grid {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 20px;\n      }\n      .card {\n        background: rgba(255, 255, 255, 0.04);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        border-radius: 14px;\n        padding: 24px;\n      }\n      .card-icon {\n        width: 40px;\n        height: 40px;\n        border-radius: 10px;\n        margin-bottom: 14px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 20px;\n        background: rgba(112, 199, 237, 0.12);\n      }\n      .card-title {\n        font-size: 16px;\n        font-weight: 600;\n        color: rgba(255, 255, 255, 0.85);\n        margin-bottom: 8px;\n      }\n      .card-desc {\n        font-size: 14px;\n        line-height: 1.5;\n        color: rgba(255, 255, 255, 0.4);\n      }\n\n      /* Subtitles */\n      .subtitle-bar {\n        position: absolute;\n        bottom: 60px;\n        left: 50%;\n        transform: translateX(-50%);\n        z-index: 10;\n        pointer-events: none;\n      }\n      .subtitle {\n        font-size: 28px;\n        font-weight: 500;\n        color: white;\n        text-align: center;\n        background: rgba(0, 0, 0, 0.7);\n        padding: 12px 32px;\n        border-radius: 8px;\n        backdrop-filter: blur(8px);\n        white-space: nowrap;\n        opacity: 0;\n        font-family:\n          system-ui,\n          -apple-system,\n          sans-serif;\n      }\n\n      /* Cursor dot */\n      .cursor-dot {\n        position: absolute;\n        width: 20px;\n        height: 20px;\n        border-radius: 50%;\n        background: rgba(112, 199, 237, 0.8);\n        box-shadow:\n          0 0 20px rgba(112, 199, 237, 0.5),\n          0 0 40px rgba(112, 199, 237, 0.3);\n        z-index: 10;\n        pointer-events: none;\n        transform: translate(-50%, -50%);\n        opacity: 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"magnetic-cursor\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"15\"\n      data-root=\"true\"\n    >\n      <canvas\n        id=\"gl-canvas\"\n        layoutsubtree\n        width=\"1920\"\n        height=\"1080\"\n        style=\"position: absolute; top: 0; left: 0; width: 1920px; height: 1080px\"\n      >\n        <div class=\"page-content\" id=\"content\" style=\"width: 1920px; height: 1080px\">\n          <div class=\"page-inner\">\n            <h1 class=\"heading\">Pixels bend toward<br />your <em>cursor</em></h1>\n            <p class=\"body-text\">\n              Move your mouse across this page. Every pixel is drawn through a WebGL shader that\n              warps space toward your cursor position, like a magnet pulling iron filings beneath a\n              thin rubber sheet.\n            </p>\n            <p class=\"body-text\">\n              The distortion follows a Gaussian falloff — strong at close range, tapering smoothly\n              to nothing. The text remains readable even under deformation.\n            </p>\n            <p class=\"hint\">HTML-in-Canvas API + WebGL2 shader distortion</p>\n            <div class=\"card-grid\">\n              <div class=\"card\">\n                <div class=\"card-icon\">&#9889;</div>\n                <div class=\"card-title\">Real-time</div>\n                <div class=\"card-desc\">\n                  60fps distortion on live DOM content via texElementImage2D\n                </div>\n              </div>\n              <div class=\"card\">\n                <div class=\"card-icon\">&#128268;</div>\n                <div class=\"card-title\">Native API</div>\n                <div class=\"card-desc\">\n                  No html2canvas. Browser's own rasterizer at full fidelity.\n                </div>\n              </div>\n              <div class=\"card\">\n                <div class=\"card-icon\">&#127912;</div>\n                <div class=\"card-title\">GPU Shaders</div>\n                <div class=\"card-desc\">\n                  Gaussian warp + chromatic aberration in one fragment shader pass.\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </canvas>\n\n      <!-- Visible cursor dot -->\n      <div class=\"cursor-dot\" id=\"cursor-dot\"></div>\n\n      <!-- Subtitles -->\n      <div class=\"subtitle-bar\">\n        <div class=\"subtitle\" id=\"sub1\">\n          The HTML-in-Canvas API renders live DOM as a WebGL texture\n        </div>\n        <div class=\"subtitle\" id=\"sub2\">A magnetic shader warps every pixel toward the cursor</div>\n        <div class=\"subtitle\" id=\"sub3\">\n          Chromatic aberration splits RGB channels at the distortion site\n        </div>\n        <div class=\"subtitle\" id=\"sub4\">\n          Impossible without native drawElementImage — no polyfill exists\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"15\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      var W = 1920,\n        H = 1080;\n      var canvas = document.getElementById(\"gl-canvas\");\n      var content = document.getElementById(\"content\");\n      var cursorDot = document.getElementById(\"cursor-dot\");\n\n      function isSupported() {\n        var tc = document.createElement(\"canvas\");\n        if (!(\"layoutSubtree\" in tc)) return false;\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        var ctx = tc.getContext(\"2d\");\n        return ctx && typeof ctx.drawElementImage === \"function\";\n      }\n\n      // ── WebGL2 Setup ─────────────────────────────────────────────────\n      var gl = canvas.getContext(\"webgl2\", { alpha: false, preserveDrawingBuffer: true });\n\n      function compile(type, src) {\n        var s = gl.createShader(type);\n        gl.shaderSource(s, src);\n        gl.compileShader(s);\n        if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) console.error(gl.getShaderInfoLog(s));\n        return s;\n      }\n      function link(vsSrc, fsSrc) {\n        var p = gl.createProgram();\n        gl.attachShader(p, compile(gl.VERTEX_SHADER, vsSrc));\n        gl.attachShader(p, compile(gl.FRAGMENT_SHADER, fsSrc));\n        gl.linkProgram(p);\n        return p;\n      }\n\n      var VS = [\n        \"#version 300 es\",\n        \"in vec2 a_pos;\",\n        \"out vec2 v_uv;\",\n        \"void main() {\",\n        \"  v_uv = vec2(a_pos.x * 0.5 + 0.5, 0.5 - a_pos.y * 0.5);\",\n        \"  gl_Position = vec4(a_pos, 0.0, 1.0);\",\n        \"}\",\n      ].join(\"\\n\");\n\n      var FS = [\n        \"#version 300 es\",\n        \"precision highp float;\",\n        \"in vec2 v_uv;\",\n        \"out vec4 fragColor;\",\n        \"uniform sampler2D u_content;\",\n        \"uniform vec2 u_mouse;\",\n        \"uniform vec2 u_resolution;\",\n        \"uniform float u_repel;\",\n        \"uniform float u_strength;\",\n        \"\",\n        \"void main() {\",\n        \"  vec2 uv = v_uv;\",\n        \"  float aspect = u_resolution.x / u_resolution.y;\",\n        \"  vec2 delta = u_mouse - uv;\",\n        \"  vec2 aspectDelta = delta * vec2(aspect, 1.0);\",\n        \"  float dist = length(aspectDelta);\",\n        \"  float strength = exp(-dist * dist * 20.0) * 0.04 * u_strength;\",\n        \"  float direction = mix(1.0, -1.0, u_repel);\",\n        \"  vec2 displaced = uv + delta * strength * direction;\",\n        \"  displaced = clamp(displaced, vec2(0.0), vec2(1.0));\",\n        \"  float aberration = strength * 0.6;\",\n        \"  vec2 aberDir = normalize(delta + 0.0001) * aberration;\",\n        \"  float r = texture(u_content, displaced + aberDir * 0.3).r;\",\n        \"  float g = texture(u_content, displaced).g;\",\n        \"  float b = texture(u_content, displaced - aberDir * 0.3).b;\",\n        \"  fragColor = vec4(r, g, b, 1.0);\",\n        \"}\",\n      ].join(\"\\n\");\n\n      var prog = link(VS, FS);\n\n      // Quad\n      var vao = gl.createVertexArray();\n      gl.bindVertexArray(vao);\n      var buf = gl.createBuffer();\n      gl.bindBuffer(gl.ARRAY_BUFFER, buf);\n      gl.bufferData(\n        gl.ARRAY_BUFFER,\n        new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n        gl.STATIC_DRAW,\n      );\n      var aPos = gl.getAttribLocation(prog, \"a_pos\");\n      gl.enableVertexAttribArray(aPos);\n      gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);\n\n      // Texture\n      var tex = gl.createTexture();\n      gl.bindTexture(gl.TEXTURE_2D, tex);\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n\n      // Uniforms\n      gl.useProgram(prog);\n      var U = {};\n      [\"u_content\", \"u_mouse\", \"u_resolution\", \"u_repel\", \"u_strength\"].forEach(function (n) {\n        U[n] = gl.getUniformLocation(prog, n);\n      });\n\n      // ── Capture + Render ─────────────────────────────────────────────\n      var captured = false;\n\n      function captureContent() {\n        if (!isSupported()) return;\n        gl.bindTexture(gl.TEXTURE_2D, tex);\n        gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);\n        captured = true;\n      }\n\n      // Also support drawElementImage fallback via 2D context capture\n      function captureVia2D() {\n        var tc = document.createElement(\"canvas\");\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        tc.width = W;\n        tc.height = H;\n        // Can't use drawElementImage from a different canvas — skip fallback\n      }\n\n      function render(mouseX, mouseY, repel, strength) {\n        gl.viewport(0, 0, W, H);\n        gl.useProgram(prog);\n        gl.bindVertexArray(vao);\n        gl.activeTexture(gl.TEXTURE0);\n        gl.bindTexture(gl.TEXTURE_2D, tex);\n        gl.uniform1i(U.u_content, 0);\n        gl.uniform2f(U.u_mouse, mouseX, mouseY);\n        gl.uniform2f(U.u_resolution, W, H);\n        gl.uniform1f(U.u_repel, repel);\n        gl.uniform1f(U.u_strength, strength);\n        gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n      }\n\n      // ── Animation State ──────────────────────────────────────────────\n      var S = {\n        mouseX: 0.5,\n        mouseY: 0.5,\n        repel: 0,\n        strength: 0,\n        progress: 0,\n      };\n\n      // ── GSAP Timeline ────────────────────────────────────────────────\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      // Driver tween\n      tl.to(\n        S,\n        {\n          progress: 1,\n          duration: 15,\n          ease: \"none\",\n          onUpdate: function () {\n            // Update cursor dot position\n            cursorDot.style.left = S.mouseX * W + \"px\";\n            cursorDot.style.top = S.mouseY * H + \"px\";\n            render(S.mouseX, S.mouseY, S.repel, S.strength);\n          },\n        },\n        0,\n      );\n\n      // Cursor appears\n      tl.to(cursorDot, { opacity: 1, duration: 0.3 }, 0.5);\n      tl.to(S, { strength: 1, duration: 0.5, ease: \"power2.out\" }, 0.5);\n\n      // Cursor path: smooth figure-8 across the page\n      // Phase 1: sweep across heading\n      tl.to(S, { mouseX: 0.35, mouseY: 0.3, duration: 2, ease: \"power1.inOut\" }, 1);\n      tl.to(S, { mouseX: 0.6, mouseY: 0.35, duration: 2, ease: \"power1.inOut\" }, 3);\n\n      // Phase 2: circle around text\n      tl.to(S, { mouseX: 0.4, mouseY: 0.5, duration: 1.5, ease: \"sine.inOut\" }, 5);\n      tl.to(S, { mouseX: 0.55, mouseY: 0.55, duration: 1.5, ease: \"sine.inOut\" }, 6.5);\n\n      // Phase 3: repel pulse\n      tl.to(S, { repel: 1, duration: 0.2, ease: \"power4.out\" }, 8);\n      tl.to(S, { repel: 0, duration: 0.5, ease: \"power2.out\" }, 8.5);\n\n      // Phase 4: sweep across cards\n      tl.to(S, { mouseX: 0.3, mouseY: 0.75, duration: 2, ease: \"power1.inOut\" }, 9);\n      tl.to(S, { mouseX: 0.65, mouseY: 0.72, duration: 2, ease: \"power1.inOut\" }, 11);\n\n      // Phase 5: exit\n      tl.to(S, { mouseX: 0.8, mouseY: 0.2, duration: 1.5, ease: \"power2.inOut\" }, 13);\n      tl.to(S, { strength: 0, duration: 0.5 }, 14);\n      tl.to(cursorDot, { opacity: 0, duration: 0.3 }, 14.2);\n\n      // Subtitles\n      tl.to(\"#sub1\", { opacity: 1, duration: 0.3 }, 1);\n      tl.to(\"#sub1\", { opacity: 0, duration: 0.3 }, 3.5);\n      tl.to(\"#sub2\", { opacity: 1, duration: 0.3 }, 4);\n      tl.to(\"#sub2\", { opacity: 0, duration: 0.3 }, 6.5);\n      tl.to(\"#sub3\", { opacity: 1, duration: 0.3 }, 7.5);\n      tl.to(\"#sub3\", { opacity: 0, duration: 0.3 }, 9.5);\n      tl.to(\"#sub4\", { opacity: 1, duration: 0.3 }, 10.5);\n      tl.to(\"#sub4\", { opacity: 0, duration: 0.3 }, 13);\n\n      window.__timelines[\"magnetic-cursor\"] = tl;\n\n      // Paint event for texture upload\n      canvas.onpaint = function () {\n        if (!captured) {\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, content);\n          captured = true;\n        }\n      };\n\n      setTimeout(function () {\n        if (isSupported()) {\n          canvas.requestPaint();\n        }\n        tl.seek(0);\n      }, 0);\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vfx-portal.json b/docs/public/catalog/blocks/vfx-portal.json
new file mode 100644
index 0000000000..b838a93961
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-portal.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>HTML Portal Transition</title>\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n      }\n\n      .panel {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n\n      /* ── Shared Site Layout ──────────────────────────────── */\n      .site-wrap {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        height: 100%;\n      }\n\n      .topbar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: 28px 64px;\n      }\n      .logo {\n        font-size: 24px;\n        font-weight: 800;\n        letter-spacing: -0.5px;\n      }\n      .nav {\n        display: flex;\n        gap: 36px;\n      }\n      .nav span {\n        font-size: 15px;\n        font-weight: 500;\n      }\n      .nav-cta {\n        font-size: 14px;\n        font-weight: 600;\n        padding: 10px 24px;\n        border-radius: 8px;\n        border: none;\n        cursor: pointer;\n      }\n\n      .hero {\n        flex: 1;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        text-align: center;\n        gap: 24px;\n        padding: 0 200px;\n      }\n      .hero-title {\n        font-size: 72px;\n        font-weight: 800;\n        letter-spacing: -2px;\n        line-height: 1.05;\n      }\n      .hero-sub {\n        font-size: 20px;\n        line-height: 1.6;\n        max-width: 640px;\n      }\n      .hero-btn {\n        display: inline-block;\n        padding: 16px 40px;\n        border-radius: 12px;\n        font-size: 17px;\n        font-weight: 700;\n        border: none;\n        cursor: pointer;\n        letter-spacing: -0.2px;\n      }\n\n      .cards-row {\n        display: flex;\n        gap: 24px;\n        padding: 0 64px 56px;\n      }\n      .feature-card {\n        flex: 1;\n        padding: 32px;\n        border-radius: 16px;\n      }\n      .card-icon {\n        width: 44px;\n        height: 44px;\n        border-radius: 10px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 22px;\n        margin-bottom: 16px;\n      }\n      .card-title {\n        font-size: 18px;\n        font-weight: 700;\n        margin-bottom: 6px;\n      }\n      .card-desc {\n        font-size: 14px;\n        line-height: 1.5;\n      }\n\n      /* ── Light Mode ──────────────────────────────────────── */\n      .light .site-wrap {\n        background: #fafafa;\n        color: #111;\n      }\n      .light .logo {\n        color: #111;\n      }\n      .light .nav span {\n        color: #555;\n      }\n      .light .nav-cta {\n        background: #7c3aed;\n        color: #fff;\n      }\n      .light .hero-title {\n        color: #111;\n      }\n      .light .hero-sub {\n        color: #666;\n      }\n      .light .hero-btn {\n        background: #7c3aed;\n        color: #fff;\n      }\n      .light .feature-card {\n        background: #fff;\n        border: 1px solid #e5e7eb;\n      }\n      .light .card-icon {\n        background: #f3f0ff;\n        color: #7c3aed;\n      }\n      .light .card-title {\n        color: #111;\n      }\n      .light .card-desc {\n        color: #777;\n      }\n\n      /* ── Dark Mode ───────────────────────────────────────── */\n      .dark .site-wrap {\n        background: #0a0a0f;\n        color: #f0f0f5;\n      }\n      .dark .logo {\n        background: linear-gradient(135deg, #a78bfa, #c084fc);\n        -webkit-background-clip: text;\n        -webkit-text-fill-color: transparent;\n      }\n      .dark .nav span {\n        color: rgba(255, 255, 255, 0.5);\n      }\n      .dark .nav-cta {\n        background: linear-gradient(135deg, #7c3aed, #a855f7);\n        color: #fff;\n        box-shadow: 0 0 24px rgba(124, 58, 237, 0.3);\n      }\n      .dark .hero-title {\n        color: #f0f0f5;\n      }\n      .dark .hero-sub {\n        color: rgba(255, 255, 255, 0.5);\n      }\n      .dark .hero-btn {\n        background: linear-gradient(135deg, #7c3aed, #a855f7);\n        color: #fff;\n        box-shadow: 0 0 32px rgba(124, 58, 237, 0.35);\n      }\n      .dark .feature-card {\n        background: rgba(255, 255, 255, 0.03);\n        border: 1px solid rgba(255, 255, 255, 0.08);\n        box-shadow: 0 0 20px rgba(124, 58, 237, 0.06);\n      }\n      .dark .card-icon {\n        background: rgba(124, 58, 237, 0.15);\n        color: #a78bfa;\n      }\n      .dark .card-title {\n        color: #f0f0f5;\n      }\n      .dark .card-desc {\n        color: rgba(255, 255, 255, 0.45);\n      }\n\n      #error-overlay {\n        position: absolute;\n        inset: 0;\n        background: #000;\n        display: none;\n        align-items: center;\n        justify-content: center;\n        z-index: 100;\n        flex-direction: column;\n        gap: 16px;\n        color: #fff;\n      }\n      #error-overlay.visible {\n        display: flex;\n      }\n      #error-overlay h2 {\n        font-size: 24px;\n        font-weight: 600;\n      }\n      #error-overlay p {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n        max-width: 480px;\n        text-align: center;\n        line-height: 1.6;\n      }\n      #error-overlay code {\n        background: rgba(255, 255, 255, 0.1);\n        padding: 2px 8px;\n        border-radius: 4px;\n        font-size: 13px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"portal-transition\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"10\"\n      data-root=\"true\"\n    >\n      <!-- Light mode panel (front) -->\n      <canvas\n        id=\"cap-light\"\n        layoutsubtree\n        width=\"1920\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <section\n          class=\"panel light\"\n          id=\"panel-light\"\n          data-panel-start=\"0\"\n          data-panel-duration=\"10\"\n          style=\"width: 1920px; height: 1080px\"\n        >\n          <div class=\"site-wrap\">\n            <div class=\"topbar\">\n              <div class=\"logo\">HyperFrames</div>\n              <div class=\"nav\">\n                <span>Docs</span>\n                <span>Catalog</span>\n                <span>GitHub</span>\n                <button class=\"nav-cta\">Sign In</button>\n              </div>\n            </div>\n            <div class=\"hero\">\n              <h1 class=\"hero-title\">Write HTML<br />Render Video</h1>\n              <p class=\"hero-sub\">\n                Ship faster with a platform that handles the hard parts. Analytics, infrastructure,\n                and developer tools — all in one place.\n              </p>\n              <button class=\"hero-btn\">Start Creating</button>\n            </div>\n            <div class=\"cards-row\">\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#9889;</div>\n                <div class=\"card-title\">Lightning Fast</div>\n                <div class=\"card-desc\">\n                  Sub-millisecond response times with edge deployment across 40+ regions worldwide.\n                </div>\n              </div>\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#128274;</div>\n                <div class=\"card-title\">Secure by Default</div>\n                <div class=\"card-desc\">\n                  SOC2 certified. End-to-end encryption. Role-based access out of the box.\n                </div>\n              </div>\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#128268;</div>\n                <div class=\"card-title\">Plug and Play</div>\n                <div class=\"card-desc\">\n                  200+ integrations. Connect your existing stack in minutes, not weeks.\n                </div>\n              </div>\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#128200;</div>\n                <div class=\"card-title\">Real-time Insights</div>\n                <div class=\"card-desc\">\n                  Live dashboards, anomaly detection, and AI-powered recommendations.\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </canvas>\n\n      <!-- Dark mode panel (back) -->\n      <canvas\n        id=\"cap-dark\"\n        layoutsubtree\n        width=\"1920\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <section\n          class=\"panel dark\"\n          id=\"panel-dark\"\n          data-panel-start=\"0\"\n          data-panel-duration=\"10\"\n          style=\"width: 1920px; height: 1080px\"\n        >\n          <div class=\"site-wrap\">\n            <div class=\"topbar\">\n              <div class=\"logo\">HyperFrames</div>\n              <div class=\"nav\">\n                <span>Docs</span>\n                <span>Catalog</span>\n                <span>GitHub</span>\n                <button class=\"nav-cta\">Sign In</button>\n              </div>\n            </div>\n            <div class=\"hero\">\n              <h1 class=\"hero-title\">Write HTML<br />Render Video</h1>\n              <p class=\"hero-sub\">\n                Ship faster with a platform that handles the hard parts. Analytics, infrastructure,\n                and developer tools — all in one place.\n              </p>\n              <button class=\"hero-btn\">Start Creating</button>\n            </div>\n            <div class=\"cards-row\">\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#9889;</div>\n                <div class=\"card-title\">Lightning Fast</div>\n                <div class=\"card-desc\">\n                  Sub-millisecond response times with edge deployment across 40+ regions worldwide.\n                </div>\n              </div>\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#128274;</div>\n                <div class=\"card-title\">Secure by Default</div>\n                <div class=\"card-desc\">\n                  SOC2 certified. End-to-end encryption. Role-based access out of the box.\n                </div>\n              </div>\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#128268;</div>\n                <div class=\"card-title\">Plug and Play</div>\n                <div class=\"card-desc\">\n                  200+ integrations. Connect your existing stack in minutes, not weeks.\n                </div>\n              </div>\n              <div class=\"feature-card\">\n                <div class=\"card-icon\">&#128200;</div>\n                <div class=\"card-title\">Real-time Insights</div>\n                <div class=\"card-desc\">\n                  Live dashboards, anomaly detection, and AI-powered recommendations.\n                </div>\n              </div>\n            </div>\n          </div>\n        </section>\n      </canvas>\n\n      <!-- Three.js render target -->\n      <canvas\n        id=\"theater\"\n        width=\"1920\"\n        height=\"1080\"\n        style=\"position: absolute; top: 0; left: 0; width: 1920px; height: 1080px\"\n      ></canvas>\n\n      <div id=\"error-overlay\">\n        <h2>HTML-in-Canvas Required</h2>\n        <p>\n          This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or\n          Brave:\n        </p>\n        <p><code>chrome://flags/#canvas-draw-element</code></p>\n      </div>\n\n      <!-- Driver clip for HyperFrames timeline sync -->\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"10\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      var theaterCanvas = document.getElementById(\"theater\");\n      var W = 1920,\n        H = 1080;\n\n      // ── Feature Detection ──────────────────────────────────────────────\n      function isSupported() {\n        if (!(\"layoutSubtree\" in document.createElement(\"canvas\"))) return false;\n        var tc = document.createElement(\"canvas\");\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        var ctx = tc.getContext(\"2d\");\n        return ctx && typeof ctx.drawElementImage === \"function\";\n      }\n\n      if (!isSupported()) {\n        document.getElementById(\"error-overlay\").classList.add(\"visible\");\n      }\n\n      // ── Seeded PRNG (mulberry32) ───────────────────────────────────────\n      function mulberry32(seed) {\n        return function () {\n          seed |= 0;\n          seed = (seed + 0x6d2b79f5) | 0;\n          var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n        };\n      }\n      var rng = mulberry32(42);\n\n      // ── Canvas Capture ─────────────────────────────────────────────────\n      var capLight = document.getElementById(\"cap-light\");\n      var capDark = document.getElementById(\"cap-dark\");\n      var ctxLight = capLight.getContext(\"2d\");\n      var ctxDark = capDark.getContext(\"2d\");\n      var panelLight = document.getElementById(\"panel-light\");\n      var panelDark = document.getElementById(\"panel-dark\");\n\n      function capturePanels() {\n        ctxLight.clearRect(0, 0, W, H);\n        ctxLight.drawElementImage(panelLight, 0, 0, W, H);\n        ctxDark.clearRect(0, 0, W, H);\n        ctxDark.drawElementImage(panelDark, 0, 0, W, H);\n        lightTexture.needsUpdate = true;\n        darkTexture.needsUpdate = true;\n      }\n\n      // ── Three.js Scene ─────────────────────────────────────────────────\n      var renderer = new THREE.WebGLRenderer({\n        canvas: theaterCanvas,\n        antialias: false,\n        alpha: false,\n        powerPreference: \"high-performance\",\n        preserveDrawingBuffer: true,\n      });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n      renderer.setClearColor(0x000000, 1);\n\n      var scene = new THREE.Scene();\n      var camera = new THREE.PerspectiveCamera(50, W / H, 0.1, 100);\n      camera.position.set(0, 0, 2.8);\n      camera.lookAt(0, 0, 0);\n\n      // Calculate quad dimensions to fill the camera frustum at z=0\n      var vFov = (camera.fov * Math.PI) / 180;\n      var quadH = 2 * Math.tan(vFov / 2) * camera.position.z;\n      var quadW = quadH * (W / H);\n\n      // ── Textures from Captured Canvases ────────────────────────────────\n      var lightTexture = new THREE.CanvasTexture(capLight);\n      lightTexture.minFilter = THREE.LinearFilter;\n      lightTexture.magFilter = THREE.LinearFilter;\n      lightTexture.generateMipmaps = false;\n\n      var darkTexture = new THREE.CanvasTexture(capDark);\n      darkTexture.minFilter = THREE.LinearFilter;\n      darkTexture.magFilter = THREE.LinearFilter;\n      darkTexture.generateMipmaps = false;\n\n      // ── Back Quad: Dark Mode (sits behind) ─────────────────────────────\n      var darkGeo = new THREE.PlaneGeometry(quadW, quadH);\n      var darkMat = new THREE.MeshBasicMaterial({ map: darkTexture, side: THREE.FrontSide });\n      var darkQuad = new THREE.Mesh(darkGeo, darkMat);\n      darkQuad.position.z = -0.01;\n      scene.add(darkQuad);\n\n      // ── Front Quad: Light Mode with Portal Shader ──────────────────────\n      var portalUniforms = {\n        tLight: { value: lightTexture },\n        portalRadius: { value: 0.0 },\n        portalCenter: { value: new THREE.Vector2(0.5, 0.5) },\n        edgeWidth: { value: 0.06 },\n        glowColor: { value: new THREE.Vector3(0.486, 0.227, 0.929) },\n        glowColor2: { value: new THREE.Vector3(0.29, 0.565, 1.0) },\n        chromaticStrength: { value: 0.025 },\n        distortionStrength: { value: 0.04 },\n        time: { value: 0.0 },\n        energyIntensity: { value: 1.0 },\n      };\n\n      var portalVertShader = [\n        \"varying vec2 vUv;\",\n        \"void main() {\",\n        \"  vUv = uv;\",\n        \"  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\",\n        \"}\",\n      ].join(\"\\n\");\n\n      var portalFragShader = [\n        \"uniform sampler2D tLight;\",\n        \"uniform float portalRadius;\",\n        \"uniform vec2 portalCenter;\",\n        \"uniform float edgeWidth;\",\n        \"uniform vec3 glowColor;\",\n        \"uniform vec3 glowColor2;\",\n        \"uniform float chromaticStrength;\",\n        \"uniform float distortionStrength;\",\n        \"uniform float time;\",\n        \"uniform float energyIntensity;\",\n        \"varying vec2 vUv;\",\n        \"\",\n        \"float hash(vec2 p) {\",\n        \"  return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453);\",\n        \"}\",\n        \"\",\n        \"float noise(vec2 p) {\",\n        \"  vec2 i = floor(p);\",\n        \"  vec2 f = fract(p);\",\n        \"  f = f * f * (3.0 - 2.0 * f);\",\n        \"  float a = hash(i);\",\n        \"  float b = hash(i + vec2(1.0, 0.0));\",\n        \"  float c = hash(i + vec2(0.0, 1.0));\",\n        \"  float d = hash(i + vec2(1.0, 1.0));\",\n        \"  return mix(mix(a, b, f.x), mix(c, d, f.x), f.y);\",\n        \"}\",\n        \"\",\n        \"void main() {\",\n        \"  vec2 uv = vUv;\",\n        \"  vec2 aspect = vec2(\" + (W / H).toFixed(4) + \", 1.0);\",\n        \"  vec2 centered = (uv - portalCenter) * aspect;\",\n        \"  float dist = length(centered);\",\n        \"\",\n        \"  // Noise-modulated edge for organic tear look\",\n        \"  float angle = atan(centered.y, centered.x);\",\n        \"  float edgeNoise = noise(vec2(angle * 3.0, time * 2.0)) * 0.03 * energyIntensity;\",\n        \"  float portalEdge = portalRadius + edgeNoise;\",\n        \"\",\n        \"  // Distortion near portal edge: warp UVs radially\",\n        \"  float edgeDist = abs(dist - portalEdge);\",\n        \"  float distortMask = smoothstep(edgeWidth * 1.5, 0.0, edgeDist) * distortionStrength;\",\n        \"  vec2 distortDir = normalize(centered + 0.0001);\",\n        \"  vec2 distortedUv = uv + distortDir * distortMask * sin(angle * 8.0 + time * 5.0);\",\n        \"\",\n        \"  // Chromatic aberration near portal edge\",\n        \"  float chromaMask = smoothstep(edgeWidth * 2.0, 0.0, edgeDist) * chromaticStrength;\",\n        \"  vec2 chromaOffset = distortDir * chromaMask;\",\n        \"  float r = texture2D(tLight, distortedUv + chromaOffset).r;\",\n        \"  float g = texture2D(tLight, distortedUv).g;\",\n        \"  float b = texture2D(tLight, distortedUv - chromaOffset).b;\",\n        \"  vec3 lightColor = vec3(r, g, b);\",\n        \"\",\n        \"  // Portal mask: inside = transparent (show dark behind), outside = light\",\n        \"  float mask = smoothstep(portalEdge - 0.008, portalEdge + 0.008, dist);\",\n        \"\",\n        \"  // Glow ring at portal edge\",\n        \"  float glowInner = smoothstep(edgeWidth, 0.0, edgeDist);\",\n        \"  float glowOuter = smoothstep(edgeWidth * 2.5, edgeWidth * 0.5, edgeDist);\",\n        \"  float glow = glowInner * glowOuter * energyIntensity;\",\n        \"\",\n        \"  // Animated color cycling along the ring\",\n        \"  float colorPhase = fract(angle / 6.2832 + time * 0.4);\",\n        \"  vec3 ringColor = mix(glowColor, glowColor2, sin(colorPhase * 6.2832) * 0.5 + 0.5);\",\n        \"\",\n        \"  // Secondary energy sparks\",\n        \"  float sparks = noise(vec2(angle * 12.0, time * 8.0));\",\n        \"  sparks = pow(sparks, 4.0) * glowInner * energyIntensity * 2.0;\",\n        \"\",\n        \"  vec3 finalColor = lightColor * mask;\",\n        \"  finalColor += ringColor * glow * 2.5;\",\n        \"  finalColor += vec3(1.0, 0.9, 1.0) * sparks;\",\n        \"\",\n        \"  // When portal is large enough, alpha fades out completely\",\n        \"  float alpha = mask + glow * 0.5 + sparks * 0.3;\",\n        \"  alpha = clamp(alpha, 0.0, 1.0);\",\n        \"\",\n        \"  gl_FragColor = vec4(finalColor, alpha);\",\n        \"}\",\n      ].join(\"\\n\");\n\n      var frontGeo = new THREE.PlaneGeometry(quadW, quadH);\n      var frontMat = new THREE.ShaderMaterial({\n        uniforms: portalUniforms,\n        vertexShader: portalVertShader,\n        fragmentShader: portalFragShader,\n        transparent: true,\n        side: THREE.FrontSide,\n        depthWrite: false,\n      });\n      var frontQuad = new THREE.Mesh(frontGeo, frontMat);\n      frontQuad.position.z = 0.0;\n      scene.add(frontQuad);\n\n      // ── Animation State ────────────────────────────────────────────────\n      var animState = {\n        portalRadius: 0.0,\n        cameraZ: 2.8,\n        energyIntensity: 0.0,\n        chromaticStrength: 0.0,\n        distortionStrength: 0.0,\n        edgeWidth: 0.06,\n        time: 0.0,\n      };\n\n      // ── GSAP Timeline ──────────────────────────────────────────────────\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      // Phase 1: Hold on light mode (0 - 1.5s)\n      // Subtle energy buildup at center before portal opens\n      tl.to(\n        animState,\n        {\n          energyIntensity: 0.3,\n          duration: 1.2,\n          ease: \"power2.in\",\n        },\n        0.3,\n      );\n\n      // Phase 2: Portal tears open (1.5 - 5.0s)\n      tl.to(\n        animState,\n        {\n          portalRadius: 0.85,\n          duration: 3.5,\n          ease: \"power2.inOut\",\n        },\n        1.5,\n      );\n\n      tl.to(\n        animState,\n        {\n          energyIntensity: 1.0,\n          duration: 0.6,\n          ease: \"power3.out\",\n        },\n        1.5,\n      );\n\n      tl.to(\n        animState,\n        {\n          chromaticStrength: 0.035,\n          duration: 2.0,\n          ease: \"power2.in\",\n        },\n        1.5,\n      );\n\n      tl.to(\n        animState,\n        {\n          distortionStrength: 0.06,\n          duration: 2.5,\n          ease: \"power2.inOut\",\n        },\n        1.5,\n      );\n\n      tl.to(\n        animState,\n        {\n          edgeWidth: 0.08,\n          duration: 2.0,\n          ease: \"sine.inOut\",\n        },\n        2.0,\n      );\n\n      // Phase 3: Camera pushes through portal (3.5 - 6.5s)\n      tl.to(\n        animState,\n        {\n          cameraZ: 1.4,\n          duration: 3.0,\n          ease: \"power2.inOut\",\n        },\n        3.5,\n      );\n\n      // Phase 4: Portal overshoots to cover full screen (5.0 - 7.0s)\n      tl.to(\n        animState,\n        {\n          portalRadius: 1.8,\n          duration: 2.0,\n          ease: \"power3.in\",\n        },\n        5.0,\n      );\n\n      // Energy peaks then fades as we emerge\n      tl.to(\n        animState,\n        {\n          energyIntensity: 1.5,\n          duration: 0.8,\n          ease: \"power2.in\",\n        },\n        5.0,\n      );\n\n      tl.to(\n        animState,\n        {\n          energyIntensity: 0.0,\n          duration: 1.2,\n          ease: \"power2.out\",\n        },\n        6.2,\n      );\n\n      // Chromatic aberration peaks during push-through\n      tl.to(\n        animState,\n        {\n          chromaticStrength: 0.06,\n          duration: 1.0,\n          ease: \"power3.in\",\n        },\n        5.5,\n      );\n\n      tl.to(\n        animState,\n        {\n          chromaticStrength: 0.0,\n          duration: 1.0,\n          ease: \"power2.out\",\n        },\n        6.8,\n      );\n\n      // Distortion fades\n      tl.to(\n        animState,\n        {\n          distortionStrength: 0.0,\n          duration: 1.0,\n          ease: \"power2.out\",\n        },\n        6.5,\n      );\n\n      // Phase 5: Settle in dark mode (7.0 - 10s)\n      // Camera eases to final position\n      tl.to(\n        animState,\n        {\n          cameraZ: 2.8,\n          duration: 2.5,\n          ease: \"power2.out\",\n        },\n        7.0,\n      );\n\n      // ── Render Loop via Timeline ───────────────────────────────────────\n      tl.to(\n        { v: 0 },\n        {\n          v: 1,\n          duration: 10,\n          ease: \"none\",\n          onUpdate: function () {\n            var t = tl.time();\n            animState.time = t;\n\n            // Update portal shader uniforms\n            portalUniforms.portalRadius.value = animState.portalRadius;\n            portalUniforms.edgeWidth.value = animState.edgeWidth;\n            portalUniforms.chromaticStrength.value = animState.chromaticStrength;\n            portalUniforms.distortionStrength.value = animState.distortionStrength;\n            portalUniforms.time.value = t;\n            portalUniforms.energyIntensity.value = animState.energyIntensity;\n\n            // Update camera Z for push-through effect\n            camera.position.z = animState.cameraZ;\n\n            // Recalculate quad scale to always fill the view at current camera Z\n            var currentVFov = (camera.fov * Math.PI) / 180;\n            var currentH = 2 * Math.tan(currentVFov / 2) * camera.position.z;\n            var currentW = currentH * (W / H);\n            frontQuad.scale.set(currentW / quadW, currentH / quadH, 1);\n            darkQuad.scale.set(currentW / quadW, currentH / quadH, 1);\n\n            renderer.render(scene, camera);\n          },\n        },\n        0,\n      );\n\n      window.__timelines[\"portal-transition\"] = tl;\n\n      // ── Deferred Init ──────────────────────────────────────────────────\n      setTimeout(function () {\n        if (isSupported()) {\n          capturePanels();\n        }\n        tl.seek(0);\n      }, 0);\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vfx-shatter.json b/docs/public/catalog/blocks/vfx-shatter.json
new file mode 100644
index 0000000000..0943a50037
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-shatter.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>HTML Glass Shatter</title>\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/three@0.147.0/build/three.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #000;\n        overflow: hidden;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #06080d;\n      }\n\n      #scene-canvas {\n        position: absolute;\n        top: 0;\n        left: 0;\n        width: 1920px;\n        height: 1080px;\n      }\n\n      .panel {\n        position: absolute;\n        top: 0;\n        left: 0;\n        overflow: hidden;\n        color: #fff;\n      }\n\n      /* ── Panel A: Write HTML, Render Video ─────────────────────────── */\n      .panel-a-inner {\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(160deg, #0a0c14 0%, #0d1117 40%, #111820 100%);\n        display: flex;\n        flex-direction: column;\n        padding: 80px 120px;\n        gap: 0;\n        position: relative;\n        overflow: hidden;\n      }\n      .panel-a-inner::before {\n        content: \"\";\n        position: absolute;\n        top: -200px;\n        right: -200px;\n        width: 600px;\n        height: 600px;\n        background: radial-gradient(circle, rgba(56, 189, 248, 0.06) 0%, transparent 70%);\n        pointer-events: none;\n      }\n      .panel-a-inner::after {\n        content: \"\";\n        position: absolute;\n        bottom: -150px;\n        left: -150px;\n        width: 500px;\n        height: 500px;\n        background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 70%);\n        pointer-events: none;\n      }\n\n      .pa-badge {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 20px;\n        background: rgba(56, 189, 248, 0.08);\n        border: 1px solid rgba(56, 189, 248, 0.15);\n        border-radius: 100px;\n        font-size: 14px;\n        font-weight: 600;\n        color: #38bdf8;\n        letter-spacing: 1.5px;\n        text-transform: uppercase;\n        width: fit-content;\n        margin-bottom: 40px;\n      }\n      .pa-badge-dot {\n        width: 6px;\n        height: 6px;\n        border-radius: 50%;\n        background: #38bdf8;\n      }\n\n      .pa-headline {\n        font-size: 88px;\n        font-weight: 800;\n        letter-spacing: -3px;\n        line-height: 1;\n        color: #f0f4f8;\n        margin-bottom: 48px;\n        max-width: 1100px;\n      }\n      .pa-headline em {\n        font-style: normal;\n        color: #38bdf8;\n      }\n\n      .pa-chart {\n        display: flex;\n        align-items: flex-end;\n        gap: 40px;\n        margin-bottom: 56px;\n      }\n      .pa-chart-group {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 12px;\n      }\n      .pa-chart-bars {\n        display: flex;\n        align-items: flex-end;\n        gap: 8px;\n        height: 160px;\n      }\n      .pa-bar {\n        width: 64px;\n        border-radius: 6px 6px 0 0;\n      }\n      .pa-bar-v1 {\n        height: 60px;\n        background: rgba(255, 255, 255, 0.08);\n        border: 1px solid rgba(255, 255, 255, 0.06);\n      }\n      .pa-bar-v2 {\n        height: 150px;\n        background: linear-gradient(to top, #38bdf8, #818cf8);\n      }\n      .pa-chart-label {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.4);\n        font-weight: 500;\n      }\n      .pa-chart-sublabel {\n        font-size: 13px;\n        font-weight: 600;\n      }\n      .pa-chart-sublabel.dim {\n        color: rgba(255, 255, 255, 0.25);\n      }\n      .pa-chart-sublabel.lit {\n        color: #38bdf8;\n      }\n\n      .pa-features {\n        display: flex;\n        gap: 32px;\n        margin-bottom: 56px;\n      }\n      .pa-feature {\n        display: flex;\n        align-items: flex-start;\n        gap: 14px;\n        flex: 1;\n      }\n      .pa-feature-icon {\n        width: 44px;\n        height: 44px;\n        border-radius: 10px;\n        background: rgba(56, 189, 248, 0.08);\n        border: 1px solid rgba(56, 189, 248, 0.12);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-size: 20px;\n        flex-shrink: 0;\n        color: #38bdf8;\n      }\n      .pa-feature-text h3 {\n        font-size: 16px;\n        font-weight: 600;\n        color: #e2e8f0;\n        margin-bottom: 4px;\n      }\n      .pa-feature-text p {\n        font-size: 13px;\n        color: rgba(255, 255, 255, 0.35);\n        line-height: 1.5;\n      }\n\n      .pa-cta {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        padding: 16px 40px;\n        background: linear-gradient(135deg, #38bdf8, #818cf8);\n        border-radius: 12px;\n        font-size: 18px;\n        font-weight: 700;\n        color: #fff;\n        border: none;\n        width: fit-content;\n        letter-spacing: -0.3px;\n      }\n\n      /* ── Panel B: Welcome to v2.0 ──────────────────────────── */\n      .panel-b-inner {\n        width: 100%;\n        height: 100%;\n        background: linear-gradient(160deg, #0a0f1a 0%, #0c1220 50%, #0f1628 100%);\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        padding: 80px 120px;\n        gap: 48px;\n        position: relative;\n        overflow: hidden;\n      }\n\n      .pb-confetti {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n        pointer-events: none;\n      }\n      .pb-dot {\n        position: absolute;\n        border-radius: 50%;\n        opacity: 0.12;\n      }\n\n      .pb-badge {\n        display: inline-flex;\n        align-items: center;\n        gap: 8px;\n        padding: 10px 24px;\n        background: rgba(52, 211, 153, 0.08);\n        border: 1px solid rgba(52, 211, 153, 0.2);\n        border-radius: 100px;\n        font-size: 15px;\n        font-weight: 600;\n        color: #34d399;\n        letter-spacing: 1px;\n      }\n\n      .pb-headline {\n        font-size: 80px;\n        font-weight: 800;\n        letter-spacing: -3px;\n        color: #f0f4f8;\n        text-align: center;\n      }\n\n      .pb-metrics {\n        display: flex;\n        gap: 48px;\n      }\n      .pb-metric {\n        text-align: center;\n        padding: 32px 48px;\n        background: rgba(255, 255, 255, 0.03);\n        border: 1px solid rgba(255, 255, 255, 0.06);\n        border-radius: 16px;\n        min-width: 220px;\n      }\n      .pb-metric-value {\n        font-size: 52px;\n        font-weight: 800;\n        letter-spacing: -2px;\n        margin-bottom: 8px;\n      }\n      .pb-metric-value.green {\n        color: #34d399;\n      }\n      .pb-metric-value.blue {\n        color: #38bdf8;\n      }\n      .pb-metric-value.purple {\n        color: #a78bfa;\n      }\n      .pb-metric-label {\n        font-size: 15px;\n        color: rgba(255, 255, 255, 0.4);\n        font-weight: 500;\n      }\n\n      .pb-cta {\n        display: inline-flex;\n        align-items: center;\n        gap: 10px;\n        padding: 16px 40px;\n        background: linear-gradient(135deg, #34d399, #38bdf8);\n        border-radius: 12px;\n        font-size: 18px;\n        font-weight: 700;\n        color: #fff;\n        border: none;\n        letter-spacing: -0.3px;\n      }\n\n      /* ── Error Overlay ─────────────────────────────────────── */\n      #error-overlay {\n        position: absolute;\n        inset: 0;\n        background: #06080d;\n        display: none;\n        align-items: center;\n        justify-content: center;\n        z-index: 100;\n        flex-direction: column;\n        gap: 16px;\n      }\n      #error-overlay.visible {\n        display: flex;\n      }\n      #error-overlay h2 {\n        font-size: 24px;\n        color: #f0f4f8;\n        font-weight: 600;\n      }\n      #error-overlay p {\n        font-size: 14px;\n        color: rgba(255, 255, 255, 0.5);\n        max-width: 480px;\n        text-align: center;\n        line-height: 1.6;\n      }\n      #error-overlay code {\n        background: rgba(255, 255, 255, 0.1);\n        padding: 2px 8px;\n        border-radius: 4px;\n        font-size: 13px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"glass-shatter\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"12\"\n      data-root=\"true\"\n    >\n      <!-- Capture canvas: Panel A -->\n      <canvas\n        id=\"cap-a\"\n        layoutsubtree\n        width=\"1920\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <section class=\"panel\" id=\"panel-a\" data-panel-a style=\"width: 1920px; height: 1080px\">\n          <div class=\"panel-a-inner\">\n            <div class=\"pa-badge\">\n              <span class=\"pa-badge-dot\"></span>\n              Write HTML, Render Video\n            </div>\n\n            <h1 class=\"pa-headline\">Everything you loved.<br /><em>Now 10x faster.</em></h1>\n\n            <div class=\"pa-chart\">\n              <div class=\"pa-chart-group\">\n                <div class=\"pa-chart-bars\">\n                  <div class=\"pa-bar pa-bar-v1\"></div>\n                  <div class=\"pa-bar pa-bar-v2\"></div>\n                </div>\n                <div class=\"pa-chart-label\">Render Speed</div>\n                <div style=\"display: flex; gap: 16px\">\n                  <span class=\"pa-chart-sublabel dim\">v1</span>\n                  <span class=\"pa-chart-sublabel lit\">v2</span>\n                </div>\n              </div>\n              <div class=\"pa-chart-group\">\n                <div class=\"pa-chart-bars\">\n                  <div class=\"pa-bar pa-bar-v1\" style=\"height: 90px\"></div>\n                  <div class=\"pa-bar pa-bar-v2\" style=\"height: 145px\"></div>\n                </div>\n                <div class=\"pa-chart-label\">Throughput</div>\n                <div style=\"display: flex; gap: 16px\">\n                  <span class=\"pa-chart-sublabel dim\">v1</span>\n                  <span class=\"pa-chart-sublabel lit\">v2</span>\n                </div>\n              </div>\n              <div class=\"pa-chart-group\">\n                <div class=\"pa-chart-bars\">\n                  <div class=\"pa-bar pa-bar-v1\" style=\"height: 110px\"></div>\n                  <div class=\"pa-bar pa-bar-v2\" style=\"height: 155px\"></div>\n                </div>\n                <div class=\"pa-chart-label\">Reliability</div>\n                <div style=\"display: flex; gap: 16px\">\n                  <span class=\"pa-chart-sublabel dim\">v1</span>\n                  <span class=\"pa-chart-sublabel lit\">v2</span>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"pa-features\">\n              <div class=\"pa-feature\">\n                <div class=\"pa-feature-icon\">&#9889;</div>\n                <div class=\"pa-feature-text\">\n                  <h3>Instant Deploys</h3>\n                  <p>Zero-downtime rollouts in under 3 seconds globally.</p>\n                </div>\n              </div>\n              <div class=\"pa-feature\">\n                <div class=\"pa-feature-icon\">&#128274;</div>\n                <div class=\"pa-feature-text\">\n                  <h3>End-to-End Encryption</h3>\n                  <p>AES-256 at rest, TLS 1.3 in transit. SOC2 certified.</p>\n                </div>\n              </div>\n              <div class=\"pa-feature\">\n                <div class=\"pa-feature-icon\">&#128200;</div>\n                <div class=\"pa-feature-text\">\n                  <h3>Real-time Analytics</h3>\n                  <p>Sub-second queries across billions of events.</p>\n                </div>\n              </div>\n            </div>\n\n            <button class=\"pa-cta\">Start Creating &rarr;</button>\n          </div>\n        </section>\n      </canvas>\n\n      <!-- Capture canvas: Panel B -->\n      <canvas\n        id=\"cap-b\"\n        layoutsubtree\n        width=\"1920\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1920px;\n          height: 1080px;\n          z-index: -1;\n          pointer-events: none;\n        \"\n      >\n        <section class=\"panel\" id=\"panel-b\" data-panel-b style=\"width: 1920px; height: 1080px\">\n          <div class=\"panel-b-inner\">\n            <div class=\"pb-confetti\" id=\"confetti-container\"></div>\n\n            <div class=\"pb-badge\">&#10003; Powered by HyperFrames</div>\n\n            <h1 class=\"pb-headline\">HTML is Video</h1>\n\n            <div class=\"pb-metrics\">\n              <div class=\"pb-metric\">\n                <div class=\"pb-metric-value green\">10x</div>\n                <div class=\"pb-metric-label\">Render Speed</div>\n              </div>\n              <div class=\"pb-metric\">\n                <div class=\"pb-metric-value blue\">50%</div>\n                <div class=\"pb-metric-label\">File Size</div>\n              </div>\n              <div class=\"pb-metric\">\n                <div class=\"pb-metric-value purple\">99.99%</div>\n                <div class=\"pb-metric-label\">Reliability</div>\n              </div>\n            </div>\n\n            <button class=\"pb-cta\">View Catalog &rarr;</button>\n          </div>\n        </section>\n      </canvas>\n\n      <!-- Three.js render target -->\n      <canvas id=\"scene-canvas\" width=\"1920\" height=\"1080\"></canvas>\n\n      <!-- Error overlay -->\n      <div id=\"error-overlay\">\n        <h2>HTML-in-Canvas Required</h2>\n        <p>\n          This composition requires the experimental CanvasDrawElement API. Enable it in Chrome or\n          Brave:\n        </p>\n        <p><code>chrome://flags/#canvas-draw-element</code></p>\n      </div>\n\n      <!-- Driver clip -->\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"12\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      var W = 1920,\n        H = 1080;\n      var DURATION = 12;\n      var SHARD_COUNT = 200;\n      var CRACK_START = 2.0;\n      var CRACK_END = 4.0;\n      var SHATTER_START = 4.0;\n      var SHATTER_SETTLE = 10.0;\n\n      // ── Feature Detection ──────────────────────────────────────────────\n      function isSupported() {\n        if (!(\"layoutSubtree\" in document.createElement(\"canvas\"))) return false;\n        var tc = document.createElement(\"canvas\");\n        tc.setAttribute(\"layoutsubtree\", \"\");\n        var ctx = tc.getContext(\"2d\");\n        return ctx && typeof ctx.drawElementImage === \"function\";\n      }\n\n      if (!isSupported()) {\n        document.getElementById(\"error-overlay\").classList.add(\"visible\");\n      }\n\n      // ── Seeded PRNG (mulberry32, seed 42) ──────────────────────────────\n      function mulberry32(seed) {\n        return function () {\n          seed |= 0;\n          seed = (seed + 0x6d2b79f5) | 0;\n          var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n          t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n          return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n        };\n      }\n      var rng = mulberry32(42);\n\n      // ── Generate confetti dots for Panel B ─────────────────────────────\n      var confettiEl = document.getElementById(\"confetti-container\");\n      if (confettiEl) {\n        var dotColors = [\"#34d399\", \"#38bdf8\", \"#a78bfa\", \"#f472b6\", \"#fbbf24\"];\n        for (var d = 0; d < 60; d++) {\n          var dot = document.createElement(\"div\");\n          dot.className = \"pb-dot\";\n          var sz = 4 + rng() * 12;\n          dot.style.width = sz + \"px\";\n          dot.style.height = sz + \"px\";\n          dot.style.left = rng() * 100 + \"%\";\n          dot.style.top = rng() * 100 + \"%\";\n          dot.style.background = dotColors[Math.floor(rng() * dotColors.length)];\n          dot.style.opacity = (0.06 + rng() * 0.12).toFixed(3);\n          confettiEl.appendChild(dot);\n        }\n      }\n\n      // ── Parse capture canvases ─────────────────────────────────────────\n      var capA = document.getElementById(\"cap-a\");\n      var capB = document.getElementById(\"cap-b\");\n      var ctxA = capA.getContext(\"2d\");\n      var ctxB = capB.getContext(\"2d\");\n      var panelA = document.getElementById(\"panel-a\");\n      var panelB = document.getElementById(\"panel-b\");\n\n      function capturePanels() {\n        ctxA.clearRect(0, 0, W, H);\n        ctxA.drawElementImage(panelA, 0, 0, W, H);\n        ctxB.clearRect(0, 0, W, H);\n        ctxB.drawElementImage(panelB, 0, 0, W, H);\n      }\n\n      // ── Voronoi Shard Generation ───────────────────────────────────────\n      // Generate ~200 seed points, compute Voronoi via brute force,\n      // triangulate each cell, extract per-shard geometry + UVs.\n\n      // Normalized coordinates: x in [0, aspectRatio], y in [0, 1]\n      var aspect = W / H;\n\n      // Generate seed points with weighted density toward center\n      var seeds = [];\n      for (var s = 0; s < SHARD_COUNT; s++) {\n        var sx, sy;\n        // 40% of points biased toward center for denser cracking there\n        if (s < SHARD_COUNT * 0.4) {\n          var angle = rng() * Math.PI * 2;\n          var radius = rng() * 0.35;\n          sx = 0.5 * aspect + Math.cos(angle) * radius * aspect;\n          sy = 0.5 + Math.sin(angle) * radius;\n        } else {\n          sx = rng() * aspect;\n          sy = rng();\n        }\n        seeds.push({ x: sx, y: sy });\n      }\n\n      // For each seed, compute a convex polygon via intersection of half-planes\n      // (simplified: sample angles around seed, find nearest boundary)\n      function computeShardPolygons(seeds) {\n        var shards = [];\n        var ANGLES = 32;\n\n        for (var i = 0; i < seeds.length; i++) {\n          var cx = seeds[i].x;\n          var cy = seeds[i].y;\n          var verts = [];\n\n          for (var a = 0; a < ANGLES; a++) {\n            var theta = (a / ANGLES) * Math.PI * 2;\n            var dx = Math.cos(theta);\n            var dy = Math.sin(theta);\n\n            // Find closest bisector intersection along this ray\n            var minT = 999;\n\n            for (var j = 0; j < seeds.length; j++) {\n              if (j === i) continue;\n              // Midpoint between seeds i and j\n              var mx = (cx + seeds[j].x) * 0.5;\n              var my = (cy + seeds[j].y) * 0.5;\n              // Normal of bisector: direction from i to j\n              var nx = seeds[j].x - cx;\n              var ny = seeds[j].y - cy;\n              // Ray-plane intersection: t = dot(m - c, n) / dot(d, n)\n              var denom = dx * nx + dy * ny;\n              if (denom <= 0.0001) continue;\n              var t = ((mx - cx) * nx + (my - cy) * ny) / denom;\n              if (t > 0.001 && t < minT) minT = t;\n            }\n\n            // Clamp to bounding box\n            if (dx > 0) {\n              var tb = (aspect - cx) / dx;\n              if (tb > 0 && tb < minT) minT = tb;\n            }\n            if (dx < 0) {\n              var tb2 = -cx / dx;\n              if (tb2 > 0 && tb2 < minT) minT = tb2;\n            }\n            if (dy > 0) {\n              var tb3 = (1 - cy) / dy;\n              if (tb3 > 0 && tb3 < minT) minT = tb3;\n            }\n            if (dy < 0) {\n              var tb4 = -cy / dy;\n              if (tb4 > 0 && tb4 < minT) minT = tb4;\n            }\n\n            if (minT < 998) {\n              verts.push({\n                x: cx + dx * minT,\n                y: cy + dy * minT,\n              });\n            }\n          }\n\n          if (verts.length < 3) continue;\n\n          // Sort vertices by angle from centroid\n          var centX = 0,\n            centY = 0;\n          for (var v = 0; v < verts.length; v++) {\n            centX += verts[v].x;\n            centY += verts[v].y;\n          }\n          centX /= verts.length;\n          centY /= verts.length;\n\n          verts.sort(function (a, b) {\n            return Math.atan2(a.y - centY, a.x - centX) - Math.atan2(b.y - centY, b.x - centX);\n          });\n\n          // Fan triangulation from centroid\n          var triangles = [];\n          for (var v2 = 0; v2 < verts.length; v2++) {\n            var next = (v2 + 1) % verts.length;\n            triangles.push([{ x: centX, y: centY }, verts[v2], verts[next]]);\n          }\n\n          shards.push({\n            seedX: cx,\n            seedY: cy,\n            centroidX: centX,\n            centroidY: centY,\n            triangles: triangles,\n            verts: verts,\n          });\n        }\n\n        return shards;\n      }\n\n      var shardData = computeShardPolygons(seeds);\n\n      // ── Three.js Scene ─────────────────────────────────────────────────\n      var sceneCanvas = document.getElementById(\"scene-canvas\");\n      var renderer = new THREE.WebGLRenderer({\n        canvas: sceneCanvas,\n        antialias: true,\n        alpha: false,\n        preserveDrawingBuffer: true,\n        powerPreference: \"high-performance\",\n      });\n      renderer.setSize(W, H, false);\n      renderer.setPixelRatio(1);\n      renderer.toneMapping = THREE.NoToneMapping;\n      renderer.setClearColor(0x06080d, 1);\n\n      var scene = new THREE.Scene();\n      var camera = new THREE.OrthographicCamera(-aspect * 0.5, aspect * 0.5, 0.5, -0.5, 0.1, 100);\n      camera.position.z = 10;\n\n      // ── Textures from capture canvases ─────────────────────────────────\n      var texA = new THREE.CanvasTexture(capA);\n      texA.minFilter = THREE.LinearFilter;\n      texA.magFilter = THREE.LinearFilter;\n      texA.generateMipmaps = false;\n\n      var texB = new THREE.CanvasTexture(capB);\n      texB.minFilter = THREE.LinearFilter;\n      texB.magFilter = THREE.LinearFilter;\n      texB.generateMipmaps = false;\n\n      // ── Phase 1 & 2: Full plane with panel A + crack shader ────────────\n      var crackShaderMaterial = new THREE.ShaderMaterial({\n        uniforms: {\n          tPanel: { value: texA },\n          uCrackProgress: { value: 0.0 },\n          uAspect: { value: aspect },\n          uTime: { value: 0.0 },\n        },\n        vertexShader: [\n          \"varying vec2 vUv;\",\n          \"void main() {\",\n          \"  vUv = uv;\",\n          \"  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\",\n          \"}\",\n        ].join(\"\\n\"),\n        fragmentShader: [\n          \"uniform sampler2D tPanel;\",\n          \"uniform float uCrackProgress;\",\n          \"uniform float uAspect;\",\n          \"uniform float uTime;\",\n          \"varying vec2 vUv;\",\n          \"\",\n          \"// Hash functions for Voronoi\",\n          \"vec2 hash22(vec2 p) {\",\n          \"  p = vec2(dot(p, vec2(127.1, 311.7)), dot(p, vec2(269.5, 183.3)));\",\n          \"  return fract(sin(p) * 43758.5453);\",\n          \"}\",\n          \"\",\n          \"// Voronoi distance for crack pattern\",\n          \"float voronoi(vec2 p) {\",\n          \"  vec2 ip = floor(p);\",\n          \"  vec2 fp = fract(p);\",\n          \"  float d1 = 8.0;\",\n          \"  float d2 = 8.0;\",\n          \"  for (int x = -1; x <= 1; x++) {\",\n          \"    for (int y = -1; y <= 1; y++) {\",\n          \"      vec2 neighbor = vec2(float(x), float(y));\",\n          \"      vec2 point = hash22(ip + neighbor);\",\n          \"      vec2 diff = neighbor + point - fp;\",\n          \"      float dist = length(diff);\",\n          \"      if (dist < d1) {\",\n          \"        d2 = d1;\",\n          \"        d1 = dist;\",\n          \"      } else if (dist < d2) {\",\n          \"        d2 = dist;\",\n          \"      }\",\n          \"    }\",\n          \"  }\",\n          \"  return d2 - d1;\",\n          \"}\",\n          \"\",\n          \"void main() {\",\n          \"  vec4 color = texture2D(tPanel, vUv);\",\n          \"  \",\n          \"  if (uCrackProgress <= 0.0) {\",\n          \"    gl_FragColor = color;\",\n          \"    return;\",\n          \"  }\",\n          \"  \",\n          \"  // Distance from center (in UV space, aspect-corrected)\",\n          \"  vec2 center = vec2(0.5, 0.5);\",\n          \"  vec2 uv_aspect = vec2((vUv.x - 0.5) * uAspect, vUv.y - 0.5);\",\n          \"  float distFromCenter = length(uv_aspect);\",\n          \"  \",\n          \"  // Crack wavefront: radiates outward based on progress\",\n          \"  float maxRadius = length(vec2(uAspect * 0.5, 0.5));\",\n          \"  float wavefront = uCrackProgress * maxRadius * 1.4;\",\n          \"  \",\n          \"  if (distFromCenter > wavefront) {\",\n          \"    gl_FragColor = color;\",\n          \"    return;\",\n          \"  }\",\n          \"  \",\n          \"  // Multi-scale Voronoi for cracks\",\n          \"  vec2 crackUV = vUv * vec2(uAspect, 1.0);\",\n          \"  float v1 = voronoi(crackUV * 8.0);\",\n          \"  float v2 = voronoi(crackUV * 16.0);\",\n          \"  float v3 = voronoi(crackUV * 4.0);\",\n          \"  \",\n          \"  // Blend scales based on distance from center\",\n          \"  float normalizedDist = distFromCenter / maxRadius;\",\n          \"  float crackPattern = mix(v1, v2, smoothstep(0.0, 0.5, normalizedDist));\",\n          \"  crackPattern = mix(crackPattern, v3, smoothstep(0.3, 0.8, normalizedDist) * 0.4);\",\n          \"  \",\n          \"  // Crack intensity: thinner = more crack-like\",\n          \"  float crackWidth = 0.04 + uCrackProgress * 0.02;\",\n          \"  float crack = smoothstep(crackWidth, 0.0, crackPattern);\",\n          \"  \",\n          \"  // Fade in based on wavefront proximity\",\n          \"  float waveFade = smoothstep(wavefront, wavefront * 0.6, distFromCenter);\",\n          \"  crack *= waveFade;\",\n          \"  \",\n          \"  // Impact point glow\",\n          \"  float impactGlow = exp(-distFromCenter * 6.0) * uCrackProgress * 0.6;\",\n          \"  \",\n          \"  // Refraction distortion along cracks\",\n          \"  vec2 distortUV = vUv;\",\n          \"  if (crack > 0.1) {\",\n          \"    vec2 offset = (hash22(floor(crackUV * 8.0)) - 0.5) * 0.008 * crack;\",\n          \"    distortUV += offset;\",\n          \"  }\",\n          \"  vec4 distortedColor = texture2D(tPanel, distortUV);\",\n          \"  \",\n          \"  // Composite: panel + bright crack lines + refraction\",\n          \"  vec3 crackColor = vec3(0.85, 0.92, 1.0);\",\n          \"  vec3 result = mix(distortedColor.rgb, crackColor, crack * 0.7);\",\n          \"  result += vec3(impactGlow * 0.3, impactGlow * 0.4, impactGlow * 0.6);\",\n          \"  \",\n          \"  // Glass surface highlight along cracks\",\n          \"  float highlight = crack * 0.15 * (1.0 - normalizedDist);\",\n          \"  result += vec3(highlight);\",\n          \"  \",\n          \"  gl_FragColor = vec4(result, 1.0);\",\n          \"}\",\n        ].join(\"\\n\"),\n        transparent: false,\n      });\n\n      var fullPlane = new THREE.Mesh(new THREE.PlaneGeometry(aspect, 1), crackShaderMaterial);\n      fullPlane.position.set(0, 0, 0);\n      scene.add(fullPlane);\n\n      // ── Panel B: static plane behind shards ────────────────────────────\n      var panelBMesh = new THREE.Mesh(\n        new THREE.PlaneGeometry(aspect, 1),\n        new THREE.MeshBasicMaterial({ map: texB, side: THREE.FrontSide }),\n      );\n      panelBMesh.position.set(0, 0, -0.5);\n      panelBMesh.visible = false;\n      scene.add(panelBMesh);\n\n      // ── Phase 3: Shard meshes ──────────────────────────────────────────\n      // Each shard is a THREE.Mesh with its own geometry from the Voronoi subdivision.\n      // UV mapping samples the correct region of panel A's texture.\n\n      var shardMeshes = [];\n      var shardPhysics = [];\n\n      for (var si = 0; si < shardData.length; si++) {\n        var sd = shardData[si];\n        var tris = sd.triangles;\n\n        // Build merged geometry for all triangles in this shard\n        var positions = [];\n        var uvs = [];\n\n        for (var ti = 0; ti < tris.length; ti++) {\n          var tri = tris[ti];\n          for (var vi = 0; vi < 3; vi++) {\n            // Convert from Voronoi space (x in [0,aspect], y in [0,1]) to mesh space\n            var px = tri[vi].x - aspect * 0.5;\n            var py = -(tri[vi].y - 0.5); // flip Y for Three.js\n            positions.push(px, py, 0);\n\n            // UV: map from Voronoi space to [0,1]\n            var u = tri[vi].x / aspect;\n            var v = 1.0 - tri[vi].y; // flip V\n            uvs.push(u, v);\n          }\n        }\n\n        if (positions.length < 9) continue;\n\n        var geo = new THREE.BufferGeometry();\n        geo.setAttribute(\"position\", new THREE.Float32BufferAttribute(positions, 3));\n        geo.setAttribute(\"uv\", new THREE.Float32BufferAttribute(uvs, 2));\n\n        var mat = new THREE.MeshBasicMaterial({\n          map: texA,\n          side: THREE.DoubleSide,\n          transparent: true,\n          opacity: 1.0,\n        });\n\n        var mesh = new THREE.Mesh(geo, mat);\n        mesh.visible = false;\n        scene.add(mesh);\n        shardMeshes.push(mesh);\n\n        // Physics state for this shard\n        // Direction outward from center + random upward kick\n        var fromCenterX = sd.centroidX - aspect * 0.5;\n        var fromCenterY = sd.centroidY - 0.5;\n        var fromCenterLen =\n          Math.sqrt(fromCenterX * fromCenterX + fromCenterY * fromCenterY) + 0.001;\n        var outDirX = fromCenterX / fromCenterLen;\n        var outDirY = fromCenterY / fromCenterLen;\n\n        // Initial velocity: outward + upward component + randomness\n        var speed = 0.3 + rng() * 0.7;\n        var upKick = 0.2 + rng() * 0.5;\n\n        shardPhysics.push({\n          // Centroid in mesh-space for pivot\n          cx: sd.centroidX - aspect * 0.5,\n          cy: -(sd.centroidY - 0.5),\n          // Velocity\n          vx: outDirX * speed * (0.5 + rng() * 0.8),\n          vy: -outDirY * speed * (0.3 + rng() * 0.6) + upKick,\n          vz: (rng() - 0.5) * 0.3,\n          // Angular velocity\n          rx: (rng() - 0.5) * 4.0,\n          ry: (rng() - 0.5) * 4.0,\n          rz: (rng() - 0.5) * 6.0,\n          // Current state (written by physics step)\n          posX: 0,\n          posY: 0,\n          posZ: 0,\n          rotX: 0,\n          rotY: 0,\n          rotZ: 0,\n          opacity: 1.0,\n          settled: false,\n        });\n      }\n\n      // ── Physics Update ─────────────────────────────────────────────────\n      var GRAVITY = -2.5;\n      var FLOOR_Y = -0.8;\n      var DAMPING = 0.6;\n      var FRICTION = 0.92;\n\n      function updateShardPhysics(t) {\n        // t is time since shatter start (0 at SHATTER_START)\n        var dt = 1 / 30; // fixed step for determinism\n        var steps = Math.floor(t / dt);\n\n        for (var i = 0; i < shardPhysics.length; i++) {\n          var sp = shardPhysics[i];\n\n          // Reset and simulate from zero for determinism\n          var px = 0,\n            py = 0,\n            pz = 0;\n          var rx = 0,\n            ry = 0,\n            rz = 0;\n          var vx = sp.vx,\n            vy = sp.vy,\n            vz = sp.vz;\n          var avx = sp.rx,\n            avy = sp.ry,\n            avz = sp.rz;\n          var settled = false;\n\n          for (var step = 0; step < steps && !settled; step++) {\n            // Apply gravity\n            vy += GRAVITY * dt;\n\n            // Update position\n            px += vx * dt;\n            py += vy * dt;\n            pz += vz * dt;\n\n            // Update rotation\n            rx += avx * dt;\n            ry += avy * dt;\n            rz += avz * dt;\n\n            // Floor collision (relative to shard centroid)\n            var worldY = sp.cy + py;\n            if (worldY < FLOOR_Y && vy < 0) {\n              py = FLOOR_Y - sp.cy;\n              vy = -vy * DAMPING;\n              vx *= FRICTION;\n              vz *= FRICTION;\n              avx *= FRICTION;\n              avy *= FRICTION;\n              avz *= FRICTION;\n\n              // Settle if velocity is very small\n              if (Math.abs(vy) < 0.05) {\n                vy = 0;\n                settled = true;\n              }\n            }\n          }\n\n          sp.posX = px;\n          sp.posY = py;\n          sp.posZ = pz;\n          sp.rotX = rx;\n          sp.rotY = ry;\n          sp.rotZ = rz;\n          sp.settled = settled;\n\n          // Fade out shards at the very end\n          var fadeDuration = DURATION - SHATTER_SETTLE;\n          var elapsed = t + SHATTER_START;\n          if (elapsed > SHATTER_SETTLE) {\n            sp.opacity = Math.max(0, 1.0 - (elapsed - SHATTER_SETTLE) / fadeDuration);\n          } else {\n            sp.opacity = 1.0;\n          }\n        }\n      }\n\n      // ── Render State ───────────────────────────────────────────────────\n      var renderState = {\n        phase: 0, // 0=clean, 1=cracking, 2=shattered\n        crackProgress: 0,\n        shardsVisible: false,\n        panelBOpacity: 0,\n      };\n\n      function renderFrame(time) {\n        // Phase determination\n        if (time < CRACK_START) {\n          renderState.phase = 0;\n        } else if (time < SHATTER_START) {\n          renderState.phase = 1;\n        } else {\n          renderState.phase = 2;\n        }\n\n        // Capture HTML panels to texture each frame\n        capturePanels();\n        texA.needsUpdate = true;\n        texB.needsUpdate = true;\n\n        if (renderState.phase === 0) {\n          // Clean glass: show full plane, no cracks\n          fullPlane.visible = true;\n          crackShaderMaterial.uniforms.uCrackProgress.value = 0;\n          crackShaderMaterial.uniforms.uTime.value = time;\n          panelBMesh.visible = false;\n\n          // Hide all shards\n          for (var i = 0; i < shardMeshes.length; i++) {\n            shardMeshes[i].visible = false;\n          }\n        } else if (renderState.phase === 1) {\n          // Cracking: show full plane with crack shader\n          fullPlane.visible = true;\n          var crackT = (time - CRACK_START) / (CRACK_END - CRACK_START);\n          crackT = Math.max(0, Math.min(1, crackT));\n          // Ease in: slow start, accelerating\n          crackT = crackT * crackT;\n          crackShaderMaterial.uniforms.uCrackProgress.value = crackT;\n          crackShaderMaterial.uniforms.uTime.value = time;\n          panelBMesh.visible = false;\n\n          for (var i2 = 0; i2 < shardMeshes.length; i2++) {\n            shardMeshes[i2].visible = false;\n          }\n        } else {\n          // Shattered: hide full plane, show shards + panel B\n          fullPlane.visible = false;\n          panelBMesh.visible = true;\n\n          // Panel B fade-in\n          var panelBFadeT = Math.min(1, (time - SHATTER_START) / 1.5);\n          panelBFadeT = panelBFadeT * panelBFadeT * (3 - 2 * panelBFadeT); // smoothstep\n          panelBMesh.material.opacity = panelBFadeT;\n          panelBMesh.material.transparent = true;\n\n          // Update shard physics\n          var shatterTime = time - SHATTER_START;\n          updateShardPhysics(shatterTime);\n\n          // Apply physics to shard meshes\n          for (var i3 = 0; i3 < shardMeshes.length; i3++) {\n            var sm = shardMeshes[i3];\n            var sp = shardPhysics[i3];\n\n            sm.visible = true;\n\n            // Set position: centroid + physics offset\n            sm.position.set(sp.posX, sp.posY, sp.posZ + 0.01);\n            sm.rotation.set(sp.rotX, sp.rotY, sp.rotZ);\n\n            // Set pivot point to centroid\n            sm.position.x +=\n              sp.cx * (1 - Math.cos(sp.rotZ)) + sp.cy * Math.sin(sp.rotZ) - sp.cx + sp.posX;\n            sm.position.y +=\n              -sp.cx * Math.sin(sp.rotZ) + sp.cy * (1 - Math.cos(sp.rotZ)) - sp.cy + sp.posY;\n\n            // Simpler: just translate by physics offset, rotate around centroid\n            sm.position.set(sp.posX, sp.posY, sp.posZ + 0.01);\n            sm.rotation.set(sp.rotX, sp.rotY, sp.rotZ);\n\n            sm.material.opacity = sp.opacity;\n            sm.material.transparent = sp.opacity < 1.0;\n          }\n        }\n\n        renderer.render(scene, camera);\n      }\n\n      // ── GSAP Timeline ──────────────────────────────────────────────────\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      // Driver tween: spans full duration, renders each frame via onUpdate\n      var timeProxy = { t: 0 };\n      tl.to(\n        timeProxy,\n        {\n          t: DURATION,\n          duration: DURATION,\n          ease: \"none\",\n          onUpdate: function () {\n            renderFrame(timeProxy.t);\n          },\n        },\n        0,\n      );\n\n      window.__timelines[\"glass-shatter\"] = tl;\n\n      // ── Deferred Init ──────────────────────────────────────────────────\n      setTimeout(function () {\n        capturePanels();\n        texA.needsUpdate = true;\n        texB.needsUpdate = true;\n        tl.seek(0);\n      }, 0);\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vfx-text-cursor.json b/docs/public/catalog/blocks/vfx-text-cursor.json
new file mode 100644
index 0000000000..628d54865e
--- /dev/null
+++ b/docs/public/catalog/blocks/vfx-text-cursor.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>VFX Text Cursor</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n  </head>\n  <body style=\"margin: 0; overflow: hidden\">\n    <div\n      id=\"vfx-text-cursor\"\n      data-composition-id=\"vfx-text-cursor\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-root=\"true\"\n    >\n      <canvas id=\"vfx-canvas\" width=\"1920\" height=\"1080\" aria-hidden=\"true\"></canvas>\n      <div class=\"stage-logo-wrap\" aria-hidden=\"true\">\n        <svg\n          class=\"stage-logo\"\n          width=\"263\"\n          height=\"79\"\n          viewBox=\"0 0 263 79\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n        >\n          <path\n            d=\"M0 16.6738H4.96V23.3838H11.53V16.6738H16.49V35.4538H11.53V27.6738H4.96V35.4538H0V16.6738Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M17.8899 28.0137C17.8899 23.4237 21.2399 20.0237 25.7999 20.0237C30.0099 20.0237 32.9399 23.0837 32.9399 27.5637C32.9399 28.2037 32.8599 28.8237 32.8299 29.3337H22.6099C23.0399 31.1337 24.6199 32.1237 27.1399 32.1237C28.7199 32.1237 30.2199 31.7237 31.2999 31.0237V34.6737C30.1699 35.3937 28.2999 35.8537 26.3599 35.8537C21.2599 35.8537 17.8799 32.6037 17.8799 28.0237L17.8899 28.0137ZM28.5699 26.1937C28.4899 24.5337 27.3899 23.5637 25.7499 23.5637C24.1099 23.5637 22.9599 24.5337 22.6099 26.1937H28.5699Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M37.85 33.8638L32 20.4238H37.29L40.46 28.1538L43.6 20.4238H48.48L40.33 39.5738H35.26L37.86 33.8638H37.85Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M48.1797 26.1138C48.1797 20.4238 52.7097 16.2438 58.9397 16.2438C61.2997 16.2438 63.5297 16.8038 64.8197 17.7238V21.9338C63.5597 20.9138 61.6797 20.2938 59.7497 20.2938C55.7797 20.2938 53.2597 22.6238 53.2597 26.1438C53.2597 29.6638 55.5697 31.8838 58.8897 31.8838C59.6397 31.8838 60.4997 31.7538 61.1997 31.5038V27.8838H57.4697V24.2338H65.5197V33.7038C63.6697 35.0938 61.1997 35.8738 58.5997 35.8738C52.5397 35.8738 48.1897 31.7438 48.1897 26.1138H48.1797Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M66.6604 28.0137C66.6604 23.4237 70.0104 20.0237 74.5704 20.0237C78.7804 20.0237 81.7104 23.0837 81.7104 27.5637C81.7104 28.2037 81.6304 28.8237 81.6004 29.3337H71.3804C71.8104 31.1337 73.3904 32.1237 75.9104 32.1237C77.4904 32.1237 78.9904 31.7237 80.0704 31.0237V34.6737C78.9404 35.3937 77.0704 35.8537 75.1304 35.8537C70.0304 35.8537 66.6504 32.6037 66.6504 28.0237L66.6604 28.0137ZM77.3404 26.1937C77.2604 24.5337 76.1604 23.5637 74.5204 23.5637C72.8804 23.5637 71.7304 24.5337 71.3804 26.1937H77.3404Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M82.9697 20.4238H87.8497V22.4138C88.7597 20.9638 90.3497 20.1038 92.3297 20.1038C95.4997 20.1038 97.3997 22.3338 97.3997 25.8138V35.4438H92.5197V26.8638C92.5197 25.0438 91.8197 24.1838 90.4797 24.1838C88.9497 24.1838 87.8497 25.3638 87.8497 27.2638V35.4438H82.9697V20.4238Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M195.219 26.1937L213.529 38.9937C216.009 40.7237 220.239 38.7637 221.009 35.5337L228.419 4.33374C229.189 1.10374 225.879 -0.856262 222.589 0.873738L198.199 13.6737C192.649 16.5837 191.059 23.2837 195.219 26.1937Z\"\n            fill=\"url(#paint0_linear_2204_3044)\"\n          />\n          <path\n            d=\"M256.97 25.9638L232.58 38.7638C229.28 40.4938 225.98 38.5338 226.75 35.3038L234.16 4.10376C234.93 0.873757 239.16 -1.08624 241.64 0.643757L259.95 13.4438C264.12 16.3538 262.52 23.0538 256.97 25.9638Z\"\n            fill=\"url(#paint1_linear_2204_3044)\"\n          />\n          <path\n            d=\"M252.115 72.502C250.192 72.502 248.268 72.0838 246.93 71.3728V65.6853C247.808 66.3126 248.937 66.689 250.066 66.689C251.739 66.689 252.784 65.8526 252.784 64.5562C252.784 63.8452 252.492 63.0925 251.655 62.0888L249.899 59.956C248.728 58.4923 248.226 56.9031 248.226 55.2721C248.226 51.0065 251.864 48.0791 256.883 48.0791C258.723 48.0791 260.438 48.4555 261.65 49.0828V54.7703C260.898 54.2266 259.768 53.8503 258.723 53.8503C257.092 53.8503 256.046 54.6867 256.046 55.8994C256.046 56.6522 256.423 57.405 257.259 58.4086L258.974 60.4996C260.187 62.047 260.73 63.5943 260.73 65.2671C260.73 69.5746 257.05 72.502 252.115 72.502Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M236.338 72.6269C228.392 72.6269 223.123 67.5667 223.123 60.4155C223.123 53.2643 228.351 47.9531 235.46 47.9531C242.026 47.9531 246.584 52.7206 246.584 59.7045C246.584 60.7082 246.459 61.6701 246.417 62.4647H230.483C231.152 65.2666 233.62 66.8139 237.551 66.8139C240.018 66.8139 242.36 66.1866 244.033 65.0993V70.7868C242.277 71.916 239.349 72.6269 236.338 72.6269ZM230.483 57.5717H239.767C239.642 54.9789 237.927 53.4734 235.376 53.4734C232.867 53.4734 231.027 54.9789 230.483 57.5717Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M184.998 72.0001V48.5809H192.609V51.6756C193.989 49.4173 196.373 48.0791 199.426 48.0791C202.521 48.0791 204.779 49.5428 206.075 52.052C207.497 49.5846 210.132 48.0791 213.352 48.0791C218.245 48.0791 221.214 51.592 221.214 57.0286V72.0001H213.603V58.5341C213.603 55.774 212.557 54.4357 210.634 54.4357C208.459 54.4357 206.912 56.234 206.912 59.0778V72.0001H199.3V58.5341C199.3 55.774 198.255 54.4357 196.373 54.4357C194.157 54.4357 192.609 56.234 192.609 59.0778V72.0001H184.998Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M167.26 72.4602C161.154 72.4602 156.596 67.2745 156.596 60.3324C156.596 53.3066 161.196 48.0791 167.302 48.0791C170.438 48.0791 173.031 49.4173 174.536 51.8429V48.5809H182.148V72.0001H174.536V68.4873C173.031 71.0801 170.438 72.4602 167.26 72.4602ZM169.393 66.1872C172.78 66.1872 174.536 63.3434 174.536 60.876V59.6632C174.536 57.2377 172.78 54.4357 169.393 54.4357C166.298 54.4357 164.207 56.7777 164.207 60.2905C164.207 63.7616 166.298 66.1872 169.393 66.1872Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M141.258 72V48.5808H148.827V52.9719C149.831 50.0445 151.796 48.2881 154.306 48.2881C154.975 48.2881 155.602 48.4135 156.02 48.6645V55.8993C155.435 55.5648 154.724 55.4393 153.887 55.4393C150.751 55.4393 148.869 57.6558 148.869 61.2941V72H141.258Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M122.643 71.9996V42.7256H139.371V49.124H130.379V54.477H138.911V60.5827H130.379V71.9996H122.643Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M105.645 72V48.5808H113.214V52.9719C114.218 50.0445 116.183 48.2881 118.692 48.2881C119.361 48.2881 119.989 48.4135 120.407 48.6645V55.8993C119.822 55.5648 119.111 55.4393 118.274 55.4393C115.138 55.4393 113.256 57.6558 113.256 61.2941V72H105.645Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M93.4397 72.6269C85.4939 72.6269 80.2246 67.5667 80.2246 60.4155C80.2246 53.2643 85.4521 47.9531 92.5615 47.9531C99.1273 47.9531 103.686 52.7206 103.686 59.7045C103.686 60.7082 103.56 61.6701 103.518 62.4647H87.5849C88.2541 65.2666 90.7214 66.8139 94.6525 66.8139C97.1199 66.8139 99.4618 66.1866 101.135 65.0993V70.7868C99.3782 71.916 96.4508 72.6269 93.4397 72.6269ZM87.5849 57.5717H96.869C96.7435 54.9789 95.0289 53.4734 92.4779 53.4734C89.9687 53.4734 88.1286 54.9789 87.5849 57.5717Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M53.3711 78.4404V48.5809H60.9823V52.052C62.446 49.501 65.0807 48.0791 68.3008 48.0791C74.3647 48.0791 78.9649 53.3066 78.9649 60.2487C78.9649 67.2745 74.3229 72.4602 68.259 72.4602C65.0807 72.4602 62.446 71.1637 60.9823 68.78V78.4404H53.3711ZM66.1262 66.1872C69.2627 66.1872 71.3119 63.7616 71.3119 60.2905C71.3119 56.8195 69.2627 54.4357 66.1262 54.4357C62.7388 54.4357 60.9823 57.2795 60.9823 59.7051V60.9178C60.9823 63.3434 62.7388 66.1872 66.1262 66.1872Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M31.9606 78.4405L36.0171 69.5329L26.9004 48.5811H35.1389L40.0737 60.6252L44.9666 48.5811H52.5779L39.8646 78.4405H31.9606Z\"\n            fill=\"white\"\n          />\n          <path\n            d=\"M0 71.9996V42.7256H7.7367V53.1806H17.9826V42.7256H25.7193V71.9996H17.9826V59.8718H7.7367V71.9996H0Z\"\n            fill=\"white\"\n          />\n          <defs>\n            <linearGradient\n              id=\"paint0_linear_2204_3044\"\n              x1=\"225.869\"\n              y1=\"-3.06048e-05\"\n              x2=\"222.845\"\n              y2=\"37.4821\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop stop-color=\"#06E3FA\" />\n              <stop offset=\"1\" stop-color=\"#4FDB5E\" />\n            </linearGradient>\n            <linearGradient\n              id=\"paint1_linear_2204_3044\"\n              x1=\"230.87\"\n              y1=\"39\"\n              x2=\"244.661\"\n              y2=\"6.30303\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop stop-color=\"#06E3FA\" />\n              <stop offset=\"1\" stop-color=\"#4FDB5E\" />\n            </linearGradient>\n          </defs>\n        </svg>\n      </div>\n\n      <div id=\"next-card\" aria-hidden=\"true\">\n        <h1 id=\"phrase-a\" class=\"card-text\">\n          <span\n            ><span class=\"headline-word html-word\"\n              ><span class=\"html-type\"></span><span class=\"html-caret\">|</span></span\n            >\n            <span class=\"headline-word supporting-word\">in</span></span\n          >\n          <span><span class=\"headline-word supporting-word canvas-word\">canvas</span></span>\n        </h1>\n        <h2 id=\"phrase-b\" class=\"card-text availability\">\n          <span>Now available</span>\n          <span>in HyperFrames</span>\n        </h2>\n      </div>\n\n      <!-- Driver clip -->\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n\n      <style>\n        @import url(\"https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@800;900&display=block\");\n\n        [data-composition-id=\"vfx-text-cursor\"] {\n          position: relative;\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          background: #000000;\n          font-family: Inter, \"Arial Black\", Arial, sans-serif;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] #vfx-canvas {\n          position: absolute;\n          inset: 0;\n          width: 1920px;\n          height: 1080px;\n          z-index: 1;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .stage-logo-wrap {\n          position: absolute;\n          left: 420px;\n          top: 369.8px;\n          z-index: 2;\n          width: 1080px;\n          height: 324.4px;\n          opacity: 0;\n          filter: drop-shadow(0 0 22px rgba(73, 242, 255, 0.12));\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .stage-logo {\n          display: block;\n          width: 100%;\n          height: auto;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] #next-card {\n          position: absolute;\n          left: 120px;\n          top: 67.5px;\n          width: 1680px;\n          height: 945px;\n          padding: 96px 126px;\n          box-sizing: border-box;\n          border-radius: 56px;\n          background: linear-gradient(\n            160deg,\n            rgba(255, 255, 255, 0.11) 0%,\n            rgba(255, 255, 255, 0.045) 42%,\n            rgba(255, 255, 255, 0.018) 70%,\n            rgba(255, 255, 255, 0.075) 100%\n          );\n          backdrop-filter: blur(14px) saturate(1.12);\n          -webkit-backdrop-filter: blur(14px) saturate(1.12);\n          border: 1px solid rgba(255, 255, 255, 0.17);\n          box-shadow:\n            0 30px 90px rgba(0, 0, 0, 0.42),\n            inset 0 1px 0 rgba(255, 255, 255, 0.22);\n          transform-origin: 50% 50%;\n          z-index: 3;\n          opacity: 0;\n          overflow: hidden;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] #next-card::before {\n          content: \"\";\n          position: absolute;\n          inset: 0;\n          background:\n            radial-gradient(circle at 18% 78%, rgba(73, 242, 255, 0.14), transparent 38%),\n            radial-gradient(circle at 82% 22%, rgba(255, 79, 216, 0.11), transparent 34%);\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] #next-card::after {\n          content: \"\";\n          position: absolute;\n          inset: 1px;\n          border-radius: 55px;\n          box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);\n          pointer-events: none;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .card-text {\n          position: absolute;\n          z-index: 1;\n          left: 126px;\n          right: 126px;\n          top: 96px;\n          bottom: 96px;\n          margin: 0;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          justify-content: center;\n          color: #ffffff;\n          font-size: 292px;\n          line-height: 0.88;\n          font-weight: 900;\n          letter-spacing: 0;\n          text-align: center;\n          text-shadow:\n            -5px 0 18px rgba(73, 242, 255, 0.38),\n            5px 0 18px rgba(255, 79, 216, 0.28),\n            0 24px 80px rgba(0, 0, 0, 0.58);\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .card-text > span {\n          display: block;\n          white-space: nowrap;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .headline-word {\n          display: inline-block;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .html-word {\n          position: relative;\n          width: 1.78em;\n          margin-right: 0.08em;\n          text-align: left;\n          color: #f6ff7a;\n          font-family: \"Big Shoulders Display\", Impact, \"Arial Black\", sans-serif;\n          font-weight: 900;\n          letter-spacing: 0.015em;\n          text-transform: uppercase;\n          text-shadow:\n            -6px 0 16px rgba(73, 242, 255, 0.48),\n            6px 0 16px rgba(255, 79, 216, 0.34),\n            0 0 24px rgba(246, 255, 122, 0.34),\n            0 24px 72px rgba(0, 0, 0, 0.56);\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .html-type,\n        [data-composition-id=\"vfx-text-cursor\"] .html-caret {\n          display: inline-block;\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .html-caret {\n          position: absolute;\n          left: 0;\n          top: 0;\n          width: auto;\n          margin-left: 0;\n          opacity: 0;\n          color: #f6ff7a;\n          text-shadow:\n            0 0 12px rgba(246, 255, 122, 0.7),\n            -4px 0 14px rgba(73, 242, 255, 0.36),\n            4px 0 14px rgba(255, 79, 216, 0.26);\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .canvas-word {\n          color: #ffffff;\n          text-shadow:\n            -4px 0 18px rgba(246, 255, 122, 0.26),\n            5px 0 18px rgba(255, 79, 216, 0.25),\n            0 22px 72px rgba(0, 0, 0, 0.58);\n        }\n\n        [data-composition-id=\"vfx-text-cursor\"] .availability {\n          font-size: 178px;\n          line-height: 0.94;\n        }\n      </style>\n\n      <script>\n        window.__timelines = window.__timelines || {};\n\n        (function () {\n          var WIDTH = 1920;\n          var HEIGHT = 1080;\n          var LOGO_VIEWBOX = { width: 263, height: 79 };\n          var LOGO_WIDTH = 1080;\n          var LOGO_SCALE = LOGO_WIDTH / LOGO_VIEWBOX.width;\n          var LOGO_HEIGHT = LOGO_VIEWBOX.height * LOGO_SCALE;\n          var LOGO_X = (WIDTH - LOGO_WIDTH) * 0.5;\n          var LOGO_Y = (HEIGHT - LOGO_HEIGHT) * 0.5 - 8;\n          var root = document.querySelector('[data-composition-id=\"vfx-text-cursor\"]');\n          var canvas = root.querySelector(\"#vfx-canvas\");\n          var nextCard = root.querySelector(\"#next-card\");\n          var phraseA = root.querySelector(\"#phrase-a\");\n          var phraseB = root.querySelector(\"#phrase-b\");\n          var htmlWord = root.querySelector(\".html-word\");\n          var htmlType = root.querySelector(\".html-type\");\n          var htmlCaret = root.querySelector(\".html-caret\");\n          var supportingWords = Array.from(root.querySelectorAll(\".supporting-word\"));\n          var stageLogo = root.querySelector(\".stage-logo-wrap\");\n          var gl = canvas.getContext(\"webgl\", {\n            premultipliedAlpha: false,\n            preserveDrawingBuffer: true,\n          });\n          var state = { progress: 0, logoY: 760, effectMix: 0, logoScale: 1 };\n          var mouse = { x: 0, y: HEIGHT * 0.5 };\n          var entryEase = function (t) {\n            return -0.806 * t * t + 1.806 * t;\n          };\n          var htmlText = \"HTML\";\n\n          function getTitleOffset() {\n            var cardRect = nextCard.getBoundingClientRect();\n            htmlType.textContent = htmlText;\n            var htmlRect = htmlType.getBoundingClientRect();\n            htmlType.textContent = \"\";\n            return {\n              x: cardRect.left + cardRect.width * 0.5 - (htmlRect.left + htmlRect.width * 0.5),\n              y: cardRect.top + cardRect.height * 0.5 - (htmlRect.top + htmlRect.height * 0.5),\n            };\n          }\n\n          function addTextCardSequence(tl, htmlStart) {\n            var typeStep = 0.085;\n            var titleHold = 0.25;\n            var typeEnd = htmlStart + (htmlText.length - 1) * typeStep;\n            var slideStart = typeEnd + titleHold;\n            var slideEnd = slideStart + 0.05;\n            var titleOffset = getTitleOffset();\n\n            tl.call(\n              function () {\n                htmlType.textContent = \"\";\n                htmlCaret.style.left = \"0px\";\n              },\n              [],\n              0,\n            );\n            tl.set(\n              htmlWord,\n              { x: titleOffset.x, y: titleOffset.y, scale: 1.8, transformOrigin: \"50% 50%\" },\n              0,\n            );\n            tl.set(htmlCaret, { opacity: 0 }, 0);\n            tl.set(htmlCaret, { opacity: 1 }, htmlStart - 0.05);\n\n            for (var i = 1; i <= htmlText.length; i += 1) {\n              (function (idx) {\n                tl.call(\n                  function () {\n                    htmlType.textContent = htmlText.slice(0, idx);\n                    htmlCaret.style.left = htmlType.offsetWidth + \"px\";\n                    if (idx === htmlText.length) {\n                      htmlCaret.style.opacity = \"0\";\n                    }\n                  },\n                  [],\n                  htmlStart + (idx - 1) * typeStep,\n                );\n              })(i);\n            }\n\n            tl.to(\n              htmlWord,\n              {\n                x: 0,\n                y: 0,\n                scale: 1,\n                duration: 0.05,\n                ease: \"power2.out\",\n              },\n              slideStart,\n            );\n            tl.to(\n              supportingWords,\n              {\n                opacity: 1,\n                y: 0,\n                scale: 1,\n                filter: \"blur(0px)\",\n                duration: 0.42,\n                stagger: 0.08,\n                ease: \"expo.out\",\n              },\n              slideEnd,\n            );\n\n            return slideEnd + 0.42 + (supportingWords.length - 1) * 0.08;\n          }\n\n          if (!gl) {\n            var ctx = canvas.getContext(\"2d\");\n            ctx.fillStyle = \"#000\";\n            ctx.fillRect(0, 0, WIDTH, HEIGHT);\n\n            var tl = gsap.timeline({ paused: true });\n            tl.set(nextCard, { opacity: 0, scale: 1.45, filter: \"blur(14px)\" }, 0);\n            tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: \"blur(0px)\" }, 0);\n            tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: \"blur(10px)\" }, 0);\n            tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: \"blur(8px)\" }, 0);\n            tl.to(state, { logoY: 0, duration: 1, ease: \"power4.out\" }, 0);\n            tl.set(nextCard, { opacity: 1, scale: 1.45, filter: \"blur(14px)\" }, 3.1);\n            tl.to(\n              nextCard,\n              { scale: 0.88, filter: \"blur(0px)\", duration: 0.9, ease: entryEase },\n              3.1,\n            );\n            tl.to(\n              nextCard,\n              { scale: 0.84, filter: \"blur(1.5px)\", duration: 0.4, ease: \"none\" },\n              4.0,\n            );\n            var phraseAReady = addTextCardSequence(tl, 3.15);\n            var phraseAExit = phraseAReady + 0.5;\n            var phraseBStart = phraseAExit + 0.36;\n            tl.to(\n              phraseA,\n              { x: -1480, filter: \"blur(8px)\", duration: 0.36, ease: \"power2.in\" },\n              phraseAExit,\n            );\n            tl.set(phraseA, { opacity: 0 }, phraseBStart);\n            tl.set(\n              phraseB,\n              { opacity: 1, x: 1480, y: 0, scale: 1, filter: \"blur(8px)\" },\n              phraseBStart,\n            );\n            tl.to(\n              phraseB,\n              { x: 0, filter: \"blur(0px)\", duration: 0.48, ease: \"expo.out\" },\n              phraseBStart,\n            );\n            window.__timelines[\"vfx-text-cursor\"] = tl;\n            return;\n          }\n\n          var vertexSource = [\n            \"attribute vec2 position;\",\n            \"varying vec2 vUv;\",\n            \"void main() {\",\n            \"  vUv = position * 0.5 + 0.5;\",\n            \"  gl_Position = vec4(position, 0.0, 1.0);\",\n            \"}\",\n          ].join(\"\\n\");\n\n          var fragmentSource = [\n            \"precision highp float;\",\n            \"varying vec2 vUv;\",\n            \"uniform vec2 resolution;\",\n            \"uniform vec2 mouse;\",\n            \"uniform float logoY;\",\n            \"uniform float logoScale;\",\n            \"uniform float effectMix;\",\n            \"uniform sampler2D src;\",\n            \"uniform sampler2D colorSrc;\",\n            \"\",\n            \"#define PI 3.141593\",\n            \"#define SAMPLES 112.0\",\n            \"\",\n            \"float hash(vec2 p) {\",\n            \"  return fract(sin(dot(p, vec2(489.0, 589.0))) * 492.0) * 2.0 - 1.0;\",\n            \"}\",\n            \"\",\n            \"float hash(vec3 p) {\",\n            \"  return fract(sin(dot(p, vec3(489.0, 589.0, 58.0))) * 492.0) * 2.0 - 1.0;\",\n            \"}\",\n            \"\",\n            \"vec2 hash2(vec3 p) {\",\n            \"  return vec2(hash(p), hash(p + 1.0));\",\n            \"}\",\n            \"\",\n            \"vec4 readMask(vec2 uv) {\",\n            \"  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {\",\n            \"    return vec4(0.0);\",\n            \"  }\",\n            \"  return texture2D(src, uv);\",\n            \"}\",\n            \"\",\n            \"vec4 readColor(vec2 uv) {\",\n            \"  if (uv.x < 0.0 || uv.x > 1.0 || uv.y < 0.0 || uv.y > 1.0) {\",\n            \"    return vec4(0.0);\",\n            \"  }\",\n            \"  return texture2D(colorSrc, uv);\",\n            \"}\",\n            \"\",\n            \"vec3 spectrum(float x) {\",\n            \"  return cos((x - vec3(0.0, 0.5, 1.0)) * vec3(0.6, 1.0, 0.5) * PI);\",\n            \"}\",\n            \"\",\n            \"void main() {\",\n            \"  vec2 uv = vUv;\",\n            \"  vec2 logoCenter = vec2(0.5, 0.5);\",\n            \"  vec2 logoUv = (uv - logoCenter) / logoScale + logoCenter + vec2(0.0, logoY / resolution.y);\",\n            \"  float mask = readMask(logoUv).r;\",\n            \"  vec4 logo = readColor(logoUv);\",\n            \"  vec2 p = uv * 2.0 - 1.0;\",\n            \"  p.x *= resolution.x / resolution.y;\",\n            \"\",\n            \"  vec2 mp = mouse / resolution;\",\n            \"  mp.y = 1.0 - mp.y;\",\n            \"  mp = mp * 2.0 - 1.0;\",\n            \"  mp.x *= resolution.x / resolution.y;\",\n            \"\",\n            \"  vec2 rp = p;\",\n            \"  vec2 d = (mp - p) / SAMPLES;\",\n            \"  float acc = 0.0;\",\n            \"\",\n            \"  for (float i = 0.0; i < SAMPLES; i++) {\",\n            \"    rp += d;\",\n            \"    rp += hash2(vec3(rp, i)) * 0.5 / SAMPLES;\",\n            \"\",\n            \"    vec2 uv2 = rp;\",\n            \"    uv2.x /= resolution.x / resolution.y;\",\n            \"    uv2 = uv2 * 0.5 + 0.5;\",\n            \"    vec2 rayLogoUv = (uv2 - logoCenter) / logoScale + logoCenter + vec2(0.0, logoY / resolution.y);\",\n            \"    acc += readMask(rayLogoUv).r / SAMPLES;\",\n            \"  }\",\n            \"\",\n            \"  vec4 c = vec4(0.0, 0.0, 0.0, 1.0);\",\n            \"  c -= acc * 0.24;\",\n            \"  c += vec4(spectrum(cos(acc * 4.9)), 1.0) * acc * 3.65;\",\n            \"  c.rgb = max(c.rgb - 0.035, 0.0);\",\n            \"  c.rgb *= 1.16;\",\n            \"  float cursorX = mouse.x / resolution.x;\",\n            \"  float sweep = exp(-pow((uv.x - cursorX) * 6.2, 2.0));\",\n            \"  float textProximity = smoothstep(0.006, 0.34, acc);\",\n            \"  float longRay = smoothstep(0.004, 0.18, acc);\",\n            \"  vec3 sweepColor = vec3(0.14, 0.65, 0.85) + spectrum(cursorX * 1.8) * 0.28;\",\n            \"  c.rgb += sweepColor * sweep * (0.34 + textProximity * 2.35);\",\n            \"  c.rgb += spectrum(cursorX + acc * 2.0) * longRay * 0.58;\",\n            \"  c.rgb += logo.rgb * acc * 1.18;\",\n            \"  c.rgb += logo.rgb * sweep * mask * 0.92;\",\n            \"  c.rgb *= effectMix;\",\n            \"  c.rgb = mix(c.rgb, logo.rgb, smoothstep(0.02, 0.75, logo.a));\",\n            \"  c.rgb += vec3(1.0) * smoothstep(0.04, 0.38, mask) * 0.12 * effectMix;\",\n            \"  float grain = hash(vec3(uv.xyy + mouse.x * 0.0007));\",\n            \"  float logoDust = smoothstep(0.02, 0.38, acc) + smoothstep(0.03, 0.22, mask);\",\n            \"  c.rgb += grain * 0.07 * (0.42 + logoDust) * effectMix;\",\n            \"  c.rgb += spectrum(grain + cursorX) * abs(grain) * 0.045 * smoothstep(0.02, 0.5, acc) * effectMix;\",\n            \"  c.a = 1.0;\",\n            \"  gl_FragColor = c;\",\n            \"}\",\n          ].join(\"\\n\");\n\n          function compile(type, source) {\n            var shader = gl.createShader(type);\n            gl.shaderSource(shader, source);\n            gl.compileShader(shader);\n            if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {\n              throw new Error(gl.getShaderInfoLog(shader));\n            }\n            return shader;\n          }\n\n          var program = gl.createProgram();\n          gl.attachShader(program, compile(gl.VERTEX_SHADER, vertexSource));\n          gl.attachShader(program, compile(gl.FRAGMENT_SHADER, fragmentSource));\n          gl.linkProgram(program);\n          if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {\n            throw new Error(gl.getProgramInfoLog(program));\n          }\n\n          var mask = document.createElement(\"canvas\");\n          mask.width = WIDTH;\n          mask.height = HEIGHT;\n          var maskCtx = mask.getContext(\"2d\");\n          var colorMask = document.createElement(\"canvas\");\n          colorMask.width = WIDTH;\n          colorMask.height = HEIGHT;\n          var colorCtx = colorMask.getContext(\"2d\");\n\n          function parseOffset(value) {\n            if (!value) return 0;\n            return value.indexOf(\"%\") > -1 ? parseFloat(value) / 100 : parseFloat(value);\n          }\n\n          function makeFill(ctx, fill) {\n            if (!fill || fill === \"none\") return null;\n            var match = fill.match(/^url\\(#(.+)\\)$/);\n            if (!match) return fill;\n\n            var gradient = root.querySelector(\"#\" + match[1]);\n            if (!gradient) return \"#ffffff\";\n\n            var x1 = parseFloat(gradient.getAttribute(\"x1\") || \"0\");\n            var y1 = parseFloat(gradient.getAttribute(\"y1\") || \"0\");\n            var x2 = parseFloat(gradient.getAttribute(\"x2\") || \"0\");\n            var y2 = parseFloat(gradient.getAttribute(\"y2\") || \"0\");\n            var canvasGradient = ctx.createLinearGradient(x1, y1, x2, y2);\n            gradient.querySelectorAll(\"stop\").forEach(function (stop) {\n              var offset = parseOffset(stop.getAttribute(\"offset\") || \"0\");\n              var color = stop.getAttribute(\"stop-color\") || \"#ffffff\";\n              canvasGradient.addColorStop(Math.max(0, Math.min(1, offset)), color);\n            });\n            return canvasGradient;\n          }\n\n          function drawLogoMasks() {\n            maskCtx.clearRect(0, 0, WIDTH, HEIGHT);\n            colorCtx.clearRect(0, 0, WIDTH, HEIGHT);\n            maskCtx.save();\n            colorCtx.save();\n            maskCtx.translate(LOGO_X, LOGO_Y);\n            colorCtx.translate(LOGO_X, LOGO_Y);\n            maskCtx.scale(LOGO_SCALE, LOGO_SCALE);\n            colorCtx.scale(LOGO_SCALE, LOGO_SCALE);\n            maskCtx.fillStyle = \"#fff\";\n\n            root.querySelectorAll(\".stage-logo path[d]\").forEach(function (path) {\n              var shape = new Path2D(path.getAttribute(\"d\"));\n              var fill = makeFill(colorCtx, path.getAttribute(\"fill\"));\n              maskCtx.fill(shape);\n              if (fill) {\n                colorCtx.fillStyle = fill;\n                colorCtx.fill(shape);\n              }\n            });\n\n            maskCtx.restore();\n            colorCtx.restore();\n          }\n          drawLogoMasks();\n\n          function createTexture(source) {\n            var texture = gl.createTexture();\n            gl.bindTexture(gl.TEXTURE_2D, texture);\n            gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);\n            gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, source);\n            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n            gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n            return texture;\n          }\n\n          var texture = createTexture(mask);\n          var colorTexture = createTexture(colorMask);\n\n          var buffer = gl.createBuffer();\n          gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n          gl.bufferData(\n            gl.ARRAY_BUFFER,\n            new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]),\n            gl.STATIC_DRAW,\n          );\n\n          var positionLoc = gl.getAttribLocation(program, \"position\");\n          var resolutionLoc = gl.getUniformLocation(program, \"resolution\");\n          var mouseLoc = gl.getUniformLocation(program, \"mouse\");\n          var logoYLoc = gl.getUniformLocation(program, \"logoY\");\n          var logoScaleLoc = gl.getUniformLocation(program, \"logoScale\");\n          var effectMixLoc = gl.getUniformLocation(program, \"effectMix\");\n          var srcLoc = gl.getUniformLocation(program, \"src\");\n          var colorSrcLoc = gl.getUniformLocation(program, \"colorSrc\");\n\n          function render() {\n            mouse.x = state.progress * WIDTH;\n            mouse.y = HEIGHT * 0.5;\n\n            gl.viewport(0, 0, WIDTH, HEIGHT);\n            gl.clearColor(0, 0, 0, 1);\n            gl.clear(gl.COLOR_BUFFER_BIT);\n            gl.useProgram(program);\n            gl.bindBuffer(gl.ARRAY_BUFFER, buffer);\n            gl.enableVertexAttribArray(positionLoc);\n            gl.vertexAttribPointer(positionLoc, 2, gl.FLOAT, false, 0, 0);\n            gl.activeTexture(gl.TEXTURE0);\n            gl.bindTexture(gl.TEXTURE_2D, texture);\n            gl.uniform1i(srcLoc, 0);\n            gl.activeTexture(gl.TEXTURE1);\n            gl.bindTexture(gl.TEXTURE_2D, colorTexture);\n            gl.uniform1i(colorSrcLoc, 1);\n            gl.uniform2f(resolutionLoc, WIDTH, HEIGHT);\n            gl.uniform2f(mouseLoc, mouse.x, mouse.y);\n            gl.uniform1f(logoYLoc, state.logoY);\n            gl.uniform1f(logoScaleLoc, state.logoScale);\n            gl.uniform1f(effectMixLoc, state.effectMix);\n            gl.drawArrays(gl.TRIANGLES, 0, 6);\n          }\n\n          render();\n          var tl = gsap.timeline({\n            paused: true,\n            onUpdate: render,\n          });\n\n          tl.set(canvas, { opacity: 1, filter: \"blur(0px)\" }, 0);\n          tl.set(nextCard, { opacity: 0, scale: 1.45, filter: \"blur(14px)\" }, 0);\n          tl.set(phraseA, { opacity: 1, x: 0, y: 0, scale: 1, filter: \"blur(0px)\" }, 0);\n          tl.set(supportingWords, { opacity: 0, y: 54, scale: 0.96, filter: \"blur(10px)\" }, 0);\n          tl.set(phraseB, { opacity: 0, x: 1480, y: 0, scale: 1, filter: \"blur(8px)\" }, 0);\n          tl.set(state, { logoY: 760, effectMix: 0, progress: 0, logoScale: 1 }, 0);\n          tl.to(\n            state,\n            {\n              logoY: 0,\n              duration: 1,\n              ease: \"power4.out\",\n              onUpdate: render,\n            },\n            0,\n          );\n\n          tl.to(\n            state,\n            {\n              effectMix: 1,\n              duration: 0.34,\n              ease: \"power3.out\",\n              onUpdate: render,\n            },\n            0.72,\n          );\n\n          tl.to(\n            state,\n            {\n              progress: 1,\n              duration: 2.28,\n              ease: \"none\",\n              onUpdate: render,\n            },\n            0.72,\n          );\n\n          tl.to(\n            state,\n            {\n              logoScale: 0.4,\n              duration: 0.2,\n              ease: \"expo.in\",\n              onUpdate: render,\n            },\n            2.9,\n          );\n\n          tl.to(\n            canvas,\n            {\n              opacity: 0,\n              filter: \"blur(16px)\",\n              duration: 0.2,\n              ease: \"expo.in\",\n            },\n            2.9,\n          );\n\n          tl.set(nextCard, { opacity: 1, scale: 1.45, filter: \"blur(14px)\" }, 3.1);\n          tl.to(\n            nextCard,\n            {\n              scale: 0.88,\n              filter: \"blur(0px)\",\n              duration: 0.9,\n              ease: entryEase,\n            },\n            3.1,\n          );\n          tl.to(\n            nextCard,\n            {\n              scale: 0.84,\n              filter: \"blur(1.5px)\",\n              duration: 0.4,\n              ease: \"none\",\n            },\n            4.0,\n          );\n          var phraseAReady = addTextCardSequence(tl, 3.15);\n          var phraseAExit = phraseAReady + 0.5;\n          var phraseBStart = phraseAExit + 0.36;\n          tl.to(\n            phraseA,\n            {\n              x: -1480,\n              filter: \"blur(8px)\",\n              duration: 0.36,\n              ease: \"power2.in\",\n            },\n            phraseAExit,\n          );\n          tl.set(phraseA, { opacity: 0 }, phraseBStart);\n          tl.set(\n            phraseB,\n            {\n              opacity: 1,\n              x: 1480,\n              y: 0,\n              scale: 1,\n              filter: \"blur(8px)\",\n            },\n            phraseBStart,\n          );\n          tl.to(\n            phraseB,\n            {\n              x: 0,\n              filter: \"blur(0px)\",\n              duration: 0.48,\n              ease: \"expo.out\",\n            },\n            phraseBStart,\n          );\n\n          window.__timelines[\"vfx-text-cursor\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/vpn-youtube-spot.json b/docs/public/catalog/blocks/vpn-youtube-spot.json
new file mode 100644
index 0000000000..06d8d2cb5d
--- /dev/null
+++ b/docs/public/catalog/blocks/vpn-youtube-spot.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #ffffff;\n        font-family:\n          -apple-system, BlinkMacSystemFont, \"SF Pro Display\", Inter, \"Helvetica Neue\", Arial,\n          sans-serif;\n      }\n\n      #root {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        color: #111111;\n        background:\n          radial-gradient(circle at 20% 16%, rgba(0, 122, 255, 0.13), transparent 24%),\n          radial-gradient(circle at 82% 22%, rgba(52, 199, 89, 0.14), transparent 22%),\n          linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);\n      }\n\n      .stage {\n        position: absolute;\n        inset: 0;\n        display: grid;\n        place-items: center;\n        padding: 70px 120px;\n      }\n\n      .headline {\n        position: absolute;\n        left: 118px;\n        top: 104px;\n        width: 580px;\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        z-index: 2;\n        pointer-events: none;\n      }\n\n      .headline span {\n        display: block;\n        font-size: 92px;\n        line-height: 0.92;\n        font-weight: 900;\n        letter-spacing: 0;\n      }\n\n      .headline .blue {\n        color: #007aff;\n      }\n\n      .headline .sub {\n        margin-top: 20px;\n        width: 410px;\n        color: #6e6e73;\n        font-size: 27px;\n        line-height: 1.18;\n        font-weight: 700;\n      }\n\n      .ambient-word {\n        position: absolute;\n        right: 78px;\n        bottom: 64px;\n        color: rgba(17, 17, 17, 0.05);\n        font-size: 208px;\n        line-height: 0.84;\n        font-weight: 900;\n        letter-spacing: 0;\n        pointer-events: none;\n      }\n\n      .ambient-line {\n        position: absolute;\n        height: 2px;\n        width: 360px;\n        border-radius: 999px;\n        background: rgba(0, 122, 255, 0.2);\n        transform-origin: center;\n        pointer-events: none;\n      }\n\n      .line-a {\n        left: 198px;\n        bottom: 230px;\n      }\n\n      .line-b {\n        right: 208px;\n        top: 196px;\n        width: 248px;\n        background: rgba(52, 199, 89, 0.2);\n      }\n\n      .snap-shadow {\n        position: absolute;\n        left: 50%;\n        bottom: 132px;\n        width: 560px;\n        height: 52px;\n        border-radius: 50%;\n        transform: translateX(-50%);\n        background: rgba(17, 17, 17, 0.14);\n        filter: blur(24px);\n        opacity: 0;\n      }\n\n      .phone {\n        position: relative;\n        width: 462px;\n        height: 952px;\n        border-radius: 72px;\n        padding: 16px;\n        background: linear-gradient(145deg, #1f2025 0%, #07070a 100%);\n        box-shadow:\n          0 46px 120px rgba(17, 17, 17, 0.22),\n          inset 0 0 0 2px rgba(255, 255, 255, 0.12);\n        z-index: 4;\n        will-change: transform;\n      }\n\n      .phone::before {\n        content: \"\";\n        position: absolute;\n        inset: 8px;\n        border-radius: 64px;\n        border: 2px solid rgba(255, 255, 255, 0.07);\n        pointer-events: none;\n      }\n\n      .screen {\n        position: relative;\n        width: 100%;\n        height: 100%;\n        overflow: hidden;\n        border-radius: 56px;\n        background: #f5f5f7;\n        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);\n      }\n\n      .island {\n        position: absolute;\n        left: 50%;\n        top: 15px;\n        width: 138px;\n        height: 38px;\n        border-radius: 999px;\n        transform: translateX(-50%);\n        background: #07070a;\n        z-index: 30;\n      }\n\n      .store-view,\n      .detail-view,\n      .white-wipe {\n        position: absolute;\n        inset: 0;\n      }\n\n      .store-view {\n        padding: 70px 24px 26px;\n        z-index: 2;\n      }\n\n      .store-top {\n        display: flex;\n        align-items: flex-end;\n        justify-content: space-between;\n        margin-bottom: 16px;\n      }\n\n      .store-title {\n        font-size: 38px;\n        line-height: 1;\n        font-weight: 900;\n        letter-spacing: 0;\n      }\n\n      .avatar {\n        width: 38px;\n        height: 38px;\n        border-radius: 50%;\n        background:\n          radial-gradient(circle at 62% 38%, rgba(255, 255, 255, 0.9) 0 10%, transparent 11%),\n          linear-gradient(135deg, #007aff, #34c759);\n        box-shadow: 0 8px 18px rgba(0, 122, 255, 0.25);\n      }\n\n      .search-pill {\n        display: flex;\n        align-items: center;\n        gap: 9px;\n        height: 45px;\n        padding: 0 16px;\n        border-radius: 15px;\n        background: #e9e9ed;\n        color: #6e6e73;\n        font-size: 18px;\n        font-weight: 700;\n        margin-bottom: 16px;\n      }\n\n      .search-icon {\n        width: 16px;\n        height: 16px;\n        border: 3px solid #8e8e93;\n        border-radius: 50%;\n        position: relative;\n      }\n\n      .search-icon::after {\n        content: \"\";\n        position: absolute;\n        right: -8px;\n        bottom: -5px;\n        width: 9px;\n        height: 3px;\n        border-radius: 999px;\n        background: #8e8e93;\n        transform: rotate(45deg);\n      }\n\n      .screen-window {\n        height: 720px;\n        overflow: hidden;\n        border-radius: 26px;\n      }\n\n      .scroll-content {\n        display: flex;\n        flex-direction: column;\n        gap: 12px;\n        will-change: transform;\n      }\n\n      .store-row {\n        display: grid;\n        grid-template-columns: 72px 1fr 78px;\n        align-items: center;\n        gap: 13px;\n        min-height: 104px;\n        padding: 13px 12px;\n        border-radius: 23px;\n        background: rgba(255, 255, 255, 0.88);\n        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.035);\n      }\n\n      .app-icon {\n        width: 72px;\n        height: 72px;\n        border-radius: 18px;\n        position: relative;\n        overflow: hidden;\n        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.38);\n      }\n\n      .icon-cloud {\n        background: linear-gradient(135deg, #70d7ff, #007aff);\n      }\n\n      .icon-photo {\n        background:\n          radial-gradient(circle at 32% 35%, #ffffff 0 10%, transparent 11%),\n          linear-gradient(135deg, #ff9f0a, #ff375f);\n      }\n\n      .icon-music {\n        background: linear-gradient(135deg, #ff2d55, #5856d6);\n      }\n\n      .icon-bank {\n        background: linear-gradient(135deg, #111111, #8e8e93);\n      }\n\n      .icon-map {\n        background: linear-gradient(135deg, #34c759, #ffd60a);\n      }\n\n      .icon-vpn {\n        background:\n          radial-gradient(circle at 72% 16%, rgba(255, 255, 255, 0.62) 0 12%, transparent 13%),\n          linear-gradient(145deg, #101828 0%, #007aff 64%, #34c759 100%);\n      }\n\n      .icon-vpn::before {\n        content: \"\";\n        position: absolute;\n        left: 21px;\n        top: 16px;\n        width: 30px;\n        height: 38px;\n        border-radius: 16px 16px 18px 18px;\n        background: rgba(255, 255, 255, 0.94);\n        clip-path: polygon(50% 0, 88% 13%, 88% 46%, 50% 100%, 12% 46%, 12% 13%);\n      }\n\n      .icon-vpn::after {\n        content: \"\";\n        position: absolute;\n        left: 31px;\n        top: 29px;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        background: #007aff;\n      }\n\n      .row-copy {\n        min-width: 0;\n      }\n\n      .row-title {\n        color: #111111;\n        font-size: 18px;\n        line-height: 1.24;\n        font-weight: 800;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      .row-sub {\n        margin-top: 4px;\n        color: #6e6e73;\n        font-size: 12px;\n        line-height: 1.28;\n        font-weight: 600;\n      }\n\n      .stars {\n        margin-top: 6px;\n        color: #8e8e93;\n        font-size: 12px;\n        line-height: 1.25;\n        font-weight: 800;\n      }\n\n      .get-button,\n      .install-button,\n      .open-button {\n        display: grid;\n        place-items: center;\n        height: 34px;\n        border-radius: 999px;\n        font-size: 14px;\n        line-height: 1;\n        font-weight: 900;\n        letter-spacing: 0;\n      }\n\n      .get-button,\n      .open-button {\n        width: 72px;\n        color: #007aff;\n        background: #ececf1;\n      }\n\n      #vpn-row {\n        position: relative;\n        transform-origin: center;\n        outline: 0 solid rgba(0, 122, 255, 0);\n      }\n\n      .tap-dot {\n        position: absolute;\n        right: 47px;\n        top: 52px;\n        width: 42px;\n        height: 42px;\n        border-radius: 50%;\n        border: 4px solid rgba(0, 122, 255, 0.8);\n        background: rgba(0, 122, 255, 0.18);\n        opacity: 0;\n        z-index: 9;\n      }\n\n      .detail-view {\n        padding: 78px 24px 26px;\n        background: #f5f5f7;\n        opacity: 0;\n        z-index: 8;\n      }\n\n      .detail-card {\n        height: 100%;\n        border-radius: 36px;\n        padding: 28px 22px 24px;\n        background: #ffffff;\n        box-shadow: 0 26px 70px rgba(17, 17, 17, 0.12);\n        overflow: hidden;\n      }\n\n      .detail-hero {\n        display: grid;\n        grid-template-columns: 108px 1fr;\n        gap: 16px;\n        align-items: center;\n      }\n\n      .detail-icon {\n        width: 108px;\n        height: 108px;\n        border-radius: 26px;\n      }\n\n      .detail-title {\n        font-size: 31px;\n        line-height: 1;\n        font-weight: 900;\n      }\n\n      .detail-sub {\n        margin-top: 7px;\n        color: #6e6e73;\n        font-size: 14px;\n        line-height: 1.2;\n        font-weight: 700;\n      }\n\n      .install-button {\n        position: relative;\n        width: 94px;\n        margin-top: 15px;\n        color: #ffffff;\n        background: #007aff;\n        overflow: hidden;\n      }\n\n      .install-label,\n      .open-label,\n      .ring {\n        position: absolute;\n      }\n\n      .install-label,\n      .open-label {\n        inset: 0;\n        display: grid;\n        place-items: center;\n      }\n\n      .open-label,\n      .ring {\n        opacity: 0;\n      }\n\n      .ring {\n        inset: 4px auto auto 34px;\n        width: 26px;\n        height: 26px;\n        transform: rotate(-90deg);\n      }\n\n      .ring .track {\n        fill: none;\n        stroke: rgba(255, 255, 255, 0.36);\n        stroke-width: 4;\n      }\n\n      .ring .progress {\n        fill: none;\n        stroke: #ffffff;\n        stroke-width: 4;\n        stroke-linecap: round;\n        stroke-dasharray: 69;\n        stroke-dashoffset: 69;\n      }\n\n      .stats {\n        display: grid;\n        grid-template-columns: repeat(3, 1fr);\n        gap: 8px;\n        margin: 26px 0;\n      }\n\n      .stat {\n        min-height: 72px;\n        border-radius: 22px;\n        padding: 12px 8px;\n        background: #f5f5f7;\n        text-align: center;\n      }\n\n      .stat-label {\n        color: #8e8e93;\n        font-size: 11px;\n        font-weight: 800;\n      }\n\n      .stat-value {\n        margin-top: 7px;\n        color: #111111;\n        font-size: 22px;\n        line-height: 1;\n        font-weight: 900;\n      }\n\n      .progress-panel {\n        position: relative;\n        display: grid;\n        place-items: center;\n        height: 260px;\n        border-radius: 34px;\n        background:\n          radial-gradient(circle at 50% 40%, rgba(0, 122, 255, 0.12), transparent 48%), #f5f5f7;\n        overflow: hidden;\n      }\n\n      .progress-halo {\n        position: absolute;\n        width: 196px;\n        height: 196px;\n        border-radius: 50%;\n        border: 24px solid rgba(0, 122, 255, 0.1);\n      }\n\n      .progress-big {\n        width: 190px;\n        height: 190px;\n        transform: rotate(-90deg);\n      }\n\n      .big-track,\n      .big-progress {\n        fill: none;\n        stroke-width: 18;\n      }\n\n      .big-track {\n        stroke: rgba(0, 122, 255, 0.12);\n      }\n\n      .big-progress {\n        stroke: #007aff;\n        stroke-linecap: round;\n        stroke-dasharray: 440;\n        stroke-dashoffset: 440;\n      }\n\n      .percent {\n        position: absolute;\n        color: #111111;\n        font-size: 48px;\n        line-height: 1;\n        font-weight: 900;\n      }\n\n      .shield-status {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 10px;\n        margin-top: 18px;\n        color: #34c759;\n        font-size: 20px;\n        font-weight: 900;\n        opacity: 0;\n      }\n\n      .check {\n        width: 30px;\n        height: 30px;\n        border-radius: 50%;\n        display: grid;\n        place-items: center;\n        color: #ffffff;\n        background: #34c759;\n      }\n\n      .speed-lines {\n        position: absolute;\n        inset: 0;\n        opacity: 0;\n        z-index: 20;\n        pointer-events: none;\n      }\n\n      .speed-lines i {\n        position: absolute;\n        left: 50%;\n        width: 4px;\n        height: 210px;\n        border-radius: 999px;\n        background: rgba(17, 17, 17, 0.18);\n        transform: translateX(-50%);\n      }\n\n      .speed-lines i:nth-child(1) {\n        top: 70px;\n        margin-left: -310px;\n      }\n\n      .speed-lines i:nth-child(2) {\n        top: 130px;\n        margin-left: 304px;\n        height: 240px;\n      }\n\n      .speed-lines i:nth-child(3) {\n        top: 260px;\n        margin-left: -232px;\n        height: 300px;\n      }\n\n      .speed-lines i:nth-child(4) {\n        top: 220px;\n        margin-left: 228px;\n        height: 320px;\n      }\n\n      .white-wipe {\n        background: #ffffff;\n        opacity: 0;\n        z-index: 40;\n        pointer-events: none;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"vpn-youtube-spot\"\n      data-start=\"0\"\n      data-duration=\"7\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <audio\n        id=\"sfx\"\n        data-start=\"0\"\n        data-duration=\"7\"\n        data-track-index=\"1\"\n        src=\"/public/catalog/assets/f1f4fe4111dbd265.wav\"\n        data-volume=\"0.95\"\n      ></audio>\n\n      <div class=\"stage\">\n        <div class=\"headline\" id=\"stageHeadline\">\n          <span>PRIVATE</span>\n          <span class=\"blue\">SIMPLY</span>\n          <div class=\"sub\">A calmer way to browse.</div>\n        </div>\n        <div class=\"ambient-word\">SAFE</div>\n        <div class=\"ambient-line line-a\"></div>\n        <div class=\"ambient-line line-b\"></div>\n        <div class=\"snap-shadow\"></div>\n\n        <div class=\"phone\">\n          <div class=\"screen\">\n            <div class=\"island\"></div>\n\n            <section class=\"store-view\">\n              <div class=\"store-top\">\n                <div class=\"store-title\">Search</div>\n                <div class=\"avatar\"></div>\n              </div>\n              <div class=\"search-pill\">\n                <div class=\"search-icon\"></div>\n                <div>privacy apps</div>\n              </div>\n              <div class=\"screen-window\" data-layout-allow-overflow>\n                <div class=\"scroll-content\">\n                  <div class=\"store-row\">\n                    <div class=\"app-icon icon-cloud\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">CloudPocket</div>\n                      <div class=\"row-sub\">Files and backups</div>\n                      <div class=\"stars\">4.6 ★★★★★</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                  </div>\n                  <div class=\"store-row\">\n                    <div class=\"app-icon icon-photo\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">LensLab</div>\n                      <div class=\"row-sub\">Photo editor</div>\n                      <div class=\"stars\">4.8 ★★★★★</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                  </div>\n                  <div class=\"store-row\">\n                    <div class=\"app-icon icon-music\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">BeatShelf</div>\n                      <div class=\"row-sub\">Music discovery</div>\n                      <div class=\"stars\">4.4 ★★★★☆</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                  </div>\n                  <div class=\"store-row\">\n                    <div class=\"app-icon icon-bank\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">VaultPay</div>\n                      <div class=\"row-sub\">Budget tracker</div>\n                      <div class=\"stars\">4.7 ★★★★★</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                  </div>\n                  <div class=\"store-row\">\n                    <div class=\"app-icon icon-map\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">TrailPing</div>\n                      <div class=\"row-sub\">Maps for trips</div>\n                      <div class=\"stars\">4.5 ★★★★☆</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                  </div>\n                  <div class=\"store-row\" id=\"vpn-row\">\n                    <div class=\"app-icon icon-vpn\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">VPN</div>\n                      <div class=\"row-sub\">Simple private browsing</div>\n                      <div class=\"stars\">4.9 ★★★★★</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                    <div class=\"tap-dot\"></div>\n                  </div>\n                  <div class=\"store-row\">\n                    <div class=\"app-icon icon-cloud\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">QuickTunnel</div>\n                      <div class=\"row-sub\">Network tools</div>\n                      <div class=\"stars\">4.2 ★★★★☆</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                  </div>\n                  <div class=\"store-row\">\n                    <div class=\"app-icon icon-photo\"></div>\n                    <div class=\"row-copy\">\n                      <div class=\"row-title\">PrivateFrame</div>\n                      <div class=\"row-sub\">Photo lockers</div>\n                      <div class=\"stars\">4.3 ★★★★☆</div>\n                    </div>\n                    <div class=\"get-button\">GET</div>\n                  </div>\n                </div>\n              </div>\n            </section>\n\n            <section class=\"detail-view\">\n              <div class=\"detail-card\">\n                <div class=\"detail-hero\">\n                  <div class=\"app-icon icon-vpn detail-icon\"></div>\n                  <div>\n                    <div class=\"detail-title\">VPN</div>\n                    <div class=\"detail-sub\">Friendly privacy for everyday browsing.</div>\n                    <div class=\"install-button\">\n                      <span class=\"install-label\">GET</span>\n                      <svg class=\"ring\" viewBox=\"0 0 28 28\" aria-hidden=\"true\">\n                        <circle class=\"track\" cx=\"14\" cy=\"14\" r=\"11\"></circle>\n                        <circle class=\"progress\" cx=\"14\" cy=\"14\" r=\"11\"></circle>\n                      </svg>\n                      <span class=\"open-label\"></span>\n                    </div>\n                  </div>\n                </div>\n\n                <div class=\"stats\">\n                  <div class=\"stat\">\n                    <div class=\"stat-label\">RATING</div>\n                    <div class=\"stat-value\">4.9</div>\n                  </div>\n                  <div class=\"stat\">\n                    <div class=\"stat-label\">SPEED</div>\n                    <div class=\"stat-value\">Fast</div>\n                  </div>\n                  <div class=\"stat\">\n                    <div class=\"stat-label\">AGE</div>\n                    <div class=\"stat-value\">4+</div>\n                  </div>\n                </div>\n\n                <div class=\"progress-panel\">\n                  <div class=\"progress-halo\"></div>\n                  <svg class=\"progress-big\" viewBox=\"0 0 160 160\" aria-hidden=\"true\">\n                    <circle class=\"big-track\" cx=\"80\" cy=\"80\" r=\"70\"></circle>\n                    <circle id=\"progressArc\" class=\"big-progress\" cx=\"80\" cy=\"80\" r=\"70\"></circle>\n                  </svg>\n                  <div class=\"percent\" id=\"progressText\">0%</div>\n                </div>\n                <div class=\"shield-status\">\n                  <div class=\"check\">✓</div>\n                  <div>Ready to browse</div>\n                </div>\n              </div>\n            </section>\n          </div>\n        </div>\n      </div>\n\n      <div class=\"speed-lines\">\n        <i></i>\n        <i></i>\n        <i></i>\n        <i></i>\n      </div>\n      <div class=\"white-wipe\"></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      gsap.defaults({ force3D: true });\n\n      const tl = gsap.timeline({\n        paused: true,\n        defaults: { duration: 0.45, ease: \"power3.out\" },\n      });\n\n      const breatheRepeats = Math.ceil(7 / 2.4) - 1;\n\n      tl.from(\n        \".headline span\",\n        { y: 46, opacity: 0, stagger: 0.055, duration: 0.38, ease: \"back.out(1.35)\" },\n        0.05,\n      )\n        .from(\".headline .sub\", { y: 20, opacity: 0, duration: 0.28 }, 0.2)\n        .from(\".ambient-word\", { scale: 0.92, opacity: 0, duration: 0.5 }, 0.08)\n        .from(\".ambient-line\", { scaleX: 0, opacity: 0, stagger: 0.08, duration: 0.42 }, 0.16)\n        .to(\n          \".ambient-line\",\n          {\n            scaleX: 1.08,\n            opacity: 0.55,\n            duration: 2.4,\n            yoyo: true,\n            repeat: breatheRepeats,\n            ease: \"sine.inOut\",\n          },\n          0.55,\n        )\n        .from(\n          \".phone\",\n          {\n            y: 760,\n            scale: 0.82,\n            rotation: -2.5,\n            opacity: 0,\n            duration: 0.47,\n            ease: \"back.out(1.6)\",\n          },\n          0,\n        )\n        .from(\".store-title\", { y: 26, opacity: 0, duration: 0.28 }, 0.28)\n        .from(\".avatar\", { scale: 0.4, opacity: 0, duration: 0.24, ease: \"back.out(1.8)\" }, 0.34)\n        .from(\".search-pill\", { y: 18, opacity: 0, duration: 0.26 }, 0.4)\n        .from(\n          \".store-row\",\n          { y: 44, opacity: 0, stagger: 0.035, duration: 0.36, ease: \"power3.out\" },\n          0.48,\n        );\n\n      tl.to(\".scroll-content\", { y: -456, duration: 1.2, ease: \"power4.out\" }, 0.62)\n        .to(\n          \".screen-window\",\n          { scale: 1.012, duration: 0.18, yoyo: true, repeat: 1, ease: \"power2.out\" },\n          0.92,\n        )\n        .to(\n          \".screen-window\",\n          { scale: 1.014, duration: 0.14, yoyo: true, repeat: 1, ease: \"power2.out\" },\n          1.25,\n        )\n        .to(\n          \"#vpn-row\",\n          {\n            scale: 1.035,\n            outlineWidth: 3,\n            outlineColor: \"rgba(0,122,255,0.34)\",\n            duration: 0.2,\n            ease: \"back.out(1.7)\",\n          },\n          1.72,\n        )\n        .to(\"#vpn-row\", { scale: 1, duration: 0.22 }, 1.93)\n        .fromTo(\n          \".tap-dot\",\n          { scale: 0.25, opacity: 0.95 },\n          { scale: 2.15, opacity: 0, duration: 0.42, ease: \"power2.out\" },\n          2.02,\n        )\n        .to(\"#vpn-row .get-button\", { scale: 0.82, duration: 0.1, ease: \"power3.in\" }, 2.04)\n        .to(\"#vpn-row .get-button\", { scale: 1, duration: 0.14, ease: \"back.out(2)\" }, 2.14);\n\n      tl.fromTo(\n        \".detail-view\",\n        { y: 620, scale: 0.92, opacity: 0 },\n        { y: 0, scale: 1, opacity: 1, duration: 0.46, ease: \"power4.out\" },\n        2.32,\n      )\n        .from(\".detail-card\", { y: 56, scale: 0.96, duration: 0.42, ease: \"back.out(1.2)\" }, 2.34)\n        .from(\n          \".detail-icon\",\n          { scale: 0.55, rotation: -8, opacity: 0, duration: 0.32, ease: \"back.out(1.8)\" },\n          2.47,\n        )\n        .from(\".detail-title\", { y: 20, opacity: 0, duration: 0.28 }, 2.54)\n        .from(\".detail-sub\", { y: 14, opacity: 0, duration: 0.24 }, 2.6)\n        .from(\n          \".install-button\",\n          { scale: 0.72, opacity: 0, duration: 0.24, ease: \"back.out(2)\" },\n          2.66,\n        )\n        .from(\".stat\", { y: 28, opacity: 0, stagger: 0.05, duration: 0.3 }, 2.78)\n        .from(\".progress-panel\", { y: 42, scale: 0.96, opacity: 0, duration: 0.38 }, 2.92);\n\n      tl.to(\".install-label\", { y: -18, opacity: 0, duration: 0.16 }, 2.86)\n        .set(\".install-label\", { textContent: \"\" }, 3.02)\n        .to(\".ring\", { opacity: 1, duration: 0.16 }, 2.96)\n        .fromTo(\n          \".ring .progress\",\n          { strokeDashoffset: 69 },\n          { strokeDashoffset: 0, duration: 1.2, ease: \"power2.inOut\" },\n          3.04,\n        )\n        .fromTo(\n          \"#progressArc\",\n          { strokeDashoffset: 440 },\n          { strokeDashoffset: 0, duration: 1.42, ease: \"power2.inOut\" },\n          3.02,\n        )\n        .set(\"#progressText\", { textContent: \"18%\" }, 3.18)\n        .to(\".progress-panel\", { scale: 1.025, duration: 0.12, yoyo: true, repeat: 1 }, 3.18)\n        .set(\"#progressText\", { textContent: \"52%\" }, 3.56)\n        .to(\".progress-panel\", { scale: 1.03, duration: 0.12, yoyo: true, repeat: 1 }, 3.56)\n        .set(\"#progressText\", { textContent: \"87%\" }, 3.9)\n        .to(\".progress-panel\", { scale: 1.035, duration: 0.12, yoyo: true, repeat: 1 }, 3.9)\n        .set(\"#progressText\", { textContent: \"100%\" }, 4.28)\n        .to(\n          \".progress-panel\",\n          { scale: 1.04, duration: 0.12, yoyo: true, repeat: 1, ease: \"back.out(1.7)\" },\n          4.28,\n        )\n        .to(\".ring\", { scale: 0.35, opacity: 0, duration: 0.16 }, 4.44)\n        .to(\".install-button\", { backgroundColor: \"#34c759\", width: 94, duration: 0.18 }, 4.5)\n        .set(\".open-label\", { textContent: \"OPEN\" }, 4.52)\n        .to(\".open-label\", { opacity: 1, duration: 0.16 }, 4.56)\n        .fromTo(\n          \".shield-status\",\n          { y: 22, scale: 0.9, opacity: 0 },\n          { y: 0, scale: 1, opacity: 1, duration: 0.34, ease: \"back.out(1.8)\" },\n          4.62,\n        )\n        .to(\n          \".phone\",\n          { scale: 1.025, duration: 0.18, yoyo: true, repeat: 1, ease: \"back.out(1.5)\" },\n          4.7,\n        );\n\n      tl.to(\".headline\", { y: -18, opacity: 0.35, duration: 0.22 }, 5.18)\n        .to(\".ambient-word\", { opacity: 0.018, duration: 0.22 }, 5.18)\n        .to(\".snap-shadow\", { opacity: 1, scaleX: 0.8, duration: 0.16 }, 5.35)\n        .fromTo(\n          \".speed-lines\",\n          { y: -220, opacity: 0 },\n          { y: 420, opacity: 1, duration: 0.26, ease: \"power4.in\" },\n          5.42,\n        )\n        .to(\n          \".phone\",\n          { y: 1050, scale: 0.78, rotation: -3.5, duration: 0.48, ease: \"power4.in\" },\n          5.44,\n        )\n        .to(\".snap-shadow\", { opacity: 0, scaleX: 1.6, duration: 0.28 }, 5.62)\n        .to(\".speed-lines\", { opacity: 0, duration: 0.2 }, 5.74)\n        .to(\".white-wipe\", { opacity: 1, duration: 0.42, ease: \"power2.out\" }, 5.86);\n\n      window.__timelines[\"vpn-youtube-spot\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/whip-pan.json b/docs/public/catalog/blocks/whip-pan.json
new file mode 100644
index 0000000000..70af69599a
--- /dev/null
+++ b/docs/public/catalog/blocks/whip-pan.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @import url(\"https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=Bebas+Neue&family=JetBrains+Mono:wght@400;700&family=Lato:wght@400;700&display=block\");\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"main\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <style>\n        [data-composition-id=\"main\"] {\n          width: 1920px;\n          height: 1080px;\n          overflow: hidden;\n          position: relative;\n          background: #0b132b;\n        }\n\n        /* Blueprint grid */\n        .bp-grid {\n          position: absolute;\n          inset: 0;\n          background-image:\n            linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),\n            linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);\n          background-size: 40px 40px;\n          pointer-events: none;\n        }\n\n        /* Layout */\n        .bp-left {\n          position: absolute;\n          left: 0;\n          top: 0;\n          bottom: 0;\n          width: 1200px;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .bp-right {\n          position: absolute;\n          right: 0;\n          top: 0;\n          bottom: 0;\n          width: 720px;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          padding: 60px 60px 60px 40px;\n        }\n        .bp-divider {\n          position: absolute;\n          left: 1200px;\n          top: 60px;\n          bottom: 60px;\n          width: 1px;\n          background: #48bfe3;\n          opacity: 0.15;\n        }\n        .bp-number {\n          font-family: \"Space Mono\", monospace;\n          font-size: 14px;\n          font-weight: 700;\n          letter-spacing: 0.4em;\n          text-transform: uppercase;\n          position: absolute;\n          top: 40px;\n          left: 60px;\n          color: #48bfe3;\n        }\n\n        /* Right panel typography */\n        .bp-name {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 38px;\n          letter-spacing: 0.08em;\n          margin-bottom: 20px;\n          color: #48bfe3;\n        }\n        .bp-plabel {\n          font-family: \"Space Mono\", monospace;\n          font-size: 11px;\n          font-weight: 700;\n          letter-spacing: 0.3em;\n          text-transform: uppercase;\n          margin-bottom: 10px;\n          color: #48bfe3;\n          opacity: 0.5;\n        }\n        .bp-prompt {\n          font-family: \"JetBrains Mono\", monospace;\n          font-size: 20px;\n          line-height: 1.6;\n          padding: 16px 20px;\n          border-radius: 6px;\n          margin-bottom: 20px;\n          color: #48bfe3;\n          background: rgba(72, 191, 227, 0.06);\n          border: 1px solid rgba(72, 191, 227, 0.12);\n        }\n        .bp-desc {\n          font-family: \"Lato\", sans-serif;\n          font-size: 17px;\n          line-height: 1.6;\n          color: #7a9ab0;\n          opacity: 0.55;\n        }\n\n        /* GL scenes (hidden, just for texture capture) */\n        .scene {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          overflow: hidden;\n          display: flex;\n          align-items: center;\n          justify-content: center;\n        }\n        .scene-label {\n          font-family: \"Bebas Neue\", sans-serif;\n          font-size: 140px;\n          letter-spacing: 0.06em;\n          opacity: 0.12;\n        }\n      </style>\n\n      <div class=\"bp-grid\"></div>\n      <div class=\"bp-divider\"></div>\n      <div class=\"bp-number\">03 / 14</div>\n\n      <!-- GL demo scenes (captured as textures, then hidden) -->\n      <div id=\"s1\" class=\"scene\" style=\"background: #0b132b\">\n        <div class=\"scene-label\" style=\"color: #48bfe3\">SCENE A</div>\n      </div>\n      <div id=\"s2\" class=\"scene\" style=\"background: #48bfe3; opacity: 0\">\n        <div class=\"scene-label\" style=\"color: #0b132b\">SCENE B</div>\n      </div>\n\n      <!-- GL canvas (left panel only) -->\n      <canvas\n        id=\"gl-canvas\"\n        width=\"1200\"\n        height=\"1080\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 1200px;\n          height: 1080px;\n          z-index: 10;\n          pointer-events: none;\n          display: none;\n        \"\n      >\n      </canvas>\n\n      <!-- Right panel metadata -->\n      <div class=\"bp-right\">\n        <div class=\"bp-name\">Whip Pan</div>\n        <div class=\"bp-plabel\">Prompt</div>\n        <div class=\"bp-prompt\">\"use whip pan shader transition\"</div>\n        <div class=\"bp-desc\">\n          Both scenes slide horizontally with 10-sample directional motion blur simulating a fast\n          camera pan.\n        </div>\n      </div>\n\n      <div\n        id=\"driver\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n      var glCanvas = document.getElementById(\"gl-canvas\");\n      var gl = glCanvas.getContext(\"webgl\", { preserveDrawingBuffer: true });\n      if (!gl) {\n        console.warn(\"WebGL not available\");\n        window.__timelines[\"main\"] = gsap.timeline({ paused: true });\n      } else {\n        gl.viewport(0, 0, 1200, 1080);\n        gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, false);\n        var sceneTextures = {};\n\n        function captureScene(sceneId) {\n          var scene = document.getElementById(sceneId);\n          var origOpacity = scene.style.opacity;\n          var origZ = scene.style.zIndex;\n          scene.style.opacity = \"1\";\n          scene.style.zIndex = \"999\";\n          scene.offsetHeight;\n          var c = document.createElement(\"canvas\");\n          c.width = 1200;\n          c.height = 1080;\n          var ctx = c.getContext(\"2d\");\n          ctx.fillStyle = window.getComputedStyle(scene).backgroundColor;\n          ctx.fillRect(0, 0, 1200, 1080);\n          var sr = scene.getBoundingClientRect();\n          var els = scene.querySelectorAll(\"*\");\n          for (var i = 0; i < els.length; i++) {\n            var el = els[i],\n              cs = window.getComputedStyle(el);\n            if (cs.display === \"none\" || cs.visibility === \"hidden\") continue;\n            var r = el.getBoundingClientRect();\n            if (r.width < 1 || r.height < 1) continue;\n            var x = r.left - sr.left,\n              y = r.top - sr.top,\n              w = r.width,\n              h = r.height;\n            ctx.save();\n            ctx.globalAlpha = parseFloat(cs.opacity) || 1;\n            var bg = cs.backgroundColor;\n            if (bg && bg !== \"rgba(0, 0, 0, 0)\" && bg !== \"transparent\") {\n              ctx.fillStyle = bg;\n              ctx.fillRect(x, y, w, h);\n            }\n            var hasChildEls = el.querySelector(\"div,span,img,video\");\n            var text = \"\";\n            for (var j = 0; j < el.childNodes.length; j++)\n              if (el.childNodes[j].nodeType === 3) text += el.childNodes[j].textContent;\n            text = text.trim();\n            if (text && !hasChildEls) {\n              ctx.font = cs.fontWeight + \" \" + cs.fontSize + \" \" + cs.fontFamily;\n              ctx.fillStyle = cs.color;\n              if (cs.letterSpacing && cs.letterSpacing !== \"normal\")\n                ctx.letterSpacing = cs.letterSpacing;\n              ctx.textAlign = \"center\";\n              ctx.textBaseline = \"middle\";\n              ctx.fillText(text, x + w / 2, y + h / 2);\n            }\n            ctx.restore();\n          }\n          scene.style.opacity = origOpacity;\n          scene.style.zIndex = origZ;\n          var tex = gl.createTexture();\n          gl.bindTexture(gl.TEXTURE_2D, tex);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);\n          gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);\n          gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, c);\n          sceneTextures[sceneId] = tex;\n        }\n\n        var vertSrc =\n          \"attribute vec2 a_pos; varying vec2 v_uv; void main(){\" +\n          \"v_uv=a_pos*0.5+0.5; v_uv.y=1.0-v_uv.y; gl_Position=vec4(a_pos,0,1);}\";\n        var quadBuf = gl.createBuffer();\n        gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n        gl.bufferData(\n          gl.ARRAY_BUFFER,\n          new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]),\n          gl.STATIC_DRAW,\n        );\n        function compileShader(src, type) {\n          var s = gl.createShader(type);\n          gl.shaderSource(s, src);\n          gl.compileShader(s);\n          if (!gl.getShaderParameter(s, gl.COMPILE_STATUS))\n            console.error(\"Shader:\", gl.getShaderInfoLog(s));\n          return s;\n        }\n        function mkProg(fragSrc) {\n          var p = gl.createProgram();\n          gl.attachShader(p, compileShader(vertSrc, gl.VERTEX_SHADER));\n          gl.attachShader(p, compileShader(fragSrc, gl.FRAGMENT_SHADER));\n          gl.linkProgram(p);\n          if (!gl.getProgramParameter(p, gl.LINK_STATUS))\n            console.error(\"Link:\", gl.getProgramInfoLog(p));\n          return p;\n        }\n\n        var H =\n          \"precision mediump float;\" +\n          \"varying vec2 v_uv;\" +\n          \"uniform sampler2D u_from, u_to;\" +\n          \"uniform float u_progress;\" +\n          \"uniform vec2 u_resolution;\\n\";\n\n        var progPass = mkProg(H + \"void main(){gl_FragColor=texture2D(u_from,v_uv);}\");\n        var progTrans = mkProg(\n          H +\n            \"void main(){float fromOff=u_progress*1.5;vec3 fromC=vec3(0.);for(int i=0;i<10;i++){float f=float(i)/10.;vec2 fuv=vec2(v_uv.x+fromOff+u_progress*.08*f,v_uv.y);fromC+=texture2D(u_from,clamp(fuv,0.,1.)).rgb;}fromC/=10.;float toOff=(1.-u_progress)*1.5;vec3 toC=vec3(0.);for(int i=0;i<10;i++){float f=float(i)/10.;vec2 tuv=vec2(v_uv.x-toOff-(1.-u_progress)*.08*f,v_uv.y);toC+=texture2D(u_to,clamp(tuv,0.,1.)).rgb;}toC/=10.;gl_FragColor=vec4(mix(fromC,toC,u_progress),1.);}\",\n        );\n\n        function renderShader(prog, texFrom, texTo, progress) {\n          gl.useProgram(prog);\n          gl.activeTexture(gl.TEXTURE0);\n          gl.bindTexture(gl.TEXTURE_2D, texFrom);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_from\"), 0);\n          gl.activeTexture(gl.TEXTURE1);\n          gl.bindTexture(gl.TEXTURE_2D, texTo);\n          gl.uniform1i(gl.getUniformLocation(prog, \"u_to\"), 1);\n          gl.uniform1f(gl.getUniformLocation(prog, \"u_progress\"), progress);\n          gl.uniform2f(gl.getUniformLocation(prog, \"u_resolution\"), 1200, 1080);\n          var pos = gl.getAttribLocation(prog, \"a_pos\");\n          gl.bindBuffer(gl.ARRAY_BUFFER, quadBuf);\n          gl.enableVertexAttribArray(pos);\n          gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);\n          gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);\n        }\n\n        function easeInOut(p) {\n          return p < 0.5 ? 2 * p * p : 1 - Math.pow(-2 * p + 2, 2) / 2;\n        }\n\n        captureScene(\"s1\");\n        captureScene(\"s2\");\n        glCanvas.style.display = \"block\";\n        renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n        document.querySelectorAll(\".scene\").forEach(function (s) {\n          s.style.opacity = \"0\";\n        });\n\n        var tl = gsap.timeline({\n          paused: true,\n          onUpdate: function () {\n            var t = tl.time();\n            if (t >= 1.0 && t < 3.0) {\n              renderShader(\n                progTrans,\n                sceneTextures[\"s1\"],\n                sceneTextures[\"s2\"],\n                easeInOut((t - 1.0) / 2.0),\n              );\n            } else if (t >= 3.0) {\n              renderShader(progPass, sceneTextures[\"s2\"], sceneTextures[\"s2\"], 0);\n            } else {\n              renderShader(progPass, sceneTextures[\"s1\"], sceneTextures[\"s1\"], 0);\n            }\n          },\n        });\n        tl.to({ v: 0 }, { v: 1, duration: 4, ease: \"none\" }, 0);\n        window.__timelines[\"main\"] = tl;\n      } // end if (gl)\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/world-map.json b/docs/public/catalog/blocks/world-map.json
new file mode 100644
index 0000000000..20286bf3d3
--- /dev/null
+++ b/docs/public/catalog/blocks/world-map.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>World Map</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/d3@7/dist/d3.min.js\"></script>\n    <script src=\"https://cdn.jsdelivr.net/npm/topojson-client@3.1.0/dist/topojson-client.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0f172a;\n      }\n\n      #world-map {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        background: linear-gradient(145deg, #0f172a 0%, #1e293b 100%);\n        font-family: \"Inter\", sans-serif;\n        color: #f0fdfa;\n        overflow: hidden;\n      }\n\n      #world-map .headline {\n        position: absolute;\n        top: 48px;\n        left: 80px;\n        font-size: 52px;\n        font-weight: 700;\n        letter-spacing: -0.02em;\n        color: #f0fdfa;\n        clip-path: inset(0 100% 0 0);\n      }\n\n      #world-map .subtitle {\n        position: absolute;\n        top: 114px;\n        left: 80px;\n        font-size: 22px;\n        font-weight: 300;\n        color: #94a3b8;\n        opacity: 0;\n      }\n\n      #world-map .map-container {\n        position: absolute;\n        top: 170px;\n        left: 80px;\n        width: 1380px;\n        height: 700px;\n      }\n\n      #world-map .map-container svg {\n        width: 1380px;\n        height: 700px;\n      }\n\n      #world-map .country-path {\n        stroke: #1e293b;\n        stroke-width: 0.6;\n        opacity: 0;\n        cursor: default;\n      }\n\n      #world-map .ocean {\n        fill: none;\n      }\n\n      #world-map .graticule {\n        fill: none;\n        stroke: #1e293b;\n        stroke-width: 0.3;\n        stroke-opacity: 0.4;\n      }\n\n      #world-map .legend-group {\n        position: absolute;\n        bottom: 80px;\n        right: 80px;\n        display: flex;\n        flex-direction: column;\n        align-items: flex-end;\n        gap: 8px;\n        opacity: 0;\n      }\n\n      #world-map .legend-bar {\n        width: 280px;\n        height: 14px;\n        border-radius: 7px;\n      }\n\n      #world-map .legend-labels {\n        display: flex;\n        justify-content: space-between;\n        width: 280px;\n        font-size: 13px;\n        font-weight: 500;\n        color: #94a3b8;\n      }\n\n      #world-map .source {\n        position: absolute;\n        bottom: 36px;\n        left: 80px;\n        font-size: 13px;\n        font-weight: 400;\n        color: #475569;\n        opacity: 0;\n      }\n\n      #world-map .tooltip {\n        position: absolute;\n        pointer-events: none;\n        background: rgba(15, 23, 42, 0.92);\n        border: 1px solid #334155;\n        border-radius: 8px;\n        padding: 10px 16px;\n        font-size: 14px;\n        font-weight: 500;\n        color: #f0fdfa;\n        white-space: nowrap;\n        opacity: 0;\n        transform: translateY(4px);\n        backdrop-filter: blur(8px);\n        z-index: 10;\n      }\n\n      #world-map .tooltip .tt-value {\n        color: #22d3ee;\n        font-weight: 600;\n        margin-left: 6px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"world-map\"\n      data-composition-id=\"world-map\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"14\"\n    >\n      <h1 class=\"headline\">Global GDP per Capita</h1>\n      <p class=\"subtitle\">Nominal GDP per capita, 2024 IMF estimates</p>\n\n      <div class=\"map-container\">\n        <svg id=\"world-map-svg\"></svg>\n      </div>\n\n      <div class=\"legend-group\">\n        <div\n          class=\"legend-bar\"\n          style=\"\n            background: linear-gradient(90deg, #064e3b 0%, #0d9488 33%, #22d3ee 66%, #f0fdfa 100%);\n          \"\n        ></div>\n        <div class=\"legend-labels\">\n          <span>Low</span>\n          <span>High</span>\n        </div>\n      </div>\n\n      <p class=\"source\">Source: International Monetary Fund</p>\n\n      <div class=\"tooltip\"></div>\n    </div>\n\n    <script>\n      (function () {\n        /* ── GDP per capita data (2024 IMF estimates, USD) ── */\n        /* Keys are ISO 3166-1 numeric codes as strings (3-digit, zero-padded) */\n        var gdpData = {\n          840: { name: \"United States\", gdp: 85373 },\n          156: { name: \"China\", gdp: 13136 },\n          356: { name: \"India\", gdp: 2731 },\n          276: { name: \"Germany\", gdp: 54291 },\n          826: { name: \"United Kingdom\", gdp: 48913 },\n          250: { name: \"France\", gdp: 44408 },\n          392: { name: \"Japan\", gdp: 33950 },\n          \"076\": { name: \"Brazil\", gdp: 10412 },\n          \"036\": { name: \"Australia\", gdp: 65366 },\n          124: { name: \"Canada\", gdp: 54866 },\n          643: { name: \"Russia\", gdp: 14403 },\n          410: { name: \"South Korea\", gdp: 33147 },\n          484: { name: \"Mexico\", gdp: 13434 },\n          360: { name: \"Indonesia\", gdp: 5108 },\n          566: { name: \"Nigeria\", gdp: 1621 },\n          710: { name: \"South Africa\", gdp: 6190 },\n          818: { name: \"Egypt\", gdp: 4295 },\n          792: { name: \"Turkey\", gdp: 13110 },\n          682: { name: \"Saudi Arabia\", gdp: 32270 },\n          764: { name: \"Thailand\", gdp: 7647 },\n          704: { name: \"Vietnam\", gdp: 4623 },\n          616: { name: \"Poland\", gdp: 22393 },\n          752: { name: \"Sweden\", gdp: 59324 },\n          578: { name: \"Norway\", gdp: 94660 },\n          756: { name: \"Switzerland\", gdp: 105669 },\n          \"032\": { name: \"Argentina\", gdp: 13709 },\n          170: { name: \"Colombia\", gdp: 7230 },\n          404: { name: \"Kenya\", gdp: 2198 },\n          586: { name: \"Pakistan\", gdp: 1658 },\n          \"050\": { name: \"Bangladesh\", gdp: 2688 },\n        };\n\n        /* Top 5 GDP countries for highlight pulse */\n        var top5Codes = [\"756\", \"578\", \"840\", \"036\", \"752\"];\n\n        /* GDP range for color scale */\n        var gdpValues = [];\n        var codes = Object.keys(gdpData);\n        for (var i = 0; i < codes.length; i++) {\n          gdpValues.push(gdpData[codes[i]].gdp);\n        }\n        var minGdp = Math.min.apply(null, gdpValues);\n        var maxGdp = Math.max.apply(null, gdpValues);\n\n        /* Color interpolation: green → teal → cyan → white */\n        var colorStops = [\n          { r: 6, g: 78, b: 59 },\n          { r: 13, g: 148, b: 136 },\n          { r: 34, g: 211, b: 238 },\n          { r: 240, g: 253, b: 250 },\n        ];\n\n        function gdpToColor(value) {\n          var t = (value - minGdp) / (maxGdp - minGdp);\n          t = Math.max(0, Math.min(1, t));\n          var scaledT = t * (colorStops.length - 1);\n          var idx = Math.floor(scaledT);\n          if (idx >= colorStops.length - 1) idx = colorStops.length - 2;\n          var localT = scaledT - idx;\n          var c0 = colorStops[idx];\n          var c1 = colorStops[idx + 1];\n          var r = Math.round(c0.r + (c1.r - c0.r) * localT);\n          var g = Math.round(c0.g + (c1.g - c0.g) * localT);\n          var b = Math.round(c0.b + (c1.b - c0.b) * localT);\n          return \"rgb(\" + r + \",\" + g + \",\" + b + \")\";\n        }\n\n        /* Default fill for countries without data */\n        var defaultFill = \"#1e293b\";\n\n        /* ── Build the map ── */\n        var svg = d3\n          .select(\"#world-map-svg\")\n          .attr(\"viewBox\", \"0 0 1380 700\")\n          .attr(\"preserveAspectRatio\", \"xMidYMid meet\");\n\n        var projection = d3.geoNaturalEarth1().fitSize([1380, 700], { type: \"Sphere\" });\n\n        var pathGenerator = d3.geoPath().projection(projection);\n\n        /* Graticule */\n        var graticule = d3.geoGraticule10();\n        svg.append(\"path\").datum(graticule).attr(\"class\", \"graticule\").attr(\"d\", pathGenerator);\n\n        /* Tooltip element */\n        var tooltipEl = document.querySelector(\"#world-map .tooltip\");\n\n        /* Fetch topology and render countries */\n        d3.json(\"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json\").then(\n          function (world) {\n            var countries = topojson.feature(world, world.objects.countries).features;\n\n            svg\n              .selectAll(\".country-path\")\n              .data(countries)\n              .enter()\n              .append(\"path\")\n              .attr(\"class\", \"country-path\")\n              .attr(\"d\", pathGenerator)\n              .attr(\"data-country\", function (d) {\n                return String(d.id).padStart(3, \"0\");\n              })\n              .attr(\"fill\", function (d) {\n                var code = String(d.id).padStart(3, \"0\");\n                if (gdpData[code]) {\n                  return gdpToColor(gdpData[code].gdp);\n                }\n                return defaultFill;\n              })\n              .on(\"mouseenter\", function (event, d) {\n                var code = String(d.id).padStart(3, \"0\");\n                if (gdpData[code]) {\n                  var entry = gdpData[code];\n                  tooltipEl.innerHTML =\n                    entry.name +\n                    '<span class=\"tt-value\">$' +\n                    entry.gdp.toLocaleString() +\n                    \"</span>\";\n                  tooltipEl.style.opacity = \"1\";\n                  tooltipEl.style.transform = \"translateY(0)\";\n                }\n              })\n              .on(\"mousemove\", function (event) {\n                var container = document.querySelector(\"#world-map\");\n                var rect = container.getBoundingClientRect();\n                var x = event.clientX - rect.left + 16;\n                var y = event.clientY - rect.top - 40;\n                tooltipEl.style.left = x + \"px\";\n                tooltipEl.style.top = y + \"px\";\n              })\n              .on(\"mouseleave\", function () {\n                tooltipEl.style.opacity = \"0\";\n                tooltipEl.style.transform = \"translateY(4px)\";\n              });\n\n            /* ── GSAP Timeline ── */\n            buildTimeline();\n          },\n        );\n\n        function buildTimeline() {\n          var tl = gsap.timeline({ paused: true });\n\n          /* 0s: Headline clip-path wipe reveal (1s) */\n          tl.to(\n            \"#world-map .headline\",\n            {\n              clipPath: \"inset(0 0% 0 0)\",\n              duration: 1,\n              ease: \"power3.inOut\",\n            },\n            0,\n          );\n\n          /* 0.4s: Subtitle fade in (0.6s) */\n          tl.to(\n            \"#world-map .subtitle\",\n            {\n              opacity: 1,\n              duration: 0.6,\n              ease: \"power2.out\",\n            },\n            0.4,\n          );\n\n          /* 1.0s: Countries stagger reveal */\n          tl.to(\n            \"#world-map .country-path\",\n            {\n              opacity: 1,\n              duration: 0.3,\n              stagger: {\n                each: 0.02,\n                from: \"center\",\n              },\n              ease: \"power1.out\",\n            },\n            1.0,\n          );\n\n          /* 4.0s: Legend fade in */\n          tl.to(\n            \"#world-map .legend-group\",\n            {\n              opacity: 1,\n              duration: 0.6,\n              ease: \"power2.out\",\n            },\n            4.0,\n          );\n\n          /* 4.5s: Source fade in */\n          tl.to(\n            \"#world-map .source\",\n            {\n              opacity: 1,\n              duration: 0.5,\n              ease: \"power2.out\",\n            },\n            4.5,\n          );\n\n          /* 5.0s: Highlight pulse on top 5 GDP countries */\n          for (var i = 0; i < top5Codes.length; i++) {\n            var selector = '#world-map [data-country=\"' + top5Codes[i] + '\"]';\n\n            /* Pulse up: brightness + white stroke */\n            tl.to(\n              selector,\n              {\n                filter: \"brightness(1.5)\",\n                stroke: \"#ffffff\",\n                strokeWidth: 1.8,\n                duration: 0.4,\n                ease: \"power2.out\",\n              },\n              5.0 + i * 0.15,\n            );\n\n            /* Pulse back to normal */\n            tl.to(\n              selector,\n              {\n                filter: \"brightness(1)\",\n                stroke: \"#1e293b\",\n                strokeWidth: 0.6,\n                duration: 0.6,\n                ease: \"power2.inOut\",\n              },\n              5.0 + i * 0.15 + 0.4,\n            );\n          }\n\n          /* Register timeline */\n          if (!window.__timelines) {\n            window.__timelines = {};\n          }\n          window.__timelines[\"world-map\"] = tl;\n        }\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/x-post.json b/docs/public/catalog/blocks/x-post.json
new file mode 100644
index 0000000000..c7f5c018cc
--- /dev/null
+++ b/docs/public/catalog/blocks/x-post.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"Inter\", sans-serif;\n      }\n\n      [data-composition-id=\"x-post\"] .x-card {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 880px;\n        background: #15202b;\n        border-radius: 20px;\n        padding: 36px 36px 28px;\n        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);\n        border: 1px solid #38444d;\n        overflow: hidden;\n      }\n\n      /* Bottom glow */\n      [data-composition-id=\"x-post\"] .x-card::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 80px;\n        background: linear-gradient(to top, rgba(29, 155, 240, 0.08), transparent);\n        pointer-events: none;\n      }\n\n      /* Header row */\n      [data-composition-id=\"x-post\"] .post-header {\n        display: flex;\n        align-items: flex-start;\n        gap: 14px;\n        margin-bottom: 18px;\n        position: relative;\n      }\n\n      [data-composition-id=\"x-post\"] .avatar {\n        width: 52px;\n        height: 52px;\n        flex-shrink: 0;\n        border-radius: 50%;\n        overflow: hidden;\n      }\n\n      [data-composition-id=\"x-post\"] .avatar svg {\n        width: 52px;\n        height: 52px;\n        display: block;\n      }\n\n      [data-composition-id=\"x-post\"] .user-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        flex: 1;\n      }\n\n      [data-composition-id=\"x-post\"] .name-row {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n      }\n\n      [data-composition-id=\"x-post\"] .display-name {\n        font-size: 26px;\n        font-weight: 700;\n        color: #e7e9ea;\n        line-height: 1.3;\n      }\n\n      [data-composition-id=\"x-post\"] .verified-badge svg {\n        width: 22px;\n        height: 22px;\n        display: block;\n      }\n\n      [data-composition-id=\"x-post\"] .handle {\n        font-size: 22px;\n        font-weight: 400;\n        color: #8b98a5;\n        line-height: 1.3;\n      }\n\n      /* X logo top-right */\n      [data-composition-id=\"x-post\"] .x-logo {\n        position: absolute;\n        top: 2px;\n        right: 0;\n        width: 32px;\n        height: 32px;\n      }\n\n      [data-composition-id=\"x-post\"] .x-logo svg {\n        width: 32px;\n        height: 32px;\n        display: block;\n      }\n\n      /* Tweet body */\n      [data-composition-id=\"x-post\"] .tweet-body {\n        font-size: 30px;\n        font-weight: 400;\n        color: #e7e9ea;\n        line-height: 1.45;\n        margin-bottom: 12px;\n        display: -webkit-box;\n        -webkit-line-clamp: 4;\n        -webkit-box-orient: vertical;\n        overflow: hidden;\n      }\n\n      [data-composition-id=\"x-post\"] .hashtag {\n        color: #1d9bf0;\n      }\n\n      /* Timestamp */\n      [data-composition-id=\"x-post\"] .timestamp {\n        font-size: 22px;\n        color: #8b98a5;\n        padding-bottom: 20px;\n        border-bottom: 1px solid #38444d;\n        margin-bottom: 16px;\n      }\n\n      /* Metrics bar — matches real X spacing */\n      [data-composition-id=\"x-post\"] .metrics-bar {\n        display: flex;\n        align-items: center;\n        padding: 0;\n        position: relative;\n        z-index: 1;\n      }\n\n      [data-composition-id=\"x-post\"] .metrics-left {\n        display: flex;\n        align-items: center;\n        flex: 1;\n        justify-content: space-between;\n        padding-right: 60px;\n      }\n\n      [data-composition-id=\"x-post\"] .metrics-right {\n        display: flex;\n        align-items: center;\n        gap: 20px;\n      }\n\n      [data-composition-id=\"x-post\"] .metric {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n\n      [data-composition-id=\"x-post\"] .metric-icon {\n        width: 35px;\n        height: 35px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [data-composition-id=\"x-post\"] .metric-icon svg {\n        width: 35px;\n        height: 35px;\n        display: block;\n      }\n\n      [data-composition-id=\"x-post\"] .metric-count {\n        font-size: 20px;\n        font-weight: 400;\n        color: #8b98a5;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"x-post\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"5\"\n    >\n      <div id=\"card\" class=\"clip x-card\" data-start=\"0\" data-duration=\"5\" data-track-index=\"0\">\n        <!-- Header: prompt to replace display name, handle, and avatar -->\n        <div class=\"post-header\">\n          <div class=\"avatar\">\n            <svg viewBox=\"0 0 52 52\" fill=\"none\">\n              <circle cx=\"26\" cy=\"26\" r=\"26\" fill=\"#536471\" />\n              <circle cx=\"26\" cy=\"21\" r=\"10\" fill=\"#8b98a5\" />\n              <ellipse cx=\"26\" cy=\"42\" rx=\"16\" ry=\"12\" fill=\"#8b98a5\" />\n            </svg>\n          </div>\n          <div class=\"user-info\">\n            <div class=\"name-row\">\n              <span class=\"display-name\">Hyperframes</span>\n              <span class=\"verified-badge\">\n                <svg viewBox=\"0 0 22 22\" fill=\"none\">\n                  <circle cx=\"11\" cy=\"11\" r=\"11\" fill=\"#1d9bf0\" />\n                  <path\n                    d=\"M9.5 14.25L6.25 11l1.06-1.06 2.19 2.19 4.69-4.69L15.25 8.5 9.5 14.25z\"\n                    fill=\"#fff\"\n                  />\n                </svg>\n              </span>\n            </div>\n            <span class=\"handle\">@hyperframes</span>\n          </div>\n          <div class=\"x-logo\">\n            <svg viewBox=\"0 0 24 24\" fill=\"#e7e9ea\">\n              <path\n                d=\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"\n              />\n            </svg>\n          </div>\n        </div>\n\n        <!-- Tweet body: prompt to replace with your content -->\n        <div class=\"tweet-body\">\n          Prompt to replace this text with your tweet. Change the display name, handle, timestamp,\n          and engagement counts to match your content. <span class=\"hashtag\">#YourHashtag</span>\n        </div>\n\n        <!-- Timestamp: prompt to replace -->\n        <div class=\"timestamp\">1:10 PM &middot; Apr 7, 2026</div>\n\n        <!-- Metrics bar -->\n        <div class=\"metrics-bar\">\n          <div class=\"metrics-left\">\n            <!-- Reply -->\n            <div class=\"metric\">\n              <div class=\"metric-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"#8b98a5\">\n                  <path\n                    d=\"M1.751 10c0-4.42 3.584-8 8.005-8h4.366c4.49 0 8.129 3.64 8.129 8.13 0 2.96-1.607 5.68-4.196 7.11l-8.054 4.46v-3.69h-.067c-4.49.1-8.183-3.51-8.183-8.01zm8.005-6c-3.317 0-6.005 2.69-6.005 6 0 3.37 2.77 6.08 6.138 6.01l.351-.01h1.761v2.3l5.087-2.81c1.951-1.08 3.163-3.13 3.163-5.36 0-3.39-2.744-6.13-6.129-6.13H9.756z\"\n                  />\n                </svg>\n              </div>\n              <span class=\"metric-count\">34</span>\n            </div>\n\n            <!-- Repost -->\n            <div class=\"metric\">\n              <div class=\"metric-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"#8b98a5\">\n                  <path\n                    d=\"M4.5 3.88l4.432 4.14-1.364 1.46L5.5 7.55V16c0 1.1.896 2 2 2H13v2H7.5c-2.209 0-4-1.79-4-4V7.55L1.432 9.48.068 8.02 4.5 3.88zM16.5 6H11V4h5.5c2.209 0 4 1.79 4 4v8.45l2.068-1.93 1.364 1.46-4.432 4.14-4.432-4.14 1.364-1.46 2.068 1.93V8c0-1.1-.896-2-2-2z\"\n                  />\n                </svg>\n              </div>\n              <span class=\"metric-count\">2.3K</span>\n            </div>\n\n            <!-- Like -->\n            <div id=\"like-btn\" class=\"metric\">\n              <div class=\"metric-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                  <!-- Outline heart (visible initially) -->\n                  <path\n                    id=\"heart-outline\"\n                    d=\"M16.697 5.5c-1.222-.06-2.679.51-3.89 2.16l-.805 1.09-.806-1.09C9.984 6.01 8.526 5.44 7.304 5.5c-1.243.07-2.349.78-2.91 1.91-.552 1.12-.633 2.78.479 4.82 1.074 1.97 3.257 4.27 7.129 6.61 3.87-2.34 6.052-4.64 7.126-6.61 1.111-2.04 1.03-3.7.477-4.82-.561-1.13-1.666-1.84-2.908-1.91zm4.187 7.69c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z\"\n                    fill=\"#8b98a5\"\n                  />\n                  <!-- Filled heart (hidden initially, shown on like) -->\n                  <path\n                    id=\"heart-filled\"\n                    d=\"M20.884 13.19c-1.351 2.48-4.001 5.12-8.379 7.67l-.503.3-.504-.3c-4.379-2.55-7.029-5.19-8.382-7.67-1.36-2.5-1.41-4.86-.514-6.67.887-1.79 2.647-2.91 4.601-3.01 1.651-.09 3.368.56 4.798 2.01 1.429-1.45 3.146-2.1 4.796-2.01 1.954.1 3.714 1.22 4.601 3.01.896 1.81.846 4.17-.514 6.67z\"\n                    fill=\"#f91880\"\n                    opacity=\"0\"\n                  />\n                </svg>\n              </div>\n              <span id=\"like-count\" class=\"metric-count\">10.9K</span>\n            </div>\n\n            <!-- Views -->\n            <div class=\"metric\">\n              <div class=\"metric-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"#8b98a5\">\n                  <path\n                    d=\"M8.75 21V3h2v18h-2zM18 21V8.5h2V21h-2zM4 21l.004-10h2L6 21H4zm9.248 0v-7h2v7h-2z\"\n                  />\n                </svg>\n              </div>\n              <span class=\"metric-count\">150K</span>\n            </div>\n          </div>\n\n          <div class=\"metrics-right\">\n            <!-- Bookmark -->\n            <div class=\"metric\">\n              <div class=\"metric-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"#8b98a5\">\n                  <path\n                    d=\"M4 4.5C4 3.12 5.119 2 6.5 2h11C18.881 2 20 3.12 20 4.5v18.44l-8-5.71-8 5.71V4.5zM6.5 4c-.276 0-.5.22-.5.5v14.56l6-4.29 6 4.29V4.5c0-.28-.224-.5-.5-.5h-11z\"\n                  />\n                </svg>\n              </div>\n            </div>\n\n            <!-- Share -->\n            <div class=\"metric\">\n              <div class=\"metric-icon\">\n                <svg viewBox=\"0 0 24 24\" fill=\"#8b98a5\">\n                  <path\n                    d=\"M12 2.59l5.7 5.7-1.41 1.42L13 6.41V16h-2V6.41l-3.3 3.3-1.41-1.42L12 2.59zM21 15l-.02 3.51c0 1.38-1.12 2.49-2.5 2.49H5.5C4.11 21 3 19.88 3 18.5V15h2v3.5c0 .28.22.5.5.5h12.98c.28 0 .5-.22.5-.5L19 15h2z\"\n                  />\n                </svg>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n\n      var card = document.getElementById(\"card\");\n      var likeBtn = document.getElementById(\"like-btn\");\n      var heartOutline = document.getElementById(\"heart-outline\");\n      var heartFilled = document.getElementById(\"heart-filled\");\n      var likeCount = document.getElementById(\"like-count\");\n\n      // Start off-screen below\n      gsap.set(card, { y: 400, opacity: 0 });\n\n      // Slide in from bottom\n      tl.to(\n        card,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.6,\n          ease: \"power3.out\",\n        },\n        0.1,\n      );\n\n      // Like press-in\n      tl.to(\n        likeBtn,\n        {\n          scale: 0.85,\n          duration: 0.12,\n          ease: \"power2.out\",\n        },\n        1.5,\n      );\n\n      // Like release with spring bounce\n      tl.to(\n        likeBtn,\n        {\n          scale: 1,\n          duration: 0.4,\n          ease: \"elastic.out(1, 0.4)\",\n        },\n        1.62,\n      );\n\n      // Hide outline heart\n      tl.to(\n        heartOutline,\n        {\n          opacity: 0,\n          duration: 0.01,\n          ease: \"none\",\n        },\n        1.62,\n      );\n\n      // Show filled heart\n      tl.to(\n        heartFilled,\n        {\n          opacity: 1,\n          duration: 0.12,\n          ease: \"none\",\n        },\n        1.62,\n      );\n\n      // Like count turns pink + increments\n      tl.to(\n        likeCount,\n        {\n          color: \"#f91880\",\n          duration: 0.12,\n          ease: \"none\",\n          onStart: function () {\n            likeCount.textContent = \"11.0K\";\n          },\n        },\n        1.62,\n      );\n\n      // Slide out to bottom\n      tl.to(\n        card,\n        {\n          y: 400,\n          opacity: 0,\n          duration: 0.3,\n          ease: \"power3.in\",\n        },\n        4.2,\n      );\n\n      window.__timelines[\"x-post\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/yt-comment-card.json b/docs/public/catalog/blocks/yt-comment-card.json
new file mode 100644
index 0000000000..f8f939d9be
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-comment-card.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      #yt-cc-root {\n        /* ---- yt tokens: override in the host to re-skin the family ---- */\n        --yt-font: \"Inter\", -apple-system, sans-serif;\n        --yt-ink: #1d1d1f;\n        --yt-ink-dim: #5a5a5f;\n        /* overlay-scheme text over footage — distinct from the --yt-ink board tokens */\n        --yt-text: #ffffff;\n        --yt-text-dim: rgba(255, 255, 255, 0.72);\n        --yt-red: #e62e2e;\n        --yt-cyan: #35c8d9;\n        --yt-scanline-alpha: 0.04;\n        --yt-scanline-gap: 3px;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage or a yt-lcd board */\n        font-family: var(--yt-font);\n      }\n      /* optional full-frame LCD pass while comments are up */\n      #yt-cc-scan {\n        position: absolute;\n        inset: 0;\n        display: none;\n        background: repeating-linear-gradient(\n          0deg,\n          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,\n          transparent 1px var(--yt-scanline-gap)\n        );\n      }\n      #yt-cc-col {\n        position: absolute;\n        display: flex;\n        flex-direction: column;\n        gap: 40px;\n      }\n      .yt-cc-card {\n        display: flex;\n        gap: 22px;\n        align-items: flex-start;\n      }\n      .yt-cc-avatar {\n        flex: none;\n        width: 64px;\n        height: 64px;\n        border-radius: 50%;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 700;\n        font-size: 26px;\n        color: #ffffff;\n        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);\n      }\n      .yt-cc-avatar img {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      .yt-cc-meta {\n        display: flex;\n        align-items: baseline;\n        gap: 14px;\n      }\n      .yt-cc-user {\n        font-weight: 700;\n        font-size: 27px;\n      }\n      .yt-cc-time {\n        font-weight: 400;\n        font-size: 23px;\n      }\n      .yt-cc-text {\n        margin-top: 8px;\n        font-weight: 500;\n        font-size: 34px;\n        line-height: 1.35;\n        letter-spacing: -0.01em;\n        max-width: 860px;\n      }\n      .yt-cc-text .ch {\n        opacity: 0;\n      }\n      .yt-cc-row {\n        margin-top: 12px;\n        display: flex;\n        align-items: center;\n        gap: 10px;\n        font-weight: 600;\n        font-size: 22px;\n        opacity: 0;\n      }\n      .yt-cc-row svg {\n        width: 24px;\n        stroke-width: 2.4;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        fill: none;\n      }\n      .yt-cc-reply {\n        margin-left: 18px;\n        letter-spacing: 0.1em;\n      }\n      /* scheme: overlay (white over footage, w/ shadow) vs light (ink on boards) */\n      .yt-overlay .yt-cc-user,\n      .yt-overlay .yt-cc-text {\n        color: var(--yt-text);\n        text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);\n      }\n      .yt-overlay .yt-cc-time,\n      .yt-overlay .yt-cc-row {\n        color: var(--yt-text-dim);\n        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);\n      }\n      .yt-overlay .yt-cc-row svg {\n        stroke: var(--yt-text-dim);\n      }\n      .yt-light .yt-cc-user,\n      .yt-light .yt-cc-text {\n        color: var(--yt-ink);\n      }\n      .yt-light .yt-cc-time,\n      .yt-light .yt-cc-row {\n        color: var(--yt-ink-dim);\n      }\n      .yt-light .yt-cc-row svg {\n        stroke: var(--yt-ink-dim);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"yt-cc-root\"\n      data-composition-id=\"yt-comment-card\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-cc-scan\"></div>\n      <div id=\"yt-cc-col\"></div>\n      <div\n        id=\"yt-cc-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ----\n           Social comments typing on over footage — creator-style\n           comment cards. avatar: image path, or null -> initials chip. */\n        var CONFIG = {\n          scheme: \"overlay\", // \"overlay\" (white over footage) | \"light\" (ink on boards)\n          comments: [\n            {\n              avatar: null,\n              initials: \"PW\",\n              avatarHue: 210, // initials-chip hue when no image\n              username: \"@pixelwaves\",\n              time: \"2 days ago\",\n              text: \"Your videos are the best!\",\n              likes: 47,\n            },\n            {\n              avatar: null,\n              initials: \"FR\",\n              avatarHue: 340,\n              username: \"@framerate\",\n              time: \"1 day ago\",\n              text: \"That camera move at 0:12 though 🔥\",\n              likes: 12,\n            },\n          ],\n          x: 140,\n          y: null, // null = vertically centered\n          typeCharDelay: 0.024, // s per character (capped so a comment types <= 2.2s)\n          scanlines: false, // full-frame LCD pass while comments are up\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 8;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        var root = document.getElementById(\"yt-cc-root\");\n        var col = document.getElementById(\"yt-cc-col\");\n        root.classList.add(CONFIG.scheme === \"light\" ? \"yt-light\" : \"yt-overlay\");\n        if (CONFIG.scanlines) document.getElementById(\"yt-cc-scan\").style.display = \"block\";\n\n        var THUMB =\n          '<svg viewBox=\"0 0 24 24\"><path d=\"M7 11v9M7 11l3.2-6.4a2 2 0 0 1 3.6 1.2V9h4.6a2 2 0 0 1 2 2.4l-1.2 6a2 2 0 0 1-2 1.6H7M7 11H4a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h3\"/></svg>';\n\n        /* build cards */\n        CONFIG.comments.forEach(function (c, i) {\n          var card = document.createElement(\"div\");\n          card.className = \"yt-cc-card\";\n          card.id = \"yt-cc-card-\" + i;\n\n          var av = document.createElement(\"div\");\n          av.className = \"yt-cc-avatar\";\n          av.id = \"yt-cc-av-\" + i;\n          if (c.avatar) {\n            var img = document.createElement(\"img\");\n            img.src = c.avatar;\n            av.appendChild(img);\n          } else {\n            av.textContent = c.initials || \"?\";\n            av.style.background =\n              \"linear-gradient(135deg, hsl(\" +\n              (c.avatarHue || 210) +\n              \", 62%, 52%), hsl(\" +\n              ((c.avatarHue || 210) + 40) +\n              \", 62%, 42%))\";\n          }\n          card.appendChild(av);\n\n          var body = document.createElement(\"div\");\n          var meta = document.createElement(\"div\");\n          meta.className = \"yt-cc-meta\";\n          meta.id = \"yt-cc-meta-\" + i;\n          var user = document.createElement(\"span\");\n          user.className = \"yt-cc-user\";\n          user.textContent = c.username;\n          var time = document.createElement(\"span\");\n          time.className = \"yt-cc-time\";\n          time.textContent = c.time || \"\";\n          meta.appendChild(user);\n          meta.appendChild(time);\n          body.appendChild(meta);\n\n          var text = document.createElement(\"div\");\n          text.className = \"yt-cc-text\";\n          text.id = \"yt-cc-text-\" + i;\n          Array.from(c.text).forEach(function (ch) {\n            var span = document.createElement(\"span\");\n            span.className = \"ch\";\n            span.textContent = ch;\n            text.appendChild(span);\n          });\n          body.appendChild(text);\n\n          var row = document.createElement(\"div\");\n          row.className = \"yt-cc-row\";\n          row.id = \"yt-cc-row-\" + i;\n          row.innerHTML =\n            THUMB + \"<span>\" + (c.likes || 0) + '</span><span class=\"yt-cc-reply\">REPLY</span>';\n          body.appendChild(row);\n          card.appendChild(body);\n          col.appendChild(card);\n        });\n\n        /* position (measure after building) */\n        col.style.left = CONFIG.x + \"px\";\n        var rect = col.getBoundingClientRect();\n        col.style.top =\n          (CONFIG.y === null ? Math.round((1080 - rect.height) / 2) : CONFIG.y) + \"px\";\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* comments enter sequentially: avatar pops, meta fades, text types, row fades */\n        var t = CONFIG.animationIn ? 0.3 : 0;\n        CONFIG.comments.forEach(function (c, i) {\n          var av = \"#yt-cc-av-\" + i,\n            meta = \"#yt-cc-meta-\" + i,\n            row = \"#yt-cc-row-\" + i;\n          var chars = document.querySelectorAll(\"#yt-cc-text-\" + i + \" .ch\");\n          var delay = Math.min(CONFIG.typeCharDelay, 2.2 / Math.max(1, chars.length));\n\n          gsap.set(av, { opacity: 0, scale: 0.5 });\n          gsap.set(meta, { opacity: 0, y: 10 });\n          tl.to(av, { opacity: 1, scale: 1, duration: 0.45, ease: \"back.out(1.6)\" }, t);\n          tl.to(meta, { opacity: 1, y: 0, duration: 0.4, ease: \"power2.out\" }, t + 0.12);\n          t += 0.4;\n          tl.to(chars, { opacity: 1, duration: 0.02, stagger: delay, ease: \"none\" }, t);\n          t += chars.length * delay + 0.15;\n          tl.to(row, { opacity: 1, duration: 0.35, ease: \"power2.out\" }, t);\n          t += 0.5;\n        });\n\n        /* exit + hard kill (auto-scaled out) */\n        if (CONFIG.animationOut) {\n          tl.to(col, { opacity: 0, y: -18, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"yt-comment-card\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/yt-lcd-background.json b/docs/public/catalog/blocks/yt-lcd-background.json
new file mode 100644
index 0000000000..26b1c90b75
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-lcd-background.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #yt-lcd-root {\n        /* ---- yt tokens: override in the host to re-skin the family ---- */\n        --yt-font: \"Inter\", -apple-system, sans-serif;\n        --yt-paper: #e9e9e6;\n        --yt-paper-dark: #1c1c1e;\n        --yt-ink: #1d1d1f;\n        --yt-ink-dark: #e8e8e4;\n        --yt-cyan: #35c8d9;\n        --yt-prism-r: #ff2a4d;\n        --yt-prism-b: #2a7fff;\n        --yt-scanline-alpha: 0.05;\n        --yt-scanline-gap: 3px;\n        --yt-grid-size: 28px;\n        --yt-grid-alpha: 0.06;\n        --yt-grain-alpha: 0.08;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: var(--yt-paper);\n        font-family: var(--yt-font);\n      }\n      #yt-lcd-root.yt-dark {\n        background: var(--yt-paper-dark);\n      }\n      /* the LCD surface: scanlines + optional pixel grid + static grain */\n      #yt-lcd-scan {\n        position: absolute;\n        inset: -20px;\n        background: repeating-linear-gradient(\n          0deg,\n          rgba(0, 0, 0, var(--yt-scanline-alpha)) 0 1px,\n          transparent 1px var(--yt-scanline-gap)\n        );\n      }\n      .yt-dark #yt-lcd-scan {\n        background: repeating-linear-gradient(\n          0deg,\n          rgba(255, 255, 255, calc(var(--yt-scanline-alpha) * 1.4)) 0 1px,\n          transparent 1px var(--yt-scanline-gap)\n        );\n      }\n      #yt-lcd-grid {\n        position: absolute;\n        inset: 0;\n        background:\n          repeating-linear-gradient(\n            0deg,\n            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,\n            transparent 1px var(--yt-grid-size)\n          ),\n          repeating-linear-gradient(\n            90deg,\n            rgba(0, 0, 0, var(--yt-grid-alpha)) 0 1px,\n            transparent 1px var(--yt-grid-size)\n          );\n      }\n      .yt-dark #yt-lcd-grid {\n        background:\n          repeating-linear-gradient(\n            0deg,\n            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,\n            transparent 1px var(--yt-grid-size)\n          ),\n          repeating-linear-gradient(\n            90deg,\n            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,\n            transparent 1px var(--yt-grid-size)\n          );\n      }\n      #yt-lcd-grain {\n        position: absolute;\n        inset: 0;\n        opacity: var(--yt-grain-alpha);\n        background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E\");\n      }\n      /* the display text: prism copies behind the main fill, optional bow */\n      #yt-lcd-bow {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 26px;\n      }\n      .yt-lcd-line {\n        position: relative;\n        font-weight: 700;\n        line-height: 1;\n        letter-spacing: -0.02em;\n        white-space: nowrap;\n      }\n      .yt-lcd-copy {\n        position: absolute;\n        inset: 0;\n      }\n      .yt-lcd-copy.r {\n        color: var(--yt-prism-r);\n      }\n      .yt-lcd-copy.b {\n        color: var(--yt-prism-b);\n      }\n      .yt-lcd-main {\n        position: relative;\n      }\n      #yt-lcd-sub {\n        font-weight: 500;\n        letter-spacing: 0.14em;\n        text-transform: uppercase;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"yt-lcd-root\"\n      data-composition-id=\"yt-lcd-background\"\n      data-start=\"0\"\n      data-duration=\"10\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-lcd-scan\" data-layout-allow-overflow></div>\n      <div id=\"yt-lcd-grid\"></div>\n      <div id=\"yt-lcd-grain\"></div>\n      <div id=\"yt-lcd-bow\"></div>\n      <div\n        id=\"yt-lcd-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"10\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ---- */\n        var CONFIG = {\n          scheme: \"light\", // \"light\" | \"dark\" (light/dark toggle)\n          title: \"yt-lcd\",\n          subtitle: \"background 01\",\n          fontSize: 230,\n          subSize: 34,\n          color: null, // null = scheme ink (AA). Cyan \"#35c8d9\" is dark-scheme only: 1.66:1 on light paper fails AA\n          blur: 2.2, // resting text blur px (blur amount)\n          prism: { enabled: true, offset: 3 }, // chromatic fringe (chromatic fringe)\n          bow: { enabled: true, deg: 7 }, // perspective bow (safe CRT-bow variant)\n          grid: { enabled: true }, // pixel grid (pixel grid)\n          scanDrift: true, // slow scanline scroll for life\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 10;\n        /* the yt- family improvement: in/out durations auto-scale to block\n           length (animations adjust to the layer length) */\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var IN = clamp(DUR * 0.08, 0.3, 0.8);\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        var root = document.getElementById(\"yt-lcd-root\");\n        var bow = document.getElementById(\"yt-lcd-bow\");\n        var grid = document.getElementById(\"yt-lcd-grid\");\n        var scan = document.getElementById(\"yt-lcd-scan\");\n\n        if (CONFIG.scheme === \"dark\") root.classList.add(\"yt-dark\");\n        if (!CONFIG.grid.enabled) grid.style.display = \"none\";\n\n        var mainColor =\n          CONFIG.color || (CONFIG.scheme === \"dark\" ? \"var(--yt-ink-dark)\" : \"var(--yt-ink)\");\n\n        /* build a line: prism copies behind + main fill */\n        function buildLine(text, size, idBase, prismOn) {\n          var line = document.createElement(\"div\");\n          line.className = \"yt-lcd-line\";\n          line.style.fontSize = size + \"px\";\n          [\"r\", \"b\"].forEach(function (ch) {\n            if (!CONFIG.prism.enabled || !prismOn) return;\n            var c = document.createElement(\"div\");\n            c.className = \"yt-lcd-copy \" + ch;\n            c.id = idBase + \"-\" + ch;\n            c.textContent = text;\n            line.appendChild(c);\n          });\n          var main = document.createElement(\"div\");\n          main.className = \"yt-lcd-main\";\n          main.id = idBase + \"-main\";\n          main.textContent = text;\n          main.style.color = mainColor;\n          line.appendChild(main);\n          return line;\n        }\n\n        var titleLine = buildLine(CONFIG.title, CONFIG.fontSize, \"yt-lcd-t\", true);\n        bow.appendChild(titleLine);\n        if (CONFIG.subtitle) {\n          var sub = buildLine(\n            CONFIG.subtitle,\n            CONFIG.subSize,\n            \"yt-lcd-s\",\n            false,\n          ); /* fringe is title-only */\n          sub.id = \"yt-lcd-sub\";\n          bow.appendChild(sub);\n        }\n        if (CONFIG.bow.enabled) {\n          bow.style.transform = \"perspective(950px) rotateX(\" + CONFIG.bow.deg + \"deg)\";\n        }\n\n        var O = CONFIG.prism.offset;\n        var tl = gsap.timeline({ paused: true });\n\n        /* entrance: board fades, text focuses in from heavy blur while the\n           prism fringe settles from wide to resting offset */\n        if (CONFIG.animationIn) {\n          tl.from(root, { opacity: 0, duration: IN, ease: \"power2.out\" }, 0);\n          gsap.set(bow, { opacity: 0, filter: \"blur(16px)\" });\n          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: \"power2.out\" }, IN * 0.4);\n          tl.to(\n            bow,\n            { filter: \"blur(\" + CONFIG.blur + \"px)\", duration: IN * 2.2, ease: \"power2.out\" },\n            IN * 0.4,\n          );\n          if (CONFIG.prism.enabled) {\n            gsap.set(\".yt-lcd-copy.r\", { x: -O * 4, opacity: 0.5 });\n            gsap.set(\".yt-lcd-copy.b\", { x: O * 4, opacity: 0.5 });\n            tl.to(\n              \".yt-lcd-copy.r\",\n              { x: -O, opacity: 0.85, duration: IN * 2.2, ease: \"power2.out\" },\n              IN * 0.4,\n            );\n            tl.to(\n              \".yt-lcd-copy.b\",\n              { x: O, opacity: 0.85, duration: IN * 2.2, ease: \"power2.out\" },\n              IN * 0.4,\n            );\n          }\n        } else {\n          gsap.set(bow, { filter: \"blur(\" + CONFIG.blur + \"px)\" });\n          if (CONFIG.prism.enabled) {\n            gsap.set(\".yt-lcd-copy.r\", { x: -O, opacity: 0.85 });\n            gsap.set(\".yt-lcd-copy.b\", { x: O, opacity: 0.85 });\n          }\n        }\n\n        /* ambient: slow scanline drift + a breath of prism wobble */\n        if (CONFIG.scanDrift) {\n          tl.to(\n            scan,\n            {\n              y: 14,\n              duration: 3.1,\n              ease: \"sine.inOut\",\n              yoyo: true,\n              repeat: Math.max(1, Math.floor((DUR - 1) / 3.1) - 0),\n            },\n            0.5,\n          );\n        }\n        if (CONFIG.prism.enabled) {\n          tl.to(\n            \".yt-lcd-copy.r\",\n            { x: -O - 1.2, duration: 2.4, ease: \"sine.inOut\", yoyo: true, repeat: 2 },\n            2.0,\n          );\n          tl.to(\n            \".yt-lcd-copy.b\",\n            { x: O + 1.2, duration: 2.4, ease: \"sine.inOut\", yoyo: true, repeat: 2 },\n            2.0,\n          );\n        }\n\n        /* exit + hard kill */\n        if (CONFIG.animationOut) {\n          tl.to(root, { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"yt-lcd-background\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/yt-logo-intro.json b/docs/public/catalog/blocks/yt-logo-intro.json
new file mode 100644
index 0000000000..63a3a9494a
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-logo-intro.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #yt-li-root {\n        /* ---- yt tokens ---- */\n        --yt-font: \"Inter\", -apple-system, sans-serif;\n        --yt-paper: #e9e9e6;\n        --yt-paper-dark: #1c1c1e;\n        --yt-ink: #1d1d1f;\n        --yt-ink-dark: #e8e8e4;\n        --yt-red: #e62e2e;\n        --yt-line-alpha: 0.1;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: var(--yt-paper);\n        font-family: var(--yt-font);\n      }\n      #yt-li-root.yt-dark {\n        background: var(--yt-paper-dark);\n      }\n      #yt-li-lines {\n        position: absolute;\n        inset: 0;\n      }\n      .yt-li-line {\n        position: absolute;\n        left: -40px;\n        right: -40px;\n        height: 2px;\n        background: rgba(0, 0, 0, var(--yt-line-alpha));\n      }\n      .yt-dark .yt-li-line {\n        background: rgba(255, 255, 255, var(--yt-line-alpha));\n      }\n      #yt-li-center {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 42px;\n      }\n      #yt-li-logo {\n        width: 220px;\n        height: 220px;\n        border-radius: 50%;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        background: var(--yt-ink);\n        color: #ffffff;\n        font-weight: 700;\n        font-size: 92px;\n        letter-spacing: -0.03em;\n        overflow: hidden;\n      }\n      .yt-dark #yt-li-logo {\n        background: var(--yt-ink-dark);\n        color: var(--yt-paper-dark);\n      }\n      #yt-li-logo img {\n        width: 100%;\n        height: 100%;\n        object-fit: contain;\n      }\n      .yt-li-shadow #yt-li-logo,\n      .yt-li-shadow #yt-li-text {\n        filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.22));\n      }\n      #yt-li-textrow {\n        display: flex;\n        align-items: center;\n        gap: 26px;\n        min-height: 96px;\n      }\n      #yt-li-text {\n        font-weight: 700;\n        font-size: 74px;\n        letter-spacing: -0.015em;\n        color: var(--yt-ink);\n        white-space: nowrap;\n      }\n      .yt-dark #yt-li-text {\n        color: var(--yt-ink-dark);\n      }\n      #yt-li-arrow {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 84px;\n        height: 64px;\n        border-radius: 16px;\n        background: var(--yt-red);\n        opacity: 0;\n      }\n      #yt-li-arrow svg {\n        width: 38px;\n        stroke: #ffffff;\n        stroke-width: 3.2;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n        fill: none;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"yt-li-root\"\n      data-composition-id=\"yt-logo-intro\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-li-lines\"></div>\n      <div id=\"yt-li-center\">\n        <div id=\"yt-li-logo\"></div>\n        <div id=\"yt-li-textrow\">\n          <div id=\"yt-li-text\"></div>\n          <div id=\"yt-li-arrow\">\n            <svg viewBox=\"0 0 24 24\"><path d=\"M4 12h15M13 5l7 7-7 7\" /></svg>\n          </div>\n        </div>\n      </div>\n      <div\n        id=\"yt-li-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           A logo intro: logo drops in, a kicker line, then the title\n           with an accent-red arrow. Background lines with frequency +\n           distortion (seeded offsets — no randomness). */\n        var CONFIG = {\n          scheme: \"light\", // \"light\" | \"dark\"\n          logoType: \"text\", // \"text\" | \"image\"\n          logoText: \"YT\",\n          logoSrc: null,\n          kicker: \"LET'S DIVE IN\",\n          title: \"yt-logo-intro\",\n          arrow: { enabled: true },\n          lines: { enabled: true, count: 12, distort: 10 },\n          dropShadow: true,\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 6;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var IN = clamp(DUR * 0.08, 0.3, 0.8);\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        var root = document.getElementById(\"yt-li-root\");\n        var lines = document.getElementById(\"yt-li-lines\");\n        var logo = document.getElementById(\"yt-li-logo\");\n        var text = document.getElementById(\"yt-li-text\");\n        var arrow = document.getElementById(\"yt-li-arrow\");\n\n        if (CONFIG.scheme === \"dark\") root.classList.add(\"yt-dark\");\n        if (CONFIG.dropShadow) root.classList.add(\"yt-li-shadow\");\n\n        /* background lines: even spacing + seeded sine distortion */\n        if (CONFIG.lines.enabled) {\n          var gap = 1080 / (CONFIG.lines.count + 1);\n          for (var i = 1; i <= CONFIG.lines.count; i++) {\n            var l = document.createElement(\"div\");\n            l.className = \"yt-li-line\";\n            var wobble = Math.sin(i * 2.399) * CONFIG.lines.distort;\n            l.style.top = Math.round(i * gap + wobble) + \"px\";\n            l.style.transform = \"rotate(\" + (Math.sin(i * 1.7) * 0.35).toFixed(2) + \"deg)\";\n            lines.appendChild(l);\n          }\n        }\n\n        if (CONFIG.logoType === \"image\" && CONFIG.logoSrc) {\n          var img = document.createElement(\"img\");\n          img.src = CONFIG.logoSrc;\n          logo.appendChild(img);\n        } else {\n          logo.textContent = CONFIG.logoText;\n        }\n        if (!CONFIG.arrow.enabled) arrow.style.display = \"none\";\n\n        var tl = gsap.timeline({ paused: true });\n\n        if (CONFIG.animationIn) tl.from(root, { opacity: 0, duration: IN, ease: \"power2.out\" }, 0);\n\n        /* logo pops */\n        gsap.set(logo, { opacity: 0, scale: 0.55, y: 24 });\n        tl.to(\n          logo,\n          { opacity: 1, scale: 1, y: 0, duration: 0.55, ease: \"back.out(1.5)\" },\n          IN * 0.6,\n        );\n\n        /* kicker -> swap -> title + arrow */\n        gsap.set(text, { opacity: 0, y: 14 });\n        tl.set(text, { textContent: CONFIG.kicker, letterSpacing: \"0.22em\", fontSize: \"40px\" }, 0);\n        tl.to(text, { opacity: 1, y: 0, duration: 0.45, ease: \"power2.out\" }, IN * 0.6 + 0.45);\n        tl.to(text, { opacity: 0, y: -12, duration: 0.3, ease: \"power2.in\" }, 2.3);\n        tl.set(\n          text,\n          { textContent: CONFIG.title, letterSpacing: \"-0.015em\", fontSize: \"74px\", y: 14 },\n          2.62,\n        );\n        tl.to(text, { opacity: 1, y: 0, duration: 0.5, ease: \"power3.out\" }, 2.66);\n        gsap.set(arrow, { scale: 0.5, x: -14 });\n        tl.to(arrow, { opacity: 1, scale: 1, x: 0, duration: 0.45, ease: \"back.out(1.6)\" }, 2.9);\n\n        /* ambient: lines breathe */\n        tl.to(lines, { y: 8, duration: 2.2, ease: \"sine.inOut\", yoyo: true, repeat: 1 }, 0.8);\n\n        /* exit + hard kill */\n        if (CONFIG.animationOut) {\n          tl.to(root, { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"yt-logo-intro\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/yt-lower-third.json b/docs/public/catalog/blocks/yt-lower-third.json
new file mode 100644
index 0000000000..48f896e73b
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-lower-third.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;700&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n      }\n      html,\n      body {\n        background: #1a1a2e;\n        overflow: hidden;\n      }\n      body {\n        width: 1920px;\n        height: 1080px;\n        font-family: \"DM Sans\", sans-serif;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .lower-third {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        display: flex;\n        align-items: center;\n        gap: 28px;\n        background: #ffffff;\n        border-radius: 60px;\n        padding: 20px 32px 20px 20px;\n        box-shadow: 0 6px 32px rgba(0, 0, 0, 0.14);\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .avatar {\n        width: 96px;\n        height: 96px;\n        border-radius: 50%;\n        object-fit: cover;\n        flex-shrink: 0;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .channel-info {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        margin-right: 20px;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .channel-name {\n        font-size: 34px;\n        font-weight: 700;\n        color: #0f0f0f;\n        line-height: 1.3;\n        letter-spacing: -0.01em;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .subscriber-count {\n        font-size: 22px;\n        font-weight: 400;\n        color: #606060;\n        line-height: 1.3;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .subscribe-btn {\n        position: relative;\n        width: 220px;\n        height: 68px;\n        border-radius: 34px;\n        background: #0f0f0f;\n        flex-shrink: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .btn-text {\n        position: absolute;\n        font-family: \"DM Sans\", sans-serif;\n        font-size: 24px;\n        font-weight: 700;\n        color: #ffffff;\n        letter-spacing: 0.02em;\n        white-space: nowrap;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .btn-text-subscribe {\n        opacity: 1;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .btn-text-subscribed {\n        opacity: 0;\n        display: flex;\n        align-items: center;\n        gap: 8px;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .check-icon {\n        display: inline-block;\n        width: 24px;\n        height: 24px;\n      }\n\n      [data-composition-id=\"yt-lower-third\"] .check-icon svg {\n        width: 24px;\n        height: 24px;\n        display: block;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"root\"\n      data-composition-id=\"yt-lower-third\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4.5\"\n    >\n      <div\n        id=\"card\"\n        class=\"clip lower-third\"\n        data-start=\"0\"\n        data-duration=\"4.5\"\n        data-track-index=\"0\"\n      >\n        <img class=\"avatar\" src=\"/public/catalog/assets/a300f59c31d2ea16.jpg\" alt=\"HeyGen\" crossorigin=\"anonymous\" />\n        <div class=\"channel-info\">\n          <div class=\"channel-name\">HeyGen</div>\n          <div class=\"subscriber-count\">82.2K subscribers</div>\n        </div>\n        <div id=\"subscribe-btn\" class=\"subscribe-btn\">\n          <span id=\"btn-subscribe\" class=\"btn-text btn-text-subscribe\">Subscribe</span>\n          <span id=\"btn-subscribed\" class=\"btn-text btn-text-subscribed\">\n            <span class=\"check-icon\"\n              ><svg\n                viewBox=\"0 0 24 24\"\n                fill=\"none\"\n                stroke=\"#fff\"\n                stroke-width=\"2.5\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              >\n                <polyline points=\"20 6 9 17 4 12\"></polyline></svg\n            ></span>\n            Subscribed\n          </span>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      window.__timelines = window.__timelines || {};\n\n      var tl = gsap.timeline({ paused: true });\n\n      var card = document.getElementById(\"card\");\n      var btn = document.getElementById(\"subscribe-btn\");\n      var textSub = document.getElementById(\"btn-subscribe\");\n      var textSubd = document.getElementById(\"btn-subscribed\");\n\n      // Slide in from bottom\n      gsap.set(card, { y: 300, opacity: 0 });\n\n      tl.to(\n        card,\n        {\n          y: 0,\n          opacity: 1,\n          duration: 0.5,\n          ease: \"power3.out\",\n        },\n        0.1,\n      );\n\n      // Hold, then button press-in\n      tl.to(\n        btn,\n        {\n          scale: 0.92,\n          duration: 0.15,\n          ease: \"power2.out\",\n        },\n        1.0,\n      );\n\n      // Button release with spring bounce + text swap\n      tl.to(\n        btn,\n        {\n          scale: 1,\n          duration: 0.4,\n          ease: \"elastic.out(1, 0.4)\",\n        },\n        1.15,\n      );\n\n      // Fade out \"Subscribe\", fade in \"Subscribed\"\n      tl.to(\n        textSub,\n        {\n          opacity: 0,\n          duration: 0.08,\n          ease: \"none\",\n        },\n        1.15,\n      );\n\n      tl.to(\n        textSubd,\n        {\n          opacity: 1,\n          duration: 0.08,\n          ease: \"none\",\n        },\n        1.18,\n      );\n\n      // Slide out to bottom (inverse of entrance)\n      tl.to(\n        card,\n        {\n          y: 300,\n          opacity: 0,\n          duration: 0.25,\n          ease: \"power3.in\",\n        },\n        3.8,\n      );\n\n      window.__timelines[\"yt-lower-third\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/yt-prism-title.json b/docs/public/catalog/blocks/yt-prism-title.json
new file mode 100644
index 0000000000..ddbf4aafaf
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-prism-title.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #yt-pt-root {\n        /* ---- yt tokens: override in the host to re-skin the family ---- */\n        --yt-font: \"Inter\", -apple-system, sans-serif;\n        --yt-cyan: #35c8d9;\n        --yt-prism-r: #ff2a4d;\n        --yt-prism-b: #2a7fff;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: transparent; /* overlays footage, a yt-lcd board, anything */\n        font-family: var(--yt-font);\n      }\n      #yt-pt-bow {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n      #yt-pt-line {\n        position: relative;\n        font-weight: 700;\n        line-height: 1;\n        letter-spacing: -0.02em;\n        white-space: nowrap;\n      }\n      .yt-pt-copy {\n        position: absolute;\n        inset: 0;\n      }\n      .yt-pt-copy.r {\n        color: var(--yt-prism-r);\n      }\n      .yt-pt-copy.b {\n        color: var(--yt-prism-b);\n      }\n      #yt-pt-main {\n        position: relative;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"yt-pt-root\"\n      data-composition-id=\"yt-prism-title\"\n      data-start=\"0\"\n      data-duration=\"6\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-pt-bow\"></div>\n      <div\n        id=\"yt-pt-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"6\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters (inspector-style CONFIG) ----\n           The cyan hero title with the full treatment stack, on a\n           transparent root — drop it over footage or a yt-lcd board. */\n        var CONFIG = {\n          title: \"yt-prism\",\n          fontSize: 260,\n          color: \"#35c8d9\", // bright cyan, for dark footage/boards (1.66:1 on light paper fails AA); use a darker cyan e.g. \"#0f7d8a\" on light boards\n          blur: 2.5, // resting blur px\n          prism: { enabled: true, offset: 4 },\n          bow: { enabled: true, deg: 6 },\n          drift: true, // slow scale breath while held\n          x: null, // null = centered\n          y: null,\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 6;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var IN = clamp(DUR * 0.08, 0.3, 0.8);\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        var root = document.getElementById(\"yt-pt-root\");\n        var bow = document.getElementById(\"yt-pt-bow\");\n\n        /* build: prism copies behind the main fill */\n        var line = document.createElement(\"div\");\n        line.id = \"yt-pt-line\";\n        line.style.fontSize = CONFIG.fontSize + \"px\";\n        [\"r\", \"b\"].forEach(function (ch) {\n          if (!CONFIG.prism.enabled) return;\n          var c = document.createElement(\"div\");\n          c.className = \"yt-pt-copy \" + ch;\n          c.textContent = CONFIG.title;\n          line.appendChild(c);\n        });\n        var main = document.createElement(\"div\");\n        main.id = \"yt-pt-main\";\n        main.textContent = CONFIG.title;\n        main.style.color = CONFIG.color;\n        line.appendChild(main);\n        bow.appendChild(line);\n\n        if (CONFIG.bow.enabled) {\n          bow.style.transform = \"perspective(950px) rotateX(\" + CONFIG.bow.deg + \"deg)\";\n        }\n        if (CONFIG.x !== null || CONFIG.y !== null) {\n          bow.style.justifyContent = CONFIG.x === null ? \"center\" : \"flex-start\";\n          bow.style.alignItems = CONFIG.y === null ? \"center\" : \"flex-start\";\n          if (CONFIG.x !== null) line.style.marginLeft = CONFIG.x + \"px\";\n          if (CONFIG.y !== null) line.style.marginTop = CONFIG.y + \"px\";\n        }\n\n        var O = CONFIG.prism.offset;\n        var tl = gsap.timeline({ paused: true });\n\n        /* entrance: focus in from heavy blur, prism settles wide -> resting */\n        if (CONFIG.animationIn) {\n          gsap.set(bow, { opacity: 0, filter: \"blur(18px)\" });\n          tl.to(bow, { opacity: 1, duration: IN * 1.4, ease: \"power2.out\" }, 0.1);\n          tl.to(\n            bow,\n            { filter: \"blur(\" + CONFIG.blur + \"px)\", duration: IN * 2.4, ease: \"power2.out\" },\n            0.1,\n          );\n          if (CONFIG.prism.enabled) {\n            gsap.set(\".yt-pt-copy.r\", { x: -O * 4.5, opacity: 0.45 });\n            gsap.set(\".yt-pt-copy.b\", { x: O * 4.5, opacity: 0.45 });\n            tl.to(\n              \".yt-pt-copy.r\",\n              { x: -O, opacity: 0.85, duration: IN * 2.4, ease: \"power2.out\" },\n              0.1,\n            );\n            tl.to(\n              \".yt-pt-copy.b\",\n              { x: O, opacity: 0.85, duration: IN * 2.4, ease: \"power2.out\" },\n              0.1,\n            );\n          }\n        } else {\n          gsap.set(bow, { filter: \"blur(\" + CONFIG.blur + \"px)\" });\n          if (CONFIG.prism.enabled) {\n            gsap.set(\".yt-pt-copy.r\", { x: -O, opacity: 0.85 });\n            gsap.set(\".yt-pt-copy.b\", { x: O, opacity: 0.85 });\n          }\n        }\n\n        /* ambient: slow scale breath + prism wobble */\n        if (CONFIG.drift) {\n          tl.to(line, { scale: 1.035, duration: DUR - 1, ease: \"sine.out\" }, 0.4);\n        }\n        if (CONFIG.prism.enabled) {\n          tl.to(\n            \".yt-pt-copy.r\",\n            { x: -O - 1.4, duration: 1.9, ease: \"sine.inOut\", yoyo: true, repeat: 1 },\n            1.4,\n          );\n          tl.to(\n            \".yt-pt-copy.b\",\n            { x: O + 1.4, duration: 1.9, ease: \"sine.inOut\", yoyo: true, repeat: 1 },\n            1.4,\n          );\n        }\n\n        /* exit + hard kill */\n        if (CONFIG.animationOut) {\n          tl.to(\n            bow,\n            { opacity: 0, filter: \"blur(12px)\", duration: OUT, ease: \"power2.in\" },\n            DUR - OUT - 0.05,\n          );\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"yt-prism-title\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/blocks/yt-vertical-fill.json b/docs/public/catalog/blocks/yt-vertical-fill.json
new file mode 100644
index 0000000000..b019832a4e
--- /dev/null
+++ b/docs/public/catalog/blocks/yt-vertical-fill.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: transparent;\n        overflow: hidden;\n      }\n      #yt-vf-root {\n        /* ---- yt tokens ---- */\n        --yt-font: \"Inter\", -apple-system, sans-serif;\n        --yt-grid-size: 28px;\n        --yt-grid-alpha: 0.05;\n        --yt-stage: #101012;\n        --yt-scrim: rgba(8, 8, 10, 0.28);\n        --yt-cyan: #35c8d9;\n        --yt-prism-b: #2a7fff;\n        --yt-violet: #7d5cff;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: var(--yt-stage);\n        font-family: var(--yt-font);\n      }\n      .yt-vf-media {\n        position: absolute;\n        overflow: hidden;\n      }\n      .yt-vf-media img,\n      .yt-vf-media .yt-vf-fill {\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      #yt-vf-bg {\n        inset: -60px;\n        filter: blur(42px) brightness(0.75);\n      }\n      .yt-vf-side {\n        top: 0;\n        bottom: 0;\n        width: 656px;\n      }\n      #yt-vf-scrim {\n        position: absolute;\n        inset: 0;\n        background: var(--yt-scrim);\n      }\n      #yt-vf-grid {\n        position: absolute;\n        inset: 0;\n        background:\n          repeating-linear-gradient(\n            0deg,\n            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,\n            transparent 1px var(--yt-grid-size)\n          ),\n          repeating-linear-gradient(\n            90deg,\n            rgba(255, 255, 255, var(--yt-grid-alpha)) 0 1px,\n            transparent 1px var(--yt-grid-size)\n          );\n      }\n      #yt-vf-fg {\n        top: 0;\n        bottom: 0;\n        left: 656px;\n        width: 608px;\n        box-shadow: 0 0 90px rgba(0, 0, 0, 0.55);\n      }\n      /* stand-in portrait when no media is configured (self-demo) */\n      .yt-vf-fill {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-weight: 700;\n        font-size: 120px;\n        color: rgba(255, 255, 255, 0.9);\n        background: linear-gradient(\n          160deg,\n          var(--yt-cyan) 0%,\n          var(--yt-prism-b) 50%,\n          var(--yt-violet) 100%\n        );\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"yt-vf-root\"\n      data-composition-id=\"yt-vertical-fill\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"yt-vf-media\" id=\"yt-vf-bg\" data-layout-allow-overflow></div>\n      <div class=\"yt-vf-media yt-vf-side\" id=\"yt-vf-side-l\" style=\"left: 0\"></div>\n      <div class=\"yt-vf-media yt-vf-side\" id=\"yt-vf-side-r\" style=\"right: 0\"></div>\n      <div id=\"yt-vf-scrim\"></div>\n      <div id=\"yt-vf-grid\"></div>\n      <div class=\"yt-vf-media\" id=\"yt-vf-fg\"></div>\n      <div\n        id=\"yt-vf-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"8\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- published parameters ----\n           Vertical media filling a 16:9 frame — three fill modes:\n           mode \"scale\" (big blurred copy behind), \"mirror\" (flanking\n           mirrored copies), \"copy\" (flanking straight copies).\n           IMAGES ONLY inside this block: the runtime never seeks media\n           elements inside a sub-composition (renders black). For live\n           vertical FOOTAGE, keep the media element in the HOST root\n           positioned over the fg slot (left:656px width:608px) and feed\n           this block a representative still for the fill layers. */\n        var CONFIG = {\n          src: null, // portrait IMAGE path; null -> stand-in gradient (demo)\n          mode: \"scale\", // \"scale\" | \"mirror\" | \"copy\"\n          fgContrast: 1.06,\n          fgBrightness: 1.03,\n          fgSaturation: 1.08,\n          grid: { enabled: true },\n          kenBurns: true,\n          animationIn: true,\n          animationOut: true,\n        };\n\n        var DUR = 8;\n        function clamp(v, lo, hi) {\n          return Math.min(hi, Math.max(lo, v));\n        }\n        var IN = clamp(DUR * 0.08, 0.3, 0.8);\n        var OUT = clamp(DUR * 0.06, 0.25, 0.6);\n\n        var root = document.getElementById(\"yt-vf-root\");\n        var bg = document.getElementById(\"yt-vf-bg\");\n        var sideL = document.getElementById(\"yt-vf-side-l\");\n        var sideR = document.getElementById(\"yt-vf-side-r\");\n        var fg = document.getElementById(\"yt-vf-fg\");\n        var grid = document.getElementById(\"yt-vf-grid\");\n\n        if (!CONFIG.grid.enabled) grid.style.display = \"none\";\n\n        function media(id) {\n          if (!CONFIG.src) {\n            var d = document.createElement(\"div\");\n            d.className = \"yt-vf-fill\";\n            d.textContent = \"9:16\";\n            return d;\n          }\n          var img = document.createElement(\"img\");\n          img.src = CONFIG.src;\n          img.id = id;\n          return img;\n        }\n\n        fg.appendChild(media(\"yt-vf-m-fg\"));\n        fg.style.filter =\n          \"contrast(\" +\n          CONFIG.fgContrast +\n          \") brightness(\" +\n          CONFIG.fgBrightness +\n          \") saturate(\" +\n          CONFIG.fgSaturation +\n          \")\";\n\n        if (CONFIG.mode === \"scale\") {\n          bg.appendChild(media(\"yt-vf-m-bg\"));\n          sideL.style.display = \"none\";\n          sideR.style.display = \"none\";\n        } else {\n          bg.style.display = \"none\";\n          sideL.appendChild(media(\"yt-vf-m-l\"));\n          sideR.appendChild(media(\"yt-vf-m-r\"));\n          if (CONFIG.mode === \"mirror\") {\n            sideL.firstChild.style.transform = \"scaleX(-1)\";\n            sideR.firstChild.style.transform = \"scaleX(-1)\";\n          }\n          sideL.style.filter = \"blur(6px) brightness(0.72)\";\n          sideR.style.filter = \"blur(6px) brightness(0.72)\";\n        }\n\n        var tl = gsap.timeline({ paused: true });\n\n        if (CONFIG.animationIn) {\n          tl.from(root, { opacity: 0, duration: IN, ease: \"power2.out\" }, 0);\n          gsap.set(fg, { y: 34, opacity: 0 });\n          tl.to(fg, { y: 0, opacity: 1, duration: IN * 1.6, ease: \"power3.out\" }, IN * 0.5);\n        }\n        if (CONFIG.kenBurns) {\n          tl.fromTo(\n            fg.firstChild,\n            { scale: 1.05 },\n            { scale: 1, duration: DUR - 1, ease: \"sine.out\" },\n            0.4,\n          );\n        }\n\n        if (CONFIG.animationOut) {\n          tl.to(root, { opacity: 0, duration: OUT, ease: \"power2.in\" }, DUR - OUT - 0.05);\n        }\n        tl.set(root, { visibility: \"hidden\" }, DUR - 0.02);\n\n        window.__timelines[\"yt-vertical-fill\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-clip-wipe.json b/docs/public/catalog/components/caption-clip-wipe.json
new file mode 100644
index 0000000000..64b3eeafaf
--- /dev/null
+++ b/docs/public/catalog/components/caption-clip-wipe.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Clip Wipe</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@800&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #clip-wipe {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      .wp-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #wp-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .wp-group {\n        position: absolute;\n        bottom: 120px;\n        left: 0;\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: center;\n        gap: 24px;\n        padding: 0 100px;\n        visibility: hidden;\n      }\n      .wp-word {\n        font-family: \"Poppins\", sans-serif;\n        font-weight: 800;\n        font-size: 88px;\n        text-transform: uppercase;\n        color: #ffffff;\n        display: inline-block;\n        letter-spacing: 0.04em;\n        line-height: 1;\n        clip-path: inset(0 100% 0 0);\n        will-change: clip-path, color, opacity;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"clip-wipe\"\n      data-composition-id=\"caption-clip-wipe\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"wp-overlay\"></div>\n      <div id=\"wp-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.\n\n        var RAW_GROUPS = [\n          [0, 3],\n          [4, 7],\n          [8, 8],\n          [9, 12],\n          [13, 15],\n          [16, 16],\n          [17, 19],\n          [20, 22],\n          [23, 24],\n          [25, 27],\n        ];\n        var GROUPS = RAW_GROUPS.map(function (pair, gi) {\n          var ws = pair[0],\n            we = pair[1];\n          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;\n          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);\n          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };\n        });\n\n        var container = document.getElementById(\"wp-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        GROUPS.forEach(function (g, gi) {\n          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);\n          var grp = document.createElement(\"div\");\n          grp.className = \"wp-group\";\n          grp.id = \"wp-grp-\" + gi;\n\n          var groupText = groupWords\n            .map(function (w) {\n              return w.text.toUpperCase();\n            })\n            .join(\" \");\n          var computedSize = fitFontSize(groupText, 88, \"800\", \"Poppins\", 1720);\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var span = document.createElement(\"span\");\n            span.className = \"wp-word\";\n            span.id = \"wp-w-\" + wi;\n            span.textContent = w.text.toUpperCase();\n            span.style.fontSize = computedSize + \"px\";\n            grp.appendChild(span);\n          });\n\n          container.appendChild(grp);\n\n          tl.set(grp, { visibility: \"visible\" }, g.start);\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var wordEl = document.getElementById(\"wp-w-\" + wi);\n            var isKW = KEYWORDS.has(wi);\n\n            tl.to(\n              wordEl,\n              { clipPath: \"inset(0 0% 0 0)\", duration: 0.3, ease: \"power2.out\" },\n              w.start,\n            );\n            if (isKW) {\n              tl.to(wordEl, { color: \"#FFD700\", duration: 0.05 }, w.start + 0.1);\n            }\n            tl.to(wordEl, { color: \"rgba(255,255,255,0.4)\", duration: 0.2 }, w.end);\n          });\n\n          var wordEls = grp.querySelectorAll(\".wp-word\");\n          tl.to(\n            wordEls,\n            {\n              clipPath: \"inset(0 0% 0 100%)\",\n              duration: 0.25,\n              stagger: 0.04,\n              ease: \"power2.in\",\n            },\n            g.end - 0.2,\n          );\n          tl.set(grp, { visibility: \"hidden\", opacity: 0 }, g.end);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-clip-wipe\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-editorial-emphasis.json b/docs/public/catalog/components/caption-editorial-emphasis.json
new file mode 100644
index 0000000000..c6909bd56f
--- /dev/null
+++ b/docs/public/catalog/components/caption-editorial-emphasis.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Editorial Emphasis</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400&family=Playfair+Display:ital,wght@0,800;1,800&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000;\n        font-family: \"Inter\", sans-serif;\n      }\n\n      #editorial-emphasis {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n      }\n\n      .caption-layer {\n        position: absolute;\n        inset: 0;\n        z-index: 20;\n        pointer-events: none;\n        transform: translateZ(0);\n      }\n\n      .safe-zone {\n        position: absolute;\n        top: 580px;\n        left: 60px;\n        width: 1800px;\n        height: 430px;\n        display: flex;\n        align-items: flex-start;\n        justify-content: flex-start;\n      }\n\n      .caption-block {\n        position: absolute;\n        left: 0;\n        top: 0;\n        opacity: 0;\n        transform-origin: 0% 0%;\n        will-change: transform, opacity;\n        backface-visibility: hidden;\n      }\n\n      .caption-line {\n        display: flex;\n        align-items: baseline;\n        gap: 14px;\n        line-height: 1.1;\n        white-space: nowrap;\n      }\n\n      .caption-line + .caption-line {\n        margin-top: 8px;\n      }\n\n      .word {\n        display: inline-block;\n        color: #f5f0d0;\n        text-shadow:\n          0 2px 12px rgba(0, 0, 0, 0.6),\n          0 4px 24px rgba(0, 0, 0, 0.35);\n        will-change: transform, opacity;\n        backface-visibility: hidden;\n      }\n\n      .word--normal {\n        font-family: \"Inter\", sans-serif;\n        font-size: 86px;\n        font-weight: 400;\n        font-style: normal;\n      }\n\n      .word--italic {\n        font-family: \"Inter\", sans-serif;\n        font-size: 86px;\n        font-weight: 400;\n        font-style: italic;\n      }\n\n      .word--emphasis {\n        font-family: \"Playfair Display\", serif;\n        font-size: 180px;\n        font-weight: 800;\n        font-style: italic;\n        line-height: 0.9;\n        color: #f5f0d0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"editorial-emphasis\"\n      data-composition-id=\"caption-editorial-emphasis\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"caption-layer\" aria-hidden=\"true\">\n        <div id=\"caption-stage\" class=\"safe-zone\"></div>\n      </div>\n    </div>\n\n    <script>\n      var DURATION = 8;\n      var SAFE_WIDTH = 1800;\n      var ENTRY_DUR = 0.1;\n      var SLIDE_DUR = 0.2;\n\n      var _fitCanvas = document.createElement(\"canvas\");\n      var _fitCtx = _fitCanvas.getContext(\"2d\");\n      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n        var size = baseFontSize;\n        var minSize = Math.floor(baseFontSize * 0.45);\n        while (size > minSize) {\n          _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n          if (_fitCtx.measureText(text).width <= maxWidth) return size;\n          size -= 2;\n        }\n        return minSize;\n      }\n\n      // Generic transcript words\n      var W = [\n        { text: \"Every\", start: 0.0, end: 0.3 },\n        { text: \"great\", start: 0.3, end: 0.55 },\n        { text: \"video\", start: 0.55, end: 0.85 },\n        { text: \"starts\", start: 0.85, end: 1.1 },\n        { text: \"with\", start: 1.1, end: 1.25 },\n        { text: \"a\", start: 1.25, end: 1.35 },\n        { text: \"single\", start: 1.35, end: 1.65 },\n        { text: \"frame.\", start: 1.65, end: 2.0 },\n        { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n        { text: \"lets\", start: 2.65, end: 2.85 },\n        { text: \"you\", start: 2.85, end: 2.95 },\n        { text: \"write\", start: 2.95, end: 3.15 },\n        { text: \"HTML\", start: 3.15, end: 3.55 },\n        { text: \"and\", start: 3.55, end: 3.65 },\n        { text: \"render\", start: 3.65, end: 3.95 },\n        { text: \"professional\", start: 3.95, end: 4.45 },\n        { text: \"video.\", start: 4.45, end: 4.8 },\n        { text: \"No\", start: 4.9, end: 5.05 },\n        { text: \"timeline.\", start: 5.05, end: 5.45 },\n        { text: \"No\", start: 5.5, end: 5.65 },\n        { text: \"drag\", start: 5.65, end: 5.85 },\n        { text: \"and\", start: 5.85, end: 5.95 },\n        { text: \"drop.\", start: 5.95, end: 6.25 },\n        { text: \"Just\", start: 6.35, end: 6.55 },\n        { text: \"code\", start: 6.55, end: 6.8 },\n        { text: \"that\", start: 6.8, end: 6.95 },\n        { text: \"becomes\", start: 6.95, end: 7.3 },\n        { text: \"cinema.\", start: 7.3, end: 7.7 },\n      ];\n\n      // Block layout: [wordIndex, type] — n=normal, i=italic, e=emphasis(large)\n      // Emphasis words: HyperFrames(8), HTML(12), professional(15), code(24), cinema.(27)\n      var BLOCKS = [\n        {\n          line1: [\n            [0, \"n\"],\n            [1, \"n\"],\n            [2, \"n\"],\n          ],\n          line2: [\n            [3, \"n\"],\n            [4, \"n\"],\n          ],\n        },\n        {\n          line1: [\n            [5, \"n\"],\n            [6, \"n\"],\n          ],\n          line2: [[7, \"e\"]],\n        },\n        { line1: [[8, \"e\"]], line2: null },\n        {\n          line1: [\n            [9, \"n\"],\n            [10, \"n\"],\n            [11, \"n\"],\n          ],\n          line2: [[12, \"e\"]],\n        },\n        {\n          line1: [\n            [13, \"n\"],\n            [14, \"n\"],\n          ],\n          line2: [[15, \"e\"]],\n        },\n        {\n          line1: [\n            [16, \"n\"],\n            [17, \"n\"],\n          ],\n          line2: null,\n        },\n        {\n          line1: [[18, \"n\"]],\n          line2: [\n            [19, \"n\"],\n            [20, \"n\"],\n          ],\n        },\n        {\n          line1: [\n            [21, \"n\"],\n            [22, \"n\"],\n          ],\n          line2: null,\n        },\n        {\n          line1: [\n            [23, \"i\"],\n            [24, \"e\"],\n          ],\n          line2: null,\n        },\n        {\n          line1: [\n            [25, \"n\"],\n            [26, \"n\"],\n          ],\n          line2: [[27, \"e\"]],\n        },\n      ];\n\n      var CLASS_MAP = { n: \"word word--normal\", i: \"word word--italic\", e: \"word word--emphasis\" };\n\n      function computeLineSize(linePairs) {\n        var hasEmphasis = linePairs.some(function (p) {\n          return p[1] === \"e\";\n        });\n        if (hasEmphasis) {\n          var lineText = linePairs\n            .map(function (p) {\n              return W[p[0]].text;\n            })\n            .join(\" \");\n          return fitFontSize(lineText, 180, \"800\", \"Playfair Display\", SAFE_WIDTH);\n        }\n        var lineText = linePairs\n          .map(function (p) {\n            return W[p[0]].text;\n          })\n          .join(\" \");\n        return fitFontSize(lineText, 86, \"400\", \"Inter\", SAFE_WIDTH);\n      }\n\n      function buildBlocks() {\n        var stage = document.getElementById(\"caption-stage\");\n        BLOCKS.forEach(function (block, bi) {\n          var el = document.createElement(\"div\");\n          el.className = \"caption-block\";\n          el.id = \"b\" + bi;\n\n          var l1Size = computeLineSize(block.line1);\n          var l1 = document.createElement(\"div\");\n          l1.className = \"caption-line\";\n          l1.id = \"b\" + bi + \"L1\";\n          block.line1.forEach(function (pair, wi) {\n            var span = document.createElement(\"span\");\n            span.className = CLASS_MAP[pair[1]];\n            span.id = \"b\" + bi + \"L1w\" + wi;\n            span.textContent = W[pair[0]].text;\n            if (pair[1] === \"e\") {\n              span.style.fontSize = l1Size + \"px\";\n            } else {\n              span.style.fontSize = l1Size + \"px\";\n            }\n            l1.appendChild(span);\n          });\n          el.appendChild(l1);\n\n          if (block.line2) {\n            var l2Size = computeLineSize(block.line2);\n            var l2 = document.createElement(\"div\");\n            l2.className = \"caption-line\";\n            l2.id = \"b\" + bi + \"L2\";\n            block.line2.forEach(function (pair, wi) {\n              var span = document.createElement(\"span\");\n              span.className = CLASS_MAP[pair[1]];\n              span.id = \"b\" + bi + \"L2w\" + wi;\n              span.textContent = W[pair[0]].text;\n              if (pair[1] === \"e\") {\n                span.style.fontSize = l2Size + \"px\";\n              } else {\n                span.style.fontSize = l2Size + \"px\";\n              }\n              l2.appendChild(span);\n            });\n            el.appendChild(l2);\n          }\n\n          stage.appendChild(el);\n        });\n      }\n\n      buildBlocks();\n\n      // Scale blocks that exceed safe width\n      (function fitBlocks() {\n        BLOCKS.forEach(function (block, bi) {\n          var el = document.getElementById(\"b\" + bi);\n          el.style.opacity = \"1\";\n          el.style.position = \"relative\";\n          var lines = el.querySelectorAll(\".caption-line\");\n          var maxW = 0;\n          lines.forEach(function (line) {\n            if (line.scrollWidth > maxW) maxW = line.scrollWidth;\n          });\n          if (maxW > SAFE_WIDTH) {\n            var s = SAFE_WIDTH / maxW;\n            el.style.transform = \"scale(\" + s + \")\";\n          }\n          el.style.opacity = \"0\";\n          el.style.position = \"\";\n        });\n      })();\n\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var allEls = BLOCKS.map(function (_, i) {\n        return document.getElementById(\"b\" + i);\n      });\n\n      function blockStart(bi) {\n        return W[BLOCKS[bi].line1[0][0]].start;\n      }\n\n      BLOCKS.forEach(function (block, bi) {\n        var el = allEls[bi];\n        var start = blockStart(bi);\n        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;\n\n        allEls.forEach(function (other, oi) {\n          if (oi !== bi) tl.set(other, { opacity: 0 }, start);\n        });\n        tl.set(el, { opacity: 1 }, start);\n\n        block.line1.forEach(function (pair, wi) {\n          var wordEl = document.getElementById(\"b\" + bi + \"L1w\" + wi);\n          var wordStart = W[pair[0]].start;\n          tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: \"0% 100%\" }, start);\n          tl.to(\n            wordEl,\n            { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: \"power2.out\" },\n            wordStart,\n          );\n        });\n\n        if (block.line2) {\n          var hasEmphasis = block.line2.some(function (p) {\n            return p[1] === \"e\";\n          });\n          var l2El = document.getElementById(\"b\" + bi + \"L2\");\n          if (hasEmphasis) {\n            var l2Start = W[block.line2[0][0]].start;\n            tl.set(l2El, { opacity: 0, x: -1920 }, start);\n            tl.to(l2El, { opacity: 1, x: 0, duration: SLIDE_DUR, ease: \"power2.out\" }, l2Start);\n          } else {\n            tl.set(l2El, { opacity: 1 }, start);\n            block.line2.forEach(function (pair, wi) {\n              var wordEl = document.getElementById(\"b\" + bi + \"L2w\" + wi);\n              var wordStart = W[pair[0]].start;\n              tl.set(wordEl, { opacity: 0, scale: 1.12, transformOrigin: \"0% 100%\" }, start);\n              tl.to(\n                wordEl,\n                { opacity: 1, scale: 1, duration: ENTRY_DUR, ease: \"power2.out\" },\n                wordStart,\n              );\n            });\n          }\n        }\n\n        tl.set(el, { opacity: 0 }, nextStart);\n      });\n\n      tl.to({}, { duration: DURATION }, 0);\n      window.__timelines[\"caption-editorial-emphasis\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-emoji-pop.json b/docs/public/catalog/components/caption-emoji-pop.json
new file mode 100644
index 0000000000..4651cf1bdd
--- /dev/null
+++ b/docs/public/catalog/components/caption-emoji-pop.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Emoji Pop</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Gabarito:wght@900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000000;\n        font-family: \"Gabarito\", Arial, sans-serif;\n      }\n\n      #emoji-pop {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000000;\n      }\n\n      .caption-layer {\n        position: absolute;\n        inset: 0;\n        z-index: 20;\n        pointer-events: none;\n        transform: translateZ(0);\n      }\n\n      .safe-zone {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        width: 1400px;\n        height: 280px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .caption-group {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 1400px;\n        height: 280px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        transform-origin: 50% 50%;\n        will-change: transform;\n        backface-visibility: hidden;\n      }\n\n      .caption-emoji {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, calc(-50% - 70px));\n        font-family: \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Noto Color Emoji\", sans-serif;\n        font-size: 56px;\n        line-height: 1;\n        text-align: center;\n      }\n\n      .caption-line {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 14px;\n        width: max-content;\n        max-width: 1400px;\n        line-height: 1.1;\n        white-space: nowrap;\n      }\n\n      .caption-word {\n        display: inline-block;\n        color: #ffffff;\n        font-family: \"Gabarito\", Arial, sans-serif;\n        font-weight: 900;\n        font-size: 72px;\n        line-height: 1.1;\n        letter-spacing: -0.03em;\n        text-transform: uppercase;\n        -webkit-text-stroke: 3px #000000;\n        paint-order: stroke fill;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"emoji-pop\"\n      data-composition-id=\"caption-emoji-pop\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"caption-layer\" aria-hidden=\"true\">\n        <div id=\"caption-stage\" class=\"safe-zone\"></div>\n      </div>\n    </div>\n\n    <script>\n      var DURATION = 8;\n      var SAFE_ZONE_WIDTH = 1400;\n      var CAPTION_FONT_SIZE = 72;\n      var MAX_WORDS_PER_GROUP = 3;\n      var WORD_SPACING = 14;\n      var PAUSE_THRESHOLD = 0.1;\n      var ENTRY_FRAMES = 4;\n      var EXIT_FRAMES = 3;\n      var FPS = 30;\n      var ENTRY_DURATION = ENTRY_FRAMES / FPS;\n      var EXIT_DURATION = EXIT_FRAMES / FPS;\n      var FONT_WIDTH_SAFETY = 1.14;\n      var PRIMARY_COLOR = \"#FFFFFF\";\n      var ACCENT_COLORS = [\"#FF76FF\", \"#FF0002\", \"#B2F7FF\"];\n      var KEYWORDS = new Set([\"hyperframes\", \"html\", \"professional\", \"code\", \"cinema\"]);\n      var TRANSITION_WORDS = new Set([\n        \"the\",\n        \"a\",\n        \"an\",\n        \"and\",\n        \"or\",\n        \"but\",\n        \"is\",\n        \"are\",\n        \"was\",\n        \"were\",\n        \"to\",\n        \"of\",\n        \"in\",\n        \"on\",\n        \"at\",\n        \"for\",\n        \"with\",\n        \"by\",\n        \"from\",\n        \"as\",\n        \"it\",\n        \"its\",\n        \"this\",\n        \"that\",\n        \"these\",\n        \"those\",\n        \"be\",\n        \"been\",\n        \"have\",\n        \"has\",\n        \"had\",\n        \"do\",\n        \"does\",\n        \"did\",\n        \"will\",\n        \"would\",\n        \"could\",\n        \"should\",\n        \"may\",\n        \"might\",\n        \"must\",\n        \"can\",\n        \"if\",\n        \"then\",\n        \"so\",\n        \"just\",\n        \"not\",\n        \"no\",\n        \"yes\",\n        \"up\",\n        \"out\",\n        \"about\",\n      ]);\n\n      // Emoji map for key words\n      var WORD_EMOJI = {\n        hyperframes: \"🎬\",\n        html: \"💻\",\n        professional: \"✨\",\n        code: \"⌨️\",\n        cinema: \"🎥\",\n        video: \"📹\",\n        frame: \"🖼️\",\n      };\n\n      var TRANSCRIPT = [\n        { text: \"Every\", start: 0.0, end: 0.3 },\n        { text: \"great\", start: 0.3, end: 0.55 },\n        { text: \"video\", start: 0.55, end: 0.85 },\n        { text: \"starts\", start: 0.85, end: 1.1 },\n        { text: \"with\", start: 1.1, end: 1.25 },\n        { text: \"a\", start: 1.25, end: 1.35 },\n        { text: \"single\", start: 1.35, end: 1.65 },\n        { text: \"frame.\", start: 1.65, end: 2.0 },\n        { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n        { text: \"lets\", start: 2.65, end: 2.85 },\n        { text: \"you\", start: 2.85, end: 2.95 },\n        { text: \"write\", start: 2.95, end: 3.15 },\n        { text: \"HTML\", start: 3.15, end: 3.55 },\n        { text: \"and\", start: 3.55, end: 3.65 },\n        { text: \"render\", start: 3.65, end: 3.95 },\n        { text: \"professional\", start: 3.95, end: 4.45 },\n        { text: \"video.\", start: 4.45, end: 4.8 },\n        { text: \"No\", start: 4.9, end: 5.05 },\n        { text: \"timeline.\", start: 5.05, end: 5.45 },\n        { text: \"No\", start: 5.5, end: 5.65 },\n        { text: \"drag\", start: 5.65, end: 5.85 },\n        { text: \"and\", start: 5.85, end: 5.95 },\n        { text: \"drop.\", start: 5.95, end: 6.25 },\n        { text: \"Just\", start: 6.35, end: 6.55 },\n        { text: \"code\", start: 6.55, end: 6.8 },\n        { text: \"that\", start: 6.8, end: 6.95 },\n        { text: \"becomes\", start: 6.95, end: 7.3 },\n        { text: \"cinema.\", start: 7.3, end: 7.7 },\n      ];\n\n      function normalizeWords(rawWords) {\n        return rawWords\n          .map(function (item) {\n            var text = String(item.word || item.text || \"\").trim();\n            var clean = text.toLowerCase().replace(/[^a-z]/g, \"\");\n            return {\n              text: text,\n              start: Math.max(0, Number(item.start) || 0),\n              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),\n              emoji: WORD_EMOJI[clean] || null,\n            };\n          })\n          .filter(function (word) {\n            return word.text.length > 0;\n          });\n      }\n\n      function seededRandom(seed) {\n        var x = Math.sin(seed * 9999) * 10000;\n        return x - Math.floor(x);\n      }\n\n      function assignWordColors(words, groupIndex) {\n        return words.map(function (word, index) {\n          var clean = word.text.toLowerCase().replace(/[^a-z]/g, \"\");\n          if (KEYWORDS.has(clean)) {\n            var ci = Math.floor(seededRandom(groupIndex * 23 + index * 31) * ACCENT_COLORS.length);\n            return ACCENT_COLORS[ci];\n          }\n          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;\n          var rand = seededRandom(groupIndex * 13 + index);\n          if (rand > 0.55) {\n            var ci2 = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;\n            return ACCENT_COLORS[ci2];\n          }\n          return PRIMARY_COLOR;\n        });\n      }\n\n      var _fitCanvas = document.createElement(\"canvas\");\n      var _fitCtx = _fitCanvas.getContext(\"2d\");\n      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n        var size = baseFontSize;\n        var minSize = Math.floor(baseFontSize * 0.45);\n        while (size > minSize) {\n          _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n          if (_fitCtx.measureText(text).width <= maxWidth) return size;\n          size -= 2;\n        }\n        return minSize;\n      }\n\n      var measureCanvas = document.createElement(\"canvas\");\n      var measureContext = measureCanvas.getContext(\"2d\");\n\n      function measureWord(word, fontSize) {\n        measureContext.font = \"900 \" + fontSize + \"px Gabarito\";\n        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;\n      }\n\n      function measureLineWidth(words, fontSize) {\n        return words.reduce(function (total, word, index) {\n          return total + measureWord(word, fontSize) + (index ? WORD_SPACING : 0);\n        }, 0);\n      }\n\n      function fitsLine(words) {\n        return measureLineWidth(words, CAPTION_FONT_SIZE) <= SAFE_ZONE_WIDTH;\n      }\n\n      function makeGroups(words) {\n        var groups = [];\n        var current = [];\n        words.forEach(function (word, index) {\n          var nextWord = words[index + 1];\n          var testGroup = current.concat([word]);\n          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsLine(testGroup)) {\n            if (current.length) groups.push(makeGroup(current, groups.length));\n            current = [word];\n            return;\n          }\n          current.push(word);\n          var punctuation = /[,.:!?]$/.test(word.text);\n          var pause = nextWord ? nextWord.start - word.end : 0;\n          if (\n            !nextWord ||\n            punctuation ||\n            pause >= PAUSE_THRESHOLD ||\n            current.length >= MAX_WORDS_PER_GROUP\n          ) {\n            groups.push(makeGroup(current, groups.length));\n            current = [];\n          }\n        });\n        if (current.length) groups.push(makeGroup(current, groups.length));\n        return groups;\n      }\n\n      function makeGroup(words, groupIndex) {\n        var colors = assignWordColors(words, groupIndex);\n        var emoji = null;\n        for (var i = 0; i < words.length; i++) {\n          if (words[i].emoji) {\n            emoji = words[i].emoji;\n            break;\n          }\n        }\n        return {\n          words: words.slice(),\n          colors: colors,\n          emoji: emoji,\n          start: words[0].start,\n          end: words[words.length - 1].end,\n        };\n      }\n\n      function shadowForColor(color) {\n        var hex = color.replace(\"#\", \"\");\n        var r = parseInt(hex.slice(0, 2), 16);\n        var g = parseInt(hex.slice(2, 4), 16);\n        var b = parseInt(hex.slice(4, 6), 16);\n        return (\n          \"0 4px 8px rgba(0,0,0,0.7), 0 0 2px rgba(\" +\n          r +\n          \",\" +\n          g +\n          \",\" +\n          b +\n          \",1), 0 0 8px rgba(\" +\n          r +\n          \",\" +\n          g +\n          \",\" +\n          b +\n          \",0.6)\"\n        );\n      }\n\n      function buildCaptions(groups) {\n        var stage = document.getElementById(\"caption-stage\");\n        groups.forEach(function (group, groupIndex) {\n          var groupText = group.words\n            .map(function (w) {\n              return w.text.toUpperCase();\n            })\n            .join(\" \");\n          var computedSize = fitFontSize(\n            groupText,\n            CAPTION_FONT_SIZE,\n            \"900\",\n            \"Gabarito\",\n            SAFE_ZONE_WIDTH,\n          );\n          var groupEl = document.createElement(\"div\");\n          groupEl.id = \"caption-group-\" + groupIndex;\n          groupEl.className = \"caption-group\";\n\n          if (group.emoji) {\n            var emojiEl = document.createElement(\"div\");\n            emojiEl.className = \"caption-emoji\";\n            emojiEl.textContent = group.emoji;\n            groupEl.appendChild(emojiEl);\n          }\n\n          var lineEl = document.createElement(\"div\");\n          lineEl.className = \"caption-line\";\n          group.words.forEach(function (word, wordIndex) {\n            var color = group.colors[wordIndex] || PRIMARY_COLOR;\n            var wordEl = document.createElement(\"span\");\n            wordEl.className = \"caption-word\";\n            wordEl.textContent = word.text.toUpperCase();\n            wordEl.style.color = color;\n            wordEl.style.fontSize = computedSize + \"px\";\n            wordEl.style.textShadow = shadowForColor(color);\n            lineEl.appendChild(wordEl);\n          });\n\n          groupEl.appendChild(lineEl);\n          stage.appendChild(groupEl);\n        });\n      }\n\n      var WORDS = normalizeWords(TRANSCRIPT);\n      var GROUPS = makeGroups(WORDS);\n      buildCaptions(GROUPS);\n\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var visibleStarts = GROUPS.map(function (group, groupIndex) {\n        var prev = GROUPS[groupIndex - 1];\n        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;\n        var entryLead = Math.min(ENTRY_DURATION, availableGap);\n        return Math.max(0, group.start - entryLead);\n      });\n\n      var allGroupEls = GROUPS.map(function (_, i) {\n        return document.getElementById(\"caption-group-\" + i);\n      });\n\n      GROUPS.forEach(function (group, groupIndex) {\n        var groupEl = allGroupEls[groupIndex];\n        var visibleStart = visibleStarts[groupIndex];\n        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;\n        var exitStart = Math.max(visibleStart, visibleEnd - EXIT_DURATION);\n\n        allGroupEls.forEach(function (otherEl, otherIndex) {\n          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);\n        });\n\n        tl.set(groupEl, { opacity: 0, scaleX: 0.8, scaleY: 1 }, visibleStart);\n        tl.to(\n          groupEl,\n          { opacity: 1, scaleX: 1, duration: ENTRY_DURATION, ease: \"power3.out\", force3D: true },\n          visibleStart,\n        );\n        tl.to(\n          groupEl,\n          { scaleX: 0.75, opacity: 0.8, duration: EXIT_DURATION, ease: \"power2.in\", force3D: true },\n          exitStart,\n        );\n        tl.set(groupEl, { opacity: 0 }, visibleEnd);\n      });\n\n      window.__timelines[\"caption-emoji-pop\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-glitch-rgb.json b/docs/public/catalog/components/caption-glitch-rgb.json
new file mode 100644
index 0000000000..b4ace9bf03
--- /dev/null
+++ b/docs/public/catalog/components/caption-glitch-rgb.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Glitch RGB</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #caption-glitch-rgb {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      .gl-overlay {\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n        background: linear-gradient(\n          to bottom,\n          rgba(0, 0, 0, 0.08) 0%,\n          rgba(0, 0, 0, 0.16) 54%,\n          rgba(0, 0, 0, 0.5) 100%\n        );\n        pointer-events: none;\n      }\n      .gl-scanlines {\n        position: absolute;\n        inset: 0;\n        z-index: 5;\n        pointer-events: none;\n        background: repeating-linear-gradient(\n          to bottom,\n          transparent 0px,\n          transparent 3px,\n          rgba(0, 0, 0, 0.16) 3px,\n          rgba(0, 0, 0, 0.16) 4px\n        );\n        opacity: 0.55;\n      }\n      #gl-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .gl-group {\n        position: absolute;\n        bottom: 120px;\n        left: 0;\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: center;\n        gap: 14px;\n        padding: 0 100px;\n        opacity: 0;\n        visibility: hidden;\n      }\n      .gl-word {\n        font-family: \"Space Grotesk\", sans-serif;\n        font-weight: 700;\n        font-size: 88px;\n        text-transform: uppercase;\n        color: #ffffff;\n        display: inline-block;\n        letter-spacing: 0.03em;\n        line-height: 0.96;\n        text-shadow: 0 5px 18px rgba(0, 0, 0, 0.52);\n        will-change: transform, text-shadow;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"caption-glitch-rgb\"\n      data-composition-id=\"caption-glitch-rgb\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"gl-overlay\"></div>\n      <div class=\"gl-scanlines\"></div>\n      <div id=\"gl-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var TRANSCRIPT = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        function mulberry32(seed) {\n          return function () {\n            seed |= 0;\n            seed = (seed + 0x6d2b79f5) | 0;\n            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n          };\n        }\n\n        function buildGroups(words) {\n          var groups = [];\n          var start = 0;\n          var chars = 0;\n          for (var i = 0; i < words.length; i++) {\n            chars += words[i].text.length + 1;\n            var endsSentence = /[.!?]$/.test(words[i].text);\n            var nextGap = i + 1 < words.length ? words[i + 1].start - words[i].end : 0;\n            var full = i - start >= 3 || chars >= 21;\n            if (endsSentence || nextGap > 0.28 || full || i === words.length - 1) {\n              groups.push([start, i]);\n              start = i + 1;\n              chars = 0;\n            }\n          }\n          return groups;\n        }\n\n        function glitchPlan(word, nextWord) {\n          var nextStart = nextWord ? nextWord.start : word.end + 0.3;\n          var available = Math.min(word.end, nextStart) - word.start - 0.02;\n          var total = Math.min(0.24, Math.max(0.08, available));\n          return {\n            d1: total * 0.35,\n            d2: total * 0.65,\n          };\n        }\n\n        function shouldAftershock(word) {\n          return /\\d|\\$|%/.test(word.text) || word.text.replace(/[^\\w]/g, \"\").length >= 7;\n        }\n\n        var RAW_GROUPS = buildGroups(TRANSCRIPT);\n        var GROUPS = RAW_GROUPS.map(function (pair, gi) {\n          var ws = pair[0];\n          var we = pair[1];\n          var nextStart =\n            gi + 1 < RAW_GROUPS.length ? TRANSCRIPT[RAW_GROUPS[gi + 1][0]].start : 8.0;\n          var end = Math.min(TRANSCRIPT[we].end + 0.24, nextStart - 0.04);\n          return { wordStart: ws, wordEnd: we, start: TRANSCRIPT[ws].start, end: end };\n        });\n\n        var BASE_FONT = 88;\n        var container = document.getElementById(\"gl-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        GROUPS.forEach(function (g, gi) {\n          var groupWords = TRANSCRIPT.slice(g.wordStart, g.wordEnd + 1);\n          var grp = document.createElement(\"div\");\n          grp.className = \"gl-group\";\n          grp.id = \"gl-grp-\" + gi;\n\n          var groupText = groupWords\n            .map(function (w) {\n              return w.text.toUpperCase();\n            })\n            .join(\" \");\n          var computedSize = fitFontSize(groupText, BASE_FONT, \"700\", \"Space Grotesk\", 1720);\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var span = document.createElement(\"span\");\n            span.className = \"gl-word\";\n            span.id = \"gl-w-\" + wi;\n            span.textContent = w.text.toUpperCase();\n            span.style.fontSize = computedSize + \"px\";\n            grp.appendChild(span);\n          });\n\n          container.appendChild(grp);\n\n          tl.set(grp, { visibility: \"visible\" }, g.start);\n          tl.fromTo(\n            grp,\n            { opacity: 0 },\n            { opacity: 1, duration: 0.12, ease: \"power2.out\" },\n            g.start,\n          );\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var wordEl = document.getElementById(\"gl-w-\" + wi);\n            var plan = glitchPlan(w, TRANSCRIPT[wi + 1]);\n\n            var rng = mulberry32(wi * 777 + 13);\n            var travel = -(8 + rng() * 8);\n            var shadowMag = 5 + rng() * 7;\n            var sm = shadowMag.toFixed(1);\n            var nextWord = TRANSCRIPT[wi + 1];\n            var nextStart = nextWord ? nextWord.start : g.end;\n            var aftershockEnd = Math.min(g.end - 0.08, nextStart - 0.04);\n\n            tl.to(\n              wordEl,\n              {\n                x: travel,\n                textShadow:\n                  sm + \"px 0 #ff003c, -\" + sm + \"px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)\",\n                duration: plan.d1,\n                ease: \"none\",\n              },\n              w.start,\n            );\n            tl.to(\n              wordEl,\n              {\n                x: 0,\n                textShadow: \"0 5px 18px rgba(0,0,0,0.52)\",\n                duration: plan.d2,\n                ease: \"power3.out\",\n              },\n              w.start + plan.d1,\n            );\n\n            if (shouldAftershock(w) && aftershockEnd - w.end > 0.22) {\n              var pulseStart = w.end + 0.08;\n              var pulseIndex = 0;\n              while (pulseStart + 0.1 < aftershockEnd) {\n                var pulseTravel = -(3 + rng() * 5);\n                var pulseShadow = (3 + rng() * 5).toFixed(1);\n                tl.to(\n                  wordEl,\n                  {\n                    x: pulseTravel,\n                    textShadow:\n                      pulseShadow +\n                      \"px 0 #ff003c, -\" +\n                      pulseShadow +\n                      \"px 0 #00e5ff, 0 5px 18px rgba(0,0,0,0.52)\",\n                    duration: 0.045,\n                    ease: \"none\",\n                  },\n                  pulseStart,\n                );\n                tl.to(\n                  wordEl,\n                  {\n                    x: 0,\n                    textShadow: \"0 5px 18px rgba(0,0,0,0.52)\",\n                    duration: 0.075,\n                    ease: \"power3.out\",\n                  },\n                  pulseStart + 0.045,\n                );\n                pulseIndex++;\n                pulseStart += pulseIndex % 2 === 0 ? 0.18 : 0.24;\n              }\n            }\n          });\n\n          tl.to(grp, { opacity: 0, duration: 0.1, ease: \"power2.in\" }, g.end - 0.1);\n          tl.set(grp, { opacity: 0, visibility: \"hidden\" }, g.end);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-glitch-rgb\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-gradient-fill.json b/docs/public/catalog/components/caption-gradient-fill.json
new file mode 100644
index 0000000000..85ca93f483
--- /dev/null
+++ b/docs/public/catalog/components/caption-gradient-fill.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Gradient Fill</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #gradient-fill {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #gr-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .gr-group {\n        position: absolute;\n        bottom: 120px;\n        left: 0;\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: center;\n        gap: 24px;\n        padding: 0 80px;\n        opacity: 0;\n        visibility: hidden;\n      }\n      .gr-word {\n        font-family: \"Montserrat\", sans-serif;\n        font-weight: 900;\n        font-size: 100px;\n        display: inline-block;\n        letter-spacing: 0.04em;\n        line-height: 1.15;\n        padding-bottom: 0.05em;\n        -webkit-background-clip: text;\n        background-clip: text;\n        color: transparent;\n        background-size: 350% 100%;\n        background-position: 100% 0;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"gradient-fill\"\n      data-composition-id=\"caption-gradient-fill\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"gr-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var GROUPS = [\n          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },\n          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },\n          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },\n          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },\n          { wordStart: 13, wordEnd: 14, start: 3.55, end: 3.9 },\n          { wordStart: 15, wordEnd: 16, start: 3.95, end: 4.75 },\n          { wordStart: 17, wordEnd: 18, start: 4.9, end: 5.4 },\n          { wordStart: 19, wordEnd: 22, start: 5.5, end: 6.2 },\n          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },\n          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },\n        ];\n\n        var SIRI_GRAD =\n          \"linear-gradient(90deg, \" +\n          \"#fe9f1b 0%, #f76e49 10%, #ff2063 20%, \" +\n          \"#fd56cb 30%, #ef7aff 40%, #fe9f1b 50%, \" +\n          \"white 50.5%, white 100%)\";\n\n        var container = document.getElementById(\"gr-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        GROUPS.forEach(function (g, gi) {\n          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);\n          var groupText = groupWords\n            .map(function (w) {\n              return w.text;\n            })\n            .join(\" \");\n          var fontSize = fitFontSize(groupText, 100, \"900\", \"'Montserrat', sans-serif\", 1760);\n          var grp = document.createElement(\"div\");\n          grp.className = \"gr-group\";\n          grp.id = \"gr-grp-\" + gi;\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var span = document.createElement(\"span\");\n            span.className = \"gr-word\";\n            span.id = \"gr-w-\" + wi;\n            span.textContent = w.text;\n            span.style.fontSize = fontSize + \"px\";\n            span.style.background = SIRI_GRAD;\n            span.style.backgroundSize = \"350% 100%\";\n            span.style.backgroundPosition = \"100% 0\";\n            span.style.webkitBackgroundClip = \"text\";\n            span.style.backgroundClip = \"text\";\n            grp.appendChild(span);\n          });\n\n          container.appendChild(grp);\n\n          tl.set(grp, { visibility: \"visible\", opacity: 1 }, g.start);\n\n          var lastWordEnd = groupWords[groupWords.length - 1].end;\n          var nextStart = gi < GROUPS.length - 1 ? GROUPS[gi + 1].start : lastWordEnd + 0.5;\n          var gap = nextStart - lastWordEnd;\n          var fadeDur = Math.min(0.25, gap * 0.8);\n          var fadeStart = nextStart - fadeDur;\n          var groupEnd = nextStart;\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var el = document.getElementById(\"gr-w-\" + wi);\n            var dur = w.end - w.start;\n\n            tl.set(el, { backgroundPosition: \"100% 0\", scale: 1 }, g.start);\n            tl.set(el, { scale: 1.04 }, w.start);\n            tl.fromTo(\n              el,\n              { backgroundPosition: \"45% 0\" },\n              { backgroundPosition: \"0% 0\", duration: dur, ease: \"none\" },\n              w.start,\n            );\n            tl.set(el, { backgroundPosition: \"100% 0\" }, w.end);\n            tl.to(el, { scale: 1, duration: 0.15, ease: \"power2.out\" }, w.end);\n          });\n\n          tl.to(grp, { opacity: 0, duration: fadeDur }, fadeStart);\n          tl.set(grp, { visibility: \"hidden\" }, groupEnd);\n        });\n\n        window.__timelines[\"caption-gradient-fill\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-highlight.json b/docs/public/catalog/components/caption-highlight.json
new file mode 100644
index 0000000000..cd9011aa4b
--- /dev/null
+++ b/docs/public/catalog/components/caption-highlight.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Highlight</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #highlight {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #hl-video {\n        position: absolute;\n        inset: 0;\n        z-index: 0;\n        width: 100%;\n        height: 100%;\n        object-fit: cover;\n      }\n      .hl-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.4);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #hl-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .hl-group {\n        position: absolute;\n        bottom: 140px;\n        left: 0;\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: center;\n        gap: 8px;\n        padding: 0 100px;\n        opacity: 0;\n        visibility: hidden;\n      }\n      .hl-word {\n        font-family: \"Montserrat\", sans-serif;\n        font-weight: 800;\n        font-size: 80px;\n        text-transform: uppercase;\n        color: #ffffff;\n        display: inline-block;\n        letter-spacing: 0.02em;\n        line-height: 1;\n        position: relative;\n        padding: 6px 12px 8px;\n        text-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);\n        transform-origin: 50% 58%;\n        will-change: transform, filter;\n      }\n      .hl-word-bg {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(135deg, #ff1745 0%, #df1238 100%);\n        border-radius: 10px;\n        box-shadow: 0 12px 30px rgba(229, 20, 58, 0.32);\n        opacity: 0;\n        transform: scaleX(0);\n        transform-origin: 0% 50%;\n        z-index: -1;\n      }\n      .hl-word-text {\n        position: relative;\n        z-index: 1;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"highlight\"\n      data-composition-id=\"caption-highlight\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"hl-overlay\"></div>\n      <div id=\"hl-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var RAW_GROUPS = [\n          [0, 3],\n          [4, 7],\n          [8, 8],\n          [9, 12],\n          [13, 15],\n          [16, 16],\n          [17, 19],\n          [20, 22],\n          [23, 24],\n          [25, 27],\n        ];\n        var GROUPS = RAW_GROUPS.map(function (pair, gi) {\n          var ws = pair[0],\n            we = pair[1];\n          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;\n          var gEnd = Math.min(WORDS[we].end + 0.5, nextStart - 0.05);\n          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };\n        });\n\n        var container = document.getElementById(\"hl-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        GROUPS.forEach(function (g, gi) {\n          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);\n          var grp = document.createElement(\"div\");\n          grp.className = \"hl-group\";\n          grp.id = \"hl-grp-\" + gi;\n\n          var groupText = groupWords\n            .map(function (w) {\n              return w.text.toUpperCase();\n            })\n            .join(\" \");\n          var computedSize = fitFontSize(groupText, 80, \"800\", \"Montserrat\", 1620);\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var wordEl = document.createElement(\"span\");\n            wordEl.className = \"hl-word\";\n            wordEl.id = \"hl-w-\" + wi;\n            wordEl.style.fontSize = computedSize + \"px\";\n\n            var bgEl = document.createElement(\"span\");\n            bgEl.className = \"hl-word-bg\";\n            bgEl.id = \"hl-bg-\" + wi;\n\n            var textEl = document.createElement(\"span\");\n            textEl.className = \"hl-word-text\";\n            textEl.textContent = w.text.toUpperCase();\n\n            wordEl.appendChild(bgEl);\n            wordEl.appendChild(textEl);\n            grp.appendChild(wordEl);\n          });\n\n          container.appendChild(grp);\n\n          tl.set(grp, { visibility: \"visible\" }, g.start);\n          tl.fromTo(\n            grp,\n            { opacity: 0 },\n            { opacity: 1, duration: 0.12, ease: \"power2.out\" },\n            g.start,\n          );\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var bgEl = document.getElementById(\"hl-bg-\" + wi);\n            var wordEl = document.getElementById(\"hl-w-\" + wi);\n\n            tl.to(bgEl, { opacity: 1, scaleX: 1, duration: 0.15, ease: \"power2.out\" }, w.start);\n            tl.to(\n              wordEl,\n              { filter: \"brightness(1.05)\", duration: 0.08, ease: \"power2.out\" },\n              w.start,\n            );\n            tl.to(\n              wordEl,\n              { filter: \"brightness(1)\", duration: 0.16, ease: \"power2.out\" },\n              w.start + 0.08,\n            );\n            tl.to(bgEl, { opacity: 0, scaleX: 1.02, duration: 0.1, ease: \"power2.in\" }, w.end);\n            tl.set(bgEl, { scaleX: 0 }, w.end + 0.1);\n          });\n\n          tl.to(grp, { opacity: 0, duration: 0.1, ease: \"power2.in\" }, g.end - 0.1);\n          tl.set(grp, { opacity: 0, visibility: \"hidden\" }, g.end);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-highlight\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-kinetic-slam.json b/docs/public/catalog/components/caption-kinetic-slam.json
new file mode 100644
index 0000000000..316669731a
--- /dev/null
+++ b/docs/public/catalog/components/caption-kinetic-slam.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Kinetic Slam</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link href=\"https://fonts.googleapis.com/css2?family=Anton&display=swap\" rel=\"stylesheet\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #kinetic-slam {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      .kt-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #kt-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .kt-word {\n        font-family: \"Anton\", sans-serif;\n        font-weight: 400;\n        text-transform: uppercase;\n        color: #ffffff;\n        position: absolute;\n        left: 0;\n        width: 100%;\n        text-align: center;\n        top: 50%;\n        letter-spacing: 0.04em;\n        line-height: 1;\n        opacity: 0;\n        visibility: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"kinetic-slam\"\n      data-composition-id=\"caption-kinetic-slam\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"kt-overlay\"></div>\n      <div id=\"kt-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        function mulberry32(seed) {\n          return function () {\n            seed |= 0;\n            seed = (seed + 0x6d2b79f5) | 0;\n            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n          };\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.\n\n        var container = document.getElementById(\"kt-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        WORDS.forEach(function (w, wi) {\n          var el = document.createElement(\"div\");\n          el.className = \"kt-word\";\n          el.id = \"kt-w-\" + wi;\n          el.textContent = w.text.toUpperCase();\n          el.style.fontSize =\n            fitFontSize(w.text.toUpperCase(), 220, \"400\", \"'Anton', sans-serif\", 1720) + \"px\";\n          if (KEYWORDS.has(wi)) el.style.color = \"#FFD700\";\n          container.appendChild(el);\n\n          gsap.set(el, { yPercent: -50 });\n\n          var entranceMode = wi % 4;\n          tl.set(el, { visibility: \"visible\" }, w.start);\n          if (entranceMode === 0) {\n            tl.fromTo(\n              el,\n              { y: -120, opacity: 0 },\n              { y: 0, opacity: 1, duration: 0.22, ease: \"back.out(1.7)\" },\n              w.start,\n            );\n          } else if (entranceMode === 1) {\n            tl.fromTo(\n              el,\n              { x: -300, opacity: 0 },\n              { x: 0, opacity: 1, duration: 0.2, ease: \"expo.out\" },\n              w.start,\n            );\n          } else if (entranceMode === 2) {\n            tl.fromTo(\n              el,\n              { x: 300, opacity: 0 },\n              { x: 0, opacity: 1, duration: 0.2, ease: \"expo.out\" },\n              w.start,\n            );\n          } else {\n            tl.fromTo(\n              el,\n              { scale: 0.4, opacity: 0 },\n              { scale: 1, opacity: 1, duration: 0.24, ease: \"back.out(2.2)\" },\n              w.start,\n            );\n          }\n\n          tl.to(el, { opacity: 0, duration: 0.1, ease: \"power2.in\" }, w.end);\n          tl.set(el, { opacity: 0, visibility: \"hidden\" }, w.end + 0.1);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-kinetic-slam\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-matrix-decode.json b/docs/public/catalog/components/caption-matrix-decode.json
new file mode 100644
index 0000000000..cb3c300e96
--- /dev/null
+++ b/docs/public/catalog/components/caption-matrix-decode.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Matrix Decode</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000;\n      }\n      #matrix-decode {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n      }\n      .sc-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.85);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #sc-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .sc-group {\n        position: absolute;\n        bottom: 120px;\n        left: 0;\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: center;\n        gap: 24px;\n        padding: 0 80px;\n        opacity: 0;\n        visibility: hidden;\n      }\n      .sc-word-wrap {\n        font-family: \"Space Grotesk\", sans-serif;\n        font-weight: 700;\n        font-size: 96px;\n        color: #00ff41;\n        display: inline-block;\n        letter-spacing: 0.04em;\n        line-height: 1;\n        position: relative;\n      }\n      .sc-real {\n        display: none;\n      }\n      .sc-scr0 {\n        display: none;\n      }\n      .sc-scr1 {\n        display: none;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"matrix-decode\"\n      data-composition-id=\"caption-matrix-decode\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"sc-overlay\"></div>\n      <div id=\"sc-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        function mulberry32(seed) {\n          return function () {\n            seed |= 0;\n            seed = (seed + 0x6d2b79f5) | 0;\n            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n          };\n        }\n\n        var ALPHANUM = \"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789\";\n\n        function scrambleChars(seed) {\n          var rng = mulberry32(seed);\n          var result = \"\";\n          for (var i = 0; i < 4; i++) {\n            result += ALPHANUM[Math.floor(rng() * ALPHANUM.length)];\n          }\n          return result;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var GROUPS = [\n          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.35 },\n          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.35 },\n          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.9 },\n          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.8 },\n          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.7 },\n          { wordStart: 16, wordEnd: 16, start: 3.95, end: 5.0 },\n          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.7 },\n          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.5 },\n          { wordStart: 23, wordEnd: 24, start: 6.35, end: 7.05 },\n          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.9 },\n        ];\n\n        var container = document.getElementById(\"sc-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        GROUPS.forEach(function (g, gi) {\n          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);\n          var groupText = groupWords\n            .map(function (w) {\n              return w.text;\n            })\n            .join(\" \");\n          var fontSize = fitFontSize(groupText, 96, \"700\", \"'Space Grotesk', sans-serif\", 1760);\n          var grp = document.createElement(\"div\");\n          grp.className = \"sc-group\";\n          grp.id = \"sc-grp-\" + gi;\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var wordWrap = document.createElement(\"span\");\n            wordWrap.className = \"sc-word-wrap\";\n            wordWrap.id = \"sc-ww-\" + wi;\n            wordWrap.style.fontSize = fontSize + \"px\";\n\n            var real = document.createElement(\"span\");\n            real.className = \"sc-real\";\n            real.id = \"sc-real-\" + wi;\n            real.textContent = w.text;\n            wordWrap.appendChild(real);\n\n            var scr0 = document.createElement(\"span\");\n            scr0.className = \"sc-scr0\";\n            scr0.id = \"sc-scr0-\" + wi;\n            scr0.textContent = scrambleChars(wi * 1000 + 0);\n            wordWrap.appendChild(scr0);\n\n            var scr1 = document.createElement(\"span\");\n            scr1.className = \"sc-scr1\";\n            scr1.id = \"sc-scr1-\" + wi;\n            scr1.textContent = scrambleChars(wi * 1000 + 1);\n            wordWrap.appendChild(scr1);\n\n            grp.appendChild(wordWrap);\n          });\n\n          container.appendChild(grp);\n\n          tl.set(grp, { visibility: \"visible\", opacity: 0 }, g.start);\n          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.1 }, g.start);\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var realEl = document.getElementById(\"sc-real-\" + wi);\n            var scr0El = document.getElementById(\"sc-scr0-\" + wi);\n            var scr1El = document.getElementById(\"sc-scr1-\" + wi);\n\n            tl.set(scr0El, { display: \"inline\" }, w.start);\n            tl.set(scr1El, { display: \"inline\" }, w.start + 0.1);\n            tl.set(scr0El, { display: \"none\" }, w.start + 0.1);\n            tl.set(realEl, { display: \"inline\" }, w.start + 0.2);\n            tl.set(scr1El, { display: \"none\" }, w.start + 0.2);\n          });\n\n          tl.to(grp, { opacity: 0, duration: 0.12 }, g.end - 0.12);\n          tl.set(grp, { opacity: 0, visibility: \"hidden\" }, g.end);\n        });\n\n        window.__timelines[\"caption-matrix-decode\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-neon-accent.json b/docs/public/catalog/components/caption-neon-accent.json
new file mode 100644
index 0000000000..3f35078751
--- /dev/null
+++ b/docs/public/catalog/components/caption-neon-accent.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Neon Accent</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@800&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000000;\n        font-family: \"Montserrat\", Arial, sans-serif;\n      }\n\n      #neon-accent {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000000;\n      }\n\n      .caption-layer {\n        position: absolute;\n        inset: 0;\n        z-index: 20;\n        pointer-events: none;\n        transform: translateZ(0);\n      }\n\n      .safe-zone {\n        position: absolute;\n        bottom: 100px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 1400px;\n        height: 260px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .caption-group {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 1400px;\n        height: 260px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        transform-origin: 50% 50%;\n        will-change: transform;\n        backface-visibility: hidden;\n      }\n\n      .caption-copy {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        max-width: 1400px;\n        text-align: center;\n      }\n\n      .caption-line {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 16px;\n        width: max-content;\n        max-width: 1400px;\n        line-height: 1.1;\n        white-space: nowrap;\n      }\n\n      .caption-word {\n        display: inline-block;\n        color: #ffffff;\n        font-family: \"Montserrat\", Arial, sans-serif;\n        font-weight: 800;\n        font-size: 88px;\n        line-height: 1.1;\n        letter-spacing: 0;\n        text-transform: uppercase;\n      }\n\n      .caption-word.accent {\n        font-size: 106px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"neon-accent\"\n      data-composition-id=\"caption-neon-accent\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"caption-layer\" aria-hidden=\"true\">\n        <div id=\"caption-stage\" class=\"safe-zone\"></div>\n      </div>\n    </div>\n\n    <script>\n      var DURATION = 8;\n      var SAFE_ZONE_WIDTH = 1400;\n      var BASE_FONT_SIZE = 88;\n      var ACCENT_FONT_SIZE = 106;\n      var MIN_FONT_SIZE = 62;\n      var MAX_WORDS_PER_GROUP = 4;\n      var WORD_SPACING = 16;\n      var PAUSE_THRESHOLD = 0.1;\n      var ENTRY_DURATION = 7 / 30;\n      var WIGGLE_DISTANCE = 14;\n      var WIGGLE_CYCLE = 2 / 1.3;\n      var FONT_WIDTH_SAFETY = 1.14;\n      var PRIMARY_COLOR = \"#FFFFFF\";\n      var ACCENT_COLORS = [\"#53FF01\", \"#FF0002\", \"#FCFF00\"];\n      var TRANSITION_WORDS = new Set([\n        \"the\",\n        \"a\",\n        \"an\",\n        \"and\",\n        \"or\",\n        \"but\",\n        \"is\",\n        \"are\",\n        \"was\",\n        \"were\",\n        \"to\",\n        \"of\",\n        \"in\",\n        \"on\",\n        \"at\",\n        \"for\",\n        \"with\",\n        \"by\",\n        \"from\",\n        \"as\",\n        \"it\",\n        \"its\",\n        \"this\",\n        \"that\",\n        \"these\",\n        \"those\",\n        \"be\",\n        \"been\",\n        \"have\",\n        \"has\",\n        \"had\",\n        \"do\",\n        \"does\",\n        \"did\",\n        \"will\",\n        \"would\",\n        \"could\",\n        \"should\",\n        \"may\",\n        \"might\",\n        \"must\",\n        \"can\",\n        \"if\",\n        \"then\",\n        \"so\",\n        \"just\",\n        \"not\",\n        \"no\",\n        \"yes\",\n        \"up\",\n        \"out\",\n        \"about\",\n        \"lets\",\n        \"you\",\n        \"write\",\n        \"render\",\n      ]);\n      var KEYWORDS = new Set([\"hyperframes\", \"html\", \"professional\", \"code\", \"cinema\"]);\n\n      var TRANSCRIPT = [\n        { text: \"Every\", start: 0.0, end: 0.3 },\n        { text: \"great\", start: 0.3, end: 0.55 },\n        { text: \"video\", start: 0.55, end: 0.85 },\n        { text: \"starts\", start: 0.85, end: 1.1 },\n        { text: \"with\", start: 1.1, end: 1.25 },\n        { text: \"a\", start: 1.25, end: 1.35 },\n        { text: \"single\", start: 1.35, end: 1.65 },\n        { text: \"frame.\", start: 1.65, end: 2.0 },\n        { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n        { text: \"lets\", start: 2.65, end: 2.85 },\n        { text: \"you\", start: 2.85, end: 2.95 },\n        { text: \"write\", start: 2.95, end: 3.15 },\n        { text: \"HTML\", start: 3.15, end: 3.55 },\n        { text: \"and\", start: 3.55, end: 3.65 },\n        { text: \"render\", start: 3.65, end: 3.95 },\n        { text: \"professional\", start: 3.95, end: 4.45 },\n        { text: \"video.\", start: 4.45, end: 4.8 },\n        { text: \"No\", start: 4.9, end: 5.05 },\n        { text: \"timeline.\", start: 5.05, end: 5.45 },\n        { text: \"No\", start: 5.5, end: 5.65 },\n        { text: \"drag\", start: 5.65, end: 5.85 },\n        { text: \"and\", start: 5.85, end: 5.95 },\n        { text: \"drop.\", start: 5.95, end: 6.25 },\n        { text: \"Just\", start: 6.35, end: 6.55 },\n        { text: \"code\", start: 6.55, end: 6.8 },\n        { text: \"that\", start: 6.8, end: 6.95 },\n        { text: \"becomes\", start: 6.95, end: 7.3 },\n        { text: \"cinema.\", start: 7.3, end: 7.7 },\n      ];\n\n      var _fitCanvas = document.createElement(\"canvas\");\n      var _fitCtx = _fitCanvas.getContext(\"2d\");\n      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n        var size = baseFontSize;\n        var minSize = Math.floor(baseFontSize * 0.45);\n        while (size > minSize) {\n          _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n          if (_fitCtx.measureText(text).width <= maxWidth) return size;\n          size -= 2;\n        }\n        return minSize;\n      }\n\n      gsap.registerPlugin && gsap.registerPlugin();\n\n      function cleanText(text) {\n        return String(text || \"\").trim();\n      }\n\n      function normalizeWords(rawWords) {\n        return rawWords\n          .map(function (item) {\n            return {\n              text: cleanText(item.word || item.text),\n              start: Math.max(0, Number(item.start) || 0),\n              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),\n            };\n          })\n          .filter(function (word) {\n            return word.text.length > 0;\n          });\n      }\n\n      var measureCanvas = document.createElement(\"canvas\");\n      var measureContext = measureCanvas.getContext(\"2d\");\n\n      function seededRandom(seed) {\n        var x = Math.sin(seed * 9999) * 10000;\n        return x - Math.floor(x);\n      }\n\n      function isKeyword(text) {\n        return KEYWORDS.has(text.toLowerCase().replace(/[^a-z]/g, \"\"));\n      }\n\n      function assignWordColors(words, groupIndex) {\n        return words.map(function (word) {\n          if (isKeyword(word.text)) {\n            var colorIndex = Math.floor(seededRandom(groupIndex * 23 + 7) * ACCENT_COLORS.length);\n            return ACCENT_COLORS[colorIndex];\n          }\n          var clean = word.text.toLowerCase().replace(/[^a-z']/g, \"\");\n          if (TRANSITION_WORDS.has(clean)) return PRIMARY_COLOR;\n          var rand = seededRandom(groupIndex * 7 + words.indexOf(word));\n          if (rand > 0.6) {\n            var ci = Math.floor(rand * ACCENT_COLORS.length) % ACCENT_COLORS.length;\n            return ACCENT_COLORS[ci];\n          }\n          return PRIMARY_COLOR;\n        });\n      }\n\n      function measureWord(word, color, fontSize) {\n        var size = color === PRIMARY_COLOR ? fontSize : fontSize * 1.2;\n        measureContext.font = \"800 \" + size + \"px Montserrat\";\n        return measureContext.measureText(word.text.toUpperCase()).width * FONT_WIDTH_SAFETY;\n      }\n\n      function measureLineWidth(words, colors, fontSize) {\n        return words.reduce(function (total, word, index) {\n          return (\n            total +\n            measureWord(word, colors[index] || PRIMARY_COLOR, fontSize) +\n            (index ? WORD_SPACING : 0)\n          );\n        }, 0);\n      }\n\n      function splitLinesForGroup(words, colors, fontSize) {\n        var maxLineWidth = SAFE_ZONE_WIDTH;\n        if (\n          words.some(function (word, i) {\n            return measureWord(word, colors[i] || PRIMARY_COLOR, fontSize) > maxLineWidth;\n          })\n        )\n          return null;\n        if (measureLineWidth(words, colors, fontSize) <= maxLineWidth)\n          return [{ words: words, colors: colors }];\n        var best = null;\n        var bestDiff = Infinity;\n        for (var split = 1; split < words.length; split++) {\n          var fw = words.slice(0, split),\n            sw = words.slice(split);\n          var fc = colors.slice(0, split),\n            sc = colors.slice(split);\n          var fW = measureLineWidth(fw, fc, fontSize);\n          var sW = measureLineWidth(sw, sc, fontSize);\n          if (fW <= maxLineWidth && sW <= maxLineWidth) {\n            var diff = Math.abs(fW - sW);\n            if (diff < bestDiff) {\n              best = [\n                { words: fw, colors: fc },\n                { words: sw, colors: sc },\n              ];\n              bestDiff = diff;\n            }\n          }\n        }\n        return best;\n      }\n\n      function makeGroups(words) {\n        var groups = [];\n        var current = [];\n        words.forEach(function (word, index) {\n          var nextWord = words[index + 1];\n          var testGroup = current.concat([word]);\n          var exceedsWords = testGroup.length > MAX_WORDS_PER_GROUP;\n          var colors = assignWordColors(testGroup, groups.length);\n          var exceedsFit = !splitLinesForGroup(testGroup, colors, BASE_FONT_SIZE);\n          if (exceedsWords || exceedsFit) {\n            if (current.length) groups.push(makeGroup(current, groups.length));\n            current = [word];\n            return;\n          }\n          current.push(word);\n          var punctuation = /[,.:!?]$/.test(word.text);\n          var pause = nextWord ? nextWord.start - word.end : 0;\n          if (\n            !nextWord ||\n            punctuation ||\n            pause >= PAUSE_THRESHOLD ||\n            current.length >= MAX_WORDS_PER_GROUP\n          ) {\n            groups.push(makeGroup(current, groups.length));\n            current = [];\n          }\n        });\n        if (current.length) groups.push(makeGroup(current, groups.length));\n        return groups;\n      }\n\n      function makeGroup(words, groupIndex) {\n        var colors = assignWordColors(words, groupIndex);\n        var groupText = words\n          .map(function (w) {\n            return w.text.toUpperCase();\n          })\n          .join(\" \");\n        var fontSize = fitFontSize(groupText, BASE_FONT_SIZE, \"800\", \"Montserrat\", SAFE_ZONE_WIDTH);\n        while (fontSize > MIN_FONT_SIZE && !splitLinesForGroup(words, colors, fontSize)) {\n          fontSize -= 2;\n        }\n        return {\n          words: words.slice(),\n          colors: colors,\n          fontSize: fontSize,\n          lines: splitLinesForGroup(words, colors, fontSize) || [{ words: words, colors: colors }],\n          start: words[0].start,\n          end: words[words.length - 1].end,\n        };\n      }\n\n      function shadowForColor(color) {\n        var hex = color.replace(\"#\", \"\");\n        var r = parseInt(hex.slice(0, 2), 16);\n        var g = parseInt(hex.slice(2, 4), 16);\n        var b = parseInt(hex.slice(4, 6), 16);\n        var glow =\n          \"0 0 4px rgba(\" +\n          r +\n          \",\" +\n          g +\n          \",\" +\n          b +\n          \",1), 0 0 10px rgba(\" +\n          r +\n          \",\" +\n          g +\n          \",\" +\n          b +\n          \",0.9), 0 0 20px rgba(\" +\n          r +\n          \",\" +\n          g +\n          \",\" +\n          b +\n          \",0.7), 0 0 40px rgba(\" +\n          r +\n          \",\" +\n          g +\n          \",\" +\n          b +\n          \",0.4)\";\n        return \"0 8px 16px rgba(0,0,0,0.8), 0 16px 40px rgba(0,0,0,0.6), \" + glow;\n      }\n\n      function buildCaptions(groups) {\n        var stage = document.getElementById(\"caption-stage\");\n        groups.forEach(function (group, groupIndex) {\n          var groupEl = document.createElement(\"div\");\n          var copyEl = document.createElement(\"div\");\n          groupEl.id = \"caption-group-\" + groupIndex;\n          groupEl.className = \"caption-group\";\n          copyEl.className = \"caption-copy\";\n          group.lines.slice(0, 2).forEach(function (line) {\n            var lineEl = document.createElement(\"div\");\n            lineEl.className = \"caption-line\";\n            line.words.forEach(function (word, wordIndex) {\n              var color = line.colors[wordIndex] || PRIMARY_COLOR;\n              var wordEl = document.createElement(\"span\");\n              wordEl.className = color === PRIMARY_COLOR ? \"caption-word\" : \"caption-word accent\";\n              wordEl.textContent = word.text.toUpperCase();\n              wordEl.style.color = color;\n              wordEl.style.fontSize =\n                color === PRIMARY_COLOR ? group.fontSize + \"px\" : group.fontSize * 1.2 + \"px\";\n              wordEl.style.textShadow = shadowForColor(color);\n              lineEl.appendChild(wordEl);\n            });\n            copyEl.appendChild(lineEl);\n          });\n          groupEl.appendChild(copyEl);\n          stage.appendChild(groupEl);\n        });\n      }\n\n      var WORDS = normalizeWords(TRANSCRIPT);\n      var GROUPS = makeGroups(WORDS);\n      buildCaptions(GROUPS);\n\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var visibleStarts = GROUPS.map(function (group, groupIndex) {\n        var prev = GROUPS[groupIndex - 1];\n        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;\n        var entryLead = Math.min(ENTRY_DURATION, availableGap);\n        return Math.max(0, group.start - entryLead);\n      });\n\n      var allGroupEls = GROUPS.map(function (_, i) {\n        return document.getElementById(\"caption-group-\" + i);\n      });\n\n      GROUPS.forEach(function (group, groupIndex) {\n        var groupEl = allGroupEls[groupIndex];\n        var visibleStart = visibleStarts[groupIndex];\n        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;\n        var direction = groupIndex % 2 === 0 ? -1 : 1;\n        var D = WIGGLE_DISTANCE * direction;\n        var wiggleCycles = Math.max(1, Math.ceil((visibleEnd - visibleStart) / WIGGLE_CYCLE));\n\n        allGroupEls.forEach(function (otherEl, otherIndex) {\n          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);\n        });\n\n        tl.set(groupEl, { opacity: 0, scale: 0.65, x: 0, y: 0 }, visibleStart);\n        tl.to(\n          groupEl,\n          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: \"power3.out\", force3D: true },\n          visibleStart,\n        );\n        tl.to(\n          groupEl,\n          {\n            x: D,\n            y: D,\n            duration: WIGGLE_CYCLE / 2,\n            ease: \"sine.inOut\",\n            yoyo: true,\n            repeat: Math.max(0, wiggleCycles * 2 - 1),\n            force3D: true,\n          },\n          visibleStart,\n        );\n        tl.set(groupEl, { opacity: 0 }, visibleEnd);\n      });\n\n      window.__timelines[\"caption-neon-accent\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-neon-glow.json b/docs/public/catalog/components/caption-neon-glow.json
new file mode 100644
index 0000000000..387d64a20a
--- /dev/null
+++ b/docs/public/catalog/components/caption-neon-glow.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Neon Glow</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000;\n      }\n      #neon-glow {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n      }\n      .ne-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.75);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #ne-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .ne-group {\n        position: absolute;\n        bottom: 120px;\n        left: 0;\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: center;\n        gap: 24px;\n        padding: 0 80px;\n        opacity: 0;\n        visibility: hidden;\n      }\n      .ne-word {\n        font-family: \"Outfit\", sans-serif;\n        font-weight: 900;\n        font-size: 96px;\n        text-transform: uppercase;\n        color: rgba(0, 255, 240, 0.14);\n        display: inline-block;\n        letter-spacing: 0.04em;\n        line-height: 1;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"neon-glow\"\n      data-composition-id=\"caption-neon-glow\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"ne-overlay\"></div>\n      <div id=\"ne-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var GROUPS = [\n          { wordStart: 0, wordEnd: 3, start: 0.0, end: 1.05 },\n          { wordStart: 4, wordEnd: 7, start: 1.1, end: 2.05 },\n          { wordStart: 8, wordEnd: 8, start: 2.1, end: 2.6 },\n          { wordStart: 9, wordEnd: 12, start: 2.65, end: 3.5 },\n          { wordStart: 13, wordEnd: 15, start: 3.55, end: 4.4 },\n          { wordStart: 16, wordEnd: 16, start: 3.95, end: 4.75 },\n          { wordStart: 17, wordEnd: 19, start: 4.9, end: 5.4 },\n          { wordStart: 20, wordEnd: 22, start: 5.65, end: 6.2 },\n          { wordStart: 23, wordEnd: 24, start: 6.35, end: 6.75 },\n          { wordStart: 25, wordEnd: 27, start: 6.8, end: 7.8 },\n        ];\n\n        // Keywords get pink glow; others get cyan glow\n        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.\n\n        var container = document.getElementById(\"ne-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        GROUPS.forEach(function (g, gi) {\n          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);\n          var groupText = groupWords\n            .map(function (w) {\n              return w.text.toUpperCase();\n            })\n            .join(\" \");\n          var fontSize = fitFontSize(groupText, 96, \"900\", \"'Outfit', sans-serif\", 1760);\n          var grp = document.createElement(\"div\");\n          grp.className = \"ne-group\";\n          grp.id = \"ne-grp-\" + gi;\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var span = document.createElement(\"span\");\n            span.className = \"ne-word\";\n            span.id = \"ne-w-\" + wi;\n            span.textContent = w.text;\n            span.style.fontSize = fontSize + \"px\";\n            grp.appendChild(span);\n          });\n\n          container.appendChild(grp);\n\n          tl.set(grp, { visibility: \"visible\", opacity: 0 }, g.start);\n          tl.fromTo(grp, { opacity: 0 }, { opacity: 1, duration: 0.05, ease: \"steps(1)\" }, g.start);\n          tl.fromTo(grp, { x: -8 }, { x: 0, duration: 0.14, ease: \"power3.out\" }, g.start + 0.05);\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var el = document.getElementById(\"ne-w-\" + wi);\n            var isKW = KEYWORDS.has(wi);\n            var activeColor = isKW ? \"#FF0099\" : \"#00FFF0\";\n            tl.to(\n              el,\n              {\n                color: activeColor,\n                textShadow:\n                  \"0 0 10px \" +\n                  activeColor +\n                  \", 0 0 35px \" +\n                  activeColor +\n                  \", 0 0 90px \" +\n                  activeColor,\n                duration: 0.06,\n              },\n              w.start,\n            );\n            tl.to(el, { color: \"rgba(0,255,240,0.14)\", textShadow: \"none\", duration: 0.06 }, w.end);\n          });\n\n          tl.to(grp, { opacity: 0, x: 6, duration: 0.1, ease: \"steps(1)\" }, g.end - 0.1);\n          tl.set(grp, { opacity: 0, visibility: \"hidden\" }, g.end);\n        });\n\n        window.__timelines[\"caption-neon-glow\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-parallax-layers.json b/docs/public/catalog/components/caption-parallax-layers.json
new file mode 100644
index 0000000000..21c611f2ac
--- /dev/null
+++ b/docs/public/catalog/components/caption-parallax-layers.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Parallax Layers</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000;\n        font-family: \"Instrument Serif\", serif;\n      }\n\n      #parallax-layers {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n      }\n\n      /* Behind captions: big red 3D text */\n      .behind-caption-layer {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n        transform: translateZ(0);\n      }\n\n      /* Front captions */\n      .front-caption-layer {\n        position: absolute;\n        inset: 0;\n        z-index: 30;\n        pointer-events: none;\n        transform: translateZ(0);\n      }\n\n      .behind-safe-zone {\n        position: absolute;\n        top: 40px;\n        left: 0;\n        width: 1920px;\n        height: 500px;\n      }\n\n      .front-safe-zone {\n        position: absolute;\n        top: 700px;\n        left: 0;\n        width: 1920px;\n        height: 300px;\n      }\n\n      .caption-block {\n        position: absolute;\n        left: 50%;\n        top: 0;\n        transform: translateX(-50%);\n        opacity: 0;\n        transform-origin: 50% 50%;\n        will-change: transform, opacity;\n        backface-visibility: hidden;\n      }\n\n      .caption-line {\n        display: flex;\n        align-items: baseline;\n        justify-content: center;\n        gap: 14px;\n        line-height: 1.1;\n        white-space: nowrap;\n      }\n\n      .caption-line--behind {\n        transform: scaleY(2.8);\n        transform-origin: 50% 0%;\n      }\n\n      .word {\n        display: inline-block;\n        will-change: transform, opacity;\n        backface-visibility: hidden;\n      }\n\n      .word--behind {\n        font-family: \"Instrument Serif\", serif;\n        font-size: 220px;\n        font-weight: 400;\n        font-style: normal;\n        line-height: 0.9;\n        color: #e50914;\n        -webkit-text-stroke: 5px #e50914;\n        text-shadow: 2px 4px 4px #a30610;\n      }\n\n      .word--front-normal {\n        font-family: \"Instrument Serif\", serif;\n        font-size: 130px;\n        font-weight: 400;\n        font-style: normal;\n        color: #eeeeee;\n        text-shadow:\n          0 2px 12px rgba(0, 0, 0, 0.6),\n          0 4px 24px rgba(0, 0, 0, 0.35);\n      }\n\n      .word--front-italic {\n        font-family: \"Instrument Serif\", serif;\n        font-size: 130px;\n        font-weight: 400;\n        font-style: italic;\n        color: #eeeeee;\n        text-shadow:\n          0 2px 12px rgba(0, 0, 0, 0.6),\n          0 4px 24px rgba(0, 0, 0, 0.35);\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"parallax-layers\"\n      data-composition-id=\"caption-parallax-layers\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"behind-caption-layer\" aria-hidden=\"true\">\n        <div id=\"behind-stage\" class=\"behind-safe-zone\"></div>\n      </div>\n\n      <div class=\"front-caption-layer\" aria-hidden=\"true\">\n        <div id=\"front-stage\" class=\"front-safe-zone\"></div>\n      </div>\n    </div>\n\n    <script>\n      var DURATION = 8;\n      var BEHIND_WIDTH = 1800;\n      var FRONT_WIDTH = 1750;\n      var ENTRY_DUR = 0.1;\n      var SLIDE_DUR = 0.2;\n\n      var _fitCanvas = document.createElement(\"canvas\");\n      var _fitCtx = _fitCanvas.getContext(\"2d\");\n      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n        var size = baseFontSize;\n        var minSize = Math.floor(baseFontSize * 0.45);\n        while (size > minSize) {\n          _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n          if (_fitCtx.measureText(text).width <= maxWidth) return size;\n          size -= 2;\n        }\n        return minSize;\n      }\n\n      var W = [\n        { text: \"Every\", start: 0.0, end: 0.3 },\n        { text: \"great\", start: 0.3, end: 0.55 },\n        { text: \"video\", start: 0.55, end: 0.85 },\n        { text: \"starts\", start: 0.85, end: 1.1 },\n        { text: \"with\", start: 1.1, end: 1.25 },\n        { text: \"a\", start: 1.25, end: 1.35 },\n        { text: \"single\", start: 1.35, end: 1.65 },\n        { text: \"frame.\", start: 1.65, end: 2.0 },\n        { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n        { text: \"lets\", start: 2.65, end: 2.85 },\n        { text: \"you\", start: 2.85, end: 2.95 },\n        { text: \"write\", start: 2.95, end: 3.15 },\n        { text: \"HTML\", start: 3.15, end: 3.55 },\n        { text: \"and\", start: 3.55, end: 3.65 },\n        { text: \"render\", start: 3.65, end: 3.95 },\n        { text: \"professional\", start: 3.95, end: 4.45 },\n        { text: \"video.\", start: 4.45, end: 4.8 },\n        { text: \"No\", start: 4.9, end: 5.05 },\n        { text: \"timeline.\", start: 5.05, end: 5.45 },\n        { text: \"No\", start: 5.5, end: 5.65 },\n        { text: \"drag\", start: 5.65, end: 5.85 },\n        { text: \"and\", start: 5.85, end: 5.95 },\n        { text: \"drop.\", start: 5.95, end: 6.25 },\n        { text: \"Just\", start: 6.35, end: 6.55 },\n        { text: \"code\", start: 6.55, end: 6.8 },\n        { text: \"that\", start: 6.8, end: 6.95 },\n        { text: \"becomes\", start: 6.95, end: 7.3 },\n        { text: \"cinema.\", start: 7.3, end: 7.7 },\n      ];\n\n      // behind=red 3D emphasis words, front=normal white words\n      var BLOCKS = [\n        { behind: null, front: [[0], [1], [2]] },\n        { behind: [[3]], front: [[4], [5]] },\n        { behind: [[6]], front: [[7]] },\n        { behind: [[8]], front: [[9], [10], [11]] },\n        { behind: [[12]], front: [[13], [14]] },\n        { behind: [[15]], front: [[16]] },\n        { behind: null, front: [[17], [18]] },\n        { behind: null, front: [[19], [20], [21], [22]] },\n        { behind: [[24]], front: [[23], [25], [26]] },\n        { behind: [[27]], front: null },\n      ];\n\n      var behindStage = document.getElementById(\"behind-stage\");\n      var frontStage = document.getElementById(\"front-stage\");\n\n      BLOCKS.forEach(function (block, bi) {\n        var bEl = document.createElement(\"div\");\n        bEl.className = \"caption-block\";\n        bEl.id = \"bb\" + bi;\n        if (block.behind) {\n          var behindText = block.behind\n            .map(function (wi_arr) {\n              return W[wi_arr[0]].text;\n            })\n            .join(\" \");\n          var behindSize = fitFontSize(behindText, 220, \"400\", \"Instrument Serif\", BEHIND_WIDTH);\n          var bLine = document.createElement(\"div\");\n          bLine.className = \"caption-line caption-line--behind\";\n          block.behind.forEach(function (wi_arr, wi) {\n            var span = document.createElement(\"span\");\n            span.className = \"word word--behind\";\n            span.id = \"bb\" + bi + \"w\" + wi;\n            span.textContent = W[wi_arr[0]].text;\n            span.style.fontSize = behindSize + \"px\";\n            bLine.appendChild(span);\n          });\n          bEl.appendChild(bLine);\n        }\n        behindStage.appendChild(bEl);\n\n        var fEl = document.createElement(\"div\");\n        fEl.className = \"caption-block\";\n        fEl.id = \"fb\" + bi;\n        if (block.front) {\n          var frontText = block.front\n            .map(function (wi_arr) {\n              return W[wi_arr[0]].text;\n            })\n            .join(\" \");\n          var frontSize = fitFontSize(frontText, 130, \"400\", \"Instrument Serif\", FRONT_WIDTH);\n          var fLine = document.createElement(\"div\");\n          fLine.className = \"caption-line\";\n          block.front.forEach(function (wi_arr, wi) {\n            var span = document.createElement(\"span\");\n            var isItalic = wi_arr[0] === 7 || wi_arr[0] === 18; // frame., timeline.\n            span.className = \"word \" + (isItalic ? \"word--front-italic\" : \"word--front-normal\");\n            span.id = \"fb\" + bi + \"w\" + wi;\n            span.textContent = W[wi_arr[0]].text;\n            span.style.fontSize = frontSize + \"px\";\n            fLine.appendChild(span);\n          });\n          fEl.appendChild(fLine);\n        }\n        frontStage.appendChild(fEl);\n      });\n\n      var allBehind = BLOCKS.map(function (_, i) {\n        return document.getElementById(\"bb\" + i);\n      });\n      var allFront = BLOCKS.map(function (_, i) {\n        return document.getElementById(\"fb\" + i);\n      });\n\n      function applyBehindScales() {\n        BLOCKS.forEach(function (block, bi) {\n          if (block.behind) {\n            var line = allBehind[bi].querySelector(\".caption-line\");\n            if (line) {\n              var natW = line.scrollWidth;\n              if (natW > 0) {\n                var s = BEHIND_WIDTH / natW;\n                line.style.transform = \"scaleX(\" + s + \") scaleY(2.8)\";\n              }\n            }\n          }\n        });\n      }\n      applyBehindScales();\n\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      function blockStart(bi) {\n        var b = BLOCKS[bi];\n        var firstIdx = b.behind ? b.behind[0][0] : b.front[0][0];\n        return W[firstIdx].start;\n      }\n\n      BLOCKS.forEach(function (block, bi) {\n        var start = blockStart(bi);\n        var nextStart = bi < BLOCKS.length - 1 ? blockStart(bi + 1) : DURATION;\n        var bEl = allBehind[bi];\n        var fEl = allFront[bi];\n\n        allBehind.forEach(function (other, oi) {\n          if (oi !== bi) tl.set(other, { opacity: 0 }, start);\n        });\n        allFront.forEach(function (other, oi) {\n          if (oi !== bi) tl.set(other, { opacity: 0 }, start);\n        });\n\n        if (block.behind) {\n          tl.set(bEl, { opacity: 1 }, start);\n          block.behind.forEach(function (wi_arr, wi) {\n            var wordEl = document.getElementById(\"bb\" + bi + \"w\" + wi);\n            var wordStart = W[wi_arr[0]].start;\n            tl.set(wordEl, { opacity: 0 }, start);\n            tl.to(wordEl, { opacity: 1, duration: ENTRY_DUR, ease: \"power2.out\" }, wordStart);\n          });\n        }\n\n        if (block.front) {\n          tl.set(fEl, { opacity: 1 }, start);\n          block.front.forEach(function (wi_arr, wi) {\n            var wordEl = document.getElementById(\"fb\" + bi + \"w\" + wi);\n            var wordStart = W[wi_arr[0]].start;\n            tl.set(wordEl, { opacity: 0 }, start);\n            tl.set(wordEl, { opacity: 1 }, wordStart);\n          });\n        }\n\n        tl.set(bEl, { opacity: 0 }, nextStart);\n        tl.set(fEl, { opacity: 0 }, nextStart);\n      });\n\n      tl.to({}, { duration: DURATION }, 0);\n      window.__timelines[\"caption-parallax-layers\"] = tl;\n\n      document.fonts.ready.then(function () {\n        applyBehindScales();\n      });\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-particle-burst.json b/docs/public/catalog/components/caption-particle-burst.json
new file mode 100644
index 0000000000..5b7be0a5c8
--- /dev/null
+++ b/docs/public/catalog/components/caption-particle-burst.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Particle Burst</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Outfit:wght@900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      #particle-burst {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0a0a;\n      }\n      .bs-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.45);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #bs-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n      .bs-group {\n        position: absolute;\n        bottom: 120px;\n        left: 0;\n        width: 100%;\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: center;\n        gap: 24px;\n        padding: 0 100px;\n        opacity: 0;\n        visibility: hidden;\n      }\n      .bs-word {\n        font-family: \"Outfit\", sans-serif;\n        font-weight: 900;\n        font-size: 88px;\n        text-transform: uppercase;\n        color: rgba(255, 255, 255, 0.45);\n        display: inline-block;\n        letter-spacing: 0.05em;\n        line-height: 1;\n      }\n      .bs-particle {\n        position: absolute;\n        width: 10px;\n        height: 10px;\n        border-radius: 50%;\n        opacity: 0;\n        pointer-events: none;\n        z-index: 20;\n        left: 960px;\n        bottom: 180px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"particle-burst\"\n      data-composition-id=\"caption-particle-burst\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"bs-overlay\"></div>\n      <div id=\"bs-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        function mulberry32(seed) {\n          return function () {\n            seed |= 0;\n            seed = (seed + 0x6d2b79f5) | 0;\n            var t = Math.imul(seed ^ (seed >>> 15), 1 | seed);\n            t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;\n            return ((t ^ (t >>> 14)) >>> 0) / 4294967296;\n          };\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        // Keywords get particle burst + gold color\n        var KEYWORDS = new Set([8, 12, 15, 24, 27]); // HyperFrames, HTML, professional, code, cinema.\n\n        var RAW_GROUPS = [\n          [0, 3],\n          [4, 7],\n          [8, 8],\n          [9, 12],\n          [13, 15],\n          [16, 16],\n          [17, 19],\n          [20, 22],\n          [23, 24],\n          [25, 27],\n        ];\n        var GROUPS = RAW_GROUPS.map(function (pair, gi) {\n          var ws = pair[0],\n            we = pair[1];\n          var nextStart = gi + 1 < RAW_GROUPS.length ? WORDS[RAW_GROUPS[gi + 1][0]].start : 8.0;\n          var gEnd = Math.min(WORDS[we].end + 0.35, nextStart - 0.05);\n          return { wordStart: ws, wordEnd: we, start: WORDS[ws].start, end: gEnd };\n        });\n\n        var PARTICLE_COLORS = [\n          \"#FFD700\",\n          \"#FF6B35\",\n          \"#FF3C78\",\n          \"#9B5DE5\",\n          \"#00BBF9\",\n          \"#00F5D4\",\n          \"#ffffff\",\n          \"#F15BB5\",\n        ];\n        var NUM_PARTICLES = 10;\n\n        var container = document.getElementById(\"bs-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        GROUPS.forEach(function (g, gi) {\n          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);\n          var groupText = groupWords\n            .map(function (w) {\n              return w.text.toUpperCase();\n            })\n            .join(\" \");\n          var fontSize = fitFontSize(groupText, 88, \"900\", \"'Outfit', sans-serif\", 1720);\n          var grp = document.createElement(\"div\");\n          grp.className = \"bs-group\";\n          grp.id = \"bs-grp-\" + gi;\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var span = document.createElement(\"span\");\n            span.className = \"bs-word\";\n            span.id = \"bs-w-\" + wi;\n            span.textContent = w.text.toUpperCase();\n            span.style.fontSize = fontSize + \"px\";\n            grp.appendChild(span);\n          });\n\n          container.appendChild(grp);\n        });\n\n        // Create particles for keyword words\n        var particleData = {};\n        WORDS.forEach(function (w, wi) {\n          if (!KEYWORDS.has(wi)) return;\n          var rng = mulberry32(wi * 137 + 99);\n          particleData[wi] = [];\n          for (var p = 0; p < NUM_PARTICLES; p++) {\n            var angle = (p / NUM_PARTICLES) * Math.PI * 2 + rng() * 0.6;\n            var dist = 120 + rng() * 200;\n            var sz = 4 + rng() * 8;\n            var dx = Math.cos(angle) * dist;\n            var dy = -Math.sin(angle) * dist;\n            var dot = document.createElement(\"div\");\n            dot.className = \"bs-particle\";\n            dot.id = \"bs-p-\" + wi + \"-\" + p;\n            dot.style.backgroundColor = PARTICLE_COLORS[p % PARTICLE_COLORS.length];\n            dot.style.width = sz.toFixed(1) + \"px\";\n            dot.style.height = sz.toFixed(1) + \"px\";\n            container.appendChild(dot);\n            particleData[wi].push({ el: dot, dx: dx, dy: dy });\n          }\n        });\n\n        GROUPS.forEach(function (g, gi) {\n          var grp = document.getElementById(\"bs-grp-\" + gi);\n          var groupWords = WORDS.slice(g.wordStart, g.wordEnd + 1);\n\n          tl.set(grp, { visibility: \"visible\" }, g.start);\n          tl.fromTo(\n            grp,\n            { opacity: 0, scale: 0.92 },\n            { opacity: 1, scale: 1, duration: 0.2, ease: \"back.out(1.5)\" },\n            g.start,\n          );\n\n          groupWords.forEach(function (w, i) {\n            var wi = g.wordStart + i;\n            var wordEl = document.getElementById(\"bs-w-\" + wi);\n            var isKW = KEYWORDS.has(wi);\n\n            tl.to(\n              wordEl,\n              { color: isKW ? \"#FFD700\" : \"#ffffff\", scale: isKW ? 1.12 : 1.05, duration: 0.08 },\n              w.start,\n            );\n            tl.to(wordEl, { color: \"rgba(255,255,255,0.4)\", scale: 1.0, duration: 0.1 }, w.end);\n\n            if (isKW && particleData[wi]) {\n              particleData[wi].forEach(function (pd, pi) {\n                tl.set(pd.el, { x: 0, y: 0, opacity: 0 }, w.start);\n                tl.to(\n                  pd.el,\n                  { x: pd.dx, y: pd.dy, opacity: 1, duration: 0.12, ease: \"power3.out\" },\n                  w.start + pi * 0.018,\n                );\n                tl.to(\n                  pd.el,\n                  { opacity: 0, duration: 0.45, ease: \"power1.in\" },\n                  w.start + 0.12 + pi * 0.018,\n                );\n                tl.set(pd.el, { opacity: 0, x: 0, y: 0 }, w.start + 0.7);\n              });\n            }\n          });\n\n          tl.to(grp, { opacity: 0, duration: 0.14, ease: \"power2.in\" }, g.end - 0.14);\n          tl.set(grp, { opacity: 0, visibility: \"hidden\" }, g.end);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-particle-burst\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-pill-karaoke.json b/docs/public/catalog/components/caption-pill-karaoke.json
new file mode 100644
index 0000000000..88e9068cee
--- /dev/null
+++ b/docs/public/catalog/components/caption-pill-karaoke.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Pill Karaoke</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000000;\n        font-family: \"Poppins\", Arial, sans-serif;\n      }\n\n      #pill-karaoke {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000000;\n      }\n\n      .caption-layer {\n        position: absolute;\n        inset: 0;\n        z-index: 20;\n        pointer-events: none;\n        transform: translateZ(0);\n      }\n\n      .safe-zone {\n        position: absolute;\n        bottom: 100px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 1600px;\n        height: 220px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .caption-group {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 1600px;\n        height: 220px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n      }\n\n      .caption-pill {\n        width: auto;\n        max-width: 1600px;\n        padding: 18px 60px 20px;\n        border-radius: 22px;\n        background: #e7e5e7;\n        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);\n        text-align: center;\n        overflow: visible;\n      }\n\n      .caption-copy {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        width: 100%;\n        color: #a6a6a6;\n        font-family: \"Poppins\", Arial, sans-serif;\n        font-size: 72px;\n        font-weight: 700;\n        line-height: 1.16;\n        letter-spacing: 0;\n        white-space: nowrap;\n        word-break: normal;\n        overflow: visible;\n      }\n\n      .caption-line {\n        display: flex;\n        justify-content: center;\n        gap: 16px;\n        width: 100%;\n        max-width: none;\n        line-height: 1.16;\n        white-space: nowrap;\n        overflow: visible;\n      }\n\n      .caption-word {\n        display: inline-block;\n        color: #a6a6a6;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"pill-karaoke\"\n      data-composition-id=\"caption-pill-karaoke\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"caption-layer\" aria-hidden=\"true\">\n        <div id=\"caption-stage\" class=\"safe-zone\"></div>\n      </div>\n    </div>\n\n    <script>\n      var DURATION = 8;\n      var SAFE_ZONE_WIDTH = 1400;\n      var PILL_MAX_WIDTH = 1400;\n      var PILL_MIN_PADDING_X = 30;\n      var PILL_MAX_PADDING_X = 60;\n      var FONT_WIDTH_SAFETY = 1.18;\n      var FONT_FAMILY = \"Poppins\";\n      var FONT_WEIGHT = \"700\";\n      var BASE_FONT_SIZE = 72;\n      var MIN_FONT_SIZE = 52;\n      var MAX_WORDS_PER_GROUP = 4;\n      var WORD_SPACING = 16;\n      var PAUSE_THRESHOLD = 0.1;\n      var GROUP_END_BUFFER = 0.3;\n      var COLOR_INACTIVE = \"#A6A6A6\";\n      var COLOR_ACTIVE = \"#1C1E1D\";\n      var COLOR_FADE_DURATION = 0.1;\n      var WORD_FADE_LEAD = 0.05;\n\n      var TRANSCRIPT = [\n        { text: \"Every\", start: 0.0, end: 0.3 },\n        { text: \"great\", start: 0.3, end: 0.55 },\n        { text: \"video\", start: 0.55, end: 0.85 },\n        { text: \"starts\", start: 0.85, end: 1.1 },\n        { text: \"with\", start: 1.1, end: 1.25 },\n        { text: \"a\", start: 1.25, end: 1.35 },\n        { text: \"single\", start: 1.35, end: 1.65 },\n        { text: \"frame.\", start: 1.65, end: 2.0 },\n        { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n        { text: \"lets\", start: 2.65, end: 2.85 },\n        { text: \"you\", start: 2.85, end: 2.95 },\n        { text: \"write\", start: 2.95, end: 3.15 },\n        { text: \"HTML\", start: 3.15, end: 3.55 },\n        { text: \"and\", start: 3.55, end: 3.65 },\n        { text: \"render\", start: 3.65, end: 3.95 },\n        { text: \"professional\", start: 3.95, end: 4.45 },\n        { text: \"video.\", start: 4.45, end: 4.8 },\n        { text: \"No\", start: 4.9, end: 5.05 },\n        { text: \"timeline.\", start: 5.05, end: 5.45 },\n        { text: \"No\", start: 5.5, end: 5.65 },\n        { text: \"drag\", start: 5.65, end: 5.85 },\n        { text: \"and\", start: 5.85, end: 5.95 },\n        { text: \"drop.\", start: 5.95, end: 6.25 },\n        { text: \"Just\", start: 6.35, end: 6.55 },\n        { text: \"code\", start: 6.55, end: 6.8 },\n        { text: \"that\", start: 6.8, end: 6.95 },\n        { text: \"becomes\", start: 6.95, end: 7.3 },\n        { text: \"cinema.\", start: 7.3, end: 7.7 },\n      ];\n\n      function normalizeWords(rawWords) {\n        return rawWords\n          .map(function (item) {\n            var text = String(item.word || item.text || \"\").trim();\n            return {\n              text: text,\n              start: Math.max(0, Number(item.start) || 0),\n              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),\n            };\n          })\n          .filter(function (w) {\n            return w.text.length > 0;\n          });\n      }\n\n      var measureCanvas = document.createElement(\"canvas\");\n      var measureContext = measureCanvas.getContext(\"2d\");\n\n      function measureWordWidth(text, fontSize) {\n        measureContext.font = FONT_WEIGHT + \" \" + fontSize + \"px \" + FONT_FAMILY;\n        return measureContext.measureText(text).width * FONT_WIDTH_SAFETY;\n      }\n\n      function measureLineWidth(words, fontSize) {\n        return words.reduce(function (total, word, index) {\n          return (\n            total + measureWordWidth(word.text.toLowerCase(), fontSize) + (index ? WORD_SPACING : 0)\n          );\n        }, 0);\n      }\n\n      function splitLinesForGroup(words, fontSize) {\n        var maxLineWidth = PILL_MAX_WIDTH - PILL_MIN_PADDING_X * 2;\n        if (\n          words.some(function (w) {\n            return measureWordWidth(w.text.toLowerCase(), fontSize) > maxLineWidth;\n          })\n        ) {\n          return null;\n        }\n        if (measureLineWidth(words, fontSize) <= maxLineWidth) return [words];\n        var bestSplit = null;\n        var bestImbalance = Infinity;\n        for (var split = 1; split < words.length; split++) {\n          var firstLine = words.slice(0, split);\n          var secondLine = words.slice(split);\n          var firstWidth = measureLineWidth(firstLine, fontSize);\n          var secondWidth = measureLineWidth(secondLine, fontSize);\n          if (firstWidth <= maxLineWidth && secondWidth <= maxLineWidth) {\n            var imbalance = Math.abs(firstWidth - secondWidth);\n            if (imbalance < bestImbalance) {\n              bestSplit = [firstLine, secondLine];\n              bestImbalance = imbalance;\n            }\n          }\n        }\n        return bestSplit;\n      }\n\n      function fitsInTwoLinesAtSize(words, fontSize) {\n        return splitLinesForGroup(words, fontSize) !== null;\n      }\n\n      function planPillLayout(words, fontSize) {\n        var lines = splitLinesForGroup(words, fontSize) || [words];\n        var widestLine = lines.reduce(function (max, lineWords) {\n          return Math.max(max, measureLineWidth(lineWords, fontSize));\n        }, 0);\n        var availablePadding = Math.floor((PILL_MAX_WIDTH - widestLine) / 2);\n        var padX = Math.max(PILL_MIN_PADDING_X, Math.min(PILL_MAX_PADDING_X, availablePadding));\n        var pillWidth = Math.min(PILL_MAX_WIDTH, Math.ceil(widestLine + padX * 2));\n        return { lines: lines, padX: padX, pillWidth: pillWidth };\n      }\n\n      function makeGroups(words) {\n        var groups = [];\n        var current = [];\n        words.forEach(function (word, index) {\n          var testGroup = current.concat([word]);\n          var nextWord = words[index + 1];\n          var wouldExceedMaxWords = testGroup.length > MAX_WORDS_PER_GROUP;\n          var wouldExceedTwoLines = !fitsInTwoLinesAtSize(testGroup, BASE_FONT_SIZE);\n          if (wouldExceedMaxWords || wouldExceedTwoLines) {\n            if (current.length) {\n              groups.push({\n                words: current.slice(),\n                start: current[0].start,\n                end: current[current.length - 1].end,\n              });\n            }\n            current = [word];\n            return;\n          }\n          current.push(word);\n          var hasPunctuation = /[,.:!?]$/.test(word.text);\n          var pauseDuration = nextWord ? nextWord.start - word.end : 0;\n          var hasNaturalPause = pauseDuration >= PAUSE_THRESHOLD;\n          var maxWordsReached = current.length >= MAX_WORDS_PER_GROUP;\n          if (maxWordsReached || !nextWord || hasPunctuation || hasNaturalPause) {\n            groups.push({\n              words: current.slice(),\n              start: current[0].start,\n              end: current[current.length - 1].end,\n            });\n            current = [];\n          }\n        });\n        if (current.length)\n          groups.push({\n            words: current.slice(),\n            start: current[0].start,\n            end: current[current.length - 1].end,\n          });\n        return groups;\n      }\n\n      function fontSizeForGroup(words) {\n        var size = BASE_FONT_SIZE;\n        while (size > MIN_FONT_SIZE && !fitsInTwoLinesAtSize(words, size)) {\n          size -= 2;\n        }\n        return size;\n      }\n\n      function buildCaptions(groups) {\n        var stage = document.getElementById(\"caption-stage\");\n        groups.forEach(function (group, groupIndex) {\n          var groupEl = document.createElement(\"div\");\n          var pillEl = document.createElement(\"div\");\n          var copyEl = document.createElement(\"div\");\n          var fontSize = fontSizeForGroup(group.words);\n          groupEl.id = \"caption-group-\" + groupIndex;\n          groupEl.className = \"caption-group\";\n          pillEl.className = \"caption-pill\";\n          copyEl.className = \"caption-copy\";\n          copyEl.style.fontSize = fontSize + \"px\";\n          var indexedWords = group.words.map(function (word, wordIndex) {\n            return { text: word.text, start: word.start, end: word.end, wordIndex: wordIndex };\n          });\n          var layout = planPillLayout(indexedWords, fontSize);\n          pillEl.style.width = layout.pillWidth + \"px\";\n          pillEl.style.paddingLeft = layout.padX + \"px\";\n          pillEl.style.paddingRight = layout.padX + \"px\";\n          layout.lines.slice(0, 2).forEach(function (lineWords) {\n            var lineEl = document.createElement(\"div\");\n            lineEl.className = \"caption-line\";\n            lineWords.forEach(function (word) {\n              var wordEl = document.createElement(\"span\");\n              wordEl.id = \"caption-word-\" + groupIndex + \"-\" + word.wordIndex;\n              wordEl.className = \"caption-word\";\n              wordEl.textContent = word.text.toLowerCase();\n              lineEl.appendChild(wordEl);\n            });\n            copyEl.appendChild(lineEl);\n          });\n          pillEl.appendChild(copyEl);\n          groupEl.appendChild(pillEl);\n          stage.appendChild(groupEl);\n        });\n      }\n\n      var WORDS = normalizeWords(TRANSCRIPT);\n      var GROUPS = makeGroups(WORDS);\n      buildCaptions(GROUPS);\n\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      GROUPS.forEach(function (group, groupIndex) {\n        var groupEl = document.getElementById(\"caption-group-\" + groupIndex);\n        var nextGroup = GROUPS[groupIndex + 1];\n        var isLastGroup = groupIndex === GROUPS.length - 1;\n        var effectiveEnd = isLastGroup\n          ? DURATION\n          : Math.min(nextGroup.start, group.end + GROUP_END_BUFFER);\n        var visibleStart = Math.max(0, group.start);\n        var visibleEnd = Math.max(visibleStart + 0.01, effectiveEnd);\n\n        tl.set(groupEl, { opacity: 1 }, visibleStart);\n        tl.set(groupEl, { opacity: 0 }, visibleEnd);\n\n        group.words.forEach(function (word, wordIndex) {\n          var wordEl = document.getElementById(\"caption-word-\" + groupIndex + \"-\" + wordIndex);\n          var isFirstWord = wordIndex === 0;\n          var wordStart = Math.max(visibleStart, word.start - WORD_FADE_LEAD);\n          tl.set(wordEl, { color: isFirstWord ? COLOR_ACTIVE : COLOR_INACTIVE }, visibleStart);\n          if (isFirstWord) return;\n          tl.to(\n            wordEl,\n            { color: COLOR_ACTIVE, duration: COLOR_FADE_DURATION, ease: \"none\" },\n            wordStart,\n          );\n        });\n      });\n\n      window.__timelines[\"caption-pill-karaoke\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-texture.json b/docs/public/catalog/components/caption-texture.json
new file mode 100644
index 0000000000..da51aebfe4
--- /dev/null
+++ b/docs/public/catalog/components/caption-texture.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Texture</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link href=\"https://fonts.googleapis.com/css2?family=Anton&display=swap\" rel=\"stylesheet\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      .hf-texture-text {\n        color: #fff;\n        -webkit-mask-size: var(--mask-size, cover);\n        mask-size: var(--mask-size, cover);\n        -webkit-mask-position: var(--mask-position, center);\n        mask-position: var(--mask-position, center);\n        -webkit-mask-mode: luminance;\n        mask-mode: luminance;\n        filter: contrast(var(--mask-contrast, 1));\n      }\n\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #0a0805;\n      }\n      #texture-lava {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #0a0805;\n      }\n      .lv-overlay {\n        position: absolute;\n        inset: 0;\n        background: rgba(0, 0, 0, 0.55);\n        z-index: 1;\n        pointer-events: none;\n      }\n      #lv-container {\n        position: absolute;\n        inset: 0;\n        z-index: 10;\n        pointer-events: none;\n      }\n\n      .lv-texture-override {\n        -webkit-mask-size: 200% 200%;\n        mask-size: 200% 200%;\n        -webkit-mask-position: 0% 50%;\n        mask-position: 0% 50%;\n        -webkit-mask-mode: luminance;\n        mask-mode: luminance;\n        filter: contrast(1.2);\n      }\n\n      .lv-shadow {\n        position: absolute;\n        left: 0;\n        width: 100%;\n        text-align: center;\n        top: 50%;\n        filter: drop-shadow(0 4px 24px rgba(255, 100, 20, 0.55));\n        opacity: 0;\n        visibility: hidden;\n      }\n      .lv-word {\n        font-family: \"Anton\", sans-serif;\n        font-weight: 400;\n        text-transform: uppercase;\n        color: #ffd0a0;\n        display: inline-block;\n        letter-spacing: 0.04em;\n        line-height: 1;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"caption-texture\"\n      data-composition-id=\"caption-texture\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-composition-variables='{\"texture\":{\"type\":\"string\",\"default\":\"lava\"}}'\n    >\n      <div class=\"lv-overlay\"></div>\n      <div id=\"lv-container\"></div>\n    </div>\n\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        var vars =\n          window.__hyperframes && window.__hyperframes.getVariables\n            ? window.__hyperframes.getVariables()\n            : {};\n        var TEXTURE = vars.texture || \"lava\";\n        var TEXTURE_URL = \"compositions/components/\" + TEXTURE + \".png\";\n\n        var _fitCanvas = document.createElement(\"canvas\");\n        var _fitCtx = _fitCanvas.getContext(\"2d\");\n        function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n          var size = baseFontSize;\n          var minSize = Math.floor(baseFontSize * 0.45);\n          while (size > minSize) {\n            _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n            if (_fitCtx.measureText(text).width <= maxWidth) return size;\n            size -= 2;\n          }\n          return minSize;\n        }\n\n        var WORDS = [\n          { text: \"Every\", start: 0.0, end: 0.3 },\n          { text: \"great\", start: 0.3, end: 0.55 },\n          { text: \"video\", start: 0.55, end: 0.85 },\n          { text: \"starts\", start: 0.85, end: 1.1 },\n          { text: \"with\", start: 1.1, end: 1.25 },\n          { text: \"a\", start: 1.25, end: 1.35 },\n          { text: \"single\", start: 1.35, end: 1.65 },\n          { text: \"frame.\", start: 1.65, end: 2.0 },\n          { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n          { text: \"lets\", start: 2.65, end: 2.85 },\n          { text: \"you\", start: 2.85, end: 2.95 },\n          { text: \"write\", start: 2.95, end: 3.15 },\n          { text: \"HTML\", start: 3.15, end: 3.55 },\n          { text: \"and\", start: 3.55, end: 3.65 },\n          { text: \"render\", start: 3.65, end: 3.95 },\n          { text: \"professional\", start: 3.95, end: 4.45 },\n          { text: \"video.\", start: 4.45, end: 4.8 },\n          { text: \"No\", start: 4.9, end: 5.05 },\n          { text: \"timeline.\", start: 5.05, end: 5.45 },\n          { text: \"No\", start: 5.5, end: 5.65 },\n          { text: \"drag\", start: 5.65, end: 5.85 },\n          { text: \"and\", start: 5.85, end: 5.95 },\n          { text: \"drop.\", start: 5.95, end: 6.25 },\n          { text: \"Just\", start: 6.35, end: 6.55 },\n          { text: \"code\", start: 6.55, end: 6.8 },\n          { text: \"that\", start: 6.8, end: 6.95 },\n          { text: \"becomes\", start: 6.95, end: 7.3 },\n          { text: \"cinema.\", start: 7.3, end: 7.7 },\n        ];\n\n        var KEYWORDS = new Set([8, 12, 15, 24, 27]);\n\n        var container = document.getElementById(\"lv-container\");\n        var tl = gsap.timeline({ paused: true });\n\n        WORDS.forEach(function (w, wi) {\n          var txt = w.text.toUpperCase();\n          var fontSize = fitFontSize(txt, 200, \"400\", \"'Anton', sans-serif\", 1720);\n\n          var shadow = document.createElement(\"div\");\n          shadow.className = \"lv-shadow\";\n          shadow.id = \"lv-shadow-\" + wi;\n          gsap.set(shadow, { yPercent: -50 });\n\n          var wordEl = document.createElement(\"div\");\n          wordEl.className = \"hf-texture-text lv-texture-override lv-word\";\n          wordEl.id = \"lv-word-\" + wi;\n          wordEl.textContent = txt;\n          wordEl.style.fontSize = fontSize + \"px\";\n          wordEl.style.webkitMaskImage = \"url('\" + TEXTURE_URL + \"')\";\n          wordEl.style.maskImage = \"url('\" + TEXTURE_URL + \"')\";\n          if (KEYWORDS.has(wi)) wordEl.style.color = \"#FFAA44\";\n\n          shadow.appendChild(wordEl);\n          container.appendChild(shadow);\n\n          var dur = Math.max(w.end - w.start + 0.3, 0.4);\n\n          tl.set(shadow, { visibility: \"visible\", opacity: 0 }, w.start);\n          tl.fromTo(\n            shadow,\n            { opacity: 0, scale: 0.88 },\n            { opacity: 1, scale: 1, duration: 0.18, ease: \"power3.out\" },\n            w.start,\n          );\n          tl.set(wordEl, { \"--mask-position\": \"0% 50%\" }, w.start);\n          tl.to(\n            wordEl,\n            { \"--mask-position\": \"100% 50%\", duration: dur, ease: \"sine.inOut\" },\n            w.start,\n          );\n\n          tl.to(shadow, { opacity: 0, scale: 1.08, duration: 0.1, ease: \"power2.in\" }, w.end);\n          tl.set(shadow, { opacity: 0, visibility: \"hidden\" }, w.end + 0.1);\n        });\n\n        tl.seek(0);\n        window.__timelines[\"caption-texture\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/caption-weight-shift.json b/docs/public/catalog/components/caption-weight-shift.json
new file mode 100644
index 0000000000..526043770f
--- /dev/null
+++ b/docs/public/catalog/components/caption-weight-shift.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Weight Shift</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        margin: 0;\n        overflow: hidden;\n        background: #000000;\n        font-family: \"Montserrat\", Arial, sans-serif;\n      }\n\n      #weight-shift {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000000;\n      }\n\n      .caption-layer {\n        position: absolute;\n        inset: 0;\n        z-index: 20;\n        pointer-events: none;\n        transform: translateZ(0);\n      }\n\n      .safe-zone {\n        position: absolute;\n        bottom: 100px;\n        left: 50%;\n        transform: translateX(-50%);\n        width: 1400px;\n        height: 278px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .caption-group {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 1400px;\n        height: 278px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n        transform-origin: 50% 50%;\n        will-change: transform;\n        backface-visibility: hidden;\n      }\n\n      .caption-copy {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        max-width: 1400px;\n        text-align: center;\n      }\n\n      .caption-line {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 12px;\n        width: max-content;\n        max-width: 1400px;\n        line-height: 1.1;\n        white-space: nowrap;\n        color: #ffffff;\n        font-family: \"Montserrat\", Arial, sans-serif;\n        font-weight: 300;\n        font-size: 72px;\n        letter-spacing: -0.03em;\n        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);\n        text-transform: lowercase;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"weight-shift\"\n      data-composition-id=\"caption-weight-shift\"\n      data-start=\"0\"\n      data-duration=\"8\"\n      data-fps=\"30\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"caption-layer\" aria-hidden=\"true\">\n        <div id=\"caption-stage\" class=\"safe-zone\"></div>\n      </div>\n    </div>\n\n    <script>\n      var DURATION = 8;\n      var SAFE_ZONE_WIDTH = 1400;\n      var MAX_LINE_WIDTH = SAFE_ZONE_WIDTH - 40;\n      var CAPTION_FONT_SIZE = 72;\n      var MAX_WORDS_PER_GROUP = 4;\n      var WORD_SPACING = 12;\n      var PAUSE_THRESHOLD = 0.1;\n      var ENTRY_DURATION = 100 / 1000;\n      var WEIGHT_TRANSITION = 100 / 1000;\n      var FONT_WIDTH_SAFETY = 1.14;\n      var FONT_WEIGHT_LIGHT = 300;\n      var FONT_WEIGHT_BOLD = 700;\n\n      var TRANSCRIPT = [\n        { text: \"Every\", start: 0.0, end: 0.3 },\n        { text: \"great\", start: 0.3, end: 0.55 },\n        { text: \"video\", start: 0.55, end: 0.85 },\n        { text: \"starts\", start: 0.85, end: 1.1 },\n        { text: \"with\", start: 1.1, end: 1.25 },\n        { text: \"a\", start: 1.25, end: 1.35 },\n        { text: \"single\", start: 1.35, end: 1.65 },\n        { text: \"frame.\", start: 1.65, end: 2.0 },\n        { text: \"HyperFrames\", start: 2.1, end: 2.65 },\n        { text: \"lets\", start: 2.65, end: 2.85 },\n        { text: \"you\", start: 2.85, end: 2.95 },\n        { text: \"write\", start: 2.95, end: 3.15 },\n        { text: \"HTML\", start: 3.15, end: 3.55 },\n        { text: \"and\", start: 3.55, end: 3.65 },\n        { text: \"render\", start: 3.65, end: 3.95 },\n        { text: \"professional\", start: 3.95, end: 4.45 },\n        { text: \"video.\", start: 4.45, end: 4.8 },\n        { text: \"No\", start: 4.9, end: 5.05 },\n        { text: \"timeline.\", start: 5.05, end: 5.45 },\n        { text: \"No\", start: 5.5, end: 5.65 },\n        { text: \"drag\", start: 5.65, end: 5.85 },\n        { text: \"and\", start: 5.85, end: 5.95 },\n        { text: \"drop.\", start: 5.95, end: 6.25 },\n        { text: \"Just\", start: 6.35, end: 6.55 },\n        { text: \"code\", start: 6.55, end: 6.8 },\n        { text: \"that\", start: 6.8, end: 6.95 },\n        { text: \"becomes\", start: 6.95, end: 7.3 },\n        { text: \"cinema.\", start: 7.3, end: 7.7 },\n      ];\n\n      function normalizeWords(rawWords) {\n        return rawWords\n          .map(function (item) {\n            return {\n              text: String(item.word || item.text || \"\").trim(),\n              start: Math.max(0, Number(item.start) || 0),\n              end: Math.min(DURATION, Math.max(Number(item.start) || 0, Number(item.end) || 0)),\n            };\n          })\n          .filter(function (word) {\n            return word.text.length > 0;\n          });\n      }\n\n      var _fitCanvas = document.createElement(\"canvas\");\n      var _fitCtx = _fitCanvas.getContext(\"2d\");\n      function fitFontSize(text, baseFontSize, fontWeight, fontFamily, maxWidth) {\n        var size = baseFontSize;\n        var minSize = Math.floor(baseFontSize * 0.45);\n        while (size > minSize) {\n          _fitCtx.font = fontWeight + \" \" + size + \"px \" + fontFamily;\n          if (_fitCtx.measureText(text).width <= maxWidth) return size;\n          size -= 2;\n        }\n        return minSize;\n      }\n\n      var measureCanvas = document.createElement(\"canvas\");\n      var measureContext = measureCanvas.getContext(\"2d\");\n      measureContext.font = \"700 \" + CAPTION_FONT_SIZE + \"px Montserrat\";\n\n      function measureWord(word) {\n        return measureContext.measureText(word.text.toLowerCase()).width * FONT_WIDTH_SAFETY;\n      }\n\n      function measureLineWidth(words) {\n        return words.reduce(function (total, word, index) {\n          return total + measureWord(word) + (index ? WORD_SPACING : 0);\n        }, 0);\n      }\n\n      function fitsInTwoLines(words) {\n        return measureLineWidth(words) <= MAX_LINE_WIDTH * 1.8;\n      }\n\n      function splitLines(words) {\n        if (words.length < 2) {\n          return [{ words: words, startIndex: 0 }];\n        }\n        var bestSplit = Math.ceil(words.length / 2);\n        var bestDiff = Infinity;\n        for (var s = 1; s < words.length; s++) {\n          var w1 = measureLineWidth(words.slice(0, s));\n          var w2 = measureLineWidth(words.slice(s));\n          if (w1 <= MAX_LINE_WIDTH && w2 <= MAX_LINE_WIDTH) {\n            var diff = Math.abs(w1 - w2);\n            if (diff < bestDiff) {\n              bestDiff = diff;\n              bestSplit = s;\n            }\n          }\n        }\n        var result = [];\n        var line1 = words.slice(0, bestSplit);\n        var line2 = words.slice(bestSplit);\n        if (line1.length) result.push({ words: line1, startIndex: 0 });\n        if (line2.length) result.push({ words: line2, startIndex: line1.length });\n        return result;\n      }\n\n      function avoidSingleWordGroups(groups) {\n        var out = [];\n        groups.forEach(function (group) {\n          if (\n            group.words.length === 1 &&\n            out.length > 0 &&\n            out[out.length - 1].words.length < MAX_WORDS_PER_GROUP\n          ) {\n            out[out.length - 1] = makeGroup(out[out.length - 1].words.concat(group.words));\n          } else {\n            out.push(group);\n          }\n        });\n\n        for (var i = 0; i < out.length; i++) {\n          if (out[i].words.length !== 1) continue;\n          if (i + 1 < out.length && out[i + 1].words.length < MAX_WORDS_PER_GROUP) {\n            out[i] = makeGroup(out[i].words.concat(out[i + 1].words));\n            out.splice(i + 1, 1);\n          } else if (i > 0 && out[i - 1].words.length < MAX_WORDS_PER_GROUP) {\n            out[i - 1] = makeGroup(out[i - 1].words.concat(out[i].words));\n            out.splice(i, 1);\n            i--;\n          }\n        }\n\n        return out;\n      }\n\n      function makeGroups(words) {\n        var groups = [];\n        var current = [];\n        words.forEach(function (word, index) {\n          var nextWord = words[index + 1];\n          var testGroup = current.concat([word]);\n          if (testGroup.length > MAX_WORDS_PER_GROUP || !fitsInTwoLines(testGroup)) {\n            if (current.length) groups.push(makeGroup(current));\n            current = [word];\n            return;\n          }\n          current.push(word);\n          var punctuation = /[,.:!?]$/.test(word.text);\n          var pause = nextWord ? nextWord.start - word.end : 0;\n          if (\n            !nextWord ||\n            punctuation ||\n            pause >= PAUSE_THRESHOLD ||\n            current.length >= MAX_WORDS_PER_GROUP\n          ) {\n            groups.push(makeGroup(current));\n            current = [];\n          }\n        });\n        if (current.length) groups.push(makeGroup(current));\n        return avoidSingleWordGroups(groups);\n      }\n\n      function makeGroup(words) {\n        return {\n          words: words.slice(),\n          lines: splitLines(words),\n          start: words[0].start,\n          end: words[words.length - 1].end,\n        };\n      }\n\n      function buildCaptions(groups) {\n        var stage = document.getElementById(\"caption-stage\");\n        groups.forEach(function (group, groupIndex) {\n          var groupText = group.words\n            .map(function (w) {\n              return w.text.toLowerCase();\n            })\n            .join(\" \");\n          var computedSize = fitFontSize(\n            groupText,\n            CAPTION_FONT_SIZE,\n            \"700\",\n            \"Montserrat\",\n            MAX_LINE_WIDTH,\n          );\n          var groupEl = document.createElement(\"div\");\n          var copyEl = document.createElement(\"div\");\n          groupEl.id = \"caption-group-\" + groupIndex;\n          groupEl.className = \"caption-group\";\n          copyEl.className = \"caption-copy\";\n          group.lines.forEach(function (line, lineIndex) {\n            var lineEl = document.createElement(\"div\");\n            lineEl.className = \"caption-line\";\n            lineEl.id = \"caption-group-\" + groupIndex + \"-line-\" + lineIndex;\n            lineEl.style.fontWeight = lineIndex === 0 ? FONT_WEIGHT_BOLD : FONT_WEIGHT_LIGHT;\n            lineEl.style.fontSize = computedSize + \"px\";\n            line.words.forEach(function (word, wordIndex) {\n              var wordEl = document.createElement(\"span\");\n              wordEl.textContent = word.text.toLowerCase();\n              wordEl.style.display = \"inline-block\";\n              lineEl.appendChild(wordEl);\n            });\n            copyEl.appendChild(lineEl);\n          });\n          groupEl.appendChild(copyEl);\n          stage.appendChild(groupEl);\n        });\n      }\n\n      var WORDS = normalizeWords(TRANSCRIPT);\n      var GROUPS = makeGroups(WORDS);\n      buildCaptions(GROUPS);\n\n      window.__timelines = window.__timelines || {};\n      var tl = gsap.timeline({ paused: true });\n\n      var visibleStarts = GROUPS.map(function (group, groupIndex) {\n        var prev = GROUPS[groupIndex - 1];\n        var availableGap = prev ? Math.max(0, group.start - prev.end) : ENTRY_DURATION;\n        var entryLead = Math.min(ENTRY_DURATION, availableGap);\n        return Math.max(0, group.start - entryLead);\n      });\n\n      var allGroupEls = GROUPS.map(function (_, i) {\n        return document.getElementById(\"caption-group-\" + i);\n      });\n\n      GROUPS.forEach(function (group, groupIndex) {\n        var groupEl = allGroupEls[groupIndex];\n        var visibleStart = visibleStarts[groupIndex];\n        var visibleEnd = groupIndex < GROUPS.length - 1 ? visibleStarts[groupIndex + 1] : DURATION;\n\n        allGroupEls.forEach(function (otherEl, otherIndex) {\n          if (otherIndex !== groupIndex) tl.set(otherEl, { opacity: 0 }, visibleStart);\n        });\n\n        tl.set(groupEl, { opacity: 0, scale: 0.85 }, visibleStart);\n        tl.to(\n          groupEl,\n          { opacity: 1, scale: 1, duration: ENTRY_DURATION, ease: \"power3.out\", force3D: true },\n          visibleStart,\n        );\n\n        if (group.lines.length === 2) {\n          var line1El = document.getElementById(\"caption-group-\" + groupIndex + \"-line-0\");\n          var line2El = document.getElementById(\"caption-group-\" + groupIndex + \"-line-1\");\n          var line2FirstWord = group.lines[1].words[0];\n          var switchTime = line2FirstWord.start;\n\n          tl.to(\n            line1El,\n            { fontWeight: FONT_WEIGHT_LIGHT, duration: WEIGHT_TRANSITION, ease: \"power2.out\" },\n            switchTime,\n          );\n          tl.to(\n            line2El,\n            { fontWeight: FONT_WEIGHT_BOLD, duration: WEIGHT_TRANSITION, ease: \"power2.out\" },\n            switchTime,\n          );\n        }\n\n        tl.set(groupEl, { opacity: 0 }, visibleEnd);\n      });\n\n      window.__timelines[\"caption-weight-shift\"] = tl;\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/grain-overlay.json b/docs/public/catalog/components/grain-overlay.json
new file mode 100644
index 0000000000..c7607a48d7
--- /dev/null
+++ b/docs/public/catalog/components/grain-overlay.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Grain Overlay — Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"grain-overlay-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <!-- Background content to demonstrate the overlay -->\n      <div class=\"demo-bg\">\n        <div style=\"text-align: center; z-index: 1\">\n          <div\n            class=\"demo-title\"\n            style=\"font-size: 80px; font-weight: 700; color: #2c1e16; opacity: 0\"\n          >\n            Grain Overlay\n          </div>\n          <div\n            class=\"demo-subtitle\"\n            style=\"font-size: 32px; color: #5a4a3a; margin-top: 20px; opacity: 0\"\n          >\n            Adds warmth and analog character\n          </div>\n        </div>\n      </div>\n\n      <!-- The grain overlay component -->\n      <div\n        id=\"grain-overlay\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          pointer-events: none;\n          z-index: 100;\n        \"\n      >\n        <div class=\"grain-texture\"></div>\n      </div>\n\n      <style>\n        .demo-bg {\n          width: 1920px;\n          height: 1080px;\n          background: linear-gradient(135deg, #f5f0e0 0%, #e8d8b8 50%, #d4c4a0 100%);\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-family: \"Inter\", sans-serif;\n          position: relative;\n        }\n\n        @keyframes hf-grain-noise {\n          0%,\n          100% {\n            transform: translate(0, 0);\n          }\n          10% {\n            transform: translate(-5%, -5%);\n          }\n          20% {\n            transform: translate(-10%, 5%);\n          }\n          30% {\n            transform: translate(5%, -10%);\n          }\n          40% {\n            transform: translate(-5%, 15%);\n          }\n          50% {\n            transform: translate(-10%, 5%);\n          }\n          60% {\n            transform: translate(15%, 0);\n          }\n          70% {\n            transform: translate(0, 10%);\n          }\n          80% {\n            transform: translate(-15%, 0);\n          }\n          90% {\n            transform: translate(10%, 5%);\n          }\n        }\n\n        #grain-overlay .grain-texture {\n          position: absolute;\n          top: -50%;\n          left: -50%;\n          width: 200%;\n          height: 200%;\n          background: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E\");\n          opacity: 0.15;\n          animation: hf-grain-noise 0.5s steps(1) infinite;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n\n          tl.to(\n            \".demo-title\",\n            {\n              opacity: 1,\n              y: -10,\n              duration: 1,\n              ease: \"power3.out\",\n            },\n            0.5,\n          );\n\n          tl.to(\n            \".demo-subtitle\",\n            {\n              opacity: 1,\n              y: -5,\n              duration: 0.8,\n              ease: \"power3.out\",\n            },\n            1.0,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"grain-overlay-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/grid-pixelate-wipe.json b/docs/public/catalog/components/grid-pixelate-wipe.json
new file mode 100644
index 0000000000..043d470f50
--- /dev/null
+++ b/docs/public/catalog/components/grid-pixelate-wipe.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Grid Pixelate Wipe — Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"grid-pixelate-wipe-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"8\"\n    >\n      <!-- Scene A -->\n      <div id=\"scene-a\" class=\"demo-scene scene-a\">\n        <div style=\"text-align: center; color: white\">\n          <div style=\"font-size: 80px; font-weight: 800\">Scene A</div>\n          <div style=\"font-size: 32px; margin-top: 20px; opacity: 0.7\">\n            The grid wipe dissolves this away\n          </div>\n        </div>\n      </div>\n\n      <!-- Scene B (hidden initially) -->\n      <div id=\"scene-b\" class=\"demo-scene scene-b\">\n        <div style=\"text-align: center; color: white\">\n          <div style=\"font-size: 80px; font-weight: 800\">Scene B</div>\n          <div style=\"font-size: 32px; margin-top: 20px; opacity: 0.7\">Revealed from the grid</div>\n        </div>\n      </div>\n\n      <!-- Grid Pixelate Wipe overlay -->\n      <div\n        id=\"grid-pixelate-overlay\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          pointer-events: none;\n          z-index: 999;\n          display: grid;\n        \"\n      ></div>\n\n      <style>\n        #grid-pixelate-overlay {\n          --grid-color: black;\n        }\n\n        #grid-pixelate-overlay .grid-cell {\n          background: var(--grid-color);\n          transform: scale(0);\n          transform-origin: center center;\n        }\n      </style>\n\n      <style>\n        .demo-scene {\n          position: absolute;\n          width: 1920px;\n          height: 1080px;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        .scene-a {\n          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n        }\n\n        .scene-b {\n          background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);\n          opacity: 0;\n        }\n      </style>\n\n      <script>\n        (function () {\n          const COLS = 16;\n          const ROWS = 9;\n          const overlay = document.getElementById(\"grid-pixelate-overlay\");\n\n          overlay.style.gridTemplateColumns = `repeat(${COLS}, 1fr)`;\n          overlay.style.gridTemplateRows = `repeat(${ROWS}, 1fr)`;\n\n          for (let i = 0; i < COLS * ROWS; i++) {\n            const cell = document.createElement(\"div\");\n            cell.className = \"grid-cell\";\n            overlay.appendChild(cell);\n          }\n\n          const tl = gsap.timeline({ paused: true });\n\n          // Scene A visible for 2 seconds\n          // Grid covers screen (transition out of A)\n          tl.to(\n            \".grid-cell\",\n            {\n              scale: 1,\n              duration: 0.6,\n              stagger: { amount: 0.6, from: \"center\" },\n              ease: \"power2.inOut\",\n            },\n            2.0,\n          );\n\n          // Swap scenes at midpoint\n          tl.set(\"#scene-a\", { opacity: 0 }, 3.0);\n          tl.set(\"#scene-b\", { opacity: 1 }, 3.0);\n\n          // Grid reveals scene B\n          tl.to(\n            \".grid-cell\",\n            {\n              scale: 0,\n              duration: 0.6,\n              stagger: { amount: 0.6, from: \"edges\" },\n              ease: \"power2.inOut\",\n            },\n            3.0,\n          );\n\n          // Second transition: back to A using random pattern\n          tl.to(\n            \".grid-cell\",\n            {\n              scale: 1,\n              duration: 0.5,\n              stagger: { amount: 0.5, from: \"random\" },\n              ease: \"power2.inOut\",\n            },\n            5.5,\n          );\n\n          tl.set(\"#scene-b\", { opacity: 0 }, 6.3);\n          tl.set(\"#scene-a\", { opacity: 1 }, 6.3);\n\n          tl.to(\n            \".grid-cell\",\n            {\n              scale: 0,\n              duration: 0.5,\n              stagger: { amount: 0.5, from: \"random\" },\n              ease: \"power2.inOut\",\n            },\n            6.3,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"grid-pixelate-wipe-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/hw-arrow.json b/docs/public/catalog/components/hw-arrow.json
new file mode 100644
index 0000000000..13d2667340
--- /dev/null
+++ b/docs/public/catalog/components/hw-arrow.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-arrow.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-arrow.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      /* ---- hw-arrow ------------------------------------------------------\n         Hand-wobbled draw-on arrow, boiling. Position the wrapper, pick a\n         curve preset, call the helpers. Requires the hw-boil helpers\n         (hwOnUpdate / hwHash / hwBoil) in the host script. */\n      .hw-arrow {\n        position: absolute;\n        pointer-events: none;\n      }\n      .hw-arrow svg {\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      .hw-arrow path {\n        fill: none;\n        stroke: var(--hw-arrow-color, var(--hw-ink, #f4f2ec));\n        stroke-width: var(--hw-arrow-w, 6);\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .hw-arrow.hw-soft path {\n        filter: blur(0.6px);\n      }\n      /* self-preview scene */\n      #hw-ar-scene {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(135deg, #274060 0%, #123 100%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n        font-weight: 700;\n        font-size: 80px;\n        color: rgba(244, 242, 236, 0.92);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview. WIRING: copy the .hw-arrow CSS, the markup pattern,\n         and the hwArrowPath / hwArrowOn / hwArrowOff helpers (plus the\n         hw-boil helpers) into your host. Then:\n\n           document.querySelector(\"#hw-my-arrow path\")\n             .setAttribute(\"d\", hwArrowPath(360, 160, \"swoop\", 3));\n           hwArrowOn(tl, \"#hw-my-arrow\", 2.0);\n           hwBoil(tl, \"#hw-my-arrow\", { frameDrop: 3, seed: 3 });\n           hwArrowOff(tl, \"#hw-my-arrow\", 8.0);\n    -->\n    <div\n      id=\"hw-ar-root\"\n      data-composition-id=\"hw-arrow\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"hw-ar-scene\"><span>point at things</span></div>\n      <div\n        class=\"hw-arrow\"\n        id=\"hw-ar-demo\"\n        style=\"left: 560px; top: 320px; width: 380px; height: 180px\"\n      >\n        <svg viewBox=\"0 0 380 180\"><path id=\"hw-ar-demo-path\"></path></svg>\n      </div>\n      <div\n        id=\"hw-ar-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n\n        // ---- hw-arrow helpers (copy these too) ----\n        // Wobbled arrow path in a w x h box, tail at left, head at right.\n        // curve: \"straight\" | \"gentle\" | \"swoop\"\n        window.hwArrowPath = function (w, h, curve, seed) {\n          seed = seed || 1;\n          var bend = curve === \"swoop\" ? 0.55 : curve === \"gentle\" ? 0.28 : 0.06;\n          function wob(v, n, range) {\n            return v + window.hwHash(n, seed) * range;\n          }\n          var x0 = wob(4, 1, 3),\n            y0 = wob(h * 0.72, 2, 4),\n            x1 = wob(w - 10, 3, 4),\n            y1 = wob(h * 0.3, 4, 4);\n          var cx1 = wob(w * 0.35, 5, 10),\n            cy1 = wob(h * (0.72 + bend * 0.5), 6, 8);\n          var cx2 = wob(w * 0.7, 7, 10),\n            cy2 = wob(h * (0.3 + bend), 8, 8);\n          var ang = Math.atan2(y1 - cy2, x1 - cx2);\n          function head(da, len) {\n            var a = ang + Math.PI + da;\n            return (\n              \"M \" +\n              x1.toFixed(1) +\n              \" \" +\n              y1.toFixed(1) +\n              \" l \" +\n              (Math.cos(a) * len).toFixed(1) +\n              \" \" +\n              (Math.sin(a) * len).toFixed(1)\n            );\n          }\n          return (\n            \"M \" +\n            x0.toFixed(1) +\n            \" \" +\n            y0.toFixed(1) +\n            \" C \" +\n            cx1.toFixed(1) +\n            \" \" +\n            cy1.toFixed(1) +\n            \", \" +\n            cx2.toFixed(1) +\n            \" \" +\n            cy2.toFixed(1) +\n            \", \" +\n            x1.toFixed(1) +\n            \" \" +\n            y1.toFixed(1) +\n            \" \" +\n            head(0.5, wob(34, 9, 6)) +\n            \" \" +\n            head(-0.5, wob(34, 10, 6))\n          );\n        };\n        window.hwArrowOn = function (tl, target, at, dur) {\n          var p = document.querySelector(target + \" path\");\n          var len = p.getTotalLength();\n          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });\n          tl.to(\n            p,\n            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: \"power2.inOut\" },\n            at,\n          );\n        };\n        window.hwArrowOff = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.3, ease: \"power2.in\" }, at);\n        };\n\n        // ---- self-preview ----\n        document\n          .getElementById(\"hw-ar-demo-path\")\n          .setAttribute(\"d\", window.hwArrowPath(380, 180, \"swoop\", 7));\n        var tl = gsap.timeline({ paused: true });\n        window.hwArrowOn(tl, \"#hw-ar-demo\", 0.4);\n        window.hwBoil(tl, \"#hw-ar-demo\", { amp: 2, rot: 0.6, frameDrop: 3, seed: 7 });\n        window.hwArrowOff(tl, \"#hw-ar-demo\", 3.4);\n        tl.set(\"#hw-ar-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"hw-arrow\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/hw-boil.json b/docs/public/catalog/components/hw-boil.json
new file mode 100644
index 0000000000..7f77ed097b
--- /dev/null
+++ b/docs/public/catalog/components/hw-boil.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-boil.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-boil.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      /* Caveat is NOT auto-resolved by the renderer — bundle it. Asset\n         paths are ROOT-RELATIVE (the project root is the base URL for all\n         compositions; ../ traversal is a lint error). Registry installs\n         ship the woff2 as an asset file targeting assets/fonts/. */\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      /* ---- hw-boil -----------------------------------------------------\n         The hand-drawn \"boil\": jitter that re-poses only every N frames\n         (quake + frame-drop style). Pose is a pure function of quantized\n         timeline time through a seeded hash — fully seek-safe, renders\n         identically on every pass over the same frame.\n\n         RULES:\n         - hwBoil owns x/y/rotation of the boiled element. Entrance/exit\n           tweens go on a WRAPPER around it, never the boiled element.\n         - One timeline has ONE onUpdate — hwOnUpdate is the dispatcher\n           that lets the boil coexist with sweep scalars etc. Register\n           every onUpdate-style render through it. */\n      #hw-boil-root {\n        --hw-font-print: \"Caveat\", cursive;\n        --hw-font-script: \"Caveat\", cursive;\n        --hw-ink: #f4f2ec;\n        --hw-accent: #6d6dff;\n\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #17161a;\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n      }\n      #hw-boil-root svg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n      #hw-boil-root path {\n        fill: none;\n        stroke: var(--hw-ink);\n        stroke-width: 6;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      #hw-b-arrow {\n        stroke: var(--hw-accent);\n        stroke-width: 7;\n      }\n      .hw-b-label {\n        position: absolute;\n        font-weight: 700;\n        font-size: 84px;\n        color: var(--hw-ink);\n        white-space: nowrap;\n      }\n      .hw-b-tag {\n        position: absolute;\n        font-family: \"Inter\", ui-sans-serif, sans-serif;\n        font-weight: 500;\n        font-size: 22px;\n        letter-spacing: 0.12em;\n        color: rgba(244, 242, 236, 0.45);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview. WIRING: copy the hwOnUpdate / hwHash / hwBoil /\n         hwWobbleEllipse helpers into your host script, then:\n\n           hwBoil(tl, \"#hw-my-annotation\", { amp: 1.6, rot: 0.5, frameDrop: 3, seed: 2 });\n\n         frameDrop 3-4 = classic boil; 1 = frantic; boil: off = don't call it. -->\n    <div\n      id=\"hw-boil-root\"\n      data-composition-id=\"hw-boil\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <svg viewBox=\"0 0 1920 1080\">\n        <g id=\"hw-b-circle-g\"><path id=\"hw-b-circle\"></path></g>\n        <g id=\"hw-b-arrow-g\">\n          <path\n            id=\"hw-b-arrow\"\n            d=\"M 640 640 C 760 700, 980 720, 1130 620 M 1130 620 l -64 -6 M 1130 620 l -18 58\"\n          ></path>\n        </g>\n      </svg>\n      <div class=\"hw-b-label\" id=\"hw-b-word\" style=\"left: 1230px; top: 560px\">the boil</div>\n      <div class=\"hw-b-tag\" style=\"left: 350px; top: 782px\">FRAME DROP 3</div>\n      <div class=\"hw-b-tag\" style=\"left: 700px; top: 782px\">FRAME DROP 1</div>\n      <div class=\"hw-b-tag\" style=\"left: 1230px; top: 700px\">TEXT, AMP 1.2</div>\n      <div\n        id=\"hw-b-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ---- copy these helpers into the host script ----\n\n        // Dispatcher: a GSAP timeline has ONE onUpdate. Register every\n        // per-frame render (boils, sweep scalars) through this instead of\n        // setting eventCallback directly, and they all coexist.\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n\n        // Seeded hash -> [-1, 1]. Pure function of n — no Math.random().\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n\n        // The boil. Owns x/y/rotation of its targets — put entrance tweens\n        // on a wrapper. frameDrop = re-pose every N frames (3-4 classic).\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n\n        // Seeded hand-wobbled ellipse path (smooth quadratic chain).\n        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {\n          wobblePct = wobblePct === undefined ? 3 : wobblePct;\n          var N = 14,\n            pts = [];\n          for (var i = 0; i < N; i++) {\n            var a = (i / N) * Math.PI * 2;\n            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);\n            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);\n          }\n          var mx = (pts[0][0] + pts[N - 1][0]) / 2,\n            my = (pts[0][1] + pts[N - 1][1]) / 2;\n          var d = \"M\" + mx.toFixed(1) + \" \" + my.toFixed(1);\n          for (var j = 0; j < N; j++) {\n            var p = pts[j],\n              q = pts[(j + 1) % N];\n            d +=\n              \" Q\" +\n              p[0].toFixed(1) +\n              \" \" +\n              p[1].toFixed(1) +\n              \" \" +\n              ((p[0] + q[0]) / 2).toFixed(1) +\n              \" \" +\n              ((p[1] + q[1]) / 2).toFixed(1);\n          }\n          return d;\n        };\n\n        // ---- self-preview (not part of the snippet you copy) ----\n        var circle = document.getElementById(\"hw-b-circle\");\n        circle.setAttribute(\"d\", window.hwWobbleEllipse(460, 620, 190, 130, 4, 3.2));\n\n        var tl = gsap.timeline({ paused: true });\n\n        /* draw-on entrances (strokeDashoffset — never x/y, the boil owns those) */\n        [circle, document.getElementById(\"hw-b-arrow\")].forEach(function (p, i) {\n          var len = p.getTotalLength();\n          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });\n          tl.to(p, { strokeDashoffset: 0, duration: 0.8, ease: \"power2.inOut\" }, 0.3 + i * 0.35);\n        });\n        gsap.set(\"#hw-b-word\", { opacity: 0 });\n        tl.to(\"#hw-b-word\", { opacity: 1, duration: 0.5, ease: \"power2.out\" }, 1.1);\n\n        /* three boils with different characters, one dispatcher */\n        window.hwBoil(tl, \"#hw-b-circle-g\", { amp: 2.2, rot: 0.4, frameDrop: 3, seed: 2 });\n        window.hwBoil(tl, \"#hw-b-arrow-g\", { amp: 2.6, rot: 0.7, frameDrop: 1, seed: 5 });\n        window.hwBoil(tl, \"#hw-b-word\", { amp: 1.2, rot: 0.35, frameDrop: 3, seed: 9 });\n\n        tl.set(\"#hw-boil-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"hw-boil\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/hw-box-label.json b/docs/public/catalog/components/hw-box-label.json
new file mode 100644
index 0000000000..3b47071919
--- /dev/null
+++ b/docs/public/catalog/components/hw-box-label.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-box-label.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-box-label.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      /* ---- hw-box-label ----------------------------------------------------\n         Rounded hand-drawn box + marker label (map-label style annotations).\n         Requires the hw-boil helpers in the host. */\n      .hw-box {\n        position: absolute;\n        pointer-events: none;\n      }\n      .hw-box svg {\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      .hw-box path {\n        fill: none;\n        stroke: var(--hw-box-ink, var(--hw-ink, #f4f2ec));\n        stroke-width: var(--hw-box-w, 6);\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .hw-box .hw-bx-label {\n        position: absolute;\n        width: 100%;\n        text-align: center;\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n        font-weight: 700;\n        font-size: 52px;\n        color: var(--hw-box-ink, var(--hw-ink, #f4f2ec));\n        white-space: nowrap;\n        opacity: 0;\n        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.4);\n      }\n      /* self-preview scene */\n      #hw-bx-scene {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(140deg, #4a3560 0%, #1c1423 100%);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview. WIRING: copy the .hw-box CSS + markup pattern, the\n         hwWobbleRect / hwBoxBuild / hwBoxOn / hwBoxOff helpers, AND the\n         hw-boil helpers. Size the wrapper over your target, then:\n\n           hwBoxBuild(\"#hw-my-box\", { seed: 3, label: \"Europe\", labelPos: \"above\" });\n           hwBoxOn(tl, \"#hw-my-box\", 2.0);\n           hwBoil(tl, \"#hw-my-box\", { frameDrop: 3, seed: 3 });\n           hwBoxOff(tl, \"#hw-my-box\", 8.0);\n    -->\n    <div\n      id=\"hw-bx-root\"\n      data-composition-id=\"hw-box-label\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"hw-bx-scene\"></div>\n      <div\n        class=\"hw-box\"\n        id=\"hw-bx-demo\"\n        style=\"left: 700px; top: 420px; width: 420px; height: 230px\"\n      >\n        <svg viewBox=\"0 0 420 230\"><path id=\"hw-bx-demo-path\"></path></svg>\n        <div class=\"hw-bx-label\" id=\"hw-bx-demo-label\"></div>\n      </div>\n      <div\n        id=\"hw-bx-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n\n        // ---- hw-box helpers (copy these too) ----\n        // Wobbled rounded-rect path in a w x h box.\n        window.hwWobbleRect = function (w, h, r, seed, amp) {\n          amp = amp === undefined ? 3.5 : amp;\n          function wob(n) {\n            return window.hwHash(n, seed) * amp;\n          }\n          var d = \"M \" + (r + wob(1)) + \" \" + wob(2);\n          d += \" L \" + (w / 2 + wob(3)) + \" \" + wob(4);\n          d += \" L \" + (w - r + wob(5)) + \" \" + wob(6);\n          d += \" Q \" + (w + wob(7)) + \" \" + wob(8) + \" \" + (w + wob(9)) + \" \" + (r + wob(10));\n          d += \" L \" + (w + wob(11)) + \" \" + (h / 2 + wob(12));\n          d += \" L \" + (w + wob(13)) + \" \" + (h - r + wob(14));\n          d +=\n            \" Q \" +\n            (w + wob(15)) +\n            \" \" +\n            (h + wob(16)) +\n            \" \" +\n            (w - r + wob(17)) +\n            \" \" +\n            (h + wob(18));\n          d += \" L \" + (w / 2 + wob(19)) + \" \" + (h + wob(20));\n          d += \" L \" + (r + wob(21)) + \" \" + (h + wob(22));\n          d += \" Q \" + wob(23) + \" \" + (h + wob(24)) + \" \" + wob(25) + \" \" + (h - r + wob(26));\n          d += \" L \" + wob(27) + \" \" + (h / 2 + wob(28));\n          d += \" L \" + wob(29) + \" \" + (r + wob(30));\n          d += \" Q \" + wob(31) + \" \" + wob(32) + \" \" + (r + wob(33)) + \" \" + wob(34);\n          return d;\n        };\n        window.hwBoxBuild = function (target, opts) {\n          opts = opts || {};\n          var el = document.querySelector(target);\n          var svg = el.querySelector(\"svg\");\n          var vb = svg.getAttribute(\"viewBox\").split(\" \");\n          var W = parseFloat(vb[2]),\n            H = parseFloat(vb[3]);\n          el.querySelector(\"path\").setAttribute(\n            \"d\",\n            window.hwWobbleRect(W, H, Math.min(26, W * 0.1), opts.seed || 1),\n          );\n          var label = el.querySelector(\".hw-bx-label\");\n          label.textContent = opts.label || \"\";\n          if ((opts.labelPos || \"above\") === \"above\") {\n            label.style.top = \"-64px\";\n          } else {\n            label.style.top = \"50%\";\n            label.style.transform = \"translateY(-50%)\";\n          }\n        };\n        window.hwBoxOn = function (tl, target, at) {\n          var p = document.querySelector(target + \" path\");\n          var len = p.getTotalLength();\n          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });\n          tl.to(p, { strokeDashoffset: 0, duration: 0.75, ease: \"power2.inOut\" }, at);\n          tl.to(\n            document.querySelector(target + \" .hw-bx-label\"),\n            { opacity: 1, duration: 0.4, ease: \"power2.out\" },\n            at + 0.55,\n          );\n        };\n        window.hwBoxOff = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.35, ease: \"power2.in\" }, at);\n        };\n\n        // ---- self-preview ----\n        window.hwBoxBuild(\"#hw-bx-demo\", { seed: 3, label: \"Europe\", labelPos: \"above\" });\n        var tl = gsap.timeline({ paused: true });\n        window.hwBoxOn(tl, \"#hw-bx-demo\", 0.4);\n        window.hwBoil(tl, \"#hw-bx-demo\", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 3 });\n        window.hwBoxOff(tl, \"#hw-bx-demo\", 3.4);\n        tl.set(\"#hw-bx-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"hw-box-label\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/hw-callout-circle.json b/docs/public/catalog/components/hw-callout-circle.json
new file mode 100644
index 0000000000..9a4f6c0f31
--- /dev/null
+++ b/docs/public/catalog/components/hw-callout-circle.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-callout-circle.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-callout-circle.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      /* ---- hw-callout-circle ----------------------------------------------\n         The full callout anatomy: wobbled ellipse outline draws around a\n         target, optional scribble fill sketches in, a curved connector leads\n         to a handwritten label. Requires the hw-boil helpers in the host. */\n      .hw-callout {\n        position: absolute;\n        pointer-events: none;\n      }\n      .hw-callout svg {\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      .hw-callout path {\n        fill: none;\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      .hw-callout .hw-co-outline {\n        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));\n        stroke-width: var(--hw-co-w, 6);\n      }\n      .hw-callout .hw-co-scribble {\n        /* Warm marker accent to match hw-frame / hw-title / hw-underline; the\n           previous blue read as a default UI colour. Lighter weight and alpha\n           so the hatch sits behind the labelled subject instead of over it. */\n        stroke: var(--hw-co-accent, var(--hw-accent, #ffb020));\n        stroke-width: 3;\n        opacity: 0.42;\n      }\n      .hw-callout .hw-co-connector {\n        stroke: var(--hw-co-ink, var(--hw-ink, #f4f2ec));\n        stroke-width: 4;\n      }\n      .hw-callout .hw-co-label {\n        position: absolute;\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n        font-weight: 700;\n        font-size: 54px;\n        color: var(--hw-co-ink, var(--hw-ink, #f4f2ec));\n        white-space: nowrap;\n        opacity: 0;\n        text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);\n      }\n      /* self-preview scene */\n      #hw-co-scene {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(150deg, #35604a 0%, #14231c 100%);\n      }\n      #hw-co-target {\n        position: absolute;\n        left: 700px;\n        top: 420px;\n        width: 220px;\n        height: 150px;\n        border-radius: 18px;\n        background: rgba(244, 242, 236, 0.18);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: \"Inter\", ui-sans-serif, sans-serif;\n        font-weight: 600;\n        font-size: 30px;\n        color: rgba(244, 242, 236, 0.8);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview. WIRING: copy the .hw-callout CSS + markup pattern, the\n         hwCalloutBuild / hwCalloutOn / hwCalloutOff helpers, AND the hw-boil\n         helpers. Size the wrapper around your target, then:\n\n           hwCalloutBuild(\"#hw-my-callout\", { scribble: true, seed: 4,\n             label: \"look here!\", labelAt: \"right\" });\n           hwCalloutOn(tl, \"#hw-my-callout\", 2.0);\n           hwBoil(tl, \"#hw-my-callout\", { frameDrop: 3, seed: 4 });\n           hwCalloutOff(tl, \"#hw-my-callout\", 8.0);\n    -->\n    <div\n      id=\"hw-co-root\"\n      data-composition-id=\"hw-callout-circle\"\n      data-start=\"0\"\n      data-duration=\"5\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"hw-co-scene\"></div>\n      <div id=\"hw-co-target\">subject</div>\n      <div\n        class=\"hw-callout\"\n        id=\"hw-co-demo\"\n        style=\"left: 640px; top: 370px; width: 340px; height: 250px\"\n      >\n        <svg viewBox=\"0 0 340 250\">\n          <path class=\"hw-co-scribble\" id=\"hw-co-demo-scribble\"></path>\n          <path class=\"hw-co-outline\" id=\"hw-co-demo-outline\"></path>\n          <path class=\"hw-co-connector\" id=\"hw-co-demo-connector\"></path>\n        </svg>\n        <div class=\"hw-co-label\" id=\"hw-co-demo-label\"></div>\n      </div>\n      <div\n        id=\"hw-co-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"5\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n        window.hwWobbleEllipse = function (cx, cy, rx, ry, seed, wobblePct) {\n          wobblePct = wobblePct === undefined ? 3 : wobblePct;\n          var N = 14,\n            pts = [];\n          for (var i = 0; i < N; i++) {\n            var a = (i / N) * Math.PI * 2;\n            var wr = 1 + window.hwHash(i * 13 + 5, seed) * (wobblePct / 100);\n            pts.push([cx + Math.cos(a) * rx * wr, cy + Math.sin(a) * ry * wr]);\n          }\n          var mx = (pts[0][0] + pts[N - 1][0]) / 2,\n            my = (pts[0][1] + pts[N - 1][1]) / 2;\n          var d = \"M\" + mx.toFixed(1) + \" \" + my.toFixed(1);\n          for (var j = 0; j < N; j++) {\n            var p = pts[j],\n              q = pts[(j + 1) % N];\n            d +=\n              \" Q\" +\n              p[0].toFixed(1) +\n              \" \" +\n              p[1].toFixed(1) +\n              \" \" +\n              ((p[0] + q[0]) / 2).toFixed(1) +\n              \" \" +\n              ((p[1] + q[1]) / 2).toFixed(1);\n          }\n          return d;\n        };\n\n        // ---- hw-callout helpers (copy these too) ----\n        // Builds outline + scribble + connector + label inside the wrapper.\n        // opts: scribble (bool), seed, label, labelAt (\"right\"|\"left\"|\"below\"),\n        //       connector (bool)\n        window.hwCalloutBuild = function (target, opts) {\n          opts = opts || {};\n          var seed = opts.seed || 1;\n          var el = document.querySelector(target);\n          var svg = el.querySelector(\"svg\");\n          var vb = svg.getAttribute(\"viewBox\").split(\" \");\n          var W = parseFloat(vb[2]),\n            H = parseFloat(vb[3]);\n          var cx = W / 2,\n            cy = H / 2,\n            rx = W * 0.42,\n            ry = H * 0.36;\n\n          el.querySelector(\".hw-co-outline\").setAttribute(\n            \"d\",\n            window.hwWobbleEllipse(cx, cy, rx, ry, seed, 4),\n          );\n\n          var scr = el.querySelector(\".hw-co-scribble\");\n          if (opts.scribble === false) {\n            scr.style.display = \"none\";\n          } else {\n            /* Denser rows so the zigzag reads as a scribbled hatch. At 6 rows\n               the near-horizontal runs dominate and it renders as stacked bars. */\n            var d = \"\",\n              rows = 11;\n            for (var i = 0; i < rows; i++) {\n              var t = (i + 0.5) / rows;\n              var yy = cy - ry + t * ry * 2;\n              var half = Math.sqrt(Math.max(0.05, 1 - Math.pow((yy - cy) / ry, 2)));\n              var xw = rx * half * 0.86;\n              var xa = cx - xw + window.hwHash(i * 7 + 2, seed) * 8;\n              var xb = cx + xw + window.hwHash(i * 7 + 3, seed) * 8;\n              d += (i === 0 ? \"M \" : \" L \") + (i % 2 ? xa : xb).toFixed(1) + \" \" + yy.toFixed(1);\n              d +=\n                \" L \" +\n                (i % 2 ? xb : xa).toFixed(1) +\n                \" \" +\n                (yy + window.hwHash(i * 7 + 4, seed) * 4).toFixed(1);\n            }\n            scr.setAttribute(\"d\", d);\n          }\n\n          var conn = el.querySelector(\".hw-co-connector\");\n          var label = el.querySelector(\".hw-co-label\");\n          if (opts.connector === false) {\n            conn.style.display = \"none\";\n          } else {\n            var at = opts.labelAt || \"right\";\n            var sx = at === \"left\" ? cx - rx : at === \"below\" ? cx : cx + rx;\n            var sy = at === \"below\" ? cy + ry : cy + ry * 0.35;\n            var ex = at === \"left\" ? sx - 70 : at === \"below\" ? sx + 40 : sx + 70;\n            var ey = sy + 55;\n            conn.setAttribute(\n              \"d\",\n              \"M \" +\n                sx.toFixed(1) +\n                \" \" +\n                sy.toFixed(1) +\n                \" Q \" +\n                ((sx + ex) / 2 + window.hwHash(21, seed) * 14).toFixed(1) +\n                \" \" +\n                (sy + 46).toFixed(1) +\n                \" \" +\n                ex.toFixed(1) +\n                \" \" +\n                ey.toFixed(1),\n            );\n            label.style.left = (at === \"left\" ? ex - 180 : ex + 12) + \"px\";\n            label.style.top = ey - 24 + \"px\";\n          }\n          label.textContent = opts.label || \"\";\n        };\n        // Draw sequence: outline -> scribble -> connector -> label pop.\n        window.hwCalloutOn = function (tl, target, at) {\n          var el = document.querySelector(target);\n          var t = at;\n          [\"outline\", \"scribble\", \"connector\"].forEach(function (k, idx) {\n            var p = el.querySelector(\".hw-co-\" + k);\n            if (!p || p.style.display === \"none\") return;\n            var len = p.getTotalLength();\n            gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });\n            var dur = k === \"scribble\" ? 0.55 : k === \"connector\" ? 0.35 : 0.7;\n            tl.to(p, { strokeDashoffset: 0, duration: dur, ease: \"power2.inOut\" }, t);\n            t += dur * 0.85;\n          });\n          var label = el.querySelector(\".hw-co-label\");\n          gsap.set(label, { scale: 0.8, transformOrigin: \"0% 50%\" });\n          tl.to(label, { opacity: 1, scale: 1, duration: 0.4, ease: \"back.out(1.6)\" }, t);\n        };\n        window.hwCalloutOff = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.35, ease: \"power2.in\" }, at);\n        };\n\n        // ---- self-preview ----\n        window.hwCalloutBuild(\"#hw-co-demo\", {\n          scribble: true,\n          seed: 4,\n          label: \"look here!\",\n          labelAt: \"right\",\n        });\n        var tl = gsap.timeline({ paused: true });\n        window.hwCalloutOn(tl, \"#hw-co-demo\", 0.4);\n        window.hwBoil(tl, \"#hw-co-demo\", { amp: 1.8, rot: 0.4, frameDrop: 3, seed: 4 });\n        window.hwCalloutOff(tl, \"#hw-co-demo\", 4.3);\n        tl.set(\"#hw-co-root\", { visibility: \"hidden\" }, 4.98);\n        window.__timelines[\"hw-callout-circle\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/hw-underline.json b/docs/public/catalog/components/hw-underline.json
new file mode 100644
index 0000000000..ef66209517
--- /dev/null
+++ b/docs/public/catalog/components/hw-underline.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to hw-underline.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists hw-underline.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      @font-face {\n        font-family: \"Caveat\";\n        src: url(\"/public/catalog/assets/891951df5e8b5b0f.woff2\") format(\"woff2\");\n        font-weight: 700;\n        font-display: block;\n      }\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #17161a;\n        overflow: hidden;\n      }\n      /* ---- hw-underline ------------------------------------------------\n         Squiggle underline / strikethrough / bracket marks that draw on.\n         Size the wrapper over the text they annotate. Requires the hw-boil\n         helpers in the host. */\n      .hw-mark {\n        position: absolute;\n        pointer-events: none;\n      }\n      .hw-mark svg {\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      .hw-mark path {\n        fill: none;\n        stroke: var(--hw-mark-color, var(--hw-accent-warm, #ffb020));\n        stroke-width: var(--hw-mark-w, 7);\n        stroke-linecap: round;\n        stroke-linejoin: round;\n      }\n      /* self-preview scene */\n      #hw-un-scene {\n        position: absolute;\n        inset: 0;\n        background: #17161a;\n        font-family: var(--hw-font-print, \"Caveat\", cursive);\n        font-weight: 700;\n        font-size: 84px;\n        color: #f4f2ec;\n      }\n      #hw-un-scene div {\n        position: absolute;\n        left: 480px;\n        white-space: nowrap;\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview. WIRING: copy the .hw-mark CSS + markup pattern, the\n         hwMarkPath / hwMarkOn / hwMarkOff helpers, AND the hw-boil helpers.\n         Then:\n\n           document.querySelector(\"#hw-my-mark path\")\n             .setAttribute(\"d\", hwMarkPath(420, 34, \"underline\", 4));\n           hwMarkOn(tl, \"#hw-my-mark\", 2.0);\n           hwBoil(tl, \"#hw-my-mark\", { frameDrop: 3, seed: 4 });\n    -->\n    <div\n      id=\"hw-un-root\"\n      data-composition-id=\"hw-underline\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"hw-un-scene\">\n        <div style=\"top: 260px\">underline the point</div>\n        <div style=\"top: 460px\">cross this out</div>\n        <div style=\"top: 660px\">bracket the aside</div>\n      </div>\n      <div\n        class=\"hw-mark\"\n        id=\"hw-un-m1\"\n        style=\"left: 470px; top: 350px; width: 620px; height: 34px\"\n      >\n        <svg viewBox=\"0 0 620 34\"><path></path></svg>\n      </div>\n      <div\n        class=\"hw-mark\"\n        id=\"hw-un-m2\"\n        style=\"left: 470px; top: 500px; width: 480px; height: 34px\"\n      >\n        <svg viewBox=\"0 0 480 34\"><path></path></svg>\n      </div>\n      <div\n        class=\"hw-mark\"\n        id=\"hw-un-m3\"\n        style=\"left: 440px; top: 650px; width: 40px; height: 110px\"\n      >\n        <svg viewBox=\"0 0 40 110\"><path></path></svg>\n      </div>\n      <div\n        id=\"hw-un-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        /* ---- hw-boil helpers (shared family runtime — copy once per host) ---- */\n        window.hwOnUpdate = function (tl, fn) {\n          if (!tl.__hwRenders) {\n            tl.__hwRenders = [];\n            tl.eventCallback(\"onUpdate\", function () {\n              for (var i = 0; i < tl.__hwRenders.length; i++) tl.__hwRenders[i]();\n            });\n          }\n          tl.__hwRenders.push(fn);\n          fn();\n        };\n        window.hwHash = function (n, seed) {\n          var x = Math.sin(n * 127.1 + (seed || 1) * 311.7) * 43758.5453;\n          return (x - Math.floor(x)) * 2 - 1;\n        };\n        window.hwBoil = function (tl, target, opts) {\n          opts = opts || {};\n          var amp = opts.amp !== undefined ? opts.amp : 1.6;\n          var rot = opts.rot !== undefined ? opts.rot : 0.5;\n          var fps = opts.fps || 30;\n          var drop = opts.frameDrop || 3;\n          var seed = opts.seed || 1;\n          var els = gsap.utils.toArray(target);\n          window.hwOnUpdate(tl, function () {\n            var step = Math.floor((tl.time() * fps) / drop);\n            for (var i = 0; i < els.length; i++) {\n              gsap.set(els[i], {\n                x: window.hwHash(step * 3 + i * 97, seed) * amp,\n                y: window.hwHash(step * 3 + 1 + i * 97, seed) * amp,\n                rotation: (opts.baseRot || 0) + window.hwHash(step * 3 + 2 + i * 97, seed) * rot,\n              });\n            }\n          });\n        };\n\n        // ---- hw-mark helpers (copy these too) ----\n        // style: \"underline\" (squiggle) | \"strike\" (double pass) | \"bracket\"\n        window.hwMarkPath = function (w, h, style, seed) {\n          seed = seed || 1;\n          function wob(n, range) {\n            return window.hwHash(n, seed) * (range === undefined ? 5 : range);\n          }\n          var mid = h / 2;\n          if (style === \"bracket\") {\n            return (\n              \"M \" +\n              (w * 0.9 + wob(1, 3)) +\n              \" \" +\n              (2 + wob(2, 3)) +\n              \" Q \" +\n              wob(3, 4) +\n              \" \" +\n              (2 + wob(4)) +\n              \" \" +\n              (4 + wob(5, 3)) +\n              \" \" +\n              (h * 0.5 + wob(6)) +\n              \" Q \" +\n              wob(7, 4) +\n              \" \" +\n              (h - 2 + wob(8)) +\n              \" \" +\n              (w * 0.9 + wob(9, 3)) +\n              \" \" +\n              (h - 2 + wob(10, 3))\n            );\n          }\n          if (style === \"strike\") {\n            return (\n              \"M \" +\n              (2 + wob(1, 3)) +\n              \" \" +\n              (mid + wob(2)) +\n              \" L \" +\n              (w - 4 + wob(3, 3)) +\n              \" \" +\n              (mid - 3 + wob(4)) +\n              \" M \" +\n              (w - 10 + wob(5, 4)) +\n              \" \" +\n              (mid + 7 + wob(6)) +\n              \" L \" +\n              (8 + wob(7, 4)) +\n              \" \" +\n              (mid + 3 + wob(8))\n            );\n          }\n          /* underline squiggle */\n          var segs = Math.max(5, Math.round(w / 95));\n          var d = \"M 2 \" + (mid + wob(0, 4));\n          for (var i = 1; i <= segs; i++) {\n            var x = (w / segs) * i;\n            d +=\n              \" Q \" +\n              (x - w / segs / 2 + wob(i * 4 + 1, 9)) +\n              \" \" +\n              (mid + (i % 2 ? -1 : 1) * (9 + wob(i * 4 + 2, 4))) +\n              \" \" +\n              x.toFixed(1) +\n              \" \" +\n              (mid + wob(i * 4 + 3, 4));\n          }\n          return d;\n        };\n        window.hwMarkOn = function (tl, target, at, dur) {\n          var p = document.querySelector(target + \" path\");\n          var len = p.getTotalLength();\n          gsap.set(p, { strokeDasharray: len, strokeDashoffset: len });\n          tl.to(\n            p,\n            { strokeDashoffset: 0, duration: dur === undefined ? 0.55 : dur, ease: \"power2.inOut\" },\n            at,\n          );\n        };\n        window.hwMarkOff = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.3, ease: \"power2.in\" }, at);\n        };\n\n        // ---- self-preview ----\n        document\n          .querySelector(\"#hw-un-m1 path\")\n          .setAttribute(\"d\", window.hwMarkPath(620, 34, \"underline\", 4));\n        document\n          .querySelector(\"#hw-un-m2 path\")\n          .setAttribute(\"d\", window.hwMarkPath(480, 34, \"strike\", 6));\n        document\n          .querySelector(\"#hw-un-m3 path\")\n          .setAttribute(\"d\", window.hwMarkPath(40, 110, \"bracket\", 8));\n        var tl = gsap.timeline({ paused: true });\n        window.hwMarkOn(tl, \"#hw-un-m1\", 0.4);\n        window.hwMarkOn(tl, \"#hw-un-m2\", 1.0);\n        window.hwMarkOn(tl, \"#hw-un-m3\", 1.6);\n        window.hwBoil(tl, [\".hw-mark\"], { amp: 1.5, rot: 0.4, frameDrop: 3, seed: 5 });\n        tl.to([\".hw-mark\"], { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 3.5);\n        tl.set(\"#hw-un-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"hw-underline\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/mk-emphasis-type.json b/docs/public/catalog/components/mk-emphasis-type.json
new file mode 100644
index 0000000000..36f06e4bf9
--- /dev/null
+++ b/docs/public/catalog/components/mk-emphasis-type.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to mk-emphasis-type.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists mk-emphasis-type.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #f2f4f7;\n        overflow: hidden;\n      }\n      /* ---- mk-emphasis-type ------------------------------------------------\n         Oversized low-contrast background word sliding slowly behind the\n         subject (the promo's \"EMPHASIS\" texture type). Decorative only —\n         keep it behind real content and mark it aria-hidden. */\n      .mk-emphasis {\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-emph-color: rgba(29, 29, 31, 0.07); /* dark scheme: rgba(245,245,247,0.08) */\n\n        position: absolute;\n        font-family: var(--mk-font);\n        font-weight: 600;\n        font-size: 260px;\n        letter-spacing: -0.02em;\n        line-height: 1;\n        white-space: nowrap;\n        text-transform: uppercase;\n        color: var(--mk-emph-color);\n        pointer-events: none;\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview wrapper. WIRING: copy the .mk-emphasis CSS, the markup\n         below (keep aria-hidden + data-layout-allow-overflow — the word is\n         decorative and usually wider than the canvas), and the helpers. -->\n    <div\n      id=\"mk-emph-root\"\n      data-composition-id=\"mk-emphasis-type\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div\n        class=\"mk-emphasis\"\n        id=\"mk-emph-demo\"\n        aria-hidden=\"true\"\n        data-layout-allow-overflow\n        style=\"top: 400px; left: -40px\"\n      >\n        Emphasis\n      </div>\n      <div\n        id=\"mk-emph-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ---- copy these helpers into the host script, then:\n        //   mkEmphasisIn(tl, \"#mk-my-word\", 1.0, { drift: -120, hold: 6 });\n        //   mkEmphasisOut(tl, \"#mk-my-word\", 7.5);\n        window.mkEmphasisIn = function (tl, target, at, opts) {\n          opts = opts || {};\n          var drift = opts.drift === undefined ? -100 : opts.drift;\n          var hold = opts.hold === undefined ? 5 : opts.hold;\n          gsap.set(target, { opacity: 0, x: 40 });\n          tl.to(target, { opacity: 1, duration: 1.0, ease: \"power2.out\" }, at);\n          tl.to(target, { x: 40 + drift, duration: hold, ease: \"sine.inOut\" }, at);\n        };\n        window.mkEmphasisOut = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.5, ease: \"power2.in\" }, at);\n        };\n\n        // Self-preview timeline (not part of the snippet you copy).\n        var tl = gsap.timeline({ paused: true });\n        window.mkEmphasisIn(tl, \"#mk-emph-demo\", 0.3, { drift: -110, hold: 3.2 });\n        window.mkEmphasisOut(tl, \"#mk-emph-demo\", 3.4);\n        tl.set(\"#mk-emph-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"mk-emphasis-type\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/mk-usage-arc.json b/docs/public/catalog/components/mk-usage-arc.json
new file mode 100644
index 0000000000..f10f255750
--- /dev/null
+++ b/docs/public/catalog/components/mk-usage-arc.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to mk-usage-arc.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists mk-usage-arc.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #f2f4f7;\n        overflow: hidden;\n      }\n      /* ---- mk-usage-arc ----------------------------------------------------\n         Hairline circular gauge: draw-on arc + centered value + tiny label.\n         The promo's \"Usage\" arc. Recolor via --mk-arc-color. */\n      .mk-arc {\n        --mk-font: \"Inter\", -apple-system, sans-serif;\n        --mk-ink: #1d1d1f;\n        --mk-ink-dim: #6e6e73;\n        --mk-accent: #0071e3;\n        --mk-arc-color: var(--mk-accent);\n        --mk-hairline: 3px;\n\n        position: absolute;\n        width: 220px;\n        height: 220px;\n        pointer-events: none;\n      }\n      .mk-arc svg {\n        position: absolute;\n        inset: 0;\n        width: 100%;\n        height: 100%;\n      }\n      .mk-arc-track {\n        fill: none;\n        stroke: rgba(29, 29, 31, 0.1);\n        stroke-width: var(--mk-hairline);\n      }\n      .mk-arc-fill {\n        fill: none;\n        stroke: var(--mk-arc-color);\n        stroke-width: var(--mk-hairline);\n        stroke-linecap: round;\n      }\n      .mk-arc-center {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 4px;\n        font-family: var(--mk-font);\n      }\n      .mk-arc-num {\n        font-weight: 600;\n        font-size: 46px;\n        letter-spacing: -0.02em;\n        color: var(--mk-ink);\n        font-variant-numeric: tabular-nums;\n      }\n      .mk-arc-label {\n        font-weight: 500;\n        font-size: 20px;\n        color: var(--mk-ink);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview wrapper. WIRING: copy the .mk-arc CSS, the markup below,\n         and the helpers into your host. r=92 with 220px box; the helper reads\n         the circle's radius, so resizing the box + r just works. -->\n    <div\n      id=\"mk-arc-root\"\n      data-composition-id=\"mk-usage-arc\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div class=\"mk-arc\" id=\"mk-arc-demo\" style=\"top: 430px; left: 850px\">\n        <svg viewBox=\"0 0 220 220\">\n          <circle class=\"mk-arc-track\" cx=\"110\" cy=\"110\" r=\"92\"></circle>\n          <circle\n            class=\"mk-arc-fill\"\n            cx=\"110\"\n            cy=\"110\"\n            r=\"92\"\n            transform=\"rotate(-90 110 110)\"\n          ></circle>\n        </svg>\n        <div class=\"mk-arc-center\">\n          <span class=\"mk-arc-num\">0%</span>\n          <span class=\"mk-arc-label\">Usage</span>\n        </div>\n      </div>\n      <div\n        id=\"mk-arc-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ---- copy these helpers into the host script, then:\n        //   mkArcIn(tl, \"#mk-my-arc\", 1.0, 0.76);  // draw to 76%, count the numeral\n        //   mkArcOut(tl, \"#mk-my-arc\", 8.5);\n        window.mkArcIn = function (tl, target, at, value) {\n          var el = document.querySelector(target);\n          var fill = el.querySelector(\".mk-arc-fill\");\n          var num = el.querySelector(\".mk-arc-num\");\n          var C = 2 * Math.PI * parseFloat(fill.getAttribute(\"r\"));\n          gsap.set(el, { opacity: 0, y: 16 });\n          gsap.set(fill, { strokeDasharray: C, strokeDashoffset: C });\n          tl.to(el, { opacity: 1, y: 0, duration: 0.6, ease: \"power3.out\" }, at);\n          tl.to(\n            fill,\n            { strokeDashoffset: C * (1 - value), duration: 1.1, ease: \"power2.inOut\" },\n            at + 0.15,\n          );\n          var st = { v: 0 };\n          tl.to(\n            st,\n            {\n              v: value,\n              duration: 1.1,\n              ease: \"power2.inOut\",\n              onUpdate: function () {\n                num.textContent = Math.round(st.v * 100) + \"%\";\n              },\n            },\n            at + 0.15,\n          );\n        };\n        window.mkArcOut = function (tl, target, at) {\n          tl.to(target, { opacity: 0, y: -12, duration: 0.35, ease: \"power2.in\" }, at);\n        };\n\n        // Self-preview timeline (not part of the snippet you copy).\n        var tl = gsap.timeline({ paused: true });\n        window.mkArcIn(tl, \"#mk-arc-demo\", 0.4, 0.76);\n        window.mkArcOut(tl, \"#mk-arc-demo\", 3.4);\n        tl.set(\"#mk-arc-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"mk-usage-arc\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/morph-text.json b/docs/public/catalog/components/morph-text.json
new file mode 100644
index 0000000000..1092006953
--- /dev/null
+++ b/docs/public/catalog/components/morph-text.json
@@ -0,0 +1 @@
+{"html":"<!-- demo.html — used by scripts/generate-catalog-previews.ts to render the\n     catalog preview video. Not installed by `hyperframes add morph-text`.\n     Keep in sync with morph-text.html. -->\n<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Morph Text</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Figtree:wght@900&display=block\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #fff;\n      }\n\n      #morph-text {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n      }\n\n      /* Word list: hidden source of truth — edit <li> items in Studio. */\n      #morph-words {\n        display: none;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n      }\n\n      #morph-filter {\n        position: absolute;\n        width: 0;\n        height: 0;\n        overflow: hidden;\n        pointer-events: none;\n      }\n\n      #morph-wrapper {\n        position: absolute;\n        top: 50%;\n        left: 0;\n        transform: translateY(-50%);\n        width: 1920px;\n        height: 210px;\n        filter: drop-shadow(0 10px 44px rgba(0, 0, 0, 0.5))\n          drop-shadow(0 3px 10px rgba(0, 0, 0, 0.25));\n      }\n\n      #morph-display {\n        width: 100%;\n        height: 100%;\n        filter: none;\n      }\n\n      #morph-a,\n      #morph-b {\n        position: absolute;\n        width: 100%;\n        display: inline-block;\n        text-align: center;\n        font-size: 120pt;\n        font-weight: 900;\n        line-height: 1;\n        user-select: none;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"morph-text\"\n      data-composition-id=\"morph-text\"\n      data-timeline-locked\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"15\"\n      data-fps=\"30\"\n      data-morph-speed=\"1\"\n      data-morph-pause=\"1.5\"\n    >\n      <!--\n        Edit words here — one <li> per word or phrase.\n        data-font  : CSS font-family (e.g. \"'Figtree', sans-serif\")\n        data-color : text color hex (e.g. \"#000000\")\n        Adjust data-morph-speed (seconds per morph) and data-morph-pause (hold time) above.\n      -->\n      <ol id=\"morph-words\" aria-hidden=\"true\">\n        <li data-font=\"'Figtree', sans-serif\" data-color=\"#000000\">Do more with less.</li>\n        <li data-font=\"'Figtree', sans-serif\" data-color=\"#000000\">Built for what's next.</li>\n        <li data-font=\"'Figtree', sans-serif\" data-color=\"#000000\">Fast. Focused. Powerful.</li>\n        <li data-font=\"'Figtree', sans-serif\" data-color=\"#000000\">Your work, amplified.</li>\n        <li data-font=\"'Figtree', sans-serif\" data-color=\"#000000\">Start free today.</li>\n      </ol>\n\n      <svg id=\"morph-filter\" aria-hidden=\"true\" focusable=\"false\">\n        <defs>\n          <filter id=\"morph-threshold\">\n            <feColorMatrix\n              in=\"SourceGraphic\"\n              type=\"matrix\"\n              values=\"1 0 0 0 0\n                      0 1 0 0 0\n                      0 0 1 0 0\n                      0 0 0 255 -100\"\n            />\n          </filter>\n        </defs>\n      </svg>\n\n      <div id=\"morph-wrapper\">\n        <div id=\"morph-display\">\n          <span id=\"morph-a\"></span>\n          <span id=\"morph-b\"></span>\n        </div>\n      </div>\n    </div>\n\n    <script>\n      (function () {\n        \"use strict\";\n\n        var container = document.getElementById(\"morph-text\");\n        var display = document.getElementById(\"morph-display\");\n        var elA = document.getElementById(\"morph-a\");\n        var elB = document.getElementById(\"morph-b\");\n\n        var words = Array.from(document.querySelectorAll(\"#morph-words li\"))\n          .map(function (el) {\n            return {\n              text: el.textContent.trim(),\n              font: el.dataset.font || \"'Figtree', sans-serif\",\n              color: el.dataset.color || \"#111111\",\n            };\n          })\n          .filter(function (w) {\n            return w.text;\n          });\n\n        if (words.length < 2) {\n          words = [\n            { text: \"Morph\", font: \"'Figtree', sans-serif\", color: \"#111111\" },\n            { text: \"Text\", font: \"'Figtree', sans-serif\", color: \"#111111\" },\n          ];\n        }\n\n        var morphSpeed = parseFloat(container.dataset.morphSpeed || \"1\");\n        var morphPause = parseFloat(container.dataset.morphPause || \"1.5\");\n        var duration = parseFloat(container.dataset.duration || \"9\");\n        var stepDur = morphSpeed + morphPause;\n        var totalWordDur = words.length * stepDur;\n\n        function applyMorph(T) {\n          var t = T % totalWordDur;\n          var stepIdx = Math.floor(t / stepDur);\n          var stepT = t - stepIdx * stepDur;\n          var frac = Math.min(stepT / morphSpeed, 1);\n\n          var wA = words[stepIdx % words.length];\n          var wB = words[(stepIdx + 1) % words.length];\n\n          elA.textContent = wA.text;\n          elA.style.fontFamily = wA.font;\n          elA.style.color = wA.color;\n\n          elB.textContent = wB.text;\n          elB.style.fontFamily = wB.font;\n          elB.style.color = wB.color;\n\n          if (frac <= 0) {\n            display.style.filter = \"none\";\n            elA.style.filter = \"\";\n            elA.style.opacity = \"1\";\n            elB.style.filter = \"\";\n            elB.style.opacity = \"0\";\n          } else if (frac >= 1) {\n            display.style.filter = \"none\";\n            elA.style.filter = \"\";\n            elA.style.opacity = \"0\";\n            elB.style.filter = \"\";\n            elB.style.opacity = \"1\";\n          } else {\n            display.style.filter = \"url(#morph-threshold)\";\n            var blurB = Math.max(0, Math.min(8 / frac - 8, 100));\n            var blurA = Math.max(0, Math.min(8 / (1 - frac) - 8, 100));\n            elB.style.filter = \"blur(\" + blurB + \"px)\";\n            elB.style.opacity = frac;\n            elA.style.filter = \"blur(\" + blurA + \"px)\";\n            elA.style.opacity = 1 - frac;\n          }\n        }\n\n        if (matchMedia(\"(prefers-reduced-motion: reduce)\").matches) {\n          elA.textContent = words[0].text;\n          elA.style.fontFamily = words[0].font;\n          elA.style.color = words[0].color;\n          elA.style.opacity = \"1\";\n          display.style.filter = \"none\";\n          return;\n        }\n\n        var proxy = { t: 0 };\n        var tl = gsap.timeline({ paused: true });\n\n        tl.to(proxy, {\n          t: duration,\n          duration: duration,\n          ease: \"none\",\n          onUpdate: function () {\n            applyMorph(proxy.t);\n          },\n        });\n\n        applyMorph(0);\n        tl.seek(0);\n\n        window.__timelines = window.__timelines || {};\n        window.__timelines[\"morph-text\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/motion-blur.json b/docs/public/catalog/components/motion-blur.json
new file mode 100644
index 0000000000..c4cce7f82d
--- /dev/null
+++ b/docs/public/catalog/components/motion-blur.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Motion Blur — Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #06060a;\n      }\n\n      #demo {\n        position: relative;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        font-family: \"SF Mono\", ui-monospace, monospace;\n        background: #06060a;\n      }\n\n      .header {\n        position: absolute;\n        top: 0;\n        left: 0;\n        right: 0;\n        height: 80px;\n        display: flex;\n        align-items: flex-end;\n        padding: 0 72px 20px;\n        border-bottom: 1px solid #0f0f18;\n      }\n      .header-title {\n        font-size: 11px;\n        letter-spacing: 0.4em;\n        text-transform: uppercase;\n        color: #1e1e2a;\n      }\n      .header-sub {\n        margin-left: auto;\n        font-size: 11px;\n        letter-spacing: 0.25em;\n        text-transform: uppercase;\n        color: #14141c;\n      }\n\n      .group {\n        position: absolute;\n        left: 0;\n        right: 0;\n        height: 184px;\n      }\n\n      .group::after {\n        content: \"\";\n        position: absolute;\n        bottom: 0;\n        left: 72px;\n        right: 72px;\n        height: 1px;\n        background: #0d0d15;\n      }\n\n      .dur {\n        position: absolute;\n        left: 72px;\n        top: 0;\n        width: 90px;\n        height: 160px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n      }\n      .dur-num {\n        font-size: 28px;\n        font-weight: 700;\n        letter-spacing: -0.04em;\n        color: #fff;\n        line-height: 1;\n      }\n      .dur-unit {\n        font-size: 9px;\n        letter-spacing: 0.25em;\n        text-transform: uppercase;\n        color: #252532;\n        margin-top: 5px;\n      }\n\n      .row-hint {\n        position: absolute;\n        left: 176px;\n        width: 44px;\n        height: 72px;\n        display: flex;\n        align-items: center;\n        font-size: 8px;\n        letter-spacing: 0.2em;\n        text-transform: uppercase;\n        color: #161620;\n      }\n\n      .spd {\n        position: absolute;\n        right: 72px;\n        top: 0;\n        width: 100px;\n        height: 160px;\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: flex-end;\n      }\n      .spd-label {\n        font-size: 10px;\n        letter-spacing: 0.3em;\n        text-transform: uppercase;\n        color: #181822;\n      }\n\n      .pill {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 200px;\n        height: 72px;\n        border-radius: 36px;\n        will-change: transform, filter;\n      }\n\n      .word {\n        position: absolute;\n        left: 0;\n        top: 88px;\n        height: 72px;\n        line-height: 72px;\n        white-space: nowrap;\n        font-size: 56px;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        will-change: transform, filter;\n      }\n\n      .inner-div {\n        position: absolute;\n        left: 220px;\n        right: 200px;\n        top: 80px;\n        height: 1px;\n        background: #0a0a12;\n      }\n\n      .track-a,\n      .track-b {\n        position: absolute;\n        left: 220px;\n        right: 200px;\n        height: 1px;\n        background: #0c0c14;\n      }\n      .track-a {\n        top: 35px;\n      }\n      .track-b {\n        top: 123px;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"motion-blur-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-start=\"0\"\n      data-duration=\"4\"\n    >\n      <div class=\"header\">\n        <span class=\"header-title\">Motion Blur — Velocity Showcase</span>\n        <span class=\"header-sub\">feGaussianBlur + scaleX · blur ∝ velocity</span>\n      </div>\n\n      <div class=\"group\" style=\"top: 80px\">\n        <div class=\"dur\"><span class=\"dur-num\">3.0</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div\n          class=\"pill\"\n          id=\"s1\"\n          style=\"\n            background: linear-gradient(135deg, #60a5fa, #2563eb);\n            box-shadow: 0 0 32px rgba(96, 165, 250, 0.18);\n          \"\n        ></div>\n        <div\n          class=\"word\"\n          id=\"t1\"\n          style=\"color: #3b82f6; text-shadow: 0 0 40px rgba(96, 165, 250, 0.3)\"\n        >\n          DRIFT\n        </div>\n        <div class=\"spd\"><span class=\"spd-label\">slow</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 264px\">\n        <div class=\"dur\"><span class=\"dur-num\">1.5</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div\n          class=\"pill\"\n          id=\"s2\"\n          style=\"\n            background: linear-gradient(135deg, #34d399, #059669);\n            box-shadow: 0 0 32px rgba(52, 211, 153, 0.18);\n          \"\n        ></div>\n        <div\n          class=\"word\"\n          id=\"t2\"\n          style=\"color: #10b981; text-shadow: 0 0 40px rgba(52, 211, 153, 0.3)\"\n        >\n          GLIDE\n        </div>\n        <div class=\"spd\"><span class=\"spd-label\">medium</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 448px\">\n        <div class=\"dur\"><span class=\"dur-num\">0.7</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div\n          class=\"pill\"\n          id=\"s3\"\n          style=\"\n            background: linear-gradient(135deg, #c084fc, #7c3aed);\n            box-shadow: 0 0 32px rgba(192, 132, 252, 0.18);\n          \"\n        ></div>\n        <div\n          class=\"word\"\n          id=\"t3\"\n          style=\"color: #a855f7; text-shadow: 0 0 40px rgba(192, 132, 252, 0.3)\"\n        >\n          RUSH\n        </div>\n        <div class=\"spd\"><span class=\"spd-label\">fast</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 632px\">\n        <div class=\"dur\">\n          <span class=\"dur-num\">0.35</span><span class=\"dur-unit\">seconds</span>\n        </div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div\n          class=\"pill\"\n          id=\"s4\"\n          style=\"\n            background: linear-gradient(135deg, #fb923c, #ea580c);\n            box-shadow: 0 0 32px rgba(251, 146, 60, 0.18);\n          \"\n        ></div>\n        <div\n          class=\"word\"\n          id=\"t4\"\n          style=\"color: #f97316; text-shadow: 0 0 40px rgba(251, 146, 60, 0.3)\"\n        >\n          BLAST\n        </div>\n        <div class=\"spd\"><span class=\"spd-label\">faster</span></div>\n      </div>\n\n      <div class=\"group\" style=\"top: 816px\">\n        <div class=\"dur\"><span class=\"dur-num\">0.2</span><span class=\"dur-unit\">seconds</span></div>\n        <div class=\"row-hint\" style=\"top: 0\">shape</div>\n        <div class=\"row-hint\" style=\"top: 88px\">text</div>\n        <div class=\"track-a\"></div>\n        <div class=\"inner-div\"></div>\n        <div class=\"track-b\"></div>\n        <div\n          class=\"pill\"\n          id=\"s5\"\n          style=\"\n            background: linear-gradient(135deg, #f87171, #dc2626);\n            box-shadow: 0 0 32px rgba(248, 113, 113, 0.18);\n          \"\n        ></div>\n        <div\n          class=\"word\"\n          id=\"t5\"\n          style=\"color: #ef4444; text-shadow: 0 0 40px rgba(248, 113, 113, 0.3)\"\n        >\n          WARP\n        </div>\n        <div class=\"spd\"><span class=\"spd-label\">extreme</span></div>\n      </div>\n\n      <script>\n        (function () {\n          if (!window._hfMbUid) window._hfMbUid = 0;\n          var ns = \"http://www.w3.org/2000/svg\";\n\n          window.attachMotionBlur = function (selector, tl, opts) {\n            opts = opts || {};\n            var blurScale = opts.blurScale !== undefined ? opts.blurScale : 0.008;\n            var blurMax = opts.blurMax !== undefined ? opts.blurMax : 20;\n            var stretchScale = opts.stretchScale !== undefined ? opts.stretchScale : 0.0002;\n            var stretchMax = opts.stretchMax !== undefined ? opts.stretchMax : 0;\n            var axis = opts.axis || \"both\";\n\n            var items = Array.isArray(selector) ? selector : [selector];\n            var targets = items.reduce(function (acc, s) {\n              if (typeof s === \"string\") {\n                document.querySelectorAll(s).forEach(function (el) {\n                  acc.push(el);\n                });\n              } else if (s instanceof Element) {\n                acc.push(s);\n              }\n              return acc;\n            }, []);\n\n            var GHOST_CFG = [\n              { frac: 0.25, slope: 0.55 },\n              { frac: 0.55, slope: 0.28 },\n              { frac: 1.0, slope: 0.1 },\n            ];\n\n            var state = targets.map(function (el) {\n              var uid = \"hf-mb-\" + window._hfMbUid++;\n              var svg = document.createElementNS(ns, \"svg\");\n              svg.setAttribute(\"style\", \"position:absolute;width:0;height:0;overflow:hidden;\");\n\n              var filter = document.createElementNS(ns, \"filter\");\n              filter.id = uid;\n              filter.setAttribute(\"x\", \"-110%\");\n              filter.setAttribute(\"y\", \"-25%\");\n              filter.setAttribute(\"width\", \"260%\");\n              filter.setAttribute(\"height\", \"150%\");\n\n              var ghosts = GHOST_CFG.map(function (cfg, gi) {\n                var feOff = document.createElementNS(ns, \"feOffset\");\n                feOff.setAttribute(\"in\", \"SourceGraphic\");\n                feOff.setAttribute(\"dx\", \"0\");\n                feOff.setAttribute(\"dy\", \"0\");\n                feOff.setAttribute(\"result\", \"go\" + gi);\n\n                var feGB = document.createElementNS(ns, \"feGaussianBlur\");\n                feGB.setAttribute(\"in\", \"go\" + gi);\n                feGB.setAttribute(\"stdDeviation\", \"0 0\");\n                feGB.setAttribute(\"result\", \"gb\" + gi);\n\n                var feCT = document.createElementNS(ns, \"feComponentTransfer\");\n                feCT.setAttribute(\"in\", \"gb\" + gi);\n                feCT.setAttribute(\"result\", \"gf\" + gi);\n                var feFuncA = document.createElementNS(ns, \"feFuncA\");\n                feFuncA.setAttribute(\"type\", \"linear\");\n                feFuncA.setAttribute(\"slope\", String(cfg.slope));\n                feCT.appendChild(feFuncA);\n\n                filter.appendChild(feOff);\n                filter.appendChild(feGB);\n                filter.appendChild(feCT);\n                return { feOff: feOff, feGB: feGB, frac: cfg.frac };\n              });\n\n              var feTopBlur = document.createElementNS(ns, \"feGaussianBlur\");\n              feTopBlur.setAttribute(\"in\", \"SourceGraphic\");\n              feTopBlur.setAttribute(\"stdDeviation\", \"0 0\");\n              feTopBlur.setAttribute(\"result\", \"top\");\n              filter.appendChild(feTopBlur);\n\n              var feMerge = document.createElementNS(ns, \"feMerge\");\n              for (var mi = GHOST_CFG.length - 1; mi >= 0; mi--) {\n                var mn = document.createElementNS(ns, \"feMergeNode\");\n                mn.setAttribute(\"in\", \"gf\" + mi);\n                feMerge.appendChild(mn);\n              }\n              var mnTop = document.createElementNS(ns, \"feMergeNode\");\n              mnTop.setAttribute(\"in\", \"top\");\n              feMerge.appendChild(mnTop);\n              filter.appendChild(feMerge);\n\n              svg.appendChild(filter);\n              document.body.appendChild(svg);\n\n              return {\n                el: el,\n                ghosts: ghosts,\n                feTopBlur: feTopBlur,\n                filterId: uid,\n                prevX: parseFloat(gsap.getProperty(el, \"x\")) || 0,\n                prevY: parseFloat(gsap.getProperty(el, \"y\")) || 0,\n                prevTime: tl.time(),\n              };\n            });\n\n            var _proxy = { t: 0 };\n            tl.to(\n              _proxy,\n              {\n                t: 1,\n                duration: Math.max(tl.duration(), 0.1),\n                ease: \"none\",\n                onUpdate: function () {\n                  var time = tl.time();\n\n                  state.forEach(function (s) {\n                    var x = parseFloat(gsap.getProperty(s.el, \"x\")) || 0;\n                    var y = parseFloat(gsap.getProperty(s.el, \"y\")) || 0;\n                    var dt = time - s.prevTime;\n\n                    if (dt > 0.0005) {\n                      var vx = axis !== \"y\" ? (x - s.prevX) / dt : 0;\n                      var vy = axis !== \"x\" ? (y - s.prevY) / dt : 0;\n\n                      var bx = Math.min(Math.abs(vx) * blurScale, blurMax);\n                      var by = Math.min(Math.abs(vy) * blurScale, blurMax);\n                      var bxFinal = axis !== \"y\" ? bx : Math.max(by * 0.08, 0.4);\n                      var byFinal = axis !== \"x\" ? by : Math.max(bx * 0.08, 0.4);\n                      var active = bx > 0.3 || by > 0.3;\n\n                      if (active) {\n                        s.el.style.filter = \"url(#\" + s.filterId + \")\";\n                        s.ghosts.forEach(function (g) {\n                          var dx =\n                            axis !== \"y\" ? (vx >= 0 ? -bxFinal * g.frac : bxFinal * g.frac) : 0;\n                          var dy =\n                            axis !== \"x\" ? (vy >= 0 ? -byFinal * g.frac : byFinal * g.frac) : 0;\n                          g.feOff.setAttribute(\"dx\", dx.toFixed(2));\n                          g.feOff.setAttribute(\"dy\", dy.toFixed(2));\n                          var gbx =\n                            axis !== \"y\"\n                              ? (bxFinal * g.frac * 0.5).toFixed(2)\n                              : Math.max(byFinal * g.frac * 0.04, 0.4).toFixed(2);\n                          var gby =\n                            axis !== \"x\"\n                              ? (byFinal * g.frac * 0.5).toFixed(2)\n                              : Math.max(bxFinal * g.frac * 0.04, 0.4).toFixed(2);\n                          g.feGB.setAttribute(\"stdDeviation\", gbx + \" \" + gby);\n                        });\n                        s.feTopBlur.setAttribute(\n                          \"stdDeviation\",\n                          (bxFinal * 0.15).toFixed(2) + \" \" + (byFinal * 0.15).toFixed(2),\n                        );\n                        if (stretchMax > 0) {\n                          var sx = 1 + Math.min(Math.abs(vx) * stretchScale, stretchMax);\n                          var sy = 1 + Math.min(Math.abs(vy) * stretchScale, stretchMax);\n                          var ox = axis !== \"y\" ? (vx >= 0 ? \"100% 50%\" : \"0% 50%\") : \"50% 50%\";\n                          var oy = axis !== \"x\" ? (vy >= 0 ? \"50% 100%\" : \"50% 0%\") : \"50% 50%\";\n                          gsap.set(s.el, {\n                            scaleX: axis !== \"y\" ? sx : 1,\n                            scaleY: axis !== \"x\" ? sy : 1,\n                            transformOrigin: axis === \"x\" ? ox : axis === \"y\" ? oy : \"50% 50%\",\n                          });\n                        }\n                      } else {\n                        s.el.style.filter = \"\";\n                        s.ghosts.forEach(function (g) {\n                          g.feOff.setAttribute(\"dx\", \"0\");\n                          g.feOff.setAttribute(\"dy\", \"0\");\n                          g.feGB.setAttribute(\"stdDeviation\", \"0 0\");\n                        });\n                        s.feTopBlur.setAttribute(\"stdDeviation\", \"0 0\");\n                        if (stretchMax > 0) {\n                          gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: \"50% 50%\" });\n                        }\n                      }\n\n                      s.prevX = x;\n                      s.prevY = y;\n                      s.prevTime = time;\n                    } else if (dt < -0.0005) {\n                      s.el.style.filter = \"\";\n                      s.ghosts.forEach(function (g) {\n                        g.feOff.setAttribute(\"dx\", \"0\");\n                        g.feOff.setAttribute(\"dy\", \"0\");\n                        g.feGB.setAttribute(\"stdDeviation\", \"0 0\");\n                      });\n                      s.feTopBlur.setAttribute(\"stdDeviation\", \"0 0\");\n                      if (stretchMax > 0) {\n                        gsap.set(s.el, { scaleX: 1, scaleY: 1, transformOrigin: \"50% 50%\" });\n                      }\n                      s.prevX = x;\n                      s.prevY = y;\n                      s.prevTime = time;\n                    }\n                    // dt ≈ 0: double-fire — skip.\n                  });\n                },\n              },\n              0,\n            );\n          };\n\n          var tl = gsap.timeline({ paused: true });\n\n          gsap.set([\"#s1\", \"#s2\", \"#s3\", \"#s4\", \"#s5\", \"#t1\", \"#t2\", \"#t3\", \"#t4\", \"#t5\"], {\n            x: -400,\n          });\n\n          tl.to([\"#s1\", \"#t1\"], { x: 1640, duration: 3.0, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s2\", \"#t2\"], { x: 1640, duration: 1.5, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s3\", \"#t3\"], { x: 1640, duration: 0.7, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s4\", \"#t4\"], { x: 1640, duration: 0.35, ease: \"power3.inOut\" }, 0);\n          tl.to([\"#s5\", \"#t5\"], { x: 1640, duration: 0.2, ease: \"power3.inOut\" }, 0);\n\n          tl.set(document.body, {}, 4);\n\n          attachMotionBlur(\n            [\"#s1\", \"#s2\", \"#s3\", \"#s4\", \"#s5\", \"#t1\", \"#t2\", \"#t3\", \"#t4\", \"#t5\"],\n            tl,\n            { axis: \"x\", blurMax: 80, stretchMax: 0 },\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"motion-blur-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/parallax-unzoom.json b/docs/public/catalog/components/parallax-unzoom.json
new file mode 100644
index 0000000000..87627dc8dd
--- /dev/null
+++ b/docs/public/catalog/components/parallax-unzoom.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Parallax Unzoom — Demo</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #1a1a20;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n\n      .demo-canvas {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        overflow: hidden;\n      }\n\n      .parallax-unzoom-grid {\n        display: grid;\n        grid-template-columns: repeat(5, 360px);\n        grid-template-rows: repeat(3, 341px);\n        gap: 30px;\n      }\n\n      .parallax-unzoom-card {\n        border-radius: 22px;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 0 12px 36px rgba(20, 20, 30, 0.08);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .card-glyph {\n        font-size: 92px;\n        font-weight: 800;\n        color: rgba(255, 255, 255, 0.92);\n        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n        letter-spacing: -0.04em;\n        line-height: 1;\n      }\n\n      .pu-c0 {\n        background: linear-gradient(135deg, #3a8b6f, #1d4d3d);\n      }\n      .pu-c1 {\n        background: linear-gradient(135deg, #8b4a3a, #4a2418);\n      }\n      .pu-c2 {\n        background: linear-gradient(135deg, #c89868, #8a6038);\n      }\n      .pu-c3 {\n        background: linear-gradient(135deg, #3a6088, #1a2f4a);\n      }\n      .pu-c4 {\n        background: linear-gradient(135deg, #b03838, #6a1818);\n      }\n      .pu-c5 {\n        background: linear-gradient(135deg, #bcbcbc, #6e6e6e);\n      }\n      .pu-c6 {\n        background: linear-gradient(135deg, #8a5fa0, #4a2860);\n      }\n      .pu-c7-focus {\n        background: linear-gradient(135deg, #f5c93f, #d99a18);\n      }\n      .pu-c8 {\n        background: linear-gradient(135deg, #d8d8d8, #9a9a9a);\n      }\n      .pu-c9 {\n        background: linear-gradient(135deg, #5fa37e, #2a6a4a);\n      }\n      .pu-c10 {\n        background: linear-gradient(135deg, #d1b66a, #8a7028);\n      }\n      .pu-c11 {\n        background: linear-gradient(135deg, #4f7fc0, #1f3f80);\n      }\n      .pu-c12 {\n        background: linear-gradient(135deg, #5a3a8f, #2a1858);\n      }\n      .pu-c13 {\n        background: linear-gradient(135deg, #b85a3a, #6a2818);\n      }\n      .pu-c14 {\n        background: linear-gradient(135deg, #f0f0e8, #c8c8be);\n      }\n\n      .parallax-unzoom-card[data-pu-focus=\"true\"] {\n        grid-column: 3;\n        grid-row: 2;\n      }\n\n      .focus-label {\n        font-weight: 900;\n        font-size: 56px;\n        letter-spacing: -0.04em;\n        color: #1a1208;\n        text-align: center;\n        line-height: 1;\n        opacity: 0;\n      }\n\n      .focus-label small {\n        display: block;\n        font-size: 18px;\n        font-weight: 600;\n        letter-spacing: 0.18em;\n        margin-bottom: 14px;\n        color: rgba(26, 18, 8, 0.7);\n      }\n\n      .hero-headline {\n        position: absolute;\n        top: 80px;\n        left: 0;\n        width: 100%;\n        text-align: center;\n        font-size: 68px;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        color: #1a1a1a;\n        opacity: 1;\n      }\n\n      .parallax-unzoom-grid {\n        --pu-progress: 0;\n        --pu-focus-scale: 6;\n        --pu-sibling-push: 900px;\n        --pu-sibling-fade: 0;\n        position: relative;\n      }\n\n      .parallax-unzoom-card {\n        transform-origin: center center;\n        will-change: transform, opacity;\n        transform: translate3d(\n            calc(var(--pu-dx, 0px) * (1 - var(--pu-progress))),\n            calc(var(--pu-dy, 0px) * (1 - var(--pu-progress))),\n            0\n          )\n          scale(calc(0.7 + 0.3 * var(--pu-progress)));\n        opacity: calc(var(--pu-progress) * var(--pu-sibling-fade));\n      }\n\n      .parallax-unzoom-card[data-pu-focus=\"true\"] {\n        z-index: 10;\n        transform: translate3d(0, 0, 0)\n          scale(calc(var(--pu-focus-scale) - (var(--pu-focus-scale) - 1) * var(--pu-progress)));\n        opacity: 1;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"parallax-unzoom-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"6\"\n      data-start=\"0\"\n    >\n      <div class=\"demo-canvas\">\n        <div class=\"hero-headline\">Inspired by how people discover.</div>\n\n        <div class=\"parallax-unzoom-grid\">\n          <div class=\"parallax-unzoom-card pu-c0\" data-pu-row=\"0\" data-pu-col=\"0\">\n            <span class=\"card-glyph\">◇</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c1\" data-pu-row=\"0\" data-pu-col=\"1\">\n            <span class=\"card-glyph\">◐</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c2\" data-pu-row=\"0\" data-pu-col=\"2\">\n            <span class=\"card-glyph\">◯</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c3\" data-pu-row=\"0\" data-pu-col=\"3\">\n            <span class=\"card-glyph\">◑</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c4\" data-pu-row=\"0\" data-pu-col=\"4\">\n            <span class=\"card-glyph\">▲</span>\n          </div>\n\n          <div class=\"parallax-unzoom-card pu-c5\" data-pu-row=\"1\" data-pu-col=\"0\">\n            <span class=\"card-glyph\">✦</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c6\" data-pu-row=\"1\" data-pu-col=\"1\">\n            <span class=\"card-glyph\">❖</span>\n          </div>\n          <div\n            class=\"parallax-unzoom-card pu-c7-focus\"\n            data-pu-row=\"1\"\n            data-pu-col=\"2\"\n            data-pu-focus=\"true\"\n          >\n            <div class=\"focus-label\">\n              <small>EBAY PLAYBOOK</small>\n              DISCOVER\n            </div>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c8\" data-pu-row=\"1\" data-pu-col=\"3\">\n            <span class=\"card-glyph\">✧</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c9\" data-pu-row=\"1\" data-pu-col=\"4\">\n            <span class=\"card-glyph\">◈</span>\n          </div>\n\n          <div class=\"parallax-unzoom-card pu-c10\" data-pu-row=\"2\" data-pu-col=\"0\">\n            <span class=\"card-glyph\">▼</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c11\" data-pu-row=\"2\" data-pu-col=\"1\">\n            <span class=\"card-glyph\">◆</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c12\" data-pu-row=\"2\" data-pu-col=\"2\">\n            <span class=\"card-glyph\">●</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c13\" data-pu-row=\"2\" data-pu-col=\"3\">\n            <span class=\"card-glyph\">◭</span>\n          </div>\n          <div class=\"parallax-unzoom-card pu-c14\" data-pu-row=\"2\" data-pu-col=\"4\">\n            <span class=\"card-glyph\" style=\"color: rgba(40, 40, 40, 0.7)\">◇</span>\n          </div>\n        </div>\n      </div>\n\n      <script>\n        (function () {\n          const grids = document.querySelectorAll(\".parallax-unzoom-grid\");\n          grids.forEach((grid) => {\n            const cards = Array.from(grid.querySelectorAll(\".parallax-unzoom-card\"));\n            if (cards.length === 0) return;\n            let focal = cards.find((c) => c.dataset.puFocus === \"true\");\n            if (!focal) {\n              focal = cards[Math.floor(cards.length / 2)];\n              focal.dataset.puFocus = \"true\";\n            }\n            const focusRow = Number(focal.dataset.puRow ?? 0);\n            const focusCol = Number(focal.dataset.puCol ?? 0);\n            const push =\n              parseFloat(getComputedStyle(grid).getPropertyValue(\"--pu-sibling-push\")) || 900;\n            cards.forEach((card) => {\n              if (card === focal) return;\n              const row = Number(card.dataset.puRow ?? 0);\n              const col = Number(card.dataset.puCol ?? 0);\n              const dCol = col - focusCol;\n              const dRow = row - focusRow;\n              const mag = Math.hypot(dCol, dRow) || 1;\n              const nx = (dCol / mag) * push * mag;\n              const ny = (dRow / mag) * push * mag;\n              card.style.setProperty(\"--pu-dx\", `${nx}px`);\n              card.style.setProperty(\"--pu-dy\", `${ny}px`);\n            });\n          });\n\n          const tl = gsap.timeline({ paused: true });\n\n          tl.to(\n            \".hero-headline\",\n            {\n              opacity: 0,\n              duration: 0.5,\n              ease: \"power2.in\",\n            },\n            0.3,\n          );\n\n          tl.fromTo(\n            \".parallax-unzoom-grid\",\n            { \"--pu-progress\": 0 },\n            {\n              \"--pu-progress\": 1,\n              duration: 3.0,\n              ease: \"power2.inOut\",\n            },\n            0.5,\n          );\n\n          tl.fromTo(\n            \".parallax-unzoom-card:not([data-pu-focus='true'])\",\n            { opacity: 0 },\n            {\n              opacity: 1,\n              duration: 1.5,\n              ease: \"power2.out\",\n              stagger: { each: 0.02, from: \"center\" },\n            },\n            2.0,\n          );\n\n          tl.to(\n            \".focus-label\",\n            {\n              opacity: 1,\n              duration: 1.0,\n              ease: \"power2.out\",\n            },\n            2.5,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"parallax-unzoom-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/parallax-zoom.json b/docs/public/catalog/components/parallax-zoom.json
new file mode 100644
index 0000000000..a646250417
--- /dev/null
+++ b/docs/public/catalog/components/parallax-zoom.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Parallax Zoom — Demo</title>\n    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\" />\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin />\n    <link\n      href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800;900&display=swap\"\n      rel=\"stylesheet\"\n    />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n\n      html,\n      body {\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #1a1a20;\n        font-family: \"Inter\", system-ui, sans-serif;\n      }\n\n      .demo-canvas {\n        width: 1920px;\n        height: 1080px;\n        position: relative;\n        overflow: hidden;\n      }\n\n      .parallax-zoom-grid {\n        display: grid;\n        grid-template-columns: repeat(5, 360px);\n        grid-template-rows: repeat(3, 341px);\n        gap: 30px;\n      }\n\n      .parallax-zoom-card {\n        border-radius: 22px;\n        overflow: hidden;\n        position: relative;\n        box-shadow: 0 12px 36px rgba(20, 20, 30, 0.08);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        opacity: 0;\n      }\n\n      .card-glyph {\n        font-size: 92px;\n        font-weight: 800;\n        color: rgba(255, 255, 255, 0.92);\n        text-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);\n        letter-spacing: -0.04em;\n        line-height: 1;\n      }\n\n      .pz-c0 {\n        background: linear-gradient(135deg, #3a8b6f, #1d4d3d);\n      }\n      .pz-c1 {\n        background: linear-gradient(135deg, #8b4a3a, #4a2418);\n      }\n      .pz-c2 {\n        background: linear-gradient(135deg, #c89868, #8a6038);\n      }\n      .pz-c3 {\n        background: linear-gradient(135deg, #3a6088, #1a2f4a);\n      }\n      .pz-c4 {\n        background: linear-gradient(135deg, #b03838, #6a1818);\n      }\n      .pz-c5 {\n        background: linear-gradient(135deg, #bcbcbc, #6e6e6e);\n      }\n      .pz-c6 {\n        background: linear-gradient(135deg, #8a5fa0, #4a2860);\n      }\n      .pz-c7-focus {\n        background: linear-gradient(135deg, #f5c93f, #d99a18);\n      }\n      .pz-c8 {\n        background: linear-gradient(135deg, #d8d8d8, #9a9a9a);\n      }\n      .pz-c9 {\n        background: linear-gradient(135deg, #5fa37e, #2a6a4a);\n      }\n      .pz-c10 {\n        background: linear-gradient(135deg, #d1b66a, #8a7028);\n      }\n      .pz-c11 {\n        background: linear-gradient(135deg, #4f7fc0, #1f3f80);\n      }\n      .pz-c12 {\n        background: linear-gradient(135deg, #5a3a8f, #2a1858);\n      }\n      .pz-c13 {\n        background: linear-gradient(135deg, #b85a3a, #6a2818);\n      }\n      .pz-c14 {\n        background: linear-gradient(135deg, #f0f0e8, #c8c8be);\n      }\n\n      .parallax-zoom-card[data-pz-focus=\"true\"] {\n        grid-column: 3;\n        grid-row: 2;\n      }\n\n      .focus-label {\n        font-weight: 900;\n        font-size: 56px;\n        letter-spacing: -0.04em;\n        color: #1a1208;\n        text-align: center;\n        line-height: 1;\n      }\n\n      .focus-label small {\n        display: block;\n        font-size: 18px;\n        font-weight: 600;\n        letter-spacing: 0.18em;\n        margin-bottom: 14px;\n        color: rgba(26, 18, 8, 0.7);\n      }\n\n      .zoom-backdrop {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(135deg, #f5c93f, #d99a18);\n        opacity: 0;\n        z-index: 0;\n      }\n\n      .hero-headline {\n        position: absolute;\n        top: 80px;\n        left: 0;\n        width: 100%;\n        text-align: center;\n        font-size: 68px;\n        font-weight: 800;\n        letter-spacing: -0.03em;\n        color: #1a1a1a;\n        opacity: 0;\n        z-index: 20;\n      }\n\n      .parallax-zoom-grid {\n        --pz-progress: 0;\n        --pz-focus-scale: 6;\n        --pz-sibling-push: 900px;\n        --pz-sibling-fade: 1;\n        position: relative;\n      }\n\n      .parallax-zoom-card {\n        transform-origin: center center;\n        will-change: transform, opacity;\n        transform: translate3d(\n            calc(var(--pz-dx, 0px) * var(--pz-progress)),\n            calc(var(--pz-dy, 0px) * var(--pz-progress)),\n            0\n          )\n          scale(calc(1 - var(--pz-progress) * 0.4));\n      }\n\n      .parallax-zoom-card[data-pz-focus=\"true\"] {\n        z-index: 10;\n        transform: translate3d(0, 0, 0)\n          scale(calc(1 + var(--pz-progress) * (var(--pz-focus-scale) - 1)));\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"parallax-zoom-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"6\"\n      data-start=\"0\"\n    >\n      <div class=\"demo-canvas\">\n        <div class=\"zoom-backdrop\"></div>\n        <div class=\"hero-headline\">Inspired by how people discover.</div>\n\n        <div class=\"parallax-zoom-grid\">\n          <div class=\"parallax-zoom-card pz-c0\" data-pz-row=\"0\" data-pz-col=\"0\">\n            <span class=\"card-glyph\">◇</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c1\" data-pz-row=\"0\" data-pz-col=\"1\">\n            <span class=\"card-glyph\">◐</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c2\" data-pz-row=\"0\" data-pz-col=\"2\">\n            <span class=\"card-glyph\">◯</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c3\" data-pz-row=\"0\" data-pz-col=\"3\">\n            <span class=\"card-glyph\">◑</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c4\" data-pz-row=\"0\" data-pz-col=\"4\">\n            <span class=\"card-glyph\">▲</span>\n          </div>\n\n          <div class=\"parallax-zoom-card pz-c5\" data-pz-row=\"1\" data-pz-col=\"0\">\n            <span class=\"card-glyph\">✦</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c6\" data-pz-row=\"1\" data-pz-col=\"1\">\n            <span class=\"card-glyph\">❖</span>\n          </div>\n          <div\n            class=\"parallax-zoom-card pz-c7-focus\"\n            data-pz-row=\"1\"\n            data-pz-col=\"2\"\n            data-pz-focus=\"true\"\n          >\n            <div class=\"focus-label\">\n              <small>EBAY PLAYBOOK</small>\n              DISCOVER\n            </div>\n          </div>\n          <div class=\"parallax-zoom-card pz-c8\" data-pz-row=\"1\" data-pz-col=\"3\">\n            <span class=\"card-glyph\">✧</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c9\" data-pz-row=\"1\" data-pz-col=\"4\">\n            <span class=\"card-glyph\">◈</span>\n          </div>\n\n          <div class=\"parallax-zoom-card pz-c10\" data-pz-row=\"2\" data-pz-col=\"0\">\n            <span class=\"card-glyph\">▼</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c11\" data-pz-row=\"2\" data-pz-col=\"1\">\n            <span class=\"card-glyph\">◆</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c12\" data-pz-row=\"2\" data-pz-col=\"2\">\n            <span class=\"card-glyph\">●</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c13\" data-pz-row=\"2\" data-pz-col=\"3\">\n            <span class=\"card-glyph\">◭</span>\n          </div>\n          <div class=\"parallax-zoom-card pz-c14\" data-pz-row=\"2\" data-pz-col=\"4\">\n            <span class=\"card-glyph\" style=\"color: rgba(40, 40, 40, 0.7)\">◇</span>\n          </div>\n        </div>\n      </div>\n\n      <script>\n        (function () {\n          const grids = document.querySelectorAll(\".parallax-zoom-grid\");\n          grids.forEach((grid) => {\n            const cards = Array.from(grid.querySelectorAll(\".parallax-zoom-card\"));\n            if (cards.length === 0) return;\n            let focal = cards.find((c) => c.dataset.pzFocus === \"true\");\n            if (!focal) {\n              focal = cards[Math.floor(cards.length / 2)];\n              focal.dataset.pzFocus = \"true\";\n            }\n            const focusRow = Number(focal.dataset.pzRow ?? 0);\n            const focusCol = Number(focal.dataset.pzCol ?? 0);\n            const push =\n              parseFloat(getComputedStyle(grid).getPropertyValue(\"--pz-sibling-push\")) || 900;\n            cards.forEach((card) => {\n              if (card === focal) return;\n              const row = Number(card.dataset.pzRow ?? 0);\n              const col = Number(card.dataset.pzCol ?? 0);\n              const dCol = col - focusCol;\n              const dRow = row - focusRow;\n              const mag = Math.hypot(dCol, dRow) || 1;\n              const nx = (dCol / mag) * push * mag;\n              const ny = (dRow / mag) * push * mag;\n              card.style.setProperty(\"--pz-dx\", `${nx}px`);\n              card.style.setProperty(\"--pz-dy\", `${ny}px`);\n            });\n          });\n\n          const tl = gsap.timeline({ paused: true });\n\n          tl.to(\n            \".parallax-zoom-card\",\n            {\n              opacity: 1,\n              duration: 0.5,\n              ease: \"power2.out\",\n              stagger: { each: 0.03, from: \"center\" },\n            },\n            0,\n          );\n\n          tl.fromTo(\n            \".parallax-zoom-grid\",\n            { \"--pz-progress\": 0 },\n            {\n              \"--pz-progress\": 1,\n              duration: 3.0,\n              ease: \"power2.inOut\",\n            },\n            1.7,\n          );\n\n          tl.to(\n            \".parallax-zoom-card:not([data-pz-focus='true'])\",\n            {\n              opacity: 0,\n              duration: 1.0,\n              ease: \"power2.in\",\n            },\n            3.5,\n          );\n\n          tl.to(\n            \".focus-label\",\n            {\n              opacity: 0,\n              duration: 1.0,\n              ease: \"power2.in\",\n            },\n            2.5,\n          );\n\n          tl.to(\n            \".hero-headline\",\n            {\n              opacity: 1,\n              duration: 0.7,\n              ease: \"power2.out\",\n            },\n            4.2,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"parallax-zoom-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/shimmer-sweep.json b/docs/public/catalog/components/shimmer-sweep.json
new file mode 100644
index 0000000000..1503195a74
--- /dev/null
+++ b/docs/public/catalog/components/shimmer-sweep.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Shimmer Sweep — Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"shimmer-sweep-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"6\"\n    >\n      <div class=\"demo-canvas\">\n        <!-- Example 1: Large heading -->\n        <div class=\"shimmer-sweep-target\" style=\"--shimmer-color: rgba(255, 255, 255, 0.5)\">\n          <div\n            class=\"demo-heading\"\n            style=\"font-size: 120px; font-weight: 800; color: #ffffff; opacity: 0\"\n          >\n            AI-Powered\n          </div>\n        </div>\n\n        <!-- Example 2: Subheading -->\n        <div class=\"shimmer-sweep-target\" style=\"--shimmer-color: rgba(100, 200, 255, 0.4)\">\n          <div\n            class=\"demo-subheading\"\n            style=\"font-size: 48px; font-weight: 400; color: #888888; opacity: 0\"\n          >\n            Video generation, reimagined\n          </div>\n        </div>\n\n        <!-- Example 3: Pill badge -->\n        <div\n          class=\"shimmer-sweep-target\"\n          style=\"--shimmer-color: rgba(255, 255, 255, 0.3); --shimmer-width: 30%\"\n        >\n          <div\n            class=\"demo-pill\"\n            style=\"\n              background: linear-gradient(135deg, #1a1a2e, #2a2a4e);\n              border: 1px solid #333;\n              border-radius: 100px;\n              padding: 16px 40px;\n              font-size: 20px;\n              color: #aaa;\n              opacity: 0;\n            \"\n          >\n            Try it free →\n          </div>\n        </div>\n      </div>\n\n      <!-- Shimmer Sweep component -->\n      <style>\n        .demo-canvas {\n          width: 1920px;\n          height: 1080px;\n          background: #0a0a0f;\n          display: flex;\n          flex-direction: column;\n          justify-content: center;\n          align-items: center;\n          gap: 60px;\n          font-family: \"Inter\", sans-serif;\n        }\n\n        .shimmer-sweep-target {\n          position: relative;\n          display: inline-block;\n        }\n\n        .shimmer-sweep-target .shimmer-mask {\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          pointer-events: none;\n          background: linear-gradient(\n            var(--shimmer-angle, 120deg),\n            transparent 0%,\n            transparent calc(var(--shimmer-pos, -20%) - var(--shimmer-width, 20%) / 2),\n            var(--shimmer-color, rgba(255, 255, 255, 0.6)) var(--shimmer-pos, -20%),\n            transparent calc(var(--shimmer-pos, -20%) + var(--shimmer-width, 20%) / 2),\n            transparent 100%\n          );\n          mix-blend-mode: overlay;\n        }\n      </style>\n\n      <script>\n        (function () {\n          // Inject shimmer masks\n          document.querySelectorAll(\".shimmer-sweep-target\").forEach((el) => {\n            if (!el.querySelector(\".shimmer-mask\")) {\n              const mask = document.createElement(\"div\");\n              mask.className = \"shimmer-mask\";\n              el.appendChild(mask);\n            }\n          });\n\n          const tl = gsap.timeline({ paused: true });\n\n          // Fade in elements\n          tl.to(\".demo-heading\", { opacity: 1, duration: 0.6, ease: \"power2.out\" }, 0.3);\n          tl.to(\".demo-subheading\", { opacity: 1, duration: 0.6, ease: \"power2.out\" }, 0.6);\n          tl.to(\".demo-pill\", { opacity: 1, duration: 0.6, ease: \"power2.out\" }, 0.9);\n\n          // First shimmer sweep across all targets\n          tl.fromTo(\n            \".shimmer-sweep-target\",\n            { \"--shimmer-pos\": \"-20%\" },\n            {\n              \"--shimmer-pos\": \"120%\",\n              duration: 1.2,\n              ease: \"power2.inOut\",\n              stagger: 0.15,\n            },\n            1.5,\n          );\n\n          // Second sweep\n          tl.fromTo(\n            \".shimmer-sweep-target\",\n            { \"--shimmer-pos\": \"-20%\" },\n            {\n              \"--shimmer-pos\": \"120%\",\n              duration: 1.0,\n              ease: \"power2.inOut\",\n              stagger: 0.1,\n            },\n            3.5,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"shimmer-sweep-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/vignette.json b/docs/public/catalog/components/vignette.json
new file mode 100644
index 0000000000..e2f38b1af3
--- /dev/null
+++ b/docs/public/catalog/components/vignette.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=1920, height=1080\" />\n    <title>Vignette — Demo</title>\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      * {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      html,\n      body {\n        margin: 0;\n        width: 1920px;\n        height: 1080px;\n        overflow: hidden;\n        background: #000;\n      }\n    </style>\n  </head>\n  <body>\n    <div\n      id=\"demo\"\n      data-composition-id=\"vignette-demo\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n      data-duration=\"5\"\n    >\n      <!-- Backdrop: a layered \"cinematic still\" — a warm key light at upper-left,\n           a teal rim light at lower-right, and a soft global glow. The vignette\n           overlay reads against this so the effect is unambiguous. -->\n      <div class=\"demo-bg\">\n        <!-- Subject shapes — a stylized \"moon\" centered, with subtle haze rings\n             so the eye has something to anchor on. Without a subject the demo\n             looks like an abstract gradient and the vignette gets lost. -->\n        <div class=\"demo-haze haze-far\"></div>\n        <div class=\"demo-haze haze-near\"></div>\n        <div class=\"demo-subject\"></div>\n\n        <div class=\"demo-text\">\n          <div class=\"demo-title\">\n            <span class=\"ch\">V</span><span class=\"ch\">I</span><span class=\"ch\">G</span\n            ><span class=\"ch\">N</span><span class=\"ch\">E</span><span class=\"ch\">T</span\n            ><span class=\"ch\">T</span><span class=\"ch\">E</span>\n          </div>\n          <div class=\"demo-subtitle\">Frame the eye. Hold the moment.</div>\n        </div>\n      </div>\n\n      <!-- The vignette component -->\n      <div\n        id=\"hf-vignette\"\n        style=\"\n          position: absolute;\n          top: 0;\n          left: 0;\n          width: 100%;\n          height: 100%;\n          pointer-events: none;\n          z-index: 90;\n        \"\n      ></div>\n\n      <style>\n        .demo-bg {\n          width: 1920px;\n          height: 1080px;\n          background:\n            radial-gradient(\n              circle at 22% 28%,\n              rgba(255, 196, 130, 0.85),\n              rgba(255, 196, 130, 0) 38%\n            ),\n            radial-gradient(circle at 78% 78%, rgba(64, 175, 200, 0.55), rgba(64, 175, 200, 0) 42%),\n            radial-gradient(circle at 50% 50%, #3b2616 0%, #1a0e07 68%, #060403 100%);\n          position: relative;\n          overflow: hidden;\n          font-family: \"Inter\", \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n        }\n\n        .demo-haze {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          border-radius: 50%;\n          transform: translate(-50%, -50%) scale(1);\n          pointer-events: none;\n          opacity: 0;\n        }\n        .haze-far {\n          width: 1400px;\n          height: 1400px;\n          background: radial-gradient(\n            circle,\n            rgba(255, 220, 180, 0.18),\n            rgba(255, 220, 180, 0) 65%\n          );\n          filter: blur(40px);\n        }\n        .haze-near {\n          width: 900px;\n          height: 900px;\n          background: radial-gradient(\n            circle,\n            rgba(255, 240, 210, 0.32),\n            rgba(255, 240, 210, 0) 60%\n          );\n          filter: blur(20px);\n        }\n\n        .demo-subject {\n          position: absolute;\n          left: 50%;\n          top: 50%;\n          width: 520px;\n          height: 520px;\n          border-radius: 50%;\n          transform: translate(-50%, -50%);\n          background: radial-gradient(\n            circle at 35% 32%,\n            #fff6e0 0%,\n            #f4c47e 28%,\n            #b87a3f 62%,\n            #6b3d1c 88%,\n            #2a1607 100%\n          );\n          box-shadow:\n            inset -40px -40px 80px rgba(0, 0, 0, 0.55),\n            0 0 120px rgba(255, 180, 100, 0.35);\n          opacity: 0;\n        }\n\n        .demo-text {\n          position: absolute;\n          left: 0;\n          right: 0;\n          bottom: 12%;\n          display: flex;\n          flex-direction: column;\n          align-items: center;\n          gap: 14px;\n          pointer-events: none;\n          /* Sits above the subject in document order; below the vignette in z-index */\n          z-index: 5;\n        }\n\n        .demo-title {\n          font-size: 108px;\n          font-weight: 800;\n          letter-spacing: 0.18em;\n          color: #f6ecd0;\n          text-shadow: 0 4px 24px rgba(0, 0, 0, 0.55);\n          opacity: 0;\n        }\n        .demo-title .ch {\n          display: inline-block;\n        }\n\n        .demo-subtitle {\n          font-size: 30px;\n          font-weight: 400;\n          letter-spacing: 0.32em;\n          text-transform: uppercase;\n          color: rgba(246, 236, 208, 0.72);\n          opacity: 0;\n        }\n\n        #hf-vignette {\n          background: radial-gradient(\n            var(--vignette-shape, ellipse) at center,\n            transparent var(--vignette-size, 45%),\n            var(--vignette-color, rgba(0, 0, 0, 0.7)) var(--vignette-edge, 100%)\n          );\n        }\n      </style>\n\n      <script>\n        (function () {\n          const tl = gsap.timeline({ paused: true });\n\n          // Reveal the backdrop subject and haze first so the vignette has\n          // something to frame. Without a subject the effect reads as a flat\n          // dark gradient — uninteresting in a still preview.\n          tl.to(\".haze-far\", { opacity: 1, duration: 0.8, ease: \"power2.out\" }, 0.0);\n          tl.to(\".haze-near\", { opacity: 1, duration: 0.8, ease: \"power2.out\" }, 0.15);\n          tl.to(\".demo-subject\", { opacity: 1, scale: 1, duration: 1.0, ease: \"power3.out\" }, 0.1);\n\n          // Title + subtitle settle in. The letters settle from wider spacing to their\n          // resting spacing — the faithful smooth equivalent of a letter-spacing tween is a\n          // per-glyph x spread (transform, sub-pixel smooth), NOT a uniform scale (which\n          // would resize the glyphs instead of closing the gaps). letter-spacing holds at\n          // its CSS resting 0.18em; each glyph starts offset by the extra gap the original\n          // tween opened — (0.32em − 0.18em) × 108px ≈ 15.12px per gap — and converges to 0,\n          // centered about the word (8 chars → center at index 3.5).\n          tl.fromTo(\n            \".demo-title\",\n            { opacity: 0, y: 18 },\n            { opacity: 1, y: 0, duration: 1.0, ease: \"power3.out\" },\n            0.6,\n          );\n          tl.from(\n            \".demo-title .ch\",\n            { x: (i) => (i - 3.5) * 15.12, duration: 1.0, ease: \"power3.out\" },\n            0.6,\n          );\n          tl.to(\".demo-subtitle\", { opacity: 1, duration: 0.8, ease: \"power3.out\" }, 1.0);\n\n          // Vignette: start visibly soft (so viewers see the unframed scene),\n          // then ramp to a strong cinematic vignette and hold through the\n          // capture-time peak (~3.0s, picked to match the catalog thumbnail\n          // sampling at `Math.min(3.0, duration * 0.6)` for duration=5).\n          gsap.set(\"#hf-vignette\", {\n            \"--vignette-color\": \"rgba(0, 0, 0, 0.35)\",\n            \"--vignette-size\": \"70%\",\n            \"--vignette-edge\": \"100%\",\n          });\n          tl.to(\n            \"#hf-vignette\",\n            {\n              \"--vignette-color\": \"rgba(0, 0, 0, 0.92)\",\n              \"--vignette-size\": \"26%\",\n              duration: 1.6,\n              ease: \"power2.inOut\",\n            },\n            1.4,\n          );\n\n          // Gentle breathing for the video loop so the effect reads as alive,\n          // not static. Keeps the still-frame at peak intensity around t≈3s.\n          tl.to(\n            \"#hf-vignette\",\n            { \"--vignette-size\": \"32%\", duration: 0.9, ease: \"sine.inOut\" },\n            3.4,\n          );\n          tl.to(\n            \"#hf-vignette\",\n            { \"--vignette-size\": \"26%\", duration: 0.9, ease: \"sine.inOut\" },\n            4.3,\n          );\n\n          window.__timelines = window.__timelines || {};\n          window.__timelines[\"vignette-demo\"] = tl;\n        })();\n      </script>\n    </div>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/yt-camera-move.json b/docs/public/catalog/components/yt-camera-move.json
new file mode 100644
index 0000000000..612f629c7e
--- /dev/null
+++ b/docs/public/catalog/components/yt-camera-move.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to yt-camera-move.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists yt-camera-move.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #14161c;\n        overflow: hidden;\n      }\n      /* ---- yt-camera-move --------------------------------------------------\n         The creator-video punch-in as reusable GSAP helpers: dynamic\n         zoom + slide + 3D tilt/pan on any wrapper (a #video-wrap, a\n         sub-composition include, an image card). A talking-head recipe\n         is the default: cubic easing, ~11% zoom.\n\n         Optional: .yt-cm-defocus is an edge-blur overlay that pulses during\n         the move to sell the 3D feel — place it ABOVE the moving layer,\n         covering the same region. */\n      .yt-cm-defocus {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: 0;\n        backdrop-filter: blur(7px);\n        -webkit-backdrop-filter: blur(7px);\n        /* blur only the frame edges; center stays sharp */\n        -webkit-mask-image: radial-gradient(\n          ellipse 62% 58% at 50% 50%,\n          transparent 58%,\n          rgba(0, 0, 0, 0.85) 92%\n        );\n        mask-image: radial-gradient(\n          ellipse 62% 58% at 50% 50%,\n          transparent 58%,\n          rgba(0, 0, 0, 0.85) 92%\n        );\n      }\n      /* ---- self-preview stand-in \"footage\" (not part of the snippet) ---- */\n      #yt-cm-stage {\n        position: absolute;\n        inset: 0;\n        overflow: hidden;\n        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 55%, #7d5cff 100%);\n      }\n      /* Grid is the only cue that reveals the camera move on a flat gradient\n         plate; at 0.14/2px the zoom and slide were nearly imperceptible. */\n      #yt-cm-stage .yt-cm-grid {\n        position: absolute;\n        inset: -60px;\n        background:\n          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px),\n          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.3) 0 3px, transparent 3px 120px);\n      }\n      #yt-cm-stage .yt-cm-label {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: \"Inter\", ui-sans-serif, sans-serif;\n        font-weight: 700;\n        font-size: 120px;\n        letter-spacing: -0.02em;\n        color: rgba(255, 255, 255, 0.92);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview wrapper. WIRING: copy the .yt-cm-defocus CSS (if you want\n         the edge blur), add <div class=\"yt-cm-defocus\" id=\"yt-my-defocus\"></div>\n         as a sibling ABOVE your moving layer, and copy the helpers into your\n         host script. Then drive any wrapper:\n\n           ytCameraMove(tl, \"#video-wrap\", 5.0, { zoom: 0.11, slideY: -24 });\n           ytDefocusPulse(tl, \"#yt-my-defocus\", 5.0, 1.2);\n           ytCameraReset(tl, \"#video-wrap\", 9.0);\n    -->\n    <div\n      id=\"yt-cm-root\"\n      data-composition-id=\"yt-camera-move\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-cm-stage\">\n        <div class=\"yt-cm-grid\" data-layout-allow-overflow></div>\n        <div class=\"yt-cm-label\">FOOTAGE</div>\n      </div>\n      <div class=\"yt-cm-defocus\" id=\"yt-cm-defocus\"></div>\n      <div\n        id=\"yt-cm-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ---- copy these helpers into the host script ----\n        // Punch-in / camera move on any wrapper. A talking-head base:\n        // zoom 0.11, cubic ease. tilt/pan are degrees (rotationX/rotationY,\n        // perspective is set for you); slideX/slideY in px; roll in degrees.\n        window.ytCameraMove = function (tl, target, at, opts) {\n          opts = opts || {};\n          var dur = opts.dur === undefined ? 1.2 : opts.dur;\n          gsap.set(target, {\n            transformPerspective: 1200,\n            transformOrigin: opts.origin || \"50% 50%\",\n          });\n          tl.to(\n            target,\n            {\n              scale: 1 + (opts.zoom === undefined ? 0.11 : opts.zoom),\n              x: opts.slideX || 0,\n              y: opts.slideY || 0,\n              rotationX: opts.tilt || 0,\n              rotationY: opts.pan || 0,\n              rotation: opts.roll || 0,\n              duration: dur,\n              ease: opts.ease || \"power2.inOut\",\n            },\n            at,\n          );\n        };\n        // Return to rest (same easing family).\n        window.ytCameraReset = function (tl, target, at, opts) {\n          opts = opts || {};\n          tl.to(\n            target,\n            {\n              scale: 1,\n              x: 0,\n              y: 0,\n              rotationX: 0,\n              rotationY: 0,\n              rotation: 0,\n              duration: opts.dur === undefined ? 1.2 : opts.dur,\n              ease: opts.ease || \"power2.inOut\",\n            },\n            at,\n          );\n        };\n        // Edge-defocus pulse synced to a move (overlay fades in then out).\n        window.ytDefocusPulse = function (tl, target, at, dur) {\n          dur = dur === undefined ? 1.2 : dur;\n          tl.to(target, { opacity: 1, duration: dur * 0.45, ease: \"power2.out\" }, at);\n          tl.to(target, { opacity: 0, duration: dur * 0.55, ease: \"power2.in\" }, at + dur * 0.45);\n        };\n\n        // Self-preview timeline (not part of the snippet you copy):\n        // punch in with a slight tilt, hold, return.\n        var tl = gsap.timeline({ paused: true });\n        window.ytCameraMove(tl, \"#yt-cm-stage\", 0.4, { zoom: 0.11, slideY: -26, tilt: 3, pan: -2 });\n        window.ytDefocusPulse(tl, \"#yt-cm-defocus\", 0.4, 1.2);\n        window.ytCameraReset(tl, \"#yt-cm-stage\", 2.5);\n        window.ytDefocusPulse(tl, \"#yt-cm-defocus\", 2.5, 1.2);\n        tl.set(\"#yt-cm-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"yt-camera-move\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/yt-circle-pointer.json b/docs/public/catalog/components/yt-circle-pointer.json
new file mode 100644
index 0000000000..3b345ac5e9
--- /dev/null
+++ b/docs/public/catalog/components/yt-circle-pointer.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to yt-circle-pointer.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists yt-circle-pointer.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #14161c;\n        overflow: hidden;\n      }\n      /* ---- yt-circle-pointer -----------------------------------------------\n         Annotation tools: a hand-drawn-feel circle that draws on around a\n         target, and a countdown chip. Position instances via top/left with\n         explicit width/height. */\n      .yt-circle {\n        --yt-red: #e62e2e;\n        position: absolute;\n        pointer-events: none;\n      }\n      .yt-circle svg {\n        width: 100%;\n        height: 100%;\n        overflow: visible;\n      }\n      .yt-circle ellipse {\n        fill: none;\n        stroke: var(--yt-ptr-color, var(--yt-red));\n        stroke-width: 6;\n        stroke-linecap: round;\n        transform: rotate(-6deg);\n        transform-origin: 50% 50%;\n      }\n      .yt-count {\n        position: absolute;\n        display: inline-flex;\n        align-items: center;\n        gap: 14px;\n        padding: 16px 32px;\n        border-radius: 999px;\n        font-family: \"Inter\", ui-sans-serif, sans-serif;\n        font-weight: 700;\n        font-size: 40px;\n        background: var(--yt-count-bg, var(--yt-red));\n        color: #ffffff;\n        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);\n        pointer-events: none;\n        opacity: 0;\n      }\n      .yt-count .num {\n        font-variant-numeric: tabular-nums;\n        min-width: 1.2em;\n        text-align: center;\n      }\n      /* self-preview scene */\n      #yt-ptr-scene {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(135deg, #35c8d9 0%, #2a7fff 100%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: \"Inter\", ui-sans-serif, sans-serif;\n        font-weight: 700;\n        font-size: 60px;\n        color: rgba(255, 255, 255, 0.92);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview wrapper. WIRING: copy the .yt-circle / .yt-count CSS and\n         markup patterns, position over your target, then:\n\n           ytCircleOn(tl, \"#yt-my-circle\", 3.0);          // draws the ring\n           ytCircleOff(tl, \"#yt-my-circle\", 6.0);\n           ytCountIn(tl, \"#yt-my-count\", 2.0);\n           ytCountdown(tl, \"#yt-my-count\", 2.4, 5);       // 5 -> 0, pulsing each tick\n    -->\n    <div\n      id=\"yt-ptr-root\"\n      data-composition-id=\"yt-circle-pointer\"\n      data-start=\"0\"\n      data-duration=\"5\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-ptr-scene\"><span>the thing</span></div>\n      <div\n        class=\"yt-circle\"\n        id=\"yt-ptr-circle\"\n        style=\"left: 760px; top: 440px; width: 420px; height: 210px\"\n      >\n        <svg viewBox=\"0 0 420 210\"><ellipse cx=\"210\" cy=\"105\" rx=\"196\" ry=\"88\"></ellipse></svg>\n      </div>\n      <div class=\"yt-count\" id=\"yt-ptr-count\" style=\"right: 140px; top: 110px\">\n        <span class=\"num\">5</span><span>sec</span>\n      </div>\n      <div\n        id=\"yt-ptr-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"5\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ---- copy these helpers into the host script ----\n        window.ytCircleOn = function (tl, target, at, dur) {\n          var el = document.querySelector(target + \" ellipse\");\n          var len = el.getTotalLength();\n          gsap.set(el, { strokeDasharray: len, strokeDashoffset: len });\n          tl.to(\n            el,\n            { strokeDashoffset: 0, duration: dur === undefined ? 0.7 : dur, ease: \"power2.inOut\" },\n            at,\n          );\n        };\n        window.ytCircleOff = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.35, ease: \"power2.in\" }, at);\n        };\n        window.ytCountIn = function (tl, target, at) {\n          gsap.set(target, { y: -18, scale: 0.9 });\n          tl.to(target, { opacity: 1, y: 0, scale: 1, duration: 0.45, ease: \"back.out(1.5)\" }, at);\n        };\n        window.ytCountdown = function (tl, target, at, from) {\n          var num = document.querySelector(target + \" .num\");\n          var st = { v: from };\n          tl.to(\n            st,\n            {\n              v: 0,\n              duration: from,\n              ease: \"none\",\n              onUpdate: function () {\n                num.textContent = String(Math.ceil(st.v));\n              },\n            },\n            at,\n          );\n          for (var i = 1; i <= from; i++) {\n            tl.to(target, { scale: 1.07, duration: 0.09, ease: \"sine.out\" }, at + i - 0.09);\n            tl.to(target, { scale: 1, duration: 0.14, ease: \"sine.in\" }, at + i);\n          }\n        };\n\n        // Self-preview timeline.\n        var tl = gsap.timeline({ paused: true });\n        window.ytCountIn(tl, \"#yt-ptr-count\", 0.3);\n        window.ytCountdown(tl, \"#yt-ptr-count\", 0.7, 3);\n        window.ytCircleOn(tl, \"#yt-ptr-circle\", 1.0);\n        window.ytCircleOff(tl, \"#yt-ptr-circle\", 4.2);\n        tl.to(\"#yt-ptr-count\", { opacity: 0, duration: 0.3, ease: \"power2.in\" }, 4.3);\n        tl.set(\"#yt-ptr-root\", { visibility: \"hidden\" }, 4.98);\n        window.__timelines[\"yt-circle-pointer\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/yt-feather-highlight.json b/docs/public/catalog/components/yt-feather-highlight.json
new file mode 100644
index 0000000000..0b848fd1b3
--- /dev/null
+++ b/docs/public/catalog/components/yt-feather-highlight.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to yt-feather-highlight.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists yt-feather-highlight.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #14161c;\n        overflow: hidden;\n      }\n      /* ---- yt-feather-highlight --------------------------------------------\n         Spotlight part of the frame: a dim layer with a feathered ellipse\n         hole. The hole's position/size are CSS variables, so the helpers\n         tween them directly (GSAP animates CSS vars). */\n      .yt-hl {\n        --yt-hl-x: 50%;\n        --yt-hl-y: 50%;\n        --yt-hl-rx: 22%;\n        --yt-hl-ry: 26%;\n        --yt-hl-dim: 0.55;\n\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: 0;\n        background: rgba(6, 8, 12, var(--yt-hl-dim));\n        -webkit-mask-image: radial-gradient(\n          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),\n          transparent 0%,\n          transparent 52%,\n          black 88%\n        );\n        mask-image: radial-gradient(\n          ellipse var(--yt-hl-rx) var(--yt-hl-ry) at var(--yt-hl-x) var(--yt-hl-y),\n          transparent 0%,\n          transparent 52%,\n          black 88%\n        );\n      }\n      /* self-preview stand-in scene (not part of the snippet) */\n      #yt-hl-scene {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(135deg, #2a7fff 0%, #7d5cff 100%);\n        display: flex;\n        align-items: center;\n        justify-content: space-around;\n        font-family: \"Inter\", ui-sans-serif, sans-serif;\n        font-weight: 700;\n        font-size: 64px;\n        color: rgba(255, 255, 255, 0.92);\n      }\n      #yt-hl-scene .box {\n        width: 420px;\n        height: 300px;\n        border-radius: 24px;\n        background: rgba(255, 255, 255, 0.16);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview wrapper. WIRING: copy the .yt-hl CSS and drop\n         <div class=\"yt-hl\" id=\"yt-my-hl\"></div> ABOVE the content to spotlight\n         (same region). Then:\n\n           ytHighlightIn(tl, \"#yt-my-hl\", 3.0, { x: \"28%\", y: \"50%\", rx: \"20%\", ry: \"30%\" });\n           ytHighlightTo(tl, \"#yt-my-hl\", 5.0, { x: \"72%\" }, 0.8);   // glide to the next target\n           ytHighlightOut(tl, \"#yt-my-hl\", 8.0);\n    -->\n    <div\n      id=\"yt-hl-root\"\n      data-composition-id=\"yt-feather-highlight\"\n      data-start=\"0\"\n      data-duration=\"5\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-hl-scene\">\n        <div class=\"box\">A</div>\n        <div class=\"box\">B</div>\n      </div>\n      <div class=\"yt-hl\" id=\"yt-hl-demo\"></div>\n      <div\n        id=\"yt-hl-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"5\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ---- copy these helpers into the host script ----\n        window.ytHighlightIn = function (tl, target, at, opts) {\n          opts = opts || {};\n          var vars = { opacity: 1, duration: 0.5, ease: \"power2.out\" };\n          if (opts.x !== undefined) vars[\"--yt-hl-x\"] = opts.x;\n          if (opts.y !== undefined) vars[\"--yt-hl-y\"] = opts.y;\n          if (opts.rx !== undefined) vars[\"--yt-hl-rx\"] = opts.rx;\n          if (opts.ry !== undefined) vars[\"--yt-hl-ry\"] = opts.ry;\n          gsap.set(target, {\n            \"--yt-hl-x\": opts.x !== undefined ? opts.x : \"50%\",\n            \"--yt-hl-y\": opts.y !== undefined ? opts.y : \"50%\",\n            \"--yt-hl-rx\": opts.rx !== undefined ? opts.rx : \"22%\",\n            \"--yt-hl-ry\": opts.ry !== undefined ? opts.ry : \"26%\",\n          });\n          tl.to(target, { opacity: 1, duration: 0.5, ease: \"power2.out\" }, at);\n        };\n        window.ytHighlightTo = function (tl, target, at, opts, dur) {\n          opts = opts || {};\n          var vars = { duration: dur === undefined ? 0.8 : dur, ease: \"power2.inOut\" };\n          if (opts.x !== undefined) vars[\"--yt-hl-x\"] = opts.x;\n          if (opts.y !== undefined) vars[\"--yt-hl-y\"] = opts.y;\n          if (opts.rx !== undefined) vars[\"--yt-hl-rx\"] = opts.rx;\n          if (opts.ry !== undefined) vars[\"--yt-hl-ry\"] = opts.ry;\n          tl.to(target, vars, at);\n        };\n        window.ytHighlightOut = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.4, ease: \"power2.in\" }, at);\n        };\n\n        // Self-preview timeline: spotlight box A, glide to box B, release.\n        var tl = gsap.timeline({ paused: true });\n        window.ytHighlightIn(tl, \"#yt-hl-demo\", 0.5, { x: \"26%\", y: \"50%\", rx: \"17%\", ry: \"24%\" });\n        window.ytHighlightTo(tl, \"#yt-hl-demo\", 2.2, { x: \"74%\" }, 0.9);\n        window.ytHighlightOut(tl, \"#yt-hl-demo\", 4.2);\n        tl.set(\"#yt-hl-root\", { visibility: \"hidden\" }, 4.98);\n        window.__timelines[\"yt-feather-highlight\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/docs/public/catalog/components/yt-screen-warp.json b/docs/public/catalog/components/yt-screen-warp.json
new file mode 100644
index 0000000000..c514520b15
--- /dev/null
+++ b/docs/public/catalog/components/yt-screen-warp.json
@@ -0,0 +1 @@
+{"html":"<!doctype html>\n<!-- Demo plate for the catalog preview. Identical to yt-screen-warp.html except the\n     root background, which is opaque here so the transparent overlay reads.\n     Not installed by `hyperframes add` - registry-item.json lists yt-screen-warp.html only. -->\n<html lang=\"en\">\n  <head>\n    <meta charset=\"utf-8\" />\n    <script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n    <style>\n      *,\n      *::before,\n      *::after {\n        margin: 0;\n        padding: 0;\n        box-sizing: border-box;\n      }\n      body {\n        background: #14161c;\n        overflow: hidden;\n      }\n      /* ---- yt-screen-warp ---------------------------------------------------\n         Make footage read as a physical display: add .yt-screen-warp3d to the\n         media WRAPPER (subtle perspective), and place .yt-screen-fx overlay\n         inside it (pixel grid + scanlines + vignette + sheen). */\n      .yt-screen-warp3d {\n        transform: perspective(1400px) rotateY(-3.5deg) rotateX(1.6deg);\n      }\n      .yt-screen-fx {\n        position: absolute;\n        inset: 0;\n        pointer-events: none;\n        opacity: 0;\n        background:\n          /* sheen */\n          linear-gradient(115deg, rgba(255, 255, 255, 0.09) 0%, transparent 30%),\n          /* scanlines */\n          repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.1) 0 1px, transparent 1px 3px),\n          /* pixel grid */\n          repeating-linear-gradient(90deg, rgba(0, 0, 0, 0.06) 0 1px, transparent 1px 4px);\n        box-shadow:\n          inset 0 0 90px rgba(0, 0, 0, 0.4),\n          inset 0 0 8px rgba(0, 0, 0, 0.5);\n      }\n      /* self-preview stand-in */\n      #yt-sw-wrap {\n        position: absolute;\n        left: 360px;\n        top: 190px;\n        width: 1200px;\n        height: 700px;\n        border-radius: 18px;\n        overflow: hidden;\n      }\n      #yt-sw-fill {\n        position: absolute;\n        inset: 0;\n        background: linear-gradient(150deg, #ff8fb8 0%, #7d5cff 60%, #2a7fff 100%);\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        font-family: \"Inter\", ui-sans-serif, sans-serif;\n        font-weight: 700;\n        font-size: 92px;\n        color: rgba(255, 255, 255, 0.93);\n      }\n    </style>\n  </head>\n  <body>\n    <!-- Self-preview wrapper. WIRING: copy the two CSS classes; add\n         class=\"yt-screen-warp3d\" to your media wrapper and\n         <div class=\"yt-screen-fx\" id=\"yt-my-fx\"></div> as its LAST child. Then:\n\n           ytScreenOn(tl, \"#yt-my-fx\", 2.0);\n           ytScreenOff(tl, \"#yt-my-fx\", 8.0);\n    -->\n    <div\n      id=\"yt-sw-root\"\n      data-composition-id=\"yt-screen-warp\"\n      data-start=\"0\"\n      data-duration=\"4\"\n      data-width=\"1920\"\n      data-height=\"1080\"\n    >\n      <div id=\"yt-sw-wrap\" class=\"yt-screen-warp3d\">\n        <div id=\"yt-sw-fill\">on screen</div>\n        <div class=\"yt-screen-fx\" id=\"yt-sw-fx\"></div>\n      </div>\n      <div\n        id=\"yt-sw-drv\"\n        class=\"clip\"\n        data-start=\"0\"\n        data-duration=\"4\"\n        data-track-index=\"0\"\n        style=\"position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none\"\n      ></div>\n    </div>\n    <script>\n      (function () {\n        window.__timelines = window.__timelines || {};\n\n        // ---- copy these helpers into the host script ----\n        window.ytScreenOn = function (tl, target, at) {\n          tl.to(target, { opacity: 1, duration: 0.5, ease: \"power2.out\" }, at);\n        };\n        window.ytScreenOff = function (tl, target, at) {\n          tl.to(target, { opacity: 0, duration: 0.4, ease: \"power2.in\" }, at);\n        };\n\n        // Self-preview timeline.\n        var tl = gsap.timeline({ paused: true });\n        gsap.set(\"#yt-sw-wrap\", { opacity: 0, scale: 0.96 });\n        tl.to(\"#yt-sw-wrap\", { opacity: 1, scale: 1, duration: 0.5, ease: \"power2.out\" }, 0.2);\n        window.ytScreenOn(tl, \"#yt-sw-fx\", 0.8);\n        window.ytScreenOff(tl, \"#yt-sw-fx\", 3.1);\n        tl.to(\"#yt-sw-wrap\", { opacity: 0, duration: 0.35, ease: \"power2.in\" }, 3.5);\n        tl.set(\"#yt-sw-root\", { visibility: \"hidden\" }, 3.98);\n        window.__timelines[\"yt-screen-warp\"] = tl;\n      })();\n    </script>\n  </body>\n</html>\n"}
\ No newline at end of file
diff --git a/scripts/catalog-payload-assets.test.ts b/scripts/catalog-payload-assets.test.ts
new file mode 100644
index 0000000000..b87bf2955f
--- /dev/null
+++ b/scripts/catalog-payload-assets.test.ts
@@ -0,0 +1,190 @@
+import assert from "node:assert/strict";
+import { existsSync, mkdirSync, mkdtempSync, readdirSync, writeFileSync } from "node:fs";
+import { tmpdir } from "node:os";
+import { join } from "node:path";
+import { describe, it } from "node:test";
+import { externalizeDataUris, localReferences, processAssets } from "./catalog-payload-assets.ts";
+
+function project(files: Record<string, string | Buffer>): string {
+  const dir = mkdtempSync(join(tmpdir(), "hf-payload-assets-"));
+  for (const [name, contents] of Object.entries(files)) {
+    const path = join(dir, name);
+    mkdirSync(join(path, ".."), { recursive: true });
+    writeFileSync(path, contents);
+  }
+  return dir;
+}
+
+function target() {
+  return { dir: mkdtempSync(join(tmpdir(), "hf-payload-out-")), urlBase: "/public/catalog/assets" };
+}
+
+describe("localReferences", () => {
+  it("finds files referenced by attribute and by CSS url()", () => {
+    const html = `<img src="assets/logo.png"><style>@font-face{src:url('fonts/inter.woff2')}</style>`;
+    assert.deepEqual(localReferences(html).sort(), ["assets/logo.png", "fonts/inter.woff2"]);
+  });
+
+  it("ignores a shader source assigned to a variable ending in src", () => {
+    // The whole reason the pattern demands a non-identifier character first.
+    const html = `<script>var vertSrc = "attribute vec2 a_pos; void main(){}";</script>`;
+    assert.deepEqual(localReferences(html), []);
+  });
+
+  it("ignores in-document fragment references, encoded or not", () => {
+    const html = `<rect filter="url(#noise)"></rect><rect filter="url(%23grain)"></rect>`;
+    assert.deepEqual(localReferences(html), []);
+  });
+
+  it("ignores anything already addressable by the browser", () => {
+    const html = `<img src="https://cdn.example.com/a.png"><img src="data:image/png;base64,AA">`;
+    assert.deepEqual(localReferences(html), []);
+  });
+
+  it("ignores a path assigned to an identifier, which is code and not markup", () => {
+    // `configSrc` names a file the composition fetches at runtime and parses.
+    // Rewriting it would corrupt the script, so the leading non-identifier
+    // character in the pattern is what keeps this out.
+    const html = `<script>var configSrc = "config.json";</script>`;
+    assert.deepEqual(localReferences(html), []);
+  });
+
+  it("still finds a property assignment, where the dot is not an identifier char", () => {
+    const html = `<script>img.src = "assets/hero.png";</script>`;
+    assert.deepEqual(localReferences(html), ["assets/hero.png"]);
+  });
+
+  it("ignores references with no known extension", () => {
+    const html = `<a href="/docs/guide">guide</a><div style="background:url(gradient)"></div>`;
+    assert.deepEqual(localReferences(html), []);
+  });
+});
+
+describe("processAssets", () => {
+  it("writes a publishable asset once and links to it", () => {
+    const dir = project({ "assets/logo.png": Buffer.from([0x89, 0x50]) });
+    const out = target();
+    const result = processAssets(`<img src="assets/logo.png">`, dir, out);
+
+    assert.equal(result.hosted, 1);
+    assert.equal(result.inlined, 0);
+    assert.deepEqual(result.unresolved, []);
+    assert.match(result.html, /^<img src="\/public\/catalog\/assets\/[0-9a-f]{16}\.png">$/);
+    assert.equal(readdirSync(out.dir).length, 1);
+  });
+
+  it("stores one copy when two items share a byte-identical font", () => {
+    // The reason for content addressing: the catalog's fonts were being
+    // base64'd into a hundred payloads apiece.
+    const font = Buffer.from("a-font-file");
+    const one = project({ "a.woff2": font });
+    const two = project({ "nested/b.woff2": font });
+    const out = target();
+
+    const first = processAssets(`<style>@font-face{src:url(a.woff2)}</style>`, one, out);
+    const second = processAssets(`<style>@font-face{src:url(nested/b.woff2)}</style>`, two, out);
+
+    assert.equal(readdirSync(out.dir).length, 1);
+    const url = /\/public\/catalog\/assets\/[0-9a-f]{16}\.woff2/;
+    assert.equal(first.html.match(url)?.[0], second.html.match(url)?.[0]);
+  });
+
+  it("inlines a type the host will not publish", () => {
+    // `.glb` returns 404 from the docs host, so a link would break the preview.
+    const dir = project({ "scene.glb": Buffer.from([0x67, 0x6c]) });
+    const out = target();
+    const result = processAssets(`<model-viewer src="scene.glb">`, dir, out);
+
+    assert.equal(result.inlined, 1);
+    assert.equal(result.hosted, 0);
+    assert.match(result.html, /data:model\/gltf-binary;base64,/);
+    assert.ok(!existsSync(join(out.dir, "scene.glb")));
+  });
+
+  it("gives the same output twice, so regeneration writes no new bytes", () => {
+    const dir = project({ "a.png": Buffer.from([0x01]) });
+    const first = processAssets(`<img src="a.png">`, dir, target());
+    const second = processAssets(`<img src="a.png">`, dir, target());
+
+    assert.equal(first.html, second.html);
+  });
+
+  it("replaces every occurrence of the same reference", () => {
+    const dir = project({ "a.png": Buffer.from([0x01]) });
+    const result = processAssets(`<img src="a.png"><img src="a.png">`, dir, target());
+
+    assert.equal(result.html.match(/\/public\/catalog\/assets\//g)?.length, 2);
+  });
+
+  it("reports a reference whose file is missing rather than dropping it", () => {
+    // A runtime-built path such as `masks/${slug}.png` lands here, and the item
+    // has to keep its video instead of shipping a preview with holes in it.
+    const result = processAssets(`<img src="masks/gone.png">`, project({}), target());
+
+    assert.deepEqual(result.unresolved, ["masks/gone.png"]);
+  });
+
+  it("refuses a reference that climbs out of the project directory", () => {
+    const dir = project({ "keep.png": Buffer.from([0x01]) });
+    const result = processAssets(`<img src="../../etc/passwd.png">`, dir, target());
+
+    assert.deepEqual(result.unresolved, ["../../etc/passwd.png"]);
+    assert.equal(result.hosted, 0);
+  });
+
+  it("leaves a composition with no local references untouched", () => {
+    const html = `<div data-composition-id="x"></div>`;
+    const result = processAssets(html, project({}), target());
+
+    assert.deepEqual(result, { html, hosted: 0, inlined: 0, unresolved: [] });
+  });
+});
+
+describe("externalizeDataUris", () => {
+  const font = (n: number) => Buffer.alloc(n, 7).toString("base64");
+
+  it("pulls an embedded font out into a shared file", () => {
+    // Compositions arrive with fonts already embedded, which is where the bulk
+    // of the catalog's payload weight came from.
+    const out = target();
+    const result = externalizeDataUris(
+      `<style>@font-face{src:url(data:font/woff2;base64,${font(8000)})}</style>`,
+      out,
+    );
+
+    assert.equal(result.externalized, 1);
+    assert.match(result.html, /url\(\/public\/catalog\/assets\/[0-9a-f]{16}\.woff2\)/);
+    assert.equal(readdirSync(out.dir).length, 1);
+  });
+
+  it("stores one copy when two payloads embed the same font", () => {
+    const out = target();
+    const blob = font(8000);
+    externalizeDataUris(`<style>src:url(data:font/woff2;base64,${blob})</style>`, out);
+    externalizeDataUris(
+      `<b>other item</b><style>src:url(data:font/woff2;base64,${blob})</style>`,
+      out,
+    );
+
+    assert.equal(readdirSync(out.dir).length, 1);
+  });
+
+  it("leaves a small blob alone, where a request costs more than the bytes", () => {
+    const out = target();
+    const result = externalizeDataUris(`<img src="data:image/png;base64,${font(64)}">`, out);
+
+    assert.equal(result.externalized, 0);
+    assert.ok(!existsSync(out.dir) || readdirSync(out.dir).length === 0);
+  });
+
+  it("leaves a type the host will not publish embedded", () => {
+    const out = target();
+    const result = externalizeDataUris(
+      `<a href="data:model/gltf-binary;base64,${font(8000)}">`,
+      out,
+    );
+
+    assert.equal(result.externalized, 0);
+    assert.match(result.html, /data:model\/gltf-binary/);
+  });
+});
diff --git a/scripts/catalog-payload-assets.ts b/scripts/catalog-payload-assets.ts
new file mode 100644
index 0000000000..e4db977567
--- /dev/null
+++ b/scripts/catalog-payload-assets.ts
@@ -0,0 +1,218 @@
+/**
+ * Asset handling for catalog preview payloads.
+ *
+ * Kept apart from the payload generator so the reference-matching rules can be
+ * tested without pulling in the renderer: everything here is pure string and
+ * file work, and the regex below has already been wrong twice in ways only a
+ * test catches.
+ */
+
+import { createHash } from "node:crypto";
+import { existsSync, mkdirSync, readFileSync, statSync, writeFileSync } from "node:fs";
+import { extname, join, resolve } from "node:path";
+
+export const MIME_TYPES: Record<string, string> = {
+  ".png": "image/png",
+  ".jpg": "image/jpeg",
+  ".jpeg": "image/jpeg",
+  ".webp": "image/webp",
+  ".gif": "image/gif",
+  ".svg": "image/svg+xml",
+  ".woff2": "font/woff2",
+  ".woff": "font/woff",
+  ".ttf": "font/ttf",
+  ".otf": "font/otf",
+  ".js": "text/javascript",
+  ".mjs": "text/javascript",
+  ".css": "text/css",
+  ".json": "application/json",
+  ".glb": "model/gltf-binary",
+  ".gltf": "model/gltf+json",
+  ".wav": "audio/wav",
+  ".mp3": "audio/mpeg",
+  ".mp4": "video/mp4",
+  ".webm": "video/webm",
+};
+
+/**
+ * Extensions the docs host actually publishes out of `docs/public`, verified by
+ * fetching one file of each type from a deployed preview.
+ *
+ * Anything here is written once and linked. Anything else — `.glb`, `.js`,
+ * `.css` — is dropped from the deploy with no build error, so it has to travel
+ * inside the payload as a data URI instead. Getting this set wrong is not a
+ * build failure, it is a 404 nobody sees until a reader opens the page.
+ */
+export const HOSTED_EXTENSIONS = new Set([
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".webp",
+  ".gif",
+  ".svg",
+  ".woff2",
+  ".woff",
+  ".ttf",
+  ".otf",
+  ".wav",
+  ".mp3",
+  ".mp4",
+  ".webm",
+]);
+
+/** A reference with any query string or fragment removed. */
+function pathPart(ref: string): string {
+  return ref.split(/[?#]/)[0] ?? ref;
+}
+
+/**
+ * Local files the composition loads from beside itself. A `srcdoc` iframe has
+ * no base URL of its own, so these would otherwise resolve against the docs
+ * page and 404.
+ *
+ * Two rules stop this over-matching. The attribute pattern requires a
+ * non-identifier character before `src`, or a shader assigned to `vertSrc`
+ * reads as a file reference. And a candidate only counts once it carries an
+ * extension we know, which drops `url(#noise)` filter references, `blob:`
+ * juggling, and bare CSS keywords.
+ */
+export function localReferences(html: string): string[] {
+  const found = new Set<string>();
+  const patterns = [
+    /(?<![\w$])(?:src|href)\s*=\s*["']([^"']+)["']/gi,
+    /url\(\s*["']?([^"')]+)["']?\s*\)/gi,
+  ];
+  for (const pattern of patterns) {
+    for (const [, ref] of html.matchAll(pattern)) {
+      if (!ref) continue;
+      // `%23` is an encoded `#`: an in-document SVG filter reference, not a file.
+      if (/^(https?:|data:|blob:|mailto:|#|%23|\/\/)/i.test(ref)) continue;
+      if (ref.includes("\n")) continue;
+      if (!MIME_TYPES[extname(pathPart(ref)).toLowerCase()]) continue;
+      found.add(ref);
+    }
+  }
+  return [...found];
+}
+
+export interface AssetResult {
+  html: string;
+  /** Written once to the shared directory and linked. */
+  hosted: number;
+  /** Carried inside the payload because the host will not publish the type. */
+  inlined: number;
+  /** References left as they were, so the caller can refuse the payload. */
+  unresolved: string[];
+}
+
+export interface AssetTarget {
+  /** Directory shared by every item, so one font is stored once. */
+  dir: string;
+  /** URL the directory is served from. */
+  urlBase: string;
+}
+
+/**
+ * Point every local reference at something the browser can fetch.
+ *
+ * Assets are content-addressed and shared across items rather than inlined per
+ * item. The catalog's fonts are the reason: a handful of files were being
+ * base64'd into a hundred payloads apiece, which cost tens of megabytes in the
+ * repository to say the same thing over and over. Hashing also means a
+ * regenerated payload is byte-identical when nothing changed.
+ *
+ * Types the host will not publish still travel as data URIs, because a link to
+ * a file that 404s is worse than a larger payload.
+ */
+export function processAssets(html: string, projectDir: string, target: AssetTarget): AssetResult {
+  const root = resolve(projectDir);
+  let out = html;
+  let hosted = 0;
+  let inlined = 0;
+  const unresolved: string[] = [];
+
+  for (const ref of localReferences(html)) {
+    const source = resolve(projectDir, pathPart(ref));
+
+    // A composition reaching outside its own directory would pull an arbitrary
+    // file from the build machine into a published payload.
+    const contained = source === root || source.startsWith(`${root}/`);
+    if (!contained || !existsSync(source) || !statSync(source).isFile()) {
+      unresolved.push(ref);
+      continue;
+    }
+
+    const ext = extname(source).toLowerCase();
+    const mime = MIME_TYPES[ext];
+    if (!mime) {
+      unresolved.push(ref);
+      continue;
+    }
+
+    const bytes = readFileSync(source);
+    if (HOSTED_EXTENSIONS.has(ext)) {
+      const name = `${createHash("sha256").update(bytes).digest("hex").slice(0, 16)}${ext}`;
+      const dest = join(target.dir, name);
+      if (!existsSync(dest)) {
+        mkdirSync(target.dir, { recursive: true });
+        writeFileSync(dest, bytes);
+      }
+      out = out.split(ref).join(`${target.urlBase}/${name}`);
+      hosted += 1;
+      continue;
+    }
+
+    out = out.split(ref).join(`data:${mime};base64,${bytes.toString("base64")}`);
+    inlined += 1;
+  }
+
+  return { html: out, hosted, inlined, unresolved };
+}
+
+/** `image/png` -> `.png`, for naming a blob that arrives without a filename. */
+const EXTENSION_FOR_MIME: Record<string, string> = Object.entries(MIME_TYPES).reduce(
+  (acc, [ext, mime]) => (acc[mime] ? acc : { ...acc, [mime]: ext }),
+  {} as Record<string, string>,
+);
+
+/**
+ * Below this, a data URI is cheaper than the request it would cost to fetch.
+ * Fonts, the reason this exists, are far above it.
+ */
+const EXTERNALIZE_MIN_BYTES = 4096;
+
+/**
+ * Pull large data URIs already baked into the composition out into shared files.
+ *
+ * Compositions arrive with their fonts embedded, so `processAssets` never sees
+ * them as references and they survive into the payload untouched. Across the
+ * catalog that was 53.8 MB of base64, most of it the same few typefaces
+ * repeated. Hashing gives one copy per distinct file no matter how many items
+ * embed it.
+ */
+export function externalizeDataUris(
+  html: string,
+  target: AssetTarget,
+): { html: string; externalized: number } {
+  let externalized = 0;
+  const out = html.replace(
+    /data:([a-z0-9.+-]+\/[a-z0-9.+-]+);base64,([A-Za-z0-9+/=]+)/gi,
+    (whole, mime: string, blob: string) => {
+      const ext = EXTENSION_FOR_MIME[mime.toLowerCase()];
+      if (!ext || !HOSTED_EXTENSIONS.has(ext)) return whole;
+
+      const bytes = Buffer.from(blob, "base64");
+      if (bytes.length < EXTERNALIZE_MIN_BYTES) return whole;
+
+      const name = `${createHash("sha256").update(bytes).digest("hex").slice(0, 16)}${ext}`;
+      const dest = join(target.dir, name);
+      if (!existsSync(dest)) {
+        mkdirSync(target.dir, { recursive: true });
+        writeFileSync(dest, bytes);
+      }
+      externalized += 1;
+      return `${target.urlBase}/${name}`;
+    },
+  );
+  return { html: out, externalized };
+}
diff --git a/scripts/generate-catalog-pages.ts b/scripts/generate-catalog-pages.ts
index 6fd2deea35..dcf016dc9e 100644
--- a/scripts/generate-catalog-pages.ts
+++ b/scripts/generate-catalog-pages.ts
@@ -29,6 +29,61 @@ const repoRoot = resolve(scriptDir, "..");
 const registryDir = resolve(repoRoot, "registry");
 const docsDir = resolve(repoRoot, "docs");
 const catalogImageBase = "https://static.heygen.ai/hyperframes-oss/docs/images/catalog";
+const payloadRoot = resolve(repoRoot, "docs/public/catalog");
+
+/**
+ * The player is loaded from a CDN rather than bundled into the docs, pinned to
+ * the minor line this repo ships so a patch release reaches the catalog without
+ * regenerating every page, and a major one never does silently.
+ */
+const playerVersionRange = ((): string => {
+  const pkg = JSON.parse(
+    readFileSync(resolve(repoRoot, "packages/player/package.json"), "utf-8"),
+  ) as { version: string };
+  const [major, minor] = pkg.version.split(".");
+  return `${major}.${minor}`;
+})();
+
+/**
+ * A live preview: the real composition, running in the real player.
+ *
+ * The player is mounted inside the iframe rather than written into the page
+ * because the docs renderer strips unknown custom elements from MDX, so a
+ * `<hyperframes-player>` written here would never reach the DOM. Nothing
+ * rewrites the inside of a `srcDoc` document, so it survives there.
+ *
+ * The composition arrives as JSON because the docs host publishes only JSON and
+ * images out of `docs/public`; an `.html` payload 404s in production while its
+ * page still serves, which is exactly how a previous attempt at this broke
+ * every catalog preview at once.
+ */
+function playerEmbed(kind: ItemKind, name: string, posterUrl: string | null | undefined): string {
+  const payloadUrl = `/public/catalog/${typeDir(kind)}/${name}.json`;
+  const poster = posterUrl ? `p.setAttribute("poster","${posterUrl}");` : "";
+  const bootstrap = [
+    '<!doctype html><html><head><meta charset="utf-8">',
+    "<style>html,body{margin:0;height:100%;overflow:hidden;background:transparent}",
+    "hyperframes-player{display:block;width:100%;height:100%}</style>",
+    `<script src="https://cdn.jsdelivr.net/npm/@hyperframes/player@${playerVersionRange}/dist/hyperframes-player.global.js"><\\/script>`,
+    "</head><body><script>",
+    `fetch("${payloadUrl}").then(function(r){return r.json()}).then(function(d){`,
+    'var p=document.createElement("hyperframes-player");',
+    'p.setAttribute("srcdoc",d.html);p.setAttribute("controls","");',
+    'p.setAttribute("autoplay","");p.setAttribute("loop","");p.setAttribute("muted","");',
+    poster,
+    "document.body.appendChild(p)});",
+    "<\\/script></body></html>",
+  ].join("");
+
+  return [
+    "<iframe",
+    '  className="w-full aspect-video rounded-xl border-0 bg-zinc-100 dark:bg-zinc-800"',
+    `  title=${JSON.stringify(`${name} preview`)}`,
+    '  loading="lazy"',
+    `  srcDoc={${"`"}${bootstrap}${"`"}}`,
+    "/>",
+  ].join("\n");
+}
 
 // ── Types ──────────────────────────────────────────────────────────────────
 
@@ -541,11 +596,18 @@ function generateItemMdx(
     // without a poster has no .png, and asking for one is a 403 the browser
     // fetches before the video.
     const posterUrl = catalogPreviewFor(kind, manifest);
-    const poster = posterUrl ? ` poster="${posterUrl}"` : "";
-    lines.push(
-      `<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="${previewPath}.mp4"${poster} autoPlay muted loop playsInline />`,
-      "",
-    );
+
+    // Items whose payload could not be built — an asset that cannot be inlined,
+    // or one heavy enough to be worth streaming — keep the uploaded video.
+    if (existsSync(join(payloadRoot, typeDir(kind), `${manifest.name}.json`))) {
+      lines.push(playerEmbed(kind, manifest.name, posterUrl), "");
+    } else {
+      const poster = posterUrl ? ` poster="${posterUrl}"` : "";
+      lines.push(
+        `<video className="w-full aspect-video rounded-xl object-cover bg-zinc-100 dark:bg-zinc-800" src="${previewPath}.mp4"${poster} autoPlay muted loop playsInline />`,
+        "",
+      );
+    }
   }
 
   // 2. How to get it. A CodeGroup around a single block just drew an empty tab bar.
diff --git a/scripts/generate-catalog-payloads.ts b/scripts/generate-catalog-payloads.ts
new file mode 100644
index 0000000000..2486cea032
--- /dev/null
+++ b/scripts/generate-catalog-payloads.ts
@@ -0,0 +1,143 @@
+#!/usr/bin/env tsx
+/**
+ * Generate Catalog Preview Payloads
+ *
+ * Writes each catalog item's compiled composition to
+ * `docs/public/catalog/<type>/<name>.json` so the docs site can mount it in a
+ * live `<hyperframes-player>` instead of an uploaded MP4.
+ *
+ * Why JSON and not the composition HTML itself: the docs host publishes only
+ * JSON and image files out of `docs/public`. `.html`, `.js` and `.css` are
+ * dropped from the build with no error, so a preview shipped as an HTML file
+ * 404s in production while its page still serves. The player takes the
+ * composition as a `srcdoc` string, so JSON is the delivery format that both
+ * survives the deploy and matches what the player wants.
+ *
+ * Usage:
+ *   npx tsx scripts/generate-catalog-payloads.ts                    # all items
+ *   npx tsx scripts/generate-catalog-payloads.ts --only data-chart  # single item
+ *   npx tsx scripts/generate-catalog-payloads.ts --type block       # blocks only
+ */
+
+import { readFileSync, writeFileSync, mkdirSync, rmSync } from "node:fs";
+import { join, resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import {
+  discoverItems,
+  prepareProjectDir,
+  type CatalogItem,
+  type ItemKind,
+} from "./generate-catalog-previews.js";
+import { externalizeDataUris, processAssets } from "./catalog-payload-assets.ts";
+
+const scriptDir = dirname(fileURLToPath(import.meta.url));
+const repoRoot = resolve(scriptDir, "..");
+const payloadRoot = resolve(repoRoot, "docs/public/catalog");
+
+/**
+ * Inlining budget for a single payload. A payload is fetched when the reader
+ * opens the page, so it competes with the page itself rather than with a video
+ * they chose to play. Items over budget keep their uploaded MP4.
+ *
+ * Measured across the current catalog: 148 asset-free payloads run 3 KB to
+ * 930 KB (median 11 KB), and the heaviest asset-bearing item inlines to roughly
+ * 5.8 MB because it embeds a real video. This sits above every item but that
+ * one, which is the item an MP4 preview actually suits.
+ */
+const MAX_PAYLOAD_BYTES = Number(process.env.CATALOG_MAX_PAYLOAD_BYTES ?? 3_000_000);
+
+function typeDir(kind: ItemKind): string {
+  return kind === "block" ? "blocks" : "components";
+}
+
+async function buildPayload(item: CatalogItem): Promise<"written" | "skipped"> {
+  const projectDir = await prepareProjectDir(item);
+  try {
+    const html = readFileSync(join(projectDir, "index.html"), "utf-8");
+    const assetTarget = { dir: join(payloadRoot, "assets"), urlBase: "/public/catalog/assets" };
+    const {
+      html: withAssets,
+      hosted,
+      inlined,
+      unresolved,
+    } = processAssets(html, projectDir, assetTarget);
+
+    // Compositions arrive with their fonts already embedded, so this catches
+    // what never looked like a reference in the first place.
+    const { html: withShared, externalized } = externalizeDataUris(withAssets, assetTarget);
+
+    // A reference we could not inline would 404 inside the player, so the item
+    // keeps the MP4 rather than shipping a preview with holes in it.
+    if (unresolved.length > 0) {
+      console.log(`  – ${item.name}: cannot inline ${unresolved.slice(0, 3).join(", ")}`);
+      return "skipped";
+    }
+    const bytes = Buffer.byteLength(withShared, "utf-8");
+    if (bytes > MAX_PAYLOAD_BYTES) {
+      console.log(`  – ${item.name}: ${(bytes / 1e6).toFixed(1)} MB payload, over budget`);
+      return "skipped";
+    }
+
+    const outPath = join(payloadRoot, typeDir(item.kind), `${item.name}.json`);
+    mkdirSync(dirname(outPath), { recursive: true });
+    writeFileSync(outPath, JSON.stringify({ html: withShared }), "utf-8");
+
+    const counts = [
+      hosted + externalized > 0 ? `${hosted + externalized} hosted` : "",
+      inlined > 0 ? `${inlined} inlined` : "",
+    ].filter(Boolean);
+    const assets = counts.length > 0 ? `, ${counts.join(" + ")} asset(s)` : "";
+    console.log(`  ✓ ${item.name}: ${(bytes / 1024).toFixed(0)} KB${assets}`);
+    return "written";
+  } finally {
+    rmSync(projectDir, { recursive: true, force: true });
+  }
+}
+
+function parseArgs(): { only: string | null; type: ItemKind | null } {
+  const argv = process.argv.slice(2);
+  const value = (flag: string): string | null => {
+    const at = argv.indexOf(flag);
+    return at !== -1 ? (argv[at + 1] ?? null) : null;
+  };
+  const type = value("--type");
+  if (type && type !== "block" && type !== "component") {
+    console.error('--type must be "block" or "component"');
+    process.exit(1);
+  }
+  return { only: value("--only"), type: (type as ItemKind | null) ?? null };
+}
+
+async function main(): Promise<void> {
+  const { only, type } = parseArgs();
+  const items = discoverItems(type, only);
+  console.log(`Building ${items.length} catalog payload(s)...\n`);
+
+  let written = 0;
+  let skipped = 0;
+  let failed = 0;
+  for (const item of items) {
+    try {
+      const result = await buildPayload(item);
+      if (result === "written") written += 1;
+      else skipped += 1;
+    } catch (err) {
+      failed += 1;
+      console.error(`  ✗ ${item.name}: ${err instanceof Error ? err.message : err}`);
+    }
+  }
+
+  // Skips are the items that keep an uploaded MP4, failures are items that
+  // could not be built at all. Reporting them apart keeps a breakage from
+  // reading as a considered fallback.
+  console.log(`\nDone. ${written} payload(s) written, ${skipped} still on video.`);
+  if (failed > 0) console.log(`${failed} item(s) failed to build.`);
+}
+
+if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
diff --git a/scripts/generate-catalog-previews.ts b/scripts/generate-catalog-previews.ts
index 77cb3f0e20..9d215aeda0 100644
--- a/scripts/generate-catalog-previews.ts
+++ b/scripts/generate-catalog-previews.ts
@@ -57,9 +57,9 @@ if (!process.env.PRODUCER_HYPERFRAME_MANIFEST_PATH) {
 
 // ── Types ──────────────────────────────────────────────────────────────────
 
-type ItemKind = "block" | "component";
+export type ItemKind = "block" | "component";
 
-interface CatalogItem {
+export interface CatalogItem {
   name: string;
   kind: ItemKind;
   /** Directory containing the item's files in the registry. */
@@ -70,7 +70,10 @@ interface CatalogItem {
 
 // ── Discovery ──────────────────────────────────────────────────────────────
 
-function discoverItems(kindFilter: ItemKind | null, nameFilter: string | null): CatalogItem[] {
+export function discoverItems(
+  kindFilter: ItemKind | null,
+  nameFilter: string | null,
+): CatalogItem[] {
   const items: CatalogItem[] = [];
 
   // Blocks and components only — examples use the existing generate-template-previews.ts.
@@ -149,7 +152,7 @@ function mirrorRegistryTargets(projectDir: string): void {
   }
 }
 
-async function prepareProjectDir(item: CatalogItem): Promise<string> {
+export async function prepareProjectDir(item: CatalogItem): Promise<string> {
   const tmpDir = join(tmpdir(), `hf-catalog-${item.name}-${Date.now()}`);
   mkdirSync(tmpDir, { recursive: true });
   cpSync(item.sourceDir, tmpDir, { recursive: true });
@@ -430,7 +433,12 @@ async function main(): Promise<void> {
   console.log("\nDone.");
 }
 
-main().catch((err) => {
-  console.error(err);
-  process.exit(1);
-});
+// Only render when run as a command. This module also exports discoverItems
+// and prepareProjectDir for the payload generator, and an unguarded main()
+// would render every preview the moment that script imported them.
+if (process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url)) {
+  main().catch((err) => {
+    console.error(err);
+    process.exit(1);
+  });
+}
