✓ 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 means crowns in air, but HTML range inputs render min at top which maps correctly only with writing-mode tricks — the crown actually starts high at depth=0 and sinks at depth=100 which is right, but the visual slider thumb starts at the top meaning "air" which is correct; however there's no fall animation, no splash effects, density is not shown as a live value, and the ASCII art approach lacks visual polish and realism.
Slider direction is inverted (value=0 at top means crowns in air, but HTML range inputs render min at top which maps correctly only with writing-mode tricks — the crown actually starts high at depth=0 and sinks at depth=100 which is right, but the visual slider thumb starts at the top meaning "air" which is correct; however there's no fall animation, no splash effects, density is not shown as a live value, and the ASCII art approach lacks visual polish and realism.