你是一个精通物理教学与 Three.js 的前端工程师。请为我构建一个“物理能量转换互动课件”的极简原型。

【技术栈】
- 原生 JavaScript (ES Modules) + Three.js + Vite。
- 根目录下包含 index.html, style.css, main.js。index.html 需通过 module script 引入 main.js 并链接 style.css。

【教学与物理规则】
1. 物理参数与坐标：
   - 设定书本质量 m = 1.0 kg，初始书架高度 h0 = 1.5 m，重力场强 g = 9.8 N/kg。
   - 能量总量 total = m * g * h0 = 14.7 J。
   - 书本模型长方体厚度设定为 b = 0.2 m。物理高度 y 代表书底距离地面的高度；渲染时模型中心坐标为 center.y = y + b / 2。
   - 书架板上表面位于 y = 1.5 m。初始时书底落在书架上（center.y = 1.6 m）；落地时 y = 0 m，书底落在地面上（center.y = 0.1 m），严禁穿模或悬空。
2. 能量记账与状态派生：
   - 定义 progress 为已下落距离占初始高度的比例（取值范围 0.0 到 1.0）。
   - 下落阶段（progress < 1.0）：y = h0 * (1.0 - progress)，Ep = m * g * y，Ek = total - Ep，Eth = 0。
   - 落地瞬间（progress >= 1.0）：碰撞与声音耗散简化为瞬时完成，y = 0，Ep = 0，Ek = 0，Eth = total = 14.7 J。
   - 派生函数 computePhysicsState(progress, m, g, h0) 需对参数做合法性检查与 progress 截断（0 到 1）。
3. 真实物理与播放时长映射：
   - 自由落体总时间 freeFallTime = Math.sqrt(2 * h0 / g) ≈ 0.55 s。
   - 为便于教学观察，演示播放时间设为 displayDuration = 3.0 s。播放过程中物理时间 t = (elapsed / displayDuration) * freeFallTime，位移比例 progress = Math.min(1.0, (t / freeFallTime) ** 2)。
   - 手动滑块直接控制路程比例 progress，供学生逐步查看各高度状态。

【界面与 3D 场景】
1. 页面左侧：放置 3 个清晰的 HTML 能量罐（重力势能 Ep、动能 Ek、热内能 Eth），实时显示当前数值（保留 2 位小数）与高度填充百分比。
2. 页面右侧：Three.js 画布，包含透视相机、环境光/平行光、地面网格（y = 0）、位于架子边缘的书架与书本长方体。
3. 交互控件：
   - 一个滑块（Range Input，0 到 100%），拖动时同步更新书本高度与能量罐；
   - 真实可见的 HTML “释放书本”（Drop）与“重置”（Reset）按钮，支持鼠标点击与键盘（Tab/Enter/Space）无障碍操作。

请在当前项目工作区创建完整的 index.html、style.css 和 main.js。若无法写入文件，请按文件名输出完整代码，供我保存。

You are a front-end engineer proficient in physics pedagogy and Three.js. Please build a minimal prototype for a "3D Interactive Energy Transformation Lesson".

[Tech Stack]
- Vanilla JavaScript (ES Modules) + Three.js + Vite.
- Root directory must contain index.html, style.css, main.js. index.html must load main.js via module script and link style.css.

[Pedagogy & Physics Rules]
1. Physical Parameters & Coordinates:
   - Parameters: mass m = 1.0 kg, initial shelf height h0 = 1.5 m, gravitational field strength g = 9.8 N/kg.
   - Total energy: total = m * g * h0 = 14.7 J.
   - Book mesh thickness b = 0.2 m. Physical height y represents distance from book bottom to ground. Mesh center is rendered at center.y = y + b / 2.
   - Shelf surface is at y = 1.5 m. Initially the book rests flush on the shelf (center.y = 1.6 m); at ground y = 0 m (center.y = 0.1 m). Avoid clipping through ground or floating.
2. Energy Accounting & State Derivation:
   - Define progress as fallen distance ratio relative to h0 (clamped between 0.0 and 1.0).
   - In-flight (progress < 1.0): y = h0 * (1.0 - progress), Ep = m * g * y, Ek = total - Ep, Eth = 0.
   - On impact (progress >= 1.0): impact deformation and sound dissipation are modeled as instantaneous, y = 0, Ep = 0, Ek = 0, Eth = total = 14.7 J.
   - computePhysicsState(progress, m, g, h0) must validate parameters and clamp progress to [0, 1].
