Chart Prompts

Restyle my chart in the "Tide Curve" 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 page from a printed harbour almanac. Pale chart-paper blue, one calm navy ink, a thin red datum line, and every turning point annotated with the precision of a tide table.

Colors (use these exact values):
- Page: #EAF2F6 (pale chart-paper blue) for the whole canvas.
- Primary ink, the data line, frame rules, turning-point triangles and emphasized labels: #12355B (navy).
- Night or off-period shading: #D2DEE8 (soft blue-gray) as full-height vertical bands.
- Reference line (zero or datum): #C23B32 (chart red), and its axis label in the same red.
- Secondary text: #5A7189. Gridlines and minor ticks: #C9D8E3.

Typography (Google Fonts):
- Libre Baskerville for the title (700, 27px, navy, sentence case stating the finding), the subtitle (italic 400, 14.5px, #5A7189) and the source line (italic, 12px).
- Asap Condensed for everything else, always with tabular figures (font-variant-numeric: tabular-nums): running header 600 12.5px uppercase with 3px letter-spacing in #5A7189; period labels (days) 700 13px uppercase with 2.4px letter-spacing in navy; axis labels 12.5 to 13px 400; annotation values 700 14.5px navy; annotation times 500 12.5px #5A7189; key text 13px.

Layout:
- A double almanac frame: a 1.6px navy rectangle inset 24px from the canvas edge and a 0.5px navy rectangle 5px inside it.
- Running header row at y 64 (left: publication label, right: place label), a 0.6px navy rule under it, then the title and subtitle.
- Plot from x 88 to 900, about y 214 to 488, with period labels (e.g. "TUE 14 OCT") centered over each period just above the plot.
- A footer key row under a 0.6px navy rule: shading swatch, red datum sample, triangle pair, each with a short label; "Source: ..." right-aligned in italic serif.

Axes and grid:
- Horizontal gridlines at each whole unit, 0.8px #C9D8E3, labeled at the left with one decimal ("3.0") and the unit ("m") above the labels.
- Leave room below the reference line (the y domain runs a little below zero) so annotations can sit under it.
- Vertical ticks every 6 hours in #C9D8E3 with two-digit hour labels ("06", "12", "18", "00"); period boundaries (midnight) are 0.8px navy lines that extend up through the day-label row.
- The reference/datum line is 1.2px #C23B32 across the full plot, with "0.0" labeled in red.

Marks:
- Line chart: one smooth 2.6px navy line (densely sampled or monotone curve, round joins), no fill and no point dots. Mark every local maximum with a small downward navy triangle (10px wide, 5.5px tall) just above the peak, with the value (700, 14.5px navy, one decimal) above it and the time ("1541", 24-hour, no colon) in 12.5px #5A7189 above that. Mark every local minimum with an upward triangle just below the trough, a dotted 0.7px navy leader (1.5 on, 2 off) down to the datum, and its value and time in a fixed row 21px and 35px below the datum, like a tide table.
- Bar chart: slender navy bars (about 45% of the band, square corners) rising from the red zero line, value labels in 700 14.5px navy above each bar with a small downward triangle between label and bar top; shade off-period bands behind bars in #D2DEE8.

Avoid: area fills under the line, gradients, drop shadows, rounded corners, extra colors beyond navy, red and the blue-grays, and any label sitting on top of the red datum line.

When you're done, render the chart and check that every maximum and minimum carries a triangle, value and time, that no minimum label touches the datum line or the hour labels, that figures are tabular, and that night bands line up with the hour ticks.