Chart Prompts

Restyle my chart in the "Pipeline Gantt" 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 run view of a continuous integration service in dark mode. Neutral charcoal, status colors doing all the talking, a "now" line showing the run is still live.

Colors (use these exact values):
- Background #1B1C20; header panel #232429; rules and gridlines #2F3137.
- Status: passed #56D364, failed #D93A36, running #58A6FF (striped with #3B82D6), skipped #6E7681.
- Text #E6E7EA, muted #8B8F98.

Typography (Google Fonts):
- Inter for the title (700 23px, -0.3px letter-spacing, stating the finding) and subtitle (400 14px muted, naming the measure and unit).
- Fira Code for everything else: header line 12.5px, stage names 12.5px (skipped stages muted), durations 11px with tabular figures, axis labels 11px, the now badge 600 11px, legend 11.5px.

Layout:
- A 40px header panel (8px radius) at the top: a red or green status disc, "repo / branch / run #N . sha . trigger" with the path parts muted, and "elapsed m:ss" on the right.
- Title and subtitle under it, then the chart: stage labels from x = 40 (a status glyph, then the name 20px to its right), bars from x = 236 to 900.
- Legend at the bottom left (18 x 11 px chips with status names), "Source: ..." at the bottom right.

Axes and grid:
- Minute gridlines, 1px #2F3137, full height; minute labels ("0m", "1m", ...) above the first row. No horizontal gridlines; rows are 26px apart.
- A 1.2px #E6E7EA vertical "now" line through all rows with a solid badge "now 8:12" (72 x 20 px, 4px radius, dark text) below the last row.

Marks:
- Bar chart: floating range bars 14px tall with 3px radius from each stage's start to end, filled by status. The running bar is filled with 45 degree stripes (10px period, #58A6FF and #3B82D6). Durations sit 7px after the bar end in muted text ("1m 24s"), blue with "running" for the running stage; the failed stage's duration is white 600 inside the bar's right end. Skipped stages get a 46 x 14 px dashed #6E7681 outline at their would-be start and the word "skipped".
- Status glyphs left of each name: check (passed), cross (failed), slashed circle (skipped), partial arc spinner (running), all 1.8px strokes in the status color.
- Line chart: duration of the pipeline per run as a 2px #8B8F98 line with points colored by each run's status (r 4, failed runs as hollow red rings), minute gridlines, and the latest run marked with the now-style badge.

Avoid: gradients, glows, bright backgrounds, color without a glyph or label (red and green must never be the only cue), and bars that start at zero when they should float.

When you're done, render the chart and check that every bar starts and ends at the right times, the now line matches the elapsed time in the header, failed and passed stages are distinguishable by glyph alone, and no duration label runs into another bar.