cotutor 0.2.0 → 0.3.0

package/dist/ui/kid/letters.d.ts

@@ -0,0 +1,26 @@
+export interface LetterGlyph {
+    advance: number;
+    /** 一笔一条点序列,数组顺序即笔顺 */
+    strokes: [number, number][][];
+}
+export interface LettersData {
+    glyphs: Record<string, LetterGlyph>;
+    /** 字间距、空格宽(x 高为 1);空格宽用 src/chalk/glyphs 的,字间距比它松(GAP) */
+    gap: number;
+    space: number;
+}
+/** 字形包里没有的两个:连字符、撇号(单词听写的四线格也用,src/ui/dictation/en-box.ts) */
+export declare const EXTRA: Record<string, LetterGlyph>;
+/** 字间距(x 高为 1):src/chalk/glyphs 缺省 0.22,笔画粗 0.2,两个圈挨着的字母(a p)几乎碰上;孩子认字要松一点 */
+export declare const GAP = 0.35;
+/**
+ * 每个字母的宽(x 高为 1)与字间距、空格宽:拼进孩子端页面(__WORD_ADV__),单词卡同步就排得出、画出准确的大小,
+ * 笔画数据(/api/kid/letters/<词>)晚到只往里填——排版的量具量的是终态(《卡片协议.md》「单词卡」)
+ */
+export declare function letterAdvances(): {
+    adv: Record<string, number>;
+    gap: number;
+    space: number;
+};
+/** 一个词里用到的字形;不是单词卡写得出的词 → null */
+export declare function lettersData(word: string): LettersData | null;

package/dist/ui/kid/letters.js

@@ -0,0 +1,51 @@
+/**
+ * 单词卡的笔顺数据:`GET /api/kid/letters/<词>` 用 src/chalk/glyphs(52 个拉丁字母的印刷体笔顺,四线三格归一化)把词里每个字母采成点序列——
+ * 坐标以 x 高为 1:基线 y = 0、x 高顶 -1、升部顶 / 大写顶 -2、降部底 +1,y 向下;每个字母左边界 x = 0,advance 是它的宽。
+ * 连字符、撇号字形包里没有,这里补两笔。数据是确定性资源,不经模型;词里有写不出的字 → null,页面退成字体的字。
+ */
+import { GLYPHS, SPACE_ADVANCE, sampleStroke } from "../../chalk/glyphs/index.js";
+import { WORD_MAX, WORD_RE } from "../../board/cards/index.js";
+/** 字形包里没有的两个:连字符、撇号(单词听写的四线格也用,src/ui/dictation/en-box.ts) */
+export const EXTRA = {
+    '-': { advance: 0.5, strokes: [[[0.05, -0.5], [0.45, -0.5]]] },
+    "'": { advance: 0.15, strokes: [[[0.08, -2], [0.08, -1.55]]] },
+};
+/** 字间距(x 高为 1):src/chalk/glyphs 缺省 0.22,笔画粗 0.2,两个圈挨着的字母(a p)几乎碰上;孩子认字要松一点 */
+export const GAP = 0.35;
+const round = (v) => Math.round(v * 1000) / 1000;
+const cache = new Map();
+function glyphOf(ch) {
+    const hit = cache.get(ch);
+    if (hit)
+        return hit;
+    const g = GLYPHS.get(ch);
+    const out = g ? { advance: g.advance, strokes: g.strokes.map((st) => sampleStroke(st).map(([x, y]) => [round(x), round(y)])) } : EXTRA[ch] ?? null;
+    if (out)
+        cache.set(ch, out);
+    return out;
+}
+/**
+ * 每个字母的宽(x 高为 1)与字间距、空格宽:拼进孩子端页面(__WORD_ADV__),单词卡同步就排得出、画出准确的大小,
+ * 笔画数据(/api/kid/letters/<词>)晚到只往里填——排版的量具量的是终态(《卡片协议.md》「单词卡」)
+ */
+export function letterAdvances() {
+    const adv = {};
+    for (const [ch, g] of GLYPHS)
+        adv[ch] = g.advance;
+    for (const [ch, g] of Object.entries(EXTRA))
+        adv[ch] = g.advance;
+    return { adv, gap: GAP, space: SPACE_ADVANCE };
+}
+/** 一个词里用到的字形;不是单词卡写得出的词 → null */
+export function lettersData(word) {
+    if (!WORD_RE.test(word) || word.length > WORD_MAX)
+        return null;
+    const glyphs = {};
+    for (const ch of new Set(word.replace(/ /g, ''))) {
+        const g = glyphOf(ch);
+        if (!g)
+            return null;
+        glyphs[ch] = g;
+    }
+    return { glyphs, gap: GAP, space: SPACE_ADVANCE };
+}

