Chart Prompts

Restyle my chart in the "Bill Compare" 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 year-over-year view in a dark utility app. Deep plum-gray, soft lilac for the present, dashed ghosts for the past and small green wins, reassuring and easy to scan.

Colors (use these exact values):
- Background: #1D1A22 deep plum-gray.
- Current period: #C4A6F2 solid lilac.
- Previous period: #8E8499 dashed outline (1.3px, dasharray 4 2.5) with a white fill at 3.5% opacity.
- Improvement: #6FD9A0 green for down-arrows, savings and the total chip (chip fill #6FD9A0 at 14%). Increases: #E7B37A in text only.
- Seasonal band: #7FA7E0 cool blue at 8% opacity with 8px corners and a small uppercase label in the same blue.
- Text #F3EFF7, secondary #A69EB1, axis labels #6E6679, gridlines #2C2833, baseline #4A4452.

Typography (Google Fonts):
- Gantari everywhere, tabular figures.
- Title 30px 700, -0.5px letter-spacing, stating the finding; subtitle 14.5px 400 #A69EB1 with measure, unit and comparison.
- Total at top right: an 11px 600 uppercase label with 1.6px letter-spacing, the total in 40px 800 with -1px letter-spacing, a 13.5px 500 comparison line and a 24px pill chip with a small triangle, the saving and the percent in 13px 700.
- Saving labels 12.5px 700; category labels 12.5px 600 #A69EB1.

Layout:
- 56px side margins; the total block right-aligned at x 904. Title at y 64, subtitle at y 92, legend row at y 136 (lilac square, dashed square, green triangle).
- Plot from x 84 to 900 and y 196 to 484. Seasonal bands span their categories from 26px above the plot down to the baseline, labeled at the top.

Axes and grid:
- Horizontal gridlines every $50, 1px #2C2833; y labels with currency 12px left of the plot. A 1.2px #4A4452 baseline. No vertical lines.

Marks:
- Bar chart: in each category, a 42px wide ghost bar (5px rounded top) for the previous period behind a centered 26px lilac bar (4px rounded top) for the current one, both from zero. Above the taller of the pair: a green down-arrow (2px stem and an 11px triangle) with the saving ("$28") where the value dropped, or an amber "+$9" where it rose.
- Line chart: a 3px lilac line with 4.5px dots for the current period over a 1.5px dashed #8E8499 line for the previous one, the gap between them shaded #6FD9A0 at 12% where the current is lower, and the same arrow and saving labels above each point that improved.

Avoid: bright reds for increases, more than one solid data color, heavy borders, 3D and dense labels.

When you're done, render the chart and check that the ghost bars read as the previous period at thumbnail size, every saving equals the difference between the pair, the count in the title matches the arrows, and the total chip's figures are computed from the monthly values.