Chart Prompts

Restyle my chart in the "Solar 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 friendly home energy app on a sunny day. Soft, rounded and optimistic: one white card, a big warm yellow shape, a confident blue line and a few chunky stat tiles. Clear enough for a homeowner, polished enough for a product screenshot.

Colors (use these exact values):
- Canvas: #FBF4E8 (pale warm cream) behind everything.
- Card: #FFFFFF, 912 x 556 at (24, 22), 24px corner radius, two soft shadows (0 2px 2px and 0 12px 16px blur, both #7A5A20 at 6% and 8% opacity).
- Main series area (for example solar production): #F6C343 sun yellow, filled with a vertical gradient from 95% to 55% opacity, outlined by a 2px #E3A816 edge.
- Second series line (for example household use): #2A4D9B deep blue.
- Surplus or highlight region: #9ED9B2 soft green at 80% opacity with 45 degree hatching of #3FA66B lines (1.6px, 35% opacity, 7px spacing); its label text is #23774A.
- Ink #1F2A44 for titles and values, #6B7288 for secondary text, #9AA0B0 for axis labels, gridlines #EEF0F4, baseline #DCDFE6.
- Stat tiles: #FBF7EF fill with a 1px #F1E8D6 border.

Typography (Google Fonts):
- Nunito everywhere, with tabular figures for numbers.
- Title 25px 800, -0.3px letter-spacing, stating the finding. Subtitle 14px 600 in #6B7288 with measure, unit, interval and place.
- Stat tile label 13px 700 #6B7288; tile value 28px 800 with a 15px 700 unit suffix in #9AA0B0.
- Legend 13.5px 700 ink; axis labels 12px 600 #9AA0B0; annotations 12 to 13px 700 to 800; source 11.5px 600.

Layout:
- Title at y 66 and subtitle at y 92, 56px from the left.
- A row of three stat tiles (164 x 76, 16px radius, 14px gaps) at y 114, each with a 6px colored dot keyed to its series (yellow, blue, green), a label and a big value. The third tile's value is green (#3FA66B).
- The legend stacks vertically to the right of the tiles, from x 626.
- Plot area from x 88 to 896 and y 250 to 498. Source line at the bottom left of the card.

Axes and grid:
- Light horizontal gridlines at every whole unit, 1px #EEF0F4; baseline 1.5px #DCDFE6.
- Y labels right-aligned 12px left of the plot with the unit on each ("3 kW"), zero shown as "0".
- X labels every 3 hours ("12 AM", "3 AM"...) 24px below the baseline. No axis lines or ticks.

Marks:
- Line chart: the main measure is a filled yellow area; the comparison measure is a 3px #2A4D9B line with round joins and a 6.5px white halo underneath so it stays crisp over the fill. Where the main measure exceeds the line, fill the gap with the hatched green region and label it inside ("Exported" 16px 800 plus its total 13px 700 in #23774A). Label the portion under the line in 11.5px 700 #7A5A0E. Mark the line's key peak with a white dot (r 5, 2.5px blue ring) and a 12.5px 800 blue label.
- Bar chart: rounded-top bars (6px radius) in the #F6C343 yellow with a 1.5px #E3A816 top edge for the main series, and #2A4D9B blue bars for the comparison, grouped with a 4px gap; any surplus segment uses the hatched green. Values in 12px 800 above the bars.

Labels and annotation:
- A sun icon marks the peak of the main series: an 8px yellow circle with a #E3A816 1.8px ring and eight 2.2px rays (from radius 12 to 17), a dotted 1.5px #E3A816 leader down to the peak, and a two-line label to its right ("Solar noon" 12.5px 800 ink; time and peak value 12px 600 muted).
- Stat tiles must sum honestly: produced minus exported equals the "used from solar" label.

Avoid: dark backgrounds, thin hairline type, more than three series colors, sharp corners, heavy borders and axis lines.

When you're done, render the chart and check that the tile totals match the chart, the hatched region only appears where the first series is above the second, the blue line stays readable over the yellow, and the sun icon sits above the peak without touching the title area.