<!--
  教材名稱：溶液的配製互動模擬
  課綱對應：高中必修化學 第 4 章 溶液 — 4-2.2 溶液的配製與稀釋
  使用公式：W = C_M × M × V（固體配製）、C_{M1}V_1 = C_{M2}V_2（稀釋）
  數值來源：NIST Webbook (webbook.nist.gov) — 莫耳質量
            ISO 1042 / ISO 648 — 容量瓶與吸量管精度
  用詞依據：樂詞網 高中化學（terms.naer.edu.tw）
  最後修改：2026-09-03（V4.1 + 保護改造）
  V4.1 更新：
    1. 修正吸量管超量 bug —— 原有 9 組條件的 V₁ 超過吸量管最大容量 25 mL。
    2. CuSO₄ 母液濃度由 1 M 改為 2 M。
    3. 目標濃度依「母液濃度 × 容量瓶規格」動態篩選，只顯示 V₁ ≤ 25 mL 者。
    4. 修正切換顯示模式後分頁按鈕高亮未同步的問題。
  保護改造：莫耳質量、母液濃度、安全吸球負壓參數與目標值計算已移至
            netlify/functions/prep.js（未隨前端發佈）。
  V1.0：兩 Tab 互動配製模擬（固體溶質 / 稀釋）+ 共用儀器精度說明 Tab
        + 彎月面對位 overlay + 配製誤差報告 overlay
        + 結晶水切換 + 潤洗量化 + HCl 安全警告 + 安全吸球三鍵操作
  V1.1 更新：重畫容量瓶、吸量管、安全吸球、電子秤；
            動畫改為「粉末位移→燒杯傾斜→液柱進瓶口→水位漸進」三段式；
            攪拌改為棒尖畫圓；倒置混勻方向修正；
            安全吸球改為按住連續操作（pointerdown/up）；
            修正儀器精度 Tab 與主場景 SVG ID 衝突；
            移除「跳過水加 HCl」按鈕；強化彎月面 overlay 教學說明
  V1.2 更新：依教師附圖與 SVG 指令重繪容量瓶、刻度吸量管與安全吸球；
            採黑色外框、淡藍玻璃質感與紅色橡皮吸球；
            S 到 E 支管改為有填色厚度的橡膠件，並保留原互動液位與按住操作邏輯
  V1.3 更新：刪除洗瓶與洗瓶動畫；
            液體轉置改為來源液位降低、容量瓶液位增加，不再繪製液柱流動；
            依教師附圖重繪燒杯（直筒、薄橢圓杯口、左上倒液口、右側刻度）
  V1.4 更新：倒置混勻加入容量瓶液色漸進擴散；
            電子秤數值加入 overshoot/bounce 回彈；
            吸量管對準刻度加入淡綠光暈與「已對齊」提示；
            小螢幕側欄微調按鈕與區塊間距最佳化
  V1.5 更新：左側即時計算改為計算機符號，開啟全螢幕 canvas 逐步計算 overlay；
            目標濃度改為標籤按鈕，容量瓶保留 100 / 250 mL；
            新增無水 CuSO₄，CuSO₄·5H₂O 移除忽略結晶水勾選；
            調整裝置區圖形位置、大小與標籤尺寸
  V1.6 更新：重畫等寬圓頭玻棒；
            潤洗殘留液依次數變淡；
            倒置混勻時瓶內液體同步翻轉流動；
            彎月面對位改為全螢幕互動式定容 overlay；
            彎月面 ΔV 改為單一函式來源
  V1.7 更新：加長電子秤 LCD 顯示區；
            定容 overlay 改為刻度線附近微調、按住連續注水與開放玻璃管樣式；
            已完成流程鎖定，避免回頭修改前段操作
  V1.8 更新：計算畫布 overlay 上一步/下一步同步移動到對應步驟；
            最後一步或顯示全步驟後，再按 Enter 可關閉畫布 overlay
  V1.9 更新：開場動畫改為容量瓶輪廓；
            儀器精度示意圖 viewBox 修正；
            即時計算 overlay 改為 DOM + KaTeX 逐步卡片並統一 W / C_M 符號；
            安全吸球改為連續負壓模型，新增吸量管全螢幕雙欄同步放大操作
  V2.0 更新：校正固體顆粒顏色與描邊；
            加長攪拌玻棒，轉入/潤洗動畫加入提示箭頭；
            定容 overlay 液體改為彎月面曲線 path 並以曲線中心對齊刻度線
  V2.1 更新：校正 CuSO₄ 顆粒、定容對位高度、吸量管放大畫布與潤洗顏色層次
  V2.2 更新：調整安全吸球 S/E 鈕配置；修正儀器示意圖格版面
  V2.3 更新：儀器精度說明新增器材放大全螢幕 overlay
  V2.4 更新：縮窄安全吸球 A 上方管口，並於 E 鈕側邊新增同風格分支管口
  V2.5 更新：修正刻度吸量管為 0–24.5 mL 刻度，採 0.5 mL 未刻度死體積
  V3.0 更新：新增雙模式（🎬 教學投影模式 / 💻 個人使用模式）；進場選模式、點標題可切換；個人模式完全保留 V2.5 原版行為。
  V3.1 更新：教學投影模式精簡側欄 — 刪除「目前狀態」與「操作提示」；固體配製濃度限 0.500 M / 1.00 M、即時計算旁加「秤取目標質量」按鈕、移除質量微調按鈕；稀釋配製濃度限 0.500 M / 1.00 M、容量瓶限 100 mL。
  V4.0 更新：
    1. 署名統一改為「教材設計與製作：中山女高 劉泓其老師」（入場畫面、標題列、頁尾三處）。
    2. 標題列與頁尾署名改為可點選按鈕，開啟「聯絡與致謝」小視窗（不透明背板，× 鈕／點背板／ESC 三種關閉路徑）。
    3. ESC 分層：聯絡視窗（z-index 9000）優先於既有六個 overlay（z-index 8000），一次只關最上層；
       並在原有 capture 階段方向鍵監聽器加入守門，避免聯絡視窗開啟時下層計算 overlay 仍吃方向鍵。
    4. 名詞檢查（樂詞網）：容量瓶、吸量管、安全吸球、燒杯、量筒、攪拌棒、彎月面、潤洗、母液、
       溶質、溶劑、莫耳濃度、結晶水、蒸餾水、硫酸銅、過錳酸鉀、鹽酸等逐項比對，全部符合，本次無需修改。
    5. 修正 <title> 與 console 版本標示（原停留在 V3.1）。
