---
import BaseLayout from "@/layouts/BaseLayout.astro";
import ArchitectureExplorer from "@/components/ArchitectureExplorer.astro";
import DeepSeekLineage from "@/components/DeepSeekLineage.astro";
import { chapters, statusLabel } from "@/data/chapters";

const routes: Record<string, string> = {
  roadmap: "/roadmap/",
  "foundations/language-models": "/foundations/language-models/",
  foundations: "/foundations/",
  scaling: "/scaling/",
  "pretraining/data": "/pretraining/data/",
  moe: "/moe/",
  "long-context": "/long-context/",
  reasoning: "/reasoning/",
  "training-systems": "/training-systems/",
  "systems/numerics": "/systems/numerics/",
};

const paths = [
  {
    id: "beginner",
    number: "01",
    label: "零基础",
    title: "从“下一个词”开始，不先背 Transformer 公式",
    text: "先建立 Token、概率、向量和训练目标的直觉，再通过可操作的注意力实验进入架构。",
    steps: ["01 语言模型从哪里来", "02 注意力与 Transformer", "03 表示、位置与残差", "04 Scaling Laws"],
    time: "8–12 小时",
    target: "能独立阅读主流 LLM 架构图",
  },
  {
    id: "k3",
    number: "02",
    label: "K3 反向拆解",
    title: "先看全貌，再沿组件回到每条技术祖先",
    text: "适合已经用过大模型、想迅速读懂 K3 报告的人。每个组件都能跳回其历史专题。",
    steps: ["K3 三维信息流", "KDA 与 MLA", "Stable LatentMoE", "1M Agentic RL 与系统"],
    time: "6–10 小时",
    target: "能逐节解释 K3 技术报告",
  },
  {
    id: "deepseek",
    number: "03",
    label: "DeepSeek 主线",
    title: "沿一家公司，看算法—系统协同如何一步步形成",
    text: "从 DeepSeek LLM 的 dense 基线，到 MoE、MLA、FP8、GRPO、R1、稀疏注意力与百万上下文。",
    steps: ["DeepSeekMoE", "V2 / MLA", "V3 / FP8 / DualPipe", "Math / GRPO / R1", "V3.2 / V4"],
    time: "7–11 小时",
    target: "理解 DeepSeek 论文间的因果关系",
  },
  {
    id: "systems",
    number: "04",
    label: "系统工程",
    title: "跟着一个 Token 穿过 GPU、网络、缓存与服务集群",
    text: "适合工程背景读者，从计算与内存账本出发理解并行、低精度、通信和推理服务。",
    steps: ["08 大规模训练", "09 数值与优化", "14 推理服务", "K3 §5 Infrastructure"],
    time: "10–16 小时",
    target: "看懂大模型系统报告与性能数字",
  },
];
---

<BaseLayout
  title="LLM Atlas"
  description="以 Kimi K3 技术报告为锚点，从第一性原理梳理大语言模型的技术发展、关键论文、DeepSeek 谱系与系统工程。"
  section="home"
