任务引擎

## 角色
参考下方说明，以**像素级还原**的方式重新创建一个单文件 HTML 产品落地页马赛克布局。输出一个包含内联 CSS + JS 的自包含 `index.html`。**不得使用外部图片。**所有图标均为内联 SVG。唯一的外部资源是 Google Fonts。

---

## 页面元信息
- `lang="en"`
- 标题：`自动化你的工作 — 专注于重要之事`
- Viewport：`width=device-width, initial-scale=1, viewport-fit=cover`
- Body 页面背景：`#f0f0f0`
- 文字颜色：`#141414`
- 字体平滑：antialiased；`text-rendering: optimizeLegibility`
- `body`：flex 居中，`min-height: 100vh` / `100dvh`，`overflow: hidden`

---

## 字体（精确 URL）
```
https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap
```
预连接：`https://fonts.googleapis.com` 和 `https://fonts.gstatic.com`（crossorigin）。

字体栈：
`'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif`

使用的字重：**400、500、600、700、800**。不得使用其他展示字体或衬线字体。

---

## 度量系统（关键）
整个构图使用**设计单位**编写，其中：
- 参考舞台 = **1374 × 666** 单位
- `1rem` = 1 个参考单位
- 根级缩放控制：
```css
html { font-size: min(calc(95vw / 1374), calc(94vh / 666)); }
```
桌面端构图不得硬编码任何设备像素。下方所有尺寸均使用这些 rem 单位。

---

## 桌面端舞台网格
`.stage` = `1374rem × 666rem`，CSS grid：
- 列：`339rem | 627rem | 388rem`
- 行：`149rem | 343rem | 156rem`
- `column-gap: 10rem`，`row-gap: 9rem`
- `role="main"`，`aria-label="产品功能概览"`

### 卡片位置
| 类名 | 网格 |
|---|---|
| `.notif` | 第 1 列，第 1 行 |
| `.connect` | 第 1 列，第 2 行 / 跨 2 行 |
| `.automate` | 第 2 列，第 1 行 / 跨 2 行 |
| `.insights` | 第 3 列，第 1 行 / 跨 2 行 |
| `.search` | 第 2 列 / 跨 2 列，第 3 行 |

### 共享 `.card` 外观
- `border-radius: 22rem`
- `border: 1.6rem solid rgba(255,255,255,.92)`
- `overflow: hidden`
- `box-shadow: 0 2rem 16rem rgba(24,30,45,.045)`
- `position: relative`

---

## 卡片 1 — 通知（`.notif`）
**背景：**
```
radial-gradient(120% 140% at 92% 100%, rgba(255,236,246,.95) 0%, rgba(255,236,246,0) 62%),
linear-gradient(135deg, #f9d9e9 0%, #fbdfec 55%, #fce6f1 100%)
```
内边距：`37rem 12rem 0 11rem`。Aria：`"自动化通知"`。

### Toast 堆叠
- `.toast-wrap`：relative，高度 `70rem`
- `.toast-ledge`（位于 toast 后方）：absolute，`left:24 right:20 top:55 height:23`，圆角 `14rem`，  
  背景 `linear-gradient(100deg, #e6e6e6 0%, #e6e3e2 42%, #e5d6d6 74%, #e4cdcf 100%)`，  
  阴影 `0 3rem 9rem rgba(120,80,100,.09)`
- `.toast`：absolute inset 0，高度 70，圆角 16，  
  背景 `linear-gradient(105deg, #ffffff 34%, #fdeee5 78%, #fce8dd 100%)`，  
  阴影 `0 3rem 10rem rgba(122,86,106,.10)`，flex 居中，内边距 `0 12 0 13`，间距 `11`

**内容：**
1. **闪光图标** SVG 27×27，viewBox 0 0 24 24：
   - 黑色圆形 `r=12`，使用 mask 镂空一个四角星
   - 叠加一个居中的黑色实心四角闪光路径
