@biunow/agent-biuart 0.0.0-stage → 0.1.0

package/engine/scenes/25_ghibli.js

@@ -0,0 +1,251 @@
+// 1988 吉卜力式手绘水彩背景美术（宫崎骏/男鹿和雄的夏日房间）——纯代码。
+// 管线：①缓存底版：纸 → 水彩洗染 wash（中点位移变形的多边形 × 多层低 α multiply 叠色 + 每层描一圈淡边 = 水痕边）
+//        → 窗外蓝天、积雨云（白色不透明＋底部蓝灰透明叠色）、远山、草坡、大樟树；室内灰泥墙、木地板、扫帚、小架子
+//      → ②会动的母题（白纱窗帘被风鼓起、窗外草叶成片摆、云慢慢飘、树冠轻摇、墙上树影光斑闪、桌上雏菊点头、发丝与红蝴蝶结飘）
+//      → ③角色：赛璐璐两色（基色＋「路径减去朝光平移的自身」得到的月牙阴影）＋暖褐细线
+SCENES['25_ghibli'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, ease, rng } = U, P = PAINT, TAU = Math.PI * 2;
+  const FLOOR = 720, WIN = [370, 140, 420, 400];
+  const LINE = '#6a4a38';
+
+  // 水彩：P.watercolor（中点位移多边形 × 多层低 α multiply ＋ 水痕边）、P.deform、P.rectPts / P.ellipsePts
+  const deform = P.deform, wash = P.watercolor, rect = P.rectPts, ellipsePts = P.ellipsePts;
+  const fillPts = (g, pts) => { g.beginPath(); pts.forEach((q, i) => i ? g.lineTo(q[0], q[1]) : g.moveTo(q[0], q[1])); g.closePath(); };
+
+  // ---------- 云（缓存精灵）：白色不透明块 + 底部蓝灰透明叠 ----------
+  const cloud = (key, w, h, seed) => P.cached('gh_cloud_' + key, w, h, (g) => {
+    const r = rng(seed), puffs = [];
+    for (let i = 0; i < 16; i++) { const x = w * (0.15 + r() * 0.7), base = h * 0.78, yy = base - Math.sin((x / w) * Math.PI) * h * (0.35 + r() * 0.3); puffs.push([x, yy, 30 + r() * 46]); }
+    puffs.push([w * 0.5, h * 0.72, w * 0.36]);
+    puffs.forEach(([x, y, rr], i) => wash(g, ellipsePts(x, y, rr, rr * 0.82, 14), '#ffffff', { layers: 3, alpha: 0.9, amp: 6, seed: seed + i, edge: 0, blend: 'source-over' }));
+    g.save(); g.globalCompositeOperation = 'source-atop';
+    const sh = g.createLinearGradient(0, h * 0.35, 0, h); sh.addColorStop(0, 'rgba(150,175,205,0)'); sh.addColorStop(1, 'rgba(120,145,190,.75)'); g.fillStyle = sh; g.fillRect(0, 0, w, h);
+    g.restore();
+  });
+  // 大樟树（缓存精灵，轻摇时绕树根转）
+  const tree = () => P.cached('gh_tree', 300, 360, (g) => {
+    g.fillStyle = '#4a3a2a'; g.fillRect(140, 210, 22, 150);
+    const r = rng(77);
+    for (let i = 0; i < 22; i++) { const x = 150 + (r() - .5) * 220, y = 150 + (r() - .5) * 170, rr = 34 + r() * 40;
+      wash(g, ellipsePts(x, y, rr, rr * 0.8, 12), i % 3 ? '#3f7a3a' : '#2a5a32', { layers: 3, alpha: 0.6, amp: 10, seed: i + 5, edge: 0.15, blend: 'source-over' }); }
+    for (let i = 0; i < 14; i++) { const x = 120 + (r() - .5) * 180, y = 110 + (r() - .5) * 120, rr = 18 + r() * 22;
+      wash(g, ellipsePts(x, y, rr, rr * 0.7, 10), '#8cc65a', { layers: 2, alpha: 0.45, amp: 6, seed: i + 50, edge: 0, blend: 'source-over' }); }
+  });
+
+  // ---------- ① 底版 ----------
+  const bg = () => P.cached('gh_bg', W, H, (g) => {
+    g.drawImage(P.texture('gh_paper', '#fbf6ea', { scale: 0.02, amt: 6, grain: 10, seed: 3 }), 0, 0);
+    // 室内：暖灰泥墙——窗边亮、角落暗的渐变洗染 → 再叠 28 块大幅变形的透明色晕（暖黄/粉/蓝灰交替 = 透明叠色）
+    const wl = g.createRadialGradient(580, 340, 100, 700, 420, 1500); wl.addColorStop(0, '#fbf3e0'); wl.addColorStop(0.6, '#f1e1bf'); wl.addColorStop(1, '#dcc49a');
+    wash(g, rect(-20, -20, W + 40, FLOOR + 30), '#efdcb4', { layers: 5, alpha: 0.4, amp: 12, seed: 2, edge: 0, fill: wl });
+    { const r = rng(404), tints = ['#f2c48a', '#e9b4a2', '#b9c9d8', '#f3dca0', '#d6ae80', '#c8d4b0'];
+      for (let i = 0; i < 28; i++) { const x = r() * W, y = r() * 600, rx = 90 + r() * 220, ry = 60 + r() * 160;
+        if (x > 340 && x < 820 && y > 110 && y < 560) continue;
+        wash(g, ellipsePts(x, y, rx, ry, 10), tints[i % tints.length], { layers: 3, alpha: 0.045, amp: 40, seed: 100 + i, edge: 0.04 }); } }
+    wash(g, [[1700, -20], [1940, -20], [1940, 740], [1620, 740], [1680, 400]], '#b89a6c', { layers: 4, alpha: 0.06, amp: 60, seed: 3, edge: 0.03 });   // 右角落暗
+    wash(g, [[-20, -20], [200, -20], [140, 400], [220, 740], [-20, 740]], '#b89a6c', { layers: 4, alpha: 0.06, amp: 60, seed: 4, edge: 0.03 });
+    // 木护墙板（腰线以下竖板，逐块不同色调）
+    { const r = rng(505); for (let x = -10; x < W; x += 64) wash(g, rect(x, 588, 62, FLOOR - 588), ['#c08a56', '#b47e4c', '#c99460', '#ad7848'][(r() * 4) | 0], { layers: 3, alpha: 0.32, amp: 3, seed: 200 + x, edge: 0.12 }); }
+    wash(g, rect(-20, 576, W + 40, 16), '#8a5a34', { layers: 3, alpha: 0.4, amp: 2, seed: 7, edge: 0.15 });
+    // 地板：逐条木板洗染
+    { const r = rng(606); let y = FLOOR; for (let k = 0; k < 8; k++) { const h = 26 + k * 12; wash(g, rect(-20, y, W + 40, h), ['#a86e3a', '#9a6232', '#b07a44', '#a06836'][(r() * 4) | 0], { layers: 3, alpha: 0.5, amp: 3, seed: 300 + k, edge: 0.14 }); y += h; } }
+    // 窗投到地上的暖光斑（软边、带窗棂十字影）
+    g.save(); g.globalCompositeOperation = 'screen'; g.filter = 'blur(10px)'; g.fillStyle = 'rgba(255,236,180,.55)';
+    g.beginPath(); g.moveTo(400, 740); g.lineTo(800, 740); g.lineTo(930, 1040); g.lineTo(450, 1040); g.closePath(); g.fill(); g.restore();
+    g.save(); g.globalCompositeOperation = 'multiply'; g.filter = 'blur(6px)'; g.fillStyle = 'rgba(190,150,110,.5)';
+    g.beginPath(); g.moveTo(596, 740); g.lineTo(606, 740); g.lineTo(700, 1040); g.lineTo(684, 1040); g.closePath(); g.fill(); g.fillRect(420, 880, 470, 10); g.restore();
+    wash(g, rect(-20, FLOOR - 26, W + 40, 26), '#9a6a40', { layers: 4, alpha: 0.25, amp: 4, seed: 6, edge: 0.1 });   // 踢脚板
+    // 窗外：蓝天（渐变洗染）
+    g.save(); g.beginPath(); g.rect(...WIN); g.clip();
+    const sky = g.createLinearGradient(0, 140, 0, 440); sky.addColorStop(0, '#3a86d4'); sky.addColorStop(1, '#bfe2f4');
+    wash(g, rect(360, 130, 440, 330), '#5a9ad8', { layers: 5, alpha: 0.5, amp: 6, seed: 7, edge: 0, blend: 'source-over', fill: sky });
+    // 远山（蓝绿）
+    wash(g, [[360, 430], [420, 400], [500, 410], [560, 385], [640, 402], [720, 380], [800, 400], [800, 470], [360, 470]], '#7aa6a0', { layers: 5, alpha: 0.35, amp: 6, seed: 8, edge: 0.12 });
+    // 草坡（亮绿 → 深绿）
+    const gr = g.createLinearGradient(0, 430, 0, 540); gr.addColorStop(0, '#9ccc5a'); gr.addColorStop(1, '#4c8a3a');
+    wash(g, [[360, 450], [480, 432], [620, 446], [800, 428], [800, 560], [360, 560]], '#6aa848', { layers: 6, alpha: 0.5, amp: 6, seed: 9, edge: 0.1, blend: 'source-over', fill: gr });
+    g.restore();
+    // 窗框（白漆木，蓝绿阴影）＋窗台
+    const frame = [[346, 116, 468, 24], [346, 116, 24, 446], [790, 116, 24, 446], [575, 140, 10, 400], [370, 330, 420, 9]];
+    frame.forEach(([x, y, w, h], i) => wash(g, rect(x, y, w, h), '#f6f1e2', { layers: 3, alpha: 0.95, amp: 2, seed: 20 + i, edge: 0.2, blend: 'source-over' }));
+    frame.forEach(([x, y, w, h], i) => wash(g, rect(x + w * 0.55, y, w * 0.45, h), '#9fb8c0', { layers: 2, alpha: 0.25, amp: 2, seed: 30 + i, edge: 0 }));
+    wash(g, rect(326, 540, 508, 28), '#f3ecd8', { layers: 3, alpha: 0.95, amp: 2, seed: 40, edge: 0.2, blend: 'source-over' });
+    wash(g, rect(326, 556, 508, 12), '#a8b7b8', { layers: 2, alpha: 0.35, amp: 2, seed: 41, edge: 0 });
+    // 窗帘杆
+    g.strokeStyle = '#6a4a30'; g.lineWidth = 7; g.lineCap = 'round'; g.beginPath(); g.moveTo(300, 98); g.lineTo(860, 98); g.stroke();
+    // 墙上小木架＋瓶罐、挂着的干花束
+    wash(g, rect(1540, 300, 260, 14), '#8a5a34', { layers: 3, alpha: 0.6, amp: 2, seed: 50, edge: 0.15 });
+    [[1560, 240, 34, 60, '#6a9ac0'], [1610, 262, 40, 38, '#d8a050'], [1670, 236, 28, 64, '#9ab86a'], [1720, 254, 46, 46, '#c86a50']].forEach(([x, y, w, h, col], i) => wash(g, rect(x, y, w, h), col, { layers: 4, alpha: 0.3, amp: 4, seed: 60 + i, edge: 0.15 }));
+    // 靠墙的扫帚（致敬魔女宅急便）
+    g.save(); g.translate(1760, 330); g.rotate(0.12);
+    wash(g, rect(-7, 0, 14, 470), '#7a5030', { layers: 3, alpha: 0.5, amp: 2, seed: 70, edge: 0.2 });
+    wash(g, [[-10, 460], [10, 460], [46, 620], [-46, 620]], '#c89a4a', { layers: 4, alpha: 0.45, amp: 5, seed: 71, edge: 0.2 });
+    g.strokeStyle = 'rgba(120,80,30,.6)'; g.lineWidth = 1.5; for (let k = -5; k <= 5; k++) { g.beginPath(); g.moveTo(k * 2, 470); g.lineTo(k * 8.5, 616); g.stroke(); }
+    g.fillStyle = '#c84a3a'; g.fillRect(-12, 452, 24, 10); g.restore();
+    // 桌（木）＋白桌布，椅子
+    wash(g, rect(842, 640, 22, 265), '#8a5a34', { layers: 3, alpha: 0.6, amp: 3, seed: 80, edge: 0.15 });
+    wash(g, rect(1160, 640, 22, 265), '#8a5a34', { layers: 3, alpha: 0.6, amp: 3, seed: 81, edge: 0.15 });
+    wash(g, rect(1436, 470, 18, 440), '#7a4c2a', { layers: 3, alpha: 0.6, amp: 3, seed: 82, edge: 0.15 });
+    wash(g, rect(1474, 478, 18, 430), '#7a4c2a', { layers: 3, alpha: 0.6, amp: 3, seed: 83, edge: 0.15 });
+    wash(g, rect(1290, 744, 210, 16), '#8a5a34', { layers: 3, alpha: 0.6, amp: 3, seed: 84, edge: 0.15 });
+    // 整体：纸纹颗粒（颜料在纸凹处沉积）
+    g.save(); g.globalCompositeOperation = 'multiply'; g.globalAlpha = 0.3; g.drawImage(P.texture('gh_gran', '#f4efe2', { scale: 0.06, amt: 18, grain: 26, seed: 9 }), 0, 0); g.restore();
+  });
+  // 桌布（垂边随风轻摆，每帧画）
+  function tablecloth(c, lt) {
+    const sw = Math.sin(lt * 5) * 5;
+    const pts = [[800, 612], [1214, 612], [1222, 700 + sw], [1150, 712 - sw], [1060, 704 + sw], [980, 714 - sw], [890, 704 + sw], [804, 712 - sw]];
+    wash(c, pts, '#fffdf6', { layers: 2, alpha: 0.95, amp: 3, seed: 90, edge: 0.25, blend: 'source-over' });
+    wash(c, pts.map(([x, y]) => [x, y + (y > 640 ? 0 : 30)]), '#b8c8d8', { layers: 2, alpha: 0.18, amp: 3, seed: 91, edge: 0 });
+  }
+
+  // ---------- ② 窗帘：白纱两幅，下摆被风往屋里鼓 ----------
+  function curtain(c, side, lt) {
+    const x0 = side < 0 ? 300 : 860, inner = side < 0 ? 420 : 740;
+    const gust = 0.5 + 0.5 * Math.sin(lt * 5.4 + (side < 0 ? 0 : 1.3));
+    const pts = [], N = 14;
+    for (let i = 0; i <= N; i++) { const q = i / N, y = 100 + q * 500, bulge = q * q * (60 + 150 * gust), w = Math.sin(lt * 9 + q * 6 + side) * 16 * q;
+      pts.push([inner + side * 0 - side * (bulge * 0.15) + w + (side < 0 ? 1 : -1) * bulge * 0.9, y]); }
+    for (let i = N; i >= 0; i--) { const q = i / N, y = 100 + q * 500 + (i === N ? 0 : 0); pts.push([x0 + (side < 0 ? -1 : 1) * q * 30 * gust, y + Math.sin(lt * 6 + q * 4) * 4]); }
+    c.save(); c.globalAlpha = 0.85;
+    wash(c, pts, '#ffffff', { layers: 3, alpha: 0.42, amp: 4, seed: side < 0 ? 101 : 102, edge: 0, blend: 'source-over' });
+    c.restore();
+    // 褶线（蓝灰透明，跟随鼓起）
+    c.save(); c.globalCompositeOperation = 'multiply'; c.strokeStyle = 'rgba(150,175,200,.45)'; c.lineWidth = 3; c.lineCap = 'round';
+    for (let k = 1; k < 4; k++) { const f = k / 4; c.beginPath(); for (let i = 0; i <= 10; i++) { const q = i / 10; const a = pts[Math.round(q * N)], b = pts[2 * N + 1 - Math.round(q * N)]; const x = lerp(b[0], a[0], f), y = lerp(b[1], a[1], f); i ? c.lineTo(x, y) : c.moveTo(x, y); } c.stroke(); }
+    c.restore();
+  }
+  // 窗外草叶：成片同向摆（风是一阵一阵的）
+  function grass(c, t) {
+    c.save(); c.beginPath(); c.rect(...WIN); c.clip(); c.lineCap = 'round';
+    const r = rng(5), cols = ['#5c9a3e', '#7fb84a', '#3f7a32', '#9ccc5a', '#4a8a3a'];
+    for (let i = 0; i < 360; i++) {
+      const x = 360 + r() * 440, y = 470 + r() * 75, h = 16 + r() * 26 + (y - 470) * 0.35, ph = r() * TAU;
+      const wind = Math.sin(t * 3.1 - x * 0.018) * 0.5 + 0.5, sway = (0.25 + wind * 0.75) * h * 0.55 + Math.sin(t * 9 + ph) * 2;
+      c.strokeStyle = cols[i % 5]; c.lineWidth = 2 + r() * 2;
+      c.beginPath(); c.moveTo(x, y); c.quadraticCurveTo(x + sway * 0.3, y - h * 0.6, x + sway, y - h); c.stroke();
+    }
+    c.restore();
+  }
+  // 墙上的树影光斑（komorebi）：暖黄亮斑用 screen 叠，位置随噪声慢漂、亮度闪
+  function komorebi(c, t) {
+    c.save(); c.globalCompositeOperation = 'screen';
+    const r = rng(33);
+    for (let i = 0; i < 34; i++) {
+      const bx = 830 + r() * 380, by = 160 + r() * 420, rr = 10 + r() * 26;
+      const x = bx + P.noise(i * 1.3, t * 0.9) * 26, y = by + P.noise(i * 2.1 + 5, t * 0.9) * 18, a = 0.18 + 0.22 * (0.5 + 0.5 * Math.sin(t * 5 + i * 1.7));
+      const gg = c.createRadialGradient(x, y, 0, x, y, rr); gg.addColorStop(0, `rgba(255,236,170,${a})`); gg.addColorStop(1, 'rgba(255,236,170,0)'); c.fillStyle = gg; c.beginPath(); c.ellipse(x, y, rr * 1.3, rr, 0.4, 0, TAU); c.fill();
+    }
+    c.restore();
+  }
+  // 桌上雏菊（玻璃瓶），花头点头
+  function daisies(c, t) {
+    const vx = 900, vy = 612;
+    c.save(); c.fillStyle = 'rgba(190,220,230,.55)'; c.beginPath(); c.moveTo(vx - 16, vy); c.quadraticCurveTo(vx - 22, vy - 30, vx - 10, vy - 46); c.lineTo(vx + 10, vy - 46); c.quadraticCurveTo(vx + 22, vy - 30, vx + 16, vy); c.closePath(); c.fill();
+    c.strokeStyle = 'rgba(90,120,140,.6)'; c.lineWidth = 1.5; c.stroke();
+    [[-30, -120, 0], [6, -140, 1.3], [34, -112, 2.1], [-8, -100, 3.2]].forEach(([dx, dy, ph]) => {
+      const sw = Math.sin(t * 3.2 + ph) * 7, hx = vx + dx + sw, hy = vy + dy + Math.abs(sw) * 0.2;
+      c.strokeStyle = '#5a8a3a'; c.lineWidth = 3; c.beginPath(); c.moveTo(vx + dx * 0.2, vy - 40); c.quadraticCurveTo(vx + dx * 0.6, vy + dy * 0.5, hx, hy); c.stroke();
+      c.fillStyle = '#fffdf4'; for (let k = 0; k < 10; k++) { const a = k / 10 * TAU + ph; c.beginPath(); c.ellipse(hx + Math.cos(a) * 9, hy + Math.sin(a) * 6, 7, 3, a, 0, TAU); c.fill(); }
+      c.fillStyle = '#f2b830'; c.beginPath(); c.arc(hx, hy, 5, 0, TAU); c.fill();
+    });
+    c.restore();
+  }
+
+  // ---------- ③ 赛璐璐角色 ----------
+  // 赛璐珞两色：P.cel——背光侧（光从左上来，阴影带宽 (dx,dy)）一道月牙阴影＋暖褐细线
+  const cel = (c, p, base, shade, dx = 9, dy = 6, line = true) => P.cel(c, p, base, shade, null, { sd: 1, lx: -dx, ly: -dy, line: LINE, lw: line ? 2.4 : 0 });
+  const GP = { skin: '#fde6d2', skinS: '#efbfa4', hair: '#f8dc8c', hairS: '#d9a95a', dress: '#3f8590', dressS: '#2b6470', white: '#fffaf0', whiteS: '#d8dde4', bow: '#d93a30', bowS: '#a0261f' };
+  function girl(c, G, ch, lt, t) {
+    c.save(); c.lineJoin = 'round'; c.lineCap = 'round';
+    cel(c, G.farSleeve, GP.dress, GP.dressS); cel(c, G.farCuff, GP.white, GP.whiteS); cel(c, G.farHand, GP.skin, GP.skinS, 4, 3);
+    // 长发（被风吹向右后方）
+    const wind = Math.sin(lt * 3.2) * 0.5 + 0.5;
+    const nape = G.A.nape, hd = G.A.headC;
+    const flow = new Path2D(); const fp = [[hd[0] + 30, hd[1] - 40], [nape[0] + 50 + wind * 14, nape[1] - 30], [nape[0] + 78 + wind * 30, nape[1] + 40 + Math.sin(t * 6) * 6], [nape[0] + 60 + wind * 26, nape[1] + 120 + Math.sin(t * 5 + 1) * 8], [nape[0] + 20, nape[1] + 130], [nape[0] - 6, nape[1] + 40], [hd[0] + 4, hd[1] + 10]];
+    const fpath = RIG.smooth(fp); cel(c, fpath, GP.hair, GP.hairS, 10, 4);
+    cel(c, G.skirt, GP.dress, GP.dressS, 16, 8);
+    c.strokeStyle = GP.dressS; c.lineWidth = 3; G.folds.forEach(f => c.stroke(f));
+    cel(c, G.apronSkirt, GP.white, GP.whiteS, 10, 6);
+    cel(c, G.shoe, '#6a3a24', '#4a2414', 4, 2);
+    cel(c, G.torso, GP.dress, GP.dressS, 14, 6); cel(c, G.bib, GP.white, GP.whiteS, 6, 4);
+    cel(c, G.neck, GP.skin, GP.skinS, 6, 2);
+    cel(c, G.hairBack, GP.hair, GP.hairS, 10, 6);
+    cel(c, G.face, GP.skin, GP.skinS, 10, 4);
+    c.save(); c.clip(G.face); c.fillStyle = 'rgba(240,140,130,.35)'; c.beginPath(); c.ellipse(G.cheek[0], G.cheek[1], 12, 7, 0, 0, TAU); c.fill(); c.restore();
+    cel(c, G.bangs, GP.hair, GP.hairS, 6, 6);
+    c.strokeStyle = GP.hairS; c.lineWidth = 2; G.hairLines.forEach(h => c.stroke(h));
+    // 红蝴蝶结（后脑上方），飘带随风
+    const bc = [G.A.headTop[0] + 46, G.A.headTop[1] + 14];
+    const tails = [[bc[0] + 6, bc[1] + 8], [bc[0] + 40 + wind * 18, bc[1] + 44 + Math.sin(t * 8) * 6], [bc[0] + 26 + wind * 10, bc[1] + 54], [bc[0] + 2, bc[1] + 14]];
+    cel(c, RIG.smooth(tails), GP.bow, GP.bowS, 4, 3);
+    [[-1, -0.5], [1, 0.4]].forEach(([s, rot]) => { const p = new Path2D(); p.ellipse(bc[0] + s * 24, bc[1] - 4, 26, 15, rot, 0, TAU); cel(c, p, GP.bow, GP.bowS, 5, 4); });
+    { const p = new Path2D(); p.arc(bc[0], bc[1], 9, 0, TAU); cel(c, p, GP.bow, GP.bowS, 2, 2); }
+    // 五官（吉卜力式：大而简单的眼）
+    if (ch.blink) { c.strokeStyle = LINE; c.lineWidth = 3; c.beginPath(); c.arc(G.eye.x, G.eye.y - 2, 7, 0.2, Math.PI - 0.2); c.stroke(); }
+    else { c.fillStyle = '#3a2a24'; c.beginPath(); c.ellipse(G.eye.x - 1, G.eye.y + 1, 5, 7.5, 0, 0, TAU); c.fill(); c.fillStyle = '#5a8ac8'; c.beginPath(); c.ellipse(G.eye.x - 1, G.eye.y + 3, 3.5, 4, 0, 0, TAU); c.fill(); c.fillStyle = '#fff'; c.beginPath(); c.arc(G.eye.x - 2.5, G.eye.y - 2, 2, 0, TAU); c.fill();
+      c.strokeStyle = LINE; c.lineWidth = 2.8; c.stroke(G.lid); }
+    c.strokeStyle = '#c08a40'; c.lineWidth = 2.4; c.stroke(G.brow);
+    c.strokeStyle = '#a8443a'; c.lineWidth = 2.2; c.beginPath(); c.moveTo(...G.lips[0]); c.lineTo(G.lips[1][0] - 1, G.lips[1][1] + 2); c.stroke();
+    cel(c, G.upperArm, GP.dress, GP.dressS, 8, 6); cel(c, G.foreArm, GP.dress, GP.dressS, 8, 6); cel(c, G.cuff, GP.white, GP.whiteS, 4, 3);
+    cel(c, G.hand, GP.skin, GP.skinS, 4, 3);
+    RIG.drawCup(c, G.cup, { body: '#fdf8ee', rim: '#7a4a2a', line: LINE, lw: 2.2, hw: 6 });
+    c.save(); c.translate(G.cup.x, G.cup.y); c.rotate(G.cup.tilt); c.strokeStyle = '#5a8ac8'; c.lineWidth = 3; c.beginPath(); c.moveTo(-G.cup.w * 0.45, G.cup.h * 0.35); c.lineTo(G.cup.w * 0.45, G.cup.h * 0.35); c.stroke(); c.restore();
+    c.fillStyle = GP.skin; c.beginPath(); c.arc(G.thumb[0], G.thumb[1], 7, 0, TAU); c.fill(); c.strokeStyle = LINE; c.lineWidth = 2; c.stroke();
+    c.restore();
+  }
+  function cat(c, K) {
+    const O = '#f3a24c', OS = '#d27a2c', Wt = '#fffaf2', WS = '#e2d8ca';
+    c.save(); c.lineJoin = 'round'; c.lineCap = 'round';
+    c.strokeStyle = LINE; c.lineWidth = K.tailW + 5; c.stroke(K.tail); c.strokeStyle = O; c.lineWidth = K.tailW; c.stroke(K.tail);
+    const tip = K.tailPts[K.tailPts.length - 1]; c.fillStyle = Wt; c.beginPath(); c.arc(tip[0], tip[1], K.tailW / 2, 0, TAU); c.fill();
+    cel(c, K.body, O, OS, 18, 10);
+    c.save(); c.clip(K.body); c.strokeStyle = '#c8682a'; c.lineWidth = 8; K.stripes.slice(3).forEach(s => { c.beginPath(); c.moveTo(...s[0]); c.lineTo(...s[1]); c.stroke(); }); c.restore();
+    K.legs.forEach(l => cel(c, l, Wt, WS, 6, 3));
+    c.save(); c.clip(K.body); cel(c, K.white, Wt, WS, 10, 6, false); c.restore();
+    cel(c, K.head, O, OS, 12, 8);
+    c.save(); c.clip(K.head); c.fillStyle = Wt; c.beginPath(); c.ellipse(K.nose[0] - 22, K.nose[1] + 12, 36, 26, 0, 0, TAU); c.fill(); c.restore();
+    c.strokeStyle = LINE; c.lineWidth = 2.4; c.stroke(K.head);
+    c.fillStyle = '#f2a8a0'; K.earInner.forEach(e => { c.beginPath(); e.forEach((p, i) => i ? c.lineTo(...p) : c.moveTo(...p)); c.fill(); });
+    c.strokeStyle = '#c8682a'; c.lineWidth = 6; K.stripes.slice(0, 3).forEach(s => { c.beginPath(); c.moveTo(...s[0]); c.lineTo(...s[1]); c.stroke(); });
+    K.eyes.forEach(e => { if (K.blink) { c.strokeStyle = LINE; c.lineWidth = 3; c.beginPath(); c.arc(e.x, e.y - 2, 8, 0.2, Math.PI - 0.2); c.stroke(); }
+      else { c.fillStyle = '#2a1a12'; c.beginPath(); c.ellipse(e.x, e.y, 6, 8, 0, 0, TAU); c.fill(); c.fillStyle = '#fff'; c.beginPath(); c.arc(e.x - 2, e.y - 3, 2.4, 0, TAU); c.fill(); } });
+    c.fillStyle = '#d8746a'; c.beginPath(); c.arc(K.nose[0], K.nose[1], 5, 0, TAU); c.fill();
+    c.strokeStyle = LINE; c.lineWidth = 2; c.beginPath(); c.moveTo(...K.mouth[0]); c.quadraticCurveTo(...K.mouth[1], ...K.mouth[2]); c.stroke();
+    c.lineWidth = 1.4; K.whiskers.forEach(w => { c.beginPath(); c.moveTo(...w[0]); c.lineTo(...w[1]); c.stroke(); });
+    c.restore();
+  }
+
+  // 角色用的透明色晕层（multiply 叠在角色上，做出水彩填色的深浅不匀）
+  const charBloom = () => P.cached('gh_charBloom', W, H, (g) => { const r = rng(808); for (let i = 0; i < 40; i++) { const x = 380 + r() * 1120, y = 280 + r() * 660; wash(g, ellipsePts(x, y, 30 + r() * 70, 24 + r() * 50, 9), ['#e8b890', '#a8c0d8', '#f0d0a0', '#c8a8c0'][i % 4], { layers: 2, alpha: 0.1, amp: 16, seed: 900 + i, edge: 0.08 }); } });
+  return {
+    draw(c, lt, t) {
+      const ch = P.choreo(lt, t);
+      c.drawImage(bg(), 0, 0);
+      // 窗外：云飘、树摇、草摆（都在窗洞里）
+      c.save(); c.beginPath(); c.rect(...WIN); c.clip();
+      c.drawImage(cloud('a', 380, 230, 11), 300 + t * 22, 150); c.drawImage(cloud('b', 260, 160, 23), 590 + t * 30, 210);
+      c.save(); c.translate(700, 540); c.rotate(Math.sin(t * 2.4) * 0.025); c.drawImage(tree(), -150, -360); c.restore();
+      c.restore();
+      grass(c, t);
+      // 窗框中梃压在外景上（从底版里再取一次窗框条，保证树和云在框后）
+      c.save(); c.beginPath(); [[575, 140, 10, 400], [370, 330, 420, 9]].forEach(r => c.rect(...r)); c.clip(); c.drawImage(bg(), 0, 0); c.restore();
+      komorebi(c, t);
+      curtain(c, -1, lt); curtain(c, 1, lt);
+      tablecloth(c, lt);
+      daisies(c, t);
+      // 角色先画进离屏，再把水彩颗粒＋透明色晕按角色剪影 multiply 上去：赛璐璐平涂变成「水彩填色」
+      const L = P.scratch('ghChars'), cl = L.getContext('2d'); cl.reset(); cl.clearRect(0, 0, W, H);
+      const K = RIG.cat({ tail: ch.tail, blink: ch.blink, breathe: ch.breathe });
+      cat(cl, K);
+      const G = RIG.girl({ cup: ch.cup, sip: ch.sip, breathe: ch.breathe, hair: 'long' });
+      girl(cl, G, ch, lt, t);
+      c.drawImage(L, 0, 0);
+      // 水彩肌理只「乘」在角色上：纹理层 destination-in 角色剪影 → multiply 叠回（source-atop 会把纸色盖上去，人物整体发白，第一版踩到）
+      P.textureInside(c, L, mg => { mg.globalAlpha = 0.8; mg.drawImage(P.texture('gh_gran', '#f4efe2', { scale: 0.06, amt: 18, grain: 26, seed: 9 }), 0, 0); mg.globalAlpha = 1; mg.drawImage(charBloom(), 0, 0); }, { key: 'ghCharTex' });
+      P.steam(c, t, G.cup.x, G.cup.y - 8, { h: 60, n: 2, color: 'rgba(255,255,255,.75)', width: 3.5, spread: 12, wobble: 8 });
+      // 柔光：窗口方向一层暖色 screen 光晕
+      c.save(); c.globalCompositeOperation = 'screen'; const lg = c.createRadialGradient(580, 340, 60, 580, 340, 900); lg.addColorStop(0, 'rgba(255,240,200,.28)'); lg.addColorStop(1, 'rgba(255,240,200,0)'); c.fillStyle = lg; c.fillRect(0, 0, W, H); c.restore();
+    },
+  };
+})();

