Chart Prompts

Restyle my chart in the "Arbitrage Day" 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 trading-desk recap for a grid battery. Dark navy, a single bright price trace, and blue and gold windows that show when energy was bought and sold, with the money figure up top.

Colors (use these exact values):
- Background: #0E1526 (dark navy). Gridlines: #1D2740; the zero line: #3A4868.
- Price line and chart labels: #F4F6FB (white).
- Charging windows: #3D8BFF (blue). Discharging windows and the revenue figure: #F2B53A (gold).
- Secondary text: #8390AA.

Typography (Google Fonts):
- Manrope throughout, tabular figures (font-variant-numeric: tabular-nums) for every number: eyebrow 700, 11px, 2px letter-spacing, uppercase, #8390AA; title 800, 27px, -0.5px letter-spacing, white; subtitle 400, 14.5px, #8390AA; revenue label 700, 11px, 2px letter-spacing, gold; revenue figure 800, 40px, -1px letter-spacing, gold, right-aligned; window energy 700, 14px in the window color; "IN"/"OUT" 700, 9.5px, 1.4px letter-spacing at 80% opacity; axis labels 500, 12px, #8390AA; price callouts 700, 14px white; legend 600, 13px white.

Layout:
- 56px margins. Eyebrow at y 58, title at y 96, subtitle at y 122; the revenue label and figure right-aligned at x 904 on the eyebrow and title lines.
- Plot from x 88 to 904, y 214 to 494. Windows extend 44px above the plot top so their arrows and energy labels sit in a clear band. Legend (14px swatches) at bottom left, source at bottom right.

Axes and grid:
- 1px #1D2740 horizontal gridlines every 50 units, the zero line in #3A4868, labels right-aligned 12px left of the plot with the currency only on the top label. No vertical gridlines, no axis lines.
- Time labels every three hours, 24px below the plot.

Marks:
- Line chart: a 2.6px white stepped line (hourly prices hold flat for the hour). Each window is a full-height rectangle filled with a vertical gradient of its color from 30% opacity at the top to 5% at the bottom, capped by a 2px solid bar of the color. At its top-left: a 2px stroked arrow drawn as a path (down for energy in, up for energy out) and the energy in MWh with "IN" or "OUT" beneath. Label the day's peak price above its step and the minimum below it.
- Bar chart: white square-cornered hourly bars (about 60% of the band) with bars below zero hanging down, on the same blue and gold windows; the same arrows, energy labels and revenue figure.

Avoid: glows, a second y axis for energy (energy lives in the window labels), smooth curves for hourly prices, and colors other than blue and gold for the windows.

When you're done, render the chart and check that the revenue equals discharged MWh times price minus charged MWh times price, window edges align with hour boundaries, and the arrows point the right way.