Chart Prompts

Restyle my chart in the "Race Pace" 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 analysis page of a runner's post-race report. Clean white paper, one thick coral line doing all the talking, a pale green terrain strip underneath for context, and compact condensed labels like a timing sheet.

Colors (use these exact values):
- Page: #FFFFFF.
- Primary data mark: #E4572E (race coral), also used for the eyebrow and the small event markers on the axis.
- Context area: #CFE3C4 (pale course green) fill with a 1.2px #6E9460 outline; #6E9460 also for that panel's labels.
- Ink: #1F2328 for the title, axis numbers and callouts. Secondary text: #6B7078. Gridlines: #E6E7EA.

Typography (Google Fonts):
- Lora 600 for the title only: 29px, #1F2328, sentence case, stating the finding.
- Barlow Semi Condensed for everything else: eyebrow 12.5px 600 uppercase, 2.2px letter-spacing, coral, items separated by middle dots; subtitle 16px 400 #6B7078; axis numbers 14px 500; callouts 13.5px 700 #1F2328; reference labels 13px 600; small panel captions 11px 600 uppercase with 1.6px letter-spacing; source 13px #6B7078.

Layout:
- 56px outer margins. Eyebrow at y 50, title at y 90, subtitle at y 118.
- Main plot from x 96 to x 836, y 176 to 392. The right 100px is reserved for end-of-line labels.
- A separate short context panel (about 72px tall, y 424 to 496) sits directly below the main plot and shares its x axis. It has its own small scale labelled only at 0 and the top value, never a second axis on the main plot.
- A 1px #E6E7EA footer rule at y 550; a legend key for event markers bottom left and "Source: illustrative data" bottom right.

Axes and grid:
- Main plot: 1px #E6E7EA horizontal gridlines every 15 seconds, labels right-aligned 12px left of the plot. For pace the axis is inverted (faster values higher) and a small "FASTER" caption with a 8px up triangle sits above the axis labels.
- Context panel: a 1px dotted (2 on, 3 off) top line at its maximum value, labels in #6E9460.
- Shared x axis: a 1.2px #1F2328 baseline under the context panel, 5px ticks, 14px labels 22px below; the unit ("km") trails the last label in #6B7078.
- Event markers (aid stations, milestones): 7px wide coral triangles pointing up, sitting just under the baseline.

Marks:
- Line chart: a 4.5px #E4572E monotone smooth line with round caps and joins, drawn over a 9px white halo so it cuts cleanly across gridlines. The context series is a filled #CFE3C4 area with a 1.2px #6E9460 top edge in the lower panel. Mark the extreme points with r 5.5 white circles with a 2.5px coral ring, each with a 0.8px ink leader and a label such as "Fastest: km 30, 4:38" (above for the best, below for the worst).
- Bar chart: vertical bars in #E4572E, 60% of the band, square corners, with the extreme bars labelled the same way; the context panel below uses #CFE3C4 bars or area with the #6E9460 outline.
- Reference averages: 1px #1F2328 dashed (4 on, 4 off) segments spanning only their period, labelled 13px 600 above the dash, or as a two-line end label (13px 500 #6B7078 caption, 15px 700 ink value) in the right margin.

Avoid: dual y axes, markers on every point, legends for single series, heavy borders, drop shadows, gradients, more than one saturated color.

When you're done, render the chart and check that the inverted axis reads faster-up, the extreme labels match the data, the average labels don't touch the line, and the context panel has its own scale without a second axis on the main plot.