Chart Prompts

Restyle my chart in the "School Completion" 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 friendly, warm education equity brief. Pale apricot paper, rounded shapes, and a gap column that tells you at a glance who is behind in each group.

Colors (use these exact values):
- Page: #FFF4EA (pale apricot). Legend band: #FFFFFF at 75% opacity.
- Girls (first series): #C2410C (terracotta). Boys (second series): #0F766E (slate teal).
- Wealth ramp for the quintile glyphs, poorest to richest: #E9CDB5, #D9B090, #C4916E, #A6724F, #7F5436.
- Ink #2B1D14, secondary text #7A6556, gridlines and dividers #F1DDCB, zero line #C9AE97.

Typography (Google Fonts): Nunito throughout.
- Title 800, 25px, ink, stating the finding. Subtitle 400, 14px, #7A6556 with measure, unit, place and year.
- Legend group labels 800 11px uppercase with 1.5px letter-spacing; legend entries 700 14px in series colors.
- Row codes ("Q1") 800 12px with 1px letter-spacing; row names 700 15px ink; value labels 800 13px in the series color; gap pills 800 14px; axis labels 12px; source 12px.

Layout:
- 56px margins. Title and subtitle, then a full-width pill-shaped legend band (44px tall, fully rounded) with three groups separated by short vertical dividers: SEX (two 16px rounded squares), WEALTH ("Poorest", five swatches growing in height, "Richest") and GAP (a short explanation).
- A left label column (x 56 to about 200) with the row code, a tiny five-bar quintile meter (bars 4px wide, heights 4 to 12px, filled up to the row's quintile) and the row name below.
- Plot from x 212 to 772. A gap column centered at x 842.
- Rows 70px tall, separated by 1px dotted (2 on, 4 off) #F1DDCB lines.

Axes and grid:
- Vertical gridlines at 0, 25, 50, 75 and 100 in 1px #F1DDCB (zero line 1.4px #C9AE97), labels centered under the plot, "100%" on the last.

Marks:
- Bar chart: grouped horizontal bars, 22px thick with a 4px gap, girls on top, 6px rounded right ends and square left ends. Value labels 8px past each bar end in the bar color.
- Line chart: one 3px line per series with round caps, r 5 dots with a 2px apricot ring, value labels in the series color at the last point, and the gap between series shaded as a 12% terracotta band.
- Gap column: a 72 x 28 px white pill with a 1.5px outline in the color of the group that is behind, the absolute gap in points ("14 pts", "1 pt"), and "girls behind" or "boys behind" in 11.5px below.

Avoid: sharp corners, a boxed legend separate from the header band, pure black, cool grays, and gridlines denser than every 25 points.

When you're done, render the chart and check that each gap equals the difference of the two values, the pill color matches the group behind, "1 pt" is singular, and no value label touches the gap column.