AIとThree.jsで作る3Dインタラクティブ授業：エネルギーの教科書から動くプロトタイプへ

あなたは物理教育とThree.jsに精通したフロントエンドエンジニアです。「物理エネルギー変換のインタラクティブ教材」の最小限のプロトタイプを構築してください。

【技術スタック】
- バニラJavaScript (ES Modules) + Three.js + Vite。
- ルートディレクトリには index.html, style.css, main.js を含めます。index.html ではモジュールスクリプト経由で 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. ページ左側：明確なHTMLのエネルギー缶を3つ配置（位置エネルギー 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 を更新し、UIのビジュアルを「ペーパークラフト・ラインアート風」にアップグレードした上で、「予測—実演—操作—解説」という教育サイクルを完備してください。

【ビジュアルスタイルのアップグレード】
1. 背景とマテリアル：
   - 落ち着いた紙のアイボリーホワイトの背景色（#faf9f6、ダークモードは #1a1a1c）を採用。
   - 3Dモデルには明るい色の拡散反射マテリアルと EdgesGeometry による輪郭線を採用し、手描きのペーパークラフト・スケッチの質感を表現。
   - エネルギー缶には発光色でアクセントを付与：位置エネルギーはスカイブルー、運動エネルギーはエメラルドグリーン、熱・内部エネルギーはアンバーイエロー。
2. モバイル対応とフォールバック：
   - レスポンシブレイアウト：デスクトップでは左右2カラム、モバイルでは上下スタックレイアウトを採用し、3Dのクローズアップカメラワーク時でもエネルギー缶の数値が隠れず明瞭に見えるように配置。
   - ブラウザが WebGL をサポートしていない場合は、基本的なHTMLテキスト、ボタン、数値・公式の解説カードを表示する優雅なフォールバック（Graceful Degradation）を行い、中核となる教育概念が閲覧できるようにします。

【指導プロセスコンポーネント】
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.

これまでの4ラウンドにおける本の落下および教師用ドロワーの機能が完全に正常動作することを維持した上で、index.html、style.css、main.js を引き続き更新し、教材に「8種類のエネルギー貯蔵探究エリア（8 Energy Stores Explorer）」とそれに付随する授業用コンセプト発問モジュールを追加してください。

【機能およびインタラクション仕様】
1. 8種類のエネルギー貯蔵の3Dプロシージャルモデルとデュアルエントリー操作：
   - 本棚シーンの横または下の独立した領域に、Three.js の標準ジオメトリを使用して、特徴的な8つのプロシージャル・ラインアートモデルを構築します（EdgesGeometry の輪郭線と組み合わせ、外部アセットは不要）：
     * 運動エネルギー（Kinetic）：単純化したサイクリストのモデル（車輪のリング、フレーム、人間、進行方向の矢印。動きの手がかりのない静止した自転車で運動エネルギーを代表させないこと）。
     * 位置エネルギー（Gravitational）：高いところにある本と棚受。
     * 弾性エネルギー（Elastic）：引き伸ばされたバネ構造（らせん状リングの組み合わせ）。
     * 熱・内部エネルギー（Thermal）：ホットドリンクのカップモデル（カップの口から立ち上る湯気のワイヤーフレーム付き）。
     * 化学エネルギー（Chemical）：単3電池（円柱にプラス極の突起）。
     * 磁気エネルギー（Magnetic）：N/S 極の表記がある一対の棒磁石。
     * 静電エネルギー（Electrostatic）：摩擦した風船（球体と垂れ下がる紐）。
     * 核エネルギー（Nuclear）：輝く太陽のモデル（中心の球体と周囲に放射する光線）。
   - デュアルエントリーの同期応答：UI上に該当する8つのHTMLテキストボタンを用意し、キャンバス内の3Dモデルをクリックしても、HTMLボタンをクリックしても、同一のデータマッピングを参照するようにします。
   - インタラクションフィードバックと重複排除カウント：いずれかのオブジェクトをクリックすると、3Dモデルがハイライトされ、該当するエネルギー貯蔵バッジが点灯し、サイドバーにオブジェクト名、属するエネルギー貯蔵の種類、物理的解説が表示されます。JavaScript の Set コレクションを使用して探究済みのエネルギー貯蔵タイプを記録し、探究の進捗（例: 3/8 から 8/8 のチャレンジ達成まで）を表示します。すでに発見済みのオブジェクトを再度クリックしても合計数に重複カウントしないようにします。「探究進捗をリセット」ボタンを提供してください。

