Chart Prompts

Restyle my chart in the "Gap Explainer" 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 late-evening explainer about a gap between two groups. Deep plum-black page, two soft pastel ends per row, the widest gaps ringed in white and the size of every gap spelled out in a pill.

Colors (use these exact values):
- Page: #1A1420 (plum-black). Vertical gridlines: #2A2231.
- Lower group: #B9A3E3 (soft lilac). Higher group: #9FE3C4 (pale mint). Both used for the dots and their value labels.
- Range bar between the two: #5C5266 at 75% opacity.
- Primary text, outlines of the widest gaps and their filled pills: #F1ECF4. Ordinary row labels: #CFC6D6. Secondary text and leader lines: #9A8FA3. Ordinary pills: #2C2334.

Typography (Google Fonts):
- Lora for the title (600, 30px, stating the finding) and callouts (italic 400, 14px).
- Hanken Grotesk for everything else: subtitle 15px #9A8FA3; legend 13.5px 600; row labels 14.5px 500 (700 #F1ECF4 for the widest rows); value labels 12px; pill text 12.5px 700; axis labels 12px; the "GAP" column header 11px 700 uppercase with 1.6px letter-spacing.

Layout:
- 56px left margin. Title at y 82, subtitle at 110, a legend row at y 140 (lilac dot, mint dot, a 26 x 14 white-outlined capsule for "Widest gaps").
- Rows 34px apart starting near y 196, sorted by gap size, largest first. Labels at x 56, the value axis from x 236 to 770, gap pills (60 x 22, fully rounded) centered at x 862.

Axes and grid:
- Four 1px #2A2231 vertical gridlines at round values, with "$40k" style labels under the last row. No horizontal gridlines, no axis lines.

Marks:
- Bar chart: each row is a floating range bar from the lower to the higher value, 8px tall, 4px radius, #5C5266 at 75%, capped by r 7 dots (lilac at the low end, mint at the high end), with each value 14px outside its dot in the dot's color. The top two rows get a 1.3px #F1ECF4 capsule outline 11px around the whole bar and a filled #F1ECF4 pill with plum text; other pills are #2C2334 with light text. Pills read "+48k".
- Line chart: draw both groups as 2.5px lines (lilac and mint) across periods, fill the band between them with #5C5266 at 35%, and print the gap for the latest period in the same pill at the right edge; ring the period with the widest gap in a white capsule.

Labels and annotation:
- Two italic serif callouts: one above the chart naming the widest gap, with a thin #9A8FA3 leader dropping to that row's outline; one beside the narrowest row, joined by a short horizontal leader. Compute both from the data.

Avoid: more than two data colors, saturated or neon hues, filled rectangles for the whole range, a legend box, and gridlines crossing the pill column.

When you're done, render the chart and check that rows are sorted by gap, every pill equals high minus low, only the widest rows are outlined, and callout text clears every dot and label.