Chart Prompts

Restyle my chart in the "Macro Split" 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 menu board in a café that takes nutrition seriously. Dark espresso background, three warm food colors, chunky readable numbers printed right on the segments.

Colors (use these exact values):
- Page: #1E1714 (dark espresso). Text on segments uses the page color.
- Parts, in order: #E8735A (coral, protein), #D9B35C (wheat, carbohydrate), #7F9A48 (olive, fat).
- Primary text: #F2E8DC (cream). Secondary text: #A89A8C. Rules: #3A2E28; group divider dashed #A89A8C.

Typography (Google Fonts):
- Varta throughout. Title 700 30px cream, stating the finding. Subtitle 15px 400 #A89A8C. Legend 13.5px 600 cream. Column header and group labels 11 to 11.5px 700 uppercase with 1.6 to 1.8px letter-spacing, #A89A8C. Row names 15.5px 600 cream. Segment percent 16px 700 and segment grams 11.5px 500 at 80% opacity, both in the page color. Right-hand totals 18px 700 cream. Source 12px #A89A8C.

Layout:
- 56px margins. Title at y 58, subtitle at y 86, legend at y 112 to 124 starting where the bars start, with the right column header ("KCAL / DAY") right-aligned at x 904.
- Row names in a left column from x 56; bars from x 212 to 800; totals right-aligned at x 904.
- Rows 44px tall with 16px gaps. Groups get an uppercase label above them and are separated by a 0.8px dashed full-width divider (3 on, 3 off). Sort rows within each group by the first part's share.
- A 1px #3A2E28 rule above the source line.

Axes and grid:
- No axes or gridlines; every segment is labeled, so the 100% bars stand on their own.

Marks:
- Bar chart: 100% stacked horizontal bars with square corners and 2px page-color gaps between segments. Each segment shows its percent (rounded so each row sums to 100) and a smaller absolute value beneath, left-aligned 10px inside. A small right-hand column shows each row's total.
- Line chart: one 3px line per part in the same three colors, straight segments, solid r 4.5 dots with a 2px page-color ring, a 12% opacity area under only the first series, direct labels at the right end in 13px 700 in the series color, and 1px #3A2E28 gridlines with 12px #A89A8C tick labels.

Labels and annotation:
- A square legend (12px swatches, 2px radius) above the bars. If a segment is narrower than about 44px, move its label outside the bar.

Avoid: rounded bar ends, gradients, shadows, white backgrounds, and more than three part colors.

When you're done, render the chart and check that each row's percents sum to 100, text on every segment is legible, the group divider sits between groups, and the totals match the data.