feat: publish long-context deep dive

PROGRESS.md

@@ -7,11 +7,12 @@
 | 工作流 | 状态 | 完成度 | 下一检查点 |
 |---|---:|---:|---|
 | 研究框架与规范 | 进行中 | 72% | 给 125 篇索引补充逐篇精读层级 |
-| 网站设计系统 | 进行中 | 86% | 打印样式与更多通用可视化组件 |
+| 网站设计系统 | 进行中 | 89% | 打印样式与更多通用可视化组件 |
 | Kimi K3 深读 | 进行中 | 55% | 扩写 scaling / infra 逐图笔记 |
 | Transformer 基础 | 进行中 | 52% | 矩阵形状动画与手算练习 |
-| DeepSeek 专题 | 进行中 | 54% | MLA 与 GRPO 完整公式推导 |
-| 引用与事实检查 | 进行中 | 48% | 自动化外链复查与来源等级扩展 |
+| DeepSeek 专题 | 进行中 | 61% | GRPO 完整公式与训练轨迹推导 |
+| 长上下文专题 | 完成首版 | 72% | 真实模型配置、内核细节与失败案例 |
+| 引用与事实检查 | 进行中 | 54% | 自动化外链复查与来源等级扩展 |
 | 开源仓库 | 已完成首版 | 100% | 持续提交研究与网站迭代 |
 | k1412 部署 | 已完成首版 | 100% | 每轮发布保留不可变镜像与回滚点 |
 
@@ -26,17 +27,19 @@
 - [x] 使用 Grok CLI 检索并形成约 95 篇一手论文的补充路线，主代理已回查关键来源。
 - [x] 完成首批 125 篇关键论文索引，覆盖 12 个专题与 Kimi/DeepSeek 聚光主线。
 - [x] 完成可检索、可按专题筛选的论文库页面。
-- [x] 完成 K3、Transformer 基础与 DeepSeek 三篇首版长文。
-- [x] 完成 K3 三轴架构、Self-Attention 实验与 DeepSeek 谱系三张原创交互图。
-- [x] Astro 类型检查、生产构建、7 个内部路由和桌面/移动端视觉检查通过。
+- [x] 完成 K3、Transformer 基础、DeepSeek 谱系与长上下文四篇首版长文。
+- [x] 完成 K3 三轴架构、Self-Attention 实验、DeepSeek 谱系与长上下文成本实验室四张原创交互图。
+- [x] 完成长上下文首版：五张成本账、26 篇一手论文、10+ 机制图与 8 策略交互实验室。
+- [x] 核验 FlashAttention、DeepSeek-V2/V3.2/V4、Kimi Linear/K3 等六份论文原文，并建立长上下文研究账本。
+- [x] Astro 类型检查、生产构建、8 个内部路由和桌面/移动端视觉检查通过。
 - [x] 创建 `wuyang/llm-atlas` 公开仓库，匿名 API 确认 `private: false`。
-- [x] 本地生产镜像通过健康检查与全部 7 个页面路由烟雾测试。
+- [x] 本地生产镜像通过健康检查与全部 8 个页面路由烟雾测试。
 - [x] 通过 Unraid Compose Manager、Nginx Proxy Manager 与 HTTPS 发布首版。
 
 ## 正在进行
 
-- [ ] 长上下文 / 高效注意力专题深度正文。
 - [ ] MoE 路由模拟器与通信成本账本。
+- [ ] 长上下文专题的真实模型配置对比、内核细节与失败案例二轮深化。
 
 ## 研究账本
 
@@ -49,6 +52,8 @@
 | 2026-07-28 | 首批论文库收录 125 篇，按问题与专题多标签组织 | 论文库承担发现入口，专题正文承担深度精读与机制复核 |
 | 2026-07-28 | 源码公开到 `git.k1412.top/wuyang/llm-atlas` | 路线、进度、研究方法和内容变更均可追踪 |
 | 2026-07-28 | 站点使用不可变镜像与 Compose Manager 部署 | 每次发布保留明确版本、健康检查和回滚点 |
+| 2026-07-28 | 长上下文按计算、缓存、位置、状态容量、系统五张账单组织 | 避免把 FlashAttention、位置外推和“记住更久”混成同一个问题 |
+| 2026-07-28 | 交互缓存数字统一标记为教学估算 | 展示增长规律，不冒充任一模型的真实线上显存基准 |
 
 ## 未决问题
 

README.md

@@ -18,7 +18,8 @@
 - 证据与写作规范：[research/METHODOLOGY.md](./research/METHODOLOGY.md)
 
 首个里程碑包含 16 专题学习地图、125 篇关键论文索引、Kimi K3 完整导读、
-Transformer 基础、DeepSeek 技术谱系，以及三张原创交互可视化。其余专题按进度账本持续扩建。
+Transformer 基础、DeepSeek 技术谱系、长上下文与高效注意力深度专题，以及四张原创交互可视化。
+其余专题按进度账本持续扩建。
 
 ## 本地开发
 

ROADMAP.md

@@ -49,6 +49,9 @@ Conditional Computation → Sparsely-Gated MoE → GShard/Switch → DeepSeekMoE
 
 稀疏注意力、线性注意力、FlashAttention、MQA/GQA、MLA、状态空间模型、Delta Rule、Kimi Linear/KDA、混合注意力与 1M 上下文。
 
+首版已发布：以“计算、缓存、位置、状态容量、系统”五张账单串起 2019–2026 的 26 篇一手论文，
+包含 10+ 张原创机制图和 Full MHA / Flash / GQA / MLA / DSA / KDA / K3 / DeepSeek-V4 交互比较实验。
+
 ### 08. 大规模训练系统
 
 数据/张量/流水线/序列/上下文/专家并行，ZeRO，Megatron，通信重叠，容错；对比 DeepSeek DualPipe/DeepEP 与 K3 MoonEP。

research/LONG_CONTEXT_RESEARCH.md

