✓ 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 (value=0/top → crowns at top of container, value=100/bottom → crowns submerged, but HTML range inputs render min at top only with vertical CSS tricks that are inconsistently cross-browser); gold density is correctly ~19.3 g/cm³ and gilded is 5.0 g/cm³ with same mass showing larger volume and more displacement, but the water-rise formula is ad-hoc and physically unmotivated, and there is no smooth fall animation — crowns simply jump to position without any easing or timed drop sequence.
Slider direction is inverted (value=0/top → crowns at top of container, value=100/bottom → crowns submerged, but HTML range inputs render min at top only with vertical CSS tricks that are inconsistently cross-browser); gold density is correctly ~19.3 g/cm³ and gilded is 5.0 g/cm³ with same mass showing larger volume and more displacement, but the water-rise formula is ad-hoc and physically unmotivated, and there is no smooth fall animation — crowns simply jump to position without any easing or timed drop sequence.