Chart Prompts

Restyle my chart in the "Speed Bins" 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 product engineering binning report. Pale cool gray page, crisp 100% columns graded from a deep indigo top bin through violet and blue to pale gray, with scrap in red at the base, and a white key card at the right naming each bin and its frequency.

Colors (use these exact values):
- Page: #F2F4F7 (pale cool gray). Key card: #FFFFFF with a 1px #DCE0E7 border.
- Ordered categories, best to worst: #231B66 (deep indigo), #6E44CF (violet), #4A9BEA (blue), #C5CBD4 (pale gray). Reject or failure category: #D6453D (red).
- Primary text and baseline: #1A1D2B. Secondary text and tick marks: #5E6576. Key rules: #DCE0E7.
- Labels inside dark segments are #FFFFFF; inside the pale gray segment use #1A1D2B.

Typography (Google Fonts): Pathway Extreme throughout.
- Title 26px 700 #1A1D2B stating the finding (best and worst lot, for example). Subtitle 15px 400 #5E6576 with measure, unit and sort order.
- Segment labels 11.5px 700. Category labels 13px 500 #5E6576, with the highlighted best and worst categories in 800 #1A1D2B.
- Small caps headings ("LOT", "SPEED BIN", "FMAX") 11px 700 uppercase with 1.4px letter-spacing in #5E6576.
- Key rows: bin name 14px 600, frequency 13px 600 right-aligned. Notes and source 12px and 11.5px #5E6576.

Layout:
- 56px side margins; title at y 58, subtitle at 86.
- Plot from x 96 to 724 and y 128 to 480. Key card at x 764 to 912, from the plot top, 232px tall, with a heading row, a hairline, then one row per category 36px apart (a 14 x 18 px swatch, the name, the frequency right-aligned). Two lines of explanation under the card.
- A one-line reading note centered under the category labels ("Numbers inside columns: ...") and the source at y 578.

Axes and grid:
- Y axis 0 to 100% labeled every 25% with 4px tick marks at the plot edge, no gridlines (the columns fill the height).
- A 1px #1A1D2B baseline. Category codes centered 22px below it, sorted by the top category's share.

Marks:
- Bar chart: 100% stacked columns 36px wide on a band of about 52px, square corners, stacked with the reject category at the base, then the slowest bin, up to the fastest bin at the top, so the key reads top to bottom in the same order. Separate segments with 1.5px gaps of page color. Print the top category's share inside its segment and the reject share inside the red base segment; leave the middle segments unlabeled.
- Line chart: one 2.5px line per category in the same colors (top bin the darkest), no markers except a 4px dot at each line end with a direct label; draw the reject category last in red so it stays on top; keep the same key card.

Avoid: rounded corners, gradients, shadows, gridlines over the columns, labeling every segment, and any color outside the graded ramp except the red reject category.

When you're done, render the chart and check that each column sums to exactly 100%, the sort order matches the subtitle, the key order matches the stack order, and the white labels stay readable on the violet and blue segments.