Chart Prompts

Restyle my chart in the "Wafer 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: an inspection tool summary screen. Dark charcoal canvas, stacked columns in four crisp class colors, wide-set technical letterforms, a separate thin white strip chart above for the second measure, and the worst category boxed with a dashed outline and a short callout.

Colors (use these exact values):
- Canvas: #17181C (dark charcoal). Strip panel background: #1E2025.
- Categories in stack order from the base: #3CC8E0 (cyan), #F2A93B (amber), #E0529C (magenta), #B8BCC6 (pale gray).
- Second-measure line, its dots and the highlight outline: #FFFFFF.
- Primary text: #F1F2F4. Secondary text: #959AA6. Gridlines: #2A2D34. Baseline: #555A64.

Typography (Google Fonts): Sarpanch throughout. Its colon renders as a single dot, so write titles with commas instead of colons.
- Title 23px 700 #F1F2F4 stating the finding in one line that ends inside the right margin (Sarpanch is wide; keep it to about 65 characters). Subtitle 14px 400 #959AA6 with measure, unit and total.
- Legend labels 12px 600 uppercase with 1px letter-spacing. Category labels 12px 500 uppercase with 0.8px letter-spacing in #959AA6 (the highlighted one 700 white).
- Column totals 12.5px 500 #F1F2F4 (highlighted 15px 700 white). Strip values 11px 500 #959AA6 (highlighted 12.5px 700 white).
- Panel labels ("KILLER per cm²", "COUNT") 10.5px 600 uppercase in #959AA6. Callout heading 12px 700 uppercase with 1.2px letter-spacing, body 12.5px. Source 11.5px.

Layout:
- 56px side margins; title at y 56, subtitle at 82, legend at y 100 (12px square swatches, and a short white line with a dot for the second measure).
- Plot from x 104 to 904. The strip panel runs from y 134 to 196; the column chart from y 236 to a baseline at y 500. Panel labels right-aligned at x 92.
- Source at y 578 left and an inspection note right.

Axes and grid:
- Columns: y from zero, gridlines every 100 in 1px #2A2D34 with a #555A64 baseline, labels right-aligned 12px left of the plot.
- Strip: its own scale starting at zero, no gridlines or axis; each point carries its value 8px above it. Never put the second measure on a right-hand axis of the column chart.

Marks:
- Bar chart: stacked columns 44px wide on an 80px band, square corners, separated by 1.5px canvas gaps between segments, totals 8px above each column. The worst column gets a 1px white dashed (3 on, 3 off) outline 15px outside the column, from 28px above it to below its label, with a 1px white leader to a three-line callout (heading, the dominant class share, the second measure).
- Line chart: one 2px line per category in the same four colors with 3px square markers, the second measure still in its own strip above, and the worst point boxed with the same dashed outline and callout.
- Strip: a 1.2px white straight line through 2.6px white dots at the column centers (the worst one 4px).

Avoid: dual y axes, rounded corners, glows, gradients, 3D, and more than four category colors.

When you're done, render the chart and check that the column totals equal the segment sums, the strip points align with their columns, the worst category really is worst on both measures (or the title says otherwise), and the dashed box clears its category label.