Chart Prompts

Restyle my chart in the "Big Number Bars" 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 magazine stat page. The figures are the headline and the bars are a supporting ruler: huge cobalt numbers down the left, crisp white space, one warm highlight rule.

Colors (use these exact values):
- Page: #FFFFFF.
- Lead value and lead bar: #1F3FD1 (saturated cobalt). All big numbers are cobalt too.
- All other bars: #B9C2F0 (soft periwinkle).
- Highlight: #E0A526 (mustard). Only for the median underline, its pill and the short rule before the eyebrow.
- Ink (title, lead label, pill text): #14161F. Secondary text: #6B7080. Row hairlines: #E6E8EF.

Typography (Google Fonts):
- Archivo Black for the row values only: 40px with -1px letter-spacing, the lead row 46px, right-aligned in a 120px column, all #1F3FD1.
- Inter for everything else: eyebrow 12px 700 uppercase with 2.4px letter-spacing in cobalt; title 29px 700 with -0.6px letter-spacing in #14161F, stating the finding; deck 16px 400 #6B7080 with the measure and unit; row labels 13px 400 #6B7080 (the lead row 600 #14161F); the "min a day" unit tag 13px 500 cobalt; the median pill 11.5px 700 uppercase with 1.2px letter-spacing; source 12px.

Layout:
- 56px side margins. A 28 x 4 px mustard rule then the eyebrow at the top, the title below it, then the deck.
- Rows 48px tall, ranked largest to smallest from the top. In each row: the big number right-aligned at x 176 (baseline 40px below the row top), then from x 196 a thin label (baseline 16px below the row top) with the bar directly under it (16px tall, starting 24px below the row top).
- 1px #E6E8EF hairlines between rows, full width.
- Source line at the bottom left.

Axes and grid:
- No axes, no ticks and no gridlines: the big numbers are the scale. Bars share one linear scale starting at zero, with the longest bar ending well short of the right margin.

Marks:
- Bar chart: horizontal bars 16px tall with 3px rounded right ends and a square left end. The top-ranked bar is cobalt with its unit ("min a day") set 10px past its end; every other bar is periwinkle.
- Line chart: keep the big-number column as a ranking of each series' latest value. Draw the lines in a plot to the right: the lead series as a 3px cobalt line, the others as 2px periwinkle lines, straight segments, no markers except a 4px cobalt dot at the lead series' last point. The median of the latest values is a 3px mustard horizontal rule.

Labels and annotation:
- Median underline: a 3px mustard rule spanning the full width under the median row (or between the two middle rows for an even count), with a mustard pill (22px tall, fully rounded) at the right end reading "MEDIAN 27.5 MIN" in #14161F. Compute the median from the data.

Avoid: axis lines, value labels at the bar ends (the numbers already sit on the left), gradients, shadows, more than one cobalt bar, and letting the bars visually outweigh the numbers.

When you're done, render the chart and check that the numbers are the first thing you read, rows are sorted, the median is computed correctly and underlines the right place, and nothing in the big-number column is clipped.