Chart Prompts

Restyle my chart in the "Scrolly Slope" 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 frozen frame of a dark scrollytelling story. A calm slope chart in the background, three lines lit up, and a translucent story card floating beside them that explains why those three matter.

Colors (use these exact values):
- Page: #0B1426 (deep ink navy), with a vignette on top: a radial gradient centred slightly left of middle, transparent out to 55% of the radius and reaching black at 55% opacity at the edges.
- Context lines and dots: #56627A (soft gray).
- Highlights, in order of importance: #FF8A3D (tangerine), #2FD3C8 (cyan), #C49BFF (lilac).
- Main text: #E8ECF4. Secondary text: #8C97AD. Column rules: #1E2A44.
- Card: #16223A at 82% opacity with a 1px #2A3858 border and 10px corner radius; inactive progress segments #34425F.

Typography (Google Fonts):
- Newsreader for the title (500, 38px, #E8ECF4, stating the finding) and the card headline (600, 21px, two lines).
- Public Sans for everything else: deck 15px #8C97AD; column heads 14px 700 with 2px letter-spacing; point labels 12.5px (names 400 #8C97AD, values 500 #E8ECF4; highlighted names and values 700 in their line color); card body 13px #8C97AD with the highlighted name in 700 and its color; step label 11px 700 uppercase with 2px letter-spacing; footer 12px.

Layout:
- 56px side margins. Title at y 72, deck at y 102.
- Two columns at x 250 and x 520, each with a year head at y 150 and a 1px #1E2A44 vertical rule from y 164 to 528.
- Left labels right-aligned 14px left of the left column ("Town 11.8"); right labels left-aligned 14px right of the right column (value only for gray lines, value then name for highlights). Nudge labels apart so each sits at least 15.5px from its neighbour.
- The story card floats at x 648 to 904, y 168 to 484.

Axes and grid:
- No axis and no gridlines: the two column rules and the labels carry the scale. Y scale linear from zero.

Marks:
- Line chart: a slope chart. Gray lines 1.5px with round caps and 3.5px round endpoint dots ringed 1.5px in navy. Highlighted lines 2.5px in their color with 4.5px dots, drawn on top, each with a soft glow underneath (5px line at 35% opacity, Gaussian blur 2.2). For a line chart with more than two time points, keep the same treatment and label only the ends.
- Bar chart: paired horizontal dumbbells (a thin 1.5px gray connector between two dots) per category, gray by default, the three highlighted categories in tangerine, cyan and lilac with the same glow.

Labels and annotation:
- The card: a glowing step marker at its top left (a 13px tangerine circle with a navy "2", over a 15px tangerine circle blurred with stdDeviation 7 at 55% opacity), "STEP 2 OF 4" beside it in tangerine, and a four-segment progress rail at the top right (12 x 4 px rounded segments, 4px apart, the current one tangerine).
- Under the headline, one short paragraph per highlighted line, each with a 3 x 42 px rounded bar in the line's color at its left, naming the item in its color and stating the change with numbers from the data.
- Footer: source on the left, "Scroll to continue" (11px 600, 1.6px letter-spacing) on the right.

Avoid: a legend, more than three highlight colors, bright gridlines, an opaque card, text on top of the lines, and glows that get clipped.

When you're done, render the chart and check that the card never covers a line or label, the highlight colors in the card match the lines, labels don't collide, and every number in the card agrees with the data.