提示词
将这个天气仪表盘 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。原文提示词（English）
Recreate this EXACT weather dashboard UI as a single self-contained HTML page (inline CSS, SVG icon sprite, no frameworks, no JS required). Pixel-faithful to the reference “Aurora Weather / Weather Forecast — Central Jakarta” liquid-glass dashboard.
═══════════════════════════════════════
TITLE / META
═══════════════════════════════════════
- Document title: Weather Forecast — Central Jakarta
- lang="en"
- viewport: width=device-width, initial-scale=1, viewport-fit=cover
- Fallback page bg: #04121b
- Color ink: #ffffff
- Antialiased Inter stack; font-feature-settings: "kern" 1
- html/body: height 100%; overflow hidden on desktop
═══════════════════════════════════════
FONTS (exact families + weights)
═══════════════════════════════════════
Use Inter + Inter Tight (SIL OFL). Preferred load:
<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">
OR embed WOFF2 @font-face for:
- Inter 400, 500, 600, 700
- Inter Tight 500 only
Body font-family:
'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
Headline (h1) font-family:
'Inter Tight', 'Inter', sans-serif
Weight 500, size calc(63*u), line-height calc(78*u), letter-spacing calc(.25*u)
═══════════════════════════════════════
ASSETS (exact URLs / files)
═══════════════════════════════════════
1) FULL-BLEED BACKGROUND (storm landscape photo, 1600×1200 JPEG):
Local export from original file:
./assets/storm-background.jpg
(Originally embedded as a data:image/jpeg;base64 URI inside CSS.)
Subject: dramatic dark cumulonimbus storm clouds with multiple lightning bolts over a green field; cool teal-green / deep blue-black atmosphere.
CSS:
background-image: url("./assets/storm-background.jpg");
background-size: cover;
background-position: center 25%;
background-repeat: no-repeat;
2) AVATAR PHOTO (only remote image in the original):
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()" (falls back to inline SVG avatar #i-avatar)
Circular crop 52×52 (desktop).
3) NO other remote assets. All icons are inline SVG <symbol>s.
═══════════════════════════════════════
SCALING SYSTEM (critical)
═══════════════════════════════════════
Reference canvas: 1357 × 871 CSS px.
Define:
: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); }
}
Every size/spacing uses calc(N * var(--u)). Layout is absolute / edge-anchored so there is never a blank band.
═══════════════════════════════════════
LIQUID GLASS LANGUAGE (exact recipes)
═══════════════════════════════════════
Stage vignette (::after on .stage, 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));
SIDEBAR glass:
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));
TOOL BUTTONS / CHIP glass:
background: rgba(255,255,255,.15) /* tools */ / rgba(255,255,255,.175) /* chip */
backdrop-filter: blur(calc(16*var(--u))) saturate(115%);
tools: circle 52×52; chip: pill height 36, radius 18, padding-x 15
RIGHT RAIL CARDS glass (the main “liquid glass” panels):
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)) /* big card: 26 */
Specular sheen coda (cards + chip):
::after width 38%, gradient
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) } }
Do NOT use opaque white cards, heavy drop shadows, or purple gradients. Glass must feel frosted over the storm photo.
═══════════════════════════════════════
LAYOUT STRUCTURE (desktop absolute positions)
═══════════════════════════════════════
.stage { position:fixed; inset:0; overflow:hidden; }
1) LEFT SIDEBAR (.sidebar)
left:16u top:14u bottom:7u width:72u
flex column, align center
padding-top:22u padding-bottom:52u
- Active white pip: left:-2u top:131u width:5u height:29u radius:3u
box-shadow: 0 0 10u rgba(255,255,255,.55)
- Logo SVG 40×40 (wave-circle mark, rounded square rx=12, white stroke waves)
- Nav: margin-top 57.5u, gap 43u, icons 23×23 white
Links aria-labels: Dashboard (aria-current=page), Reports, Explore regions, Calendar, Settings
- Logout at bottom: Sign out
2) HEADER (.header)
top:22u left:126u right:37u height:52u
Left:
"Welcome" — 16u / weight 400 / color rgba(255,255,255,.93)
"Calfin Danang" — 19.5u / weight 700 / letter-spacing -0.35u / margin-top 13u
Right tools gap 16u: Add location (+), Search, Notifications, avatar
3) HERO (.hero)
left:126u top:136u max-width:560u
Chip text EXACTLY: Weather Forecast
H1 EXACT spelling (keep the typo):
line1: "Strom"
line2: "with Heavy Rain"
Each line wrapped as <span class="ln"><span>…</span></span> for mask reveal
Blurb EXACT copy (with soft line breaks as in original):
"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."
Blurb: width 480u, 15.2u / lh 24u / weight 500 / tracking -0.3u / color rgba(255,255,255,.95)
4) FORECAST STRIP (.forecast)
left:126u right:396u bottom:99u
Hourly/daily temps row (space-between):
11° cloud | 13° cloud2 | 14° cloud2 | 10° hail | 19° sun | 12° cloud
Temp type: 37u weight 400 tracking -0.7u
SVG wave chart viewBox="0 0 835 230" preserveAspectRatio="none"
height 230u, margin-top 43u, width 100%
Fill path + 3 stroked outline paths (stroke-width 6.2@opacity.17, 4.6@.26, 3.4@1)
Stroke uses horizontal white opacity gradient #wg
Fill uses #wf + vertical fade mask #wfade + clipPath #wclip / #wclipr for wipe-in
Use pathLength="1" + stroke-dasharray:1 for drawLine animation
Exact cubic path (start M0,79 … end L835,86 then fill closes to bottom)
Days under chart (margin-top -31u):
Sunday Monday Tuesday Wednesday(on/active weight 600) Thursday Friday
Font 18u weight 500 color rgba(255,255,255,.88); .on = #fff weight 600
5) RIGHT RAIL (.rail)
right:38u top:134u bottom:95u width:310u
flex column gap 20u
Card A (.card.big):
Central Jakarta + pin icon
10° C (big-temp 92u weight 500 tracking -4.4u; “C” in <i>)
metrics: 19 mph (wind) | 40% (drop) | 15km/h (gust)
Card B (.card.row height 120u):
Indonesia / North Jakarta / Mostly Sunny | 12° cloud
Card C:
Indonesia / Bandung / Cloudy | 10° cloud
Card D:
Indonesia / South Jakarta / Sunny | 14° cloud2
═══════════════════════════════════════
ICON SPRITE (inline SVG symbols, white/currentColor)
═══════════════════════════════════════
Implement exact 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 (vector fallback portrait).
Logo: circular clip with 7 horizontal wavy polyline strokes + soft square.
═══════════════════════════════════════
ENTRY CHOREOGRAPHY (must match timings)
═══════════════════════════════════════
Keyframes:
- riseIn: opacity 0 → 1, translateY(var(--ry,14px)) → none
- slideL: from -26px X
- slideR: from +30px X + scale(.985)
- popIn: scale .7 → 1
- growY: scaleY 0 → 1 (pip)
- lineUp: translateY(115%) → none (headline mask)
- wipeDown / wipeRight (clip-path)
- drawLine: stroke-dashoffset 1 → 0
- wipeX: scaleX 0 → 1 on #wclipr (fill follows pen)
- sheen: as above
Beat timing (animation-fill-mode: both):
1. Sidebar slideL .92s delay .05s; logo popIn .70s @.26s;
nav items riseIn .60s delays .36/.41/.46/.51/.56s; logout @.70s; pip growY .50s @.68s
2. hello riseIn .70s @.14s; who .80s @.22s;
tools popIn .58s delays .30/.365/.43/.495s
3. chip wipeRight .80s @.44s;
h1 line1 lineUp 1.05s @.56s; line2 @.67s;
blurb wipeDown .90s @.90s (--e-soft)
4. cards slideR .95s delays .80/.92/1.03/1.14s;
place/big-temp/metrics + row children staggered ~1.04–1.36s
5. temps riseIn delays 1.26…1.61s step ~.07s
6. Signature: .wline drawLine 1.60s --e-pen @1.50s;
#wclipr wipeX 1.42s --e-pen @1.72s (fill ~220ms behind pen)
7. days riseIn from 2.10s step .055s
8. Coda sheen @2.55s
prefers-reduced-motion: reduce → kill all animations/transitions; hide sheen ::after; show chart fully drawn.
Mobile ≤860px: reflow to single scrolling column; --u: min(100vw/430, 1.22px);
sidebar becomes fixed bottom dock height 64u; cards/forecast order change; pip hidden;
sidebar/cards use riseIn instead of slideL/slideR.
≤420px: --u: calc(100vw / 430).
═══════════════════════════════════════
INTERACTION MICROSTATES
═══════════════════════════════════════
.nav a:hover → opacity 1 + translateY(-1u)
.tool:hover → background rgba(255,255,255,.24)
:focus-visible → 2u white outline, offset 2u
═══════════════════════════════════════
HARD CONSTRAINTS
═══════════════════════════════════════
- Keep the typo “Strom” (not Storm).
- Keep all copy, temps, cities, metrics exactly as listed.
- Absolute desktop composition on the 1357×871 unit grid — not a generic CSS Grid dashboard.
- Liquid glass via backdrop-filter + translucent white gradients + final specular sheen — not solid frosted panels.
- Chart must DRAW itself (stroke dash) then FILL wipe left→right.
- No purple theme, no Inter-default marketing look-alikes beyond the specified Inter/Inter Tight, no card shadows stacks, no emoji.
- Single HTML file preferred; background may be external file at ./assets/storm-background.jpg and avatar at the Unsplash URL above.
```
---
**Asset notes**
- **Background:** not a public CDN URL in the original — it was a ~238KB embedded JPEG. Use `./assets/storm-background.jpg` (exported from this project) or re-embed the same data URI.
- **Avatar:**
`https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=160&h=160&fit=crop&crop=faces&q=80&auto=format`
- **Fonts:** Google Fonts Inter 400–700 + Inter Tight 500, or the embedded WOFF2s already in `index.html`.视频地址
