Chart Prompts

Restyle my chart in the "Captioned Steps" 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 clear civic budget explainer. Every step in the chart gets its own short caption in a tidy grid under the axis, so a reader can follow what drove each change without a separate table.

Colors (use these exact values):
- Background: #F4F2EE (light stone) for the whole canvas.
- Increases: #2E8B57 (green). Decreases: #C0392B (brick). Totals and neutral series: #34495E (slate).
- Ink #23272B for the title, category labels, connectors and baseline; secondary text #6D6A64; gridlines and caption dividers #DEDAD2.
- Green and brick are close for red-green color blindness, so direction is always double-encoded: a signed value (+1.6, −0.8 with a true minus sign) and a small up or down triangle in the same color.

Typography (Google Fonts):
- Fira Sans for the title (600, 25px, ink, stating the finding with the net number), subtitle (400, 15px, #6D6A64), legend (13px), axis labels (12px, #6D6A64), value labels (600, 14px in the step's color; 600, 15px white inside totals), category labels in the caption grid (600, 13px, ink) and the net callout (700, 16px).
- Fira Sans Condensed for the two-line captions (400, 12.5px, #6D6A64, 17px line height), the axis note and the net percentage (13px).

Layout:
- 56px side margins; title at y 58, subtitle at y 86, a one-line legend of 12px squares (Increase, Decrease, Total) at y 108.
- Plot from x 88 to 824 and y 150 to 402, leaving a right margin for the net bracket. Columns are equal slots; bars 52px wide.
- Caption grid starting 18px below the baseline: per column a 20 x 3 px color tab, the category label, then two caption lines, all centered. 1px #DEDAD2 vertical dividers between columns. Keep each caption line under about 16 characters.
- A 1px rule at y 520, then an axis note and the source line ("Source: illustrative data...") in 12 to 13px.

Axes and grid:
- Horizontal gridlines every 2 units, 1px #DEDAD2, labeled at left ("$14m"). A 1.2px ink baseline. No vertical axis line.
- If the axis does not start at zero, the total columns get a diagonal break: a stone-colored slanted band (8px thick, rising left to right) cut across each total bar 18px above the baseline, and the axis note says where the axis starts.

Marks:
- Bar chart (waterfall): square-cornered floating bars from the running level; totals as full slate columns with their value in white near the top. 0.8px ink connector lines join the top (or bottom) of each step to the next. Value labels sit 9px above rising steps and 19px below falling steps, with a 6px triangle to their left.
- Line chart: a 2.5px slate line with 4px dots; each segment between points is recolored green or brick by direction, with the signed change labelled at the segment midpoint and the same caption grid under the x axis.

Net change callout:
- A 1px slate dashed (3 on, 3 off) line at the starting total's level runs from the first column to just past the final total. A square bracket (1.4px ink, 5px arms) spans from that level to the final level on the right of the final column, with a small "NET" eyebrow (600, 10.5px, 1.2px letter-spacing), the net amount ("+$1.3m") and the percentage beside it.

Avoid: rounded corners, gradients, legends inside the plot, value labels on every gridline, captions longer than two lines, and colors beyond the three roles.

When you're done, render the chart and check that the steps sum exactly to the final total, the net and percentage are right, no caption spills into its neighbor's column, and every step shows its sign in text as well as color.