一只戴博士帽的猫头鹰「小博」，五种动作立绘。页面按场景挑动作、不各自写死——统一命名、统一调用、统一尺寸。
用于 hero、讲台、卡片、地图等「站位型」场合。
补充给具体课程情境用的姿态——隐私课的"嘘"、侦探课的放大镜、答对时的点赞……不必再从 5 个通用姿态里将就。
用于课程对话气泡里的小博头像（替换原来的 🤖），并能跟着剧情实时变脸：揭示时惊讶、思考题托腮、答对了大笑。用 data-apo-face="surprise" 或 JS Apo.setFace(el,'cheer')。
这张表就是「后续根据网页情况选择使用」的规则。代码里也内置了同一份映射：Apo.forContext('welcome') → 'wave'。
| 网页场景 | 推荐动作 | 为什么 |
|---|---|---|
| 首页 hero / 欢迎 / 登录注册 / 空状态 | wave 挥手 | 第一眼，热情打招呼、降低距离感 |
| 课程地图待开始 / “准备好了吗” / 答对鼓励 | ready 稳站 | 蓄势待发，激励出发 |
| 讲台开场 / 引导看右侧内容 / 指向“开始·下一步” | present 指引 | 侧身伸手，视线自然带向目标 |
| 术语双段 / 提示卡 / 想一想 / 原理讲解 / 教师视图 | teach 讲解 | 抱书讲要点，“认真教你”的信号 |
| 页脚 / 加载中 / 通用陪伴 / 浮动球默认 | idle 默认 | 安静在场，不抢戏 |
统一档位，避免随意缩放导致眼镜 / 描边发糊。data-size-token="lg" 或直接 data-size="104"。
小于 32px（如 favicon / 顶栏迷你标）改用简化标记 assets/apo-mark.svg，立绘细节在极小尺寸会糊。
左栏 sticky，present / teach，配语音字幕。
右下角 md，idle；点开= mini 讲台。
xl，wave，第一屏问好。
sm–md，teach，贴着知识点。
lg，ready，庆祝与激励。
sm，idle，安静收尾。
小博是透明立绘，边缘有一圈羽毛颗粒。直接放深色背景会显出白边 / 毛边——所以深色场合必须给它一个浅色底托（.apo-podium）或整体放在浅色卡片上。
引一个 JS，两种用法。图未就位时自动回退 🦉，绝不出现破图。
① HTML 声明式（最常用）
<script src="assets/mascot/apo-mascot.js"></script> <!-- 按动作 --> <span data-apo="wave" data-size="104"></span> <!-- 按场景（自动挑动作）--> <span data-apo="welcome"></span> <!-- → wave --> <span data-apo="term" data-size-token="sm"></span> <!-- → teach -->
② JS 取路径 / 生成
Apo.src('teach') // 'assets/mascot/apo-teach.png'
Apo.forContext('guide') // 'present'
el.innerHTML = Apo.img('ready', {size:104, alt:'小博'})
.apo-podiumapo-mark.svg