✓ 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 at top puts crowns at top/air, but CSS `writing-mode: bt-lr` with `-webkit-appearance: slider-vertical` physically renders the slider so that dragging up increases value, meaning bottom=air/0% and top=water/100%, which is backwards); no smooth fall animation (crowns teleport based on slider with no easing/tween); splash effects are positioned incorrectly using fixed coords; water rise is cosmetically very small due to aggressive scaling constants.
Slider direction is inverted (value=0 at top puts crowns at top/air, but CSS `writing-mode: bt-lr` with `-webkit-appearance: slider-vertical` physically renders the slider so that dragging up increases value, meaning bottom=air/0% and top=water/100%, which is backwards); no smooth fall animation (crowns teleport based on slider with no easing/tween); splash effects are positioned incorrectly using fixed coords; water rise is cosmetically very small due to aggressive scaling constants.