Chart Prompts

Restyle my chart in the "Beam Traffic" 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 satellite operator's daily network report. Crisp white page, a confident geometric headline, five thin vivid traces and a compact legend of hexagon tags.

Colors (use these exact values):
- Page #FFFFFF with a 6px #101828 bar across the very top edge.
- Series, in this order: #1D4ED8 (cobalt), #0D9488 (teal), #EA580C (orange), #C026D3 (magenta), #65A30D (olive).
- Capacity ceiling band: #EEF0F3, bounded below by a 1.2px #9AA3B2 line; its label in #7A8394.
- Ink #101828, secondary text #5D6677, gridlines #E4E7EC.

Typography (Google Fonts):
- Syne 700 for the title only, 32px, -0.5px letter-spacing, #101828, stating the finding.
- DM Sans for everything else: kicker 11px 700 uppercase with 2px letter-spacing in #5D6677; subtitle 15px #5D6677 with measure and unit; axis labels 12px; legend names 12.5px 600 #101828 with 11px #5D6677 values below; small uppercase labels 10 to 10.5px 700 with 1.4px letter-spacing.

Layout:
- 56px margins. Kicker at y 48, title at y 90, subtitle at y 122.
- Plot from x 76 to 752, y 162 to 506. A legend column from x 789 to 904 headed "BEAMS AT 20:00" lists each series as a flat-topped hexagon tag (radius 14, vertically squashed to 90%) filled with the series color and a white 11px 700 id ("B1") inside, then the name and its value at the busy hour with percent of capacity. Order the legend by that value, 52px apart.
- Footer rule at y 548 (#E4E7EC) with "Source: ..." left and a capacity note right, 11.5px #5D6677.

Axes and grid:
- Horizontal gridlines only, 1px #E4E7EC, with a 1.2px #101828 baseline. Y labels 12px right-aligned 12px left of the plot, no axis line.
- X ticks 5px #101828 every 3 hours with "HH:00" labels 22px below the baseline.
- The capacity ceiling: fill the plot from the capacity value to the top in #EEF0F3 with "BEAM CAPACITY CEILING 4.0 Gbps" in 10.5px 700 spaced uppercase at its top left.

Marks:
- Line chart: 2px smooth (monotone) lines with round caps, drawn so the first series is on top. End each line with a 5px hexagon in the series color with a 1.2px white edge. Mark the busy hour (the period with the highest total) with a 1-hour wide #101828 band at 4.5% opacity, a 1px dashed (3 3) vertical rule, and a dark #101828 callout box (rx 3, 124 x 40) with a small pointer: "BUSY HOUR 20:00" in 10.5px 700 white and the total in 10.5px #C9CFDA. Put a hollow white dot with a 2px colored ring on the highest point and label its value in 12px 700 in the series color.
- Bar chart: grouped thin bars (about 8px each, 2px apart) in the same five colors with 2px top rounding, the busy-hour group sitting on the pale band, the capacity ceiling drawn identically, and the same hexagon legend.

Avoid: thick lines, area fills, drop shadows, a boxed legend, more than one callout, and letting the hexagon tags drift from the series colors.

When you're done, render the chart and check that the busy hour really has the highest total, the percentages are value divided by capacity, the callout box contains its text, and each hexagon tag matches its line.