3. Real Physics & Display Timing:
   - Real free-fall duration: freeFallTime = Math.sqrt(2 * h0 / g) ≈ 0.55 s.
   - For pedagogical observation, set animated displayDuration = 3.0 s. During playback, physical time t = (elapsed / displayDuration) * freeFallTime, and progress = Math.min(1.0, (t / freeFallTime) ** 2).
   - A manual slider directly adjusts distance progress to allow stepping through height states.

[UI & 3D Scene Requirements]
1. Left panel: 3 visible HTML energy jars (Gravitational Ep, Kinetic Ek, Thermal Eth) showing real-time values (2 decimal places) and proportional bar fills.
2. Right panel: Three.js canvas featuring PerspectiveCamera, AmbientLight, DirectionalLight, ground plane at y = 0, a shelf, and the book mesh placed at the shelf edge.
3. Controls:
   - A slider (0 to 100%) to inspect progress manually.
   - Real, visible HTML "Drop Book" and "Reset" buttons, fully accessible via mouse and keyboard (Tab/Enter/Space).

Create complete index.html, style.css, and main.js files in the current project workspace. If you cannot write files, output the complete code under each filename so I can save it.

请在保留第 1 轮物理计算与能量条同步逻辑的前提下，更新 main.js、style.css 及必要的 index.html 控件，增加 3D 光线投射拾取（Raycaster Picking）、动态运镜与交互控制。

【修改需求】
1. 3D 物体点击拾取（Raycaster）：
   - 使用 THREE.Raycaster。注意计算归一化坐标时必须基于 canvas.getBoundingClientRect() 的相对偏移与尺寸，严禁直接使用全屏 window 宽高计算。
   - 使用 Pointer Events 监听指针交互，设置轻微拖动位移阈值（如 > 6px 视为拖动而非点击），绝不允许禁用页面的默认缩放与手势滚动。
   - 鼠标悬停在书本上时给予 Emissive 高亮反馈并将光标设为 pointer；点击或轻触书本触发释放下落。
2. 相机运镜与展示时长：
   - 初始全景视角对准整书与书架。触发下落时，相机平滑插值（lerp）推向地面低机位，展示书本撞击地面的近景。
   - 说明 3.0 秒展示时长属于教学观察设计（真实自由落体仅约 0.55 秒）。
   - 点击“重置”时相机平滑复位至全景机位。
3. 控件与键盘无障碍：
   - 保留页面上真实可见的 HTML“释放”、“暂停/继续”与“重置”按钮，支持 Tab、Enter 与 Space 键盘操作。
   - 添加全局空格键（Space）切换暂停/播放，但必须做焦点判断：若当前聚焦在 input 或 button 等交互控件上，不得拦截其原生默认行为。按 Esc 键重置。
4. 响应式与无障碍模式：
   - 使用 ResizeObserver（或 window resize 事件）监听画布容器尺寸变化，动态更新渲染器尺寸与相机宽高比，防止画面拉伸变形。
   - 支持 prefers-reduced-motion 或静止模式，在减少动效模式下可直接通过滑块步进观察。

请在当前项目中更新这些文件。若无法写文件，请按文件名输出完整代码。

Keeping all physics calculations and energy bar synchronization from Round 1 intact, update main.js, style.css, and any required index.html controls to add Three.js Raycaster picking, camera framing, and accessible controls.

[Requirements]
1. Raycaster 3D Picking:
   - Implement THREE.Raycaster. Calculate normalized pointer coordinates strictly from canvas.getBoundingClientRect() relative offset and dimensions; do NOT assume full-window coordinates.
   - Use Pointer Events with a drag movement threshold (e.g. > 6px considered dragging rather than click/tap). Never disable whole-page scrolling or pinch-to-zoom gestures.
   - Subtle emissive highlight and pointer cursor on hover; clicking or tapping the book triggers the fall.
2. Camera Framing & Display Duration:
   - Initial perspective frames the entire shelf and book. Upon drop initiation, smoothly lerp camera to a low-angle close-up of the landing zone.
   - Retain the 3.0 s display duration as an intentional pedagogical choice for clear observation (contrasted with the ~0.55 s real fall time).
   - Resetting smoothly restores the initial wide camera framing.
