Chart Prompts

Restyle my chart in the "Household Basket" 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 calm, reassuring household-economics explainer. Soft peach paper, a muted domestic palette, a bookish serif headline and friendly rounded sans labels. It should feel like a page from a well-designed consumer finance guide.

Colors (use these exact values):
- Background: #FCEEE3 (soft pale peach).
- Categories, bottom to top: #22385E (navy, housing), #93AE8A (sage, food), #CC8E35 (ochre, transport), #86A3C3 (dusty blue, health), #D6CABB (light taupe, other). Keep this order in every column.
- Tile borders: #FFFFFF.
- Text inside tiles: #FFFFFF on navy; dark tints of the tile's own hue elsewhere (#1F2B1D on sage, #2B1E08 on ochre, #15253A on dusty blue, #3A332B on taupe).
- Ink: #2A2F3A. Muted text: #6E6660. Hairline rule: #E8D6C8.

Typography (Google Fonts):
- Merriweather 700 for the title (28px, sentence case, stating the finding with a computed number).
- Nunito Sans for everything else: subtitle 15px 400 muted (measure, place, year, unit); an axis caption "SHARE OF SPENDING" 11px 800 uppercase with 1.4px letter-spacing; tile percentages 800 at 15px (13.5px in narrow columns); column names 13px 700 ink with the width share 11.5px muted beneath; category labels 13px 700 ink; bracket note 12px 600 italic; takeaway 12.5px 400 ink; source 11.5px muted.

Layout:
- 56px left margin. Title near y 64, subtitle at 96, axis caption at 128, plot from y 160 to 462 and x 96 to 784.
- Direct category labels to the right of the last column, each a 10px square swatch plus the name, centered on that column's tile. No separate legend.
- Under the column labels, a 1.2px ink bracket spanning the first column (7px tall ends, a 6px center tick) with the italic note "Column width = share of households (26% here)".
- A one-line takeaway to the right of the bracket, above a 1px #E8D6C8 hairline, stating a second finding computed from the data. Source at the bottom left.

Axes and grid:
- Y labels at 0, 25, 50, 75 and 100% right-aligned 12px left of the plot, muted 12px. No gridlines and no axis lines: the tile edges are the structure.

Marks:
- Bar chart (marimekko): columns sit flush, their widths proportional to each group's share of the total, their tiles stacked to 100%. Every tile has a 2px #FFFFFF stroke, so thin white borders separate all tiles. Square corners. Write the percentage centered in any tile at least 24px tall and 60px wide; leave smaller tiles unlabeled.
- Line chart: a 100% stacked area chart in the same category colors and order, with 2px #FFFFFF lines between layers, category labels at the right edge centered on each band, and percentages written inside bands where they are at least 24px tall at a chosen x position.

Avoid: gridlines, drop shadows, gradients, saturated or neon colors, a boxed legend, rotated labels, percentages crammed into slivers, and dark backgrounds.

When you're done, render the chart and check that each column's tiles sum to 100%, column widths match the group shares, every printed percentage fits inside its tile, and the category labels line up with the last column's tiles.