@@ -0,0 +1,99 @@
+# 长上下文与高效注意力：研究账本
+
+最后核验：2026-07-28
+
+## 研究问题
+
+“上下文窗口变长”至少包含五个彼此独立的问题：
+
+1. **二次计算**：标准 softmax attention 的配对计算随序列长度平方增长。
+2. **KV Cache**：自回归推理需要为历史 Token 保存逐层 K/V，缓存宽度和序列长度共同决定显存。
+3. **位置外推**：能接受更长输入不等于能在训练长度之外正确使用位置。
+4. **有限状态表达**：线性注意力或 SSM 用固定状态压缩历史，获得常数缓存，也因此存在容量上限。
+5. **系统实现**：单算子变快以后，跨设备序列切分、状态传递、前缀缓存和请求调度仍可能成为瓶颈。
+
+正文必须分别记账，不能把“更省显存”“更少 FLOPs”“更快墙钟时间”和“更强长程检索”混成一个“高效”。
+
+## 已核验的一手来源
+
+本地只读研究缓存位于 `research/sources/long-context/`，PDF 与抽取文本不进入 Git。
+
+| 论文 | 本地原文 | 本轮核验重点 |
+|---|---:|---|
+| FlashAttention (2205.14135) | 34 页 | exact attention；减少 HBM IO；仍有二次算术，反向重算甚至增加 FLOPs |
+| DeepSeek-V2 (2405.04434) | 52 页 | MLA 低秩联合 KV 压缩、权重吸收、decoupled RoPE、缓存维度 |
+| Gated DeltaNet (2412.06464) | 22 页 | delta rule 与 scalar gate 的组合 |
+| Kimi Linear (2510.26692) | 28 页 | KDA、3:1 KDA/MLA、NoPE、混合比例消融、1M 解码实验 |
+| DeepSeek-V3.2 (2512.02556) | 23 页 | Lightning Indexer、top-k=2048、两阶段稀疏训练 |
+| DeepSeek-V4 (2606.19348) | 58 页 | CSA/HCA、压缩率、top-k、局部窗口、Partial RoPE、1M 成本 |
+| Kimi K3 (2607.24653) | 47 页 | 69 KDA + 24 Gated MLA、NoPE、1M curriculum、FlashKDA/KCP/服务 |
+
+辅助检索使用 Grok CLI Headless 模式扩大覆盖；正文数字只采纳上述论文、arXiv 元数据或作者官方仓库能够回查的内容。
+
+## 关键事实与边界
+
+### FlashAttention
+
+- 它是 **IO-aware exact attention**，不是近似注意力。
+- 它不把完整 `N × N` attention matrix 写入 HBM，使用分块和 online softmax 在 SRAM 中累计。
+- 理论 attention 算术仍为二次；论文明确说明反向重算会增加 FLOPs。
+- 论文报告的 `7.6×` 是 GPT-2 上 attention kernel 的加速，不应写成所有模型端到端都快 7.6×。
+- 同文端到端数字包括 GPT-2 约 `3×`、Long Range Arena 约 `2.4×`，必须带实验语境。
+
+### MQA / GQA / MLA
+
+- MQA/GQA 缩小 **KV 头数**，历史 Token 数仍是 `L`。
+- MLA 为每个 Token 缓存联合低秩 latent `c_t^KV`，内容 K/V 的 up-projection 可分别吸收到 Query 与输出投影。
+- 如果直接对内容 Key 使用 RoPE，位置相关旋转矩阵会阻断权重吸收。因此 DeepSeek-V2 用单独的 RoPE Query/共享 Key 分支。
+- DeepSeek-V2 的缓存为每层每 Token `(d_c + d_h^R)` 个元素；报告配置为 `d_c=512`、`d_h^R=64`。
+- `KV Cache −93.3%` 与 `最大生成吞吐 5.76×` 是相对 DeepSeek 67B 的整模型报告数字，不是 MLA 对所有 MHA 的普适常数。
+
+### 线性注意力、Delta Rule 与 KDA
+
+- 核化线性注意力把历史压进固定矩阵状态，解码缓存不再随 `L` 增长。
+- 固定状态不是无损的全历史表；精确检索和多关系绑定会受有限容量约束。
+- Delta Rule 先擦除状态中与当前 Key 对齐的旧预测，再写入 Key—Value 关系。
+- Gated DeltaNet 加入遗忘 gate；KDA 进一步把 gate 细化到 Key 通道。
+- Kimi Linear 的原文消融支持 `3 KDA : 1 MLA`：训练/验证 PPL 为 `9.23 / 5.65`，优于测试的 `0:1、1:1、7:1、15:1`。
+- Kimi Linear 报告同时区分了约 `2.3×` 的单请求 1M 解码加速和通过缓存节省扩大 batch 后最高约 `6.3×` 的理论吞吐；正文不可混写。
+
+### DeepSeek Sparse / Compressed Attention
+
+- DeepSeek-V3.2 的 DSA 用 Lightning Indexer 为主 MLA 选择历史 Token；主 attention 每 Query 选择 `2048` 个 KV。
+- Indexer 先在 dense attention 下单独训练 `2.1B` Token，再与主模型稀疏续训 `943.7B` Token。
+- V3.2 窗口是 `128K`，不是 `1M`。
+- DeepSeek-V4 的 CSA 先每 `m=4` 个历史条目压成一个，再稀疏选择；V4-Flash top-k 为 `512`，V4-Pro 为 `1024`。
+- HCA 每 `m'=128` 个条目压成一个，不再做稀疏选择。
+- 两者都增加 `128` Token 的未压缩滑窗分支，并只在向量末 `64` 维使用 Partial RoPE。
+- V4-Pro 为 `61` 层、`1.6T/49B activated`；V4-Flash 为 `43` 层、`284B/13B activated`。
+- 在 1M 语境下，报告给出 V4-Pro 相对 V3.2 的单 Token FLOPs `27%`、KV Cache `10%`；V4-Flash 分别为 `10%` 和 `7%`。
+
+### Kimi K3
+
+- K3 的 93 个主干层由 `69 KDA + 24 Gated MLA` 构成；基本节奏是三层 KDA 后一层 MLA，并以 MLA 收尾。
+- 全部 MLA 使用 NoPE。位置和近因偏置主要由 KDA 的递归 gate/decay 提供，MLA 专注全局内容寻址。
+- 上下文 curriculum：预训练从 `8K → 64K`，cooldown 从 `256K → 1M`。
+- KDA 用固定大小状态替代增长 KV；24 个 MLA 层仍保留随长度增长的压缩缓存，所以 K3 不是“完全无 KV Cache”。
+- 系统侧必须同时阅读 FlashKDA、KDA Context Parallelism、混合 KDA/MLA prefix cache、外置 KV Pool 和 cache-aware scheduling。
+
+## 因果主线
+
+```text
+全连接注意力
+├─ 计算太重：局部/稀疏 → Flash(IO) → DSA → CSA/HCA
+├─ 缓存太宽：MQA → GQA → MLA
+├─ 位置外推：相对位置 → RoPE/ALiBi → PI/YaRN → NoPE+递归位置
+├─ 历史太长：线性 attention → fast weight → DeltaNet/GDN → KDA
+└─ 单卡装不下：Transformer-XL → Ring/Context Parallel → KCP/服务缓存
+
+汇流：
+Kimi K3 = 3×固定状态 KDA + 1×NoPE 全局 MLA + KDA 系统协同
+DeepSeek-V4 = CSA 压缩后稀疏 + HCA 重压缩后稠密 + 局部窗口
+```
+
+## 正文的证据标注
+
+- `论文事实`：公式、结构或数字可在对应原文定位。
+- `教学估算`：用统一假设计算的 KV/状态大小，不等于作者报告的生产显存。
+- `机制推断`：从公开结构推出的代价或能力边界，必须明确写“推断”。
+- `未知`：训练数据配比、未公开 kernel 细节和线上集群参数不猜测。

src/components/ContextStrategyLab.astro