package/engine/scenes/26_vaporwave.js

@@ -0,0 +1,191 @@
+// 2011 蒸汽波 / 赛博霓虹——纯代码。
+// 管线：①先把整幅画进离屏 S：深紫渐变墙＋洋红透视网格地面（滚动）＋窗里落日（横条切口上移）与青色网格、棕榈剪影摇
+//        ＋自绘灯管字「カフェ」霓虹招牌（按帧哈希闪）＋Win95 对话框 TEA.EXE 进度条＋大理石胸像 ＋角色（深色平涂＋粉/青双色轮廓辉光）
+//      → ②VHS 后期：RGB 三通道分离错位（multiply 取单通道 → lighter 合成）＋跟踪噪声带下滚（带内横向撕裂）＋扫描线 ＋ OSD（PLAY ▶、时间码）
+SCENES['26_vaporwave'] = (() => {
+  const W = 1920, H = 1080, { clamp, lerp, ease, rng } = U, P = PAINT, TAU = Math.PI * 2;
+  const FLOOR = 720;
+  const C = { pink: '#ff4fd8', hot: '#ff2f8f', cyan: '#3ff6ff', purple: '#2a0b4a', deep: '#12052a', violet: '#7a2ae0', yellow: '#ffd84a', orange: '#ff8a3a' };
+  const glowLine = P.glowStroke;   // 霓虹灯管：shadowBlur 辉光＋近白芯线
+
+  // ---------- 静态底版：墙、窗框灯管、胸像底座 ----------
+  const bg = () => P.cached('vw_bg', W, H, (g) => {
+    const wg = g.createLinearGradient(0, 0, 0, FLOOR); wg.addColorStop(0, '#0d0322'); wg.addColorStop(0.7, '#2c0b52'); wg.addColorStop(1, '#4a0f6a'); g.fillStyle = wg; g.fillRect(0, 0, W, FLOOR);
+    // 墙上淡淡的竖向渐变色带（粉→青），像霓虹打在墙上
+    const bl = g.createRadialGradient(580, 340, 60, 580, 340, 760); bl.addColorStop(0, 'rgba(255,79,216,.35)'); bl.addColorStop(1, 'rgba(255,79,216,0)'); g.fillStyle = bl; g.fillRect(0, 0, W, FLOOR);
+    const br = g.createRadialGradient(1000, 220, 20, 1000, 220, 520); br.addColorStop(0, 'rgba(63,246,255,.22)'); br.addColorStop(1, 'rgba(63,246,255,0)'); g.fillStyle = br; g.fillRect(0, 0, W, FLOOR);
+    g.fillStyle = '#08020f'; g.fillRect(0, FLOOR, W, H - FLOOR);
+    // 墙脚灯带
+    g.beginPath(); g.moveTo(0, FLOOR); g.lineTo(W, FLOOR); glowLine(g, C.cyan, 4, 18);
+    // 椅子：黑色亚克力＋粉色边灯
+    g.fillStyle = '#1a0830'; g.fillRect(1436, 470, 18, 440); g.fillRect(1474, 478, 18, 430); g.fillRect(1290, 744, 210, 16);
+    g.beginPath(); g.rect(1436, 470, 18, 440); g.rect(1474, 478, 18, 430); glowLine(g, C.pink, 2, 10);
+  });
+
+  // ---------- 窗里的落日 ----------
+  function sunset(c, t) {
+    c.save(); c.beginPath(); c.rect(370, 140, 420, 400); c.clip();
+    const sk = c.createLinearGradient(0, 140, 0, 470); sk.addColorStop(0, '#1a0640'); sk.addColorStop(0.55, '#a0207a'); sk.addColorStop(1, '#ff7a5a'); c.fillStyle = sk; c.fillRect(370, 140, 420, 330);
+    // 太阳：黄→洋红渐变，横条切口随时间上移（越往下切口越宽）
+    const sx = 580, sy = 400, sr = 118;
+    c.save(); c.beginPath(); c.arc(sx, sy, sr, 0, TAU); c.clip();
+    const sg = c.createLinearGradient(0, sy - sr, 0, sy + sr); sg.addColorStop(0, C.yellow); sg.addColorStop(0.5, C.orange); sg.addColorStop(1, C.hot); c.fillStyle = sg; c.fillRect(sx - sr, sy - sr, sr * 2, sr * 2);
+    c.globalCompositeOperation = 'destination-out';
+    const ph = (t * 0.9) % 1;
+    for (let k = 0; k < 7; k++) { const q = (k + ph) / 7, y = sy + sr * (q * 1.1 - 0.05), h = 2 + q * q * 16; c.fillRect(sx - sr, y, sr * 2, h); }
+    c.restore();
+    // 地平线上的线框山
+    c.beginPath(); c.moveTo(370, 470); [[420, 430], [470, 452], [520, 410], [560, 460], [640, 420], [700, 448], [760, 418], [790, 440]].forEach(p => c.lineTo(...p)); c.lineTo(790, 470);
+    c.fillStyle = '#1a0636'; c.fill(); glowLine(c, C.pink, 2.5, 10);
+    // 地面网格（青）往观众方向滚动
+    c.fillStyle = '#0b0220'; c.fillRect(370, 470, 420, 70);
+    c.save(); c.beginPath(); c.rect(370, 470, 420, 70); c.clip(); c.strokeStyle = C.cyan; c.lineWidth = 1.6; c.shadowColor = C.cyan; c.shadowBlur = 8;
+    for (let i = -10; i <= 10; i++) { c.beginPath(); c.moveTo(580 + i * 12, 470); c.lineTo(580 + i * 70, 540); c.stroke(); }
+    const sc = (t * 1.6) % 1; for (let k = 0; k < 8; k++) { const d = k + 1 - sc, y = 470 + 70 * (1 / (1 + 6 / (d * d + 0.01))) ; c.beginPath(); c.moveTo(370, y); c.lineTo(790, y); c.stroke(); }
+    c.restore();
+    // 棕榈剪影（左右各一，摇）
+    [[400, 540, 1], [770, 540, -1]].forEach(([x, y, s], k) => {
+      const sw = Math.sin(t * 2.2 + k * 1.4) * 0.06;
+      c.save(); c.translate(x, y); c.rotate(sw * s); c.fillStyle = '#0a0216'; c.strokeStyle = '#0a0216';
+      c.lineWidth = 10; c.lineCap = 'round'; c.beginPath(); c.moveTo(0, 0); c.quadraticCurveTo(s * 18, -120, s * 6, -230); c.stroke();
+      for (let f = 0; f < 7; f++) { const a = -Math.PI / 2 + (f - 3) * 0.45 + Math.sin(t * 3 + f) * 0.05, L = 70 + (f % 3) * 16; c.save(); c.translate(s * 6, -230); c.rotate(a); c.beginPath(); c.moveTo(0, 0); c.quadraticCurveTo(L * 0.5, -14, L, 12); c.quadraticCurveTo(L * 0.5, 4, 0, 4); c.fill(); c.restore(); }
+      c.restore(); });
+    c.restore();
+    // 窗框：青色灯管
+    c.beginPath(); c.rect(360, 130, 440, 420); glowLine(c, C.cyan, 6, 26); c.beginPath(); c.rect(360, 130, 440, 420); c.strokeStyle = '#e8ffff'; c.lineWidth = 2; c.stroke();
+    c.fillStyle = '#1a0830'; c.fillRect(330, 550, 500, 22); c.beginPath(); c.moveTo(330, 550); c.lineTo(830, 550); glowLine(c, C.pink, 3, 14);
+  }
+
+  // ---------- 地面：洋红透视网格（滚动） ----------
+  function floorGrid(c, t) {
+    c.save(); c.beginPath(); c.rect(0, FLOOR, W, H - FLOOR); c.clip();
+    const VX = 960, VY = 600; c.strokeStyle = C.pink; c.shadowColor = C.pink; c.shadowBlur = 12; c.lineWidth = 2.5;
+    for (let i = -16; i <= 16; i++) { c.beginPath(); c.moveTo(VX + i * 160 * (FLOOR - VY) / (H - VY), FLOOR); c.lineTo(VX + i * 160, H); c.stroke(); }
+    const ph = (t * 1.3) % 1;
+    for (let k = 0; k < 14; k++) { const d = k + 1 - ph, y = VY + 520 / d; if (y < FLOOR || y > H + 4) continue; c.lineWidth = 1.2 + 2.4 * (y - FLOOR) / (H - FLOOR); c.beginPath(); c.moveTo(0, y); c.lineTo(W, y); c.stroke(); }
+    c.restore();
+  }
+
+  // ---------- 霓虹灯管字「カフェ」（自绘折线，不依赖字体） ----------
+  const KANA = {
+    'カ': [[[0.12, 0.34], [0.86, 0.34], [0.84, 0.62], [0.74, 0.94], [0.6, 0.86]], [[0.46, 0.08], [0.42, 0.5], [0.3, 0.78], [0.12, 0.96]]],
+    'フ': [[[0.12, 0.24], [0.86, 0.24], [0.8, 0.56], [0.62, 0.82], [0.34, 0.96]]],
+    'ェ': [[[0.28, 0.46], [0.72, 0.46]], [[0.5, 0.46], [0.5, 0.86]], [[0.18, 0.86], [0.82, 0.86]]],
+  };
+  function neonSign(c, t) {
+    const f = Math.floor(t * 30), on = (k) => { const h = U.hash(f, k); return !(h < 0.07 || (k === 1 && h < 0.22 && (f % 17) < 5)); };
+    const x0 = 868, y0 = 150, s = 104;
+    // 灯管底板
+    c.fillStyle = 'rgba(10,2,20,.55)'; c.fillRect(x0 - 18, y0 - 18, s * 3 + 24, s + 70);
+    [...'カフェ'].forEach((ch, k) => {
+      const lit = on(k), col = k === 1 ? C.cyan : C.pink;
+      KANA[ch].forEach(st => { c.beginPath(); st.forEach(([u, v], i) => { const x = x0 + k * s + u * (s - 14), y = y0 + v * s; i ? c.lineTo(x, y) : c.moveTo(x, y); });
+        c.lineJoin = 'round'; c.lineCap = 'round';
+        if (lit) { glowLine(c, col, 9, 30); c.strokeStyle = '#fff4fd'; c.lineWidth = 3; c.stroke(); } else { c.strokeStyle = 'rgba(120,60,120,.6)'; c.lineWidth = 6; c.stroke(); } });
+    });
+    // 小字 TEA ROOM（字体霓虹）
+    c.save(); c.font = '34px "Righteous-400"'; c.letterSpacing = '10px'; c.textBaseline = 'alphabetic';
+    c.shadowColor = C.yellow; c.shadowBlur = on(5) ? 18 : 0; c.fillStyle = on(5) ? '#fff2b0' : 'rgba(140,110,60,.6)'; c.fillText('TEA ROOM', x0 + 34, y0 + s + 44); c.restore();
+  }
+
+  // ---------- Win95 对话框 TEA.EXE ----------
+  function dialog(c, lt) {
+    const x = 26, y = 330, w = 300, h = 168;
+    c.save(); c.fillStyle = '#c0c0c0'; c.fillRect(x, y, w, h);
+    c.fillStyle = '#ffffff'; c.fillRect(x, y, w, 3); c.fillRect(x, y, 3, h); c.fillStyle = '#404040'; c.fillRect(x, y + h - 3, w, 3); c.fillRect(x + w - 3, y, 3, h);
+    const tg = c.createLinearGradient(x, 0, x + w, 0); tg.addColorStop(0, '#000080'); tg.addColorStop(1, '#1084d0'); c.fillStyle = tg; c.fillRect(x + 6, y + 6, w - 12, 30);
+    c.font = '18px "Poppins-700"'; c.fillStyle = '#fff'; c.textBaseline = 'middle'; c.fillText('TEA.EXE', x + 14, y + 22);
+    c.fillStyle = '#c0c0c0'; c.fillRect(x + w - 32, y + 10, 22, 20); c.fillStyle = '#000'; c.font = '16px "Poppins-700"'; c.fillText('×', x + w - 26, y + 20);
+    c.font = '17px "Poppins-600"'; c.fillStyle = '#000'; c.fillText('Brewing tea...  ' + Math.min(99, Math.floor(18 + lt * 70)) + '%', x + 16, y + 64);
+    c.fillStyle = '#fff'; c.fillRect(x + 16, y + 86, w - 32, 26); c.fillStyle = '#808080'; c.fillRect(x + 16, y + 86, w - 32, 2);
+    const n = Math.min(17, Math.floor(3 + lt * 14)); c.fillStyle = '#000080'; for (let i = 0; i < n; i++) c.fillRect(x + 20 + i * 15.5, y + 90, 12, 18);
+    c.fillStyle = '#c0c0c0'; c.fillRect(x + w / 2 - 44, y + 124, 88, 30); c.fillStyle = '#fff'; c.fillRect(x + w / 2 - 44, y + 124, 88, 2); c.fillStyle = '#404040'; c.fillRect(x + w / 2 - 44, y + 152, 88, 2);
+    c.fillStyle = '#000'; c.font = '16px "Poppins-600"'; c.fillText('OK', x + w / 2 - 12, y + 140);
+    c.restore();
+  }
+
+  // ---------- 桌＋大理石胸像 ----------
+  function table(c, t) {
+    c.fillStyle = '#0e0420'; c.fillRect(810, 618, 400, 28); c.fillRect(842, 646, 20, 259); c.fillRect(1160, 646, 20, 259);
+    c.beginPath(); c.moveTo(810, 618); c.lineTo(1210, 618); glowLine(c, C.cyan, 3, 16);
+    c.beginPath(); c.moveTo(810, 646); c.lineTo(1210, 646); glowLine(c, C.pink, 2, 10);
+    // 胸像（朝右的侧脸剪影＋大理石渐变＋粉青轮廓光）
+    const bust = new Path2D(); const bx = 900, by = 618;
+    [[-48, 0], [-50, -22], [-30, -38], [-18, -44], [-16, -62], [-24, -76], [-26, -100], [-18, -122], [0, -132], [20, -128], [30, -112], [36, -100], [44, -92], [38, -86], [42, -78], [36, -72], [36, -62], [24, -58], [20, -46], [34, -38], [52, -22], [50, 0]].forEach(([x, y], i) => i ? bust.lineTo(bx + x, by + y) : bust.moveTo(bx + x, by + y)); bust.closePath();
+    const mg = c.createLinearGradient(bx - 50, by - 130, bx + 50, by); mg.addColorStop(0, '#f6eefa'); mg.addColorStop(0.6, '#c9b8d8'); mg.addColorStop(1, '#8a6aa8'); c.fillStyle = mg; c.fill(bust);
+    c.save(); c.clip(bust); c.strokeStyle = 'rgba(140,110,160,.5)'; c.lineWidth = 1.2; [[[-40, -10], [-10, -40], [10, -70]], [[20, -20], [30, -50]], [[-20, -90], [0, -110]]].forEach(v => { c.beginPath(); v.forEach(([x, y], i) => i ? c.lineTo(bx + x, by + y) : c.moveTo(bx + x, by + y)); c.stroke(); }); c.restore();
+    c.strokeStyle = 'rgba(255,79,216,.9)'; c.lineWidth = 2.5; c.shadowColor = C.pink; c.shadowBlur = 14; c.stroke(bust); c.shadowBlur = 0;
+    c.fillStyle = '#5a3a7a'; c.beginPath(); c.arc(bx + 22, by - 98, 3, 0, TAU); c.fill();
+    // 胸像戴的复古太阳镜（梗）
+    c.fillStyle = '#111'; c.fillRect(bx + 8, by - 104, 34, 9); c.fillStyle = C.cyan; c.fillRect(bx + 12, by - 102, 26, 2);
+  }
+
+  // ---------- 角色：深色平涂 → 双色轮廓辉光 ----------
+  function girl(c, G, ch, t) {
+    const pal = { skin: '#f4c4d8', skinS: '#b8789e', hair: '#ffe08a', hairS: '#d89a5a', top: '#8f7cf6', topS: '#5a44c8', skirt: '#4fd0e0', skirtS: '#2a7a9a' };
+    c.save(); c.lineJoin = 'round'; c.lineCap = 'round';
+    const fill = (p, a, b, x0 = 1100, x1 = 1460) => { if (!p) return; const g = c.createLinearGradient(x0, 0, x1, 0); g.addColorStop(0, a); g.addColorStop(1, b); c.fillStyle = g; c.fill(p); };
+    fill(G.farSleeve, pal.topS, pal.topS); fill(G.farHand, pal.skinS, pal.skinS);
+    fill(G.skirt, pal.skirt, pal.skirtS);
+    c.save(); c.clip(G.skirt); c.strokeStyle = 'rgba(20,40,80,.35)'; c.lineWidth = 3; for (let x = 1100; x < 1460; x += 22) { c.beginPath(); c.moveTo(x, 640); c.lineTo(x - 30, 940); c.stroke(); } c.restore();   // 百褶
+    fill(G.shoe, '#fff', '#c8c8ff');
+    fill(G.torso, pal.top, pal.topS, 1290, 1420);
+    fill(G.neck, pal.skin, pal.skinS, 1286, 1324);
+    { const nk = G.A.neck; c.fillStyle = '#ffffff'; c.beginPath(); c.moveTo(nk[0] - 22, nk[1] - 4); c.lineTo(nk[0] + 26, nk[1]); c.lineTo(nk[0] + 4, nk[1] + 34); c.closePath(); c.fill(); c.fillStyle = C.cyan; c.fillRect(nk[0] - 4, nk[1] + 40, 6, 120); }   // 白领口＋青色拉链线
+    fill(G.hairBack, pal.hair, pal.hairS, 1260, 1410); fill(G.bun, pal.hair, pal.hairS);
+    // 发圈（粉）
+    c.strokeStyle = C.hot; c.lineWidth = 8; c.beginPath(); c.arc(G.bunSpiral[0] - 18, G.bunSpiral[1] + 6, 14, -1.2, 1.6); c.stroke();
+    fill(G.face, pal.skin, pal.skinS, 1250, 1330); fill(G.bangs, pal.hair, pal.hairS, 1250, 1335);
+    c.strokeStyle = 'rgba(200,120,60,.6)'; c.lineWidth = 2; G.hairLines.forEach(h => c.stroke(h));
+    if (ch.blink) { c.strokeStyle = '#2a0a3a'; c.lineWidth = 2.6; c.stroke(G.lid); }
+    else { c.fillStyle = '#2a0a3a'; c.beginPath(); c.ellipse(G.eye.x - 1, G.eye.y + 1, 4, 5.5, 0, 0, TAU); c.fill(); c.fillStyle = C.cyan; c.beginPath(); c.arc(G.eye.x - 2, G.eye.y - 1, 1.6, 0, TAU); c.fill(); c.strokeStyle = '#2a0a3a'; c.lineWidth = 2.4; c.stroke(G.lid); }
+    c.fillStyle = C.hot; c.beginPath(); c.moveTo(...G.lips[0]); c.lineTo(...G.lips[1]); c.lineTo(...G.lips[2]); c.closePath(); c.fill();
+    fill(G.upperArm, pal.top, pal.topS, 1200, 1380); fill(G.foreArm, pal.top, pal.topS, 1200, 1380); fill(G.cuff, '#fff', '#d8c8ff', 1200, 1300); fill(G.hand, pal.skin, pal.skinS, 1180, 1260);
+    RIG.drawCup(c, G.cup, { body: '#1a0830', rim: '#ff9ad6', hw: 6 });
+    c.save(); c.translate(G.cup.x, G.cup.y); c.rotate(G.cup.tilt); c.beginPath(); c.moveTo(-G.cup.w / 2, 0); c.lineTo(-G.cup.w * 0.42, G.cup.h); c.lineTo(G.cup.w * 0.42, G.cup.h); c.lineTo(G.cup.w / 2, 0); glowLine(c, C.cyan, 2, 10); c.restore();
+    c.fillStyle = pal.skin; c.beginPath(); c.arc(G.thumb[0], G.thumb[1], 7, 0, TAU); c.fill();
+    // 轮廓辉光：朝窗（左）的一侧粉、背面青——同一条路径描两次，用 clip 半屏分色
+    const outline = [G.skirt, G.torso, G.face, G.hairBack, G.bun, G.upperArm, G.foreArm];
+    [[C.pink, 0, 1290], [C.cyan, 1290, W]].forEach(([col, a, b]) => { c.save(); c.beginPath(); c.rect(a, 0, b - a, H); c.clip(); c.shadowColor = col; c.shadowBlur = 16; c.strokeStyle = col; c.lineWidth = 3; outline.forEach(p => p && c.stroke(p)); c.restore(); });
+    c.restore();
+  }
+  function cat(c, K) {
+    c.save(); c.lineCap = 'round'; c.lineJoin = 'round';
+    c.strokeStyle = '#ff9a4a'; c.lineWidth = K.tailW; c.stroke(K.tail);
+    const tip = K.tailPts[K.tailPts.length - 1]; c.fillStyle = '#fff0fa'; c.beginPath(); c.arc(tip[0], tip[1], K.tailW / 2, 0, TAU); c.fill();
+    const og = c.createLinearGradient(420, 0, 660, 0); og.addColorStop(0, '#ffb070'); og.addColorStop(1, '#c0502a'); c.fillStyle = og; c.fill(K.body);
+    K.legs.forEach(l => { c.fillStyle = '#fff0fa'; c.fill(l); }); c.fillStyle = '#fff0fa'; c.fill(K.white);
+    c.fillStyle = og; c.fill(K.head);
+    c.save(); c.clip(K.head); c.fillStyle = '#fff0fa'; c.beginPath(); c.ellipse(K.nose[0] - 22, K.nose[1] + 12, 36, 26, 0, 0, TAU); c.fill(); c.restore();
+    c.strokeStyle = '#a03a1a'; c.lineWidth = 7; K.stripes.forEach(s => { c.beginPath(); c.moveTo(...s[0]); c.lineTo(...s[1]); c.stroke(); });
+    c.fillStyle = '#ff9ad6'; K.earInner.forEach(e => { c.beginPath(); e.forEach((p, i) => i ? c.lineTo(...p) : c.moveTo(...p)); c.fill(); });
+    K.eyes.forEach(e => { if (K.blink) { c.strokeStyle = '#2a0a3a'; c.lineWidth = 3; c.beginPath(); c.moveTo(e.x - 8, e.y); c.lineTo(e.x + 8, e.y); c.stroke(); }
+      else { c.shadowColor = C.cyan; c.shadowBlur = 10; c.fillStyle = C.cyan; c.beginPath(); c.arc(e.x, e.y, 8, 0, TAU); c.fill(); c.shadowBlur = 0; c.fillStyle = '#12052a'; c.beginPath(); c.ellipse(e.x + 2, e.y, 2.4, 6.5, 0, 0, TAU); c.fill(); } });
+    c.fillStyle = C.hot; c.beginPath(); c.arc(K.nose[0], K.nose[1], 5, 0, TAU); c.fill();
+    c.strokeStyle = '#ffe8ff'; c.lineWidth = 1.4; K.whiskers.forEach(w => { c.beginPath(); c.moveTo(...w[0]); c.lineTo(...w[1]); c.stroke(); });
+    [[C.pink, 0, 560], [C.cyan, 560, 900]].forEach(([col, a, b]) => { c.save(); c.beginPath(); c.rect(a, 0, b - a, H); c.clip(); c.shadowColor = col; c.shadowBlur = 14; c.strokeStyle = col; c.lineWidth = 3; [K.body, K.head].forEach(p => c.stroke(p)); c.restore(); });
+    c.restore();
+  }
+
+  // ---------- ② VHS 后期：P.vhs（RGB 通道分离＋跟踪噪声带撕裂＋扫描线＋OSD＋暗角） ----------
+  const vhs = (c, S, t, lt) => P.vhs(c, S, t, lt, { osd: { label: 'PLAY', date: 'SEP. 04 2011', clock: '23:59' } });
+
+  return {
+    draw(c, lt, t) {
+      const ch = P.choreo(lt, t);
+      const S = P.scratch('vwS'), g = S.getContext('2d'); g.reset();
+      g.drawImage(bg(), 0, 0);
+      floorGrid(g, t);
+      sunset(g, t);
+      neonSign(g, t);
+      dialog(g, lt);
+      table(g, t);
+      const K = RIG.cat({ tail: ch.tail, blink: ch.blink, breathe: ch.breathe });
+      cat(g, K);
+      const G = RIG.girl({ cup: ch.cup, sip: ch.sip, breathe: ch.breathe });
+      girl(g, G, ch, t);
+      P.steam(g, t, G.cup.x, G.cup.y - 8, { h: 60, n: 2, color: 'rgba(63,246,255,.85)', width: 3, spread: 12, wobble: 8 });
+      vhs(c, S, t, lt);
+    },
+  };
+})();