Chart Prompts

Restyle my chart in the "Inverter Availability" 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 plant control room's monthly availability board. Near-black green, techy condensed IDs, bright green health, red loss, amber warnings, and one hard contractual line.

Colors (use these exact values):
- Page: #0E1411 (near-black green).
- Healthy share: #34D17A (bright green). Lost share: #FF5A4F (red). Warnings and failing figures: #FFB020 (amber).
- Text: #E4EEE7. Secondary text: #8A9C90. Row group separators: #24322A. Empty bar track: #16211B. Group labels: #4E6356.

Typography (Google Fonts):
- Chakra Petch for IDs and technical labels: eyebrow 12px 600 uppercase with 2px letter-spacing in #34D17A; row IDs 13px 500 #8A9C90 with 0.6px letter-spacing (700 #E4EEE7 for failing rows); column headers and scale labels 11px (600 with 1.4px letter-spacing for headers); rotated group labels 10px 600; threshold label 12px 600.
- Hind for the title (30px 600 #E4EEE7, stating the computed count of misses), subtitle (15px #8A9C90 with measure, unit and computed averages), legend (14px) and figures (15px 600 for the main figure, 14px 400 for the secondary one).

Layout:
- 56px side margins. Eyebrow at y 46, title about y 90, subtitle about y 117, legend row at y 152.
- Rows start at about y 196: IDs at x 56, a rotated group label at x 118, bars from x 150 to x 690, a figures column at x 742 and a right-aligned secondary column ending at x 904. Row pitch 17px, bar height 10px, a 16px gap with a 1px #24322A full-width separator between groups.
- Scale labels (0%, 50%, 100%) and column headers 16px above the first row.

Axes and grid:
- No gridlines; the scale runs from zero at the left end of the bars to 100% at the right end, shown by the header labels only.
- The contractual threshold as a vertical 1.4px #E4EEE7 dashed line (3 on, 2 off) spanning all rows, labeled below the last row, right-aligned 6px left of the line.

Marks:
- Bar chart (horizontal): each bar starts at zero and fills the whole scale: green from zero to the achieved value, red from there to 100%, over a #16211B track. Rows below the threshold get an amber warning triangle (about 13px wide, with a dark exclamation cut out) left of the figure, the figure in amber and the secondary figure in red.
- Line chart: one 2px #34D17A line per group (or the fleet) on the same dark panel, with the loss shown as a red fill between the line and 100%; points below the threshold get amber triangles and the same dashed threshold, drawn horizontally.

Avoid: truncating the scale so bars stop starting at zero, rounded bars, gradients, glows, more than three accent colors, and unrotated long group labels squeezed into the ID column.

When you're done, render the chart and check that the red tips are visible on every row that has loss, the count in the title matches the triangles, the figures column aligns on the decimal point visually, and the threshold line sits exactly at its value on the bar scale.