天气预报中心

将这个天气仪表盘 UI 精确复刻为一个独立的 HTML 页面（内联 CSS、SVG 图标精灵、不使用框架、无需 JS）。像素级忠实还原参考设计“Aurora Weather / Weather Forecast — Central Jakarta”液态玻璃仪表盘。

═══════════════════════════════════════
标题 / META
═══════════════════════════════════════
- 文档标题：Weather Forecast — Central Jakarta
- lang="en"
- viewport: width=device-width, initial-scale=1, viewport-fit=cover
- 页面备用背景色：#04121b
- 文字颜色：#ffffff
- 使用抗锯齿的 Inter 字体栈；font-feature-settings: "kern" 1
- html/body：高度 100%；桌面端 overflow hidden

═══════════════════════════════════════
字体（精确的字体家族和字重）
═══════════════════════════════════════
使用 Inter + Inter Tight（SIL OFL）。首选加载方式：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@500&display=swap" rel="stylesheet">

或者为以下字体嵌入 WOFF2 @font-face：
- Inter 400、500、600、700
- 仅 Inter Tight 500

Body font-family：
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif

标题（h1）font-family：
'Inter Tight', 'Inter', sans-serif
字重 500，字号 calc(63*u)，line-height calc(78*u)，letter-spacing calc(.25*u)

═══════════════════════════════════════
资源（精确 URL / 文件）
═══════════════════════════════════════
1）全出血背景（风暴景观照片，1600×1200 JPEG）：
   从原始文件导出的本地文件：
   ./assets/storm-background.jpg
   （原本以 data:image/jpeg;base64 URI 的形式嵌入 CSS。）
   画面主体：绿色田野上方戏剧性的深色 cumulonimbus storm clouds，伴有多道 lightning bolts；整体呈冷调 teal-green / deep blue-black 氛围。
   CSS：
   background-image: url("./assets/storm-background.jpg");
   background-size: cover;
   background-position: center 25%;
   background-repeat: no-repeat;

2）头像照片（原作中唯一的远程图像）：
   https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&h=160&fit=crop&crop=faces&q=80&auto=format
   alt="Calfin Danang"
   loading="eager" decoding="async"
   onerror="this.remove()"（回退到内联 SVG 头像 #i-avatar）
   圆形裁切 52×52（桌面端）。

3）不使用其他远程资源。所有图标均为内联 SVG <symbol>。

═══════════════════════════════════════
缩放系统（关键）
═══════════════════════════════════════
参考画布：1357 × 871 CSS px。
定义：
:root {
  --u: min(100vw / 1357, 100dvh / 871);
  --ink: #ffffff;
  --glass: rgba(255,255,255,.155);
  --glass-line: rgba(255,255,255,.20);
  --e-out: cubic-bezier(.16,1,.3,1);
  --e-soft: cubic-bezier(.22,.61,.36,1);
  --e-pen: cubic-bezier(.37,.01,.2,1);
}
@supports not (height: 100dvh) {
  :root { --u: min(100vw / 1357, 100vh / 871); }
}
所有尺寸和间距均使用 calc(N * var(--u))。布局采用绝对定位 / 边缘锚定，确保绝不出现空白带。

═══════════════════════════════════════
液态玻璃视觉语言（精确配方）
═══════════════════════════════════════
舞台暗角（.stage 上的 ::after，pointer-events:none）：
  linear-gradient(105deg, rgba(4,16,24,.34) 0%, rgba(4,16,24,.20) 40%, rgba(4,16,24,.06) 78%, transparent 100%),
  linear-gradient(180deg, rgba(4,16,24,.12) 0%, transparent 22%),
  linear-gradient(0deg, rgba(4,16,24,.07), rgba(4,16,24,.07));

侧边栏玻璃：
  background: linear-gradient(180deg,
    rgba(255,255,255,.125) 0%,
    rgba(255,255,255,.135) 13%,
    rgba(255,255,255,.098) 34%,
    rgba(255,255,255,.092) 100%);
  backdrop-filter: blur(calc(18*var(--u))) saturate(115%);
  -webkit-backdrop-filter: same;
  border-radius: calc(26*var(--u));

工具按钮 / 标签玻璃：
  background: rgba(255,255,255,.15)  /* 工具 */  /  rgba(255,255,255,.175) /* 标签 */
  backdrop-filter: blur(calc(16*var(--u))) saturate(115%);
  工具：52×52 圆形；标签：高度 36、圆角 18、水平内边距 15

