Chart Prompts

Restyle my chart in the "Agate Table" 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 dense standings box on a newspaper sports page. Condensed type, ruled rows, numbers in tidy columns, and a single red mark for whoever is on top.

Colors (use these exact values):
- Page: #FFFFFF. Headline band and heavy rules: #111111. Headline text on the band: #FFFFFF.
- Bars and ordinary data: #3B4652 (dark slate). The leader (first place, or the one item the title is about): #B3392B (brick red), including its rank, bar and main value.
- Alternating row shading: #F1F1EE. Row hairlines and faint scale lines: #D5D5D0.
- Body text #111111, secondary text (secondary columns, subtitle, notes) #5E5E5A.

Typography (Google Fonts):
- Headline: Oswald 600, 29px, uppercase, 0.4px letter-spacing, #FFFFFF, reversed out of the black band.
- Everything else: Roboto Condensed with tabular figures (font-variant-numeric: tabular-nums). Dateline 700 12.5px uppercase with 1.4px letter-spacing in #111111 ("STANDINGS THROUGH WEEK 14"), followed after a short hairline divider by a 13.5px #5E5E5A subtitle naming the measure. Column heads 700 11.5px uppercase, 1.2px letter-spacing. Names 15px (700 for the leader). Main value column 700 15px; secondary columns and ranks 14px #5E5E5A. Footnotes 12px.

Layout:
- 36px side margins. A full-width black band 56px tall at the top holds the headline, then the dateline line about 24px below the band.
- The chart is a ranked table: rank column (right-aligned), name column, a bar column about half the width, then right-aligned numeric columns (for example GP, the main value, and a per-game rate to two decimals).
- A 1.5px #111111 rule under the column heads and under the last row. Rows about 32px tall, zebra-shaded on every other row, each closed by a 0.75px #D5D5D0 hairline.
- Footer: an abbreviation key at bottom left and "Source: ..." right-aligned, both 12px #5E5E5A.

Axes and grid:
- No axis lines. Faint dashed (2 3) 0.75px #D5D5D0 vertical scale lines inside the bar column at round steps, with small 11.5px #5E5E5A scale labels centered under the bottom rule.

Marks:
- Bar chart: horizontal, flat, square-cornered bars 14px tall, starting at the bar column's left edge, sorted descending, all #3B4652 except the leader in #B3392B. Values live in the right-aligned numeric column, not at the bar ends.
- Line chart: a compact line (2px #3B4652, straight segments) with the leader's or latest series in 2.5px #B3392B, on the same zebra-banded background with hairline horizontal rules, a black headline band above, and a right-aligned value column or end labels in Roboto Condensed.

Avoid: rounded corners, gradients, shadows, more than one red item, centered numbers, proportional (non-tabular) figures, and any colored background other than the zebra rows.

When you're done, render the chart and check that every numeric column is right-aligned on its last digit, rows line up exactly with their bars, only the leader is red, and nothing in the dense table touches.