Chart Prompts

Restyle my chart in the "Zone Density" 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 courier network's zone planning view in dark mode. Charcoal ground, categories identified by short codes in rounded hexagon badges, bars shaded on a sequential violet ramp so the densest zones glow palest, and a crisp white dot-and-line series in its own slim panel above the bars, sharing the category axis.

Colors (use these exact values):
- Canvas: #17171A.
- Bars: a sequential ramp interpolated in RGB from #4C1D95 (lowest value) to #DDD6FE (highest value), each bar colored by its own value.
- Secondary series: #FFFFFF line and dots, dots ringed with the canvas color.
- Kicker text: #8B5CF6.
- Text: #FFFFFF for the title, legend and secondary panel's axis labels (75% opacity), #A1A1AA for the subtitle and bar panel's axis labels, #6B6B75 for the source line.
- Gridlines: #26262B; baseline #3A3A42.
- Hexagon badges: canvas-colored fill with a 1.8px stroke in the same ramp color as the bar above.

Typography (Google Fonts): Space Grotesk everywhere, tabular figures for numbers.
- Kicker 12px 600 uppercase with 1.6px tracking. Title 29px 700 with -0.6px tracking, stating the finding with its multiple. Subtitle 14px 400 naming both measures, which panel each uses and the period.
- Legend 12.5px 500. Axis labels 12px 500. Bar value labels 12px 700 inside the bar bottom. Badge codes 12.5px 700. Secondary value pills 12px 700. Source 11.5px 400.

Layout:
- Kicker at y 60, title at y 100, subtitle at y 128, legend at y 158, all from x 48. Legend: a 64 x 14 ramp swatch (3px radius) labeled with the bar measure, and a 30px white line with a dot labeled with the secondary measure.
- Two stacked panels sharing x 88 to 860: the secondary series panel from y 206 to 300 (tall enough that its labels never crowd), the bar panel from y 340 to 490. Each panel's axis labels are right-aligned 12px left of the plot; the secondary panel's top label carries the unit ("10 min").
- Badges centered 30px below the baseline. Source at y 568.

Axes and grid:
- One scale per panel, never a right-hand second axis. Bar panel gridlines on round steps (0 to 200 by 50); the secondary panel has only its zero line, with tick labels at 0, 5 and 10 and the value pills carrying the detail. Zero lines in #3A3A42. No vertical lines.
- Sort categories by the bar value, largest first.

Marks:
- Bar chart: bars at 62% of the slot width with a 5px top radius, colored along the ramp. Value labels sit 10px above the baseline inside the bar, in the canvas color on pale bars (upper half of the ramp) and white on dark bars. Below each bar a pointy-top hexagon badge (17px radius, corners softened with quadratic curves at 22% of each edge) holds the code. The secondary series lives in its own panel above the bars, each dot centered over its bar: a 1.75px white straight-segment line with 5px white dots ringed 2.5px in #17171A; each value sits in a 36 x 19 fully rounded canvas-colored pill 10px above its dot.
- Line chart: the primary series as a 3px line colored with a horizontal gradient along the same ramp, dots filled with each point's ramp color and ringed in #17171A; the secondary series as the white dot-and-line in its own panel above; codes in hexagon badges along the x axis.

Avoid: rainbow or diverging colors, dual axes (a second measure on a right-hand scale), text outlines instead of pills, and legends inside the plot.

When you're done, render the chart and check that the ramp runs monotonically with the values, the two panels line up on the same category centers, each panel has a single labeled scale, every pill clears the legend and neighboring labels, and the multiple in the title matches the data.