package/dist/ui/kid/photo-edit.d.ts

@@ -0,0 +1,83 @@
+/**
+ * 作业照片的编辑:转 90°、裁剪框、红笔笔画的坐标,纯函数,离屏可测。
+ * 页面(kid-page.ts)内联本文件(剥类型、去 export),只管画和点。
+ *
+ * 坐标系只有一个:「转过之后的原图」(原分辨率,已按 EXIF 摆正)。裁剪框与笔画都存在这里,
+ * 再转 90° 时一起变过去;导出 = 转 → 裁 → 画笔画 → 缩到长边 ≤ maxSide。
+ */
+export interface Pt {
+    x: number;
+    y: number;
+}
+export interface Rect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+export interface Stroke {
+    /** 线宽(图坐标) */
+    width: number;
+    pts: Pt[];
+}
+export type Rot = 0 | 1 | 2 | 3;
+export type Grip = 'nw' | 'ne' | 'sw' | 'se' | 'move';
+export interface PhotoEdit {
+    /** 原图宽高(没转过) */
+    w: number;
+    h: number;
+    /** 顺时针转了几个 90° */
+    rot: Rot;
+    /** 转过之后的图坐标;null = 整张 */
+    crop: Rect | null;
+    strokes: Stroke[];
+}
+/**
+ * 上传前长边缩到这么长。2000 是 claude CLI 的 Read 工具给模型的上限(2.1.275 实测:2200 / 2560 的图到模型手里都是 2000×1500),再大白传;
+ * 原来的 1600 下一页六道题、每个手写数字只有二三十像素高,老师认不准就自己裁图放大再读(一轮 16 次模型来回)。2000×1500 约 3,900 视觉 token
+ */
+export declare const PHOTO_MAX_SIDE = 2000;
+/** 相册一次最多选几张(服务端上限 9 不变) */
+export declare const PHOTO_ALBUM_MAX = 4;
+/** 红笔:半透明,孩子圈的圈不把字盖死 */
+export declare const PEN_COLOR = "rgba(230,40,40,.65)";
+/** 线宽 = 当前看到那块的长边 × 这个 */
+export declare const PEN_RATIO = 0.015;
+/** 裁剪框最小边(显示 px):再小就不是裁剪是误触 */
+export declare const CROP_MIN_PX = 64;
+export declare function newEdit(w: number, h: number): PhotoEdit;
+/** 转过之后的宽高 */
+export declare function rotatedSize(e: PhotoEdit): {
+    w: number;
+    h: number;
+};
+/** 看到 / 导出的那块:有框就是框,没框就是整张 */
+export declare function region(e: PhotoEdit): Rect;
+/** 顺时针转 90°:框与笔画一起变过去,不重置 */
+export declare function rotateEdit(e: PhotoEdit): PhotoEdit;
+/**
+ * 原图 → 转过之后的图 的 canvas 变换 [a, b, c, d, e, f](ctx.transform 的参数顺序):
+ * X = a·x + c·y + e,Y = b·x + d·y + f
+ */
+export declare function rotMatrix(e: PhotoEdit): [number, number, number, number, number, number];
+/** 拖裁剪框:四角改大小、框内平移;夹在 W×H 里,边不小于 min(都是图坐标) */
+export declare function dragCrop(from: Rect, grip: Grip, dx: number, dy: number, W: number, H: number, min: number): Rect;
+/** 框铺满整张(或几乎整张)就当没裁 */
+export declare function setCrop(e: PhotoEdit, r: Rect): PhotoEdit;
+/** 把一块 w×h 放进 boxW×boxH:缩放与显示大小(只缩不放大由调用方决定,这里铺满) */
+export declare function fitScale(w: number, h: number, boxW: number, boxH: number): number;
+/** 新起一笔:线宽跟着当前看到的那块走 */
+export declare function newStroke(e: PhotoEdit, p: Pt): Stroke;
+export interface ExportPlan {
+    /** 输出宽高 */
+    w: number;
+    h: number;
+    /** 转过之后的图里取哪块 */
+    src: Rect;
+    /** 图坐标 → 输出 px */
+    scale: number;
+}
+/** 导出:取 region,长边缩到 ≤ maxSide(不放大) */
+export declare function exportPlan(e: PhotoEdit, maxSide?: number): ExportPlan;
+/** 改过没有(没改过的照片导出只是缩小) */
+export declare function edited(e: PhotoEdit): boolean;

