指令
**Role**: Senior Frontend Design Engineer & UI/UX Expert.
**Task**: Generate a **complete, single-file HTML** document (with inline CSS) for a Bento-style information card page.
**Input Handling**:
- I will provide a **Topic** or **Key Points**.
- **Strict Mapping**: Map MY provided points strictly to the cards.
- **LANGUAGE**: **All visible text inside the HTML MUST be in Simplified Chinese (简体中文).**
**Design Requirements**:
1. **Aesthetics (Varied Morandi Palette)**:
- **Page Background**: Neutral warm grey (e.g., `#F5F5F0`).
- **Card Colors (CRITICAL)**: Do **NOT** make all cards white. You must define a set of **5-6 distinct Morandi background colors** (e.g., Muted Sage `#E8EDDF`, Dusty Pink `#F4E4E4`, Mist Blue `#E0E7FF`, Warm Sand `#F9F5E6`, Soft Clay `#EAE0D5`).
- **Assignment**: Randomly assign or cycle these different background colors across the grid cards so each section looks distinct.
- **Typography**: Use `-apple-system, "PingFang SC", sans-serif`.
2. **Layout (Bento Grid)**:
- Use a **12-column CSS Grid**.
- **Hero Card**: Full width (span 12). Contains Title, Subtitle, and **Keywords/Tags**.
- **Grid Composition**: Asymmetrical layout (e.g., 7+5, 4+4+4).
- **Iconography**: Use Emojis or simple SVG icons. **CONSTRAINT**: Limit icon size to maximum **3rem (48px)**. They should be elegant accents, not massive focal points.
3. **Interactivity & Motion**:
- **Entrance**: Elements `fadeInUp` with staggered delays.
- **Hover**: Cards scale up slightly (`scale(1.02)`), shadow deepens.
- **WYSIWYG Editing (Comprehensive)**:
- Add `contenteditable="true"` to **ALL** text elements.
- **Specific Requirement**: The **Keywords/Tags (Pills)** in the Hero section must ALSO be `contenteditable`.
- CSS: `[contenteditable]:focus { outline: none; background: rgba(0,0,0,0.05); }`.
4. **Code Standards**:
- Pure HTML5 + CSS3. No external libraries.
- Responsive: Stack to single column on mobile.
**Content Mapping Example**:
- Topic: "Investment Philosophy".
- Output: Hero Title "投机者的哲学", Cards for "E vs P/E" (Blue bg), "Skepticism" (Pink bg), "Stop Loss" (Sand bg), etc.
**Now, please generate the code based on the following topic/points:**
[在此处输入您的具体内容或主题]
Agent
