学科语言来自浏览器：标签栏、时间轨道、请求行与可检查证据。用一条可交互的请求时间线作为首页视觉重心，不使用无关插画、渐变背景或营销统计卡。
色彩：纸白 #ffffff；画布 #f6f8fc；正文 #1c2940；辅助 #657189；操作蓝 #245de8；等待黄 #d69b32；传输蓝 #4c8ef7；成功绿 #168267。颜色配合文字说明，不单独承担状态。
文字：中文优先 PingFang SC / Microsoft YaHei；西文 Avenir Next / Segoe UI；只有代码、毫秒和技术标识使用等宽。标题 36–48，正文 15–16，行高 1.7。
布局：左侧章节导航，顶部低干扰功能导航，中间学习内容。首页保留可操作的 Timing 示意，主入口从第 01 课开始。课程行承载课程名称、技能与真实开发状态，不把所有信息切成相同的卡片。
┌ 章节导航 ┬ 学习路线 / 排查速查 / 学习记录 ┐
│ 入门 │ 问题驱动标题 可操作请求时间线 │
│ Elements │ 从第 01 课开始 / 当前完成状态 │
│ Console ├ 课程目录 + 搜索 + 面板筛选 │
│ … │ 课程行：名称、目标、状态 │
└──────────┴───────────────────────────────┘
初始方向中的大数字统计和通用欢迎卡不符合“学会取证”的主题，改用真实课程状态与可交互时间线。01–39、51 标为可实战，其余显示规划及四要素。基础课统一五步容器，每课原理模型不同：节点树、CSS 规则、网格约束、日志、调用栈与异步次序等。模型明确标为教学模拟，按钮不记为实战完成。窄屏导航折叠，表格和布局故障在内部滚动，主操作可键盘使用。默认无自动播放动画，遵循 prefers-reduced-motion。
NetworkStateDemo 沿用已有课堂容器，分别呈现请求行、瀑布、响应契约、预检链、事务和控制状态；模型标注简化边界。章末先显示症状和实验入口，取证后才读取诊断选项，报告与五维自评放在案例检查之后。真实商城列出当前实验路径，清理按钮始终可用。
PerformanceDemo 沿用纸白、操作蓝、等待黄及等宽数值；使用调用嵌套、任务分块、依赖路径、占位、覆盖范围和播放头解释关系。实验商城先用中文概述本次观察，原始 JSON 和浏览器条目按需展开；固定反馈区域与占位避免测量界面干扰布局偏移。运动由目标操作明确触发，提供暂停、重放、停止及实际减弱动态支持。
延续白色、蓝色与灰蓝边界，引用模型用连接状态和虚线解释根关系，共享载荷独立居中；引用断开用文字与淡化同时表示。Comparison 可分别保存 A / B 并选择分配位置，示意单位不称为真实堆字节；流程模型显示定位、等待与业务断言的不同结果。自有计数与原生面板证据分开呈现，窄屏引用图纵向排列，支持键盘焦点。
质量课保持现有五步学习流程与三栏教学页。模型用蓝灰条件卡、线索链与双栏字段差异解释关系；窄屏转单列。真实审计入口单独打开简洁商品页，报告导入前不显示分数，导入后直接展示原报告数值、条件、检查项与三轮中位数。正常对照、手工覆盖、原生工具自报在文案中明确区分。可操作控件保留文字标签和可见焦点，不依赖颜色表达通过。
延续既有蓝色教程与绿色商城，不另起视觉体系。综合模型使用输入、响应、执行、页面、存储的有序关系；蓝色边线表示已列入的证据，琥珀色表示待补，不用颜色独自传达状态，仍有文字说明。面板复选框生成遗漏提示，不产生完成徽章。
53 以响应序号和恢复版本解释结果，54 以页面根、数组 / 订阅和详情对象解释保留，55 用发布证据计划组织八面板。首次综合现场不显示根因，提交判断后解锁模型；已有练习记录允许返回复习。专题的原生状态、说明和导出单独放置，避免把模型和实际设备混为同一通过状态。
继续采用 #245de8 主操作、#168267 正常商城、#c6d8ee 边界、#f7faff 模型底色与 #b67a26 待补证据；沿用项目字体与字号。图的节点在窄屏折行，评分表与控件保持自然阅读顺序和可见焦点；72 项实际视口检查见本批 QA。