Chart Prompts

Restyle my chart in the "Night Shift" 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 phone's warm evening display mode. Every tone pushed amber, soft and calm, a screen-time report you read at 10 pm without squinting.

Colors (use these exact values):
- Background: #F7E6D2 (peach cream). One rounded panel #FBF1E6 (x 32, y 28, 896 x 544, 22px radius) with a 1px #EBD3BA edge.
- Sunset at the top of the panel: a vertical gradient over the top 170px, #F0A77E at 42% opacity, then #F3B9A8 at 20% at 45%, fading to transparent; clipped to the panel's rounded corners.
- Series colors, the only hues: #A9481F burnt sienna, #D98E9C dusty rose, #6B7A2E muted olive.
- Ink: #4A2E22 warm brown for title and strong labels; #8C6A58 for secondary text; #EBD3BA for tick lines. Target line: #C7772F warm amber.

Typography (Google Fonts):
- Fraunces 500 for the headline, 31px, #4A2E22, with the soft optical settings (font-variation-settings: 'SOFT' 100, 'opsz' 72).
- Figtree for everything else: subtitle 15px #8C6A58; legend 14px 600 brown; row labels 14px right-aligned (600 brown for rows past the target, 400 #8C6A58 otherwise); values 14px (700 brown past the target, 500 muted otherwise); axis 13px; footer 12px.

Layout:
- 32px inset for the panel, 32px inner padding. Headline, subtitle and a legend row of 12px dots with names.
- Top right: a mode chip, a 244 x 34 pill (#FBF1E6, 1px #EBD3BA) with a burnt sienna crescent moon, "Night Shift" 13px 700 and the schedule "21:00–07:00" 12px muted, ending in a small on-toggle (32 x 16 sienna track with a cream knob on the right).
- Footer inside the panel: source at left, "Warm display mode on" at right, both 12px muted.

Axes and grid:
- Vertical tick lines only, 1px #EBD3BA, at round values, labelled below in 13px muted with the unit ("min") after the last tick. No horizontal gridlines, no axis box.
- Target: a 2px #C7772F dashed vertical line (6 on, 5 off, round caps) with a small pill label at its top ("Your limit 45 min", 12px 700 amber on the panel color with a 1.2px amber outline, 11px radius) and the tick value in bold amber.

Marks:
- Bar chart: horizontal lollipops sorted descending. 2px round-capped stems from zero, 12px round heads (r 6), each colored by its group; value label 14px right of the head. Rows 35px apart.
- Line chart: 2.5px smooth lines in sienna, rose and olive with 5px round dots at each point and a 12px dot at the latest point, direct labels at line ends in Figtree 14px 600; the target as the same dashed amber horizontal line.

Avoid: pure white, pure black, blue or cool greys, heavy borders, harsh contrast, gradients on the marks, more than three series hues.

When you're done, render the chart and check that nothing reads cool or blue, the sunset gradient stays faint and inside the panel's corners, rows past the target are the ones set in bold, and the target pill does not collide with the legend.