docs(character): Dr. Flask character bible — canonical identity + design notes

Single source of truth for Dr. Flask (Corrosion Guide / Ph.D. / Catalyst
Expert / Erlenmeyer / neon-green / mortarboard) as the character gets
storyboarded across tools. Documents the lab-zone green rationale, where he
appears, the 9:16 intro-video plan, and the asset inventory.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

docs/character/drflask-character-bible.md

@@ -0,0 +1,60 @@
+# Dr. Flask — Character Bible
+
+Corrosion's friendly chemistry guide. Appears in the FAQ and help sections to
+explain Corrosion's chemistry-themed lexicon without turning the panel into a
+chemistry class. Helpful? Yes. Mandatory? No. Likely bubbling with questionable
+enthusiasm? Absolutely.
+
+## Identity
+
+| Field      | Value                         |
+| ---------- | ----------------------------- |
+| Name       | Dr. Flask                     |
+| Alias      | Corrosion Guide               |
+| Role       | Ph.D. (Chemistry Teacher)     |
+| Archetype  | Catalyst Expert               |
+| Build      | Erlenmeyer flask              |
+| Liquid     | Neon green                    |
+| Headwear   | Mortarboard (graduation cap) with tassel |
+
+## Design notes (invideo storyboard)
+
+A fully storyboarded character, not a static sticker:
+
+- **Face:** expressions + micro-expressions; kawaii-friendly, approachable.
+- **Head detail:** mortarboard cap with tassel; the flask body is the head/body.
+- **Posture & silhouette:** distinct, readable poses for the explainer beats.
+- **Hands/gestures:** formed from **bubbles** — gesturing while he narrates.
+- **Liquid:** neon-green, lightly bubbling (the "more bubbling" payoff).
+
+## Color in-product
+
+Dr. Flask's neon green is the canonical reason the **chemistry FAQ section is a
+"lab zone."** That section overrides the brand's rust-orange accent with a green
+set (`--accent-text: #5bd183`, scoped to `.sec--lab`) so Dr. Flask reads native
+to his corner. Green elsewhere on the site is still a clash — it is intentional
+*only* in the chemistry glossary.
+
+## Where he appears
+
+- **FAQ chemistry glossary** (`frontend/src/views/marketing/FaqView.vue`,
+  `#chemistry`): the cover card beside the "Brush up on your chemistry…" heading.
+- **Intro video:** a 75–90s, 9:16 (vertical, YouTube-Short) explainer — Dr. Flask
+  reads the glossary. Plays click-to-play in a **phone-frame lightbox** (no loop,
+  native/branded controls at the bottom of the screen). See
+  `phone-frame-preview.png`.
+
+## Assets
+
+| File                       | What                                              |
+| -------------------------- | ------------------------------------------------- |
+| `drflask-final.png`        | Placeholder card render (1254×1254, source)       |
+| `theflask.png` / `theatom.png` | Earlier concept cards (green Flask, green Atom) |
+| `frontend/src/assets/mascots/drflask.png` | Web-optimized cover (560px, ~394 KB) |
+| `phone-frame-preview.png`  | Preview of the phone-frame lightbox                |
+
+## Status
+
+Placeholder art (ChatGPT) in use; final animated character + intro video in
+production via invideo (Gemini-scripted). Swap the optimized cover + wire the
+video into the lightbox when the render lands.