Chart Prompts

Restyle my chart in the "Tonal Dark" 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 modern dark-mode design system built from one green seed color. Tonal surfaces instead of borders, fully rounded shapes, and a single selected state.

Colors (use these exact values):
- Page: #0F1512. Card surface: #1B211E. Raised containers and bar tracks: #252B28.
- Primary (selected bar, key numbers): #8BD6B4. Secondary (other bars): #3F5A4E. Secondary container (selected segment): #334B40 with #CFE9DB content.
- On-surface text: #DEE4DF. On-surface variant: #BFC9C2. Outline: #89938D. Outline variant (gridlines): #3F4943.

Typography (Google Fonts): Roboto Flex only.
- Title 26px 500, letter-spacing -0.2px. Subtitle 15px 400 variant. Segments 14px 500. Stat labels 12px 500 with 0.4px letter-spacing, stat values 20px 600. Axis and day labels 14px 500 (selected 600 in primary). Hour labels 12px 400 outline. Source 12px 400 outline.

Layout:
- One card inset 24px from the edges, 28px radius, with a soft elevation shadow (0 6px 20px black at 35%).
- Header top left (x 60). Segmented button row top right: three 84 x 40px segments inside a fully rounded 1px #89938D outline, 1px dividers, the selected segment filled #334B40 with a 2px check mark before its label.
- A row of three stat tiles under the header: 156 x 64px, 16px radius, #252B28, label above value. Chart below. Source bottom left.

Axes and grid:
- Horizontal gridlines at round values in #3F4943 at 55% (the zero line at 100%), with labels ("2 h") right of the plot. No vertical axis line.
- An average line: 1.5px #89938D, dash 2 6 with round caps, ending in an outlined label chip (80 x 28px, 8px radius, 1px #89938D, card fill) right of the plot.

Marks:
- Bar chart: 48px wide fully rounded pills (radius = half the width, or half the height when a bar is shorter than it is wide). Behind each bar, a full-height track pill in #252B28. Bars in #3F5A4E; the selected bar in #8BD6B4 with its label in primary and a 2.5px primary dot under it.
- Floating value chip over the selected bar: a 76 x 36px fully rounded chip in #DEE4DF with #1B211E 15px 600 text, a 6px downward caret, and a small shadow (0 3px 8px black at 40%), 14px above the bar top.
- Line chart: a 3px #8BD6B4 line with round joins over an area filled with #8BD6B4 at 12%; other series 2px in #3F5A4E; the selected point as a 12px #8BD6B4 dot with a 4px #1B211E ring, carrying the same floating chip.

Avoid: hard borders around containers, square corners anywhere, pure black or gray without the green tint, more than one accent, and drop shadows on the bars.

When you're done, render the chart and check that the chip doesn't clip the card or overlap the stat tiles, short bars still read as pills, and the average chip doesn't collide with the hour labels.