diff --git a/apps/site/.env.example b/apps/site/.env.example
index 2ad925ae..e6e237d4 100644
--- a/apps/site/.env.example
+++ b/apps/site/.env.example
@@ -8,6 +8,6 @@
 # Leave empty to disable analytics in this build.
 PUBLIC_CLARITY_ID=
 
-# Waitlist subscribe endpoint (Cloudflare Worker URL + /subscribe).
-# Leave empty to disable form submission gracefully.
-PUBLIC_WAITLIST_ENDPOINT=
+# Generic analytics collector endpoint that accepts JSON POST payloads.
+# Leave empty to disable the built-in pageview and click tracking.
+PUBLIC_ANALYTICS_ENDPOINT=
diff --git a/apps/site/astro.config.mjs b/apps/site/astro.config.mjs
index 0bd4df59..1d9f6c31 100644
--- a/apps/site/astro.config.mjs
+++ b/apps/site/astro.config.mjs
@@ -10,6 +10,7 @@ export default defineConfig({
 		react(),
 		starlight({
 			title: 'TouchAI',
+			disable404Route: true,
 			social: [{ icon: 'github', label: 'GitHub', href: 'https://github.com/TouchAI-org/TouchAI' }],
 			sidebar: [
 			],
diff --git a/apps/site/public/apple-touch-icon.png b/apps/site/public/apple-touch-icon.png
new file mode 100644
index 00000000..69e40dd4
Binary files /dev/null and b/apps/site/public/apple-touch-icon.png differ
diff --git a/apps/site/public/demo-utils/touchai-lite-math.js b/apps/site/public/demo-utils/touchai-lite-math.js
new file mode 100644
index 00000000..03b79cd6
--- /dev/null
+++ b/apps/site/public/demo-utils/touchai-lite-math.js
@@ -0,0 +1,262 @@
+(function () {
+    const getRenderer = () => window.TouchAILiteRenderer;
+
+    function escapeHtml(value) {
+        const renderer = getRenderer();
+        if (renderer?.escapeHtml) {
+            return renderer.escapeHtml(value);
+        }
+
+        return String(value)
+            .replace(/&/g, '&')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;')
+            .replace(/'/g, '&#39;')
+            .replace(/`/g, '&#96;');
+    }
+
+    function normalizeFormula(source) {
+        return String(source)
+            .replace(/\\left/g, '')
+            .replace(/\\right/g, '')
+            .replace(/\\,/g, ' ')
+            .replace(/\\:/g, ' ')
+            .replace(/\\;/g, ' ')
+            .replace(/\\quad/g, '  ')
+            .replace(/\\qquad/g, '    ')
+            .replace(/\\!/g, '');
+    }
+
+    function renderFormula(source, displayMode) {
+        if (window.katex && typeof window.katex.renderToString === 'function') {
+            try {
+                return window.katex.renderToString(String(source), {
+                    displayMode,
+                    throwOnError: false,
+                    strict: 'ignore',
+                    trust: false,
+                });
+            } catch {
+                // Fall back to the lightweight renderer below.
+            }
+        }
+
+        const input = normalizeFormula(source);
+        let index = 0;
+
+        const commandMap = {
+            theta: 'θ',
+            cos: 'cos',
+            sin: 'sin',
+            max: 'max',
+            min: 'min',
+            in: '∈',
+            Rightarrow: '⇒',
+            to: '→',
+            cdot: '·',
+        };
+
+        const readCommandName = () => {
+            index += 1;
+            let name = '';
+            while (index < input.length && /[A-Za-z]/.test(input[index])) {
+                name += input[index];
+                index += 1;
+            }
+
+            if (!name && index < input.length) {
+                name = input[index];
+                index += 1;
+            }
+
+            return name;
+        };
+
+        const readRawGroup = () => {
+            if (input[index] !== '{') {
+                const start = index;
+                index += 1;
+                return input.slice(start, index);
+            }
+
+            index += 1;
+            let depth = 1;
+            let value = '';
+
+            while (index < input.length && depth > 0) {
+                const char = input[index];
+                index += 1;
+
+                if (char === '{') {
+                    depth += 1;
+                    value += char;
+                    continue;
+                }
+
+                if (char === '}') {
+                    depth -= 1;
+                    if (depth > 0) value += char;
+                    continue;
+                }
+
+                value += char;
+            }
+
+            return value;
+        };
+
+        const readArgument = () => {
+            while (input[index] === ' ') index += 1;
+
+            if (index >= input.length) return '';
+
+            if (input[index] === '{') {
+                const raw = readRawGroup();
+                return renderFormula(raw, false);
+            }
+
+            if (input[index] === '\\') {
+                const command = readCommandName();
+                if (command === 'text') {
+                    return `<span class="op">${escapeHtml(readRawGroup())}</span>`;
+                }
+                if (command === 'frac') {
+                    const num = readArgument();
+                    const den = readArgument();
+                    return `<span class="frac"><span class="num">${num}</span><span class="den">${den}</span></span>`;
+                }
+                if (command === 'sqrt') {
+                    const radicand = readArgument();
+                    return `<span class="root"><span class="radicand">${radicand}</span></span>`;
+                }
+                if (command === 'boxed') {
+                    return `<span class="boxed-formula">${readArgument()}</span>`;
+                }
+
+                const mapped = commandMap[command] ?? command;
+                return `<span class="${/^[A-Za-z]+$/.test(mapped) ? 'op' : 'punct'}">${escapeHtml(mapped)}</span>`;
+            }
+
+            const char = input[index];
+            index += 1;
+            return escapeHtml(char);
+        };
+
+        const parse = (stopChar) => {
+            let html = '';
+
+            while (index < input.length) {
+                const char = input[index];
+
+                if (stopChar && char === stopChar) {
+                    index += 1;
+                    break;
+                }
+
+                if (char === '{') {
+                    index += 1;
+                    html += parse('}');
+                    continue;
+                }
+
+                if (char === '^' || char === '_') {
+                    index += 1;
+                    const tag = char === '^' ? 'sup' : 'sub';
+                    html += `<${tag}>${readArgument()}</${tag}>`;
+                    continue;
+                }
+
+                if (char === '\\') {
+                    const command = readCommandName();
+
+                    if (command === 'frac') {
+                        const num = readArgument();
+                        const den = readArgument();
+                        html += `<span class="frac"><span class="num">${num}</span><span class="den">${den}</span></span>`;
+                        continue;
+                    }
+
+                    if (command === 'sqrt') {
+                        const radicand = readArgument();
+                        html += `<span class="root"><span class="radicand">${radicand}</span></span>`;
+                        continue;
+                    }
+
+                    if (command === 'boxed') {
+                        html += `<span class="boxed-formula">${readArgument()}</span>`;
+                        continue;
+                    }
+
+                    if (command === 'text') {
+                        html += `<span class="op">${escapeHtml(readRawGroup())}</span>`;
+                        continue;
+                    }
+
+                    if (
+                        command === ',' ||
+                        command === ':' ||
+                        command === ';' ||
+                        command === 'quad' ||
+                        command === 'qquad'
+                    ) {
+                        html += ' ';
+                        continue;
+                    }
+
+                    const mapped = commandMap[command] ?? command;
+                    const className = /^[A-Za-z]+$/.test(mapped) ? 'op' : 'punct';
+                    html += `<span class="${className}">${escapeHtml(mapped)}</span>`;
+                    continue;
+                }
+
+                html += escapeHtml(char);
+                index += 1;
+            }
+
+            return html;
+        };
+
+        const inner = parse();
+        const className = displayMode ? 'formula-module' : 'formula-module inline-formula';
+
+        return `<span class="${className}">${inner}</span>`;
+    }
+
+    function renderMarkdownWithMath(markdown) {
+        const mathTokens = [];
+        const protectedMarkdown = String(markdown)
+            .replace(/\$\$([\s\S]+?)\$\$/g, (_, formula) => {
+                const token = `@@MATH_BLOCK_${mathTokens.length}@@`;
+                mathTokens.push({ token, formula: formula.trim(), display: true });
+                return `\n\n${token}\n\n`;
+            })
+            .replace(/\$([^$\n]+?)\$/g, (_, formula) => {
+                const token = `@@MATH_INLINE_${mathTokens.length}@@`;
+                mathTokens.push({ token, formula: formula.trim(), display: false });
+                return token;
+            });
+
+        const renderer = getRenderer();
+        let html = renderer
+            ? renderer.renderMarkdownContent(protectedMarkdown)
+            : escapeHtml(protectedMarkdown);
+
+        mathTokens.forEach(({ token, formula, display }) => {
+            const rendered = renderFormula(formula, display);
+            const replacement = display
+                ? `<div class="math-block"><span class="math-display-frame">${rendered}</span></div>`
+                : `<span class="katex-formula">${rendered}</span>`;
+            html = html
+                .replace(new RegExp(`<p class="paragraph-node">${token}</p>`, 'g'), replacement)
+                .replace(new RegExp(token, 'g'), replacement);
+        });
+
+        return html;
+    }
+
+    window.TouchAILiteMathRenderer = {
+        renderFormula,
+        renderMarkdownWithMath,
+    };
+})();
diff --git a/apps/site/public/demo-utils/touchai-lite-renderer.js b/apps/site/public/demo-utils/touchai-lite-renderer.js
new file mode 100644
index 00000000..30c40325
--- /dev/null
+++ b/apps/site/public/demo-utils/touchai-lite-renderer.js
@@ -0,0 +1,97 @@
+(function () {
+    function escapeHtml(value) {
+        return String(value)
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/"/g, '&quot;');
+    }
+
+    function stripImageMarkdown(value) {
+        return String(value)
+            .replace(/\[!\[[^\]]*\]\([^)]*\)\]\([^)]*\)/g, '')
+            .replace(/!\[[^\]]*\]\([^)]*\)/g, '');
+    }
+
+    function renderInline(source) {
+        const segments = stripImageMarkdown(source).split(/(`[^`]+`)/g);
+
+        return segments
+            .map((segment) => {
+                if (!segment) return '';
+                if (segment.startsWith('`') && segment.endsWith('`')) {
+                    return `<span class="kbd">${escapeHtml(segment.slice(1, -1))}</span>`;
+                }
+
+                return escapeHtml(segment).replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+            })
+            .join('');
+    }
+
+    function renderMarkdownContent(markdown) {
+        const lines = String(markdown).split(/\r?\n/);
+        const html = [];
+        let paragraphLines = [];
+        let listItems = [];
+
+        const flushParagraph = () => {
+            if (!paragraphLines.length) return;
+            html.push(
+                `<p class="paragraph-node">${paragraphLines.map(renderInline).join('<br>')}</p>`
+            );
+            paragraphLines = [];
+        };
+
+        const flushList = () => {
+            if (!listItems.length) return;
+            html.push(
+                `<ul>${listItems.map((item) => `<li>${renderInline(item)}</li>`).join('')}</ul>`
+            );
+            listItems = [];
+        };
+
+        lines.forEach((line) => {
+            const trimmed = stripImageMarkdown(line).trim();
+
+            if (!trimmed) {
+                flushParagraph();
+                flushList();
+                return;
+            }
+
+            if (trimmed === '---') {
+                flushParagraph();
+                flushList();
+                html.push(`<p class="response-divider" aria-hidden="true"></p>`);
+                return;
+            }
+
+            if (trimmed.startsWith('## ')) {
+                flushParagraph();
+                flushList();
+                html.push(`<h2>${renderInline(trimmed.slice(3))}</h2>`);
+                return;
+            }
+
+            if (trimmed.startsWith('- ')) {
+                flushParagraph();
+                listItems.push(trimmed.slice(2));
+                return;
+            }
+
+            flushList();
+            paragraphLines.push(trimmed);
+        });
+
+        flushParagraph();
+        flushList();
+
+        return html.join('\n');
+    }
+
+    window.TouchAILiteRenderer = {
+        escapeHtml,
+        renderInline,
+        renderMarkdownContent,
+    };
+})();
diff --git a/apps/site/public/feature-reminder-en/touchai-components.html b/apps/site/public/feature-reminder-en/touchai-components.html
index 6458f3bf..8066f7a3 100644
--- a/apps/site/public/feature-reminder-en/touchai-components.html
+++ b/apps/site/public/feature-reminder-en/touchai-components.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -83,6 +83,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -148,20 +152,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -463,6 +467,16 @@
                 flex: 0 0 auto;
             }
 
+            body.is-complete .conversation-content,
+            body.is-complete.is-scrolling .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
             body.is-answering .composer {
                 margin-top: 0;
             }
@@ -471,6 +485,37 @@
                 margin-top: auto;
             }
 
+            body.is-complete .composer {
+                margin-top: 0;
+            }
+
+            body.is-complete.is-scrolling .composer {
+                margin-top: auto;
+            }
+
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
+            @media (min-width: 841px) {
+                body.is-scroll-driven.is-complete .chat-panel {
+                    min-height: var(--window-min-height);
+                    max-height: var(--window-min-height);
+                    height: var(--window-min-height);
+                }
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -708,12 +753,13 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
 
             body.is-answering .response p:not(.is-visible),
+            body.is-answering .response h2:not(.is-visible),
             body.is-answering .response li:not(.is-visible),
             body.is-answering .response ul:not(.is-visible),
             body.is-answering .response .tool-call-list:not(.is-visible),
@@ -1100,14 +1146,14 @@
     </head>
     <body class="is-idle">
         <main class="stage">
-            <section class="chat-panel is-unified" aria-label="TouchAI 对话组件">
-                <header class="panel-top toolbar-fade-overlay" aria-label="窗口工具栏">
-                    <button class="toolbar-button" type="button" aria-label="新建会话">
+            <section class="chat-panel is-unified" aria-label="TouchAI conversation demo">
+                <header class="panel-top toolbar-fade-overlay" aria-label="Window toolbar">
+                    <button class="toolbar-button" type="button" aria-label="New conversation">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="历史记录">
+                    <button class="toolbar-button" type="button" aria-label="Conversation history">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M12 8v5h5v-2h-3V8z" />
                             <path
@@ -1115,7 +1161,7 @@
                             />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="最大化窗口">
+                    <button class="toolbar-button" type="button" aria-label="Maximize window">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
                                 d="M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z"
@@ -1125,7 +1171,7 @@
                     <button
                         class="toolbar-button toolbar-button--pinned"
                         type="button"
-                        aria-label="固定窗口"
+                        aria-label="Pin window"
                     >
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
@@ -1137,12 +1183,12 @@
 
                 <div class="conversation-content">
                     <div class="prompt-layer">
-                        <div class="prompt-pill prompt-card" aria-label="用户输入">
+                        <div class="prompt-pill prompt-card" aria-label="User prompt">
                             <div class="prompt-text">
                                 I have a meeting at 12 later. Please remind me.
                             </div>
                         </div>
-                        <button class="prompt-copy" type="button" aria-label="复制问题">
+                        <button class="prompt-copy" type="button" aria-label="Copy problem">
                             <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"
@@ -1150,9 +1196,18 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite"></article>
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    ></article>
                     <div class="scroll-fade-overlay">
-                        <button class="scroll-bottom-button" type="button" aria-label="回到底部">
+                        <button
+                            class="scroll-bottom-button"
+                            type="button"
+                            aria-label="Scroll to bottom"
+                        >
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M11 16.414V5h2v11.414l5.707-5.707l1.414 1.414L12 20.243l-8.121-8.122l1.414-1.414z"
@@ -1162,18 +1217,25 @@
                     </div>
                 </div>
 
-                <footer class="composer" aria-label="输入框">
-                    <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                <footer class="composer" aria-label="Message composer">
+                    <form class="composer-form prompt-form" aria-label="Message composer">
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
                             value=""
                             placeholder="Type your request..."
-                            aria-label="输入问题"
+                            aria-label="Problem input"
                             autocomplete="off"
                         />
-                        <button class="submit-btn" type="submit" aria-label="发送">
+                        <button class="submit-btn" type="submit" aria-label="Send">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M10 17l5-5-5-5v10z" />
                             </svg>
@@ -1182,7 +1244,7 @@
                 </footer>
             </section>
         </main>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script>
             (() => {
                 const expectedPrompt = 'I have a meeting at 12 later. Please remind me.';
@@ -1199,6 +1261,10 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
+                let mathLineGeometryFrame = 0;
+                let lastMathLineWidth = '';
+                let lastMathLineOffset = '';
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
@@ -1206,6 +1272,23 @@
                 let isPromptTyping = false;
                 let startSequenceActive = false;
                 let externalScrollProgress = 0;
+                let isScrollDriven = false;
+                let hasReceivedScrollProgress = false;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type, deltaX = 0, deltaY = 0) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage(
+                                { type, deltaX, deltaY },
+                                window.location.origin
+                            );
+                        }
+                    } catch (error) {}
+                }
 
                 const answerMarkdown = [
                     'Done. I have created the reminder.',
@@ -1218,7 +1301,7 @@
                 ].join('\n');
 
                 const toolCallHtml = `
-          <div class="tool-call-list" aria-label="工具调用">
+          <div class="tool-call-list" aria-label="Tool calls">
             <div class="tool-call">
               <span class="tool-call-name">
                 <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9a7 7 0 0 0-7.4-1.6l4.2 4.2l-3.3 3.3l-4.3-4.1A7 7 0 0 0 3 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.4-.4.4-1 0-1.4"/></svg>
@@ -1246,63 +1329,21 @@
           </div>`;
 
                 const actionHtml = `
-          <div class="response-actions" aria-label="回答操作">
-            <span class="thinking-dots" aria-label="正在思考">
+          <div class="response-actions" aria-label="Answer actions">
+            <span class="thinking-dots" aria-label="Thinking">
               <span></span>
               <span></span>
               <span></span>
             </span>
-            <button class="action-button copy-answer" type="button" aria-label="复制回答">
+            <button class="action-button copy-answer" type="button" aria-label="Copy answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"/></svg>
             </button>
-            <button class="action-button replay-answer" type="button" aria-label="重新生成">
+            <button class="action-button replay-answer" type="button" aria-label="Regenerate answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 11H7.101l.001-.009a5 5 0 0 1 .752-1.787a5.05 5.05 0 0 1 2.2-1.811q.455-.193.938-.291a5.1 5.1 0 0 1 2.018 0a5 5 0 0 1 2.525 1.361l1.416-1.412a7 7 0 0 0-2.224-1.501a7 7 0 0 0-1.315-.408a7.1 7.1 0 0 0-2.819 0a7 7 0 0 0-1.316.409a7.04 7.04 0 0 0-3.08 2.534a7 7 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4zm4 2h2.899l-.001.008a4.98 4.98 0 0 1-2.103 3.138a4.9 4.9 0 0 1-1.787.752a5.1 5.1 0 0 1-2.017 0a5 5 0 0 1-1.787-.752a5 5 0 0 1-.74-.61L7.05 16.95a7 7 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.1 7.1 0 0 0 2.818 0a7.03 7.03 0 0 0 4.395-2.945a7 7 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4z"/></svg>
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownContent(markdown) {
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-
-                    const html = md
-                        ? md.render(markdown)
-                        : markdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownContent = window.TouchAILiteRenderer.renderMarkdownContent;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1359,6 +1400,25 @@
                     });
                 }
 
+                function setToolCallVisibility(progress) {
+                    const ratio = Math.max(0, Math.min(1, Number(progress) || 0));
+                    const toolCallList = response.querySelector('.tool-call-list');
+                    if (!toolCallList) {
+                        return;
+                    }
+
+                    const toolCalls = response.querySelectorAll('.tool-call');
+                    const cardThresholds = Array.from(toolCalls, (_, index) => 0.12 + index * 0.12);
+                    const visibleCardCount = cardThresholds.filter(
+                        (threshold) => ratio >= threshold
+                    ).length;
+                    toolCallList.classList.toggle('is-visible', visibleCardCount > 0);
+
+                    toolCalls.forEach((card, index) => {
+                        card.classList.toggle('is-visible', index < visibleCardCount);
+                    });
+                }
+
                 function hydrateMarkdownAnswer() {
                     response.classList.add('touchai-markdown');
                     response.innerHTML =
@@ -1387,11 +1447,27 @@
                     const responseRect = response.getBoundingClientRect();
                     const mathLineWidth = `${panel.clientWidth}px`;
                     const mathLineOffset = `${panelRect.left - responseRect.left}px`;
-                    response.style.setProperty('--math-line-width', mathLineWidth);
-                    response.style.setProperty('--math-line-offset', mathLineOffset);
-                    response.querySelectorAll('.math-block').forEach((block) => {
-                        block.style.width = mathLineWidth;
-                        block.style.marginLeft = mathLineOffset;
+
+                    if (
+                        mathLineWidth === lastMathLineWidth &&
+                        mathLineOffset === lastMathLineOffset
+                    ) {
+                        return;
+                    }
+
+                    lastMathLineWidth = mathLineWidth;
+                    lastMathLineOffset = mathLineOffset;
+                    if (mathLineGeometryFrame) {
+                        window.cancelAnimationFrame(mathLineGeometryFrame);
+                    }
+                    mathLineGeometryFrame = window.requestAnimationFrame(() => {
+                        mathLineGeometryFrame = 0;
+                        response.style.setProperty('--math-line-width', mathLineWidth);
+                        response.style.setProperty('--math-line-offset', mathLineOffset);
+                        response.querySelectorAll('.math-block').forEach((block) => {
+                            block.style.width = mathLineWidth;
+                            block.style.marginLeft = mathLineOffset;
+                        });
                     });
                 }
 
@@ -1426,6 +1502,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1438,14 +1515,16 @@
 
                 function resetVisibleBlocks() {
                     response
-                        .querySelectorAll('p, ul, li, .math-block, .response-divider')
+                        .querySelectorAll(
+                            'p, h2, ul, li, .tool-call-list, .tool-call, .math-block, .response-divider'
+                        )
                         .forEach((block) => {
                             block.classList.remove('is-visible');
                         });
                 }
 
                 function markVisibleBlock(node) {
-                    const textBlock = node.parentElement.closest('p, li, .math-block');
+                    const textBlock = node.parentElement.closest('p, h2, li, .math-block');
 
                     if (textBlock) {
                         textBlock.classList.add('is-visible');
@@ -1478,6 +1557,37 @@
                     startSequenceActive = false;
                 }
 
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = complete ? 1 : 0;
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        setResponseProgress(1);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
+                }
+
                 function syncScrollMode() {
                     syncMathLineGeometry();
                     const shouldScroll =
@@ -1491,6 +1601,11 @@
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1498,6 +1613,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function applyExternalScrollProgress(progress) {
                     externalScrollProgress = Math.max(0, Math.min(1, Number(progress) || 0));
 
@@ -1516,12 +1661,11 @@
                         (sum, item) => sum + (item.instant ? 1 : item.text.length),
                         0
                     );
-                    let remaining = Math.round(totalUnits * ratio);
+                    const textRevealProgress = ratio <= 0.24 ? 0 : (ratio - 0.24) / 0.76;
+                    let remaining = Math.round(totalUnits * textRevealProgress);
 
                     resetVisibleBlocks();
-                    if (ratio > 0 && typeof revealToolCalls === 'function') {
-                        revealToolCalls();
-                    }
+                    setToolCallVisibility(ratio);
 
                     textNodes.forEach((item) => {
                         const visibleLength = item.instant
@@ -1543,6 +1687,12 @@
 
                 function renderScrollProgress(progress) {
                     const scrubProgress = Math.max(0, Math.min(1, Number(progress) || 0));
+                    hasReceivedScrollProgress = scrubProgress > 0.0005 && scrubProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     externalScrollProgress = scrubProgress;
                     window.clearTimeout(typingTimer);
                     window.clearTimeout(promptTypingTimer);
@@ -1551,13 +1701,12 @@
                     isPromptTyping = false;
                     startSequenceActive = false;
 
-                    const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
-                    input.value = expectedPrompt.slice(
-                        0,
-                        Math.round(expectedPrompt.length * promptProgress)
-                    );
-
                     if (scrubProgress < 0.18) {
+                        const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
+                        input.value = expectedPrompt.slice(
+                            0,
+                            Math.round(expectedPrompt.length * promptProgress)
+                        );
                         hasStarted = false;
                         resetResponseText();
                         document.body.classList.remove(
@@ -1570,13 +1719,15 @@
                         return;
                     }
 
+                    clearPromptInput();
+
                     if (!hasStarted) {
                         resetResponseText();
+                        response.setAttribute('aria-busy', 'true');
                         hasStarted = true;
                     }
 
                     const answerProgress = Math.max(0, Math.min(1, (scrubProgress - 0.18) / 0.5));
-                    const scrollProgress = Math.max(0, Math.min(1, (scrubProgress - 0.66) / 0.34));
                     document.body.classList.remove('is-idle', 'is-answering', 'is-complete');
                     document.body.classList.add(
                         answerProgress >= 1 ? 'is-complete' : 'is-answering'
@@ -1585,18 +1736,13 @@
                     setResponseProgress(answerProgress);
                     syncMathLineGeometry();
 
-                    window.requestAnimationFrame(() => {
-                        const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                        document.body.classList.toggle(
-                            'is-scrolling',
-                            maxScroll > 1 && scrubProgress >= 0.66
-                        );
-                        content.scrollTop =
-                            answerProgress >= 1
-                                ? Math.round(maxScroll * scrollProgress)
-                                : Math.round(maxScroll * answerProgress);
-                        updateScrollAffordance();
-                    });
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    document.body.classList.toggle(
+                        'is-scrolling',
+                        maxScroll > 1 && scrubProgress >= 0.66
+                    );
+                    keepLatestResponseVisible();
+                    updateScrollAffordance();
                 }
                 function startTypewriter() {
                     let nodeIndex = 0;
@@ -1608,6 +1754,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             applyExternalScrollProgress(externalScrollProgress);
                             updateScrollAffordance();
@@ -1645,10 +1792,14 @@
                 }
 
                 function showAnswer() {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     startSequenceActive = false;
                     document.body.classList.remove('is-idle', 'is-complete');
@@ -1681,6 +1832,9 @@
                         return;
                     }
 
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     startSequenceActive = true;
                     isPromptTyping = true;
@@ -1713,24 +1867,41 @@
                 }
 
                 resetResponseText();
-                window.parent?.postMessage?.({ type: 'touchai-reminder-ready' });
+                notifyParent('touchai-reminder-ready');
                 form.addEventListener('submit', submitPrompt);
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-reminder-start') {
+                    if (message.type === 'touchai-reminder-start') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
                         typePromptThenSubmit();
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-set-scroll-progress') {
-                        renderScrollProgress(event.data.progress);
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type === 'touchai-set-scroll-progress') {
+                        renderScrollProgress(message.progress);
                     }
                 });
                 toolbarButtons.forEach((button) => {
@@ -1747,11 +1918,17 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
             })();
         </script>
     </body>
diff --git a/apps/site/public/feature-reminder/touchai-components.html b/apps/site/public/feature-reminder/touchai-components.html
index b7551f06..63bbcb65 100644
--- a/apps/site/public/feature-reminder/touchai-components.html
+++ b/apps/site/public/feature-reminder/touchai-components.html
@@ -83,6 +83,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -148,20 +152,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -463,6 +467,16 @@
                 flex: 0 0 auto;
             }
 
+            body.is-complete .conversation-content,
+            body.is-complete.is-scrolling .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
             body.is-answering .composer {
                 margin-top: 0;
             }
@@ -471,6 +485,37 @@
                 margin-top: auto;
             }
 
+            body.is-complete .composer {
+                margin-top: 0;
+            }
+
+            body.is-complete.is-scrolling .composer {
+                margin-top: auto;
+            }
+
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
+            @media (min-width: 841px) {
+                body.is-scroll-driven.is-complete .chat-panel {
+                    min-height: var(--window-min-height);
+                    max-height: var(--window-min-height);
+                    height: var(--window-min-height);
+                }
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -708,12 +753,13 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
 
             body.is-answering .response p:not(.is-visible),
+            body.is-answering .response h2:not(.is-visible),
             body.is-answering .response li:not(.is-visible),
             body.is-answering .response ul:not(.is-visible),
             body.is-answering .response .tool-call-list:not(.is-visible),
@@ -1148,7 +1194,12 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite"></article>
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    ></article>
                     <div class="scroll-fade-overlay">
                         <button class="scroll-bottom-button" type="button" aria-label="回到底部">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -1162,7 +1213,14 @@
 
                 <footer class="composer" aria-label="输入框">
                     <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
@@ -1180,7 +1238,7 @@
                 </footer>
             </section>
         </main>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script>
             (() => {
                 const expectedPrompt = '我等会12点要开会，记一下';
@@ -1197,6 +1255,10 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
+                let mathLineGeometryFrame = 0;
+                let lastMathLineWidth = '';
+                let lastMathLineOffset = '';
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
@@ -1204,6 +1266,23 @@
                 let isPromptTyping = false;
                 let startSequenceActive = false;
                 let externalScrollProgress = 0;
+                let isScrollDriven = false;
+                let hasReceivedScrollProgress = false;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type, deltaX = 0, deltaY = 0) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage(
+                                { type, deltaX, deltaY },
+                                window.location.origin
+                            );
+                        }
+                    } catch (error) {}
+                }
 
                 const answerMarkdown = [
                     '已记好了！ ✅',
@@ -1258,49 +1337,7 @@
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownContent(markdown) {
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-
-                    const html = md
-                        ? md.render(markdown)
-                        : markdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownContent = window.TouchAILiteRenderer.renderMarkdownContent;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1357,6 +1394,25 @@
                     });
                 }
 
+                function setToolCallVisibility(progress) {
+                    const ratio = Math.max(0, Math.min(1, Number(progress) || 0));
+                    const toolCallList = response.querySelector('.tool-call-list');
+                    if (!toolCallList) {
+                        return;
+                    }
+
+                    const toolCalls = response.querySelectorAll('.tool-call');
+                    const cardThresholds = Array.from(toolCalls, (_, index) => 0.12 + index * 0.12);
+                    const visibleCardCount = cardThresholds.filter(
+                        (threshold) => ratio >= threshold
+                    ).length;
+                    toolCallList.classList.toggle('is-visible', visibleCardCount > 0);
+
+                    toolCalls.forEach((card, index) => {
+                        card.classList.toggle('is-visible', index < visibleCardCount);
+                    });
+                }
+
                 function hydrateMarkdownAnswer() {
                     response.classList.add('touchai-markdown');
                     response.innerHTML =
@@ -1385,11 +1441,27 @@
                     const responseRect = response.getBoundingClientRect();
                     const mathLineWidth = `${panel.clientWidth}px`;
                     const mathLineOffset = `${panelRect.left - responseRect.left}px`;
-                    response.style.setProperty('--math-line-width', mathLineWidth);
-                    response.style.setProperty('--math-line-offset', mathLineOffset);
-                    response.querySelectorAll('.math-block').forEach((block) => {
-                        block.style.width = mathLineWidth;
-                        block.style.marginLeft = mathLineOffset;
+
+                    if (
+                        mathLineWidth === lastMathLineWidth &&
+                        mathLineOffset === lastMathLineOffset
+                    ) {
+                        return;
+                    }
+
+                    lastMathLineWidth = mathLineWidth;
+                    lastMathLineOffset = mathLineOffset;
+                    if (mathLineGeometryFrame) {
+                        window.cancelAnimationFrame(mathLineGeometryFrame);
+                    }
+                    mathLineGeometryFrame = window.requestAnimationFrame(() => {
+                        mathLineGeometryFrame = 0;
+                        response.style.setProperty('--math-line-width', mathLineWidth);
+                        response.style.setProperty('--math-line-offset', mathLineOffset);
+                        response.querySelectorAll('.math-block').forEach((block) => {
+                            block.style.width = mathLineWidth;
+                            block.style.marginLeft = mathLineOffset;
+                        });
                     });
                 }
 
@@ -1424,6 +1496,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1436,14 +1509,16 @@
 
                 function resetVisibleBlocks() {
                     response
-                        .querySelectorAll('p, ul, li, .math-block, .response-divider')
+                        .querySelectorAll(
+                            'p, h2, ul, li, .tool-call-list, .tool-call, .math-block, .response-divider'
+                        )
                         .forEach((block) => {
                             block.classList.remove('is-visible');
                         });
                 }
 
                 function markVisibleBlock(node) {
-                    const textBlock = node.parentElement.closest('p, li, .math-block');
+                    const textBlock = node.parentElement.closest('p, h2, li, .math-block');
 
                     if (textBlock) {
                         textBlock.classList.add('is-visible');
@@ -1476,6 +1551,37 @@
                     startSequenceActive = false;
                 }
 
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = complete ? 1 : 0;
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        setResponseProgress(1);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
+                }
+
                 function syncScrollMode() {
                     syncMathLineGeometry();
                     const shouldScroll =
@@ -1489,6 +1595,11 @@
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1496,6 +1607,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function applyExternalScrollProgress(progress) {
                     externalScrollProgress = Math.max(0, Math.min(1, Number(progress) || 0));
 
@@ -1514,9 +1655,11 @@
                         (sum, item) => sum + (item.instant ? 1 : item.text.length),
                         0
                     );
-                    let remaining = Math.round(totalUnits * ratio);
+                    const textRevealProgress = ratio <= 0.24 ? 0 : (ratio - 0.24) / 0.76;
+                    let remaining = Math.round(totalUnits * textRevealProgress);
 
                     resetVisibleBlocks();
+                    setToolCallVisibility(ratio);
                     textNodes.forEach((item) => {
                         const visibleLength = item.instant
                             ? remaining > 0
@@ -1537,6 +1680,12 @@
 
                 function renderScrollProgress(progress) {
                     const scrubProgress = Math.max(0, Math.min(1, Number(progress) || 0));
+                    hasReceivedScrollProgress = scrubProgress > 0.0005 && scrubProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     externalScrollProgress = scrubProgress;
                     window.clearTimeout(typingTimer);
                     window.clearTimeout(promptTypingTimer);
@@ -1545,13 +1694,12 @@
                     isPromptTyping = false;
                     startSequenceActive = false;
 
-                    const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
-                    input.value = expectedPrompt.slice(
-                        0,
-                        Math.round(expectedPrompt.length * promptProgress)
-                    );
-
                     if (scrubProgress < 0.18) {
+                        const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
+                        input.value = expectedPrompt.slice(
+                            0,
+                            Math.round(expectedPrompt.length * promptProgress)
+                        );
                         hasStarted = false;
                         resetResponseText();
                         document.body.classList.remove(
@@ -1564,13 +1712,15 @@
                         return;
                     }
 
+                    clearPromptInput();
+
                     if (!hasStarted) {
                         resetResponseText();
+                        response.setAttribute('aria-busy', 'true');
                         hasStarted = true;
                     }
 
                     const answerProgress = Math.max(0, Math.min(1, (scrubProgress - 0.18) / 0.5));
-                    const scrollProgress = Math.max(0, Math.min(1, (scrubProgress - 0.66) / 0.34));
                     document.body.classList.remove('is-idle', 'is-answering', 'is-complete');
                     document.body.classList.add(
                         answerProgress >= 1 ? 'is-complete' : 'is-answering'
@@ -1580,18 +1730,13 @@
                     setResponseProgress(answerProgress);
                     syncMathLineGeometry();
 
-                    window.requestAnimationFrame(() => {
-                        const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                        document.body.classList.toggle(
-                            'is-scrolling',
-                            maxScroll > 1 && scrubProgress >= 0.66
-                        );
-                        content.scrollTop =
-                            answerProgress >= 1
-                                ? Math.round(maxScroll * scrollProgress)
-                                : Math.round(maxScroll * answerProgress);
-                        updateScrollAffordance();
-                    });
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    document.body.classList.toggle(
+                        'is-scrolling',
+                        maxScroll > 1 && scrubProgress >= 0.66
+                    );
+                    keepLatestResponseVisible();
+                    updateScrollAffordance();
                 }
 
                 function startTypewriter() {
@@ -1604,6 +1749,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             applyExternalScrollProgress(externalScrollProgress);
                             updateScrollAffordance();
@@ -1641,10 +1787,14 @@
                 }
 
                 function showAnswer() {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     startSequenceActive = false;
                     document.body.classList.remove('is-idle', 'is-complete');
@@ -1677,6 +1827,9 @@
                         return;
                     }
 
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     startSequenceActive = true;
                     isPromptTyping = true;
@@ -1709,24 +1862,41 @@
                 }
 
                 resetResponseText();
-                window.parent?.postMessage?.({ type: 'touchai-reminder-ready' });
+                notifyParent('touchai-reminder-ready');
                 form.addEventListener('submit', submitPrompt);
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-reminder-start') {
+                    if (message.type === 'touchai-reminder-start') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
                         typePromptThenSubmit();
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-set-scroll-progress') {
-                        renderScrollProgress(event.data.progress);
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type === 'touchai-set-scroll-progress') {
+                        renderScrollProgress(message.progress);
                     }
                 });
                 toolbarButtons.forEach((button) => {
@@ -1743,11 +1913,17 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
             })();
         </script>
     </body>
diff --git a/apps/site/public/feature-solver-en/touchai-components.html b/apps/site/public/feature-solver-en/touchai-components.html
index 56af1e6f..b806a174 100644
--- a/apps/site/public/feature-solver-en/touchai-components.html
+++ b/apps/site/public/feature-solver-en/touchai-components.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -84,6 +84,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -149,20 +153,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -393,6 +397,16 @@
                 flex: 0 0 auto;
             }
 
+            body.is-complete .conversation-content,
+            body.is-complete.is-scrolling .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
             body.is-answering .composer {
                 margin-top: 0;
             }
@@ -401,6 +415,37 @@
                 margin-top: auto;
             }
 
+            body.is-complete .composer {
+                margin-top: 0;
+            }
+
+            body.is-complete.is-scrolling .composer {
+                margin-top: auto;
+            }
+
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
+            @media (min-width: 841px) {
+                body.is-scroll-driven.is-complete .chat-panel {
+                    min-height: var(--window-min-height);
+                    max-height: var(--window-min-height);
+                    height: var(--window-min-height);
+                }
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -622,7 +667,7 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
@@ -935,14 +980,14 @@
     </head>
     <body class="is-idle">
         <main class="stage">
-            <section class="chat-panel is-unified" aria-label="TouchAI 对话组件">
-                <header class="panel-top toolbar-fade-overlay" aria-label="窗口工具栏">
-                    <button class="toolbar-button" type="button" aria-label="新建会话">
+            <section class="chat-panel is-unified" aria-label="TouchAI conversation demo">
+                <header class="panel-top toolbar-fade-overlay" aria-label="Window toolbar">
+                    <button class="toolbar-button" type="button" aria-label="New conversation">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="历史记录">
+                    <button class="toolbar-button" type="button" aria-label="Conversation history">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M12 8v5h5v-2h-3V8z" />
                             <path
@@ -950,7 +995,7 @@
                             />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="最大化窗口">
+                    <button class="toolbar-button" type="button" aria-label="Maximize window">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
                                 d="M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z"
@@ -960,7 +1005,7 @@
                     <button
                         class="toolbar-button toolbar-button--pinned"
                         type="button"
-                        aria-label="固定窗口"
+                        aria-label="Pin window"
                     >
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
@@ -971,13 +1016,20 @@
                 </header>
 
                 <div class="prompt-layer">
-                    <div class="prompt-pill prompt-card" aria-label="用户输入">
+                    <div class="prompt-pill prompt-card" aria-label="User prompt">
                         <div class="prompt-card-title">Solve this problem</div>
-                        <div class="problem-image" role="img" aria-label="圆锥曲线题目截图">
-                            <img src="./problem-card.svg" alt="圆锥曲线题目截图" />
+                        <div
+                            class="problem-image"
+                            role="img"
+                            aria-label="Screenshot of a Chinese conic-section math problem"
+                        >
+                            <img
+                                src="./problem-card.svg"
+                                alt="Screenshot of a Chinese conic-section math problem"
+                            />
                         </div>
                     </div>
-                    <button class="prompt-copy" type="button" aria-label="复制问题">
+                    <button class="prompt-copy" type="button" aria-label="Copy problem">
                         <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true">
                             <path
                                 d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"
@@ -988,13 +1040,20 @@
 
                 <div class="conversation-content">
                     <div class="prompt-layer">
-                        <div class="prompt-pill prompt-card" aria-label="用户输入">
+                        <div class="prompt-pill prompt-card" aria-label="User prompt">
                             <div class="prompt-card-title">Solve this problem</div>
-                            <div class="problem-image" role="img" aria-label="圆锥曲线题目截图">
-                                <img src="./problem-card.svg" alt="圆锥曲线题目截图" />
+                            <div
+                                class="problem-image"
+                                role="img"
+                                aria-label="Screenshot of a Chinese conic-section math problem"
+                            >
+                                <img
+                                    src="./problem-card.svg"
+                                    alt="Screenshot of a Chinese conic-section math problem"
+                                />
                             </div>
                         </div>
-                        <button class="prompt-copy" type="button" aria-label="复制问题">
+                        <button class="prompt-copy" type="button" aria-label="Copy problem">
                             <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"
@@ -1002,33 +1061,25 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite">
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    >
                         <p>Here is the short solution:</p>
                         <p class="math-narrative">
-                            设过
-                            <span class="formula-module inline-formula">
-                                M
-                                <span class="punct">(</span>
-                                0
-                                <span class="punct">,</span>
-                                1
-                                <span class="punct">)</span>
-                            </span>
-                            的直线为
-                            <span class="formula-module inline-formula">
-                                y
-                                <span class="op">=</span>
-                                kx
-                                <span class="op">+</span>
-                                1
-                            </span>
-                            ，与椭圆
+                            Let the line through
+                            <span class="formula-module inline-formula">M(0, 1)</span>
+                            be
+                            <span class="formula-module inline-formula">y = kx + 1</span>
+                            , and let it intersect the ellipse
                         </p>
                         <p class="math-display">
                             <span class="formula-module">
                                 x
                                 <sup>2</sup>
-                                <span class="op">+</span>
+                                +
                                 <span class="frac">
                                     <span class="num">
                                         y
@@ -1036,171 +1087,135 @@
                                     </span>
                                     <span class="den">4</span>
                                 </span>
-                                <span class="op">=</span>
-                                1
+                                = 1
                             </span>
                         </p>
                         <p>
-                            交于
+                            at
                             <em>(A,B)</em>
-                            。
+                            .
                         </p>
-                        <p>代入得</p>
+                        <p>Substituting gives</p>
                         <p class="math-display">
                             <span class="formula-module">
-                                <span class="punct">(</span>
-                                k
+                                (k
                                 <sup>2</sup>
-                                <span class="op">+</span>
-                                4
-                                <span class="punct">)</span>
-                                x
+                                + 4)x
                                 <sup>2</sup>
-                                <span class="op">+</span>
-                                2kx
-                                <span class="op">−</span>
-                                3
-                                <span class="op">=</span>
-                                0
+                                + 2kx − 3 = 0
                             </span>
                         </p>
                         <p class="math-narrative">
-                            设两根为
+                            If the two roots are
                             <span class="formula-module inline-formula">
                                 x
                                 <sub>1</sub>
-                                <span class="punct">,</span>
-                                x
+                                , x
                                 <sub>2</sub>
                             </span>
-                            ，则
+                            , then
                         </p>
                         <p class="math-display compact">
                             <span class="formula-module">
                                 x
                                 <sub>1</sub>
-                                <span class="op">+</span>
-                                x
+                                + x
                                 <sub>2</sub>
-                                <span class="op">=</span>
-                                <span class="op">−</span>
+                                = −
                                 <span class="frac">
                                     <span class="num">2k</span>
                                     <span class="den">
                                         k
                                         <sup>2</sup>
-                                        <span class="op">+</span>
-                                        4
+                                        + 4
                                     </span>
                                 </span>
-                                <span class="punct">,</span>
-                                　y
+                                , y
                                 <sub>1</sub>
-                                <span class="op">+</span>
-                                y
+                                + y
                                 <sub>2</sub>
-                                <span class="op">=</span>
-                                k
-                                <span class="punct">(</span>
-                                x
+                                = k(x
                                 <sub>1</sub>
-                                <span class="op">+</span>
-                                x
+                                + x
                                 <sub>2</sub>
-                                <span class="punct">)</span>
-                                <span class="op">+</span>
-                                2
-                                <span class="op">=</span>
+                                ) + 2 =
                                 <span class="frac">
                                     <span class="num">8</span>
                                     <span class="den">
                                         k
                                         <sup>2</sup>
-                                        <span class="op">+</span>
-                                        4
+                                        + 4
                                     </span>
                                 </span>
                             </span>
                         </p>
-                        <p>又</p>
+                        <p>Also,</p>
                         <p class="math-display">
                             <span class="formula-module">
-                                P
-                                <span class="punct">(</span>
+                                P(
                                 <span class="frac">
                                     <span class="num">
                                         x
                                         <sub>1</sub>
-                                        <span class="op">+</span>
-                                        x
+                                        + x
                                         <sub>2</sub>
                                     </span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="punct">,</span>
+                                ,
                                 <span class="frac">
                                     <span class="num">
                                         y
                                         <sub>1</sub>
-                                        <span class="op">+</span>
-                                        y
+                                        + y
                                         <sub>2</sub>
                                     </span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="punct">)</span>
+                                )
                             </span>
                         </p>
-                        <p>所以</p>
+                        <p>so</p>
                         <p class="math-display">
                             <span class="formula-module">
-                                x
-                                <span class="op">=</span>
-                                <span class="op">−</span>
+                                x = −
                                 <span class="frac">
                                     <span class="num">k</span>
                                     <span class="den">
                                         k
                                         <sup>2</sup>
-                                        <span class="op">+</span>
-                                        4
+                                        + 4
                                     </span>
                                 </span>
-                                <span class="punct">,</span>
-                                　y
-                                <span class="op">=</span>
+                                , y =
                                 <span class="frac">
                                     <span class="num">4</span>
                                     <span class="den">
                                         k
                                         <sup>2</sup>
-                                        <span class="op">+</span>
-                                        4
+                                        + 4
                                     </span>
                                 </span>
                             </span>
                         </p>
                         <p>
-                            消去
+                            Eliminating
                             <em>k</em>
-                            得
+                            , we get
                         </p>
                         <p class="math-display">
                             <span class="boxed-formula">
                                 <span class="formula-module">
                                     4x
                                     <sup>2</sup>
-                                    <span class="op">+</span>
-                                    <span class="punct">(</span>
-                                    y
-                                    <span class="op">−</span>
+                                    + (y −
                                     <span class="frac">
                                         <span class="num">1</span>
                                         <span class="den">2</span>
                                     </span>
-                                    <span class="punct">)</span>
+                                    )
                                     <sup>2</sup>
-                                    <span class="op">=</span>
+                                    =
                                     <span class="frac">
                                         <span class="num">1</span>
                                         <span class="den">4</span>
@@ -1209,68 +1224,41 @@
                             </span>
                         </p>
                         <p class="response-divider" aria-hidden="true"></p>
-                        <p>再求</p>
+                        <p>Now find the distance from</p>
                         <p class="math-display">
                             <span class="formula-module">
-                                N
-                                <span class="punct">(</span>
+                                N(
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="punct">,</span>
+                                ,
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="punct">)</span>
+                                )
                             </span>
                         </p>
                         <p>
-                            到轨迹上的点
+                            to a point
                             <em>P(x,y)</em>
-                            的距离。
+                            on the locus.
                         </p>
-                        <p>由轨迹方程可设</p>
+                        <p>From the locus equation, set</p>
                         <p class="math-display">
                             <span class="formula-module">
-                                4x
-                                <sup>2</sup>
-                                <span class="op">+</span>
-                                <span class="punct">(</span>
-                                y
-                                <span class="op">−</span>
-                                <span class="frac">
-                                    <span class="num">1</span>
-                                    <span class="den">2</span>
-                                </span>
-                                <span class="punct">)</span>
-                                <sup>2</sup>
-                                <span class="op">=</span>
+                                x =
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">4</span>
                                 </span>
-                            </span>
-                        </p>
-                        <p>令</p>
-                        <p class="math-display">
-                            <span class="formula-module">
-                                x
-                                <span class="op">=</span>
-                                <span class="frac">
-                                    <span class="num">1</span>
-                                    <span class="den">4</span>
-                                </span>
-                                cosθ
-                                <span class="punct">,</span>
-                                　y
-                                <span class="op">−</span>
+                                cosθ, y −
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="op">=</span>
+                                =
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
@@ -1278,46 +1266,41 @@
                                 sinθ
                             </span>
                         </p>
-                        <p>则</p>
+                        <p>Then</p>
                         <p class="math-display compact">
                             <span class="formula-module">
                                 |NP|
                                 <sup>2</sup>
-                                <span class="op">=</span>
-                                <span class="punct">(</span>
+                                = (
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">4</span>
                                 </span>
-                                cosθ
-                                <span class="op">−</span>
+                                cosθ −
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="punct">)</span>
+                                )
                                 <sup>2</sup>
-                                <span class="op">+</span>
-                                <span class="punct">(</span>
+                                + (
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
                                 </span>
-                                sinθ
-                                <span class="punct">)</span>
+                                sinθ)
                                 <sup>2</sup>
-                                <span class="op">=</span>
+                                =
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="op">−</span>
+                                −
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">4</span>
                                 </span>
-                                cosθ
-                                <span class="op">−</span>
+                                cosθ −
                                 <span class="frac">
                                     <span class="num">3</span>
                                     <span class="den">16</span>
@@ -1328,36 +1311,25 @@
                             </span>
                         </p>
                         <p class="math-narrative">
-                            设
-                            <span class="formula-module inline-formula">
-                                t
-                                <span class="op">=</span>
-                                cosθ
-                                <span class="op">∈</span>
-                                <span class="punct">[</span>
-                                −1
-                                <span class="punct">,</span>
-                                1
-                                <span class="punct">]</span>
-                            </span>
-                            ，则
+                            Let
+                            <span class="formula-module inline-formula">t = cosθ ∈ [−1, 1]</span>
+                            , then
                         </p>
                         <p class="math-display">
                             <span class="formula-module">
                                 |NP|
                                 <sup>2</sup>
-                                <span class="op">=</span>
+                                =
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">2</span>
                                 </span>
-                                <span class="op">−</span>
+                                −
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">4</span>
                                 </span>
-                                t
-                                <span class="op">−</span>
+                                t −
                                 <span class="frac">
                                     <span class="num">3</span>
                                     <span class="den">16</span>
@@ -1368,33 +1340,31 @@
                         </p>
                         <p class="math-narrative">
                             <span class="typed-marker">•</span>
-                            当
+                            The maximum occurs when
                             <span class="formula-module inline-formula">
-                                t
-                                <span class="op">=</span>
-                                <span class="op">−</span>
+                                t = −
                                 <span class="frac">
                                     <span class="num">2</span>
                                     <span class="den">3</span>
                                 </span>
                             </span>
-                            时取最大值：
+                            :
                         </p>
                         <p class="math-display">
                             <span class="formula-module">
                                 |NP|
                                 <sup>2</sup>
                                 <sub>max</sub>
-                                <span class="op">=</span>
+                                =
                                 <span class="frac">
                                     <span class="num">7</span>
                                     <span class="den">12</span>
                                 </span>
-                                <span class="op">⇒</span>
+                                ⇒
                                 <span class="boxed-formula">
                                     |NP|
                                     <sub>max</sub>
-                                    <span class="op">=</span>
+                                    =
                                     <span class="frac">
                                         <span class="num">
                                             <span class="root">
@@ -1408,43 +1378,33 @@
                         </p>
                         <p>
                             <span class="typed-marker">•</span>
-                            比较端点：
+                            Checking the endpoints:
                         </p>
                         <p class="math-display">
                             <span class="formula-module">
-                                t
-                                <span class="op">=</span>
-                                1
-                                <span class="op">⇒</span>
-                                |NP|
+                                t = 1 ⇒ |NP|
                                 <sup>2</sup>
-                                <span class="op">=</span>
+                                =
                                 <span class="frac">
                                     <span class="num">1</span>
                                     <span class="den">16</span>
                                 </span>
-                                <span class="punct">,</span>
-                                　t
-                                <span class="op">=</span>
-                                <span class="op">−</span>
-                                1
-                                <span class="op">⇒</span>
-                                |NP|
+                                , t = −1 ⇒ |NP|
                                 <sup>2</sup>
-                                <span class="op">=</span>
+                                =
                                 <span class="frac">
                                     <span class="num">9</span>
                                     <span class="den">16</span>
                                 </span>
                             </span>
                         </p>
-                        <p>所以</p>
+                        <p>So</p>
                         <p class="math-display">
                             <span class="boxed-formula">
                                 <span class="formula-module">
                                     |NP|
                                     <sub>min</sub>
-                                    <span class="op">=</span>
+                                    =
                                     <span class="frac">
                                         <span class="num">1</span>
                                         <span class="den">4</span>
@@ -1453,23 +1413,20 @@
                             </span>
                         </p>
                         <p class="response-divider" aria-hidden="true"></p>
-                        <p>答案：</p>
+                        <p>Answer:</p>
                         <p class="answer-line">
                             <span class="answer-box">
                                 <span class="formula-module">
-                                    P的轨迹方程　4x
+                                    Locus of P: 4x
                                     <sup>2</sup>
-                                    <span class="op">+</span>
-                                    <span class="punct">(</span>
-                                    y
-                                    <span class="op">−</span>
+                                    + (y −
                                     <span class="frac">
                                         <span class="num">1</span>
                                         <span class="den">2</span>
                                     </span>
-                                    <span class="punct">)</span>
+                                    )
                                     <sup>2</sup>
-                                    <span class="op">=</span>
+                                    =
                                     <span class="frac">
                                         <span class="num">1</span>
                                         <span class="den">4</span>
@@ -1482,15 +1439,14 @@
                                 <span class="formula-module">
                                     |NP|
                                     <sub>min</sub>
-                                    <span class="op">=</span>
+                                    =
                                     <span class="frac">
                                         <span class="num">1</span>
                                         <span class="den">4</span>
                                     </span>
-                                    <span class="punct">,</span>
-                                    　|NP|
+                                    , |NP|
                                     <sub>max</sub>
-                                    <span class="op">=</span>
+                                    =
                                     <span class="frac">
                                         <span class="num">
                                             <span class="root">
@@ -1502,8 +1458,8 @@
                                 </span>
                             </span>
                         </p>
-                        <div class="response-actions" aria-label="回答操作">
-                            <span class="thinking-dots" aria-label="正在思考">
+                        <div class="response-actions" aria-label="Answer actions">
+                            <span class="thinking-dots" aria-label="Thinking">
                                 <span></span>
                                 <span></span>
                                 <span></span>
@@ -1511,7 +1467,7 @@
                             <button
                                 class="action-button copy-answer"
                                 type="button"
-                                aria-label="复制回答"
+                                aria-label="Copy answer"
                             >
                                 <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true">
                                     <path
@@ -1522,7 +1478,7 @@
                             <button
                                 class="action-button replay-answer"
                                 type="button"
-                                aria-label="重新生成"
+                                aria-label="Regenerate answer"
                             >
                                 <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true">
                                     <path
@@ -1533,7 +1489,11 @@
                         </div>
                     </article>
                     <div class="scroll-fade-overlay">
-                        <button class="scroll-bottom-button" type="button" aria-label="回到底部">
+                        <button
+                            class="scroll-bottom-button"
+                            type="button"
+                            aria-label="Scroll to bottom"
+                        >
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M11 16.414V5h2v11.414l5.707-5.707l1.414 1.414L12 20.243l-8.121-8.122l1.414-1.414z"
@@ -1543,18 +1503,25 @@
                     </div>
                 </div>
 
-                <footer class="composer" aria-label="输入框">
-                    <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                <footer class="composer" aria-label="Message composer">
+                    <form class="composer-form prompt-form" aria-label="Message composer">
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
                             value=""
                             placeholder="Type your request..."
-                            aria-label="输入问题"
+                            aria-label="Problem input"
                             autocomplete="off"
                         />
-                        <button class="submit-btn" type="submit" aria-label="发送">
+                        <button class="submit-btn" type="submit" aria-label="Send">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M10 17l5-5-5-5v10z" />
                             </svg>
@@ -1563,8 +1530,9 @@
                 </footer>
             </section>
         </main>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script src="/demo-vendor/katex/katex.min.js"></script>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-math.js"></script>
         <script>
             (() => {
                 const expectedPrompt = 'Solve this problem';
@@ -1581,6 +1549,10 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
+                let mathLineGeometryFrame = 0;
+                let lastMathLineWidth = '';
+                let lastMathLineOffset = '';
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
@@ -1588,6 +1560,20 @@
                 let isPromptTyping = false;
                 let startSequenceActive = false;
                 let externalScrollProgress = 0;
+                let isScrollDriven = false;
+                let hasReceivedScrollProgress = false;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage({ type }, window.location.origin);
+                        }
+                    } catch (error) {}
+                }
 
                 const answerMarkdown = String.raw`
 Here is the short solution:
@@ -1660,85 +1646,22 @@
 `.trim();
 
                 const actionHtml = `
-          <div class="response-actions" aria-label="回答操作">
-            <span class="thinking-dots" aria-label="正在思考">
+          <div class="response-actions" aria-label="Answer actions">
+            <span class="thinking-dots" aria-label="Thinking">
               <span></span>
               <span></span>
               <span></span>
             </span>
-            <button class="action-button copy-answer" type="button" aria-label="复制回答">
+            <button class="action-button copy-answer" type="button" aria-label="Copy answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"/></svg>
             </button>
-            <button class="action-button replay-answer" type="button" aria-label="重新生成">
+            <button class="action-button replay-answer" type="button" aria-label="Regenerate answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 11H7.101l.001-.009a5 5 0 0 1 .752-1.787a5.05 5.05 0 0 1 2.2-1.811q.455-.193.938-.291a5.1 5.1 0 0 1 2.018 0a5 5 0 0 1 2.525 1.361l1.416-1.412a7 7 0 0 0-2.224-1.501a7 7 0 0 0-1.315-.408a7.1 7.1 0 0 0-2.819 0a7 7 0 0 0-1.316.409a7.04 7.04 0 0 0-3.08 2.534a7 7 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4zm4 2h2.899l-.001.008a4.98 4.98 0 0 1-2.103 3.138a4.9 4.9 0 0 1-1.787.752a5.1 5.1 0 0 1-2.017 0a5 5 0 0 1-1.787-.752a5 5 0 0 1-.74-.61L7.05 16.95a7 7 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.1 7.1 0 0 0 2.818 0a7.03 7.03 0 0 0 4.395-2.945a7 7 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4z"/></svg>
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownWithMath(markdown) {
-                    const mathTokens = [];
-                    const protectedMarkdown = markdown
-                        .replace(/\$\$([\s\S]+?)\$\$/g, (_, formula) => {
-                            const token = `@@MATH_BLOCK_${mathTokens.length}@@`;
-                            mathTokens.push({ token, formula: formula.trim(), display: true });
-                            return `\n\n${token}\n\n`;
-                        })
-                        .replace(/\$([^$\n]+?)\$/g, (_, formula) => {
-                            const token = `@@MATH_INLINE_${mathTokens.length}@@`;
-                            mathTokens.push({ token, formula: formula.trim(), display: false });
-                            return token;
-                        });
-
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-                    let html = md
-                        ? md.render(protectedMarkdown)
-                        : protectedMarkdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    mathTokens.forEach(({ token, formula, display }) => {
-                        const rendered = renderFormula(formula, display);
-                        const replacement = display
-                            ? `<div class="math-block"><span class="math-display-frame">${rendered}</span></div>`
-                            : `<span class="katex-formula">${rendered}</span>`;
-                        html = html
-                            .replace(new RegExp(`<p>${token}</p>`, 'g'), replacement)
-                            .replace(new RegExp(token, 'g'), replacement);
-                    });
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownWithMath =
+                    window.TouchAILiteMathRenderer.renderMarkdownWithMath;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1799,11 +1722,27 @@
                     const responseRect = response.getBoundingClientRect();
                     const mathLineWidth = `${panel.clientWidth}px`;
                     const mathLineOffset = `${panelRect.left - responseRect.left}px`;
-                    response.style.setProperty('--math-line-width', mathLineWidth);
-                    response.style.setProperty('--math-line-offset', mathLineOffset);
-                    response.querySelectorAll('.math-block').forEach((block) => {
-                        block.style.width = mathLineWidth;
-                        block.style.marginLeft = mathLineOffset;
+
+                    if (
+                        mathLineWidth === lastMathLineWidth &&
+                        mathLineOffset === lastMathLineOffset
+                    ) {
+                        return;
+                    }
+
+                    lastMathLineWidth = mathLineWidth;
+                    lastMathLineOffset = mathLineOffset;
+                    if (mathLineGeometryFrame) {
+                        window.cancelAnimationFrame(mathLineGeometryFrame);
+                    }
+                    mathLineGeometryFrame = window.requestAnimationFrame(() => {
+                        mathLineGeometryFrame = 0;
+                        response.style.setProperty('--math-line-width', mathLineWidth);
+                        response.style.setProperty('--math-line-offset', mathLineOffset);
+                        response.querySelectorAll('.math-block').forEach((block) => {
+                            block.style.width = mathLineWidth;
+                            block.style.marginLeft = mathLineOffset;
+                        });
                     });
                 }
 
@@ -1838,6 +1777,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1890,6 +1830,37 @@
                     startSequenceActive = false;
                 }
 
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = complete ? 1 : 0;
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        setResponseProgress(1);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
+                }
+
                 function syncScrollMode() {
                     syncMathLineGeometry();
                     const shouldScroll =
@@ -1903,6 +1874,11 @@
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1910,6 +1886,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function applyExternalScrollProgress(progress) {
                     externalScrollProgress = Math.max(0, Math.min(1, Number(progress) || 0));
 
@@ -1955,6 +1961,12 @@
 
                 function renderScrollProgress(progress) {
                     const scrubProgress = Math.max(0, Math.min(1, Number(progress) || 0));
+                    hasReceivedScrollProgress = scrubProgress > 0.0005 && scrubProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     externalScrollProgress = scrubProgress;
                     window.clearTimeout(typingTimer);
                     window.clearTimeout(promptTypingTimer);
@@ -1963,13 +1975,12 @@
                     isPromptTyping = false;
                     startSequenceActive = false;
 
-                    const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
-                    input.value = expectedPrompt.slice(
-                        0,
-                        Math.round(expectedPrompt.length * promptProgress)
-                    );
-
                     if (scrubProgress < 0.18) {
+                        const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
+                        input.value = expectedPrompt.slice(
+                            0,
+                            Math.round(expectedPrompt.length * promptProgress)
+                        );
                         hasStarted = false;
                         resetResponseText();
                         document.body.classList.remove(
@@ -1982,13 +1993,15 @@
                         return;
                     }
 
+                    clearPromptInput();
+
                     if (!hasStarted) {
                         resetResponseText();
+                        response.setAttribute('aria-busy', 'true');
                         hasStarted = true;
                     }
 
                     const answerProgress = Math.max(0, Math.min(1, (scrubProgress - 0.18) / 0.5));
-                    const scrollProgress = Math.max(0, Math.min(1, (scrubProgress - 0.66) / 0.34));
                     document.body.classList.remove('is-idle', 'is-answering', 'is-complete');
                     document.body.classList.add(
                         answerProgress >= 1 ? 'is-complete' : 'is-answering'
@@ -1997,18 +2010,13 @@
                     setResponseProgress(answerProgress);
                     syncMathLineGeometry();
 
-                    window.requestAnimationFrame(() => {
-                        const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                        document.body.classList.toggle(
-                            'is-scrolling',
-                            maxScroll > 1 && scrubProgress >= 0.66
-                        );
-                        content.scrollTop =
-                            answerProgress >= 1
-                                ? Math.round(maxScroll * scrollProgress)
-                                : Math.round(maxScroll * answerProgress);
-                        updateScrollAffordance();
-                    });
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    document.body.classList.toggle(
+                        'is-scrolling',
+                        maxScroll > 1 && scrubProgress >= 0.66
+                    );
+                    keepLatestResponseVisible();
+                    updateScrollAffordance();
                 }
                 function startTypewriter() {
                     let nodeIndex = 0;
@@ -2018,6 +2026,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             applyExternalScrollProgress(externalScrollProgress);
                             updateScrollAffordance();
@@ -2044,10 +2053,14 @@
                 }
 
                 function showAnswer() {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     startSequenceActive = false;
                     document.body.classList.remove('is-idle', 'is-complete');
@@ -2080,6 +2093,9 @@
                         return;
                     }
 
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     startSequenceActive = true;
                     isPromptTyping = true;
@@ -2112,24 +2128,41 @@
                 }
 
                 resetResponseText();
-                window.parent?.postMessage?.({ type: 'touchai-solver-ready' });
+                notifyParent('touchai-solver-ready');
                 form.addEventListener('submit', submitPrompt);
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-solver-start') {
+                    if (message.type === 'touchai-solver-start') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
                         typePromptThenSubmit();
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-set-scroll-progress') {
-                        renderScrollProgress(event.data.progress);
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type === 'touchai-set-scroll-progress') {
+                        renderScrollProgress(message.progress);
                     }
                 });
                 toolbarButtons.forEach((button) => {
@@ -2146,11 +2179,17 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
             })();
         </script>
     </body>
diff --git a/apps/site/public/feature-solver/touchai-components.html b/apps/site/public/feature-solver/touchai-components.html
index b7b641d7..29d84d1b 100644
--- a/apps/site/public/feature-solver/touchai-components.html
+++ b/apps/site/public/feature-solver/touchai-components.html
@@ -85,6 +85,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -150,20 +154,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -393,6 +397,16 @@
                 flex: 0 0 auto;
             }
 
+            body.is-complete .conversation-content,
+            body.is-complete.is-scrolling .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
             body.is-answering .composer {
                 margin-top: 0;
             }
@@ -401,6 +415,37 @@
                 margin-top: auto;
             }
 
