Chart Prompts

Restyle my chart in the "Water Footprint" 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 explanatory graphic from an agricultural sustainability report. Deep ocean blue, a row of drinking glasses filled to each value, and big friendly numbers.

Colors (use these exact values):
- Background: a vertical gradient from #0E3052 at the top to #0A2540 (deep ocean) at the bottom.
- Water: a vertical gradient from #3DB5E6 at 92% opacity at the surface to #1B6FA8 at 95% at the bottom of the glass.
- Meniscus and bubbles: #BDEBFA. Glass outlines: #9FC3DA.
- Text: #EAF4FA. Secondary text: #86A7C0. Eyebrow and wave divider: #3DB5E6.

Typography (Google Fonts): Figtree only.
- Eyebrow 12px 700 uppercase with 2.6px letter-spacing. Title 32px 700 with -0.5px letter-spacing, stating the finding. Subtitle 16px 400 in #86A7C0 with measure and unit.
- Value above each glass 27px 800 with -0.6px letter-spacing, and the unit ("L/kg") 12px 500 in #86A7C0 under it. Category labels 15px 600 under the glasses. Source 12px; a right-aligned italic 12px note stating what a full glass means.

Layout:
- 56px side margins. Eyebrow at y 52, title at 94, subtitle at 122.
- A thin wave divider under the subtitle at y 146: a continuous sine-like path (16px period, 5px peak to trough), 1.3px #3DB5E6 at 55% opacity, spanning x 56 to 904.
- Eight equal slots across x 56 to 904. Values at y 214, units at 234, glass rims at y 250, glass bottoms at 504, category labels at 532. Footer at y 578.

Axes and grid:
- No axes, gridlines or scale labels: the glasses are the scale. A single 1px #9FC3DA line at 35% opacity under the glasses reads as the table they stand on. The footnote states the value of a full glass.

Marks:
- Bar chart: each bar is a tapered tumbler 66px wide at the rim and 50px at the base. Outline 1.8px #9FC3DA with round joins, a 1.4px elliptical rim (ry 3), and a 14px thick base filled #9FC3DA at 22% with a curved inner floor. A faint horizontal white gradient (10% left, 2% center, 7% right) fills the glass, and a 3px white specular streak at 35% opacity runs down the left side.
- Water fills each glass from the floor to its value on a shared linear scale, clipped to the taper. The surface is a meniscus: a #BDEBFA ellipse (ry 3.6) at 55% opacity plus a 1.4px #BDEBFA front edge curving 7px down. Scatter faint bubbles in the water (r 1 to 2.8, 0.8px #BDEBFA outline at 55%), roughly one per 28px of water depth.
- Line chart: a smooth 3px #3DB5E6 line whose area below is filled with the water gradient and topped by a 1.4px #BDEBFA meniscus highlight along the line, with a few bubbles in the area; points as small glass-outline circles (r 6, 1.8px #9FC3DA, water-filled) with the big values above the first, last and extreme points.

Avoid: cartoonish drops or faces, heavy reflections, glows, gridlines, clashing warm colors, and a y-axis.

When you're done, render the chart and check that water heights are proportional to the values on one shared scale, the numbers above the glasses don't collide, the smallest glasses still show visible water, and the multiple in the title matches the data.