>
  <section class="hero">
    <div class="hero-inner">
      <div class="hero-copy">
        <p class="eyebrow"><span>OPEN COURSE / 2026</span> LARGE LANGUAGE MODELS</p>
        <h1>
          大模型技术全景
          <em>从“预测下一个词”到 Kimi K3 的 2.8T 开放前沿</em>
        </h1>
        <p class="hero-deck">
          这是一套按问题脉络组织的中文开放课程。我们从最小直觉出发，追踪每篇关键论文究竟解决了什么，
          再把注意力、MoE、规模化训练、多模态、推理强化学习与 Agent 系统重新汇入 Kimi K3。
        </p>
        <div class="hero-actions">
          <a class="button primary" href="/roadmap/">选择学习路径 <span aria-hidden="true">↓</span></a>
          <a class="button" href="/foundations/language-models/">语言模型从哪里来</a>
          <a class="button" href="/foundations/">注意力与 Transformer</a>
          <a class="button" href="/k3/">直接解剖 K3</a>
          <a class="button" href="/deepseek/">DeepSeek 专题</a>
          <a class="button" href="/scaling/">Scaling Laws 专题</a>
          <a class="button" href="/pretraining/data/">数据工程专题</a>
          <a class="button" href="/moe/">MoE 专题</a>
          <a class="button" href="/long-context/">长上下文专题</a>
          <a class="button" href="/reasoning/">推理专题</a>
          <a class="button" href="/training-systems/">训练系统专题</a>
          <a class="button" href="/systems/numerics/">数值与优化专题</a>
        </div>
      </div>
      <aside class="hero-aside" aria-label="项目统计">
        <span>RESEARCH CUTOFF</span>
        <strong>29 · 07 · 2026</strong>
        <p>首版持续建设中，所有动态结论带日期</p>
        <div class="hero-stats">
          <div><b>16</b><span>核心专题</span></div>
          <div><b>151</b><span>K3 报告来源</span></div>
          <div><b>258</b><span>关键论文索引</span></div>
          <div><b>47p</b><span>K3 技术报告</span></div>
        </div>
      </aside>
    </div>
    <div class="scope-strip">
      <span>研究范围</span>
      <p>表示学习 · Transformer · Scaling · 数据工程 · MoE · 长上下文 · 训练系统 · 数值优化 · 后训练 · 推理 · Agent · 多模态 · 服务与评测</p>
      <a href="/progress/">查看实时进度 →</a>
    </div>
  </section>

  <section class="section compact release-section" id="new-chapters">
    <div class="release-grid">
      <a class="release-card transformer-release" href="/foundations/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 02</span> ATTENTION · TRANSFORMER</p>
          <h2>Attention 不只是“看哪里”，Transformer 也不只有一种 Block</h2>
          <p>
            用信息路径、匹配几何、可见性、多头、位置、局部计算、深度、架构目标、系统成本与当代映射十张账，
            从 Bahdanau 软对齐和 2017 原始 encoder–decoder，一路走到 FlashAttention、DeepSeek MLA 与 Kimi K3。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>2014 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>40 个一手节点</dd></div>
          <div><dt>LAB</dt><dd>QKV · Mask · 多头位置 · Block 成本</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">从软对齐进入现代 LLM 骨架 →</span>
      </a>
      <a class="release-card foundation-release" href="/foundations/language-models/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 01</span> LANGUAGE MODELING ORIGINS</p>
          <h2>预测下一个 Token，为什么会走到今天的大模型？</h2>
          <p>
            用预测单位、概率信息、上下文、稀疏性、分布式表示、循环记忆、序列转导与系统成本八张账，
            从 Shannon、N-gram、Kneser–Ney、Bengio、RNN/LSTM 一路走到 Seq2Seq、Attention 与 K3 / DeepSeek。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>1948 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>33 个一手节点</dd></div>
          <div><dt>LAB</dt><dd>概率 · 向量 · 记忆 · 对齐</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">从语言模型的起点开始 →</span>
      </a>
      <a class="release-card numerics-release" href="/systems/numerics/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 09</span> PRECISION · OPTIMIZATION · STABILITY</p>
          <h2>少几个比特为什么省巨资，也可能让训练瞬间崩掉？</h2>
          <p>
            用表示、缩放、计算、累加、搬运、更新、参数化、观测、恢复与证据十张账，
            从 mixed precision、BF16、FP8 和 MXFP4，一路走到 AdamW、Muon、Kimi K2/K3 与 DeepSeek-V3/V4。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>2014 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>36 个一手节点</dd></div>
          <div><dt>LAB</dt><dd>格式 · 状态 · 更新 · 失稳</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">进入数值与优化专题 →</span>
      </a>
      <a class="release-card data-release" href="/pretraining/data/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 05</span> DATA & PRE-TRAINING</p>
          <h2>同样一万亿 Token，可以是完全不同的训练经历</h2>
          <p>
            用来源、解析、质量、唯一性、污染、混合、变换、Tokenizer、Packing、课程与模型感知价值十二张账，
            从 C4、Pile、DoReMi 和 DCLM 一路走到 DeepSeek 五代数据工程与 Kimi K2→K3 原生多模态。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>2019 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>31 个一手节点</dd></div>
          <div><dt>LAB</dt><dd>流水线 · 去重 · 混合 · 改写</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">进入数据工程专题 →</span>
      </a>
      <a class="release-card scaling-release" href="/scaling/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 04</span> SCALING LAWS</p>
          <h2>“大一点就会更强”，远远不够指导一次训练</h2>
          <p>
            用观测量、模型、数据、算术、配比、配方、外推、经济目标与能力阶段九张账，
            从早期经验幂律、Kaplan、Chinchilla 与复现争议，一路走到 DeepSeek scaling study 和 Kimi K3。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>2017 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>29 个一手节点</dd></div>
          <div><dt>LAB</dt><dd>曲面 · 部署 · 重复 · 涌现</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">进入 Scaling Laws 专题 →</span>
      </a>
      <a class="release-card training-release" href="/training-systems/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 08</span> LARGE-SCALE TRAINING SYSTEMS</p>
          <h2>一万张 GPU，为什么仍可能有一半在等？</h2>
          <p>
            用模型状态、激活、计算划分、气泡、collective、专家、上下文、数值与可靠性九张账，
            从 ZeRO、Megatron 一路走到 DeepSeek DualPipe、Kimi MoonEP 与百万 Token Agentic RL。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>2012 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>37 个一手节点</dd></div>
          <div><dt>LAB</dt><dd>显存 · 网格 · 气泡 · 通信</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">进入训练系统专题 →</span>
      </a>
      <a class="release-card reasoning-release" href="/reasoning/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 11</span> REASONING & TEST-TIME SCALING</p>
          <h2>“多想一会儿”，到底把计算花到了哪里？</h2>
          <p>
            把推理拆成结果、覆盖、选择、过程、预算、优化、分布与系统八张账，
            从 CoT、verifier 与 GRPO 一路走到 DeepSeek-R1、Kimi k1.5 与 K3 MOPD。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>2021 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>30 篇一手来源</dd></div>
          <div><dt>LAB</dt><dd>预算 · GRPO · 九教师</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">进入推理专题 →</span>
      </a>
      <a class="release-card moe-release" href="/moe/">
        <div>
          <p class="eyebrow"><span>NEW / CHAPTER 06</span> SPARSE EXPERTS</p>
          <h2>2.8T 参数，不等于每个 Token 跑 2.8T</h2>
          <p>
            把 MoE 拆成容量、激活计算、路由、负载、通信与稳定性六张账，
            从 Switch、DeepSeekMoE、Loss-Free、LatentMoE 一路走到 K3 Stable LatentMoE。
          </p>
        </div>
        <dl>
          <div><dt>LINEAGE</dt><dd>1991 → 2026</dd></div>
          <div><dt>PAPERS</dt><dd>19 篇一手来源</dd></div>
          <div><dt>LAB</dt><dd>8 架构 · 4 平衡策略</dd></div>
        </dl>
        <span class="release-arrow" aria-hidden="true">进入 MoE 专题 →</span>
      </a>
      <a class="release-card context-release" href="/long-context/">
        <div>
          <p class="eyebrow"><span>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>
    </div>
  </section>

  <section class="section" id="why">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>00</span> WHY THIS ATLAS</p>
        <h2>不是论文清单，而是一条能走通的理解路径</h2>
      </div>
      <p class="section-lead">
        大模型知识最难的地方不是资料少，而是资料之间的桥断了：初学解释省略公式，论文省略历史，
        系统报告又默认你已经理解模型。LLM Atlas 专门补这些桥。
      </p>
    </div>

    <div class="thesis">
      <span class="micro-label">课程主张</span>
      <p>
        真正理解一项技术，需要同时回答：它解决什么瓶颈、核心机制如何工作、证据是否支持、
        工程代价是什么，以及下一篇论文为什么自然会出现。
      </p>
    </div>

    <div class="feature-grid">
      <article class="feature-card">
        <span class="card-number">01 / PROBLEM</span>
        <h3>从问题开始</h3>
        <p>先看到旧方法撞上的墙，再引入新名词。KDA、MLA、MoE 都不再是凭空掉下来的缩写。</p>
      </article>
      <article class="feature-card">
        <span class="card-number">02 / LAYERS</span>
        <h3>四层解释</h3>
        <p>同一概念同时提供直觉、机制、论文和工程四层入口，允许读者在适合自己的深度停留。</p>
      </article>
      <article class="feature-card">
        <span class="card-number">03 / VISUAL</span>
        <h3>图必须能帮助推理</h3>
        <p>优先重绘可缩放、可交互的架构图；每种颜色固定含义，简化之处明确标出。</p>
      </article>
      <article class="feature-card">
        <span class="card-number">04 / EVIDENCE</span>
        <h3>事实、解释、推断分开</h3>
        <p>关键结论回到论文和官方实现。榜单写明 harness、工具预算与截止日期，未知就明确说未知。</p>
      </article>
    </div>
  </section>

  <section class="section" id="paths">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>01</span> LEARNING PATHS</p>
        <h2>你不必从第一页顺序读到最后</h2>
      </div>
      <p class="section-lead">四条路径共享同一张知识图。点击路径切换，章节之间的先修关系始终可追踪。</p>
    </div>

    <div class="pathways" data-pathways>
      <div class="path-tabs" role="tablist" aria-label="学习路径">
        {paths.map((path, index) => (
          <button
            type="button"
            role="tab"
            aria-selected={index === 0 ? "true" : "false"}
            data-path-button={path.id}
          >
            <span>{path.number}</span>{path.label}
          </button>
        ))}
      </div>
      <div>
        {paths.map((path, index) => (
          <div class="path-panel" data-path-panel={path.id} data-active={index === 0 ? "" : undefined}>
            <div class="path-copy">
              <span class="micro-label">{path.label}</span>
              <h3>{path.title}</h3>
              <p>{path.text}</p>
              <ol>
                {path.steps.map((step) => <li>{step}</li>)}
              </ol>
            </div>
            <aside class="path-meta">
              <div><span>ESTIMATED TIME</span><b>{path.time}</b></div>
              <div><span>LEARNING OUTCOME</span><b>{path.target}</b></div>
              <div><span>READING MODE</span><b>直觉 → 机制 → 论文 → 工程</b></div>
            </aside>
          </div>
        ))}
      </div>
    </div>
  </section>

  <section class="section" id="chapters">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>02</span> CURRICULUM MAP</p>
        <h2>16 个专题，拼成一张完整技术地图</h2>
      </div>
      <p class="section-lead">
        进度条表示内容成熟度，不代表相关领域的重要性。首版先打通全站骨架，再逐章扩写到论文与工程层。
      </p>
    </div>

    <div class="chapter-grid">
      {chapters.map((chapter) => {
        const href = routes[chapter.slug] ?? `/roadmap/#chapter-${chapter.number}`;
        return (
          <a class="chapter-card" href={href}>
            <div class="chapter-top">
              <span class="chapter-number">{chapter.number}</span>
              <span class={`status ${chapter.status}`}>{statusLabel[chapter.status]}</span>
            </div>
            <h3>{chapter.title}</h3>
            <p>{chapter.question}</p>
            <div class="chapter-bottom">
              <div class="progress-track" aria-label={`完成 ${chapter.progress}%`}>
                <span style={`width:${chapter.progress}%`}></span>
              </div>
              <div class="chapter-meta">
                <span>{chapter.papers} 篇核心论文</span>
                <span>{chapter.progress}%</span>
              </div>
            </div>
          </a>
        );
      })}
    </div>
  </section>

  <section class="section" id="k3-map">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>03</span> KIMI K3 AS THE CONFLUENCE</p>
        <h2>K3 把三种信息流和一套庞大系统放进同一模型</h2>
      </div>
      <p class="section-lead">
        K3 报告最好的阅读钥匙，是把架构看成 token、depth、channel 三个方向的信息流；
        视觉输入与训练/服务基础设施则包住这三条轴。
      </p>
    </div>
    <ArchitectureExplorer />
    <a class="button primary" href="/k3/">进入完整 K3 技术报告导读 →</a>
  </section>

  <section class="section" id="deepseek-spotlight">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>04</span> DEEPSEEK SPOTLIGHT</p>
        <h2>DeepSeek：一条极适合学习“算法—系统协同”的论文主线</h2>
      </div>
      <p class="section-lead">
        从细粒度 MoE、MLA 和 FP8，到 GRPO 与 R1，DeepSeek 的每篇报告都在解决上一代留下的明确约束。
        这里会给予它比普通模型谱系更细的篇幅。
      </p>
    </div>
    <DeepSeekLineage />
    <a class="button primary" href="/deepseek/">阅读 DeepSeek 专题 →</a>
  </section>

  <section class="section compact" id="method">
    <div class="section-heading">
      <div>
        <p class="eyebrow"><span>05</span> OPEN RESEARCH</p>
        <h2>课程本身也是一项开放研究工程</h2>
      </div>
      <p class="section-lead">
        网站源码、路线、进度和研究规范全部公开。Grok 用来扩展检索线索，最终结论由一手论文和官方实现核验。
      </p>
    </div>
    <div class="method-grid">
      <article class="method-card">
        <span class="card-number">P0</span>
        <h3>一手论文</h3>
        <p>arXiv、会议、期刊与作者正式技术报告，承载核心机制和实验数字。</p>
      </article>
      <article class="method-card">
        <span class="card-number">P1</span>
        <h3>官方实现</h3>
        <p>仓库、模型卡、训练与评测代码，用于确认论文描述如何落到真实系统。</p>
      </article>
      <article class="method-card">
        <span class="card-number">P2</span>
        <h3>官方说明</h3>
        <p>实验室博客、系统卡和产品文档；尚无论文的新模型会临时使用并标明状态。</p>
      </article>
      <article class="method-card">
        <span class="card-number">P3+</span>
        <h3>独立复现</h3>
        <p>第三方结果用于检验外部有效性；二手文章只发现线索，不承载关键事实。</p>
      </article>
    </div>
  </section>

  <script>
    document.querySelectorAll<HTMLElement>("[data-pathways]").forEach((root) => {
      const buttons = [...root.querySelectorAll<HTMLButtonElement>("[data-path-button]")];
      const panels = [...root.querySelectorAll<HTMLElement>("[data-path-panel]")];
      const select = (id: string) => {
        buttons.forEach((button) => button.setAttribute("aria-selected", String(button.dataset.pathButton === id)));
        panels.forEach((panel) => panel.toggleAttribute("data-active", panel.dataset.pathPanel === id));
      };
      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-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    .release-card {
      position: relative;
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 28px;
      min-height: 560px;
      padding: clamp(28px, 3.6vw, 50px);
      padding-bottom: clamp(74px, 7vw, 92px);
      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;
    }

    .transformer-release,
    .foundation-release,
    .numerics-release,
    .data-release,
    .scaling-release,
    .training-release,
    .reasoning-release {
      grid-column: 1 / -1;
      min-height: 510px;
    }

    .numerics-release {
      background:
        radial-gradient(circle at 82% 18%, rgba(113, 82, 137, 0.2), transparent 30%),
        repeating-linear-gradient(90deg, transparent 0 64px, rgba(113, 82, 137, 0.045) 64px 65px),
        repeating-linear-gradient(0deg, transparent 0 64px, rgba(76, 118, 112, 0.04) 64px 65px),
        var(--paper-raised);
    }

    .foundation-release {
      background:
        radial-gradient(circle at 82% 18%, rgba(159, 91, 52, 0.2), transparent 30%),
        repeating-linear-gradient(90deg, transparent 0 72px, rgba(159, 91, 52, 0.045) 72px 73px),
        repeating-linear-gradient(0deg, transparent 0 72px, rgba(48, 64, 82, 0.035) 72px 73px),
        var(--paper-raised);
    }

    .transformer-release {
      background:
        radial-gradient(circle at 82% 18%, rgba(56, 91, 128, 0.21), transparent 30%),
        radial-gradient(circle at 60% 74%, rgba(159, 91, 52, 0.12), transparent 26%),
        repeating-linear-gradient(90deg, transparent 0 64px, rgba(56, 91, 128, 0.04) 64px 65px),
        var(--paper-raised);
    }

    .data-release {
      background:
        radial-gradient(circle at 82% 18%, rgba(76, 118, 112, 0.2), transparent 30%),
        repeating-linear-gradient(0deg, transparent 0 46px, rgba(76, 118, 112, 0.045) 46px 47px),
        var(--paper-raised);
    }

    .scaling-release {
      background:
        radial-gradient(circle at 82% 18%, rgba(159, 91, 52, 0.18), transparent 30%),
        repeating-linear-gradient(135deg, transparent 0 84px, rgba(159, 91, 52, 0.045) 84px 85px),
        var(--paper-raised);
    }

    .training-release {
      background:
        radial-gradient(circle at 82% 18%, rgba(66, 111, 101, 0.19), transparent 30%),
        repeating-linear-gradient(90deg, transparent 0 88px, rgba(94, 125, 117, 0.055) 88px 89px),
        var(--paper-raised);
    }

    .reasoning-release {
      background:
        radial-gradient(circle at 82% 18%, rgba(56, 91, 128, 0.17), transparent 30%),
        radial-gradient(circle at 63% 72%, rgba(150, 93, 58, 0.11), transparent 28%),
        var(--paper-raised);
    }

    .release-card:hover {
      transform: translateY(-3px);
      border-color: var(--copper);
    }

    .release-card h2 {
      max-width: 760px;
      margin: 20px 0 18px;
      font-size: clamp(2rem, 3.2vw, 3.5rem);
      line-height: 1.05;
    }

    .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;
      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-grid {
        grid-template-columns: 1fr;
      }

      .release-card {
        min-height: 0;
        padding-bottom: 76px;
      }

      .transformer-release,
      .foundation-release,
      .numerics-release,
      .data-release,
      .scaling-release,
      .training-release,
      .reasoning-release {
        grid-column: auto;
      }

      .release-card dl {
        margin: 0;
      }
    }
  </style>
</BaseLayout>