/* 桌宠（t-20261026-wybz mascot，js/workspace-mascot.js）
   一、行为层：位置、点击、提示气泡、一句话输入气泡、指向时的一道笔痕、移动 / 消失 / 出现。和形象无关。
   二、形象层：火柴人。部件名固定（mf-root / torso / head / face / eyes / arm / fore / leg / shin / fx），
       每个姿势只改一组角度变量。部件规则都限定在 .mf--stick 里。
   二·乙、正式形象（t-20261026-ic8o，t-20261027-pz69 进个性化）：a 手作圈 / a-horn 两点作角 / b 圆球 / c 小猫，同一套姿势名，限定在 .mf--ball 里。
       学生在设置「个性化」里选用哪个（js/workspace-mascot.js FIGURES），默认火柴人。
   三、设置里的形象选择：五格小形象，选中的那个抬手笑。
   颜色只引用 kaopy.css 的 token；减少动态时只切静态姿势，不播循环、不出粒子。 */

/* ================= 一、行为层 ================= */
.mascot-layer { position: fixed; inset: 0; z-index: calc(var(--z-topbar) + 5); pointer-events: none; }
.mascot-layer:not(.is-ready) { visibility: hidden; }

.mascot {
  position: absolute; left: 0; top: 0; width: 48px; height: 60px; padding: 0;
  border: 0; border-radius: var(--r-sm); background: none; color: var(--accent);
  cursor: pointer; pointer-events: auto; transform-origin: 0 0; -webkit-tap-highlight-color: transparent;
  transition: opacity 160ms linear;
  /* JS 写的量：移动时长；看向 / 指向的点换算出的上臂、前臂角度，身体前倾，眼睛和头的偏转；爬时贴到正文边上要挪多少。
     平时没有值（initial），各姿势用自己写在 var() 里的后备值 */
  --move-ms: 600ms; --point: initial; --point-fore: initial; --point-reach: initial; --lean: initial;
  --look-x: initial; --look-y: initial; --head-tilt: initial; --wall-x: initial;
}
.mascot:focus { outline: none; }
/* 键盘焦点：贴着当前姿势的一圈。站着框住整个人；坐着只框身子，不把头顶空着的一截一起框进去；趴着睡换成贴着躺姿（连同头顶的 z）的扁圆角框 */
.mascot:focus-visible::after {
  content: ''; position: absolute; inset: var(--ring, -4px); pointer-events: none;
  border: 2px solid var(--accent); border-radius: var(--ring-r, var(--r-sm));
}
.mascot:is([data-pose="sit"], [data-pose="nod"], [data-pose="slump"]) { --ring: 13px -4px -4px; }
.mascot[data-pose="sleep"] { --ring: 22px -7px -4px -9px; --ring-r: var(--r-md); }
.mascot-layer[data-mode="compact"] .mascot[data-pose="sleep"] { --ring: 22px -27px -4px 11px; }
/* 焦点环把躺着的身子和头顶的 z 一起圈进去；飘得最高的那个 z 这时不出，免得穿过环 */
.mascot[data-pose="sleep"]:focus-visible .mf-z-3 { visibility: hidden; }
.mascot-layer.is-gone .mascot,
.mascot-layer[data-mode="off"] .mascot { visibility: hidden; opacity: 0; pointer-events: none; }
/* 让开（主输入框从小形态那儿弹出来）：120ms 淡出，不在输入框上缩成一团 */
.mascot-layer[data-mode="off"] .mascot { transition: opacity 120ms linear, visibility 0s linear 120ms; }
.mascot.is-moving { transition: transform var(--move-ms) cubic-bezier(.45, .05, .35, 1), opacity 160ms linear; }
.mascot.is-moving[data-pose="hop"] { transition-timing-function: cubic-bezier(.3, .7, .3, 1); }
.mascot__fig { display: block; width: 100%; height: 100%; pointer-events: none; transform-origin: 50% 96%; transition: transform 140ms cubic-bezier(.3, 1.4, .5, 1); }
/* 悬停：微微踮一下（坐着时再直起身、抬手看你）；按下：脚底不动，整个人往下一压（T0，120ms） */
@media (hover: hover) { .mascot:hover:not([data-pose="sleep"]) .mascot__fig { transform: translateY(-2px); } }
.mascot:active .mascot__fig, .mascot:active:hover .mascot__fig { transform: scale(1.06, .9); transition-duration: 120ms; }

/* 消失：整个人原地一压、缩没，脚边两侧冒四团小烟；出现：从脚底弹出来 */
.mascot.is-vanishing .mascot__fig { animation: mascot-vanish 300ms cubic-bezier(.4, 0, .7, 1) forwards; }
.mascot.is-appearing .mascot__fig { animation: mascot-appear 400ms cubic-bezier(.3, 1.5, .5, 1); }
@keyframes mascot-vanish { 30% { transform: scale(1.08, .9); } 100% { transform: scale(.06); opacity: 0; } }
@keyframes mascot-appear { 0% { transform: scale(.1); opacity: 0; } 50% { opacity: 1; } 100% { transform: none; } }
.mascot__puff { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; }
.mascot__puff circle { fill: var(--canvas); stroke: var(--faint); stroke-width: 1.4; transform-box: view-box; opacity: 0; }
.mascot__puff circle:nth-child(1) { transform-origin: 17px 56px; --dx: -5px; --dy: -1px; }
.mascot__puff circle:nth-child(2) { transform-origin: 13px 52.5px; --dx: -5px; --dy: -4px; }
.mascot__puff circle:nth-child(3) { transform-origin: 31px 56px; --dx: 5px; --dy: -1px; }
.mascot__puff circle:nth-child(4) { transform-origin: 35px 52.5px; --dx: 5px; --dy: -4px; }
.mascot.is-vanishing .mascot__puff { opacity: 1; }
.mascot.is-vanishing .mascot__puff circle { animation: mascot-puff 300ms ease-out both; }
.mascot.is-vanishing .mascot__puff circle:nth-child(even) { animation-delay: 40ms; }
@keyframes mascot-puff { 0% { opacity: 0; transform: scale(.3); } 35% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.15); } }

/* 指向时的笔痕：像老师用蓝笔在那一处底下划一道（按钮底下、那段话的最后一行底下），从左往右划出来 */
.mascot-mark { position: absolute; inset: 0; pointer-events: none; }
.mascot-mark__line { position: absolute; left: 0; top: 0; height: 6px; overflow: visible; color: var(--accent); transform-origin: 0 50%; }
.mascot-mark__line path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
/* 气泡弹出、手指过去（0–220ms）之后划，180ms 一道（两道时错开 60ms）；字在它之后最后出现 */
.mascot-mark.is-entering .mascot-mark__line { animation: mascot-mark-draw 180ms cubic-bezier(.4, 0, .2, 1) 200ms both; }
.mascot-mark.is-entering .mascot-mark__line + .mascot-mark__line { animation-delay: 260ms; }
.mascot-mark.is-leaving { animation: mascot-fade-out 170ms ease-in forwards; }
@keyframes mascot-mark-draw { from { transform: scaleX(0); } }
@keyframes mascot-fade-out { to { opacity: 0; } }

/* 气泡：像聊天里对方发来的一条消息，尾巴指向小人 */
.mascot-bubble {
  --tail-x: 24px; --tail-y: 20px;
  position: absolute; left: 0; top: 0; pointer-events: auto;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); box-shadow: var(--shadow-pop); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-ui); font-weight: var(--fw-regular); line-height: var(--lh-ui);
}
.mascot-bubble::after {
  content: ''; position: absolute; width: 10px; height: 10px;
  border: 1px solid var(--border); background: var(--surface);
}
.mascot-bubble[data-side="left"]::after { right: -6px; top: calc(var(--tail-y) - 5px); border-left: 0; border-bottom: 0; transform: rotate(45deg); border-top-right-radius: 2px; }
.mascot-bubble[data-side="right"]::after { left: -6px; top: calc(var(--tail-y) - 5px); border-right: 0; border-top: 0; transform: rotate(45deg); border-bottom-left-radius: 2px; }
.mascot-bubble[data-side="top"]::after { bottom: -6px; left: calc(var(--tail-x) - 5px); border-left: 0; border-top: 0; transform: rotate(45deg); border-bottom-right-radius: 2px; }
.mascot-bubble[data-side="left"] { transform-origin: 100% var(--tail-y); }
.mascot-bubble[data-side="right"] { transform-origin: 0 var(--tail-y); }
.mascot-bubble[data-side="top"] { transform-origin: var(--tail-x) 100%; }
.mascot-bubble.is-entering { animation: mascot-bubble-in 220ms cubic-bezier(.3, 1.45, .5, 1); }
.mascot-bubble.is-leaving { animation: mascot-bubble-out 170ms ease-in forwards; pointer-events: none; }
@keyframes mascot-bubble-in { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: none; } }
@keyframes mascot-bubble-out { to { opacity: 0; transform: scale(.92); } }

.mascot-hint { width: max-content; padding: 8px 12px; cursor: default; }
/* 页边放不下、只能浮在正文上方时：点击和划选穿过它落到正文上（学生一按下它指着的那段，提示就收起） */
.mascot-hint[data-side="top"] { pointer-events: none; }
.mascot-hint__text { margin: 0; overflow-wrap: anywhere; text-wrap: pretty; }
.mascot-hint__keep { white-space: nowrap; }
/* 字跟着气泡一起弹出来：不能先出一个空气泡、字过几百毫秒才到（页面忙时这个空档会被拖长，看着就是一个空白气泡，t-20261027-c2dr） */

