排序算法可视化

请直接输出一个完整可运行的**单文件 HTML**（内联 CSS + 原生 JS）。 --- 做一个**排序算法可视化器**，用柱状图（bar chart）展示数组元素，让用户能直观看到不同排序算法的执行过程。 **功能要求：** 1. **至少 3 种排序算法**：冒泡排序（Bubble Sort）、快速排序（Quick Sort）、归并排序（Merge Sort）。可以额外加入插入排序、选择排序、堆排序等，但前三种必须有 2. **随机数据生成**：提供"生成随机数据"按钮，点击后生成一组随机高度的柱子（建议 30-80 个元素）。数组大小最好可调 3. **可视化展示**：每个数组元素用一根竖直柱子表示，高度对应数值大小。排序过程中： - 正在**比较**的元素用一种颜色高亮 - 正在**交换/写入**的元素用另一种颜色高亮 - 已经排好序的元素用第三种颜色标记 4. **播放控制**： - ▶️ 开始 / ⏸️ 暂停 按钮 - ⏭️ 单步执行（Step）按钮：每点一次只执行一步操作 - 🔄 速度控制：滑块或按钮调节动画速度（至少 3 档：慢/中/快） 5. **算法切换**：下拉菜单或按钮组选择当前算法。切换算法时保留当前数据（不重新随机），方便对比同一组数据在不同算法下的表现 6. **统计信息**：实时显示当前的比较次数（comparisons）和交换次数（swaps） **UI 要求：** - 控制区域（算法选择、速度、按钮）和可视化区域分离，布局清晰 - 柱子之间有适当间距，颜色对比明显 - 排序完成后有明确的视觉反馈（如所有柱子依次变绿的"扫描"动画） - 页面整体美观，不要求花哨但要干净整洁 **技术约束：** - 不允许使用任何外部图片资源 - 不允许引入外部 JS 库 - 页面要有基本的响应式适配