✓ 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 (dragging down raises value, but HTML range sliders render top=max visually only with writing-mode tricks that are inconsistent cross-browser; logically value=0 is "up/air" and value=100 is "down/water," yet the vertical-slider CSS uses bt-lr writing mode making the physical top of the slider the 0/air end — however -webkit-appearance: slider-vertical is non-standard and behaves differently per browser, making this unreliable); mass/volume/density panels show static text rather than live-updating values, and there is no fall/drop animation — crown teleports linearly rather than falling.
Slider direction is inverted (dragging down raises value, but HTML range sliders render top=max visually only with writing-mode tricks that are inconsistent cross-browser; logically value=0 is "up/air" and value=100 is "down/water," yet the vertical-slider CSS uses bt-lr writing mode making the physical top of the slider the 0/air end — however -webkit-appearance: slider-vertical is non-standard and behaves differently per browser, making this unreliable); mass/volume/density panels show static text rather than live-updating values, and there is no fall/drop animation — crown teleports linearly rather than falling.