✓ 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 slider-vertical orientation with direction:rtl makes higher values push crowns down — functionally the label says 0% at top and 100% at bottom, which is correct in labeling but the crown actually moves DOWN as value increases from min to max, making it technically correct yet the `writing-mode: vertical-lr; direction: rtl` combo may render top=0/bottom=100 in some browsers inconsistently); no smooth fall animation (crown teleports via CSS transform with no easing/transition), heureka only triggers at slider val ≥99 without a concluding cinematic, and mass/density values are static not live-updating per slider position.
Slider direction is inverted (value=0 at top means air, but the slider-vertical orientation with direction:rtl makes higher values push crowns down — functionally the label says 0% at top and 100% at bottom, which is correct in labeling but the crown actually moves DOWN as value increases from min to max, making it technically correct yet the `writing-mode: vertical-lr; direction: rtl` combo may render top=0/bottom=100 in some browsers inconsistently); no smooth fall animation (crown teleports via CSS transform with no easing/transition), heureka only triggers at slider val ≥99 without a concluding cinematic, and mass/density values are static not live-updating per slider position.