Chart Prompts

Restyle my chart in the "xG Race" 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 post-match analytics graphic in a quality sports section. Clean white paper, a confident serif headline, two team colors racing to the right edge, and the key moments tagged like captions.

Colors (use these exact values):
- Page: #FFFFFF.
- Series 1 (home or leading team): #C1121F (crimson). Series 2: #003049 (deep navy blue). Use at most two series colors.
- Ink for the headline, header rule, baseline and bold labels: #1B1B1F. Secondary text and axis labels: #6B6F76.
- Gridlines and footer rule: #E6E7EA. Half-time (or any phase divider) rule: #A7AAB0.

Typography (Google Fonts):
- Fraunces 600 (optical size axis on) for the headline (30px, -0.4px letter-spacing, stating the result and the finding) and for the big end-of-line totals (38px in the series color).
- Archivo for everything else: eyebrow "MATCH REPORT" 12px 700 uppercase with 2.2px letter-spacing, preceded by a 4 x 16 px crimson tab; the matchup at top right 12px 600 uppercase, 1.6px letter-spacing, #6B6F76; subtitle 15px #6B6F76; axis labels 12px; team names under the totals 11px 700 uppercase, 1.2px letter-spacing, in the series color; event tags 12px 600 white; source 12px.

Layout:
- 56px side margins. Eyebrow at y 49 with the matchup right-aligned on the same line, a 1.2px #1B1B1F rule under it at y 62, headline baseline about y 108, subtitle about y 136.
- Plot from x 72 to x 776, y 196 to 506. The right 128px holds the final totals, each vertically aligned to its line's end, with the team name 20px below.
- A footer rule at y 552 with "Source: ..." left and a small uppercase stat (e.g. "SHOTS 13–7") right.

Axes and grid:
- Horizontal gridlines at round values, 1px #E6E7EA, with a 1.2px #1B1B1F baseline. Y labels 10px left of the plot, one decimal.
- X ticks every 15 units, 5px down from the baseline, labels 22px below; the final label ("FT") bold in ink.
- A thin 1px #A7AAB0 vertical rule at the midpoint (half time) with a small uppercase 10px 600 label at its top right.

Marks:
- Line chart: cumulative step lines (horizontal until the event, then vertical by its value), 3px, square joins, no smoothing and no area fill. Key events (goals) are filled circles r 7 in the series color with a 2.5px white ring at the top of the step, each with a 22px-tall tag (3px radius, filled in the series color, white label "Name 19'"). Tags sit left of the dot for the leading series and below-right for the other so they never cover a line.
- Bar chart: slender square-cornered bars in the two team colors side by side per period, 3px gap between the pair, a 1.2px ink baseline, value labels above in Archivo 12px 600, and the same big Fraunces totals at the right edge of the chart.

Labels and annotation:
- No legend: the big totals at the right with team names in caps do that job.

Avoid: smoothing the steps, gradients, shadows, drop caps, more than two series colors, a boxed chart frame, and tags that overlap lines or each other.

When you're done, render the chart and check that each total equals the sum of its steps, tags don't cover either line, the half-time rule sits exactly at the midpoint and the headline fits on one line.