Chart Prompts

Restyle my chart in the "Dumbbell" 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 polished policy-report chart comparing two moments. Warm paper tones, a clear before/after color pair and a table-like rhythm of rows.

Colors (use these exact values):
- Page: #FFFFFF, with alternating row bands in #F4EFE6 (pale sand) on every other row.
- Connectors: #C6C6C6.
- Before: #3A6EA5 (muted blue). After: #E8A33D (saffron). Use #B87A1E (darker saffron) for saffron text so it stays legible.
- Ink #222222, secondary text #6F6A62, gridlines #E4DED3, average guide #8C857A.

Typography (Google Fonts):
- Spectral 600 at 34px for the title, sentence case, stating the finding.
- Work Sans for everything else: subtitle 16px #6F6A62; column headers 11px 600 uppercase with 1.6px letter-spacing; category names 15px (700 for highlighted rows); endpoint values 12px 500 in the dot colors; difference column 15px with tabular figures (700 for highlighted rows); axis labels 12.5px; footer 12px.

Layout:
- 56px side margins. Title baseline y 66, subtitle y 98.
- The legend is written into the subtitle as colored words: "before" in bold #3A6EA5 and "after" in bold #B87A1E, with no separate legend.
- Column headers ("PROVINCE" left, "GAIN, PTS" right-aligned at x 904) above the rows. Names in a left column from x 56, the plot from x 250 to x 778, the difference column right-aligned at x 904.
- Rows 44px tall; bands run the full width from x 40 to x 920.

Axes and grid:
- Thin 1px #E4DED3 vertical gridlines at round values, labeled in % beneath the last row. No axis lines.
- A dashed vertical guide (1.2px, 4 on 3 off, #8C857A) at the overall average, extending 30px above the first row with its label ("Average after: 81.4%", 11.5px 600) beside it at the top.

Marks:
- Bar chart (dumbbell): for each row a 4px #C6C6C6 connector with round caps from the before value to the after value, a 10px (r 5) blue dot at before and a 10px saffron dot at after. Before values sit 11px left of the blue dot, right-aligned; after values 11px right of the saffron dot. Give value labels a 5px halo in the row's background color so the average guide never cuts through them. Sort rows by gap size, largest first.
- Line chart: draw each series as a line with 10px dots in the two colors, joined period by period with 4px #C6C6C6 connectors that show the gap between the series at each x, keeping the same row bands as horizontal stripes behind the plot and the colored words in the subtitle as the legend.
- The difference column shows the signed gap ("+18.5").

Labels and annotation:
- Bold the names and differences of the three largest gaps.
- Footer: "Source: ..." plus a short note explaining the sort order and the bold rows.

Avoid: a separate legend box, bars from zero, heavy borders, more than two data colors, gradients and shadows.

When you're done, render the chart and check that rows are sorted by gap, the three bold rows really are the three largest gaps, the average is computed from the data, and no value label is crossed by the average guide.