solana-clock: 竖屏改为普通构图 + 4:3/3:4 封面

README.md

@@ -21,12 +21,13 @@ pinned: false
 |---|------|------|
 | 1 | 写计划 / 大纲 / 步骤（本节） | ✅ 完成 |
 | 2 | 旁白文案定稿（15 场景 / 72 句）+ TTS 配音（纯语音 370 秒）+ 时长清单 + SOL 真实价格数据（2372 个日线点） | ✅ 完成 |
-| 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 双布局 + 烧录字幕 + 安全区）+ 播放器页面 + 字体子集；无头浏览器 90 帧截图 + 逐 0.5 秒排版检查通过 | ✅ 完成 |
+| 3 | 动画引擎 + 全部场景（横屏 16:9 / 竖屏 9:16 双布局 + 烧录字幕）+ 播放器页面 + 字体子集；无头浏览器 90 帧截图 + 逐 0.5 秒排版检查通过 | ✅ 完成 |
 | 4 | 程序化音乐（15 段编曲：和弦垫 / 贝斯 / 琶音 / 鼓 / 时钟滴答）+ 57 种合成音效（258 个触发点）+ 旁白闪避混音 + 混响 + 限幅；按场景分段渲染，约 3 秒即可出声 | ✅ 完成 |
-| 5 | 播放器 UI（章节跳转 / 拖动进度 / 横竖切换 / 安全区显示 / 快捷键）+ 浏览器本地 MP4 导出（24 / 30 / 60 fps，横屏 1920×1080 / 竖屏 1080×1920，H.264 优先，支持边生成边写盘、进度预览与取消） | ✅ 完成 |
+| 5 | 播放器 UI（章节跳转 / 拖动进度 / 横竖切换 / 快捷键）+ 浏览器本地 MP4 导出（24 / 30 / 60 fps，横屏 1920×1080 / 竖屏 1080×1920，H.264 优先，支持边生成边写盘、进度预览与取消） | ✅ 完成 |
 | 6 | 抖音 / B站 发布标题、简介、标签（一键复制，含章节时间戳与字数统计） | ✅ 完成 |
-| 7 | 横屏 1920×1080 / 竖屏 1080×1920 封面图（页面内可下载 + covers/ 静态 PNG） | ✅ 完成 |
+| 7 | 横封面 4:3（1440×1080）/ 竖封面 3:4（1080×1440）（页面内可下载 + covers/ 静态 PNG） | ✅ 完成 |
 | 8 | 无头浏览器自动化测试（横竖屏播放、全部面板、导出 MP4 解码校验、排版检查）+ 修复 + 最终推送 | ✅ 完成 |
+| 9 | 调整：竖屏改为普通全画幅 9:16 构图（取消抖音安全区避让）；封面改为横 4:3 / 竖 3:4 | ✅ 完成 |
 
 ## 1. 创意核心
 
@@ -64,8 +65,7 @@ pinned: false
 | 模块 | 方案 |
 |---|---|
 | 画面 | 原生 Canvas 2D，**纯函数式渲染 `render(t)`**：任意时间点都能精确重绘 → 预览与导出完全一致、可逐帧离线渲染 |
-| 布局 | 横屏 1920×1080（B站）与竖屏 1080×1920（抖音）两套布局，所有元素按「安全区」排布 |
-| 竖屏安全区 | 顶部 ≈ 230px（刘海/状态栏/抖音顶栏），底部 ≈ 440px（标题文案/音乐条/底部导航），右侧 ≈ 150px（点赞评论按钮栏）；预览中可开启参考线 |
+| 布局 | 横屏 1920×1080（B站）与竖屏 1080×1920（抖音）两套布局；竖屏为普通全画幅 9:16 构图（上下左右对称留边），不再为抖音刘海 / 底部文案栏 / 右侧按钮额外避让 |
 | 字幕 | 烧录进画面，横屏在底部，竖屏在底部安全线之上 |
 | 旁白 | Edge 神经网络 TTS（zh-CN-YunxiNeural 主旁白 + zh-CN-XiaoxiaoNeural 新闻播报腔）预生成 MP3，附时长清单；画面动画按旁白每句的起点对齐 |
 | 音乐 | Web Audio 程序化合成（Pad / 琶音 / 贝斯 / 鼓组 / 上升音效），按场景切换情绪与和弦；固定随机种子保证每次一致 |