-->
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>溶液的配製互動模擬 V4.0</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
  <style>
    :root {
      --bg:#FAFAF8;
      --surface:#FFFFFF;
      --surface2:#F5F4F0;
      --border:#E8E6E0;
      --text-primary:#1A1A2E;
      --text-secondary:#4A4A6A;
      --text-muted:#8A8AA0;
      --accent:#C8324A;
      --bond-length:#2D5FA6;
      --bond-energy:#27795A;
      --tab-active-bg:#F0F4FF;
      --font:'Microsoft JhengHei','PingFang TC','Noto Sans TC','Hiragino Sans',system-ui,sans-serif;
    }
    * { box-sizing:border-box; }
    html, body { margin:0; width:100%; height:100%; }
    body {
      height:100vh;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      background:var(--bg);
      color:var(--text-primary);
      font-family:var(--font);
      font-size:16px;
    }
    button, input, select { font:inherit; }
    button { cursor:pointer; }
    sub, sup { line-height:0; }
    .hidden { display:none!important; }

    #loading-screen {
      position:fixed;
      inset:0;
      z-index:9999;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:12px;
      background:var(--bg);
      transition:opacity .6s ease;
    }
    #loading-screen.fade-out { opacity:0; }
    #loading-flask {
      width:120px;
      height:150px;
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:10px;
      box-shadow:0 10px 30px rgba(26,26,46,.08);
    }
    .loading-bubble { opacity:0; animation:loadingBubble 1.7s ease-in-out infinite; }
    .loading-bubble:nth-of-type(2) { animation-delay:.35s; }
    .loading-bubble:nth-of-type(3) { animation-delay:.7s; }
    @keyframes loadingBubble {
      0% { transform:translateY(0); opacity:0; }
      30% { opacity:.9; }
      100% { transform:translateY(-20px); opacity:0; }
    }
    .loading-title { font-size:42px; font-weight:700; letter-spacing:0; }
    .loading-title span, #topbar h1 span { color:var(--accent); }
    .loading-sub { color:var(--text-secondary); font-size:21px; }
    .loading-credit { color:var(--text-muted); font-size:16px; }

    /* 入場畫面著作權：只放單行 ©，完整條款在「聯絡與致謝」overlay 內 */
    .loading-copyright {
      margin-top: 2px;
      color: var(--text-muted);
      font-size: 13px;          /* 全域最小字級下限 */
      font-weight: 600;
      opacity: .78;             /* 視覺層級低於署名 */
      letter-spacing: .01em;
      text-align: center;
    }

    .loading-bar-wrap {
      width:240px;
      height:7px;
      border-radius:99px;
      background:var(--surface2);
      overflow:hidden;
      margin-top:2px;
    }
    .loading-bar {
      width:45%;
      height:100%;
      border-radius:99px;
      background:linear-gradient(90deg,var(--bond-length),var(--bond-energy));
      animation:loadbar 1.6s ease-in-out infinite;
    }
    @keyframes loadbar {
      0% { transform:translateX(-115%); }
      50% { transform:translateX(95%); }
      100% { transform:translateX(255%); }
    }

    #topbar {
      height:50px;
      flex-shrink:0;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 18px;
      background:rgba(255,255,255,.82);
      border-bottom:1px solid var(--border);
      backdrop-filter:blur(12px);
    }
    #topbar h1 { flex:1; margin:0; font-size:24px; font-weight:800; letter-spacing:0; }
    .topbar-tag {
      padding:5px 13px;
      border-radius:20px;
      background:var(--surface2);
      color:var(--text-secondary);
      font-size:16px;
      font-weight:700;
      white-space:nowrap;
    }
    #tab-bar {
      height:45px;
      flex-shrink:0;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      background:var(--surface);
      border-bottom:1px solid var(--border);
    }
    .tab-btn {
      height:100%;
      border:0;
      border-bottom:3px solid transparent;
      background:transparent;
      color:var(--text-secondary);
      font-size:18px;
      font-weight:800;
      padding:0 24px;
    }
    .tab-btn.active {
      color:var(--bond-length);
      border-bottom-color:var(--bond-length);
      background:var(--tab-active-bg);
    }
    .tab-btn:hover:not(.active) { background:var(--surface2); color:var(--text-primary); }

    #main-area {
      flex:1;
      min-height:0;
      display:flex;
      overflow:hidden;
      background:var(--surface2);
    }
    #side-panel {
      width:26%;
      min-width:340px;
      max-width:430px;
      flex-shrink:0;
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      gap:10px;
      padding:12px;
      background:var(--bg);
      border-right:1px solid var(--border);
      transition: width .28s ease, min-width .28s ease, padding .28s ease, opacity .2s ease;
    }
    #side-panel.collapsed {
      width:0!important; min-width:0!important; padding:0!important;
      opacity:0; overflow:hidden; border-right:none;
    }
    /* 收合按鈕：嵌在「選擇條件」h2 右側 */
    .side-collapse-btn {
      margin-left:auto; flex-shrink:0;
      background:none; border:1px solid var(--border); border-radius:6px;
      color:var(--text-secondary); font-size:13px; line-height:1;
      padding:3px 7px; cursor:pointer; transition: background .15s;
    }
    .side-collapse-btn:hover { background:var(--surface2); }
    /* 展開按鈕：收合後浮在左側 */
    #btnExpandPanel {
      display:none; position:absolute; left:0; top:50%; transform:translateY(-50%);
      z-index:20; writing-mode:vertical-rl; text-orientation:mixed;
      background:var(--bg); border:1px solid var(--border); border-left:none;
      border-radius:0 8px 8px 0; padding:10px 5px;
      color:var(--text-secondary); font-size:13px; font-weight:700; cursor:pointer;
      box-shadow:2px 0 8px rgba(26,26,46,.08);
    }
    #btnExpandPanel:hover { background:var(--surface2); }
    #main-area.panel-collapsed #btnExpandPanel { display:block; }
    #main-area { position:relative; }
    .side-section {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:10px;
      padding:12px;
      box-shadow:0 5px 18px rgba(26,26,46,.04);
    }
    .side-section h2 {
      margin:0 0 10px;
      font-size:18px;
      color:var(--text-primary);
      font-weight:800;
    }
    .field { margin-bottom:10px; }
    label { display:block; color:var(--text-secondary); font-weight:700; font-size:16px; margin-bottom:5px; }
    select, input[type="number"] {
      width:100%;
      min-height:36px;
      border:1px solid var(--border);
      border-radius:8px;
      background:var(--surface);
      color:var(--text-primary);
      padding:6px 9px;
      font-size:16px;
      outline:none;
    }
    select:focus, input:focus { border-color:var(--bond-length); box-shadow:0 0 0 2px rgba(45,95,166,.12); }
    .range-row {
      display:grid;
      grid-template-columns:1fr 84px;
      align-items:center;
      gap:9px;
    }
    input[type="range"] { width:100%; accent-color:var(--bond-length); }
    .range-value {
      color:var(--bond-length);
      font-weight:800;
      text-align:right;
      white-space:nowrap;
      font-size:16px;
    }
    .tag-choice-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:7px;
    }
    .tag-choice-grid.conc { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .tag-choice-grid.volume { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .tag-btn {
      min-height:36px;
      border:1.5px solid var(--border);
      border-radius:999px;
      background:var(--surface);
      color:var(--text-secondary);
      font-size:15px;
      font-weight:850;
      white-space:nowrap;
      padding:6px 8px;
    }
    .tag-btn.active {
      border-color:var(--bond-length);
      background:var(--tab-active-bg);
      color:var(--bond-length);
      box-shadow:0 0 0 2px rgba(45,95,166,.08);
    }
    .tag-btn:hover:not(.active) { border-color:rgba(45,95,166,.42); color:var(--bond-length); }
    .calc-line { line-height:1.55; color:var(--text-secondary); font-size:16px; }
    .calc-line strong, .result-green { color:var(--bond-energy); font-size:18px; font-weight:800; }
    .formula-box {
      padding:9px 10px;
      background:var(--surface2);
      border-radius:8px;
      margin:8px 0;
      overflow:hidden;
    }
    .calc-launch-btn {
      width:100%;
      min-height:86px;
      border:1.5px solid rgba(45,95,166,.28);
      border-radius:12px;
      background:linear-gradient(180deg,#FFFFFF,#F3F7FF);
      color:var(--text-primary);
      display:grid;
      grid-template-columns:58px 1fr;
      align-items:center;
      gap:10px;
      padding:12px;
      text-align:left;
      box-shadow:0 8px 20px rgba(45,95,166,.07);
    }
    .calc-launch-btn:hover {
      border-color:var(--bond-length);
      box-shadow:0 10px 24px rgba(45,95,166,.12);
      transform:translateY(-1px);
    }
    .calc-launch-icon {
      width:54px;
      height:54px;
      border-radius:14px;
      display:flex;
      align-items:center;
      justify-content:center;
      background:var(--bond-length);
      color:#fff;
      font-size:32px;
      line-height:1;
    }
    .calc-launch-title {
      display:block;
      color:var(--bond-length);
      font-size:17px;
      font-weight:900;
      line-height:1.25;
    }
    .calc-launch-result {
      display:block;
      margin-top:4px;
      color:var(--bond-energy);
      font-size:18px;
      font-weight:900;
      line-height:1.25;
    }
    .calc-launch-hint {
      display:block;
      margin-top:3px;
      color:var(--text-muted);
      font-size:13px;
      font-weight:700;
      line-height:1.25;
    }
    .checkbox-row {
      display:flex;
      align-items:flex-start;
      gap:8px;
      color:var(--text-secondary);
      font-size:16px;
      line-height:1.45;
      margin-top:8px;
    }
    .checkbox-row input { width:18px; height:18px; margin-top:2px; accent-color:var(--accent); }
    .error-text { color:var(--accent); font-size:16px; font-weight:800; line-height:1.45; margin-top:6px; }
    .muted-note { color:var(--text-muted); font-size:16px; line-height:1.45; }
    .status-list {
      display:grid;
      gap:6px;
      color:var(--text-secondary);
      font-size:16px;
      line-height:1.35;
    }
    .status-list strong { color:var(--text-primary); }
    .micro-actions {
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:6px;
      margin-top:8px;
    }
    .micro-actions button {
      border:1px solid var(--border);
      background:var(--surface2);
      border-radius:8px;
      padding:7px 5px;
      font-size:16px;
      font-weight:800;
      color:var(--text-secondary);
    }
    .micro-actions button:hover:not(:disabled) { border-color:var(--bond-length); color:var(--bond-length); background:var(--tab-active-bg); }
    .micro-actions button:disabled { opacity:.45; cursor:not-allowed; }
    .aligned-note { color:var(--bond-energy); fill:var(--bond-energy); font-weight:900; }

    #workspace {
      flex:1;
      min-width:0;
      min-height:0;
      display:flex;
      flex-direction:column;
      padding:12px;
      gap:10px;
    }
    #status-strip {
      height:34px;
      flex-shrink:0;
      display:flex;
      align-items:center;
      padding:0 14px;
      border:1px solid var(--border);
      border-radius:9px;
      background:rgba(255,255,255,.86);
      color:var(--text-secondary);
      font-size:16px;
      font-weight:700;
      overflow:hidden;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    #scene-wrap {
      flex:1;
      min-height:0;
      display:flex;
      align-items:center;
      justify-content:center;
      background:linear-gradient(180deg,#fff,var(--surface2));
      border:1px solid var(--border);
      border-radius:12px;
      overflow:hidden;
      position:relative;
    }
    #apparatusSvg {
      width:100%;
      height:100%;
      max-height:100%;
      display:block;
    }
    .svg-label { font-size:20px; fill:var(--text-secondary); font-weight:900; }
    .svg-small { font-size:18px; fill:#536B7A; font-weight:750; }
    .pipette-readout-highlight { fill:#FFF0A8; opacity:.88; stroke:#E4C95B; stroke-width:1.5; }
    .pipette-readout-text { font-size:28px; fill:#111; font-weight:500; }
    .svg-action { cursor:pointer; }
    .svg-action rect, .svg-action circle { transition:fill .18s ease, stroke .18s ease; }
    .svg-action:hover rect, .svg-action:hover circle { stroke:var(--bond-length); fill:#EEF4FF; }
    .svg-action[style*="pointer-events: none"] rect,
    .svg-action[style*="pointer-events: none"] circle { stroke:#D8D6D0!important; }
    .lcd-ok { fill:#00FF88!important; }
    .lcd-warn { fill:#FF5370!important; }
    .zone-line { stroke:#D8D6D0; stroke-dasharray:4 4; }

    #step-strip {
      height:68px;
      flex-shrink:0;
      display:grid;
      gap:8px;
      align-items:center;
    }
    .step-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
    .step-grid.dilute { grid-template-columns:repeat(5,1fr); }
    .step-pill {
      height:54px;
      border:2px solid var(--border);
      border-radius:999px;
      background:var(--surface2);
      color:var(--text-secondary);
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap:1px;
      font-weight:800;
      min-width:0;
    }
    .step-pill .code { font-size:16px; line-height:1; }
    .step-pill .sub { font-size:13px; font-weight:700; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:95%; }
    .step-pill.done { background:var(--bond-energy); color:#fff; border-color:var(--bond-energy); }
    .step-pill.current { background:#fff; color:var(--bond-length); border-color:var(--bond-length); animation:pulseStep 1.4s ease-in-out infinite; }
    .step-pill.locked { opacity:.58; cursor:not-allowed; }
    @keyframes pulseStep {
      0%,100% { box-shadow:0 0 0 0 rgba(45,95,166,.16); }
      50% { box-shadow:0 0 0 7px rgba(45,95,166,.08); }
    }

    #precision-panel {
      width:100%;
      height:100%;
      padding:22px;
      display:grid;
      grid-template-columns:minmax(440px, 1fr) 1.2fr;
      gap:18px;
      overflow:hidden;
    }
    .precision-card {
      background:var(--surface);
      border:1px solid var(--border);
      border-radius:12px;
      padding:18px;
      min-height:0;
      box-shadow:0 8px 22px rgba(26,26,46,.05);
      display:flex;
      flex-direction:column;
    }
    .precision-card > * { flex-shrink:0; }
    .precision-card h2 { margin:0 0 14px; font-size:22px; color:var(--bond-length); }
    .precision-heading {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin:0 0 14px;
    }
    .precision-heading h2 { margin:0; }
    .instrument-zoom-btn {
      display:inline-flex;
      align-items:center;
      gap:7px;
      border:1px solid rgba(45,95,166,.35);
      border-radius:8px;
      background:var(--tab-active-bg);
      color:var(--bond-length);
      padding:8px 11px;
      font-size:15px;
      font-weight:800;
      white-space:nowrap;
    }
    .instrument-zoom-btn svg { width:22px; height:22px; flex:0 0 auto; }
    .precision-table {
      width:100%;
      border-collapse:collapse;
      font-size:17px;
    }
    .precision-table th, .precision-table td {
      border:1px solid var(--border);
      padding:11px 12px;
      text-align:left;
    }
    .precision-table th { background:var(--surface2); color:var(--text-primary); }
    .instrument-grid {
      display:grid;
      grid-template-columns:repeat(2,1fr);
      grid-auto-rows:1fr;
      gap:12px;
      flex:1;
      min-height:0;
    }
    .instrument-tile {
      background:linear-gradient(180deg,#fff,var(--surface2));
      border:1px solid var(--border);
      border-radius:10px;
      display:flex;
      flex-direction:column;
      min-height:0;
      overflow:hidden;
      position:static;
    }
    .instrument-tile span {
      position:static;
      padding:8px 12px 4px;
      color:var(--text-secondary);
      font-size:16px;
      font-weight:800;
      flex-shrink:0;
    }
    .instrument-tile svg {
      flex:1;
      width:100%;
      height:100%;
      min-height:0;
      display:block;
    }

    #controls-bar {
      height:54px;
      flex-shrink:0;
      display:flex;
      align-items:center;
      gap:10px;
      padding:0 16px;
      background:rgba(255,255,255,.9);
      border-top:1px solid var(--border);
    }
    #control-status {
      flex:1;
      min-width:0;
      color:var(--text-secondary);
      font-size:16px;
      font-weight:700;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .ctrl-btn {
      border:1px solid var(--border);
      border-radius:9px;
      padding:8px 14px;
      background:var(--surface);
      color:var(--text-secondary);
      font-size:16px;
      font-weight:800;
      white-space:nowrap;
    }
    .ctrl-btn:hover { border-color:var(--bond-length); color:var(--bond-length); background:var(--tab-active-bg); }
    .ctrl-btn.primary { background:var(--bond-length); border-color:var(--bond-length); color:#fff; }
    .ctrl-btn.report-ready { background:var(--bond-energy); border-color:var(--bond-energy); color:#fff; }
    .ctrl-btn.is-fullscreen { background:var(--bond-length); border-color:var(--bond-length); color:#fff; }
    #footer {
      height:28px;
      flex-shrink:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:0 10px;
      background:var(--surface2);
      color:var(--text-muted);
      font-size:14px;
      border-top:1px solid var(--border);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .calc-overlay, .meniscus-overlay, .warning-overlay, .instrument-overlay {
      position:fixed;
      inset:0;
      z-index:8000;
      display:none;
      align-items:center;
      justify-content:center;
      background:rgba(26,26,46,.80);
      backdrop-filter:blur(8px);
      padding:20px;
    }
    .calc-overlay.show, .meniscus-overlay.show, .warning-overlay.show, .instrument-overlay.show { display:flex; }
    .calc-board {
      position:relative;
      width:min(1100px,94vw);
      height:min(680px,88vh);
      overflow:hidden;
      background:var(--surface);
      border-radius:16px;
      box-shadow:0 20px 70px rgba(0,0,0,.30);
    }
    .quick-calc-board {
      width:min(1180px,calc(100vw - 28px));
      height:min(760px,calc(100vh - 28px));
      background:#fff;
    }
    .qc-scroll {
      width:100%;
      height:calc(100% - 64px);
      overflow-y:auto;
      display:flex;
      flex-direction:column;
      gap:14px;
      padding:30px 48px 24px;
      background:linear-gradient(180deg,#F4F8FF 0%,#FFFFFF 34%,#FFFFFF 100%);
    }
    .qc-head {
      padding-bottom:14px;
      border-bottom:2px solid var(--surface2);
      margin-bottom:2px;
    }
    .qc-head h2 { margin:0; color:var(--bond-length); font-size:24px; font-weight:900; }
    .qc-head p { margin:6px 0 0; color:var(--text-muted); font-size:17px; font-weight:700; }
    .qc-card {
      background:rgba(255,255,255,.9);
      border:1.2px solid var(--border);
      border-radius:12px;
      padding:18px 24px;
      opacity:.44;
      transform:translateY(5px);
      transition:opacity .32s ease, transform .32s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .qc-card.visible { opacity:1; transform:translateY(0); }
    .qc-card.current { border-color:rgba(45,95,166,.62); box-shadow:0 8px 24px rgba(45,95,166,.10); }
    .qc-title { color:var(--bond-length); font-size:22px; font-weight:900; margin-bottom:12px; }
    .qc-bullets { margin:0; padding-left:24px; color:var(--text-secondary); font-size:18px; line-height:1.55; font-weight:700; }
    .qc-formula { margin:12px 0 4px; font-size:24px; overflow-x:auto; }
    .qc-result {
      margin-top:12px;
      padding:10px 14px;
      border-left:4px solid var(--accent);
      border-radius:8px;
      background:#FFF5F7;
      color:var(--accent);
      font-size:21px;
      font-weight:900;
    }
    .calc-dom-panel {
      width:100%;
      height:calc(100% - 64px);
      overflow-y:auto;
      padding:28px 48px 18px;
      background:linear-gradient(180deg,#F4F8FF,#fff 170px);
    }
    .calc-head {
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:18px;
      padding-bottom:14px;
      border-bottom:2px solid var(--surface2);
    }
    .calc-head h2 { margin:0; color:var(--bond-length); font-size:22px; }
    .calc-subtitle { color:var(--text-muted); font-size:17px; font-weight:700; margin-top:4px; }
    .modal-close {
      position:absolute;
      top:16px;
      right:16px;
      z-index:2;
      border:0;
      background:var(--surface2);
      color:var(--text-secondary);
      border-radius:20px;
      min-width:36px;
      height:36px;
      font-size:20px;
      font-weight:800;
    }
    .calc-dom-steps { display:flex; flex-direction:column; gap:14px; }
    .calc-step-card {
      background:rgba(255,255,255,.88);
      border:1.2px solid var(--border);
      border-radius:12px;
      padding:18px 24px 16px;
      opacity:0;
      transform:translateY(6px);
      transition:opacity .4s ease, transform .4s ease;
      font-size:17px;
      line-height:1.6;
    }
    .calc-step-card.visible { opacity:1; transform:translateY(0); }
    .calc-step-title {
      font-size:22px;
      font-weight:800;
      color:var(--bond-length);
      margin-bottom:12px;
    }
    .calc-controls {
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:64px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px 18px;
      background:rgba(255,255,255,.94);
      border-top:1px solid var(--border);
      backdrop-filter:blur(10px);
    }
    .calc-controls button {
      border:1px solid var(--border);
      border-radius:8px;
      padding:8px 14px;
      font-size:16px;
      font-weight:800;
      white-space:nowrap;
    }
    .calc-prev-btn, .calc-replay-btn { background:var(--surface); color:var(--text-secondary); }
    .calc-next-btn, .calc-done-btn { background:var(--bond-length); border-color:var(--bond-length)!important; color:#fff; }
    .calc-direct-done-btn { background:var(--tab-active-bg); color:var(--bond-length); border-color:rgba(45,95,166,.35)!important; }
    .calc-table {
      width:100%;
      border-collapse:collapse;
      margin:10px 0;
      font-size:16px;
    }
    .calc-table th, .calc-table td {
      border:1px solid var(--border);
      padding:8px 10px;
      text-align:left;
      vertical-align:top;
    }
    .calc-table th { background:var(--surface2); }
    .calc-result {
      color:var(--accent);
      background:#FFF5F7;
      border-left:4px solid var(--accent);
      border-radius:6px;
      padding:9px 12px;
      font-weight:800;
      font-size:18px;
      margin-top:10px;
    }
    .katex-display-wrap { margin:10px 0; font-size:24px; text-align:center; overflow-x:auto; }

    .instrument-overlay { background:rgba(26,26,46,.86); padding:0; }
    .instrument-zoom-board {
      position:relative;
      width:100vw;
      height:100vh;
      background:linear-gradient(180deg,#F8FBFF 0%,#FFFFFF 45%,#F5F4F0 100%);
      padding:30px 34px 28px;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .instrument-zoom-head {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      padding-right:54px;
      flex-shrink:0;
    }
    .instrument-zoom-head h2 {
      margin:0;
      color:var(--bond-length);
      font-size:28px;
      font-weight:900;
    }
    .instrument-zoom-head p {
      margin:4px 0 0;
      color:var(--text-muted);
      font-size:16px;
      font-weight:700;
    }
    .instrument-zoom-grid {
      flex:1;
      min-height:0;
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .instrument-zoom-tile {
      min-width:0;
      min-height:0;
      background:rgba(255,255,255,.94);
      border:1.4px solid rgba(45,95,166,.22);
      border-radius:12px;
      display:flex;
      flex-direction:column;
      overflow:hidden;
      box-shadow:0 12px 34px rgba(26,26,46,.10);
    }
    .instrument-zoom-title {
      padding:12px 14px 8px;
      color:var(--text-secondary);
      font-size:18px;
      font-weight:900;
      flex-shrink:0;
    }
    .instrument-zoom-tile svg {
      flex:1;
      width:100%;
      height:100%;
      min-height:0;
      display:block;
    }
    @media (max-width:900px) {
      .instrument-zoom-board { padding:22px 18px 18px; }
      .instrument-zoom-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .instrument-zoom-head h2 { font-size:24px; }
    }

    .meniscus-overlay { padding:0; background:rgba(26,26,46,.88); }
    .meniscus-fs {
      width:100vw;
      height:100vh;
      display:grid;
      grid-template-rows:minmax(0,1fr) auto;
      align-items:center;
      justify-items:center;
      padding:22px 22px 18px;
      position:relative;
    }
    #meniscusSvg {
      width:min(52vw,520px);
      height:min(78vh,760px);
      max-width:92vw;
      display:block;
      cursor:pointer;
      filter:drop-shadow(0 22px 50px rgba(0,0,0,.32));
    }
    .meniscus-bar {
      width:min(1120px,calc(100vw - 32px));
      min-height:74px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      padding:12px;
      background:rgba(255,255,255,.94);
      border:1px solid rgba(255,255,255,.58);
      border-radius:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.22);
      backdrop-filter:blur(12px);
    }
    .meniscus-prompt {
      position:absolute;
      top:18px;
      left:50%;
      transform:translateX(-50%);
      color:#fff;
      background:rgba(26,26,46,.42);
      border:1px solid rgba(255,255,255,.22);
      border-radius:999px;
      padding:8px 18px;
      font-size:21px;
      font-weight:850;
      white-space:nowrap;
    }
    #meniscusReadout {
      flex:1;
      min-width:260px;
      color:var(--text-primary);
      font-size:21px;
      font-weight:900;
      white-space:nowrap;
    }
    .meniscus-eye {
      display:flex;
      gap:6px;
      padding:4px;
      border-radius:999px;
      background:var(--surface2);
    }
    .meniscus-eye button {
      border:1px solid transparent;
      border-radius:999px;
      padding:8px 12px;
      background:transparent;
      color:var(--text-secondary);
      font-size:16px;
      font-weight:850;
      white-space:nowrap;
    }
    .meniscus-eye button.active {
      background:#fff;
      border-color:rgba(45,95,166,.35);
      color:var(--bond-length);
      box-shadow:0 3px 10px rgba(45,95,166,.10);
    }
    .meniscus-status-aligned { color:var(--bond-energy)!important; }
    .meniscus-status-over { color:var(--accent)!important; }
    .warning-card {
      width:min(620px,94vw);
      background:#fff;
      border:3px solid var(--accent);
      border-radius:16px;
      box-shadow:0 20px 70px rgba(0,0,0,.32);
      padding:24px;
      font-size:18px;
      line-height:1.6;
      color:var(--text-primary);
      position:relative;
      overflow:hidden;
    }
    .warning-card h2 { margin:0 0 12px; color:var(--accent); font-size:24px; }
    .warning-card button {
      margin-top:16px;
      border:1px solid var(--accent);
      border-radius:9px;
      padding:9px 16px;
      background:var(--accent);
      color:#fff;
      font-size:16px;
      font-weight:800;
    }
    .splash-dot {
      position:absolute;
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--accent);
      opacity:0;
      animation:splash .6s ease-out forwards;
    }
    @keyframes splash {
      0% { transform:translate(0,0) scale(.4); opacity:.9; }
      100% { transform:translate(var(--dx),var(--dy)) scale(1.1); opacity:0; }
    }

    .transfer-arc { opacity:0; }
    .anim-transfer .transfer-arc { animation:flowFlash .9s ease-in-out 1; }
    .anim-stir #main-solid-stir-rod { animation:stir-orbit 1.2s linear 3; }
    .anim-stir #main-solid-beaker-swirl { animation:swirl 1.2s linear 3; }
    .anim-powder #main-solid-powder { animation:powder-transfer .5s cubic-bezier(.22,.8,.28,1) 1 forwards; }
    .anim-invert #main-solid-flask, .anim-invert #main-dilute-flask { animation:invertFlask 2.6s ease-in-out 1; transform-origin:center; transform-box:fill-box; }
    .anim-invert #main-solid-flask-liquid-wrap, .anim-invert #main-dilute-flask-liquid-wrap {
      animation:invertLiquidFlow 2.6s ease-in-out 1;
      transform-origin:center;
      transform-box:fill-box;
    }
    .anim-invert #main-solid-flask-liquid, .anim-invert #main-dilute-flask-liquid {
      animation:liquidSlosh 2.6s ease-in-out 1;
    }
    .anim-invert #main-solid-flask-meniscus, .anim-invert #main-dilute-flask-meniscus {
      animation:meniscusSlosh 2.6s ease-in-out 1;
    }
    .anim-invert .wave-line { animation:waveMove .8s ease-in-out 3; transform-box:fill-box; }
    @keyframes flowFlash { 0%,100% { opacity:0; } 20%,80% { opacity:1; } }
    @keyframes stir-orbit {
      0%,100% { transform:translate(0,0); }
      25% { transform:translate(8px,-4px); }
      50% { transform:translate(0,-8px); }
      75% { transform:translate(-8px,-4px); }
    }
    @keyframes swirl {
      0% { stroke-dashoffset:0; opacity:.2; }
      50% { opacity:.85; }
      100% { stroke-dashoffset:-80; opacity:.2; }
    }
    @keyframes powder-transfer {
      0% { transform:translate(0,0); opacity:1; }
      65% { transform:translate(150px,22px); opacity:.72; }
      100% { transform:translate(245px,72px); opacity:0; }
    }
    @keyframes invertFlask {
      0% { transform:rotate(0deg); }
      20% { transform:rotate(160deg); }
      35% { transform:rotate(180deg); }
      50% { transform:rotate(20deg); }
      60% { transform:rotate(0deg); }
      70% { transform:rotate(160deg); }
      85% { transform:rotate(180deg); }
      100% { transform:rotate(0deg); }
    }
    @keyframes invertLiquidFlow {
      0% { transform:rotate(0deg) translateY(0); }
      20% { transform:rotate(160deg) translateY(-22px); }
      35% { transform:rotate(180deg) translateY(-34px); }
      50% { transform:rotate(20deg) translateY(18px); }
      60% { transform:rotate(0deg) translateY(0); }
      70% { transform:rotate(160deg) translateY(-22px); }
      85% { transform:rotate(180deg) translateY(-34px); }
      100% { transform:rotate(0deg) translateY(0); }
    }
    @keyframes liquidSlosh {
      0%,100% { transform:scaleY(1); transform-origin:center bottom; }
      28%,80% { transform:scaleY(.82); transform-origin:center top; }
      44% { transform:scaleY(1.12); transform-origin:center bottom; }
    }
    @keyframes meniscusSlosh {
      0%,100% { transform:translateY(0) scaleX(1); }
      28%,80% { transform:translateY(-28px) scaleX(.88); }
      44% { transform:translateY(18px) scaleX(1.14); }
    }
    @keyframes waveMove {
      0%,100% { transform:translateY(0); opacity:.55; }
      50% { transform:translateY(-14px) scaleX(1.08); opacity:.9; }
    }
    .wave-line:nth-of-type(2) { animation-delay:.15s; }
    .wave-line:nth-of-type(3) { animation-delay:.30s; }
    .warn-card {
      margin-top:8px;
      padding:8px 10px;
      border:1.5px solid #E2A400;
      background:#FFF8DF;
      color:#7A5400;
      border-radius:8px;
      font-size:16px;
      font-weight:800;
      line-height:1.45;
    }
    .pipette-aligned-glow line {
      animation:pipetteMarkPulse 1.05s ease-in-out infinite;
      stroke:#27795A!important;
    }
    @keyframes pipetteMarkPulse {
      0%,100% { filter:drop-shadow(0 0 0 rgba(39,121,90,0)); opacity:.74; }
      50% { filter:drop-shadow(0 0 7px rgba(39,121,90,.72)); opacity:1; }
    }
    @keyframes ePulse {
      0%,100% { stroke:#FFC400; stroke-width:4; filter:drop-shadow(0 0 2px #FFC400); }
      50% { stroke:#FFD84D; stroke-width:7; filter:drop-shadow(0 0 8px #FFC400); }
    }
    .e-highlight circle:first-of-type { animation:ePulse 1.1s ease-in-out infinite; }
    .pipette-zoom-fs {
      width:100vw;
      height:100vh;
      display:grid;
      grid-template-rows:auto minmax(0,1fr) auto;
      gap:14px;
      padding:20px 22px 18px;
      position:relative;
    }
    .pz-prompt {
      justify-self:center;
      color:#fff;
      background:rgba(26,26,46,.42);
      border:1px solid rgba(255,255,255,.22);
      border-radius:999px;
      padding:8px 18px;
      font-size:18px;
      font-weight:800;
      text-align:center;
    }
    .pz-grid {
      min-height:0;
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(0,2fr);
      gap:18px;
      align-items:stretch;
      height:100%;
    }
    .pz-left, .pz-right {
      min-height:0;
      background:rgba(255,255,255,.94);
      border:1px solid rgba(255,255,255,.58);
      border-radius:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.22);
      backdrop-filter:blur(12px);
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    #pzPipetteSvg, #pzBulbSvg {
      width:100%;
      height:100%;
      max-height:100%;
      display:block;
    }
    .pz-bar {
      width:min(920px,calc(100vw - 32px));
      justify-self:center;
      min-height:62px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:16px;
      padding:10px 14px;
      background:rgba(255,255,255,.95);
      border:1px solid rgba(255,255,255,.58);
      border-radius:14px;
      box-shadow:0 18px 50px rgba(0,0,0,.22);
      font-size:20px;
      font-weight:900;
      color:var(--bond-length);
    }
    .pz-bar.aligned { color:var(--accent-green); }
    @media (max-width:1100px) {
      #side-panel { min-width:306px; padding:7px; gap:6px; }
      .side-section { padding:8px; border-radius:8px; }
      .side-section h2 { margin-bottom:6px; font-size:17px; }
      .field { margin-bottom:6px; }
      label { margin-bottom:3px; font-size:16px; }
      select, input[type="number"] { min-height:32px; padding:4px 8px; font-size:16px; }
      .status-list { gap:3px; font-size:16px; line-height:1.18; }
      .muted-note { font-size:16px; line-height:1.22; }
      .tab-btn { padding:0 14px; }
      #workspace { padding:8px; gap:7px; }
      .micro-actions { grid-template-columns:repeat(2,1fr); gap:5px; margin-top:5px; }
      .micro-actions button { padding:4px 2px; font-size:16px; border-radius:7px; }
      .pz-grid { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) minmax(220px,.72fr); gap:10px; }
      .pz-prompt { border-radius:10px; font-size:15px; }
      .pz-bar { font-size:17px; flex-wrap:wrap; }
      .precision-table { font-size:16px; }
    }

    /* ── 雙模式進場按鈕 ── */
    .loading-modes { display: flex; gap: 14px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
    .mode-btn {
      position: relative;
      min-width: 210px; border-radius: 26px; padding: 13px 24px;
      font-size: 20px; font-weight: 900; cursor: pointer;
      border: 2px solid var(--bond-length);
      box-shadow: 0 10px 24px rgba(26,26,46,0.10);
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
    }
    .mode-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 0 0 4px rgba(45,95,166,0.18),
                  0 14px 34px rgba(45,95,166,0.30);
    }
    .mode-teach    { color: #fff; background: var(--bond-length); }
    .mode-personal { color: var(--bond-length); background: #fff; }
    .mode-personal:hover { background: var(--tab-active-bg, #F0F4FF); }

    /* ── 模式標籤 ── */
    .mode-label {
      font-size: 14px;
      font-weight: 800;
      color: var(--text-primary);
      margin-left: 10px;
      cursor: pointer;
      padding: 1px 7px;
      border-radius: 4px;
      background: linear-gradient(180deg, rgba(255,235,59,.55) 0%, #FFEB3B 55%, rgba(255,235,59,.85) 100%);
      box-shadow: 0 1px 0 rgba(0,0,0,.04);
      white-space: nowrap;
    }
    .mode-label:empty { background: none; padding: 0; box-shadow: none; }
    body.teach-mode .mode-label { font-size: 15px; }
    #titleMain { cursor: pointer; }

    /* ── 署名標籤（教學模式顯示於頁首右側）：可點選開啟聯絡與致謝視窗 ── */
    .creator-tag {
      display: none;
      padding: 3px 10px;
      border: 1px solid transparent;
      border-radius: 14px;
      background: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-secondary);
      white-space: nowrap;
      cursor: pointer;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .creator-tag:hover,
    .creator-tag:focus-visible {
      color: var(--accent);
      border-color: var(--accent);
      background: rgba(200,50,74,.06);
    }
    /* 頁尾署名（個人模式顯示於頁尾）：同樣可點選 */
    .footer-creator {
      padding: 0;
      border: none;
      background: none;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      color: var(--text-muted);
      text-decoration: underline dotted;
      text-underline-offset: 3px;
      cursor: pointer;
      transition: color .18s ease;
    }
    .footer-creator:hover,
    .footer-creator:focus-visible { color: var(--accent); }

    /* ── 聯絡與致謝 overlay（小視窗、不透明背板；z-index 高於既有 overlay 8000） ── */
    #contactOverlay {
      position: fixed;
      inset: 0;
      z-index: 9000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 28px;
      background: rgba(26,26,46,.72);
      backdrop-filter: blur(8px);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
    }
    #contactOverlay.is-open { opacity: 1; pointer-events: auto; }
    .contact-sheet {
      width: min(560px, 94vw);
      max-height: 88vh;
      overflow: auto;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,.64);
      /* 不透明背板：不使用半透明底色 */
      background: var(--surface);
      box-shadow: 0 18px 48px rgba(0,0,0,.28);
    }
    .contact-sheet-head {
      height: 56px;
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 0 18px;
      border-bottom: 1px solid var(--bond-length);
      background: var(--surface);
      color: var(--text-primary);
      font-size: 20px;
      font-weight: 900;
    }
    .contact-sheet-head::before {
      content: '';
      width: 18px;
      height: 18px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: inset 6px 0 0 rgba(255,255,255,.92);
    }
    .contact-sheet-head #contactTitle { flex: 1; }
    .btn-contact-close {
      width: 34px;
      height: 34px;
      flex-shrink: 0;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface2);
      color: var(--text-secondary);
      font-size: 20px;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      transition: color .18s ease, border-color .18s ease, background .18s ease;
    }
    .btn-contact-close:hover,
    .btn-contact-close:focus-visible {
      color: #FFFFFF;
      border-color: var(--accent);
      background: var(--accent);
    }
    .contact-body {
      padding: 20px 24px 24px;
      color: var(--text-secondary);
      font-size: 15px;
      line-height: 1.85;
    }
    .contact-body p { margin: 0 0 14px; }
    .contact-name {
      color: var(--text-primary);
      font-size: 16px;
      font-weight: 800;
    }
    .contact-mail-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
      margin: 18px 0;
      padding: 14px 16px;
      border: 1px solid var(--border);
      border-radius: 8px;
      background: var(--surface2);
    }
    .contact-mail-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-muted);
    }
    .contact-mail-link {
      color: var(--accent);
      font-size: 15px;
      font-weight: 800;
      word-break: break-all;
    }
    .contact-thanks {
      margin: 0;
      padding-top: 14px;
      border-top: 1px dashed var(--border);
      color: var(--text-muted);
      font-size: 14px;
    }

    /* 著作權聲明：置於「聯絡與致謝」內容最下方 */
    .contact-copyright {
      margin: 18px 0 0;
      padding-top: 14px;
      border-top: 1px solid var(--border);
      color: var(--text-muted);
      font-size: 13px;          /* 全域最小字級下限 */
      line-height: 1.7;
    }

    .contact-copyright .copyright-line {
      display: block;
      margin-bottom: 4px;
      color: var(--text-secondary);
      font-weight: 700;
      letter-spacing: .01em;
    }

    .contact-copyright .copyright-terms { display: block; }

    body.teach-mode .creator-tag { display: inline-block; flex: 0 0 auto; order: 3; margin-left: 0; }

    /* ── 教學模式版面覆寫 ── */
    body.teach-mode #topbar       { height: 46px; gap: 12px; padding: 0 18px; flex-wrap: nowrap; overflow: hidden; }
    body.teach-mode #controls-bar { height: 48px; padding: 0 14px; }
    body.teach-mode .ctrl-btn     { min-height: 32px; padding: 6px 16px; font-size: 15px; }
    body.teach-mode #status-strip { font-size: 15px; }
    body.teach-mode #footer       { display: none; }
    body.teach-mode #topbar h1    { font-size: 22px; flex: 0 1 auto; white-space: nowrap; }
    body.teach-mode .topbar-tag   { display: none; }
    body.teach-mode #tab-bar {
      height: auto; margin: 0; padding: 0;
      flex: 1 1 auto; order: 2;
      display: flex; align-items: center; gap: 4px;
      flex-wrap: nowrap; overflow: hidden;
      background: transparent; border-bottom: 0;
      justify-content: flex-start;
    }
    body.teach-mode .tab-btn {
      white-space: nowrap; flex: 0 1 auto; min-width: 0;
      padding: 8px 11px; font-size: 16px; font-weight: 800;
    }

    /* ── 教學模式 SVG 文字放大 ── */
    body.teach-mode .svg-label { font-size: 22px; }
    body.teach-mode .svg-small { font-size: 20px; }
    body.teach-mode #status-strip { font-size: 16px; font-weight: 800; }
    /* 投影模式：秤取目標質量按鈕 — 橫列顯示、不換行 */
    .teach-mass-target-btn {
      display: block; width: 100%; margin-top: 8px;
      padding: 9px 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      background: var(--bond-energy); color: #fff; border: none; border-radius: 8px;
      font-size: 15px; font-weight: 700; text-align: center; cursor: pointer;
    }
    .teach-mass-target-btn:hover { filter: brightness(1.1); }
    /* 不換行的 tag-btn（投影模式容量瓶 100 mL 用） */
    .tag-btn-nowrap { white-space: nowrap; }
  </style>
</head>
<body>
  <div id="loading-screen">
    <svg id="loading-flask" width="120" height="150" viewBox="0 0 120 150" aria-hidden="true">
      <defs>
        <clipPath id="loadFlaskClip">
          <path d="M50 28 L50 64 C50 74 36 84 32 104 C28 126 42 138 60 138 C78 138 92 126 88 104 C84 84 70 74 70 64 L70 28 Z"/>
        </clipPath>
      </defs>
      <path d="M48 12 C48 4 72 4 72 12 C72 20 48 20 48 12 Z" fill="#eaf8ff" stroke="#7E98AC" stroke-width="2"/>
      <rect x="46" y="18" width="28" height="8" rx="4" fill="#eaf8ff" stroke="#7E98AC" stroke-width="1.5"/>
      <g clip-path="url(#loadFlaskClip)">
        <rect id="loadFlaskLiquid" x="28" y="138" width="64" height="0" fill="rgba(35,90,200,.3)"/>
      </g>
      <path d="M50 28 L50 64 C50 74 36 84 32 104 C28 126 42 138 60 138 C78 138 92 126 88 104 C84 84 70 74 70 64 L70 28 Z"
            fill="none" stroke="#7E98AC" stroke-width="2.4"/>
      <line x1="50" y1="48" x2="70" y2="48" stroke="#2D5FA6" stroke-width="2"/>
      <circle class="loading-bubble" cx="54" cy="20" r="3" fill="#C8324A"/>
      <circle class="loading-bubble" cx="63" cy="18" r="2.4" fill="#C8324A"/>
      <circle class="loading-bubble" cx="69" cy="24" r="2.8" fill="#C8324A"/>
    </svg>
    <div class="loading-title"><span>溶液</span>的配製</div>
    <div class="loading-sub">高中必修化學 — 固體溶質配製・母液稀釋・儀器精度</div>
    <div class="loading-credit">教材設計與製作：中山女高 劉泓其老師</div>
    <div class="loading-copyright">© 2026 劉泓其 All Rights Reserved.</div>
    <div class="loading-modes">
      <button id="btnModeTeach" class="mode-btn mode-teach">🎬 教學投影模式</button>
      <button id="btnModePersonal" class="mode-btn mode-personal">💻 個人使用模式</button>
    </div>
  </div>

  <div id="topbar">
    <h1 id="titleMain" title="點此切換模式"><span>溶液</span>的配製<small id="modeLabel" class="mode-label"></small></h1>
    <span class="topbar-tag">Solution Preparation</span>
    <button type="button" id="creatorTag" class="creator-tag" title="點此查看聯絡資訊">教材設計與製作：中山女高 劉泓其老師</button>
  </div>

  <nav id="tab-bar" aria-label="教材分頁">
    <button class="tab-btn active" data-tab="solid">固體溶質配製</button>
    <button class="tab-btn" data-tab="dilute">稀釋配製</button>
    <button class="tab-btn" data-tab="precision">儀器精度說明</button>
  </nav>

  <main id="main-area">
    <aside id="side-panel"></aside>
    <button id="btnExpandPanel" title="展開選擇條件">▶ 選擇條件</button>
    <section id="workspace">
      <div id="status-strip">選擇條件後，依照步驟膠囊由左至右操作。</div>
      <div id="scene-wrap"></div>
      <div id="step-strip"></div>
    </section>
  </main>

  <div id="controls-bar">
    <span id="control-status">目前在「固體溶質配製」分頁。</span>
    <button class="ctrl-btn" id="btnReset">↺ 重置</button>
    <button class="ctrl-btn" id="btnReport">📊 誤差報告</button>
    <button class="ctrl-btn" id="btnFullscreen">⛶ 全螢幕</button>
  </div>

  <div id="footer">數值來源：NIST Webbook (webbook.nist.gov)｜化學用詞依據：樂詞網（terms.naer.edu.tw）｜<button type="button" id="footerCreator" class="footer-creator" title="點此查看聯絡資訊">教材設計與製作：中山女高 劉泓其老師</button></div>

  <div id="calc-modal" class="calc-overlay" aria-hidden="true">
    <div class="calc-board">
      <button id="closeCalc" class="modal-close" aria-label="關閉">×</button>
      <div id="calcDomPanel" class="calc-dom-panel">
        <div class="calc-head">
          <div>
            <h2 id="calcTitle">配製誤差報告</h2>
            <div id="calcSubtitle" class="calc-subtitle">DOM + KaTeX 逐步卡片</div>
          </div>
        </div>
        <div id="calcContent" class="calc-dom-steps"></div>
      </div>
      <div class="calc-controls">
        <button id="btnCalcPrev" class="calc-prev-btn">離開 ←</button>
        <button id="btnCalcStep" class="calc-next-btn">下一步 →</button>
        <button id="btnCalcDone" class="calc-done-btn hidden">✓ 計算完成</button>
        <button id="btnCalcReplay" class="calc-replay-btn">↺ 重播</button>
        <button id="btnCalcDirectDone" class="calc-direct-done-btn">計算全步驟</button>
      </div>
    </div>
  </div>

  <div id="quick-calc-modal" class="calc-overlay" aria-hidden="true">
    <div class="calc-board quick-calc-board">
      <button id="closeQuickCalc" class="modal-close" aria-label="關閉">×</button>
      <div id="quickCalcContent" class="qc-scroll"></div>
      <div class="calc-controls">
        <button id="btnQuickCalcPrev" class="calc-prev-btn">離開 ←</button>
        <button id="btnQuickCalcStep" class="calc-next-btn">下一步 →</button>
        <button id="btnQuickCalcDone" class="calc-done-btn hidden">✓ 計算完成</button>
        <button id="btnQuickCalcReplay" class="calc-replay-btn">↺ 重播</button>
        <button id="btnQuickCalcDirectDone" class="calc-direct-done-btn">計算全步驟</button>
      </div>
    </div>
  </div>

  <div id="meniscus-modal" class="meniscus-overlay" aria-hidden="true">
    <div class="meniscus-fs">
      <div class="meniscus-prompt">點擊瓶頸或按「＋ 加水」，讓彎月面最低點對齊刻度線。</div>
      <button id="closeMeniscus" class="modal-close" aria-label="關閉">×</button>
      <svg id="meniscusSvg" viewBox="0 0 320 720" preserveAspectRatio="xMidYMid meet" role="img" aria-label="容量瓶頸部定容放大">
        <defs>
          <linearGradient id="zoomGlass" x1="0" x2="1">
            <stop offset="0" stop-color="#C8D8E8" stop-opacity=".42"/>
            <stop offset=".5" stop-color="#fff" stop-opacity=".72"/>
            <stop offset="1" stop-color="#8EA7BC" stop-opacity=".55"/>
          </linearGradient>
          <linearGradient id="tubeFadeTop" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#7E98AC" stop-opacity="0"/>
            <stop offset="1" stop-color="#7E98AC" stop-opacity=".9"/>
          </linearGradient>
          <linearGradient id="tubeFadeBottom" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stop-color="#7E98AC" stop-opacity=".9"/>
            <stop offset="1" stop-color="#7E98AC" stop-opacity="0"/>
          </linearGradient>
        </defs>
        <rect x="112" y="40" width="96" height="600" fill="url(#zoomGlass)"/>
        <line x1="112" y1="40" x2="112" y2="640" stroke="#7E98AC" stroke-width="4"/>
        <line x1="208" y1="40" x2="208" y2="640" stroke="#7E98AC" stroke-width="4"/>
        <line x1="112" y1="8" x2="112" y2="40" stroke="url(#tubeFadeTop)" stroke-width="4"/>
        <line x1="208" y1="8" x2="208" y2="40" stroke="url(#tubeFadeTop)" stroke-width="4"/>
        <line x1="112" y1="640" x2="112" y2="712" stroke="url(#tubeFadeBottom)" stroke-width="4"/>
        <line x1="208" y1="640" x2="208" y2="712" stroke="url(#tubeFadeBottom)" stroke-width="4"/>
        <line id="zoomMarkLine" x1="78" y1="300" x2="242" y2="300" stroke="#2D5FA6" stroke-width="4"/>
        <text x="246" y="306" font-size="20" font-weight="800" fill="#2D5FA6">刻度線</text>
        <rect id="zoomAlignGlow" x="100" y="288" width="120" height="24" rx="12" fill="#27795A" opacity="0"/>
        <g id="zoomLiquidWrap">
          <path id="zoomLiquidFill" d="" fill="rgba(35,90,200,0.30)" stroke="none"/>
          <path id="zoomMeniscus" d="" fill="none" stroke="#3978b6" stroke-width="2.5"/>
          <path id="zoomMeniscusHighlight" d="" fill="none" stroke="#fff" stroke-width="2" opacity=".55"/>
        </g>
        <line id="eyeLine" x1="30" y1="300" x2="106" y2="300" stroke="#C8324A" stroke-width="3" stroke-dasharray="6 5"/>
        <circle id="eyeDot" cx="26" cy="300" r="10" fill="#C8324A"/>
      </svg>
      <div class="meniscus-bar">
        <span id="meniscusReadout">已加入 0.0 / 目標 100.0 mL</span>
        <div class="meniscus-eye">
          <button data-view="high">視線高</button>
          <button data-view="level" class="active">平視</button>
          <button data-view="low">視線低</button>
        </div>
        <button id="addWaterBtn" class="ctrl-btn primary">＋ 加水</button>
        <button id="fillToMarkBtn" class="ctrl-btn primary">一鍵定容</button>
        <button id="confirmMeniscus" class="ctrl-btn">✓ 確認定容</button>
      </div>
    </div>
  </div>

  <div id="pipette-zoom-modal" class="meniscus-overlay" aria-hidden="true">
    <div class="pipette-zoom-fs">
      <div class="pz-prompt">操作左側或右側安全吸球（按住 A 蓄壓 → S 吸液 → E 微調），停在所需刻度線。</div>
      <button id="closePipetteZoom" class="modal-close" aria-label="關閉">×</button>
      <div class="pz-grid">
        <div class="pz-left">
          <svg id="pzPipetteSvg" viewBox="0 0 360 730" preserveAspectRatio="xMidYMid meet"></svg>
        </div>
        <div class="pz-right">
          <svg id="pzBulbSvg" viewBox="0 0 320 430" preserveAspectRatio="xMidYMid meet"></svg>
        </div>
      </div>
      <div id="pzBar" class="pz-bar">
        <span id="pzReadout">目前吸取 0.0 / 需 0.0 mL</span>
        <button id="pzStop" class="ctrl-btn primary">✓ 停在刻度</button>
      </div>
    </div>
  </div>

  <div id="instrument-zoom-modal" class="instrument-overlay" aria-hidden="true">
    <div class="instrument-zoom-board">
      <button id="closeInstrumentZoom" class="modal-close" aria-label="關閉">×</button>
      <div class="instrument-zoom-head">
        <div>
          <h2>器材放大檢視</h2>
          <p>四種配製器材等比放大，方便比較瓶頸、刻度與管件細節。</p>
        </div>
      </div>
      <div id="instrumentZoomContent" class="instrument-zoom-grid"></div>
    </div>
  </div>

  <div id="hcl-warning" class="warning-overlay" aria-hidden="true">
    <div class="warning-card">
      <span class="splash-dot" style="left:52%;top:55%;--dx:-74px;--dy:-62px;"></span>
      <span class="splash-dot" style="left:52%;top:55%;--dx:-30px;--dy:-84px;"></span>
      <span class="splash-dot" style="left:52%;top:55%;--dx:48px;--dy:-70px;"></span>
      <span class="splash-dot" style="left:52%;top:55%;--dx:86px;--dy:-24px;"></span>
      <span class="splash-dot" style="left:52%;top:55%;--dx:-88px;--dy:18px;"></span>
      <span class="splash-dot" style="left:52%;top:55%;--dx:70px;--dy:46px;"></span>
      <h2>⚠ 安全警告</h2>
      <p>濃 HCl 直接加入空容量瓶會劇烈放熱噴濺！正確做法是先加少量水，再緩慢加酸，讓稀釋熱被水吸收。</p>
      <button id="closeWarning">回到 S1 重新操作</button>
    </div>
  </div>

  <!-- 聯絡與致謝 Overlay -->
  <div id="contactOverlay" aria-hidden="true">
    <div class="contact-sheet" role="dialog" aria-modal="true" aria-labelledby="contactTitle">
      <div class="contact-sheet-head">
        <span id="contactTitle">聯絡與致謝</span>
        <button class="btn-contact-close" id="btnCloseContact" type="button" aria-label="關閉聯絡資訊">×</button>
      </div>
      <div class="contact-body">
        <p class="contact-name">教材設計與製作：中山女高 劉泓其老師</p>
        <p>感謝您使用這份數位教材。這份「溶液的配製互動模擬」是為了讓同學能親手完成秤取固體、溶解、轉置、潤洗、定容到倒置混勻的完整流程，並在彎月面對位時自行選擇視線高度、最後從誤差報告回頭檢視每一個操作對濃度的影響，建立「配製的每一步都會累積誤差」與「為何潤洗與定容不可省略」的概念而設計的。</p>
        <p>若對此教材有任何改進的意見、發現數值或用詞上的疏漏，或希望增加其他溶質、容量瓶規格與配製情境，都非常歡迎來信告訴我。</p>
        <div class="contact-mail-row">
          <span class="contact-mail-label">聯絡信箱</span>
          <a class="contact-mail-link" href="mailto:kikimo0704@m2.csghs.tp.edu.tw">kikimo0704@m2.csghs.tp.edu.tw</a>
        </div>
        <p class="contact-thanks">也謝謝每一位在課堂上使用、分享並給予回饋的老師與同學，你們的意見讓這份教材能持續變得更好。</p>
        <!-- 著作權聲明（各教材共用，逐字相同） -->
        <p class="contact-copyright">
          <span class="copyright-line">© 2026 劉泓其 All Rights Reserved.</span>
          <span class="copyright-terms">本教材之程式碼、文字、圖像、動畫及互動設計受著作權法保護。未經作者書面同意，不得重製、改作、散布、公開傳輸或作商業利用。</span>
        </p>
      </div>
    </div>
  </div>

  <script>
    /* ── V3.0 雙模式全域狀態 ── */
    let displayMode = 'personal';
    let fontScale   = 1.0;
    let appStarted  = false;
    let panelCollapsed = false;       // 左側選擇條件面板收合狀態
    const isTeach = () => displayMode === 'teaching';

    function togglePanelCollapse() {
      panelCollapsed = !panelCollapsed;
      const panel   = document.getElementById('side-panel');
      const mainArea = document.getElementById('main-area');
      panel.classList.toggle('collapsed', panelCollapsed);
      mainArea.classList.toggle('panel-collapsed', panelCollapsed);
    }

    /* 溶質 UI 資料（莫耳質量已搬至 Netlify Function，由 protectedData 提供） */
    const SOLUTES = {
      kmno4: { name:'KMnO<sub>4</sub>', option:'KMnO₄', plain:'KMnO₄', color:'rgba(139,47,201,0.72)', dilute:'rgba(180,120,220,0.45)' },
      cuso4: { name:'CuSO<sub>4</sub>', option:'CuSO₄', plain:'CuSO₄', color:'rgba(35,90,200,0.62)', dilute:'rgba(35,90,200,0.32)' },
      cuso4_5h2o: { name:'CuSO<sub>4</sub>·5H<sub>2</sub>O', option:'CuSO₄·5H₂O', plain:'CuSO₄·5H₂O', color:'rgba(35,90,200,0.62)', dilute:'rgba(35,90,200,0.32)' },
      nacl: { name:'NaCl', option:'NaCl', plain:'NaCl', color:'rgba(220,230,240,0.42)', dilute:'rgba(220,230,240,0.42)' },
      naoh: { name:'NaOH', option:'NaOH', plain:'NaOH', color:'rgba(180,200,215,0.18)', dilute:'rgba(180,200,215,0.18)' }
    };
    /* 母液 UI 資料。concLabel 為教學上必須顯示的瓶身標示（學生據此計算 C₁V₁=C₂V₂），
       屬 UI 標籤；實際計算用的濃度由 Function 提供，前端不做濃度換算。 */
    const STOCKS = {
      hcl: { name:'HCl', concLabel:'2', color:'rgba(180,200,215,0.18)', meniscus:'rgba(180,200,215,0.40)' },
      cuso4: { name:'CuSO<sub>4</sub>', option:'CuSO₄', concLabel:'2', color:'rgba(35,90,200,0.72)', meniscus:'rgba(35,90,200,0.54)' },
      kmno4: { name:'KMnO<sub>4</sub>', option:'KMnO₄', concLabel:'5', color:'rgba(139,47,201,0.72)', meniscus:'rgba(139,47,201,0.54)' }
    };
    /* V4.1：吸量管最大 25 mL。目標濃度須使 V1 = C2·V2/C1 不超過 25 mL。
       此處用瓶身標示濃度（concLabel）判定可選範圍，實際 V1 仍由 Function 計算。 */
    const PIPETTE_MAX_ML = 25;
    function availableDiluteConcs(opts) {
      const d = state.dilute;
      const c1 = Number(STOCKS[d.stock].concLabel);
      return opts.filter(opt => (opt.value * d.volume / c1) <= PIPETTE_MAX_ML + 1e-9);
    }
    function clampDiluteConc() {
      const opts = availableDiluteConcs(isTeach() ? CONC_OPTIONS_TEACH : CONC_OPTIONS);
      if (!opts.length) return false;
      const d = state.dilute;
      if (!opts.some(o => Math.abs(o.value - d.targetConc) < .001)) {
        d.targetConc = opts[opts.length - 1].value;
        return true;   /* 有變更 → 呼叫端需重新取受保護資料 */
      }
      return false;
    }

    const CONC_OPTIONS = [
      { value:0.05, label:'0.0500 M' },
      { value:0.10, label:'0.100 M' },
      { value:0.20, label:'0.200 M' },
      { value:0.50, label:'0.500 M' },
      { value:1.00, label:'1.00 M' }
    ];
    const CONC_OPTIONS_TEACH = [            // 投影模式：只顯示 0.500 M / 1.00 M
      { value:0.50, label:'0.500 M' },
      { value:1.00, label:'1.00 M' }
    ];
    const VOLUME_OPTIONS = [100, 250];
    const DILUTE_VOLUME_OPTIONS_TEACH = [100]; // 投影模式稀釋：僅 100 mL
    const SOLID_STEPS = ['秤取溶質','溶於燒杯','轉入容量瓶','潤洗燒杯','定容對位','倒置混勻'];
    const DILUTE_STEPS = ['預裝水','吸取母液','注入容量瓶','定容對位','倒置混勻'];
    let rafId = 0;
    let loadingRafId = 0;
    let bulbRafId = 0;
    let bulbMode = null;
    let bulbLastTime = 0;
    let activeTab = 'solid';
    let calcIndex = 0;
    let calcCards = [];
    let calcShowAll = false;
    let quickCalcIndex = 0;
    let quickCalcType = 'solid';
    let quickCalcSteps = [];
    let quickCalcShowAll = false;
    let pendingMeniscusTab = 'solid';
    const MARK_Y = 300;
    const NECK_BOTTOM = 636;
    const MENISCUS_DIP = 18;
    let meniscusY = NECK_BOTTOM;
    const FILL_STEP_PIX = 18;
    const HOLD_PIX_PER_SEC = 180;
    let waterHoldRaf = null;
    let waterHoldLast = 0;
    let meniscusFillRaf = 0;
    let meniscusRequestedFullscreen = false;
    let pipetteZoomRequestedFullscreen = false;
    let instrumentZoomRequestedFullscreen = false;
    /* 受保護資料快取：由 Netlify Function 提供，取得前使用中性 fallback。
       fallback 僅供離線時維持教材可用，數值非正式教學值。 */
    const protectedData = {
      solid:  { targetMass: null, molar: null, rinseResidue: [5, 0.25, 0.0125, 0.0125] },
      dilute: { v1: null, stockConc: null, recommend: null,
                bulb: { vacChargePerSec: 1.0, vacUseS: 1.0, mlPerVacuum: 10,
                        deadVolumeMl: 0.5, releasePerSec: 1.5,
                        stopTolerance: 0.15, pipetteMaxMl: 25 } }
    };
    const bulbP = () => protectedData.dilute.bulb;

    /* 受保護資料存取器：一律讀快取，未取得時回傳安全預設 */
    const molarOf = () => protectedData.solid.molar;
    const rinseResidueArr = () => protectedData.solid.rinseResidue;
    const stockConcOf = () => protectedData.dilute.stockConc;

    const protectedEndpoint = '/.netlify/functions/prep';

    async function protectedFetch(action, payload) {
      const res = await fetch(protectedEndpoint + '?action=' + encodeURIComponent(action), {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(payload)
      });
      if (!res.ok) {
        const message = await res.text().catch(() => '');
        throw new Error(message || ('protected function failed: ' + res.status));
      }
      return res.json();
    }

    /* 切換分頁或改變選項時呼叫；按住 A/S/E、調整質量期間不呼叫 */
    /* 兩分頁各自獨立的請求序號：共用一個計數器會讓並行請求誤判為過期而被丟棄 */
    let solidSeq = 0, diluteSeq = 0;
    async function refreshSolidProtected() {
      const seq = ++solidSeq;
      const s = state.solid;
      try {
        const d = await protectedFetch('solid', { solute: s.solute, conc: s.conc, volume: s.volume });
        if (seq !== solidSeq) return;   /* 丟棄過期回應 */
        protectedData.solid.targetMass = d.targetMass;
        protectedData.solid.molar = d.molar;
        if (Array.isArray(d.rinseResidue)) protectedData.solid.rinseResidue = d.rinseResidue;
      } catch (err) {
        console.error('取得配製資料失敗', err);
      }
    }

    async function refreshDiluteProtected() {
      const seq = ++diluteSeq;
      const d0 = state.dilute;
      try {
        const d = await protectedFetch('dilute', { stock: d0.stock, targetConc: d0.targetConc, volume: d0.volume });
        if (seq !== diluteSeq) return;
        protectedData.dilute.v1 = d.v1;
        protectedData.dilute.stockConc = d.stockConc;
        protectedData.dilute.recommend = d.recommend;
        if (d.bulb) protectedData.dilute.bulb = d.bulb;
      } catch (err) {
        console.error('取得稀釋資料失敗', err);
      }
    }
    const PIPETTE_DEAD_VOLUME_ML = 0.5;

    const state = {
      solid: {
        solute:'kmno4', conc:0.50, volume:250, step:0, weighed:0, displayedWeight:0,
        rinseCount:0, meniscus:'level', mixed:false, reportReady:false,
        beakerLevel:0, flaskLevel:0, powderVisible:true, mixProgress:0
      },
      dilute: {
        stock:'hcl', targetConc:0.50, volume:100, step:0, waterAdded:false, bulbVented:false, bulbVacuum:0,
        pipetteVolume:0, pipetteTargetReached:false, transferred:false, awaitingTransfer:false, transferInProgress:false, meniscus:'level', mixed:false, reportReady:false, warning:'',
        flaskLevel:0, transferredVolume:0, mixProgress:0
      },
      precision: {}
    };

    const el = {};
    document.addEventListener('DOMContentLoaded', init);

    function init() {
      cacheEls();
      drawLoading();
      bindGlobalEvents();
      // 進場動畫持續播放，等待使用者選擇模式（不呼叫 renderAll，等選模式後才執行）
      console.log('溶液的配製互動模擬 V4.0 已載入。');
    }

    function cacheEls() {
      el.side = document.getElementById('side-panel');
      el.scene = document.getElementById('scene-wrap');
      el.steps = document.getElementById('step-strip');
      el.status = document.getElementById('status-strip');
      el.controlStatus = document.getElementById('control-status');
      el.btnReset = document.getElementById('btnReset');
      el.btnReport = document.getElementById('btnReport');
      el.btnFullscreen = document.getElementById('btnFullscreen');
      el.calc = document.getElementById('calc-modal');
      el.calcContent = document.getElementById('calcContent');
      el.calcTitle = document.getElementById('calcTitle');
      el.calcSubtitle = document.getElementById('calcSubtitle');
      el.quickCalc = document.getElementById('quick-calc-modal');
      el.quickCalcContent = document.getElementById('quickCalcContent');
      el.meniscus = document.getElementById('meniscus-modal');
      el.pipetteZoom = document.getElementById('pipette-zoom-modal');
      el.pzPipetteSvg = document.getElementById('pzPipetteSvg');
      el.pzBulbSvg = document.getElementById('pzBulbSvg');
      el.pzReadout = document.getElementById('pzReadout');
      el.pzBar = document.getElementById('pzBar');
      el.instrumentZoom = document.getElementById('instrument-zoom-modal');
      el.instrumentZoomContent = document.getElementById('instrumentZoomContent');
      el.warning = document.getElementById('hcl-warning');
      el.creatorTag = document.getElementById('creatorTag');
      el.footerCreator = document.getElementById('footerCreator');
      el.contactOverlay = document.getElementById('contactOverlay');
      el.btnCloseContact = document.getElementById('btnCloseContact');
    }

    /* ── 聯絡與致謝視窗 ── */
    /* 記住由哪一個署名觸發，關閉時把焦點還回去 */
    let contactOpener = null;

    function isContactOpen() {
      return el.contactOverlay.classList.contains('is-open');
    }

    function openContactSheet(opener) {
      contactOpener = opener || null;
      el.contactOverlay.classList.add('is-open');
      el.contactOverlay.setAttribute('aria-hidden', 'false');
      el.btnCloseContact.focus();
    }

    function closeContactSheet() {
      el.contactOverlay.classList.remove('is-open');
      el.contactOverlay.setAttribute('aria-hidden', 'true');
      if (contactOpener) contactOpener.focus();
      contactOpener = null;
    }

    function bindGlobalEvents() {
      /* ── V3.0 雙模式按鈕與標題點擊 ── */
      document.getElementById('btnModeTeach').addEventListener('click', () => startWithMode('teaching'));
      document.getElementById('btnModePersonal').addEventListener('click', () => startWithMode('personal'));
      document.getElementById('titleMain')?.addEventListener('click', returnToModeSelect);
      /* ── V3.2 展開按鈕（收合後浮在左側） ── */
      document.getElementById('btnExpandPanel').addEventListener('click', togglePanelCollapse);

      document.querySelectorAll('.tab-btn').forEach(btn => {
        btn.addEventListener('click', () => switchTab(btn.dataset.tab));
      });
      el.btnReset.addEventListener('click', resetActiveTab);
      el.btnReport.addEventListener('click', openReport);
      el.btnFullscreen.addEventListener('click', () => {
        if (!document.fullscreenElement) {
          document.documentElement.requestFullscreen();
        } else {
          document.exitFullscreen();
        }
      });
      document.addEventListener('fullscreenchange', syncFullscreenBtn);
      document.getElementById('closeCalc').addEventListener('click', closeCalc);
      document.getElementById('btnCalcPrev').addEventListener('click', calcPrev);
      document.getElementById('btnCalcStep').addEventListener('click', calcNext);
      document.getElementById('btnCalcDone').addEventListener('click', closeCalc);
      document.getElementById('btnCalcReplay').addEventListener('click', () => showCalcCards(0));
      document.getElementById('btnCalcDirectDone').addEventListener('click', showCalcAll);
      document.getElementById('closeQuickCalc').addEventListener('click', closeQuickCalc);
      document.getElementById('btnQuickCalcPrev').addEventListener('click', quickCalcPrev);
      document.getElementById('btnQuickCalcStep').addEventListener('click', quickCalcNext);
      document.getElementById('btnQuickCalcDone').addEventListener('click', closeQuickCalc);
      document.getElementById('btnQuickCalcReplay').addEventListener('click', () => showQuickCalcStep(0));
      document.getElementById('btnQuickCalcDirectDone').addEventListener('click', showQuickCalcAll);
      document.getElementById('closeMeniscus').addEventListener('click', closeMeniscus);
      document.getElementById('closePipetteZoom').addEventListener('click', closePipetteZoom);
      document.getElementById('closeInstrumentZoom').addEventListener('click', closeInstrumentZoom);
      document.getElementById('pzStop').addEventListener('click', () => {
        pipetteStop();
        if (state.dilute.pipetteTargetReached) closePipetteZoom();
      });
      document.getElementById('confirmMeniscus').addEventListener('click', confirmMeniscus);
      document.querySelectorAll('.meniscus-eye button').forEach(btn => btn.addEventListener('click', () => setMeniscusView(btn.dataset.view)));
      const addBtn = document.getElementById('addWaterBtn');
      addBtn.addEventListener('pointerdown', e => {
        e.preventDefault();
        addBtn.setPointerCapture?.(e.pointerId);
        addWater();
        startWaterHold();
      });
      addBtn.addEventListener('pointerup', stopWaterHold);
      addBtn.addEventListener('pointercancel', stopWaterHold);
      addBtn.addEventListener('pointerleave', e => { if (e.buttons) stopWaterHold(); });
      document.getElementById('fillToMarkBtn').addEventListener('click', fillToMark);
      document.getElementById('meniscusSvg').addEventListener('click', addWater);
      document.getElementById('closeWarning').addEventListener('click', () => {
        el.warning.classList.remove('show');
        resetDiluteProcess();
        renderAll();
      });
      /* 兩處署名（教學模式標題列、個人模式頁尾）綁同一個視窗 */
      el.creatorTag.addEventListener('click', () => openContactSheet(el.creatorTag));
      el.footerCreator.addEventListener('click', () => openContactSheet(el.footerCreator));
      el.btnCloseContact.addEventListener('click', closeContactSheet);
      el.contactOverlay.addEventListener('click', e => {
        if (e.target === el.contactOverlay) closeContactSheet();
      });

      document.addEventListener('keydown', e => {
        /* 聯絡視窗層級最高（z-index 9000）：ESC 一次只關最上層，
           且視窗開啟時不讓下層計算 overlay 繼續吃方向鍵/Enter。 */
        if (isContactOpen()) {
          if (e.key === 'Escape') {
            e.preventDefault();
            e.stopPropagation();
            e.stopImmediatePropagation();
            closeContactSheet();
          } else if (['ArrowRight','ArrowDown','ArrowLeft','ArrowUp','Enter'].includes(e.key)) {
            e.stopPropagation();
            e.stopImmediatePropagation();
          }
          return;
        }
        if (el.quickCalc.classList.contains('show')) {
          if (!['ArrowRight','ArrowDown','ArrowLeft','ArrowUp','Enter'].includes(e.key)) return;
          e.preventDefault();
          e.stopPropagation();
          if (e.key === 'ArrowRight' || e.key === 'ArrowDown') quickCalcNext();
          if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') quickCalcPrev();
          if (e.key === 'Enter') quickCalcEnter();
          return;
        }
        if (!el.calc.classList.contains('show')) return;
        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') { e.preventDefault(); calcNext(); }
        if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') { e.preventDefault(); calcPrev(); }
        if (e.key === 'Enter') { e.preventDefault(); calcEnter(); }
      }, true);
    }

    function syncFullscreenBtn() {
      if (document.fullscreenElement) {
        el.btnFullscreen.textContent = '✕ 退出全螢幕';
        el.btnFullscreen.classList.add('is-fullscreen');
      } else {
        el.btnFullscreen.textContent = '⛶ 全螢幕';
        el.btnFullscreen.classList.remove('is-fullscreen');
        if (el.pipetteZoom.classList.contains('show')) {
          bulbMode = null;
          cancelAnimationFrame(bulbRafId);
          updateBulbVisual();
          el.pipetteZoom.classList.remove('show');
          el.pipetteZoom.setAttribute('aria-hidden','true');
          pipetteZoomRequestedFullscreen = false;
          renderAll();
        }
        if (el.instrumentZoom.classList.contains('show')) {
          el.instrumentZoom.classList.remove('show');
          el.instrumentZoom.setAttribute('aria-hidden','true');
          instrumentZoomRequestedFullscreen = false;
        }
      }
    }

    function switchTab(tab) {
      /* 切換分頁時取回該分頁的受保護資料（單次請求，不影響按住操作） */
      if (tab === 'solid') refreshSolidProtected().then(renderAll);
      else if (tab === 'dilute') refreshDiluteProtected().then(renderAll);
      if (activeTab === tab) return;
      cancelAnimationFrame(rafId);
      activeTab = tab;
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.toggle('active', btn.dataset.tab === tab));
      if (tab !== 'precision') {
        state[tab].step = 0;
        if (tab === 'solid') {
          state.solid.weighed = 0; state.solid.displayedWeight = 0; state.solid.rinseCount = 0; state.solid.mixed = false; state.solid.reportReady = false;
          state.solid.beakerLevel = 0; state.solid.flaskLevel = 0; state.solid.powderVisible = true; state.solid.mixProgress = 0;
        } else {
          resetDiluteProcess();
        }
      }
      renderAll();
    }

    function resetActiveTab() {
      if (activeTab === 'solid') {
        const keep = { solute:state.solid.solute, conc:state.solid.conc, volume:state.solid.volume };
        state.solid = { ...state.solid, ...keep, step:0, weighed:0, displayedWeight:0, rinseCount:0, meniscus:'level', mixed:false, reportReady:false, beakerLevel:0, flaskLevel:0, powderVisible:true, mixProgress:0 };
      } else if (activeTab === 'dilute') {
        resetDiluteProcess();
      }
      renderAll();
    }

    function resetDiluteProcess() {
      Object.assign(state.dilute, {
        step:0, waterAdded:false, bulbVented:false, bulbVacuum:0, pipetteVolume:0, pipetteTargetReached:false,
        transferred:false, awaitingTransfer:false, transferInProgress:false, meniscus:'level', mixed:false, reportReady:false, warning:'', flaskLevel:0, transferredVolume:0, mixProgress:0
      });
    }

    function renderAll() {
      if (activeTab === 'precision') {
        renderPrecision();
      } else {
        renderSidePanel();
        renderScene();
        renderSteps();
      }
      updateGlobalStatus();
      syncScaleLock();
      syncPipetteLock();
      renderKatexIn(document.body);
    }

    function renderSidePanel() {
      el.side.classList.remove('hidden');
      if (activeTab === 'solid') renderSolidSide();
      if (activeTab === 'dilute') renderDiluteSide();
    }

    function renderSolidSide() {
      const s = state.solid;
      const sol = SOLUTES[s.solute];
      const m = solidTargetMass();
      const vL = s.volume / 1000;
      const residue = rinseResidueArr()[Math.min(s.rinseCount,3)];
      const concOpts = isTeach() ? CONC_OPTIONS_TEACH : CONC_OPTIONS;
      if (isTeach()) {
        // 投影模式：精簡側欄（無目前狀態、無操作提示、無質量微調，有秤取目標質量按鈕）
        el.side.innerHTML = `
          <div class="side-section">
            <h2 style="display:flex;align-items:center;">選擇條件<button class="side-collapse-btn" id="btnCollapsePanel" title="收合選擇條件面板">◀</button></h2>
            <div class="field">
              <label for="solidSolute">溶質</label>
              <select id="solidSolute">
                ${Object.entries(SOLUTES).map(([k,v]) => `<option value="${k}" ${s.solute===k?'selected':''}>${v.option}</option>`).join('')}
              </select>
            </div>
            <div class="field">
              <label for="solidConc">目標濃度</label>
              <div id="solidConc" class="tag-choice-grid conc" role="group" aria-label="固體配製目標濃度">
                ${concOpts.map(opt => `<button class="tag-btn ${Math.abs(s.conc-opt.value)<.001?'active':''}" data-solid-conc="${opt.value}">${opt.label}</button>`).join('')}
              </div>
            </div>
            <div class="field">
              <label for="solidVolume">容量瓶規格</label>
              <div id="solidVolume" class="tag-choice-grid volume" role="group" aria-label="固體配製容量瓶規格">
                ${VOLUME_OPTIONS.map(v => `<button class="tag-btn ${s.volume===v?'active':''}" data-solid-volume="${v}">${v} mL</button>`).join('')}
              </div>
            </div>
          </div>
          <div class="side-section">
            <h2>即時計算</h2>
            <button id="btnOpenSolidCalc" class="calc-launch-btn" aria-label="開啟固體配製計算步驟">
              <span class="calc-launch-icon">🧮</span>
              <span>
                <span class="calc-launch-title">逐步計算目標質量</span>
                <span class="calc-launch-result">需秤取 W = ${m.toFixed(2)} g</span>
                <span class="calc-launch-hint">按鈕開啟全螢幕 KaTeX 計算</span>
              </span>
            </button>
            <button id="btnMassTarget" class="teach-mass-target-btn" data-side-mass-target="true">秤取目標質量 ${m.toFixed(2)} g</button>
          </div>`;
      } else {
        // 個人模式：完整側欄（V3.0 原版）
        el.side.innerHTML = `
          <div class="side-section">
            <h2 style="display:flex;align-items:center;">選擇條件<button class="side-collapse-btn" id="btnCollapsePanel" title="收合選擇條件面板">◀</button></h2>
            <div class="field">
              <label for="solidSolute">溶質</label>
              <select id="solidSolute">
                ${Object.entries(SOLUTES).map(([k,v]) => `<option value="${k}" ${s.solute===k?'selected':''}>${v.option}</option>`).join('')}
              </select>
            </div>
            <div class="field">
              <label for="solidConc">目標濃度</label>
              <div id="solidConc" class="tag-choice-grid conc" role="group" aria-label="固體配製目標濃度">
                ${concOpts.map(opt => `<button class="tag-btn ${Math.abs(s.conc-opt.value)<.001?'active':''}" data-solid-conc="${opt.value}">${opt.label}</button>`).join('')}
              </div>
            </div>
            <div class="field">
              <label for="solidVolume">容量瓶規格</label>
              <div id="solidVolume" class="tag-choice-grid volume" role="group" aria-label="固體配製容量瓶規格">
                ${VOLUME_OPTIONS.map(v => `<button class="tag-btn ${s.volume===v?'active':''}" data-solid-volume="${v}">${v} mL</button>`).join('')}
              </div>
            </div>
          </div>
          <div class="side-section">
            <h2>即時計算</h2>
            <button id="btnOpenSolidCalc" class="calc-launch-btn" aria-label="開啟固體配製計算步驟">
              <span class="calc-launch-icon">🧮</span>
              <span>
                <span class="calc-launch-title">逐步計算目標質量</span>
                <span class="calc-launch-result">需秤取 W = ${m.toFixed(2)} g</span>
                <span class="calc-launch-hint">按鈕開啟全螢幕 KaTeX 計算</span>
              </span>
            </button>
          </div>
          <div class="side-section">
            <h2>目前狀態</h2>
            <div class="status-list">
              <div><strong>步驟：</strong>${Math.min(s.step+1,6)}/6</div>
              <div><strong>已秤取：</strong>${s.weighed.toFixed(3)} g ${sol.name}</div>
              <div><strong>目標 W：</strong>${m.toFixed(2)} g</div>
              <div><strong>潤洗：</strong>${s.rinseCount} 次，殘留約 ${residue}%</div>
              <div><strong>彎月面：</strong>${meniscusName(s.meniscus)}</div>
              <div><strong>倒置混勻：</strong>${s.mixed ? '已完成 3 次' : '尚未完成'}</div>
            </div>
            <div class="micro-actions">
              <button id="btnMassMinus1" data-side-mass-delta="-1">−1 g</button>
              <button id="btnMassMinus01" data-side-mass-delta="-.1">−0.1 g</button>
              <button id="btnMassPlus01" data-side-mass-delta=".1">+0.1 g</button>
              <button id="btnMassPlus1" data-side-mass-delta="1">+1 g</button>
              <button id="btnMassPlus10" data-side-mass-delta="10">+10 g</button>
              <button id="btnMassTarget" data-side-mass-target="true">設為目標</button>
            </div>
          </div>
          <div class="side-section">
            <h2>操作提示</h2>
            <div class="muted-note">${solidHint()}</div>
          </div>`;
      }
      document.getElementById('solidSolute').addEventListener('change', e => { state.solid.solute = e.target.value; renderAll(); refreshSolidProtected().then(renderAll); });
      document.querySelectorAll('[data-solid-conc]').forEach(btn => btn.addEventListener('click', () => { state.solid.conc = Number(btn.dataset.solidConc); renderAll(); refreshSolidProtected().then(renderAll); }));
      document.querySelectorAll('[data-solid-volume]').forEach(btn => btn.addEventListener('click', () => { state.solid.volume = Number(btn.dataset.solidVolume); renderAll(); refreshSolidProtected().then(renderAll); }));
      document.getElementById('btnOpenSolidCalc').addEventListener('click', () => openQuickCalc('solid'));
      if (!isTeach()) {
        [['btnMassMinus1',-1],['btnMassMinus01',-.1],['btnMassPlus01',.1],['btnMassPlus1',1],['btnMassPlus10',10]].forEach(([id,delta]) => {
          document.getElementById(id).addEventListener('click', () => changeMass(delta));
        });
      }
      document.getElementById('btnMassTarget').addEventListener('click', () => setMass(solidTargetMass()));
      document.getElementById('btnCollapsePanel').addEventListener('click', togglePanelCollapse);
    }

    function renderDiluteSide() {
      const d = state.dilute;
      const st = STOCKS[d.stock];
      const v1 = dilutionV1();
      const rec = recommendPipette(v1);
      clampDiluteConc();
      const concOpts = availableDiluteConcs(isTeach() ? CONC_OPTIONS_TEACH : CONC_OPTIONS);
      const volOpts  = isTeach() ? DILUTE_VOLUME_OPTIONS_TEACH : VOLUME_OPTIONS;
      if (isTeach()) {
        // 投影模式：精簡側欄（無目前狀態、無操作提示；安全吸球按鈕獨立 section）
        el.side.innerHTML = `
          <div class="side-section">
            <h2 style="display:flex;align-items:center;">選擇條件<button class="side-collapse-btn" id="btnCollapsePanel" title="收合選擇條件面板">◀</button></h2>
            <div class="field">
              <label for="stockSol">母液</label>
              <select id="stockSol">
                ${Object.entries(STOCKS).map(([k,v]) => `<option value="${k}" ${d.stock===k?'selected':''}>${v.option || v.name} ${v.concLabel} M</option>`).join('')}
              </select>
            </div>
            <div class="field">
              <label for="diluteConc">目標濃度</label>
              <div id="diluteConc" class="tag-choice-grid conc" role="group" aria-label="稀釋配製目標濃度">
                ${concOpts.map(opt => `<button class="tag-btn ${Math.abs(d.targetConc-opt.value)<.001?'active':''}" data-dilute-conc="${opt.value}">${opt.label}</button>`).join('')}
              </div>
            </div>
            <div class="field">
              <label for="diluteVolume">容量瓶規格</label>
              <div id="diluteVolume" class="tag-choice-grid volume" role="group" aria-label="稀釋配製容量瓶規格">
                ${volOpts.map(v => `<button class="tag-btn tag-btn-nowrap ${d.volume===v?'active':''}" data-dilute-volume="${v}">${v} mL</button>`).join('')}
              </div>
            </div>
          </div>
          <div class="side-section">
            <h2>即時計算</h2>
            <button id="btnOpenDiluteCalc" class="calc-launch-btn" aria-label="開啟稀釋配製計算步驟">
              <span class="calc-launch-icon">🧮</span>
              <span>
                <span class="calc-launch-title">逐步計算母液體積</span>
                <span class="calc-launch-result">需吸取 V₁ = ${formatMl(v1)} mL</span>
                <span class="calc-launch-hint">按鈕開啟全螢幕 KaTeX 計算</span>
              </span>
            </button>
            <div class="${rec.warn ? 'error-text' : 'calc-line result-green'}">${rec.text}</div>
          </div>
          <div class="side-section">
            <h2>安全吸球操作</h2>
            <div class="micro-actions">
              <button id="btnBulbA">A 蓄壓</button>
              <button id="btnBulbS">S 吸液</button>
              <button id="btnBulbE">E 放液</button>
              ${d.step >= 1 && d.step < 3 ? '<button id="btnOpenPipetteZoom">🔍 放大操作</button>' : ''}
              <button id="btnPipetteStop" ${Math.abs(d.pipetteVolume - v1) <= .15 ? '' : 'disabled'}>停在刻度</button>
            </div>
          </div>`;
      } else {
        // 個人模式：完整側欄（V3.0 原版）
        el.side.innerHTML = `
          <div class="side-section">
            <h2 style="display:flex;align-items:center;">選擇條件<button class="side-collapse-btn" id="btnCollapsePanel" title="收合選擇條件面板">◀</button></h2>
            <div class="field">
              <label for="stockSol">母液</label>
              <select id="stockSol">
                ${Object.entries(STOCKS).map(([k,v]) => `<option value="${k}" ${d.stock===k?'selected':''}>${v.option || v.name} ${v.concLabel} M</option>`).join('')}
              </select>
            </div>
            <div class="field">
              <label for="diluteConc">目標濃度</label>
              <div id="diluteConc" class="tag-choice-grid conc" role="group" aria-label="稀釋配製目標濃度">
                ${concOpts.map(opt => `<button class="tag-btn ${Math.abs(d.targetConc-opt.value)<.001?'active':''}" data-dilute-conc="${opt.value}">${opt.label}</button>`).join('')}
              </div>
            </div>
            <div class="field">
              <label for="diluteVolume">容量瓶規格</label>
              <div id="diluteVolume" class="tag-choice-grid volume" role="group" aria-label="稀釋配製容量瓶規格">
                ${volOpts.map(v => `<button class="tag-btn ${d.volume===v?'active':''}" data-dilute-volume="${v}">${v} mL</button>`).join('')}
              </div>
            </div>
          </div>
          <div class="side-section">
            <h2>即時計算</h2>
            <button id="btnOpenDiluteCalc" class="calc-launch-btn" aria-label="開啟稀釋配製計算步驟">
              <span class="calc-launch-icon">🧮</span>
              <span>
                <span class="calc-launch-title">逐步計算母液體積</span>
                <span class="calc-launch-result">需吸取 V₁ = ${formatMl(v1)} mL</span>
                <span class="calc-launch-hint">按鈕開啟全螢幕 KaTeX 計算</span>
              </span>
            </button>
            <div class="${rec.warn ? 'error-text' : 'calc-line result-green'}">${rec.text}</div>
          </div>
          <div class="side-section">
            <h2>目前狀態</h2>
            <div class="status-list">
              <div><strong>步驟：</strong>${Math.min(d.step+1,5)}/5</div>
              <div><strong>預裝水：</strong>${d.waterAdded ? '已加入約 1/3 體積' : '尚未加入'}</div>
              <div><strong>安全吸球：</strong>負壓 ${(Math.max(0, Math.min(1, d.bulbVacuum || 0))*100).toFixed(0)}%</div>
              <div><strong>吸量管：</strong>${d.pipetteVolume.toFixed(1)} / ${v1.toFixed(1)} mL</div>
              <div><strong>彎月面：</strong>${meniscusName(d.meniscus)}</div>
              <div><strong>提醒：</strong>${d.warning || '依 A → S → E 操作安全吸球。'}</div>
            </div>
            ${d.warning && d.warning.includes('請先按住 A') ? `<div class="warn-card">${d.warning}</div>` : ''}
            <div class="micro-actions">
              <button id="btnBulbA">A 蓄壓</button>
              <button id="btnBulbS">S 吸液</button>
              <button id="btnBulbE">E 放液</button>
              ${d.step >= 1 && d.step < 3 ? '<button id="btnOpenPipetteZoom">🔍 放大操作</button>' : ''}
              <button id="btnPipetteStop" ${Math.abs(d.pipetteVolume - v1) <= .15 ? '' : 'disabled'}>停在刻度</button>
            </div>
          </div>
          <div class="side-section">
            <h2>操作提示</h2>
            <div class="muted-note">${diluteHint()}</div>
          </div>`;
      }
      document.getElementById('stockSol').addEventListener('change', e => {
        state.dilute.stock = e.target.value;
        const presets = isTeach()
          ? { hcl:{targetConc:.5, volume:100}, cuso4:{targetConc:.5, volume:100}, kmno4:{targetConc:.5, volume:100} }
          : { hcl:{targetConc:.5, volume:100}, cuso4:{targetConc:.1, volume:250}, kmno4:{targetConc:.1, volume:250} };
        Object.assign(state.dilute, presets[e.target.value]);
        clampDiluteConc();
        resetDiluteProcess();
        renderAll();
        refreshDiluteProtected().then(renderAll);
      });
      document.querySelectorAll('[data-dilute-conc]').forEach(btn => btn.addEventListener('click', () => { state.dilute.targetConc = Number(btn.dataset.diluteConc); renderAll(); refreshDiluteProtected().then(renderAll); }));
      document.querySelectorAll('[data-dilute-volume]').forEach(btn => btn.addEventListener('click', () => { state.dilute.volume = Number(btn.dataset.diluteVolume); clampDiluteConc(); renderAll(); refreshDiluteProtected().then(renderAll); }));
      document.getElementById('btnOpenDiluteCalc').addEventListener('click', () => openQuickCalc('dilute'));
      bindHoldButton(document.getElementById('btnBulbA'), 'A');
      bindHoldButton(document.getElementById('btnBulbS'), 'S');
      bindHoldButton(document.getElementById('btnBulbE'), 'E');
      const zoomBtn = document.getElementById('btnOpenPipetteZoom');
      if (zoomBtn) zoomBtn.addEventListener('click', openPipetteZoom);
      document.getElementById('btnPipetteStop').addEventListener('click', pipetteStop);
      document.getElementById('btnCollapsePanel').addEventListener('click', togglePanelCollapse);
    }

    function renderScene() {
      if (activeTab === 'solid') el.scene.innerHTML = solidSvg();
      if (activeTab === 'dilute') el.scene.innerHTML = diluteSvg();
      bindSceneEvents();
      updateSvgState();
    }

    function renderSteps() {
      const steps = activeTab === 'solid' ? SOLID_STEPS : DILUTE_STEPS;
      const current = state[activeTab].step;
      const cls = activeTab === 'dilute' ? 'step-grid dilute' : 'step-grid';
      el.steps.innerHTML = `<div class="${cls}">${steps.map((label,i) => {
        const done = current > i;
        const currentCls = current === i ? 'current' : '';
        const locked = !canClickStep(i) ? 'locked' : '';
        return `<button class="step-pill ${done?'done':''} ${currentCls} ${locked}" data-step="${i}">
          <span class="code">S${i+1}</span><span class="sub">${label}</span>
        </button>`;
      }).join('')}</div>`;
      document.querySelectorAll('.step-pill').forEach(btn => btn.addEventListener('click', () => handleStepClick(Number(btn.dataset.step))));
    }

    function canClickStep(i) {
      const st = state[activeTab];
      if (activeTab === 'solid') {
        if (i === 0) return st.step === 0;
        if (i === 1) return st.step === 1 && isSolidMassOk();
        return i === st.step;
      }
      if (activeTab === 'dilute') {
        if (i === 1 && st.stock === 'hcl' && !st.waterAdded) return true;
        return i === st.step;
      }
      return false;
    }

    function handleStepClick(i) {
      if (activeTab === 'solid') handleSolidStep(i);
      if (activeTab === 'dilute') handleDiluteStep(i);
    }

    function handleSolidStep(i) {
      const s = state.solid;
      if (!canClickStep(i)) { showLockedStepHint(); return; }
      if (i === 0) { state.solid.step = isSolidMassOk() ? 1 : 0; renderAll(); return; }
      if (i === 1) { runSolidDissolveSequence(); return; }
      if (i === 2) { runSolidPourSequence(); return; }
      if (i === 3) { rinseBeaker(); return; }
      if (i === 4) { runFillToMark('solid'); return; }
      if (i === 5) {
        playSceneAnim('anim-invert');
        startMixingDiffusion('solid');
        s.mixed = true; s.reportReady = true;
        return;
      }
      renderAll();
    }

    function handleDiluteStep(i) {
      const d = state.dilute;
      if (i === 1 && d.stock === 'hcl' && !d.waterAdded) { triggerHclWarning(); return; }
      if (!canClickStep(i)) { showLockedStepHint(); return; }
      if (i === 0) {
        d.waterAdded = true; d.step = Math.max(d.step,1);
        animateLevel('dilute','flaskLevel', d.flaskLevel, .34, 1000);
      }
      if (i === 1) {
        if (!d.pipetteTargetReached) {
          d.warning = '請先完成 A 蓄壓、S 吸液、E 放液，讓吸量管停在所需刻度。';
          openPipetteZoom();
          return;
        }
        else { d.step = Math.max(d.step,2); }
      }
      if (i === 2) {
        d.step = Math.max(d.step,2);
        d.awaitingTransfer = true;
        d.transferInProgress = false;
        d.warning = '請按住安全吸球 E 鈕，將吸量管內母液放入容量瓶。';
        renderAll();
        el.status.textContent = '請按住安全吸球 E 鈕，將吸量管內母液放入容量瓶。';
        updateEHighlight();
        return;
      }
      if (i === 3) { runFillToMark('dilute'); return; }
      if (i === 4) {
        playSceneAnim('anim-invert');
        startMixingDiffusion('dilute');
        d.mixed = true; d.reportReady = true;
        return;
      }
      renderAll();
    }

    function bindSceneEvents() {
      el.scene.querySelectorAll('[data-mass-delta]').forEach(node => node.addEventListener('click', () => changeMass(Number(node.dataset.massDelta))));
      el.scene.querySelectorAll('[data-mass-target]').forEach(node => node.addEventListener('click', () => setMass(solidTargetMass())));
      el.scene.querySelectorAll('[data-bulb]').forEach(node => bindHoldButton(node, node.dataset.bulb));
    }

    function showLockedStepHint() {
      el.status.textContent = '此步驟已完成，無法回頭修改。';
      el.controlStatus.textContent = '流程已鎖定前段操作，請繼續目前步驟。';
    }

    function solidSvg() {
      return `<svg id="apparatusSvg" viewBox="0 0 1140 560" role="img" aria-label="固體溶質配製器材場景">
        ${svgDefs()}
        <line class="zone-line" x1="300" y1="28" x2="300" y2="520"/><line class="zone-line" x1="640" y1="28" x2="640" y2="520"/>
        <text class="svg-small" x="165" y="42" text-anchor="middle">秤量區</text>
        <text class="svg-small" x="470" y="42" text-anchor="middle">溶解與潤洗區</text>
        <text class="svg-small" x="870" y="42" text-anchor="middle">定容與混勻區</text>
        ${electronicBalanceSvg('main-scale',60,210)}
        ${beakerSvg('main-solid-beaker',328,110,.68)}
        ${volumetricFlaskSvg('main-solid-flask',770,75,'solid')}
        <g id="main-solid-powder" filter="url(#softShadow)">
          <path d="M137 169 Q170 139 205 169 Z" fill="${solidPowderColor()}" stroke="${solidPowderStroke()}" stroke-width="2" opacity=".95"/>
          <path d="M154 161 Q169 151 190 163" fill="none" stroke="#fff" stroke-opacity=".38" stroke-width="3" stroke-linecap="round"/>
        </g>
        <g id="main-solid-stir-rod" opacity="0">
          <line x1="525" y1="138" x2="472" y2="348" stroke="url(#glassStroke)" stroke-width="11" stroke-linecap="round"/>
          <line x1="525" y1="138" x2="472" y2="348" stroke="url(#glassTube)" stroke-width="7" stroke-linecap="round"/>
          <line x1="522" y1="142" x2="470" y2="342" stroke="#ffffff" stroke-width="2" stroke-linecap="round" opacity="0.55"/>
        </g>
        <g id="main-rinse-addwater" opacity="0">
          <rect x="360" y="150" width="120" height="34" rx="10" fill="#EAF3FF" stroke="#2D5FA6" stroke-width="1.6"/>
          <text x="420" y="173" text-anchor="middle" class="svg-small" fill="#2D5FA6" font-weight="900">加入蒸餾水</text>
        </g>
        <g id="main-transfer-arrow" opacity="0">
          <text x="630" y="232" text-anchor="middle" class="svg-label" fill="#2D5FA6" font-weight="900">轉入</text>
          <path d="M560 272 L660 272 L660 260 L700 282 L660 304 L660 292 L560 292 Z"
            fill="#2D5FA6" stroke="#1B4A9A" stroke-width="2" stroke-linejoin="round"/>
        </g>
        <text class="svg-label" x="170" y="510" text-anchor="middle">電子秤</text>
        <g id="scaleTargetBtn" class="svg-action" data-mass-target="true" style="cursor:pointer;">
          <rect id="scaleTargetBtnBg" x="60" y="518" width="220" height="32" rx="10"
            fill="#EAF3FF" stroke="#2D5FA6" stroke-width="1.8"/>
          <text id="scaleTargetLabel" x="170" y="539" text-anchor="middle"
            font-size="17" font-family="Microsoft JhengHei,PingFang TC,sans-serif"
            font-weight="800" fill="#2D5FA6">秤取目標：${solidTargetMass().toFixed(2)} g</text>
        </g>
        <text class="svg-label" x="470" y="520" text-anchor="middle">燒杯 + 攪拌棒</text>
        <text class="svg-label" x="850" y="520" text-anchor="middle">容量瓶</text>
      </svg>`;
    }

    function diluteSvg() {
      const st = STOCKS[state.dilute.stock];
      return `<svg id="apparatusSvg" viewBox="0 0 1140 560" role="img" aria-label="稀釋配製器材場景">
        ${svgDefs()}
        <line class="zone-line" x1="360" y1="28" x2="360" y2="520"/><line class="zone-line" x1="720" y1="28" x2="720" y2="520"/>
        <text class="svg-small" x="210" y="42" text-anchor="middle">母液區</text>
        <text class="svg-small" x="540" y="42" text-anchor="middle">吸量管與安全吸球</text>
        <text class="svg-small" x="910" y="42" text-anchor="middle">容量瓶</text>
        ${beakerSvg('main-stock-beaker',82,108,.68)}
        <text class="svg-label" x="225" y="142" text-anchor="middle">${st.option || st.name} 母液</text>
        <g transform="translate(192 60) scale(.65)">
          ${safetyBulbSvg('main',551,0)}
          ${pipetteSvg('main',551,352,25)}
        </g>
        ${volumetricFlaskSvg('main-dilute-flask',910,75,'dilute')}
        <g id="main-dilute-transfer-arrow" opacity="0">
          <text x="720" y="262" text-anchor="middle" class="svg-label" fill="#2D5FA6" font-weight="900">轉入</text>
          <path d="M610 300 L780 300 L780 286 L830 312 L780 338 L780 324 L610 324 Z"
            fill="#2D5FA6" stroke="#1B4A9A" stroke-width="2" stroke-linejoin="round"/>
        </g>
        <text class="svg-label" x="205" y="520" text-anchor="middle">母液燒杯</text>
        <text class="svg-label" x="990" y="520" text-anchor="middle">容量瓶</text>
      </svg>`;
    }

    function svgDefs() {
      return `<defs>
        <linearGradient id="glassTube" x1="0" x2="1">
          <stop offset="0" stop-color="#C8D8E8" stop-opacity=".42"/><stop offset=".35" stop-color="#fff" stop-opacity=".72"/>
          <stop offset=".62" stop-color="#EAF3FA" stop-opacity=".40"/><stop offset="1" stop-color="#8EA7BC" stop-opacity=".55"/>
        </linearGradient>
        <linearGradient id="glassStroke" x1="0" x2="1">
          <stop offset="0" stop-color="#7892A7"/><stop offset=".5" stop-color="#C8D7E4"/><stop offset="1" stop-color="#6F879B"/>
        </linearGradient>
        <linearGradient id="metalGrad" x1="0" x2="1">
          <stop offset="0" stop-color="#4D4D4D"/><stop offset=".5" stop-color="#9B9B9B"/><stop offset="1" stop-color="#555"/>
        </linearGradient>
        <linearGradient id="rubberGrad" x1="0" x2="1" y1="0" y2="1">
          <stop offset="0" stop-color="#D04030"/><stop offset="1" stop-color="#8B2018"/>
        </linearGradient>
        <filter id="softShadow" x="-25%" y="-25%" width="150%" height="150%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity=".16"/>
        </filter>
      </defs>`;
    }

    function electronicBalanceSvg(id,x,y) {
      const cx = x + 120;
      return `<g filter="url(#softShadow)">
        <rect x="${cx-9}" y="${y-22}" width="18" height="22" rx="7" fill="url(#metalGrad)" stroke="#5F6870" stroke-width="1.5"/>
        <rect x="${cx-80}" y="${y-28}" width="160" height="4" rx="2" fill="#747C84"/>
        <ellipse cx="${cx}" cy="${y-28}" rx="80" ry="14" fill="url(#metalGrad)" stroke="#5F6870" stroke-width="2"/>
        <rect x="${x}" y="${y}" width="240" height="96" rx="14" fill="#F5F4F0" stroke="#1E1E22" stroke-width="2"/>
        <rect x="${x+58}" y="${y+20}" width="124" height="38" rx="5" fill="#222831"/>
        <rect x="${x+64}" y="${y+26}" width="112" height="26" rx="3" fill="#102018"/>
        <text id="scaleLcd" x="${x+120}" y="${y+46}" text-anchor="middle" font-size="18" font-family="monospace" font-weight="800" fill="#00FF88">0.000 g</text>
        <rect x="${x+16}" y="${y+64}" width="64" height="24" rx="6" fill="#E4E3DE" stroke="#C8C6C0"/><text x="${x+48}" y="${y+81}" text-anchor="middle" font-size="16" font-weight="800" fill="#4A4A6A">TARE</text>
        <rect x="${x+160}" y="${y+64}" width="64" height="24" rx="6" fill="#E4E3DE" stroke="#C8C6C0"/><text x="${x+192}" y="${y+81}" text-anchor="middle" font-size="16" font-weight="800" fill="#4A4A6A">ZERO</text>
        ${scaleButton(x-4,y+116,'−1g',-1)}${scaleButton(x+51,y+116,'−0.1g',-.1)}${scaleButton(x+106,y+116,'+0.1g',.1)}${scaleButton(x+161,y+116,'+1g',1)}${scaleButton(x+216,y+116,'+10g',10)}
      </g>`;
    }

    function scaleButton(x,y,label,delta) {
      return `<g class="svg-action" data-mass-delta="${delta}">
        <rect x="${x}" y="${y}" width="52" height="30" rx="8" fill="#FFFFFF" stroke="#D8D6D0" stroke-width="1.4"/>
        <text x="${x+26}" y="${y+21}" text-anchor="middle" font-size="16" font-weight="800" fill="#4A4A6A">${label}</text>
      </g>`;
    }

    function beakerSvg(id,x,y,scale=.5) {
      const glass = `${id}-beakerGlass`;
      const liquid = `${id}-beakerLiquid`;
      const surface = `${id}-liquidSurface`;
      const shadow = `${id}-beakerShadow`;
      return `<defs>
        <linearGradient id="${glass}" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.85"/>
          <stop offset="18%" stop-color="#eaf7ff" stop-opacity="0.45"/>
          <stop offset="50%" stop-color="#ffffff" stop-opacity="0.18"/>
          <stop offset="82%" stop-color="#eaf7ff" stop-opacity="0.45"/>
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0.85"/>
        </linearGradient>
        <linearGradient id="${liquid}" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stop-color="#d8ecff" stop-opacity="0.78"/>
          <stop offset="100%" stop-color="#9fcaff" stop-opacity="0.88"/>
        </linearGradient>
        <linearGradient id="${surface}" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0%" stop-color="#b8dcff" stop-opacity="0.65"/>
          <stop offset="48%" stop-color="#ffffff" stop-opacity="0.38"/>
          <stop offset="100%" stop-color="#b8dcff" stop-opacity="0.65"/>
        </linearGradient>
        <filter id="${shadow}" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.10"/>
        </filter>
      </defs>
      <g id="${id}" transform="translate(${x} ${y}) scale(${scale})" stroke="#111" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" filter="url(#${shadow})">
        <path d="M 100 100 L 100 320 C 100 350, 128 368, 210 368 C 292 368, 320 350, 320 320 L 320 100 C 292 112, 128 112, 100 100 Z" fill="url(#${glass})"/>
        <ellipse cx="210" cy="82" rx="126" ry="20" fill="url(#${glass})"/>
        <ellipse cx="210" cy="86" rx="116" ry="14" fill="none" stroke="#111" stroke-width="3" opacity="0.95"/>
        <path d="M 96 82 C 132 96, 288 96, 324 82" fill="none" stroke="#8ca7bd" stroke-width="2" opacity="0.45"/>
        <path d="M 86 78 C 96 84, 100 93, 96 104 C 92 114, 98 119, 108 110 C 113 105, 116 101, 122 98" fill="none" stroke="#111" stroke-width="4"/>
        <path d="M 95 97 C 94 106, 99 110, 106 104" fill="none" stroke="#8ca7bd" stroke-width="2.2" opacity="0.6"/>
        <path d="M 100 100 L 100 320 C 100 350, 128 368, 210 368" fill="none" stroke="#111" stroke-width="4"/>
        <path d="M 320 100 L 320 320 C 320 350, 292 368, 210 368" fill="none" stroke="#111" stroke-width="4"/>
        <path d="M 120 112 C 112 160, 112 260, 120 318 C 124 344, 142 356, 170 360" fill="none" stroke="#ffffff" stroke-width="12" opacity="0.32"/>
        <path d="M 300 112 C 308 170, 308 270, 300 325" fill="none" stroke="#ffffff" stroke-width="8" opacity="0.24"/>
        <g id="${id}-liquid-group">
          <path id="${id}-liquid" d="M 104 248 C 145 235, 275 235, 316 248 L 316 320 C 316 344, 290 360, 210 360 C 130 360, 104 344, 104 320 Z" fill="url(#${liquid})" stroke="none"/>
          <ellipse id="${id}-surface" cx="210" cy="248" rx="106" ry="15" fill="url(#${surface})" stroke="#3978b6" stroke-width="2.5" opacity="0.95"/>
          <ellipse id="${id}-bottom-ellipse" cx="210" cy="348" rx="96" ry="17" fill="#ffffff" opacity="0.18" stroke="#6fa4d8" stroke-width="2"/>
          <path id="${id}-swirl" d="M150 246 C180 232 242 262 270 245 C240 276 174 270 150 246" fill="none" stroke="#ffffff" stroke-width="5" stroke-dasharray="18 10" opacity="0"/>
        </g>
        <path d="M 100 320 C 100 350, 128 368, 210 368 C 292 368, 320 350, 320 320" fill="none" stroke="#111" stroke-width="4"/>
        <g id="${id}-graduationMarks" stroke="#111" stroke-width="3">
          <line x1="250" y1="132" x2="280" y2="131"/>
          <line x1="250" y1="166" x2="280" y2="165"/>
          <line x1="250" y1="200" x2="280" y2="199"/>
          <line x1="250" y1="234" x2="280" y2="233"/>
          <line x1="250" y1="268" x2="280" y2="267"/>
          <line x1="250" y1="302" x2="280" y2="301"/>
          <line x1="250" y1="336" x2="280" y2="335"/>
        </g>
        <g id="${id}-residue"></g>
      </g>`;
    }

    function volumetricFlaskSvg(id,x,y,mode) {
      const volume = state[mode] && state[mode].volume ? state[mode].volume : 500;
      const glassGrad = `${id}-flask-glassGrad`;
      const liquidGrad = `${id}-flask-liquidGrad`;
      const shadow = `${id}-flask-softShadow`;
      const clip = `${id}-flask-body-clip`;
      const bodyPath = `
        M ${x+92} ${y+84}
        L ${x+92} ${y+200}
        C ${x+92} ${y+225}, ${x+58} ${y+250}, ${x+48} ${y+310}
        C ${x+38} ${y+375}, ${x+70} ${y+400}, ${x+110} ${y+400}
        C ${x+150} ${y+400}, ${x+182} ${y+375}, ${x+172} ${y+310}
        C ${x+162} ${y+250}, ${x+128} ${y+225}, ${x+128} ${y+200}
        L ${x+128} ${y+84}
        Z`;
      return `<defs>
	        <linearGradient id="${glassGrad}" x1="0" x2="1" y1="0" y2="0">
	          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.92"/>
	          <stop offset="42%" stop-color="#f7fcff" stop-opacity="0.34"/>
	          <stop offset="100%" stop-color="#ffffff" stop-opacity="0.86"/>
	        </linearGradient>
        <linearGradient id="${liquidGrad}" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stop-color="#dff4ff" stop-opacity="0.72"/>
          <stop offset="100%" stop-color="#b7dff4" stop-opacity="0.92"/>
        </linearGradient>
        <filter id="${shadow}" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.15"/>
        </filter>
        <clipPath id="${clip}"><path d="${bodyPath}"/></clipPath>
      </defs>
      <g id="${id}" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <g id="${id}-stopper">
          <path d="M ${x+88} ${y+38} C ${x+88} ${y+18}, ${x+132} ${y+18}, ${x+132} ${y+38} C ${x+132} ${y+56}, ${x+88} ${y+56}, ${x+88} ${y+38} Z" fill="#eaf8ff"/>
          <path d="M ${x+96} ${y+56} L ${x+124} ${y+56} L ${x+120} ${y+80} L ${x+100} ${y+80} Z" fill="#eaf8ff"/>
          <rect x="${x+84}" y="${y+76}" width="52" height="10" rx="5" fill="#eaf8ff"/>
          <path d="M ${x+96} ${y+34} C ${x+104} ${y+26}, ${x+116} ${y+26}, ${x+124} ${y+34}" fill="none" stroke="#ffffff" stroke-width="4" opacity="0.45"/>
        </g>
	        <g clip-path="url(#${clip})">
	          <g id="${id}-liquid-wrap">
	            <rect id="${id}-liquid" x="${x+38}" y="${y+392}" width="144" height="0" fill="url(#${liquidGrad})" stroke="none"/>
	          </g>
	        </g>
        <path d="${bodyPath}" fill="url(#${glassGrad})" filter="url(#${shadow})"/>
        <line x1="${x+92}" y1="${y+165}" x2="${x+128}" y2="${y+165}" stroke="#111" stroke-width="2"/>
        <text class="svg-small" x="${x+134}" y="${y+170}" fill="#111">${volume} mL</text>
        <path d="M ${x+101} ${y+92} L ${x+101} ${y+205}" fill="none" stroke="#ffffff" stroke-width="5" opacity="0.58"/>
        <path d="M ${x+78} ${y+250} C ${x+60} ${y+290}, ${x+62} ${y+350}, ${x+88} ${y+380}" fill="none" stroke="#ffffff" stroke-width="6" opacity="0.42"/>
	      </g>`;
    }

    function pipetteSvg(id,cx,y,maxMl=25, showVolumeLabel=true) {
      const x = cx - 130;
      const glassGrad = `${id}-pipette-glassGrad`;
      const tipGrad = `${id}-pipette-tipGrad`;
      const shadow = `${id}-pipette-softShadow`;
      const clip = `${id}-pipette-clip`;
      const top = y + 16;
      const markTop = y + 34;
      const markBottom = y + 250;
      const pipettePath = `
          M ${x+116} ${y+16}
          L ${x+144} ${y+16}
          L ${x+144} ${y+227}
          C ${x+144} ${y+240}, ${x+139} ${y+248}, ${x+136} ${y+260}
          L ${x+132} ${y+307}
          C ${x+131} ${y+318}, ${x+129} ${y+318}, ${x+128} ${y+307}
          L ${x+124} ${y+260}
          C ${x+121} ${y+248}, ${x+116} ${y+240}, ${x+116} ${y+227}
          Z`;
      return `<defs>
        <linearGradient id="${glassGrad}" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stop-color="#ffffff" stop-opacity="0.84"/>
          <stop offset="45%" stop-color="#dff5ff" stop-opacity="0.56"/>
          <stop offset="100%" stop-color="#ffffff" stop-opacity="0.75"/>
        </linearGradient>
        <linearGradient id="${tipGrad}" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stop-color="#e7f8ff" stop-opacity="0.75"/>
          <stop offset="100%" stop-color="#c5ebff" stop-opacity="0.95"/>
        </linearGradient>
        <filter id="${shadow}" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.16"/>
        </filter>
        <clipPath id="${clip}"><path d="${pipettePath}"/></clipPath>
      </defs>
      <g id="${id}-pipette" data-max-ml="${maxMl}" data-lowest-mark="${pipetteLowestMark(maxMl)}" data-mark-top="${markTop}" data-mark-bottom="${markBottom}" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <g clip-path="url(#${clip})">
          <rect id="${id}-pipette-liquid" x="${x+118}" y="${markBottom}" width="24" height="0" fill="${STOCKS[state.dilute.stock].color}" stroke="none" opacity=".72"/>
          <ellipse id="${id}-pipette-meniscus" cx="${x+130}" cy="${markBottom}" rx="10" ry="3.2" fill="${STOCKS[state.dilute.stock].meniscus}" stroke="#37637a" stroke-width="1"/>
        </g>
        <path d="${pipettePath}" fill="url(#${glassGrad})" filter="url(#${shadow})"/>
        <path d="M ${x+125} ${y+30} L ${x+125} ${y+230}" fill="none" stroke="#ffffff" stroke-width="5" opacity="0.60"/>
        <path d="M ${x+121} ${y+232} C ${x+123} ${y+247}, ${x+124} ${y+260}, ${x+126} ${y+277} C ${x+127} ${y+292}, ${x+128} ${y+302}, ${x+128} ${y+307} C ${x+128} ${y+302}, ${x+129} ${y+292}, ${x+130} ${y+277} C ${x+132} ${y+260}, ${x+133} ${y+247}, ${x+135} ${y+232} Z" fill="url(#${tipGrad})" stroke="none" opacity="0.6"/>
        <g id="${id}-pipette-marks" stroke="#111">${pipetteMarks(cx,y,maxMl)}</g>
        ${showVolumeLabel && id !== 'preview-pip' ? `
        <rect id="${id}-pipette-volume-highlight" class="pipette-readout-highlight" x="${x+3}" y="${y+314}" width="254" height="40" rx="9"/>
        <text id="${id}-pipette-volume-label" class="pipette-readout-text" x="${x+130}" y="${y+343}" text-anchor="middle">0.0 mL</text>` : ''}
      </g>`;
    }

    function pipetteMarks(cx,y,maxMl=25) {
      const x = cx - 130;
      let out = '';
      const markTop = y + 34, markBottom = y + 250;
      const lowestMark = pipetteLowestMark(maxMl);
      const finalTick = Math.round(lowestMark * 10);
      for (let i=0;i<=finalTick;i++) {
        const ml = i / 10;
        const yy = markTop + (ml / lowestMark) * (markBottom - markTop);
        const isMl = i % 10 === 0;
        const isFive = i % 50 === 0;
        const isFinalMark = i === finalTick;
        const len = (isFive || isFinalMark) ? 16 : (isMl ? 11 : 7);
        const sw = (isFive || isFinalMark) ? 1.6 : (isMl ? 1.2 : .8);
        out += `<line x1="${x+116}" y1="${yy.toFixed(1)}" x2="${x+116+len}" y2="${yy.toFixed(1)}" stroke-width="${sw}"/>`;
        if (isFive || isFinalMark) {
          out += `<text x="${x+90}" y="${(yy+5).toFixed(1)}" font-size="16" font-family="Arial, Helvetica, sans-serif" font-weight="700" fill="#111" stroke="none">${formatPipetteMark(ml)}</text>`;
        }
      }
      return out;
    }

    function pipetteLowestMark(maxMl=25) {
      return Math.max(0, maxMl - PIPETTE_DEAD_VOLUME_ML);
    }

    function formatPipetteMark(ml) {
      return Number.isInteger(ml) ? String(ml) : ml.toFixed(1);
    }

    function safetyBulbSvg(id,cx,y) {
      const x = cx - 130;
      const red = `${id}-pipette-bulbRed`;
      const redTube = `${id}-pipette-redTube`;
      const shadow = `${id}-pipette-softShadow`;
      return `<defs>
        <radialGradient id="${red}" cx="35%" cy="30%" r="75%">
          <stop offset="0%" stop-color="#ff9a95"/>
          <stop offset="65%" stop-color="#ef5752"/>
          <stop offset="100%" stop-color="#c92d2d"/>
        </radialGradient>
        <linearGradient id="${redTube}" x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stop-color="#cf3131"/>
          <stop offset="45%" stop-color="#ff726b"/>
          <stop offset="100%" stop-color="#c72c2c"/>
        </linearGradient>
        <filter id="${shadow}" x="-20%" y="-20%" width="140%" height="140%">
          <feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000000" flood-opacity="0.16"/>
        </filter>
      </defs>
      <g id="${id}-safety-bulb" filter="url(#${shadow})" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round">
        <rect x="${x+110}" y="${y+12}" width="40" height="12" rx="4" fill="url(#${redTube})"/>
        <rect x="${x+116}" y="${y+20}" width="28" height="24" rx="6" fill="url(#${redTube})"/>
        <rect x="${x+119}" y="${y+44}" width="22" height="12" rx="5" fill="url(#${redTube})"/>
        <g class="svg-action" data-bulb="A">
          <circle cx="${x+130}" cy="${y+67}" r="19" fill="url(#${red})"/>
          <text x="${x+130}" y="${y+75}" text-anchor="middle" font-size="24" font-family="Arial, Helvetica, sans-serif" font-weight="700" fill="#111" stroke="none">A</text>
        </g>
        <rect x="${x+117}" y="${y+86}" width="26" height="24" rx="8" fill="url(#${redTube})"/>
        <circle id="${id}-bulb-body" cx="${x+130}" cy="${y+150}" r="58" fill="url(#${red})"/>
        <path d="M ${x+110} ${y+118} C ${x+118} ${y+105}, ${x+138} ${y+103}, ${x+150} ${y+116}" fill="none" stroke="#ffb3ae" stroke-width="6" opacity="0.35"/>
        <rect x="${x+116}" y="${y+205}" width="28" height="150" rx="8" fill="url(#${redTube})"/>
        <g class="svg-action" data-bulb="S">
          <circle cx="${x+130}" cy="${y+248}" r="20" fill="url(#${red})"/>
          <text x="${x+130}" y="${y+256}" text-anchor="middle" font-size="24" font-family="Arial, Helvetica, sans-serif" font-weight="700" fill="#111" stroke="none">S</text>
        </g>
        <g id="${id}-e-branch">
          <rect x="${x+22}" y="${y+293}" width="12" height="40" rx="4" fill="url(#${redTube})"/>
          <rect x="${x+34}" y="${y+299}" width="30" height="28" rx="7" fill="url(#${redTube})"/>
          <rect x="${x+70}" y="${y+300}" width="56" height="26" rx="13" fill="url(#${redTube})"/>
          <path d="M ${x+27} ${y+313} H ${x+56}" fill="none" stroke="#ffaaa3" stroke-width="4" stroke-linecap="round" opacity="0.40"/>
          <path d="M ${x+78} ${y+313} H ${x+118}" fill="none" stroke="#ffaaa3" stroke-width="4" stroke-linecap="round" opacity="0.40"/>
        </g>
        <g class="svg-action" id="${id}-e-button" data-bulb="E">
          <circle cx="${x+64}" cy="${y+313}" r="21" fill="url(#${red})"/>
          <text x="${x+64}" y="${y+321}" text-anchor="middle" font-size="24" font-family="Arial, Helvetica, sans-serif" font-weight="700" fill="#111" stroke="none">E</text>
        </g>
        <rect x="${x+112}" y="${y+352}" width="36" height="16" rx="4" fill="url(#${redTube})"/>
      </g>`;
    }

    function bulbButton(cx,cy,letter,label) {
      return `<g class="svg-action" data-bulb="${letter}">
        <circle cx="${cx}" cy="${cy}" r="22" fill="#2D5FA6" stroke="#fff" stroke-width="2"/>
        <text x="${cx}" y="${cy+6}" text-anchor="middle" font-size="18" font-weight="900" fill="#fff">${letter}</text>
        <text class="svg-small" x="${cx}" y="${cy+40}" text-anchor="middle">${label}</text>
      </g>`;
    }

    function renderPrecision() {
      el.side.classList.add('hidden');
      el.status.textContent = '儀器精度說明：精密配製使用容量瓶，粗略觀察才使用燒杯或量筒。';
      el.scene.innerHTML = `<div id="precision-panel">
        <div class="precision-card">
          <h2>儀器精度對照表</h2>
          <table class="precision-table">
            <thead><tr><th>儀器</th><th>相對誤差</th><th>用途</th></tr></thead>
            <tbody>
              <tr><td>燒杯（含刻度）</td><td>±5%</td><td>粗略量測，僅供觀察</td></tr>
              <tr><td>量筒</td><td>±1%</td><td>一般稀釋估量</td></tr>
              <tr><td>容量瓶（A 級）</td><td>±0.1%</td><td>精密配製</td></tr>
              <tr><td>吸量管（A 級）</td><td>±0.5%</td><td>精密取液</td></tr>
            </tbody>
          </table>
          <p class="muted-note">[需要數值來源] 上列為高中教學常見值，應以 ISO 1042 與 ISO 648 規格交叉確認；吸量管 ±0.5% 為本版暫用值。</p>
        </div>
        <div class="precision-card">
          <div class="precision-heading">
            <h2>器材示意圖</h2>
            <button id="btnInstrumentZoom" class="instrument-zoom-btn" type="button" aria-label="放大器材">
              <svg viewBox="0 0 48 48" aria-hidden="true">
                <rect x="7" y="11" width="20" height="24" rx="4" fill="#DFF4FF" stroke="currentColor" stroke-width="3"/>
                <line x1="12" y1="19" x2="22" y2="19" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"/>
                <line x1="12" y1="26" x2="22" y2="26" stroke="currentColor" stroke-width="2.8" stroke-linecap="round"/>
                <circle cx="30" cy="26" r="9" fill="none" stroke="currentColor" stroke-width="3.5"/>
                <line x1="36.5" y1="32.5" x2="43" y2="39" stroke="currentColor" stroke-width="4" stroke-linecap="round"/>
              </svg>
              <span>放大器材</span>
            </button>
          </div>
          <div class="instrument-grid">
            <div class="instrument-tile"><span>容量瓶</span><svg viewBox="0 0 270 440" preserveAspectRatio="xMidYMid meet">${svgDefs()}${volumetricFlaskSvg('preview-flask',30,22,'solid')}</svg></div>
            <div class="instrument-tile"><span>吸量管 + 安全吸球</span><svg viewBox="0 0 320 700" preserveAspectRatio="xMidYMid meet">${svgDefs()}${safetyBulbSvg('preview-pip',150,0)}${pipetteSvg('preview-pip',150,340,25)}</svg></div>
            <div class="instrument-tile"><span>量筒</span><svg viewBox="0 0 220 300" preserveAspectRatio="xMidYMid meet">${svgDefs()}${miniCylinderSvg()}</svg></div>
            <div class="instrument-tile"><span>燒杯</span><svg viewBox="0 0 230 230" preserveAspectRatio="xMidYMid meet">${svgDefs()}${beakerSvg('preview-beaker',10,10,.5)}</svg></div>
          </div>
        </div>
      </div>`;
      el.steps.innerHTML = '';
      el.controlStatus.textContent = '靜態展示：燒杯、量筒、容量瓶、吸量管的量測用途不同。';
      el.btnReport.classList.remove('report-ready');
      document.getElementById('btnInstrumentZoom')?.addEventListener('click', openInstrumentZoom);
      renderKatexIn(el.scene);
    }

    function instrumentZoomTile(title, viewBox, svg) {
      return `<article class="instrument-zoom-tile">
        <div class="instrument-zoom-title">${title}</div>
        <svg viewBox="${viewBox}" preserveAspectRatio="xMidYMid meet" role="img" aria-label="${title}放大示意">${svgDefs()}${svg}</svg>
      </article>`;
    }

    function renderInstrumentZoom() {
      el.instrumentZoomContent.innerHTML = [
        instrumentZoomTile('容量瓶', '0 0 270 440', volumetricFlaskSvg('zoom-flask',30,22,'solid')),
        instrumentZoomTile('吸量管 + 安全吸球', '0 0 320 700', `${safetyBulbSvg('zoom-pip',150,0)}${pipetteSvg('zoom-pip',150,340,25,false)}`),
        instrumentZoomTile('量筒', '0 0 220 300', miniCylinderSvg()),
        instrumentZoomTile('燒杯', '0 0 230 230', beakerSvg('zoom-beaker',10,10,.5))
      ].join('');
    }

    function openInstrumentZoom() {
      renderInstrumentZoom();
      el.instrumentZoom.classList.add('show');
      el.instrumentZoom.setAttribute('aria-hidden','false');
      requestInstrumentZoomFullscreen();
    }

    function requestInstrumentZoomFullscreen() {
      if (document.fullscreenElement || !document.documentElement.requestFullscreen) return;
      instrumentZoomRequestedFullscreen = true;
      document.documentElement.requestFullscreen().catch(() => { instrumentZoomRequestedFullscreen = false; });
    }

    function closeInstrumentZoom() {
      el.instrumentZoom.classList.remove('show');
      el.instrumentZoom.setAttribute('aria-hidden','true');
      if (instrumentZoomRequestedFullscreen && document.fullscreenElement && document.exitFullscreen) {
        document.exitFullscreen().catch(() => {});
      }
      instrumentZoomRequestedFullscreen = false;
    }

    function miniCylinderSvg() {
      return `<g transform="translate(35,10)" filter="url(#softShadow)">
        <ellipse cx="75" cy="240" rx="55" ry="15" fill="#D0D8E0" stroke="url(#glassStroke)" stroke-width="2"/>
        <rect x="55" y="45" width="40" height="185" rx="6" fill="url(#glassTube)" stroke="url(#glassStroke)" stroke-width="2.2"/>
        <rect x="58" y="120" width="34" height="106" fill="rgba(100,160,220,.42)"/>
        <ellipse cx="75" cy="120" rx="17" ry="5" fill="rgba(100,160,220,.62)" stroke="rgba(95,120,145,.45)"/>
        <ellipse cx="75" cy="45" rx="32" ry="9" fill="rgba(232,242,250,.75)" stroke="url(#glassStroke)" stroke-width="2"/>
        ${Array.from({length:8},(_,i)=>`<line x1="55" y1="${220-i*22}" x2="${55+(i%2?9:16)}" y2="${220-i*22}" stroke="#536B7A"/>`).join('')}
      </g>`;
    }
    function miniBeakerSvg() {
      return `<g transform="translate(52,35)" filter="url(#softShadow)">
        <path d="M0 30 L0 170 Q55 192 110 170 L110 30" fill="url(#glassTube)" stroke="url(#glassStroke)" stroke-width="3"/>
        <rect x="3" y="95" width="104" height="77" fill="rgba(100,160,220,.35)"/>
        <ellipse cx="55" cy="95" rx="51" ry="10" fill="rgba(100,160,220,.55)" stroke="rgba(95,120,145,.45)"/>
        <ellipse cx="55" cy="30" rx="55" ry="14" fill="rgba(232,242,250,.70)" stroke="url(#glassStroke)" stroke-width="2.4"/>
      </g>`;
    }

    function updateSvgState() {
      if (activeTab === 'solid') updateSolidSvg();
      if (activeTab === 'dilute') updateDiluteSvg();
    }

    function updateSolidSvg() {
      const s = state.solid;
      const lcd = document.getElementById('scaleLcd');
      if (lcd) {
        lcd.textContent = `${s.displayedWeight.toFixed(3).padStart(7,' ')} g${isSolidMassOk() ? ' ✓' : ''}`;
        lcd.setAttribute('fill', isSolidMassOk() ? '#00FF88' : (Math.abs(s.weighed - solidTargetMass()) > .5 && s.weighed > 0 ? '#FF5370' : '#00FF88'));
      }
      const targetLbl = document.getElementById('scaleTargetLabel');
      if (targetLbl) targetLbl.textContent = `秤取目標：${solidTargetMass().toFixed(2)} g`;
      setBeakerLiquid('main-solid-beaker', s.beakerLevel, s.step >= 3 && s.rinseCount > 0 ? rinseResidueColor() : SOLUTES[s.solute].color);
      setFlaskLiquid('main-solid-flask', s.flaskLevel, solidFlaskLiquidColor(), 'solid');
      const powder = document.getElementById('main-solid-powder');
      if (powder) powder.style.opacity = s.powderVisible ? '1' : '0';
      const stir = document.getElementById('main-solid-stir-rod');
      if (stir) stir.style.opacity = s.step >= 2 && s.step < 3 ? '1' : '0';
      const badge = document.getElementById('main-solid-beaker-badge');
      if (badge) badge.textContent = `潤洗：[${s.rinseCount}]次`;
      const residue = document.getElementById('main-solid-beaker-residue');
      if (residue) {
        const count = Math.max(1, Math.round(rinseResidueArr()[Math.min(s.rinseCount,3)] * 2));
        const col = rinseResidueColor();
        residue.innerHTML = s.step >= 3 ? Array.from({length:Math.min(10,count)},(_,i)=>`<circle cx="${150+(i*17)%88}" cy="${330+(i%3)*8}" r="${s.rinseCount?3.5:6}" fill="${col}" opacity=".7" stroke="none"/>`).join('') : '';
      }
      syncScaleLock();
    }

    function updateDiluteSvg() {
      const d = state.dilute;
      const st = STOCKS[d.stock];
      setBeakerLiquid('main-stock-beaker', .72, st.color);
      setFlaskLiquid('main-dilute-flask', d.flaskLevel, diluteFlaskLiquidColor(), 'dilute');
      const target = dilutionV1();
      const aligned = Math.abs(d.pipetteVolume - target) <= .1;
      ['main','pz'].forEach(prefix => updatePipetteVisual(prefix, st, target, aligned));
      updateBulbVisual();
      syncPipetteZoomReadout();
      syncPipetteLock();
      updateEHighlight();
    }

    function updatePipetteVisual(prefix, st, target, aligned) {
      const d = state.dilute;
      const pip = document.getElementById(`${prefix}-pipette`);
      const liq = document.getElementById(`${prefix}-pipette-liquid`);
      const men = document.getElementById(`${prefix}-pipette-meniscus`);
      const lab = document.getElementById(`${prefix}-pipette-volume-label`);
      const marks = document.getElementById(`${prefix}-pipette-marks`);
      if (!pip || !liq || !men) return;
      const yTop = Number(pip.dataset.markTop);
      const yBottom = Number(pip.dataset.markBottom);
      const maxMl = Number(pip.dataset.maxMl) || 25;
      const lowestMark = Number(pip.dataset.lowestMark) || pipetteLowestMark(maxMl);
      const frac = Math.min(d.pipetteVolume / lowestMark, 1);
      const h = (yBottom - yTop) * frac;
      const y = yBottom - h;
      liq.setAttribute('y', y.toFixed(1));
      liq.setAttribute('height', h.toFixed(1));
      liq.setAttribute('fill', st.color);
      men.setAttribute('cy', y.toFixed(1));
      men.setAttribute('fill', st.meniscus);
      if (lab) lab.innerHTML = `${d.pipetteVolume.toFixed(1)} mL / 需 ${target.toFixed(1)} mL${aligned ? ' <tspan class="aligned-note">(已對齊)</tspan>' : ''}`;
      if (marks) marks.classList.toggle('pipette-aligned-glow', aligned);
    }

    function syncScaleLock() {
      const locked = state.solid.step >= 1;
      document.querySelectorAll('[data-mass-delta]').forEach(g => {
        g.style.pointerEvents = locked ? 'none' : '';
        g.style.opacity = locked ? '.4' : '';
      });
      document.querySelectorAll('[data-side-mass-delta]').forEach(btn => {
        btn.disabled = locked;
      });
      const tgt = document.getElementById('btnMassTarget');
      if (tgt) tgt.disabled = locked;
      // SVG 秤取目標按鈕鎖定
      const svgTgt = document.getElementById('scaleTargetBtn');
      if (svgTgt) {
        svgTgt.style.pointerEvents = locked ? 'none' : '';
        svgTgt.style.opacity = locked ? '.4' : '';
      }
    }

    function syncPipetteLock() {
      const locked = state.dilute.step >= 3;
      document.querySelectorAll('[data-bulb]').forEach(g => {
        g.style.pointerEvents = locked ? 'none' : '';
        g.style.opacity = locked ? '.4' : '';
      });
      ['btnBulbA','btnBulbS','btnBulbE'].forEach(id => {
        const btn = document.getElementById(id);
        if (btn) btn.disabled = locked;
      });
      const zoom = document.getElementById('btnOpenPipetteZoom');
      if (zoom) zoom.disabled = locked;
      const stop = document.getElementById('pzStop');
      if (stop && locked) stop.disabled = true;
    }

    function updateEHighlight() {
      const on = !!state.dilute.awaitingTransfer;
      ['main','pz','pzbig'].forEach(prefix => {
        const g = document.getElementById(`${prefix}-e-button`);
        if (g) g.classList.toggle('e-highlight', on);
      });
    }

    function setBeakerLiquid(id, frac, color) {
      const liquid = document.getElementById(`${id}-liquid`);
      const surface = document.getElementById(`${id}-surface`);
      const group = document.getElementById(`${id}-liquid-group`);
      const bottomEl = document.getElementById(`${id}-bottom-ellipse`);
      if (!liquid || !surface || !group) return;
      const f = Math.max(0, Math.min(frac,1));
      const yTop = 132, yBottom = 348;
      const y = yBottom - (yBottom - yTop) * f;
      group.style.opacity = f <= .01 ? '0' : '1';
      liquid.setAttribute('d', `M 104 ${y.toFixed(1)} C 145 ${(y-13).toFixed(1)}, 275 ${(y-13).toFixed(1)}, 316 ${y.toFixed(1)} L 316 320 C 316 344, 290 360, 210 360 C 130 360, 104 344, 104 320 Z`);
      liquid.setAttribute('fill', color);
      surface.setAttribute('cy', y.toFixed(1));
      surface.setAttribute('fill', color);
      if (bottomEl) bottomEl.style.display = f > .08 ? '' : 'none';
    }

    function setFlaskLiquid(id, frac, color, mode='solid') {
      const liquid = document.getElementById(`${id}-liquid`);
      if (!liquid) return;
      const yBase = 75;
      const bottom = yBase + 392, top = yBase + 165;
      const f = Math.max(0, Math.min(frac,1));
      const y = bottom - (bottom - top) * f;
      liquid.setAttribute('y', y.toFixed(1));
      liquid.setAttribute('height', (bottom - y).toFixed(1));
      liquid.setAttribute('fill', f > .92 ? color : fadeColor(color));
    }

    function changeMass(delta) {
      if (activeTab !== 'solid' || state.solid.step >= 1) return;
      setMass(Math.max(0, state.solid.weighed + delta));
    }

    function setMass(target) {
      if (state.solid.step >= 1) return;
      const from = state.solid.displayedWeight;
      const to = Math.max(0, target);
      state.solid.weighed = to;
      const start = performance.now();
      const diff = to - from;
      const bigChange = Math.abs(diff) >= 1;
      const duration = bigChange ? 300 : 160;
      const sign = diff >= 0 ? 1 : -1;
      let overshoot = bigChange ? sign * Math.min(Math.abs(diff) * 0.025, Math.max(0.02, Math.abs(to) * 0.018)) : 0;
      if (to === 0 && overshoot < 0) overshoot = 0;
      function tick(now) {
        const t = Math.min((now - start) / duration, 1);
        if (bigChange) {
          if (t < .45) {
            const p = t / .45;
            const ease = 1 - Math.pow(1 - p, 3);
            state.solid.displayedWeight = from + ((to + overshoot) - from) * ease;
          } else {
            const q = (t - .45) / .55;
            state.solid.displayedWeight = to + overshoot * Math.exp(-4.2 * q) * Math.cos(q * Math.PI * 4);
          }
        } else {
          state.solid.displayedWeight = from + (to - from) * (1 - Math.pow(1 - t, 3));
        }
        updateSolidSvg();
        if (t < 1) rafId = requestAnimationFrame(tick);
        else { state.solid.displayedWeight = to; if (isSolidMassOk()) state.solid.step = Math.max(state.solid.step,1); renderAll(); }
      }
      cancelAnimationFrame(rafId);
      rafId = requestAnimationFrame(tick);
    }

    function startMixingDiffusion(tab) {
      const targetStep = tab === 'solid' ? 6 : 5;
      const s = state[tab];
      const start = performance.now();
      s.mixProgress = 0;
      el.status.textContent = '倒置混勻中：溶液顏色正逐漸擴散均勻。';
      cancelAnimationFrame(rafId);
      function tick(now) {
        const t = Math.min((now - start) / 2600, 1);
        const eased = 1 - Math.pow(1 - t, 2.2);
        s.mixProgress = eased;
        if (tab === 'solid') updateSolidSvg();
        else updateDiluteSvg();
        if (t < 1) {
          rafId = requestAnimationFrame(tick);
        } else {
          s.mixProgress = 1;
          s.step = Math.max(s.step, targetStep);
          s.mixed = true;
          s.reportReady = true;
          el.status.textContent = '✓ 混勻完成，可點選「📊 配製誤差報告」。';
          renderAll();
        }
      }
      rafId = requestAnimationFrame(tick);
    }

    function runSolidDissolveSequence() {
      const s = state.solid;
      s.step = Math.max(s.step,2);
      s.powderVisible = true;
      renderAll();
      playSceneAnim('anim-powder');
      el.status.textContent = '粉末正從秤盤移入燒杯，接著加入蒸餾水溶解。';
      setTimeout(() => {
        s.powderVisible = false;
        animateLevel('solid','beakerLevel',0,.62,600);
        el.status.textContent = '燒杯內液體體積增加，固體開始溶解。';
      }, 500);
      setTimeout(() => {
        renderAll();
        playSceneAnim('anim-stir');
        el.status.textContent = '攪拌棒沿杯壁畫圓，使固體完全溶解。';
      }, 800);
      setTimeout(renderAll, 1450);
    }

    function runSolidPourSequence() {
      const s = state.solid;
      s.step = Math.max(s.step,3);
      renderAll();
      el.status.textContent = '將燒杯內溶液轉置到容量瓶：燒杯液體減少，容量瓶液體增加。';
      showTransferArrow(true);
      animateTwoLevels('solid','beakerLevel',s.beakerLevel,.05,'flaskLevel',s.flaskLevel,.50,1100, () => {
        showTransferArrow(false);
        renderAll();
      });
    }

    function showTransferArrow(show) {
      const a = document.getElementById('main-transfer-arrow');
      if (!a) return;
      a.style.transition = 'opacity .35s ease';
      a.style.opacity = show ? '1' : '0';
    }

    function showRinseAddWater(show) {
      const label = document.getElementById('main-rinse-addwater');
      if (!label) return;
      label.style.transition = 'opacity .3s ease';
      label.style.opacity = show ? '1' : '0';
    }

    function runDiluteTransferSequence() {
      const d = state.dilute;
      if (d.transferInProgress) return;
      d.transferred = true;
      d.transferInProgress = true;
      d.transferredVolume = d.pipetteVolume || dilutionV1();
      renderAll();
      el.status.textContent = '放液中：吸量管母液注入容量瓶。';
      showDiluteTransferArrow(true);
      animateTwoLevels('dilute','pipetteVolume',d.pipetteVolume,0,'flaskLevel',d.flaskLevel,.48,1000, () => {
        showDiluteTransferArrow(false);
        d.awaitingTransfer = false;
        d.transferInProgress = false;
        d.step = Math.max(d.step,3);
        d.warning = '✓ 已注入容量瓶，請進入定容對位。';
        renderAll();
        el.status.textContent = '✓ 已注入容量瓶，請進入定容對位。';
      });
    }

    function showDiluteTransferArrow(show) {
      const arrow = document.getElementById('main-dilute-transfer-arrow');
      if (!arrow) return;
      arrow.style.transition = 'opacity .35s ease';
      arrow.style.opacity = show ? '1' : '0';
    }

    function runFillToMark(tab) {
      const obj = state[tab];
      const from = obj.flaskLevel || 0;
      el.status.textContent = '正在加水至接近刻度線…';
      requestMeniscusFullscreen();
      animateLevel(tab,'flaskLevel',from,.92,1500);
      setTimeout(() => {
        el.status.textContent = '請對位彎月面，確定後完成定容。';
        openMeniscus(tab);
      }, 1500);
    }

    function animateLevel(tab, key, from, to, duration, done) {
      const obj = state[tab];
      const start = performance.now();
      cancelAnimationFrame(rafId);
      function tick(now) {
        const t = Math.min((now - start) / duration, 1);
        const eased = t < .5 ? 2*t*t : 1 - Math.pow(-2*t+2,2)/2;
        obj[key] = from + (to - from) * eased;
        updateSvgState();
        if (t < 1) rafId = requestAnimationFrame(tick);
        else {
          obj[key] = to;
          updateSvgState();
          if (done) done();
        }
      }
      rafId = requestAnimationFrame(tick);
    }

    function animateTwoLevels(tab, keyA, fromA, toA, keyB, fromB, toB, duration, done) {
      const obj = state[tab];
      const start = performance.now();
      cancelAnimationFrame(rafId);
      function tick(now) {
        const t = Math.min((now - start) / duration, 1);
        const eased = t < .5 ? 2*t*t : 1 - Math.pow(-2*t+2,2)/2;
        obj[keyA] = fromA + (toA - fromA) * eased;
        obj[keyB] = fromB + (toB - fromB) * eased;
        updateSvgState();
        if (t < 1) rafId = requestAnimationFrame(tick);
        else {
          obj[keyA] = toA;
          obj[keyB] = toB;
          updateSvgState();
          if (done) done();
        }
      }
      rafId = requestAnimationFrame(tick);
    }

    function rinseBeaker() {
      if (state.solid.rinseCount < 3) state.solid.rinseCount++;
      state.solid.step = Math.max(state.solid.step,3);
      renderAll();
      el.status.textContent = `潤洗第 ${state.solid.rinseCount} 次（1/2）：加入少量蒸餾水，燒杯體積增加。`;
      showRinseAddWater(true);
      const startLevel = state.solid.beakerLevel;
      animateLevel('solid','beakerLevel', startLevel, .30, 800, () => {
        showRinseAddWater(false);
        setTimeout(() => {
          el.status.textContent = `潤洗第 ${state.solid.rinseCount} 次（2/2）：將潤洗液轉入容量瓶。`;
          showTransferArrow(true);
          const next = Math.min(.90, state.solid.flaskLevel + .05);
          animateTwoLevels('solid','beakerLevel',.30,.03,'flaskLevel', state.solid.flaskLevel, next, 900, () => {
            showTransferArrow(false);
            if (state.solid.rinseCount >= 3) state.solid.step = Math.max(state.solid.step,4);
            renderAll();
          });
        }, 350);
      });
    }

    function bindBulbButton(node, mode) {
      if (!node) return;
      node.addEventListener('pointerdown', e => {
        e.preventDefault();
        node.setPointerCapture?.(e.pointerId);
        startBulbHold(mode);
      });
      node.addEventListener('pointerup', stopBulbHold);
      node.addEventListener('pointercancel', stopBulbHold);
      node.addEventListener('pointerleave', e => { if (e.buttons) stopBulbHold(); });
    }

    function bindHoldButton(node, mode) {
      bindBulbButton(node, mode);
    }

    function bindAllBulbControls(root = document) {
      root.querySelectorAll('[data-bulb]').forEach(g => bindBulbButton(g, g.dataset.bulb));
    }

    function startBulbHold(mode) {
      if (activeTab !== 'dilute' || state.dilute.step >= 3) {
        if (activeTab === 'dilute') showLockedStepHint();
        return;
      }
      const d = state.dilute;
      if (mode === 'E' && d.awaitingTransfer) {
        runDiluteTransferSequence();
        return;
      }
      if (mode === 'S' && d.stock === 'hcl' && !d.waterAdded) { triggerHclWarning(); return; }
      if (mode === 'S' && (d.bulbVacuum || 0) <= .001) {
        d.warning = '負壓不足，請先按住 A 使吸球變扁蓄壓。';
        renderAll();
        return;
      }
      if (mode === 'E' && d.pipetteVolume <= 0) {
        d.warning = '未吸液，無法放液。';
        renderAll();
        return;
      }
      bulbMode = mode;
      bulbLastTime = performance.now();
      cancelAnimationFrame(bulbRafId);
      bulbRafId = requestAnimationFrame(updateBulbHold);
    }

    function updateBulbHold(now) {
      if (!bulbMode) return;
      const d = state.dilute;
      const dt = Math.min((now - bulbLastTime) / 1000, .08);
      bulbLastTime = now;
      if (bulbMode === 'A') {
        d.bulbVacuum = Math.min(1, (d.bulbVacuum || 0) + bulbP().vacChargePerSec * dt);
        d.bulbVented = d.bulbVacuum > .001;
        d.warning = '按住 A：吸球左右變扁蓄積負壓。';
      } else if (bulbMode === 'S') {
        const usedVac = Math.min(d.bulbVacuum || 0, bulbP().vacUseS * dt);
        d.bulbVacuum = Math.max(0, (d.bulbVacuum || 0) - usedVac);
        d.pipetteVolume = Math.min(bulbP().pipetteMaxMl, d.pipetteVolume + bulbP().mlPerVacuum * usedVac);
        d.bulbVented = d.bulbVacuum > .001;
        if (d.bulbVacuum <= .001) {
          d.warning = '負壓耗盡，吸球已鼓回，請再按 A。';
          bulbMode = null;
        } else {
          d.warning = d.pipetteVolume >= 25 ? '已達吸量管最高刻度，請按住 E 放液微調。' : '按住 S 吸液中，吸球緩緩鼓起。';
        }
        if (d.pipetteVolume >= 25) bulbMode = null;
      } else if (bulbMode === 'E') {
        const target = dilutionV1();
        const before = d.pipetteVolume;
        d.pipetteVolume = Math.max(0, d.pipetteVolume - 1.5 * dt);
        d.warning = '按住 E 放液微調。';
        if (before > target && d.pipetteVolume <= target + .1) {
          d.pipetteVolume = target;
          d.pipetteTargetReached = true;
          d.step = Math.max(d.step,2);
          d.warning = '✓ 已達所需刻度，可按「停在刻度」確認。';
          bulbMode = null;
        } else if (d.pipetteVolume <= 0) {
          d.warning = '吸量管內液體已排空，請重新吸取母液。';
          bulbMode = null;
        }
      }
      updateDiluteSvg();
      if (bulbMode) bulbRafId = requestAnimationFrame(updateBulbHold);
      else renderAll();
    }

    function stopBulbHold() {
      if (!bulbMode && state.dilute.transferInProgress) return;
      bulbMode = null;
      cancelAnimationFrame(bulbRafId);
      updateBulbVisual();
      renderAll();
    }

    function updateBulbVisual() {
      const v = Math.max(0, Math.min(1, state.dilute.bulbVacuum || 0));
      const sx = 1 - 0.26 * v;
      const sy = 1 + 0.06 * v;
      document.querySelectorAll('[id$="-bulb-body"]').forEach(body => {
        body.style.transformBox = 'fill-box';
        body.style.transformOrigin = 'center';
        body.style.transform = `scaleX(${sx.toFixed(3)}) scaleY(${sy.toFixed(3)})`;
      });
    }

    function pipetteStop() {
      if (activeTab !== 'dilute') return;
      const d = state.dilute;
      if (Math.abs(d.pipetteVolume - dilutionV1()) > .15) return;
      d.pipetteVolume = dilutionV1();
      d.pipetteTargetReached = true;
      d.step = Math.max(d.step,2);
      d.warning = '已停在所需刻度線，可進入 S3 注入容量瓶。';
      renderAll();
    }

    function openPipetteZoom() {
      if (activeTab !== 'dilute' || state.dilute.step < 1 || state.dilute.step >= 3) return;
      const BULB_Y = 20;
      const PIPE_Y = BULB_Y + 352;
      const st = STOCKS[state.dilute.stock];
      const reservoir = `<g id="pz-stock-reservoir" stroke="#111" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" opacity=".96">
        <path d="M78 612 L78 696 Q180 714 282 696 L282 612" fill="url(#glassTube)" opacity=".70"/>
        <path d="M82 652 C122 640 238 640 278 652 L278 696 Q180 710 82 696 Z" fill="${st.color}" stroke="none" opacity=".48"/>
        <ellipse cx="180" cy="652" rx="98" ry="13" fill="${st.meniscus}" stroke="#37637a" stroke-width="1.8" opacity=".72"/>
        <path d="M78 612 L78 696 Q180 714 282 696 L282 612" fill="none"/>
        <ellipse cx="180" cy="612" rx="104" ry="15" fill="none" stroke="#111" stroke-width="3"/>
      </g>`;
      el.pzPipetteSvg.innerHTML = `${svgDefs()}${reservoir}<g id="pz-assembly">${safetyBulbSvg('pz',180,BULB_Y)}${pipetteSvg('pz',180,PIPE_Y,25)}</g>`;
      el.pzBulbSvg.innerHTML = `${svgDefs()}${safetyBulbSvg('pzbig',160,40)}`;
      bindAllBulbControls(el.pipetteZoom);
      el.pipetteZoom.classList.add('show');
      el.pipetteZoom.setAttribute('aria-hidden','false');
      requestPipetteZoomFullscreen();
      const lbl = document.getElementById('pz-pipette-volume-label');
      if (lbl) lbl.style.display = 'none';
      const lblHi = document.getElementById('pz-pipette-volume-highlight');
      if (lblHi) lblHi.style.display = 'none';
      updateDiluteSvg();
      updateBulbVisual();
      syncPipetteZoomReadout();
      updateEHighlight();
    }

    function requestPipetteZoomFullscreen() {
      if (document.fullscreenElement || !document.documentElement.requestFullscreen) return;
      pipetteZoomRequestedFullscreen = true;
      document.documentElement.requestFullscreen().catch(() => { pipetteZoomRequestedFullscreen = false; });
    }

    function closePipetteZoom() {
      stopBulbHold();
      el.pipetteZoom.classList.remove('show');
      el.pipetteZoom.setAttribute('aria-hidden','true');
      if (pipetteZoomRequestedFullscreen && document.fullscreenElement && document.exitFullscreen) {
        document.exitFullscreen().catch(() => {});
      }
      pipetteZoomRequestedFullscreen = false;
    }

    function syncPipetteZoomReadout() {
      if (!el.pzReadout || !el.pipetteZoom || !el.pipetteZoom.classList.contains('show')) return;
      const d = state.dilute;
      const target = dilutionV1();
      const aligned = Math.abs(d.pipetteVolume - target) <= .1;
      el.pzReadout.textContent = `目前吸取 ${d.pipetteVolume.toFixed(1)} / 需 ${target.toFixed(1)} mL${aligned ? '　✓ 已對齊' : ''}`;
      if (el.pzBar) el.pzBar.classList.toggle('aligned', aligned);
      const stop = document.getElementById('pzStop');
      if (stop) stop.disabled = !aligned;
    }

    function triggerHclWarning() {
      el.warning.classList.add('show');
      console.log('安全警告：HCl 不可先加入空容量瓶，應先加水再加酸。');
    }

    function playSceneAnim(classes) {
      el.scene.classList.remove('anim-stir','anim-transfer','anim-invert','anim-powder');
      void el.scene.getBoundingClientRect();
      classes.split(' ').forEach(cls => el.scene.classList.add(cls));
      setTimeout(() => el.scene.classList.remove('anim-stir','anim-transfer','anim-invert','anim-powder'), 2600);
    }

    function openMeniscus(tab) {
      pendingMeniscusTab = tab;
      meniscusY = MARK_Y + 110;
      setMeniscusView(state[tab].meniscus || 'level');
      el.meniscus.classList.add('show');
      el.meniscus.setAttribute('aria-hidden','false');
      requestMeniscusFullscreen();
      renderZoomLiquid();
    }

    function requestMeniscusFullscreen() {
      if (document.fullscreenElement || !document.documentElement.requestFullscreen) return;
      meniscusRequestedFullscreen = true;
      document.documentElement.requestFullscreen().catch(() => { meniscusRequestedFullscreen = false; });
    }

    function closeMeniscus() {
      cancelAnimationFrame(meniscusFillRaf);
      stopWaterHold();
      el.meniscus.classList.remove('show');
      el.meniscus.setAttribute('aria-hidden','true');
      if (meniscusRequestedFullscreen && document.fullscreenElement && document.exitFullscreen) {
        document.exitFullscreen().catch(() => {});
      }
      meniscusRequestedFullscreen = false;
    }

    function confirmMeniscus() {
      const tab = pendingMeniscusTab;
      if (tab === 'solid') state.solid.step = Math.max(state.solid.step,5);
      if (tab === 'dilute') state.dilute.step = Math.max(state.dilute.step,4);
      closeMeniscus();
      animateLevel(tab,'flaskLevel', state[tab].flaskLevel, 1, 400, renderAll);
    }

    function setMeniscusView(view) {
      state[pendingMeniscusTab].meniscus = view;
      const eyeY = view === 'high' ? 214 : view === 'low' ? 386 : MARK_Y;
      document.querySelectorAll('.meniscus-eye button').forEach(btn => btn.classList.toggle('active', btn.dataset.view === view));
      const line = document.getElementById('eyeLine');
      const dot = document.getElementById('eyeDot');
      if (line) {
        line.setAttribute('y1', eyeY);
        line.setAttribute('y2', MARK_Y);
      }
      if (dot) dot.setAttribute('cy', eyeY);
      renderZoomLiquid();
    }

    function targetVolumeLabel() {
      return (state[pendingMeniscusTab].volume || 250).toFixed(0);
    }

    function clampMeniscusY(y) {
      return Math.max(MARK_Y - 28, Math.min(NECK_BOTTOM, y));
    }

    function curveTopPath(bottomY) {
      const edgeY = bottomY - MENISCUS_DIP;
      const controlY = bottomY + MENISCUS_DIP;
      return {
        edgeY,
        controlY,
        top:`M114 ${edgeY.toFixed(1)} Q160 ${controlY.toFixed(1)} 206 ${edgeY.toFixed(1)}`
      };
    }

    function renderZoomLiquid() {
      const bottomY = meniscusY;
      const { edgeY, controlY, top } = curveTopPath(bottomY);
      const fill = document.getElementById('zoomLiquidFill');
      const men = document.getElementById('zoomMeniscus');
      const hi = document.getElementById('zoomMeniscusHighlight');
      const glow = document.getElementById('zoomAlignGlow');
      const readout = document.getElementById('meniscusReadout');
      if (!fill || !men || !glow || !readout) return;
      const diff = bottomY - MARK_Y;
      const aligned = Math.abs(diff) <= 5;
      const over = diff < -5;
      const color = over ? 'rgba(200,50,74,0.32)' : pendingMeniscusTab === 'solid' ? solidFlaskLiquidColor() : diluteFlaskLiquidColor();
      fill.setAttribute('d', `${top} L206 ${NECK_BOTTOM} L114 ${NECK_BOTTOM} Z`);
      fill.setAttribute('fill', color);
      men.setAttribute('d', top);
      men.setAttribute('stroke', over ? '#C8324A' : '#3978b6');
      if (hi) hi.setAttribute('d', `M128 ${(edgeY+4).toFixed(1)} Q160 ${(controlY-7).toFixed(1)} 192 ${(edgeY+4).toFixed(1)}`);
      glow.setAttribute('opacity', aligned && !over ? '0.5' : '0');
      const delta = meniscusDeltaMl(state[pendingMeniscusTab].meniscus || 'level');
      const vol = targetVolumeLabel();
      readout.classList.toggle('meniscus-status-aligned', aligned && !over);
      readout.classList.toggle('meniscus-status-over', over);
      readout.textContent = `容量瓶 ${vol} mL｜ΔV ${signed(delta)} mL`
        + (aligned && !over ? '　✓ 曲線中心已對齊刻度線' : over ? '　過量' : '　尚未到刻度線');
    }

    function addWater() {
      meniscusY = clampMeniscusY(meniscusY - FILL_STEP_PIX);
      renderZoomLiquid();
    }

    function startWaterHold() {
      waterHoldLast = performance.now();
      cancelAnimationFrame(waterHoldRaf);
      waterHoldRaf = requestAnimationFrame(waterHoldTick);
    }

    function waterHoldTick(now) {
      const dt = Math.min((now - waterHoldLast) / 1000, .05);
      waterHoldLast = now;
      meniscusY = clampMeniscusY(meniscusY - HOLD_PIX_PER_SEC * dt);
      renderZoomLiquid();
      waterHoldRaf = requestAnimationFrame(waterHoldTick);
    }

    function stopWaterHold() {
      cancelAnimationFrame(waterHoldRaf);
      waterHoldRaf = null;
    }

    function fillToMark() {
      stopWaterHold();
      cancelAnimationFrame(meniscusFillRaf);
      const from = meniscusY;
      const to = MARK_Y;
      const t0 = performance.now();
      function tick(now) {
        const t = Math.min((now - t0) / 600, 1);
        meniscusY = from + (to - from) * (1 - Math.pow(1 - t, 3));
        renderZoomLiquid();
        if (t < 1) meniscusFillRaf = requestAnimationFrame(tick);
        else {
          meniscusY = MARK_Y;
          renderZoomLiquid();
        }
      }
      meniscusFillRaf = requestAnimationFrame(tick);
    }

    function updateGlobalStatus() {
      const tabName = activeTab === 'solid' ? '固體溶質配製' : activeTab === 'dilute' ? '稀釋配製' : '儀器精度說明';
      if (activeTab !== 'precision') {
        el.status.textContent = activeTab === 'solid' ? solidHint() : diluteHint();
        el.controlStatus.textContent = `目前在「${tabName}」分頁。完成所有步驟後可開啟配製誤差報告。`;
      }
      const ready = activeTab === 'solid' ? state.solid.reportReady : activeTab === 'dilute' ? state.dilute.reportReady : false;
      el.btnReport.classList.toggle('report-ready', ready);
      el.btnReport.textContent = ready ? '📊 配製誤差報告' : '📊 誤差報告';
      el.btnReport.disabled = activeTab === 'precision';
    }

    function solidHint() {
      const s = state.solid;
      if (!isSolidMassOk()) return `S1：用電子秤按鈕或「設為目標」秤取 ${solidTargetMass().toFixed(2)} g，達 ±0.05 g 內會出現綠色勾。`;
      if (s.step < 2) return 'S2：將固體倒入燒杯，加水並以攪拌棒溶解。';
      if (s.step < 3) return 'S3：將溶液倒入容量瓶，燒杯會殘留約 5%。';
      if (s.step < 4) return 'S4：加入少量蒸餾水潤洗燒杯，最多 3 次；示意殘留會快速降低。';
      if (s.step < 5) return 'S5：加水至刻度線，並用彎月面 overlay 選擇視線高度。';
      if (s.step < 6) return 'S6：倒置混勻 3 次，使容量瓶內溶液均勻。';
      return '已完成配製，可查看配製誤差報告。';
    }

    function diluteHint() {
      const d = state.dilute;
      if (d.stock === 'hcl' && !d.waterAdded) return 'HCl 稀釋安全重點：容量瓶必須先加入約 1/3 體積蒸餾水，再加入酸。';
      if (d.step < 1) return 'S1：容量瓶先預裝約 1/3 體積蒸餾水。';
      if (d.step < 2) return 'S2：安全吸球依 A 蓄壓 → S 吸液 → E 放液，請按住操作，停在所需刻度線。';
      if (d.awaitingTransfer) return 'S3：請按住安全吸球 E 鈕，將吸量管內母液放入容量瓶。';
      if (d.step < 3) return 'S3：將吸量管中的母液注入容量瓶。';
      if (d.step < 4) return 'S4：加水至刻度線，並調整彎月面視線。';
      if (d.step < 5) return 'S5：倒置混勻 3 次。';
      return '已完成稀釋配製，可查看配製誤差報告。';
    }

    function solidTargetMass() {
      if (protectedData.solid.targetMass != null) return protectedData.solid.targetMass;
      return (effectiveMolarMass() || 0) * state.solid.conc * (state.solid.volume / 1000);
    }
    function effectiveMolarMass() {
      const s = state.solid;
      const sol = SOLUTES[s.solute];
      return molarOf();
    }
    function isSolidMassOk() { return Math.abs(state.solid.weighed - solidTargetMass()) <= .05; }
    function currentSolidLiquidColor() { return state.solid.step >= 5 ? SOLUTES[state.solid.solute].dilute : SOLUTES[state.solid.solute].color; }
    function rinseResidueColor() {
      const base = SOLUTES[state.solid.solute].color;
      const clear = 'rgba(235,246,255,0.16)';
      const washSteps = [0, .18, .58, .92];
      const t = washSteps[Math.min(state.solid.rinseCount, 3)] || 0;
      return blendRgba(base, clear, t);
    }
    function solidFlaskLiquidColor() {
      const sol = SOLUTES[state.solid.solute];
      if (state.solid.solute === 'nacl' || state.solid.solute === 'naoh') return colorlessSolutionColor();
      if (state.solid.step >= 6) return sol.dilute;
      return blendRgba(sol.color, sol.dilute, state.solid.mixProgress || 0);
    }
    function diluteFlaskLiquidColor() {
      const st = STOCKS[state.dilute.stock];
      if (!state.dilute.transferred) return colorlessSolutionColor();
      if (state.dilute.stock === 'hcl') return colorlessSolutionColor();
      if (state.dilute.step >= 5) return diluteFinalColor(state.dilute.stock);
      return blendRgba(st.color, diluteFinalColor(state.dilute.stock), state.dilute.mixProgress || 0);
    }
    function colorlessSolutionColor() {
      return 'rgba(155,205,238,0.42)';
    }
    function diluteFinalColor(key) {
      if (key === 'cuso4') return 'rgba(35,90,200,0.32)';
      if (key === 'kmno4') return 'rgba(180,120,220,0.45)';
      return 'rgba(180,200,215,0.18)';
    }
    function parseRgba(color) {
      const match = String(color).match(/rgba?\(([^)]+)\)/);
      if (!match) return { r:180, g:200, b:215, a:.18 };
      const parts = match[1].split(',').map(v => Number(v.trim()));
      return { r:parts[0] || 0, g:parts[1] || 0, b:parts[2] || 0, a:parts.length > 3 ? parts[3] : 1 };
    }
    function blendRgba(from, to, t) {
      const a = parseRgba(from);
      const b = parseRgba(to);
      const p = Math.max(0, Math.min(t, 1));
      const mix = (x, y) => x + (y - x) * p;
      return `rgba(${Math.round(mix(a.r,b.r))},${Math.round(mix(a.g,b.g))},${Math.round(mix(a.b,b.b))},${mix(a.a,b.a).toFixed(3)})`;
    }
    function solidPowderColor() {
      const key = state.solid.solute;
      if (key === 'kmno4') return '#6E1F9E';
      if (key === 'cuso4_5h2o') return '#2B66C8';
      return '#F0F2F5';
    }
    function solidPowderStroke() {
      const key = state.solid.solute;
      if (key === 'kmno4') return '#4A1268';
      if (key === 'cuso4_5h2o') return '#1B4A9A';
      return '#8AA0B4';
    }
    function fadeColor(color) { return color.replace(/0\.\d+\)/, '0.28)').replace(/0\.72\)/,'0.32)'); }
    function dilutionV1() {
      const d = state.dilute;
      return protectedData.dilute.v1 != null
        ? protectedData.dilute.v1
        : d.targetConc * d.volume / (stockConcOf() || 1);
    }
    function recommendPipette(v1) {
      if (protectedData.dilute.recommend) return protectedData.dilute.recommend;
      if (v1 < .5) return { warn:true, text:'所需體積太小，誤差過大，建議改用較濃容量瓶或較稀母液。' };
      if (v1 <= 5) return { warn:false, text:'推薦：5 mL 吸量管。' };
      if (v1 <= 10) return { warn:false, text:'推薦：10 mL 吸量管。' };
      if (v1 <= 25) return { warn:false, text:'推薦：25 mL 吸量管。' };
      return { warn:true, text:'需分多次吸取，建議改用較大容量瓶或較稀母液。' };
    }
    function meniscusName(v) { return v === 'high' ? '視線過高' : v === 'low' ? '視線過低' : '平視'; }
    function meniscusDeltaMl(v) { return v === 'high' ? -0.5 : v === 'low' ? 0.5 : 0; }
    function stripTags(html) { return html.replace(/<[^>]*>/g,''); }
    function formatConc(c) {
      const found = CONC_OPTIONS.find(opt => Math.abs(opt.value - c) < .001);
      return found ? found.label.replace(' M','') : c.toFixed(3);
    }
    function formatMl(v) { return v < 10 ? v.toFixed(1) : v.toFixed(0); }

    function openQuickCalc(type) {
      quickCalcType = type;
      quickCalcSteps = type === 'solid' ? buildSolidQuickCalcSteps() : buildDiluteQuickCalcSteps();
      el.quickCalc.classList.add('show');
      el.quickCalc.setAttribute('aria-hidden','false');
      showQuickCalcStep(0);
    }

    function closeQuickCalc() {
      el.quickCalc.classList.remove('show');
      el.quickCalc.setAttribute('aria-hidden','true');
    }

    function quickCalcPrev() {
      if (quickCalcIndex <= 0) closeQuickCalc();
      else showQuickCalcStep(quickCalcIndex - 1);
    }

    function quickCalcNext() {
      if (quickCalcShowAll) return;
      if (quickCalcIndex >= quickCalcSteps.length - 1) {
        showQuickCalcAll();
        return;
      }
      showQuickCalcStep(quickCalcIndex + 1);
    }

    function showQuickCalcStep(index) {
      quickCalcIndex = Math.max(0, Math.min(index, quickCalcSteps.length - 1));
      quickCalcShowAll = false;
      document.getElementById('btnQuickCalcPrev').textContent = quickCalcIndex === 0 ? '離開 ←' : '上一步 ←';
      document.getElementById('btnQuickCalcStep').classList.remove('hidden');
      document.getElementById('btnQuickCalcStep').textContent = quickCalcIndex >= quickCalcSteps.length - 1 ? '計算全步驟 →' : '下一步 →';
      document.getElementById('btnQuickCalcDone').classList.toggle('hidden', quickCalcIndex < quickCalcSteps.length - 1);
      document.getElementById('btnQuickCalcDirectDone').textContent = '計算全步驟';
      renderQuickCalcStep();
    }

    function showQuickCalcAll() {
      quickCalcIndex = Math.max(0, quickCalcSteps.length - 1);
      quickCalcShowAll = true;
      document.getElementById('btnQuickCalcPrev').textContent = '上一步 ←';
      document.getElementById('btnQuickCalcStep').classList.add('hidden');
      document.getElementById('btnQuickCalcStep').textContent = '下一步 →';
      document.getElementById('btnQuickCalcDone').classList.remove('hidden');
      document.getElementById('btnQuickCalcDirectDone').textContent = '已顯示全步驟';
      renderQuickCalcStep('last');
    }

    function quickCalcEnter() {
      if (quickCalcShowAll || quickCalcIndex >= quickCalcSteps.length - 1) {
        closeQuickCalc();
      } else {
        showQuickCalcAll();
      }
    }

    function buildSolidQuickCalcSteps() {
      const s = state.solid, sol = SOLUTES[s.solute];
      const vL = s.volume / 1000, W = solidTargetMass();
      return [
        { title:'步驟 1：讀取題目條件', bullets:[
          `溶質：${sol.name}`,
          `莫耳質量 M = ${(molarOf()||0).toFixed(2)} g/mol`,
          `目標濃度 C<sub>M</sub> = ${formatConc(s.conc)} M`,
          `容量瓶體積 V = ${s.volume} mL`
        ]},
        { title:'步驟 2：體積單位換算',
          tex:`V = ${s.volume}\\ \\mathrm{mL} = ${vL.toFixed(3)}\\ \\mathrm{L}` },
        { title:'步驟 3：代入固體配製公式',
          tex:`W = C_{M}\\times M\\times V = ${formatConc(s.conc)}\\times ${(molarOf()||0).toFixed(2)}\\times ${vL.toFixed(3)}` },
        { title:'步驟 4：得到目標質量',
          tex:`W = ${W.toFixed(2)}\\ \\mathrm{g}`,
          result:`需秤取 W = ${W.toFixed(2)} g` }
      ];
    }

    function buildDiluteQuickCalcSteps() {
      const d = state.dilute, st = STOCKS[d.stock], v1 = dilutionV1();
      return [
        { title:'步驟 1：讀取稀釋條件', bullets:[
          `母液 ${st.name}：C<sub>M1</sub> = ${Number(st.concLabel).toFixed(1)} M`,
          `目標濃度 C<sub>M2</sub> = ${formatConc(d.targetConc)} M`,
          `目標體積 V<sub>2</sub> = ${d.volume} mL`
        ]},
        { title:'步驟 2：稀釋公式整理',
          tex:`C_{M1}V_1 = C_{M2}V_2 \\;\\Rightarrow\\; V_1=\\dfrac{C_{M2}\\,V_2}{C_{M1}}` },
        { title:'步驟 3：代入數值',
          tex:`V_1=\\dfrac{${formatConc(d.targetConc)}\\times ${d.volume}}{${Number(st.concLabel).toFixed(1)}}` },
        { title:'步驟 4：應吸取母液體積',
          tex:`V_1 = ${v1.toFixed(2)}\\ \\mathrm{mL}`,
          result:`需吸取 V<sub>1</sub> = ${formatMl(v1)} mL` }
      ];
    }

    function escapeAttr(str) {
      return String(str).replace(/&/g,'&amp;').replace(/"/g,'&quot;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
    }

    function renderQuickCalcStep(scrollMode = 'step') {
      const host = el.quickCalcContent;
      if (!host || !quickCalcSteps.length) return;
      const title = quickCalcType === 'solid' ? '固體溶質配製：目標質量計算' : '稀釋配製：母液體積計算';
      host.innerHTML = `
        <div class="qc-head">
          <h2>${title}</h2>
          <p>鍵盤：← 上一步 / 離開，→ 下一步，Enter 顯示全步驟；最後一步再按 Enter 離開</p>
        </div>
        ${quickCalcSteps.map((step, i) => `
          <article class="qc-card ${i <= quickCalcIndex || quickCalcShowAll ? 'visible' : 'pending'} ${i === quickCalcIndex ? 'current' : ''}">
            <div class="qc-title">${step.title}</div>
            ${step.bullets ? `<ul class="qc-bullets">${step.bullets.map(b => `<li>${b}</li>`).join('')}</ul>` : ''}
            ${step.tex ? `<div class="qc-formula" data-tex="${escapeAttr(step.tex)}"></div>` : ''}
            ${step.result ? `<div class="qc-result">${step.result}</div>` : ''}
          </article>`).join('')}`;
      renderKatexIn(host);
      requestAnimationFrame(() => {
        const cards = host.querySelectorAll('.qc-card');
        if (scrollMode === 'top') {
          host.scrollTo({ top:0, behavior:'smooth' });
          return;
        }
        if (scrollMode === 'last' || quickCalcShowAll) {
          const last = cards[cards.length - 1];
          if (last) last.scrollIntoView({ behavior:'smooth', block:'end' });
          return;
        }
        const card = cards[quickCalcIndex];
        if (card) card.scrollIntoView({ behavior:'smooth', block:'nearest' });
      });
    }

    function openReport() {
      if (activeTab === 'precision') return;
      calcCards = activeTab === 'solid' ? buildSolidReport() : buildDiluteReport();
      calcShowAll = false;
      el.calcTitle.textContent = activeTab === 'solid' ? '固體溶質配製誤差報告' : '稀釋配製誤差報告';
      el.calcSubtitle.textContent = '依本次操作紀錄逐步分析濃度誤差';
      el.calc.classList.add('show');
      el.calc.setAttribute('aria-hidden','false');
      showCalcCards(0);
    }

    function closeCalc() {
      el.calc.classList.remove('show');
      el.calc.setAttribute('aria-hidden','true');
    }
    function calcPrev() {
      if (calcIndex <= 0) closeCalc();
      else showCalcCards(calcIndex - 1);
    }
    function calcNext() {
      if (calcShowAll) return;
      if (calcIndex >= calcCards.length - 1) {
        showCalcAll();
        return;
      }
      showCalcCards(calcIndex + 1);
    }
    function showCalcCards(index, scrollMode = 'step') {
      calcIndex = Math.max(0, Math.min(index, calcCards.length - 1));
      calcShowAll = false;
      el.calcContent.innerHTML = calcCards.map((card,i) => `<article class="calc-step-card ${i <= calcIndex ? 'visible' : ''}">
        <div class="calc-step-title">${card.title}</div>${card.html}</article>`).join('');
      document.getElementById('btnCalcPrev').textContent = calcIndex === 0 ? '離開 ←' : '上一步 ←';
      document.getElementById('btnCalcStep').classList.remove('hidden');
      document.getElementById('btnCalcStep').textContent = calcIndex >= calcCards.length - 1 ? '計算全步驟 →' : '下一步 →';
      document.getElementById('btnCalcDone').classList.toggle('hidden', calcIndex < calcCards.length - 1);
      document.getElementById('btnCalcDirectDone').textContent = '計算全步驟';
      renderKatexIn(el.calcContent);
      moveCalcReportToStep(calcIndex, scrollMode);
    }

    function showCalcAll() {
      calcIndex = Math.max(0, calcCards.length - 1);
      calcShowAll = true;
      el.calcContent.innerHTML = calcCards.map(card => `<article class="calc-step-card visible">
        <div class="calc-step-title">${card.title}</div>${card.html}</article>`).join('');
      document.getElementById('btnCalcPrev').textContent = '上一步 ←';
      document.getElementById('btnCalcStep').classList.add('hidden');
      document.getElementById('btnCalcStep').textContent = '下一步 →';
      document.getElementById('btnCalcDone').classList.remove('hidden');
      document.getElementById('btnCalcDirectDone').textContent = '已顯示全步驟';
      renderKatexIn(el.calcContent);
      moveCalcReportToStep(0, 'top');
    }

    function calcEnter() {
      if (calcShowAll || calcIndex >= calcCards.length - 1) closeCalc();
      else showCalcAll();
    }

    function moveCalcReportToStep(index, mode = 'step') {
      requestAnimationFrame(() => {
        const cards = el.calcContent.querySelectorAll('.calc-step-card');
        if (mode === 'top') {
          el.calcContent.scrollTo({ top:0, behavior:'smooth' });
          return;
        }
        const card = cards[index];
        if (card) card.scrollIntoView({ behavior:'smooth', block:'nearest' });
      });
    }

    function buildSolidReport() {
      const s = state.solid, sol = SOLUTES[s.solute], vL = s.volume / 1000;
      const theoretical = (molarOf()||0) * s.conc * vL;
      const weighed = s.weighed || solidTargetMass();
      const massErrPct = (weighed - theoretical) / theoretical * 100;
      const rinseFactor = 1 - rinseResidueArr()[Math.min(s.rinseCount,3)] / 100;
      const vActual = (s.volume + meniscusDeltaMl(s.meniscus)) / 1000;
      const cActual = (weighed / (molarOf()||1)) * rinseFactor / vActual;
      const totalErr = (cActual - s.conc) / s.conc * 100;
      return [
        { title:'卡片 1：本次配製記錄', html:`<ul>
          <li>目標：C<sub>M</sub> = ${s.conc.toFixed(2)} M，${s.volume} mL ${sol.name}</li>
          <li>使用溶質：${sol.name}</li>
          <li>W：${weighed.toFixed(2)} g</li>
          <li>潤洗次數：${s.rinseCount} 次</li>
          <li>彎月面對位：${meniscusName(s.meniscus)}</li>
          <li>倒置混勻：${s.mixed ? '已完成（3 次）' : '尚未完成'}</li>
        </ul>` },
        { title:'卡片 2：理論計算', html:`<div class="katex-display-wrap" data-tex="W_{理論}= C_{M}\\times M\\times V = ${s.conc.toFixed(2)} \\times ${(molarOf()||0).toFixed(2)} \\times ${vL.toFixed(3)} = ${theoretical.toFixed(2)}\\,\\mathrm{g}"></div>
          <p>固體配製使用莫耳質量 M、目標濃度 C<sub>M</sub> 與容量瓶總體積相乘。CuSO<sub>4</sub> 與 CuSO<sub>4</sub>·5H<sub>2</sub>O 為不同溶質，需選用對應莫耳質量。</p>` },
        { title:'卡片 3：每項誤差分析', html:`<table class="calc-table">
          <thead><tr><th>項目</th><th>理論值</th><th>實際值</th><th>影響</th></tr></thead>
          <tbody>
            <tr><td>W 誤差</td><td>${theoretical.toFixed(2)} g</td><td>${weighed.toFixed(2)} g</td><td>${signed(massErrPct)}%</td></tr>
            <tr><td>溶質莫耳質量</td><td>${sol.plain}</td><td>${(molarOf()||0).toFixed(2)} g/mol</td><td>已依選項計算</td></tr>
            <tr><td>潤洗 ${s.rinseCount} 次（殘留 ${rinseResidueArr()[Math.min(s.rinseCount,3)]}%）</td><td>100%</td><td>${(rinseFactor*100).toFixed(4)}%</td><td>−${rinseResidueArr()[Math.min(s.rinseCount,3)]}%</td></tr>
            <tr><td>彎月面對位（${meniscusName(s.meniscus)}）</td><td>${s.volume.toFixed(2)} mL</td><td>${(vActual*1000).toFixed(2)} mL</td><td>${signed((s.volume/(vActual*1000)-1)*100)}%</td></tr>
            <tr><td>混勻完成</td><td>—</td><td>${s.mixed ? '已完成' : '尚未完成'}</td><td>未影響濃度</td></tr>
            <tr><th>總誤差</th><th>C<sub>M</sub> = ${s.conc.toFixed(3)} M</th><th>C<sub>M,實際</sub> = ${cActual.toFixed(4)} M</th><th>${signed(totalErr)}%</th></tr>
          </tbody>
        </table>` },
        { title:'卡片 4：對照表 — 若學生犯了下列錯誤', html:`<ul>
          <li>忘記潤洗（殘留 5%）：實際 C<sub>M</sub> 約 ${(s.conc*.95).toFixed(3)} M（−5.0%）。</li>
          <li>水合物與無水鹽選錯：若應使用 CuSO<sub>4</sub>·5H<sub>2</sub>O 卻用 CuSO<sub>4</sub> 的莫耳質量，濃度會明顯偏低。</li>
          <li>視線過高（讀數 +0.5 mL → 實際 V<sub>溶液</sub> = ${(s.volume-.5).toFixed(1)} mL）：實際 C<sub>M</sub> 約 ${(s.conc*s.volume/(s.volume-.5)).toFixed(4)} M（+0.10%）。</li>
        </ul>
        <div class="katex-display-wrap" data-tex="\\%\\,誤差 = \\frac{C_{M,實際}-C_{M,目標}}{C_{M,目標}}\\times 100\\%"></div>` },
        { title:'卡片 5：教學結論', html:`<ul>
          <li>CuSO<sub>4</sub> 與 CuSO<sub>4</sub>·5H<sub>2</sub>O 必須分開選擇，不能用勾選方式混用莫耳質量。</li>
          <li>精密配製須使用 A 級容量瓶與正確莫耳質量。</li>
          <li>本教材中潤洗殘留與彎月面 ±0.5 mL 為示意值，僅供誤差量級理解，非實驗室實測。</li>
        </ul>` }
      ];
    }

    function buildDiluteReport() {
      const d = state.dilute, st = STOCKS[d.stock], v1 = dilutionV1();
      const usedV1 = d.transferredVolume || d.pipetteVolume || v1;
      const pipetteErrPct = (usedV1 - v1) / v1 * 100;
      const vActual = (d.volume + meniscusDeltaMl(d.meniscus)) / 1000;
      const cActual = (stockConcOf() || Number(st.concLabel)) * usedV1 / 1000 / vActual;
      const totalErr = (cActual - d.targetConc) / d.targetConc * 100;
      return [
        { title:'卡片 1：本次配製記錄', html:`<ul>
          <li>母液：${st.name} C<sub>M1</sub> = ${st.concLabel} M</li>
          <li>目標：C<sub>M2</sub> = ${d.targetConc.toFixed(2)} M，${d.volume} mL</li>
          <li>理論吸取體積：${v1.toFixed(1)} mL</li>
          <li>吸量管讀值：${usedV1.toFixed(1)} mL</li>
          <li>容量瓶預裝水：${d.waterAdded ? '已完成' : '未完成'}</li>
          <li>彎月面對位：${meniscusName(d.meniscus)}</li>
        </ul>` },
        { title:'卡片 2：理論計算', html:`<div class="katex-display-wrap" data-tex="C_{M1}V_1=C_{M2}V_2"></div>
          <div class="katex-display-wrap" data-tex="V_1=\\frac{C_{M2}V_2}{C_{M1}}=\\frac{${d.targetConc.toFixed(2)}\\times ${d.volume}}{${Number(st.concLabel).toFixed(1)}}=${v1.toFixed(1)}\\,\\mathrm{mL}"></div>` },
        { title:'卡片 3：每項誤差分析', html:`<table class="calc-table">
          <thead><tr><th>項目</th><th>理論值</th><th>實際值</th><th>影響</th></tr></thead>
          <tbody>
            <tr><td>吸量管取液</td><td>${v1.toFixed(1)} mL</td><td>${usedV1.toFixed(1)} mL</td><td>${signed(pipetteErrPct)}%</td></tr>
            <tr><td>容量瓶預裝水</td><td>先水後酸</td><td>${d.waterAdded ? '正確 ✓' : '未完成'}</td><td>${d.waterAdded ? '安全' : '噴濺風險'}</td></tr>
            <tr><td>彎月面對位（${meniscusName(d.meniscus)}）</td><td>${d.volume.toFixed(2)} mL</td><td>${(vActual*1000).toFixed(2)} mL</td><td>${signed((d.volume/(vActual*1000)-1)*100)}%</td></tr>
            <tr><td>混勻完成</td><td>—</td><td>${d.mixed ? '已完成' : '尚未完成'}</td><td>未影響濃度</td></tr>
            <tr><th>總誤差</th><th>C<sub>M2</sub> = ${d.targetConc.toFixed(3)} M</th><th>C<sub>M,實際</sub> = ${cActual.toFixed(4)} M</th><th>${signed(totalErr)}%</th></tr>
          </tbody>
        </table>` },
        { title:'卡片 4：對照表 — 若學生犯了下列錯誤', html:`<ul>
          <li>未使用吸量管精確取液：量筒或燒杯估量會讓相對誤差顯著增加。</li>
          <li>HCl 先加入空容量瓶再加水：會局部劇烈放熱並造成噴濺。</li>
          <li>視線過高（讀數 +0.5 mL → 實際 V<sub>溶液</sub> = ${(d.volume-.5).toFixed(1)} mL）：C<sub>M</sub> 偏高約 +0.10%。</li>
        </ul>
        <div class="katex-display-wrap" data-tex="C_{M,實際}=\\frac{C_{M1}V_{1,實際}}{V_{2,實際}}"></div>` },
        { title:'卡片 5：教學結論', html:`<ul>
          <li>稀釋配製的關鍵是正確吸取母液體積，以及容量瓶定容到頸部刻度線。</li>
          <li>選用吸量管時，若 V<sub>1</sub> > 25 mL 需分多次吸取或更換實驗設計。</li>
          <li>酸稀釋要遵守先水後酸；本版只呈現安全警告，不顯示稀釋熱數值。</li>
        </ul>` }
      ];
    }

    function signed(n) {
      const v = Math.abs(n) < .005 ? 0 : n;
      return (v > 0 ? '+' : '') + v.toFixed(2);
    }

    function renderKatexIn(root) {
      if (!window.katex || !root) return;
      root.querySelectorAll('[data-tex]').forEach(node => {
        const tex = node.getAttribute('data-tex');
        try {
          katex.render(tex, node, { throwOnError:false, displayMode:true });
        } catch (err) {
          node.textContent = tex;
          console.log('KaTeX 公式渲染失敗：', err.message);
        }
      });
    }

    function drawLoading() {
      const liquid = document.getElementById('loadFlaskLiquid');
      if (!liquid) return;
      const t0 = performance.now();
      function frame(now) {
        const t = (now - t0) / 1000;
        const top = 96 - 30 * (0.5 + 0.5 * Math.sin(t * 2));
        liquid.setAttribute('y', top.toFixed(1));
        liquid.setAttribute('height', (138 - top).toFixed(1));
        loadingRafId = requestAnimationFrame(frame);
      }
      loadingRafId = requestAnimationFrame(frame);
    }

    /* ── V3.0 雙模式函式 ── */

    /* 使用者選擇模式後啟動教材 */
    function resetAllState() {
      state.solid = { solute:'kmno4', conc:0.50, volume:250, step:0, weighed:0, displayedWeight:0, rinseCount:0, meniscus:'level', mixed:false, reportReady:false, beakerLevel:0, flaskLevel:0, powderVisible:true, mixProgress:0 };
      resetDiluteProcess();
      Object.assign(state.dilute, { stock:'hcl', targetConc:0.50, volume:100 });
    }

    function startWithMode(mode) {
      displayMode = mode;
      document.body.classList.toggle('teach-mode', mode === 'teaching');
      applyModeLayout();
      resetAllState();         // 切換模式時重置所有狀態
      activeTab = 'solid';     // 回到固體 tab
      /* 同步分頁按鈕高亮，否則切換模式後 active 會留在前一個分頁 */
      document.querySelectorAll('.tab-btn').forEach(btn => btn.classList.toggle('active', btn.dataset.tab === 'solid'));
      const loading = document.getElementById('loading-screen');
      loading.classList.add('fade-out');
      setTimeout(() => { loading.style.display = 'none'; cancelAnimationFrame(loadingRafId); }, 650);
      if (!appStarted) { appStarted = true; }
      renderAll();
      /* 進場時取回兩個分頁的受保護資料；loading 動畫（650ms）足以掩護網路往返 */
      Promise.all([refreshSolidProtected(), refreshDiluteProtected()]).then(renderAll);
    }

    /* 搬移 tab-bar DOM 的旗標與輔助函式 */
    let tabBarInTopbar = false;
    const topbar   = () => document.getElementById('topbar');
    const tabBarEl = () => document.getElementById('tab-bar');
    const canvasWrapEl = () => document.getElementById('main-area');

    /* 套用模式版面：教學模式將 tab-bar 搬進 topbar；個人模式放回 main-area 前 */
    function applyModeLayout() {
      fontScale = isTeach() ? 1.18 : 1.0;
      const modeLabel = document.getElementById('modeLabel');
      if (modeLabel) modeLabel.textContent = isTeach() ? '［教學投影模式］' : '［個人模式］';
      const tb = tabBarEl();
      const tp = topbar();
      const mw = canvasWrapEl();
      if (tb && tp && mw) {
        if (isTeach() && !tabBarInTopbar) {
          tp.appendChild(tb);
          tabBarInTopbar = true;
        } else if (!isTeach() && tabBarInTopbar) {
          document.body.insertBefore(tb, mw);
          tabBarInTopbar = false;
        }
      }
    }

    /* 點標題回到進場選模式畫面，同時重置所有操作狀態 */
    function returnToModeSelect() {
      resetAllState();
      activeTab = 'solid';
      const loading = document.getElementById('loading-screen');
      loading.style.display = 'flex';
      loading.classList.remove('fade-out');
      requestAnimationFrame(drawLoading);
    }
  </script>
</body>
</html>