✓ Two crowns ✓ Same mass, different density ✓ Vertical slider ✓ Slider works ✓ Slider controls crowns — Slider direction correct ✓ Full slider range — Fall animation ✓ Water displacement ✓ Rising water level ✓ Splash effects ✓ Physics correct ✓ Live mass value ✓ Live volume value ✓ Live density value ✓ Live displaced water ✓ Gilded displaces more ✓ Heureka animation ✓ No external deps ✓ Light bg / dark text ✓ Self-contained HTML
Slider direction is inverted (instructions say "move up to drop crowns" but HTML range sliders render top=min=0=crowns in air, which is actually correct in label intent but physically the crowns don't animate falling — they jump positions with no fall animation — and the slider lacks writing-mode support in most browsers making it effectively horizontal, breaking the vertical UX.
Slider direction is inverted (instructions say "move up to drop crowns" but HTML range sliders render top=min=0=crowns in air, which is actually correct in label intent but physically the crowns don't animate falling — they jump positions with no fall animation — and the slider lacks writing-mode support in most browsers making it effectively horizontal, breaking the vertical UX.