Material Design 3 语义令牌体系。品牌语义：靛蓝（学习·专注）、成长绿（正确·进度）、能量橙（行动·上岸）、AI 紫（AI 能力专属）。全部组件支持亮 / 暗双主题与「减少动态效果」降级。
四个品牌色各承担一类语义，UI 中不可混用。
全部颜色以 CSS 变量定义，切换 data-theme 即整体换肤。
中文使用系统字体栈保证渲染质量，数字与英文使用 Plus Jakarta Sans 强化数据可读性。
8dp 节奏的间距刻度、五级圆角与 MD3 高度语义阴影。
图形标与其余五端同源：路径见 ui/README.md §4.1，容器几何全部由 --bm 派生（圆角 .30、图形字号 .58），配色恒为 --brand-gradient，不随各端主色漂移。四档尺寸：sm 26 / md 32 / lg 40 / xl 56。
统一 24×24 线性图标，描边 1.75，圆角端点，颜色继承 currentColor；brand_mark 是唯一走实心填充通道的图标。
主操作用渐变靛蓝，转化型操作用能量橙，AI 能力用 AI 紫。所有可点区域 ≥ 44px。
底部固定操作区有两种形态，按页面层级二选一，两种都常驻画框底部、都不遮挡内容，都不要用 position: sticky。
① .action-dock（悬浮胶囊）—— 用于带标签栏的顶级 Tab 页（首页 / 刷题 / 学情 / 我的）：位置在内容区与标签栏之间，左右让出页面间距，靠圆角 + 描边 + 投影表达悬浮。
② .action-dock action-dock--bar（通栏固定条）—— 用于不带标签栏的二级及以下页面：左右通栏、直角、只留一条上边线，直接贴在画框底部，高度与标签栏一致（58 + 16），从顶级页跳进二级页时底部区域不跳动。
用于知识点、难度、掌握状态、AI 标识等语义标注。
Bento 卡片是首页与学情页的主骨架；AI 能力卡使用渐变描边建立专属视觉。
白底 + 1px 描边 + 轻阴影，圆角 16，内边距 16，承载绝大多数内容。
AI 能力卡：渐变描边 + 呼吸光晕，仅用于 AI 生成内容。
进度环、掌握度条、学习热力图与提分曲线。
点击选项可体验真实判分：正确高亮绿色，错误抖动并同时标出正确答案。
某单位统计发现，参加培训的员工中，有 80% 的人绩效提升。由此可以推出：
这道题的关键在于「比例」与「整体」的对应关系。你把 80% 理解成了「提升的人里有 80% 参加过培训」，这是典型的条件倒置。
建议下一步：优先补「判断推理 · 真假推理」的 3 个核心公式，我可以直接为你生成 5 道同源变式题。
视频课程采用「图文讲义 + TTS 配音分页」形态；视频笔记产出可展开的思维导图。
视频笔记与学习资料的统一标记法：黑=常规陈述，蓝=重点，红=高频易错。
头像分品牌渐变、能量橙、中性三档，用于个人中心与 AI 身份标识；统计行用于同一维度下的数值对比，数字一律走等宽数字令牌，避免多列数值错位。
弹层分两种：底部弹层（Action Sheet）承载操作面板、表单与多选；居中弹框（Dialog）承载确认、内容展示与说明。Toast 承载即时反馈，积分扣减用飞出动效强化「消耗」感知，骨架屏用于「已知结构、等待数据」的占位。下方演示框就是组件本身，由 assets/app.js 驱动，与业务页面同一套实现。
删除后将无法恢复，建议先加入「易错本」再删除。
演示框内的积分是活的：每点一次「扣减 12 积分」，都会真实扣减并回写 data-credits；弹层内的 8 个入口均为真实跳转。
首屏以加载态呈现，1.2s 后自动落到真实内容，「重放加载态」可再次触发。骨架屏只在「已知结构、等待数据」时使用；AI 流式输出请用「思考中 + 逐字输出」形态（见上方 AI 面板），两者不可混用。