右侧栏卡片玻璃（主要的“液态玻璃”面板）：
  background: linear-gradient(180deg,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.258) 24%,
    rgba(255,255,255,.252) 78%,
    rgba(255,255,255,.232) 100%);
  backdrop-filter: blur(calc(26*var(--u))) saturate(118%);
  border-radius: calc(24*var(--u))  /* 大卡片：26 */

高光扫尾效果（卡片 + 标签）：
  ::after 宽度 38%，渐变
  linear-gradient(100deg, transparent 0%, rgba(255,255,255,.17) 50%, transparent 100%);
  skewX(-18deg)；animation sheen 1.15s var(--e-soft) 2.55s 1 both；
  @keyframes sheen { from { transform: translate3d(-150%,0,0) skewX(-18deg) }
                      to   { transform: translate3d(260%,0,0) skewX(-18deg) } }

不要使用不透明白色卡片、厚重投影或紫色渐变。玻璃必须呈现覆盖在风暴照片上的磨砂质感。

═══════════════════════════════════════
布局结构（桌面端绝对位置）
═══════════════════════════════════════
.stage { position:fixed; inset:0; overflow:hidden; }

1）左侧边栏（.sidebar）
   left:16u  top:14u  bottom:7u  width:72u
   flex column，align center
   padding-top:22u  padding-bottom:52u
   - 激活状态白色指示条：left:-2u  top:131u  width:5u height:29u radius:3u
     box-shadow: 0 0 10u rgba(255,255,255,.55)
   - Logo SVG 40×40（波浪圆形标志，圆角方形 rx=12，白色描边波浪）
   - 导航：margin-top 57.5u，gap 43u，图标 23×23 白色
     链接 aria-label：Dashboard（aria-current=page）、Reports、Explore regions、Calendar、Settings
   - 底部退出项：Sign out

2）页眉（.header）
   top:22u  left:126u  right:37u  height:52u
   左侧：
     "Welcome" — 16u / 字重 400 / 颜色 rgba(255,255,255,.93)
     "Calfin Danang" — 19.5u / 字重 700 / letter-spacing -0.35u / margin-top 13u
   右侧工具 gap 16u：Add location（+）、Search、Notifications、头像

3）主视觉区（.hero）
   left:126u  top:136u  max-width:560u
   标签文本必须完全一致：Weather Forecast
   H1 拼写必须完全一致（保留拼写错误）：
     line1: "Strom"
     line2: "with Heavy Rain"
     每一行都用 <span class="ln"><span>…</span></span> 包裹，以实现遮罩揭示
   说明文案必须完全一致（保留原作中的软换行）：
     "Partly cloudy with occasional snow showers. High around 50°F.
      Wind from the east 11 to 21 mph. Snow chance is 40%, with
      rainfall expected to be less than an inch."
   说明文案：宽度 480u，15.2u / lh 24u / 字重 500 / tracking -0.3u / 颜色 rgba(255,255,255,.95)

4）预报条（.forecast）
   left:126u  right:396u  bottom:99u
   每小时 / 每日温度行（space-between）：
     11° cloud | 13° cloud2 | 14° cloud2 | 10° hail | 19° sun | 12° cloud
     温度文字：37u 字重 400 tracking -0.7u
   SVG 波形图 viewBox="0 0 835 230" preserveAspectRatio="none"
     高度 230u，margin-top 43u，宽度 100%
     填充路径 + 3 条描边轮廓路径（stroke-width 6.2@opacity.17、4.6@.26、3.4@1）
     描边使用水平白色透明度渐变 #wg
     填充使用 #wf + 垂直淡出遮罩 #wfade + clipPath #wclip / #wclipr 实现擦入
     使用 pathLength="1" + stroke-dasharray:1 实现 drawLine 动画
     精确 cubic path（从 M0,79 开始……以 L835,86 结束，随后填充闭合至底部）
   图表下方的星期（margin-top -31u）：
     Sunday Monday Tuesday Wednesday（on/激活状态字重 600）Thursday Friday
     字体 18u 字重 500 颜色 rgba(255,255,255,.88)；.on = #fff 字重 600

5）右侧栏（.rail）
   right:38u  top:134u  bottom:95u  width:310u
   flex column gap 20u
   卡片 A（.card.big）：
     Central Jakarta + pin 图标
     10° C（big-temp 92u 字重 500 tracking -4.4u；“C”放在 <i> 中）
     指标：19 mph（wind）| 40%（drop）| 15km/h（gust）
   卡片 B（.card.row 高度 120u）：
     Indonesia / North Jakarta / Mostly Sunny | 12° cloud
   卡片 C：
     Indonesia / Bandung / Cloudy | 10° cloud
   卡片 D：
     Indonesia / South Jakarta / Sunny | 14° cloud2

