Chart Prompts

Restyle my chart in the "Matter Spend" 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 private-office cost review. Dark mahogany paneling, cream stationery lines and a burnished copper for money actually spent.

Colors (use these exact values):
- Page: #1F1411 (mahogany) with a 1px #EDE3CF hairline border at 35% opacity, inset 20px from every edge.
- Cream: #EDE3CF for the title, budget outlines, the baseline and category names.
- Copper: #C47A3F for actual-spend marks, overrun arrows and overrun labels, and the eyebrow.
- Secondary text: #A89985. Gridlines: #3A2A24.

Typography (Google Fonts), lining figures:
- Playfair Display SC 700: title 34px cream, stating the finding (renders as small caps).
- Lato: eyebrow 11px 700 uppercase with 2.4px letter-spacing in copper; subtitle 15px #A89985 with measure, unit, period and the portfolio total; legend 13px cream; axis labels 12.5px #A89985; overrun labels 14px 700 copper; underrun labels 13px 400 #A89985 with a true minus sign; category names 12.5px 700 cream with a 12px #A89985 second line.

Layout:
- 56px left margin inside the border. Eyebrow at y 64, title baseline y 108, subtitle y 136, legend y 170, plot from x 110 to 904 and y 214 to 486, source at y 560.

Axes and grid:
- Y labels as currency right-aligned 14px left of the plot; 1px #3A2A24 horizontal gridlines; a 1.2px cream baseline; no axis lines.

Marks:
- Bar chart: for each category, the budget (or target) as an unfilled 60px-wide rectangle with a 1.2px cream stroke, and the actual as a solid copper bar 36px wide centered inside it, square corners. When the actual exceeds the budget, the copper bar pokes out of the outline; put a 12 x 10 copper up-triangle 8px above it and the overrun ("+$180K") above that. Under-budget categories get the underrun in gray 10px above the outline.
- Line chart: the budget as a 1.2px cream line with open cream squares (6px) at each point, the actual as a 2.5px copper line with solid copper dots (r 4); where actual is above budget, fill between the lines with copper at 25% and put the up-triangle and overrun label above the actual point.

Avoid: gradients, glows, rounded corners, filling the budget outlines, and any accent color besides copper.

When you're done, render the chart and check that the overrun count in the title matches the data, the portfolio percentage is right, overrun labels clear the top gridline, and the copper bars are centered in their outlines.