Chart Prompts

Restyle my chart in the "Fault Codes" 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 maintenance console for a robotic packaging line. Dense, monospaced and matter-of-fact: gunmetal background, fault codes in chips like on an HMI, red that brightens where the trouble is concentrated.

Colors (use these exact values):
- Page: #1A1D21 (gunmetal). Chips: #24282E with a 1px #343A42 border. Row separators #343A42.
- Bars: #D0584E (muted red) at 85% opacity; the top three categories #FF7A66 at full opacity, also used for their chip borders, codes and values.
- Cumulative share tracks and their header: #E8DFC8 (cream); empty track #343A42.
- Primary text #E6E8EB, descriptions #B4BAC2, secondary #8A929C, footer #666E78.

Typography (Google Fonts):
- Lekton throughout (monospace, 400 and 700). Eyebrow 700 at 13px uppercase with 1.5px letter-spacing, ">" separators. Title 700 at 30px stating the finding. Subtitle 400 at 16px with measure, unit and total. Codes 700 at 15px. Descriptions 400 at 15px. Values 700 at 15px. Axis labels 12px; axis titles 700 at 12px uppercase.

Layout:
- 40px side margins. Eyebrow at y 48, title at y 88, subtitle at y 114.
- Rows 36px tall starting at y 170, divided by 0.6px lines. Each row: a 64 x 22 code chip (radius 3) at x 40, the description at x 118, and the bar starting at x 340 (bars end by about x 730, count scale along the bottom).
- The cumulative share gets its own separately framed column at the right (about x 764 to 920, #24282E at 55% with a 1px #343A42 border), with clear space between it and the bars. Never draw the cumulative share on the bar plot or give the bars a second scale.
- Column headers at y 152: "STOPPAGES" in #8A929C over the bars, "CUMULATIVE SHARE" in cream right-aligned over the share column. Footer with source left and a note explaining the share column right.

Axes and grid:
- A 1px #8A929C vertical axis at the bar origin and a count axis at the bottom with 4px ticks.
- Inside the share column, one dotted (2 4) cream line at 80% of the track, 30% opacity, labeled "80%" under the column.

Marks:
- Bar chart: horizontal bars 20px tall, sorted descending, 2px radius on the right end only, value 8px beyond the end. In the share column, each row gets a 6px tall #343A42 track (about 86px wide) filled in cream at 70% to that row's running share, with the share right-aligned in 14px ("48%"). The third row's fill is full cream and its value bold cream, and a 1.2px cream rule across the column marks where the top three end.
- Line chart: 2px #D0584E lines per code over time with the top three in #FF7A66 and 2px thicker, labeled at the right end with the code in a small chip; no cumulative line.

Avoid: gradients, glow, rounded pills for bars, proportional fonts, and more than two reds.

When you're done, render the chart and check that bars are sorted, the title's percent equals the top three's share, the last share reads exactly 100%, and no value label crowds the share column.