Chart Prompts

Restyle my chart in the "Metro Lines" 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 clean subway map. Each series is a thick colored route that runs flat, on a 45 degree diagonal or straight down, with small rounded bends; the data points are stations. Crisp, civic and instantly readable.

Colors (use these exact values):
- Background: #FFFFFF.
- Route colors in series order: #DA291C (red), #0057A8 (blue), #009A49 (green), #8A3FA0 (purple). For a single series use #0057A8.
- Station outlines, titles and key labels: #1A1A1A. Secondary text: #6B6B6B. Gridlines: #E6E6E6; zero baseline #BDBDBD.

Typography (Google Fonts):
- Overpass throughout. Title 800, 31px, #1A1A1A, -0.4px letter-spacing, stating the finding. Subtitle 400, 16px, #6B6B6B with place, measure, unit and period.
- Legend names 600, 15px. Bullet letters 800, 15px white. Axis labels 400, 13 to 14px #6B6B6B; bold (700, #1A1A1A) for the x label of a highlighted year. End values 700, 17px #1A1A1A. Source and notes 12px.

Layout:
- 56px side margins. Title at y 64, subtitle at 94, then a legend row at about y 127 that reads like a map key: a 24px colored circle (route bullet) holding a white letter (A, B, C, D) followed by "<Name> Line".
- Plot from x 96 to 792, about y 168 to 516, leaving a 110px column on the right for end-of-line labels.
- Footer at y 576: "Source: ..." on the left and a one-line key on the right ("Stations mark each year. The large ring is an interchange.").

Axes and grid:
- Three 1px #E6E6E6 horizontal gridlines with labels like "100k" right-aligned 24px left of the plot; a 1px #BDBDBD baseline with "0".
- No y-axis line and no vertical gridlines. Year labels centered 28px under the baseline.

Marks:
- Line chart: draw each series as an octilinear route, not a straight or smoothed line. Every station sits on a short flat run; between stations the change is taken as one 45 degree diagonal centered in the gap, and when the change is steeper than the gap is wide, add a vertical drop in the middle. Round each bend with a 7px quadratic corner. Stroke 9px, butt caps, round joins, drawn over a 15px white casing so crossings stay clean. Each route ends in a terminus bar: a 9 x 26 px rect (rx 2) in the route color, perpendicular to the line, at the first and last station. Stations are white circles r 5.5 with a 2.5px #1A1A1A outline. Where two routes meet at the same value, replace both stations with one interchange ring: white circle r 12 with a 4px #1A1A1A outline, and label it ("Interchange, 2023" in 700 14px plus a 14px muted detail line) in empty space, tied to the ring by a 1px #9E9E9E dotted (2 on, 3 off) vertical guide drawn behind the routes. A series that starts later just starts later with its own terminus bar.
- Bar chart: square-cornered vertical bars filled with the route colors, each with a white station circle (r 5.5, 2.5px #1A1A1A outline) centered on its top edge, and the category's route bullet (24px circle with white letter) under the baseline in place of plain text. Keep the same header, legend and gridlines.

Labels and annotation:
- End-of-line labels 34px right of the plot: the route bullet (r 12) at the line's last y, then the latest value in 700 17px ("336k"). Nudge apart if closer than 26px.

Avoid: smoothed or arbitrary-angle segments, drop shadows, gradients, thin lines, markers without outlines, legend swatches that are squares instead of lettered round bullets, and more than four route colors.

When you're done, render the chart and check that every segment is flat, vertical or exactly 45 degrees, every station sits on a flat run, the interchange ring covers both routes at their meeting point, and the end labels do not collide.