Chart Prompts

Restyle my chart in the "Install Funnel" 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 mobile growth team's launch-week readout. Bright, airy and product-marketing polished, with a faint phone silhouette hinting at the app store listing.

Colors (use these exact values):
- Page background: #F0F7FF (light sky).
- Bars: a single cobalt ramp, one step per stage, from #1D4ED8 through #3566E0, #5582E8 and #7BA1F0 to #A3BEF6. Never another hue for bars.
- Drop-off chips, arrows and connectors: #F97316 (orange).
- Ink #0F1B3D for title, values and stage names; secondary #55627F; axis labels #8A96B0; gridlines #DCE7F7; baseline #B8CAE6.
- Phone frame: 2px #C9DBF5 outer outline with #FFFFFF fill at 50%, 1.5px #DCE7F7 inner screen outline, whole group at 55% opacity.

Typography (Google Fonts):
- Poppins 600 for the title (26px, -0.3px letter-spacing, stating the finding with the overall conversion rate).
- Karla for everything else: eyebrow pill text 10.5px 700 uppercase with 1.2px letter-spacing in cobalt on a cobalt 10% pill (22px tall, fully rounded); subtitle 15px #55627F; values 15px 700 tabular; stage names 13.5px 600; "x% of impressions" 11.5px #8A96B0; axis labels 12px; chip text 12.5px 700 white tabular.

Layout:
- 40px margins. Eyebrow pill at the top, title at y 96, subtitle at y 124.
- A phone outline (250 x 480, 40px radius, with a 222px inner screen and a 64 x 16 speaker pill) sits behind the right third of the chart, starting below the title and running off the bottom edge.
- Plot from about x 76, baseline at y 494. Legend swatch for the drop chip and the source line share the bottom row.

Axes and grid:
- Five light gridlines (1px #DCE7F7) with "100K" style labels 16px left of the plot; the zero line uses #B8CAE6. No axis lines.
- Stage names 24px under the baseline, each with a second line giving its share of the first stage.

Marks:
- Bar chart: 96px bars with 70px gaps, 8px top radius, square at the baseline, each stage one step lighter along the cobalt ramp. Value labels 10px above each bar.
- Conversion arrows between bars: a dotted orange connector (1.5px, dash 1 3.5, round caps) runs from the previous bar's top-right corner across to the middle of the gap with a 2.5px dot, then straight down to an arrow-shaped chip. The chip spans the gap (6px left radius, a 9px pointed right end aimed at the next bar), sits at the next bar's top, and carries the percent drop from the previous stage as "−64.0%" (true minus sign). Shadow: 0 2px 3px orange at 25%.
- Line chart: a 3px cobalt line with 5px cobalt dots, a light cobalt area fill at 10%, and the same orange arrow chips marking the drop between consecutive points.

Avoid: rainbow bars, funnel trapezoids, 3D, any second accent besides orange, and chips wider than the gap between bars.

When you're done, render the chart and check that every drop percentage and the headline conversion are arithmetically right, chips never cover a bar or its value label, and the phone frame stays faint behind the data.