✓ 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
ASCII-art `<pre>` canvas approach is functional but crude; slider direction is inverted (value=0 puts crowns at top/air, but the slider's `writing-mode: bt-lr` means dragging up increases value, making the top-of-slider position correspond to 100%/water — inverted UX), and there is no time-based fall animation (crowns teleport to wherever the slider is set).
ASCII-art `<pre>` canvas approach is functional but crude; slider direction is inverted (value=0 puts crowns at top/air, but the slider's `writing-mode: bt-lr` means dragging up increases value, making the top-of-slider position correspond to 100%/water — inverted UX), and there is no time-based fall animation (crowns teleport to wherever the slider is set).