### Specification v0.2.1: Multi-Format Static QR Generator

**1. Project Overview**
Build a fast, offline-capable single-page application that generates QR codes. The application must feature a high-contrast, utilitarian interface that prioritizes raw functionality and visual hierarchy over modern softness.

**2. Technical Constraints**

* **Architecture:** Static HTML/CSS/JS (Vanilla). No frameworks.
* **Backend:** None. Zero network requests after initial load.
* **Performance:** 95+ Lighthouse score.
* **Page Title:** `QR Generator`

**3. Functional Requirements**

* **Input Modes:**
1. **URL / Text (Default):** Single Textarea.
2. **WiFi:** Inputs for SSID, Password, Encryption. Formats to `WIFI:S:...`.
3. **Email:** Inputs for To, Subject, Body. Formats to `mailto:...`.


* **Generation Logic:** Auto-update with debouncing. High (H) error correction.
* **Output:** PNG Download.

**4. UI/UX & Layout Design**

* **Desktop Layout (The "Broadsheet" View):**
* **Split Pane:** Fixed-width sidebar (Left) for controls; Fluid container (Right) for output.
* **Visual Texture:** The Right Pane should feature a subtle "engineering paper" dot-grid background to distinguish the workspace from the controls.
* **Sticky Preview:** The QR code container must remain fixed in view while scrolling through long input forms.


* **Mobile Layout:** Stacked vertically. Top border acts as a "Masthead."
* **Interaction Design:**
* **Anti-Flicker:** The QR container preserves its dimensions to prevent layout shifts.
* **Feedback:** No soft transitions. State changes (like button hovers) should be sharp and instantaneous or high-contrast (e.g., inverting colors).



**5. Styling Guidelines (The "Brutalist" Update)**

* **Design Philosophy:** "Editorial Brutalism" / "1990s Industrial."
* *Reference:* New York Times structure meets NeXTSTEP utility.
* *Core Rule:* **No rounded corners (`border-radius: 0`).**


* **Color Palette:**
* **Strict Monochrome:** Pure Black (`#000`) and White (`#fff`).
* **Contrast:** High contrast borders (1px solid black) define all containment areas.


* **Typography (The "Data vs. UI" Split):**
* **Interface/Labels:** Serif (Georgia, Times New Roman). Represents the "System" or "Authority."
* **User Inputs:** Monospace (Courier, Lucida Console). Represents "Raw Data."


* **Visual Elements:**
* **Hard Shadows:** Elements meant to "pop" (like the QR container) use hard, solid-color block shadows (e.g., `10px 10px 0px #000`) rather than soft blurs.
* **Borders:** All inputs and buttons have visible, consistent 1px solid borders.
* **Buttons:** Uppercase, Monospace, solid black background. Inverts to white background/black text on hover.



**6. Deliverables**

* `index.html` (Semantic markup).
* `style.css` (Strict Grid/Flexbox with brutalist variables).
* `script.js` (Logic).
* `README.md`