diff --git a/apps/daemon/src/design-systems.ts b/apps/daemon/src/design-systems.ts
index 45da865e2..aa0b8467b 100644
--- a/apps/daemon/src/design-systems.ts
+++ b/apps/daemon/src/design-systems.ts
@@ -111,8 +111,11 @@ function extractSwatches(raw) {
     seen.add(key);
     colors.push({ name: cleanName, value: v });
   }
-  // Form A: "- **Background:** `#FAFAFA`"
-  const reA = /^[\s>*-]*\**\s*([A-Za-z][A-Za-z0-9 /&()+_-]{1,40}?)\s*\**\s*[:：]\s*`?(#[0-9a-fA-F]{3,8})/gm;
+  // Form A: "- **Background:** `#FAFAFA`" — the colon may sit inside the
+  // bold markers (`**Name:**`) or outside them (`**Name**:`). Both variants
+  // are common in hand-authored DESIGN.md files, so we allow the colon in
+  // either position around the closing `**`.
+  const reA = /^[\s>*-]*\**\s*([A-Za-z][A-Za-z0-9 /&()+_-]{1,40}?)\s*[:：]?\s*\**\s*[:：]?\s*`?(#[0-9a-fA-F]{3,8})/gm;
   let m;
   while ((m = reA.exec(raw)) !== null) push(m[1], m[2]);
   // Form B: "**Stripe Purple** (`#533afd`)"
