Chart Prompts

Restyle my chart in the "Two Process" 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 model figure shown in a darkened lecture hall. Deep indigo night, a warm amber line and a cool pale blue line, dark columns for sleep, and one clear annotation where the story happens.

Colors (use these exact values):
- Background: #11132A (deep indigo).
- First series and the eyebrow: #F2A541 (warm amber). Second series: #9CC7F0 (pale blue).
- Shaded periods (sleep): #080916, darker than the page. A skipped or special period is outlined instead with a 1px dashed (3 on, 4 off) #8A8DB0 rectangle.
- Primary text and annotation strokes: #E8E9F5. Secondary text: #8A8DB0. Gridlines: #23264A.

Typography (Google Fonts):
- Raleway throughout. Eyebrow 700, 11px uppercase with 3px letter-spacing in amber. Title 600, 29px #E8E9F5 stating the finding. Subtitle 400, 15px #8A8DB0 with measure and units. Legend 700, 13px in each series color. Axis labels 400, 12px #8A8DB0. Day labels 700, 11px uppercase with 2px letter-spacing in #E8E9F5. Column labels ("ASLEEP", "MISSED") 700, 10px uppercase with 2.4px letter-spacing in #8A8DB0, centered at the bottom of each column; keep each label short enough to sit inside its column with clear space on both sides, never touching the dashed border. Annotation 700, 15px #E8E9F5 with a 12px #8A8DB0 second line.

Layout:
- 56px left margin. Eyebrow at y 64, title at y 100, subtitle at y 126 with the legend (28px line swatches, stroke matching each series) on the same row to the right.
- Plot from x 84 to 900, y 160 to 470; shaded columns run 8px above the plot top to the baseline.
- Time labels every 8 hours 24px below the plot, day labels 22px lower. Footer row at y 574 with "Source: illustrative data" left and a short note on the shaded periods right-aligned.

Axes and grid:
- Horizontal gridlines only, 1px #23264A, at quarter steps, labeled with two decimals. No axis lines, no ticks.

Marks:
- Line chart: the first series is a 3px amber line with straight segments and sharp corners (a sawtooth that rises and falls); the second is a 2.4px pale blue smooth monotone-cubic line. Round caps. No markers, no fills.
- Bar chart: square-cornered bars in amber (first series) and pale blue (second) with a 4px gap inside each pair, over the same dark shaded columns for special periods; value labels 12px in the series color above each bar.

Labels and annotation:
- Mark the key gap with a 1.2px #E8E9F5 vertical bracket (5px end caps) between the two series, then a 0.8px dotted (2 on, 3 off) leader to a two-line annotation placed in empty space: the gap value in bold, and the comparison on the second line. Compute both from the data.

Avoid: glows, gradients, bright saturated blues, a second y axis, and labels that sit on top of either line.

When you're done, render the chart and check that the annotation text does not cross either line, the dashed period outline aligns with the time axis, and the amber line reads as clearly sharper than the smooth blue one.