docs(character): add Dr. Flask model sheet + sync bible to the board

invideo produced a full character design board (turnarounds, 8-expression
progression, micro-expressions, postures, bubble-hand gestures, silhouettes,
color palette). Committed as the definitive reference and folded its details
(palette, expression/posture/gesture lists, character note) into the bible.

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

docs/character/drflask-character-bible.md

@@ -5,56 +5,77 @@ explain Corrosion's chemistry-themed lexicon without turning the panel into a
 chemistry class. Helpful? Yes. Mandatory? No. Likely bubbling with questionable
 enthusiasm? Absolutely.
 
+**Definitive reference:** `drflask-characterboard.png` (full invideo model sheet).
+
 ## Identity
 
-| Field      | Value                         |
+| Field      | Value                          |
-| ---------- | ----------------------------- |
+| ---------- | ------------------------------ |
-| Name       | Dr. Flask                     |
+| Name       | Dr. Flask                      |
-| Alias      | Corrosion Guide               |
+| Alias      | Corrosion Guide                |
-| Role       | Ph.D. (Chemistry Teacher)     |
+| Role       | Ph.D. (Chemistry Teacher)      |
-| Archetype  | Catalyst Expert               |
+| Archetype  | Catalyst Expert                |
-| Build      | Erlenmeyer flask              |
+| Build      | Erlenmeyer flask               |
-| Liquid     | Neon green                    |
+| Liquid     | Neon green                     |
-| Headwear   | Mortarboard (graduation cap) with tassel |
+| Headwear   | Mortarboard with neon-green tassel |
 
-## Design notes (invideo storyboard)
+**Character note (from the board):** *Bubbles faster when excited. Professional
+yet playful. Expert in chemical catalysts.*
 
-A fully storyboarded character, not a static sticker:
+## Color palette
 
-- **Face:** expressions + micro-expressions; kawaii-friendly, approachable.
+Values as read from the model sheet — confirm exact hexes against the invideo
-- **Head detail:** mortarboard cap with tassel; the flask body is the head/body.
+source if pixel-accuracy matters.
-- **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
+| Swatch          | Hex (approx) | Use                              |
+| --------------- | ------------ | -------------------------------- |
+| Neon Green      | `#00FF3D`    | The liquid — primary character color |
+| Tassel Green    | `#39FF14`    | Mortarboard tassel               |
+| Bubble Highlight| `#B0FFB8`    | Bubble/gesture highlights        |
+| Glass           | `#B6F7FF`    | Flask glass / rim reflections    |
+| Charcoal Gray   | `#2A2A2A`    | Cap, shadow                      |
+| Deep Black      | `#0D0D0D`    | Outline / background             |
 
-Dr. Flask's neon green is the canonical reason the **chemistry FAQ section is a
+**In-product note:** the FAQ "lab zone" UI accent is a *readable* green
-"lab zone."** That section overrides the brand's rust-orange accent with a green
+(`--accent-text: #5bd183`, scoped to `.sec--lab`) — same family as the liquid
-set (`--accent-text: #5bd183`, scoped to `.sec--lab`) so Dr. Flask reads native
+but toned down so text/borders stay legible on dark (pure `#00FF3D` vibrates as
-to his corner. Green elsewhere on the site is still a clash — it is intentional
+UI text). Character art uses the neon greens above; UI uses the readable
-*only* in the chemistry glossary.
+derivative. Can nudge the UI green brighter toward canon on request.
+
+## Model sheet — animation reference
+
+- **Views:** 3/4 view, side view.
+- **Expression progression (8):** neutral · excited · thinking · laughing ·
+  surprised · determined · friendly wave · bubbling intensity.
+- **Micro-expressions (5):** subtle eye movement · liquid ripple patterns ·
+  mortarboard tilt · eye sparkle · glass reflection shift.
+- **Posture variations (4):** bubbling calmly · at the console · waving hello ·
+  pointing at reaction.
+- **Hand gestures (bubble-formed):** pointing · explaining · focusing.
+- **Silhouettes:** neutral, action.
+- **Wardrobe:** mortarboard (graduation cap) + neon-green tassel.
 
 ## 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
+- **Intro video:** 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
+  controls at the bottom of the screen). See `phone-frame-preview.png`.
-  `phone-frame-preview.png`.
 
 ## Assets
 
-| File                       | What                                              |
+| File                                      | What                                       |
-| -------------------------- | ------------------------------------------------- |
+| ----------------------------------------- | ------------------------------------------ |
-| `drflask-final.png`        | Placeholder card render (1254×1254, source)       |
+| `drflask-characterboard.png`              | **Definitive model sheet** (invideo)       |
-| `theflask.png` / `theatom.png` | Earlier concept cards (green Flask, green Atom) |
+| `drflask-final.png`                       | Placeholder card render (1254², source)    |
-| `frontend/src/assets/mascots/drflask.png` | Web-optimized cover (560px, ~394 KB) |
+| `theflask.png` / `theatom.png`            | Earlier concept cards                      |
-| `phone-frame-preview.png`  | Preview of the phone-frame lightbox                |
+| `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
+Placeholder card art (ChatGPT) in use on the FAQ; full animated character +
-production via invideo (Gemini-scripted). Swap the optimized cover + wire the
+75–90s intro video in production via invideo (Gemini-scripted), now backed by
-video into the lightbox when the render lands.
+the model sheet above. Swap the cover + wire the video into the lightbox when
+the render lands.