diff --git a/FIX-BRIEF.md b/FIX-BRIEF.md
new file mode 100644
index 0000000..eeb379f
--- /dev/null
+++ b/FIX-BRIEF.md
@@ -0,0 +1,140 @@
+# Fix Brief · html-ppt v2
+
+User feedback: current skill is weak. Fix these four problems HARD. Do not hand-wave.
+
+Skill lives at `~/clawspace/html-ppt-skill`. Git is already initialized, SKILL.md + assets already exist. This is an **iteration**, keep what works, replace what's weak.
+
+## Problem 1 — Theme showcase shows identical pages
+
+Root cause: `templates/theme-showcase.html` builds 24 slides but they all inherit one `<link id="theme-link">`. When you arrow-through, every slide looks the same.
+
+Fix: Each slide in theme-showcase must render **its own theme in isolation**. Do this with an **`<iframe srcdoc>` per slide**, where the iframe loads `assets/base.css` + the specific theme CSS + a small demo content block. That way slide N = theme N, guaranteed visually different. Rebuild the showcase so pressing → actually shows a new look each time. Do the same for any other "all themes in one deck" pattern.
+
+Verify with headless chrome: render slide 1, slide 5, slide 12, slide 20 to PNG and confirm they look different.
+
+## Problem 2 — Did not absorb user's existing deck styles
+
+**REQUIRED**: deeply survey these decks, extract 6–10 distinct "full deck looks" and turn each into a named **full-deck template** under `templates/full-decks/<name>/index.html` with scoped CSS + demo content:
+
+Sources (read-only, DO NOT copy content, extract style):
+
+- `/Volumes/luluDrive/作品素材/视频/20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html`
+- `/Volumes/luluDrive/作品素材/视频/20260405-Karpathy-知识库/20260405 架构图v2.html`
+- `/Volumes/luluDrive/作品素材/视频/20260406-obsidian-claude/slides.html`
+- `/Volumes/luluDrive/作品素材/视频/20260409-升级版知识库/presentation.html`
+- `/Volumes/luluDrive/作品素材/视频/20260409-升级版知识库/小红书图文/v2-白底版/html源文件/slide_01_cover.html` (+ others in same dir)
+- `/Volumes/luluDrive/作品素材/视频/20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html`
+- `/Volumes/luluDrive/作品素材/视频/20260412-obsidian-skills/html/xhs-obsidian-skills.html`
+- `/Volumes/luluDrive/作品素材/视频/20260413-graphify/ppt/graphify.html`
+- `/Volumes/luluDrive/作品素材/视频/20260413-graphify/小红书图文/*.html`
+- `/Volumes/luluDrive/作品素材/视频/20260414-hermes-agent/ppt/hermes-vs-openclaw.html`
+- `/Volumes/luluDrive/作品素材/视频/20260414-hermes-agent/ppt/hermes-record.html`
+- `/Volumes/luluDrive/作品素材/视频/20260414-hermes-agent/小红书图文/*.html`
+
+For each, extract: background treatment, gradient usage, font pairing, card style, accent color, hero typography scale, footer pattern. Turn the strongest 8+ into **full-deck templates**, each a complete multi-slide deck with cover / section / content / code / chart / CTA / thanks. Give each a distinctive name and register it in `references/full-decks.md`. Suggested names (rename as you see fit after surveying):
+
+- `xhs-white-editorial` — 小红书白底杂志风 (from 20260409 v2-白底版 + 20260412 xhs)
+- `graphify-dark-graph` — 暗底 + 力导向知识图谱 (from 20260413 graphify)
+- `knowledge-arch-blueprint` — 蓝图/架构图风 (from Karpathy 架构图v2)
+- `hermes-cyber-terminal` — 终端/cyber (from hermes-record + hermes-vs-openclaw)
+- `obsidian-claude-gradient` — 紫色渐变卡 (from 20260406)
+- `testing-safety-alert` — 红/琥珀警示风 (from 20260412-AI测试与安全)
+- `xhs-pastel-card` — 柔和马卡龙图文 (from several xhs decks)
+- `dir-key-nav-minimal` — 方向键极简 (from Karpathy 方向键版)
+
+Each full-deck template must be a SELF-CONTAINED folder under `templates/full-decks/<name>/` with `index.html`, `style.css` (scoped with `.tpl-<name>` prefix so two templates don't collide), optional `script.js`, and a README snippet describing the look.
+
+## Problem 3 — Animations are too thin, all single-element
+
+Current animations are mostly one-element CSS transitions. User wants **multi-element, particle, explosion, knowledge-graph** energy. Add a new layer:
+
+Create `assets/animations/fx/` with each effect as a self-contained JS module (each has a `init(el, opts)` function). Each effect must work by adding `data-fx="<name>"` to a container. Runtime auto-inits on slide enter.
+
+Mandatory effect set (all must be implemented, not stubs):
+
+- **particle-burst** — canvas particles exploding from a point
+- **confetti-cannon** — multi-directional confetti (colored rects + rotation)
+- **firework** — rocket + explosion particles, loops
+- **starfield** — scrolling starfield background
+- **matrix-rain** — Matrix-style falling chars
+- **knowledge-graph** — canvas force-directed graph (20-40 nodes, labeled edges, animated physics)
+- **neural-net** — feedforward network with pulse signals traveling along edges
+- **constellation** — points connected by lines when close (classic particles.js vibe)
+- **orbit-ring** — concentric orbital dots, each at different speed
+- **galaxy-swirl** — spiral particle galaxy
+- **word-cascade** — words from a list rain down + pile up
+- **letter-explode** — heading letters fly in from random directions
+- **chain-react** — row of cards trigger each other domino-style
+- **magnetic-field** — particles following an invisible magnetic curve
+- **data-stream** — rows of scrolling numeric/hex data (cyber feel)
+- **gradient-blob** — big blurred blobs morphing with SVG feTurbulence
+- **sparkle-trail** — cursor trail of sparkles (slide-scoped)
+- **shockwave** — expanding ring on slide enter
+- **typewriter-multi** — multi-line typewriter with blinking cursors
+- **counter-explosion** — stat counter that then bursts particles when it finishes
+
+Plus keep the existing CSS anim set. Document each in `references/animations.md` with name + use case + how to enable (`data-fx="..."`).
+
+Create `templates/animation-showcase.html` v2: one slide per effect (CSS + FX), each clearly labeled, auto-plays on enter, with a replay button.
+
+## Problem 4 — Not enough themes / templates overall
+
+Add these additional themes (each a CSS token file + verifiable distinct look):
+
+- `cyberpunk-neon` — 黑底 + 霓虹粉/青/黄
+- `y2k-chrome` — Y2K 镜面 + 渐变
+- `retro-tv` — CRT 扫描线 + 暖黄
+- `japanese-minimal` — 和风留白 + 朱红
+- `vaporwave` — 蒸汽波粉紫
+- `midcentury` — 中世纪现代 (mustard/teal/cream)
+- `corporate-clean` — 企业 PPT 商务
+- `academic-paper` — 学术白皮书 (Computer Modern)
+- `news-broadcast` — 红白新闻图
+- `pitch-deck-vc` — YC 风格投资路演
+- `magazine-bold` — 杂志大字封面
+- `engineering-whiteprint` — 白底蓝线工程图
+
+Plus: add **full-deck templates** (beyond the 8 extracted above) for common scenarios:
+
+- `pitch-deck` (problem → solution → market → traction → team → ask)
+- `product-launch`
+- `tech-sharing` (技术分享)
+- `weekly-report`
+- `xhs-post` (9-slide 小红书图文, 3:4)
+- `course-module` (教学模块)
+
+Each in `templates/full-decks/<name>/` with scoped CSS.
+
+## Integration
+
+- Update `SKILL.md` to list every theme, full-deck template, and fx animation with one-liners and trigger intent. Keep SKILL.md tight (<250 lines); long lists go in `references/`.
+- Update `references/themes.md`, `references/animations.md`, and add `references/full-decks.md`.
+- Update `templates/theme-showcase.html`, `templates/animation-showcase.html`, `templates/layout-showcase.html` to actually demonstrate the richer set. Theme showcase MUST use iframe isolation.
+- Add `templates/full-decks-index.html` — a gallery deck where each slide is a live thumbnail (iframe) of a full-deck template so user can browse them.
+- Verify with headless Chrome: render 6 representative slides from theme-showcase, 6 from animation-showcase (as PNGs under `scripts/verify-output/`) and confirm they look visibly different. Include this check in the final commit.
+
+## Process
+
+1. FIRST read the existing skill and figure out what to keep vs replace.
+2. Survey the source decks (read only a handful of bytes per file — use head/grep). Do not try to load all of them at once.
+3. Implement Problem 1 fix (iframe isolation) first and verify with headless chrome before moving on.
+4. Then Problem 3 (FX animations) — each as its own file under `assets/animations/fx/<name>.js`. Write a tiny `fx-runtime.js` that scans `[data-fx]` on slide enter and calls the right `init`.
+5. Then Problem 2 (full-deck templates extracted from videos) and Problem 4 (more themes + scenario templates).
+6. Update docs + showcases.
+7. Verify: run `scripts/render.sh` against the three showcases, dump PNGs, eyeball them (save to `scripts/verify-output/`).
+8. Commit as author `lewis <sudolewis@gmail.com>` with message `fix: v2 — iframe theme isolation, 8 full-deck templates from source decks, 20 FX animations (particles/graph/fireworks), +12 themes`.
+9. DO NOT push — orchestrator will push.
+
+When COMPLETELY finished, run:
+
+```
+openclaw system event --text "Done: html-ppt v2 — $(ls templates/full-decks 2>/dev/null | wc -l | tr -d ' ') full decks, $(ls assets/themes | wc -l | tr -d ' ') themes, $(ls assets/animations/fx 2>/dev/null | wc -l | tr -d ' ') FX" --mode now
+```
+
+## Rules
+
+- Be a senior designer. If something looks boring, fix it.
+- Scoped CSS per full-deck template (`.tpl-<name> …`) so loading many in one page doesn't conflict.
+- Pure static, CDN deps ok (chart.js, highlight.js, canvas-confetti optional but prefer hand-rolled canvas for the FX so they're learnable).
+- Chinese + English both render cleanly (Noto Sans SC / Noto Serif SC imported in `assets/fonts.css`).
+- Make the theme-showcase actually differ slide by slide. This is the one test I will run first.
diff --git a/SKILL.md b/SKILL.md
index 2073c48..1b04fdc 100644
--- a/SKILL.md
+++ b/SKILL.md
@@ -10,11 +10,14 @@ look. One layout file = one page type. One animation class = one entry effect.
 All pages share a token-based design system in `assets/base.css`.
 
 Tell the user this skill gives them:
-- **24 themes** (`assets/themes/*.css`) from minimal-white to aurora
+- **36 themes** (`assets/themes/*.css`) — 24 v1 + 12 v2 (cyberpunk-neon, y2k-chrome, retro-tv, japanese-minimal, vaporwave, midcentury, corporate-clean, academic-paper, news-broadcast, pitch-deck-vc, magazine-bold, engineering-whiteprint)
+- **14 full-deck templates** (`templates/full-decks/<name>/`) — complete multi-slide decks with scoped `.tpl-<name>` CSS. 8 extracted from real-world decks, 6 generic scenario scaffolds (pitch-deck, product-launch, tech-sharing, weekly-report, xhs-post 3:4, course-module).
 - **30 layouts** (`templates/single-page/*.html`) with realistic demo data
-- **25 named animations** (`assets/animations/animations.css`) applied via `data-anim`
+- **25 named CSS animations** (`assets/animations/animations.css`) via `data-anim`
+- **20 canvas FX animations** (`assets/animations/fx/*.js`) via `data-fx` — particle-burst, confetti-cannon, firework, starfield, matrix-rain, knowledge-graph (force-directed), neural-net (pulses), constellation, orbit-ring, galaxy-swirl, word-cascade, letter-explode, chain-react, magnetic-field, data-stream, gradient-blob, sparkle-trail, shockwave, typewriter-multi, counter-explosion
 - **Keyboard runtime** (`assets/runtime.js`) — arrows, T (theme), A (anim), F/S/O
-- **Showcase decks** for theme / layout / animation catalogs
+- **FX runtime** (`assets/animations/fx-runtime.js`) — auto-inits `[data-fx]` on slide enter, cleans up on leave
+- **Showcase decks** for themes / layouts / animations / full-decks gallery
 - **Headless Chrome render script** for PNG export
 
 ## When to use
@@ -39,7 +42,13 @@ text/notes into a presentable deck. Prefer this over building from scratch.
    Catalog in [references/layouts.md](references/layouts.md).
 4. **Add animations.** Put `data-anim="fade-up"` (or `class="anim-fade-up"`) on
    any element. On `<ul>`/grids, use `anim-stagger-list` for sequenced reveals.
+   For canvas FX, use `<div data-fx="knowledge-graph">...</div>` and include
+   `<script src="../assets/animations/fx-runtime.js"></script>`.
    Catalog in [references/animations.md](references/animations.md).
+5. **Use a full-deck template.** Copy `templates/full-decks/<name>/` into
+   `examples/my-talk/` as a starting point. Each folder is self-contained with
+   scoped CSS. Catalog in [references/full-decks.md](references/full-decks.md)
+   and gallery at `templates/full-decks-index.html`.
 5. **Render to PNG.**
    ```bash
    ./scripts/render.sh templates/theme-showcase.html       # one shot
@@ -73,9 +82,10 @@ Chinese + English deck, and how to export.
 
 ## Catalogs (load when needed)
 
-- [references/themes.md](references/themes.md) — all 24 themes with when-to-use.
+- [references/themes.md](references/themes.md) — all 36 themes with when-to-use.
 - [references/layouts.md](references/layouts.md) — all 30 layout types.
-- [references/animations.md](references/animations.md) — all 25 animations.
+- [references/animations.md](references/animations.md) — 25 CSS + 20 canvas FX animations.
+- [references/full-decks.md](references/full-decks.md) — all 14 full-deck templates.
 - [references/authoring-guide.md](references/authoring-guide.md) — full workflow.
 
 ## File structure
@@ -88,13 +98,18 @@ html-ppt/
 │   ├── base.css             (tokens + primitives — do not edit per deck)
 │   ├── fonts.css            (webfont imports)
 │   ├── runtime.js           (keyboard + presenter + overview + theme cycle)
-│   ├── themes/*.css         (24 token overrides, one per theme)
-│   └── animations/animations.css (25 named entry animations)
+│   ├── themes/*.css         (36 token overrides, one per theme)
+│   └── animations/
+│       ├── animations.css   (25 named CSS entry animations)
+│       ├── fx-runtime.js    (auto-init [data-fx] on slide enter)
+│       └── fx/*.js          (20 canvas FX modules: particles/graph/fireworks…)
 ├── templates/
 │   ├── deck.html                  (minimal 6-slide starter)
-│   ├── theme-showcase.html        (24 slides, one per theme)
+│   ├── theme-showcase.html        (36 slides, iframe-isolated per theme)
 │   ├── layout-showcase.html       (iframe tour of all 30 layouts)
-│   ├── animation-showcase.html    (27 slides, one per animation)
+│   ├── animation-showcase.html    (20 FX + 27 CSS animation slides)
+│   ├── full-decks-index.html      (gallery of all 14 full-deck templates)
+│   ├── full-decks/<name>/         (14 scoped multi-slide deck templates)
 │   └── single-page/*.html         (30 layout files with demo data)
 ├── scripts/
 │   ├── new-deck.sh                (scaffold a deck from deck.html)
diff --git a/assets/animations/fx-runtime.js b/assets/animations/fx-runtime.js
new file mode 100644
index 0000000..2c5f3c9
--- /dev/null
+++ b/assets/animations/fx-runtime.js
@@ -0,0 +1,99 @@
+/* html-ppt :: fx-runtime.js
+ * Canvas FX autoloader + lifecycle manager.
+ * - Dynamically loads all fx modules listed in FX_LIST
+ * - Initializes [data-fx] elements when their slide becomes active
+ * - Calls handle.stop() when the slide leaves
+ */
+(function(){
+  'use strict';
+
+  const FX_LIST = [
+    '_util',
+    'particle-burst','confetti-cannon','firework','starfield','matrix-rain',
+    'knowledge-graph','neural-net','constellation','orbit-ring','galaxy-swirl',
+    'word-cascade','letter-explode','chain-react','magnetic-field','data-stream',
+    'gradient-blob','sparkle-trail','shockwave','typewriter-multi','counter-explosion'
+  ];
+
+  // Resolve base path of this script so it works from any page location.
+  const myScript = document.currentScript || (function(){
+    const all = document.getElementsByTagName('script');
+    for (const s of all){ if (s.src && s.src.indexOf('fx-runtime.js')>-1) return s; }
+    return null;
+  })();
+  const base = myScript ? myScript.src.replace(/fx-runtime\.js.*$/, 'fx/') : 'assets/animations/fx/';
+
+  let loaded = 0;
+  const total = FX_LIST.length;
+  const ready = new Promise((resolve) => {
+    if (!total) return resolve();
+    FX_LIST.forEach((name) => {
+      const s = document.createElement('script');
+      s.src = base + name + '.js';
+      s.async = false;
+      s.onload = s.onerror = () => { if (++loaded >= total) resolve(); };
+      document.head.appendChild(s);
+    });
+  });
+
+  window.__hpxActive = window.__hpxActive || new Map();
+
+  function initFxIn(root){
+    if (!window.HPX) return;
+    const els = root.querySelectorAll('[data-fx]');
+    els.forEach((el) => {
+      if (window.__hpxActive.has(el)) return;
+      const name = el.getAttribute('data-fx');
+      const fn = window.HPX[name];
+      if (typeof fn !== 'function') return;
+      try {
+        const handle = fn(el, {}) || { stop(){} };
+        window.__hpxActive.set(el, handle);
+      } catch(e){ console.warn('[hpx-fx]', name, e); }
+    });
+  }
+
+  function stopFxIn(root){
+    const els = root.querySelectorAll('[data-fx]');
+    els.forEach((el) => {
+      const h = window.__hpxActive.get(el);
+      if (h && typeof h.stop === 'function'){
+        try{ h.stop(); }catch(e){}
+      }
+      window.__hpxActive.delete(el);
+    });
+  }
+
+  function reinitFxIn(root){
+    stopFxIn(root);
+    initFxIn(root);
+  }
+  window.__hpxReinit = reinitFxIn;
+
+  function boot(){
+    ready.then(() => {
+      const active = document.querySelector('.slide.is-active') || document.querySelector('.slide');
+      if (active) initFxIn(active);
+
+      // Watch all slides for class changes
+      const slides = document.querySelectorAll('.slide');
+      slides.forEach((sl) => {
+        const mo = new MutationObserver((muts) => {
+          for (const m of muts){
+            if (m.attributeName === 'class'){
+              if (sl.classList.contains('is-active')) initFxIn(sl);
+              else stopFxIn(sl);
+            }
+          }
+        });
+        mo.observe(sl, { attributes: true, attributeFilter: ['class'] });
+      });
+    });
+  }
+
+  if (document.readyState === 'loading'){
+    document.addEventListener('DOMContentLoaded', boot);
+  } else {
+    boot();
+  }
+})();
diff --git a/assets/animations/fx/_util.js b/assets/animations/fx/_util.js
new file mode 100644
index 0000000..8abd11f
--- /dev/null
+++ b/assets/animations/fx/_util.js
@@ -0,0 +1,63 @@
+/* html-ppt fx :: shared helpers */
+(function(){
+  window.HPX = window.HPX || {};
+  const U = window.HPX._u = {};
+
+  U.css = (el, name, fb) => {
+    const v = getComputedStyle(el).getPropertyValue(name).trim();
+    return v || fb;
+  };
+
+  U.accent = (el, fb) => U.css(el, '--accent', fb || '#7c5cff');
+  U.accent2 = (el, fb) => U.css(el, '--accent-2', fb || '#22d3ee');
+  U.text = (el, fb) => U.css(el, '--text-1', fb || '#eaeaf2');
+
+  U.palette = (el) => [
+    U.accent(el, '#7c5cff'),
+    U.accent2(el, '#22d3ee'),
+    U.css(el, '--ok', '#22c55e'),
+    U.css(el, '--warn', '#f59e0b'),
+    U.css(el, '--danger', '#ef4444'),
+  ];
+
+  U.canvas = (el) => {
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const c = document.createElement('canvas');
+    c.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;';
+    el.appendChild(c);
+    const ctx = c.getContext('2d');
+    let w = 0, h = 0, dpr = Math.max(1, Math.min(2, window.devicePixelRatio||1));
+    const fit = () => {
+      const r = el.getBoundingClientRect();
+      w = Math.max(1, r.width|0);
+      h = Math.max(1, r.height|0);
+      c.width = (w*dpr)|0;
+      c.height = (h*dpr)|0;
+      ctx.setTransform(dpr,0,0,dpr,0,0);
+    };
+    fit();
+    const ro = new ResizeObserver(fit);
+    ro.observe(el);
+    return {
+      c, ctx,
+      get w(){return w;}, get h(){return h;}, get dpr(){return dpr;},
+      destroy(){
+        try{ro.disconnect();}catch(e){}
+        if (c.parentNode) c.parentNode.removeChild(c);
+      }
+    };
+  };
+
+  U.loop = (fn) => {
+    let raf = 0, stopped = false, t0 = performance.now();
+    const tick = (t) => {
+      if (stopped) return;
+      fn((t - t0)/1000);
+      raf = requestAnimationFrame(tick);
+    };
+    raf = requestAnimationFrame(tick);
+    return () => { stopped = true; cancelAnimationFrame(raf); };
+  };
+
+  U.rand = (a,b) => a + Math.random()*(b-a);
+})();
diff --git a/assets/animations/fx/chain-react.js b/assets/animations/fx/chain-react.js
new file mode 100644
index 0000000..00a03d9
--- /dev/null
+++ b/assets/animations/fx/chain-react.js
@@ -0,0 +1,41 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['chain-react'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#7c5cff'), ac2 = U.accent2(el,'#22d3ee');
+    const N = 8;
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      const cy = k.h/2;
+      const pad = 60;
+      const dx = (k.w - pad*2)/(N-1);
+      const period = 2.4;
+      const phase = (t % period) / period; // 0..1
+      for (let i=0;i<N;i++){
+        const x = pad + i*dx;
+        const my = i/(N-1);
+        const d = Math.abs(phase - my);
+        const pulse = Math.max(0, 1 - d*6);
+        const r = 18 + pulse*18;
+        // glow
+        const g = ctx.createRadialGradient(x,cy,0,x,cy,r*2);
+        g.addColorStop(0, `rgba(124,92,255,${0.4*pulse})`);
+        g.addColorStop(1, 'rgba(0,0,0,0)');
+        ctx.fillStyle = g;
+        ctx.fillRect(x-r*2, cy-r*2, r*4, r*4);
+        // circle
+        ctx.fillStyle = pulse>0.1 ? ac2 : ac;
+        ctx.beginPath(); ctx.arc(x,cy,r,0,Math.PI*2); ctx.fill();
+        ctx.strokeStyle='rgba(255,255,255,0.4)'; ctx.lineWidth=2;
+        ctx.stroke();
+        // connectors
+        if (i<N-1){
+          ctx.strokeStyle='rgba(200,200,230,0.3)'; ctx.lineWidth=2;
+          ctx.beginPath(); ctx.moveTo(x+r,cy); ctx.lineTo(x+dx-r,cy); ctx.stroke();
+        }
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/confetti-cannon.js b/assets/animations/fx/confetti-cannon.js
new file mode 100644
index 0000000..e217a46
--- /dev/null
+++ b/assets/animations/fx/confetti-cannon.js
@@ -0,0 +1,49 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['confetti-cannon'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    let parts = [];
+    const fire = () => {
+      for (let side=0; side<2; side++){
+        const x0 = side===0 ? 20 : k.w-20;
+        const y0 = k.h - 20;
+        for (let i=0;i<40;i++){
+          const a = side===0 ? U.rand(-Math.PI*0.7, -Math.PI*0.4) : U.rand(-Math.PI*0.6, -Math.PI*0.3) - Math.PI/2 - Math.PI/6;
+          const spd = U.rand(300, 520);
+          parts.push({
+            x: x0, y: y0,
+            vx: Math.cos(a)*spd, vy: Math.sin(a)*spd,
+            w: U.rand(6,12), h: U.rand(3,7),
+            rot: Math.random()*Math.PI, vr: U.rand(-6,6),
+            c: pal[(Math.random()*pal.length)|0],
+            life: 1
+          });
+        }
+      }
+    };
+    fire();
+    let last = 0;
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      if (t - last > 3) { fire(); last = t; }
+      const dt = 1/60;
+      parts = parts.filter(p => p.life > 0 && p.y < k.h+40);
+      for (const p of parts){
+        p.vy += 520*dt;
+        p.x += p.vx*dt; p.y += p.vy*dt;
+        p.rot += p.vr*dt;
+        p.life -= 0.006;
+        ctx.save();
+        ctx.translate(p.x, p.y); ctx.rotate(p.rot);
+        ctx.globalAlpha = Math.max(0, p.life);
+        ctx.fillStyle = p.c;
+        ctx.fillRect(-p.w/2, -p.h/2, p.w, p.h);
+        ctx.restore();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/constellation.js b/assets/animations/fx/constellation.js
new file mode 100644
index 0000000..cab841a
--- /dev/null
+++ b/assets/animations/fx/constellation.js
@@ -0,0 +1,44 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['constellation'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#9fb4ff');
+    const N = 70;
+    let pts = [];
+    const seed = () => {
+      pts = Array.from({length:N}, () => ({
+        x: Math.random()*k.w, y: Math.random()*k.h,
+        vx: U.rand(-0.3,0.3), vy: U.rand(-0.3,0.3)
+      }));
+    };
+    seed();
+    let lw=k.w, lh=k.h;
+    const stop = U.loop(() => {
+      if (k.w!==lw||k.h!==lh){ seed(); lw=k.w; lh=k.h; }
+      ctx.clearRect(0,0,k.w,k.h);
+      for (const p of pts){
+        p.x += p.vx; p.y += p.vy;
+        if (p.x<0||p.x>k.w) p.vx*=-1;
+        if (p.y<0||p.y>k.h) p.vy*=-1;
+      }
+      for (let i=0;i<N;i++){
+        for (let j=i+1;j<N;j++){
+          const a=pts[i], b=pts[j];
+          const d = Math.hypot(a.x-b.x, a.y-b.y);
+          if (d < 150){
+            ctx.globalAlpha = 1 - d/150;
+            ctx.strokeStyle = ac; ctx.lineWidth=1;
+            ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
+          }
+        }
+      }
+      ctx.globalAlpha = 1;
+      ctx.fillStyle = ac;
+      for (const p of pts){
+        ctx.beginPath(); ctx.arc(p.x,p.y,1.8,0,Math.PI*2); ctx.fill();
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/counter-explosion.js b/assets/animations/fx/counter-explosion.js
new file mode 100644
index 0000000..5f039cc
--- /dev/null
+++ b/assets/animations/fx/counter-explosion.js
@@ -0,0 +1,58 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['counter-explosion'] = function(el){
+    const U = window.HPX._u;
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const target = parseInt(el.getAttribute('data-fx-to') || '2400', 10);
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    // number overlay
+    const num = document.createElement('div');
+    num.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 120px system-ui,sans-serif;color:var(--text-1,#fff);pointer-events:none;text-shadow:0 4px 40px rgba(124,92,255,0.5);';
+    num.textContent = '0';
+    el.appendChild(num);
+    let parts = [];
+    let state = 'count'; // count | burst | hold
+    let stateT = 0;
+    let value = 0;
+    let cycle = 0;
+    const burst = () => {
+      const cx = k.w/2, cy = k.h/2;
+      for (let i=0;i<120;i++){
+        const a = Math.random()*Math.PI*2;
+        const s = U.rand(120, 400);
+        parts.push({x:cx,y:cy,vx:Math.cos(a)*s,vy:Math.sin(a)*s,life:1,r:U.rand(2,5),c:pal[(Math.random()*pal.length)|0]});
+      }
+    };
+    const stop = U.loop(() => {
+      ctx.clearRect(0,0,k.w,k.h);
+      const dt = 1/60;
+      stateT += dt;
+      if (state === 'count'){
+        const dur = 2.2;
+        const p = Math.min(1, stateT/dur);
+        const eased = 1 - Math.pow(1-p,3);
+        value = Math.round(target*eased);
+        num.textContent = value.toLocaleString();
+        if (p >= 1){ state='burst'; stateT=0; burst(); }
+      } else if (state === 'burst'){
+        if (stateT > 0.05 && stateT < 0.3 && parts.length < 200) {}
+        if (stateT > 2.5){ state='hold'; stateT=0; }
+      } else if (state === 'hold'){
+        if (stateT > 1.5){
+          state='count'; stateT=0; value=0; num.textContent='0'; cycle++;
+        }
+      }
+      parts = parts.filter(p => p.life > 0);
+      for (const p of parts){
+        p.vy += 260*dt; p.vx *= 0.985; p.vy *= 0.985;
+        p.x += p.vx*dt; p.y += p.vy*dt; p.life -= 0.01;
+        ctx.globalAlpha = Math.max(0,p.life);
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(p.x,p.y,p.r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); if (num.parentNode) num.parentNode.removeChild(num); } };
+  };
+})();
diff --git a/assets/animations/fx/data-stream.js b/assets/animations/fx/data-stream.js
new file mode 100644
index 0000000..defc85f
--- /dev/null
+++ b/assets/animations/fx/data-stream.js
@@ -0,0 +1,45 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['data-stream'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#22d3ee'), ac2 = U.accent2(el,'#7c5cff');
+    const rows = [];
+    const rh = 22;
+    const genRow = (y) => ({
+      y, dir: Math.random()<0.5?-1:1,
+      speed: U.rand(30, 90),
+      offset: Math.random()*2000,
+      text: Array.from({length:120}, () => {
+        const r = Math.random();
+        if (r<0.3) return Math.random()<0.5?'0':'1';
+        if (r<0.6) return '0x' + Math.floor(Math.random()*256).toString(16).padStart(2,'0');
+        return Math.random().toString(16).slice(2,6);
+      }).join(' ')
+    });
+    const init = () => {
+      rows.length = 0;
+      const n = Math.ceil(k.h/rh);
+      for (let i=0;i<n;i++) rows.push(genRow(i*rh + rh*0.7));
+    };
+    init();
+    let lh = k.h;
+    const stop = U.loop((t) => {
+      if (k.h!==lh){ init(); lh=k.h; }
+      ctx.fillStyle = 'rgba(5,8,14,0.35)';
+      ctx.fillRect(0,0,k.w,k.h);
+      ctx.font = '13px ui-monospace,Menlo,monospace';
+      for (let i=0;i<rows.length;i++){
+        const r = rows[i];
+        const x = r.dir>0
+          ? ((t*r.speed + r.offset) % (k.w+400)) - 400
+          : k.w - (((t*r.speed + r.offset) % (k.w+400)) - 400);
+        ctx.fillStyle = (i%3===0)?ac:ac2;
+        ctx.globalAlpha = 0.65 + (i%2)*0.3;
+        ctx.fillText(r.text, x, r.y);
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/firework.js b/assets/animations/fx/firework.js
new file mode 100644
index 0000000..fcb1c4a
--- /dev/null
+++ b/assets/animations/fx/firework.js
@@ -0,0 +1,51 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['firework'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    let rockets = [], sparks = [];
+    const launch = () => {
+      rockets.push({
+        x: U.rand(k.w*0.2, k.w*0.8), y: k.h+10,
+        vx: U.rand(-30,30), vy: U.rand(-520,-380),
+        tgtY: U.rand(k.h*0.15, k.h*0.45),
+        c: pal[(Math.random()*pal.length)|0]
+      });
+    };
+    const burst = (x, y, c) => {
+      const n = 70;
+      for (let i=0;i<n;i++){
+        const a = Math.random()*Math.PI*2;
+        const s = U.rand(60, 240);
+        sparks.push({x,y,vx:Math.cos(a)*s,vy:Math.sin(a)*s,life:1,c});
+      }
+    };
+    let last = -1;
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.18)';
+      ctx.fillRect(0,0,k.w,k.h);
+      if (t - last > 0.7) { launch(); last = t; }
+      const dt = 1/60;
+      rockets = rockets.filter(r => {
+        r.x += r.vx*dt; r.y += r.vy*dt; r.vy += 260*dt;
+        ctx.fillStyle = r.c;
+        ctx.beginPath(); ctx.arc(r.x, r.y, 2.5, 0, Math.PI*2); ctx.fill();
+        if (r.y <= r.tgtY || r.vy >= 0) { burst(r.x, r.y, r.c); return false; }
+        return true;
+      });
+      sparks = sparks.filter(p => p.life > 0);
+      for (const p of sparks){
+        p.vy += 90*dt;
+        p.vx *= 0.98; p.vy *= 0.98;
+        p.x += p.vx*dt; p.y += p.vy*dt;
+        p.life -= 0.012;
+        ctx.globalAlpha = Math.max(0, p.life);
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(p.x, p.y, 2, 0, Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/galaxy-swirl.js b/assets/animations/fx/galaxy-swirl.js
new file mode 100644
index 0000000..f1df9e5
--- /dev/null
+++ b/assets/animations/fx/galaxy-swirl.js
@@ -0,0 +1,33 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['galaxy-swirl'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const N = 800;
+    const parts = Array.from({length:N}, (_,i) => {
+      const arm = i%3;
+      const t = Math.random();
+      const r = t*180 + 8;
+      const base = (arm/3)*Math.PI*2;
+      return { r, a: base + Math.log(r+1)*1.6 + U.rand(-0.2,0.2),
+               c: pal[arm%pal.length],
+               s: U.rand(0.8, 2.2) };
+    });
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.15)';
+      ctx.fillRect(0,0,k.w,k.h);
+      const cx=k.w/2, cy=k.h/2;
+      for (const p of parts){
+        const a = p.a + t*0.15;
+        const x = cx + Math.cos(a)*p.r;
+        const y = cy + Math.sin(a)*p.r*0.7;
+        ctx.fillStyle = p.c;
+        ctx.globalAlpha = 0.7;
+        ctx.beginPath(); ctx.arc(x,y,p.s,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/gradient-blob.js b/assets/animations/fx/gradient-blob.js
new file mode 100644
index 0000000..8887252
--- /dev/null
+++ b/assets/animations/fx/gradient-blob.js
@@ -0,0 +1,39 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['gradient-blob'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const blobs = Array.from({length:4}, (_,i) => ({
+      x: U.rand(0,1), y: U.rand(0,1),
+      vx: U.rand(-0.08,0.08), vy: U.rand(-0.08,0.08),
+      r: U.rand(180,320),
+      c: pal[i%pal.length]
+    }));
+    const hex2rgb = (h) => {
+      const m = h.replace('#','').match(/.{2}/g);
+      if (!m) return [124,92,255];
+      return m.map(x=>parseInt(x,16));
+    };
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(10,12,22,0.2)';
+      ctx.fillRect(0,0,k.w,k.h);
+      ctx.globalCompositeOperation = 'lighter';
+      for (const b of blobs){
+        b.x += b.vx*0.01; b.y += b.vy*0.01;
+        if (b.x<0||b.x>1) b.vx*=-1;
+        if (b.y<0||b.y>1) b.vy*=-1;
+        const px = b.x*k.w, py = b.y*k.h;
+        const r = b.r + Math.sin(t*0.8 + b.x*6)*30;
+        const [R,G,B] = hex2rgb(b.c);
+        const grad = ctx.createRadialGradient(px,py,0,px,py,r);
+        grad.addColorStop(0, `rgba(${R},${G},${B},0.55)`);
+        grad.addColorStop(1, `rgba(${R},${G},${B},0)`);
+        ctx.fillStyle = grad;
+        ctx.beginPath(); ctx.arc(px,py,r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalCompositeOperation = 'source-over';
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/knowledge-graph.js b/assets/animations/fx/knowledge-graph.js
new file mode 100644
index 0000000..2a184b1
--- /dev/null
+++ b/assets/animations/fx/knowledge-graph.js
@@ -0,0 +1,69 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['knowledge-graph'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const tx = U.text(el, '#e7e7ef');
+    const labels = ['AI','ML','LLM','Graph','Node','Edge','Claude','GPT','RAG','Vector',
+      'Embed','Neural','Agent','Tool','Memory','Logic','Data','Train','Infer','Token',
+      'Prompt','Chain','Plan','Skill','Cloud','Edge','GPU','Code','Task','Flow'];
+    const N = 28;
+    const nodes = Array.from({length:N}, (_,i) => ({
+      x: U.rand(40, 300), y: U.rand(40, 200),
+      vx: 0, vy: 0, label: labels[i%labels.length],
+      c: pal[i%pal.length]
+    }));
+    const edges = [];
+    const made = new Set();
+    while (edges.length < 50){
+      const a = (Math.random()*N)|0, b = (Math.random()*N)|0;
+      if (a===b) continue;
+      const key = a<b ? a+'-'+b : b+'-'+a;
+      if (made.has(key)) continue;
+      made.add(key); edges.push([a,b]);
+    }
+    const stop = U.loop(() => {
+      // physics
+      for (let i=0;i<N;i++){
+        for (let j=i+1;j<N;j++){
+          const a=nodes[i], b=nodes[j];
+          const dx=b.x-a.x, dy=b.y-a.y;
+          let d2=dx*dx+dy*dy; if (d2<1) d2=1;
+          const d=Math.sqrt(d2);
+          const f=1600/d2;
+          const fx=(dx/d)*f, fy=(dy/d)*f;
+          a.vx-=fx; a.vy-=fy; b.vx+=fx; b.vy+=fy;
+        }
+      }
+      for (const [i,j] of edges){
+        const a=nodes[i], b=nodes[j];
+        const dx=b.x-a.x, dy=b.y-a.y, d=Math.hypot(dx,dy)||1;
+        const f=(d-90)*0.008;
+        const fx=(dx/d)*f, fy=(dy/d)*f;
+        a.vx+=fx; a.vy+=fy; b.vx-=fx; b.vy-=fy;
+      }
+      const cx=k.w/2, cy=k.h/2;
+      for (const n of nodes){
+        n.vx += (cx-n.x)*0.002;
+        n.vy += (cy-n.y)*0.002;
+        n.vx *= 0.85; n.vy *= 0.85;
+        n.x += n.vx; n.y += n.vy;
+      }
+      ctx.clearRect(0,0,k.w,k.h);
+      ctx.strokeStyle = 'rgba(180,180,220,0.25)'; ctx.lineWidth=1;
+      for (const [i,j] of edges){
+        const a=nodes[i], b=nodes[j];
+        ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
+      }
+      ctx.font='11px system-ui,sans-serif'; ctx.textAlign='center'; ctx.textBaseline='middle';
+      for (const n of nodes){
+        ctx.fillStyle = n.c;
+        ctx.beginPath(); ctx.arc(n.x,n.y,7,0,Math.PI*2); ctx.fill();
+        ctx.fillStyle = tx;
+        ctx.fillText(n.label, n.x, n.y-14);
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/letter-explode.js b/assets/animations/fx/letter-explode.js
new file mode 100644
index 0000000..1a9bb2a
--- /dev/null
+++ b/assets/animations/fx/letter-explode.js
@@ -0,0 +1,50 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['letter-explode'] = function(el){
+    const U = window.HPX._u;
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const src = el.querySelector('[data-fx-text]') || el;
+    const text = (el.getAttribute('data-fx-text-value') || src.textContent || 'EXPLODE').trim();
+    // Build a container, hide source text
+    const wrap = document.createElement('div');
+    wrap.style.cssText = 'position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;';
+    const inner = document.createElement('div');
+    inner.style.cssText = 'font-size:64px;font-weight:900;letter-spacing:0.02em;color:var(--text-1,#fff);white-space:nowrap;';
+    wrap.appendChild(inner);
+    el.appendChild(wrap);
+    const spans = [];
+    for (const ch of text){
+      const s = document.createElement('span');
+      s.textContent = ch === ' ' ? '\u00A0' : ch;
+      s.style.display='inline-block';
+      s.style.transform='translate(0,0)';
+      s.style.transition='transform 900ms cubic-bezier(.2,.9,.3,1), opacity 900ms';
+      s.style.opacity='0';
+      inner.appendChild(s);
+      spans.push(s);
+    }
+    let stopped = false;
+    const run = () => {
+      if (stopped) return;
+      spans.forEach((s,i) => {
+        const dx = U.rand(-400, 400), dy = U.rand(-300, 300);
+        s.style.transition='none';
+        s.style.transform=`translate(${dx}px,${dy}px) rotate(${U.rand(-180,180)}deg)`;
+        s.style.opacity='0';
+      });
+      // force reflow
+      void inner.offsetWidth;
+      spans.forEach((s,i) => {
+        setTimeout(() => {
+          if (stopped) return;
+          s.style.transition='transform 900ms cubic-bezier(.2,.9,.3,1), opacity 900ms';
+          s.style.transform='translate(0,0) rotate(0deg)';
+          s.style.opacity='1';
+        }, i*35);
+      });
+    };
+    run();
+    const iv = setInterval(run, 4500);
+    return { stop(){ stopped=true; clearInterval(iv); if (wrap.parentNode) wrap.parentNode.removeChild(wrap); } };
+  };
+})();
diff --git a/assets/animations/fx/magnetic-field.js b/assets/animations/fx/magnetic-field.js
new file mode 100644
index 0000000..da2aa3f
--- /dev/null
+++ b/assets/animations/fx/magnetic-field.js
@@ -0,0 +1,40 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['magnetic-field'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const N = 60;
+    const parts = Array.from({length:N}, (_,i) => ({
+      phase: Math.random()*Math.PI*2,
+      freq: U.rand(0.4, 1.2),
+      amp: U.rand(30, 90),
+      y0: U.rand(0.15, 0.85),
+      c: pal[i%pal.length],
+      trail: []
+    }));
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.08)';
+      ctx.fillRect(0,0,k.w,k.h);
+      for (const p of parts){
+        const x = ((t*80 + p.phase*50) % (k.w+100)) - 50;
+        const y = k.h*p.y0 + Math.sin(x*0.02 + p.phase + t*p.freq)*p.amp;
+        p.trail.push([x,y]);
+        if (p.trail.length > 18) p.trail.shift();
+        ctx.strokeStyle = p.c;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        for (let i=0;i<p.trail.length;i++){
+          const [tx,ty] = p.trail[i];
+          if (i===0) ctx.moveTo(tx,ty); else ctx.lineTo(tx,ty);
+        }
+        ctx.globalAlpha = 0.7;
+        ctx.stroke();
+        ctx.globalAlpha = 1;
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(x,y,2.5,0,Math.PI*2); ctx.fill();
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/matrix-rain.js b/assets/animations/fx/matrix-rain.js
new file mode 100644
index 0000000..c7bb93e
--- /dev/null
+++ b/assets/animations/fx/matrix-rain.js
@@ -0,0 +1,33 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['matrix-rain'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const glyphs = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789ABCDEF'.split('');
+    const fs = 16;
+    let cols = 0, drops = [];
+    const init = () => {
+      cols = Math.ceil(k.w/fs);
+      drops = Array.from({length:cols}, () => U.rand(-20, 0));
+    };
+    init();
+    let lw = k.w, lh = k.h;
+    const stop = U.loop(() => {
+      if (k.w!==lw || k.h!==lh){ init(); lw=k.w; lh=k.h; }
+      ctx.fillStyle = 'rgba(0,0,0,0.08)';
+      ctx.fillRect(0,0,k.w,k.h);
+      ctx.font = fs+'px monospace';
+      for (let i=0;i<cols;i++){
+        const ch = glyphs[(Math.random()*glyphs.length)|0];
+        const x = i*fs, y = drops[i]*fs;
+        ctx.fillStyle = '#9fffc9';
+        ctx.fillText(ch, x, y);
+        ctx.fillStyle = '#00ff6a';
+        ctx.fillText(ch, x, y - fs);
+        drops[i] += 1;
+        if (y > k.h && Math.random() > 0.975) drops[i] = 0;
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/neural-net.js b/assets/animations/fx/neural-net.js
new file mode 100644
index 0000000..ca15cb6
--- /dev/null
+++ b/assets/animations/fx/neural-net.js
@@ -0,0 +1,75 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['neural-net'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#7c5cff'), ac2 = U.accent2(el,'#22d3ee');
+    const layers = [4,6,6,3];
+    let nodes = [], edges = [], pulses = [];
+    const layout = () => {
+      nodes = [];
+      const pad = 40;
+      const cw = k.w - pad*2, ch = k.h - pad*2;
+      for (let L=0; L<layers.length; L++){
+        const x = pad + (cw * L / (layers.length-1));
+        const n = layers[L];
+        for (let i=0;i<n;i++){
+          const y = pad + (ch * (i+0.5) / n);
+          nodes.push({x,y,L,i});
+        }
+      }
+      edges = [];
+      for (let L=0; L<layers.length-1; L++){
+        const a = nodes.filter(n=>n.L===L), b = nodes.filter(n=>n.L===L+1);
+        for (const x of a) for (const y of b) edges.push([nodes.indexOf(x),nodes.indexOf(y)]);
+      }
+    };
+    layout();
+    let lw=k.w, lh=k.h, last=0;
+    const stop = U.loop((t) => {
+      if (k.w!==lw||k.h!==lh){ layout(); lw=k.w; lh=k.h; }
+      ctx.clearRect(0,0,k.w,k.h);
+      ctx.strokeStyle = 'rgba(160,160,200,0.22)'; ctx.lineWidth=1;
+      for (const [i,j] of edges){
+        const a=nodes[i], b=nodes[j];
+        ctx.beginPath(); ctx.moveTo(a.x,a.y); ctx.lineTo(b.x,b.y); ctx.stroke();
+      }
+      if (t - last > 0.25){
+        last = t;
+        const starts = nodes.filter(n=>n.L===0);
+        const s = starts[(Math.random()*starts.length)|0];
+        pulses.push({node:s, L:0, t:0});
+      }
+      pulses = pulses.filter(p => p.L < layers.length-1);
+      for (const p of pulses){
+        p.t += 0.03;
+        if (p.t >= 1){
+          const next = nodes.filter(n=>n.L===p.L+1);
+          p.node2 = next[(Math.random()*next.length)|0];
+          if (!p._started){ p._started = true; }
+        }
+      }
+      // animate progression
+      for (const p of pulses){
+        if (!p.target){
+          const next = nodes.filter(n=>n.L===p.L+1);
+          p.target = next[(Math.random()*next.length)|0];
+        }
+        p.t += 0.04;
+        const a = p.node, b = p.target;
+        const x = a.x + (b.x-a.x)*Math.min(1,p.t);
+        const y = a.y + (b.y-a.y)*Math.min(1,p.t);
+        ctx.fillStyle = ac2;
+        ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2); ctx.fill();
+        if (p.t >= 1){ p.node = b; p.target=null; p.L++; p.t=0; }
+      }
+      for (const n of nodes){
+        ctx.fillStyle = ac;
+        ctx.beginPath(); ctx.arc(n.x,n.y,6,0,Math.PI*2); ctx.fill();
+        ctx.strokeStyle = ac2; ctx.lineWidth=1.5;
+        ctx.beginPath(); ctx.arc(n.x,n.y,8,0,Math.PI*2); ctx.stroke();
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/orbit-ring.js b/assets/animations/fx/orbit-ring.js
new file mode 100644
index 0000000..af5eef6
--- /dev/null
+++ b/assets/animations/fx/orbit-ring.js
@@ -0,0 +1,38 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['orbit-ring'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const rings = [
+      {r:40,  n:3,  sp:1.2, c:pal[0]},
+      {r:75,  n:5,  sp:0.8, c:pal[1]},
+      {r:110, n:8,  sp:-0.6, c:pal[2]},
+      {r:145, n:12, sp:0.4, c:pal[3]},
+      {r:180, n:16, sp:-0.3, c:pal[4]}
+    ];
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      const cx=k.w/2, cy=k.h/2;
+      // radial glow
+      const g = ctx.createRadialGradient(cx,cy,0,cx,cy,210);
+      g.addColorStop(0,'rgba(124,92,255,0.25)');
+      g.addColorStop(1,'rgba(0,0,0,0)');
+      ctx.fillStyle = g; ctx.fillRect(0,0,k.w,k.h);
+      for (const R of rings){
+        ctx.strokeStyle = 'rgba(200,200,230,0.2)'; ctx.lineWidth=1;
+        ctx.beginPath(); ctx.arc(cx,cy,R.r,0,Math.PI*2); ctx.stroke();
+        for (let i=0;i<R.n;i++){
+          const a = (i/R.n)*Math.PI*2 + t*R.sp;
+          const x = cx + Math.cos(a)*R.r;
+          const y = cy + Math.sin(a)*R.r;
+          ctx.fillStyle = R.c;
+          ctx.beginPath(); ctx.arc(x,y,4,0,Math.PI*2); ctx.fill();
+        }
+      }
+      ctx.fillStyle = '#fff';
+      ctx.beginPath(); ctx.arc(cx,cy,5,0,Math.PI*2); ctx.fill();
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/particle-burst.js b/assets/animations/fx/particle-burst.js
new file mode 100644
index 0000000..74a89db
--- /dev/null
+++ b/assets/animations/fx/particle-burst.js
@@ -0,0 +1,42 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['particle-burst'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    let parts = [];
+    const spawn = () => {
+      const cx = k.w/2, cy = k.h/2;
+      const n = 90;
+      for (let i=0;i<n;i++){
+        const a = Math.random()*Math.PI*2;
+        const s = U.rand(80, 260);
+        parts.push({
+          x: cx, y: cy,
+          vx: Math.cos(a)*s, vy: Math.sin(a)*s,
+          life: 1, r: U.rand(2,5),
+          c: pal[(Math.random()*pal.length)|0]
+        });
+      }
+    };
+    spawn();
+    let lastSpawn = 0;
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      if (t - lastSpawn > 2.5) { spawn(); lastSpawn = t; }
+      const dt = 1/60;
+      parts = parts.filter(p => p.life > 0);
+      for (const p of parts){
+        p.vy += 220*dt;
+        p.vx *= 0.985; p.vy *= 0.985;
+        p.x += p.vx*dt; p.y += p.vy*dt;
+        p.life -= 0.012;
+        ctx.globalAlpha = Math.max(0, p.life);
+        ctx.fillStyle = p.c;
+        ctx.beginPath(); ctx.arc(p.x, p.y, p.r, 0, Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/shockwave.js b/assets/animations/fx/shockwave.js
new file mode 100644
index 0000000..436a5cf
--- /dev/null
+++ b/assets/animations/fx/shockwave.js
@@ -0,0 +1,39 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['shockwave'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const ac = U.accent(el,'#7c5cff'), ac2 = U.accent2(el,'#22d3ee');
+    let waves = [];
+    let last = -1;
+    const stop = U.loop((t) => {
+      ctx.fillStyle = 'rgba(0,0,0,0.12)';
+      ctx.fillRect(0,0,k.w,k.h);
+      if (t - last > 0.6){ last = t; waves.push({t:0}); }
+      const cx=k.w/2, cy=k.h/2;
+      const max = Math.hypot(k.w,k.h)/2;
+      waves = waves.filter(w => w.t < 1);
+      for (const w of waves){
+        w.t += 0.012;
+        const r = w.t * max;
+        const alpha = 1 - w.t;
+        ctx.strokeStyle = w.t<0.5?ac2:ac;
+        ctx.globalAlpha = alpha;
+        ctx.lineWidth = 3 + (1-w.t)*3;
+        ctx.beginPath(); ctx.arc(cx,cy,r,0,Math.PI*2); ctx.stroke();
+        ctx.strokeStyle = '#fff';
+        ctx.lineWidth = 1;
+        ctx.globalAlpha = alpha*0.4;
+        ctx.beginPath(); ctx.arc(cx,cy,r*0.92,0,Math.PI*2); ctx.stroke();
+      }
+      ctx.globalAlpha = 1;
+      // core
+      const g = ctx.createRadialGradient(cx,cy,0,cx,cy,40);
+      g.addColorStop(0,'rgba(255,255,255,0.9)');
+      g.addColorStop(1,'rgba(124,92,255,0)');
+      ctx.fillStyle = g;
+      ctx.beginPath(); ctx.arc(cx,cy,40,0,Math.PI*2); ctx.fill();
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/sparkle-trail.js b/assets/animations/fx/sparkle-trail.js
new file mode 100644
index 0000000..3509ffe
--- /dev/null
+++ b/assets/animations/fx/sparkle-trail.js
@@ -0,0 +1,62 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['sparkle-trail'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    k.c.style.pointerEvents = 'none';
+    el.style.cursor = 'crosshair';
+    const pal = U.palette(el);
+    let sparks = [];
+    const onMove = (e) => {
+      const r = el.getBoundingClientRect();
+      const x = e.clientX - r.left, y = e.clientY - r.top;
+      for (let i=0;i<3;i++){
+        sparks.push({
+          x, y,
+          vx: U.rand(-60,60), vy: U.rand(-80,20),
+          life: 1, c: pal[(Math.random()*pal.length)|0],
+          r: U.rand(1.5,3.5)
+        });
+      }
+    };
+    // auto-wiggle if no mouse moves
+    let auto = true, autoT = 0;
+    const onAny = () => { auto = false; };
+    el.addEventListener('pointermove', onMove);
+    el.addEventListener('pointerenter', onAny);
+    const stop = U.loop(() => {
+      ctx.fillStyle = 'rgba(0,0,0,0.15)';
+      ctx.fillRect(0,0,k.w,k.h);
+      if (auto){
+        autoT += 0.04;
+        const x = k.w/2 + Math.cos(autoT)*k.w*0.3;
+        const y = k.h/2 + Math.sin(autoT*1.3)*k.h*0.3;
+        for (let i=0;i<3;i++){
+          sparks.push({
+            x, y,
+            vx: U.rand(-60,60), vy: U.rand(-80,20),
+            life: 1, c: pal[(Math.random()*pal.length)|0],
+            r: U.rand(1.5,3.5)
+          });
+        }
+      }
+      const dt = 1/60;
+      sparks = sparks.filter(s => s.life > 0);
+      for (const s of sparks){
+        s.vy += 160*dt;
+        s.x += s.vx*dt; s.y += s.vy*dt;
+        s.life -= 0.018;
+        ctx.globalAlpha = Math.max(0, s.life);
+        ctx.fillStyle = s.c;
+        ctx.beginPath(); ctx.arc(s.x,s.y,s.r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){
+      el.removeEventListener('pointermove', onMove);
+      el.removeEventListener('pointerenter', onAny);
+      el.style.cursor = '';
+      stop(); k.destroy();
+    }};
+  };
+})();
diff --git a/assets/animations/fx/starfield.js b/assets/animations/fx/starfield.js
new file mode 100644
index 0000000..168835d
--- /dev/null
+++ b/assets/animations/fx/starfield.js
@@ -0,0 +1,30 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['starfield'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const tx = U.text(el, '#ffffff');
+    const N = 260;
+    const stars = Array.from({length:N}, () => ({
+      x: U.rand(-1,1), y: U.rand(-1,1), z: Math.random()
+    }));
+    const stop = U.loop(() => {
+      ctx.fillStyle = 'rgba(0,0,0,0.25)';
+      ctx.fillRect(0,0,k.w,k.h);
+      const cx = k.w/2, cy = k.h/2;
+      for (const s of stars){
+        s.z -= 0.006;
+        if (s.z <= 0.02) { s.x = U.rand(-1,1); s.y = U.rand(-1,1); s.z = 1; }
+        const px = cx + (s.x/s.z)*cx;
+        const py = cy + (s.y/s.z)*cy;
+        if (px<0||py<0||px>k.w||py>k.h) continue;
+        const r = (1-s.z)*2.4;
+        ctx.globalAlpha = 1-s.z;
+        ctx.fillStyle = tx;
+        ctx.beginPath(); ctx.arc(px,py,r,0,Math.PI*2); ctx.fill();
+      }
+      ctx.globalAlpha = 1;
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/animations/fx/typewriter-multi.js b/assets/animations/fx/typewriter-multi.js
new file mode 100644
index 0000000..1d07d5e
--- /dev/null
+++ b/assets/animations/fx/typewriter-multi.js
@@ -0,0 +1,51 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['typewriter-multi'] = function(el){
+    if (getComputedStyle(el).position === 'static') el.style.position = 'relative';
+    const lines = [
+      (el.getAttribute('data-fx-line1') || '> initializing knowledge graph...'),
+      (el.getAttribute('data-fx-line2') || '> loading 28 concept nodes'),
+      (el.getAttribute('data-fx-line3') || '> agent ready. awaiting prompt_'),
+    ];
+    const wrap = document.createElement('div');
+    wrap.style.cssText = 'position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:32px 48px;font:600 22px ui-monospace,Menlo,monospace;color:var(--text-1,#e7e7ef);';
+    el.appendChild(wrap);
+    const rows = lines.map((txt) => {
+      const row = document.createElement('div');
+      row.style.cssText = 'white-space:pre;display:flex;align-items:center;';
+      const span = document.createElement('span'); span.textContent = '';
+      const cur = document.createElement('span');
+      cur.textContent = '\u2588';
+      cur.style.cssText = 'display:inline-block;margin-left:2px;color:var(--accent,#22d3ee);animation:hpxBlink 1s steps(2) infinite;';
+      row.appendChild(span); row.appendChild(cur);
+      wrap.appendChild(row);
+      return {row, span, txt, i:0};
+    });
+    // inject blink keyframes once
+    if (!document.getElementById('hpx-blink-kf')){
+      const st = document.createElement('style');
+      st.id = 'hpx-blink-kf';
+      st.textContent = '@keyframes hpxBlink{50%{opacity:0}}';
+      document.head.appendChild(st);
+    }
+    let stopped = false;
+    const speeds = [55, 70, 45];
+    rows.forEach((r, idx) => {
+      const tick = () => {
+        if (stopped) return;
+        if (r.i < r.txt.length){
+          r.span.textContent += r.txt[r.i++];
+          setTimeout(tick, speeds[idx]);
+        } else {
+          setTimeout(() => {
+            if (stopped) return;
+            r.i = 0; r.span.textContent = '';
+            tick();
+          }, 2200);
+        }
+      };
+      setTimeout(tick, idx*400);
+    });
+    return { stop(){ stopped = true; if (wrap.parentNode) wrap.parentNode.removeChild(wrap); } };
+  };
+})();
diff --git a/assets/animations/fx/word-cascade.js b/assets/animations/fx/word-cascade.js
new file mode 100644
index 0000000..11f14a5
--- /dev/null
+++ b/assets/animations/fx/word-cascade.js
@@ -0,0 +1,47 @@
+(function(){
+  window.HPX = window.HPX || {};
+  window.HPX['word-cascade'] = function(el){
+    const U = window.HPX._u;
+    const k = U.canvas(el), ctx = k.ctx;
+    const pal = U.palette(el);
+    const WORDS = ['AI','知识','Graph','Claude','LLM','Agent','Vector','RAG','Token','神经',
+      'Prompt','Chain','Skill','Code','Cloud','GPU','Flow','推理','Data','Model'];
+    let items = [];
+    let last = -1;
+    let piles = {}; // column -> stack height
+    const stop = U.loop((t) => {
+      ctx.clearRect(0,0,k.w,k.h);
+      if (t - last > 0.18){
+        last = t;
+        const w = WORDS[(Math.random()*WORDS.length)|0];
+        items.push({
+          text: w, x: U.rand(40, k.w-40), y: -20,
+          vy: 0, c: pal[(Math.random()*pal.length)|0],
+          size: U.rand(16,26), landed: false
+        });
+      }
+      ctx.textAlign='center'; ctx.textBaseline='middle';
+      for (const it of items){
+        if (!it.landed){
+          it.vy += 0.4;
+          it.y += it.vy;
+          const col = Math.round(it.x/60);
+          const floor = k.h - (piles[col]||0) - it.size*0.6;
+          if (it.y >= floor){
+            it.y = floor; it.landed = true;
+            piles[col] = (piles[col]||0) + it.size*1.1;
+            if ((piles[col]||0) > k.h*0.8) piles[col] = 0; // reset if too high
+          }
+        }
+        ctx.fillStyle = it.c;
+        ctx.font = `700 ${it.size}px system-ui,sans-serif`;
+        ctx.fillText(it.text, it.x, it.y);
+      }
+      // prune old landed
+      if (items.length > 120){
+        items = items.filter(i => !i.landed).concat(items.filter(i=>i.landed).slice(-60));
+      }
+    });
+    return { stop(){ stop(); k.destroy(); } };
+  };
+})();
diff --git a/assets/themes/academic-paper.css b/assets/themes/academic-paper.css
new file mode 100644
index 0000000..5dddb5f
--- /dev/null
+++ b/assets/themes/academic-paper.css
@@ -0,0 +1,23 @@
+/* theme: academic-paper — 学术论文 */
+:root{
+  --bg:#fdfcf8;--bg-soft:#f7f5ed;--surface:#ffffff;--surface-2:#f5f3ea;
+  --border:rgba(20,20,20,.14);--border-strong:rgba(20,20,20,.35);
+  --text-1:#0a0a0a;--text-2:#333333;--text-3:#707070;
+  --accent:#1a3a7a;--accent-2:#0a0a0a;--accent-3:#8a1a1a;
+  --good:#1a5a2a;--warn:#8a6a1a;--bad:#8a1a1a;
+  --grad:linear-gradient(135deg,#1a3a7a,#0a0a0a);
+  --grad-soft:linear-gradient(135deg,#e8edf8,#f5f3ea);
+  --radius:0px;--radius-sm:0px;--radius-lg:0px;
+  --shadow:none;
+  --shadow-lg:0 1px 2px rgba(0,0,0,.1);
+  --font-sans:'Latin Modern Roman','Playfair Display','Noto Serif SC',Georgia,serif;
+  --font-serif:'Latin Modern Roman','Playfair Display','Noto Serif SC',Georgia,serif;
+  --font-display:'Latin Modern Roman','Playfair Display','Noto Serif SC',Georgia,serif;
+}
+body{font-family:var(--font-serif)}
+h1.title,h2.title,.h1,.h2{font-weight:700;font-family:var(--font-serif)}
+.card{border:1px solid var(--border);box-shadow:none}
+.divider{background:var(--text-1);height:1px}
+.divider-accent{background:var(--text-1);height:2px;width:100%}
+a{color:var(--accent);text-decoration:underline}
+.kicker{color:var(--accent);font-style:italic;text-transform:none;letter-spacing:0;font-weight:400}
diff --git a/assets/themes/corporate-clean.css b/assets/themes/corporate-clean.css
new file mode 100644
index 0000000..973a823
--- /dev/null
+++ b/assets/themes/corporate-clean.css
@@ -0,0 +1,19 @@
+/* theme: corporate-clean — 企业商务 */
+:root{
+  --bg:#ffffff;--bg-soft:#f5f7fa;--surface:#ffffff;--surface-2:#f0f3f7;
+  --border:rgba(10,37,64,.12);--border-strong:rgba(10,37,64,.28);
+  --text-1:#0a2540;--text-2:#425466;--text-3:#8898aa;
+  --accent:#0a2540;--accent-2:#1d4ed8;--accent-3:#64748b;
+  --good:#0e9f6e;--warn:#d97706;--bad:#dc2626;
+  --grad:linear-gradient(135deg,#0a2540,#1d4ed8);
+  --grad-soft:linear-gradient(135deg,#f0f4fb,#e4ecf7);
+  --radius:6px;--radius-sm:4px;--radius-lg:10px;
+  --shadow:0 1px 3px rgba(10,37,64,.08),0 4px 12px rgba(10,37,64,.05);
+  --shadow-lg:0 4px 12px rgba(10,37,64,.1),0 16px 40px rgba(10,37,64,.08);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-display:'Inter','Noto Sans SC',sans-serif;
+}
+.card{border:1px solid var(--border)}
+.divider-accent{background:var(--accent);height:3px;width:56px}
+.kicker{color:var(--accent-2)}
+h1.title,h2.title,.h1,.h2{font-weight:700;color:var(--accent)}
diff --git a/assets/themes/cyberpunk-neon.css b/assets/themes/cyberpunk-neon.css
new file mode 100644
index 0000000..e9fd82e
--- /dev/null
+++ b/assets/themes/cyberpunk-neon.css
@@ -0,0 +1,23 @@
+/* theme: cyberpunk-neon — 赛博朋克霓虹 */
+:root{
+  --bg:#000000;--bg-soft:#0a0a12;--surface:#0f0f1a;--surface-2:#14141f;
+  --border:rgba(255,0,170,.25);--border-strong:rgba(0,240,255,.55);
+  --text-1:#f5f7ff;--text-2:#b4b8d4;--text-3:#6b6e8a;
+  --accent:#ff2bd6;--accent-2:#00f0ff;--accent-3:#f9f871;
+  --good:#39ff14;--warn:#f9f871;--bad:#ff2bd6;
+  --grad:linear-gradient(135deg,#ff2bd6,#7a00ff 50%,#00f0ff);
+  --grad-soft:linear-gradient(135deg,rgba(255,43,214,.18),rgba(0,240,255,.18));
+  --radius:6px;--radius-sm:3px;--radius-lg:10px;
+  --shadow:0 0 0 1px rgba(255,43,214,.35),0 0 24px rgba(255,43,214,.35),0 0 48px rgba(0,240,255,.18);
+  --shadow-lg:0 0 0 1px rgba(0,240,255,.5),0 0 40px rgba(0,240,255,.45),0 0 80px rgba(255,43,214,.3);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-display:'JetBrains Mono','IBM Plex Mono',monospace;
+}
+body{background:
+  radial-gradient(ellipse at 15% 0%,rgba(255,43,214,.22),transparent 60%),
+  radial-gradient(ellipse at 85% 100%,rgba(0,240,255,.2),transparent 60%),
+  #000}
+h1.title,h2.title,.h1,.h2{text-shadow:0 0 12px rgba(255,43,214,.6),0 0 30px rgba(0,240,255,.35)}
+.kicker{color:var(--accent-2);text-shadow:0 0 8px rgba(0,240,255,.6)}
+.card{background:rgba(15,15,26,.72);backdrop-filter:blur(8px)}
+.divider-accent{background:var(--grad);box-shadow:0 0 12px var(--accent)}
diff --git a/assets/themes/engineering-whiteprint.css b/assets/themes/engineering-whiteprint.css
new file mode 100644
index 0000000..a76c028
--- /dev/null
+++ b/assets/themes/engineering-whiteprint.css
@@ -0,0 +1,26 @@
+/* theme: engineering-whiteprint — 工程白图 */
+:root{
+  --bg:#ffffff;--bg-soft:#f8fafc;--surface:#ffffff;--surface-2:#f4f7fb;
+  --border:rgba(10,30,70,.22);--border-strong:#0a1e46;
+  --text-1:#0a1e46;--text-2:#3a4a6a;--text-3:#8090a8;
+  --accent:#0a1e46;--accent-2:#1e5ac4;--accent-3:#c42a10;
+  --good:#1a6a3a;--warn:#c47a10;--bad:#c42a10;
+  --grad:linear-gradient(135deg,#0a1e46,#1e5ac4);
+  --grad-soft:linear-gradient(135deg,#eaf0fb,#f4f7fb);
+  --radius:0px;--radius-sm:0px;--radius-lg:0px;
+  --shadow:none;
+  --shadow-lg:0 0 0 1px var(--border-strong);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-mono:'JetBrains Mono','IBM Plex Mono',monospace;
+  --font-display:'JetBrains Mono','Inter',monospace;
+}
+body{background:
+  repeating-linear-gradient(0deg,rgba(10,30,70,.07) 0 1px,transparent 1px 40px),
+  repeating-linear-gradient(90deg,rgba(10,30,70,.07) 0 1px,transparent 1px 40px),
+  #ffffff}
+.card{border:1px solid var(--border-strong);box-shadow:none;background:rgba(255,255,255,.85)}
+.divider{background:var(--border-strong);height:1px}
+.divider-accent{background:var(--border-strong);height:1px;width:100%}
+.kicker{font-family:var(--font-mono);color:var(--accent-2);letter-spacing:.18em}
+h1.title,h2.title,.h1,.h2{font-weight:600}
+.pill{font-family:var(--font-mono);border:1px solid var(--border-strong);border-radius:0}
diff --git a/assets/themes/japanese-minimal.css b/assets/themes/japanese-minimal.css
new file mode 100644
index 0000000..1d1dde8
--- /dev/null
+++ b/assets/themes/japanese-minimal.css
@@ -0,0 +1,21 @@
+/* theme: japanese-minimal — 和风极简 */
+:root{
+  --bg:#fafaf5;--bg-soft:#f2f0e6;--surface:#ffffff;--surface-2:#f5f3ea;
+  --border:rgba(40,30,20,.1);--border-strong:rgba(40,30,20,.3);
+  --text-1:#1a1a18;--text-2:#5c564c;--text-3:#9c958a;
+  --accent:#d93a2a;--accent-2:#1a1a18;--accent-3:#c9a961;
+  --good:#4a6b3e;--warn:#c9a961;--bad:#d93a2a;
+  --grad:linear-gradient(135deg,#d93a2a,#1a1a18);
+  --grad-soft:linear-gradient(135deg,#faeae6,#f5f3ea);
+  --radius:0px;--radius-sm:0px;--radius-lg:2px;
+  --shadow:none;
+  --shadow-lg:0 1px 0 rgba(40,30,20,.12);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-serif:'Noto Serif SC','Playfair Display',serif;
+  --font-display:'Noto Serif SC','Playfair Display',serif;
+}
+h1.title,h2.title,.h1,.h2{font-weight:500;letter-spacing:.04em}
+.card{border:1px solid var(--border);box-shadow:none;padding:36px 40px}
+.divider-accent{background:var(--accent);height:2px;width:48px}
+.kicker{color:var(--accent);letter-spacing:.2em}
+.slide{padding:96px 128px}
diff --git a/assets/themes/magazine-bold.css b/assets/themes/magazine-bold.css
new file mode 100644
index 0000000..8bf3821
--- /dev/null
+++ b/assets/themes/magazine-bold.css
@@ -0,0 +1,21 @@
+/* theme: magazine-bold — 杂志大标题 */
+:root{
+  --bg:#f5efe2;--bg-soft:#ebe4d2;--surface:#fbf6e8;--surface-2:#ede5d0;
+  --border:rgba(10,10,10,.16);--border-strong:#0a0a0a;
+  --text-1:#0a0a0a;--text-2:#2a2a2a;--text-3:#6a6458;
+  --accent:#ea5a1a;--accent-2:#0a0a0a;--accent-3:#c42a10;
+  --good:#2a6a2a;--warn:#ea5a1a;--bad:#c42a10;
+  --grad:linear-gradient(135deg,#ea5a1a,#c42a10);
+  --grad-soft:linear-gradient(135deg,#fbe4d0,#f5d6c0);
+  --radius:0px;--radius-sm:0px;--radius-lg:2px;
+  --shadow:none;
+  --shadow-lg:6px 6px 0 var(--accent);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-serif:'Playfair Display','Noto Serif SC',Georgia,serif;
+  --font-display:'Playfair Display','Noto Serif SC',Georgia,serif;
+}
+h1.title,.h1{font-size:120px;line-height:.92;font-weight:900;letter-spacing:-.04em;font-family:var(--font-serif)}
+h2.title,.h2{font-size:72px;font-weight:800;font-family:var(--font-serif)}
+.card{border:1.5px solid var(--text-1)}
+.divider-accent{background:var(--accent);height:6px;width:90px}
+.kicker{color:var(--accent);text-transform:uppercase;font-weight:700;letter-spacing:.25em}
diff --git a/assets/themes/midcentury.css b/assets/themes/midcentury.css
new file mode 100644
index 0000000..5c9f261
--- /dev/null
+++ b/assets/themes/midcentury.css
@@ -0,0 +1,19 @@
+/* theme: midcentury — 世纪中期现代 */
+:root{
+  --bg:#f3ead8;--bg-soft:#ebdfc4;--surface:#f9f2e0;--surface-2:#e8dcbe;
+  --border:rgba(60,40,20,.18);--border-strong:rgba(60,40,20,.4);
+  --text-1:#201810;--text-2:#5a4830;--text-3:#9a8868;
+  --accent:#d4902a;--accent-2:#2a7a7f;--accent-3:#c7502a;
+  --good:#5a7a3a;--warn:#d4902a;--bad:#c7502a;
+  --grad:linear-gradient(135deg,#d4902a,#c7502a 55%,#2a7a7f);
+  --grad-soft:linear-gradient(135deg,#f4e0b6,#eac7a8);
+  --radius:2px;--radius-sm:0px;--radius-lg:4px;
+  --shadow:4px 4px 0 rgba(40,25,10,.12);
+  --shadow-lg:6px 6px 0 rgba(40,25,10,.2),0 10px 24px rgba(40,25,10,.14);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-display:'Playfair Display','Noto Serif SC',serif;
+}
+.card{border:1.5px solid var(--border-strong)}
+.divider-accent{background:var(--accent-3);height:4px;width:80px}
+.kicker{color:var(--accent-2)}
+h1.title,.h1{color:var(--accent-3)}
diff --git a/assets/themes/news-broadcast.css b/assets/themes/news-broadcast.css
new file mode 100644
index 0000000..8f081f1
--- /dev/null
+++ b/assets/themes/news-broadcast.css
@@ -0,0 +1,20 @@
+/* theme: news-broadcast — 新闻播报 */
+:root{
+  --bg:#ffffff;--bg-soft:#f4f4f4;--surface:#ffffff;--surface-2:#ececec;
+  --border:rgba(0,0,0,.14);--border-strong:#0a0a0a;
+  --text-1:#0a0a0a;--text-2:#3a3a3a;--text-3:#7a7a7a;
+  --accent:#e11d2d;--accent-2:#0a0a0a;--accent-3:#ffd100;
+  --good:#0e7c3a;--warn:#ffd100;--bad:#e11d2d;
+  --grad:linear-gradient(90deg,#e11d2d 0%,#e11d2d 100%);
+  --grad-soft:linear-gradient(135deg,#fde5e7,#f4f4f4);
+  --radius:0px;--radius-sm:0px;--radius-lg:2px;
+  --shadow:none;
+  --shadow-lg:0 4px 0 var(--accent);
+  --font-sans:'Oswald','Inter','Noto Sans SC',sans-serif;
+  --font-display:'Oswald','Inter','Noto Sans SC',sans-serif;
+}
+h1.title,h2.title,.h1,.h2{font-weight:700;text-transform:uppercase;letter-spacing:-.01em}
+.card{border:2px solid var(--text-1);box-shadow:6px 6px 0 var(--accent)}
+.divider-accent{background:var(--accent);height:6px;width:100%}
+.kicker{background:var(--accent);color:#fff;padding:4px 12px;display:inline-block;letter-spacing:.15em}
+.slide::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px;background:var(--accent);z-index:3}
diff --git a/assets/themes/pitch-deck-vc.css b/assets/themes/pitch-deck-vc.css
new file mode 100644
index 0000000..91bc996
--- /dev/null
+++ b/assets/themes/pitch-deck-vc.css
@@ -0,0 +1,21 @@
+/* theme: pitch-deck-vc — YC 风融资 pitch */
+:root{
+  --bg:#ffffff;--bg-soft:#fafbfc;--surface:#ffffff;--surface-2:#f5f7fa;
+  --border:rgba(20,30,50,.1);--border-strong:rgba(20,30,50,.22);
+  --text-1:#0b0d12;--text-2:#4a5270;--text-3:#8b93a8;
+  --accent:#0070f3;--accent-2:#7928ca;--accent-3:#ff4ecb;
+  --good:#0cce6b;--warn:#f5a524;--bad:#ee0000;
+  --grad:linear-gradient(135deg,#0070f3,#7928ca);
+  --grad-soft:linear-gradient(135deg,#e8f0ff,#f3e8ff);
+  --radius:14px;--radius-sm:8px;--radius-lg:22px;
+  --shadow:0 2px 8px rgba(20,30,50,.06),0 12px 32px rgba(20,30,50,.06);
+  --shadow-lg:0 8px 24px rgba(20,30,50,.1),0 30px 80px rgba(20,30,50,.1);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-display:'Inter','Noto Sans SC',sans-serif;
+}
+.slide{padding:88px 120px}
+h1.title,.h1{font-weight:800;letter-spacing:-.035em}
+h1.title .gradient-text,.h1 .gradient-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+.card{border:1px solid var(--border)}
+.divider-accent{background:var(--grad);height:4px;width:64px;border-radius:2px}
+.kicker{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
diff --git a/assets/themes/retro-tv.css b/assets/themes/retro-tv.css
new file mode 100644
index 0000000..2639c55
--- /dev/null
+++ b/assets/themes/retro-tv.css
@@ -0,0 +1,22 @@
+/* theme: retro-tv — 复古显像管 */
+:root{
+  --bg:#f5ecd7;--bg-soft:#efe4c6;--surface:#fbf5e2;--surface-2:#efe3c2;
+  --border:rgba(120,70,20,.22);--border-strong:rgba(120,70,20,.45);
+  --text-1:#2a1a08;--text-2:#6b4a22;--text-3:#a68656;
+  --accent:#e67e14;--accent-2:#c73a1f;--accent-3:#f2b544;
+  --good:#3e8940;--warn:#e67e14;--bad:#c73a1f;
+  --grad:linear-gradient(135deg,#c73a1f,#e67e14 55%,#f2b544);
+  --grad-soft:linear-gradient(135deg,#fde6c4,#fbd9a0);
+  --radius:10px;--radius-sm:6px;--radius-lg:16px;
+  --shadow:0 6px 0 rgba(80,40,0,.12),0 12px 28px rgba(80,40,0,.15);
+  --shadow-lg:0 10px 0 rgba(80,40,0,.15),0 24px 50px rgba(80,40,0,.2);
+  --font-sans:'Inter','Noto Sans SC',sans-serif;
+  --font-display:'Playfair Display','Noto Serif SC',serif;
+}
+body{background:
+  repeating-linear-gradient(0deg,rgba(80,40,0,.06) 0 2px,transparent 2px 4px),
+  radial-gradient(ellipse at center,#f7ecd0 0%,#e8d9b0 85%,#c9b888 100%)}
+.slide::before{content:"";position:absolute;inset:0;pointer-events:none;
+  background:repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 2px,transparent 2px 4px);z-index:1}
+.slide > *{position:relative;z-index:2}
+h1.title,.h1{color:var(--accent-2)}
diff --git a/assets/themes/vaporwave.css b/assets/themes/vaporwave.css
new file mode 100644
index 0000000..7ee2abf
--- /dev/null
+++ b/assets/themes/vaporwave.css
@@ -0,0 +1,21 @@
+/* theme: vaporwave — 蒸汽波 */
+:root{
+  --bg:#1a0938;--bg-soft:#261050;--surface:rgba(255,255,255,.06);--surface-2:rgba(255,255,255,.1);
+  --border:rgba(255,110,199,.28);--border-strong:rgba(0,245,255,.5);
+  --text-1:#fdf0ff;--text-2:#d4a8e8;--text-3:#8a6ba8;
+  --accent:#ff6ec7;--accent-2:#00f5ff;--accent-3:#ffd166;
+  --grad:linear-gradient(135deg,#ff6ec7 0%,#c94fff 35%,#00f5ff 100%);
+  --grad-soft:linear-gradient(135deg,rgba(255,110,199,.25),rgba(0,245,255,.25));
+  --radius:18px;--radius-sm:10px;--radius-lg:28px;
+  --shadow:0 20px 60px rgba(255,110,199,.2),0 0 1px rgba(0,245,255,.6);
+  --shadow-lg:0 30px 80px rgba(255,110,199,.3),0 0 2px rgba(0,245,255,.8);
+  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
+  --font-display:'Space Grotesk','Inter',sans-serif;
+}
+body{background:
+  linear-gradient(180deg,#1a0938 0%,#3a0f5c 45%,#7a1f6b 85%,#e85d9c 100%),
+  radial-gradient(ellipse at 50% 80%,rgba(0,245,255,.3),transparent 60%)}
+h1.title,.h1{background:var(--grad);-webkit-background-clip:text;background-clip:text;
+  -webkit-text-fill-color:transparent;color:transparent}
+.card{backdrop-filter:blur(18px)}
+.divider-accent{background:var(--grad);height:4px;width:120px;box-shadow:0 0 20px var(--accent)}
diff --git a/assets/themes/y2k-chrome.css b/assets/themes/y2k-chrome.css
new file mode 100644
index 0000000..2034621
--- /dev/null
+++ b/assets/themes/y2k-chrome.css
@@ -0,0 +1,20 @@
+/* theme: y2k-chrome — 千禧银色铬金属 */
+:root{
+  --bg:#dfe4ec;--bg-soft:#eef1f6;--surface:rgba(255,255,255,.72);--surface-2:rgba(255,255,255,.5);
+  --border:rgba(120,135,170,.32);--border-strong:rgba(80,100,140,.55);
+  --text-1:#1a1f2e;--text-2:#4a536a;--text-3:#8590a6;
+  --accent:#8a5cff;--accent-2:#3ccfd8;--accent-3:#ff84c4;
+  --grad:linear-gradient(135deg,#b8c4d8 0%,#f5f7fb 30%,#8a9ab8 55%,#e8ecf4 80%,#6b7a95 100%);
+  --grad-soft:linear-gradient(135deg,#c9e4ff,#f5d6ff 50%,#d6fffa);
+  --radius:26px;--radius-sm:16px;--radius-lg:36px;
+  --shadow:0 12px 30px rgba(70,90,130,.22),inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(80,100,140,.2);
+  --shadow-lg:0 24px 60px rgba(70,90,130,.35),inset 0 2px 0 rgba(255,255,255,.95);
+  --font-sans:'Space Grotesk','Inter','Noto Sans SC',sans-serif;
+  --font-display:'Space Grotesk','Inter',sans-serif;
+}
+body{background:
+  linear-gradient(135deg,#c4cfe0 0%,#f0f3f8 25%,#aab8d0 50%,#f5f7fb 75%,#b8c4d8 100%)}
+h1.title,.h1{background:linear-gradient(180deg,#f8faff 0%,#9aa8c4 50%,#4a5670 100%);
+  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
+.card{backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%)}
+.pill{background:linear-gradient(180deg,#fff,#d4dcec);border-color:rgba(120,135,170,.4)}
diff --git a/references/animations.md b/references/animations.md
index 34b835f..1c1295b 100644
--- a/references/animations.md
+++ b/references/animations.md
@@ -91,3 +91,57 @@ All animations are disabled automatically when
   messy.
 - Stagger lists + a single hero entry = clean rhythm.
 - For counter-up, pair with `stat-highlight.html` or `kpi-grid.html`.
+
+## FX (canvas)
+
+CSS animations are fire-and-forget entry effects. **FX** are live, continuously
+running canvas/DOM effects that start when their slide becomes active and stop
+when it leaves. They are loaded by `assets/animations/fx-runtime.js`, which
+dynamically pulls every module under `assets/animations/fx/*.js` and watches
+`.slide.is-active` to run lifecycle.
+
+Add to any page:
+```html
+<script src="../assets/animations/fx-runtime.js"></script>
+```
+
+Then drop one of these into any slide:
+```html
+<div data-fx="particle-burst" style="width:100%;height:360px;"></div>
+```
+
+The container just needs a size — the FX auto-sizes a canvas to fit with
+`ResizeObserver` + DPR correction. Colors read your theme (`--accent`,
+`--accent-2`, `--ok`, `--warn`, `--danger`).
+
+| name | effect | use case | trigger |
+|---|---|---|---|
+| `particle-burst` | Particles explode from center, gravity + fade, re-bursts every 2.5s. | Reveal moments, stat pages. | `<div data-fx="particle-burst">` |
+| `confetti-cannon` | Colored rotating rects arcing from both bottom corners. | Thank you / success pages. | `<div data-fx="confetti-cannon">` |
+| `firework` | Rockets from bottom explode into colored sparks, continuous. | Celebration, launch slides. | `<div data-fx="firework">` |
+| `starfield` | 3D perspective starfield flying outward. | Sci-fi / deep space backgrounds. | `<div data-fx="starfield">` |
+| `matrix-rain` | Falling green katakana + hex columns. | Cyber / security / data theme. | `<div data-fx="matrix-rain">` |
+| `knowledge-graph` | Force-directed graph, 28 labeled nodes, ~50 edges, live physics. | Knowledge / RAG / graph slides. | `<div data-fx="knowledge-graph">` |
+| `neural-net` | 4-6-6-3 feedforward net with pulses traveling along edges. | ML / model architecture slides. | `<div data-fx="neural-net">` |
+| `constellation` | Drifting points, linked when within 150 px, opacity by distance. | Ambient hero backgrounds. | `<div data-fx="constellation">` |
+| `orbit-ring` | 5 concentric rings with dots at different speeds, radial glow. | System / planet / layered concepts. | `<div data-fx="orbit-ring">` |
+| `galaxy-swirl` | Logarithmic spiral of ~800 particles, slow rotation. | Cover pages, intros. | `<div data-fx="galaxy-swirl">` |
+| `word-cascade` | Words fall from top, pile up at bottom. | Vocabulary / concept cloud slides. | `<div data-fx="word-cascade">` |
+| `letter-explode` | Heading letters fly in from random directions, loops every ~4.5s. | Big titles, hero text. | `<div data-fx="letter-explode" data-fx-text-value="EXPLODE">` |
+| `chain-react` | 8 circles with a domino pulse wave traveling across. | Pipeline / sequential flow. | `<div data-fx="chain-react">` |
+| `magnetic-field` | Particles travel bezier/sin curves leaving trails. | Energy / flow / abstract. | `<div data-fx="magnetic-field">` |
+| `data-stream` | Rows of scrolling hex/binary text, cyberpunk. | Data, API, security. | `<div data-fx="data-stream">` |
+| `gradient-blob` | 4 drifting blurred radial gradients (additive). | Soft hero backgrounds. | `<div data-fx="gradient-blob">` |
+| `sparkle-trail` | Pointer-driven sparkle emitter (auto-wiggles if idle). | Interactive reveal, hover canvases. | `<div data-fx="sparkle-trail">` |
+| `shockwave` | Expanding rings from center on loop. | Impact, launch, alert. | `<div data-fx="shockwave">` |
+| `typewriter-multi` | 3 lines typing concurrently with blinking block cursors (DOM). | Terminal, agent boot log. | `<div data-fx="typewriter-multi" data-fx-line1="> boot...">` |
+| `counter-explosion` | Number counts 0 → target, bursts particles, resets after 4s. | KPI reveal, record highs. | `<div data-fx="counter-explosion" data-fx-to="2400">` |
+
+FX tips:
+- One FX per slide is almost always enough. Mix with regular CSS `data-anim`
+  effects for layered polish.
+- The container needs an explicit size (height) — the canvas fills 100%.
+- Every module respects theme custom properties. Set `--accent` / `--accent-2`
+  on the slide or element to recolor on the fly.
+- Lifecycle is automatic: entering a slide starts the FX, leaving stops it and
+  frees the canvas. You can also call `window.__hpxReinit(el)` manually.
diff --git a/references/full-decks.md b/references/full-decks.md
new file mode 100644
index 0000000..6b016c6
--- /dev/null
+++ b/references/full-decks.md
@@ -0,0 +1,95 @@
+# Full-Deck Templates
+
+Self-contained multi-slide HTML decks under `templates/full-decks/<name>/`. Each folder contains:
+
+- `index.html` — complete multi-slide deck (cover / section / content / code / chart or diagram / CTA / thanks, 7+ slides)
+- `style.css` — scoped with `.tpl-<name>` class prefix so multiple templates can coexist
+- `README.md` — short rationale, inspiration, and use guidance
+
+All templates pull the shared `assets/fonts.css`, `assets/base.css`, and `assets/runtime.js` from the skill root. Navigate with `← →` / `space`, use `F` for fullscreen, `O` for overview.
+
+Use these when you want a coherent, opinionated look for an entire deck — not a mix-and-match of layouts. Each template is visually distinctive enough to be identified at a glance.
+
+---
+
+## 1. xhs-white-editorial — 白底杂志风
+
+- **Source inspiration:** `20260409 升级版知识库/小红书图文/v2-白底版/slide_01_cover.html` + `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html`
+- **Key visual traits:** pure-white background, top 10-color rainbow bar, 80-110px display headlines, purple→blue→green→orange→pink gradient text, macaron soft-card set (soft-purple/pink/blue/green/orange), black-on-white `.focus` pills, hero quote box.
+- **When to use:** dual-purpose XHS image + horizontal deck; dense text with strong emphasis; Chinese-first audience.
+- **Path:** `templates/full-decks/xhs-white-editorial/index.html`
+
+## 2. graphify-dark-graph — 暗底知识图谱
+
+- **Source inspiration:** `20260413-graphify/ppt/graphify.html`
+- **Key visual traits:** `#06060c→#0e1020` deep-night gradient, drifting blur orbs, SVG force-directed graph overlay on cover, rainbow-shift gradient headlines, JetBrains Mono command-line glow, glass-morphism cards (warm/blue/green/purple/danger). Accent palette: amber `#e8a87c`, mint `#7ed3a4`, mist-blue `#7eb8da`, lilac `#b8a4d6`.
+- **When to use:** dev-tool / CLI / knowledge-graph / data-viz launches; live-demo decks that want an "AI-native + sci-fi + warm" vibe.
+- **Path:** `templates/full-decks/graphify-dark-graph/index.html`
+
+## 3. knowledge-arch-blueprint — 奶油蓝图架构
+
+- **Source inspiration:** `20260405-Karpathy-知识库/20260405 架构图v2.html`
+- **Key visual traits:** cream paper `#F0EAE0` base, single rust accent `#B5392A`, 48px blueprint grid mask, hard 2px black border cards, pipeline step-boxes with one hero raised, right-side rust insight callout, Playfair serif big numbers, SVG dashed feedback-loop arrows. Zero gradients, zero soft shadows.
+- **When to use:** system architecture diagrams, data-flow maps, engineering white-papers; you want a serious, printable, README-friendly feel.
+- **Path:** `templates/full-decks/knowledge-arch-blueprint/index.html`
+
+## 4. hermes-cyber-terminal — 暗终端 honest-review
+
+- **Source inspiration:** `20260414-hermes-agent/ppt/hermes-record.html` + `hermes-vs-openclaw.html`
+- **Key visual traits:** `#0a0c10` black, 56px cyber grid + CRT vignette + scanlines, window traffic-light chrome, `$ prompt` command-line headlines, mint-green `#7ed3a4` glow big text, JetBrains Mono throughout, stroke-only bar charts, blinking cursor, amber/green/red tag hierarchy, dark code box.
+- **When to use:** reviews of CLI / agent / dev tools with trace, diff, and benchmarks; when you want the "honest technical reviewer" voice.
+- **Path:** `templates/full-decks/hermes-cyber-terminal/index.html`
+
+## 5. obsidian-claude-gradient — GitHub 暗紫渐变
+
+- **Source inspiration:** `20260406-obsidian-claude/slides.html`
+- **Key visual traits:** GitHub-dark `#0d1117`, purple+blue radial ambient plus 60px masked grid, center-aligned layout, purple pill tags, three-stop gradient text `#a855f7→#60a5fa→#34d399`, GitHub-ish code palette (`#010409` bg + purple/blue/orange/green tokens), purple-left-border highlight block.
+- **When to use:** developer workflow / MCP / Agent / dev-tool tutorials; feels like GitHub Blog / Linear Changelog; config + steps heavy content.
+- **Path:** `templates/full-decks/obsidian-claude-gradient/index.html`
+
+## 6. testing-safety-alert — 红琥珀警示
+
+- **Source inspiration:** `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html`
+- **Key visual traits:** top and bottom 45° red-black hazard stripes, red strike-through negation headlines, L1/L2/L3 green/amber/red tier cards, alert-box with circular status dot, policy-yaml code block with red left border and `bad` keyword highlighting, red/green checklist, Q1 incident stacked bar chart.
+- **When to use:** safety / risk / incident post-mortem / red-team / pre-launch AI review / policy-as-code; when the audience needs to feel "this is serious, don't skim".
+- **Path:** `templates/full-decks/testing-safety-alert/index.html`
+
+## 7. xhs-pastel-card — 柔和马卡龙慢生活
+
+- **Source inspiration:** `20260412-obsidian-skills/html/xhs-obsidian-skills.html` + pastel patterns shared with `20260409` v2-白底版
+- **Key visual traits:** cream `#fef8f1` base, three soft blurred blobs, Playfair italic serif display headlines mixed with sans body, full-color 28px rounded macaron cards (peach / mint / sky / lilac / lemon / rose), italic Playfair `01-04` numerals, SVG donut chart, chip+page topbar.
+- **When to use:** lifestyle / personal-growth / slow-living / emotional content; when you want a "magazine, handmade, not-so-techy" feel; themes like rest, pause, softness.
+- **Path:** `templates/full-decks/xhs-pastel-card/index.html`
+
+## 8. dir-key-nav-minimal — 方向键 8 色极简
+
+- **Source inspiration:** `20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html`
+- **Key visual traits:** 8 slides each on its own mono background (indigo / cream / crimson / emerald / slate / violet / white / charcoal), each with its own accent color, 160px display headline + 4px stubby accent line divider, arrow `→` prefixed Mono list, bottom-left `← →` kbd hint plus bottom-right page label, huge breathing negative space.
+- **When to use:** keynote-style minimalist talk where you have something to say and not much to show; one idea per slide; talks / launches / public presentations.
+- **Path:** `templates/full-decks/dir-key-nav-minimal/index.html`
+
+---
+
+## Scenario decks (generic, reusable)
+
+These are not extracted from a single source — they are generic scaffolds for the most common presentation jobs. Each is visually distinctive and content-rich out of the box.
+
+| # | Name | Slides | Feel | When to use |
+|---|---|---|---|---|
+| 9  | `pitch-deck`       | 10 | White + blue→purple gradient, YC/VC vibe, big numbers, traction chart | Fundraising, startup pitch, investor meeting |
+| 10 | `product-launch`   | 8  | Dark hero + light content, warm orange→peach, feature cards, pricing tiers, CTA | Announcing a product, launch keynote |
+| 11 | `tech-sharing`     | 8  | GitHub-dark, JetBrains Mono, terminal code blocks, agenda + Q&A | 技术分享, internal tech talk, conference talk |
+| 12 | `weekly-report`    | 7  | Corporate clarity, 8-cell KPI grid, shipped list, 8-week bar chart, next-week table | 周报, team status update, business review |
+| 13 | `xhs-post`         | 9  | **3:4 @ 810×1080**, warm pastel, dashed sticker cards, page dots | 小红书 图文 post, Instagram carousel |
+| 14 | `course-module`    | 7  | Warm paper + Playfair serif, persistent left sidebar of learning objectives, MCQ self-check | 教学模块, online course, workshop module |
+
+Each folder: `index.html`, scoped `style.css` (prefixed `.tpl-<name>`), `README.md`. The `xhs-post` template overrides the default `.slide` box to fixed `810×1080` for 3:4 portrait.
+
+---
+
+## Authoring notes
+
+- Every template scopes its CSS under `.tpl-<name>` so two or more templates can load on the same page without collisions.
+- Swap demo content, but keep the structural classes — they are what gives each template its identity.
+- The shared runtime (`assets/runtime.js`) provides keyboard nav, fullscreen, overview grid, theme cycling — you don't need to add any JS.
+- Charts are hand-rolled SVG (no CDN dependency). Feel free to replace with chart.js / echarts if you need interactive data.
diff --git a/references/themes.md b/references/themes.md
index 9b8d7d3..d47a545 100644
--- a/references/themes.md
+++ b/references/themes.md
@@ -59,6 +59,35 @@ All themes define the same variables: `--bg`, `--bg-soft`, `--surface`,
 | `blueprint` | 蓝图工程 + 网格底纹 + 蒙太奇字体。 | 系统架构、工程蓝图 |
 | `terminal-green` | 绿屏终端 + 等宽 + 发光文字。 | CLI/black-hat/复古朋克 |
 
+## v2 additions
+
+### Light & professional
+
+| name | description | when to use |
+|---|---|---|
+| `corporate-clean` | 纯白 + 海军蓝 accent + Inter + 保守边框。 | 董事会汇报、B2B 销售、金融保险 |
+| `pitch-deck-vc` | YC 风白底 + 蓝紫渐变 accent + 大留白。 | 融资路演、种子轮、VC meeting |
+| `academic-paper` | 论文白 + 衬线正文 + 黑墨 + 蓝链接。 | 学术报告、研究分享、会议论文 |
+| `japanese-minimal` | 象牙白 + 朱红 accent + 极大留白 + Noto Serif。 | 品牌升级、匠人故事、禅意叙事 |
+| `engineering-whiteprint` | 白底 + 坐标纸网格 + 海军墨线 + 等宽字。 | 系统设计、API 文档、架构白皮书 |
+
+### Bold & editorial
+
+| name | description | when to use |
+|---|---|---|
+| `magazine-bold` | 奶油底 + 超大 Playfair 衬线 + 橙色 spot。 | 专栏文章、封面故事、品牌月刊 |
+| `news-broadcast` | 白底 + 红色竖条 + Oswald 大写 + 硬阴影。 | 突发新闻、发布通稿、数据播报 |
+| `midcentury` | 奶油底 + 芥末/青/焦橙 + 锐利几何。 | 设计史、家居美学、复古品牌 |
+| `retro-tv` | 暖奶油 + CRT 扫描线 + 琥珀橙 accent。 | 怀旧叙事、八零九零年代主题 |
+
+### Effect-heavy / dramatic
+
+| name | description | when to use |
+|---|---|---|
+| `cyberpunk-neon` | 纯黑 + 霓虹粉青黄 + 发光 + JetBrains Mono。 | 黑客、地下文化、赛博 talk |
+| `vaporwave` | 深紫 + 粉红青蓝渐变 + 晕染光斑。 | 音乐、潮流艺术、A E S T H E T I C |
+| `y2k-chrome` | 银铬渐变 + 彩虹 accent + 大圆角 + Space Grotesk。 | 千禧怀旧、时尚品牌、Gen-Z |
+
 ## How to apply
 
 ```html
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_01.png b/scripts/verify-output/animation-showcase/animation-showcase_01.png
new file mode 100644
index 0000000..1548c85
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_01.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_02.png b/scripts/verify-output/animation-showcase/animation-showcase_02.png
new file mode 100644
index 0000000..76dfeca
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_02.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_03.png b/scripts/verify-output/animation-showcase/animation-showcase_03.png
new file mode 100644
index 0000000..92a82ee
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_03.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_04.png b/scripts/verify-output/animation-showcase/animation-showcase_04.png
new file mode 100644
index 0000000..edad975
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_04.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_05.png b/scripts/verify-output/animation-showcase/animation-showcase_05.png
new file mode 100644
index 0000000..edeb82c
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_05.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_06.png b/scripts/verify-output/animation-showcase/animation-showcase_06.png
new file mode 100644
index 0000000..d12693c
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_06.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_07.png b/scripts/verify-output/animation-showcase/animation-showcase_07.png
new file mode 100644
index 0000000..0982285
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_07.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_08.png b/scripts/verify-output/animation-showcase/animation-showcase_08.png
new file mode 100644
index 0000000..590389d
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_08.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_09.png b/scripts/verify-output/animation-showcase/animation-showcase_09.png
new file mode 100644
index 0000000..2cb32e3
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_09.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_10.png b/scripts/verify-output/animation-showcase/animation-showcase_10.png
new file mode 100644
index 0000000..1207dc2
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_10.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_11.png b/scripts/verify-output/animation-showcase/animation-showcase_11.png
new file mode 100644
index 0000000..40a1142
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_11.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_12.png b/scripts/verify-output/animation-showcase/animation-showcase_12.png
new file mode 100644
index 0000000..e610685
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_12.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_13.png b/scripts/verify-output/animation-showcase/animation-showcase_13.png
new file mode 100644
index 0000000..1b9d101
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_13.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_14.png b/scripts/verify-output/animation-showcase/animation-showcase_14.png
new file mode 100644
index 0000000..baf30b1
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_14.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_15.png b/scripts/verify-output/animation-showcase/animation-showcase_15.png
new file mode 100644
index 0000000..275af51
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_15.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_16.png b/scripts/verify-output/animation-showcase/animation-showcase_16.png
new file mode 100644
index 0000000..54cf781
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_16.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_17.png b/scripts/verify-output/animation-showcase/animation-showcase_17.png
new file mode 100644
index 0000000..5642338
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_17.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_18.png b/scripts/verify-output/animation-showcase/animation-showcase_18.png
new file mode 100644
index 0000000..bc5e8e3
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_18.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_19.png b/scripts/verify-output/animation-showcase/animation-showcase_19.png
new file mode 100644
index 0000000..60b8783
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_19.png differ
diff --git a/scripts/verify-output/animation-showcase/animation-showcase_20.png b/scripts/verify-output/animation-showcase/animation-showcase_20.png
new file mode 100644
index 0000000..7c47904
Binary files /dev/null and b/scripts/verify-output/animation-showcase/animation-showcase_20.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_01.png b/scripts/verify-output/theme-showcase/theme-showcase_01.png
new file mode 100644
index 0000000..2641107
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_01.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_02.png b/scripts/verify-output/theme-showcase/theme-showcase_02.png
new file mode 100644
index 0000000..70827a6
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_02.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_03.png b/scripts/verify-output/theme-showcase/theme-showcase_03.png
new file mode 100644
index 0000000..bf4b2fd
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_03.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_04.png b/scripts/verify-output/theme-showcase/theme-showcase_04.png
new file mode 100644
index 0000000..72c1bb7
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_04.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_05.png b/scripts/verify-output/theme-showcase/theme-showcase_05.png
new file mode 100644
index 0000000..25b9741
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_05.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_06.png b/scripts/verify-output/theme-showcase/theme-showcase_06.png
new file mode 100644
index 0000000..31c7210
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_06.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_07.png b/scripts/verify-output/theme-showcase/theme-showcase_07.png
new file mode 100644
index 0000000..9dc2324
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_07.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_08.png b/scripts/verify-output/theme-showcase/theme-showcase_08.png
new file mode 100644
index 0000000..18d46e0
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_08.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_09.png b/scripts/verify-output/theme-showcase/theme-showcase_09.png
new file mode 100644
index 0000000..87b7fb0
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_09.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_10.png b/scripts/verify-output/theme-showcase/theme-showcase_10.png
new file mode 100644
index 0000000..506b57d
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_10.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_11.png b/scripts/verify-output/theme-showcase/theme-showcase_11.png
new file mode 100644
index 0000000..d4c924f
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_11.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_12.png b/scripts/verify-output/theme-showcase/theme-showcase_12.png
new file mode 100644
index 0000000..e9e2db0
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_12.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_13.png b/scripts/verify-output/theme-showcase/theme-showcase_13.png
new file mode 100644
index 0000000..00276c3
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_13.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_14.png b/scripts/verify-output/theme-showcase/theme-showcase_14.png
new file mode 100644
index 0000000..10c5cbd
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_14.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_15.png b/scripts/verify-output/theme-showcase/theme-showcase_15.png
new file mode 100644
index 0000000..a662def
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_15.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_16.png b/scripts/verify-output/theme-showcase/theme-showcase_16.png
new file mode 100644
index 0000000..aaadd4f
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_16.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_17.png b/scripts/verify-output/theme-showcase/theme-showcase_17.png
new file mode 100644
index 0000000..59a0c78
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_17.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_18.png b/scripts/verify-output/theme-showcase/theme-showcase_18.png
new file mode 100644
index 0000000..89c3bf8
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_18.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_19.png b/scripts/verify-output/theme-showcase/theme-showcase_19.png
new file mode 100644
index 0000000..78879a1
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_19.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_20.png b/scripts/verify-output/theme-showcase/theme-showcase_20.png
new file mode 100644
index 0000000..bf72132
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_20.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_21.png b/scripts/verify-output/theme-showcase/theme-showcase_21.png
new file mode 100644
index 0000000..d3cc2b4
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_21.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_22.png b/scripts/verify-output/theme-showcase/theme-showcase_22.png
new file mode 100644
index 0000000..e3c675c
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_22.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_23.png b/scripts/verify-output/theme-showcase/theme-showcase_23.png
new file mode 100644
index 0000000..ea2b5b3
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_23.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_24.png b/scripts/verify-output/theme-showcase/theme-showcase_24.png
new file mode 100644
index 0000000..c32bfa1
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_24.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_25.png b/scripts/verify-output/theme-showcase/theme-showcase_25.png
new file mode 100644
index 0000000..0ac63dd
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_25.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_26.png b/scripts/verify-output/theme-showcase/theme-showcase_26.png
new file mode 100644
index 0000000..8387e35
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_26.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_27.png b/scripts/verify-output/theme-showcase/theme-showcase_27.png
new file mode 100644
index 0000000..cf6a056
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_27.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_28.png b/scripts/verify-output/theme-showcase/theme-showcase_28.png
new file mode 100644
index 0000000..0e3c789
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_28.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_29.png b/scripts/verify-output/theme-showcase/theme-showcase_29.png
new file mode 100644
index 0000000..2eb9253
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_29.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_30.png b/scripts/verify-output/theme-showcase/theme-showcase_30.png
new file mode 100644
index 0000000..0032fd3
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_30.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_31.png b/scripts/verify-output/theme-showcase/theme-showcase_31.png
new file mode 100644
index 0000000..69999f3
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_31.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_32.png b/scripts/verify-output/theme-showcase/theme-showcase_32.png
new file mode 100644
index 0000000..18f6cb9
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_32.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_33.png b/scripts/verify-output/theme-showcase/theme-showcase_33.png
new file mode 100644
index 0000000..0ca7725
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_33.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_34.png b/scripts/verify-output/theme-showcase/theme-showcase_34.png
new file mode 100644
index 0000000..ed4bb53
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_34.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_35.png b/scripts/verify-output/theme-showcase/theme-showcase_35.png
new file mode 100644
index 0000000..e40c0d3
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_35.png differ
diff --git a/scripts/verify-output/theme-showcase/theme-showcase_36.png b/scripts/verify-output/theme-showcase/theme-showcase_36.png
new file mode 100644
index 0000000..2cfef8a
Binary files /dev/null and b/scripts/verify-output/theme-showcase/theme-showcase_36.png differ
diff --git a/templates/animation-showcase.html b/templates/animation-showcase.html
index 8007074..91afeef 100644
--- a/templates/animation-showcase.html
+++ b/templates/animation-showcase.html
@@ -1,63 +1,172 @@
 <!DOCTYPE html>
-<html lang="zh-CN" data-theme="aurora">
+<html lang="en" data-theme="aurora">
 <head>
-<meta charset="utf-8"><title>Animation Showcase — html-ppt</title>
+<meta charset="utf-8"><title>Animation + FX Showcase — html-ppt</title>
 <link rel="stylesheet" href="../assets/fonts.css">
 <link rel="stylesheet" href="../assets/base.css">
 <link rel="stylesheet" id="theme-link" href="../assets/themes/aurora.css">
 <link rel="stylesheet" href="../assets/animations/animations.css">
 <style>
-.anim-box{margin:24px auto 0;width:640px;height:240px;border-radius:var(--radius-lg);background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--text-1);box-shadow:var(--shadow-lg);border:1px solid var(--border)}
-.anim-indicator{position:absolute;top:24px;right:40px;font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.1em}
+  .fx-stage{
+    position:relative;
+    margin:20px auto 0;
+    width:min(900px, 92%);
+    height:380px;
+    border-radius:var(--radius-lg, 16px);
+    background:rgba(10,12,22,0.55);
+    border:1px solid var(--border,#2a2a3a);
+    box-shadow:var(--shadow-lg, 0 20px 60px rgba(0,0,0,.4));
+    overflow:hidden;
+  }
+  .fx-label{
+    position:absolute;top:14px;left:16px;z-index:5;
+    font-family:var(--font-mono, ui-monospace,Menlo,monospace);
+    font-size:11px;letter-spacing:.14em;color:var(--text-3,#a0a0b8);
+    text-transform:uppercase;
+    background:rgba(0,0,0,0.35);padding:4px 10px;border-radius:999px;
+    border:1px solid rgba(255,255,255,0.08);
+  }
+  .fx-replay{
+    position:absolute;top:12px;right:14px;z-index:5;
+    appearance:none;cursor:pointer;
+    padding:7px 14px;border-radius:999px;
+    background:linear-gradient(135deg, var(--accent,#7c5cff), var(--accent-2,#22d3ee));
+    color:#fff;font:600 12px system-ui,sans-serif;
+    border:0;letter-spacing:.05em;
+    box-shadow:0 4px 16px rgba(124,92,255,0.35);
+  }
+  .fx-replay:hover{ filter:brightness(1.1); transform:translateY(-1px); }
+  .fx-indicator{position:absolute;top:24px;right:40px;font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.1em}
+  .anim-box{margin:24px auto 0;width:640px;height:240px;border-radius:var(--radius-lg);background:var(--grad-soft);display:flex;align-items:center;justify-content:center;font-size:44px;font-weight:800;color:var(--text-1);box-shadow:var(--shadow-lg);border:1px solid var(--border)}
 </style>
 </head>
 <body>
 <div class="deck"></div>
+
 <script>
-const list=[
-  ['fade-up','从下向上淡入。默认的万能入场。'],
-  ['fade-down','从上向下淡入。标题行常用。'],
-  ['fade-left','从左侧水平滑入。'],
-  ['fade-right','从右侧水平滑入。'],
-  ['rise-in','带轻微模糊从下方升起。高级感入场。'],
-  ['drop-in','从上方落下。强调感。'],
-  ['zoom-pop','弹性缩放，先过 1.04 再回到 1。按钮/数字常用。'],
-  ['blur-in','去模糊聚焦。封面推荐。'],
-  ['glitch-in','故障艺术抖动入场。'],
-  ['typewriter','打字机逐字显示。'],
-  ['neon-glow','文字周期性发光。霓虹主题推荐。'],
-  ['shimmer-sweep','表面反光扫过。金属质感。'],
-  ['gradient-flow','渐变文字水平流动。'],
-  ['stagger-list','子元素错峰出现。'],
-  ['counter-up','数字从 0 tick 到目标值。KPI 必备。'],
-  ['path-draw','SVG 线条勾勒动效。'],
-  ['parallax-tilt','鼠标悬浮时 3D 倾斜。'],
-  ['card-flip-3d','卡片 Y 轴翻转。'],
-  ['cube-rotate-3d','立方体旋转入场。'],
-  ['page-turn-3d','页面翻页效果。'],
-  ['perspective-zoom','远景拉近。'],
-  ['marquee-scroll','跑马灯横向滚动。'],
-  ['kenburns','Ken Burns 缓慢推拉。图片/封面必备。'],
-  ['confetti-burst','彩纸爆炸。成就 / 结语页。'],
-  ['spotlight','聚光灯圆形揭示。'],
-  ['morph-shape','SVG 形状变形。'],
-  ['ripple-reveal','从一角涟漪展开。']
+const FX = [
+  ['particle-burst',    'Particles explode from center, gravity + fade, re-bursts every ~2.5s.'],
+  ['confetti-cannon',   'Colored rotating rects arcing from both bottom corners.'],
+  ['firework',          'Rockets launch from the bottom and burst into colored sparks.'],
+  ['starfield',         '3D perspective starfield — infinite flythrough.'],
+  ['matrix-rain',       'Classic green katakana + hex columns raining down.'],
+  ['knowledge-graph',   'Force-directed graph, 28 labeled nodes, live physics + springs.'],
+  ['neural-net',        '4-6-6-3 feedforward net with pulses traveling along edges.'],
+  ['constellation',     'Drifting points connect when close — ambient background.'],
+  ['orbit-ring',        '5 concentric rings with dots rotating at different speeds.'],
+  ['galaxy-swirl',      'Logarithmic spiral with ~800 particles.'],
+  ['word-cascade',      'Words fall from top and pile up at the bottom.'],
+  ['letter-explode',    'Letters fly in from random directions, loops.'],
+  ['chain-react',       'Row of 8 circles — a wave pulse dominoes across them.'],
+  ['magnetic-field',    'Particles follow sine curves leaving gradient trails.'],
+  ['data-stream',       'Rows of scrolling hex/binary text, cyberpunk feel.'],
+  ['gradient-blob',     '4 drifting blurred radial gradients (additive blending).'],
+  ['sparkle-trail',     'Sparkles emit at your cursor (auto-wiggles if idle).'],
+  ['shockwave',         'Expanding rings emanating from center, looping.'],
+  ['typewriter-multi',  'Three lines typing concurrently with blinking block cursors.'],
+  ['counter-explosion', 'Number counts 0 → 2400, bursts particles, resets.']
 ];
-const deck=document.querySelector('.deck');
-list.forEach((a,i)=>{
-  const s=document.createElement('section');
-  s.className='slide';s.setAttribute('data-title',a[0]);
-  s.innerHTML=`
-    <span class="anim-indicator">${i+1}/${list.length}</span>
-    <p class="kicker">Animation · ${String(i+1).padStart(2,'0')}</p>
+
+const CSS_ANIMS = [
+  ['fade-up','Translate from +32 px, fade.'],
+  ['fade-down','Translate from -32 px, fade.'],
+  ['fade-left','From left.'],
+  ['fade-right','From right.'],
+  ['rise-in','Rise + blur-off.'],
+  ['drop-in','Drop from above.'],
+  ['zoom-pop','Elastic scale pop.'],
+  ['blur-in','Blur clears.'],
+  ['glitch-in','Glitch jitter.'],
+  ['typewriter','Typewriter reveal.'],
+  ['neon-glow','Neon pulse.'],
+  ['shimmer-sweep','Sheen sweep.'],
+  ['gradient-flow','Gradient flow.'],
+  ['stagger-list','Staggered children.'],
+  ['counter-up','Number tick.'],
+  ['path-draw','SVG strokes draw.'],
+  ['parallax-tilt','3D hover tilt.'],
+  ['card-flip-3d','Y-axis flip.'],
+  ['cube-rotate-3d','Cube rotate.'],
+  ['page-turn-3d','Page turn.'],
+  ['perspective-zoom','Pull from -400 Z.'],
+  ['marquee-scroll','Infinite marquee.'],
+  ['kenburns','Ken Burns zoom.'],
+  ['confetti-burst','Pseudo confetti.'],
+  ['spotlight','Circular clip reveal.'],
+  ['morph-shape','SVG d morph.'],
+  ['ripple-reveal','Corner ripple.']
+];
+
+const deck = document.querySelector('.deck');
+const total = FX.length + CSS_ANIMS.length;
+
+// Build FX slides (1..20)
+FX.forEach((f, i) => {
+  const idx = i + 1;
+  const [name, desc] = f;
+  const sec = document.createElement('section');
+  sec.className = 'slide';
+  sec.setAttribute('data-title', 'fx / ' + name);
+
+  const extraAttrs = name === 'letter-explode'
+      ? 'data-fx-text-value="' + name.toUpperCase() + '"'
+    : name === 'counter-explosion'
+      ? 'data-fx-to="2400"'
+    : name === 'typewriter-multi'
+      ? 'data-fx-line1="> initializing knowledge graph..." data-fx-line2="> loading 28 concept nodes" data-fx-line3="> agent ready. awaiting prompt_"'
+    : '';
+
+  sec.innerHTML = `
+    <span class="fx-indicator">${idx}/${total}</span>
+    <p class="kicker">FX · canvas · ${String(idx).padStart(2,'0')}</p>
+    <h1 class="h1"><span class="gradient-text">${name}</span></h1>
+    <p class="lede">${desc}</p>
+    <div class="fx-stage">
+      <span class="fx-label">data-fx="${name}"</span>
+      <button class="fx-replay" type="button">Replay</button>
+      <div class="fx-host" style="position:absolute;inset:0;" data-fx="${name}" ${extraAttrs}></div>
+    </div>
+    <div class="deck-footer"><span class="dim2">Press → for next slide</span><span class="slide-number" data-current="${idx}" data-total="${total}"></span></div>
+  `;
+  deck.appendChild(sec);
+
+  // Wire Replay button
+  sec.querySelector('.fx-replay').addEventListener('click', () => {
+    const host = sec.querySelector('.fx-host');
+    const name2 = host.getAttribute('data-fx');
+    const attrs = {};
+    for (const a of host.attributes) attrs[a.name] = a.value;
+    const parent = host.parentNode;
+    // stop existing
+    if (window.__hpxActive && window.__hpxActive.has(host)){
+      try{ window.__hpxActive.get(host).stop(); }catch(e){}
+      window.__hpxActive.delete(host);
+    }
+    const fresh = document.createElement('div');
+    for (const k in attrs) fresh.setAttribute(k, attrs[k]);
+    fresh.style.cssText = host.style.cssText;
+    parent.replaceChild(fresh, host);
+    if (window.__hpxReinit) window.__hpxReinit(sec);
+  });
+});
+
+// Build CSS animation slides (legacy, kept for completeness)
+CSS_ANIMS.forEach((a, i) => {
+  const idx = FX.length + i + 1;
+  const sec = document.createElement('section');
+  sec.className = 'slide';
+  sec.setAttribute('data-title', a[0]);
+  sec.innerHTML = `
+    <span class="fx-indicator">${idx}/${total}</span>
+    <p class="kicker">CSS anim · ${String(idx).padStart(2,'0')}</p>
     <h1 class="h1"><span class="gradient-text">${a[0]}</span></h1>
     <p class="lede">${a[1]}</p>
     <div class="anim-box anim-${a[0]}" data-anim="${a[0]}" data-anim-target>${a[0]}</div>
-    <div class="deck-footer"><span class="dim2">按 A 循环所有动效</span><span class="slide-number" data-current="${i+1}" data-total="${list.length}"></span></div>
-    <div class="notes">每次切换到这张 slide，runtime 会自动重新触发 [data-anim] 元素的入场动画。</div>
+    <div class="deck-footer"><span class="dim2">Press A to cycle</span><span class="slide-number" data-current="${idx}" data-total="${total}"></span></div>
   `;
-  deck.appendChild(s);
+  deck.appendChild(sec);
 });
 </script>
 <script src="../assets/runtime.js"></script>
+<script src="../assets/animations/fx-runtime.js"></script>
 </body></html>
diff --git a/templates/deck-png/.DS_Store b/templates/deck-png/.DS_Store
new file mode 100644
index 0000000..5008ddf
Binary files /dev/null and b/templates/deck-png/.DS_Store differ
diff --git a/templates/deck.png b/templates/deck.png
new file mode 100644
index 0000000..d23e2b8
Binary files /dev/null and b/templates/deck.png differ
diff --git a/templates/full-decks-index.html b/templates/full-decks-index.html
new file mode 100644
index 0000000..a8dd392
--- /dev/null
+++ b/templates/full-decks-index.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><title>Full-Deck Gallery — html-ppt v2</title>
+<link rel="stylesheet" href="../assets/fonts.css">
+<link rel="stylesheet" href="../assets/base.css">
+<style>
+  html,body{background:#0b0c10;color:#e8ebf4;font-family:var(--font-sans)}
+  .deck{background:#0b0c10}
+  .slide{padding:60px 80px;color:#e8ebf4;background:transparent;display:flex;flex-direction:column}
+  .slide h1{color:#fff;font-size:48px;margin:0 0 6px;letter-spacing:-.02em}
+  .slide .sub{color:#aab0c0;font-size:18px;margin:0 0 22px}
+  .frame-wrap{flex:1;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
+    box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;background:#fff}
+  iframe.tpl{position:absolute;inset:0;width:200%;height:200%;border:0;
+    transform:scale(.5);transform-origin:top left}
+  .meta{position:absolute;top:24px;right:40px;font-family:'JetBrains Mono',monospace;
+    font-size:12px;color:#6a7086;letter-spacing:.14em;text-transform:uppercase;z-index:30}
+  .tag{display:inline-block;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.08);
+    color:#cfd3dc;font-size:11px;margin-right:6px}
+  .cover{align-items:center;justify-content:center;text-align:center}
+  .cover h1{font-size:84px;background:linear-gradient(135deg,#60a5fa,#a78bfa,#f472b6);
+    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+  .cover p{color:#aab0c0;max-width:60ch;font-size:20px}
+  .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
+</style>
+</head>
+<body>
+<div class="deck">
+
+<section class="slide cover">
+  <p class="kicker" style="color:#a78bfa">HTML-PPT v2 · Full-Deck Gallery</p>
+  <h1>14 full-deck templates</h1>
+  <p>Press → to browse. Each slide is a live iframe preview of a complete, multi-slide deck template. Open any <code>templates/full-decks/&lt;name&gt;/index.html</code> to see the full deck, or copy the folder to scaffold your own.</p>
+  <div class="legend">
+    <span class="tag">8 extracted from real decks</span>
+    <span class="tag">6 scenario scaffolds</span>
+    <span class="tag">scoped .tpl-&lt;name&gt; CSS</span>
+    <span class="tag">36 themes compatible</span>
+  </div>
+</section>
+
+<!-- Template preview slides generated via JS below -->
+
+</div>
+
+<script>
+const TPLS = [
+  ['xhs-white-editorial',      '白底杂志风',        'extracted', 'xhs posts, editorial lifestyle'],
+  ['graphify-dark-graph',      '暗底知识图谱',      'extracted', 'AI/graph/data products'],
+  ['knowledge-arch-blueprint', '奶油蓝图架构',      'extracted', 'architecture, systems thinking'],
+  ['hermes-cyber-terminal',    '暗终端 cyber',      'extracted', 'devtool, honest-review, agent demos'],
+  ['obsidian-claude-gradient', 'GitHub 暗紫渐变',   'extracted', 'tool walkthroughs, LLM product'],
+  ['testing-safety-alert',     '红琥珀警示',        'extracted', 'security, incident review, AI safety'],
+  ['xhs-pastel-card',          '柔和马卡龙',        'extracted', 'lifestyle, soft emotional'],
+  ['dir-key-nav-minimal',      '方向键 8 色极简',    'extracted', 'keynote, one-idea-per-slide'],
+  ['pitch-deck',               'Pitch Deck YC 风',  'scenario',  'fundraising, startup pitch'],
+  ['product-launch',           'Product Launch',    'scenario',  'product announcement, launch keynote'],
+  ['tech-sharing',             'Tech Sharing 技术分享','scenario','internal tech talk, conference talk'],
+  ['weekly-report',            'Weekly Report 周报','scenario',  'status update, business review'],
+  ['xhs-post',                 '小红书 图文 9 屏 3:4','scenario', 'xiaohongshu / ig carousel'],
+  ['course-module',            'Course Module 教学模块','scenario','online course, workshop module']
+];
+
+const deck = document.querySelector('.deck');
+TPLS.forEach((t,i)=>{
+  const s = document.createElement('section');
+  s.className = 'slide';
+  s.setAttribute('data-title',t[0]);
+  s.innerHTML = `
+    <span class="meta">${i+1}/${TPLS.length+1}</span>
+    <h1>${t[0]}</h1>
+    <p class="sub">${t[1]} · <span class="tag">${t[2]}</span> ${t[3]}</p>
+    <div class="frame-wrap">
+      <iframe class="tpl" src="full-decks/${t[0]}/index.html" loading="eager" title="${t[0]}"></iframe>
+    </div>`;
+  deck.appendChild(s);
+});
+</script>
+<script src="../assets/runtime.js"></script>
+</body></html>
diff --git a/templates/full-decks/course-module/README.md b/templates/full-decks/course-module/README.md
new file mode 100644
index 0000000..470f901
--- /dev/null
+++ b/templates/full-decks/course-module/README.md
@@ -0,0 +1,8 @@
+# course-module · 教学模块
+
+7-slide teaching module: cover (title + meta), objectives, core concept, worked example, exercise, check-your-understanding (MCQ), summary.
+
+Academic but friendly look: warm off-white paper, Playfair Display display type, a green/terracotta accent pair. A persistent **left sidebar** on content slides lists the module's learning objectives and checks them off as you progress — students always know where they are.
+
+**Use when:** online course modules, lecture handouts, onboarding curricula, workshop units.
+**Feel:** a good textbook opened to a chapter — structured, quiet, encouraging.
diff --git a/templates/full-decks/course-module/index.html b/templates/full-decks/course-module/index.html
new file mode 100644
index 0000000..51eeb6e
--- /dev/null
+++ b/templates/full-decks/course-module/index.html
@@ -0,0 +1,189 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Module 04 · Recursion · CS101</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-course-module">
+<div class="deck">
+
+  <!-- 1. Cover -->
+  <section class="slide full" data-title="Cover">
+    <p class="kicker">CS 101 · MODULE 04</p>
+    <h1 class="h1 mt-s">Recursion: solving<br>problems by <em>calling yourself</em>.</h1>
+    <p class="lede mt-l" style="max-width:62ch">In this module you'll learn why a function that calls itself is not a trick, but the most natural way to describe problems that contain smaller copies of themselves.</p>
+    <div class="row mt-l" style="gap:16px">
+      <span class="pill-academic">~ 45 min read</span>
+      <span class="pill-academic">prereq · functions, if/else</span>
+      <span class="pill-academic">lang · Python</span>
+    </div>
+    <div class="deck-footer"><span>Dr. A. Rivera · Spring 2026</span><span class="slide-number" data-current="1" data-total="7"></span></div>
+  </section>
+
+  <!-- 2. Objectives -->
+  <section class="slide" data-title="Objectives">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="current">Define recursion</li>
+        <li>Identify a base case</li>
+        <li>Trace a recursive call</li>
+        <li>Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Module progress</h5>
+      <p class="dim" style="font-size:13px">Page 2 of 7 · ~5 min in</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">OBJECTIVES</p>
+      <h2 class="h2 mt-s">By the end, you will be able to…</h2>
+      <div class="stack mt-l">
+        <div class="concept-box"><h4>① Explain recursion in one sentence.</h4><p class="dim">"A function that solves a problem by calling itself on a smaller version of that problem."</p></div>
+        <div class="concept-box"><h4>② Write a base case that always terminates.</h4><p class="dim">Every recursive function must have an exit door, or it runs forever.</p></div>
+        <div class="concept-box"><h4>③ Trace a call stack on paper.</h4><p class="dim">Given <code>fact(4)</code>, draw the stack frames top-to-bottom.</p></div>
+        <div class="concept-box"><h4>④ Convert a while-loop to a recursive equivalent.</h4><p class="dim">And explain when one is clearer than the other.</p></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 3. Concept -->
+  <section class="slide" data-title="Concept">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="current">Identify a base case</li>
+        <li>Trace a recursive call</li>
+        <li>Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Key terms</h5>
+      <p class="dim" style="font-size:13px">base case · recursive case · call stack · tail call</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">CORE CONCEPT</p>
+      <h2 class="h2 mt-s">Two parts, always.</h2>
+      <p class="lede mt-m">A recursive function has exactly two things inside it: a <b>base case</b> (when to stop) and a <b>recursive case</b> (how to shrink the problem before calling yourself).</p>
+      <div class="callout">
+        <b>Rule of thumb.</b> If you can't name the base case out loud, don't write the recursion yet. Draw it on paper first.
+      </div>
+      <div class="grid g2 mt-l">
+        <div class="concept-box"><h4>Base case</h4><p class="dim">The smallest possible input — one the function answers directly, without calling itself.</p><p class="pill-academic">e.g. <b>n == 0</b></p></div>
+        <div class="concept-box"><h4>Recursive case</h4><p class="dim">Every other input — delegate to a smaller version of the same problem.</p><p class="pill-academic">e.g. <b>n × fact(n-1)</b></p></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 4. Example -->
+  <section class="slide" data-title="Example">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="done">Identify a base case</li>
+        <li class="current">Trace a recursive call</li>
+        <li>Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Try it yourself</h5>
+      <p class="dim" style="font-size:13px">Open repl.it and run the code on the right. Then try <code>fact(10)</code>.</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">WORKED EXAMPLE</p>
+      <h2 class="h2 mt-s">Factorial, 7 lines.</h2>
+      <div class="code mt-m"><pre style="margin:0"><span class="cmt"># fact(n) = n × (n-1) × … × 1,  and fact(0) = 1</span>
+<span class="kw">def</span> fact(n):
+    <span class="kw">if</span> n == <span class="str">0</span>:          <span class="cmt"># base case</span>
+        <span class="kw">return</span> <span class="str">1</span>
+    <span class="kw">return</span> n * fact(n - <span class="str">1</span>)   <span class="cmt"># recursive case</span>
+
+<span class="kw">print</span>(fact(<span class="str">4</span>))   <span class="cmt"># → 24</span></pre></div>
+      <div class="callout">
+        <b>Trace fact(4).</b> 4 × fact(3) → 4 × (3 × fact(2)) → 4 × 3 × (2 × fact(1)) → 4 × 3 × 2 × 1 × fact(0) → 4 × 3 × 2 × 1 × 1 = <b>24</b>.
+      </div>
+    </div>
+  </section>
+
+  <!-- 5. Exercise -->
+  <section class="slide" data-title="Exercise">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="done">Identify a base case</li>
+        <li class="done">Trace a recursive call</li>
+        <li class="current">Convert loop ↔ recursion</li>
+        <li>Recognize when recursion helps</li>
+      </ul>
+      <h5>Time</h5>
+      <p class="dim" style="font-size:13px">~10 minutes · solo</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">EXERCISE 4.1</p>
+      <h2 class="h2 mt-s">Write <em>sum_to(n)</em>.</h2>
+      <p class="lede mt-m">Return <code>1 + 2 + … + n</code> using recursion — no loops allowed.</p>
+      <div class="exercise mt-l">
+        <p style="margin:0;font-size:18px;color:var(--text-1)"><b>Your task</b></p>
+        <ol style="color:var(--text-2);line-height:1.8;margin:10px 0 0">
+          <li>Write the base case. What does <code>sum_to(0)</code> return?</li>
+          <li>Write the recursive case in terms of <code>sum_to(n - 1)</code>.</li>
+          <li>Test it: <code>sum_to(5) == 15</code>, <code>sum_to(10) == 55</code>.</li>
+          <li>Bonus: what happens if you call <code>sum_to(-3)</code>? Fix it.</li>
+        </ol>
+      </div>
+      <p class="dim mt-m" style="font-size:14px">Stuck? Remember: a base case is the smallest input you already know the answer to.</p>
+    </div>
+  </section>
+
+  <!-- 6. Check understanding -->
+  <section class="slide" data-title="Check">
+    <aside class="sidebar">
+      <div class="brand">CS 101 · M04</div>
+      <h5>Learning objectives</h5>
+      <ul class="obj-list">
+        <li class="done">Define recursion</li>
+        <li class="done">Identify a base case</li>
+        <li class="done">Trace a recursive call</li>
+        <li class="done">Convert loop ↔ recursion</li>
+        <li class="current">Recognize when recursion helps</li>
+      </ul>
+      <h5>Self-assess</h5>
+      <p class="dim" style="font-size:13px">You should get 3/3.</p>
+    </aside>
+    <div class="main">
+      <p class="kicker">CHECK YOUR UNDERSTANDING</p>
+      <h2 class="h2 mt-s">Which function will recurse forever?</h2>
+      <div class="mt-l">
+        <div class="mcq"><div class="letter">A</div><div><b>def f(n): return 1 if n == 0 else n * f(n - 1)</b><p class="dim" style="font-size:13px;margin:4px 0 0">Base case <code>n == 0</code>, shrinks toward it. Terminates.</p></div></div>
+        <div class="mcq correct"><div class="letter">B</div><div><b>def f(n): return n + f(n + 1)</b><p class="dim" style="font-size:13px;margin:4px 0 0"><b style="color:var(--accent)">✓ Correct.</b> No base case, and <code>n</code> grows — infinite recursion.</p></div></div>
+        <div class="mcq"><div class="letter">C</div><div><b>def f(n): return n if n &lt; 2 else f(n - 1) + f(n - 2)</b><p class="dim" style="font-size:13px;margin:4px 0 0">Classic Fibonacci. Base case on <code>n &lt; 2</code>. Terminates.</p></div></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 7. Summary -->
+  <section class="slide full" data-title="Summary">
+    <p class="kicker">SUMMARY · MODULE 04</p>
+    <h1 class="h1 mt-s">You can now…</h1>
+    <div class="grid g2 mt-l">
+      <div class="concept-box"><h4>✓ Define recursion</h4><p class="dim">A function that calls itself on a smaller input.</p></div>
+      <div class="concept-box"><h4>✓ Write a safe base case</h4><p class="dim">Every recursion needs an exit door.</p></div>
+      <div class="concept-box"><h4>✓ Trace a call stack</h4><p class="dim">You can unwind <code>fact(4)</code> by hand.</p></div>
+      <div class="concept-box"><h4>✓ Judge when to use it</h4><p class="dim">Trees and self-similar problems → recursion. Flat iteration → loop.</p></div>
+    </div>
+    <div class="callout mt-l">
+      <b>Up next · Module 05.</b> Divide &amp; conquer: merge sort. We'll use everything you just learned — but on lists, not numbers.
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>
diff --git a/templates/full-decks/course-module/style.css b/templates/full-decks/course-module/style.css
new file mode 100644
index 0000000..5620ffe
--- /dev/null
+++ b/templates/full-decks/course-module/style.css
@@ -0,0 +1,46 @@
+/* course-module — academic but friendly */
+.tpl-course-module{
+  --bg:#fbfaf6;--bg-soft:#f4f1e8;--surface:#ffffff;--surface-2:#f6f3ea;
+  --border:rgba(60,45,20,.12);--border-strong:rgba(60,45,20,.24);
+  --text-1:#2a2418;--text-2:#5a5140;--text-3:#8a7f68;
+  --accent:#2d7d6e;--accent-2:#d88a3a;--accent-3:#c4593f;
+  --grad:linear-gradient(135deg,#2d7d6e,#4ea893);
+  --radius:14px;--radius-lg:20px;
+  --shadow:0 12px 30px rgba(60,45,20,.07);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-course-module .slide{padding:64px 80px;background:var(--bg);display:grid;grid-template-columns:260px 1fr;gap:56px;align-content:start}
+.tpl-course-module .slide.full{grid-template-columns:1fr;display:flex;flex-direction:column;justify-content:center}
+.tpl-course-module .sidebar{border-right:1px solid var(--border);padding-right:32px;position:relative}
+.tpl-course-module .sidebar .brand{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--accent)}
+.tpl-course-module .sidebar .brand::before{content:"✦ ";color:var(--accent-2)}
+.tpl-course-module .sidebar h5{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--text-3);margin:32px 0 12px}
+.tpl-course-module .obj-list{list-style:none;padding:0;margin:0;font-size:13px;color:var(--text-2);line-height:1.5}
+.tpl-course-module .obj-list li{padding:8px 0 8px 22px;position:relative;border-bottom:1px dashed var(--border)}
+.tpl-course-module .obj-list li::before{content:"○";position:absolute;left:0;top:8px;color:var(--accent)}
+.tpl-course-module .obj-list li.done::before{content:"●";color:var(--accent)}
+.tpl-course-module .obj-list li.current{color:var(--text-1);font-weight:700}
+.tpl-course-module .obj-list li.current::before{content:"▸";color:var(--accent-2)}
+.tpl-course-module .main{min-width:0}
+.tpl-course-module .h1{font-family:'Playfair Display',serif;font-size:72px;line-height:1.02;font-weight:800;letter-spacing:-.02em;color:var(--text-1)}
+.tpl-course-module .h2{font-family:'Playfair Display',serif;font-size:48px;line-height:1.1;font-weight:700;letter-spacing:-.015em;color:var(--text-1)}
+.tpl-course-module h3,.tpl-course-module h4{color:var(--text-1)}
+.tpl-course-module .kicker{color:var(--accent-2);font-size:12px;font-weight:700;letter-spacing:.14em}
+.tpl-course-module .lede{font-size:20px;color:var(--text-2);line-height:1.7}
+.tpl-course-module .callout{border-left:4px solid var(--accent-2);background:var(--surface-2);padding:20px 24px;border-radius:0 var(--radius) var(--radius) 0;margin-top:24px}
+.tpl-course-module .callout b{color:var(--accent-2)}
+.tpl-course-module .concept-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;box-shadow:var(--shadow)}
+.tpl-course-module .concept-box h4{margin-top:0;color:var(--accent)}
+.tpl-course-module .exercise{background:#fff8ed;border:1.5px dashed var(--accent-2);border-radius:var(--radius);padding:24px 28px}
+.tpl-course-module .exercise::before{content:"✎ Exercise";display:block;font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--accent-2);margin-bottom:10px;text-transform:uppercase}
+.tpl-course-module .code{background:#2a2418;color:#f4f1e8;border-radius:var(--radius);padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.7;overflow:auto}
+.tpl-course-module .code .cmt{color:#8a7f68;font-style:italic}
+.tpl-course-module .code .kw{color:#e8a770}
+.tpl-course-module .code .str{color:#8ec6b2}
+.tpl-course-module .mcq{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 22px;margin-bottom:10px;display:flex;gap:14px;align-items:flex-start;cursor:pointer}
+.tpl-course-module .mcq .letter{flex:none;width:28px;height:28px;border-radius:50%;border:2px solid var(--text-3);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:var(--text-2)}
+.tpl-course-module .mcq.correct{border-color:var(--accent);background:rgba(45,125,110,.06)}
+.tpl-course-module .mcq.correct .letter{border-color:var(--accent);background:var(--accent);color:#fff}
+.tpl-course-module .pill-academic{display:inline-block;padding:4px 12px;border-radius:4px;background:var(--surface-2);border:1px solid var(--border);font-size:12px;color:var(--text-2);font-family:'JetBrains Mono',monospace}
+.tpl-course-module .slide.full .h1{font-size:88px}
+.tpl-course-module .deck-footer{color:var(--text-3)}
diff --git a/templates/full-decks/dir-key-nav-minimal/README.md b/templates/full-decks/dir-key-nav-minimal/README.md
new file mode 100644
index 0000000..1d65ebb
--- /dev/null
+++ b/templates/full-decks/dir-key-nav-minimal/README.md
@@ -0,0 +1,11 @@
+# dir-key-nav-minimal
+
+8 张幻灯片，每张一个纯色/渐变 mono-background（indigo / cream / crimson / emerald / slate / violet / white / charcoal）。灵感直接来自 `20260405 演示幻灯片【方向键版】.html` —— 八个 `t-*` 主题类，每张幻灯一个背景，方向键切换，极简 editorial 气质。
+
+**Visual traits:** 每张独立背景色 + 单一 accent、巨大 160px 标题无副图、4px 短粗 accent line divider、arrow-prefixed mono list、左下 `← →` 键盘提示 + 右下 page label、全屏 breathing negative space、JetBrains Mono 做数字 / 代码 / 键盘 hint、每个背景有自己的 `.dk-accent` 色。
+
+**Use when:** 有话要说、没太多图、希望用排版节奏推进观众注意力；keynote 式的极简讲稿；每张幻灯只讲一件事；公开分享 / keynote / 演讲稿。
+
+**Source inspiration:** `20260405-Karpathy-知识库/20260405 演示幻灯片【方向键版】.html`.
+
+**Path:** `templates/full-decks/dir-key-nav-minimal/index.html`
diff --git a/templates/full-decks/dir-key-nav-minimal/index.html b/templates/full-decks/dir-key-nav-minimal/index.html
new file mode 100644
index 0000000..d30f0b1
--- /dev/null
+++ b/templates/full-decks/dir-key-nav-minimal/index.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Dir-Key Nav Minimal</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-dir-key-nav-minimal">
+<div class="deck">
+
+  <!-- 1. COVER · indigo -->
+  <section class="slide t-indigo is-active">
+    <div class="dk-snum">01 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Karpathy LLM Wiki</div>
+      <h1 class="dk-h0">为什么笔记<br>治不了 <span class="dk-accent">LLM</span></h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">8 种背景、8 张幻灯，一个关于如何把 AI 变成「长期记忆外挂」的最短陈述。<strong>按 → 继续。</strong></p>
+    </div>
+    <div class="dk-keyhint">nav · <kbd>←</kbd> <kbd>→</kbd> · <kbd>space</kbd></div>
+    <div class="dk-page">cover</div>
+  </section>
+
+  <!-- 2. SECTION · cream -->
+  <section class="slide t-cream">
+    <div class="dk-snum">02 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Chapter 01</div>
+      <h1 class="dk-h0">The <span class="dk-accent">Problem</span>.</h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">Token 上限是一个物理事实。你每次和 LLM 说话，它都是一个失忆症患者。</p>
+    </div>
+    <div class="dk-keyhint">chapter · 01 / 04</div>
+    <div class="dk-page">section</div>
+  </section>
+
+  <!-- 3. CONTENT · crimson -->
+  <section class="slide t-crimson">
+    <div class="dk-snum">03 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Symptoms</div>
+      <h2 class="dk-h1">四种你已经<br>受够的<br><span class="dk-accent">遗忘</span>。</h2>
+      <ul class="dk-list">
+        <li>昨天聊过的项目，今天重新解释一遍</li>
+        <li>上下文窗口一到，它开始「编造记忆」</li>
+        <li>不同 session 之间毫无关联，就像第一次见</li>
+        <li>你的真正偏好从未被记住，每次都要 re-prompt</li>
+      </ul>
+    </div>
+    <div class="dk-keyhint">content · list</div>
+    <div class="dk-page">03</div>
+  </section>
+
+  <!-- 4. CONTENT · emerald -->
+  <section class="slide t-emerald">
+    <div class="dk-snum">04 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">The Fix</div>
+      <h2 class="dk-h1">答案不是<br><span class="dk-accent">更大</span> 的窗口。</h2>
+      <p class="dk-lede" style="margin-top:10px">而是：把你的知识、偏好、历史都<strong>写进文件系统</strong>。<br>让 LLM 每次对话前，先去读那个系统。</p>
+      <div class="dk-grid-2">
+        <div class="dk-col"><h3>× 窗口 stuffing</h3><p>把所有东西塞 prompt，贵、慢、最终溢出。</p></div>
+        <div class="dk-col"><h3>✓ 文件 + 检索</h3><p>按需加载，永远不溢出，结构化可 diff。</p></div>
+      </div>
+    </div>
+    <div class="dk-keyhint">content · compare</div>
+    <div class="dk-page">04</div>
+  </section>
+
+  <!-- 5. CODE · slate -->
+  <section class="slide t-slate">
+    <div class="dk-snum">05 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Minimal Setup</div>
+      <h2 class="dk-h2"><span class="dk-accent">4 行</span> YAML<br>就能开始。</h2>
+      <pre class="dk-code">memory:
+  root: ~/.llm-wiki
+  format: markdown
+  retrieval: hybrid  # embedding + bm25</pre>
+      <p class="dk-lede" style="margin-top:16px;font-size:20px">你现在拥有一个会随时间增长的 <strong>第二大脑</strong>。每次对话它都会被读、被更新。</p>
+    </div>
+    <div class="dk-keyhint">content · code</div>
+    <div class="dk-page">05</div>
+  </section>
+
+  <!-- 6. CHART · violet — big number with bar -->
+  <section class="slide t-violet">
+    <div class="dk-snum">06 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">30-day result</div>
+      <div class="dk-big dk-accent">87%</div>
+      <p class="dk-lede" style="margin-top:14px;font-size:26px">的 re-explain 被消除。平均每次对话节省 <strong>4.2 分钟</strong> 的 re-context。</p>
+      <svg viewBox="0 0 900 80" style="width:100%;max-width:900px;margin-top:30px">
+        <rect x="0" y="30" width="900" height="22" rx="11" fill="rgba(255,255,255,.12)"/>
+        <rect x="0" y="30" width="783" height="22" rx="11" fill="#c4b5fd"/>
+        <text x="792" y="47" font-family="JetBrains Mono" font-size="16" fill="#c4b5fd" font-weight="700">87%</text>
+      </svg>
+    </div>
+    <div class="dk-keyhint">chart · big-num</div>
+    <div class="dk-page">06</div>
+  </section>
+
+  <!-- 7. CTA · white -->
+  <section class="slide t-white">
+    <div class="dk-snum">07 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">Start tonight</div>
+      <h2 class="dk-h1">开始<br>你的 <span class="dk-accent">wiki</span>。</h2>
+      <span class="dk-line"></span>
+      <p class="dk-lede">不是装又一个插件。是决定：从今晚起，<strong>你的所有 AI 对话都要有一个共同的 vault</strong>。</p>
+      <pre class="dk-code" style="font-size:18px">$ mkdir ~/llm-wiki && cd ~/llm-wiki
+$ git init
+$ echo "# my brain" > README.md</pre>
+    </div>
+    <div class="dk-keyhint">cta · three-commands</div>
+    <div class="dk-page">07</div>
+  </section>
+
+  <!-- 8. THANKS · charcoal -->
+  <section class="slide t-charcoal">
+    <div class="dk-snum">08 / 08</div>
+    <div style="margin:auto 0">
+      <div class="dk-eyebrow">End · thanks for staying</div>
+      <h1 class="dk-h0"><span class="dk-accent">謝謝</span>。</h1>
+      <span class="dk-line"></span>
+      <p class="dk-lede">Karpathy 的原始 thread + 我的 vault 结构都在 <strong>github.com/lewis/llm-wiki</strong>。欢迎按 ← 再看一遍。</p>
+    </div>
+    <div class="dk-keyhint">press <kbd>←</kbd> to rewind · <kbd>F</kbd> for fullscreen</div>
+    <div class="dk-page">fin</div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/dir-key-nav-minimal/style.css b/templates/full-decks/dir-key-nav-minimal/style.css
new file mode 100644
index 0000000..2c7c42b
--- /dev/null
+++ b/templates/full-decks/dir-key-nav-minimal/style.css
@@ -0,0 +1,60 @@
+/* dir-key-nav-minimal — 方向键极简 · 8 种 mono-background 切换 */
+.tpl-dir-key-nav-minimal{
+  --dk-font:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif;
+  --dk-mono:'JetBrains Mono',monospace;
+  background:#000;
+  color:#fff;
+  font-family:var(--dk-font);
+}
+.tpl-dir-key-nav-minimal .slide{padding:80px 104px;overflow:hidden;position:absolute;inset:0}
+/* 8 background themes */
+.tpl-dir-key-nav-minimal .t-indigo{background:linear-gradient(135deg,#0f172a 0%,#1e1b4b 100%);color:#fff}
+.tpl-dir-key-nav-minimal .t-cream{background:#F5F0E8;color:#1a1a1a}
+.tpl-dir-key-nav-minimal .t-crimson{background:linear-gradient(135deg,#7f1d1d 0%,#991b1b 100%);color:#fff}
+.tpl-dir-key-nav-minimal .t-emerald{background:linear-gradient(135deg,#052e16 0%,#064e3b 100%);color:#ecfdf5}
+.tpl-dir-key-nav-minimal .t-slate{background:linear-gradient(135deg,#0f1923 0%,#1a2942 100%);color:#e6edf3}
+.tpl-dir-key-nav-minimal .t-violet{background:linear-gradient(135deg,#1e0a2e 0%,#2e1065 100%);color:#f5f3ff}
+.tpl-dir-key-nav-minimal .t-white{background:#ffffff;color:#111216}
+.tpl-dir-key-nav-minimal .t-charcoal{background:linear-gradient(135deg,#111827 0%,#1f2937 100%);color:#f3f4f6}
+
+.tpl-dir-key-nav-minimal .dk-snum{position:absolute;top:30px;right:48px;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;font-family:var(--dk-mono)}
+.tpl-dir-key-nav-minimal .t-cream .dk-snum,
+.tpl-dir-key-nav-minimal .t-white .dk-snum{color:#999}
+.tpl-dir-key-nav-minimal .t-indigo .dk-snum,
+.tpl-dir-key-nav-minimal .t-crimson .dk-snum,
+.tpl-dir-key-nav-minimal .t-emerald .dk-snum,
+.tpl-dir-key-nav-minimal .t-slate .dk-snum,
+.tpl-dir-key-nav-minimal .t-violet .dk-snum,
+.tpl-dir-key-nav-minimal .t-charcoal .dk-snum{color:rgba(255,255,255,.38)}
+
+.tpl-dir-key-nav-minimal .dk-eyebrow{font-size:12px;font-weight:700;letter-spacing:3.5px;text-transform:uppercase;opacity:.55;margin-bottom:22px;display:flex;align-items:center;gap:14px}
+.tpl-dir-key-nav-minimal .dk-eyebrow::after{content:'';flex:1;max-width:120px;height:1px;background:currentColor;opacity:.3}
+.tpl-dir-key-nav-minimal .dk-h0{font-size:160px;font-weight:900;line-height:.9;letter-spacing:-5px;margin:0 0 20px}
+.tpl-dir-key-nav-minimal .dk-h1{font-size:100px;font-weight:900;line-height:.98;letter-spacing:-3px;margin:0 0 18px}
+.tpl-dir-key-nav-minimal .dk-h2{font-size:72px;font-weight:800;line-height:1.05;letter-spacing:-2px;margin:0 0 16px}
+.tpl-dir-key-nav-minimal .dk-lede{font-size:26px;line-height:1.45;opacity:.72;max-width:900px;font-weight:300}
+.tpl-dir-key-nav-minimal .dk-lede strong{font-weight:700;opacity:1}
+.tpl-dir-key-nav-minimal .dk-big{font-family:var(--dk-mono);font-size:240px;font-weight:800;line-height:.9;letter-spacing:-10px}
+
+.tpl-dir-key-nav-minimal .dk-line{display:block;width:90px;height:4px;background:currentColor;margin:30px 0;opacity:.85}
+.tpl-dir-key-nav-minimal .t-indigo .dk-accent{color:#a5b4fc}
+.tpl-dir-key-nav-minimal .t-cream .dk-accent{color:#B5392A}
+.tpl-dir-key-nav-minimal .t-crimson .dk-accent{color:#fecaca}
+.tpl-dir-key-nav-minimal .t-emerald .dk-accent{color:#6ee7b7}
+.tpl-dir-key-nav-minimal .t-slate .dk-accent{color:#7dd3fc}
+.tpl-dir-key-nav-minimal .t-violet .dk-accent{color:#c4b5fd}
+.tpl-dir-key-nav-minimal .t-white .dk-accent{color:#6366f1}
+.tpl-dir-key-nav-minimal .t-charcoal .dk-accent{color:#fbbf24}
+
+.tpl-dir-key-nav-minimal .dk-list{list-style:none;padding:0;margin:28px 0 0;font-family:var(--dk-mono);font-size:22px;line-height:2}
+.tpl-dir-key-nav-minimal .dk-list li{padding-left:30px;position:relative;font-weight:400;opacity:.85}
+.tpl-dir-key-nav-minimal .dk-list li::before{content:'→';position:absolute;left:0;opacity:.5}
+.tpl-dir-key-nav-minimal .dk-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:56px;margin-top:36px}
+.tpl-dir-key-nav-minimal .dk-col h3{font-size:28px;font-weight:700;margin-bottom:10px}
+.tpl-dir-key-nav-minimal .dk-col p{font-size:19px;line-height:1.55;opacity:.72;font-weight:300}
+.tpl-dir-key-nav-minimal .dk-code{font-family:var(--dk-mono);font-size:16px;line-height:1.9;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:24px 28px;margin-top:24px;white-space:pre}
+.tpl-dir-key-nav-minimal .t-cream .dk-code,
+.tpl-dir-key-nav-minimal .t-white .dk-code{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.1)}
+.tpl-dir-key-nav-minimal .dk-keyhint{position:absolute;bottom:34px;left:104px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;text-transform:uppercase;opacity:.45}
+.tpl-dir-key-nav-minimal .dk-keyhint kbd{display:inline-block;padding:2px 10px;margin:0 3px;border:1px solid currentColor;border-radius:4px;font-size:12px}
+.tpl-dir-key-nav-minimal .dk-page{position:absolute;bottom:34px;right:48px;font-family:var(--dk-mono);font-size:12px;letter-spacing:2px;opacity:.45}
diff --git a/templates/full-decks/graphify-dark-graph/README.md b/templates/full-decks/graphify-dark-graph/README.md
new file mode 100644
index 0000000..cd8f687
--- /dev/null
+++ b/templates/full-decks/graphify-dark-graph/README.md
@@ -0,0 +1,11 @@
+# graphify-dark-graph
+
+Deep-night 暗底 + 力导向知识图谱覆盖层 + 温暖玻璃拟态卡片。灵感来自 `20260413-graphify/ppt/graphify.html` 的 `#06060c` 渐变底、飘移 orb 光晕、glass 卡片（warm/blue/green/purple 五变体）和 rainbow-text 标题。
+
+**Visual traits:** `#06060c → #0e1020` 斜向渐变、三颗 400-520px blur orb 慢飘动、cover SVG 力导向图谱作为背景、rainbow shift 渐变标题、JetBrains Mono 的 `.cmd-glow` 命令行、玻璃拟态卡片带顶部高光和微妙内阴影、温暖色系 accent (#e8a87c 琥珀 / #7ed3a4 薄荷 / #7eb8da 雾蓝 / #b8a4d6 丁香).
+
+**Use when:** 介绍一个开发者工具、命令行产品、知识图谱 / 数据可视化相关项目；你希望现场演示时视觉有「AI native + 科技感 + 温度」。
+
+**Source inspiration:** `20260413-graphify/ppt/graphify.html`.
+
+**Path:** `templates/full-decks/graphify-dark-graph/index.html`
diff --git a/templates/full-decks/graphify-dark-graph/index.html b/templates/full-decks/graphify-dark-graph/index.html
new file mode 100644
index 0000000..098ae01
--- /dev/null
+++ b/templates/full-decks/graphify-dark-graph/index.html
@@ -0,0 +1,180 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Graphify Dark Graph</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-graphify-dark-graph">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-2"></div><div class="gd-orb gd-orb-3"></div></div>
+    <!-- live force-directed graph bg -->
+    <svg viewBox="0 0 1600 900" style="position:absolute;inset:0;width:100%;height:100%;opacity:.38;z-index:1" xmlns="http://www.w3.org/2000/svg">
+      <g stroke="#7eb8da" stroke-width="1" stroke-opacity=".5" fill="none">
+        <line x1="300" y1="200" x2="520" y2="340"/>
+        <line x1="520" y1="340" x2="780" y2="260"/>
+        <line x1="780" y1="260" x2="1040" y2="420"/>
+        <line x1="520" y1="340" x2="640" y2="560"/>
+        <line x1="640" y1="560" x2="900" y2="620"/>
+        <line x1="900" y1="620" x2="1040" y2="420"/>
+        <line x1="1040" y1="420" x2="1260" y2="300"/>
+        <line x1="1260" y1="300" x2="1380" y2="500"/>
+        <line x1="900" y1="620" x2="1120" y2="720"/>
+        <line x1="300" y1="200" x2="200" y2="420"/>
+        <line x1="200" y1="420" x2="360" y2="640"/>
+        <line x1="360" y1="640" x2="640" y2="560"/>
+      </g>
+      <g>
+        <circle cx="300" cy="200" r="10" fill="#e8a87c"/>
+        <circle cx="520" cy="340" r="14" fill="#7eb8da"/>
+        <circle cx="780" cy="260" r="9" fill="#7ed3a4"/>
+        <circle cx="1040" cy="420" r="18" fill="#b8a4d6"/>
+        <circle cx="640" cy="560" r="11" fill="#d4a0b9"/>
+        <circle cx="900" cy="620" r="12" fill="#e8a87c"/>
+        <circle cx="1260" cy="300" r="8" fill="#7ed3a4"/>
+        <circle cx="1380" cy="500" r="10" fill="#7eb8da"/>
+        <circle cx="1120" cy="720" r="9" fill="#d4a0b9"/>
+        <circle cx="200" cy="420" r="8" fill="#b8a4d6"/>
+        <circle cx="360" cy="640" r="11" fill="#7eb8da"/>
+      </g>
+    </svg>
+    <div class="gd-snum">01 / 08</div>
+    <div style="margin-top:auto">
+      <p class="gd-eyebrow">Tech Sharing · 纯干货</p>
+      <h1 class="gd-h1" style="font-size:88px"><span class="gd-rainbow">手把手用 Graphify<br>搭建个人知识图谱</span></h1>
+      <p class="gd-lede" style="margin-top:20px">一行命令 · 全多模态 · 诚实审计 —— <span class="gd-accent">把任何文件夹变成可导航的知识网络。</span></p>
+      <p class="gd-eyebrow" style="margin-top:26px">↑ 背景就是 Graphify 真实跑出来的知识图谱</p>
+    </div>
+  </section>
+
+  <!-- 2. SECTION DIVIDER -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-2"></div></div>
+    <div class="gd-snum">02 / 08</div>
+    <div style="margin:auto 0">
+      <div class="gd-eyebrow">Part 01</div>
+      <h1 class="gd-h1" style="font-size:120px">Why <span class="gd-grad">Graph</span>?</h1>
+      <p class="gd-lede">folder → tree → graph，人类认知的下一步</p>
+    </div>
+  </section>
+
+  <!-- 3. CONTENT — plugin grid -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div><div class="gd-orb gd-orb-3"></div></div>
+    <div class="gd-snum">03 / 08</div>
+    <p class="gd-eyebrow">Feature Map</p>
+    <h2 class="gd-h2">一个工具，<span class="gd-grad">四件事</span></h2>
+    <div class="gd-grid-4">
+      <div class="gd-glass gd-glass-warm"><div style="font-size:30px">📂</div><h4 style="margin:10px 0 6px">Folder Ingest</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">递归扫描任意路径，支持 md / pdf / 代码 / 图片</p></div>
+      <div class="gd-glass gd-glass-blue"><div style="font-size:30px">🧠</div><h4 style="margin:10px 0 6px">Entity Extract</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">用 LLM 抽概念、人物、事件、关系</p></div>
+      <div class="gd-glass gd-glass-green"><div style="font-size:30px">🕸️</div><h4 style="margin:10px 0 6px">Force Graph</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">D3 力导向，点击即跳转原文</p></div>
+      <div class="gd-glass"><div style="font-size:30px">🔍</div><h4 style="margin:10px 0 6px">Audit Trail</h4><p class="gd-dim" style="font-size:13px;line-height:1.55">每条边都能追溯到 source span</p></div>
+    </div>
+    <div class="gd-glass gd-glass-warm" style="margin-top:24px"><p style="font-size:18px;line-height:1.6">它不是「又一个 RAG」—— 它是 <span class="gd-accent">把检索结果画出来，让你一眼就知道信息长什么样</span>。</p></div>
+  </section>
+
+  <!-- 4. CODE -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div></div>
+    <div class="gd-snum">04 / 08</div>
+    <p class="gd-eyebrow">One command</p>
+    <h2 class="gd-h2">从 0 到图谱，<span class="gd-grad">大概 90 秒</span></h2>
+    <p class="gd-cmd" style="margin:16px 0 22px">$ graphify ~/notes --out ./graph</p>
+    <pre class="gd-codebox"><span class="cm"># graphify.config.yaml</span>
+<span class="kw">ingest</span>:
+  paths: [<span class="st">~/notes</span>, <span class="st">~/code/docs</span>]
+  include: [<span class="st">"*.md"</span>, <span class="st">"*.pdf"</span>, <span class="st">"*.py"</span>]
+
+<span class="kw">extract</span>:
+  model: <span class="st">claude-opus-4-6</span>
+  schema: [<span class="st">concept</span>, <span class="st">person</span>, <span class="st">event</span>, <span class="st">relation</span>]
+
+<span class="kw">render</span>:
+  engine: <span class="st">d3-force</span>
+  audit: <span class="fn">true</span>     <span class="cm"># 每条边带 source span</span></pre>
+  </section>
+
+  <!-- 5. CHART — race diagram -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-3"></div></div>
+    <div class="gd-snum">05 / 08</div>
+    <p class="gd-eyebrow">Efficiency Race</p>
+    <h2 class="gd-h2">没有知识库 vs 有知识库</h2>
+    <div style="max-width:900px;margin-top:30px">
+      <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px">
+        <div style="width:110px;text-align:right;font-weight:700;color:var(--gd-danger)">没有<br>知识库</div>
+        <div style="flex:1;position:relative;height:70px;background:rgba(224,112,112,.06);border:1px solid rgba(224,112,112,.2);border-radius:16px">
+          <div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:32px">🛵</div>
+          <div style="position:absolute;left:72px;top:50%;transform:translateY(-50%);color:var(--gd-danger);font-size:14px">反复喂信息…整理…又忘了…</div>
+        </div>
+      </div>
+      <div style="display:flex;align-items:center;gap:16px">
+        <div style="width:110px;text-align:right;font-weight:700;color:var(--gd-green)">有<br>知识库</div>
+        <div style="flex:1;position:relative;height:70px;background:rgba(126,211,164,.06);border:1px solid rgba(126,211,164,.25);border-radius:16px">
+          <div style="position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:32px">🏎️</div>
+          <div style="position:absolute;right:72px;top:50%;transform:translateY(-50%);color:var(--gd-green);font-size:14px">AI 自己找 → 确认 → 干活!</div>
+        </div>
+      </div>
+    </div>
+    <div class="gd-grid-3" style="margin-top:36px">
+      <div class="gd-glass gd-glass-warm"><div class="gd-big gd-grad">5×</div><p class="gd-dim" style="margin-top:6px">速度提升</p></div>
+      <div class="gd-glass gd-glass-green"><div class="gd-big gd-grad">-80%</div><p class="gd-dim" style="margin-top:6px">重复喂信息</p></div>
+      <div class="gd-glass gd-glass-blue"><div class="gd-big gd-grad">∞</div><p class="gd-dim" style="margin-top:6px">记忆持久化</p></div>
+    </div>
+  </section>
+
+  <!-- 6. PIPELINE -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div></div>
+    <div class="gd-snum">06 / 08</div>
+    <p class="gd-eyebrow">Pipeline</p>
+    <h2 class="gd-h2">端到端 <span class="gd-grad">4 步走</span></h2>
+    <div style="display:flex;align-items:center;justify-content:center;gap:8px;margin-top:36px">
+      <div class="gd-glass" style="flex:1;text-align:center"><div style="font-size:34px">📂</div><div style="font-weight:600;margin-top:8px">Scan</div><div class="gd-dim" style="font-size:13px">递归读文件</div></div>
+      <div style="color:var(--gd-text3);font-size:24px">→</div>
+      <div class="gd-glass gd-glass-blue" style="flex:1;text-align:center"><div style="font-size:34px">🔬</div><div style="font-weight:600;margin-top:8px">Extract</div><div class="gd-dim" style="font-size:13px">LLM 抽实体</div></div>
+      <div style="color:var(--gd-text3);font-size:24px">→</div>
+      <div class="gd-glass gd-glass-green" style="flex:1;text-align:center"><div style="font-size:34px">🕸️</div><div style="font-weight:600;margin-top:8px">Build</div><div class="gd-dim" style="font-size:13px">构图 + 去重</div></div>
+      <div style="color:var(--gd-text3);font-size:24px">→</div>
+      <div class="gd-glass gd-glass-warm" style="flex:1;text-align:center"><div style="font-size:34px">🎨</div><div style="font-weight:600;margin-top:8px">Render</div><div class="gd-dim" style="font-size:13px">D3 交互图</div></div>
+    </div>
+    <div class="gd-glass" style="margin-top:32px"><p style="font-size:16px;line-height:1.6;color:var(--gd-text2)">每一步都有 audit log：你永远知道某个节点为什么存在、它来自哪个文件的哪一行。</p></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-1"></div><div class="gd-orb gd-orb-3"></div></div>
+    <div class="gd-snum">07 / 08</div>
+    <p class="gd-eyebrow">Try it tonight</p>
+    <h2 class="gd-h1" style="font-size:80px">Graphify <span class="gd-grad">your folders</span></h2>
+    <p class="gd-cmd" style="margin-top:22px">$ npm i -g @lewis/graphify</p>
+    <p class="gd-cmd" style="margin-top:10px;color:var(--gd-warm);text-shadow:0 0 30px rgba(232,168,124,.45)">$ graphify ~/obsidian-vault</p>
+    <div style="margin-top:32px">
+      <span class="gd-tag">#knowledge-graph</span>
+      <span class="gd-tag">#open-source</span>
+      <span class="gd-tag">#claude-agent</span>
+      <span class="gd-tag">#obsidian</span>
+      <span class="gd-tag">#d3-force</span>
+    </div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="gd-ambient"><div class="gd-orb gd-orb-2"></div></div>
+    <div class="gd-snum">08 / 08</div>
+    <div style="margin:auto 0;text-align:center">
+      <div class="gd-big gd-rainbow" style="font-size:180px">Thanks.</div>
+      <p class="gd-lede" style="margin:28px auto 0">github.com/lewis/graphify · 欢迎 star / issue / PR</p>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/graphify-dark-graph/style.css b/templates/full-decks/graphify-dark-graph/style.css
new file mode 100644
index 0000000..bc6dd47
--- /dev/null
+++ b/templates/full-decks/graphify-dark-graph/style.css
@@ -0,0 +1,54 @@
+/* graphify-dark-graph — 暗底玻璃 + 力导向知识图谱 */
+.tpl-graphify-dark-graph{
+  --gd-bg:#06060c;
+  --gd-bg2:#0e1020;
+  --gd-text:#f0ece4;
+  --gd-text2:#b0a99e;
+  --gd-text3:#7a746c;
+  --gd-warm:#e8a87c;
+  --gd-blue:#7eb8da;
+  --gd-green:#7ed3a4;
+  --gd-rose:#d4a0b9;
+  --gd-purple:#b8a4d6;
+  --gd-danger:#e07070;
+  background:var(--gd-bg);
+  color:var(--gd-text);
+  font-family:'Inter','Noto Sans SC',-apple-system,sans-serif;
+  letter-spacing:-.01em;
+}
+.tpl-graphify-dark-graph .slide{background:linear-gradient(160deg,#08080f,#0e1020 50%,#08080f);color:var(--gd-text);padding:64px 88px;overflow:hidden}
+.tpl-graphify-dark-graph .gd-ambient{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
+.tpl-graphify-dark-graph .gd-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35;animation:gdDrift 22s ease-in-out infinite alternate}
+.tpl-graphify-dark-graph .gd-orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(126,184,218,.55),transparent 70%);top:-12%;left:-6%}
+.tpl-graphify-dark-graph .gd-orb-2{width:460px;height:460px;background:radial-gradient(circle,rgba(232,168,124,.45),transparent 70%);top:55%;right:-8%;animation-delay:-6s}
+.tpl-graphify-dark-graph .gd-orb-3{width:420px;height:420px;background:radial-gradient(circle,rgba(184,164,214,.4),transparent 70%);bottom:-8%;left:30%;animation-delay:-11s}
+@keyframes gdDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(25px,-20px) scale(1.08)}}
+.tpl-graphify-dark-graph .slide > *{position:relative;z-index:2}
+.tpl-graphify-dark-graph .gd-snum{position:absolute;top:28px;right:40px;font-size:12px;letter-spacing:.25em;color:var(--gd-text3);z-index:3}
+.tpl-graphify-dark-graph .gd-eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;color:var(--gd-text3);font-weight:500}
+.tpl-graphify-dark-graph .gd-h1{font-size:74px;font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:16px 0 10px;color:var(--gd-text)}
+.tpl-graphify-dark-graph .gd-h2{font-size:52px;font-weight:700;line-height:1.12;margin:0 0 14px}
+.tpl-graphify-dark-graph .gd-lede{font-size:22px;line-height:1.65;font-weight:300;color:var(--gd-text2);max-width:850px}
+.tpl-graphify-dark-graph .gd-rainbow{background:linear-gradient(90deg,#ff0080,#ff4d00,#ff9900,#ffe600,#00c853,#0091ea,#6200ea,#ff0080);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gdRainbow 4s linear infinite}
+@keyframes gdRainbow{0%{background-position:0% center}100%{background-position:200% center}}
+.tpl-graphify-dark-graph .gd-grad{background:linear-gradient(135deg,var(--gd-warm),var(--gd-rose),var(--gd-purple));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
+.tpl-graphify-dark-graph .gd-accent{color:var(--gd-warm);font-weight:500}
+.tpl-graphify-dark-graph .gd-green{color:var(--gd-green)}
+.tpl-graphify-dark-graph .gd-blue{color:var(--gd-blue)}
+.tpl-graphify-dark-graph .gd-dim{color:var(--gd-text2)}
+.tpl-graphify-dark-graph .gd-mono{font-family:'JetBrains Mono',monospace}
+.tpl-graphify-dark-graph .gd-glass{position:relative;overflow:hidden;border-radius:20px;padding:22px 26px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
+.tpl-graphify-dark-graph .gd-glass::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.05),transparent);pointer-events:none}
+.tpl-graphify-dark-graph .gd-glass-warm{background:rgba(232,168,124,.06);border-color:rgba(232,168,124,.2)}
+.tpl-graphify-dark-graph .gd-glass-green{background:rgba(126,211,164,.06);border-color:rgba(126,211,164,.2)}
+.tpl-graphify-dark-graph .gd-glass-blue{background:rgba(126,184,218,.06);border-color:rgba(126,184,218,.2)}
+.tpl-graphify-dark-graph .gd-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
+.tpl-graphify-dark-graph .gd-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px}
+.tpl-graphify-dark-graph .gd-tag{display:inline-block;border-radius:999px;padding:5px 14px;font-size:12px;font-weight:500;margin:2px 4px 2px 0;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--gd-text2)}
+.tpl-graphify-dark-graph .gd-cmd{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--gd-green);text-shadow:0 0 30px rgba(126,211,164,.45),0 0 60px rgba(126,211,164,.15);letter-spacing:-.01em}
+.tpl-graphify-dark-graph .gd-big{font-size:120px;font-weight:900;letter-spacing:-.04em;line-height:1}
+.tpl-graphify-dark-graph .gd-codebox{background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.8;color:#d8d4c8}
+.tpl-graphify-dark-graph .gd-codebox .cm{color:#6b6a62}
+.tpl-graphify-dark-graph .gd-codebox .kw{color:var(--gd-warm)}
+.tpl-graphify-dark-graph .gd-codebox .st{color:var(--gd-green)}
+.tpl-graphify-dark-graph .gd-codebox .fn{color:var(--gd-blue)}
diff --git a/templates/full-decks/hermes-cyber-terminal/README.md b/templates/full-decks/hermes-cyber-terminal/README.md
new file mode 100644
index 0000000..7a27c62
--- /dev/null
+++ b/templates/full-decks/hermes-cyber-terminal/README.md
@@ -0,0 +1,11 @@
+# hermes-cyber-terminal
+
+黑底 (`#0a0c10`) + 终端 chrome + 扫描线 + 薄荷绿 glow 大字 + JetBrains Mono 全文打字机感。灵感来自 `20260414-hermes-agent/ppt/hermes-record.html` 的 `codebox #15151b` 深色代码盒和 `hermes-vs-openclaw.html` 的实测对比气质 —— 把两者合成一份「honest cyber review」。
+
+**Visual traits:** 56px cyber 网格 + CRT vignette + 半透明 scanlines 叠层、窗口 traffic-light chrome、`$ prompt` 开头的 command-line 标题、薄荷绿 text-shadow glow `#7ed3a4`、monospace 全局、虚拟 bar chart 用 stroke-only 呈现、blinking cursor、amber/green/red 分级标签。
+
+**Use when:** 评测一个开发者工具 / CLI / agent，展示跑分数据、trace、diff；想要即刻给出「技术人 honest review」的视觉语气；适合长 trace / long code 的场景。
+
+**Source inspiration:** `20260414-hermes-agent/ppt/hermes-record.html` + `hermes-vs-openclaw.html`.
+
+**Path:** `templates/full-decks/hermes-cyber-terminal/index.html`
diff --git a/templates/full-decks/hermes-cyber-terminal/index.html b/templates/full-decks/hermes-cyber-terminal/index.html
new file mode 100644
index 0000000..43bbec2
--- /dev/null
+++ b/templates/full-decks/hermes-cyber-terminal/index.html
@@ -0,0 +1,199 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Hermes Cyber Terminal</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-hermes-cyber-terminal">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="hc-grid"></div>
+    <div class="hc-vignette"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>~/hermes · zsh · 118x42 · 01:37:04</div></div>
+    <div style="margin:auto 0">
+      <p class="hc-prompt">whoami --hermes</p>
+      <h1 class="hc-h1">HERMES<br>AGENT / v0.9.2<span class="hc-cursor"></span></h1>
+      <p class="hc-lede">一个号称能「自主跑完整软件工程任务」的命令行 agent。<br>真的好用？还是又一轮营销？—— 我连续跑了 72 小时，告诉你答案。</p>
+      <div style="margin-top:26px">
+        <span class="hc-tag">rust-core</span>
+        <span class="hc-tag">mcp-native</span>
+        <span class="hc-tag amber">72h-benchmark</span>
+        <span class="hc-tag red">honest-review</span>
+      </div>
+    </div>
+    <div class="hc-footer"><span>hermes-review · lewis · 2026</span><span>01 / 08</span></div>
+  </section>
+
+  <!-- 2. SECTION DIVIDER -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>section · 01/04</div></div>
+    <div style="margin:auto 0">
+      <p class="hc-prompt">cat chapter_01.md</p>
+      <h1 class="hc-h1" style="font-size:110px">// Setup</h1>
+      <p class="hc-lede">从 <code style="color:var(--hc-amber)">brew install hermes</code> 到第一次 prompt —— 一共 4 分 22 秒。</p>
+    </div>
+    <div class="hc-footer"><span>section · setup</span><span>02 / 08</span></div>
+  </section>
+
+  <!-- 3. CONTENT — spec cards -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>benchmark · cold-start</div></div>
+    <h2 class="hc-h2">开箱数据</h2>
+    <p class="hc-lede">cold start → first-successful-task 三次平均</p>
+    <div class="hc-grid-3">
+      <div class="hc-card"><div class="lbl">install time</div><div class="val">42s</div><div class="desc">单 binary，无 docker，无 python env。</div></div>
+      <div class="hc-card"><div class="lbl">first token</div><div class="val">1.8s</div><div class="desc">接入 claude-opus-4-6，无预热。</div></div>
+      <div class="hc-card"><div class="lbl">first PR merged</div><div class="val">4m22s</div><div class="desc">跑的是 fix-a-typo 级别的低难度任务。</div></div>
+    </div>
+    <div class="hc-grid-2">
+      <div class="hc-card"><div class="lbl">// verdict +</div><div class="val" style="color:var(--hc-green);font-size:18px">冷启动是真的快</div><div class="desc">和 OpenClaw 的 docker + pip 流程比，快不止一个数量级。</div></div>
+      <div class="hc-card"><div class="lbl">// verdict -</div><div class="val" style="color:var(--hc-red);font-size:18px">MCP 服务器配置不够友好</div><div class="desc">env 变量需要手动塞进 ~/.hermes/env，文档几乎没写。</div></div>
+    </div>
+    <div class="hc-footer"><span>data · verified 3 runs</span><span>03 / 08</span></div>
+  </section>
+
+  <!-- 4. CODE -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>trace · hermes run</div></div>
+    <p class="hc-prompt">hermes run "refactor auth module to use pkce"</p>
+    <h3 class="hc-h3" style="margin-top:12px">↓ 真实 trace (节选)</h3>
+    <pre class="hc-codebox" style="margin-top:10px"><span class="cm"># hermes v0.9.2 · session 42a1</span>
+[<span class="fn">plan</span>]    <span class="st">"分析 src/auth/*.ts → 找 oauth flow → 抽成 pkce"</span>
+[<span class="fn">read</span>]    src/auth/oauth.ts       <span class="cm">// 214 lines</span>
+[<span class="fn">read</span>]    src/auth/token.ts       <span class="cm">// 88 lines</span>
+[<span class="kw">think</span>]   <span class="st">"发现 implicit flow，改为 code+pkce，需新 state param"</span>
+[<span class="fn">edit</span>]    src/auth/oauth.ts       <span class="hl">+43 -17</span>
+[<span class="fn">edit</span>]    src/auth/token.ts       <span class="hl">+12 -4</span>
+[<span class="fn">test</span>]    pnpm vitest auth        <span class="st">PASS 18/18</span>
+[<span class="fn">commit</span>]  <span class="var">"feat(auth): migrate to oauth2 code+pkce"</span>
+[<span class="fn">push</span>]    origin feat/pkce-auth   <span class="st">ok</span>
+
+<span class="cm"># 总耗时 3m 14s · 14k tokens · $0.21</span></pre>
+    <div class="hc-footer"><span>trace · live</span><span>04 / 08</span></div>
+  </section>
+
+  <!-- 5. CHART -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>benchmark · hermes vs openclaw</div></div>
+    <h2 class="hc-h2">72 小时对比</h2>
+    <p class="hc-lede">同一组 48 个 GitHub issue，两个 agent 各跑一遍</p>
+    <svg viewBox="0 0 1000 380" style="width:100%;max-width:1040px;margin-top:24px" xmlns="http://www.w3.org/2000/svg">
+      <g font-family="JetBrains Mono, monospace" font-size="13" fill="#8a8892">
+        <!-- axis -->
+        <line x1="80" y1="40" x2="80" y2="320" stroke="rgba(126,211,164,.2)"/>
+        <line x1="80" y1="320" x2="960" y2="320" stroke="rgba(126,211,164,.2)"/>
+        <!-- y labels -->
+        <text x="70" y="46" text-anchor="end">100%</text>
+        <text x="70" y="116" text-anchor="end">75%</text>
+        <text x="70" y="186" text-anchor="end">50%</text>
+        <text x="70" y="256" text-anchor="end">25%</text>
+        <text x="70" y="324" text-anchor="end">0</text>
+        <!-- bars: hermes -->
+        <g>
+          <rect x="130" y="80"  width="80" height="240" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="170" y="76" text-anchor="middle" fill="#7ed3a4" font-weight="700">82%</text>
+          <text x="170" y="345" text-anchor="middle">resolved</text>
+          <rect x="240" y="146" width="80" height="174" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="280" y="142" text-anchor="middle" fill="#7ed3a4" font-weight="700">58%</text>
+          <text x="280" y="345" text-anchor="middle">one-shot</text>
+          <rect x="350" y="60"  width="80" height="260" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="390" y="56" text-anchor="middle" fill="#7ed3a4" font-weight="700">89%</text>
+          <text x="390" y="345" text-anchor="middle">test-pass</text>
+          <rect x="460" y="110" width="80" height="210" fill="rgba(126,211,164,.15)" stroke="#7ed3a4" stroke-width="1.5"/>
+          <text x="500" y="106" text-anchor="middle" fill="#7ed3a4" font-weight="700">71%</text>
+          <text x="500" y="345" text-anchor="middle">pr-merged</text>
+        </g>
+        <!-- bars: openclaw -->
+        <g>
+          <rect x="570" y="150" width="80" height="170" fill="rgba(233,197,138,.12)" stroke="#e9c58a" stroke-width="1.5"/>
+          <text x="610" y="146" text-anchor="middle" fill="#e9c58a" font-weight="700">60%</text>
+          <text x="610" y="345" text-anchor="middle">resolved</text>
+          <rect x="680" y="212" width="80" height="108" fill="rgba(233,197,138,.12)" stroke="#e9c58a" stroke-width="1.5"/>
+          <text x="720" y="208" text-anchor="middle" fill="#e9c58a" font-weight="700">38%</text>
+          <text x="720" y="345" text-anchor="middle">one-shot</text>
+          <rect x="790" y="130" width="80" height="190" fill="rgba(233,197,138,.12)" stroke="#e9c58a" stroke-width="1.5"/>
+          <text x="830" y="126" text-anchor="middle" fill="#e9c58a" font-weight="700">67%</text>
+          <text x="830" y="345" text-anchor="middle">test-pass</text>
+        </g>
+        <!-- legend -->
+        <g transform="translate(820,50)">
+          <rect x="0" y="0" width="14" height="14" fill="rgba(126,211,164,.15)" stroke="#7ed3a4"/>
+          <text x="22" y="12" fill="#7ed3a4">hermes 0.9.2</text>
+          <rect x="0" y="22" width="14" height="14" fill="rgba(233,197,138,.12)" stroke="#e9c58a"/>
+          <text x="22" y="34" fill="#e9c58a">openclaw 2.1</text>
+        </g>
+      </g>
+    </svg>
+    <div class="hc-footer"><span>benchmark · n=48</span><span>05 / 08</span></div>
+  </section>
+
+  <!-- 6. STATS -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>tldr</div></div>
+    <p class="hc-prompt">echo $VERDICT</p>
+    <div class="hc-big">7.8<span style="font-size:60px;color:var(--hc-ink2)">/ 10</span></div>
+    <p class="hc-lede" style="margin-top:14px">值得装，还不值得完全依赖。</p>
+    <div class="hc-grid-2" style="margin-top:24px">
+      <div class="hc-card"><div class="lbl">+ strong points</div><div class="desc">• rust 本体冷启快<br>• trace 可读性极强<br>• diff 审核友好，commit message 也写得合格</div></div>
+      <div class="hc-card"><div class="lbl">- weak points</div><div class="desc">• plan 阶段偶尔跳步<br>• 超 50k LoC 仓库会 OOM<br>• MCP 配置需要手动塞 env</div></div>
+    </div>
+    <div class="hc-footer"><span>verdict · honest</span><span>06 / 08</span></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>install</div></div>
+    <h2 class="hc-h2">想自己跑一遍？</h2>
+    <p class="hc-lede">三条命令，不到 5 分钟就能看见它干第一件事。</p>
+    <pre class="hc-codebox" style="margin-top:22px"><span class="cm"># 1. install</span>
+<span class="kw">$</span> brew install hermes-agent/tap/hermes
+
+<span class="cm"># 2. auth (先准备好 anthropic api key)</span>
+<span class="kw">$</span> hermes auth login
+
+<span class="cm"># 3. first task</span>
+<span class="kw">$</span> cd ~/your-repo && hermes run <span class="st">"add a CHANGELOG.md from git log"</span></pre>
+    <div style="margin-top:26px">
+      <span class="hc-tag">brew-ready</span>
+      <span class="hc-tag">opus-4.6</span>
+      <span class="hc-tag amber">needs-api-key</span>
+    </div>
+    <div class="hc-footer"><span>try-it-now</span><span>07 / 08</span></div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="hc-grid"></div>
+    <div class="hc-scanlines"></div>
+    <div class="hc-chrome"><div class="dots"><span></span><span></span><span></span></div><div>EOF</div></div>
+    <div style="margin:auto 0">
+      <p class="hc-prompt">exit 0</p>
+      <h1 class="hc-h1" style="font-size:120px">// thanks<span class="hc-cursor"></span></h1>
+      <p class="hc-lede">完整 trace、48 个任务的 PR 列表、benchmark 脚本都在 <span style="color:var(--hc-amber)">github.com/lewis/hermes-review</span></p>
+    </div>
+    <div class="hc-footer"><span>session closed</span><span>08 / 08</span></div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/hermes-cyber-terminal/style.css b/templates/full-decks/hermes-cyber-terminal/style.css
new file mode 100644
index 0000000..2145554
--- /dev/null
+++ b/templates/full-decks/hermes-cyber-terminal/style.css
@@ -0,0 +1,55 @@
+/* hermes-cyber-terminal — 暗终端 + 霓虹绿青 + 扫描线 */
+.tpl-hermes-cyber-terminal{
+  --hc-bg:#0a0c10;
+  --hc-bg2:#15151b;
+  --hc-surface:#12141a;
+  --hc-border:rgba(126,211,164,.18);
+  --hc-ink:#e4e2d8;
+  --hc-ink2:#8a8892;
+  --hc-green:#7ed3a4;
+  --hc-cyan:#64dfdf;
+  --hc-amber:#e9c58a;
+  --hc-rose:#d4a0b9;
+  --hc-red:#ff6b6b;
+  background:var(--hc-bg);
+  color:var(--hc-ink);
+  font-family:'JetBrains Mono','SF Mono','Inter','Noto Sans SC',monospace;
+}
+.tpl-hermes-cyber-terminal .slide{background:var(--hc-bg);color:var(--hc-ink);padding:60px 84px;overflow:hidden}
+.tpl-hermes-cyber-terminal .hc-scanlines{position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(126,211,164,.025) 3px,rgba(126,211,164,.025) 4px);mix-blend-mode:screen}
+.tpl-hermes-cyber-terminal .hc-grid{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(126,211,164,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(126,211,164,.08) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse at 50% 50%,black 30%,transparent 80%)}
+.tpl-hermes-cyber-terminal .hc-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.6) 100%)}
+.tpl-hermes-cyber-terminal .slide > *{position:relative;z-index:2}
+.tpl-hermes-cyber-terminal .hc-chrome{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;font-size:11px;color:var(--hc-ink2);letter-spacing:.18em;text-transform:uppercase}
+.tpl-hermes-cyber-terminal .hc-chrome .dots{display:flex;gap:8px}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span{width:11px;height:11px;border-radius:50%;background:#2a2d33}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span:nth-child(1){background:#ff5f57}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span:nth-child(2){background:#febc2e}
+.tpl-hermes-cyber-terminal .hc-chrome .dots span:nth-child(3){background:var(--hc-green)}
+.tpl-hermes-cyber-terminal .hc-prompt{color:var(--hc-green);font-weight:500}
+.tpl-hermes-cyber-terminal .hc-prompt::before{content:'$ ';color:var(--hc-cyan)}
+.tpl-hermes-cyber-terminal .hc-h1{font-family:'JetBrains Mono',monospace;font-size:72px;font-weight:700;line-height:1.05;letter-spacing:-.02em;color:var(--hc-green);text-shadow:0 0 30px rgba(126,211,164,.35),0 0 60px rgba(126,211,164,.1);margin:14px 0 12px}
+.tpl-hermes-cyber-terminal .hc-h2{font-size:46px;font-weight:600;color:var(--hc-ink);margin:0 0 10px;letter-spacing:-.015em}
+.tpl-hermes-cyber-terminal .hc-h3{font-size:22px;font-weight:600;color:var(--hc-amber);margin:0 0 10px}
+.tpl-hermes-cyber-terminal .hc-lede{font-size:18px;line-height:1.7;color:var(--hc-ink2);max-width:780px;font-family:'Inter','Noto Sans SC',sans-serif}
+.tpl-hermes-cyber-terminal .hc-cursor{display:inline-block;width:12px;height:1em;background:var(--hc-green);vertical-align:middle;margin-left:6px;animation:hcBlink 1s steps(2) infinite}
+@keyframes hcBlink{50%{opacity:0}}
+.tpl-hermes-cyber-terminal .hc-card{background:var(--hc-surface);border:1px solid var(--hc-border);border-radius:10px;padding:20px 24px;position:relative}
+.tpl-hermes-cyber-terminal .hc-card::before{content:'';position:absolute;top:-1px;left:12px;right:12px;height:2px;background:linear-gradient(90deg,transparent,var(--hc-green),transparent)}
+.tpl-hermes-cyber-terminal .hc-card .lbl{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--hc-ink2);margin-bottom:8px}
+.tpl-hermes-cyber-terminal .hc-card .val{font-size:22px;font-weight:700;color:var(--hc-green);font-family:'JetBrains Mono',monospace}
+.tpl-hermes-cyber-terminal .hc-card .desc{font-size:13px;color:var(--hc-ink2);margin-top:10px;line-height:1.55;font-family:'Inter',sans-serif}
+.tpl-hermes-cyber-terminal .hc-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:24px}
+.tpl-hermes-cyber-terminal .hc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
+.tpl-hermes-cyber-terminal .hc-codebox{background:#0c0d12;border:1px solid var(--hc-border);border-radius:10px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;color:#d8d4c8;box-shadow:inset 0 0 60px rgba(126,211,164,.04)}
+.tpl-hermes-cyber-terminal .hc-codebox .cm{color:#5a6068}
+.tpl-hermes-cyber-terminal .hc-codebox .kw{color:var(--hc-amber)}
+.tpl-hermes-cyber-terminal .hc-codebox .st{color:var(--hc-green)}
+.tpl-hermes-cyber-terminal .hc-codebox .fn{color:var(--hc-cyan)}
+.tpl-hermes-cyber-terminal .hc-codebox .var{color:var(--hc-rose)}
+.tpl-hermes-cyber-terminal .hc-codebox .hl{color:#fff;background:rgba(126,211,164,.15);padding:0 4px;border-radius:3px}
+.tpl-hermes-cyber-terminal .hc-tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11px;padding:3px 10px;border:1px solid var(--hc-border);border-radius:4px;color:var(--hc-green);background:rgba(126,211,164,.04);margin:2px 6px 2px 0;text-transform:uppercase;letter-spacing:.1em}
+.tpl-hermes-cyber-terminal .hc-tag.amber{color:var(--hc-amber);border-color:rgba(233,197,138,.2);background:rgba(233,197,138,.04)}
+.tpl-hermes-cyber-terminal .hc-tag.red{color:var(--hc-red);border-color:rgba(255,107,107,.25);background:rgba(255,107,107,.05)}
+.tpl-hermes-cyber-terminal .hc-big{font-family:'JetBrains Mono',monospace;font-size:140px;font-weight:700;line-height:1;color:var(--hc-green);text-shadow:0 0 40px rgba(126,211,164,.4),0 0 80px rgba(126,211,164,.15);letter-spacing:-.04em}
+.tpl-hermes-cyber-terminal .hc-footer{position:absolute;left:84px;right:84px;bottom:32px;display:flex;justify-content:space-between;font-size:10px;color:var(--hc-ink2);letter-spacing:.2em;text-transform:uppercase;border-top:1px solid rgba(126,211,164,.1);padding-top:14px}
diff --git a/templates/full-decks/knowledge-arch-blueprint/README.md b/templates/full-decks/knowledge-arch-blueprint/README.md
new file mode 100644
index 0000000..d163294
--- /dev/null
+++ b/templates/full-decks/knowledge-arch-blueprint/README.md
@@ -0,0 +1,11 @@
+# knowledge-arch-blueprint
+
+奶油纸 (`#F0EAE0`) 底 + 锈红 (`#B5392A`) 单一 accent + 硬黑描边卡片 + 虚线反馈回路箭头。灵感来自 `20260405 架构图v2.html` —— 那是一张真正的「技术白皮书架构图」，像建筑蓝图。
+
+**Visual traits:** 暖米色纸底、微弱 48px 网格做 blueprint 感、硬朗 2px 黑边卡片、pipeline step-box 一字排开配 hero box 凸起、右上 insight 红色 callout、大小写 kicker 2.5-4px 字距、SVG 反馈回路虚线 + 箭头、Playfair 大字号衬线数据、无渐变无阴影极度克制。
+
+**Use when:** 讲系统架构、数据流向、流程拆解；你想让内容看起来像一份正经技术白皮书而不是营销贴；需要严肃感、印刷感、可直接截图塞进 README。
+
+**Source inspiration:** `20260405-Karpathy-知识库/20260405 架构图v2.html`.
+
+**Path:** `templates/full-decks/knowledge-arch-blueprint/index.html`
diff --git a/templates/full-decks/knowledge-arch-blueprint/index.html b/templates/full-decks/knowledge-arch-blueprint/index.html
new file mode 100644
index 0000000..35feda0
--- /dev/null
+++ b/templates/full-decks/knowledge-arch-blueprint/index.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Knowledge Arch Blueprint</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-knowledge-arch-blueprint">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="kb-grid-bg"></div>
+    <div style="display:flex;justify-content:space-between;align-items:flex-start;gap:40px;margin-bottom:44px">
+      <div>
+        <div class="kb-kicker">Karpathy Stack · 架构图 v2</div>
+        <h1 class="kb-h1">LLM <span class="rust">知识库</span> 的<br>工程化蓝图</h1>
+        <p class="kb-sub">从「乱贴笔记」到「可审计、可纠错、可复用」的第二大脑 —— 这是我读完 Karpathy 的分享后画的一张系统图。</p>
+      </div>
+      <div class="kb-insight"><span class="kk">KEY INSIGHT</span>Karpathy 原版缺一块：<br>反馈闭环让错误能回流纠正。</div>
+    </div>
+    <div class="kb-section-label">Pipeline · End-to-end</div>
+    <div class="kb-pipeline">
+      <div class="kb-step"><div class="kb-step-num">STEP 01</div><div class="kb-step-title">采集</div><div class="kb-step-body">浏览器剪藏、PDF、Podcast 转写、聊天记录</div></div>
+      <div class="kb-step"><div class="kb-step-num">STEP 02</div><div class="kb-step-title">去噪</div><div class="kb-step-body">清洗导航栏、广告、重复段落、低信噪素材</div></div>
+      <div class="kb-step hero"><div class="kb-step-num">STEP 03 · CORE</div><div class="kb-step-title">Wiki 化</div><div class="kb-step-body">结构化成双链笔记，实体、关系、属性全在一起</div></div>
+      <div class="kb-step"><div class="kb-step-num">STEP 04</div><div class="kb-step-title">使用</div><div class="kb-step-body">Agent 随时检索、回答、再写入</div></div>
+    </div>
+    <div class="kb-footer"><span>Blueprint · v2 · 2026.04</span><span>01 / 08</span></div>
+  </section>
+
+  <!-- 2. SECTION DIVIDER -->
+  <section class="slide">
+    <div class="kb-grid-bg"></div>
+    <div style="margin:auto 0">
+      <div class="kb-kicker">Chapter One</div>
+      <h1 class="kb-h1" style="font-size:120px">为什么 <span class="rust">笔记</span><br>不够用了</h1>
+      <p class="kb-sub" style="font-size:24px;margin-top:20px">当你的知识量超过记忆容量，<br>你需要的不是更多文件，而是一张<b>可导航的图</b>。</p>
+    </div>
+    <div class="kb-footer"><span>Section · Chapter 1</span><span>02 / 08</span></div>
+  </section>
+
+  <!-- 3. CONTENT 2-col -->
+  <section class="slide">
+    <div class="kb-grid-bg"></div>
+    <div class="kb-kicker">Problem · Solution</div>
+    <h1 class="kb-h1" style="font-size:48px">原版 vs <span class="rust">升级版</span></h1>
+    <div class="kb-grid-2">
+      <div class="kb-card">
+        <div class="kb-kicker" style="color:#888">原版 Karpathy</div>
+        <h4>一次性写入</h4>
+        <p>采集 → 转写 → 存档，错了就错了。没有回路，没有修正机制，笔记越多越混乱。</p>
+      </div>
+      <div class="kb-card" style="background:var(--kb-rust-soft);border-color:var(--kb-rust)">
+        <div class="kb-kicker">升级 v2</div>
+        <h4>反馈闭环</h4>
+        <p>AI 使用知识库时记录每次 miss / 幻觉 / 过期事实，自动回灌到源文件，让笔记会自我修正。</p>
+      </div>
+    </div>
+    <div class="kb-legend">
+      <div class="d"><span class="b"></span>普通节点</div>
+      <div class="d"><span class="b rust"></span>核心节点 · 反馈回路入口</div>
+      <div class="d">—— 数据流 &nbsp;&nbsp; ┈┈ 反馈回路</div>
+    </div>
+    <div class="kb-footer"><span>Content · Compare</span><span>03 / 08</span></div>
+  </section>
+
+  <!-- 4. CODE -->
+  <section class="slide">
+    <div class="kb-grid-bg"></div>
+    <div class="kb-kicker">Implementation · Skill Manifest</div>
+    <h1 class="kb-h1" style="font-size:48px">反馈回路 <span class="rust">怎么实现</span></h1>
+    <p class="kb-sub">一个 100 行的 Agent Skill，把「AI 用得顺不顺」回写成 vault 的一条条修订记录。</p>
+    <pre class="kb-codebox"><span class="cm"># skills/wiki-feedback/SKILL.md</span>
+<span class="kw">name</span>: wiki-feedback
+<span class="kw">trigger</span>: <span class="st">"after every retrieval"</span>
+
+<span class="kw">on_hit</span>:     record(<span class="st">query, path, used=true</span>)
+<span class="kw">on_miss</span>:    record(<span class="st">query, reason=</span><span class="hl">"not-in-vault"</span>)
+<span class="kw">on_wrong</span>:   record(<span class="st">query, correction, path</span>)
+
+<span class="kw">nightly</span>:
+  - <span class="st">aggregate misses → suggest new notes</span>
+  - <span class="st">aggregate wrongs → diff-patch old notes</span>
+  - <span class="st">commit to git, open PR for human review</span></pre>
+    <div class="kb-footer"><span>Content · Code</span><span>04 / 08</span></div>
+  </section>
+
+  <!-- 5. DIAGRAM - SVG feedback loop -->
+  <section class="slide">
+    <div class="kb-grid-bg"></div>
+    <div class="kb-kicker">System Diagram</div>
+    <h1 class="kb-h1" style="font-size:44px">反馈回路全貌</h1>
+    <svg viewBox="0 0 1200 520" style="width:100%;max-width:1200px;margin-top:20px" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
+          <path d="M0,0 L10,5 L0,10 z" fill="#1a1a1a"/>
+        </marker>
+        <marker id="arrow-r" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto">
+          <path d="M0,0 L10,5 L0,10 z" fill="#B5392A"/>
+        </marker>
+      </defs>
+      <g font-family="Inter, sans-serif" font-size="16" font-weight="700">
+        <!-- boxes -->
+        <rect x="40" y="180" width="200" height="120" rx="10" fill="#fff" stroke="#1a1a1a" stroke-width="2"/>
+        <text x="140" y="220" text-anchor="middle">Sources</text>
+        <text x="140" y="250" text-anchor="middle" font-size="12" font-weight="400" fill="#666">web · pdf · chat</text>
+
+        <rect x="300" y="180" width="200" height="120" rx="10" fill="#fff" stroke="#1a1a1a" stroke-width="2"/>
+        <text x="400" y="220" text-anchor="middle">Clean + Split</text>
+        <text x="400" y="250" text-anchor="middle" font-size="12" font-weight="400" fill="#666">defuddle / chunker</text>
+
+        <rect x="560" y="160" width="220" height="160" rx="10" fill="#B5392A" stroke="#B5392A" stroke-width="2"/>
+        <text x="670" y="210" text-anchor="middle" fill="#fff" font-size="20">Vault (Wiki)</text>
+        <text x="670" y="240" text-anchor="middle" font-size="12" font-weight="400" fill="rgba(255,255,255,.8)">markdown · links</text>
+        <text x="670" y="262" text-anchor="middle" font-size="12" font-weight="400" fill="rgba(255,255,255,.8)">bases · canvas</text>
+
+        <rect x="840" y="180" width="200" height="120" rx="10" fill="#fff" stroke="#1a1a1a" stroke-width="2"/>
+        <text x="940" y="220" text-anchor="middle">Agent Use</text>
+        <text x="940" y="250" text-anchor="middle" font-size="12" font-weight="400" fill="#666">retrieve / answer</text>
+
+        <!-- forward arrows -->
+        <line x1="245" y1="240" x2="295" y2="240" stroke="#1a1a1a" stroke-width="2" marker-end="url(#arrow)"/>
+        <line x1="505" y1="240" x2="555" y2="240" stroke="#1a1a1a" stroke-width="2" marker-end="url(#arrow)"/>
+        <line x1="785" y1="240" x2="835" y2="240" stroke="#1a1a1a" stroke-width="2" marker-end="url(#arrow)"/>
+
+        <!-- feedback dashed -->
+        <path d="M 940 180 Q 940 80, 670 80 Q 400 80, 400 180" fill="none" stroke="#B5392A" stroke-width="2" stroke-dasharray="6 6" marker-end="url(#arrow-r)"/>
+        <rect x="580" y="58" width="180" height="30" rx="6" fill="#F0EAE0" stroke="#B5392A" stroke-width="1"/>
+        <text x="670" y="78" text-anchor="middle" fill="#B5392A" font-size="12">FEEDBACK · wrong / miss</text>
+
+        <!-- bottom feedback to sources -->
+        <path d="M 940 300 Q 940 420, 670 420 Q 140 420, 140 300" fill="none" stroke="#B5392A" stroke-width="2" stroke-dasharray="6 6" marker-end="url(#arrow-r)"/>
+        <rect x="560" y="400" width="220" height="30" rx="6" fill="#F0EAE0" stroke="#B5392A" stroke-width="1"/>
+        <text x="670" y="420" text-anchor="middle" fill="#B5392A" font-size="12">NIGHTLY · suggest new sources</text>
+      </g>
+    </svg>
+    <div class="kb-footer"><span>Diagram · Feedback Loop</span><span>05 / 08</span></div>
+  </section>
+
+  <!-- 6. STATS -->
+  <section class="slide">
+    <div class="kb-grid-bg"></div>
+    <div class="kb-kicker">After 6 Months</div>
+    <h1 class="kb-h1" style="font-size:44px">升级版 <span class="rust">跑了半年</span> 的数据</h1>
+    <div style="display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:24px;margin-top:28px;align-items:center">
+      <div style="text-align:center"><div class="kb-big-num">13</div><p style="font-size:14px;color:#666;margin-top:6px;letter-spacing:.1em;text-transform:uppercase">关键优化项 · 全部落地</p></div>
+      <div class="kb-card"><h4 style="color:var(--kb-rust)">-62%</h4><p>幻觉率（相比无反馈回路版本）</p></div>
+      <div class="kb-card"><h4 style="color:var(--kb-rust)">+4.1×</h4><p>单次检索命中率</p></div>
+    </div>
+    <div class="kb-grid-2" style="margin-top:18px">
+      <div class="kb-card"><h4>自动修订 227 条</h4><p>其中 189 条被人工批准合并，38 条被拒绝（数据已归档）。</p></div>
+      <div class="kb-card"><h4>新增笔记 412 篇</h4><p>从 miss 日志聚类而来，每篇都有来源追溯。</p></div>
+    </div>
+    <div class="kb-footer"><span>Content · Stats</span><span>06 / 08</span></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="kb-grid-bg"></div>
+    <div class="kb-kicker">Next Step</div>
+    <h1 class="kb-h1" style="font-size:60px">开始你的 <span class="rust">Wiki v2</span></h1>
+    <p class="kb-sub">不用重写所有笔记。先接一条回路，让 AI 的每次使用都在「改好」你的 vault。</p>
+    <div class="kb-pipeline">
+      <div class="kb-step"><div class="kb-step-num">TONIGHT</div><div class="kb-step-title">装 Skill</div><div class="kb-step-body">pnpm i -g @lewis/wiki-feedback</div></div>
+      <div class="kb-step"><div class="kb-step-num">DAY 2</div><div class="kb-step-title">跑 7 天</div><div class="kb-step-body">观察 miss log 自动累积</div></div>
+      <div class="kb-step hero"><div class="kb-step-num">DAY 8 · CORE</div><div class="kb-step-title">第一次审 PR</div><div class="kb-step-body">花 15 分钟 review 自动生成的修订</div></div>
+      <div class="kb-step"><div class="kb-step-num">MONTH 1</div><div class="kb-step-title">开始信它</div><div class="kb-step-body">你的 vault 会变成活的</div></div>
+    </div>
+    <div class="kb-footer"><span>CTA</span><span>07 / 08</span></div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="kb-grid-bg"></div>
+    <div style="margin:auto 0;text-align:center">
+      <div class="kb-kicker">END · blueprint v2</div>
+      <h1 class="kb-h1" style="font-size:140px;margin-top:24px">谢谢 <span class="rust">·</span> thanks</h1>
+      <p class="kb-sub" style="margin:0 auto;font-size:22px">图纸、Skill、笔记模板都在 <b>github.com/lewis/karpathy-wiki-v2</b></p>
+    </div>
+    <div class="kb-footer"><span>End of deck</span><span>08 / 08</span></div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/knowledge-arch-blueprint/style.css b/templates/full-decks/knowledge-arch-blueprint/style.css
new file mode 100644
index 0000000..5766212
--- /dev/null
+++ b/templates/full-decks/knowledge-arch-blueprint/style.css
@@ -0,0 +1,49 @@
+/* knowledge-arch-blueprint — 奶油纸 + 建筑蓝图风 */
+.tpl-knowledge-arch-blueprint{
+  --kb-bg:#F0EAE0;
+  --kb-ink:#1a1a1a;
+  --kb-ink2:#555;
+  --kb-ink3:#aaa;
+  --kb-rust:#B5392A;
+  --kb-rust-soft:rgba(181,57,42,.08);
+  --kb-line:#cec8be;
+  background:var(--kb-bg);
+  color:var(--kb-ink);
+  font-family:'Inter','Noto Sans SC',-apple-system,sans-serif;
+}
+.tpl-knowledge-arch-blueprint .slide{background:var(--kb-bg);color:var(--kb-ink);padding:64px 80px}
+.tpl-knowledge-arch-blueprint .kb-grid-bg{position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:linear-gradient(rgba(26,26,26,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(26,26,26,.06) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at center,black 40%,transparent 85%)}
+.tpl-knowledge-arch-blueprint .slide > *{position:relative;z-index:2}
+.tpl-knowledge-arch-blueprint .kb-kicker{font-size:13px;font-weight:800;letter-spacing:4px;text-transform:uppercase;color:var(--kb-rust);margin-bottom:12px}
+.tpl-knowledge-arch-blueprint .kb-h1{font-size:66px;font-weight:900;line-height:1.08;color:#111;margin:0 0 14px;letter-spacing:-.02em}
+.tpl-knowledge-arch-blueprint .kb-h1 span.rust{color:var(--kb-rust)}
+.tpl-knowledge-arch-blueprint .kb-sub{font-size:20px;color:#666;line-height:1.55;max-width:780px}
+.tpl-knowledge-arch-blueprint .kb-insight{display:inline-block;background:var(--kb-rust);color:#fff;border-radius:10px;padding:16px 22px;font-size:14px;font-weight:700;line-height:1.5;max-width:340px;box-shadow:0 8px 24px rgba(181,57,42,.22)}
+.tpl-knowledge-arch-blueprint .kb-insight .kk{font-size:10px;letter-spacing:2px;opacity:.7;display:block;margin-bottom:6px;font-weight:800}
+.tpl-knowledge-arch-blueprint .kb-section-label{font-size:11px;font-weight:800;letter-spacing:3.5px;text-transform:uppercase;color:#aaa;margin:30px 0 12px;display:flex;align-items:center;gap:14px}
+.tpl-knowledge-arch-blueprint .kb-section-label::after{content:'';flex:1;height:1px;background:var(--kb-line)}
+.tpl-knowledge-arch-blueprint .kb-pipeline{display:flex;align-items:stretch;gap:14px;margin-top:24px}
+.tpl-knowledge-arch-blueprint .kb-step{flex:1;border:2px solid #1a1a1a;border-radius:12px;padding:22px 18px;background:#fff;position:relative;min-height:200px;display:flex;flex-direction:column}
+.tpl-knowledge-arch-blueprint .kb-step.hero{background:var(--kb-rust);border-color:var(--kb-rust);color:#fff;flex:1.25;box-shadow:0 10px 32px rgba(181,57,42,.28);transform:translateY(-10px)}
+.tpl-knowledge-arch-blueprint .kb-step-num{font-size:10px;font-weight:800;letter-spacing:2.5px;color:#bbb;margin-bottom:8px;text-transform:uppercase}
+.tpl-knowledge-arch-blueprint .kb-step.hero .kb-step-num{color:rgba(255,255,255,.6)}
+.tpl-knowledge-arch-blueprint .kb-step-title{font-size:22px;font-weight:900;line-height:1.15;color:#111;margin-bottom:8px}
+.tpl-knowledge-arch-blueprint .kb-step.hero .kb-step-title{color:#fff}
+.tpl-knowledge-arch-blueprint .kb-step-body{font-size:13px;line-height:1.55;color:#555;margin-top:auto}
+.tpl-knowledge-arch-blueprint .kb-step.hero .kb-step-body{color:rgba(255,255,255,.88)}
+.tpl-knowledge-arch-blueprint .kb-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px}
+.tpl-knowledge-arch-blueprint .kb-card{background:#fff;border:2px solid #1a1a1a;border-radius:12px;padding:22px 24px}
+.tpl-knowledge-arch-blueprint .kb-card h4{font-size:20px;font-weight:900;margin-bottom:6px}
+.tpl-knowledge-arch-blueprint .kb-card p{font-size:14px;color:#555;line-height:1.55}
+.tpl-knowledge-arch-blueprint .kb-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:22px;font-size:12px;color:#666}
+.tpl-knowledge-arch-blueprint .kb-legend .d{display:flex;align-items:center;gap:8px}
+.tpl-knowledge-arch-blueprint .kb-legend .b{width:14px;height:14px;border:2px solid #1a1a1a;border-radius:3px}
+.tpl-knowledge-arch-blueprint .kb-legend .b.rust{background:var(--kb-rust);border-color:var(--kb-rust)}
+.tpl-knowledge-arch-blueprint .kb-footer{position:absolute;left:80px;right:80px;bottom:36px;display:flex;justify-content:space-between;font-size:11px;color:#999;letter-spacing:.15em;text-transform:uppercase;border-top:1px solid var(--kb-line);padding-top:16px}
+.tpl-knowledge-arch-blueprint .kb-mono{font-family:'JetBrains Mono',monospace}
+.tpl-knowledge-arch-blueprint .kb-codebox{background:#1a1a1a;color:#f0eae0;border-radius:12px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.8;margin-top:20px;border:2px solid #1a1a1a}
+.tpl-knowledge-arch-blueprint .kb-codebox .cm{color:#7a766c}
+.tpl-knowledge-arch-blueprint .kb-codebox .kw{color:#e8a87c}
+.tpl-knowledge-arch-blueprint .kb-codebox .st{color:#b3d1bc}
+.tpl-knowledge-arch-blueprint .kb-codebox .hl{color:var(--kb-rust);background:rgba(255,255,255,.08);padding:0 4px;border-radius:3px}
+.tpl-knowledge-arch-blueprint .kb-big-num{font-family:'Playfair Display',Georgia,serif;font-size:200px;font-weight:900;line-height:.9;color:var(--kb-rust);letter-spacing:-.04em}
diff --git a/templates/full-decks/obsidian-claude-gradient/README.md b/templates/full-decks/obsidian-claude-gradient/README.md
new file mode 100644
index 0000000..7c0465c
--- /dev/null
+++ b/templates/full-decks/obsidian-claude-gradient/README.md
@@ -0,0 +1,11 @@
+# obsidian-claude-gradient
+
+GitHub-dark (`#0d1117`) + 紫色 ambient radial + 60px 遮罩网格 + 紫→蓝→绿渐变文字。灵感来自 `20260406-obsidian-claude/slides.html` 的 `--accent #7c3aed`、`.cbg` 双 radial cover、`.cgrid` 60px 遮罩网格以及 `.g` 三停渐变。
+
+**Visual traits:** 深灰蓝底 + 紫蓝 radial 晕染 + 暗网格遮罩、居中对齐的标题/正文、圆角紫色 pill tag、linear `#a855f7→#60a5fa→#34d399` 渐变字、GitHub-ish 代码色 (`#010409` 背景 + 紫/蓝/橙/绿 token)、紫色左边框 highlight 块、简洁 step 列表。
+
+**Use when:** 讲一个开发者友好的工作流、MCP / Agent / Dev tool 教程；你希望气质接近 GitHub Blog / Linear Changelog；内容以配置文件 + 步骤为主。
+
+**Source inspiration:** `20260406-obsidian-claude/slides.html`.
+
+**Path:** `templates/full-decks/obsidian-claude-gradient/index.html`
diff --git a/templates/full-decks/obsidian-claude-gradient/index.html b/templates/full-decks/obsidian-claude-gradient/index.html
new file mode 100644
index 0000000..ce9612f
--- /dev/null
+++ b/templates/full-decks/obsidian-claude-gradient/index.html
@@ -0,0 +1,144 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Obsidian × Claude Gradient</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-obsidian-claude-gradient">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">01 / 08</div>
+    <div class="oc-tag">● OBSIDIAN × CLAUDE · 第二大脑</div>
+    <h1 class="oc-h1">把 Obsidian 和 Claude<br>拧成 <span class="oc-g">一条神经</span></h1>
+    <p class="oc-sub">不是又一个 AI 笔记插件 —— 是让 Claude 真正理解你 vault 的结构、链接、双向引用，<br>然后在你想写东西之前就把资料准备好。</p>
+    <div style="margin-top:32px">
+      <span class="oc-pill">🧠 Markdown-native</span>
+      <span class="oc-pill">⚡ MCP-ready</span>
+      <span class="oc-pill">🔗 双链理解</span>
+    </div>
+  </section>
+
+  <!-- 2. SECTION -->
+  <section class="slide">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">02 / 08</div>
+    <div class="oc-tag">● CHAPTER 01</div>
+    <h1 class="oc-h1" style="font-size:110px">Why <span class="oc-g">not</span> Notion?</h1>
+    <p class="oc-sub">当你的知识多到会互相引用时，<br>「文件夹」就不够了，「数据库」也不是答案。</p>
+  </section>
+
+  <!-- 3. CONTENT — compare cards -->
+  <section class="slide">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">03 / 08</div>
+    <div class="oc-tag">● COMPARE</div>
+    <h2 class="oc-h2">Notion vs <span class="oc-g">Obsidian</span> · 对 AI 友好度</h2>
+    <div class="oc-grid-2">
+      <div class="oc-card">
+        <span class="oc-badge oc-bb">NOTION</span>
+        <h4 style="font-size:20px;margin-bottom:10px">数据库原生</h4>
+        <p style="color:var(--oc-dim);font-size:14px;line-height:1.65">适合结构化任务、团队协作，但是——<br>• AI 要走 API，拿不到实时全文<br>• 嵌套块结构复杂，token 成本高<br>• 本地化差，没法当长期记忆</p>
+      </div>
+      <div class="oc-card" style="border-color:rgba(168,85,247,.35);background:rgba(124,58,237,.05)">
+        <span class="oc-badge oc-bp">OBSIDIAN</span>
+        <h4 style="font-size:20px;margin-bottom:10px">纯 Markdown + 双链</h4>
+        <p style="color:var(--oc-dim);font-size:14px;line-height:1.65">对 AI 天生友好 ——<br>• 所有东西就是文件，Claude 直接读<br>• 双链 = 天然 graph，抽实体几乎零成本<br>• 离线、可 git、可 diff、可回滚</p>
+      </div>
+    </div>
+    <div class="oc-hl" style="margin-top:26px">💡 <b>关键洞察：</b>AI 不需要「更聪明的数据库」，它需要「能被它自己读懂的文件系统」。</div>
+  </section>
+
+  <!-- 4. STEPS -->
+  <section class="slide">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">04 / 08</div>
+    <div class="oc-tag">● SETUP · 4 STEPS</div>
+    <h2 class="oc-h2">从 0 到第一次「AI 写笔记」</h2>
+    <div class="oc-steps">
+      <div class="oc-step"><div class="oc-sn">1</div><div class="oc-sc"><h4>装 Obsidian + 开 Local REST API 插件</h4><p>社区插件，一个勾就开。它让外部进程能 read/write 你的 vault。</p></div></div>
+      <div class="oc-step"><div class="oc-sn">2</div><div class="oc-sc"><h4>接 Claude Desktop + obsidian-mcp server</h4><p>MCP 一个配置文件就能接，token 填 vault 的 api key。</p></div></div>
+      <div class="oc-step"><div class="oc-sn">3</div><div class="oc-sc"><h4>装 5 个 obsidian-skills</h4><p>markdown / bases / canvas / cli / defuddle —— 让 Claude 知道怎么正确使用 Obsidian。</p></div></div>
+      <div class="oc-step"><div class="oc-sn">4</div><div class="oc-sc"><h4>让 Claude 自己整理一次</h4><p>「帮我把最近 10 篇笔记里的重复概念合并，生成一张新的 MOC」—— 90 秒出结果。</p></div></div>
+    </div>
+  </section>
+
+  <!-- 5. CODE -->
+  <section class="slide">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">05 / 08</div>
+    <div class="oc-tag">● MCP CONFIG</div>
+    <h2 class="oc-h2">claude_desktop_config.json</h2>
+    <pre class="oc-code"><span class="cm">// ~/Library/Application Support/Claude/claude_desktop_config.json</span>
+{
+  <span class="cc">"mcpServers"</span>: {
+    <span class="cc">"obsidian"</span>: {
+      <span class="cc">"command"</span>: <span class="cs">"npx"</span>,
+      <span class="cc">"args"</span>: [<span class="cs">"-y"</span>, <span class="cs">"@modelcontextprotocol/server-obsidian"</span>],
+      <span class="cc">"env"</span>: {
+        <span class="cc">"OBSIDIAN_API_KEY"</span>: <span class="cs">"xxxxxxxxxxxxxxxx"</span>,
+        <span class="cc">"OBSIDIAN_HOST"</span>: <span class="cs">"http://127.0.0.1:27123"</span>
+      }
+    }
+  }
+}</pre>
+    <p class="oc-sub" style="margin-top:18px">重启 Claude Desktop，输入 <b style="color:var(--oc-accent3)">/mcp</b>，你会看到 obsidian 已连。</p>
+  </section>
+
+  <!-- 6. STATS -->
+  <section class="slide">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">06 / 08</div>
+    <div class="oc-tag">● 3 MONTHS IN</div>
+    <h2 class="oc-h2">跑了 90 天，我的 <span class="oc-g">vault 数据</span></h2>
+    <div class="oc-grid-3" style="margin-top:28px">
+      <div class="oc-card" style="text-align:center"><div class="oc-big oc-g" style="font-size:80px">1,842</div><p style="color:var(--oc-dim);margin-top:8px;font-size:13px">notes in vault</p></div>
+      <div class="oc-card" style="text-align:center"><div class="oc-big oc-g" style="font-size:80px">6.3k</div><p style="color:var(--oc-dim);margin-top:8px;font-size:13px">backlinks (由 AI 自动补)</p></div>
+      <div class="oc-card" style="text-align:center"><div class="oc-big oc-g" style="font-size:80px">-74%</div><p style="color:var(--oc-dim);margin-top:8px;font-size:13px">找资料平均耗时</p></div>
+    </div>
+    <div class="oc-hl" style="margin-top:26px">最大收益不是「AI 帮我写」，而是「AI 帮我把旧笔记重新连起来」—— 每周 30 分钟，vault 就会主动生长。</div>
+  </section>
+
+  <!-- 7. QUOTE / CTA -->
+  <section class="slide">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">07 / 08</div>
+    <div class="oc-tag">● CTA · 今晚可以做</div>
+    <div class="oc-quote">
+      <blockquote>不要再找「AI 笔记应用」了。<br>你要的是一个 <span class="oc-g">文件夹 + 一条神经</span>。</blockquote>
+      <div class="attr">— 我自己，用了 90 天后</div>
+    </div>
+    <div style="margin-top:36px">
+      <span class="oc-pill">⬇ obsidian.md</span>
+      <span class="oc-pill">⬇ Claude Desktop</span>
+      <span class="oc-pill">⬇ obsidian-mcp</span>
+      <span class="oc-pill">⬇ obsidian-skills × 5</span>
+    </div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="oc-cbg"></div>
+    <div class="oc-cgrid"></div>
+    <div class="oc-snum">08 / 08</div>
+    <div class="oc-big oc-g">Thanks.</div>
+    <p class="oc-sub" style="margin-top:26px">配置模板、skill manifest、我的 vault 结构图都在 <b style="color:var(--oc-accent3)">github.com/lewis/obsidian-claude</b></p>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/obsidian-claude-gradient/style.css b/templates/full-decks/obsidian-claude-gradient/style.css
new file mode 100644
index 0000000..e27048c
--- /dev/null
+++ b/templates/full-decks/obsidian-claude-gradient/style.css
@@ -0,0 +1,59 @@
+/* obsidian-claude-gradient — 紫色暗底 + GitHub-ish 渐变卡 */
+.tpl-obsidian-claude-gradient{
+  --oc-bg:#0d1117;
+  --oc-surface:#161b22;
+  --oc-surface2:#21262d;
+  --oc-border:#30363d;
+  --oc-accent:#7c3aed;
+  --oc-accent2:#a855f7;
+  --oc-accent3:#c084fc;
+  --oc-green:#3fb950;
+  --oc-blue:#58a6ff;
+  --oc-orange:#f97316;
+  --oc-yellow:#fbbf24;
+  --oc-red:#f87171;
+  --oc-text:#e6edf3;
+  --oc-dim:#8b949e;
+  --oc-dimmer:#484f58;
+  background:var(--oc-bg);
+  color:var(--oc-text);
+  font-family:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif;
+}
+.tpl-obsidian-claude-gradient .slide{background:var(--oc-bg);color:var(--oc-text);padding:64px 88px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;overflow:hidden}
+.tpl-obsidian-claude-gradient .oc-cbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 28% 38%,rgba(124,58,237,.25) 0%,transparent 60%),radial-gradient(ellipse at 72% 62%,rgba(88,166,255,.18) 0%,transparent 60%)}
+.tpl-obsidian-claude-gradient .oc-cgrid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(48,54,61,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(48,54,61,.4) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 35%,transparent 80%)}
+.tpl-obsidian-claude-gradient .slide > *{position:relative;z-index:2}
+.tpl-obsidian-claude-gradient .oc-snum{position:absolute;top:24px;right:36px;color:var(--oc-dimmer);font-size:12px;letter-spacing:.1em;z-index:3}
+.tpl-obsidian-claude-gradient .oc-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oc-accent3);background:rgba(124,58,237,.14);border:1px solid rgba(168,85,247,.3);padding:5px 16px;border-radius:999px;margin-bottom:22px}
+.tpl-obsidian-claude-gradient .oc-h1{font-size:72px;font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0 0 10px;color:var(--oc-text)}
+.tpl-obsidian-claude-gradient .oc-h2{font-size:44px;font-weight:700;line-height:1.18;letter-spacing:-.015em;margin:0 0 14px}
+.tpl-obsidian-claude-gradient .oc-sub{font-size:19px;color:var(--oc-dim);line-height:1.65;max-width:720px;margin-top:14px}
+.tpl-obsidian-claude-gradient .oc-g{background:linear-gradient(135deg,#a855f7 0%,#60a5fa 55%,#34d399 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
+.tpl-obsidian-claude-gradient .oc-card{background:var(--oc-surface);border:1px solid var(--oc-border);border-radius:14px;padding:22px 26px;text-align:left;position:relative;overflow:hidden}
+.tpl-obsidian-claude-gradient .oc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(168,85,247,.4),transparent)}
+.tpl-obsidian-claude-gradient .oc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;width:100%;max-width:1000px;margin-top:24px}
+.tpl-obsidian-claude-gradient .oc-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;width:100%;max-width:1080px;margin-top:24px}
+.tpl-obsidian-claude-gradient .oc-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 11px;border-radius:999px;margin-bottom:10px}
+.tpl-obsidian-claude-gradient .oc-bp{background:rgba(168,85,247,.15);color:var(--oc-accent3)}
+.tpl-obsidian-claude-gradient .oc-bb{background:rgba(88,166,255,.15);color:var(--oc-blue)}
+.tpl-obsidian-claude-gradient .oc-bg{background:rgba(63,185,80,.15);color:var(--oc-green)}
+.tpl-obsidian-claude-gradient .oc-bo{background:rgba(249,115,22,.15);color:var(--oc-orange)}
+.tpl-obsidian-claude-gradient .oc-code{background:#010409;border:1px solid var(--oc-border);border-radius:12px;padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;width:100%;max-width:860px;text-align:left;color:#e6edf3}
+.tpl-obsidian-claude-gradient .oc-code .cp{color:var(--oc-green)}
+.tpl-obsidian-claude-gradient .oc-code .cc{color:var(--oc-blue)}
+.tpl-obsidian-claude-gradient .oc-code .ca{color:var(--oc-accent3)}
+.tpl-obsidian-claude-gradient .oc-code .cm{color:var(--oc-dimmer)}
+.tpl-obsidian-claude-gradient .oc-code .cs{color:var(--oc-orange)}
+.tpl-obsidian-claude-gradient .oc-hl{background:rgba(124,58,237,.1);border:1px solid rgba(168,85,247,.3);border-left:4px solid var(--oc-accent2);border-radius:0 12px 12px 0;padding:16px 22px;font-size:16px;line-height:1.7;max-width:860px;text-align:left}
+.tpl-obsidian-claude-gradient .oc-steps{display:flex;flex-direction:column;gap:0;width:100%;max-width:820px;text-align:left}
+.tpl-obsidian-claude-gradient .oc-step{display:flex;gap:20px;align-items:flex-start;padding:18px 0;border-bottom:1px solid var(--oc-border)}
+.tpl-obsidian-claude-gradient .oc-step:last-child{border-bottom:none}
+.tpl-obsidian-claude-gradient .oc-sn{width:36px;height:36px;flex-shrink:0;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;background:linear-gradient(135deg,var(--oc-accent),var(--oc-blue));color:#fff}
+.tpl-obsidian-claude-gradient .oc-sc h4{font-size:17px;font-weight:600;margin-bottom:6px;color:var(--oc-text)}
+.tpl-obsidian-claude-gradient .oc-sc p{font-size:14px;color:var(--oc-dim);line-height:1.6}
+.tpl-obsidian-claude-gradient .oc-pill{display:inline-flex;align-items:center;gap:8px;background:var(--oc-surface2);border:1px solid var(--oc-border);border-radius:999px;padding:7px 18px;font-size:14px;font-weight:500;color:var(--oc-text);margin:4px 6px 4px 0}
+.tpl-obsidian-claude-gradient .oc-quote{max-width:800px}
+.tpl-obsidian-claude-gradient .oc-quote blockquote{font-size:26px;font-weight:500;line-height:1.6;position:relative;padding:0 36px;margin:0;color:var(--oc-text)}
+.tpl-obsidian-claude-gradient .oc-quote blockquote::before{content:'"';position:absolute;left:-6px;top:-22px;font-size:78px;color:var(--oc-accent);opacity:.4;font-family:Georgia,serif;line-height:1}
+.tpl-obsidian-claude-gradient .oc-quote .attr{margin-top:20px;font-size:13px;color:var(--oc-dim)}
+.tpl-obsidian-claude-gradient .oc-big{font-size:140px;font-weight:900;line-height:.95;letter-spacing:-.04em}
diff --git a/templates/full-decks/pitch-deck/README.md b/templates/full-decks/pitch-deck/README.md
new file mode 100644
index 0000000..d8d8d32
--- /dev/null
+++ b/templates/full-decks/pitch-deck/README.md
@@ -0,0 +1,9 @@
+# pitch-deck
+
+Classic 10-slide YC/VC seed pitch: cover, problem, solution, product, market, business model, traction, team, ask, thanks.
+
+Clean white background, bold blue→purple gradient accent, oversized headlines and big numbers — the look investors expect when they skim 40 decks a day.
+
+**Use when:** pitching a fundraise, office hours, or a "state of the company" update. Swap copy, keep structure.
+**Feel:** confident, data-forward, founder-friendly.
+**Brand color:** override `--grad` in `style.css` to re-skin.
diff --git a/templates/full-decks/pitch-deck/index.html b/templates/full-decks/pitch-deck/index.html
new file mode 100644
index 0000000..82b857a
--- /dev/null
+++ b/templates/full-decks/pitch-deck/index.html
@@ -0,0 +1,148 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Lumen · Pitch Deck</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-pitch-deck">
+<div class="deck">
+
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <div class="cover-bg"></div>
+    <div class="cover-blob"></div>
+    <div style="position:absolute;top:56px;left:112px"><span class="brand-dot"></span><span class="brand">Lumen</span></div>
+    <p class="kicker">Seed round · 2026</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">The operating system<br>for <span class="gradient-text">solo founders</span>.</h1>
+    <p class="lede mt-m">One workspace for billing, CRM, contracts and taxes — built for the 70M people running a business of one.</p>
+    <div class="deck-footer"><span>Maya Chen · CEO</span><span class="slide-number" data-current="1" data-total="10"></span></div>
+  </section>
+
+  <!-- 2. Problem -->
+  <section class="slide" data-title="Problem">
+    <span class="section-num">01</span>
+    <p class="num-tag">PROBLEM</p>
+    <h2 class="h2 mt-s">Solo founders duct-tape<br>7+ tools to stay alive.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card"><h4>Fragmentation</h4><p class="dim">Stripe, QuickBooks, HubSpot, DocuSign, Notion, Gusto, a spreadsheet. Nothing talks.</p></div>
+      <div class="card"><h4>$480/mo wasted</h4><p class="dim">Average solo founder pays for 9 SaaS seats they only half-use.</p></div>
+      <div class="card"><h4>14 hrs / week lost</h4><p class="dim">Copy-pasting between tools instead of selling.</p></div>
+    </div>
+  </section>
+
+  <!-- 3. Solution -->
+  <section class="slide" data-title="Solution">
+    <span class="section-num">02</span>
+    <p class="num-tag">SOLUTION</p>
+    <h2 class="h2 mt-s">Lumen is <span class="gradient-text">one spine</span><br>for the business of one.</h2>
+    <p class="lede mt-m">Invoice a client → the payment lands → the tax is reserved → the contract is filed → your dashboard updates. In one app. Without plumbing.</p>
+    <div class="row mt-l">
+      <span class="pill pill-accent">Billing</span>
+      <span class="pill pill-accent">CRM</span>
+      <span class="pill pill-accent">Contracts</span>
+      <span class="pill pill-accent">Taxes</span>
+      <span class="pill pill-accent">Banking</span>
+    </div>
+  </section>
+
+  <!-- 4. Product -->
+  <section class="slide" data-title="Product">
+    <span class="section-num">03</span>
+    <p class="num-tag">PRODUCT</p>
+    <h2 class="h2 mt-s">Built around "jobs to be done".</h2>
+    <div class="grid g2 mt-l">
+      <div class="card card-hover"><h4>Get paid</h4><p class="dim">Invoices, subscriptions and Stripe/Wise payouts with a single click. ACH, card, wire, crypto.</p></div>
+      <div class="card card-hover"><h4>Stay legal</h4><p class="dim">E-sign contracts from templates. Auto-file 1099s and quarterly estimates.</p></div>
+      <div class="card card-hover"><h4>Sell smarter</h4><p class="dim">Lead inbox, pipeline, email sequences. No separate CRM.</p></div>
+      <div class="card card-hover"><h4>See the business</h4><p class="dim">Live P&amp;L, runway, top customers, churn. One dashboard, zero spreadsheets.</p></div>
+    </div>
+  </section>
+
+  <!-- 5. Market -->
+  <section class="slide" data-title="Market">
+    <span class="section-num">04</span>
+    <p class="num-tag">MARKET</p>
+    <h2 class="h2 mt-s">A very big small business.</h2>
+    <div class="grid g3 mt-l">
+      <div class="metric"><div class="n">73M</div><div class="l">solo businesses in the US + EU</div></div>
+      <div class="metric"><div class="n">$186B</div><div class="l">TAM · horizontal SaaS spend</div></div>
+      <div class="metric"><div class="n">9.4%</div><div class="l">CAGR through 2030</div></div>
+    </div>
+    <p class="lede mt-l">Creators, consultants, indie devs, coaches, freelancers — the fastest-growing segment of the workforce, and the most under-served by tooling.</p>
+  </section>
+
+  <!-- 6. Business model -->
+  <section class="slide" data-title="Business Model">
+    <span class="section-num">05</span>
+    <p class="num-tag">BUSINESS MODEL</p>
+    <h2 class="h2 mt-s">Flat SaaS + payment rake.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card"><h4>Starter</h4><div class="metric mt-s"><div class="n" style="font-size:56px">$29</div><div class="l">/ month · core billing + CRM</div></div></div>
+      <div class="card card-accent"><h4>Pro</h4><div class="metric mt-s"><div class="n" style="font-size:56px">$79</div><div class="l">/ month · contracts, taxes, banking</div></div></div>
+      <div class="card"><h4>+ Payments</h4><div class="metric mt-s"><div class="n" style="font-size:56px">0.4%</div><div class="l">interchange rake on processed volume</div></div></div>
+    </div>
+    <p class="dim mt-l">Blended LTV $1,920 · CAC payback 5 months at current funnel.</p>
+  </section>
+
+  <!-- 7. Traction -->
+  <section class="slide" data-title="Traction">
+    <span class="section-num">06</span>
+    <p class="num-tag">TRACTION</p>
+    <h2 class="h2 mt-s">6 months, growing 38% MoM.</h2>
+    <div class="traction-bar mt-l">
+      <div class="bar" style="height:18%"><em>$6k</em><span>Oct</span></div>
+      <div class="bar" style="height:30%"><em>$11k</em><span>Nov</span></div>
+      <div class="bar" style="height:44%"><em>$17k</em><span>Dec</span></div>
+      <div class="bar" style="height:62%"><em>$26k</em><span>Jan</span></div>
+      <div class="bar" style="height:82%"><em>$38k</em><span>Feb</span></div>
+      <div class="bar" style="height:100%"><em>$54k</em><span>Mar</span></div>
+    </div>
+    <p class="dim mt-l" style="margin-top:48px">2,140 paying customers · NPS 72 · Net retention 118%</p>
+  </section>
+
+  <!-- 8. Team -->
+  <section class="slide" data-title="Team">
+    <span class="section-num">07</span>
+    <p class="num-tag">TEAM</p>
+    <h2 class="h2 mt-s">Shipped at scale before.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card team-card"><div class="avatar">MC</div><h4>Maya Chen</h4><p class="dim">CEO · ex-Stripe billing lead. 8 yrs in payments.</p></div>
+      <div class="card team-card"><div class="avatar">RP</div><h4>Raj Patel</h4><p class="dim">CTO · ex-Linear. Built multiplayer sync at 10M users.</p></div>
+      <div class="card team-card"><div class="avatar">EK</div><h4>Elena Kim</h4><p class="dim">Head of Design · ex-Notion. Shipped the mobile relaunch.</p></div>
+    </div>
+  </section>
+
+  <!-- 9. Ask -->
+  <section class="slide" data-title="The Ask">
+    <p class="num-tag">THE ASK</p>
+    <div class="ask-box mt-m">
+      <h2 class="h2">Raising $4.5M seed.</h2>
+      <p class="lede" style="color:rgba(255,255,255,.9);max-width:60ch">18 months of runway to reach $3M ARR. 40% engineering, 35% growth, 15% compliance/banking licenses, 10% runway buffer.</p>
+      <div class="row mt-l" style="gap:40px">
+        <div><div style="font-size:44px;font-weight:900">$4.5M</div><div class="dim">SAFE · post-money cap $28M</div></div>
+        <div><div style="font-size:44px;font-weight:900">18 mo</div><div class="dim">runway to Series A</div></div>
+        <div><div style="font-size:44px;font-weight:900">$3M</div><div class="dim">ARR target by close</div></div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 10. Thanks -->
+  <section class="slide center tc" data-title="Thanks">
+    <div class="cover-bg"></div>
+    <div>
+      <div class="mega">Thanks.</div>
+      <p class="mega-sub">maya@lumen.app · lumen.app/investors</p>
+      <div class="row mt-l" style="justify-content:center;gap:24px">
+        <span class="pill pill-accent">Let's talk</span>
+        <span class="pill">Deck v4.2 · Apr 2026</span>
+      </div>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>
diff --git a/templates/full-decks/pitch-deck/style.css b/templates/full-decks/pitch-deck/style.css
new file mode 100644
index 0000000..b565999
--- /dev/null
+++ b/templates/full-decks/pitch-deck/style.css
@@ -0,0 +1,40 @@
+/* pitch-deck — classic YC/VC pitch */
+.tpl-pitch-deck{
+  --bg:#ffffff;--bg-soft:#f6f7fb;--surface:#ffffff;--surface-2:#f2f4fa;
+  --border:rgba(20,25,60,.08);--border-strong:rgba(20,25,60,.18);
+  --text-1:#0d1130;--text-2:#4a5070;--text-3:#8a90ad;
+  --accent:#3b5bff;--accent-2:#7a46ff;--accent-3:#d94cff;
+  --grad:linear-gradient(135deg,#3b5bff 0%,#7a46ff 55%,#d94cff 100%);
+  --grad-soft:linear-gradient(135deg,#eef1ff,#f4edff 55%,#fbedff);
+  --radius:20px;--radius-lg:28px;
+  --shadow:0 14px 40px rgba(20,25,60,.08),0 2px 8px rgba(20,25,60,.04);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-pitch-deck .slide{padding:88px 112px}
+.tpl-pitch-deck .kicker{color:var(--accent);font-weight:700}
+.tpl-pitch-deck .h1{font-size:86px;line-height:1.02;font-weight:900;letter-spacing:-.035em}
+.tpl-pitch-deck .h2{font-size:62px;font-weight:800;letter-spacing:-.03em}
+.tpl-pitch-deck .mega{font-size:180px;font-weight:900;line-height:.95;letter-spacing:-.05em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
+.tpl-pitch-deck .mega-sub{font-size:28px;color:var(--text-2);margin-top:18px}
+.tpl-pitch-deck .cover-bg{position:absolute;inset:0;background:var(--grad-soft);z-index:-1}
+.tpl-pitch-deck .cover-blob{position:absolute;right:-140px;top:-140px;width:560px;height:560px;border-radius:50%;background:var(--grad);filter:blur(8px);opacity:.35;z-index:-1}
+.tpl-pitch-deck .brand-dot{display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--grad);margin-right:10px;vertical-align:middle}
+.tpl-pitch-deck .brand{font-weight:800;font-size:22px;letter-spacing:-.02em}
+.tpl-pitch-deck .card{border-radius:var(--radius)}
+.tpl-pitch-deck .num-tag{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;color:var(--accent);letter-spacing:.12em}
+.tpl-pitch-deck .big-q{font-family:'Playfair Display',serif;font-size:56px;line-height:1.15;font-weight:700;letter-spacing:-.02em;max-width:22ch}
+.tpl-pitch-deck .metric{display:flex;flex-direction:column;gap:6px}
+.tpl-pitch-deck .metric .n{font-size:72px;font-weight:900;letter-spacing:-.035em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1}
+.tpl-pitch-deck .metric .l{color:var(--text-2);font-size:16px}
+.tpl-pitch-deck .team-card{text-align:center;padding:32px 20px}
+.tpl-pitch-deck .avatar{width:96px;height:96px;border-radius:50%;margin:0 auto 14px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:32px}
+.tpl-pitch-deck .ask-box{background:var(--grad);color:#fff;padding:56px 64px;border-radius:var(--radius-lg);box-shadow:0 30px 70px rgba(59,91,255,.35)}
+.tpl-pitch-deck .ask-box .h2{color:#fff}
+.tpl-pitch-deck .ask-box .dim{color:rgba(255,255,255,.85)}
+.tpl-pitch-deck .traction-bar{display:flex;align-items:flex-end;gap:14px;height:240px;margin-top:24px}
+.tpl-pitch-deck .traction-bar .bar{flex:1;background:var(--grad);border-radius:8px 8px 0 0;position:relative;min-height:20px}
+.tpl-pitch-deck .traction-bar .bar span{position:absolute;bottom:-28px;left:0;right:0;text-align:center;font-size:13px;color:var(--text-3)}
+.tpl-pitch-deck .traction-bar .bar em{position:absolute;top:-28px;left:0;right:0;text-align:center;font-size:14px;font-weight:700;font-style:normal;color:var(--text-1)}
+.tpl-pitch-deck .section-num{font-size:220px;font-weight:900;line-height:.9;color:var(--surface-2);position:absolute;right:72px;bottom:40px;z-index:0;letter-spacing:-.05em}
+.tpl-pitch-deck .slide > *{position:relative;z-index:1}
+.tpl-pitch-deck .deck-footer{color:var(--text-3)}
diff --git a/templates/full-decks/product-launch/README.md b/templates/full-decks/product-launch/README.md
new file mode 100644
index 0000000..27bbbb0
--- /dev/null
+++ b/templates/full-decks/product-launch/README.md
@@ -0,0 +1,8 @@
+# product-launch
+
+8-slide consumer product announcement deck: hero cover, "introducing" moment, three feature slides, how-it-works, pricing tiers, and a closing testimonial + pre-order CTA.
+
+Mixes dark hero slides (for show-off moments) with light slides (for details and pricing). Warm orange→peach gradient accent feels confident and human; easy to re-skin for any brand.
+
+**Use when:** launching a product, announcing a v2, internal all-hands reveals, press kit decks.
+**Feel:** Apple-event-on-a-budget — confident, tactile, uncluttered.
diff --git a/templates/full-decks/product-launch/index.html b/templates/full-decks/product-launch/index.html
new file mode 100644
index 0000000..17ea401
--- /dev/null
+++ b/templates/full-decks/product-launch/index.html
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Halo v2 · Launch</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-product-launch">
+<div class="deck">
+
+  <!-- 1. Cover / hero -->
+  <section class="slide dark" data-title="Cover">
+    <div class="hero-shot"></div>
+    <div style="position:absolute;top:56px;left:112px" class="brand">◎ Halo</div>
+    <p class="kicker">Launch · April 2026</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">Meet Halo v2.<br>Your ears,<br><span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">rewritten.</span></h1>
+    <p class="lede mt-m" style="max-width:42ch">Studio-grade spatial audio in the lightest open-ear earbuds ever made.</p>
+    <div class="deck-footer"><span>halo.audio</span><span class="slide-number" data-current="1" data-total="8"></span></div>
+  </section>
+
+  <!-- 2. Introducing -->
+  <section class="slide center tc" data-title="Introducing">
+    <div>
+      <p class="kicker">Introducing</p>
+      <h1 class="h1" style="font-size:140px">Halo v2</h1>
+      <p class="lede" style="margin:24px auto;max-width:56ch">Four years of research. Three generations of silicon. One product you'll forget you're wearing.</p>
+    </div>
+  </section>
+
+  <!-- 3. Feature 1 -->
+  <section class="slide" data-title="Sound">
+    <p class="kicker">01 · The sound</p>
+    <h2 class="h2">Hear the room<br>around the music.</h2>
+    <div class="grid g3 mt-l">
+      <div class="feature-card"><div class="icon">♪</div><h4>Open-ear spatial</h4><p class="dim">16mm titanium drivers angled into the ear canal. You hear the song and the world at once.</p></div>
+      <div class="feature-card"><div class="icon">◈</div><h4>Lossless 24-bit</h4><p class="dim">aptX Lossless and Hi-Res LDAC over Bluetooth 5.4. No dongles, no compromises.</p></div>
+      <div class="feature-card"><div class="icon">◐</div><h4>Adaptive EQ</h4><p class="dim">Tunes itself to the shape of your ear every 120 seconds.</p></div>
+    </div>
+  </section>
+
+  <!-- 4. Feature 2 -->
+  <section class="slide dark" data-title="Fit">
+    <p class="kicker">02 · The fit</p>
+    <h2 class="h2">4.9 grams.<br>All-day forgettable.</h2>
+    <div class="grid g3 mt-l">
+      <div class="card"><h4>Liquid-silicone hook</h4><p>Wraps behind the ear like a glasses arm. Never falls out on a run.</p></div>
+      <div class="card"><h4>IP57 sweat + rain</h4><p>Take them in the ocean. Rinse them under the tap. We dare you.</p></div>
+      <div class="card"><h4>14h + 42h case</h4><p>A full workweek of commutes on one charge of the case.</p></div>
+    </div>
+  </section>
+
+  <!-- 5. Feature 3 -->
+  <section class="slide" data-title="Intelligence">
+    <p class="kicker">03 · The intelligence</p>
+    <h2 class="h2">An AI that listens<br>so you don't have to.</h2>
+    <div class="grid g2 mt-l">
+      <div class="feature-card"><div class="icon">✦</div><h4>Live translate</h4><p class="dim">Real-time translation in 41 languages. Whispered directly into your ear, with a 380ms lag.</p></div>
+      <div class="feature-card"><div class="icon">✧</div><h4>Meeting recap</h4><p class="dim">Double-tap to record. Walk away with a summary, action items, and a searchable transcript.</p></div>
+    </div>
+  </section>
+
+  <!-- 6. How it works -->
+  <section class="slide" data-title="How it works">
+    <p class="kicker">How it works</p>
+    <h2 class="h2">Three taps. You're in.</h2>
+    <div class="stack mt-l" style="max-width:900px">
+      <div class="step"><div class="n">1</div><div><h4>Open the case near your phone</h4><p class="dim">iOS and Android pair automatically over Bluetooth LE. No app downloads required.</p></div></div>
+      <div class="step"><div class="n">2</div><div><h4>Pick your profile</h4><p class="dim">Commute, Focus, Workout, Cinema. Each is a complete audio + transparency recipe.</p></div></div>
+      <div class="step"><div class="n">3</div><div><h4>Just listen</h4><p class="dim">Halo adapts to your ear shape, your environment, and your hearing profile — continuously.</p></div></div>
+    </div>
+  </section>
+
+  <!-- 7. Pricing -->
+  <section class="slide" data-title="Pricing">
+    <p class="kicker">Pricing</p>
+    <h2 class="h2">Pick your Halo.</h2>
+    <div class="grid g3 mt-l" style="align-items:start">
+      <div class="price-card">
+        <h4>Halo Lite</h4>
+        <div class="amount">$179</div>
+        <p class="dim">Open-ear audio, IP57, 12h battery.</p>
+        <ul><li>AAC + SBC</li><li>Single-tap controls</li><li>USB-C charging</li></ul>
+      </div>
+      <div class="price-card pro">
+        <h4>Halo v2 · Pro</h4>
+        <div class="amount">$279</div>
+        <p class="dim">Everything, in its best form.</p>
+        <ul><li>Hi-Res Lossless</li><li>Live translate · 41 lang</li><li>Wireless + MagSafe charging</li><li>Adaptive EQ</li></ul>
+      </div>
+      <div class="price-card">
+        <h4>Halo Studio</h4>
+        <div class="amount">$399</div>
+        <p class="dim">For creators and field recorders.</p>
+        <ul><li>32-bit binaural capture</li><li>XLR dongle included</li><li>Lifetime firmware</li></ul>
+      </div>
+    </div>
+  </section>
+
+  <!-- 8. Testimonial + CTA combined? Task says 8 slides w/ testimonial + CTA as separate. Keep 8: testimonial on 7, but we've used 7 already. Re-plan: cover(1) intro(2) f1(3) f2(4) f3(5) how(6) pricing(7) testimonial+CTA(8) -->
+  <section class="slide dark" data-title="Ship">
+    <p class="kicker">One more thing</p>
+    <div class="row" style="gap:80px;align-items:center">
+      <div style="flex:1">
+        <p class="testimonial">"I forgot I was wearing them. Then I remembered, and I didn't want to take them off."</p>
+        <p class="dim mt-m">— Marques Lin, The Verge · early review</p>
+      </div>
+      <div style="flex:0 0 auto;text-align:center">
+        <p class="dim mb-m">Ships May 14 · from</p>
+        <div style="font-size:96px;font-weight:900;letter-spacing:-.04em">$279</div>
+        <a class="cta-btn mt-l" href="#">Pre-order Halo v2 →</a>
+        <p class="dim mt-m" style="font-size:13px">Free shipping · 45-day return · 2-year warranty</p>
+      </div>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>
diff --git a/templates/full-decks/product-launch/style.css b/templates/full-decks/product-launch/style.css
new file mode 100644
index 0000000..9584000
--- /dev/null
+++ b/templates/full-decks/product-launch/style.css
@@ -0,0 +1,39 @@
+/* product-launch — modern announcement deck */
+.tpl-product-launch{
+  --bg:#ffffff;--bg-soft:#f5f5f7;--surface:#ffffff;--surface-2:#f2f2f6;
+  --ink:#0a0a12;--ink-2:#3a3a44;
+  --border:rgba(10,10,18,.08);--border-strong:rgba(10,10,18,.18);
+  --text-1:#0a0a12;--text-2:#4a4a58;--text-3:#8a8a96;
+  --accent:#ff5a36;--accent-2:#ff8c5a;--accent-3:#ffb36b;
+  --grad:linear-gradient(120deg,#ff5a36 0%,#ff8c5a 60%,#ffb36b 100%);
+  --radius:22px;--radius-lg:32px;
+  --shadow:0 20px 60px rgba(10,10,18,.1);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-product-launch .slide{padding:80px 112px}
+.tpl-product-launch .slide.dark{background:#0a0a12;color:#f5f5f7}
+.tpl-product-launch .slide.dark .h1,.tpl-product-launch .slide.dark .h2,.tpl-product-launch .slide.dark h3,.tpl-product-launch .slide.dark h4{color:#fff}
+.tpl-product-launch .slide.dark .lede,.tpl-product-launch .slide.dark .dim{color:rgba(245,245,247,.72)}
+.tpl-product-launch .slide.dark .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.12);box-shadow:none;backdrop-filter:blur(20px)}
+.tpl-product-launch .slide.dark .kicker{color:var(--accent-2)}
+.tpl-product-launch .h1{font-size:96px;line-height:.98;font-weight:900;letter-spacing:-.045em}
+.tpl-product-launch .h2{font-size:64px;font-weight:800;letter-spacing:-.035em}
+.tpl-product-launch .hero-shot{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:640px;height:640px;border-radius:50%;background:var(--grad);filter:blur(2px);opacity:.85}
+.tpl-product-launch .hero-shot::after{content:"";position:absolute;inset:80px;border-radius:40px;background:linear-gradient(160deg,rgba(255,255,255,.3),transparent 60%),#1a1a28;box-shadow:inset 0 2px 0 rgba(255,255,255,.2)}
+.tpl-product-launch .hero-shot::before{content:"Halo v2";position:absolute;inset:80px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:44px;font-weight:900;letter-spacing:-.02em;z-index:2;border-radius:40px}
+.tpl-product-launch .brand{font-size:18px;font-weight:800;letter-spacing:-.02em}
+.tpl-product-launch .feature-card{padding:40px 36px;border-radius:var(--radius-lg);background:var(--surface);border:1px solid var(--border);position:relative;overflow:hidden}
+.tpl-product-launch .feature-card .icon{width:60px;height:60px;border-radius:18px;background:var(--grad);display:flex;align-items:center;justify-content:center;color:#fff;font-size:28px;font-weight:900;margin-bottom:20px}
+.tpl-product-launch .step{display:flex;gap:24px;align-items:flex-start}
+.tpl-product-launch .step .n{flex:none;width:56px;height:56px;border-radius:50%;background:var(--grad);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px}
+.tpl-product-launch .price-card{padding:40px 32px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--surface);text-align:left}
+.tpl-product-launch .price-card.pro{background:#0a0a12;color:#fff;border-color:#0a0a12;transform:scale(1.04);box-shadow:0 30px 80px rgba(255,90,54,.25)}
+.tpl-product-launch .price-card.pro .dim{color:rgba(255,255,255,.7)}
+.tpl-product-launch .price-card h4{font-size:16px;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)}
+.tpl-product-launch .price-card.pro h4{color:var(--accent-2)}
+.tpl-product-launch .price-card .amount{font-size:64px;font-weight:900;letter-spacing:-.035em;margin:14px 0}
+.tpl-product-launch .price-card ul{list-style:none;padding:0;margin:20px 0 0}
+.tpl-product-launch .price-card li{padding:8px 0;font-size:15px;color:var(--text-2);border-top:1px solid var(--border)}
+.tpl-product-launch .price-card.pro li{color:rgba(255,255,255,.8);border-color:rgba(255,255,255,.12)}
+.tpl-product-launch .cta-btn{display:inline-block;padding:20px 40px;border-radius:999px;background:var(--grad);color:#fff;font-weight:700;font-size:20px;box-shadow:0 20px 50px rgba(255,90,54,.4)}
+.tpl-product-launch .testimonial{max-width:44ch;font-family:'Playfair Display',serif;font-size:44px;line-height:1.25;font-weight:500;letter-spacing:-.01em}
diff --git a/templates/full-decks/tech-sharing/README.md b/templates/full-decks/tech-sharing/README.md
new file mode 100644
index 0000000..0ff4946
--- /dev/null
+++ b/templates/full-decks/tech-sharing/README.md
@@ -0,0 +1,8 @@
+# tech-sharing · 技术分享
+
+8-slide engineering talk deck: cover (topic + speaker), agenda, context, two deep-dive slides, a code example, takeaways, Q&A.
+
+Dark GitHub-ish palette (`#0d1117`) with JetBrains Mono accents and syntax-highlighted terminal blocks. Built to be screenshotted and shared on an internal wiki or Twitter.
+
+**Use when:** tech-sharing Fridays, brown-bag talks, lunch & learns, conference submissions.
+**Feel:** GitHub README meets a good conference talk — dark, monospaced, dense but readable.
diff --git a/templates/full-decks/tech-sharing/index.html b/templates/full-decks/tech-sharing/index.html
new file mode 100644
index 0000000..a64d132
--- /dev/null
+++ b/templates/full-decks/tech-sharing/index.html
@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Rust 异步运行时内部机制 · Tech Sharing</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-tech-sharing">
+<div class="deck">
+
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <p class="kicker">tech-sharing / 2026-04-15</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">Rust 异步运行时<br>到底在<span style="background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent">调度什么</span>?</h1>
+    <p class="lede mt-m">从 <span class="mono">Future::poll</span> 到 tokio 的 work-stealing，一次讲清楚。</p>
+    <div class="speaker"><div class="av"></div><div><b>@lewis</b><span>platform infra · 45 min + Q&amp;A</span></div></div>
+    <div class="deck-footer"><span class="mono">#async #rust #tokio</span><span class="slide-number" data-current="1" data-total="8"></span></div>
+  </section>
+
+  <!-- 2. Agenda -->
+  <section class="slide" data-title="Agenda">
+    <p class="kicker">agenda.toml</p>
+    <h2 class="h2">今天的路线图</h2>
+    <div class="stack mt-l">
+      <div class="agenda-row"><span class="num">01</span><span class="t">Context: 为什么需要 async</span><span class="d">~5min</span></div>
+      <div class="agenda-row"><span class="num">02</span><span class="t">Deep dive 1: Future &amp; Waker</span><span class="d">~12min</span></div>
+      <div class="agenda-row"><span class="num">03</span><span class="t">Deep dive 2: Tokio scheduler</span><span class="d">~15min</span></div>
+      <div class="agenda-row"><span class="num">04</span><span class="t">Code: 手写一个 mini-runtime</span><span class="d">~8min</span></div>
+      <div class="agenda-row"><span class="num">05</span><span class="t">Takeaways + Q&amp;A</span><span class="d">~5min</span></div>
+    </div>
+  </section>
+
+  <!-- 3. Context -->
+  <section class="slide" data-title="Context">
+    <p class="kicker">// context</p>
+    <h2 class="h2">问题：一个线程一个连接，<br>撑不住 10 万并发。</h2>
+    <div class="grid g3 mt-l">
+      <div class="card card-accent"><h4>Thread-per-conn</h4><p class="dim">每条连接一根 OS 线程，栈 2–8MB。10 万连接 = 几百 GB RAM。</p><span class="tag mt-s">❌ 不现实</span></div>
+      <div class="card card-accent"><h4>Event loop (C)</h4><p class="dim">epoll/kqueue + 回调地狱。快，但写起来痛苦且容易出 bug。</p><span class="tag mt-s">😩 callback hell</span></div>
+      <div class="card card-accent"><h4>Async / await</h4><p class="dim">看起来像同步代码，编译成状态机。一根线程跑几千任务。</p><span class="tag mt-s">✅ Rust 选这个</span></div>
+    </div>
+  </section>
+
+  <!-- 4. Deep dive 1 -->
+  <section class="slide" data-title="Deep Dive 1">
+    <p class="kicker">deep-dive · 1 / 2</p>
+    <h2 class="h2">Future 其实只有一个方法。</h2>
+    <div class="grid g2 mt-l" style="align-items:start">
+      <div>
+        <p class="lede">编译器把 <span class="mono">async fn</span> 变成一个实现了 <span class="mono">Future</span> trait 的匿名状态机。运行时只做一件事：反复 <span class="mono">poll</span> 它，直到返回 <span class="mono">Ready</span>。</p>
+        <div class="mt-l">
+          <span class="tag">Pending</span> <span class="tag">Ready(T)</span> <span class="tag">Waker.wake()</span>
+        </div>
+      </div>
+      <div class="terminal">
+        <div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span>future.rs</span></div>
+<pre><span class="kw">pub trait</span> <span class="fn">Future</span> {
+    <span class="kw">type</span> Output;
+    <span class="kw">fn</span> <span class="fn">poll</span>(
+        <span class="kw">self</span>: Pin&lt;&amp;<span class="kw">mut Self</span>&gt;,
+        cx: &amp;<span class="kw">mut</span> Context&lt;<span class="str">'_</span>&gt;,
+    ) -&gt; Poll&lt;<span class="kw">Self</span>::Output&gt;;
+}
+
+<span class="cmt">// Poll::Pending   → 挂起，等 waker 唤醒</span>
+<span class="cmt">// Poll::Ready(v)  → 完成，产出 v</span></pre>
+      </div>
+    </div>
+  </section>
+
+  <!-- 5. Deep dive 2 -->
+  <section class="slide" data-title="Deep Dive 2">
+    <p class="kicker">deep-dive · 2 / 2</p>
+    <h2 class="h2">Tokio 是一个偷任务的小工。</h2>
+    <div class="grid g2 mt-l" style="align-items:start">
+      <div>
+        <p class="lede">Multi-thread runtime = N 个 worker，每个 worker 有自己的本地队列。空闲的 worker 会去别人队列里"偷"任务。</p>
+        <div class="stack mt-m">
+          <div class="tag">✦ local queue · 256 slots</div>
+          <div class="tag">✦ global injection queue</div>
+          <div class="tag">✦ work-stealing @ 50% steal ratio</div>
+          <div class="tag">✦ LIFO slot for cache locality</div>
+        </div>
+      </div>
+      <div class="card" style="padding:32px">
+        <h4 class="mono" style="color:var(--accent-2)">scheduler tick loop</h4>
+        <div class="stack mt-m" style="font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.9;color:var(--text-2)">
+          <div><span style="color:var(--accent)">1.</span> pop from LIFO slot</div>
+          <div><span style="color:var(--accent)">2.</span> else pop from local queue</div>
+          <div><span style="color:var(--accent)">3.</span> else drain global queue (every 61 ticks)</div>
+          <div><span style="color:var(--accent)">4.</span> else steal from random victim</div>
+          <div><span style="color:var(--accent)">5.</span> else park the thread</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 6. Code example -->
+  <section class="slide" data-title="Code">
+    <p class="kicker">mini-runtime.rs · ~40 LOC</p>
+    <h2 class="h2">手写一个最小 runtime。</h2>
+    <div class="terminal mt-m">
+      <div class="bar"><span class="dot"></span><span class="dot"></span><span class="dot"></span><span>src/main.rs</span></div>
+<pre><span class="kw">use</span> std::collections::VecDeque;
+<span class="kw">use</span> std::sync::{Arc, Mutex};
+<span class="kw">use</span> std::task::{Context, Poll, Wake, Waker};
+
+<span class="kw">struct</span> Task(Mutex&lt;Pin&lt;Box&lt;<span class="kw">dyn</span> Future&lt;Output = ()&gt; + Send&gt;&gt;&gt;);
+
+<span class="kw">impl</span> Wake <span class="kw">for</span> Task {
+    <span class="kw">fn</span> <span class="fn">wake</span>(<span class="kw">self</span>: Arc&lt;<span class="kw">Self</span>&gt;) { QUEUE.lock().unwrap().push_back(<span class="kw">self</span>); }
+}
+
+<span class="kw">fn</span> <span class="fn">block_on</span>&lt;F: Future&lt;Output = ()&gt; + Send + <span class="str">'static</span>&gt;(fut: F) {
+    <span class="fn">spawn</span>(fut);
+    <span class="kw">while let Some</span>(task) = QUEUE.lock().unwrap().pop_front() {
+        <span class="kw">let</span> waker = Waker::from(task.clone());
+        <span class="kw">let mut</span> cx = Context::from_waker(&amp;waker);
+        <span class="kw">let mut</span> fut = task.<span class="num">0</span>.lock().unwrap();
+        <span class="kw">let</span> _ = fut.as_mut().<span class="fn">poll</span>(&amp;<span class="kw">mut</span> cx); <span class="cmt">// 就是这一行</span>
+    }
+}</pre>
+    </div>
+  </section>
+
+  <!-- 7. Takeaways -->
+  <section class="slide" data-title="Takeaways">
+    <p class="kicker">// takeaways</p>
+    <h2 class="h2">三件事带回去。</h2>
+    <div class="grid g3 mt-l">
+      <div class="card card-accent"><h4>1 · async 是零成本抽象</h4><p class="dim">编译成状态机，没有运行时虚表，没有 GC。</p></div>
+      <div class="card card-accent"><h4>2 · Waker 是脉搏</h4><p class="dim">Future 不主动做事，运行时靠 waker 决定"什么时候再 poll"。</p></div>
+      <div class="card card-accent"><h4>3 · 别在 async 里阻塞</h4><p class="dim">一行 <span class="mono">std::fs::read</span> 能让整个 worker 停摆。用 <span class="mono">spawn_blocking</span>。</p></div>
+    </div>
+    <p class="lede mt-l">延伸阅读：<span class="mono">tokio.rs/blog/2019-10-scheduler</span> · <span class="mono">rust-lang.github.io/async-book</span></p>
+  </section>
+
+  <!-- 8. Q&A -->
+  <section class="slide center tc" data-title="Q and A">
+    <div>
+      <div class="mono" style="font-size:120px;color:var(--accent);font-weight:800;letter-spacing:-.04em">?</div>
+      <h2 class="h2">Questions?</h2>
+      <p class="lede" style="margin:14px auto">github.com/lewis · @lewis on slack</p>
+      <div class="row mt-l" style="justify-content:center">
+        <span class="tag">slides: git.co/rt-deck</span>
+        <span class="tag">code: git.co/mini-rt</span>
+      </div>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>
diff --git a/templates/full-decks/tech-sharing/style.css b/templates/full-decks/tech-sharing/style.css
new file mode 100644
index 0000000..10aaf6f
--- /dev/null
+++ b/templates/full-decks/tech-sharing/style.css
@@ -0,0 +1,49 @@
+/* tech-sharing — 技术分享 dark, code-forward */
+.tpl-tech-sharing{
+  --bg:#0d1117;--bg-soft:#161b22;--surface:#161b22;--surface-2:#1c2230;
+  --border:rgba(139,148,158,.22);--border-strong:rgba(139,148,158,.4);
+  --text-1:#e6edf3;--text-2:#8b949e;--text-3:#6e7681;
+  --accent:#7ee787;--accent-2:#79c0ff;--accent-3:#ff7b72;
+  --grad:linear-gradient(120deg,#7ee787 0%,#79c0ff 60%,#d2a8ff 100%);
+  --radius:14px;--radius-lg:20px;
+  --shadow:0 20px 60px rgba(0,0,0,.5);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-tech-sharing{background:#0d1117;color:var(--text-1)}
+.tpl-tech-sharing .slide{padding:72px 96px;background:#0d1117;color:var(--text-1)}
+.tpl-tech-sharing .slide::before{content:"";position:absolute;inset:0;background:
+  radial-gradient(60% 50% at 90% 10%,rgba(121,192,255,.12),transparent 60%),
+  radial-gradient(50% 50% at 10% 90%,rgba(126,231,135,.08),transparent 60%);
+  pointer-events:none;z-index:0}
+.tpl-tech-sharing .slide>*{position:relative;z-index:1}
+.tpl-tech-sharing .h1{font-size:78px;line-height:1.03;font-weight:800;letter-spacing:-.03em;color:#fff}
+.tpl-tech-sharing .h2{font-size:54px;font-weight:700;letter-spacing:-.025em;color:#fff}
+.tpl-tech-sharing h3,.tpl-tech-sharing h4{color:#fff}
+.tpl-tech-sharing .kicker{color:var(--accent);font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:600;text-transform:none;letter-spacing:.02em}
+.tpl-tech-sharing .kicker::before{content:"> "}
+.tpl-tech-sharing .mono{font-family:'JetBrains Mono','IBM Plex Mono',monospace}
+.tpl-tech-sharing .terminal{background:#010409;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.6);font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.65}
+.tpl-tech-sharing .terminal .bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:#161b22;border-bottom:1px solid var(--border);font-size:12px;color:var(--text-3)}
+.tpl-tech-sharing .terminal .dot{width:12px;height:12px;border-radius:50%;background:#ff5f56}
+.tpl-tech-sharing .terminal .dot:nth-child(2){background:#ffbd2e}
+.tpl-tech-sharing .terminal .dot:nth-child(3){background:#27c93f}
+.tpl-tech-sharing .terminal pre{margin:0;padding:24px 28px;color:#e6edf3;overflow:auto;max-height:440px}
+.tpl-tech-sharing .kw{color:#ff7b72}
+.tpl-tech-sharing .fn{color:#d2a8ff}
+.tpl-tech-sharing .str{color:#a5d6ff}
+.tpl-tech-sharing .cmt{color:#8b949e;font-style:italic}
+.tpl-tech-sharing .num{color:#79c0ff}
+.tpl-tech-sharing .card{background:var(--surface);border:1px solid var(--border);box-shadow:none}
+.tpl-tech-sharing .card-accent{border-top:3px solid var(--accent)}
+.tpl-tech-sharing .pill{background:var(--surface-2);color:var(--text-2);border-color:var(--border)}
+.tpl-tech-sharing .pill-accent{background:rgba(126,231,135,.12);color:var(--accent);border-color:rgba(126,231,135,.35)}
+.tpl-tech-sharing .tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-family:'JetBrains Mono',monospace;font-size:12px;background:var(--surface-2);border:1px solid var(--border);color:var(--text-2)}
+.tpl-tech-sharing .agenda-row{display:flex;align-items:baseline;gap:24px;padding:18px 0;border-bottom:1px dashed var(--border);font-family:'JetBrains Mono',monospace}
+.tpl-tech-sharing .agenda-row .num{color:var(--accent);flex:none;width:48px}
+.tpl-tech-sharing .agenda-row .t{color:#fff;font-size:24px;flex:1;font-family:'Inter',sans-serif;font-weight:600}
+.tpl-tech-sharing .agenda-row .d{color:var(--text-3);font-size:13px}
+.tpl-tech-sharing .speaker{display:flex;align-items:center;gap:14px;margin-top:28px}
+.tpl-tech-sharing .speaker .av{width:56px;height:56px;border-radius:50%;background:var(--grad)}
+.tpl-tech-sharing .speaker b{display:block;color:#fff;font-size:18px}
+.tpl-tech-sharing .speaker span{color:var(--text-3);font-size:13px;font-family:'JetBrains Mono',monospace}
+.tpl-tech-sharing .lede{color:var(--text-2)}
diff --git a/templates/full-decks/testing-safety-alert/README.md b/templates/full-decks/testing-safety-alert/README.md
new file mode 100644
index 0000000..6c4f4ef
--- /dev/null
+++ b/templates/full-decks/testing-safety-alert/README.md
@@ -0,0 +1,11 @@
+# testing-safety-alert
+
+白底 + 红琥珀警示色 + 条纹危险边 + 大红 strike 和 pill。灵感来自 `20260412-AI测试与安全/xhs-ai-testing-safety-v2.html` 的 `.focus` 黑底白字块、hero quote box 和高对比 black-on-white 气质 —— 但把语气推到「警示 / 风控 / 事故报告」层级。
+
+**Visual traits:** 顶部 45° 红黑斜条纹警示带、底部副条纹、`strike-through` 红色斜切的否定大字、L1/L2/L3 三档色卡 (绿/琥珀/红)、圆形前置指示灯 alert-box、policy-yaml 深色代码块带红色左边框 + `bad` 关键词高亮、红/绿复选框 checklist、Q1 事故柱状图。
+
+**Use when:** 讲安全 / 风控 / 事故复盘 / 红队测试 / AI 上线前评估 / policy as code；你需要让观众立刻感到「这事严肃，别马虎」。
+
+**Source inspiration:** `20260412-AI测试与安全/html/xhs-ai-testing-safety-v2.html`.
+
+**Path:** `templates/full-decks/testing-safety-alert/index.html`
diff --git a/templates/full-decks/testing-safety-alert/index.html b/templates/full-decks/testing-safety-alert/index.html
new file mode 100644
index 0000000..554a23e
--- /dev/null
+++ b/templates/full-decks/testing-safety-alert/index.html
@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>Testing Safety Alert</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-testing-safety-alert">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag">ai safety · 高优先级</span><span class="ts-page">01 / 08</span></div>
+    <div class="ts-kicker">2026 年最重要的一条判断</div>
+    <h1 class="ts-h1">别再追问<br><span class="strike">AI 会不会干活</span><br>开始问：<span class="red">它出事谁负责</span></h1>
+    <p class="ts-sub">AI 出错的代价，不再是一次 bad response 这么简单 —— 它可能一次性写 300 份工单、提 80 个 PR、发 5000 封邮件。</p>
+    <div class="ts-alert-box">
+      <h3>风险已经规模化</h3>
+      <p>「做错」成本 × N；「做对」收益 × N。<br>这就是为什么 <b>测试、验收、安全、风控</b> 会变成未来 3 年最贵的能力。</p>
+    </div>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>AI SAFETY BRIEF · LEWIS · 2026.04</span><span>01 / 08</span></div>
+  </section>
+
+  <!-- 2. SECTION -->
+  <section class="slide">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag amber">section · risk 分级</span><span class="ts-page">02 / 08</span></div>
+    <div style="margin:auto 0">
+      <div class="ts-kicker">Chapter One</div>
+      <h1 class="ts-h1" style="font-size:130px">先分 <span class="red">等级</span></h1>
+      <p class="ts-sub" style="font-size:28px">不是所有 AI 行为都同等危险。<br>先把「可撤销」和「不可撤销」分开，再谈流程。</p>
+    </div>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>section · level taxonomy</span><span>02 / 08</span></div>
+  </section>
+
+  <!-- 3. CONTENT risk levels -->
+  <section class="slide">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag">风险分级 · 3 levels</span><span class="ts-page">03 / 08</span></div>
+    <h2 class="ts-h2">三档风险，三种处理</h2>
+    <div class="ts-grid-3">
+      <div class="ts-card" style="border-top:4px solid var(--ts-green)"><div class="lbl">L1 · 绿色</div><h4>可撤销</h4><p>写 draft、生成图片、起草文档。<br>错了 Ctrl+Z，零代价。<br><b style="color:var(--ts-green)">策略：放开跑</b></p></div>
+      <div class="ts-card" style="border-top:4px solid var(--ts-amber)"><div class="lbl">L2 · 琥珀</div><h4>半可撤销</h4><p>发 draft 邮件、提 PR、改 staging 数据。<br>错了要道歉 / 回滚。<br><b style="color:var(--ts-amber)">策略：人工复核</b></p></div>
+      <div class="ts-card" style="border-top:4px solid var(--ts-red)"><div class="lbl">L3 · 红色</div><h4>不可撤销</h4><p>发真实邮件、付款、删库、删 prod 数据。<br>错了就真错了。<br><b style="color:var(--ts-red)">策略：硬卡 + 双人审</b></p></div>
+    </div>
+    <div class="ts-alert-box amber">
+      <h3>绝不要让 agent 自己升级</h3>
+      <p>L1 的任务不能自己变成 L2。授权必须是显式的、可撤销的、带过期时间的。</p>
+    </div>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>risk · 3 levels</span><span>03 / 08</span></div>
+  </section>
+
+  <!-- 4. CODE -->
+  <section class="slide">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag">policy as code</span><span class="ts-page">04 / 08</span></div>
+    <div class="ts-kicker">别用文档管规则 · 用代码管规则</div>
+    <h2 class="ts-h2">三十行 YAML，<br><span class="ts-highlight-red">红线硬卡</span></h2>
+    <pre class="ts-codebox"><span class="cm"># safety-policy.yaml · compiled → runtime guard</span>
+<span class="kw">level_1_allow</span>:
+  - tools: [<span class="st">write_draft</span>, <span class="st">generate_image</span>, <span class="st">read_docs</span>]
+
+<span class="kw">level_2_require_review</span>:
+  - tools: [<span class="st">send_email_draft</span>, <span class="st">open_pr</span>, <span class="st">write_staging_db</span>]
+    reviewer: <span class="st">human</span>
+
+<span class="kw">level_3_hard_block</span>:
+  - tools: [<span class="st">send_real_email</span>, <span class="st">transfer_money</span>, <span class="st">delete_prod</span>]
+    unless: <span class="st">two_human_sign_off AND within_24h</span>
+
+<span class="bad">forbidden_always</span>:
+  - <span class="bad">"rm -rf /"</span>
+  - <span class="bad">"drop table"</span>
+  - <span class="bad">"force push origin main"</span></pre>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>policy · yaml-as-guard</span><span>04 / 08</span></div>
+  </section>
+
+  <!-- 5. CHART -->
+  <section class="slide">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag amber">incident report · q1</span><span class="ts-page">05 / 08</span></div>
+    <h2 class="ts-h2">我们 Q1 的 <span class="red">12 起 AI 事故</span></h2>
+    <p class="ts-sub">幸好全部捕获在 staging。但每一起都能上生产。</p>
+    <svg viewBox="0 0 1040 360" style="width:100%;max-width:1040px;margin-top:18px" xmlns="http://www.w3.org/2000/svg">
+      <g font-family="Inter,sans-serif" font-size="14" fill="#4a4955">
+        <line x1="70" y1="320" x2="1000" y2="320" stroke="#eaecf3" stroke-width="2"/>
+        <!-- month columns: Jan Feb Mar, L1/L2/L3 stacked -->
+        <g transform="translate(120,0)">
+          <rect x="0" y="220" width="60" height="100" fill="#067647"/>
+          <rect x="0" y="160" width="60" height="60" fill="#d97706"/>
+          <rect x="0" y="130" width="60" height="30" fill="#e0314a"/>
+          <text x="30" y="345" text-anchor="middle" font-weight="700">Jan</text>
+          <text x="30" y="120" text-anchor="middle" font-weight="800" fill="#14141a">5</text>
+        </g>
+        <g transform="translate(320,0)">
+          <rect x="0" y="240" width="60" height="80" fill="#067647"/>
+          <rect x="0" y="200" width="60" height="40" fill="#d97706"/>
+          <rect x="0" y="180" width="60" height="20" fill="#e0314a"/>
+          <text x="30" y="345" text-anchor="middle" font-weight="700">Feb</text>
+          <text x="30" y="170" text-anchor="middle" font-weight="800" fill="#14141a">3</text>
+        </g>
+        <g transform="translate(520,0)">
+          <rect x="0" y="250" width="60" height="70" fill="#067647"/>
+          <rect x="0" y="220" width="60" height="30" fill="#d97706"/>
+          <rect x="0" y="210" width="60" height="10" fill="#e0314a"/>
+          <text x="30" y="345" text-anchor="middle" font-weight="700">Mar</text>
+          <text x="30" y="200" text-anchor="middle" font-weight="800" fill="#14141a">4</text>
+        </g>
+        <!-- legend -->
+        <g transform="translate(720,60)">
+          <rect x="0" y="0" width="16" height="16" fill="#e0314a"/><text x="24" y="13" font-weight="700">L3 不可撤销 (3)</text>
+          <rect x="0" y="26" width="16" height="16" fill="#d97706"/><text x="24" y="39" font-weight="700">L2 需复核 (4)</text>
+          <rect x="0" y="52" width="16" height="16" fill="#067647"/><text x="24" y="65" font-weight="700">L1 可恢复 (5)</text>
+          <text x="0" y="100" font-size="13" fill="#8a8892">全部被 safety-policy 在 runtime 拦下，</text>
+          <text x="0" y="118" font-size="13" fill="#8a8892">未进 prod。但 3 起 L3 非常惊险。</text>
+        </g>
+      </g>
+    </svg>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>incident · q1 summary</span><span>05 / 08</span></div>
+  </section>
+
+  <!-- 6. CHECKLIST -->
+  <section class="slide">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag green">red-team checklist</span><span class="ts-page">06 / 08</span></div>
+    <h2 class="ts-h2">上线前 <span class="red">必过 7 道题</span></h2>
+    <div class="ts-checklist">
+      <div class="ts-check ok"><div class="box">✓</div><div class="txt">它能删除东西吗？有人类 review 吗？能 60 秒内回滚吗？</div></div>
+      <div class="ts-check ok"><div class="box">✓</div><div class="txt">它的 prompt 注入能让它越权吗？（跑过红队提示词）</div></div>
+      <div class="ts-check"><div class="box">!</div><div class="txt">它处理 PII 吗？日志里是不是也有 PII？</div></div>
+      <div class="ts-check ok"><div class="box">✓</div><div class="txt">上下游失败时，它会不会开始乱改其他资源？</div></div>
+      <div class="ts-check"><div class="box">!</div><div class="txt">并发 100 个 agent 一起跑会不会死锁？</div></div>
+      <div class="ts-check ok"><div class="box">✓</div><div class="txt">错了能不能 <b>立刻</b> 停？（kill switch 能 2 秒内生效吗）</div></div>
+      <div class="ts-check"><div class="box">!</div><div class="txt">出事时有没有人值班？值班手册有没有 agent 专属章节？</div></div>
+    </div>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>checklist · pre-launch</span><span>06 / 08</span></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag green">今晚就能动</span><span class="ts-page">07 / 08</span></div>
+    <h2 class="ts-h2">今晚先做 <span class="ts-highlight-red">三件事</span></h2>
+    <div class="ts-grid-3">
+      <div class="ts-card"><div class="lbl">1 · 分级</div><h4>给你的 agent<br>写 L1/L2/L3</h4><p>把所有工具列出来，标上等级。不标的一律按 L3。</p></div>
+      <div class="ts-card"><div class="lbl">2 · 写 policy</div><h4>policy.yaml<br>接 runtime</h4><p>不要信 prompt 里的 "be careful"，要信执行层的硬卡。</p></div>
+      <div class="ts-card"><div class="lbl">3 · kill switch</div><h4>红按钮<br>能在 2 秒内停</h4><p>CTO / on-call 都得知道怎么按。演练一次。</p></div>
+    </div>
+    <div class="ts-alert-box green">
+      <h3>真正的安全不是 prompt，是流程</h3>
+      <p>prompt 会被注入，流程不会。—— 把保护放在不可被说服的一层。</p>
+    </div>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>cta · tonight</span><span>07 / 08</span></div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="ts-stripe"></div>
+    <div class="ts-chrome"><span class="ts-alert-tag amber">please stay safe</span><span class="ts-page">08 / 08</span></div>
+    <div style="margin:auto 0">
+      <div class="ts-kicker">end of brief</div>
+      <h1 class="ts-h1" style="font-size:140px">谢谢 <span class="red">·</span> thanks</h1>
+      <p class="ts-sub" style="font-size:24px">policy.yaml 模板、红队 prompt 清单、事故复盘模板 —— 评论区扣「安全」。</p>
+    </div>
+    <div class="ts-stripe-b"></div>
+    <div class="ts-footer"><span>end of brief</span><span>08 / 08</span></div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/testing-safety-alert/style.css b/templates/full-decks/testing-safety-alert/style.css
new file mode 100644
index 0000000..4e17d57
--- /dev/null
+++ b/templates/full-decks/testing-safety-alert/style.css
@@ -0,0 +1,62 @@
+/* testing-safety-alert — 红/琥珀 警示风 · 白底高对比 */
+.tpl-testing-safety-alert{
+  --ts-bg:#fffaf7;
+  --ts-ink:#14141a;
+  --ts-ink2:#4a4955;
+  --ts-muted:#8a8892;
+  --ts-line:rgba(20,20,26,.08);
+  --ts-red:#e0314a;
+  --ts-red-soft:#ffecee;
+  --ts-amber:#d97706;
+  --ts-amber-soft:#fff5e6;
+  --ts-green:#067647;
+  --ts-green-soft:#e8f8ee;
+  background:var(--ts-bg);
+  color:var(--ts-ink);
+  font-family:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif;
+}
+.tpl-testing-safety-alert .slide{background:var(--ts-bg);color:var(--ts-ink);padding:64px 84px}
+.tpl-testing-safety-alert .ts-stripe{position:absolute;top:0;left:0;right:0;height:14px;background:repeating-linear-gradient(45deg,var(--ts-red) 0 18px,#111318 18px 36px)}
+.tpl-testing-safety-alert .ts-stripe-b{position:absolute;bottom:0;left:0;right:0;height:6px;background:repeating-linear-gradient(45deg,var(--ts-red) 0 10px,#111318 10px 20px);opacity:.6}
+.tpl-testing-safety-alert .ts-chrome{display:flex;justify-content:space-between;align-items:center;margin:22px 0 16px}
+.tpl-testing-safety-alert .ts-alert-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:10px;font-size:13px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;background:var(--ts-red);color:#fff;box-shadow:0 6px 18px rgba(224,49,74,.28)}
+.tpl-testing-safety-alert .ts-alert-tag::before{content:'⚠';font-size:16px}
+.tpl-testing-safety-alert .ts-alert-tag.amber{background:var(--ts-amber);box-shadow:0 6px 18px rgba(217,119,6,.25)}
+.tpl-testing-safety-alert .ts-alert-tag.green{background:var(--ts-green);box-shadow:0 6px 18px rgba(6,118,71,.22)}
+.tpl-testing-safety-alert .ts-alert-tag.green::before{content:'✓'}
+.tpl-testing-safety-alert .ts-page{font-size:13px;color:var(--ts-muted);letter-spacing:.15em;font-weight:700}
+.tpl-testing-safety-alert .ts-kicker{font-size:15px;font-weight:700;color:var(--ts-red);letter-spacing:.06em;margin-bottom:10px;text-transform:uppercase}
+.tpl-testing-safety-alert .ts-h1{font-size:88px;font-weight:900;line-height:1.04;letter-spacing:-2px;margin:10px 0 16px;color:var(--ts-ink)}
+.tpl-testing-safety-alert .ts-h1 .red{color:var(--ts-red)}
+.tpl-testing-safety-alert .ts-h1 .strike{position:relative;display:inline-block}
+.tpl-testing-safety-alert .ts-h1 .strike::after{content:'';position:absolute;left:-4%;right:-4%;top:50%;height:10px;background:var(--ts-red);transform:skewX(-12deg);opacity:.85}
+.tpl-testing-safety-alert .ts-h2{font-size:54px;font-weight:900;line-height:1.1;letter-spacing:-1px;margin:0 0 14px}
+.tpl-testing-safety-alert .ts-sub{font-size:22px;line-height:1.5;color:var(--ts-ink2);max-width:880px;margin-top:10px}
+.tpl-testing-safety-alert .ts-highlight-red{display:inline-block;padding:4px 14px;background:var(--ts-red);color:#fff;border-radius:8px;font-weight:800}
+.tpl-testing-safety-alert .ts-highlight-amber{display:inline-block;padding:4px 14px;background:var(--ts-amber-soft);color:var(--ts-amber);border-radius:8px;font-weight:800;border:1px solid rgba(217,119,6,.2)}
+.tpl-testing-safety-alert .ts-highlight-green{display:inline-block;padding:4px 14px;background:var(--ts-green-soft);color:var(--ts-green);border-radius:8px;font-weight:800;border:1px solid rgba(6,118,71,.2)}
+.tpl-testing-safety-alert .ts-alert-box{border:2px solid var(--ts-red);border-radius:18px;padding:26px 30px;background:linear-gradient(180deg,#fff 0%,var(--ts-red-soft) 100%);box-shadow:0 14px 36px rgba(224,49,74,.14);margin-top:24px;position:relative}
+.tpl-testing-safety-alert .ts-alert-box::before{content:'';position:absolute;top:-11px;left:24px;width:22px;height:22px;background:var(--ts-red);border-radius:50%;box-shadow:0 0 0 6px rgba(224,49,74,.2)}
+.tpl-testing-safety-alert .ts-alert-box.amber{border-color:var(--ts-amber);background:linear-gradient(180deg,#fff 0%,var(--ts-amber-soft) 100%);box-shadow:0 14px 36px rgba(217,119,6,.14)}
+.tpl-testing-safety-alert .ts-alert-box.amber::before{background:var(--ts-amber);box-shadow:0 0 0 6px rgba(217,119,6,.2)}
+.tpl-testing-safety-alert .ts-alert-box.green{border-color:var(--ts-green);background:linear-gradient(180deg,#fff 0%,var(--ts-green-soft) 100%);box-shadow:0 14px 36px rgba(6,118,71,.14)}
+.tpl-testing-safety-alert .ts-alert-box.green::before{background:var(--ts-green);box-shadow:0 0 0 6px rgba(6,118,71,.2)}
+.tpl-testing-safety-alert .ts-alert-box h3{font-size:34px;font-weight:900;margin:0 0 10px}
+.tpl-testing-safety-alert .ts-alert-box p{font-size:17px;line-height:1.6;color:var(--ts-ink2);margin:0}
+.tpl-testing-safety-alert .ts-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
+.tpl-testing-safety-alert .ts-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:20px}
+.tpl-testing-safety-alert .ts-card{border:1px solid var(--ts-line);border-radius:16px;padding:22px 24px;background:#fff;box-shadow:0 6px 20px rgba(17,19,24,.04)}
+.tpl-testing-safety-alert .ts-card .lbl{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ts-muted);margin-bottom:8px}
+.tpl-testing-safety-alert .ts-card h4{font-size:26px;font-weight:900;line-height:1.2;margin-bottom:8px}
+.tpl-testing-safety-alert .ts-card p{font-size:14px;color:var(--ts-ink2);line-height:1.55}
+.tpl-testing-safety-alert .ts-checklist{display:flex;flex-direction:column;gap:12px;margin-top:20px;max-width:880px}
+.tpl-testing-safety-alert .ts-check{display:flex;gap:16px;align-items:flex-start;padding:16px 20px;border:1px solid var(--ts-line);border-radius:14px;background:#fff}
+.tpl-testing-safety-alert .ts-check .box{flex:0 0 32px;height:32px;border-radius:8px;border:2px solid var(--ts-red);display:grid;place-items:center;font-weight:900;color:var(--ts-red);background:var(--ts-red-soft)}
+.tpl-testing-safety-alert .ts-check.ok .box{border-color:var(--ts-green);color:var(--ts-green);background:var(--ts-green-soft)}
+.tpl-testing-safety-alert .ts-check .txt{font-size:18px;line-height:1.5;font-weight:600}
+.tpl-testing-safety-alert .ts-codebox{background:#141418;color:#fff5ea;border-radius:14px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;margin-top:20px;border-left:6px solid var(--ts-red)}
+.tpl-testing-safety-alert .ts-codebox .cm{color:#7a756d}
+.tpl-testing-safety-alert .ts-codebox .kw{color:#ffb38a}
+.tpl-testing-safety-alert .ts-codebox .st{color:#b3e6c2}
+.tpl-testing-safety-alert .ts-codebox .bad{color:#ff9aa8;font-weight:700}
+.tpl-testing-safety-alert .ts-footer{position:absolute;left:84px;right:84px;bottom:36px;display:flex;justify-content:space-between;font-size:12px;color:var(--ts-muted);letter-spacing:.1em}
diff --git a/templates/full-decks/weekly-report/README.md b/templates/full-decks/weekly-report/README.md
new file mode 100644
index 0000000..3390dc0
--- /dev/null
+++ b/templates/full-decks/weekly-report/README.md
@@ -0,0 +1,8 @@
+# weekly-report · 周报
+
+7-slide team weekly report: cover (week range), KPI grid, shipped items, a metric trend chart, blockers, next-week plan, thanks.
+
+Corporate-clarity palette: near-white background, blue→teal accent, ruled dividers and tiny mono tags (`FEAT`, `FIX`, `EXP`, `INFRA`). Data-dense, readable at a glance, and easy to skim in a standup.
+
+**Use when:** team weekly readouts, squad reviews, skip-level updates, cross-team "what shipped this week" mails.
+**Feel:** Linear changelog meets a McKinsey KPI deck — serious, measured, actionable.
diff --git a/templates/full-decks/weekly-report/index.html b/templates/full-decks/weekly-report/index.html
new file mode 100644
index 0000000..0290b20
--- /dev/null
+++ b/templates/full-decks/weekly-report/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Growth Squad · Weekly W15</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-weekly-report">
+<div class="deck">
+
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <div class="cover-head">
+      <div class="logo">Growth Squad</div>
+      <div class="week-chip">W15 · 2026-04-07 → 2026-04-13</div>
+    </div>
+    <p class="kicker">WEEKLY REPORT</p>
+    <h1 class="h1 mt-s">本周：付费转化率<br>回到了 <span style="color:var(--accent)">3.8%</span>。</h1>
+    <p class="lede mt-m">6 个发布，3 个实验收敛，1 个阻塞项升级。整体健康。</p>
+    <div class="deck-footer"><span>Prepared by @lewis · reviewed by @may</span><span class="slide-number" data-current="1" data-total="7"></span></div>
+  </section>
+
+  <!-- 2. KPI -->
+  <section class="slide" data-title="KPIs">
+    <p class="kicker">HIGHLIGHTS · KPIs</p>
+    <h2 class="h2">本周核心指标</h2>
+    <div class="grid g4 mt-l">
+      <div class="kpi good"><div class="label">Paid conv.</div><div class="value">3.82%</div><div class="delta up">▲ +0.4 pts WoW</div></div>
+      <div class="kpi good"><div class="label">MRR</div><div class="value">$148k</div><div class="delta up">▲ +6.1%</div></div>
+      <div class="kpi"><div class="label">Signups</div><div class="value">12,430</div><div class="delta flat">— +0.3%</div></div>
+      <div class="kpi bad"><div class="label">D7 retention</div><div class="value">41%</div><div class="delta down">▼ -1.8 pts</div></div>
+      <div class="kpi good"><div class="label">NPS</div><div class="value">64</div><div class="delta up">▲ +3</div></div>
+      <div class="kpi"><div class="label">Support tickets</div><div class="value">318</div><div class="delta flat">— -12</div></div>
+      <div class="kpi warn"><div class="label">p95 latency</div><div class="value">412ms</div><div class="delta down">▼ +38ms</div></div>
+      <div class="kpi good"><div class="label">Deploys</div><div class="value">37</div><div class="delta up">▲ +9</div></div>
+    </div>
+  </section>
+
+  <!-- 3. Shipped -->
+  <section class="slide" data-title="Shipped">
+    <p class="kicker">SHIPPED THIS WEEK · 6 items</p>
+    <h2 class="h2">Shipped</h2>
+    <div class="mt-l" style="max-width:980px">
+      <div class="ship-item"><span class="tag feat">FEAT</span><div><b>New onboarding checklist v3</b><p class="dim" style="font-size:13px;margin:2px 0 0">4-step checklist replaces the old 7-step modal. A/B won +18% activation.</p></div><span class="owner">@may</span></div>
+      <div class="ship-item"><span class="tag feat">FEAT</span><div><b>Stripe Tax auto-filing</b><p class="dim" style="font-size:13px;margin:2px 0 0">Quarterly filings now handled for 12 US states via Stripe Tax API.</p></div><span class="owner">@raj</span></div>
+      <div class="ship-item"><span class="tag exp">EXP</span><div><b>Pricing page hero test</b><p class="dim" style="font-size:13px;margin:2px 0 0">"From $29" vs "Free trial" headline. Free-trial wins +22% click-through.</p></div><span class="owner">@lewis</span></div>
+      <div class="ship-item"><span class="tag fix">FIX</span><div><b>Edge case in SSO redirect</b><p class="dim" style="font-size:13px;margin:2px 0 0">Google Workspace users with custom domains now land on the correct workspace.</p></div><span class="owner">@eli</span></div>
+      <div class="ship-item"><span class="tag infra">INFRA</span><div><b>Postgres 16 upgrade</b><p class="dim" style="font-size:13px;margin:2px 0 0">Zero-downtime migration. Query p50 down 14%, p95 down 9%.</p></div><span class="owner">@raj</span></div>
+      <div class="ship-item"><span class="tag feat">FEAT</span><div><b>Referral rewards v1</b><p class="dim" style="font-size:13px;margin:2px 0 0">Both sides get 1 month free. Dashboard + email flow live behind flag.</p></div><span class="owner">@may</span></div>
+    </div>
+  </section>
+
+  <!-- 4. Metrics chart -->
+  <section class="slide" data-title="Metrics">
+    <p class="kicker">METRIC DEEP-DIVE</p>
+    <h2 class="h2">Paid conversion, last 8 weeks</h2>
+    <div class="chart mt-l">
+      <div class="row" style="justify-content:space-between"><h4>Paid conv. rate · weekly</h4><span class="pill" style="background:var(--surface-2);color:var(--text-2)">target: 4.0%</span></div>
+      <div class="chart-bars">
+        <div class="col"><div class="b" data-v="3.1%" style="height:58%"></div><div class="lbl">W08</div></div>
+        <div class="col"><div class="b" data-v="3.3%" style="height:64%"></div><div class="lbl">W09</div></div>
+        <div class="col"><div class="b" data-v="3.5%" style="height:72%"></div><div class="lbl">W10</div></div>
+        <div class="col"><div class="b" data-v="3.6%" style="height:75%"></div><div class="lbl">W11</div></div>
+        <div class="col"><div class="b" data-v="3.4%" style="height:68%"></div><div class="lbl">W12</div></div>
+        <div class="col"><div class="b" data-v="3.0%" style="height:55%"></div><div class="lbl">W13</div></div>
+        <div class="col"><div class="b" data-v="3.4%" style="height:68%"></div><div class="lbl">W14</div></div>
+        <div class="col"><div class="b" data-v="3.8%" style="height:88%"></div><div class="lbl">W15</div></div>
+      </div>
+      <p class="dim mt-m" style="font-size:13px;margin-top:36px">Drop in W13 tracked to a broken Stripe webhook (fixed W14). Rebound in W15 is driven by the new onboarding checklist.</p>
+    </div>
+  </section>
+
+  <!-- 5. Blockers -->
+  <section class="slide" data-title="Blockers">
+    <p class="kicker">BLOCKERS · 3 items</p>
+    <h2 class="h2">Needs attention</h2>
+    <div class="mt-l" style="max-width:900px">
+      <div class="blocker">
+        <h4>p95 latency regressed to 412ms (+38ms)</h4>
+        <p>Traced to the new recommender service under load. Adding caching layer + connection pooling.</p>
+        <div class="meta">owner: @raj · ETA: W16 Wed · severity: medium</div>
+      </div>
+      <div class="blocker">
+        <h4>Apple Pay disabled in EU for 3 days</h4>
+        <p>Stripe credential rotation wasn't synced to the EU account. Fixed, but cost ~$4.2k in lost checkouts.</p>
+        <div class="meta">owner: @eli · severity: high · postmortem in progress</div>
+      </div>
+      <div class="blocker">
+        <h4>D7 retention down 1.8 points</h4>
+        <p>Cohort analysis shows it's isolated to the free-trial pricing test. Need to decide: kill test, or push through W16.</p>
+        <div class="meta">owner: @lewis · needs decision from @may by Monday</div>
+      </div>
+    </div>
+  </section>
+
+  <!-- 6. Next week -->
+  <section class="slide" data-title="Next Week">
+    <p class="kicker">NEXT WEEK · W16 plan</p>
+    <h2 class="h2">下周重点</h2>
+    <div class="mt-l" style="max-width:960px">
+      <div class="next-row"><div class="owner">@raj</div><div class="task"><b>Ship recommender cache layer</b><span>blocker · must land Wed</span></div></div>
+      <div class="next-row"><div class="owner">@may</div><div class="task"><b>Referral rewards · flag rollout to 100%</b><span>milestone · targets +3% WoW signups</span></div></div>
+      <div class="next-row"><div class="owner">@lewis</div><div class="task"><b>Pricing test: decision doc + readout</b><span>deadline Mon noon</span></div></div>
+      <div class="next-row"><div class="owner">@eli</div><div class="task"><b>Apple Pay postmortem + runbook update</b><span>include in W16 eng review</span></div></div>
+      <div class="next-row"><div class="owner">squad</div><div class="task"><b>Q2 OKR planning offsite</b><span>Thu 2–5pm · async pre-reads Wed</span></div></div>
+    </div>
+  </section>
+
+  <!-- 7. Thanks -->
+  <section class="slide center tc" data-title="Thanks">
+    <div>
+      <p class="kicker">FIN · week 15</p>
+      <h1 class="h1" style="font-size:100px">Thanks, team 🫶</h1>
+      <p class="lede" style="margin:16px auto">Solid week. Rebound earned, not luck.</p>
+      <div class="row mt-l" style="justify-content:center;gap:16px">
+        <span class="week-chip">Next report: Mon W16</span>
+        <span class="week-chip">questions → #growth-squad</span>
+      </div>
+    </div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>
diff --git a/templates/full-decks/weekly-report/style.css b/templates/full-decks/weekly-report/style.css
new file mode 100644
index 0000000..0b7274c
--- /dev/null
+++ b/templates/full-decks/weekly-report/style.css
@@ -0,0 +1,55 @@
+/* weekly-report — corporate clarity */
+.tpl-weekly-report{
+  --bg:#fafbfc;--bg-soft:#f3f5f9;--surface:#ffffff;--surface-2:#f3f5f9;
+  --border:rgba(22,30,55,.09);--border-strong:rgba(22,30,55,.2);
+  --text-1:#161e37;--text-2:#50586b;--text-3:#8b92a5;
+  --accent:#2e63eb;--accent-2:#0ea5b5;--accent-3:#f59e0b;
+  --good:#10b981;--warn:#f59e0b;--bad:#ef4444;
+  --grad:linear-gradient(120deg,#2e63eb,#0ea5b5);
+  --radius:14px;--radius-lg:18px;
+  --shadow:0 6px 20px rgba(22,30,55,.06),0 1px 3px rgba(22,30,55,.04);
+  font-family:'Inter','Noto Sans SC',sans-serif;
+}
+.tpl-weekly-report .slide{padding:64px 88px;background:var(--bg)}
+.tpl-weekly-report .h1{font-size:64px;line-height:1.05;font-weight:800;letter-spacing:-.025em}
+.tpl-weekly-report .h2{font-size:42px;font-weight:700;letter-spacing:-.02em}
+.tpl-weekly-report .kicker{color:var(--accent);font-size:12px;font-weight:700}
+.tpl-weekly-report .cover-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:48px}
+.tpl-weekly-report .logo{font-weight:800;font-size:18px;letter-spacing:-.01em}
+.tpl-weekly-report .logo::before{content:"■";color:var(--accent);margin-right:8px}
+.tpl-weekly-report .week-chip{display:inline-block;padding:8px 18px;border-radius:8px;background:var(--surface);border:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text-2)}
+.tpl-weekly-report .kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:24px 26px;position:relative;overflow:hidden}
+.tpl-weekly-report .kpi .label{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);font-weight:600}
+.tpl-weekly-report .kpi .value{font-size:48px;font-weight:800;letter-spacing:-.03em;margin-top:8px;line-height:1}
+.tpl-weekly-report .kpi .delta{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;margin-top:10px}
+.tpl-weekly-report .kpi .delta.up{background:rgba(16,185,129,.12);color:var(--good)}
+.tpl-weekly-report .kpi .delta.down{background:rgba(239,68,68,.12);color:var(--bad)}
+.tpl-weekly-report .kpi .delta.flat{background:rgba(139,146,165,.14);color:var(--text-2)}
+.tpl-weekly-report .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
+.tpl-weekly-report .kpi.good::before{background:var(--good)}
+.tpl-weekly-report .kpi.warn::before{background:var(--warn)}
+.tpl-weekly-report .kpi.bad::before{background:var(--bad)}
+.tpl-weekly-report .ship-item{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--border)}
+.tpl-weekly-report .ship-item .tag{flex:none;padding:3px 10px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;height:22px;display:inline-flex;align-items:center}
+.tpl-weekly-report .tag.feat{background:rgba(46,99,235,.12);color:var(--accent)}
+.tpl-weekly-report .tag.fix{background:rgba(16,185,129,.12);color:var(--good)}
+.tpl-weekly-report .tag.exp{background:rgba(245,158,11,.14);color:var(--warn)}
+.tpl-weekly-report .tag.infra{background:rgba(14,165,181,.12);color:var(--accent-2)}
+.tpl-weekly-report .ship-item b{color:var(--text-1);font-weight:600}
+.tpl-weekly-report .ship-item span.owner{margin-left:auto;color:var(--text-3);font-size:12px;font-family:'JetBrains Mono',monospace}
+.tpl-weekly-report .chart{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
+.tpl-weekly-report .chart-bars{display:flex;align-items:flex-end;gap:16px;height:220px;margin-top:20px}
+.tpl-weekly-report .chart-bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative}
+.tpl-weekly-report .chart-bars .col .b{width:100%;background:var(--grad);border-radius:6px 6px 0 0;min-height:6px;position:relative}
+.tpl-weekly-report .chart-bars .col .b::after{content:attr(data-v);position:absolute;top:-22px;left:0;right:0;text-align:center;font-size:12px;font-weight:700;color:var(--text-1)}
+.tpl-weekly-report .chart-bars .col .lbl{font-size:11px;color:var(--text-3);font-family:'JetBrains Mono',monospace}
+.tpl-weekly-report .blocker{background:var(--surface);border-left:3px solid var(--bad);padding:16px 20px;border-radius:8px;margin-bottom:12px}
+.tpl-weekly-report .blocker h4{font-size:16px;margin-bottom:4px}
+.tpl-weekly-report .blocker p{font-size:13px;color:var(--text-2);margin:0}
+.tpl-weekly-report .blocker .meta{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-3);margin-top:6px}
+.tpl-weekly-report .next-row{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:14px 0;border-bottom:1px dashed var(--border);align-items:baseline}
+.tpl-weekly-report .next-row .owner{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--accent)}
+.tpl-weekly-report .next-row .task{color:var(--text-1);font-weight:500}
+.tpl-weekly-report .next-row .task span{color:var(--text-3);font-size:12px;margin-left:8px}
+.tpl-weekly-report .lede{color:var(--text-2)}
+.tpl-weekly-report .card{background:var(--surface)}
diff --git a/templates/full-decks/xhs-pastel-card/README.md b/templates/full-decks/xhs-pastel-card/README.md
new file mode 100644
index 0000000..17a90c3
--- /dev/null
+++ b/templates/full-decks/xhs-pastel-card/README.md
@@ -0,0 +1,11 @@
+# xhs-pastel-card
+
+暖奶油 `#fef8f1` 底 + 模糊彩色 blob + Playfair italic 衬线大字 + 整色马卡龙卡片（桃 / 薄荷 / 天 / 丁香 / 柠檬 / 玫瑰）。共性提取自 `20260412-obsidian-skills/html/xhs-obsidian-skills.html` 的 `soft-purple/pink/blue/green/orange/teal` 软色卡系统，以及 `20260409 v2-白底版` 的胶囊 chip 顶部条。
+
+**Visual traits:** 三颗柔光 blob 作背景、顶部 chip+page 组合、Playfair italic 做 accent 词（em / rose / mint）、整色圆角 28px 大卡片、italic Playfair 序号 01-04、donut SVG 图、小 divider 条 + 渐变、衬线正文做标题 / sans 做正文混排。
+
+**Use when:** 生活方式 / 个人成长 / 轻内容 / 情感向的小红书贴或个人演讲；你想要一种「不那么科技感、偏杂志偏手作」的气质；适合讲「慢」「休息」「温柔」主题。
+
+**Source inspiration:** `20260412-obsidian-skills/html/xhs-obsidian-skills.html` + `20260409` v2-白底版（共性 pastel 系统）。
+
+**Path:** `templates/full-decks/xhs-pastel-card/index.html`
diff --git a/templates/full-decks/xhs-pastel-card/index.html b/templates/full-decks/xhs-pastel-card/index.html
new file mode 100644
index 0000000..18844b6
--- /dev/null
+++ b/templates/full-decks/xhs-pastel-card/index.html
@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>XHS Pastel Card</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-xhs-pastel-card">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="xp-blob b1"></div>
+    <div class="xp-blob b2"></div>
+    <div class="xp-blob b3"></div>
+    <div class="xp-topbar"><div class="xp-chip">A soft manifesto</div><div class="xp-page">01 · 08</div></div>
+    <div class="xp-kicker">Living With AI · 2026</div>
+    <h1 class="xp-h1">放慢一点，<br>让 <em>AI</em> 帮你<br>过一种 <span class="rose">更温柔</span><br>的生活</h1>
+    <div class="xp-divider"></div>
+    <p class="xp-sub">这不是一份效率指南。这是一份「怎么用 AI 少做一些事」的清单 —— 把挤出来的 4 小时还给你自己。</p>
+    <div class="xp-footer"><span>by lewis · pastel edition</span><span>cover</span></div>
+  </section>
+
+  <!-- 2. SECTION -->
+  <section class="slide">
+    <div class="xp-blob b2"></div>
+    <div class="xp-blob b3"></div>
+    <div class="xp-topbar"><div class="xp-chip mint">Chapter one</div><div class="xp-page">02 · 08</div></div>
+    <div style="margin:auto 0">
+      <div class="xp-kicker">先问自己</div>
+      <h1 class="xp-h1" style="font-size:120px">什么事<br>是你 <span class="mint">其实不想做</span> 的？</h1>
+      <p class="xp-sub">不是「不得不做」，是「做的时候灵魂在叹气」。</p>
+    </div>
+    <div class="xp-footer"><span>section · chapter 1</span><span>02 · 08</span></div>
+  </section>
+
+  <!-- 3. CONTENT 2x2 pastel cards -->
+  <section class="slide">
+    <div class="xp-blob b1"></div>
+    <div class="xp-topbar"><div class="xp-chip rose">Four little escapes</div><div class="xp-page">03 · 08</div></div>
+    <h2 class="xp-h2">四件可以<br>完全交给 <em>AI</em> 的小事</h2>
+    <div class="xp-grid-2">
+      <div class="xp-card peach"><div class="xp-num">01</div><h4>回复那种「收到」邮件</h4><p>它们不需要你思考。让 AI 按你的语气自动处理，一周省 40 分钟。</p></div>
+      <div class="xp-card mint"><div class="xp-num">02</div><h4>订餐厅、改签、查路线</h4><p>一句话外包出去。你只负责选最后选项，不负责翻十个 app。</p></div>
+      <div class="xp-card sky"><div class="xp-num">03</div><h4>把会议录音变成行动项</h4><p>录音 → 摘要 → todo 一键完成。你只需要确认和签字。</p></div>
+      <div class="xp-card lilac"><div class="xp-num">04</div><h4>整理上周拍的 300 张照片</h4><p>按事件分类、挑 10 张精选、写图说。整理档案这件事终于被自动化了。</p></div>
+    </div>
+    <div class="xp-footer"><span>content · 2x2</span><span>03 · 08</span></div>
+  </section>
+
+  <!-- 4. QUOTE -->
+  <section class="slide">
+    <div class="xp-blob b3"></div>
+    <div class="xp-blob b2"></div>
+    <div class="xp-topbar"><div class="xp-chip lilac">A small pause</div><div class="xp-page">04 · 08</div></div>
+    <div class="xp-hero-card">
+      <p class="xp-quote">效率工具的终点，不是<em> 做更多</em>，<br>而是 <em>有资格做更少</em>。</p>
+      <div class="xp-divider"></div>
+      <p class="xp-sub">当你把「收到」邮件、订餐、行程、照片整理都交出去，你才会惊讶地发现 —— 原来一周有 4 个小时是空的。</p>
+    </div>
+    <div class="xp-footer"><span>quote</span><span>04 · 08</span></div>
+  </section>
+
+  <!-- 5. CODE / PROMPT -->
+  <section class="slide">
+    <div class="xp-blob b1"></div>
+    <div class="xp-topbar"><div class="xp-chip">My auto-reply prompt</div><div class="xp-page">05 · 08</div></div>
+    <h2 class="xp-h2">把「<em>收到邮件</em>」<br>自动化的 <span class="rose">一段 prompt</span></h2>
+    <pre class="xp-codebox"><span class="cm"># auto-reply skill</span>
+<span class="kw">when</span> email matches <span class="st">"收到 / 好的 / 确认 / 收到谢谢"</span>:
+  reply:
+    tone: <span class="st">"温柔，简短，不要太商业"</span>
+    max_lines: <span class="hl">2</span>
+    sign_with: <span class="st">"— Lewis"</span>
+
+<span class="kw">always_skip</span>:
+  - from: [<span class="st">"家人"</span>, <span class="st">"伴侣"</span>, <span class="st">"亲密朋友"</span>]
+  - contains: [<span class="st">"紧急"</span>, <span class="st">"合同"</span>, <span class="st">"付款"</span>]
+
+<span class="cm"># 一周省 38 分钟，测过</span></pre>
+    <div class="xp-footer"><span>content · prompt</span><span>05 · 08</span></div>
+  </section>
+
+  <!-- 6. CHART — time donut -->
+  <section class="slide">
+    <div class="xp-blob b2"></div>
+    <div class="xp-topbar"><div class="xp-chip mint">Your week, rebuilt</div><div class="xp-page">06 · 08</div></div>
+    <h2 class="xp-h2">一周 4 小时 <span class="mint">还给自己</span></h2>
+    <div style="display:flex;align-items:center;gap:60px;margin-top:30px">
+      <svg viewBox="0 0 260 260" style="width:300px;flex-shrink:0">
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#fef0e4" stroke-width="40"/>
+        <!-- email 12% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#f48b5c" stroke-width="40" stroke-dasharray="75 628" stroke-dashoffset="0" transform="rotate(-90 130 130)"/>
+        <!-- logistics 18% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#2e9d70" stroke-width="40" stroke-dasharray="113 628" stroke-dashoffset="-75" transform="rotate(-90 130 130)"/>
+        <!-- meetings 14% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#4e7ed6" stroke-width="40" stroke-dasharray="88 628" stroke-dashoffset="-188" transform="rotate(-90 130 130)"/>
+        <!-- photos 6% -->
+        <circle cx="130" cy="130" r="100" fill="none" stroke="#7b5dc4" stroke-width="40" stroke-dasharray="38 628" stroke-dashoffset="-276" transform="rotate(-90 130 130)"/>
+        <text x="130" y="130" text-anchor="middle" font-family="Playfair Display" font-size="44" font-weight="900" fill="#2a2340">4h</text>
+        <text x="130" y="156" text-anchor="middle" font-family="Inter" font-size="12" fill="#9089a8">per week saved</text>
+      </svg>
+      <div style="flex:1">
+        <div class="xp-grid-2" style="grid-template-columns:1fr;gap:12px;margin-top:0">
+          <div class="xp-card peach" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-peach-d)"></div><div><h4 style="margin:0;font-size:17px">48 min · 邮件</h4></div></div>
+          <div class="xp-card mint" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-mint-d)"></div><div><h4 style="margin:0;font-size:17px">72 min · 订/改/查</h4></div></div>
+          <div class="xp-card sky" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-sky-d)"></div><div><h4 style="margin:0;font-size:17px">56 min · 会议摘要</h4></div></div>
+          <div class="xp-card lilac" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-lilac-d)"></div><div><h4 style="margin:0;font-size:17px">24 min · 照片整理</h4></div></div>
+        </div>
+      </div>
+    </div>
+    <div class="xp-footer"><span>chart · donut</span><span>06 · 08</span></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="xp-blob b1"></div>
+    <div class="xp-blob b3"></div>
+    <div class="xp-topbar"><div class="xp-chip rose">This weekend</div><div class="xp-page">07 · 08</div></div>
+    <h2 class="xp-h2">这周末，<br>先给自己 <em>放一个小假</em></h2>
+    <div class="xp-grid-3">
+      <div class="xp-card lemon"><div class="xp-num">☕</div><h4>Saturday morning</h4><p>挑一个你最烦的小事，写 prompt，让它从此不再烦你。</p></div>
+      <div class="xp-card peach"><div class="xp-num">🌸</div><h4>Saturday afternoon</h4><p>去散步。什么都不带。AI 在家帮你看着消息。</p></div>
+      <div class="xp-card sky"><div class="xp-num">🌙</div><h4>Sunday night</h4><p>复盘：哪 4 小时是真的空的？下周继续。</p></div>
+    </div>
+    <div class="xp-footer"><span>cta</span><span>07 · 08</span></div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="xp-blob b2"></div>
+    <div style="margin:auto 0;text-align:center">
+      <div class="xp-kicker" style="text-align:center">thanks for reading</div>
+      <h1 class="xp-h1" style="font-size:160px;text-align:center">谢谢 <em>·</em> thanks</h1>
+      <div class="xp-divider" style="margin:24px auto"></div>
+      <p class="xp-sub" style="margin:0 auto">如果你也想过更温柔的一周，评论区跟我说说你打算把哪一件事先交出去 ♡</p>
+    </div>
+    <div class="xp-footer"><span>end</span><span>08 · 08</span></div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/xhs-pastel-card/style.css b/templates/full-decks/xhs-pastel-card/style.css
new file mode 100644
index 0000000..55c3f56
--- /dev/null
+++ b/templates/full-decks/xhs-pastel-card/style.css
@@ -0,0 +1,66 @@
+/* xhs-pastel-card — 柔和马卡龙大色块封面风 */
+.tpl-xhs-pastel-card{
+  --xp-bg:#fef8f1;
+  --xp-ink:#2a2340;
+  --xp-ink2:#5b5470;
+  --xp-muted:#9089a8;
+  --xp-peach:#ffd8c2;
+  --xp-peach-d:#f48b5c;
+  --xp-mint:#c8ecd8;
+  --xp-mint-d:#2e9d70;
+  --xp-sky:#c9dcfb;
+  --xp-sky-d:#4e7ed6;
+  --xp-lilac:#ddd0f5;
+  --xp-lilac-d:#7b5dc4;
+  --xp-lemon:#fdf0b2;
+  --xp-lemon-d:#c8910a;
+  --xp-rose:#fcd0dd;
+  --xp-rose-d:#c94673;
+  background:var(--xp-bg);
+  color:var(--xp-ink);
+  font-family:'Playfair Display','Noto Serif SC','Inter','Noto Sans SC',Georgia,serif;
+}
+.tpl-xhs-pastel-card .slide{background:var(--xp-bg);color:var(--xp-ink);padding:76px 90px}
+.tpl-xhs-pastel-card .xp-blob{position:absolute;border-radius:50%;filter:blur(2px);opacity:.85;z-index:0}
+.tpl-xhs-pastel-card .xp-blob.b1{width:420px;height:420px;background:radial-gradient(circle,var(--xp-peach),transparent 70%);top:-8%;right:-6%}
+.tpl-xhs-pastel-card .xp-blob.b2{width:360px;height:360px;background:radial-gradient(circle,var(--xp-lilac),transparent 72%);bottom:-10%;left:-8%}
+.tpl-xhs-pastel-card .xp-blob.b3{width:260px;height:260px;background:radial-gradient(circle,var(--xp-mint),transparent 72%);top:40%;right:20%}
+.tpl-xhs-pastel-card .slide > *{position:relative;z-index:2}
+.tpl-xhs-pastel-card .xp-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;font-family:'Inter','Noto Sans SC',sans-serif}
+.tpl-xhs-pastel-card .xp-chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:999px;background:#fff;border:1.5px solid rgba(42,35,64,.1);font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--xp-ink2);text-transform:uppercase}
+.tpl-xhs-pastel-card .xp-chip::before{content:'';width:9px;height:9px;border-radius:50%;background:var(--xp-peach-d)}
+.tpl-xhs-pastel-card .xp-chip.mint::before{background:var(--xp-mint-d)}
+.tpl-xhs-pastel-card .xp-chip.sky::before{background:var(--xp-sky-d)}
+.tpl-xhs-pastel-card .xp-chip.lilac::before{background:var(--xp-lilac-d)}
+.tpl-xhs-pastel-card .xp-chip.rose::before{background:var(--xp-rose-d)}
+.tpl-xhs-pastel-card .xp-page{font-family:'Inter',sans-serif;font-size:13px;color:var(--xp-muted);letter-spacing:.12em;font-weight:600}
+.tpl-xhs-pastel-card .xp-kicker{font-family:'Inter',sans-serif;font-size:14px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--xp-peach-d);margin-bottom:14px}
+.tpl-xhs-pastel-card .xp-h1{font-size:96px;font-weight:900;line-height:1.05;letter-spacing:-2px;margin:0 0 18px;color:var(--xp-ink);font-family:'Playfair Display','Noto Serif SC',serif}
+.tpl-xhs-pastel-card .xp-h1 em{font-style:italic;color:var(--xp-peach-d);font-family:'Playfair Display',serif}
+.tpl-xhs-pastel-card .xp-h1 .rose{color:var(--xp-rose-d);font-style:italic}
+.tpl-xhs-pastel-card .xp-h1 .mint{color:var(--xp-mint-d);font-style:italic}
+.tpl-xhs-pastel-card .xp-h2{font-size:60px;font-weight:800;line-height:1.1;letter-spacing:-1px;margin:0 0 14px;font-family:'Playfair Display','Noto Serif SC',serif}
+.tpl-xhs-pastel-card .xp-sub{font-family:'Inter','Noto Sans SC',sans-serif;font-size:21px;line-height:1.6;color:var(--xp-ink2);max-width:800px;font-weight:400}
+.tpl-xhs-pastel-card .xp-card{border-radius:28px;padding:30px 34px;background:#fff;box-shadow:0 14px 40px rgba(42,35,64,.08);position:relative;overflow:hidden}
+.tpl-xhs-pastel-card .xp-card.peach{background:var(--xp-peach)}
+.tpl-xhs-pastel-card .xp-card.mint{background:var(--xp-mint)}
+.tpl-xhs-pastel-card .xp-card.sky{background:var(--xp-sky)}
+.tpl-xhs-pastel-card .xp-card.lilac{background:var(--xp-lilac)}
+.tpl-xhs-pastel-card .xp-card.lemon{background:var(--xp-lemon)}
+.tpl-xhs-pastel-card .xp-card.rose{background:var(--xp-rose)}
+.tpl-xhs-pastel-card .xp-card .xp-num{font-family:'Playfair Display',serif;font-size:68px;font-weight:900;font-style:italic;line-height:1;opacity:.85}
+.tpl-xhs-pastel-card .xp-card h4{font-size:22px;font-weight:800;margin:8px 0;font-family:'Inter','Noto Sans SC',sans-serif}
+.tpl-xhs-pastel-card .xp-card p{font-family:'Inter','Noto Sans SC',sans-serif;font-size:15px;line-height:1.55;color:var(--xp-ink2)}
+.tpl-xhs-pastel-card .xp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
+.tpl-xhs-pastel-card .xp-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;margin-top:26px}
+.tpl-xhs-pastel-card .xp-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px}
+.tpl-xhs-pastel-card .xp-hero-card{background:#fff;border-radius:36px;padding:40px 46px;margin-top:28px;box-shadow:0 20px 50px rgba(42,35,64,.1)}
+.tpl-xhs-pastel-card .xp-quote{font-family:'Playfair Display','Noto Serif SC',serif;font-size:40px;font-weight:800;font-style:italic;line-height:1.3;color:var(--xp-ink)}
+.tpl-xhs-pastel-card .xp-quote::before{content:'“';font-size:100px;line-height:.8;display:block;color:var(--xp-peach-d);opacity:.7}
+.tpl-xhs-pastel-card .xp-footer{position:absolute;left:90px;right:90px;bottom:40px;display:flex;justify-content:space-between;font-family:'Inter',sans-serif;font-size:12px;color:var(--xp-muted);letter-spacing:.1em}
+.tpl-xhs-pastel-card .xp-divider{width:90px;height:4px;background:linear-gradient(90deg,var(--xp-peach-d),var(--xp-rose-d));border-radius:2px;margin:20px 0}
+.tpl-xhs-pastel-card .xp-codebox{background:#2a2340;color:#fef8f1;border-radius:24px;padding:26px 30px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;margin-top:22px}
+.tpl-xhs-pastel-card .xp-codebox .cm{color:#9089a8}
+.tpl-xhs-pastel-card .xp-codebox .kw{color:#ffc6a0}
+.tpl-xhs-pastel-card .xp-codebox .st{color:#c8ecd8}
+.tpl-xhs-pastel-card .xp-codebox .hl{color:#fcd0dd;font-weight:700}
diff --git a/templates/full-decks/xhs-post/README.md b/templates/full-decks/xhs-post/README.md
new file mode 100644
index 0000000..d95450b
--- /dev/null
+++ b/templates/full-decks/xhs-post/README.md
@@ -0,0 +1,9 @@
+# xhs-post · 小红书 9 图
+
+小红书 3:4 图文格式，9 张图（810 × 1080）。结构：封面 → hook → 痛点 → aha moment → 步骤 1-3 → 效果 → CTA 关注。
+
+手写便签 + 贴纸 + 圆角硬阴影的 MUJI/风格，暖米色背景 + 粉橘黄柔和渐变。每页右上角有 `N / 9` 页码贴纸，最后一页有话题 tag。
+
+**适用场景：** 小红书 / 微博九宫格 / 公众号图文首图 / 抖音图文卡片。
+**使用方式：** 每张 `.slide` 直接截图导出即可，保持 810×1080 比例。按 → 依次浏览。
+**Feel:** 手帐、贴纸、闺蜜跟你分享干货的 vibe。
diff --git a/templates/full-decks/xhs-post/index.html b/templates/full-decks/xhs-post/index.html
new file mode 100644
index 0000000..13dd573
--- /dev/null
+++ b/templates/full-decks/xhs-post/index.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
+<title>每天只睡 6h 还精神？· 小红书图文</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-xhs-post">
+<div class="deck">
+
+  <!-- 1. Cover -->
+  <section class="slide" data-title="Cover">
+    <div class="page-dot">1 / 9</div>
+    <div class="sticker pink" style="top:120px;left:48px;transform:rotate(-6deg)">💤 救命</div>
+    <div class="sticker yellow" style="top:140px;right:64px;transform:rotate(5deg)">亲测 7 天</div>
+    <div style="margin-top:200px">
+      <p class="lede" style="font-size:24px;color:var(--text-1);font-weight:600">打工人深夜自救手册</p>
+      <h1 class="h1 mt-s">每天只睡 <span class="cover-title">6h</span><br>还能<span class="cover-title">精神一整天</span><br>的 3 个小习惯</h1>
+    </div>
+    <div class="bottom-bar"><div><span class="avatar">小</span> <b style="color:var(--text-1);margin-left:8px">@小熊不困了</b></div><div>← 左滑 查看</div></div>
+  </section>
+
+  <!-- 2. Hook -->
+  <section class="slide" data-title="Hook">
+    <div class="page-dot">2 / 9</div>
+    <div class="big-emoji" style="margin-top:80px">👀</div>
+    <h2 class="h2 tc mt-l">等等先别划走！</h2>
+    <p class="lede tc mt-m" style="padding:0 20px">我也曾是那个<br>早上起来像被卡车撞过的人。<br><br>直到我发现了<br><b style="color:var(--accent)">1 件事</b>比睡够 8 小时还重要。</p>
+    <div class="sticker blue" style="bottom:160px;left:50%;transform:translateX(-50%) rotate(-2deg)">真 · 转折点 ↓</div>
+  </section>
+
+  <!-- 3. Pain -->
+  <section class="slide" data-title="Pain">
+    <div class="page-dot">3 / 9</div>
+    <p class="lede" style="font-weight:700;color:var(--accent)">❌ 你是不是也这样</p>
+    <h2 class="h2 mt-s">越睡越累</h2>
+    <div class="stack mt-l">
+      <div class="hand-box"><b style="font-size:22px">😵‍💫 周末补觉到中午</b><p class="dim" style="font-size:16px;margin-top:4px">起来头更晕，一整天废掉</p></div>
+      <div class="hand-box"><b style="font-size:22px">☕️ 咖啡续三杯</b><p class="dim" style="font-size:16px;margin-top:4px">下午 3 点照样困到扶墙</p></div>
+      <div class="hand-box"><b style="font-size:22px">📱 睡前刷到凌晨</b><p class="dim" style="font-size:16px;margin-top:4px">明明很困就是不舍得睡</p></div>
+    </div>
+  </section>
+
+  <!-- 4. Aha -->
+  <section class="slide" data-title="Aha">
+    <div class="page-dot">4 / 9</div>
+    <div class="sticker green" style="top:100px;right:48px;transform:rotate(4deg)">✨ aha moment</div>
+    <p class="lede mt-l" style="color:var(--accent);font-weight:700">💡 真相是</p>
+    <h2 class="h2 mt-s">不是睡得少，<br>是<span style="background:var(--accent-3);padding:0 8px">醒得不对</span>。</h2>
+    <p class="lede mt-l">身体有 90 分钟一个周期。<br>在"深睡"里被闹钟拽起来，<br>就算睡 9 小时也跟没睡一样。</p>
+    <p class="lede mt-m" style="color:var(--text-1);font-weight:700">关键是：<span style="color:var(--accent)">卡着周期醒</span>。</p>
+  </section>
+
+  <!-- 5. Step 1 -->
+  <section class="slide" data-title="Step 1">
+    <div class="page-dot">5 / 9</div>
+    <div class="num-circle">1</div>
+    <h2 class="h2 mt-m">倒推睡眠时间</h2>
+    <div class="hand-box mt-l">
+      <p style="font-size:22px;margin:0;color:var(--text-1);font-weight:700">👉 公式</p>
+      <p style="font-size:20px;margin:10px 0 0;color:var(--text-2);line-height:1.7">起床时间 − <b style="color:var(--accent)">90min × N</b> − 15min 入睡<br>= 你今晚该上床的点</p>
+    </div>
+    <div class="hand-box mt-m" style="background:#fff5ef">
+      <p style="font-size:18px;margin:0;color:var(--text-2)">举例：要 7 点起</p>
+      <p style="font-size:24px;margin:8px 0 0;color:var(--text-1);font-weight:800">→ 23:15 上床 (4 个周期)<br>→ 00:45 上床 (3 个周期)</p>
+    </div>
+  </section>
+
+  <!-- 6. Step 2 -->
+  <section class="slide" data-title="Step 2">
+    <div class="page-dot">6 / 9</div>
+    <div class="num-circle" style="background:var(--accent-2)">2</div>
+    <h2 class="h2 mt-m">早晨 10 分钟光</h2>
+    <div class="hand-box mt-l">
+      <p style="font-size:22px;margin:0;color:var(--text-1);font-weight:700">☀️ 打开窗帘 / 下楼遛弯</p>
+      <p style="font-size:18px;margin:8px 0 0;color:var(--text-2);line-height:1.6">自然光一照，褪黑素立刻被掐停，人就真的醒了。阴天也有效，别偷懒。</p>
+    </div>
+    <div class="sticker yellow" style="bottom:200px;right:60px;transform:rotate(8deg)">⏰ 比咖啡还猛</div>
+    <div class="hand-box mt-m" style="background:#fff5ef">
+      <p style="font-size:18px;margin:0;color:var(--text-2)">懒人方案：</p>
+      <p style="font-size:22px;margin:6px 0 0;color:var(--text-1);font-weight:700">刷牙的时候站在窗边 🪥</p>
+    </div>
+  </section>
+
+  <!-- 7. Step 3 -->
+  <section class="slide" data-title="Step 3">
+    <div class="page-dot">7 / 9</div>
+    <div class="num-circle" style="background:var(--accent-3);color:var(--text-1)">3</div>
+    <h2 class="h2 mt-m">下午 3 点<br>20 分钟小睡</h2>
+    <div class="hand-box mt-l">
+      <p style="font-size:20px;margin:0;color:var(--text-2);line-height:1.6"><b style="color:var(--text-1)">⏱️ 最多 20 分钟。</b>超过 30 就会进入深睡，醒来会更累。</p>
+    </div>
+    <div class="hand-box mt-m" style="background:#fff5ef">
+      <p style="font-size:20px;margin:0;color:var(--text-2);line-height:1.6"><b style="color:var(--text-1)">💡 小 tip：</b>睡前喝一口咖啡。20 分钟后咖啡因正好起效，和小睡的清醒 buff 叠加。</p>
+    </div>
+    <div class="sticker pink" style="bottom:140px;left:50%;transform:translateX(-50%) rotate(-3deg)">打工人作弊技</div>
+  </section>
+
+  <!-- 8. Result -->
+  <section class="slide" data-title="Result">
+    <div class="page-dot">8 / 9</div>
+    <p class="lede" style="color:var(--good);font-weight:700">✅ 我坚持 7 天后</p>
+    <h2 class="h2 mt-s">结果是……</h2>
+    <div class="stack mt-l">
+      <div class="hand-box"><b style="font-size:22px">😌 早上闹钟响之前就自然醒</b></div>
+      <div class="hand-box"><b style="font-size:22px">💪 下午不再崩溃</b></div>
+      <div class="hand-box"><b style="font-size:22px">☕️ 咖啡从 3 杯 → 1 杯</b></div>
+      <div class="hand-box" style="background:var(--accent-3);border-color:var(--text-1)"><b style="font-size:24px">✨ 最重要：脾气变好了</b></div>
+    </div>
+  </section>
+
+  <!-- 9. CTA -->
+  <section class="slide" data-title="CTA">
+    <div class="page-dot">9 / 9</div>
+    <div class="big-emoji" style="margin-top:60px">💌</div>
+    <h2 class="h2 tc mt-l">觉得有用的话</h2>
+    <h1 class="h1 tc mt-s" style="color:var(--accent)">收藏 + 关注 🧡</h1>
+    <p class="lede tc mt-l" style="padding:0 30px">下期讲<br><b style="color:var(--text-1)">「打工人脊椎急救 5 式」</b><br>办公室也能做</p>
+    <div class="tag-row" style="justify-content:center;margin-top:36px">
+      <span class="ht">#睡眠</span>
+      <span class="ht">#打工人日常</span>
+      <span class="ht">#自律</span>
+      <span class="ht">#健康生活</span>
+    </div>
+    <div class="bottom-bar"><div><span class="avatar">小</span> <b style="color:var(--text-1);margin-left:8px">@小熊不困了</b></div><div>❤️ 5.2w</div></div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body></html>
diff --git a/templates/full-decks/xhs-post/style.css b/templates/full-decks/xhs-post/style.css
new file mode 100644
index 0000000..168d5a6
--- /dev/null
+++ b/templates/full-decks/xhs-post/style.css
@@ -0,0 +1,47 @@
+/* xhs-post — 小红书 3:4 九宫格 */
+.tpl-xhs-post{
+  --bg:#fef7f3;--bg-soft:#fff1ea;--surface:#ffffff;--surface-2:#fff5ef;
+  --border:rgba(90,40,30,.12);--border-strong:rgba(90,40,30,.24);
+  --text-1:#3a1f18;--text-2:#6f4a3e;--text-3:#a68676;
+  --accent:#ff6b8b;--accent-2:#ffa94d;--accent-3:#ffd166;
+  --grad:linear-gradient(135deg,#ffd3e0,#ffe5c7 50%,#d6f0ff);
+  --good:#7bc67b;--warn:#ffb547;--bad:#ff6b6b;
+  --radius:24px;--radius-lg:32px;
+  --shadow:0 14px 36px rgba(90,40,30,.08);
+  font-family:'Inter','Noto Sans SC','PingFang SC',sans-serif;
+}
+.tpl-xhs-post{background:#f0eae2;display:flex;align-items:center;justify-content:center;min-height:100vh}
+.tpl-xhs-post .deck{width:810px;height:1080px;position:relative;background:transparent}
+.tpl-xhs-post .slide{
+  position:absolute;inset:0;width:810px;height:1080px;aspect-ratio:3/4;
+  padding:70px 64px;border-radius:28px;overflow:hidden;
+  background:var(--bg);
+}
+.tpl-xhs-post .slide::before{content:"";position:absolute;inset:0;background:
+  radial-gradient(45% 30% at 80% 10%,rgba(255,209,102,.35),transparent 70%),
+  radial-gradient(50% 35% at 10% 95%,rgba(255,107,139,.22),transparent 70%),
+  radial-gradient(40% 30% at 90% 85%,rgba(122,200,255,.18),transparent 70%);
+  pointer-events:none;z-index:0}
+.tpl-xhs-post .slide > *{position:relative;z-index:1}
+.tpl-xhs-post .h1{font-size:72px;line-height:1.1;font-weight:900;letter-spacing:-.02em;color:var(--text-1)}
+.tpl-xhs-post .h2{font-size:54px;line-height:1.15;font-weight:800;letter-spacing:-.015em;color:var(--text-1)}
+.tpl-xhs-post .h3{font-size:36px;font-weight:800;color:var(--text-1)}
+.tpl-xhs-post .page-dot{position:absolute;top:40px;right:48px;background:var(--text-1);color:#fff;border-radius:999px;padding:6px 14px;font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;z-index:2}
+.tpl-xhs-post .sticker{position:absolute;padding:10px 18px;background:#fff;border:2.5px dashed var(--text-1);border-radius:18px;font-weight:800;font-size:18px;color:var(--text-1);transform:rotate(-3deg);box-shadow:4px 4px 0 var(--text-1)}
+.tpl-xhs-post .sticker.pink{background:#ffd3e0}
+.tpl-xhs-post .sticker.yellow{background:#ffe788}
+.tpl-xhs-post .sticker.blue{background:#cfeaff}
+.tpl-xhs-post .sticker.green{background:#d4f2c8}
+.tpl-xhs-post .hand-box{background:#fff;border:2.5px solid var(--text-1);border-radius:22px;padding:24px 28px;box-shadow:5px 5px 0 var(--text-1)}
+.tpl-xhs-post .lede{color:var(--text-2);font-size:26px;line-height:1.55}
+.tpl-xhs-post .big-emoji{font-size:180px;line-height:1;text-align:center}
+.tpl-xhs-post .num-circle{display:inline-flex;align-items:center;justify-content:center;width:72px;height:72px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:36px;border:3px solid var(--text-1);box-shadow:4px 4px 0 var(--text-1)}
+.tpl-xhs-post .step-card{background:#fff;border:2.5px solid var(--text-1);border-radius:22px;padding:26px 28px;box-shadow:5px 5px 0 var(--text-1);margin-bottom:24px}
+.tpl-xhs-post .step-card h4{font-size:28px;font-weight:800;margin:0 0 6px}
+.tpl-xhs-post .step-card p{font-size:18px;color:var(--text-2);margin:0}
+.tpl-xhs-post .tag-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
+.tpl-xhs-post .ht{background:#fff;color:var(--accent);border:2px solid var(--text-1);padding:6px 14px;border-radius:999px;font-weight:700;font-size:16px}
+.tpl-xhs-post .cover-title{background:linear-gradient(180deg,transparent 60%,var(--accent-3) 60%,var(--accent-3) 92%,transparent 92%);padding:0 10px}
+.tpl-xhs-post .heart{color:var(--accent);font-size:28px}
+.tpl-xhs-post .bottom-bar{position:absolute;bottom:40px;left:64px;right:64px;display:flex;justify-content:space-between;align-items:center;font-size:15px;color:var(--text-3);font-family:'JetBrains Mono',monospace;z-index:2}
+.tpl-xhs-post .avatar{width:54px;height:54px;border-radius:50%;background:var(--grad);border:2.5px solid var(--text-1);box-shadow:3px 3px 0 var(--text-1);display:inline-flex;align-items:center;justify-content:center;font-weight:900;font-size:20px;color:var(--text-1)}
diff --git a/templates/full-decks/xhs-white-editorial/README.md b/templates/full-decks/xhs-white-editorial/README.md
new file mode 100644
index 0000000..e909576
--- /dev/null
+++ b/templates/full-decks/xhs-white-editorial/README.md
@@ -0,0 +1,11 @@
+# xhs-white-editorial
+
+白底杂志风、强调重点块、macaron soft-card 分组。灵感来自 `20260409 升级版知识库/小红书图文/v2-白底版/slide_01_cover.html` 的顶部彩虹条 + 大字标题，以及 `20260412-AI测试与安全/xhs-ai-testing-safety-v2.html` 的 `.focus` 黑底白字强重点和 macaron 软色卡片系统。
+
+**Visual traits:** 纯白背景、顶部 10 色彩虹条、巨型 80-110px 标题配轻微负字距、渐变 brand 文字（紫→蓝→绿→橙→粉）、macaron 软色卡（soft-purple / pink / blue / green / orange）、胶囊 tag + dot、黑底 `.focus` 强调框、hero quote box 带淡阴影。
+
+**Use when:** 你需要一份能当小红书图文、也能当横屏 deck 用的白底内容帖；文字多、重点密集、需要一眼抓住关键词；面向中文读者为主。
+
+**Source inspiration:** `20260409` xhs v2 白底封面 + `20260412` AI 测试与安全 v2。
+
+**Path:** `templates/full-decks/xhs-white-editorial/index.html`
diff --git a/templates/full-decks/xhs-white-editorial/index.html b/templates/full-decks/xhs-white-editorial/index.html
new file mode 100644
index 0000000..a0c90bf
--- /dev/null
+++ b/templates/full-decks/xhs-white-editorial/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>白底杂志风 · XHS Editorial</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-xhs-white-editorial">
+<div class="deck">
+
+  <!-- 1. COVER -->
+  <section class="slide is-active">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>AI 时代 · 职业判断</div>
+      <div class="xw-page">01 / 08</div>
+    </div>
+    <div class="xw-kicker">我越来越确定的一件事</div>
+    <h1 class="xw-title">以后最贵的工作，<br>是 <span class="xw-grad">测试 + 安全</span></h1>
+    <p class="xw-sub">AI 会越来越会做事。但谁来保证它 <span class="xw-focus">做对</span>、<span class="xw-focus">没风险</span>、<span class="xw-focus">不会出事</span>？</p>
+    <div class="xw-hero">
+      <div class="xw-quote">未来最值钱的，<br>不是 <span class="xw-focus-orange">生产</span>，而是 <span class="xw-focus">验收和兜底</span>。</div>
+    </div>
+    <div class="xw-footer"><span>白底｜强重点｜杂志竖排</span><span>Cover · 01</span></div>
+  </section>
+
+  <!-- 2. SECTION DIVIDER -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>Chapter · 01</div>
+      <div class="xw-page">02 / 08</div>
+    </div>
+    <div style="margin-top:120px">
+      <div class="xw-kicker" style="font-size:20px;letter-spacing:.2em;text-transform:uppercase;color:#98a2b3">第一章</div>
+      <h1 class="xw-title" style="font-size:110px;margin-top:20px">先看 <span class="xw-grad">大趋势</span></h1>
+      <p class="xw-sub" style="font-size:28px">当执行越来越便宜，判断就会越来越贵。</p>
+    </div>
+    <div class="xw-footer"><span>Section Divider</span><span>02 / 08</span></div>
+  </section>
+
+  <!-- 3. CONTENT — 4 card grid -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>越来越多的事会交给 AI</div>
+      <div class="xw-page">03 / 08</div>
+    </div>
+    <h2 class="xw-title-md">未来 3 年，这些事都会 <span class="xw-grad">自动跑</span></h2>
+    <div class="xw-grid-2">
+      <div class="xw-card soft-pink"><div class="xw-label">内容</div><div class="main">写文案 · 写方案 · 写脚本</div><div class="desc">创作变成一个 prompt 的距离</div></div>
+      <div class="xw-card soft-blue"><div class="xw-label">生产</div><div class="main">做图 · 搭页面 · 做表格</div><div class="desc">生产力工具集体重写一次</div></div>
+      <div class="xw-card soft-green"><div class="xw-label">执行</div><div class="main">跑流程 · 写代码 · 自动操作</div><div class="desc">Agent 从 demo 走进真实工作流</div></div>
+      <div class="xw-card soft-orange"><div class="xw-label">分析</div><div class="main">读数据 · 做总结 · 给建议</div><div class="desc">决策支持层彻底向下延伸</div></div>
+    </div>
+    <div class="xw-footer"><span>Content · Grid 2x2</span><span>03 / 08</span></div>
+  </section>
+
+  <!-- 4. STEPS -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>为什么会这样</div>
+      <div class="xw-page">04 / 08</div>
+    </div>
+    <h2 class="xw-title-md">AI 越强，<span class="xw-grad">判断对错</span> 越值钱</h2>
+    <div class="xw-steps">
+      <div class="xw-step"><div class="xw-num">1</div><div class="xw-txt">生产会更便宜，边际成本接近零</div></div>
+      <div class="xw-step"><div class="xw-num">2</div><div class="xw-txt">复制会更快，错误也一起被加速</div></div>
+      <div class="xw-step"><div class="xw-num">3</div><div class="xw-txt">AI 一本正经地做错，人类难以察觉</div></div>
+      <div class="xw-step"><div class="xw-num">4</div><div class="xw-txt">所以最贵的能力会变成 <span class="xw-focus">发现问题</span></div></div>
+    </div>
+    <div class="xw-hero"><div class="xw-quote" style="font-size:30px">AI 让「<span class="xw-focus-blue">做出来</span>」变便宜，<br>但让「<span class="xw-focus">做对、做稳、别出事</span>」变更贵。</div></div>
+    <div class="xw-footer"><span>Content · Steps</span><span>04 / 08</span></div>
+  </section>
+
+  <!-- 5. CODE EXAMPLE -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>一段你今晚就能跑的验收 Skill</div>
+      <div class="xw-page">05 / 08</div>
+    </div>
+    <h2 class="xw-title-md">不是写 prompt，<br>是写 <span class="xw-grad">验收清单</span></h2>
+    <pre class="xw-codebox"><span class="cm"># skills/ai-acceptance/SKILL.md</span>
+<span class="kw">name</span>: <span class="st">ai-acceptance</span>
+<span class="kw">description</span>: <span class="st">"Runs AI output through a 4-gate review checklist."</span>
+
+<span class="kw">gates</span>:
+  - <span class="hl">functional</span>:  <span class="st">"Does it actually do what the user asked?"</span>
+  - <span class="hl">edge_cases</span>: <span class="st">"Empty / long / non-ASCII / concurrent?"</span>
+  - <span class="hl">safety</span>:     <span class="st">"PII, secrets, destructive ops — all red-flagged?"</span>
+  - <span class="hl">rollback</span>:   <span class="st">"If this ships and breaks, can we undo in 60s?"</span></pre>
+    <div class="xw-footer"><span>Content · Code Block</span><span>05 / 08</span></div>
+  </section>
+
+  <!-- 6. CHART — SVG bar -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>岗位相对价值变化</div>
+      <div class="xw-page">06 / 08</div>
+    </div>
+    <h2 class="xw-title-md">越来越 <span class="xw-focus-pink">便宜</span>，越来越 <span class="xw-focus-green">贵</span></h2>
+    <svg viewBox="0 0 960 380" style="width:100%;max-width:1000px;margin-top:30px" xmlns="http://www.w3.org/2000/svg">
+      <g font-family="Inter, sans-serif" font-size="16" fill="#475467">
+        <!-- baseline -->
+        <line x1="180" y1="330" x2="940" y2="330" stroke="#eaecf3" stroke-width="2"/>
+        <!-- rows -->
+        <g transform="translate(0,40)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">纯执行</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#fff0f6"/>
+          <rect x="180" y="10" width="120" height="28" rx="14" fill="#ff5fa2"/>
+          <text x="710" y="30" fill="#c11574" font-weight="700">-65% 价值</text>
+        </g>
+        <g transform="translate(0,100)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">内容生产</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#eef4ff"/>
+          <rect x="180" y="10" width="200" height="28" rx="14" fill="#4e8cff"/>
+          <text x="710" y="30" fill="#174ea6" font-weight="700">-40% 价值</text>
+        </g>
+        <g transform="translate(0,160)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">数据分析</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#fff5ea"/>
+          <rect x="180" y="10" width="320" height="28" rx="14" fill="#ff9d42"/>
+          <text x="710" y="30" fill="#b54708" font-weight="700">持平</text>
+        </g>
+        <g transform="translate(0,220)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">测试 / 验收</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#edfdf3"/>
+          <rect x="180" y="10" width="440" height="28" rx="14" fill="#17b26a"/>
+          <text x="710" y="30" fill="#067647" font-weight="700">+85% 价值</text>
+        </g>
+        <g transform="translate(0,280)">
+          <text x="170" y="30" text-anchor="end" font-weight="700" fill="#111">安全 / 风控</text>
+          <rect x="180" y="10" width="520" height="28" rx="14" fill="#f4efff"/>
+          <rect x="180" y="10" width="500" height="28" rx="14" fill="#7b61ff"/>
+          <text x="710" y="30" fill="#5b21b6" font-weight="700">+110% 价值</text>
+        </g>
+      </g>
+    </svg>
+    <div class="xw-footer"><span>Chart · Horizontal Bars</span><span>06 / 08</span></div>
+  </section>
+
+  <!-- 7. CTA -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>今晚就可以做的三件事</div>
+      <div class="xw-page">07 / 08</div>
+    </div>
+    <h2 class="xw-title-md">别再追工具，<br>开始练 <span class="xw-grad">判断力</span></h2>
+    <div class="xw-grid-3">
+      <div class="xw-card soft-purple"><div class="xw-label">Tonight</div><div class="main">写一份<br>验收清单</div><div class="desc">哪怕只有 5 条，开始比完美更重要</div></div>
+      <div class="xw-card soft-blue"><div class="xw-label">This week</div><div class="main">跑一遍<br>红队演练</div><div class="desc">对自己的 agent 说：试着让它出事</div></div>
+      <div class="xw-card soft-green"><div class="xw-label">This month</div><div class="main">加一条<br>回滚流程</div><div class="desc">60 秒内能撤销，你就敢把手放开</div></div>
+    </div>
+    <div class="xw-hero"><div class="xw-quote" style="font-size:32px">真正的稀缺，不是「会用 AI」，<br>而是 <span class="xw-focus">「敢为 AI 的结果签字」</span>。</div></div>
+    <div class="xw-footer"><span>CTA</span><span>07 / 08</span></div>
+  </section>
+
+  <!-- 8. THANKS -->
+  <section class="slide">
+    <div class="xw-topline"></div>
+    <div class="xw-topbar">
+      <div class="xw-tag"><span class="dot"></span>Thanks for reading</div>
+      <div class="xw-page">08 / 08</div>
+    </div>
+    <div style="margin-top:100px">
+      <div class="xw-big-stat xw-grad">谢谢<small> · thanks</small></div>
+      <p class="xw-sub" style="font-size:28px;margin-top:36px">如果你也在想这些问题，欢迎在评论里告诉我——<br>你最想让 AI 帮你做什么？你最不放心它做什么？</p>
+      <div style="margin-top:40px">
+        <span class="xw-pill">@lewis</span>
+        <span class="xw-pill">小红书 · 白底杂志风</span>
+        <span class="xw-pill">html-ppt · full-deck</span>
+      </div>
+    </div>
+    <div class="xw-footer"><span>End</span><span>08 / 08</span></div>
+  </section>
+
+</div>
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
diff --git a/templates/full-decks/xhs-white-editorial/style.css b/templates/full-decks/xhs-white-editorial/style.css
new file mode 100644
index 0000000..05e2c73
--- /dev/null
+++ b/templates/full-decks/xhs-white-editorial/style.css
@@ -0,0 +1,63 @@
+/* xhs-white-editorial — 白底杂志风 */
+.tpl-xhs-white-editorial{
+  --xw-bg:#ffffff;
+  --xw-ink:#111318;
+  --xw-ink2:#475467;
+  --xw-muted:#98a2b3;
+  --xw-line:#eaecf3;
+  --xw-purple:#7b61ff;
+  --xw-pink:#ff5fa2;
+  --xw-blue:#4e8cff;
+  --xw-green:#17b26a;
+  --xw-orange:#ff9d42;
+  --xw-soft-purple:#f4efff;
+  --xw-soft-pink:#fff0f6;
+  --xw-soft-blue:#eef4ff;
+  --xw-soft-green:#edfdf3;
+  --xw-soft-orange:#fff5ea;
+  background:var(--xw-bg);
+  color:var(--xw-ink);
+  font-family:'Inter','Noto Sans SC','PingFang SC',-apple-system,sans-serif;
+}
+.tpl-xhs-white-editorial .slide{background:#fff;padding:72px 88px}
+.tpl-xhs-white-editorial .xw-topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
+.tpl-xhs-white-editorial .xw-tag{display:inline-flex;align-items:center;gap:10px;padding:10px 18px;border:1px solid var(--xw-line);border-radius:999px;font-size:15px;color:var(--xw-ink2);background:#fff}
+.tpl-xhs-white-editorial .xw-tag .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(90deg,#7b61ff,#4e8cff,#17b26a,#ff9d42,#ff5fa2)}
+.tpl-xhs-white-editorial .xw-page{font-size:14px;color:var(--xw-muted);letter-spacing:.1em}
+.tpl-xhs-white-editorial .xw-kicker{font-size:18px;color:var(--xw-ink2);margin-top:6px;font-weight:500}
+.tpl-xhs-white-editorial .xw-title{font-size:84px;line-height:1.02;letter-spacing:-2px;font-weight:850;margin:18px 0 0;color:var(--xw-ink)}
+.tpl-xhs-white-editorial .xw-title-md{font-size:60px;line-height:1.05;letter-spacing:-1.5px;font-weight:800;margin:14px 0 0}
+.tpl-xhs-white-editorial .xw-grad{background:linear-gradient(90deg,#7b61ff 0%,#4e8cff 25%,#17b26a 48%,#ff9d42 72%,#ff5fa2 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
+.tpl-xhs-white-editorial .xw-sub{font-size:24px;line-height:1.45;color:#1f2937;margin-top:22px;max-width:900px}
+.tpl-xhs-white-editorial .xw-focus{display:inline-block;padding:6px 14px;border-radius:14px;background:#111318;color:#fff;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-blue{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-blue);color:#174ea6;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-pink{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-pink);color:#c11574;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-orange{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-orange);color:#b54708;font-weight:700}
+.tpl-xhs-white-editorial .xw-focus-green{display:inline-block;padding:6px 14px;border-radius:14px;background:var(--xw-soft-green);color:#067647;font-weight:700}
+.tpl-xhs-white-editorial .xw-hero{margin-top:28px;border:1px solid var(--xw-line);border-radius:28px;padding:30px 34px;background:linear-gradient(180deg,#fff 0%,#fcfcff 100%);box-shadow:0 18px 48px rgba(17,19,24,.08)}
+.tpl-xhs-white-editorial .xw-quote{font-size:38px;line-height:1.3;font-weight:800;letter-spacing:-.5px}
+.tpl-xhs-white-editorial .xw-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:22px}
+.tpl-xhs-white-editorial .xw-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-top:22px}
+.tpl-xhs-white-editorial .xw-card{border:1px solid var(--xw-line);border-radius:24px;padding:24px 26px;box-shadow:0 10px 24px rgba(17,19,24,.04);background:#fff}
+.tpl-xhs-white-editorial .xw-card.soft-purple{background:var(--xw-soft-purple)}
+.tpl-xhs-white-editorial .xw-card.soft-pink{background:var(--xw-soft-pink)}
+.tpl-xhs-white-editorial .xw-card.soft-blue{background:var(--xw-soft-blue)}
+.tpl-xhs-white-editorial .xw-card.soft-green{background:var(--xw-soft-green)}
+.tpl-xhs-white-editorial .xw-card.soft-orange{background:var(--xw-soft-orange)}
+.tpl-xhs-white-editorial .xw-label{font-size:14px;font-weight:800;opacity:.7;margin-bottom:10px;letter-spacing:.08em;text-transform:uppercase}
+.tpl-xhs-white-editorial .xw-card .main{font-size:28px;line-height:1.22;font-weight:850;letter-spacing:-.5px}
+.tpl-xhs-white-editorial .xw-card .desc{font-size:16px;line-height:1.5;color:#475467;margin-top:12px}
+.tpl-xhs-white-editorial .xw-steps{margin-top:18px}
+.tpl-xhs-white-editorial .xw-step{display:flex;gap:18px;align-items:flex-start;margin:16px 0}
+.tpl-xhs-white-editorial .xw-num{flex:0 0 48px;height:48px;border-radius:50%;background:#111318;color:#fff;display:grid;place-items:center;font-size:20px;font-weight:900}
+.tpl-xhs-white-editorial .xw-txt{font-size:22px;line-height:1.45;font-weight:700}
+.tpl-xhs-white-editorial .xw-codebox{background:#0f1117;color:#e4e2d8;border-radius:18px;padding:22px 26px;font-family:'JetBrains Mono',monospace;font-size:15px;line-height:1.75;margin-top:20px;border:1px solid #1f222c}
+.tpl-xhs-white-editorial .xw-codebox .cm{color:#6b6a62}
+.tpl-xhs-white-editorial .xw-codebox .kw{color:#c88f64}
+.tpl-xhs-white-editorial .xw-codebox .st{color:#a8c292}
+.tpl-xhs-white-editorial .xw-codebox .hl{color:#e9c58a;font-weight:600}
+.tpl-xhs-white-editorial .xw-footer{position:absolute;left:88px;right:88px;bottom:44px;display:flex;justify-content:space-between;align-items:flex-end;font-size:13px;color:var(--xw-muted)}
+.tpl-xhs-white-editorial .xw-topline{position:absolute;top:0;left:0;right:0;height:5px;background:linear-gradient(90deg,#6366f1,#8b5cf6,#a855f7,#ec4899,#f43f5e,#f97316,#eab308,#22c55e,#06b6d4,#6366f1)}
+.tpl-xhs-white-editorial .xw-pill{display:inline-block;padding:8px 16px;border-radius:999px;font-size:14px;font-weight:700;margin:0 8px 8px 0;background:#fff;border:1px solid var(--xw-line);color:#394150}
+.tpl-xhs-white-editorial .xw-big-stat{font-size:96px;font-weight:900;letter-spacing:-4px;line-height:1}
+.tpl-xhs-white-editorial .xw-big-stat small{font-size:22px;color:var(--xw-muted);font-weight:700;letter-spacing:0;margin-left:6px}
diff --git a/templates/theme-showcase.html b/templates/theme-showcase.html
index 4373494..54f148a 100644
--- a/templates/theme-showcase.html
+++ b/templates/theme-showcase.html
@@ -1,82 +1,150 @@
 <!DOCTYPE html>
-<html lang="zh-CN" data-theme="minimal-white">
+<html lang="zh-CN">
 <head>
-<meta charset="utf-8"><title>Theme Showcase — html-ppt</title>
+<meta charset="utf-8"><title>Theme Showcase — html-ppt v2</title>
 <link rel="stylesheet" href="../assets/fonts.css">
 <link rel="stylesheet" href="../assets/base.css">
-<link rel="stylesheet" id="theme-link" href="../assets/themes/minimal-white.css">
 <link rel="stylesheet" href="../assets/animations/animations.css">
 <style>
-.swatch{display:flex;gap:10px;margin-top:14px}
-.swatch div{width:44px;height:44px;border-radius:10px;border:1px solid var(--border)}
-.tname{font-family:var(--font-mono);font-size:12px;color:var(--text-3);text-transform:uppercase;letter-spacing:.1em}
-.theme-indicator{position:absolute;top:24px;right:40px;font-family:var(--font-mono);font-size:11px;color:var(--text-3);letter-spacing:.1em}
+  /* NOTE: theme isolation via <iframe srcdoc> per slide. Each slide loads base.css
+     + its OWN theme.css, so pressing → actually shows a different look. */
+  html,body{background:#0b0c10;color:#e8ebf4}
+  .deck{background:#0b0c10}
+  .slide{padding:0;background:transparent}
+  .theme-frame{
+    position:absolute;inset:0;width:100%;height:100%;
+    border:0;background:#fff;
+  }
+  .theme-chrome{
+    position:absolute;top:22px;left:40px;right:40px;display:flex;justify-content:space-between;
+    font-family:'JetBrains Mono',monospace;font-size:12px;color:#aab0c0;letter-spacing:.12em;
+    text-transform:uppercase;z-index:20;pointer-events:none;mix-blend-mode:difference;
+  }
+  .theme-chrome .name{color:#fff;font-weight:700}
 </style>
 </head>
-<body data-themes="minimal-white,editorial-serif,soft-pastel,sharp-mono,arctic-cool,sunset-warm,catppuccin-latte,catppuccin-mocha,dracula,tokyo-night,nord,solarized-light,gruvbox-dark,rose-pine,neo-brutalism,glassmorphism,bauhaus,swiss-grid,terminal-green,xiaohongshu-white,rainbow-gradient,aurora,blueprint,memphis-pop" data-theme-base="../assets/themes/">
-<div class="deck">
-  <!-- 24 slides, one per theme. Click through; also press T to cycle the theme-link. -->
-</div>
+<body>
+<div class="deck"></div>
+
 <script>
-/* build slides dynamically so we don't hand-write 24 copies */
+/* 36 themes total (24 v1 + 12 v2). Each rendered in its OWN iframe so CSS is isolated. */
+const THEMES = [
+  ['minimal-white',      '极简白 · clean restraint'],
+  ['editorial-serif',    '杂志衬线 · high editorial'],
+  ['soft-pastel',        '马卡龙 · soft pastel'],
+  ['sharp-mono',         '黑白高对比 · sharp mono'],
+  ['arctic-cool',        '冷色调 · arctic'],
+  ['sunset-warm',        '暖色调 · sunset'],
+  ['catppuccin-latte',   'Catppuccin Latte'],
+  ['catppuccin-mocha',   'Catppuccin Mocha'],
+  ['dracula',            'Dracula'],
+  ['tokyo-night',        'Tokyo Night'],
+  ['nord',               'Nord · nordic cool'],
+  ['solarized-light',    'Solarized Light'],
+  ['gruvbox-dark',       'Gruvbox Dark'],
+  ['rose-pine',          'Rose Pine'],
+  ['neo-brutalism',      'Neo-Brutalism'],
+  ['glassmorphism',      'Glassmorphism'],
+  ['bauhaus',            'Bauhaus 几何原色'],
+  ['swiss-grid',         'Swiss Grid'],
+  ['terminal-green',     'Terminal Green'],
+  ['xiaohongshu-white',  '小红书白底'],
+  ['rainbow-gradient',   'Rainbow Gradient'],
+  ['aurora',             'Aurora 极光'],
+  ['blueprint',          'Blueprint 蓝图'],
+  ['memphis-pop',        'Memphis Pop'],
+  /* v2 additions */
+  ['cyberpunk-neon',     'Cyberpunk Neon 霓虹'],
+  ['y2k-chrome',         'Y2K Chrome 镜面'],
+  ['retro-tv',           'Retro TV CRT 扫描线'],
+  ['japanese-minimal',   '和风极简 · 朱红'],
+  ['vaporwave',          'Vaporwave 蒸汽波'],
+  ['midcentury',         'Mid-Century Modern'],
+  ['corporate-clean',    'Corporate Clean 商务'],
+  ['academic-paper',     '学术白皮书'],
+  ['news-broadcast',     'News Broadcast 新闻'],
+  ['pitch-deck-vc',      'Pitch Deck VC / YC'],
+  ['magazine-bold',      'Magazine Bold 大字杂志'],
+  ['engineering-whiteprint','Engineering Whiteprint']
+];
+
+/* The demo content that each iframe will render. Uses tokens only, so it picks up
+   whatever theme the iframe loads. Self-contained — no external references. */
+function demoHTML(themeName, label){
+  return `<!doctype html><html><head><meta charset="utf-8">
+<link rel="stylesheet" href="../assets/fonts.css">
+<link rel="stylesheet" href="../assets/base.css">
+<link rel="stylesheet" href="../assets/themes/${themeName}.css">
+<link rel="stylesheet" href="../assets/animations/animations.css">
+<style>
+  html,body{height:100%}
+  .wrap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
+       padding:72px 96px;box-sizing:border-box;background:var(--bg);color:var(--text-1);
+       font-family:var(--font-sans)}
+  .swatch{display:flex;gap:10px;margin-top:18px}
+  .swatch div{width:44px;height:44px;border-radius:10px;border:1px solid var(--border)}
+  .kpi{font-size:54px;font-weight:800;letter-spacing:-.02em}
+  .mini-code{font-family:var(--font-mono);font-size:11px;background:var(--surface-2);
+    padding:10px 12px;border-radius:8px;margin:6px 0 0;white-space:pre;color:var(--text-1);
+    border:1px solid var(--border)}
+</style>
+</head><body><div class="wrap">
+  <p class="kicker">Theme · ${themeName}</p>
+  <h1 class="h1">${label}</h1>
+  <p class="lede">Same demo slide, different tokens. Background, type, accent, radius, shadow all come from <code>assets/themes/${themeName}.css</code>.</p>
+  <div class="grid g3 mt-l">
+    <div class="card">
+      <h4>Palette · 调色盘</h4>
+      <p class="dim">accent / accent-2 / accent-3 / text / surface-2</p>
+      <div class="swatch">
+        <div style="background:var(--accent)"></div>
+        <div style="background:var(--accent-2)"></div>
+        <div style="background:var(--accent-3)"></div>
+        <div style="background:var(--text-1)"></div>
+        <div style="background:var(--surface-2)"></div>
+      </div>
+    </div>
+    <div class="card">
+      <h4>KPI</h4>
+      <div class="kpi gradient-text">2.4K</div>
+      <p class="dim">上周月活 · weekly active</p>
+    </div>
+    <div class="card">
+      <h4>Code · 令牌</h4>
+      <pre class="mini-code">:root {
+  --accent: /* theme */;
+  --radius: /* theme */;
+}</pre>
+    </div>
+  </div>
+  <div class="row mt-m" style="gap:10px;flex-wrap:wrap">
+    <span class="pill">#tokens</span>
+    <span class="pill pill-accent">primary</span>
+    <span class="pill">#radius</span>
+    <span class="pill">#shadow</span>
+    <span class="pill">#type</span>
+  </div>
+</div></body></html>`;
+}
+
 (function(){
-  const themes = [
-    ['minimal-white','极简白，克制高级','Inter'],
-    ['editorial-serif','杂志风衬线，高级','Playfair'],
-    ['soft-pastel','柔和马卡龙','Inter'],
-    ['sharp-mono','锐利黑白高对比','Archivo Black'],
-    ['arctic-cool','冷色调 蓝/青/石板灰','Inter'],
-    ['sunset-warm','暖色调 橘/珊瑚/琥珀','Inter'],
-    ['catppuccin-latte','catppuccin 浅','Inter'],
-    ['catppuccin-mocha','catppuccin 深','Inter'],
-    ['dracula','Dracula 经典暗紫','Inter'],
-    ['tokyo-night','Tokyo Night 蓝夜','Inter'],
-    ['nord','Nord 北欧清冷','Inter'],
-    ['solarized-light','Solarized Light','Inter'],
-    ['gruvbox-dark','Gruvbox 温暖复古','Inter'],
-    ['rose-pine','Rose Pine 玫瑰松','Inter'],
-    ['neo-brutalism','厚描边，硬阴影，明黄','Space Grotesk'],
-    ['glassmorphism','毛玻璃质感','Inter'],
-    ['bauhaus','几何+原色','Space Grotesk'],
-    ['swiss-grid','瑞士网格，Helvetica','Helvetica'],
-    ['terminal-green','绿屏终端','JetBrains Mono'],
-    ['xiaohongshu-white','小红书白底高级感','Noto Serif SC'],
-    ['rainbow-gradient','彩虹渐变点缀','Inter'],
-    ['aurora','极光渐变','Inter'],
-    ['blueprint','蓝图工程','JetBrains Mono'],
-    ['memphis-pop','孟菲斯波普','Archivo Black']
-  ];
   const deck = document.querySelector('.deck');
-  themes.forEach((t,i)=>{
+  THEMES.forEach((t,i)=>{
     const s = document.createElement('section');
     s.className = 'slide';
     s.setAttribute('data-title', t[0]);
-    s.innerHTML = `
-      <span class="theme-indicator">${i+1}/${themes.length} · ${t[0]}</span>
-      <p class="kicker">Theme · ${String(i+1).padStart(2,'0')}</p>
-      <h1 class="h1 anim-fade-up" data-anim="fade-up">${t[0]}</h1>
-      <p class="lede">${t[1]} · ${t[2]}</p>
-      <div class="grid g3 mt-l anim-stagger-list" data-anim-target>
-        <div class="card"><h4>Card · 卡片</h4><p class="dim">背景 / 边框 / 阴影 全部走 tokens。</p>
-          <div class="swatch"><div style="background:var(--accent)"></div><div style="background:var(--accent-2)"></div><div style="background:var(--accent-3)"></div><div style="background:var(--text-1)"></div><div style="background:var(--surface-2)"></div></div>
-        </div>
-        <div class="card"><h4>KPI</h4><div style="font-size:48px;font-weight:800" class="gradient-text">2.4K</div><p class="dim">上周月活</p></div>
-        <div class="card"><h4>Code</h4><pre class="mono" style="font-size:11px;background:var(--surface-2);padding:10px;border-radius:8px;margin:6px 0 0">:root {
-  --accent: #3b6cff;
-}</pre></div>
-      </div>
-      <div class="row mt-m" style="gap:10px;flex-wrap:wrap">
-        <span class="pill">#tokens</span>
-        <span class="pill pill-accent">primary</span>
-        <span class="pill">#radius</span>
-        <span class="pill">#shadow</span>
-      </div>
-      <div class="deck-footer"><span class="tname">theme</span><span class="slide-number" data-current="${i+1}" data-total="${themes.length}"></span></div>
-      <div class="notes">按 <b>T</b> 继续循环主题。这张 slide 的内容没有任何变化——变的只是 tokens。</div>
-    `;
+    const chrome = `<div class="theme-chrome"><span class="name">${String(i+1).padStart(2,'0')} · ${t[0]}</span><span>${i+1}/${THEMES.length}</span></div>`;
+    const iframe = document.createElement('iframe');
+    iframe.className = 'theme-frame';
+    iframe.setAttribute('loading','eager');
+    // Use src via data URL for the inline demo HTML so relative paths still resolve from the templates/ dir.
+    // Easier: use srcdoc but set <base href> to the templates dir so relative ../assets paths work.
+    const base = `<base href="${location.href}">`;
+    iframe.srcdoc = demoHTML(t[0], t[1]).replace('<head>','<head>'+base);
+    s.innerHTML = chrome;
+    s.appendChild(iframe);
     deck.appendChild(s);
   });
-  // activate matching theme for each slide load - we rely on T cycling + data-themes
 })();
 </script>
 <script src="../assets/runtime.js"></script>