Chart Prompts

Restyle my chart in the "Formulation 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 tidy product-development sheet from a materials lab. Light gray page, crisp 100% stacked bars with the numbers printed inside, and a white result card on the right. Calm, legible and practical.

Colors (use these exact values):
- Page: #F2F3F4. Result card: #FFFFFF with 6px corner radius.
- Components in stacking order: #1F5F63 (deep teal, the base component), #D9BF8C (sand), #9C86C9 (violet), #E07A5F (coral).
- Ink: #1C2326. Secondary text: #646B70. Gridlines and empty tracks: #D5D8DB.
- Labels inside segments: #FFFFFF on teal, #1C2326 on the other three.

Typography (Google Fonts):
- Gothic A1 throughout. Title 800 29px #1C2326 with -0.4px letter-spacing, stating the finding. Subtitle 400 14.5px #646B70 with measure and units.
- Legend names 700 13px. Row ids 800 14px with a 12px #646B70 descriptor under them. Segment values 700 13px (11.5px under 6%). Result numbers 800 17px. Card header 700 10px uppercase with 1.2px letter-spacing.

Layout:
- Title at x 40, y 58; subtitle 30px below; a legend row of 14px rounded-square chips (2px radius) at y 116.
- Row labels in a left column (x 40); bars from x 196 to 736; 44px per row, 28px tall bars.
- Percentage scale labels (0%, 25%, 50%, 75%, 100%) above the first bar, 11px #646B70, with 1px #D5D8DB vertical gridlines running through all rows.
- The white result card at x 772 to 920 spans all rows, headed by its measure name. Each row shows the value and a 6px tall rounded mini bar on a 0 to 100 track (#D5D8DB track, #1C2326 fill).
- A one-line takeaway in 12.5px ink under the bars, then "Source: illustrative data" 11.5px bottom left and a 700 11px letter-spaced batch note bottom right.

Axes and grid:
- No axis lines. Only the four vertical quarter gridlines. Order rows by the result value.

Marks:
- Bar chart: square-cornered 100% stacked horizontal bars, segments separated by a 1.5px page-colored gap line, every segment labeled with its value centered inside. Result mini bars start at zero.
- Line chart: 2.5px lines in the component colors with 4px dots at each point, values in 11.5px 700 above the last point, the same white result card on the right for a companion metric, and the same quarter gridlines.

Avoid: shadows, gradients, 3D, rounded bar ends on the main bars, a second y scale, and percent signs inside segments (the header carries the unit).

When you're done, render the chart and check that every row sums to 100, every segment label fits inside its segment, and the takeaway numbers match the data.