diff --git a/design-systems/totality-festival/DESIGN.md b/design-systems/totality-festival/DESIGN.md
new file mode 100644
index 000000000..acc3de053
--- /dev/null
+++ b/design-systems/totality-festival/DESIGN.md
@@ -0,0 +1,206 @@
+---
+name: Totality Festival Design System
+colors:
+  surface: "#121318"
+  surface-dim: "#121318"
+  surface-bright: "#38393f"
+  surface-container-lowest: "#0d0e13"
+  surface-container-low: "#1a1b21"
+  surface-container: "#1e1f25"
+  surface-container-high: "#292a2f"
+  surface-container-highest: "#34343a"
+  on-surface: "#e3e1e9"
+  on-surface-variant: "#d0c6ab"
+  inverse-surface: "#e3e1e9"
+  inverse-on-surface: "#2f3036"
+  outline: "#999077"
+  outline-variant: "#4d4732"
+  surface-tint: "#e9c400"
+  primary: "#fff6df"
+  on-primary: "#3a3000"
+  primary-container: "#ffd700"
+  on-primary-container: "#705e00"
+  inverse-primary: "#705d00"
+  secondary: "#bdf4ff"
+  on-secondary: "#00363d"
+  secondary-container: "#00e3fd"
+  on-secondary-container: "#00616d"
+  tertiary: "#fcf3ff"
+  on-tertiary: "#3b2754"
+  tertiary-container: "#e7d1ff"
+  on-tertiary-container: "#6b5586"
+  error: "#ffb4ab"
+  on-error: "#690005"
+  error-container: "#93000a"
+  on-error-container: "#ffdad6"
+  background: "#121318"
+  on-background: "#e3e1e9"
+  surface-variant: "#34343a"
+typography:
+  headline-xl:
+    fontFamily: Space Grotesk
+    fontSize: 72px
+    fontWeight: "700"
+    lineHeight: 80px
+    letterSpacing: -0.04em
+  headline-lg:
+    fontFamily: Space Grotesk
+    fontSize: 48px
+    fontWeight: "600"
+    lineHeight: 56px
+    letterSpacing: -0.02em
+  headline-md:
+    fontFamily: Space Grotesk
+    fontSize: 32px
+    fontWeight: "600"
+    lineHeight: 40px
+  body-lg:
+    fontFamily: Inter
+    fontSize: 18px
+    fontWeight: "400"
+    lineHeight: 28px
+  body-md:
+    fontFamily: Inter
+    fontSize: 16px
+    fontWeight: "400"
+    lineHeight: 24px
+  label-md:
+    fontFamily: Space Grotesk
+    fontSize: 14px
+    fontWeight: "500"
+    lineHeight: 20px
+    letterSpacing: 0.1em
+rounded:
+  sm: 0.125rem
+  DEFAULT: 0.25rem
+  md: 0.375rem
+  lg: 0.5rem
+  xl: 0.75rem
+  full: 9999px
+spacing:
+  unit: 8px
+  container-max: 1280px
+  gutter: 24px
+  margin-mobile: 16px
+  margin-desktop: 64px
+components:
+  button-primary:
+    backgroundColor: "{colors.primary}"
+    textColor: "{colors.on-primary}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+    height: 48px
+  button-primary-hover:
+    backgroundColor: "{colors.primary-fixed}"
+  button-secondary:
+    backgroundColor: transparent
+    textColor: "{colors.secondary}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+    height: 48px
+  card-glass-level-2:
+    backgroundColor: rgba(52, 52, 58, 0.2)
+    rounded: "{rounded.xl}"
+    padding: "{spacing.gutter}"
+  input-field:
+    backgroundColor: "{colors.surface-container-lowest}"
+    textColor: "{colors.on-surface}"
+    typography: "{typography.body-md}"
+    rounded: "{rounded.lg}"
+    padding: 12px
+  hero-headline:
+    textColor: "{colors.primary}"
+    typography: "{typography.headline-xl}"
+  badge-celestial:
+    backgroundColor: "{colors.tertiary-container}"
+    textColor: "{colors.on-tertiary-container}"
+    typography: "{typography.label-md}"
+    rounded: "{rounded.full}"
+    padding: 4px
+---
+
+# Design System Inspired by Totality Festival
+
+> Category: Themed & Unique
+> Surface: web
+> A cosmic-premium, glassmorphic dark system that captures the visceral awe of a solar eclipse — obsidian surfaces, amber "corona" highlights, and cyan atmospheric accents.
+
+## 1. Visual Theme & Atmosphere
+
+"Cosmic Premium" — the visceral tension and awe of a solar eclipse. The aesthetic blends the stark mystery of deep space with the explosive brilliance of the solar corona. Surfaces appear as translucent obsidian slabs floating over nebula-like gradients. High-energy amber accents represent the "diamond ring" flash — they make the interface feel luminous and alive rather than heavy or muted.
+
+- **Visual style:** dark, glassmorphic, cinematic
+- **Color stance:** obsidian neutral, amber corona accent, cyan atmospheric
+- **Design intent:** Keep outputs recognizable as a premium festival / creator product; use radial gradients for backgrounds to simulate the circular nature of the eclipse.
+
+## 2. Color
+
+- **Primary:** `#fff6df` — Amber / white-gold, the solar corona and "diamond ring" flash. Used for critical CTAs and high-importance highlights.
+- **Primary Container:** `#ffd700` — Pure corona gold. Reserved for the single most important highlight on a screen.
+- **Secondary:** `#bdf4ff` — Soft cyan, the atmospheric thinning and ethereal glow of the sky during totality. Used for interactive states and secondary emphasis.
+- **Secondary Container:** `#00e3fd` — Vivid cyan for interactive ambient glow rims.
+- **Tertiary:** `#fcf3ff` — Faint lavender-white for subtle tinted highlights.
+- **Tertiary Container:** `#e7d1ff` — Deep indigo haze, celestial badges.
+- **Surface:** `#121318` — Obsidian / near-black foundation.
+- **Surface Container:** `#1e1f25` — Slightly elevated obsidian for cards.
+- **Surface Container High:** `#292a2f` — Elevated panels, active states.
+- **Text:** `#e3e1e9` — Warm off-white for primary body copy and headlines.
+- **Text Muted:** `#d0c6ab` — Warm parchment tone for metadata and labels.
+- **Outline:** `#999077` — Low-contrast warm gray for hairline borders.
+
+- Favor Primary (#fff6df) and Primary Container (#ffd700) for the "corona flash" moments — max 3 per screen.
+- Use Secondary (#bdf4ff / #00e3fd) for interactive states, never for decorative flourishes.
+- Surfaces stack as semi-transparent glass: `rgba(255, 255, 255, 0.05-0.1)` with `backdrop-filter: blur(20px)` and a 1px `rgba(255, 255, 255, 0.1)` inner border to simulate light refraction.
+
+## 3. Typography
+
+A dual-font strategy to balance cinematic impact with utility.
+
+- **Display / Headings:** Space Grotesk — geometric, technical, futuristic-astronomical tone. Tight letter spacing (`-0.02em` to `-0.04em`) on large headings to feel "locked" and monumental.
+- **Body / Long-form:** Inter — neutral, highly legible in low-light environments.
+- **Labels:** Space Grotesk with wide tracking (`0.1em`) and uppercase, to read as "coordinates" or "readouts" rather than UI chrome.
+
+Apply a subtle text-shadow or low-opacity primary-colored glow to `headline-xl` elements on the darkest backgrounds for a truly cinematic feel — radiant, not static.
+
+## 4. Layout & Spacing
+
+- **Grid:** 12-column fixed grid on desktop with generous outer margins (64–80px) to simulate the isolation of a celestial body in the void. Fluid model on mobile with 16px margins.
+- **Rhythm:** 8px base unit. Internal component spacing tight (8 / 16px); external section margins wide (64 / 80px) to create distinct "islands" of content.
+- **Max width:** 1280px for content containers.
+- **Negative space is a feature, not a cost.** Prefer breathing room over density.
+
+## 5. Elevation & Depth
+
+Depth is achieved through **glassmorphism** and light-based layering — not traditional drop shadows.
+
+- **Level 1 (Base):** Deep obsidian surface with an optional radial gradient vignette in `#1a1b21` → `#121318`.
+- **Level 2 (Panels):** Semi-transparent surfaces at `rgba(52, 52, 58, 0.2)` with `backdrop-filter: blur(20px)` and a 1px inner stroke at `rgba(255, 255, 255, 0.1)` to simulate refraction on a glass edge.
+- **Level 3 (Interactive / Active):** An **ambient glow** — a soft, diffused shadow tinted with Secondary (`#00e3fd`) or Primary Container (`#ffd700`), creating the impression of light bleeding from behind the object.
+
+## 6. Shapes
+
+Shape language is **soft-technical**. Geometric overall, but small corner radii soften aggression.
+
+- **Buttons, inputs:** `rounded-lg` (8px).
+- **Cards, featured containers:** `rounded-xl` (12px).
+- **Badges, pills:** `rounded-full`.
+- **Decorative elements:** circles and perfect arcs are encouraged to mirror the orbital / eclipse theme.
+
+## 7. Components
+
+- **Primary button:** Amber fill on obsidian, with a luminous amber glow on hover (mimics the diamond-ring flash). Space Grotesk label, uppercase, `0.1em` tracking.
+- **Secondary button:** Transparent fill, cyan outline and label — suggests the sky's transition during totality.
+- **Glass card (level 2):** `rgba(52,52,58,0.2)` + 20px blur + 1px inner white stroke + generous internal padding.
+- **Input field:** Anchored in the deepest surface (`#0d0e13`) for maximum contrast; cyan border on focus.
+- **Badges:** Pill-shaped with the tertiary container color; reserved for "celestial" metadata (status, live indicators).
+
+## 8. Do's & Don'ts
+
+- **Do** use Primary Container (`#ffd700`) no more than 3 times per screen — it's the flash, not the background.
+- **Do** pair large Space Grotesk headlines with a subtle primary-colored glow on dark surfaces.
+- **Do** tint shadows and glows with Primary or Secondary — never use pure gray shadows.
+- **Don't** use solid opaque fills for cards — break the glass illusion.
+- **Don't** combine amber and cyan glows on the same element — choose one depending on state (amber = highlight / CTA; cyan = interactive / focus).
+- **Don't** use sharp 0-radius corners except for data tables where structure outweighs warmth.
diff --git a/skills/social-media-dashboard/.preview/hero.png b/skills/social-media-dashboard/.preview/hero.png
new file mode 100644
index 000000000..385998a82
Binary files /dev/null and b/skills/social-media-dashboard/.preview/hero.png differ
diff --git a/skills/social-media-dashboard/SKILL.md b/skills/social-media-dashboard/SKILL.md
new file mode 100644
index 000000000..b47e1b94c
--- /dev/null
+++ b/skills/social-media-dashboard/SKILL.md
@@ -0,0 +1,118 @@
+---
+name: social-media-dashboard
+description: |
+  Creator-facing social media analytics dashboard in a single HTML file.
+  A platform switcher (X / LinkedIn / YouTube / Instagram), a row of KPI
+  cards (followers, engagement rate, likes, reposts), a follower-growth
+  chart, a "top post this week" preview, and a trending topics / top
+  comments side panel. Use when the brief mentions a "social media
+  dashboard", "creator analytics", "social analytics", or names specific
+  platforms (X, Twitter, LinkedIn, YouTube, Instagram, TikTok) together
+  with metrics like followers, engagement, likes, reposts.
+triggers:
+  - "social media dashboard"
+  - "social analytics"
+  - "creator dashboard"
+  - "creator analytics"
+  - "social media analytics"
+  - "社媒后台"
+  - "创作者后台"
+  - "社交媒体仪表盘"
+od:
+  mode: prototype
+  platform: desktop
+  scenario: creator
+  preview:
+    type: html
+    entry: index.html
+  design_system:
+    requires: true
+    sections: [color, typography, layout, components]
+  example_prompt: "Create a social media analytics dashboard using my Design System. Show X, LinkedIn, YouTube, Instagram with follower counts, engagement rate, likes, reposts, trending topics, and top comments."
+---
+
+# Social Media Dashboard Skill
+
+Produce a single-screen, creator-facing social media analytics dashboard.
+
+## Workflow
+
+1. **Read the active DESIGN.md** (injected above). Colors, typography,
+   spacing, radii, and component styling all come from it. Do not invent
+   new tokens; do not hard-code brand colors of the platforms — let the
+   DESIGN.md carry the visual identity, and reference platforms only by
+   name and monogram.
+2. **Identify** which platforms the brief calls out. Default to
+   X / LinkedIn / YouTube / Instagram if unspecified. Keep the platform
+   switcher to a single row, max 5 entries.
+3. **Generate plausible data**, never `Metric A / Metric B` placeholders.
+   Pick a creator persona (default: "AI / design indie creator") and
+   derive consistent numbers across the page — e.g. follower counts on
+   the switcher must match the KPI row when X is selected.
+4. **Lay out** the page top-to-bottom:
+   - **Header bar**: brand mark + section label ("ANALYTICS"), a
+     dark/light toggle, time-range tabs (7D · 30D · 90D · YTD), and a
+     creator avatar block on the right.
+   - **Hero strip**: a one-sentence summary in display type
+     ("You shipped 14 posts on X this week."), one supporting line of
+     metadata, and two CTAs ("Export report", "New post →").
+   - **Ask bar**: a single-line input styled as a search field, with
+     ghost-text suggestions ("top performing last week",
+     "comments from verified accounts").
+   - **Platform switcher**: 4 cards in one row, each with platform
+     monogram, name, follower count, and a `+X.XK this week` delta. The
+     active platform uses an elevated surface from DESIGN.md.
+   - **KPI row**: 4 cards — Followers · Engagement Rate · Likes (7D) ·
+     Reposts (7D). Each card has a label (uppercase, label-md), a big
+     value (display or headline-lg), a delta vs prior period, and a
+     small footnote ("vs. 4.4% last week", "Aug 9–17 · 14 posts").
+   - **Main grid (2/3 + 1/3)**:
+     - Left: **Follower Growth · 30D** — a full-width inline SVG line
+       chart with a soft area fill underneath, axis ticks at start /
+       midpoint / end, and two labelled annotation dots
+       ("Newsletter drop +842", "Viral thread +1.2K").
+     - Right: **Top Post · This Week** — a card showing the rendered
+       post (avatar, handle, post body, optional 16:9 media block), with
+       a header tag "click-through rate 5.6%" in the DS accent.
+   - **Lower grid (1/2 + 1/2)**:
+     - **Trending topics on this platform**: 5–7 chip-style rows with
+       topic name + post count + 24h delta sparkline (10 polyline
+       points, no labels).
+     - **Top comments**: 3 cards, each with avatar, handle (verified
+       check if relevant), comment body (2 lines max, ellipsised), and
+       a small `❤ 312 · 💬 18` row in muted text.
+5. **Write** one self-contained HTML document:
+   - `<!doctype html>` through `</html>`, CSS in one inline `<style>` block.
+   - CSS Grid for page-level layout; Flexbox inside cards.
+   - Semantic HTML: `<header>`, `<main>`, `<section>`, `<article>`.
+   - Tag each logical region with `data-od-id="slug"` for comment mode:
+     `header`, `hero`, `ask`, `platform-switcher`, `kpis`,
+     `follower-growth`, `top-post`, `trending`, `top-comments`.
+6. **Charts**: inline SVG only, no JS libraries.
+   - Line chart: `<path>` for the curve, a second `<path>` with low-alpha
+     fill for the area, two `<circle>` annotation dots with text labels.
+   - Sparklines: `<polyline>` with 10 points, no axes, ~16px tall.
+   - Use the DS accent for highlights and the DS `on-surface-variant` for
+     muted text. Accent appears at most three times on the page.
+7. **Self-check**:
+   - Every color resolves to a DESIGN.md token (or a documented
+     `rgba(token, alpha)` for glass surfaces).
+   - Numbers are internally consistent (switcher follower count matches
+     the active platform's KPI).
+   - Header bar and hero strip are sticky; main content scrolls.
+   - Density follows the DS mood: glass / cosmic DSes get more breathing
+     room and ambient glow on the active platform; clean / corporate DSes
+     tighten gaps and drop the glow.
+
+## Output contract
+
+Emit between `<artifact>` tags:
+
+```
+<artifact identifier="social-media-dashboard" type="text/html" title="Social Media Dashboard">
+<!doctype html>
+<html>...</html>
+</artifact>
+```
+
+One sentence before the artifact, nothing after.
diff --git a/skills/social-media-dashboard/example.html b/skills/social-media-dashboard/example.html
new file mode 100644
index 000000000..a12e8cced
--- /dev/null
+++ b/skills/social-media-dashboard/example.html
@@ -0,0 +1,1534 @@
+
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Open Design · Social Analytics</title>
+  <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=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    :root {
+      /* Totality Festival Design System — bind palette */
+      --surface: #121318;
+      --surface-dim: #121318;
+      --surface-bright: #38393f;
+      --surface-container-lowest: #0d0e13;
+      --surface-container-low: #1a1b21;
+      --surface-container: #1e1f25;
+      --surface-container-high: #292a2f;
+      --surface-container-highest: #34343a;
+      --on-surface: #e3e1e9;
+      --on-surface-variant: #d0c6ab;
+      --inverse-surface: #e3e1e9;
+      --inverse-on-surface: #2f3036;
+      --outline: #999077;
+      --outline-variant: #4d4732;
+      --surface-tint: #e9c400;
+      --primary: #fff6df;
+      --on-primary: #3a3000;
+      --primary-container: #ffd700;
+      --on-primary-container: #705e00;
+      --inverse-primary: #705d00;
+      --secondary: #bdf4ff;
+      --on-secondary: #00363d;
+      --secondary-container: #00e3fd;
+      --on-secondary-container: #00616d;
+      --tertiary: #fcf3ff;
+      --on-tertiary: #3b2754;
+      --tertiary-container: #e7d1ff;
+      --on-tertiary-container: #6b5586;
+      --error: #ffb4ab;
+      --on-error: #690005;
+      --error-container: #93000a;
+      --on-error-container: #ffdad6;
+      --background: #121318;
+      --on-background: #e3e1e9;
+      --surface-variant: #34343a;
+
+      /* Typography */
+      --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
+      --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+
+      /* Spacing */
+      --spacing-unit: 8px;
+      --gutter: 24px;
+      --margin-desktop: 64px;
+
+      /* Premium glass levels */
+      --glass-bg-level-1: rgba(52, 52, 58, 0.15);
+      --glass-bg-level-2: rgba(52, 52, 58, 0.25);
+      --glass-bg-level-3: rgba(52, 52, 58, 0.35);
+      --glass-border: rgba(255, 255, 255, 0.12);
+      --glass-border-strong: rgba(255, 255, 255, 0.2);
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-body);
+      background: radial-gradient(ellipse at 50% 0%, rgba(255, 215, 0, 0.08) 0%, transparent 60%),
+                  radial-gradient(ellipse at 100% 100%, rgba(0, 227, 253, 0.06) 0%, transparent 50%),
+                  var(--surface);
+      color: var(--on-surface);
+      line-height: 1.6;
+      overflow-x: hidden;
+      min-height: 100vh;
+    }
+
+    /* Header */
+    header {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+      background: rgba(18, 19, 24, 0.75);
+      backdrop-filter: blur(32px) saturate(180%);
+      border-bottom: 1px solid var(--glass-border);
+      padding: 16px var(--margin-desktop);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+    }
+
+    .header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .logo-block {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .logo-block img {
+      height: 32px;
+      width: auto;
+      filter: drop-shadow(0 0 8px rgba(0, 227, 253, 0.3));
+    }
+
+    .logo-label {
+      font-family: var(--font-display);
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--on-surface-variant);
+    }
+
+    .platform-switcher-inline {
+      display: flex;
+      gap: 8px;
+      margin-left: 24px;
+    }
+
+    .platform-pill {
+      font-family: var(--font-display);
+      font-size: 14px;
+      font-weight: 500;
+      padding: 6px 16px;
+      border-radius: 999px;
+      background: transparent;
+      color: var(--on-surface-variant);
+      border: 1px solid var(--outline-variant);
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    .platform-pill.active {
+      background: var(--glass-bg-level-2);
+      color: var(--primary);
+      border-color: var(--primary-container);
+      box-shadow: 0 0 32px rgba(255, 215, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    }
+
+    .header-right {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+
+    .time-range-tabs {
+      display: flex;
+      gap: 4px;
+    }
+
+    .time-tab {
+      font-family: var(--font-display);
+      font-size: 13px;
+      font-weight: 500;
+      padding: 6px 12px;
+      background: transparent;
+      color: var(--on-surface-variant);
+      border: none;
+      cursor: pointer;
+      transition: color 0.2s ease;
+    }
+
+    .time-tab.active {
+      color: var(--primary);
+    }
+
+    .user-block {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .user-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      filter: drop-shadow(0 0 6px rgba(0, 227, 253, 0.3));
+    }
+
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    .user-name {
+      font-family: var(--font-display);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--on-surface);
+    }
+
+    .user-role {
+      font-size: 12px;
+      color: var(--on-surface-variant);
+    }
+
+    /* Hero Strip */
+    .hero-strip {
+      position: sticky;
+      top: 65px;
+      z-index: 90;
+      background: rgba(18, 19, 24, 0.85);
+      backdrop-filter: blur(40px) saturate(180%);
+      border-bottom: 1px solid var(--glass-border);
+      padding: 32px var(--margin-desktop);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    }
+
+    .hero-content {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      gap: 32px;
+    }
+
+    .hero-text {
+      flex: 1;
+    }
+
+    .hero-headline {
+      font-family: var(--font-display);
+      font-size: 48px;
+      font-weight: 600;
+      line-height: 1.2;
+      letter-spacing: -0.02em;
+      color: var(--primary);
+      margin-bottom: 8px;
+      text-shadow: 0 0 40px rgba(255, 215, 0, 0.3);
+    }
+
+    .hero-meta {
+      font-size: 14px;
+      color: var(--on-surface-variant);
+    }
+
+    .hero-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    .btn {
+      font-family: var(--font-display);
+      font-size: 14px;
+      font-weight: 500;
+      letter-spacing: 0.05em;
+      padding: 12px 24px;
+      height: 48px;
+      border-radius: 8px;
+      border: none;
+      cursor: pointer;
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      white-space: nowrap;
+    }
+
+    .btn-primary {
+      background: var(--primary-container);
+      color: var(--on-primary);
+      box-shadow: 0 0 32px rgba(255, 215, 0, 0.5), 0 4px 16px rgba(0, 0, 0, 0.3);
+    }
+
+    .btn-primary:hover {
+      box-shadow: 0 0 48px rgba(255, 215, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4);
+      transform: translateY(-1px);
+    }
+
+    .btn-secondary {
+      background: rgba(189, 244, 255, 0.08);
+      color: var(--secondary);
+      border: 1px solid var(--secondary);
+      backdrop-filter: blur(12px);
+    }
+
+    .btn-secondary:hover {
+      background: rgba(189, 244, 255, 0.15);
+      box-shadow: 0 0 24px rgba(189, 244, 255, 0.2);
+    }
+
+    /* Ask Bar */
+    .ask-bar {
+      padding: 24px var(--margin-desktop);
+      background: var(--glass-bg-level-1);
+      backdrop-filter: blur(20px);
+    }
+
+    .ask-input {
+      width: 100%;
+      font-family: var(--font-body);
+      font-size: 16px;
+      padding: 16px 20px;
+      background: rgba(13, 14, 19, 0.6);
+      color: var(--on-surface);
+      border: 1px solid var(--glass-border);
+      border-radius: 8px;
+      transition: all 0.3s ease;
+      backdrop-filter: blur(8px);
+    }
+
+    .ask-input:focus {
+      outline: none;
+      border-color: var(--secondary-container);
+      box-shadow: 0 0 0 3px rgba(0, 227, 253, 0.15), 0 0 32px rgba(0, 227, 253, 0.2);
+      background: rgba(13, 14, 19, 0.8);
+    }
+
+    .ask-input::placeholder {
+      color: var(--on-surface-variant);
+      opacity: 0.6;
+    }
+
+    /* Main Container */
+    .container {
+      max-width: 1280px;
+      margin: 0 auto;
+      padding: 32px var(--margin-desktop);
+    }
+
+    /* Platform Switcher Cards */
+    .platform-cards {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+      margin-bottom: 32px;
+    }
+
+    .platform-card {
+      background: var(--glass-bg-level-1);
+      backdrop-filter: blur(24px) saturate(180%);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 24px;
+      cursor: pointer;
+      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+      position: relative;
+      overflow: hidden;
+    }
+
+    .platform-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+      opacity: 0;
+      transition: opacity 0.3s ease;
+    }
+
+    .platform-card.active::before {
+      opacity: 1;
+    }
+
+    .platform-card.active {
+      background: var(--glass-bg-level-2);
+      border-color: var(--primary-container);
+      box-shadow: 0 0 48px rgba(255, 215, 0, 0.3), 0 8px 32px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+    }
+
+    .platform-card:hover:not(.active) {
+      background: var(--glass-bg-level-2);
+      border-color: var(--glass-border-strong);
+      transform: translateY(-2px);
+    }
+
+    .platform-card-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+    }
+
+    .platform-icon {
+      font-size: 24px;
+    }
+
+    .platform-name {
+      font-family: var(--font-display);
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--on-surface);
+    }
+
+    .platform-handle {
+      font-size: 14px;
+      color: var(--on-surface-variant);
+    }
+
+    /* KPI Row */
+    .kpi-row {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 32px;
+    }
+
+    .kpi-card {
+      background: var(--glass-bg-level-1);
+      backdrop-filter: blur(24px) saturate(180%);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 24px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .kpi-card::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+    }
+
+    .kpi-label {
+      font-family: var(--font-display);
+      font-size: 12px;
+      font-weight: 500;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--on-surface-variant);
+      margin-bottom: 8px;
+    }
+
+    .kpi-value {
+      font-family: var(--font-display);
+      font-size: 36px;
+      font-weight: 700;
+      letter-spacing: -0.02em;
+      color: var(--on-surface);
+      margin-bottom: 4px;
+    }
+
+    .kpi-delta {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 14px;
+      color: var(--secondary);
+      filter: drop-shadow(0 0 8px rgba(189, 244, 255, 0.3));
+    }
+
+    .kpi-footnote {
+      font-size: 12px;
+      color: var(--on-surface-variant);
+      margin-top: 4px;
+    }
+
+    /* Main Grid - 3 columns */
+    .main-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 24px;
+      margin-bottom: 32px;
+    }
+
+    .chart-card {
+      background: var(--glass-bg-level-1);
+      backdrop-filter: blur(24px) saturate(180%);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 32px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .chart-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+    }
+
+    .chart-header {
+      font-family: var(--font-display);
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--on-surface);
+      margin-bottom: 24px;
+    }
+
+    .chart-svg {
+      width: 100%;
+      height: 280px;
+    }
+
+    .top-post-card {
+      background: var(--glass-bg-level-1);
+      backdrop-filter: blur(24px) saturate(180%);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 24px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .top-post-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+    }
+
+    .post-header-tag {
+      display: inline-block;
+      font-family: var(--font-display);
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.05em;
+      text-transform: uppercase;
+      color: var(--on-primary-container);
+      background: var(--primary-container);
+      padding: 4px 12px;
+      border-radius: 999px;
+      margin-bottom: 16px;
+      box-shadow: 0 0 24px rgba(255, 215, 0, 0.4);
+    }
+
+    .post-meta {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+
+    .post-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      border: 1px solid var(--glass-border);
+    }
+
+    .post-handle-block {
+      flex: 1;
+    }
+
+    .post-handle {
+      font-family: var(--font-display);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--on-surface);
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .verified-badge {
+      color: var(--secondary-container);
+      font-size: 16px;
+      filter: drop-shadow(0 0 6px rgba(0, 227, 253, 0.5));
+    }
+
+    .post-timestamp {
+      font-size: 12px;
+      color: var(--on-surface-variant);
+    }
+
+    .post-body {
+      font-size: 15px;
+      line-height: 1.5;
+      color: var(--on-surface);
+      margin-bottom: 12px;
+    }
+
+    .post-media {
+      position: relative;
+      width: 100%;
+      aspect-ratio: 16/9;
+      background: linear-gradient(135deg, rgba(255, 215, 0, 0.12) 0%, rgba(18, 19, 24, 0.9) 100%);
+      border: 1px solid rgba(255, 215, 0, 0.3);
+      border-radius: 8px;
+      margin-bottom: 12px;
+      box-shadow: 0 0 24px rgba(255, 215, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.05);
+      overflow: hidden;
+    }
+
+    .post-media svg {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+    }
+
+    .post-media-caption {
+      position: absolute;
+      left: 12px;
+      bottom: 10px;
+      font-family: var(--font-display);
+      font-size: 11px;
+      font-weight: 500;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--primary);
+      opacity: 0.85;
+    }
+
+    .post-engagement {
+      display: flex;
+      gap: 16px;
+      font-size: 13px;
+      color: var(--on-surface-variant);
+    }
+
+    /* Geo Map Card */
+    .geo-card {
+      background: var(--glass-bg-level-1);
+      backdrop-filter: blur(24px) saturate(180%);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 32px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .geo-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+    }
+
+    .geo-map {
+      width: 100%;
+      height: 200px;
+      position: relative;
+    }
+
+    .geo-dot {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--primary-container);
+      box-shadow: 0 0 16px rgba(255, 215, 0, 0.6);
+      animation: pulse 2s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { transform: scale(1); opacity: 1; }
+      50% { transform: scale(1.3); opacity: 0.7; }
+    }
+
+    .geo-stats {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+      margin-top: 20px;
+    }
+
+    .geo-stat {
+      font-size: 13px;
+    }
+
+    .geo-stat-label {
+      color: var(--on-surface-variant);
+    }
+
+    .geo-stat-value {
+      font-family: var(--font-display);
+      font-weight: 600;
+      color: var(--on-surface);
+    }
+
+    /* GitHub Contributors */
+    .contributors-grid {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 12px;
+      margin-top: 20px;
+    }
+
+    .contributor-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .contributor-avatar {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: 2px solid var(--glass-border);
+      box-shadow: 0 0 16px rgba(0, 227, 253, 0.2);
+      transition: all 0.3s ease;
+    }
+
+    .contributor-avatar:hover {
+      border-color: var(--secondary);
+      box-shadow: 0 0 24px rgba(0, 227, 253, 0.4);
+      transform: scale(1.05);
+    }
+
+    .contributor-name {
+      font-size: 11px;
+      color: var(--on-surface-variant);
+      text-align: center;
+    }
+
+    .contributor-commits {
+      font-size: 10px;
+      color: var(--on-surface-variant);
+      opacity: 0.7;
+    }
+
+    /* Lower Grid */
+    .lower-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    .trending-card, .comments-card {
+      background: var(--glass-bg-level-1);
+      backdrop-filter: blur(24px) saturate(180%);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      padding: 24px;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .trending-card::before, .comments-card::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 1px;
+      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
+    }
+
+    .section-title {
+      font-family: var(--font-display);
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--on-surface);
+      margin-bottom: 20px;
+    }
+
+    .trending-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid rgba(153, 144, 119, 0.15);
+    }
+
+    .trending-row:last-child {
+      border-bottom: none;
+    }
+
+    .trending-name {
+      font-family: var(--font-display);
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--on-surface);
+    }
+
+    .trending-count {
+      font-size: 13px;
+      color: var(--on-surface-variant);
+      margin-left: 8px;
+    }
+
+    .sparkline {
+      width: 60px;
+      height: 20px;
+    }
+
+    .comment-item {
+      padding: 16px 0;
+      border-bottom: 1px solid rgba(153, 144, 119, 0.15);
+    }
+
+    .comment-item:last-child {
+      border-bottom: none;
+    }
+
+    .comment-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 8px;
+    }
+
+    .comment-avatar {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      background: var(--glass-bg-level-2);
+      border: 1px solid var(--glass-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--primary);
+    }
+
+    .comment-handle {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--on-surface);
+    }
+
+    .comment-time {
+      font-size: 12px;
+      color: var(--on-surface-variant);
+    }
+
+    .comment-body {
+      font-size: 14px;
+      line-height: 1.5;
+      color: var(--on-surface-variant);
+      margin-bottom: 6px;
+    }
+
+    .comment-engagement {
+      font-size: 12px;
+      color: var(--on-surface-variant);
+    }
+
+    /* GitHub specific styles */
+    .github-chart-explosive {
+      position: relative;
+    }
+
+    .milestone-marker {
+      position: absolute;
+      font-size: 11px;
+      font-family: var(--font-display);
+      font-weight: 600;
+      color: var(--primary);
+      background: rgba(255, 215, 0, 0.15);
+      padding: 4px 8px;
+      border-radius: 4px;
+      border: 1px solid var(--primary-container);
+      box-shadow: 0 0 16px rgba(255, 215, 0, 0.3);
+    }
+  </style>
+</head>
+<body>
+  <!--
+    Global SVG defs — every avatar / brand mark on the page references
+    the same teal-to-mint gradient. Defining it once here avoids per-SVG
+    duplication and ensures consistent rendering when the page is
+    captured headlessly.
+  -->
+  <svg width="0" height="0" style="position: absolute" aria-hidden="true">
+    <defs>
+      <linearGradient id="brandRing" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" stop-color="#7CFFB4"/>
+        <stop offset="100%" stop-color="#1FE3D6"/>
+      </linearGradient>
+    </defs>
+  </svg>
+
+  <!-- Header -->
+  <header data-od-id="header">
+    <div class="header-left">
+      <div class="logo-block">
+        <svg class="brand-mark" viewBox="0 0 64 64" width="32" height="32" aria-label="Open Design">
+          <circle cx="32" cy="32" r="28" fill="#1c1c20" stroke="url(#brandRing)" stroke-width="3"/>
+          <path d="M22 22 L46 32 L26 36 L22 46 Z" fill="none" stroke="url(#brandRing)" stroke-width="2.6" stroke-linejoin="round" stroke-linecap="round"/>
+        </svg>
+        <span class="logo-label">ANALYTICS</span>
+      </div>
+      <div class="platform-switcher-inline">
+        <button class="platform-pill active" data-platform="x">X</button>
+        <button class="platform-pill" data-platform="github">GitHub</button>
+      </div>
+    </div>
+    <div class="header-right">
+      <div class="time-range-tabs">
+        <button class="time-tab active">7D</button>
+        <button class="time-tab">30D</button>
+        <button class="time-tab">90D</button>
+        <button class="time-tab">YTD</button>
+      </div>
+      <div class="user-block">
+        <svg class="user-avatar" viewBox="0 0 64 64" aria-label="Open Design avatar">
+          <circle cx="32" cy="32" r="30" fill="#1c1c20" stroke="url(#brandRing)" stroke-width="2.5"/>
+          <path d="M22 22 L46 32 L26 36 L22 46 Z" fill="none" stroke="url(#brandRing)" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"/>
+        </svg>
+        <div class="user-info">
+          <div class="user-name">Open Design</div>
+          <div class="user-role">Design agent · by Nexu Labs</div>
+        </div>
+      </div>
+    </div>
+  </header>
+
+  <!-- Hero Strip -->
+  <section class="hero-strip" data-od-id="hero">
+    <div class="hero-content">
+      <div class="hero-text">
+        <h1 class="hero-headline" id="hero-headline">Open Design shipped 9 posts on X this week.</h1>
+        <p class="hero-meta" id="hero-meta">Engagement up 0.6% vs. last week · Top thread reached 38K accounts</p>
+      </div>
+      <div class="hero-actions">
+        <button class="btn btn-secondary">Export report</button>
+        <button class="btn btn-primary" id="hero-cta">New post →</button>
+      </div>
+    </div>
+  </section>
+
+  <!-- Ask Bar -->
+  <section class="ask-bar" data-od-id="ask">
+    <input 
+      type="text" 
+      class="ask-input" 
+      id="ask-input"
+      placeholder="Ask across your posts — 'top performing last week', 'comments from verified accounts'..."
+    >
+  </section>
+
+  <!-- Main Container -->
+  <div class="container">
+    <!-- Platform Cards -->
+    <div class="platform-cards" data-od-id="platform-switcher">
+      <div class="platform-card active" data-platform-card="x">
+        <div class="platform-card-header">
+          <span class="platform-icon">𝕏</span>
+          <div>
+            <div class="platform-name">X (Twitter)</div>
+            <div class="platform-handle">@opendesignhq</div>
+          </div>
+        </div>
+      </div>
+      <div class="platform-card" data-platform-card="github">
+        <div class="platform-card-header">
+          <span class="platform-icon">⚙</span>
+          <div>
+            <div class="platform-name">GitHub</div>
+            <div class="platform-handle">nexu-io/open-design</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- KPI Row -->
+    <div class="kpi-row" data-od-id="kpis">
+      <div class="kpi-card">
+        <div class="kpi-label" id="kpi-1-label">Followers</div>
+        <div class="kpi-value" id="kpi-1-value">14,287</div>
+        <div class="kpi-delta">↗ <span id="kpi-1-delta">+2.3%</span></div>
+        <div class="kpi-footnote" id="kpi-1-footnote">vs. 13,968 last week</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label" id="kpi-2-label">Engagement Rate</div>
+        <div class="kpi-value" id="kpi-2-value">4.80%</div>
+        <div class="kpi-delta">↗ <span id="kpi-2-delta">+0.4%</span></div>
+        <div class="kpi-footnote" id="kpi-2-footnote">vs. 4.4% last week</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label" id="kpi-3-label">Likes (7D)</div>
+        <div class="kpi-value" id="kpi-3-value">1,842</div>
+        <div class="kpi-delta">↗ <span id="kpi-3-delta">+18%</span></div>
+        <div class="kpi-footnote" id="kpi-3-footnote">+280 vs. last week</div>
+      </div>
+      <div class="kpi-card">
+        <div class="kpi-label" id="kpi-4-label">Reposts (7D)</div>
+        <div class="kpi-value" id="kpi-4-value">487</div>
+        <div class="kpi-delta">↗ <span id="kpi-4-delta">+22%</span></div>
+        <div class="kpi-footnote" id="kpi-4-footnote">+88 vs. last week</div>
+      </div>
+    </div>
+
+    <!-- Main Grid (3 columns) -->
+    <div class="main-grid">
+      <!-- Growth Chart -->
+      <div class="chart-card" data-od-id="growth-chart">
+        <h2 class="chart-header" id="chart-title">Follower Growth · 30D</h2>
+        <div class="github-chart-explosive">
+          <svg class="chart-svg" id="chart-svg" viewBox="0 0 600 280"></svg>
+        </div>
+      </div>
+
+      <!-- Geo Distribution -->
+      <div class="geo-card" data-od-id="geo-distribution">
+        <h2 class="chart-header">Audience Geography</h2>
+        <div class="geo-map">
+          <svg width="100%" height="200" viewBox="0 0 400 200" preserveAspectRatio="xMidYMid meet">
+            <!-- Simplified world map: filled silhouettes for instant recognition -->
+            <g fill="rgba(208, 198, 171, 0.18)" stroke="rgba(208, 198, 171, 0.45)" stroke-width="0.6" stroke-linejoin="round">
+              <!-- North America -->
+              <path d="M 38,52 L 56,46 L 78,44 L 96,50 L 108,58 L 112,72 L 102,86 L 90,92 L 78,90 L 70,98 L 58,104 L 48,98 L 40,84 L 34,68 Z"/>
+              <!-- Central America strip -->
+              <path d="M 90,92 L 100,100 L 108,112 L 102,118 L 94,114 L 88,104 Z"/>
+              <!-- South America -->
+              <path d="M 110,118 L 122,120 L 130,134 L 134,150 L 130,164 L 122,176 L 114,168 L 110,150 L 108,134 Z"/>
+              <!-- Greenland -->
+              <path d="M 134,40 L 146,38 L 154,46 L 150,56 L 138,54 Z"/>
+              <!-- Europe -->
+              <path d="M 178,52 L 196,48 L 212,52 L 220,60 L 216,72 L 204,76 L 190,72 L 180,66 Z"/>
+              <!-- Africa -->
+              <path d="M 196,82 L 218,80 L 230,90 L 234,108 L 230,128 L 220,142 L 208,148 L 196,140 L 188,124 L 186,104 L 192,90 Z"/>
+              <!-- Middle East / South Asia bridge -->
+              <path d="M 230,80 L 248,76 L 256,86 L 252,96 L 240,98 L 230,92 Z"/>
+              <!-- Asia (main mass) -->
+              <path d="M 220,52 L 248,46 L 280,44 L 308,48 L 326,58 L 332,72 L 322,84 L 304,88 L 286,84 L 268,82 L 250,76 L 232,68 L 222,60 Z"/>
+              <!-- Southeast Asia islands -->
+              <path d="M 296,98 L 308,100 L 318,108 L 312,116 L 300,114 Z"/>
+              <!-- Australia -->
+              <path d="M 308,138 L 332,136 L 346,144 L 344,156 L 328,162 L 314,158 L 306,150 Z"/>
+              <!-- Japan -->
+              <path d="M 332,68 L 340,72 L 338,82 L 332,80 Z"/>
+              <!-- UK / Ireland -->
+              <path d="M 178,60 L 184,58 L 184,66 L 178,66 Z"/>
+              <!-- New Zealand -->
+              <path d="M 358,164 L 366,168 L 364,176 L 358,172 Z"/>
+            </g>
+
+            <!-- Audience cluster dots, anchored on real continents -->
+            <circle cx="78" cy="72" r="6" class="geo-dot" style="animation-delay: 0s"/>     <!-- USA -->
+            <circle cx="200" cy="62" r="8" class="geo-dot" style="animation-delay: 0.3s"/>   <!-- Europe -->
+            <circle cx="276" cy="62" r="5" class="geo-dot" style="animation-delay: 0.6s"/>   <!-- China -->
+            <circle cx="334" cy="74" r="4" class="geo-dot" style="animation-delay: 0.9s"/>   <!-- Japan -->
+            <circle cx="120" cy="146" r="5" class="geo-dot" style="animation-delay: 1.2s"/>  <!-- Brazil -->
+            <circle cx="328" cy="148" r="4" class="geo-dot" style="animation-delay: 1.5s"/>  <!-- Australia -->
+          </svg>
+        </div>
+        <div class="geo-stats">
+          <div class="geo-stat">
+            <div class="geo-stat-label">North America</div>
+            <div class="geo-stat-value">38%</div>
+          </div>
+          <div class="geo-stat">
+            <div class="geo-stat-label">Europe</div>
+            <div class="geo-stat-value">31%</div>
+          </div>
+          <div class="geo-stat">
+            <div class="geo-stat-label">Asia-Pacific</div>
+            <div class="geo-stat-value">22%</div>
+          </div>
+          <div class="geo-stat">
+            <div class="geo-stat-label">Other</div>
+            <div class="geo-stat-value">9%</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Top Post / Contributors -->
+      <div class="top-post-card" data-od-id="top-post">
+        <div id="post-section">
+          <div class="post-header-tag" id="post-tag">Click-through rate 5.8%</div>
+          <div class="post-meta">
+            <svg class="post-avatar" viewBox="0 0 64 64" aria-label="Open Design avatar">
+              <circle cx="32" cy="32" r="30" fill="#1c1c20" stroke="url(#brandRing)" stroke-width="2.5"/>
+              <path d="M22 22 L46 32 L26 36 L22 46 Z" fill="none" stroke="url(#brandRing)" stroke-width="2.4" stroke-linejoin="round" stroke-linecap="round"/>
+            </svg>
+            <div class="post-handle-block">
+              <div class="post-handle">
+                @opendesignhq
+                <span class="verified-badge">✓</span>
+              </div>
+              <div class="post-timestamp">4h</div>
+            </div>
+          </div>
+          <div class="post-body" id="post-body">
+            Live artifacts just shipped. Paste a DESIGN.md, get a dashboard that actually ticks. Video below.
+          </div>
+          <div class="post-media" aria-label="Video thumbnail">
+            <svg viewBox="0 0 320 180" preserveAspectRatio="xMidYMid slice">
+              <defs>
+                <radialGradient id="postMediaGlow" cx="50%" cy="50%" r="55%">
+                  <stop offset="0%" stop-color="rgba(255,215,0,0.55)"/>
+                  <stop offset="60%" stop-color="rgba(255,215,0,0.15)"/>
+                  <stop offset="100%" stop-color="rgba(18,19,24,0)"/>
+                </radialGradient>
+                <linearGradient id="postMediaLine" x1="0%" y1="100%" x2="100%" y2="0%">
+                  <stop offset="0%" stop-color="rgba(189,244,255,0.0)"/>
+                  <stop offset="50%" stop-color="rgba(189,244,255,0.65)"/>
+                  <stop offset="100%" stop-color="rgba(255,215,0,0.95)"/>
+                </linearGradient>
+              </defs>
+              <rect width="320" height="180" fill="rgba(13,14,19,0.85)"/>
+              <circle cx="160" cy="92" r="80" fill="url(#postMediaGlow)"/>
+              <!-- Faint chart curve evoking the live dashboard inside the video -->
+              <path d="M 8,148 C 60,140 90,128 120,114 S 180,84 220,68 S 280,38 312,30"
+                    fill="none" stroke="url(#postMediaLine)" stroke-width="2.5" stroke-linecap="round"/>
+              <!-- Three pulse dots along the curve, suggesting live data -->
+              <circle cx="120" cy="114" r="3.5" fill="rgba(189,244,255,0.9)"/>
+              <circle cx="220" cy="68" r="4" fill="rgba(255,215,0,0.95)"/>
+              <circle cx="312" cy="30" r="3.5" fill="rgba(255,215,0,0.9)"/>
+              <!-- Play icon centered -->
+              <g transform="translate(146,80)">
+                <circle cx="14" cy="14" r="14" fill="rgba(18,19,24,0.6)" stroke="rgba(255,215,0,0.9)" stroke-width="1.5"/>
+                <path d="M 11,8 L 11,20 L 21,14 Z" fill="rgba(255,215,0,0.95)"/>
+              </g>
+            </svg>
+            <span class="post-media-caption">Live · 0:22</span>
+          </div>
+          <div class="post-engagement" id="post-engagement">
+            <span>❤ <span id="post-likes">312</span></span>
+            <span>🔁 <span id="post-reposts">48</span></span>
+            <span>💬 <span id="post-comments">22</span></span>
+          </div>
+        </div>
+
+        <div id="contributors-section" style="display: none;">
+          <h3 class="section-title">Top Contributors</h3>
+          <div class="contributors-grid" id="contributors-grid"></div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Lower Grid -->
+    <div class="lower-grid">
+      <!-- Trending -->
+      <div class="trending-card" data-od-id="trending">
+        <h3 class="section-title" id="trending-title">Trending in AI × Design</h3>
+        <div id="trending-list">
+          <div class="trending-row">
+            <div>
+              <span class="trending-name">design.md</span>
+              <span class="trending-count">142 posts</span>
+            </div>
+            <svg class="sparkline" viewBox="0 0 60 20">
+              <polyline points="0,15 10,12 20,14 30,10 40,8 50,5 60,3" fill="none" stroke="var(--primary)" stroke-width="2"/>
+            </svg>
+          </div>
+          <div class="trending-row">
+            <div>
+              <span class="trending-name">claude design</span>
+              <span class="trending-count">98 posts</span>
+            </div>
+            <svg class="sparkline" viewBox="0 0 60 20">
+              <polyline points="0,18 10,16 20,14 30,12 40,9 50,7 60,4" fill="none" stroke="var(--primary)" stroke-width="2"/>
+            </svg>
+          </div>
+          <div class="trending-row">
+            <div>
+              <span class="trending-name">live artifacts</span>
+              <span class="trending-count">87 posts</span>
+            </div>
+            <svg class="sparkline" viewBox="0 0 60 20">
+              <polyline points="0,16 10,15 20,13 30,11 40,10 50,6 60,2" fill="none" stroke="var(--primary)" stroke-width="2"/>
+            </svg>
+          </div>
+          <div class="trending-row">
+            <div>
+              <span class="trending-name">vibecoding</span>
+              <span class="trending-count">72 posts</span>
+            </div>
+            <svg class="sparkline" viewBox="0 0 60 20">
+              <polyline points="0,17 10,16 20,15 30,13 40,11 50,8 60,5" fill="none" stroke="var(--primary)" stroke-width="2"/>
+            </svg>
+          </div>
+          <div class="trending-row">
+            <div>
+              <span class="trending-name">agent os</span>
+              <span class="trending-count">64 posts</span>
+            </div>
+            <svg class="sparkline" viewBox="0 0 60 20">
+              <polyline points="0,18 10,17 20,16 30,14 40,12 50,10 60,7" fill="none" stroke="var(--primary)" stroke-width="2"/>
+            </svg>
+          </div>
+          <div class="trending-row">
+            <div>
+              <span class="trending-name">dogfooding</span>
+              <span class="trending-count">58 posts</span>
+            </div>
+            <svg class="sparkline" viewBox="0 0 60 20">
+              <polyline points="0,19 10,18 20,17 30,15 40,14 50,11 60,8" fill="none" stroke="var(--primary)" stroke-width="2"/>
+            </svg>
+          </div>
+        </div>
+      </div>
+
+      <!-- Top Comments -->
+      <div class="comments-card" data-od-id="top-comments">
+        <h3 class="section-title" id="comments-title">Top Comments · This Week</h3>
+        <div id="comments-list">
+          <div class="comment-item">
+            <div class="comment-meta">
+              <div class="comment-avatar">JD</div>
+              <span class="comment-handle">@designerjames</span>
+              <span class="verified-badge">✓</span>
+              <span class="comment-time">2d</span>
+            </div>
+            <div class="comment-body">This is insane. The annotation dots on the chart especially — that's the level of craft I want from design tools.</div>
+            <div class="comment-engagement">❤ 87 · 💬 12</div>
+          </div>
+          <div class="comment-item">
+            <div class="comment-meta">
+              <div class="comment-avatar">SK</div>
+              <span class="comment-handle">@sarahkim_design</span>
+              <span class="comment-time">3d</span>
+            </div>
+            <div class="comment-body">Finally — a design system tool that doesn't feel like it was built by engineers for engineers. The glass aesthetic is 🔥</div>
+            <div class="comment-engagement">❤ 64 · 💬 8</div>
+          </div>
+          <div class="comment-item">
+            <div class="comment-meta">
+              <div class="comment-avatar">MC</div>
+              <span class="comment-handle">@mikecode</span>
+              <span class="verified-badge">✓</span>
+              <span class="comment-time">5d</span>
+            </div>
+            <div class="comment-body">Tried the live artifacts preview today. Went from DESIGN.md → working dashboard in 90 seconds. This changes everything.</div>
+            <div class="comment-engagement">❤ 112 · 💬 24</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    // Real GitHub contributors — only verified avatar IDs to avoid 404s
+    const githubContributors = [
+      { login: "pftom", avatar: "https://avatars.githubusercontent.com/u/26423749?v=4", contributions: 26 },
+      { login: "lefarcen", avatar: "https://avatars.githubusercontent.com/u/20859779?v=4", contributions: 18 },
+      { login: "Sid-Qin", avatar: "https://avatars.githubusercontent.com/u/201593046?v=4", contributions: 17 },
+      { login: "nettee", avatar: "https://avatars.githubusercontent.com/u/3953668?v=4", contributions: 10 },
+      { login: "alchemistklk", avatar: "https://avatars.githubusercontent.com/u/56862773?v=4", contributions: 8 }
+    ];
+
+    // Platform data
+    const platformData = {
+      x: {
+        heroHeadline: "Open Design shipped 9 posts on X this week.",
+        heroMeta: "Engagement up 0.6% vs. last week · Top thread reached 38K accounts",
+        heroCta: "New post →",
+        askPlaceholder: "Ask across your posts — 'top performing last week', 'comments from verified accounts'...",
+        kpis: [
+          { label: "Followers", value: 14287, format: "int", delta: "+2.3%", footnote: "vs. 13,968 last week" },
+          { label: "Engagement Rate", value: 4.8, format: "percent", delta: "+0.4%", footnote: "vs. 4.4% last week" },
+          { label: "Likes (7D)", value: 1842, format: "int", delta: "+18%", footnote: "+280 vs. last week" },
+          { label: "Reposts (7D)", value: 487, format: "int", delta: "+22%", footnote: "+88 vs. last week" }
+        ],
+        chartTitle: "Follower Growth · 30D",
+        chartType: "smooth",
+        chartAnnotations: [
+          { x: 180, y: 120, label: "Thread: live artifacts +412" },
+          { x: 480, y: 60, label: "Launch week +1.1K" }
+        ],
+        postTag: "Click-through rate 5.8%",
+        postBody: "Live artifacts just shipped. Paste a DESIGN.md, get a dashboard that actually ticks. Video below.",
+        postEngagement: { likes: 312, reposts: 48, comments: 22 },
+        trendingTitle: "Trending in AI × Design",
+        commentsTitle: "Top Comments · This Week"
+      },
+      github: {
+        heroHeadline: "Open Design hit 30K stars on GitHub — 9 days in.",
+        heroMeta: "Explosive growth: 3 days → 10K, 9 days → 30K · 127 contributors total",
+        heroCta: "New release →",
+        askPlaceholder: "Ask across your repo — 'stale PRs', 'issues tagged good-first-issue'...",
+        kpis: [
+          { label: "Stars", value: 30124, format: "int", delta: "+3,284%", footnote: "9 days since launch" },
+          { label: "Forks", value: 2847, format: "int", delta: "+412%", footnote: "vs. 556 at day 3" },
+          { label: "Pull Requests (7D)", value: 38, format: "int", delta: "+156%", footnote: "18 merged this week" },
+          { label: "Contributors", value: 127, format: "int", delta: "+217%", footnote: "vs. 40 at day 3" }
+        ],
+        chartTitle: "Star Growth · Explosive Trajectory (9D)",
+        chartType: "explosive",
+        chartAnnotations: [
+          { x: 180, y: 180, label: "Day 3 · 10K stars" },
+          { x: 540, y: 20, label: "Day 9 · 30K stars" }
+        ],
+        postTag: "127 contributors · 30K stars",
+        postBody: "From 0 → 30K stars in 9 days. This is the fastest-growing design tool in GitHub history.",
+        postEngagement: { likes: 842, reposts: 217, comments: 94 },
+        trendingTitle: "Top Issues & Discussions",
+        commentsTitle: "Top Issue Replies · This Week"
+      }
+    };
+
+    let activePlatform = 'x';
+    let chartBaseData = [];
+
+    // Generate chart data based on platform
+    function generateChartData(platform) {
+      if (platform === 'x') {
+        // Smooth follower growth
+        return Array.from({ length: 30 }, (_, i) => ({
+          x: i * 20,
+          y: 200 - (i * 4) + Math.sin(i / 3) * 20
+        }));
+      } else {
+        // Explosive GitHub star growth (9 days, steep curve)
+        return [
+          { x: 0, y: 250 },    // Day 0
+          { x: 60, y: 240 },   // Day 1
+          { x: 120, y: 220 },  // Day 2
+          { x: 180, y: 180 },  // Day 3: 10K milestone
+          { x: 240, y: 140 },  // Day 4
+          { x: 300, y: 110 },  // Day 5
+          { x: 360, y: 80 },   // Day 6
+          { x: 420, y: 60 },   // Day 7
+          { x: 480, y: 40 },   // Day 8
+          { x: 540, y: 20 }    // Day 9: 30K milestone
+        ];
+      }
+    }
+
+    // Initialize chart
+    function renderChart() {
+      const svg = document.getElementById('chart-svg');
+      svg.innerHTML = '';
+      const data = platformData[activePlatform];
+      chartBaseData = generateChartData(activePlatform);
+
+      // Background grid
+      for (let i = 0; i <= 5; i++) {
+        const y = i * 56;
+        const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+        line.setAttribute('x1', '0');
+        line.setAttribute('y1', y);
+        line.setAttribute('x2', '600');
+        line.setAttribute('y2', y);
+        line.setAttribute('stroke', 'var(--outline-variant)');
+        line.setAttribute('stroke-width', '0.5');
+        line.setAttribute('opacity', '0.3');
+        svg.appendChild(line);
+      }
+
+      // Area fill
+      const areaPoints = chartBaseData.map(d => `${d.x},${d.y}`).join(' ');
+      const area = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
+      area.setAttribute('points', `0,280 ${areaPoints} 600,280`);
+      area.setAttribute('fill', 'rgba(255, 215, 0, 0.12)');
+      svg.appendChild(area);
+
+      // Line
+      const linePoints = chartBaseData.map(d => `${d.x},${d.y}`).join(' ');
+      const line = document.createElementNS('http://www.w3.org/2000/svg', 'polyline');
+      line.setAttribute('points', linePoints);
+      line.setAttribute('fill', 'none');
+      line.setAttribute('stroke', 'var(--primary-container)');
+      line.setAttribute('stroke-width', activePlatform === 'github' ? '4' : '3');
+      line.setAttribute('filter', 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.4))');
+      line.id = 'chart-line';
+      svg.appendChild(line);
+
+      // Annotations — place label above the dot when there's room overhead,
+      // otherwise place it below so the text never collides with the curve.
+      data.chartAnnotations.forEach(ann => {
+        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        circle.setAttribute('cx', ann.x);
+        circle.setAttribute('cy', ann.y);
+        circle.setAttribute('r', '7');
+        circle.setAttribute('fill', 'var(--primary-container)');
+        circle.setAttribute('stroke', 'var(--surface)');
+        circle.setAttribute('stroke-width', '3');
+        circle.setAttribute('filter', 'drop-shadow(0 0 12px rgba(255, 215, 0, 0.6))');
+        svg.appendChild(circle);
+
+        // Anchor near edges so the label doesn't get cropped on the right side.
+        const anchor = ann.x > 540 ? 'end' : (ann.x < 60 ? 'start' : 'middle');
+        // Below the dot when the dot is too high to leave label room.
+        const placeBelow = ann.y < 40;
+        const labelY = placeBelow ? ann.y + 22 : ann.y - 14;
+
+        // Soft pill background behind the text so it stays legible across the
+        // gold gradient + chart line, without using a heavy rect.
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('x', ann.x);
+        text.setAttribute('y', labelY);
+        text.setAttribute('fill', 'var(--primary)');
+        text.setAttribute('font-size', '12');
+        text.setAttribute('font-family', 'var(--font-display)');
+        text.setAttribute('font-weight', '600');
+        text.setAttribute('text-anchor', anchor);
+        text.setAttribute('paint-order', 'stroke');
+        text.setAttribute('stroke', 'rgba(18, 19, 24, 0.85)');
+        text.setAttribute('stroke-width', '4');
+        text.setAttribute('stroke-linejoin', 'round');
+        text.setAttribute('filter', 'drop-shadow(0 0 8px rgba(255, 215, 0, 0.35))');
+        text.textContent = ann.label;
+        svg.appendChild(text);
+      });
+    }
+
+    // Render contributors
+    function renderContributors() {
+      const grid = document.getElementById('contributors-grid');
+      grid.innerHTML = '';
+      githubContributors.forEach(contributor => {
+        const item = document.createElement('div');
+        item.className = 'contributor-item';
+        item.innerHTML = `
+          <img src="${contributor.avatar}" alt="${contributor.login}" class="contributor-avatar"
+               onerror="this.style.display='none'; this.nextElementSibling.style.fontWeight='600';">
+          <div class="contributor-name">${contributor.login}</div>
+          <div class="contributor-commits">${contributor.contributions} commits</div>
+        `;
+        grid.appendChild(item);
+      });
+    }
+
+    // Switch platform
+    function switchPlatform(platform) {
+      activePlatform = platform;
+      const data = platformData[platform];
+
+      // Update hero
+      document.getElementById('hero-headline').textContent = data.heroHeadline;
+      document.getElementById('hero-meta').textContent = data.heroMeta;
+      document.getElementById('hero-cta').textContent = data.heroCta;
+
+      // Update ask bar
+      document.getElementById('ask-input').placeholder = data.askPlaceholder;
+
+      // Update KPIs
+      data.kpis.forEach((kpi, i) => {
+        document.getElementById(`kpi-${i + 1}-label`).textContent = kpi.label;
+        document.getElementById(`kpi-${i + 1}-value`).textContent = formatKpi(kpi);
+        document.getElementById(`kpi-${i + 1}-delta`).textContent = kpi.delta;
+        document.getElementById(`kpi-${i + 1}-footnote`).textContent = kpi.footnote;
+      });
+
+      // Update chart
+      document.getElementById('chart-title').textContent = data.chartTitle;
+      renderChart();
+
+      // Toggle between post and contributors
+      if (platform === 'github') {
+        document.getElementById('post-section').style.display = 'none';
+        document.getElementById('contributors-section').style.display = 'block';
+        renderContributors();
+      } else {
+        document.getElementById('post-section').style.display = 'block';
+        document.getElementById('contributors-section').style.display = 'none';
+      }
+
+      // Update top post/stats
+      document.getElementById('post-tag').textContent = data.postTag;
+      document.getElementById('post-body').textContent = data.postBody;
+      document.getElementById('post-likes').textContent = data.postEngagement.likes;
+      document.getElementById('post-reposts').textContent = data.postEngagement.reposts;
+      document.getElementById('post-comments').textContent = data.postEngagement.comments;
+
+      // Update section titles
+      document.getElementById('trending-title').textContent = data.trendingTitle;
+      document.getElementById('comments-title').textContent = data.commentsTitle;
+
+      // Update active states
+      document.querySelectorAll('.platform-pill').forEach(pill => {
+        pill.classList.toggle('active', pill.dataset.platform === platform);
+      });
+      document.querySelectorAll('.platform-card').forEach(card => {
+        card.classList.toggle('active', card.dataset.platformCard === platform);
+      });
+    }
+
+    // Format a KPI value for display, based on its `format` flag.
+    function formatKpi(kpi) {
+      if (kpi.format === 'percent') return kpi.value.toFixed(2) + '%';
+      if (typeof kpi.value === 'number') return kpi.value.toLocaleString();
+      return String(kpi.value);
+    }
+
+    // Live updates — every 2 seconds, nudge each numeric KPI by a small,
+    // realistic delta. Counters tick up; the engagement rate jitters by a
+    // fraction of a percent so it visibly breathes without drifting absurdly.
+    function animateNumbers() {
+      const data = platformData[activePlatform];
+      data.kpis.forEach((kpi, i) => {
+        const valueEl = document.getElementById(`kpi-${i + 1}-value`);
+        if (kpi.format === 'percent') {
+          // Random walk in ±0.04% range, clamped to a believable band.
+          kpi.value += (Math.random() - 0.5) * 0.08;
+          kpi.value = Math.max(3.5, Math.min(6.0, kpi.value));
+          valueEl.textContent = formatKpi(kpi);
+        } else if (typeof kpi.value === 'number') {
+          const delta = Math.floor(Math.random() * (activePlatform === 'github' ? 8 : 3)) + 1;
+          kpi.value += delta;
+          valueEl.textContent = formatKpi(kpi);
+        }
+      });
+
+      // Update post engagement
+      const postData = data.postEngagement;
+      postData.likes += Math.floor(Math.random() * (activePlatform === 'github' ? 4 : 2));
+      postData.reposts += Math.random() > 0.7 ? 1 : 0;
+      postData.comments += Math.random() > 0.8 ? 1 : 0;
+      document.getElementById('post-likes').textContent = postData.likes;
+      document.getElementById('post-reposts').textContent = postData.reposts;
+      document.getElementById('post-comments').textContent = postData.comments;
+
+      // Breathe the chart
+      if (activePlatform === 'x') {
+        const lastPoint = chartBaseData[chartBaseData.length - 1];
+        lastPoint.y += (Math.random() - 0.5) * 4;
+        lastPoint.y = Math.max(40, Math.min(200, lastPoint.y));
+        
+        const linePoints = chartBaseData.map(d => `${d.x},${d.y}`).join(' ');
+        const line = document.getElementById('chart-line');
+        if (line) {
+          line.setAttribute('points', linePoints);
+        }
+      }
+    }
+
+    // Event listeners
+    document.querySelectorAll('.platform-pill').forEach(pill => {
+      pill.addEventListener('click', () => switchPlatform(pill.dataset.platform));
+    });
+
+    document.querySelectorAll('.platform-card').forEach(card => {
+      card.addEventListener('click', () => switchPlatform(card.dataset.platformCard));
+    });
+
+    // Initialize
+    renderChart();
+    setInterval(animateNumbers, 2000);
+  </script>
+</body>
+</html>