.mascot-say { display: flex; align-items: flex-end; gap: 6px; padding: 5px 5px 5px 12px; border-radius: 14px; transition: border-color 140ms linear; }
.mascot-say::after { transition: border-color 140ms linear; }
.mascot-say:focus-within, .mascot-say:focus-within::after { border-color: var(--accent); }
.mascot-say.is-sent { animation: mascot-say-sent 160ms ease-in forwards; pointer-events: none; }
@keyframes mascot-say-sent { to { opacity: 0; transform: scale(.7); } }
.mascot-say__input {
  flex: 1; min-width: 0; height: 32px; max-height: 164px; padding: 5px 0; overflow-y: auto;
  border: 0; outline: none; background: none; color: var(--ink);
  font: inherit; line-height: 22px; resize: none;
}
.mascot-say__input::placeholder { color: var(--faint); }
.mascot-say__send {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
  border: 0; border-radius: 50%; background: var(--accent); color: var(--on-accent); cursor: pointer;
  transition: transform 140ms cubic-bezier(.3, 1.4, .5, 1), background-color 140ms linear;
}
.mascot-say__send:hover:not(:disabled) { background: var(--accent-strong); }
.mascot-say__send:active:not(:disabled) { transform: scale(.88); }
.mascot-say__send:disabled { background: var(--surface-subtle); color: var(--faint); cursor: default; }
.mascot-say__send:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mascot-say__send svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mascot-say__send.is-nudged { animation: mascot-nudge 280ms ease; }
@keyframes mascot-nudge { 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }

/* ================= 二、形象层：火柴人（部件规则限定在 .mf--stick） ================= */
.mf { display: block; width: 100%; height: 100%; overflow: visible; }
.mf--stick path, .mf--stick circle { fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.mf--stick .mf-skull { fill: var(--canvas); stroke-width: 2.1; }
.mf--stick .mf-face { color: var(--accent-strong); }
.mf--stick .mf-eyes circle { fill: currentColor; stroke: none; }
.mf--stick .mf-mouth, .mf--stick .mf-eyes-shut { stroke-width: 1.5; }
.mf--stick .mf-mouth-o { stroke-width: 1.4; }
.mf--stick .mf-shadow { fill: var(--border); stroke: none; }
.mf--stick .mf-eyes-shut, .mf--stick .mf-mouth-o { opacity: 0; }
/* 骨架：脊柱最重；上臂 / 大腿略细一档、前臂 / 小腿再细一档，粗细交接处自然出肘与膝；肩线把双臂接在肩上。脸和头不动 */
.mf--stick .mf-spine { stroke-width: 2.5; }
.mf--stick .mf-bone { stroke-width: 2.4; }
.mf--stick .mf-bone-fine { stroke-width: 1.8; }
.mf--stick .mf-bar { stroke-width: 1.5; }

.mf * { transform-box: view-box; }
.mf--stick .mf-root, .mf--stick .mf-torso, .mf--stick .mf-head, .mf--stick .mf-face, .mf--stick .mf-arm, .mf--stick .mf-fore, .mf--stick .mf-leg, .mf--stick .mf-shin, .mf--stick .mf-shadow {
  transition: transform 260ms cubic-bezier(.3, .8, .25, 1);
}
/* 欢呼完收回原姿势：收得快（t-20261026-wybz fixA，正反馈那一串不拖尾巴）；两套形象的部件都在里面 */
.mascot.is-quick :is(.mf-root, .mf-torso, .mf-head, .mf-face, .mf-arm, .mf-fore, .mf-leg, .mf-shin, .mf-shadow, .mf-body, .mf-specs, .mf-look, .mf-dot, .mf-tail, .mf-ear) { transition-duration: 180ms; }
.mf--stick .mf-root { transform-origin: 24px 56px; transform: translate(var(--root-x), var(--root-y)) rotate(var(--root-r)); }
/* 爬的时候整个人横着挪到正文边上：用单独的 translate，身上的动画（耸、晃）照播，横挪照样有过渡 */
.mf--stick .mf-root { translate: var(--shift-x) 0; transition: transform 260ms cubic-bezier(.3, .8, .25, 1), translate 260ms cubic-bezier(.3, .8, .25, 1); }
.mf--stick .mf-torso { transform-origin: 24px 38px; transform: rotate(var(--torso)); }
.mf--stick .mf-head { transform-origin: 24px 18.5px; transform: rotate(var(--head)); }
.mf--stick .mf-face { transform: translate(var(--face-x), var(--face-y)); }
.mf--stick .mf-eyes { transform-origin: 24px 10.4px; transform: scale(var(--eyes, 1)); transition: transform 90ms linear; }
.mf--stick .mf-arm-l { transform-origin: 21px 23px; }
.mf--stick .mf-arm-r { transform-origin: 27px 23px; }
.mf--stick .mf-fore-l { transform-origin: 21px 31px; }
.mf--stick .mf-fore-r { transform-origin: 27px 31px; }
.mf--stick .mf-leg { transform-origin: 24px 38px; }
.mf--stick .mf-shin { transform-origin: 24px 47px; }
/* 手臂可以伸长（--reach）：举过头顶时从头两侧伸出去，不被头挡住 */
.mf--stick .mf-arm-l { transform: rotate(var(--arm-l)) scaleY(var(--reach-l)); }
.mf--stick .mf-arm-r { transform: rotate(var(--arm-r)) scaleY(var(--reach-r)); }
.mf--stick .mf-fore-l { transform: rotate(var(--fore-l)); }
.mf--stick .mf-fore-r { transform: rotate(var(--fore-r)); }
.mf--stick .mf-leg-l { transform: rotate(var(--leg-l)); }
.mf--stick .mf-leg-r { transform: rotate(var(--leg-r)); }
.mf--stick .mf-shin-l { transform: rotate(var(--shin-l)); }
.mf--stick .mf-shin-r { transform: rotate(var(--shin-r)); }
.mf--stick .mf-shadow { transform-origin: 24px 58.6px; transform: translateX(var(--shadow-x, 0px)) scaleX(var(--shadow-w, 1)); opacity: var(--shadow-o, 1); transition: transform 260ms ease, opacity 200ms linear; }
.mf-fx { opacity: 0; pointer-events: none; }

/* 站：默认姿势，其他姿势只改需要改的角度（设置里的小图 .mascot-swatch 也从这里起） */
.mascot, .mascot-swatch {
  --root-x: 0px; --root-y: 0px; --root-r: 0deg; --shift-x: 0px; --torso: 0deg; --head: 0deg; --face-x: 0px; --face-y: 0px;
  --arm-l: 14deg; --fore-l: 4deg; --arm-r: -14deg; --fore-r: -4deg; --reach-l: 1; --reach-r: 1;
  --leg-l: 9deg; --shin-l: -2deg; --leg-r: -9deg; --shin-r: 2deg;
}
/* 坐：盘腿坐着，手搭在膝上，眼睛看向正文 */
.mascot[data-pose="sit"], .mascot[data-pose="slump"], .mascot[data-pose="nod"] {
  --root-y: 15px; --head: 4deg; --face-x: 1.5px;
  --leg-l: 78deg; --shin-l: -152deg; --leg-r: -78deg; --shin-r: 152deg;
  --arm-l: 36deg; --fore-l: -30deg; --arm-r: -36deg; --fore-r: 30deg;
  --shadow-w: 1.15;
}
/* 悬停：直起身、抬头看你、举起一只手（「在呢」） */
.mascot.is-hover[data-pose="sit"] { --root-y: 12px; --head: -8deg; --face-x: 0px; --face-y: -1px; --eyes: 1.15; --arm-r: -70deg; --fore-r: -60deg; }
/* 当前消息在视野下面：守在底边，低头看着下面 */
.mascot.is-peek[data-pose="sit"] { --torso: 10deg; --head: 14deg; --face-x: 1.2px; --face-y: 1.8px; }
.mascot.is-fidget[data-pose="sit"] .mf--stick .mf-torso { animation: mf-sway 1.3s ease-in-out; }
.mascot.is-fidget[data-pose="sit"] .mf--stick .mf-head { animation: mf-nod 1.3s ease-in-out; }
@keyframes mf-sway { 30% { transform: rotate(-4deg); } 65% { transform: rotate(3deg); } }
@keyframes mf-nod { 40% { transform: rotate(calc(var(--head) + 9deg)); } }
.mascot.is-blink { --eyes: .1; }
.mascot.is-blink .mf--stick .mf-eyes { transform: scale(1, .12); }

/* 打盹：歪向一边，眼睛闭上，接着趴下 */
.mascot[data-pose="slump"] { --torso: 12deg; --head: 30deg; --face-x: .6px; --face-y: .6px; --arm-l: 20deg; --fore-l: 0deg; --arm-r: -20deg; --fore-r: 10deg; }
.mascot[data-pose="slump"] .mf--stick .mf-eyes, .mascot[data-pose="sleep"] .mf--stick .mf-eyes { opacity: 0; }
.mascot[data-pose="slump"] .mf--stick .mf-eyes-shut, .mascot[data-pose="sleep"] .mf--stick .mf-eyes-shut { opacity: 1; }
/* 睡：趴平，脸朝外，头枕在手上，头顶飘几个 z */
.mascot[data-pose="sleep"] {
  --root-r: 90deg; --root-x: -28px; --root-y: -7px; --head: -90deg; --face-x: 0px; --face-y: .6px;
  --arm-l: -150deg; --fore-l: -40deg; --arm-r: -128deg; --fore-r: -52deg;
  --leg-l: 10deg; --shin-l: -4deg; --leg-r: -14deg; --shin-r: 34deg;
  --shadow-w: 2.1; --shadow-x: -2px;
}
/* 小形态挨着输入气泡：往右躺，不压到气泡；z 跟着头挪过去 */
.mascot-layer[data-mode="compact"] .mascot[data-pose="sleep"] { --root-x: -8px; }
.mascot-layer[data-mode="compact"] .mascot[data-pose="sleep"] .mf--stick .mf-fx-z { transform: translateX(20px); }
.mascot[data-pose="sleep"] .mf--stick .mf-mouth { transform: translate(0, .4px) scale(.7); transform-origin: 24px 14.4px; }
.mascot[data-pose="sleep"] .mf--stick .mf-fx-z { opacity: 1; }
.mascot[data-pose="sleep"] .mf--stick .mf-z { color: var(--faint); stroke-width: 1.7; animation: mf-z 2.7s ease-in-out infinite; opacity: 0; transform-origin: 40px 34px; }
.mascot[data-pose="sleep"] .mf--stick .mf-z-2 { animation-delay: .9s; }
.mascot[data-pose="sleep"] .mf--stick .mf-z-3 { animation-delay: 1.8s; }
@keyframes mf-z { 0% { opacity: 0; transform: translate(-2px, 4px) scale(.6); } 20%, 78% { opacity: 1; } 100% { opacity: 0; transform: translate(1.5px, -2px) scale(1); } }
/* 醒：站起来伸个大懒腰（两臂伸长了往外上方张开，闭着眼打个哈欠），睁眼眨一下，随后坐回去 */
.mascot[data-pose="wake"] {
  --root-y: -2px; --head: -6deg; --face-y: -.6px;
  --arm-l: 128deg; --fore-l: 12deg; --arm-r: -128deg; --fore-r: -12deg; --reach-l: 1.5; --reach-r: 1.5;
  --leg-l: 6deg; --leg-r: -6deg;
}
.mascot[data-pose="wake"] .mf--stick .mf-mouth { opacity: 0; }
.mascot[data-pose="wake"] .mf--stick .mf-mouth-o { opacity: 1; }
.mascot[data-pose="wake"] .mf--stick .mf-eyes { animation: mf-yawn-eyes 480ms linear both; }
@keyframes mf-yawn-eyes { 0%, 60% { transform: scale(1, .12); } 70% { transform: none; } 80% { transform: scale(1, .12); } 90%, 100% { transform: none; } }

/* 等：站起来叉着腰看着正文，脚尖轻点 */
.mascot[data-pose="wait"] { --face-x: 1.4px; --head: 3deg; --arm-l: 40deg; --fore-l: -57deg; --arm-r: -40deg; --fore-r: 57deg; }
.mascot[data-pose="wait"] .mf--stick .mf-leg-r { animation: mf-tap 1.4s ease-in-out infinite; }
@keyframes mf-tap { 0%, 55%, 100% { transform: rotate(var(--leg-r)); } 70% { transform: rotate(calc(var(--leg-r) - 9deg)); } }

/* 听：点开输入气泡时歪头听着，一只手托腮 */
.mascot[data-pose="listen"] { --head: -9deg; --face-x: -1.2px; --arm-r: -62deg; --fore-r: -150deg; --arm-l: 12deg; }
.mascot-layer[data-mode="compact"] .mascot[data-pose="listen"] { --head: 0deg; --face-x: 0px; --face-y: -1.2px; }

/* 点头（T1，答对一题）：坐着看向答题处，笑着点一下头，挨着那边的手在肩旁握拳一攥（「好！」），拳头边闪一下 */
.mascot[data-pose="nod"] { --head: var(--head-tilt, 4deg); --face-x: var(--look-x, 1.5px); --face-y: var(--look-y, 0px); --arm-r: -75deg; --fore-r: -85deg; }
.mascot[data-pose="nod"][data-hand="l"] { --arm-r: -36deg; --fore-r: 30deg; --arm-l: 75deg; --fore-l: 85deg; }
.mascot[data-pose="nod"] .mf--stick :is(.mf-arm, .mf-fore) { transition-duration: 150ms; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.mascot[data-pose="nod"] .mf--stick .mf-mouth { transform: scale(1.3, 1.5); transform-origin: 24px 13.9px; }
.mascot[data-pose="nod"] .mf--stick .mf-head { animation: mf-nod-yes 340ms ease-out; }
@keyframes mf-nod-yes { 40% { transform: rotate(calc(var(--head) + 12deg)); } 75% { transform: rotate(calc(var(--head) - 2deg)); } }
.mf-glint { color: var(--marker); stroke-width: 1.8; }
.mf-fx-glint { transform-origin: 24px 42px; }
.mascot[data-pose="nod"]:not([data-hand="l"]) .mf--stick .mf-fore-r .mf-fx-glint,
.mascot[data-pose="nod"][data-hand="l"] .mf--stick .mf-fore-l .mf-fx-glint { animation: mf-glint 240ms ease-out 100ms both; }
@keyframes mf-glint { 0% { opacity: 0; transform: scale(.2) rotate(-30deg); } 45% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(.9) rotate(15deg); } }

/* 惊叹：往后一仰，两手往外摊开（「哇」），眼睛睁圆，嘴成 O，头上一个叹号 */
.mascot[data-pose="wonder"] {
  --root-y: -1px; --torso: -6deg; --head: -6deg; --face-x: var(--look-x, .6px); --face-y: var(--look-y, -.4px);
  --arm-l: 112deg; --fore-l: 20deg; --arm-r: -112deg; --fore-r: -20deg; --eyes: 1.3;
  --leg-l: 12deg; --leg-r: -12deg;
}
.mascot[data-pose="wonder"] .mf--stick .mf-mouth { opacity: 0; }
.mascot[data-pose="wonder"] .mf--stick .mf-mouth-o { opacity: 1; }
.mascot[data-pose="wonder"] .mf--stick .mf-fx-bang { opacity: 1; color: var(--accent-strong); transform-origin: 35px 3px; animation: mf-bang 1s cubic-bezier(.3, 1.5, .5, 1) both; }
.mascot[data-pose="wonder"] .mf--stick .mf-root { animation: mf-startle 420ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mf-bang { 0% { opacity: 0; transform: translateY(4px) scale(.3); } 25% { opacity: 1; transform: translateY(-2px) scale(1.15); } 40%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-2px); } }
@keyframes mf-startle { 35% { transform: translate(var(--root-x), calc(var(--root-y) - 5px)) rotate(var(--root-r)); } }