2. 物理的な記録の独立性と定性的表示の原則：
   - 中核原則：8種類のエネルギー貯蔵の探究は「物体がエネルギーを保持する形態を識別する」ものであり、単一の落下という物理イベントではありません。8つの事例は互いに独立しており、エネルギー同士を足し合わせることはなく、本の落下の 14.7 J の帳簿と混算したり、ひとつの疑似的な合計値にまとめたりすることは厳禁とします。
   - 数値の定性的扱い：本の落下は定量的な計算を行いますが、残る7種類の探究オブジェクトは定性的なテキストとステータスカードで説明し、疑似的に精密な共通エネルギーバーは描画しません。磁気エネルギーと静電エネルギーは信頼できる標準値がないため、「定性的表示（代表的な単一の数値なし）」と明記し、0 J と表記することは厳禁とします。太陽は核反応によってエネルギーを放出し、放射の形で外部へ伝達されることを説明し、太陽の1秒間の放射エネルギーを総核エネルギー貯蔵量として表示することは厳禁とします。原作の単3電池の 14,000 J を引用する場合は、特定の電池における上限の推定値であることを明記しなければなりません。最小バージョンでは定性的な解説にとどめ、キャリブレーションされていない動的エネルギー缶を無理に詰め込まないでください。

3. エネルギー伝達経路（Pathways）の明確な明記：
   - 物理解説カードの中で、エネルギー移動が依存する4つの経路（Pathways）を明確に示します：
     * 落下する本：力と変位による「力学的仕事（Mechanical work）」
     * 電池からの給電：化学エネルギーが回路内の「電気的仕事（Electrical work）」を通じて電気器具を駆動
     * ホットドリンクの冷却：カップと環境の温度差により、「熱移動（Heating）」を通じて熱・内部エネルギーが周囲の媒体へ移行
     * 太陽放射：核融合がエネルギーを放出し、電磁波の「放射（Radiation）」を通じて宇宙空間へ伝達
   - UI上の目立つテキストで「『光』や『電流』はエネルギーの伝達経路であり、孤立したエネルギー貯蔵缶ではない」と強調し、生徒の混同を防ぎます。

4. 教師用準備ビューの内容拡充：
   - 既存の Teachers' Notes ドロワーに目標、用語、指導上の留意点を追加し、応用発展問題を教材の視認可能な領域に配置します：
     * 学習目標（Learning Objectives）：8種類のエネルギー貯蔵を識別し、生活の中の例を挙げること。本の落下過程におけるエネルギー変換を記述すること。4つの伝達経路を区別すること。「エネルギー缶は帳簿のメタファーであり、エネルギーは流体ではない」ことを理解すること。
     * 中核用語の定義カード：系／システム（System）、エネルギー貯蔵（Energy store）、伝達経路（Pathway）、ジュール（Joule）。
     * 指導要領と学習者の想定：原作の 14〜16 歳の学習者を設計の参考とし、必要な質量・高さ・掛け算の前提知識を説明します。中国の特定の教科書に準拠していると主張してはなりません。
     * 新たな状況への応用発展問題と遅延表示：「授業での問いかけ（Questions to Ask）」モジュールを追加し、次の思考問題を含めます：「ぜんまいを巻いたおもちゃの車は、走らせる前にはどんなエネルギーを蓄えているでしょうか？ おもちゃが止まった後、そのエネルギーは最終的にどこへ行ったでしょうか？」
       「解説を表示」折りたたみボタンを用意し、クリックで模範解答を展開できるようにします（ぜんまいを巻くことで弾性エネルギーが蓄えられ、解放後は力学的仕事を通じて運動エネルギーに変換され、摩擦抵抗と衝突によって最終的に車・床・空気の熱・内部エネルギーとして散逸する）。
   - 探究の進捗は現在のブラウザセッション内でのみ一時的に記録し、いつでもワンクリックでリセットできるようにします。教師に対して「生徒が 8/8 をすべてクリックしたことは操作を完了したことを示すのみであり、物理概念が内面化され習得されたことを直接証明するものではない」と明確に注記してください。

完全な修正コード、または main.js、index.html、style.css に対する差分パッチを出力してください。必要に応じて physics.js、stores.js、exploration.js に分割し、明確なモジュールインポートを保持してください。修正後はこれまでの4ラウンドの主要な状態を再検証してください。

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.

これまでの4ラウンドの物理コア、教師用ドロワー、および8種類のエネルギー貯蔵探究機能が完全に正常動作することを維持した上で、シーンアーキテクチャをリファクタリングおよびアップグレードし、「飛び出す絵本の展開、ホットドリンクのクローズアップ、電池断面のカメラワーク」を完全な「予測—実演—操作—解説—チャレンジ」という指導サイクルにシームレスに組み込んでください。

