请制作一个单文件 HTML 应用，用于“随机数生成与颜色规则定制”。应用需在一个 HTML 文件内包含 CSS 和 JavaScript，无需任何外部依赖，界面美观、响应式、交互流畅。
### 布局与交互结构（重要）
- **结果显示区位于页面最顶部**，生成随机数后立即在此处以组为单位展示所有数字，每个数字根据规则着色。结果显示区始终可见，不折叠。
- **其他所有功能区均设计为可折叠面板**（手风琴或折叠卡片），包括：配置区、颜色规则管理区、特殊规则与跨组比较区、统计与概率区、规则存储与导入区。用户可点击标题展开/收起，节省屏幕空间。
- **颜色规则列表中的每条规则均可单独启用/关闭**（如一个开关按钮），关闭后该规则不参与颜色判定，也不计入统计区间。用户可快速禁用不用的规则而无需删除。
### 功能需求
#### 1. 随机数生成配置
- 用户可设置：组数（例如 1~20 组）、每组数量（例如 1~100 个）、随机整数范围（最小值、最大值，可任意设定）。
- 提供“生成随机数”按钮，点击后按照以上配置生成所有随机数，并在顶部结果显示区展示。
- 生成整数，包含范围边界。
#### 2. 颜色规则定制
- 用户可以自定义多条颜色规则，每条规则包含：
- 条件类型：大于、小于、等于、区间（包含边界）。
- 条件值：单一数值或区间两端数值。
- 对应颜色：颜色选择器或预设色盘。
- 启用/禁用开关（默认启用）。
- 规则按顺序判定，命中第一个启用的规则即应用该颜色，后续规则不再判定。
- 默认提供两条示例规则：大于 50 红色，介于 50~60 蓝色。用户可编辑、删除、增加规则。
- 未被任何启用规则命中的数字使用默认颜色（如黑色或深灰）。
#### 3. 特殊颜色规则（优先级最高，覆盖普通规则）
- **全局最大值与最小值着色**：
- 找出本次生成的所有数字中的最大值和最小值（不分组，全局比较），最大值数字显示为金色，最小值数字显示为橙色。
- 若有多个并列的最大值或最小值，均相应着色。
- 此规则可单独启用/关闭，位于特殊规则面板中。
- **跨组比较着色**：
- 用户可在特殊规则面板中开启跨组比较，并选择比较哪两个组同一索引位置的数字（默认为第一组与第二组）。
- 较大者变为红色（若相等可保持原色或用户指定颜色）。该着色优先级高于普通颜色规则，但低于最大值/最小值规则（或可由用户调整优先级顺序）。此功能也可独立启用/关闭。
#### 4. 概率计算
- 根据当前选择的的数字生成范围和启用的颜色规则，实时计算并展示：
- 在当前随机数生成范围内，得出各个颜色区间内数字的概率。
- 统计信息以表格或卡片形式展示，位于可折叠的统计面板中。
- 当规则被禁用或规则条件改变时，统计自动更新。
#### 5. 规则存储与导入（符号+数字表示）
- 设计一套紧凑的规则编码字符串，用于保存和分享当前全部配置。规则编码示例格式：
`G2-N5-R1~100-C>50:red,50-60:blue-Smax:gold,min:orange-X1,2,1:red`
其中 G：组数，N：每组数量，R：范围（最小值~最大值），C：普通颜色规则，S：特殊规则，X：跨组比较规则。
- 在规则存储面板中提供一个文本框，自动生成当前配置的编码字符串，并提供“复制”按钮。
- 同时提供“导入规则”按钮：用户粘贴编码字符串后，应用解析并恢复所有配置（组数、数量、范围、颜色规则及其启用状态等），然后可重新生成随机数。
- 除紧凑编码外，也支持 JSON 格式的导入/导出作为备选，以增强可读性。
### 技术要求
- 纯 HTML+CSS+JS，不依赖任何框架或库。
- 交互响应及时，生成数据后所有颜色、统计实时更新。
- 处理好边界情况：如用户输入无效参数、未生成数据时尝试调整阈值、规则冲突时的优先级等。
- 代码结构清晰，注释合理，方便后续修改。
- 折叠面板应有平滑过渡动画，规则开关应有明确的视觉反馈。
