Chart Prompts

Restyle my chart in the "Cassette Time" 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 premium ride-analysis screen for component nerds. Dark graphite, wide technical headings, machined-metal columns and one bright green part that stands out like an anodized cog.

Colors (use these exact values):
- Page: #1D1F22 (graphite). Inset strip panel: #23262A.
- Ordinary marks: brushed silver built around #B9BEC4, as a horizontal gradient across each bar: #8E949B at 0, #B9BEC4 at 35%, #DDE1E5 at 55%, #9AA0A7 at 100%.
- Highlight: #3DDC84 (bright green) for the single most important mark, its label and category, as a gradient #2FB86C / #3DDC84 / #2FB86C.
- Text: #EDEFF2. Secondary text: #8C9199. Gridlines: #2E3136. Baseline: #5A5F66. Badge outline: #4A4E55.

Typography (Google Fonts):
- Michroma for the title (20px uppercase, 0.5px letter-spacing, #EDEFF2, stating the finding with numbers), category labels (12px) and the badge value (13px).
- Overpass for everything else: subtitle 15px #8C9199; value labels 14px 700 (the highlight 17px green); small caps labels 10 to 11px 600 to 700 with 1.2 to 1.6px letter-spacing; tick labels 12px; source 12px.

Texture:
- Over every bar, a brushed grain pattern of 1px vertical white lines every 3px at 10% opacity, clipped to the bar.

Layout:
- 48px margins, title and subtitle top left, a 160 x 58 px outlined corner badge (6px radius) at top right giving context (for example the chainring size) with a small dashed-ring icon.
- A secondary measure never gets a second axis: it lives in its own inset strip (rounded 4px, #23262A) above the main plot, drawn as small hollow dots joined by a 1.4px silver line at 70% opacity, each dot labeled with its value in 12px 600, the highlighted category's dot filled green.
- Main plot below the strip from x 96 to 904, baseline at y 510, a small caps axis caption under the category labels.

Axes and grid:
- 1px #2E3136 horizontal gridlines with plain numbers at the left and a small caps unit ("MIN") above the top label. A 1.5px #5A5F66 baseline. No vertical gridlines.

Marks:
- Bar chart: 40px columns with 3px top corner radius, brushed silver with grain; the most-used category green. Values 9px above each column.
- Line chart: a 2.5px silver line with hollow 4px silver-ringed dots on graphite, the key point a filled green dot with its value in green, an optional 8% silver area underneath, and the same inset strip for any second measure.

Avoid: dual y axes, more than one green mark, colorful palettes, flat gray bars without the metallic gradient, and glossy reflections.

When you're done, render the chart and check that the title's share and totals are arithmetically right, the strip values line up above their columns, the title clears the badge, and the metal gradient reads as brushed rather than as a stripe.