+            body.is-complete .composer {
+                margin-top: 0;
+            }
+
+            body.is-complete.is-scrolling .composer {
+                margin-top: auto;
+            }
+
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
+            @media (min-width: 841px) {
+                body.is-scroll-driven.is-complete .chat-panel {
+                    min-height: var(--window-min-height);
+                    max-height: var(--window-min-height);
+                    height: var(--window-min-height);
+                }
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -622,7 +667,7 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
@@ -1002,7 +1047,12 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite">
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    >
                         <p>简短过程如下：</p>
                         <p class="math-narrative">
                             设过
@@ -1545,11 +1595,18 @@
 
                 <footer class="composer" aria-label="输入框">
                     <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
-                            value="完成这道题目"
+                            value=""
                             placeholder="写下你的需求..."
                             aria-label="输入问题"
                             autocomplete="off"
@@ -1563,8 +1620,9 @@
                 </footer>
             </section>
         </main>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script src="/demo-vendor/katex/katex.min.js"></script>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-math.js"></script>
         <script>
             (() => {
                 const expectedPrompt = '完成这道题目';
@@ -1581,6 +1639,10 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
+                let mathLineGeometryFrame = 0;
+                let lastMathLineWidth = '';
+                let lastMathLineOffset = '';
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
@@ -1588,6 +1650,20 @@
                 let isPromptTyping = false;
                 let startSequenceActive = false;
                 let externalScrollProgress = 0;
+                let isScrollDriven = false;
+                let hasReceivedScrollProgress = false;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage({ type }, window.location.origin);
+                        }
+                    } catch (error) {}
+                }
 
                 const answerMarkdown = String.raw`
 简短过程如下：
@@ -1674,71 +1750,8 @@
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownWithMath(markdown) {
-                    const mathTokens = [];
-                    const protectedMarkdown = markdown
-                        .replace(/\$\$([\s\S]+?)\$\$/g, (_, formula) => {
-                            const token = `@@MATH_BLOCK_${mathTokens.length}@@`;
-                            mathTokens.push({ token, formula: formula.trim(), display: true });
-                            return `\n\n${token}\n\n`;
-                        })
-                        .replace(/\$([^$\n]+?)\$/g, (_, formula) => {
-                            const token = `@@MATH_INLINE_${mathTokens.length}@@`;
-                            mathTokens.push({ token, formula: formula.trim(), display: false });
-                            return token;
-                        });
-
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-                    let html = md
-                        ? md.render(protectedMarkdown)
-                        : protectedMarkdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    mathTokens.forEach(({ token, formula, display }) => {
-                        const rendered = renderFormula(formula, display);
-                        const replacement = display
-                            ? `<div class="math-block"><span class="math-display-frame">${rendered}</span></div>`
-                            : `<span class="katex-formula">${rendered}</span>`;
-                        html = html
-                            .replace(new RegExp(`<p>${token}</p>`, 'g'), replacement)
-                            .replace(new RegExp(token, 'g'), replacement);
-                    });
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownWithMath =
+                    window.TouchAILiteMathRenderer.renderMarkdownWithMath;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1799,11 +1812,27 @@
                     const responseRect = response.getBoundingClientRect();
                     const mathLineWidth = `${panel.clientWidth}px`;
                     const mathLineOffset = `${panelRect.left - responseRect.left}px`;
-                    response.style.setProperty('--math-line-width', mathLineWidth);
-                    response.style.setProperty('--math-line-offset', mathLineOffset);
-                    response.querySelectorAll('.math-block').forEach((block) => {
-                        block.style.width = mathLineWidth;
-                        block.style.marginLeft = mathLineOffset;
+
+                    if (
+                        mathLineWidth === lastMathLineWidth &&
+                        mathLineOffset === lastMathLineOffset
+                    ) {
+                        return;
+                    }
+
+                    lastMathLineWidth = mathLineWidth;
+                    lastMathLineOffset = mathLineOffset;
+                    if (mathLineGeometryFrame) {
+                        window.cancelAnimationFrame(mathLineGeometryFrame);
+                    }
+                    mathLineGeometryFrame = window.requestAnimationFrame(() => {
+                        mathLineGeometryFrame = 0;
+                        response.style.setProperty('--math-line-width', mathLineWidth);
+                        response.style.setProperty('--math-line-offset', mathLineOffset);
+                        response.querySelectorAll('.math-block').forEach((block) => {
+                            block.style.width = mathLineWidth;
+                            block.style.marginLeft = mathLineOffset;
+                        });
                     });
                 }
 
@@ -1838,6 +1867,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1890,6 +1920,37 @@
                     startSequenceActive = false;
                 }
 
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = complete ? 1 : 0;
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        setResponseProgress(1);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
+                }
+
                 function syncScrollMode() {
                     syncMathLineGeometry();
                     const shouldScroll =
@@ -1903,6 +1964,11 @@
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1910,6 +1976,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function applyExternalScrollProgress(progress) {
                     externalScrollProgress = Math.max(0, Math.min(1, Number(progress) || 0));
 
@@ -1951,6 +2047,12 @@
 
                 function renderScrollProgress(progress) {
                     const scrubProgress = Math.max(0, Math.min(1, Number(progress) || 0));
+                    hasReceivedScrollProgress = scrubProgress > 0.0005 && scrubProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     externalScrollProgress = scrubProgress;
                     window.clearTimeout(typingTimer);
                     window.clearTimeout(promptTypingTimer);
@@ -1959,13 +2061,12 @@
                     isPromptTyping = false;
                     startSequenceActive = false;
 
-                    const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
-                    input.value = expectedPrompt.slice(
-                        0,
-                        Math.round(expectedPrompt.length * promptProgress)
-                    );
-
                     if (scrubProgress < 0.18) {
+                        const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
+                        input.value = expectedPrompt.slice(
+                            0,
+                            Math.round(expectedPrompt.length * promptProgress)
+                        );
                         hasStarted = false;
                         resetResponseText();
                         document.body.classList.remove(
@@ -1978,13 +2079,15 @@
                         return;
                     }
 
+                    clearPromptInput();
+
                     if (!hasStarted) {
                         resetResponseText();
+                        response.setAttribute('aria-busy', 'true');
                         hasStarted = true;
                     }
 
                     const answerProgress = Math.max(0, Math.min(1, (scrubProgress - 0.18) / 0.5));
-                    const scrollProgress = Math.max(0, Math.min(1, (scrubProgress - 0.66) / 0.34));
                     document.body.classList.remove('is-idle', 'is-answering', 'is-complete');
                     document.body.classList.add(
                         answerProgress >= 1 ? 'is-complete' : 'is-answering'
@@ -1993,18 +2096,13 @@
                     setResponseProgress(answerProgress);
                     syncMathLineGeometry();
 
-                    window.requestAnimationFrame(() => {
-                        const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                        document.body.classList.toggle(
-                            'is-scrolling',
-                            maxScroll > 1 && scrubProgress >= 0.66
-                        );
-                        content.scrollTop =
-                            answerProgress >= 1
-                                ? Math.round(maxScroll * scrollProgress)
-                                : Math.round(maxScroll * answerProgress);
-                        updateScrollAffordance();
-                    });
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    document.body.classList.toggle(
+                        'is-scrolling',
+                        maxScroll > 1 && scrubProgress >= 0.66
+                    );
+                    keepLatestResponseVisible();
+                    updateScrollAffordance();
                 }
 
                 function startTypewriter() {
@@ -2015,6 +2113,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             applyExternalScrollProgress(externalScrollProgress);
                             updateScrollAffordance();
@@ -2041,10 +2140,14 @@
                 }
 
                 function showAnswer() {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     startSequenceActive = false;
                     document.body.classList.remove('is-idle', 'is-complete');
@@ -2077,6 +2180,9 @@
                         return;
                     }
 
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     startSequenceActive = true;
                     isPromptTyping = true;
@@ -2109,24 +2215,41 @@
                 }
 
                 resetResponseText();
-                window.parent?.postMessage?.({ type: 'touchai-solver-ready' });
+                notifyParent('touchai-solver-ready');
                 form.addEventListener('submit', submitPrompt);
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-solver-start') {
+                    if (message.type === 'touchai-solver-start') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
                         typePromptThenSubmit();
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-set-scroll-progress') {
-                        renderScrollProgress(event.data.progress);
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type === 'touchai-set-scroll-progress') {
+                        renderScrollProgress(message.progress);
                     }
                 });
                 toolbarButtons.forEach((button) => {
@@ -2143,11 +2266,17 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
             })();
         </script>
     </body>
diff --git a/apps/site/public/feature-work-organizer-en/touchai-components.html b/apps/site/public/feature-work-organizer-en/touchai-components.html
index 05f2e1ce..4ce1f8a2 100644
--- a/apps/site/public/feature-work-organizer-en/touchai-components.html
+++ b/apps/site/public/feature-work-organizer-en/touchai-components.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -83,6 +83,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -148,20 +152,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -463,15 +467,13 @@
                 flex: 0 0 auto;
             }
 
-            body.is-complete .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-complete .conversation-content,
             body.is-complete.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-bottom: 20px;
             }
 
@@ -491,6 +493,29 @@
                 margin-top: auto;
             }
 
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
+            @media (min-width: 841px) {
+                body.is-scroll-driven.is-complete .chat-panel {
+                    min-height: var(--window-min-height);
+                    max-height: var(--window-min-height);
+                    height: var(--window-min-height);
+                }
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -728,12 +753,13 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
 
             body.is-answering .response p:not(.is-visible),
+            body.is-answering .response h2:not(.is-visible),
             body.is-answering .response li:not(.is-visible),
             body.is-answering .response ul:not(.is-visible),
             body.is-answering .response .math-block:not(.is-visible),
@@ -1041,14 +1067,14 @@
     </head>
     <body class="is-idle">
         <main class="stage">
-            <section class="chat-panel is-unified" aria-label="TouchAI 对话组件">
-                <header class="panel-top toolbar-fade-overlay" aria-label="窗口工具栏">
-                    <button class="toolbar-button" type="button" aria-label="新建会话">
+            <section class="chat-panel is-unified" aria-label="TouchAI conversation demo">
+                <header class="panel-top toolbar-fade-overlay" aria-label="Window toolbar">
+                    <button class="toolbar-button" type="button" aria-label="New conversation">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="历史记录">
+                    <button class="toolbar-button" type="button" aria-label="Conversation history">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M12 8v5h5v-2h-3V8z" />
                             <path
@@ -1056,7 +1082,7 @@
                             />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="最大化窗口">
+                    <button class="toolbar-button" type="button" aria-label="Maximize window">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
                                 d="M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z"
@@ -1066,7 +1092,7 @@
                     <button
                         class="toolbar-button toolbar-button--pinned"
                         type="button"
-                        aria-label="固定窗口"
+                        aria-label="Pin window"
                     >
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
@@ -1078,12 +1104,12 @@
 
                 <div class="conversation-content">
                     <div class="prompt-layer">
-                        <div class="prompt-pill prompt-card" aria-label="用户输入">
+                        <div class="prompt-pill prompt-card" aria-label="User prompt">
                             <div class="prompt-text">
                                 Organize desktop work folders and rename them clearly
                             </div>
                         </div>
-                        <button class="prompt-copy" type="button" aria-label="复制问题">
+                        <button class="prompt-copy" type="button" aria-label="Copy problem">
                             <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"
@@ -1091,9 +1117,18 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite"></article>
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    ></article>
                     <div class="scroll-fade-overlay">
-                        <button class="scroll-bottom-button" type="button" aria-label="回到底部">
+                        <button
+                            class="scroll-bottom-button"
+                            type="button"
+                            aria-label="Scroll to bottom"
+                        >
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M11 16.414V5h2v11.414l5.707-5.707l1.414 1.414L12 20.243l-8.121-8.122l1.414-1.414z"
@@ -1103,18 +1138,25 @@
                     </div>
                 </div>
 
-                <footer class="composer" aria-label="输入框">
-                    <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                <footer class="composer" aria-label="Message composer">
+                    <form class="composer-form prompt-form" aria-label="Message composer">
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
                             value=""
                             placeholder="Type your request..."
-                            aria-label="输入问题"
+                            aria-label="Problem input"
                             autocomplete="off"
                         />
-                        <button class="submit-btn" type="submit" aria-label="发送">
+                        <button class="submit-btn" type="submit" aria-label="Send">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M10 17l5-5-5-5v10z" />
                             </svg>
@@ -1123,7 +1165,7 @@
                 </footer>
             </section>
         </main>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script>
             (() => {
                 const expectedPrompt = 'Organize desktop work folders and rename them clearly';
@@ -1140,6 +1182,10 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
+                let mathLineGeometryFrame = 0;
+                let lastMathLineWidth = '';
+                let lastMathLineOffset = '';
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
@@ -1147,6 +1193,23 @@
                 let isPromptTyping = false;
                 let startSequenceActive = false;
                 let externalScrollProgress = 0;
+                let isScrollDriven = false;
+                let hasReceivedScrollProgress = false;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type, deltaX = 0, deltaY = 0) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage(
+                                { type, deltaX, deltaY },
+                                window.location.origin
+                            );
+                        }
+                    } catch (error) {}
+                }
 
                 const answerMarkdown = [
                     'The desktop work files are now organized and renamed more clearly.',
@@ -1172,63 +1235,21 @@
                 ].join('\n');
 
                 const actionHtml = `
