Chart Prompts

Restyle my chart in the "Sorting Office" 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 night shift in a mail sorting office. A dark slate wall of pigeonholes forms the grid, one mail-red line runs across it, and shift changes are logged with crisp white rules. Operational and calm, like a floor-manager's wall display.

Colors (use these exact values):
- Background: #1B2229 (dark slate).
- Pigeonhole slots: #28323D, each shaded at its top edge by a vertical gradient from #12171C (90% opacity) to the slot color at 28% of its height, so it reads as an opening.
- Data and accents: #E5433B (mail red) for the line, markers, the eyebrow and the peak pill. Area fill: the same red as a vertical gradient from 34% to 4% opacity.
- Shift rules, shift tags, title and pill text: #F2F4F6. Axis labels and subtitle: #AEB7C1 (pale gray). Quiet text (source, footnote, first shift tag): #6F7B88.

Typography (Google Fonts):
- Barlow 700 for the title (31px #F2F4F6, stating the finding) and Barlow 400 for the subtitle (16px pale gray, measure, unit and time range) and source (13px).
- Barlow Condensed for everything else: eyebrow 14px 600 uppercase with 2.4px letter-spacing in red (place, shift, date); a headline total top right (34px 700 white) with a 13px 600 uppercase caption; axis labels 15px 500 pale gray; shift tags 12px 700 uppercase with 1.6px letter-spacing; the peak pill 14px 700 uppercase with 1px letter-spacing; footnote 12px 600 uppercase with 1.8px letter-spacing.

Layout:
- 56px side margins. Eyebrow at y 64, title at y 104, subtitle at y 134; the total and its caption right-aligned on the title and subtitle baselines.
- Plot from x 104 to 904, y 200 to 500. Shift tags sit just above the plot top at y 186.
- Footer at y 568: "Source: ..." left and a key right ("EACH SLOT = ONE HOUR x 10,000 LETTERS", adapted to your units).

Axes and grid:
- There are no drawn gridlines: the grid is a wall of slots. Divide the plot into one column per x category (hour) and one row per y tick interval, and draw each cell as a rounded rectangle (3px radius) inset 3px on every side. The 6px dark gaps between slots are the gridlines.
- Y labels right-aligned 12px left of the plot at each row boundary; x labels centered under each column at y 526, in 24-hour time.
- Shift changes (or any regime change): 1.2px #F2F4F6 vertical rules on column boundaries from just above the plot to 4px below it, with the shift tag 6px right of the rule's top.

Marks:
- Line chart: each point sits at the center of its slot column. A 3px red line with straight segments and round joins, 4.5px hollow markers (slate fill, 2.2px red stroke), and the peak as a 7px solid red marker with a 2.5px white ring. A 1.5px red leader runs up and right from the peak to a 148 x 28 px red pill (14px radius) holding "PEAK <value> AT <time>" in white.
- Bar chart: one bar per slot column, 60% of the column width, solid mail red at 85% opacity with 3px top corners, over the same slot wall; the peak bar at full opacity with the red pill above it and a white 1.2px outline.

Avoid: visible gridlines on top of the slots, more than one accent color, light backgrounds, glow effects, and em dashes.

When you're done, render the chart and check that the slots line up exactly with the y ticks, each point or bar is centered in its column, shift rules sit on column boundaries, and the peak pill does not cover the line or a shift tag.