Chart Prompts

Restyle my chart in the "Stage Minutes" 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: the two-week report screen of a polished sleep-tracking app. Cool blue-gray paper, a deep-to-light blue sequence, a lavender and one warm gold, with rounded friendly type.

Colors (use these exact values):
- Background: #F1F4F8.
- Series in stack order: #1F3564 (deep navy, "Deep"), #5F86C4 (medium blue, "Light"), #BFA4E6 (lavender, "REM"), #E9C46A (pale gold, "Awake").
- Primary ink: #1B2438. Secondary text: #66708A. Gridlines: #D5DCE6.
- Highlight rows (weekends): #FFFFFF at 75% opacity.

Typography (Google Fonts):
- Livvic throughout. Title 700, 28px, ink, stating the finding with a computed number. Subtitle 400, 15px, #66708A. Legend 600, 13px. Row labels 500, 13px #66708A, right-aligned; highlighted rows 700 in ink. Segment values 600, 11px centered (white on navy and blue, ink on lavender). Totals 700, 14px ink, right-aligned at the right margin. Axis labels 12px. Column header "TOTAL SLEEP" 700, 11px uppercase with 1.6px letter-spacing.

Layout:
- 56px side margins. Title at y 68, subtitle at y 96, legend row at y 131 (12px rounded 3px squares, 20px apart) with the "TOTAL SLEEP" header right-aligned on the same row.
- One row per category (14 rows, 27px pitch, 18px bars), labels ending 14px left of the bars at x 132, totals right-aligned at x 904.
- Highlighted rows get a full-width white rounded (6px) band 9px taller than the bar behind them. A 0.8px dotted #66708A rule separates the two weeks.
- Footnote and "Source: illustrative data" at the bottom left in 12px.

Axes and grid:
- Vertical gridlines every hour (60 minutes), 1px #D5DCE6, with labels "0h", "1h"... under the last row. No axis lines.

Marks:
- Bar chart: horizontal stacked bars, square joins between segments separated by a 1.5px background-colored gap, 5px rounded outer ends only. Label a segment with its minutes when it is wider than 40px. The total at the right sums the sleep stages (not "Awake").
- Line chart: one 2.5px line per series in the same four colors, with small round end dots (r 4) and the series name as a direct label at the right end in 600 13px; weekend columns get the same white highlight bands, vertical instead of horizontal.

Avoid: gradients, shadows, thick borders, rainbow palettes, and cramming values into segments narrower than their label.

When you're done, render the chart and check that the four colors stay distinct where lavender meets blue, that every total equals the sum of its sleep segments, and that no segment label spills outside its segment.