wuyang
635 lines
25 KiB
Plaintext
635 lines
25 KiB
Plaintext
---
|
||
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>
|