Chart Prompts

Restyle my chart in the "Heat Layers" 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 climate science briefing slide seen in a dark auditorium. Deep indigo, one warm and one cool color, a water column that darkens as you read down, and numbers on every bar so nobody has to squint at an axis.

Colors (use these exact values):
- Page: #111428 (dark indigo).
- Positive values (warming, gains): #F07C5C (coral). Negative values (cooling, losses): #5C9AE6 (blue).
- Water column tint and ribbon top: #7FB2EE. Row tints use it at opacity 0.075 x (1 - row index / row count), so rows fade darker with depth. The ribbon is a vertical gradient #7FB2EE to #34507F (45%) to #1A1E3A.
- Primary text: #E8E9F3. Secondary text: #8C90B0. Zero line and footer rule: #3A3F66.

Typography (Google Fonts):
- Quattrocento Sans throughout. Title 25px 700 #E8E9F3 stating the finding with the computed sums; subtitle 15px 400 #8C90B0 with measure, unit, period and place.
- Category labels 14px 400 #E8E9F3, right-aligned; value labels 14px 700 in the bar's color, with a true minus sign (U+2212) for negatives and a plus sign for positives; direction headers 12px 700 uppercase with 1.8px letter-spacing, each with a small drawn arrow (a 12px, 1.6px stroke line with a chevron head, since the font has no arrow glyphs) pointing outward; ribbon labels 10px 700 uppercase with 1.6px letter-spacing; footer total 14px 700.

Layout:
- 56px side margins. Title at y 58, subtitle at y 86, direction headers at y 142 on either side of the zero line ("COOLING" in blue, right-aligned 12px left of zero with its arrow beyond it pointing left; "WARMING" in coral, 12px right of zero with its arrow pointing right).
- A 6px rounded depth ribbon at x 56 spans the rows, with "SURFACE" at its top and "ABYSS" at its bottom. Category labels right-aligned at x 268. Rows 38px apart, bars 24px tall, starting at y 162.
- Zero sits where the negative extent fits comfortably: scale about -1.7 to 4.3 across x 300 to 870.
- A 1px #3A3F66 rule under the rows, then "Source: ..." at bottom left (12px) and a bold net total at bottom right.

Axes and grid:
- No axis lines, ticks or gridlines except a single faint 1px #3A3F66 vertical zero line that extends 12px beyond the first and last rows.
- Rows are ordered top to bottom as the physical order (surface to abyss, or first to last), never sorted by value.

Marks:
- Bar chart: horizontal diverging bars from zero, 24px tall, with a 3px radius on the outer end only (the zero end stays square). Value label 8px beyond the outer end.
- Line chart: a vertical profile: category (depth) runs down the same rows, the value runs across; a 2.5px #E8E9F3 line through row centers with 6px dots filled coral where positive and blue where negative, and the area between the line and zero filled coral at 25% on the right and blue at 25% on the left.

Avoid: gridlines, gradients on bars, glows, legends (the direction headers are the legend), sorting the rows, and truncating bar lengths.

When you're done, render the chart and check that the title sums and the net total are arithmetically right, negative labels use a minus sign and sit left of their bars, and the row tint visibly darkens toward the bottom.