3. Accessible Controls & Keyboard:
   - Keep real, visible HTML controls for "Drop", "Pause/Resume", and "Reset", fully operable via Tab, Enter, and Space.
   - Add a global Spacebar shortcut to toggle pause/resume, ensuring it does NOT intercept default behavior when the focused element is an input, button, or other form control. Esc resets to initial state.
4. Responsiveness & Motion Sensitivity:
   - Use ResizeObserver (or window resize event) to dynamically adjust canvas dimensions and camera aspect ratio without stretching.
   - Support prefers-reduced-motion / static step mode, allowing direct slider stepping without rapid motion transitions.

Update these files in the current project workspace. If you cannot write files, output the complete code under each filename.

请更新 index.html、style.css 和 main.js，将界面视觉升级为“纸雕线稿风格”，并补齐“预测-演示-操作-解释”的教学闭环。

【视觉风格升级】
1. 背景与材质：
   - 采用温和的纸张米白底色（#faf9f6，深色模式 #1a1a1c）。
   - 3D 模型采用浅色漫反射材质与 EdgesGeometry 描边轮廓线，呈现手绘纸雕素描质感。
   - 能量罐使用发光色彩强调：重力势能天蓝、动能翠绿、热内能琥珀黄。
2. 移动端与降级适配：
   - 响应式排版：桌面端左右分栏，移动端采用上下堆叠排版，确保三维特写运镜时能量罐数值依然清晰可见，不被遮挡。
   - 若浏览器不支持 WebGL，优雅降级显示基础 HTML 文本、按钮与数值公式示意卡片，确保核心教学概念仍可阅读。

【教学流程组件】
1. 预测卡片（Predict Card）：
   - 题目：“预测：当书从书架掉落砸在地上，原本的能量现在去哪了？”
   - 选项：
     A. 被完全消耗用光了
     B. 转移到了周围环境与书本的热储存中
     C. 依然保留在重力势能里
   - 流程说明：将“先预测后操作”作为本指南推荐的可选教学引导设计（非原课强制），并提供一个“自由探索/直接演示”开关，允许教师或学生按需选择先预测还是直接探索。
   - 学生选择预测选项时，不提前剧透对错。
2. 解释折叠卡片（Lift-the-flap "Why?"）：
   - 书本落地后呈现“为什么？点击翻开解析”折叠卡片。
   - 展开后展示完整原理解释：明确区分下落做功（势能转动能）与落地耗散（动能最终转入书、地板和空气内能；少量先经声音传播后耗散，最终已经包含在 Eth = total 中），并针对选项详细解释为什么 A（能量不会凭空消失）和 C（高度为零重力势能排空）不正确，同时将学生的初始预测选项并列对比。

请在当前项目中更新完整的 index.html、style.css 和 main.js。若无法写文件，请按文件名输出完整代码。

Update index.html, style.css, and main.js to adopt a papercraft line-art visual style and implement the complete "Predict-Watch-Try-Explain" pedagogical flow.

