Chart Prompts

Restyle my chart in the "Age Groups Served" 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 community program's annual review on a navy slide. Symmetric and calm with a gentle, playful touch: soft pastel bars, rounded pill labels down the middle, and one quiet highlight band on the row that matters.

Colors (use these exact values):
- Background: #111C33 (navy).
- Current period: #5EEAD4 (soft teal), always on the left. Comparison period: #FDA4AF (pale coral), always on the right.
- Spine pills: #1D2A47; the highlighted row's pill is solid #5EEAD4 with navy #111C33 text.
- Text: #EEF2FA primary, #8E9AB8 secondary, #66718F footer. Gridlines: #1F2B47. Highlight band: #FFFFFF at 5% opacity.

Typography (Google Fonts):
- Rubik throughout. Title 600 30px #EEF2FA, centered, stating the finding; subtitle 15px #8E9AB8 centered with both totals and the overall change; side headers 600 13px uppercase with 1.4px letter-spacing in their series colors; column captions 12px #8E9AB8 ("Participants", "AGE" in 600 11px); age pills 600 12.5px; bar value labels 500 13px #EEF2FA (700 in teal for the highlighted row); axis ticks 12px #8E9AB8; footer 12px #66718F.

Layout:
- Everything is symmetric about the center line x 480. Title at y 70, subtitle at y 100, side headers with 12px rounded (3px) swatches at y 138, column captions at y 176.
- A central spine 80px wide holds one pill per category (70px wide, fully rounded). Bars grow outward from the spine edges, 20px tall on a 30px pitch, with a common scale on both sides (330px for the largest gridline value).
- Oldest (or highest) category at the top.
- The highlighted row gets a full-width band from x 40 to x 920 (6px corner radius) and a teal note right-aligned at x 904 giving the change ("+82 participants, +38%").
- Footer at y 572: source at left, a counting rule at right.

Axes and grid:
- Dotted (2 on 4 off) vertical #1F2B47 gridlines at round values on both sides, labeled underneath on both sides. No axis lines, no frame.

Marks:
- Bar chart: mirrored horizontal bars with 5px rounded outer ends and square inner ends touching the spine, the value label 8px beyond each bar's outer end.
- Line chart: a mirrored "profile" instead of bars: for each side, a 2.5px smooth line through the bar-end positions with a 20% opacity fill back to the spine, dots (r 3.5) at each category, same spine pills and value labels.

Avoid: putting the two periods on the same side, differing scales on the two sides, heavy borders, gradients, saturated primaries, and more than one highlighted row.

When you're done, render the chart and check that both sides use the same scale, every value label clears its neighbors and the page edge, the highlight lands on the row named in the title, and the pills are exactly centered on the spine.