@@ -75,7 +75,7 @@ pinned: false
 | 数据 | SOL 历史日线价格来自 Surf 数据 API 的真实快照（2020-04-10 → 2026-10-07），打包为静态 JS |
 | 字体 | Noto Sans SC 按全片用字做子集（woff2），保证导出画面在任何电脑上字形一致 |
 | 发布文案 | 抖音 / B站 标题、简介（B站自动生成章节时间戳）、标签，一键复制 |
-| 封面 | 网页内实时绘制并下载 PNG；同时提供静态 `covers/cover-landscape.png`、`covers/cover-portrait.png` |
+| 封面 | 横封面 4:3（1440×1080）、竖封面 3:4（1080×1440），网页内实时绘制并下载 PNG；同时提供静态 `covers/cover-landscape.png`、`covers/cover-portrait.png` |
 
 ## 4. 目录结构
 
@@ -95,7 +95,7 @@ solana-clock/
 │   └── data-sol.js       SOL 真实价格数据
 ├── audio/                旁白 MP3 + manifest.json
 ├── fonts/                子集字体
-├── covers/               横竖屏封面 PNG
+├── covers/               横 4:3 / 竖 3:4 封面 PNG
 ├── vendor/mediabunny.min.mjs
 └── tools/                配音生成 / 字体子集 / 截图测试脚本
 ```
@@ -121,10 +121,10 @@ solana-clock/
 ### 使用说明
 
 - 打开 `solana-clock/index.html`，点击播放（首次约 3 秒生成音乐与音效，之后边播边渲染）。
-- 顶部切换「横屏 / 竖屏」；勾选「安全区」可查看抖音刘海、底部文案栏与右侧按钮的避让区域。
+- 顶部切换「横屏 / 竖屏」（竖屏为普通 9:16 全画幅构图）。
 - 「导出」面板：选择 B站横屏 / 抖音竖屏、24 / 30 / 60 fps、画质，在浏览器本地生成 MP4（推荐桌面版 Chrome / Edge，支持直接边生成边保存到硬盘）。
 - 「发布」面板：抖音 / B站 标题、简介（含章节时间戳）、标签一键复制。
-- 「封面」面板：下载 1920×1080 横屏与 1080×1920 竖屏封面 PNG（静态版本也在 `solana-clock/covers/`）。
+- 「封面」面板：下载横封面 4:3（1440×1080）与竖封面 3:4（1080×1440）PNG（静态版本也在 `solana-clock/covers/`）。
 - 快捷键：空格 播放/暂停，← → 快退/快进，[ ] 上一章/下一章，M 静音，F 全屏。
 
 <!-- solana-clock:end -->

solana-clock/css/app.css

@@ -126,7 +126,7 @@ button { font: inherit; color: inherit; cursor: pointer; }
 .covers { display: grid; gap: 14px; }
 .covers figure { margin: 0; }
 .covers canvas { width: 100%; border-radius: 10px; border: 1px solid var(--line); display: block; background: #000; }
-.covers .cover-p { width: 56%; margin: 0 auto; }
+.covers .cover-p { width: 75%; margin: 0 auto; }
 .covers figcaption { font-size: 12px; color: var(--muted); margin-top: 6px; display: flex; align-items: center; justify-content: center; }
 
 .foot { margin-top: 22px; font-size: 12px; color: #5f5878; text-align: center; line-height: 1.6; }

solana-clock/fonts/sol-sc-400.woff2

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:30b9331388c3fb7bf2daab2464a825a2acce436ab7affe32c7c29535d6418a90
-size 137196
+oid sha256:22249c585acf1ce89117a90c9dbc9af1349aac264128f062d44fd8301ac9a17c
+size 136488

solana-clock/fonts/sol-sc-700.woff2

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2585dfd8acb1283c16ecbdf5470a71cb714de115e5f37c416f6e4ed80cde9c8b
-size 137292
+oid sha256:7ae2b8271c56b84be7f575d66d55974e2ede3cadd43a709bbef1460bec08a927
+size 136520

solana-clock/fonts/sol-sc-900.woff2

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:94a8026a83f635762a62180c51575b47a927e87ab306b4955f32c076fab5c736
-size 136976
+oid sha256:87e9bae6dca820fbc64d1e43a71527ebfda4661b0e24540971e53c594b40d55c
+size 136180

solana-clock/index.html

@@ -53,7 +53,6 @@
           <button data-v="portrait">▯ 竖屏 9:16 · 抖音</button>
         </div>
         <label class="chk"><input type="checkbox" id="chkSubs" checked> 字幕</label>
-        <label class="chk" id="safeWrap"><input type="checkbox" id="chkSafe"> 显示抖音安全区</label>
         <span class="hint">快捷键：空格 播放 · ←/→ 跳 5 秒 · [ / ] 切章节</span>
       </div>
     </section>
@@ -77,7 +76,7 @@
           <span>画面</span>
           <div class="seg small" id="segExpOrient">
             <button data-v="landscape" class="on">横屏 1920×1080<br><em>B 站</em></button>
-            <button data-v="portrait">竖屏 1080×1920<br><em>抖音（已留安全区）</em></button>
+            <button data-v="portrait">竖屏 1080×1920<br><em>抖音 / 视频号 / 小红书</em></button>
           </div>
         </div>
         <div class="field">
@@ -123,11 +122,11 @@
         <div class="covers">
           <figure>
             <canvas id="coverL" class="cover-l"></canvas>
-            <figcaption>横屏封面 1920×1080（B 站）<button class="ghost small" data-dl="landscape">下载 PNG</button></figcaption>
+            <figcaption>横封面 4:3 · 1440×1080<button class="ghost small" data-dl="landscape">下载 PNG</button></figcaption>
           </figure>
           <figure>
             <canvas id="coverP" class="cover-p"></canvas>
-            <figcaption>竖屏封面 1080×1920（抖音）<button class="ghost small" data-dl="portrait">下载 PNG</button></figcaption>
+            <figcaption>竖封面 3:4 · 1080×1440<button class="ghost small" data-dl="portrait">下载 PNG</button></figcaption>
           </figure>
         </div>
       </div>

solana-clock/js/cover.js

@@ -1,4 +1,4 @@
-// Cover art (landscape 1920×1080 for Bilibili, portrait 1080×1920 for Douyin), drawn with the same toolkit as the film.
+// Cover art (landscape 4:3 1440×1080, portrait 3:4 1080×1440), drawn with the same toolkit as the film.
 import { text, gradText, glow, solLogo, dial, pill, rr, hexA, rng, F_SC, F_GR, F_MONO, PURPLE, GREEN, PINK, GOLD, RED, WHITE } from './draw.js';
 import { drawChart, idx, LAST } from './chart.js';
 
@@ -45,33 +45,34 @@ function chartBand(ctx, rect, lw) {
 }
 import { price as priceAt } from './chart.js';
 
+export const COVER_SIZE = { landscape: [1440, 1080], portrait: [1080, 1440] };
+
 export function drawCover(ctx, orient) {
-  const P = orient === 'portrait', W = P ? 1080 : 1920, H = P ? 1920 : 1080;
+  const P = orient === 'portrait', [W, H] = COVER_SIZE[orient];
   ctx.save();
   bg(ctx, W, H, P);
   if (!P) {
-    const { mark } = chartBand(ctx, { x: 80, y: 600, w: 1760, h: 360 }, 6);
+    const { mark } = chartBand(ctx, { x: 120, y: 770, w: 1230, h: 240 }, 6);
     mark('2020-04-10', '$0.74', '#c9b6ff', true);
     mark('2021-11-06', '$259', GREEN, true);
     mark('2022-12-29', '$9.6', RED, false);
     mark('2025-01-19', '$262', GOLD, true);
-    clockMark(ctx, 1500, 330, 210);
-    pill(ctx, '7 分钟动画史 · 2017 → 2026', 110, 120, { size: 32, align: 'left', color: GREEN });
-    gradText(ctx, 'SOLANA', 104, 268, { size: 150, fam: F_GR, weight: 700, ls: 10 });
-    text(ctx, '给区块链装上时钟的人', 108, 420, { size: 104, weight: 900, color: WHITE, shadow: 30, shadowColor: 'rgba(153,69,255,.8)' });
-    text(ctx, '400 毫秒一个块 · 跌 96% 又爬回来', 112, 528, { size: 46, weight: 800, color: hexA(WHITE, .82) });
+    clockMark(ctx, 1130, 270, 170);
+    pill(ctx, '7 分钟动画史 · 2017 → 2026', 92, 104, { size: 32, align: 'left', color: GREEN });
+    gradText(ctx, 'SOLANA', 86, 250, { size: 150, fam: F_GR, weight: 700, ls: 10 });
+    text(ctx, '给区块链装上时钟的人', 90, 548, { size: 112, weight: 900, color: WHITE, shadow: 30, shadowColor: 'rgba(153,69,255,.8)' });
+    text(ctx, '400 毫秒一个块 · 跌 96% 又爬回来', 94, 662, { size: 48, weight: 800, color: hexA(WHITE, .82) });
   } else {
-    // Douyin grids crop covers to a centered 3:4 area (y ≈ 240…1680) — keep the key text inside it.
-    pill(ctx, '7 分钟动画史', W / 2, 330, { size: 40, color: GREEN });
-    gradText(ctx, 'SOLANA', W / 2, 470, { size: 170, fam: F_GR, weight: 700, ls: 10, align: 'center' });
-    text(ctx, '给区块链', W / 2, 640, { size: 130, weight: 900, color: WHITE, align: 'center', shadow: 30, shadowColor: 'rgba(153,69,255,.85)' });
-    text(ctx, '装上时钟的人', W / 2, 790, { size: 130, weight: 900, color: WHITE, align: 'center', shadow: 30, shadowColor: 'rgba(153,69,255,.85)' });
-    clockMark(ctx, W / 2, 1110, 190);
-    const { mark } = chartBand(ctx, { x: 90, y: 1360, w: 900, h: 250 }, 5);
+    pill(ctx, '7 分钟动画史', W / 2, 112, { size: 40, color: GREEN });
+    gradText(ctx, 'SOLANA', W / 2, 250, { size: 170, fam: F_GR, weight: 700, ls: 10, align: 'center' });
+    text(ctx, '给区块链', W / 2, 410, { size: 128, weight: 900, color: WHITE, align: 'center', shadow: 30, shadowColor: 'rgba(153,69,255,.85)' });
+    text(ctx, '装上时钟的人', W / 2, 556, { size: 128, weight: 900, color: WHITE, align: 'center', shadow: 30, shadowColor: 'rgba(153,69,255,.85)' });
+    clockMark(ctx, W / 2, 810, 140);
+    const { mark } = chartBand(ctx, { x: 90, y: 1070, w: 900, h: 200 }, 5);
     mark('2021-11-06', '$259', GREEN, true);
     mark('2022-12-29', '$9.6', RED, false);
     mark('2025-01-19', '$262', GOLD, true);
-    text(ctx, '2017 → 2026 · 九年沉浮全史', W / 2, 1650, { size: 44, weight: 800, color: hexA(WHITE, .85), align: 'center' });
+    text(ctx, '2017 → 2026 · 九年沉浮全史', W / 2, 1360, { size: 44, weight: 800, color: hexA(WHITE, .85), align: 'center' });
   }
   // thin frame
   ctx.strokeStyle = 'rgba(255,255,255,.08)'; ctx.lineWidth = 4; ctx.strokeRect(2, 2, W - 4, H - 4);
@@ -80,7 +81,7 @@ export function drawCover(ctx, orient) {
 
 export function initCoverPanel({ toast }) {
   const make = (id, o) => {
-    const c = document.querySelector(id); const [W, H] = o === 'portrait' ? [1080, 1920] : [1920, 1080];
+    const c = document.querySelector(id); const [W, H] = COVER_SIZE[o];
     c.width = W; c.height = H; drawCover(c.getContext('2d'), o); return c;
   };
   const cs = { landscape: make('#coverL', 'landscape'), portrait: make('#coverP', 'portrait') };
@@ -88,7 +89,7 @@ export function initCoverPanel({ toast }) {
     const o = b.dataset.dl;
     cs[o].toBlob(blob => {
       const a = document.createElement('a'); a.href = URL.createObjectURL(blob);
-      a.download = o === 'portrait' ? 'Solana动画史_抖音竖屏封面_1080x1920.png' : 'Solana动画史_B站横屏封面_1920x1080.png';
+      a.download = o === 'portrait' ? 'Solana动画史_竖封面_3x4_1080x1440.png' : 'Solana动画史_横封面_4x3_1440x1080.png';
       document.body.appendChild(a); a.click(); a.remove(); toast('封面已下载');
     }, 'image/png');
   });

solana-clock/js/engine.js

@@ -196,22 +196,9 @@ export function renderFrame(ctx, orient, T, opts = {}) {
   const fi = 1 - inv(0, .6, T), fo = inv(TL.total - 1.6, TL.total - .1, T);
   const k = Math.max(fi, fo);
   if (k > 0) { ctx.fillStyle = `rgba(0,0,0,${k})`; ctx.fillRect(0, 0, L.W, L.H); }
-  if (opts.safe && L.portrait) safeGuides(ctx, L);
   ctx.restore();
 }
 
-export function safeGuides(ctx, L) {
-  const { W, H, safe } = L;
-  ctx.save();
-  ctx.fillStyle = 'rgba(255,40,80,.18)';
-  ctx.fillRect(0, 0, W, safe.t); ctx.fillRect(0, safe.b, W, H - safe.b); ctx.fillRect(safe.r, safe.t, W - safe.r, safe.b - safe.t);
-  ctx.setLineDash([14, 10]); ctx.strokeStyle = '#ff4d6d'; ctx.lineWidth = 3; ctx.strokeRect(safe.l, safe.t, safe.r - safe.l, safe.b - safe.t);
-  text(ctx, '刘海 / 状态栏 / 顶部标签', W / 2, safe.t / 2, { size: 30, align: 'center', color: '#ffb3c1' });
-  text(ctx, '抖音标题文案 / 音乐条 / 底部导航', W / 2, safe.b + (H - safe.b) / 2, { size: 30, align: 'center', color: '#ffb3c1' });
-  ctx.translate(safe.r + (W - safe.r) / 2, (safe.t + safe.b) / 2); ctx.rotate(Math.PI / 2);
-  text(ctx, '点赞 / 评论 / 收藏 / 分享', 0, 0, { size: 28, align: 'center', color: '#ffb3c1' });
-  ctx.restore();
-}
 
 /** all SFX events (absolute time) collected from scenes */
 export function allSfx() {

solana-clock/js/exporter.js

@@ -92,7 +92,7 @@ export function initExportPanel({ state, getMix, pausePlayer, toast }) {
         if (cancelled) throw new Error('cancelled');
         const T = i * dt;
         ctx.setTransform(1, 0, 0, 1, 0, 0);
-        renderFrame(ctx, opt.orient, T, { subs: opt.subs, safe: false });
+        renderFrame(ctx, opt.orient, T, { subs: opt.subs });
         await vs.add(T, dt);
         if (i % 15 === 0 || i === N - 1) {
           pctx.drawImage(canvas, 0, 0, pv.width, pv.height);

solana-clock/js/main.js

@@ -7,11 +7,10 @@ const view = $('#view'), stage = $('#stage'), stageWrap = $('#stageWrap');
 const ctx = view.getContext('2d');
 const fmt = (s) => { s = Math.max(0, s); return `${Math.floor(s / 60)}:${String(Math.floor(s % 60)).padStart(2, '0')}`; };
 
-export const state = { T: 0, playing: false, orient: 'landscape', subs: true, safe: false, muted: false, dirty: true };
+export const state = { T: 0, playing: false, orient: 'landscape', subs: true, muted: false, dirty: true };
 const qs = new URLSearchParams(location.search);
 if (qs.get('o') === 'portrait') state.orient = 'portrait';
 if (qs.has('t')) state.T = parseFloat(qs.get('t')) || 0;
-if (qs.get('safe') === '1') state.safe = true;
 
 export function toast(msg) { const t = $('#toast'); t.textContent = msg; t.classList.add('on'); clearTimeout(toast._h); toast._h = setTimeout(() => t.classList.remove('on'), 1800); }
 
@@ -28,7 +27,7 @@ new ResizeObserver(resize).observe(stage);
 function draw() {
   const [W] = SIZES[state.orient];
   ctx.setTransform(view.width / W, 0, 0, view.width / W, 0, 0);
-  renderFrame(ctx, state.orient, state.T, { subs: state.subs, safe: state.safe });
+  renderFrame(ctx, state.orient, state.T, { subs: state.subs });
 }
 
 // ---------- audio (progressive, per-scene segments) ----------
@@ -157,13 +156,10 @@ function setOrient(o) {
   state.orient = o;
   stageWrap.classList.toggle('portrait', o === 'portrait');
   document.querySelectorAll('#segOrient button').forEach(b => b.classList.toggle('on', b.dataset.v === o));
-  $('#safeWrap').style.opacity = o === 'portrait' ? 1 : .4;
   resize();
 }
 $('#segOrient').addEventListener('click', e => { const b = e.target.closest('button'); if (b) setOrient(b.dataset.v); });
 $('#chkSubs').onchange = e => { state.subs = e.target.checked; state.dirty = true; };
-$('#chkSafe').checked = state.safe;
-$('#chkSafe').onchange = e => { state.safe = e.target.checked; if (state.safe && state.orient !== 'portrait') setOrient('portrait'); state.dirty = true; };
 
 window.addEventListener('keydown', e => {
   if (e.target.closest('input,textarea')) return;

solana-clock/js/publish.js

@@ -27,7 +27,7 @@ ${dur}动画，带你看完 Solana 的完整故事。
       tags: ['Solana', 'SOL', '区块链', '加密货币', '比特币', '科普动画', 'Web3', '币圈故事', '涨知识', '财经'],
       tagFmt: t => `#${t}`,
       tagJoin: ' ',
