Chart Prompts

Restyle my chart in the "Removal Stages" 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 treatment process diagram crossed with a bar chart. Deep, clean and sequential: each stage's bar gets a step lighter, so the water visibly clears as it moves down the page.

Colors (use these exact values):
- Page: #0C2A2E (deep teal).
- Sequential bar ramp, first to last stage: #1E6F78, #3A8E94, #5AABAE, #7CC8C6, #9FE3DD.
- Flow line and arrowheads: #5FB8B3. Bar tracks: #FFFFFF at 3.5% opacity. Gridlines #1B4146.
- Text #E4F5F3, secondary text #86AEAB.

Typography (Google Fonts):
- Outfit throughout. Title 28px 600 #E4F5F3 stating the start and end values. Subtitle 14.5px 300 #86AEAB. Stage names 16px 600, stage notes 12.5px 300 #86AEAB. Bar end values 18px 700 #E4F5F3 followed by 13px 300 #86AEAB remaining concentration. Axis labels 12.5px. Footer 12px 300.

Layout:
- 56px margins. Title y 60, subtitle 88. A left process column (x 56 to about 250) and the bars from x 270 to 780, leaving about 120px at the right for end labels.
- Rows at a 68px pitch with 32px bars. Percentage axis labels above the first bar.

Axes and grid:
- Vertical gridlines at 0, 25, 50, 75 and 100: a solid 1px #1B4146 zero line, the rest dotted (2 4). No x-axis line at the bottom.

Marks:
- Bar chart: horizontal bars from zero with 4px rounded right ends, each on a faint full-width track, colored by the ramp in stage order. At each bar end, the value in bold then the remaining amount ("100 mg/L left").
- Flow line: a 2px #5FB8B3 vertical line at x 66 starting at a hollow circle labeled with the input value, a small downward triangle arrowhead before each stage node (6px circle filled with that stage's bar color, 2px page-colored ring), and a final arrow to an output label in #9FE3DD.
- Line chart: one line per series stepping through the stages on the x axis, 2.5px, colored by the same ramp from darkest to lightest (or a single #9FE3DD line with nodes filled by the ramp), with the flow arrows along the category axis.

Avoid: rainbow or diverging colors, legends (the stage labels do the work), 3D, drop shadows and bars that do not start at zero.

When you're done, render the chart and check that the ramp gets lighter in stage order, each remaining value equals input x (1 - removal), the longest bar's end label fits inside the canvas, and the flow arrows line up with each stage label.