Chart Prompts

Restyle my chart in the "Slotting Velocity" 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 ABC analysis sheet from a warehouse slotting review. White, calm and engineered, with three class zones announced by lettered badge headers.

Colors (use these exact values):
- Page: #FFFFFF; alternate zone columns tinted #FAFAF9.
- Class A: #166534 (deep green). Class B: #65A30D (olive). Class C: #D9D3A3 (pale khaki).
- Ink and the cumulative line: #1C1917. Secondary text: #6B7280. Gridlines: #E7E5E4. Zone dividers: #A8A29E.

Typography (Google Fonts):
- Hanken Grotesk throughout. Eyebrow 700, 12px uppercase, 2px letter-spacing, #166534. Title 800, 32px, -0.5px letter-spacing, ink, stating the finding. Subtitle 400, 15px #6B7280. Zone headers 700, 13px ink plus 12px regular gray note. Value labels 700, 12px in the class color. Category labels 12px, 700 ink for class A and 500 gray for the rest.

Layout:
- 48px margins. Eyebrow at y 50, title at y 86, subtitle at y 112.
- Plot from x 72 to 864 and y 176 to 452, left axis for the bars, right axis (0 to 100%) for the cumulative share.
- Split the categories into three zone columns (A, B, C). Each gets a 22px rounded square badge (4px radius) in its class color with the letter (white on A and B, ink on C), a bold share-of-total line and a one-line slotting note, placed 34px above the plot. Columns alternate #FAFAF9 and white and are divided by 1px #A8A29E dashed (3, 3) lines.
- Footer: source at left, total volume at right.

Axes and grid:
- 1px #E7E5E4 hairline gridlines at each interior left-axis tick (none at 0 or the top). Left tick labels right-aligned, right tick labels in percent, both 12px #6B7280.
- A 1.5px ink baseline. Category labels rotated -40 degrees, end-anchored just under each bar.

Marks:
- Bar chart: ranked descending, about 66% of the band, 3px top corner radius, filled by class. Value labels 8px above the class A bars only. The cumulative share as a 2px ink polyline over a 5px white halo, with r 3 white dots with a 1.5px ink ring at every category and r 5 solid ink dots at the class breaks, each break labeled with its cumulative percentage in 800 13px, placed above-left of its dot so it clears the zone divider.
- Line chart: draw the cumulative curve (or each series) as the same 2px ink line with halo over the zone columns, and color each point's dot by the class zone it falls in; label class breaks the same way.

Avoid: gradients, shadows, watermark letters behind the data, heavy gridlines, a legend box (the zone headers are the legend), and more than three class colors.

When you're done, render the chart and check that the zone badges sit clear of the bars, the zone shares add up to 100%, the class-break percentages match the cumulative data, and no labels touch the dividers or collide.