Chart Prompts

Restyle my chart in the "Seeing Monitor" 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 nightly conditions log an observatory prints for its operators. Calm, cool and exact: a bookish serif for words, a monospace for every number, pale gray paper, one navy trace and a readout column.

Colors (use these exact values):
- Page: #F0F2F5.
- Primary ink and the main data series: #1E2F5A (navy).
- Context strip fill (cloud cover or a similar secondary condition): #A9C6E6.
- Requirement or threshold: #C0492F (terracotta), dashed.
- Shaded context periods (twilight, off-hours): #DDE2EA.
- Gridlines and rules: #D3D9E2. Secondary text: #5A6478.
- The "good side" of the threshold: #1E2F5A at 12% opacity.

Typography (Google Fonts):
- Lora for words: title 600, 29px, navy, sentence case, stating the finding computed from the data; subtitle italic 15px #5A6478 with measure, unit, cadence and place; annotations italic 13px.
- Cousine for every value and label: axis ticks 12.5px #5A6478 (y ticks carry the unit, for example 1.0″); small caps labels 11px 700 uppercase with 1.5px letter-spacing; readout numbers 700 36px navy with an 18px 400 unit suffix; the threshold label 700 11.5px terracotta.

Layout:
- 56px side margins. Title at y 58, subtitle at y 88, then a full-width 1px #D3D9E2 rule at y 116.
- Plot area x 80 to 716. Above it a 32px context strip (y 164 to 196) labeled with a Cousine caps label 10px above; the main panel runs y 216 to 498.
- A readout column from x 752 to 904, separated by a 1px vertical #D3D9E2 rule, holding three stacked stats (caps label, big number, italic Lora note) divided by 1px rules.
- Footer rule at y 548; source at left in Lora 12.5px and an instrument tag in Cousine 11.5px at right.

Axes and grid:
- Horizontal 1px #D3D9E2 gridlines at 3 or 4 round values; no vertical grid. A 1px navy baseline with 5px navy ticks and clock-time labels every 2 hours.
- Shaded periods (#DDE2EA) span the context strip and the main panel at both ends, each labeled "TWILIGHT" in Cousine 10.5px caps with 1.5px letter-spacing.

Marks:
- Line chart: a 2.4px navy monotone-smoothed line with round joins; fill the area between the line and the threshold wherever the value is on the good side with navy at 12%. The threshold is a 1.6px #C0492F line dashed 7 on 5, labeled above it in a gap where the line is clear. Mark the best value with an r 5 page-colored circle with a 2px navy ring and a thin 0.8px drop line to a Cousine label.
- Context strip: a filled #A9C6E6 area from the strip's baseline, height proportional to percent, on a 55% white panel with a #D3D9E2 outline; label the peak in Cousine 11.5px navy.
- Bar chart: slim navy bars (about 45% of the band) with square corners, bars on the good side of the threshold in full navy and the rest in navy at 45% opacity, the same dashed terracotta threshold and the same context strip above.

Avoid: saturated colors besides the single terracotta threshold, gradients, shadows, rounded cards, sans-serif fonts and a legend (label things directly).

When you're done, render the chart and check that the title's hours and the readout percentages are computed from the data, the threshold label does not touch the line, shaded periods line up in the strip and the plot, and every number is set in the monospace.