✓ 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 air, but the writing-mode/direction CSS combination with min=0/max=100 makes slider-top correspond to value=0 which moves crowns to CROWN_START_Y=air — actually correct directionally — but the `direction: rtl` + `writing-mode: vertical-lr` means dragging up increases value, so top=100=water, bottom=0=air, which is inverted); fall animation is missing (crowns teleport via linear interpolation with no inertia/gravity curve); live density value is static text, not a dynamic element updated by JS; water-rise scale (0.5 px/cm³) is plausible but arbitrary, not geometrically tied to tank dimensions.
Slider direction is inverted (value=0 at top means air, but the writing-mode/direction CSS combination with min=0/max=100 makes slider-top correspond to value=0 which moves crowns to CROWN_START_Y=air — actually correct directionally — but the `direction: rtl` + `writing-mode: vertical-lr` means dragging up increases value, so top=100=water, bottom=0=air, which is inverted); fall animation is missing (crowns teleport via linear interpolation with no inertia/gravity curve); live density value is static text, not a dynamic element updated by JS; water-rise scale (0.5 px/cm³) is plausible but arbitrary, not geometrically tied to tank dimensions.