-          <div class="response-actions" aria-label="回答操作">
-            <span class="thinking-dots" aria-label="正在思考">
+          <div class="response-actions" aria-label="Answer actions">
+            <span class="thinking-dots" aria-label="Thinking">
               <span></span>
               <span></span>
               <span></span>
             </span>
-            <button class="action-button copy-answer" type="button" aria-label="复制回答">
+            <button class="action-button copy-answer" type="button" aria-label="Copy answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"/></svg>
             </button>
-            <button class="action-button replay-answer" type="button" aria-label="重新生成">
+            <button class="action-button replay-answer" type="button" aria-label="Regenerate answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 11H7.101l.001-.009a5 5 0 0 1 .752-1.787a5.05 5.05 0 0 1 2.2-1.811q.455-.193.938-.291a5.1 5.1 0 0 1 2.018 0a5 5 0 0 1 2.525 1.361l1.416-1.412a7 7 0 0 0-2.224-1.501a7 7 0 0 0-1.315-.408a7.1 7.1 0 0 0-2.819 0a7 7 0 0 0-1.316.409a7.04 7.04 0 0 0-3.08 2.534a7 7 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4zm4 2h2.899l-.001.008a4.98 4.98 0 0 1-2.103 3.138a4.9 4.9 0 0 1-1.787.752a5.1 5.1 0 0 1-2.017 0a5 5 0 0 1-1.787-.752a5 5 0 0 1-.74-.61L7.05 16.95a7 7 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.1 7.1 0 0 0 2.818 0a7.03 7.03 0 0 0 4.395-2.945a7 7 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4z"/></svg>
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownContent(markdown) {
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-
-                    const html = md
-                        ? md.render(markdown)
-                        : markdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownContent = window.TouchAILiteRenderer.renderMarkdownContent;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1301,11 +1322,27 @@
                     const responseRect = response.getBoundingClientRect();
                     const mathLineWidth = `${panel.clientWidth}px`;
                     const mathLineOffset = `${panelRect.left - responseRect.left}px`;
-                    response.style.setProperty('--math-line-width', mathLineWidth);
-                    response.style.setProperty('--math-line-offset', mathLineOffset);
-                    response.querySelectorAll('.math-block').forEach((block) => {
-                        block.style.width = mathLineWidth;
-                        block.style.marginLeft = mathLineOffset;
+
+                    if (
+                        mathLineWidth === lastMathLineWidth &&
+                        mathLineOffset === lastMathLineOffset
+                    ) {
+                        return;
+                    }
+
+                    lastMathLineWidth = mathLineWidth;
+                    lastMathLineOffset = mathLineOffset;
+                    if (mathLineGeometryFrame) {
+                        window.cancelAnimationFrame(mathLineGeometryFrame);
+                    }
+                    mathLineGeometryFrame = window.requestAnimationFrame(() => {
+                        mathLineGeometryFrame = 0;
+                        response.style.setProperty('--math-line-width', mathLineWidth);
+                        response.style.setProperty('--math-line-offset', mathLineOffset);
+                        response.querySelectorAll('.math-block').forEach((block) => {
+                            block.style.width = mathLineWidth;
+                            block.style.marginLeft = mathLineOffset;
+                        });
                     });
                 }
 
@@ -1340,6 +1377,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1352,14 +1390,14 @@
 
                 function resetVisibleBlocks() {
                     response
-                        .querySelectorAll('p, ul, li, .math-block, .response-divider')
+                        .querySelectorAll('p, h2, ul, li, .math-block, .response-divider')
                         .forEach((block) => {
                             block.classList.remove('is-visible');
                         });
                 }
 
                 function markVisibleBlock(node) {
-                    const textBlock = node.parentElement.closest('p, li, .math-block');
+                    const textBlock = node.parentElement.closest('p, h2, li, .math-block');
 
                     if (textBlock) {
                         textBlock.classList.add('is-visible');
@@ -1389,6 +1427,38 @@
                     window.clearTimeout(promptTypingTimer);
                     promptTypingTimer = 0;
                     isPromptTyping = false;
+                    startSequenceActive = false;
+                }
+
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = complete ? 1 : 0;
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        setResponseProgress(1);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
                 }
 
                 function syncScrollMode() {
@@ -1404,6 +1474,11 @@
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1411,6 +1486,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function applyExternalScrollProgress(progress) {
                     externalScrollProgress = Math.max(0, Math.min(1, Number(progress) || 0));
 
@@ -1456,6 +1561,12 @@
 
                 function renderScrollProgress(progress) {
                     const scrubProgress = Math.max(0, Math.min(1, Number(progress) || 0));
+                    hasReceivedScrollProgress = scrubProgress > 0.0005 && scrubProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     externalScrollProgress = scrubProgress;
                     window.clearTimeout(typingTimer);
                     window.clearTimeout(promptTypingTimer);
@@ -1464,13 +1575,12 @@
                     isPromptTyping = false;
                     startSequenceActive = false;
 
-                    const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
-                    input.value = expectedPrompt.slice(
-                        0,
-                        Math.round(expectedPrompt.length * promptProgress)
-                    );
-
                     if (scrubProgress < 0.18) {
+                        const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
+                        input.value = expectedPrompt.slice(
+                            0,
+                            Math.round(expectedPrompt.length * promptProgress)
+                        );
                         hasStarted = false;
                         resetResponseText();
                         document.body.classList.remove(
@@ -1483,13 +1593,15 @@
                         return;
                     }
 
+                    clearPromptInput();
+
                     if (!hasStarted) {
                         resetResponseText();
+                        response.setAttribute('aria-busy', 'true');
                         hasStarted = true;
                     }
 
                     const answerProgress = Math.max(0, Math.min(1, (scrubProgress - 0.18) / 0.5));
-                    const scrollProgress = Math.max(0, Math.min(1, (scrubProgress - 0.66) / 0.34));
                     document.body.classList.remove('is-idle', 'is-answering', 'is-complete');
                     document.body.classList.add(
                         answerProgress >= 1 ? 'is-complete' : 'is-answering'
@@ -1498,18 +1610,13 @@
                     setResponseProgress(answerProgress);
                     syncMathLineGeometry();
 
-                    window.requestAnimationFrame(() => {
-                        const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                        document.body.classList.toggle(
-                            'is-scrolling',
-                            maxScroll > 1 && scrubProgress >= 0.66
-                        );
-                        content.scrollTop =
-                            answerProgress >= 1
-                                ? Math.round(maxScroll * scrollProgress)
-                                : Math.round(maxScroll * answerProgress);
-                        updateScrollAffordance();
-                    });
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    document.body.classList.toggle(
+                        'is-scrolling',
+                        maxScroll > 1 && scrubProgress >= 0.66
+                    );
+                    keepLatestResponseVisible();
+                    updateScrollAffordance();
                 }
                 function startTypewriter() {
                     let nodeIndex = 0;
@@ -1519,6 +1626,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             applyExternalScrollProgress(externalScrollProgress);
                             updateScrollAffordance();
@@ -1556,10 +1664,14 @@
                 }
 
                 function showAnswer() {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     startSequenceActive = false;
                     document.body.classList.remove('is-idle', 'is-complete');
@@ -1592,6 +1704,9 @@
                         return;
                     }
 
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     startSequenceActive = true;
                     isPromptTyping = true;
@@ -1624,24 +1739,41 @@
                 }
 
                 resetResponseText();
-                window.parent?.postMessage?.({ type: 'touchai-work-organizer-ready' });
+                notifyParent('touchai-work-organizer-ready');
                 form.addEventListener('submit', submitPrompt);
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-work-organizer-start') {
+                    if (message.type === 'touchai-work-organizer-start') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
                         typePromptThenSubmit();
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-set-scroll-progress') {
-                        renderScrollProgress(event.data.progress);
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type === 'touchai-set-scroll-progress') {
+                        renderScrollProgress(message.progress);
                     }
                 });
                 toolbarButtons.forEach((button) => {
@@ -1658,11 +1790,17 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
             })();
         </script>
     </body>
diff --git a/apps/site/public/feature-work-organizer/touchai-components.html b/apps/site/public/feature-work-organizer/touchai-components.html
index 572f6dfb..bef6802a 100644
--- a/apps/site/public/feature-work-organizer/touchai-components.html
+++ b/apps/site/public/feature-work-organizer/touchai-components.html
@@ -83,6 +83,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -148,20 +152,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -463,15 +467,13 @@
                 flex: 0 0 auto;
             }
 
-            body.is-complete .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-complete .conversation-content,
             body.is-complete.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-bottom: 20px;
             }
 
