Chart Prompts

Restyle my chart in the "Strokes Gained" 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 clean golf analytics player report. Calm fairway greens, bold numbers, gains and losses read at a glance.

Colors (use these exact values):
- Page: #EEF4EA (pale fairway green). Chart card: #F8FBF6 with a 1px #D3DECF border and 10px corner radius.
- Positive values: #2D6A4F (deep green). Negative values: #C9A66B (sand), with their value labels in the darker #8A6A34 for legibility.
- Total / summary mark: #3A3F3C (dark gray).
- Title ink: #1E2A22. Secondary text: #5F6E63. Gridlines: #D3DECF.

Typography (Google Fonts):
- Public Sans throughout. Eyebrow 12px 700 uppercase, 2px letter-spacing, green, after a 4 x 22 px green bar. Title 34px 800 with -0.6px letter-spacing stating the finding. Subtitle 15px #5F6E63 with measure and baseline.
- Value labels 20px 800 with tabular figures, signed with a plus sign or a true minus sign. Category labels 14px 700; a second line in 12px #5F6E63 for a supporting stat (e.g. field rank). Axis labels 12px, signed. "GAINED" and "LOST" axis captions 10px 700 uppercase with 1.6px letter-spacing in green and #8A6A34.

Layout:
- 40px margins. Eyebrow, title and subtitle at top; the chart sits in the rounded card from y 150 to 520; legend chips and source on one footer line at y 556.
- Categories in equal 150px slots; a dashed 1px #D3DECF divider separates the total column at the right.

Axes and grid:
- Horizontal 1px #D3DECF gridlines every 0.5 unit with signed labels; a 1.5px #1E2A22 zero line across the plot. No vertical axis line.

Marks:
- Bar chart: diverging vertical bars 88px wide with 3px corner radius, growing up from zero in #2D6A4F for gains and down in #C9A66B for losses. Value label 10px above a positive bar or 22px below the end of a negative bar. The total is a thin 24px dark gray bar in its own column with its label on top. Bars always start at zero.
- Line chart: a 2.5px #3A3F3C line over the zero line, with the area between line and zero filled #2D6A4F at 25% where positive and #C9A66B at 35% where negative; r4 dots in green or sand by sign, and signed value labels in 14px 800 at key points.

Avoid: gradients, 3D, red for losses (sand is the loss color), unsigned numbers, a legend that duplicates direct labels without adding meaning.

When you're done, render the chart and check that the total equals the sum of the categories, every value carries a sign, and the sand labels are readable against the pale card.