/* 指：上臂抬到头外面，前臂指向目标（两段角度由 JS 按目标位置写进 --point / --point-fore，往下指时手臂伸长 --point-reach），
   身体朝那边微倾，头和眼睛跟着看过去 */
.mascot[data-pose="point"] {
  --torso: var(--lean, 0deg); --head: var(--head-tilt, 0deg); --face-x: var(--look-x, 1.4px); --face-y: var(--look-y, 0px);
  --arm-r: var(--point, -90deg); --fore-r: var(--point-fore, 0deg); --reach-r: var(--point-reach, 1); --arm-l: 8deg; --fore-l: 8deg;
}
.mascot[data-pose="point"][data-hand="l"] { --arm-l: var(--point, 90deg); --fore-l: var(--point-fore, 0deg); --reach-l: var(--point-reach, 1); --arm-r: -8deg; --fore-r: -8deg; --reach-r: 1; }
.mascot[data-pose="point"] .mf--stick :is(.mf-arm-r, .mf-fore-r), .mascot[data-pose="point"][data-hand="l"] .mf--stick :is(.mf-arm-l, .mf-fore-l) { transition-duration: 320ms; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }

/* 挥手：打招呼、说话前 */
.mascot[data-pose="wave"] { --head: -4deg; --face-x: 0px; --arm-r: -118deg; --fore-r: -40deg; --arm-l: 12deg; }
.mascot[data-pose="wave"] .mf--stick .mf-fore-r { animation: mf-wave 1.3s ease-in-out; }
@keyframes mf-wave { 15%, 45%, 75% { transform: rotate(-56deg); } 30%, 60%, 90% { transform: rotate(-10deg); } }

/* 欢呼（T2）：双手举成 V、蹲一下跳起来、头顶迸出一圈彩线（彩线长在身上，跟着一起跳），360ms（t-20261026-wybz fixA：勋章飞的路上欢呼一下就收） */
.mascot[data-pose="cheer"], .mascot[data-pose="cheer-big"] {
  --head: -4deg; --face-x: 0px; --face-y: -.4px;
  --arm-l: 136deg; --fore-l: -8deg; --arm-r: -136deg; --fore-r: 8deg; --reach-l: 1.12; --reach-r: 1.12;
  --leg-l: 14deg; --leg-r: -14deg;
}
.mascot[data-pose="cheer"] .mf--stick .mf-mouth, .mascot[data-pose="cheer-big"] .mf--stick .mf-mouth { transform: scale(1.3, 1.5); transform-origin: 24px 13.9px; }
.mascot[data-pose="cheer"] .mf--stick .mf-root { animation: mf-jump 360ms cubic-bezier(.3, .7, .4, 1); }
.mascot[data-pose="cheer"] .mf-fx-spark, .mascot[data-pose="cheer-big"] .mf-fx-spark { opacity: 1; }
.mf-spark { opacity: 0; stroke-width: 2.4; }
.mf-spark-1, .mf-spark-4, .mf-spark-8 { color: var(--accent); }
.mf-spark-2, .mf-spark-5, .mf-spark-6, .mf-spark-10 { color: var(--success); }
.mf-spark-3, .mf-spark-7, .mf-spark-9, .mf-spark-11 { color: var(--marker); }
.mf-spark-1 { transform-origin: 14.5px 5.5px; }
.mf-spark-2 { transform-origin: 18.5px 1.5px; }
.mf-spark-3 { transform-origin: 24px 0px; }
.mf-spark-4 { transform-origin: 29.5px 1.5px; }
.mf-spark-5 { transform-origin: 33.5px 5.5px; }
.mf-spark-6 { transform-origin: 7.6px 6.6px; }
.mf-spark-7 { transform-origin: 12px -1px; }
.mf-spark-8 { transform-origin: 19.6px -5.4px; }
.mf-spark-9 { transform-origin: 28.4px -5.4px; }
.mf-spark-10 { transform-origin: 36px -1px; }
.mf-spark-11 { transform-origin: 40.4px 6.6px; }
.mascot[data-pose="cheer"] .mf-spark-inner { animation: mf-spark 240ms cubic-bezier(.2, .8, .3, 1) 90ms both; }
.mascot[data-pose="cheer"] :is(.mf-spark-2, .mf-spark-4) { animation-delay: 110ms; }
@keyframes mf-jump {
  0%, 100% { transform: translate(var(--root-x), var(--root-y)); }
  14% { transform: translate(var(--root-x), calc(var(--root-y) + 1.5px)) scale(1.05, .94); }
  40% { transform: translate(var(--root-x), calc(var(--root-y) - 12px)); }
  64% { transform: translate(var(--root-x), var(--root-y)) scale(1.04, .96); }
  80% { transform: translate(var(--root-x), calc(var(--root-y) - 3px)); }
  92% { transform: translate(var(--root-x), var(--root-y)); }
}
/* 大欢呼（T3，完成单元）：跳得更高、在空中歪一下，两圈彩线错开迸出，外圈更多更远，480ms，和礼炮同一刻（fixA：单元学完整串 ≤1.8 秒） */
.mascot[data-pose="cheer-big"] .mf--stick .mf-root { animation: mf-jump-big 480ms cubic-bezier(.3, .7, .4, 1); }
.mascot[data-pose="cheer-big"] .mf-spark-inner { animation: mf-spark 300ms cubic-bezier(.2, .8, .3, 1) 90ms both; }
.mascot[data-pose="cheer-big"] .mf-spark-outer { animation: mf-spark-far 320ms cubic-bezier(.2, .8, .3, 1) 150ms both; }
.mascot[data-pose="cheer-big"] :is(.mf-spark-2, .mf-spark-4) { animation-delay: 110ms; }
.mascot[data-pose="cheer-big"] :is(.mf-spark-7, .mf-spark-10) { animation-delay: 170ms; }
@keyframes mf-jump-big {
  0%, 100% { transform: translate(var(--root-x), var(--root-y)); }
  12% { transform: translate(var(--root-x), calc(var(--root-y) + 2px)) scale(1.06, .92); }
  42% { transform: translate(var(--root-x), calc(var(--root-y) - 17px)) rotate(-6deg); }
  70% { transform: translate(var(--root-x), var(--root-y)) scale(1.04, .96); }
  86% { transform: translate(var(--root-x), calc(var(--root-y) - 4px)); }
}
@keyframes mf-spark { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes mf-spark-far { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } }

/* 小跳：挪一小段、发出一句话之后 */
.mascot[data-pose="hop"] { --face-x: 1px; --arm-l: 34deg; --fore-l: 20deg; --arm-r: -34deg; --fore-r: -20deg; }
.mascot[data-pose="hop"] .mf--stick .mf-root { animation: mf-hop 340ms cubic-bezier(.3, .7, .4, 1); }
@keyframes mf-hop { 45% { transform: translate(var(--root-x), calc(var(--root-y) - 7px)); } }

/* 爬：侧身贴到正文左缘上（--wall-x 把人挪过去），身子微微贴向那边、抬头往上看；上面一只手伸长了往上够，下面一只手弯着扒住，
   一条腿抬膝蹬在边上、一条腿弯着跟上；手脚两两交替（560ms 一轮：每个姿势停一下，再很快换手换脚，换的时候往上一耸） */
.mascot[data-pose="climb"] {
  --shift-x: var(--wall-x, 20px); --torso: 4deg; --head: -6deg; --face-x: 1.8px; --face-y: -1.5px; --shadow-o: 0;
  --arm-r: -138deg; --fore-r: 6deg; --reach-r: 1.5; --arm-l: -100deg; --fore-l: -20deg; --reach-l: 1.05;
  --leg-r: -100deg; --shin-r: 70deg; --leg-l: -45deg; --shin-l: 12deg;
}
/* 侧身贴墙：两肩叠在一起——肩线收起，双臂并回脊柱上 */
.mascot[data-pose="climb"] .mf--stick .mf-bar { opacity: 0; }
.mascot[data-pose="climb"] .mf--stick .mf-arm-l { translate: 3px 0; }
.mascot[data-pose="climb"] .mf--stick .mf-arm-r { translate: -3px 0; }
.mascot[data-pose="climb"] .mf--stick .mf-arm { animation: mf-climb-arm 560ms ease-in-out infinite; }
.mascot[data-pose="climb"] .mf--stick :is(.mf-fore, .mf-leg, .mf-shin) { animation: mf-climb-limb 560ms ease-in-out infinite; }
.mascot[data-pose="climb"] .mf--stick .mf-arm-r { --a: -138deg; --ka: 1.5; --b: -100deg; --kb: 1.05; }
.mascot[data-pose="climb"] .mf--stick .mf-arm-l { --a: -100deg; --ka: 1.05; --b: -138deg; --kb: 1.5; }
.mascot[data-pose="climb"] .mf--stick .mf-fore-r { --a: 6deg; --b: -20deg; }
.mascot[data-pose="climb"] .mf--stick .mf-fore-l { --a: -20deg; --b: 6deg; }
.mascot[data-pose="climb"] .mf--stick .mf-leg-r { --a: -100deg; --b: -45deg; }
.mascot[data-pose="climb"] .mf--stick .mf-shin-r { --a: 70deg; --b: 12deg; }
.mascot[data-pose="climb"] .mf--stick .mf-leg-l { --a: -45deg; --b: -100deg; }
.mascot[data-pose="climb"] .mf--stick .mf-shin-l { --a: 12deg; --b: 70deg; }
.mascot[data-pose="climb"] .mf--stick .mf-root { animation: mf-climb-bob 560ms ease-in-out infinite; }
@keyframes mf-climb-arm { 0%, 32%, 100% { transform: rotate(var(--a)) scaleY(var(--ka)); } 50%, 82% { transform: rotate(var(--b)) scaleY(var(--kb)); } }
@keyframes mf-climb-limb { 0%, 32%, 100% { transform: rotate(var(--a)); } 50%, 82% { transform: rotate(var(--b)); } }
@keyframes mf-climb-bob {
  0%, 32%, 50%, 82%, 100% { transform: translate(var(--root-x), var(--root-y)) rotate(var(--root-r)); }
  41%, 91% { transform: translate(var(--root-x), calc(var(--root-y) - 2px)) rotate(var(--root-r)); }
}

/* 挂：两手举过头顶、伸长了扒住顶栏下沿（画布 y=1 就是顶栏下沿），手伸过沿去、被顶栏挡住（裁掉沿以上的部分），
   人挂在下面抬头看着手，腿松松垂着，身子轻轻晃；有目标时腾出一只手指过去 */
.mascot[data-pose="hang"] {
  --arm-l: 145deg; --fore-l: 0deg; --arm-r: -145deg; --fore-r: 0deg; --reach-l: 2.05; --reach-r: 2.05;
  --head: var(--head-tilt, 0deg); --face-x: var(--look-x, 0px); --face-y: var(--look-y, -1.3px);
  --leg-l: 3deg; --shin-l: 2deg; --leg-r: -5deg; --shin-r: 7deg; --shadow-o: 0;
  clip-path: inset(1px -48px -48px -48px);
}
.mascot[data-pose="hang"][data-hand="r"] { --arm-r: var(--point, -120deg); --fore-r: var(--point-fore, 0deg); --reach-r: 1; --arm-l: 150deg; }
.mascot[data-pose="hang"][data-hand="l"] { --arm-l: var(--point, 120deg); --fore-l: var(--point-fore, 0deg); --reach-l: 1; --arm-r: -150deg; }
.mascot[data-pose="hang"] .mf--stick .mf-root { transform-origin: 24px 1px; animation: mf-dangle 2.2s ease-in-out infinite; }
.mascot[data-pose="hang"] .mf--stick :is(.mf-leg, .mf-shin) { transition-duration: 420ms; }
@keyframes mf-dangle {
  0%, 100% { transform: translate(var(--root-x), var(--root-y)) rotate(calc(var(--root-r) - 3deg)); }
  50% { transform: translate(var(--root-x), var(--root-y)) rotate(calc(var(--root-r) + 3deg)); }
}

/* ================= 二·乙、形象层：正式形象（t-20261026-ic8o；学生在设置「个性化」里选，默认仍是火柴人） =================
   身体 + 一张脸 + 两颗点（js 里的 ballFigure）。部件：
     mf-root 整个人（跳、挂、爬时横挪）· mf-torso 身体连脸一起歪（从身体底边）· mf-body 身体压扁拉长（从底边，脸不跟着变形）·
     mf-head 脸跟着压扁下移 · mf-specs 眼镜（滑落、歪）· mf-look 眼睛看向 · mf-dot-l / -r 两颗点 · mf-ear / mf-tail（小猫）。
   两颗点都画在身体圆心 O 上，按极坐标摆：--dl-a 角度（0° 正下方，正值往左，同火柴人的手臂）、--dl-r 离圆心多远、--dl-sx / --dl-sy 压扁；
   换姿势时点沿着身体外沿绕过去（脚 → 手 → 角）。表情：--k-e-*（眼）、--k-m-*（嘴）是 0 / 1 的开关。
   行为层给的 --point / --point-fore / --lean / --look-* / --head-tilt / --wall-x 照用。
   颜色只用 kaopy.css 的 --mascot-body（身体、两点、z、问号）、--mascot-ink（眼镜、眼睛、嘴）、--mascot-paper（镜片、圈里的纸）。 */