【アーキテクチャのリファクタリングとモデルの再利用】
1. プロシージャルモデルファクトリの抽出（store-models.js）：
   - 既存の8つのプロシージャルジオメトリ生成関数を独立したモジュール store-models.js に抽出し、探究エリアとデモシーンで基本モデルを共有できるようにします。カップの飲み口、電池の開閉、動的な本などは基本モデル上で拡張し、外部の GLB モデル、テクスチャ画像、音声ファイルの導入は厳禁とします。
   - ホットドリンクモデル：中空円柱のカップ本体、液面、取っ手、およびカップ上部に時間とともに揺らめきながら上昇する3本の黒い線（湯気を模したもの）。一時停止時は湯気の揺らめきの位相が完全に静止しなければなりません。静止モードでは静止状態を保ちます。定性的な概念図に過ぎず、分子の粒子動力学シミュレーションは行わず、液体の断面もないことを明記してください。
   - 電池モデル：円柱の外殻にヒンジで開く断面機構を追加し、展開時に単純化された層状のコアと中心棒が露出し、0〜100% の断面スライダーを提供します。定性的な構造の概念図であり、実際の単3電池の比率ではなく、亜鉛やマンガンなどの具体的な化学物質を表記することは厳禁、発光マテリアルを実体のある「電気エネルギーの流れ」と説明することは厳禁である旨を明記してください。
2. 飛び出す絵本の見開きベースプレート（guided-scene.js）：
   - Three.js を使用して2ページの見開きベースプレートを構築し、動的に描画した CanvasTexture を使用して手描きの印刷文字と白黒線画の質感を表現します（print→peel→shade→live のプロセスを模倣）。
   - 8つのモデルは最初右ページ上に線画の平面として配置され、起き上がり進捗（0〜100%）に伴ってヒンジ回転により徐々に3次元の立体モデルへと立ち上がります。手動の起き上がりスライダーを提供し、「完全な実演を再生」をクリックすると自動的に滑らかに展開するようにします。prefers-reduced-motion または静止モードでは、0% と 100% の静止形態を直接比較できるようにします。これは幾何学的な補間アニメーションであり、実際の紙の力学的な変形シミュレーションではないことを明記してください。

【5カットのカメラワークシステムと状態管理（guided-state.js）】
1. カットのメタデータとタイムライン構成：
   - 連続する5つのカメラワーク段階を設定し、合計時間を 15.5 秒とします：
     * Shot 1（3.0秒）：全景の俯瞰、飛び出す絵本の見開き展開とモデルの立ち上がり。
     * Shot 2（4.0秒）：カメラがホットドリンクのカップ口へスムーズに寄り、揺らめく3本の湯気と熱エネルギー貯蔵を表示。
     * Shot 3（4.0秒）：カメラが電池に向かい、外殻がヒンジで開いて断面が現れ、内部の化学エネルギー貯蔵構造を表示。
     * Shot 4（3.0秒）：本棚のローアングル側面視点に切り替わり、電池の外殻は自動で閉じ、本が棚から落下して地面に衝突。
     * Shot 5（1.5秒）：カメラが全景のオーバービューへ戻り、自由な操作状態に移行。
2. 再生制御とアクセシブルな操作部：
   - 実際に視認できるHTMLのカメラ制御パネルを提供：「再生／一時停止／再開」「最初から再生」「前のカット」「次のカット」、5つのカットへの直接ジャンプボタン群、および「実演を終了して全体へ戻る」ボタン。
   - デュアルエントリーのインタラクション：制御パネルをクリックするだけでなく、全体表示モードで3Dシーン内のホットドリンク、電池、または高い位置の本を直接クリックすることでも、対応するクローズアップのカメラワークへスムーズに遷移できるようにします。
3. 状態のクリーンアップとライフサイクルの分離：
   - キーボードの Space キーは現在実行中のカメラワークの再生／一時停止を優先して制御します。カメラワークの実行中にスペースキーによって本の落下が誤ってトリガーされることは絶対に防いでください。
   - ページからの離脱（visibilitychange）や教師用準備ドロワーを開いた際は、現在のカメラワークを直ちに自動一時停止します。一時停止時はカメラの補間、断面の展開、湯気の揺らめき、物理的な落下をすべて同時に静止させます。
   - 教師がドロワー内で物理パラメータ（m, h0, g）を変更した場合は、強制的に全体表示の初期状態へリセットします。
   - 実演を終了するか電池のカットから離脱した際は、電池の外殻が必ず閉じた状態に復帰し、断面が開いたままの残像を残さないようにします。

【物理コアの共有とデータの分離】
1. 単一の落下物理コア：
   - デモの第4カットにおける本の落下は、共通の computePhysicsState(progress, m, g, h0) を直接呼び出し、右側の手動探究エリアと現在の質量、高さ、重力パラメータを厳格に共有しなければなりません。手動モードで本の落下スライダーを操作した際、飛び出す絵本の中の本のメッシュの高さと左側の 14.7 J の帳簿が完全に同期するようにします。
   - ホットドリンクと電池は独立した定性的な日常の事例であり、その推定値を本の落下の 14.7 J の帳簿に合算したり混入させたりすることは厳禁とします。
2. 認知データの保護と JSON エクスポート：
   - デモエリアでホットドリンク、電池、本をクリックした場合はクローズアップの切り替えのみを行い、発見数にはカウントしません。8種類の探究エリアのモデルと同名ボタンのみが発見セットを変更します。5カットのカメラワーク実演の視聴は受動的な観察（Watch）であり、新しいページから視聴を開始した場合、全編および終了後の探究進捗は 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.