Chart Prompts

Restyle my chart in the "Point of Sail" 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 clean page from a yacht performance manual. White paper, a three-step sea blue ramp, geometric headings and a compass-like scale under the bars. Technical, calm and precise.

Colors (use these exact values):
- Page: #FFFFFF.
- Series ramp, lightest to darkest for increasing intensity: #9CC7E0 (pale sea), #3C7DB0 (mid blue), #0F2E4F (deep navy). Title and primary text also use #0F2E4F.
- Reference/threshold line: #D9822B (hull speed orange), 2px dashed 6 on 3 off.
- Secondary text: #5E7185. Gridlines and group rules: #DCE5EC. Scale strip fill: #F2F6F9.

Typography (Google Fonts):
- Josefin Sans 600 for the title (29px, #0F2E4F, sentence case stating the finding).
- Karla for everything else, with tabular figures: eyebrow 700 11.5px uppercase, 2.4px letter-spacing in #3C7DB0; subtitle 15px #5E7185; legend labels 700 14px; axis values 13px; category labels 700 14px navy; value labels 700 12px navy with a 4px white halo (stroke #FFFFFF, paint-order stroke); group captions 600 11px uppercase with 1.8px letter-spacing.

Layout:
- A 4 x 64 px deep navy bar at the left margin beside the eyebrow and title block (eyebrow at y 54, title at y 88, subtitle at y 116, text starting 18px right of the bar).
- Legend row at y 154: a small uppercase caption ("TRUE WIND"), 14px rounded-square chips (2px radius) with labels, then a dashed orange sample and the threshold label with its exact value.
- Plot from x 104 to 900, baseline at about y 452.

Axes and grid:
- Horizontal gridlines 1px #DCE5EC at round values including 0, labels left of the plot, unit ("kn") above them. A 1.4px navy baseline.
- Under the baseline, a 16px tall #F2F6F9 scale strip with compass-style ticks: minor ticks every 5 units (4px, 0.8px), major every 10 (8px), heavier every 30 (1.4px). Place a small navy upward triangle at each category position on the strip and the category label under it ("90°", 700 14px).
- Below that, group captions ("CLOSE HAULED", "REACHING") centered under their categories on a thin 1.2px #DCE5EC rule.

Marks:
- Bar chart: grouped bars positioned at their true x value on the numeric scale (not evenly spaced), three bars per group 13px wide with 1.5px gaps, 2px top corner radius, in the ramp order light to dark. Label only the strongest series' value above its bar. Draw the dashed threshold line after the bars so it crosses them, then the haloed value labels on top.
- Line chart: three 2.5px lines in the ramp colors with 3.5px round dots at each measured x on the same compass scale, the darkest series' values labeled with haloed 12px bold figures, and the dashed orange threshold across the plot.

Avoid: evenly spacing uneven x values, gradients, shadows, more than one accent color, bold gridlines and a boxed legend.

When you're done, render the chart and check that the groups sit at their true x positions, the threshold line stays visible over the bars, value labels do not collide with the dashed line, and the title's claim matches which bars cross the threshold.