Chart Prompts

Restyle my chart in the "Completion 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: the analytics tab of a friendly online course platform. Clean white page, one bright violet, rounded shapes, pills and chips, and one gold reward at the end of the journey.

Colors (use these exact values):
- Page: #FFFFFF.
- Main data color: #7C3AED (bright violet) for every ordinary bar or line.
- Lost or dropped amount: #EDE9FE (pale lavender), also used for small code chips and the header thumbnail block; lavender outline #C4B5FD and thumbnail accent #DDD6FE.
- Final or reward mark: #EAB308 (gold), with #FEF3C7 as its pale chip and #A16207 for gold text on light fills.
- Ink: #1F1B2E for the title and legend text. Secondary text: #6B7280. Gridlines and chip outlines: #E5E7EB. Pill fill: #F3F4F6. Baseline: #9CA3AF.

Typography (Google Fonts):
- Nunito Sans throughout. Eyebrow 11.5px 800 uppercase, 1.6px letter-spacing, violet ("PLATFORM · COURSE NAME"). Title 27px 800 ink, stating the finding. Subtitle 14.5px 400 gray with measure, base and headline percentage.
- Chips and legend 12.5px 600 to 700. Axis values 12px 600 gray. Bar value labels 13px 800. Category names 11.5px 600 gray. Pills 11px 700 gray. Source 12px.

Layout:
- A 92 x 64 rounded (10px) course thumbnail placeholder at top left in lavender with a simple painted leaf or course glyph in violet; eyebrow, title and subtitle sit to its right starting about 110px from the left edge.
- Below the header, a row of 26px-tall fully rounded filter chips (first one active: violet fill, white text; others white with #E5E7EB outline and gray text). The legend (12px rounded squares plus labels) sits on the right end of the same row.
- Chart area from about y 196 to a baseline at y 486, 96px left margin for axis labels. Footer: source on the left, a one-line note on the right, at y 574.

Axes and grid:
- 1px #E5E7EB horizontal gridlines at round steps, values abbreviated ("1k", "2k") in gray at the left. No y-axis line. A 1.2px #9CA3AF baseline.
- Category labels are two-tier: a small lavender 34 x 18 pill with a violet 11px 800 step code ("M1") 10px below the baseline, then the step name 11.5px gray under it. The final step's pill is pale gold with "CERT" in dark gold.

Marks:
- Bar chart: one bar per step, 46px wide with 8px rounded top corners, violet, value label in white 13px 800 inside the bar 20px below its top. Above each bar (except the first) a lavender ghost segment rising to the previous step's height shows who was lost. The last bar is gold with ink value text and a small gold rosette (circle with white check and two ribbon tails) above its ghost.
- Between each pair of neighbors, a 42 x 19 fully rounded pill (#F3F4F6 fill, 1px #E5E7EB outline) centered on the gap, 18px above the taller bar, showing the percentage change ("−19%", using a true minus sign).
- Line chart: a 3px violet line with straight segments stepping down, 5px violet dots with white rings at each step, lavender fill between the line and the previous step's level, the last point as a gold dot with the rosette, and the same drop pills floating above each segment.

Avoid: gradients, shadows, dark backgrounds, more than one saturated hue besides the final gold, square corners on bars and pills, and dense gridlines.

When you're done, render the chart and check that every drop pill is computed from the neighbors, no pill touches a bar or the rosette, the gold is used only for the final step, and the step pills line up under their bars.