From 4b1ff9512690120b5931725de329db27486dc9fd Mon Sep 17 00:00:00 2001
From: wehub-skill-sync <skill-sync@wehub.local>
Date: Mon, 13 Jul 2026 21:37:02 +0800
Subject: [PATCH] chore: import zh skill kami-deck

---
 README.md       |   56 +++
 README.wehub.md |    9 +
 SKILL.md        |  161 +++++++
 example.html    | 1101 +++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 1327 insertions(+)
 create mode 100644 README.md
 create mode 100644 README.wehub.md
 create mode 100644 SKILL.md
 create mode 100644 example.html

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..4a93f85
--- /dev/null
+++ b/README.md
@@ -0,0 +1,56 @@
+# kami-deck
+
+与 [`kami-landing`](../kami-landing/) 对应的姊妹技能。生成一份独立的自包含 HTML 文件：一个水平杂志风格的滑动轮播组件，采用 **kami（紙 / 纸）** 设计体系——印刷节奏感、墨蓝强调色、单一字重衬线体、无斜体、无冷灰色调。
+
+> **先读**——代理合约、模式与自检机制位于 [`SKILL.md`](./SKILL.md) 中。本 README 是面向人类的快速入门指南。
+
+## 你将获得
+
+- N 个视口大小的幻灯片，水平排列在一个经过变换的弹性轨道上。
+- **封面 / 章节 / 结束幻灯片** 背景切换为墨蓝色（`#1B365D`），文字为象牙色。**所有其他幻灯片** 保持羊皮纸色（`#f5f4ed`）背景，衬线体字重 500。
+- **每张幻灯片的镀铬条**：品牌标志 · 轮播标题 · 实时幻灯片计数器（`01 / 09`）。
+- 每个计数器、度量值和日期均采用 **tabular-nums**（表格数字）。
+- 底部 **墨蓝色进度条**，随翻页逐渐填充。
+- 底部附近的 **圆点指示器**，点击可跳转。
+- **ESC 概览网格**，带缩略图预览。
+- **键盘 / 滚轮 / 触摸导航**——与 `guizang-ppt` 相同的交互模型。
+- **多语言堆栈**——英文 / 简体中文 / 日文，通过 `language` 参数在 `:root` 上设置。
+
+## 30 秒上手
+
+该技能是"代理驱动，无脚本"模式：没有 `compose.ts` 文件。代理读取 `SKILL.md`，收集需求概要，然后直接利用 [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) 中的令牌规范和 [`example.html`](./example.html) 中的布局原语，生成 `out/index.html` 文件。
+
+预览规范版 Open Design 实例：
+
+```bash
+open example.html
+```
+
+启动一个新项目：
+
+1. 在你的代理（Claude · Cursor · Codex · …）中打开该技能。
+2. 回答两轮需求概要问题（品牌身份 + 内容）。
+3. 写入文件。完成。
+
+## 文件结构
+
+```text
+skills/kami-deck/
+├── SKILL.md      # ← 代理合约（先读此文件）
+├── README.md     # ← 你正在阅读的文件
+└── example.html  # 规范版 Open Design 渲染（9 张幻灯片）
+```
+
+## 边界约定
+
+- 无第二强调色。无斜体。无冷调蓝灰色。无硬阴影。
+- 一份自包含的 HTML 文件。无路由器，无外部 JS 包。
+- 仅封面 / 章节 / 结束幻灯片使用深色背景——其他类型幻灯片不变暗。
+- 标签填充色必须使用纯十六进制（kami 的印刷不变规则），而非 `rgba()`。
+
+## 参见
+
+- [`kami-landing`](../kami-landing/) ——长篇单页式姊妹技能。
+- [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) ——令牌规范。
+- [`open-design-landing-deck`](../open-design-landing-deck/) ——相同的滑动导航模型，不同的视觉语言（Atelier Zero）。
+- 上游：[`tw93/kami`](https://github.com/tw93/kami) ——设计体系所改编的原始 Claude 技能（MIT 协议）。
diff --git a/README.wehub.md b/README.wehub.md
new file mode 100644
index 0000000..8d4874d
--- /dev/null
+++ b/README.wehub.md
@@ -0,0 +1,9 @@
+# WeHub 来源说明
+
+- Skill 名称：`kami-deck`
+- 中文类目：Open Design 演示模板批次2
+- 上游仓库：`nexu-io__open-design`
+- 上游路径：`design-templates/kami-deck/SKILL.md`
+- 上游链接：https://github.com/nexu-io/open-design/blob/HEAD/design-templates/kami-deck/SKILL.md
+- 本仓库为 WeHub 中文 Skill 汉化包，基于 skill 市场筛选 Top200 清单整理
+- 原作者、版权和许可证信息以上游仓库为准
diff --git a/SKILL.md b/SKILL.md
new file mode 100644
index 0000000..014f9d9
--- /dev/null
+++ b/SKILL.md
@@ -0,0 +1,161 @@
+---
+name: kami-deck
+description: >
+  Produce a print-grade slide deck in the kami (紙 / 纸) design system —
+  warm parchment background (or ink-blue for cover / chapter slides),
+  serif at one weight, ink-blue accent ≤ 5% per slide, no italic.
+  Horizontal magazine swipe pagination (←/→ · wheel · swipe · ESC
+  overview). One self-contained HTML file, zero dependencies beyond
+  Google Fonts.
+triggers:
+  - kami deck
+  - 紙 deck
+  - 纸 deck
+  - paper slides
+  - white paper deck
+  - editorial deck
+  - print-style slides
+  - kami slides
+od:
+  category: brand-deck
+  surface: web
+  mode: deck
+  scenario: marketing
+  audience: founders, researchers, design studios, conference talks
+  tone: editorial, restrained, print-first
+  scale: 6-15 viewport-locked slides
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: false
+  craft:
+    requires:
+      - typographic-rhythm
+      - pixel-discipline
+inputs:
+  - id: brand
+    label: Brand identity (shared across slides)
+  - id: deck_title
+    label: Deck title shown in the per-slide chrome
+  - id: slides
+    label: Ordered list of typed slides (cover · chapter · content · stats · quote · cta · end)
+  - id: language
+    label: Primary language stack
+parameters:
+  language:
+    type: enum
+    values: [en, zh-CN, ja]
+    default: en
+    description: Sets `--serif` to Charter / TsangerJinKai02 / YuMincho respectively.
+outputs:
+  - path: <out>/index.html
+    description: Self-contained kami deck with horizontal swipe pagination.
+capabilities_required:
+  - file-write
+example_prompt: |
+  Build me a 9-slide kami-style internal deck for "Hokuto Research" —
+  a Q1 portfolio review. Cover slide on ink-blue with the firm name.
+  Chapter dividers between Macro, Equities, and Outlook. Three content
+  slides with ink-blue numbered headings. One stats slide showing
+  AUM / IRR / fund count. One closing CTA. End card with the firm
+  signature. Japanese language stack.
+---
+
+# kami-deck
+
+姊妹技能，与 [`kami-landing`](../kami-landing/) 同源。生成一个独立自包含的 HTML 文件：采用 **kami（紙 / 纸）** 设计系统的横向杂志风格滑动翻页演示文稿——印刷节奏、墨蓝强调色、单一字重的衬线体、无斜体、无冷灰色调。
+
+导航模型有意借鉴了 [`guizang-ppt`](../guizang-ppt/) 技能——`←/→` 方向键、滚轮/滑动、ESC 进入概览网格。视觉风格保持 kami 特色：羊皮纸色内容页、墨蓝色封面和章节页，通篇使用衬线体。
+
+> **设计系统唯一权威来源：**
+> [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md)。
+> 交付前请务必阅读。令牌、排版规则和禁用颜色均在其中定义。幻灯片特有的缩放比例（宏比例 × 1.6、字间距 × 0.6 相对于印刷）记录在第 3 节"层级体系"和第 5 节"布局原则 · 幻灯片"中。
+
+## 你将得到什么
+
+- N 张视口大小的幻灯片（最佳数量为 6–15 张），水平排列在一条经过变换的弹性轨道上。
+- **封面页和章节页**：背景切换为墨蓝色（`#1B365D`），搭配象牙色文字——这是唯一使用深色主题的地方。
+- **内容页 / 数据统计页 / 引用页 / 行动号召页**：背景保持羊皮纸色（`#f5f4ed`），字重为 500 的衬线体。
+- **每页幻灯片的状态条**：品牌标识 · 演示文稿标题 · 实时页码计数器（`01 / 09`）。
+- **表格数字**应用于所有计数器、指标、页码。
+- **无珊瑚色**——kami 的强调色是墨蓝色。进度条和圆点导航也使用墨蓝色。
+- **键盘 / 滚轮 / 触控导航**，ESC 概览网格，圆点指示器。
+- **多语言支持**——支持英文/简体中文/日文，通过 `language` 参数在 `:root` 上设置。
+
+## 幻灯片类型
+
+| 类型        | 背景     | 用途                                                    |
+| :---------- | :------- | :------------------------------------------------------ |
+| `cover`     | 墨蓝色   | 开篇标题页。居中衬线标题 + 标语。                       |
+| `chapter`   | 墨蓝色   | 罗马/阿拉伯数字章节分隔页。                              |
+| `content`   | 羊皮纸色 | 章节编号 + 标题 + 正文 + 可选列表项。                   |
+| `stats`     | 羊皮纸色 | 3–4 个指标单元格（数值 · 标签 · 副标题）。              |
+| `quote`     | 羊皮纸色 | 拉引引用，左侧墨蓝色竖线 + 作者署名。                   |
+| `cta`       | 羊皮纸色 | 结尾号召语 + 1–2 个按钮。                               |
+| `end`       | 墨蓝色   | 超大衬线收尾词 + 版权页脚。                             |
+
+一个典型的 11 页演示文稿结构：
+
+```
+1. cover     — 墨蓝色标题页
+2. chapter   — "01 / 为什么是现在"
+3. content   — 宣言
+4. content   — 能力与要点
+5. stats     — 4 个数据
+6. chapter   — "02 / 使用感受"
+7. content   — 方法论
+8. content   — 精选案例
+9. quote     — 推荐语
+10. cta      — 主要行动
+11. end      — 墨蓝色收尾词
+```
+
+## 工作流程
+
+### 1. 收集需求
+
+分两轮询问（不要一次性列出全部问题）：
+
+1. 身份信息轮——名称、标识、标语、地点、版本、语言。
+2. 内容轮——针对每页幻灯片：类型 + 对应字段。
+
+### 2. 选择语言栈
+
+与 [`kami-landing`](../kami-landing/SKILL.md#2-pick-the-language-stack) 相同：
+英文 → Charter，简体中文 → 仓耳今楷02 / 思源宋体，日文 →
+YuMincho。日文还会将 `--olive` 覆盖为 `#4d4c48`，因为 YuMincho 的笔画更细。
+
+### 3. 编写 `index.html`
+
+输出单个文件，所有 CSS 内联。参照 [`example.html`](./example.html) 的结构。
+仅使用 `design-systems/kami/DESIGN.md` 中的令牌。
+
+运行时脚本（键盘 / 滚轮 / 触控导航、圆点指示器、进度条、ESC 概览）应与 [`open-design-landing-deck/scripts/compose.ts`](../open-design-landing-deck/scripts/compose.ts) 中记录的模型保持一致。
+**不要**复用 open-design-landing-deck 的 CSS；其视觉语言是不同的。
+
+### 4. 自检清单
+
+- [ ] 所有封面页 / 章节页 / 结尾页使用墨蓝色背景（`#1B365D`）搭配象牙色文字。其余所有页面使用羊皮纸色。
+- [ ] 墨蓝色元素在任何羊皮纸色页面上的覆盖面积不超过 5%。
+- [ ] 幻灯片标题仅使用字重为 500 的衬线体。无斜体。
+- [ ] 所有数字内容（计数器、指标、页码）均带有 `font-variant-numeric: tabular-nums`。
+- [ ] 按下 `→` / `Space` / 滚动。平滑地向右滑动一个视口；圆点导航同步前进；墨蓝色进度条同步推进。
+- [ ] 按下 `Esc`。出现带有缩略图的概览网格。
+- [ ] 缩放到 1080px 和 640px。封面页/内容页折叠为单列；圆点导航仍然可用。
+- [ ] Lighthouse 检测：对比度 AA 级、font-display swap、无布局偏移。
+
+## 边界
+
+- **不要**引入第二种强调色。只选墨蓝色，或者什么都不选。
+- **不要**在任何地方使用斜体——强调改用墨蓝色表示。
+- **不要**对标签填充使用 `rgba()`；应在羊皮纸色上预混合后使用 `design-systems/kami/DESIGN.md` 第 2 节表格中的纯色十六进制值。
+- **不要**添加路由。这是单文件制品。
+- **不要**复用 Atelier Zero 拼贴图像（即 open-design-landing 视觉体系）。Kami 风格无渐变、少图片，层级关系完全由排版承载。
+
+## 参见
+
+- [`kami-landing`](../kami-landing/) — 长文单页姊妹技能。
+- [`design-systems/kami/DESIGN.md`](../../design-systems/kami/DESIGN.md) — 令牌规范。
+- [`open-design-landing-deck`](../open-design-landing-deck/) — 相同的水平滑动导航模型，不同的视觉语言（Atelier Zero）。
+- 上游来源：[`tw93/kami`](https://github.com/tw93/kami) — 原始 Claude 技能（MIT 许可证）。Kami 的 slides.py 模板记录了本技能所应用的宏比例 × 1.6 / 微比例 × 0.6 的比值。
diff --git a/example.html b/example.html
new file mode 100644
index 0000000..8e50e7e
--- /dev/null
+++ b/example.html
@@ -0,0 +1,1101 @@
+<!DOCTYPE html>
+<html lang='zh-CN'>
+<head>
+<meta charset='utf-8' />
+<meta name='viewport' content='width=device-width, initial-scale=1' />
+<title>开放设计 · kami 幻灯片 — 第 01 卷 / 第 26 期</title>
+<meta name='description' content='开放设计以 kami 幻灯片形式呈现。温暖的羊皮纸底色搭配墨蓝封面与章节页，单一字重的衬线体，无斜体。' />
+<link rel='preconnect' href='https://fonts.googleapis.com' />
+<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
+<link href='https://fonts.googleapis.com/css2?family=Source+Serif+4:wght@400;500&family=Source+Sans+3:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap' rel='stylesheet' />
+<style>
+/*
+ * kami-deck — single-file slide deck stylesheet.
+ *
+ * Kami token language (warm parchment, ink-blue accent, serif at one
+ * weight, no italic) — but laid out as a horizontal swipe deck. Macro
+ * tokens are scaled × ~1.6 vs. print baseline; letter-spacing scaled
+ * × ~0.6 (per design-systems/kami/DESIGN.md §3).
+ *
+ * Navigation model is borrowed from skills/guizang-ppt — same flex
+ * track + transform translateX, same key/wheel/touch handlers.
+ */
+
+:root {
+  /* surface */
+  --parchment: #f5f4ed;
+  --ivory: #faf9f5;
+  --warm-sand: #e8e6dc;
+  --deep-dark: #141413;
+
+  /* brand (single chromatic accent) */
+  --brand: #1B365D;
+  --brand-light: #2D5A8A;
+
+  /* text */
+  --near-black: #141413;
+  --dark-warm: #3d3d3a;
+  --olive: #504e49;
+  --stone: #6b6a64;
+
+  /* border */
+  --border: #e8e6dc;
+  --border-soft: #e5e3d8;
+
+  /* tag tints (solid hex, NEVER rgba) */
+  --tag-08: #EEF2F7;
+  --tag-14: #E4ECF5;
+  --tag-22: #D0DCE9;
+
+  /* type */
+  --serif: 'Source Serif 4', Charter, Georgia, Palatino, 'Times New Roman', serif;
+  --sans: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+  --mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', Consolas, Monaco, monospace;
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body {
+  width: 100%; height: 100%;
+  overflow: hidden;
+  background: var(--parchment);
+  color: var(--near-black);
+  font-family: var(--serif);
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+}
+strong { font-weight: 500; }
+
+/* ---------- deck flex track ---------- */
+#deck {
+  position: fixed; inset: 0;
+  height: 100vh;
+  display: flex;
+  flex-wrap: nowrap;
+  transition: transform 0.9s cubic-bezier(0.77, 0, 0.175, 1);
+  z-index: 5;
+  will-change: transform;
+}
+.slide {
+  width: 100vw; height: 100vh;
+  flex: 0 0 100vw;
+  position: relative;
+  padding: 80px 96px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--parchment);
+  color: var(--near-black);
+}
+.slide.dark {
+  background: var(--brand);
+  color: var(--ivory);
+}
+.slide-inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  align-content: center;
+  gap: 24px;
+  position: relative;
+  min-height: 0;
+}
+
+/* ---------- per-slide chrome strip ---------- */
+.slide-chrome {
+  position: absolute;
+  top: 28px; left: 0; right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 96px;
+  font-family: var(--sans);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.6px;
+  text-transform: uppercase;
+  color: var(--stone);
+  z-index: 4;
+  pointer-events: none;
+}
+.slide.dark .slide-chrome { color: rgba(250, 249, 245, 0.55); }
+.slide-chrome b { color: var(--near-black); font-weight: 500; }
+.slide.dark .slide-chrome b { color: var(--ivory); }
+.slide-chrome .left { display: inline-flex; align-items: center; gap: 12px; }
+.slide-chrome .right {
+  display: inline-flex; align-items: center; gap: 12px;
+  font-variant-numeric: tabular-nums;
+}
+.slide-chrome .mark {
+  width: 22px; height: 22px;
+  border-radius: 50%;
+  border: 1px solid currentColor;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 11px;
+  letter-spacing: 0;
+  opacity: 0.85;
+}
+.slide-foot {
+  position: absolute;
+  bottom: 28px; left: 0; right: 0;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 96px;
+  font-family: var(--mono);
+  font-size: 10.5px;
+  letter-spacing: 0.4px;
+  color: var(--stone);
+  font-variant-numeric: tabular-nums;
+  z-index: 4;
+  pointer-events: none;
+}
+.slide.dark .slide-foot { color: rgba(250, 249, 245, 0.55); }
+.slide-foot .counter {
+  font-family: var(--mono);
+  letter-spacing: 0.04em;
+  color: var(--near-black);
+  background: var(--ivory);
+  padding: 4px 8px;
+  border: 1px solid var(--border);
+  border-radius: 4px;
+}
+.slide.dark .slide-foot .counter {
+  color: var(--ivory);
+  background: rgba(250, 249, 245, 0.08);
+  border-color: rgba(250, 249, 245, 0.22);
+}
+
+/* ---------- progress bar ---------- */
+.deck-progress {
+  position: fixed;
+  left: 0; right: 0; bottom: 0;
+  height: 2px;
+  background: rgba(27, 54, 93, 0.08);
+  z-index: 30;
+}
+.deck-progress .bar {
+  height: 100%;
+  background: var(--brand);
+  width: 0%;
+  transition: width 0.6s cubic-bezier(0.77, 0, 0.175, 1);
+}
+
+/* ---------- dot nav ---------- */
+#nav {
+  position: fixed;
+  left: 50%;
+  bottom: 40px;
+  transform: translateX(-50%);
+  z-index: 30;
+  display: flex;
+  gap: 9px;
+  padding: 8px 14px;
+  border-radius: 999px;
+  background: rgba(245, 244, 237, 0.78);
+  border: 1px solid var(--border);
+  backdrop-filter: blur(8px);
+}
+#nav .dot {
+  width: 7px; height: 7px;
+  border-radius: 50%;
+  background: rgba(27, 54, 93, 0.22);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border: 0;
+  padding: 0;
+}
+#nav .dot:hover {
+  background: rgba(27, 54, 93, 0.5);
+  transform: scale(1.15);
+}
+#nav .dot.active {
+  background: var(--brand);
+  width: 22px;
+  border-radius: 999px;
+}
+
+#hint {
+  position: fixed;
+  bottom: 36px; right: 28px;
+  z-index: 30;
+  font-family: var(--mono);
+  font-size: 10px;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: var(--stone);
+  opacity: 0.75;
+}
+
+/* ---------- COVER slide (dark) ---------- */
+.s-cover .slide-inner {
+  grid-template-columns: 1fr;
+  text-align: left;
+  align-content: center;
+  gap: 28px;
+  max-width: 980px;
+}
+.s-cover .eyebrow {
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 500;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: rgba(250, 249, 245, 0.65);
+}
+.s-cover h1 {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(60px, 7vw, 110px);
+  line-height: 1.05;
+  letter-spacing: -1.2px;
+  color: var(--ivory);
+  margin: 0;
+}
+.s-cover h1 .hl { color: #B5C8DC; }
+.s-cover .tagline {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 21px;
+  color: rgba(250, 249, 245, 0.75);
+  max-width: 50ch;
+  line-height: 1.45;
+}
+.s-cover .meta {
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  font-family: var(--mono);
+  font-size: 11px;
+  letter-spacing: 0.4px;
+  text-transform: uppercase;
+  color: rgba(250, 249, 245, 0.6);
+  font-variant-numeric: tabular-nums;
+}
+.s-cover .meta .rule {
+  width: 56px; height: 1px;
+  background: rgba(250, 249, 245, 0.4);
+  display: inline-block;
+}
+
+/* ---------- CHAPTER divider (dark) ---------- */
+.s-chapter .slide-inner {
+  grid-template-columns: 1fr;
+  text-align: center;
+  align-content: center;
+  gap: 36px;
+}
+.s-chapter .num {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(64px, 8vw, 130px);
+  color: rgba(250, 249, 245, 0.55);
+  letter-spacing: -0.5px;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+.s-chapter h2 {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(48px, 5.4vw, 84px);
+  line-height: 1.1;
+  letter-spacing: -0.6px;
+  color: var(--ivory);
+  margin: 0 auto;
+  max-width: 22ch;
+}
+.s-chapter .lede {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 19px;
+  color: rgba(250, 249, 245, 0.7);
+  max-width: 42ch;
+  margin: 0 auto;
+  line-height: 1.5;
+  letter-spacing: 0.05em;
+}
+
+/* ---------- CONTENT slide ---------- */
+.s-content .slide-inner {
+  grid-template-columns: 1fr 2.4fr;
+  gap: 56px;
+  align-content: center;
+}
+.s-content.layout-full .slide-inner { grid-template-columns: 1fr; max-width: 980px; }
+.s-content .head { display: flex; flex-direction: column; gap: 16px; }
+.s-content .num {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: 0.4px;
+  color: var(--brand);
+  font-variant-numeric: tabular-nums;
+}
+.s-content h2 {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(36px, 4vw, 56px);
+  line-height: 1.1;
+  letter-spacing: 0.4px;
+  color: var(--near-black);
+  margin: 0;
+  max-width: 14ch;
+}
+.s-content .lede {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 15px;
+  color: var(--olive);
+  max-width: 28ch;
+  line-height: 1.5;
+}
+.s-content .body { display: flex; flex-direction: column; gap: 18px; }
+.s-content .body p {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 17px;
+  line-height: 1.55;
+  color: var(--dark-warm);
+  max-width: 64ch;
+}
+.s-content .body p strong { color: var(--near-black); font-weight: 500; }
+.s-content .body code {
+  font-family: var(--mono);
+  font-size: 14px;
+  color: var(--brand);
+  background: var(--tag-08);
+  padding: 1px 6px;
+  border-radius: 3px;
+}
+.s-content ul.dash {
+  list-style: none; padding: 0; margin: 4px 0 0;
+  display: flex; flex-direction: column; gap: 10px;
+}
+.s-content ul.dash li {
+  position: relative; padding-left: 18px;
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 1.55;
+  color: var(--dark-warm);
+}
+.s-content ul.dash li::before {
+  content: '\2013';
+  position: absolute; left: 0;
+  color: var(--brand);
+}
+.s-content .body .tag-row { margin-top: 4px; }
+.s-content .tag {
+  display: inline-block;
+  font-family: var(--sans);
+  font-size: 12px;
+  font-weight: 500;
+  padding: 2px 8px;
+  border-radius: 4px;
+  color: var(--brand);
+  background: var(--tag-14);
+  letter-spacing: 0.4px;
+}
+
+/* ---------- STATS slide ---------- */
+.s-stats .slide-inner { grid-template-columns: 1fr; gap: 48px; }
+.s-stats .head { display: flex; flex-direction: column; gap: 18px; }
+.s-stats .num {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 14px;
+  letter-spacing: 0.4px;
+  color: var(--brand);
+  font-variant-numeric: tabular-nums;
+}
+.s-stats h2 {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(36px, 4.2vw, 60px);
+  line-height: 1.1;
+  letter-spacing: 0.4px;
+  color: var(--near-black);
+  max-width: 22ch;
+  margin: 0;
+}
+.s-stats .grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 0;
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+.s-stats .stat {
+  padding: 32px 24px 28px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  border-right: 1px solid var(--border-soft);
+}
+.s-stats .stat:last-child { border-right: 0; }
+.s-stats .stat .v {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(48px, 6vw, 88px);
+  line-height: 1;
+  letter-spacing: -0.8px;
+  color: var(--brand);
+  font-variant-numeric: tabular-nums;
+}
+.s-stats .stat .l {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 15px;
+  color: var(--near-black);
+  margin-top: 8px;
+}
+.s-stats .stat .s {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 13px;
+  color: var(--olive);
+  line-height: 1.5;
+  max-width: 28ch;
+}
+.s-stats .caption {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--stone);
+  letter-spacing: 0.4px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- QUOTE slide ---------- */
+.s-quote .slide-inner {
+  grid-template-columns: 1fr;
+  max-width: 1080px;
+  gap: 36px;
+  align-content: center;
+}
+.s-quote blockquote {
+  border-left: 2px solid var(--brand);
+  padding: 6px 0 6px 28px;
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(28px, 3.4vw, 42px);
+  line-height: 1.35;
+  color: var(--near-black);
+  margin: 0;
+  letter-spacing: 0.05em;
+  max-width: 36ch;
+}
+.s-quote .author {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  margin-top: 12px;
+}
+.s-quote .author .glyph {
+  width: 44px; height: 44px;
+  border-radius: 50%;
+  background: var(--brand); color: var(--ivory);
+  font-family: var(--serif); font-weight: 500;
+  font-size: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-transform: uppercase;
+  letter-spacing: 0;
+}
+.s-quote .author p {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: 14px;
+  color: var(--near-black);
+}
+.s-quote .author p span {
+  display: block;
+  color: var(--olive);
+  font-weight: 400;
+  margin-top: 2px;
+}
+
+/* ---------- CTA slide ---------- */
+.s-cta .slide-inner {
+  grid-template-columns: 1fr;
+  max-width: 980px;
+  gap: 28px;
+  align-content: center;
+  text-align: left;
+}
+.s-cta .eyebrow {
+  font-family: var(--sans);
+  font-size: 12px; font-weight: 500;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: var(--brand);
+}
+.s-cta h2 {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(48px, 5.4vw, 88px);
+  line-height: 1.05;
+  letter-spacing: -0.6px;
+  color: var(--near-black);
+  margin: 0;
+}
+.s-cta .body {
+  font-family: var(--serif);
+  font-weight: 400;
+  font-size: 17px;
+  color: var(--dark-warm);
+  max-width: 50ch;
+  line-height: 1.55;
+}
+.s-cta .actions {
+  display: inline-flex;
+  gap: 12px;
+  margin-top: 12px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.s-cta .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--sans);
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.4px;
+  padding: 10px 16px;
+  border-radius: 8px;
+  border: 0;
+  cursor: pointer;
+  text-decoration: none;
+}
+.s-cta .btn-primary {
+  background: var(--brand);
+  color: var(--ivory);
+  box-shadow: 0 0 0 1px var(--brand);
+}
+.s-cta .btn-primary:hover { background: var(--brand-light); box-shadow: 0 0 0 1px var(--brand-light); }
+.s-cta .btn-ghost {
+  background: transparent;
+  color: var(--brand);
+  box-shadow: 0 0 0 1px var(--brand);
+}
+.s-cta .btn-ghost:hover { background: var(--tag-08); }
+
+/* ---------- END slide (dark) ---------- */
+.s-end .slide-inner {
+  grid-template-columns: 1fr;
+  align-content: end;
+  padding-bottom: 24px;
+  text-align: left;
+  gap: 18px;
+  max-width: none;
+}
+.s-end .word {
+  font-family: var(--serif);
+  font-weight: 500;
+  font-size: clamp(96px, 16vw, 240px);
+  line-height: 1;
+  letter-spacing: -1.2px;
+  color: var(--ivory);
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+.s-end .word .hl { color: #B5C8DC; }
+.s-end .colophon {
+  border-top: 1px solid rgba(250, 249, 245, 0.22);
+  padding-top: 22px;
+  font-family: var(--sans);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 1.2px;
+  text-transform: uppercase;
+  color: rgba(250, 249, 245, 0.65);
+  font-variant-numeric: tabular-nums;
+}
+
+/* ---------- ESC overview ---------- */
+#overview {
+  position: fixed; inset: 0;
+  z-index: 100;
+  background: rgba(245, 244, 237, 0.96);
+  backdrop-filter: blur(12px);
+  display: none;
+  overflow-y: auto;
+  padding: 60px 56px;
+}
+#overview .ov-head {
+  display: flex; justify-content: space-between; align-items: baseline;
+  margin-bottom: 32px;
+  font-family: var(--sans); font-size: 11px;
+  letter-spacing: 1.2px; text-transform: uppercase;
+  color: var(--stone);
+  font-variant-numeric: tabular-nums;
+}
+#overview .ov-head b { color: var(--near-black); font-weight: 500; }
+#overview .ov-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+  gap: 22px;
+  max-width: 1280px;
+  margin: 0 auto;
+}
+#overview .ov-card {
+  cursor: pointer;
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid var(--border);
+  transition: border-color 0.2s, transform 0.2s;
+  background: var(--ivory);
+}
+#overview .ov-card:hover { border-color: var(--brand); transform: translateY(-2px); }
+#overview .ov-card.active { border-color: var(--brand); border-width: 2px; }
+#overview .ov-thumb {
+  width: 100%;
+  aspect-ratio: 16 / 10;
+  overflow: hidden;
+  position: relative;
+  pointer-events: none;
+  background: var(--parchment);
+}
+#overview .ov-thumb .clone {
+  width: 100vw; height: 100vh;
+  transform: scale(0.18);
+  transform-origin: top left;
+  position: absolute;
+  top: 0; left: 0;
+  pointer-events: none;
+}
+#overview .ov-label {
+  padding: 8px 12px;
+  font-family: var(--mono); font-size: 10px;
+  letter-spacing: 0.4px; text-transform: uppercase;
+  color: var(--stone);
+  display: flex; justify-content: space-between; align-items: center;
+  font-variant-numeric: tabular-nums;
+}
+#overview .ov-label b { color: var(--near-black); font-weight: 500; }
+
+/* ---------- responsive ---------- */
+@media (max-width: 1080px) {
+  .slide { padding: 64px 56px; }
+  .slide-chrome, .slide-foot { padding: 0 56px; }
+  .s-content .slide-inner { grid-template-columns: 1fr; gap: 28px; }
+}
+@media (max-width: 640px) {
+  .slide { padding: 44px 28px; }
+  .slide-chrome, .slide-foot { padding: 0 28px; font-size: 9.5px; letter-spacing: 0.6px; }
+  #hint { display: none; }
+}
+</style>
+</head>
+<body>
+
+<div id='deck'>
+
+  <!-- ===== 01 · COVER (dark) ===== -->
+  <section class='slide s-cover dark' data-slide-kind='cover'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <span class='eyebrow'>开源设计工作室 · 第 01 号</span>
+      <h1>在温暖的<span class='hl'>纸上</span>设计智能。</h1>
+      <p class='tagline'>面向编辑文档与幻灯片的开源工作室——由你的编程智能体排版。</p>
+      <div class='meta'>
+        <span>柏林 · 52.5200° N · 13.4050° E</span>
+        <span class='rule'></span>
+        <span>MMXXVI · Apache-2.0</span>
+      </div>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>01 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 02 · CHAPTER (dark) ===== -->
+  <section class='slide s-chapter dark' data-slide-kind='chapter'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <p class='num'>01</p>
+      <h2>为什么设计还需要另一种工具。</h2>
+      <p class='lede'>因为最强大的智能体已经生活在你的笔记本电脑上——它们值得一个真正的工作流，而不是一个聊天窗口。</p>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>02 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 03 · CONTENT ===== -->
+  <section class='slide s-content' data-slide-kind='content'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <div class='head'>
+        <p class='num'>01.1</p>
+        <h2>它是什么。</h2>
+        <p class='lede'>为你已信任的智能体量身打造的一个本地优先的设计工作室。</p>
+      </div>
+      <div class='body'>
+        <p>
+          Open Design 是 <strong>Anthropic 的 Claude Design 的开源替代方案</strong>。它在你的笔记本电脑上运行。你的智能体读取一个包含 <code>SKILL.md</code> 文件的文件夹和一个包含 <code>DESIGN.md</code> 系统的文件夹，然后生成真实的文件——着陆页、幻灯片、白皮书、仪表盘。
+        </p>
+        <ul class='dash'>
+          <li>文件，而非不透明的提示词——每项技能都是一个 Markdown 文件夹。</li>
+          <li>确定性的视觉方向，而非随机生成。</li>
+          <li>沙箱化 iframe 预览、真实 <code>cwd</code>、可导出的工件。</li>
+        </ul>
+        <div class='tag-row'>
+          <span class='tag'>Apache-2.0</span>
+          <span class='tag'>本地优先</span>
+          <span class='tag'>自带密钥</span>
+        </div>
+      </div>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>03 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 04 · CONTENT ===== -->
+  <section class='slide s-content' data-slide-kind='content'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <div class='head'>
+        <p class='num'>01.2</p>
+        <h2>使用体验如何。</h2>
+        <p class='lede'>编辑规范，而非聊天窗口式的即兴发挥。</p>
+      </div>
+      <div class='body'>
+        <p>
+          一个新项目从一份 30 秒的问题表单开始：品牌、受众、规模、语言。智能体从五种视觉方向中选定一种，锁定字体栈，然后将工件写入磁盘。<strong>你可以阅读它触碰过的每一个文件。</strong>
+        </p>
+        <p>
+          每一次迭代都在一个带有注释模式锚点的沙箱化 iframe 中审查，锚点覆盖每个可编辑元素。重复运行是确定性的——相同的简报，相同的输出。
+        </p>
+        <ul class='dash'>
+          <li>简报 → 30 秒问题表单锁定品牌 + 受众 + 规模。</li>
+          <li>方向 → 以 OKLch 颜色空间呈现的 5 种视觉方向 + 锁定字体栈。</li>
+          <li>工件 → 磁盘上的真实文件、沙箱化预览、注释锚点。</li>
+        </ul>
+      </div>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>04 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 05 · STATS ===== -->
+  <section class='slide s-stats' data-slide-kind='stats'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <div class='head'>
+        <p class='num'>01.3</p>
+        <h2>数据一览。</h2>
+      </div>
+      <div class='grid'>
+        <div class='stat'>
+          <div class='v'>31</div>
+          <div class='l'>技能</div>
+          <div class='s'>基于文件，即刻可用，即插即用。</div>
+        </div>
+        <div class='stat'>
+          <div class='v'>72</div>
+          <div class='l'>设计系统</div>
+          <div class='s'>可移植的 <code>DESIGN.md</code> 令牌——Linear、Vercel、Stripe、kami……</div>
+        </div>
+        <div class='stat'>
+          <div class='v'>12</div>
+          <div class='l'>智能体 CLI</div>
+          <div class='s'>在 <code>$PATH</code> 上自动检测；即时切换后端。</div>
+        </div>
+        <div class='stat'>
+          <div class='v'>3</div>
+          <div class='l'>命令</div>
+          <div class='s'>从 <code>git clone</code> 到第一个工件，全部本地完成。</div>
+        </div>
+      </div>
+      <p class='caption'>Open Design v0.2.0 · Apache-2.0 · MMXXVI · 数据截至第 26 期。</p>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>05 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 06 · CHAPTER (dark) ===== -->
+  <section class='slide s-chapter dark' data-slide-kind='chapter'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <p class='num'>02</p>
+      <h2>下一步交付什么。</h2>
+      <p class='lede'>2026 年第二季度——打包、多租户令牌、守护进程加固。路线图公开透明。</p>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>06 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 07 · QUOTE ===== -->
+  <section class='slide s-quote' data-slide-kind='quote'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <blockquote>
+        Open Design 帮助我们把模糊的 AI 想法转化为一个锐利、可信且真正新颖的视觉系统——全程无需打开一个聊天窗口。
+      </blockquote>
+      <div class='author'>
+        <span class='glyph'>m</span>
+        <p>
+          Mina Kovac
+          <span>创意总监 · North Form，柏林</span>
+        </p>
+      </div>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>07 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 08 · CTA ===== -->
+  <section class='slide s-cta' data-slide-kind='cta'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <span class='eyebrow'>开启对话 · 第 03 号</span>
+      <h2>让我们共建一些开放且视觉难忘的东西。</h2>
+      <p class='body'>
+        在 GitHub 上标星仓库，在 issues 中留言，或者今晚就运行 <code>pnpm tools-dev</code>。三条命令，这个循环就是你的了。
+      </p>
+      <div class='actions'>
+        <a class='btn btn-primary' href='https://github.com/nexu-io/open-design'>在 GitHub 上标星</a>
+        <a class='btn btn-ghost' href='https://github.com/nexu-io/open-design/issues'>提交 issue</a>
+      </div>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>08 / 09</span>
+    </div>
+  </section>
+
+  <!-- ===== 09 · END (dark) ===== -->
+  <section class='slide s-end dark' data-slide-kind='end'>
+    <div class='slide-chrome'>
+      <span class='left'><span class='mark'>kami</span> <b>开放设计</b> · 第 01 卷 / 第 26 期</span>
+      <span class='right'>开放设计 · kami 幻灯片</span>
+    </div>
+    <div class='slide-inner'>
+      <div class='word'>开放 <span class='hl'>设计。</span></div>
+      <p class='colophon'>Apache-2.0 · MMXXVI · 柏林 · 52.5200° N · 13.4050° E · 以 kami 编排</p>
+    </div>
+    <div class='slide-foot'>
+      <span>柏林 · MMXXVI</span>
+      <span class='counter'>09 / 09</span>
+    </div>
+  </section>
+
+</div>
+
+<div id='nav'></div>
+<div id='hint'>← / → · esc · 滑动</div>
+<div class='deck-progress'><div class='bar'></div></div>
+
+<script>
+(function () {
+  var deck = document.getElementById('deck');
+  if (!deck) return;
+  var slides = Array.prototype.slice.call(deck.querySelectorAll('.slide'));
+  var nav = document.getElementById('nav');
+  var bar = document.querySelector('.deck-progress .bar');
+  var total = slides.length;
+  var idx = 0, lock = false;
+
+  deck.style.width = (total * 100) + 'vw';
+
+  slides.forEach(function (s, i) {
+    var b = document.createElement('button');
+    b.className = 'dot';
+    b.dataset.i = i;
+    b.setAttribute('aria-label', '幻灯片 ' + (i + 1));
+    b.onclick = function () { go(i); };
+    nav.appendChild(b);
+  });
+
+  /* Unthrottled state update. The interaction throttle (`lock`) only
+     guards wheel/key/touch so a fast input burst doesn't overshoot the
+     transition; host- and observer-driven sync must bypass it, otherwise
+     a host message or restoreInitialSlide that lands inside the 700ms
+     window after go(0) silently no-ops and the deck stays on slide 1
+     while the host counter advances. */
+  function applySlide(n) {
+    idx = Math.max(0, Math.min(total - 1, n));
+    deck.style.transform = 'translateX(' + (-idx * 100) + 'vw)';
+    /* load-bearing: .slide.active is read by Open Design's host bridge
+       (src/runtime/srcdoc.ts findActiveByClass) to drive the slide
+       counter. No CSS targets it — do not remove. */
+    slides.forEach(function (s, i) { s.classList.toggle('active', i === idx); });
+    nav.querySelectorAll('.dot').forEach(function (d, i) {
+      d.classList.toggle('active', i === idx);
+    });
+    if (bar) bar.style.width = (((idx + 1) / total) * 100) + '%';
+  }
+
+  function go(n) {
+    if (lock) return;
+    applySlide(n);
+    lock = true;
+    setTimeout(function () { lock = false; }, 700);
+  }
+
+  /* ESC overview */
+  var overviewOn = false;
+  var ov = document.createElement('div');
+  ov.id = 'overview';
+  document.body.appendChild(ov);
+
+  function buildOverview() {
+    ov.innerHTML = '';
+    var head = document.createElement('div');
+    head.className = 'ov-head';
+    head.innerHTML = '<span><b>幻灯片概览</b> · 按 esc 关闭</span><span>' +
+      String(idx + 1).padStart(2, '0') + ' / ' + String(total).padStart(2, '0') + '</span>';
+    ov.appendChild(head);
+    var grid = document.createElement('div');
+    grid.className = 'ov-grid';
+    slides.forEach(function (s, i) {
+      var card = document.createElement('div');
+      card.className = 'ov-card' + (i === idx ? ' active' : '');
+      var thumb = document.createElement('div');
+      thumb.className = 'ov-thumb';
+      var clone = s.cloneNode(true);
+      clone.className = clone.className + ' clone';
+      clone.style.transform = 'scale(0.18)';
+      thumb.appendChild(clone);
+      var label = document.createElement('div');
+      label.className = 'ov-label';
+      label.innerHTML = '<b>' + String(i + 1).padStart(2, '0') + '</b><span>' +
+        (s.dataset.slideKind || '') + '</span>';
+      card.appendChild(thumb);
+      card.appendChild(label);
+      card.onclick = function () { toggleOverview(); go(i); };
+      grid.appendChild(card);
+    });
+    ov.appendChild(grid);
+  }
+
+  function toggleOverview() {
+    overviewOn = !overviewOn;
+    if (overviewOn) { buildOverview(); ov.style.display = 'block'; }
+    else { ov.style.display = 'none'; }
+  }
+
+  addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') { e.preventDefault(); toggleOverview(); return; }
+    if (overviewOn) return;
+    if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ' || e.key === 'ArrowDown') {
+      e.preventDefault(); go(idx + 1);
+    } else if (e.key === 'ArrowLeft' || e.key === 'PageUp' || e.key === 'ArrowUp') {
+      e.preventDefault(); go(idx - 1);
+    } else if (e.key === 'Home') {
+      e.preventDefault(); go(0);
+    } else if (e.key === 'End') {
+      e.preventDefault(); go(total - 1);
+    }
+  });
+
+  var wheelTO = null, wheelAcc = 0;
+  addEventListener('wheel', function (e) {
+    if (overviewOn) return;
+    wheelAcc += e.deltaY + e.deltaX;
+    if (Math.abs(wheelAcc) > 60) {
+      go(idx + (wheelAcc > 0 ? 1 : -1));
+      wheelAcc = 0;
+    }
+    clearTimeout(wheelTO);
+    wheelTO = setTimeout(function () { wheelAcc = 0; }, 150);
+  }, { passive: true });
+
+  var tx = 0, ty = 0;
+  addEventListener('touchstart', function (e) {
+    tx = e.touches[0].clientX; ty = e.touches[0].clientY;
+  }, { passive: true });
+  addEventListener('touchend', function (e) {
+    if (overviewOn) return;
+    var dx = e.changedTouches[0].clientX - tx;
+    var dy = e.changedTouches[0].clientY - ty;
+    if (Math.abs(dx) > 50 && Math.abs(dx) > Math.abs(dy)) {
+      go(idx + (dx < 0 ? 1 : -1));
+    }
+  }, { passive: true });
+
+  /* Host-driven navigation: Open Design's host bridge classifies this deck
+     as class-driven (because go() toggles .slide.active) but the visible
+     slide is moved by deck.style.transform, which the bridge can't drive.
+     Two cooperating handlers keep the deck in sync with the host:
+       1. An od:slide message listener routes host nav through go() and
+          calls stopImmediatePropagation() so the bridge's own listener
+          (registered after this one) doesn't run a second time and
+          overshoot by re-reading the freshly-toggled .active class.
+       2. A MutationObserver on each slide watches .active and pulls the
+          deck transform onto the active index for class changes that
+          don't come through a message — chiefly the bridge's
+          restoreInitialSlide path, which calls setActive() directly. */
+  addEventListener('message', function (e) {
+    var data = e && e.data;
+    if (!data || data.type !== 'od:slide') return;
+    if (typeof e.stopImmediatePropagation === 'function') e.stopImmediatePropagation();
+    if (data.action === 'go' && typeof data.index === 'number') applySlide(data.index);
+    else if (data.action === 'next') applySlide(idx + 1);
+    else if (data.action === 'prev') applySlide(idx - 1);
+    else if (data.action === 'first') applySlide(0);
+    else if (data.action === 'last') applySlide(total - 1);
+  });
+
+  if (typeof MutationObserver !== 'undefined') {
+    var syncFromActiveClass = function () {
+      for (var i = 0; i < slides.length; i++) {
+        if (slides[i].classList && slides[i].classList.contains('active') && i !== idx) {
+          applySlide(i);
+          return;
+        }
+      }
+    };
+    var mo = new MutationObserver(syncFromActiveClass);
+    slides.forEach(function (s) { mo.observe(s, { attributes: true, attributeFilter: ['class'] }); });
+  }
+
+  applySlide(0);
+})();
+</script>
+</body>
+</html>