diff --git a/frontend/app/app/doc/page.tsx b/frontend/app/app/doc/page.tsx
new file mode 100644
index 0000000..a31af16
--- /dev/null
+++ b/frontend/app/app/doc/page.tsx
@@ -0,0 +1,654 @@
+"use client";
+
+import {
+	ArrowRight,
+	Check,
+	CheckCircle2,
+	CircleDashed,
+	FolderTree,
+	Network,
+	Route,
+	Sparkles,
+	X,
+} from "lucide-react";
+import { useMemo, useState } from "react";
+
+type RoleId = "user" | "builder" | "admin";
+type ProductId = "chatgpt" | "cursor" | "claude" | "zk";
+type MemoryId = "chatgpt" | "letta" | "mem0" | "rag" | "ours";
+type SkillPartId = "skillmd" | "knowledge" | "scripts" | "examples" | "readme" | "update";
+
+const roles: Record<
+	RoleId,
+	{
+		name: string;
+		title: string;
+		question: string;
+		answer: string;
+		workflow: string[];
+		proof: string[];
+	}
+> = {
+	user: {
+		name: "普通使用者",
+		title: "我想让它替我完成一段工作",
+		question: "我为什么不用 ChatGPT 网页版问一问？",
+		answer:
+			"因为这里不是只回答一句话，而是把输入、计划、人工 review、脚本执行、文件产物和后续导出放进同一个任务空间。",
+		workflow: ["选择 Skill", "描述目标", "review 计划", "等待执行", "拿 output 文件"],
+		proof: ["会话文件面板", "右侧活动链路", "output/ 产物", "飞书在线文档转换"],
+	},
+	builder: {
+		name: "Skill 作者",
+		title: "我想把自己的经验变成团队能力",
+		question: "为什么不是每个人自己写脚本、自己维护 prompt？",
+		answer:
+			"Skill 把流程、知识、脚本、样例和维护说明放到一个目录。别人不用理解你的全部细节，也能在 Web 上调用这份能力。",
+		workflow: ["建 skill 目录", "写 SKILL.md", "沉淀 knowledge", "放 scripts", "提交 Git", "页面更新 Skill"],
+		proof: ["skills/product-data", "skills/online-mining-v2", "skills/label-master", "Skill 更新按钮"],
+	},
+	admin: {
+		name: "平台维护者",
+		title: "我想让多人稳定使用，而不是每个人本地各跑各的",
+		question: "为什么不用 Claude Code 本地跑？",
+		answer:
+			"Claude Code 很适合个人本地工程闭环；这里补的是团队 Web 入口、多用户会话、账号记忆、管理后台、共享 Skill 和统一部署。",
+		workflow: ["管理用户", "看会话与用量", "处理记忆队列", "更新服务", "维护公共 Skill"],
+		proof: ["/admin", "memory.db", "systemd 服务", "dev / online 环境", "会话隔离"],
+	},
+};
+
+const products: Record<
+	ProductId,
+	{
+		name: string;
+		position: string;
+		bestFor: string;
+		limits: string;
+		tech: string[];
+	}
+> = {
+	chatgpt: {
+		name: "ChatGPT 网页版",
+		position: "最好的通用对话入口",
+		bestFor: "问答、写作、临时分析、个人信息辅助。",
+		limits: "不天然绑定团队数据源、产物目录、Skill 更新和多用户运维。",
+		tech: ["Saved Memory", "Reference Chat History", "Files", "Connectors"],
+	},
+	cursor: {
+		name: "Cursor",
+		position: "IDE 内的代码协作体验",
+		bestFor: "围绕代码仓库改文件、补全、解释、局部重构。",
+		limits: "偏个人 IDE 场景，业务流程共享、产物管理和多人 Web 入口不是核心。",
+		tech: ["Codebase Index", "Composer", "IDE Context", "Rules"],
+	},
+	claude: {
+		name: "Claude Code",
+		position: "本地工程 Agent 的强基准",
+		bestFor: "读代码、改文件、跑测试、长任务、多工具工程闭环。",
+		limits: "团队业务能力共建、账号级 Skill 记忆、Web 管理和数据开发产物链需要另搭平台。",
+		tech: ["Agent Loop", "Tools", "Skills", "MCP", "Terminal Workspace"],
+	},
+	zk: {
+		name: "ZK Data Agent",
+		position: "团队业务流程 Agent 工作台",
+		bestFor: "把数据开发、标签判断、线上挖掘、格式导出沉淀成共享 Skill。",
+		limits: "不追求替代所有 IDE/终端 Agent，优先服务团队业务流程沉淀。",
+		tech: ["Skill Registry", "Review Gate", "Session Workspace", "Skill Memory", "Admin"],
+	},
+};
+
+const comparisonRows = [
+	{ label: "Web 多用户入口", chatgpt: "partial", cursor: "no", claude: "no", zk: "yes" },
+	{ label: "团队共享 Skill", chatgpt: "partial", cursor: "partial", claude: "partial", zk: "yes" },
+	{ label: "业务数据源接入", chatgpt: "partial", cursor: "no", claude: "partial", zk: "yes" },
+	{ label: "会话产物管理", chatgpt: "partial", cursor: "no", claude: "partial", zk: "yes" },
+	{ label: "人类 Review Gate", chatgpt: "partial", cursor: "partial", claude: "partial", zk: "yes" },
+	{ label: "Skill 级记忆", chatgpt: "no", cursor: "no", claude: "partial", zk: "yes" },
+	{ label: "管理后台/用量/队列", chatgpt: "no", cursor: "no", claude: "no", zk: "yes" },
+	{ label: "数据开发链路沉淀", chatgpt: "partial", cursor: "no", claude: "partial", zk: "yes" },
+] as const;
+
+const objectives = [
+	{
+		goal: "先回答为什么用我们",
+		frontend: "用产品对比矩阵 + 选中产品详情，明确展示我们补的是团队流程平台能力。",
+		message: "不是模型比 Claude Code 强，而是把 Web 多用户、共享 Skill、产物管理、记忆和管理后台补齐。",
+	},
+	{
+		goal: "让不同同事知道怎么融入工作",
+		frontend: "用角色切换：普通使用者、Skill 作者、平台维护者分别看到自己的路径。",
+		message: "看完不是只知道概念，而是知道自己明天怎么开始用。",
+	},
+	{
+		goal: "证明不是闭门造车",
+		frontend: "用记忆方案谱系，把 ChatGPT、Letta、Mem0、RAG 和我们的取舍放在同一屏。",
+		message: "我们参考了主流方案，但按团队 Skill 场景做了轻量可控实现。",
+	},
+	{
+		goal: "解释 Skill 为什么能沉淀能力",
+		frontend: "用可点击文件树解剖 SKILL.md、knowledge、scripts、examples、README 和更新机制。",
+		message: "Skill 不是 prompt，而是可维护、可安装、可更新的能力包。",
+	},
+	{
+		goal: "让技术同事能追代码",
+		frontend: "每条链路都给出代码路径、落盘位置和真实运行节点。",
+		message: "页面不是海报，是技术讲解和后续维护入口。",
+	},
+];
+
+const memoryPatterns: Record<
+	MemoryId,
+	{
+		name: string;
+		source: string;
+		borrowed: string;
+		notEnough: string;
+		ourChoice: string;
+		docs: string;
+		href: string;
+	}
+> = {
+	chatgpt: {
+		name: "ChatGPT Saved Memory / Reference Chat History",
+		source: "OpenAI 的记忆分成显式 Saved Memories 和从历史中提炼的 Reference Chat History。",
+		borrowed: "借鉴：用户可管理、可删除、可开关；显式记忆和历史参考分层。",
+		notEnough: "不足：它面向通用个性化，不知道某个团队 Skill 的操作经验应该只在该 Skill 生效。",
+		ourChoice: "我们的取舍：用户记忆全局注入，Skill 使用记忆只在启用对应 Skill 时注入。",
+		docs: "OpenAI Memory FAQ",
+		href: "https://help.openai.com/en/articles/8590148-memory-faq",
+	},
+	letta: {
+		name: "Letta / MemGPT Core + Archival Memory",
+		source: "Letta 把 stateful agent 的消息、工具调用、记忆持久化，并区分 in-context memory blocks 和 archival memory。",
+		borrowed: "借鉴：核心记忆常驻上下文，外部记忆通过工具或检索进入；记忆是 Agent state 的一部分。",
+		notEnough: "不足：完整自管理记忆体系复杂，早期直接照搬会增加主链路风险和运维成本。",
+		ourChoice: "我们的取舍：不让主 Agent 实时自改记忆，而是把交互事件异步交给后台 worker 整理。",
+		docs: "Letta Stateful Agents / Archival Memory",
+		href: "https://docs.letta.com/guides/core-concepts/stateful-agents",
+	},
+	mem0: {
+		name: "Mem0 / Managed Memory Layer",
+		source: "Mem0 把用户、Agent、Session 记忆做成可托管的长期记忆层，并支持 add/search/update/delete。",
+		borrowed: "借鉴：每次交互后抽取记忆；调用前按用户请求检索并注入。",
+		notEnough: "不足：我们当前更需要可审阅、可编辑、可随项目部署的轻量实现，而不是先接托管记忆服务。",
+		ourChoice: "我们的取舍：SQLite 做事件队列，Markdown 做人可编辑记忆正文，后续可替换成 Mem0/向量服务。",
+		docs: "Mem0 Platform Overview",
+		href: "https://docs.mem0.ai/platform/overview",
+	},
+	rag: {
+		name: "RAG / Vector Memory",
+		source: "把资料切片、embedding、向量检索，再把相关片段注入上下文。",
+		borrowed: "借鉴：大规模知识不应全部塞进 prompt，要按任务召回。",
+		notEnough: "不足：Skill 使用经验通常是流程偏好和纠错结论，不是纯语义相似文本召回。",
+		ourChoice: "我们的取舍：业务知识先放 skill/knowledge；记忆先用结构化 Markdown，后续知识膨胀再接召回索引。",
+		docs: "Letta Archival Memory",
+		href: "https://docs.letta.com/guides/ade/archival-memory",
+	},
+	ours: {
+		name: "ZK Data Agent Memory",
+		source: "结合团队 Skill 场景：用户偏好和 Skill 使用经验是两类不同记忆。",
+		borrowed: "借鉴：显式记忆、历史抽取、长期持久化、用户可编辑、异步后台处理。",
+		notEnough: "主动放弃：不做实时自修改、不强依赖向量库、不把所有历史都注入。",
+		ourChoice: "最终形态：user.md + skills/*.md + memory.db queue + worker + enabled skill 注入。",
+		docs: "本项目实现",
+		href: "#memory-implementation",
+	},
+};
+
+const memoryPipeline = [
+	{ title: "检测信号", text: "显式记住 / 纠错 / Skill 流程 / 工具失败", code: "detect_memory_signals" },
+	{ title: "事件入队", text: "主链路只写 pending event，不同步整理", code: "enqueue_interaction" },
+	{ title: "批量整理", text: "后台 worker 每轮最多取 8 条，按 priority 处理", code: "_process_account_events" },
+	{ title: "LLM 合并", text: "合并旧记忆，不追加流水账；失败走规则 fallback", code: "_generate_memory_updates" },
+	{ title: "Markdown 落盘", text: "用户可看、可改、可删；revision 可追踪", code: "user.md / skills/*.md" },
+	{ title: "按需注入", text: "只注入用户记忆和当前启用 Skill 的记忆", code: "render_injection" },
+];
+
+const skills: Record<
+	SkillPartId,
+	{
+		name: string;
+		path: string;
+		purpose: string;
+		agentSees: string;
+		maintainerDoes: string;
+	}
+> = {
+	skillmd: {
+		name: "SKILL.md",
+		path: "skills/<name>/SKILL.md",
+		purpose: "定义 Agent 如何识别任务、何时澄清、何时 review、何时调用脚本。",
+		agentSees: "流程协议、工具优先级、产物约定、人类确认边界。",
+		maintainerDoes: "把经验写成可执行步骤，而不是把所有业务细节塞成一大段 prompt。",
+	},
+	knowledge: {
+		name: "knowledge/",
+		path: "skills/<name>/knowledge/",
+		purpose: "放业务定义、标签边界、字段说明、判断准则。",
+		agentSees: "按需读取具体知识文件，用于分析和生成。",
+		maintainerDoes: "把经常变的业务规则放这里，降低改 SKILL.md 的频率。",
+	},
+	scripts: {
+		name: "scripts/",
+		path: "skills/<name>/scripts/",
+		purpose: "放确定性能力：校验、格式转换、导出、数据清洗。",
+		agentSees: "通过 python_exec 执行脚本，不再现场手写复杂转换逻辑。",
+		maintainerDoes: "把易错代码沉淀成可测试脚本，输入输出写清楚。",
+	},
+	examples: {
+		name: "examples/",
+		path: "skills/<name>/examples/",
+		purpose: "放典型输入输出，帮助 Agent 对齐格式和边界。",
+		agentSees: "少量高质量样例，比长篇抽象说明更稳。",
+		maintainerDoes: "新增失败 case 的最小复现，作为回归材料。",
+	},
+	readme: {
+		name: "README.md",
+		path: "skills/<name>/README.md",
+		purpose: "给人看的维护说明：这是什么、怎么测、怎么扩展。",
+		agentSees: "通常不强制注入，但可被读取用于理解项目背景。",
+		maintainerDoes: "保证同事能接手，不必找原作者口头说明。",
+	},
+	update: {
+		name: "更新 Skill",
+		path: "Web 会话页 > Skills > 更新 Skill",
+		purpose: "同事提交 Git 后，页面内拉取最新 Skill 文件，刷新可用能力。",
+		agentSees: "更新后的 Skill 列表会进入模型可见能力列表。",
+		maintainerDoes: "提交 Skill 改动后提醒使用者点更新；平台发布时再统一收敛。",
+	},
+};
+
+const taskFlows = [
+	{
+		name: "产品定义 → 数据集",
+		skill: "product-data",
+		input: "产品文档 / 手写标签边界 / 示例 query",
+		review: "目标标签、complex、覆盖范围、数量计划",
+		outputs: ["records.jsonl", "review.csv", "train.jsonl", "eval.csv"],
+	},
+	{
+		name: "线上日志 → 专项样本",
+		skill: "online-mining-v2 + elk-fetch",
+		input: "线上 badcase / query 特征 / domain 条件 / ELK 表",
+		review: "筛选策略、候选质量、是否直接转样本还是继续生成",
+		outputs: ["candidates.csv", "sample_review.md", "records.jsonl"],
+	},
+	{
+		name: "标签定义 → 判断辅助",
+		skill: "标签大师",
+		input: "query / 多轮上下文 / 标签定义知识库",
+		review: "复杂度、多指令、自动任务、业务标签、输出形态",
+		outputs: ["label decision", "boundary evidence", "target function"],
+	},
+];
+
+const runtimeTrace = [
+	{ stage: "前端发送", text: "携带 account/session/model/enabled skills", path: "app/api/chat/route.ts" },
+	{ stage: "上下文拼接", text: "Skill 列表 + 用户记忆 + Skill 记忆 + workspace", path: "backend/api/server.py" },
+	{ stage: "Agent Loop", text: "模型决定回复、调用工具、执行脚本或等待 review", path: "src/agent_runtime.py" },
+	{ stage: "工具执行", text: "python_exec / file / search / MCP / Skill scripts", path: "src/agent_tools.py" },
+	{ stage: "事件流", text: "tool_start、tool_end、content_delta、tool_delta", path: "RunStateStore" },
+	{ stage: "产物落盘", text: "scratchpad 存中间过程，output 存最终文件", path: ".port_sessions/.../sessions" },
+	{ stage: "后台记忆", text: "交互完成后异步整理长期经验", path: "src/personal_memory.py" },
+];
+
+const sourceLinks = [
+	{ label: "OpenAI Memory FAQ", href: "https://help.openai.com/en/articles/8590148-memory-faq" },
+	{ label: "Letta Stateful Agents", href: "https://docs.letta.com/guides/core-concepts/stateful-agents" },
+	{ label: "Letta Archival Memory", href: "https://docs.letta.com/guides/ade/archival-memory" },
+	{ label: "Mem0 Overview", href: "https://docs.mem0.ai/platform/overview" },
+	{ label: "Semantic Kernel + Mem0", href: "https://learn.microsoft.com/en-us/semantic-kernel/frameworks/agent/agent-memory" },
+];
+
+function StatusIcon({ value }: { value: "yes" | "partial" | "no" }) {
+	if (value === "yes") return <Check className="doc-status yes" />;
+	if (value === "partial") return <CircleDashed className="doc-status partial" />;
+	return <X className="doc-status no" />;
+}
+
+function ProductComparison() {
+	const [selected, setSelected] = useState<ProductId>("zk");
+	const detail = products[selected];
+	const productIds: ProductId[] = ["chatgpt", "cursor", "claude", "zk"];
+
+	return (
+		<section className="doc-section doc-compare-lab" id="why-us">
+			<div className="doc-section-heading">
+				<p className="doc-kicker">先回答最尖锐的问题</p>
+				<h2>为什么不用 Claude Code / ChatGPT / Cursor 就够了？</h2>
+				<p>
+					不是因为我们模型更强，而是因为我们补的是团队业务流程平台：多人入口、共享 Skill、数据源、产物、记忆和管理。
+				</p>
+			</div>
+			<div className="doc-compare-layout">
+				<div className="doc-product-switcher">
+					{productIds.map((id) => (
+						<button
+							className={selected === id ? "is-selected" : ""}
+							key={id}
+							onClick={() => setSelected(id)}
+							type="button"
+						>
+							<span>{products[id].name}</span>
+							<small>{products[id].position}</small>
+						</button>
+					))}
+				</div>
+				<div className="doc-product-card">
+					<p className="doc-kicker">当前选中</p>
+					<h3>{detail.name}</h3>
+					<div className="doc-product-facts">
+						<div>
+							<span>最适合</span>
+							<p>{detail.bestFor}</p>
+						</div>
+						<div>
+							<span>边界</span>
+							<p>{detail.limits}</p>
+						</div>
+					</div>
+					<div className="doc-chip-list">
+						{detail.tech.map((item) => (
+							<span className="doc-chip" key={item}>{item}</span>
+						))}
+					</div>
+				</div>
+			</div>
+			<div className="doc-matrix">
+				<div className="doc-matrix-head">
+					<span>能力</span>
+					{productIds.map((id) => <strong key={id}>{products[id].name}</strong>)}
+				</div>
+				{comparisonRows.map((row) => (
+					<div className="doc-matrix-row" key={row.label}>
+						<span>{row.label}</span>
+						{productIds.map((id) => (
+							<div className={selected === id ? "is-highlighted" : ""} key={id}>
+								<StatusIcon value={row[id]} />
+							</div>
+						))}
+					</div>
+				))}
+			</div>
+		</section>
+	);
+}
+
+function RoleSwitcher() {
+	const [selected, setSelected] = useState<RoleId>("user");
+	const role = roles[selected];
+
+	return (
+		<section className="doc-section doc-role-lab" id="roles">
+			<div className="doc-section-heading">
+				<p className="doc-kicker">融入工作的方式</p>
+				<h2>同一个平台，三类人看到的是三条不同路径</h2>
+			</div>
+			<div className="doc-role-grid">
+				<div className="doc-role-tabs">
+					{(Object.keys(roles) as RoleId[]).map((id) => (
+						<button
+							className={selected === id ? "is-selected" : ""}
+							key={id}
+							onClick={() => setSelected(id)}
+							type="button"
+						>
+							{roles[id].name}
+						</button>
+					))}
+				</div>
+				<div className="doc-role-panel">
+					<h3>{role.title}</h3>
+					<div className="doc-role-question">{role.question}</div>
+					<p>{role.answer}</p>
+					<div className="doc-flow-chips">
+						{role.workflow.map((step) => (
+							<span key={step}>{step}</span>
+						))}
+					</div>
+				</div>
+				<div className="doc-proof-panel">
+					<p className="doc-kicker">平台证据</p>
+					{role.proof.map((item) => (
+						<div className="doc-proof-item" key={item}>
+							<CheckCircle2 />
+							<span>{item}</span>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function ObjectiveBoard() {
+	return (
+		<section className="doc-section doc-objectives" id="design-goals">
+			<div className="doc-section-heading">
+				<p className="doc-kicker">这页怎么讲清楚系统</p>
+				<h2>每个前端模块都必须服务一个表达目标</h2>
+			</div>
+			<div className="doc-objective-grid">
+				{objectives.map((item, index) => (
+					<article className="doc-objective" key={item.goal}>
+						<span>{String(index + 1).padStart(2, "0")}</span>
+						<h3>{item.goal}</h3>
+						<p>{item.frontend}</p>
+						<strong>{item.message}</strong>
+					</article>
+				))}
+			</div>
+		</section>
+	);
+}
+
+function MemoryAtlas() {
+	const [selected, setSelected] = useState<MemoryId>("ours");
+	const item = memoryPatterns[selected];
+	const order: MemoryId[] = ["chatgpt", "letta", "mem0", "rag", "ours"];
+
+	return (
+		<section className="doc-section doc-memory-lab" id="memory">
+			<div className="doc-section-heading">
+				<p className="doc-kicker">记忆方案谱系</p>
+				<h2>我们不是闭门造车：先看主流方案，再看为什么这样落地</h2>
+				<p>
+					记忆不是一个功能开关。我们参考了显式保存、历史参考、状态化 Agent、归档检索、托管记忆层等方案，最后按团队 Skill 场景做了轻量实现。
+				</p>
+			</div>
+			<div className="doc-memory-map">
+				<div className="doc-memory-rail">
+					{order.map((id, index) => (
+						<button
+							className={selected === id ? "is-selected" : ""}
+							key={id}
+							onClick={() => setSelected(id)}
+							type="button"
+						>
+							<span>{String(index + 1).padStart(2, "0")}</span>
+							<strong>{memoryPatterns[id].name}</strong>
+						</button>
+					))}
+				</div>
+				<div className="doc-memory-detail-v2">
+					<div className="doc-memory-source">
+						<a href={item.href}>{item.docs}</a>
+					</div>
+					<h3>{item.name}</h3>
+					<div className="doc-memory-grid-v2">
+						<div><span>它怎么做</span><p>{item.source}</p></div>
+						<div><span>我们借鉴</span><p>{item.borrowed}</p></div>
+						<div><span>为什么不够</span><p>{item.notEnough}</p></div>
+						<div><span>我们的取舍</span><p>{item.ourChoice}</p></div>
+					</div>
+				</div>
+			</div>
+			<div className="doc-memory-implementation" id="memory-implementation">
+				<div className="doc-section-heading compact">
+					<p className="doc-kicker">当前实现</p>
+					<h2>用户记忆 + Skill 记忆 + 异步队列</h2>
+				</div>
+				<div className="doc-memory-pipeline-v2">
+					{memoryPipeline.map((step, index) => (
+						<div className="doc-memory-step" key={step.title}>
+							<span>{String(index + 1).padStart(2, "0")}</span>
+							<strong>{step.title}</strong>
+							<p>{step.text}</p>
+							<code>{step.code}</code>
+						</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function SkillWorkbench() {
+	const [selected, setSelected] = useState<SkillPartId>("skillmd");
+	const part = skills[selected];
+	const order: SkillPartId[] = ["skillmd", "knowledge", "scripts", "examples", "readme", "update"];
+
+	return (
+		<section className="doc-section doc-skill-workbench" id="skill-dev">
+			<div className="doc-section-heading">
+				<p className="doc-kicker">Skill 怎么开发，怎么共享，怎么更新</p>
+				<h2>把一个人的经验打包成团队能力，不靠口口相传</h2>
+			</div>
+			<div className="doc-skill-workbench-grid">
+				<div className="doc-file-tree-v2">
+					{order.map((id) => (
+						<button className={selected === id ? "is-selected" : ""} key={id} onClick={() => setSelected(id)} type="button">
+							<FolderTree />
+							<span>{skills[id].name}</span>
+						</button>
+					))}
+				</div>
+				<div className="doc-skill-part">
+					<code>{part.path}</code>
+					<h3>{part.name}</h3>
+					<div className="doc-skill-part-grid">
+						<div><span>解决什么</span><p>{part.purpose}</p></div>
+						<div><span>Agent 看到什么</span><p>{part.agentSees}</p></div>
+						<div><span>维护者做什么</span><p>{part.maintainerDoes}</p></div>
+					</div>
+				</div>
+				<div className="doc-skill-steps">
+					<h3>一个 Skill 的提交路径</h3>
+					{["创建目录", "补 SKILL.md", "沉淀脚本/知识", "本地测试", "提交 Git", "页面点更新 Skill"].map((step, index) => (
+						<div key={step}><span>{index + 1}</span>{step}</div>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+}
+
+function TaskFlowMap() {
+	return (
+		<section className="doc-section doc-task-map" id="tasks">
+			<div className="doc-section-heading">
+				<p className="doc-kicker">已经能进入工作的场景</p>
+				<h2>不是展示功能点，而是展示从输入到产物的链路</h2>
+			</div>
+			<div className="doc-task-grid">
+				{taskFlows.map((flow) => (
+					<article className="doc-task-card" key={flow.name}>
+						<div className="doc-task-title"><Route /><h3>{flow.name}</h3></div>
+						<div className="doc-task-meta"><span>Skill</span><strong>{flow.skill}</strong></div>
+						<div className="doc-task-meta"><span>输入</span><p>{flow.input}</p></div>
+						<div className="doc-task-meta"><span>Review 点</span><p>{flow.review}</p></div>
+						<div className="doc-output-list">
+							{flow.outputs.map((output) => <span key={output}>{output}</span>)}
+						</div>
+					</article>
+				))}
+			</div>
+		</section>
+	);
+}
+
+function RuntimeTrace() {
+	return (
+		<section className="doc-section doc-runtime-trace" id="runtime">
+			<div className="doc-section-heading">
+				<p className="doc-kicker">运行时链路</p>
+				<h2>从用户按下发送，到文件、活动区和记忆更新</h2>
+			</div>
+			<div className="doc-runtime-rail">
+				{runtimeTrace.map((step, index) => (
+					<div className="doc-runtime-node" key={step.stage}>
+						<span>{String(index + 1).padStart(2, "0")}</span>
+						<strong>{step.stage}</strong>
+						<p>{step.text}</p>
+						<code>{step.path}</code>
+					</div>
+				))}
+			</div>
+		</section>
+	);
+}
+
+export default function DocPage() {
+	return (
+		<main className="doc-page doc-page-v2">
+			<header className="doc-hero-v2">
+				<nav className="doc-nav">
+					<a className="doc-brand" href="/">
+						<span className="doc-brand-mark">ZK</span>
+						<span>Data Agent</span>
+					</a>
+					<div className="doc-nav-links">
+						<a href="#why-us">为什么用</a>
+						<a href="#roles">怎么融入</a>
+						<a href="#memory">记忆取舍</a>
+						<a href="#skill-dev">开发 Skill</a>
+						<a href="#runtime">运行链路</a>
+					</div>
+				</nav>
+				<section className="doc-hero-v2-grid">
+					<div className="doc-hero-v2-copy">
+						<p className="doc-kicker">不是更聪明的聊天框</p>
+						<h1>这是一个把团队业务流程沉淀成共享 Skill 的 Agent 工作台</h1>
+						<p>
+							它补的不是“再问模型一次”，而是团队级能力复用：多人入口、业务 Skill、线上数据源、会话产物、Skill 记忆、管理后台和可审阅执行链路。
+						</p>
+						<div className="doc-hero-actions">
+							<a className="doc-primary-link" href="#why-us">先回答为什么用我们 <ArrowRight /></a>
+							<a className="doc-secondary-link" href="#skill-dev">我想开发 Skill</a>
+						</div>
+					</div>
+					<div className="doc-command-wall">
+						<div className="doc-command-head"><Sparkles /> 一次真实任务会经过什么</div>
+						{["选择 product-data Skill", "对齐标签和 complex", "生成可 review 计划", "调用 scripts 导出 records/train/eval", "文件进入当前会话 output"].map((item, index) => (
+							<div className="doc-command-row" key={item}>
+								<span>{String(index + 1).padStart(2, "0")}</span>
+								<strong>{item}</strong>
+							</div>
+						))}
+					</div>
+				</section>
+			</header>
+
+			<ObjectiveBoard />
+			<ProductComparison />
+			<RoleSwitcher />
+			<TaskFlowMap />
+			<MemoryAtlas />
+			<SkillWorkbench />
+			<RuntimeTrace />
+
+			<section className="doc-section doc-source-links">
+				<div className="doc-section-heading">
+					<p className="doc-kicker">参考来源</p>
+					<h2>记忆和 Agent 设计参考了这些现成方案</h2>
+				</div>
+				<div className="doc-source-grid">
+					{sourceLinks.map((link) => (
+						<a href={link.href} key={link.href}><Network />{link.label}</a>
+					))}
+				</div>
+			</section>
+		</main>
+	);
+}
diff --git a/frontend/app/app/globals.css b/frontend/app/app/globals.css
index 0ba32a0..7273c35 100644
--- a/frontend/app/app/globals.css
+++ b/frontend/app/app/globals.css
@@ -53,6 +53,736 @@
   }
 }
 
+.doc-page-v2 {
+  background:
+    linear-gradient(90deg, rgba(20, 28, 40, 0.04) 1px, transparent 1px),
+    linear-gradient(0deg, rgba(20, 28, 40, 0.04) 1px, transparent 1px),
+    #f4f5f2;
+  background-size: 28px 28px;
+}
+
+.doc-hero-v2 {
+  min-height: 680px;
+  border-bottom: 1px solid rgba(22, 24, 29, 0.12);
+  background:
+    radial-gradient(circle at 72% 18%, rgba(37, 99, 235, 0.16), transparent 30%),
+    linear-gradient(180deg, #ffffff 0%, #f4f5f2 100%);
+}
+
+.doc-hero-v2-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 0.96fr) minmax(420px, 1.04fr);
+  gap: 42px;
+  max-width: 1240px;
+  margin: 0 auto;
+  padding: 72px 28px 88px;
+}
+
+.doc-hero-v2-copy {
+  align-self: center;
+}
+
+.doc-hero-v2-copy h1 {
+  margin: 0;
+  font-size: clamp(44px, 5.3vw, 76px);
+  font-weight: 850;
+  line-height: 1.03;
+  letter-spacing: 0;
+}
+
+.doc-hero-v2-copy p:not(.doc-kicker) {
+  max-width: 760px;
+  margin: 24px 0 0;
+  color: #4f5663;
+  font-size: 18px;
+  line-height: 1.78;
+}
+
+.doc-command-wall {
+  align-self: stretch;
+  border: 1px solid rgba(22, 24, 29, 0.12);
+  border-radius: 12px;
+  background: #111827;
+  box-shadow: 0 28px 90px rgba(15, 23, 42, 0.18);
+  color: #e5e7eb;
+  overflow: hidden;
+}
+
+.doc-command-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  padding: 18px 20px;
+  color: #bfdbfe;
+  font-weight: 800;
+}
+
+.doc-command-head svg {
+  width: 18px;
+  height: 18px;
+}
+
+.doc-command-row {
+  display: grid;
+  grid-template-columns: 52px 1fr;
+  min-height: 82px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
+}
+
+.doc-command-row:last-child {
+  border-bottom: 0;
+}
+
+.doc-command-row span {
+  display: grid;
+  place-items: center;
+  color: #60a5fa;
+  font-family: var(--font-mono);
+  font-size: 13px;
+}
+
+.doc-command-row strong {
+  display: flex;
+  align-items: center;
+  padding-right: 20px;
+  font-size: 16px;
+}
+
+.doc-objectives {
+  padding-top: 54px;
+}
+
+.doc-objective-grid {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.doc-objective {
+  display: grid;
+  gap: 12px;
+  border: 1px solid rgba(22, 24, 29, 0.12);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.78);
+  padding: 18px;
+}
+
+.doc-objective > span {
+  color: #2563eb;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.doc-objective h3 {
+  margin: 0;
+  font-size: 17px;
+}
+
+.doc-objective p {
+  margin: 0;
+  color: #5f6571;
+  line-height: 1.65;
+}
+
+.doc-objective strong {
+  color: #16181d;
+  line-height: 1.55;
+}
+
+.doc-compare-lab {
+  max-width: none;
+  border-top: 1px solid rgba(22, 24, 29, 0.1);
+  border-bottom: 1px solid rgba(22, 24, 29, 0.1);
+  background: #eef3f7;
+}
+
+.doc-compare-lab > * {
+  max-width: 1184px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.doc-compare-layout,
+.doc-role-grid,
+.doc-memory-map,
+.doc-skill-workbench-grid {
+  display: grid;
+  gap: 14px;
+}
+
+.doc-compare-layout {
+  grid-template-columns: 300px minmax(0, 1fr);
+  margin-bottom: 14px;
+}
+
+.doc-product-switcher {
+  display: grid;
+  gap: 10px;
+}
+
+.doc-product-switcher button,
+.doc-role-tabs button,
+.doc-memory-rail button,
+.doc-file-tree-v2 button {
+  border: 1px solid rgba(22, 24, 29, 0.12);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.78);
+  color: #303642;
+  cursor: pointer;
+  text-align: left;
+}
+
+.doc-product-switcher button {
+  display: grid;
+  gap: 6px;
+  padding: 15px;
+}
+
+.doc-product-switcher button.is-selected,
+.doc-role-tabs button.is-selected,
+.doc-memory-rail button.is-selected,
+.doc-file-tree-v2 button.is-selected {
+  border-color: #2563eb;
+  background: #eff6ff;
+}
+
+.doc-product-switcher span {
+  font-weight: 850;
+}
+
+.doc-product-switcher small {
+  color: #667080;
+  line-height: 1.45;
+}
+
+.doc-product-card,
+.doc-role-panel,
+.doc-proof-panel,
+.doc-memory-detail-v2,
+.doc-memory-implementation,
+.doc-skill-part,
+.doc-skill-steps,
+.doc-task-card {
+  border: 1px solid rgba(22, 24, 29, 0.12);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.8);
+}
+
+.doc-product-card {
+  padding: 24px;
+}
+
+.doc-product-card h3 {
+  margin: 0;
+  font-size: 34px;
+}
+
+.doc-product-facts {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px;
+  margin: 22px 0;
+}
+
+.doc-product-facts div {
+  border-left: 2px solid #2563eb;
+  padding-left: 14px;
+}
+
+.doc-product-facts span,
+.doc-task-meta span,
+.doc-skill-part-grid span,
+.doc-memory-grid-v2 span {
+  color: #2563eb;
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.doc-product-facts p {
+  margin: 7px 0 0;
+  color: #303642;
+  line-height: 1.65;
+}
+
+.doc-matrix {
+  overflow: hidden;
+  border: 1px solid rgba(22, 24, 29, 0.12);
+  border-radius: 10px;
+  background: #ffffff;
+}
+
+.doc-matrix-head,
+.doc-matrix-row {
+  display: grid;
+  grid-template-columns: 1.2fr repeat(4, minmax(0, 1fr));
+}
+
+.doc-matrix-head {
+  background: #16181d;
+  color: #ffffff;
+  font-size: 13px;
+}
+
+.doc-matrix-head > *,
+.doc-matrix-row > * {
+  display: flex;
+  align-items: center;
+  min-height: 52px;
+  border-right: 1px solid rgba(22, 24, 29, 0.1);
+  padding: 0 14px;
+}
+
+.doc-matrix-head > * {
+  border-color: rgba(255, 255, 255, 0.12);
+}
+
+.doc-matrix-row {
+  border-top: 1px solid rgba(22, 24, 29, 0.1);
+}
+
+.doc-matrix-row > span {
+  color: #303642;
+  font-weight: 750;
+}
+
+.doc-matrix-row > div {
+  justify-content: center;
+}
+
+.doc-matrix-row > div.is-highlighted {
+  background: #eff6ff;
+}
+
+.doc-status {
+  width: 18px;
+  height: 18px;
+}
+
+.doc-status.yes {
+  color: #16a34a;
+}
+
+.doc-status.partial {
+  color: #d97706;
+}
+
+.doc-status.no {
+  color: #9ca3af;
+}
+
+.doc-role-grid {
+  grid-template-columns: 240px minmax(0, 1fr) 300px;
+}
+
+.doc-role-tabs {
+  display: grid;
+  gap: 10px;
+}
+
+.doc-role-tabs button {
+  min-height: 58px;
+  padding: 0 16px;
+  font-weight: 850;
+}
+
+.doc-role-panel,
+.doc-proof-panel {
+  padding: 24px;
+}
+
+.doc-role-panel h3 {
+  margin: 0;
+  font-size: 30px;
+}
+
+.doc-role-question {
+  margin-top: 16px;
+  border-left: 3px solid #2563eb;
+  background: #eff6ff;
+  padding: 12px 14px;
+  color: #1e40af;
+  font-weight: 800;
+}
+
+.doc-role-panel p {
+  margin: 18px 0 0;
+  color: #4f5663;
+  line-height: 1.72;
+}
+
+.doc-flow-chips,
+.doc-source-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.doc-flow-chips {
+  margin-top: 22px;
+}
+
+.doc-flow-chips span {
+  border-radius: 999px;
+  background: #16181d;
+  padding: 8px 11px;
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.doc-proof-item {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 42px;
+  border-bottom: 1px solid rgba(22, 24, 29, 0.09);
+  color: #303642;
+}
+
+.doc-proof-item:last-child {
+  border-bottom: 0;
+}
+
+.doc-proof-item svg {
+  width: 16px;
+  height: 16px;
+  color: #16a34a;
+}
+
+.doc-task-map {
+  max-width: none;
+  background: #16181d;
+  color: #ffffff;
+}
+
+.doc-task-map > * {
+  max-width: 1184px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.doc-task-map .doc-section-heading p:not(.doc-kicker) {
+  color: #c7ceda;
+}
+
+.doc-task-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px;
+}
+
+.doc-task-card {
+  background: rgba(255, 255, 255, 0.06);
+  border-color: rgba(255, 255, 255, 0.14);
+  padding: 22px;
+}
+
+.doc-task-title {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.doc-task-title svg {
+  width: 18px;
+  height: 18px;
+  color: #60a5fa;
+}
+
+.doc-task-title h3 {
+  margin: 0;
+  font-size: 20px;
+}
+
+.doc-task-meta {
+  margin-top: 18px;
+}
+
+.doc-task-meta p,
+.doc-task-meta strong {
+  display: block;
+  margin: 6px 0 0;
+  color: #dbe4f0;
+  line-height: 1.65;
+}
+
+.doc-memory-map {
+  grid-template-columns: 300px minmax(0, 1fr);
+}
+
+.doc-memory-rail {
+  display: grid;
+  gap: 10px;
+}
+
+.doc-memory-rail button {
+  display: grid;
+  grid-template-columns: 38px 1fr;
+  gap: 12px;
+  align-items: center;
+  min-height: 68px;
+  padding: 0 14px;
+}
+
+.doc-memory-rail button > span {
+  color: #2563eb;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.doc-memory-rail strong {
+  line-height: 1.45;
+}
+
+.doc-memory-detail-v2 {
+  padding: 24px;
+}
+
+.doc-memory-source a {
+  color: #2563eb;
+  font-size: 13px;
+  font-weight: 850;
+  text-decoration: none;
+}
+
+.doc-memory-detail-v2 h3 {
+  margin: 12px 0 0;
+  font-size: 32px;
+}
+
+.doc-memory-grid-v2,
+.doc-skill-part-grid {
+  display: grid;
+  gap: 12px;
+}
+
+.doc-memory-grid-v2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-top: 22px;
+}
+
+.doc-memory-grid-v2 div,
+.doc-skill-part-grid div {
+  border-left: 2px solid #2563eb;
+  background: rgba(239, 246, 255, 0.65);
+  padding: 12px 14px;
+}
+
+.doc-memory-grid-v2 p,
+.doc-skill-part-grid p {
+  margin: 7px 0 0;
+  color: #303642;
+  line-height: 1.65;
+}
+
+.doc-memory-implementation {
+  margin-top: 16px;
+  padding: 24px;
+}
+
+.doc-section-heading.compact {
+  margin-bottom: 20px;
+}
+
+.doc-memory-pipeline-v2 {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.doc-memory-step {
+  border: 1px solid rgba(22, 24, 29, 0.1);
+  border-radius: 9px;
+  background: #ffffff;
+  padding: 14px;
+}
+
+.doc-memory-step > span {
+  color: #2563eb;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.doc-memory-step strong {
+  display: block;
+  margin-top: 10px;
+}
+
+.doc-memory-step p {
+  margin: 8px 0 12px;
+  color: #5f6571;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.doc-memory-step code,
+.doc-skill-part code,
+.doc-runtime-node code {
+  border-radius: 6px;
+  background: #eff6ff;
+  padding: 5px 7px;
+  color: #1d4ed8;
+  font-family: var(--font-mono);
+  font-size: 11px;
+}
+
+.doc-skill-workbench-grid {
+  grid-template-columns: 260px minmax(0, 1fr) 280px;
+}
+
+.doc-file-tree-v2 {
+  display: grid;
+  gap: 9px;
+}
+
+.doc-file-tree-v2 button {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 52px;
+  padding: 0 14px;
+  font-weight: 800;
+}
+
+.doc-file-tree-v2 svg {
+  width: 16px;
+  height: 16px;
+  color: #2563eb;
+}
+
+.doc-skill-part,
+.doc-skill-steps {
+  padding: 22px;
+}
+
+.doc-skill-part h3 {
+  margin: 18px 0;
+  font-size: 30px;
+}
+
+.doc-skill-part-grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.doc-skill-steps h3 {
+  margin: 0 0 16px;
+}
+
+.doc-skill-steps div {
+  display: grid;
+  grid-template-columns: 34px 1fr;
+  gap: 10px;
+  align-items: center;
+  min-height: 42px;
+  border-bottom: 1px solid rgba(22, 24, 29, 0.09);
+}
+
+.doc-skill-steps div:last-child {
+  border-bottom: 0;
+}
+
+.doc-skill-steps span {
+  color: #2563eb;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.doc-runtime-rail {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.doc-runtime-node {
+  border: 1px solid rgba(22, 24, 29, 0.12);
+  border-radius: 10px;
+  background: #ffffff;
+  padding: 14px;
+}
+
+.doc-runtime-node > span {
+  color: #2563eb;
+  font-family: var(--font-mono);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.doc-runtime-node strong {
+  display: block;
+  margin-top: 10px;
+}
+
+.doc-runtime-node p {
+  margin: 8px 0 12px;
+  color: #5f6571;
+  font-size: 13px;
+  line-height: 1.55;
+}
+
+.doc-source-links {
+  border-top: 1px solid rgba(22, 24, 29, 0.1);
+}
+
+.doc-source-grid a {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 1px solid rgba(22, 24, 29, 0.12);
+  border-radius: 999px;
+  background: #ffffff;
+  padding: 9px 12px;
+  color: #303642;
+  font-weight: 800;
+  text-decoration: none;
+}
+
+.doc-source-grid svg {
+  width: 16px;
+  height: 16px;
+  color: #2563eb;
+}
+
+@media (max-width: 1120px) {
+  .doc-objective-grid,
+  .doc-memory-pipeline-v2,
+  .doc-runtime-rail {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .doc-task-grid,
+  .doc-skill-workbench-grid,
+  .doc-role-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  .doc-hero-v2-grid,
+  .doc-compare-layout,
+  .doc-memory-map,
+  .doc-product-facts,
+  .doc-memory-grid-v2,
+  .doc-skill-part-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .doc-matrix-head,
+  .doc-matrix-row {
+    grid-template-columns: 1.1fr repeat(4, 44px);
+  }
+
+  .doc-matrix-head strong {
+    writing-mode: vertical-rl;
+    justify-content: center;
+    padding: 10px 0;
+  }
+}
+
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
@@ -138,4 +868,1026 @@
   body {
     @apply bg-background text-foreground;
   }
-}
\ No newline at end of file
+}
+
+.doc-page {
+    min-height: 100vh;
+    background:
+      linear-gradient(90deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
+      linear-gradient(0deg, rgba(15, 23, 42, 0.035) 1px, transparent 1px),
+      #f7f7f4;
+    background-size: 32px 32px;
+    color: #16181d;
+  }
+
+  .doc-hero {
+    border-bottom: 1px solid rgba(22, 24, 29, 0.12);
+    background: linear-gradient(180deg, #ffffff 0%, #f7f7f4 100%);
+  }
+
+  .doc-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 18px 28px;
+  }
+
+  .doc-brand,
+  .doc-nav-links,
+  .doc-hero-actions,
+  .doc-primary-link,
+  .doc-secondary-link,
+  .doc-flow-item,
+  .doc-output-strip,
+  .doc-case-title,
+  .doc-reference,
+  .doc-footer {
+    display: flex;
+    align-items: center;
+  }
+
+  .doc-brand {
+    gap: 10px;
+    color: #16181d;
+    font-weight: 700;
+    text-decoration: none;
+  }
+
+  .doc-brand-mark {
+    display: inline-grid;
+    width: 32px;
+    height: 32px;
+    place-items: center;
+    border: 1px solid rgba(22, 24, 29, 0.14);
+    border-radius: 8px;
+    background: #16181d;
+    color: #ffffff;
+    font-size: 12px;
+  }
+
+  .doc-nav-links {
+    gap: 18px;
+    font-size: 13px;
+  }
+
+  .doc-nav-links a,
+  .doc-reference,
+  .doc-primary-link,
+  .doc-secondary-link {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  .doc-nav-links a {
+    color: #5f6571;
+  }
+
+  .doc-nav-links a:hover {
+    color: #16181d;
+  }
+
+  .doc-hero-grid {
+    display: grid;
+    grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
+    gap: 48px;
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 70px 28px 76px;
+  }
+
+  .doc-hero-copy {
+    align-self: center;
+  }
+
+  .doc-kicker {
+    margin: 0 0 12px;
+    color: #2563eb;
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  .doc-hero h1 {
+    max-width: 760px;
+    margin: 0;
+    font-size: clamp(42px, 5.2vw, 76px);
+    line-height: 1.02;
+    font-weight: 800;
+  }
+
+  .doc-hero-lead {
+    max-width: 680px;
+    margin: 24px 0 0;
+    color: #4f5663;
+    font-size: 18px;
+    line-height: 1.7;
+  }
+
+  .doc-hero-actions {
+    flex-wrap: wrap;
+    gap: 12px;
+    margin-top: 34px;
+  }
+
+  .doc-primary-link,
+  .doc-secondary-link {
+    justify-content: center;
+    min-height: 42px;
+    border-radius: 8px;
+    padding: 0 16px;
+    font-size: 14px;
+    font-weight: 700;
+  }
+
+  .doc-primary-link {
+    gap: 8px;
+    background: #16181d;
+    color: #ffffff;
+  }
+
+  .doc-primary-link svg,
+  .doc-secondary-link svg,
+  .doc-flow-item svg,
+  .doc-case-title svg,
+  .doc-stack-item svg,
+  .doc-skill-notes svg,
+  .doc-reference svg,
+  .doc-footer svg {
+    width: 17px;
+    height: 17px;
+  }
+
+  .doc-secondary-link {
+    border: 1px solid rgba(22, 24, 29, 0.14);
+    background: rgba(255, 255, 255, 0.72);
+    color: #252932;
+  }
+
+  .doc-terminal-visual {
+    align-self: stretch;
+    border: 1px solid rgba(22, 24, 29, 0.14);
+    border-radius: 12px;
+    background: #111827;
+    box-shadow: 0 24px 80px rgba(15, 23, 42, 0.18);
+    color: #e5e7eb;
+    overflow: hidden;
+  }
+
+  .doc-terminal-head {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 15px 18px;
+    color: #a7b0bf;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+
+  .doc-flow-stack {
+    display: grid;
+    gap: 12px;
+    padding: 22px;
+  }
+
+  .doc-flow-item {
+    justify-content: space-between;
+    gap: 14px;
+    min-height: 64px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 8px;
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0 16px;
+    font-size: 14px;
+  }
+
+  .doc-flow-item span {
+    flex: 1;
+  }
+
+  .doc-flow-item.is-active {
+    border-color: rgba(96, 165, 250, 0.72);
+    background: rgba(37, 99, 235, 0.22);
+  }
+
+  .doc-output-strip {
+    flex-wrap: wrap;
+    gap: 8px;
+    border-top: 1px solid rgba(255, 255, 255, 0.12);
+    padding: 16px 22px 20px;
+  }
+
+  .doc-output-strip span {
+    border: 1px solid rgba(255, 255, 255, 0.13);
+    border-radius: 999px;
+    padding: 6px 10px;
+    color: #d1d5db;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+
+  .doc-section {
+    max-width: 1240px;
+    margin: 0 auto;
+    padding: 76px 28px;
+  }
+
+  .doc-section-heading {
+    max-width: 780px;
+    margin-bottom: 28px;
+  }
+
+  .doc-section-heading h2 {
+    margin: 0;
+    font-size: clamp(28px, 3vw, 44px);
+    line-height: 1.12;
+  }
+
+  .doc-section-heading p:not(.doc-kicker) {
+    margin: 16px 0 0;
+    color: #5f6571;
+    font-size: 16px;
+    line-height: 1.75;
+  }
+
+  .doc-pain-grid,
+  .doc-stack-grid,
+  .doc-case-grid,
+  .doc-reference-grid,
+  .doc-memory-layout,
+  .doc-deep-layout {
+    display: grid;
+    gap: 14px;
+  }
+
+  .doc-pain-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .doc-pain-item,
+  .doc-stack-item,
+  .doc-case,
+  .doc-product-detail,
+  .doc-file-tree,
+  .doc-skill-notes > div,
+  .doc-reference {
+    border: 1px solid rgba(22, 24, 29, 0.12);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.72);
+  }
+
+  .doc-pain-item {
+    padding: 20px;
+  }
+
+  .doc-pain-item span {
+    color: #2563eb;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 700;
+  }
+
+  .doc-pain-item p {
+    margin: 16px 0 0;
+    color: #2d3340;
+    line-height: 1.65;
+  }
+
+  .doc-product-map {
+    max-width: none;
+    border-top: 1px solid rgba(22, 24, 29, 0.1);
+    border-bottom: 1px solid rgba(22, 24, 29, 0.1);
+    background: #eef3f7;
+  }
+
+  .doc-memory-lab {
+    max-width: none;
+    background:
+      radial-gradient(circle at 15% 15%, rgba(37, 99, 235, 0.1), transparent 28%),
+      radial-gradient(circle at 85% 20%, rgba(16, 185, 129, 0.1), transparent 30%),
+      #ffffff;
+  }
+
+  .doc-memory-lab > * {
+    max-width: 1184px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .doc-memory-layout {
+    grid-template-columns: minmax(230px, 0.55fr) minmax(0, 1.45fr);
+  }
+
+  .doc-memory-tabs,
+  .doc-deep-tabs {
+    display: grid;
+    gap: 10px;
+  }
+
+  .doc-memory-tabs button,
+  .doc-deep-tabs button {
+    border: 1px solid rgba(22, 24, 29, 0.12);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.72);
+    color: #303642;
+    cursor: pointer;
+    text-align: left;
+    transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
+  }
+
+  .doc-memory-tabs button {
+    display: grid;
+    gap: 5px;
+    padding: 16px;
+  }
+
+  .doc-memory-tabs button span {
+    font-weight: 800;
+  }
+
+  .doc-memory-tabs button small {
+    color: #717989;
+    line-height: 1.5;
+  }
+
+  .doc-memory-tabs button:hover,
+  .doc-deep-tabs button:hover {
+    transform: translateY(-1px);
+  }
+
+  .doc-memory-tabs button.is-selected,
+  .doc-deep-tabs button.is-selected {
+    border-color: #2563eb;
+    background: #eff6ff;
+  }
+
+  .doc-memory-detail {
+    display: grid;
+    grid-template-columns: minmax(0, 0.9fr) minmax(300px, 1.1fr);
+    gap: 14px;
+  }
+
+  .doc-memory-card,
+  .doc-memory-pipeline,
+  .doc-deep-panel,
+  .doc-trace-item {
+    border: 1px solid rgba(22, 24, 29, 0.12);
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.78);
+  }
+
+  .doc-memory-card {
+    padding: 24px;
+  }
+
+  .doc-memory-card h3 {
+    margin: 0;
+    font-size: 28px;
+  }
+
+  .doc-memory-card dl {
+    display: grid;
+    gap: 16px;
+    margin: 22px 0 0;
+  }
+
+  .doc-memory-card dt {
+    color: #2563eb;
+    font-size: 12px;
+    font-weight: 800;
+  }
+
+  .doc-memory-card dd {
+    margin: 6px 0 0;
+    color: #303642;
+    line-height: 1.7;
+  }
+
+  .doc-memory-pipeline {
+    display: grid;
+    gap: 0;
+    overflow: hidden;
+  }
+
+  .doc-memory-pipeline > div {
+    display: grid;
+    grid-template-columns: 34px 132px 1fr;
+    gap: 12px;
+    align-items: center;
+    min-height: 70px;
+    border-bottom: 1px solid rgba(22, 24, 29, 0.1);
+    padding: 12px 16px;
+  }
+
+  .doc-memory-pipeline > div:last-child {
+    border-bottom: 0;
+  }
+
+  .doc-memory-pipeline svg {
+    width: 18px;
+    height: 18px;
+    color: #2563eb;
+  }
+
+  .doc-memory-pipeline strong {
+    color: #1f2937;
+  }
+
+  .doc-memory-pipeline span {
+    color: #5f6571;
+    line-height: 1.55;
+  }
+
+  .doc-code-strip {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 14px;
+  }
+
+  .doc-code-strip span,
+  .doc-code-callout,
+  .doc-trace-item code {
+    border: 1px solid rgba(37, 99, 235, 0.18);
+    border-radius: 7px;
+    background: #eff6ff;
+    color: #1d4ed8;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+
+  .doc-code-strip span {
+    padding: 8px 10px;
+  }
+
+  .doc-deep-dive {
+    border-bottom: 1px solid rgba(22, 24, 29, 0.1);
+  }
+
+  .doc-deep-layout {
+    grid-template-columns: 280px minmax(0, 1fr);
+  }
+
+  .doc-deep-tabs button {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    min-height: 58px;
+    padding: 0 16px;
+    font-weight: 800;
+  }
+
+  .doc-deep-tabs svg {
+    width: 17px;
+    height: 17px;
+    color: #2563eb;
+  }
+
+  .doc-deep-panel {
+    padding: 28px;
+  }
+
+  .doc-deep-title {
+    display: flex;
+    gap: 16px;
+    align-items: flex-start;
+  }
+
+  .doc-deep-title > svg {
+    width: 30px;
+    height: 30px;
+    color: #2563eb;
+  }
+
+  .doc-deep-title h3 {
+    margin: 0;
+    font-size: 30px;
+  }
+
+  .doc-deep-title p {
+    margin: 10px 0 0;
+    color: #5f6571;
+    line-height: 1.7;
+  }
+
+  .doc-deep-panel ul {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 12px;
+    margin: 24px 0 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .doc-deep-panel li {
+    border-left: 2px solid #2563eb;
+    background: rgba(239, 246, 255, 0.7);
+    padding: 12px 14px;
+    color: #303642;
+    line-height: 1.65;
+  }
+
+  .doc-code-callout {
+    display: inline-flex;
+    margin-top: 22px;
+    padding: 9px 11px;
+  }
+
+  .doc-product-map > * {
+    max-width: 1184px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .doc-map-layout {
+    display: grid;
+    grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
+    gap: 18px;
+  }
+
+  .doc-coordinate {
+    position: relative;
+    min-height: 520px;
+    border: 1px solid rgba(15, 23, 42, 0.16);
+    border-radius: 12px;
+    background:
+      linear-gradient(90deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
+      linear-gradient(0deg, rgba(15, 23, 42, 0.06) 1px, transparent 1px),
+      #ffffff;
+    background-size: 72px 72px;
+    overflow: hidden;
+  }
+
+  .doc-grid-lines {
+    position: absolute;
+    inset: 54px 54px 58px 70px;
+    border-left: 2px solid #16181d;
+    border-bottom: 2px solid #16181d;
+  }
+
+  .doc-grid-lines::before,
+  .doc-grid-lines::after {
+    position: absolute;
+    color: #7a8290;
+    font-size: 12px;
+  }
+
+  .doc-grid-lines::before {
+    content: "低";
+    left: -30px;
+    bottom: -7px;
+  }
+
+  .doc-grid-lines::after {
+    content: "高";
+    right: -10px;
+    bottom: -30px;
+  }
+
+  .doc-axis {
+    position: absolute;
+    z-index: 1;
+    color: #303642;
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  .doc-axis-x {
+    right: 50px;
+    bottom: 22px;
+  }
+
+  .doc-axis-y {
+    top: 62px;
+    left: 20px;
+    writing-mode: vertical-rl;
+  }
+
+  .doc-point {
+    position: absolute;
+    z-index: 2;
+    transform: translate(-50%, 50%);
+    border: 1px solid rgba(22, 24, 29, 0.18);
+    border-radius: 999px;
+    background: #ffffff;
+    padding: 8px 12px;
+    color: #252932;
+    font-size: 12px;
+    font-weight: 700;
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
+    cursor: pointer;
+  }
+
+  .doc-point.is-selected {
+    border-color: #2563eb;
+    background: #2563eb;
+    color: #ffffff;
+  }
+
+  .doc-product-detail {
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+    min-height: 520px;
+    padding: 24px;
+  }
+
+  .doc-product-detail h3 {
+    margin: 0;
+    font-size: 30px;
+  }
+
+  .doc-product-detail p {
+    margin: 14px 0 0;
+    color: #5f6571;
+    line-height: 1.75;
+  }
+
+  .doc-detail-row {
+    display: grid;
+    gap: 8px;
+    border-top: 1px solid rgba(22, 24, 29, 0.12);
+    padding-top: 18px;
+  }
+
+  .doc-detail-row span {
+    color: #7a8290;
+    font-size: 12px;
+  }
+
+  .doc-chip-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+
+  .doc-chip {
+    border: 1px solid rgba(22, 24, 29, 0.12);
+    border-radius: 999px;
+    background: #f4f7fa;
+    padding: 7px 10px;
+    color: #303642;
+    font-size: 12px;
+  }
+
+  .doc-stack-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .doc-stack-item {
+    padding: 22px;
+  }
+
+  .doc-stack-item svg,
+  .doc-skill-notes svg,
+  .doc-reference svg {
+    color: #2563eb;
+  }
+
+  .doc-stack-item h3,
+  .doc-skill-notes h3 {
+    margin: 16px 0 0;
+    font-size: 18px;
+  }
+
+  .doc-stack-item p,
+  .doc-skill-notes p {
+    margin: 10px 0 0;
+    color: #5f6571;
+    line-height: 1.65;
+  }
+
+  .doc-case-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .doc-case {
+    padding: 22px;
+  }
+
+  .doc-case-title {
+    gap: 12px;
+  }
+
+  .doc-case-title h3 {
+    margin: 0;
+    font-size: 20px;
+  }
+
+  .doc-case-title p {
+    margin: 5px 0 0;
+    color: #667080;
+    font-size: 13px;
+  }
+
+  .doc-step-line {
+    display: grid;
+    gap: 8px;
+    margin-top: 22px;
+  }
+
+  .doc-step-line span {
+    border-left: 2px solid #2563eb;
+    padding: 8px 0 8px 12px;
+    color: #303642;
+    font-size: 13px;
+  }
+
+  .doc-output-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 20px;
+  }
+
+  .doc-output-list span {
+    border-radius: 6px;
+    background: #eff6ff;
+    padding: 6px 9px;
+    color: #1d4ed8;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+
+  .doc-skill-layout {
+    display: grid;
+    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr);
+    gap: 18px;
+  }
+
+  .doc-runtime-trace {
+    max-width: none;
+    background: #eef3f7;
+  }
+
+  .doc-runtime-trace > * {
+    max-width: 1184px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .doc-trace-list {
+    display: grid;
+    gap: 10px;
+  }
+
+  .doc-trace-item {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(220px, 0.56fr);
+    gap: 18px;
+    align-items: center;
+    padding: 16px 18px;
+  }
+
+  .doc-trace-item strong {
+    color: #16181d;
+    font-size: 16px;
+  }
+
+  .doc-trace-item p {
+    margin: 6px 0 0;
+    color: #5f6571;
+    line-height: 1.6;
+  }
+
+  .doc-trace-item code {
+    padding: 9px 10px;
+    white-space: normal;
+  }
+
+  .doc-file-tree {
+    display: grid;
+    gap: 10px;
+    padding: 24px;
+    color: #27303d;
+    font-family: var(--font-mono);
+    font-size: 13px;
+  }
+
+  .doc-file-tree div {
+    font-weight: 800;
+  }
+
+  .doc-file-tree span {
+    color: #4f5663;
+  }
+
+  .doc-file-tree strong {
+    color: #2563eb;
+    font-weight: 600;
+  }
+
+  .doc-skill-notes {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 14px;
+  }
+
+  .doc-skill-notes > div {
+    padding: 22px;
+  }
+
+  .doc-comparison {
+    max-width: none;
+    background: #16181d;
+    color: #ffffff;
+  }
+
+  .doc-comparison > * {
+    max-width: 1184px;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  .doc-comparison .doc-section-heading p:not(.doc-kicker) {
+    color: #bec5d0;
+  }
+
+  .doc-table {
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    border-radius: 12px;
+  }
+
+  .doc-table-head,
+  .doc-table-row {
+    display: grid;
+    grid-template-columns: 0.55fr 1fr 1fr;
+  }
+
+  .doc-table-head span,
+  .doc-table-row > * {
+    padding: 18px;
+  }
+
+  .doc-table-head {
+    background: rgba(255, 255, 255, 0.08);
+    color: #dbe4f0;
+    font-size: 13px;
+    font-weight: 700;
+  }
+
+  .doc-table-row {
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .doc-table-row strong {
+    color: #ffffff;
+  }
+
+  .doc-table-row p {
+    margin: 0;
+    color: #c7ceda;
+    line-height: 1.65;
+  }
+
+  .doc-arch-grid {
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    gap: 12px;
+  }
+
+  .doc-arch-node {
+    display: grid;
+    min-height: 110px;
+    place-items: center;
+    border: 1px solid rgba(22, 24, 29, 0.12);
+    border-radius: 10px;
+    background: #ffffff;
+    padding: 16px;
+    text-align: center;
+    font-weight: 700;
+  }
+
+  .doc-arch-node.is-agent {
+    grid-column: span 2;
+    background: #2563eb;
+    color: #ffffff;
+  }
+
+  .doc-arch-node.is-agent svg {
+    margin-bottom: 8px;
+  }
+
+  .doc-arch-node.is-user,
+  .doc-arch-node.is-output {
+    background: #fef3c7;
+  }
+
+  .doc-reference-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .doc-reference {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 10px;
+    padding: 20px;
+  }
+
+  .doc-reference span {
+    font-weight: 800;
+  }
+
+  .doc-reference p {
+    margin: 0;
+    color: #5f6571;
+    line-height: 1.6;
+  }
+
+  .doc-footer {
+    justify-content: center;
+    gap: 10px;
+    border-top: 1px solid rgba(22, 24, 29, 0.1);
+    padding: 28px;
+    color: #5f6571;
+    font-size: 14px;
+  }
+
+  @media (max-width: 980px) {
+    .doc-nav {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .doc-hero-grid,
+    .doc-map-layout,
+    .doc-skill-layout,
+    .doc-memory-layout,
+    .doc-memory-detail,
+    .doc-deep-layout {
+      grid-template-columns: 1fr;
+    }
+
+    .doc-pain-grid,
+    .doc-stack-grid,
+    .doc-case-grid,
+    .doc-skill-notes,
+    .doc-reference-grid {
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+    }
+
+    .doc-coordinate,
+    .doc-product-detail {
+      min-height: 440px;
+    }
+
+    .doc-deep-panel ul,
+    .doc-trace-item {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  @media (max-width: 680px) {
+    .doc-nav-links {
+      display: none;
+    }
+
+    .doc-hero-grid,
+    .doc-section {
+      padding-left: 18px;
+      padding-right: 18px;
+    }
+
+    .doc-pain-grid,
+    .doc-stack-grid,
+    .doc-case-grid,
+    .doc-skill-notes,
+    .doc-reference-grid,
+    .doc-arch-grid {
+      grid-template-columns: 1fr;
+    }
+
+    .doc-table-head {
+      display: none;
+    }
+
+    .doc-table-row {
+      grid-template-columns: 1fr;
+    }
+
+    .doc-table-row > * {
+      padding: 14px 16px;
+    }
+
+    .doc-coordinate {
+      min-height: 380px;
+    }
+
+    .doc-memory-pipeline > div {
+      grid-template-columns: 28px 1fr;
+    }
+
+    .doc-memory-pipeline span {
+      grid-column: 2;
+    }
+
+    .doc-point {
+      max-width: 112px;
+      padding: 7px 9px;
+      font-size: 11px;
+      white-space: normal;
+    }
+  }