Chart Prompts

Restyle my chart in the "Container Flows" 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 port authority's night operations screen. Deep harbor blue, thick lines in the colors of stacked shipping containers, and industrial type.

Colors (use these exact values):
- Page: #0C2536 (deep harbor blue). Primary text: #EAF0F4. Secondary text: #8EA4B5. Footer text: #5F7C92.
- Series, in this priority: #D8652E (rust orange), #2BA888 (sea green), #E2C66A (faded yellow), #8FA0B0 (steel gray).
- Crane-rail gridlines: #24506B. Baseline and ticks: #3C6A86.
- Peak season shading: a vertical gradient of #2E6A8E from 32% opacity at the top to 8% at the bottom.
- Unit stamp: #1D4660 for "TEU" and #3F6F8C for its caption.

Typography (Google Fonts):
- Oswald for the headline (500, 30px, #EAF0F4, stating the finding), the unit stamp (700, 58px) and series end labels (500, 16px uppercase, 0.8px letter-spacing, in the series color).
- Roboto Condensed for the eyebrow (500, 13px uppercase, 2px letter-spacing, rust orange), subtitle (400, 16px), ticks (500, 14 to 15px), end label sub-lines (13.5px), the peak season label (700, 12px, 2.4px letter-spacing, #E08A5C) and the footer (12.5px, plus an 11.5px uppercase note with 1.6px letter-spacing).

Layout:
- 56px side margins. Eyebrow, headline and subtitle at the top.
- A 140px column on the far left holds the unit stamp: "TEU" printed large, with "THOUSANDS" and "PER MONTH" in 12px bold capitals below it, vertically centered on the plot. Y tick labels sit right-aligned 22px left of the plot.
- The plot runs from about x 206 to x 760; the right 140px hold direct end labels (name, then "196k TEU in Dec"), pushed apart to at least 40px spacing with a thin leader in the series color when moved.

Axes and grid:
- Crane-rail gridlines: each gridline is two parallel 1px lines 4px apart, dashed 10 on 4 off, extending 10px beyond the plot on both sides.
- A 1.5px baseline with 6px ticks under each period and 14px period labels.
- Shade the peak season as a full-height column band with its uppercase label centered at the top.

Marks:
- Line chart: 4.5px lines with round caps and joins on a monotone curve, each drawn over a 9px underlay in the page color so crossings stay clean. End each line with a 10px square in the series color outlined 2px in the page color. Mark the headline series' peak with an r 5.5 hollow ring (2.5px stroke) and a bold value label.
- Bar chart: grouped columns in the four series colors with 3px gaps and square corners, 2px page-color separators between neighbors, over the same crane-rail grid and peak shading, with bold series-colored value labels above the tallest bar in each group.

Avoid: glows, gradients on the lines, legends in a box, thin hairline series, and any bright white fills.

When you're done, render the chart and check that end labels never overlap, the unit stamp never collides with the tick labels, and the headline's percentage matches the data.