Chart Prompts

Restyle my chart in the "Rating Histogram" 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 membership section of a sports federation's annual report. Calm green on a pale green gray page, statistical and trustworthy, with clear threshold markers and one dark callout.

Colors (use these exact values):
- Page: #EEF2EE (pale green gray).
- Main bars: #2E6B4F (deep green). Sub-group stacked at the base: #A3CDB5 (light green).
- Ink and the dark callout box: #1C2B24. Secondary text: #5F6E66. Gridlines and rules: #D3DCD5.

Typography (Google Fonts):
- Vollkorn 600 for the title (32px, #1C2B24, sentence case, stating the finding) and the callout number (17px), with lining figures (font-variant-numeric: lining-nums).
- Lexend for everything else: eyebrow 11px 500 uppercase with 1.8px letter-spacing in #2E6B4F after an 8px green square; subtitle 14px 300 #5F6E66 with measure, unit, bin width and totals; axis labels 11 to 12px (300 for y, 400 for x); threshold labels 12px 600 #2E6B4F with an 11px 300 #5F6E66 second line; source 11px 300.

Layout:
- 56px margins. Eyebrow at y 44, title at y 88, subtitle at y 116, legend at y 150, plot from y 214 to 500, x from 76 to 840 (leave the right margin free for threshold labels).
- A footer rule at y 556 with the source on the left and a page number in Vollkorn 600 green on the right.

Axes and grid:
- Horizontal gridlines 0.8px #D3DCD5 at round counts with 11px right-aligned labels; a 1px #1C2B24 baseline; 5px ticks and 12px labels every few bins; a small axis title under the right end.

Marks:
- Bar chart (histogram): bins flush with a 1px hairline gap, square corners, deep green; the sub-group stacked at the base of each bin in light green. For an ordinary bar chart, use the same colors with bars at 80% of the band and a 1px gap aesthetic.
- Line chart: a 2.5px #2E6B4F line with a #2E6B4F area at 15% opacity; a second series as a 2px #A3CDB5 line with the area below at 40% opacity; same thresholds and callout.
- Thresholds: vertical 1.2px #2E6B4F lines from the baseline up to a 2.5px dot, each labeled to the right with name and value, and a second line with a computed count (e.g. "128 players at or above"). Stagger the label heights so they never collide, rising to the left.
- Median callout: a 1px #1C2B24 dashed (3 on 3) vertical line at the median, topped by a #1C2B24 box (116 x 38, 3px radius) with a small downward pointer; inside, "MEDIAN" in 9px 500 #A3CDB5 with 1.6px letter-spacing and the value in 17px Vollkorn #EEF2EE. Compute the median from the data.

Legend: 12px squares with 12px Lexend labels in one row above the plot.

Avoid: gaps wider than a hairline, rounded bars, gradients, shadows, bright accent colors, and a boxed plot frame.

When you're done, render the chart and check that the median and threshold counts match the data, the threshold labels fit inside the canvas, and the base stack is always shorter than its bin.