Build a single self-contained HTML file (no build step, no external assets other than a charting library from a CDN) that renders a personal fitness & wellness dashboard. Use the exact hardcoded data provided below — do not invent or fetch data. The dashboard must match the following specifications.
1. Layout & Structure

A responsive dashboard with a fixed top header (app title "Vitals" + a date range label "Last 7 Days") and a main content grid below it.
Use CSS Grid: a 4-column layout on desktop (≥1024px), 2-column on tablet, single-column stacked on mobile (<640px). No horizontal scrolling at any width.
The grid contains: a top row of 4 summary stat cards, a middle row with two larger chart cards (sleep + heart rate), and a bottom row with one wide chart card (steps) and one activity-ring card.

2. Summary Stat Cards (top row, 4 cards)

Each card shows a label, a large value, a unit, and a small trend indicator (▲/▼ + percent vs. previous week, green for good, red for bad). Use this data:

Steps today: 8,432 steps, ▲ 12% (green)
Resting heart rate: 58 bpm, ▼ 3% (green — lower is better)
Sleep last night: 7h 24m, ▲ 5% (green)
Active calories: 612 kcal, ▼ 8% (red)

3. Sleep Chart (chart card)

A stacked bar chart, one bar per day for 7 days (Mon–Sun), showing sleep stages in hours. Use these exact values (deep, REM, light) per day:

Mon: 1.5, 1.8, 4.2 — Tue: 1.2, 1.6, 4.0 — Wed: 1.8, 2.0, 4.5 — Thu: 1.0, 1.4, 3.8 — Fri: 1.6, 1.9, 4.3 — Sat: 2.0, 2.2, 4.8 — Sun: 1.7, 2.0, 4.4


Colors: deep #3B5BDB, REM #7048E8, light #A5B4FC. Include a legend and hover tooltips showing each stage's hours and the total.

4. Heart Rate Chart (chart card)

A smooth line chart of resting heart rate over 7 days: Mon 60, Tue 59, Wed 61, Thu 58, Fri 57, Sat 56, Sun 58 (bpm).
Line color #F03E3E, soft gradient fill beneath it (#F03E3E fading to transparent). Y-axis clamped roughly 50–70 bpm. Show a dashed horizontal reference line at the 7-day average with a label.

5. Steps Chart (wide chart card)

A bar chart of daily steps for 7 days: Mon 9,200, Tue 7,800, Wed 10,400, Thu 6,500, Fri 8,900, Sat 12,100, Sun 8,432.
Bars in #37B24D. Draw a dashed goal line at 10,000 steps; bars meeting/exceeding the goal render in a brighter #2F9E44, bars below in #37B24D. Tooltips show exact step counts.

6. Activity Ring Card

Three concentric progress rings (Apple-Watch style) drawn with SVG or canvas, animating from 0 to their values on load:

Move: 612 / 750 kcal (ring color #FF2D55)
Exercise: 38 / 30 min (ring color #A7F432)
Stand: 9 / 12 hours (ring color #00B0FF)


Show the numeric value/goal in the center or beside each ring.

7. Visual Design

Card style: white #FFFFFF cards on a light grey #F1F3F5 page background, 16px rounded corners, soft shadow (0 2px 8px rgba(0,0,0,0.06)), 20px internal padding.
Typography: system sans-serif stack. Card labels in muted grey #868E96 uppercase small caps; values in bold near-black #212529.
Include a light/dark mode toggle in the header. Dark mode: page #1A1B1E, cards #25262B, text #F1F3F5 — charts must remain legible (adjust grid/axis colors accordingly).

8. Interactivity

All charts have hover tooltips. Stat-card trend arrows have a subtle hover state.
Activity rings and chart bars animate in on initial load (ease-out, ~800ms).
The dark mode toggle persists visually for the session (in-memory only — do NOT use localStorage).

9. Constraints

Single .html file. All CSS and JS inline. Charting library (e.g. Chart.js) may be loaded from a CDN; everything else self-contained.
Must run by opening directly in a browser with no errors in the console.
Fully responsive per the breakpoints above; test mentally at 1280px, 768px, and 375px.
Code commented at each major section.

Success criteria for comparison: faithful rendering of the hardcoded data; chart correctness (stacking, goal lines, ring math); responsive layout quality across breakpoints; visual polish and dark-mode handling; clean code organization.