Chart Prompts

Restyle my chart in the "Match Momentum" 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 match report page of a serious tennis section. Chalk-white paper, one heavy grotesque headline, a compact scoreboard, and a momentum trace that swings above and below a center line like a tug of war between two sides.

Colors (use these exact values):
- Page: #FBFAF6 (chalk white).
- Side A (above center): #C8553D (clay orange). Side B (below center): #1D3461 (navy).
- Ink for the title, center line and set rules: #1F1D1A. Secondary text: #77726A. Hairlines and faint guides: #DEDAD0.

Typography (Google Fonts):
- Libre Franklin throughout. Title 800, 31px, -0.6px letter-spacing, sentence case, stating the finding. Eyebrow 700 11px uppercase with 2.2px letter-spacing in #77726A, preceded by a 28 x 3 px clay-orange bar. Subtitle 400 14px #77726A naming the measure and which side favors whom.
- Scoreboard names 700 13px with 0.8px letter-spacing; set scores 15px tabular figures, 800 in the winner's color, 400 #77726A for the loser.
- Set headers: "SET 1" 600 10px with 1.6px letter-spacing in #77726A, and the set score below it in 800 16px in the set winner's color with a 400 muted en dash.
- Side labels ("CALDER", "VASKO") 800 12px with 2px letter-spacing in each side's color. Axis ticks 400 11px #77726A. Source 11px.

Layout:
- 64px side margins. Eyebrow, title and subtitle top left; a two-row scoreboard top right (x 676 to 904) between two 1px #DEDAD0 rules, each row led by a 4 x 18 px bar in the player's color.
- Plot from y 208 to 514 across the full width, with the center line at the vertical midpoint. Set headers sit just above the plot, centered over each set's span.
- A 1px #DEDAD0 footer rule at y 552 with a diamond legend on the left and "Source: illustrative data" on the right.

Axes and grid:
- A 1px #1F1D1A center line (the zero line). Two faint 0.8px #DEDAD0 guides at plus and minus half the range, dotted 2 on 4 off. No y labels; the side labels say who is ahead.
- Set boundaries: thin vertical rules, 0.8px #1F1D1A at 35% opacity, from just above the set headers to the baseline.
- X axis: a 0.8px baseline at 50% ink opacity, 5px ticks every 50 points, labels below.

Marks:
- Line chart: a smooth 1.8px line (monotone cubic) clipped at the center line so the part above is clay orange and the part below is navy; the area between the line and the center is filled clay orange at 20% opacity above and navy at 16% opacity below. For momentum, use a double exponential smoothing of +1/-1 per point (0.9 / 0.1 then 0.8 / 0.2) so single points nudge rather than kink the line.
- Events (break of serve here): filled diamonds 10 x 13 px in the winning side's color with a 1.5px #FBFAF6 outline, placed on the line.
- Bar chart: diverging vertical bars from the center line, clay orange upward for side A and navy downward for side B, square ends, about 70% of the band, no fill tint; keep the set rules, set headers and diamonds for events.

Avoid: gridlines on every step, a y axis with numbers, gradients, shadows, more colors than the two sides, and legends that repeat what the side labels say.

When you're done, render the chart and check that the fill and line switch color exactly at the center line, the set scores match the scoreboard, set headers never touch a peak of the line, and diamonds sit on the line.