Running Meta Muse Spark Open

Act as an expert software engineer specializing in low-level graphics and simulation algorithms.

Your task is to build a self-contained "Falling Sand Physics Simulation" (cellular automata) inside a
single, beautifully styled HTML file. The entire application must be written in vanilla HTML, CSS, and
JavaScript with NO external libraries or dependencies.

### Visual & UI Requirements:

1. UI Layout: A clean, modern, dark-themed dashboard. Center the simulation canvas. Provide a control
   panel on the side or top with styled buttons to select the active material, a "Clear Canvas" button,
   and a slider to adjust brush/drop size.
2. Canvas Dimensions: Fixed at 400x400 pixels, but stylized via CSS to look crisp and sharp (use
   image-rendering: pixelated;). The internal simulation grid should map to a resolution that ensures
   high performance (e.g., 100x100 or 150x150 grid cells mapped onto the 400x400 canvas).
3. Visuals: Elements must have distinct, vibrant colors:
    - Empty Space: Deep charcoal/black (#1e1e24)
    - Sand: Rich gold/yellow (#e9c46a)
    - Water: Vibrant blue (#457b9d)
    - Wall (Impassable): Solid slate gray (#6c757d)
    - Acid: Glowing neon green (#55ff33)

### Simulation Mechanics & Physics Rules:

You must implement a discrete 2D grid array state and update it using a strict frame-by-frame loop via
requestAnimationFrame. The physics elements must interact according to these exact rules:
1. Wall: Static. Cannot move, fall, or be displaced.
2. Sand: Falls straight down into empty space. If the space directly below is blocked by Sand or Wall,
   it must attempt to slide diagonally down-left or down-right at random if those spaces are empty. If
   it falls into Water or Acid, it should sink through it (displace it upward).
3. Water: Falls straight down. If blocked below, it flows diagonally down-left or down-right. If those
   are blocked, it must spread out horizontally left or right into empty space until it hits a wall or
   another element.
4. Acid: Falls down and flows horizontally exactly like Water, but with a unique property: if it comes
   into direct contact with Sand or Wall (top, bottom, or sides), it "dissolves" both itself and one
   pixel of that material, turning both cells back into Empty Space.

### Critical Implementation Rules (The Coding Trap):

- Multi-Pass / Directional Processing: To prevent a single particle from "teleporting" from the top of
  the screen to the bottom in a single frame, you must iterate through the grid from the BOTTOM row up
  to the top row when processing movement rules.
- Horizontal Shuffling: When processing diagonal or horizontal movement, randomize whether the engine
  checks left or right first. If you do not randomize this, the liquids and sand will unnaturally pile
  up or skew heavily toward one side of the screen.
- Interaction: Implement smooth mouse dragging on the canvas so the user can "paint" streams of elements
  into the sandbox in real-time.

### Deliverable:

Provide the complete, production-ready code inside a single code block containing the full HTML, CSS,
and JavaScript. Do not omit any logic, do not use placeholders, and do not use "code shortcuts". It must
work immediately when saved as an .html file and opened in a browser.

Note: You may not have access to a browser, dev server, or vision tools — do not rely on running or
visually inspecting the simulation for verification. Validate by reading and reasoning about the code
instead.

Before finishing, review the code to confirm:
- UI control panel (material select, clear canvas, brush size) is wired to the simulation
- Grid processes bottom-to-top; horizontal/diagonal checks randomize left vs right first
- Sand, water, and acid follow the stated movement and interaction rules (including acid dissolve)
- Mouse dragging paints the selected material onto the grid
- Complete single HTML file with no placeholders or omitted logic