Chart Prompts

Restyle my chart in the "Price Bridge" 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 warm, trustworthy economics explainer about where money goes. Rich forest green, a sturdy slab serif and pale bread-and-butter tones, reading top to bottom like a receipt that tells a story.

Colors (use these exact values):
- Background: #163A2B (rich forest green).
- Starting value bar: #EFE6CF (pale cream). Additions: #D8B45A (soft gold). The final total: #FFFFFF with a subtle outline (a 1px white rectangle at 45% opacity, 3px outside the bar, 3px radius).
- Labels: #EFE6CF. Muted text (subtitle, headers, guide labels, source): #9DB8A6. Rules and guides: #2C5441. Dotted leaders: #B9CDBE.

Typography (Google Fonts):
- Bitter throughout. Title Bitter 700 30px white, sentence case, stating the finding with numbers computed from the data. Subtitle Bitter 400 15px muted with item, place, unit and year.
- Column headers Bitter 700 11px uppercase with 1.8px letter-spacing, muted: "STAGE", "CENTS ADDED", "% OF PRICE".
- Stage names Bitter 400 14px cream, right-aligned (the total row 700 white). Bar-end values Bitter 700 14px in the bar's color with plus signs ("+96¢"), the total 16px white written in currency ("$3.40"). Percent column Bitter 400 14px cream (total 700 white). Italic Bitter 12.5px for the one-line takeaway.

Layout:
- 56px side margins. Title near y 62, subtitle at 92, column headers at 150 with a 1px #2C5441 rule 10px below.
- Stage names right-aligned 16px left of the bars' zero (x 262). Bars span up to about 500px. A right-aligned percent-of-final-price column at the right margin.
- Rows on a 40px pitch with 22px tall bars. A 1px rule separates the last addition from the total row.
- Faint vertical guides (1px #2C5441) at round currency values with labels ("$1.00") below the last row. Source bottom left, the takeaway bottom right.

Axes and grid:
- No axis lines. Only the faint vertical guides; every bar is labeled with its own value.

Marks:
- Bar chart (horizontal waterfall, top to bottom): the first bar starts at zero in cream; each addition floats from the previous running total to the new one in gold; the final bar runs from zero to the total in white with its outline. Corners 1.5px. Thin dotted leaders (1.3px, 2 on 3 off) drop from the end of each bar to the start of the next. Values sit 9px past each bar's end. Negative steps, if any, use cream at 60% opacity and a minus sign.
- Line chart: a stepped line of the running total, 2.5px cream, moving right one stage at a time, with each rise drawn as a 2.5px gold vertical segment labeled "+28¢" in gold beside it, dotted leaders from each step down to the stage labels, and the final value in white with a 5px dot ringed by a 1px outline at 45% opacity.

Avoid: gradients, drop shadows, a legend, bright greens, rounded pill bars, gridlines between rows, and more than the three bar tones.

When you're done, render the chart and check that each floating bar starts exactly where the previous one ended, the additions sum to the final total, the percentages sum to 100%, and every value label clears the next leader line.