-      tips: ['竖屏 1080×1920 导出后直接上传，画面关键内容已避开顶部状态栏、右侧按钮和底部文案区。', '封面请选「封面」页里的竖屏封面，标题建议选第 1 条（带数字更容易点开）。', '发布时间推荐工作日 12:00 或 20:00–22:00。'],
+      tips: ['竖屏 1080×1920 导出后直接上传即可，全片自带中文字幕。', '封面请选「封面」页里的竖屏 3:4 封面，标题建议选第 1 条（带数字更容易点开）。', '发布时间推荐工作日 12:00 或 20:00–22:00。'],
     },
     bilibili: {
       label: 'B 站',

solana-clock/js/scenes-b.js

@@ -115,7 +115,7 @@ const outage = {
 };
 function newsBar(ctx, L, tag, msg, a, t) {
   const P = L.portrait;
-  const y = P ? L.safe.b - 230 : L.H - 230, x = P ? L.safe.l : 0, w = P ? L.safe.r - L.safe.l : L.W;
+  const y = P ? L.sub.y - 170 : L.H - 230, x = 0, w = L.W;
   ctx.save(); ctx.globalAlpha = a;
   ctx.fillStyle = 'rgba(10,10,20,.92)'; ctx.fillRect(x, y, w, 70);
   ctx.fillStyle = RED; ctx.fillRect(x, y, P ? 120 : 190, 70);

solana-clock/js/timeline.js

@@ -25,7 +25,7 @@ export function buildTimeline() {
 
 export const SIZES = { landscape: [1920, 1080], portrait: [1080, 1920] };
 
-/** Layout regions. Portrait keeps clear of notch/status bar (top), Douyin caption + nav (bottom) and action buttons (right). */
+/** Layout regions. Portrait is a normal full-frame 9:16 layout with symmetric margins. */
 export function layout(orient) {
   const [W, H] = SIZES[orient];
   if (orient === 'landscape') {
@@ -38,13 +38,14 @@ export function layout(orient) {
       unit: 1,
     };
   }
-  const safe = { l: 64, t: 236, r: W - 156, b: H - 450 };
+  const safe = { l: 72, t: 110, r: W - 72, b: H - 110 };
+  const sy = safe.t + 200, sh = 1160;
   return {
     orient, W, H, portrait: true,
     safe,
-    head: { x: 72, y: safe.t + 52 },
-    stage: { x: safe.l, y: safe.t + 170, w: safe.r - safe.l, h: 880, cx: (safe.l + safe.r) / 2, cy: safe.t + 170 + 440 },
-    sub: { cx: (safe.l + safe.r) / 2, y: safe.b - 76, maxW: safe.r - safe.l - 10, size: 50 },
+    head: { x: 80, y: safe.t + 52 },
+    stage: { x: safe.l, y: sy, w: safe.r - safe.l, h: sh, cx: (safe.l + safe.r) / 2, cy: sy + sh / 2 },
+    sub: { cx: (safe.l + safe.r) / 2, y: safe.b - 120, maxW: safe.r - safe.l - 10, size: 54 },
     unit: 1,
   };
 }