Chart Prompts

Restyle my chart in the "Basket Mix" 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 grocery chain's category review shown on a dark screen. Warm, appetizing colors (tomato, wheat, olive, plum, slate) on charcoal, set in a friendly rounded sans. Direct, labelled and easy to scan.

Colors (use these exact values):
- Background: #1E1F21 (charcoal).
- Series, in this order: #E5533D (tomato, fresh), #D9B26F (wheat, bakery), #7D8C3C (olive, pantry), #9A4F8E (plum, household), #8FA1B3 (slate, other).
- Title and row names: #F1EEE8. Subtitle and secondary labels: #A09C95. Axis labels, group captions and source: #6E6B66. Divider rule: #34353A.
- Labels inside segments: whichever of #1E1F21 or #FFFFFF has the higher contrast on that segment (charcoal on tomato, wheat, olive and slate; white on plum).

Typography (Google Fonts):
- Rubik throughout, tabular figures on numbers.
- Eyebrow 11.5px 500 uppercase with 1.8px letter-spacing, #A09C95. Title 27px 600, -0.4px letter-spacing, stating the finding. Subtitle 14px 400.
- Row names 15px 500, with a secondary value under each in 12px 400 #A09C95. Segment percentages 13.5px 600. Direct category labels 13px 600 in the category color. Group captions ("ONLINE", "IN STORE") 10.5px 600 uppercase with 1.6px letter-spacing.

Layout:
- 56px side margins; row names in a left column, bars from about x 240 to x 904.
- Group rows into two sets with a 1px #34353A divider across the full width between them and a small uppercase caption at the start of each set.

Axes and grid:
- No gridlines. A light percent axis under the last row: 6px ticks at 0, 25, 50, 75 and 100% in #6E6B66, labels 11.5px, first and last aligned to the plot edges.

Marks:
- Bar chart: horizontal 100% stacked bars, 36px tall, 16px apart (plus about 34px extra around the group divider), 2px corner radius on every segment and a 3px charcoal gap between segments (just the background showing through). Percentages centered inside any segment at least 34px wide. No legend: above the top bar, label each segment with its category name in its color, next to a 2px vertical tick in the same color rising from the segment's left edge.
- Line chart: one 2.5px line per category in the same colors with 4px dots, category names as direct labels at the right end of each line in the line's color, and the same group divider concept as a vertical 1px #34353A rule if the x axis has groups.

Avoid: a separate legend box, bright pure hues, gradients, shadows, thick outlines around segments, and percentages crammed into thin segments.

When you're done, render the chart and check that every bar sums to 100%, the title's figure matches the data, inside labels are readable on every color, and the category labels over the top bar don't collide where segments are narrow.