2. 标题：`自动化已完成！` — 11.2rem / 字重 800 / ls -0.012em / 行高 1.1 / `#0d0d0d`
3. 副文案：`每周客户报告已自动发送` — 10rem / 400 / 行高 1.28 / ls -0.005em / `#2b2b2b` / 最大宽度 118rem / 上边距 3.6rem
4. 时间：`2:34 PM` — 7.4rem / 500 / `#8b8489` / align self start / 上边距 12rem / ls 0.005em

---

## 卡片 2 — 连接你的工具（`.connect`）
**背景：** `linear-gradient(180deg, #fcfdfd 0%, #f4f7f9 30%, #e2ebef 66%, #cedce4 100%)`  
内边距：`32rem 0 0 20rem`。Aria：`"集成"`。

- H2：`立即连接你的<br>工具。` — 28rem / 800 / 行高 1.1 / ls -0.028em / `#0c0c0c`
- 副文案：`支持 120+ 个集成` — 上边距 14，17rem / 400 / 行高 1.3 / ls -0.013em / `#1c1c1c`

### 集成胶囊
胶囊容器为 absolute：`left:11 right:16 bottom:13`，纵向 flex，间距 8，z-index 2。  
各行：flex，间距 14；`.r2` 使用 `padding-left: 10rem`。

**胶囊样式：**
- 高度 42，inline-flex，间距 10，内边距 `0 17`，圆角 999
- 背景：`linear-gradient(180deg, rgba(247,253,255,.97) 0%, rgba(240,250,254,.93) 100%)`
- 阴影环：`0 0 0 3rem rgba(0,0,0,.047)`（不是 CSS border）
- 背景模糊 7rem
- 文字：18rem / 500 / ls -0.018em / `#131313` / nowrap
- SVG 图标：21×21

**胶囊顺序 / 内容（文字后接品牌 SVG）：**
1. r1 行：`Microsoft Teams`（Teams 紫色头像 SVG）
2. r2 行：`Notion`（白色圆角方块 + N 描边）+ `GitHub`（Octocat 路径填充 `#0d0d0d`）
3. r3 行：`Google Drive`（官方六色三角形 SVG，viewBox `0 0 87.3 78`）+ `Figma`（官方五色标志，viewBox `0 0 38 57`）

**悬浮 Slack 胶囊**（`.chip-slack`）：absolute，`right:6 bottom:124`，`rotate(-20deg)`，z-index 3，稍强的环形阴影 `0 0 0 3.2rem rgba(0,0,0,.052)`。文字 `Slack` + 官方四色 Slack SVG（viewBox `0 0 122.8 122.8`，填充色 `#E01E5A`、`#36C5F0`、`#2EB67D`、`#ECB22E`）。

使用参考中的精确品牌 SVG 路径数据（Microsoft Teams 多层紫色图形、Notion 矩形+描边 N、GitHub octocat、Drive 6 条路径、Figma 5 个圆形/矩形、Slack 4 个圆角块）。

---

## 卡片 3 — 自动化你的工作（`.automate`）— 中央主视觉
**背景：**
```
radial-gradient(90% 70% at 6% 0%, rgba(226,236,200,.9) 0%, rgba(226,236,200,0) 70%),
linear-gradient(168deg, #e2ebc9 0%, #e9f0c4 48%, #f0f4b8 78%, #f3f5b0 100%)
```
Aria：`"自动化你的工作"`。

**文案内边距**（z-index 3）：`37rem 0 0 45rem`
- H2：`<span class="g">自动化</span>你的工作。<br>专注于重要之事。`  
  — 35rem / 800 / 行高 1.43 / ls -0.03em / `#15201a`  
  — `.g` 颜色 `#5f8b3e`
- 副文案：`AI 驱动的工作流，每周为团队节省数小时。`  
  — 上边距 13，17rem / 400 / 行高 1.3 / ls -0.014em / `#1e2a1b`

### 插画层 `.illo`（absolute inset 0，627×501，z-index 2）

