Chart Prompts

Restyle my chart in the "Tram Load" 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: the line diagram above a tram door at night. Dark charcoal, a straight white route strip with stop ticks and angled stop names along the bottom, and a warm yellow line that glows softly over amber and red crowding bands.

Colors (use these exact values):
- Background: #17191C. Main line, its fill and the route badge: #FFC43D.
- Crowding bands: #F28C28 (busy) at 12% opacity and #E5484D (over the limit) at 16% opacity; the limit line and its label in #E5484D, the busy label in #F28C28.
- Route strip, termini and primary text: #F2EEE6. Stop names #C9C4BA (highlighted ones #FFC43D). Secondary text: #9A968E. Gridlines: #2B2E33.

Typography (Google Fonts):
- Sofia Sans Condensed throughout. Title 700, 30px #F2EEE6, stating the finding. Subtitle 400, 16.5px #9A968E with measure, unit, period and the capacity. Badge number 800, 36px #17191C.
- Stop names 600, 14px (termini 800, #F2EEE6), rotated -38 degrees and hanging below the strip. Axis labels 14px. Band labels 700, 13px uppercase with 1.6px letter-spacing. Peak callout 800, 20px with a 600 13.5px yellow detail line.

Layout:
- A 50px #FFC43D rounded square (rx 10) at x 40, y 34 with the route number; title at x 108, y 60; subtitle at y 86.
- Plot from x 104 to 896, y 140 to 420. Route strip at y 452. Footer at y 580: "Source: ..." left, a note right, 13px #9A968E.

Axes and grid:
- Bands span the full plot width: red from the limit to the top, amber from 80% of the limit to the limit. A 1.4px #E5484D dashed line (4 on, 4 off) at the limit. Band labels right-aligned inside each band's top.
- Two faint 1px #2B2E33 gridlines; y labels right-aligned 12px left of the plot, with the 80% and limit values colored to match their bands.
- The x axis is the route strip: a 10px #F2EEE6 bar (rx 5) spanning the plot, a 4 x 13 px tick (rx 2) above it at each intermediate stop, and at each terminus a larger rounded cap: a circle r 11 filled with the background and a 5px #F2EEE6 ring. A 1px #3A3E44 baseline sits at zero above the strip.

Marks:
- Line chart: a stepped line (the value holds between x categories and changes at each one) with 4px rounded corners, 3px #FFC43D, over a 6px copy at 45% opacity blurred 4px for the glow, over a vertical gradient fill from #FFC43D at 34% at the peak to 4% at the baseline. Use a straight polyline instead of steps when the data is not piecewise constant.
- Bar chart: vertical bars in #FFC43D at 85% opacity, rx 3 top corners only, with the same glow and bands; the x categories sit on the route strip as stops.

Labels and annotation:
- Label the peak above its segment: value ("204 aboard") and a yellow share of the limit ("113% of capacity"). Color the stop names reached above the limit in #FFC43D and explain it in the footer.

Avoid: pure black, cool blues, more than one line color, thick gridlines, horizontal stop names that collide, and glows clipped by the plot edge.

When you're done, render the chart and check that the bands line up with the y scale, the stop names do not overlap each other or the strip, and the peak label's percentage is arithmetically right.