diff --git a/config/external-sources.lock.json b/config/external-sources.lock.json
index f59a3f47..b9ed4e72 100644
--- a/config/external-sources.lock.json
+++ b/config/external-sources.lock.json
@@ -6,8 +6,8 @@
       "repo": "https://github.com/Nutlope/hallmark.git",
       "ref": "main",
       "adapter": "claude-skill",
-      "commit": "8f6969f8922caabde9de1784959eae11ddf68073",
-      "syncedAt": "2026-10-29T15:25:46Z"
+      "commit": "4f6a46c6dc325d40ab268c93e25c7b96676ebccd",
+      "syncedAt": "2026-10-30T16:00:00Z"
     },
     {
       "id": "docx",
@@ -150,8 +150,8 @@
       "repo": "https://github.com/shadcn-ui/ui.git",
       "ref": "main",
       "adapter": "claude-skill",
-      "commit": "96da9cc7f1aa10580a3741664e2a77c721206c00",
-      "syncedAt": "2026-10-28T01:57:49Z"
+      "commit": "b8d7baa15b1dca5716f13153e63795fc3d741f6b",
+      "syncedAt": "2026-10-30T16:00:00Z"
     },
     {
       "id": "frontend-slides",
@@ -168,8 +168,8 @@
       "repo": "https://github.com/op7418/guizang-ppt-skill.git",
       "ref": "main",
       "adapter": "claude-skill",
-      "commit": "c91369c449d34755d320a8b81d0734000d99d1ab",
-      "syncedAt": "2026-08-08T16:00:01Z"
+      "commit": "93d21bf4a73a851907a6eb00acbf30618236667a",
+      "syncedAt": "2026-10-30T16:00:00Z"
     },
     {
       "id": "html-ppt",
@@ -186,8 +186,8 @@
       "repo": "https://github.com/hugohe3/ppt-master.git",
       "ref": "main",
       "adapter": "claude-skill",
-      "commit": "15baa7c570f12c78cd9ac6ead897724571e32e87",
-      "syncedAt": "2026-10-29T16:00:00Z"
+      "commit": "5e8856be0da8e6bc85c4aa28acc614478f7b7137",
+      "syncedAt": "2026-10-30T16:00:00Z"
     },
     {
       "id": "grill-me",
@@ -267,8 +267,8 @@
       "repo": "https://github.com/vercel/next.js.git",
       "ref": "canary",
       "adapter": "skill-collection",
-      "commit": "79107ebd94e53c69865c1a49ac734ba8004491ba",
-      "syncedAt": "2026-10-29T16:00:00Z"
+      "commit": "7571895249a22086367a12ddec90fae97bac067d",
+      "syncedAt": "2026-10-30T16:00:00Z"
     },
     {
       "id": "shuorenhua",
diff --git a/plugins/codex/plugins/guizang-ppt-skill/README.en.md b/plugins/codex/plugins/guizang-ppt-skill/README.en.md
index e19c1646..8502a309 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/README.en.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/README.en.md
@@ -86,11 +86,11 @@ Beyond Claude Code / Codex, you can also use Guizang PPT Skill on these platform
 - 📐 **Horizontal swipe navigation**: ← → arrows / scroll wheel / touch swipe / bottom dots / ESC for index
 - 🧩 **Style A 10 layouts**: cover, divider, big numbers, image/text, image grid, pipeline, comparison, and more
 - 🧱 **Style B 22 locked layouts**: Cover, Statement, KPI Tower, Loop Diagram, Duo Compare, Image Hero, Closing Manifesto, and more
-- 🎨 **Curated theme presets**: 5 electronic-ink themes for Style A, 4 Swiss anchor-color themes for Style B
+- 🎨 **Curated theme presets**: 5 electronic-ink themes for Style A, 4 Swiss anchor-color themes for Style B; a brand color becomes a constrained brand theme generated with color science
 - 🖼 **Optional Codex image flow**: generate documentary photos, infographics, flow diagrams, system maps, and UI scenes with GPT-Image 2.0 / GPT-M 2.0, then insert them at template-safe ratios
 - 📰 **Social covers**: generate 21:9 WeChat cover images, 1:1 share cards, 3:4 Xiaohongshu covers, video thumbnails, and related variants
 - 🎤 **Presenter mode**: dual-window audience output, 16:9 current/next previews, speaker notes, timing and rehearsal, auto advance, laser pointer, circles, and live recovery controls
-- 📴 **Low-power static mode**: press `B` to turn WebGL / canvas animation into static visuals
+- 📴 **Low-power static mode**: press `B` to turn WebGL / canvas animation into static visuals; on slow machines the background lowers its resolution automatically and freezes to a still frame if needed
 - 📄 **Single HTML file** — no build, no server, open directly in the browser
 
 ## Fits / Doesn't fit
@@ -327,7 +327,7 @@ guizang-ppt-skill/
 
 ## Theme presets
 
-Pick from `references/themes.md`. **Custom hex values are not allowed** — protecting the aesthetic matters more than freedom of choice.
+Pick from `references/themes.md`. **Don't write hex values by hand** — protecting the aesthetic matters more than freedom of choice. Every theme's text, rule and small accent-text colors are derived with the same contrast rules (WCAG + APCA).
 
 ### Style A Editorial Themes
 
@@ -339,11 +339,13 @@ Pick from `references/themes.md`. **Custom hex values are not allowed** — prot
 | <img src="https://github.com/user-attachments/assets/dfea080e-e916-417e-93cd-0a3628de84ca" width="260" alt="Kraft Paper theme preview"> | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgic, humanist, literary, indie zines. |
 | <img src="https://github.com/user-attachments/assets/f3705592-9a72-4dbc-9818-df3aea61bc75" width="260" alt="Dune theme preview"> | 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Art, design, creative, fashion, gallery-like decks. |
 
-Switching themes only requires replacing the 6 variables at the top of `template.html`'s `:root{}` block — all other CSS flows through `var(--...)`.
+To switch themes, set the theme id on the template's first line, e.g. `<html data-theme="indigo-porcelain">`. All themes are built into the template.
+
+When the user gives a brand or logo color, run `node scripts/gz-theme.mjs brand "#4D6BFE" --family magazine` (`--family swiss` for Style B) and paste the printed theme into the deck. The script pulls the color into the lightness and chroma range the style allows and refuses it if it cannot meet the readability floors — fall back to a preset then.
 
 ### Style B Swiss Themes
 
-Pick from `references/themes-swiss.md`. **Custom hex values are not allowed** here either.
+Pick from `references/themes-swiss.md`. **Don't write hex values by hand** here either; brand colors go through the same script.
 
 | Preview | Theme | Anchor color and best for |
 |---------|-------|---------------------------|
@@ -379,7 +381,7 @@ If the user asks for a Swiss-style deck without specifying color, default to Int
 - Add more Swiss layout validation rules
 - Improve screenshot redesign and infographic generation workflows
 - Prepare marketplace-specific variants such as WorkBuddy
-- Add more curated theme packs while keeping custom colors restricted
+- Add more curated theme packs; brand colors stay constrained
 
 ## FAQ
 
@@ -387,7 +389,7 @@ If the user asks for a Swiss-style deck without specifying color, default to Int
 The main output is HTML. You can present it in a browser, screenshot it, or record it. PPTX conversion can be done as a separate workflow, but it is not the core path today.
 
 **Why are custom colors not allowed?**
-The skill is designed for stable visual output. Arbitrary colors often break the system, so decks must use curated presets.
+The skill is designed for stable visual output. Arbitrary colors often break the system, so decks must use curated presets. For a brand color, generate a theme with `scripts/gz-theme.mjs`: it constrains lightness and chroma per style and checks contrast for every text role.
 
 **Can I add my own layout?**
 Yes. Style A layouts can be extended in `references/layouts.md`. Style B is stricter: update `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md`, and the validator together.
@@ -414,7 +416,7 @@ Bugs, layout issues, new layout requests — Issues and PRs welcome. Prioritize:
 - Presenter runtime changes must land in both templates and pass `scripts/check-presenter-runtime-sync.mjs`; CI rejects CSS / JavaScript drift
 - Presenter-note or live-behavior changes must also update `references/presenter-mode.md`, `references/checklist.md`, and `scripts/validate-presenter-mode.mjs`
 - Log pitfalls into `checklist.md` at the matching P0 / P1 / P2 / P3 tier
-- New theme colors go into `themes.md` with a recommended use case
+- Themes, type sizes, fonts and background effects come from a shared design system: the templates' `GZ:FONTS` / `GZ:TOKENS` / `GZ:EFFECTS` blocks and the `GZ:THEMES` blocks in `themes*.md` are generated — don't edit them by hand; open an issue for new theme colors or type changes
 
 ## License
 
diff --git a/plugins/codex/plugins/guizang-ppt-skill/README.md b/plugins/codex/plugins/guizang-ppt-skill/README.md
index 15fef041..07eeda15 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/README.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/README.md
@@ -88,11 +88,11 @@ Guizang PPT Skill 的持续迭代获得 **360 安全龙虾**、**Kimi work**、*
 - 📐 **横向左右翻页**:键盘 ← → / 滚轮 / 触屏滑动 / 底部圆点 / ESC 索引
 - 🧩 **Style A 10 种布局**:封面、章节、数据大字报、图文、图片网格、Pipeline、对比等
 - 🧱 **Style B 22 种锁定版式**:Cover、Statement、KPI Tower、Loop Diagram、Duo Compare、Image Hero、Closing Manifesto 等
-- 🎨 **主题色预设**:Style A 5 套电子墨水主题,Style B 4 套瑞士高饱和锚点色
+- 🎨 **主题色预设**:Style A 5 套电子墨水主题,Style B 4 套瑞士高饱和锚点色;给品牌色时按色彩科学生成受约束的品牌主题
 - 🖼 **Codex 可选配图流程**:可用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、系统关系图、UI 情景图,并按模板比例插入
 - 📰 **多平台封面**:可用同一套视觉规则生成公众号 21:9、公众号分享卡 1:1、小红书 3:4、视频号横版等封面
 - 🎤 **演讲者模式**:双窗口观众屏、当前页/下一页 16:9 预览、演讲备注、计时排练、自动翻页、激光笔、圈选和现场故障恢复
-- 📴 **低性能静态模式**:按 `B` 可关闭 WebGL / canvas 动画,让动态内容退回静态背景
+- 📴 **低性能静态模式**:按 `B` 可关闭 WebGL / canvas 动画,让动态内容退回静态背景;电脑带不动时背景会自动降分辨率,再不行就定格成静态
 - 📄 **单文件 HTML**:不需要构建、不需要服务器,浏览器直接打开
 
 ## 适合 / 不适合
@@ -328,7 +328,7 @@ guizang-ppt-skill/
 
 ## 主题色预设
 
-从 `references/themes.md` 里选一套——**不允许自定义 hex 值**,保护美学比给自由更重要。
+从 `references/themes.md` 里选一套——**不允许随手写 hex 值**,保护美学比给自由更重要。所有主题的文字色、线条色和强调色小字都按同一套对比度规则(WCAG + APCA)算出来。
 
 ### Style A 电子杂志主题
 
@@ -340,11 +340,13 @@ guizang-ppt-skill/
 | <img src="https://github.com/user-attachments/assets/dfea080e-e916-417e-93cd-0a3628de84ca" width="260" alt="牛皮纸主题预览"> | 🍂 **牛皮纸** | `#2a1e13` / `#eedfc7`。怀旧、人文、阅读、历史、文学分享。 |
 | <img src="https://github.com/user-attachments/assets/f3705592-9a72-4dbc-9818-df3aea61bc75" width="260" alt="沙丘主题预览"> | 🌙 **沙丘** | `#1f1a14` / `#f0e6d2`。艺术、设计、创意、时尚和画廊感内容。 |
 
-切换主题只需替换 `template.html` 开头 `:root{}` 里的 6 行变量,其他 CSS 全走 `var(--...)`。
+切换主题只需把模板第一行 `<html data-theme="…">` 改成主题 id,例如 `data-theme="indigo-porcelain"`,全部主题都已内置在模板里。
+
+用户给了品牌色或 logo 主色时,运行 `node scripts/gz-theme.mjs brand "#4D6BFE" --family magazine`(瑞士风用 `--family swiss`),把输出的主题贴进 deck。脚本会把品牌色收进这套风格允许的明度和彩度范围,达不到可读性要求就拒绝,这时回到预设。
 
 ### Style B 瑞士主题
 
-瑞士风从 `references/themes-swiss.md` 里选一套,同样**不允许自定义 hex 值**。
+瑞士风从 `references/themes-swiss.md` 里选一套,同样**不允许随手写 hex 值**,品牌色走同一个脚本。
 
 | 预览 | 主题 | 锚点色与适合场景 |
 |------|------|------------------|
@@ -380,7 +382,7 @@ guizang-ppt-skill/
 - 增加更多瑞士风版式校验规则
 - 优化截图再设计和信息图生成工作流
 - 整理 WorkBuddy 等平台上架版本
-- 增加更多主题包,但继续限制自定义颜色
+- 增加更多主题包,品牌色继续走受约束生成
 
 ## FAQ
 
@@ -388,7 +390,7 @@ guizang-ppt-skill/
 当前核心交付是 HTML。你可以用浏览器演示、截图或录屏。如果需要 PPTX,建议把 HTML 页面作为视觉稿再转换,但这不是当前主流程。
 
 **为什么不允许自定义颜色?**
-这个 Skill 的重点是稳定产出。自由选色很容易破坏整体风格,所以只允许从预设主题里选。
+这个 Skill 的重点是稳定产出。自由选色很容易破坏整体风格,所以只允许从预设主题里选。需要品牌色时用 `scripts/gz-theme.mjs` 生成,它会按风格约束明度和彩度,并检查每个文字角色的对比度。
 
 **我能加自己的版式吗?**
 可以。Style A 可以在 `references/layouts.md` 里扩展；Style B 更严格,需要同步更新 `template-swiss.html`、`layouts-swiss.md`、`swiss-layout-lock.md` 和校验器。
@@ -415,7 +417,7 @@ Bug、排版问题、新布局需求——欢迎开 Issue 或 PR。改动请优
 - 演讲者运行时必须同时更新两套模板,并运行 `scripts/check-presenter-runtime-sync.mjs`；CI 会拦截两份模板的 CSS / JavaScript 漂移
 - 演讲备注或现场行为变化时,同步更新 `references/presenter-mode.md`、`references/checklist.md` 和 `scripts/validate-presenter-mode.mjs`
 - 把踩过的坑写到 `checklist.md` 对应的 P0 / P1 / P2 / P3 级别
-- 新主题色进 `themes.md` 并给出适合的场景
+- 主题、字号、字体和背景特效来自共享设计系统,模板里 `GZ:FONTS` / `GZ:TOKENS` / `GZ:EFFECTS` 区块和 `themes*.md` 的 `GZ:THEMES` 区块是生成的,不要手改;新主题色或字号调整请提 Issue
 
 ## License
 
diff --git a/plugins/codex/plugins/guizang-ppt-skill/THIRD_PARTY_SOURCE.json b/plugins/codex/plugins/guizang-ppt-skill/THIRD_PARTY_SOURCE.json
index 194b50f5..b086f63a 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/THIRD_PARTY_SOURCE.json
+++ b/plugins/codex/plugins/guizang-ppt-skill/THIRD_PARTY_SOURCE.json
@@ -2,8 +2,8 @@
   "sourceId": "guizang-ppt-skill",
   "repo": "https://github.com/op7418/guizang-ppt-skill.git",
   "ref": "main",
-  "commit": "c91369c449d34755d320a8b81d0734000d99d1ab",
+  "commit": "93d21bf4a73a851907a6eb00acbf30618236667a",
   "adapter": "claude-skill",
   "sourcePath": ".",
-  "syncedAt": "2026-08-08T16:00:01Z"
+  "syncedAt": "2026-10-30T16:00:00Z"
 }
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/.gitignore b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/.gitignore
index f7cf2dbb..f9c4860b 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/.gitignore
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/.gitignore
@@ -1,2 +1,5 @@
 .DS_Store
 *.backup
+.gz-visual/
+.gz-smoke/
+.gz-dbg/
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.en.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.en.md
index e19c1646..8502a309 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.en.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.en.md
@@ -86,11 +86,11 @@ Beyond Claude Code / Codex, you can also use Guizang PPT Skill on these platform
 - 📐 **Horizontal swipe navigation**: ← → arrows / scroll wheel / touch swipe / bottom dots / ESC for index
 - 🧩 **Style A 10 layouts**: cover, divider, big numbers, image/text, image grid, pipeline, comparison, and more
 - 🧱 **Style B 22 locked layouts**: Cover, Statement, KPI Tower, Loop Diagram, Duo Compare, Image Hero, Closing Manifesto, and more
-- 🎨 **Curated theme presets**: 5 electronic-ink themes for Style A, 4 Swiss anchor-color themes for Style B
+- 🎨 **Curated theme presets**: 5 electronic-ink themes for Style A, 4 Swiss anchor-color themes for Style B; a brand color becomes a constrained brand theme generated with color science
 - 🖼 **Optional Codex image flow**: generate documentary photos, infographics, flow diagrams, system maps, and UI scenes with GPT-Image 2.0 / GPT-M 2.0, then insert them at template-safe ratios
 - 📰 **Social covers**: generate 21:9 WeChat cover images, 1:1 share cards, 3:4 Xiaohongshu covers, video thumbnails, and related variants
 - 🎤 **Presenter mode**: dual-window audience output, 16:9 current/next previews, speaker notes, timing and rehearsal, auto advance, laser pointer, circles, and live recovery controls
-- 📴 **Low-power static mode**: press `B` to turn WebGL / canvas animation into static visuals
+- 📴 **Low-power static mode**: press `B` to turn WebGL / canvas animation into static visuals; on slow machines the background lowers its resolution automatically and freezes to a still frame if needed
 - 📄 **Single HTML file** — no build, no server, open directly in the browser
 
 ## Fits / Doesn't fit
@@ -327,7 +327,7 @@ guizang-ppt-skill/
 
 ## Theme presets
 
-Pick from `references/themes.md`. **Custom hex values are not allowed** — protecting the aesthetic matters more than freedom of choice.
+Pick from `references/themes.md`. **Don't write hex values by hand** — protecting the aesthetic matters more than freedom of choice. Every theme's text, rule and small accent-text colors are derived with the same contrast rules (WCAG + APCA).
 
 ### Style A Editorial Themes
 
@@ -339,11 +339,13 @@ Pick from `references/themes.md`. **Custom hex values are not allowed** — prot
 | <img src="https://github.com/user-attachments/assets/dfea080e-e916-417e-93cd-0a3628de84ca" width="260" alt="Kraft Paper theme preview"> | 🍂 **Kraft Paper** | `#2a1e13` / `#eedfc7`. Nostalgic, humanist, literary, indie zines. |
 | <img src="https://github.com/user-attachments/assets/f3705592-9a72-4dbc-9818-df3aea61bc75" width="260" alt="Dune theme preview"> | 🌙 **Dune** | `#1f1a14` / `#f0e6d2`. Art, design, creative, fashion, gallery-like decks. |
 
-Switching themes only requires replacing the 6 variables at the top of `template.html`'s `:root{}` block — all other CSS flows through `var(--...)`.
+To switch themes, set the theme id on the template's first line, e.g. `<html data-theme="indigo-porcelain">`. All themes are built into the template.
+
+When the user gives a brand or logo color, run `node scripts/gz-theme.mjs brand "#4D6BFE" --family magazine` (`--family swiss` for Style B) and paste the printed theme into the deck. The script pulls the color into the lightness and chroma range the style allows and refuses it if it cannot meet the readability floors — fall back to a preset then.
 
 ### Style B Swiss Themes
 
-Pick from `references/themes-swiss.md`. **Custom hex values are not allowed** here either.
+Pick from `references/themes-swiss.md`. **Don't write hex values by hand** here either; brand colors go through the same script.
 
 | Preview | Theme | Anchor color and best for |
 |---------|-------|---------------------------|
@@ -379,7 +381,7 @@ If the user asks for a Swiss-style deck without specifying color, default to Int
 - Add more Swiss layout validation rules
 - Improve screenshot redesign and infographic generation workflows
 - Prepare marketplace-specific variants such as WorkBuddy
-- Add more curated theme packs while keeping custom colors restricted
+- Add more curated theme packs; brand colors stay constrained
 
 ## FAQ
 
@@ -387,7 +389,7 @@ If the user asks for a Swiss-style deck without specifying color, default to Int
 The main output is HTML. You can present it in a browser, screenshot it, or record it. PPTX conversion can be done as a separate workflow, but it is not the core path today.
 
 **Why are custom colors not allowed?**
-The skill is designed for stable visual output. Arbitrary colors often break the system, so decks must use curated presets.
+The skill is designed for stable visual output. Arbitrary colors often break the system, so decks must use curated presets. For a brand color, generate a theme with `scripts/gz-theme.mjs`: it constrains lightness and chroma per style and checks contrast for every text role.
 
 **Can I add my own layout?**
 Yes. Style A layouts can be extended in `references/layouts.md`. Style B is stricter: update `template-swiss.html`, `layouts-swiss.md`, `swiss-layout-lock.md`, and the validator together.
@@ -414,7 +416,7 @@ Bugs, layout issues, new layout requests — Issues and PRs welcome. Prioritize:
 - Presenter runtime changes must land in both templates and pass `scripts/check-presenter-runtime-sync.mjs`; CI rejects CSS / JavaScript drift
 - Presenter-note or live-behavior changes must also update `references/presenter-mode.md`, `references/checklist.md`, and `scripts/validate-presenter-mode.mjs`
 - Log pitfalls into `checklist.md` at the matching P0 / P1 / P2 / P3 tier
-- New theme colors go into `themes.md` with a recommended use case
+- Themes, type sizes, fonts and background effects come from a shared design system: the templates' `GZ:FONTS` / `GZ:TOKENS` / `GZ:EFFECTS` blocks and the `GZ:THEMES` blocks in `themes*.md` are generated — don't edit them by hand; open an issue for new theme colors or type changes
 
 ## License
 
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.md
index 15fef041..07eeda15 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/README.md
@@ -88,11 +88,11 @@ Guizang PPT Skill 的持续迭代获得 **360 安全龙虾**、**Kimi work**、*
 - 📐 **横向左右翻页**:键盘 ← → / 滚轮 / 触屏滑动 / 底部圆点 / ESC 索引
 - 🧩 **Style A 10 种布局**:封面、章节、数据大字报、图文、图片网格、Pipeline、对比等
 - 🧱 **Style B 22 种锁定版式**:Cover、Statement、KPI Tower、Loop Diagram、Duo Compare、Image Hero、Closing Manifesto 等
-- 🎨 **主题色预设**:Style A 5 套电子墨水主题,Style B 4 套瑞士高饱和锚点色
+- 🎨 **主题色预设**:Style A 5 套电子墨水主题,Style B 4 套瑞士高饱和锚点色;给品牌色时按色彩科学生成受约束的品牌主题
 - 🖼 **Codex 可选配图流程**:可用 GPT-Image 2.0 / GPT-M 2.0 生成纪实照片、信息图、流程图、系统关系图、UI 情景图,并按模板比例插入
 - 📰 **多平台封面**:可用同一套视觉规则生成公众号 21:9、公众号分享卡 1:1、小红书 3:4、视频号横版等封面
 - 🎤 **演讲者模式**:双窗口观众屏、当前页/下一页 16:9 预览、演讲备注、计时排练、自动翻页、激光笔、圈选和现场故障恢复
-- 📴 **低性能静态模式**:按 `B` 可关闭 WebGL / canvas 动画,让动态内容退回静态背景
+- 📴 **低性能静态模式**:按 `B` 可关闭 WebGL / canvas 动画,让动态内容退回静态背景;电脑带不动时背景会自动降分辨率,再不行就定格成静态
 - 📄 **单文件 HTML**:不需要构建、不需要服务器,浏览器直接打开
 
 ## 适合 / 不适合
@@ -328,7 +328,7 @@ guizang-ppt-skill/
 
 ## 主题色预设
 
-从 `references/themes.md` 里选一套——**不允许自定义 hex 值**,保护美学比给自由更重要。
+从 `references/themes.md` 里选一套——**不允许随手写 hex 值**,保护美学比给自由更重要。所有主题的文字色、线条色和强调色小字都按同一套对比度规则(WCAG + APCA)算出来。
 
 ### Style A 电子杂志主题
 
@@ -340,11 +340,13 @@ guizang-ppt-skill/
 | <img src="https://github.com/user-attachments/assets/dfea080e-e916-417e-93cd-0a3628de84ca" width="260" alt="牛皮纸主题预览"> | 🍂 **牛皮纸** | `#2a1e13` / `#eedfc7`。怀旧、人文、阅读、历史、文学分享。 |
 | <img src="https://github.com/user-attachments/assets/f3705592-9a72-4dbc-9818-df3aea61bc75" width="260" alt="沙丘主题预览"> | 🌙 **沙丘** | `#1f1a14` / `#f0e6d2`。艺术、设计、创意、时尚和画廊感内容。 |
 
-切换主题只需替换 `template.html` 开头 `:root{}` 里的 6 行变量,其他 CSS 全走 `var(--...)`。
+切换主题只需把模板第一行 `<html data-theme="…">` 改成主题 id,例如 `data-theme="indigo-porcelain"`,全部主题都已内置在模板里。
+
+用户给了品牌色或 logo 主色时,运行 `node scripts/gz-theme.mjs brand "#4D6BFE" --family magazine`(瑞士风用 `--family swiss`),把输出的主题贴进 deck。脚本会把品牌色收进这套风格允许的明度和彩度范围,达不到可读性要求就拒绝,这时回到预设。
 
 ### Style B 瑞士主题
 
-瑞士风从 `references/themes-swiss.md` 里选一套,同样**不允许自定义 hex 值**。
+瑞士风从 `references/themes-swiss.md` 里选一套,同样**不允许随手写 hex 值**,品牌色走同一个脚本。
 
 | 预览 | 主题 | 锚点色与适合场景 |
 |------|------|------------------|
@@ -380,7 +382,7 @@ guizang-ppt-skill/
 - 增加更多瑞士风版式校验规则
 - 优化截图再设计和信息图生成工作流
 - 整理 WorkBuddy 等平台上架版本
-- 增加更多主题包,但继续限制自定义颜色
+- 增加更多主题包,品牌色继续走受约束生成
 
 ## FAQ
 
@@ -388,7 +390,7 @@ guizang-ppt-skill/
 当前核心交付是 HTML。你可以用浏览器演示、截图或录屏。如果需要 PPTX,建议把 HTML 页面作为视觉稿再转换,但这不是当前主流程。
 
 **为什么不允许自定义颜色?**
-这个 Skill 的重点是稳定产出。自由选色很容易破坏整体风格,所以只允许从预设主题里选。
+这个 Skill 的重点是稳定产出。自由选色很容易破坏整体风格,所以只允许从预设主题里选。需要品牌色时用 `scripts/gz-theme.mjs` 生成,它会按风格约束明度和彩度,并检查每个文字角色的对比度。
 
 **我能加自己的版式吗?**
 可以。Style A 可以在 `references/layouts.md` 里扩展；Style B 更严格,需要同步更新 `template-swiss.html`、`layouts-swiss.md`、`swiss-layout-lock.md` 和校验器。
@@ -415,7 +417,7 @@ Bug、排版问题、新布局需求——欢迎开 Issue 或 PR。改动请优
 - 演讲者运行时必须同时更新两套模板,并运行 `scripts/check-presenter-runtime-sync.mjs`；CI 会拦截两份模板的 CSS / JavaScript 漂移
 - 演讲备注或现场行为变化时,同步更新 `references/presenter-mode.md`、`references/checklist.md` 和 `scripts/validate-presenter-mode.mjs`
 - 把踩过的坑写到 `checklist.md` 对应的 P0 / P1 / P2 / P3 级别
-- 新主题色进 `themes.md` 并给出适合的场景
+- 主题、字号、字体和背景特效来自共享设计系统,模板里 `GZ:FONTS` / `GZ:TOKENS` / `GZ:EFFECTS` 区块和 `themes*.md` 的 `GZ:THEMES` 区块是生成的,不要手改;新主题色或字号调整请提 Issue
 
 ## License
 
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/SKILL.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/SKILL.md
index 60f85145..4a80d653 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/SKILL.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/SKILL.md
@@ -202,27 +202,30 @@ cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
 
 每次拷贝完 template.html 第一件事:grep 一下"[必填]" 确认全部替换完。
 
-#### 2.2 · 选定主题色(5 套预设 · 不允许自定义)
+#### 2.2 · 选定主题色(预设优先 · 品牌色受约束生成)
 
-本 skill **只允许从 5 套精心调配的预设里选一套**,不接受用户自定义 hex 值——颜色搭配错了画面瞬间变丑,保护美学比给自由更重要。
+颜色搭配错了画面瞬间变丑,所以**不直接使用用户给的任何颜色值**。默认从精调预设里选一套；用户明确有品牌色或 logo 主色时,用脚本生成一套受约束的品牌主题。
 
-| # | 主题 | 适合 |
+| # | 杂志风主题 (`themes.md`) | 适合 |
 |---|------|------|
-| 1 | 🖋 墨水经典 | 通用 / 商业发布 / 不知道选啥的默认 |
-| 2 | 🌊 靛蓝瓷 | 科技 / 研究 / 数据 / 技术发布会 |
-| 3 | 🌿 森林墨 | 自然 / 可持续 / 文化 / 非虚构 |
-| 4 | 🍂 牛皮纸 | 怀旧 / 人文 / 文学 / 独立杂志 |
-| 5 | 🌙 沙丘 | 艺术 / 设计 / 创意 / 画廊 |
+| 1 | 🖋 墨水经典 `ink-classic` | 通用 / 商业发布 / 不知道选啥的默认 |
+| 2 | 🌊 靛蓝瓷 `indigo-porcelain` | 科技 / 研究 / 数据 / 技术发布会 |
+| 3 | 🌿 森林墨 `forest-ink` | 自然 / 可持续 / 文化 / 非虚构 |
+| 4 | 🍂 牛皮纸 `kraft-paper` | 怀旧 / 人文 / 文学 / 独立杂志 |
+| 5 | 🌙 沙丘 `dune` | 艺术 / 设计 / 创意 / 画廊 |
+
+瑞士风 4 套(`ikb` / `lemon` / `lemon-green` / `safety-orange`)见 `themes-swiss.md`。
 
 **操作**:
 1. 基于内容主题推荐一套,或直接问用户选哪一套
-2. 打开 `references/themes.md`,找到对应主题的 `:root` 块
-3. **整体替换** `assets/template.html`(已拷贝版本)开头 `:root{` 块里标有"主题色"注释的那几行(`--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`)
-4. 其他 CSS 都走 `var(--...)`,无需任何其他改动
+2. 把拷贝好的模板第一行 `<html>` 的 `data-theme` 改成主题 id,例如 `data-theme="indigo-porcelain"`。全部主题都已内置在模板的 `GZ:TOKENS` 区块里,**不要改那个区块**
+3. 用户给了品牌色:运行 `node <SKILL_ROOT>/scripts/gz-theme.mjs brand "#4D6BFE" --family magazine`(瑞士风用 `--family swiss`),把输出的 `[data-theme="brand"]{…}` 贴到 deck `<style>` 末尾,再把 `data-theme` 改成 `brand`。脚本判定不达标时会说明原因,这时回到预设
+
+**颜色变量**(页面里只用这些,不写 hex):文字 `--text-primary` / `--text-body` / `--text-secondary` / `--text-helper`;线条 `--line` / `--line-strong`;强调色色块 `--accent`;强调色当小字 `--accent-ink`、当大字 `--accent-display`;强调色块上的文字 `--accent-on`。
 
 **硬规则**:
 - 一份 deck 只用一套主题,不要中途换色
-- 不要接受用户给的任意 hex 值——委婉拒绝并展示 5 套让选
+- 不要把用户给的 hex 值直接写进页面——走品牌色脚本
 - 不要混搭(例如 ink 取墨水经典、paper 取沙丘)——会彻底违和
 
 ### Step 3 · 填充内容
@@ -435,7 +438,7 @@ cp "<SKILL_ROOT>/assets/template-swiss.html" "项目/XXX/ppt/index.html"
 **硬规则:**
 - 同一页内,字号越小的元素字重必须 ≥ 字号越大的元素(不允许 16px 正文用 300 而 1.8vw 标题用 500)
 - 16px 左右的小字拒绝使用 weight 300(太细不可读),最低 400,推荐 500
-- 封面/IkB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)
+- 封面/IKB 反白大标题内强调字:英文用 `italic + weight 300`,中文用 `font-weight:400`(中文不用斜体),不要用 accent 色(蓝压蓝看不见)
 
 组件细节(字体、颜色、网格、图标、callout、stat-card 等)在 `references/components.md`。
 
@@ -549,11 +552,12 @@ open "项目/XXX/ppt/index.html"
 guizang-ppt-skill/
 ├── SKILL.md                  ← 你正在读
 ├── assets/
-│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件）
+│   ├── template.html         ← 风格 A · 电子杂志风模板（种子文件；GZ:* 标记区由 guizang-design 生成，不要手改）
 │   ├── template-swiss.html   ← 风格 B · 瑞士国际主义风模板（种子文件）
 │   ├── screenshot-backgrounds/ ← 截图美化内置背景(WebP):style-a 5 套 / style-b 4 套
 │   └── motion.min.js         ← Motion One 本地副本（离线兜底,约 64KB,共用）
 ├── scripts/
+│   ├── gz-theme.mjs          ← 品牌色 → 受约束主题(由 guizang-design 生成,零依赖)
 │   ├── validate-swiss-deck.mjs ← 风格 B 静态校验:登记版式、图片槽位、SVG 文本、标题对齐
 │   └── validate-presenter-mode.mjs ← 两种风格共用:页面 ID、演讲备注、时长和演讲者运行时校验
 └── references/
@@ -562,8 +566,8 @@ guizang-ppt-skill/
     ├── swiss-layout-lock.md  ← 风格 B · 原始 22P 版式锁,正文页必须按这里登记
     ├── layouts-swiss.md      ← 风格 B · 原始 22P 骨架说明 + 少量明确标注的实验区
     ├── swiss-map-component.md ← 风格 B · S08 地图扩展组件(MapLibre 点位/连线/卡片/控制)
-    ├── themes.md             ← 风格 A · 5 套主题色预设（只能选不能自定义）
-    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设（IKB / 柠檬黄 / 柠檬绿 / 安全橙）
+    ├── themes.md             ← 风格 A · 5 套主题色预设 + 品牌色流程（主题部分由 guizang-design 生成）
+    ├── themes-swiss.md       ← 风格 B · 4 套瑞士风主题色预设 + 品牌色流程（主题部分由 guizang-design 生成）
     ├── image-prompts.md      ← GPT-M 2.0 配图类型、比例和基础提示词
     ├── screenshot-framing.md ← CleanShot X 式截图适配语义 + 内置背景资产映射
     ├── presenter-mode.md     ← 演讲者 UI、AI 备注结构、观众屏同步与恢复契约
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template-swiss.html b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template-swiss.html
index 455cb527..ac577b46 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template-swiss.html
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template-swiss.html
@@ -1,77 +1,561 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-family="swiss" data-medium="slide" data-theme="ikb">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>[必填] 替换为 PPT 标题 · Deck Title</title>
+<!-- GZ:FONTS:START · 字体由 guizang-design 字体清单生成；需要把字体内置进 HTML 时用 gz-fonts.mjs embed（卡片 skill 的 render.mjs 会自动内置） -->
 <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=Inter:wght@200;300;400;500;600;700;800;900&family=JetBrains+Mono:wght@300;400;500;600&family=Noto+Sans+SC:wght@200;300;400;500;700;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" data-gz-fonts="inter noto-sans-sc jetbrains-mono" href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=JetBrains+Mono:wght@100..800&display=swap">
+<!-- GZ:FONTS:END -->
 <style>
-  :root{
-    /* ============ 主题色(默认: 🔵 克莱因蓝 IKB) ============
-       切换主题: 从 references/themes-swiss.md 复制对应的 :root 块
-       整体替换标有"主题色"注释的所有变量,其他散落的 var() 引用无需逐处改 */
-    --paper:#fafaf8;          /* 主底色: 高级灰白 */
-    --paper-rgb:250,250,248;
-    --ink:#0a0a0a;            /* 文字主色: 近黑 */
-    --ink-rgb:10,10,10;
-    --grey-1:#f0f0ee;         /* 浅灰底 */
-    --grey-2:#d4d4d2;         /* 中灰(分割线) */
-    --grey-3:#737373;         /* 暗灰(辅助文字) */
-    --accent:#002FA7;         /* 高亮色: 克莱因蓝 IKB */
-    --accent-rgb:0,47,167;
-    --accent-on:#ffffff;      /* accent 上的反色文字 */
-    --accent-bright:#5B7BFF;  /* 暗底高亮: IKB 提亮版 */
+  /* GZ:TOKENS:START · guizang-design v0.1.0 生成，不要手改；改设计请改 guizang-design 后运行 scripts/sync-skill.mjs */
+:root{
+  --font-display:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
+  --font-sans:'Inter','Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
+  --font-mono:'JetBrains Mono','Noto Sans SC',ui-monospace,'SF Mono',Menlo,monospace;
+  --sp-1:2px;
+  --sp-2:4px;
+  --sp-3:8px;
+  --sp-4:12px;
+  --sp-5:16px;
+  --sp-6:24px;
+  --sp-7:32px;
+  --sp-8:40px;
+  --sp-9:48px;
+  --sp-10:64px;
+  --sp-11:80px;
+  --sp-12:96px;
+  --sp-13:160px;
+  --radius-none:0px;
+  --radius-xs:0px;
+  --radius-sm:4px;
+  --radius-md:10px;
+  --radius-pill:999px;
+  --ease-standard:cubic-bezier(.2,0,.38,.9);
+  --ease-expressive:cubic-bezier(.4,.14,.3,1);
+  --ease-entrance:cubic-bezier(0,0,.3,1);
+  --ease-entrance-standard:cubic-bezier(0,0,.38,.9);
+  --ease-editorial:cubic-bezier(.22,1,.36,1);
+  --ease-page:cubic-bezier(.77,0,.175,1);
+  --dur-fast-1:70ms;
+  --dur-fast-2:110ms;
+  --dur-moderate-1:150ms;
+  --dur-moderate-2:240ms;
+  --dur-slow-1:400ms;
+  --dur-slow-2:700ms;
+  --dur-page:900ms;
+  --stagger-tight:70ms;
+  --stagger-base:100ms;
+  --stagger-loose:160ms;
+  --move-sm:8px;
+  --move-md:16px;
+  --move-lg:24px;
+  --paper:#fafaf8;
+  --paper-2:#f0f0ee;
+  --ink:#0a0a0a;
+  --muted:#737373;
+  --grey-1:#f0f0ee;
+  --grey-2:#d4d4d2;
+  --grey-3:#737373;
+  --accent:#002FA7;
+  --accent-on:#ffffff;
+  --accent-ink:#002FA7;
+  --accent-bright:#5B7BFF;
+  --accent-deep:#001d6b;
+  --accent-display:#002FA7;
+  --accent-ink-inverse:#96b0ff;
+  --accent-soft:#d5deef;
+  --text-primary:#0a0a0a;
+  --text-body:#252524;
+  --text-secondary:#525252;
+  --text-helper:#737373;
+  --text-placeholder:#a3a3a3;
+  --text-on-color:#ffffff;
+  --line-strong:#a3a3a3;
+  --line:#d4d4d2;
+  --line-subtle:#e0e0e0;
+  --ink-rgb:10,10,10;
+  --paper-rgb:250,250,248;
+  --accent-rgb:0,47,167;
+  --accent-on-rgb:255,255,255;
+  --accent-on-text:#ffffff;
+  --accent-on-text-rgb:255,255,255;
+  color-scheme:light;
+}
+[data-theme="ikb"]{
+  --paper:#fafaf8;
+  --paper-2:#f0f0ee;
+  --ink:#0a0a0a;
+  --muted:#737373;
+  --grey-1:#f0f0ee;
+  --grey-2:#d4d4d2;
+  --grey-3:#737373;
+  --accent:#002FA7;
+  --accent-on:#ffffff;
+  --accent-ink:#002FA7;
+  --accent-bright:#5B7BFF;
+  --accent-deep:#001d6b;
+  --accent-display:#002FA7;
+  --accent-ink-inverse:#96b0ff;
+  --accent-soft:#d5deef;
+  --text-primary:#0a0a0a;
+  --text-body:#252524;
+  --text-secondary:#525252;
+  --text-helper:#737373;
+  --text-placeholder:#a3a3a3;
+  --text-on-color:#ffffff;
+  --line-strong:#a3a3a3;
+  --line:#d4d4d2;
+  --line-subtle:#e0e0e0;
+  --ink-rgb:10,10,10;
+  --paper-rgb:250,250,248;
+  --accent-rgb:0,47,167;
+  --accent-on-rgb:255,255,255;
+  --accent-on-text:#ffffff;
+  --accent-on-text-rgb:255,255,255;
+  color-scheme:light;
+}
+[data-theme="lemon"]{
+  --paper:#fafaf8;
+  --paper-2:#f0f0ee;
+  --ink:#0a0a0a;
+  --muted:#737373;
+  --grey-1:#f0f0ee;
+  --grey-2:#d4d4d2;
+  --grey-3:#737373;
+  --accent:#FFD500;
+  --accent-on:#0a0a0a;
+  --accent-ink:#7a5f00;
+  --accent-bright:#FFE34D;
+  --accent-deep:#5e4900;
+  --accent-display:#7a5f00;
+  --accent-ink-inverse:#FFE34D;
+  --accent-soft:#fbf6e1;
+  --text-primary:#0a0a0a;
+  --text-body:#252524;
+  --text-secondary:#525252;
+  --text-helper:#737373;
+  --text-placeholder:#a3a3a3;
+  --text-on-color:#0a0a0a;
+  --line-strong:#a3a3a3;
+  --line:#d4d4d2;
+  --line-subtle:#e0e0e0;
+  --ink-rgb:10,10,10;
+  --paper-rgb:250,250,248;
+  --accent-rgb:255,213,0;
+  --accent-on-rgb:10,10,10;
+  --accent-on-text:#0a0a0a;
+  --accent-on-text-rgb:10,10,10;
+  color-scheme:light;
+}
+[data-theme="lemon-green"]{
+  --paper:#fafaf8;
+  --paper-2:#f0f0ee;
+  --ink:#0a0a0a;
+  --muted:#737373;
+  --grey-1:#f0f0ee;
+  --grey-2:#d4d4d2;
+  --grey-3:#737373;
+  --accent:#C5E803;
+  --accent-on:#0a0a0a;
+  --accent-ink:#4a6400;
+  --accent-bright:#D4F040;
+  --accent-deep:#3a5000;
+  --accent-display:#4a6400;
+  --accent-ink-inverse:#D4F040;
+  --accent-soft:#f2f8e1;
+  --text-primary:#0a0a0a;
+  --text-body:#252524;
+  --text-secondary:#525252;
+  --text-helper:#737373;
+  --text-placeholder:#a3a3a3;
+  --text-on-color:#0a0a0a;
+  --line-strong:#a3a3a3;
+  --line:#d4d4d2;
+  --line-subtle:#e0e0e0;
+  --ink-rgb:10,10,10;
+  --paper-rgb:250,250,248;
+  --accent-rgb:197,232,3;
+  --accent-on-rgb:10,10,10;
+  --accent-on-text:#0a0a0a;
+  --accent-on-text-rgb:10,10,10;
+  color-scheme:light;
+}
+[data-theme="safety-orange"]{
+  --paper:#fafaf8;
+  --paper-2:#f0f0ee;
+  --ink:#0a0a0a;
+  --muted:#737373;
+  --grey-1:#f0f0ee;
+  --grey-2:#d4d4d2;
+  --grey-3:#737373;
+  --accent:#FF6B35;
+  --accent-on:#ffffff;
+  --accent-ink:#c2410c;
+  --accent-bright:#FF9A6C;
+  --accent-deep:#9a3409;
+  --accent-display:#FF6B35;
+  --accent-ink-inverse:#FF9A6C;
+  --accent-soft:#fee8de;
+  --text-primary:#0a0a0a;
+  --text-body:#252524;
+  --text-secondary:#525252;
+  --text-helper:#737373;
+  --text-placeholder:#a3a3a3;
+  --text-on-color:#ffffff;
+  --line-strong:#a3a3a3;
+  --line:#d4d4d2;
+  --line-subtle:#e0e0e0;
+  --ink-rgb:10,10,10;
+  --paper-rgb:250,250,248;
+  --accent-rgb:255,107,53;
+  --accent-on-rgb:255,255,255;
+  --accent-on-text:#0a0a0a;
+  --accent-on-text-rgb:10,10,10;
+  color-scheme:light;
+}
 
-    /* ============ Carbon 文本角色 token (role-based,代替 opacity) ============
-       亮底:  primary 主文 / secondary 次文 / helper 辅助 / placeholder 占位
-       暗底:  inverse 自动反向 */
-    --text-primary:#0a0a0a;        /* = ink, 100% */
-    --text-secondary:#525252;      /* gray 70 */
-    --text-helper:#737373;         /* gray 60 */
-    --text-placeholder:#a3a3a3;    /* gray 40 */
-    --text-on-color:#ffffff;       /* accent/dark 反色 */
-    --border-subtle:#e0e0e0;       /* gray 20, 极细分隔 */
-    --border-strong:#a3a3a3;       /* gray 40, 强分隔 */
+:root{
+  --fs-display:min(11vw,19.556vh);
+  --fw-display:200;
+  --lh-display:0.92;
+  --ls-display:-.04em;
+  --ff-display:var(--font-display);
+  --fst-display:normal;
+  --tt-display:none;
+  --fs-display-zh:min(8.4vw,14.933vh);
+  --fw-display-zh:200;
+  --lh-display-zh:0.96;
+  --ls-display-zh:-.025em;
+  --ff-display-zh:var(--font-display);
+  --fst-display-zh:normal;
+  --tt-display-zh:none;
+  --fs-title:min(6vw,10.667vh);
+  --fw-title:200;
+  --lh-title:1;
+  --ls-title:-.03em;
+  --ff-title:var(--font-display);
+  --fst-title:normal;
+  --tt-title:none;
+  --fs-title-zh:min(5vw,8.889vh);
+  --fw-title-zh:200;
+  --lh-title-zh:1.05;
+  --ls-title-zh:-.025em;
+  --ff-title-zh:var(--font-display);
+  --fst-title-zh:normal;
+  --tt-title-zh:none;
+  --fs-heading:min(2.6vw,4.622vh);
+  --fw-heading:300;
+  --lh-heading:1.18;
+  --ls-heading:-.015em;
+  --ff-heading:var(--font-sans);
+  --fst-heading:normal;
+  --tt-heading:none;
+  --fs-subhead:min(2.2vw,3.911vh);
+  --fw-subhead:400;
+  --lh-subhead:1.3;
+  --ls-subhead:-.01em;
+  --ff-subhead:var(--font-sans);
+  --fst-subhead:normal;
+  --tt-subhead:none;
+  --fs-lead:max(min(20px,2.778vh),min(1.55vw,2.756vh));
+  --fw-lead:400;
+  --lh-lead:1.4;
+  --ls-lead:-.005em;
+  --ff-lead:var(--font-sans);
+  --fst-lead:normal;
+  --tt-lead:none;
+  --fs-body:max(min(18px,2.5vh),min(1.08vw,1.92vh));
+  --fw-body:400;
+  --lh-body:1.6;
+  --ls-body:0;
+  --ff-body:var(--font-sans);
+  --fst-body:normal;
+  --tt-body:none;
+  --fs-small:max(min(16px,2.222vh),min(.92vw,1.636vh));
+  --fw-small:400;
+  --lh-small:1.55;
+  --ls-small:0;
+  --ff-small:var(--font-sans);
+  --fst-small:normal;
+  --tt-small:none;
+  --fs-caption:max(min(14px,1.944vh),min(.82vw,1.458vh));
+  --fw-caption:400;
+  --lh-caption:1.4;
+  --ls-caption:.18em;
+  --ff-caption:var(--font-mono);
+  --fst-caption:normal;
+  --tt-caption:uppercase;
+  --fs-label:min(14px,1.944vh);
+  --fw-label:500;
+  --lh-label:1.3;
+  --ls-label:.16em;
+  --ff-label:var(--font-mono);
+  --fst-label:normal;
+  --tt-label:uppercase;
+  --fs-meta:max(min(14px,1.944vh),min(.88vw,1.564vh));
+  --fw-meta:400;
+  --lh-meta:1.3;
+  --ls-meta:.16em;
+  --ff-meta:var(--font-mono);
+  --fst-meta:normal;
+  --tt-meta:uppercase;
+  --fs-quote:min(5vw,8.889vh);
+  --fw-quote:200;
+  --lh-quote:1.1;
+  --ls-quote:-.025em;
+  --ff-quote:var(--font-display);
+  --fst-quote:normal;
+  --tt-quote:none;
+  --fs-num-xl:min(11vw,19.556vh);
+  --fw-num-xl:800;
+  --lh-num-xl:0.85;
+  --ls-num-xl:-.04em;
+  --ff-num-xl:var(--font-display);
+  --fst-num-xl:normal;
+  --tt-num-xl:none;
+  --fs-num-l:min(6vw,10.667vh);
+  --fw-num-l:700;
+  --lh-num-l:0.88;
+  --ls-num-l:-.03em;
+  --ff-num-l:var(--font-display);
+  --fst-num-l:normal;
+  --tt-num-l:none;
+  --fs-num-m:min(5.6vw,9.956vh);
+  --fw-num-m:800;
+  --lh-num-m:0.88;
+  --ls-num-m:-.035em;
+  --ff-num-m:var(--font-display);
+  --fst-num-m:normal;
+  --tt-num-m:none;
+  --canvas-padding:5.5vh 5vw 7vh;
+  --canvas-safe-bottom:8vh;
+  --sp-1:0.1042vw;
+  --sp-2:0.2083vw;
+  --sp-3:0.4167vw;
+  --sp-4:0.625vw;
+  --sp-5:0.8333vw;
+  --sp-6:1.25vw;
+  --sp-7:1.6667vw;
+  --sp-8:2.0833vw;
+  --sp-9:2.5vw;
+  --sp-10:3.3333vw;
+  --sp-11:4.1667vw;
+  --sp-12:5vw;
+  --sp-13:8.3333vw;
+}
+.gz-t-display{font-family:var(--ff-display);font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-style:var(--fst-display);text-transform:var(--tt-display)}
+.gz-t-display-zh{font-family:var(--ff-display-zh);font-size:var(--fs-display-zh);font-weight:var(--fw-display-zh);line-height:var(--lh-display-zh);letter-spacing:var(--ls-display-zh);font-style:var(--fst-display-zh);text-transform:var(--tt-display-zh)}
+.gz-t-title{font-family:var(--ff-title);font-size:var(--fs-title);font-weight:var(--fw-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-style:var(--fst-title);text-transform:var(--tt-title)}
+.gz-t-title-zh{font-family:var(--ff-title-zh);font-size:var(--fs-title-zh);font-weight:var(--fw-title-zh);line-height:var(--lh-title-zh);letter-spacing:var(--ls-title-zh);font-style:var(--fst-title-zh);text-transform:var(--tt-title-zh)}
+.gz-t-heading{font-family:var(--ff-heading);font-size:var(--fs-heading);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-style:var(--fst-heading);text-transform:var(--tt-heading)}
+.gz-t-subhead{font-family:var(--ff-subhead);font-size:var(--fs-subhead);font-weight:var(--fw-subhead);line-height:var(--lh-subhead);letter-spacing:var(--ls-subhead);font-style:var(--fst-subhead);text-transform:var(--tt-subhead)}
+.gz-t-lead{font-family:var(--ff-lead);font-size:var(--fs-lead);font-weight:var(--fw-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-style:var(--fst-lead);text-transform:var(--tt-lead)}
+.gz-t-body{font-family:var(--ff-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-style:var(--fst-body);text-transform:var(--tt-body)}
+.gz-t-small{font-family:var(--ff-small);font-size:var(--fs-small);font-weight:var(--fw-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);font-style:var(--fst-small);text-transform:var(--tt-small)}
+.gz-t-caption{font-family:var(--ff-caption);font-size:var(--fs-caption);font-weight:var(--fw-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption);font-style:var(--fst-caption);text-transform:var(--tt-caption)}
+.gz-t-label{font-family:var(--ff-label);font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-style:var(--fst-label);text-transform:var(--tt-label)}
+.gz-t-meta{font-family:var(--ff-meta);font-size:var(--fs-meta);font-weight:var(--fw-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta);font-style:var(--fst-meta);text-transform:var(--tt-meta)}
+.gz-t-quote{font-family:var(--ff-quote);font-size:var(--fs-quote);font-weight:var(--fw-quote);line-height:var(--lh-quote);letter-spacing:var(--ls-quote);font-style:var(--fst-quote);text-transform:var(--tt-quote)}
+.gz-t-num-xl{font-family:var(--ff-num-xl);font-size:var(--fs-num-xl);font-weight:var(--fw-num-xl);line-height:var(--lh-num-xl);letter-spacing:var(--ls-num-xl);font-style:var(--fst-num-xl);text-transform:var(--tt-num-xl)}
+.gz-t-num-l{font-family:var(--ff-num-l);font-size:var(--fs-num-l);font-weight:var(--fw-num-l);line-height:var(--lh-num-l);letter-spacing:var(--ls-num-l);font-style:var(--fst-num-l);text-transform:var(--tt-num-l)}
+.gz-t-num-m{font-family:var(--ff-num-m);font-size:var(--fs-num-m);font-weight:var(--fw-num-m);line-height:var(--lh-num-m);letter-spacing:var(--ls-num-m);font-style:var(--fst-num-m);text-transform:var(--tt-num-m)}
 
-    /* ============ 字体(跨主题固定) ============ */
-    --sans:"Inter","Helvetica Neue","Helvetica","Arial","Segoe UI Variable","Segoe UI",system-ui,-apple-system,sans-serif;
-    --sans-zh:"PingFang SC","Hiragino Sans GB","Source Han Sans SC","Noto Sans SC","Microsoft YaHei UI","Microsoft YaHei","微软雅黑",sans-serif;
-    --mono:"JetBrains Mono","IBM Plex Mono","SF Mono","Cascadia Code","Consolas","Courier New",ui-monospace,monospace;
+:lang(zh){line-break:strict;text-spacing-trim:normal;text-autospace:normal;overflow-wrap:break-word}
+:lang(zh) .gz-prose em:not(:lang(en)){font-style:normal;text-emphasis:filled dot;text-emphasis-position:under right}
+.gz-tnum{font-variant-numeric:tabular-nums}
 
-    /* ============ Carbon 2x Grid 间距模数 (基础 8px) ============
-       参考: https://carbondesignsystem.com/elements/2x-grid/overview/
-       任何 padding/gap/margin 优先用这套 token,确保 8px 基线对齐 */
-    --sp-3:8px;     /* 02 token */
-    --sp-4:12px;    /* 03 */
-    --sp-5:16px;    /* 04 */
-    --sp-6:24px;    /* 05 */
-    --sp-7:32px;    /* 06 */
-    --sp-8:40px;    /* 07 */
-    --sp-9:48px;    /* 08 */
-    --sp-10:64px;   /* 09 */
-    --sp-11:80px;   /* 10 */
-    --sp-12:96px;   /* 11 */
-    --sp-13:160px;  /* 12 */
+/* 歸藏设计系统 · 共享组件
+ *
+ * 一份结构，三种介质：根节点 <html data-family="magazine|swiss" data-medium="slide|card|page">。
+ * 这里只管布局、颜色和间距；字号、字重、行高一律由 gz-t-<角色> 类提供，
+ * 所以同一个组件放进 PPT、卡片、网页会自动换成各自的字号。
+ * 颜色只用语义 token（--text-* / --line-* / --accent*），换主题不需要改组件。
+ */
 
-    /* ============ Carbon Motion tokens ============
-       https://carbondesignsystem.com/guidelines/motion/overview/
-       两套体系:productive (功能) 短 + 锐 / expressive (叙事) 长 + 软 */
-    --ease-prod:cubic-bezier(.2,0,.38,.9);          /* productive standard */
-    --ease-exp:cubic-bezier(.4,.14,.3,1);            /* expressive standard */
-    --ease-entry-prod:cubic-bezier(0,0,.38,.9);     /* productive entrance */
-    --ease-entry-exp:cubic-bezier(0,0,.3,1);         /* expressive entrance */
-    --dur-fast-1:.07s;   /* 70ms */
-    --dur-fast-2:.11s;   /* 110ms */
-    --dur-mod-1:.15s;    /* 150ms */
-    --dur-mod-2:.24s;    /* 240ms */
-    --dur-slow-1:.4s;    /* 400ms */
-    --dur-slow-2:.7s;    /* 700ms */
+/* ---------- 家族差异 ---------- */
+/* 单张卡片 / 单页换主题（[data-theme]）或反色（[data-surface]）时，线条变量要在那一层重新计算，否则沿用根节点的颜色 */
+[data-family="magazine"], [data-family="magazine"] [data-theme], [data-family="magazine"] [data-surface] { --img-pos: center top; --rule: 1px solid var(--line-strong); --rule-strong: 1px solid var(--line-strong) }
+[data-family="swiss"], [data-family="swiss"] [data-theme], [data-family="swiss"] [data-surface] { --img-pos: center center; --rule: 1px solid var(--line); --rule-strong: 2px solid var(--ink) }
 
-    /* 底部分页组件安全区: 主内容最低处不要进入这条区域 */
-    --nav-safe-bottom:8vh;
-  }
+/* ---------- 表面：反色块里文字角色跟着换 ---------- */
+[data-surface="ink"] {
+  background: var(--ink); color: var(--paper);
+  --text-primary: var(--paper); --text-body: rgba(var(--paper-rgb), .86); --text-secondary: rgba(var(--paper-rgb), .72);
+  --text-helper: rgba(var(--paper-rgb), .62); --line: rgba(var(--paper-rgb), .22); --line-strong: rgba(var(--paper-rgb), .45);
+  --accent-ink: var(--accent-ink-inverse); --accent-display: var(--accent-ink-inverse); --rule-strong: 2px solid var(--paper);
+}
+[data-family="magazine"] [data-surface="ink"], [data-family="magazine"][data-surface="ink"] { --rule-strong: 1px solid rgba(var(--paper-rgb), .45) }
+[data-surface="accent"] {
+  background: var(--accent); color: var(--accent-on);
+  --text-primary: var(--accent-on); --text-body: rgba(var(--accent-on-rgb), .88); --text-secondary: rgba(var(--accent-on-rgb), .78);
+  --text-helper: rgba(var(--accent-on-rgb), .7); --line: rgba(var(--accent-on-rgb), .3); --line-strong: rgba(var(--accent-on-rgb), .55);
+  --accent-ink: var(--accent-on); --accent-display: var(--accent-on); --rule-strong: 2px solid var(--accent-on);
+}
+[data-surface="paper-2"] { background: var(--paper-2) }
+
+/* 强调色文字：小字用 accent-ink，大字 / 大数字用 accent-display（浅色强调色在纸上会自动加深；反色块里自动切换） */
+.gz-c-accent { color: var(--accent-ink) }
+.gz-c-accent-display { color: var(--accent-display) }
+
+/* ---------- 页眉页脚 chrome ---------- */
+.gz-chrome { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); color: var(--text-helper); border-top: var(--rule); padding-top: var(--sp-4) }
+.gz-chrome[data-pos="top"] { border-top: 0; border-bottom: var(--rule); padding: 0 0 var(--sp-4) }
+.gz-chrome__group { display: flex; gap: var(--sp-5); min-width: 0 }
+.gz-chrome__accent { color: var(--accent-ink) }
+
+/* ---------- 封面 cover ---------- */
+.gz-cover { display: flex; flex-direction: column; gap: var(--sp-6); color: var(--text-primary) }
+.gz-cover__kicker { color: var(--text-helper) }
+[data-family="swiss"] .gz-cover__kicker { color: var(--accent-ink) }
+.gz-cover__body { width: 100%; container-type: inline-size }
+/* 标题按最长一行的字数自动收字号：--chars 由 components/render.mjs 算好写进 style；手写时填最长一行的字数（中文 1、西文约 0.56）。上限仍是 token 定的展示字号 */
+.gz-cover__title { margin: 0; font-size: min(var(--fs-display-zh), calc(100cqi / var(--chars, 1) * .94)) }
+.gz-cover__rule { width: 96px; height: 0; border-top: 2px solid var(--accent) }
+[data-family="swiss"] .gz-cover__rule { border-top-width: 3px }
+.gz-cover__sub { margin: 0; color: var(--text-body); max-width: 32em }
+.gz-cover__meta { margin-top: auto }
+/* 幻灯片、卡片：封面撑满画布，标题压在下半部 */
+[data-medium="slide"] .gz-cover, [data-medium="card"] .gz-cover { height: 100% }
+[data-medium="slide"] .gz-cover__body, [data-medium="card"] .gz-cover__body { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-7) }
+[data-medium="slide"] .gz-cover__meta, [data-medium="card"] .gz-cover__meta { margin-top: var(--sp-10) }
+/* 网页：杂志风居中，瑞士风左对齐 */
+[data-medium="page"] .gz-cover { padding: var(--sp-11) 0 var(--sp-9); border-bottom: var(--rule) }
+[data-medium="page"] .gz-cover__body { display: flex; flex-direction: column; gap: var(--sp-6) }
+[data-medium="page"][data-family="magazine"] .gz-cover { align-items: center; text-align: center }
+[data-medium="page"][data-family="magazine"] .gz-cover__body { align-items: center }
+[data-medium="page"] .gz-cover__meta { margin-top: var(--sp-6); border-top: 0; padding-top: 0; justify-content: center }
+[data-medium="page"][data-family="swiss"] .gz-cover__meta { justify-content: flex-start }
+
+/* ---------- 大数字 stat ---------- */
+.gz-stats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-9) var(--sp-7) }
+.gz-stats[data-count="1"] { --cols: 1 } .gz-stats[data-count="2"] { --cols: 2 } .gz-stats[data-count="4"] { --cols: 4 }
+[data-medium="card"] .gz-stats { --cols: 2 }
+[data-medium="card"] .gz-stats[data-count="1"], [data-medium="card"] .gz-stats[data-count="3"] { --cols: 1 }
+.gz-stat { display: flex; flex-direction: column; gap: var(--sp-4); border-top: var(--rule-strong); padding-top: var(--sp-5); min-width: 0 }
+.gz-stat__label { color: var(--text-helper) }
+.gz-stat__value { display: flex; align-items: baseline; gap: .06em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap }
+.gz-stat__unit { font-size: .4em; font-weight: 500; letter-spacing: 0; color: var(--text-secondary) }
+.gz-stat.is-accent .gz-stat__num { color: var(--accent-ink) }
+.gz-stat__note { margin: 0; color: var(--text-secondary); max-width: 24em }
+[data-medium="card"] .gz-stats[data-count="3"] .gz-stat { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: var(--sp-7) }
+[data-medium="card"] .gz-stats[data-count="3"] .gz-stat__label { grid-column: 1 / -1 }
+[data-medium="card"] .gz-stats[data-count="3"] .gz-stat__note { padding-bottom: .6em }
+
+/* ---------- 引言 quote ---------- */
+.gz-quote { margin: 0; display: flex; flex-direction: column; gap: var(--sp-7) }
+.gz-quote__text { margin: 0; color: var(--text-primary); text-wrap: balance }
+.gz-quote__text p { margin: 0; text-wrap: balance }
+[data-family="magazine"] .gz-quote__text::before { content: "\201C"; display: block; font-family: var(--font-display); font-style: normal; color: var(--accent); font-size: 1.8em; line-height: 1; height: .55em }
+[data-family="swiss"] .gz-quote { border-top: var(--rule-strong); padding-top: var(--sp-7) }
+.gz-quote__source { color: var(--text-helper) }
+[data-medium="page"][data-family="magazine"] .gz-quote { align-items: center; text-align: center; padding: var(--sp-9) 0 }
+
+/* ---------- 流程 process：幻灯片 / 网页横排，卡片竖排 ---------- */
+.gz-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--sp-7) }
+.gz-process__step { display: flex; flex-direction: column; gap: var(--sp-4); border-top: var(--rule-strong); padding-top: var(--sp-5); min-width: 0 }
+.gz-process__nb { color: var(--accent-ink) }
+.gz-process__title { margin: 0 }
+.gz-process__desc { margin: 0; color: var(--text-secondary) }
+[data-medium="card"] .gz-process { grid-template-columns: 1fr; gap: 0; border-bottom: var(--rule) }
+[data-medium="card"] .gz-process__step { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--sp-6); row-gap: var(--sp-3); padding: var(--sp-7) 0 }
+[data-medium="card"] .gz-process__step + .gz-process__step { border-top: var(--rule) }
+[data-medium="card"] .gz-process__nb { grid-row: span 2 }
+[data-medium="page"] .gz-process { --n: 2; row-gap: var(--sp-8) }
+
+/* ---------- 对比 compare：左右分栏，卡片上下叠 ---------- */
+.gz-compare { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 0 var(--sp-9) }
+.gz-compare__rule { background: var(--line-strong) }
+.gz-compare__side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0 }
+.gz-compare__tag { color: var(--text-helper) }
+.gz-compare__side[data-side="after"] .gz-compare__tag { color: var(--accent-ink) }
+.gz-compare__title { margin: 0 }
+.gz-compare__side[data-side="before"] .gz-compare__title { color: var(--text-secondary) }
+.gz-compare__desc { margin: 0; color: var(--text-secondary) }
+.gz-compare__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); color: var(--text-body) }
+.gz-compare__list li { padding-left: 1.2em; position: relative }
+.gz-compare__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5em; border-top: 1px solid currentColor }
+[data-family="swiss"] .gz-compare__side[data-side="after"][data-surface] { padding: var(--sp-8) }
+[data-medium="card"] .gz-compare { grid-template-columns: 1fr; gap: var(--sp-8) 0 }
+[data-medium="card"] .gz-compare__rule { height: 1px }
+
+/* ---------- 图框 figure：照片 cover 裁切，截图 contain 放在底台上 ---------- */
+.gz-figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0 }
+.gz-figure__well { position: relative; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; background: var(--paper-2) }
+.gz-figure__well > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos) }
+.gz-figure[data-ratio="16x9"] { --ratio: 16 / 9 } .gz-figure[data-ratio="16x10"] { --ratio: 16 / 10 } .gz-figure[data-ratio="4x3"] { --ratio: 4 / 3 }
+.gz-figure[data-ratio="3x2"] { --ratio: 3 / 2 } .gz-figure[data-ratio="1x1"] { --ratio: 1 } .gz-figure[data-ratio="3x4"] { --ratio: 3 / 4 } .gz-figure[data-ratio="21x9"] { --ratio: 21 / 9 }
+.gz-figure[data-kind="screenshot"] .gz-figure__well { display: flex; align-items: center; justify-content: center; padding: var(--inset, var(--sp-8)) }
+.gz-figure[data-kind="screenshot"] .gz-figure__well > img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line) }
+[data-family="magazine"] .gz-figure[data-kind="screenshot"] .gz-figure__well > img { box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(var(--ink-rgb), .45) }
+[data-family="swiss"] .gz-figure[data-kind="screenshot"] .gz-figure__well { background: var(--grey-1); border-top: 3px solid var(--accent) }
+[data-family="swiss"] .gz-figure[data-kind="screenshot"] .gz-figure__well > img { border-radius: 0 }
+.gz-figure__cap { color: var(--text-helper); display: flex; gap: var(--sp-4) }
+.gz-figure__idx { color: var(--accent-ink); flex: none }
+
+/* ---------- 图片网格 gallery ---------- */
+.gz-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6) }
+[data-medium="card"] .gz-gallery { --cols: 2 }
+[data-medium="card"] .gz-gallery[data-count="3"] > :first-child { grid-column: 1 / -1; --ratio: 16 / 9 }
+
+/* ---------- 条目清单 ledger ---------- */
+.gz-ledger { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong) }
+.gz-ledger__row { display: grid; grid-template-columns: var(--nb-w, 3.2em) minmax(0, 1fr) auto; column-gap: var(--sp-6); align-items: baseline; padding: var(--sp-6) 0; border-bottom: var(--rule) }
+.gz-ledger__nb { color: var(--accent-ink) }
+.gz-ledger__title { margin: 0 }
+.gz-ledger__note { margin: var(--sp-2) 0 0; color: var(--text-secondary) }
+.gz-ledger__value { color: var(--text-helper); text-align: right; white-space: nowrap }
+[data-medium="card"] .gz-ledger__row { --nb-w: 72px; padding: var(--sp-7) 0 }
+
+/* 歸藏设计系统 · 纹理与特效图层（纯 CSS，颜色全部来自 token）
+ * 来源：PPT 瑞士风 .dots / .dot-mat / .ring-mat / .cross-mat / .hatch，卡片杂志风 .grain / .paper-wash。
+ */
+
+/* 特效画布：铺满父容器、在内容下面、不挡点击。父容器需要 position: relative */
+.gz-effect { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0 }
+.gz-layer-content { position: relative; z-index: 1 }
+
+/* 点阵：前景色画点，跟随所在表面的文字色 */
+.gz-dots      { background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 12px 12px; opacity: .18 }
+.gz-dots-fine { background-image: radial-gradient(currentColor .8px, transparent 1px); background-size: 8px 8px; opacity: .14 }
+.gz-dots-bold { background-image: radial-gradient(currentColor 1.4px, transparent 1.6px); background-size: 18px 18px; opacity: .22 }
+
+.gz-dot-mat         { --mat: 14px; background-image: radial-gradient(currentColor 1.4px, transparent 1.6px); background-size: var(--mat) var(--mat); opacity: .5 }
+.gz-dot-mat.is-lg   { --mat: 22px } .gz-dot-mat.is-xl { --mat: 34px }
+.gz-dot-mat.is-dense{ --mat: 9px; opacity: .62 }
+.gz-ring-mat        { --mat: 18px; background-image: radial-gradient(circle, transparent 2px, currentColor 2px, currentColor 2.7px, transparent 2.9px); background-size: var(--mat) var(--mat); opacity: .55 }
+.gz-ring-mat.is-lg  { --mat: 28px }
+.gz-cross-mat       { --mat: 22px; background: currentColor; opacity: .42;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M8 8l6 6M14 8l-6 6' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / var(--mat) var(--mat);
+          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M8 8l6 6M14 8l-6 6' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / var(--mat) var(--mat) }
+.gz-cross-mat.is-lg { --mat: 32px }
+.gz-hatch           { background-image: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 8px); opacity: .55 }
+
+/* 纸张颗粒与墨色晕染：杂志风卡片的「氛围层」，叠在特效画布上、内容下 */
+.gz-grain      { position: absolute; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: multiply; opacity: .35;
+                 background-image: radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px); background-size: 3px 3px }
+[data-scheme="dark"] .gz-grain, .gz-grain.is-dark { mix-blend-mode: screen; opacity: .26; background-image: radial-gradient(rgba(255,244,214,.10) 1px, transparent 1px) }
+.gz-paper-wash { position: absolute; inset: 0; pointer-events: none; z-index: 0;
+                 background: linear-gradient(180deg, rgba(var(--ink-rgb), .02), rgba(var(--ink-rgb), .05) 60%, rgba(var(--ink-rgb), .08)) }
+.gz-ink-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 0;
+                 background: radial-gradient(circle at 18% 12%, rgba(var(--ink-rgb), .10), transparent 34%), radial-gradient(circle at 82% 80%, rgba(var(--accent-rgb), .10), transparent 38%) }
+
+/* PPT 杂志风：WebGL 背景上的纸 / 墨蒙版，保证文字可读（原 .slide.light/.dark::before） */
+.gz-veil       { position: absolute; inset: 0; pointer-events: none; z-index: 0; backdrop-filter: blur(3px); background: rgba(var(--paper-rgb), .78) }
+.gz-veil.is-ink{ background: rgba(var(--ink-rgb), .78) }
+.gz-veil.is-hero { backdrop-filter: none; background: rgba(var(--paper-rgb), .16) }
+.gz-veil.is-hero.is-ink { background: rgba(var(--ink-rgb), .12) }
+
+@media (prefers-reduced-motion: reduce) { .gz-effect { animation: none } }
+
+/* 旧变量名别名（迁移期保留） */
+:root{--sans:var(--font-sans);--sans-zh:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;--mono:var(--font-mono);--border-subtle:var(--line-subtle);--border-strong:var(--line-strong);--ease-prod:var(--ease-standard);--ease-exp:var(--ease-expressive);--ease-entry-prod:var(--ease-entrance-standard);--ease-entry-exp:var(--ease-entrance);--dur-mod-1:var(--dur-moderate-1);--dur-mod-2:var(--dur-moderate-2);--nav-safe-bottom:var(--canvas-safe-bottom)}
+/* 模板自己的反色块 → 设计系统反色表面 */
+.slide.dark,.split-half > .half.b-ink,.card-ink,.ink-block{--text-primary: var(--paper);--text-body: rgba(var(--paper-rgb), .86);--text-secondary: rgba(var(--paper-rgb), .72);--text-helper: rgba(var(--paper-rgb), .62);--line: rgba(var(--paper-rgb), .22);--line-strong: rgba(var(--paper-rgb), .45);--accent-ink: var(--accent-ink-inverse);--accent-display: var(--accent-ink-inverse);--rule-strong: 2px solid var(--paper)}
+.slide.accent,.split-half > .half.b-accent,.card-accent,.accent-block{--text-primary: var(--accent-on);--text-body: rgba(var(--accent-on-rgb), .88);--text-secondary: rgba(var(--accent-on-rgb), .78);--text-helper: rgba(var(--accent-on-rgb), .7);--line: rgba(var(--accent-on-rgb), .3);--line-strong: rgba(var(--accent-on-rgb), .55);--accent-ink: var(--accent-on);--accent-display: var(--accent-on);--rule-strong: 2px solid var(--accent-on)}
+/* GZ:TOKENS:END */
   *{box-sizing:border-box;margin:0;padding:0}
   html,body{
     width:100%;height:100%;overflow:hidden;
@@ -136,7 +620,7 @@
   .chrome{
     display:flex;justify-content:space-between;align-items:flex-start;
     font-family:var(--mono);
-    font-size:14px;letter-spacing:.16em;text-transform:uppercase;
+    font-size:min(14px,1.944vh);letter-spacing:.16em;text-transform:uppercase;
     opacity:.7;margin-bottom:auto
   }
   .chrome .l,.chrome .r{display:flex;gap:1.6em;align-items:center}
@@ -146,7 +630,7 @@
     margin-top:auto;
     display:flex;justify-content:space-between;align-items:flex-end;
     font-family:var(--mono);
-    font-size:14px;letter-spacing:.14em;text-transform:uppercase;
+    font-size:min(14px,1.944vh);letter-spacing:.14em;text-transform:uppercase;
     opacity:.55;
     padding-top:2vh;
     border-top:1px solid currentColor;
@@ -157,20 +641,19 @@
   /* ============ Tag / Kicker / Meta 标签 ============ */
   .kicker{
     font-family:var(--mono);
-    font-size:14px;letter-spacing:.24em;text-transform:uppercase;
+    font-size:min(14px,1.944vh);letter-spacing:.24em;text-transform:uppercase;
     opacity:.65;margin-bottom:2.4vh;
-    display:inline-flex;align-items:center;gap:.8em
-  }
+    display:inline-flex;align-items:center;gap:.8em}
   .kicker::before{
     content:"";width:24px;height:1px;background:currentColor;opacity:.6
   }
   .kicker.no-line::before{display:none}
-  .kicker.accent{color:var(--accent);opacity:1;font-weight:600}
+  .kicker.accent{color:var(--accent-ink);opacity:1;font-weight:600}
 
   .tag{
     display:inline-block;
     font-family:var(--mono);
-    font-size:14px;letter-spacing:.18em;text-transform:uppercase;
+    font-size:min(14px,1.944vh);letter-spacing:.18em;text-transform:uppercase;
     padding:5px 10px;border:1px solid currentColor;opacity:.85
   }
   .tag.solid{background:currentColor;color:var(--paper);border-color:transparent}
@@ -180,42 +663,42 @@
   .h-hero{
     font-family:var(--sans),var(--sans-zh);
     font-weight:200;
-    font-size:11vw;
+    font-size:min(11vw,19.56vh);
     line-height:.92;
     letter-spacing:-.04em;
   }
   .h-hero-zh{
     font-family:var(--sans),var(--sans-zh);
     font-weight:200;
-    font-size:8.4vw;
+    font-size:min(8.4vw,14.93vh);
     line-height:.96;
     letter-spacing:-.025em;
   }
   .h-xl{
     font-family:var(--sans),var(--sans-zh);
     font-weight:200;
-    font-size:6vw;
+    font-size:min(6vw,10.67vh);
     line-height:1;
     letter-spacing:-.03em;
   }
   .h-xl-zh{
     font-family:var(--sans),var(--sans-zh);
     font-weight:200;
-    font-size:5vw;
+    font-size:min(5vw,8.889vh);
     line-height:1.05;
     letter-spacing:-.025em;
   }
   .h-md{
     font-family:var(--sans),var(--sans-zh);
     font-weight:300;
-    font-size:2.6vw;
+    font-size:min(2.6vw,4.622vh);
     line-height:1.18;
     letter-spacing:-.015em;
   }
   .h-sub{
     font-family:var(--sans),var(--sans-zh);
     font-weight:400;
-    font-size:2.2vw;
+    font-size:min(2.2vw,3.911vh);
     line-height:1.3;
     letter-spacing:-.01em;
     opacity:.7;
@@ -225,7 +708,7 @@
   .lead{
     font-family:var(--sans),var(--sans-zh);
     font-weight:400;
-    font-size:1.55vw;
+    font-size:min(1.55vw,2.756vh);
     line-height:1.4;
     letter-spacing:-.005em;
     opacity:.86;
@@ -233,7 +716,7 @@
   .body{
     font-family:var(--sans),var(--sans-zh);
     font-weight:400;
-    font-size:max(18px,1.08vw);
+    font-size:max(min(18px,2.5vh),min(1.08vw,1.92vh));
     line-height:1.6;
     letter-spacing:0;
     opacity:.78;
@@ -241,20 +724,20 @@
   .body-sm{
     font-family:var(--sans),var(--sans-zh);
     font-weight:400;
-    font-size:max(16px,.92vw);
+    font-size:max(min(16px,2.222vh),.92vw);
     line-height:1.55;
     opacity:.7;
   }
   .meta{
     font-family:var(--mono);
-    font-size:max(14px,.82vw);
+    font-size:max(min(14px,1.944vh),.82vw);
     letter-spacing:.18em;text-transform:uppercase;
     opacity:.6;
   }
   .meta-row{
     display:flex;gap:1.4em;align-items:baseline;flex-wrap:wrap;
     font-family:var(--mono);
-    font-size:max(14px,.88vw);letter-spacing:.16em;text-transform:uppercase;
+    font-size:max(min(14px,1.944vh),.88vw);letter-spacing:.16em;text-transform:uppercase;
     opacity:.65;
   }
   .meta-row span:not(.dot){display:inline-block}
@@ -267,7 +750,7 @@
   .kpi-hero{
     font-family:var(--sans);
     font-weight:800;
-    font-size:22vw;
+    font-size:min(22vw,39.11vh);
     line-height:.82;
     letter-spacing:-.05em;
     font-feature-settings:"tnum","ss01";
@@ -281,11 +764,11 @@
     margin-left:.12em;
     vertical-align:.5em;
   }
-  .kpi-hero.accent{color:var(--accent)}
+  .kpi-hero.accent{color:var(--accent-display)}
   .kpi-big{
     font-family:var(--sans);
     font-weight:800;
-    font-size:11vw;
+    font-size:min(11vw,19.56vh);
     line-height:.85;
     letter-spacing:-.04em;
     font-feature-settings:"tnum"
@@ -293,7 +776,7 @@
   .kpi-mid{
     font-family:var(--sans);
     font-weight:700;
-    font-size:6vw;
+    font-size:min(6vw,10.67vh);
     line-height:.88;
     letter-spacing:-.03em;
     font-feature-settings:"tnum"
@@ -310,14 +793,14 @@
   .stat-card.accent-top{border-top-color:var(--accent);border-top-width:3px}
   .stat-card .stat-label{
     font-family:var(--mono);
-    font-size:max(14px,.82vw);
+    font-size:max(min(14px,1.944vh),.82vw);
     letter-spacing:.24em;text-transform:uppercase;
     opacity:.6;
   }
   .stat-card .stat-nb{
     font-family:var(--sans);
     font-weight:800;
-    font-size:5.6vw;
+    font-size:min(5.6vw,9.956vh);
     line-height:.88;
     letter-spacing:-.035em;
     font-feature-settings:"tnum";
@@ -335,14 +818,14 @@
   .stat-card .stat-note{
     font-family:var(--sans),var(--sans-zh);
     font-weight:400;
-    font-size:max(16px,.98vw);
+    font-size:max(min(16px,2.222vh),.98vw);
     line-height:1.5;
     opacity:.7;
     margin-top:.6vh;
   }
-  .grid-4 .stat-card .stat-nb{font-size:4.6vw}
-  .grid-3 .stat-card .stat-nb{font-size:6.4vw}
-  .grid-6 .stat-card .stat-nb{font-size:4vw}
+  .grid-4 .stat-card .stat-nb{font-size:min(4.6vw,8.178vh)}
+  .grid-3 .stat-card .stat-nb{font-size:min(6.4vw,11.38vh)}
+  .grid-6 .stat-card .stat-nb{font-size:min(4vw,7.111vh)}
 
   /* ============ Accent Block (高亮色块包裹内容) ============ */
   .accent-block{
@@ -404,18 +887,18 @@
   .span-12{grid-column:span 12}
 
   /* 经典分栏 */
-  .grid-2-7-5{display:grid;grid-template-columns:7fr 5fr;gap:3vw 4vh;align-items:start}
-  .grid-2-6-6{display:grid;grid-template-columns:1fr 1fr;gap:3vw 4vh;align-items:start}
-  .grid-2-8-4{display:grid;grid-template-columns:8fr 4fr;gap:3vw 4vh;align-items:start}
-  .grid-2-4-8{display:grid;grid-template-columns:4fr 8fr;gap:3vw 4vh;align-items:start}
-  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:3vw 4vh;align-items:start}
+  .grid-2-7-5{display:grid;grid-template-columns:7fr 5fr;gap:min(3vw,5.333vh) 4vh;align-items:start}
+  .grid-2-6-6{display:grid;grid-template-columns:1fr 1fr;gap:min(3vw,5.333vh) 4vh;align-items:start}
+  .grid-2-8-4{display:grid;grid-template-columns:8fr 4fr;gap:min(3vw,5.333vh) 4vh;align-items:start}
+  .grid-2-4-8{display:grid;grid-template-columns:4fr 8fr;gap:min(3vw,5.333vh) 4vh;align-items:start}
+  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:min(3vw,5.333vh) 4vh;align-items:start}
   .grid-3-3{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(0,1fr);gap:2.4vh 2vw}
   .grid-4{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:3vh 3vw;flex:1;align-content:center}
   .grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:3vh 2.4vw;flex:1;align-content:center}
 
   /* 工具类 */
   .col{display:flex;flex-direction:column;gap:2vh}
-  .row{display:flex;align-items:center;gap:2vw}
+  .row{display:flex;align-items:center;gap:min(2vw,3.556vh) 2vw}
   .fill{flex:1}
   .center{align-items:center;justify-content:center;text-align:center}
   .right{text-align:right;justify-self:end}
@@ -436,7 +919,7 @@
     padding:2vh 2vw;
     border-left:3px solid var(--accent);
     font-family:var(--sans),var(--sans-zh);
-    font-size:max(14px,1vw);
+    font-size:max(min(14px,1.944vh),min(1vw,1.778vh));
     line-height:1.55;
     opacity:.9;
   }
@@ -444,7 +927,7 @@
   .callout .cite,.callout .callout-src{
     display:block;margin-top:1.2vh;
     font-family:var(--mono);
-    font-size:14px;letter-spacing:.16em;text-transform:uppercase;
+    font-size:min(14px,1.944vh);letter-spacing:.16em;text-transform:uppercase;
     opacity:.6;
   }
 
@@ -463,7 +946,7 @@
 
   /* ============ 图片 frame-img ============ */
   .frame-img{overflow:hidden;position:relative;background:var(--paper);box-sizing:border-box;width:100%}
-  .slide.dark .frame-img{background:rgba(255,255,255,.06)}
+  .slide.dark .frame-img{background:rgba(var(--paper-rgb),.06)}
   .frame-img > img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
   .frame-img.fit-contain > img{object-fit:contain;object-position:center center}
   .frame-img.pos-top > img{object-position:top center}
@@ -486,16 +969,16 @@
 
   /* P22 Image Hero: 下半屏内容区必须和图片拉开距离,不要贴在图下沿 */
   .image-hero-body{
-    display:grid;grid-template-columns:6fr 6fr;gap:3vw;
+    display:grid;grid-template-columns:6fr 6fr;gap:min(3vw,5.333vh) 3vw;
     padding:6.6vh 5vw 4.4vh;flex:1;align-content:start
   }
   .image-hero-stats{
-    display:grid;grid-template-columns:repeat(3,1fr);gap:2vw;align-items:start
+    display:grid;grid-template-columns:repeat(3,1fr);gap:min(2vw,3.556vh) 2vw;align-items:start
   }
   .img-cap{
     display:block;margin-top:.8vh;
     font-family:var(--mono);
-    font-size:max(14px,.82vw);
+    font-size:max(min(14px,1.944vh),.82vw);
     letter-spacing:.2em;text-transform:uppercase;
     opacity:.6;
   }
@@ -503,7 +986,7 @@
   figure.tile > .frame-img{flex:0 0 auto}
 
   /* 瑞士风图文混排: 只用直角、发丝线、单一 accent；图像容器不加圆角/阴影 */
-  .swiss-img-split{display:grid;grid-template-columns:5fr 7fr;gap:3vw;align-items:start;flex:1;min-height:0}
+  .swiss-img-split{display:grid;grid-template-columns:5fr 7fr;gap:min(3vw,5.333vh) 3vw;align-items:start;flex:1;min-height:0}
   .swiss-img-split.reverse{grid-template-columns:7fr 5fr}
   .swiss-img-split.align-bottom{align-items:end}
   .swiss-img-split.align-bottom .swiss-img-copy{align-self:end}
@@ -523,23 +1006,23 @@
   .swiss-img-caption{
     display:flex;justify-content:space-between;gap:var(--sp-5);
     margin-top:var(--sp-4);
-    font-family:var(--mono);font-size:max(14px,.74vw);
+    font-family:var(--mono);font-size:max(min(14px,1.944vh),.74vw);
     letter-spacing:.16em;text-transform:uppercase;color:var(--text-helper);
     border-top:1px solid var(--border-subtle);padding-top:var(--sp-4)
   }
   .swiss-img-caption strong{
-    font-family:var(--sans),var(--sans-zh);font-size:max(16px,.9vw);
+    font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.9vw);
     font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-primary)
   }
 
   /* ============ Bar Chart (扁平几何图表) ============ */
   .bar-chart{display:flex;flex-direction:column;gap:1.4vh}
-  .bar-row{display:grid;grid-template-columns:8em 1fr 4em;gap:1.4vw;align-items:center}
-  .bar-row .bar-label{font-family:var(--mono);font-size:max(14px,.84vw);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
+  .bar-row{display:grid;grid-template-columns:8em 1fr 4em;gap:min(1.4vw,2.489vh) 1.4vw;align-items:center}
+  .bar-row .bar-label{font-family:var(--mono);font-size:max(min(14px,1.944vh),.84vw);letter-spacing:.14em;text-transform:uppercase;opacity:.7}
   .bar-row .bar-track{height:14px;background:rgba(127,127,127,.18);position:relative}
   .bar-row .bar-fill{height:100%;background:var(--accent);position:absolute;left:0;top:0}
   .bar-row .bar-fill.ink{background:currentColor}
-  .bar-row .bar-value{font-family:var(--sans);font-weight:700;font-size:max(16px,1.05vw);text-align:right;font-feature-settings:"tnum"}
+  .bar-row .bar-value{font-family:var(--sans);font-weight:700;font-size:max(min(16px,2.222vh),min(1.05vw,1.867vh));text-align:right;font-feature-settings:"tnum"}
 
   /* ============ 导航 ============ */
   /* 底部分页导航: 仅保留方块本身,无背景无描边 */
@@ -547,17 +1030,20 @@
   #nav .dot{width:6px;height:6px;background:rgba(0,0,0,.28);cursor:pointer;transition:all .25s ease;border:0;padding:0;border-radius:0}
   #nav .dot:hover{background:rgba(0,0,0,.55)}
   #nav .dot.active{background:var(--accent);width:18px}
-  body.dark-bg #nav .dot{background:rgba(255,255,255,.32)}
-  body.dark-bg #nav .dot.active{background:var(--accent)}
+  body.dark-bg #nav .dot{background:rgba(var(--paper-rgb),.32)}
+  body.dark-bg #nav .dot.active{background:var(--accent-ink-inverse)}
+  body.accent-bg #nav .dot{background:rgba(var(--accent-on-rgb),.35)}
+  body.accent-bg #nav .dot.active{background:var(--accent-on)}
 
-  #hint{position:fixed;bottom:2.4vh;right:2.5vw;z-index:30;display:flex;align-items:center;gap:.65em;font-family:var(--mono);font-size:14px;letter-spacing:.14em;text-transform:uppercase;opacity:.4}
+  #hint{position:fixed;bottom:2.4vh;right:2.5vw;z-index:30;display:flex;align-items:center;gap:.65em;font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.14em;text-transform:uppercase;opacity:.4}
   #hint button{all:unset;display:inline-flex;align-items:center;gap:.42em;cursor:pointer;color:inherit;white-space:nowrap}
   #hint button:hover,#hint button:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:.3em}
   #hint .ppt-key{padding:.12em .34em;border:1px solid currentColor;letter-spacing:.06em}
   #hint .ppt-sep{opacity:.55}
   body.dark-bg #hint{color:var(--paper);opacity:.4}
-  body.low-power #hint{color:var(--accent);opacity:.72}
+  body.low-power #hint{color:var(--accent-ink);opacity:.72}
   body.dark-bg.low-power #hint{color:var(--paper);opacity:.72}
+  body.accent-bg #hint,body.accent-bg.low-power #hint{color:var(--accent-on);opacity:.6}
 
   /* ============ 演讲者模式 ============ */
   body.ppt-audience #hint,body.ppt-audience #nav,
@@ -598,7 +1084,7 @@
   #overview{z-index:110!important}
   @media(max-width:1200px){.ppt-presenter-main{grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr)}}
   @media(max-width:1100px){.ppt-presenter-bottom{grid-template-columns:minmax(292px,1fr) auto minmax(86px,.6fr);gap:12px}.ppt-time-stat{min-width:82px;padding:0 11px}.ppt-time-value{font-size:20px}.ppt-controls .ppt-ui-btn,.ppt-session-actions .ppt-ui-btn{min-width:60px;padding:8px 9px}}
-  @media(max-width:900px){.ppt-presenter-top{padding:12px 16px;flex-wrap:wrap}.ppt-presenter-top .ppt-presenter-meta{gap:6px}.ppt-presenter-top .ppt-ui-btn{padding:8px 9px}.ppt-presenter-main,#ppt-presenter[data-layout="slides"] .ppt-presenter-main,#ppt-presenter[data-layout="notes"] .ppt-presenter-main{grid-template-columns:minmax(0,1.45fr) minmax(250px,.72fr);gap:12px;padding:12px 16px}.ppt-preview-stack{gap:12px;grid-template-rows:minmax(0,1fr) clamp(104px,20vh,150px)}.ppt-saved{display:none}.ppt-presenter-bottom{grid-template-columns:minmax(270px,1fr) auto 74px;gap:8px;padding:9px 16px}.ppt-time-stat{min-width:0;padding:0 9px}.ppt-time-value{font-size:18px}.ppt-time-hint{max-width:78px;overflow:hidden;text-overflow:ellipsis}.ppt-controls,.ppt-session-actions{gap:5px}.ppt-controls .ppt-ui-btn,.ppt-session-actions .ppt-ui-btn{min-width:52px;padding:7px 8px;font-size:12px}.ppt-page-state strong{font-size:14px}.ppt-dialog-grid{grid-template-columns:1fr}.ppt-segmented.screen{grid-template-columns:repeat(2,1fr)}}
+  @media(max-width:900px){.ppt-presenter-top{padding:12px 16px;flex-wrap:wrap}.ppt-presenter-top .ppt-presenter-meta{gap:6px}.ppt-presenter-top .ppt-ui-btn{padding:8px 9px}.ppt-presenter-main,#ppt-presenter[data-layout="slides"] .ppt-presenter-main,#ppt-presenter[data-layout="notes"] .ppt-presenter-main{grid-template-columns:minmax(0,1.45fr) minmax(250px,.72fr);gap:12px;padding:12px 16px}.ppt-preview-stack{gap:12px;grid-template-rows:minmax(0,1fr) clamp(104px,20vh,150px)}.ppt-saved{display:none}.ppt-presenter-bottom{grid-template-columns:minmax(270px,1fr) auto 74px;gap:8px;padding:9px 16px}.ppt-time-stat{min-width:0;padding:0 9px}.ppt-time-value{font-size:min(18px,2.5vh)}.ppt-time-hint{max-width:78px;overflow:hidden;text-overflow:ellipsis}.ppt-controls,.ppt-session-actions{gap:5px}.ppt-controls .ppt-ui-btn,.ppt-session-actions .ppt-ui-btn{min-width:52px;padding:7px 8px;font-size:min(12px,1.667vh)}.ppt-page-state strong{font-size:min(14px,1.944vh)}.ppt-dialog-grid{grid-template-columns:1fr}.ppt-segmented.screen{grid-template-columns:repeat(2,1fr)}}
   @media(max-height:700px){.ppt-presenter-top{padding-top:10px;padding-bottom:10px}.ppt-presenter-main{padding-top:10px;padding-bottom:10px}.ppt-preview-stack{grid-template-rows:minmax(0,1fr) clamp(88px,16vh,118px);gap:10px}.ppt-stage-label{padding:7px 10px}.ppt-notes-head{padding:12px 14px}.ppt-purpose-block{margin-top:10px;padding:8px 10px}.ppt-notes-draft-head{margin-top:10px;padding-top:9px}.ppt-presenter-bottom{padding-top:8px;padding-bottom:8px}.ppt-control-stack{gap:5px}.ppt-session-actions{padding-top:5px}}
   /* ============ /演讲者模式 ============ */
 
@@ -609,7 +1095,7 @@
   /* 统一卡片样式 token: card-fill (默认灰底 · 中性) + card-ink (反转高对比) + card-accent (单一焦点) */
   .card-fill{background:#f5f5f4;border:0;color:var(--text-primary)}
   .card-ink{background:var(--ink);border:0;color:var(--paper)}
-  .card-ink .t-meta,.card-ink .t-cat{color:rgba(255,255,255,.6)}
+  .card-ink .t-meta,.card-ink .t-cat{color:rgba(var(--paper-rgb),.6)}
   .card-accent{background:var(--accent);border:0;color:var(--accent-on)}
   .card-accent .t-meta,.card-accent .t-cat{color:var(--accent-on)}
 
@@ -671,34 +1157,34 @@
     mix-blend-mode:screen;opacity:.92;
   }
   .canvas-card > *:not(.ascii-bg){position:relative;z-index:1}
-  .slide.accent .canvas-card .chrome-min{color:rgba(255,255,255,.62)}
-  .slide.accent .canvas-card .t-meta{color:rgba(255,255,255,.7)}
-  .split-half > .half.b-accent .chrome-min{color:rgba(255,255,255,.62)}
+  .slide.accent .canvas-card .chrome-min{color:rgba(var(--accent-on-rgb),.62)}
+  .slide.accent .canvas-card .t-meta{color:rgba(var(--accent-on-rgb),.7)}
+  .split-half > .half.b-accent .chrome-min{color:rgba(var(--accent-on-rgb),.62)}
 
   /* 编号目录页 · 超大数字 + 国家名风格 — 越大越细 */
   .num-mega{
     font-family:var(--sans);font-weight:200;
-    font-size:9vw;line-height:1;letter-spacing:-.04em;
+    font-size:min(9vw,16vh);line-height:1;letter-spacing:-.04em;
     font-feature-settings:"tnum"
   }
   .num-mega.thin{font-weight:200}
   .name-mega{
     font-family:var(--sans);font-weight:200;
-    font-size:9vw;line-height:1;letter-spacing:-.035em;
+    font-size:min(9vw,16vh);line-height:1;letter-spacing:-.035em;
   }
   .name-mega.muted{color:var(--grey-3)}
 
   /* 细体超大 KPI — 字号越大权重越低 */
   .kpi-thin{
     font-family:var(--sans);font-weight:200;
-    font-size:14vw;line-height:.92;letter-spacing:-.045em;
+    font-size:min(14vw,24.89vh);line-height:.92;letter-spacing:-.045em;
     font-feature-settings:"tnum"
   }
   .kpi-thin .unit{font-size:.3em;font-weight:300;opacity:.55;margin-left:.15em;vertical-align:.6em}
-  .kpi-thin.accent{color:var(--accent)}
+  .kpi-thin.accent{color:var(--accent-display)}
   .kpi-thin-sm{
     font-family:var(--sans);font-weight:250;
-    font-size:5.6vw;line-height:1.04;letter-spacing:-.03em;
+    font-size:min(5.6vw,9.956vh);line-height:1.04;letter-spacing:-.03em;
     font-feature-settings:"tnum"
   }
   .kpi-thin-sm .unit{font-size:.3em;font-weight:300;opacity:.55;margin-left:.12em;vertical-align:.45em}
@@ -715,10 +1201,10 @@
     border-left:1px solid var(--grey-2)
   }
   .kpi-row-4 > .kpi-cell:first-child{padding-left:0;border-left:none}
-  .kpi-cell .lbl{font-family:var(--mono);font-size:max(14px,.78vw);letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:1.2vh}
-  .kpi-cell .nb{font-family:var(--sans);font-weight:250;font-size:3.2vw;line-height:1;letter-spacing:-.025em;font-feature-settings:"tnum"}
+  .kpi-cell .lbl{font-family:var(--mono);font-size:max(min(14px,1.944vh),.78vw);letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-bottom:1.2vh}
+  .kpi-cell .nb{font-family:var(--sans);font-weight:250;font-size:min(3.2vw,5.689vh);line-height:1;letter-spacing:-.025em;font-feature-settings:"tnum"}
   .kpi-cell .nb .unit{font-size:.32em;font-weight:300;opacity:.6;margin-left:.1em;vertical-align:.4em}
-  .kpi-cell .note{font-family:var(--sans),var(--sans-zh);font-size:max(16px,.92vw);line-height:1.5;opacity:.7;margin-top:1.2vh}
+  .kpi-cell .note{font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.92vw);line-height:1.5;opacity:.7;margin-top:1.2vh}
 
   /* 时间线轴 — 通用 axis token, 横纵共享
      axis 列 = 24px 固定宽,dot 直径 8px,绝对居中在 axis 列中线 (12px)
@@ -756,7 +1242,7 @@
   .tl-node.accent .dot{background:var(--accent)}
   .tl-node .yr{
     font-family:var(--mono);font-weight:500;
-    font-size:max(14px,1vw);letter-spacing:.04em
+    font-size:max(min(14px,1.944vh),min(1vw,1.778vh));letter-spacing:.04em
   }
   .tl-node .multi{
     font-family:var(--sans);font-weight:200;
@@ -772,10 +1258,10 @@
     vertical-align:.42em;
     letter-spacing:0
   }
-  .tl-node.accent .multi{color:var(--accent)}
+  .tl-node.accent .multi{color:var(--accent-display)}
   .tl-node .desc{
     font-family:var(--sans),var(--sans-zh);
-    font-size:max(16px,.94vw);line-height:1.55;opacity:.78;
+    font-size:max(min(16px,2.222vh),.94vw);line-height:1.55;opacity:.78;
     min-width:0
   }
 
@@ -813,22 +1299,21 @@
   .timeline-h .th-node .label{
     position:absolute;left:50%;transform:translateX(-50%);
     width:13vw;text-align:center;
-    display:flex;flex-direction:column;gap:.4vh
-  }
+    display:flex;flex-direction:column;gap:.4vh}
   .timeline-h .th-node.up .label{bottom:calc(50% + 22px)}
   .timeline-h .th-node.down .label{top:calc(50% + 22px)}
   .timeline-h .th-node .yr{
-    font-family:var(--mono);font-size:max(14px,.78vw);letter-spacing:.05em;
+    font-family:var(--mono);font-size:max(min(14px,1.944vh),.78vw);letter-spacing:.05em;
     color:var(--text-helper);font-weight:500
   }
-  .timeline-h .th-node.accent .yr{color:var(--accent)}
+  .timeline-h .th-node.accent .yr{color:var(--accent-ink)}
   .timeline-h .th-node .name{
-    font-family:var(--sans);font-size:max(16px,1.05vw);font-weight:400;
+    font-family:var(--sans);font-size:max(min(16px,2.222vh),min(1.05vw,1.867vh));font-weight:400;
     color:var(--text-primary);line-height:1.2;letter-spacing:-.005em
   }
-  .timeline-h .th-node.accent .name{color:var(--accent)}
+  .timeline-h .th-node.accent .name{color:var(--accent-ink)}
   .timeline-h .th-node .desc{
-    font-family:var(--sans),var(--sans-zh);font-size:max(14px,.84vw);
+    font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.84vw);
     color:var(--text-secondary);font-weight:400;line-height:1.4
   }
 
@@ -849,21 +1334,21 @@
     position:relative;border-radius:3px;
     min-height:0
   }
-  .slide.dark .sub-card{background:rgba(255,255,255,.06)}
+  .slide.dark .sub-card{background:rgba(var(--paper-rgb),.06)}
   .sub-card.accent{background:var(--accent);color:var(--accent-on)}
   .sub-card.ink{background:var(--ink);color:var(--paper)}
   .sub-card .nb-corner{
     position:absolute;top:1.6vh;right:1.4vw;
-    font-family:var(--mono);font-size:max(14px,.8vw);
+    font-family:var(--mono);font-size:max(min(14px,1.944vh),.8vw);
     letter-spacing:.16em;opacity:.55
   }
-  .sub-card .ttl{font-family:var(--sans),var(--sans-zh);font-weight:500;font-size:max(17px,1.5vw);line-height:1.2;letter-spacing:-.015em;margin-bottom:1vh}
-  .sub-card .desc{font-family:var(--sans),var(--sans-zh);font-size:max(16px,.94vw);line-height:1.55;opacity:.78;margin-top:auto}
+  .sub-card .ttl{font-family:var(--sans),var(--sans-zh);font-weight:500;font-size:max(min(17px,2.361vh),min(1.5vw,2.667vh));line-height:1.2;letter-spacing:-.015em;margin-bottom:1vh}
+  .sub-card .desc{font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.94vw);line-height:1.55;opacity:.78;margin-top:auto}
   .sub-card .lucide{width:2.4vw;height:2.4vw;stroke-width:1.4;color:currentColor;margin-bottom:1.6vh;flex-shrink:0}
   .sub-card.accent .lucide{color:var(--accent-on)}
 
   /* 三层架构纯色块拼图 (参考图 4 + 6) — 横排等高色块 */
-  .stack-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;flex:1;margin-top:6vh;align-items:stretch}
+  .stack-row{display:grid;grid-template-columns:repeat(3,1fr);gap:min(1.6vw,2.844vh) 1.6vw;flex:1;margin-top:6vh;align-items:stretch}
   .stack-block{
     display:flex;flex-direction:column;
     padding:3.2vh 1.8vw 2.4vh;
@@ -873,19 +1358,19 @@
   .stack-block.b-accent{background:var(--accent);color:var(--accent-on)}
   .stack-block.b-grey{background:var(--grey-1);color:var(--ink)}
   .stack-block.b-ink{background:var(--ink);color:var(--paper)}
-  .stack-block .layer-nb{font-family:var(--mono);font-size:max(14px,.84vw);letter-spacing:.18em;opacity:.65;margin-bottom:auto}
+  .stack-block .layer-nb{font-family:var(--mono);font-size:max(min(14px,1.944vh),.84vw);letter-spacing:.18em;opacity:.65;margin-bottom:auto}
   .stack-block .layer-icon{margin-bottom:1.6vh}
   .stack-block .layer-icon svg{width:3vw;height:3vw}
   .stack-block .layer-icon .stroke{fill:none;stroke:currentColor;stroke-width:1.6}
-  .stack-block .layer-ttl{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(17px,2vw);line-height:1.1;margin-top:1vh;letter-spacing:-.02em}
-  .stack-block .layer-desc{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(16px,.94vw);line-height:1.55;opacity:.88;margin-top:1.4vh}
+  .stack-block .layer-ttl{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(min(17px,2.361vh),min(2vw,3.556vh));line-height:1.1;margin-top:1vh;letter-spacing:-.02em}
+  .stack-block .layer-desc{font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(min(16px,2.222vh),.94vw);line-height:1.55;opacity:.88;margin-top:1.4vh}
   .stack-block .lucide{width:2.6vw;height:2.6vw;stroke-width:1.4;margin-bottom:1.6vh;flex-shrink:0}
-  .stack-block .layer-tag{font-family:var(--mono);font-size:max(14px,.74vw);letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:1.6vh;border-top:1px solid currentColor;padding-top:1vh}
+  .stack-block .layer-tag{font-family:var(--mono);font-size:max(min(14px,1.944vh),.74vw);letter-spacing:.16em;text-transform:uppercase;opacity:.7;margin-top:1.6vh;border-top:1px solid currentColor;padding-top:1vh}
 
   /* 不等高柱状 KPI 塔 (参考图 6) */
   .bar-towers{
     display:grid;grid-template-columns:repeat(4,1fr);
-    gap:1.2vw;flex:1;align-items:end;margin-top:auto
+    gap:min(1.2vw,2.133vh) 1.2vw;flex:1;align-items:end;margin-top:auto
   }
   .bar-tower{
     display:flex;flex-direction:column;justify-content:flex-end;
@@ -911,11 +1396,11 @@
   /* 默认所有 KPI 塔统一为浅描边卡 — 不抢戏;只有 .b-accent 突出为 IKB */
   .bar-tower .body-block{background:var(--paper);color:var(--ink);border:1px solid var(--grey-2)}
   .bar-tower .body-block.b-accent{background:var(--accent);color:var(--accent-on);border-color:var(--accent)}
-  .bar-tower .lbl{font-family:var(--mono);font-size:max(14px,.82vw);letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-bottom:1vh}
-  .bar-tower .nb{font-family:var(--sans);font-weight:250;font-size:max(20px,2.8vw);line-height:1;letter-spacing:-.03em;font-feature-settings:"tnum"}
+  .bar-tower .lbl{font-family:var(--mono);font-size:max(min(14px,1.944vh),.82vw);letter-spacing:.16em;text-transform:uppercase;opacity:.65;margin-bottom:1vh}
+  .bar-tower .nb{font-family:var(--sans);font-weight:250;font-size:max(min(20px,2.778vh),min(2.8vw,4.978vh));line-height:1;letter-spacing:-.03em;font-feature-settings:"tnum"}
   .bar-tower .body-block.b-accent .nb{font-weight:300}
   .bar-tower .nb .unit{font-size:.36em;font-weight:300;opacity:.7;margin-left:.08em;vertical-align:.4em}
-  .bar-tower .sub{font-family:var(--sans),var(--sans-zh);font-size:max(16px,.92vw);opacity:.75;margin-top:1.2vh;line-height:1.5}
+  .bar-tower .sub{font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.92vw);opacity:.75;margin-top:1.2vh;line-height:1.5}
   .bar-tower .cap{background:var(--grey-1);color:var(--ink)}
   .bar-tower .lucide{width:1.6vw;height:1.6vw;stroke-width:1.4}
 
@@ -926,17 +1411,17 @@
   /* category label / eyebrow / section tag — small, bold, uppercase */
   .t-cat{
     font-family:var(--mono);
-    font-size:14px;font-weight:600;
+    font-size:min(14px,1.944vh);font-weight:600;
     letter-spacing:.15em;text-transform:uppercase;
     color:var(--text-helper);line-height:1.3
   }
-  .t-cat.accent{color:var(--accent)}
-  .t-cat.on-dark{color:rgba(255,255,255,.78)}
+  .t-cat.accent{color:var(--accent-ink)}
+  .t-cat.on-dark{color:rgba(var(--paper-rgb),.78)}
 
   /* page chrome / breadcrumb / running header — extra-small mono */
   .t-meta{
     font-family:var(--mono);
-    font-size:14px;font-weight:500;
+    font-size:min(14px,1.944vh);font-weight:500;
     letter-spacing:.14em;text-transform:uppercase;
     color:var(--text-helper);line-height:1.45
   }
@@ -944,7 +1429,7 @@
   /* helper / caption — secondary text */
   .t-helper{
     font-family:var(--sans),var(--sans-zh);
-    font-size:14px;font-weight:400;
+    font-size:min(14px,1.944vh);font-weight:400;
     color:var(--text-helper);line-height:1.5;
     letter-spacing:.005em
   }
@@ -952,7 +1437,7 @@
   /* body small — list items, table rows, captions */
   .t-body-sm{
     font-family:var(--sans),var(--sans-zh);
-    font-size:16px;font-weight:400;
+    font-size:min(16px,2.222vh);font-weight:400;
     color:var(--text-secondary);line-height:1.55;
     letter-spacing:0
   }
@@ -960,7 +1445,7 @@
   /* body — paragraphs, descriptions */
   .t-body{
     font-family:var(--sans),var(--sans-zh);
-    font-size:18px;font-weight:400;
+    font-size:min(18px,2.5vh);font-weight:400;
     color:var(--text-primary);line-height:1.5;
     letter-spacing:-.005em
   }
@@ -968,7 +1453,7 @@
   /* body emphasis — 强调正文 */
   .t-body-emp{
     font-family:var(--sans),var(--sans-zh);
-    font-size:18px;font-weight:600;       /* SemiBold per Carbon */
+    font-size:min(18px,2.5vh);font-weight:600;       /* SemiBold per Carbon */
     color:var(--text-primary);line-height:1.5;
     letter-spacing:-.005em
   }
@@ -976,17 +1461,17 @@
   /* productive heading — section title within slide */
   .t-h-prod{
     font-family:var(--sans),var(--sans-zh);
-    font-size:22px;font-weight:600;
+    font-size:min(22px,3.056vh);font-weight:600;
     color:var(--text-primary);line-height:1.4;
     letter-spacing:-.01em
   }
 
   /* dark background variants */
-  .slide.dark .t-cat,.slide.dark .t-meta,.slide.dark .t-helper{color:rgba(255,255,255,.62)}
-  .slide.dark .t-body-sm{color:rgba(255,255,255,.78)}
+  .slide.dark .t-cat,.slide.dark .t-meta,.slide.dark .t-helper{color:rgba(var(--paper-rgb),.62)}
+  .slide.dark .t-body-sm{color:rgba(var(--paper-rgb),.78)}
   .slide.dark .t-body,.slide.dark .t-body-emp,.slide.dark .t-h-prod{color:var(--paper)}
-  .split-half .half.b-ink .t-cat,.split-half .half.b-ink .t-meta,.split-half .half.b-ink .t-helper{color:rgba(255,255,255,.62)}
-  .split-half .half.b-ink .t-body-sm{color:rgba(255,255,255,.78)}
+  .split-half .half.b-ink .t-cat,.split-half .half.b-ink .t-meta,.split-half .half.b-ink .t-helper{color:rgba(var(--paper-rgb),.62)}
+  .split-half .half.b-ink .t-body-sm{color:rgba(var(--paper-rgb),.78)}
   .split-half .half.b-ink .t-body,.split-half .half.b-ink .t-body-emp,.split-half .half.b-ink .t-h-prod{color:var(--paper)}
 
   /* 斜杠点阵装饰 (参考图 6 左下) */
@@ -1044,7 +1529,7 @@
   .h-bar-chart .row-lbl{
     font-family:var(--sans),var(--sans-zh);
     font-weight:500;
-    font-size:max(14px,1vw);
+    font-size:max(min(14px,1.944vh),min(1vw,1.778vh));
     letter-spacing:-.005em;
     text-align:left
   }
@@ -1063,7 +1548,7 @@
   .h-bar-chart .row-fill.grey{background:var(--grey-3)}
   .h-bar-chart .row-val{
     font-family:var(--sans);font-weight:250;
-    font-size:max(16px,1.5vw);
+    font-size:max(min(16px,2.222vh),min(1.5vw,2.667vh));
     letter-spacing:-.02em;
     line-height:1
   }
@@ -1077,7 +1562,7 @@
     display:grid;
     grid-template-columns:repeat(var(--cols,4),1fr);
     align-items:end;
-    gap:1.4vw;
+    gap:min(1.4vw,2.489vh) 1.4vw;
     height:50vh;
     margin-top:3vh
   }
@@ -1094,10 +1579,10 @@
   .v-bar-chart .col-bar.ink{background:var(--ink);color:var(--paper);border-top-color:var(--ink)}
   .v-bar-chart .col-bar .v{
     font-family:var(--sans);font-weight:250;
-    font-size:max(18px,1.6vw);letter-spacing:-.02em
+    font-size:max(min(18px,2.5vh),min(1.6vw,2.844vh));letter-spacing:-.02em
   }
   .v-bar-chart .col-lbl{
-    font-family:var(--mono);font-size:max(14px,.78vw);
+    font-family:var(--mono);font-size:max(min(14px,1.944vh),.78vw);
     letter-spacing:.14em;text-transform:uppercase;opacity:.6;
     text-align:center;flex:0 0 auto
   }
@@ -1111,25 +1596,24 @@
   .duo-compare .vrule{background:var(--grey-2);width:1px;align-self:stretch}
   .duo-compare .col{display:flex;flex-direction:column;gap:1.6vh;padding:0 .4vw}
   .duo-compare .col-tag{
-    font-family:var(--mono);font-size:max(14px,.78vw);
+    font-family:var(--mono);font-size:max(min(14px,1.944vh),.78vw);
     letter-spacing:.16em;text-transform:uppercase;
     color:var(--grey-3);
-    display:flex;align-items:center;gap:.6vw
-  }
+    display:flex;align-items:center;gap:.6vw}
   .duo-compare .col-tag .num{
     font-weight:600;color:var(--ink);
     border:1px solid var(--ink);
     padding:.2em .6em;font-size:.92em
   }
-  .duo-compare .col.accent .col-tag .num{color:var(--accent);border-color:var(--accent)}
+  .duo-compare .col.accent .col-tag .num{color:var(--accent-ink);border-color:var(--accent)}
   .duo-compare .col-ttl{
     font-family:var(--sans),var(--sans-zh);font-weight:200;
-    font-size:3.6vw;line-height:1;letter-spacing:-.03em
+    font-size:min(3.6vw,6.4vh);line-height:1;letter-spacing:-.03em
   }
-  .duo-compare .col.accent .col-ttl{color:var(--accent)}
+  .duo-compare .col.accent .col-ttl{color:var(--accent-ink)}
   .duo-compare .col-desc{
     font-family:var(--sans),var(--sans-zh);
-    font-size:max(16px,1.04vw);line-height:1.55;opacity:.78;
+    font-size:max(min(16px,2.222vh),min(1.04vw,1.849vh));line-height:1.55;opacity:.78;
     max-width:30vw
   }
   .duo-compare .col-list{
@@ -1138,7 +1622,7 @@
   }
   .duo-compare .col-list li{
     font-family:var(--sans),var(--sans-zh);
-    font-size:max(16px,.94vw);line-height:1.5;
+    font-size:max(min(16px,2.222vh),.94vw);line-height:1.5;
     padding-left:1.4em;position:relative
   }
   .duo-compare .col-list li::before{
@@ -1158,7 +1642,7 @@
   /* 极简页眉 — t-meta 风格 (Carbon productive label-01) */
   .canvas-card .chrome-min{
     display:flex;justify-content:space-between;align-items:flex-start;
-    font-family:var(--mono);font-size:14px;font-weight:500;
+    font-family:var(--mono);font-size:min(14px,1.944vh);font-weight:500;
     letter-spacing:.14em;text-transform:uppercase;
     color:var(--text-helper);
     flex:0 0 auto;
@@ -1168,16 +1652,16 @@
   .canvas-card .chrome-min .l, .canvas-card .chrome-min .r{
     max-width:48vw;line-height:1.5
   }
-  .slide.dark .canvas-card .chrome-min,.split-half .half.b-ink .canvas-card .chrome-min{color:rgba(255,255,255,.62)}
+  .slide.dark .canvas-card .chrome-min,.split-half .half.b-ink .canvas-card .chrome-min{color:rgba(var(--paper-rgb),.62)}
 
   /* 响应式降级 */
   @media (max-width:900px){
-    .h-hero{font-size:16vw}
-    .h-hero-zh{font-size:13vw}
-    .h-xl{font-size:9vw}
-    .h-xl-zh{font-size:8vw}
-    .kpi-hero{font-size:32vw}
-    .kpi-big{font-size:16vw}
+    .h-hero{font-size:min(16vw,28.44vh)}
+    .h-hero-zh{font-size:min(13vw,23.11vh)}
+    .h-xl{font-size:min(9vw,16vh)}
+    .h-xl-zh{font-size:min(8vw,14.22vh)}
+    .kpi-hero{font-size:min(32vw,56.89vh)}
+    .kpi-big{font-size:min(16vw,28.44vh)}
     .grid-2-7-5,.grid-2-6-6,.grid-2-8-4,.grid-2-4-8{grid-template-columns:1fr}
     .grid-12{grid-template-columns:repeat(6,1fr)}
   }
@@ -1258,15 +1742,15 @@
 
     <!-- 主体:padding 必须为 0,不要再叠 5vw,否则左右对不齐 chrome-min -->
     <div style="flex:1;padding:0;display:grid;grid-template-rows:auto 1fr auto;gap:2.6vh">
-      <div data-anim="kicker" class="t-meta" style="color:rgba(255,255,255,.78);letter-spacing:.22em">[必填] 章节英文 / Section En</div>
+      <div data-anim="kicker" class="t-meta" style="color:rgba(var(--accent-on-rgb),.78);letter-spacing:.22em">[必填] 章节英文 / Section En</div>
 
-      <h1 data-anim="title" style="align-self:center;font-family:var(--sans),var(--sans-zh);font-weight:200;font-size:min(11.6vw,19vh);line-height:.94;letter-spacing:-.025em;color:#fff">[必填] 中文主标题<br/>(≤ 12 字,可在某字加 <span style="font-style:italic;font-weight:300">italic</span> 微强调)</h1>
+      <h1 data-anim="title" style="align-self:center;font-family:var(--sans),var(--sans-zh);font-weight:200;font-size:min(11.6vw,19vh);line-height:.94;letter-spacing:-.025em;color:var(--accent-on)">[必填] 中文主标题<br/>(≤ 12 字,可在某字加 <span style="font-style:italic;font-weight:300">italic</span> 微强调)</h1>
 
-      <div data-anim="bottom" style="display:grid;grid-template-rows:auto auto;gap:1.6vh;border-top:1px solid rgba(255,255,255,.22);padding-top:2vh">
-        <div data-anim="lead" class="lead" style="max-width:52ch;color:rgba(255,255,255,.86)">[必填] 一段 1-2 行的副标 / 引子,定调全场.</div>
+      <div data-anim="bottom" style="display:grid;grid-template-rows:auto auto;gap:1.6vh;border-top:1px solid rgba(var(--accent-on-rgb),.22);padding-top:2vh">
+        <div data-anim="lead" class="lead" style="max-width:52ch;color:rgba(var(--accent-on-rgb),.86)">[必填] 一段 1-2 行的副标 / 引子,定调全场.</div>
         <div style="display:flex;justify-content:space-between;align-items:end">
-          <div class="t-meta" style="color:rgba(255,255,255,.6)">[选填] 作者 · 日期 · 出处</div>
-          <div class="t-meta" style="color:rgba(255,255,255,.6)">→ swipe / arrow keys</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.6)">[选填] 作者 · 日期 · 出处</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.6)">→ swipe / arrow keys</div>
         </div>
       </div>
     </div>
@@ -1288,14 +1772,14 @@
         </div>
 
         <div data-anim="manifesto" style="display:flex;flex-direction:column;gap:2vh;position:relative;z-index:1">
-          <div class="t-meta" style="color:rgba(255,255,255,.78);letter-spacing:.22em;margin-bottom:1.6vh">MANIFESTO</div>
-          <h2 style="font-family:var(--sans),var(--sans-zh);font-size:min(8vw,14vh);line-height:.94;letter-spacing:-.025em;font-weight:200;color:#fff">[必填] Build a model.<br/>Run <span style="font-style:italic;font-weight:300">forever</span>.</h2>
-          <div style="font-family:var(--sans),var(--sans-zh);font-size:max(14px,1vw);line-height:1.6;color:rgba(255,255,255,.82);font-weight:400;max-width:36ch;margin-top:1.4vh">[必填] 一句 1-2 行的中文/英文注脚,把宣言落地.</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.78);letter-spacing:.22em;margin-bottom:1.6vh">MANIFESTO</div>
+          <h2 style="font-family:var(--sans),var(--sans-zh);font-size:min(8vw,14vh);line-height:.94;letter-spacing:-.025em;font-weight:200;color:var(--accent-on)">[必填] Build a model.<br/>Run <span style="font-style:italic;font-weight:300">forever</span>.</h2>
+          <div style="font-family:var(--sans),var(--sans-zh);font-size:max(min(14px,1.944vh),min(1vw,1.778vh));line-height:1.6;color:rgba(var(--accent-on-rgb),.82);font-weight:400;max-width:36ch;margin-top:1.4vh">[必填] 一句 1-2 行的中文/英文注脚,把宣言落地.</div>
         </div>
 
-        <div data-anim="signature" style="display:flex;justify-content:space-between;align-items:end;border-top:1px solid rgba(255,255,255,.22);padding-top:2vh;position:relative;z-index:1">
-          <div class="t-meta" style="color:rgba(255,255,255,.62)">[选填] 作者 · 头衔</div>
-          <div class="t-meta" style="color:rgba(255,255,255,.62)">YY.MM.DD</div>
+        <div data-anim="signature" style="display:flex;justify-content:space-between;align-items:end;border-top:1px solid rgba(var(--accent-on-rgb),.22);padding-top:2vh;position:relative;z-index:1">
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.62)">[选填] 作者 · 头衔</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.62)">YY.MM.DD</div>
         </div>
       </div>
 
@@ -1307,25 +1791,25 @@
         </div>
 
         <div data-anim="rules" style="display:flex;flex-direction:column;gap:0">
-          <div style="display:grid;grid-template-columns:auto 1fr;gap:2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle)">
+          <div style="display:grid;grid-template-columns:auto 1fr;gap:min(2vw,3.556vh) 2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle)">
             <div style="font-family:var(--sans);font-weight:200;font-size:min(4.4vw,7.8vh);line-height:.9;color:var(--text-primary)">01</div>
             <div>
-              <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(18px,1.8vw);line-height:1.2;letter-spacing:-.015em;color:var(--text-primary);margin-bottom:1vh">[必填] takeaway 标题 01</h3>
-              <p style="font-family:var(--sans),var(--sans-zh);font-size:max(16px,.94vw);line-height:1.6;color:var(--text-secondary);font-weight:400">[必填] 1-2 行展开说明.</p>
+              <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(min(18px,2.5vh),min(1.8vw,3.2vh));line-height:1.2;letter-spacing:-.015em;color:var(--text-primary);margin-bottom:1vh">[必填] takeaway 标题 01</h3>
+              <p style="font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.94vw);line-height:1.6;color:var(--text-secondary);font-weight:400">[必填] 1-2 行展开说明.</p>
             </div>
           </div>
-          <div style="display:grid;grid-template-columns:auto 1fr;gap:2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle)">
+          <div style="display:grid;grid-template-columns:auto 1fr;gap:min(2vw,3.556vh) 2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle)">
             <div style="font-family:var(--sans);font-weight:200;font-size:min(4.4vw,7.8vh);line-height:.9;color:var(--text-primary)">02</div>
             <div>
-              <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(18px,1.8vw);line-height:1.2;letter-spacing:-.015em;color:var(--text-primary);margin-bottom:1vh">[必填] takeaway 标题 02</h3>
-              <p style="font-family:var(--sans),var(--sans-zh);font-size:max(16px,.94vw);line-height:1.6;color:var(--text-secondary);font-weight:400">[必填] 1-2 行展开说明.</p>
+              <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(min(18px,2.5vh),min(1.8vw,3.2vh));line-height:1.2;letter-spacing:-.015em;color:var(--text-primary);margin-bottom:1vh">[必填] takeaway 标题 02</h3>
+              <p style="font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.94vw);line-height:1.6;color:var(--text-secondary);font-weight:400">[必填] 1-2 行展开说明.</p>
             </div>
           </div>
-          <div style="display:grid;grid-template-columns:auto 1fr;gap:2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle);border-bottom:2px solid var(--accent)">
-            <div style="font-family:var(--sans);font-weight:200;font-size:min(4.4vw,7.8vh);line-height:.9;color:var(--accent)">03</div>
+          <div style="display:grid;grid-template-columns:auto 1fr;gap:min(2vw,3.556vh) 2vw;align-items:start;padding:2.6vh 0;border-top:1px solid var(--border-subtle);border-bottom:2px solid var(--accent)">
+            <div style="font-family:var(--sans);font-weight:200;font-size:min(4.4vw,7.8vh);line-height:.9;color:var(--accent-ink)">03</div>
             <div>
-              <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(18px,1.8vw);line-height:1.2;letter-spacing:-.015em;color:var(--accent);margin-bottom:1vh">[必填] takeaway 标题 03 · accent 强调</h3>
-              <p style="font-family:var(--sans),var(--sans-zh);font-size:max(16px,.94vw);line-height:1.6;color:var(--text-secondary);font-weight:400">[必填] 最后一条用 IKB 强调,与封面色彩首尾闭环.</p>
+              <h3 style="font-family:var(--sans),var(--sans-zh);font-weight:400;font-size:max(min(18px,2.5vh),min(1.8vw,3.2vh));line-height:1.2;letter-spacing:-.015em;color:var(--accent-ink);margin-bottom:1vh">[必填] takeaway 标题 03 · accent 强调</h3>
+              <p style="font-family:var(--sans),var(--sans-zh);font-size:max(min(16px,2.222vh),.94vw);line-height:1.6;color:var(--text-secondary);font-weight:400">[必填] 最后一条用 IKB 强调,与封面色彩首尾闭环.</p>
             </div>
           </div>
         </div>
@@ -1360,152 +1844,382 @@ window.__SPEAKER_NOTES__ = SPEAKER_NOTES;
 </script>
 
 <script>
-/* =============== WebGL 网格背景 (瑞士风专用) ===============
-   极简移动网格 + 微弱点阵叠加,营造"工业感、精准感"
-   - 主网格: 缓慢漂移的细线网格
-   - 次级: 鼠标附近的极细点阵微扰
-   - 颜色: 跟随主题(浅底深线 / 深底亮线),配合 mix-blend-mode
-*/
-const VS = `attribute vec2 position;void main(){gl_Position=vec4(position,0.0,1.0);}`;
+/* GZ:EFFECTS:START · guizang-design 特效运行时，不要手改；运行 scripts/sync-skill.mjs 更新 */
+/* 歸藏设计系统 · 特效运行时（无依赖，可直接内联进单文件 HTML）
+ *
+ * 用法：<canvas class="gz-effect" data-gz-effect="vortex" data-strength=".3" data-frozen="12.5"></canvas>
+ * 页面加载后自动挂载；也可以 GZEffects.mount(canvas, { effect, strength, frozen, colors })。
+ *
+ * 特效：
+ *   dispersion  全息色散（PPT 杂志风深色页）
+ *   vortex      银色涡流（PPT 杂志风浅色页）
+ *   grid        漂移网格 + 点阵（PPT 瑞士风）
+ *   inkflow     墨流等高线（图文卡片杂志风，带透明度，叠在纸色上）
+ *   ascii       ASCII 呼吸场（瑞士风封面 / 封底的强调色块）
+ *
+ * 统一行为：
+ *   - 一个 requestAnimationFrame 循环驱动全部特效，不在视口里的不画
+ *   - 动效开关：localStorage gz-motion、系统「减少动态效果」、<html data-motion="off">；
+ *     关闭时停在一帧静态画面，不留空白。兼容旧事件 ppt-low-power-change / swiss-low-power-change
+ *   - data-frozen 把时间定格：卡片出 PNG 时每次渲染结果一致。GZEffects.ready 在首帧画完后 resolve
+ *   - 颜色从 canvas 所在位置的 token 读（--ink-rgb / --paper-rgb / --accent-rgb / --accent-on-rgb），
+ *     放进反色块或切换 data-theme 时自动跟随
+ *
+ * 性能（弱机器也要流畅）：
+ *   - 渲染分辨率按特效分档（data-scale 可覆盖）：背景压在遮罩和模糊下，色散 / 涡流用 0.5 倍 CSS 像素，
+ *     Retina 屏上像素量只有全分辨率的 1/16；网格有细线用 1 倍；定格出图时用全分辨率
+ *   - WebGL 特效限 30fps（data-fps 可覆盖），ASCII 24fps；不在视口、透明度为 0 的画布不画
+ *   - 申请低功耗 GPU；持续掉到 25fps 以下时自动降分辨率，降到底仍卡就切成静态画面
+ */
+(function () {
+  'use strict'
+  if (window.GZEffects) return
 
-const FS = `precision highp float;
-uniform vec2 u_resolution;
-uniform float u_time;
-uniform vec2 u_mouse;
-uniform float u_dark; // 0 = light, 1 = dark
-uniform vec3 u_accent;
+  var VS = 'attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}'
+  var HEAD = 'precision highp float;uniform vec2 R;uniform float T;uniform vec2 M;uniform vec3 INK;uniform vec3 PAPER;uniform vec3 ACC;uniform float S;uniform float DARK;'
+  var NOISE =
+    'float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}' +
+    'float noise(vec2 p){vec2 i=floor(p),f=fract(p);vec2 u=f*f*(3.-2.*f);' +
+    'return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}'
 
-float gridLine(vec2 uv, float spacing, float thickness){
-  vec2 g = abs(fract(uv / spacing) - 0.5);
-  float d = min(g.x, g.y);
-  return 1.0 - smoothstep(thickness - 0.005, thickness + 0.005, d);
-}
+  // 各特效的默认渲染倍率（相对 CSS 像素）：柔和的背景低分辨率看不出差别，细线和文字需要更高
+  var SCALE = { dispersion: 0.5, vortex: 0.5, inkflow: 0.75, grid: 1, ascii: 1 }
+  var FPS = { dispersion: 30, vortex: 30, inkflow: 30, grid: 30 }
 
-float dot2(vec2 p){ return dot(p,p); }
+  var SHADERS = {
+    // 原 PPT template.html FS_DARK，颜色是设计时定死的钛金暗色（themes.md 注明不跟主题）
+    dispersion: HEAD +
+      'vec3 pal(float t,vec3 a,vec3 b,vec3 c,vec3 d){return a+b*cos(6.28318*(c*t+d));}' +
+      'void main(){vec2 uv=gl_FragCoord.xy/R;vec2 p=uv*2.-1.;p.x*=R.x/R.y;vec2 m=M*2.-1.;m.x*=R.x/R.y;' +
+      'float md=length(p-m);p+=sin(md*15.-T*4.)*exp(-md*3.)*.08;vec2 p0=p;' +
+      'for(float i=1.;i<4.;i++){p.x+=.1/i*sin(i*3.*p.y+T*.4)+.05;p.y+=.1/i*cos(i*2.*p.x+T*.3)-.05;}' +
+      'float r=length(p);float ang=atan(p.y,p.x);' +
+      'vec3 col=pal(r*1.5+p0.x*.5+T*.1,vec3(.12,.12,.13),vec3(.03,.04,.05),vec3(1.),vec3(.1,.2,.4));' +
+      'float disp=sin(r*25.-T*1.5+ang*2.)*.5+.5;col+=vec3(disp*.015,disp*.01,disp*.02);' +
+      'col+=pow(sin(p.x*4.+p.y*3.+T)*.5+.5,8.)*.08;col=mix(vec3(.05,.05,.06),col,.85);gl_FragColor=vec4(col,1.);}',
 
-void main(){
-  vec2 uv = gl_FragCoord.xy / u_resolution.xy;
-  float aspect = u_resolution.x / u_resolution.y;
-  vec2 p = uv;
-  p.x *= aspect;
+    // 原 FS_LIGHT。colors:"theme" 时用主题纸色替换银白，深浅关系不变
+    vortex: HEAD + NOISE +
+      'float fbm(vec2 p){float v=0.,a=.5;mat2 m=mat2(.8,.6,-.6,.8);for(int i=0;i<5;i++){v+=a*noise(p);p=m*p*2.02;a*=.5;}return v;}' +
+      'uniform float THEME;' +
+      'void main(){vec2 uv=gl_FragCoord.xy/R;vec2 p=uv;p.x*=R.x/R.y;vec2 m=M;m.x*=R.x/R.y;vec2 md=p-m;float dl=length(md);' +
+      'p+=normalize(md+vec2(.0001))*exp(-dl*5.)*.03;' +
+      'vec2 q=vec2(fbm(p*1.8+T*.07),fbm(p*1.8+vec2(5.2,1.3)+T*.06));' +
+      'vec2 r=vec2(fbm(p*2.+q*1.3+vec2(1.7,9.2)+T*.05),fbm(p*2.+q*1.3+vec2(8.3,2.8)+T*.04));' +
+      'float f=fbm(p*2.2+r*1.5);' +
+      'vec3 hi=mix(vec3(.955,.945,.925),PAPER,THEME);vec3 lo=mix(vec3(.86,.85,.84),mix(PAPER,INK,.1),THEME);' +
+      'vec3 col=mix(lo,hi,f);float ph=r.x*2.2+T*.35;' +
+      'col+=vec3(.78,.62,.92)*sin(ph)*.055;col+=vec3(.55,.72,.95)*sin(ph*.8+2.)*.05;col+=smoothstep(.48,.92,f)*.06;' +
+      'gl_FragColor=vec4(col,1.);}',
 
-  // 缓慢平移
-  vec2 drift = vec2(u_time * 0.008, u_time * 0.005);
-  vec2 gp = p + drift;
+    // 原 PPT template-swiss.html 网格背景
+    grid: HEAD +
+      'float gl(vec2 uv,float s,float t){vec2 g=abs(fract(uv/s)-.5);float d=min(g.x,g.y);return 1.-smoothstep(t-.005,t+.005,d);}' +
+      'void main(){vec2 uv=gl_FragCoord.xy/R;float a=R.x/R.y;vec2 p=uv;p.x*=a;vec2 gp=p+vec2(T*.008,T*.005);' +
+      'float g=gl(gp,.12,.012)+gl(gp,.024,.04)*.2;vec2 m=M;m.x*=a;float mi=exp(-length(p-m)*4.)*.5;' +
+      'vec2 dg=fract(gp*50.)-.5;float dm=1.-smoothstep(.05,.14,length(dg));' +
+      'dm*=smoothstep(-.3,.6,sin(gp.x*1.4+T*.15)*cos(gp.y*1.6-T*.12))*.6;' +
+      'vec3 line=mix(vec3(.08),vec3(.92),DARK);vec3 bg=PAPER;' +
+      'vec3 col=mix(bg,line,g*(.45+mi)*.55);col=mix(col,line,dm*.35);col=mix(col,ACC,mi*.18);gl_FragColor=vec4(col,1.);}',
 
-  // 主细网格 (大间距)
-  float mainGrid = gridLine(gp, 0.12, 0.012);
-  // 次级网格 (更细更密)
-  float subGrid = gridLine(gp, 0.024, 0.04) * 0.4;
-
-  // 鼠标附近的强化
-  vec2 m = u_mouse;
-  m.x *= aspect;
-  float md = length(p - m);
-  float mInfluence = exp(-md * 4.0) * 0.5;
-
-  float gridStrength = (mainGrid + subGrid * 0.5) * (0.45 + mInfluence);
-
-  // 点阵 (作为基底)
-  vec2 dotGrid = fract(gp * 50.0) - 0.5;
-  float dotMask = 1.0 - smoothstep(0.05, 0.14, length(dotGrid));
-  // 用低频噪声调制点阵密度
-  float wave = sin(gp.x * 1.4 + u_time * 0.15) * cos(gp.y * 1.6 - u_time * 0.12);
-  dotMask *= smoothstep(-0.3, 0.6, wave) * 0.6;
-
-  // 颜色: 浅底用深线条,深底用浅线条;高亮处带 accent 痕迹
-  vec3 lineColor = mix(vec3(0.08), vec3(0.92), u_dark);
-  vec3 bgColor = mix(vec3(0.97, 0.97, 0.96), vec3(0.06, 0.06, 0.07), u_dark);
-
-  // accent 暗示 (鼠标附近偷渡一点 accent 色)
-  vec3 col = bgColor;
-  col = mix(col, lineColor, gridStrength * 0.55);
-  col = mix(col, lineColor, dotMask * 0.35);
-  col = mix(col, u_accent, mInfluence * 0.18);
-
-  gl_FragColor = vec4(col, 1.0);
-}`;
-
-const mouse={x:0.5,y:0.5};
-addEventListener('mousemove',e=>{mouse.x=e.clientX/innerWidth;mouse.y=1-e.clientY/innerHeight});
-
-function bootGL(canvasId, fsSrc){
-  const canvas=document.getElementById(canvasId);
-  const gl=canvas.getContext('webgl',{alpha:true,antialias:true,premultipliedAlpha:false});
-  if(!gl) return ()=>false;
-  const mk=(t,s)=>{const sh=gl.createShader(t);gl.shaderSource(sh,s);gl.compileShader(sh);return sh};
-  const prog=gl.createProgram();
-  gl.attachShader(prog,mk(gl.VERTEX_SHADER,VS));
-  gl.attachShader(prog,mk(gl.FRAGMENT_SHADER,fsSrc));
-  gl.linkProgram(prog);gl.useProgram(prog);
-  const buf=gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER,buf);
-  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);
-  const pos=gl.getAttribLocation(prog,'position');
-  gl.enableVertexAttribArray(pos);gl.vertexAttribPointer(pos,2,gl.FLOAT,false,0,0);
-  const lRes=gl.getUniformLocation(prog,'u_resolution');
-  const lT=gl.getUniformLocation(prog,'u_time');
-  const lM=gl.getUniformLocation(prog,'u_mouse');
-  const lD=gl.getUniformLocation(prog,'u_dark');
-  const lA=gl.getUniformLocation(prog,'u_accent');
-  const resize=()=>{
-    const d=Math.min(window.devicePixelRatio||1,2);
-    canvas.width=innerWidth*d;canvas.height=innerHeight*d;
-    gl.viewport(0,0,canvas.width,canvas.height);
-  };
-  addEventListener('resize',resize);resize();
-
-  // 读取 CSS 变量,把 accent 颜色塞进 shader
-  function readAccent(){
-    const cs = getComputedStyle(document.documentElement);
-    const hex = cs.getPropertyValue('--accent').trim() || '#002FA7';
-    const m = hex.match(/^#([0-9a-f]{6})$/i);
-    if(!m) return [0, 0.18, 0.65];
-    const n = parseInt(m[1], 16);
-    return [((n>>16)&255)/255, ((n>>8)&255)/255, (n&255)/255];
+    // 原卡片 magazine-bg-webgl.js：输出带透明度，叠在纸色上
+    inkflow: HEAD + NOISE +
+      'float fbm(vec2 p){float v=0.,a=.5;mat2 m=mat2(1.6,1.2,-1.2,1.6);for(int i=0;i<5;i++){v+=a*noise(p);p=m*p*1.18;a*=.52;}return v;}' +
+      'void main(){vec2 p=(gl_FragCoord.xy-.5*R)/min(R.x,R.y);float t=T*.045;' +
+      'float n=fbm(p*2.2+vec2(t,-t*.7));float n2=fbm(p*5.4-vec2(t*1.7,t));' +
+      'float contour=smoothstep(.015,0.,abs(fract((n+n2*.35)*7.)-.5));float wash=smoothstep(.22,.88,n);' +
+      'float vig=1.-smoothstep(.28,.92,length(p));vec3 col=mix(PAPER,INK,wash*.42+contour*.18);' +
+      'col=mix(col,ACC,(.18+.25*n2)*contour);float al=S*(.18+wash*.42+contour*.3)*(.55+.45*vig);' +
+      'gl_FragColor=vec4(col*al,al);}',
   }
-  let accent = readAccent();
-  let dark = 0;
 
-  return (tSec, isDark)=>{
-    if(isDark !== undefined) dark = isDark ? 1 : 0;
-    accent = readAccent();
-    gl.uniform2f(lRes,canvas.width,canvas.height);
-    gl.uniform1f(lT,tSec);
-    gl.uniform2f(lM,mouse.x,mouse.y);
-    gl.uniform1f(lD,dark);
-    gl.uniform3f(lA,accent[0],accent[1],accent[2]);
-    gl.drawArrays(gl.TRIANGLES,0,6);
-    return true;
-  };
-}
-// canvas-mode / low-power: skip WebGL draw loop (no active RAF loop)
+  // ---------- 动效开关 ----------
+  var KEY = 'gz-motion'
+  function storedMotion() { try { return localStorage.getItem(KEY) } catch (e) { return null } }
+  function computeMotion() {
+    if (document.documentElement.getAttribute('data-motion') === 'off') return false
+    var s = storedMotion()
+    if (s === 'off') return false
+    if (s === 'on') return true
+    return !(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches)
+  }
+  var motion = computeMotion()
+
+  // ---------- 颜色 ----------
+  function rgbVar(cs, name, fb) {
+    var v = cs.getPropertyValue(name).trim()
+    if (!v) return fb
+    var n = v.split(',').map(Number)
+    return n.length === 3 && n.every(isFinite) ? n.map(function (x) { return x / 255 }) : fb
+  }
+  function readColors(el) {
+    var cs = getComputedStyle(el)
+    var paper = rgbVar(cs, '--paper-rgb', [0.97, 0.97, 0.96])
+    return {
+      ink: rgbVar(cs, '--ink-rgb', [0.04, 0.04, 0.04]),
+      paper: paper,
+      accent: rgbVar(cs, '--accent-rgb', [0, 0.18, 0.65]),
+      accentOn: rgbVar(cs, '--accent-on-rgb', [1, 1, 1]),
+      dark: 0.2126 * paper[0] + 0.7152 * paper[1] + 0.0722 * paper[2] < 0.5 ? 1 : 0,
+      mono: (cs.getPropertyValue('--font-mono') || 'ui-monospace,monospace').trim(),
+    }
+  }
+
+  var mouse = [0.5, 0.5]
+  addEventListener('mousemove', function (e) { mouse = [e.clientX / innerWidth, 1 - e.clientY / innerHeight] }, { passive: true })
+
+  // ---------- WebGL 特效 ----------
+  function glEffect(canvas, o) {
+    var gl = canvas.getContext('webgl', { alpha: o.effect === 'inkflow', premultipliedAlpha: true, antialias: false, powerPreference: 'low-power', preserveDrawingBuffer: o.frozen != null })
+    if (!gl) return null
+    function sh(t, s) {
+      var x = gl.createShader(t); gl.shaderSource(x, s); gl.compileShader(x)
+      if (!gl.getShaderParameter(x, gl.COMPILE_STATUS)) throw new Error('gz-effects ' + o.effect + ': ' + gl.getShaderInfoLog(x))
+      return x
+    }
+    var prog = gl.createProgram()
+    gl.attachShader(prog, sh(gl.VERTEX_SHADER, VS))
+    gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, SHADERS[o.effect]))
+    gl.linkProgram(prog); gl.useProgram(prog)
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW)
+    var loc = gl.getAttribLocation(prog, 'p'); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
+    var U = {}
+    ;['R', 'T', 'M', 'INK', 'PAPER', 'ACC', 'S', 'DARK', 'THEME'].forEach(function (n) { U[n] = gl.getUniformLocation(prog, n) })
+    return function (t, c) {
+      gl.viewport(0, 0, canvas.width, canvas.height)
+      gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT)
+      gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, t); gl.uniform2f(U.M, mouse[0], mouse[1])
+      gl.uniform3fv(U.INK, c.ink); gl.uniform3fv(U.PAPER, c.paper); gl.uniform3fv(U.ACC, c.accent)
+      gl.uniform1f(U.S, o.strength); gl.uniform1f(U.DARK, o.dark != null ? +o.dark : c.dark)
+      if (U.THEME) gl.uniform1f(U.THEME, o.colors === 'theme' ? 1 : 0)
+      gl.drawArrays(gl.TRIANGLES, 0, 6)
+    }
+  }
+
+  // ---------- ASCII 呼吸场（Canvas 2D） ----------
+  var PALETTE = '   ...:::---+++***◦◦••▢▣'
+  function asciiEffect(canvas) {
+    var ctx = canvas.getContext('2d')
+    var cell = 16, atlas = null, atlasKey = ''
+    // 字形图集：每个字符只排一次版，之后每帧按格子 drawImage，比逐格 fillText 快一个数量级
+    function buildAtlas(font, rgb, dpr) {
+      var key = font + rgb + dpr
+      if (key === atlasKey) return
+      atlas = document.createElement('canvas')
+      atlas.width = Math.ceil(PALETTE.length * cell * dpr); atlas.height = Math.ceil(cell * dpr)
+      var a = atlas.getContext('2d')
+      a.setTransform(dpr, 0, 0, dpr, 0, 0)
+      a.font = font; a.textBaseline = 'top'; a.fillStyle = 'rgb(' + rgb + ')'
+      for (var i = 0; i < PALETTE.length; i++) if (PALETTE[i] !== ' ') a.fillText(PALETTE[i], i * cell, 0)
+      atlasKey = key
+    }
+    var draw = function (t, c, w, h, dpr) {
+      ctx.setTransform(1, 0, 0, 1, 0, 0)
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      var rgb = c.accentOn.map(function (x) { return Math.round(x * 255) }).join(',')
+      buildAtlas('500 13px ' + c.mono, rgb, dpr)
+      // 字色取 accent-on：IKB / 橙上是白字，黄 / 绿上是墨色字（修复原来只画白字的问题）
+      var blend = c.accentOn[0] + c.accentOn[1] + c.accentOn[2] > 1.5 ? 'screen' : 'multiply'
+      if (canvas.style.mixBlendMode !== blend) canvas.style.mixBlendMode = blend
+      var cols = Math.ceil(w / cell), rows = Math.ceil(h / cell), tt = t * 0.55, sz = cell * dpr
+      for (var r = 0; r < rows; r++) for (var k = 0; k < cols; k++) {
+        var n = (Math.sin(k * 0.18 + tt) + Math.sin(r * 0.24 - tt * 0.7) + Math.sin((k + r) * 0.12 + tt * 0.45) +
+          Math.sin(Math.hypot(k - cols * 0.5, r - rows * 0.5) * 0.16 - tt * 0.55)) / 4
+        var v = (n + 1) / 2
+        if (v < 0.22) continue
+        var idx = Math.min(PALETTE.length - 1, Math.floor(v * PALETTE.length))
+        if (PALETTE[idx] === ' ') continue
+        ctx.globalAlpha = 0.08 + (v - 0.22) * 0.55
+        ctx.drawImage(atlas, idx * sz, 0, sz, sz, k * sz, r * sz, sz, sz)
+      }
+      ctx.globalAlpha = 1
+    }
+    // 呼吸场变化很慢，24 帧和 60 帧肉眼无差别；逐字绘制在 CPU 上开销大，限帧省电
+    draw.interval = 1000 / 24
+    return draw
+  }
+
+  // WebGL 不可用时：几层径向渐变，模拟墨色晕染（不画椭圆，遵守卡片「不用椭圆」规则）。深色背景特效用墨色打底
+  function fallback2d(canvas, o) {
+    var ctx = canvas.getContext('2d')
+    return function (t, c, w, h, dpr) {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.fillStyle = 'rgb(' + (o.effect === 'dispersion' ? c.ink : c.paper).map(function (x) { return Math.round(x * 255) }).join(',') + ')'
+      ctx.fillRect(0, 0, w, h)
+      for (var i = 0; i < 5; i++) {
+        var x = w * (0.14 + ((i * 0.19 + 0.17) % 0.72)), y = h * (0.1 + ((i * 0.29 + 0.23) % 0.78)), r = Math.max(w, h) * (0.22 + i * 0.045)
+        var g = ctx.createRadialGradient(x, y, 0, x, y, r)
+        var col = (i % 2 ? c.accent : c.ink).map(function (v) { return Math.round(v * 255) }).join(',')
+        g.addColorStop(0, 'rgba(' + col + ',' + (i % 2 ? 0.1 : 0.12) + ')'); g.addColorStop(1, 'rgba(' + col + ',0)')
+        ctx.fillStyle = g; ctx.fillRect(0, 0, w, h)
+      }
+    }
+  }
+
+  // ---------- 挂载与循环 ----------
+  // 自动降级的状态（见 governor）：各级渲染倍率与当前级别
+  var ADAPT = [1, 0.7, 0.5]
+  var perf = { start: 0, frames: 0, level: 0, settleUntil: 0 }
+  var items = []
+  var STATIC_T = 12.5 // 动效关闭时的静态帧时刻
+  var readyResolve
+  var ready = new Promise(function (r) { readyResolve = r })
+  var pendingFirst = 0
+
+  function size(it) {
+    var rect = it.canvas.getBoundingClientRect()
+    var device = Math.min(window.devicePixelRatio || 1, 2)
+    // 定格出图用全分辨率；实时播放按特效倍率 × 自适应降级系数
+    var dpr = it.o.frozen != null || it.o.scale == null ? device : Math.max(0.2, it.o.scale * it.adapt)
+    var w = Math.max(1, Math.round(rect.width)), h = Math.max(1, Math.round(rect.height))
+    if (it.w !== w || it.h !== h || it.dpr !== dpr) {
+      it.w = w; it.h = h; it.dpr = dpr
+      it.canvas.width = Math.round(w * dpr); it.canvas.height = Math.round(h * dpr)
+      it.dirty = true
+    }
+  }
+
+  function drawOne(it, now) {
+    size(it)
+    if (!it.colors || it.colorsStale) { it.colors = readColors(it.canvas); it.colorsStale = false }
+    var t = it.o.frozen != null ? it.o.frozen : motion ? (now - it.t0) / 1000 : STATIC_T
+    it.draw(t, it.colors, it.w, it.h, it.dpr)
+    it.dirty = false
+    if (!it.drawn) { it.drawn = true; if (--pendingFirst === 0) readyResolve() }
+  }
+
+  function mount(canvas, opts) {
+    if (typeof canvas === 'string') canvas = document.querySelector(canvas)
+    if (!canvas || canvas.__gz) return canvas && canvas.__gz
+    var d = canvas.dataset
+    var o = Object.assign({
+      effect: d.gzEffect || 'vortex',
+      strength: d.strength != null ? +d.strength : 0.34,
+      frozen: d.frozen != null ? +d.frozen : null,
+      colors: d.colors || 'fixed',
+      dark: d.dark != null ? d.dark === 'true' || d.dark === '1' : null,
+    }, opts || {})
+    var eff = o.effect
+    if (o.scale == null) o.scale = d.scale != null ? +d.scale : SCALE[eff]
+    var fps = d.fps != null ? +d.fps : FPS[eff]
+    var draw = eff === 'ascii' ? asciiEffect(canvas) : SHADERS[eff] ? glEffect(canvas, o) : null
+    if (!draw && eff !== 'ascii') draw = fallback2d(canvas, o)
+    var it = { canvas: canvas, o: o, draw: draw, t0: performance.now(), visible: true, last: 0, adapt: 1,
+      interval: (draw && draw.interval) || (fps ? 1000 / fps : 0) }
+    canvas.__gz = it
+    items.push(it)
+    pendingFirst++
+    if ('IntersectionObserver' in window) {
+      // 只贴着视口边缘（面积为 0）不算可见：幻灯片左右相邻页正好贴边，isIntersecting 会误报为 true
+      new IntersectionObserver(function (es) { es.forEach(function (e) { it.visible = e.isIntersecting && e.intersectionRatio > 0 }) }, { threshold: [0, 0.01] }).observe(canvas)
+    }
+    // 刚挂载时字体加载、着色器编译都会卡一下，先观察 1.5 秒再开始判断是否降级
+    perf.settleUntil = Math.max(perf.settleUntil, performance.now() + 1500)
+    drawOne(it, performance.now())
+    schedule()
+    return it
+  }
+
+  // 透明度为 0 的画布（杂志风深浅两张背景交叉淡入时，看不见的那张）不画
+  function shown(c) {
+    if (c.checkVisibility) return c.checkVisibility({ opacityProperty: true, visibilityProperty: true })
+    return getComputedStyle(c).opacity !== '0'
+  }
+
+  // 自动降级：每 2 秒看一次页面帧率，持续低于 25 就降渲染倍率；降到底仍卡，切成静态画面
+  function governor(now, animating) {
+    if (!animating || document.hidden) { perf.start = 0; return }
+    if (now < perf.settleUntil) return
+    if (!perf.start) { perf.start = now; perf.frames = 0; return }
+    perf.frames++
+    var span = now - perf.start
+    if (span < 2000) return
+    var fps = (perf.frames * 1000) / span
+    perf.start = 0
+    if (fps >= 25) return
+    perf.level++
+    if (perf.level < ADAPT.length) {
+      items.forEach(function (it) { it.adapt = ADAPT[perf.level]; it.dirty = true })
+      perf.settleUntil = now + 1000
+    } else {
+      if (window.console) console.info('[gz-effects] 帧率持续偏低（' + fps.toFixed(0) + 'fps），背景已切换为静态画面')
+      setMotion(false, false)
+    }
+  }
+
+  var raf = 0
+  function schedule() { if (!raf) raf = requestAnimationFrame(loop) }
+  function loop(now) {
+    raf = 0
+    var again = false
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i]
+      var live = motion && it.o.frozen == null
+      var due = now - it.last >= it.interval
+      if ((live && it.visible && due && shown(it.canvas)) || it.dirty || it.colorsStale) { drawOne(it, now); it.last = now }
+      if (live) again = true
+    }
+    governor(now, again)
+    if (again) schedule()
+  }
+
+  function setMotion(on, persist) {
+    motion = !!on
+    if (persist !== false) try { localStorage.setItem(KEY, on ? 'on' : 'off') } catch (e) {}
+    items.forEach(function (it) { it.dirty = true; if (on) it.t0 = performance.now() - STATIC_T * 1000 })
+    schedule()
+    dispatchEvent(new CustomEvent('gz-motion-change', { detail: { on: motion } }))
+  }
+
+  // 旧模板的低功耗事件：迁移期间继续认
+  ;['ppt-low-power-change', 'swiss-low-power-change'].forEach(function (n) {
+    addEventListener(n, function (e) { if (e.detail && 'on' in e.detail) setMotion(!e.detail.on, false) })
+  })
+  if (window.matchMedia) {
+    var mq = matchMedia('(prefers-reduced-motion: reduce)')
+    mq.addEventListener && mq.addEventListener('change', function () { if (!storedMotion()) setMotion(computeMotion(), false) })
+  }
+  // 主题、反色块切换：标记颜色过期，下一帧重读
+  new MutationObserver(function () {
+    if (computeMotion() !== motion && document.documentElement.getAttribute('data-motion') === 'off') setMotion(false, false)
+    items.forEach(function (it) { it.colorsStale = true }); schedule()
+  }).observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ['data-theme', 'data-surface', 'data-motion', 'class'] })
+  addEventListener('resize', function () { items.forEach(function (it) { it.dirty = true }); perf.settleUntil = performance.now() + 1000; schedule() }, { passive: true })
+
+  function autoMount() {
+    var list = document.querySelectorAll('canvas[data-gz-effect]')
+    for (var i = 0; i < list.length; i++) mount(list[i])
+    if (!list.length) readyResolve()
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', autoMount)
+  else autoMount()
+
+  window.GZEffects = {
+    mount: mount, ready: ready, setMotion: setMotion,
+    get motion() { return motion },
+    effects: Object.keys(SHADERS).concat('ascii'),
+  }
+})()
+/* GZ:EFFECTS:END */
+</script>
+<script>
+/* =============== 背景特效（gz-effects） ===============
+   网格背景：默认 canvas-mode 不用，直接移除；非 canvas-mode 时跟随 body.dark-bg 切换深浅。
+   ASCII 呼吸场：封面 / 封底强调色块里的 canvas.ascii-bg，字色取 --accent-on（黄、绿主题上是墨色字）。
+   低功耗开关沿用 window.__lowPowerMode 与 swiss-low-power-change 事件，运行时会自动跟随。 */
 let darkMode=false;
-let gridCtrl=null, gridRAF=0, gridT0=Date.now();
-function startGrid(){
-  if(document.body.classList.contains('canvas-mode') || window.__lowPowerMode || gridRAF) return;
-  if(!gridCtrl) gridCtrl = bootGL('bg-grid',FS);
-  if(!gridCtrl) return;
-  gridT0=Date.now();
-  function loop(){
-    if(window.__lowPowerMode){gridRAF=0;return;}
-    const t=(Date.now()-gridT0)/1000;
-    gridCtrl(t, darkMode);
-    gridRAF=requestAnimationFrame(loop);
+(function(){
+  const grid=document.getElementById('bg-grid');
+  if(document.body.classList.contains('canvas-mode')){ if(grid) grid.remove(); }
+  else if(grid){
+    grid.dataset.gzEffect='grid';
+    new MutationObserver(()=>{ if(grid.__gz) grid.__gz.o.dark=document.body.classList.contains('dark-bg'); })
+      .observe(document.body,{attributes:true,attributeFilter:['class']});
   }
-  gridRAF=requestAnimationFrame(loop);
-}
-function stopGrid(){
-  if(gridRAF) cancelAnimationFrame(gridRAF);
-  gridRAF=0;
-}
-if(document.body.classList.contains('canvas-mode')){
-  const c=document.getElementById('bg-grid');
-  if(c) c.remove();
-}else{
-  startGrid();
-}
-addEventListener('swiss-low-power-change', e=>{e.detail.on ? stopGrid() : startGrid();});
+  document.querySelectorAll('canvas.ascii-bg').forEach(c=>{ c.dataset.gzEffect='ascii'; });
+  GZEffects.setMotion(!window.__lowPowerMode, false);
+})();
 
 // =============== 导航 ===============
 const deck=document.getElementById('deck');
@@ -1531,6 +2245,8 @@ function go(n,opts={}){
   const el=slides[idx];
   const isDark = el.classList.contains('dark') || el.classList.contains('accent');
   document.body.classList.toggle('dark-bg', isDark);
+  // 强调色页单独标记：导航和提示改用 --accent-on（黄、绿主题上是墨色），不能按深色页处理
+  document.body.classList.toggle('accent-bg', el.classList.contains('accent'));
   darkMode = isDark;
   if(window.__playSlide) setTimeout(()=>window.__playSlide(idx), 450);
   window.__pptPresenter?.onSlideChange(idx);
@@ -2827,109 +3543,5 @@ if(motion){
 }
 </script>
 
-<script>
-/* ============== ASCII 点阵呼吸场 · IKB 封面/封底专用 ==============
-   sin/cos 二维噪声场驱动字符显隐,营造工业仪表板的"涌动呼吸"质感.
-   纯 canvas 2D, mix-blend-mode:screen 让字符在 IKB 底色上自然发亮.
-   用法:在需要呼吸场的容器(.canvas-card 或 split .half.b-accent)内首位插入
-        <canvas class="ascii-bg" aria-hidden="true">,本脚本会自动扫描并启动. */
-(function(){
-  const canvases = [...document.querySelectorAll('canvas.ascii-bg')];
-  if(!canvases.length) return;
-
-  const PALETTE = '   ...:::---+++***◦◦••▢▣';
-  const CELL = 16;
-  const FONT_SIZE = 13;
-
-  function setup(c){
-    const dpr = Math.min(window.devicePixelRatio || 1, 2);
-    const rect = c.getBoundingClientRect();
-    if(rect.width < 4 || rect.height < 4) return false;
-    c.width = Math.round(rect.width * dpr);
-    c.height = Math.round(rect.height * dpr);
-    c.__dpr = dpr;
-    c.__w = rect.width;
-    c.__h = rect.height;
-    const ctx = c.getContext('2d');
-    ctx.setTransform(dpr,0,0,dpr,0,0);
-    const mono = (getComputedStyle(document.documentElement).getPropertyValue('--mono') || 'JetBrains Mono, monospace').trim();
-    ctx.font = `500 ${FONT_SIZE}px ${mono}`;
-    ctx.textBaseline = 'top';
-    c.__ctx = ctx;
-    return true;
-  }
-
-  function draw(c, t){
-    if(!c.__ctx) return;
-    const ctx = c.__ctx, w = c.__w, h = c.__h;
-    ctx.clearRect(0, 0, w, h);
-    const cols = Math.ceil(w / CELL);
-    const rows = Math.ceil(h / CELL);
-    for(let r=0; r<rows; r++){
-      for(let cc=0; cc<cols; cc++){
-        const n = (
-          Math.sin(cc * 0.18 + t) +
-          Math.sin(r * 0.24 - t * 0.7) +
-          Math.sin((cc + r) * 0.12 + t * 0.45) +
-          Math.sin(Math.hypot(cc - cols * 0.5, r - rows * 0.5) * 0.16 - t * 0.55)
-        ) / 4; // [-1, 1]
-        const v = (n + 1) / 2; // [0, 1]
-        if(v < 0.22) continue;
-        const idx = Math.min(PALETTE.length - 1, Math.floor(v * PALETTE.length));
-        const ch = PALETTE[idx];
-        if(ch === ' ') continue;
-        const alpha = 0.08 + (v - 0.22) * 0.55;
-        ctx.fillStyle = `rgba(255,255,255,${alpha.toFixed(3)})`;
-        ctx.fillText(ch, cc * CELL, r * CELL);
-      }
-    }
-  }
-
-  function resizeAll(){ canvases.forEach(setup); }
-  let pending = null;
-  window.addEventListener('resize', ()=>{
-    if(window.__lowPowerMode) return;
-    if(pending) cancelAnimationFrame(pending);
-    pending = requestAnimationFrame(resizeAll);
-  }, {passive:true});
-
-  let t0 = performance.now();
-  let frame = 0, asciiRAF = 0, running = false;
-  function tick(now){
-    if(!running || window.__lowPowerMode){running=false;asciiRAF=0;return;}
-    const t = (now - t0) / 1000 * 0.55;
-    frame++;
-    canvases.forEach(c=>{
-      // 离屏 slide 降帧:每 4 帧渲染一次,在屏 slide 每帧渲染
-      const slide = c.closest('.slide');
-      const rect = slide ? slide.getBoundingClientRect() : null;
-      const onscreen = rect && rect.right > 0 && rect.left < window.innerWidth;
-      if(!onscreen && (frame & 3) !== 0) return;
-      draw(c, t);
-    });
-    asciiRAF = requestAnimationFrame(tick);
-  }
-  function start(){
-    if(running || window.__lowPowerMode) return;
-    resizeAll();
-    t0 = performance.now();
-    frame = 0;
-    running = true;
-    asciiRAF = requestAnimationFrame(tick);
-  }
-  function stop(){
-    running = false;
-    if(asciiRAF) cancelAnimationFrame(asciiRAF);
-    if(pending) cancelAnimationFrame(pending);
-    asciiRAF = 0;
-    pending = null;
-    canvases.forEach(c=>{
-      if(c.__ctx) c.__ctx.clearRect(0,0,c.__w || 0,c.__h || 0);
-    });
-  }
-  addEventListener('swiss-low-power-change', e=>{e.detail.on ? stop() : start();});
-  start();
-})();
-</script>
 </body>
 </html>
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template.html b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template.html
index 280488b6..976cf0f6 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template.html
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/assets/template.html
@@ -1,42 +1,567 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
+<html lang="zh-CN" data-family="magazine" data-medium="slide" data-theme="ink-classic">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>[必填] 替换为 PPT 标题 · Deck Title</title>
+<!-- GZ:FONTS:START · 字体由 guizang-design 字体清单生成；需要把字体内置进 HTML 时用 gz-fonts.mjs embed（卡片 skill 的 render.mjs 会自动内置） -->
 <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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@300;400;500;600&family=Noto+Serif+SC:wght@300;400;500;600;700;900&family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
+<link rel="stylesheet" data-gz-fonts="playfair-display noto-serif-sc source-serif-4 noto-sans-sc ibm-plex-mono" href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Noto+Serif+SC:wght@200..900&family=Source+Serif+4:ital,wght@0,200..900;1,200..900&family=Noto+Sans+SC:wght@100..900&family=IBM+Plex+Mono:wght@400;500;600&display=swap">
+<!-- GZ:FONTS:END -->
 <style>
-  :root{
-    /* ============ 主题色(默认:🖋 墨水经典) ============
-       切换主题:从 references/themes.md 复制对应的 :root 块
-       整体替换这几行(--ink / --ink-rgb / --paper / --paper-rgb)
-       其他地方散落的 rgba() 都走 var(--ink-rgb) / var(--paper-rgb),无需逐处改 */
-    --ink:#0a0a0b;
-    --ink-rgb:10,10,11;
-    --paper:#f1efea;
-    --paper-rgb:241,239,234;
-    --paper-tint:#e8e5de;
-    --ink-tint:#18181a;
+  /* GZ:TOKENS:START · guizang-design v0.1.0 生成，不要手改；改设计请改 guizang-design 后运行 scripts/sync-skill.mjs */
+:root{
+  --font-display:'Playfair Display','Noto Serif SC','Source Han Serif SC','Songti SC',serif;
+  --font-serif:'Source Serif 4','Noto Serif SC','Source Han Serif SC','Songti SC','STSong',Georgia,serif;
+  --font-serif-zh:'Noto Serif SC','Source Han Serif SC','Songti SC','STSong',serif;
+  --font-sans:'Noto Sans SC','PingFang SC','Hiragino Sans GB','Microsoft YaHei',system-ui,sans-serif;
+  --font-mono:'IBM Plex Mono','Noto Sans SC',ui-monospace,'SF Mono',Menlo,monospace;
+  --sp-1:2px;
+  --sp-2:4px;
+  --sp-3:8px;
+  --sp-4:12px;
+  --sp-5:16px;
+  --sp-6:24px;
+  --sp-7:32px;
+  --sp-8:40px;
+  --sp-9:48px;
+  --sp-10:64px;
+  --sp-11:80px;
+  --sp-12:96px;
+  --sp-13:160px;
+  --radius-none:0px;
+  --radius-xs:3px;
+  --radius-sm:6px;
+  --radius-md:14px;
+  --radius-pill:999px;
+  --ease-standard:cubic-bezier(.2,0,.38,.9);
+  --ease-expressive:cubic-bezier(.4,.14,.3,1);
+  --ease-entrance:cubic-bezier(0,0,.3,1);
+  --ease-entrance-standard:cubic-bezier(0,0,.38,.9);
+  --ease-editorial:cubic-bezier(.22,1,.36,1);
+  --ease-page:cubic-bezier(.77,0,.175,1);
+  --dur-fast-1:70ms;
+  --dur-fast-2:110ms;
+  --dur-moderate-1:150ms;
+  --dur-moderate-2:240ms;
+  --dur-slow-1:400ms;
+  --dur-slow-2:700ms;
+  --dur-page:900ms;
+  --stagger-tight:70ms;
+  --stagger-base:100ms;
+  --stagger-loose:160ms;
+  --move-sm:8px;
+  --move-md:16px;
+  --move-lg:24px;
+  --paper:#f1efea;
+  --paper-2:#e8e5de;
+  --ink:#0a0a0b;
+  --muted:#68625a;
+  --accent:#111111;
+  --accent-soft:#d8d2c6;
+  --accent-on:#f1efea;
+  --accent-ink:#111111;
+  --accent-display:#111111;
+  --accent-ink-inverse:#b2b2b2;
+  --text-primary:#0a0a0b;
+  --text-body:#2c2b2c;
+  --text-secondary:#404040;
+  --text-helper:#68625a;
+  --line-strong:#7e7d7b;
+  --line:#b7b5b2;
+  --line-subtle:#d1cfcb;
+  --ink-rgb:10,10,11;
+  --paper-rgb:241,239,234;
+  --accent-rgb:17,17,17;
+  --accent-on-rgb:241,239,234;
+  --accent-on-text:#f1efea;
+  --accent-on-text-rgb:241,239,234;
+  color-scheme:light;
+}
+[data-theme="ink-classic"]{
+  --paper:#f1efea;
+  --paper-2:#e8e5de;
+  --ink:#0a0a0b;
+  --muted:#68625a;
+  --accent:#111111;
+  --accent-soft:#d8d2c6;
+  --accent-on:#f1efea;
+  --accent-ink:#111111;
+  --accent-display:#111111;
+  --accent-ink-inverse:#b2b2b2;
+  --text-primary:#0a0a0b;
+  --text-body:#2c2b2c;
+  --text-secondary:#404040;
+  --text-helper:#68625a;
+  --line-strong:#7e7d7b;
+  --line:#b7b5b2;
+  --line-subtle:#d1cfcb;
+  --ink-rgb:10,10,11;
+  --paper-rgb:241,239,234;
+  --accent-rgb:17,17,17;
+  --accent-on-rgb:241,239,234;
+  --accent-on-text:#f1efea;
+  --accent-on-text-rgb:241,239,234;
+  color-scheme:light;
+}
+[data-theme="indigo-porcelain"]{
+  --paper:#f1f3f5;
+  --paper-2:#e4e8ec;
+  --ink:#0a1f3d;
+  --muted:#5f6d78;
+  --accent:#315d93;
+  --accent-soft:#d7e1ec;
+  --accent-on:#f1f3f5;
+  --accent-ink:#315d93;
+  --accent-display:#315d93;
+  --accent-ink-inverse:#89b9f5;
+  --text-primary:#0a1f3d;
+  --text-body:#2e415c;
+  --text-secondary:#43546d;
+  --text-helper:#5f6d78;
+  --line-strong:#808d9e;
+  --line:#b8c0ca;
+  --line-subtle:#d2d7dd;
+  --ink-rgb:10,31,61;
+  --paper-rgb:241,243,245;
+  --accent-rgb:49,93,147;
+  --accent-on-rgb:241,243,245;
+  --accent-on-text:#f1f3f5;
+  --accent-on-text-rgb:241,243,245;
+  color-scheme:light;
+}
+[data-theme="forest-ink"]{
+  --paper:#f5f1e8;
+  --paper-2:#ece7da;
+  --ink:#1a2e1f;
+  --muted:#5d665d;
+  --accent:#2e6b4f;
+  --accent-soft:#d4dfd2;
+  --accent-on:#f5f1e8;
+  --accent-ink:#2e6b4f;
+  --accent-display:#2e6b4f;
+  --accent-ink-inverse:#88c6a6;
+  --text-primary:#1a2e1f;
+  --text-body:#3d4d3e;
+  --text-secondary:#515f51;
+  --text-helper:#5d665d;
+  --line-strong:#8b9386;
+  --line:#c0c2b7;
+  --line-subtle:#d8d7cd;
+  --ink-rgb:26,46,31;
+  --paper-rgb:245,241,232;
+  --accent-rgb:46,107,79;
+  --accent-on-rgb:245,241,232;
+  --accent-on-text:#f5f1e8;
+  --accent-on-text-rgb:245,241,232;
+  color-scheme:light;
+}
+[data-theme="kraft-paper"]{
+  --paper:#eedfc7;
+  --paper-2:#e0d0b6;
+  --ink:#2a1e13;
+  --muted:#755f49;
+  --accent:#9b5a2e;
+  --accent-soft:#d5b58f;
+  --accent-on:#eedfc7;
+  --accent-ink:#804212;
+  --accent-display:#9b5a2e;
+  --accent-ink-inverse:#eda679;
+  --text-primary:#2a1e13;
+  --text-body:#493c2f;
+  --text-secondary:#5b4e3f;
+  --text-helper:#755f49;
+  --line-strong:#8f816f;
+  --line:#bfb09b;
+  --line-subtle:#d4c5af;
+  --ink-rgb:42,30,19;
+  --paper-rgb:238,223,199;
+  --accent-rgb:155,90,46;
+  --accent-on-rgb:238,223,199;
+  --accent-on-text:#ffffff;
+  --accent-on-text-rgb:255,255,255;
+  color-scheme:light;
+}
+[data-theme="dune"]{
+  --paper:#f0e6d2;
+  --paper-2:#e3d7bf;
+  --ink:#1f1a14;
+  --muted:#6f6557;
+  --accent:#8f7650;
+  --accent-soft:#d4c2a4;
+  --accent-on:#f0e6d2;
+  --accent-ink:#705833;
+  --accent-display:#8f7650;
+  --accent-ink-inverse:#cbb088;
+  --text-primary:#1f1a14;
+  --text-body:#3f3931;
+  --text-secondary:#524c42;
+  --text-helper:#6f6557;
+  --line-strong:#8a8275;
+  --line:#bdb4a3;
+  --line-subtle:#d4cab8;
+  --ink-rgb:31,26,20;
+  --paper-rgb:240,230,210;
+  --accent-rgb:143,118,80;
+  --accent-on-rgb:240,230,210;
+  --accent-on-text:#ffffff;
+  --accent-on-text-rgb:255,255,255;
+  color-scheme:light;
+}
 
-    /* ============ 字体(跨主题固定) ============ */
-    --mono:"IBM Plex Mono",ui-monospace,monospace;
-    --serif-en:"Playfair Display","Source Serif 4",Georgia,serif;
-    --serif-body-en:"Source Serif 4",Georgia,serif;
-    --serif-zh:"Noto Serif SC",source-han-serif-sc,serif;
-    --sans-zh:"Noto Sans SC",source-han-sans-sc,sans-serif;
-  }
+:root{
+  --fs-display:min(11vw,19.556vh);
+  --fw-display:700;
+  --lh-display:0.92;
+  --ls-display:-.025em;
+  --ff-display:var(--font-display);
+  --fst-display:normal;
+  --tt-display:none;
+  --fs-display-zh:min(10vw,17.778vh);
+  --fw-display-zh:900;
+  --lh-display-zh:0.96;
+  --ls-display-zh:-.02em;
+  --ff-display-zh:var(--font-serif-zh);
+  --fst-display-zh:normal;
+  --tt-display-zh:none;
+  --fs-title:min(6.2vw,11.022vh);
+  --fw-title:700;
+  --lh-title:1.08;
+  --ls-title:-.025em;
+  --ff-title:var(--font-display);
+  --fst-title:normal;
+  --tt-title:none;
+  --fs-title-zh:min(6.2vw,11.022vh);
+  --fw-title-zh:700;
+  --lh-title-zh:1.08;
+  --ls-title-zh:-.01em;
+  --ff-title-zh:var(--font-serif-zh);
+  --fst-title-zh:normal;
+  --tt-title-zh:none;
+  --fs-heading:min(2.3vw,4.089vh);
+  --fw-heading:600;
+  --lh-heading:1.3;
+  --ls-heading:0;
+  --ff-heading:var(--font-serif-zh);
+  --fst-heading:normal;
+  --tt-heading:none;
+  --fs-subhead:min(3.1vw,5.511vh);
+  --fw-subhead:500;
+  --lh-subhead:1.25;
+  --ls-subhead:0;
+  --ff-subhead:var(--font-serif-zh);
+  --fst-subhead:normal;
+  --tt-subhead:none;
+  --fs-lead:max(min(20px,2.778vh),min(1.75vw,3.111vh));
+  --fw-lead:400;
+  --lh-lead:1.5;
+  --ls-lead:0;
+  --ff-lead:var(--font-serif-zh);
+  --fst-lead:normal;
+  --tt-lead:none;
+  --fs-body:max(min(18px,2.5vh),min(1.22vw,2.169vh));
+  --fw-body:400;
+  --lh-body:1.75;
+  --ls-body:.01em;
+  --ff-body:var(--font-sans);
+  --fst-body:normal;
+  --tt-body:none;
+  --fs-small:max(min(16px,2.222vh),min(1.05vw,1.867vh));
+  --fw-small:400;
+  --lh-small:1.5;
+  --ls-small:0;
+  --ff-small:var(--font-sans);
+  --fst-small:normal;
+  --tt-small:none;
+  --fs-caption:max(min(14px,1.944vh),min(.8vw,1.422vh));
+  --fw-caption:400;
+  --lh-caption:1.4;
+  --ls-caption:.2em;
+  --ff-caption:var(--font-mono);
+  --fst-caption:normal;
+  --tt-caption:uppercase;
+  --fs-label:max(min(14px,1.944vh),min(.88vw,1.564vh));
+  --fw-label:500;
+  --lh-label:1.3;
+  --ls-label:.16em;
+  --ff-label:var(--font-mono);
+  --fst-label:normal;
+  --tt-label:uppercase;
+  --fs-meta:max(min(14px,1.944vh),min(.78vw,1.387vh));
+  --fw-meta:400;
+  --lh-meta:1.3;
+  --ls-meta:.2em;
+  --ff-meta:var(--font-mono);
+  --fst-meta:normal;
+  --tt-meta:uppercase;
+  --fs-quote:min(5.8vw,10.311vh);
+  --fw-quote:700;
+  --lh-quote:1.2;
+  --ls-quote:-.01em;
+  --ff-quote:var(--font-serif-zh);
+  --fst-quote:normal;
+  --tt-quote:none;
+  --fs-num-xl:min(10vw,17.778vh);
+  --fw-num-xl:800;
+  --lh-num-xl:0.85;
+  --ls-num-xl:-.03em;
+  --ff-num-xl:var(--font-display);
+  --fst-num-xl:normal;
+  --tt-num-xl:none;
+  --fs-num-l:min(8vw,14.222vh);
+  --fw-num-l:800;
+  --lh-num-l:0.88;
+  --ls-num-l:-.03em;
+  --ff-num-l:var(--font-display);
+  --fst-num-l:normal;
+  --tt-num-l:none;
+  --fs-num-m:min(5.5vw,9.778vh);
+  --fw-num-m:700;
+  --lh-num-m:0.88;
+  --ls-num-m:-.02em;
+  --ff-num-m:var(--font-display);
+  --fst-num-m:normal;
+  --tt-num-m:none;
+  --canvas-padding:6vh 6vw 10vh 6vw;
+  --canvas-safe-bottom:8vh;
+  --sp-1:0.1042vw;
+  --sp-2:0.2083vw;
+  --sp-3:0.4167vw;
+  --sp-4:0.625vw;
+  --sp-5:0.8333vw;
+  --sp-6:1.25vw;
+  --sp-7:1.6667vw;
+  --sp-8:2.0833vw;
+  --sp-9:2.5vw;
+  --sp-10:3.3333vw;
+  --sp-11:4.1667vw;
+  --sp-12:5vw;
+  --sp-13:8.3333vw;
+}
+.gz-t-display{font-family:var(--ff-display);font-size:var(--fs-display);font-weight:var(--fw-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-style:var(--fst-display);text-transform:var(--tt-display)}
+.gz-t-display-zh{font-family:var(--ff-display-zh);font-size:var(--fs-display-zh);font-weight:var(--fw-display-zh);line-height:var(--lh-display-zh);letter-spacing:var(--ls-display-zh);font-style:var(--fst-display-zh);text-transform:var(--tt-display-zh)}
+.gz-t-title{font-family:var(--ff-title);font-size:var(--fs-title);font-weight:var(--fw-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-style:var(--fst-title);text-transform:var(--tt-title)}
+.gz-t-title-zh{font-family:var(--ff-title-zh);font-size:var(--fs-title-zh);font-weight:var(--fw-title-zh);line-height:var(--lh-title-zh);letter-spacing:var(--ls-title-zh);font-style:var(--fst-title-zh);text-transform:var(--tt-title-zh)}
+.gz-t-heading{font-family:var(--ff-heading);font-size:var(--fs-heading);font-weight:var(--fw-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-style:var(--fst-heading);text-transform:var(--tt-heading)}
+.gz-t-subhead{font-family:var(--ff-subhead);font-size:var(--fs-subhead);font-weight:var(--fw-subhead);line-height:var(--lh-subhead);letter-spacing:var(--ls-subhead);font-style:var(--fst-subhead);text-transform:var(--tt-subhead)}
+.gz-t-lead{font-family:var(--ff-lead);font-size:var(--fs-lead);font-weight:var(--fw-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-style:var(--fst-lead);text-transform:var(--tt-lead)}
+.gz-t-body{font-family:var(--ff-body);font-size:var(--fs-body);font-weight:var(--fw-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);font-style:var(--fst-body);text-transform:var(--tt-body)}
+.gz-t-small{font-family:var(--ff-small);font-size:var(--fs-small);font-weight:var(--fw-small);line-height:var(--lh-small);letter-spacing:var(--ls-small);font-style:var(--fst-small);text-transform:var(--tt-small)}
+.gz-t-caption{font-family:var(--ff-caption);font-size:var(--fs-caption);font-weight:var(--fw-caption);line-height:var(--lh-caption);letter-spacing:var(--ls-caption);font-style:var(--fst-caption);text-transform:var(--tt-caption)}
+.gz-t-label{font-family:var(--ff-label);font-size:var(--fs-label);font-weight:var(--fw-label);line-height:var(--lh-label);letter-spacing:var(--ls-label);font-style:var(--fst-label);text-transform:var(--tt-label)}
+.gz-t-meta{font-family:var(--ff-meta);font-size:var(--fs-meta);font-weight:var(--fw-meta);line-height:var(--lh-meta);letter-spacing:var(--ls-meta);font-style:var(--fst-meta);text-transform:var(--tt-meta)}
+.gz-t-quote{font-family:var(--ff-quote);font-size:var(--fs-quote);font-weight:var(--fw-quote);line-height:var(--lh-quote);letter-spacing:var(--ls-quote);font-style:var(--fst-quote);text-transform:var(--tt-quote)}
+.gz-t-num-xl{font-family:var(--ff-num-xl);font-size:var(--fs-num-xl);font-weight:var(--fw-num-xl);line-height:var(--lh-num-xl);letter-spacing:var(--ls-num-xl);font-style:var(--fst-num-xl);text-transform:var(--tt-num-xl)}
+.gz-t-num-l{font-family:var(--ff-num-l);font-size:var(--fs-num-l);font-weight:var(--fw-num-l);line-height:var(--lh-num-l);letter-spacing:var(--ls-num-l);font-style:var(--fst-num-l);text-transform:var(--tt-num-l)}
+.gz-t-num-m{font-family:var(--ff-num-m);font-size:var(--fs-num-m);font-weight:var(--fw-num-m);line-height:var(--lh-num-m);letter-spacing:var(--ls-num-m);font-style:var(--fst-num-m);text-transform:var(--tt-num-m)}
+
+:lang(zh){line-break:strict;text-spacing-trim:normal;text-autospace:normal;overflow-wrap:break-word}
+:lang(zh) .gz-prose em:not(:lang(en)){font-style:normal;text-emphasis:filled dot;text-emphasis-position:under right}
+.gz-tnum{font-variant-numeric:tabular-nums}
+
+/* 歸藏设计系统 · 共享组件
+ *
+ * 一份结构，三种介质：根节点 <html data-family="magazine|swiss" data-medium="slide|card|page">。
+ * 这里只管布局、颜色和间距；字号、字重、行高一律由 gz-t-<角色> 类提供，
+ * 所以同一个组件放进 PPT、卡片、网页会自动换成各自的字号。
+ * 颜色只用语义 token（--text-* / --line-* / --accent*），换主题不需要改组件。
+ */
+
+/* ---------- 家族差异 ---------- */
+/* 单张卡片 / 单页换主题（[data-theme]）或反色（[data-surface]）时，线条变量要在那一层重新计算，否则沿用根节点的颜色 */
+[data-family="magazine"], [data-family="magazine"] [data-theme], [data-family="magazine"] [data-surface] { --img-pos: center top; --rule: 1px solid var(--line-strong); --rule-strong: 1px solid var(--line-strong) }
+[data-family="swiss"], [data-family="swiss"] [data-theme], [data-family="swiss"] [data-surface] { --img-pos: center center; --rule: 1px solid var(--line); --rule-strong: 2px solid var(--ink) }
+
+/* ---------- 表面：反色块里文字角色跟着换 ---------- */
+[data-surface="ink"] {
+  background: var(--ink); color: var(--paper);
+  --text-primary: var(--paper); --text-body: rgba(var(--paper-rgb), .86); --text-secondary: rgba(var(--paper-rgb), .72);
+  --text-helper: rgba(var(--paper-rgb), .62); --line: rgba(var(--paper-rgb), .22); --line-strong: rgba(var(--paper-rgb), .45);
+  --accent-ink: var(--accent-ink-inverse); --accent-display: var(--accent-ink-inverse); --rule-strong: 2px solid var(--paper);
+}
+[data-family="magazine"] [data-surface="ink"], [data-family="magazine"][data-surface="ink"] { --rule-strong: 1px solid rgba(var(--paper-rgb), .45) }
+[data-surface="accent"] {
+  background: var(--accent); color: var(--accent-on);
+  --text-primary: var(--accent-on); --text-body: rgba(var(--accent-on-rgb), .88); --text-secondary: rgba(var(--accent-on-rgb), .78);
+  --text-helper: rgba(var(--accent-on-rgb), .7); --line: rgba(var(--accent-on-rgb), .3); --line-strong: rgba(var(--accent-on-rgb), .55);
+  --accent-ink: var(--accent-on); --accent-display: var(--accent-on); --rule-strong: 2px solid var(--accent-on);
+}
+[data-surface="paper-2"] { background: var(--paper-2) }
+
+/* 强调色文字：小字用 accent-ink，大字 / 大数字用 accent-display（浅色强调色在纸上会自动加深；反色块里自动切换） */
+.gz-c-accent { color: var(--accent-ink) }
+.gz-c-accent-display { color: var(--accent-display) }
+
+/* ---------- 页眉页脚 chrome ---------- */
+.gz-chrome { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-6); color: var(--text-helper); border-top: var(--rule); padding-top: var(--sp-4) }
+.gz-chrome[data-pos="top"] { border-top: 0; border-bottom: var(--rule); padding: 0 0 var(--sp-4) }
+.gz-chrome__group { display: flex; gap: var(--sp-5); min-width: 0 }
+.gz-chrome__accent { color: var(--accent-ink) }
+
+/* ---------- 封面 cover ---------- */
+.gz-cover { display: flex; flex-direction: column; gap: var(--sp-6); color: var(--text-primary) }
+.gz-cover__kicker { color: var(--text-helper) }
+[data-family="swiss"] .gz-cover__kicker { color: var(--accent-ink) }
+.gz-cover__body { width: 100%; container-type: inline-size }
+/* 标题按最长一行的字数自动收字号：--chars 由 components/render.mjs 算好写进 style；手写时填最长一行的字数（中文 1、西文约 0.56）。上限仍是 token 定的展示字号 */
+.gz-cover__title { margin: 0; font-size: min(var(--fs-display-zh), calc(100cqi / var(--chars, 1) * .94)) }
+.gz-cover__rule { width: 96px; height: 0; border-top: 2px solid var(--accent) }
+[data-family="swiss"] .gz-cover__rule { border-top-width: 3px }
+.gz-cover__sub { margin: 0; color: var(--text-body); max-width: 32em }
+.gz-cover__meta { margin-top: auto }
+/* 幻灯片、卡片：封面撑满画布，标题压在下半部 */
+[data-medium="slide"] .gz-cover, [data-medium="card"] .gz-cover { height: 100% }
+[data-medium="slide"] .gz-cover__body, [data-medium="card"] .gz-cover__body { margin-top: auto; display: flex; flex-direction: column; gap: var(--sp-7) }
+[data-medium="slide"] .gz-cover__meta, [data-medium="card"] .gz-cover__meta { margin-top: var(--sp-10) }
+/* 网页：杂志风居中，瑞士风左对齐 */
+[data-medium="page"] .gz-cover { padding: var(--sp-11) 0 var(--sp-9); border-bottom: var(--rule) }
+[data-medium="page"] .gz-cover__body { display: flex; flex-direction: column; gap: var(--sp-6) }
+[data-medium="page"][data-family="magazine"] .gz-cover { align-items: center; text-align: center }
+[data-medium="page"][data-family="magazine"] .gz-cover__body { align-items: center }
+[data-medium="page"] .gz-cover__meta { margin-top: var(--sp-6); border-top: 0; padding-top: 0; justify-content: center }
+[data-medium="page"][data-family="swiss"] .gz-cover__meta { justify-content: flex-start }
+
+/* ---------- 大数字 stat ---------- */
+.gz-stats { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-9) var(--sp-7) }
+.gz-stats[data-count="1"] { --cols: 1 } .gz-stats[data-count="2"] { --cols: 2 } .gz-stats[data-count="4"] { --cols: 4 }
+[data-medium="card"] .gz-stats { --cols: 2 }
+[data-medium="card"] .gz-stats[data-count="1"], [data-medium="card"] .gz-stats[data-count="3"] { --cols: 1 }
+.gz-stat { display: flex; flex-direction: column; gap: var(--sp-4); border-top: var(--rule-strong); padding-top: var(--sp-5); min-width: 0 }
+.gz-stat__label { color: var(--text-helper) }
+.gz-stat__value { display: flex; align-items: baseline; gap: .06em; font-variant-numeric: tabular-nums lining-nums; white-space: nowrap }
+.gz-stat__unit { font-size: .4em; font-weight: 500; letter-spacing: 0; color: var(--text-secondary) }
+.gz-stat.is-accent .gz-stat__num { color: var(--accent-ink) }
+.gz-stat__note { margin: 0; color: var(--text-secondary); max-width: 24em }
+[data-medium="card"] .gz-stats[data-count="3"] .gz-stat { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: var(--sp-7) }
+[data-medium="card"] .gz-stats[data-count="3"] .gz-stat__label { grid-column: 1 / -1 }
+[data-medium="card"] .gz-stats[data-count="3"] .gz-stat__note { padding-bottom: .6em }
+
+/* ---------- 引言 quote ---------- */
+.gz-quote { margin: 0; display: flex; flex-direction: column; gap: var(--sp-7) }
+.gz-quote__text { margin: 0; color: var(--text-primary); text-wrap: balance }
+.gz-quote__text p { margin: 0; text-wrap: balance }
+[data-family="magazine"] .gz-quote__text::before { content: "\201C"; display: block; font-family: var(--font-display); font-style: normal; color: var(--accent); font-size: 1.8em; line-height: 1; height: .55em }
+[data-family="swiss"] .gz-quote { border-top: var(--rule-strong); padding-top: var(--sp-7) }
+.gz-quote__source { color: var(--text-helper) }
+[data-medium="page"][data-family="magazine"] .gz-quote { align-items: center; text-align: center; padding: var(--sp-9) 0 }
+
+/* ---------- 流程 process：幻灯片 / 网页横排，卡片竖排 ---------- */
+.gz-process { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--sp-7) }
+.gz-process__step { display: flex; flex-direction: column; gap: var(--sp-4); border-top: var(--rule-strong); padding-top: var(--sp-5); min-width: 0 }
+.gz-process__nb { color: var(--accent-ink) }
+.gz-process__title { margin: 0 }
+.gz-process__desc { margin: 0; color: var(--text-secondary) }
+[data-medium="card"] .gz-process { grid-template-columns: 1fr; gap: 0; border-bottom: var(--rule) }
+[data-medium="card"] .gz-process__step { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--sp-6); row-gap: var(--sp-3); padding: var(--sp-7) 0 }
+[data-medium="card"] .gz-process__step + .gz-process__step { border-top: var(--rule) }
+[data-medium="card"] .gz-process__nb { grid-row: span 2 }
+[data-medium="page"] .gz-process { --n: 2; row-gap: var(--sp-8) }
+
+/* ---------- 对比 compare：左右分栏，卡片上下叠 ---------- */
+.gz-compare { display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 0 var(--sp-9) }
+.gz-compare__rule { background: var(--line-strong) }
+.gz-compare__side { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0 }
+.gz-compare__tag { color: var(--text-helper) }
+.gz-compare__side[data-side="after"] .gz-compare__tag { color: var(--accent-ink) }
+.gz-compare__title { margin: 0 }
+.gz-compare__side[data-side="before"] .gz-compare__title { color: var(--text-secondary) }
+.gz-compare__desc { margin: 0; color: var(--text-secondary) }
+.gz-compare__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--sp-3); color: var(--text-body) }
+.gz-compare__list li { padding-left: 1.2em; position: relative }
+.gz-compare__list li::before { content: ""; position: absolute; left: 0; top: .72em; width: .5em; border-top: 1px solid currentColor }
+[data-family="swiss"] .gz-compare__side[data-side="after"][data-surface] { padding: var(--sp-8) }
+[data-medium="card"] .gz-compare { grid-template-columns: 1fr; gap: var(--sp-8) 0 }
+[data-medium="card"] .gz-compare__rule { height: 1px }
+
+/* ---------- 图框 figure：照片 cover 裁切，截图 contain 放在底台上 ---------- */
+.gz-figure { margin: 0; display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0 }
+.gz-figure__well { position: relative; aspect-ratio: var(--ratio, 16 / 10); overflow: hidden; background: var(--paper-2) }
+.gz-figure__well > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--img-pos) }
+.gz-figure[data-ratio="16x9"] { --ratio: 16 / 9 } .gz-figure[data-ratio="16x10"] { --ratio: 16 / 10 } .gz-figure[data-ratio="4x3"] { --ratio: 4 / 3 }
+.gz-figure[data-ratio="3x2"] { --ratio: 3 / 2 } .gz-figure[data-ratio="1x1"] { --ratio: 1 } .gz-figure[data-ratio="3x4"] { --ratio: 3 / 4 } .gz-figure[data-ratio="21x9"] { --ratio: 21 / 9 }
+.gz-figure[data-kind="screenshot"] .gz-figure__well { display: flex; align-items: center; justify-content: center; padding: var(--inset, var(--sp-8)) }
+.gz-figure[data-kind="screenshot"] .gz-figure__well > img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line) }
+[data-family="magazine"] .gz-figure[data-kind="screenshot"] .gz-figure__well > img { box-shadow: 0 0 0 1px var(--line), 0 18px 40px -24px rgba(var(--ink-rgb), .45) }
+[data-family="swiss"] .gz-figure[data-kind="screenshot"] .gz-figure__well { background: var(--grey-1); border-top: 3px solid var(--accent) }
+[data-family="swiss"] .gz-figure[data-kind="screenshot"] .gz-figure__well > img { border-radius: 0 }
+.gz-figure__cap { color: var(--text-helper); display: flex; gap: var(--sp-4) }
+.gz-figure__idx { color: var(--accent-ink); flex: none }
+
+/* ---------- 图片网格 gallery ---------- */
+.gz-gallery { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: var(--sp-7) var(--sp-6) }
+[data-medium="card"] .gz-gallery { --cols: 2 }
+[data-medium="card"] .gz-gallery[data-count="3"] > :first-child { grid-column: 1 / -1; --ratio: 16 / 9 }
+
+/* ---------- 条目清单 ledger ---------- */
+.gz-ledger { list-style: none; margin: 0; padding: 0; border-top: var(--rule-strong) }
+.gz-ledger__row { display: grid; grid-template-columns: var(--nb-w, 3.2em) minmax(0, 1fr) auto; column-gap: var(--sp-6); align-items: baseline; padding: var(--sp-6) 0; border-bottom: var(--rule) }
+.gz-ledger__nb { color: var(--accent-ink) }
+.gz-ledger__title { margin: 0 }
+.gz-ledger__note { margin: var(--sp-2) 0 0; color: var(--text-secondary) }
+.gz-ledger__value { color: var(--text-helper); text-align: right; white-space: nowrap }
+[data-medium="card"] .gz-ledger__row { --nb-w: 72px; padding: var(--sp-7) 0 }
+
+/* 歸藏设计系统 · 纹理与特效图层（纯 CSS，颜色全部来自 token）
+ * 来源：PPT 瑞士风 .dots / .dot-mat / .ring-mat / .cross-mat / .hatch，卡片杂志风 .grain / .paper-wash。
+ */
+
+/* 特效画布：铺满父容器、在内容下面、不挡点击。父容器需要 position: relative */
+.gz-effect { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; z-index: 0 }
+.gz-layer-content { position: relative; z-index: 1 }
+
+/* 点阵：前景色画点，跟随所在表面的文字色 */
+.gz-dots      { background-image: radial-gradient(currentColor 1px, transparent 1.2px); background-size: 12px 12px; opacity: .18 }
+.gz-dots-fine { background-image: radial-gradient(currentColor .8px, transparent 1px); background-size: 8px 8px; opacity: .14 }
+.gz-dots-bold { background-image: radial-gradient(currentColor 1.4px, transparent 1.6px); background-size: 18px 18px; opacity: .22 }
+
+.gz-dot-mat         { --mat: 14px; background-image: radial-gradient(currentColor 1.4px, transparent 1.6px); background-size: var(--mat) var(--mat); opacity: .5 }
+.gz-dot-mat.is-lg   { --mat: 22px } .gz-dot-mat.is-xl { --mat: 34px }
+.gz-dot-mat.is-dense{ --mat: 9px; opacity: .62 }
+.gz-ring-mat        { --mat: 18px; background-image: radial-gradient(circle, transparent 2px, currentColor 2px, currentColor 2.7px, transparent 2.9px); background-size: var(--mat) var(--mat); opacity: .55 }
+.gz-ring-mat.is-lg  { --mat: 28px }
+.gz-cross-mat       { --mat: 22px; background: currentColor; opacity: .42;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M8 8l6 6M14 8l-6 6' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / var(--mat) var(--mat);
+          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Cpath d='M8 8l6 6M14 8l-6 6' stroke='%23000' stroke-width='1.4'/%3E%3C/svg%3E") 0 0 / var(--mat) var(--mat) }
+.gz-cross-mat.is-lg { --mat: 32px }
+.gz-hatch           { background-image: repeating-linear-gradient(135deg, currentColor 0 1px, transparent 1px 8px); opacity: .55 }
+
+/* 纸张颗粒与墨色晕染：杂志风卡片的「氛围层」，叠在特效画布上、内容下 */
+.gz-grain      { position: absolute; inset: 0; pointer-events: none; z-index: 0; mix-blend-mode: multiply; opacity: .35;
+                 background-image: radial-gradient(rgba(0,0,0,.045) 1px, transparent 1px); background-size: 3px 3px }
+[data-scheme="dark"] .gz-grain, .gz-grain.is-dark { mix-blend-mode: screen; opacity: .26; background-image: radial-gradient(rgba(255,244,214,.10) 1px, transparent 1px) }
+.gz-paper-wash { position: absolute; inset: 0; pointer-events: none; z-index: 0;
+                 background: linear-gradient(180deg, rgba(var(--ink-rgb), .02), rgba(var(--ink-rgb), .05) 60%, rgba(var(--ink-rgb), .08)) }
+.gz-ink-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 0;
+                 background: radial-gradient(circle at 18% 12%, rgba(var(--ink-rgb), .10), transparent 34%), radial-gradient(circle at 82% 80%, rgba(var(--accent-rgb), .10), transparent 38%) }
+
+/* PPT 杂志风：WebGL 背景上的纸 / 墨蒙版，保证文字可读（原 .slide.light/.dark::before） */
+.gz-veil       { position: absolute; inset: 0; pointer-events: none; z-index: 0; backdrop-filter: blur(3px); background: rgba(var(--paper-rgb), .78) }
+.gz-veil.is-ink{ background: rgba(var(--ink-rgb), .78) }
+.gz-veil.is-hero { backdrop-filter: none; background: rgba(var(--paper-rgb), .16) }
+.gz-veil.is-hero.is-ink { background: rgba(var(--ink-rgb), .12) }
+
+@media (prefers-reduced-motion: reduce) { .gz-effect { animation: none } }
+
+/* 旧变量名别名（迁移期保留） */
+:root{--mono:var(--font-mono);--serif-en:var(--font-display);--serif-body-en:var(--font-serif);--serif-zh:var(--font-serif-zh);--sans-zh:var(--font-sans);--paper-tint:var(--paper-2);--ink-tint:var(--text-body);--nav-safe-bottom:var(--canvas-safe-bottom)}
+/* 模板自己的反色块 → 设计系统反色表面 */
+.slide.dark{--text-primary: var(--paper);--text-body: rgba(var(--paper-rgb), .86);--text-secondary: rgba(var(--paper-rgb), .72);--text-helper: rgba(var(--paper-rgb), .62);--line: rgba(var(--paper-rgb), .22);--line-strong: rgba(var(--paper-rgb), .45);--accent-ink: var(--accent-ink-inverse);--accent-display: var(--accent-ink-inverse);--rule-strong: 2px solid var(--paper)}
+/* GZ:TOKENS:END */
   *{box-sizing:border-box;margin:0;padding:0}
   html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--paper);font-family:var(--sans-zh);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
 
+  /* ============ 底部分页安全区（与瑞士风同名同值）============ */
+  .nav-safe-bottom{padding-bottom:var(--nav-safe-bottom)}
+  .nav-safe-bottom-tight{padding-bottom:calc(var(--nav-safe-bottom) * .65)}
+
   /* ============ WebGL 双背景 ============ */
   canvas.bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block;transition:opacity 1.2s ease}
   canvas#bg-light{opacity:0}
   canvas#bg-dark{opacity:1}
   body.light-bg canvas#bg-light{opacity:1}
   body.light-bg canvas#bg-dark{opacity:0}
-  body.low-power canvas.bg{display:none!important}
+  /* 低功耗：背景停在一帧静态画面（gz-effects 只画一次），不隐藏，否则透明页会露出底色 */
 
   /* ============ Deck 容器 + 翻页 ============ */
   /* width: NSLIDES * 100vw，会在 JS 里动态矫正 */
@@ -44,6 +569,9 @@
   .slide{width:100vw;height:100vh;flex:0 0 100vw;position:relative;padding:6vh 6vw 10vh 6vw;display:flex;flex-direction:column;overflow:hidden}
   .slide.light{color:var(--ink);background:var(--paper)}
   .slide.dark{color:var(--paper);background:var(--ink)}
+  /* 播放中的页面透明，让 WebGL 背景透过 ::before 遮罩显示（普通页 .78 + 模糊，hero 页 .12/.16）；
+     总览、演讲者缩略图里的克隆页不在 #deck 下，保持不透明底色 */
+  #deck > .slide.light,#deck > .slide.dark{background:transparent}
 
   /* 默认页：遮罩较厚，保证文字可读 */
   .slide::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background .7s ease}
@@ -59,13 +587,13 @@
 
   /* ============ Magazine chrome：顶部 meta + 底部 foot ============
      （v1 布局 + v2 字号在此合并为唯一定义，不要在别处二次定义） */
-  .chrome{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:max(11px,.78vw);letter-spacing:.2em;text-transform:uppercase;opacity:.62}
+  .chrome{display:flex;justify-content:space-between;align-items:flex-start;font-family:var(--mono);font-size:max(min(14px,1.944vh),.78vw);letter-spacing:.2em;text-transform:uppercase;opacity:.62}
   .chrome .left,.chrome .right{display:flex;gap:2.4em;align-items:center}
   .chrome .sep{width:40px;height:1px;background:currentColor;opacity:.4}
-  .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:max(11px,.78vw);letter-spacing:.18em;text-transform:uppercase;opacity:.5}
-  .foot .title{font-family:var(--serif-zh);font-weight:400;letter-spacing:.05em;text-transform:none;opacity:.75;font-size:13px}
+  .foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-family:var(--mono);font-size:max(min(14px,1.944vh),.78vw);letter-spacing:.18em;text-transform:uppercase;opacity:.5}
+  .foot .title{font-family:var(--serif-zh);font-weight:400;letter-spacing:.05em;text-transform:none;opacity:.75;font-size:min(14px,1.944vh)}
 
-  .tag{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;padding:6px 14px;border:1px solid currentColor;opacity:.85}
+  .tag{display:inline-block;font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.24em;text-transform:uppercase;padding:6px 14px;border:1px solid currentColor;opacity:.85}
   .rule{width:100%;height:1px;background:currentColor;opacity:.25;margin:3vh 0}
   .rule.v{width:1px;height:100%;margin:0}
 
@@ -74,31 +602,31 @@
      · 非衬线（Noto Sans SC）：正文描述、body、补充说明
      · 等宽（IBM Plex Mono）：kicker、meta 小标签、foot 右侧
   */
-  .kicker{font-family:var(--mono);font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-bottom:2.6vh}
-  .display{font-family:var(--serif-en);font-weight:700;font-size:11vw;line-height:.92;letter-spacing:-.025em}
-  .display-zh{font-family:var(--serif-zh);font-weight:700;font-size:7.8vw;line-height:1.04;letter-spacing:-.005em}
-  .h1-zh{font-family:var(--serif-zh);font-weight:700;font-size:4.6vw;line-height:1.12;letter-spacing:-.005em}
-  .h2-zh{font-family:var(--serif-zh);font-weight:600;font-size:3.2vw;line-height:1.2;letter-spacing:0}
-  .h3-zh{font-family:var(--serif-zh);font-weight:500;font-size:1.9vw;line-height:1.35}
-  .body-zh{font-family:var(--sans-zh);font-weight:400;font-size:max(15px,1.22vw);line-height:1.75;opacity:.82;letter-spacing:.01em}
-  .body-serif{font-family:var(--serif-zh);font-weight:400;font-size:max(15px,1.3vw);line-height:1.65;opacity:.88}
-  .lead{font-family:var(--serif-zh);font-weight:400;font-size:1.75vw;line-height:1.5;opacity:.86}
-  .meta{font-family:var(--mono);font-size:max(11px,.88vw);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
-  .big-num{font-family:var(--serif-en);font-weight:800;font-size:10vw;line-height:.85;letter-spacing:-.03em;font-feature-settings:"tnum"}
-  .mid-num{font-family:var(--serif-en);font-weight:700;font-size:5.5vw;line-height:.88;letter-spacing:-.02em;font-feature-settings:"tnum"}
-  .ghost{font-family:var(--serif-en);font-weight:900;font-size:34vw;line-height:.8;opacity:.06;letter-spacing:-.04em;position:absolute;font-feature-settings:"tnum"}
+  .kicker{font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.3em;text-transform:uppercase;opacity:.6;margin-bottom:2.6vh}
+  .display{font-family:var(--serif-en);font-weight:700;font-size:min(11vw,19.56vh);line-height:.92;letter-spacing:-.025em}
+  .display-zh{font-family:var(--serif-zh);font-weight:700;font-size:min(7.8vw,13.87vh);line-height:1.04;letter-spacing:-.005em}
+  .h1-zh{font-family:var(--serif-zh);font-weight:700;font-size:min(4.6vw,8.178vh);line-height:1.12;letter-spacing:-.005em}
+  .h2-zh{font-family:var(--serif-zh);font-weight:600;font-size:min(3.2vw,5.689vh);line-height:1.2;letter-spacing:0}
+  .h3-zh{font-family:var(--serif-zh);font-weight:500;font-size:min(1.9vw,3.378vh);line-height:1.35}
+  .body-zh{font-family:var(--sans-zh);font-weight:400;font-size:max(min(15px,2.083vh),min(1.22vw,2.169vh));line-height:1.75;opacity:.82;letter-spacing:.01em}
+  .body-serif{font-family:var(--serif-zh);font-weight:400;font-size:max(min(15px,2.083vh),min(1.3vw,2.311vh));line-height:1.65;opacity:.88}
+  .lead{font-family:var(--serif-zh);font-weight:400;font-size:min(1.75vw,3.111vh);line-height:1.5;opacity:.86}
+  .meta{font-family:var(--mono);font-size:max(min(14px,1.944vh),.88vw);letter-spacing:.16em;text-transform:uppercase;opacity:.6}
+  .big-num{font-family:var(--serif-en);font-weight:800;font-size:min(10vw,17.78vh);line-height:.85;letter-spacing:-.03em;font-feature-settings:"tnum"}
+  .mid-num{font-family:var(--serif-en);font-weight:700;font-size:min(5.5vw,9.778vh);line-height:.88;letter-spacing:-.02em;font-feature-settings:"tnum"}
+  .ghost{font-family:var(--serif-en);font-weight:900;font-size:min(34vw,60.44vh);line-height:.8;opacity:.06;letter-spacing:-.04em;position:absolute;font-feature-settings:"tnum"}
   em{font-style:italic;font-family:var(--serif-en)}
   .en{font-family:var(--serif-en);font-style:italic;font-weight:500}
 
   /* ============ 布局工具 ============ */
   .col{display:flex;flex-direction:column;gap:2.4vh}
-  .row{display:flex;align-items:center;gap:3vw}
-  .grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:4vw 6vw;flex:1;align-content:center;padding:2vh 0}
+  .row{display:flex;align-items:center;gap:min(3vw,5.333vh) 3vw}
+  .grid-6{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:min(4vw,7.111vh) 6vw;flex:1;align-content:center;padding:2vh 0}
   .grid-9{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:3vh 4vw;flex:1;align-content:center}
   .grid-4{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:4vh 6vw;flex:1;align-content:center}
-  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:4vw;flex:1;align-content:center}
-  .split{display:grid;grid-template-columns:1fr 1fr;gap:4vw;flex:1;align-items:center}
-  .split-55{display:grid;grid-template-columns:55fr 45fr;gap:5vw;flex:1;align-items:stretch}
+  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:min(4vw,7.111vh) 4vw;flex:1;align-content:center}
+  .split{display:grid;grid-template-columns:1fr 1fr;gap:min(4vw,7.111vh) 4vw;flex:1;align-items:center}
+  .split-55{display:grid;grid-template-columns:55fr 45fr;gap:min(5vw,8.889vh) 5vw;flex:1;align-items:stretch}
   .fill{flex:1}
   .center{align-items:center;justify-content:center;text-align:center}
   .bottom-left{position:absolute;left:6vw;bottom:9vh;max-width:50vw}
@@ -107,40 +635,40 @@
 
   /* ============ Stat（数字矩阵） ============ */
   .stat{display:flex;flex-direction:column;gap:1vh;align-items:flex-start}
-  .stat .n{font-family:var(--serif-en);font-weight:800;font-size:8vw;line-height:.88;letter-spacing:-.03em;font-feature-settings:"tnum"}
-  .stat .l{font-family:var(--sans-zh);font-size:max(13px,1.05vw);opacity:.7;margin-top:1vh;font-weight:400;line-height:1.5}
-  .stat .m{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:.2vh}
+  .stat .n{font-family:var(--serif-en);font-weight:800;font-size:min(8vw,14.22vh);line-height:.88;letter-spacing:-.03em;font-feature-settings:"tnum"}
+  .stat .l{font-family:var(--sans-zh);font-size:max(min(16px,2.222vh),min(1.05vw,1.867vh));opacity:.7;margin-top:1vh;font-weight:400;line-height:1.5}
+  .stat .m{font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.22em;text-transform:uppercase;opacity:.5;margin-bottom:.2vh}
 
   /* ============ Callout（引用框） ============ */
-  .callout{padding:3vh 2.4vw;border-left:3px solid currentColor;position:relative;font-family:var(--serif-zh);font-size:max(15px,1.2vw);line-height:1.55;opacity:.92}
+  .callout{padding:3vh 2.4vw;border-left:3px solid currentColor;position:relative;font-family:var(--serif-zh);font-size:max(min(15px,2.083vh),min(1.2vw,2.133vh));line-height:1.55;opacity:.92}
   .slide.light .callout{background:rgba(var(--ink-rgb),.05)}
   .slide.dark .callout{background:rgba(var(--paper-rgb),.06)}
-  .callout .cite{display:block;margin-top:1.6vh;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6}
-  .callout .q-big{font-family:var(--serif-zh);font-weight:600;font-size:max(17px,1.6vw);line-height:1.42}
+  .callout .cite{display:block;margin-top:1.6vh;font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.2em;text-transform:uppercase;opacity:.6}
+  .callout .q-big{font-family:var(--serif-zh);font-weight:600;font-size:max(min(17px,2.361vh),min(1.6vw,2.844vh));line-height:1.42}
 
   /* ============ Platform（平台卡） ============ */
   .plat{display:flex;flex-direction:column;justify-content:flex-end;padding:2vh 0;border-top:1px solid currentColor;border-color:rgba(127,127,127,.35)}
-  .plat .name{font-family:var(--serif-zh);font-weight:700;font-size:1.8vw;margin-bottom:.6vh}
-  .plat .nb{font-family:var(--serif-en);font-weight:700;font-size:3.2vw;letter-spacing:-.02em;line-height:1;font-feature-settings:"tnum"}
-  .plat .sub{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-top:.6vh}
-  .plat .fill{font-family:var(--sans-zh);font-weight:300;font-size:2.4vw;opacity:.28;letter-spacing:-.01em;line-height:1}
+  .plat .name{font-family:var(--serif-zh);font-weight:700;font-size:min(1.8vw,3.2vh);margin-bottom:.6vh}
+  .plat .nb{font-family:var(--serif-en);font-weight:700;font-size:min(3.2vw,5.689vh);letter-spacing:-.02em;line-height:1;font-feature-settings:"tnum"}
+  .plat .sub{font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.18em;text-transform:uppercase;opacity:.55;margin-top:.6vh}
+  .plat .fill{font-family:var(--sans-zh);font-weight:300;font-size:min(2.4vw,4.267vh);opacity:.28;letter-spacing:-.01em;line-height:1}
 
   /* ============ Rowline（表格行） ============ */
-  .rowline{display:grid;grid-template-columns:1fr 2fr 1fr;gap:2vw;padding:2.2vh 0;border-top:1px solid currentColor;align-items:center;border-color:rgba(127,127,127,.25)}
+  .rowline{display:grid;grid-template-columns:1fr 2fr 1fr;gap:min(2vw,3.556vh) 2vw;padding:2.2vh 0;border-top:1px solid currentColor;align-items:center;border-color:rgba(127,127,127,.25)}
   .rowline:last-child{border-bottom:1px solid currentColor;border-color:rgba(127,127,127,.25)}
-  .rowline .k{font-family:var(--serif-zh);font-weight:700;font-size:1.7vw}
-  .rowline .v{font-family:var(--sans-zh);font-weight:400;font-size:max(14px,1.2vw);opacity:.85;line-height:1.55}
-  .rowline .m{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;opacity:.6;justify-self:end}
+  .rowline .k{font-family:var(--serif-zh);font-weight:700;font-size:min(1.7vw,3.022vh)}
+  .rowline .v{font-family:var(--sans-zh);font-weight:400;font-size:max(min(14px,1.944vh),min(1.2vw,2.133vh));opacity:.85;line-height:1.55}
+  .rowline .m{font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.2em;text-transform:uppercase;opacity:.6;justify-self:end}
 
   /* ============ Pillar（支柱卡片） ============ */
   .pillar{display:flex;flex-direction:column;gap:1.8vh}
-  .pillar .ic{font-family:var(--serif-en);font-style:italic;font-size:2.6vw;opacity:.45;font-weight:400}
+  .pillar .ic{font-family:var(--serif-en);font-style:italic;font-size:min(2.6vw,4.622vh);opacity:.45;font-weight:400}
   .pillar .ic svg{width:2.8vw;height:2.8vw;stroke-width:1.2;opacity:.7}
-  .pillar .t{font-family:var(--serif-zh);font-weight:700;font-size:2.4vw;line-height:1.1}
-  .pillar .d{font-family:var(--sans-zh);font-weight:400;font-size:max(14px,1.1vw);opacity:.76;line-height:1.6}
+  .pillar .t{font-family:var(--serif-zh);font-weight:700;font-size:min(2.4vw,4.267vh);line-height:1.1}
+  .pillar .d{font-family:var(--sans-zh);font-weight:400;font-size:max(min(14px,1.944vh),min(1.1vw,1.956vh));opacity:.76;line-height:1.6}
 
   /* ============ Signature / Highlight ============ */
-  .sign{font-family:var(--serif-en);font-style:italic;font-weight:500;font-size:2vw;opacity:.7}
+  .sign{font-family:var(--serif-en);font-style:italic;font-weight:500;font-size:min(2vw,3.556vh);opacity:.7}
   .hi{position:relative;display:inline}
   .slide.dark .hi::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:-.05em;height:.28em;background:rgba(var(--paper-rgb),.15);z-index:-1}
   .slide.light .hi::after{content:"";position:absolute;left:-.1em;right:-.1em;bottom:-.05em;height:.28em;background:rgba(var(--ink-rgb),.08);z-index:-1}
@@ -153,9 +681,9 @@
   .ico-sm{width:1.1vw;height:1.1vw;stroke-width:1.4;display:inline-block;vertical-align:-.15em;opacity:.7}
 
   /* ============ 图片占位（虚线框，提示设计师位置） ============ */
-  .img-slot{border:1.5px dashed rgba(127,127,127,.4);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1vh;padding:2vh 2vw;font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;opacity:.55;position:relative;aspect-ratio:16/9;width:100%;max-height:56vh;margin-inline:auto;box-sizing:border-box}
+  .img-slot{border:1.5px dashed rgba(127,127,127,.4);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1vh;padding:2vh 2vw;font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.28em;text-transform:uppercase;opacity:.55;position:relative;aspect-ratio:16/9;width:100%;max-height:56vh;margin-inline:auto;box-sizing:border-box}
   .img-slot::before{content:"";position:absolute;inset:8px;border:1px solid currentColor;opacity:.2}
-  .img-slot .plus{font-size:2vw;font-weight:300;opacity:.5;letter-spacing:0}
+  .img-slot .plus{font-size:min(2vw,3.556vh);font-weight:300;opacity:.5;letter-spacing:0}
   .img-slot .label{position:relative;z-index:2;text-align:center}
   .img-slot.r-4x3{aspect-ratio:4/3}
   .img-slot.r-3x2{aspect-ratio:3/2}
@@ -180,9 +708,9 @@
   .frame-img.h-22{height:22vh}
   .frame-img.h-26{height:26vh}
   .frame-img.h-28{height:28vh}
-  .frame-cap{display:flex;justify-content:space-between;align-items:baseline;gap:1vw;margin-top:.8vh;font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;opacity:.72}
-  .frame-cap .pf{font-family:var(--serif-zh);font-weight:600;font-size:max(13px,1vw);letter-spacing:.04em;text-transform:none;opacity:.94}
-  .frame-cap .nb{font-family:var(--serif-en);font-style:italic;font-size:max(15px,1.2vw);letter-spacing:.02em;text-transform:none;opacity:.88}
+  .frame-cap{display:flex;justify-content:space-between;align-items:baseline;gap:min(1vw,1.778vh) 1vw;margin-top:.8vh;font-family:var(--mono);font-size:min(14px,1.944vh);letter-spacing:.22em;text-transform:uppercase;opacity:.72}
+  .frame-cap .pf{font-family:var(--serif-zh);font-weight:600;font-size:max(min(14px,1.944vh),min(1vw,1.778vh));letter-spacing:.04em;text-transform:none;opacity:.94}
+  .frame-cap .nb{font-family:var(--serif-en);font-style:italic;font-size:max(min(15px,2.083vh),min(1.2vw,2.133vh));letter-spacing:.02em;text-transform:none;opacity:.88}
   .frame-cap .idx{font-family:var(--mono);opacity:.5}
   figure.tile{display:flex;flex-direction:column;margin:0;min-width:0}
   figure.tile > .frame-img{flex:0 0 auto}
@@ -242,7 +770,7 @@
   #overview{z-index:110!important}
   @media(max-width:1200px){.ppt-presenter-main{grid-template-columns:minmax(0,1.55fr) minmax(280px,.72fr)}}
   @media(max-width:1100px){.ppt-presenter-bottom{grid-template-columns:minmax(292px,1fr) auto minmax(86px,.6fr);gap:12px}.ppt-time-stat{min-width:82px;padding:0 11px}.ppt-time-value{font-size:20px}.ppt-controls .ppt-ui-btn,.ppt-session-actions .ppt-ui-btn{min-width:60px;padding:8px 9px}}
-  @media(max-width:900px){.ppt-presenter-top{padding:12px 16px;flex-wrap:wrap}.ppt-presenter-top .ppt-presenter-meta{gap:6px}.ppt-presenter-top .ppt-ui-btn{padding:8px 9px}.ppt-presenter-main,#ppt-presenter[data-layout="slides"] .ppt-presenter-main,#ppt-presenter[data-layout="notes"] .ppt-presenter-main{grid-template-columns:minmax(0,1.45fr) minmax(250px,.72fr);gap:12px;padding:12px 16px}.ppt-preview-stack{gap:12px;grid-template-rows:minmax(0,1fr) clamp(104px,20vh,150px)}.ppt-saved{display:none}.ppt-presenter-bottom{grid-template-columns:minmax(270px,1fr) auto 74px;gap:8px;padding:9px 16px}.ppt-time-stat{min-width:0;padding:0 9px}.ppt-time-value{font-size:18px}.ppt-time-hint{max-width:78px;overflow:hidden;text-overflow:ellipsis}.ppt-controls,.ppt-session-actions{gap:5px}.ppt-controls .ppt-ui-btn,.ppt-session-actions .ppt-ui-btn{min-width:52px;padding:7px 8px;font-size:12px}.ppt-page-state strong{font-size:14px}.ppt-dialog-grid{grid-template-columns:1fr}.ppt-segmented.screen{grid-template-columns:repeat(2,1fr)}}
+  @media(max-width:900px){.ppt-presenter-top{padding:12px 16px;flex-wrap:wrap}.ppt-presenter-top .ppt-presenter-meta{gap:6px}.ppt-presenter-top .ppt-ui-btn{padding:8px 9px}.ppt-presenter-main,#ppt-presenter[data-layout="slides"] .ppt-presenter-main,#ppt-presenter[data-layout="notes"] .ppt-presenter-main{grid-template-columns:minmax(0,1.45fr) minmax(250px,.72fr);gap:12px;padding:12px 16px}.ppt-preview-stack{gap:12px;grid-template-rows:minmax(0,1fr) clamp(104px,20vh,150px)}.ppt-saved{display:none}.ppt-presenter-bottom{grid-template-columns:minmax(270px,1fr) auto 74px;gap:8px;padding:9px 16px}.ppt-time-stat{min-width:0;padding:0 9px}.ppt-time-value{font-size:min(18px,2.5vh)}.ppt-time-hint{max-width:78px;overflow:hidden;text-overflow:ellipsis}.ppt-controls,.ppt-session-actions{gap:5px}.ppt-controls .ppt-ui-btn,.ppt-session-actions .ppt-ui-btn{min-width:52px;padding:7px 8px;font-size:min(12px,1.667vh)}.ppt-page-state strong{font-size:min(14px,1.944vh)}.ppt-dialog-grid{grid-template-columns:1fr}.ppt-segmented.screen{grid-template-columns:repeat(2,1fr)}}
   @media(max-height:700px){.ppt-presenter-top{padding-top:10px;padding-bottom:10px}.ppt-presenter-main{padding-top:10px;padding-bottom:10px}.ppt-preview-stack{grid-template-rows:minmax(0,1fr) clamp(88px,16vh,118px);gap:10px}.ppt-stage-label{padding:7px 10px}.ppt-notes-head{padding:12px 14px}.ppt-purpose-block{margin-top:10px;padding:8px 10px}.ppt-notes-draft-head{margin-top:10px;padding-top:9px}.ppt-presenter-bottom{padding-top:8px;padding-bottom:8px}.ppt-control-stack{gap:5px}.ppt-session-actions{padding-top:5px}}
   /* ============ /演讲者模式 ============ */
 
@@ -265,21 +793,21 @@
   .h-hero{
     font-family:var(--serif-zh);
     font-weight:900;
-    font-size:10vw;
+    font-size:min(10vw,17.78vh);
     line-height:.96;
     letter-spacing:-.02em;
   }
   .h-xl{
     font-family:var(--serif-zh);
     font-weight:700;
-    font-size:6.2vw;
+    font-size:min(6.2vw,11.02vh);
     line-height:1.08;
     letter-spacing:-.01em;
   }
   .h-sub{
     font-family:var(--serif-zh);
     font-weight:500;
-    font-size:3.1vw;
+    font-size:min(3.1vw,5.511vh);
     line-height:1.25;
     letter-spacing:0;
     opacity:.7;
@@ -287,7 +815,7 @@
   .h-md{
     font-family:var(--serif-zh);
     font-weight:600;
-    font-size:2.3vw;
+    font-size:min(2.3vw,4.089vh);
     line-height:1.3;
   }
   /* 英文标题专用（Playfair 衬线） */
@@ -302,7 +830,7 @@
     align-items:baseline;
     flex-wrap:wrap;
     font-family:var(--mono);
-    font-size:max(12px,.92vw);
+    font-size:max(min(14px,1.944vh),.92vw);
     letter-spacing:.16em;
     text-transform:uppercase;
     opacity:.6;
@@ -320,7 +848,7 @@
   }
   .stat-card .stat-label{
     font-family:var(--mono);
-    font-size:max(10px,.78vw);
+    font-size:max(min(14px,1.944vh),.78vw);
     letter-spacing:.24em;
     text-transform:uppercase;
     opacity:.55;
@@ -328,7 +856,7 @@
   .stat-card .stat-nb{
     font-family:var(--serif-en);
     font-weight:800;
-    font-size:5.8vw;
+    font-size:min(5.8vw,10.31vh);
     line-height:.9;
     letter-spacing:-.03em;
     font-feature-settings:"tnum";
@@ -345,15 +873,15 @@
   .stat-card .stat-note{
     font-family:var(--sans-zh);
     font-weight:400;
-    font-size:max(13px,1.05vw);
+    font-size:max(min(16px,2.222vh),min(1.05vw,1.867vh));
     line-height:1.5;
     opacity:.72;
     margin-top:.6vh;
   }
   /* 当 stat-card 用于 grid-4（2x2），数字适度放大；若页面有标题+引文在上方，可内联 style 覆盖为更小值 */
-  .grid-4 .stat-card .stat-nb{font-size:5vw}
+  .grid-4 .stat-card .stat-nb{font-size:min(5vw,8.889vh)}
   /* 当只有 3 个，字也可以稍大 */
-  .grid-3 .stat-card .stat-nb{font-size:6.8vw}
+  .grid-3 .stat-card .stat-nb{font-size:min(6.8vw,12.09vh)}
 
   /* ---------- pipeline（流水线） ---------- */
   .pipeline-section{
@@ -368,7 +896,7 @@
   }
   .pipeline-label{
     font-family:var(--mono);
-    font-size:max(11px,.85vw);
+    font-size:max(min(14px,1.944vh),.85vw);
     letter-spacing:.24em;
     text-transform:uppercase;
     opacity:.62;
@@ -377,7 +905,7 @@
   .pipeline{
     display:grid;
     grid-template-columns:repeat(5,1fr);
-    gap:1.2vw;
+    gap:min(1.2vw,2.133vh) 1.2vw;
   }
   .pipeline[data-cols="3"]{grid-template-columns:repeat(3,1fr)}
   .pipeline[data-cols="4"]{grid-template-columns:repeat(4,1fr)}
@@ -394,29 +922,29 @@
     font-family:var(--serif-en);
     font-style:italic;
     font-weight:500;
-    font-size:1.15vw;
+    font-size:min(1.15vw,2.044vh);
     opacity:.45;
   }
   .step-title{
     font-family:var(--sans-zh);
     font-weight:700;
-    font-size:1.55vw;
+    font-size:min(1.55vw,2.756vh);
     letter-spacing:.01em;
     line-height:1.2;
   }
   .step-desc{
     font-family:var(--sans-zh);
     font-weight:400;
-    font-size:max(12px,.95vw);
+    font-size:max(min(16px,2.222vh),.95vw);
     line-height:1.45;
     opacity:.72;
   }
 
   /* ---------- 网格（layouts.md 所用） ---------- */
   /* 这些类独立挂到任何容器上都能生效，不依赖 .frame 复合选择器 */
-  .grid-2-7-5{display:grid;grid-template-columns:7fr 5fr;gap:3vw 4vh;align-items:start}
-  .grid-2-6-6{display:grid;grid-template-columns:1fr 1fr;gap:3vw 4vh;align-items:start}
-  .grid-2-8-4{display:grid;grid-template-columns:8fr 4fr;gap:3vw 4vh;align-items:start}
+  .grid-2-7-5{display:grid;grid-template-columns:7fr 5fr;gap:min(3vw,5.333vh) 4vh;align-items:start}
+  .grid-2-6-6{display:grid;grid-template-columns:1fr 1fr;gap:min(3vw,5.333vh) 4vh;align-items:start}
+  .grid-2-8-4{display:grid;grid-template-columns:8fr 4fr;gap:min(3vw,5.333vh) 4vh;align-items:start}
   .grid-3-3{
     display:grid;
     grid-template-columns:repeat(3,1fr);
@@ -436,7 +964,7 @@
     flex:0 0 auto;
     padding:.7vh .9em .9vh;
     font-family:var(--mono);
-    font-size:max(10px,.8vw);
+    font-size:max(min(14px,1.944vh),.8vw);
     letter-spacing:.22em;
     text-transform:uppercase;
     opacity:.6;
@@ -446,7 +974,7 @@
     display:block;
     margin-top:1.6vh;
     font-family:var(--mono);
-    font-size:11px;
+    font-size:min(14px,1.944vh);
     letter-spacing:.2em;
     text-transform:uppercase;
     opacity:.6;
@@ -480,11 +1008,11 @@
 
   /* ---------- 响应式降级 ---------- */
   @media (max-width:900px){
-    .display{font-size:16vw}
-    .display-zh{font-size:12vw}
-    .h1-zh{font-size:7vw}
-    .h-hero{font-size:14vw}
-    .h-xl{font-size:9vw}
+    .display{font-size:min(16vw,28.44vh)}
+    .display-zh{font-size:min(12vw,21.33vh)}
+    .h1-zh{font-size:min(7vw,12.44vh)}
+    .h-hero{font-size:min(14vw,24.89vh)}
+    .h-xl{font-size:min(9vw,16vh)}
     .pipeline{grid-template-columns:repeat(2,1fr)}
     .grid-2-7-5,.grid-2-6-6,.grid-2-8-4{grid-template-columns:1fr}
   }
@@ -517,8 +1045,8 @@
   })();
 </script>
 
-<canvas id="bg-dark" class="bg"></canvas>
-<canvas id="bg-light" class="bg"></canvas>
+<canvas id="bg-dark" class="bg" data-gz-effect="dispersion"></canvas>
+<canvas id="bg-light" class="bg" data-gz-effect="vortex"></canvas>
 <div id="hint" role="toolbar" aria-label="快捷控制">
   <span>← → 翻页</span><span class="ppt-sep">·</span>
   <button id="ppt-low-power-btn" type="button"><span class="ppt-key">B</span><span class="ppt-low-power-label">静态</span></button><span class="ppt-sep">·</span>
@@ -530,7 +1058,7 @@
 
 <!-- ============================================================
      SLIDES 插入区 · 在此处填充所有 <section class="slide ..."> 页面
-     每页模板参考 references/page-patterns.md
+     每页模板参考 references/layouts.md
      页面组件参考 references/components.md
      ============================================================ -->
 
@@ -556,133 +1084,370 @@ window.__SPEAKER_NOTES__ = SPEAKER_NOTES;
 </script>
 
 <script>
-/* =============== WebGL 双背景 ===============
-   深色页：Holographic Dispersion（全息色散 · 钛金暗流）—— 彩虹微扰、鼠标径向涟漪
-   浅色页：Spiral Vortex（旋转涡流 · 银色珍珠）—— domain-warp 流动、无中心
-   修改风格请参考 references/webgl-backgrounds.md
-*/
-const VS = `attribute vec2 position;void main(){gl_Position=vec4(position,0.0,1.0);}`;
+/* GZ:EFFECTS:START · guizang-design 特效运行时，不要手改；运行 scripts/sync-skill.mjs 更新 */
+/* 歸藏设计系统 · 特效运行时（无依赖，可直接内联进单文件 HTML）
+ *
+ * 用法：<canvas class="gz-effect" data-gz-effect="vortex" data-strength=".3" data-frozen="12.5"></canvas>
+ * 页面加载后自动挂载；也可以 GZEffects.mount(canvas, { effect, strength, frozen, colors })。
+ *
+ * 特效：
+ *   dispersion  全息色散（PPT 杂志风深色页）
+ *   vortex      银色涡流（PPT 杂志风浅色页）
+ *   grid        漂移网格 + 点阵（PPT 瑞士风）
+ *   inkflow     墨流等高线（图文卡片杂志风，带透明度，叠在纸色上）
+ *   ascii       ASCII 呼吸场（瑞士风封面 / 封底的强调色块）
+ *
+ * 统一行为：
+ *   - 一个 requestAnimationFrame 循环驱动全部特效，不在视口里的不画
+ *   - 动效开关：localStorage gz-motion、系统「减少动态效果」、<html data-motion="off">；
+ *     关闭时停在一帧静态画面，不留空白。兼容旧事件 ppt-low-power-change / swiss-low-power-change
+ *   - data-frozen 把时间定格：卡片出 PNG 时每次渲染结果一致。GZEffects.ready 在首帧画完后 resolve
+ *   - 颜色从 canvas 所在位置的 token 读（--ink-rgb / --paper-rgb / --accent-rgb / --accent-on-rgb），
+ *     放进反色块或切换 data-theme 时自动跟随
+ *
+ * 性能（弱机器也要流畅）：
+ *   - 渲染分辨率按特效分档（data-scale 可覆盖）：背景压在遮罩和模糊下，色散 / 涡流用 0.5 倍 CSS 像素，
+ *     Retina 屏上像素量只有全分辨率的 1/16；网格有细线用 1 倍；定格出图时用全分辨率
+ *   - WebGL 特效限 30fps（data-fps 可覆盖），ASCII 24fps；不在视口、透明度为 0 的画布不画
+ *   - 申请低功耗 GPU；持续掉到 25fps 以下时自动降分辨率，降到底仍卡就切成静态画面
+ */
+(function () {
+  'use strict'
+  if (window.GZEffects) return
 
-const FS_DARK = `precision highp float;
-uniform vec2 u_resolution;uniform float u_time;uniform vec2 u_mouse;
-vec3 palette(float t,vec3 a,vec3 b,vec3 c,vec3 d){return a+b*cos(6.28318*(c*t+d));}
-void main(){
-  vec2 uv=gl_FragCoord.xy/u_resolution.xy;
-  vec2 p=uv*2.0-1.0;p.x*=u_resolution.x/u_resolution.y;
-  vec2 m=u_mouse*2.0-1.0;m.x*=u_resolution.x/u_resolution.y;
-  float md=length(p-m);
-  float mr=sin(md*15.0-u_time*4.0)*exp(-md*3.0);p+=mr*0.08;
-  vec2 p0=p;
-  for(float i=1.0;i<4.0;i++){
-    p.x+=0.1/i*sin(i*3.0*p.y+u_time*0.4)+0.05;
-    p.y+=0.1/i*cos(i*2.0*p.x+u_time*0.3)-0.05;
+  var VS = 'attribute vec2 p;void main(){gl_Position=vec4(p,0.,1.);}'
+  var HEAD = 'precision highp float;uniform vec2 R;uniform float T;uniform vec2 M;uniform vec3 INK;uniform vec3 PAPER;uniform vec3 ACC;uniform float S;uniform float DARK;'
+  var NOISE =
+    'float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}' +
+    'float noise(vec2 p){vec2 i=floor(p),f=fract(p);vec2 u=f*f*(3.-2.*f);' +
+    'return mix(mix(hash(i),hash(i+vec2(1,0)),u.x),mix(hash(i+vec2(0,1)),hash(i+vec2(1,1)),u.x),u.y);}'
+
+  // 各特效的默认渲染倍率（相对 CSS 像素）：柔和的背景低分辨率看不出差别，细线和文字需要更高
+  var SCALE = { dispersion: 0.5, vortex: 0.5, inkflow: 0.75, grid: 1, ascii: 1 }
+  var FPS = { dispersion: 30, vortex: 30, inkflow: 30, grid: 30 }
+
+  var SHADERS = {
+    // 原 PPT template.html FS_DARK，颜色是设计时定死的钛金暗色（themes.md 注明不跟主题）
+    dispersion: HEAD +
+      'vec3 pal(float t,vec3 a,vec3 b,vec3 c,vec3 d){return a+b*cos(6.28318*(c*t+d));}' +
+      'void main(){vec2 uv=gl_FragCoord.xy/R;vec2 p=uv*2.-1.;p.x*=R.x/R.y;vec2 m=M*2.-1.;m.x*=R.x/R.y;' +
+      'float md=length(p-m);p+=sin(md*15.-T*4.)*exp(-md*3.)*.08;vec2 p0=p;' +
+      'for(float i=1.;i<4.;i++){p.x+=.1/i*sin(i*3.*p.y+T*.4)+.05;p.y+=.1/i*cos(i*2.*p.x+T*.3)-.05;}' +
+      'float r=length(p);float ang=atan(p.y,p.x);' +
+      'vec3 col=pal(r*1.5+p0.x*.5+T*.1,vec3(.12,.12,.13),vec3(.03,.04,.05),vec3(1.),vec3(.1,.2,.4));' +
+      'float disp=sin(r*25.-T*1.5+ang*2.)*.5+.5;col+=vec3(disp*.015,disp*.01,disp*.02);' +
+      'col+=pow(sin(p.x*4.+p.y*3.+T)*.5+.5,8.)*.08;col=mix(vec3(.05,.05,.06),col,.85);gl_FragColor=vec4(col,1.);}',
+
+    // 原 FS_LIGHT。colors:"theme" 时用主题纸色替换银白，深浅关系不变
+    vortex: HEAD + NOISE +
+      'float fbm(vec2 p){float v=0.,a=.5;mat2 m=mat2(.8,.6,-.6,.8);for(int i=0;i<5;i++){v+=a*noise(p);p=m*p*2.02;a*=.5;}return v;}' +
+      'uniform float THEME;' +
+      'void main(){vec2 uv=gl_FragCoord.xy/R;vec2 p=uv;p.x*=R.x/R.y;vec2 m=M;m.x*=R.x/R.y;vec2 md=p-m;float dl=length(md);' +
+      'p+=normalize(md+vec2(.0001))*exp(-dl*5.)*.03;' +
+      'vec2 q=vec2(fbm(p*1.8+T*.07),fbm(p*1.8+vec2(5.2,1.3)+T*.06));' +
+      'vec2 r=vec2(fbm(p*2.+q*1.3+vec2(1.7,9.2)+T*.05),fbm(p*2.+q*1.3+vec2(8.3,2.8)+T*.04));' +
+      'float f=fbm(p*2.2+r*1.5);' +
+      'vec3 hi=mix(vec3(.955,.945,.925),PAPER,THEME);vec3 lo=mix(vec3(.86,.85,.84),mix(PAPER,INK,.1),THEME);' +
+      'vec3 col=mix(lo,hi,f);float ph=r.x*2.2+T*.35;' +
+      'col+=vec3(.78,.62,.92)*sin(ph)*.055;col+=vec3(.55,.72,.95)*sin(ph*.8+2.)*.05;col+=smoothstep(.48,.92,f)*.06;' +
+      'gl_FragColor=vec4(col,1.);}',
+
+    // 原 PPT template-swiss.html 网格背景
+    grid: HEAD +
+      'float gl(vec2 uv,float s,float t){vec2 g=abs(fract(uv/s)-.5);float d=min(g.x,g.y);return 1.-smoothstep(t-.005,t+.005,d);}' +
+      'void main(){vec2 uv=gl_FragCoord.xy/R;float a=R.x/R.y;vec2 p=uv;p.x*=a;vec2 gp=p+vec2(T*.008,T*.005);' +
+      'float g=gl(gp,.12,.012)+gl(gp,.024,.04)*.2;vec2 m=M;m.x*=a;float mi=exp(-length(p-m)*4.)*.5;' +
+      'vec2 dg=fract(gp*50.)-.5;float dm=1.-smoothstep(.05,.14,length(dg));' +
+      'dm*=smoothstep(-.3,.6,sin(gp.x*1.4+T*.15)*cos(gp.y*1.6-T*.12))*.6;' +
+      'vec3 line=mix(vec3(.08),vec3(.92),DARK);vec3 bg=PAPER;' +
+      'vec3 col=mix(bg,line,g*(.45+mi)*.55);col=mix(col,line,dm*.35);col=mix(col,ACC,mi*.18);gl_FragColor=vec4(col,1.);}',
+
+    // 原卡片 magazine-bg-webgl.js：输出带透明度，叠在纸色上
+    inkflow: HEAD + NOISE +
+      'float fbm(vec2 p){float v=0.,a=.5;mat2 m=mat2(1.6,1.2,-1.2,1.6);for(int i=0;i<5;i++){v+=a*noise(p);p=m*p*1.18;a*=.52;}return v;}' +
+      'void main(){vec2 p=(gl_FragCoord.xy-.5*R)/min(R.x,R.y);float t=T*.045;' +
+      'float n=fbm(p*2.2+vec2(t,-t*.7));float n2=fbm(p*5.4-vec2(t*1.7,t));' +
+      'float contour=smoothstep(.015,0.,abs(fract((n+n2*.35)*7.)-.5));float wash=smoothstep(.22,.88,n);' +
+      'float vig=1.-smoothstep(.28,.92,length(p));vec3 col=mix(PAPER,INK,wash*.42+contour*.18);' +
+      'col=mix(col,ACC,(.18+.25*n2)*contour);float al=S*(.18+wash*.42+contour*.3)*(.55+.45*vig);' +
+      'gl_FragColor=vec4(col*al,al);}',
   }
-  float r=length(p);float ang=atan(p.y,p.x);
-  vec3 a=vec3(0.12,0.12,0.13);
-  vec3 b=vec3(0.03,0.04,0.05);
-  vec3 c=vec3(1.0,1.0,1.0);
-  vec3 d=vec3(0.1,0.2,0.4);
-  vec3 col=palette(r*1.5+p0.x*0.5+u_time*0.1,a,b,c,d);
-  float disp=sin(r*25.0-u_time*1.5+ang*2.0)*0.5+0.5;
-  col+=vec3(disp*0.015,disp*0.01,disp*0.02);
-  float hi=pow(sin(p.x*4.0+p.y*3.0+u_time)*0.5+0.5,8.0);
-  col+=hi*0.08;
-  vec3 base=vec3(0.05,0.05,0.06);
-  col=mix(base,col,0.85);
-  gl_FragColor=vec4(col,1.0);
-}`;
 
-const FS_LIGHT = `precision highp float;
-uniform vec2 u_resolution;uniform float u_time;uniform vec2 u_mouse;
-float hash(vec2 p){return fract(sin(dot(p,vec2(127.1,311.7)))*43758.5453);}
-float noise(vec2 p){
-  vec2 i=floor(p),f=fract(p);
-  float a=hash(i),b=hash(i+vec2(1,0));
-  float c=hash(i+vec2(0,1)),d=hash(i+vec2(1,1));
-  vec2 u=f*f*(3.0-2.0*f);
-  return mix(a,b,u.x)+(c-a)*u.y*(1.0-u.x)+(d-b)*u.x*u.y;
-}
-float fbm(vec2 p){
-  float v=0.0,a=0.5;
-  mat2 m=mat2(0.80,0.60,-0.60,0.80);
-  for(int i=0;i<5;i++){v+=a*noise(p);p=m*p*2.02;a*=0.5;}
-  return v;
-}
-void main(){
-  vec2 uv=gl_FragCoord.xy/u_resolution.xy;
-  vec2 p=uv;p.x*=u_resolution.x/u_resolution.y;
-  vec2 m=u_mouse;m.x*=u_resolution.x/u_resolution.y;
-  vec2 md=p-m;float dl=length(md);
-  p+=normalize(md+vec2(0.0001))*exp(-dl*5.0)*0.03;
-  vec2 q=vec2(fbm(p*1.8+u_time*0.07),fbm(p*1.8+vec2(5.2,1.3)+u_time*0.06));
-  vec2 r=vec2(fbm(p*2.0+q*1.3+vec2(1.7,9.2)+u_time*0.05),
-              fbm(p*2.0+q*1.3+vec2(8.3,2.8)+u_time*0.04));
-  float f=fbm(p*2.2+r*1.5);
-  vec3 silverDark=vec3(0.86,0.85,0.84);
-  vec3 paper=vec3(0.955,0.945,0.925);
-  vec3 col=mix(silverDark,paper,f);
-  float ph=r.x*2.2+u_time*0.35;
-  col+=vec3(0.78,0.62,0.92)*sin(ph)*0.055;
-  col+=vec3(0.55,0.72,0.95)*sin(ph*0.8+2.0)*0.05;
-  float hl=smoothstep(0.48,0.92,f);
-  col+=hl*0.06;
-  gl_FragColor=vec4(col,1.0);
-}`;
-
-const mouse={x:0.5,y:0.5};
-addEventListener('mousemove',e=>{mouse.x=e.clientX/innerWidth;mouse.y=e.clientY/innerHeight});
-
-function bootGL(canvasId, fsSrc){
-  const canvas=document.getElementById(canvasId);
-  const gl=canvas.getContext('webgl',{alpha:false,antialias:true});
-  if(!gl) return ()=>false;
-  const mk=(t,s)=>{const sh=gl.createShader(t);gl.shaderSource(sh,s);gl.compileShader(sh);return sh};
-  const prog=gl.createProgram();
-  gl.attachShader(prog,mk(gl.VERTEX_SHADER,VS));
-  gl.attachShader(prog,mk(gl.FRAGMENT_SHADER,fsSrc));
-  gl.linkProgram(prog);gl.useProgram(prog);
-  const buf=gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER,buf);
-  gl.bufferData(gl.ARRAY_BUFFER,new Float32Array([-1,-1,1,-1,-1,1,-1,1,1,-1,1,1]),gl.STATIC_DRAW);
-  const pos=gl.getAttribLocation(prog,'position');
-  gl.enableVertexAttribArray(pos);gl.vertexAttribPointer(pos,2,gl.FLOAT,false,0,0);
-  const lRes=gl.getUniformLocation(prog,'u_resolution');
-  const lT=gl.getUniformLocation(prog,'u_time');
-  const lM=gl.getUniformLocation(prog,'u_mouse');
-  const resize=()=>{
-    const d=Math.min(window.devicePixelRatio||1,2);
-    canvas.width=innerWidth*d;canvas.height=innerHeight*d;
-    gl.viewport(0,0,canvas.width,canvas.height);
-  };
-  addEventListener('resize',resize);resize();
-  return (tSec)=>{
-    gl.uniform2f(lRes,canvas.width,canvas.height);
-    gl.uniform1f(lT,tSec);
-    gl.uniform2f(lM,mouse.x,1-mouse.y);
-    gl.drawArrays(gl.TRIANGLES,0,6);
-    return true;
-  };
-}
-let drawDark=null, drawLight=null, glRAF=0, glT0=Date.now();
-function startGL(){
-  if(window.__lowPowerMode || glRAF) return;
-  if(!drawDark) drawDark=bootGL('bg-dark',FS_DARK);
-  if(!drawLight) drawLight=bootGL('bg-light',FS_LIGHT);
-  glT0=Date.now();
-  function loop(){
-    if(window.__lowPowerMode){glRAF=0;return;}
-    const t=(Date.now()-glT0)/1000;
-    drawDark(t);drawLight(t);
-    glRAF=requestAnimationFrame(loop);
+  // ---------- 动效开关 ----------
+  var KEY = 'gz-motion'
+  function storedMotion() { try { return localStorage.getItem(KEY) } catch (e) { return null } }
+  function computeMotion() {
+    if (document.documentElement.getAttribute('data-motion') === 'off') return false
+    var s = storedMotion()
+    if (s === 'off') return false
+    if (s === 'on') return true
+    return !(window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches)
   }
-  glRAF=requestAnimationFrame(loop);
-}
-function stopGL(){
-  if(glRAF) cancelAnimationFrame(glRAF);
-  glRAF=0;
-}
-startGL();
-addEventListener('ppt-low-power-change', e=>{e.detail.on ? stopGL() : startGL();});
+  var motion = computeMotion()
+
+  // ---------- 颜色 ----------
+  function rgbVar(cs, name, fb) {
+    var v = cs.getPropertyValue(name).trim()
+    if (!v) return fb
+    var n = v.split(',').map(Number)
+    return n.length === 3 && n.every(isFinite) ? n.map(function (x) { return x / 255 }) : fb
+  }
+  function readColors(el) {
+    var cs = getComputedStyle(el)
+    var paper = rgbVar(cs, '--paper-rgb', [0.97, 0.97, 0.96])
+    return {
+      ink: rgbVar(cs, '--ink-rgb', [0.04, 0.04, 0.04]),
+      paper: paper,
+      accent: rgbVar(cs, '--accent-rgb', [0, 0.18, 0.65]),
+      accentOn: rgbVar(cs, '--accent-on-rgb', [1, 1, 1]),
+      dark: 0.2126 * paper[0] + 0.7152 * paper[1] + 0.0722 * paper[2] < 0.5 ? 1 : 0,
+      mono: (cs.getPropertyValue('--font-mono') || 'ui-monospace,monospace').trim(),
+    }
+  }
+
+  var mouse = [0.5, 0.5]
+  addEventListener('mousemove', function (e) { mouse = [e.clientX / innerWidth, 1 - e.clientY / innerHeight] }, { passive: true })
+
+  // ---------- WebGL 特效 ----------
+  function glEffect(canvas, o) {
+    var gl = canvas.getContext('webgl', { alpha: o.effect === 'inkflow', premultipliedAlpha: true, antialias: false, powerPreference: 'low-power', preserveDrawingBuffer: o.frozen != null })
+    if (!gl) return null
+    function sh(t, s) {
+      var x = gl.createShader(t); gl.shaderSource(x, s); gl.compileShader(x)
+      if (!gl.getShaderParameter(x, gl.COMPILE_STATUS)) throw new Error('gz-effects ' + o.effect + ': ' + gl.getShaderInfoLog(x))
+      return x
+    }
+    var prog = gl.createProgram()
+    gl.attachShader(prog, sh(gl.VERTEX_SHADER, VS))
+    gl.attachShader(prog, sh(gl.FRAGMENT_SHADER, SHADERS[o.effect]))
+    gl.linkProgram(prog); gl.useProgram(prog)
+    gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer())
+    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1]), gl.STATIC_DRAW)
+    var loc = gl.getAttribLocation(prog, 'p'); gl.enableVertexAttribArray(loc); gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0)
+    var U = {}
+    ;['R', 'T', 'M', 'INK', 'PAPER', 'ACC', 'S', 'DARK', 'THEME'].forEach(function (n) { U[n] = gl.getUniformLocation(prog, n) })
+    return function (t, c) {
+      gl.viewport(0, 0, canvas.width, canvas.height)
+      gl.clearColor(0, 0, 0, 0); gl.clear(gl.COLOR_BUFFER_BIT)
+      gl.uniform2f(U.R, canvas.width, canvas.height); gl.uniform1f(U.T, t); gl.uniform2f(U.M, mouse[0], mouse[1])
+      gl.uniform3fv(U.INK, c.ink); gl.uniform3fv(U.PAPER, c.paper); gl.uniform3fv(U.ACC, c.accent)
+      gl.uniform1f(U.S, o.strength); gl.uniform1f(U.DARK, o.dark != null ? +o.dark : c.dark)
+      if (U.THEME) gl.uniform1f(U.THEME, o.colors === 'theme' ? 1 : 0)
+      gl.drawArrays(gl.TRIANGLES, 0, 6)
+    }
+  }
+
+  // ---------- ASCII 呼吸场（Canvas 2D） ----------
+  var PALETTE = '   ...:::---+++***◦◦••▢▣'
+  function asciiEffect(canvas) {
+    var ctx = canvas.getContext('2d')
+    var cell = 16, atlas = null, atlasKey = ''
+    // 字形图集：每个字符只排一次版，之后每帧按格子 drawImage，比逐格 fillText 快一个数量级
+    function buildAtlas(font, rgb, dpr) {
+      var key = font + rgb + dpr
+      if (key === atlasKey) return
+      atlas = document.createElement('canvas')
+      atlas.width = Math.ceil(PALETTE.length * cell * dpr); atlas.height = Math.ceil(cell * dpr)
+      var a = atlas.getContext('2d')
+      a.setTransform(dpr, 0, 0, dpr, 0, 0)
+      a.font = font; a.textBaseline = 'top'; a.fillStyle = 'rgb(' + rgb + ')'
+      for (var i = 0; i < PALETTE.length; i++) if (PALETTE[i] !== ' ') a.fillText(PALETTE[i], i * cell, 0)
+      atlasKey = key
+    }
+    var draw = function (t, c, w, h, dpr) {
+      ctx.setTransform(1, 0, 0, 1, 0, 0)
+      ctx.clearRect(0, 0, canvas.width, canvas.height)
+      var rgb = c.accentOn.map(function (x) { return Math.round(x * 255) }).join(',')
+      buildAtlas('500 13px ' + c.mono, rgb, dpr)
+      // 字色取 accent-on：IKB / 橙上是白字，黄 / 绿上是墨色字（修复原来只画白字的问题）
+      var blend = c.accentOn[0] + c.accentOn[1] + c.accentOn[2] > 1.5 ? 'screen' : 'multiply'
+      if (canvas.style.mixBlendMode !== blend) canvas.style.mixBlendMode = blend
+      var cols = Math.ceil(w / cell), rows = Math.ceil(h / cell), tt = t * 0.55, sz = cell * dpr
+      for (var r = 0; r < rows; r++) for (var k = 0; k < cols; k++) {
+        var n = (Math.sin(k * 0.18 + tt) + Math.sin(r * 0.24 - tt * 0.7) + Math.sin((k + r) * 0.12 + tt * 0.45) +
+          Math.sin(Math.hypot(k - cols * 0.5, r - rows * 0.5) * 0.16 - tt * 0.55)) / 4
+        var v = (n + 1) / 2
+        if (v < 0.22) continue
+        var idx = Math.min(PALETTE.length - 1, Math.floor(v * PALETTE.length))
+        if (PALETTE[idx] === ' ') continue
+        ctx.globalAlpha = 0.08 + (v - 0.22) * 0.55
+        ctx.drawImage(atlas, idx * sz, 0, sz, sz, k * sz, r * sz, sz, sz)
+      }
+      ctx.globalAlpha = 1
+    }
+    // 呼吸场变化很慢，24 帧和 60 帧肉眼无差别；逐字绘制在 CPU 上开销大，限帧省电
+    draw.interval = 1000 / 24
+    return draw
+  }
+
+  // WebGL 不可用时：几层径向渐变，模拟墨色晕染（不画椭圆，遵守卡片「不用椭圆」规则）。深色背景特效用墨色打底
+  function fallback2d(canvas, o) {
+    var ctx = canvas.getContext('2d')
+    return function (t, c, w, h, dpr) {
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
+      ctx.fillStyle = 'rgb(' + (o.effect === 'dispersion' ? c.ink : c.paper).map(function (x) { return Math.round(x * 255) }).join(',') + ')'
+      ctx.fillRect(0, 0, w, h)
+      for (var i = 0; i < 5; i++) {
+        var x = w * (0.14 + ((i * 0.19 + 0.17) % 0.72)), y = h * (0.1 + ((i * 0.29 + 0.23) % 0.78)), r = Math.max(w, h) * (0.22 + i * 0.045)
+        var g = ctx.createRadialGradient(x, y, 0, x, y, r)
+        var col = (i % 2 ? c.accent : c.ink).map(function (v) { return Math.round(v * 255) }).join(',')
+        g.addColorStop(0, 'rgba(' + col + ',' + (i % 2 ? 0.1 : 0.12) + ')'); g.addColorStop(1, 'rgba(' + col + ',0)')
+        ctx.fillStyle = g; ctx.fillRect(0, 0, w, h)
+      }
+    }
+  }
+
+  // ---------- 挂载与循环 ----------
+  // 自动降级的状态（见 governor）：各级渲染倍率与当前级别
+  var ADAPT = [1, 0.7, 0.5]
+  var perf = { start: 0, frames: 0, level: 0, settleUntil: 0 }
+  var items = []
+  var STATIC_T = 12.5 // 动效关闭时的静态帧时刻
+  var readyResolve
+  var ready = new Promise(function (r) { readyResolve = r })
+  var pendingFirst = 0
+
+  function size(it) {
+    var rect = it.canvas.getBoundingClientRect()
+    var device = Math.min(window.devicePixelRatio || 1, 2)
+    // 定格出图用全分辨率；实时播放按特效倍率 × 自适应降级系数
+    var dpr = it.o.frozen != null || it.o.scale == null ? device : Math.max(0.2, it.o.scale * it.adapt)
+    var w = Math.max(1, Math.round(rect.width)), h = Math.max(1, Math.round(rect.height))
+    if (it.w !== w || it.h !== h || it.dpr !== dpr) {
+      it.w = w; it.h = h; it.dpr = dpr
+      it.canvas.width = Math.round(w * dpr); it.canvas.height = Math.round(h * dpr)
+      it.dirty = true
+    }
+  }
+
+  function drawOne(it, now) {
+    size(it)
+    if (!it.colors || it.colorsStale) { it.colors = readColors(it.canvas); it.colorsStale = false }
+    var t = it.o.frozen != null ? it.o.frozen : motion ? (now - it.t0) / 1000 : STATIC_T
+    it.draw(t, it.colors, it.w, it.h, it.dpr)
+    it.dirty = false
+    if (!it.drawn) { it.drawn = true; if (--pendingFirst === 0) readyResolve() }
+  }
+
+  function mount(canvas, opts) {
+    if (typeof canvas === 'string') canvas = document.querySelector(canvas)
+    if (!canvas || canvas.__gz) return canvas && canvas.__gz
+    var d = canvas.dataset
+    var o = Object.assign({
+      effect: d.gzEffect || 'vortex',
+      strength: d.strength != null ? +d.strength : 0.34,
+      frozen: d.frozen != null ? +d.frozen : null,
+      colors: d.colors || 'fixed',
+      dark: d.dark != null ? d.dark === 'true' || d.dark === '1' : null,
+    }, opts || {})
+    var eff = o.effect
+    if (o.scale == null) o.scale = d.scale != null ? +d.scale : SCALE[eff]
+    var fps = d.fps != null ? +d.fps : FPS[eff]
+    var draw = eff === 'ascii' ? asciiEffect(canvas) : SHADERS[eff] ? glEffect(canvas, o) : null
+    if (!draw && eff !== 'ascii') draw = fallback2d(canvas, o)
+    var it = { canvas: canvas, o: o, draw: draw, t0: performance.now(), visible: true, last: 0, adapt: 1,
+      interval: (draw && draw.interval) || (fps ? 1000 / fps : 0) }
+    canvas.__gz = it
+    items.push(it)
+    pendingFirst++
+    if ('IntersectionObserver' in window) {
+      // 只贴着视口边缘（面积为 0）不算可见：幻灯片左右相邻页正好贴边，isIntersecting 会误报为 true
+      new IntersectionObserver(function (es) { es.forEach(function (e) { it.visible = e.isIntersecting && e.intersectionRatio > 0 }) }, { threshold: [0, 0.01] }).observe(canvas)
+    }
+    // 刚挂载时字体加载、着色器编译都会卡一下，先观察 1.5 秒再开始判断是否降级
+    perf.settleUntil = Math.max(perf.settleUntil, performance.now() + 1500)
+    drawOne(it, performance.now())
+    schedule()
+    return it
+  }
+
+  // 透明度为 0 的画布（杂志风深浅两张背景交叉淡入时，看不见的那张）不画
+  function shown(c) {
+    if (c.checkVisibility) return c.checkVisibility({ opacityProperty: true, visibilityProperty: true })
+    return getComputedStyle(c).opacity !== '0'
+  }
+
+  // 自动降级：每 2 秒看一次页面帧率，持续低于 25 就降渲染倍率；降到底仍卡，切成静态画面
+  function governor(now, animating) {
+    if (!animating || document.hidden) { perf.start = 0; return }
+    if (now < perf.settleUntil) return
+    if (!perf.start) { perf.start = now; perf.frames = 0; return }
+    perf.frames++
+    var span = now - perf.start
+    if (span < 2000) return
+    var fps = (perf.frames * 1000) / span
+    perf.start = 0
+    if (fps >= 25) return
+    perf.level++
+    if (perf.level < ADAPT.length) {
+      items.forEach(function (it) { it.adapt = ADAPT[perf.level]; it.dirty = true })
+      perf.settleUntil = now + 1000
+    } else {
+      if (window.console) console.info('[gz-effects] 帧率持续偏低（' + fps.toFixed(0) + 'fps），背景已切换为静态画面')
+      setMotion(false, false)
+    }
+  }
+
+  var raf = 0
+  function schedule() { if (!raf) raf = requestAnimationFrame(loop) }
+  function loop(now) {
+    raf = 0
+    var again = false
+    for (var i = 0; i < items.length; i++) {
+      var it = items[i]
+      var live = motion && it.o.frozen == null
+      var due = now - it.last >= it.interval
+      if ((live && it.visible && due && shown(it.canvas)) || it.dirty || it.colorsStale) { drawOne(it, now); it.last = now }
+      if (live) again = true
+    }
+    governor(now, again)
+    if (again) schedule()
+  }
+
+  function setMotion(on, persist) {
+    motion = !!on
+    if (persist !== false) try { localStorage.setItem(KEY, on ? 'on' : 'off') } catch (e) {}
+    items.forEach(function (it) { it.dirty = true; if (on) it.t0 = performance.now() - STATIC_T * 1000 })
+    schedule()
+    dispatchEvent(new CustomEvent('gz-motion-change', { detail: { on: motion } }))
+  }
+
+  // 旧模板的低功耗事件：迁移期间继续认
+  ;['ppt-low-power-change', 'swiss-low-power-change'].forEach(function (n) {
+    addEventListener(n, function (e) { if (e.detail && 'on' in e.detail) setMotion(!e.detail.on, false) })
+  })
+  if (window.matchMedia) {
+    var mq = matchMedia('(prefers-reduced-motion: reduce)')
+    mq.addEventListener && mq.addEventListener('change', function () { if (!storedMotion()) setMotion(computeMotion(), false) })
+  }
+  // 主题、反色块切换：标记颜色过期，下一帧重读
+  new MutationObserver(function () {
+    if (computeMotion() !== motion && document.documentElement.getAttribute('data-motion') === 'off') setMotion(false, false)
+    items.forEach(function (it) { it.colorsStale = true }); schedule()
+  }).observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ['data-theme', 'data-surface', 'data-motion', 'class'] })
+  addEventListener('resize', function () { items.forEach(function (it) { it.dirty = true }); perf.settleUntil = performance.now() + 1000; schedule() }, { passive: true })
+
+  function autoMount() {
+    var list = document.querySelectorAll('canvas[data-gz-effect]')
+    for (var i = 0; i < list.length; i++) mount(list[i])
+    if (!list.length) readyResolve()
+  }
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', autoMount)
+  else autoMount()
+
+  window.GZEffects = {
+    mount: mount, ready: ready, setMotion: setMotion,
+    get motion() { return motion },
+    effects: Object.keys(SHADERS).concat('ascii'),
+  }
+})()
+/* GZ:EFFECTS:END */
+</script>
+<script>
+/* =============== 背景特效（gz-effects） ===============
+   深色页 #bg-dark 全息色散、浅色页 #bg-light 银色涡流，body.light-bg 切换时由 CSS 交叉淡入。
+   低功耗开关沿用 window.__lowPowerMode 与 ppt-low-power-change 事件，运行时会自动跟随。 */
+GZEffects.setMotion(!window.__lowPowerMode, false);
 
 // =============== 导航（翻页 / 圆点 / 键盘 / 滚轮 / 触屏） ===============
 const deck=document.getElementById('deck');
@@ -706,9 +1471,10 @@ function go(n,opts={}){
   window.__currentSlideIndex = idx;
   deck.style.transform=`translateX(${-idx*100}vw)`;
   nav.querySelectorAll('.dot').forEach((d,i)=>d.classList.toggle('active',i===idx));
-  /* 主题切换：优先读 data-theme，其次从 class（light/dark）推断 */
+  /* 深浅页：读 section 上的 class（light/dark）；section 的 data-theme 只认 light/dark——
+     <html data-theme> 是配色主题（ink-classic 等），两者不能混 */
   const el=slides[idx];
-  const th=el.dataset.theme || (el.classList.contains('light')?'light':(el.classList.contains('dark')?'dark':'dark'));
+  const th=(el.dataset.theme==='light'||el.dataset.theme==='dark') ? el.dataset.theme : (el.classList.contains('light')?'light':'dark');
   document.body.classList.toggle('light-bg',th==='light');
   /* 动效：翻页过渡中段触发当前页的入场动画（由 motion-boot 注册） */
   if(window.__playSlide) setTimeout(()=>window.__playSlide(idx), 450);
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/checklist.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/checklist.md
index dbefe207..7e6cc07d 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/checklist.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/checklist.md
@@ -109,7 +109,7 @@ node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html
 - 13-15px → weight **500-600**
 - 同一页内,字号小的元素字重必须 ≥ 字号大的元素。
 - **16px 左右小字禁止使用 weight 300**(太细不可读),最低 400,推荐 500。
-- 封面/IKB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色。
+- 封面/IKB 反白大标题内强调字：英文 `italic + weight 300`，中文 `font-weight:400`（中文不用斜体），不要用 accent 色。
 
 **检查**:
 - `rg -n "font-size:(10px|11px|12px|13px)|max\\((9|10|11|12|13)px" index.html`
@@ -173,7 +173,7 @@ node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html
 **做法**(瑞士风必守):
 - **封面强制 `<section class="slide accent">`**(满屏 IKB),不要 `slide.light`,也不要 `slide.dark`;在 `.canvas-card` 内**第一个子元素**插入 `<canvas class="ascii-bg">`(ASCII 字符呼吸场,模板自带 IIFE 自动激活)
 - **不要再写"01"等编号大字**:`.chrome-min` 已经显示 `01 / N`,封面再放一个巨大的"01"=同义重复,直接删掉
-- **强调字必须用斜体**:`font-style:italic;font-weight:300`,**禁止**用 `color:var(--accent)`——IKB 蓝压 IKB 蓝,人眼看不见任何强调
+- **强调字**：英文用斜体 `font-style:italic;font-weight:300`，中文用 `font-weight:400`（中文没有斜体字形，不要用 italic），**禁止**用 `color:var(--accent)`——IKB 蓝压 IKB 蓝,人眼看不见任何强调
 - **封底强制 `slide.split`** 双半屏,左半 `.half.b-accent` + ASCII canvas(与封面色彩闭环),右半 paper 白底放 3 条 takeaway;**第 03 条**用 `var(--accent)` 上色,完成"开场全 IKB ↔ 收尾半 IKB"的色彩闭环
 - ASCII canvas 在模板的 `<style>` 里已经预设 `mix-blend-mode:screen;opacity:.92`,不要去动这个值
 - 封面/封底主标题字号双约束:`min(11.6vw,19vh)` ~ `min(8vw,14vh)`(遵守 Y ≥ X × 1.6 规则)
@@ -181,7 +181,7 @@ node <SKILL_ROOT>/scripts/validate-swiss-deck.mjs path/to/index.html
 **自检命令**:
 - `grep -c "ascii-bg" index.html`——封面 + 封底应至少命中 ≥ 2(各一个 canvas)
 - `grep -E '"slide accent"' index.html | head -1`——封面应是 `slide accent` 而非 `slide light`
-- `grep "color:var(--accent)" index.html`——若命中行同时含 `font-style:italic` 即危险信号(蓝压蓝),改为只 italic 不 accent;只有封底"03 takeaway"那一处用 `var(--accent)` 是合法的(此时背景是白色)
+- `grep "color:var(--accent)" index.html`——若命中行同时含 `font-style:italic` 即危险信号(蓝压蓝),改为只 italic 不 accent;封底"03 takeaway"在白底上做强调，用 `var(--accent-ink)`(柠檬黄 / 柠檬绿主题下会自动加深到可读)
 - 目视:打开页面看封面有没有"01"等大编号——有就删
 
 ### 0-C. 瑞士风大字号双约束:`min(Xvw, Yvh)` 中 Y ≥ X × 1.6
@@ -593,7 +593,8 @@ JS 会动态算总页数并扩展底部翻页圆点，但 `.chrome` 里的 `XX /
   □ 瑞士风:封底是 `slide split` + 左 `b-accent` + ASCII canvas / 右 paper 3 条 takeaway,第 03 条用 var(--accent)
   □ 瑞士风:`grep -c "ascii-bg" index.html` ≥ 2(封面 + 封底各一)
   □ 瑞士风:封面没有"01"等大编号(chrome 已显示 01/N,不要重复)
-  □ 瑞士风:IKB 背景上的强调字用 `font-style:italic`,禁止用 `color:var(--accent)`(蓝压蓝)
+  □ 瑞士风:IKB 背景上的强调字英文用 `font-style:italic`、中文用 `font-weight:400`,禁止用 `color:var(--accent)`(蓝压蓝)
+  □ 强调色当文字色：小字用 `var(--accent-ink)`、大字用 `var(--accent-display)`，不要直接写 `var(--accent)`(柠檬黄 / 柠檬绿主题下看不见)
 
 内容
   □ 每一幕的页数比例合理(不会头重脚轻)
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/components.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/components.md
index 6d48a055..787e9b19 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/components.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/components.md
@@ -2,6 +2,10 @@
 
 这是 `guizang-ppt-skill` skill 的组件手册。template.html 已经定义好了所有样式，这里只写"这个组件长什么样、怎么用"。
 
+## 设计系统共享组件（可选）
+
+除了下面这些模板类，模板里还内置了三个 skill 共用的 `gz-*` 组件（封面、大数字、引言、流程、对比、图框、图片网格、条目清单、页眉页脚），结构和字段见 `references/gz-components.md`（自动生成）。模板类覆盖不到时再用；字号用文档里的 `gz-t-<角色>` 类。
+
 ## 目录
 
 - [基础 Slide 外壳](#基础-slide-外壳)
@@ -23,13 +27,13 @@
 
 ## 基础 Slide 外壳
 
-每一页都是一个 `<section class="slide ...">`。必须包含 `data-theme` 属性（`light` 或 `dark`），JS 翻页时会根据这个属性切换背景。
+每一页都是一个 `<section class="slide ...">`，用 class `light` 或 `dark` 标明深浅，JS 翻页时据此切换背景。**不要在 section 上写配色主题**：`data-theme="ink-classic"` 这类配色主题只写在 `<html>` 上（见 themes.md）。深色页里文字、线条、强调色的语义变量（`--text-*`、`--line-*`、`--accent-ink`）会自动切到深底版本。
 
 ```html
-<section class="slide light" data-theme="light">   <!-- 浅色页 -->
-<section class="slide dark" data-theme="dark">     <!-- 深色页 -->
-<section class="slide light hero" data-theme="light">  <!-- Hero 页：浅色 + 薄遮罩透出 WebGL -->
-<section class="slide dark hero" data-theme="dark">    <!-- Hero 页：深色 + 薄遮罩 -->
+<section class="slide light">   <!-- 浅色页 -->
+<section class="slide dark">     <!-- 深色页 -->
+<section class="slide light hero">  <!-- Hero 页：浅色 + 薄遮罩 -->
+<section class="slide dark hero">    <!-- Hero 页：深色 + 薄遮罩 -->
 ```
 
 **light vs dark 的使用：交替使用**，每 2-3 页切换一次主题，避免连续超过 3 页同色。翻页时 WebGL 背景会自动在两个 shader 之间渐变过渡。
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/gz-components.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/gz-components.md
new file mode 100644
index 00000000..fca7de0c
--- /dev/null
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/gz-components.md
@@ -0,0 +1,289 @@
+# 组件参考
+
+由 `scripts/docs.mjs` 从 `components/render.mjs` 生成，不要手改。
+
+用法：页面根节点写 `<html data-family="magazine|swiss" data-medium="slide|card|page" data-theme="…">`，
+引入 `gz-<family>.css`、`gz-<family>-<medium>.css`、`gz-components.css`。组件只管布局和颜色，
+字号来自 `gz-t-<角色>` 类，所以同一段 HTML 在 PPT、卡片、网页里会自动换成各自的字号和排法。
+反色块加 `data-surface="ink|accent|paper-2"`，块内文字颜色自动切换；整张强调色或墨色的卡片 / 页面，把它加在 `<section class="poster">` 或 `<section class="slide">` 上。
+强调色当文字色时不要直接写 `var(--accent)`：小字用 `.gz-c-accent`（`--accent-ink`），大字和大数字用 `.gz-c-accent-display`（`--accent-display`）。
+条目清单的编号用 `gz-t-label`，大数字组件把数字角色类（如 `gz-t-num-l`）加在 `.gz-stat__value` 上，单位按它的 0.4 倍显示。
+
+## 页眉页脚 · `chrome`
+
+| 字段 | 说明 |
+|---|---|
+| `left` | 左侧文字（数组） |
+| `right` | 右侧文字（数组） |
+| `pos` | top \| bottom |
+| `accentFirst` | 左侧第一项用强调色 |
+
+```html
+<div class="gz-chrome gz-t-meta" data-pos="top">
+  <div class="gz-chrome__group">
+    <span class="gz-chrome__accent">Issue 07</span>
+    <span>Numbers</span>
+  </div>
+  <div class="gz-chrome__group">
+    <span>02 / 08</span>
+  </div>
+</div>
+```
+
+## 封面 · `cover`
+
+| 字段 | 说明 |
+|---|---|
+| `kicker` | 眉题 |
+| `title` | 标题，可用 `<br>` 断行 |
+| `sub` | 副标题 |
+| `meta` | 底部信息（数组） |
+| `surface` | ink \| accent（可选） |
+
+文案上限：
+- `title`：card 每行 ≤ 8 字，≤ 2 行；slide 每行 ≤ 12 字，≤ 2 行；page ≤ 30 字
+
+```html
+<header class="gz-cover">
+  <div class="gz-cover__kicker gz-t-label">Issue 07 · AI Weekly</div>
+  <div class="gz-cover__body">
+    <h1 class="gz-cover__title gz-t-display-zh" style="--chars:7.10">模型越来越便宜<br>Agent 才刚开始</h1>
+    <div class="gz-cover__rule">
+    </div>
+    <p class="gz-cover__sub gz-t-lead">推理成本一年降了一个数量级，真正改变工作方式的是能连续工作的系统。</p>
+  </div>
+  <div class="gz-cover__meta gz-chrome gz-t-meta">
+    <div class="gz-chrome__group">
+      <span>歸藏</span>
+      <span>2026.10.30</span>
+      <span>内容生产 · 第 7 期</span>
+    </div>
+  </div>
+</header>
+```
+
+## 大数字 · `stats`
+
+| 字段 | 说明 |
+|---|---|
+| `items` | [{ label, value, unit, note, accent }]，1–4 个 |
+
+文案上限：
+- `value`：数字 ≤ 4 位，单位单独写在 unit 里
+
+```html
+<div class="gz-stats" data-count="3">
+  <div class="gz-stat">
+    <div class="gz-stat__label gz-t-label">推理成本</div>
+    <div class="gz-stat__value gz-t-num-l">
+      <span class="gz-stat__num">−92</span>
+      <span class="gz-stat__unit">%</span>
+    </div>
+    <p class="gz-stat__note gz-t-small">同等能力的模型，每百万 token 价格</p>
+  </div>
+  <div class="gz-stat is-accent">
+    <div class="gz-stat__label gz-t-label">Agent 起草</div>
+    <div class="gz-stat__value gz-t-num-l">
+      <span class="gz-stat__num">87</span>
+      <span class="gz-stat__unit">%</span>
+    </div>
+    <p class="gz-stat__note gz-t-small">本栏目选题由 Agent 起草初稿</p>
+  </div>
+  <div class="gz-stat">
+    <div class="gz-stat__label gz-t-label">单次任务</div>
+    <div class="gz-stat__value gz-t-num-l">
+      <span class="gz-stat__num">3.5</span>
+      <span class="gz-stat__unit">h</span>
+    </div>
+    <p class="gz-stat__note gz-t-small">Agent 不间断工作的中位时长</p>
+  </div>
+</div>
+```
+
+## 引言 · `quote`
+
+| 字段 | 说明 |
+|---|---|
+| `text` | 引文，可用 `<br>` 断行 |
+| `source` | 出处 |
+
+文案上限：
+- `text`：card ≤ 3 行；slide ≤ 3 行；page ≤ 80 字
+
+```html
+<figure class="gz-quote">
+  <blockquote class="gz-quote__text gz-t-quote">
+    <p>好的工具不替你做决定，<br>而是让你更快看清<br>该做什么决定。</p>
+  </blockquote>
+  <figcaption class="gz-quote__source gz-t-meta">歸藏 · Next Token 第 31 期</figcaption>
+</figure>
+```
+
+## 流程 · `process`
+
+| 字段 | 说明 |
+|---|---|
+| `steps` | [{ title, desc }]，3–5 步 |
+
+```html
+<ol class="gz-process" style="--n:4">
+  <li class="gz-process__step">
+    <span class="gz-process__nb gz-t-label">01</span>
+    <h3 class="gz-process__title gz-t-heading">去 AI 味</h3>
+    <p class="gz-process__desc gz-t-small">先过一遍 Humanizer，统一语气。</p>
+  </li>
+  <li class="gz-process__step">
+    <span class="gz-process__nb gz-t-label">02</span>
+    <h3 class="gz-process__title gz-t-heading">锁定主题</h3>
+    <p class="gz-process__desc gz-t-small">读取工作区 theme.json，所有产出同一套色板。</p>
+  </li>
+  <li class="gz-process__step">
+    <span class="gz-process__nb gz-t-label">03</span>
+    <h3 class="gz-process__title gz-t-heading">并行生成</h3>
+    <p class="gz-process__desc gz-t-small">长文网页、小红书图文、公众号封面同时出。</p>
+  </li>
+  <li class="gz-process__step">
+    <span class="gz-process__nb gz-t-label">04</span>
+    <h3 class="gz-process__title gz-t-heading">入库归档</h3>
+    <p class="gz-process__desc gz-t-small">素材按栏目进展示库，可以一键做同款。</p>
+  </li>
+</ol>
+```
+
+## 对比 · `compare`
+
+| 字段 | 说明 |
+|---|---|
+| `before` | { tag, title, desc, list } |
+| `after` | 同 before |
+| `afterSurface` | 瑞士风可给 after 加 ink / accent 底 |
+
+```html
+<div class="gz-compare">
+  <section class="gz-compare__side" data-side="before">
+    <div class="gz-compare__tag gz-t-label">Before</div>
+    <h3 class="gz-compare__title gz-t-heading">三个 skill 各管各的</h3>
+    <ul class="gz-compare__list gz-t-small">
+      <li>每次重新选风格</li>
+      <li>配色对不上</li>
+      <li>字号文档和模板不一致</li>
+    </ul>
+  </section>
+  <div class="gz-compare__rule">
+  </div>
+  <section class="gz-compare__side" data-side="after">
+    <div class="gz-compare__tag gz-t-label">After</div>
+    <h3 class="gz-compare__title gz-t-heading">一套 token 驱动三种产出</h3>
+    <ul class="gz-compare__list gz-t-small">
+      <li>主题一次锁定</li>
+      <li>对比度构建时校验</li>
+      <li>字体按需内置</li>
+    </ul>
+  </section>
+</div>
+```
+
+## 图框 · `figure`
+
+| 字段 | 说明 |
+|---|---|
+| `src` | 图片地址 |
+| `alt` | 替代文字 |
+| `kind` | photo \| screenshot |
+| `ratio` | 16x9 \| 16x10 \| 4x3 \| 3x2 \| 1x1 \| 3x4 \| 21x9 |
+| `idx` | 编号，如 Fig.1 |
+| `caption` | 说明 |
+
+```html
+<figure class="gz-figure" data-kind="screenshot" data-ratio="16x10">
+  <div class="gz-figure__well">
+    <img src="assets/screenshot.png" alt="">
+  </div>
+  <figcaption class="gz-figure__cap gz-t-caption">
+    <span class="gz-figure__idx">Fig.1</span>
+    <span>瑞士风 4 个主题的小红书卡片样张</span>
+  </figcaption>
+</figure>
+```
+
+## 图片网格 · `gallery`
+
+| 字段 | 说明 |
+|---|---|
+| `items` | [figure 的数据]，2–6 张 |
+| `cols` | 列数（幻灯片 / 网页） |
+
+```html
+<div class="gz-gallery" data-count="3">
+  <figure class="gz-figure" data-kind="photo" data-ratio="4x3">
+    <div class="gz-figure__well">
+      <img src="assets/forest-ink.webp" alt="">
+    </div>
+    <figcaption class="gz-figure__cap gz-t-caption">
+      <span class="gz-figure__idx">01</span>
+      <span>森林墨</span>
+    </figcaption>
+  </figure>
+  <figure class="gz-figure" data-kind="photo" data-ratio="4x3">
+    <div class="gz-figure__well">
+      <img src="assets/kraft-paper.webp" alt="">
+    </div>
+    <figcaption class="gz-figure__cap gz-t-caption">
+      <span class="gz-figure__idx">02</span>
+      <span>牛皮纸</span>
+    </figcaption>
+  </figure>
+  <figure class="gz-figure" data-kind="photo" data-ratio="4x3">
+    <div class="gz-figure__well">
+      <img src="assets/indigo-porcelain.webp" alt="">
+    </div>
+    <figcaption class="gz-figure__cap gz-t-caption">
+      <span class="gz-figure__idx">03</span>
+      <span>靛蓝瓷</span>
+    </figcaption>
+  </figure>
+</div>
+```
+
+## 条目清单 · `ledger`
+
+| 字段 | 说明 |
+|---|---|
+| `rows` | [{ title, note, value }]，3–6 行 |
+
+```html
+<ol class="gz-ledger">
+  <li class="gz-ledger__row">
+    <span class="gz-ledger__nb gz-t-label">01</span>
+    <div>
+      <div class="gz-ledger__title gz-t-heading">共享组件库</div>
+      <p class="gz-ledger__note gz-t-small">九个组件覆盖三个 skill 的重叠部分</p>
+    </div>
+    <span class="gz-ledger__value gz-t-meta">进行中</span>
+  </li>
+  <li class="gz-ledger__row">
+    <span class="gz-ledger__nb gz-t-label">02</span>
+    <div>
+      <div class="gz-ledger__title gz-t-heading">特效库</div>
+      <p class="gz-ledger__note gz-t-small">WebGL 背景、ASCII 呼吸场、点阵</p>
+    </div>
+    <span class="gz-ledger__value gz-t-meta">11 月</span>
+  </li>
+  <li class="gz-ledger__row">
+    <span class="gz-ledger__nb gz-t-label">03</span>
+    <div>
+      <div class="gz-ledger__title gz-t-heading">迁移 PPT</div>
+      <p class="gz-ledger__note gz-t-small">逐页截图对比，视觉不回退</p>
+    </div>
+    <span class="gz-ledger__value gz-t-meta">11 月</span>
+  </li>
+  <li class="gz-ledger__row">
+    <span class="gz-ledger__nb gz-t-label">04</span>
+    <div>
+      <div class="gz-ledger__title gz-t-heading">插件与展示库</div>
+      <p class="gz-ledger__note gz-t-small">DeepSeek Harness</p>
+    </div>
+    <span class="gz-ledger__value gz-t-meta">12 月</span>
+  </li>
+</ol>
+```
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts-swiss.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts-swiss.md
index 96942bca..6a0ef0ac 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts-swiss.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts-swiss.md
@@ -75,7 +75,7 @@
 **硬规则:**
 - 同一页内,字号越小的元素字重必须 ≥ 字号越大的元素(不允许 16px 正文用 300 而 1.8vw 标题用 500)
 - 16px 左右的小字拒绝使用 weight 300(太细不可读),最低 400,推荐 500
-- 封面/IKB 反白大标题内强调字用 `italic + weight 300`,不要用 accent 色(蓝压蓝看不见)
+- 封面/IKB 反白大标题内强调字：英文用 `italic + weight 300`；中文不用斜体（中文没有斜体字形，浏览器会硬掰变形），改用 `font-weight:400`。都不要用 accent 色(蓝压蓝看不见)
 
 **网格**(IBM Carbon 2x Grid 改造)
 - 16 列 grid:`grid-template-columns:repeat(16,1fr)` + `gap:16px`
@@ -255,7 +255,7 @@ Swiss 主题有 22 个登记版式,生成时要主动展示版式系统,不要
 **默认推荐:IKB 满屏 + ASCII 呼吸场** ⭐
 - `<section class="slide accent">` 满屏 IKB,**不是** light 白底
 - `.canvas-card` 内首位插入 `<canvas class="ascii-bg" aria-hidden="true">`,模板底部 IIFE 自动驱动 sin/cos 二维噪声呼吸场
-- 主标题反白 weight 200,微强调字用斜体(`font-style:italic;font-weight:300`)而非 IKB 蓝(底已是蓝、蓝压蓝看不见)
+- 主标题反白 weight 200,微强调：英文用斜体(`font-style:italic;font-weight:300`)，中文用 `font-weight:400`，不要用 IKB 蓝(底已是蓝、蓝压蓝看不见)
 - **不要**再放编号大字"01"——chrome-min 已经标 01/NN
 - 与 P9 Closing 的 IKB 半屏配合形成"开场全 IKB ↔ 收尾半 IKB"色彩闭环
 
@@ -272,13 +272,13 @@ Swiss 主题有 22 个登记版式,生成时要主动展示版式系统,不要
       <div class="r">SS · 26.05.10 · 01 / NN</div>
     </div>
     <div style="flex:1;padding:0;display:grid;grid-template-rows:auto 1fr auto;gap:2.6vh">
-      <div data-anim="kicker" class="t-meta" style="color:rgba(255,255,255,.78);letter-spacing:.22em">[必填] 章节英文 / Section En</div>
-      <h1 data-anim="title" style="align-self:center;font-family:var(--sans),var(--sans-zh);font-weight:200;font-size:min(11.6vw,19vh);line-height:.94;letter-spacing:-.025em;color:#fff">[必填] 中文主标题<br/>(可在某字加 <span style="font-style:italic;font-weight:300">italic</span> 微强调)</h1>
-      <div data-anim="bottom" style="display:grid;grid-template-rows:auto auto;gap:1.6vh;border-top:1px solid rgba(255,255,255,.22);padding-top:2vh">
-        <div data-anim="lead" class="lead" style="max-width:52ch;color:rgba(255,255,255,.86);font-weight:300">[必填] 一段 1-2 行的副标 / 引子,定调全场.</div>
+      <div data-anim="kicker" class="t-meta" style="color:rgba(var(--accent-on-rgb),.78);letter-spacing:.22em">[必填] 章节英文 / Section En</div>
+      <h1 data-anim="title" style="align-self:center;font-family:var(--sans),var(--sans-zh);font-weight:200;font-size:min(11.6vw,19vh);line-height:.94;letter-spacing:-.025em;color:var(--accent-on)">[必填] 中文主标题<br/>(可在某字加 <span style="font-style:italic;font-weight:300">italic</span> 微强调)</h1>
+      <div data-anim="bottom" style="display:grid;grid-template-rows:auto auto;gap:1.6vh;border-top:1px solid rgba(var(--accent-on-rgb),.22);padding-top:2vh">
+        <div data-anim="lead" class="lead" style="max-width:52ch;color:rgba(var(--accent-on-rgb),.86);font-weight:300">[必填] 一段 1-2 行的副标 / 引子,定调全场.</div>
         <div style="display:flex;justify-content:space-between;align-items:end">
-          <div class="t-meta" style="color:rgba(255,255,255,.6)">[选填] 作者 · 日期 · 出处</div>
-          <div class="t-meta" style="color:rgba(255,255,255,.6)">→ swipe / arrow keys</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.6)">[选填] 作者 · 日期 · 出处</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.6)">→ swipe / arrow keys</div>
         </div>
       </div>
     </div>
@@ -486,7 +486,7 @@ Swiss 主题有 22 个登记版式,生成时要主动展示版式系统,不要
 - 用 `<section class="slide split">` + 左半 `.half.b-accent` + ASCII canvas + 右半白底 takeaway
 - 与 P1 封面的全 IKB 形成"开场全 IKB ↔ 收尾半 IKB"色彩闭环
 - 右侧第 03 条 takeaway 用 `var(--accent)` 强调,把 IKB 蓝从左半穿到右半,完成色彩缝合
-- 大标题反白 weight 200,强调字用斜体(底已是蓝、不要再用 `var(--accent)` 标蓝)
+- 大标题反白 weight 200,强调字：英文斜体、中文加字重到 400(底已是蓝、不要再用 `var(--accent)` 标蓝)
 
 **关键类**:`.slide.split` `.half.b-accent` `.ascii-bg`(IIFE 自动启动)
 **动效 recipe**:`split-statement` — 左 ink/IKB 标题字符序列升起 → 右白半 takeaway 三条尾随
@@ -504,13 +504,13 @@ Swiss 主题有 22 个登记版式,生成时要主动展示版式系统,不要
           <div class="r">CLOSING</div>
         </div>
         <div data-anim="manifesto" style="display:flex;flex-direction:column;gap:2vh;position:relative;z-index:1">
-          <div class="t-meta" style="color:rgba(255,255,255,.78);letter-spacing:.22em;margin-bottom:1.6vh">MANIFESTO</div>
-          <h2 style="font-family:var(--sans),var(--sans-zh);font-size:min(8vw,14vh);line-height:.94;letter-spacing:-.025em;font-weight:200;color:#fff">[必填] Build a model.<br/>Run <span style="font-style:italic;font-weight:300">forever</span>.</h2>
-          <div style="font-family:var(--sans),var(--sans-zh);font-size:max(13px,1vw);line-height:1.6;color:rgba(255,255,255,.82);font-weight:300;max-width:36ch;margin-top:1.4vh">[必填] 一句中英文落地注脚.</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.78);letter-spacing:.22em;margin-bottom:1.6vh">MANIFESTO</div>
+          <h2 style="font-family:var(--sans),var(--sans-zh);font-size:min(8vw,14vh);line-height:.94;letter-spacing:-.025em;font-weight:200;color:var(--accent-on)">[必填] Build a model.<br/>Run <span style="font-style:italic;font-weight:300">forever</span>.</h2>
+          <div style="font-family:var(--sans),var(--sans-zh);font-size:max(13px,1vw);line-height:1.6;color:rgba(var(--accent-on-rgb),.82);font-weight:300;max-width:36ch;margin-top:1.4vh">[必填] 一句中英文落地注脚.</div>
         </div>
-        <div data-anim="signature" style="display:flex;justify-content:space-between;align-items:end;border-top:1px solid rgba(255,255,255,.22);padding-top:2vh;position:relative;z-index:1">
-          <div class="t-meta" style="color:rgba(255,255,255,.62)">[选填] 作者 · 头衔</div>
-          <div class="t-meta" style="color:rgba(255,255,255,.62)">YY.MM.DD</div>
+        <div data-anim="signature" style="display:flex;justify-content:space-between;align-items:end;border-top:1px solid rgba(var(--accent-on-rgb),.22);padding-top:2vh;position:relative;z-index:1">
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.62)">[选填] 作者 · 头衔</div>
+          <div class="t-meta" style="color:rgba(var(--accent-on-rgb),.62)">YY.MM.DD</div>
         </div>
       </div>
       <!-- 右半 · 白底 takeaway,第 03 条用 IKB 蓝强调,首尾色彩闭环 -->
@@ -729,7 +729,7 @@ Swiss 主题有 22 个登记版式,生成时要主动展示版式系统,不要
       <div class="image-hero-stats" style="gap:4vw">
         <div style="display:flex;flex-direction:column;gap:.6vh"><div style="height:1px;background:var(--ink)"></div><div class="t-meta">Metric 01</div><div style="font-family:var(--sans);font-weight:200;font-size:min(4.6vw,7.6vh);line-height:.95;letter-spacing:-.04em">12×</div><div style="height:1px;background:var(--border-subtle);margin-top:auto"></div><p class="body-sm">[必填] 指标解释</p></div>
         <div style="display:flex;flex-direction:column;gap:.6vh"><div style="height:1px;background:var(--ink)"></div><div class="t-meta">Metric 02</div><div style="font-family:var(--sans);font-weight:200;font-size:min(4.6vw,7.6vh);line-height:.95;letter-spacing:-.04em">3.4h</div><div style="height:1px;background:var(--border-subtle);margin-top:auto"></div><p class="body-sm">[必填] 指标解释</p></div>
-        <div style="display:flex;flex-direction:column;gap:.6vh"><div style="height:1px;background:var(--ink)"></div><div class="t-meta">Metric 03</div><div style="font-family:var(--sans);font-weight:200;font-size:min(4.6vw,7.6vh);line-height:.95;letter-spacing:-.04em;color:var(--accent)">100%</div><div style="height:1px;background:var(--border-subtle);margin-top:auto"></div><p class="body-sm">[必填] 指标解释</p></div>
+        <div style="display:flex;flex-direction:column;gap:.6vh"><div style="height:1px;background:var(--ink)"></div><div class="t-meta">Metric 03</div><div style="font-family:var(--sans);font-weight:200;font-size:min(4.6vw,7.6vh);line-height:.95;letter-spacing:-.04em;color:var(--accent-display)">100%</div><div style="height:1px;background:var(--border-subtle);margin-top:auto"></div><p class="body-sm">[必填] 指标解释</p></div>
       </div>
     </div>
   </div>
@@ -771,7 +771,7 @@ Swiss 主题有 22 个登记版式,生成时要主动展示版式系统,不要
       </div>
       <div class="swiss-img-split align-image-bottom" data-anim="up">
         <div class="swiss-img-copy">
-          <div class="t-cat" style="color:var(--accent)">Why it matters</div>
+          <div class="t-cat" style="color:var(--accent-ink)">Why it matters</div>
           <p class="lead" style="font-weight:300;max-width:36ch">[必填] 2-3 行解释图片与论点的关系.</p>
           <div class="body" style="font-weight:300;color:var(--text-secondary)">[必填] 可以放 2-3 条短 bullet 或一段说明,保持左对齐和充足留白.</div>
         </div>
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts.md
index 0e661d74..f9b0c394 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/layouts.md
@@ -58,7 +58,7 @@ layouts.md 使用的所有类（`h-hero` / `h-xl` / `h-sub` / `h-md` / `lead` /
 
 ### D. 主题色与主题节奏
 
-- 主题色从 `references/themes.md` 的 5 套预设里选一套,不允许自定义 hex 值
+- 主题色从 `references/themes.md` 的 5 套预设里选一套（改 `<html data-theme>`）；用户有品牌色时按 themes.md 的品牌色流程生成，不直接写 hex 值
 - 主题节奏(每页用 light / dark / hero light / hero dark 哪一个)在下文"主题节奏规划"一节有硬规则,生成前必读
 - 两件事都要在挑布局之前决定,避免返工
 
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes-swiss.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes-swiss.md
index e46e631e..e5b485c1 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes-swiss.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes-swiss.md
@@ -4,115 +4,86 @@
 
 ---
 
+<!-- GZ:THEMES:START · guizang-design 生成，不要手改；改主题请改 guizang-design/tokens/palettes.json 后运行 scripts/sync-skill.mjs -->
 ## 使用方法
 
-1. 问用户选哪套（或基于内容推荐一套）
-2. 打开 `assets/template-swiss.html` 的 `<style>` 块
-3. 找到开头的 `:root{` 块
-4. **整体替换**标有"主题色"注释的所有变量：`--paper` / `--paper-rgb` / `--ink` / `--ink-rgb` / `--grey-1` / `--grey-2` / `--grey-3` / `--accent` / `--accent-rgb` / `--accent-on`
-5. 其他 CSS 都走 `var(--...)`,无需任何其他改动
+全部主题已内置在模板的 `GZ:TOKENS` 区块里。选定主题后，只改拷贝好的模板第一行 `<html>` 上的 `data-theme`：
 
----
-
-## 🔵 克莱因蓝 (IKB · International Klein Blue)
-
-**适合**：通用场合、商业发布、AI/科技产品、设计领域分享。最经典的瑞士风配色,绝不出错。
-**调性**：纯白底 + IKB 克莱因蓝,极致冷静、理性、有学术感,像 Helvetica Forever 或 Massimo Vignelli 的作品集。
-
-```css
---paper:#fafaf8;
---paper-rgb:250,250,248;
---ink:#0a0a0a;
---ink-rgb:10,10,10;
---grey-1:#f0f0ee;
---grey-2:#d4d4d2;
---grey-3:#737373;
---accent:#002FA7;
---accent-rgb:0,47,167;
---accent-on:#ffffff;
+```html
+<html lang="zh-CN" data-family="swiss" data-medium="slide" data-theme="lemon">
 ```
 
-**使用要点**：
-- IKB 是高饱和深蓝,在大色块（如 `.accent-block`）上极有视觉冲击
-- KPI 数字加 `.accent` 类用蓝色,但不要满屏蓝——IKB 一旦泛滥就掉档
-- 推荐配合 `dark` 主题页交替使用,黑底高亮 IKB 同样高级
+不要改 `GZ:TOKENS` 区块，也不要在页面里写颜色值。文字、线条、强调色一律用语义变量：
+
+| 变量 | 用途 |
+|---|---|
+| `--paper` / `--ink` | 底色 / 主文字 |
+| `--text-body` / `--text-secondary` / `--text-helper` | 正文 / 次要 / 辅助文字，对比度已校验，代替 opacity |
+| `--line` / `--line-strong` / `--line-subtle` | 分割线 |
+| `--accent` | 强调色：色块、细线、圆点、高亮条 |
+| `--accent-ink` | 强调色用作**小字**颜色时用它（浅色强调色会自动加深到可读） |
+| `--accent-display` | 强调色用作**大字**（标题、KPI 数字）颜色时用它 |
+| `--accent-on` / `--accent-on-rgb` | 强调色色块上的文字颜色（黄、绿上是墨色，蓝、橙上是白色） |
+
+### 用户给了品牌色或 logo 主色
+
+不要直接使用这个颜色。运行：
+
+```bash
+node <SKILL_ROOT>/scripts/gz-theme.mjs brand "#4D6BFE" --family swiss
+```
+
+把输出的 `[data-theme="brand"]{…}` 贴到 deck `<style>` 的末尾，再把 `data-theme` 改成 `brand`。
+脚本会把颜色收进本风格精调色板的明度 / 彩度区间，并检查 WCAG 与 APCA 对比度；不达标时会说明原因，这时从下面的预设里选。杂志风会把彩度压到 0.12 以内，高饱和的品牌色会变得更克制（例如 #FF2442 → #b75a59，第一行注释会写明调整）；需要保留鲜艳度时用瑞士风。
 
 ---
 
-## 🟡 柠檬黄 (Lemon · Cadmium Yellow)
+## 🔵 克莱因蓝 · `ikb`（默认）
+
+**适合**：通用场合、商业发布、AI/科技产品、设计领域分享。最经典的瑞士风配色，绝不出错。
+**调性**：纯白底 + IKB 克莱因蓝，极致冷静、理性、有学术感，像 Helvetica Forever 或 Massimo Vignelli 的作品集。
+
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#fafaf8` | `#0a0a0a` | `#002FA7` | `#002FA7` | `#ffffff` | 14.7 / 99 |
+
+---
+
+## 🟡 柠檬黄 · `lemon`
 
 **适合**：年轻、运动、零售、消费品、活力主题、Y2K 复古设计。
-**调性**：浅米白底 + 柠檬黄,鲜亮、有活力、警示感强,像 IKEA 或 Beck Design 的视觉语言。
+**调性**：浅米白底 + 柠檬黄，鲜亮、有活力、警示感强，像 IKEA 或 Beck Design 的视觉语言。
 
-```css
---paper:#fafaf8;
---paper-rgb:250,250,248;
---ink:#0a0a0a;
---ink-rgb:10,10,10;
---grey-1:#f0f0ee;
---grey-2:#d4d4d2;
---grey-3:#737373;
---accent:#FFD500;
---accent-rgb:255,213,0;
---accent-on:#0a0a0a;
-```
-
-**使用要点**：
-- 柠檬黄属于浅色高饱和,**`.accent-on` 必须用纯黑**（不是白）才能保证可读性
-- 黄色色块上不要放白字——会糊掉
-- 柠檬黄做单字符高亮（`.mark` / `.underline-accent`）效果最强
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#fafaf8` | `#0a0a0a` | `#FFD500` | `#7a5f00` | `#0a0a0a` | 14.7 / 99 |
 
 ---
 
-## 🟢 柠檬绿 (Lemon Green · Highlighter Green)
+## 🟢 柠檬绿 · `lemon-green`
 
 **适合**：生态、可持续、健康、新兴科技、Z 世代品牌、AI 创业项目。
-**调性**：浅米白底 + 荧光柠檬绿,有未来感、年轻、当代,像 Acne Studios 或 Off-White 的视觉。
+**调性**：浅米白底 + 荧光柠檬绿，有未来感、年轻、当代，像 Acne Studios 或 Off-White 的视觉。
 
-```css
---paper:#fafaf8;
---paper-rgb:250,250,248;
---ink:#0a0a0a;
---ink-rgb:10,10,10;
---grey-1:#f0f0ee;
---grey-2:#d4d4d2;
---grey-3:#737373;
---accent:#C5E803;
---accent-rgb:197,232,3;
---accent-on:#0a0a0a;
-```
-
-**使用要点**：
-- 荧光绿和黄色一样属于浅色,**`.accent-on` 必须用纯黑**
-- 屏幕显色比印刷漂亮,适合演讲投影场景
-- 推荐用于"新兴技术"、"未来"主题
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#fafaf8` | `#0a0a0a` | `#C5E803` | `#4a6400` | `#0a0a0a` | 14.7 / 99 |
 
 ---
 
-## 🟠 安全橙 (Safety Orange)
+## 🟠 安全橙 · `safety-orange`
 
-**适合**：工业、警示、运动、施工、汽车工业、技术发布会的"警告/重点"页。
-**调性**：浅米白底 + 安全橙,工业感、紧迫感、视觉锚点感,像 Saul Bass 海报或 Highway Gothic 标识系统。
+**适合**：工业、警示、运动、施工、汽车工业、技术发布会的「警告/重点」页。
+**调性**：浅米白底 + 安全橙，工业感、紧迫感、视觉锚点感，像 Saul Bass 海报或 Highway Gothic 标识系统。
 
-```css
---paper:#fafaf8;
---paper-rgb:250,250,248;
---ink:#0a0a0a;
---ink-rgb:10,10,10;
---grey-1:#f0f0ee;
---grey-2:#d4d4d2;
---grey-3:#737373;
---accent:#FF6B35;
---accent-rgb:255,107,53;
---accent-on:#ffffff;
-```
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#fafaf8` | `#0a0a0a` | `#FF6B35` | `#c2410c` | `#ffffff` | 14.7 / 99 |
 
-**使用要点**：
-- 橙色介于浅色和深色之间,**白字勉强能读但建议加粗**（`font-weight:600` 以上）
-- 工业感强,适合涉及"警告"、"决策"、"转折点"的内容
-- 不建议整页 `.accent` 模式,橙色满屏会过于刺眼,做局部高亮即可
+> 强调色色块上的文字只用大号粗体（APCA 59）。
 
 ---
+<!-- GZ:THEMES:END -->
 
 ## 推荐选择参考
 
@@ -137,7 +108,7 @@
 ## ❌ 不要做的事
 
 - ❌ **不允许混搭**（例如 IKB 蓝 + 柠檬黄同时出现作高亮）——彻底违反瑞士风"单一锚点色"原则
-- ❌ **不允许用户自定义任意 hex 值**——委婉拒绝,展示 4 套预设让选
+- ❌ **不要把用户给的 hex 值直接写进页面**——用 `scripts/gz-theme.mjs --family swiss` 生成受约束的品牌主题；灰色或彩度太低的颜色会被拒绝，这时展示 4 套预设让选
 - ❌ **不要改灰阶变量**——`--paper` / `--grey-1/2/3` / `--ink` 跨主题统一,只换 accent
 - ❌ **不要用渐变**——瑞士风拒绝任何渐变,所有色块必须纯色
 - ❌ **不要给 accent 加阴影 / 圆角 / 透明度**——直角、纯色、不透明,这是瑞士风的硬规则
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes.md b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes.md
index 8ecaa03f..46a9763c 100644
--- a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes.md
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/references/themes.md
@@ -1,99 +1,101 @@
 # 主题色预设（Themes）
 
-5 套精心调配的主题色板,保证"电子杂志 × 电子墨水"的美学不垮。**不允许用户自定义颜色——色彩搭配错了画面瞬间变丑**,只从以下预设中挑选。
+5 套精心调配的主题色板,保证"电子杂志 × 电子墨水"的美学不垮。**不直接使用用户给的颜色值——色彩搭配错了画面瞬间变丑**。用户有品牌色或 logo 主色时，走下方「用户给了品牌色」流程生成受约束的主题；否则只从以下预设中挑选。
 
 ---
 
+<!-- GZ:THEMES:START · guizang-design 生成，不要手改；改主题请改 guizang-design/tokens/palettes.json 后运行 scripts/sync-skill.mjs -->
 ## 使用方法
 
-1. 问用户选哪套(或基于内容推荐一套)
-2. 打开 `assets/template.html` 的 `<style>` 块
-3. 找到开头的 `:root{` 块
-4. **整体替换**标有"主题色"注释的那几行 `--ink` / `--ink-rgb` / `--paper` / `--paper-rgb` / `--paper-tint` / `--ink-tint`
-5. 其他 CSS 都走 `var(--...)`,无需任何其他改动
+全部主题已内置在模板的 `GZ:TOKENS` 区块里。选定主题后，只改拷贝好的模板第一行 `<html>` 上的 `data-theme`：
 
----
-
-## 🖋 墨水经典 (Monocle 默认)
-
-**适合**:通用分享、商业发布、科技产品、任何场景都安全的默认选择。
-**调性**:纯墨黑 + 暖米白,杂志感最强,Monocle / Apricot / A Book Apart 风。
-
-```css
---ink:#0a0a0b;
---ink-rgb:10,10,11;
---paper:#f1efea;
---paper-rgb:241,239,234;
---paper-tint:#e8e5de;
---ink-tint:#18181a;
+```html
+<html lang="zh-CN" data-family="magazine" data-medium="slide" data-theme="indigo-porcelain">
 ```
 
----
+不要改 `GZ:TOKENS` 区块，也不要在页面里写颜色值。文字、线条、强调色一律用语义变量：
 
-## 🌊 靛蓝瓷 (Indigo Porcelain)
+| 变量 | 用途 |
+|---|---|
+| `--paper` / `--ink` | 底色 / 主文字 |
+| `--text-body` / `--text-secondary` / `--text-helper` | 正文 / 次要 / 辅助文字，对比度已校验，代替 opacity |
+| `--line` / `--line-strong` / `--line-subtle` | 分割线 |
+| `--accent` | 强调色：色块、细线、圆点、高亮条 |
+| `--accent-ink` | 强调色用作**小字**颜色时用它（浅色强调色会自动加深到可读） |
+| `--accent-display` | 强调色用作**大字**（标题、KPI 数字）颜色时用它 |
+| `--accent-on` / `--accent-on-rgb` | 强调色色块上的文字颜色（黄、绿上是墨色，蓝、橙上是白色） |
 
-**适合**:科技/研究/数据分享、工程师文化、深度内容、技术发布会。
-**调性**:深靛蓝 + 瓷白,冷静、理性、有深度,像学术期刊或蓝印花瓷器。
+### 用户给了品牌色或 logo 主色
 
-```css
---ink:#0a1f3d;
---ink-rgb:10,31,61;
---paper:#f1f3f5;
---paper-rgb:241,243,245;
---paper-tint:#e4e8ec;
---ink-tint:#152a4a;
+不要直接使用这个颜色。运行：
+
+```bash
+node <SKILL_ROOT>/scripts/gz-theme.mjs brand "#4D6BFE" --family magazine
 ```
 
----
-
-## 🌿 森林墨 (Forest Ink)
-
-**适合**:自然/可持续/文化/非虚构内容、户外品牌、环保主题。
-**调性**:深森林绿 + 象牙,沉稳、有呼吸感,像旧版《国家地理》。
-
-```css
---ink:#1a2e1f;
---ink-rgb:26,46,31;
---paper:#f5f1e8;
---paper-rgb:245,241,232;
---paper-tint:#ece7da;
---ink-tint:#253d2c;
-```
+把输出的 `[data-theme="brand"]{…}` 贴到 deck `<style>` 的末尾，再把 `data-theme` 改成 `brand`。
+脚本会把颜色收进本风格精调色板的明度 / 彩度区间，并检查 WCAG 与 APCA 对比度；不达标时会说明原因，这时从下面的预设里选。杂志风会把彩度压到 0.12 以内，高饱和的品牌色会变得更克制（例如 #FF2442 → #b75a59，第一行注释会写明调整）；需要保留鲜艳度时用瑞士风。
 
 ---
 
-## 🍂 牛皮纸 (Kraft Paper)
+## 🖋 墨水经典 · `ink-classic`（默认）
 
-**适合**:怀旧/人文/阅读/历史/文学分享、独立杂志、手作品牌。
-**调性**:深棕 + 暖米,像牛皮信封或老笔记本,温暖、有年代感。
+**适合**：通用分享、商业发布、科技产品、任何场景都安全的默认选择。
+**调性**：纯墨黑 + 暖米白，杂志感最强，Monocle / Apricot / A Book Apart 风。
 
-```css
---ink:#2a1e13;
---ink-rgb:42,30,19;
---paper:#eedfc7;
---paper-rgb:238,223,199;
---paper-tint:#e0d0b6;
---ink-tint:#3a2a1d;
-```
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#f1efea` | `#0a0a0b` | `#111111` | `#111111` | `#f1efea` | 12.3 / 91 |
 
 ---
 
-## 🌙 沙丘 (Dune)
+## 🌊 靛蓝瓷 · `indigo-porcelain`
 
-**适合**:艺术/设计/创意/时尚分享、画廊手册、审美优先的私享会。
-**调性**:炭灰 + 沙色,克制、高级、中性,像沙漠黄昏或建筑设计图册。
+**适合**：科技/研究/数据分享、工程师文化、深度内容、技术发布会。
+**调性**：深靛蓝 + 瓷白，冷静、理性、有深度，像学术期刊或蓝印花瓷器。
 
-```css
---ink:#1f1a14;
---ink-rgb:31,26,20;
---paper:#f0e6d2;
---paper-rgb:240,230,210;
---paper-tint:#e3d7bf;
---ink-tint:#2d2620;
-```
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#f1f3f5` | `#0a1f3d` | `#315d93` | `#315d93` | `#f1f3f5` | 9.3 / 87 |
 
 ---
 
+## 🌿 森林墨 · `forest-ink`
+
+**适合**：自然/可持续/文化/非虚构内容、户外品牌、环保主题。
+**调性**：深森林绿 + 象牙，沉稳、有呼吸感，像旧版《国家地理》。
+
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#f5f1e8` | `#1a2e1f` | `#2e6b4f` | `#2e6b4f` | `#f5f1e8` | 8.0 / 83 |
+
+---
+
+## 🍂 牛皮纸 · `kraft-paper`
+
+**适合**：怀旧/人文/阅读/历史/文学分享、独立杂志、手作品牌。
+**调性**：深棕 + 暖米，像牛皮信封或老笔记本，温暖、有年代感。
+
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#eedfc7` | `#2a1e13` | `#9b5a2e` | `#804212` | `#eedfc7` | 8.1 / 77 |
+
+---
+
+## 🌙 沙丘 · `dune`
+
+**适合**：艺术/设计/创意/时尚分享、画廊手册、审美优先的私享会。
+**调性**：炭灰 + 沙色，克制、高级、中性，像沙漠黄昏或建筑设计图册。
+
+| paper | ink | accent | accent-ink | accent-on | 正文对比度 |
+|---|---|---|---|---|---|
+| `#f0e6d2` | `#1f1a14` | `#8f7650` | `#705833` | `#f0e6d2` | 9.2 / 82 |
+
+> 强调色色块上的文字只用大号粗体（APCA 60）。
+
+---
+<!-- GZ:THEMES:END -->
+
 ## 推荐选择参考
 
 | 如果是... | 推荐主题 |
@@ -116,7 +118,7 @@
 ## ❌ 不要做的事
 
 - ❌ **不允许混搭**(例如 ink 取墨水经典的,paper 取沙丘的)——会彻底违和
-- ❌ **不允许用户随便给一个 hex 值**——需委婉拒绝并展示 5 套预设让选
-- ❌ **不要直接修改 template.html 其他地方的颜色**——所有散落 rgba 都走 var,改 :root 一处即可
+- ❌ **不要把用户给的 hex 值直接写进页面**——用 `scripts/gz-theme.mjs` 生成受约束的品牌主题；脚本判定不达标时，展示 5 套预设让选
+- ❌ **不要直接修改 template.html 里的颜色**——所有颜色都走语义变量,换主题只改 `<html>` 的 `data-theme` 一处
 
 选定主题后在 skill 对话中告诉用户:"用 🖋 墨水经典 / 🌊 靛蓝瓷 ..."并在 deck 项目记录里备注,方便后续迭代时保持一致。
diff --git a/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/scripts/gz-theme.mjs b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/scripts/gz-theme.mjs
new file mode 100644
index 00000000..2df753ee
--- /dev/null
+++ b/plugins/codex/plugins/guizang-ppt-skill/skills/guizang-ppt-skill/scripts/gz-theme.mjs
@@ -0,0 +1,434 @@
+#!/usr/bin/env node
+// 歸藏设计系统 · 品牌主题生成（guizang-design v0.1.0 生成，不要手改）
+//
+//   node scripts/gz-theme.mjs brand "#4D6BFE" [--family magazine|swiss] [--id brand]
+//
+// 用户给品牌色或 logo 主色时用：颜色被收进现有精调色板的明度 / 彩度区间，并通过 WCAG + APCA 对比度检查。
+// 输出一段 [data-theme="<id>"]{…} CSS，贴进 deck 的 <style> 末尾，再把 <html> 的 data-theme 改成 <id>。
+// 不达标时不输出主题，只给出原因。
+// 色彩基础：sRGB ↔ OKLab / OKLCH、sRGB 色域映射、WCAG 2 对比度、APCA 对比度。
+// 设计系统里所有「科学配色」都建立在这几个函数上：
+// 用 OKLCH 描述颜色（明度 L、彩度 C、色相 H 互相独立，调一个不会把另外两个带偏），
+// 用 WCAG + APCA 两套对比度卡住可读性。纯函数、无依赖。
+
+const clamp = (x, lo, hi) => Math.min(hi, Math.max(lo, x))
+
+// ---------- hex ----------
+
+function parseHex(hex) {
+  const m = /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(String(hex).trim())
+  if (!m) throw new TypeError(`不是合法的 hex 颜色：${hex}`)
+  let h = m[1]
+  if (h.length === 3) h = h.replace(/./g, (c) => c + c)
+  return [0, 2, 4].map((i) => parseInt(h.slice(i, i + 2), 16) / 255)
+}
+
+function toHex(rgb) {
+  return '#' + rgb.map((c) => Math.round(clamp(c, 0, 1) * 255).toString(16).padStart(2, '0')).join('')
+}
+
+// ---------- sRGB 传递函数 ----------
+
+const toLinear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4)
+const fromLinear = (c) => (c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055)
+
+// ---------- OKLab（Björn Ottosson, 2020） ----------
+
+function rgbToOklab([r, g, b]) {
+  const R = toLinear(r), G = toLinear(g), B = toLinear(b)
+  const l = Math.cbrt(0.4122214708 * R + 0.5363325363 * G + 0.0514459929 * B)
+  const m = Math.cbrt(0.2119034982 * R + 0.6806995451 * G + 0.1073969566 * B)
+  const s = Math.cbrt(0.0883024619 * R + 0.2817188376 * G + 0.6299787005 * B)
+  return [
+    0.2104542553 * l + 0.7936177850 * m - 0.0040720468 * s,
+    1.9779984951 * l - 2.4285922050 * m + 0.4505937099 * s,
+    0.0259040371 * l + 0.7827717662 * m - 0.8086757660 * s,
+  ]
+}
+
+// 返回未裁剪的 sRGB，可能超出 [0,1]，由调用方判断是否在色域内
+function oklabToRgb([L, a, b]) {
+  const l = (L + 0.3963377774 * a + 0.2158037573 * b) ** 3
+  const m = (L - 0.1055613458 * a - 0.0638541728 * b) ** 3
+  const s = (L - 0.0894841775 * a - 1.2914855480 * b) ** 3
+  return [
+    fromLinear(4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s),
+    fromLinear(-1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s),
+    fromLinear(-0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s),
+  ]
+}
+
+// ---------- OKLCH ----------
+
+function oklabToOklch([L, a, b]) {
+  const C = Math.hypot(a, b)
+  let H = (Math.atan2(b, a) * 180) / Math.PI
+  if (H < 0) H += 360
+  return { l: L, c: C, h: C < 1e-4 ? 0 : H }
+}
+
+function oklchToOklab({ l, c, h }) {
+  const r = (h * Math.PI) / 180
+  return [l, c * Math.cos(r), c * Math.sin(r)]
+}
+
+const hexToOklch = (hex) => oklabToOklch(rgbToOklab(parseHex(hex)))
+
+const inGamut = (rgb, eps = 1e-6) => rgb.every((c) => c >= -eps && c <= 1 + eps)
+
+// 保持明度和色相，二分降低彩度直到落进 sRGB。和 CSS Color 4 的思路一致，足够用于生成色板
+function oklchToHex({ l, c, h }) {
+  l = clamp(l, 0, 1)
+  let rgb = oklabToRgb(oklchToOklab({ l, c, h }))
+  if (!inGamut(rgb)) {
+    let lo = 0, hi = c
+    while (hi - lo > 1e-5) {
+      const mid = (lo + hi) / 2
+      if (inGamut(oklabToRgb(oklchToOklab({ l, c: mid, h })))) lo = mid
+      else hi = mid
+    }
+    rgb = oklabToRgb(oklchToOklab({ l, c: lo, h }))
+  }
+  return toHex(rgb)
+}
+
+function maxChroma(l, h) {
+  let lo = 0, hi = 0.5
+  while (hi - lo > 1e-5) {
+    const mid = (lo + hi) / 2
+    if (inGamut(oklabToRgb(oklchToOklab({ l, c: mid, h })))) lo = mid
+    else hi = mid
+  }
+  return lo
+}
+
+// ---------- 对比度 ----------
+
+function luminance(hex) {
+  const [r, g, b] = parseHex(hex).map(toLinear)
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+// WCAG 2.x：1–21。正文 ≥ 4.5，大字 ≥ 3
+function wcag(fg, bg) {
+  const a = luminance(fg), b = luminance(bg)
+  return (Math.max(a, b) + 0.05) / (Math.min(a, b) + 0.05)
+}
+
+// APCA (SAPC 0.0.98G-4g)：返回 Lc，深字浅底为正、浅字深底为负。
+// 参考阈值：正文 |Lc| ≥ 75，大号正文 ≥ 60，标题 ≥ 45，不承担阅读的装饰 ≥ 30。
+// WCAG 2 对深色背景和中等亮度颜色偏差很大，APCA 更接近人眼，两者都看。
+function apca(fg, bg) {
+  const y = (hex) => {
+    const [r, g, b] = parseHex(hex).map((c) => c ** 2.4)
+    let Y = 0.2126729 * r + 0.7151522 * g + 0.072175 * b
+    if (Y < 0.022) Y += (0.022 - Y) ** 1.414
+    return Y
+  }
+  const Yt = y(fg), Yb = y(bg)
+  if (Math.abs(Yb - Yt) < 0.0005) return 0
+  if (Yb > Yt) {
+    const s = (Yb ** 0.56 - Yt ** 0.57) * 1.14
+    return s < 0.1 ? 0 : (s - 0.027) * 100
+  }
+  const s = (Yb ** 0.65 - Yt ** 0.62) * 1.14
+  return s > -0.1 ? 0 : (s + 0.027) * 100
+}
+
+// 两个颜色在 OKLab 里的距离（ΔEok，×100 便于阅读，≈2 以下肉眼难分）
+function deltaE(a, b) {
+  const [L1, a1, b1] = rgbToOklab(parseHex(a))
+  const [L2, a2, b2] = rgbToOklab(parseHex(b))
+  return Math.hypot(L1 - L2, a1 - a2, b1 - b2) * 100
+}
+
+const formatOklch = ({ l, c, h }) => `oklch(${(l * 100).toFixed(1)}% ${c.toFixed(4)} ${h.toFixed(1)})`
+
+// 从色板派生完整主题：文字角色、线条、accent-on、accent-ink、-rgb 三元组。
+// 派生规则对所有主题一样，自定义品牌主题也走这里，所以「每套主题都可读」是由规则保证的，不靠逐个手调。
+//
+// 文字角色沿用现有模板的层级比例（PPT / 卡片里正文 .82、次要 .72 这类透明度），
+// 但输出实色而不是透明度：导出 PDF 和截图时透明叠加会出问题，实色也能直接算对比度。
+// 比例混出来的颜色对比度不够时，沿 OKLab 继续往墨色方向推，直到达到该角色的下限。
+
+
+// APCA |Lc| 下限。参考 APCA 的使用建议：正文 75、大号正文 / 次要文字 60、标题 45、非阅读元素 15–30
+const ROLE_FLOORS = {
+  textBody: { apca: 75, wcag: 7 },
+  textSecondary: { apca: 60, wcag: 4.5 },
+  textHelper: { apca: 60, wcag: 4.5 },
+  accentInk: { apca: 60, wcag: 4.5 },
+  // 色块上的正文级文字（≥ 16px）：WCAG 4.5 + APCA 45。饱和中等明度的底色（安全橙）上 APCA 会低估深色字，
+  // WCAG 会高估白字，两个都要过
+  onText: { apca: 45, wcag: 4.5 },
+  // 大字（标题、KPI 大数字）只看 APCA 标题线 45：WCAG 对明亮饱和色（安全橙）严重低估可读性
+  accentDisplay: { apca: 45, wcag: 0 },
+}
+
+// 大字用的强调色：原色够大字标准就用原色（保持设计），不够就退到 accent-ink（柠檬黄这类浅色强调色）
+const accentDisplay = (accent, accentInk, paper) => (passes(accent, paper, ROLE_FLOORS.accentDisplay) ? accent : accentInk)
+
+// 在 OKLab 里线性混合：t=0 得到 a，t=1 得到 b
+function mix(a, b, t) {
+  const A = rgbToOklab(parseHex(a))
+  const B = rgbToOklab(parseHex(b))
+  return toHex(oklabToRgb(A.map((v, i) => v + (B[i] - v) * t)))
+}
+
+const rgbTriplet = (hex) => parseHex(hex).map((c) => Math.round(c * 255)).join(',')
+
+const passes = (fg, bg, floor) => Math.abs(apca(fg, bg)) >= floor.apca && wcag(fg, bg) >= floor.wcag
+
+// 从 paper 往 ink 混，比例 t 起步；不达标就加大 t
+function inkRole(ink, paper, t, floor) {
+  for (let k = t; k <= 1.0001; k += 0.01) {
+    const c = mix(paper, ink, Math.min(k, 1))
+    if (!floor || passes(c, paper, floor)) return { hex: c, ratio: +Math.min(k, 1).toFixed(2), adjusted: k > t + 1e-9 }
+  }
+  return { hex: ink, ratio: 1, adjusted: true }
+}
+
+// 保持色相，调整明度直到能当文字用：浅底往暗调，深底往亮调
+function textSafeAccent(accent, paper, floor = ROLE_FLOORS.accentInk) {
+  if (passes(accent, paper, floor)) return { hex: accent, adjusted: false }
+  const { l, c, h } = hexToOklch(accent)
+  const dark = hexToOklch(paper).l < 0.5
+  for (let step = 1; step <= 200; step++) {
+    const L = dark ? l + step * 0.005 : l - step * 0.005
+    if (L <= 0 || L >= 1) break
+    const hex = oklchToHex({ l: L, c, h })
+    if (passes(hex, paper, floor)) return { hex, adjusted: true }
+  }
+  return { hex: dark ? '#ffffff' : '#000000', adjusted: true }
+}
+
+// 在 ink 和 paper 里选对比更强的那个当 accent 上的文字色
+function onColor(bg, candidates) {
+  return candidates.reduce((best, c) => (Math.abs(apca(c, bg)) > Math.abs(apca(best, bg)) ? c : best))
+}
+
+// 色块上的正文级文字（高亮块正文、标签）：设计指定的 accent-on 达到 ROLE_FLOORS.onText 就用它；
+// 不达标（安全橙、中等明度的品牌绿上的白字）换成达标的候选；都不达标取 WCAG 最高的
+function onText(bg, preferred, candidates) {
+  const floor = ROLE_FLOORS.onText
+  if (passes(preferred, bg, floor)) return preferred
+  return candidates.find((c) => passes(c, bg, floor)) || candidates.reduce((best, c) => (wcag(c, bg) > wcag(best, bg) ? c : best))
+}
+
+// 强调色小字既出现在纸色上，也出现在 paper-2 / 灰底卡片上：按两者里对比更低的那个底色来调
+const harderBg = (fg, bgs) => bgs.reduce((a, b) => (Math.abs(apca(fg, b)) < Math.abs(apca(fg, a)) ? b : a))
+
+function deriveMagazine(t) {
+  const roles = {
+    textBody: inkRole(t.ink, t.paper, 0.82, ROLE_FLOORS.textBody),
+    textSecondary: inkRole(t.ink, t.paper, 0.72, ROLE_FLOORS.textSecondary),
+    // 手调的 muted 达标就用它，否则从 paper→ink 派生一个达标的
+    textHelper: passes(t.muted, t.paper, ROLE_FLOORS.textHelper)
+      ? { hex: t.muted, adjusted: false }
+      : inkRole(t.ink, t.paper, 0.55, ROLE_FLOORS.textHelper),
+    lineStrong: inkRole(t.ink, t.paper, 0.45),
+    line: inkRole(t.ink, t.paper, 0.22),
+    lineSubtle: inkRole(t.ink, t.paper, 0.12),
+    accentInk: textSafeAccent(t.accent, harderBg(t.accent, [t.paper, t.paper2])),
+  }
+  return {
+    vars: {
+      '--paper': t.paper, '--paper-2': t.paper2, '--ink': t.ink, '--muted': t.muted,
+      '--accent': t.accent, '--accent-soft': t.accentSoft,
+      '--accent-on': onColor(t.accent, [t.ink, t.paper]),
+      '--accent-ink': roles.accentInk.hex,
+      '--accent-display': accentDisplay(t.accent, roles.accentInk.hex, t.paper),
+      // 反色块（以墨色为底）上的强调色文字：同色相提亮到可读，墨水经典的 #111 会变成浅灰
+      '--accent-ink-inverse': textSafeAccent(t.accent, t.ink).hex,
+      '--text-primary': t.ink,
+      '--text-body': roles.textBody.hex,
+      '--text-secondary': roles.textSecondary.hex,
+      '--text-helper': roles.textHelper.hex,
+      '--line-strong': roles.lineStrong.hex,
+      '--line': roles.line.hex,
+      '--line-subtle': roles.lineSubtle.hex,
+      '--ink-rgb': rgbTriplet(t.ink), '--paper-rgb': rgbTriplet(t.paper), '--accent-rgb': rgbTriplet(t.accent),
+      '--accent-on-rgb': rgbTriplet(onColor(t.accent, [t.ink, t.paper])),
+      '--accent-on-text': onText(t.accent, onColor(t.accent, [t.ink, t.paper]), [t.ink, t.paper, '#ffffff']),
+      '--accent-on-text-rgb': rgbTriplet(onText(t.accent, onColor(t.accent, [t.ink, t.paper]), [t.ink, t.paper, '#ffffff'])),
+    },
+    roles,
+  }
+}
+
+function deriveSwiss(n, t) {
+  const textBody = inkRole(n.ink, n.paper, 0.86, ROLE_FLOORS.textBody)
+  return {
+    vars: {
+      '--paper': n.paper, '--paper-2': n.grey1, '--ink': n.ink, '--muted': n.grey3,
+      '--grey-1': n.grey1, '--grey-2': n.grey2, '--grey-3': n.grey3,
+      '--accent': t.accent, '--accent-on': t.accentOn, '--accent-ink': t.accentInk,
+      '--accent-bright': t.accentBright, '--accent-deep': t.accentDeep,
+      '--accent-display': accentDisplay(t.accent, t.accentInk, n.paper),
+      // 墨色块上的强调色文字：优先用手调的 accent-bright（IKB 的亮蓝），不够再按规则提亮
+      '--accent-ink-inverse': textSafeAccent(t.accentBright, n.ink).hex,
+      '--accent-soft': mix(n.paper, t.accent, 0.14),
+      '--text-primary': n.ink,
+      '--text-body': textBody.hex,
+      '--text-secondary': n.textSecondary,
+      '--text-helper': n.grey3,
+      '--text-placeholder': n.textPlaceholder,
+      '--text-on-color': t.accentOn,
+      '--line-strong': n.textPlaceholder,
+      '--line': n.grey2,
+      '--line-subtle': n.borderSubtle,
+      '--ink-rgb': rgbTriplet(n.ink), '--paper-rgb': rgbTriplet(n.paper), '--accent-rgb': rgbTriplet(t.accent),
+      '--accent-on-rgb': rgbTriplet(t.accentOn),
+      '--accent-on-text': onText(t.accent, t.accentOn, [n.ink, '#ffffff']),
+      '--accent-on-text-rgb': rgbTriplet(onText(t.accent, t.accentOn, [n.ink, '#ffffff'])),
+    },
+    roles: { textBody },
+  }
+}
+
+// 对一套已派生的主题做可读性体检，返回不达标项（不抛错，由调用方决定是失败还是警告）
+function auditTheme(vars) {
+  const bg = vars['--paper']
+  const checks = [
+    ['--text-body', ROLE_FLOORS.textBody],
+    ['--text-secondary', ROLE_FLOORS.textSecondary],
+    ['--text-helper', ROLE_FLOORS.textHelper],
+    ['--accent-ink', ROLE_FLOORS.accentInk],
+  ]
+  const out = []
+  for (const [k, floor] of checks) {
+    const fg = vars[k]
+    const r = { token: k, fg, bg, wcag: +wcag(fg, bg).toFixed(2), apca: +apca(fg, bg).toFixed(1) }
+    if (!passes(fg, bg, floor)) out.push({ ...r, floor })
+  }
+  // 强调色小字也会放在 paper-2 / 灰底卡片上
+  const bg2 = vars['--paper-2']
+  if (bg2 && !passes(vars['--accent-ink'], bg2, ROLE_FLOORS.accentInk)) {
+    out.push({ token: '--accent-ink', fg: vars['--accent-ink'], bg: bg2, wcag: +wcag(vars['--accent-ink'], bg2).toFixed(2), apca: +apca(vars['--accent-ink'], bg2).toFixed(1), floor: ROLE_FLOORS.accentInk })
+  }
+  // 色块上的正文级文字
+  const onT = vars['--accent-on-text']
+  if (onT && !passes(onT, vars['--accent'], ROLE_FLOORS.onText)) {
+    out.push({ token: '--accent-on-text', fg: onT, bg: vars['--accent'], apca: +apca(onT, vars['--accent']).toFixed(1), wcag: +wcag(onT, vars['--accent']).toFixed(2), note: '色块上只放大号粗体' })
+  }
+  // accent 上的文字：大号粗体允许到 Lc 45（APCA 标题线），小字要 60
+  const onLc = Math.abs(apca(vars['--accent-on'], vars['--accent']))
+  if (onLc < 60) out.push({ token: '--accent-on', fg: vars['--accent-on'], bg: vars['--accent'], apca: +onLc.toFixed(1), wcag: +wcag(vars['--accent-on'], vars['--accent']).toFixed(2), note: onLc >= 45 ? '只能用于大号粗体' : '不可用于文字' })
+  return out
+}
+
+// 受约束的品牌主题：用户给任意品牌色，生成一套符合家族审美的主题。
+//
+// 不直接用原色。每个颜色槽位都有一个明度 / 彩度区间，区间来自现有精调色板的 OKLCH 实测
+// （见 docs/decisions.md D9），品牌色只贡献色相和「有多鲜艳」的倾向，最终落在区间里。
+// 生成后走和内置主题同一套派生与体检（lib/theme.mjs），不达标就不返回主题。
+
+
+const r3 = (x) => Math.round(x * 1000) / 1000
+
+// 由 tokens/palettes.json 的浅色杂志主题实测（node 脚本见 docs/decisions.md D9）
+const MAGAZINE_BANDS = {
+  paper: { l: [0.909, 0.963], c: [0.003, 0.036] },
+  paper2: { l: [0.864, 0.929], c: [0.007, 0.039] },
+  ink: { l: [0.145, 0.279], c: [0.002, 0.063] },
+  muted: { l: [0.499, 0.527], c: [0.015, 0.044] },
+  accent: { l: [0.4, 0.58], c: [0.04, 0.12] },
+  accentSoft: { l: [0.792, 0.905], c: [0.018, 0.063] },
+}
+
+// 瑞士风四个强调色实测彩度 0.181–0.207，下限放宽到 0.15；明度不限，但要留出能派生 bright / deep 的空间
+const SWISS_BANDS = { accent: { l: [0.35, 0.9], c: [0.15, 0.32] } }
+
+function place(slot, l, c, h, band, notes) {
+  const L = clamp(l, ...band.l)
+  const C = Math.min(clamp(c, ...band.c), maxChroma(L, h))
+  if (Math.abs(L - l) > 0.02) notes.push(`${slot} 明度 ${r3(l)} → ${r3(L)}`)
+  if (Math.abs(C - c) > 0.01) notes.push(`${slot} 彩度 ${r3(c)} → ${r3(C)}`)
+  return oklchToHex({ l: L, c: C, h })
+}
+
+// 纸张是「有一点颜色的米白」：现有 5 套里 4 套是暖米色（色相 80–90°），靛蓝瓷是几乎无彩的冷白。
+// 所以暖色系品牌把纸张色相往 85° 拉，其余色相只留极低彩度，避免红色品牌生成粉色纸
+function paperTone(b, neutral) {
+  if (neutral) return { h: 85, c: 0.007 }
+  const warm = b.h >= 20 && b.h <= 115
+  return warm ? { h: 85 + (b.h - 85) * 0.3, c: clamp(b.c * 0.05, 0.006, 0.014) } : { h: b.h, c: clamp(b.c * 0.02, 0.003, 0.006) }
+}
+
+function magazineFromBrand(brandHex, { name = '品牌主题' } = {}) {
+  const b = hexToOklch(brandHex)
+  const notes = []
+  const B = MAGAZINE_BANDS
+  // 品牌色很灰（c<0.02）时按墨水经典处理：色相没有意义，强调色就用墨色
+  const neutral = b.c < 0.02
+  const h = neutral ? 85 : b.h
+  const paper = paperTone(b, neutral)
+  const ink = place('ink', 0.22, neutral ? 0.004 : clamp(b.c * 0.35, 0.01, 0.06), h, B.ink, [])
+  if (neutral) notes.push('品牌色接近中性灰，强调色改用墨色（同墨水经典）')
+  const accent = neutral ? ink : place('accent', b.l, b.c, b.h, B.accent, notes)
+  const t = {
+    name, scheme: 'light',
+    paper: place('paper', 0.95, paper.c, paper.h, B.paper, []),
+    paper2: place('paper2', 0.91, paper.c + 0.006, paper.h, B.paper2, []),
+    ink,
+    muted: place('muted', 0.51, neutral ? 0.015 : clamp(b.c * 0.3, 0.015, 0.044), h, B.muted, []),
+    accent,
+  }
+  t.accentSoft = neutral ? place('accentSoft', 0.86, 0.018, paper.h, B.accentSoft, []) : place('accentSoft', 0.85, clamp(hexToOklch(accent).c * 0.35, 0.018, 0.063), b.h, B.accentSoft, [])
+  return finish('magazine', t, deriveMagazine(t), notes)
+}
+
+function swissFromBrand(brandHex, neutrals, { name = '品牌主题' } = {}) {
+  const b = hexToOklch(brandHex)
+  const notes = []
+  if (b.c < 0.04) {
+    return { ok: false, reason: `品牌色 ${brandHex} 几乎没有彩度，瑞士风需要一个高饱和强调色。可以改用杂志风，或从 logo 里另选一个颜色。` }
+  }
+  const accent = place('accent', b.l, b.c, b.h, SWISS_BANDS.accent, notes)
+  const a = hexToOklch(accent)
+  const t = {
+    name, accent,
+    accentBright: oklchToHex({ l: Math.min(a.l + 0.18, 0.92), c: a.c, h: a.h }),
+    accentDeep: oklchToHex({ l: Math.max(a.l - 0.15, 0.2), c: a.c, h: a.h }),
+  }
+  // accent-on / accent-ink 交给派生规则算，和内置主题一致
+  const probe = deriveSwiss(neutrals, { ...t, accentOn: neutrals.ink, accentInk: accent })
+  t.accentOn = pickOn(accent, neutrals)
+  // 强调色小字也放在灰底卡片（grey-1）上，按更暗的灰底来调
+  t.accentInk = textSafe(accent, neutrals.grey1)
+  return finish('swiss', t, deriveSwiss(neutrals, t), notes)
+}
+
+const pickOn = (accent, n) => (Math.abs(apca('#ffffff', accent)) > Math.abs(apca(n.ink, accent)) ? '#ffffff' : n.ink)
+const textSafe = (accent, paper) => textSafeAccent(accent, paper).hex
+
+function finish(family, theme, derived, notes) {
+  const problems = auditTheme(derived.vars)
+  const hard = problems.filter((p) => !p.note)
+  if (hard.length) return { ok: false, family, theme, reason: hard.map((p) => `${p.token} 对比度不足（APCA ${p.apca}）`).join('；') }
+  return { ok: true, family, theme, vars: derived.vars, notes, limits: problems.filter((p) => p.note).map((p) => `${p.token}：${p.note}`) }
+}
+
+// 预览用：把品牌色和生成结果并排给出
+const describe = (r) => (r.ok ? `${r.family} ✓ accent ${r.theme.accent} paper ${r.theme.paper || ''} ink ${r.theme.ink || ''}${r.notes.length ? '｜调整：' + r.notes.join('，') : ''}` : `✗ ${r.reason}`)
+
+const SWISS_NEUTRALS = {"paper":"#fafaf8","ink":"#0a0a0a","grey1":"#f0f0ee","grey2":"#d4d4d2","grey3":"#737373","textSecondary":"#525252","textPlaceholder":"#a3a3a3","borderSubtle":"#e0e0e0"}
+const args = process.argv.slice(2)
+const opt = (k, d) => (args.includes(k) ? args[args.indexOf(k) + 1] : d)
+if (args[0] !== 'brand' || !args[1]) {
+  console.error('用法：node scripts/gz-theme.mjs brand "#4D6BFE" [--family magazine|swiss] [--id brand]')
+  process.exit(1)
+}
+const family = opt('--family', 'magazine'), id = opt('--id', 'brand')
+const r = family === 'swiss' ? swissFromBrand(args[1], SWISS_NEUTRALS) : magazineFromBrand(args[1])
+if (!r.ok) { console.error('✗ ' + r.reason); process.exit(1) }
+const v = r.vars
+// 一行说清楚：强调色调了什么、小字和色块上的文字各用什么颜色、有什么限制
+const parts = [
+  r.notes.length ? r.notes.join('；') : `强调色保持 ${v['--accent']}`,
+  `小字强调色 ${v['--accent-ink']}`,
+  `色块上的文字 ${v['--accent-on-text']}${v['--accent-on-text'] !== v['--accent-on'] ? `（${v['--accent-on']} 只够大号粗体）` : ''}`,
+  ...r.limits.filter((l) => !l.startsWith('--accent-on：')),
+]
+console.log(`/* 品牌主题 ${args[1]} · ${family}：${parts.join('；')} */`)
+console.log(`[data-theme="${id}"]{${Object.entries(r.vars).map(([k, v]) => `${k}:${v}`).join(';')};color-scheme:light}`)
diff --git a/plugins/codex/plugins/hallmark/THIRD_PARTY_SOURCE.json b/plugins/codex/plugins/hallmark/THIRD_PARTY_SOURCE.json
index e48086ea..c4e87ebb 100644
--- a/plugins/codex/plugins/hallmark/THIRD_PARTY_SOURCE.json
+++ b/plugins/codex/plugins/hallmark/THIRD_PARTY_SOURCE.json
@@ -2,8 +2,8 @@
   "sourceId": "hallmark",
   "repo": "https://github.com/Nutlope/hallmark.git",
   "ref": "main",
-  "commit": "8f6969f8922caabde9de1784959eae11ddf68073",
+  "commit": "4f6a46c6dc325d40ab268c93e25c7b96676ebccd",
   "adapter": "claude-skill",
   "sourcePath": "skills/hallmark",
-  "syncedAt": "2026-10-29T15:25:46Z"
+  "syncedAt": "2026-10-30T16:00:00Z"
 }
diff --git a/plugins/codex/plugins/hallmark/skills/hallmark/scripts/refcheck.mjs b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/refcheck.mjs
index ff65eac9..c7b641dc 100644
--- a/plugins/codex/plugins/hallmark/skills/hallmark/scripts/refcheck.mjs
+++ b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/refcheck.mjs
@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-import { readFileSync, readdirSync, statSync, existsSync, mkdtempSync, copyFileSync, rmSync } from 'node:fs';
+import { readFileSync, readdirSync, statSync, existsSync, mkdtempSync, copyFileSync, rmSync, mkdirSync, writeFileSync, symlinkSync } from 'node:fs';
 import { tmpdir } from 'node:os';
 import { join, dirname, relative, basename, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -284,6 +284,23 @@ for (const target of clean) {
 }
 
 const FIX = join(ROOT, 'scripts', 'fixtures');
+{
+  const tmp = mkdtempSync(join(tmpdir(), 'hallmark-links-'));
+  try {
+    const project = join(tmp, 'project');
+    const shared = join(tmp, 'shared');
+    mkdirSync(project);
+    mkdirSync(shared);
+    writeFileSync(join(shared, 'style.css'), 'p { color: var(--color-text); }');
+    symlinkSync(shared, join(project, 'a-shared'), process.platform === 'win32' ? 'junction' : 'dir');
+    symlinkSync(shared, join(project, 'b-shared'), process.platform === 'win32' ? 'junction' : 'dir');
+    symlinkSync(project, join(project, 'parent'), process.platform === 'win32' ? 'junction' : 'dir');
+    const run = spawnSync(process.execPath, [join(ROOT, 'scripts', 'sloplint.mjs'), project, '--scope', 'component', '--json'], { encoding: 'utf8', timeout: 5000 });
+    let report = null;
+    try { report = JSON.parse(run.stdout); } catch {}
+    if (!report || report.summary.files !== 1) add('error', SKILL, 1, 'fixture', 'directory symlink cycles must terminate and each real file must be linted once');
+  } finally { rmSync(tmp, { recursive: true, force: true }); }
+}
 const lintJson = (t) => { const r = spawnSync(process.execPath, [join(ROOT, 'scripts', 'sloplint.mjs'), t, '--json'], { encoding: 'utf8' }); try { return JSON.parse(r.stdout); } catch { return null; } };
 const gatesOf = (j) => new Set(j.findings.map((x) => String(x.gate)));
 const expectations = [
diff --git a/plugins/codex/plugins/hallmark/skills/hallmark/scripts/sloplint.mjs b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/sloplint.mjs
index 72be1622..1b6ab1dd 100644
--- a/plugins/codex/plugins/hallmark/skills/hallmark/scripts/sloplint.mjs
+++ b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/sloplint.mjs
@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 /* sloplint: Hallmark's mechanical gate checker. Zero dependencies, Node 18+. Gate ids and tiers: references/gates.md. */
 import { createHash } from 'node:crypto';
-import { readFileSync, readdirSync, statSync, existsSync, writeFileSync, mkdirSync } from 'node:fs';
+import { readFileSync, readdirSync, statSync, realpathSync, existsSync, writeFileSync, mkdirSync } from 'node:fs';
 import { join, extname, dirname, basename, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
@@ -46,16 +46,18 @@ function collectFiles(paths) {
   const seen = new Set();
   const visit = (p, top) => {
     const abs = resolve(p);
-    if (seen.has(abs)) return;
     let st;
-    try { st = statSync(abs); } catch { console.error(`sloplint: cannot read ${p}`); if (top) process.exit(2); return; }
+    let real;
+    try { st = statSync(abs); real = realpathSync(abs); } catch { console.error(`sloplint: cannot read ${p}`); if (top) process.exit(2); return; }
+    if (seen.has(real)) return;
+    seen.add(real);
     if (st.isDirectory()) {
       const base = basename(abs);
       if (base === 'node_modules' || base.startsWith('.') || (!top && BUILD_DIRS.has(base))) return;
       for (const e of readdirSync(abs)) visit(join(abs, e), false);
     } else {
       const ext = extname(abs).toLowerCase();
-      if (ext === '.css' || DOC_EXT.has(ext)) { seen.add(abs); files.push(abs); }
+      if (ext === '.css' || DOC_EXT.has(ext)) files.push(abs);
     }
   };
   for (const p of paths) visit(p, true);
diff --git a/plugins/codex/plugins/hallmark/skills/hallmark/scripts/theme.mjs b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/theme.mjs
index 912a0693..35f4aa2c 100644
--- a/plugins/codex/plugins/hallmark/skills/hallmark/scripts/theme.mjs
+++ b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/theme.mjs
@@ -36,7 +36,7 @@ function usage() {
 }
 
 function parseHeader(src, file) {
-  const m = /^---\n([\s\S]*?)\n---/.exec(src);
+  const m = /^---\r?\n([\s\S]*?)\r?\n---/.exec(src);
   if (!m) throw new Error(`${file}: no header block`);
   const h = {};
   for (const line of m[1].split('\n')) {
diff --git a/plugins/codex/plugins/hallmark/skills/hallmark/scripts/theme.test.mjs b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/theme.test.mjs
new file mode 100644
index 00000000..53e6fcc4
--- /dev/null
+++ b/plugins/codex/plugins/hallmark/skills/hallmark/scripts/theme.test.mjs
@@ -0,0 +1,25 @@
+import assert from 'node:assert/strict';
+import { spawnSync } from 'node:child_process';
+import { mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs';
+import { tmpdir } from 'node:os';
+import { join } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import test from 'node:test';
+
+test('validate accepts a theme with either LF or CRLF line endings', () => {
+  const source = readFileSync(new URL('../references/themes/hum.md', import.meta.url), 'utf8').replace(/\r\n/g, '\n');
+  const cli = fileURLToPath(new URL('./theme.mjs', import.meta.url));
+  const dir = mkdtempSync(join(tmpdir(), 'hallmark-theme-'));
+  try {
+    for (const [name, text] of [['lf', source], ['crlf', source.replace(/\n/g, '\r\n')]]) {
+      assert.ok(Buffer.byteLength(text) < 8000, 'fixture must stay below the independent size limit');
+      const file = join(dir, `${name}.md`);
+      writeFileSync(file, text);
+      const result = spawnSync(process.execPath, [cli, 'validate', file], { encoding: 'utf8' });
+      assert.equal(result.status, 0, `${name}: ${result.stdout}${result.stderr}`);
+      assert.match(result.stdout, /: ok \(Hum,/);
+    }
+  } finally {
+    rmSync(dir, { recursive: true, force: true });
+  }
+});
diff --git a/plugins/codex/plugins/mcp-playwright/MCP_SOURCE.json b/plugins/codex/plugins/mcp-playwright/MCP_SOURCE.json
index 79d0fcc2..ef82b3f9 100644
--- a/plugins/codex/plugins/mcp-playwright/MCP_SOURCE.json
+++ b/plugins/codex/plugins/mcp-playwright/MCP_SOURCE.json
@@ -3,5 +3,5 @@
   "name": "playwright浏览器自动化操作",
   "version": "20260605",
   "keySource": "none",
-  "syncedAt": "2026-10-29T16:03:34Z"
+  "syncedAt": "2026-10-30T16:02:58Z"
 }
diff --git a/plugins/codex/plugins/next-skills/THIRD_PARTY_SOURCE.json b/plugins/codex/plugins/next-skills/THIRD_PARTY_SOURCE.json
index 32968431..dae38169 100644
--- a/plugins/codex/plugins/next-skills/THIRD_PARTY_SOURCE.json
+++ b/plugins/codex/plugins/next-skills/THIRD_PARTY_SOURCE.json
@@ -2,8 +2,8 @@
   "sourceId": "next-skills",
   "repo": "https://github.com/vercel/next.js.git",
   "ref": "canary",
-  "commit": "79107ebd94e53c69865c1a49ac734ba8004491ba",
+  "commit": "7571895249a22086367a12ddec90fae97bac067d",
   "adapter": "skill-collection",
   "sourcePath": "skills",
-  "syncedAt": "2026-10-29T16:00:00Z"
+  "syncedAt": "2026-10-30T16:00:00Z"
 }
diff --git a/plugins/codex/plugins/ppt-master/THIRD_PARTY_SOURCE.json b/plugins/codex/plugins/ppt-master/THIRD_PARTY_SOURCE.json
index 3e812b9f..79a60eae 100644
--- a/plugins/codex/plugins/ppt-master/THIRD_PARTY_SOURCE.json
+++ b/plugins/codex/plugins/ppt-master/THIRD_PARTY_SOURCE.json
@@ -2,8 +2,8 @@
   "sourceId": "ppt-master",
   "repo": "https://github.com/hugohe3/ppt-master.git",
   "ref": "main",
-  "commit": "15baa7c570f12c78cd9ac6ead897724571e32e87",
+  "commit": "5e8856be0da8e6bc85c4aa28acc614478f7b7137",
   "adapter": "claude-skill",
   "sourcePath": "skills/ppt-master",
-  "syncedAt": "2026-10-29T16:00:00Z"
+  "syncedAt": "2026-10-30T16:00:00Z"
 }
diff --git a/plugins/codex/plugins/ppt-master/skills/ppt-master/SKILL.md b/plugins/codex/plugins/ppt-master/skills/ppt-master/SKILL.md
index fd0f31fa..36853fea 100644
--- a/plugins/codex/plugins/ppt-master/skills/ppt-master/SKILL.md
+++ b/plugins/codex/plugins/ppt-master/skills/ppt-master/SKILL.md
@@ -2,7 +2,7 @@
 name: ppt-master
 description: "多格式源文档到高质量 SVG 页面再导出 PPTX 的多阶段演示文稿生成工作流。"
 metadata:
-  version: "6.7.3"
+  version: "6.8.0"
   copyright: "Copyright (c) 2025-2026 Hugo He"
   license: "MIT"
   official_repository: "https://github.com/hugohe3/ppt-master"
diff --git a/plugins/codex/plugins/ppt-master/skills/ppt-master/scripts/project_utils.py b/plugins/codex/plugins/ppt-master/skills/ppt-master/scripts/project_utils.py
index 07116248..098979c6 100644
--- a/plugins/codex/plugins/ppt-master/skills/ppt-master/scripts/project_utils.py
+++ b/plugins/codex/plugins/ppt-master/skills/ppt-master/scripts/project_utils.py
@@ -8,6 +8,7 @@ reusable by other tools.
 
 import argparse
 import re
+import xml.etree.ElementTree as ET
 from pathlib import Path
 from datetime import datetime
 from typing import Dict, List, Optional, Tuple
@@ -516,12 +517,14 @@ def _outline_hyperlink_lines(design_text: str) -> Dict[int, str | None]:
 def _svg_hyperlink_targets(svg_file: Path) -> Tuple[set, set] | None:
     """Return (same-deck slide numbers, external hrefs) of an SVG's anchors, or None if unreadable."""
     try:
-        text = svg_file.read_text(encoding='utf-8')
-    except OSError:
+        root = ET.parse(svg_file).getroot()
+    except (OSError, ET.ParseError):
         return None
     slides, externals = set(), set()
-    for match in re.finditer(r'<a\b[^>]*?\s(?:xlink:)?href=["\']([^"\']*)["\']', text):
-        href = match.group(1).strip()
+    for anchor in root.iter():
+        if anchor.tag not in ('a', '{http://www.w3.org/2000/svg}a'):
+            continue
+        href = anchor.get('href', anchor.get('{http://www.w3.org/1999/xlink}href', '')).strip()
         jump = _SLIDE_JUMP_RE.fullmatch(href)
         if jump:
             slides.add(int(jump.group(1)))
diff --git a/plugins/codex/plugins/ppt-master/skills/ppt-master/scripts/tests/test_outline_hyperlinks.py b/plugins/codex/plugins/ppt-master/skills/ppt-master/scripts/tests/test_outline_hyperlinks.py
new file mode 100644
index 00000000..e66b8089
--- /dev/null
+++ b/plugins/codex/plugins/ppt-master/skills/ppt-master/scripts/tests/test_outline_hyperlinks.py
@@ -0,0 +1,30 @@
+import sys
+import tempfile
+import unittest
+from pathlib import Path
+
+sys.path.insert(0, str(Path(__file__).resolve().parents[1]))
+
+from project_utils import validate_outline_hyperlinks
+
+
+class OutlineHyperlinksTests(unittest.TestCase):
+    def test_xml_attributes_are_decoded_exactly_once(self):
+        with tempfile.TemporaryDirectory() as directory:
+            project = Path(directory)
+            (project / 'svg_output').mkdir()
+            (project / 'design_spec.md').write_text(
+                '## IX. Content Outline\n### Slide 07\n'
+                '- Hyperlinks: https://example.com/?a=1&b=2; '
+                'https://example.com/?literal=&amp;value; #slide-2\n',
+                encoding='utf-8',
+            )
+            (project / 'svg_output' / '07_links.svg').write_text(
+                '<svg xmlns="http://www.w3.org/2000/svg" '
+                'xmlns:link="http://www.w3.org/1999/xlink">'
+                '<a href="https://example.com/?a=1&amp;b=2"><text>One</text></a>'
+                '<a link:href="https://example.com/?literal=&amp;amp;value"/>'
+                '<a href="&#35;slide-2"/></svg>',
+                encoding='utf-8',
+            )
+            self.assertEqual(validate_outline_hyperlinks(project), [])
diff --git a/plugins/codex/plugins/shadcn/THIRD_PARTY_SOURCE.json b/plugins/codex/plugins/shadcn/THIRD_PARTY_SOURCE.json
index 3be52cd3..8a7748de 100644
--- a/plugins/codex/plugins/shadcn/THIRD_PARTY_SOURCE.json
+++ b/plugins/codex/plugins/shadcn/THIRD_PARTY_SOURCE.json
@@ -2,8 +2,8 @@
   "sourceId": "shadcn",
   "repo": "https://github.com/shadcn-ui/ui.git",
   "ref": "main",
-  "commit": "96da9cc7f1aa10580a3741664e2a77c721206c00",
+  "commit": "b8d7baa15b1dca5716f13153e63795fc3d741f6b",
   "adapter": "claude-skill",
   "sourcePath": "skills/shadcn",
-  "syncedAt": "2026-10-28T01:57:49Z"
+  "syncedAt": "2026-10-30T16:00:00Z"
 }