@@ -0,0 +1,981 @@
+---
+const strategies = [
+  {
+    id: "mha",
+    label: "Full MHA",
+    kicker: "全连接 · 全缓存",
+    summary: "每个 Query 精确比较全部历史 Token；每层为每个历史 Token 保存所有 KV 头。",
+    solves: "表达力基线",
+    leaves: "二次计算 + 最宽 KV",
+  },
+  {
+    id: "flash",
+    label: "Flash",
+    kicker: "全连接 · IO 优化",
+    summary: "连接关系与 Full MHA 完全相同，只是不再把完整注意力矩阵写进 HBM。",
+    solves: "显存读写与中间矩阵",
+    leaves: "理论 FLOPs 仍为二次",
+  },
+  {
+    id: "gqa",
+    label: "GQA",
+    kicker: "全连接 · 共享 KV",
+    summary: "Query 头仍可很多，但一组 Query 共享一组 K/V；历史条目不减少，缓存宽度变窄。",
+    solves: "KV 头数",
+    leaves: "序列仍逐 Token 增长",
+  },
+  {
+    id: "mla",
+    label: "MLA",
+    kicker: "全连接 · 潜变量 KV",
+    summary: "每个历史 Token 只缓存低维联合 latent；通过权重吸收避免在解码时展开完整多头 K/V。",
+    solves: "每 Token KV 宽度",
+    leaves: "全局两两计算仍在",
+  },
+  {
+    id: "dsa",
+    label: "DSA",
+    kicker: "索引 · Top-k 稀疏",
+    summary: "轻量 Indexer 从全部 latent KV 中选出少量候选，再让主注意力只读这些候选。",
+    solves: "主注意力连接数",
+    leaves: "仍需索引和保存历史 latent",
+  },
+  {
+    id: "kda",
+    label: "KDA",
+    kicker: "递推 · 固定状态",
+    summary: "历史被持续写入固定矩阵状态；Delta Rule 擦除旧关联，通道 gate 控制遗忘。",
+    solves: "长度相关 KV 与二次配对",
+    leaves: "有限状态容量",
+  },
+  {
+    id: "k3",
+    label: "K3 Hybrid",
+    kicker: "3×KDA + 1×MLA",
+    summary: "三层用固定状态做廉价混合，每四层用一次 NoPE MLA 重新获得全局内容寻址。",
+    solves: "效率与全局表达折中",
+    leaves: "MLA 层仍有增长缓存",
+  },
+  {
+    id: "v4",
+    label: "V4 Hybrid",
+    kicker: "CSA ↔ HCA",
+    summary: "CSA 先 4:1 压缩再 Top-k；HCA 128:1 重压缩后读全部，并都保留局部滑窗。",
+    solves: "序列维缓存与连接数",
+    leaves: "压缩有损且系统复杂",
+  },
+];
+
+const size = 20;
+const matrix = Array.from({ length: size * size }, (_, index) => ({
+  row: Math.floor(index / size),
+  col: index % size,
+}));
+
+const contexts = [
+  { label: "4K", value: 4096 },
+  { label: "32K", value: 32768 },
+  { label: "128K", value: 131072 },
+  { label: "1M", value: 1048576 },
+];
+---
+
+<section class="context-lab" data-context-lab>
+  <div class="lab-head">
+    <div>
+      <p class="lab-kicker">INTERACTIVE / ATTENTION STRATEGY LAB</p>
+      <h3>“支持长上下文”到底改了哪一笔账？</h3>
+    </div>
+    <p>
+      上半区看信息连接，下半区看缓存。切换方法时，注意“连接变少”和“缓存变窄”不是一回事。
+    </p>
+  </div>
+
+  <div class="strategy-tabs" role="tablist" aria-label="选择注意力策略">
+    {strategies.map((strategy, index) => (
+      <button
+        type="button"
+        role="tab"
+        data-strategy-button={strategy.id}
+        aria-selected={index === 0 ? "true" : "false"}
+      >
+        <b>{strategy.label}</b>
+        <span>{strategy.kicker}</span>
+      </button>
+    ))}
+  </div>
+
+  <div class="lab-stage">
+    <div class="pattern-panel">
+      <div class="panel-label">
+        <span>01 / INFORMATION ACCESS</span>
+        <b id="pattern-title">FULL MHA · 因果全连接</b>
+      </div>
+
+      <div class="matrix-wrap">
+        <div class="matrix-axis y"><span>QUERY</span></div>
+        <div class="attention-matrix" aria-label="简化的因果注意力连接矩阵">
+          {matrix.map(({ row, col }) => (
+            <i data-cell data-row={row} data-col={col} aria-hidden="true"></i>
+          ))}
+          <div class="state-memory" data-state-memory>
+            <span>FIXED STATE</span>
+            <b>S<sub>t</sub></b>
+            <small>历史被压进固定矩阵，不再保留逐 Token 地址</small>
+          </div>
+        </div>
+        <div class="matrix-axis x"><span>HISTORICAL KEY / VALUE</span></div>
+      </div>
+
+      <label class="query-control">
+        <span>观察第几个 Query</span>
+        <input data-query type="range" min="0" max={size - 1} value={size - 1} />
+        <output data-query-output>{size}</output>
+      </label>
+
+      <div class="pattern-legend">
+        <div><i class="strong"></i><span>主算子直接读取</span></div>
+        <div><i class="soft"></i><span>压缩/全局补充路径</span></div>
+        <div><i class="local"></i><span>局部窗口</span></div>
+      </div>
+    </div>
+
+    <div class="strategy-story">
+      {strategies.map((strategy, index) => (
+        <article data-strategy-story={strategy.id} hidden={index !== 0}>
+          <span>{strategy.kicker}</span>
+          <h3>{strategy.label}</h3>
+          <p>{strategy.summary}</p>
+          <dl>
+            <div><dt>主要解决</dt><dd>{strategy.solves}</dd></div>
+            <div><dt>仍然留下</dt><dd>{strategy.leaves}</dd></div>
+          </dl>
+        </article>
+      ))}
+      <div class="matrix-note">
+        <b>怎样读这张图</b>
+        <p>
+          横轴是可被读取的历史，纵轴是当前 Query。图只画 20 个位置，展示的是连接模式，不代表论文真实头数或窗口大小。
+        </p>
+      </div>
+    </div>
+  </div>
+
+  <div class="budget-panel">
+    <div class="budget-controls">
+      <div>
+        <p class="panel-kicker">02 / CACHE BUDGET</p>
+        <h3>把上下文拖到一百万 Token</h3>
+        <p>
+          统一教学模型：64 层、64 个 Query 头、head dim 128、BF16、GQA 8 个 KV 头、MLA latent 576。
+          数字用于比较增长规律，不是任何具体模型的线上显存报告。
+        </p>
+      </div>
+
+      <div class="context-control">
+        <div class="context-readout">
+          <span>CONTEXT LENGTH</span>
+          <strong data-context-label>4K</strong>
+          <small data-context-exact>4,096 tokens</small>
+        </div>
+        <input data-context type="range" min="0" max={contexts.length - 1} value="0" step="1" />
+        <div class="range-labels">
+          {contexts.map((context) => <span>{context.label}</span>)}
+        </div>
+      </div>
+    </div>
+
+    <div class="budget-summary">
+      <article>
+        <span>当前策略估算缓存</span>
+        <b data-cache-value>8.00 GB</b>
+        <small data-cache-note>逐 Token、逐层、全头 K/V</small>
+      </article>
+      <article>
+        <span>每 Query 直接读取</span>
+        <b data-access-value>4,096</b>
+        <small data-access-note>全部历史位置</small>
+      </article>
+      <article>
+        <span>随长度增长</span>
+        <b data-growth-value>线性 KV</b>
+        <small data-growth-note>注意力计算仍是二次</small>
+      </article>
+    </div>
+
+    <div class="budget-bars" aria-label="不同注意力机制的教学缓存估算">
+      {strategies.map((strategy) => (
+        <div data-budget-row={strategy.id}>
+          <span>{strategy.label}</span>
+          <div><i data-budget-bar={strategy.id}></i></div>
+          <b data-budget-value={strategy.id}>—</b>
+        </div>
+      ))}
+    </div>
+
+    <div class="budget-caveat">
+      <span>ESTIMATE, NOT BENCHMARK</span>
+      <p>
+        KDA 行只计算固定递推状态；K3 行按 3:1 层比叠加 KDA 状态与 MLA latent；
+        V4 行用 1:1 CSA/HCA、4×/128×压缩和 128 局部窗口做结构估算，未计 Indexer、未压缩尾部、分页和框架开销。
+      </p>
+    </div>
+  </div>
+
+  <script is:inline define:vars={{ contexts }}>
+    const root = document.querySelector("[data-context-lab]");
+    if (root) {
+      const buttons = [...root.querySelectorAll("[data-strategy-button]")];
+      const stories = [...root.querySelectorAll("[data-strategy-story]")];
+      const cells = [...root.querySelectorAll("[data-cell]")];
+      const queryInput = root.querySelector("[data-query]");
+      const queryOutput = root.querySelector("[data-query-output]");
+      const contextInput = root.querySelector("[data-context]");
+      const stateMemory = root.querySelector("[data-state-memory]");
+      let active = "mha";
+
+      const assumptions = {
+        layers: 64,
+        heads: 64,
+        kvHeads: 8,
+        headDim: 128,
+        latent: 576,
+        bytes: 2,
+      };
+
+      const formatBytes = (bytes) => {
+        const units = ["B", "KB", "MB", "GB", "TB"];
+        let value = bytes;
+        let unit = 0;
+        while (value >= 1024 && unit < units.length - 1) {
+          value /= 1024;
+          unit += 1;
+        }
+        const digits = value >= 100 ? 0 : value >= 10 ? 1 : 2;
+        return `${value.toFixed(digits)} ${units[unit]}`;
+      };
+
+      const formatCount = (value) => new Intl.NumberFormat("zh-CN").format(Math.round(value));
+
+      const cacheFor = (id, length) => {
+        const { layers, heads, kvHeads, headDim, latent, bytes } = assumptions;
+        const mha = 2 * length * layers * heads * headDim * bytes;
+        if (id === "mha" || id === "flash") return mha;
+        if (id === "gqa") return 2 * length * layers * kvHeads * headDim * bytes;
+        if (id === "mla" || id === "dsa") return length * layers * latent * bytes;
+        if (id === "kda") return layers * heads * headDim * headDim * bytes;
+        if (id === "k3") {
+          const kdaLayers = Math.round(layers * 0.75);
+          const mlaLayers = layers - kdaLayers;
+          const state = kdaLayers * heads * headDim * headDim * bytes;
+          const mlaCache = length * mlaLayers * latent * bytes;
+          return state + mlaCache;
+        }
+        if (id === "v4") {
+          const csaLayers = layers / 2;
+          const hcaLayers = layers / 2;
+          const window = Math.min(length, 128);
+          const csaEntries = Math.ceil(length / 4) + window;
+          const hcaEntries = Math.ceil(length / 128) + window;
+          return (csaLayers * csaEntries + hcaLayers * hcaEntries) * headDim * bytes;
+        }
+        return mha;
+      };
+
+      const accessFor = (id, length) => {
+        if (["mha", "flash", "gqa", "mla"].includes(id)) {
+          return { value: formatCount(length), note: "全部历史位置" };
+        }
+        if (id === "dsa") {
+          return { value: formatCount(Math.min(length, 2048)), note: "主注意力 Top-k；另有轻量索引" };
+        }
+        if (id === "kda") {
+          return { value: "固定状态", note: "不再逐 Token 内容寻址" };
+        }
+        if (id === "k3") {
+          return { value: "3×状态 + 1×全局", note: "沿深度周期性交替" };
+        }
+        const csa = Math.min(Math.ceil(length / 4), 1024) + Math.min(length, 128);
+        const hca = Math.ceil(length / 128) + Math.min(length, 128);
+        return { value: `${formatCount(csa)} / ${formatCount(hca)}`, note: "CSA / HCA 结构估算" };
+      };
+
+      const metaFor = (id) => {
+        const meta = {
+          mha: ["逐 Token、逐层、全头 K/V", "线性 KV", "注意力计算为二次"],
+          flash: ["缓存同 Full MHA；省的是中间矩阵", "线性 KV", "FLOPs 仍二次，HBM IO 更少"],
+          gqa: ["逐 Token、逐层、8 组 KV", "线性薄 KV", "连接数仍是全局"],
+          mla: ["逐 Token、逐层、576 维 latent", "线性 latent", "权重吸收不等于稀疏"],
+          dsa: ["保存全部 latent，主 attention 只读 Top-k", "线性 latent", "主连接约 O(Lk)"],
+          kda: ["每层每头一个 128×128 状态", "固定状态", "容量不随 L 增长"],
+          k3: ["3/4 固定状态 + 1/4 latent KV", "混合增长", "全局层缓存仍随 L 增长"],
+          v4: ["压缩 KV + 128 Token 局部窗口", "压缩线性", "CSA 稀疏，HCA 重压缩"],
+        };
+        return meta[id];
+      };
+
+      const updateMatrix = () => {
+        const query = Number(queryInput?.value ?? 19);
+        if (queryOutput) queryOutput.textContent = String(query + 1);
+        stateMemory?.toggleAttribute("data-visible", active === "kda" || active === "k3");
+
+        cells.forEach((cell) => {
+          const row = Number(cell.dataset.row);
+          const col = Number(cell.dataset.col);
+          const causal = col <= row;
+          const current = row === query;
+          let strength = "off";
+
+          if (causal && ["mha", "flash", "gqa", "mla"].includes(active)) strength = "strong";
+          if (causal && active === "dsa") {
+            const local = row - col <= 3;
+            const indexed = col === 0 || (col + row) % 5 === 1;
+            strength = local ? "local" : indexed ? "strong" : "off";
+          }
+          if (causal && active === "kda") strength = "state";
+          if (causal && active === "k3") {
+            const local = row - col <= 2;
+            strength = local ? "local" : "soft";
+          }
+          if (causal && active === "v4") {
+            const local = row - col <= 3;
+            const compressed = col % 4 === 0 || col === 0;
+            strength = local ? "local" : compressed ? "strong" : "soft";
+          }
+
+          cell.dataset.strength = strength;
+          cell.toggleAttribute("data-query-row", current);
+        });
+
+        const titles = {
+          mha: "FULL MHA · 因果全连接",
+          flash: "FLASH · 连接不变，只改变 IO",
+          gqa: "GQA · 全连接，共享 K/V",
+          mla: "MLA · 全连接，缓存潜变量",
+          dsa: "DSA · Indexer 选择稀疏历史",
+          kda: "KDA · 读取固定递推状态",
+          k3: "K3 · 固定状态与全局层交替",
+          v4: "V4 · 压缩、稀疏与局部窗口",
+        };
+        const title = root.querySelector("#pattern-title");
+        if (title) title.textContent = titles[active];
+      };
+
+      const updateBudget = () => {
+        const contextIndex = Number(contextInput?.value ?? 0);
+        const selected = contexts[contextIndex];
+        const length = selected.value;
+        const mhaCache = cacheFor("mha", length);
+
+        root.querySelector("[data-context-label]").textContent = selected.label;
+        root.querySelector("[data-context-exact]").textContent = `${formatCount(length)} tokens`;
+
+        const currentCache = cacheFor(active, length);
+        root.querySelector("[data-cache-value]").textContent = formatBytes(currentCache);
+        const access = accessFor(active, length);
+        root.querySelector("[data-access-value]").textContent = access.value;
+        root.querySelector("[data-access-note]").textContent = access.note;
+
+        const [cacheNote, growth, growthNote] = metaFor(active);
+        root.querySelector("[data-cache-note]").textContent = cacheNote;
+        root.querySelector("[data-growth-value]").textContent = growth;
+        root.querySelector("[data-growth-note]").textContent = growthNote;
+
+        buttons.forEach((button) => {
+          const id = button.dataset.strategyButton;
+          const bytes = cacheFor(id, length);
+          const ratio = Math.max(0.012, Math.min(1, bytes / mhaCache));
+          const bar = root.querySelector(`[data-budget-bar="${id}"]`);
+          const value = root.querySelector(`[data-budget-value="${id}"]`);
+          if (bar) bar.style.width = `${ratio * 100}%`;
+          if (value) value.textContent = formatBytes(bytes);
+          root.querySelector(`[data-budget-row="${id}"]`)?.toggleAttribute("data-active", id === active);
+        });
+      };
+
+      const select = (id) => {
+        active = id;
+        buttons.forEach((button) => button.setAttribute("aria-selected", String(button.dataset.strategyButton === id)));
+        stories.forEach((story) => {
+          story.hidden = story.dataset.strategyStory !== id;
+        });
+        updateMatrix();
+        updateBudget();
+      };
+
+      buttons.forEach((button) => button.addEventListener("click", () => select(button.dataset.strategyButton)));
+      queryInput?.addEventListener("input", updateMatrix);
+      contextInput?.addEventListener("input", updateBudget);
+      select(active);
+    }
+  </script>
+</section>
+
+<style>
+  .context-lab {
+    margin-block: 56px;
+    border: 1px solid var(--line-strong);
+    background: var(--paper-raised);
+  }
+
+  .lab-head {
+    display: grid;
+    grid-template-columns: 1.25fr 0.75fr;
+    gap: 60px;
+    align-items: end;
+    padding: clamp(28px, 4vw, 52px);
+    border-bottom: 1px solid var(--line);
+  }
+
+  .lab-kicker,
+  .panel-kicker {
+    color: var(--copper);
+    font: 0.62rem/1 var(--mono);
+    letter-spacing: 0.13em;
+  }
+
+  .lab-head h3 {
+    margin-top: 15px;
+    font-size: clamp(1.5rem, 2.5vw, 2.5rem);
+  }
+
+  .lab-head > p {
+    color: var(--muted);
+    font-family: var(--serif);
+    font-size: 0.96rem;
+  }
+
+  .strategy-tabs {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    border-bottom: 1px solid var(--line);
+  }
+
+  .strategy-tabs button {
+    display: grid;
+    gap: 8px;
+    min-width: 0;
+    min-height: 78px;
+    padding: 16px 12px;
+    border: 0;
+    border-right: 1px solid var(--line);
+    background: transparent;
+    color: var(--muted);
+    cursor: pointer;
+    text-align: left;
+  }
+
+  .strategy-tabs button:last-child {
+    border-right: 0;
+  }
+
+  .strategy-tabs button:hover,
+  .strategy-tabs button[aria-selected="true"] {
+    background: var(--ink);
+    color: var(--paper-raised);
+  }
+
+  .strategy-tabs b {
+    font-size: 0.78rem;
+  }
+
+  .strategy-tabs span {
+    font-size: 0.58rem;
+    line-height: 1.35;
+  }
+
+  .lab-stage {
+    display: grid;
+    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.45fr);
+  }
+
+  .pattern-panel {
+    padding: clamp(26px, 4vw, 48px);
+    border-right: 1px solid var(--line);
+  }
+
+  .panel-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 20px;
+    margin-bottom: 30px;
+  }
+
+  .panel-label span {
+    color: var(--muted);
+    font: 0.58rem/1 var(--mono);
+    letter-spacing: 0.1em;
+  }
+
+  .panel-label b {
+    font: 0.68rem/1 var(--mono);
+  }
+
+  .matrix-wrap {
+    display: grid;
+    grid-template-columns: 25px minmax(0, 560px);
+    grid-template-rows: auto 25px;
+    gap: 9px;
+    justify-content: center;
+  }
+
+  .attention-matrix {
+    position: relative;
+    display: grid;
+    grid-template-columns: repeat(20, 1fr);
+    grid-template-rows: repeat(20, 1fr);
+    width: min(100%, 560px);
+    aspect-ratio: 1;
+    padding: 8px;
+    border: 1px solid var(--line-strong);
+    background: var(--paper);
+  }
+
+  [data-cell] {
+    margin: 1px;
+    border-radius: 1px;
+    background: rgba(39, 54, 74, 0.035);
+    transition: background 150ms ease, opacity 150ms ease, transform 150ms ease;
+  }
+
+  [data-cell][data-strength="strong"] {
+    background: var(--ink);
+    opacity: 0.52;
+  }
+
+  [data-cell][data-strength="soft"] {
+    background: var(--violet);
+    opacity: 0.18;
+  }
+
+  [data-cell][data-strength="local"] {
+    background: var(--copper);
+    opacity: 0.7;
+  }
+
+  [data-cell][data-strength="state"] {
+    background: var(--sage);
+    opacity: 0.08;
+  }
+
+  [data-cell][data-query-row] {
+    transform: scale(0.82);
+    opacity: 1;
+  }
+
+  .state-memory {
+    position: absolute;
+    inset: 23% 16%;
+    display: none;
+    place-content: center;
+    padding: 22px;
+    border: 1px solid rgba(85, 122, 114, 0.46);
+    background: color-mix(in srgb, var(--sage-pale) 92%, transparent);
+    text-align: center;
+  }
+
+  .state-memory[data-visible] {
+    display: grid;
+  }
+
+  .state-memory span {
+    color: var(--sage);
+    font: 0.56rem/1 var(--mono);
+    letter-spacing: 0.12em;
+  }
+
+  .state-memory b {
+    margin-top: 12px;
+    font-family: var(--serif);
+    font-size: clamp(2rem, 5vw, 4.5rem);
+    font-weight: 500;
+  }
+
+  .state-memory small {
+    max-width: 260px;
+    margin-top: 12px;
+    color: var(--muted);
+    font-size: 0.68rem;
+  }
+
+  .matrix-axis {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--muted-light);
+    font: 0.5rem/1 var(--mono);
+    letter-spacing: 0.1em;
+  }
+
+  .matrix-axis.y span {
+    writing-mode: vertical-rl;
+    transform: rotate(180deg);
+  }
+
+  .matrix-axis.x {
+    grid-column: 2;
+  }
+
+  .query-control {
+    display: grid;
+    grid-template-columns: auto 1fr 30px;
+    gap: 16px;
+    align-items: center;
+    max-width: 595px;
+    margin: 24px auto 0;
+    color: var(--muted);
+    font-size: 0.68rem;
+  }
+
+  .query-control input,
+  .context-control input {
+    width: 100%;
+    accent-color: var(--copper);
+  }
+
+  .query-control output {
+    font: 0.7rem/1 var(--mono);
+    text-align: right;
+  }
+
+  .pattern-legend {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 20px;
+    margin-top: 22px;
+  }
+
+  .pattern-legend div {
+    display: flex;
+    align-items: center;
+    gap: 7px;
+    color: var(--muted);
+    font-size: 0.62rem;
+  }
+
+  .pattern-legend i {
+    width: 10px;
+    height: 10px;
+  }
+
+  .pattern-legend .strong { background: var(--ink); opacity: 0.55; }
+  .pattern-legend .soft { background: var(--violet); opacity: 0.24; }
+  .pattern-legend .local { background: var(--copper); opacity: 0.7; }
+
+  .strategy-story {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: clamp(28px, 4vw, 46px);
+    background: var(--paper-deep);
+  }
+
+  .strategy-story article > span {
+    color: var(--copper);
+    font: 0.6rem/1 var(--mono);
+    letter-spacing: 0.1em;
+  }
+
+  .strategy-story article h3 {
+    margin-top: 18px;
+    font-family: var(--serif);
+    font-size: 2rem;
+  }
+
+  .strategy-story article p {
+    margin-top: 18px;
+    color: var(--muted);
+    font-family: var(--serif);
+    font-size: 0.93rem;
+  }
+
+  .strategy-story dl {
+    margin: 28px 0 0;
+    border-top: 1px solid var(--line);
+  }
+
+  .strategy-story dl div {
+    padding: 14px 0;
+    border-bottom: 1px solid var(--line);
+  }
+
+  .strategy-story dt {
+    color: var(--muted);
+    font: 0.58rem/1 var(--mono);
+  }
+
+  .strategy-story dd {
+    margin: 7px 0 0;
+    font-size: 0.78rem;
+  }
+
+  .matrix-note {
+    margin-top: 44px;
+    padding-top: 22px;
+    border-top: 1px solid var(--line-strong);
+  }
+
+  .matrix-note b {
+    font-size: 0.73rem;
+  }
+
+  .matrix-note p {
+    margin-top: 8px;
+    color: var(--muted);
+    font-size: 0.68rem;
+  }
+
+  .budget-panel {
+    border-top: 1px solid var(--line-strong);
+  }
+
+  .budget-controls {
+    display: grid;
+    grid-template-columns: 1.1fr 0.9fr;
+    gap: 60px;
+    align-items: end;
+    padding: clamp(30px, 5vw, 60px);
+  }
+
+  .budget-controls h3 {
+    margin-top: 15px;
+    font-size: clamp(1.5rem, 2.5vw, 2.35rem);
+  }
+
+  .budget-controls > div:first-child > p:last-child {
+    max-width: 680px;
+    margin-top: 16px;
+    color: var(--muted);
+    font-size: 0.8rem;
+  }
+
+  .context-readout {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: baseline;
+    padding-bottom: 16px;
+    border-bottom: 1px solid var(--line-strong);
+  }
+
+  .context-readout span {
+    color: var(--muted);
+    font: 0.58rem/1 var(--mono);
+    letter-spacing: 0.1em;
+  }
+
+  .context-readout strong {
+    font: 500 2.2rem/1 var(--serif);
+  }
+
+  .context-readout small {
+    grid-column: 1 / -1;
+    margin-top: 5px;
+    color: var(--muted);
+    font-size: 0.64rem;
+    text-align: right;
+  }
+
+  .context-control input {
+    margin-top: 20px;
+  }
+
+  .range-labels {
+    display: flex;
+    justify-content: space-between;
+    color: var(--muted);
+    font: 0.56rem/1 var(--mono);
+  }
+
+  .budget-summary {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    border-block: 1px solid var(--line);
+  }
+
+  .budget-summary article {
+    min-height: 150px;
+    padding: 27px clamp(22px, 3vw, 40px);
+    border-right: 1px solid var(--line);
+  }
+
+  .budget-summary article:last-child {
+    border-right: 0;
+  }
+
+  .budget-summary span {
+    color: var(--muted);
+    font: 0.58rem/1 var(--mono);
+  }
+
+  .budget-summary b {
+    display: block;
+    margin-top: 22px;
+    font-family: var(--serif);
+    font-size: clamp(1.45rem, 2.3vw, 2.1rem);
+    font-weight: 500;
+  }
+
+  .budget-summary small {
+    display: block;
+    margin-top: 8px;
+    color: var(--muted);
+    font-size: 0.64rem;
+  }
+
+  .budget-bars {
+    padding: 34px clamp(24px, 5vw, 60px);
+  }
+
+  .budget-bars > div {
+    display: grid;
+    grid-template-columns: 110px 1fr 92px;
+    gap: 16px;
+    align-items: center;
+    min-height: 36px;
+    padding-inline: 8px;
+  }
+
+  .budget-bars > div[data-active] {
+    background: var(--paper-deep);
+  }
+
+  .budget-bars span,
+  .budget-bars b {
+    font-size: 0.67rem;
+  }
+
+  .budget-bars b {
+    font-family: var(--mono);
+    font-weight: 500;
+    text-align: right;
+  }
+
+  .budget-bars div > div {
+    height: 7px;
+    background: var(--paper-deep);
+  }
+
+  .budget-bars i {
+    display: block;
+    width: 0;
+    height: 100%;
+    background: var(--sage);
+    transition: width 260ms ease;
+  }
+
+  .budget-bars [data-active] i {
+    background: var(--copper);
+  }
+
+  .budget-caveat {
+    display: grid;
+    grid-template-columns: 190px 1fr;
+    gap: 34px;
+    padding: 24px clamp(24px, 5vw, 60px);
+    border-top: 1px solid var(--line);
+    background: var(--ink);
+    color: var(--paper-raised);
+  }
+
+  .budget-caveat span {
+    color: var(--copper-pale);
+    font: 0.58rem/1.4 var(--mono);
+    letter-spacing: 0.1em;
+  }
+
+  .budget-caveat p {
+    color: rgba(250, 248, 243, 0.72);
+    font-size: 0.67rem;
+    line-height: 1.7;
+  }
+
+  @media (max-width: 980px) {
+    .strategy-tabs {
+      grid-template-columns: repeat(4, 1fr);
+    }
+
+    .strategy-tabs button:nth-child(4) {
+      border-right: 0;
+    }
+
+    .strategy-tabs button:nth-child(-n + 4) {
+      border-bottom: 1px solid var(--line);
+    }
+
+    .lab-stage,
+    .budget-controls {
+      grid-template-columns: 1fr;
+    }
+
+    .pattern-panel {
+      border-right: 0;
+      border-bottom: 1px solid var(--line);
+    }
+  }
+
+  @media (max-width: 680px) {
+    .lab-head {
+      grid-template-columns: 1fr;
+      gap: 20px;
+    }
+
+    .strategy-tabs {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .strategy-tabs button:nth-child(2n) {
+      border-right: 0;
+    }
+
+    .strategy-tabs button:nth-child(n) {
+      border-bottom: 1px solid var(--line);
+    }
+
+    .panel-label {
+      align-items: flex-start;
+      flex-direction: column;
+    }
+
+    .pattern-panel {
+      padding-inline: 16px;
+    }
+
+    .attention-matrix {
+      padding: 4px;
+    }
+
+    [data-cell] {
+      margin: 0.5px;
+    }
+
+    .query-control {
+      grid-template-columns: 1fr 30px;
+    }
+
+    .query-control span {
+      grid-column: 1 / -1;
+    }
+
+    .budget-summary {
+      grid-template-columns: 1fr;
+    }
+
+    .budget-summary article {
+      min-height: 130px;
+      border-right: 0;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .budget-bars > div {
+      grid-template-columns: 82px 1fr 72px;
+      gap: 9px;
+    }
+
+    .budget-caveat {
+      grid-template-columns: 1fr;
+      gap: 10px;
+    }
+  }
+</style>

src/components/SiteFooter.astro

@@ -5,6 +5,7 @@
   </div>
   <div class="footer-links">
     <a href="/roadmap/">学习地图</a>
+    <a href="/long-context/">长上下文专题</a>
     <a href="/progress/">研究进度</a>
     <a href="https://git.k1412.top/wuyang/llm-atlas" rel="noreferrer">开放源码</a>
     <a href="https://github.com/MoonshotAI/Kimi-K3" rel="noreferrer">K3 官方报告</a>

src/components/SiteHeader.astro

@@ -10,6 +10,7 @@ const items = [
   { id: "k3", href: "/k3/", label: "K3 解剖" },
   { id: "deepseek", href: "/deepseek/", label: "DeepSeek" },
   { id: "foundations", href: "/foundations/", label: "基础原理" },
+  { id: "long-context", href: "/long-context/", label: "长上下文" },
   { id: "papers", href: "/papers/", label: "论文库" },
   { id: "progress", href: "/progress/", label: "进度" },
 ];

src/data/chapters.ts

@@ -108,14 +108,14 @@ export const chapters: Chapter[] = [
   },
   {
     number: "07",
-    slug: "architecture/long-context",
+    slug: "long-context",
     title: "长上下文与高效注意力",
     kicker: "LONG CONTEXT",
     question: "从 8K 到 1M Token，真正昂贵的是什么？",
     summary: "比较稀疏/线性注意力、FlashAttention、MLA、状态空间模型、Delta Rule、KDA 与混合注意力。",
-    status: "researching",
-    progress: 31,
-    papers: 24,
+    status: "published",
+    progress: 72,
+    papers: 26,
     prerequisites: ["02", "03"],
     highlights: ["KV Cache", "MLA", "KDA"],
   },

src/pages/deepseek/index.astro

@@ -359,6 +359,10 @@ const toc = [
           这说明长上下文竞争已从单一位置外推转向混合注意力、压缩缓存、残差、优化器和后训练的系统协同。
           它也解释 K3 报告为何把 V4 列为同代开放基础模型对照。
         </p>
+        <p>
+          <a href="/long-context/#hybrids">进入长上下文专题</a>，可以把 V4 的 CSA/HCA 与 K3 的
+          KDA/NoPE MLA 放进同一张“计算—缓存—状态容量”账本逐项比较。
+        </p>
         <div class="warning-note">
           <b>V4 与 K3 不是同一条注意力路线</b>
           <p>
@@ -402,7 +406,8 @@ const toc = [
           <a class="paper-row" href="https://arxiv.org/abs/2606.19348"><time>08</time><b>DeepSeek-V4</b><p>从百万上下文成本倒推 CSA/HCA、mHC 与 Muon。</p></a>
         </div>
         <div class="hero-actions">
-          <a class="button primary" href="/k3/">回到 K3：看这些技术怎样重新组合 →</a>
+          <a class="button primary" href="/long-context/">精读 MLA、DSA、CSA/HCA 与 KDA →</a>
+          <a class="button" href="/k3/">回到 K3</a>
           <a class="button" href="/roadmap/">完整课程地图</a>
         </div>
       </section>

src/pages/index.astro

@@ -7,6 +7,7 @@ import { chapters, statusLabel } from "@/data/chapters";
 const routes: Record<string, string> = {
   roadmap: "/roadmap/",
   foundations: "/foundations/",
+  "long-context": "/long-context/",
 };
 
 const paths = [
@@ -74,6 +75,7 @@ const paths = [
           <a class="button primary" href="/roadmap/">选择学习路径 <span aria-hidden="true">↓</span></a>
           <a class="button" href="/k3/">直接解剖 K3</a>
           <a class="button" href="/deepseek/">DeepSeek 专题</a>
+          <a class="button" href="/long-context/">长上下文专题</a>
         </div>
       </div>
       <aside class="hero-aside" aria-label="项目统计">
@@ -95,6 +97,25 @@ const paths = [
     </div>
   </section>
 
+  <section class="section compact release-section" id="new-long-context">
+    <a class="release-card" href="/long-context/">
+      <div>
+        <p class="eyebrow"><span>NEW / CHAPTER 07</span> LONG CONTEXT</p>
+        <h2>一百万 Token，不是一扇更大的窗</h2>
+        <p>
+          新专题把长上下文拆成计算、缓存、位置、状态容量与系统五张账单，
+          沿 26 篇一手论文走完 FlashAttention、MLA、Delta Rule、KDA、Kimi K3 与 DeepSeek-V4。
+        </p>
+      </div>
+      <dl>
+        <div><dt>LINEAGE</dt><dd>2019 → 2026</dd></div>
+        <div><dt>VISUALS</dt><dd>10+ 机制图</dd></div>
+        <div><dt>LAB</dt><dd>8 种策略 · 4 档长度</dd></div>
+      </dl>
+      <span class="release-arrow" aria-hidden="true">进入专题 →</span>
+    </a>
+  </section>
+
   <section class="section" id="why">
     <div class="section-heading">
       <div>
@@ -295,4 +316,89 @@ const paths = [
       buttons.forEach((button) => button.addEventListener("click", () => select(button.dataset.pathButton ?? "beginner")));
     });
   </script>
+
+  <style>
+    .release-section {
+      padding-top: clamp(52px, 7vw, 92px);
+      padding-bottom: 0;
+    }
+
+    .release-card {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
+      gap: clamp(34px, 6vw, 90px);
+      padding: clamp(28px, 4vw, 58px);
+      border: 1px solid var(--line-strong);
+      color: inherit;
+      text-decoration: none;
+      background:
+        radial-gradient(circle at 78% 20%, rgba(76, 118, 112, 0.12), transparent 34%),
+        var(--paper-raised);
+      transition: transform 180ms ease, border-color 180ms ease;
+    }
+
+    .release-card:hover {
+      transform: translateY(-3px);
+      border-color: var(--copper);
+    }
+
+    .release-card h2 {
+      max-width: 760px;
+      margin: 20px 0 18px;
+      font-size: clamp(2rem, 4vw, 4.2rem);
+      line-height: 1.03;
+    }
+
+    .release-card p:not(.eyebrow) {
+      max-width: 780px;
+      color: var(--ink-soft);
+      font-size: clamp(1rem, 1.4vw, 1.18rem);
+      line-height: 1.8;
+    }
+
+    .release-card dl {
+      margin: 0 0 28px;
+      border-top: 1px solid var(--line);
+    }
+
+    .release-card dl div {
+      display: grid;
+      grid-template-columns: 100px 1fr;
+      padding: 17px 0;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .release-card dt {
+      color: var(--ink-muted);
+      font: 0.62rem/1.4 var(--mono);
+      letter-spacing: 0.12em;
+    }
+
+    .release-card dd {
+      margin: 0;
+      font-family: var(--serif);
+    }
+
+    .release-arrow {
+      position: absolute;
+      right: clamp(28px, 4vw, 58px);
+      bottom: clamp(24px, 3vw, 42px);
+      color: var(--copper);
+      font: 0.7rem/1 var(--mono);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    @media (max-width: 760px) {
+      .release-card {
+        grid-template-columns: 1fr;
+        padding-bottom: 76px;
+      }
+
+      .release-card dl {
+        margin: 0;
+      }
+    }
+  </style>
 </BaseLayout>

src/pages/k3/index.astro

@@ -198,7 +198,10 @@ const toc = [
 
         <div class="formula">
           cₜ = Wᶜxₜ　→　缓存 cₜ　→　按需上投影为各头的 K / V
-          <small>这是结构直觉，不是 MLA 完整公式。旋转位置编码的解耦与吸收技巧会在“长上下文”专题单独推导。</small>
+          <small>
+            这是结构直觉，不是 MLA 完整公式。旋转位置编码的解耦与吸收技巧已在
+            <a href="/long-context/#cache">“长上下文”专题</a>单独推导。
+          </small>
         </div>
 
         <h3>为什么 K3 的 MLA 不再使用位置编码</h3>
@@ -513,6 +516,7 @@ const toc = [
         <div class="hero-actions">
           <a class="button primary" href="https://github.com/MoonshotAI/Kimi-K3/blob/main/k3_tech_report.pdf">打开官方 PDF</a>
           <a class="button" href="https://github.com/MoonshotAI/Kimi-K3">官方代码与权重说明</a>
+          <a class="button" href="/long-context/#hybrids">比较 K3 与 DeepSeek-V4 长上下文</a>
           <a class="button" href="/roadmap/">回到完整学习地图</a>
         </div>
       </section>

src/pages/progress/index.astro

@@ -8,11 +8,12 @@ const researching = chapters.filter((chapter) => ["researching", "drafting"].inc
 
 const workstreams = [
   { label: "研究框架与规范", value: 72, next: "给 125 篇索引补充逐篇精读层级" },
-  { label: "网站设计系统", value: 86, next: "打印样式与更多通用可视化组件" },
+  { label: "网站设计系统", value: 89, next: "打印样式与更多通用可视化组件" },
   { label: "Kimi K3 深读", value: 55, next: "扩写 scaling / infra 逐图笔记" },
   { label: "Transformer 基础", value: 52, next: "加入矩阵形状动画与手算练习" },
-  { label: "DeepSeek 专题", value: 54, next: "MLA 与 GRPO 完整公式推导" },
-  { label: "引用与事实检查", value: 48, next: "自动化外链复查与来源等级扩展" },
+  { label: "DeepSeek 专题", value: 61, next: "GRPO 完整公式与训练轨迹推导" },
+  { label: "长上下文专题", value: 72, next: "加入更多论文逐图笔记与真实模型配置对比" },
+  { label: "引用与事实检查", value: 54, next: "自动化外链复查与来源等级扩展" },
   { label: "开源与部署", value: 100, next: "每轮保留不可变镜像、提交与回滚点" },
 ];
 ---
@@ -36,7 +37,7 @@ const workstreams = [
         <div><dt>OVERALL</dt><dd>专题平均 {average}%</dd></div>
         <div><dt>READABLE</dt><dd>{published} 个首版可读专题</dd></div>
         <div><dt>ACTIVE</dt><dd>{researching} 个研究/写作中</dd></div>
-        <div><dt>UPDATED</dt><dd>2026-07-28 22:05 CST</dd></div>
+        <div><dt>UPDATED</dt><dd>2026-07-28 22:47 CST</dd></div>
         <div><dt>MODE</dt><dd>持续迭代，不锁死版本</dd></div>
       </dl>
     </div>
@@ -46,7 +47,7 @@ const workstreams = [
     <div class="section-heading">
       <div>
         <p class="eyebrow"><span>01</span> WORKSTREAMS</p>
-        <h2>七条工作流同时推进，但不混淆“有页面”和“已核验”</h2>
+        <h2>八条工作流同时推进，但不混淆“有页面”和“已核验”</h2>
       </div>
       <p class="section-lead">
         内容首版优先打通全局脉络；随后每轮迭代选择一个专题推进到论文/工程层，并做独立事实复核。
@@ -74,7 +75,7 @@ const workstreams = [
     <div class="section-heading">
       <div>
         <p class="eyebrow"><span>02</span> COMPLETED THIS ITERATION</p>
-        <h2>第一轮已经落地什么</h2>
+        <h2>当前版本已经落地什么</h2>
       </div>
       <p class="section-lead">下列项目都能在仓库或网站中直接检查，不是计划项。</p>
     </div>
@@ -83,8 +84,9 @@ const workstreams = [
       <article><span>✓</span><h3>K3 报告已结构化拆解</h3><p>47 页报告目录、151 条参考来源和架构/后训练/系统主线已经提取。</p></article>
       <article><span>✓</span><h3>16 专题知识图</h3><p>从语言模型基础到评测安全，包含先修依赖和三条贯穿案例。</p></article>
       <article><span>✓</span><h3>编辑式网站系统</h3><p>响应式导航、章节模板、侧栏、进度、论文链和证据提示组件。</p></article>
-      <article><span>✓</span><h3>三张原创交互图</h3><p>K3 三轴架构、Self-Attention Query 实验与 DeepSeek 技术谱系。</p></article>
-      <article><span>✓</span><h3>三篇首版长文</h3><p>K3 完整导读、Transformer 基础与 DeepSeek 论文谱系。</p></article>
+      <article><span>✓</span><h3>四张原创交互图</h3><p>K3 三轴架构、Self-Attention Query、DeepSeek 谱系与长上下文成本实验室。</p></article>
+      <article><span>✓</span><h3>四篇首版长文</h3><p>K3 完整导读、Transformer 基础、DeepSeek 论文谱系与长上下文专题。</p></article>
+      <article><span>✓</span><h3>长上下文深度专题</h3><p>五张成本账、26 篇一手论文、10+ 机制图与 8 策略交互实验室。</p></article>
       <article><span>✓</span><h3>125 篇关键论文索引</h3><p>覆盖 12 个专题，支持全文搜索、标签筛选与 Kimi/DeepSeek 聚光主线。</p></article>
       <article><span>✓</span><h3>公开仓库与自托管发布</h3><p>源码公开到 git.k1412.top，网站由不可变镜像、Compose Manager 与 HTTPS 交付。</p></article>
     </div>
@@ -100,8 +102,8 @@ const workstreams = [
     </div>
     <div class="queue-table">
       <div class="head"><b>优先级</b><b>专题</b><b>本轮交付</b><b>完成闸门</b></div>
-      <div><span>P0</span><strong>长上下文与高效注意力</strong><p>FlashAttention → MLA → Delta Rule → Kimi Linear/KDA</p><em>6 张图 + 20 篇论文</em></div>
       <div><span>P0</span><strong>稀疏计算与 MoE</strong><p>Switch → DeepSeekMoE → LatentMoE → Stable LatentMoE</p><em>路由模拟器 + 通信账本</em></div>
+      <div><span>P1</span><strong>长上下文二轮深化</strong><p>真实模型配置 → 内核细节 → 长上下文评测与失败案例</p><em>配置比较器 + 逐图论文笔记</em></div>
       <div><span>P1</span><strong>推理模型与测试时扩展</strong><p>CoT → verifier → GRPO → R1 → k1.5 → K3 MOPD</p><em>奖励/预算交互图</em></div>
       <div><span>P1</span><strong>大规模训练系统</strong><p>ZeRO/Megatron → Expert/Context Parallel → DualPipe/MoonEP</p><em>显存与通信计算器</em></div>
       <div><span>P2</span><strong>原生多模态</strong><p>ViT/CLIP → connector VLM → Kimi-VL/MoonViT-V2</p><em>视觉 Token 流程图</em></div>