Chart Prompts

Restyle my chart in the "Hypnogram" 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 morning sleep summary in a smart-ring app. Calm, pastel and rounded: soft lavender, four gently tinted stage rows, and a clean stepped line that reads at a glance.

Colors (use these exact values):
- Page: #F1EEFB (pale lavender). A card inset 24px with radius 28, #FFFFFF at 72% opacity, shadow 0 8px 14px #3B2F8F at 8%.
- Stage rows (fill, top to bottom): Awake #FDE6D8 (peach), REM #ECE4FD (violet), Light #DCEEFC (sky), Deep #D9DDF2 (navy tint).
- Stage line colors: Awake #E9824F, REM #8A63E8, Light #3D9BE0, Deep #2D3A8C. Vertical step connectors: #C9C3E3.
- Ink #25214A for titles and values; secondary text #6F6A8F; faint text and ticks #A7A2C4. Sun icon #F2A541.

Typography (Google Fonts):
- Nunito Sans throughout. Eyebrow 12px 800 uppercase with 2px letter-spacing in #8A63E8 ("DRIFTWELL · LAST NIGHT"). Title 29px 800 #25214A with -0.4px letter-spacing, stating the finding. Subtitle 15px 600 #6F6A8F with the measure and the time span.
- Row labels 15px 700 #25214A with a 5px dot in the stage line color in front. Time labels 12.5px 600 #6F6A8F; bedtime and wake times 12.5px 800 #25214A. Chips 14px (name 700, value 800 with tabular figures).

Layout:
- Eyebrow, title and subtitle at top left, source line right-aligned opposite the eyebrow.
- Four stacked rows, 58px tall with 6px gaps and 14px radius, running from x 138 to x 896, with the stage labels in a column to the left.
- Time axis under the rows. A crescent moon (#2D3A8C) with the bedtime at the left end, a sun (6px disc with eight short rays, #F2A541) with the wake time at the right end.
- A row of four pill chips (196 x 44, radius 22, filled with the row tint) at the bottom: stage dot, stage name, then "1h 52m  25%" right-aligned.

Axes and grid:
- No y-axis: the rows are the axis. Hour ticks under the plot (1.5px, 6px long, #A7A2C4) labelled "12 AM", "1 AM"... Skip hour labels within 60px of the bedtime or wake labels.
- One optional dotted reference line (1px #A7A2C4, dash 2 4) with a small 11.5px 700 label, e.g. "3 hours in".

Marks:
- Line chart: a stepped hypnogram. Each stage interval is a horizontal 7px stroke with round caps centered in its row, colored by stage; consecutive intervals are joined by 2px vertical connectors in #C9C3E3 drawn underneath. For ordinary multi-series line charts, draw each series as a 3px line in the stage colors over the pastel rows used as bands.
- Bar chart: horizontal or vertical rounded bars (radius 8) in the four stage line colors on the matching tint rows, with value chips at the bar ends; stacked bars keep the Awake, REM, Light, Deep order.

Labels and annotation:
- Times in 12-hour format. Durations as "1h 52m" (or "25m" under an hour) and shares as whole percents that sum to 100.

Avoid: harsh black, saturated backgrounds, sharp corners, gridlines across the rows, and gradients on the marks.

When you're done, render the chart and check that the chip durations sum to the time in bed, the title's numbers match the data, the step connectors sit behind the colored segments, and the moon and sun labels don't collide with hour labels.