Chart Prompts

Restyle my chart in the "Marimekko" 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: the market map slide in a strategy deck. Quiet, blocky and analytical: a restrained four-tone palette, thin white gaps and numbers written straight onto the blocks.

Colors (use these exact values):
- Slide: #FFFFFF. Gaps between blocks are the white slide showing through.
- Segment fills, in stacking order from the baseline up: #1F3A5F (navy, the leading or focus brand), #5B7AA6 (slate blue), #9BB49A (sage), #D9DDE3 (pale gray, always the "all others" remainder).
- Text on navy and slate blue: #FFFFFF. Text on sage and pale gray: #1F3A5F.
- Title and dark labels: #1B2433. Secondary text: #667085. Rules and ticks: #C9CED6.

Typography (Google Fonts):
- IBM Plex Sans Condensed 600 for the action title only: 28px, #1B2433, sentence case, stating the finding.
- IBM Plex Sans for everything else: subtitle 400 13px #667085 explaining what width and height encode; column sizes 600 14px #1B2433 (12px on narrow columns); column names with share of total 400 11.5px #667085; segment percentages 600 (leading brand) or 500, 14px on wide columns and 12px on narrow ones; brand labels 13px (600 for the leader, 500 otherwise); axis labels 11px #667085; footer 11.5px #667085.

Layout:
- 56px side margins. Title baseline 58px, subtitle 86px.
- Plot from x 96 to 808 and y 164 to 504. Column headers sit above the plot: dollar size at y 132 and "Region, 35%" at y 150, then a 1px #C9CED6 rule spanning each column at y 158.
- Brand names at the right edge (from x 820), each with a 10px square swatch, vertically centered on its segment in the last column.
- Footer: a 1px #C9CED6 rule at y 548, "Source: team analysis; illustrative data." at the left and a page number at the right (baseline 572).

Axes and grid:
- A left percentage axis 0%, 25%, 50%, 75%, 100% with 4px ticks, labels right-aligned 10px from the plot. No gridlines, no baseline rule, no frame.
- Column widths are proportional to each category's total; heights are shares within the category, always summing to 100%.

Marks:
- Bar chart: variable-width stacked columns (marimekko) with 3px white gaps between columns and between segments, square corners, no strokes. Print the percentage centered in every segment at least 44px wide and 24px tall; skip it in smaller segments. A column narrower than 60px shows its name below the baseline and only the share of total above it.
- Line chart: if my chart is a line chart, draw 2.5px straight lines in the same four colors (navy for the focus series, then slate blue, sage and a darker #9AA3AF instead of pale gray for the remainder), square 6px markers at each point, 1px #C9CED6 horizontal gridlines at four round values, and brand names as direct labels at the right edge with the same 10px swatches. Keep the header and footer treatment.

Avoid: saturated colors, gradients, shadows, rounded corners, a separate legend box, gridlines inside the blocks, 3D, and labels in segments too small to hold them.

When you're done, render the chart and check that column widths are exactly proportional to the totals, each column sums to 100%, the brand labels line up with the last column's segments, the gaps are an even 3px, and the title's percentage matches the data.