[Visual & Layout Enhancements]
1. Styling & Papercraft Aesthetics:
   - Warm paper background (#faf9f6, with dark mode #1a1a1c).
   - 3D models with clean matte surfaces and ink EdgesGeometry outlines to create a minimalist papercraft look.
   - Reserve vivid emissive colors exclusively for energy jars (Sky Blue for Ep, Emerald Green for Ek, Amber Yellow for Eth).
2. Mobile & Fallback Support:
   - Responsive layout: side-by-side columns on desktop, vertical stacked layout on mobile to prevent 3D close-ups from obscuring energy numbers.
   - WebGL fallback: If WebGL context is unavailable, display a clean fallback card with HTML text, formula steps, and numeric readouts so learning is uninterrupted.

[Pedagogical Flow Panel]
1. Predict Card:
   - Prompt: "Predict: The book falls off the shelf and lands. Where is its energy now?"
   - 3 options:
     A. It has been used up
     B. In the thermal stores around it
     C. Still in its gravitational store
   - Interaction guidance: Implement predicting-before-dropping as an optional recommended pedagogical scaffold (not a mandatory original lesson lock), providing a "Free Explore / Direct Demo" mode toggle so educators or students can choose to explore directly without forced gating.
   - Selecting an option does not prematurely reveal correctness.
2. Lift-the-flap Explanation ("Why?"):
   - Upon landing, display a "Why? (Click to lift flap)" card.
   - Unfolding provides the full physical explanation: distinguishing mechanical work (Ep -> Ek) from landing dissipation (Ek ultimately becomes internal energy of the book, floor, and air; the small amount first carried by sound is already included in Eth = total after dissipation). Explicitly explain why A (energy cannot vanish) and C (zero height means zero gravitational store) are misconceptions, displaying the user's initial prediction side-by-side for comparison.

Update complete index.html, style.css, and main.js files in the current project workspace. If you cannot write files, output complete code under each filename.

请完善当前项目，增加“教师备课笔记面板（Teachers' Notes）”，支持动态参数调整，并满足工程规范。

【功能需求】
1. 教师备课抽屉与动态参数调节（必做）：
   - 页面右上角增加“教师说明（Teachers' Notes）”切换按钮，抽屉可用键盘操作（Esc 键关闭），关闭后焦点返回触发按钮。
   - 抽屉内包含教学背景说明：
     * 模型简化说明：去除空气阻力，将撞击与声音耗散简化为瞬时完成；
     * 课标差异说明：本课默认 g = 9.8 N/kg（AQA 标准），教材若采用 g = 10 N/kg 理论值会有所不同（如 m=1, h0=1.5 时为 15.0 J）；
     * 记账隐喻提示：强调能量罐与光效是状态记账模型，不是物质实体。
   - 教师参数沙盒（必须实现）：
     * 提供质量 m (0.5 kg ~ 2.0 kg)、高度 h0 (1.0 m ~ 2.0 m) 的调节滑块，以及 g (9.8 与 10 N/kg) 的单选切换。
     * 当任何参数修改时：立即暂停当前播放并重置到初始状态；依据通式 total = m * g * h0 重新计算总能量；动态更新 3D 书架几何高度、书本初始位置与相机取景；重新计算能量条最大分母刻度、数值标签与解释文本。逻辑与视图中绝不允许硬编码 14.7 或 15。
2. 代码与工程规范：
   - 清理所有控制台调试代码，确保 ES Module 严格规范。
   - 确保窗口与容器尺寸变化时 Three.js 画布与相机纵横比自适应重绘。

请在当前项目中更新所有受影响文件。若无法写文件，请按文件名输出完整代码。

Finalize the project by implementing a "Teachers' Notes Drawer" with dynamic parameter controls and strict engineering standards.

[Requirements]
1. Teachers' Notes Drawer & Parameter Sandbox (Required):
   - Add a "Teachers' Notes" toggle button in the top-right corner. The drawer must be keyboard accessible (Esc closes), and focus must return to the toggle button upon closing.
   - Drawer pedagogy content:
     * Model Simplifications: Explicitly clarify that air resistance is omitted and impact/sound dissipation is treated as instantaneous.
     * Specification Differences: Default g = 9.8 N/kg (AQA), noting differences for courses using g = 10 N/kg (yielding 15.0 J when m=1, h0=1.5).
     * Metaphor Warning: Remind teachers that jars and light effects are accounting metaphors, not physical substances.
   - Parameter Sandbox (Must Implement):
     * Controls to adjust mass m (0.5 to 2.0 kg), height h0 (1.0 to 2.0 m), and a toggle between g = 9.8 and 10 N/kg.
     * When any parameter changes: immediately pause playback and reset to initial position; recompute total = m * g * h0 using general formulas; update shelf 3D height, book initial mesh position, and camera framing; update energy bar scale denominators, labels, and explanation readouts. Absolutely NO hardcoded 14.7 or 15 in logic or templates.
2. Engineering Standards:
   - Remove console debug logs and ensure strict ES module imports.
   - Maintain responsive canvas rendering and camera aspect ratio on resize.

Update all affected project files in the current workspace. If you cannot write files, output complete code under each filename.

请在保留前四轮书本下落与教师抽屉功能完全正常的前提下，继续更新 index.html、style.css 与 main.js，为课件增设“八类储能探索区（8 Energy Stores Explorer）”及配套的课堂概念提问模块。

【功能与交互规格】
1. 八类储能 3D 程序几何模型与双入口交互：
   - 在书架场景旁或下方独立区域，使用 Three.js 原生几何体构建 8 个特征鲜明的程序线稿模型（结合 EdgesGeometry 描边，无需外部资产）：
     * 动能（Kinetic）：简化骑车者模型（车轮环、车架与人，配运动方向箭头；不要用无运动线索的静止自行车代表动能）；
     * 重力势能（Gravitational）：高处的书本与托架；
     * 弹性势能（Elastic）：受拉伸的弹簧结构（螺旋圆环组合）；
     * 热储存（Thermal）：热饮杯模型（带杯口热气线框）；
     * 化学储存（Chemical）：AA 电池（圆柱体加正极凸台）；
     * 磁储存（Magnetic）：一对带 N/S 磁极标识的条形磁铁；
     * 静电储存（Electrostatic）：摩擦起电的气球（球体加下垂绳索）；
     * 核能储存（Nuclear）：发光太阳模型（中心球体与外围发散射线）。
   - 双入口同步响应：界面提供对应的 8 个 HTML 文字按钮，点击画布中的 3D 模型或点击 HTML 按钮均指向同一套数据映射。
   - 交互反馈与去重计数：点击任一物体时，3D 模型高亮显示，对应储能徽记点亮，侧边栏显示物体名称、所属储能类型及物理说明；使用 JavaScript Set 集合记录已探索过的储能类型，显示探索进度（如 3/8 直至 8/8 挑战完成），重复点击已发现物体不重复计入总数。提供“重置探索进度”按钮。

2. 物理记账的独立性与定性展示原则：
   - 核心原则：八类储能探索是“识别物体保存能量的方式”，不是单一下落物理事件；8 个案例相互独立，能量互不相加，严禁与书本下落的 14.7 J 账本混算或合并为一个伪总数。
   - 数值定性处理：除书本落体采用定量计算外，其余 7 类探索对象均采用定性文字与状态卡片说明，不绘制伪精确的共用能量条；磁储存与静电储存因无权威典型值，明确标注为“定性展示（无单一典型数值）”，严禁标为 0 J；太阳说明核反应释放能量并以辐射形式向外传递，严禁将太阳 1 秒的辐射能量标为总核能储备；如引用原课 AA 电池的 14,000 J，必须标明为特定电池的上限估算；最小版本可只作定性解释，不强行塞入未经校准的动态能量罐。

3. 能量传递途径（Pathways）明确标注：
   - 在物理解析卡片中，明确指出能量转移所依赖的四种途径（Pathways）：
     * 下落的书本：通过力与位移的“机械做功（Mechanical work）”；
     * 电池供电：化学储能通过电路中的“电流做功（Electrical work）”驱动用电器；
     * 热饮冷却：因杯身与环境温差，通过“热传递（Heating）”将热内能转移到周围介质；
     * 太阳辐射：核聚变释放能量，通过电磁波“辐射（Radiation）”向外太空传递。
   - 在界面中以醒目文字强调：“光”与“电流”属于能量传递的途径，不是孤立的能量储存罐，避免学生混淆。

4. 教师备课视图内容补齐：
   - 在现有的 Teachers' Notes 抽屉中补充目标、术语与授课说明；迁移题放在课件可见区域：
     * 学习目标（Learning Objectives）：识别 8 种储能并在生活中举例；描述书本下落过程中的能量转化；区分四种传递途径；理解“能量罐是记账隐喻，能量不是流体”。
     * 核心术语定义卡片：系统（System）、储能（Energy store）、途径（Pathway）、焦耳（Joule）。
     * 课标与学情说明：以原课的 14–16 岁学习者为设计参考，说明所需质量、高度与乘法前提；不要声称已对齐某版中国教材。
     * 新情境迁移问题与延迟揭晓：增加“课堂追问（Questions to Ask）”模块，包含思考题：“一只上紧发条的玩具车，释放前储存了什么能量？玩具停下后，这些能量最终去了哪里？”
       配备“显示解析”折叠按钮，点击展开参考答案（上紧发条储存弹性势能；释放后通过机械做功转化为动能；摩擦阻力与碰撞最终将其耗散为玩具、地面与空气的热储存中）。
   - 探索进度只在当前浏览器会话中临时记录，支持随时一键重置；明确提示教师“学生点全 8/8 仅代表完成交互操作，不能直接证明物理概念已经内化掌握”。

请输出完整的修改代码或针对 main.js、index.html 和 style.css 的增量补丁，必要时可拆出 physics.js、stores.js 与 exploration.js，保留清晰的模块引用。修改后重新验收前四轮关键状态。

Keeping all functionality from Rounds 1 to 4 (book drop physics, 3D controls, line-art styling, and Teachers' Notes drawer) fully operational, update index.html, style.css, and main.js to add a dedicated "8 Energy Stores Explorer" and classroom pedagogy questions.

[Requirements]
1. 8 Procedural 3D Models & Dual Input:
   - In a distinct section of the scene, generate 8 identifiable procedural line-art 3D objects using native Three.js geometries and EdgesGeometry (zero external asset files):
     * Kinetic: Moving cyclist (wheel rings, frame and rider, with a direction arrow);
     * Gravitational: Elevated book on shelf;
     * Elastic: Stretched spring structure;
     * Thermal: Hot drink mug with steam wireframe;
     * Chemical: AA battery (cylinder with positive terminal nipple);
     * Magnetic: Pair of bar magnets with polarity markers;
     * Electrostatic: Charged balloon with dangling string;
     * Nuclear: Sun sphere with radiating beams.
   - Dual-input accessibility: Provide 8 corresponding HTML buttons. Clicking either the 3D mesh via Raycaster or clicking its HTML button triggers the identical store data mapping.
   - Feedback & Deduplication: Clicking highlights the object, lights up the corresponding store badge, and reveals its name and explanation. Track discovery progress using a JavaScript Set (e.g., 3/8 up to 8/8 challenge complete). Repeated clicks on discovered objects must not increment the counter. Provide a "Reset Discovery" button.

2. Ledger Independence & Qualitative Display:
   - Core rule: The 8-store explorer is for identifying store types across separate everyday objects, NOT a single falling event. The 8 stores do not sum together and must NEVER be mixed with the falling book's 14.7 J ledger.
   - Qualitative representations: Use qualitative text cards without arbitrary common scale bars. Magnetic and electrostatic stores must be labeled as "Qualitative (no typical single value)", never as 0 J. The sun card explains nuclear fusion released via radiation without claiming 1-second radiation output as total nuclear inventory. If quoting the original battery example of 14,000 J, identify it as an upper estimate for a specified battery. The minimum explorer may remain qualitative.

3. Explicit Pathways Recognition:
   - Detail the 4 transfer pathways in the explanation panels:
     * Falling book: Mechanical work done by gravitational force;
     * Battery: Chemical store transfers via electrical work through currents;
     * Hot drink: Heat transferred to surroundings via heating due to temperature difference;
     * Sun: Nuclear energy transferred outward via electromagnetic radiation.
   - Note explicitly: Light and electric currents are transfer pathways, not energy stores.

4. Teachers' Notes Enrichment:
   - Append to the Teachers' Notes drawer:
     * Learning objectives, key vocabulary (System, Store, Pathway, Joule), and 14–16 age reference and prerequisites; do not claim alignment with a particular Chinese curriculum.
     * New transfer question: "Which store does a wound-up toy hold before release, and where has that energy gone once it stops?" Include a delayed-reveal toggle explaining the transfer from elastic store -> kinetic -> dissipated into thermal stores of surroundings.
     * Clarify that explorer progress is session-only, resettable, and that completing 8/8 interactions does not constitute proof of conceptual mastery.

Output the complete code or clean incremental updates across main.js, index.html, and style.css. You may extract physics.js, stores.js and exploration.js as needed; rerun the earlier acceptance checks.

请在保留前四轮物理内核、教师抽屉以及八类储能探索功能完全正常的前提下，重构并升级场景架构，将“立体书纸面展开、热饮特写与电池剖面运镜”无缝接入完整的“预测-演示-操作-解释-挑战”教学闭环中。

【架构重构与模型复用】
1. 程序模型工厂抽取（store-models.js）：
   - 将原有的 8 个程序几何模型工厂函数抽取为独立模块 store-models.js，供探索区与演示场景共享基础模型；杯口、电池开壳和动态书可在基础模型上增强，严禁引入外部 GLB 模型、纹理图片或音频文件。
   - 热饮模型：中空圆柱杯体、液面、杯柄，以及杯口上方 3 条随时间波动上升的墨线线条（模拟热气）。暂停时蒸汽摆动相位必须精准冻结；静止模式下保持静态。明确仅为定性示意，不做分子粒子动力学模拟，无液体剖面。
   - 电池模型：圆柱外壳增加可铰接打开的剖面机制，展开时露出简化的分层内芯与中心杆，并提供 0–100% 剖面滑块。明确标注为定性结构示意，不按真实 AA 电池比例，严禁标注锌/锰等具体化学材料，严禁将发光材质解释为实体“电能流”。
2. 立体书纸面展开底板（guided-scene.js）：
   - 使用 Three.js 构建双页书本底板，使用自绘 CanvasTexture 呈现手绘印刷字与黑白线稿质感（模拟 print→peel→shade→live 过程）。
   - 8 个模型初始在右页上平铺为线稿平面，随着立起进度（0–100%）通过铰链旋转逐渐升起为三维立体模型。提供手动立起滑块，点击“播放完整演示”后自动平滑展开；在 prefers-reduced-motion 或静止模式下，支持直接比对 0% 与 100% 静态形态。明确说明此为几何补间动画，非真实纸张力学形变仿真。

【五镜头运镜系统与状态管理（guided-state.js）】
1. 镜头元数据与编排：
   - 设定连续 5 个运镜阶段，总时长 15.5 秒：
     * Shot 1（3.0 秒）：全景鸟瞰，立体书展开与模型立起；
     * Shot 2（4.0 秒）：相机平滑推近热饮杯口，展示三条摇曳热气墨线与热储存；
     * Shot 3（4.0 秒）：镜头转向电池，外壳铰接展开剖面，展示内部化学储能结构；
     * Shot 4（3.0 秒）：转为低机位侧视书架，电池外壳自动闭合，书本从架上下落撞击地面；
     * Shot 5（1.5 秒）：镜头拉回全景总览，进入自由操作状态。
2. 播放控制与无障碍入口：
   - 提供真实可见的 HTML 运镜控制面板：“播放/暂停/继续”、“从头播放”、“上一镜头”、“下一镜头”、五镜头直接跳转按钮组，以及“退出演示返回总览”按钮。
   - 交互双入口：除了点击控制面板外，在总览模式下直接点击 3D 场景中的热饮、电池或高处的书，也能平滑切入对应的特写运镜。
3. 状态清理与生命周期隔离：
   - 键盘 Space 键优先控制当前运镜播放/暂停；若处于运镜中，空格绝不能误触书本下落。
   - 页面切出（visibilitychange）或打开教师备课抽屉时，当前运镜立即自动暂停；暂停时运镜插值、剖面展开、蒸汽摇曳与物理下落必须同步冻结。
   - 当教师在抽屉中修改物理参数（m, h0, g）时，强制复位至总览初态。
   - 退出演示或切出电池镜头时，电池外壳必须闭合复位，不留剖面残影。

【物理内核共享与数据隔离】
1. 单一下落物理核心：
   - 演示第 4 镜头中的书本下落必须直接调用通用的 computePhysicsState(progress, m, g, h0)，与右侧手动探索区严格共享当前质量、高度与重力参数；当在手动模式下拉动书本下落滑块时，立体书内的书本网格高度与左侧 14.7 J 账本必须完全同步。
   - 热饮与电池属于独立的定性生活情境，严禁将其估算数值并入或污染书本落地的 14.7 J 账本。
2. 认知数据保护与 JSON 导出：
   - 演示区点击热饮、电池或书只切换特写，不计发现；只有八类探索区的模型与同名按钮修改发现集合。观看 5 镜头运镜演示属于观察输入，从新页面开始观看，全程及结束后的探索进度应保持 0/8；若已有探索记录，保持原计数不增加、不清空，严禁因播放动画自动为学生增加发现计数。只有学生亲手在 3D 画布或按钮中点击探索物体，计数器才递增。
   - 调参、退出演示或重复播放运镜时，绝不能清空学生在课前已选的预测选项（A/B/C）与作答；Why 曾被阅读的历史标记也应保留，但重新开始下落时可收起解析，避免旧终态解释与当前画面冲突。
   - 完善状态导出：提供“导出学习记录”按钮，先生成可见的“下载本次 JSON”链接，并提供可展开的只读 JSON 作为下载受限时的读回入口；不得只弹成功提示。记录包含 prediction、exploration.found（已发现集合）、guided（当前镜头、展开进度、剖面进度、是否完成）、whyViewed 与 transferReferenceViewed的 JSON 数据；导出说明中必须明确提示教师“8/8 探索与运镜完成仅代表交互动作，不能作为真实教学成效证明”。

Keeping all physics logic, Teachers' Notes drawer, and 8-store explorer features fully functional, refactor the application architecture to integrate papercraft unfolding and cinematic close-ups (hot drink and battery cutaway) into the complete "Predict-Watch-Try-Explain-Challenge" pedagogical flow.

[Architecture Refactoring & Procedural Models]
1. Procedural Model Factory Extraction (store-models.js):
   - Extract the 8 procedural line-art geometries into a modular store-models.js factory shared across both the explorer and cinematic scene. Do NOT load external GLB/OBJ models, image textures, or audio assets.
   - Hot Drink: Hollow mug cylinder, liquid surface, handle, and 3 rising procedural ink lines for steam waving over time. When paused, steam animation phase must freeze completely; remain static in reduced-motion mode. Treat strictly as a qualitative everyday example without molecular particle simulation or liquid cross-section.
   - Battery: Cylindrical casing with a hinged cutaway displaying simplified layered core and central rod, controlled by a 0–100% cutaway slider. Explicitly label as a qualitative diagram: not to scale, no zinc/manganese material labels, and never depict emissive glows as physical energy fluids.
2. Unfolding Papercraft Stage (guided-scene.js):
   - Build a Three.js pop-up book spread using programmatic CanvasTexture for printed text and ink linework (reflecting the print -> peel -> shade -> live sequence).
   - 8 models start flattened as flat linework on the page and pivot upwards on hinges as unfolding progresses (0–100%). Provide a manual unfold slider alongside smooth unfolding after the user starts the demo; under prefers-reduced-motion, allow comparing 0% and 100% static states. Clarify that this is keyframe tweening, not continuum paper elasticity simulation.

[5-Shot Cinematic System & State Management (guided-state.js)]
1. Shot Metadata & Choreography:
   - Implement 5 sequential shots totaling 15.5 seconds:
     * Shot 1 (3.0 s): Overview bird's-eye view, book spread unfolding and models erecting;
     * Shot 2 (4.0 s): Camera pushes in to hot drink mug, revealing 3 oscillating steam lines and thermal store;
     * Shot 3 (4.0 s): Camera pans to battery, casing hinges open to reveal cutaway and chemical store;
     * Shot 4 (3.0 s): Low-angle view of the bookshelf, battery closes, book drops and hits the ground;
     * Shot 5 (1.5 s): Camera pulls back smoothly to full overview for free exploration.
2. Accessible Playback Controls:
   - Provide visible HTML controls: Play/Pause/Resume, Replay, Prev Shot, Next Shot, five-shot button group, and "Exit Demo to Overview".
   - Dual input: In overview mode, clicking the 3D hot drink, battery, or shelf book directly transitions camera framing to that close-up shot.
3. State Isolation & Lifecycle Cleanup:
   - Global Spacebar toggles demo play/pause during cinematic mode without falsely triggering book drop.
   - Switching browser tabs (visibilitychange) or opening the Teachers' Notes drawer must pause playback immediately; pausing freezes camera interpolation, cutaway extension, steam wave phase, and physics.
   - Adjusting teacher parameters (m, h0, g) immediately resets the cinematic scene to initial state.
   - Exiting the demo or switching away from the battery shot must close the battery cutaway casing.

[Physics Engine Sharing & Data Isolation]
1. Unified Physics Derivation:
   - Shot 4 falling animation must directly invoke the shared computePhysicsState(progress, m, g, h0), synchronized with active teacher parameters; dragging the manual fall slider updates the pop-up book mesh and 14.7 J ledger in lockstep.
   - Qualitative stores (hot drink and battery) are strictly isolated; their values (e.g. battery 14,000 J estimate) must NEVER contaminate or sum into the falling book's 14.7 J ledger.
2. Learning State Integrity & JSON Export:
   - Clicks in the cinematic scene change the close-up only; discoveries are counted only in the dedicated8-store explorer. Watching the demo is an observation phase: a fresh page remains at 0/8 after demo completion; existing discoveries must neither increase nor be erased. Never increment the found counter from passive viewing; only direct user clicks on 3D meshes or HTML buttons count.
   - Changing parameters, exiting, or replaying the demo must NEVER erase student's initial predict choice (A/B/C) or transfer answer; preserve a separate Why-viewed history flag even if the explanation is folded again for a new fall.
   - Implement "Export Learning Log" by creating a visible download link plus a read-only JSON preview for fallback; do not merely show a success toast. The payload contains prediction, exploration.found array, guided (shot, unfold, cutaway, completed), whyViewed and transferReferenceViewed. Add an explicit disclaimer that 8/8 completion is an interaction log, not evidence of conceptual mastery.