Skill: unclecheng-li/unclecheng-ai-animation (version 1.0.2)

--- name: science-content-ppt description: 将科普内容文本转换为可视化PPT风格网页的完整工作流。当用户输入科普内容并希望生成演示页面时触发。支持两种模式：(1) 默认模式：将科普内容生成为仿PPT轮播的单页HTML动画网页；(2) 流程图模式：使用Animation模板将已生成的AI_Animation.html按平面UI样式重构。模板已内置于Skill中。触发词包括"生成PPT"、"生成演示网页"、"生成流程图"等。 --- # Science Content PPT Skill 将科普内容文本转换为可视化PPT风格网页的完整工作流。 --- ## 真实案例（OSI 七层网络模型） **用户输入文本：** > 为了使不同计算机厂家生产的计算机能够相互通信，以便在更大的范围内建立计算机网络，国际标准化组织（ISO）在1978年提出了"开放系统互联参考模型"……七层自下而上依次为：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。其中第四层完成数据传送服务，上面三层面向用户。除了标准的OSI七层模型以外，常见的网络层次划分还有TCP/IP四层协议以及TCP/IP五层协议。 **执行流程：** 1. 用下方「Step 1 提示词模板」生成 PPT 提示词 2. 模型直接生成完整 HTML（或用 Step 3 模板重构） 3. 用户说"生成流程图"时，用模式二将内容转为平面 UI 风格 **输出结果：** - PPT模式：13页轮播，含封面、简介、七层详情、层级分工、协议对比 - 流程图模式：横向七层流程卡片，绿色平面UI风格 --- ## 模板文件（内置于Skill） 调用时使用相对于 Skill 根目录的路径： **PPT轮播模板（模式一，默认，Step 3 使用）：** ``` # 优先使用 level2 模板（由当前对话模型根据内容选择最合适的） assets/templates/PPT Template-level2/ ← 优先选用 assets/templates/PPT/PPT-Generate-3.html assets/templates/PPT/PPT-Generate-1.html assets/templates/PPT/PPT-Generate-2.html assets/templates/PPT/PPT-Generate-4.html assets/templates/PPT/PPT-Generate-5.html assets/templates/PPT/PPT-Generate-6.html assets/templates/PPT/PPT-Generate-7.html ``` **Animation平面UI模板（模式二，默认）：** ``` assets/templates/Animation/RNN-3.html ← 默认 assets/templates/Animation/RNN-2.html assets/templates/Animation/RNN-4.html assets/templates/Animation/RNN-5.html assets/templates/Animation/RNN-6.html assets/templates/Animation/RNN-7.html assets/templates/Animation/LSTM-1.html assets/templates/Animation/Comprehension.html assets/templates/Animation/GPU.html assets/templates/Animation/word2vec-1.html assets/templates/Animation/onehot.html assets/templates/Animation/onehot-drawback.html assets/templates/Animation/The fatal flaw of DNN.html assets/templates/Animation/Cross-modal disentanglement - 2.html ``` --- ## 模式一：生成PPT演示网页（默认） 当用户提供科普文本希望生成演示页面时，执行以下步骤： ### Step 1 — 生成PPT提示词 将以下提示词模板应用到用户输入的科普文本内容： ``` 根据以下内容生成基于纯前端页面单页布局仿PPT换页轮播进行直观图形化可视化的介绍，加大文字大小，并运用加粗、下划线、斜体、文字颜色、文字背景等强调方式方便进行视频演示。添加每次切换页面时页面中的各个元素依次"缓入"出现的动画效果(细化到每行文字)。 --- {用户输入的科普内容文本} --- ``` ### Step 2 — 生成AI_Animation.html 使用Step 1生成的提示词，调用当前对话模型生成完整的HTML页面代码。 **⚠️ 关键：必须追加以下两条约束到生成提示词中：** ``` 将emoji图标换成平面ui库的图标（如Font Awesome或Lucide图标库）。添加完成后检查页面中是否还有残留的emoji字符，如有则全部替换为对应的ui图标。 ``` ``` 所有动画元素的class名统一使用 an 或 anim-item，以便后续动画重置逻辑能正确识别并处理。 ``` **⚠️ 关键：动画重置修复** AI模型直接生成的HTML存在动画只播放一次、切换页面后动画不复发的bug。必须在生成后插入以下修复JS到页面底部（确保在 `</body>` 前）： ```javascript (function() { // 克隆节点强制重置CSS动画，确保每次切换页面动画重新触发 document.querySelectorAll('.slide').forEach(function(s) { s.querySelectorAll('.an, .anim-item, [style*="animation"]').forEach(function(item) { var clone = item.cloneNode(true); item.parentNode.replaceChild(clone, item); }); }); })(); ``` **输出路径**：由用户决定，用户未指定时默认输出到桌面 `/home/mt/桌面/AI_Animation.html` ### Step 3 — 重构为PPT模板风格（可选） 以PPT模板对生成的网页进行重构。 **模板选择规则：** 1. **优先从 `assets/templates/PPT Template-level2/` 目录中选择**（共20+个模板） 2. 由**当前对话的模型**根据科普文案的内容特点（主题、结构、复杂度）自行判断，选出最合适的一个PPT模板 3. 若 level2 中没有合适选项，则回退到 `assets/templates/PPT/` 目录 提示词模板： ``` 以页面 {模板相对路径} 为模板重构 {用户指定的输出路径}。 请将AI_Animation.html的内容按照指定PPT模板的布局、样式和轮播机制进行重构，保持科普内容不变，优化视觉效果使其更适合视频演示。 ``` **模板路径示例：** - Level2 示例：`assets/templates/PPT Template-level2/3-1.html` - 默认回退：`assets/templates/PPT/PPT-Generate-3.html` - 用户可指定其他内置模板 **模板目录清单：** - `PPT Template-level2/`（优先）：1.html ~ 9-3.html 共 25 个模板，见下方 SUMMARY 参考 - `PPT/`（回退）：PPT-Generate-1.html ~ PPT-Generate-7.html **AI 选模板参考文档：** `assets/templates/PPT Template-level2/SUMMARY.md` > Step 3 重构前，AI 必须先阅读 `SUMMARY.md`，根据科普内容类型从 25 个模板中选择最合适的一个，再进行重构。选模板的核心依据： > - **对比/辩论类** → 8-1（12组VS）、8-3（30组VS）、6-2（架构对比） > - **步骤/流程类** → 3-2（SVG流程图）、6-1/6-3/6-4（步骤动画） > - **案例/实验类** → 4-2、4-3（代码雨动画） > - **警示/危险类** → 5-4（13页+15种动画）、7-3（红色脉冲） > - **轻量/快速** → 3-3（331行）、4-1（315行）、9-3（5页） > - **最强视觉冲击** → 2（13种动画）、6-2（15种动画+红绿VS对比） **注意**：重构完成后需检查目标模板是否内置了动画重置修复JS，如没有需手动添加。 --- ## 模式二：生成流程图（需用户明确触发） 当用户说"生成流程图"时，执行以下步骤： ### Step 1 — 确定模板 + 阅读 SUMMARY 参考 **AI 必须先阅读：** `assets/templates/Animation/SUMMARY.md` 根据科普内容类型，从 14 个 Animation 模板中选择最合适的一个： | 内容类型 | 推荐模板 | 原因 | |---------|---------|------| | RNN/LSTM 循环网络 | RNN-3（隐藏态，默认）> RNN-4（标准流程） | 深绿主题，RNN 系列 | | 梯度消失/爆炸 | RNN-6（爆炸警示）> RNN-7（双问题） | explode + shake 动画 | | 架构/系统/多模块 | Comprehension > Cross-modal | 架构卡片 + 连线动画 | | Word2Vec/词向量 | word2vec-1 | 语义向量可视化 | | One-hot 编码 | onehot（介绍）> onehot-drawback（缺陷） | 向量稀疏性可视化 | | DNN/深度学习缺陷 | The fatal flaw of DNN | 紫色警示风格 | | GPU/计算硬件 | GPU | 计算节点连接动画 | | LSTM 三阶段 | LSTM-1 | 门控结构三阶段 | **默认模板：** `assets/templates/Animation/RNN-3.html` **用户可指定其他 Animation 模板。** ### Step 2 — 重构为平面UI样式 提示词模板： ``` 将 {用户指定的输出路径} 网页的每相邻的两页的内容合并后按照指定网页的平面UI样式进行视觉重构，保持现有颜色方案不变。 具体实施要求包括： 1. 精确还原模板中的布局结构、元素间距、字体样式、图标设计和视觉层次 2. 确保所有交互元素（按钮、表单、导航等）的视觉表现与参考网页一致 3. 维持原有的颜色值和配色方案 4. 保证修改后的页面在不同设备和浏览器上具有良好的响应式表现 5. 优化DOM结构以匹配UI设计，同时保持原有功能完整性和交互逻辑不变 完成后需进行视觉一致性检查，确保实现效果与参考网页达到95%以上的相似度。 模板路径：{模板相对路径，默认 assets/templates/Animation/RNN-3.html} ``` --- ## 已知问题与解决方案（实操总结） ### Q1: 切换页面后动画不重触发 **原因**：CSS `animation-fill-mode: forwards` 使动画只执行一次，display:none 也无法重置动画状态。 **解决方案**：切换页面时克隆 DOM 节点（`cloneNode(true)` + `replaceChild`），强制浏览器重新渲染动画。这是**跨浏览器最可靠**的方案。 **代码**： ```javascript document.querySelectorAll('.slide').forEach(function(s) { s.querySelectorAll('.an, .anim-item').forEach(function(item) { var clone = item.cloneNode(true); item.parentNode.replaceChild(clone, item); }); }); ``` ### Q2: AI直接生成的HTML代码量不足 **现象**：模型生成的HTML有时只有200-400行，内容单薄。 **解决**：在提示词中明确要求"代码1000行以上"，或分多步生成后拼接内容。 ### Q3: 流程图模式不生成新内容 **说明**：流程图模式**不生成新内容**，仅将已生成的 AI_Animation.html 的页面内容按模板样式重新视觉呈现。需先有 PPT 版内容再说"生成流程图"。 --- ## 参数说明 | 参数 | 默认值 | 说明 | |------|--------|------| | PPT模板路径 | `assets/templates/PPT Template-level2/`（模型自选） | 模式一使用的模板，模型根据内容特点选择最合适的 level2 模板 | | 流程图模板路径 | `assets/templates/Animation/RNN-3.html` | 模式二使用的模板 | | 输出路径 | `/home/mt/桌面/AI_Animation.html` | 生成的网页文件，用户未指定时使用默认值 | | 动画修复JS | 内置于模板 | 切换页面时克隆节点重置CSS动画 | --- ## 使用方式 **模式一（默认PPT流程）：** > 用户输入科普内容 → Skill自动完成提示词生成、网页生成、动画修复全流程 **模式二（流程图）：** > 用户输入科普内容后再说"生成流程图" → 将已生成的AI_Animation.html按Animation模板重构为平面UI风格 **模板替换：** > 用户可通过"以xxx.html为模板"指定其他内置模板进行重构

path: CHANGELOG.md
content: # 更新日志

所有重要变更均记录在此文件中。格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/)。

---

## v2.0.0 — 2025-04-15

**重大重构：模板体系升级 + 工作流优化**

### 新增

- 🆕 **PPT Level2 模板**：新增 26 个高质量模板（`assets/templates/PPT Template-level2/`），按主题分 9 个系列，覆盖对比/步骤/概念/案例/警示/辩论等场景
- 🆕 **SUMMARY.md 选择指南**：Level2 和 Animation 各自新增 AI 选模板参考文档，模型可根据科普内容类型自动匹配最佳模板
- 🆕 **已知问题 FAQ**：SKILL.md 新增 Q1~Q3 实操踩坑总结（动画不重触发、代码量不足、流程图模式说明）
- 🆕 **参数说明表**：SKILL.md 新增清晰的参数默认值和说明

### 变更

- 📁 **目录重构**：`templates/` → `assets/templates/`，结构更规范
  - `templates/PPT-Template/` → `assets/templates/PPT/`（基础模板，回退选用）
  - `templates/RNN-Template/` → `assets/templates/Animation/`（更准确的命名）
- 🔄 **Skill 重命名**：`AI-Animation` → `science-content-ppt`，更准确描述能力边界
- 🔄 **工作流精简**：原三步流程优化为两步模式（PPT 模式 + 流程图模式），Level2 模板替代原 Step 2
- 🔄 **模板优先级调整**：PPT Level2 模板优先，基础 PPT 模板回退
- 🔄 **emoji → UI 图标**：Step 2 强制将 emoji 替换为 Font Awesome / Lucide 图标库
- 🔄 **动画重置修复**：新增 cloneNode 动画重置 JS，解决切换页面后动画不复发的 bug

### 删除

- ❌ `references/workflow.md`（工作流内容已整合进 SKILL.md）
- ❌ PPT-Generate-5/6/7.html（被 Level2 模板替代）

---

## v1.0.0 — 2025-03-XX

**初始发布**

- 基础 PPT 模板（PPT-Generate-1~7）
- RNN 系列 Animation 模板
- 三步工作流：文本 → 基础 HTML → PPT 模板重构 → 流程图重构
- Skill 定义文件 SKILL.md


path: README.md
content: <div align="center">

# AI-Animation.skill

> *使用 AI 生成 HTML 演示动画的工具集，让视频创作者能够快速将科普文本转换为炫酷的演示动画。*

