Chart Prompts

Restyle my chart in the "State of Charge" 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 clean battery-management screen from an energy storage operator's report. Bright white, precise and calm, with the direction of energy flow readable at a glance from color alone.

Colors (use these exact values):
- Background: #FFFFFF for the whole canvas.
- Primary line and key readings: #128C7E (teal).
- Charging fill: #D3F0DC (soft green). Discharging fill: #FCE1CB (soft orange). Idle periods have no fill.
- Grid import ticks: #3E9E63. Grid export ticks: #DB7632.
- Ink: #16292E. Secondary text: #5F6D72. Gridlines: #E7ECEE. Operating-limit dashes and labels: #8C999E. Tick strip background: #F6F8F9.

Typography (Google Fonts):
- Hanken Grotesk: title 700, 27px, -0.4px letter-spacing, #16292E, stating the finding; subtitle 400, 15px, #5F6D72 (measure, unit, sampling interval); legend labels 500, 13px; notes and source 12px.
- Martian Mono for every percentage and number: eyebrow 600, 10.5px, 1.2px letter-spacing, uppercase, teal (site and asset name); y labels 10.5px #5F6D72; time labels 10px; callout readings 600, 13px, teal; limit labels 600, 9.5px, 0.6px letter-spacing, uppercase.

Layout:
- 56px left margin. Eyebrow at y 62, title at y 98, subtitle at y 124. Legend chips (16 x 12 px, 2px radius, filled with the soft fill and stroked with the matching tick color) right-aligned on the subtitle baseline.
- Plot from x 84 to 896, y 150 to 426. Below the time axis, a 60px tall grid strip (y 460 to 520) spanning the plot width, then a right-aligned note explaining tick height, and the source at the bottom left.

Axes and grid:
- Horizontal 1px #E7ECEE gridlines at 0, 25, 50, 75 and 100%, labels right-aligned 12px left of the plot. No vertical gridlines.
- A 1.2px #16292E baseline with 5px ticks every three hours, labeled 00:00 to 24:00.
- Operating limits: 1.2px dashed lines (6 on, 4 off) in #8C999E at 10% and 90%, labeled at the right end ("90% UPPER LIMIT" above its line, "10% LOWER LIMIT" below its line).

Marks:
- Line chart: a 3px teal line with round joins, eased between readings so it looks like a physical quantity. Under it, fill each contiguous run of rising values with #D3F0DC and each run of falling values with #FCE1CB, from the line down to the baseline. Key turning points get a white dot (r 4.5) with a 2.5px teal ring and a 13px teal mono label 14px above (or 22px below for troughs).
- Bar chart: slim teal bars (about 60% of the band, square corners) on the same white page, with the band behind each bar tinted #D3F0DC or #FCE1CB when that period was net charging or discharging; the same limit lines and mono value labels on the key bars.
- Grid strip: a 0.8px #8C999E center line; each interval gets a 2.4px round-capped vertical tick, up in #3E9E63 for import and down in #DB7632 for export, length proportional to power (3px minimum, 24px at the day's peak). Labels "IMPORT" and "EXPORT" in 8.5px 600 mono in their colors, right-aligned left of the strip.

Avoid: gradients, shadows, bold saturated fills under the line, a second y axis for power (the tick strip carries it), and more than one line color.

When you're done, render the chart and check that the green and orange fills switch exactly where the line changes direction, the limit labels do not sit on the line, the tick strip lines up with the time axis above it, and every callout percentage matches the data.