diff --git a/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md b/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md
new file mode 100644
index 0000000..ccc9892
--- /dev/null
+++ b/docs/plans/2026-07-12-001-feature-pixel-pet-plan.md
@@ -0,0 +1,200 @@
+---
+title: Pixel Pet - Plan
+type: feat
+date: 2026-07-12
+topic: pixel-pet
+artifact_contract: ce-unified-plan/v1
+artifact_readiness: requirements-only
+product_contract_source: ce-brainstorm
+execution: code
+---
+
+## Goal Capsule
+
+| Field | Value |
+|---|---|
+| **Objective** | Add a passive ambient "pixel pet" — an abstract blob creature — to the bedside clock's UI that reflects four environmental signals (time of day, outdoor weather, indoor T/RH, music playback) without adding interaction burden. |
+| **Product authority** | SlumberCube (bedside clock product line, single-user device on ESP32-C3 firmware). |
+| **Execution profile** | `code` — firmware feature on the existing main MCU. No new product line, no cloud dependency, no companion app. |
+| **Stop conditions** | Pet renders on the existing canvas; behavior is purely passive; night mode hides it; pet resets on each wake. No new screens, no new buttons, no audio output from the pet. |
+| **Tail ownership** | Pet lives in `clock_screen.c` (or a small new module pulled into the same draw loop); evolves when product requirements change. |
+
+## Product Contract
+
+### Summary
+
+A passive abstract blob creature lives in the bottom-right 24×24 pixels of the clock screen, alongside the weather panel. Four environmental signals — time of day, outdoor weather, indoor T/RH, and music playback — each toggle an internal property layer (shape, eye state, surface texture, motion mode) on top of an always-running idle animation. Reactions are coherent within a wake cycle and reset on deep sleep; the pet hides during night mode and never reacts to user input.
+
+### Problem Frame
+
+SlumberCube today is purely informational: clock digits, weather text, indoor temperature, forecast range, and a station label. The OLED surface is dense with data and cold by design. A bedside device earns emotional warmth from one small living thing on screen — a creature that quietly reflects the environment rather than demanding attention. The challenge is to add that warmth without breaking what already works: the device's promise of "inform without intruding," the strict night-mode contrast budget, the 10-minute wake / deep-sleep rhythm, and the existing 256×64 grayscale canvas that already carries the clock + weather UI.
+
+### Key Decisions
+
+**Pet form: abstract blob, not a recognizable creature.**
+At 24×24 grayscale, recognizable species lose legibility under property morphing. A blob / egg / cloud-like form lets shape, eye state, and surface texture all vary continuously without breaking character. **Why:** signal legibility at the canvas budget.
+
+**Visual expression: four independent property layers on a shared base, not one fused "mood."**
+The four signals (time, weather, indoor T/RH, music) each drive one layer — shape, eye state, surface texture, motion mode. Layers coexist and overlay rather than collapsing into a single named mood. **Why:** "combine all four" was the user's stated product intent; layers keep each signal legible at small canvas size where a fused mood would read muddy.
+
+**Interaction: fully passive, no button, no sound.**
+The pet never chirps, purrs, or reacts to button presses. **Why:** the device is a bedside clock whose core promise is "inform without intruding"; a sound-emitting pet would break the night-mode silence guarantee, and an interactive pet would push the device toward gamification that is out of scope.
+
+**Persistence: stateless across wake cycles, coherent within one wake.**
+Within a 10-minute active period, reactions transition smoothly (e.g., music stops → gentle sway decays over ~15s). At deep-sleep entry, all pet state resets to neutral; the next wake starts clean. **Why:** the user is asleep between wakes, so cross-wake memory has no audience; cross-wake persistence would also require NVS/RTC backup, adding cost for no observable benefit.
+
+**Placement: bottom-right corner, adjacent to the weather panel.**
+Pet lives in the existing 24×24 area now used by the right side of the centered station label. The label is right-aligned (or shortened) to make room. **Why:** natural co-location with weather for the "weather messenger" axis, and out of the time-digits zone.
+
+```mermaid
+flowchart TB
+  Base["Base idle animation<br/>breathing + float + blink"]
+  Shape["Shape layer<br/>driven by time of day"]
+  Eyes["Eye-state layer<br/>driven by time + weather"]
+  Surface["Surface layer<br/>driven by weather + indoor T/RH"]
+  Motion["Motion mode layer<br/>driven by music on/off"]
+
+  Base --> Composite["Composite frame<br/>rendered to 24x24"]
+  Shape --> Composite
+  Eyes --> Composite
+  Surface --> Composite
+  Motion --> Composite
+```
+
+### Requirements
+
+#### Pet placement & layout
+
+- R1. The pet occupies a 24×24 pixel region anchored to the bottom-right of the 256×64 clock canvas, with its top-left at approximately `(232, 40)`. The pet region never overlaps or obscures the time digits, the weather text, or the temperature range.
+- R2. The pet renders onto the same LVGL canvas buffer (`canvas_buf` in `main/clock_screen.c`) that already carries clock, weather, and station label, and follows the same draw order rules (after weather panel content, alongside or after station label).
+- R3. The existing `station_label` is shortened to a maximum of 16 characters (truncated with an ellipsis if longer) and remains centered within the bottom row, leaving the rightmost ~32 pixels of that row free for the pet region.
+
+```mermaid
+flowchart LR
+  subgraph Canvas["256x64 canvas"]
+    direction TB
+    A["Time label<br/>0,2  size 128x48"] --- B["Weather label<br/>135,0"]
+    B --- C["Temp range<br/>135,18"]
+    C --- D["Station label<br/>right-aligned, y=36"]
+    D --- E["PET<br/>232,40  24x24"]
+  end
+```
+
+#### Idle animation (always running)
+
+- R4. The pet has a continuous idle animation — breathing, gentle float, periodic blink — that runs whenever the pet is visible, independent of all property layers.
+- R5. The idle animation does not pause or stop when any property layer becomes active.
+
+#### Property layers (one per environmental signal)
+
+- R6. **Shape layer** is driven by time of day: tall posture in active hours, rounder posture approaching wind-down, flat posture near sleep.
+- R7. **Eye-state layer** is driven by time of day and outdoor weather: wide open mid-day, half-lidded in evening, nearly closed near sleep; squinted in bright sun, relaxed in rain, soft in fog.
+- R8. **Surface layer** is driven by outdoor weather and indoor T/RH: smooth under comfortable conditions; one or more small sweat dots when indoor temperature rises above 26 °C (sweat expression) or falls below 18 °C (dryness texture); a droplet in rain; tiny dot accents in snow. Humidity contributes only via the hot branch (sweat dots intensify above 60 % RH) — the cold/dry branch is temperature-driven only.
+- R9. **Motion layer** is driven by music playback state — the simple on/off signal from `audio_player_wrapper`, no BPM or beat detection: idle breathe when no music, gentle bob when music plays, closed-eye soft sway when music has been playing for several seconds.
+
+#### Coherence & transition within a wake cycle
+
+- R10. Property changes within a wake cycle are visually coherent — either a smooth transition (over ~1–3 seconds) or a brief reaction animation — rather than instant frame swaps.
+- R11. Reaction animations decay after the triggering event ends. When music stops, the bob decays to idle breathe within ~10–30 seconds. When a weather change reverses, the surface element fades within ~10–30 seconds.
+
+#### Night mode & wake reset
+
+- R12. The pet is hidden whenever `clock_screen.c::night_mode` is true (the same condition that already hides weather UI and switches to dim clock digits).
+- R13. Each wake cycle begins the pet from a neutral baseline — no memory of the prior wake's shape, eye state, surface, or motion state. No NVS or RTC backup of pet state is required.
+
+### Key Flows
+
+- F1. Wake cycle boot
+  - **Trigger:** `clock_screen_create()` / first frame after wake.
+  - **Steps:** Pet appears at neutral baseline (mid-shape, eyes open, smooth surface, idle breathing). Property layers begin reading current environment signals and apply their initial state.
+  - **Covers:** R4, R6, R7, R8, R9.
+
+- F2. Music playback transition
+  - **Trigger:** Audio player starts (`audio_player_wrapper` state change).
+  - **Steps:** Motion layer switches from idle breathe to gentle bob; if music persists past ~5s, eye-state layer transitions to closed-eye soft sway.
+  - **Covers:** R9, R10.
+
+- F3. Music stops
+  - **Trigger:** Audio player reports stopped.
+  - **Steps:** Bob continues for a short decay period (~15s), then motion layer eases back to idle breathe; eyes reopen.
+  - **Covers:** R9, R11.
+
+- F4. Outdoor weather update
+  - **Trigger:** AMAP weather fetch delivers new conditions (e.g., rain, snow, fog, sun, clouds).
+  - **Steps:** Surface layer transitions to the matching texture (droplet / dots / wisp / clear); eye-state layer adjusts (squint for sun, soft for fog, neutral for clouds); smooth blend over ~1–3s.
+  - **Covers:** R8, R7, R10.
+
+- F5. Indoor T/RH threshold crossing
+  - **Trigger:** SHTC3 read crosses a configured comfortable range (hot / cold / dry / humid).
+  - **Steps:** Surface layer adds or removes a sweat dot (hot) or dryness texture (cold/dry). Coexists with weather-driven surface elements.
+  - **Covers:** R8.
+
+- F6. Time-of-day progression across the wake window
+  - **Trigger:** RTC minute tick during the 10-minute active period.
+  - **Steps:** Shape layer and eye-state layer gradually transition based on `tm_hour` (e.g., 22:00 in the wake window starts the "approaching sleep" posture).
+  - **Covers:** R6, R7, R10.
+
+- F7. Night mode entry / exit
+  - **Trigger:** `clock_screen_is_night_time()` returns true / false.
+  - **Steps:** Pet hides alongside weather UI on entry; returns to neutral baseline on exit. No state preservation across the hidden interval.
+  - **Covers:** R12, R13.
+
+- F8. Deep sleep entry
+  - **Trigger:** 10-minute wake period ends; ESP32-C3 enters deep sleep.
+  - **Steps:** All pet state is discarded. The next wake (in 10 minutes via `esp_deep_sleep_enable_gpio_wakeup`) starts from F1 with neutral baseline.
+  - **Covers:** R13.
+
+### Acceptance Examples
+
+- AE1. Wake at 07:00 on a sunny morning with music playing — pet appears tall (R6 awake), eyes squinted slightly (R7 bright sun), surface smooth (R8 dry), bobbing gently (R9 music). All four property layers are independently visible at once. **Covers:** R4, R6, R7, R8, R9.
+
+- AE2. Wake at 23:00 on a rainy night with no music — pet appears flat (R6 sleepy), eyes nearly closed (R7 night + rain), one droplet on the surface (R8 rain), idle breathing (R9 no music). **Covers:** R4, R6, R7, R8, R9.
+
+- AE3. Music stops mid-track during a wake — pet continues gentle sway for ~15 seconds, then motion layer eases back to idle breathe and eyes reopen (R9, R11). The transition is smooth, not abrupt.
+
+- AE4. Time crosses 22:00 during a wake — pet hides alongside weather UI; clock digits dim to night-mode contrast (R12). At 06:00 next morning, pet returns to neutral baseline with no memory of the prior day's shape or eye state (R13).
+
+- AE5. Indoor temperature rises past the configured hot threshold while weather is sunny — surface layer adds a single sweat dot in addition to its smooth default; shape and motion layers are unaffected (R8 coexistence with weather and time signals).
+
+- AE6. User presses the wake button during a music playback — music stops via the existing audio flow; the pet does not react directly to the button press and continues bobbing until the F3 decay timer completes (Key Decision: interaction is fully passive).
+
+- AE7. Pet is hidden during night mode. User manually forces day-mode (`s_night_override = 0`) at 02:00 — pet reappears at neutral baseline, time-of-day layer reflects 02:00 (post-midnight posture), and stays legible under night-mode contrast budget. **Covers:** R12 + R4.
+
+### Scope Boundaries
+
+**Deferred for later**
+
+- Pet sound output (chirp when music starts, gentle ambient cooing).
+- Pet button interaction (tap-to-pet, double-tap to switch mode).
+- Cross-wake pet growth, evolution, or "mood memory" (intentionally rejected in dialogue).
+- Dedicated full-screen "pet view" toggled by a button.
+- Music reactivity driven by BPM / beat detection (current scope uses music on/off only).
+- Pet species selection / multiple pet skins.
+- Pet-specific configuration screen (e.g., threshold tuning for "hot" / "rainy").
+
+**Outside this product's identity**
+
+- Tamagotchi-style care mechanics (feeding, hunger, affection scores) — the device is a bedside clock, not a virtual pet; care mechanics would push it toward gamification that conflicts with the "inform without intruding" promise.
+
+### Outstanding Questions
+
+*All blocking questions resolved at brainstorm time — see R3, R8, R9 for the resolved values.*
+
+**Deferred to Planning**
+
+- Sprite / frame asset strategy: inline C byte arrays vs LVGL image objects vs programmatic pixel draw.
+- Animation tick source: custom FreeRTOS timer vs LVGL timer vs reuse of `clock_screen.c`'s existing 1-second tick. `lv_conf.h` disables LVGL animations, so a manual frame-swap approach is required.
+- Property layer state machine: continuous lerp vs discrete tick-based state tables.
+- Drawing-order placement: pet drawn after weather panel but before station label, or after both.
+- Render hook: extend `clock_screen.c` directly, or add a small `pet_renderer.c` pulled into the same draw loop.
+
+### Sources / Research
+
+- `main/clock_screen.c:16-19` — `CANVAS_W=256`, `CANVAS_H=64`, `TIME_W=128`, `SEP_X=128`. Confirms the right half is shared by weather, temp range, and (currently) a centered station label.
+- `main/clock_screen.c:282-321` — weather, temp, and station label creation / positioning. The pet's bottom-right corner must not collide with the station label's current centered placement.
+- `main/clock_screen.c:37-38, 71-72, 174, 230` — `night_mode` flag drives the dim 7-segment clock and hides the chart. Pet hides under the same flag.
+- `main/ssd1322_driver.h:16-17` — `LCD_H_RES=256`, `LCD_V_RES=64`. Canvas dimensions.
+- `main/lv_conf.h:65` — LVGL animations are disabled. Pet animation must be implemented via manual frame-swap on a timer.
+- `components/esp-audio-player/` — existing MP3/WAV playback infrastructure; provides the music on/off signal R9 needs.
+- `components/shtc3/shtc3.c` and `components/pcf85063/pcf85063.c` — indoor T/RH and RTC sources, on the shared I²C bus. Both signals are already in the active loop.
+- `main/Kconfig.projbuild` — `CONFIG_NIGHT_START_HOUR` / `CONFIG_NIGHT_END_HOUR` define the night-mode window; no new config is needed for the pet's hide/show behavior unless threshold tuning is added later.
\ No newline at end of file
diff --git a/docs/plans/pet-simulator.html b/docs/plans/pet-simulator.html
new file mode 100644
index 0000000..66b96a7
--- /dev/null
+++ b/docs/plans/pet-simulator.html
@@ -0,0 +1,663 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>SlumberCube · Pixel Pet Simulator (NES / FC Cats)</title>
+<style>
+  :root {
+    --bg: #0a0a0a;
+    --panel: #111;
+    --line: #222;
+    --text: #ccc;
+    --muted: #666;
+    --accent: #4a7aaa;
+    --accent-dim: #1a2a3a;
+  }
+  * { box-sizing: border-box; }
+  body {
+    margin: 0;
+    padding: 24px;
+    background: var(--bg);
+    color: var(--text);
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", monospace;
+    min-height: 100vh;
+  }
+  h1 {
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--muted);
+    margin: 0 0 4px;
+    letter-spacing: 2px;
+  }
+  h1 span { color: var(--accent); }
+  .subtitle {
+    font-size: 11px;
+    color: #444;
+    margin-bottom: 24px;
+  }
+  .gallery {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    max-width: 1100px;
+    margin-bottom: 24px;
+  }
+  .pet-card {
+    background: #000;
+    border: 1px solid var(--line);
+    padding: 12px;
+    border-radius: 4px;
+    text-align: center;
+  }
+  .pet-card canvas {
+    display: block;
+    background: #000;
+    image-rendering: pixelated;
+    image-rendering: crisp-edges;
+    width: 100%;
+    height: auto;
+    aspect-ratio: 1;
+  }
+  .pet-name {
+    margin-top: 8px;
+    font-size: 11px;
+    color: #fff;
+    letter-spacing: 1px;
+  }
+  .pet-desc {
+    margin-top: 2px;
+    font-size: 9px;
+    color: #666;
+  }
+  .readout {
+    margin-top: 8px;
+    padding: 4px;
+    font-size: 10px;
+    color: #888;
+    min-height: 1.4em;
+  }
+  .controls {
+    max-width: 1100px;
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    gap: 12px;
+    margin-bottom: 12px;
+  }
+  .panel {
+    background: var(--panel);
+    border: 1px solid var(--line);
+    border-radius: 4px;
+    padding: 10px 12px;
+  }
+  .panel h2 {
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 1.5px;
+    color: var(--muted);
+    margin: 0 0 8px;
+    font-weight: 500;
+  }
+  .opt-row { display: flex; flex-wrap: wrap; gap: 4px; }
+  .opt {
+    display: inline-block;
+    padding: 4px 7px;
+    background: #1a1a1a;
+    border: 1px solid var(--line);
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 10px;
+    color: #888;
+    user-select: none;
+  }
+  .opt:hover { background: #222; color: #aaa; }
+  .opt.active {
+    background: var(--accent-dim);
+    border-color: var(--accent);
+    color: #fff;
+  }
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin: 4px 0;
+    font-size: 10px;
+    color: #aaa;
+    cursor: pointer;
+  }
+  .toggle input { margin: 0; cursor: pointer; }
+  .presets-row {
+    max-width: 1100px;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 6px;
+    margin-bottom: 12px;
+  }
+  .preset {
+    padding: 6px 10px;
+    background: #1a1a1a;
+    border: 1px solid var(--line);
+    border-radius: 3px;
+    cursor: pointer;
+    font-size: 10px;
+    color: #aaa;
+    user-select: none;
+  }
+  .preset:hover { background: #2a2a2a; color: #fff; }
+  .preset.active { background: var(--accent-dim); border-color: var(--accent); color: #fff; }
+  .inspector {
+    margin-top: 8px;
+    padding: 6px;
+    background: #0a0a0a;
+    border: 1px solid var(--line);
+    border-radius: 3px;
+    font-size: 10px;
+    color: var(--muted);
+    min-height: 1.4em;
+    text-align: center;
+  }
+  .legend {
+    font-size: 9px;
+    color: #555;
+    text-align: center;
+    margin-top: 6px;
+  }
+  .legend code {
+    background: #1a1a1a;
+    padding: 1px 3px;
+    border-radius: 2px;
+    color: #aaa;
+  }
+</style>
+</head>
+<body>
+  <h1>SLUMERCUBE / <span>PIXEL PET · NES (FC) STYLE</span></h1>
+  <div class="subtitle">4-tone palette · hard edges · iconic NES silhouettes.</div>
+
+  <div class="gallery">
+    <div class="pet-card">
+      <canvas id="petA" width="192" height="192"></canvas>
+      <div class="pet-name">A · 圆脸小猫</div>
+      <div class="pet-desc">chibi round · Felix-like</div>
+      <div class="readout" id="readoutA">—</div>
+    </div>
+    <div class="pet-card">
+      <canvas id="petB" width="192" height="192"></canvas>
+      <div class="pet-name">B · 好奇竖耳</div>
+      <div class="pet-desc">alert · perked ears</div>
+      <div class="readout" id="readoutB">—</div>
+    </div>
+    <div class="pet-card">
+      <canvas id="petC" width="192" height="192"></canvas>
+      <div class="pet-name">C · 眯眼慵懒</div>
+      <div class="pet-desc">sleepy · crescent eyes</div>
+      <div class="readout" id="readoutC">—</div>
+    </div>
+    <div class="pet-card">
+      <canvas id="petD" width="192" height="192"></canvas>
+      <div class="pet-name">D · 侧脸胡须</div>
+      <div class="pet-desc">side profile · whiskers</div>
+      <div class="readout" id="readoutD">—</div>
+    </div>
+  </div>
+
+  <div class="controls">
+    <div class="panel">
+      <h2>Eyes</h2>
+      <div class="opt-row">
+        <span class="opt active" data-eyes="open">● ● awake</span>
+        <span class="opt" data-eyes="half">- - half</span>
+        <span class="opt" data-eyes="closed">~ ~ happy</span>
+        <span class="opt" data-eyes="squint">× × squint</span>
+      </div>
+    </div>
+    <div class="panel">
+      <h2>Surface</h2>
+      <div class="opt-row">
+        <span class="opt active" data-surface="none">none</span>
+        <span class="opt" data-surface="music">♪ ♪ music</span>
+        <span class="opt" data-surface="rain">· · rain</span>
+        <span class="opt" data-surface="snow">* * snow</span>
+      </div>
+    </div>
+    <div class="panel">
+      <h2>Motion</h2>
+      <div class="opt-row">
+        <span class="opt active" data-motion="idle">idle · breathe</span>
+        <span class="opt" data-motion="bob">bob (music)</span>
+        <span class="opt" data-motion="sway">soft sway</span>
+      </div>
+    </div>
+    <div class="panel">
+      <h2>Environment</h2>
+      <label class="toggle"><input type="checkbox" id="night"> Night (hide)</label>
+      <label class="toggle"><input type="checkbox" id="forceDay"> Force day (dim)</label>
+      <label class="toggle"><input type="checkbox" id="autoCycle"> Auto-cycle 4s</label>
+    </div>
+  </div>
+
+  <div class="presets-row">
+    <span class="preset" data-preset="morning-sunny">07:00 · sunny · music</span>
+    <span class="preset" data-preset="rainy-night">23:00 · rainy night</span>
+    <span class="preset" data-preset="hot-afternoon">14:00 · hot indoor</span>
+    <span class="preset" data-preset="snowy-evening">19:00 · snow · music</span>
+  </div>
+
+  <div class="inspector" id="inspector">click any pixel across the 4 cats to inspect its level</div>
+  <div class="legend">NES palette: <code>#</code>L0 outline · <code>+</code>L8 body · <code>o</code>L11 light · <code>W</code>L15 eye white · <code>@</code>L0 pupil</div>
+
+<script>
+// ============================================================
+//  NES / FC style 4-Design Pixel Cat Simulator
+//  4-tone palette, hard edges, 24×24.
+// ============================================================
+
+const PET_W = 24, PET_H = 24;
+const SCALE = 8;
+
+const canvases = {
+  A: document.getElementById('petA'),
+  B: document.getElementById('petB'),
+  C: document.getElementById('petC'),
+  D: document.getElementById('petD'),
+};
+const ctxs = {};
+for (const k in canvases) {
+  canvases[k].width = PET_W * SCALE;
+  canvases[k].height = PET_H * SCALE;
+  ctxs[k] = canvases[k].getContext('2d');
+}
+
+// 4-tone NES-style palette
+const P = {
+  '.': -1, '#': 1, '+': 8, 'o': 11, 'W': 15,
+  '@': 1, 'M': 1, '~': 1, '-': 1, '×': 1,
+  '♪': 15, '*': 15, '·': 8,
+};
+
+function gray(level) {
+  const v = Math.round((level / 15) * 255);
+  return `rgb(${v},${v},${v})`;
+}
+
+// ============================================================
+//  4 hand-drawn NES-style cat sprites (24×24)
+//  Palette: # (outline) + (body) o (light) W (white) @ (pupil)
+// ============================================================
+
+// ── A. Round Chibi (圆脸小猫) ──
+// Felix-the-Cat-style mascot. Big round head, pointy ears,
+// huge round eyes with tiny pupils, small mouth.
+const SPRITE_A = [
+'........................',  // 0
+'.........##.....##......',  // 1 ear tips
+'........#++#...#++#.....',  // 2 ears narrowing
+'.......#+++#####+++#....',  // 3 ears + head
+'......#+++++++++++++#...',  // 4 top of head
+'.....#+++++++++++++++#..',  // 5
+'....#+++++++++++++++++#.',  // 6
+'....#+++++++++++++++++#.',  // 7
+'...#+++++++++++++++++++#',  // 8
+'...#+++##############++#',  // 9 eye top outlines
+'..#+++#WWWWWWWWWWWW#+++#',  // 10 eye whites
+'..#+++#W@@@WWWWWWW@W+++#',  // 11 pupils
+'..#+++#W@@@WWWWWWW@W+++#',  // 12
+'..#+++#WWWWWWWWWWWW#+++#',  // 13
+'..#+++##############+++#',  // 14 eye bottom outlines
+'..#++++++++++++++++++++#',  // 15
+'..#++++++++++MM++++++++#',  // 16 mouth top
+'..#+++++++++.M.++++++++#',  // 17 mouth
+'..#+++++++++MMM++++++++#',  // 18
+'..#++++++++++++++++++++#',  // 19
+'...#+++++++++++++++++++#',  // 20
+'....#+++++++++++++++++#.',  // 21
+'.....#+++++++++++++++#..',  // 22
+'......#################.',  // 23 bottom
+];
+
+// ── B. Alert Cat (好奇竖耳) ──
+// Tall perked ears, pupils looking up, slight head tilt
+const SPRITE_B = [
+'........................',  // 0
+'.......#.........#......',  // 1 ear tips tall
+'......#.#.......#.#.....',  // 2 ears widening
+'.....#...#.....#...#....',  // 3 ears
+'.....#####.....#####....',  // 4 ear bases
+'....#+++++#####+++++#...',  // 5 ear bottoms + head top
+'...#++++++++++++++++#++#',  // 6
+'..#++++++++++++++++++++#',  // 7
+'..#++++++++++++++++++++#',  // 8
+'..#+++##############++#.',  // 9 eye outlines
+'..#++#WWWWWWWWWWWWWW#++#',  // 10 whites
+'..#++#W@@WWWWWWWW@@W#++#',  // 11 pupils up
+'..#++#W@@WWWWWWWW@@W#++#',  // 12
+'..#++#WWWWWWWWWWWWWW#++#',  // 13
+'..#+++##############++#.',  // 14
+'..#+++++++++MM++++++++#+',  // 15 mouth O top
+'..#+++++++++.M.+++++++++',  // 16 O
+'..#+++++++++MM++++++++#+',  // 17 O bottom
+'..#+++++++++++++++++++++',  // 18
+'...#+++++++++++++++++++#',  // 19
+'....#+++++++++++++++++#.',  // 20
+'.....#++++++++++++++++#.',  // 21
+'......################..',  // 22
+'........................',  // 23
+];
+
+// ── C. Sleepy Cat (眯眼慵懒) ──
+// Closed crescent eyes, slight smile, ears relaxed (slightly drooped)
+const SPRITE_C = [
+'........................',  // 0
+'.......#.........#......',  // 1 ear tips shorter
+'......#.#.......#.#.....',  // 2 ears
+'.....#...#.....#...#....',  // 3 ears widening
+'....####.####.####.####.',  // 4 ear bases merging (need 24 chars)
+'...#+++++++++++++++++++#',  // 5 head top
+'..#++++++++++++++++++++#',  // 6
+'..#++++++++++++++++++++#',  // 7
+'..#+++##############++#.',  // 8 eye outlines
+'..#++#wwwwwwwwwwwwww#++#',  // 9 closed crescent top
+'..#++#wWWWWWWWWWWWWw#++#',  // 10 closed crescent
+'..#++#wwwwwwwwwwwwww#++#',  // 11 closed crescent
+'..#+++##############++#.',  // 12
+'..#++++++++MMMM+++++++.+',  // 13 sleepy smile
+'..#+++++++MM##MM+++++++#',  // 14
+'..#++++++++MMMM+++++++#+',  // 15
+'..#+++++++++++++++++++++',  // 16
+'...#++++++++++++++++++#.',  // 17
+'....#++++++++++++++++#..',  // 18
+'.....#+++++++++++++++#..',  // 19
+'......#+++++++++++++#...',  // 20
+'........##############...',  // 21
+'........................',  // 22
+'........................',  // 23
+];
+// Note: 'w' maps to L4 (subtle shadow on closed-eye area)
+// Need to add 'w' to palette
+
+// ── D. Side Profile Cat (侧脸胡须) ──
+// Side view, one visible eye, whiskers, single ear pointing up
+const SPRITE_D = [
+'........................',  // 0
+'.......#...............',  // 1 ear tip
+'......#.#..............',  // 2 ear
+'.....#...#.............',  // 3 ear widening
+'....#.....#............',  // 4 ear base
+'...#######.............',  // 5 ear meets head
+'..#++++++++#...........',  // 6 head + ear connection
+'.#++++++++++++++++#....',  // 7 head top
+'#+++++++++++++++++o#...',  // 8
+'#++++++++++++++++++o#..',  // 9
+'#++++++++++++++++++o#..',  // 10
+'#+++#########+++++o#..',  // 11 eye area outline
+'#++#WWWWWWWWWW#+++o#..',  // 12 eye white (single, big)
+'#++#W@@@@@@W#+++++o#..',  // 13 pupil
+'#++#WWWWWWWW#+++++o#..',  // 14
+'#+++#########+++++o#..',  // 15 eye bottom outline
+'#++++++++++++++++++o#..',  // 16
+'#+++++MMMM++++++++o#..',  // 17 nose bump + mouth
+'#++++..MMMMM+++++++o#..',  // 18 mouth
+'#++++++++++++++++++o#..',  // 19
+'.#++++++++++++++++o#...',  // 20
+'..#++++++++++++++o#....',  // 21
+'...################.....',  // 22
+'........................',  // 23
+];
+
+// Add 'w' to palette (lowercase w = subtle shadow gray for closed eyes)
+P.w = 4;
+
+function parseSprite(s) {
+  const pixels = [];
+  for (let y = 0; y < s.length && y < PET_H; y++) {
+    const row = s[y];
+    for (let x = 0; x < row.length && x < PET_W; x++) {
+      const ch = row[x];
+      if (ch in P && P[ch] >= 0) {
+        pixels.push([x, y, P[ch]]);
+      }
+    }
+  }
+  return pixels;
+}
+
+const SPRITES = {
+  A: parseSprite(SPRITE_A),
+  B: parseSprite(SPRITE_B),
+  C: parseSprite(SPRITE_C),
+  D: parseSprite(SPRITE_D),
+};
+
+// Eye region per design (so overlays know where to overwrite)
+const EYE_REGIONS = {
+  A: { ly: 10, lx: 4, rx: 14, w: 6, h: 5, two: true },
+  B: { ly: 10, lx: 4, rx: 14, w: 6, h: 5, two: true },
+  C: { ly: 8,  lx: 4, rx: 14, w: 6, h: 5, two: true },
+  D: { ly: 11, lx: 3,           w: 7, h: 5, two: false },
+};
+
+const BODY = 11;
+
+function clearEyes(design, eyes) {
+  const r = EYE_REGIONS[design];
+  const out = [];
+  if (r.two) {
+    for (let dy = 0; dy < r.h + 2; dy++) {
+      for (let dx = 0; dx < r.w + 2; dx++) {
+        out.push([r.lx + dx, r.ly + dy, BODY]);
+        out.push([r.rx + dx, r.ly + dy, BODY]);
+      }
+    }
+  } else {
+    for (let dy = 0; dy < r.h + 2; dy++) {
+      for (let dx = 0; dx < r.w + 2; dx++) {
+        out.push([r.lx + dx, r.ly + dy, BODY]);
+      }
+    }
+  }
+  return out;
+}
+
+function overlayEyes(design, eyes) {
+  if (eyes === 'open') return [];
+  const r = EYE_REGIONS[design];
+  const out = clearEyes(design, eyes);
+  const drawSide = (baseX) => {
+    if (eyes === 'half') {
+      for (let dx = 1; dx < r.w - 1; dx++) out.push([baseX + dx, r.ly + 1, 1]);
+    } else if (eyes === 'closed') {
+      for (let dx = 1; dx < r.w - 1; dx++) {
+        const yOff = (dx >= 2 && dx <= r.w - 3) ? 1 : 0;
+        out.push([baseX + dx, r.ly + 2 + yOff, 1]);
+      }
+    } else if (eyes === 'squint') {
+      for (let dx = 1; dx < r.w - 1; dx++) {
+        out.push([baseX + dx, r.ly + 1, 1]);
+        out.push([baseX + dx, r.ly + 2, 1]);
+      }
+    }
+  };
+  if (r.two) {
+    drawSide(r.lx);
+    drawSide(r.rx);
+  } else {
+    drawSide(r.lx);
+  }
+  return out;
+}
+
+function overlaySurface(design, surface) {
+  const out = [];
+  if (surface === 'music') {
+    out.push([3, 1, 15], [4, 1, 15], [3, 2, 15], [4, 2, 15], [5, 0, 15]);
+    out.push([16, 1, 15], [17, 1, 15], [16, 2, 15], [17, 2, 15], [18, 0, 15]);
+  } else if (surface === 'rain') {
+    out.push([1, 4, 8], [1, 5, 8]);
+    out.push([22, 6, 8], [22, 7, 8]);
+    out.push([0, 14, 8], [23, 14, 8]);
+    out.push([1, 19, 8], [22, 19, 8]);
+    out.push([2, 22, 8], [21, 22, 8]);
+  } else if (surface === 'snow') {
+    out.push([1, 3, 15]);
+    out.push([22, 5, 15]);
+    out.push([0, 12, 15]);
+    out.push([23, 13, 15]);
+    out.push([1, 17, 15]);
+    out.push([22, 19, 15]);
+    out.push([2, 22, 15], [21, 22, 15]);
+  }
+  return out;
+}
+
+// ============================================================
+//  State
+// ============================================================
+
+const state = {
+  eyes: 'open',
+  surface: 'none',
+  motion: 'idle',
+  night: false,
+  forceDay: false,
+};
+
+const presets = {
+  'morning-sunny': { eyes: 'squint', surface: 'music', motion: 'bob'   },
+  'rainy-night':   { eyes: 'closed', surface: 'rain',  motion: 'idle'  },
+  'hot-afternoon': { eyes: 'half',   surface: 'none',  motion: 'idle'  },
+  'snowy-evening': { eyes: 'half',   surface: 'snow',  motion: 'bob'   },
+};
+
+// ============================================================
+//  Render
+// ============================================================
+
+function renderDesign(ctx, design, frame) {
+  ctx.fillStyle = '#000';
+  ctx.fillRect(0, 0, PET_W * SCALE, PET_H * SCALE);
+
+  if (state.night && !state.forceDay) return;
+  const dim = (state.night && state.forceDay) ? 0.5 : 1.0;
+
+  const motionY = state.motion === 'bob'  ? Math.sin(frame * 0.10 + design.charCodeAt(0)) * 1.5
+                : state.motion === 'sway' ? Math.cos(frame * 0.10 + design.charCodeAt(0)) * 0.8
+                : 0;
+  const breath = state.motion === 'idle' ? 1.0 + Math.sin(frame * 0.05 + design.charCodeAt(0)) * 0.04 : 1.0;
+
+  const map = new Map();
+  const cy = (PET_H - 1) / 2;
+  for (const [x, y, level] of SPRITES[design]) {
+    const relY = y - cy;
+    const newY = Math.round(cy + relY * breath);
+    if (newY >= 0 && newY < PET_H) {
+      map.set(`${x},${newY}`, level);
+    }
+  }
+  for (const [x, y, level] of overlayEyes(design, state.eyes)) {
+    if (y >= 0 && y < PET_H) map.set(`${x},${y}`, level);
+  }
+  for (const [x, y, level] of overlaySurface(design, state.surface)) {
+    if (y >= 0 && y < PET_H) map.set(`${x},${y}`, level);
+  }
+
+  for (const [key, level] of map) {
+    const [x, y] = key.split(',').map(Number);
+    const drawY = y + motionY;
+    const px = x, py = Math.round(drawY);
+    if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) continue;
+    const finalLevel = Math.max(0, Math.min(15, Math.round(level * dim)));
+    ctx.fillStyle = gray(finalLevel);
+    ctx.fillRect(px * SCALE, py * SCALE, SCALE, SCALE);
+  }
+}
+
+let frame = 0;
+function loop() {
+  for (const k of ['A', 'B', 'C', 'D']) renderDesign(ctxs[k], k, frame);
+  frame++;
+  requestAnimationFrame(loop);
+}
+
+// ============================================================
+//  UI
+// ============================================================
+
+function updateReadouts() {
+  const txt = `eyes:${state.eyes} · surface:${state.surface} · motion:${state.motion}` +
+              (state.night ? (state.forceDay ? ' · dim' : ' · HIDDEN') : '');
+  for (const k of ['A', 'B', 'C', 'D']) document.getElementById('readout' + k).textContent = txt;
+}
+
+function setState(s) {
+  Object.assign(state, s);
+  refreshActive();
+  updateReadouts();
+}
+
+function refreshActive() {
+  document.querySelectorAll('.opt').forEach(el => {
+    el.classList.remove('active');
+    const key = Object.keys(el.dataset)[0];
+    if (state[key] === el.dataset[key]) el.classList.add('active');
+  });
+  document.querySelectorAll('.preset').forEach(el => el.classList.remove('active'));
+}
+
+document.querySelectorAll('.opt').forEach(el => {
+  el.addEventListener('click', () => {
+    const key = Object.keys(el.dataset)[0];
+    state[key] = el.dataset[key];
+    refreshActive();
+    updateReadouts();
+  });
+});
+
+document.querySelectorAll('.preset').forEach(el => {
+  el.addEventListener('click', () => {
+    setState(presets[el.dataset.preset]);
+    el.classList.add('active');
+  });
+});
+
+document.getElementById('night').addEventListener('change', e => { state.night = e.target.checked; updateReadouts(); });
+document.getElementById('forceDay').addEventListener('change', e => { state.forceDay = e.target.checked; updateReadouts(); });
+
+let autoCycleTimer = null;
+document.getElementById('autoCycle').addEventListener('change', e => {
+  if (e.target.checked) {
+    const keys = Object.keys(presets);
+    let i = 0;
+    autoCycleTimer = setInterval(() => {
+      setState(presets[keys[i]]);
+      i = (i + 1) % keys.length;
+    }, 4000);
+  } else {
+    clearInterval(autoCycleTimer);
+    autoCycleTimer = null;
+  }
+});
+
+const inspector = document.getElementById('inspector');
+for (const k of ['A', 'B', 'C', 'D']) {
+  canvases[k].addEventListener('click', (e) => {
+    const rect = canvases[k].getBoundingClientRect();
+    const x = e.clientX - rect.left;
+    const y = e.clientY - rect.top;
+    const px = Math.floor(x / (rect.width / PET_W));
+    const py = Math.floor(y / (rect.height / PET_H));
+    if (px < 0 || px >= PET_W || py < 0 || py >= PET_H) return;
+    let level = -1;
+    for (const [bx, by, bl] of SPRITES[k]) if (bx === px && by === py) level = bl;
+    for (const [ox, oy, ol] of [...overlayEyes(k, state.eyes), ...overlaySurface(k, state.surface)]) {
+      if (ox === px && oy === py) level = ol;
+    }
+    inspector.textContent = level >= 0
+      ? `[${k}] (${px},${py}) → L ${level} / 15  (${Math.round(level * 100 / 15)}%)`
+      : `[${k}] (${px},${py}) background (L 0)`;
+  });
+}
+
+updateReadouts();
+requestAnimationFrame(loop);
+</script>
+</body>
+</html>