请实现一个以**酸碱溶液、浓度、pH与电离程度**为主题的二维或2.5D交互可视化网页。

用户在同一实验桌上自由配制两杯溶液，放置pH探针与粒子观察窗，调整浓度或稀释样品，观察宏观读数和微观组成如何共同变化。两杯样品独立可调，仪器直接作用于可见对象，形成可持续测量和比较的科学交互产品。

## 1. 核心操作与科学模型

采用25°C理想溶液模型，提供单元强酸、单元弱酸和单元强碱三种类型；弱酸Ka固定为1.00×10⁻⁵，Kw=1.00×10⁻¹⁴。不混合两杯样品，不模拟中和、滴定、弱碱或真实活度效应。强弱由模型类型决定，浓度变化不把强酸变为弱酸。

分析浓度C的合法范围为0.0001–0.100 mol/L；对数滑块调节log₁₀(C/(mol/L))，范围−4到−1、步长0.1，另提供域内六位有效数字的浓度输入。数值输入与稀释后的实际C不因滑块刻度而被静默取整，控件清楚表达当前浓度。每杯默认C=0.010 mol/L，A为强酸、B为弱酸。类型与当前C始终公开；切换类型保留当前C，编辑C保留类型，两者均表示重新配制该杯，保持仪器放置位置与另一杯不变。

强酸[H⁺]=C，强碱[OH⁻]=C，完全解离α=1。弱酸主离子浓度x=[H⁺]=(√(Ka²+4KaC)−Ka)/2，α=x/C；pH=−log₁₀[H⁺]，强碱由pOH=−log₁₀[OH⁻]、pH=14−pOH求得。另一种H⁺/OH⁻浓度按Kw互推。在本浓度范围忽略水对主离子浓度的微小修正，浓度使用mol/L，pH与α无量纲。

每杯可执行十倍稀释，使其当前C除以10并重新平衡，可重复到合法范围下限；若下一次会低于0.0001 mol/L，稀释入口禁用并解释范围，不能偷偷裁剪浓度。操作表示定量取当前原液再用水定容至十倍取样体积，示意每次制得10 mL新样，不累计杯中体积或假装无限加水。

粒子视窗显示未解离溶质与对应离子组成，α决定解离比例。固定观察体积下，浓度越低粒子示意密度越低；为可读性可用对数密度映射，但明确映射与“非真实分子计数”，附定量浓度和比例，不把图标数量当成实测分子数。微量组分可用数值与图例说明，避免取整后被解释为不存在。

## 2. 核心交互与动态反馈

两杯在实验桌上同时可见，标签和仪器附着状态清楚。选中某杯后，在该杯附近设置类型、当前C或执行稀释，只影响该杯。浓度滑块拖动中持续重算平衡并更新粒子、模型图和已接入仪器的读数，精确输入确认后执行同样的更新。重新配制与稀释的视觉动作可区分，另一杯保持自己的配方与观察状态。

pH探针支持拖放到任一杯，也可点选测量杯，浸入位置与仪表对象明确对应。探针有效浸入后持续显示该杯当前pH，配方变化时无需重复点击测量；移出液面即显示未浸入，旧读数不作为当前测量残留。切换所选杯只改变编辑对象，不自动移动探针；仪表色带和酸碱提示仅跟随有效测量。

粒子观察窗可拖到或点选附着于任一杯，始终标注所观察样品，随该杯当前状态更新。它与pH探针独立放置，用户可同时测一杯、观察另一杯。点选粒子图例时，相关组分和定量读数共同突出，形状与标签帮助区分完整分子、主离子及反离子。

十倍稀释触发一次当前浓度更新，取样与定容动效表达该操作；连续操作按每次实际新浓度计算，动效不会额外重复稀释。浓度控件随新C同步，已浸入探针与附着观察窗立即响应。理论pH–log C图显示模型曲线与两杯当前计算位置，点击或悬停可查看坐标；标明理论计算，不能把完整曲线说成用户已逐点测量。

## 3. 数值与视觉一致性

每杯的类型、当前C、主离子浓度、pH、α及粒子比例来自同一份样品状态。仪器明确标注正在测量或观察A/B，不能将编辑中的杯、探针所在杯与粒子窗对象混淆。pH读数至少显示到0.01，α与离子浓度保留足以理解差异的精度；内部计算不以显示舍入值继续推导。