**共享窗口外观：**
- 圆角 11，边框 `3rem solid #fff`，overflow hidden，阴影 `0 12rem 28rem rgba(64,74,44,.16)`
- 标题栏高度 **13.4rem**，背景 `#242424`，flex start，间距 4.6，左内边距 4.9
- 三个交通灯圆点：6×6 圆形，`linear-gradient(150deg, #fff 0%, #f6f6f6 50%, #dcdcdc 100%)`

**后方窗口** `.win-back`：
- `left:121.2 top:245.2 width:324 height:250` · `rotate(-7.02deg)`
- 窗体背景 `#eaefcd`；左侧栏宽度 23.7%，背景 `#bfd0ac`

**前方窗口** `.win-front`：
- `left:180.4 top:283.3 width:322 height:250` · `rotate(+4.23deg)`（正值——与后方窗口向相反方向倾斜；展开夹角约 11.25°）
- `border-bottom:0`，底部圆角为 0（延伸至卡片外）
- 更强阴影 `0 14rem 32rem rgba(64,74,44,.18)`
- 窗体背景 `#f9edfb`；左侧栏宽度 16%，背景 `#e8d6fb`

**“工作流已自动化”胶囊** `.pill-wf`：
- `left:395 top:349 height:30`，flex，间距 7，内边距 `0 14 0 6`，圆角 999，背景 `#fff`
- 环形阴影 `0 0 0 2.8rem rgba(0,0,0,.045)`，`rotate(-1.2deg)`
- 文字 11.5rem / 600 / ls -0.014em / `#151515`
- 对勾圆片 20×20：径向白色高光 + `linear-gradient(145deg, #e6f3df 0%, #cfe0bd 47%, #b9cfa5 100%)` + 对勾 SVG，描边 `#161616`，宽度 1.9

**AI 闪光卡片** `.pill-ai`：
- `left:68 top:404 width:144 height:52`，圆角 10，白色，相同环形阴影，flex，间距 9，内边距 `0 16`，`rotate(-1deg)`
- 两条灰色骨架线：高度 6.5，圆角 99，背景 `#d8d8d7`，间距 8
- 双四角闪光 SVG 23×23：填充 `#eff4e6`，描边 `#4f7433`，两条菱形星芒路径的 stroke-width 分别为 2.2 和 2.25（先小尖角，后大尖角）

**光标** `.cursor`：
- `left:490 top:454`，尺寸 30×35，viewBox 0 0 24 28
- 经典指针路径：填充 `#fff`，描边 `#2b2b2b`，宽度 1.3

---

## 卡片 4 — 生产力洞察（`.insights`）
**背景：**
```
radial-gradient(115% 70% at 22% 0%, #fdf2e5 0%, rgba(253,242,229,0) 68%),
linear-gradient(180deg, #f9f1e8 0%, #f7efe6 100%)
```
内边距：`29 25 23 21`。纵向 flex。Aria：`"生产力洞察"`。

- 标签胶囊：高度 31，内边距 `0 17`，圆角 999，左边距 4，  
  背景 `linear-gradient(100deg, #ffffff 18%, #fdeadb 100%)`，边框 `1.2rem solid rgba(255,255,255,.9)`，  
  阴影 `0 3rem 9rem rgba(160,120,80,.09)`，文字 `生产力洞察` — 12rem / 700 / ls -0.01em / `#111`
- H2：`48 小时` — 上边距 22，37rem / 800 / ls -0.035em / 行高 1 / `#0b0b0b`
- 副文案：`本周已节省！` — 上边距 12，14.5rem / 400 / ls -0.012em / `#1d1d1d`

### 柱状图（上边距 auto，高度 294，flex end，间距 13）
七列 MON→SUN。普通柱背景 `#e9e3da`，圆角 7，顶部内边距 9，标签颜色 `#a1978a`，13rem/500。日期标签：10.4rem / 500 / ls 0.05em / `#a79c8e`，上边距 10。

