Chart Prompts

Restyle my chart in the "Resting Heart" style described below. Keep my data, chart type, title meaning and units; change only the presentation. Use the charting library this project already uses (plain SVG if there is none). If the library can't express a detail, draw it in a custom layer instead of dropping it. Measurements assume a 960 x 600 chart; scale them proportionally.

Mood: the metric detail screen of a phone health app. Soft, clinical and friendly: one white card with a gentle shadow, one coral data color, a big current value and plenty of white space.

Colors (use these exact values):
- Page behind the card: #F2F2F7 (cool light gray). Card: #FFFFFF.
- Data color: #F2545B (coral) for the line, dots, heart glyph, metric label and the range band (band as a vertical gradient of #F2545B at 22% to 12% opacity). Today column tint: #FDE8E9 at 55% opacity.
- Primary text and the dark "Today" pill: #1C1C1E. Secondary text and axis labels: #8E8E93. Gridlines and footer rule: #E5E5EA. Segmented control track: #EEEEF3.

Typography (Google Fonts):
- Inter throughout, with tabular figures (font-variant-numeric: tabular-nums).
- Metric label 15px 600 coral, beside a 24px coral heart glyph. Current value 52px 700 with -1.5px letter-spacing, followed 8px later by "bpm" in 20px 600 #8E8E93. Context line under it 14px 500 #8E8E93 ("Today, Sep 30 · 30-day average 60 bpm").
- Finding title right-aligned at the card's right padding: 20px 700 #1C1C1E, -0.3px letter-spacing ("Down 3 bpm since early September"), with the measure and unit under it in 13px 500 #8E8E93.
- Axis labels 12px 500 #8E8E93; legend 12.5px 500; callouts 11.5px 600 #1C1C1E; footer labels 12.5px 500 #8E8E93 with values 12.5px 700 #1C1C1E.

Layout:
- One card inset 24px from every edge with a 24px radius and a two-layer shadow (0 2px 2px black at 4%, 0 10px 16px black at 7%). 40px inner padding.
- Top left: label, big value, context line. Top right: a segmented control "D W M 6M Y" (track 236 x 34 px, radius 10; segments 46px wide; the selected one "M" is a white 28px-tall pill with radius 8 and a 1px soft shadow, text 13px 700 #1C1C1E; others 13px 500 #8E8E93). Under it, the right-aligned finding and subtitle.
- A small legend row, then the plot (about 250px tall) with the y-axis labels on the right, and a footer separated by a 1px #E5E5EA rule with three "Average / Lowest / Highest" stats on the left and the source on the right.

Axes and grid:
- Horizontal gridlines every 5 units, 1px #E5E5EA dashed 2 on 4; the baseline solid. No vertical gridlines and no axis lines.
- Y-axis labels on the right, 14px outside the plot. X labels at weekly intervals ("Sep 1", "Sep 8"...); the last position shows a dark pill "Today" (48 x 20, radius 10, #1C1C1E, white 11px 600 text) instead of a date.
- A subtle today marker: a 26px-wide rounded (radius 8) column of #FDE8E9 behind the last day spanning the full plot height.

Marks:
- Line chart: a 2.5px coral line with straight segments and round joins. A hollow dot on every day (r 3.2, white fill, 1.8px coral stroke). The latest point is a solid coral dot r 5.5 with a 2px white ring and a 11px coral halo at 16% opacity. The min-max range for each day is a translucent coral band drawn behind the line. Label the period high above its dot and the low below its dot ("High 63", "Low 58").
- Bar chart: slim coral bars (about 40% of the band) with 4px rounded tops, a thin coral range whisker (1.5px, 40% opacity) through each bar for min-max if the data has it, the latest bar solid coral and earlier bars coral at 70% opacity; value label only on the latest bar.

Labels and annotation:
- A legend at top left of the plot: a 20px coral line with a hollow dot marker for the series, and a 20 x 14 px rounded swatch of the band gradient for the range.
- Footer stats: "Average 60 bpm", "Lowest 58 bpm · Sep 23", "Highest 63 bpm · Sep 1", and "Pulseway · Source: illustrative data" right-aligned in 11.5px #8E8E93.

Avoid: dark mode, extra colors, heavy axis lines, smoothing that overshoots, gradients on the line itself, and crowding the header; the big number needs air.

When you're done, render the chart and check that the headline change and the high, low and average are arithmetically right for the data, the "Today" pill does not collide with a date label, and the selected segment reads clearly as selected.