Chart Prompts

Restyle my chart in the "Pareto Defects" 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 foundry's quarterly quality report. A pale gray page under a safety-yellow header strip, sober steel blue bars and a hard black cumulative line: practical, engineered and ready for a shop-floor review.

Colors (use these exact values):
- Page: #EEF0F2. Header strip: #F2C200 (safety yellow), 40px tall across the full width, underlined by a 3px #111111 rule.
- Bars: #4A6F8F (steel blue) for the vital few, #9DB2C4 (light steel) for the rest.
- Cumulative line, markers, axes and 80% reference: #111111.
- Secondary text #5B6570; gridlines #D5DAE0.

Typography (Google Fonts):
- IBM Plex Sans Condensed for words: header strip text 700 14px uppercase with 1.6px letter-spacing in #111111; title 700 30px #111111 stating the finding; subtitle 400 16px #5B6570; legend and category labels 500 13 to 14px; axis captions ("COUNT", "CUM. %") and bracket labels 600 to 700 11 to 13px uppercase with 1.2 to 1.4px letter-spacing.
- IBM Plex Mono for every figure: axis tick values 12px, bar values 600 13 to 14px, cumulative values 500 12px, and the document code on the right of the header strip (500 13px).

Layout:
- 40px side margins. Header strip with report name on the left and period / document code on the right. Title about 50px below the strip, subtitle under it, then a one-line legend (steel square, black line with a square marker, dashed line).
- Plot from x 104 to 848, with the count axis on the left and the percent axis on the right. Category labels in two short lines under each bar.
- Under the category labels, a bracket spans the vital-few bars (1.5px black, 8px drop) labeled "VITAL FEW: 80.9% OF DEFECTS", and a thinner #5B6570 bracket spans the rest labeled "USEFUL MANY: 19.1%".

Axes and grid:
- Both y axes share one height: the left axis runs 0 to the total count (label the top tick with the total in 600 weight), the right axis 0% to 100%, so each bar's top lines up with its share.
- Left tick labels in #4A6F8F, right tick labels in #111111. 1px vertical axis lines on both sides; a 1.5px #111111 baseline.
- Horizontal 1px #D5DAE0 gridlines at 20% steps; the 80% level is instead a 1.2px black dashed rule (5 on, 4 off) crossing the full plot width.

Marks:
- Bar chart: categories sorted descending, square-cornered bars 70% of the band. Vital-few bars (up to the first cumulative value at or above 80%) in #4A6F8F with white value labels 20px inside the top; the rest in #9DB2C4 with #5B6570 value labels 7px above.
- Cumulative line: a 2px #111111 polyline that starts at the bottom-left corner of the first bar and hits each bar's top-right corner, with 8 x 8px black square markers. Label the first four cumulative values just above-left of their markers.
- Line chart: if my chart is a line, draw the main series as the same 2px black line with square markers over pale #9DB2C4 area columns, keep the dashed 80% (or target) reference and bracket the qualifying span the same way.

Avoid: rounded corners, gradients, shadows, more than one bar hue family, a legend inside the plot, and a cumulative line that doesn't end at 100%.

When you're done, render the chart and check that the bars are sorted descending, the cumulative line ends exactly at 100% on the top-right, the vital-few bracket covers exactly the bars up to the 80% crossing, and the title's share matches the cumulative value.