Chart Prompts

Restyle my chart in the "Queue Depth" 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: an on-call dashboard pulled up during an incident review. Charcoal, monospaced and dense but calm: a comb of slim purple bars, a red alert rule, the incident window shaded, and a thin white line showing how the system responded.

Colors (use these exact values):
- Background: #16181D. Stat tiles: #1C1F25 with a 1px #2A2E36 border.
- Main measure (bars): #9C7CF0 (soft purple), full opacity above the alert threshold and 78% below it.
- Response measure (consumers, workers, replicas): #F4F5F7 (near white) thin line in its own lane.
- Alert threshold, incident window and its labels: #F0524F (red); the window is #F0524F at 10% opacity with 1px edges at 55% opacity.
- Ink #ECEEF2, secondary text #9095A0, faint labels #626874, gridlines #23262D, baselines and ticks #3A3F49.

Typography (Google Fonts):
- Roboto Mono for everything, tabular figures.
- Breadcrumb 12px 500 #9095A0 ("orders.ingest › queue depth"), time range 12px #626874 right-aligned.
- Title 21px 600 with -0.6px letter-spacing, stating the peak and the recovery. Subtitle 12.5px #9095A0.
- Stat tiles: key 10px uppercase with 1px letter-spacing #626874, value 19px 600 #ECEEF2, context 10.5px #9095A0 right-aligned on the value's baseline.
- Axis labels 11px #626874; annotations 10.5 to 12px.

Layout:
- 40px side margins. Breadcrumb, title and subtitle at the top, then a stat row of four tiles (210 x 58px, 6px radius, 12px gaps), each with a 2.5px accent bar at its left edge in the color of what it describes: peak value (purple), time above threshold with start and end times (red), drain time (ink), peak response count (white).
- The main chart (about 208px tall) and below it, 38px lower, a short lane (about 52px) for the response measure with its own label "ACTIVE CONSUMERS" (10px uppercase) and its own 0 / mid / max scale. Both share one time axis at the bottom. Never put the second measure on a right-hand axis over the bars.
- Footer: "Source: ..." left; an inline legend right (purple square "backlog", white line "consumers", red dashed "alert").

Axes and grid:
- Horizontal gridlines only, 1px #23262D; compact y labels ("20k") right-aligned 10px left of the plot. Time labels every 10 minutes in HH:MM under the bottom lane with 4px ticks, the first left-aligned and the last right-aligned.

Marks:
- Bar chart: one slim bar per interval, about 60% of the band (5.6px at 90 bars), 1.5px top radius, #9C7CF0. The peak bar gets its value centered 7px above it in 12px 600 purple.
- Line chart: the main measure as a 1.5px #9C7CF0 line with a 12% purple fill to the baseline, same threshold and window treatment.
- Response lane: a 1.5px #F4F5F7 stepped line (horizontal then vertical), labeled at its starting level and at its maximum in 10.5px.
- Alert threshold: 1.5px #F0524F dashed 5 on 4 across the main chart, labeled "alert threshold 20k" in 11px 500 red at the right end on a background knockout.
- Incident window: a translucent red rect spanning both lanes from the first interval above the threshold to the first interval back under it, with "14:17 start" right-aligned just left of the window and "14:30 end" just right of it, both 11px 500 red above the plot.

Avoid: a dual-axis chart, thick or wide bars, gradients on bars, glows, bright backgrounds, and more than one accent color for the main measure.

When you're done, render the chart and check that the window edges line up with the first and last bars above the threshold, the stat tiles agree with the chart, the response line sits in its own lane, and no stat context text touches its value.