═══════════════════════════════════════
图标精灵（内联 SVG symbols，白色/currentColor）
═══════════════════════════════════════
精确实现以下 symbols：i-grid、i-chart、i-globe、i-cal、i-gear、i-out、
i-plus、i-search、i-bell、i-pin、i-wind、i-drop、i-gust、
i-cloud、i-cloud2、i-hail、i-sun、i-avatar（矢量备用头像）。
Logo：使用圆形 clip，包含 7 条水平波浪 polyline 描边 + 柔和方形。

═══════════════════════════════════════
入场编排（必须匹配时间）
═══════════════════════════════════════
Keyframes：
- riseIn：opacity 0 → 1，translateY(var(--ry,14px)) → none
- slideL：从 -26px X 开始
- slideR：从 +30px X + scale(.985) 开始
- popIn：scale .7 → 1
- growY：scaleY 0 → 1（指示条）
- lineUp：translateY(115%) → none（标题遮罩）
- wipeDown / wipeRight（clip-path）
- drawLine：stroke-dashoffset 1 → 0
- wipeX：#wclipr 上的 scaleX 0 → 1（填充跟随绘制笔触）
- sheen：同上

节拍时间（animation-fill-mode: both）：
1. 侧边栏 slideL .92s delay .05s；logo popIn .70s @.26s；
   导航项 riseIn .60s delays .36/.41/.46/.51/.56s；退出项 @.70s；指示条 growY .50s @.68s
2. hello riseIn .70s @.14s；who .80s @.22s；
   工具 popIn .58s delays .30/.365/.43/.495s
3. 标签 wipeRight .80s @.44s；
   h1 line1 lineUp 1.05s @.56s；line2 @.67s；
   说明文案 wipeDown .90s @.90s（--e-soft）
4. 卡片 slideR .95s delays .80/.92/1.03/1.14s；
   place/big-temp/metrics + 行内子元素以约 1.04–1.36s 依次错开
5. 温度 riseIn delays 1.26…1.61s，每步约 .07s
6. 标志性动画：.wline drawLine 1.60s --e-pen @1.50s；
   #wclipr wipeX 1.42s --e-pen @1.72s（填充比笔触落后约 220ms）
7. 星期 riseIn 从 2.10s 开始，每步 .055s
8. 收尾 sheen @2.55s

prefers-reduced-motion: reduce → 禁用所有动画和过渡；隐藏 sheen ::after；完整显示已绘制的图表。

移动端 ≤860px：重排为可滚动的单列；--u: min(100vw/430, 1.22px)；
侧边栏变为固定在底部、高度 64u 的 dock；卡片 / 预报区域顺序调整；隐藏指示条；
侧边栏 / 卡片使用 riseIn，而非 slideL/slideR。
≤420px：--u: calc(100vw / 430)。

═══════════════════════════════════════
交互微状态
═══════════════════════════════════════
.nav a:hover → opacity 1 + translateY(-1u)
.tool:hover → background rgba(255,255,255,.24)
:focus-visible → 2u 白色 outline，offset 2u

═══════════════════════════════════════
硬性约束
═══════════════════════════════════════
- 保留拼写错误“Strom”（不要改为 Storm）。
- 所有文案、温度、城市和指标必须与上述内容完全一致。
- 桌面端必须采用基于 1357×871 单位网格的绝对定位构图，而不是通用 CSS Grid 仪表盘。
- 使用 backdrop-filter + 半透明白色渐变 + 最终高光扫过实现液态玻璃效果，而非纯色磨砂面板。
- 图表必须先自行绘制（stroke dash），然后从左向右擦入填充。
- 不使用紫色主题，不使用除指定 Inter/Inter Tight 之外的 Inter 默认营销风仿制设计，不使用层叠卡片阴影，不使用 emoji。
- 首选单个 HTML 文件；背景可以使用外部文件 ./assets/storm-background.jpg，头像可以使用上述 Unsplash URL。
```

---

**资源备注**
- **背景：**原作中没有公开 CDN URL——它是一张约 238KB 的嵌入式 JPEG。使用 `./assets/storm-background.jpg`（从该项目导出），或重新嵌入同一 data URI。
- **头像：**  
  `https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&h=160&fit=crop&crop=faces&q=80&auto=format`
- **字体：**Google Fonts Inter 400–700 + Inter Tight 500，或者使用已嵌入 `index.html` 的 WOFF2。