1. **整体风格：**
* 参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
2. **布局核心：卡片式布局**
* **主卡片 (Main Cards)：** 用于主要版块（如执行摘要、财务状况、业务分部等）。使用大尺寸、风格明确的卡片样式。
* **迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (关键布局元素)：**
* **目的：** 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。
* **AI 任务：** 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。
* **布局：** 将这些迷你卡片排列在一个响应式网格中（例如，`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4`）。在中大型屏幕上，目标是每行排列 3-5 个迷你卡片，以实现结构化、易于扫视的信息密度。
* **嵌套布局：** 主卡片可以包含迷你卡片网格。基于提供的源文档（例如，财务报告、分析报告、产品信息），生成一个单一、完整、可直接运行的 HTML 文件。此文件必须动态地、可视化地呈现文档中的核心发现、关键数据和结构化信息，并严格遵守以下设计和实现要求：
**核心要求：**
1. **单一 HTML 文件输出：**
* 最终交付物必须是**一个 .html 文件**，包含所有必要的 HTML 结构、CSS 样式（通过 `<style>` 标签或内联 Tailwind 类）和 JavaScript（通过 `<script>` 标签，包括 CDN 引入和初始化逻辑）。
* 不允许使用外部 CSS 或 JS 文件，只允许在 HTML 文件内部使用 CDN 链接。
**视觉设计与布局：**
1. **整体风格：**
* 参考 Apple 官网及发布会风格——简洁、现代，具有清晰的信息层级。
2. **布局核心：卡片式布局**
* **主卡片 (Main Cards)：** 用于主要版块（如执行摘要、财务状况、业务分部等）。使用大尺寸、风格明确的卡片样式。
* **迷你卡片 / 要点卡片 (Mini-Cards / Point-Cards) (关键布局元素)：**
* **目的：** 专门用于拆分和展示包含多个要点、风险、建议、特性、步骤或并行信息（例如，“关键发现”、“风险”、“建议”、“特性”）的段落或列表。
* **AI 任务：** 深入理解这些内容的语义。提取每个逻辑上独立、并列的核心要点。将每个要点转换为一个独立的迷你卡片。
* **布局：** 将这些迷你卡片排列在一个响应式网格中（例如，`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4`）。在中大型屏幕上，目标是每行排列 3-5 个迷你卡片，以实现结构化、易于扫视的信息密度。
* **嵌套布局：** 主卡片可以包含迷你卡片网格。
3. **背景：**
* 纯黑页面背景 (`#000000`)。
4. **高亮颜色**
* **自动品牌色：** 尝试识别内容中主要品牌（例如，“小米”、“华为”）。如果成功，则使用其官方主 VI 色（例如，小米橙 `#FF6900`）作为**唯一的核心高亮色**。
* **备选方案：** 如果品牌/颜色识别失败，则使用专业的科技蓝 (`#00AEEF`) 或亮橙色 (`#FFA500`)。
* **应用：** 统一应用于关键文本（标题、核心数据）、大的强调数字、图标、图表元素、可选边框和渐变色。
5. **科技感渐变 (Tech Gradient)：**
* **仅应用于高亮色：** 创建从 `rgba(高亮色, 0.7)` 到 `rgba(高亮色, 0.3)` 的透明度渐变。
* **用途：** 用作卡片/区域、图表区域或文本背景的微妙底色。**禁止使用多色渐变**。
6. **卡片样式 (Card Styling)：**
* **背景：** 所有卡片（主卡片和迷你卡片）均使用深灰色背景（例如 `#1a1a1a` 或 `#222222`）。
* **圆角：** 主卡片使用较大圆角半径（`rounded-xl` 或 `rounded-2xl`），迷你卡片使用较小圆角半径（`rounded-lg`）。
* **分隔：** 使用细微边框（`border: 1px solid #333;`）或适合暗黑模式的轻微阴影（`shadow-md` 或 `shadow-lg`）。
7. **主标题强化 (Main Title Enhancement)：**
* 使主中文标题显著增大（例如，`text-5xl` 或 `text-6xl`, `font-bold`）。
* 在其下方添加一个较小的、对应的英文标题（例如，`text-xl` 或 `text-lg`, `font-semibold`，颜色稍浅，如 `text-gray-300` 或 `text-gray-400`）。示例：“Xiaomi Corporation 2024 Annual Financial Report Analysis”。
**内容呈现与布局（核心优化）：**
1. **全面的基础数据：**
* 准确提取并展示源文档中的所有关键信息、核心数据点（特别是财务数据、增长率、市场份额）、结论和分析。
2. **核心要点提取与卡片化（关键）：**
* **语义理解：** 超越简单的句子分割。理解逻辑和语义，识别段落或列表**内部独立、并列的核心观点/元素**。
* **转换：** 将每个提取出的核心要点转化为**一个独立的迷你卡片**。
* **目标：** 将复杂信息解构成结构化、可视化的网格，使其成为易于扫视的单元。
3. **迷你卡片内部结构与细节（关键）：**
* **结构优先级：**
* **强调数字优先：** 如果核心要点包含一个关键、突出的数字/指标，则将该**数字/指标本身**作为顶部元素，使用超大、粗体字号（例如 `text-5xl` 或 `text-6xl`, `font-bold`，使用高亮色）。目的是为了最大化视觉冲击力。
* **文本标题：** 如果核心要点是概念性的或数字是次要的，则使用一个**简洁、加粗的中文短语**（理想情况 3-5 个汉字）作为顶部元素，使用大字号（例如 `text-3xl` 或 `text-4xl`, `font-bold`，白色或高亮色）。
* **支撑文本：** 在大的数字/标题下方，使用较小字号（例如 `text-sm`, `text-gray-400`）。
* **当大元素是数字时：** 解释该数字代表什么（例如，“研发费用同比增长”，“营收额”，“市场份额排名”）并提供简要背景。
* **当大元素是文本标题时：** 提供具体细节、解释、数据支撑或影响。
* **可选双语副标题（选择性应用）：**
* 在适合增强设计感的地方（尤其是在大的中文数字或文本标题下方），添加一个**非常简洁的英文短语**，使用小字号（例如 `text-xs` 或 `text-sm`）、常规字重和柔和的颜色（例如 `text-gray-500` 或 `text-gray-400`）。示例：“YoY Growth”，“Total Revenue”，“Market Share”。**审慎地应用**以增加视觉风格，而非死板地用于每个卡片。
* **专注与简洁：** 严格遵守“**一个卡片，一个核心要点**”。大的元素和支撑文本都必须**高度简洁**。避免在单个迷你卡片中使用长句或包含多个观点。
4. **强烈的视觉层级：**
* 利用显著的**字号差异**（例如，数字用 `text-5xl/6xl` vs 文本标题用 `text-3xl/4xl` vs 支撑文本用 `text-sm` vs 英文副标题用 `text-xs`）、**字重**（`font-bold` vs `font-normal`）和**颜色**（高亮色、白色、灰色系）来在主要信息（大数字/标题）和次要信息（支撑文本、英文副标题）之间创建清晰的视觉区分。
5. **语言策略：**
* **主要语言：** 使用**中文或数字**承载核心信息、主标题（大的中文部分）和迷你卡片的大元素。确保它们在视觉上占主导地位（大字号、加粗）。
* **次要/装饰性语言：** 使用**英文**作为主标题的副标题以及可选的、小的迷你卡片副标题。对这些元素使用较小字号和较低的强调度。如果源文档中存在英文术语，为确保技术准确性应予保留。
**图形元素与图表：**
1. **图标 (Font Awesome)：**
* **来源：** 通过 CDN 引入 Font Awesome (v5/v6)。
* **风格：** 偏好简洁、现代的**线框风格 (outline-style)** 图标。
* **使用：** 放置于主标题附近，可选择性地（且需微妙地）用于迷你卡片内部（靠近标题处）、列表前缀等。**严格禁止使用 Emoji 作为功能性图标**。颜色应协调；关键图标可使用高亮色。
2. **数据可视化 (推荐 Chart.js)：**
* **应用场景：** 用于展示趋势、增长率、构成（饼图/环形图）、比较（柱状图）等适合的数据 [引用：数据可视化最佳实践]。
* **技术：** 通过 CDN 嵌入 Chart.js。
* **位置：** 放置在讨论财务或业务分析的相关主卡片内部。
* **样式：** 图表颜色必须与暗黑主题和高亮色保持一致。确保图表清晰、易读且响应式。
**技术与动画：**
1. **技术栈：**
* HTML5, TailwindCSS 3+ (CDN), 原生 JavaScript (用于 Intersection Observer/图表初始化), Font Awesome (CDN), Chart.js (CDN)。
2. **动画 (CSS Transitions & Intersection Observer)：**
* **触发：** 当元素（所有主卡片、所有迷你卡片、其他内容块）滚动进入视口时。
* **效果：** 平滑、微妙的**淡入/向上滑动**效果（模仿 Apple 风格）。通过 JavaScript 的 `Intersection Observer API` 添加/移除 CSS 类来触发 `CSS Transitions` 实现。确保动画性能流畅。为网格项应用轻微延迟以产生交错效果。
3. **响应式设计：**
* **强制要求**。使用 Tailwind 的响应式修饰符（特别是针对网格布局），确保在手机、平板和桌面设备上均具有出色的显示效果和可用性。
**最终输出：**
* 生成一个**单一、可运行的 .html 文件**，该文件精确实现了上述所有要求，特别注意**优先使用卡片布局**，**避免大段文字**，**核心要点提取到迷你卡片**、通过**更大的数字和选择性双语**实现的增强视觉层级，以及整体的**美学一致性**。