两杯样品液体采用清澈一致的视觉语言，不凭类型直接染成pH色带。色带属于仪表表示；若使用其他示意着色，应有明确图例和含义。弱酸中未解离分子和离子比例随C改变，不能只把粒子整体缩少而α不变，也不能用“粒子更分散”代替定量解离关系。

理论图使用共同浓度域和pH标尺，显示每条曲线对应的模型类型与当前样品点。理论位置与实际探针读数的状态分开：探针未浸入时仍可看模型计算，但仪表不能冒充正在测量。稀释动画是操作示意，不添加未经模型计算的反应动力学或声称模拟分子真实速度。

## 4. 连续交互与状态恢复

首次打开直接进入可操作的双杯工作台，pH探针和粒子观察窗放在工具区，尚未附着样品。类型、浓度、稀释、探针与观察窗均可自由操作，无需开始阶段或提交实验。

输入超出合法范围时指出原因并保留最近合法样品，未确认的输入不改变有效测量。类型和C的修改保持仪器附着；稀释保持样品类型并更新当前C，工具移动可取消，取消后恢复原放置。操作完成与动画分离，重复点击不导致样品串台或一次操作重复计算。

提供一个“恢复默认工作台”入口，还原两杯默认配方并把仪器放回工具区。普通修改不清空另一杯。页面不要求保存测量卡、配对记录或猜测匿名身份，工具始终服务当前观察。

## 5. 科学反馈与结果解释

科学信息随当前选中的样品或仪器对象变化，明确所指A/B。结合实际C、离子浓度与α展示关系式，说明强弱与浓度的区别，以及pH、电离比例、主离子浓度为何联动。强碱从OH⁻解释pOH与pH，不套用酸的计算分支。

稀释后说明该杯当前浓度和电离状态，不把弱酸的pH变化固定为0.5，也不把α升高解释为主离子浓度升高。理论图与当前配方帮助用户自行比较；提示以实际状态和操作为依据，不出现必须完成的实验或身份指认任务。

未浸入、观察窗未附着、浓度输入无效和达到稀释下限均有就近说明，并保留可继续操作的桌面。解释区域可收起，不盖住杯子、工具或浓度控制。

## 6. 游戏风格、美学与可用性

**游戏风格：《Papers, Please》的实体桌面操作与《Potion Craft》的玻璃器皿、工具触感。** 采用“电光实验桌”概念，黄铜暖灯与青紫环境光照亮两杯溶液，二维或2.5D固定视角突出样品和真实仪器操作，素材自行创作。

- **场景与材质**：深色木桌、透明玻璃杯、黄铜探针、圆形粒子观察窗和纸质标签有可辨材质；光影形成主次，两杯液面、标签与工具始终清楚，不被装饰性案卷遮挡。
- **科学操作的游戏化呈现**：探针浸入、观察窗附着、配制与稀释具有明确操作反馈，工具与仪器读数可直接对应。浓度控件与当前杯相邻，工具位置不因选中对象而跳动。
- **观察层次与交互重点**：桌面呈现样品和工具，观察窗呈现微观比例，简洁仪表呈现pH，理论图呈现浓度关系。当前对象与对应图形联动，详情按需展开，避免等权重卡片挤占主场景。
- **颜色与信息层级**：A/B身份稳定，样品类型与C公开可读；粒子形状、颜色与图例一致，α与离子浓度分开。仪表色带配数字刻度，当前编辑、当前测量和当前观察有清楚标识。
- **反馈动效**：探针入杯后才出现有效仪表反馈，浓度调整时粒子与图形平滑响应；稀释动效清楚表达取样和定容，并与一次真实浓度更新对应。动效不伪造已完成测量或掩盖下限状态。

默认1440×900下两杯、主要工具与参数控制无需横向滚动；窄屏允许重排与纵向滚动，拖放均有点选替代。单位、刻度与文字清晰，异常同时使用文字或图标；音效可选且可静音，动效可减弱。布局、绘图技术与代码组织自行设计。

## 7. 交付要求

提供完整可运行的纯前端网页，以`index.html`为入口，通过本地HTTP服务即可打开。附源码、运行说明和实际完成的自检说明，核心流程不依赖后端或外部网络，依赖与资源随项目提供。

界面中文，浓度和各物理量的含义明确。实现方式、内部命名与代码结构自行选择，未完成或未验证部分如实说明。