.mf--ball { --mk-oy: 38.5px; --mk-floor: 54px; --mk-fy: 37px; }
.mf--horn { --mk-oy: 42.3px; --mk-floor: 57.8px; --mk-fy: 40.8px; }
.mf--ball .mf-skin, .mf--ball .mf-dot-shape { fill: var(--mascot-body); }
.mf--ball .mf-ear { fill: var(--mascot-body); stroke: var(--mascot-body); stroke-width: 2.3; stroke-linejoin: round; }
.mf--ball .mf-tail path { fill: none; stroke: var(--mascot-body); stroke-width: 3; stroke-linecap: round; }
.mf--ball .mf-paper { fill: var(--mascot-paper); }
/* 手作圈的遮罩：沿中心线的一笔，静止时整段露出（= kaopy-ring-still.svg）；只看不透明度，所以随便什么颜色都行 */
.mf--ball mask { mask-type: alpha; }
.mf--ball .mf-ring-draw { fill: none; stroke: currentColor; stroke-width: 16.3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.mf--ball .mf-lens { fill: var(--mascot-paper); stroke: var(--mascot-ink); stroke-width: 1.6; }
.mf--ball .mf-bridge { fill: none; stroke: var(--mascot-ink); stroke-width: 1.7; stroke-linecap: round; }
.mf--ball .mf-eyes circle { fill: var(--mascot-ink); transform-box: fill-box; transform-origin: center; transform: scale(calc(var(--k-eyes) * var(--mk-eye-k, 1))); transition: transform 90ms linear; }
.mf--ball :is(.mf-eyes-smile, .mf-eyes-shut, .mf-mouth, .mf-mouth-wide) { fill: none; stroke: var(--mascot-ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.mf--ball :is(.mf-mouth-grin, .mf-mouth-o, .mf-mouth-so) { fill: var(--mascot-ink); stroke: none; }
.mf--ball .mf-eyes { opacity: var(--k-e-dot); }
.mf--ball .mf-eyes-smile { opacity: var(--k-e-smile); }
.mf--ball .mf-eyes-shut { opacity: var(--k-e-shut); }
.mf--ball .mf-mouth { opacity: var(--k-m-smile); }
.mf--ball .mf-mouth-wide { opacity: var(--k-m-wide); }
.mf--ball .mf-mouth-grin { opacity: var(--k-m-grin); }
.mf--ball .mf-mouth-o { opacity: var(--k-m-o); }
.mf--ball .mf-mouth-so { opacity: var(--k-m-so); }
.mf--ball .mf-shadow { fill: var(--border); stroke: none; }
.mf--ball .mf-fx path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.mf--ball .mf-spark { stroke-width: 1.6; }
.mf--ball :is(.mf-fx-bang, .mf-fx-q, .mf-z) { color: var(--mascot-body); }
.mf--ball .mf-fx-bang { transform-origin: 24px calc(var(--mk-oy) - 23px); }
.mf--ball .mf-fx-bang path { stroke-width: 1.7; }
.mf--ball .mf-fx-q { transform-origin: 5px calc(var(--mk-oy) - 18px); }
.mf--ball .mf-fx-q path { stroke-width: 1.9; }
.mf--ball .mf-fx-q circle { fill: currentColor; stroke: none; }
.mf--ball .mf-z { stroke-width: 1.5; }

.mf--ball :is(.mf-root, .mf-torso, .mf-body, .mf-head, .mf-specs, .mf-look, .mf-dot, .mf-tail, .mf-ear) { transition: transform 260ms cubic-bezier(.3, .8, .25, 1); }
.mf--ball .mf-root {
  transform-origin: 24px 58px; transform: translate(var(--k-x), var(--k-y)) rotate(var(--k-r)); translate: var(--k-shift) 0;
  transition: transform 260ms cubic-bezier(.3, .8, .25, 1), translate 260ms cubic-bezier(.3, .8, .25, 1);
}
.mf--ball .mf-torso { transform-origin: 24px var(--mk-floor); transform: rotate(var(--k-tilt)); }
.mf--ball .mf-body { transform-origin: 24px var(--mk-floor); transform: scale(var(--k-sx), var(--k-sy)); }
.mf--ball .mf-head { transform: translate(var(--k-hx), calc((1 - var(--k-sy)) * 17px + var(--k-hy))); }
.mf--ball .mf-specs { transform-origin: 24px var(--mk-fy); transform: translate(0, var(--k-gy)) rotate(var(--k-gr)); }
.mf--ball .mf-look { transform: translate(var(--k-ex), var(--k-ey)); }
.mf--ball .mf-dot { transform-origin: 24px var(--mk-oy); transform: rotate(var(--k-a)) translateY(var(--k-d)) rotate(calc(-1 * var(--k-a))) scale(var(--k-dx), var(--k-dy)); }
.mf--ball .mf-dot-l { --k-a: var(--dl-a); --k-d: var(--dl-r); --k-dx: var(--dl-sx); --k-dy: var(--dl-sy); }
.mf--ball .mf-dot-r { --k-a: var(--dr-a); --k-d: var(--dr-r); --k-dx: var(--dr-sx); --k-dy: var(--dr-sy); }
.mf--ball .mf-tail { transform-origin: 35px 50px; transform: rotate(var(--k-tail)); }
.mf--ball .mf-ear-l { transform-origin: 17px 29px; transform: rotate(var(--k-ear)) scaleY(var(--k-ear-s)); }
.mf--ball .mf-ear-r { transform-origin: 31px 29px; transform: rotate(calc(-1 * var(--k-ear))) scaleY(var(--k-ear-s)); }
.mf--ball .mf-shadow { transform-origin: 24px 58.6px; transform: scaleX(var(--k-shadow-w)); opacity: var(--k-shadow-o); transition: transform 260ms ease, opacity 200ms linear; }

/* 站（默认）：两颗点在下面当脚；其他姿势只改需要改的（设置里的小图 .mascot-swatch 也从这里起） */
.mascot, .mascot-swatch {
  --k-x: 0px; --k-y: 0px; --k-r: 0deg; --k-shift: 0px; --k-tilt: 0deg; --k-sx: 1; --k-sy: 1; --k-hx: 0px; --k-hy: 0px;
  --k-gy: 0px; --k-gr: 0deg; --k-ex: 0px; --k-ey: 0px; --k-eyes: 1;
  --k-e-dot: 1; --k-e-smile: 0; --k-e-shut: 0; --k-m-smile: 1; --k-m-wide: 0; --k-m-grin: 0; --k-m-o: 0; --k-m-so: 0;
  --k-tail: 0deg; --k-ear: 0deg; --k-ear-s: 1; --k-shadow-w: 1; --k-shadow-o: 1;
  --dl-a: 18.2deg; --dl-r: 17.6px; --dl-sx: 1; --dl-sy: 1; --dr-a: -18.2deg; --dr-r: 17.6px; --dr-sx: 1; --dr-sy: 1;
}
/* 坐：身子往下一沉、宽一点，两只脚往前伸出来，眼睛看向正文 */
.mascot:is([data-pose="sit"], [data-pose="slump"], [data-pose="nod"]) {
  --k-sx: 1.05; --k-sy: .94; --k-ex: .9px; --k-hx: .5px; --k-shadow-w: 1.1;
  --dl-a: 22.5deg; --dl-r: 19.6px; --dl-sx: 1.15; --dl-sy: .8; --dr-a: -22.5deg; --dr-r: 19.6px; --dr-sx: 1.15; --dr-sy: .8;
}
/* 悬停：直起身、看着你、举起一只手（「在呢」） */
.mascot.is-hover[data-pose="sit"] { --k-sx: .98; --k-sy: 1.04; --k-ex: 0px; --k-hx: 0px; --k-ey: -.5px; --k-eyes: 1.15; --k-ear-s: 1.1; --dr-a: -129.3deg; --dr-r: 21.3px; --dr-sx: 1; --dr-sy: 1; }
/* 当前消息在视野下面：身子往前探、低头看下面 */
.mascot.is-peek[data-pose="sit"] { --k-tilt: 5deg; --k-ex: .6px; --k-ey: 1.4px; --k-hy: .6px; }
.mascot.is-fidget[data-pose="sit"] .mf--ball .mf-torso { animation: mf-sway 1.3s ease-in-out; }
.mascot.is-fidget[data-pose="sit"] .mf--ball .mf-tail { animation: mk-tail 1.3s ease-in-out; }
@keyframes mk-tail { 35% { transform: rotate(calc(var(--k-tail) - 16deg)); } 70% { transform: rotate(calc(var(--k-tail) + 6deg)); } }
.mascot.is-blink .mf--ball .mf-eyes circle { transform: scale(var(--mk-eye-k, 1), .12); }

/* 打盹：歪向一边，闭眼，眼镜往下滑 */
.mascot[data-pose="slump"] { --k-tilt: 9deg; --k-sy: .9; --k-e-dot: 0; --k-e-shut: 1; --k-gy: .8px; --k-gr: 5deg; --k-m-smile: 0; --k-m-so: 1; --k-ear-s: .85; --k-ear: -6deg; }
/* 睡（趴下）：整个压扁，两只脚往两边摊开，闭眼，眼镜滑下来歪着，慢慢呼吸，头顶飘 z */
.mascot[data-pose="sleep"] {
  --k-sx: 1.16; --k-sy: .74; --k-e-dot: 0; --k-e-shut: 1; --k-gy: 1.2px; --k-gr: -7deg; --k-m-smile: 0; --k-m-so: 1;
  --k-shadow-w: 1.45; --k-ear: -14deg; --k-ear-s: .75; --k-tail: 34deg;
  --dl-a: 32.1deg; --dl-r: 21.6px; --dl-sx: 1.1; --dl-sy: .72; --dr-a: -32.1deg; --dr-r: 21.6px; --dr-sx: 1.1; --dr-sy: .72;
}
.mascot[data-pose="sleep"] .mf--ball .mf-body { animation: mk-breathe 3.2s ease-in-out infinite; }
@keyframes mk-breathe { 50% { transform: scale(calc(var(--k-sx) * .985), calc(var(--k-sy) * 1.045)); } }
.mascot[data-pose="sleep"] .mf--ball .mf-fx-z { opacity: 1; }
.mascot[data-pose="sleep"] .mf--ball .mf-z { animation: mf-z 2.7s ease-in-out infinite; opacity: 0; transform-origin: 38px 28px; }
.mascot[data-pose="sleep"] .mf--ball .mf-z-2 { animation-delay: .9s; }
.mascot[data-pose="sleep"] .mf--ball .mf-z-3 { animation-delay: 1.8s; }
/* 醒：拉长身子，两颗点举过头顶伸个懒腰，闭眼打哈欠，睁眼眨一下 */
.mascot[data-pose="wake"] { --k-y: -1px; --k-sx: .93; --k-sy: 1.08; --k-m-smile: 0; --k-m-o: 1; --k-ear-s: 1.1; --k-tail: -20deg; --dl-a: 134.2deg; --dl-r: 25.1px; --dr-a: -134.2deg; --dr-r: 25.1px; }
.mascot[data-pose="wake"] .mf--ball .mf-eyes circle { animation: mf-yawn-eyes 480ms linear both; }

/* 等（导师在回答）：站着看向正文，一只脚轻点 */
.mascot[data-pose="wait"] { --k-ex: 1.2px; --k-hx: .6px; }
.mascot[data-pose="wait"] .mf--ball .mf-dot-r { animation: mk-tap 1.4s ease-in-out infinite; }
@keyframes mk-tap {
  0%, 55%, 100% { transform: rotate(var(--k-a)) translateY(var(--k-d)) rotate(calc(-1 * var(--k-a))) scale(var(--k-dx), var(--k-dy)); }
  70% { transform: rotate(calc(var(--k-a) - 9deg)) translateY(calc(var(--k-d) - 1.5px)) rotate(calc(9deg - var(--k-a))) scale(var(--k-dx), var(--k-dy)); }
}
/* 听（点开输入气泡）：歪头，一颗点举过头顶（举手），旁边一个问号 */
.mascot[data-pose="listen"] { --k-tilt: -6deg; --k-ex: -.4px; --k-ey: -.6px; --k-eyes: 1.08; --k-m-smile: 0; --k-m-so: 1; --dr-a: -145.4deg; --dr-r: 25.5px; }
.mascot-layer[data-mode="compact"] .mascot[data-pose="listen"] { --k-tilt: 0deg; --k-ex: 0px; }
.mascot[data-pose="listen"] .mf--ball .mf-fx-q { opacity: 1; animation: mk-pop 320ms cubic-bezier(.3, 1.5, .5, 1) 120ms both; }
@keyframes mk-pop { from { opacity: 0; transform: translateY(3px) scale(.4); } }

/* 点头（T1）：笑眯眯，靠答题处那边的点在身侧一攥（「好！」），点边闪一下，身子一压一弹 */
.mascot[data-pose="nod"] { --k-e-dot: 0; --k-e-smile: 1; --k-m-smile: 0; --k-m-wide: 1; --k-ex: var(--look-x, .9px); --k-ey: var(--look-y, 0px); --k-ear-s: 1.08; --k-tail: -18deg; --dr-a: -113.2deg; --dr-r: 19px; --dr-sx: 1; --dr-sy: 1; }
.mascot[data-pose="nod"][data-hand="l"] { --dl-a: 113.2deg; --dl-r: 19px; --dl-sx: 1; --dl-sy: 1; --dr-a: -22.5deg; --dr-r: 19.6px; --dr-sx: 1.15; --dr-sy: .8; }
.mascot[data-pose="nod"] .mf--ball .mf-dot { transition-duration: 150ms; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.mascot[data-pose="nod"] .mf--ball .mf-body { animation: mk-squash 340ms ease-out; }
@keyframes mk-squash { 30% { transform: scale(calc(var(--k-sx) * 1.07), calc(var(--k-sy) * .9)); } 65% { transform: scale(calc(var(--k-sx) * .97), calc(var(--k-sy) * 1.05)); } }
.mascot[data-pose="nod"]:not([data-hand="l"]) .mf-dot-r .mf-fx-glint,
.mascot[data-pose="nod"][data-hand="l"] .mf-dot-l .mf-fx-glint { animation: mf-glint 240ms ease-out 100ms both; }

/* 惊叹：一跳，眼镜弹起、眼睛睁圆，嘴成 O，头顶迸出三道 */
.mascot[data-pose="wonder"] { --k-eyes: 1.35; --k-gy: -.8px; --k-ex: var(--look-x, 0px); --k-ey: var(--look-y, -.3px); --k-m-smile: 0; --k-m-o: 1; --k-ear-s: 1.12; --k-tail: -24deg; --dl-a: 23.9deg; --dl-r: 18.5px; --dr-a: -23.9deg; --dr-r: 18.5px; }
.mascot[data-pose="wonder"] .mf--ball .mf-fx-bang { opacity: 1; animation: mf-bang 1s cubic-bezier(.3, 1.5, .5, 1) both; }
.mascot[data-pose="wonder"] .mf--ball .mf-root { animation: mk-startle 420ms cubic-bezier(.3, 1.4, .5, 1); }
@keyframes mk-startle { 35% { transform: translate(var(--k-x), calc(var(--k-y) - 5px)) rotate(var(--k-r)); } }

/* 指：身子朝目标微倾、眼睛看过去，靠那边的点沿身体外沿转到目标方向（角度 = 行为层算的上臂 + 前臂 + 倾斜），戳两下；另一颗点仍是脚 */
.mascot[data-pose="point"] {
  --k-tilt: var(--lean, 0deg); --k-ex: var(--look-x, 1.4px); --k-ey: var(--look-y, 0px); --k-hx: calc(var(--look-x, 1.4px) * .5); --k-hy: calc(var(--look-y, 0px) * .5);
  --dr-a: clamp(-170deg, calc(var(--point, -90deg) + var(--point-fore, 0deg) + var(--lean, 0deg)), -55deg); --dr-r: 21.5px;
}
/* 往下指（目标在脚边以下）时点不再往远处伸、最低停在身侧斜下方：伸远了像掉了一颗点，贴着身子斜指下去才看得出是在指 */
.mascot[data-pose="point"][data-hand="l"] { --dl-a: clamp(55deg, calc(var(--point, 90deg) + var(--point-fore, 0deg) + var(--lean, 0deg)), 170deg); --dl-r: 21.5px; --dr-a: -18.2deg; --dr-r: 17.6px; }
.mascot[data-pose="point"] .mf--ball .mf-dot { transition-duration: 320ms; transition-timing-function: cubic-bezier(.3, 1.5, .5, 1); }
.mascot[data-pose="point"]:not([data-hand="l"]) .mf--ball .mf-dot-r, .mascot[data-pose="point"][data-hand="l"] .mf--ball .mf-dot-l { animation: mk-poke 600ms ease-in-out 340ms 2; }
@keyframes mk-poke { 50% { transform: rotate(var(--k-a)) translateY(calc(var(--k-d) + 2.5px)) rotate(calc(-1 * var(--k-a))) scale(var(--k-dx), var(--k-dy)); } }

/* 挥手：一颗点举到右上方晃三下 */
.mascot[data-pose="wave"] { --k-ey: -.4px; --k-tail: -14deg; --dr-a: -137.4deg; --dr-r: 25.1px; }
.mascot[data-pose="wave"] .mf--ball .mf-dot-r { animation: mk-wave 1.3s ease-in-out; }
@keyframes mk-wave {
  15%, 45%, 75% { transform: rotate(calc(var(--k-a) + 18deg)) translateY(var(--k-d)) rotate(calc(-18deg - var(--k-a))) scale(var(--k-dx), var(--k-dy)); }
  30%, 60%, 90% { transform: rotate(calc(var(--k-a) - 12deg)) translateY(var(--k-d)) rotate(calc(12deg - var(--k-a))) scale(var(--k-dx), var(--k-dy)); }
}

/* 欢呼（T2 / T3）：两颗点举过头顶，笑眯眯咧嘴，蹲一下跳起来；彩线沿用火柴人那一套。时长同火柴人（fixA：T2 360ms、T3 480ms 在空中歪一下） */
.mascot:is([data-pose="cheer"], [data-pose="cheer-big"]) {
  --k-sx: .97; --k-sy: 1.04; --k-ey: -.3px; --k-e-dot: 0; --k-e-smile: 1; --k-m-smile: 0; --k-m-grin: 1; --k-ear-s: 1.1; --k-tail: -26deg;
  --dl-a: 144.7deg; --dl-r: 25.1px; --dr-a: -144.7deg; --dr-r: 25.1px;
}
.mascot[data-pose="cheer"] .mf--ball .mf-root { animation: mk-jump 360ms cubic-bezier(.3, .7, .4, 1); }
.mascot[data-pose="cheer-big"] .mf--ball .mf-root { animation: mk-jump-big 480ms cubic-bezier(.3, .7, .4, 1); }
@keyframes mk-jump {
  0%, 100% { transform: translate(var(--k-x), var(--k-y)); }
  14% { transform: translate(var(--k-x), calc(var(--k-y) + 1.5px)) scale(1.06, .92); }
  40% { transform: translate(var(--k-x), calc(var(--k-y) - 12px)); }
  64% { transform: translate(var(--k-x), var(--k-y)) scale(1.05, .95); }
  80% { transform: translate(var(--k-x), calc(var(--k-y) - 3px)); }
  92% { transform: translate(var(--k-x), var(--k-y)); }
}
@keyframes mk-jump-big {
  0%, 100% { transform: translate(var(--k-x), var(--k-y)); }
  12% { transform: translate(var(--k-x), calc(var(--k-y) + 2px)) scale(1.08, .9); }
  42% { transform: translate(var(--k-x), calc(var(--k-y) - 17px)) rotate(-6deg); }
  70% { transform: translate(var(--k-x), var(--k-y)) scale(1.05, .95); }
  86% { transform: translate(var(--k-x), calc(var(--k-y) - 4px)); }
}

/* 小跳：两只脚收一收，蹦一下 */
.mascot[data-pose="hop"] { --k-ex: 1px; --dl-a: 15.6deg; --dl-r: 16.7px; --dr-a: -15.6deg; --dr-r: 16.7px; }
.mascot[data-pose="hop"] .mf--ball .mf-root { animation: mk-hop 340ms cubic-bezier(.3, .7, .4, 1); }
@keyframes mk-hop { 45% { transform: translate(var(--k-x), calc(var(--k-y) - 7px)); } }

/* 爬：贴到正文左缘上（--wall-x 是火柴人手的位置；圆身子带着点更宽，少挪 4），身子贴向那边、抬头往上看，两颗点在靠墙那一侧一上一下交替往上够，换手时往上一耸 */
.mascot[data-pose="climb"] { --k-shift: calc(var(--wall-x, 20px) - 4px); --k-tilt: 8deg; --k-ex: 1.2px; --k-ey: -1.4px; --k-shadow-o: 0; --k-tail: 30deg; --dr-a: -126.6deg; --dr-r: 21.8px; --dl-a: -63.4deg; --dl-r: 19px; }
.mascot[data-pose="climb"] .mf--ball .mf-dot { animation: mk-climb-dot 560ms ease-in-out infinite; }
.mascot[data-pose="climb"] .mf--ball .mf-dot-r { --ca: -126.6deg; --cr: 21.8px; --cb: -63.4deg; --crb: 19px; }
.mascot[data-pose="climb"] .mf--ball .mf-dot-l { --ca: -63.4deg; --cr: 19px; --cb: -126.6deg; --crb: 21.8px; }
.mascot[data-pose="climb"] .mf--ball .mf-root { animation: mk-climb-bob 560ms ease-in-out infinite; }
@keyframes mk-climb-dot {
  0%, 32%, 100% { transform: rotate(var(--ca)) translateY(var(--cr)) rotate(calc(-1 * var(--ca))); }
  50%, 82% { transform: rotate(var(--cb)) translateY(var(--crb)) rotate(calc(-1 * var(--cb))); }
}
@keyframes mk-climb-bob {
  0%, 32%, 50%, 82%, 100% { transform: translate(var(--k-x), var(--k-y)); }
  41%, 91% { transform: translate(var(--k-x), calc(var(--k-y) - 2px)); }
}

/* 挂：两颗点扒住顶栏下沿（画布 y=1，沿以上被裁掉），身子吊在下面晃，抬头看着；有目标时腾出一颗点指过去 */
.mascot[data-pose="hang"] {
  --k-y: -16px; --k-sx: .96; --k-sy: 1.04; --k-ex: var(--look-x, 0px); --k-ey: var(--look-y, -1.3px); --k-shadow-o: 0; --k-tail: 20deg;
  --dl-a: 163.2deg; --dl-r: 22.5px; --dr-a: -163.2deg; --dr-r: 22.5px; --dl-sx: 1; --dl-sy: 1; --dr-sx: 1; --dr-sy: 1;
}
.mascot[data-pose="hang"][data-hand="r"] { --dr-a: calc(var(--point, -120deg) + var(--point-fore, 0deg)); --dr-r: 21.5px; --dl-a: 174.7deg; --dl-r: 21.6px; }
.mascot[data-pose="hang"][data-hand="l"] { --dl-a: calc(var(--point, 120deg) + var(--point-fore, 0deg)); --dl-r: 21.5px; --dr-a: -174.7deg; --dr-r: 21.6px; }
.mascot[data-pose="hang"] .mf--ball .mf-root { transform-origin: 24px 17px; animation: mk-dangle 2.2s ease-in-out infinite; }
@keyframes mk-dangle {
  0%, 100% { transform: translate(var(--k-x), var(--k-y)) rotate(-3deg); }
  50% { transform: translate(var(--k-x), var(--k-y)) rotate(3deg); }
}

/* 小猫：举起的爪子避开耳朵，往外多张一点 */
.mascot[data-figure="c"]:is([data-pose="cheer"], [data-pose="cheer-big"]) { --dl-a: 131.7deg; --dl-r: 24.8px; --dr-a: -131.7deg; --dr-r: 24.8px; }
.mascot[data-figure="c"][data-pose="listen"] { --dr-a: -142.1deg; --dr-r: 28.5px; }
/* 小猫挥手（设置里选中的小图同一个举手位）：爪子贴着身子举在耳朵下面，不飘到耳朵外头 */
.mascot[data-figure="c"][data-pose="wave"], .mascot-swatch[data-figure="c"]:has(input:checked) { --dr-a: -120deg; --dr-r: 18.5px; }

/* 「角」变体（a-horn）：身体落地、没有脚，两颗点长在头顶；高兴时竖起来，困了耷拉，指向时歪向那边（最多歪到身侧，指不到脚下） */
.mascot[data-figure="a-horn"], .mascot-swatch[data-figure="a-horn"] { --dl-a: 160.4deg; --dl-r: 19.1px; --dr-a: -160.4deg; --dr-r: 19.1px; --dl-sx: .9; --dl-sy: .9; --dr-sx: .9; --dr-sy: .9; }
.mascot[data-figure="a-horn"].is-hover[data-pose="sit"] { --dl-a: 160.5deg; --dl-r: 21px; --dr-a: -160.2deg; --dr-r: 22.1px; --dr-sx: .9; --dr-sy: .9; }
.mascot[data-figure="a-horn"][data-pose="slump"] { --dl-a: 139.6deg; --dl-r: 20.1px; --dr-a: -139.6deg; --dr-r: 20.1px; }
.mascot[data-figure="a-horn"][data-pose="sleep"] { --dl-a: 123.6deg; --dl-r: 13.2px; --dr-a: -123.6deg; --dr-r: 13.2px; --dl-sx: .95; --dl-sy: .7; --dr-sx: .95; --dr-sy: .7; }
.mascot[data-figure="a-horn"][data-pose="wake"] { --dl-a: 158.5deg; --dl-r: 24.5px; --dr-a: -158.5deg; --dr-r: 24.5px; }
.mascot[data-figure="a-horn"][data-pose="listen"] { --dr-a: -157.8deg; --dr-r: 25.2px; }
.mascot[data-figure="a-horn"][data-pose="nod"] { --dl-a: 159.7deg; --dl-r: 20.8px; --dr-a: -163deg; --dr-r: 24px; --dr-sx: .9; --dr-sy: .9; }
.mascot[data-figure="a-horn"][data-pose="nod"][data-hand="l"] { --dl-a: 163deg; --dl-r: 24px; --dl-sx: .9; --dl-sy: .9; --dr-a: -159.7deg; --dr-r: 20.8px; }
.mascot[data-figure="a-horn"][data-pose="wonder"] { --dl-a: 150deg; --dl-r: 23px; --dr-a: -150deg; --dr-r: 23px; }
.mascot[data-figure="a-horn"][data-pose="point"] { --dr-a: clamp(-150deg, calc(var(--point, -90deg) + var(--point-fore, 0deg) + var(--lean, 0deg)), -75deg); --dr-r: 21.5px; }
.mascot[data-figure="a-horn"][data-pose="point"][data-hand="l"] { --dl-a: clamp(75deg, calc(var(--point, 90deg) + var(--point-fore, 0deg) + var(--lean, 0deg)), 150deg); --dl-r: 21.5px; --dr-a: -160.4deg; --dr-r: 19.1px; }
.mascot[data-figure="a-horn"][data-pose="wave"] { --dr-a: -150.6deg; --dr-r: 24.4px; }
.mascot[data-figure="a-horn"]:is([data-pose="cheer"], [data-pose="cheer-big"]) { --dl-a: 153.4deg; --dl-r: 27.5px; --dr-a: -153.4deg; --dr-r: 27.5px; }
.mascot[data-figure="a-horn"][data-pose="hop"] { --dl-a: 160.4deg; --dl-r: 19.1px; --dr-a: -160.4deg; --dr-r: 19.1px; }
.mascot[data-figure="a-horn"][data-pose="climb"] .mf-dot-r { --ca: -125.1deg; --cr: 21.4px; --cb: -150deg; --crb: 22.2px; }
.mascot[data-figure="a-horn"][data-pose="climb"] .mf-dot-l { --ca: -156.1deg; --cr: 22.2px; --cb: -140deg; --crb: 21.4px; }
.mascot[data-figure="a-horn"][data-pose="hang"] { --k-y: -17px; --dl-a: 168.4deg; --dl-r: 24.8px; --dr-a: -168.4deg; --dr-r: 24.8px; --dl-sx: .9; --dl-sy: .9; --dr-sx: .9; --dr-sy: .9; }
.mascot[data-figure="a-horn"][data-pose="hang"][data-hand="r"] { --dl-a: 176.5deg; --dl-r: 24.3px; --dr-a: calc(var(--point, -120deg) + var(--point-fore, 0deg)); --dr-r: 21.5px; }
.mascot[data-figure="a-horn"][data-pose="hang"][data-hand="l"] { --dr-a: -176.5deg; --dr-r: 24.3px; --dl-a: calc(var(--point, 120deg) + var(--point-fore, 0deg)); --dl-r: 21.5px; }
.mascot[data-pose="hang"] .mf--horn .mf-root { transform-origin: 24px 18px; }

/* 手作圈（a、a-horn）出现 / 消失：不整个缩放，按品牌加载动效把圈画出来、从起笔处收回；脸和两颗点随后冒出来 / 先收走 */
.mascot:is([data-figure="a"], [data-figure="a-horn"]):is(.is-vanishing, .is-appearing) .mascot__fig { animation: none; }
.mascot.is-appearing .mf--ring .mf-ring-draw { animation: mk-ring-in 400ms cubic-bezier(.3, 0, .2, 1) both; }
.mascot.is-vanishing .mf--ring .mf-ring-draw { animation: mk-ring-out 300ms cubic-bezier(.6, 0, .3, 1) forwards; }
.mascot.is-appearing .mf--ring :is(.mf-head, .mf-dot, .mf-paper) { animation: mk-show 400ms linear both; }
.mascot.is-vanishing .mf--ring :is(.mf-head, .mf-dot, .mf-paper) { animation: mk-hide 140ms linear forwards; }
@keyframes mk-ring-in { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mk-ring-out { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -1; } }
@keyframes mk-show { 0%, 50% { opacity: 0; } 100% { opacity: 1; } }
@keyframes mk-hide { to { opacity: 0; } }

/* 小形态（输入气泡旁，约 24px 宽的身子）：脸放大一点，镜框、眼睛加粗放大，小尺寸下仍读得出是眼镜 */
.mascot-layer[data-mode="compact"] .mf--ball { --mk-eye-k: 1.2; }
.mascot-layer[data-mode="compact"] .mf--ball .mf-specs { scale: 1.1; }
.mascot-layer[data-mode="compact"] .mf--ball :is(.mf-lens, .mf-bridge) { stroke-width: 2; }
.mascot-layer[data-mode="compact"] .mf--ball :is(.mf-eyes-smile, .mf-eyes-shut, .mf-mouth, .mf-mouth-wide) { stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .mf--ball :is(.mf-root, .mf-torso, .mf-body, .mf-head, .mf-specs, .mf-look, .mf-dot, .mf-tail, .mf-ear, .mf-shadow), .mf--ball .mf-eyes circle { transition: none !important; }
}

/* ================= 三、设置「个性化」里的形象选择（t-20261027-pz69） =================
   五格，每格是同一张形象图站着（js/workspace-mascot.js mountFigurePicker），脚底同一条地平线；不写名字，读屏读 aria-label。
   选中：蓝笔框 + 浅蓝底，格里的形象抬手笑（「是我」），抬手走部件自己的 260ms 过渡；
   刚被换下的那个直接放下手，不跟着动——页面上的桌宠同时在换形象，同一刻只这两样在动。 */
.mascot-figure-preference { margin: 0 0 8px; padding: 14px 0 20px; border-bottom: 1px solid var(--border); }
.mascot-figure-preference h3 { margin: 0 0 10px; color: var(--ink); font-size: var(--fs-ui); line-height: 1.5; }
.mascot-figure-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 72px)); gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.mascot-swatch {
  position: relative; display: grid; place-items: end center; height: 76px; padding: 0 0 4px;
  --swatch-paper: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--swatch-paper); color: var(--accent);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}
.mascot-swatch:hover { --swatch-paper: var(--surface-subtle); border-color: var(--border-strong); }
.mascot-swatch:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.mascot-swatch:has(input:checked) { --swatch-paper: var(--accent-soft); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.mascot-swatch > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.mascot-swatch__fig { display: block; width: 50px; height: 62.5px; pointer-events: none; transform-origin: 50% 96%; transition: transform 140ms cubic-bezier(.3, 1.4, .5, 1); }
@media (hover: hover) { .mascot-swatch:hover .mascot-swatch__fig { transform: translateY(-2px); } }
.mascot-swatch:active .mascot-swatch__fig { transform: scale(1.06, .9); transition-duration: 120ms; }
.mascot-swatch:not(:has(input:checked)) .mf * { transition: none; }
/* 火柴人的头是空心圆：填格子自己的底色（页面上填的是页面底色），像画在这张纸上 */
.mascot-swatch .mf.mf--stick .mf-skull { fill: var(--swatch-paper); transition: fill 120ms ease; }
/* 抬手笑：同各形象的「挥手」举手位，换成笑眼、张嘴笑 */
.mascot-swatch:has(input:checked) {
  --head: -4deg; --arm-r: -118deg; --fore-r: -40deg; --arm-l: 12deg;
  --k-ey: -.4px; --k-e-dot: 0; --k-e-smile: 1; --k-m-smile: 0; --k-m-wide: 1; --k-tail: -14deg; --k-ear-s: 1.08;
  --dr-a: -137.4deg; --dr-r: 25.1px;
}
.mascot-swatch[data-figure="a-horn"]:has(input:checked) { --dr-a: -150.6deg; --dr-r: 24.4px; }

/* ================= 减少动态：只切静态姿势 ================= */
@media (prefers-reduced-motion: reduce) {
  .mascot, .mascot.is-moving, .mascot__fig, .mascot-say, .mascot-say::after, .mascot-say__send,
  .mf-root, .mf-torso, .mf-head, .mf-face, .mf-eyes, .mf-arm, .mf-fore, .mf-leg, .mf-shin, .mf-shadow,
  .mascot-swatch, .mascot-swatch__fig, .mascot-swatch .mf * { transition: none !important; }
  .mascot *, .mascot-bubble, .mascot-bubble *, .mascot-mark, .mascot-mark * { animation: none !important; }
  /* 形象部件规则限定在 .mf--stick / .mf--ball 里（多一级），这里跟着多一级 .mf，才压得过它们的 opacity: 0 */
  .mascot[data-pose="sleep"] .mf :is(.mf-z-1, .mf-z-2) { opacity: 1; }
  .mascot[data-pose="wonder"] .mf-fx-bang { opacity: 1; }
  .mascot .mf-fx-spark .mf-spark, .mascot .mf-fx-glint { opacity: 0 !important; }
}

/* ================= 四、对话：小人自己答的话（t-20261027-c2dr，js/workspace-mascot.js 的 reply / sayRecent） =================
   和提示同一种气泡；写完几秒后收起。记了状态时底下一行小字。输入气泡里先列最近说过的几句，说不出去的原因也写在那一格 */
.mascot-reply { width: max-content; max-width: 320px; padding: 8px 12px; cursor: default; }
.mascot-reply[data-side="top"] { pointer-events: none; }
.mascot-reply__text { margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.mascot-reply__facts { margin: 4px 0 0; color: var(--muted); font-size: var(--fs-caption, 12px); line-height: 1.5; overflow-wrap: anywhere; }
.mascot-reply__text[hidden] + .mascot-reply__facts { margin-top: 0; }
.mascot-reply__note { margin-left: 6px; }
.mascot-reply__undo {
  margin: 0 0 0 6px; padding: 0; border: 0; background: none; color: var(--accent-strong); font: inherit; line-height: inherit;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.mascot-reply__undo:hover:not(:disabled) { color: var(--accent); }
.mascot-reply__undo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-xs); }
.mascot-reply__undo:disabled { color: var(--muted); cursor: default; text-decoration: none; }
/* 回答气泡落在小人头顶时整个气泡不接鼠标；撤销是要点的，单独放开 */
.mascot-reply[data-side="top"] .mascot-reply__undo { pointer-events: auto; }
.mascot-say { flex-wrap: wrap; }
.mascot-say__recent { flex: 0 0 100%; max-height: 132px; margin: 0 7px 2px 0; padding: 2px 0 6px; overflow-y: auto; border-bottom: 1px solid var(--border); }
.mascot-say__recent-line { margin: 0 0 4px; color: var(--muted); font-size: var(--fs-caption, 12px); line-height: 1.5; overflow-wrap: anywhere; white-space: pre-wrap; }
.mascot-say__recent-line:last-child { margin-bottom: 0; }
.mascot-say__recent.is-note .mascot-say__recent-line { color: var(--ink); }
/* 小人跟在一个盖住正文的窗口（放大的背包 / 笔记、计划、地图、窄屏抽屉）的右下角：层抬到窗口之上 */
.mascot-layer.is-over-window { z-index: calc(var(--z-dialog) + 5); }
/* 旁问由小人收话（t-20261027-c2dr）：旁问窗格（回答容器）带 is-mascot-voice 作小人的钩子；窗格里原来的输入框、页边气泡里的输入框收起，
   textarea 留在里面只作草稿、重试的载体，提交失败的说明（.mn-notice）仍露在原处 */
.aside-pane.is-mascot-voice > .aside-compose { display: none; }
.mn-compose > .mn-input, .mn-compose > .mn-compose__row { display: none; }
.mn-float.is-compose .mn-compose:not(:has(> .mn-notice)) { display: none; }

/* ================= 五、旁问回答处的小人头像（t-20261027-i1dr b1b2，js/workspace-mascot.js dressAsideVoice） =================
   旁问窗格（回答容器）带 is-mascot-voice：回答抬头的 B1 小标换成火柴人的一张小站像，名字叫「小人」。
   不动、不可点；形象部件的规则全在上面的 .mf--stick 里，这里只给它站姿的角度变量和头的底色（头是空心圆，填窗格自己的纸色） */
.mascot-avatar {
  --root-x: 0px; --root-y: 0px; --root-r: 0deg; --shift-x: 0px; --torso: 0deg; --head: 0deg; --face-x: 0px; --face-y: 0px;
  --arm-l: 14deg; --fore-l: 4deg; --arm-r: -14deg; --fore-r: -4deg; --reach-l: 1; --reach-r: 1;
  --leg-l: 9deg; --shin-l: -2deg; --leg-r: -9deg; --shin-r: 2deg;
  display: inline-block; flex: none; width: 20px; height: 25px; margin-top: -3px; color: var(--accent); pointer-events: none;
}
.mascot-avatar .mf * { transition: none; }
.mascot-avatar .mf.mf--stick .mf-skull { fill: var(--surface); }
.mascot-avatar .mf-shadow { display: none; }

/* ================= 六、再讲一遍里的示意框（t-20261027-i1dr b1b2，js/workspace-guide.js demoFigureBox） =================
   小人在课件页、图示上「画一个框」给学生看怎么圈着问：只是摆出样子，不是真的旁问框，不接收点击；结束或被打断就收掉。
   蓝细线框 + 角上一颗圆钮（同旁问圆钮的位置），框出现时从左往右画出来，减少动态时直接在 */
.guide-demo-box {
  position: fixed; z-index: calc(var(--z-topbar) - 1); box-sizing: border-box; pointer-events: none;
  border: 2px solid var(--accent); border-radius: var(--r-xs); background: color-mix(in srgb, var(--accent) 8%, transparent);
  animation: guide-demo-box-in 420ms cubic-bezier(.3, .8, .25, 1) both;
}
.guide-demo-box__dot {
  position: absolute; right: -13px; top: -13px; width: 26px; height: 26px; box-sizing: border-box;
  border: 1px solid var(--accent); border-radius: var(--r-pill); background: var(--surface); box-shadow: var(--shadow-pop);
}
.guide-demo-box__dot::after {
  content: '?'; position: absolute; inset: 0; display: grid; place-items: center; color: var(--accent-strong); font-size: var(--fs-caption); font-weight: 600;
}
/* 画出来的裁剪框要比框大一圈（负的 inset），角上的圆钮伸在框外 13px，不能被自己的裁剪切掉 */
@keyframes guide-demo-box-in { from { clip-path: inset(-16px 100% -16px -16px); } to { clip-path: inset(-16px -16px -16px -16px); } }
@media (prefers-reduced-motion: reduce) { .guide-demo-box { animation: none; } }

/* ================= 七、再讲一遍里的选中示意（手机、触屏；t-20261027-i1dr b1b2，js/workspace-guide.js demoSelectionLook） =================
   触屏上真的选区条是贴底通栏，它一出来小人就让位，演不出来：这里在那段字上画一道淡蓝选中底，上面摆一枚不能点的「旁问｜记重点」小条
   （样子同桌面选区条），小人指着它说；被讲到的那个按钮底色淡蓝。结束或被打断就收掉，不接收点击 */
.guide-demo-sel {
  position: fixed; z-index: calc(var(--z-topbar) - 1); pointer-events: none;
  background: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 2px;
}
.guide-demo-pill {
  position: fixed; z-index: calc(var(--z-topbar) - 1); display: inline-flex; align-items: center; padding: 0 3px; pointer-events: none;
  border: 1px solid var(--border-strong); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-pop);
  font: 400 var(--fs-caption)/1 var(--font-sans); white-space: nowrap;
}
.guide-demo-pill__btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--r-pill); }
.guide-demo-pill__btn.is-on { background: var(--accent-soft); color: var(--accent-strong); }
.guide-demo-pill__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.guide-demo-pill__sep { width: 1px; height: 14px; flex: none; background: var(--border); }