Chart Prompts

Restyle my chart in the "Battery Life" 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 product spec sheet for premium consumer electronics. Matte black, wide spaced caps, restrained warm grays, one amber and one lime highlight, and a product name block under a hairline like the back of a box.

Colors (use these exact values):
- Background: #111213 (matte black). Title and product name: #F4F4F2. Secondary text: #7C7F83. Gridlines: #232527. Baseline and divider rule: #3A3C3F.
- Series, from least to most emphasized: #C9CCCF (pale gray), #9C8F84 (warm gray), #F2A33A (amber), #C6F432 (lime highlight, the headline series).

Typography (Google Fonts):
- Syncopate 700 for the title (30px uppercase with 3px letter-spacing, stating the headline number) and the product name (24px with 6px letter-spacing).
- Rubik for everything else: eyebrow 11px 500 uppercase with 2.4px letter-spacing; subtitle 15px 400 #7C7F83; tick labels 12px; endpoint values 16px 600 (the highlight 19px); endpoint names 11.5px at 85% opacity in the series color; spec keys 10px 500 uppercase with 2px letter-spacing; spec values 14px 500 in #C9CCCF.

Layout:
- 48px margins. Eyebrow y 50, title y 94, subtitle y 126.
- Plot from x 96 to 860 and y 168 to 420, with x tick labels ("10 h") along the top of the plot rather than the bottom, leaving the space under the baseline for endpoint labels.
- A 1px #3A3C3F rule at y 490 across the full width. Below it: product name and a one-line description on the left, three spec columns (MODEL, CELL, TEST) starting at x 330, 140px apart, a lime outlined revision pill (86 x 22px, fully rounded) on the right, and the source line under it.

Axes and grid:
- Horizontal gridlines every 25% in 1px #23252A with percent labels on the left; vertical gridlines at each x tick. No axis lines except the #3A3C3F zero line.

Marks:
- Line chart: stepped-smooth discharge curves. The level holds at each 5% notch, then eases down to the next through a short cubic curve (at most 10px wide), like a fuel readout. Stroke widths 1.8px for the grays, 2px amber, 3px lime; round joins. Each curve ends in a dot on the zero line (r 3.5, the highlight r 5) with a 2px background-colored ring, then a short 8px tick down to its label: the value in bold ("40 h") and the mode name under it, both in the series color and centered.
- Bar chart: slim horizontal bars (14px tall, 2px radius right ends) in the same four colors on the same black sheet, value labels at the bar end in Rubik 600 and mode names on the left, lime bar last and thickest (18px).

Avoid: glows, gradients, area fills, a boxed legend (label endpoints directly), and more than one highlight color.

When you're done, render the chart and check that the step notches are crisp, the endpoint labels don't collide, the title number matches the data, and the product block reads as a separate footer under the rule.