Chart Prompts

Restyle my chart in the "Time Gaps" 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 standings page of a stage race's official results. Crisp, sporty and ranked: a column of names, deep blue deficit bars, a red sting in the tail for today's losses and a gold rule for the leader.

Colors (use these exact values):
- Page: #EEF4F8 (pale sky), with alternate rows lifted by a #FFFFFF band at 55% opacity.
- Bars and main ink: #1D3557 (deep blue).
- Today's change segment and its note: #E63946 (red).
- Leader: #D4A017 (gold) for the leader's rule and position number; the leader's total time label in darker #8A6A08 for contrast.
- Secondary text, team codes and column heads: #7D8A97. Gridlines and footer rule: #D6E1EA.

Typography (Google Fonts):
- Saira for the eyebrow (12px 600 caps, 2px letter-spacing, #7D8A97), the title (30px 700 deep blue, stating the finding), column heads (11px 600 caps, 1.5px letter-spacing), positions (15px 700), names (15px 500; leader 700), team codes (11px 600 caps, 1.4px letter-spacing, gray), value labels (14px 700) and axis ticks (12px 500).
- Newsreader for the subtitle (17px italic, #4A5A6A), the per-row change notes (13px italic red, e.g. "(18s today)"), the legend and footnotes (13 to 14px).

Layout:
- 56px left margin. Eyebrow, title, subtitle stacked at the top. A standings table below: POS at x 56, RIDER at x 96, TEAM at x 264, bars from x 330 to 790, with 28px rows and 16px tall bars.
- Column heads and minute ticks share one header line ("0", "+1'", "+2'" ...).
- A footer rule, then a one-line legend (blue swatch, red swatch, gold rule sample) with the source right-aligned, and a line of team code definitions.

Axes and grid:
- Thin 1px #D6E1EA vertical gridlines every minute through all rows, the zero line in 1.2px deep blue. No horizontal gridlines: the alternating row bands do that job.

Marks:
- Bar chart: square-cornered horizontal bars starting at zero. The part of each bar that was gained today is a red segment at the bar's end; the rest is deep blue. The value sits 8px past the bar end as "+m:ss" in 14px 700 blue, followed by the red italic note. The leader has no bar: a 3px gold rule spans the full scale with a knockout label carrying the total time.
- Line chart: one deep blue 2.5px line per ranked entity over time (gap to leader, inverted so the leader is at top), the latest segment of any line that lost ground today in red, a flat 3px gold line for the leader at zero, and direct labels at the right end in Saira with gray team codes.

Avoid: rounded bars, gradients, shadows, more than one accent red, legends that repeat what direct labels say, and seconds-only formats for gaps over a minute.

When you're done, render the chart and check that every red segment equals that row's reported change, the gap labels use m:ss consistently, the gold rule reads as the leader, and the longest bar's labels fit inside the canvas.