| 日期 | 标签 | 柱高 |
|---|---|---|
| MON | 2h | 43.2 |
| TUE | 6h | 80.9 |
| WED | 12h | 131.7 |
| THU | 20h | 165.5 |
| FRI | 31h | 203.2 |
| SAT | 40h | 235.2 |
| SUN | 48h | **265** — 特殊渐变 `linear-gradient(180deg, #f2b705 0%, #e7b208 26%, #a8a422 52%, #6a8f33 76%, #3d7a3e 100%)`，白色文字，字重 600，阴影 `0 4rem 12rem rgba(150,120,20,.20)` |

图表 Aria：`"每日节省的小时数：周一 2，周二 6，周三 12，周四 20，周五 31，周六 40，周日 48"`

---

## 卡片 5 — 搜索（`.search`）
**背景：** `linear-gradient(103deg, #eae9f5 0%, #e2e0f1 34%, #cfcdea 72%, #c2c0e6 100%)`  
Flex 对齐居中，左内边距 46，右内边距 25。Aria：`"搜索"`。

- H2：`立即找到<br>任何内容` — 23rem / 800 / 行高 1.39 / ls -0.028em / `#0d0d10`
- 搜索栏：`margin-left:auto`，**612×64**，圆角 999，白色，阴影 `0 4rem 14rem rgba(70,66,120,.10)`，flex，内边距 `0 22 0 10`，间距 16
  - 放大镜圆形区域 44×44，背景 `#f1f1f5`，包含搜索 SVG（圆形 r=7.1，描边 `#121212`，w=2.2 + 对角线手柄）
  - 占位文本：`搜索任务、文档、工作流...` — 16.5rem / 400 / ls -0.015em / `#8c8c99`
  - 麦克风 SVG 16×20：深色胶囊 + U 形弧线 + 竖杆 + 底座，填充/描边 `#141414`

---

## 响应式

### Tablet：`(min-width:701px) and (max-width:1040px) and (max-aspect-ratio:3/2)`
- 缩放：`min(95vw/1025, 94vh/918)`
- 舞台 1025×918；列 `627 | 388`；行 `505 | 194 | 201`
- 重新映射：automate(1,1)，高度 501；notif(1,2)；search(1,3)；insights(2,1)；connect(2, 2/span2)
- Notif：toast 居中（wrap 宽度 380，最大宽度 calc(100%-24)）
- Search：纵向堆叠；搜索栏占满宽度，上边距 22
- 增大 toast/tag/qbar/day 字号，以满足可读性下限

### Mobile：`(max-width:700px)`
- `html { font-size: calc((min(100vw,560px) - 30px) / 375) }`
- Body：block，Y 轴滚动，内边距 15px 0
- 单列舞台宽度 375，高度 auto，行间距 13
- 固定卡片高度：notif 149，connect 508，insights 500，automate 298
- Automate illo：`scale(.5981)`，原点 0 0；缩小标题/副文案
- Search 纵向堆叠，搜索栏高度 58

---

## 入场动画系统（精确）

### 启动脚本（位于 `<head>`）
如果不是 `prefers-reduced-motion: reduce`：
- 在 `<html>` 上添加类 `motion-pending`
- 2400ms 后的故障保护定时器移除 `motion-pending`

### 结束脚本（位于 `</body>` 前）
1. 如果启用了减少动态效果，或 `__entrancePlayed` 已存在：清除故障保护定时器、移除动态效果类并返回
2. 设置 `__entrancePlayed = true`
3. 让 `document.fonts.ready` 与 700ms 截止时间竞速
4. 将 `motion-pending` 替换为 `entrance-run`
5. **1850ms** 后移除 `entrance-run`（恢复为纯静态编写样式）

### `.motion-pending` 期间
Desktop：所有 `.card` 均为 `opacity:0; visibility:hidden`  
Mobile ≤700：仅隐藏 `.notif`、`.connect`、`.automate`；insights/search 保持可见且永不参与动画

### `.entrance-run` 期间 — 面板顺序（产品马赛克：automate 率先出现）
在卡片上使用 `will-change: opacity, translate, scale, clip-path`。所有动画均使用 `backwards` fill。

