Chart Prompts

Restyle my chart in the "Tariff Clock" 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 dark, precise energy app screen explaining time-of-use pricing. Calm slate, crisp white steps, one glowing electric green line and quiet colored time bands, like a well-designed smart meter dashboard.

Colors (use these exact values):
- Background: #131A22 dark blue-gray; the clock dial disc #18212B with a #26313D ring.
- Price or stepped series: #F4F6F8 white.
- Main measured series: #3DF08A electric green with a soft glow (Gaussian blur 4 merged under the stroke) and an area fill fading from 22% to 0% opacity.
- Peak periods: #F0626B muted red, shown as a 14% opacity band; off-peak periods: #5B8DEF muted blue at 9% opacity; standard periods unshaded, keyed #7C8795 in the legend and dial.
- Text #EEF2F6, secondary #98A4B3, axis labels #65717F, gridlines #26313D.

Typography (Google Fonts):
- Readex Pro everywhere, tabular figures for numbers.
- Title 24px 600 stating the finding; subtitle 14.5px 300 #98A4B3 with both measures and their units.
- Panel labels 11px 500 uppercase with 1.4px letter-spacing ("PRICE ¢/kWh", "USAGE kWh per hour").
- Step value labels 12.5px 500 white; axis labels 11.5 to 12px; callout value 20px 600.

Layout:
- 56px left margin. Title at y 62, subtitle at y 90, a horizontal legend row at y 128 (12px rounded squares with period name and price and hours).
- The clock-face legend sits at top right (center 866, 92): a 24-hour dial of radius 40 with midnight at the top, 9px arcs colored by tariff period, small ticks for every hour (longer every 6 hours) and "0 6 12 18" in 9.5px.
- Two measures with different units never share an axis: stack two panels on one time axis, the stepped price panel on top (y 186 to 290) and the usage panel below (y 346 to 496), both from x 96 to 900. The period bands run through both panels.

Axes and grid:
- Each panel has its own few horizontal gridlines (1px #26313D) with labels 10px left of the plot, including units ("20¢"). No vertical gridlines.
- One shared x axis under the lower panel with 5px ticks and labels every 4 hours.

Marks:
- Line chart: the price is a 2.5px white stepped line with its value printed above each step; the usage is a smooth 2.8px green line with round caps, glow and fading area. The most expensive hour (usage times price) gets a dark ring dot (r 5.5, 2.5px green), a dotted green drop line and a boxed callout: 176 x 58, 6px radius, background fill, 1.5px #F0626B border, a connector to the dot, the cost in 20px 600, "priciest hour" in 12px #F0626B and the hour, usage and price underneath.
- Bar chart: hourly bars 60% of the band wide with 3px rounded tops in #3DF08A (no glow), the same bands behind them, and the stepped white price in its own panel above; the priciest bar outlined in #F0626B with the same boxed callout.

Avoid: a second y axis, bright full-opacity bands, more than one glowing element, light backgrounds and decorative gradients.

When you're done, render the chart and check that the dial arcs match the legend hours, the bands align between both panels, the callout's cost equals usage times price, and the title's percentage is computed from the data.