健康伴侣

在一个逼真的手机边框模型中构建移动端健康测验界面，并将其居中放置在白色页面上。使用 React、Tailwind CSS 和 Lucide React icons。

**手机边框：**
- 尺寸：宽 375px x 高 780px
- 圆角半径：52px
- 背景颜色：`#8a9aaa`
- 使用盒阴影模拟真实手机边框：`inset 0 0 0 2px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.6), 0 0 0 10px #1a1a1e, 0 0 0 11px rgba(255,255,255,0.06), 0 0 60px rgba(0,0,0,0.5)`
- 顶部中央放置一个黑色药丸形 Dynamic Island：宽 120px，高 32px，完全圆角，z-index 50

**背景：**
- 使用以下精确 URL 设置全出血背景图：`https://images.higgs.ai/?default=1&output=webp&url=https%3A%2F%2Fd8j0ntlcm91z4.cloudfront.net%2Fuser_38xzZboKViGWJOttwIXH07lWA1P%2Fhf_20260704_143500_a76b8e64-2c69-4683-80e7-2bb060a921d6.png&w=1280&q=85`
- 对背景图应用 `blur(12px)` 和 `scale(1.1)`
- 在上方添加半透明叠层：`#8a9aaa`，透明度 30%

**字体：**
- 从以下地址加载 "Helvetica Now Var"：`https://db.onlinewebfonts.com/c/e66905e07608167a84e6ad52f638c3c6?family=Helvetica+Now+Var`
- 后备字体栈：'Helvetica Neue', Helvetica, Arial, sans-serif
- 全局应用于所有元素

**内容布局（flex column，内边距：顶部 56px、两侧 24px、底部 24px）：**

1. **页眉徽章**（顶部，下方外边距 40px）：
   - 液态玻璃药丸，包含 Timer icon（12px，white/80）+ 文本 "Vitaforge Daily"（12px，white/90，中等字重）
   - 内边距：垂直 10px，水平 12px

2. **标题区域**（下方外边距 32px）：
   - 副标题："选择所有适用项" - white/60，14px
   - 标题："你希望改善健康的哪些方面？" - white，28px，正常字重，紧凑行高和字距

3. **选择网格**（2 列，间距 12px，扩展以填满可用空间）：
   - 4 张卡片："睡眠质量"、"压力"、"体重"、"皮肤"
   - 每张卡片：rounded-[32px]，高 100px，内边距 16px
   - 显示编号标签（01、02 等），white/50，11px，中等字重
   - 选项文本为 white，16px，中等字重
   - "压力"（id:2）和 "皮肤"（id:4）默认选中
   - 点击卡片可切换选择状态

4. **语音按钮**（居中，垂直外边距 24px）：
   - 背后使用黄色/金色径向辉光：`radial-gradient(ellipse at center, rgba(220,200,80,0.5) 0%, rgba(180,160,40,0.2) 40%, transparent 70%)`
   - 64px 圆形液态玻璃按钮，带波形 SVG icon（白色描边，strokeWidth 2，strokeLinecap round），显示 5 根高度不一的竖条
   - 下方显示 "语音" 标签，white/70，12px

5. **滑动确认按钮**（底部，位于 24px 水平内边距内）：
   - 全宽 rounded-full 轨道，高 56px，液态玻璃样式
   - 左侧白色圆形滑块（44px），带 ArrowRight icon（gray-800）
   - 居中显示 "完成" 文本，white/60，14px，中等字重
   - 右侧放置 3 个 ChevronRight icons（14px），透明度依次为 white/40、white/50、white/60
   - 可通过 pointer events 拖动滑块：未拖过 85% 时弹回，拖过 85% 时吸附到末端

**液态玻璃效果（CSS classes）：**

`.liquid-glass`：
- 背景：`rgba(255,255,255,0.01)`，使用 luminosity blend mode
- Backdrop filter：`blur(4px)`
- 盒阴影：`inset 0 1px 1px rgba(255,255,255,0.1)`
- 使用 `::before` 伪元素创建渐变边框：`linear-gradient(180deg, rgba(255,255,255,0.45) 0%, rgba(255,255,255,0.15) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.15) 80%, rgba(255,255,255,0.45) 100%)`，配合 1.4px 内边距和 mask-composite exclude 技术

`.liquid-glass-selected`：
- 与上方相同，但背景为 `rgba(255,255,255,0.12)`，模糊 8px，盒阴影更强（`inset 0 1px 2px rgba(255,255,255,0.2)`），渐变边框更亮（边缘 alpha 为 0.6，20%/80% 处为 0.25）

**动画：**
- 所有元素使用交错的向上淡入动画
- Keyframes：从 `opacity:0, translateY(16px)` 到 `opacity:1, translateY(0)`
- 时长：0.5s，easing：`cubic-bezier(0.22, 1, 0.36, 1)`，fill：forwards
- 延迟：页眉 0.1s、标题 0.25s、网格卡片 0.4s/0.48s/0.56s/0.64s、语音 0.7s、滑块 0.85s

**依赖项：**
- React 18、Tailwind CSS 3、Lucide React、Vite、TypeScript