package/dist/ui/kid/photo-edit.js

@@ -0,0 +1,106 @@
+/**
+ * 作业照片的编辑:转 90°、裁剪框、红笔笔画的坐标,纯函数,离屏可测。
+ * 页面(kid-page.ts)内联本文件(剥类型、去 export),只管画和点。
+ *
+ * 坐标系只有一个:「转过之后的原图」(原分辨率,已按 EXIF 摆正)。裁剪框与笔画都存在这里,
+ * 再转 90° 时一起变过去;导出 = 转 → 裁 → 画笔画 → 缩到长边 ≤ maxSide。
+ */
+/**
+ * 上传前长边缩到这么长。2000 是 claude CLI 的 Read 工具给模型的上限(2.1.275 实测:2200 / 2560 的图到模型手里都是 2000×1500),再大白传;
+ * 原来的 1600 下一页六道题、每个手写数字只有二三十像素高,老师认不准就自己裁图放大再读(一轮 16 次模型来回)。2000×1500 约 3,900 视觉 token
+ */
+export const PHOTO_MAX_SIDE = 2000;
+/** 相册一次最多选几张(服务端上限 9 不变) */
+export const PHOTO_ALBUM_MAX = 4;
+/** 红笔:半透明,孩子圈的圈不把字盖死 */
+export const PEN_COLOR = 'rgba(230,40,40,.65)';
+/** 线宽 = 当前看到那块的长边 × 这个 */
+export const PEN_RATIO = 0.015;
+/** 裁剪框最小边(显示 px):再小就不是裁剪是误触 */
+export const CROP_MIN_PX = 64;
+export function newEdit(w, h) {
+    return { w, h, rot: 0, crop: null, strokes: [] };
+}
+/** 转过之后的宽高 */
+export function rotatedSize(e) {
+    return e.rot % 2 ? { w: e.h, h: e.w } : { w: e.w, h: e.h };
+}
+/** 看到 / 导出的那块:有框就是框,没框就是整张 */
+export function region(e) {
+    const s = rotatedSize(e);
+    return e.crop ?? { x: 0, y: 0, w: s.w, h: s.h };
+}
+/** 在高为 H 的图里顺时针转 90°:(x, y) → (H − y, x) */
+function turnPt(p, H) {
+    return { x: H - p.y, y: p.x };
+}
+/** 顺时针转 90°:框与笔画一起变过去,不重置 */
+export function rotateEdit(e) {
+    const H = rotatedSize(e).h;
+    const crop = e.crop ? { x: H - e.crop.y - e.crop.h, y: e.crop.x, w: e.crop.h, h: e.crop.w } : null;
+    return { ...e, rot: ((e.rot + 1) % 4), crop, strokes: e.strokes.map((s) => ({ ...s, pts: s.pts.map((p) => turnPt(p, H)) })) };
+}
+/**
+ * 原图 → 转过之后的图 的 canvas 变换 [a, b, c, d, e, f](ctx.transform 的参数顺序):
+ * X = a·x + c·y + e,Y = b·x + d·y + f
+ */
+export function rotMatrix(e) {
+    switch (e.rot) {
+        case 1:
+            return [0, 1, -1, 0, e.h, 0];
+        case 2:
+            return [-1, 0, 0, -1, e.w, e.h];
+        case 3:
+            return [0, -1, 1, 0, 0, e.w];
+        default:
+            return [1, 0, 0, 1, 0, 0];
+    }
+}
+const clamp = (v, lo, hi) => Math.min(Math.max(v, lo), hi);
+/** 拖裁剪框:四角改大小、框内平移;夹在 W×H 里,边不小于 min(都是图坐标) */
+export function dragCrop(from, grip, dx, dy, W, H, min) {
+    min = Math.min(min, W, H);
+    if (grip === 'move')
+        return { ...from, x: clamp(from.x + dx, 0, W - from.w), y: clamp(from.y + dy, 0, H - from.h) };
+    let { x, y, w, h } = from;
+    if (grip === 'nw' || grip === 'sw') {
+        const nx = clamp(from.x + dx, 0, from.x + from.w - min);
+        w = from.w + (from.x - nx);
+        x = nx;
+    }
+    else
+        w = clamp(from.w + dx, min, W - from.x);
+    if (grip === 'nw' || grip === 'ne') {
+        const ny = clamp(from.y + dy, 0, from.y + from.h - min);
+        h = from.h + (from.y - ny);
+        y = ny;
+    }
+    else
+        h = clamp(from.h + dy, min, H - from.y);
+    return { x, y, w, h };
+}
+/** 框铺满整张(或几乎整张)就当没裁 */
+export function setCrop(e, r) {
+    const s = rotatedSize(e);
+    const full = r.x <= 0.5 && r.y <= 0.5 && r.w >= s.w - 1 && r.h >= s.h - 1;
+    return { ...e, crop: full ? null : r };
+}
+/** 把一块 w×h 放进 boxW×boxH:缩放与显示大小(只缩不放大由调用方决定,这里铺满) */
+export function fitScale(w, h, boxW, boxH) {
+    return Math.max(Math.min(boxW / w, boxH / h), 1e-6);
+}
+/** 新起一笔:线宽跟着当前看到的那块走 */
+export function newStroke(e, p) {
+    const r = region(e);
+    return { width: Math.max(r.w, r.h) * PEN_RATIO, pts: [p] };
+}
+/** 导出:取 region,长边缩到 ≤ maxSide(不放大) */
+export function exportPlan(e, maxSide = PHOTO_MAX_SIDE) {
+    const src = region(e);
+    const scale = Math.min(1, maxSide / Math.max(src.w, src.h, 1));
+    return { w: Math.max(1, Math.round(src.w * scale)), h: Math.max(1, Math.round(src.h * scale)), src, scale };
+}
+/** 改过没有(没改过的照片导出只是缩小) */
+export function edited(e) {
+    return e.rot !== 0 || e.crop !== null || e.strokes.length > 0;
+}

