Chart Prompts

Restyle my chart in the "Stops per Hour" 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: a driver scorecard from a last-mile delivery app. Warm paper-gray canvas, a personal header with avatar initials and a route badge, three white KPI tiles, and one heavy navy line measured against a thin gray benchmark. Breaks are cut out of the chart as clean white gaps.

Colors (use these exact values):
- Canvas: #F5F4F1. KPI tiles: #FFFFFF, 10px radius, shadow 0 1px 3px #1C1B19 at 7%.
- Primary series and avatar: #1E3A8A. Callout pill fill: #DBE3F4 with #1E3A8A text.
- Benchmark series (median, average, target): #9A968E.
- Text: #1C1B19 for the name, title and values, #6B6862 for the subtitle, labels and tile captions, #A19D95 for the y labels, tile notes and source line.
- Gridlines: #E6E3DD; baseline #CFCBC3; header divider #E6E3DD at 1.5px.
- Break or gap bands: #FFFFFF. Online status dot on the avatar: #16A34A with a 2.5px #F5F4F1 ring.
- Additional series if needed: #0F766E then #B45309, 3px.

Typography (Google Fonts): Manrope everywhere, tabular figures for all numbers.
- Avatar initials 17px 800 white. Name 18px 800. Route badge text 11.5px 800 uppercase with 0.8px tracking, white on a #1E3A8A 22px badge with 6px radius. Context line 12.5px 600.
- KPI caption 11.5px 600, KPI value 24px 800 with -0.6px tracking (first tile's value in #1E3A8A, others #1C1B19), KPI note 11.5px 600 set just right of the value.
- Title 25px 800 with -0.5px tracking. Subtitle 14px 500. Legend 12.5px (700 primary, 600 benchmark). Axis labels 12px 600. Band labels 11px 700. Source 11.5px 500.

Layout:
- Header band (y 30 to 92): a 52px #1E3A8A avatar circle with initials at x 64, the name and route badge beside it, and three 140 x 62 KPI tiles on the right (152px pitch) ending near x 916. A full-width divider at y 118.
- Title at y 158 and subtitle at y 184 from x 40; the legend sits on the subtitle's baseline at the right (a 24px 5px-thick navy swatch and a 24px 1.75px gray swatch).
- Plot from x 72 to 892, y 250 to 508. Source line at y 568.

Axes and grid:
- Horizontal gridlines only at round steps (0, 10, 20, 30), 1px; y labels right-aligned 12px left of the plot, no unit (the subtitle has it). X labels every hour, centered, clock format (8:00, 9:00).
- No axis lines or tick marks besides the baseline.

Marks:
- Line chart: the primary series is a 5px smooth monotone line with round caps. Break it into separate segments across pauses, and fill each pause with a white band covering the plot height plus 22px above it, holding a coffee cup outline icon (1.8px #6B6862 stroke, handle and two steam curls) near the top and a "Break" or "Lunch" label below it. The benchmark is a continuous 1.75px straight-segment line that runs through the gaps. Mark the peak with a 7px navy dot with a 3px white ring and a fully rounded #DBE3F4 pill above it ("Peak 26 stops/hr"), and label both series' final values just right of the last point.
- Bar chart: navy #1E3A8A bars with 4px top radius and 30% gaps, the benchmark as a short 1.75px #9A968E tick across each bar, pauses as white bands with the coffee cup icon and no bar, and the peak bar labeled with the #DBE3F4 pill.

Avoid: pure white canvas, cold grays, gradients, area fills, more than one saturated color, and bridging the primary line across breaks.

When you're done, render the chart and check that the KPI values and notes do not touch, every break shows a gap in the primary line with the benchmark still continuous, the claim in the title holds for every working point, and the end labels do not collide.