update post-citation

app/plugins/rehype/post-citation.mjs

@@ -138,12 +138,36 @@ export default function rehypeReferencesAndFootnotes() {
       return out;
     };
 
+    // Check if an element is part of KaTeX structure
+    const isKaTeXElement = (el) => {
+      if (!isElement(el)) return false;
+      const className = ensureArray(getAttr(el, 'className') || []).map(String);
+      // Check for KaTeX classes
+      if (className.some(c => c.includes('katex') || c.includes('math'))) return true;
+      // Check parent chain for KaTeX
+      let current = el;
+      for (let depth = 0; depth < 10; depth++) {
+        // We need to walk up, but we don't have parent references in rehype AST
+        // So check by tagName and common KaTeX patterns
+        const tag = String(current.tagName || '').toLowerCase();
+        if (tag === 'math' || className.some(c => c.includes('katex'))) return true;
+        break; // Can't walk up in AST, just check current element
+      }
+      return false;
+    };
+
     const removeFootnoteBackrefAnchors = (el) => {
       if (!isElement(el)) return;
+      // Never modify KaTeX elements or their contents
+      if (isKaTeXElement(el)) return;
+      
       const kids = getChildren(el);
       for (let i = kids.length - 1; i >= 0; i--) {
         const child = kids[i];
         if (isElement(child)) {
+          // Never touch KaTeX elements
+          if (isKaTeXElement(child)) continue;
+          
           if (
             child.tagName === 'a' && (
               getAttr(child, 'data-footnote-backref') != null ||
@@ -159,11 +183,14 @@ export default function rehypeReferencesAndFootnotes() {
             el.children.splice(i, 1);
             continue;
           }
-          // Recurse into element
+          // Recurse into element (but not if it's KaTeX)
           removeFootnoteBackrefAnchors(child);
           // If a wrapper like <sup> or <span> became empty, remove it
+          // BUT only if it's not part of KaTeX
           const becameKids = getChildren(child);
-          if ((child.tagName === 'sup' || child.tagName === 'span') && (!becameKids || becameKids.length === 0)) {
+          if ((child.tagName === 'sup' || child.tagName === 'span') && 
+              (!becameKids || becameKids.length === 0) &&
+              !isKaTeXElement(child)) {
             el.children.splice(i, 1);
           }
         }
@@ -381,6 +408,28 @@ export default function rehypeReferencesAndFootnotes() {
       }
     }
 
+    // Deep clone a node and all its children (preserve KaTeX structure)
+    const deepCloneNode = (node) => {
+      if (!node || typeof node !== 'object') return node;
+      if (node.type === 'text') {
+        return { type: 'text', value: node.value };
+      }
+      if (node.type === 'element') {
+        const cloned = {
+          type: 'element',
+          tagName: node.tagName,
+          properties: node.properties ? JSON.parse(JSON.stringify(node.properties)) : {},
+          children: []
+        };
+        const kids = getChildren(node);
+        for (const child of kids) {
+          cloned.children.push(deepCloneNode(child));
+        }
+        return cloned;
+      }
+      return node;
+    };
+
     // Footnotes cleanup + backrefs harmonized with references
     const cleanupFootnotes = () => {
       let root = null;
@@ -398,7 +447,9 @@ export default function rehypeReferencesAndFootnotes() {
         const items = getChildren(root).filter((n) => isElement(n) && (n.tagName === 'li' || hasClass(n, 'footnote') || n.tagName === 'p' || n.tagName === 'div'));
         if (items.length) {
           for (const it of items) {
-            const li = { type: 'element', tagName: 'li', properties: {}, children: getChildren(it) };
+            // Deep clone to preserve all properties including KaTeX structure
+            const clonedChildren = getChildren(it).map(deepCloneNode);
+            const li = { type: 'element', tagName: 'li', properties: {}, children: clonedChildren };
             // Promote nested id if present (e.g., <p id="fn-1">)
             const nestedWithId = getChildren(it).find((n) => isElement(n) && getAttr(n, 'id'));
             if (nestedWithId) setAttr(li, 'id', getAttr(nestedWithId, 'id'));
@@ -415,6 +466,7 @@ export default function rehypeReferencesAndFootnotes() {
           if (nestedWithId) setAttr(li, 'id', getAttr(nestedWithId, 'id'));
         }
         // Remove default footnote backrefs anywhere inside (to avoid duplication)
+        // But preserve KaTeX elements
         removeFootnoteBackrefAnchors(li);
       }
       setAttr(root, 'data-built-footnotes', '1');

app/src/content/embeds/banner-gold-distillation.html

@@ -0,0 +1,575 @@
+<div class="distillation-visualization"
+    style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;position:relative;overflow:hidden;background:var(--surface-bg);border-radius:12px;border:1px solid var(--border-color);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);"></div>
+<script>
+    (() => {
+        const ensureAnime = (cb) => {
+            if (window.anime && typeof window.anime === 'function') return cb();
+            let s = document.getElementById('anime-cdn-script');
+            if (!s) {
+                s = document.createElement('script');
+                s.id = 'anime-cdn-script';
+                s.src = 'https://cdn.jsdelivr.net/npm/animejs@3.2.1/lib/anime.min.js';
+                document.head.appendChild(s);
+            }
+            const onReady = () => { if (window.anime && typeof window.anime === 'function') cb(); };
+            s.addEventListener('load', onReady, { once: true });
+            if (window.anime) onReady();
+        };
+
+        const bootstrap = () => {
+            const mount = document.currentScript ? document.currentScript.previousElementSibling : null;
+            const container = (mount && mount.querySelector && mount.querySelector('.distillation-visualization')) || document.querySelector('.distillation-visualization');
+            if (!container) return;
+            if (container.dataset) {
+                if (container.dataset.mounted === 'true') return;
+                container.dataset.mounted = 'true';
+            }
+
+            // Create canvas
+            const canvas = document.createElement('canvas');
+            canvas.style.display = 'block';
+            canvas.style.width = '100%';
+            canvas.style.height = '100%';
+            container.appendChild(canvas);
+            const ctx = canvas.getContext('2d');
+
+            // Theme colors
+            const getColors = () => {
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                return {
+                    teacher: isDark ? 'rgba(138, 100, 220, 0.9)' : 'rgba(138, 100, 220, 0.85)',
+                    student: isDark ? 'rgba(78, 165, 183, 0.9)' : 'rgba(50, 130, 160, 0.85)',
+                    teacherNode: isDark ? 'rgba(206, 192, 250, 0.8)' : 'rgba(138, 100, 220, 0.7)',
+                    studentNode: isDark ? 'rgba(125, 211, 252, 0.8)' : 'rgba(78, 165, 183, 0.7)',
+                    connectionTeacher: isDark ? 'rgba(138, 100, 220, 0.15)' : 'rgba(138, 100, 220, 0.2)',
+                    connectionStudent: isDark ? 'rgba(78, 165, 183, 0.15)' : 'rgba(78, 165, 183, 0.2)',
+                    knowledgeFlow: isDark ? 'rgba(232, 137, 171, 0.9)' : 'rgba(220, 80, 130, 0.85)',
+                };
+            };
+
+            let colors = getColors();
+
+            // Watch for theme changes
+            const observer = new MutationObserver(() => {
+                colors = getColors();
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+
+            // Teacher and Student network structures
+            const teacherLayers = [
+                { nodes: 8, name: 'input' },
+                { nodes: 14, name: 'hidden1' },
+                { nodes: 12, name: 'hidden2' },
+                { nodes: 8, name: 'hidden3' },
+                { nodes: 6, name: 'output' }
+            ];
+
+            const studentLayers = [
+                { nodes: 6, name: 'input' },
+                { nodes: 8, name: 'hidden1' },
+                { nodes: 6, name: 'hidden2' },
+                { nodes: 4, name: 'output' }
+            ];
+
+            let teacherNodes = [];
+            let teacherConnections = [];
+            let studentNodes = [];
+            let studentConnections = [];
+            let knowledgeParticles = [];
+            let width, height;
+            let teacherCenterX = 0;
+            let studentCenterX = 0;
+            let margin = 0;
+
+            const resize = () => {
+                width = container.clientWidth || 800;
+                height = Math.max(260, Math.round(width / 3));
+                canvas.width = width;
+                canvas.height = height;
+                initNetworks();
+            };
+
+            const initNetworks = () => {
+                teacherNodes = [];
+                teacherConnections = [];
+                studentNodes = [];
+                studentConnections = [];
+                knowledgeParticles = [];
+
+                // Center networks with spacing
+                const teacherX = width * 0.25; // Left side, centered
+                const studentX = width * 0.75; // Right side, centered
+                teacherCenterX = teacherX;
+                studentCenterX = studentX;
+                margin = height * 0.2; // More margin to fit labels above
+
+                // Initialize Teacher Network
+                // Use same available height for both networks
+                const networkHeight = height - 2 * margin;
+                const teacherLayerSpacing = networkHeight / (teacherLayers.length + 1);
+                let teacherNodeIndex = 0;
+                const teacherLayerStartIndices = [];
+                const teacherNetworkWidth = width * 0.15;
+
+                teacherLayers.forEach((layer, layerIdx) => {
+                    teacherLayerStartIndices.push(teacherNodeIndex);
+                    const y = margin + teacherLayerSpacing * (layerIdx + 1);
+                    const nodeSpacing = teacherNetworkWidth / (layer.nodes + 1);
+
+                    for (let i = 0; i < layer.nodes; i++) {
+                        const x = teacherX - teacherNetworkWidth / 2 + nodeSpacing * (i + 1);
+                        const node = {
+                            x,
+                            y,
+                            layer: layerIdx,
+                            index: i,
+                            radius: 0,
+                            targetRadius: 3 + Math.random() * 1,
+                            pulse: Math.random() * Math.PI * 2,
+                            activation: 0,
+                            baseActivity: Math.random() * 0.1
+                        };
+                        teacherNodes.push(node);
+                        teacherNodeIndex++;
+                    }
+                });
+
+                // Teacher connections
+                teacherLayers.forEach((layer, layerIdx) => {
+                    if (layerIdx < teacherLayers.length - 1) {
+                        const currentLayerStart = teacherLayerStartIndices[layerIdx];
+                        const nextLayerStart = teacherLayerStartIndices[layerIdx + 1];
+                        const nextLayerNodes = teacherLayers[layerIdx + 1].nodes;
+
+                        for (let i = 0; i < layer.nodes; i++) {
+                            for (let j = 0; j < nextLayerNodes; j++) {
+                                teacherConnections.push({
+                                    from: currentLayerStart + i,
+                                    to: nextLayerStart + j,
+                                    weight: Math.random(),
+                                    opacity: 0,
+                                    activation: 0
+                                });
+                            }
+                        }
+                    }
+                });
+
+                // Initialize Student Network
+                // Use same available height as teacher network
+                const studentLayerSpacing = networkHeight / (studentLayers.length + 1);
+                let studentNodeIndex = 0;
+                const studentLayerStartIndices = [];
+                const studentNetworkWidth = width * 0.15;
+
+                studentLayers.forEach((layer, layerIdx) => {
+                    studentLayerStartIndices.push(studentNodeIndex);
+                    const y = margin + studentLayerSpacing * (layerIdx + 1);
+                    const nodeSpacing = studentNetworkWidth / (layer.nodes + 1);
+
+                    for (let i = 0; i < layer.nodes; i++) {
+                        const x = studentX - studentNetworkWidth / 2 + nodeSpacing * (i + 1);
+                        const node = {
+                            x,
+                            y,
+                            layer: layerIdx,
+                            index: i,
+                            radius: 0,
+                            targetRadius: 2.5 + Math.random() * 0.8,
+                            pulse: Math.random() * Math.PI * 2,
+                            activation: 0,
+                            baseActivity: Math.random() * 0.1
+                        };
+                        studentNodes.push(node);
+                        studentNodeIndex++;
+                    }
+                });
+
+                // Student connections
+                studentLayers.forEach((layer, layerIdx) => {
+                    if (layerIdx < studentLayers.length - 1) {
+                        const currentLayerStart = studentLayerStartIndices[layerIdx];
+                        const nextLayerStart = studentLayerStartIndices[layerIdx + 1];
+                        const nextLayerNodes = studentLayers[layerIdx + 1].nodes;
+
+                        for (let i = 0; i < layer.nodes; i++) {
+                            for (let j = 0; j < nextLayerNodes; j++) {
+                                studentConnections.push({
+                                    from: currentLayerStart + i,
+                                    to: nextLayerStart + j,
+                                    weight: Math.random(),
+                                    opacity: 0,
+                                    activation: 0
+                                });
+                            }
+                        }
+                    }
+                });
+
+                // Animate nodes appearing
+                teacherNodes.forEach((node, i) => {
+                    anime({
+                        targets: node,
+                        radius: node.targetRadius,
+                        duration: 600,
+                        delay: i * 5,
+                        easing: 'easeOutElastic(1, .6)'
+                    });
+                });
+
+                studentNodes.forEach((node, i) => {
+                    anime({
+                        targets: node,
+                        radius: node.targetRadius,
+                        duration: 600,
+                        delay: 300 + i * 5,
+                        easing: 'easeOutElastic(1, .6)'
+                    });
+                });
+
+                // Connections fade in
+                teacherConnections.forEach((conn, i) => {
+                    anime({
+                        targets: conn,
+                        opacity: 1,
+                        duration: 300,
+                        delay: 500 + i * 0.5,
+                        easing: 'easeOutQuad'
+                    });
+                });
+
+                studentConnections.forEach((conn, i) => {
+                    anime({
+                        targets: conn,
+                        opacity: 1,
+                        duration: 300,
+                        delay: 800 + i * 0.5,
+                        easing: 'easeOutQuad'
+                    });
+                });
+
+                // Start animation cycles
+                setTimeout(() => {
+                    startDistillation();
+                    setInterval(startDistillation, 3000);
+                }, 1500);
+            };
+
+            const startDistillation = () => {
+                // Activate teacher output nodes
+                const teacherOutputNodes = teacherNodes.filter(n => n.layer === teacherLayers.length - 1);
+                const teacherOutputs = teacherOutputNodes.slice(0, 3 + Math.floor(Math.random() * 2));
+
+                teacherOutputs.forEach((node, idx) => {
+                    anime({
+                        targets: node,
+                        activation: 0.7 + Math.random() * 0.2,
+                        duration: 300,
+                        delay: idx * 100,
+                        easing: 'easeOutQuad',
+                        complete: () => {
+                            // Create knowledge particles flowing from teacher to student
+                            createKnowledgeFlow(node, studentNodes);
+                            anime({
+                                targets: node,
+                                activation: node.baseActivity,
+                                duration: 400,
+                                easing: 'easeInQuad'
+                            });
+                        }
+                    });
+                });
+            };
+
+            const createKnowledgeFlow = (fromNode, studentNodes) => {
+                // Select random student input nodes to receive knowledge
+                const studentInputNodes = studentNodes.filter(n => n.layer === 0);
+                const targets = studentInputNodes.slice(0, 2 + Math.floor(Math.random() * 2));
+
+                targets.forEach((targetNode, idx) => {
+                    const particle = {
+                        fromX: fromNode.x,
+                        fromY: fromNode.y,
+                        toX: targetNode.x,
+                        toY: targetNode.y,
+                        progress: 0,
+                        size: 2 + Math.random() * 1.5,
+                        trail: [],
+                        startDelay: idx * 150
+                    };
+
+                    knowledgeParticles.push(particle);
+
+                    setTimeout(() => {
+                        anime({
+                            targets: particle,
+                            progress: 1,
+                            duration: 800,
+                            easing: 'easeInOutCubic',
+                            complete: () => {
+                                // Activate student node when knowledge arrives
+                                anime({
+                                    targets: targetNode,
+                                    activation: 0.6 + Math.random() * 0.2,
+                                    duration: 200,
+                                    easing: 'easeOutQuad',
+                                    complete: () => {
+                                        anime({
+                                            targets: targetNode,
+                                            activation: targetNode.baseActivity,
+                                            duration: 500,
+                                            easing: 'easeInQuad'
+                                        });
+                                    }
+                                });
+
+                                // Propagate through student network
+                                setTimeout(() => {
+                                    propagateStudentNetwork();
+                                }, 200);
+
+                                // Remove particle
+                                const idx = knowledgeParticles.indexOf(particle);
+                                if (idx > -1) knowledgeParticles.splice(idx, 1);
+                            }
+                        });
+                    }, particle.startDelay);
+                });
+            };
+
+            const propagateStudentNetwork = () => {
+                for (let layerIdx = 0; layerIdx < studentLayers.length - 1; layerIdx++) {
+                    setTimeout(() => {
+                        const fromNodes = studentNodes.filter(n => n.layer === layerIdx && n.activation > 0.3);
+                        const toNodes = studentNodes.filter(n => n.layer === layerIdx + 1);
+
+                        const layerConnections = studentConnections.filter(c => {
+                            const fromNode = studentNodes[c.from];
+                            const toNode = studentNodes[c.to];
+                            return fromNode.layer === layerIdx && toNode.layer === layerIdx + 1;
+                        });
+
+                        layerConnections.forEach((conn) => {
+                            const fromNode = studentNodes[conn.from];
+                            if (fromNode.activation > 0.2) {
+                                anime({
+                                    targets: conn,
+                                    activation: fromNode.activation * conn.weight,
+                                    duration: 250,
+                                    easing: 'easeOutQuad',
+                                    complete: () => {
+                                        anime({
+                                            targets: conn,
+                                            activation: 0,
+                                            duration: 300,
+                                            easing: 'easeInQuad'
+                                        });
+                                    }
+                                });
+                            }
+                        });
+
+                        toNodes.forEach(toNode => {
+                            const toNodeIdx = studentNodes.indexOf(toNode);
+                            const incomingConns = layerConnections.filter(c => c.to === toNodeIdx);
+                            let sum = 0;
+                            incomingConns.forEach(conn => {
+                                const fromNode = studentNodes[conn.from];
+                                sum += fromNode.activation * conn.weight;
+                            });
+                            const activation = Math.min(1, sum / incomingConns.length * 1.3);
+                            if (activation > 0.25) {
+                                anime({
+                                    targets: toNode,
+                                    activation: activation,
+                                    duration: 200,
+                                    easing: 'easeOutQuad',
+                                    complete: () => {
+                                        anime({
+                                            targets: toNode,
+                                            activation: toNode.baseActivity,
+                                            duration: 400,
+                                            easing: 'easeInQuad'
+                                        });
+                                    }
+                                });
+                            }
+                        });
+                    }, layerIdx * 200);
+                }
+            };
+
+            const draw = () => {
+                ctx.clearRect(0, 0, width, height);
+
+                // Draw teacher network connections
+                teacherConnections.forEach(conn => {
+                    if (conn.opacity < 0.01) return;
+                    const fromNode = teacherNodes[conn.from];
+                    const toNode = teacherNodes[conn.to];
+                    if (!fromNode || !toNode) return;
+
+                    const baseOpacity = conn.opacity * conn.weight * 0.4;
+                    const activeOpacity = conn.activation;
+                    const totalOpacity = Math.max(baseOpacity, activeOpacity);
+
+                    if (totalOpacity < 0.01) return;
+
+                    ctx.beginPath();
+                    ctx.moveTo(fromNode.x, fromNode.y);
+                    ctx.lineTo(toNode.x, toNode.y);
+                    const rgb = colors.connectionTeacher.match(/[\d.]+/g);
+                    ctx.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${totalOpacity})`;
+                    ctx.lineWidth = conn.activation > 0.1 ? 1.2 : 0.7;
+                    ctx.stroke();
+                });
+
+                // Draw student network connections
+                studentConnections.forEach(conn => {
+                    if (conn.opacity < 0.01) return;
+                    const fromNode = studentNodes[conn.from];
+                    const toNode = studentNodes[conn.to];
+                    if (!fromNode || !toNode) return;
+
+                    const baseOpacity = conn.opacity * conn.weight * 0.4;
+                    const activeOpacity = conn.activation;
+                    const totalOpacity = Math.max(baseOpacity, activeOpacity);
+
+                    if (totalOpacity < 0.01) return;
+
+                    ctx.beginPath();
+                    ctx.moveTo(fromNode.x, fromNode.y);
+                    ctx.lineTo(toNode.x, toNode.y);
+                    const rgb = colors.connectionStudent.match(/[\d.]+/g);
+                    ctx.strokeStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${totalOpacity})`;
+                    ctx.lineWidth = conn.activation > 0.1 ? 1.2 : 0.7;
+                    ctx.stroke();
+                });
+
+                // Draw knowledge flow particles
+                knowledgeParticles.forEach(particle => {
+                    const x = particle.fromX + (particle.toX - particle.fromX) * particle.progress;
+                    const y = particle.fromY + (particle.toY - particle.fromY) * particle.progress;
+
+                    particle.trail.push({ x, y });
+                    if (particle.trail.length > 8) particle.trail.shift();
+
+                    particle.trail.forEach((point, i) => {
+                        const alpha = (i / particle.trail.length) * 0.7;
+                        const size = particle.size * alpha * 0.8;
+
+                        ctx.beginPath();
+                        ctx.arc(point.x, point.y, size, 0, Math.PI * 2);
+                        const rgb = colors.knowledgeFlow.match(/[\d.]+/g);
+                        ctx.fillStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha * 0.6})`;
+                        ctx.fill();
+                    });
+
+                    // Main particle
+                    ctx.beginPath();
+                    ctx.arc(x, y, particle.size, 0, Math.PI * 2);
+                    ctx.fillStyle = colors.knowledgeFlow;
+                    ctx.shadowBlur = 10;
+                    ctx.shadowColor = colors.knowledgeFlow;
+                    ctx.fill();
+                    ctx.shadowBlur = 0;
+                });
+
+                // Draw teacher nodes
+                teacherNodes.forEach(node => {
+                    if (node.radius < 0.1) return;
+
+                    node.pulse += 0.015;
+                    const pulseSize = 1 + Math.sin(node.pulse) * 0.08;
+                    const activationBoost = node.activation * 1.5;
+                    const finalRadius = node.radius * pulseSize + activationBoost;
+
+                    if (node.activation > 0.15) {
+                        const glowRadius = finalRadius * 3;
+                        const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, glowRadius);
+                        const glowAlpha = node.activation * 0.4;
+                        const rgb = colors.teacher.match(/[\d.]+/g);
+                        gradient.addColorStop(0, `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${glowAlpha})`);
+                        gradient.addColorStop(1, `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`);
+                        ctx.beginPath();
+                        ctx.arc(node.x, node.y, glowRadius, 0, Math.PI * 2);
+                        ctx.fillStyle = gradient;
+                        ctx.fill();
+                    }
+
+                    ctx.beginPath();
+                    ctx.arc(node.x, node.y, finalRadius, 0, Math.PI * 2);
+                    const rgb = colors.teacherNode.match(/[\d.]+/g);
+                    const alpha = Math.max(0.5, parseFloat(rgb[3]) + node.activation * 0.3);
+                    ctx.fillStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+                    ctx.fill();
+                });
+
+                // Draw student nodes
+                studentNodes.forEach(node => {
+                    if (node.radius < 0.1) return;
+
+                    node.pulse += 0.015;
+                    const pulseSize = 1 + Math.sin(node.pulse) * 0.08;
+                    const activationBoost = node.activation * 1.5;
+                    const finalRadius = node.radius * pulseSize + activationBoost;
+
+                    if (node.activation > 0.15) {
+                        const glowRadius = finalRadius * 3;
+                        const gradient = ctx.createRadialGradient(node.x, node.y, 0, node.x, node.y, glowRadius);
+                        const glowAlpha = node.activation * 0.4;
+                        const rgb = colors.student.match(/[\d.]+/g);
+                        gradient.addColorStop(0, `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${glowAlpha})`);
+                        gradient.addColorStop(1, `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, 0)`);
+                        ctx.beginPath();
+                        ctx.arc(node.x, node.y, glowRadius, 0, Math.PI * 2);
+                        ctx.fillStyle = gradient;
+                        ctx.fill();
+                    }
+
+                    ctx.beginPath();
+                    ctx.arc(node.x, node.y, finalRadius, 0, Math.PI * 2);
+                    const rgb = colors.studentNode.match(/[\d.]+/g);
+                    const alpha = Math.max(0.5, parseFloat(rgb[3]) + node.activation * 0.3);
+                    ctx.fillStyle = `rgba(${rgb[0]}, ${rgb[1]}, ${rgb[2]}, ${alpha})`;
+                    ctx.fill();
+                });
+
+                // Draw labels below networks
+                ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+                const labelColor = isDark 
+                    ? 'rgba(255, 255, 255, 0.4)' 
+                    : 'rgba(0, 0, 0, 0.4)';
+                ctx.fillStyle = labelColor;
+                // Center labels below their respective networks, closer to the networks
+                ctx.fillText('Teacher', teacherCenterX, height - margin + 12);
+                ctx.fillText('Student', studentCenterX, height - margin + 12);
+
+                requestAnimationFrame(draw);
+            };
+
+            // Start
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(resize);
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', resize);
+            }
+
+            resize();
+            draw();
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => ensureAnime(bootstrap), { once: true });
+        } else {
+            ensureAnime(bootstrap);
+        }
+    })();
+</script>

app/src/content/embeds/banner-sequence-alignment-svg.html

@@ -0,0 +1,374 @@
+<div class="sequence-alignment-visualization"
+    style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;position:relative;overflow:hidden;background:var(--surface-bg);border-radius:12px;border:1px solid var(--border-color);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);display:flex;">
+    <div class="section-container" style="flex:1;position:relative;border-right:1px dashed var(--border-color);padding:20px;">
+        <div style="position:absolute;top:10px;left:20px;font-weight:600;font-size:12px;color:var(--text-color);">
+            1. Determine the token merges
+        </div>
+        <div id="svg-section1" style="width:100%;height:calc(100% - 30px);margin-top:30px;"></div>
+    </div>
+    <div class="section-container" style="flex:1;position:relative;padding:20px;">
+        <div style="position:absolute;top:10px;left:20px;font-weight:600;font-size:12px;color:var(--text-color);">
+            2. Add logprob tensors in the merged positions
+        </div>
+        <div id="svg-section2" style="width:100%;height:calc(100% - 30px);margin-top:30px;"></div>
+    </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/3.2.5/svg.min.js"></script>
+<script>
+    (function () {
+        const getColors = () => {
+            const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+            return {
+                originalToken: isDark ? 'rgba(134, 239, 172, 0.4)' : 'rgba(187, 247, 208, 0.7)',
+                subToken: isDark ? 'rgba(251, 191, 36, 0.7)' : 'rgba(253, 224, 71, 0.8)',
+                mergedToken: isDark ? 'rgba(147, 197, 253, 0.5)' : 'rgba(191, 219, 254, 0.7)',
+                text: isDark ? 'rgba(255, 255, 255, 0.95)' : 'rgba(0, 0, 0, 0.9)',
+                line: isDark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.35)',
+                plus: isDark ? 'rgba(255, 255, 255, 0.7)' : 'rgba(0, 0, 0, 0.7)',
+            };
+        };
+
+        function drawSection1() {
+            const container = document.getElementById('svg-section1');
+            if (!container) return;
+
+            container.innerHTML = '';
+            const colors = getColors();
+
+            const draw = SVG().addTo(container).size('100%', '100%');
+            const width = container.clientWidth || 400;
+            const height = container.clientHeight || 220;
+
+            // Calculate scale based on available width
+            const baseTotalWidth = 180 + 110 + 40 + 90 + 180 + (15 * 4);
+            const scale = Math.min(1, (width - 40) / baseTotalWidth);
+
+            const padding = 15 * scale;
+            const tokenHeight = 35 * scale;
+            const spacing = 15 * scale;
+            const subTokenSmallSize = 24 * scale;
+            const subTokenLargeWidth = 70 * scale;
+            const subTokenLargeHeight = 24 * scale;
+
+            const originalWords = [
+                { text: '<think>', subTokens: [
+                    { id: 0, type: 'small' },
+                    { id: 1, type: 'small' },
+                    { id: 2, type: 'small' }
+                ], width: 180 * scale },
+                { text: 'Hugging Face', subTokens: [
+                    { id: 3, type: 'large' }
+                ], width: 110 * scale },
+                { text: 'is', subTokens: [
+                    { id: 4, type: 'small' }
+                ], width: 40 * scale },
+                { text: 'awesome!', subTokens: [
+                    { id: 5, type: 'large' }
+                ], width: 90 * scale },
+                { text: '</think>', subTokens: [
+                    { id: 6, type: 'small' },
+                    { id: 7, type: 'small' },
+                    { id: 8, type: 'small' },
+                    { id: 9, type: 'small' }
+                ], width: 180 * scale }
+            ];
+
+            // Store word centers for alignment
+            const wordCenters = [];
+            let currentX = padding;
+            const originalY = height * 0.18;
+            const subTokenY = height * 0.45;
+            const mergedY = height * 0.72;
+
+            // Draw original words and sub-tokens
+            originalWords.forEach((word, wordIdx) => {
+                const wordCenterX = currentX + word.width / 2;
+                wordCenters.push(wordCenterX);
+
+                // Original word (green)
+                draw.rect(word.width, tokenHeight)
+                    .move(currentX, originalY - tokenHeight / 2)
+                    .radius(10 * scale)
+                    .fill(colors.originalToken)
+                    .stroke({ color: colors.line, width: 1.5 * scale });
+
+                draw.text(word.text)
+                    .move(currentX + word.width / 2, originalY)
+                    .font({
+                        family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                        size: 11 * scale,
+                        anchor: 'middle',
+                        weight: '500'
+                    })
+                    .fill(colors.text);
+
+                // Sub-tokens (yellow) below - small squares or large rectangles
+                const subTokenGap = 4 * scale;
+                
+                // Calculate total width for centering
+                let subTokensTotalWidth = 0;
+                word.subTokens.forEach((st, idx) => {
+                    subTokensTotalWidth += st.type === 'small' ? subTokenSmallSize : subTokenLargeWidth;
+                    if (idx < word.subTokens.length - 1) subTokensTotalWidth += subTokenGap;
+                });
+                
+                let subTokenX = currentX + (word.width - subTokensTotalWidth) / 2;
+
+                word.subTokens.forEach((st) => {
+                    const stWidth = st.type === 'small' ? subTokenSmallSize : subTokenLargeWidth;
+                    const stHeight = st.type === 'small' ? subTokenSmallSize : subTokenLargeHeight;
+
+                    draw.rect(stWidth, stHeight)
+                        .move(subTokenX, subTokenY - stHeight / 2)
+                        .radius(6 * scale)
+                        .fill(colors.subToken)
+                        .stroke({ color: colors.line, width: 1.5 * scale });
+
+                    draw.text(st.id.toString())
+                        .move(subTokenX + stWidth / 2, subTokenY)
+                        .font({
+                            family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                            size: 10 * scale,
+                            anchor: 'middle',
+                            weight: '600'
+                        })
+                        .fill(colors.text);
+                    
+                    subTokenX += stWidth + subTokenGap;
+                });
+
+                // Vertical dotted line from word center
+                draw.line(wordCenterX, originalY + tokenHeight / 2 + (3 * scale), wordCenterX, mergedY - tokenHeight / 2 - (3 * scale))
+                    .stroke({ color: colors.line, width: 1.5 * scale, dasharray: '4,4' });
+
+                currentX += word.width + spacing;
+            });
+
+            // Merged tokens (blue rectangles) at bottom
+            // Groups of tokens: some have multiple rectangles side-by-side
+            const mergedTokenGroups = [
+                { ids: [0], alignToWord: 0 },        // Single token "0" under <think>
+                { ids: [1, 2], alignToWord: null, x: wordCenters[0] + (wordCenters[1] - wordCenters[0]) * 0.55 },  // Two tokens "1", "2" between words
+                { ids: [3], alignToWord: 1 },        // Single token "3" under Hugging Face
+                { ids: [4], alignToWord: 2 },        // Single token "4" under is
+                { ids: [5], alignToWord: 3 }         // Single token "5" under awesome!
+            ];
+
+            const mergedTokenWidth = 55 * scale;
+            const mergedTokenGap = 2 * scale;
+
+            mergedTokenGroups.forEach((group) => {
+                const groupTotalWidth = group.ids.length * mergedTokenWidth + (group.ids.length - 1) * mergedTokenGap;
+                
+                // Determine X position: either aligned to word or custom position
+                let groupX;
+                if (group.alignToWord !== null) {
+                    groupX = wordCenters[group.alignToWord] - groupTotalWidth / 2;
+                } else {
+                    groupX = group.x - groupTotalWidth / 2;
+                }
+
+                // Draw each token in the group
+                group.ids.forEach((id, idIdx) => {
+                    const tokenX = groupX + idIdx * (mergedTokenWidth + mergedTokenGap);
+
+                    draw.rect(mergedTokenWidth, tokenHeight)
+                        .move(tokenX, mergedY - tokenHeight / 2)
+                        .radius(8 * scale)
+                        .fill(colors.mergedToken)
+                        .stroke({ color: colors.line, width: 1.5 * scale });
+
+                    draw.text(id.toString())
+                        .move(tokenX + mergedTokenWidth / 2, mergedY)
+                        .font({
+                            family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                            size: 11 * scale,
+                            anchor: 'middle',
+                            weight: '600'
+                        })
+                        .fill(colors.text);
+                });
+            });
+        }
+
+        function drawSection2() {
+            const container = document.getElementById('svg-section2');
+            if (!container) return;
+
+            container.innerHTML = '';
+            const colors = getColors();
+
+            const draw = SVG().addTo(container).size('100%', '100%');
+            const width = container.clientWidth || 400;
+            const height = container.clientHeight || 220;
+
+            // Calculate scale based on available width
+            const baseTotalWidth = 180 + 110 + 35 + 80 + 160 + (15 * 4);
+            const scale = Math.min(1, (width - 40) / baseTotalWidth);
+
+            const padding = 15 * scale;
+            const logprobStackHeight = 55 * scale;
+            const logprobRectSize = 14 * scale;
+            const logprobSpacing = 4 * scale;
+            const rectsPerStack = 4; // Input stacks have 4 rectangles
+            const stackWidth = (logprobRectSize + logprobSpacing) * rectsPerStack - logprobSpacing;
+            const spacing = 15 * scale;
+
+            const words = [
+                { text: '<think>', stacks: 3, width: 180 * scale },
+                { text: 'Hugging Face', stacks: 1, width: 110 * scale },
+                { text: 'is', stacks: 1, width: 35 * scale },
+                { text: 'awesome!', stacks: 1, width: 80 * scale },
+                { text: '</think>', stacks: 4, width: 160 * scale }
+            ];
+
+            const wordCenters = [];
+            let currentX = padding;
+            const inputY = height * 0.18;
+            const outputY = height * 0.72;
+
+            // Draw input logprob tensors (yellow stacks)
+            words.forEach((word, wordIdx) => {
+                const wordCenterX = currentX + word.width / 2;
+                wordCenters.push(wordCenterX);
+
+                // Draw multiple stacks for words that merge
+                const stackGap = 12 * scale;
+                const totalStacksWidth = word.stacks * stackWidth + (word.stacks - 1) * stackGap;
+                const stacksStartX = wordCenterX - totalStacksWidth / 2;
+
+                for (let s = 0; s < word.stacks; s++) {
+                    const stackX = stacksStartX + s * (stackWidth + stackGap);
+
+                    // Draw stack of rectangles (4 rectangles per stack)
+                    for (let i = 0; i < rectsPerStack; i++) {
+                        const rectY = inputY - logprobStackHeight / 2 + i * (logprobRectSize + logprobSpacing);
+
+                        draw.rect(logprobRectSize, logprobRectSize)
+                            .move(stackX, rectY)
+                            .radius(4 * scale)
+                            .fill(colors.subToken)
+                            .stroke({ color: colors.line, width: 1 * scale });
+                    }
+
+                    // Draw plus signs between stacks (except last)
+                    if (s < word.stacks - 1) {
+                        const plusX = stackX + stackWidth + stackGap / 2;
+                        draw.text('+')
+                            .move(plusX, inputY)
+                            .font({
+                                family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                                size: 18 * scale,
+                                anchor: 'middle',
+                                weight: 'bold'
+                            })
+                            .fill(colors.plus);
+                    }
+                }
+
+                // Word label below input stacks
+                const labelHeight = 20 * scale;
+                const labelY = inputY + logprobStackHeight / 2 + (18 * scale);
+
+                draw.rect(word.width, labelHeight)
+                    .move(currentX, labelY - labelHeight / 2)
+                    .radius(5 * scale)
+                    .fill(colors.originalToken)
+                    .stroke({ color: colors.line, width: 1 * scale });
+
+                draw.text(word.text)
+                    .move(currentX + word.width / 2, labelY)
+                    .font({
+                        family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                        size: 10 * scale,
+                        anchor: 'middle',
+                        weight: '500'
+                    })
+                    .fill(colors.text);
+
+                // Vertical dotted line from label to output
+                draw.line(wordCenterX, labelY + labelHeight / 2 + (5 * scale), wordCenterX, outputY - logprobStackHeight / 2 - (5 * scale))
+                    .stroke({ color: colors.line, width: 1.5 * scale, dasharray: '4,4' });
+
+                currentX += word.width + spacing;
+            });
+
+            // Draw output logprob tensors (blue stacks) - 5 rectangles per stack
+            words.forEach((word, wordIdx) => {
+                const wordCenterX = wordCenters[wordIdx];
+
+                // Single output stack (merged) - 5 rectangles!
+                const outputRectsPerStack = 5;
+                const outputStackWidth = (logprobRectSize + logprobSpacing) * outputRectsPerStack - logprobSpacing;
+                const adjustedStackX = wordCenterX - outputStackWidth / 2;
+
+                for (let i = 0; i < outputRectsPerStack; i++) {
+                    const rectY = outputY - logprobStackHeight / 2 + i * (logprobRectSize + logprobSpacing);
+                    const rectX = adjustedStackX + i * (logprobRectSize + logprobSpacing);
+
+                    draw.rect(logprobRectSize, logprobRectSize)
+                        .move(rectX, rectY)
+                        .radius(4 * scale)
+                        .fill(colors.mergedToken)
+                        .stroke({ color: colors.line, width: 1 * scale });
+                }
+
+                // Word label below output stacks
+                const labelHeight = 20 * scale;
+                const labelY = outputY + logprobStackHeight / 2 + (18 * scale);
+
+                draw.rect(word.width, labelHeight)
+                    .move(wordCenters[wordIdx] - word.width / 2, labelY - labelHeight / 2)
+                    .radius(5 * scale)
+                    .fill(colors.mergedToken)
+                    .stroke({ color: colors.line, width: 1 * scale });
+
+                draw.text(word.text)
+                    .move(wordCenters[wordIdx], labelY)
+                    .font({
+                        family: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+                        size: 10 * scale,
+                        anchor: 'middle',
+                        weight: '500'
+                    })
+                    .fill(colors.text);
+            });
+        }
+
+        function resize() {
+            drawSection1();
+            drawSection2();
+        }
+
+        // Watch for theme changes
+        const observer = new MutationObserver(() => {
+            resize();
+        });
+        observer.observe(document.documentElement, {
+            attributes: true,
+            attributeFilter: ['data-theme']
+        });
+
+        // Initialize
+        const container = document.querySelector('.sequence-alignment-visualization');
+        if (container) {
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(resize);
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', resize);
+            }
+
+            // Wait for SVG.js to load
+            const checkSVG = () => {
+                if (typeof SVG !== 'undefined') {
+                    resize();
+                } else {
+                    setTimeout(checkSVG, 50);
+                }
+            };
+            checkSVG();
+        }
+    })();
+</script>

app/src/content/embeds/banner-sequence-alignment.html

@@ -0,0 +1,317 @@
+<div class="sequence-alignment-visualization"
+    style="width:100%;margin:10px 0;aspect-ratio:3/1;min-height:260px;position:relative;overflow:hidden;background:var(--surface-bg);border-radius:12px;border:1px solid var(--border-color);box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);display:flex;">
+    <div class="section-container" style="flex:1;position:relative;border-right:1px dashed var(--border-color);padding:20px;">
+        <div style="position:absolute;top:10px;left:20px;font-weight:600;font-size:12px;color:var(--text-color);">
+            1. Determine the token merges
+        </div>
+        <canvas id="canvas-section1" style="width:100%;height:100%;display:block;"></canvas>
+    </div>
+    <div class="section-container" style="flex:1;position:relative;padding:20px;">
+        <div style="position:absolute;top:10px;left:20px;font-weight:600;font-size:12px;color:var(--text-color);">
+            2. Add logprob tensors in the merged positions
+        </div>
+        <canvas id="canvas-section2" style="width:100%;height:100%;display:block;"></canvas>
+    </div>
+</div>
+<script>
+    (() => {
+        const getColors = () => {
+            const isDark = document.documentElement.getAttribute('data-theme') === 'dark';
+            return {
+                originalToken: isDark ? 'rgba(134, 239, 172, 0.3)' : 'rgba(187, 247, 208, 0.6)',
+                subToken: isDark ? 'rgba(251, 191, 36, 0.6)' : 'rgba(253, 224, 71, 0.7)',
+                mergedToken: isDark ? 'rgba(147, 197, 253, 0.4)' : 'rgba(191, 219, 254, 0.6)',
+                text: isDark ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.85)',
+                line: isDark ? 'rgba(255, 255, 255, 0.25)' : 'rgba(0, 0, 0, 0.3)',
+                plus: isDark ? 'rgba(255, 255, 255, 0.6)' : 'rgba(0, 0, 0, 0.6)',
+            };
+        };
+
+        // Helper: rounded rectangle
+        if (!CanvasRenderingContext2D.prototype.roundRect) {
+            CanvasRenderingContext2D.prototype.roundRect = function(x, y, w, h, r) {
+                if (w < 2 * r) r = w / 2;
+                if (h < 2 * r) r = h / 2;
+                this.moveTo(x + r, y);
+                this.lineTo(x + w - r, y);
+                this.quadraticCurveTo(x + w, y, x + w, y + r);
+                this.lineTo(x + w, y + h - r);
+                this.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+                this.lineTo(x + r, y + h);
+                this.quadraticCurveTo(x, y + h, x, y + h - r);
+                this.lineTo(x, y + r);
+                this.quadraticCurveTo(x, y, x + r, y);
+            };
+        }
+
+        const drawSection1 = (canvas, colors) => {
+            const ctx = canvas.getContext('2d');
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            ctx.clearRect(0, 0, width, height);
+
+            // Calculate scale based on available width
+            const totalContentWidth = 180 + 120 + 50 + 100 + 200 + (15 * 4); // widths + spacings
+            const scale = Math.min(1, (width - 40) / totalContentWidth);
+            
+            const padding = 20 * scale;
+            const tokenHeight = 32 * scale;
+            const spacing = 15 * scale;
+            const subTokenSize = 18 * scale;
+
+            const originalWords = [
+                { text: '<think>', subTokens: [0, 1, 2], width: 180 * scale },
+                { text: 'Hugging Face', subTokens: [3], width: 120 * scale },
+                { text: 'is', subTokens: [4], width: 50 * scale },
+                { text: 'awesome!', subTokens: [5], width: 100 * scale },
+                { text: '</think>', subTokens: [6, 7, 8, 9], width: 200 * scale }
+            ];
+
+            let currentX = padding;
+            const originalY = height * 0.2;
+            const subTokenY = height * 0.45;
+            const mergedY = height * 0.7;
+
+            // Draw original words and sub-tokens
+            originalWords.forEach((word) => {
+                // Original word (green)
+                ctx.fillStyle = colors.originalToken;
+                ctx.beginPath();
+                ctx.roundRect(currentX, originalY - tokenHeight / 2, word.width, tokenHeight, 8);
+                ctx.fill();
+
+                ctx.fillStyle = colors.text;
+                ctx.font = `${10 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(word.text, currentX + word.width / 2, originalY);
+
+                // Sub-tokens (yellow) below
+                const subTokenSpacing = word.width / (word.subTokens.length + 1);
+                word.subTokens.forEach((stId, stIdx) => {
+                    const stX = currentX + subTokenSpacing * (stIdx + 1) - subTokenSize / 2;
+                    ctx.fillStyle = colors.subToken;
+                    ctx.beginPath();
+                    ctx.roundRect(stX, subTokenY - subTokenSize / 2, subTokenSize, subTokenSize, 5);
+                    ctx.fill();
+
+                    ctx.fillStyle = colors.text;
+                    ctx.font = `${9 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+                    ctx.fillText(stId.toString(), stX + subTokenSize / 2, subTokenY);
+                });
+
+                // Vertical dotted line
+                ctx.strokeStyle = colors.line;
+                ctx.lineWidth = 1;
+                ctx.setLineDash([3, 3]);
+                ctx.beginPath();
+                ctx.moveTo(currentX + word.width / 2, originalY + tokenHeight / 2);
+                ctx.lineTo(currentX + word.width / 2, mergedY - tokenHeight / 2);
+                ctx.stroke();
+                ctx.setLineDash([]);
+
+                currentX += word.width + spacing;
+            });
+
+            // Merged tokens (blue rectangles) at bottom - showing IDs (0, 1, 2, 3, 4)
+            const mergedTokens = [
+                { id: 0, fromSubTokens: [0, 1, 2], width: 60 * scale },
+                { id: 1, fromSubTokens: [3], width: 60 * scale },
+                { id: 2, fromSubTokens: [4], width: 60 * scale },
+                { id: 3, fromSubTokens: [5], width: 60 * scale },
+                { id: 4, fromSubTokens: [6, 7, 8, 9], width: 60 * scale }
+            ];
+
+            currentX = padding + (originalWords.reduce((sum, w) => sum + w.width + spacing, -spacing) - mergedTokens.reduce((sum, t) => sum + t.width + spacing, -spacing)) / 2;
+            mergedTokens.forEach((token) => {
+                ctx.fillStyle = colors.mergedToken;
+                ctx.beginPath();
+                ctx.roundRect(currentX, mergedY - tokenHeight / 2, token.width, tokenHeight, 8);
+                ctx.fill();
+
+                ctx.fillStyle = colors.text;
+                ctx.font = `${10 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(token.id.toString(), currentX + token.width / 2, mergedY);
+
+                currentX += token.width + spacing;
+            });
+        };
+
+        const drawSection2 = (canvas, colors) => {
+            const ctx = canvas.getContext('2d');
+            const width = canvas.width;
+            const height = canvas.height;
+            
+            ctx.clearRect(0, 0, width, height);
+
+            // Calculate scale based on available width
+            const totalContentWidth = 180 + 120 + 50 + 100 + 200 + (20 * 4); // widths + spacings
+            const scale = Math.min(1, (width - 40) / totalContentWidth);
+            
+            const padding = 20 * scale;
+            const logprobStackHeight = 60 * scale;
+            const logprobRectSize = 12 * scale;
+            const logprobSpacing = 3 * scale;
+            const rectsPerStack = 4; // Input stacks have 4 rectangles
+            const stackWidth = (logprobRectSize + logprobSpacing) * rectsPerStack - logprobSpacing;
+            const spacing = 20 * scale;
+
+            const words = [
+                { text: '<think>', stacks: 3, width: 180 * scale },
+                { text: 'Hugging Face', stacks: 1, width: 120 * scale },
+                { text: 'is', stacks: 1, width: 50 * scale },
+                { text: 'awesome!', stacks: 1, width: 100 * scale },
+                { text: '</think>', stacks: 4, width: 200 * scale }
+            ];
+
+            let currentX = padding;
+            const inputY = height * 0.2;
+            const outputY = height * 0.7;
+
+            // Draw input logprob tensors (yellow stacks)
+            words.forEach((word) => {
+                const wordCenterX = currentX + word.width / 2;
+                
+                // Draw multiple stacks for words that merge
+                for (let s = 0; s < word.stacks; s++) {
+                    const stackX = wordCenterX - (word.stacks - 1) * (stackWidth + 8) / 2 + s * (stackWidth + 8);
+                    
+                    // Draw stack of rectangles
+                    for (let i = 0; i < rectsPerStack; i++) {
+                        const rectY = inputY - logprobStackHeight / 2 + i * (logprobRectSize + logprobSpacing);
+                        ctx.fillStyle = colors.subToken;
+                        ctx.beginPath();
+                        ctx.roundRect(stackX, rectY, logprobRectSize, logprobRectSize, 3);
+                        ctx.fill();
+                    }
+
+                    // Draw plus signs between stacks (except last)
+                    if (s < word.stacks - 1) {
+                        ctx.fillStyle = colors.plus;
+                        ctx.font = `bold ${14 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+                        ctx.textAlign = 'center';
+                        ctx.fillText('+', stackX + stackWidth / 2 + (4 * scale), inputY);
+                    }
+                }
+
+                // Word label below stacks
+                const labelY = inputY + logprobStackHeight / 2 + (12 * scale);
+                ctx.fillStyle = colors.originalToken;
+                ctx.beginPath();
+                ctx.roundRect(currentX, labelY - (8 * scale), word.width, 16 * scale, 4 * scale);
+                ctx.fill();
+
+                ctx.fillStyle = colors.text;
+                ctx.font = `${9 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(word.text, currentX + word.width / 2, labelY);
+
+                // Vertical dotted line
+                ctx.strokeStyle = colors.line;
+                ctx.lineWidth = 1;
+                ctx.setLineDash([3, 3]);
+                ctx.beginPath();
+                ctx.moveTo(wordCenterX, labelY + (8 * scale));
+                ctx.lineTo(wordCenterX, outputY - logprobStackHeight / 2);
+                ctx.stroke();
+                ctx.setLineDash([]);
+
+                currentX += word.width + spacing;
+            });
+
+            // Draw output logprob tensors (blue stacks) - 5 rectangles per stack
+            currentX = padding;
+            words.forEach((word) => {
+                const wordCenterX = currentX + word.width / 2;
+                
+                // Single output stack (merged) - 5 rectangles!
+                const outputRectsPerStack = 5;
+                const outputStackWidth = (logprobRectSize + logprobSpacing) * outputRectsPerStack - logprobSpacing;
+                const adjustedStackX = wordCenterX - outputStackWidth / 2;
+                
+                for (let i = 0; i < outputRectsPerStack; i++) {
+                    const rectY = outputY - logprobStackHeight / 2 + i * (logprobRectSize + logprobSpacing);
+                    const rectX = adjustedStackX + i * (logprobRectSize + logprobSpacing);
+                    ctx.fillStyle = colors.mergedToken;
+                    ctx.beginPath();
+                    ctx.roundRect(rectX, rectY, logprobRectSize, logprobRectSize, 3);
+                    ctx.fill();
+                }
+
+                // Word label below output stacks
+                const labelY = outputY + logprobStackHeight / 2 + (12 * scale);
+                ctx.fillStyle = colors.mergedToken;
+                ctx.beginPath();
+                ctx.roundRect(currentX, labelY - (8 * scale), word.width, 16 * scale, 4 * scale);
+                ctx.fill();
+
+                ctx.fillStyle = colors.text;
+                ctx.font = `${9 * scale}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(word.text, currentX + word.width / 2, labelY);
+
+                currentX += word.width + spacing;
+            });
+        };
+
+        const setupCanvas = (canvasId, drawFn) => {
+            const container = document.querySelector('.sequence-alignment-visualization');
+            if (!container) return;
+
+            const canvas = document.getElementById(canvasId);
+            if (!canvas) return;
+
+            const resize = () => {
+                const sectionContainer = canvas.closest('.section-container');
+                if (!sectionContainer) return;
+
+                const containerRect = container.getBoundingClientRect();
+                const sectionRect = sectionContainer.getBoundingClientRect();
+                
+                // Account for padding (20px each side) and label space (30px at top)
+                const width = Math.max(100, sectionRect.width - 40);
+                const height = Math.max(150, containerRect.height - 50);
+                
+                canvas.width = width;
+                canvas.height = height;
+                
+                const colors = getColors();
+                drawFn(canvas, colors);
+            };
+
+            // Watch for theme changes
+            const observer = new MutationObserver(() => {
+                resize();
+            });
+            observer.observe(document.documentElement, {
+                attributes: true,
+                attributeFilter: ['data-theme']
+            });
+
+            if (window.ResizeObserver) {
+                const ro = new ResizeObserver(resize);
+                ro.observe(container);
+            } else {
+                window.addEventListener('resize', resize);
+            }
+
+            resize();
+        };
+
+        const bootstrap = () => {
+            setupCanvas('canvas-section1', drawSection1);
+            setupCanvas('canvas-section2', drawSection2);
+        };
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', bootstrap, { once: true });
+        } else {
+            bootstrap();
+        }
+    })();
+</script>