Prompt: “Universal Mosaic Filter Lab”

Build a single-page web app (HTML/CSS/JS, no frameworks) that matches the following specification. Prioritize cross-browser compatibility, smooth performance, and clean, modular structure.

1. Layout & UI

• Two regions:

1. Settings panel on the left (fixed width 300–360 px)
2. Viewer panel on the right filling the remaining width.

• Panel uses a compact two-column control grid (equal column widths, responsive to one column on narrow screens).
• Overall theme: deep blue-grey tint with subtle gradients, grayscale text, soft shadows, and rounded corners.
• Include a “Tips & Shortcuts” note that states: “Hold C to show the overlay filter; release to hide,” plus brief performance tips.
• Controls:
• Local image/video file input + “Select” button; show chosen filename.
• Checkbox toggles: “Black & White”, “Show Grid”, “Show Pattern”.
• Sliders + numeric inputs (synced) for “Grid Width” & “Grid Height” (1–100 px).
• Pattern upload (PNG/SVG) with current filename & dimensions.
• Pattern opacity slider + numeric input (0–100 %), default 70 %.
• Blend mode select: soft-light, hard-light, hard-mix.
• Styling extras:
• kbd tags styled like keyboard keys.
• Media container centered with 16:9 aspect, subtle border/shadow.
• Buttons styled in a light metallic gradient; hover states implied.