lumina-slides 8.9.4 → 9.0.0

package/src/components/site/SiteDocs.vue

@@ -0,0 +1,3267 @@
+<template>
+    <div class="min-h-screen pt-32 px-6 md:px-12 max-w-8xl mx-auto flex flex-col md:flex-row gap-16">
+        <!-- Sidebar Navigation -->
+        <aside class="w-full md:w-64 flex-shrink-0 hidden md:block">
+            <div class="sticky top-32 space-y-10">
+                <div v-for="(group, i) in navigation" :key="i">
+                    <!-- Group Title -->
+                    <h3 class="text-xs font-bold uppercase tracking-widest text-white/30 mb-4 pl-3">
+                        {{ group.title }}
+                    </h3>
+
+                    <!-- Links -->
+                    <ul class="space-y-1 relative border-l border-white/5">
+                        <li v-for="item in group.items" :key="item.id">
+                            <button @click="activeSection = item.id; scrollToTop()" :class="[
+                                'group w-full text-left px-4 py-2 text-sm transition-all duration-300 border-l-2 -ml-[1px]',
+                                activeSection === item.id
+                                    ? 'border-blue-500 text-white font-medium bg-blue-500/5'
+                                    : 'border-transparent text-white/50 hover:text-white hover:border-white/20'
+                            ]">
+                                {{ item.label }}
+                            </button>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </aside>
+
+        <!-- Main Content Area -->
+        <main class="flex-1 w-full min-w-0 pb-32">
+            <Transition name="fade" mode="out-in">
+                <div :key="activeSection" class="doc-content max-w-6xl">
+
+                    <!-- MEDIA & VIDEO -->
+                    <div v-if="activeSection === 'media'">
+                        <h1>Media & Video</h1>
+                        <p class="lead">Lumina supports video backgrounds on any slide, and video elements in Half and Flex layouts.</p>
+
+                        <h2>Video object (VideoProperties)</h2>
+                        <p>Use <code>{ type: "video", src, poster?, autoplay?, loop?, muted?, controls?, className? }</code>. For <strong>backgrounds</strong>, wrap in <code>background: { type: "video", src, ... }</code> and optionally set <code>opacity</code> on the slide. For <strong>Half</strong>, use <code>video: { type: "video", src, autoplay?, muted?, loop? }</code> instead of <code>image</code>. For <strong>Flex</strong>, use an element <code>{ type: "video", src, controls?, size?, fill?, fit? }</code>.</p>
+
+                        <h2>Video Backgrounds</h2>
+                        <p>Set <code>background</code> on any slide to a video object. Works on <strong>all layouts</strong>. You can add <code>opacity</code> for an overlay effect.</p>
+
+                        <div class="my-8">
+                            <LivePreview :initial-code="EXAMPLES.video" />
+                        </div>
+
+                        <h2>Video Elements</h2>
+                        <p>In Half and Flex layouts, you can use <code>video</code> instead of <code>image</code> (Half) or a <code>type: "video"</code> element (Flex).</p>
+
+                        <h3>In Half Layout</h3>
+                        <div class="my-6">
+                            <LivePreview :initial-code="EXAMPLES.video_half" />
+                        </div>
+
+                        <h3>In Flex Layout</h3>
+                        <div class="my-6">
+                            <LivePreview :initial-code="EXAMPLES.video_flex" />
+                        </div>
+                    </div>
+
+                    <!-- INTRODUCTION -->
+                    <div v-else-if="activeSection === 'intro'">
+                        <h1>Introduction</h1>
+                        <p class="lead text-2xl text-white font-light">
+                            Lumina is a high-performance, Universal Presentation Engine.
+                        </p>
+                        <p>
+                            Unlike traditional tools that trap your content in proprietary file formats, Lumina defines
+                            presentations as <strong>pure JSON data</strong>. This approach enables programmatic
+                            generation, easy version control, and dynamic storytelling experiences.
+                        </p>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 my-12 not-prose">
+                            <div
+                                class="group p-8 bg-white/[0.02] hover:bg-white/[0.04] rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-500 hover:-translate-y-1 shadow-lg hover:shadow-2xl hover:shadow-blue-500/5">
+                                <div
+                                    class="w-12 h-12 rounded-full bg-yellow-500/10 flex items-center justify-center mb-6">
+                                    <i class="ph-thin ph-lightning text-xl text-yellow-400"></i>
+                                </div>
+                                <h3
+                                    class="text-xl font-bold mb-2 text-white group-hover:text-yellow-400 transition-colors">
+                                    Fast by default</h3>
+                                <p class="text-sm text-white/50 leading-relaxed">Bundles Vue 3 and GSAP internally to
+                                    ensure instant load times and buttery smooth 60fps animations.</p>
+                            </div>
+
+                            <div
+                                class="group p-8 bg-white/[0.02] hover:bg-white/[0.04] rounded-2xl border border-white/5 hover:border-white/10 transition-all duration-500 hover:-translate-y-1 shadow-lg hover:shadow-2xl hover:shadow-blue-500/5">
+                                <div
+                                    class="w-12 h-12 rounded-full bg-blue-500/10 flex items-center justify-center mb-6">
+                                    <i class="ph-thin ph-code text-xl text-blue-400"></i>
+                                </div>
+                                <h3
+                                    class="text-xl font-bold mb-2 text-white group-hover:text-blue-400 transition-colors">
+                                    Declarative JSON</h3>
+                                <p class="text-sm text-white/50 leading-relaxed">Manage your content as code. Git-diff
+                                    your presentations. Generate decks from APIs.</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- INSTALLATION -->
+                    <div v-else-if="activeSection === 'install'">
+                        <h1>Installation</h1>
+                        <p>Lumina is available as a Universal NPM package. It works in any JavaScript environment
+                            (Vanilla, React, Vue, Svelte, etc.). Vue and GSAP are bundled; Chart.js is an optional peer only if you use <code>type: "chart"</code> slides.</p>
+
+                        <div class="not-prose my-8">
+                            <div class="bg-[#0f0f0f] border border-white/10 rounded-xl overflow-hidden shadow-2xl">
+                                <div class="flex items-center px-4 py-2 border-b border-white/5 bg-white/[0.02]">
+                                    <div class="flex gap-1.5">
+                                        <div class="w-2.5 h-2.5 rounded-full bg-red-500/50"></div>
+                                        <div class="w-2.5 h-2.5 rounded-full bg-yellow-500/50"></div>
+                                        <div class="w-2.5 h-2.5 rounded-full bg-green-500/50"></div>
+                                    </div>
+                                    <div class="ml-4 text-xs text-white/30 font-mono">Terminal</div>
+                                </div>
+                                <div class="p-6 overflow-x-auto space-y-2">
+                                    <code class="font-mono text-sm block">
+                                        <span class="text-purple-400">npm</span> install lumina-slides
+                                    </code>
+                                    <code class="font-mono text-sm text-white/50 block">
+                                        <span class="text-gray-500"># Optional, only for chart slides:</span> npm install chart.js
+                                    </code>
+                                </div>
+                            </div>
+                        </div>
+
+                        <h3>Requirements</h3>
+                        <ul>
+                            <li><strong>Node.js 18+</strong> for development.</li>
+                            <li><strong>Vue 3 and GSAP</strong> are bundled; no separate install.</li>
+                            <li><strong>Chart.js ^4</strong> (optional): install only if your deck uses <code>type: "chart"</code>.</li>
+                        </ul>
+                    </div>
+
+                    <!-- SETUP -->
+                    <div v-else-if="activeSection === 'setup'">
+                        <h1>Quick Start</h1>
+                        <p>Import the stylesheet and initialize the engine in your main entry file.
+                        </p>
+
+                        <pre class="language-js"><code><span class="text-purple-400">import</span> { Lumina } <span class="text-purple-400">from</span> 'lumina-slides';
+<span class="text-purple-400">import</span> 'lumina-slides/style.css';
+
+<span class="text-gray-500">// Initialize (theme, loop, navigation, touch, etc.)</span>
+<span class="text-blue-400">const</span> engine = <span class="text-blue-400">new</span> Lumina('#app', {
+    theme: <span class="text-green-400">'ocean'</span>,
+    loop: <span class="text-yellow-400">true</span>,
+    navigation: <span class="text-yellow-400">true</span>,
+    touch: <span class="text-yellow-400">true</span>
+});
+
+<span class="text-gray-500">// Load your deck</span>
+engine.load(myDeckData);</code></pre>
+                    </div>
+
+                    <!-- DECK STRUCTURE -->
+                    <div v-else-if="activeSection === 'deck'">
+                        <h1>Deck Structure</h1>
+                        <p>A deck is a JSON object with <code>meta</code> and <code>slides</code>. Both are required.</p>
+
+                        <pre><code>{
+  <span class="text-blue-400">"meta"</span>: {
+    <span class="text-blue-400">"title"</span>: <span class="text-green-400">"My Presentation"</span>,
+    <span class="text-blue-400">"author"</span>: <span class="text-green-400">"Dev Team"</span>,
+    <span class="text-gray-500">// Optional: theme preset or ThemeConfig</span>
+    <span class="text-blue-400">"theme"</span>: <span class="text-green-400">"ocean"</span>,
+    <span class="text-gray-500">// Optional: start elements hidden (see Element Control)</span>
+    <span class="text-blue-400">"initialElementState"</span>: { <span class="text-green-400">"s0-tag"</span>: { <span class="text-blue-400">"visible"</span>: <span class="text-yellow-400">false</span> } },
+    <span class="text-blue-400">"elementControl"</span>: { <span class="text-blue-400">"defaultVisible"</span>: <span class="text-yellow-400">false</span> },
+    <span class="text-gray-500">// Optional: animation overrides (durationIn, revealDelayMs, etc.)</span>
+    <span class="text-blue-400">"effects"</span>: { <span class="text-blue-400">"durationIn"</span>: <span class="text-cyan-400">1</span> }
+  },
+  <span class="text-blue-400">"slides"</span>: [
+    { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"statement"</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Hello"</span>, <span class="text-blue-400">"subtitle"</span>: <span class="text-green-400">"World"</span> }
+    <span class="text-gray-500">// Each slide: type, and props per layout (title, image, timeline, ...)</span>
+  ]
+}</code></pre>
+
+                        <h3>Common slide-level properties</h3>
+                        <p>Any slide can include: <code>sizing</code> (<code>"viewport"</code> | <code>"container"</code>), <code>background</code> (image URL or <code>{ type: "video", src, ... }</code>), <code>notes</code> (speaker notes), <code>class</code>, <code>timelineTracks</code> (for keyframe animations; see <em>Timeline (keyframes)</em>). Layout-specific props (e.g. <code>image</code>, <code>timeline</code>, <code>features</code>) are described in each layout reference.</p>
+                    </div>
+
+                    <!-- SLIDE LAYOUTS -->
+                    <div v-else-if="activeSection === 'slides'">
+                        <h1>Slide Layouts</h1>
+                        <p>Lumina includes responsive layouts for common scenarios. Each layout has a reference section with a full property table.</p>
+
+                        <div class="grid grid-cols-1 gap-12 mt-12 not-prose">
+                            <!-- Statement -->
+                            <div class="p-8 rounded-2xl bg-white/[0.02] border border-white/5 shadow-2xl">
+                                <div class="flex items-center gap-4 mb-6">
+                                    <div
+                                        class="w-10 h-10 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center font-bold text-lg">
+                                        1</div>
+                                    <div>
+                                        <h2 class="text-2xl font-bold text-white mb-1">Statement</h2>
+                                        <p class="text-sm text-white/50">High impact text for big ideas. Ideal for
+                                            section headers or punchlines.</p>
+                                    </div>
+                                </div>
+                                <div class="prose prose-invert max-w-none prose-pre:bg-black/50 prose-pre:border-none">
+                                    <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"statement"</span>,
+  <span class="text-blue-400">"tag"</span>: <span class="text-green-400">"Optional label"</span>,
+  <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Hello World"</span>,
+  <span class="text-blue-400">"subtitle"</span>: <span class="text-green-400">"This is a statement slide."</span>
+}</code></pre>
+                                </div>
+                                <p class="text-sm text-white/50 mt-4">Properties: <code>title</code> (required), <code>tag</code>, <code>subtitle</code> (optional).</p>
+                            </div>
+
+                            <!-- Half -->
+                            <div class="p-8 rounded-2xl bg-white/[0.02] border border-white/5 shadow-2xl">
+                                <div class="flex items-center gap-4 mb-6">
+                                    <div
+                                        class="w-10 h-10 rounded-lg bg-purple-500/20 text-purple-400 flex items-center justify-center font-bold text-lg">
+                                        2</div>
+                                    <div>
+                                        <h2 class="text-2xl font-bold text-white mb-1">Half / Split</h2>
+                                        <p class="text-sm text-white/50">Image or video on one side, content on the other. <code>imageSide</code>: <code>left</code> | <code>right</code>. Use <code>image</code> or <code>video</code> (<code>{ type: "video", src, autoplay?, muted?, loop?, controls? }</code>). Optional: <code>tag</code>, <code>cta</code> (button label).</p>
+                                    </div>
+                                </div>
+                                <div class="prose prose-invert max-w-none prose-pre:bg-black/50 prose-pre:border-none">
+                                    <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"half"</span>,
+  <span class="text-blue-400">"imageSide"</span>: <span class="text-green-400">"right"</span>,
+  <span class="text-blue-400">"image"</span>: <span class="text-green-400">"/assets/demo.jpg"</span>,
+  <span class="text-blue-400">"tag"</span>: <span class="text-green-400">"Optional"</span>,
+  <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Split Layout"</span>,
+  <span class="text-blue-400">"paragraphs"</span>: [<span class="text-green-400">"Content goes here."</span>],
+  <span class="text-blue-400">"cta"</span>: <span class="text-green-400">"Learn More"</span>
+}</code></pre>
+                                </div>
+                            </div>
+
+                            <!-- Features -->
+                            <div class="p-8 rounded-2xl bg-white/[0.02] border border-white/5 shadow-2xl">
+                                <div class="flex items-center gap-4 mb-6">
+                                    <div
+                                        class="w-10 h-10 rounded-lg bg-yellow-500/20 text-yellow-400 flex items-center justify-center font-bold text-lg">
+                                        3</div>
+                                    <div>
+                                        <h2 class="text-2xl font-bold text-white mb-1">Features</h2>
+                                        <p class="text-sm text-white/50">A responsive grid of feature cards. Each item: <code>title</code>, <code>desc</code> (or <code>description</code>), <code>icon</code> (e.g. <code>fa-bolt</code>, <code>star</code>, <code>zap</code>); optional <code>class</code>, <code>id</code>. Optional section <code>description</code>.</p>
+                                    </div>
+                                </div>
+                                <div class="prose prose-invert max-w-none prose-pre:bg-black/50 prose-pre:border-none">
+                                    <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"features"</span>,
+  <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Core Features"</span>,
+  <span class="text-blue-400">"description"</span>: <span class="text-green-400">"Optional"</span>,
+  <span class="text-blue-400">"features"</span>: [
+    { <span class="text-blue-400">"class"</span>: <span class="text-green-400">""</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Fast"</span>, <span class="text-blue-400">"desc"</span>: <span class="text-green-400">"60fps"</span>, <span class="text-blue-400">"icon"</span>: <span class="text-green-400">"fa-bolt"</span> }
+  ]
+}</code></pre>
+                                </div>
+                            </div>
+
+                            <!-- Timeline -->
+                            <div class="p-8 rounded-2xl bg-white/[0.02] border border-white/5 shadow-2xl">
+                                <div class="flex items-center gap-4 mb-6">
+                                    <div
+                                        class="w-10 h-10 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center font-bold text-lg">
+                                        4</div>
+                                    <div>
+                                        <h2 class="text-2xl font-bold text-white mb-1">Timeline</h2>
+                                        <p class="text-sm text-white/50">Chronological events in a vertical layout. Each item: <code>date</code>, <code>title</code>, <code>description</code>; optional <code>icon</code>, <code>id</code>.</p>
+                                    </div>
+                                </div>
+                                <div class="prose prose-invert max-w-none prose-pre:bg-black/50 prose-pre:border-none">
+                                    <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"timeline"</span>,
+  <span class="text-blue-400">"title"</span>: <span class="text-green-400">"History"</span>,
+  <span class="text-blue-400">"subtitle"</span>: <span class="text-green-400">"Optional"</span>,
+  <span class="text-blue-400">"timeline"</span>: [
+    { <span class="text-blue-400">"date"</span>: <span class="text-green-400">"2024"</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Launch"</span>, <span class="text-blue-400">"description"</span>: <span class="text-green-400">"V1 Released"</span> }
+  ]
+}</code></pre>
+                                </div>
+                            </div>
+
+                            <!-- Flex -->
+                            <div class="p-8 rounded-2xl bg-white/[0.02] border border-white/5 shadow-2xl">
+                                <div class="flex items-center gap-4 mb-6">
+                                    <div
+                                        class="w-10 h-10 rounded-lg bg-cyan-500/20 text-cyan-400 flex items-center justify-center font-bold text-lg">
+                                        5</div>
+                                    <div>
+                                        <h2 class="text-2xl font-bold text-white mb-1">Flex</h2>
+                                        <p class="text-sm text-white/50">Flow-based layout with size tokens (<code>half</code>, <code>third</code>, …). Elements: <code>title</code>, <code>text</code>, <code>bullets</code>, <code>image</code>, <code>video</code>, <code>button</code>, <code>content</code>, <code>timeline</code>, <code>stepper</code>, <code>spacer</code>. See <em>Flex</em> in Layouts.</p>
+                                    </div>
+                                </div>
+                                <div class="prose prose-invert max-w-none prose-pre:bg-black/50 prose-pre:border-none">
+                                    <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"flex"</span>,
+  <span class="text-blue-400">"direction"</span>: <span class="text-green-400">"horizontal"</span>,
+  <span class="text-blue-400">"elements"</span>: [
+    { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"image"</span>, <span class="text-blue-400">"src"</span>: <span class="text-green-400">"/img.jpg"</span>, <span class="text-blue-400">"size"</span>: <span class="text-green-400">"half"</span>, <span class="text-blue-400">"fill"</span>: <span class="text-yellow-400">true</span> },
+    { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"content"</span>, <span class="text-blue-400">"size"</span>: <span class="text-green-400">"half"</span>, <span class="text-blue-400">"elements"</span>: [
+      { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"title"</span>, <span class="text-blue-400">"text"</span>: <span class="text-green-400">"Hello"</span> },
+      { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"bullets"</span>, <span class="text-blue-400">"items"</span>: [<span class="text-green-400">"A"</span>, <span class="text-green-400">"B"</span>] }
+    ]}
+  ]
+}</code></pre>
+                                </div>
+                            </div>
+
+                            <p class="text-white/60 mt-8">Also: <strong>Chart</strong> (<code>bar</code>, <code>line</code>, <code>pie</code>, <code>doughnut</code>), <strong>Custom HTML</strong>, <strong>Video</strong> (full-screen), <strong>Diagram</strong> (Vue Flow nodes/edges), <strong>Free</strong> (absolutely positioned text/image/box with <code>timelineTracks</code>). See the Layouts section for property tables.</p>
+                        </div>
+                    </div>
+
+
+                    <!-- SIZING / EMBEDDING -->
+                    <div v-else-if="activeSection === 'sizing'">
+                        <h1>Embedding & Sizing</h1>
+                        <p>By default, Lumina slides take up the full viewport height (<code>100vh</code>) to create an
+                            immersive experience.</p>
+                        <p>However, if you want to embed a slide inside a smaller container (e.g., a dashboard widget or
+                            a blog post card), you can change the sizing mode.</p>
+
+                        <h3>Container Mode</h3>
+                        <p>Set the <code>sizing</code> property to <code>'container'</code> in your slide data. This
+                            tells the engine to respect the parent container's height instead of forcing full screen.
+                        </p>
+
+                        <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"timeline"</span>,
+  <span class="text-blue-400">"sizing"</span>: <span class="text-green-400">"container"</span>, <span class="text-gray-500">// Default is "viewport"</span>
+  <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Project History"</span>,
+  <span class="text-blue-400">"timeline"</span>: [...]
+}</code></pre>
+
+                        <div class="mt-8 p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
+                            <h4 class="text-yellow-400 font-bold mb-2"><i class="ph-thin ph-lightbulb mr-2"></i>Pro Tip
+                            </h4>
+                            <p class="text-sm text-yellow-200/80 m-0">When using 'container' mode, ensure the parent
+                                element has a defined height (e.g., <code>h-96</code> or fixed pixels), otherwise the
+                                slide content might collapse or expand unexpectedly.</p>
+                        </div>
+                    </div>
+
+                    <!-- CONFIGURATION -->
+                    <div v-else-if="activeSection === 'config'">
+                        <h1>Configuration</h1>
+                        <p>Pass options to <code>new Lumina(selector, options)</code>. All properties are optional.</p>
+
+                        <h3>Core</h3>
+                        <ul>
+                            <li><code>theme</code> — Preset name (<code>default</code>, <code>ocean</code>, <code>midnight</code>, <code>forest</code>, <code>cyber</code>, <code>latte</code>, <code>sunset</code>, <code>monochrome</code>) or a <code>ThemeConfig</code> object.</li>
+                            <li><code>loop</code> — Loop back to the first slide after the last. Default: <code>false</code>.</li>
+                            <li><code>navigation</code>, <code>keyboard</code>, <code>touch</code> — Enable/disable navigation. Defaults: <code>true</code>.</li>
+                            <li><code>selector</code> — Override the mount selector (default from constructor).</li>
+                            <li><code>debug</code> — Enable debug logs. Default: <code>false</code>.</li>
+                            <li><code>studio</code> — Enable Studio (page builder) mode. Default: <code>false</code>.</li>
+                        </ul>
+
+                        <h3>elementControl</h3>
+                        <p>For reveal-on-demand: <code>elementControl: { defaultVisible: false }</code> makes all elements start hidden. Override per id with <code>meta.initialElementState</code>. See <em>Element Control</em>.</p>
+
+                        <h3>animation</h3>
+                        <p>Override timings and eases. Same keys can be set in <code>deck.meta.effects</code> or <code>slide.meta.effects</code>; precedence: slide &gt; meta &gt; options &gt; defaults.</p>
+                        <ul>
+                            <li><code>enabled</code>, <code>type</code> (<code>fade</code> | <code>slide</code> | <code>zoom</code> | <code>cascade</code>), <code>durationIn</code>, <code>durationOut</code>, <code>stagger</code>, <code>ease</code>, <code>easeOut</code>, <code>entranceReveal</code></li>
+                            <li><code>revealDelayMs</code>, <code>revealDuration</code>, <code>revealEase</code> — for <code>revealInSequence</code></li>
+                            <li><code>elementDuration</code>, <code>elementEase</code> — for <code>element(id).animate()</code></li>
+                        </ul>
+
+                        <h3>ui</h3>
+                        <pre><code>ui: {
+  <span class="text-blue-400">visible</span>: <span class="text-yellow-400">true</span>,
+  <span class="text-blue-400">showProgressBar</span>: <span class="text-yellow-400">true</span>,
+  <span class="text-blue-400">showSlideCount</span>: <span class="text-yellow-400">true</span>,
+  <span class="text-blue-400">showControls</span>: <span class="text-yellow-400">true</span>   <span class="text-gray-500">// Next/Prev arrows</span>
+}</code></pre>
+
+                        <h3>keys</h3>
+                        <p>Custom key bindings: <code>keys: { next: ['ArrowRight',' '], prev: ['ArrowLeft'] }</code>.</p>
+                    </div>
+
+                    <!-- EVENTS -->
+                    <div v-else-if="activeSection === 'events'">
+                        <h1>Events & API</h1>
+                        <p>Subscribe with <code>engine.on(event, handler)</code>; unsubscribe with <code>engine.off(event, handler)</code> using the same function reference.</p>
+
+                        <h3>ready</h3>
+                        <p>Fired when a deck is successfully loaded. Payload: the <code>Deck</code> object. Register <code>ready</code> (and <code>slideChange</code>) <strong>before</strong> <code>engine.load(deck)</code> when using element control or <code>revealInSequence</code>.</p>
+
+                        <h3>slideChange</h3>
+                        <p>Fired when the active slide changes. Payload: <code>{ index, previousIndex, slide }</code>.</p>
+
+                        <h3>action</h3>
+                        <p>Fired on user interactions (e.g. button clicks). Payload: <code>{ type, label?, value?, origin? }</code>. For buttons, <code>type</code> is often <code>"button"</code>; <code>label</code> and <code>value</code> (or <code>action</code>) come from the element. For <code>slide-update</code> (e.g. diagram): <code>slideIndex</code>, <code>patch</code> (e.g. <code>{ nodes, edges }</code>).</p>
+
+                        <h3>error</h3>
+                        <p>Fired when an internal error occurs. Payload: <code>Error</code>. Use <code>engine.emitError(err)</code> to forward errors from your app.</p>
+
+                        <h3>Additional events</h3>
+                        <p>Lifecycle and features: <code>patch</code> (<code>{ diff }</code> when <code>engine.patch()</code>), <code>destroy</code> (on <code>engine.destroy()</code>), <code>navigate</code> (<code>{ direction, fromIndex, toIndex }</code> when <code>next</code>/<code>prev</code>/<code>goTo</code> change the slide), <code>themeChange</code> (<code>{ theme }</code>), <code>speakerNotesOpen</code>, <code>speakerNotesClose</code>, <code>timelineSeek</code> (<code>{ progress, slideIndex }</code>), <code>timelineComplete</code> (<code>{ slideIndex }</code>), <code>revealStart</code> (<code>{ slideIndex, elementIds }</code>), <code>revealComplete</code> (<code>{ slideIndex }</code>), <code>revealElement</code> (<code>{ slideIndex, elementId, index }</code>).</p>
+
+                        <pre><code>engine.<span class="text-yellow-400">on</span>('ready', (deck) => { <span class="text-gray-500">/* deck loaded */</span> });
+engine.<span class="text-yellow-400">on</span>('slideChange', ({ index, slide }) => {
+    console.log(<span class="text-green-400">`Slide ${index}: ${slide.type}`</span>);
+});
+engine.<span class="text-yellow-400">on</span>('action', (p) => {
+    if (p.type === <span class="text-green-400">'button'</span> && p.value) window.open(p.value, <span class="text-green-400">'_blank'</span>);
+});
+engine.<span class="text-yellow-400">on</span>('error', (err) => console.error(err));
+engine.<span class="text-yellow-400">on</span>('patch', ({ diff }) => console.log(<span class="text-green-400">'Patched'</span>, diff));
+engine.<span class="text-yellow-400">on</span>('navigate', ({ direction, toIndex }) => console.log(direction, toIndex));</code></pre>
+
+                        <h3>Navigation & state</h3>
+                        <p><code>engine.next()</code>, <code>engine.prev()</code>, <code>engine.goTo(index)</code>, <code>engine.currentSlideIndex</code>, <code>engine.exportState()</code> (for LLM context: <code>{ status, currentSlide: { index, type, title }, narrative, engagementLevel, history }</code>), <code>engine.destroy()</code>.</p>
+                    </div>
+
+                    <!-- ELEMENT CONTROL -->
+                    <div v-else-if="activeSection === 'element-control'">
+                        <h1>Element Control (Reveal on Demand)</h1>
+                        <p class="lead">Start with elements hidden and reveal them in sequence: ideal for blank slides that
+                            fill in as you speak, or for effects driven by <code>engine.element(id)</code>.</p>
+
+                        <h2>How element ids are assigned</h2>
+                        <p>Each controllable element has a <strong>stable id</strong> used in <code>engine.element(id)</code>, <code>meta.initialElementState</code>, and <code>engine.getElementById(id)</code>. Layouts wrap content in <code>LuminaElement</code> with <code>:id="resolveId(data, slideIndex, path)"</code>, which is written as <code>data-lumina-id</code> in the DOM.</p>
+
+                        <p><strong>Resolution order</strong> (in <code>resolveId</code>):</p>
+                        <ol class="list-decimal list-inside mb-6 space-y-1 text-white/70">
+                            <li><strong>Slide root</strong> (path <code>[]</code> or <code>['slide']</code>): <code>slide.id</code> if present, otherwise <code>s{N}-slide</code>.</li>
+                            <li><strong>Object with <code>id</code></strong>: if the value at that path is an object with <code>id: string</code> (e.g. <code>features[0].id</code>, a diagram node), that <code>id</code> is used.</li>
+                            <li><strong><code>slide.ids</code></strong>: if the path has a single segment (e.g. <code>tag</code>) and <code>slide.ids.tag</code> exists, that value is used.</li>
+                            <li><strong>Fallback</strong>: <code>elemId(slideIndex, ...path)</code> → format <code>s{N}-{path0}-{path1}-...</code> (e.g. <code>s0-tag</code>, <code>s1-features-2</code>, <code>s2-elements-0-elements-1</code>).</li>
+                        </ol>
+
+                        <p><strong>Ids by slide type</strong> (when there is no <code>id</code> or <code>slide.ids</code>):</p>
+                        <div class="overflow-x-auto mb-6">
+                            <table class="w-full text-sm border border-white/10 rounded-lg">
+                                <thead><tr class="border-b border-white/10"><th class="text-left py-2 px-3 text-white/90">Type</th><th class="text-left py-2 px-3 text-white/90">Paths (path → id fallback)</th></tr></thead>
+                                <tbody class="text-white/70">
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">statement</td><td class="py-2 px-3"><code>tag</code>→s{N}-tag, <code>title</code>→s{N}-title, <code>subtitle</code>→s{N}-subtitle</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">features</td><td class="py-2 px-3"><code>header</code>→s{N}-header, <code>features.i</code>→s{N}-features-{i}</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">half</td><td class="py-2 px-3"><code>media</code>, <code>tag</code>, <code>title</code>, <code>paragraphs</code>, <code>cta</code> → s{N}-media, s{N}-tag, etc.</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">timeline</td><td class="py-2 px-3"><code>title</code>, <code>subtitle</code>, <code>timeline.i</code> → s{N}-title, s{N}-subtitle, s{N}-timeline-{i}</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">steps</td><td class="py-2 px-3"><code>header</code>, <code>steps.i</code> → s{N}-header, s{N}-steps-{i}</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">flex</td><td class="py-2 px-3"><code>elements.i</code> → s{N}-elements-{i}; nested <code>elements.i.elements.j</code> → s{N}-elements-{i}-elements-{j}</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">chart</td><td class="py-2 px-3"><code>title</code>, <code>subtitle</code>, <code>chart</code> → s{N}-title, s{N}-subtitle, s{N}-chart</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">video</td><td class="py-2 px-3"><code>video</code>, <code>title</code> → s{N}-video, s{N}-title</td></tr>
+                                    <tr class="border-b border-white/5"><td class="py-2 px-3 font-mono">diagram</td><td class="py-2 px-3"><code>nodes.i</code>, <code>edges.i</code>; if the node has <code>id</code>, it is used</td></tr>
+                                    <tr><td class="py-2 px-3 font-mono">free</td><td class="py-2 px-3"><code>elements.i</code> → s{N}-elements-0, s{N}-elements-1, …</td></tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <p>To see a slide's ids at runtime: <code>engine.elements(slideIndex)</code>. To use by path: <code>engine.element(slideIndex, "tag")</code> or <code>engine.element(slideIndex, "features.0")</code>; the id is resolved with the same rules.</p>
+
+                        <h2>Option 1: meta.initialElementState</h2>
+                        <p>Define in the deck which elements start hidden. Ids follow the pattern
+                            <code>s{index}-{path}</code> (e.g. <code>s0-tag</code>, <code>s0-title</code>,
+                            <code>s1-features-0</code>). <code>engine.elements(slideIndex)</code> lists all ids for a slide.
+                        </p>
+
+                        <pre><code>{
+  <span class="text-blue-400">"meta"</span>: {
+    <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Reveal on Demand"</span>,
+    <span class="text-blue-400">"initialElementState"</span>: {
+      <span class="text-green-400">"s0-tag"</span>: { <span class="text-blue-400">"visible"</span>: <span class="text-yellow-400">false</span> },
+      <span class="text-green-400">"s0-title"</span>: { <span class="text-blue-400">"visible"</span>: <span class="text-yellow-400">false</span> },
+      <span class="text-green-400">"s0-subtitle"</span>: { <span class="text-blue-400">"visible"</span>: <span class="text-yellow-400">false</span> }
+    }
+  },
+  <span class="text-blue-400">"slides"</span>: [
+    { <span class="text-blue-400">"type"</span>: <span class="text-green-400">"statement"</span>, <span class="text-blue-400">"tag"</span>: <span class="text-green-400">"…"</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"…"</span>, <span class="text-blue-400">"subtitle"</span>: <span class="text-green-400">"…"</span> }
+  ]
+}</code></pre>
+
+                        <h2>Option 2: elementControl.defaultVisible</h2>
+                        <p>To hide <strong>all</strong> elements on all slides: pass
+                            <code>elementControl: { defaultVisible: false }</code> when creating Lumina. Those you set in
+                            <code>meta.initialElementState</code> override this (e.g. to keep some visible).
+                        </p>
+
+                        <pre><code>const engine = new Lumina('#app', {
+  <span class="text-blue-400">elementControl</span>: { <span class="text-blue-400">defaultVisible</span>: <span class="text-yellow-400">false</span> }
+});
+engine.load(deck);</code></pre>
+
+                        <h2>Automatic reveal in sequence</h2>
+                        <p>After loading the deck, use <code>engine.element(id).show()</code> (and optionally
+                            <code>.animate()</code>) to reveal. With <code>ready</code> and <code>setTimeout</code> you can
+                            chain the sequence:
+                        </p>
+
+                        <pre><code>engine.<span class="text-yellow-400">on</span>('ready', () => {
+  const ids = [<span class="text-green-400">'s0-tag'</span>, <span class="text-green-400">'s0-title'</span>, <span class="text-green-400">'s0-subtitle'</span>];
+  ids.forEach((id, i) => {
+    setTimeout(() => engine.element(id).show(), (i + 1) * 700);
+  });
+});
+engine.load(deck);</code></pre>
+
+                        <h2>Step-by-step: using the controller correctly (avoiding null elements)</h2>
+                        <p><code>engine.getElementById(id)</code> returns <code>null</code> if the element is not mounted (e.g. its slide is not the current one). If you call <code>engine.element(id).show()</code> or <code>.animate()</code> when the node is null, the library does nothing with GSAP (no-op) and no error is thrown; but the effect is not visible. For reveal to work, the element must exist in the DOM when you call <code>.show()</code>. This is the pattern that works.</p>
+
+                        <p><strong>1. Register <code>ready</code> and <code>slideChange</code> before <code>engine.load(deck)</code>.</strong> That way, when the deck finishes loading or you change slides, your callbacks are already registered.</p>
+
+                        <p><strong>2. In <code>ready</code>:</strong> the first slide is already mounted. Use <code>setTimeout</code> before each <code>engine.element(id).show()</code> to allow time for render and transitions (e.g. 700 ms per element).</p>
+
+                        <p><strong>3. In <code>slideChange</code>:</strong> when entering a slide with controlled elements, that slide's DOM mounts on change. Use <code>setTimeout</code> again before each <code>.show()</code> for that slide.</p>
+
+                        <p><strong>4. Order in your code:</strong> <code>new Lumina(...)</code> → <code>engine.on('ready', ...)</code> → <code>engine.on('slideChange', ...)</code> → <code>engine.load(deck)</code>.</p>
+
+                        <p>Full example (used by the <code>layout-element-control</code> demo):</p>
+
+                        <pre><code>const engine = new Lumina(<span class="text-green-400">'#app'</span>, { <span class="text-blue-400">loop</span>: <span class="text-yellow-400">true</span>, <span class="text-blue-400">navigation</span>: <span class="text-yellow-400">true</span> });
+
+<span class="text-gray-500">// 1. ready: first slide mounted; setTimeout so the DOM is ready</span>
+engine.<span class="text-yellow-400">on</span>(<span class="text-green-400">'ready'</span>, () => {
+  [<span class="text-green-400">'s0-tag'</span>, <span class="text-green-400">'s0-title'</span>, <span class="text-green-400">'s0-subtitle'</span>].forEach((id, i) => {
+    setTimeout(() => engine.element(id).show(), (i + 1) * 700);
+  });
+});
+
+<span class="text-gray-500">// 2. slideChange: on slide 1, reveal its elements with the same delay</span>
+engine.<span class="text-yellow-400">on</span>(<span class="text-green-400">'slideChange'</span>, ({ index }) => {
+  if (index === 1) {
+    [<span class="text-green-400">'s1-tag'</span>, <span class="text-green-400">'s1-title'</span>, <span class="text-green-400">'s1-subtitle'</span>].forEach((id, i) => {
+      setTimeout(() => engine.element(id).show(), (i + 1) * 700);
+    });
+  }
+});
+
+<span class="text-gray-500">// 3. Load always after the listeners</span>
+engine.load(deck);</code></pre>
+
+                        <p>With this order and the <code>setTimeout</code>s, elements exist when <code>.show()</code> is called and you avoid null references in animations.</p>
+
+                        <p class="not-prose mt-8">
+                            <router-link to="/deck/layout-element-control"
+                                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-blue-500/20 text-blue-400 border border-blue-500/40 hover:bg-blue-500/30 transition font-medium">
+                                <i class="ph-thin ph-play-circle"></i> View demo: Element Control
+                            </router-link>
+                        </p>
+                    </div>
+
+                    <!-- ANIMATIONS: revealInSequence, presets, stagger -->
+                    <div v-else-if="activeSection === 'animations'">
+                        <h1>Animations</h1>
+                        <p class="lead">Control entrances with <code>revealInSequence</code>, built-in presets, and stagger modes. Use with <code>meta.initialElementState</code> or <code>elementControl.defaultVisible: false</code> to start hidden.</p>
+
+                        <h2>revealInSequence</h2>
+                        <p>Reveals slide elements one by one with optional stagger and animation. Register <code>ready</code> and <code>slideChange</code> before <code>load</code>; then call <code>engine.revealInSequence(slideIndex?, options)</code>.</p>
+
+                        <pre><code>engine.<span class="text-yellow-400">on</span>(<span class="text-green-400">'ready'</span>, () => engine.revealInSequence(<span class="text-yellow-400">0</span>, { <span class="text-blue-400">delayMs</span>: <span class="text-cyan-400">500</span>, <span class="text-blue-400">preset</span>: <span class="text-green-400">'fadeUp'</span> }));
+engine.<span class="text-yellow-400">on</span>(<span class="text-green-400">'slideChange'</span>, (e) => engine.revealInSequence(e.index, { <span class="text-blue-400">delayMs</span>: <span class="text-cyan-400">400</span> }));
+engine.load(deck);</code></pre>
+
+                        <p><strong>Options:</strong> <code>delayMs</code>, <code>staggerMode</code> (<code>sequential</code> | <code>center-out</code> | <code>ends-in</code> | <code>wave</code> | <code>random</code>), <code>preset</code>, <code>from</code>/<code>to</code>, <code>duration</code>, <code>ease</code>, <code>hideFirst</code>, <code>only</code>, <code>exclude</code>.</p>
+
+                        <h2>Presets</h2>
+                        <p>Use <code>preset</code> in <code>revealInSequence</code> or <code>element(id).animate({ preset: 'fadeUp' })</code>. Built-in: <code>fadeUp</code>, <code>fadeIn</code>, <code>scaleIn</code>, <code>slideLeft</code>, <code>slideRight</code>, <code>zoomIn</code>, <code>blurIn</code>, <code>spring</code>, <code>drop</code>, <code>fadeOut</code>.</p>
+
+                        <h2>Stagger modes</h2>
+                        <p><code>staggerMode</code> controls the order in which elements are revealed: <code>sequential</code> (default), <code>center-out</code>, <code>ends-in</code>, <code>wave</code>, <code>random</code>. For <code>random</code>, use <code>randomSeed</code> for deterministic order.</p>
+
+                        <p class="not-prose mt-8 flex flex-wrap gap-4">
+                            <router-link to="/deck/animation-presets"
+                                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-blue-500/20 text-blue-400 border border-blue-500/40 hover:bg-blue-500/30 transition font-medium">
+                                <i class="ph-thin ph-play-circle"></i> Animation: Presets
+                            </router-link>
+                            <router-link to="/deck/animation-stagger"
+                                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-blue-500/20 text-blue-400 border border-blue-500/40 hover:bg-blue-500/30 transition font-medium">
+                                <i class="ph-thin ph-play-circle"></i> Animation: Stagger
+                            </router-link>
+                        </p>
+                    </div>
+
+                    <!-- TIMELINE (Remotion-style keyframes) -->
+                    <div v-else-if="activeSection === 'timeline-keyframes'">
+                        <h1>Timeline (Remotion-style keyframes)</h1>
+                        <p class="lead">Drive element state from a progress 0–1 with <code>slide.timelineTracks</code>. Use <code>engine.seekTo(progress)</code> to scrub or <code>engine.playTimeline(duration)</code> to play. Works with any layout; the <code>free</code> layout is for absolutely positioned storytelling.</p>
+
+                        <h2>timelineTracks</h2>
+                        <p>Per-slide, define <code>timelineTracks: { [elementId]: { "0": { opacity, x, y, scale, rotate?, visible? }, "0.3": {...}, "1": {...} } }</code>. Keys are progress strings 0–1; values are interpolated linearly. Supported: <code>opacity</code>, <code>x</code>, <code>y</code>, <code>scale</code>, <code>rotate</code>, <code>visible</code>.</p>
+
+                        <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"statement"</span>,
+  <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Keyframes"</span>,
+  <span class="text-blue-400">"subtitle"</span>: <span class="text-green-400">"Scrub or play."</span>,
+  <span class="text-blue-400">"timelineTracks"</span>: {
+    <span class="text-green-400">"s0-tag"</span>: { <span class="text-green-400">"0"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">0</span>, <span class="text-blue-400">y</span>: <span class="text-cyan-400">20</span> }, <span class="text-green-400">"0.2"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">1</span>, <span class="text-blue-400">y</span>: <span class="text-cyan-400">0</span> }, <span class="text-green-400">"1"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">1</span> } },
+    <span class="text-green-400">"s0-title"</span>: { <span class="text-green-400">"0"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">0</span>, <span class="text-blue-400">x</span>: <span class="text-cyan-400">-30</span> }, <span class="text-green-400">"0.4"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">1</span>, <span class="text-blue-400">x</span>: <span class="text-cyan-400">0</span> }, <span class="text-green-400">"1"</span>: { <span class="text-blue-400">opacity</span>: <span class="text-cyan-400">1</span> } }
+  }
+}</code></pre>
+
+                        <h2>API</h2>
+                        <ul>
+                            <li><code>engine.seekTo(progress, slideIndex?)</code> — scrub to 0–1. Updates <code>engine.timelineProgress</code>.</li>
+                            <li><code>engine.playTimeline(durationSeconds?, slideIndex?)</code> — returns <code>[Promise, cancel]</code>. Plays from 0 to 1 over the given seconds (default 5).</li>
+                            <li><code>element(id).animateToProgress(progress, keyframes)</code> — apply keyframes for one element manually.</li>
+                        </ul>
+
+                        <h2>Free layout</h2>
+                        <p><code>type: "free"</code> with <code>elements: [{ type: "text"|"image"|"box", text?, src?, width?, height?, fontSize?, color?, backgroundColor?, ... }]</code>. Elements are absolutely positioned; <code>x</code>, <code>y</code> in <code>timelineTracks</code> act as translate. Ids: <code>s{N}-elements-0</code>, <code>s{N}-elements-1</code>, etc.</p>
+
+                        <p class="not-prose mt-8">
+                            <router-link to="/deck/animation-timeline"
+                                class="inline-flex items-center gap-2 px-5 py-2.5 rounded-xl bg-blue-500/20 text-blue-400 border border-blue-500/40 hover:bg-blue-500/30 transition font-medium">
+                                <i class="ph-thin ph-play-circle"></i> Animation: Timeline (keyframes)
+                            </router-link>
+                        </p>
+                    </div>
+
+                    <!-- THEMING -->
+                    <div v-else-if="activeSection === 'theming'">
+                        <h1>Theming</h1>
+                        <p class="lead">Customize colors, fonts, and visual style with built-in presets or create your
+                            own theme.</p>
+
+                        <!-- Theme Presets Section -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Built-in Presets</h2>
+                            <p class="text-white/60 mb-8">Lumina comes with 8 beautiful theme presets. Pass the preset
+                                name as a string to instantly apply a complete look.</p>
+
+                            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 not-prose">
+                                <!-- Default Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-blue-500/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center" style="background: #030303;">
+                                        <span class="text-2xl font-bold" style="color: #3b82f6;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">default</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #3b82f6;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #030303;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Clean blue on dark. Professional and modern.
+                                        </p>
+                                    </div>
+                                </div>
+
+                                <!-- Ocean Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-cyan-500/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center" style="background: #0f172a;">
+                                        <span class="text-2xl font-bold" style="color: #06b6d4;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">ocean</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #06b6d4;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #0f172a;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Cyan accents on slate. Calm and focused.</p>
+                                    </div>
+                                </div>
+
+                                <!-- Midnight Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-indigo-500/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center" style="background: #000000;">
+                                        <span class="text-2xl font-bold" style="color: #6366f1;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">midnight</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #6366f1;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #000000;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Indigo on pure black. Bold and dramatic.</p>
+                                    </div>
+                                </div>
+
+                                <!-- Forest Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-emerald-500/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center" style="background: #022c22;">
+                                        <span class="text-2xl font-bold" style="color: #10b981;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">forest</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #10b981;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #022c22;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Emerald green tones. Natural and fresh.</p>
+                                    </div>
+                                </div>
+
+                                <!-- Cyber Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-pink-500/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center" style="background: #18181b;">
+                                        <span class="text-2xl font-bold"
+                                            style="color: #f472b6; font-family: 'Orbitron', sans-serif;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">cyber</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #f472b6;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #18181b;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Neon pink futuristic. Sci-fi vibes.</p>
+                                    </div>
+                                </div>
+
+                                <!-- Latte Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-amber-500/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center" style="background: #fffbeb;">
+                                        <span class="text-2xl font-bold"
+                                            style="color: #d97706; font-family: 'Playfair Display', serif;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">latte</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #d97706;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #fffbeb;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Light mode with warm amber. Elegant.</p>
+                                    </div>
+                                </div>
+
+                                <!-- Sunset Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-orange-500/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center"
+                                        style="background: linear-gradient(135deg, #1c1917 0%, #292524 100%);">
+                                        <span class="text-2xl font-bold"
+                                            style="background: linear-gradient(to right, #f97316, #f43f5e); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">sunset</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #f97316;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #f43f5e;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Orange to rose gradient. Warm and vibrant.</p>
+                                    </div>
+                                </div>
+
+                                <!-- Monochrome Theme -->
+                                <div
+                                    class="rounded-xl overflow-hidden border border-white/10 group hover:border-white/50 transition-all duration-300">
+                                    <div class="h-32 p-6 flex items-center justify-center" style="background: #000000;">
+                                        <span class="text-2xl font-bold" style="color: #ffffff;">Lumina</span>
+                                    </div>
+                                    <div class="p-4 bg-black/50">
+                                        <div class="flex items-center justify-between mb-2">
+                                            <h3 class="font-bold text-white">monochrome</h3>
+                                            <div class="flex gap-1">
+                                                <span class="w-4 h-4 rounded-full" style="background: #ffffff;"></span>
+                                                <span class="w-4 h-4 rounded-full" style="background: #000000;"></span>
+                                            </div>
+                                        </div>
+                                        <p class="text-xs text-white/50">Pure black and white. Timeless elegance.</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Using Presets -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Using a Preset</h2>
+                            <p class="text-white/60 mb-4">Pass the preset name as a string to the <code>theme</code>
+                                option:</p>
+
+                            <pre><code><span class="text-blue-400">const</span> engine = <span class="text-blue-400">new</span> Lumina('#app', {
+  theme: <span class="text-green-400">'ocean'</span>  <span class="text-gray-500">// 'midnight', 'forest', 'cyber', 'latte', 'sunset', 'monochrome'</span>
+});
+
+engine.load(myDeck);</code></pre>
+                        </div>
+
+                        <!-- CSS Variables -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Complete Theme Configuration</h2>
+                            <p class="text-white/60 mb-8">Lumina v9 introduces 80+ CSS custom properties for full visual
+                                customization.
+                                Configure via <code>themeConfig</code> in your deck JSON or engine options.</p>
+
+                            <!-- COLORS SECTION -->
+                            <div class="mb-12">
+                                <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
+                                    <span
+                                        class="w-8 h-8 rounded-lg bg-blue-500/20 flex items-center justify-center text-blue-400">🎨</span>
+                                    Colors (25+ tokens)
+                                </h3>
+                                <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                    <table class="w-full text-left text-sm text-gray-400">
+                                        <thead class="bg-white/5 text-white font-bold">
+                                            <tr>
+                                                <th class="p-3 border-b border-white/10">Property</th>
+                                                <th class="p-3 border-b border-white/10">CSS Variable</th>
+                                                <th class="p-3 border-b border-white/10">Description</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="divide-y divide-white/5">
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-blue-400 bg-blue-500/5 font-bold">Core
+                                                    Colors</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">primary</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-primary</td>
+                                                <td class="p-3">Main brand/accent color</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">secondary</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-secondary</td>
+                                                <td class="p-3">Complementary brand color</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">accent</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-accent</td>
+                                                <td class="p-3">Tertiary/accent highlights</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">background</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-background</td>
+                                                <td class="p-3">Main slide background</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">surface</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-surface</td>
+                                                <td class="p-3">Cards, panels, elevated surfaces</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">text</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-text</td>
+                                                <td class="p-3">Primary text color</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">textSecondary</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-text-secondary
+                                                </td>
+                                                <td class="p-3">Secondary body text</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">muted</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-muted</td>
+                                                <td class="p-3">Subdued text, captions</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-yellow-400 bg-yellow-500/5 font-bold">
+                                                    Semantic Colors</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">success</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-success</td>
+                                                <td class="p-3">Positive actions (#22c55e)</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">warning</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-warning</td>
+                                                <td class="p-3">Caution states (#eab308)</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">danger</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-danger</td>
+                                                <td class="p-3">Errors, destructive (#ef4444)</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">info</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-info</td>
+                                                <td class="p-3">Informational highlights</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-purple-400 bg-purple-500/5 font-bold">UI
+                                                    Colors</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">border</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-border</td>
+                                                <td class="p-3">Default border color</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">borderSubtle</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-color-border-subtle
+                                                </td>
+                                                <td class="p-3">Subtle/light borders</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">shadow</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-shadow-color</td>
+                                                <td class="p-3">Shadow color for elevation</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-pink-400 bg-pink-500/5 font-bold">Gradient
+                                                    Colors</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">gradientFrom</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-gradient-from</td>
+                                                <td class="p-3">Gradient start color</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">gradientVia</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-gradient-via</td>
+                                                <td class="p-3">Gradient middle (optional)</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">gradientTo</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-gradient-to</td>
+                                                <td class="p-3">Gradient end color</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+
+                            <!-- EFFECTS SECTION -->
+                            <div class="mb-12">
+                                <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
+                                    <span
+                                        class="w-8 h-8 rounded-lg bg-purple-500/20 flex items-center justify-center text-purple-400">✨</span>
+                                    Effects
+                                </h3>
+                                <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                    <table class="w-full text-left text-sm text-gray-400">
+                                        <thead class="bg-white/5 text-white font-bold">
+                                            <tr>
+                                                <th class="p-3 border-b border-white/10">Property</th>
+                                                <th class="p-3 border-b border-white/10">Type</th>
+                                                <th class="p-3 border-b border-white/10">Values</th>
+                                                <th class="p-3 border-b border-white/10">Default</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="divide-y divide-white/5">
+                                            <tr>
+                                                <td colspan="4"
+                                                    class="p-2 text-xs text-pink-400 bg-pink-500/5 font-bold">Gradients
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">useGradients</td>
+                                                <td class="p-3 text-purple-400">boolean</td>
+                                                <td class="p-3">true / false</td>
+                                                <td class="p-3">true</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">gradientDirection</td>
+                                                <td class="p-3 text-purple-400">enum</td>
+                                                <td class="p-3 font-mono text-xs">'to-t' | 'to-b' | 'to-l' | 'to-r' |
+                                                    'to-tl' | 'to-tr' | 'to-bl' | 'to-br'</td>
+                                                <td class="p-3">'to-br'</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="4"
+                                                    class="p-2 text-xs text-blue-400 bg-blue-500/5 font-bold">Shadows
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">useShadows</td>
+                                                <td class="p-3 text-purple-400">boolean</td>
+                                                <td class="p-3">true / false</td>
+                                                <td class="p-3">true</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">shadowIntensity</td>
+                                                <td class="p-3 text-purple-400">enum</td>
+                                                <td class="p-3 font-mono text-xs">'none' | 'sm' | 'md' | 'lg' | 'xl' |
+                                                    '2xl'</td>
+                                                <td class="p-3">'md'</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">shadowColor</td>
+                                                <td class="p-3 text-purple-400">string</td>
+                                                <td class="p-3">Any CSS color (rgba works best)</td>
+                                                <td class="p-3">rgba(0,0,0,0.25)</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="4"
+                                                    class="p-2 text-xs text-cyan-400 bg-cyan-500/5 font-bold">
+                                                    Glassmorphism</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">useGlass</td>
+                                                <td class="p-3 text-purple-400">boolean</td>
+                                                <td class="p-3">true / false (frosted glass panels)</td>
+                                                <td class="p-3">true</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">glassOpacity</td>
+                                                <td class="p-3 text-purple-400">number</td>
+                                                <td class="p-3">0 to 1 (panel background opacity)</td>
+                                                <td class="p-3">0.03</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">glassBlur</td>
+                                                <td class="p-3 text-purple-400">string</td>
+                                                <td class="p-3">CSS blur value (e.g., '20px')</td>
+                                                <td class="p-3">'20px'</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">glassBorderOpacity</td>
+                                                <td class="p-3 text-purple-400">number</td>
+                                                <td class="p-3">0 to 1 (subtle border opacity)</td>
+                                                <td class="p-3">0.05</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="4"
+                                                    class="p-2 text-xs text-orange-400 bg-orange-500/5 font-bold">
+                                                    Ambient Orb</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">useOrb</td>
+                                                <td class="p-3 text-purple-400">boolean</td>
+                                                <td class="p-3">true / false (background glow)</td>
+                                                <td class="p-3">true</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">orbOpacity</td>
+                                                <td class="p-3 text-purple-400">number</td>
+                                                <td class="p-3">0 to 1</td>
+                                                <td class="p-3">0.4</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">orbBlur</td>
+                                                <td class="p-3 text-purple-400">string</td>
+                                                <td class="p-3">CSS blur value</td>
+                                                <td class="p-3">'120px'</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">orbSize</td>
+                                                <td class="p-3 text-purple-400">string</td>
+                                                <td class="p-3">CSS size (vw, vh, px, %)</td>
+                                                <td class="p-3">'60vw'</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="4"
+                                                    class="p-2 text-xs text-green-400 bg-green-500/5 font-bold">
+                                                    Animations</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">animationsEnabled</td>
+                                                <td class="p-3 text-purple-400">boolean</td>
+                                                <td class="p-3">Master toggle for all animations</td>
+                                                <td class="p-3">true</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">transitionDuration</td>
+                                                <td class="p-3 text-purple-400">string</td>
+                                                <td class="p-3">CSS duration (e.g., '0.3s')</td>
+                                                <td class="p-3">'0.3s'</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">transitionEasing</td>
+                                                <td class="p-3 text-purple-400">string</td>
+                                                <td class="p-3">CSS easing function</td>
+                                                <td class="p-3">cubic-bezier(0.16,1,0.3,1)</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">hoverScale</td>
+                                                <td class="p-3 text-purple-400">number</td>
+                                                <td class="p-3">Scale on hover (1.0 = no scale)</td>
+                                                <td class="p-3">1.05</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+
+                            <!-- COMPONENTS SECTION -->
+                            <div class="mb-12">
+                                <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
+                                    <span
+                                        class="w-8 h-8 rounded-lg bg-green-500/20 flex items-center justify-center text-green-400">🧩</span>
+                                    Component Tokens
+                                </h3>
+                                <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                    <table class="w-full text-left text-sm text-gray-400">
+                                        <thead class="bg-white/5 text-white font-bold">
+                                            <tr>
+                                                <th class="p-3 border-b border-white/10">Property</th>
+                                                <th class="p-3 border-b border-white/10">CSS Variable</th>
+                                                <th class="p-3 border-b border-white/10">Default</th>
+                                            </tr>
+                                        </thead>
+                                        <tbody class="divide-y divide-white/5">
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-blue-400 bg-blue-500/5 font-bold">Buttons
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">buttonRadius</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-button-radius</td>
+                                                <td class="p-3">9999px (pill)</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">buttonPadding</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-button-padding</td>
+                                                <td class="p-3">0.75rem 1.5rem</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">buttonFontWeight</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-button-font-weight</td>
+                                                <td class="p-3">700</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">buttonTextTransform</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-button-text-transform
+                                                </td>
+                                                <td class="p-3">none</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-purple-400 bg-purple-500/5 font-bold">Cards
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">cardRadius</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-card-radius</td>
+                                                <td class="p-3">1.5rem</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">cardPadding</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-card-padding</td>
+                                                <td class="p-3">2rem</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">cardBorderWidth</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-card-border-width</td>
+                                                <td class="p-3">1px</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-cyan-400 bg-cyan-500/5 font-bold">Timeline
+                                                </td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">timelineNodeSize</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-timeline-node-size</td>
+                                                <td class="p-3">1rem</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">timelineLineWidth</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-timeline-line-width
+                                                </td>
+                                                <td class="p-3">2px</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">timelineNodeColor</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-timeline-node-color
+                                                </td>
+                                                <td class="p-3">(uses primary)</td>
+                                            </tr>
+                                            <tr>
+                                                <td colspan="3"
+                                                    class="p-2 text-xs text-pink-400 bg-pink-500/5 font-bold">
+                                                    Tags/Badges</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">tagPadding</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-tag-padding</td>
+                                                <td class="p-3">0.25rem 1rem</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">tagRadius</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-tag-radius</td>
+                                                <td class="p-3">9999px</td>
+                                            </tr>
+                                            <tr>
+                                                <td class="p-3 font-mono text-green-400">tagFontSize</td>
+                                                <td class="p-3 font-mono text-white/50">--lumina-tag-font-size</td>
+                                                <td class="p-3">0.75rem</td>
+                                            </tr>
+                                        </tbody>
+                                    </table>
+                                </div>
+                            </div>
+
+                            <!-- TYPOGRAPHY SECTION -->
+                            <div class="mb-12">
+                                <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
+                                    <span
+                                        class="w-8 h-8 rounded-lg bg-yellow-500/20 flex items-center justify-center text-yellow-400">🔤</span>
+                                    Typography
+                                </h3>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div class="border border-white/10 rounded-lg p-4">
+                                        <h4 class="text-white font-bold mb-3">Font Families</h4>
+                                        <div class="space-y-2 text-sm">
+                                            <div><code class="text-green-400">heading</code>: <span
+                                                    class="text-white/60">Headings (default: Outfit)</span></div>
+                                            <div><code class="text-green-400">body</code>: <span
+                                                    class="text-white/60">Body text (default: Outfit)</span></div>
+                                            <div><code class="text-green-400">mono</code>: <span
+                                                    class="text-white/60">Code (default: monospace)</span></div>
+                                        </div>
+                                    </div>
+                                    <div class="border border-white/10 rounded-lg p-4">
+                                        <h4 class="text-white font-bold mb-3">Font Sizes (--lumina-text-*)</h4>
+                                        <div class="space-y-1 text-sm text-white/60">
+                                            <div>xs: 0.75rem | sm: 0.875rem | base: 1rem</div>
+                                            <div>lg: 1.125rem | xl: 1.25rem | 2xl: 1.5rem</div>
+                                            <div>3xl: 1.875rem | 4xl: 2.25rem | 5xl: 3rem</div>
+                                            <div>6xl: 3.75rem | 7xl: 4.5rem</div>
+                                        </div>
+                                    </div>
+                                    <div class="border border-white/10 rounded-lg p-4">
+                                        <h4 class="text-white font-bold mb-3">Font Weights (--lumina-font-weight-*)</h4>
+                                        <div class="space-y-1 text-sm text-white/60">
+                                            <div>light: 300 | normal: 400 | medium: 500</div>
+                                            <div>semibold: 600 | bold: 800 | extrabold: 900</div>
+                                        </div>
+                                    </div>
+                                    <div class="border border-white/10 rounded-lg p-4">
+                                        <h4 class="text-white font-bold mb-3">Line Heights (--lumina-leading-*)</h4>
+                                        <div class="space-y-1 text-sm text-white/60">
+                                            <div>tight: 1.1 | snug: 1.25 | normal: 1.5</div>
+                                            <div>relaxed: 1.625 | loose: 2</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- SPACING SECTION -->
+                            <div class="mb-12">
+                                <h3 class="text-xl font-bold text-white mb-4 flex items-center gap-2">
+                                    <span
+                                        class="w-8 h-8 rounded-lg bg-cyan-500/20 flex items-center justify-center text-cyan-400">📏</span>
+                                    Spacing & Border Radius
+                                </h3>
+                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                                    <div class="border border-white/10 rounded-lg p-4">
+                                        <h4 class="text-white font-bold mb-3">Spacing (--lumina-space-*)</h4>
+                                        <div class="space-y-1 text-sm text-white/60">
+                                            <div>none: 0 | xs: 0.25rem | sm: 0.5rem</div>
+                                            <div>md: 1rem | lg: 1.5rem | xl: 2rem</div>
+                                            <div>2xl: 3rem | 3xl: 4rem | 4xl: 6rem</div>
+                                        </div>
+                                    </div>
+                                    <div class="border border-white/10 rounded-lg p-4">
+                                        <h4 class="text-white font-bold mb-3">Border Radius (--lumina-radius-*)</h4>
+                                        <div class="space-y-1 text-sm text-white/60">
+                                            <div>none: 0 | sm: 0.25rem | md: 0.5rem</div>
+                                            <div>lg: 0.75rem | xl: 1rem | 2xl: 1.5rem</div>
+                                            <div>3xl: 2rem | full: 9999px</div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- JSON Example -->
+                            <div class="mt-8">
+                                <h3 class="text-xl font-bold text-white mb-4">Full themeConfig Example</h3>
+                                <pre><code><span class="text-gray-500">// In your deck JSON</span>
+{
+  <span class="text-blue-400">"meta"</span>: {
+    <span class="text-blue-400">"theme"</span>: <span class="text-green-400">"default"</span>,
+    <span class="text-blue-400">"themeConfig"</span>: {
+      <span class="text-blue-400">"colors"</span>: {
+        <span class="text-blue-400">"primary"</span>: <span class="text-green-400">"#8b5cf6"</span>,
+        <span class="text-blue-400">"secondary"</span>: <span class="text-green-400">"#ec4899"</span>,
+        <span class="text-blue-400">"gradientFrom"</span>: <span class="text-green-400">"#8b5cf6"</span>,
+        <span class="text-blue-400">"gradientTo"</span>: <span class="text-green-400">"#ec4899"</span>
+      },
+      <span class="text-blue-400">"effects"</span>: {
+        <span class="text-blue-400">"useGradients"</span>: <span class="text-yellow-400">true</span>,
+        <span class="text-blue-400">"useGlass"</span>: <span class="text-yellow-400">true</span>,
+        <span class="text-blue-400">"glassOpacity"</span>: <span class="text-yellow-400">0.05</span>,
+        <span class="text-blue-400">"useOrb"</span>: <span class="text-yellow-400">true</span>,
+        <span class="text-blue-400">"orbOpacity"</span>: <span class="text-yellow-400">0.4</span>
+      },
+      <span class="text-blue-400">"components"</span>: {
+        <span class="text-blue-400">"cardRadius"</span>: <span class="text-green-400">"1.5rem"</span>,
+        <span class="text-blue-400">"buttonRadius"</span>: <span class="text-green-400">"9999px"</span>
+      }
+    }
+  }
+}</code></pre>
+                            </div>
+                        </div>
+
+                        <!-- Custom Theme Object -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Custom Theme Configuration</h2>
+                            <p class="text-white/60 mb-4">Pass a configuration object for full control over colors and
+                                fonts:</p>
+
+                            <pre><code><span class="text-blue-400">const</span> engine = <span class="text-blue-400">new</span> Lumina('#app', {
+  theme: {
+    colors: {
+      primary: <span class="text-green-400">'#ec4899'</span>,      <span class="text-gray-500">// Pink accent</span>
+      background: <span class="text-green-400">'#1a1a2e'</span>,  <span class="text-gray-500">// Dark purple bg</span>
+      text: <span class="text-green-400">'#eaeaea'</span>,        <span class="text-gray-500">// Light text</span>
+      muted: <span class="text-green-400">'#888888'</span>        <span class="text-gray-500">// Subdued text</span>
+    },
+    fonts: {
+      heading: <span class="text-green-400">'Outfit, sans-serif'</span>,
+      body: <span class="text-green-400">'Inter, sans-serif'</span>,
+      mono: <span class="text-green-400">'Fira Code, monospace'</span>
+    }
+  }
+});</code></pre>
+                        </div>
+
+                        <!-- Partial Override -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Partial Overrides</h2>
+                            <p class="text-white/60 mb-4">You don't need to specify every property. Lumina merges your
+                                values with the default theme:</p>
+
+                            <pre><code><span class="text-gray-500">// Only change the primary color</span>
+<span class="text-blue-400">const</span> engine = <span class="text-blue-400">new</span> Lumina('#app', {
+  theme: {
+    colors: {
+      primary: <span class="text-green-400">'#f59e0b'</span>  <span class="text-gray-500">// Amber accent</span>
+    }
+  }
+});
+
+<span class="text-gray-500">// Everything else uses defaults!</span></code></pre>
+                        </div>
+
+                        <!-- Font Loading -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Custom Fonts</h2>
+                            <p class="text-white/60 mb-4">For custom fonts, load them via Google Fonts or your own
+                                stylesheet first:</p>
+
+                            <pre
+                                class="language-html"><code><span class="text-gray-500">&lt;!-- In your HTML head --&gt;</span>
+<span class="text-blue-400">&lt;link</span> rel=<span class="text-green-400">"preconnect"</span> href=<span class="text-green-400">"https://fonts.googleapis.com"</span><span class="text-blue-400">&gt;</span>
+<span class="text-blue-400">&lt;link</span> href=<span class="text-green-400">"https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Rajdhani&display=swap"</span> rel=<span class="text-green-400">"stylesheet"</span><span class="text-blue-400">&gt;</span></code></pre>
+
+                            <p class="text-white/60 mt-4 mb-4">Then reference them in your theme config:</p>
+
+                            <pre><code><span class="text-blue-400">const</span> engine = <span class="text-blue-400">new</span> Lumina('#app', {
+  theme: {
+    fonts: {
+      heading: <span class="text-green-400">'Outfit, sans-serif'</span>,
+      body: <span class="text-green-400">'Rajdhani, sans-serif'</span>
+    }
+  }
+});</code></pre>
+                        </div>
+
+                        <!-- Tips -->
+                        <div class="mt-8 p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
+                            <h4 class="text-yellow-400 font-bold mb-2"><i class="fa-solid fa-lightbulb mr-2"></i>Pro
+                                Tips</h4>
+                            <ul class="text-sm text-yellow-200/80 space-y-2 m-0 list-none">
+                                <li>🎨 <strong>Brand colors:</strong> Set <code>primary</code> to your brand color for
+                                    instant recognition</li>
+                                <li>🌙 <strong>Dark vs Light:</strong> Use <code>latte</code> preset for light mode
+                                    presentations</li>
+                                <li>📱 <strong>Accessibility:</strong> Ensure sufficient contrast between
+                                    <code>text</code> and <code>background</code>
+                                </li>
+                                <li>🔤 <strong>Performance:</strong> Only load font weights you actually use (400, 700)
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- SPEAKER NOTES -->
+                    <div v-else-if="activeSection === 'speaker-notes'">
+                        <h1>Speaker Notes</h1>
+                        <p class="lead">Open a separate presenter view with notes, timer, and bidirectional navigation
+                            controls.</p>
+
+                        <h2>Adding Notes to Slides</h2>
+                        <p>Add the <code>notes</code> property to any slide. Notes are only visible in the presenter
+                            view, not on the main display.</p>
+
+                        <pre><code>{
+  <span class="text-blue-400">"type"</span>: <span class="text-green-400">"statement"</span>,
+  <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Welcome"</span>,
+  <span class="text-blue-400">"subtitle"</span>: <span class="text-green-400">"An introduction to our platform"</span>,
+  <span class="text-blue-400">"notes"</span>: <span class="text-green-400">"Greet the audience. Mention key stakeholders. Time: 2 minutes."</span>
+}</code></pre>
+
+                        <h2>Opening the Presenter View</h2>
+                        <p>Call <code>openSpeakerNotes()</code> on your Lumina instance to open the presenter window.
+                        </p>
+
+                        <pre><code><span class="text-blue-400">const</span> engine = <span class="text-blue-400">new</span> Lumina('#app');
+engine.load(deckData);
+
+<span class="text-gray-500">// Open presenter view</span>
+engine.<span class="text-yellow-400">openSpeakerNotes</span>();
+
+<span class="text-gray-500">// Check if open</span>
+<span class="text-blue-400">if</span> (engine.isSpeakerNotesOpen) {
+    console.log('Presenter view active');
+}
+
+<span class="text-gray-500">// Close programmatically</span>
+engine.<span class="text-yellow-400">closeSpeakerNotes</span>();</code></pre>
+
+                        <h3>Presenter View Features</h3>
+                        <ul>
+                            <li><strong>Current Notes</strong> — Formatted notes for the current slide</li>
+                            <li><strong>Next Slide Preview</strong> — Title and type of the upcoming slide</li>
+                            <li><strong>Timer</strong> — Start/pause/reset presentation timer</li>
+                            <li><strong>Navigation</strong> — Synced controls (changes reflect in main window)</li>
+                            <li><strong>Connection Status</strong> — Visual indicator of sync state</li>
+                        </ul>
+
+                        <h3>Keyboard Shortcuts (Presenter View)</h3>
+                        <div class="overflow-x-auto border border-white/10 rounded-lg my-6">
+                            <table class="w-full text-left text-sm text-gray-400">
+                                <thead class="bg-white/5 text-white font-bold">
+                                    <tr>
+                                        <th class="p-3 border-b border-white/10">Key</th>
+                                        <th class="p-3 border-b border-white/10">Action</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="divide-y divide-white/5">
+                                    <tr>
+                                        <td class="p-3 font-mono">→ / Space / Enter</td>
+                                        <td class="p-3">Next slide</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="p-3 font-mono">← / Backspace</td>
+                                        <td class="p-3">Previous slide</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="p-3 font-mono">T</td>
+                                        <td class="p-3">Toggle timer</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="p-3 font-mono">R</td>
+                                        <td class="p-3">Reset timer</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+
+                        <div class="mt-8 p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+                            <h4 class="text-blue-400 font-bold mb-2"><i class="fa-solid fa-lightbulb mr-2"></i>Pro Tip
+                            </h4>
+                            <p class="text-sm text-blue-200/80 m-0">Position the presenter window on your secondary
+                                monitor while the presentation runs on the main display. Navigation from either window
+                                stays synchronized.</p>
+                        </div>
+                    </div>
+
+
+                    <!-- AGENTS: INTRO -->
+                    <div v-else-if="activeSection === 'agents-intro'">
+                        <h1>The Agent Protocol</h1>
+                        <p class="lead">Lumina is the first presentation engine designed for <strong>Agentic
+                                AI</strong>.</p>
+                        <p>Large Language Models (LLMs) are great at "What" (Content) but struggle with "How"
+                            (Pixel-perfect CSS).
+                            Lumina solves this by acting as a <strong>Semantic Interface Layer</strong>.</p>
+
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-8 my-12 not-prose">
+                            <div
+                                class="bg-gray-900 border border-purple-500/20 rounded-xl p-8 relative overflow-hidden">
+                                <div class="absolute top-0 right-0 p-4 opacity-20">
+                                    <i class="fa-solid fa-robot text-6xl text-purple-500"></i>
+                                </div>
+                                <h3 class="text-purple-400 font-bold mb-4">The Agent's Job</h3>
+                                <ul class="space-y-3 text-sm text-gray-400">
+                                    <li class="flex gap-2"><i class="fa-solid fa-check text-green-500"></i> Generate
+                                        Text Content</li>
+                                    <li class="flex gap-2"><i class="fa-solid fa-check text-green-500"></i> Determine
+                                        Structure</li>
+                                    <li class="flex gap-2"><i class="fa-solid fa-check text-green-500"></i> Choose
+                                        Semantic Layouts</li>
+                                </ul>
+                            </div>
+                            <div class="bg-gray-900 border border-blue-500/20 rounded-xl p-8 relative overflow-hidden">
+                                <div class="absolute top-0 right-0 p-4 opacity-20">
+                                    <i class="fa-solid fa-layer-group text-6xl text-blue-500"></i>
+                                </div>
+                                <h3 class="text-blue-400 font-bold mb-4">Lumina's Job</h3>
+                                <ul class="space-y-3 text-sm text-gray-400">
+                                    <li class="flex gap-2"><i class="fa-solid fa-check text-blue-500"></i> 60fps
+                                        Animations</li>
+                                    <li class="flex gap-2"><i class="fa-solid fa-check text-blue-500"></i> Responsive
+                                        Typography</li>
+                                    <li class="flex gap-2"><i class="fa-solid fa-check text-blue-500"></i> Interactive
+                                        State</li>
+                                </ul>
+                            </div>
+                        </div>
+
+                        <h2>The Protocol</h2>
+                        <p>Agents communicate with Lumina via a JSON format that is strict enough for deterministic
+                            rendering but loose enough for LLMs.</p>
+                    </div>
+
+                    <!-- AGENTS: TOKENS -->
+                    <div v-else-if="activeSection === 'agents-tokens'">
+                        <h1>Token Optimization</h1>
+                        <p class="lead">Reduce output size with short property aliases. Less characters = faster
+                            rendering and lower costs.</p>
+
+                        <div class="not-prose grid gap-6 mt-8">
+                            <div class="bg-[#0A0A0A] border border-white/10 rounded-xl p-6">
+                                <h3 class="text-sm font-bold text-gray-500 uppercase tracking-widest mb-4">Standard JSON
+                                    <span class="text-white/30 font-normal normal-case ml-2">~95 characters</span>
+                                </h3>
+                                <pre class="!mb-0 !p-0 !bg-transparent !border-none"><code>{
+  "type": "statement",
+  "title": "Quarterly Review",
+  "subtitle": "Growth is exceeding expectations."
+}</code></pre>
+                            </div>
+
+                            <div class="bg-[#0A0A0A] border border-green-500/20 rounded-xl p-6 relative">
+                                <span
+                                    class="absolute top-4 right-4 text-xs font-bold text-green-400 bg-green-500/10 px-2 py-1 rounded">
+                                    ~25% Shorter
+                                </span>
+                                <h3 class="text-sm font-bold text-gray-500 uppercase tracking-widest mb-4">Optimized
+                                    JSON <span class="text-white/30 font-normal normal-case ml-2">~70 characters</span>
+                                </h3>
+                                <pre class="!mb-0 !p-0 !bg-transparent !border-none"><code>{
+  "type": "statement",
+  "t": "Quarterly Review",
+  "s": "Growth is exceeding expectations."
+}</code></pre>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Supported Aliases</h2>
+                            <p class="text-white/60 mb-4">Both full property names and aliases work interchangeably. Mix
+                                and match as needed.</p>
+
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Full Key</th>
+                                            <th class="p-3 border-b border-white/10">Alias</th>
+                                            <th class="p-3 border-b border-white/10">Used In</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono">title</td>
+                                            <td class="p-3 font-mono text-green-400">t</td>
+                                            <td class="p-3 text-white/50">All layouts</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">subtitle</td>
+                                            <td class="p-3 font-mono text-green-400">s</td>
+                                            <td class="p-3 text-white/50">Statement, Timeline, Steps</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">description</td>
+                                            <td class="p-3 font-mono text-green-400">d</td>
+                                            <td class="p-3 text-white/50">Features, Timeline items, Steps items</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">features</td>
+                                            <td class="p-3 font-mono text-green-400">fs</td>
+                                            <td class="p-3 text-white/50">Features layout</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">timeline</td>
+                                            <td class="p-3 font-mono text-green-400">tl</td>
+                                            <td class="p-3 text-white/50">Timeline layout</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">steps</td>
+                                            <td class="p-3 font-mono text-green-400">st</td>
+                                            <td class="p-3 text-white/50">Steps layout</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">paragraphs</td>
+                                            <td class="p-3 font-mono text-green-400">p</td>
+                                            <td class="p-3 text-white/50">Half layout</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">image</td>
+                                            <td class="p-3 font-mono text-green-400">img</td>
+                                            <td class="p-3 text-white/50">Half layout</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono">imageSide</td>
+                                            <td class="p-3 font-mono text-green-400">side</td>
+                                            <td class="p-3 text-white/50">Half layout</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="mt-8 p-4 bg-blue-500/10 border border-blue-500/20 rounded-lg">
+                            <h4 class="text-blue-400 font-bold mb-2"><i class="fa-solid fa-info-circle mr-2"></i>How It
+                                Works</h4>
+                            <p class="text-sm text-blue-200/80 m-0">Lumina's normalizer automatically expands aliases to
+                                full property names before rendering. You can use standard JSON for readability or
+                                aliases for efficiency—both produce identical results.</p>
+                        </div>
+                    </div>
+
+                    <!-- AGENTS: STREAMING -->
+                    <div v-else-if="activeSection === 'agents-streaming'">
+                        <h1>Streaming & Realtime</h1>
+                        <p>Lumina enables a <strong>"Type & See"</strong> experience. Using our partial parser, you can
+                            feed raw LLM streams directly into the engine.</p>
+
+                        <div class="not-prose my-12">
+                            <div
+                                class="bg-[#050505] border border-white/10 rounded-2xl overflow-hidden shadow-2xl flex flex-col h-[800px] relative group">
+
+                                <!-- CTA Overlay (Top Right) -->
+                                <div class="absolute top-4 right-4 z-20">
+                                    <button @click="runDemo"
+                                        class="px-5 py-1.5 rounded-full bg-blue-500 hover:bg-blue-400 text-white font-bold text-xs shadow-lg shadow-blue-500/20 transition-all transform hover:scale-105 flex items-center gap-2">
+                                        <i class="fa-solid fa-play"></i> Simulate AI Stream
+                                    </button>
+                                </div>
+
+                                <!-- Editor (Top, Fixed Height) -->
+                                <div
+                                    class="w-full h-48 flex flex-col bg-gray-900 border-b border-white/10 relative z-10">
+                                    <div
+                                        class="bg-white/5 px-4 py-2 text-xs font-bold text-white/50 flex justify-between items-center">
+                                        <span>LLM JSON OUTPUT</span>
+                                        <span class="text-xs text-white/20 mr-32" v-if="demoStarted">Receiving
+                                            Tokens...</span>
+                                    </div>
+                                    <textarea v-model="demoInput"
+                                        class="flex-1 bg-transparent p-6 font-mono text-sm text-green-400 resize-none focus:outline-none"
+                                        placeholder='Waiting for tokens...'></textarea>
+                                </div>
+
+                                <!-- Preview (Bottom, Flex) -->
+                                <div class="w-full flex-1 relative bg-black min-h-[300px]">
+                                    <div id="streaming-demo-container" class="w-full h-full"></div>
+                                    <div v-if="!demoStarted"
+                                        class="absolute inset-0 flex items-center justify-center text-white/20">
+                                        <div class="text-center">
+                                            <i class="fa-solid fa-tv text-4xl mb-4"></i>
+                                            <p class="text-sm">Preview UI Render</p>
+                                        </div>
+                                    </div>
+                                </div>
+
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- AGENTS: LAYOUT GALLERY -->
+                    <div v-else-if="activeSection === 'agents-layouts'">
+                        <h1>Layout Gallery</h1>
+                        <p>Lumina provides 5 core layouts optimized for different types of information. Click <strong><i
+                                    class="fa-solid fa-play text-blue-400"></i> Visualize</strong> to load them into the
+                            <a @click.prevent="activeSection = 'agents-streaming'; scroll('streaming-demo-container')"
+                                href="#" class="text-blue-400 hover:underline">Streaming Demo</a>.
+                        </p>
+
+                        <div class="space-y-12 mt-12">
+
+                            <!-- Statement -->
+                            <div class="bg-[#0A0A0A] border border-white/10 rounded-xl overflow-hidden p-6">
+                                <div class="flex justify-between items-center mb-4">
+                                    <h3 class="text-xl font-bold text-white flex items-center gap-3">
+                                        <span
+                                            class="px-2 py-0.5 rounded bg-blue-500/10 text-blue-400 text-xs uppercase font-bold">Statement</span>
+                                    </h3>
+                                    <button @click="loadIntoDemo(EXAMPLES.statement)"
+                                        class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-bold text-white/50 hover:text-white transition flex items-center gap-2 border border-white/5">
+                                        <i class="fa-solid fa-play text-blue-400"></i> Visualize
+                                    </button>
+                                </div>
+                                <p class="text-sm text-gray-400 mb-4">Best for: Titles, Quotes, Big Ideas.</p>
+                                <pre class="!mb-0 !bg-black/50"><code>{{ EXAMPLES.statement }}</code></pre>
+                            </div>
+
+                            <!-- Features -->
+                            <div class="bg-[#0A0A0A] border border-white/10 rounded-xl overflow-hidden p-6">
+                                <div class="flex justify-between items-center mb-4">
+                                    <h3 class="text-xl font-bold text-white flex items-center gap-3">
+                                        <span
+                                            class="px-2 py-0.5 rounded bg-yellow-500/10 text-yellow-400 text-xs uppercase font-bold">Features</span>
+                                    </h3>
+                                    <button @click="loadIntoDemo(EXAMPLES.features)"
+                                        class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-bold text-white/50 hover:text-white transition flex items-center gap-2 border border-white/5">
+                                        <i class="fa-solid fa-play text-yellow-400"></i> Visualize
+                                    </button>
+                                </div>
+                                <p class="text-sm text-gray-400 mb-4">Best for: Lists, Grids, Stats, Benefits.</p>
+                                <pre class="!mb-0 !bg-black/50"><code>{{ EXAMPLES.features }}</code></pre>
+                            </div>
+
+                            <!-- Timeline -->
+                            <div class="bg-[#0A0A0A] border border-white/10 rounded-xl overflow-hidden p-6">
+                                <div class="flex justify-between items-center mb-4">
+                                    <h3 class="text-xl font-bold text-white flex items-center gap-3">
+                                        <span
+                                            class="px-2 py-0.5 rounded bg-green-500/10 text-green-400 text-xs uppercase font-bold">Timeline</span>
+                                    </h3>
+                                    <button @click="loadIntoDemo(EXAMPLES.timeline)"
+                                        class="px-3 py-1.5 rounded-lg bg-white/5 hover:bg-white/10 text-xs font-bold text-white/50 hover:text-white transition flex items-center gap-2 border border-white/5">
+                                        <i class="fa-solid fa-play text-green-400"></i> Visualize
+                                    </button>
+                                </div>
+                                <p class="text-sm text-gray-400 mb-4">Best for: Roadmaps, History, Changelogs.</p>
+                                <pre class="!mb-0 !bg-black/50"><code>{{ EXAMPLES.timeline }}</code></pre>
+                            </div>
+
+                        </div>
+                    </div>
+
+                    <div v-else-if="activeSection === 'agents-auto'">
+                        <h1>Auto-Layouts</h1>
+                        <p>Sometimes the Agent doesn't know which layout is best. Just use <code>type: 'auto'</code>.
+                        </p>
+                        <p>Lumina analyzes the content structure to pick the best view automatically.</p>
+
+                        <div class="p-6 bg-blue-500/10 border border-blue-500/20 rounded-xl my-8">
+                            <h3 class="text-blue-400 font-bold mb-2">Detection Priority</h3>
+                            <ul class="list-disc list-inside text-sm text-blue-200/80 space-y-1">
+                                <li>If <code>timeline</code> array exists -> <strong>Timeline Layout</strong></li>
+                                <li>If <code>steps</code> array exists -> <strong>Steps Layout</strong></li>
+                                <li>If <code>features</code> array exists -> <strong>Features Layout</strong></li>
+                                <li>If <code>image</code> exists -> <strong>Half Layout</strong></li>
+                                <li>Otherwise -> <strong>Statement Layout</strong></li>
+                            </ul>
+                        </div>
+
+                        <h3>Example: Multi-Slide Auto Detection</h3>
+                        <p class="text-sm text-gray-400 mb-4">Each slide uses <code>type: "auto"</code> but renders
+                            differently based on its content structure.</p>
+
+                        <pre><code>{
+  <span class="text-blue-400">"slides"</span>: [
+    <span class="text-gray-500">// Renders as Statement (no special arrays detected)</span>
+    {
+      <span class="text-blue-400">"type"</span>: <span class="text-green-400">"auto"</span>,
+      <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Welcome to Our Platform"</span>,
+      <span class="text-blue-400">"subtitle"</span>: <span class="text-green-400">"The future of presentations"</span>
+    },
+    <span class="text-gray-500">// Renders as Features (features array detected)</span>
+    {
+      <span class="text-blue-400">"type"</span>: <span class="text-green-400">"auto"</span>,
+      <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Why Choose Us"</span>,
+      <span class="text-blue-400">"features"</span>: [
+        { <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Fast"</span>, <span class="text-blue-400">"desc"</span>: <span class="text-green-400">"60fps animations"</span>, <span class="text-blue-400">"icon"</span>: <span class="text-green-400">"fa-bolt"</span> },
+        { <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Simple"</span>, <span class="text-blue-400">"desc"</span>: <span class="text-green-400">"JSON-first"</span>, <span class="text-blue-400">"icon"</span>: <span class="text-green-400">"fa-code"</span> },
+        { <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Smart"</span>, <span class="text-blue-400">"desc"</span>: <span class="text-green-400">"AI-ready"</span>, <span class="text-blue-400">"icon"</span>: <span class="text-green-400">"fa-brain"</span> }
+      ]
+    },
+    <span class="text-gray-500">// Renders as Timeline (timeline array detected)</span>
+    {
+      <span class="text-blue-400">"type"</span>: <span class="text-green-400">"auto"</span>,
+      <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Our Journey"</span>,
+      <span class="text-blue-400">"timeline"</span>: [
+        { <span class="text-blue-400">"date"</span>: <span class="text-green-400">"2023"</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Concept"</span>, <span class="text-blue-400">"description"</span>: <span class="text-green-400">"The idea was born"</span> },
+        { <span class="text-blue-400">"date"</span>: <span class="text-green-400">"2024"</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Launch"</span>, <span class="text-blue-400">"description"</span>: <span class="text-green-400">"V1.0 released"</span> }
+      ]
+    },
+    <span class="text-gray-500">// Renders as Steps (steps array detected)</span>
+    {
+      <span class="text-blue-400">"type"</span>: <span class="text-green-400">"auto"</span>,
+      <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Getting Started"</span>,
+      <span class="text-blue-400">"steps"</span>: [
+        { <span class="text-blue-400">"step"</span>: <span class="text-yellow-400">1</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Install"</span>, <span class="text-blue-400">"description"</span>: <span class="text-green-400">"npm install lumina-slides"</span> },
+        { <span class="text-blue-400">"step"</span>: <span class="text-yellow-400">2</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Import"</span>, <span class="text-blue-400">"description"</span>: <span class="text-green-400">"Import Lumina class"</span> },
+        { <span class="text-blue-400">"step"</span>: <span class="text-yellow-400">3</span>, <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Create"</span>, <span class="text-blue-400">"description"</span>: <span class="text-green-400">"Define your slides"</span> }
+      ]
+    },
+    <span class="text-gray-500">// Renders as Half (image property detected)</span>
+    {
+      <span class="text-blue-400">"type"</span>: <span class="text-green-400">"auto"</span>,
+      <span class="text-blue-400">"title"</span>: <span class="text-green-400">"Visual Storytelling"</span>,
+      <span class="text-blue-400">"image"</span>: <span class="text-green-400">"https://images.unsplash.com/..."</span>,
+      <span class="text-blue-400">"paragraphs"</span>: [<span class="text-green-400">"Combine text and visuals seamlessly."</span>]
+    }
+  ]
+}</code></pre>
+
+                        <div class="mt-8 p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
+                            <h4 class="text-yellow-400 font-bold mb-2"><i class="fa-solid fa-lightbulb mr-2"></i>Pro Tip
+                            </h4>
+                            <p class="text-sm text-yellow-200/80 m-0">Using <code>type: "auto"</code> simplifies prompt
+                                engineering for AI agents. The LLM only needs to provide the data structure, and Lumina
+                                will handle the visual representation automatically.</p>
+                        </div>
+                    </div>
+
+                    <!-- AGENTS: STATE -->
+                    <div v-else-if="activeSection === 'agents-state'">
+                        <h1>State & Feedback Loop</h1>
+                        <p>Use <code>engine.exportState()</code> to get the current state for your LLM or agent. It returns a frozen object with <code>status</code>, <code>currentSlide</code> (<code>{ index, id, type, title }</code>), <code>narrative</code> (e.g. "User is on slide 3. Session: clicked 'Learn More' → next."), <code>engagementLevel</code> ("High" or "Low"), and <code>history</code> (recorded actions). Add this to your prompt for context-aware replies.</p>
+                        <pre><code><span class="text-blue-400">const</span> state = engine.exportState();
+<span class="text-gray-500">// "User is on slide ${state.currentSlide.index + 1} (${state.currentSlide.type}). ${state.narrative}"</span></code></pre>
+                    </div>
+
+                    <!-- REF: STATEMENT -->
+                    <div v-else-if="activeSection === 'ref-statement'">
+                        <h1>Statement Slide</h1>
+                        <p class="lead">Used for high-impact titles, opening covers, or emphatic quotes. It is designed
+                            to be punchy and minimal.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"statement"</td>
+                                            <td class="p-3">Required. Identifies the layout.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">title</td>
+                                            <td class="p-3 font-mono text-xs">string</td>
+                                            <td class="p-3">Main headline. Keep it short (3-6 words).</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">subtitle</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Optional supporting text.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">tag</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Small eyebrow tag above the title.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">notes</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Speaker notes (available on any slide via <code>SlideBase</code>).</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Example</h2>
+                            <LivePreview :initial-code="EXAMPLES.statement" />
+                        </div>
+                    </div>
+
+                    <!-- REF: HALF -->
+                    <div v-else-if="activeSection === 'ref-half'">
+                        <h1>Half / Split Slide</h1>
+                        <p class="lead">Image or video on one side, text on the other. Ideal for product showcases or "about me" sections. <strong>One of <code>image</code> or <code>video</code> is required.</strong></p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"half"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">image</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Image URL. Omit if using <code>video</code>.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">video</td>
+                                            <td class="p-3 font-mono text-xs">VideoProperties?</td>
+                                            <td class="p-3"><code>{ type: "video", src, autoplay?, muted?, loop? }</code>. Use instead of <code>image</code>.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">imageSide</td>
+                                            <td class="p-3 font-mono text-xs">"left" | "right"</td>
+                                            <td class="p-3">Which side the media is on. Default: "left".</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">tag</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Optional eyebrow label above the title.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">title</td>
+                                            <td class="p-3 font-mono text-xs">string</td>
+                                            <td class="p-3">Headline text.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">paragraphs</td>
+                                            <td class="p-3 font-mono text-xs">string[]</td>
+                                            <td class="p-3">Array of text blocks.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">cta</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Optional button label.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Example</h2>
+                            <LivePreview :initial-code="EXAMPLES.half" />
+                        </div>
+                    </div>
+
+                    <!-- REF: FEATURES -->
+                    <div v-else-if="activeSection === 'ref-features'">
+                        <h1>Features Slide</h1>
+                        <p class="lead">Displays a grid of cards, perfect for listing benefits, stats, or services.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"features"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">title</td>
+                                            <td class="p-3 font-mono text-xs">string</td>
+                                            <td class="p-3">Section header.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">description</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Optional context.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">features</td>
+                                            <td class="p-3 font-mono text-xs">FeatureItem[]</td>
+                                            <td class="p-3">Array: <code>{ class?, title, desc, icon?, id? }</code>. <code>class</code> can be <code>""</code>; <code>desc</code> or <code>description</code>.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Example</h2>
+                            <LivePreview :initial-code="EXAMPLES.features" />
+                        </div>
+                    </div>
+
+                    <!-- REF: TIMELINE -->
+                    <div v-else-if="activeSection === 'ref-timeline'">
+                        <h1>Timeline Slide</h1>
+                        <p class="lead">Vertical chronological list for events, roadmaps, or history. Do not confuse with <em>Timeline (keyframes)</em> for <code>slide.timelineTracks</code>.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"timeline"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">title</td>
+                                            <td class="p-3 font-mono text-xs">string</td>
+                                            <td class="p-3">Header.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">subtitle</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Optional.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">timeline</td>
+                                            <td class="p-3 font-mono text-xs">TimelineItem[]</td>
+                                            <td class="p-3">Array: <code>{ date, title, description, icon?, id? }</code>. Aliases: <code>t</code>→title, <code>desc</code>→description.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Example</h2>
+                            <LivePreview :initial-code="EXAMPLES.timeline" />
+                        </div>
+                    </div>
+
+                    <!-- REF: STEPS -->
+                    <div v-else-if="activeSection === 'ref-steps'">
+                        <h1>Steps Slide</h1>
+                        <p class="lead">Used for tutorials, "how-to" guides, or process flows.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"steps"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">title</td>
+                                            <td class="p-3 font-mono text-xs">string</td>
+                                            <td class="p-3">Process name.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">subtitle</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Optional.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">steps</td>
+                                            <td class="p-3 font-mono text-xs">StepItem[]</td>
+                                            <td class="p-3">Array: <code>{ step, title, description?, icon?, id? }</code>. <code>step</code> is e.g. <code>"01"</code>.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Example</h2>
+                            <LivePreview :initial-code="EXAMPLES.steps" />
+                        </div>
+                    </div>
+
+                    <!-- REF: FLEX -->
+                    <div v-else-if="activeSection === 'ref-flex'">
+                        <h1>Flex Layout</h1>
+                        <p class="lead">Flow-based layout for composing slides using semantic sizing. No coordinates
+                            needed—perfect for LLM generation.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Slide Options</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"flex"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">direction</td>
+                                            <td class="p-3 font-mono text-xs">"horizontal" | "vertical"</td>
+                                            <td class="p-3">Main flow direction. Default: "horizontal".</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">gap</td>
+                                            <td class="p-3 font-mono text-xs">SpacingToken</td>
+                                            <td class="p-3">Gap between elements. Default: "none".</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">padding</td>
+                                            <td class="p-3 font-mono text-xs">SpacingToken</td>
+                                            <td class="p-3">Container padding. Default: "none".</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">halign</td>
+                                            <td class="p-3 font-mono text-xs">"left" | "center" | "right"</td>
+                                            <td class="p-3">Horizontal alignment of the flex group. Default: "left".</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">valign</td>
+                                            <td class="p-3 font-mono text-xs">"top" | "center" | "bottom"</td>
+                                            <td class="p-3">Vertical alignment of the flex group. Default: "top".</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">elements</td>
+                                            <td class="p-3 font-mono text-xs">FlexElement[]</td>
+                                            <td class="p-3">Array of flex elements in flow order. Each can have <code>size</code> (FlexSize).</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Size Tokens</h2>
+                            <p>Each element can have a <code>size</code> property to control how much space it occupies:
+                            </p>
+                            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 my-6 not-prose">
+                                <div class="p-4 bg-white/5 rounded-lg text-center"><code>auto</code><br><span
+                                        class="text-xs text-white/40">flexible</span></div>
+                                <div class="p-4 bg-white/5 rounded-lg text-center"><code>quarter</code><br><span
+                                        class="text-xs text-white/40">25%</span></div>
+                                <div class="p-4 bg-white/5 rounded-lg text-center"><code>third</code><br><span
+                                        class="text-xs text-white/40">33%</span></div>
+                                <div class="p-4 bg-white/5 rounded-lg text-center"><code>half</code><br><span
+                                        class="text-xs text-white/40">50%</span></div>
+                                <div class="p-4 bg-white/5 rounded-lg text-center"><code>two-thirds</code><br><span
+                                        class="text-xs text-white/40">66%</span></div>
+                                <div class="p-4 bg-white/5 rounded-lg text-center"><code>three-quarters</code><br><span
+                                        class="text-xs text-white/40">75%</span></div>
+                                <div class="p-4 bg-white/5 rounded-lg text-center"><code>full</code><br><span
+                                        class="text-xs text-white/40">100%</span></div>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Element Types</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Properties</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">content</td>
+                                            <td class="p-3 font-mono text-xs">elements, valign, halign, gap, padding
+                                            </td>
+                                            <td class="p-3">Container that groups child elements vertically.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">image</td>
+                                            <td class="p-3 font-mono text-xs">src, alt?, fill?, fit?, rounded?</td>
+                                            <td class="p-3">Visual media element.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">title</td>
+                                            <td class="p-3 font-mono text-xs">text, size?, align?</td>
+                                            <td class="p-3">Large heading (lg | xl | 2xl | 3xl).</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">text</td>
+                                            <td class="p-3 font-mono text-xs">text, align?, muted?</td>
+                                            <td class="p-3">Body paragraph text.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">bullets</td>
+                                            <td class="p-3 font-mono text-xs">items: string[]</td>
+                                            <td class="p-3">Unordered bullet list.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">ordered</td>
+                                            <td class="p-3 font-mono text-xs">items: string[]</td>
+                                            <td class="p-3">Numbered list.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">button</td>
+                                            <td class="p-3 font-mono text-xs">label, action?, variant?, fullWidth?</td>
+                                            <td class="p-3">CTA button (primary | secondary | outline | ghost).</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">timeline</td>
+                                            <td class="p-3 font-mono text-xs">items: TimelineItem[], compact?</td>
+                                            <td class="p-3">Embedded timeline.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">stepper</td>
+                                            <td class="p-3 font-mono text-xs">items: StepItem[], compact?</td>
+                                            <td class="p-3">Embedded step process.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">spacer</td>
+                                            <td class="p-3 font-mono text-xs">size?: SpacingToken</td>
+                                            <td class="p-3">Adds visual spacing.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Content Container</h2>
+                            <p>Use <code>content</code> to group related elements with alignment control:</p>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg mt-6">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Values</th>
+                                            <th class="p-3 border-b border-white/10">Default</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">valign</td>
+                                            <td class="p-3 font-mono text-xs">top | center | bottom</td>
+                                            <td class="p-3">center</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">halign</td>
+                                            <td class="p-3 font-mono text-xs">left | center | right</td>
+                                            <td class="p-3">left</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">gap</td>
+                                            <td class="p-3 font-mono text-xs">none | xs | sm | md | lg | xl | 2xl</td>
+                                            <td class="p-3">md</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">padding</td>
+                                            <td class="p-3 font-mono text-xs">none | xs | sm | md | lg | xl | 2xl</td>
+                                            <td class="p-3">lg</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Example</h2>
+                            <LivePreview :initial-code="EXAMPLES.flex" />
+                        </div>
+                    </div>
+
+                    <!-- REF: CHART -->
+                    <div v-else-if="activeSection === 'ref-chart'">
+                        <h1>Chart Slide</h1>
+                        <p class="lead">Visualize data extracted from CSV/Excel files. Perfect for LLM-generated reports
+                            and dashboards.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"chart"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">chartType</td>
+                                            <td class="p-3 font-mono text-xs">"bar" | "line" | "pie" | "doughnut"</td>
+                                            <td class="p-3">Type of chart to render.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">title</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Chart title (optional).</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">subtitle</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Subtitle text (optional).</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">data</td>
+                                            <td class="p-3 font-mono text-xs">ChartData</td>
+                                            <td class="p-3">Object with <code>labels</code> and <code>datasets</code>.
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Data Structure</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">data.labels</td>
+                                            <td class="p-3 font-mono text-xs">string[]</td>
+                                            <td class="p-3">X-axis labels or pie segment names.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">data.datasets</td>
+                                            <td class="p-3 font-mono text-xs">Dataset[]</td>
+                                            <td class="p-3">Each with <code>label</code>, <code>values</code>, and
+                                                optional <code>color</code>.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-cyan-400">dataset.color</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3"><code>c:p</code> (primary), <code>c:s</code> (secondary),
+                                                <code>c:m</code> (muted), or hex.
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <!-- Chart Types Section -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Chart Types</h2>
+
+                            <div class="space-y-12">
+                                <!-- Bar Chart -->
+                                <div class="p-6 rounded-2xl bg-white/[0.02] border border-white/5">
+                                    <div class="flex items-center gap-3 mb-4">
+                                        <div
+                                            class="w-10 h-10 rounded-lg bg-blue-500/20 text-blue-400 flex items-center justify-center">
+                                            <i class="fa-solid fa-chart-column"></i>
+                                        </div>
+                                        <div>
+                                            <h3 class="text-xl font-bold text-white">Bar Chart</h3>
+                                            <p class="text-sm text-white/50">Best for comparing discrete categories</p>
+                                        </div>
+                                    </div>
+                                    <p class="text-white/60 text-sm mb-4">Use bar charts to compare values across
+                                        categories. Ideal for revenue by quarter, sales by region, or any categorical
+                                        comparison.</p>
+                                    <LivePreview initial-code='{
+  "type": "chart",
+  "chartType": "bar",
+  "title": "Sales by Region",
+  "subtitle": "Q4 2024 Performance",
+  "data": {
+    "labels": ["North", "South", "East", "West"],
+    "datasets": [{
+      "label": "Sales ($K)",
+      "values": [420, 380, 510, 290],
+      "color": "c:p"
+    }]
+  }
+}' />
+                                </div>
+
+                                <!-- Line Chart -->
+                                <div class="p-6 rounded-2xl bg-white/[0.02] border border-white/5">
+                                    <div class="flex items-center gap-3 mb-4">
+                                        <div
+                                            class="w-10 h-10 rounded-lg bg-green-500/20 text-green-400 flex items-center justify-center">
+                                            <i class="fa-solid fa-chart-line"></i>
+                                        </div>
+                                        <div>
+                                            <h3 class="text-xl font-bold text-white">Line Chart</h3>
+                                            <p class="text-sm text-white/50">Best for trends over time</p>
+                                        </div>
+                                    </div>
+                                    <p class="text-white/60 text-sm mb-4">Use line charts to show trends and changes
+                                        over time. Perfect for growth metrics, stock prices, or any time-series data.
+                                    </p>
+                                    <LivePreview initial-code='{
+  "type": "chart",
+  "chartType": "line",
+  "title": "Monthly Active Users",
+  "subtitle": "2024 Growth Trend",
+  "data": {
+    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
+    "datasets": [{
+      "label": "Users (K)",
+      "values": [45, 52, 61, 78, 95, 120],
+      "color": "#10b981"
+    }]
+  }
+}' />
+                                </div>
+
+                                <!-- Pie Chart -->
+                                <div class="p-6 rounded-2xl bg-white/[0.02] border border-white/5">
+                                    <div class="flex items-center gap-3 mb-4">
+                                        <div
+                                            class="w-10 h-10 rounded-lg bg-purple-500/20 text-purple-400 flex items-center justify-center">
+                                            <i class="fa-solid fa-chart-pie"></i>
+                                        </div>
+                                        <div>
+                                            <h3 class="text-xl font-bold text-white">Pie Chart</h3>
+                                            <p class="text-sm text-white/50">Best for showing proportions</p>
+                                        </div>
+                                    </div>
+                                    <p class="text-white/60 text-sm mb-4">Use pie charts to show how parts make up a
+                                        whole. Ideal for market share, budget allocation, or percentage distributions.
+                                    </p>
+                                    <LivePreview initial-code='{
+  "type": "chart",
+  "chartType": "pie",
+  "title": "Market Share",
+  "subtitle": "Industry Distribution Q4 2024",
+  "data": {
+    "labels": ["Product A", "Product B", "Product C", "Others"],
+    "datasets": [{
+      "label": "Share %",
+      "values": [35, 28, 22, 15]
+    }]
+  }
+}' />
+                                </div>
+
+                                <!-- Doughnut Chart -->
+                                <div class="p-6 rounded-2xl bg-white/[0.02] border border-white/5">
+                                    <div class="flex items-center gap-3 mb-4">
+                                        <div
+                                            class="w-10 h-10 rounded-lg bg-amber-500/20 text-amber-400 flex items-center justify-center">
+                                            <i class="fa-solid fa-circle-notch"></i>
+                                        </div>
+                                        <div>
+                                            <h3 class="text-xl font-bold text-white">Doughnut Chart</h3>
+                                            <p class="text-sm text-white/50">Modern alternative to pie charts</p>
+                                        </div>
+                                    </div>
+                                    <p class="text-white/60 text-sm mb-4">Similar to pie charts but with a hollow
+                                        center. The modern look works great for dashboards and can display a metric in
+                                        the center.</p>
+                                    <LivePreview initial-code='{
+  "type": "chart",
+  "chartType": "doughnut",
+  "title": "Budget Allocation",
+  "subtitle": "2025 Planned Spend",
+  "data": {
+    "labels": ["Engineering", "Marketing", "Sales", "Operations"],
+    "datasets": [{
+      "label": "Budget",
+      "values": [40, 25, 20, 15]
+    }]
+  }
+}' />
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Multiple Datasets Example -->
+                        <div class="my-12">
+                            <h2 class="text-2xl font-bold text-white mb-6">Advanced: Multiple Datasets</h2>
+                            <p class="text-white/60 mb-6">Bar and line charts support multiple datasets for comparisons.
+                                Each dataset gets its own color and legend entry.</p>
+                            <LivePreview initial-code='{
+  "type": "chart",
+  "chartType": "bar",
+  "title": "Year-over-Year Comparison",
+  "subtitle": "Revenue by Quarter",
+  "data": {
+    "labels": ["Q1", "Q2", "Q3", "Q4"],
+    "datasets": [
+      {
+        "label": "2023",
+        "values": [100, 120, 140, 160],
+        "color": "#6b7280"
+      },
+      {
+        "label": "2024",
+        "values": [120, 150, 180, 220],
+        "color": "c:p"
+      }
+    ]
+  },
+  video: `{
+  "type": "statement",
+  "sizing": "container",
+  "meta": { "orbColor": "#ec4899" },
+  "background": {
+    "type": "video",
+    "src": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+    "opacity": 0.4
+  },
+  "tag": "Cinematic",
+  "title": "Video Backgrounds",
+  "subtitle": "Immersive support."
+}`
+}' />
+                        </div>
+
+                        <!-- Color Tokens -->
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Color Tokens</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Token</th>
+                                            <th class="p-3 border-b border-white/10">Maps To</th>
+                                            <th class="p-3 border-b border-white/10">Default</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">c:p</td>
+                                            <td class="p-3">--lumina-colors-primary</td>
+                                            <td class="p-3"><span
+                                                    class="inline-block w-4 h-4 rounded bg-blue-500 mr-2"></span>#3b82f6
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-green-400">c:s</td>
+                                            <td class="p-3">--lumina-colors-secondary</td>
+                                            <td class="p-3"><span
+                                                    class="inline-block w-4 h-4 rounded bg-emerald-500 mr-2"></span>#10b981
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-gray-400">c:m</td>
+                                            <td class="p-3">--lumina-colors-muted</td>
+                                            <td class="p-3"><span
+                                                    class="inline-block w-4 h-4 rounded bg-gray-400 mr-2"></span>#9ca3af
+                                            </td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-pink-400">#ec4899</td>
+                                            <td class="p-3">Direct hex color</td>
+                                            <td class="p-3"><span
+                                                    class="inline-block w-4 h-4 rounded bg-pink-500 mr-2"></span>Custom
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="mt-8 p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
+                            <h4 class="text-yellow-400 font-bold mb-2"><i class="fa-solid fa-lightbulb mr-2"></i>Pro
+                                Tips
+                            </h4>
+                            <ul class="text-sm text-yellow-200/80 space-y-2 m-0 list-none">
+                                <li>📊 <strong>Bar charts</strong> work best with 4-8 categories</li>
+                                <li>📈 <strong>Line charts</strong> need at least 3 data points for smooth curves</li>
+                                <li>🥧 <strong>Pie/Doughnut</strong> should have 3-6 segments max for clarity</li>
+                                <li>🤖 <strong>LLM Tip:</strong> Have agents extract tabular data from CSVs and generate
+                                    charts automatically</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- REF: VIDEO -->
+                    <div v-else-if="activeSection === 'ref-video'">
+                        <h1>Video Slide</h1>
+                        <p class="lead">Full-screen video player with optional title overlay (shown on hover).</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"video"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">video</td>
+                                            <td class="p-3 font-mono text-xs">VideoProperties</td>
+                                            <td class="p-3">Required. <code>src</code>, and optionally <code>poster</code>, <code>autoplay</code>, <code>loop</code>, <code>muted</code>, <code>controls</code>, <code>className</code>.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">title</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Caption overlay at bottom-left, visible on hover.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">VideoProperties</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr><td class="p-3 font-mono text-cyan-400">src</td><td class="p-3 font-mono text-xs">string</td><td class="p-3">Required. Video URL.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">poster</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">Poster image URL.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">autoplay</td><td class="p-3 font-mono text-xs">boolean?</td><td class="p-3">Default: false.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">loop</td><td class="p-3 font-mono text-xs">boolean?</td><td class="p-3">Default: false.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">muted</td><td class="p-3 font-mono text-xs">boolean?</td><td class="p-3">Default: false. Often true with autoplay for autoplay to work.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">controls</td><td class="p-3 font-mono text-xs">boolean?</td><td class="p-3">Default: false. Show play/seek/volume.</td></tr>
+                                        <tr><td class="p-3 font-mono text-cyan-400">className</td><td class="p-3 font-mono text-xs">string?</td><td class="p-3">CSS class for the title overlay container.</td></tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Example</h2>
+                            <LivePreview :initial-code="EXAMPLES.video_slide" />
+                        </div>
+
+                        <p class="text-white/60 text-sm">Element control ids: <code>s{N}-video</code>, <code>s{N}-title</code>.</p>
+                    </div>
+
+                    <!-- REF: CUSTOM HTML -->
+                    <div v-else-if="activeSection === 'ref-custom'">
+                        <h1>Custom HTML Slide</h1>
+                        <p class="lead">Full control with raw HTML content. Inject any HTML structure with custom
+                            styling.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"custom"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">html</td>
+                                            <td class="p-3 font-mono text-xs">string</td>
+                                            <td class="p-3">Raw HTML content to render.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">css</td>
+                                            <td class="p-3 font-mono text-xs">string?</td>
+                                            <td class="p-3">Optional scoped CSS styles.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Basic Example</h2>
+                            <p class="text-white/60 mb-6">Render any HTML structure with full styling control.</p>
+                            <LivePreview initial-code='{
+  "type": "custom",
+  "html": "<div class=\"custom-slide\"><h1 class=\"custom-title\">Welcome!</h1><p class=\"custom-text\">This is fully custom HTML content.</p><div class=\"custom-grid\"><div class=\"custom-card\">Card 1</div><div class=\"custom-card\">Card 2</div><div class=\"custom-card\">Card 3</div></div></div>",
+  "css": ".custom-slide { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 2rem; } .custom-title { font-size: 3rem; font-weight: bold; margin-bottom: 1rem; background: linear-gradient(90deg, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .custom-text { font-size: 1.25rem; opacity: 0.7; margin-bottom: 2rem; } .custom-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .custom-card { padding: 2rem; background: rgba(255,255,255,0.05); border-radius: 1rem; border: 1px solid rgba(255,255,255,0.1); text-align: center; transition: transform 0.2s; } .custom-card:hover { transform: translateY(-4px); }"
+}' />
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Use Cases</h2>
+                            <ul class="space-y-3 text-white/70">
+                                <li><strong>Embedding iframes:</strong> YouTube videos, maps, or external widgets</li>
+                                <li><strong>Custom visualizations:</strong> D3.js charts, SVG animations</li>
+                                <li><strong>Brand-specific layouts:</strong> Complex designs not covered by built-in
+                                    layouts</li>
+                                <li><strong>Interactive components:</strong> Forms, quizzes, or custom buttons</li>
+                            </ul>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Sanitization</h2>
+                            <p class="text-white/70 mb-2">Before rendering, the following are removed for security: <code>&lt;script&gt;</code> tags, <code>on*</code> attribute handlers (e.g. <code>onclick=</code>), and <code>javascript:</code> URLs. Sanitize or escape user-generated HTML for other XSS vectors if needed.</p>
+                            <p class="text-white/60 text-sm">The <code>css</code> string is injected into <code>document.head</code> as a <code>&lt;style&gt;</code> and removed when the slide unmounts.</p>
+                        </div>
+
+                        <div class="mt-8 p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
+                            <h4 class="text-yellow-400 font-bold mb-2"><i class="fa-solid fa-lightbulb mr-2"></i>Pro
+                                Tips</h4>
+                            <ul class="text-sm text-yellow-200/80 space-y-2 m-0 list-none">
+                                <li>🎨 <strong>Scoped CSS:</strong> Styles are injected in <code>&lt;head&gt;</code>; use unique class names to avoid clashes with Lumina.</li>
+                                <li>📱 <strong>Responsive:</strong> Use CSS Grid or Flexbox with relative units for
+                                    mobile support</li>
+                                <li>🤖 <strong>LLM Usage:</strong> Custom slides are great when the AI needs complete
+                                    creative freedom</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <!-- REF: DIAGRAM -->
+                    <div v-else-if="activeSection === 'ref-diagram'">
+                        <h1>Diagram Slide</h1>
+                        <p class="lead">Interactive node-based diagram using Vue Flow. Supports nodes, edges, and (in Studio) drag-and-drop and inline editing.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"diagram"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">nodes</td>
+                                            <td class="p-3 font-mono text-xs">object[]</td>
+                                            <td class="p-3">Vue Flow nodes: <code>id</code>, <code>type</code> (default/input), <code>position</code> <code>{x,y}</code>, <code>label</code>, <code>data</code> (e.g. shape, style).</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">edges</td>
+                                            <td class="p-3 font-mono text-xs">object[]</td>
+                                            <td class="p-3">Vue Flow edges: <code>id</code>, <code>source</code>, <code>target</code>, <code>sourceHandle</code>, <code>targetHandle</code> (optional).</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">config</td>
+                                            <td class="p-3 font-mono text-xs">object?</td>
+                                            <td class="p-3"><code>fitView</code> and other Vue Flow options.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <p class="text-white/60 text-sm">Element control: <code>s{N}-nodes-{i}</code>, <code>s{N}-edges-{i}</code>. With <code>studio: true</code>, diagrams are editable (add nodes via palette, drag, connect, resize).</p>
+                    </div>
+
+                    <!-- REF: FREE -->
+                    <div v-else-if="activeSection === 'ref-free'">
+                        <h1>Free / Composition Slide</h1>
+                        <p class="lead">Absolutely positioned elements (text, image, box) for Remotion-style storytelling. Use <code>timelineTracks</code> to animate <code>x</code>, <code>y</code> (as translate), <code>opacity</code>, etc.</p>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Configuration</h2>
+                            <div class="overflow-x-auto border border-white/10 rounded-lg">
+                                <table class="w-full text-left text-sm text-gray-400">
+                                    <thead class="bg-white/5 text-white font-bold">
+                                        <tr>
+                                            <th class="p-3 border-b border-white/10">Property</th>
+                                            <th class="p-3 border-b border-white/10">Type</th>
+                                            <th class="p-3 border-b border-white/10">Description</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody class="divide-y divide-white/5">
+                                        <tr>
+                                            <td class="p-3 font-mono text-purple-400">type</td>
+                                            <td class="p-3 font-mono text-xs">"free"</td>
+                                            <td class="p-3">Required.</td>
+                                        </tr>
+                                        <tr>
+                                            <td class="p-3 font-mono text-blue-400">elements</td>
+                                            <td class="p-3 font-mono text-xs">FreeElement[]</td>
+                                            <td class="p-3">Each: <code>type</code> (<code>"text"</code>|<code>"image"</code>|<code>"box"</code>), <code>text?</code>, <code>src?</code>, <code>width?</code>, <code>height?</code>, <code>fontSize?</code>, <code>color?</code>, <code>fontWeight?</code>, <code>backgroundColor?</code> (box), <code>id?</code>.</td>
+                                        </tr>
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                        <p class="text-white/60 text-sm">Element ids: <code>s{N}-elements-0</code>, <code>s{N}-elements-1</code>, … (or custom <code>id</code> on each element). Position is driven by <code>slide.timelineTracks</code>; see <em>Timeline (keyframes)</em>.</p>
+                    </div>
+
+                    <!-- REF: AUTO -->
+                    <div v-else-if="activeSection === 'ref-auto'">
+                        <h1>Auto Strategy</h1>
+                        <p class="lead">Smartly chooses the best layout based on the data structure provided. Useful for
+                            AI agents or rapid prototyping.</p>
+
+                        <div class="p-6 bg-blue-500/10 border border-blue-500/20 rounded-xl my-8">
+                            <h3 class="text-blue-400 font-bold mb-2">How it works</h3>
+                            <ul class="list-disc list-inside text-sm text-blue-200/80 space-y-1">
+                                <li>If <code>chartType</code> + <code>data.datasets</code> exist ->
+                                    <strong>Chart</strong>
+                                </li>
+                                <li>If <code>timeline</code> array exists -> <strong>Timeline</strong></li>
+                                <li>If <code>steps</code> array exists -> <strong>Steps</strong></li>
+                                <li>If <code>features</code> array exists -> <strong>Features</strong></li>
+                                <li>If <code>image</code> exists -> <strong>Half</strong></li>
+                                <li>Otherwise -> <strong>Statement</strong></li>
+                            </ul>
+                        </div>
+
+                        <div class="my-8">
+                            <h2 class="text-xl font-bold text-white mb-4">Live Examples</h2>
+                            <p class="text-sm text-gray-400 mb-6">Use the navigation arrows to see how each slide
+                                renders with the same <code>type: "auto"</code> but different data structures.</p>
+                            <LivePreview initial-code='{
+  "slides": [
+    {
+      "type": "auto",
+      "title": "Welcome to Lumina",
+      "subtitle": "The AI-Native Presentation Engine"
+    },
+    {
+      "type": "auto",
+      "title": "Core Features",
+      "features": [
+        { "title": "Fast", "desc": "60fps animations", "icon": "fa-bolt" },
+        { "title": "Simple", "desc": "JSON-first API", "icon": "fa-code" },
+        { "title": "Smart", "desc": "AI-ready engine", "icon": "fa-brain" }
+      ]
+    },
+    {
+      "type": "auto",
+      "title": "Our Roadmap",
+      "timeline": [
+        { "date": "Q1", "title": "Alpha", "description": "Core Engine" },
+        { "date": "Q2", "title": "Beta", "description": "Public Testing" },
+        { "date": "Q4", "title": "Launch", "description": "V1.0 Release" }
+      ]
+    },
+    {
+      "type": "auto",
+      "title": "Getting Started",
+      "steps": [
+        { "step": "1", "title": "Install", "description": "npm install lumina-slides" },
+        { "step": "2", "title": "Import", "description": "Import the Lumina class" },
+        { "step": "3", "title": "Create", "description": "Define your JSON slides" }
+      ]
+    },
+    {
+      "type": "auto",
+      "title": "Visual Content",
+      "image": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=800",
+      "paragraphs": ["Auto-detect image slides for visual storytelling."]
+    }
+  ]
+}' />
+                        </div>
+                    </div>
+
+                </div>
+            </Transition>
+        </main>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onUnmounted, nextTick } from 'vue';
+import { Lumina } from '../../core/Lumina';
+import { parsePartialJson } from '../../utils/streaming';
+import LivePreview from './LivePreview.vue';
+
+const activeSection = ref('intro');
+
+// --- DEMO LOGIC ---
+const demoInput = ref('');
+const demoStarted = ref(false);
+let demoEngine: Lumina | null = null;
+
+const TARGET_JSON = `{
+  "meta": { "title": "Lumina Demo" },
+  "slides": [
+    {
+      "type": "half",
+      "sizing": "container",
+      "meta": {
+        "orbColor": "#8b5cf6"
+      },
+      "imageSide": "left",
+      "image": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000",
+      "tag": "Left Aligned",
+      "title": "Image on Left",
+      "paragraphs": [
+        "The classic split screen. Image on the left, content on the right.",
+        "Perfect for introducing a product or feature where the visual context leads the narrative."
+      ],
+      "cta": "Explore Left"
+    },
+    {
+      "type": "statement",
+      "sizing": "container",
+      "meta": {
+        "orbColor": "#ec4899"
+      },
+      "tag": "Minimal",
+      "title": "Impactful Headlines",
+      "subtitle": "The standard statement slide allows for massive typography to drive a point home."
+    },
+    {
+      "type": "features",
+      "sizing": "container",
+      "title": "Grid System",
+      "description": "The features layout automatically arranges cards into a responsive grid.",
+      "features": [
+        { "title": "Card One", "desc": "Standard card with an icon.", "icon": "fa-bolt" },
+        { "title": "Card Two", "desc": "Cards scale on hover.", "icon": "fa-star" },
+        { "title": "Card Three", "desc": "Fully responsive on mobile.", "icon": "fa-mobile" }
+      ]
+    },
+    {
+      "type": "timeline",
+      "sizing": "container",
+      "title": "Project History",
+      "subtitle": "A visual journey through our milestones.",
+      "timeline": [
+        { "date": "Q1 2023", "title": "Inception", "description": "The initial concept was drafted." },
+        { "date": "Q3 2023", "title": "Prototype", "description": "First functional MVP released." },
+        { "date": "Q1 2024", "title": "Beta Launch", "description": "Public beta opened to users." }
+      ]
+    }
+  ]
+}`;
+
+async function runDemo() {
+    demoInput.value = '';
+    demoStarted.value = true;
+
+    // Initialize Engine if needed
+    if (!demoEngine) {
+        // Ensure container is cleared to avoid duplicates
+        const container = document.getElementById('streaming-demo-container');
+        if (container) container.innerHTML = '';
+
+        nextTick(() => {
+            demoEngine = new Lumina('#streaming-demo-container', {
+                ui: { visible: true, showControls: true },
+                keyboard: false,
+                animation: { enabled: true, durationIn: 0.5 }
+            });
+        });
+    }
+
+    let i = 0;
+    // Faster typing for examples
+    const interval = setInterval(() => {
+        demoInput.value += TARGET_JSON[i];
+        i++;
+        if (i >= TARGET_JSON.length) clearInterval(interval);
+    }, 10);
+}
+
+function loadIntoDemo(json: string) {
+    activeSection.value = 'agents-streaming';
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    demoInput.value = '';
+    demoStarted.value = true;
+
+    setTimeout(() => {
+        if (!demoEngine) {
+            const container = document.getElementById('streaming-demo-container');
+            if (container) container.innerHTML = '';
+            demoEngine = new Lumina('#streaming-demo-container', {
+                ui: { visible: true },
+                keyboard: false,
+                animation: { enabled: true, durationIn: 0.5 }
+            });
+        }
+
+        let i = 0;
+        const interval = setInterval(() => {
+            demoInput.value += json[i];
+            i++;
+            if (i >= json.length) clearInterval(interval);
+        }, 5);
+    }, 100);
+}
+
+const EXAMPLES = {
+    statement: `{
+  "type": "statement",
+  "sizing": "container",
+  "t": "Big Impact",
+  "s": "Created instantly from JSON.",
+  "meta": { "variant": "v:g" }
+}`,
+    features: `{
+  "type": "features",
+  "sizing": "container",
+  "t": "Core Capabilities",
+  "fs": [
+    { "t": "Fast", "desc": "60fps", "icon": "bolt" },
+    { "t": "AI", "desc": "Native", "icon": "robot" },
+    { "t": "Typed", "desc": "TS", "icon": "code" }
+  ]
+}`,
+    timeline: `{
+  "type": "timeline",
+  "sizing": "container",
+  "t": "Product Roadmap",
+  "tl": [
+    { "date": "Q1", "t": "Alpha", "desc": "Core Engine" },
+    { "date": "Q2", "t": "Beta", "desc": "Public API" },
+    { "date": "Q3", "t": "Launch", "desc": "Global Scale" }
+  ]
+}`,
+    half: `{
+  "type": "half",
+  "sizing": "container",
+  "imageSide": "left",
+  "image": "https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2000",
+  "t": "Split Layout",
+  "tag": "Visual",
+  "paragraphs": ["Image on left, text on right."]
+}`,
+    steps: `{
+  "type": "steps",
+  "sizing": "container",
+  "t": "Process Flow",
+  "steps": [
+    { "step": "01", "t": "Install", "desc": "npm install" },
+    { "step": "02", "t": "Import", "desc": "import { Lumina }..." },
+    { "step": "03", "t": "Launch", "desc": "new Lumina(...)" }
+  ]
+}`,
+    flex: `{
+  "type": "flex",
+  "sizing": "container",
+  "direction": "horizontal",
+  "elements": [
+    { "type": "image", "src": "./brains.png", "size": "half", "fill": true },
+    { "type": "content", "size": "half", "valign": "center", "padding": "xl", "gap": "md", "elements": [
+      { "type": "title", "text": "Visual Story", "size": "2xl" },
+      { "type": "bullets", "items": ["Image fills height", "Content centered", "No coordinates"] },
+      { "type": "button", "label": "Learn More", "variant": "primary" }
+    ]}
+  ]
+}` ,
+    video: `{
+  "type": "statement",
+  "sizing": "container",
+  "meta": { "orbColor": "#ec4899" },
+  "background": {
+    "type": "video",
+    "src": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+    "opacity": 0.4
+  },
+  "tag": "Cinematic",
+  "title": "Video Backgrounds",
+  "subtitle": "Immersive support."
+}`,
+    video_half: `{
+  "type": "half",
+  "sizing": "container",
+  "video": {
+    "type": "video",
+    "src": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
+    "autoplay": true,
+    "muted": true
+  },
+  "title": "Watch This"
+}`,
+    video_flex: `{
+  "type": "flex",
+  "sizing": "container",
+  "elements": [
+    { 
+      "type": "video", 
+      "src": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
+      "controls": true,
+      "size": "half"
+    }
+  ]
+}`,
+    video_slide: `{
+  "type": "video",
+  "sizing": "container",
+  "video": {
+    "type": "video",
+    "src": "https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
+    "autoplay": true,
+    "muted": true,
+    "loop": true
+  },
+  "title": "Full-screen video"
+}`
+};
+
+// Watch input and parse
+watch(demoInput, (val) => {
+    if (!demoEngine) return;
+    const parsed = parsePartialJson(val);
+    if (parsed) {
+        // Handle Deck vs Slide
+        if (parsed.slides && Array.isArray(parsed.slides)) {
+            // Apply sizing: container to all slides if missing
+            parsed.slides.forEach((s: any) => s.sizing = 'container');
+            demoEngine.load(parsed);
+
+            // Auto-advance logic: check if we have a new slide that is ready
+            const availableSlides = parsed.slides.filter((s: any) => s.title || s.type);
+            const targetIndex = availableSlides.length - 1;
+
+            if (targetIndex > demoEngine.currentSlideIndex) {
+                demoEngine.goTo(targetIndex);
+            }
+        } else {
+            // Wrap single slide
+            demoEngine.load({
+                meta: { title: "Demo" },
+                slides: [{ ...parsed, sizing: 'container' }]
+            });
+        }
+    }
+});
+
+onUnmounted(() => {
+    if (demoEngine) demoEngine.destroy();
+});
+
+
+
+const navigation = [
+    {
+        title: 'Getting Started',
+        items: [
+            { id: 'intro', label: 'Introduction' },
+            { id: 'install', label: 'Installation' },
+            { id: 'setup', label: 'Quick Start' },
+            { id: 'theming', label: 'Theming & Presets' }
+        ]
+    },
+    {
+        title: 'Concepts',
+        items: [
+            { id: 'deck', label: 'Deck Structure' },
+            { id: 'slides', label: 'Slide Layouts' },
+            { id: 'media', label: 'Media & Video' },
+            { id: 'sizing', label: 'Embedding & Sizing' },
+            { id: 'agents-intro', label: 'Agent Protocol' },
+            { id: 'agents-tokens', label: 'Token Optimization' }
+        ]
+    },
+    {
+        title: 'Layouts',
+        items: [
+            { id: 'ref-statement', label: 'Statement' },
+            { id: 'ref-half', label: 'Half / Split' },
+            { id: 'ref-features', label: 'Features' },
+            { id: 'ref-timeline', label: 'Timeline' },
+            { id: 'ref-steps', label: 'Steps' },
+            { id: 'ref-flex', label: 'Flex' },
+            { id: 'ref-chart', label: 'Chart' },
+            { id: 'ref-video', label: 'Video' },
+            { id: 'ref-diagram', label: 'Diagram' },
+            { id: 'ref-free', label: 'Free / Composition' },
+            { id: 'ref-custom', label: 'Custom HTML' },
+            { id: 'ref-auto', label: 'Auto Strategy' }
+        ]
+    },
+    {
+        title: 'AI & LLM Integration',
+        items: [
+            { id: 'agents-streaming', label: 'Streaming & Realtime' },
+            { id: 'agents-intro', label: 'Agent Protocol' },
+            { id: 'agents-tokens', label: 'Token Optimization' }
+        ]
+    },
+    {
+        title: 'Advanced',
+        items: [
+            { id: 'config', label: 'Configuration' },
+            { id: 'events', label: 'Events & API' },
+            { id: 'element-control', label: 'Element Control' },
+            { id: 'animations', label: 'Animations (reveal, presets, stagger)' },
+            { id: 'timeline-keyframes', label: 'Timeline (keyframes)' },
+            { id: 'sizing', label: 'Embedding' },
+            { id: 'speaker-notes', label: 'Speaker Notes' }
+        ]
+    }
+];
+
+
+function scroll(id: string) {
+    nextTick(() => {
+        const el = document.getElementById(id);
+        if (el) {
+            el.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        }
+    });
+}
+
+function scrollToTop() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+}
+</script>
+
+<style scoped>
+.doc-content h1 {
+    @apply text-4xl md:text-5xl font-black tracking-tight text-white mb-8 leading-tight font-heading;
+}
+
+.doc-content h2 {
+    @apply text-2xl md:text-3xl font-bold text-white mt-16 mb-6 tracking-tight font-heading;
+}
+
+.doc-content h3 {
+    @apply text-[20px] font-extrabold text-white mb-[15px] mt-8 font-heading;
+}
+
+.doc-content p {
+    @apply text-lg text-white/70 leading-relaxed mb-6 font-sans;
+}
+
+.doc-content p.lead {
+    @apply text-2xl text-white font-light mb-10 leading-relaxed;
+}
+
+.doc-content ul {
+    @apply list-disc list-outside ml-6 mb-8 text-white/70;
+}
+
+.doc-content li {
+    @apply mb-2 pl-2 marker:text-blue-500 text-lg;
+}
+
+.doc-content code {
+    @apply font-mono text-sm bg-blue-500/10 text-blue-300 px-1.5 py-0.5 rounded border border-blue-500/20;
+}
+
+.doc-content pre {
+    @apply bg-[#0A0A0A] border border-white/10 rounded-xl p-5 overflow-x-auto mb-10 shadow-2xl;
+}
+
+.doc-content pre code {
+    @apply bg-transparent p-0 text-white/90 border-none text-sm leading-relaxed;
+}
+
+/* Specific overrides for the "not-prose" areas if needed, though scoped css shouldn't leak usually.
+   But since we use .doc-content class, we are safe. */
+</style>