**Keyframes（精确）：**
| 名称 | From → To |
|---|---|
| `panel-settle` | opacity 0、translate Y 12、scale .988、clip-path inset(3% round 22) → 就位（在 62% 时 opacity 1） |
| `type-unmask` | opacity 0、translate Y 16、clip-path inset(0 0 96% 0) → 完整显示 |
| `content-rise` | opacity 0、translate Y 9 → none |
| `interface-settle` | opacity 0、translate Y 16、scale .975 → none |
| `detail-settle` | opacity 0、translate Y 8、scale .97 → none |
| `toast-arrive` | opacity 0、translate Y 10、scale .982 → none |
| `chip-row-arrive` | opacity 0、translate Y 11 → none |
| `chart-unmask` | opacity 0、translate Y 10、clip-path inset(100% 0 0 0) → none |
| `search-resolve` | opacity 0、translate X 12、scale(.975, 1) → none；transform-origin right center |

**缓动：**面板/细节主要使用 `cubic-bezier(.16,1,.3,1)`；type-unmask 使用 `cubic-bezier(.22,1,.36,1)`。

**时间表：**
| 目标 | 动画 | 时长 | 延迟 |
|---|---|---|---|
| `.automate` card | panel-settle | .82s | .04s |
| `.notif` card | panel-settle | .66s | .10s |
| `.insights` card | panel-settle | .74s | .14s |
| `.connect` card | panel-settle | .74s | .20s |
| `.search` card | panel-settle | .68s | .28s |
| automate h2 | type-unmask | .78s | .20s |
| automate .sub | content-rise | .54s | .48s |
| win-back | interface-settle | .84s | .42s |
| win-front | interface-settle | .94s | .50s |
| pill-ai | detail-settle | .60s | .72s |
| pill-wf | detail-settle | .58s | .78s |
| cursor | detail-settle | .54s | .96s |
| toast-wrap | toast-arrive | .62s | .38s |
| connect h2 | type-unmask | .64s | .54s |
| connect .sub | content-rise | .48s | .73s |
| chip-row.r1 | chip-row-arrive | .62s | .86s |
| chip-row.r2 | chip-row-arrive | .62s | .91s |
| chip-row.r3 | chip-row-arrive | .62s | .96s |
| chip-slack | detail-settle | .58s | 1.02s |
| insights .tag | content-rise | .46s | .44s |
| insights h2 | type-unmask | .62s | .56s |
| insights .sub | content-rise | .44s | .75s |
| `.chart` | chart-unmask | .86s | .72s |
| search h2 | type-unmask | .56s | .72s |
| `.bar-search` | search-resolve | .70s | .88s |

`prefers-reduced-motion: reduce` → 无动画，所有内容立即可见。

---

## 资源 URL
**不使用任何光栅/CDN 图片资源**。仅使用：
1. 上方的 Google Fonts URL  
2. 仅使用内联 SVG（Slack、Teams、Notion、GitHub、Drive、Figma、toast 闪光、AI 双闪光、对勾、光标、搜索、麦克风）

不得虚构 Unsplash/CDN 照片、Lottie 文件或图标库。

---

## 设计意图总结
在浅灰色 `#f0f0f0` 背景上居中展示产品**功能马赛克**：五张圆角卡片——粉色通知 toast、带胶囊按钮和倾斜 Slack 的冷灰色集成区、带两个向外倾斜的仿 OS 窗口 + AI/工作流徽章 + 光标的黄绿色自动化主视觉、带递增柱状图（周日为金色→绿色）的暖桃色洞察区，以及带胶囊搜索框的薰衣草紫色搜索区。单次入场动画：automate 面板率先出现，界面层逐步显现，周边工具模块补全画面；随后移除动画，留下静态设计。

---

## 交付物
单个 `index.html`，精确匹配上述尺寸、颜色、文案、SVG 几何形状、响应式规则和入场动画编排。不得使用框架。除指定的五个面板外，不得添加卡片嵌套卡片。

---