Chart Prompts

Restyle my chart in the "Wave Climate" 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: an engineering metocean report for an offshore design team. Warm sand paper, solid ocean-blue marks, precise small numbers and one red design limit. Practical, readable and quietly handsome.

Colors (use these exact values):
- Page: #F3EEE6 (pale sand). Inset panels: #FBF8F3 with a 1px #E0D8CB border.
- Main marks: #2E6E9E (ocean blue), fading toward #B9CFDF as values get rarer or smaller. Compute the fade on a log scale: t = min(1, log10(max / value) / 3.2), then mix the two colors linearly by t.
- Design limit or threshold: #B4452F (brick red).
- Primary text: #1F2A33. Secondary text: #6B6A64. Gridlines and rules: #E0D8CB. Baseline: 1.2px #1F2A33.

Typography (Google Fonts):
- Signika everywhere. Title 24px 600 #1F2A33 stating the finding with numbers; subtitle 15px 400 #6B6A64 with measure, unit, bins, instrument and period.
- Tick labels 12px 400 #6B6A64; value labels over tall bars 11px 500 in #2E6E9E; tail annotations 12px 600 #1F2A33 with an 11px #6B6A64 caption above; small uppercase headers 11px 600 with 1.4px letter-spacing; the threshold label 13px 600 in #B4452F; table body 13px.

Layout:
- 56px left margin. Title baseline at y 58, subtitle at y 86.
- Plot from x 96 to 900, y 150 to 478. The x-axis extends past the last observed value far enough to show the design limit, so the empty stretch between the record and the limit is visible.
- A compact inset table sits in the empty upper right of the plot (about 262 x 128px): uppercase header row, a 1px rule, then four rows at 22px spacing with right-aligned numeric columns.
- Footer at y 576: "Source: ..." left, a one-line reading note right-aligned.

Axes and grid:
- Horizontal gridlines only, 1px #E0D8CB, at round percentages; labels right-aligned 10px left of the plot with a % sign. No y-axis line.
- X-axis labels at every whole unit, 20px below the baseline, with the axis title right-aligned under the last label.

Marks:
- Bar chart: histogram bars that fill the bin with a 3px gap, square corners, starting at zero; nonzero bars are drawn at least 1.2px tall so the thin tail stays visible. Value labels (one decimal) centered 7px above the tall bars only. Over the tail, label the exceedance share at each whole-unit edge ("7.4%" with ">4 m" above), sitting 22px above the bar top or 44px above the baseline, whichever is higher, with a 0.8px #6B6A64 leader down to the bar, and an uppercase header "SHARE OF HOURS ABOVE" over the group.
- Line chart: a 2.5px #2E6E9E line (or a stepped line for distributions) with a pale #B9CFDF area at 45% opacity beneath; points in the rare tail drawn in the faded color.
- Threshold: a vertical 1.6px #B4452F dashed line (6 on, 4 off) from the baseline up, with a two-line label centered above its top.

Avoid: gradients inside a single bar, shadows, rounded corners, 3D, a legend (the fade explains itself with a footer note), and truncating the y-axis.

When you're done, render the chart and check that the exceedance numbers are the true sums of the bins at and above each edge, tail labels never sit on a bar, the inset table does not cover data, and the fade reads as rarity rather than a new category.