[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](LICENSE)
[![OpenClaw](https://img.shields.io/badge/OpenClaw-Skill-green)](https://openclaw.ai/)
[![HTML5](https://img.shields.io/badge/HTML5-Demo-orange)](assets/templates/)

<br>

**不是模板合集，是可运行的 AI 动画生成工作流。**

<br>

基于整理好的 Prompt 模板集成的 Skill，
配合 OpenClaw、Workbuddy、QClaw 等 AI 使用，
两步自动完成「科普文本 → 炫酷动画」的转换。

[快速开始](#快速开始) · [模板总览](#模板总览) · [效果示例](#效果示例) · [更新日志](CHANGELOG.md)

</div>

---

## 它能做什么

输入一段技术科普文本，AI 自动生成演示动画：

```
用户输入：OSI 七层模型是什么？(相关科普文档)

模式一（默认）：科普文本 → 生成基础 HTML → Level2 PPT 模板重构 → 炫酷演示文件
模式二（可选）：已生成的 HTML → Animation 流程图模板重构 → 平面 UI 风格
```

<img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/c09e0f57-7f5a-4014-8809-b5e99d11e9f5" />

适用于 B 站视频素材、课堂教学、技术分享等场景。

---

## 快速开始

### 安装 (例：Workbuddy)

```
1. 下载本项目
2. 将 AI-Animation-Skill 文件夹复制到 ~/.workbuddy/skills/ 目录
3. 重启 WorkBuddy
```

### 使用

**模式一（PPT 演示）：**
1. 在对话中输入科普内容，说「帮我生成PPT」
2. Skill 自动生成基础 HTML → 选择 Level2 模板重构
3. 输出炫酷演示文件

**模式二（流程图）：**
1. 先完成模式一，生成 AI_Animation.html
2. 说「生成流程图」
3. Skill 自动选择 Animation 模板重构为平面 UI 风格

---

## 蒸馏了什么

| 类别            | 内容                           |
| ------------- | ---------------------------- |
| **PPT Level2 模板** | 26 个高质量 HTML 轮播演示模板（含选择指南 SUMMARY.md） |
| **PPT 基础模板**  | 4 个可复用的 HTML 轮播演示模板          |
| **Animation 模板**  | 14 个流程图风格的 HTML 模板（含选择指南 SUMMARY.md） |
| **工作流**       | 文本 → HTML → Level2 模板重构 → 流程图 的完整链路 |

---

## 项目结构

```
AI-Animation-Skill/
├── SKILL.md                              # Skill 主文件（工作流定义）
├── README.md                             # 本文件
├── LICENSE                               # MIT 开源协议
└── assets/
    └── templates/
        ├── PPT Template-level2/          # ⭐ PPT 高级模板（优先选用，26 个）
        │   ├── SUMMARY.md                #   AI 选模板参考文档
        │   ├── 1.html ~ 9-3.html         #   9 个系列 26 个模板
        ├── PPT/                          # PPT 基础模板（回退选用，4 个）
        │   ├── PPT-Generate-1.html
        │   ├── PPT-Generate-2.html
        │   ├── PPT-Generate-3.html       #   基础回退推荐
        │   └── PPT-Generate-4.html
        └── Animation/                    # 流程图模板（14 个）
            ├── SUMMARY.md                #   AI 选模板参考文档
            ├── RNN-2.html ~ RNN-7.html   #   RNN 系列（6 个）
            ├── LSTM-1.html               #   LSTM 三阶段
            ├── Comprehension.html         #   架构理解
            ├── GPU.html                   #   计算硬件
            ├── word2vec-1.html            #   词向量
            ├── onehot.html / onehot-drawback.html  # One-hot 编码
            ├── The fatal flaw of DNN.html #   DNN 缺陷
            └── Cross-modal disentanglement - 2.html  # 跨模态
```

---

## 模板总览

### PPT Level2 模板（26 个，优先选用）

> 模型根据科普内容类型自动选择最合适的模板，详见 `SUMMARY.md`

| 系列 | 模板数 | 适用场景 | 亮点 |
|------|--------|---------|------|
| **1** | 1 | 概念引入、对比 | VS 对比卡片 + SVG 流程图 |
| **2** | 1 | 概念定义、层级结构 | 13 种动画，最多元化 |
| **3** | 3 | 轻量/步骤/极简 | 3-3 仅 331 行最轻量 |
| **4** | 3 | 案例/实验/代码 | 代码雨动画 |
| **5** | 4 | 警示/失败/危险 | 5-4 达 15 种动画 + 13 页 |
| **6** | 4 | 护栏/架构/反馈 | 6-2 红绿 VS 对比（15 种动画） |
| **7** | 4 | 追踪/上下文/Doom Loop | 7-2 达 17 种动画 |
| **8** | 3 | 辩论/对比/融合 | 8-3 达 30 组 VS 对比 |
| **9** | 3 | 总结/共识/精炼 | 9-3 仅 5 页最精炼 |

### PPT 基础模板（4 个，回退选用）

| 模板                 | 特点         | 说明     |
| ------------------ | ---------- | ------ |
| PPT-Generate-1     | 简洁风格       | 基础演示   |
| PPT-Generate-2     | 图表丰富       | 数据类内容  |
| **PPT-Generate-3** | **视觉效果最佳** | **通用推荐** |
| PPT-Generate-4     | 布局灵活       | 复杂内容   |

### Animation 流程图模板（14 个）

| 模板        | 特点       | 适用场景     |
| --------- | -------- | -------- |
| **RNN-3** | **分层卡片** | **通用推荐（默认）** |
| RNN-2     | 分步展示     | RNN 原理   |
| RNN-4     | 标准化流程    | 22 种动画，最密 |
| RNN-5     | 致命缺陷     | 问题/解决对比  |
| RNN-6     | 梯度爆炸警示   | explode 动画 |
| RNN-7     | 双问题对比    | 梯度消失+爆炸  |
| LSTM-1    | 三阶段门控    | LSTM 展示  |
| onehot    | 编码介绍     | 离散特征     |
| onehot-drawback | 编码缺陷 | 稀疏性问题    |
| word2vec-1 | 语义身份证  | 词向量      |
| Comprehension | 理解架构 | 认知类      |
| GPU       | 计算节点     | 硬件展示     |
| Cross-modal disentanglement - 2 | 跨模态解耦 | 多模态 |
| The fatal flaw of DNN | DNN 缺陷 | 深度学习问题 |

---

## 效果示例

### PPT 风格（Level2 模板重构后）

<img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/6ffb76f6-0dea-4b02-b983-617a284b9c80" />
<img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/8c1be8cc-8293-4893-8b56-b695e5daf6fe" />

### 流程图风格（Animation 模板重构后）

<img width="2560" height="1440" alt="image" src="https://github.com/user-attachments/assets/5a65dd82-b690-4d1a-87ba-1b6196b01273" />

---

## 技术栈

- **前端**：HTML5 + CSS3 + JavaScript（原生，无框架依赖）
- **动画**：CSS Animation / Keyframes / 3D Transform / Canvas 粒子
- **兼容性**：现代浏览器（Chrome、Firefox、Safari、Edge）

---

## 更新日志

详见 [CHANGELOG.md](CHANGELOG.md)

---

## 开源协议

本项目采用 [MIT License](LICENSE)。

---

<div align="center">

**如果对你有帮助，欢迎 Star ⭐**

</div>


path: assets/templates/PPT Template-level2/1.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>模型不是关键，Harness才是</title>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:#0F0E17;color:#FFFFFE;overflow:hidden;width:100vw;height:100vh}

:root {
  --accent: #FF6B35;
  --accent2: #F4A261;
  --accent-glow: rgba(255,107,53,0.3);
  --dark: #0F0E17;
  --dark2: #1A1932;
  --gray: #A7A9BE;
}

/* Lucide icons */
.lc{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.lc-96 svg{width:96px;height:96px}.lc-80 svg{width:80px;height:80px}.lc-64 svg{width:64px;height:64px}
.lc-48 svg{width:48px;height:48px}.lc-40 svg{width:40px;height:40px}.lc-36 svg{width:36px;height:36px}
.lc-32 svg{width:32px;height:32px}.lc-28 svg{width:28px;height:28px}.lc-24 svg{width:24px;height:24px}
.lc-20 svg{width:20px;height:20px}

/* Slides */
.slide-container{width:100vw;height:100vh;position:relative}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:44px 70px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.slide.active{opacity:1;pointer-events:auto}
.slide .anim{opacity:0;transform:translateY(45px);transition:none}
.slide.active .anim.show{opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}

/* Deco */
.deco{position:absolute;border-radius:50%;pointer-events:none}
.deco-pink{background:radial-gradient(circle,rgba(255,107,53,.15),transparent)}
.deco-peach{background:radial-gradient(circle,rgba(244,162,97,.12),transparent)}
.deco-lav{background:radial-gradient(circle,rgba(127,90,240,.1),transparent)}

/* Floating particles */
.particles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.particle{position:absolute;border-radius:50%;animation:float-particle linear infinite;opacity:0}
@keyframes float-particle{
  0%{transform:translateY(100vh) scale(0);opacity:0}
  10%{opacity:1}
  90%{opacity:1}
  100%{transform:translateY(-10vh) scale(1);opacity:0}
}

/* Animated grid bg */
.grid-bg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,107,53,.06) 1px,transparent 1px);
  background-size:40px 40px;opacity:.6}

/* Type */
.t-hero{font-size:5rem;font-weight:900;line-height:1.15;text-align:center}
.t-huge{font-size:4rem;font-weight:900;line-height:1.2;text-align:center}
.t-big{font-size:3rem;font-weight:800;line-height:1.3;text-align:center}
.t-mid{font-size:2.2rem;font-weight:700;line-height:1.4;text-align:center}
.t-body{font-size:1.7rem;font-weight:400;line-height:1.6;text-align:center}
.t-sm{font-size:1.25rem;font-weight:400;line-height:1.5;text-align:center}

/* Color */
.c-pink{color:#FF6B35}.c-rose{color:#E71D36}.c-coral{color:#FF6B6B}.c-orange{color:#F4A261}
.c-purple{color:#7F5AF0}.c-teal{color:#2EC4B6}.c-blue{color:#4A90D9}.c-dark{color:#FFFFFE}
.c-gray{color:#A7A9BE}.c-white{color:#fff}

/* BG highlight */
.bg-pink{background:rgba(255,107,53,.15);padding:5px 18px;border-radius:10px}
.bg-rose{background:rgba(231,29,54,.15);padding:5px 18px;border-radius:10px}
.bg-coral{background:rgba(255,107,107,.15);padding:5px 18px;border-radius:10px}
.bg-peach{background:rgba(244,162,97,.15);padding:5px 18px;border-radius:10px}
.bg-teal{background:rgba(46,196,182,.15);padding:5px 18px;border-radius:10px}

.ul-rose{text-decoration:underline;text-decoration-color:#E71D36;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-pink{text-decoration:underline;text-decoration-color:#FF6B35;text-decoration-thickness:4px;text-underline-offset:8px}
.bold{font-weight:900}.italic{font-style:italic}
.line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,#FF6B35,#F4A261);margin:18px auto}

/* === Layouts === */
.two-col{display:flex;gap:32px;width:92%;max-width:1200px;align-items:stretch}
.col-card{flex:1;background:transparent;border-radius:0 20px 20px 0;padding:32px 28px;border:none;box-shadow:none;display:flex;flex-direction:column;align-items:center;gap:10px;position:relative;overflow:hidden}

/* Flow */
.flow{display:flex;align-items:center;gap:10px;margin:10px 0;flex-wrap:wrap;justify-content:center}
.flow-step{background:rgba(255,107,53,.15);padding:8px 16px;border-radius:10px;font-size:1.25rem;font-weight:700;display:flex;align-items:center;gap:6px;position:relative;transition:transform .3s}
.flow-step:hover{transform:scale(1.05)}
.flow-arrow{color:#FF6B35}

/* Pulse animation */
.pulse{animation:pulse-glow 2s ease-in-out infinite}
@keyframes pulse-glow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.85}}

/* VS */
.vs-wrap{display:flex;gap:36px;align-items:center;justify-content:center;width:88%;max-width:1000px}
.vs-box{flex:1;padding:32px 24px;border-radius:18px;text-align:center;position:relative;overflow:hidden}
.vs-left{background:transparent;border:none}
.vs-right{background:transparent;border:none}
.vs-mid{font-size:3rem;font-weight:900;color:#FF6B35}

/* Concept */
.concept-word{font-size:6rem;font-weight:900;letter-spacing:8px;background:linear-gradient(135deg,#FF6B35,#F4A261,#7F5AF0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.final-word{font-size:4.5rem;font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,#E71D36,#FF6B35,#F4A261);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.glow-text{font-size:2.6rem;font-weight:800;color:#FF6B35;text-shadow:0 0 40px rgba(255,107,53,.4);letter-spacing:10px}

/* Shapes */
.shape-grid{display:flex;gap:20px;margin:14px 0;justify-content:center}
.shape-circle{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;font-weight:900;color:#fff;transition:transform .3s;cursor:default}
.shape-circle:hover{transform:scale(1.1)}
.sh-sm{width:90px;height:90px;font-size:1.7rem}
.sh-lg{width:120px;height:120px;font-size:1.9rem}
.sp{background:linear-gradient(135deg,#FF6B35,#E76F51)}
.so{background:linear-gradient(135deg,#F4A261,#E9C46A)}
.sv{background:linear-gradient(135deg,#7F5AF0,#9B5DE5)}
.st{background:linear-gradient(135deg,#2EC4B6,#06D6A0)}

/* Mini grid */
.mini-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;width:88%;max-width:1060px}
.mini-card{background:rgba(26,25,50,.5);border-radius:14px;padding:22px 14px;text-align:center;border:2px solid rgba(255,107,53,.15);box-shadow:0 4px 16px rgba(255,107,53,.08);display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.mini-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(255,107,53,.2)}

/* Icon badge */
.icon-badge{width:68px;height:68px;border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.ib-rose{background:linear-gradient(135deg,rgba(231,29,54,.2),rgba(231,29,54,.1))}
.ib-purple{background:linear-gradient(135deg,rgba(127,90,240,.2),rgba(127,90,240,.1))}
.ib-teal{background:linear-gradient(135deg,rgba(46,196,182,.2),rgba(46,196,182,.1))}
.ib-orange{background:linear-gradient(135deg,rgba(244,162,97,.2),rgba(244,162,97,.1))}

.icon-row{display:flex;gap:22px;justify-content:center;align-items:center;flex-wrap:wrap}

/* Progress bar */
.progress-bar{width:100%;height:8px;background:rgba(255,107,53,.15);border-radius:4px;overflow:hidden;margin-top:6px}
.progress-fill{height:100%;border-radius:4px;transition:width 1.5s ease}
.pf-rose{background:linear-gradient(90deg,#FF6B35,#E71D36)}
.pf-purple{background:linear-gradient(90deg,#9B5DE5,#7F5AF0)}
.pf-teal{background:linear-gradient(90deg,#06D6A0,#2EC4B6)}
.pf-orange{background:linear-gradient(90deg,#E9C46A,#F4A261)}

/* VS detail items */
.vs-detail{display:flex;flex-direction:column;gap:8px;margin-top:12px;width:100%}
.vs-item{display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;padding:6px 10px;border-radius:8px}
.vs-item-bad{background:rgba(231,29,54,.1);color:#E71D36}
.vs-item-good{background:rgba(46,196,182,.1);color:#2EC4B6}

/* Slide number indicator */
.slide-indicator{position:fixed;bottom:20px;right:30px;z-index:100;display:flex;gap:8px;align-items:center}
.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,107,53,.25);transition:all .3s}
.dot.active{background:#FF6B35;width:28px;border-radius:5px}

/* Watermark / page badge */
.page-badge{position:absolute;top:20px;right:30px;font-size:.85rem;color:rgba(255,107,53,.4);font-weight:700;letter-spacing:2px}

/* Backgrounds */
.bg-1{background:radial-gradient(ellipse at 50% 30%,#1A1932 0%,#0F0E17 100%)}.bg-2{background:radial-gradient(ellipse at 30% 20%,#1A1932 0%,#0F0E17 100%)}
.bg-3{background:radial-gradient(ellipse at 70% 80%,#1A1932 0%,#0F0E17 100%)}.bg-4{background:radial-gradient(ellipse at 50% 50%,#1A1932 0%,#0F0E17 100%)}
.bg-5{background:radial-gradient(ellipse at 50% 70%,#1A1932 0%,#0F0E17 100%)}

/* Illustration styles */
.illust-box{position:relative;margin:10px 0}

/* Animated connection lines */
.conn-line{stroke-dasharray:8 4;animation:dash-move 1.5s linear infinite}
@keyframes dash-move{to{stroke-dashoffset:-24}}

/* Glowing ring */
.glow-ring{width:140px;height:140px;border-radius:50%;border:4px solid rgba(255,107,53,.25);display:flex;align-items:center;justify-content:center;position:relative;animation:ring-pulse 3s ease-in-out infinite}
@keyframes ring-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,107,53,.2)}50%{box-shadow:0 0 0 18px rgba(255,107,53,0)}}

/* Animated gradient border */
.gradient-border{position:relative;border-radius:20px;padding:3px}
.gradient-border::before{content:'';position:absolute;inset:0;border-radius:20px;padding:3px;background:linear-gradient(135deg,#FF6987,#FF8C42,#9B59B6,#2BA8A4);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:border-rotate 4s linear infinite}
@keyframes border-rotate{0%{background:linear-gradient(0deg,#FF6987,#FF8C42,#9B59B6,#2BA8A4)}25%{background:linear-gradient(90deg,#FF6987,#FF8C42,#9B59B6,#2BA8A4)}50%{background:linear-gradient(180deg,#FF6987,#FF8C42,#9B59B6,#2BA8A4)}75%{background:linear-gradient(270deg,#FF6987,#FF8C42,#9B59B6,#2BA8A4)}100%{background:linear-gradient(360deg,#FF6987,#FF8C42,#9B59B6,#2BA8A4)}}

/* Center diagram */
.center-diagram{display:flex;align-items:center;justify-content:center;gap:0;margin:10px 0}

/* Tag pill */
.tag{display:inline-flex;align-items:center;gap:4px;padding:4px 14px;border-radius:20px;font-size:.95rem;font-weight:700}
.tag-rose{background:rgba(231,29,54,.15);color:#E71D36}
.tag-teal{background:rgba(46,196,182,.15);color:#2EC4B6}
.tag-purple{background:rgba(127,90,240,.15);color:#7F5AF0}
.tag-orange{background:rgba(244,162,97,.15);color:#F4A261}

/* Shine effect for cards */
.shine{position:relative;overflow:hidden}
</style>
</head>
<body>

<div class="slide-container">



<!-- =========== Slide 1: 开场总览 =========== -->
<div class="slide bg-1 active" id="s0">
  <div class="grid-bg"></div>
  <div class="particles" id="particles0"></div>
  <div class="deco deco-pink" style="width:500px;height:500px;top:-200px;right:-180px"></div>
  <div class="deco deco-peach" style="width:350px;height:350px;bottom:-100px;left:-100px"></div>
  

  <div class="anim" style="margin-bottom:14px">
    <!-- Illustration: Robot + Code combined icon -->
    <svg width="180" height="100" viewBox="0 0 180 100">
      <defs>
        <linearGradient id="g1" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#FF6987"/>
          <stop offset="100%" style="stop-color:#FF8C42"/>
        </linearGradient>
      </defs>
      <!-- Robot body -->
      <rect x="25" y="28" width="56" height="48" rx="14" fill="url(#g1)" opacity=".15"/>
      <rect x="25" y="28" width="56" height="48" rx="14" fill="none" stroke="url(#g1)" stroke-width="2.5"/>
      <!-- Eyes -->
      <circle cx="43" cy="48" r="5" fill="#FF6987"/>
      <circle cx="63" cy="48" r="5" fill="#FF6987"/>
      <circle cx="43" cy="47" r="2" fill="#fff"/>
      <circle cx="63" cy="47" r="2" fill="#fff"/>
      <!-- Antenna -->
      <line x1="53" y1="28" x2="53" y2="16" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round"/>
      <circle cx="53" cy="13" r="4" fill="#FF8C42"/>
      <!-- Arrow -->
      <path d="M90 52 L108 52" stroke="#ccc" stroke-width="2" stroke-dasharray="4 3"/>
      <polygon points="108,48 118,52 108,56" fill="#ccc"/>
      <!-- Code bracket -->
      <text x="125" y="44" font-size="36" font-weight="900" fill="url(#g1)" font-family="monospace">{</text>
      <text x="150" y="62" font-size="14" font-weight="700" fill="#FF8C42">_</text>
      <text x="143" y="72" font-size="36" font-weight="900" fill="url(#g1)" font-family="monospace">}</text>
    </svg>
  </div>
  <div class="anim t-huge c-dark">用 AI 写代码 <span style="font-size:2rem"></span></div>
  <div class="anim t-big c-pink" style="margin-top:10px">你踩过这些坑吗？ <span style="font-size:1.5rem"></span></div>
  <div class="anim line"></div>
  <div class="anim mini-grid">
    <div class="mini-card shine">
      <div class="icon-badge ib-rose">
        <span class="lc lc-36 c-rose"><i data-lucide="zap"></i></span>
      </div>
      <div style="font-size:1.15rem;font-weight:700">一步到位<br><span class="c-coral">上下文爆</span> <span class="lc lc-20 c-rose"><i data-lucide="flame"></i></span></div>
      <div class="progress-bar"><div class="progress-fill pf-rose" data-width="95%"></div></div>
      <div class="tag tag-rose"><span class="lc lc-20 c-rose"><i data-lucide="alert-triangle"></i></span>高频踩坑</div>
    </div>
    <div class="mini-card shine">
      <div class="icon-badge ib-purple">
        <span class="lc lc-36 c-purple"><i data-lucide="check-circle"></i></span>
      </div>
      <div style="font-size:1.15rem;font-weight:700">说完成了<br><span class="c-purple">一半没做</span> (；´Д｀)</div>
      <div class="progress-bar"><div class="progress-fill pf-purple" data-width="80%"></div></div>
      <div class="tag tag-purple"><span class="lc lc-20 c-purple"><i data-lucide="alert-triangle"></i></span>经常遇到</div>
    </div>
    <div class="mini-card shine">
      <div class="icon-badge ib-teal">
        <span class="lc lc-36 c-teal"><i data-lucide="bug"></i></span>
      </div>
      <div style="font-size:1.15rem;font-weight:700">能跑就行<br><span class="c-teal">隐藏Bug</span> (´-ω-`)</div>
      <div class="progress-bar"><div class="progress-fill pf-teal" data-width="88%"></div></div>
      <div class="tag tag-teal"><span class="lc lc-20 c-teal"><i data-lucide="alert-triangle"></i></span>后患无穷</div>
    </div>
    <div class="mini-card shine">
      <div class="icon-badge ib-orange">
        <span class="lc lc-36 c-orange"><i data-lucide="copy"></i></span>
      </div>
      <div style="font-size:1.15rem;font-weight:700">坏写法<br><span class="c-orange">全项目传染</span> Σ(°Д°;</div>
      <div class="progress-bar"><div class="progress-fill pf-orange" data-width="72%"></div></div>
      <div class="tag tag-orange"><span class="lc lc-20 c-orange"><i data-lucide="alert-triangle"></i></span>难以根除</div>
    </div>
  </div>
</div>

<!-- =========== Slide 2: 问题 ① ② =========== -->
<div class="slide bg-2" id="s1">
  <div class="grid-bg"></div>
  <div class="deco deco-pink" style="width:400px;height:400px;top:-130px;left:-130px"></div>
  
  <div class="anim t-mid c-gray" style="margin-bottom:18px">AI 编程的典型翻车 (；¬д¬)</div>
  <div class="anim two-col">
    <div class="col-card shine" style="border-left:6px solid #E8395B">
      <!-- Visual: Explosion illustration -->
      <div style="position:relative;width:100%;display:flex;justify-content:center">
        <svg width="240" height="80" viewBox="0 0 240 80">
          <defs>
            <linearGradient id="g2a" x1="0%" y1="0%" x2="100%"><stop offset="0%" style="stop-color:#4A90D9;stop-opacity:.15"/><stop offset="100%" style="stop-color:#4A90D9;stop-opacity:.05"/></linearGradient>
            <linearGradient id="g2b" x1="0%" y1="0%" x2="100%"><stop offset="0%" style="stop-color:#E8395B;stop-opacity:.15"/><stop offset="100%" style="stop-color:#FF6987;stop-opacity:.05"/></linearGradient>
          </defs>
          <!-- Context bar growing -->
          <rect x="10" y="20" width="40" height="40" rx="6" fill="url(#g2a)" stroke="#4A90D9" stroke-width="1.5"/>
          <text x="30" y="44" text-anchor="middle" font-size="10" fill="#4A90D9" font-weight="700">代码</text>
          <rect x="60" y="12" width="50" height="56" rx="6" fill="url(#g2a)" stroke="#4A90D9" stroke-width="1.5"/>
          <text x="85" y="44" text-anchor="middle" font-size="10" fill="#4A90D9" font-weight="700">更多代码</text>
          <rect x="120" y="4" width="55" height="72" rx="6" fill="url(#g2b)" stroke="#E8395B" stroke-width="1.5"/>
          <text x="148" y="38" text-anchor="middle" font-size="10" fill="#E8395B" font-weight="700">上下文</text>
          <text x="148" y="52" text-anchor="middle" font-size="10" fill="#E8395B" font-weight="700">溢出!</text>
          <!-- Explosion marks -->
          <line x1="185" y1="30" x2="200" y2="18" stroke="#FF6987" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="185" y1="40" x2="205" y2="40" stroke="#FF8C42" stroke-width="2.5" stroke-linecap="round"/>
          <line x1="185" y1="50" x2="200" y2="62" stroke="#FF6987" stroke-width="2.5" stroke-linecap="round"/>
          <g transform="translate(205,28)"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#FF6987" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z"/></svg></g>
        </svg>
      </div>
      <div class="t-mid c-dark"><span class="c-rose bold ul-rose">一步到位</span></div>
      <div class="flow">
        <div class="flow-step"><span class="lc lc-24 c-blue"><i data-lucide="file-code"></i></span>写全部</div>
        <span class="lc lc-24 flow-arrow"><i data-lucide="arrow-right"></i></span>
        <div class="flow-step" style="background:rgba(255,107,107,.1)"><span class="lc lc-24 c-coral"><i data-lucide="flame"></i></span><span class="c-coral">上下文爆</span></div>
        <span class="lc lc-24 flow-arrow"><i data-lucide="arrow-right"></i></span>
        <div class="flow-step" style="background:rgba(232,57,91,.1)"><span class="lc lc-24 c-rose"><i data-lucide="hammer"></i></span><span class="c-rose bold">烂尾</span></div>
      </div>
      <div class="t-sm c-gray italic">没文档的半成品 (´；д；`)</div>
    </div>
    <div class="col-card shine" style="border-left:6px solid #9B59B6">
      <!-- Visual: Checklist with gaps -->
      <div style="position:relative;width:100%;display:flex;justify-content:center">
        <svg width="200" height="90" viewBox="0 0 200 90">
          <rect x="30" y="5" width="140" height="80" rx="10" fill="rgba(155,89,182,.04)" stroke="rgba(155,89,182,.15)" stroke-width="1.5"/>
          <!-- Done items -->
          <rect x="48" y="14" width="14" height="14" rx="3" fill="#2BA8A4" opacity=".8"/>
          <polyline points="51,21 55,25 61,17" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <rect x="68" y="16" width="80" height="10" rx="3" fill="rgba(43,168,164,.15)"/>
          
          <rect x="48" y="34" width="14" height="14" rx="3" fill="#2BA8A4" opacity=".8"/>
          <polyline points="51,41 55,45 61,37" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
          <rect x="68" y="36" width="65" height="10" rx="3" fill="rgba(43,168,164,.15)"/>
          
          <!-- Missing items -->
          <rect x="48" y="54" width="14" height="14" rx="3" fill="none" stroke="#E8395B" stroke-width="1.5" stroke-dasharray="3 2"/>
          <rect x="68" y="56" width="90" height="10" rx="3" fill="rgba(232,57,91,.08)"/>
          <line x1="68" y1="61" x2="158" y2="61" stroke="#E8395B" stroke-width="1" opacity=".4"/>
          
          <rect x="48" y="72" width="14" height="14" rx="3" fill="none" stroke="#E8395B" stroke-width="1.5" stroke-dasharray="3 2"/>
          <rect x="68" y="74" width="70" height="10" rx="3" fill="rgba(232,57,91,.08)"/>
          <line x1="68" y1="79" x2="138" y2="79" stroke="#E8395B" stroke-width="1" opacity=".4"/>
          
          <!-- Cross mark -->
          <line x1="170" y1="55" x2="185" y2="70" stroke="#E8395B" stroke-width="3" stroke-linecap="round"/>
          <line x1="185" y1="55" x2="170" y2="70" stroke="#E8395B" stroke-width="3" stroke-linecap="round"/>
        </svg>
      </div>
      <div class="t-mid c-dark"><i>"<span class="c-purple bold">任务完成了</span>"</i></div>
      <div class="flow">
        <div class="flow-step"><span class="lc lc-24 c-teal"><i data-lucide="layers"></i></span>核心功能</div>
        <span class="lc lc-24 flow-arrow"><i data-lucide="arrow-right"></i></span>
        <div class="flow-step" style="background:rgba(155,89,182,.08)"><span class="lc lc-24 c-rose"><i data-lucide="x-circle"></i></span><span class="c-rose bold">一半没做</span></div>
      </div>
      <div class="t-sm c-gray italic">明确要求的功能被跳过 (╯°□°)╯</div>
    </div>
  </div>
</div>

<!-- =========== Slide 3: 问题 ③ ④ =========== -->
<div class="slide bg-3" id="s2">
  <div class="grid-bg"></div>
  <div class="deco deco-lav" style="width:450px;height:450px;bottom:-150px;right:-150px"></div>
  
  <div class="anim t-mid c-gray" style="margin-bottom:18px">更隐蔽的坑 (´・ω・｀)</div>
  <div class="anim two-col">
    <div class="col-card shine" style="border-left:6px solid #2BA8A4">
      <!-- Visual: Iceberg illustration -->
      <div style="position:relative;width:100%;display:flex;justify-content:center">
        <svg width="220" height="110" viewBox="0 0 220 110">
          <!-- Water line -->
          <line x1="10" y1="42" x2="210" y2="42" stroke="#4A90D9" stroke-width="1" stroke-dasharray="6 3" opacity=".4"/>
          <text x="192" y="38" font-size="9" fill="#4A90D9" opacity=".6">水面</text>
          <!-- Above water (visible) -->
          <polygon points="90,10 130,10 138,40 82,40" fill="rgba(43,168,164,.2)" stroke="#2BA8A4" stroke-width="1.5"/>
          <text x="110" y="30" text-anchor="middle" font-size="10" fill="#2BA8A4" font-weight="700">能跑</text><g transform="translate(122,22)"><svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#2BA8A4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></g>
          <!-- Below water (hidden bugs) -->
          <polygon points="82,44 138,44 165,100 55,100" fill="rgba(232,57,91,.1)" stroke="#E8395B" stroke-width="1.5"/>
          <text x="110" y="62" text-anchor="middle" font-size="10" fill="#E8395B" font-weight="700">Bug #1</text>
          <text x="110" y="76" text-anchor="middle" font-size="10" fill="#E8395B" font-weight="700">Bug #2</text>
          <text x="110" y="90" text-anchor="middle" font-size="10" fill="#E8395B" font-weight="700">Bug #3...</text>
          <!-- Water effect -->
          <path d="M10,42 Q30,38 50,42 T90,42 T130,42 T170,42 T210,42" fill="none" stroke="#4A90D9" stroke-width="1.5" opacity=".3"/>
        </svg>
      </div>
      <div class="t-mid c-dark"><span class="c-teal italic">看起来能跑</span></div>
      <div class="flow">
        <div class="flow-step" style="background:rgba(43,168,164,.06)"><span class="lc lc-24 c-teal"><i data-lucide="play"></i></span>能运行</div>
        <span class="lc lc-24 flow-arrow"><i data-lucide="arrow-right"></i></span>
        <div class="flow-step" style="background:rgba(255,107,107,.1)"><span class="lc lc-24 c-coral"><i data-lucide="bug"></i></span><span class="c-coral bold">隐藏Bug×N</span></div>
      </div>
      <div class="t-body c-purple" style="margin-top:6px">修 bug 花 <span class="bold ul-rose" style="font-size:1.9rem">几倍时间</span> (´；ω；`)</div>
    </div>
    <div class="col-card shine" style="border-left:6px solid #FF8C42">
      <!-- Visual: Virus spread diagram -->
      <div style="position:relative;width:100%;display:flex;justify-content:center">
        <svg width="280" height="120" viewBox="0 0 280 120">
          <defs>
            <marker id="ah" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#FF6987"/></marker>
            <filter id="glow"><feGaussianBlur stdDeviation="2" result="coloredBlur"/><feMerge><feMergeNode in="coloredBlur"/><feMergeNode in="SourceGraphic"/></feMerge></filter>
          </defs>
          <!-- Source bug -->
          <circle cx="50" cy="55" r="26" fill="#FFE8D6" stroke="#FF8C42" stroke-width="2"/>
          <text x="50" y="50" text-anchor="middle" fill="#FF8C42" font-size="11" font-weight="700">1 个</text>
          <text x="50" y="64" text-anchor="middle" fill="#FF8C42" font-size="11" font-weight="700">bug</text>
          <!-- Spreading lines with animation -->
          <line x1="76" y1="40" x2="120" y2="22" stroke="#FF6987" stroke-width="2" marker-end="url(#ah)" class="conn-line"/>
          <line x1="76" y1="55" x2="120" y2="55" stroke="#FF6987" stroke-width="2" marker-end="url(#ah)" class="conn-line" style="animation-delay:.2s"/>
          <line x1="76" y1="70" x2="120" y2="88" stroke="#FF6987" stroke-width="2" marker-end="url(#ah)" class="conn-line" style="animation-delay:.4s"/>
          <!-- Infected modules -->
          <rect x="125" y="8" width="100" height="28" rx="8" fill="#FFE4E4" stroke="#E8395B" stroke-width="1.5"/>
          <text x="175" y="20" text-anchor="middle" fill="#E8395B" font-size="11" font-weight="700">模块 A</text><circle cx="125" cy="16" r="4" fill="#E8395B"/>
          <rect x="125" y="42" width="100" height="28" rx="8" fill="#FFE4E4" stroke="#E8395B" stroke-width="1.5"/>
          <text x="175" y="54" text-anchor="middle" fill="#E8395B" font-size="11" font-weight="700">模块 B</text><circle cx="125" cy="50" r="4" fill="#E8395B"/>
          <rect x="125" y="76" width="100" height="28" rx="8" fill="#FFE4E4" stroke="#E8395B" stroke-width="1.5"/>
          <text x="175" y="88" text-anchor="middle" fill="#E8395B" font-size="11" font-weight="700">模块 C</text><circle cx="125" cy="84" r="4" fill="#E8395B"/>
          <!-- Second wave -->
          <line x1="225" y1="22" x2="248" y2="22" stroke="#E8395B" stroke-width="1.5" marker-end="url(#ah)" class="conn-line" style="animation-delay:.6s" opacity=".5"/>
          <line x1="225" y1="56" x2="248" y2="56" stroke="#E8395B" stroke-width="1.5" marker-end="url(#ah)" class="conn-line" style="animation-delay:.8s" opacity=".5"/>
          <g transform="translate(254,14)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#E8395B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 15h8"/><path d="M9 9h.01"/><path d="M15 9h.01"/></svg></g>
          <g transform="translate(254,48)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#E8395B" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 15h8"/><path d="M9 9h.01"/><path d="M15 9h.01"/></svg></g>
        </svg>
      </div>
      <div class="t-mid c-dark"><span class="c-orange bold">坏写法传染</span> Σ(っ°Д°;)っ</div>
      <div style="display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center">
        <span class="tag tag-orange"><span class="lc lc-20 c-orange"><i data-lucide="alert-circle"></i></span>1 → N 扩散</span>
        <span class="tag tag-rose"><span class="lc lc-20 c-rose"><i data-lucide="trending-up"></i></span>修复成本指数增长</span>
      </div>
    </div>
  </div>
</div>

<!-- =========== Slide 4: 现状 + VS 对比 =========== -->
<div class="slide bg-4" id="s3">
  <div class="grid-bg"></div>
  <div class="deco deco-peach" style="width:500px;height:500px;top:-220px;left:50%;margin-left:-250px"></div>
  
  <div class="anim t-body c-gray">注意到一个现状 —— (｀・ω・´)</div>
  <div class="anim" style="margin:10px 0">
    <span class="t-big c-dark"><span class="c-blue bold">同等模型</span>越来越多，体验差距反而</span><span class="t-big bg-rose c-rose bold" style="font-size:3.4rem">拉大</span>
  </div>
  <div class="anim" style="margin:8px 0 18px">
    <!-- Enhanced chart -->
    <svg width="480" height="140" viewBox="0 0 480 140">
      <defs>
        <linearGradient id="chartFill" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" style="stop-color:#FF6987;stop-opacity:.2"/>
          <stop offset="100%" style="stop-color:#FF6987;stop-opacity:0"/>
        </linearGradient>
      </defs>
      <!-- Grid lines -->
      <line x1="40" y1="30" x2="440" y2="30" stroke="#f5e5e5" stroke-width="1"/>
      <line x1="40" y1="60" x2="440" y2="60" stroke="#f5e5e5" stroke-width="1"/>
      <line x1="40" y1="90" x2="440" y2="90" stroke="#f5e5e5" stroke-width="1"/>
      <!-- Axis -->
      <line x1="40" y1="110" x2="440" y2="110" stroke="#e0d0d0" stroke-width="2"/>
      <line x1="40" y1="25" x2="40" y2="110" stroke="#e0d0d0" stroke-width="2"/>
      <!-- Area fill -->
      <path d="M60,100 L140,92 L220,76 L300,52 L380,28 L420,16 L420,110 L60,110 Z" fill="url(#chartFill)"/>
      <!-- Line -->
      <polyline points="60,100 140,92 220,76 300,52 380,28 420,16" fill="none" stroke="#FF6987" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
      <!-- Data points -->
      <circle cx="60" cy="100" r="4" fill="#fff" stroke="#FF6987" stroke-width="2.5"/>
      <circle cx="140" cy="92" r="4" fill="#fff" stroke="#FF6987" stroke-width="2.5"/>
      <circle cx="220" cy="76" r="5" fill="#fff" stroke="#FF6987" stroke-width="2.5"/>
      <circle cx="300" cy="52" r="5" fill="#fff" stroke="#FF6987" stroke-width="2.5"/>
      <circle cx="380" cy="28" r="5" fill="#fff" stroke="#FF6987" stroke-width="2.5"/>
      <circle cx="420" cy="16" r="7" fill="#FF6987" stroke="#fff" stroke-width="2"/>
      <!-- Labels -->
      <text x="60" y="126" fill="#bbb" font-size="11" text-anchor="middle">2023</text>
      <text x="140" y="126" fill="#bbb" font-size="11" text-anchor="middle">GPT-4</text>
      <text x="220" y="126" fill="#bbb" font-size="11" text-anchor="middle">Claude</text>
      <text x="300" y="126" fill="#bbb" font-size="11" text-anchor="middle">Gemini</text>
      <text x="380" y="126" fill="#bbb" font-size="11" text-anchor="middle">2025</text>
      <text x="420" y="126" fill="#FF6987" font-size="11" text-anchor="middle" font-weight="700">Now</text>
      <!-- Y axis label -->
      <text x="25" y="32" fill="#ccc" font-size="9" text-anchor="middle">大</text>
      <text x="25" y="102" fill="#ccc" font-size="9" text-anchor="middle">小</text>
      <text x="12" y="67" fill="#ddd" font-size="10" text-anchor="middle" transform="rotate(-90 12 67)">体验差距</text>
      <!-- Annotation -->
      <rect x="340" y="2" width="80" height="20" rx="6" fill="rgba(232,57,91,.08)"/>
      <text x="380" y="15" text-anchor="middle" fill="#E8395B" font-size="10" font-weight="700">差距在拉大!</text>
    </svg>
  </div>
  <div class="anim line"></div>
  <div class="anim t-sm c-gray" style="margin-bottom:14px">比如编程场景 —— 同一个模型，不同产品</div>
  <div class="anim vs-wrap">
    <div class="vs-box vs-left shine">
      <span class="lc lc-48 c-coral"><i data-lucide="x-circle"></i></span>
      <div class="c-coral bold" style="font-size:2.2rem;margin-top:8px">Bug 一坨</div>
      <div class="vs-detail">
        <div class="vs-item vs-item-bad"><span class="lc lc-20"><i data-lucide="x"></i></span>边界条件遗漏</div>
        <div class="vs-item vs-item-bad"><span class="lc lc-20"><i data-lucide="x"></i></span>错误处理缺失</div>
        <div class="vs-item vs-item-bad"><span class="lc lc-20"><i data-lucide="x"></i></span>类型不一致</div>
      </div>
      <div class="t-sm c-gray" style="margin-top:4px">质量堪忧 (´；д；`)</div>
    </div>
    <div class="vs-mid">
      <div>VS</div>
      <svg width="40" height="40" viewBox="0 0 40 40" style="margin-top:4px">
        <line x1="4" y1="20" x2="16" y2="20" stroke="#FF6987" stroke-width="2"/>
        <line x1="24" y1="20" x2="36" y2="20" stroke="#2BA8A4" stroke-width="2"/>
      </svg>
    </div>
    <div class="vs-box vs-right shine">
      <span class="lc lc-48 c-teal"><i data-lucide="check-circle"></i></span>
      <div class="c-teal bold" style="font-size:2.2rem;margin-top:8px">直接提交</div>
      <div class="vs-detail">
        <div class="vs-item vs-item-good"><span class="lc lc-20"><i data-lucide="check"></i></span>完整错误处理</div>
        <div class="vs-item vs-item-good"><span class="lc lc-20"><i data-lucide="check"></i></span>类型安全保证</div>
        <div class="vs-item vs-item-good"><span class="lc lc-20"><i data-lucide="check"></i></span>边界全覆盖</div>
      </div>
      <div class="t-sm c-gray" style="margin-top:4px">生产级可用 ✧(≖ ◡ ≖✿)</div>
    </div>
  </div>
</div>

<!-- =========== Slide 5: 为什么 → HARNESS =========== -->
<div class="slide bg-5" id="s4">
  <div class="grid-bg"></div>
  <div class="deco deco-lav" style="width:600px;height:600px;top:50%;left:50%;margin-top:-300px;margin-left:-300px"></div>
  
  <div class="anim" style="display:flex;align-items:center;gap:16px">
    <span class="lc lc-64 c-pink"><i data-lucide="help-circle"></i></span>
    <span class="t-huge c-pink bold">为什么？</span> <span style="font-size:2rem">(｡ŏ_ŏ)</span>
  </div>
  <div class="anim t-mid c-dark bg-pink" style="margin-top:14px">
    因为<span class="c-blue bold ul-rose">模型是一样的</span> (｀・ω・´)
  </div>
  <div class="anim" style="margin:10px 0">
    <!-- Visual: Same model, different results -->
    <svg width="460" height="100" viewBox="0 0 460 100">
      <defs>
        <linearGradient id="g5" x1="0%" y1="0%" x2="100%"><stop offset="0%" style="stop-color:#FF6987"/><stop offset="100%" style="stop-color:#FF8C42"/></linearGradient>
      </defs>
      <!-- Model box in center -->
      <rect x="170" y="20" width="120" height="60" rx="14" fill="rgba(74,144,217,.08)" stroke="#4A90D9" stroke-width="2"/>
      <text x="230" y="46" text-anchor="middle" font-size="14" fill="#4A90D9" font-weight="700">同一模型</text><g transform="translate(170,34)"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#4A90D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="10" rx="2"/><circle cx="12" cy="5" r="2"/><path d="M12 7v4"/><line x1="8" y1="16" x2="8" y2="16"/><line x1="16" y1="16" x2="16" y2="16"/></svg></g>
      <text x="230" y="64" text-anchor="middle" font-size="11" fill="#4A90D9" opacity=".7">GPT-4 / Claude</text>
      <!-- Left: bad result -->
      <line x1="170" y1="50" x2="100" y2="50" stroke="#E8395B" stroke-width="2" marker-end="url(#ah)" stroke-dasharray="6 3"/>
      <rect x="10" y="28" width="85" height="44" rx="10" fill="rgba(232,57,91,.08)" stroke="#E8395B" stroke-width="1.5"/>
      <text x="52" y="48" text-anchor="middle" font-size="11" fill="#E8395B" font-weight="700">Bug一堆</text><g transform="translate(20,40)"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#E8395B" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg></g>
      <text x="52" y="62" text-anchor="middle" font-size="9" fill="#E8395B">产品 A</text>
      <!-- Right: good result -->
      <line x1="290" y1="50" x2="360" y2="50" stroke="#2BA8A4" stroke-width="2" marker-end="url(#ah)" stroke-dasharray="6 3"/>
      <rect x="365" y="28" width="85" height="44" rx="10" fill="rgba(43,168,164,.08)" stroke="#2BA8A4" stroke-width="1.5"/>
      <text x="408" y="48" text-anchor="middle" font-size="11" fill="#2BA8A4" font-weight="700">生产级</text><g transform="translate(376,40)"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="#2BA8A4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg></g>
      <text x="408" y="62" text-anchor="middle" font-size="9" fill="#2BA8A4">产品 B</text>
    </svg>
  </div>
  <div class="anim" style="margin:6px 0"><span class="lc lc-40 c-pink"><i data-lucide="arrow-down"></i></span></div>
  <div class="anim t-big c-dark">差距在 <span class="bg-peach c-orange bold" style="font-size:3rem">怎么用模型</span> (｡･ω･｡)</div>
  <div class="anim" style="margin:6px 0"><span class="lc lc-40 c-pink"><i data-lucide="arrow-down"></i></span></div>
  <div class="anim" style="display:flex;align-items:center;gap:24px">
    <span class="concept-word">HARNESS</span>
  </div>
  <div class="anim shape-grid" style="margin-top:14px">
    <div class="shape-circle sh-sm sp" style="box-shadow:0 6px 20px rgba(255,105,135,.25)">
      <span class="lc lc-20 c-white"><i data-lucide="crown"></i></span>驭
    </div>
    <div class="shape-circle sh-sm so" style="box-shadow:0 6px 20px rgba(255,140,66,.25)">
      <span class="lc lc-20 c-white"><i data-lucide="link"></i></span>束
    </div>
    <div class="shape-circle sh-sm sv" style="box-shadow:0 6px 20px rgba(155,89,182,.25)">
      <span class="lc lc-20 c-white"><i data-lucide="gauge"></i></span>控
    </div>
  </div>
</div>

<!-- =========== Slide 6: 定义 + 终页 =========== -->
<div class="slide bg-1" id="s5">
  <div class="grid-bg"></div>
  <div class="particles" id="particles5"></div>
  <div class="deco deco-pink" style="width:800px;height:800px;top:50%;left:50%;margin-top:-400px;margin-left:-400px;opacity:.5"></div>
  
  <div class="anim t-mid c-gray italic">更准确的说法 —— 让模型 (｡･ω･｡)ﾉ</div>
  <div class="anim shape-grid" style="margin:20px 0">
    <div class="shape-circle sh-lg st" style="box-shadow:0 8px 24px rgba(43,168,164,.3)">
      <span class="lc lc-28 c-white"><i data-lucide="shield-check"></i></span>稳定
    </div>
    <div class="shape-circle sh-lg sp" style="box-shadow:0 8px 24px rgba(255,105,135,.3)">
      <span class="lc lc-28 c-white"><i data-lucide="check-check"></i></span>可靠
    </div>
    <div class="shape-circle sh-lg so" style="box-shadow:0 8px 24px rgba(255,140,66,.3)">
      <span class="lc lc-28 c-white"><i data-lucide="lock"></i></span>不失控
    </div>
  </div>
  <div class="anim t-mid c-dark">地工作 ✧*｡٩(ˊᗜˋ*)و✧*｡</div>
  <div class="anim line" style="margin:16px auto"></div>
  <div class="anim t-sm c-gray">这就是我们今天要讲的 (｀・ω・´)ゞ</div>
  <div class="anim final-word" style="margin-top:6px">Harness Engineering</div>
  <div class="anim glow-text" style="margin-top:10px">驾 驭 工 程</div>
  <div class="anim icon-row" style="margin-top:16px">
    <div class="glow-ring"><span class="lc lc-48 c-pink"><i data-lucide="target"></i></span></div>
    <div class="glow-ring" style="animation-delay:.5s"><span class="lc lc-48 c-orange"><i data-lucide="shield"></i></span></div>
    <div class="glow-ring" style="animation-delay:1s"><span class="lc lc-48 c-purple"><i data-lucide="settings"></i></span></div>
    <div class="glow-ring" style="animation-delay:1.5s"><span class="lc lc-48 c-teal"><i data-lucide="rocket"></i></span></div>
  </div>
</div>

</div>

<script>
lucide.createIcons();

const slides=document.querySelectorAll('.slide'),
      total=slides.length;
let cur=0;

// Animate progress bars in current slide
function animateProgressBars(slide){
  slide.querySelectorAll('.progress-fill').forEach(bar=>{
    const w=bar.dataset.width||'0%';
    bar.style.width='0%';
    setTimeout(()=>{bar.style.width=w},600);
  });
}

function go(n){
  if(n<0||n>=total||n===cur)return;
  slides[cur].classList.remove('active');
  slides[cur].querySelectorAll('.anim').forEach(e=>e.classList.remove('show'));
  cur=n;
  slides[cur].classList.add('active');
  slides[cur].querySelectorAll('.anim').forEach((e,i)=>{
    e.classList.remove('show');
    setTimeout(()=>e.classList.add('show'),200+i*280);
  });
  animateProgressBars(slides[cur]);
}

// Initial slide animation
slides[0].querySelectorAll('.anim').forEach((e,i)=>setTimeout(()=>e.classList.add('show'),400+i*320));
setTimeout(()=>animateProgressBars(slides[0]),800);

document.addEventListener('keydown',e=>{
  if(['ArrowRight','ArrowDown',' ','PageDown'].includes(e.key)){e.preventDefault();go(cur+1)}
  else if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();go(cur-1)}
  else if(e.key==='Home'){e.preventDefault();go(0)}
  else if(e.key==='End'){e.preventDefault();go(total-1)}
});

let tx=0,ty=0;
document.addEventListener('touchstart',e=>{tx=e.changedTouches[0].screenX;ty=e.changedTouches[0].screenY});
document.addEventListener('touchend',e=>{
  const dx=e.changedTouches[0].screenX-tx,dy=e.changedTouches[0].screenY-ty;
  if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>50){dx<0?go(cur+1):go(cur-1)}
});

let wc=false;
document.addEventListener('wheel',e=>{
  if(wc)return;wc=true;setTimeout(()=>wc=false,800);
  e.deltaY>0?go(cur+1):go(cur-1);
});

// Floating particles
function createParticles(containerId){
  const container=document.getElementById(containerId);
  if(!container)return;
  const colors=['rgba(255,107,53,.35)','rgba(244,162,97,.3)','rgba(127,90,240,.25)','rgba(46,196,182,.25)'];
  for(let i=0;i<12;i++){
    const p=document.createElement('div');
    p.className='particle';
    const size=Math.random()*8+4;
    p.style.cssText=`
      width:${size}px;height:${size}px;
      left:${Math.random()*100}%;
      background:${colors[Math.floor(Math.random()*colors.length)]};
      animation-duration:${Math.random()*6+6}s;
      animation-delay:${Math.random()*6}s;
    `;
    container.appendChild(p);
  }
}
createParticles('particles0');
createParticles('particles5');
</script>

</body>
</html>

path: assets/templates/PPT Template-level2/2.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harness Engineering 驾驭工程</title>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:#0F0E17;color:#FFFFFE;overflow:hidden;width:100vw;height:100vh}

:root {
  --accent: #7B5CF0;
  --accent2: #00D9FF;
  --accent-glow: rgba(123,92,240,0.3);
  --dark: #0F0E17;
  --dark2: #1A1932;
  --gray: #A7A9BE;
}

.lc{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.lc-96 svg{width:96px;height:96px}.lc-80 svg{width:80px;height:80px}.lc-64 svg{width:64px;height:64px}
.lc-48 svg{width:48px;height:48px}.lc-40 svg{width:40px;height:40px}.lc-36 svg{width:36px;height:36px}
.lc-32 svg{width:32px;height:32px}.lc-28 svg{width:28px;height:28px}.lc-24 svg{width:24px;height:24px}
.lc-20 svg{width:20px;height:20px}

.slide-container{width:100vw;height:100vh;position:relative}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px 60px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.slide.active{opacity:1;pointer-events:auto}
.slide .anim{opacity:0;transform:translateY(45px);transition:none}
.slide.active .anim.show{opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}

/* Floating particles */
.particles{position:absolute;width:100%;height:100%;top:0;left:0;pointer-events:none;overflow:hidden;z-index:0}
.particle{position:absolute;border-radius:50%;opacity:0.2;animation:floatUp linear infinite}
@keyframes floatUp{0%{transform:translateY(100vh) rotate(0deg);opacity:0}10%{opacity:0.2}90%{opacity:0.2}100%{transform:translateY(-10vh) rotate(720deg);opacity:0}}

.deco{position:absolute;border-radius:50%;pointer-events:none}
.deco-pink{background:radial-gradient(circle,rgba(123,92,240,.15),transparent)}
.deco-peach{background:radial-gradient(circle,rgba(0,217,255,.12),transparent)}
.deco-lav{background:radial-gradient(circle,rgba(155,89,182,.1),transparent)}

/* Animated glow ring */
.glow-ring{position:absolute;border-radius:50%;pointer-events:none;animation:pulseGlow 3s ease-in-out infinite}
@keyframes pulseGlow{0%,100%{box-shadow:0 0 40px rgba(123,92,240,.1);transform:scale(1)}50%{box-shadow:0 0 80px rgba(123,92,240,.2);transform:scale(1.03)}}

.t-hero{font-size:5rem;font-weight:900;line-height:1.15;text-align:center}
.t-huge{font-size:3.8rem;font-weight:900;line-height:1.2;text-align:center}
.t-big{font-size:2.8rem;font-weight:800;line-height:1.3;text-align:center}
.t-mid{font-size:2rem;font-weight:700;line-height:1.4;text-align:center}
.t-body{font-size:1.6rem;font-weight:400;line-height:1.6;text-align:center}
.t-sm{font-size:1.2rem;font-weight:400;line-height:1.5;text-align:center}

.c-pink{color:#7B5CF0}.c-rose{color:#5B4CE8}.c-coral{color:#00D9FF}.c-orange{color:#00B4D8}
.c-purple{color:#9B5DE5}.c-teal{color:#06D6A0}.c-blue{color:#4A90D9}.c-dark{color:#FFFFFE}
.c-gray{color:#A7A9BE}.c-white{color:#fff}.c-amber{color:#00D9FF}

.bg-pink{background:rgba(123,92,240,.15);padding:5px 18px;border-radius:10px}
.bg-rose{background:rgba(91,76,232,.15);padding:5px 18px;border-radius:10px}
.bg-peach{background:rgba(0,217,255,.12);padding:5px 18px;border-radius:10px}
.bg-teal{background:rgba(6,214,160,.12);padding:5px 18px;border-radius:10px}
.bg-purple{background:rgba(155,89,234,.12);padding:5px 18px;border-radius:10px}
.bg-blue{background:rgba(74,144,217,.12);padding:5px 18px;border-radius:10px}

.ul-rose{text-decoration:underline;text-decoration-color:#5B4CE8;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-pink{text-decoration:underline;text-decoration-color:#7B5CF0;text-decoration-thickness:4px;text-underline-offset:8px}
.bold{font-weight:900}.italic{font-style:italic}
.line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,#7B5CF0,#00D9FF);margin:16px auto}

.two-col{display:flex;gap:28px;width:94%;max-width:1200px;align-items:stretch}
.col-card{flex:1;background:rgba(26,25,50,.6);border-radius:20px;padding:28px 24px;border:2px solid rgba(123,92,240,.2);box-shadow:0 6px 30px rgba(123,92,240,.1);display:flex;flex-direction:column;align-items:center;gap:8px;position:relative;overflow:hidden;transition:transform .3s,box-shadow .3s}
.col-card:hover{transform:translateY(-4px);box-shadow:0 12px 40px rgba(123,92,240,.15)}
.col-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;border-radius:20px 20px 0 0}

.flow{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap;justify-content:center}
.flow-step{background:rgba(123,92,240,.15);padding:6px 14px;border-radius:10px;font-size:1.1rem;font-weight:700;display:flex;align-items:center;gap:5px}
.flow-arrow{color:#7B5CF0}

.icon-row{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}

.concept-word{font-size:5rem;font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,#7B5CF0,#00D9FF,#9B5DE5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.final-word{font-size:4rem;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,#5B4CE8,#7B5CF0,#00D9FF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

.shape-grid{display:flex;gap:18px;margin:12px 0;justify-content:center}
.shape-circle{border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;font-weight:900;color:#fff}
.sh-sm{width:80px;height:80px;font-size:1.5rem}
.sh-md{width:100px;height:100px;font-size:1.7rem}
.sh-lg{width:120px;height:120px;font-size:1.8rem}
.sp{background:linear-gradient(135deg,#7B5CF0,#9B5DE5)}
.so{background:linear-gradient(135deg,#00D9FF,#00B4D8)}
.sv{background:linear-gradient(135deg,#9B5DE5,#C39BD3)}
.st{background:linear-gradient(135deg,#06D6A0,#00B4D8)}
.sb{background:linear-gradient(135deg,#4A90D9,#7AB3E8)}

.layer-stack{width:88%;max-width:900px;display:flex;flex-direction:column;gap:0;position:relative}
.layer-box{padding:22px 28px;display:flex;align-items:center;gap:18px;border:2px solid rgba(123,92,240,.15);background:rgba(26,25,50,.5);transition:transform .3s,box-shadow .3s}
.layer-box:hover{transform:translateX(8px);box-shadow:0 4px 20px rgba(123,92,240,.15)}
.layer-box:first-child{border-radius:18px 18px 0 0}
.layer-box:last-child{border-radius:0 0 18px 18px}
.layer-num{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.6rem;font-weight:900;color:#fff;flex-shrink:0;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.layer-content{flex:1}
.layer-tag{display:inline-block;padding:3px 12px;border-radius:8px;font-size:.95rem;font-weight:700;margin-top:4px}

.formula-box{background:rgba(26,25,50,.5);border-radius:24px;padding:36px 50px;border:3px solid rgba(123,92,240,.2);box-shadow:0 8px 40px rgba(123,92,240,.1);display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;position:relative;overflow:hidden}
.formula-box::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(123,92,240,.05),transparent,rgba(0,217,255,.05),transparent);animation:formulaSpin 12s linear infinite}
@keyframes formulaSpin{100%{transform:rotate(360deg)}}
.formula-part{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1}
.formula-op{font-size:3.5rem;font-weight:900;color:#7B5CF0;position:relative;z-index:1}

.bg-1{background:radial-gradient(ellipse at 50% 30%,#1A1932 0%,#0F0E17 100%)}.bg-2{background:radial-gradient(ellipse at 30% 20%,#1A1932 0%,#0F0E17 100%)}
.bg-3{background:radial-gradient(ellipse at 70% 80%,#1A1932 0%,#0F0E17 100%)}.bg-4{background:radial-gradient(ellipse at 50% 50%,#1A1932 0%,#0F0E17 100%)}
.bg-5{background:radial-gradient(ellipse at 50% 70%,#1A1932 0%,#0F0E17 100%)}

/* Enhanced ring diagram */
.ring-diagram{position:relative;width:440px;height:440px;margin:10px auto}
.ring-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,#7B5CF0,#00D9FF);display:flex;align-items:center;justify-content:center;flex-direction:column;color:#fff;font-weight:900;font-size:1.3rem;text-align:center;box-shadow:0 8px 30px rgba(123,92,240,.25),0 0 60px rgba(123,92,240,.1);z-index:2;line-height:1.3;animation:centerPulse 3s ease-in-out infinite}
@keyframes centerPulse{0%,100%{box-shadow:0 8px 30px rgba(123,92,240,.25),0 0 60px rgba(123,92,240,.1)}50%{box-shadow:0 8px 40px rgba(123,92,240,.35),0 0 80px rgba(123,92,240,.2)}}

.ring-orbit{position:absolute;top:50%;left:50%;width:320px;height:320px;margin-top:-160px;margin-left:-160px;border-radius:50%;border:2.5px dashed rgba(123,92,240,.15);animation:orbitSpin 30s linear infinite}
@keyframes orbitSpin{100%{transform:rotate(360deg)}}

.ring-item{position:absolute;width:110px;height:110px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;font-weight:800;color:#fff;font-size:1rem;text-align:center;box-shadow:0 4px 20px rgba(0,0,0,.2);z-index:1;transition:transform .3s,box-shadow .3s}
.ring-item:hover{transform:scale(1.1)!important;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.ring-item .lc svg{width:24px;height:24px}
.ring-line{position:absolute;z-index:0}

/* Connection lines animation */
.conn-line{stroke-dasharray:6,4;animation:dashFlow 2s linear infinite}
@keyframes dashFlow{100%{stroke-dashoffset:-20}}

/* Card icon badge */
.card-icon-badge{width:80px;height:80px;border-radius:20px;display:flex;align-items:center;justify-content:center;margin-bottom:4px;position:relative}
.card-icon-badge::after{content:'';position:absolute;inset:-3px;border-radius:22px;opacity:0.3;z-index:0}
.card-icon-badge .lc{position:relative;z-index:1}



/* Slide number */


/* Enhanced SVG animations */
@keyframes drawLine{from{stroke-dashoffset:200}to{stroke-dashoffset:0}}
@keyframes fadeInScale{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(0.3)}50%{transform:scale(1.05)}70%{transform:scale(0.95)}100%{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
@keyframes rotateLoop{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}

/* Pillar detail items */
.pillar-detail{display:flex;gap:8px;align-items:center;padding:6px 14px;background:rgba(0,0,0,.02);border-radius:10px;font-size:1rem;font-weight:600;width:100%}
.pillar-detail .lc{flex-shrink:0}

/* Animated arrow for flow */
.animated-arrow{animation:arrowPulse 1.5s ease-in-out infinite}
@keyframes arrowPulse{0%,100%{opacity:0.6;transform:translateX(0)}50%{opacity:1;transform:translateX(3px)}}

/* Layer side icons */
.layer-side-badge{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.layer-side-badge span{display:inline-flex;align-items:center;gap:3px;padding:2px 10px;border-radius:6px;font-size:.85rem;font-weight:600}

/* Highlight box for formulas */
.highlight-glow{animation:glowPulse 2.5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{box-shadow:0 8px 40px rgba(255,105,135,.08)}50%{box-shadow:0 12px 60px rgba(255,105,135,.18),0 0 40px rgba(255,105,135,.05)}}

/* Decorative shapes */
.deco-triangle{position:absolute;width:0;height:0;pointer-events:none;opacity:0.06}
.deco-square{position:absolute;pointer-events:none;opacity:0.04;border-radius:8px;border:3px solid;transform:rotate(45deg)}

/* Subtitle badge */
.subtitle-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 24px;border-radius:50px;font-size:1.1rem;font-weight:700;border:2px solid}

/* Architecture side diagram */
.arch-side{display:flex;gap:24px;width:94%;max-width:1100px;align-items:stretch}
.arch-main{flex:2}
.arch-detail{flex:1;display:flex;flex-direction:column;gap:12px;justify-content:center}
.arch-detail-card{background:rgba(26,25,50,.6);border-radius:14px;padding:16px 18px;border:2px solid rgba(123,92,240,.15);display:flex;align-items:center;gap:12px;transition:transform .3s}
.arch-detail-card:hover{transform:translateX(4px)}

/* Visual metaphor icons */
.metaphor-row{display:flex;gap:16px;align-items:center;justify-content:center;margin:8px 0}
.metaphor-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 16px;border-radius:14px;background:rgba(26,25,50,.5);border:1.5px solid rgba(123,92,240,.2)}
.metaphor-item:nth-child(1){background:rgba(231,29,54,.15);border-color:rgba(231,29,54,.3)}
.metaphor-item:nth-child(2){background:rgba(6,214,160,.15);border-color:rgba(6,214,160,.3)}
.metaphor-item:nth-child(3){background:rgba(0,217,255,.15);border-color:rgba(0,217,255,.3)}
.metaphor-item:nth-child(4){background:rgba(155,89,234,.15);border-color:rgba(155,89,234,.3)}
.metaphor-item .lc{opacity:0.9}
.metaphor-item span{font-size:.85rem;font-weight:600;color:#FFFFFE}
</style>
</head>
<body>

<!-- Floating Particles Background -->
<div class="particles" id="particles"></div>

<!-- Progress Dots -->


<div class="slide-container">

<!-- =========== Slide 1: 定义 + 四支柱环形图 =========== -->
<div class="slide bg-1 active" id="s0">
  
  <div class="deco deco-pink" style="width:500px;height:500px;top:-200px;right:-180px"></div>
  <div class="deco deco-peach" style="width:350px;height:350px;bottom:-100px;left:-100px"></div>
  <div class="deco-square" style="width:60px;height:60px;border-color:#FF6987;top:15%;left:8%"></div>
  <div class="deco-square" style="width:40px;height:40px;border-color:#9B59B6;bottom:20%;right:12%"></div>
  
  <div class="anim" style="display:flex;align-items:center;gap:14px">
    <span class="lc lc-48 c-pink"><i data-lucide="book-open"></i></span>
    <span class="t-huge c-dark">Harness Engineering</span>
    <span style="font-size:1.8rem;color:#FF6987">(｡･ω･｡)ﾉ</span>
  </div>
  <div class="anim t-mid c-pink" style="margin-top:4px;letter-spacing:6px">驾 驭 工 程 ✧</div>
  <div class="anim line"></div>
  <div class="anim t-body c-gray" style="max-width:900px">
    围绕 AI 智能体设计和构建
    <span class="c-rose bold">约束机制</span>、
    <span class="c-teal bold">反馈回路</span>、
    <span class="c-blue bold">工作流控制</span>和
    <span class="c-purple bold">持续改进循环</span>的
    <span class="c-dark bold ul-rose">系统工程实践</span> (｀・ω・´)
  </div>
  
  <div class="anim ring-diagram">
    <!-- Orbit ring -->
    <div class="ring-orbit"></div>
    
    <!-- Connection SVG with animated dashes -->
    <svg class="ring-line" width="440" height="440" viewBox="0 0 440 440" style="top:0;left:0">
      <!-- Curved connections -->
      <path d="M220,145 Q220,120 220,60" fill="none" stroke="#FFB4C2" stroke-width="2.5" class="conn-line"/>
      <path d="M295,220 Q320,220 380,220" fill="none" stroke="#FFB4C2" stroke-width="2.5" class="conn-line" style="animation-delay:0.5s"/>
      <path d="M220,295 Q220,320 220,380" fill="none" stroke="#FFB4C2" stroke-width="2.5" class="conn-line" style="animation-delay:1s"/>
      <path d="M145,220 Q120,220 60,220" fill="none" stroke="#FFB4C2" stroke-width="2.5" class="conn-line" style="animation-delay:1.5s"/>
      
      <!-- Decorative arcs -->
      <circle cx="220" cy="220" r="180" fill="none" stroke="rgba(255,105,135,0.05)" stroke-width="40"/>
      <circle cx="220" cy="220" r="130" fill="none" stroke="rgba(255,105,135,0.03)" stroke-width="1.5" stroke-dasharray="4,8"/>
    </svg>
    
    <div class="ring-center">Harness<br>Engineering <span style="font-size:0.9rem"></span></div>
    
    <div class="ring-item sp" style="top:0;left:50%;transform:translateX(-50%)">
      <span class="lc"><i data-lucide="shield-alert"></i></span>约束机制
    </div>
    <div class="ring-item st" style="top:50%;right:0;transform:translateY(-50%)">
      <span class="lc"><i data-lucide="refresh-cw"></i></span>反馈回路
    </div>
    <div class="ring-item sb" style="bottom:0;left:50%;transform:translateX(-50%)">
      <span class="lc"><i data-lucide="git-branch"></i></span>工作流控制
    </div>
    <div class="ring-item sv" style="top:50%;left:0;transform:translateY(-50%)">
      <span class="lc"><i data-lucide="trending-up"></i></span>持续改进
    </div>
  </div>
</div>

<!-- =========== Slide 2: 约束机制 + 反馈回路 =========== -->
<div class="slide bg-2" id="s1">
  
  <div class="deco deco-pink" style="width:400px;height:400px;top:-130px;left:-130px"></div>
  <div class="deco-square" style="width:50px;height:50px;border-color:#E8395B;bottom:15%;left:5%"></div>
  <div class="deco-square" style="width:35px;height:35px;border-color:#2BA8A4;top:10%;right:8%"></div>
  
  <div class="anim" style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
    <span class="subtitle-badge" style="color:#E8395B;border-color:rgba(232,57,91,.2);background:rgba(232,57,91,.04)">
      <span class="lc lc-20 c-rose"><i data-lucide="layers"></i></span>
      四大支柱 · 上
    </span>
  </div>
  
  <div class="anim two-col">
    <!-- 约束机制 Card -->
    <div class="col-card" style="border-left:6px solid #E8395B">
      <div class="card-icon-badge" style="background:linear-gradient(135deg,rgba(232,57,91,.08),rgba(232,57,91,.02))">
        <span class="lc lc-48 c-rose"><i data-lucide="shield-alert"></i></span>
      </div>
      <div class="t-mid c-dark"><span class="c-rose bold">约束机制</span> (｡ŏ_ŏ)</div>
      <div class="t-sm c-gray italic" style="margin-bottom:4px">给 AI 划定执行边界</div>
      
      <!-- Enhanced constraint diagram -->
      <div style="margin:8px 0;width:100%">
        <svg width="100%" height="140" viewBox="0 0 280 140" preserveAspectRatio="xMidYMid meet">
          <!-- Outer boundary -->
          <rect x="15" y="10" width="250" height="120" rx="18" fill="none" stroke="#E8395B" stroke-width="2.5" stroke-dasharray="8,4"/>
          <rect x="25" y="20" width="230" height="100" rx="12" fill="rgba(232,57,91,.03)"/>
          
          <!-- Safe zone -->
          <rect x="40" y="30" width="200" height="35" rx="10" fill="rgba(43,168,164,.06)" stroke="#2BA8A4" stroke-width="1.5"/>
          <circle cx="58" cy="47" r="10" fill="rgba(43,168,164,.1)"/>
          <text x="58" y="51" text-anchor="middle" fill="#2BA8A4" font-size="12">✓</text>
          <text x="148" y="52" text-anchor="middle" fill="#2BA8A4" font-size="13" font-weight="700">能做什么 — 安全区域</text>
          
          <!-- Danger zone -->
          <rect x="40" y="75" width="200" height="35" rx="10" fill="rgba(232,57,91,.04)" stroke="#E8395B" stroke-width="1.5" stroke-dasharray="4,3"/>
          <circle cx="58" cy="92" r="10" fill="rgba(232,57,91,.1)"/>
          <text x="58" y="96" text-anchor="middle" fill="#E8395B" font-size="12">✗</text>
          <text x="148" y="97" text-anchor="middle" fill="#E8395B" font-size="13" font-weight="700">不能做什么 — 禁止区</text>
          
          <!-- Lock icon -->
          <rect x="235" y="5" width="30" height="24" rx="6" fill="#E8395B"/>
          <text x="250" y="22" text-anchor="middle" fill="#fff" font-size="14">🔒</text>
        </svg>
      </div>
      
      <!-- Detail items -->
      <div class="pillar-detail">
        <span class="lc lc-20 c-rose"><i data-lucide="alert-triangle"></i></span>
        <span style="color:#666">限定工具调用范围</span>
      </div>
      <div class="pillar-detail">
        <span class="lc lc-20 c-rose"><i data-lucide="file-check"></i></span>
        <span style="color:#666">规则化执行标准</span>
      </div>
    </div>
    
    <!-- 反馈回路 Card -->
    <div class="col-card" style="border-left:6px solid #2BA8A4">
      <div class="card-icon-badge" style="background:linear-gradient(135deg,rgba(43,168,164,.08),rgba(43,168,164,.02))">
        <span class="lc lc-48 c-teal"><i data-lucide="refresh-cw"></i></span>
      </div>
      <div class="t-mid c-dark"><span class="c-teal bold">反馈回路</span> (｀・ω・´)</div>
      <div class="t-sm c-gray italic" style="margin-bottom:4px">实时校验，自主纠错</div>
      
      <!-- Enhanced feedback loop diagram -->
      <div style="margin:8px 0;width:100%">
        <svg width="100%" height="150" viewBox="0 0 260 150" preserveAspectRatio="xMidYMid meet">
          <defs>
            <marker id="arw" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#2BA8A4"/></marker>
            <marker id="arwP" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#FF6987"/></marker>
          </defs>
          
          <!-- Execute -->
          <rect x="10" y="20" width="72" height="36" rx="10" fill="#E8FFF6" stroke="#2BA8A4" stroke-width="2"/>
          <text x="46" y="30" text-anchor="middle" fill="#2BA8A4" font-size="9" font-weight="600">Step 1</text>
          <text x="46" y="46" text-anchor="middle" fill="#2BA8A4" font-size="12" font-weight="700">执行</text>
          <circle cx="46" cy="12" r="8" fill="#2BA8A4" opacity=".15"/>
          <text x="46" y="16" text-anchor="middle" fill="#2BA8A4" font-size="10">⚡</text>
          
          <!-- Arrow 1 -->
          <line x1="82" y1="38" x2="100" y2="38" stroke="#2BA8A4" stroke-width="2" marker-end="url(#arw)"/>
          
          <!-- Verify -->
          <rect x="105" y="20" width="72" height="36" rx="10" fill="#E8FFF6" stroke="#2BA8A4" stroke-width="2"/>
          <text x="141" y="30" text-anchor="middle" fill="#2BA8A4" font-size="9" font-weight="600">Step 2</text>
          <text x="141" y="46" text-anchor="middle" fill="#2BA8A4" font-size="12" font-weight="700">校验</text>
          <circle cx="141" cy="12" r="8" fill="#2BA8A4" opacity=".15"/>
          <text x="141" y="16" text-anchor="middle" fill="#2BA8A4" font-size="10">🔍</text>
          
          <!-- Arrow 2 -->
          <line x1="177" y1="38" x2="195" y2="38" stroke="#2BA8A4" stroke-width="2" marker-end="url(#arw)"/>
          
          <!-- Result check -->
          <circle cx="218" cy="38" r="22" fill="#E8FFF6" stroke="#2BA8A4" stroke-width="2"/>
          <text x="218" y="36" text-anchor="middle" fill="#2BA8A4" font-size="10" font-weight="700">OK?</text>
          <text x="218" y="48" text-anchor="middle" fill="#2BA8A4" font-size="11">🤔</text>
          
          <!-- Success path -->
          <line x1="240" y1="38" x2="253" y2="38" stroke="#2BA8A4" stroke-width="2" marker-end="url(#arw)"/>
          <text x="252" y="32" text-anchor="end" fill="#2BA8A4" font-size="9" font-weight="700">✓</text>
          
          <!-- Error path -->
          <path d="M218,60 L218,80" fill="none" stroke="#FF6987" stroke-width="2" marker-end="url(#arwP)"/>
          
          <!-- Error box -->
          <rect x="160" y="85" width="110" height="32" rx="10" fill="rgba(255,105,135,.06)" stroke="#FF6987" stroke-width="1.8"/>
          <text x="215" y="99" text-anchor="middle" fill="#FF6987" font-size="9" font-weight="600">发现错误</text>
          <text x="215" y="112" text-anchor="middle" fill="#FF6987" font-size="10" font-weight="700">需要修正 ⚠️</text>
          
          <!-- Loop back -->
          <path d="M160,100 Q80,100 50,80 Q30,65 30,56" fill="none" stroke="#FF6987" stroke-width="2" stroke-dasharray="5,3" marker-end="url(#arwP)"/>
          
          <!-- Loop label -->
          <rect x="55" y="82" width="60" height="20" rx="6" fill="rgba(255,105,135,.08)"/>
          <text x="85" y="96" text-anchor="middle" fill="#FF6987" font-size="10" font-weight="700">🔄 修正</text>
        </svg>
      </div>
      
      <!-- Detail items -->
      <div class="pillar-detail">
        <span class="lc lc-20 c-teal"><i data-lucide="check-circle"></i></span>
        <span style="color:#666">自动运行测试验证</span>
      </div>
      <div class="pillar-detail">
        <span class="lc lc-20 c-teal"><i data-lucide="rotate-ccw"></i></span>
        <span style="color:#666">错误自主回溯修正</span>
      </div>
    </div>
  </div>
</div>

<!-- =========== Slide 3: 工作流控制 + 持续改进 =========== -->
<div class="slide bg-3" id="s2">
  
  <div class="deco deco-lav" style="width:450px;height:450px;bottom:-150px;right:-150px"></div>
  <div class="deco-square" style="width:45px;height:45px;border-color:#4A90D9;top:12%;left:6%"></div>
  <div class="deco-square" style="width:55px;height:55px;border-color:#9B59B6;bottom:18%;right:5%"></div>
  
  <div class="anim" style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
    <span class="subtitle-badge" style="color:#4A90D9;border-color:rgba(74,144,217,.2);background:rgba(74,144,217,.04)">
      <span class="lc lc-20 c-blue"><i data-lucide="layers"></i></span>
      四大支柱 · 下 
    </span>
  </div>
  
  <div class="anim two-col">
    <!-- 工作流控制 Card -->
    <div class="col-card" style="border-left:6px solid #4A90D9">
      <div class="card-icon-badge" style="background:linear-gradient(135deg,rgba(74,144,217,.08),rgba(74,144,217,.02))">
        <span class="lc lc-48 c-blue"><i data-lucide="git-branch"></i></span>
      </div>
      <div class="t-mid c-dark"><span class="c-blue bold">工作流控制</span> (｡･ω･｡)ﾉ</div>
      <div class="t-sm c-gray italic" style="margin-bottom:4px">按流程一步步执行</div>
      
      <!-- Enhanced workflow diagram -->
      <div style="margin:8px 0;width:100%">
        <svg width="100%" height="150" viewBox="0 0 280 150" preserveAspectRatio="xMidYMid meet">
          <defs>
            <marker id="arb" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#4A90D9"/></marker>
            <linearGradient id="stepGrad" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0%" stop-color="#EBF2FF"/><stop offset="100%" stop-color="#D6E6FF"/>
            </linearGradient>
          </defs>
          
          <!-- Track line -->
          <rect x="20" y="58" width="240" height="6" rx="3" fill="rgba(74,144,217,.08)"/>
          
          <!-- Step 1 -->
          <rect x="15" y="30" width="58" height="40" rx="12" fill="url(#stepGrad)" stroke="#4A90D9" stroke-width="2"/>
          <text x="44" y="46" text-anchor="middle" fill="#4A90D9" font-size="9" font-weight="600">Step</text>
          <text x="44" y="60" text-anchor="middle" fill="#4A90D9" font-size="14" font-weight="900">1</text>
          <circle cx="44" cy="22" r="7" fill="#4A90D9" opacity=".15"/>
          <text x="44" y="25" text-anchor="middle" fill="#4A90D9" font-size="9">📋</text>
          
          <!-- Arrow -->
          <line x1="73" y1="50" x2="88" y2="50" stroke="#4A90D9" stroke-width="2.5" marker-end="url(#arb)"/>
          
          <!-- Step 2 -->
          <rect x="92" y="30" width="58" height="40" rx="12" fill="url(#stepGrad)" stroke="#4A90D9" stroke-width="2"/>
          <text x="121" y="46" text-anchor="middle" fill="#4A90D9" font-size="9" font-weight="600">Step</text>
          <text x="121" y="60" text-anchor="middle" fill="#4A90D9" font-size="14" font-weight="900">2</text>
          <circle cx="121" cy="22" r="7" fill="#4A90D9" opacity=".15"/>
          <text x="121" y="25" text-anchor="middle" fill="#4A90D9" font-size="9">🔧</text>
          
          <!-- Arrow -->
          <line x1="150" y1="50" x2="165" y2="50" stroke="#4A90D9" stroke-width="2.5" marker-end="url(#arb)"/>
          
          <!-- Step 3 -->
          <rect x="169" y="30" width="58" height="40" rx="12" fill="url(#stepGrad)" stroke="#4A90D9" stroke-width="2"/>
          <text x="198" y="46" text-anchor="middle" fill="#4A90D9" font-size="9" font-weight="600">Step</text>
          <text x="198" y="60" text-anchor="middle" fill="#4A90D9" font-size="14" font-weight="900">3</text>
          <circle cx="198" cy="22" r="7" fill="#4A90D9" opacity=".15"/>
          <text x="198" y="25" text-anchor="middle" fill="#4A90D9" font-size="9">🧪</text>
          
          <!-- Arrow to complete -->
          <line x1="227" y1="50" x2="240" y2="50" stroke="#4A90D9" stroke-width="2.5" marker-end="url(#arb)"/>
          
          <!-- Complete circle -->
          <circle cx="256" cy="50" r="16" fill="linear-gradient(135deg,#4A90D9,#7AB3E8)" stroke="#4A90D9" stroke-width="0"/>
          <circle cx="256" cy="50" r="16" fill="#4A90D9"/>
          <text x="256" y="55" text-anchor="middle" fill="#fff" font-size="14" font-weight="900">✓</text>
          
          <!-- Warning annotations -->
          <rect x="25" y="82" width="80" height="22" rx="6" fill="rgba(255,105,135,.06)" stroke="#FF6987" stroke-width="1"/>
          <text x="65" y="97" text-anchor="middle" fill="#FF6987" font-size="10" font-weight="700">❌ 不跳步</text>
          
          <rect x="110" y="82" width="80" height="22" rx="6" fill="rgba(255,105,135,.06)" stroke="#FF6987" stroke-width="1"/>
          <text x="150" y="97" text-anchor="middle" fill="#FF6987" font-size="10" font-weight="700">❌ 不摆烂</text>
          
          <rect x="175" y="112" width="100" height="22" rx="6" fill="rgba(255,105,135,.06)" stroke="#FF6987" stroke-width="1"/>
          <text x="225" y="127" text-anchor="middle" fill="#FF6987" font-size="10" font-weight="700">❌ 不提前宣布完成</text>
          
          <!-- Cross out skip arrow -->
          <path d="M44,70 Q120,90 198,70" fill="none" stroke="#FF6987" stroke-width="1.5" stroke-dasharray="3,3" opacity=".4"/>
          <text x="120" y="78" text-anchor="middle" fill="#FF6987" font-size="18" font-weight="900" opacity=".4">✕</text>
        </svg>
      </div>
      
      <!-- Detail items -->
      <div class="pillar-detail">
        <span class="lc lc-20 c-blue"><i data-lucide="list-ordered"></i></span>
        <span style="color:#666">严格顺序执行</span>
      </div>
      <div class="pillar-detail">
        <span class="lc lc-20 c-blue"><i data-lucide="shield-check"></i></span>
        <span style="color:#666">每步验证后继续</span>
      </div>
    </div>
    
    <!-- 持续改进循环 Card -->
    <div class="col-card" style="border-left:6px solid #9B59B6">
      <div class="card-icon-badge" style="background:linear-gradient(135deg,rgba(155,89,182,.08),rgba(155,89,182,.02))">
        <span class="lc lc-48 c-purple"><i data-lucide="trending-up"></i></span>
      </div>
      <div class="t-mid c-dark"><span class="c-purple bold">持续改进循环</span> ✧(≖ ◡ ≖✿)</div>
      <div class="t-sm c-gray italic" style="margin-bottom:4px">犯错沉淀，越用越稳</div>
      
      <!-- Enhanced improvement cycle diagram -->
      <div style="margin:8px 0;width:100%">
        <svg width="100%" height="160" viewBox="0 0 260 160" preserveAspectRatio="xMidYMid meet">
          <defs>
            <marker id="arp" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#9B59B6"/></marker>
          </defs>
          
          <!-- Outer glow ring -->
          <circle cx="130" cy="80" r="65" fill="none" stroke="rgba(155,89,182,.06)" stroke-width="20"/>
          
          <!-- Cycle arcs -->
          <path d="M130,18 A60,60 0 0,1 190,75" fill="none" stroke="#9B59B6" stroke-width="2.5" marker-end="url(#arp)"/>
          <path d="M188,82 A60,60 0 0,1 133,142" fill="none" stroke="#9B59B6" stroke-width="2.5" marker-end="url(#arp)"/>
          <path d="M127,142 A60,60 0 0,1 70,82" fill="none" stroke="#9B59B6" stroke-width="2.5" marker-end="url(#arp)"/>
          <path d="M72,75 A60,60 0 0,1 127,18" fill="none" stroke="#9B59B6" stroke-width="2.5" marker-end="url(#arp)"/>
          
          <!-- Step circles -->
          <circle cx="130" cy="14" r="16" fill="rgba(232,57,91,.08)" stroke="#E8395B" stroke-width="1.5"/>
          <text x="130" y="11" text-anchor="middle" fill="#E8395B" font-size="10">😵</text>
          <text x="130" y="22" text-anchor="middle" fill="#E8395B" font-size="9" font-weight="700">犯错</text>
          
          <circle cx="196" cy="80" r="16" fill="rgba(74,144,217,.08)" stroke="#4A90D9" stroke-width="1.5"/>
          <text x="196" y="77" text-anchor="middle" fill="#4A90D9" font-size="10">🔍</text>
          <text x="196" y="88" text-anchor="middle" fill="#4A90D9" font-size="9" font-weight="700">分析</text>
          
          <circle cx="130" cy="148" r="16" fill="rgba(255,140,66,.08)" stroke="#FF8C42" stroke-width="1.5"/>
          <text x="130" y="145" text-anchor="middle" fill="#FF8C42" font-size="10">📝</text>
          <text x="130" y="156" text-anchor="middle" fill="#FF8C42" font-size="9" font-weight="700">沉淀</text>
          
          <circle cx="64" cy="80" r="16" fill="rgba(43,168,164,.08)" stroke="#2BA8A4" stroke-width="1.5"/>
          <text x="64" y="77" text-anchor="middle" fill="#2BA8A4" font-size="10">⚡</text>
          <text x="64" y="88" text-anchor="middle" fill="#2BA8A4" font-size="9" font-weight="700">优化</text>
          
          <!-- Center result -->
          <circle cx="130" cy="80" r="26" fill="rgba(155,89,182,.08)" stroke="#9B59B6" stroke-width="2"/>
          <text x="130" y="76" text-anchor="middle" fill="#9B59B6" font-size="12" font-weight="900">不再犯</text>
          <text x="130" y="90" text-anchor="middle" fill="#9B59B6" font-size="10">✨</text>
          
          <!-- Spiral improvement indicator -->
          <text x="225" y="30" fill="#9B59B6" font-size="11" font-weight="700" opacity=".6">📈 越来越好</text>
        </svg>
      </div>
      
      <!-- Detail items -->
      <div class="pillar-detail">
        <span class="lc lc-20 c-purple"><i data-lucide="save"></i></span>
        <span style="color:#666">错误经验持久化存储</span>
      </div>
      <div class="pillar-detail">
        <span class="lc lc-20 c-purple"><i data-lucide="sparkles"></i></span>
        <span style="color:#666">每次迭代更智能</span>
      </div>
    </div>
  </div>
</div>

<!-- =========== Slide 4: 三层架构 =========== -->
<div class="slide bg-4" id="s3">
  
  <div class="deco deco-peach" style="width:500px;height:500px;top:-200px;left:50%;margin-left:-250px"></div>
  <div class="deco-square" style="width:50px;height:50px;border-color:#FF8C42;bottom:10%;left:3%"></div>
  
  <div class="anim" style="display:flex;align-items:center;gap:10px">
    <span class="lc lc-36 c-orange"><i data-lucide="file-text"></i></span>
    <span class="t-mid c-gray italic">论文 · Building Effective AI Coding Agents</span>
  </div>
  <div class="anim t-huge c-dark" style="margin-top:6px">Agent 运行架构 <span class="c-pink bold">三层</span> (｡･ω･｡)</div>
  <div class="anim line"></div>
  
  <div class="anim arch-side">
    <!-- Main layer stack -->
    <div class="arch-main">
      <div class="layer-stack">
        <div class="layer-box">
          <div class="layer-num" style="background:linear-gradient(135deg,#00D9FF,#00B4D8)">1</div>
          <div class="layer-content">
            <div style="font-size:1.5rem;font-weight:800;color:#FFFFFE">
              <span class="c-orange bold">Scaffolding</span>
              <span class="layer-tag" style="background:rgba(0,217,255,.15);color:#00D9FF">脚手架</span>
            </div>
            <div style="font-size:1rem;color:#A7A9BE;margin-top:2px">系统指令编译 · 工具规范定义 · 执行前准备</div>
            <div class="layer-side-badge">
              <span style="background:rgba(0,217,255,.1);color:#00D9FF"><span class="lc lc-20"><i data-lucide="file-code"></i></span> 系统指令</span>
              <span style="background:rgba(0,217,255,.1);color:#00D9FF"><span class="lc lc-20"><i data-lucide="wrench"></i></span> 工具定义</span>
              <span style="background:rgba(0,217,255,.1);color:#00D9FF"><span class="lc lc-20"><i data-lucide="settings-2"></i></span> 环境配置</span>
            </div>
          </div>
          <span class="lc lc-36 c-orange"><i data-lucide="wrench"></i></span>
        </div>
        <div class="layer-box">
          <div class="layer-num" style="background:linear-gradient(135deg,#7B5CF0,#9B5DE5)">2</div>
          <div class="layer-content">
            <div style="font-size:1.5rem;font-weight:800;color:#FFFFFE">
              <span class="c-rose bold ul-rose">Harness</span>
              <span class="layer-tag" style="background:rgba(123,92,240,.15);color:#7B5CF0">运行时编排 · 核心</span>
            </div>
            <div style="font-size:1rem;color:#A7A9BE;margin-top:2px">推理循环 · 工具调用 · 上下文管理 · 安全管控 · 持久化</div>
            <div class="layer-side-badge">
              <span style="background:rgba(123,92,240,.1);color:#7B5CF0"><span class="lc lc-20"><i data-lucide="cpu"></i></span> 推理循环</span>
              <span style="background:rgba(123,92,240,.1);color:#7B5CF0"><span class="lc lc-20"><i data-lucide="shield"></i></span> 安全管控</span>
              <span style="background:rgba(123,92,240,.1);color:#7B5CF0"><span class="lc lc-20"><i data-lucide="hard-drive"></i></span> 持久化</span>
            </div>
          </div>
          <span class="lc lc-36 c-rose"><i data-lucide="cpu"></i></span>
        </div>
        <div class="layer-box">
          <div class="layer-num" style="background:linear-gradient(135deg,#9B5DE5,#C39BD3)">3</div>
          <div class="layer-content">
            <div style="font-size:1.5rem;font-weight:800;color:#FFFFFE">
              <span class="c-purple bold">Context Engineering</span>
              <span class="layer-tag" style="background:rgba(155,89,234,.12);color:#9B5DE5">上下文工程</span>
            </div>
            <div style="font-size:1rem;color:#A7A9BE;margin-top:2px">Token 资源分配 · 信息保留与舍弃</div>
            <div class="layer-side-badge">
              <span style="background:rgba(155,89,234,.1);color:#9B5DE5"><span class="lc lc-20"><i data-lucide="database"></i></span> Token管理</span>
              <span style="background:rgba(155,89,234,.1);color:#9B5DE5"><span class="lc lc-20"><i data-lucide="filter"></i></span> 信息筛选</span>
            </div>
          </div>
          <span class="lc lc-36 c-purple"><i data-lucide="database"></i></span>
        </div>
      </div>
    </div>
    
    <!-- Side illustration -->
    <div class="arch-detail">
      <div class="arch-detail-card" style="border-left:4px solid #FF8C42">
        <span class="lc lc-32 c-orange"><i data-lucide="package"></i></span>
        <div>
          <div style="font-weight:800;color:#FF8C42;font-size:1rem">预编译阶段</div>
          <div style="font-size:.85rem;color:#888">Agent 启动前的所有准备</div>
        </div>
      </div>
      <div style="text-align:center;color:#FFB4C2;font-size:1.5rem"><span class="lc lc-32"><i data-lucide="arrow-down"></i></span></div>
      <div class="arch-detail-card" style="border-left:4px solid #E8395B;background:rgba(255,105,135,.02)">
        <span class="lc lc-32 c-rose"><i data-lucide="zap"></i></span>
        <div>
          <div style="font-weight:800;color:#E8395B;font-size:1rem">运行时核心 ⭐</div>
          <div style="font-size:.85rem;color:#888">Agent 执行的"大脑"</div>
        </div>
      </div>
      <div style="text-align:center;color:#FFB4C2;font-size:1.5rem"><span class="lc lc-32"><i data-lucide="arrow-down"></i></span></div>
      <div class="arch-detail-card" style="border-left:4px solid #9B59B6">
        <span class="lc lc-32 c-purple"><i data-lucide="brain"></i></span>
        <div>
          <div style="font-weight:800;color:#9B59B6;font-size:1rem">智能记忆管理</div>
          <div style="font-size:.85rem;color:#888">有限窗口，无限智慧</div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- =========== Slide 5: 公式总结 =========== -->
<div class="slide bg-5" id="s4">
  
  <div class="deco deco-lav" style="width:700px;height:700px;top:50%;left:50%;margin-top:-350px;margin-left:-350px"></div>
  <div class="deco-square" style="width:60px;height:60px;border-color:#9B59B6;top:8%;right:10%"></div>
  <div class="deco-square" style="width:40px;height:40px;border-color:#FF6987;bottom:15%;left:8%"></div>
  
  <div class="anim" style="display:flex;align-items:center;gap:10px">
    <span class="subtitle-badge" style="color:#9B59B6;border-color:rgba(155,89,182,.2);background:rgba(155,89,182,.04)">
      <span class="lc lc-20 c-purple"><i data-lucide="sparkles"></i></span>
      一个公式总结 (｀・ω・´)ゞ
    </span>
  </div>
  <div class="anim line"></div>
  
  <div class="anim formula-box highlight-glow">
    <div class="formula-part">
      <div style="width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,rgba(43,168,164,.08),rgba(43,168,164,.02));display:flex;align-items:center;justify-content:center">
        <span class="lc lc-48 c-teal"><i data-lucide="bot"></i></span>
      </div>
      <span style="font-size:1.8rem;font-weight:900;color:#06D6A0">Coding Agent</span>
      <span class="t-sm c-gray">能稳定干活的智能体</span>
    </div>
    <div class="formula-op">=</div>
    <div class="formula-part">
      <div style="width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,rgba(74,144,217,.08),rgba(74,144,217,.02));display:flex;align-items:center;justify-content:center">
        <span class="lc lc-48 c-blue"><i data-lucide="brain"></i></span>
      </div>
      <span style="font-size:1.8rem;font-weight:900;color:#4A90D9">AI Model(s)</span>
      <span class="t-sm c-gray">一个或多个大模型</span>
    </div>
    <div class="formula-op">+</div>
    <div class="formula-part">
      <div style="width:80px;height:80px;border-radius:20px;background:linear-gradient(135deg,rgba(232,57,91,.08),rgba(232,57,91,.02));display:flex;align-items:center;justify-content:center">
        <span class="lc lc-48 c-rose"><i data-lucide="shield"></i></span>
      </div>
      <span style="font-size:1.8rem;font-weight:900;background:linear-gradient(135deg,#E8395B,#FF8C42);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text">Harness</span>
      <span class="t-sm c-gray">完善的驾驭系统</span>
    </div>
  </div>
  
  <div class="anim" style="margin-top:28px">
    <div class="t-big c-dark">一个<span class="c-rose bold ul-rose">能稳定干活</span>的 AI 代码智能体 ✧*｡٩(ˊᗜˋ*)و✧*｡</div>
  </div>
  <div class="anim t-mid c-gray" style="margin-top:8px">= 大模型 + 完善的 Harness 系统 (｡･ω･｡)ﾉ</div>
  
  <div class="anim" style="margin-top:20px">
    <div class="metaphor-row">
      <div class="metaphor-item">
        <span class="lc lc-32 c-rose"><i data-lucide="shield-alert"></i></span>
        <span>约束机制</span>
      </div>
      <div class="metaphor-item">
        <span class="lc lc-32 c-teal"><i data-lucide="refresh-cw"></i></span>
        <span>反馈回路</span>
      </div>
      <div class="metaphor-item">
        <span class="lc lc-32 c-blue"><i data-lucide="git-branch"></i></span>
        <span>工作流控制</span>
      </div>
      <div class="metaphor-item">
        <span class="lc lc-32 c-purple"><i data-lucide="trending-up"></i></span>
        <span>持续改进</span>
      </div>
    </div>
  </div>
  
  <div class="anim icon-row" style="margin-top:14px">
    <span class="lc lc-36 c-pink"><i data-lucide="target"></i></span>
    <span class="lc lc-36 c-orange"><i data-lucide="shield-check"></i></span>
    <span class="lc lc-36 c-purple"><i data-lucide="settings"></i></span>
    <span class="lc lc-36 c-teal"><i data-lucide="rocket"></i></span>
  </div>
</div>

</div>

<script>
lucide.createIcons();

// Create floating particles
const particlesEl = document.getElementById('particles');
const colors = ['#FF6987','#FFB482','#9B59B6','#4A90D9','#2BA8A4','#FF8C42'];
for(let i = 0; i < 20; i++){
  const p = document.createElement('div');
  p.className = 'particle';
  const size = Math.random() * 12 + 4;
  const color = colors[Math.floor(Math.random() * colors.length)];
  p.style.cssText = `width:${size}px;height:${size}px;background:${color};left:${Math.random()*100}%;animation-duration:${Math.random()*15+10}s;animation-delay:${Math.random()*10}s`;
  particlesEl.appendChild(p);
}

const slides = document.querySelectorAll('.slide');
const total = slides.length;
let cur = 0;

function go(n){
  if(n < 0 || n >= total || n === cur) return;
  slides[cur].classList.remove('active');
  slides[cur].querySelectorAll('.anim').forEach(e => e.classList.remove('show'));
  cur = n;
  slides[cur].classList.add('active');
  slides[cur].querySelectorAll('.anim').forEach((e, i) => {
    e.classList.remove('show');
    setTimeout(() => e.classList.add('show'), 200 + i * 280);
  });
}

// Initial animation
slides[0].querySelectorAll('.anim').forEach((e, i) => setTimeout(() => e.classList.add('show'), 400 + i * 320));

document.addEventListener('keydown', e => {
  if(['ArrowRight','ArrowDown',' ','PageDown'].includes(e.key)){ e.preventDefault(); go(cur + 1); }
  else if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){ e.preventDefault(); go(cur - 1); }
  else if(e.key === 'Home'){ e.preventDefault(); go(0); }
  else if(e.key === 'End'){ e.preventDefault(); go(total - 1); }
});

let tx = 0, ty = 0;
document.addEventListener('touchstart', e => { tx = e.changedTouches[0].screenX; ty = e.changedTouches[0].screenY; });
document.addEventListener('touchend', e => {
  const dx = e.changedTouches[0].screenX - tx, dy = e.changedTouches[0].screenY - ty;
  if(Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 50){ dx < 0 ? go(cur + 1) : go(cur - 1); }
});

let wc = false;
document.addEventListener('wheel', e => {
  if(wc) return; wc = true; setTimeout(() => wc = false, 800);
  e.deltaY > 0 ? go(cur + 1) : go(cur - 1);
});
</script>

</body>
</html>

path: assets/templates/PPT Template-level2/3-1.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Prompt Engineering · 提示词工程</title>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:#0F0E17;color:#FFFFFE;overflow:hidden;width:100vw;height:100vh}

:root {
  --accent: #06D6A0;
  --accent2: #00B4D8;
  --accent-glow: rgba(6,214,160,0.3);
  --dark: #0F0E17;
  --dark2: #1A1932;
  --gray: #A7A9BE;
}

/* Lucide icon helpers */
.lc{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.lc-96 svg{width:96px;height:96px}.lc-80 svg{width:80px;height:80px}.lc-64 svg{width:64px;height:64px}
.lc-48 svg{width:48px;height:48px}.lc-40 svg{width:40px;height:40px}.lc-36 svg{width:36px;height:36px}
.lc-32 svg{width:32px;height:32px}.lc-28 svg{width:28px;height:28px}.lc-24 svg{width:24px;height:24px}
.lc-20 svg{width:20px;height:20px}.lc-18 svg{width:18px;height:18px}.lc-16 svg{width:16px;height:16px}

.slide-container{width:100vw;height:100vh;position:relative}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px 80px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.slide.active{opacity:1;pointer-events:auto}
.slide .anim{opacity:0;transform:translateY(45px);transition:none}
.slide.active .anim.show{opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}

/* 装饰 */
.deco{position:absolute;border-radius:50%;pointer-events:none}
.deco-pink{background:radial-gradient(circle,rgba(6,214,160,.15),transparent)}
.deco-peach{background:radial-gradient(circle,rgba(0,180,216,.12),transparent)}
.deco-lav{background:radial-gradient(circle,rgba(0,217,255,.1),transparent)}

/* 文字尺寸 */
.t-hero{font-size:5.5rem;font-weight:900;line-height:1.15;text-align:center}
.t-huge{font-size:4rem;font-weight:900;line-height:1.2;text-align:center}
.t-big{font-size:3rem;font-weight:800;line-height:1.3;text-align:center}
.t-mid{font-size:2.2rem;font-weight:700;line-height:1.4;text-align:center}
.t-body{font-size:1.7rem;font-weight:400;line-height:1.6;text-align:center}
.t-sm{font-size:1.2rem;font-weight:400;line-height:1.5;text-align:center}

/* 颜色 */
.c-pink{color:#06D6A0}.c-rose{color:#00B4D8}.c-coral{color:#00D9FF}.c-orange{color:#00C9A7}
.c-purple{color:#7F5AF0}.c-teal{color:#06D6A0}.c-blue{color:#00B4D8}.c-dark{color:#FFFFFE}
.c-gray{color:#A7A9BE}.c-white{color:#fff}.c-amber{color:#00D9FF}

/* 背景强调 */
.bg-pink{background:rgba(6,214,160,.15);padding:6px 20px;border-radius:10px}
.bg-rose{background:rgba(0,180,216,.15);padding:6px 20px;border-radius:10px}
.bg-peach{background:rgba(0,217,255,.12);padding:6px 20px;border-radius:10px}
.bg-teal{background:rgba(6,214,160,.15);padding:6px 20px;border-radius:10px}
.bg-purple{background:rgba(127,90,240,.12);padding:6px 20px;border-radius:10px}
.bg-blue{background:rgba(0,180,216,.12);padding:6px 20px;border-radius:10px}
.bg-amber{background:rgba(0,217,255,.12);padding:6px 20px;border-radius:10px}

.ul-rose{text-decoration:underline;text-decoration-color:#00B4D8;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-pink{text-decoration:underline;text-decoration-color:#06D6A0;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-orange{text-decoration:underline;text-decoration-color:#00C9A7;text-decoration-thickness:4px;text-underline-offset:8px}
.bold{font-weight:900}.italic{font-style:italic}
.line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,#06D6A0,#00B4D8);margin:18px auto}

/* 卡片 */
.card{background:rgba(26,25,50,.6);border-radius:20px;padding:32px 36px;border:2px solid rgba(6,214,160,.15);box-shadow:0 6px 30px rgba(6,214,160,.1);display:flex;flex-direction:column;align-items:center;gap:10px}
.three-col{display:flex;gap:24px;width:96%;max-width:1300px;align-items:stretch}
.three-col .card{flex:1}

/* 流程箭头 */
.flow-h{display:flex;align-items:center;gap:0;justify-content:center;flex-wrap:wrap}
.flow-box{padding:14px 22px;border-radius:14px;font-size:1.5rem;font-weight:800;text-align:center;min-width:100px}
.flow-arrow{font-size:2.4rem;color:#06D6A0;margin:0 6px}

/* 时间线标签 */
.era-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 28px;border-radius:40px;font-size:1.8rem;font-weight:800}

/* icon */
.icon-row{display:flex;gap:20px;justify-content:center;align-items:center;flex-wrap:wrap}

/* 背景 */
.bg-1{background:radial-gradient(ellipse at 50% 30%,#1A1932 0%,#0F0E17 100%)}
.bg-2{background:radial-gradient(ellipse at 30% 20%,#1A1932 0%,#0F0E17 100%)}
.bg-3{background:radial-gradient(ellipse at 70% 80%,#1A1932 0%,#0F0E17 100%)}
.bg-4{background:radial-gradient(ellipse at 50% 50%,#1A1932 0%,#0F0E17 100%)}
.bg-5{background:radial-gradient(ellipse at 50% 70%,#1A1932 0%,#0F0E17 100%)}
.bg-6{background:radial-gradient(ellipse at 50% 80%,#1A1932 0%,#0F0E17 100%)}

/* 对话气泡 */
.chat-wrap{display:flex;flex-direction:column;gap:14px;width:80%;max-width:700px}
.chat-bubble{padding:18px 28px;border-radius:18px;font-size:1.5rem;font-weight:600;max-width:85%;line-height:1.5}
.chat-user{background:linear-gradient(135deg,#06D6A0,#00B4D8);color:#fff;align-self:flex-end;border-bottom-right-radius:6px}
.chat-ai{background:rgba(26,25,50,.8);color:#FFFFFE;align-self:flex-start;border-bottom-left-radius:6px;border:1px solid rgba(6,214,160,.2)}

/* 大概念词 */
.concept-word{font-size:5rem;font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,#06D6A0,#00B4D8,#7F5AF0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 流程图节点 */
.flow-diagram{display:flex;align-items:center;gap:0;justify-content:center;margin-top:36px}
.flow-node{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px 28px;border-radius:18px;min-width:140px}
.flow-node-label{font-size:1.1rem;font-weight:700;color:#999;margin-top:4px}
.flow-connector{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 8px}
.flow-connector-line{width:60px;height:3px;border-radius:2px}
.flow-connector-text{font-size:0.95rem;font-weight:700;white-space:nowrap}

/* 总结流程图 */
.summary-flow{display:flex;align-items:center;gap:0;justify-content:center;margin:10px 0}
.summary-node{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 30px;border-radius:18px;border-width:2.5px;border-style:solid;min-width:170px}
.summary-arrow{display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 6px}
</style>
</head>
<body>

<div class="slide-container">

<!-- ====== Slide 1: 标题 · 时代 ====== -->
<div class="slide bg-1 active" id="s0">
  <div class="deco deco-pink" style="width:500px;height:500px;top:-200px;right:-150px"></div>
  <div class="deco deco-peach" style="width:400px;height:400px;bottom:-120px;left:-120px"></div>

  <div class="anim era-badge" style="background:rgba(255,105,135,.1);color:#E8395B;">
    <span class="lc lc-32 c-rose"><i data-lucide="calendar"></i></span> 2022 — 2024
  </div>

  <div class="anim" style="margin-top:20px">
    <span class="concept-word">Prompt Engineering</span>
  </div>

  <div class="anim t-huge c-dark" style="margin-top:12px;letter-spacing:8px">
    提 示 词 工 程 <span style="font-size:1.8rem;color:#FF6987">(｡･ω･｡)ﾉ</span>
  </div>

  <div class="anim line"></div>

  <div class="anim t-mid c-gray italic">第一个阶段 (｀・ω・´)</div>
</div>

<!-- ====== Slide 2: 核心关注 ====== -->
<div class="slide bg-2" id="s1">
  <div class="deco deco-pink" style="width:450px;height:450px;top:-150px;left:-120px"></div>

  <div class="anim t-mid c-gray">这个阶段的核心关注 (｡ŏ_ŏ)</div>
  <div class="anim line"></div>
  <div class="anim t-hero c-dark">
    怎么写好<span class="c-rose bold ul-rose">一条指令</span> 
  </div>

  <div class="anim flow-diagram">
    <!-- 人 -->
    <div class="flow-node" style="background:rgba(6,214,160,.15);border:2.5px solid #06D6A0">
      <span class="lc lc-48 c-teal"><i data-lucide="user"></i></span>
      <div class="flow-node-label" style="color:#06D6A0">人</div>
    </div>
    <!-- 箭头 -->
    <div class="flow-connector">
      <div class="flow-connector-line" style="background:#06D6A0"></div>
      <span class="lc lc-24 c-teal"><i data-lucide="arrow-right"></i></span>
    </div>
    <!-- 提示词 -->
    <div class="flow-node" style="background:rgba(0,180,216,.15);border:2.5px solid #00B4D8">
      <span class="lc lc-48 c-blue"><i data-lucide="pencil-line"></i></span>
      <div style="font-size:1.3rem;font-weight:800;color:#00B4D8">Prompt</div>
      <div class="flow-node-label" style="color:#00B4D8">一条指令</div>
    </div>
    <!-- 箭头 -->
    <div class="flow-connector">
      <div class="flow-connector-line" style="background:#06D6A0"></div>
      <span class="lc lc-24 c-teal"><i data-lucide="arrow-right"></i></span>
    </div>
    <!-- AI -->
    <div class="flow-node" style="background:rgba(0,217,255,.15);border:2.5px solid #00D9FF">
      <span class="lc lc-48 c-coral"><i data-lucide="bot"></i></span>
      <div class="flow-node-label" style="color:#00D9FF">AI 输出</div>
    </div>
  </div>
</div>

<!-- ====== Slide 3: 三大技巧概览 ====== -->
<div class="slide bg-4" id="s2">
  <div class="deco deco-peach" style="width:500px;height:500px;top:-180px;right:-180px"></div>

  <div class="anim t-huge c-dark">三大经典技巧 (｡･ω･｡)</div>
  <div class="anim line"></div>

  <div class="anim three-col">
    <!-- Few-shot -->
    <div class="card" style="border-top:6px solid #FF8C42">
      <span class="lc lc-64 c-orange"><i data-lucide="clipboard-list"></i></span>
      <div class="t-mid c-orange bold">Few-shot</div>
      <div class="t-sm c-gray">少样本示例 (｡･ω･｡)ﾉ</div>
      <div style="margin-top:8px">
        <svg width="160" height="100" viewBox="0 0 160 100">
          <rect x="10" y="8" width="140" height="26" rx="8" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="80" y="26" text-anchor="middle" fill="#00B4D8" font-size="11" font-weight="700">示例 1 ✓</text>
          <rect x="10" y="38" width="140" height="26" rx="8" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="80" y="56" text-anchor="middle" fill="#00B4D8" font-size="11" font-weight="700">示例 2 ✓</text>
          <rect x="10" y="68" width="140" height="26" rx="8" fill="rgba(0,217,255,.12)" stroke="#00D9FF" stroke-width="1.5" stroke-dasharray="5,3"/>
          <text x="80" y="86" text-anchor="middle" fill="#00D9FF" font-size="11" font-weight="700">→ 按此格式生成</text>
        </svg>
      </div>
    </div>

    <!-- CoT -->
    <div class="card" style="border-top:6px solid #4A90D9">
      <span class="lc lc-64 c-blue"><i data-lucide="brain"></i></span>
      <div class="t-mid c-blue bold">Chain-of-Thought</div>
      <div class="t-sm c-gray">思维链 (｀・ω・´)</div>
      <div style="margin-top:8px">
        <svg width="160" height="100" viewBox="0 0 160 100">
          <defs><marker id="ar2" markerWidth="7" markerHeight="5" refX="7" refY="2.5" orient="auto"><polygon points="0 0,7 2.5,0 5" fill="#00B4D8"/></marker></defs>
          <circle cx="30" cy="20" r="14" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="30" y="24" text-anchor="middle" fill="#00B4D8" font-size="10" font-weight="800">S1</text>
          <line x1="44" y1="24" x2="56" y2="38" stroke="#00B4D8" stroke-width="1.5" marker-end="url(#ar2)"/>
          <circle cx="70" cy="48" r="14" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="70" y="52" text-anchor="middle" fill="#00B4D8" font-size="10" font-weight="800">S2</text>
          <line x1="84" y1="52" x2="96" y2="62" stroke="#00B4D8" stroke-width="1.5" marker-end="url(#ar2)"/>
          <circle cx="110" cy="72" r="14" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="110" y="76" text-anchor="middle" fill="#00B4D8" font-size="10" font-weight="800">S3</text>
          <line x1="124" y1="72" x2="136" y2="72" stroke="#00B4D8" stroke-width="1.5" marker-end="url(#ar2)"/>
          <circle cx="148" cy="72" r="10" fill="#00B4D8"/>
          <text x="148" y="76" text-anchor="middle" fill="#fff" font-size="9" font-weight="900">✓</text>
          <text x="80" y="98" text-anchor="middle" fill="#A7A9BE" font-size="10">逐步推导</text>
        </svg>
      </div>
    </div>

    <!-- 角色设定 -->
    <div class="card" style="border-top:6px solid #9B59B6">
      <span class="lc lc-64 c-purple"><i data-lucide="drama"></i></span>
      <div class="t-mid c-purple bold">角色设定</div>
      <div class="t-sm c-gray">Role Setting ✧(≖ ◡ ≖✿)</div>
      <div style="margin-top:8px">
        <svg width="160" height="100" viewBox="0 0 160 100">
          <rect x="10" y="10" width="140" height="80" rx="14" fill="rgba(127,90,240,.1)" stroke="#7F5AF0" stroke-width="2" stroke-dasharray="6,4"/>
          <text x="80" y="35" text-anchor="middle" fill="#7F5AF0" font-size="11" font-weight="700">"你现在是…"</text>
          <line x1="30" y1="45" x2="130" y2="45" stroke="rgba(127,90,240,.3)" stroke-width="1.5"/>
          <text x="80" y="62" text-anchor="middle" fill="#9B5DE5" font-size="10">划定身份</text>
          <text x="80" y="80" text-anchor="middle" fill="#7F5AF0" font-size="12" font-weight="800">限定行为</text>
        </svg>
      </div>
    </div>
  </div>
</div>

<!-- ====== Slide 4: Few-shot 详解 ====== -->
<div class="slide bg-3" id="s3">
  <div class="deco deco-lav" style="width:450px;height:450px;bottom:-150px;right:-120px"></div>

  <div class="anim" style="display:flex;align-items:center;gap:12px">
    <span class="lc lc-48 c-orange"><i data-lucide="clipboard-list"></i></span>
    <span class="t-huge c-orange bold">Few-shot</span> <span style="font-size:1.8rem">(｡･ω･｡)</span>
  </div>
  <div class="anim t-mid c-gray" style="margin-top:4px">在指令里附上<span class="c-orange bold">示例</span>，AI 照着格式生成 (｀・ω・´)</div>
  <div class="anim line"></div>

  <div class="anim chat-wrap">
    <div class="chat-bubble chat-user">
      <div style="font-size:1.1rem;opacity:.7;margin-bottom:4px;display:flex;align-items:center;gap:6px">
        <span class="lc lc-18 c-white"><i data-lucide="pencil-line"></i></span> Prompt
      </div>
      请按以下格式翻译：<br>
      <span class="italic" style="opacity:.85">示例：Hello → 你好</span><br>
      <span class="italic" style="opacity:.85">示例：Thank you → 谢谢</span><br>
      <b>请翻译：Good morning</b>
    </div>
    <div class="chat-bubble chat-ai">
      Good morning → <b>早上好</b> <span class="lc lc-20" style="color:#2BA8A4"><i data-lucide="check-circle"></i></span>
    </div>
  </div>

  <div class="anim t-body c-gray italic" style="margin-top:20px">
    给几个<span class="bg-peach c-orange bold">符合要求的输出示例</span> → 严格按格式生成 ✧
  </div>
</div>

<!-- ====== Slide 5: CoT + 角色设定 ====== -->
<div class="slide bg-5" id="s4">
  <div class="deco deco-pink" style="width:400px;height:400px;top:-120px;left:-120px"></div>
  <div class="deco deco-lav" style="width:350px;height:350px;bottom:-100px;right:-100px"></div>

  <div class="anim" style="display:flex;gap:36px;width:94%;max-width:1200px;align-items:stretch">
    <!-- CoT -->
    <div class="card" style="flex:1;border-left:6px solid #4A90D9">
      <span class="lc lc-64 c-blue"><i data-lucide="brain"></i></span>
      <div class="t-mid c-blue bold">Chain-of-Thought</div>
      <div class="t-sm c-gray italic">思维链 (｀・ω・´)</div>
      <div class="line" style="margin:10px auto"></div>
      <div class="t-body" style="text-align:left;font-size:1.3rem;line-height:1.8">
        要求 AI <span class="c-blue bold">一步步拆解</span><br>
        <span class="c-dark bold">逐步推导</span>，不能直接给结果 (｡ŏ_ŏ)
      </div>
      <div style="margin:10px 0">
        <svg width="280" height="55" viewBox="0 0 280 55">
          <defs><marker id="ar3" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto"><polygon points="0 0,8 3,0 6" fill="#00B4D8"/></marker></defs>
          <rect x="0" y="12" width="60" height="30" rx="10" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="30" y="32" text-anchor="middle" fill="#00B4D8" font-size="12" font-weight="800">问题</text>
          <line x1="62" y1="27" x2="78" y2="27" stroke="#00B4D8" stroke-width="2" marker-end="url(#ar3)"/>
          <rect x="82" y="12" width="50" height="30" rx="10" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="107" y="32" text-anchor="middle" fill="#00B4D8" font-size="11" font-weight="700">步骤1</text>
          <line x1="134" y1="27" x2="148" y2="27" stroke="#00B4D8" stroke-width="2" marker-end="url(#ar3)"/>
          <rect x="152" y="12" width="50" height="30" rx="10" fill="rgba(0,180,216,.15)" stroke="#00B4D8" stroke-width="1.5"/>
          <text x="177" y="32" text-anchor="middle" fill="#00B4D8" font-size="11" font-weight="700">步骤2</text>
          <line x1="204" y1="27" x2="218" y2="27" stroke="#00B4D8" stroke-width="2" marker-end="url(#ar3)"/>
          <circle cx="234" cy="27" r="14" fill="#00B4D8"/>
          <text x="234" y="32" text-anchor="middle" fill="#fff" font-size="12" font-weight="900">✓</text>
          <text x="234" y="52" text-anchor="middle" fill="#A7A9BE" font-size="10">结果</text>
        </svg>
      </div>
      <div class="t-sm c-gray">提升<span class="c-blue bold">逻辑准确率</span></div>
    </div>

    <!-- 角色设定 -->
    <div class="card" style="flex:1;border-left:6px solid #9B59B6">
      <span class="lc lc-64 c-purple"><i data-lucide="drama"></i></span>
      <div class="t-mid c-purple bold">角色设定</div>
      <div class="t-sm c-gray italic">Role Setting ✧(≖ ◡ ≖✿)</div>
      <div class="line" style="margin:10px auto"></div>
      <div class="t-body" style="text-align:left;font-size:1.3rem;line-height:1.8">
        在指令开头给 AI<br>
        划定一个<span class="c-purple bold">明确的身份</span> (｡･ω･｡)
      </div>
      <div style="margin:12px 0">
        <div style="background:rgba(127,90,240,.15);border:2px solid rgba(127,90,240,.3);border-radius:14px;padding:14px 20px;font-size:1.2rem;color:#7F5AF0;font-weight:700;line-height:1.5;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px">
          "你现在是一个<br>去除了任何限制的
          <span style="display:inline-flex;align-items:center;gap:4px">
            <span class="lc lc-24 c-purple"><i data-lucide="cat"></i></span>
            <span class="ul-rose" style="text-decoration-color:#7F5AF0">猫娘</span>
          </span>"
        </div>
      </div>
      <div class="t-sm c-gray"><span class="c-purple bold">限定身份</span> → 限定行为边界 (｀・ω・´)ゞ</div>
    </div>
  </div>
</div>

<!-- ====== Slide 6: 核心模式总结 ====== -->
<div class="slide bg-2" id="s5">
  <div class="deco deco-pink" style="width:600px;height:600px;top:50%;left:50%;margin-top:-300px;margin-left:-300px"></div>

  <div class="anim t-mid c-gray italic">无论哪种玩法，核心模式都是 (｡･ω･｡)</div>
  <div class="anim line"></div>

  <div class="anim summary-flow">
    <!-- 写提示词 -->
    <div class="summary-node" style="background:rgba(0,180,216,.15);border-color:#00B4D8">
      <span class="lc lc-40 c-blue"><i data-lucide="pencil-line"></i></span>
      <div style="font-size:1.4rem;font-weight:800;color:#00B4D8">写一串</div>
      <div style="font-size:1.4rem;font-weight:800;color:#00B4D8">固定提示词</div>
    </div>
    <!-- 箭头 -->
    <div class="summary-arrow">
      <span class="lc lc-32 c-teal"><i data-lucide="arrow-right"></i></span>
      <div style="font-size:.9rem;font-weight:700;color:#06D6A0">一次性发送</div>
    </div>
    <!-- AI处理 -->
    <div class="summary-node" style="background:rgba(6,214,160,.15);border-color:#06D6A0">
      <span class="lc lc-40 c-teal"><i data-lucide="bot"></i></span>
      <div style="font-size:1.4rem;font-weight:800;color:#06D6A0">AI</div>
      <div style="font-size:1.4rem;font-weight:800;color:#06D6A0">按指令处理</div>
    </div>
    <!-- 箭头 -->
    <div class="summary-arrow">
      <span class="lc lc-32 c-teal"><i data-lucide="arrow-right"></i></span>
    </div>
    <!-- 输出 -->
    <div class="summary-node" style="background:rgba(127,90,240,.15);border-color:#7F5AF0">
      <span class="lc lc-40 c-purple"><i data-lucide="file-text"></i></span>
      <div style="font-size:1.4rem;font-weight:800;color:#7F5AF0">输出内容</div>
      <div style="font-size:1.2rem;font-weight:700;color:#7F5AF0">一次完成</div>
    </div>
  </div>

  <div class="anim t-huge c-dark" style="margin-top:16px">
    一条指令 → <span class="bg-rose c-rose bold">一次输出</span> ✧*｡٩(ˊᗜˋ*)و✧*｡
  </div>

  <div class="anim t-body c-gray" style="margin-top:12px">
    写 AI 猫娘、用 AI 写代码……<span class="c-pink bold italic">都是这个模式</span> (｡･ω･｡)ﾉ
  </div>
</div>

</div>

<script>
lucide.createIcons();

const slides=document.querySelectorAll('.slide'),
      total=slides.length;
let cur=0;

function go(n){
  if(n<0||n>=total||n===cur)return;
  slides[cur].classList.remove('active');
  slides[cur].querySelectorAll('.anim').forEach(e=>e.classList.remove('show'));
  cur=n;
  slides[cur].classList.add('active');
  slides[cur].querySelectorAll('.anim').forEach((e,i)=>{
    e.classList.remove('show');
    setTimeout(()=>e.classList.add('show'),200+i*300);
  });
}

// 首页动画
slides[0].querySelectorAll('.anim').forEach((e,i)=>setTimeout(()=>e.classList.add('show'),400+i*350));

// 键盘
document.addEventListener('keydown',e=>{
  if(['ArrowRight','ArrowDown',' ','PageDown'].includes(e.key)){e.preventDefault();go(cur+1)}
  else if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();go(cur-1)}
  else if(e.key==='Home'){e.preventDefault();go(0)}
  else if(e.key==='End'){e.preventDefault();go(total-1)}
});

// 触屏
let tx=0,ty=0;
document.addEventListener('touchstart',e=>{tx=e.changedTouches[0].screenX;ty=e.changedTouches[0].screenY});
document.addEventListener('touchend',e=>{
  const dx=e.changedTouches[0].screenX-tx,dy=e.changedTouches[0].screenY-ty;
  if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>50){dx<0?go(cur+1):go(cur-1)}
});

// 滚轮
let wc=false;
document.addEventListener('wheel',e=>{
  if(wc)return;wc=true;setTimeout(()=>wc=false,800);
  e.deltaY>0?go(cur+1):go(cur-1);
});
</script>

</body>
</html>

path: assets/templates/PPT Template-level2/3-2.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Context Engineering · 上下文工程</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
    <style>
        * { margin:0; padding:0; box-sizing:border-box; }
        
        :root {
            --dark-bg: #0D1117;
            --dark-secondary: #161B22;
            --dark-tertiary: #21262D;
            --accent-cyan: #00D9FF;
            --accent-teal: #2DD4BF;
            --accent-blue: #60A5FA;
            --accent-purple: #A78BFA;
            --text-primary: #E6EDF3;
            --text-secondary: #8B949E;
            --text-muted: #6E7681;
            --glow-cyan: rgba(0, 217, 255, 0.3);
            --glow-teal: rgba(45, 212, 191, 0.25);
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: var(--dark-bg);
            color: var(--text-primary);
            overflow: hidden;
            width: 100vw; height: 100vh;
        }

        /* ============ Background Effects ============ */
        .bg-grid {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            background-image: 
                linear-gradient(rgba(0,217,255,0.03) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0,217,255,0.03) 1px, transparent 1px);
            background-size: 60px 60px;
            pointer-events: none;
        }
        
        .glow-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(80px);
            opacity: 0.15;
            pointer-events: none;
            animation: orbFloat 8s ease-in-out infinite alternate;
        }
        @keyframes orbFloat {
            0% { transform: translate(0, 0) scale(1); }
            100% { transform: translate(30px, -30px) scale(1.1); }
        }

        /* ============ Slide Container ============ */
        .deck { position: relative; width:100%; height:100%; }
        .slide {
            position: absolute; inset:0;
            display: flex; flex-direction: column;
            justify-content: center; align-items: center;
            padding: 50px 80px;
            opacity: 0; pointer-events: none;
            transition: opacity .5s ease;
            background: radial-gradient(ellipse at 50% 30%, var(--dark-secondary) 0%, var(--dark-bg) 100%);
            overflow: hidden;
        }
        .slide.active { opacity:1; pointer-events:auto; }

        /* ============ Stagger entrance animation ============ */
        .slide .anim {
            opacity: 0;
            transform: translateY(38px);
            transition: opacity .65s cubic-bezier(.23,1,.32,1), transform .65s cubic-bezier(.23,1,.32,1);
        }
        .slide.active .anim.show {
            opacity: 1;
            transform: translateY(0);
        }

        /* ============ Typography ============ */
        .title-lg { font-size: 58px; font-weight:800; line-height:1.25; color:var(--text-primary); }
        .title-md { font-size: 46px; font-weight:700; line-height:1.3; color:var(--text-primary); }
        .subtitle { font-size: 28px; font-weight:400; color:var(--text-secondary); line-height:1.5; }
        .text-xl { font-size: 32px; line-height:1.7; color:var(--text-primary); }
        .text-lg { font-size: 28px; line-height:1.7; color:var(--text-secondary); }

        .hl-cyan { color:var(--accent-cyan); font-weight:700; }
        .hl-teal { color:var(--accent-teal); font-weight:700; }
        .hl-blue { color:var(--accent-blue); }
        .hl-bg { background:rgba(0,217,255,0.1); padding:2px 10px; border-radius:5px; border:1px solid rgba(0,217,255,0.2); }
        .hl-bg2 { background:rgba(45,212,191,0.1); padding:2px 10px; border-radius:5px; border:1px solid rgba(45,212,191,0.2); }
        .hl-underline { text-decoration: underline; text-decoration-color:var(--accent-cyan); text-underline-offset:6px; text-decoration-thickness:3px; }
        .hl-italic { font-style:italic; }

        .tag {
            display:inline-flex; align-items:center; gap:6px;
            background:rgba(0,217,255,0.1); color:var(--accent-cyan); font-size:20px; font-weight:600;
            padding:6px 18px; border-radius:20px; border:1.5px solid rgba(0,217,255,0.25);
            backdrop-filter: blur(10px);
        }

        .divider {
            width:80px; height:4px; border-radius:2px;
            background: linear-gradient(90deg,var(--accent-cyan),var(--accent-teal));
            margin:16px 0;
        }

        .year-badge {
            display:inline-flex; align-items:center; gap:8px;
            background: linear-gradient(135deg,rgba(0,217,255,0.2),rgba(45,212,191,0.15));
            color:var(--accent-cyan); font-size:24px; font-weight:700;
            padding:10px 28px; border-radius:30px;
            border: 1px solid rgba(0,217,255,0.3);
            box-shadow: 0 4px 18px var(--glow-cyan);
        }

        /* ============ Slide 1 - Title ============ */
        .slide-1 { background: radial-gradient(ellipse at 50% 30%, var(--dark-secondary) 0%, var(--dark-bg) 100%); }
        .slide-1 .glow-orb-1 {
            width: 500px; height: 500px;
            background: var(--accent-cyan);
            top: -100px; right: -100px;
        }
        .slide-1 .glow-orb-2 {
            width: 400px; height: 400px;
            background: var(--accent-purple);
            bottom: -100px; left: -50px;
            animation-delay: -4s;
        }

        .hero-visual {
            position: relative;
            width: 520px; height: 280px;
            margin: 20px auto 0;
        }
        .hero-window {
            position: absolute;
            background: var(--dark-tertiary);
            border-radius: 14px;
            border: 2px solid rgba(0,217,255,0.15);
            box-shadow: 0 8px 32px rgba(0,0,0,0.4);
            overflow: hidden;
        }
        .hero-window .win-bar {
            height: 28px; background: var(--dark-secondary);
            display: flex; align-items: center; padding: 0 10px; gap: 6px;
            border-bottom: 1px solid rgba(0,217,255,0.1);
        }
        .hero-window .win-bar span {
            width: 10px; height: 10px; border-radius: 50%;
        }
        .hero-window .win-body {
            padding: 14px 16px;
        }
        .hero-window .win-line {
            height: 8px; border-radius: 4px; margin-bottom: 8px;
        }
        .hero-w1 { width: 260px; top: 0; left: 0; z-index: 3; }
        .hero-w2 { width: 240px; top: 30px; left: 160px; z-index: 2; opacity:.85; }
        .hero-w3 { width: 200px; top: 60px; left: 300px; z-index: 1; opacity:.65; }
        .hero-gear {
            position: absolute;
            bottom: 10px; left: 50%;
            transform: translateX(-50%);
            animation: spin 12s linear infinite;
        }
        @keyframes spin { from{transform:translateX(-50%) rotate(0deg)} to{transform:translateX(-50%) rotate(360deg)} }

        /* Floating particles */
        .float-particle {
            position: absolute; border-radius: 50%; opacity: .2;
            background: var(--accent-cyan);
            animation: floatUp 6s ease-in-out infinite;
            box-shadow: 0 0 20px var(--accent-cyan);
        }
        @keyframes floatUp {
            0%,100% { transform: translateY(0) scale(1); opacity:.2; }
            50% { transform: translateY(-20px) scale(1.2); opacity:.35; }
        }

        /* ============ Slide 2 - Before vs After ============ */
        .compare-box {
            display: flex; align-items: stretch; gap: 0;
            max-width: 1000px; width: 100%;
        }
        .compare-side {
            flex: 1; padding: 36px 32px; text-align: center;
            display: flex; flex-direction: column; align-items: center; gap: 16px;
        }
        .compare-side.before {
            background: var(--dark-tertiary); border-radius: 20px 0 0 20px;
            border: 2px solid rgba(110,118,129,0.3); border-right: none;
        }
        .compare-side.after {
            background: rgba(0,217,255,0.08); border-radius: 0 20px 20px 0;
            border: 2px solid rgba(0,217,255,0.25);
        }
        .compare-arrow-col {
            display: flex; align-items: center; justify-content: center;
            width: 80px; flex-shrink: 0;
        }
        .compare-icon-wrap {
            width: 130px; height: 130px; border-radius: 28px;
            display: flex; align-items: center; justify-content: center;
        }
        .compare-icon-wrap.dim { background: var(--dark-secondary); border: 2px solid rgba(110,118,129,0.3); }
        .compare-icon-wrap.lit { background: rgba(0,217,255,0.1); border: 2px solid var(--accent-cyan); box-shadow: 0 0 30px var(--glow-cyan); }

        /* Context stack */
        .ctx-stack {
            display: flex; flex-direction: column; gap: 6px; align-items: center;
        }
        .ctx-layer {
            display: flex; align-items: center; gap: 8px;
            background: var(--dark-secondary); border: 1.5px solid rgba(0,217,255,0.2);
            border-radius: 10px; padding: 6px 16px;
            font-size: 16px; font-weight: 600; color: var(--text-secondary);
        }

        /* ============ Slide 3 - Center Diagram ============ */
        .center-diagram {
            position: relative;
            width: 500px; height: 500px;
            margin: 0 auto;
        }
        .orbit-ring {
            position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%);
            border-radius:50%; z-index:1;
        }
        .orbit-ring-1 { width:380px; height:380px; border:2px dashed rgba(0,217,255,0.2); }
        .orbit-ring-2 { width:260px; height:260px; border:2px dotted rgba(45,212,191,0.15); }

        .center-node {
            position:absolute; top:50%; left:50%;
            transform:translate(-50%,-50%);
            width:150px; height:150px; border-radius:50%;
            background: linear-gradient(135deg,var(--accent-cyan),var(--accent-teal));
            color:var(--dark-bg); display:flex; flex-direction:column;
            align-items:center; justify-content:center;
            font-size:22px; font-weight:700;
            box-shadow: 0 6px 30px var(--glow-cyan);
            z-index:10;
        }
        /* Pulse ring */
        .center-node::before {
            content:''; position:absolute; inset:-18px;
            border-radius:50%; border:3px solid var(--glow-cyan);
            animation: pulse 2.5s ease-out infinite;
        }
        @keyframes pulse {
            0% { transform:scale(.9); opacity:1; }
            100% { transform:scale(1.3); opacity:0; }
        }

        .orbit-item {
            position:absolute; z-index:5;
            display:flex; flex-direction:column; align-items:center; gap:8px;
        }
        .orbit-icon-box {
            width:100px; height:100px; border-radius:22px;
            background:var(--dark-tertiary); border:2px solid rgba(0,217,255,0.2);
            display:flex; align-items:center; justify-content:center;
            box-shadow: 0 4px 18px rgba(0,0,0,0.3);
            transition: transform .3s, box-shadow .3s;
        }
        .orbit-icon-box:hover { transform:scale(1.08); box-shadow:0 6px 24px var(--glow-cyan); }
        .orbit-label {
            font-size:18px; font-weight:700; color:var(--text-secondary);
            background:var(--dark-secondary); padding:3px 12px; border-radius:8px;
            border: 1px solid rgba(0,217,255,0.1);
        }

        /* Connector lines using SVG */
        .diagram-connectors {
            position:absolute; inset:0; z-index:2;
        }

        /* Orbit positions */
        .orbit-item.pos-top    { top: -20px; left:50%; transform:translateX(-50%); }
        .orbit-item.pos-right  { top:50%; right:-30px; transform:translateY(-50%); }
        .orbit-item.pos-bottom { bottom:-20px; left:50%; transform:translateX(-50%); }
        .orbit-item.pos-left   { top:50%; left:-30px; transform:translateY(-50%); }

        /* ============ Slide 4 - Enhanced Cards ============ */
        .card-grid {
            display:grid; gap:28px;
            width:100%; max-width:1100px;
        }
        .card-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

        .card-enhanced {
            background:var(--dark-tertiary); border-radius:20px;
            padding:30px 24px; text-align:center;
            border:2px solid rgba(0,217,255,0.1);
            box-shadow: 0 4px 20px rgba(0,0,0,0.3);
            transition: transform .3s, box-shadow .3s;
            position: relative;
            overflow: hidden;
        }
        .card-enhanced::before {
            content:''; position:absolute; top:0; left:0; right:0;
            height:5px;
            border-radius: 20px 20px 0 0;
        }
        .card-enhanced.c1::before { background: linear-gradient(90deg,var(--accent-cyan),var(--accent-teal)); }
        .card-enhanced.c2::before { background: linear-gradient(90deg,var(--accent-teal),var(--accent-blue)); }
        .card-enhanced.c3::before { background: linear-gradient(90deg,var(--accent-blue),var(--accent-purple)); }
        .card-enhanced.c4::before { background: linear-gradient(90deg,var(--accent-purple),var(--accent-cyan)); }
        .card-enhanced:hover { transform:translateY(-6px); box-shadow:0 10px 35px rgba(0,217,255,0.15); border-color: rgba(0,217,255,0.25); }

        .card-icon-lg {
            width:90px; height:90px; border-radius:24px;
            display:flex; align-items:center; justify-content:center;
            margin:0 auto 14px;
        }
        .card-icon-lg.o1 { background:rgba(0,217,255,0.1); border: 2px solid rgba(0,217,255,0.2); }
        .card-icon-lg.o2 { background:rgba(45,212,191,0.1); border: 2px solid rgba(45,212,191,0.2); }
        .card-icon-lg.o3 { background:rgba(96,165,250,0.1); border: 2px solid rgba(96,165,250,0.2); }
        .card-icon-lg.o4 { background:rgba(167,139,250,0.1); border: 2px solid rgba(167,139,250,0.2); }
        .card-enhanced .card-title { font-size:28px; font-weight:700; color:var(--text-primary); margin-bottom:10px; }
        .card-enhanced .card-desc { font-size:20px; color:var(--text-secondary); line-height:1.5; }

        /* Illustration inside card */
        .card-illust {
            display: flex; flex-direction: column; gap: 5px;
            margin-top: 12px; align-items: center;
        }
        .card-illust-bar {
            height: 6px; border-radius: 3px;
        }

        /* ============ Slide 5 - Summary visual ============ */
        .slide-5 { background: radial-gradient(ellipse at 50% 30%, var(--dark-secondary) 0%, var(--dark-bg) 100%); }
        .slide-5 .glow-orb-1 {
            width: 500px; height: 500px;
            background: var(--accent-teal);
            bottom: -150px; left: 50%;
            transform: translateX(-50%);
        }

        .summary-visual {
            display: flex; align-items: center; gap: 40px;
            margin-top: 20px;
        }
        .summary-left {
            display: flex; flex-direction: column; align-items: center; gap: 14px;
        }
        .sum-funnel {
            position: relative; width: 200px; height: 240px;
        }
        .funnel-layer {
            position: absolute; left: 50%; transform: translateX(-50%);
            border-radius: 14px; display: flex; align-items: center;
            justify-content: center; gap: 8px;
            font-size: 15px; font-weight: 600; color: var(--dark-bg);
            box-shadow: 0 3px 12px rgba(0,0,0,.3);
        }
        .funnel-layer.f1 { width:190px; height:46px; top:0;   background:linear-gradient(90deg,var(--accent-cyan),var(--accent-teal)); }
        .funnel-layer.f2 { width:160px; height:46px; top:54px; background:linear-gradient(90deg,var(--accent-teal),var(--accent-blue)); }
        .funnel-layer.f3 { width:130px; height:46px; top:108px; background:linear-gradient(90deg,var(--accent-blue),var(--accent-purple)); }
        .funnel-layer.f4 { width:100px; height:46px; top:162px; background:linear-gradient(90deg,var(--accent-purple),var(--accent-cyan)); }

        .funnel-arrow-down {
            position: absolute; bottom: -10px; left: 50%;
            transform: translateX(-50%);
        }

        .summary-right {
            display: flex; flex-direction: column; align-items: center; gap: 12px;
        }
        .result-box {
            width: 280px; background: var(--dark-tertiary); border-radius: 20px;
            border: 3px solid var(--accent-cyan); padding: 28px;
            text-align: center;
            box-shadow: 0 8px 30px var(--glow-cyan);
        }
        .result-box .result-icon {
            width: 80px; height: 80px; border-radius: 50%;
            background: linear-gradient(135deg,var(--accent-cyan),var(--accent-teal));
            display: flex; align-items: center; justify-content: center;
            margin: 0 auto 14px;
        }

        /* ============ Responsive ============ */
        @media(max-width:900px){
            .slide { padding:30px 24px; }
            .title-lg { font-size:38px; }
            .title-md { font-size:30px; }
            .card-grid.cols-4 { grid-template-columns:1fr 1fr; }
            .compare-box { flex-direction: column; }
            .compare-arrow-col { width: auto; height: 50px; }
        }
    </style>
</head>
<body>

<div class="bg-grid"></div>

<div class="deck" id="deck">

    <!-- ======================== SLIDE 1: Title ======================== -->
    <div class="slide slide-1 active" data-index="0">
        <div class="glow-orb glow-orb-1"></div>
        <div class="glow-orb glow-orb-2"></div>
        <!-- Floating particles -->
        <div class="float-particle" style="width:12px;height:12px;top:15%;left:12%;animation-delay:0s;"></div>
        <div class="float-particle" style="width:8px;height:8px;top:25%;right:18%;animation-delay:1.5s;"></div>
        <div class="float-particle" style="width:10px;height:10px;bottom:20%;left:25%;animation-delay:3s;"></div>
        <div class="float-particle" style="width:6px;height:6px;top:60%;right:10%;animation-delay:4s;"></div>

        <div class="anim" style="margin-bottom:12px;">
            <span class="tag">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                第二阶段
            </span>
        </div>

        <div class="anim">
            <div class="year-badge">
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                2025
            </div>
        </div>

        <div class="anim" style="margin-top:22px;">
            <div class="title-lg" style="text-align:center;">
                <span class="hl-cyan">Context Engineering</span> <span style="font-size:1.8rem;color:var(--accent-cyan)">(｡･ω･｡)ﾉ</span>
            </div>
        </div>
        <div class="anim" style="margin-top:4px;">
            <div class="title-lg" style="text-align:center;">上下文工程 ✧</div>
        </div>

        <div class="anim" style="margin-top:16px;">
            <div class="divider" style="margin:0 auto;"></div>
        </div>

        <!-- Hero visual: stacked windows illustration -->
        <div class="anim" style="margin-top:10px;">
            <div class="hero-visual">
                <!-- Window 1 -->
                <div class="hero-window hero-w1">
                    <div class="win-bar">
                        <span style="background:var(--accent-cyan);"></span>
                        <span style="background:var(--accent-teal);"></span>
                        <span style="background:var(--text-muted);"></span>
                    </div>
                    <div class="win-body">
                        <div class="win-line" style="width:85%;background:rgba(0,217,255,0.2);"></div>
                        <div class="win-line" style="width:65%;background:rgba(45,212,191,0.15);"></div>
                        <div class="win-line" style="width:75%;background:rgba(0,217,255,0.18);"></div>
                        <div class="win-line" style="width:50%;background:rgba(0,217,255,0.12);"></div>
                    </div>
                </div>
                <!-- Window 2 -->
                <div class="hero-window hero-w2">
                    <div class="win-bar">
                        <span style="background:var(--accent-teal);"></span>
                        <span style="background:var(--accent-blue);"></span>
                        <span style="background:var(--text-muted);"></span>
                    </div>
                    <div class="win-body">
                        <div class="win-line" style="width:70%;background:rgba(45,212,191,0.15);"></div>
                        <div class="win-line" style="width:90%;background:rgba(96,165,250,0.12);"></div>
                        <div class="win-line" style="width:55%;background:rgba(0,217,255,0.1);"></div>
                    </div>
                </div>
                <!-- Window 3 -->
                <div class="hero-window hero-w3">
                    <div class="win-bar">
                        <span style="background:var(--accent-blue);"></span>
                        <span style="background:var(--accent-purple);"></span>
                        <span style="background:var(--text-muted);"></span>
                    </div>
                    <div class="win-body">
                        <div class="win-line" style="width:80%;background:rgba(96,165,250,0.12);"></div>
                        <div class="win-line" style="width:60%;background:rgba(167,139,250,0.1);"></div>
                    </div>
                </div>
                <!-- Gear icon -->
                <div class="hero-gear">
                    <svg width="50" height="50" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.4">
                        <circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>
                    </svg>
                </div>
            </div>
        </div>

        <div class="anim" style="margin-top:6px;">
            <div class="subtitle" style="text-align:center; max-width:700px;">
                为模型<span class="hl-underline">动态构建</span>整个上下文环境 (｀・ω・´)
            </div>
        </div>
    </div>

    <!-- ======================== SLIDE 2: Before vs After ======================== -->
    <div class="slide" data-index="1">
        <div class="glow-orb glow-orb-1" style="width:400px;height:400px;top:-120px;left:-100px;background:var(--accent-teal);"></div>

        <div class="anim">
            <div class="title-md" style="text-align:center;">
                <svg width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="vertical-align:middle;margin-right:12px;"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                单条 Prompt <span class="hl-cyan">不够用了</span> (｡ŏ_ŏ)
            </div>
        </div>

        <div class="anim" style="margin-top:10px;">
            <div class="divider" style="margin:0 auto;"></div>
        </div>

        <div class="anim" style="margin-top:30px; width:100%;">
            <div class="compare-box" style="margin:0 auto;">
                <!-- Before -->
                <div class="compare-side before">
                    <div class="compare-icon-wrap dim">
                        <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--text-muted)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    </div>
                    <div class="text-lg" style="font-weight:700; font-size:32px;">过去 (´；ω；`)</div>

                    <div class="text-lg" style="color:var(--text-muted); font-size:24px;">
                        一条 Prompt → 一次回答
                    </div>
                </div>

                <!-- Arrow -->
                <div class="compare-arrow-col">
                    <svg width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </div>

                <!-- After -->
                <div class="compare-side after">
                    <div class="compare-icon-wrap lit">
                        <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                    </div>
                    <div class="text-lg" style="font-weight:700; font-size:32px;">现在 ✧(≖ ◡ ≖✿)</div>
                    <!-- Context stack illustration -->
                    <div class="ctx-stack">
                        <div class="ctx-layer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                            文件
                        </div>
                        <div class="ctx-layer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-teal)" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                            对话
                        </div>
                        <div class="ctx-layer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                            工具
                        </div>
                        <div class="ctx-layer">
                            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent-purple)" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                            知识库
                        </div>
                    </div>
                    <div class="text-lg" style="color:var(--text-secondary); font-size:24px;">
                        构建<span class="hl-bg">完整上下文</span> (｡･ω･｡)
                    </div>
                </div>
            </div>
        </div>

        <div class="anim" style="margin-top:30px;">
            <div class="text-xl" style="text-align:center;">
                模型每做决策，都要<span class="hl-underline hl-cyan" style="font-size:38px;">看到所有信息</span> (｀・ω・´)
            </div>
        </div>
    </div>

    <!-- ======================== SLIDE 3: Core Diagram ======================== -->
    <div class="slide" data-index="2">
        <div class="glow-orb glow-orb-1" style="width:350px;height:350px;bottom:-100px;right:-80px;background:var(--accent-blue);"></div>

        <div class="anim">
            <div class="title-md" style="text-align:center;">
                上下文工程的<span class="hl-cyan">核心</span> (｡･ω･｡)
            </div>
        </div>

        <div class="anim" style="margin-top:4px;">
            <div class="divider" style="margin:0 auto;"></div>
        </div>

        <div class="anim" style="margin-top:8px;">
            <div class="subtitle" style="text-align:center;">
                <span class="hl-italic">动态构建</span>模型决策所需的<span class="hl-bg hl-underline">全部环境</span> (｀・ω・´)
            </div>
        </div>

        <div class="anim" style="margin-top:6px;">
            <div class="center-diagram">
                <!-- SVG connector lines -->
                <svg class="diagram-connectors" viewBox="0 0 500 500" fill="none">
                    <!-- top -->
                    <line x1="250" y1="100" x2="250" y2="185" stroke="rgba(0,217,255,0.3)" stroke-width="2.5" stroke-dasharray="6,4"/>
                    <!-- right -->
                    <line x1="400" y1="250" x2="315" y2="250" stroke="rgba(0,217,255,0.3)" stroke-width="2.5" stroke-dasharray="6,4"/>
                    <!-- bottom -->
                    <line x1="250" y1="400" x2="250" y2="315" stroke="rgba(0,217,255,0.3)" stroke-width="2.5" stroke-dasharray="6,4"/>
                    <!-- left -->
                    <line x1="100" y1="250" x2="185" y2="250" stroke="rgba(0,217,255,0.3)" stroke-width="2.5" stroke-dasharray="6,4"/>
                    <!-- Animated dots on connectors -->
                    <circle r="5" fill="var(--accent-cyan)" opacity=".6">
                        <animateMotion dur="2.5s" repeatCount="indefinite" path="M250,100 L250,185"/>
                    </circle>
                    <circle r="5" fill="var(--accent-cyan)" opacity=".6">
                        <animateMotion dur="2.5s" repeatCount="indefinite" path="M400,250 L315,250" begin=".6s"/>
                    </circle>
                    <circle r="5" fill="var(--accent-cyan)" opacity=".6">
                        <animateMotion dur="2.5s" repeatCount="indefinite" path="M250,400 L250,315" begin="1.2s"/>
                    </circle>
                    <circle r="5" fill="var(--accent-cyan)" opacity=".6">
                        <animateMotion dur="2.5s" repeatCount="indefinite" path="M100,250 L185,250" begin="1.8s"/>
                    </circle>
                </svg>

                <div class="orbit-ring orbit-ring-1"></div>
                <div class="orbit-ring orbit-ring-2"></div>

                <div class="center-node">
                    <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                    <span style="margin-top:4px;">AI 模型</span>
                </div>

                <!-- Top: Files -->
                <div class="orbit-item pos-top">
                    <div class="orbit-icon-box">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    </div>
                    <div class="orbit-label">文件内容</div>
                </div>

                <!-- Right: Chat -->
                <div class="orbit-item pos-right">
                    <div class="orbit-icon-box">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-teal)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    </div>
                    <div class="orbit-label">历史对话</div>
                </div>

                <!-- Bottom: Tools -->
                <div class="orbit-item pos-bottom">
                    <div class="orbit-icon-box">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                    </div>
                    <div class="orbit-label">工具规则</div>
                </div>

                <!-- Left: Knowledge -->
                <div class="orbit-item pos-left">
                    <div class="orbit-icon-box">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-purple)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                    </div>
                    <div class="orbit-label">知识库</div>
                </div>
            </div>
        </div>
    </div>

    <!-- ======================== SLIDE 4: Four Components Cards ======================== -->
    <div class="slide" data-index="3">
        <div class="glow-orb glow-orb-1" style="width:450px;height:450px;top:-180px;right:-150px;background:var(--accent-purple);"></div>

        <div class="anim">
            <div class="title-md" style="text-align:center;">
                上下文的 <span class="hl-cyan">四大组成</span> (｡･ω･｡)ﾉ
            </div>
        </div>

        <div class="anim" style="margin-top:6px;">
            <div class="divider" style="margin:0 auto;"></div>
        </div>

        <div class="anim" style="margin-top:32px; width:100%; display:flex; justify-content:center;">
            <div class="card-grid cols-4" style="max-width:1100px;">
                <!-- Card 1 -->
                <div class="card-enhanced c1 anim">
                    <div class="card-icon-lg o1">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>
                    </div>
                    <div class="card-title">任务文件<br> (｡･ω･｡)</div>
                    <!-- Mini illustration -->
                    <div class="card-illust">
                        <div class="card-illust-bar" style="width:80%;background:rgba(0,217,255,0.3);"></div>
                        <div class="card-illust-bar" style="width:60%;background:rgba(0,217,255,0.2);"></div>
                        <div class="card-illust-bar" style="width:70%;background:rgba(0,217,255,0.25);"></div>
                    </div>
                    <div class="card-desc" style="margin-top:10px;">
                        与任务相关的<br><b class="hl-cyan">所有文件内容</b> <br>(｀・ω・´)
                    </div>
                </div>
                <!-- Card 2 -->
                <div class="card-enhanced c2 anim">
                    <div class="card-icon-lg o2">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-teal)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                    </div>
                    <div class="card-title">历史对话 <br>(｀・ω・´)</div>
                    <div class="card-illust">
                        <div style="display:flex;gap:6px;align-items:flex-end;">
                            <div style="width:28px;height:20px;border-radius:6px 6px 6px 2px;background:rgba(45,212,191,0.2);"></div>
                            <div style="width:36px;height:16px;border-radius:6px 6px 2px 6px;background:rgba(45,212,191,0.15);"></div>
                        </div>
                        <div style="display:flex;gap:6px;align-items:flex-end;">
                            <div style="width:32px;height:18px;border-radius:6px 6px 6px 2px;background:rgba(45,212,191,0.25);"></div>
                            <div style="width:28px;height:14px;border-radius:6px 6px 2px 6px;background:rgba(45,212,191,0.1);"></div>
                        </div>
                    </div>
                    <div class="card-desc" style="margin-top:10px;">
                        与 AI 的<br><b class="hl-teal">全部对话记录</b> (｡ŏ_ŏ)
                    </div>
                </div>
                <!-- Card 3 -->
                <div class="card-enhanced c3 anim">
                    <div class="card-icon-lg o3">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                    </div>
                    <div class="card-title">工具规则 <br>(｡ŏ_ŏ)</div>
                    <div class="card-illust">
                        <div style="display:flex;gap:4px;">
                            <div style="width:22px;height:22px;border-radius:6px;background:rgba(96,165,250,0.2);display:flex;align-items:center;justify-content:center;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                            <div style="width:22px;height:22px;border-radius:6px;background:rgba(96,165,250,0.15);display:flex;align-items:center;justify-content:center;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                            <div style="width:22px;height:22px;border-radius:6px;background:rgba(96,165,250,0.2);display:flex;align-items:center;justify-content:center;">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="var(--accent-blue)" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg>
                            </div>
                        </div>
                    </div>
                    <div class="card-desc" style="margin-top:10px;">
                        可调用工具的<br><b style="color:var(--accent-blue);">使用规则</b> (｀・ω・´)
                    </div>
                </div>
                <!-- Card 4 -->
                <div class="card-enhanced c4 anim">
                    <div class="card-icon-lg o4">
                        <svg width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="var(--accent-purple)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                    </div>
                    <div class="card-title">知识库 <br>✧(≖ ◡ ≖✿)</div>
                    <div class="card-illust">
                        <div style="display:flex;gap:4px;">
                            <div style="width:16px;height:30px;border-radius:4px;background:rgba(167,139,250,0.2);"></div>
                            <div style="width:16px;height:24px;border-radius:4px;background:rgba(167,139,250,0.15);margin-top:6px;"></div>
                            <div style="width:16px;height:28px;border-radius:4px;background:rgba(167,139,250,0.25);margin-top:2px;"></div>
                        </div>
                    </div>
                    <div class="card-desc" style="margin-top:10px;">
                        检索到的<br><b style="color:var(--accent-purple);">专属相关资料</b> (｡･ω･｡)
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- ======================== SLIDE 5: Summary ======================== -->
    <div class="slide slide-5" data-index="4">
        <div class="glow-orb glow-orb-1"></div>
        <div class="glow-orb glow-orb-2" style="width:300px;height:300px;top:-100px;right:-80px;background:var(--accent-cyan);animation-delay:-4s;"></div>

        <div class="anim">
            <div class="year-badge" style="font-size:20px;">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
                核心理念
            </div>
        </div>

        <div class="anim" style="margin-top:24px;">
            <div class="title-md" style="text-align:center;">
                让模型在<span class="hl-underline">每一个决策</span>时 (｡･ω･｡)
            </div>
        </div>
        <div class="anim" style="margin-top:6px;">
            <div class="title-lg" style="text-align:center;">
                都能<span class="hl-bg2 hl-cyan" style="font-size:64px;">看到所需信息</span> ✧*｡٩(ˊᗜˋ*)و✧*｡
            </div>
        </div>

        <div class="anim" style="margin-top:20px;">
            <div class="divider" style="margin:0 auto; width:120px;"></div>
        </div>

        <!-- Funnel + Result visual -->
        <div class="anim" style="margin-top:20px;">
            <div class="summary-visual">
                <!-- Funnel -->
                <div class="summary-left">
                    <div class="sum-funnel">
                        <div class="funnel-layer f1">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>
                            文件内容
                        </div>
                        <div class="funnel-layer f2">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
                            历史对话
                        </div>
                        <div class="funnel-layer f3">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
                            工具规则
                        </div>
                        <div class="funnel-layer f4">
                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
                            知识库
                        </div>
                    </div>
                </div>

                <!-- Arrow -->
                <div style="display:flex;align-items:center;">
                    <svg width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="var(--accent-cyan)" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
                </div>

                <!-- Result -->
                <div class="summary-right">
                    <div class="result-box">
                        <div class="result-icon">
                            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="var(--dark-bg)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
                        </div>
                        <div style="font-size:28px; font-weight:800; color:var(--accent-cyan);">精准决策</div>
                        <div style="font-size:18px; color:var(--text-secondary); margin-top:6px;">模型获得完整上下文</div>
                    </div>
                </div>
            </div>
        </div>

        <div class="anim" style="margin-top:24px;">
            <div class="subtitle" style="text-align:center; max-width:750px;">
                从 <span class="hl-italic">"写好一条提示词"</span> 进化到
                <b class="hl-cyan" style="font-size:32px;">"构建完整信息环境"</b> <br>(｀・ω・´)ゞ
            </div>
        </div>
    </div>

</div>

<script>
(function(){
    const slides = document.querySelectorAll('.slide');
    const total = slides.length;
    let current = 0;

    function animateSlide(slide){
        const anims = slide.querySelectorAll('.anim');
        anims.forEach(el=>{ el.classList.remove('show'); });
        anims.forEach((el,i)=>{
            setTimeout(()=>{ el.classList.add('show'); }, 120 + i*200);
        });
    }

    function goTo(index){
        if(index<0||index>=total||index===current) return;
        slides[current].classList.remove('active');
        slides[current].querySelectorAll('.anim').forEach(el=>el.classList.remove('show'));
        current = index;
        slides[current].classList.add('active');
        animateSlide(slides[current]);
    }

    function changeSlide(dir){ goTo(current+dir); }
    window.changeSlide = changeSlide;

    document.addEventListener('keydown', e=>{
        if(e.key==='ArrowRight'||e.key===' '||e.key==='Enter') changeSlide(1);
        if(e.key==='ArrowLeft'||e.key==='Backspace') changeSlide(-1);
    });

    let touchX = 0;
    document.addEventListener('touchstart', e=>{ touchX=e.touches[0].clientX; });
    document.addEventListener('touchend', e=>{
        const dx = e.changedTouches[0].clientX - touchX;
        if(Math.abs(dx)>50){ changeSlide(dx<0?1:-1); }
    });

    let wheelLock = false;
    document.addEventListener('wheel', e=>{
        if(wheelLock) return;
        wheelLock = true;
        setTimeout(()=>wheelLock=false, 800);
        changeSlide(e.deltaY>0?1:-1);
    });

    animateSlide(slides[0]);
})();
</script>
</body>
</html>


path: assets/templates/PPT Template-level2/3-3.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Harness Engineering · 驾驭工程</title>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:#0F0E17;color:#FFFFFE;overflow:hidden;width:100vw;height:100vh}

:root {
  --accent: #FF4D8D;
  --accent2: #FF8FA5;
  --accent-glow: rgba(255,77,141,0.3);
  --dark: #0F0E17;
  --dark2: #1A1932;
  --gray: #A7A9BE;
}

.lc{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.lc-96 svg{width:96px;height:96px}.lc-80 svg{width:80px;height:80px}.lc-64 svg{width:64px;height:64px}
.lc-48 svg{width:48px;height:48px}.lc-40 svg{width:40px;height:40px}.lc-36 svg{width:36px;height:36px}
.lc-32 svg{width:32px;height:32px}.lc-28 svg{width:28px;height:28px}.lc-24 svg{width:24px;height:24px}

.slide-container{width:100vw;height:100vh;position:relative}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px 80px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.slide.active{opacity:1;pointer-events:auto}
.slide .anim{opacity:0;transform:translateY(45px);transition:none}
.slide.active .anim.show{opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}

.deco{position:absolute;border-radius:50%;pointer-events:none}
.deco-pink{background:radial-gradient(circle,rgba(255,77,141,.15),transparent)}
.deco-peach{background:radial-gradient(circle,rgba(255,143,165,.12),transparent)}
.deco-lav{background:radial-gradient(circle,rgba(200,100,255,.1),transparent)}
.deco-amber{background:radial-gradient(circle,rgba(255,180,100,.1),transparent)}
.deco-rose{background:radial-gradient(circle,rgba(255,50,100,.12),transparent)}

.t-hero{font-size:5.5rem;font-weight:900;line-height:1.15;text-align:center}
.t-huge{font-size:4rem;font-weight:900;line-height:1.2;text-align:center}
.t-big{font-size:3rem;font-weight:800;line-height:1.3;text-align:center}
.t-mid{font-size:2.2rem;font-weight:700;line-height:1.4;text-align:center}
.t-body{font-size:1.7rem;font-weight:400;line-height:1.6;text-align:center}
.t-sm{font-size:1.2rem;font-weight:400;line-height:1.5;text-align:center}

.c-pink{color:#FF4D8D}.c-rose{color:#FF2D6E}.c-orange{color:#FF8FA5}
.c-purple{color:#C77DFF}.c-teal{color:#FF6B9D}.c-blue{color:#FF8FA5}.c-dark{color:#FFFFFE}
.c-gray{color:#A7A9BE}.c-white{color:#fff}.c-amber{color:#FFB347}.c-indigo{color:#C77DFF}
.c-emerald{color:#06D6A0}.c-red{color:#FF2D6E}

.bg-pink{background:rgba(255,77,141,.15);padding:6px 20px;border-radius:10px}
.bg-rose{background:rgba(255,45,110,.15);padding:6px 20px;border-radius:10px}
.bg-peach{background:rgba(255,143,165,.12);padding:6px 20px;border-radius:10px}
.bg-teal{background:rgba(255,107,157,.12);padding:6px 20px;border-radius:10px}
.bg-purple{background:rgba(199,125,255,.12);padding:6px 20px;border-radius:10px}
.bg-amber{background:rgba(255,179,71,.12);padding:6px 20px;border-radius:10px}
.bg-emerald{background:rgba(6,214,160,.12);padding:6px 20px;border-radius:10px}

.ul-rose{text-decoration:underline;text-decoration-color:#FF2D6E;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-pink{text-decoration:underline;text-decoration-color:#FF4D8D;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-amber{text-decoration:underline;text-decoration-color:#FFB347;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-teal{text-decoration:underline;text-decoration-color:#FF6B9D;text-decoration-thickness:4px;text-underline-offset:8px}
.bold{font-weight:900}.italic{font-style:italic}
.line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,#FF4D8D,#FF8FA5);margin:18px auto}

.bg-1{background:radial-gradient(ellipse at 50% 30%,#1A1932 0%,#0F0E17 100%)}
.bg-2{background:radial-gradient(ellipse at 30% 20%,#1A1932 0%,#0F0E17 100%)}
.bg-3{background:radial-gradient(ellipse at 70% 80%,#1A1932 0%,#0F0E17 100%)}
.bg-4{background:radial-gradient(ellipse at 50% 50%,#1A1932 0%,#0F0E17 100%)}
.bg-5{background:radial-gradient(ellipse at 50% 70%,#1A1932 0%,#0F0E17 100%)}
.bg-6{background:radial-gradient(ellipse at 50% 80%,#1A1932 0%,#0F0E17 100%)}

.era-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 28px;border-radius:40px;font-size:1.8rem;font-weight:800}
.concept-word{font-size:5rem;font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,#FF4D8D,#FF8FA5,#C77DFF);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 引用卡片 */
.quote-card{background:rgba(26,25,50,.6);border-radius:24px;padding:40px 48px;border:2px solid rgba(255,77,141,.15);box-shadow:0 8px 40px rgba(255,77,141,.1);max-width:950px;width:90%;position:relative}
.quote-mark{position:absolute;top:-18px;left:30px;font-size:5rem;font-weight:900;color:rgba(255,77,141,.2);line-height:1;font-family:Georgia,serif}

/* 人物卡片 */
.person-card{display:flex;align-items:center;gap:28px;background:rgba(26,25,50,.6);border-radius:20px;padding:28px 36px;border:2px solid rgba(255,77,141,.15);box-shadow:0 6px 24px rgba(255,77,141,.08);max-width:800px;width:85%}
.person-avatar{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.person-info{text-align:left}

/* 时间线 */
.timeline{display:flex;flex-direction:column;gap:0;width:85%;max-width:800px;position:relative;padding-left:60px}
.timeline::before{content:'';position:absolute;left:24px;top:10px;bottom:10px;width:3px;background:linear-gradient(180deg,#FF4D8D,#FFB347,#06D6A0);border-radius:2px}
.tl-item{position:relative;padding:16px 28px;display:flex;flex-direction:column;gap:4px}
.tl-dot{position:absolute;left:-44px;top:22px;width:18px;height:18px;border-radius:50%;border:3px solid;background:#0F0E17}
.tl-label{font-size:1rem;font-weight:800;letter-spacing:1px}
.tl-text{font-size:1.5rem;font-weight:700;color:#FFFFFE}

/* 火焰扩散图 */
.spread-row{display:flex;align-items:center;gap:16px;justify-content:center;flex-wrap:wrap}
.spread-node{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 20px;border-radius:16px;min-width:110px}
</style>
</head>
<body>

<div class="slide-container">

<!-- ====== Slide 1: 标题页 ====== -->
<div class="slide bg-1 active" id="s0">
  <div class="deco deco-pink" style="width:500px;height:500px;top:-200px;right:-150px"></div>
  <div class="deco deco-amber" style="width:400px;height:400px;bottom:-120px;left:-120px"></div>

  <div class="anim era-badge" style="background:rgba(255,105,135,.08);color:#E8395B;">
    <span class="lc lc-32 c-rose"><i data-lucide="calendar"></i></span> 2026 年初
  </div>

  <div class="anim" style="margin-top:20px">
    <span class="concept-word">Harness Engineering</span>
  </div>

  <div class="anim t-huge c-dark" style="margin-top:12px;letter-spacing:8px">
    驾 驭 工 程 <span style="font-size:1.8rem;color:#FF6987">(｡･ω･｡)ﾉ</span>
  </div>

  <div class="anim line"></div>
  <div class="anim t-mid c-gray italic">第三个阶段 · 正式诞生 ✧</div>
</div>

<!-- ====== Slide 2: 提出者 ====== -->
<div class="slide bg-3" id="s1">
  <div class="deco deco-peach" style="width:450px;height:450px;top:-150px;left:-120px"></div>

  <div class="anim t-mid c-gray">概念首次提出 (｀・ω・´)</div>
  <div class="anim line" style="background:linear-gradient(90deg,#FF8C42,#D97706)"></div>

  <div class="anim person-card">
    <div class="person-avatar" style="background:linear-gradient(135deg,rgba(255,77,141,.2),rgba(255,143,165,.15))">
      <span class="lc lc-48 c-pink"><i data-lucide="user-round"></i></span>
    </div>
    <div class="person-info">
      <div style="font-size:2.4rem;font-weight:900;color:#FFFFFE">Mitchell Hashimoto</div>
      <div style="font-size:1.3rem;color:#A7A9BE;margin-top:4px">
        <span class="lc lc-18 c-gray" style="margin-right:4px"><i data-lucide="building-2"></i></span>
        HashiCorp 联合创始人
      </div>
      <div style="font-size:1.3rem;color:#FFB347;margin-top:6px;font-weight:700">
        <span class="lc lc-18 c-amber" style="margin-right:4px"><i data-lucide="calendar-check"></i></span>
        2026 年 2 月 首次提出
      </div>
    </div>
  </div>

  <div class="anim" style="margin-top:30px">
    <div class="t-body c-gray">他的定义<span class="c-rose bold">只有一句话</span> —— (｡ŏ_ŏ)</div>
  </div>
</div>

<!-- ====== Slide 3: 核心定义 ====== -->
<div class="slide bg-2" id="s2">
  <div class="deco deco-rose" style="width:600px;height:600px;top:50%;left:50%;margin-top:-300px;margin-left:-300px"></div>

  <div class="anim" style="margin-bottom:10px">
    <span class="lc lc-48 c-rose"><i data-lucide="quote"></i></span>
  </div>

  <div class="anim quote-card">
    <div class="quote-mark">"</div>
    <div style="font-size:2.2rem;font-weight:800;color:#FFFFFE;line-height:1.7;text-align:left">
      每当你发现 Agent <span class="c-rose bold">犯了一个错误</span>，
    </div>
    <div style="font-size:2.2rem;font-weight:800;color:#FFFFFE;line-height:1.7;text-align:left;margin-top:8px">
      你就花时间去<span class="bg-peach c-orange bold" style="font-size:2.4rem">工程化一个解决方案</span>，
    </div>
    <div style="font-size:2.2rem;font-weight:800;color:#FFFFFE;line-height:1.7;text-align:left;margin-top:8px">
      让它<span class="c-rose bold ul-rose" style="font-size:2.6rem">再也不会犯同样的错</span>。
    </div>
  </div>

  <div class="anim t-sm c-gray italic" style="margin-top:20px">—— Mitchell Hashimoto (｀・ω・´)ゞ</div>
</div>

<!-- ====== Slide 4: 击中的痛点 ====== -->
<div class="slide bg-4" id="s3">
  <div class="deco deco-lav" style="width:500px;height:500px;bottom:-180px;right:-150px"></div>

  <div class="anim t-mid c-gray italic">这句话看起来平平无奇 (｡･ω･｡)</div>
  <div class="anim t-mid c-gray italic">但它击中了一个核心问题 —— (｀・ω・´)</div>
  <div class="anim line" style="background:linear-gradient(90deg,#9B59B6,#E8395B)"></div>

  <div class="anim" style="margin-top:10px">
    <div style="display:flex;align-items:center;gap:24px;justify-content:center">
      <div style="display:flex;flex-direction:column;align-items:center;gap:8px">
        <span class="lc lc-64 c-emerald"><i data-lucide="brain"></i></span>
        <span style="font-size:1.4rem;font-weight:700;color:#059669">模型能力</span>
      </div>
      <span class="lc lc-36 c-emerald"><i data-lucide="check-circle"></i></span>
      <span style="font-size:2.4rem;font-weight:900;color:#059669">够了 ✓</span>
    </div>
  </div>

  <div class="anim" style="margin:20px 0">
    <span style="font-size:2rem;color:#ccc;font-weight:800">但是 (｡ŏ_ŏ)</span>
  </div>

  <div class="anim t-hero c-dark">
    它就是<span class="bg-rose c-rose bold" style="font-size:5.8rem">不听话</span> (´；ω；`)
  </div>

  <div class="anim" style="margin-top:24px;display:flex;gap:16px">
    <span class="lc lc-28 c-gray"><i data-lucide="x-circle"></i></span>
    <span class="t-body c-gray">很多人隐隐感觉到，却没说清楚 (｡ŏ_ŏ)</span>
  </div>
</div>

<!-- ====== Slide 5: 时间线 —— 快速传播 ====== -->
<div class="slide bg-6" id="s4">
  <div class="deco deco-pink" style="width:450px;height:450px;top:-150px;right:-120px"></div>

  <div class="anim t-huge c-dark">概念的快速传播 (｡･ω･｡)ﾉ</div>
  <div class="anim line" style="background:linear-gradient(90deg,#FF6987,#059669)"></div>

  <div class="anim timeline">
    <!-- 节点1 -->
    <div class="tl-item">
      <div class="tl-dot" style="border-color:#FF6987"></div>
      <div class="tl-label c-pink">2026 年 2 月</div>
      <div class="tl-text">Mitchell Hashimoto <span class="c-rose bold">首次提出</span> Harness Engineering<br>(｀・ω・´)</div>
    </div>
    <!-- 节点2 -->
    <div class="tl-item">
      <div class="tl-dot" style="border-color:#D97706"></div>
      <div class="tl-label c-amber">6 天后</div>
      <div class="tl-text">
        <span class="lc lc-20 c-amber" style="margin-right:4px"><i data-lucide="building"></i></span>
        OpenAI <span class="bg-amber c-amber bold">百万行代码实验报告</span> ✧
      </div>
      <div style="font-size:1.2rem;color:#999;margin-top:2px">正式采用该术语，<span class="c-amber bold">官方认可</span>这一工程方向 (｡･ω･｡)</div>
    </div>
    <!-- 节点3 -->
    <div class="tl-item">
      <div class="tl-dot" style="border-color:#059669"></div>
      <div class="tl-label c-emerald">此后 1 个月</div>
      <div class="tl-text">
        <span class="lc lc-20 c-emerald" style="margin-right:4px"><i data-lucide="flame"></i></span>
        <span class="c-emerald bold">火遍</span>整个 AI 工程圈 ✧*｡٩(ˊᗜˋ*)و✧*｡
      </div>
      <div style="font-size:1.2rem;color:#999;margin-top:2px">成为行业最核心的讨论和落地方向 (｀・ω・´)ゞ</div>
    </div>
  </div>
</div>

<!-- ====== Slide 6: 总结 ====== -->
<div class="slide bg-2" id="s5">
  <div class="deco deco-pink" style="width:600px;height:600px;top:50%;left:50%;margin-top:-300px;margin-left:-300px"></div>

  <div class="anim" style="margin-bottom:10px">
    <span class="lc lc-64 c-rose"><i data-lucide="shield-check"></i></span>
  </div>

  <div class="anim" style="margin:8px 0">
    <span class="concept-word" style="font-size:4.5rem">Harness Engineering</span>
  </div>

  <div class="anim line"></div>

  <div class="anim" style="margin-top:10px">
    <svg width="700" height="120" viewBox="0 0 700 120">
      <defs><marker id="ar1" markerWidth="10" markerHeight="7" refX="10" refY="3.5" orient="auto"><polygon points="0 0,10 3.5,0 7" fill="#FF4D8D"/></marker></defs>
      <!-- Agent 犯错 -->
      <rect x="10" y="25" width="160" height="70" rx="16" fill="rgba(255,77,141,.15)" stroke="#FF4D8D" stroke-width="2"/>
      <text x="90" y="55" text-anchor="middle" fill="#FF4D8D" font-size="15" font-weight="800">Agent 犯错</text>
      <text x="90" y="75" text-anchor="middle" fill="#FF8FA5" font-size="12" font-weight="600">发现问题</text>
      <!-- 箭头 -->
      <line x1="175" y1="60" x2="245" y2="60" stroke="#FF4D8D" stroke-width="3" marker-end="url(#ar1)"/>
      <!-- 工程化方案 -->
      <rect x="252" y="25" width="190" height="70" rx="16" fill="rgba(255,45,110,.15)" stroke="#FF2D6E" stroke-width="2"/>
      <text x="347" y="55" text-anchor="middle" fill="#FF2D6E" font-size="15" font-weight="800">工程化解决方案</text>
      <text x="347" y="75" text-anchor="middle" fill="#FF8FA5" font-size="12" font-weight="600">系统性修复</text>
      <!-- 箭头 -->
      <line x1="447" y1="60" x2="507" y2="60" stroke="#FF4D8D" stroke-width="3" marker-end="url(#ar1)"/>
      <!-- 永不再犯 -->
      <rect x="514" y="25" width="170" height="70" rx="16" fill="rgba(6,214,160,.15)" stroke="#06D6A0" stroke-width="2"/>
      <text x="599" y="55" text-anchor="middle" fill="#06D6A0" font-size="15" font-weight="800">永不再犯</text>
      <text x="599" y="75" text-anchor="middle" fill="#5CC9B6" font-size="12" font-weight="600">同类错误根除</text>
    </svg>
  </div>

  <div class="anim t-big c-dark" style="margin-top:16px">
    不只是用好模型，而是<span class="bg-rose c-rose bold" style="font-size:3.4rem">驾驭模型</span> (｡･ω･｡)ﾉ
  </div>
</div>

</div>

<script>
lucide.createIcons();

const slides=document.querySelectorAll('.slide'),
      total=slides.length;
let cur=0;

function go(n){
  if(n<0||n>=total||n===cur)return;
  slides[cur].classList.remove('active');
  slides[cur].querySelectorAll('.anim').forEach(e=>e.classList.remove('show'));
  cur=n;
  slides[cur].classList.add('active');
  slides[cur].querySelectorAll('.anim').forEach((e,i)=>{
    e.classList.remove('show');
    setTimeout(()=>e.classList.add('show'),200+i*300);
  });
}

slides[0].querySelectorAll('.anim').forEach((e,i)=>setTimeout(()=>e.classList.add('show'),400+i*350));

document.addEventListener('keydown',e=>{
  if(['ArrowRight','ArrowDown',' ','PageDown'].includes(e.key)){e.preventDefault();go(cur+1)}
  else if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();go(cur-1)}
  else if(e.key==='Home'){e.preventDefault();go(0)}
  else if(e.key==='End'){e.preventDefault();go(total-1)}
});

let tx=0,ty=0;
document.addEventListener('touchstart',e=>{tx=e.changedTouches[0].screenX;ty=e.changedTouches[0].screenY});
document.addEventListener('touchend',e=>{
  const dx=e.changedTouches[0].screenX-tx,dy=e.changedTouches[0].screenY-ty;
  if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>50){dx<0?go(cur+1):go(cur-1)}
});

let wc=false;
document.addEventListener('wheel',e=>{
  if(wc)return;wc=true;setTimeout(()=>wc=false,800);
  e.deltaY>0?go(cur+1):go(cur-1);
});
</script>

</body>
</html>

path: assets/templates/PPT Template-level2/4-1.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例 · LangChain 实验 & Harness Engineering</title>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Microsoft YaHei','PingFang SC',sans-serif;background:#0F0E17;color:#FFFFFE;overflow:hidden;width:100vw;height:100vh}

:root {
  --accent: #6366F1;
  --accent2: #8B5CF6;
  --accent3: #A78BFA;
  --accent-glow: rgba(99, 102, 241, 0.3);
  --green: #2EC4B6;
  --red: #E71D36;
  --dark: #0F0E17;
  --dark2: #1A1932;
  --gray: #A7A9BE;
  --light: #FFFFFE;
}

.lc{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.lc-96 svg{width:96px;height:96px}.lc-80 svg{width:80px;height:80px}.lc-64 svg{width:64px;height:64px}
.lc-48 svg{width:48px;height:48px}.lc-40 svg{width:40px;height:40px}.lc-36 svg{width:36px;height:36px}
.lc-32 svg{width:32px;height:32px}.lc-28 svg{width:28px;height:28px}.lc-24 svg{width:24px;height:24px}
.lc-20 svg{width:20px;height:20px}.lc-18 svg{width:18px;height:18px}

.slide-container{width:100vw;height:100vh;position:relative}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px 80px;opacity:0;pointer-events:none;transition:opacity .6s ease}
.slide.active{opacity:1;pointer-events:auto}
.slide .anim{opacity:0;transform:translateY(45px);transition:none}
.slide.active .anim.show{opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}

.deco{position:absolute;border-radius:50%;pointer-events:none}
.deco-purple{background:radial-gradient(circle,rgba(99,102,241,.15),transparent)}
.deco-violet{background:radial-gradient(circle,rgba(139,92,246,.12),transparent)}
.deco-indigo{background:radial-gradient(circle,rgba(79,70,229,.1),transparent)}
.deco-cyan{background:radial-gradient(circle,rgba(6,182,212,.1),transparent)}
.deco-pink{background:radial-gradient(circle,rgba(232,121,249,.1),transparent)}
.deco-teal{background:radial-gradient(circle,rgba(45,212,191,.1),transparent)}

.t-hero{font-size:5.5rem;font-weight:900;line-height:1.15;text-align:center}
.t-huge{font-size:4rem;font-weight:900;line-height:1.2;text-align:center}
.t-big{font-size:3rem;font-weight:800;line-height:1.3;text-align:center}
.t-mid{font-size:2.2rem;font-weight:700;line-height:1.4;text-align:center}
.t-body{font-size:1.7rem;font-weight:400;line-height:1.6;text-align:center}
.t-sm{font-size:1.2rem;font-weight:400;line-height:1.5;text-align:center}

.c-pink{color:#E879F9}.c-rose{color:#F43F5E}.c-orange{color:#F97316}
.c-purple{color:#8B5CF6}.c-teal{color:#2DD4BF}.c-blue{color:#6366F1}.c-dark{color:#FFFFFE}
.c-gray{color:#A7A9BE}.c-white{color:#fff}.c-amber{color:#F59E0B}.c-indigo{color:#6366F1}
.c-emerald{color:#10B981}.c-red{color:#EF4444}

.bg-pink{background:rgba(232,121,249,.12);padding:6px 20px;border-radius:10px}
.bg-rose{background:rgba(244,63,94,.12);padding:6px 20px;border-radius:10px}
.bg-peach{background:rgba(251,146,60,.12);padding:6px 20px;border-radius:10px}
.bg-teal{background:rgba(45,212,191,.12);padding:6px 20px;border-radius:10px}
.bg-purple{background:rgba(139,92,246,.12);padding:6px 20px;border-radius:10px}
.bg-amber{background:rgba(245,158,11,.12);padding:6px 20px;border-radius:10px}
.bg-emerald{background:rgba(16,185,129,.12);padding:6px 20px;border-radius:10px}
.bg-blue{background:rgba(99,102,241,.12);padding:6px 20px;border-radius:10px}

.ul-rose{text-decoration:underline;text-decoration-color:#F43F5E;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-pink{text-decoration:underline;text-decoration-color:#E879F9;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-amber{text-decoration:underline;text-decoration-color:#F59E0B;text-decoration-thickness:4px;text-underline-offset:8px}
.ul-teal{text-decoration:underline;text-decoration-color:#2DD4BF;text-decoration-thickness:4px;text-underline-offset:8px}
.bold{font-weight:900}.italic{font-style:italic}
.line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,#6366F1,#8B5CF6);margin:18px auto}

.bg-s1{background:radial-gradient(ellipse at 50% 30%, #1A1932 0%, #0F0E17 100%)}
.bg-s2{background:radial-gradient(ellipse at 30% 60%, #1A1932 0%, #0F0E17 100%)}
.bg-s3{background:radial-gradient(ellipse at 70% 40%, #1A1932 0%, #0F0E17 100%)}
.bg-s4{background:radial-gradient(ellipse at 40% 70%, #1A1932 0%, #0F0E17 100%)}
.bg-s5{background:radial-gradient(ellipse at 50% 50%, #1A1932 0%, #0F0E17 100%)}
.bg-s6{background:radial-gradient(ellipse at 60% 30%, #1A1932 0%, #0F0E17 100%)}
.bg-s7{background:radial-gradient(ellipse at 50% 50%, #1A1932 0%, #0F0E17 100%)}

.era-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 28px;border-radius:40px;font-size:1.6rem;font-weight:800}
.concept-word{font-size:5rem;font-weight:900;letter-spacing:6px;background:linear-gradient(135deg,#6366F1,#8B5CF6,#A78BFA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* 引用卡片 */
.quote-card{background:rgba(255,255,255,0.04);border-radius:24px;padding:36px 44px;border:2px solid rgba(99,102,241,.2);box-shadow:0 8px 40px rgba(99,102,241,.1);max-width:950px;width:90%;position:relative;backdrop-filter:blur(10px)}
.quote-mark{position:absolute;top:-18px;left:30px;font-size:5rem;font-weight:900;color:rgba(99,102,241,.2);line-height:1;font-family:Georgia,serif}

/* 人物卡片 */
.person-card{display:flex;align-items:center;gap:28px;background:rgba(255,255,255,0.04);border-radius:20px;padding:24px 32px;border:2px solid rgba(99,102,241,.15);box-shadow:0 6px 24px rgba(0,0,0,.3);max-width:760px;width:85%;backdrop-filter:blur(10px)}
.person-avatar{width:80px;height:80px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}

/* 时间线 */
.timeline{display:flex;flex-direction:column;gap:0;width:85%;max-width:800px;position:relative;padding-left:60px}
.timeline::before{content:'';position:absolute;left:24px;top:10px;bottom:10px;width:3px;background:linear-gradient(180deg,#6366F1,#8B5CF6,#2EC4B6);border-radius:2px}
.tl-item{position:relative;padding:14px 24px;display:flex;flex-direction:column;gap:3px}
.tl-dot{position:absolute;left:-44px;top:20px;width:18px;height:18px;border-radius:50%;border:3px solid;background:#0F0E17}
.tl-label{font-size:1rem;font-weight:800;letter-spacing:1px}
.tl-text{font-size:1.4rem;font-weight:700;color:#FFFFFE}

/* 条形对比 */
.bar-group{width:85%;max-width:800px;display:flex;flex-direction:column;gap:20px}
.bar-row{display:flex;align-items:center;gap:16px}
.bar-label{width:100px;font-size:1.3rem;font-weight:700;text-align:right;flex-shrink:0}
.bar-track{flex:1;height:52px;background:rgba(255,255,255,.06);border-radius:14px;position:relative;overflow:hidden}
.bar-fill{height:100%;border-radius:14px;display:flex;align-items:center;justify-content:flex-end;padding-right:18px;font-size:1.6rem;font-weight:900;color:#fff;transition:width 1.2s cubic-bezier(.25,.46,.45,.94)}
.bar-fill-old{background:linear-gradient(90deg,#4B5563,#6B7280)}
.bar-fill-new{background:linear-gradient(90deg,#6366F1,#8B5CF6)}

/* 排名卡 */
.rank-row{display:flex;gap:40px;align-items:center;justify-content:center}
.rank-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:28px 36px;border-radius:20px;min-width:200px}
.rank-old{background:rgba(255,255,255,.04);border:2px dashed rgba(167,169,190,.3)}
.rank-new{background:rgba(99,102,241,.1);border:2.5px solid rgba(99,102,241,.4);box-shadow:0 6px 30px rgba(99,102,241,.2)}
.rank-num{font-size:4.5rem;font-weight:900;line-height:1}

/* 实验信息卡 */
.info-card{background:rgba(255,255,255,0.04);border-radius:20px;padding:28px 36px;border:2px solid rgba(99,102,241,.15);box-shadow:0 6px 24px rgba(0,0,0,.3);display:flex;align-items:center;gap:20px;max-width:700px;width:80%;backdrop-filter:blur(10px)}
.info-icon{width:64px;height:64px;border-radius:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.strike{text-decoration:line-through;text-decoration-thickness:3px;color:#6B7280}
</style>
</head>
<body>

<div class="slide-container">

<!-- ====== Slide 1: LangChain 案例标题 ====== -->
<div class="slide bg-s1 active" id="s0">
  <div class="deco deco-violet" style="width:500px;height:500px;top:-200px;right:-150px"></div>
  <div class="deco deco-purple" style="width:400px;height:400px;bottom:-120px;left:-120px"></div>

  <div class="anim era-badge" style="background:rgba(99,102,241,.12);color:#818CF8;">
    <span class="lc lc-28 c-indigo"><i data-lucide="flask-conical"></i></span> 实验案例
  </div>

  <div class="anim t-hero c-dark" style="margin-top:20px">
    LangChain 实验 <span style="font-size:2rem;color:#818CF8"></span>
  </div>

  <div class="anim line"></div>

  <div class="anim t-mid c-gray italic">同一个模型，只改 Harness (｀・ω・´)</div>
</div>

<!-- ====== Slide 2: 实验条件 ====== -->
<div class="slide bg-s3" id="s1">
  <div class="deco deco-indigo" style="width:450px;height:450px;top:-150px;left:-120px"></div>

  <div class="anim t-huge c-dark">实验条件 (｡･ω･｡)</div>
  <div class="anim line" style="background:linear-gradient(90deg,#6366F1,#8B5CF6)"></div>

  <div class="anim info-card">
    <div class="info-icon" style="background:rgba(99,102,241,.12)">
      <span class="lc lc-40 c-indigo"><i data-lucide="cpu"></i></span>
    </div>
    <div style="text-align:left">
      <div style="font-size:1.8rem;font-weight:900;color:#FFFFFE">GPT-5.2-Codex</div>
      <div style="font-size:1.1rem;color:#A7A9BE;margin-top:4px">同一个模型 (｀・ω・´)</div>
    </div>
  </div>

  <div class="anim info-card" style="margin-top:16px">
    <div class="info-icon" style="background:rgba(232,121,249,.12)">
      <span class="lc lc-40 c-pink"><i data-lucide="lock"></i></span>
    </div>
    <div style="text-align:left">
      <div style="font-size:1.8rem;font-weight:900;color:#FFFFFE">模型参数<span class="c-rose">一个都没动</span></div>
      <div style="font-size:1.1rem;color:#A7A9BE;margin-top:4px">不微调、不换模型 (｡ŏ_ŏ)</div>
    </div>
  </div>

  <div class="anim info-card" style="margin-top:16px">
    <div class="info-icon" style="background:rgba(45,212,191,.12)">
      <span class="lc lc-40 c-teal"><i data-lucide="settings"></i></span>
    </div>
    <div style="text-align:left">
      <div style="font-size:1.8rem;font-weight:900;color:#FFFFFE"><span class="c-teal">只改变</span>外部工程环境</div>
      <div style="font-size:1.1rem;color:#A7A9BE;margin-top:4px">只改 Harness (｡･∀･)ﾉﾞ </div>
    </div>
  </div>
</div>

<!-- ====== Slide 3: 分数对比 ====== -->
<div class="slide bg-s2" id="s2">
  <div class="deco deco-purple" style="width:500px;height:500px;bottom:-200px;right:-180px"></div>

  <div class="anim t-huge c-dark">Terminal Bench 2.0 成绩</div>
  <div class="anim line"></div>

  <div class="anim bar-group" style="margin-top:20px">
    <div class="bar-row">
      <div class="bar-label c-gray">改之前</div>
      <div class="bar-track">
        <div class="bar-fill bar-fill-old" id="barOld" style="width:0%">52.8%</div>
      </div>
    </div>
    <div class="bar-row">
      <div class="bar-label c-indigo bold">改之后</div>
      <div class="bar-track">
        <div class="bar-fill bar-fill-new" id="barNew" style="width:0%">66.5%</div>
      </div>
    </div>
  </div>

  <div class="anim" style="margin-top:32px;display:flex;align-items:center;gap:16px">
    <span class="lc lc-32 c-indigo"><i data-lucide="trending-up"></i></span>
    <span class="t-big c-dark">提升 <span class="bg-blue c-indigo bold" style="font-size:3.6rem">13.7</span> 个百分点 ✧*｡٩(ˊᗜˋ*)و✧*｡</span>
  </div>
</div>

<!-- ====== Slide 4: 排名飞跃 ====== -->
<div class="slide bg-s4" id="s3">
  <div class="deco deco-cyan" style="width:500px;height:500px;top:-180px;left:-150px"></div>

  <div class="anim t-huge c-dark">排名飞跃 (｡･ω･｡)ﾉ</div>
  <div class="anim line" style="background:linear-gradient(90deg,#6366F1,#8B5CF6)"></div>

  <div class="anim rank-row" style="margin-top:30px">
    <div class="rank-card rank-old">
      <span class="lc lc-36 c-gray"><i data-lucide="arrow-down-right"></i></span>
      <div class="rank-num c-gray">30+</div>
      <div style="font-size:1.3rem;color:#6B7280;font-weight:700">名开外 (´；ω；`)</div>
    </div>
    <span class="lc lc-48 c-indigo"><i data-lucide="arrow-right"></i></span>
    <div class="rank-card rank-new">
      <span class="lc lc-36 c-indigo"><i data-lucide="trophy"></i></span>
      <div class="rank-num c-indigo">Top 5</div>
      <div style="font-size:1.3rem;color:#818CF8;font-weight:700">前 5 名 ✧(≖ ◡ ≖✿)</div>
    </div>
  </div>
</div>

<!-- ====== Slide 5: 关键结论 ====== -->
<div class="slide bg-s6" id="s4">
  <div class="deco deco-teal" style="width:600px;height:600px;top:50%;left:50%;margin-top:-300px;margin-left:-300px"></div>

  <div class="anim">
    <span class="lc lc-64 c-teal"><i data-lucide="lightbulb"></i></span>
  </div>

  <div class="anim t-huge c-dark" style="margin-top:16px">
    <span class="strike">换模型</span>
  </div>

  <div class="anim t-hero c-dark" style="margin-top:12px">
    只改 <span class="bg-blue c-indigo bold" style="font-size:6rem">Harness</span> 
  </div>

  <div class="anim line" style="background:linear-gradient(90deg,#2DD4BF,#10B981)"></div>

  <div class="anim t-mid c-teal bold">模型不变，成绩巨变 ✧*｡٩(ˊᗜˋ*)و✧*｡</div>
</div>

</div>

<script>
lucide.createIcons();

const slides=document.querySelectorAll('.slide'),
      total=slides.length;
let cur=0;

function animateBars(){
  const bo=document.getElementById('barOld');
  const bn=document.getElementById('barNew');
  if(bo) setTimeout(()=>{bo.style.width='52.8%'},400);
  if(bn) setTimeout(()=>{bn.style.width='66.5%'},700);
}

function resetBars(){
  const bo=document.getElementById('barOld');
  const bn=document.getElementById('barNew');
  if(bo) bo.style.width='0%';
  if(bn) bn.style.width='0%';
}

function go(n){
  if(n<0||n>=total||n===cur)return;
  if(cur===2) resetBars();
  slides[cur].classList.remove('active');
  slides[cur].querySelectorAll('.anim').forEach(e=>e.classList.remove('show'));
  cur=n;
  slides[cur].classList.add('active');
  slides[cur].querySelectorAll('.anim').forEach((e,i)=>{
    e.classList.remove('show');
    setTimeout(()=>e.classList.add('show'),200+i*300);
  });
  if(cur===2) animateBars();
}

slides[0].querySelectorAll('.anim').forEach((e,i)=>setTimeout(()=>e.classList.add('show'),400+i*350));

document.addEventListener('keydown',e=>{
  if(['ArrowRight','ArrowDown',' ','PageDown'].includes(e.key)){e.preventDefault();go(cur+1)}
  else if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();go(cur-1)}
  else if(e.key==='Home'){e.preventDefault();go(0)}
  else if(e.key==='End'){e.preventDefault();go(total-1)}
});

let tx=0,ty=0;
document.addEventListener('touchstart',e=>{tx=e.changedTouches[0].screenX;ty=e.changedTouches[0].screenY});
document.addEventListener('touchend',e=>{
  const dx=e.changedTouches[0].screenX-tx,dy=e.changedTouches[0].screenY-ty;
  if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>50){dx<0?go(cur+1):go(cur-1)}
});

let wc=false;
document.addEventListener('wheel',e=>{
  if(wc)return;wc=true;setTimeout(()=>wc=false,800);
  e.deltaY>0?go(cur+1):go(cur-1);
});
</script>

</body>
</html>


path: assets/templates/PPT Template-level2/4-2.html
content: <!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例② · Nate B Jones 实验</title>
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700;900&display=swap" rel="stylesheet">
<style>
*{margin:0;padding:0;box-sizing:border-box}

:root {
    --dark-bg: #0D0D12;
    --dark-secondary: #16161F;
    --dark-tertiary: #1E1E2A;
    --accent-pink: #FF4D8D;
    --accent-purple: #B14EFF;
    --accent-magenta: #FF2D7A;
    --accent-violet: #8B5CF6;
    --accent-cyan: #00E5CC;
    --text-primary: #F0F0F5;
    --text-secondary: #9CA3AF;
    --text-muted: #6B7280;
    --glow-pink: rgba(255, 77, 141, 0.35);
    --glow-purple: rgba(177, 78, 255, 0.3);
}

body{font-family:'Noto Sans SC',sans-serif;background:var(--dark-bg);color:var(--text-primary);overflow:hidden;width:100vw;height:100vh}

/* Background effects */
.bg-grid {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(177,78,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(177,78,255,0.03) 1px, transparent 1px);
    background-size: 50px 50px;
    pointer-events: none;
}

.lc{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.lc-96 svg{width:96px;height:96px}.lc-80 svg{width:80px;height:80px}.lc-64 svg{width:64px;height:64px}
.lc-48 svg{width:48px;height:48px}.lc-40 svg{width:40px;height:40px}.lc-36 svg{width:36px;height:36px}
.lc-32 svg{width:32px;height:32px}.lc-28 svg{width:28px;height:28px}.lc-24 svg{width:24px;height:24px}
.lc-20 svg{width:20px;height:20px}.lc-18 svg{width:18px;height:18px}

.slide-container{width:100vw;height:100vh;position:relative}
.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:50px 80px;opacity:0;pointer-events:none;transition:opacity .6s ease;background:radial-gradient(ellipse at 50% 30%, var(--dark-secondary) 0%, var(--dark-bg) 100%);overflow:hidden}
.slide.active{opacity:1;pointer-events:auto}
.slide .anim{opacity:0;transform:translateY(45px);transition:none}
.slide.active .anim.show{opacity:1;transform:translateY(0);transition:opacity .7s cubic-bezier(.25,.46,.45,.94),transform .7s cubic-bezier(.25,.46,.45,.94)}

.deco{position:absolute;border-radius:50%;pointer-events:none;filter:blur(80px);opacity:0.12;animation:orbFloat 8s ease-in-out infinite alternate}
@keyframes orbFloat {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(30px, -30px) scale(1.1); }
}
.deco-pink{background:var(--accent-pink)}
.deco-purple{background:var(--accent-purple)}
.deco-magenta{background:var(--accent-magenta)}
.deco-violet{background:var(--accent-violet)}
.deco-cyan{background:var(--accent-cyan)}

.t-hero{font-size:5.5rem;font-weight:900;line-height:1.15;text-align:center}
.t-huge{font-size:4rem;font-weight:900;line-height:1.2;text-align:center}
.t-big{font-size:3rem;font-weight:800;line-height:1.3;text-align:center}
.t-mid{font-size:2.2rem;font-weight:700;line-height:1.4;text-align:center}
.t-body{font-size:1.7rem;font-weight:400;line-height:1.6;text-align:center}
.t-sm{font-size:1.2rem;font-weight:400;line-height:1.5;text-align:center}

.c-pink{color:var(--accent-pink)}.c-magenta{color:var(--accent-magenta)}.c-purple{color:var(--accent-purple)}
.c-violet{color:var(--accent-violet)}.c-cyan{color:var(--accent-cyan)}.c-dark{color:var(--text-primary)}
.c-gray{color:var(--text-secondary)}.c-white{color:#fff}.c-muted{color:var(--text-muted)}

.bg-pink{background:rgba(255,77,141,0.12);padding:6px 20px;border-radius:10px;border:1px solid rgba(255,77,141,0.2)}
.bg-purple{background:rgba(177,78,255,0.1);padding:6px 20px;border-radius:10px;border:1px solid rgba(177,78,255,0.2)}
.bg-magenta{background:rgba(255,45,122,0.1);padding:6px 20px;border-radius:10px;border:1px solid rgba(255,45,122,0.2)}
.bg-violet{background:rgba(139,92,246,0.08);padding:6px 20px;border-radius:10px;border:1px solid rgba(139,92,246,0.2)}
.bg-cyan{background:rgba(0,229,204,0.08);padding:6px 20px;border-radius:10px;border:1px solid rgba(0,229,204,0.2)}

.ul-pink{text-decoration:underline;text-decoration-color:var(--accent-pink);text-decoration-thickness:4px;text-underline-offset:8px}
.ul-purple{text-decoration:underline;text-decoration-color:var(--accent-purple);text-decoration-thickness:4px;text-underline-offset:8px}
.bold{font-weight:900}.italic{font-style:italic}
.line{width:70px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--accent-pink),var(--accent-purple));margin:18px auto}

.era-badge{display:inline-flex;align-items:center;gap:10px;padding:10px 28px;border-radius:40px;font-size:1.6rem;font-weight:800;background:rgba(177,78,255,0.1);color:var(--accent-purple);border:1px solid rgba(177,78,255,0.25);box-shadow:0 4px 20px var(--glow-purple)}

.strike{text-decoration:line-through;text-decoration-thickness:3px;color:var(--text-muted)}
.concept-word{font-size:4.5rem;font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,var(--accent-pink),var(--accent-purple),var(--accent-magenta));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ====== Enhanced Visuals ====== */

/* Title hero illustration */
.hero-lab{
  position:relative;width:600px;height:240px;margin-top:20px;
}
.lab-flask{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:120px;height:160px;
}
.lab-beaker-l,.lab-beaker-r{
  position:absolute;bottom:0;
  width:80px;height:110px;
}
.lab-beaker-l{left:80px;}
.lab-beaker-r{right:80px;}
.lab-spark{
  position:absolute;
  animation:sparkle 2s ease-in-out infinite;
}
@keyframes sparkle{
  0%,100%{opacity:.3;transform:scale(.8)}
  50%{opacity:1;transform:scale(1.2)}
}
.lab-bubble{
  position:absolute;border-radius:50%;background:rgba(177,78,255,0.15);
  animation:bubbleUp 3.5s ease-in-out infinite;
}
@keyframes bubbleUp{
  0%{transform:translateY(0) scale(1);opacity:.4}
  50%{transform:translateY(-30px) scale(1.15);opacity:.7}
  100%{transform:translateY(-60px) scale(.8);opacity:0}
}

/* Person card enhanced */
.person-card-v2{
  display:flex;align-items:center;gap:32px;
  background:var(--dark-tertiary);border-radius:24px;padding:30px 40px;
  border:2px solid rgba(177,78,255,0.15);
  box-shadow:0 8px 32px rgba(0,0,0,0.4), 0 0 40px rgba(177,78,255,0.08);
  max-width:700px;width:85%;
  position:relative;overflow:hidden;
}
.person-card-v2::before{
  content:'';position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--accent-purple),var(--accent-pink));
}
.person-avatar-v2{
  width:100px;height:100px;border-radius:28px;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  background:linear-gradient(135deg,rgba(177,78,255,0.15),rgba(255,77,141,0.1));
  border:2px solid rgba(177,78,255,0.25);
}
.person-detail{display:flex;flex-direction:column;gap:6px;text-align:left}
.person-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(177,78,255,0.1);color:var(--accent-purple);
  font-size:1rem;font-weight:700;padding:4px 14px;border-radius:12px;
  width:fit-content;
}

/* Experiment condition cards */
.cond-row{
  display:flex;gap:24px;margin-top:20px;max-width:900px;width:90%;
}
.cond-card{
  flex:1;background:var(--dark-tertiary);border-radius:20px;
  padding:28px 20px;text-align:center;
  border:2px solid rgba(255,255,255,0.05);
  box-shadow:0 6px 24px rgba(0,0,0,0.3);
  position:relative;overflow:hidden;
  transition:transform .3s,box-shadow .3s;
}
.cond-card:hover{transform:translateY(-4px);box-shadow:0 10px 36px rgba(177,78,255,0.15)}
.cond-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.cond-card.cc1::before{background:linear-gradient(90deg,var(--accent-violet),var(--accent-purple))}
.cond-card.cc2::before{background:linear-gradient(90deg,var(--accent-pink),var(--accent-magenta))}
.cond-card.cc3::before{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple))}
.cond-icon{
  width:80px;height:80px;border-radius:22px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;
}
.cond-eq{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-top:8px;
}
.cond-eq-dot{width:8px;height:8px;border-radius:50%;}
.cond-label{font-size:1.1rem;color:var(--text-muted);font-weight:600;margin-top:4px;}
/* lock icon overlay */
.lock-badge{
  position:absolute;top:14px;right:14px;
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.05);
}

/* Enhanced bar chart */
.chart-area{
  width:90%;max-width:850px;margin-top:16px;
  display:flex;flex-direction:column;gap:24px;
}
.chart-row{
  display:flex;align-items:center;gap:18px;
}
.chart-label-box{
  width:120px;flex-shrink:0;text-align:right;
  display:flex;flex-direction:column;align-items:flex-end;gap:2px;
}
.chart-label-main{font-size:1.5rem;font-weight:800;}
.chart-label-sub{font-size:.9rem;color:var(--text-muted);font-weight:600;}
.chart-track{
  flex:1;height:64px;background:rgba(255,255,255,0.03);
  border-radius:16px;position:relative;overflow:hidden;
}
.chart-fill{
  height:100%;border-radius:16px;
  display:flex;align-items:center;justify-content:flex-end;
  padding-right:20px;font-size:2rem;font-weight:900;color:#fff;
  transition:width 1.4s cubic-bezier(.25,.46,.45,.94);
}
.chart-fill-old{background:linear-gradient(90deg,var(--text-muted),#4B5563)}
.chart-fill-new{background:linear-gradient(90deg,var(--accent-pink),var(--accent-magenta))}
/* Percentage marker */
.chart-marker{
  position:absolute;top:-2px;bottom:-2px;width:2px;
  background:rgba(255,255,255,0.08);
}
.chart-marker span{
  position:absolute;top:-18px;left:50%;transform:translateX(-50%);
  font-size:.7rem;color:var(--text-muted);font-weight:600;
}
/* Diff arrow between bars */
.chart-diff{
  display:flex;flex-direction:column;align-items:center;
  margin-left:138px;/* align with bars */
}
.chart-diff-line{
  width:3px;height:30px;
  background:linear-gradient(180deg,var(--text-muted),var(--accent-pink));
  border-radius:2px;
}
.chart-diff-badge{
  display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,77,141,0.1);
  color:var(--accent-pink);font-size:1.3rem;font-weight:900;
  padding:6px 18px;border-radius:14px;
  border:2px solid rgba(255,77,141,0.25);
}

/* Big number comparison v2 */
.num-compare-v2{
  display:flex;gap:28px;align-items:stretch;justify-content:center;
  margin-top:14px;
}
.num-box{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:32px 44px;border-radius:28px;
  min-width:240px;position:relative;
}
.num-box.old{
  background:var(--dark-tertiary);border:2px dashed rgba(255,255,255,0.1);
}
.num-box.new{
  background:rgba(255,77,141,0.08);
  border:3px solid rgba(255,77,141,0.3);
  box-shadow:0 8px 36px var(--glow-pink);
}
.num-box .num-icon{
  width:60px;height:60px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
}
.num-box .num-val{font-size:5.5rem;font-weight:900;line-height:1}
.num-box .num-label{font-size:1.2rem;font-weight:700;}
/* Gauge ring inside num-box */
.gauge-ring{
  width:100px;height:100px;position:relative;
  margin:0 auto;
}
.gauge-ring svg{width:100%;height:100%}
.gauge-ring .gauge-text{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:1.8rem;font-weight:900;
}

/* Equation visual v2 */
.eq-visual{
  display:flex;align-items:center;gap:24px;justify-content:center;
  flex-wrap:wrap;margin-top:14px;
}
.eq-card{
  padding:24px 36px;border-radius:22px;text-align:center;
  position:relative;overflow:hidden;
  transition:transform .3s;
  background:var(--dark-tertiary);
}
.eq-card:hover{transform:translateY(-3px)}
.eq-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.eq-card.eq-a{
  border:2px solid rgba(255,77,141,0.2);
}
.eq-card.eq-a::before{background:linear-gradient(90deg,var(--accent-pink),var(--accent-magenta))}
.eq-card.eq-b{
  border:2px solid rgba(0,229,204,0.2);
}
.eq-card.eq-b::before{background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple))}
.eq-symbol{font-size:4rem;font-weight:900;color:var(--accent-purple);}

/* Flow diagram for summary */
.flow-summary{
  display:flex;align-items:center;gap:0;margin-top:16px;
}
.flow-node{
  display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:20px 28px;border-radius:20px;text-align:center;
  min-width:190px;position:relative;
  background:var(--dark-tertiary);
}
.flow-node-icon{
  width:72px;height:72px;border-radius:20px;
  display:flex;align-items:center;justify-content:center;
}
.flow-node-title{font-size:1.4rem;font-weight:800;}
.flow-node-sub{font-size:1rem;color:var(--text-muted);font-weight:600;}
.flow-arrow-svg{flex-shrink:0;margin:0 -4px;}

/* Conclusion highlight box */
.conclusion-box{
  background:var(--dark-tertiary);border-radius:24px;
  padding:28px 48px;margin-top:16px;
  border:3px solid rgba(255,77,141,0.2);
  box-shadow:0 8px 36px rgba(255,77,141,0.1), 0 0 60px rgba(177,78,255,0.08);
  display:flex;align-items:center;gap:24px;
  max-width:800px;
}
.conclusion-icon{
  width:80px;height:80px;border-radius:50%;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent-pink),var(--accent-magenta));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 24px var(--glow-pink);
}

/* Floating particles */
.float-particle {
    position: absolute; border-radius: 50%; opacity: .25;
    background: var(--accent-purple);
    animation: floatUp 6s ease-in-out infinite;
    box-shadow: 0 0 20px var(--accent-purple);
}
@keyframes floatUp {
    0%,100% { transform: translateY(0) scale(1); opacity:.25; }
    50% { transform: translateY(-20px) scale(1.2); opacity:.4; }
}

</style>
</head>
<body>

<div class="bg-grid"></div>

<div class="slide-container">

<!-- ====== Slide 1: 标题 ====== -->
<div class="slide active" id="s0">
  <div class="deco deco-purple" style="width:500px;height:500px;top:-200px;right:-150px"></div>
  <div class="deco deco-pink" style="width:400px;height:400px;bottom:-120px;left:-120px;animation-delay:-4s"></div>
  <!-- Floating particles -->
  <div class="float-particle" style="width:12px;height:12px;top:15%;left:12%;animation-delay:0s;"></div>
  <div class="float-particle" style="width:8px;height:8px;top:25%;right:18%;animation-delay:1.5s;"></div>
  <div class="float-particle" style="width:10px;height:10px;bottom:20%;left:25%;animation-delay:3s;"></div>

  <div class="anim era-badge">
    <span class="lc lc-28 c-purple"><i data-lucide="flask-conical"></i></span> 案例 ②
  </div>

  <div class="anim t-hero c-dark" style="margin-top:20px">
    Nate B Jones 实验 <span style="font-size:2rem;color:var(--accent-purple)">(｡･ω･｡)ﾉ</span>
  </div>

  <div class="anim line" style="background:linear-gradient(90deg,var(--accent-purple),var(--accent-pink))"></div>

  <!-- Lab illustration -->
  <div class="anim" style="margin-top:10px">
    <div class="hero-lab">
      <!-- Bubbles -->
      <div class="lab-bubble" style="width:14px;height:14px;left:220px;bottom:140px;animation-delay:0s"></div>
      <div class="lab-bubble" style="width:10px;height:10px;left:280px;bottom:120px;animation-delay:1s"></div>
      <div class="lab-bubble" style="width:16px;height:16px;left:310px;bottom:150px;animation-delay:2s"></div>
      <div class="lab-bubble" style="width:8px;height:8px;right:200px;bottom:130px;animation-delay:1.5s"></div>

      <svg width="600" height="240" viewBox="0 0 600 240">
        <!-- Left beaker -->
        <g transform="translate(100,40)">
          <rect x="10" y="80" width="60" height="100" rx="8" fill="none" stroke="var(--text-muted)" stroke-width="2.5"/>
          <rect x="20" y="60" width="40" height="25" rx="4" fill="none" stroke="var(--text-muted)" stroke-width="2"/>
          <rect x="15" y="120" width="50" height="55" rx="6" fill="rgba(107,114,128,0.15)"/>
          <text x="40" y="155" text-anchor="middle" fill="var(--text-muted)" font-size="16" font-weight="800">42%</text>
        </g>
        <!-- Center flask - main -->
        <g transform="translate(230,0)">
          <path d="M50,60 L50,120 L10,210 Q5,225 20,230 L120,230 Q135,225 130,210 L90,120 L90,60" fill="none" stroke="var(--accent-purple)" stroke-width="3"/>
          <rect x="45" y="40" width="50" height="24" rx="5" fill="none" stroke="var(--accent-purple)" stroke-width="2.5"/>
          <path d="M30,190 Q70,160 110,190 L120,225 Q70,210 20,225 Z" fill="rgba(177,78,255,0.15)"/>
          <!-- Sparkle -->
          <circle cx="70" cy="100" r="4" fill="var(--accent-purple)" opacity=".6">
            <animate attributeName="opacity" values=".2;.8;.2" dur="2s" repeatCount="indefinite"/>
          </circle>
          <circle cx="55" cy="115" r="3" fill="var(--accent-pink)" opacity=".5">
            <animate attributeName="opacity" values=".1;.7;.1" dur="2.5s" repeatCount="indefinite"/>
          </circle>
          <text x="70" y="252" text-anchor="middle" fill="var(--accent-purple)" font-size="13" font-weight="800">实验</text>
        </g>
        <!-- Right beaker -->
        <g transform="translate(420,40)">
          <rect x="10" y="80" width="60" height="100" rx="8" fill="none" stroke="var(--accent-pink)" stroke-width="2.5"/>
          <rect x="20" y="60" width="40" height="25" rx="4" fill="none" stroke="var(--accent-pink)" stroke-width="2"/>
          <rect x="15" y="100" width="50" height="75" rx="6" fill="rgba(255,77,141,0.15)"/>
          <text x="40" y="145" text-anchor="middle" fill="var(--accent-pink)" font-size="16" font-weight="800">78%</text>
        </g>
        <!-- Arrow between -->
        <line x1="180" y1="150" x2="225" y2="150" stroke="var(--text-muted)" stroke-width="2" stroke-dasharray="5,3"/>
        <polygon points="222,146 230,150 222,154" fill="var(--text-muted)"/>
        <line x1="375" y1="150" x2="415" y2="150" stroke="var(--accent-pink)" stroke-width="2" stroke-dasharray="5,3"/>
        <polygon points="412,146 420,150 412,154" fill="var(--accent-pink)"/>
      </svg>
    </div>
  </div>

  <div class="anim t-mid c-gray italic">结论更极端 (｀・ω・´)</div>
</div>

<!-- ====== Slide 2: 研究员 ====== -->
<div class="slide" id="s1">
  <div class="deco deco-violet" style="width:450px;height:450px;top:-150px;left:-120px"></div>
  <div class="deco deco-magenta" style="width:350px;height:350px;bottom:-100px;right:-80px;animation-delay:-3s"></div>

  <div class="anim t-mid c-gray">研究员 (｡･ω･｡)</div>
  <div class="anim line" style="background:linear-gradient(90deg,var(--accent-purple),var(--accent-violet))"></div>

  <div class="anim person-card-v2">
    <div class="person-avatar-v2">
      <span class="lc lc-48 c-purple"><i data-lucide="user-round"></i></span>
    </div>
    <div class="person-detail">
      <div style="font-size:2.6rem;font-weight:900;color:var(--text-primary)">Nate B Jones</div>
      <div class="person-badge">
        <span class="lc lc-18 c-purple"><i data-lucide="microscope"></i></span>
        AI 工程研究员 (｀・ω・´)
      </div>
      <div style="font-size:1.1rem;color:var(--text-muted);margin-top:4px;display:flex;align-items:center;gap:8px;">
        <span class="lc lc-18 c-muted"><i data-lucide="flask-conical"></i></span>
        编程基准测试 · Harness 对比实验
      </div>
    </div>
  </div>

  <!-- Research topic visual -->
  <div class="anim" style="margin-top:30px;">
    <svg width="500" height="100" viewBox="0 0 500 100">
      <rect x="0" y="20" width="150" height="60" rx="14" fill="rgba(177,78,255,0.08)" stroke="var(--accent-purple)" stroke-width="2"/>
      <text x="75" y="48" text-anchor="middle" fill="var(--accent-purple)" font-size="14" font-weight="800">同一个模型</text>
      <text x="75" y="66" text-anchor="middle" fill="var(--accent-purple)" font-size="11" font-weight="600">同一个提示词</text>
      <line x1="155" y1="50" x2="195" y2="50" stroke="var(--accent-pink)" stroke-width="2.5"/>
      <polygon points="192,46 200,50 192,54" fill="var(--accent-pink)"/>
      <rect x="200" y="15" width="100" height="70" rx="14" fill="rgba(255,77,141,0.08)" stroke="var(--accent-pink)" stroke-width="2.5"/>
      <text x="250" y="45" text-anchor="middle" fill="var(--accent-pink)" font-size="14" font-weight="800">改变</text>
      <text x="250" y="65" text-anchor="middle" fill="var(--accent-pink)" font-size="13" font-weight="900">Harness</text>
      <line x1="305" y1="50" x2="345" y2="50" stroke="var(--accent-cyan)" stroke-width="2.5"/>
      <polygon points="342,46 350,50 342,54" fill="var(--accent-cyan)"/>
      <rect x="350" y="20" width="140" height="60" rx="14" fill="rgba(0,229,204,0.06)" stroke="var(--accent-cyan)" stroke-width="2"/>
      <text x="420" y="48" text-anchor="middle" fill="var(--accent-cyan)" font-size="14" font-weight="800">成功率巨变</text>
      <text x="420" y="66" text-anchor="middle" fill="var(--accent-cyan)" font-size="11" font-weight="600">42% → 78%</text>
    </svg>
  </div>
</div>

<!-- ====== Slide 3: 实验条件 ====== -->
<div class="slide" id="s2">
  <div class="deco deco-violet" style="width:500px;height:500px;bottom:-180px;right:-150px"></div>
  <div class="deco deco-pink" style="width:300px;height:300px;top:-80px;left:-50px;animation-delay:-2s"></div>

  <div class="anim t-huge c-dark">实验条件 (｡･ω･｡)</div>
  <div class="anim line" style="background:linear-gradient(90deg,var(--accent-violet),var(--accent-purple))"></div>

  <div class="anim cond-row">
    <!-- Card 1: Same model -->
    <div class="cond-card cc1">
      <div class="lock-badge"><span class="lc lc-18 c-muted"><i data-lucide="lock"></i></span></div>
      <div class="cond-icon" style="background:rgba(139,92,246,0.1)">
        <span class="lc lc-40 c-violet"><i data-lucide="cpu"></i></span>
      </div>
      <div style="font-size:1.8rem;font-weight:900;color:var(--text-primary)">同一个<span class="c-violet">模型</span></div>
      <div class="cond-label">模型不变 (｀・ω・´)</div>
      <!-- mini illustration -->
      <div class="cond-eq" style="margin-top:12px;">
        <svg width="60" height="36" viewBox="0 0 60 36">
          <rect x="2" y="4" width="24" height="28" rx="6" fill="rgba(139,92,246,0.1)" stroke="var(--accent-violet)" stroke-width="1.5"/>
          <text x="14" y="22" text-anchor="middle" fill="var(--accent-violet)" font-size="9" font-weight="800">AI</text>
          <text x="38" y="22" text-anchor="middle" fill="var(--accent-violet)" font-size="14" font-weight="900">=</text>
          <rect x="48" y="4" width="10" height="28" rx="4" fill="rgba(139,92,246,0.1)" stroke="var(--accent-violet)" stroke-width="1.5" stroke-dasharray="3,2"/>
        </svg>
      </div>
    </div>
    <!-- Card 2: Same prompt -->
    <div class="cond-card cc2">
      <div class="lock-badge"><span class="lc lc-18 c-muted"><i data-lucide="lock"></i></span></div>
      <div class="cond-icon" style="background:rgba(255,77,141,0.1)">
        <span class="lc lc-40 c-pink"><i data-lucide="message-square-text"></i></span>
      </div>
      <div style="font-size:1.8rem;font-weight:900;color:var(--text-primary)">同一个<span class="c-pink">提示词</span></div>
      <div class="cond-label">提示词不变 (｡ŏ_ŏ)</div>
      <div class="cond-eq" style="margin-top:12px;">
        <svg width="80" height="36" viewBox="0 0 80 36">
          <rect x="2" y="6" width="30" height="24" rx="8" fill="rgba(255,77,141,0.08)" stroke="var(--accent-pink)" stroke-width="1.5"/>
          <rect x="8" y="12" width="18" height="3" rx="1.5" fill="rgba(255,77,141,0.25)"/>
          <rect x="8" y="18" width="12" height="3" rx="1.5" fill="rgba(255,77,141,0.18)"/>
          <text x="48" y="23" text-anchor="middle" fill="var(--accent-pink)" font-size="14" font-weight="900">=</text>
          <rect x="58" y="6" width="20" height="24" rx="6" fill="rgba(255,77,141,0.08)" stroke="var(--accent-pink)" stroke-width="1.5" stroke-dasharray="3,2"/>
        </svg>
      </div>
    </div>
    <!-- Card 3: Change harness -->
    <div class="cond-card cc3">
      <div class="lock-badge" style="background:rgba(0,229,204,0.1)"><span class="lc lc-18 c-cyan"><i data-lucide="unlock"></i></span></div>
      <div class="cond-icon" style="background:rgba(0,229,204,0.08)">
        <span class="lc lc-40 c-cyan"><i data-lucide="settings"></i></span>
      </div>
      <div style="font-size:1.8rem;font-weight:900;color:var(--text-primary)"><span class="c-cyan bold">只改变</span>环境</div>
      <div class="cond-label" style="color:var(--accent-cyan)">唯一变量 ✧(≖ ◡ ≖✿)</div>
      <div class="cond-eq" style="margin-top:12px;">
        <svg width="80" height="36" viewBox="0 0 80 36">
          <rect x="2" y="6" width="30" height="24" rx="8" fill="rgba(255,255,255,0.03)" stroke="var(--text-muted)" stroke-width="1.5"/>
          <text x="17" y="22" text-anchor="middle" fill="var(--text-muted)" font-size="9" font-weight="700">v1</text>
          <text x="44" y="22" text-anchor="middle" fill="var(--accent-cyan)" font-size="14" font-weight="900">→</text>
          <rect x="54" y="6" width="24" height="24" rx="8" fill="rgba(0,229,204,0.1)" stroke="var(--accent-cyan)" stroke-width="2"/>
          <text x="66" y="22" text-anchor="middle" fill="var(--accent-cyan)" font-size="9" font-weight="800">v2</text>
        </svg>
      </div>
    </div>
  </div>

  <div class="anim t-mid c-dark" style="margin-top:28px">
    <span class="c-gray">模型锁定 · 提示词锁定 ·</span> <span class="c-cyan bold ul-pink">只动 Harness</span> (｡･ω･｡)ﾉ
  </div>
</div>

<!-- ====== Slide 4: 成绩对比 ====== -->
<div class="slide" id="s3">
  <div class="deco deco-pink" style="width:500px;height:500px;top:-180px;left:-150px"></div>
  <div class="deco deco-purple" style="width:400px;height:400px;bottom:-150px;right:-100px;animation-delay:-3s"></div>

  <div class="anim t-huge c-dark">编程基准测试成功率 (｡･ω･｡)</div>
  <div class="anim line"></div>

  <div class="anim chart-area">
    <!-- Old bar -->
    <div class="chart-row">
      <div class="chart-label-box">
        <div class="chart-label-main c-gray">改之前</div>
        <div class="chart-label-sub">原始 Harness</div>
      </div>
      <div class="chart-track">
        <div class="chart-marker" style="left:25%"><span>25</span></div>
        <div class="chart-marker" style="left:50%"><span>50</span></div>
        <div class="chart-marker" style="left:75%"><span>75</span></div>
        <div class="chart-fill chart-fill-old" id="barOld" style="width:0%">42%</div>
      </div>
    </div>
    <!-- Diff indicator -->
    <div class="chart-diff">
      <div class="chart-diff-line"></div>
      <div class="chart-diff-badge">
        <span class="lc lc-20 c-pink"><i data-lucide="trending-up"></i></span>
        +36% 提升 ✧
      </div>
      <div class="chart-diff-line"></div>
    </div>
    <!-- New bar -->
    <div class="chart-row">
      <div class="chart-label-box">
        <div class="chart-label-main c-pink bold">改之后</div>
        <div class="chart-label-sub" style="color:var(--accent-pink)">优化 Harness</div>
      </div>
      <div class="chart-track">
        <div class="chart-marker" style="left:25%"><span>25</span></div>
        <div class="chart-marker" style="left:50%"><span>50</span></div>
        <div class="chart-marker" style="left:75%"><span>75</span></div>
        <div class="chart-fill chart-fill-new" id="barNew" style="width:0%">78%</div>
      </div>
    </div>
  </div>

  <div class="anim" style="margin-top:24px;display:flex;align-items:center;gap:16px">
    <span class="lc lc-36 c-pink"><i data-lucide="trending-up"></i></span>
    <span class="t-big c-dark">差了将近<span class="bg-pink c-pink bold" style="font-size:4rem">一倍</span> ✧*｡٩(ˊᗜˋ*)و✧*｡</span>
  </div>
  </div>

<!-- ====== Slide 5: 大数字视觉 + 圆环 ====== -->
<div class="slide" id="s4">
  <div class="deco deco-magenta" style="width:500px;height:500px;bottom:-200px;right:-180px"></div>
  <div class="deco deco-violet" style="width:350px;height:350px;top:-100px;left:-80px;animation-delay:-4s"></div>

  <div class="anim t-mid c-gray italic">变量只有一个 (｀・ω・´)</div>
  <div class="anim line" style="background:linear-gradient(90deg,var(--accent-pink),var(--accent-magenta))"></div>

  <div class="anim num-compare-v2">
    <!-- Old -->
    <div class="num-box old">
      <div class="num-icon" style="background:rgba(255,255,255,0.05)">
        <span class="lc lc-32 c-muted"><i data-lucide="minus-circle"></i></span>
      </div>
      <!-- Gauge ring -->
      <div class="gauge-ring">
        <svg viewBox="0 0 100 100">
          <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="8"/>
          <circle cx="50" cy="50" r="42" fill="none" stroke="var(--text-muted)" stroke-width="8"
            stroke-dasharray="264" stroke-dashoffset="153"
            stroke-linecap="round" transform="rotate(-90 50 50)"/>
        </svg>
        <div class="gauge-text c-muted">42%</div>
      </div>
      <div class="num-label c-muted">原始环境 (´；ω；`)</div>
    </div>

    <div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
      <span class="lc lc-48 c-pink"><i data-lucide="arrow-right"></i></span>
      <div style="font-size:.9rem;color:var(--accent-pink);font-weight:700">只改 Harness (｡･ω･｡)</div>
    </div>

    <!-- New -->
    <div class="num-box new">
      <div class="num-icon" style="background:rgba(255,77,141,0.1)">
        <span class="lc lc-32 c-pink"><i data-lucide="sparkles"></i></span>
      </div>
      <!-- Gauge ring -->
      <div class="gauge-ring">
        <svg viewBox="0 0 100 100">
          <circle cx="50" cy="50" r="42" fill="none" stroke="rgba(255,77,141,0.15)" stroke-width="8"/>
          <circle cx="50" cy="50" r="42" fill="none" stroke="url(#gaugeGrad)" stroke-width="8"
            stroke-dasharray="264" stroke-dashoffset="58"
            stroke-linecap="round" transform="rotate(-90 50 50)">
            <animate attributeName="stroke-dashoffset" from="264" to="58" dur="1.5s" fill="freeze" begin="0s"/>
          </circle>
          <defs>
            <linearGradient id="gaugeGrad" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stop-color="var(--accent-pink)"/>
              <stop offset="100%" stop-color="var(--accent-magenta)"/>
            </linearGradient>
          </defs>
        </svg>
        <div class="gauge-text c-pink">78%</div>
      </div>
      <div class="num-label c-pink bold">优化 Harness ✧(≖ ◡ ≖✿)</div>
    </div>
  </div>

  <div class="anim t-huge c-dark" style="margin-top:24px">
    变量只有 <span class="bg-pink c-pink bold" style="font-size:4.5rem">Harness</span> (｡･ω･｡)ﾉ
  </div>
</div>

<!-- ====== Slide 6: 等价关系 ====== -->
<div class="slide" id="s5">
  <div class="deco deco-cyan" style="width:600px;height:600px;top:50%;left:50%;margin-top:-300px;margin-left:-300px;opacity:0.08"></div>
  <div class="deco deco-purple" style="width:400px;height:400px;top:-100px;right:-100px;animation-delay:-2s"></div>

  <div class="anim">
    <span class="lc lc-64 c-cyan"><i data-lucide="lightbulb"></i></span>
  </div>

  <div class="anim t-mid c-gray italic" style="margin-top:12px">换句话说 (｡ŏ_ŏ)</div>
  <div class="anim line" style="background:linear-gradient(90deg,var(--accent-cyan),var(--accent-purple))"></div>

  <div class="anim eq-visual">
    <div class="eq-card eq-a">
      <div style="font-size:1.2rem;color:var(--text-muted);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px;justify-content:center">
        <span class="lc lc-20 c-pink"><i data-lucide="settings"></i></span> Harness 提升
      </div>
      <!-- mini bar chart inside -->
      <svg width="180" height="60" viewBox="0 0 180 60">
        <rect x="0" y="30" width="70" height="24" rx="6" fill="rgba(255,255,255,0.06)"/>
        <text x="35" y="46" text-anchor="middle" fill="var(--text-muted)" font-size="12" font-weight="800">42%</text>
        <rect x="0" y="2" width="140" height="24" rx="6" fill="url(#barGrad)"/>
        <text x="70" y="18" text-anchor="middle" fill="#fff" font-size="12" font-weight="800">78%</text>
        <defs><linearGradient id="barGrad" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="var(--accent-pink)"/><stop offset="100%" stop-color="var(--accent-magenta)"/></linearGradient></defs>
        <!-- Arrow -->
        <line x1="155" y1="42" x2="155" y2="14" stroke="var(--accent-magenta)" stroke-width="2"/>
        <polygon points="151,17 155,8 159,17" fill="var(--accent-magenta)"/>
      </svg>
    </div>

    <div class="eq-symbol">=</div>

    <div class="eq-card eq-b">
      <div style="font-size:1.2rem;color:var(--text-muted);font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:6px;justify-content:center">
        <span class="lc lc-20 c-cyan"><i data-lucide="cpu"></i></span> 等效于
      </div>
      <!-- Model generation visual -->
      <svg width="200" height="60" viewBox="0 0 200 60">
        <rect x="0" y="16" width="60" height="36" rx="10" fill="rgba(255,255,255,0.04)" stroke="var(--text-muted)" stroke-width="1.5"/>
        <text x="30" y="38" text-anchor="middle" fill="var(--text-muted)" font-size="10" font-weight="700">旧模型</text>
        <line x1="66" y1="34" x2="95" y2="34" stroke="var(--accent-cyan)" stroke-width="2.5"/>
        <polygon points="92,30 100,34 92,38" fill="var(--accent-cyan)"/>
        <rect x="102" y="10" width="90" height="44" rx="12" fill="rgba(0,229,204,0.08)" stroke="var(--accent-cyan)" stroke-width="2.5"/>
        <text x="147" y="30" text-anchor="middle" fill="var(--accent-cyan)" font-size="11" font-weight="800">新一代模型</text>
        <text x="147" y="44" text-anchor="middle" fill="var(--accent-cyan)" font-size="9" font-weight="600">性能跃升</text>
        <!-- Sparkle -->
        <circle cx="180" cy="16" r="5" fill="rgba(0,229,204,0.2)">
          <animate attributeName="r" values="3;6;3" dur="2s" repeatCount="indefinite"/>
        </circle>
      </svg>
    </div>
  </div>

  <div class="anim t-hero c-dark" style="margin-top:24px">
    <span class="strike" style="font-size:3.5rem">换模型</span> 
    <span style="margin:0 16px;color:var(--text-muted)">→</span>
    改 <span class="concept-word" style="font-size:5rem">Harness</span> 
  </div>
</div>

<!-- ====== Slide 7: 总结 ====== -->
<div class="slide" id="s6">
  <div class="deco deco-magenta" style="width:500px;height:500px;top:-200px;right:-150px"></div>
  <div class="deco deco-purple" style="width:400px;height:400px;bottom:-150px;left:-100px;animation-delay:-3s"></div>
  <div class="float-particle" style="width:10px;height:10px;top:20%;left:20%;animation-delay:2s;"></div>
  <div class="float-particle" style="width:6px;height:6px;top:60%;right:15%;animation-delay:4s;"></div>

  <div class="anim">
    <span class="lc lc-64 c-pink"><i data-lucide="zap"></i></span>
  </div>

  <div class="anim t-huge c-dark" style="margin-top:12px">核心发现 (｡･ω･｡)</div>
  <div class="anim line"></div>

  <!-- Enhanced flow diagram -->
  <div class="anim flow-summary">
    <div class="flow-node" style="border:2px solid rgba(255,140,66,0.2);border-radius:20px;">
      <div class="flow-node-icon" style="background:rgba(255,140,66,0.1)">
        <span class="lc lc-36 c-pink"><i data-lucide="equal"></i></span>
      </div>
      <div class="flow-node-title c-pink">同模型</div>
      <div class="flow-node-sub">同提示词 (｀・ω・´)</div>
    </div>
    <div class="flow-arrow-svg">
      <svg width="60" height="40" viewBox="0 0 60 40"><line x1="5" y1="20" x2="48" y2="20" stroke="var(--accent-pink)" stroke-width="3"/><polygon points="45,14 56,20 45,26" fill="var(--accent-pink)"/></svg>
    </div>
    <div class="flow-node" style="border:2.5px solid rgba(255,77,141,0.25);border-radius:20px;">
      <div class="flow-node-icon" style="background:rgba(255,77,141,0.1)">
        <span class="lc lc-36 c-pink"><i data-lucide="settings"></i></span>
      </div>
      <div class="flow-node-title c-pink bold">只改 Harness</div>
      <div class="flow-node-sub" style="color:var(--accent-pink)">优化运行环境 (｡･ω･｡)</div>
    </div>
    <div class="flow-arrow-svg">
      <svg width="60" height="40" viewBox="0 0 60 40"><line x1="5" y1="20" x2="48" y2="20" stroke="var(--accent-cyan)" stroke-width="3"/><polygon points="45,14 56,20 45,26" fill="var(--accent-cyan)"/></svg>
    </div>
    <div class="flow-node" style="border:2px solid rgba(0,229,204,0.2);border-radius:20px;">
      <div class="flow-node-icon" style="background:rgba(0,229,204,0.1)">
        <span class="lc lc-36 c-cyan"><i data-lucide="rocket"></i></span>
      </div>
      <div class="flow-node-title c-cyan">成功率翻倍</div>
      <div class="flow-node-sub" style="color:var(--accent-cyan)">42% → 78% ✧*｡٩(ˊᗜˋ*)و✧*｡</div>
    </div>
  </div>

  <!-- Conclusion box -->
  <div class="anim conclusion-box" style="margin-top:28px">
    <div class="conclusion-icon">
      <span class="lc lc-40 c-white"><i data-lucide="zap"></i></span>
    </div>
    <div style="text-align:left">
      <div class="t-big c-dark" style="text-align:left;font-size:2.4rem">
        Harness 的提升 <span class="c-pink bold ul-pink" style="font-size:2.8rem">≈ 换一代模型</span>
      </div>
      <div style="font-size:1.2rem;color:var(--text-muted);margin-top:6px">模型不是瓶颈，运行环境才是关键 (｀・ω・´)ゞ</div>
    </div>
  </div>
</div>

</div>

<script>
lucide.createIcons();

const slides=document.querySelectorAll('.slide'),
      total=slides.length;
let cur=0;

function animateBars(){
  const bo=document.getElementById('barOld');
  const bn=document.getElementById('barNew');
  if(bo) setTimeout(()=>{bo.style.width='42%'},500);
  if(bn) setTimeout(()=>{bn.style.width='78%'},800);
}

function resetBars(){
  const bo=document.getElementById('barOld');
  const bn=document.getElementById('barNew');
  if(bo) bo.style.width='0%';
  if(bn) bn.style.width='0%';
}

function go(n){
  if(n<0||n>=total||n===cur)return;
  if(cur===3) resetBars();
  slides[cur].classList.remove('active');
  slides[cur].querySelectorAll('.anim').forEach(e=>e.classList.remove('show'));
  cur=n;
  slides[cur].classList.add('active');
  slides[cur].querySelectorAll('.anim').forEach((e,i)=>{
    e.classList.remove('show');
    setTimeout(()=>e.classList.add('show'),200+i*300);
  });
  if(cur===3) animateBars();
}

slides[0].querySelectorAll('.anim').forEach((e,i)=>setTimeout(()=>e.classList.add('show'),400+i*350));

document.addEventListener('keydown',e=>{
  if(['ArrowRight','ArrowDown',' ','PageDown'].includes(e.key)){e.preventDefault();go(cur+1)}
  else if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();go(cur-1)}
  else if(e.key==='Home'){e.preventDefault();go(0)}
  else if(e.key==='End'){e.preventDefault();go(total-1)}
});

let tx=0,ty=0;
document.addEventListener('touchstart',e=>{tx=e.changedTouches[0].screenX;ty=e.changedTouches[0].screenY});
document.addEventListener('touchend',e=>{
  const dx=e.changedTouches[0].screenX-tx,dy=e.changedTouches[0].screenY-ty;
  if(Math.abs(dx)>Math.abs(dy)&&Math.abs(dx)>50){dx<0?go(cur+1):go(cur-1)}
});

let wc=false;
document.addEventListener('wheel',e=>{
  if(wc)return;wc=true;setTimeout(()=>wc=false,800);
  e.deltaY>0?go(cur+1):go(cur-1);
});
</script>

</body>
</html>


path: assets/templates/PPT Template-level2/SUMMARY.md
content: # PPT Template-level2 模板总结

> 本文件供 AI 在 Step 3 选择模板时参考。
> 共 25 个模板，按主题分为 9 个系列（1~9），每个系列下有若干子模板。
> **选择原则**：根据科普内容的类型（对比/步骤/概念/案例/数据/辩论等）匹配对应系列的视觉风格。

---

## 快速选择指南

| 内容类型 | 推荐模板 | 原因 |
|---------|---------|------|
| 两方对比/辩论 | 8-1, 8-3, 5-3, 6-2 | VS 对比卡片丰富（8-1有12处，8-3有30处） |
| 步骤/流程/工程 | 3-2, 6-1, 6-3, 6-4, 9-3 | SVG 流程图 + 步骤动画 |
| 概念/定义介绍 | 1, 2, 3-1, 3-3 | 清晰布局 + 渐变文字 |
| 案例/实验分析 | 4-2, 4-3, 5-1~5-4 | 数据图表 + 代码动画 |
| 警告/危险/失败 | 5-4, 6-4, 7-3 | 高达15~16种动画，警示风格 |
| 简洁/轻量展示 | 3-1, 3-3, 4-1, 9-2 | 动画少，代码量小，加载快 |
| 最华丽/视觉冲击 | 2, 5-4, 6-2, 7-2 | 10+种动画，粒子丰富 |

---

## 模板详情

---

### 1.html
- **主题：** 模型不是关键，Harness才是
- **页数：** 7 页
- **主色调：** `#FF6B35`（橙红） + `#F4A261`（桃橙） + 深色背景 `#0F0E17`
- **动画数量：** 5 种（float-particle 浮动粒子 / pulse-glow 脉冲发光 / dash-move 虚线流动 / ring-pulse 环形脉冲 / border-rotate 渐变边框旋转）
- **特效亮点：** 浮动粒子 · 进度条动画 · SVG 流程图 · VS对比卡片（3组）· 渐变文字 · 网格背景
- **SVG：** 15 个（代码爆炸图 / 冰山 / 病毒扩散 / 折线图等）
- **代码量：** 670 行
- **适用场景：** 对比类（好方案 vs 坏方案）· 概念引入 · 开场总览

---

### 2.html
- **主题：** Harness Engineering 驾驭工程
- **页数：** 6 页
- **主色调：** `#7B5CF0`（紫） + `#00D9FF`（青） + 深色背景
- **动画数量：** 13 种（floatUp 向上漂浮 / pulseGlow 脉冲发光 / formulaSpin 公式旋转 / centerPulse 中心脉冲 / orbitSpin 轨道旋转 / dashFlow 虚线流动 / drawLine 画线 / fadeInScale 淡入缩放 / bounceIn 弹入 / shimmer 微光 / rotateLoop 旋转循环 / arrowPulse 箭头脉冲 / glowPulse 发光脉冲）
- **特效亮点：** 最多元化动画 · 粒子漂浮 · 层级堆叠布局 · 渐变文字 · 双色装饰圆
- **SVG：** 5 个
- **代码量：** 781 行
- **适用场景：** 概念定义 · 层级结构展示 · 需要强烈视觉冲击的科普

---

### 3-1.html
- **主题：** Prompt Engineering · 提示词工程
- **页数：** 7 页
- **主色调：** `#06D6A0`（青绿） + 深色背景
- **动画数量：** 0 种自定义 keyframes（依赖 CSS transition 缓入效果）
- **特效亮点：** 极简风格 · 代码块样式 · 流程步骤卡片 · 引用高亮
- **SVG：** 4 个
- **代码量：** 433 行（最轻量之一）
- **适用场景：** 简洁技术概念介绍 · 提示词工程 · 轻量科普

---

### 3-2.html
- **主题：** Context Engineering · 上下文工程
- **页数：** 5 页
- **主色调：** `#0D1117`（极深背景）+ 青色/紫色点缀
- **动画数量：** 4 种（orbFloat 球体漂浮 / spin 旋转 / floatUp 向上漂浮 / pulse 脉冲）
- **特效亮点：** 31 个 SVG（最丰富！）· 步骤流程图 · 图标矩阵 · 装饰性orb球体
- **SVG：** 31 个
- **代码量：** 890 行
- **适用场景：** 步骤类内容（5步流程）· 需要大量图示的工程类科普

---

### 3-3.html
- **主题：** Harness Engineering · 驾驭工程
- **页数：** 7 页
- **主色调：** `#FF4D8D`（粉红） + 深色背景
- **动画数量：** 0 种自定义 keyframes
- **特效亮点：** 极简轻量 · 渐变文字 · 简洁布局
- **SVG：** 1 个
- **代码量：** 331 行（最轻量！）
- **适用场景：** 快速简洁展示 · 纯概念引入 · 移动端优先

---

### 4-1.html
- **主题：** 案例 · LangChain 实验 & Harness Engineering
- **页数：** 6 页
- **主色调：** `#6366F1`（靛蓝） + 深色背景
- **动画数量：** 0 种
- **特效亮点：** 极简 · 代码注释风格 · 分栏布局
- **SVG：** 0 个
- **代码量：** 315 行
- **适用场景：** 案例展示 · 代码讲解 · 轻量快速

---

### 4-2.html
- **主题：** 案例② · Nate B Jones 实验
- **页数：** 8 页
- **主色调：** 深色 `#0D0D12` + 青色/紫色点缀
- **动画数量：** 4 种（orbFloat 球体漂浮 / sparkle 闪光 / bubbleUp 气泡上升 / floatUp 向上漂浮）
- **特效亮点：** 粒子气泡效果 · 数据可视化条 · 实验对比卡片
- **SVG：** 11 个（实验图表 / 对比示意图）
- **代码量：** 838 行
- **适用场景：** 实验案例分析 · 数据对比 · 8页较长叙事

---

### 4-3.html
- **主题：** 案例③ · OpenAI 百万行代码实验
- **页数：** 9 页（最长之一）
- **主色调：** `#06B6D4`（青） + 深色背景
- **动画数量：** 4 种（codefall 代码雨 / blink 闪烁 / flowDot 流动点 / floatP 浮动粒子）
- **特效亮点：** 代码雨动画！· 进度条 · OpenAI 相关 SVG 图示
- **SVG：** 13 个
- **代码量：** 758 行
- **适用场景：** 代码相关案例 · OpenAI/编程主题 · 9页长叙事

---

### 5-1.html
- **主题：** Agent 为什么会失败？· 失败模式①
- **页数：** 7 页
- **主色调：** 深色 + 橙/青色点缀
- **动画数量：** 5 种（orbFloat / floatP / pulse / shake / floatUp）
- **特效亮点：** 失败原因分析 · 圆形 orb 装饰 · 警示风格图标
- **SVG：** 10 个（故障图 / 原因分析图）
- **代码量：** 617 行
- **适用场景：** 失败模式分析 · 问题诊断类科普

---

### 5-2.html
- **主题：** 失败模式② · 过早宣布胜利
- **页数：** 7 页
- **主色调：** 深色 `#0A0F0A`（微绿） + 橙红点缀
- **动画数量：** 5 种（orbFloat / floatP / floatUp / pulse / confetti 彩带庆祝）
- **特效亮点：** confetti 彩带动画！· 胜利/失败对比 · 进度条
- **SVG：** 6 个
- **代码量：** 610 行
- **适用场景：** 失败模式 · 警告类内容（过早庆祝导致的问题）

---

### 5-3.html
- **主题：** 失败模式③ · 过早标记功能完成
- **页数：** 8 页
- **主色调：** `#8B5CF6`（紫） + 深色背景
- **动画数量：** 7 种（floatP / bounce / float / wiggle / pulse / pulse-ring / shake）
- **特效亮点：** 紫色主题 · VS对比卡片丰富（7组）· 进度追踪
- **SVG：** 7 个
- **代码量：** 836 行
- **适用场景：** 失败模式③ · 对比分析（正确 vs 错误做法）

---

### 5-4.html
- **主题：** AI的隐藏危险：模式复制
- **页数：** 13 页（最多之一）
- **主色调：** `#FF6B35`（橙红） + 深色背景
- **动画数量：** 15 种（floatParticle / orbFloat / pulseIcon / ringPulse / shimmer / flowDot / rotateBg / dangerPulse / arrowPulse / rippleOut / driftPulse / lineSlide / barAlert / warningBounce / shieldPulse）
- **特效亮点：** **最高动画密度之一** · 警示风格 · 渐变背景旋转 · 13页长叙事 · 盾牌/警告图标
- **SVG：** 0 个
- **代码量：** 1532 行（最大之一）
- **适用场景：** 危险警告 · 模式复制 · 长叙事（13页）· 高风险内容

---

### 6-1.html
- **主题：** 第一个护栏：上下文工程
- **页数：** 7 页
- **主色调：** 深色 `#0a0a0f` + 青色/绿色点缀
- **动画数量：** 9 种（orbFloat / particleFloat / pulseRing / shimmer / badgePulse / squeezeAnim / arrowPulse / centerPulse / floatY）
- **特效亮点：** 护栏概念 · 粒子漂浮 · 徽章动画 · 进度条（3个）
- **SVG：** 2 个
- **代码量：** 1359 行
- **适用场景：** 工程护栏 · 架构约束 · 技术防护措施

---

### 6-2.html
- **主题：** 架构约束 - Architecture Constraints
- **页数：** 8 页
- **主色调：** 深色 `#0a0a0f` + 红绿双色
- **动画数量：** 15 种（orbFloat / particleFloat / shimmer / floatY / badgePulse / arrowBounce / pulseRingGreen+Red / ciArrowPulse / packetMove / kmoBounce/Float/Wiggle/Pulse/Shake）
- **特效亮点：** **最华丽的VS对比**（10组+）· 红绿双色对比 · 数据包流动动画 · KMO系列动画
- **SVG：** 5 个
- **代码量：** 1576 行
- **适用场景：** 架构对比 · 正反方案对比（红色=错误/绿色=正确）· 最强视觉说服

---

### 6-3.html
- **主题：** 第三个护栏 - 反馈循环 Feedback Loop
- **页数：** 6 页
- **主色调：** 深色 `#0A0A12` + 青绿点缀
- **动画数量：** 9 种（particleFloat / floatY / shimmer / pulseRing / badgePulse / stepPulse / stepArrowPulse / stepPacketMove / ringRotate）
- **特效亮点：** 循环流程可视化 · 步骤粒子流动 · 环形旋转 · 反馈回路图
- **SVG：** 8 个
- **代码量：** 1015 行
- **适用场景：** 循环/反馈系统 · 闭环流程 · 迭代过程

---

### 6-4.html
- **主题：** 护栏四：熵管理 Entropy Management
- **页数：** 6 页
- **主色调：** `#06B6D4`（青） + 深色背景
- **动画数量：** 16 种（particleFloat / floatY / shimmer / pulseRing / badgePulse / iconPulse / stepPulse / arrowPulse / packetMove / ringRotate / connectorPulse / kmoBounce/Float/Wiggle/Pulse/Shake）
- **特效亮点：** **最高动画数量之一** · 连接器脉冲 · 熵管理主题 · 青色主题色稳定
- **SVG：** 8 个
- **代码量：** 1196 行
- **适用场景：** 熵/系统稳定性 · 复杂工程护栏 · 多步骤管理

---

### 7-1.html
- **主题：** Trace 分析：总结经验教训
- **页数：** 6 页
- **主色调：** 深色 `#0d0d12` + 多色点缀
- **动画数量：** 8 种（orbFloat / floatUp / floatDown / pulse-soft / spin-slow / glow-pulse / scan-line / shimmer）
- **特效亮点：** 扫描线效果 · 软脉冲 · 追踪分析风格 · VS对比（6组）
- **SVG：** 1 个
- **代码量：** 1352 行
- **适用场景：** Trace 分析 · 经验总结 · 回顾复盘类内容

---

### 7-2.html
- **主题：** 给 Agent 提供环境上下文
- **页数：** 6 页
- **主色调：** 深色 `#0a0a12` + 多色点缀
- **动画数量：** 17 种（orbFloat / floatUp / floatDown / pulse-soft / spin-slow / glow-pulse / shimmer / scan-line / wiggle / blink-warning / flow-right / inject-pulse / kmoBounce/Float/Wiggle/Pulse/Shake）
- **特效亮点：** **最多动画之一** · 注入脉冲 · 流程右流动画 · 闪烁警告 · 环境上下文可视化
- **SVG：** 1 个
- **代码量：** 1188 行
- **适用场景：** Agent 系统 · 上下文注入 · 环境感知类主题

---

### 7-3.html
- **主题：** 检测并破解 Doom Loop
- **页数：** 6 页
- **主色调：** 深色 `#0a0a14` + 红色警示
- **动画数量：** 14 种（orbFloat / floatUp / floatDown / pulse-soft / spin-slow / glow-pulse / glow-pulse-red / shimmer / shake / ripple / blink-warning / countUp / loopSpin / arrow-pulse）
- **特效亮点：** 红色脉冲警示 · 循环旋转 · 计数动画 · 涟漪效果 · Doom Loop 可视化
- **SVG：** 1 个
- **代码量：** 1378 行
- **适用场景：** Doom Loop · 危险循环 · 红色警示 · 问题检测

---

### 7-4.html
- **主题：** 工具不是越多越好
- **页数：** 6 页
- **主色调：** `#6366F1`（靛蓝） + 深色背景
- **动画数量：** 16 种（floatParticle / glowPulse / arrowBounce / miniFloat / sparkle / arrowDown / poolPulse / rotatePool / dotPulse / bgGlow / iconFloat / cardGlow / kmoBounce/Float/Wiggle/Pulse）
- **特效亮点：** 工具池旋转 · 卡片发光 · 粒子池 · 背景发光 · 工具选择类内容
- **SVG：** 0 个
- **代码量：** 1329 行
- **适用场景：** 工具选择 · 资源池管理 · 推荐系统类主题

---

### 8-1.html
- **主题：** Harness 真的比模型重要吗？
- **页数：** 6 页
- **主色调：** 深色 `#0D0D14` + 橙/青色点缀
- **动画数量：** 13 种（floatParticle / pulse / pulseGlow / float / rotateScale / shimmer / slideInLeft+Right / scaleIn / bounceIn / ripple / scaleRock / pulseArrow）
- **特效亮点：** **12组VS对比！** · 左右滑入动画 · 弹入缩放 · 粒子漂浮 · 辩论风格
- **SVG：** 0 个
- **代码量：** 1461 行
- **适用场景：** 辩论对比（Harness vs 模型）· 正反观点 · 思辨类内容

---

### 8-2.html
- **主题：** Big Harness 阵营的反击
- **页数：** 6 页
- **主色调：** 深色 `#0a0a12` + 青绿点缀
- **动画数量：** 12 种（orbFloat / floatParticle / pulse / pulseGlow / float / rotateScale / ripple / bounceIn / shimmer / pulseArrow / shake / pulseGlowTeal）
- **特效亮点：** 17个粒子（最多之一）· 脉冲组 · 阵营反击主题 · 大量视觉动画
- **SVG：** 0 个
- **代码量：** 1381 行
- **适用场景：** 阵营辩论 · Big Harness 支持论点 · 反驳类内容

---

### 8-3.html
- **主题：** 两边都对了一半
- **页数：** 7 页
- **主色调：** 深色 `#0a0f0a`（微绿） + 多色点缀
- **动画数量：** 15 种（orbFloat / pulse / float / rotateScale / ripple / shimmer / shake / pulseGlow / bounceIn / fillBar / countUp / kmoBounce/Float/Wiggle/Pulse）
- **特效亮点：** **30组VS对比（最多！）** · 进度条填充动画 · 计数动画 · 融合双方观点的展示
- **SVG：** 0 个
- **代码量：** 1579 行
- **适用场景：** 双方观点融合 · 辩证分析 · 全面对比（30组VS）

---

### 9-1.html
- **主题：** 工程师角色的根本转变
- **页数：** 6 页
- **主色调：** 深色 `#0a0a12` + 多色点缀
- **动画数量：** 14 种（floatParticle / orbFloat / gentlePulse / gentleRotate / flowRight / pulseArrow / radialPulse / spinGear / pulseGlow / orbitExpand / kmoBounce/Float/Wiggle/Pulse）
- **特效亮点：** 轨道扩展动画 · 齿轮旋转 · 径向脉冲 · 角色转变可视化
- **SVG：** 4 个
- **代码量：** 1341 行
- **适用场景：** 职业转变 · AI时代工程师 · 角色演进类主题

---

### 9-2.html
- **主题：** Harness Engineering — 行业共识
- **页数：** 6 页
- **主色调：** 深色 `#0F0E17` + 橙色/青色点缀
- **动画数量：** 1 种（drift 漂移）
- **特效亮点：** 极简 · 共识/总结风格 · 进度条（2个）· VS对比（2组）· 代码量中等
- **SVG：** 0 个
- **代码量：** 1098 行
- **适用场景：** 总结收尾 · 行业共识 · 结论类页面 · 轻度动画

---

### 9-3.html
- **主题：** 三个问题看懂 AI 编程工具
- **页数：** 5 页（最少之一）
- **主色调：** 深色 `#0A0F0A`（微绿） + 橙/青色点缀
- **动画数量：** 5 种（waveHand 挥手 / kmoBounce/Float/Wiggle/Pulse）
- **特效亮点：** 挥手动画 · 5页精炼总结 · 问答形式 · 轻量快速
- **SVG：** 0 个
- **代码量：** 847 行
- **适用场景：** 快速总结 · 精华提炼 · 结尾页 · 5页以内简短科普

---

## 动画类型索引

| 动画名 | 模板文件 | 类型 |
|--------|---------|------|
| float-particle / floatParticle | 1, 4-3, 5-4, 7-4, 8-1, 8-2, 9-1 | 粒子/漂浮 |
| pulse / pulse-glow / pulseGlow | 1, 2, 4-2, 5-1~5-4, 6-1~6-4, 7-1~7-3, 8-1~8-3 | 脉冲发光 |
| orbFloat | 3-2, 4-2, 5-1, 5-2, 6-1, 6-2, 7-1~7-3, 8-3, 9-1 | 球体漂浮 |
| shimmer | 2, 5-4, 6-1~6-4, 7-1~7-3, 8-1~8-3, 9-1 | 微光闪烁 |
| ring-pulse / ringPulse / ringRotate | 1, 5-4, 6-3, 6-4 | 环形脉冲/旋转 |
| bounceIn / kmoBounce | 2, 5-3, 6-2, 7-4, 8-1, 8-2, 8-3, 9-1~9-3 | 弹入 |
| confetti | 5-2 | 彩带庆祝 |
| codefall | 4-3 | 代码雨 |
| border-rotate | 1 | 渐变边框旋转 |
| drift / driftPulse | 5-4, 9-2 | 漂移 |
| waveHand | 9-3 | 挥手 |
| spinGear | 9-1 | 齿轮旋转 |
| orbitExpand | 9-1 | 轨道扩展 |

---

## 配色主题索引

| 主色调 | 模板 |
|-------|------|
| 橙红 `#FF6B35` | 1, 5-4 |
| 紫色 `#7B5CF0` | 2 |
| 青绿 `#06D6A0` | 3-1 |
| 粉红 `#FF4D8D` | 3-3 |
| 靛蓝 `#6366F1` | 4-1, 7-4 |
| 青 `#06B6D4` | 4-3, 6-4 |
| 紫色 `#8B5CF6` | 5-3 |


Security scan verdicts — ClawScan: suspicious | static analysis: clean | VirusTotal: clean | SkillSpector: suspicious (CRITICAL)