Chart Prompts

Restyle my chart in the "Game Flow" 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 game-flow graphic on a clean white box-score companion page. Sporty but disciplined: two team colors, crisp step lines, tinted blocks that make momentum swings obvious at a glance.

Colors (use these exact values):
- Page: #FFFFFF.
- Series 1: #2D6A4F (forest green). Series 2: #E76F51 (burnt orange). With more series, keep these two for the headline pair and add muted neutrals.
- Run tints: #D8E9E0 behind green runs, #FBE1D9 behind orange runs.
- Ink (title, baseline, header rule): #1B1F24. Secondary text: #6B7280. Gridlines: #E5E7EB. Period rules: #9CA3AF.

Typography (Google Fonts):
- Barlow: title 700 29px in ink, stating the finding; subtitle 400 15px #6B7280 with measure and unit; axis labels 400 14px #6B7280; period values 17px (700 for the period winner, 500 otherwise) in the series color; end values 700 24px in the series color.
- Barlow Condensed 600 for small caps-style labels: period heads ("Q1") 13px with 2px letter-spacing in #6B7280, series short names 13 to 14px with 1.5px letter-spacing in the series color; run labels ("17–0") 700 15px in the run's team color.

Layout:
- Two stacked 6 x 30 px color chips (green then orange) at the top left, title starting 14px to their right, subtitle 28px below.
- A score header above the plot: period heads centered over each period, then one row per series with that period's points, and short series names right-aligned just left of the plot. A 1.2px ink rule closes the header.
- Plot from x 72 to 836 and y 176 to 506. End labels to the right of the last point: big value, then the uppercase name under it; nudge the two apart to at least 38px.
- Footer: "Source: ..." left in 13px Barlow, a Barlow Condensed "FINAL 104–94" style summary right, 2px letter-spacing.

Axes and grid:
- Horizontal gridlines every 20 units, 1px #E5E7EB, no y-axis line; y labels right-aligned 12px left of the plot.
- Period boundaries as 1px #9CA3AF dashed (3 on, 3 off) vertical rules that run from the header rule to the baseline.
- 1.2px ink baseline with 5px ticks every 6 units and labels 24px below ("0 min" at the origin).

Marks:
- Line chart: step lines (horizontal then vertical at each change), 2.6px, round joins, each drawn over a 6px white halo so crossings stay clean; a 4.5px dot at each end. Stretches where one series scores 8+ in a row without reply get a full-height tinted block in that series' tint, from the opponent's last score to the run's last score, with the run label near the bottom of the block.
- Bar chart: vertical bars per period in the two team colors side by side (2px gap, square corners), period rules and the same score header on top; tint the background of the period with the biggest margin with the winner's tint and label it.

Avoid: smoothing the steps, gradients, shadows, more than two saturated colors, legends (label directly), and dual axes.

When you're done, render the chart and check that the header period values add up to the final totals, every shaded block really is an unanswered run of at least 8, and the end labels don't collide.