package/dist/ui/kid/photo-ui.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 孩子端的拍照,一个相机、一套骨架(设计稿 https://claude.ai/artifact/SPtjRhH9aLoLQoGfCNJaVz)。
+ * 相机就是老师页输入条「按住说话」前面那个;哪里拍照都用它,字只用「拍照」「相册」「重拍」。主按钮老师的颜色(--sc),次按钮白底。
+ * 分场景靠用途图(田字格「字」、四线格「Aa」、对话气泡「Hi」),不靠换按钮;用途图照首页老师卡上「拍照听写」那个(cards/tutor/card.css 的 .bt-x-photo .pg),两处改要一起改。
+ * 字符串里没有反斜杠与反引号:插进各页的模板字符串。
+ */
+/** 相机图标;size 是 px,不写多大由所在处的样式定 */
+export declare const cameraSvg: (size?: number, sw?: number) => string;
+/** 相册图标 */
+export declare const albumSvg: (size?: number, sw?: number) => string;
+/** 播放:「接着写」「接着上」,听写页的「开始」同一个(src/ui/dictation/ui.ts) */
+export declare const playSvg: (size?: number, sw?: number) => string;
+/** 拍照屏的三种场景:语文听写、英语听写、口语课;按钮一样,用途图、标题、一句话不同 */
+export type SnapKind = 'zh' | 'en' | 'talk';
+/** 拍照屏(听写、口语课同一个):中间老师的大头像、用途图与标题、一句话、拍照 / 相册;接着上一回的那块在最上面 */
+export declare const snapHtml: (o: {
+    kind: SnapKind;
+    id: string;
+    cam: string;
+    lib: string;
+}) => string;
+/** 拍照屏的样式;页面要有 --sc(老师的颜色)、--line、--dim。#snap-cam-btn 加 .alt 让成次要(有「接着写」时) */
+export declare const SNAP_CSS = "\n  .snap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:58px 0 24px; text-align:center; }\n  .snap-av { width:120px; height:120px; flex:none; }\n  .snap-av .tfav { width:120px; height:120px; font-size:56px; }\n  .snap-ttl { display:flex; align-items:center; gap:20px; }\n  .snap-ttl h1 { margin:0; font-size:32px; font-weight:700; }\n  .snap-sub { display:flex; flex-direction:column; gap:6px; max-width:560px; }\n  .snap-sub b { font-size:20px; font-weight:400; }\n  .snap-sub span { font-size:16px; color:var(--dim); }\n  .snap-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }\n  .shoot { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; padding:0 34px; border-radius:32px; background:var(--sc); color:#fff; border:1px solid var(--sc); font-size:20px; font-weight:600; cursor:pointer; }\n  .shoot.alt { background:#fff; color:var(--ink); border-color:var(--line); }\n  .shoot svg { flex:none; }\n  .shoot input { position:absolute; inset:0; opacity:0; font-size:200px; cursor:pointer; }\n  .shoot:active { transform:scale(.96); filter:brightness(.94); }\n  .pg { position:relative; flex:none; width:60px; height:60px; }\n  .pg i { position:absolute; inset:0; display:grid; place-items:center; font-style:normal; font-size:36px; line-height:1; color:#c9b48a; border:1.5px solid #c9a660; background:repeating-linear-gradient(to bottom,#e3cc9a 0 3px,transparent 3px 6px) center/1.5px 100% no-repeat,repeating-linear-gradient(to right,#e3cc9a 0 3px,transparent 3px 6px) center/100% 1.5px no-repeat,#fff; }\n  .pg.en { width:84px; height:52px; }\n  .pg.en i { font-size:31px; font-family:\"Chalkboard SE\",\"Comic Sans MS\",\"Marker Felt\",sans-serif; color:#8fa0b2; border-color:#c9d2de; background:linear-gradient(#cdd6e2,#cdd6e2) 0 16%/100% 1.5px no-repeat,linear-gradient(#cdd6e2,#cdd6e2) 0 40%/100% 1.5px no-repeat,linear-gradient(#e39a9a,#e39a9a) 0 66%/100% 2px no-repeat,linear-gradient(#cdd6e2,#cdd6e2) 0 90%/100% 1.5px no-repeat,#fff; }\n  /* \u53E3\u8BED\u8BFE:\u5BF9\u8BDD\u6C14\u6CE1\u300CHi\u300D(\u9996\u9875\u8001\u5E08\u5361\u4E0A\u540C\u4E00\u4E2A,cards/tutor/card.css \u7684 .bt-x-talk) */\n  .pg.talk { width:72px; height:56px; }\n  .pg.talk i { font-size:28px; font-weight:700; font-family:\"Chalkboard SE\",\"Comic Sans MS\",\"Marker Felt\",sans-serif; color:var(--sc); border:1.5px solid color-mix(in srgb, var(--sc) 40%, #fff); border-radius:18px 18px 18px 5px; background:#fff; }\n  .pg .cam { position:absolute; right:-11px; bottom:-10px; width:32px; height:32px; border-radius:50%; background:var(--sc); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 2px var(--paper); }\n  /* \u4ECA\u5929\u6CA1\u5199\u5B8C\u7684\u62CD\u7167\u542C\u5199:\u62CD\u7167\u5C4F\u6700\u4E0A\u9762\u4E00\u5757,\u70B9\u4E86\u63A5\u7740\u5199 */\n  .resume { display:flex; align-items:center; gap:24px; padding:12px 12px 12px 26px; background:#fff; border:1px solid var(--line); border-radius:32px; text-align:left; box-shadow:0 2px 10px #00000010; }\n  .resume b { display:block; font-size:20px; } .resume small { display:block; color:var(--dim); font-size:15px; }\n  @media (max-height:600px) { .snap { gap:14px; } .snap-av, .snap-av .tfav { width:84px; height:84px; font-size:40px; } }\n";

package/dist/ui/kid/photo-ui.js

@@ -0,0 +1,60 @@
+/**
+ * 孩子端的拍照,一个相机、一套骨架(设计稿 https://claude.ai/artifact/SPtjRhH9aLoLQoGfCNJaVz)。
+ * 相机就是老师页输入条「按住说话」前面那个;哪里拍照都用它,字只用「拍照」「相册」「重拍」。主按钮老师的颜色(--sc),次按钮白底。
+ * 分场景靠用途图(田字格「字」、四线格「Aa」、对话气泡「Hi」),不靠换按钮;用途图照首页老师卡上「拍照听写」那个(cards/tutor/card.css 的 .bt-x-photo .pg),两处改要一起改。
+ * 字符串里没有反斜杠与反引号:插进各页的模板字符串。
+ */
+const CAMERA_PATHS = '<path d="M4 8h3l2-3h6l2 3h3v11H4z"></path><circle cx="12" cy="13" r="3.5"></circle>';
+const ALBUM_PATHS = '<rect x="3" y="5" width="18" height="14" rx="2"></rect><path d="M3 15l5-4 4 3 3-2 6 4"></path>';
+const svg = (paths, size, sw = 2) => `<svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="${sw}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+/** 相机图标;size 是 px,不写多大由所在处的样式定 */
+export const cameraSvg = (size = 22, sw = 2) => svg(CAMERA_PATHS, size, sw);
+/** 相册图标 */
+export const albumSvg = (size = 22, sw = 2) => svg(ALBUM_PATHS, size, sw);
+/** 播放:「接着写」「接着上」,听写页的「开始」同一个(src/ui/dictation/ui.ts) */
+export const playSvg = (size = 22, sw = 1.8) => svg('<path d="M8 5.5v13l10.5-6.5z"></path>', size, sw);
+const SNAP = {
+    zh: { pg: '<span class="pg" aria-hidden="true"><i>字</i>', title: '拍照听写', say: '拍语文书上要写的词', more: '词语、写字,或者老师发的听写单。拍正一点,字要清楚。', resume: '刚才的还没写完', go: '接着写' },
+    en: { pg: '<span class="pg en" aria-hidden="true"><i>Aa</i>', title: '拍照听写', say: '拍英语书上要写的单词', more: '课本上的单词表,或者老师发的听写单。拍正一点,字母要清楚。', resume: '刚才的还没写完', go: '接着写' },
+    talk: { pg: '<span class="pg talk" aria-hidden="true"><i>Hi</i>', title: '口语课', say: '拍今天学的那一页', more: '先跟老师读,再打电话用这些词聊。拍印刷的字,手写的先别拍。', resume: '上次的口语单', go: '接着上' },
+};
+/** 拍照屏(听写、口语课同一个):中间老师的大头像、用途图与标题、一句话、拍照 / 相册;接着上一回的那块在最上面 */
+export const snapHtml = (o) => {
+    const k = SNAP[o.kind];
+    return `<div class="snap" id="${o.id}">
+    <div class="resume" id="snap-resume" hidden><div><b>${k.resume}</b><small id="snap-resume-sub"></small></div><button class="main" type="button" id="snap-resume-go">${playSvg()}<span>${k.go}</span></button></div>
+    <span class="snap-av" id="snap-av" aria-hidden="true"></span>
+    <div class="snap-ttl">${k.pg}<span class="cam">${cameraSvg(17, 2.4)}</span></span><h1>${k.title}</h1></div>
+    <div class="snap-sub"><b>${k.say}</b><span>${k.more}</span></div>
+    <div class="snap-btns"><label class="shoot" id="snap-cam-btn">${cameraSvg(26)}<span>拍照</span><input type="file" accept="image/*" capture="environment" id="${o.cam}"></label><label class="shoot alt">${albumSvg(26)}<span>相册</span><input type="file" accept="image/*" id="${o.lib}"></label></div>
+  </div>`;
+};
+/** 拍照屏的样式;页面要有 --sc(老师的颜色)、--line、--dim。#snap-cam-btn 加 .alt 让成次要(有「接着写」时) */
+export const SNAP_CSS = `
+  .snap { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:58px 0 24px; text-align:center; }
+  .snap-av { width:120px; height:120px; flex:none; }
+  .snap-av .tfav { width:120px; height:120px; font-size:56px; }
+  .snap-ttl { display:flex; align-items:center; gap:20px; }
+  .snap-ttl h1 { margin:0; font-size:32px; font-weight:700; }
+  .snap-sub { display:flex; flex-direction:column; gap:6px; max-width:560px; }
+  .snap-sub b { font-size:20px; font-weight:400; }
+  .snap-sub span { font-size:16px; color:var(--dim); }
+  .snap-btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin-top:8px; }
+  .shoot { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:64px; padding:0 34px; border-radius:32px; background:var(--sc); color:#fff; border:1px solid var(--sc); font-size:20px; font-weight:600; cursor:pointer; }
+  .shoot.alt { background:#fff; color:var(--ink); border-color:var(--line); }
+  .shoot svg { flex:none; }
+  .shoot input { position:absolute; inset:0; opacity:0; font-size:200px; cursor:pointer; }
+  .shoot:active { transform:scale(.96); filter:brightness(.94); }
+  .pg { position:relative; flex:none; width:60px; height:60px; }
+  .pg i { position:absolute; inset:0; display:grid; place-items:center; font-style:normal; font-size:36px; line-height:1; color:#c9b48a; border:1.5px solid #c9a660; background:repeating-linear-gradient(to bottom,#e3cc9a 0 3px,transparent 3px 6px) center/1.5px 100% no-repeat,repeating-linear-gradient(to right,#e3cc9a 0 3px,transparent 3px 6px) center/100% 1.5px no-repeat,#fff; }
+  .pg.en { width:84px; height:52px; }
+  .pg.en i { font-size:31px; font-family:"Chalkboard SE","Comic Sans MS","Marker Felt",sans-serif; color:#8fa0b2; border-color:#c9d2de; background:linear-gradient(#cdd6e2,#cdd6e2) 0 16%/100% 1.5px no-repeat,linear-gradient(#cdd6e2,#cdd6e2) 0 40%/100% 1.5px no-repeat,linear-gradient(#e39a9a,#e39a9a) 0 66%/100% 2px no-repeat,linear-gradient(#cdd6e2,#cdd6e2) 0 90%/100% 1.5px no-repeat,#fff; }
+  /* 口语课:对话气泡「Hi」(首页老师卡上同一个,cards/tutor/card.css 的 .bt-x-talk) */
+  .pg.talk { width:72px; height:56px; }
+  .pg.talk i { font-size:28px; font-weight:700; font-family:"Chalkboard SE","Comic Sans MS","Marker Felt",sans-serif; color:var(--sc); border:1.5px solid color-mix(in srgb, var(--sc) 40%, #fff); border-radius:18px 18px 18px 5px; background:#fff; }
+  .pg .cam { position:absolute; right:-11px; bottom:-10px; width:32px; height:32px; border-radius:50%; background:var(--sc); color:#fff; display:grid; place-items:center; box-shadow:0 0 0 2px var(--paper); }
+  /* 今天没写完的拍照听写:拍照屏最上面一块,点了接着写 */
+  .resume { display:flex; align-items:center; gap:24px; padding:12px 12px 12px 26px; background:#fff; border:1px solid var(--line); border-radius:32px; text-align:left; box-shadow:0 2px 10px #00000010; }
+  .resume b { display:block; font-size:20px; } .resume small { display:block; color:var(--dim); font-size:15px; }
+  @media (max-height:600px) { .snap { gap:14px; } .snap-av, .snap-av .tfav { width:84px; height:84px; font-size:40px; } }
+`;