@@ -491,6 +493,29 @@
                 margin-top: auto;
             }
 
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
+            @media (min-width: 841px) {
+                body.is-scroll-driven.is-complete .chat-panel {
+                    min-height: var(--window-min-height);
+                    max-height: var(--window-min-height);
+                    height: var(--window-min-height);
+                }
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -728,12 +753,13 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
 
             body.is-answering .response p:not(.is-visible),
+            body.is-answering .response h2:not(.is-visible),
             body.is-answering .response li:not(.is-visible),
             body.is-answering .response ul:not(.is-visible),
             body.is-answering .response .math-block:not(.is-visible),
@@ -1089,7 +1115,12 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite"></article>
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    ></article>
                     <div class="scroll-fade-overlay">
                         <button class="scroll-bottom-button" type="button" aria-label="回到底部">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -1103,7 +1134,14 @@
 
                 <footer class="composer" aria-label="输入框">
                     <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
@@ -1121,7 +1159,7 @@
                 </footer>
             </section>
         </main>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script>
             (() => {
                 const expectedPrompt = '整理桌面的工作文件夹并且合理改名分类';
@@ -1138,6 +1176,10 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
+                let mathLineGeometryFrame = 0;
+                let lastMathLineWidth = '';
+                let lastMathLineOffset = '';
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
@@ -1145,6 +1187,23 @@
                 let isPromptTyping = false;
                 let startSequenceActive = false;
                 let externalScrollProgress = 0;
+                let isScrollDriven = false;
+                let hasReceivedScrollProgress = false;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type, deltaX = 0, deltaY = 0) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage(
+                                { type, deltaX, deltaY },
+                                window.location.origin
+                            );
+                        }
+                    } catch (error) {}
+                }
 
                 const answerMarkdown = [
                     '已按您的要求完成整理，桌面的工作文件已经重新归类并做了更清晰的命名。',
@@ -1184,49 +1243,7 @@
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownContent(markdown) {
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-
-                    const html = md
-                        ? md.render(markdown)
-                        : markdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownContent = window.TouchAILiteRenderer.renderMarkdownContent;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1299,11 +1316,27 @@
                     const responseRect = response.getBoundingClientRect();
                     const mathLineWidth = `${panel.clientWidth}px`;
                     const mathLineOffset = `${panelRect.left - responseRect.left}px`;
-                    response.style.setProperty('--math-line-width', mathLineWidth);
-                    response.style.setProperty('--math-line-offset', mathLineOffset);
-                    response.querySelectorAll('.math-block').forEach((block) => {
-                        block.style.width = mathLineWidth;
-                        block.style.marginLeft = mathLineOffset;
+
+                    if (
+                        mathLineWidth === lastMathLineWidth &&
+                        mathLineOffset === lastMathLineOffset
+                    ) {
+                        return;
+                    }
+
+                    lastMathLineWidth = mathLineWidth;
+                    lastMathLineOffset = mathLineOffset;
+                    if (mathLineGeometryFrame) {
+                        window.cancelAnimationFrame(mathLineGeometryFrame);
+                    }
+                    mathLineGeometryFrame = window.requestAnimationFrame(() => {
+                        mathLineGeometryFrame = 0;
+                        response.style.setProperty('--math-line-width', mathLineWidth);
+                        response.style.setProperty('--math-line-offset', mathLineOffset);
+                        response.querySelectorAll('.math-block').forEach((block) => {
+                            block.style.width = mathLineWidth;
+                            block.style.marginLeft = mathLineOffset;
+                        });
                     });
                 }
 
@@ -1338,6 +1371,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1350,14 +1384,14 @@
 
                 function resetVisibleBlocks() {
                     response
-                        .querySelectorAll('p, ul, li, .math-block, .response-divider')
+                        .querySelectorAll('p, h2, ul, li, .math-block, .response-divider')
                         .forEach((block) => {
                             block.classList.remove('is-visible');
                         });
                 }
 
                 function markVisibleBlock(node) {
-                    const textBlock = node.parentElement.closest('p, li, .math-block');
+                    const textBlock = node.parentElement.closest('p, h2, li, .math-block');
 
                     if (textBlock) {
                         textBlock.classList.add('is-visible');
@@ -1387,6 +1421,38 @@
                     window.clearTimeout(promptTypingTimer);
                     promptTypingTimer = 0;
                     isPromptTyping = false;
+                    startSequenceActive = false;
+                }
+
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = complete ? 1 : 0;
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        setResponseProgress(1);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
                 }
 
                 function syncScrollMode() {
@@ -1402,6 +1468,11 @@
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1409,6 +1480,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function applyExternalScrollProgress(progress) {
                     externalScrollProgress = Math.max(0, Math.min(1, Number(progress) || 0));
 
@@ -1450,6 +1551,12 @@
 
                 function renderScrollProgress(progress) {
                     const scrubProgress = Math.max(0, Math.min(1, Number(progress) || 0));
+                    hasReceivedScrollProgress = scrubProgress > 0.0005 && scrubProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     externalScrollProgress = scrubProgress;
                     window.clearTimeout(typingTimer);
                     window.clearTimeout(promptTypingTimer);
@@ -1458,13 +1565,12 @@
                     isPromptTyping = false;
                     startSequenceActive = false;
 
-                    const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
-                    input.value = expectedPrompt.slice(
-                        0,
-                        Math.round(expectedPrompt.length * promptProgress)
-                    );
-
                     if (scrubProgress < 0.18) {
+                        const promptProgress = Math.max(0, Math.min(1, scrubProgress / 0.18));
+                        input.value = expectedPrompt.slice(
+                            0,
+                            Math.round(expectedPrompt.length * promptProgress)
+                        );
                         hasStarted = false;
                         resetResponseText();
                         document.body.classList.remove(
@@ -1477,13 +1583,15 @@
                         return;
                     }
 
+                    clearPromptInput();
+
                     if (!hasStarted) {
                         resetResponseText();
+                        response.setAttribute('aria-busy', 'true');
                         hasStarted = true;
                     }
 
                     const answerProgress = Math.max(0, Math.min(1, (scrubProgress - 0.18) / 0.5));
-                    const scrollProgress = Math.max(0, Math.min(1, (scrubProgress - 0.66) / 0.34));
                     document.body.classList.remove('is-idle', 'is-answering', 'is-complete');
                     document.body.classList.add(
                         answerProgress >= 1 ? 'is-complete' : 'is-answering'
@@ -1492,18 +1600,13 @@
                     setResponseProgress(answerProgress);
                     syncMathLineGeometry();
 
-                    window.requestAnimationFrame(() => {
-                        const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                        document.body.classList.toggle(
-                            'is-scrolling',
-                            maxScroll > 1 && scrubProgress >= 0.66
-                        );
-                        content.scrollTop =
-                            answerProgress >= 1
-                                ? Math.round(maxScroll * scrollProgress)
-                                : Math.round(maxScroll * answerProgress);
-                        updateScrollAffordance();
-                    });
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    document.body.classList.toggle(
+                        'is-scrolling',
+                        maxScroll > 1 && scrubProgress >= 0.66
+                    );
+                    keepLatestResponseVisible();
+                    updateScrollAffordance();
                 }
 
                 function startTypewriter() {
@@ -1514,6 +1617,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             applyExternalScrollProgress(externalScrollProgress);
                             updateScrollAffordance();
@@ -1551,10 +1655,14 @@
                 }
 
                 function showAnswer() {
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     startSequenceActive = false;
                     document.body.classList.remove('is-idle', 'is-complete');
@@ -1587,6 +1695,9 @@
                         return;
                     }
 
+                    hasReceivedScrollProgress = false;
+                    externalScrollProgress = 0;
+                    setScrollDrivenState(false);
                     clearPromptTyping();
                     startSequenceActive = true;
                     isPromptTyping = true;
@@ -1619,24 +1730,41 @@
                 }
 
                 resetResponseText();
-                window.parent?.postMessage?.({ type: 'touchai-work-organizer-ready' });
+                notifyParent('touchai-work-organizer-ready');
                 form.addEventListener('submit', submitPrompt);
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-work-organizer-start') {
+                    if (message.type === 'touchai-work-organizer-start') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
                         typePromptThenSubmit();
                         return;
                     }
 
-                    if (event.data?.type === 'touchai-set-scroll-progress') {
-                        renderScrollProgress(event.data.progress);
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type === 'touchai-set-scroll-progress') {
+                        renderScrollProgress(message.progress);
                     }
                 });
                 toolbarButtons.forEach((button) => {
@@ -1653,11 +1781,17 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
             })();
         </script>
     </body>
diff --git a/apps/site/public/icon-192.png b/apps/site/public/icon-192.png
new file mode 100644
index 00000000..0993153a
Binary files /dev/null and b/apps/site/public/icon-192.png differ
diff --git a/apps/site/public/icon-512.png b/apps/site/public/icon-512.png
new file mode 100644
index 00000000..7f3bf970
Binary files /dev/null and b/apps/site/public/icon-512.png differ
diff --git a/apps/site/public/robots.txt b/apps/site/public/robots.txt
new file mode 100644
index 00000000..ecd4b007
--- /dev/null
+++ b/apps/site/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://touch-ai.org/sitemap-index.xml
diff --git a/apps/site/public/seo-card.png b/apps/site/public/seo-card.png
new file mode 100644
index 00000000..13d7fcae
Binary files /dev/null and b/apps/site/public/seo-card.png differ
diff --git a/apps/site/public/site.webmanifest b/apps/site/public/site.webmanifest
new file mode 100644
index 00000000..445244e3
--- /dev/null
+++ b/apps/site/public/site.webmanifest
@@ -0,0 +1,29 @@
+{
+    "name": "TouchAI",
+    "short_name": "TouchAI",
+    "description": "Your desktop agent, one shortcut away.",
+    "lang": "zh-CN",
+    "start_url": "/",
+    "scope": "/",
+    "display": "standalone",
+    "background_color": "#ffffff",
+    "theme_color": "#ffffff",
+    "icons": [
+        {
+            "src": "/icon-192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        },
+        {
+            "src": "/icon-512.png",
+            "sizes": "512x512",
+            "type": "image/png",
+            "purpose": "maskable"
+        }
+    ]
+}
diff --git a/apps/site/public/touchai-intro-en/touchai-components.html b/apps/site/public/touchai-intro-en/touchai-components.html
index bc60c287..9cdaabc3 100644
--- a/apps/site/public/touchai-intro-en/touchai-components.html
+++ b/apps/site/public/touchai-intro-en/touchai-components.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="zh-CN">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
@@ -80,6 +80,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -145,20 +149,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -460,6 +464,16 @@
                 flex: 0 0 auto;
             }
 
+            body.is-complete .conversation-content,
+            body.is-complete.is-scrolling .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
             body.is-answering .composer {
                 margin-top: 0;
             }
@@ -468,6 +482,29 @@
                 margin-top: auto;
             }
 
+            body.is-complete .composer {
+                margin-top: 0;
+            }
+
+            body.is-complete.is-scrolling .composer {
+                margin-top: auto;
+            }
+
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -705,7 +742,7 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
@@ -715,8 +752,14 @@
             body.is-answering .response li:not(.is-visible),
             body.is-answering .response ul:not(.is-visible),
             body.is-answering .response .math-block:not(.is-visible),
-            body.is-answering .response .response-divider:not(.is-visible) {
-                visibility: hidden;
+            body.is-answering .response .response-divider:not(.is-visible),
+            body.is-complete .response p:not(.is-visible),
+            body.is-complete .response h2:not(.is-visible),
+            body.is-complete .response li:not(.is-visible),
+            body.is-complete .response ul:not(.is-visible),
+            body.is-complete .response .math-block:not(.is-visible),
+            body.is-complete .response .response-divider:not(.is-visible) {
+                display: none;
             }
 
             .typed-marker {
@@ -1019,14 +1062,14 @@
     </head>
     <body class="is-idle">
         <main class="stage">
-            <section class="chat-panel is-unified" aria-label="TouchAI 对话组件">
-                <header class="panel-top toolbar-fade-overlay" aria-label="窗口工具栏">
-                    <button class="toolbar-button" type="button" aria-label="新建会话">
+            <section class="chat-panel is-unified" aria-label="TouchAI conversation demo">
+                <header class="panel-top toolbar-fade-overlay" aria-label="Window toolbar">
+                    <button class="toolbar-button" type="button" aria-label="New conversation">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6z" />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="历史记录">
+                    <button class="toolbar-button" type="button" aria-label="Conversation history">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path d="M12 8v5h5v-2h-3V8z" />
                             <path
@@ -1034,7 +1077,7 @@
                             />
                         </svg>
                     </button>
-                    <button class="toolbar-button" type="button" aria-label="最大化窗口">
+                    <button class="toolbar-button" type="button" aria-label="Maximize window">
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
                                 d="M5 5h5V3H3v7h2zm5 14H5v-5H3v7h7zm11-5h-2v5h-5v2h7zm-2-4h2V3h-7v2h5z"
@@ -1044,7 +1087,7 @@
                     <button
                         class="toolbar-button toolbar-button--pinned"
                         type="button"
-                        aria-label="固定窗口"
+                        aria-label="Pin window"
                     >
                         <svg class="icon-btn" viewBox="0 0 24 24" aria-hidden="true">
                             <path
@@ -1056,10 +1099,10 @@
 
                 <div class="conversation-content">
                     <div class="prompt-layer">
-                        <div class="prompt-pill prompt-card" aria-label="用户输入">
+                        <div class="prompt-pill prompt-card" aria-label="User prompt">
                             <div class="prompt-text">What is TouchAI?</div>
                         </div>
-                        <button class="prompt-copy" type="button" aria-label="复制问题">
+                        <button class="prompt-copy" type="button" aria-label="Copy problem">
                             <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"
@@ -1067,9 +1110,18 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite"></article>
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    ></article>
                     <div class="scroll-fade-overlay">
-                        <button class="scroll-bottom-button" type="button" aria-label="回到底部">
+                        <button
+                            class="scroll-bottom-button"
+                            type="button"
+                            aria-label="Scroll to bottom"
+                        >
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path
                                     d="M11 16.414V5h2v11.414l5.707-5.707l1.414 1.414L12 20.243l-8.121-8.122l1.414-1.414z"
@@ -1079,18 +1131,25 @@
                     </div>
                 </div>
 
-                <footer class="composer" aria-label="输入框">
-                    <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                <footer class="composer" aria-label="Message composer">
+                    <form class="composer-form prompt-form" aria-label="Message composer">
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
                             value=""
                             placeholder="Type your request..."
-                            aria-label="输入问题"
+                            aria-label="Problem input"
                             autocomplete="off"
                         />
-                        <button class="submit-btn" type="submit" aria-label="发送">
+                        <button class="submit-btn" type="submit" aria-label="Send">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
                                 <path d="M10 17l5-5-5-5v10z" />
                             </svg>
@@ -1099,7 +1158,7 @@
                 </footer>
             </section>
         </main>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script>
             (() => {
                 const expectedPrompt = 'What is TouchAI?';
@@ -1116,14 +1175,26 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
+                let promptTypingTimer = 0;
                 let fallbackTimer = 0;
                 let isScrollDriven = false;
                 let hasReceivedScrollProgress = false;
-                let pendingScrollProgress = 0;
-                let scrollProgressFrame = 0;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage({ type }, window.location.origin);
+                        }
+                    } catch (error) {}
+                }
                 let totalTextCharacters = 0;
                 let lastRenderedCharacterCount = -1;
                 let lastRenderedScrollTop = -1;
@@ -1154,63 +1225,21 @@
                 ].join('\n');
 
                 const actionHtml = `
-          <div class="response-actions" aria-label="回答操作">
-            <span class="thinking-dots" aria-label="正在思考">
+          <div class="response-actions" aria-label="Answer actions">
+            <span class="thinking-dots" aria-label="Thinking">
               <span></span>
               <span></span>
               <span></span>
             </span>
-            <button class="action-button copy-answer" type="button" aria-label="复制回答">
+            <button class="action-button copy-answer" type="button" aria-label="Copy answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2M4 20V10h10l.002 10zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10z"/></svg>
             </button>
-            <button class="action-button replay-answer" type="button" aria-label="重新生成">
+            <button class="action-button replay-answer" type="button" aria-label="Regenerate answer">
               <svg class="small-icon" viewBox="0 0 24 24" aria-hidden="true"><path d="M10 11H7.101l.001-.009a5 5 0 0 1 .752-1.787a5.05 5.05 0 0 1 2.2-1.811q.455-.193.938-.291a5.1 5.1 0 0 1 2.018 0a5 5 0 0 1 2.525 1.361l1.416-1.412a7 7 0 0 0-2.224-1.501a7 7 0 0 0-1.315-.408a7.1 7.1 0 0 0-2.819 0a7 7 0 0 0-1.316.409a7.04 7.04 0 0 0-3.08 2.534a7 7 0 0 0-1.054 2.505c-.028.135-.043.273-.063.41H2l4 4zm4 2h2.899l-.001.008a4.98 4.98 0 0 1-2.103 3.138a4.9 4.9 0 0 1-1.787.752a5.1 5.1 0 0 1-2.017 0a5 5 0 0 1-1.787-.752a5 5 0 0 1-.74-.61L7.05 16.95a7 7 0 0 0 2.225 1.5c.424.18.867.317 1.315.408a7.1 7.1 0 0 0 2.818 0a7.03 7.03 0 0 0 4.395-2.945a7 7 0 0 0 1.053-2.503c.027-.135.043-.273.063-.41H22l-4-4z"/></svg>
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownContent(markdown) {
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-
-                    const html = md
-                        ? md.render(markdown)
-                        : markdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownContent = window.TouchAILiteRenderer.renderMarkdownContent;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1337,6 +1366,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1384,18 +1414,61 @@
                     input.blur();
                 }
 
+                function clearPromptTyping() {
+                    window.clearTimeout(promptTypingTimer);
+                    promptTypingTimer = 0;
+                }
+
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    window.clearTimeout(fallbackTimer);
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        revealAnswerAt(1);
+                        syncScrollMode();
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
+                }
+
                 function syncScrollMode() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
                     const shouldScroll =
-                        document.body.classList.contains('is-scrolling') ||
-                        content.scrollHeight > content.clientHeight + 1;
+                        document.body.classList.contains('is-scrolling') || maxScroll > 1;
 
                     document.body.classList.toggle('is-scrolling', shouldScroll);
 
-                    if (shouldScroll) {
-                        content.scrollTop = content.scrollHeight;
+                    if (shouldScroll && maxScroll > 1) {
+                        keepLatestResponseVisible();
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                    return maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1403,6 +1476,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function clamp01(value) {
                     if (!Number.isFinite(value)) {
                         return 0;
@@ -1444,11 +1547,12 @@
                         item.node.nodeValue = '';
                     });
 
-                    document.body.classList.add('is-scrolling');
-
                     const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                    const scrollProgress = clamp01((answerProgress - 0.34) / 0.66);
-                    const nextScrollTop = maxScroll * scrollProgress;
+                    const shouldPinLatest = maxScroll > 1;
+                    const shouldUseScrollLayout = shouldPinLatest && answerProgress >= 0.34;
+                    const nextScrollTop = shouldPinLatest ? maxScroll : 0;
+
+                    document.body.classList.toggle('is-scrolling', shouldUseScrollLayout);
 
                     if (
                         renderedCharacterCount === lastRenderedCharacterCount &&
@@ -1460,18 +1564,28 @@
 
                     lastRenderedCharacterCount = renderedCharacterCount;
                     lastRenderedScrollTop = nextScrollTop;
-                    content.scrollTop = nextScrollTop;
+                    if (shouldPinLatest) {
+                        keepLatestResponseVisible();
+                    } else {
+                        content.scrollTop = 0;
+                    }
 
                     updateScrollAffordance();
                 }
 
                 function renderScrollProgress(progress) {
                     const currentProgress = clamp01(progress);
-                    hasReceivedScrollProgress = true;
-                    isScrollDriven = true;
+                    hasReceivedScrollProgress =
+                        currentProgress > 0.0005 && currentProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     hasStarted = currentProgress > 0.02;
                     window.clearTimeout(fallbackTimer);
                     window.clearTimeout(typingTimer);
+                    clearPromptTyping();
 
                     if (currentProgress < 0.2) {
                         document.body.classList.remove(
@@ -1506,16 +1620,7 @@
                 }
 
                 function scheduleScrollProgress(progress) {
-                    pendingScrollProgress = clamp01(progress);
-
-                    if (scrollProgressFrame) {
-                        return;
-                    }
-
-                    scrollProgressFrame = window.requestAnimationFrame(() => {
-                        scrollProgressFrame = 0;
-                        renderScrollProgress(pendingScrollProgress);
-                    });
+                    renderScrollProgress(progress);
                 }
 
                 function startTypewriter() {
@@ -1526,6 +1631,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             updateScrollAffordance();
                             return;
@@ -1565,9 +1671,13 @@
                 }
 
                 function showAnswer() {
+                    hasReceivedScrollProgress = false;
+                    setScrollDrivenState(false);
+                    clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     document.body.classList.remove('is-idle', 'is-complete');
                     document.body.classList.add('is-answering');
@@ -1590,6 +1700,9 @@
                 }
 
                 function typePromptThenSubmit() {
+                    hasReceivedScrollProgress = false;
+                    setScrollDrivenState(false);
+                    clearPromptTyping();
                     input.value = '';
                     input.focus({ preventScroll: true });
 
@@ -1600,14 +1713,14 @@
                         promptIndex += 1;
 
                         if (promptIndex < expectedPrompt.length) {
-                            window.setTimeout(typeNextPromptCharacter, 86);
+                            promptTypingTimer = window.setTimeout(typeNextPromptCharacter, 86);
                             return;
                         }
 
-                        window.setTimeout(() => submitButton.click(), 520);
+                        promptTypingTimer = window.setTimeout(() => submitButton.click(), 520);
                     }
 
-                    window.setTimeout(typeNextPromptCharacter, 520);
+                    promptTypingTimer = window.setTimeout(typeNextPromptCharacter, 520);
                 }
 
                 resetResponseText();
@@ -1626,28 +1739,49 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type !== 'touchai-set-progress') {
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type !== 'touchai-set-progress') {
                         return;
                     }
 
-                    scheduleScrollProgress(event.data.progress);
+                    scheduleScrollProgress(message.progress);
                 });
                 window.addEventListener('load', () => {
-                    window.parent?.postMessage({ type: 'touchai-component-ready' }, '*');
+                    notifyParent('touchai-component-ready');
                     fallbackTimer = window.setTimeout(() => {
                         if (
                             !isScrollDriven &&
diff --git a/apps/site/public/touchai-intro/touchai-components.html b/apps/site/public/touchai-intro/touchai-components.html
index 0930a7d2..72784afa 100644
--- a/apps/site/public/touchai-intro/touchai-components.html
+++ b/apps/site/public/touchai-intro/touchai-components.html
@@ -84,6 +84,10 @@
                     margin-bottom 640ms cubic-bezier(0.22, 1, 0.36, 1);
             }
 
+            body.is-scroll-driven .chat-panel {
+                will-change: auto;
+            }
+
             body.is-idle .chat-panel {
                 max-height: 56px;
                 min-height: 56px;
@@ -153,20 +157,20 @@
                 flex: 1 1 auto;
                 min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 scrollbar-width: none;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
 
-            body.is-answering .conversation-content {
-                flex: 0 0 auto;
-                overflow: visible;
-                padding-bottom: 0;
-            }
-
+            body.is-answering .conversation-content,
             body.is-answering.is-scrolling .conversation-content {
                 flex: 1 1 auto;
+                min-height: 0;
                 overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
                 padding-top: 0;
                 padding-bottom: 20px;
             }
@@ -468,6 +472,16 @@
                 flex: 0 0 auto;
             }
 
+            body.is-complete .conversation-content,
+            body.is-complete.is-scrolling .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
             body.is-answering .composer {
                 margin-top: 0;
             }
@@ -476,6 +490,29 @@
                 margin-top: auto;
             }
 
+            body.is-complete .composer {
+                margin-top: 0;
+            }
+
+            body.is-complete.is-scrolling .composer {
+                margin-top: auto;
+            }
+
+            body.is-scroll-driven.is-answering .conversation-content,
+            body.is-scroll-driven.is-complete .conversation-content {
+                flex: 1 1 auto;
+                min-height: 0;
+                overflow-y: auto;
+                overscroll-behavior: contain;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 20px;
+            }
+
+            body.is-scroll-driven.is-answering .composer,
+            body.is-scroll-driven.is-complete .composer {
+                margin-top: auto;
+            }
+
             .response > p,
             .response > ul,
             .response > .math-block,
@@ -713,7 +750,7 @@
                 margin-top: var(--response-item-gap);
             }
 
-            .response li > span:last-child {
+            .response li > span:last-child:not(.kbd) {
                 display: block;
                 text-indent: var(--paragraph-indent);
             }
@@ -723,8 +760,14 @@
             body.is-answering .response li:not(.is-visible),
             body.is-answering .response ul:not(.is-visible),
             body.is-answering .response .math-block:not(.is-visible),
-            body.is-answering .response .response-divider:not(.is-visible) {
-                visibility: hidden;
+            body.is-answering .response .response-divider:not(.is-visible),
+            body.is-complete .response p:not(.is-visible),
+            body.is-complete .response h2:not(.is-visible),
+            body.is-complete .response li:not(.is-visible),
+            body.is-complete .response ul:not(.is-visible),
+            body.is-complete .response .math-block:not(.is-visible),
+            body.is-complete .response .response-divider:not(.is-visible) {
+                display: none;
             }
 
             .typed-marker {
@@ -1018,6 +1061,12 @@
                     min-height: 0;
                 }
 
+                body.is-scroll-driven.is-complete .chat-panel {
+                    min-height: var(--window-min-height);
+                    max-height: var(--window-min-height);
+                    height: var(--window-min-height);
+                }
+
                 .response {
                     margin-right: 32px;
                     margin-top: 12px;
@@ -1075,7 +1124,12 @@
                             </svg>
                         </button>
                     </div>
-                    <article class="response math-response" aria-live="polite"></article>
+                    <article
+                        class="response math-response"
+                        aria-live="polite"
+                        aria-busy="false"
+                        aria-atomic="false"
+                    ></article>
                     <div class="scroll-fade-overlay">
                         <button class="scroll-bottom-button" type="button" aria-label="回到底部">
                             <svg viewBox="0 0 24 24" aria-hidden="true">
@@ -1089,7 +1143,14 @@
 
                 <footer class="composer" aria-label="输入框">
                     <form class="composer-form prompt-form" aria-label="输入框">
-                        <img class="mi-logo" src="./mimo.png" alt="Mimo" />
+                        <img
+                            class="mi-logo"
+                            src="./mimo.png"
+                            alt="Mimo"
+                            width="32"
+                            height="32"
+                            decoding="async"
+                        />
                         <input
                             class="prompt-input"
                             type="text"
@@ -1107,7 +1168,7 @@
                 </footer>
             </section>
         </main>
-        <script src="/demo-vendor/markdown-it/markdown-it.min.js"></script>
+        <script src="/demo-utils/touchai-lite-renderer.js"></script>
         <script>
             (() => {
                 const expectedPrompt = '什么是TouchAI';
@@ -1124,14 +1185,26 @@
                 let copyAnswer = null;
                 let replayAnswer = null;
                 let panelObserver = null;
+                let scrollAffordanceFrame = 0;
                 let textNodes = [];
                 let hasStarted = false;
                 let typingTimer = 0;
+                let promptTypingTimer = 0;
                 let fallbackTimer = 0;
                 let isScrollDriven = false;
                 let hasReceivedScrollProgress = false;
-                let pendingScrollProgress = 0;
-                let scrollProgressFrame = 0;
+
+                function getMessagePayload(event) {
+                    return event && typeof event.data === 'object' && event.data ? event.data : {};
+                }
+
+                function notifyParent(type) {
+                    try {
+                        if (window.parent && window.parent !== window) {
+                            window.parent.postMessage({ type }, window.location.origin);
+                        }
+                    } catch (error) {}
+                }
                 let totalTextCharacters = 0;
                 let lastRenderedCharacterCount = -1;
                 let lastRenderedScrollTop = -1;
@@ -1239,49 +1312,7 @@
             </button>
           </div>`;
 
-                function escapeHtml(value) {
-                    return value
-                        .replace(/&/g, '&amp;')
-                        .replace(/</g, '&lt;')
-                        .replace(/>/g, '&gt;')
-                        .replace(/"/g, '&quot;');
-                }
-
-                function renderFormula(source, displayMode) {
-                    if (window.katex) {
-                        return window.katex.renderToString(source, {
-                            displayMode,
-                            throwOnError: false,
-                            strict: 'ignore',
-                            output: 'html',
-                        });
-                    }
-
-                    return `<span class="katex-fallback">${escapeHtml(source)}</span>`;
-                }
-
-                function renderMarkdownContent(markdown) {
-                    const md = window.markdownit
-                        ? window.markdownit({ html: false, linkify: false, breaks: false })
-                        : null;
-
-                    const html = md
-                        ? md.render(markdown)
-                        : markdown
-                              .split(/\n{2,}/)
-                              .map((part) => {
-                                  if (part === '---') {
-                                      return `<hr />`;
-                                  }
-
-                                  return `<p>${escapeHtml(part).replace(/\n/g, '<br>')}</p>`;
-                              })
-                              .join('\n');
-
-                    return html
-                        .replace(/<hr>/g, `<p class="response-divider" aria-hidden="true"></p>`)
-                        .replace(/<p>/g, `<p class="paragraph-node">`);
-                }
+                const renderMarkdownContent = window.TouchAILiteRenderer.renderMarkdownContent;
 
                 function prepareTypewriterNodes() {
                     textNodes = [];
@@ -1408,6 +1439,7 @@
                 watchPanelGeometry();
 
                 function resetResponseText() {
+                    response.setAttribute('aria-busy', 'false');
                     window.clearTimeout(typingTimer);
                     document.body.classList.remove('is-scrolling');
                     document.body.classList.remove('has-below-content');
@@ -1455,18 +1487,61 @@
                     input.blur();
                 }
 
+                function clearPromptTyping() {
+                    window.clearTimeout(promptTypingTimer);
+                    promptTypingTimer = 0;
+                }
+
+                function resetDemoState(complete = false) {
+                    hasReceivedScrollProgress = false;
+                    window.clearTimeout(fallbackTimer);
+                    window.clearTimeout(typingTimer);
+                    clearPromptTyping();
+                    setScrollDrivenState(false);
+
+                    if (complete) {
+                        hasStarted = true;
+                        clearPromptInput();
+                        document.body.classList.remove('is-idle', 'is-answering');
+                        document.body.classList.add('is-complete');
+                        revealAnswerAt(1);
+                        syncScrollMode();
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    hasStarted = false;
+                    input.value = '';
+                    resetResponseText();
+                    document.body.classList.remove('is-answering', 'is-complete', 'is-scrolling');
+                    document.body.classList.add('is-idle');
+                    updateScrollAffordance();
+                }
+
+                function setScrollDrivenState(enabled) {
+                    isScrollDriven = Boolean(enabled);
+                    document.body.classList.toggle('is-scroll-driven', isScrollDriven);
+                    response.setAttribute('aria-live', isScrollDriven ? 'off' : 'polite');
+                }
+
                 function syncScrollMode() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
                     const shouldScroll =
-                        document.body.classList.contains('is-scrolling') ||
-                        panel.scrollHeight > panel.clientHeight + 1;
+                        document.body.classList.contains('is-scrolling') || maxScroll > 1;
 
                     document.body.classList.toggle('is-scrolling', shouldScroll);
 
-                    if (shouldScroll) {
-                        content.scrollTop = content.scrollHeight;
+                    if (shouldScroll && maxScroll > 1) {
+                        keepLatestResponseVisible();
                     }
                 }
 
+                function keepLatestResponseVisible() {
+                    const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
+                    content.scrollTop = maxScroll;
+                    return maxScroll;
+                }
+
                 function updateScrollAffordance() {
                     const hasBelow =
                         content.scrollHeight - content.scrollTop - content.clientHeight > 6;
@@ -1474,6 +1549,36 @@
                     document.body.classList.toggle('has-below-content', hasBelow);
                 }
 
+                function scheduleScrollAffordanceUpdate() {
+                    if (scrollAffordanceFrame) return;
+                    scrollAffordanceFrame = window.requestAnimationFrame(() => {
+                        scrollAffordanceFrame = 0;
+                        updateScrollAffordance();
+                    });
+                }
+
+                function forwardWheelToPage(event) {
+                    if (event.ctrlKey || event.metaKey) {
+                        event.preventDefault();
+                        return;
+                    }
+
+                    if (!isScrollDriven || !hasReceivedScrollProgress) {
+                        return;
+                    }
+
+                    const deltaMultiplier =
+                        event.deltaMode === 1 ? 16 : event.deltaMode === 2 ? window.innerHeight : 1;
+                    const nextDeltaY = event.deltaY * deltaMultiplier;
+
+                    if (Math.abs(nextDeltaY) < 0.5) {
+                        return;
+                    }
+
+                    event.preventDefault();
+                    window.parent.scrollBy(0, nextDeltaY);
+                }
+
                 function clamp01(value) {
                     if (!Number.isFinite(value)) {
                         return 0;
@@ -1515,11 +1620,12 @@
                         item.node.nodeValue = '';
                     });
 
-                    document.body.classList.add('is-scrolling');
-
                     const maxScroll = Math.max(0, content.scrollHeight - content.clientHeight);
-                    const scrollProgress = clamp01((answerProgress - 0.34) / 0.66);
-                    const nextScrollTop = maxScroll * scrollProgress;
+                    const shouldPinLatest = maxScroll > 1;
+                    const shouldUseScrollLayout = shouldPinLatest && answerProgress >= 0.34;
+                    const nextScrollTop = shouldPinLatest ? maxScroll : 0;
+
+                    document.body.classList.toggle('is-scrolling', shouldUseScrollLayout);
 
                     if (
                         renderedCharacterCount === lastRenderedCharacterCount &&
@@ -1531,18 +1637,28 @@
 
                     lastRenderedCharacterCount = renderedCharacterCount;
                     lastRenderedScrollTop = nextScrollTop;
-                    content.scrollTop = nextScrollTop;
+                    if (shouldPinLatest) {
+                        keepLatestResponseVisible();
+                    } else {
+                        content.scrollTop = 0;
+                    }
 
                     updateScrollAffordance();
                 }
 
                 function renderScrollProgress(progress) {
                     const currentProgress = clamp01(progress);
-                    hasReceivedScrollProgress = true;
-                    isScrollDriven = true;
+                    hasReceivedScrollProgress =
+                        currentProgress > 0.0005 && currentProgress < 0.9995;
+                    setScrollDrivenState(hasReceivedScrollProgress);
+                    response.setAttribute(
+                        'aria-busy',
+                        hasReceivedScrollProgress ? 'true' : 'false'
+                    );
                     hasStarted = currentProgress > 0.02;
                     window.clearTimeout(fallbackTimer);
                     window.clearTimeout(typingTimer);
+                    clearPromptTyping();
 
                     if (currentProgress < 0.2) {
                         document.body.classList.remove(
@@ -1577,16 +1693,7 @@
                 }
 
                 function scheduleScrollProgress(progress) {
-                    pendingScrollProgress = clamp01(progress);
-
-                    if (scrollProgressFrame) {
-                        return;
-                    }
-
-                    scrollProgressFrame = window.requestAnimationFrame(() => {
-                        scrollProgressFrame = 0;
-                        renderScrollProgress(pendingScrollProgress);
-                    });
+                    renderScrollProgress(progress);
                 }
 
                 function startTypewriter() {
@@ -1597,6 +1704,7 @@
                         if (nodeIndex >= textNodes.length) {
                             document.body.classList.remove('is-answering');
                             document.body.classList.add('is-complete');
+                            response.setAttribute('aria-busy', 'false');
                             syncScrollMode();
                             updateScrollAffordance();
                             return;
@@ -1636,9 +1744,12 @@
                 }
 
                 function showAnswer() {
+                    setScrollDrivenState(false);
+                    clearPromptTyping();
                     clearPromptInput();
                     hydrateMarkdownAnswer();
                     resetResponseText();
+                    response.setAttribute('aria-busy', 'true');
                     hasStarted = true;
                     document.body.classList.remove('is-idle', 'is-complete');
                     document.body.classList.add('is-answering');
@@ -1661,6 +1772,8 @@
                 }
 
                 function typePromptThenSubmit() {
+                    setScrollDrivenState(false);
+                    clearPromptTyping();
                     input.value = '';
                     input.focus({ preventScroll: true });
 
@@ -1671,14 +1784,14 @@
                         promptIndex += 1;
 
                         if (promptIndex < expectedPrompt.length) {
-                            window.setTimeout(typeNextPromptCharacter, 86);
+                            promptTypingTimer = window.setTimeout(typeNextPromptCharacter, 86);
                             return;
                         }
 
-                        window.setTimeout(() => submitButton.click(), 520);
+                        promptTypingTimer = window.setTimeout(() => submitButton.click(), 520);
                     }
 
-                    window.setTimeout(typeNextPromptCharacter, 520);
+                    promptTypingTimer = window.setTimeout(typeNextPromptCharacter, 520);
                 }
 
                 resetResponseText();
@@ -1697,28 +1810,49 @@
                         clearPromptInput();
                     }
                 });
-                scrollBottomButton.addEventListener('click', () => {
+                scrollBottomButton.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    document.body.classList.add('is-scrolling');
                     content.scrollTo({ top: content.scrollHeight, behavior: 'smooth' });
-                    document.body.classList.remove('has-below-content');
+                    window.setTimeout(updateScrollAffordance, 220);
+                });
+                content.addEventListener('scroll', scheduleScrollAffordanceUpdate, {
+                    passive: true,
                 });
-                content.addEventListener('scroll', updateScrollAffordance);
+                panel.addEventListener('wheel', forwardWheelToPage, { passive: false });
                 window.addEventListener('message', (event) => {
-                    if (event.data?.type === 'touchai-page-bg') {
+                    const message = getMessagePayload(event);
+                    if (message.type === 'touchai-page-bg') {
                         document.documentElement.style.setProperty(
                             '--page-bg',
-                            event.data.background || 'transparent'
+                            typeof message.background === 'string'
+                                ? message.background
+                                : 'transparent'
                         );
                         return;
                     }
 
-                    if (event.data?.type !== 'touchai-set-progress') {
+                    if (message.type === 'touchai-clear-scroll-driven') {
+                        hasReceivedScrollProgress = false;
+                        setScrollDrivenState(false);
+                        updateScrollAffordance();
+                        return;
+                    }
+
+                    if (message.type === 'touchai-reset-demo') {
+                        resetDemoState(false);
+                        return;
+                    }
+
+                    if (message.type !== 'touchai-set-progress') {
                         return;
                     }
 
-                    scheduleScrollProgress(event.data.progress);
+                    scheduleScrollProgress(message.progress);
                 });
                 window.addEventListener('load', () => {
-                    window.parent?.postMessage({ type: 'touchai-component-ready' }, '*');
+                    notifyParent('touchai-component-ready');
                     fallbackTimer = window.setTimeout(() => {
                         if (
                             !isScrollDriven &&
diff --git a/apps/site/src/components/ComponentDemo.astro b/apps/site/src/components/ComponentDemo.astro
index 228fe7f6..b7d71e01 100644
--- a/apps/site/src/components/ComponentDemo.astro
+++ b/apps/site/src/components/ComponentDemo.astro
@@ -235,7 +235,7 @@ ${instanceSelector}.feature-reminder-frame .stage {
     min-height: 100% !important;
     height: 100% !important;
     padding: 0 !important;
-    justify-content: center !important;
+    justify-content: flex-start !important;
     align-items: center !important;
 }
 
@@ -244,15 +244,16 @@ ${instanceSelector}.feature-component-frame .chat-panel,
 ${instanceSelector}.feature-work-frame .chat-panel,
 ${instanceSelector}.feature-reminder-frame .chat-panel {
     margin: 0 auto !important;
-    display: flex !important;
-    flex-direction: column !important;
-    overflow: hidden !important;
     box-shadow:
         0 34px 90px rgba(107, 114, 128, 0.22),
         0 12px 34px rgba(107, 114, 128, 0.12),
         0 0 48px rgba(107, 114, 128, 0.14) !important;
 }
 
+${instanceSelector}.is-scroll-driven .chat-panel {
+    will-change: auto !important;
+}
+
 ${instanceSelector}.component-frame .chat-panel {
     width: 100% !important;
     max-width: 100% !important;
@@ -264,58 +265,91 @@ ${instanceSelector}.component-frame.is-idle .chat-panel {
     background: var(--panel, #fff) !important;
 }
 
-${instanceSelector}.feature-component-frame .conversation-content,
-${instanceSelector}.feature-work-frame .conversation-content,
-${instanceSelector}.feature-reminder-frame .conversation-content {
+${instanceSelector}.component-frame .conversation-content {
     flex: 1 1 auto !important;
     min-height: 0 !important;
-    overflow-y: hidden !important;
+    overflow-y: auto !important;
     padding-bottom: 18px !important;
+    overscroll-behavior: contain !important;
+    scrollbar-width: none !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
-${instanceSelector}.feature-component-frame.is-scrolling .conversation-content,
-${instanceSelector}.feature-work-frame.is-scrolling .conversation-content,
-${instanceSelector}.feature-reminder-frame.is-scrolling .conversation-content {
+${instanceSelector}.component-frame .conversation-content,
+${instanceSelector}.feature-component-frame .conversation-content,
+${instanceSelector}.feature-work-frame .conversation-content,
+${instanceSelector}.feature-reminder-frame .conversation-content {
+    min-height: 0 !important;
     overflow-y: auto !important;
+    overscroll-behavior: contain !important;
+    scrollbar-width: none !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
-${instanceSelector}.feature-component-frame .composer,
-${instanceSelector}.feature-work-frame .composer,
-${instanceSelector}.feature-reminder-frame .composer {
-    height: 56px !important;
-    min-height: 56px !important;
-    max-height: 56px !important;
-    flex: 0 0 56px !important;
-    margin-top: 0 !important;
-}
-
-${instanceSelector}.feature-component-frame .composer-form,
-${instanceSelector}.feature-work-frame .composer-form,
-${instanceSelector}.feature-reminder-frame .composer-form {
-    height: 56px !important;
-    min-height: 56px !important;
-    max-height: 56px !important;
-    align-items: center !important;
-}
-
-${instanceSelector}.feature-component-frame .prompt-input,
-${instanceSelector}.feature-work-frame .prompt-input,
-${instanceSelector}.feature-reminder-frame .prompt-input {
-    height: 32px !important;
-    min-height: 32px !important;
-    max-height: 32px !important;
-    line-height: 32px !important;
+${instanceSelector}.component-frame .conversation-content::-webkit-scrollbar,
+${instanceSelector}.feature-component-frame .conversation-content::-webkit-scrollbar,
+${instanceSelector}.feature-work-frame .conversation-content::-webkit-scrollbar,
+${instanceSelector}.feature-reminder-frame .conversation-content::-webkit-scrollbar {
+    display: none;
 }
 
+${instanceSelector}.component-frame.is-answering .chat-panel,
+${instanceSelector}.component-frame.is-complete .chat-panel,
 ${instanceSelector}.feature-component-frame.is-answering .chat-panel,
 ${instanceSelector}.feature-component-frame.is-complete .chat-panel,
 ${instanceSelector}.feature-work-frame.is-answering .chat-panel,
 ${instanceSelector}.feature-work-frame.is-complete .chat-panel,
 ${instanceSelector}.feature-reminder-frame.is-answering .chat-panel,
 ${instanceSelector}.feature-reminder-frame.is-complete .chat-panel {
-    min-height: 100% !important;
-    max-height: 100% !important;
-    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    max-width: 100% !important;
+}
+
+${instanceSelector}.feature-component-frame.is-answering .stage,
+${instanceSelector}.feature-component-frame.is-complete .stage,
+${instanceSelector}.feature-work-frame.is-answering .stage,
+${instanceSelector}.feature-work-frame.is-complete .stage,
+${instanceSelector}.feature-reminder-frame.is-answering .stage,
+${instanceSelector}.feature-reminder-frame.is-complete .stage {
+    justify-content: flex-start !important;
+}
+
+${instanceSelector}.feature-component-frame.is-complete .chat-panel,
+${instanceSelector}.feature-work-frame.is-complete .chat-panel,
+${instanceSelector}.feature-reminder-frame.is-complete .chat-panel,
+${instanceSelector}.feature-component-frame.is-scroll-driven.is-complete .chat-panel,
+${instanceSelector}.feature-work-frame.is-scroll-driven.is-complete .chat-panel,
+${instanceSelector}.feature-reminder-frame.is-scroll-driven.is-complete .chat-panel {
+    min-height: 0 !important;
+    height: auto !important;
+}
+
+${instanceSelector}.component-frame.is-answering .conversation-content,
+${instanceSelector}.component-frame.is-complete .conversation-content,
+${instanceSelector}.feature-component-frame.is-answering .conversation-content,
+${instanceSelector}.feature-component-frame.is-complete .conversation-content,
+${instanceSelector}.feature-work-frame.is-answering .conversation-content,
+${instanceSelector}.feature-work-frame.is-complete .conversation-content,
+${instanceSelector}.feature-reminder-frame.is-answering .conversation-content,
+${instanceSelector}.feature-reminder-frame.is-complete .conversation-content {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    overflow-y: auto !important;
+    padding-bottom: 20px !important;
+    overscroll-behavior: contain !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+${instanceSelector}.component-frame.is-answering .composer,
+${instanceSelector}.component-frame.is-complete .composer,
+${instanceSelector}.feature-component-frame.is-answering .composer,
+${instanceSelector}.feature-component-frame.is-complete .composer,
+${instanceSelector}.feature-work-frame.is-answering .composer,
+${instanceSelector}.feature-work-frame.is-complete .composer,
+${instanceSelector}.feature-reminder-frame.is-answering .composer,
+${instanceSelector}.feature-reminder-frame.is-complete .composer {
+    margin-top: auto !important;
 }
 
 @media (max-width: 900px) {
@@ -333,6 +367,35 @@ ${instanceSelector}.feature-reminder-frame.is-complete .chat-panel {
     }
 }
 
+@media (max-height: 780px) {
+    ${instanceSelector}.component-frame {
+        width: min(52vw, 560px, 100%) !important;
+        max-width: min(560px, 100%) !important;
+        height: auto !important;
+        min-height: 0 !important;
+        aspect-ratio: 760 / 657 !important;
+        max-height: min(60vh, 520px) !important;
+        overflow: hidden !important;
+    }
+
+    ${instanceSelector}.component-frame .stage {
+        min-height: 0 !important;
+        height: 100% !important;
+        padding: 0 !important;
+        align-items: center !important;
+        justify-content: center !important;
+    }
+
+    ${instanceSelector}.component-frame.is-answering .chat-panel,
+    ${instanceSelector}.component-frame.is-complete .chat-panel,
+    ${instanceSelector}.component-frame.is-scroll-driven.is-answering .chat-panel,
+    ${instanceSelector}.component-frame.is-scroll-driven.is-complete .chat-panel {
+        display: flex !important;
+        flex-direction: column !important;
+        max-width: 100% !important;
+    }
+}
+
 @media (max-width: 560px) {
     ${instanceSelector}.component-frame {
         width: min(calc(100vw - 56px), 360px, 100%) !important;
@@ -367,5 +430,7 @@ const initialClassName = [className, body.className].filter(Boolean).join(' ');
     data-title={title}
     data-loading={loading}
     data-base-class={className}
+    role="region"
+    aria-label={title}
     set:html={resolvedBodyHtmlWithoutScripts}
 />
diff --git a/apps/site/src/content.config.ts b/apps/site/src/content.config.ts
new file mode 100644
index 00000000..27c5ead7
--- /dev/null
+++ b/apps/site/src/content.config.ts
@@ -0,0 +1,10 @@
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+import { defineCollection } from 'astro:content';
+
+export const collections = {
+    docs: defineCollection({
+        loader: docsLoader(),
+        schema: docsSchema(),
+    }),
+};
diff --git a/apps/site/src/content/docs/404.md b/apps/site/src/content/docs/404.md
new file mode 100644
index 00000000..8961e40f
--- /dev/null
+++ b/apps/site/src/content/docs/404.md
@@ -0,0 +1,7 @@
+---
+title: 页面未找到
+description: 访问的页面不存在，请返回首页继续浏览。
+template: splash
+---
+
+访问的页面不存在。请返回首页继续浏览。
diff --git a/apps/site/src/pages/index.astro b/apps/site/src/pages/index.astro
index 0e2eea38..8de68066 100644
--- a/apps/site/src/pages/index.astro
+++ b/apps/site/src/pages/index.astro
@@ -2,10 +2,101 @@
 import ComponentDemo from '../components/ComponentDemo.astro';
 
 const CLARITY_ID = import.meta.env.PUBLIC_CLARITY_ID ?? '';
-const WAITLIST_ENDPOINT = import.meta.env.PUBLIC_WAITLIST_ENDPOINT ?? '';
-const releasesUrl = 'https://github.com/TouchAI-org/TouchAI/releases';
-const repoUrl = 'https://github.com/TouchAI-org/TouchAI';
-const docsUrl = 'https://touch-ai.org/getting-started';
+const ANALYTICS_ENDPOINT = import.meta.env.PUBLIC_ANALYTICS_ENDPOINT ?? '';
+const siteUrl = 'https://touch-ai.org/';
+const repoPath = 'TouchAI-org/TouchAI';
+const repoUrl = `https://github.com/${repoPath}`;
+const releasesUrl = `${repoUrl}/releases`;
+const repoApiUrl = `https://api.github.com/repos/${repoPath}`;
+const titleZh = 'TouchAI：一触即达的桌面效率 Agent';
+const titleEn = 'TouchAI: A Desktop Efficiency Agent at Your Fingertips';
+const descriptionZh = '一触即达的桌面效率 Agent——随时待命，做您触手可及的 AI 入口';
+const descriptionEn = 'Your desktop AI agent, always ready — your touch-accessible AI gateway';
+const keywords =
+    'TouchAI, desktop AI agent, AI desktop assistant, productivity agent, AI 助手, 桌面 AI, 桌面效率工具, 触控 AI, 自动化工作流, 本地桌面助手';
+const socialImageUrl = `${siteUrl}seo-card.png`;
+const organizationId = `${siteUrl}#organization`;
+const websiteId = `${siteUrl}#website`;
+const softwareId = `${siteUrl}#software`;
+const loadInitialRepoStats = async () => {
+    const headers = {
+        Accept: 'application/vnd.github+json',
+        'X-GitHub-Api-Version': '2022-11-28',
+    };
+    const stats = {
+        stars: null,
+        forks: null,
+    };
+
+    try {
+        const response = await fetch(repoApiUrl, { headers });
+        if (response.ok) {
+            const data = await response.json();
+            stats.stars = data.stargazers_count;
+            stats.forks = data.forks_count;
+        }
+    } catch {}
+
+    return stats;
+};
+const initialRepoStats = await loadInitialRepoStats();
+const structuredData = JSON.stringify({
+    '@context': 'https://schema.org',
+    '@graph': [
+        {
+            '@type': 'Organization',
+            '@id': organizationId,
+            name: 'TouchAI',
+            url: siteUrl,
+            logo: {
+                '@type': 'ImageObject',
+                url: `${siteUrl}logo.svg`,
+            },
+            sameAs: [repoUrl],
+        },
+        {
+            '@type': 'WebSite',
+            '@id': websiteId,
+            url: siteUrl,
+            name: 'TouchAI',
+            alternateName: titleEn,
+            description: descriptionZh,
+            inLanguage: ['zh-CN', 'en'],
+            publisher: {
+                '@id': organizationId,
+            },
+        },
+        {
+            '@type': 'SoftwareApplication',
+            '@id': softwareId,
+            name: 'TouchAI',
+            alternateName: 'TouchAI Desktop Agent',
+            url: siteUrl,
+            description: descriptionZh,
+            applicationCategory: 'ProductivityApplication',
+            applicationSubCategory: 'Desktop AI agent',
+            operatingSystem: 'Windows 10/11, macOS 12+, Linux (Ubuntu 20.04+, Fedora 35+)',
+            image: socialImageUrl,
+            downloadUrl: releasesUrl,
+            mainEntityOfPage: siteUrl,
+            inLanguage: ['zh-CN', 'en'],
+            keywords,
+            author: {
+                '@id': organizationId,
+            },
+            publisher: {
+                '@id': organizationId,
+            },
+            license: `${repoUrl}/blob/main/COPYING`,
+            isAccessibleForFree: true,
+            offers: {
+                '@type': 'Offer',
+                price: '0',
+                priceCurrency: 'USD',
+            },
+        },
+    ],
+});
 ---
 
 <!doctype html>
@@ -13,25 +104,101 @@ const docsUrl = 'https://touch-ai.org/getting-started';
     <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>TouchAI</title>
         <meta
+            name="robots"
+            content="index,follow,max-image-preview:large,max-snippet:-1,max-video-preview:-1"
+        />
+        <meta name="referrer" content="strict-origin-when-cross-origin" />
+        <meta name="application-name" content="TouchAI" />
+        <meta name="apple-mobile-web-app-title" content="TouchAI" />
+        <meta name="apple-mobile-web-app-capable" content="yes" />
+        <meta name="mobile-web-app-capable" content="yes" />
+        <meta name="format-detection" content="telephone=no, address=no, email=no" />
+        <meta name="color-scheme" content="light dark" />
+        <title id="site-title" data-zh={titleZh} data-en={titleEn}>
+            {titleZh}
+        </title>
+        <meta
+            id="site-description"
             name="description"
-            content="TouchAI 是一款桌面效率 Agent，连接文件、上下文、命令和工具，让工作流更顺手。"
+            content={descriptionZh}
+            data-zh={descriptionZh}
+            data-en={descriptionEn}
         />
-        <meta name="keywords" content="TouchAI, 桌面 AI, AI 助手, MCP, BYOK, 效率工具" />
+        <meta name="keywords" content={keywords} />
         <meta name="author" content="TouchAI" />
+        <meta name="theme-color" content="#ffffff" />
         <meta property="og:type" content="website" />
-        <meta property="og:title" content="TouchAI" />
-        <meta property="og:description" content="一触即达的桌面效率Agent" />
-        <meta property="og:url" content="https://touch-ai.org/" />
+        <meta property="og:locale" content="zh_CN" />
+        <meta property="og:locale:alternate" content="en_US" />
+        <meta
+            id="og-title"
+            property="og:title"
+            content={titleZh}
+            data-zh={titleZh}
+            data-en={titleEn}
+        />
+        <meta
+            id="og-description"
+            property="og:description"
+            content={descriptionZh}
+            data-zh={descriptionZh}
+            data-en={descriptionEn}
+        />
+        <meta property="og:url" content={siteUrl} />
         <meta property="og:site_name" content="TouchAI" />
+        <meta property="og:image" content={socialImageUrl} />
+        <meta property="og:image:secure_url" content={socialImageUrl} />
+        <meta property="og:image:type" content="image/png" />
+        <meta property="og:image:width" content="1200" />
+        <meta property="og:image:height" content="630" />
+        <meta property="og:image:alt" content="TouchAI desktop agent preview" />
         <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:title" content="TouchAI" />
-        <meta name="twitter:description" content="一触即达的桌面效率Agent" />
-        <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+        <meta name="twitter:url" content={siteUrl} />
+        <meta
+            id="twitter-title"
+            name="twitter:title"
+            content={titleZh}
+            data-zh={titleZh}
+            data-en={titleEn}
+        />
+        <meta
+            id="twitter-description"
+            name="twitter:description"
+            content={descriptionZh}
+            data-zh={descriptionZh}
+            data-en={descriptionEn}
+        />
+        <meta name="twitter:image" content={socialImageUrl} />
+        <meta name="twitter:image:alt" content="TouchAI desktop agent preview" />
+        <link rel="canonical" href={siteUrl} />
+        <link rel="alternate" hreflang="zh-CN" href={siteUrl} />
+        <link rel="alternate" hreflang="en" href={siteUrl} />
+        <link rel="alternate" hreflang="x-default" href={siteUrl} />
+        <link rel="manifest" href="/site.webmanifest" />
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
         <link rel="shortcut icon" href="/favicon.ico" />
-        <link rel="apple-touch-icon" href="/touchai-wordmark.svg" />
-        <meta name="theme-color" content="#ffffff" />
+        <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+        <link rel="preload" as="image" href="/touch-ai-hero-light.svg?v=3" type="image/svg+xml" />
+        <script
+            is:inline
+            set:html={`(() => {
+                try {
+                    const storedTheme = localStorage.getItem('touchai-theme');
+                    const nextTheme =
+                        storedTheme === 'dark' || storedTheme === 'light'
+                            ? storedTheme
+                            : window.matchMedia('(prefers-color-scheme: dark)').matches
+                              ? 'dark'
+                              : 'light';
+                    document.documentElement.dataset.theme = nextTheme;
+                    document
+                        .querySelector('meta[name="theme-color"]')
+                        ?.setAttribute('content', nextTheme === 'dark' ? '#09090b' : '#ffffff');
+                } catch {}
+            })();`}
+        />
+        <script type="application/ld+json" set:html={structuredData} />
         {
             CLARITY_ID && (
                 <script
@@ -105,6 +272,18 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 display: none !important;
             }
 
+            .sr-only {
+                position: absolute;
+                width: 1px;
+                height: 1px;
+                padding: 0;
+                margin: -1px;
+                overflow: hidden;
+                clip: rect(0, 0, 0, 0);
+                white-space: nowrap;
+                border: 0;
+            }
+
             html {
                 scroll-behavior: auto;
             }
@@ -444,30 +623,35 @@ const docsUrl = 'https://touch-ai.org/getting-started';
             }
 
             .glimm-click-layer {
+                --glimm-bleed: 32px;
                 position: fixed;
-                inset: 0;
+                top: calc(var(--glimm-bleed) * -1);
+                left: calc(var(--glimm-bleed) * -1);
                 z-index: 9999;
-                width: 100vw;
-                height: 100vh;
+                width: calc(100vw + (var(--glimm-bleed) * 2));
+                height: calc(100vh + (var(--glimm-bleed) * 2));
+                height: calc(100dvh + (var(--glimm-bleed) * 2));
                 pointer-events: none;
             }
 
             body.is-glimm-transitioning .interactive-click {
-                pointer-events: none;
+                pointer-events: auto;
             }
 
             .visual-section {
                 width: min(calc(100% - 48px), var(--max));
                 margin: 0 auto;
-                min-height: 100svh;
+                min-height: max(380svh, 3200px);
             }
 
             .visual-shell {
-                position: relative;
-                overflow: visible;
+                position: sticky;
+                top: 0;
+                overflow: hidden;
                 border-radius: 14px;
                 background: var(--bg);
                 box-shadow: none;
+                height: 100svh;
                 min-height: 100svh;
                 display: grid;
                 align-items: center;
@@ -642,19 +826,22 @@ const docsUrl = 'https://touch-ai.org/getting-started';
             }
 
             .feature-component-card {
-                --component-scale: 0.62;
+                --component-scale: 1;
                 --component-shell-height: 657px;
                 --embedded-frame-height: var(--component-shell-height);
-                --page-bg: var(--feature-shell-bg);
-                width: min(100%, calc(760px * var(--component-scale)));
-                height: calc(var(--component-shell-height) * var(--component-scale));
+                --page-bg: transparent;
+                width: min(100%, 472px);
+                max-width: 472px;
+                height: var(--feature-demo-height, 35px);
+                min-height: 35px;
                 padding: 0;
                 border: 0;
                 position: relative;
-                border-radius: 0;
+                border-radius: 18px;
                 background: transparent;
                 box-shadow: none;
                 overflow: visible;
+                isolation: isolate;
                 justify-self: center;
                 align-self: center;
                 cursor: pointer;
@@ -671,28 +858,32 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 background: transparent !important;
                 position: absolute;
                 z-index: 0;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%) scale(var(--component-scale));
-                transform-origin: center center;
-                border-radius: 0;
-                pointer-events: none;
+                top: 0;
+                left: 0;
+                transform: scale(var(--component-scale));
+                transform-origin: top left;
+                border-radius: inherit;
+                pointer-events: auto;
+                will-change: transform;
             }
 
             .feature-work-card {
-                --component-scale: 0.62;
+                --component-scale: 1;
                 --component-shell-height: 657px;
                 --embedded-frame-height: var(--component-shell-height);
-                --page-bg: var(--feature-shell-bg);
-                width: min(100%, calc(760px * var(--component-scale)));
-                height: calc(var(--component-shell-height) * var(--component-scale));
+                --page-bg: transparent;
+                width: min(100%, 472px);
+                max-width: 472px;
+                height: var(--feature-demo-height, 35px);
+                min-height: 35px;
                 padding: 0;
                 border: 0;
                 position: relative;
-                border-radius: 0;
+                border-radius: 18px;
                 background: transparent;
                 box-shadow: none;
                 overflow: visible;
+                isolation: isolate;
                 justify-self: center;
                 align-self: center;
                 cursor: pointer;
@@ -709,28 +900,32 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 background: transparent !important;
                 position: absolute;
                 z-index: 0;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%) scale(var(--component-scale));
-                transform-origin: center center;
-                border-radius: 0;
-                pointer-events: none;
+                top: 0;
+                left: 0;
+                transform: scale(var(--component-scale));
+                transform-origin: top left;
+                border-radius: inherit;
+                pointer-events: auto;
+                will-change: transform;
             }
 
             .feature-reminder-card {
-                --component-scale: 0.62;
+                --component-scale: 1;
                 --component-shell-height: 657px;
                 --embedded-frame-height: var(--component-shell-height);
-                --page-bg: var(--feature-shell-bg);
-                width: min(100%, calc(760px * var(--component-scale)));
-                height: calc(var(--component-shell-height) * var(--component-scale));
+                --page-bg: transparent;
+                width: min(100%, 472px);
+                max-width: 472px;
+                height: var(--feature-demo-height, 35px);
+                min-height: 35px;
                 padding: 0;
                 border: 0;
                 position: relative;
-                border-radius: 0;
+                border-radius: 18px;
                 background: transparent;
                 box-shadow: none;
                 overflow: visible;
+                isolation: isolate;
                 justify-self: center;
                 align-self: center;
                 cursor: pointer;
@@ -747,12 +942,13 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 background: transparent !important;
                 position: absolute;
                 z-index: 0;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%) scale(var(--component-scale));
-                transform-origin: center center;
-                border-radius: 0;
-                pointer-events: none;
+                top: 0;
+                left: 0;
+                transform: scale(var(--component-scale));
+                transform-origin: top left;
+                border-radius: inherit;
+                pointer-events: auto;
+                will-change: transform;
             }
 
             .code-card {
@@ -924,6 +1120,12 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 display: block;
                 font-size: 22px;
                 line-height: 1;
+                font-variant-numeric: tabular-nums;
+                transition: opacity 180ms ease;
+            }
+
+            .github-stat strong[data-loading='true'] {
+                opacity: 0.58;
             }
 
             .github-stat span {
@@ -1127,6 +1329,12 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 text-underline-offset: 4px;
             }
 
+            .footer-note {
+                max-width: 32rem;
+                font-size: 12px;
+                line-height: 1.5;
+            }
+
             @media (max-width: 900px) {
                 .nav {
                     grid-template-columns: auto 1fr;
@@ -1151,8 +1359,12 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 }
 
                 .visual-shell {
+                    position: relative;
+                    top: auto;
+                    height: auto;
                     min-height: auto;
                     display: block;
+                    overflow: visible;
                     padding: 24px 0;
                 }
 
@@ -1249,8 +1461,9 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 .feature-work-card,
                 .feature-reminder-card {
                     width: min(100%, 520px);
-                    height: auto;
-                    aspect-ratio: 760 / 657;
+                    height: var(--feature-demo-height, 35px);
+                    min-height: 35px;
+                    aspect-ratio: auto;
                 }
 
                 .github-feedback-head {
@@ -1269,6 +1482,65 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 }
             }
 
+            @media (min-width: 901px) and (max-height: 780px) {
+                .hero {
+                    min-height: auto;
+                    padding-bottom: 28px;
+                }
+
+                .visual-section {
+                    min-height: max(320svh, 2300px);
+                    padding: 40px 0 56px;
+                }
+
+                .visual-shell {
+                    position: sticky;
+                    top: 0;
+                    height: 100svh;
+                    min-height: max(100svh, 760px);
+                    display: grid;
+                    overflow: hidden;
+                    padding: 20px 0;
+                }
+
+                .visual-stage {
+                    height: auto;
+                    min-height: 640px;
+                    display: grid;
+                    place-items: center;
+                    overflow: visible;
+                }
+
+                .component-frame {
+                    width: min(52vw, 560px, 100%);
+                    height: auto;
+                    aspect-ratio: 760 / 657;
+                    max-height: min(60vh, 520px);
+                    min-height: 0;
+                }
+
+                .feature-block {
+                    min-height: auto;
+                    padding: 0;
+                }
+
+                .feature-block-shell {
+                    position: static;
+                    top: auto;
+                    min-height: 520px;
+                    overflow: hidden;
+                }
+
+                #features {
+                    padding-top: 96px;
+                }
+
+                .section-title {
+                    margin-bottom: 36px;
+                    font-size: clamp(32px, 5vw, 58px);
+                }
+            }
+
             @media (max-width: 560px) {
                 .hero,
                 .visual-section,
@@ -1283,12 +1555,19 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     padding: 0 14px;
                 }
 
+                .hero {
+                    margin: 0 auto;
+                    min-height: auto;
+                    padding: 36px 0 10px;
+                    justify-content: flex-start;
+                }
+
                 .wordmark {
                     width: 118px;
                 }
 
                 .nav-actions {
-                    gap: 10px;
+                    gap: 8px;
                 }
 
                 .nav-icon-link,
@@ -1308,15 +1587,15 @@ const docsUrl = 'https://touch-ai.org/getting-started';
 
                 .hero-subtitle {
                     max-width: 330px;
-                    margin-top: 18px;
-                    font-size: 22px;
-                    line-height: 1.28;
+                    margin-top: 12px;
+                    font-size: 19px;
+                    line-height: 1.3;
                 }
 
                 .hero-actions {
                     width: 100%;
                     gap: 10px;
-                    margin-top: 22px;
+                    margin-top: 16px;
                 }
 
                 .hero-actions .button {
@@ -1325,13 +1604,13 @@ const docsUrl = 'https://touch-ai.org/getting-started';
 
                 .visual-section {
                     min-height: auto;
-                    padding: 36px 0 54px;
+                    padding: 12px 0 40px;
                 }
 
                 .visual-shell {
                     min-height: auto;
                     display: block;
-                    padding: 24px 0;
+                    padding: 18px 0;
                 }
 
                 .visual-stage {
@@ -1346,23 +1625,23 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     width: min(100%, 360px);
                     height: auto;
                     aspect-ratio: 760 / 657;
-                    max-height: min(58vh, 420px);
+                    max-height: min(54vh, 420px);
                     min-height: 0;
                     max-width: 360px;
                 }
 
                 .section {
-                    padding: 62px 0;
+                    padding: 48px 0;
                 }
 
                 .section-title {
-                    margin-bottom: 28px;
-                    font-size: 34px;
-                    line-height: 1.15;
+                    margin-bottom: 22px;
+                    font-size: 30px;
+                    line-height: 1.12;
                 }
 
                 .feature-stack {
-                    gap: 34px;
+                    gap: 22px;
                 }
 
                 .feature-block-shell {
@@ -1372,18 +1651,18 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 }
 
                 .feature-copy {
-                    gap: 16px;
-                    padding: 22px;
+                    gap: 14px;
+                    padding: 18px;
                 }
 
                 .feature-copy h3 {
-                    font-size: 26px;
+                    font-size: 24px;
                     line-height: 1.22;
                 }
 
                 .feature-media {
-                    min-height: 356px;
-                    padding: 18px 0 24px;
+                    min-height: 312px;
+                    padding: 16px 0 22px;
                     overflow: hidden;
                 }
 
@@ -1401,8 +1680,9 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 .feature-work-card,
                 .feature-reminder-card {
                     width: min(100%, 334px);
-                    height: auto;
-                    aspect-ratio: 760 / 657;
+                    height: var(--feature-demo-height, 35px);
+                    min-height: 35px;
+                    aspect-ratio: auto;
                     max-width: 100%;
                 }
 
@@ -1412,17 +1692,17 @@ const docsUrl = 'https://touch-ai.org/getting-started';
 
                 .scenario-card {
                     min-height: auto;
-                    padding: 22px;
+                    padding: 20px;
                     border-radius: 20px;
                 }
 
                 .github-feedback-head {
-                    margin-bottom: 28px;
+                    margin-bottom: 22px;
                 }
 
                 .github-stats {
                     display: grid;
-                    grid-template-columns: repeat(3, minmax(0, 1fr));
+                    grid-template-columns: repeat(2, minmax(0, 1fr));
                     width: 100%;
                     gap: 8px;
                 }
@@ -1436,22 +1716,40 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     font-size: 19px;
                 }
 
+                .github-stat span {
+                    font-size: 12px;
+                }
+
                 .review-card {
                     min-height: auto;
                     border-radius: 16px;
                 }
 
                 .review-card p {
-                    font-size: 16px;
+                    font-size: 15px;
                     line-height: 1.62;
                 }
 
                 .cta {
-                    margin-bottom: 42px;
-                    padding: 32px 20px;
+                    margin-bottom: 30px;
+                    padding: 24px 18px;
                     border-radius: 20px;
                 }
 
+                .cta h2 {
+                    max-width: 240px;
+                    font-size: clamp(30px, 9vw, 42px);
+                    line-height: 1.08;
+                }
+
+                .cta p {
+                    margin-top: 14px;
+                }
+
+                .cta .button {
+                    width: min(100%, 236px);
+                }
+
                 .footer-links {
                     flex-wrap: wrap;
                     gap: 10px 18px;
@@ -1461,15 +1759,64 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 .scenario-card p,
                 .quote p,
                 .cta p {
-                    font-size: 17px;
+                    font-size: 16px;
+                }
+            }
+
+            @media (max-width: 400px) {
+                .hero,
+                .visual-section,
+                .section,
+                .cta,
+                .footer {
+                    width: min(calc(100% - 20px), var(--max));
+                }
+
+                .hero-subtitle {
+                    max-width: 300px;
+                    font-size: 18px;
+                }
+
+                .section-title {
+                    font-size: 28px;
+                }
+
+                .feature-copy h3 {
+                    font-size: 22px;
+                }
+
+                .feature-media {
+                    min-height: 292px;
+                }
+
+                .feature-component-card,
+                .feature-work-card,
+                .feature-reminder-card {
+                    width: min(100%, 308px);
+                }
+
+                .cta {
+                    padding: 22px 16px;
+                }
+
+                .cta h2 {
+                    max-width: 220px;
+                    font-size: clamp(28px, 8.8vw, 38px);
                 }
             }
         </style>
     </head>
-    <body data-waitlist-endpoint={WAITLIST_ENDPOINT}>
+    <body data-analytics-endpoint={ANALYTICS_ENDPOINT}>
         <header class="nav" aria-label="主导航">
             <a class="logo-link" href="#top" aria-label="TouchAI 首页">
-                <img class="wordmark" src="/touchai-wordmark.svg" alt="TouchAI" />
+                <img
+                    class="wordmark"
+                    src="/touchai-wordmark.svg"
+                    alt="TouchAI"
+                    width="421"
+                    height="109"
+                    decoding="async"
+                />
             </a>
             <div class="nav-actions">
                 <a
@@ -1477,6 +1824,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     href={repoUrl}
                     target="_blank"
                     rel="noreferrer"
+                    data-analytics-event="open_repository"
                     aria-label="GitHub"
                     title="GitHub"
                 >
@@ -1560,7 +1908,18 @@ const docsUrl = 'https://touch-ai.org/getting-started';
         <main id="top">
             <section class="hero">
                 <h1>
-                    <img class="hero-wordmark" src="/touch-ai-hero-light.svg?v=3" alt="TouchAI" />
+                    <span class="sr-only" data-i18n="hero.heading">
+                        TouchAI：一触即达的桌面效率 Agent
+                    </span>
+                    <img
+                        class="hero-wordmark"
+                        src="/touch-ai-hero-light.svg?v=3"
+                        alt="TouchAI"
+                        width="291"
+                        height="87"
+                        decoding="async"
+                        fetchpriority="high"
+                    />
                 </h1>
                 <p class="hero-subtitle" data-i18n="hero.subtitle">一触即达的桌面效率 Agent</p>
                 <div class="hero-actions">
@@ -1569,13 +1928,11 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         href={releasesUrl}
                         target="_blank"
                         rel="noreferrer"
+                        data-analytics-event="download_release"
                         data-i18n="hero.download"
                     >
                         下载 TouchAI
                     </a>
-                    <a class="button secondary" href={docsUrl} data-i18n="hero.docs" hidden>
-                        使用文档
-                    </a>
                 </div>
             </section>
 
@@ -1629,7 +1986,8 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                             <div class="feature-copy">
                                 <h3 data-i18n="features.two.title">整理你的复杂工作</h3>
                                 <p data-i18n="features.two.copy">
-                                    随时把你混乱的任务丢给TouchAI，让他帮你整理归档，专注更有价值的创造
+                                    随时把你混乱的任务丢给
+                                    TouchAI，让他帮你整理归档，专注更有价值的创造
                                 </p>
                             </div>
                         </div>
@@ -1663,7 +2021,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     <article class="scenario-card">
                         <h3 data-i18n="workflow.one.title">支持BYOK</h3>
                         <p data-i18n="workflow.one.copy">
-                            无厂商锁定，接入你自己的模型，用任意模型驱动TouchAI。
+                            无厂商锁定，接入你自己的模型，用任意模型驱动 TouchAI。
                         </p>
                     </article>
                     <article class="scenario-card">
@@ -1675,7 +2033,8 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     <article class="scenario-card">
                         <h3 data-i18n="workflow.three.title">桌面操控与执行</h3>
                         <p data-i18n="workflow.three.copy">
-                            直接操控电脑、打开应用、查询信息、整理文件并执行桌面动作，让AI帮你操作。
+                            直接操控电脑、打开应用、查询信息、整理文件并执行桌面动作，让 AI
+                            帮你操作。
                         </p>
                     </article>
                 </div>
@@ -1684,19 +2043,23 @@ const docsUrl = 'https://touch-ai.org/getting-started';
             <section class="section" id="teams">
                 <div class="github-feedback-head">
                     <h2 class="section-title" data-i18n="teams.title">用户反馈</h2>
-                    <div class="github-stats" aria-label="GitHub project stats">
+                    <div
+                        class="github-stats"
+                        aria-label="GitHub project stats"
+                        aria-live="polite"
+                        data-repo-path={repoPath}
+                        data-repo-api-url={repoApiUrl}
+                        data-initial-stars={initialRepoStats.stars}
+                        data-initial-forks={initialRepoStats.forks}
+                    >
                         <div class="github-stat">
-                            <strong data-github-stat="stars" aria-live="polite">23</strong>
+                            <strong data-github-stat="stars" data-loading="true">--</strong>
                             <span data-i18n="teams.stats.stars">Stars</span>
                         </div>
                         <div class="github-stat">
-                            <strong data-github-stat="forks" aria-live="polite">22</strong>
+                            <strong data-github-stat="forks" data-loading="true">--</strong>
                             <span data-i18n="teams.stats.forks">Forks</span>
                         </div>
-                        <div class="github-stat">
-                            <strong data-github-stat="issues" aria-live="polite">82</strong>
-                            <span data-i18n="teams.stats.issues">Open issues</span>
-                        </div>
                     </div>
                 </div>
                 <div class="quote-row review-grid">
@@ -1714,7 +2077,10 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                         class="review-avatar"
                                         src="/review-avatars/sakukae.png"
                                         alt=""
+                                        width="120"
+                                        height="120"
                                         loading="lazy"
+                                        decoding="async"
                                     />
                                 </a>
                                 <div class="review-title-block">
@@ -1760,7 +2126,10 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                         class="review-avatar"
                                         src="/review-avatars/arcj137442.png"
                                         alt=""
+                                        width="120"
+                                        height="120"
                                         loading="lazy"
+                                        decoding="async"
                                     />
                                 </a>
                                 <div class="review-title-block">
@@ -1805,7 +2174,10 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                         class="review-avatar"
                                         src="/review-avatars/theeverests.png"
                                         alt=""
+                                        width="120"
+                                        height="120"
                                         loading="lazy"
+                                        decoding="async"
                                     />
                                 </a>
                                 <div class="review-title-block">
@@ -1848,7 +2220,10 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                         class="review-avatar"
                                         src="/review-avatars/anonymous.png"
                                         alt=""
+                                        width="120"
+                                        height="120"
                                         loading="lazy"
+                                        decoding="async"
                                     />
                                 </span>
                                 <div class="review-title-block">
@@ -1861,7 +2236,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                             </div>
                             <div class="review-divider" aria-hidden="true"></div>
                             <p data-i18n="teams.review.delta">
-                                “之前用过好多 agent
+                                “之前用过好多 Agent
                                 工具，其中很大的问题就是要自己培养，太费精力，到头来成了一个玩具。但是用过这款下来，真的能解决我的需求。”
                             </p>
                         </div>
@@ -1877,6 +2252,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     href={releasesUrl}
                     target="_blank"
                     rel="noreferrer"
+                    data-analytics-event="download_release"
                     data-i18n="cta.download"
                 >
                     下载 TouchAI
@@ -1890,23 +2266,23 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     href="https://touch-ai.org/"
                     target="_blank"
                     rel="noreferrer"
+                    data-analytics-event="open_official_site"
                     data-i18n="footer.official"
                 >
                     官网
                 </a>
-                <a href={repoUrl} target="_blank" rel="noreferrer">GitHub</a>
-                <a href={docsUrl} target="_blank" rel="noreferrer" data-i18n="footer.docs" hidden>
-                    文档
-                </a>
                 <a
-                    href="https://github.com/TouchAI-org/TouchAI/issues"
+                    href={repoUrl}
                     target="_blank"
                     rel="noreferrer"
-                    data-i18n="footer.contact"
+                    data-analytics-event="open_repository"
                 >
-                    联系我们
+                    GitHub
                 </a>
             </div>
+            <div class="footer-note" data-i18n="footer.analytics">
+                We use basic analytics and Clarity.
+            </div>
             <div data-i18n="footer.copyright">© 2026 TouchAI. GPL-3.0-or-later.</div>
         </footer>
 
@@ -1922,6 +2298,12 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     stage: 'started',
                 };
                 let touchaiDemoRuntime = null;
+                const getMessagePayload = (event) =>
+                    event && typeof event.data === 'object' && event.data ? event.data : {};
+                const getMessageType = (event) => {
+                    const message = getMessagePayload(event);
+                    return typeof message.type === 'string' ? message.type : '';
+                };
                 const sendToDemo = (target, data) =>
                     touchaiDemoRuntime?.send(target, data) ?? false;
 
@@ -1953,41 +2335,36 @@ const docsUrl = 'https://touch-ai.org/getting-started';
 
                 const translations = {
                     zh: {
+                        'hero.heading': 'TouchAI：一触即达的桌面效率 Agent',
                         'nav.features': '功能',
                         'nav.workflow': '场景',
                         'nav.teams': '评价',
                         'nav.download': '下载',
                         'hero.subtitle': '一触即达的桌面效率 Agent',
                         'hero.download': '下载 TouchAI',
-                        'hero.docs': '使用文档',
                         'features.title': '自然融入你的工作流',
                         'features.one.title': '把题目交给桌面 AI',
                         'features.one.copy':
                             '截图、公式和上下文可以一起进入对话。TouchAI 会理解题面，逐步展开推导，并把关键结论整理成可继续使用的答案。',
                         'features.two.title': '整理你的复杂工作',
                         'features.two.copy':
-                            '随时把你混乱的任务丢给TouchAI，让他帮你整理归档，专注更有价值的创造',
+                            '随时把你混乱的任务丢给 TouchAI，让他帮你整理归档，专注更有价值的创造',
                         'features.three.title': '让世界近在咫尺',
                         'features.three.copy':
                             '随时呼起，一句自然语言，迅速调用外部工具，无负担无打扰',
                         'workflow.title': '丰富的功能特性',
                         'workflow.one.title': '支持BYOK',
                         'workflow.one.copy':
-                            '无厂商锁定，接入你自己的模型，用任意模型驱动TouchAI。',
+                            '无厂商锁定，接入你自己的模型，用任意模型驱动 TouchAI。',
                         'workflow.two.title': '桌面上下文理解',
                         'workflow.two.copy':
                             '围绕当前窗口、剪贴板、文件理解你的桌面上下文，让连续任务自然接上下一步。',
                         'workflow.three.title': '桌面操控与执行',
                         'workflow.three.copy':
-                            '直接操控电脑、打开应用、查询信息、整理文件并执行桌面动作，让AI帮你操作。',
+                            '直接操控电脑、打开应用、查询信息、整理文件并执行桌面动作，让 AI 帮你操作。',
                         'teams.title': '用户反馈',
                         'teams.stats.stars': 'Stars',
                         'teams.stats.forks': 'Forks',
-                        'teams.stats.issues': 'Open issues',
-                        'teams.one.quote':
-                            '开发者正在 GitHub Issues 里围绕桌面唤起、模型接入和自动化工作流提交反馈，项目保持持续迭代。',
-                        'teams.one.label': 'Issues 反馈',
-                        'teams.one.link': '查看 Issues',
                         'teams.two.quote':
                             'TouchAI 采用 GPL-3.0 开源协议，当前以 TypeScript 为主要语言，欢迎围绕桌面 Agent 体验提交改进建议。',
                         'teams.two.label': '开源协作',
@@ -2003,23 +2380,23 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         'teams.review.gamma':
                             '“在解答疑难题目时，调用 TouchAI 进行智能解析；其不仅在分析答案的同时，能够绘制多种图形辅助理解，从而使抽象概念得以直观呈现，实现学习支持的高效可及与即时响应。”',
                         'teams.review.delta':
-                            '“之前用过好多 agent 工具，其中很大的问题就是要自己培养，太费精力，到头来成了一个玩具。但是用过这款下来，真的能解决我的需求。”',
+                            '“之前用过好多 Agent 工具，其中很大的问题就是要自己培养，太费精力，到头来成了一个玩具。但是用过这款下来，真的能解决我的需求。”',
                         'cta.title': '开始使用 TouchAI',
-                        'cta.copy': '体验近在咫尺的AI陪伴',
+                        'cta.copy': '体验近在咫尺的 AI 陪伴',
                         'cta.download': '下载 TouchAI',
                         'footer.official': '官网',
-                        'footer.docs': '文档',
-                        'footer.contact': '联系我们',
+                        'footer.analytics':
+                            '本站使用基础统计与 Microsoft Clarity，用于了解站点使用情况并优化体验。',
                         'footer.copyright': '© 2026 TouchAI. GPL-3.0-or-later.',
                     },
                     en: {
+                        'hero.heading': 'TouchAI: A Desktop Efficiency Agent at Your Fingertips',
                         'nav.features': 'Features',
                         'nav.workflow': 'Use cases',
                         'nav.teams': 'Stories',
                         'nav.download': 'Download',
                         'hero.subtitle': 'A desktop productivity agent, one touch away',
                         'hero.download': 'Download TouchAI',
-                        'hero.docs': 'Docs',
                         'features.title': 'Naturally fits into your workflow',
                         'features.one.title': 'Hand the problem to desktop AI.',
                         'features.one.copy':
@@ -2043,11 +2420,6 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         'teams.title': 'User feedback',
                         'teams.stats.stars': 'Stars',
                         'teams.stats.forks': 'Forks',
-                        'teams.stats.issues': 'Open issues',
-                        'teams.one.quote':
-                            'Developers are using GitHub Issues to discuss desktop summon, model access, and automation workflows while the project keeps moving.',
-                        'teams.one.label': 'Issue feedback',
-                        'teams.one.link': 'View Issues',
                         'teams.two.quote':
                             'TouchAI is GPL-3.0 licensed and primarily written in TypeScript. Suggestions around the desktop Agent experience are welcome.',
                         'teams.two.label': 'Open-source work',
@@ -2068,33 +2440,150 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         'cta.copy': 'Experience AI companionship within reach.',
                         'cta.download': 'Download TouchAI',
                         'footer.official': 'Official site',
-                        'footer.docs': 'Docs',
-                        'footer.contact': 'Contact us',
+                        'footer.analytics':
+                            'We use basic analytics and Microsoft Clarity to understand site usage and improve the experience.',
                         'footer.copyright': '© 2026 TouchAI. GPL-3.0-or-later.',
                     },
                 };
 
                 const featureProgressByFrame = new WeakMap();
-                function syncFeatureDemoProgress(frame, progress) {
+                const lastDispatchedDemoProgress = new WeakMap();
+                const pendingDemoProgress = new WeakMap();
+                const demoProgressFrameHandles = new WeakMap();
+                const resetDemoProgressDedupe = (frame) => {
+                    if (!frame) return;
+                    lastDispatchedDemoProgress.delete(frame);
+                };
+                const snapDemoProgress = (value) => {
+                    const numericValue = Number(value);
+                    const clampedValue = Number.isFinite(numericValue)
+                        ? Math.min(1, Math.max(0, numericValue))
+                        : 0;
+
+                    if (clampedValue <= 0) return 0;
+                    if (clampedValue >= 1) return 1;
+
+                    return Math.round(clampedValue * 240) / 240;
+                };
+                const cancelQueuedDemoProgress = (frame) => {
+                    if (!frame) return;
+                    const frameHandle = demoProgressFrameHandles.get(frame);
+                    if (frameHandle) {
+                        cancelAnimationFrame(frameHandle);
+                        demoProgressFrameHandles.delete(frame);
+                    }
+                    pendingDemoProgress.delete(frame);
+                    resetDemoProgressDedupe(frame);
+                };
+                const queueDemoProgress = (frame, type, progress, force = false) => {
                     if (!frame) return;
-                    featureProgressByFrame.set(frame, progress);
-                    sendToDemo(frame, {
-                        type: 'touchai-set-scroll-progress',
-                        progress,
+
+                    const snappedProgress = snapDemoProgress(progress);
+                    const lastProgress = lastDispatchedDemoProgress.get(frame);
+                    if (!force && lastProgress === snappedProgress) return;
+
+                    pendingDemoProgress.set(frame, {
+                        type,
+                        progress: snappedProgress,
+                        force,
                     });
+
+                    if (demoProgressFrameHandles.has(frame)) return;
+
+                    const frameHandle = requestAnimationFrame(() => {
+                        demoProgressFrameHandles.delete(frame);
+                        const nextProgress = pendingDemoProgress.get(frame);
+                        if (!nextProgress) return;
+
+                        pendingDemoProgress.delete(frame);
+                        const dispatchedProgress = lastDispatchedDemoProgress.get(frame);
+                        if (!nextProgress.force && dispatchedProgress === nextProgress.progress) {
+                            return;
+                        }
+
+                        lastDispatchedDemoProgress.set(frame, nextProgress.progress);
+                        sendToDemo(frame, {
+                            type: nextProgress.type,
+                            progress: nextProgress.progress,
+                        });
+                    });
+
+                    demoProgressFrameHandles.set(frame, frameHandle);
+                };
+                const queueDemoScrollIdle = (frame) => {
+                    if (!frame) return;
+                    requestAnimationFrame(() => {
+                        resetDemoProgressDedupe(frame);
+                        sendToDemo(frame, { type: 'touchai-clear-scroll-driven' });
+                    });
+                };
+                function syncFeatureDemoProgress(frame, progress, force = false) {
+                    if (!frame) return;
+                    const mappedProgress = Math.min(1, Math.max(0, Number(progress) || 0));
+                    const snappedProgress = snapDemoProgress(mappedProgress);
+                    featureProgressByFrame.set(frame, snappedProgress);
+                    queueDemoProgress(frame, 'touchai-set-scroll-progress', snappedProgress, force);
                 }
 
                 function restoreFeatureDemoProgress(frame) {
                     if (!frame) return;
                     const progress = featureProgressByFrame.get(frame) ?? 0;
-                    syncFeatureDemoProgress(frame, progress);
-                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress), 120);
-                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress), 360);
+                    syncFeatureDemoProgress(frame, progress, true);
+                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress, true), 120);
+                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress, true), 360);
                 }
 
                 const setLanguage = (language) => {
                     const lang = language === 'en' ? 'en' : 'zh';
                     document.documentElement.lang = lang === 'en' ? 'en' : 'zh-CN';
+                    const localizedLabels = {
+                        navAria: lang === 'en' ? 'Primary navigation' : '主导航',
+                        homeAria: lang === 'en' ? 'TouchAI home' : 'TouchAI 首页',
+                        themeToggle:
+                            lang === 'en'
+                                ? {
+                                      light: 'Switch to dark mode',
+                                      dark: 'Switch to light mode',
+                                  }
+                                : {
+                                      light: '切换黑夜模式',
+                                      dark: '切换白天模式',
+                                  },
+                        replaySuffix:
+                            lang === 'en'
+                                ? 'click to replay current scroll progress'
+                                : '点击刷新当前滚动进度',
+                        replayLabels:
+                            lang === 'en'
+                                ? {
+                                      solver: 'Math solver conversation',
+                                      work: 'Work organizer conversation',
+                                      reminder: 'Reminder conversation',
+                                  }
+                                : {
+                                      solver: '解题对话框',
+                                      work: '工作整理对话框',
+                                      reminder: '提醒对话框',
+                                  },
+                    };
+                    const localizedHeadNodes = document.querySelectorAll(
+                        '#site-title, #site-description, #og-title, #og-description, #twitter-title, #twitter-description'
+                    );
+                    localizedHeadNodes.forEach((node) => {
+                        const value = node.getAttribute(`data-${lang}`);
+                        if (!value) return;
+                        if (node.tagName === 'TITLE') {
+                            node.textContent = value;
+                            return;
+                        }
+                        node.setAttribute('content', value);
+                    });
+                    document
+                        .querySelector('meta[property="og:locale"]')
+                        ?.setAttribute('content', lang === 'en' ? 'en_US' : 'zh_CN');
+                    document
+                        .querySelector('meta[property="og:locale:alternate"]')
+                        ?.setAttribute('content', lang === 'en' ? 'zh_CN' : 'en_US');
                     document.querySelectorAll('[data-i18n]').forEach((node) => {
                         const key = node.dataset.i18n;
                         if (key && translations[lang][key]) {
@@ -2114,6 +2603,39 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         );
                         toggle.querySelector('span').textContent = lang === 'en' ? 'EN' : '中';
                     }
+                    document
+                        .querySelector('.nav')
+                        ?.setAttribute('aria-label', localizedLabels.navAria);
+                    document
+                        .querySelector('.logo-link')
+                        ?.setAttribute('aria-label', localizedLabels.homeAria);
+                    const themeToggle = document.querySelector('.theme-toggle');
+                    if (themeToggle) {
+                        const nextTheme =
+                            document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
+                        const nextLabel = localizedLabels.themeToggle[nextTheme];
+                        themeToggle.setAttribute('aria-label', nextLabel);
+                        themeToggle.setAttribute('title', nextLabel);
+                    }
+                    const replayCardLabels = [
+                        ['.feature-component-card', localizedLabels.replayLabels.solver],
+                        ['.feature-work-card', localizedLabels.replayLabels.work],
+                        ['.feature-reminder-card', localizedLabels.replayLabels.reminder],
+                    ];
+                    replayCardLabels.forEach(([selector, label]) => {
+                        const card = document.querySelector(selector);
+                        if (!card) return;
+                        card.setAttribute(
+                            'aria-label',
+                            `${label}，${localizedLabels.replaySuffix}`.replace('，，', '，')
+                        );
+                        if (lang === 'en') {
+                            card.setAttribute(
+                                'aria-label',
+                                `${label}, ${localizedLabels.replaySuffix}`
+                            );
+                        }
+                    });
                     const introDemo = document.querySelector('.component-frame');
                     if (introDemo) {
                         const nextSrc =
@@ -2121,6 +2643,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                 ? '/touchai-intro-en/touchai-components.html?v=1'
                                 : '/touchai-intro/touchai-components.html?v=8';
                         if (introDemo.dataset.src !== nextSrc) {
+                            resetDemoProgressDedupe(introDemo);
                             introDemo.dataset.src = nextSrc;
                             introDemo.dataset.title =
                                 lang === 'en'
@@ -2138,6 +2661,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                 ? '/feature-solver-en/touchai-components.html?v=1'
                                 : '/feature-solver/touchai-components.html?v=17';
                         if (solverDemo.dataset.src !== nextSolverSrc) {
+                            resetDemoProgressDedupe(solverDemo);
                             solverDemo.dataset.src = nextSolverSrc;
                             solverDemo.dataset.title =
                                 lang === 'en'
@@ -2156,6 +2680,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                 ? '/feature-work-organizer-en/touchai-components.html?v=1'
                                 : '/feature-work-organizer/touchai-components.html?v=13';
                         if (workDemo.dataset.src !== nextWorkSrc) {
+                            resetDemoProgressDedupe(workDemo);
                             workDemo.dataset.src = nextWorkSrc;
                             workDemo.dataset.title =
                                 lang === 'en'
@@ -2174,6 +2699,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                 ? '/feature-reminder-en/touchai-components.html?v=1'
                                 : '/feature-reminder/touchai-components.html?v=5';
                         if (reminderDemo.dataset.src !== nextReminderSrc) {
+                            resetDemoProgressDedupe(reminderDemo);
                             reminderDemo.dataset.src = nextReminderSrc;
                             reminderDemo.dataset.title =
                                 lang === 'en'
@@ -2192,24 +2718,117 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 const savedLanguage = localStorage.getItem('touchai-language');
                 setLanguage(savedLanguage === 'en' ? 'en' : 'zh');
 
+                const analyticsEndpoint = (() => {
+                    const raw = document.body.dataset.analyticsEndpoint?.trim();
+                    if (!raw) return '';
+                    try {
+                        const url = new URL(raw);
+                        return /^https?:$/.test(url.protocol) ? url.href : '';
+                    } catch {
+                        return '';
+                    }
+                })();
+                let hasTrackedPageView = false;
+                const sendAnalytics = (type, detail = {}) => {
+                    if (!analyticsEndpoint) return;
+                    const payload = JSON.stringify({
+                        type,
+                        href: window.location.href,
+                        path: window.location.pathname,
+                        title: document.title,
+                        lang: document.documentElement.lang,
+                        referrer: document.referrer || '',
+                        viewport: `${window.innerWidth}x${window.innerHeight}`,
+                        ts: new Date().toISOString(),
+                        ...detail,
+                    });
+
+                    try {
+                        if (navigator.sendBeacon) {
+                            const sent = navigator.sendBeacon(
+                                analyticsEndpoint,
+                                new Blob([payload], { type: 'application/json' })
+                            );
+                            if (sent) return;
+                        }
+                    } catch (_error) {
+                        // Fall through to fetch.
+                    }
+
+                    fetch(analyticsEndpoint, {
+                        method: 'POST',
+                        headers: { 'content-type': 'application/json' },
+                        body: payload,
+                        keepalive: true,
+                    }).catch(() => {});
+                };
+                const trackPageView = () => {
+                    if (hasTrackedPageView) return;
+                    hasTrackedPageView = true;
+                    sendAnalytics('pageview');
+                };
+
+                if (document.readyState === 'complete') {
+                    queueMicrotask(trackPageView);
+                } else {
+                    window.addEventListener('load', trackPageView, { once: true });
+                }
+
+                document.querySelectorAll('[data-analytics-event]').forEach((node) => {
+                    node.addEventListener('click', () => {
+                        sendAnalytics(node.dataset.analyticsEvent, {
+                            label:
+                                node.getAttribute('aria-label') || node.textContent?.trim() || '',
+                        });
+                    });
+                });
+
                 const componentBackgroundFrames = () =>
                     document.querySelectorAll('touchai-component-demo');
 
+                const featureDemoPairs = () => [
+                    ['.feature-component-card', '.feature-component-frame'],
+                    ['.feature-work-card', '.feature-work-frame'],
+                    ['.feature-reminder-card', '.feature-reminder-frame'],
+                ];
+                const featureCardHeightObservers = new WeakMap();
+
+                const syncFeatureCardHeight = (card, frame, scale) => {
+                    if (!card || !frame) return;
+                    const panel = frame.querySelector('.chat-panel');
+                    const panelHeight = panel?.offsetHeight || 56;
+                    card.style.setProperty(
+                        '--feature-demo-height',
+                        `${Math.max(35, panelHeight * scale)}px`
+                    );
+                };
+
+                const observeFeatureCardHeight = (card, frame) => {
+                    if (!card || !frame || !window.ResizeObserver) return;
+                    const panel = frame.querySelector('.chat-panel');
+                    if (!panel) return;
+
+                    const currentObserver = featureCardHeightObservers.get(frame);
+                    if (currentObserver?.panel === panel) return;
+                    currentObserver?.observer.disconnect();
+
+                    const observer = new ResizeObserver(() => syncFeatureFrameSizing());
+                    observer.observe(panel);
+                    featureCardHeightObservers.set(frame, { panel, observer });
+                };
+
                 const syncFeatureFrameSizing = () => {
-                    [
-                        ['.feature-component-card', '.feature-component-frame'],
-                        ['.feature-work-card', '.feature-work-frame'],
-                        ['.feature-reminder-card', '.feature-reminder-frame'],
-                    ].forEach(([cardSelector, frameSelector]) => {
+                    featureDemoPairs().forEach(([cardSelector, frameSelector]) => {
                         const card = document.querySelector(cardSelector);
                         const frame = document.querySelector(frameSelector);
                         if (!frame) return;
 
+                        let scale = 1;
                         if (card) {
                             const width = card.getBoundingClientRect().width || 0;
                             if (width > 0) {
-                                card.style.height = `${Math.round((width * 657) / 760)}px`;
-                                card.style.setProperty('--component-scale', String(width / 760));
+                                scale = width / 760;
+                                card.style.setProperty('--component-scale', String(scale));
                             }
                         }
 
@@ -2217,6 +2836,8 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         frame.style.minHeight = '657px';
                         frame.style.maxHeight = '657px';
                         frame.style.background = 'transparent';
+                        observeFeatureCardHeight(card, frame);
+                        syncFeatureCardHeight(card, frame, scale);
                     });
                 };
 
@@ -2225,9 +2846,6 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         const componentStageBg = getComputedStyle(document.documentElement)
                             .getPropertyValue('--component-stage-bg')
                             .trim();
-                        const featureShellBg = getComputedStyle(document.documentElement)
-                            .getPropertyValue('--feature-shell-bg')
-                            .trim();
                         componentBackgroundFrames().forEach((frame) => {
                             const isSolverFrame =
                                 frame.classList.contains('feature-component-frame');
@@ -2239,12 +2857,10 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                             const nextBg = isIntroFrame
                                 ? 'transparent'
                                 : isFeatureFrame
-                                  ? featureShellBg
+                                  ? 'transparent'
                                   : componentStageBg;
                             frame.style.setProperty('--page-bg', nextBg);
-                            if (!isSolverFrame) {
-                                frame.style.background = nextBg;
-                            }
+                            frame.style.background = 'transparent';
                             sendToDemo(frame, { type: 'touchai-page-bg', background: nextBg });
                         });
                         syncFeatureFrameSizing();
@@ -2253,79 +2869,185 @@ const docsUrl = 'https://touch-ai.org/getting-started';
 
                 const setTheme = (theme) => {
                     const nextTheme = theme === 'dark' ? 'dark' : 'light';
+                    const lang = document.documentElement.lang === 'en' ? 'en' : 'zh';
                     document.documentElement.dataset.theme = nextTheme;
                     document
                         .querySelector('meta[name="theme-color"]')
                         ?.setAttribute('content', nextTheme === 'dark' ? '#101014' : '#ffffff');
                     const themeToggle = document.querySelector('.theme-toggle');
                     if (themeToggle) {
+                        const nextLabel =
+                            lang === 'en'
+                                ? nextTheme === 'dark'
+                                    ? 'Switch to light mode'
+                                    : 'Switch to dark mode'
+                                : nextTheme === 'dark'
+                                  ? '切换白天模式'
+                                  : '切换黑夜模式';
                         themeToggle.setAttribute('aria-pressed', String(nextTheme === 'dark'));
-                        themeToggle.setAttribute(
-                            'aria-label',
-                            nextTheme === 'dark' ? '切换白天模式' : '切换黑夜模式'
-                        );
-                        themeToggle.setAttribute(
-                            'title',
-                            nextTheme === 'dark' ? '切换白天模式' : '切换黑夜模式'
-                        );
+                        themeToggle.setAttribute('aria-label', nextLabel);
+                        themeToggle.setAttribute('title', nextLabel);
                     }
                     localStorage.setItem('touchai-theme', nextTheme);
                     syncComponentBackground();
                 };
 
+                const githubStatsGroup = document.querySelector('.github-stats');
+                const REPO_STATS_SOURCE =
+                    githubStatsGroup?.dataset.repoPath || 'TouchAI-org/TouchAI';
+                const REPO_STATS_API_URL =
+                    githubStatsGroup?.dataset.repoApiUrl ||
+                    `https://api.github.com/repos/${REPO_STATS_SOURCE}`;
+                const REPO_STATS_STORAGE_KEY = `touchai-github-stats:${REPO_STATS_SOURCE}`;
+                const REPO_STATS_REFRESH_INTERVAL = 5 * 60 * 1000;
+                const REPO_STATS_REFOCUS_INTERVAL = 90 * 1000;
+                const REPO_STATS_REQUEST_GAP = 20 * 1000;
                 const repoStats = {
-                    stars: 23,
-                    forks: 22,
-                    issues: 82,
+                    stars: 0,
+                    forks: 0,
+                    updatedAt: 0,
                 };
                 const statNodes = {
                     stars: document.querySelector('[data-github-stat="stars"]'),
                     forks: document.querySelector('[data-github-stat="forks"]'),
-                    issues: document.querySelector('[data-github-stat="issues"]'),
                 };
-                const formatStat = (value) => {
+                const statFormatter = new Intl.NumberFormat('en-US');
+                const normalizeStat = (value) => {
                     const num = Number(value);
-                    return Number.isFinite(num) ? new Intl.NumberFormat('en-US').format(num) : null;
+                    return Number.isFinite(num) && num >= 0 ? Math.round(num) : null;
+                };
+                const formatStat = (value) => {
+                    const num = normalizeStat(value);
+                    return num == null ? '--' : statFormatter.format(num);
                 };
-                const renderRepoStats = (nextStats) => {
-                    if (statNodes.stars && nextStats.stars != null)
-                        statNodes.stars.textContent = String(nextStats.stars);
-                    if (statNodes.forks && nextStats.forks != null)
-                        statNodes.forks.textContent = String(nextStats.forks);
-                    if (statNodes.issues && nextStats.issues != null)
-                        statNodes.issues.textContent = String(nextStats.issues);
+                const readInitialRepoStats = () => ({
+                    stars: normalizeStat(githubStatsGroup?.dataset.initialStars),
+                    forks: normalizeStat(githubStatsGroup?.dataset.initialForks),
+                    updatedAt: 0,
+                });
+                const setRepoStatsLoading = (loading) => {
+                    Object.values(statNodes).forEach((node) => {
+                        if (!node) return;
+                        node.dataset.loading = loading ? 'true' : 'false';
+                    });
+                    if (githubStatsGroup) {
+                        githubStatsGroup.setAttribute('aria-busy', loading ? 'true' : 'false');
+                    }
                 };
-                const refreshRepoStats = async () => {
+                const renderRepoStats = (nextStats, { loading = false } = {}) => {
+                    if (statNodes.stars) statNodes.stars.textContent = formatStat(nextStats.stars);
+                    if (statNodes.forks) statNodes.forks.textContent = formatStat(nextStats.forks);
+                    setRepoStatsLoading(loading);
+                };
+                const loadStoredRepoStats = () => {
                     try {
-                        const response = await fetch(
-                            `https://api.github.com/repos/TouchAI-org/TouchAI?ts=${Date.now()}`,
-                            {
-                                cache: 'no-store',
-                                headers: {
-                                    Accept: 'application/vnd.github+json',
-                                },
-                            }
-                        );
-                        if (!response.ok) return;
-                        const data = await response.json();
+                        const raw = localStorage.getItem(REPO_STATS_STORAGE_KEY);
+                        if (!raw) return null;
+                        const parsed = JSON.parse(raw);
                         const nextStats = {
-                            stars: formatStat(data.stargazers_count),
-                            forks: formatStat(data.forks_count),
-                            issues: formatStat(data.open_issues_count),
+                            stars: normalizeStat(parsed?.stars),
+                            forks: normalizeStat(parsed?.forks),
+                            updatedAt: Number(parsed?.updatedAt) || 0,
                         };
-                        Object.assign(repoStats, nextStats);
-                        renderRepoStats(repoStats);
+                        const hasValidStats = ['stars', 'forks'].every(
+                            (key) => nextStats[key] != null
+                        );
+                        return hasValidStats ? nextStats : null;
                     } catch (error) {
-                        renderRepoStats(repoStats);
+                        return null;
+                    }
+                };
+                const persistRepoStats = (nextStats) => {
+                    try {
+                        localStorage.setItem(
+                            REPO_STATS_STORAGE_KEY,
+                            JSON.stringify({
+                                stars: normalizeStat(nextStats.stars),
+                                forks: normalizeStat(nextStats.forks),
+                                updatedAt: Number(nextStats.updatedAt) || Date.now(),
+                            })
+                        );
+                    } catch (error) {}
+                };
+                const shouldRefreshRepoStats = (minAge = 0) =>
+                    Date.now() - repoStats.updatedAt >= minAge;
+                const withCacheBuster = (url) =>
+                    `${url}${url.includes('?') ? '&' : '?'}ts=${Date.now()}`;
+                const fetchRepoOverview = async () => {
+                    const headers = {
+                        Accept: 'application/vnd.github+json',
+                        'X-GitHub-Api-Version': '2022-11-28',
+                    };
+                    const repoResponse = await fetch(withCacheBuster(REPO_STATS_API_URL), {
+                        cache: 'no-store',
+                        headers,
+                    });
+                    if (!repoResponse.ok) {
+                        throw new Error('repo stats request failed');
                     }
+                    const repoData = await repoResponse.json();
+                    return {
+                        stars: normalizeStat(repoData.stargazers_count),
+                        forks: normalizeStat(repoData.forks_count),
+                    };
+                };
+                let repoStatsRequest = null;
+                let lastRepoStatsRequestAt = 0;
+                const refreshRepoStats = async ({ force = false } = {}) => {
+                    const now = Date.now();
+                    if (repoStatsRequest) return repoStatsRequest;
+                    if (!force && now - lastRepoStatsRequestAt < REPO_STATS_REQUEST_GAP)
+                        return null;
+                    if (!force && document.hidden && repoStats.updatedAt > 0) return null;
+
+                    lastRepoStatsRequestAt = now;
+                    renderRepoStats(repoStats, { loading: true });
+
+                    repoStatsRequest = fetchRepoOverview()
+                        .then((nextStats) => {
+                            const mergedStats = { ...repoStats, ...nextStats };
+                            const hasValidStats = ['stars', 'forks'].every(
+                                (key) => normalizeStat(mergedStats[key]) != null
+                            );
+                            if (!hasValidStats) return;
+                            Object.assign(repoStats, mergedStats, {
+                                updatedAt: Date.now(),
+                            });
+                            persistRepoStats(repoStats);
+                        })
+                        .catch(() => {})
+                        .finally(() => {
+                            repoStatsRequest = null;
+                            renderRepoStats(repoStats);
+                        });
+
+                    return repoStatsRequest;
                 };
 
                 const savedTheme = localStorage.getItem('touchai-theme');
                 const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
                 setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));
+                Object.assign(repoStats, readInitialRepoStats());
+                const storedRepoStats = loadStoredRepoStats();
+                if (storedRepoStats) Object.assign(repoStats, storedRepoStats);
                 renderRepoStats(repoStats);
-                refreshRepoStats();
-                window.setInterval(refreshRepoStats, 10 * 60 * 1000);
+                refreshRepoStats({ force: true });
+                window.setInterval(() => {
+                    refreshRepoStats();
+                }, REPO_STATS_REFRESH_INTERVAL);
+                document.addEventListener('visibilitychange', () => {
+                    if (!document.hidden && shouldRefreshRepoStats(REPO_STATS_REFOCUS_INTERVAL)) {
+                        refreshRepoStats({ force: true });
+                    }
+                });
+                window.addEventListener('focus', () => {
+                    if (shouldRefreshRepoStats(REPO_STATS_REFOCUS_INTERVAL)) {
+                        refreshRepoStats({ force: true });
+                    }
+                });
+                window.addEventListener('online', () => {
+                    refreshRepoStats({ force: true });
+                });
 
                 componentBackgroundFrames().forEach((frame) => {
                     frame.addEventListener('load', syncComponentBackground);
@@ -2459,18 +3181,20 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 const solverFrame = document.querySelector('.feature-component-frame');
                 const solverCard = document.querySelector('.feature-component-card');
                 if (solverFrame) {
-                    syncFeatureDemoProgress(solverFrame, 0);
+                    syncFeatureDemoProgress(solverFrame, 0, true);
                     solverFrame.addEventListener('load', () => {
                         syncFeatureDemoProgress(
                             solverFrame,
-                            featureProgressByFrame.get(solverFrame) ?? 0
+                            featureProgressByFrame.get(solverFrame) ?? 0,
+                            true
                         );
                     });
                     window.addEventListener('message', (event) => {
-                        if (event.data?.type === 'touchai-solver-ready') {
+                        if (getMessageType(event) === 'touchai-solver-ready') {
                             syncFeatureDemoProgress(
                                 solverFrame,
-                                featureProgressByFrame.get(solverFrame) ?? 0
+                                featureProgressByFrame.get(solverFrame) ?? 0,
+                                true
                             );
                         }
                     });
@@ -2479,18 +3203,20 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 const workOrganizerFrame = document.querySelector('.feature-work-frame');
                 const workOrganizerCard = document.querySelector('.feature-work-card');
                 if (workOrganizerFrame) {
-                    syncFeatureDemoProgress(workOrganizerFrame, 0);
+                    syncFeatureDemoProgress(workOrganizerFrame, 0, true);
                     workOrganizerFrame.addEventListener('load', () => {
                         syncFeatureDemoProgress(
                             workOrganizerFrame,
-                            featureProgressByFrame.get(workOrganizerFrame) ?? 0
+                            featureProgressByFrame.get(workOrganizerFrame) ?? 0,
+                            true
                         );
                     });
                     window.addEventListener('message', (event) => {
-                        if (event.data?.type === 'touchai-work-organizer-ready') {
+                        if (getMessageType(event) === 'touchai-work-organizer-ready') {
                             syncFeatureDemoProgress(
                                 workOrganizerFrame,
-                                featureProgressByFrame.get(workOrganizerFrame) ?? 0
+                                featureProgressByFrame.get(workOrganizerFrame) ?? 0,
+                                true
                             );
                         }
                     });
@@ -2499,18 +3225,20 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                 const reminderFrame = document.querySelector('.feature-reminder-frame');
                 const reminderCard = document.querySelector('.feature-reminder-card');
                 if (reminderFrame) {
-                    syncFeatureDemoProgress(reminderFrame, 0);
+                    syncFeatureDemoProgress(reminderFrame, 0, true);
                     reminderFrame.addEventListener('load', () => {
                         syncFeatureDemoProgress(
                             reminderFrame,
-                            featureProgressByFrame.get(reminderFrame) ?? 0
+                            featureProgressByFrame.get(reminderFrame) ?? 0,
+                            true
                         );
                     });
                     window.addEventListener('message', (event) => {
-                        if (event.data?.type === 'touchai-reminder-ready') {
+                        if (getMessageType(event) === 'touchai-reminder-ready') {
                             syncFeatureDemoProgress(
                                 reminderFrame,
-                                featureProgressByFrame.get(reminderFrame) ?? 0
+                                featureProgressByFrame.get(reminderFrame) ?? 0,
+                                true
                             );
                         }
                     });
@@ -2518,10 +3246,11 @@ const docsUrl = 'https://touch-ai.org/getting-started';
 
                 const replayEmbeddedComponent = async (frame) => {
                     const progress = featureProgressByFrame.get(frame) ?? 0;
+                    resetDemoProgressDedupe(frame);
                     await Promise.resolve(frame.reload?.());
-                    syncFeatureDemoProgress(frame, progress);
-                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress), 120);
-                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress), 360);
+                    syncFeatureDemoProgress(frame, progress, true);
+                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress, true), 120);
+                    window.setTimeout(() => syncFeatureDemoProgress(frame, progress, true), 360);
                 };
 
                 const bindReplayCard = (card, frame, label) => {
@@ -2543,7 +3272,8 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         }
                     };
 
-                    card.addEventListener('click', () => {
+                    card.addEventListener('click', (event) => {
+                        if (event.target?.closest?.('button, a, input, textarea, select')) return;
                         replay();
                     });
                     card.addEventListener('keydown', (event) => {
@@ -2589,6 +3319,34 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     const visualSection = document.querySelector('.visual-section');
                     const visualShell = document.querySelector('.visual-shell');
                     const introDemo = document.querySelector('.component-frame');
+                    const compactFeatureViewportQuery = '(max-width: 900px)';
+                    const shortDesktopViewportQuery = '(min-width: 901px) and (max-height: 780px)';
+                    const fullViewportQuery = '(min-width: 901px) and (min-height: 781px)';
+                    const isShortDesktopViewport = () =>
+                        window.innerWidth > 900 && window.innerHeight <= 780;
+                    const getCompactStickyTop = () =>
+                        window.innerWidth <= 560
+                            ? 72
+                            : Math.round(Math.min(Math.max(window.innerHeight * 0.1, 78), 112));
+                    const getCompactIntroDistance = () =>
+                        (() => {
+                            const introHeight = introDemo?.getBoundingClientRect().height || 0;
+                            if (isShortDesktopViewport()) {
+                                return Math.round(
+                                    Math.max(window.innerHeight * 2.8, introHeight * 4.2, 1580)
+                                );
+                            }
+
+                            return Math.round(
+                                Math.max(
+                                    window.innerHeight * (window.innerWidth <= 560 ? 0.82 : 1.02),
+                                    introHeight * (window.innerWidth <= 560 ? 2.05 : 2.75),
+                                    window.innerWidth <= 560 ? 620 : 960
+                                )
+                            );
+                        })();
+                    const getCompactFeatureEnd = () =>
+                        window.innerWidth <= 560 ? 'bottom 22%' : 'bottom 28%';
 
                     const setupWorkflowPointerEffects = () => {
                         if (!workflowSection || !scenarioCards.length) return () => {};
@@ -2682,7 +3440,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                         let isActive = true;
                         let componentTrigger;
                         const syncComponent = (progress) => {
-                            sendToDemo(introDemo, { type: 'touchai-set-progress', progress });
+                            queueDemoProgress(introDemo, 'touchai-set-progress', progress);
                         };
                         const refreshPinnedIntro = () => {
                             ScrollTrigger.refresh();
@@ -2696,14 +3454,15 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                             });
                         };
                         const handleReadyMessage = (event) => {
-                            if (!isActive || event.data?.type !== 'touchai-component-ready') return;
+                            if (!isActive || getMessageType(event) !== 'touchai-component-ready')
+                                return;
                             requestAnimationFrame(() => {
                                 if (isActive) refreshPinnedIntro();
                             });
                         };
 
                         gsap.set(visualShell, {
-                            scale: compact ? 1 : 0.985,
+                            scale: 1,
                             transformOrigin: 'center center',
                         });
 
@@ -2711,19 +3470,22 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                             .timeline({
                                 scrollTrigger: {
                                     trigger: visualSection,
-                                    start: compact ? 'top 82%' : 'top top',
-                                    end: compact
-                                        ? 'bottom 18%'
-                                        : () => `+=${Math.max(window.innerHeight * 3.45, 2800)}`,
-                                    pin: !compact,
-                                    pinSpacing: true,
-                                    anticipatePin: 1,
-                                    scrub: compact ? true : 0.55,
+                                    start: () =>
+                                        window.innerWidth > 900
+                                            ? 'top top'
+                                            : `top ${getCompactStickyTop()}px`,
+                                    end: () =>
+                                        window.innerWidth > 900
+                                            ? 'bottom bottom'
+                                            : `+=${getCompactIntroDistance()}`,
+                                    pin: false,
+                                    pinSpacing: false,
+                                    scrub: compact ? 0.18 : 0.55,
                                     invalidateOnRefresh: true,
                                     onRefresh: (self) => {
                                         componentTrigger = self;
                                         gsap.set(visualShell, {
-                                            scale: compact ? 1 : 0.985,
+                                            scale: 1,
                                         });
                                         syncComponent(self.progress);
                                     },
@@ -2734,14 +3496,20 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                         componentTrigger = self;
                                         syncComponent(self.progress);
                                     },
-                                    onLeave: () => syncComponent(1),
-                                    onLeaveBack: () => syncComponent(0),
+                                    onLeave: () => {
+                                        syncComponent(1);
+                                        queueDemoScrollIdle(introDemo);
+                                    },
+                                    onLeaveBack: () => {
+                                        syncComponent(0);
+                                        queueDemoScrollIdle(introDemo);
+                                    },
                                 },
                             })
                             .fromTo(
                                 visualShell,
-                                { scale: 0.965, y: 0, opacity: 0.65 },
-                                { scale: 1, y: 0, opacity: 1, duration: 0.35, ease: 'power2.out' }
+                                { y: 0, opacity: 0.65 },
+                                { y: 0, opacity: 1, duration: 0.35, ease: 'power2.out' }
                             )
                             .to(introDemo, { opacity: 1, duration: 0.2, ease: 'none' }, 0);
 
@@ -2757,6 +3525,8 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                 handleIntroReady
                             );
                             window.removeEventListener('message', handleReadyMessage);
+                            cancelQueuedDemoProgress(introDemo);
+                            sendToDemo(introDemo, { type: 'touchai-clear-scroll-driven' });
                             timeline.scrollTrigger?.kill();
                             timeline.kill();
                         };
@@ -2768,27 +3538,37 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                             const featureShell =
                                 frame.closest('.feature-block-shell') || featureBlock;
                             let featureTrigger;
+                            const getFeatureStickyTop = () => {
+                                const shellHeight =
+                                    featureShell.getBoundingClientRect().height || 560;
+                                return Math.max(
+                                    24,
+                                    Math.round((window.innerHeight - shellHeight) / 2)
+                                );
+                            };
                             const syncCurrentFeatureProgress = () => {
                                 syncFeatureDemoProgress(frame, featureTrigger?.progress ?? 0);
                             };
 
                             featureTrigger = ScrollTrigger.create({
                                 trigger: featureBlock,
-                                start: compact
-                                    ? 'top 82%'
-                                    : () => {
-                                          const shellHeight =
-                                              featureShell.getBoundingClientRect().height || 560;
-                                          return `top ${Math.max(0, Math.round((window.innerHeight - shellHeight) / 2))}px`;
-                                      },
+                                start: () => `top ${getFeatureStickyTop()}px`,
                                 end: compact
-                                    ? 'bottom 18%'
+                                    ? getCompactFeatureEnd
                                     : () => {
+                                          const blockHeight =
+                                              featureBlock.getBoundingClientRect().height || 1500;
                                           const shellHeight =
                                               featureShell.getBoundingClientRect().height || 560;
-                                          return `bottom ${Math.max(0, Math.round((window.innerHeight + shellHeight) / 2))}px`;
+                                          return `+=${Math.max(
+                                              window.innerHeight * 1.35,
+                                              blockHeight + shellHeight * 0.45
+                                          )}`;
                                       },
-                                scrub: true,
+                                pin: false,
+                                pinSpacing: false,
+                                anticipatePin: 0,
+                                scrub: compact ? 0.16 : true,
                                 invalidateOnRefresh: true,
                                 onRefresh: syncCurrentFeatureProgress,
                                 onEnter: syncCurrentFeatureProgress,
@@ -2796,15 +3576,26 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                                 onUpdate: (self) => {
                                     syncFeatureDemoProgress(frame, self.progress);
                                 },
-                                onLeave: () => syncFeatureDemoProgress(frame, 1),
-                                onLeaveBack: () => syncFeatureDemoProgress(frame, 0),
+                                onLeave: () => {
+                                    syncFeatureDemoProgress(frame, 1);
+                                    queueDemoScrollIdle(frame);
+                                },
+                                onLeaveBack: () => {
+                                    syncFeatureDemoProgress(frame, 0);
+                                    queueDemoScrollIdle(frame);
+                                },
                             });
 
                             return featureTrigger;
                         });
 
                         return () => {
-                            triggers.forEach((trigger) => trigger.kill());
+                            triggers.forEach((trigger, index) => {
+                                trigger.kill();
+                                const frame = featureFrames[index];
+                                cancelQueuedDemoProgress(frame);
+                                sendToDemo(frame, { type: 'touchai-clear-scroll-driven' });
+                            });
                         };
                     };
 
@@ -2817,7 +3608,7 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                     };
 
                     const scrollMatchMedia = gsap.matchMedia();
-                    scrollMatchMedia.add('(max-width: 900px)', () => {
+                    scrollMatchMedia.add(compactFeatureViewportQuery, () => {
                         const cleanupIntro = setupIntroScrollTrigger(true);
                         const cleanupFeatures = setupFeatureScrollTriggers(true);
                         refreshScrollLayout();
@@ -2827,7 +3618,19 @@ const docsUrl = 'https://touch-ai.org/getting-started';
                             cleanupFeatures();
                         };
                     });
-                    scrollMatchMedia.add('(min-width: 901px)', () => {
+                    scrollMatchMedia.add(shortDesktopViewportQuery, () => {
+                        const cleanupWorkflow = setupWorkflowPointerEffects();
+                        const cleanupIntro = setupIntroScrollTrigger(true);
+                        const cleanupFeatures = setupFeatureScrollTriggers(false);
+                        refreshScrollLayout();
+
+                        return () => {
+                            cleanupWorkflow();
+                            cleanupIntro();
+                            cleanupFeatures();
+                        };
+                    });
+                    scrollMatchMedia.add(fullViewportQuery, () => {
                         const cleanupWorkflow = setupWorkflowPointerEffects();
                         const cleanupIntro = setupIntroScrollTrigger(false);
                         const cleanupFeatures = setupFeatureScrollTriggers(false);
diff --git a/apps/site/src/scripts/component-demo-runtime.ts b/apps/site/src/scripts/component-demo-runtime.ts
index e5b26c0f..3522fa58 100644
--- a/apps/site/src/scripts/component-demo-runtime.ts
+++ b/apps/site/src/scripts/component-demo-runtime.ts
@@ -8,7 +8,8 @@ type TouchAiHost = HTMLElement & {
         EventListenerOrEventListenerObject,
         EventListenerOrEventListenerObject
     >;
-    __touchaiPendingMessage?: unknown;
+    __touchaiPendingMessages?: unknown[];
+    __touchaiResizeObservers?: ResizeObserver[];
     postMessage?: (data: unknown) => void;
     reload?: () => Promise<void>;
 };
@@ -77,7 +78,7 @@ touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .stage {
     min-height: 100% !important;
     height: 100% !important;
     padding: 0 !important;
-    justify-content: center !important;
+    justify-content: flex-start !important;
     align-items: center !important;
 }
 
@@ -86,15 +87,16 @@ touchai-component-demo[data-demo-id="${id}"].feature-component-frame .chat-panel
 touchai-component-demo[data-demo-id="${id}"].feature-work-frame .chat-panel,
 touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .chat-panel {
     margin: 0 auto !important;
-    display: flex !important;
-    flex-direction: column !important;
-    overflow: hidden !important;
     box-shadow:
         0 34px 90px rgba(107, 114, 128, 0.22),
         0 12px 34px rgba(107, 114, 128, 0.12),
         0 0 48px rgba(107, 114, 128, 0.14) !important;
 }
 
+touchai-component-demo[data-demo-id="${id}"].is-scroll-driven .chat-panel {
+    will-change: auto !important;
+}
+
 touchai-component-demo[data-demo-id="${id}"].component-frame .chat-panel {
     width: 100% !important;
     max-width: 100% !important;
@@ -106,58 +108,91 @@ touchai-component-demo[data-demo-id="${id}"].component-frame.is-idle .chat-panel
     background: var(--panel, #fff) !important;
 }
 
-touchai-component-demo[data-demo-id="${id}"].feature-component-frame .conversation-content,
-touchai-component-demo[data-demo-id="${id}"].feature-work-frame .conversation-content,
-touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .conversation-content {
+touchai-component-demo[data-demo-id="${id}"].component-frame .conversation-content {
     flex: 1 1 auto !important;
     min-height: 0 !important;
-    overflow-y: hidden !important;
+    overflow-y: auto !important;
     padding-bottom: 18px !important;
+    overscroll-behavior: contain !important;
+    scrollbar-width: none !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
-touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-scrolling .conversation-content,
-touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-scrolling .conversation-content,
-touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-scrolling .conversation-content {
+touchai-component-demo[data-demo-id="${id}"].component-frame .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .conversation-content {
+    min-height: 0 !important;
     overflow-y: auto !important;
+    overscroll-behavior: contain !important;
+    scrollbar-width: none !important;
+    -webkit-overflow-scrolling: touch !important;
 }
 
-touchai-component-demo[data-demo-id="${id}"].feature-component-frame .composer,
-touchai-component-demo[data-demo-id="${id}"].feature-work-frame .composer,
-touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .composer {
-    height: 56px !important;
-    min-height: 56px !important;
-    max-height: 56px !important;
-    flex: 0 0 56px !important;
-    margin-top: 0 !important;
-}
-
-touchai-component-demo[data-demo-id="${id}"].feature-component-frame .composer-form,
-touchai-component-demo[data-demo-id="${id}"].feature-work-frame .composer-form,
-touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .composer-form {
-    height: 56px !important;
-    min-height: 56px !important;
-    max-height: 56px !important;
-    align-items: center !important;
-}
-
-touchai-component-demo[data-demo-id="${id}"].feature-component-frame .prompt-input,
-touchai-component-demo[data-demo-id="${id}"].feature-work-frame .prompt-input,
-touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .prompt-input {
-    height: 32px !important;
-    min-height: 32px !important;
-    max-height: 32px !important;
-    line-height: 32px !important;
+touchai-component-demo[data-demo-id="${id}"].component-frame .conversation-content::-webkit-scrollbar,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame .conversation-content::-webkit-scrollbar,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame .conversation-content::-webkit-scrollbar,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame .conversation-content::-webkit-scrollbar {
+    display: none;
 }
 
+touchai-component-demo[data-demo-id="${id}"].component-frame.is-answering .chat-panel,
+touchai-component-demo[data-demo-id="${id}"].component-frame.is-complete .chat-panel,
 touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-answering .chat-panel,
 touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-complete .chat-panel,
 touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-answering .chat-panel,
 touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-complete .chat-panel,
 touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-answering .chat-panel,
 touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-complete .chat-panel {
-    min-height: 100% !important;
-    max-height: 100% !important;
-    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    max-width: 100% !important;
+}
+
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-answering .stage,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-complete .stage,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-answering .stage,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-complete .stage,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-answering .stage,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-complete .stage {
+    justify-content: flex-start !important;
+}
+
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-complete .chat-panel,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-complete .chat-panel,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-complete .chat-panel,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-scroll-driven.is-complete .chat-panel,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-scroll-driven.is-complete .chat-panel,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-scroll-driven.is-complete .chat-panel {
+    min-height: 0 !important;
+    height: auto !important;
+}
+
+touchai-component-demo[data-demo-id="${id}"].component-frame.is-answering .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].component-frame.is-complete .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-answering .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-complete .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-answering .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-complete .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-answering .conversation-content,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-complete .conversation-content {
+    flex: 1 1 auto !important;
+    min-height: 0 !important;
+    overflow-y: auto !important;
+    padding-bottom: 20px !important;
+    overscroll-behavior: contain !important;
+    -webkit-overflow-scrolling: touch !important;
+}
+
+touchai-component-demo[data-demo-id="${id}"].component-frame.is-answering .composer,
+touchai-component-demo[data-demo-id="${id}"].component-frame.is-complete .composer,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-answering .composer,
+touchai-component-demo[data-demo-id="${id}"].feature-component-frame.is-complete .composer,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-answering .composer,
+touchai-component-demo[data-demo-id="${id}"].feature-work-frame.is-complete .composer,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-answering .composer,
+touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-complete .composer {
+    margin-top: auto !important;
 }
 
 @media (max-width: 900px) {
@@ -175,6 +210,35 @@ touchai-component-demo[data-demo-id="${id}"].feature-reminder-frame.is-complete
     }
 }
 
+@media (max-height: 780px) {
+    touchai-component-demo[data-demo-id="${id}"].component-frame {
+        width: min(52vw, 560px, 100%) !important;
+        max-width: min(560px, 100%) !important;
+        height: auto !important;
+        min-height: 0 !important;
+        aspect-ratio: 760 / 657 !important;
+        max-height: min(60vh, 520px) !important;
+        overflow: hidden !important;
+    }
+
+    touchai-component-demo[data-demo-id="${id}"].component-frame .stage {
+        min-height: 0 !important;
+        height: 100% !important;
+        padding: 0 !important;
+        align-items: center !important;
+        justify-content: center !important;
+    }
+
+    touchai-component-demo[data-demo-id="${id}"].component-frame.is-answering .chat-panel,
+    touchai-component-demo[data-demo-id="${id}"].component-frame.is-complete .chat-panel,
+    touchai-component-demo[data-demo-id="${id}"].component-frame.is-scroll-driven.is-answering .chat-panel,
+    touchai-component-demo[data-demo-id="${id}"].component-frame.is-scroll-driven.is-complete .chat-panel {
+        display: flex !important;
+        flex-direction: column !important;
+        max-width: 100% !important;
+    }
+}
+
 @media (max-width: 560px) {
     touchai-component-demo[data-demo-id="${id}"].component-frame {
         width: min(calc(100vw - 56px), 360px, 100%) !important;
@@ -396,25 +460,90 @@ const loadExternalScript = (src: string) => {
     return promise;
 };
 
+const getMessageType = (data: unknown) =>
+    typeof data === 'object' && data && 'type' in (data as Record<string, unknown>)
+        ? String((data as Record<string, unknown>).type)
+        : '';
+
+const getMessageProgress = (data: unknown) =>
+    typeof data === 'object' && data && 'progress' in (data as Record<string, unknown>)
+        ? Number((data as Record<string, unknown>).progress)
+        : NaN;
+
+const isScrollDrivenProgressType = (messageType: string) =>
+    messageType === 'touchai-set-progress' || messageType === 'touchai-set-scroll-progress';
+
+const isScrollDrivenResetType = (messageType: string) =>
+    messageType.endsWith('-start') || messageType === 'touchai-reset-demo';
+
+const clearScrollDrivenState = (host: TouchAiHost) => {
+    host.classList.remove('is-scroll-driven');
+    delete host.dataset.touchaiScrollDriven;
+};
+
+const queuePendingMessage = (host: TouchAiHost, data: unknown, messageType: string) => {
+    const pendingMessages = host.__touchaiPendingMessages ?? [];
+
+    if (messageType) {
+        const existingIndex = pendingMessages.findIndex(
+            (pendingMessage) => getMessageType(pendingMessage) === messageType
+        );
+        if (existingIndex >= 0) {
+            pendingMessages[existingIndex] = data;
+        } else {
+            pendingMessages.push(data);
+        }
+    } else {
+        pendingMessages.push(data);
+    }
+
+    if (pendingMessages.length > 12) {
+        pendingMessages.splice(0, pendingMessages.length - 12);
+    }
+
+    host.__touchaiPendingMessages = pendingMessages;
+};
+
+const flushPendingMessages = (host: TouchAiHost) => {
+    const pendingMessages = host.__touchaiPendingMessages;
+    if (!host.__touchaiMessageHandlers?.size || !pendingMessages?.length) return;
+
+    host.__touchaiPendingMessages = [];
+    pendingMessages.forEach((message) => {
+        dispatchMessage(host, message);
+    });
+    delete host.__touchaiPendingMessages;
+};
+
 const dispatchMessage = (host: TouchAiHost | null | undefined, data: unknown) => {
     if (!host) return false;
 
     const event = { data };
     const handlers = host.__touchaiMessageHandlers;
+    const messageType = getMessageType(data);
+
+    if (isScrollDrivenProgressType(messageType)) {
+        const progress = getMessageProgress(data);
+        if (Number.isFinite(progress) && (progress <= 0.0005 || progress >= 0.9995)) {
+            clearScrollDrivenState(host);
+        } else {
+            host.classList.add('is-scroll-driven');
+            host.dataset.touchaiScrollDriven = 'true';
+        }
+    } else if (isScrollDrivenResetType(messageType)) {
+        clearScrollDrivenState(host);
+    }
+
     host.dataset.touchaiMessageHandlerCount = String(handlers?.size ?? 0);
     host.dataset.touchaiMessageDispatchCount = String(
         (Number(host.dataset.touchaiMessageDispatchCount || '0') || 0) + 1
     );
     if (!handlers?.size) {
-        host.__touchaiPendingMessage = data;
+        queuePendingMessage(host, data, messageType);
     } else {
         handlers.forEach((handler) => handler(event));
-        delete host.__touchaiPendingMessage;
     }
-    host.dataset.touchaiLastMessage =
-        typeof data === 'object' && data && 'type' in (data as Record<string, unknown>)
-            ? String((data as Record<string, unknown>).type)
-            : 'unknown';
+    host.dataset.touchaiLastMessage = messageType || 'unknown';
 
     return true;
 };
@@ -484,11 +613,7 @@ const runInlineScript = (host: TouchAiHost, code: string) => {
                     if (type === 'message') {
                         const wrappedMessageHandler: TouchAiMessageHandler = (event) => {
                             host.dataset.touchaiLastReceivedMessage =
-                                typeof event?.data === 'object' &&
-                                event.data &&
-                                'type' in (event.data as Record<string, unknown>)
-                                    ? String((event.data as Record<string, unknown>).type)
-                                    : 'unknown';
+                                getMessageType(event?.data) || 'unknown';
                             host.dataset.touchaiMessageReceiveCount = String(
                                 (Number(host.dataset.touchaiMessageReceiveCount || '0') || 0) + 1
                             );
@@ -558,6 +683,14 @@ const runInlineScript = (host: TouchAiHost, code: string) => {
         },
     });
 
+    const ScopedResizeObserver = function (callback: ResizeObserverCallback) {
+        const observer = new ResizeObserver(callback);
+        host.__touchaiResizeObservers?.push(observer);
+        return observer;
+    } as unknown as typeof ResizeObserver;
+
+    ScopedResizeObserver.prototype = ResizeObserver.prototype;
+
     const runner = new Function(
         'document',
         'window',
@@ -576,7 +709,7 @@ const runInlineScript = (host: TouchAiHost, code: string) => {
         localWindow,
         NodeFilter,
         Element,
-        ResizeObserver,
+        ScopedResizeObserver,
         navigator,
         MutationObserver,
         window.requestAnimationFrame.bind(window),
@@ -595,6 +728,11 @@ const applyDocument = async (
     host.dataset.touchaiStatus = 'applying';
     host.dataset.touchaiLoadVersion = String(loadVersion);
 
+    host.__touchaiResizeObservers?.forEach((observer) => {
+        observer.disconnect();
+    });
+    host.__touchaiResizeObservers = [];
+
     host.__touchaiWindowHandlers?.forEach((wrapped) => {
         window.removeEventListener('resize', wrapped);
     });
@@ -603,6 +741,7 @@ const applyDocument = async (
 
     const bodyClassName = doc.body.className || '';
     host.className = host.dataset.baseClass || '';
+    clearScrollDrivenState(host);
     if (bodyClassName) {
         host.classList.add(...bodyClassName.split(/\s+/).filter(Boolean));
     }
@@ -655,12 +794,7 @@ const applyDocument = async (
     if (loadVersion !== host.__touchaiLoadVersion) return;
 
     host.dataset.touchaiStatus = 'loaded';
-    if (
-        Object.prototype.hasOwnProperty.call(host, '__touchaiPendingMessage') &&
-        host.__touchaiMessageHandlers?.size
-    ) {
-        dispatchMessage(host, host.__touchaiPendingMessage);
-    }
+    flushPendingMessages(host);
     host.dispatchEvent(new Event('load'));
     host.dispatchEvent(new CustomEvent('touchai-component-loaded'));
 };
@@ -680,7 +814,9 @@ const mount = (id: string): TouchAiHost | null => {
     host.__touchaiController = null;
     host.__touchaiMessageHandlers = new Set();
     host.__touchaiWindowHandlers = new Map();
+    host.__touchaiPendingMessages = [];
     host.dataset.touchaiMessageHandlerCount = '0';
+    host.__touchaiResizeObservers = [];
     host.dataset.touchaiMessageDispatchCount = '0';
     host.dataset.touchaiMessageReceiveCount = '0';
     host.dataset.demoId = id;