first-commit

2026-05-04 14:58:14 -04:00
commit a46764fb1b
1210 changed files with 233231 additions and 0 deletions
@@ -0,0 +1,102 @@
+# presenter-mode-reveal · 演讲者模式模板
+
+一份专为**带逐字稿的技术分享**设计的 full-deck 模板。核心卖点是真正可用的**磁吸卡片式演讲者视图**：当前页 iframe 预览 + 下页 iframe 预览 + 大字号逐字稿 + 计时器，4 个卡片可任意拖拽/缩放，全部集成在 `runtime.js` 里，零依赖。
+
+## 使用场景
+
+- 技术分享 / tech talk（30-60 min）
+- 产品发布会主讲
+- 课程讲授
+- 任何**需要照着讲、但不能念稿**的正式演讲
+
+## 快速开始
+
+```bash
+cp -r templates/full-decks/presenter-mode-reveal examples/my-talk
+open examples/my-talk/index.html
+```
+
+## 键盘操作
+
+| 键 | 动作 |
+|---|---|
+| `S` | 打开演讲者窗口（弹出新窗口，原页面不动） |
+| `T` | 切换主题（5 种预设） |
+| `←` `→` | 翻页 |
+| `Space` / `PgDn` | 下一页 |
+| `F` | 全屏 |
+| `O` | 总览缩略图 |
+| `R` | 重置计时器（仅演讲者视图下） |
+| `Esc` | 关闭所有浮层 |
+
+## 主题切换
+
+模板预设了 5 个适配演讲场景的主题，在 `<html data-themes="...">` 属性里：
+
+```html
+<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">
+```
+
+按 `T` 循环切换。可以改成任何 `assets/themes/*.css` 里的主题。
+
+## 写逐字稿的规范
+
+**每一页的 `<aside class="notes">` 里写 150–300 字**。三条铁律：
+
+1. **不是讲稿，是提示信号** — 核心点加粗、过渡句成段、数据列清楚
+2. **150–300 字/页** — 按 2–3 分钟/页的节奏
+3. **用口语写** — "因此" → "所以"；"该方案" → "这个方案"；读一遍不拗口才对
+
+示例：
+```html
+<aside class="notes">
+  <p>大家好，今天跟大家聊一个 <strong>很多人忽略的问题</strong>——...</p>
+  <p>我先抛一个观点：<em>做 PPT 和讲 PPT 是两件事</em>。</p>
+  <p>接下来我会用 3 个例子证明这个观点...</p>
+</aside>
+```
+
+支持的 inline 标签：
+- `<strong>` — 高亮（橘色）
+- `<em>` — 斜体强调（蓝色）
+- `<code>` — 等宽字体
+- `<p>` — 分段（推荐每段讲 30-60 秒的内容）
+
+## 文件结构
+
+```
+presenter-mode-reveal/
+├── index.html       # 6 张示例 slide，每页都有完整逐字稿
+├── style.css        # scoped .tpl-presenter-mode-reveal 样式
+└── README.md        # 本文件
+```
+
+## 修改 / 扩展
+
+- **加页**：复制任意 `<section class="slide">` 块，改内容和 `<aside class="notes">`
+- **换主题**：改 `data-themes` 列表，或直接改 `<link id="theme-link" href="...">`
+- **改样式**：只动 `style.css`，不要碰根目录的 `assets/base.css`
+- **加动效**：在元素上加 `data-anim="fade-up"` 等（参考 `references/animations.md`）
+
+## 演讲者窗口的 4 个卡片
+
+按 `S` 后弹出的窗口里有：
+
+- 🔵 **CURRENT** — 当前页 iframe 预览（加载 `?preview=N` 模式，像素级完美，与观众端同 CSS/主题/字体）
+- 🟣 **NEXT** — 下一页预览，帮助准备过渡
+- 🟠 **SPEAKER SCRIPT** — 大字号逐字稿，可滚动
+- 🟢 **TIMER** — 经过时间 + 页码 + Prev/Next/Reset 按钮
+
+卡片操作：
+- **拖卡片头**（彩色圆点 + 标题的顶部条）→ 移动卡片
+- **拖卡片右下角** → 调整大小
+- 位置 + 尺寸自动存 localStorage，下次打开恢复
+- 底部 "重置布局" 按钮可恢复默认卡片排列
+
+翻页丝滑：iframe 只加载一次，后续翻页通过 `postMessage` 切换内部 slide，**不重新加载不闪烁**。两窗口通过 `BroadcastChannel` 双向同步。
+
+## 注意事项
+
+- **观众永远看不到 `.notes` 内容** — CSS 默认 `display:none`，只在演讲者视图里可见
+- **别把只给自己看的话写在 slide 本体上** — 所有提词必须在 `<aside class="notes">` 里
+- **双屏演讲**：打开 `index.html` 按 S 弹出演讲者窗口，把观众窗口拖到投影/外接屏 F 全屏，演讲者窗口留在自己屏幕
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html lang="zh-CN" data-themes="tokyo-night,dracula,catppuccin-mocha,nord,corporate-clean">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>演讲者模式示例 · Presenter Mode Deck</title>
+<link rel="stylesheet" href="../../../assets/fonts.css">
+<link rel="stylesheet" href="../../../assets/base.css">
+<link rel="stylesheet" id="theme-link" href="../../../assets/themes/tokyo-night.css">
+<link rel="stylesheet" href="../../../assets/animations/animations.css">
+<link rel="stylesheet" href="style.css">
+</head>
+<body class="tpl-presenter-mode-reveal">
+<div class="deck">
+
+  <!-- ============ 1. COVER ============ -->
+  <section class="slide" data-title="Cover">
+    <p class="kicker">presenter-mode / demo</p>
+    <h1 class="h1 anim-fade-up" data-anim="fade-up">如何做一场<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">S</span> 进入演讲者视图 · <span class="mono">T</span> 切换主题 · <span class="mono">← →</span> 翻页</p>
+    <div class="speaker">
+      <div class="av"></div>
+      <div><b>@lewis</b><span>sharing talk · 30 min</span></div>
+    </div>
+    <div class="deck-footer">
+      <span class="mono">#presenter #逐字稿 #tech-talk</span>
+      <span class="slide-number" data-current="1" data-total="6"></span>
+    </div>
+    <aside class="notes">
+      <p>大家好，欢迎来到今天的技术分享。我是 lewis，今天想跟大家聊一个很多人忽略但其实非常影响演讲效果的话题——<strong>如何让一场技术分享既有深度，又讲得不卡壳</strong>。</p>
+      <p>在正式开始之前，先跟大家介绍一下这份 deck 本身：这是一个支持<em>演讲者模式</em>的 HTML 幻灯片模板。现在你们看到的是观众视图，但我自己的屏幕上看到的是完全不一样的东西——当前页、下一页、完整逐字稿、计时器，全在一块屏幕上。</p>
+      <p>为什么我要专门做这个？因为我发现自己做技术分享时最大的痛点不是 PPT 不够好看，而是<strong>讲到某一页突然不知道该说什么，或者忘了过渡怎么接</strong>。今天这份分享既是内容本身，也是个演示——我会一直开着演讲者模式讲，你们可以观察我讲得有多流畅。</p>
+      <p>今天分享大概 30 分钟，分 5 个部分。有问题随时打断。Let's go.</p>
+    </aside>
+  </section>
+
+  <!-- ============ 2. AGENDA ============ -->
+  <section class="slide" data-title="Agenda">
+    <p class="kicker">agenda</p>
+    <h2 class="h2">今天要讲的 5 件事</h2>
+    <div class="stack mt-l">
+      <div class="agenda-row"><span class="num">01</span><span class="t">为什么 PPT 本身做得好还不够</span><span class="d">~5min</span></div>
+      <div class="agenda-row"><span class="num">02</span><span class="t">演讲者模式到底该有哪些信息</span><span class="d">~6min</span></div>
+      <div class="agenda-row"><span class="num">03</span><span class="t">逐字稿怎么写才不像念稿</span><span class="d">~8min</span></div>
+      <div class="agenda-row"><span class="num">04</span><span class="t">Live demo · html-ppt skill 怎么用</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">~3min</span></div>
+    </div>
+    <aside class="notes">
+      <p>先过一下今天的议程。</p>
+      <p>第一部分我想先说服你们<strong>"PPT 做得漂亮≠讲得好"</strong>。我见过太多很精致的 deck，但讲的人一上去就开始 "嗯…这个…就是…"。</p>
+      <p>第二部分聊演讲者视图。业界的产品其实差别蛮大的，Keynote、PowerPoint、reveal.js 都有各自的方案，但真正好用的设计逻辑是什么，我会给出我的答案。</p>
+      <p>第三部分是今天的<em>核心</em>——逐字稿。很多人以为逐字稿就是把要说的话一字不差写下来，错。逐字稿的目的是让你<strong>"看一眼就接得上"</strong>，写法完全不一样。</p>
+      <p>第四部分会现场 demo 我自己用的 html-ppt skill，展示如何 30 分钟出一份带逐字稿的 deck。</p>
+      <p>最后收尾 + 答疑。</p>
+      <p>OK，进入第一部分。</p>
+    </aside>
+  </section>
+
+  <!-- ============ 3. PROBLEM ============ -->
+  <section class="slide" data-title="Problem">
+    <p class="kicker">// part 01 · problem</p>
+    <h2 class="h2">做 PPT 和讲 PPT，<br>是<span class="accent">两件事</span>。</h2>
+    <div class="grid g3 mt-l">
+      <div class="card card-accent">
+        <h4>✅ PPT 做得好</h4>
+        <p class="dim">主题统一、排版干净、图表清晰、动效克制。这些是"静态作品"的质量。</p>
+      </div>
+      <div class="card card-accent">
+        <h4>❌ 讲得好</h4>
+        <p class="dim">逻辑连贯、语速稳定、不 "嗯啊"、能接住问题、能当场调整节奏。</p>
+      </div>
+      <div class="card card-accent">
+        <h4>💡 差别在哪</h4>
+        <p class="dim">前者是<strong>纸上功夫</strong>，后者需要你<strong>"看一眼幻灯片就知道下句话说什么"</strong>。</p>
+      </div>
+    </div>
+    <aside class="notes">
+      <p>我先抛一个可能有争议的观点——<strong>做 PPT 和讲 PPT 是两件完全不同的事</strong>。</p>
+      <p>大家看左边这张卡片，"PPT 做得好" 意味着什么？主题统一、排版干净、图表清晰、动效克制——这些都是<em>静态作品</em>的质量标准，可以离线评判。</p>
+      <p>但中间这张卡片就不一样了："讲得好" 意味着逻辑连贯、语速稳定、不卡壳、能接住提问、能根据现场反应调整节奏——这些是<strong>临场能力</strong>，跟 PPT 好不好看基本没关系。</p>
+      <p>最关键的是右边这句话——讲得好的人，本质上是"<strong>看一眼幻灯片就知道下句话说什么</strong>"。这个能力靠什么？不是背稿，也不是即兴发挥，而是靠<em>合理设计的提词器系统</em>。</p>
+      <p>今天接下来 25 分钟，我就是围绕这个核心问题展开的。</p>
+    </aside>
+  </section>
+
+  <!-- ============ 4. SOLUTION ============ -->
+  <section class="slide" data-title="Presenter View">
+    <p class="kicker">// part 02 · presenter view</p>
+    <h2 class="h2">演讲者视图应该有<span class="accent">四块信息</span></h2>
+    <div class="grid g2 mt-l">
+      <div>
+        <div class="feature-row"><span class="num blue">①</span><div><b>当前页大图</b><p class="dim">占视图一半以上，保证你能扫一眼就知道观众现在看到什么。</p></div></div>
+        <div class="feature-row"><span class="num green">②</span><div><b>下一页预览</b><p class="dim">帮你提前准备过渡句，避免"下一页我忘了讲什么了"。</p></div></div>
+      </div>
+      <div>
+        <div class="feature-row"><span class="num orange">③</span><div><b>逐字稿区域</b><p class="dim">大字号、高对比度、支持滚动，这才是演讲者真正在看的东西。</p></div></div>
+        <div class="feature-row"><span class="num purple">④</span><div><b>计时器 + 页码</b><p class="dim">知道自己讲了多久、还剩几页，节奏全凭这个。</p></div></div>
+      </div>
+    </div>
+    <aside class="notes">
+      <p>演讲者模式应该给你四块信息。我按重要性排序。</p>
+      <p>第一块，<strong>当前页大图</strong>。这个必须占据视图一半以上空间，因为它是你跟观众的"同步锚"——观众看到什么，你脑子里也得是什么。</p>
+      <p>第二块，<strong>下一页预览</strong>。这个很多人不理解为什么要放，我解释一下：演讲最卡的瞬间不是讲某一页，而是<em>翻到下一页的那 2 秒</em>。如果你提前看到下一页长什么样，过渡句自然就有了。</p>
+      <p>第三块，<strong>逐字稿区域</strong>——这是今天的重点，下一部分我会专门讲。这里先说一个硬性要求：字号必须大、对比度必须高、必须能滚动。因为你讲的时候<em>只有余光瞄一下</em>，字小了根本来不及读。</p>
+      <p>第四块，<strong>计时器和页码</strong>。知道自己讲了多久、还剩几页——节奏感全靠它。Keynote 做得最好，reveal.js 默认不够清楚。</p>
+      <p>这四块缺一不可。今天这个 deck 我把这四块都做出来了，按 S 大家可以试试。</p>
+    </aside>
+  </section>
+
+  <!-- ============ 5. SCRIPT ============ -->
+  <section class="slide" data-title="Script">
+    <p class="kicker">// part 03 · script</p>
+    <h2 class="h2">逐字稿的<span class="accent">3 条铁律</span></h2>
+    <div class="stack mt-l">
+      <div class="rule-row">
+        <span class="num red">01</span>
+        <div>
+          <b>不是一字不差的讲稿，是<span class="accent">"提示信号"</span></b>
+          <p class="dim">把要讲的核心点加粗，把过渡句单独成段，把数据和名字列清楚——<em>让你看一眼就接得上</em>。</p>
+        </div>
+      </div>
+      <div class="rule-row">
+        <span class="num red">02</span>
+        <div>
+          <b>每页 <span class="accent">150–300 字</span>，不多不少</b>
+          <p class="dim">少于 150 字提示不够，多于 300 字你没时间读。按 2–3 分钟/页的节奏控制。</p>
+        </div>
+      </div>
+      <div class="rule-row">
+        <span class="num red">03</span>
+        <div>
+          <b>用<span class="accent">口语</span>写，不用书面语</b>
+          <p class="dim">"因此" → "所以"；"该方案" → "这个方案"。写的时候读一遍，听起来像说话才对。</p>
+        </div>
+      </div>
+    </div>
+    <aside class="notes">
+      <p>进入最核心的一部分——逐字稿怎么写。我总结了 3 条铁律。</p>
+      <p><strong>第一条，逐字稿不是讲稿</strong>。很多人一听"逐字稿"就以为要把每句话一字不差写下来。错。如果你照着稿念，观众会立刻看出来，信任感瞬间崩塌。</p>
+      <p>逐字稿的真实作用是<em>"提示信号"</em>——把核心要点加粗，把过渡句单独成段，把数据和专有名词列清楚。这样你讲的时候<strong>瞄一眼就能接得上</strong>，但说出来的还是你自己的话。</p>
+      <p><strong>第二条，每页控制在 150 到 300 字</strong>。这个是我做了十几场分享摸出来的经验值。少于 150 字提示不够，讲到一半卡住；多于 300 字你根本来不及扫完。按一页讲 2 到 3 分钟算，这个字数刚好。</p>
+      <p><strong>第三条，用口语写</strong>。这条最多人栽跟头。你写"因此"，讲出来会变成"所以"；你写"该方案"，讲出来会变成"这个方案"。<em>写的时候读一遍</em>，不拗口才对。</p>
+      <p>这三条配合起来，你会发现讲 PPT 突然变成了一件很舒服的事。</p>
+    </aside>
+  </section>
+
+  <!-- ============ 6. DEMO + CLOSING ============ -->
+  <section class="slide" data-title="Demo & Close">
+    <p class="kicker">// part 04-05 · demo + close</p>
+    <h2 class="h2">现在<span class="accent">你也能做到</span></h2>
+    <div class="code-block mt-m">
+<span class="comment"># 安装 html-ppt skill</span>
+<span class="cmd">npx</span> skills add <span class="flag">https://github.com/lewislulu/html-ppt-skill</span>
+
+<span class="comment"># 复制演讲者模式模板</span>
+<span class="cmd">cp -r</span> templates/full-decks/presenter-mode-reveal examples/my-talk
+<span class="cmd">open</span> examples/my-talk/index.html
+
+<span class="comment"># 键盘操作</span>
+<span class="flag">S</span>  <span class="comment">→ 进入演讲者视图</span>
+<span class="flag">T</span>  <span class="comment">→ 切换主题（5 种预设）</span>
+<span class="flag">← →</span> <span class="comment">→ 翻页</span>
+<span class="flag">R</span>  <span class="comment">→ 重置计时器</span>
+    </div>
+    <p class="lede mt-m tc">关键是：<strong>每一页 &lt;aside class="notes"&gt; 里写 150–300 字逐字稿</strong>。</p>
+    <div class="deck-footer">
+      <span class="mono">#thanks · Q&amp;A</span>
+      <span class="slide-number" data-current="6" data-total="6"></span>
+    </div>
+    <aside class="notes">
+      <p>最后我演示一下这个 skill 怎么用，给大家省点时间自己摸索。</p>
+      <p>第一步，装 html-ppt skill，一行命令。第二步，把我这个 <code>presenter-mode-reveal</code> 模板复制到你自己的 examples 目录。第三步，打开 html，按 S。</p>
+      <p>键盘操作我列在这里了。<strong>S 进入演讲者视图、T 切换主题、左右键翻页、R 重置计时器</strong>。主题默认带 5 个——tokyo-night、dracula、catppuccin-mocha、nord、corporate-clean——基本覆盖了深色技术分享、浅色商务汇报两种常见场景。</p>
+      <p>最关键的一步——<em>每一页底部的 <code>&lt;aside class="notes"&gt;</code> 里，老老实实写 150 到 300 字的逐字稿</em>。这是整个方法论的交付物。AI 可以帮你写初稿，但你一定要自己过一遍，读出来听听是不是你会说的话。</p>
+      <p>好，我今天就讲到这里。如果你做下一场分享的时候想起了这个"演讲者视图 + 逐字稿"的组合，并且觉得讲得比以前顺——那就是我最大的收获。谢谢大家，有问题现在开始。</p>
+    </aside>
+  </section>
+
+</div>
+
+<div style="position:fixed;bottom:12px;left:12px;font-size:11px;color:#484f5866;z-index:100;pointer-events:none">
+  S 演讲者视图 · T 切换主题 · ← → 翻页 · F 全屏 · O 总览 · R 重置计时
+</div>
+
+<script src="../../../assets/runtime.js"></script>
+</body>
+</html>
@@ -0,0 +1,216 @@
+/* tpl-presenter-mode-reveal · scoped styles
+ * Presenter-mode demo deck. Inherits tokens from active theme.
+ * Minimal overrides — focus is on content + notes structure.
+ */
+
+.tpl-presenter-mode-reveal .slide {
+  padding: 72px 96px;
+}
+
+.tpl-presenter-mode-reveal .kicker {
+  font-family: var(--font-mono, monospace);
+  font-size: 13px;
+  color: var(--text-3);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  margin: 0 0 18px 0;
+}
+
+.tpl-presenter-mode-reveal .h1 {
+  font-size: clamp(44px, 5.6vw, 76px);
+  line-height: 1.12;
+  letter-spacing: -0.02em;
+  margin: 0 0 24px 0;
+}
+
+.tpl-presenter-mode-reveal .h2 {
+  font-size: clamp(32px, 3.6vw, 48px);
+  line-height: 1.22;
+  letter-spacing: -0.01em;
+  margin: 0 0 28px 0;
+}
+
+.tpl-presenter-mode-reveal .lede {
+  font-size: 20px;
+  line-height: 1.55;
+  color: var(--text-2);
+}
+
+.tpl-presenter-mode-reveal .mono {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.9em;
+  padding: 2px 8px;
+  border-radius: 6px;
+  background: rgba(255,255,255,0.08);
+  color: var(--accent, #58a6ff);
+}
+
+.tpl-presenter-mode-reveal .accent {
+  color: var(--accent, #f0883e);
+  font-weight: 700;
+}
+
+.tpl-presenter-mode-reveal .speaker {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 32px;
+}
+.tpl-presenter-mode-reveal .speaker .av {
+  width: 42px;
+  height: 42px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--accent, #58a6ff), #bc8cff);
+}
+.tpl-presenter-mode-reveal .speaker b {
+  display: block;
+  font-size: 16px;
+}
+.tpl-presenter-mode-reveal .speaker span {
+  font-size: 13px;
+  color: var(--text-3);
+}
+
+/* Agenda rows */
+.tpl-presenter-mode-reveal .agenda-row {
+  display: grid;
+  grid-template-columns: 48px 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 14px 18px;
+  border: 1px solid var(--border, rgba(255,255,255,0.1));
+  border-radius: 10px;
+  margin-bottom: 10px;
+  background: var(--surface, rgba(255,255,255,0.03));
+}
+.tpl-presenter-mode-reveal .agenda-row .num {
+  font-family: var(--font-mono, monospace);
+  font-size: 14px;
+  color: var(--accent, #58a6ff);
+  font-weight: 700;
+}
+.tpl-presenter-mode-reveal .agenda-row .t {
+  font-size: 17px;
+  font-weight: 500;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .agenda-row .d {
+  font-family: var(--font-mono, monospace);
+  font-size: 12px;
+  color: var(--text-3);
+}
+
+/* Cards */
+.tpl-presenter-mode-reveal .card {
+  background: var(--surface, rgba(255,255,255,0.03));
+  border: 1px solid var(--border, rgba(255,255,255,0.1));
+  border-radius: 12px;
+  padding: 22px 24px;
+}
+.tpl-presenter-mode-reveal .card-accent {
+  border-top: 3px solid var(--accent, #58a6ff);
+}
+.tpl-presenter-mode-reveal .card h4 {
+  margin: 0 0 10px 0;
+  font-size: 18px;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .card .dim {
+  color: var(--text-2);
+  font-size: 14px;
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* Feature rows (presenter view features) */
+.tpl-presenter-mode-reveal .feature-row {
+  display: flex;
+  gap: 14px;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
+}
+.tpl-presenter-mode-reveal .feature-row:last-child { border-bottom: none; }
+.tpl-presenter-mode-reveal .feature-row .num {
+  font-size: 24px;
+  font-weight: 700;
+  line-height: 1;
+  flex-shrink: 0;
+}
+.tpl-presenter-mode-reveal .feature-row b {
+  display: block;
+  font-size: 17px;
+  margin-bottom: 4px;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .feature-row .dim {
+  font-size: 14px;
+  color: var(--text-2);
+  line-height: 1.55;
+  margin: 0;
+}
+.tpl-presenter-mode-reveal .blue { color: #58a6ff; }
+.tpl-presenter-mode-reveal .green { color: #3fb950; }
+.tpl-presenter-mode-reveal .orange { color: #f0883e; }
+.tpl-presenter-mode-reveal .purple { color: #bc8cff; }
+.tpl-presenter-mode-reveal .red { color: #f85149; }
+
+/* Rule rows (3 铁律) */
+.tpl-presenter-mode-reveal .rule-row {
+  display: grid;
+  grid-template-columns: 56px 1fr;
+  gap: 20px;
+  align-items: start;
+  padding: 18px 22px;
+  border: 1px solid var(--border, rgba(255,255,255,0.1));
+  border-radius: 12px;
+  margin-bottom: 14px;
+  background: var(--surface, rgba(255,255,255,0.03));
+}
+.tpl-presenter-mode-reveal .rule-row .num {
+  font-size: 28px;
+  font-weight: 800;
+  font-family: var(--font-mono, monospace);
+  line-height: 1;
+}
+.tpl-presenter-mode-reveal .rule-row b {
+  display: block;
+  font-size: 18px;
+  margin-bottom: 6px;
+  color: var(--text-1);
+}
+.tpl-presenter-mode-reveal .rule-row .dim {
+  font-size: 15px;
+  color: var(--text-2);
+  line-height: 1.6;
+  margin: 0;
+}
+
+/* Code block */
+.tpl-presenter-mode-reveal .code-block {
+  background: #0d1117;
+  border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 12px;
+  padding: 20px 26px;
+  font-family: var(--font-mono, "SF Mono", monospace);
+  font-size: 15px;
+  line-height: 1.8;
+  color: #e6edf3;
+  white-space: pre-wrap;
+  text-align: left;
+}
+.tpl-presenter-mode-reveal .code-block .comment { color: #8b949e; }
+.tpl-presenter-mode-reveal .code-block .cmd { color: #3fb950; font-weight: 600; }
+.tpl-presenter-mode-reveal .code-block .flag { color: #f0883e; }
+
+/* Stack helper */
+.tpl-presenter-mode-reveal .stack > * + * { margin-top: 0; }
+
+/* Grid helpers */
+.tpl-presenter-mode-reveal .grid { display: grid; gap: 20px; }
+.tpl-presenter-mode-reveal .grid.g2 { grid-template-columns: 1fr 1fr; }
+.tpl-presenter-mode-reveal .grid.g3 { grid-template-columns: repeat(3, 1fr); }
+
+.tpl-presenter-mode-reveal .mt-m { margin-top: 20px; }
+.tpl-presenter-mode-reveal .mt-l { margin-top: 32px; }
+.tpl-presenter-mode-reveal .mt-s { margin-top: 10px; }
+.tpl-presenter-mode-reveal .tc { text-align: center; }