# Kalei — Claude Code Implementation Instructions

> **Purpose:** This document tells Claude Code everything it needs to know to build, modify, improve, and polish pixel-perfect interactive HTML mockups for every screen in the Kalei app.
>
> **For agent teams:** This is the single source of truth. Read this file completely before touching any screen. Follow the agent workflow in Section 2, the quality standards in Section 15, and the review protocol in Section 20.

---

## 1. What You're Building

You are building **76 interactive HTML mockup screens** for Kalei, a mobile mental wellness app (64 original + 12 Guide screens). Each screen is a standalone `.html` file that:

- Renders at **390 × 844px** (iPhone 14 viewport) inside a rounded device frame
- Uses the shared `design-system.css` for all tokens, typography, components, and layout
- References SVG assets from the `assets/` folder for icons, patterns, decorations, and visualizations
- Includes micro-interactions and state transitions using CSS animations + minimal vanilla JS
- Can be viewed in any browser by opening the file directly (no build step, no server)
- Is **fully self-contained** — all SVGs are inlined or referenced from the local `assets/` folder. No external image URLs, no CDN dependencies for icons or illustrations. Only Google Fonts and the local `design-system.css` are external dependencies.

**Output format:** Single-file HTML per screen. All CSS beyond `design-system.css` goes in a `<style>` block. All JS goes in a `<script>` block. No frameworks, no npm, no React — pure HTML + CSS + JS.

### 1.1 Product Context

Kalei is an AI-powered mental wellness app grounded in cognitive behavioral science. Its core metaphor: a kaleidoscope takes broken fragments of glass and reveals them as beautiful, symmetrical patterns. It never changes the pieces — it changes the **angle**.

**The Four Pillars:**

| Pillar | Feature | Optical Element | Color | User Need |
|--------|---------|----------------|-------|-----------|
| Awareness | The Mirror | Mirror | Amber | "I need to process" |
| Perspective | The Kaleidoscope (Turn) | Kaleidoscope | Amethyst | "I need to see this differently" |
| Direction | The Lens | Lens | Emerald | "I need to move forward" |
| Intelligence | The Spectrum | Prism | Prismatic | "I need to understand myself" |

**The Four Connectors:**

| Feature | Science Pillar | User Need |
|---------|---------------|-----------|
| The Rehearsal | Visualization & Mental Imagery | "I need to prepare" (Lens sub-feature) |
| The Ritual | Habit Formation | "I need consistency" |
| The Evidence Wall | Self-Efficacy: Mastery Experiences | "I need proof I can do this" (You tab) |
| The Guide | Self-Regulation & Feedback Loops | "I need someone walking with me" (Cross-feature) |

### 1.2 Technical Architecture Context (for realistic mock data)

The actual app will be built with:
- **Mobile:** React Native + Expo SDK 54+ (iOS & Android)
- **Backend:** Node.js Fastify 5.x modular monolith
- **Database:** PostgreSQL 16 + Redis 7
- **AI Primary:** DeepSeek V3.2 via OpenRouter (provider-pinned to US/EU infrastructure)
- **AI Fallback:** Claude Haiku 4.5 via OpenRouter
- **Auth:** JWT + refresh token rotation + Apple/Google SSO
- **Billing:** Self-hosted entitlement authority via App Store / Google Play server APIs
- **Monetization:** Free tier (3 turns/day, 1 mirror session/day, 3 goals max) + Prism tier ($7.99/month, unlimited)

Use this context when crafting realistic mock data — API response times, data structures, pricing, and tier gating should feel authentic.

---

## 2. Agent Team Workflow

This section defines how agent teams should coordinate when building, modifying, or polishing screens.

### 2.1 Task Types

| Task Type | Description | Scope |
|-----------|-------------|-------|
| **Build** | Create a new screen from scratch following the spec | Single screen |
| **Polish** | Improve visual quality, fix inconsistencies, enhance animations | Single or batch |
| **Update** | Add new content, components, or features to existing screen | Single screen |
| **Consistency Pass** | Ensure a group of screens share identical chrome, spacing, and patterns | Screen group (e.g., all Mirror screens) |
| **Cross-Screen Audit** | Verify navigation links, shared components, and design token usage across all screens | Full inventory |

### 2.2 Agent Responsibilities

**Before modifying any screen:**
1. Read this entire instructions file
2. Read `assets/design-system.css` to understand available tokens and components
3. Read the target screen's current HTML to understand its state
4. Read at least one "reference screen" from the same feature group for consistency
5. Check the screen's spec in Section 9 for required elements

**While modifying:**
1. Use CSS custom properties from `design-system.css` — never hardcode hex colors
2. Use typography classes from the design system — never raw `font-size` declarations
3. Inline all SVGs — never reference external image URLs
4. Keep all screen-specific CSS inside a `<style>` block in the `<head>`
5. Keep all JS inside a `<script>` block before `</body>`
6. Test that the screen renders correctly at 390×844px

**After modifying:**
1. Run through the Quality Checklist (Section 19)
2. Verify navigation links to adjacent screens work
3. Confirm the screen looks correct when opened directly in a browser (no server needed)

### 2.3 Parallel Work Guidelines

Screens can be worked on in parallel **within the same feature group** as long as agents:
- Don't modify `design-system.css` simultaneously (coordinate changes)
- Use consistent mock data across related screens (same user name, same dates, same thoughts)
- Follow the shared component patterns exactly (tab bar, nav header, status bar)

**Safe to parallelize:** Different feature groups (e.g., one agent on Mirror screens while another does Lens screens)

**Requires coordination:** Screens that share content (e.g., Turn Results #13 and Guide Evidence Turn #73 both show reframe blocks)

### 2.4 File Naming & Path Conventions

- Screen files: `[number]-[feature]-[descriptor].html` (e.g., `13-turn-results.html`)
- Asset path from screens: `../../assets/` (screens are in `screens/[feature]/`)
- Cross-screen links: `../[feature]/[filename].html` (e.g., `../turn/10-turn-home.html`)
- Design system import: `<link rel="stylesheet" href="../../assets/design-system.css">`

---

## 3. Current Build Status

### 3.1 Built Screens (64 of 76)

| Directory | Screens | Status |
|-----------|---------|--------|
| `onboarding/` | 01-splash through 09-welcome-complete | All 9 built |
| `turn/` | 10-turn-home through 14-turn-history | All 5 built |
| `mirror/` | 15-mirror-home through 19-mirror-reflection | All 5 built |
| `lens/` | 20-lens-dashboard through 30-rehearsal-complete | All 11 built |
| `gallery/` | 31-gallery-all through 34-gallery-search | All 4 built |
| `you/` | 35-you-profile through 43-evidence-wall-detail | All 9 built |
| `ritual/` | 44-ritual-templates through 49-ritual-streak | All 6 built |
| `spectrum/` | 50-spectrum-dashboard through 57-spectrum-monthly | All 8 built |
| `modals/` | 58-upgrade-modal through 61-pattern-share | All 4 built |
| `system-states/` | 62-notification-settings through 64-account-deletion | All 3 built |

### 3.2 Missing Screens (12 of 76)

| Directory | Screens | Status |
|-----------|---------|--------|
| `guide/` | 65-guide-checkin-conversation through 76-guide-pulse-focus | **NOT BUILT — 0 of 12** |

The `screens/guide/` directory needs to be created. All 12 Guide screens (65–76) are unbuilt. Additionally, screens 13 (Turn Results) and 19 (Mirror Reflection) need Guide enhancement updates per Section 10B.

### 3.3 Known Issues to Address During Polish

When polishing existing screens, watch for these common issues:
- **Inconsistent tab bar SVGs** — some screens may have slightly different tab bar icon shapes or sizes
- **Hardcoded colors** — some screens may use hex codes instead of `var(--color)` custom properties
- **Missing hover/active states** — buttons and interactive elements need state definitions
- **Inconsistent spacing** — some screens use raw pixel values instead of `var(--space-N)` tokens
- **Missing breathing animations** — decorative elements should pulse with 6s ease-in-out cycle
- **Overflow issues** — content may overflow the 844px device height on some screens
- **Missing glow effects** — interactive elements should glow, not cast traditional shadows
- **Stale dates** — mock data should use February 2026 dates

---

## 4. Repository Map

```
Kalei/
├── docs/
│   ├── brand/
│   │   ├── kalei-brand-guidelines.md      ← Color palette, typography, voice & tone (18 sections)
│   │   └── kalei-brand-metaphor.md        ← Kaleidoscope metaphor deep dive
│   ├── product/
│   │   ├── kalei-complete-user-journey.md  ← **PRIMARY REF** — all 76 screens described
│   │   ├── kalei-complete-design.md        ← Feature specs, interactions, flows, science basis
│   │   ├── kalei-mirror-feature.md         ← Mirror (journaling) deep dive + fragment detection
│   │   └── kalei-spectrum-phase2.md        ← Spectrum analytics: River, Glass, Impact, Rhythm, Growth
│   ├── technical/
│   │   ├── kalei-user-journey-technical-map.md ← API endpoints, DB schemas, component tree
│   │   ├── kalei-system-architecture-plan.md   ← Tech stack: Fastify, PostgreSQL, Redis, Expo, DeepSeek
│   │   ├── kalei-infrastructure-plan.md        ← Server specs, AI cost model, hosting
│   │   └── kalei-claude-code-build-framework.md ← Locked toolchain versions, monorepo structure
│   └── build-phases/                      ← Phase 0–4 roadmaps for production app
│
├── initial mockups/
│   ├── claude_implementation_instructions.md  ← **THIS FILE**
│   ├── assets/
│   │   ├── design-system.css              ← **IMPORT IN EVERY SCREEN** — all tokens, components, utilities
│   │   ├── ASSET-INDEX.md                 ← Catalog of all SVG elements with usage notes
│   │   ├── preview-all-assets.html        ← Visual preview of all SVGs (open in browser)
│   │   ├── icons-tab-bar.svg              ← 5 navigation icons (active + inactive states)
│   │   ├── icons-distortions.svg          ← 10 cognitive distortion icons (amber base)
│   │   ├── icons-actions.svg              ← 30 action/UI icons (nav, save, share, dismiss, etc.)
│   │   ├── fragment-icons.svg             ← Fragment ◇ in 5 sizes (xs/sm/md/lg/xl), 8 colors
│   │   ├── decorative-shards.svg          ← Background shards, auras, dividers, ambient decoration
│   │   ├── patterns-kaleidoscope.svg      ← 7 kaleidoscope pattern variants for Gallery/Turn
│   │   ├── progress-indicators.svg        ← Rings, bars, dots, streaks for Lens/Ritual
│   │   ├── evidence-wall.svg              ← Mosaic tiles and connection system for Evidence Wall
│   │   ├── loading-animations.svg         ← Spinners, skeletons, AI thinking state references
│   │   ├── device-chrome.svg              ← Status bar, tab bar, nav header reference
│   │   └── spectrum-visualizations.svg    ← 5 analytics chart types: River, Glass, Impact, Rhythm, Growth
│   │
│   └── screens/                           ← **OUTPUT DIRECTORY**
│       ├── onboarding/                    ← Screens 1–9 (all built)
│       ├── turn/                          ← Screens 10–14 (all built)
│       ├── mirror/                        ← Screens 15–19 (all built)
│       ├── lens/                          ← Screens 20–30 (all built)
│       ├── gallery/                       ← Screens 31–34 (all built)
│       ├── you/                           ← Screens 35–43 (all built)
│       ├── ritual/                        ← Screens 44–49 (all built)
│       ├── spectrum/                      ← Screens 50–57 (all built)
│       ├── guide/                         ← Screens 65–76 (**NOT YET BUILT**)
│       ├── modals/                        ← Screens 58–61 (all built)
│       └── system-states/                 ← Screens 62–64 (all built)
│
├── logo-mockups/
│   └── finalists/
│       └── soft-elegance-final.svg        ← **LOGO & VISUAL DNA SOURCE** — study before building
│
└── research/                              ← Academic PDFs (context only, don't reference in mockups)
```

---

## 5. Visual DNA — The Soft-Elegance Language

Every visual decision descends from `soft-elegance-final.svg`. Study it before building anything.

### 5.1 Core Principles

| Principle | How It Manifests |
|-----------|-----------------|
| **Crystalline geometry** | Diamond ◇ as the universal shape — fragments, icons, tiles, data points |
| **Jewel tone gradients** | Each color is a gradient pair: light stop → dark stop (e.g., `#C4B5FD` → `#7C3AED` for Amethyst) |
| **Glow, not shadow** | Elements glow outward with `box-shadow: 0 0 Npx rgba(color, 0.3)`. No traditional drop shadows. |
| **Breathing animations** | Slow pulsing opacity/scale on decorative elements (6s cycle) |
| **Prismatic color cycling** | Gradient that shifts through Amethyst → Sapphire → Emerald → Amber → Rose |
| **Dark void canvas** | #050508 base with layered surfaces (#0A0E1A → #121628 → #1C2240) |
| **Screen blend mode** | Overlapping translucent elements blend additively for a light-through-glass effect |
| **Faceted, not rounded** | Moderate corner radii (10–16px), not fully rounded. Feels like cut glass, not bubbles. |
| **Depth through luminance** | Deeper surfaces are darker. Elevated surfaces are slightly lighter. No shadows — surface color creates depth. |

### 5.2 Color System

```css
/* Backgrounds (darkest → lightest) */
--void:        #050508;    /* Deepest bg, device frame bg */
--kalei-navy:  #0A0E1A;    /* Primary surface (cards, tab bar) */
--deep-glass:  #121628;    /* Elevated surface (inputs, modals) */
--twilight:    #1C2240;    /* Borders, dividers, inactive elements */

/* Jewel Tones — each feature "owns" a color */
--amethyst:      #8B5CF6;  /* Turn ◇ — primary accent, CTAs */
--amethyst-light:#A78BFA;  /* Lighter variant for highlights */
--amethyst-dark: #6D28D9;  /* Darker variant for pressed states */
--sapphire:      #3B82F6;  /* Gallery ▦ — info, secondary actions */
--sapphire-light:#60A5FA;
--sapphire-dark: #1D4ED8;
--emerald:       #10B981;  /* Lens ◎ — success, growth */
--emerald-light: #34D399;
--emerald-dark:  #047857;
--amber:         #F59E0B;  /* Mirror ✦ — fragments, awareness */
--amber-light:   #FCD34D;
--amber-dark:    #B45309;
--rose:          #EC4899;  /* Social, sharing, celebration */
--rose-light:    #F9A8D4;
--ruby:          #EF4444;  /* Error, destructive, crisis ONLY */
--indigo:        #6366F1;  /* Extended palette */
--indigo-light:  #818CF8;

/* Text hierarchy */
--pure-light:  #FFFFFF;    /* Titles, primary values */
--soft-light:  #E2E8F0;    /* Body text */
--dim-light:   #94A3B8;    /* Secondary text, labels */
--faint-light: #475569;    /* Tertiary, placeholders, disabled */

/* Prismatic Gradient */
--prismatic: linear-gradient(135deg, #8B5CF6, #3B82F6, #10B981, #F59E0B, #EC4899);
--prismatic-subtle: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15), rgba(16,185,129,0.15), rgba(245,158,11,0.15), rgba(236,72,153,0.15));
```

**Critical color rules:**
- Never use jewel tones for text smaller than 16px — use `--pure-light` or `--soft-light` for body text
- Ruby is ONLY for errors and destructive actions — never for fragment highlighting
- The prismatic gradient is for premium accents, Guide borders, and celebration moments — never for large filled areas at full opacity
- All color/background combinations must meet WCAG 2.1 AA minimum contrast (4.5:1 for normal text)

### 5.3 Typography

```css
/* Display: Space Grotesk — titles and hero text */
--font-display: 'Space Grotesk', 'Inter', sans-serif;

/* Body: Inter — everything else */
--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
```

| Class | Size | Weight | Line Height | Letter Spacing | Use |
|-------|------|--------|-------------|---------------|-----|
| `.display-xl` | 40px | 700 | 48px | -0.02em | Splash, hero moments |
| `.display-lg` | 32px | 700 | 40px | -0.02em | Section heroes, screen titles |
| `.display-md` | 24px | 600 | 32px | -0.01em | Card titles |
| `.heading` | 20px | 600 | 28px | -0.01em | Nav titles, section heads |
| `.subheading` | 16px | 600 | 24px | 0 | Subsection heads, button text |
| `.body-lg` | 17px | 400 | 26px | 0 | Primary reading text (journal, reframes) |
| `.body` | 15px | 400 | 22px | 0 | Standard body |
| `.body-sm` | 13px | 400 | 18px | 0.01em | Metadata, timestamps |
| `.label` | 11px | 500 | 16px | 0.05em | Uppercase labels, section headers, badges |

**Typography rules:**
- Never center body text. Center alignment only for headlines, single-line labels, and empty states.
- Use sentence case everywhere. "Turn a fragment" not "Turn A Fragment" or "TURN A FRAGMENT."
- Maximum line width: 65–75 characters for body text.
- Minimum text size: 13px (the `body-sm` class). Nothing smaller, ever.
- Maintain hierarchy: every screen has one clear `display` or `heading` element.
- No all-caps body text — uppercase reserved for `.label` token only.
- Space Grotesk is for display/hero text only. Never for body text or UI elements.

### 5.4 Feature → Color → Icon Mapping

| Tab | Feature | Color | Icon Shape | Gradient Stops |
|-----|---------|-------|------------|----------------|
| Turn | Reframing | Amethyst | Diamond ◇ | `#C4B5FD` → `#7C3AED` |
| Mirror | Journaling | Amber | Hexagon ✦ | `#FDE68A` → `#D97706` |
| Lens | Goals | Emerald | Circle ◎ | `#6EE7B7` → `#059669` |
| Gallery | Collection | Sapphire | Grid ▦ | `#93C5FD` → `#2563EB` |
| You | Profile | Soft Light | Circle ● | `#E2E8F0` → `#94A3B8` |

---

## 6. Screen Template — Every File Starts Here

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=390, initial-scale=1">
  <title>Kalei — [Screen Name]</title>
  <link rel="stylesheet" href="../../assets/design-system.css">
  <style>
    /* Screen-specific styles go here */
  </style>
</head>
<body>
  <div class="device-frame">

    <!-- STATUS BAR (always present except splash) -->
    <div class="status-bar">
      <span class="time">9:41</span>
      <div class="icons">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <rect x="1" y="7" width="2.5" height="5" rx="0.5" fill="#E2E8F0" opacity="0.4"/>
          <rect x="4.5" y="5" width="2.5" height="7" rx="0.5" fill="#E2E8F0" opacity="0.6"/>
          <rect x="8" y="3" width="2.5" height="9" rx="0.5" fill="#E2E8F0" opacity="0.8"/>
          <rect x="11.5" y="1" width="2.5" height="11" rx="0.5" fill="#E2E8F0"/>
        </svg>
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M 2,8 C 4,4 12,4 14,8" stroke="#E2E8F0" stroke-width="1.2" fill="none" stroke-linecap="round"/>
          <path d="M 4,10 C 6,7 10,7 12,10" stroke="#E2E8F0" stroke-width="1" fill="none" opacity="0.8" stroke-linecap="round"/>
          <circle cx="8" cy="12" r="1.2" fill="#E2E8F0"/>
        </svg>
        <svg width="24" height="12" viewBox="0 0 24 12" fill="none">
          <rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="#E2E8F0" stroke-width="1" opacity="0.5"/>
          <rect x="22" y="3" width="2" height="6" rx="1" fill="#E2E8F0" opacity="0.3"/>
          <rect x="2" y="2" width="16" height="8" rx="1.5" fill="#10B981" opacity="0.9"/>
        </svg>
      </div>
    </div>

    <!-- NAV HEADER (present on non-root screens) -->
    <div class="nav-header">
      <a class="nav-back" href="#">
        <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
          <path d="M12 4L6 10L12 16" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
        </svg>
      </a>
      <span class="nav-title">[Title]</span>
      <span class="nav-action"><!-- optional right icon --></span>
    </div>

    <!-- SCREEN CONTENT -->
    <div class="screen-content">
      <!-- Unique screen content goes here -->
    </div>

    <!-- TAB BAR (present on main tab screens) -->
    <div class="tab-bar">
      <a class="tab-item active" data-tab="turn">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <path d="M12 2L20 12L12 22L4 12Z" fill="currentColor" opacity="0.9"/>
          <path d="M12 2L20 12L12 12Z" fill="white" opacity="0.15"/>
        </svg>
        <span class="tab-label">Turn</span>
      </a>
      <a class="tab-item inactive" data-tab="mirror">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <path d="M12 3L16 8L18 14L12 19L6 14L8 8Z" stroke="currentColor" fill="none" stroke-width="1.2"/>
        </svg>
        <span class="tab-label">Mirror</span>
      </a>
      <a class="tab-item inactive" data-tab="lens">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <circle cx="12" cy="12" r="9" stroke="currentColor" fill="none" stroke-width="1.2"/>
          <circle cx="12" cy="12" r="4" stroke="currentColor" fill="none" stroke-width="0.8"/>
        </svg>
        <span class="tab-label">Lens</span>
      </a>
      <a class="tab-item inactive" data-tab="gallery">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <rect x="3" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
          <rect x="13.5" y="3" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
          <rect x="3" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
          <rect x="13.5" y="13.5" width="7.5" height="7.5" rx="1.5" stroke="currentColor" fill="none" stroke-width="1"/>
        </svg>
        <span class="tab-label">Gallery</span>
      </a>
      <a class="tab-item inactive" data-tab="you">
        <svg width="24" height="24" viewBox="0 0 24 24">
          <circle cx="12" cy="9" r="4" stroke="currentColor" fill="none" stroke-width="1.2"/>
          <path d="M4 20C4 16 8 14 12 14C16 14 20 16 20 20" stroke="currentColor" fill="none" stroke-width="1.2" stroke-linecap="round"/>
        </svg>
        <span class="tab-label">You</span>
      </a>
    </div>

  </div>

  <script>
    // Screen-specific interactions go here
  </script>
</body>
</html>
```

### Template Rules

1. **Tab bar** is only present on the 5 root tab screens and their immediate children (Turn Home, Mirror Home, Lens Dashboard, Gallery All Patterns, You Profile). Sub-screens (detail views, creation flows) use nav-header + back button instead, no tab bar.
2. **Nav header** is hidden on root tab screens (tab bar acts as navigation). Show it on all sub-screens with a back chevron and centered title.
3. **Status bar** is always present except on the Splash screen (Screen 1).
4. **Active tab** changes color per feature — set the correct `data-tab` attribute and `active` class.
5. **Screen content** has `flex: 1` and scrolls vertically. Use `screen-content centered` for splash/onboarding screens.
6. **CSS `<link>` path** is `../../assets/design-system.css` for screens inside `screens/[feature]/` directories.

---

## 7. SVG Asset Usage Guide

### 7.1 How to Use SVGs in Mockups

The SVG files are **reference sheets** — each contains multiple elements arranged on a canvas for visual cataloging. You should **not embed the entire SVG file**. Instead:

**Option A: Inline the specific SVG element** (preferred for icons and small elements)
```html
<!-- Inline just the Amethyst fragment diamond -->
<svg width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="grAmethyst" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#C4B5FD"/>
      <stop offset="100%" stop-color="#7C3AED"/>
    </linearGradient>
  </defs>
  <path d="M12 2L20 12L12 22L4 12Z" fill="url(#grAmethyst)"/>
  <path d="M12 2L20 12L12 12Z" fill="#fff" opacity="0.15"/>
</svg>
```

**Option B: CSS recreation** (preferred for backgrounds, auras, decorations)
```css
.breathing-aura {
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.2), transparent 70%);
  filter: blur(40px);
  animation: breathing 6s ease-in-out infinite;
}
```

**Option C: Use `<object>` or `<img>` for complex patterns** (kaleidoscope hero, evidence wall mosaic)
```html
<!-- Only when the full pattern is needed -->
<object data="../../assets/patterns-kaleidoscope.svg" type="image/svg+xml"
        style="width: 200px; height: 200px;"></object>
```

**IMPORTANT:** Option C is the only acceptable use of external file references. For all icons, fragments, tab bar icons, and UI elements, use Option A (inline SVG). This ensures screens work offline and have no broken image dependencies.

### 7.2 SVG Gradient ID Conflicts

When inlining multiple SVGs on the same page, **gradient IDs must be unique**. If two SVGs both use `id="gradient1"`, only the first definition will be used. Solution: prefix gradient IDs with the element context:

```html
<!-- Fragment in reframe block 1 -->
<linearGradient id="grReframe1" ...>
<!-- Fragment in reframe block 2 -->
<linearGradient id="grReframe2" ...>
```

### 7.3 Asset → Screen Mapping

| SVG File | Used In Screens |
|----------|----------------|
| `icons-tab-bar.svg` | All tab bar screens (reference for inline SVGs) |
| `icons-distortions.svg` | Mirror Fragment Detail (#18), Mirror Reflection (#19), Spectrum (#50–57) |
| `icons-actions.svg` | Every screen — navigation, actions, status indicators |
| `fragment-icons.svg` | Turn Results (#13), Mirror Highlight (#17), Evidence Wall (#39–43) |
| `decorative-shards.svg` | Onboarding (#2–9), Turn Home (#10), splash backgrounds |
| `patterns-kaleidoscope.svg` | Splash (#1), Welcome (#2), Turn Animation (#12), Gallery Detail (#33), Pattern Share (#61) |
| `progress-indicators.svg` | Lens Dashboard (#20), Ritual Streak (#49), You Stats (#36) |
| `evidence-wall.svg` | Evidence Wall screens (#39–43) |
| `loading-animations.svg` | System states, Turn Animation (#12), AI Thinking states |
| `device-chrome.svg` | Reference for status bar, tab bar, nav header (already in template) |
| `spectrum-visualizations.svg` | Spectrum screens (#50–57) |

### 7.4 The Fragment ◇ — Universal Element

The diamond fragment `◇` appears everywhere. Build it as a reusable inline SVG:

```html
<!-- Fragment: size options xs(12) sm(16) md(24) lg(36) xl(48) -->
<svg class="fragment" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <linearGradient id="grFrag" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#C4B5FD"/>
      <stop offset="100%" stop-color="#7C3AED"/>
    </linearGradient>
    <filter id="fragGlow">
      <feGaussianBlur stdDeviation="1.5" result="b"/>
      <feMerge><feMergeNode in="b"/><feMergeNode in="SourceGraphic"/></feMerge>
    </filter>
  </defs>
  <g filter="url(#fragGlow)">
    <path d="M12 2L20 12L12 22L4 12Z" fill="url(#grFrag)" opacity="0.9"/>
    <path d="M12 2L20 12L12 12Z" fill="#fff" opacity="0.15"/>
  </g>
</svg>
```

Color variants — swap the gradient stops:
- **Amethyst:** `#C4B5FD` → `#7C3AED` (Turn, primary)
- **Amber:** `#FDE68A` → `#D97706` (Mirror, detected fragments)
- **Emerald:** `#6EE7B7` → `#059669` (Lens, success)
- **Sapphire:** `#93C5FD` → `#2563EB` (Gallery, info)
- **Rose:** `#F9A8D4` → `#DB2777` (social)
- **Ruby:** `#FCA5A5` → `#DC2626` (error)

---

## 8. Component Patterns

### 8.1 Fragment Highlight (Mirror Feature)

When AI detects a cognitive distortion in journal text, that text gets an amber underline highlight with a pulsing fragment icon:

```html
<span class="fragment-highlight">I always mess everything up</span>
<span class="fragment-icon">
  <svg width="12" height="12" viewBox="0 0 12 12">
    <path d="M6 1L10 6L6 11L2 6Z" fill="#F59E0B"/>
    <path d="M6 1L10 6L6 6Z" fill="#fff" opacity="0.2"/>
  </svg>
</span>
```

### 8.2 Reframe Block (Turn Results)

Three perspectives shown after a Turn:

```html
<div class="reframe-block amethyst">
  <div class="reframe-label">Perspective Shift</div>
  <div class="reframe-text">What if "messing up" is actually how you learn what works?</div>
</div>
<div class="reframe-block sapphire">
  <div class="reframe-label">Evidence Check</div>
  <div class="reframe-text">Think of three recent things you handled well.</div>
</div>
<div class="reframe-block emerald">
  <div class="reframe-label">Action Step</div>
  <div class="reframe-text">Pick one small win from today and write it down tonight.</div>
</div>
```

### 8.3 Chat Bubbles (Mirror Session)

```html
<div class="chat-bubble user">
  I've been feeling really overwhelmed at work lately. Everything feels like it's piling up.
</div>
<div class="chat-bubble ai">
  It sounds like you're carrying a lot right now. Can you tell me more about what feels most overwhelming?
</div>
```

### 8.4 Card with Kaleidoscope Pattern

```html
<div class="card card-pattern">
  <div class="pattern-visual">
    <!-- Inline mini kaleidoscope SVG here -->
    <svg width="120" height="120" viewBox="0 0 120 120" style="mix-blend-mode: screen;">
      <!-- 6 blades at 60° intervals, using feature color gradient -->
    </svg>
  </div>
  <div class="pattern-content">
    <div class="body" style="color: var(--soft-light);">My first reframe</div>
    <div class="body-sm" style="color: var(--dim-light);">Feb 21, 2026 • 3 perspectives</div>
  </div>
</div>
```

### 8.5 Progress Ring

```html
<div class="progress-ring" style="width: 80px; height: 80px;">
  <svg width="80" height="80" viewBox="0 0 80 80">
    <circle cx="40" cy="40" r="34" fill="none" stroke="var(--twilight)" stroke-width="4"/>
    <circle cx="40" cy="40" r="34" fill="none" stroke="var(--emerald)" stroke-width="4"
            stroke-dasharray="213.6" stroke-dashoffset="59.8" stroke-linecap="round"/>
  </svg>
  <span class="progress-text">72%</span>
  <span class="progress-label">Complete</span>
</div>
```

### 8.6 Evidence Wall Tile

```html
<div class="evidence-tile" style="
  width: 100px; height: 100px;
  background: var(--kalei-navy);
  border: 1px solid var(--emerald);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center; flex-direction: column;
  box-shadow: 0 0 12px rgba(16,185,129,0.2);
">
  <svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M12 2L20 12L12 22L4 12Z" fill="#10B981" opacity="0.8"/>
  </svg>
  <span class="body-sm" style="color: var(--emerald-light); margin-top: 4px;">Goal Met</span>
</div>
```

### 8.7 Toast Notifications

```html
<!-- Success toast -->
<div style="
  position: absolute; top: 70px; left: 50%; transform: translateX(-50%);
  background: var(--deep-glass); border: 1px solid var(--emerald);
  border-radius: 999px; padding: 8px 20px;
  display: flex; align-items: center; gap: 8px;
  box-shadow: 0 0 16px rgba(16,185,129,0.2);
  animation: fadeIn 0.3s ease;
">
  <svg width="16" height="16" viewBox="0 0 16 16">
    <path d="M8 1L13 8L8 15L3 8Z" fill="#10B981"/>
  </svg>
  <span class="body-sm" style="color: var(--soft-light); font-weight: 500;">Turn saved</span>
</div>
```

### 8.8 Buttons (Design System Reference)

| Type | Background | Text | Height | Radius | Use |
|------|-----------|------|--------|--------|-----|
| `.btn-primary` | `--amethyst` | `--pure-light` | 52px | 12px | Primary CTAs |
| `.btn-secondary` | `--deep-glass` + 1px `--twilight` border | `--soft-light` | 44px | 10px | Secondary actions |
| `.btn-ghost` | Transparent | `--amethyst` | Auto | None | Tertiary, dismiss |
| `.btn-destructive` | `--ruby` at 15% opacity + 1px `--ruby` 30% border | `--ruby` | 44px | 10px | Delete only |

**Feature-colored primaries:** When a CTA belongs to a specific feature (e.g., "Start Rehearsal" on Lens), use that feature's color instead of amethyst:
- Lens CTAs: `background: var(--emerald)`
- Mirror CTAs: `background: var(--amber)`
- Gallery CTAs: `background: var(--sapphire)`

### 8.9 Input Fields

- Background: `var(--deep-glass)`
- Border: `1px solid var(--twilight)`, transitions to `1px solid var(--amethyst)` on focus
- Text: `var(--pure-light)`, `.body-lg` token
- Placeholder: `var(--dim-light)`
- Height: 48px (single line), auto-grow for multi-line
- Corner radius: 10px
- Focus glow: `box-shadow: 0 0 0 3px rgba(139,92,246,0.15)`

### 8.10 Cards

- Background: `var(--kalei-navy)`
- Border: `1px solid var(--twilight)` (optional)
- Corner radius: 16px
- Padding: 16px standard, 12px compact
- **No traditional shadows** — Kalei uses borders and background shifts for depth
- Pressed/hover state: background shifts to `var(--deep-glass)`

### 8.11 Chips & Tags

- Height: 32px
- Corner radius: 16px (full pill)
- Background: `var(--deep-glass)`
- Text: `var(--soft-light)`, `.body-sm` token
- Fragment type chips: Amber text on Amber at 15% opacity background
- Selection chips: Amethyst border when selected

### 8.12 Bottom Sheet / Modal

- Background: `var(--kalei-navy)`
- Corner radius: 20px (top corners only)
- Grab handle: 36×5px pill in `var(--twilight)`, centered, 8px from top
- Backdrop: `var(--void)` at 60% opacity
- Max height: 70% of screen

---

## 9. Interaction Patterns

### 9.1 The Turn Animation Sequence

The signature moment. When a user submits a thought for reframing:

1. **Collapse** (0.3s): Input text compresses into a single diamond fragment at center
2. **Multiply** (0.4s): One fragment splits into 3, each drifting to a position
3. **Crystallize** (0.5s): Each fragment rotates 60° and settles into its reframe block position
4. **Settle** (0.3s): Reframe text fades in below each fragment

Implement with CSS `@keyframes` and `animation-delay` staggering:

```css
@keyframes turnCollapse {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.3) translateY(-50px); }
}
@keyframes turnMultiply {
  0% { opacity: 0; transform: scale(0.3); }
  50% { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1) translateX(var(--offset-x)) translateY(var(--offset-y)); }
}
@keyframes turnSettle {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
```

### 9.2 Fragment Detection Animation (Mirror)

When AI detects a cognitive distortion mid-session:

1. Text gets amber underline (grows from left to right, 0.4s)
2. Tiny fragment ◇ pulses into existence beside the text
3. A subtle amber glow radiates from the highlighted text
4. Fragment detail card slides up as a half-sheet

### 9.3 Kaleidoscope Pattern Generation

For Turn results and Gallery cards, generate unique-looking patterns:

```html
<svg width="120" height="120" viewBox="0 0 120 120" style="mix-blend-mode: screen;">
  <defs>
    <linearGradient id="blade1" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0%" stop-color="#C4B5FD" stop-opacity="0.7"/>
      <stop offset="100%" stop-color="#7C3AED" stop-opacity="0.3"/>
    </linearGradient>
  </defs>
  <!-- 6 blades at 60° intervals -->
  <g transform="translate(60,60)">
    <g><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(60)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(120)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(180)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(240)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <g transform="rotate(300)"><path d="M0,0 L8,-45 L0,-50 L-8,-45Z" fill="url(#blade1)"/></g>
    <!-- Core glow -->
    <circle r="8" fill="white" opacity="0.15" filter="blur(3px)"/>
  </g>
</svg>
```

Vary patterns per screen by changing: blade count (3 or 6), blade length, gradient colors, rotation offset, core glow size.

### 9.4 Breathing Aura (Background Decoration)

Place behind hero content on onboarding and Turn screens:

```css
.screen-aura {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(139,92,246,0.15) 0%, transparent 70%);
  filter: blur(60px);
  animation: breathing 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
```

---

## 10. The 10 Cognitive Distortions

These appear in Mirror as detected "fragments." Each has an icon, color tint, and label:

| # | Distortion | Icon Concept | Detection Example |
|---|-----------|--------------|-------------------|
| 1 | Catastrophizing | Shattered diamond with explosion lines | "Everything is going to fall apart" |
| 2 | Black-and-White | Half-filled diamond (split) | "I always fail" / "It's never good enough" |
| 3 | Mind Reading | Diamond with eye inside | "They probably think I'm stupid" |
| 4 | Fortune Telling | Diamond with spiral/clock | "This will definitely go wrong" |
| 5 | Personalization | Diamond with arrow pointing inward | "It's all my fault" |
| 6 | Discounting Positives | Diamond with minus/strikethrough | "That doesn't count" |
| 7 | Emotional Reasoning | Diamond with wave/heart | "I feel it, so it must be true" |
| 8 | Should Statements | Diamond with gavel/ruler | "I should be better by now" |
| 9 | Labeling | Diamond with tag | "I'm such a failure" |
| 10 | Overgeneralization | Diamond with infinite loop | "This always happens to me" |

All distortion icons use **Amber** as their base color since they're detected in Mirror.

---

## 11. Screen-by-Screen Build Specifications

### Onboarding (Screens 1–9) → `screens/onboarding/`

**Screen 1: `01-splash.html`**
- No status bar, no nav, no tab bar
- Full device-frame is #050508 void
- Centered: breathing kaleidoscope logo (from `soft-elegance-final.svg` simplified — 6 blades, core glow, slow rotation)
- Below logo: "Kalei" in Space Grotesk 32px, #E2E8F0
- Animation: logo fades in (0.5s), breathes for 1.5s, auto-transitions (add "tap to continue" fallback)

**Screen 2: `02-welcome.html`**
- Status bar visible
- Centered layout (`.screen-content.centered`)
- Hero: 6-blade prismatic kaleidoscope pattern (large, ~200px), breathing animation
- Below: "Same pieces." line 1, "New angle." line 2 — Space Grotesk display-lg
- Subtle breathing aura behind pattern (amethyst tint)
- CTA: "See how it works" — `.btn-primary` full width at bottom
- No tab bar, no nav header

**Screen 3: `03-fragment-intro.html`**
- Single amber fragment ◇ centered, pulsing with glow
- Copy: "Your thoughts are like pieces of glass in a kaleidoscope."
- Tap interaction: fragment pulses larger, then copy continues: "Sometimes you see sharp edges. Sometimes beautiful patterns."
- CTA: "Next" at bottom

**Screen 4: `04-turn-demo.html`**
- Pre-filled thought: "I always mess everything up" in a text card
- Auto-animated Turn sequence plays after 1s delay
- Shows the collapse → multiply → crystallize → settle animation
- 3 reframe blocks appear with sample perspectives
- CTA: "That's the Turn" → next screen

**Screen 5: `05-style-selection.html`**
- Heading: "Choose your coaching style"
- 4 radio options using `.radio-option`:
  - Stoic Sage (Sapphire) — "Clear-eyed perspective"
  - Compassionate Friend (Rose) — "Gentle understanding"
  - Pragmatic Coach (Emerald) — "Practical next steps"
  - Growth Catalyst (Amber) — "Opportunity in everything"
- Each has a small icon (inline SVG fragment in the matching color)
- CTA: "Continue" — enabled when one is selected

**Screen 6: `06-notifications.html`**
- Centered layout
- Icon: bell with fragment accent
- Heading: "Stay on track"
- Body: "Gentle reminders to check in with yourself"
- Two buttons: "Allow Notifications" (primary), "Not now" (ghost)

**Screen 7: `07-account-creation.html`**
- Apple Sign In button (full width, dark with Apple logo)
- Google Sign In button (full width, outlined)
- Divider with "or"
- Email input + Password input
- "Create Account" primary button
- "Already have an account? Sign in" ghost link

**Screen 8: `08-first-turn.html`**
- Heading: "What's on your mind?"
- Large textarea with placeholder: "Type a thought that's been bothering you..."
- Fragment hint: small dim text "The Turn will show you new angles"
- Submit button: "Turn the kaleidoscope" (amethyst primary)
- Decorative: subtle amethyst breathing aura behind textarea

**Screen 9: `09-welcome-complete.html`**
- Centered layout
- Personalized kaleidoscope pattern (using their coaching style color)
- Heading: "You're ready"
- Subtext: "Your kaleidoscope is set. Let's find some new angles."
- CTA: "Enter Kalei" — transitions to Turn Home

---

### Turn Tab (Screens 10–14) → `screens/turn/`

**Screen 10: `10-turn-home.html`**
- Tab bar with Turn active (amethyst)
- No nav header (root tab screen)
- Greeting: "Good morning, [Name]" — heading class
- Subtext: "What's weighing on you?" — body, dim-light
- Large textarea card with rounded corners, deep-glass bg
- Placeholder: "Something happened today..."
- Below textarea: recent Turn history cards (2–3 sample cards with mini kaleidoscope patterns)
- Section header: "RECENT TURNS" with "See all" action link
- Floating action: "Turn the kaleidoscope" button at bottom (above tab bar)
- Breathing aura behind greeting area

**Screen 11: `11-turn-input-active.html`**
- Same as Turn Home but textarea is focused (amethyst border glow)
- Text typed: "I completely bombed my presentation today and everyone saw"
- Character count in bottom-right of textarea
- Submit button fully visible and active
- Keyboard visible (simple CSS representation or just reduced content area)

**Screen 12: `12-turn-animation.html`**
- The signature Turn animation playing
- Input text visible at top, then collapses
- 3 fragments emerge and drift to positions
- This is the transition state between input and results
- Background: subtle prismatic shimmer

**Screen 13: `13-turn-results.html`**
- Nav header: "Your Turn" with back chevron
- Original thought in a dim card at top: "I completely bombed my presentation..."
- Below: 3 reframe blocks (amethyst, sapphire, emerald) with AI-generated perspectives
- Detected distortions: chips showing "Catastrophizing" and "Overgeneralization" in amber
- Actions row: Save (bookmark icon), Share (share icon), Try Another (refresh icon)
- Kaleidoscope pattern unique to this Turn between the thought and reframes
- No tab bar (sub-screen)

**Screen 14: `14-turn-history.html`**
- Nav header: "Turn History" with back chevron
- List of Turn cards, each showing:
  - Mini kaleidoscope thumbnail (left)
  - First line of original thought (truncated)
  - Date + number of perspectives
  - Detected distortion chips
- Filter chips at top: All, This Week, Saved
- No tab bar

---

### Mirror Tab (Screens 15–19) → `screens/mirror/`

**Screen 15: `15-mirror-home.html`**
- Tab bar with Mirror active (amber)
- Greeting area with amber accent
- "Start a session" primary card — large, with hexagonal Mirror icon
- Streak indicator: "3 days" with amber flame
- Recent sessions list (2–3 cards showing date, duration, fragment count)
- Section: "YOUR FRAGMENTS" — grid of recent detected distortion chips with counts

**Screen 16: `16-mirror-session.html`**
- Nav header: "Mirror Session" with close (X) button on right
- Chat bubble interface
- User messages (right-aligned, amethyst-tinted bg)
- AI responses (left-aligned, kalei-navy bg)
- Input accessory bar at bottom with text field + send button
- 3–4 exchanges shown
- No tab bar (full-screen session)

**Screen 17: `17-mirror-fragment-highlight.html`**
- Same as active session but with a detected fragment
- One user message has amber `.fragment-highlight` underline on a phrase
- Tiny amber fragment ◇ pulses beside the highlighted text
- Amber glow radiates from the highlight
- Hint text: "Fragment detected" in amber label below the message

**Screen 18: `18-mirror-fragment-detail.html`**
- Half-sheet modal (`.modal-overlay` + `.modal-sheet`)
- Behind: the chat session dimmed by scrim
- Sheet content:
  - Grab handle
  - Distortion name: "Catastrophizing" in amber heading
  - Icon from `icons-distortions.svg` (inline)
  - Highlighted text quoted
  - Explanation: 1–2 sentences about this distortion
  - "Turn this thought" button (amethyst) — links to Turn with pre-filled text
  - "Dismiss" ghost button

**Screen 19: `19-mirror-reflection.html`**
- Nav header: "Session Reflection"
- Session summary card:
  - Duration: "12 minutes"
  - Words written: "847"
  - Fragments detected: 3 (with distortion chips)
- Mood check: "How are you feeling now?" with 5 emoji-like options (abstract geometric, not actual emoji)
- Key themes identified (AI-generated tags)
- "Save Session" primary button
- "Start a Turn" secondary button

---

### Lens Tab (Screens 20–30) → `screens/lens/`

**Screen 20: `20-lens-dashboard.html`**
- Tab bar with Lens active (emerald)
- Heading: "Your Lens" in emerald
- Active goals list (2–3 goal cards):
  - Progress ring (left) showing completion %
  - Goal title + next action step
  - Days remaining chip
- "Add New Goal" button (emerald primary)
- Section: "DAILY AFFIRMATION" — card with today's auto-generated affirmation
- Section: "REHEARSALS" — upcoming/recent rehearsal sessions

**Screens 21–26: `21-lens-create-step1.html` through `26-lens-create-step6.html`**
- 6-step goal creation wizard
- Step progress dots at top (`.step-progress`)
- Nav header: "New Goal" with step indicator
- **Step 1 — Name:** "What do you want to achieve?" + text input
- **Step 2 — Why:** "Why does this matter to you?" + textarea (emotional driver)
- **Step 3 — Obstacles:** "What might get in the way?" + add multiple obstacle chips
- **Step 4 — If-Then Plans:** For each obstacle, create an if-then implementation intention
- **Step 5 — Milestones:** Break goal into 3–5 milestones with target dates
- **Step 6 — Visualization:** "Close your eyes and imagine achieving this" — guided prompt + "Save Goal" CTA
- Each step: emerald accent, previous/next buttons

**Screen 27: `27-lens-goal-detail.html`**
- Nav header: goal title
- Large progress ring (emerald)
- Milestone checklist with completion states
- If-Then plans listed
- "Start Rehearsal" button (emerald)
- "Log Progress" button (secondary)

**Screen 28: `28-lens-affirmation.html`**
- Centered, full-screen card feel
- Today's AI-generated affirmation in display-md
- Decorative: emerald breathing aura behind text
- Mini kaleidoscope with emerald tint
- "Reflect on this" button → opens Mirror with affirmation as prompt

**Screens 29–30: `29-rehearsal-session.html`, `30-rehearsal-complete.html`**
- **Session:** Guided visualization interface
  - Soft emerald background glow
  - Step-by-step prompts appearing one at a time with fade-in
  - Timer ring showing session progress
  - "I can see it" / "Next" progression
  - Breathing guide animation (expanding/contracting circle)
- **Complete:** Session summary
  - Vividness rating (1–5 stars or fragments)
  - "How real did it feel?" slider
  - Session added to Evidence Wall notification

---

### Gallery Tab (Screens 31–34) → `screens/gallery/`

**Screen 31: `31-gallery-all.html`**
- Tab bar with Gallery active (sapphire)
- Toggle: "Patterns" / "Keepsakes" at top
- Grid of pattern cards (2 columns):
  - Each card: mini kaleidoscope visual, thought preview, date, distortion chips
  - Sapphire accent on active/selected
- Sorting: "Recent" / "Most Reframed" chips

**Screen 32: `32-gallery-keepsakes.html`**
- Same layout but showing saved/bookmarked Turns
- Each card: kaleidoscope pattern, saved reframe text, source thought (dim)
- Heart/bookmark icon indicating saved state

**Screen 33: `33-gallery-detail.html`**
- Nav header: "Pattern" with back + share action
- Large kaleidoscope pattern visualization
- Original thought
- All 3 reframe perspectives
- Detected distortions with explanations
- "Turn again" button (get fresh perspectives)
- Metadata: date, coaching style used

**Screen 34: `34-gallery-search.html`**
- Search input at top (sapphire focus border)
- Filter chips: distortion types, date ranges, features
- Results list updating as filters change

---

### You Tab (Screens 35–43) → `screens/you/`

**Screen 35: `35-you-profile.html`**
- Tab bar with You active (soft light)
- Avatar circle (initial or placeholder)
- Name, member since date
- Stats row: Turns taken, Mirror sessions, Active goals
- Quick links: Settings, Subscription, Data & Privacy
- Section: "EVIDENCE WALL" — preview mosaic (link to full view)
- Section: "SPECTRUM" — preview card (Phase 2, Prism badge)

**Screen 36: `36-you-stats.html`**
- Nav header: "Your Stats"
- Stat blocks: Total Turns, Mirror Sessions, Goals Completed, Streak Days
- Bar chart: Turns per week (simple CSS bars)
- Top distortions: ranked list with amber bars showing frequency
- Most used feature breakdown

**Screen 37: `37-you-settings.html`**
- Nav header: "Settings"
- Sections with `.card-action` items:
  - Profile: Edit name, coaching style
  - Notifications: link to #62
  - Appearance: (future: themes)
  - Data & Privacy: Export (#63), Delete Account (#64)
  - About: Version, Terms, Privacy Policy

**Screen 38: `38-you-subscription.html`**
- Nav header: "Subscription"
- Current plan card (Free or Prism)
- If Free: comparison table showing Free vs Prism features
- Prism pricing: "$7.99/month" with prismatic text gradient
- Feature bullets for Prism: Unlimited turns, Mirror sessions, Spectrum access, Priority AI
- CTA: "Upgrade to Prism" (prismatic gradient button)

**Screens 39–43: Evidence Wall** (See Section 12 below for detailed specs)

---

### Ritual (Screens 44–49) → `screens/ritual/`

**Screen 44: `44-ritual-templates.html`**
- Nav header: "Choose Your Ritual" with back
- 3 ritual template cards:
  - **Morning Clarity** (Amethyst): Mirror reflection → Turn reframe → Lens affirmation
  - **Evening Wind-Down** (Sapphire): Mirror journal → Turn gratitude → Lens review
  - **Quick Reset** (Emerald): Turn single thought → Mirror check-in (2 min)
- Each card shows: name, duration, steps preview, accent color

**Screens 45–47: `45-ritual-morning.html`, `46-ritual-evening.html`, `47-ritual-quick.html`**
- Active ritual flow
- Step progress at top showing current step
- Current step content fills the screen:
  - Mirror step: simplified journaling interface
  - Turn step: quick reframe input
  - Lens step: affirmation display or goal check-in
- "Next Step" button at bottom
- Timer running in header

**Screen 48: `48-ritual-complete.html`**
- Celebration screen
- Prismatic kaleidoscope animation (success burst)
- "Ritual Complete" heading
- Stats: time taken, steps completed, streak count
- Evidence Wall tile preview: "New tile earned!"
- CTA: "Done" returns to Turn Home

**Screen 49: `49-ritual-streak.html`**
- Nav header: "Ritual Streak"
- Calendar view (week by week) with amber-filled completed days
- Current streak count (large display number)
- Longest streak record
- Heat map of ritual completion times

---

### Spectrum (Screens 50–57) → `screens/spectrum/`

**Screen 50: `50-spectrum-dashboard.html`**
- Nav header: "Spectrum" with Prism badge
- 5 preview cards linking to each visualization:
  - The River (prismatic flowing band)
  - Your Glass (radar chart thumbnail)
  - Turn Impact (before/after bars)
  - Rhythm Detection (bubble chart)
  - Growth Trajectory (line chart)
- Time range selector: Week / Month / All Time
- Overall insight card with AI-generated summary

**Screens 51–55:** Each is a full-screen visualization detail
- **51: `51-spectrum-river.html`** — Flowing prismatic band showing emotional patterns over time, with fragment data points
- **52: `52-spectrum-glass.html`** — Radar/spider chart showing balance across features
- **53: `53-spectrum-impact.html`** — Before/after bar pairs showing Turn effectiveness. Ruby (before) → Emerald (after)
- **54: `54-spectrum-rhythm.html`** — Time-of-day bubble chart showing when user is most active/reflective
- **55: `55-spectrum-growth.html`** — Line chart with fragment data points and milestone markers

**Screens 56–57: Summaries**
- **56: `56-spectrum-weekly.html`** — AI-generated weekly summary with key metrics, top distortions, recommended actions
- **57: `57-spectrum-monthly.html`** — Deeper monthly analysis with trend arrows, comparison to previous month, growth areas

---

### Modals & System (Screens 58–64) → `screens/modals/` and `screens/system-states/`

**Screen 58: `58-upgrade-modal.html`**
- `.modal-overlay.centered` + `.modal-card`
- Prismatic gradient border on card
- "Unlock Kalei Prism" heading
- Feature preview (3 key benefits)
- Price: "$7.99/month"
- "Start Free Trial" primary button
- "Maybe Later" ghost button

**Screen 59: `59-rate-limit.html`**
- Toast or inline card showing: "You've used your free turns for today"
- Upgrade CTA
- Timer showing when limit resets

**Screen 60: `60-crisis-response.html`**
- Full-screen safety response
- Ruby accent throughout
- "We're here for you" heading
- Crisis hotline numbers (988 Suicide & Crisis Lifeline, Crisis Text Line: text HOME to 741741)
- "Talk to someone now" button (ruby primary)
- "I'm okay, continue" secondary option
- Breathing exercise link

**Screen 61: `61-pattern-share.html`**
- Share sheet modal
- Pattern card preview (how it'll look when shared)
- Share targets: Copy Link, Messages, More...
- Generated image: kaleidoscope pattern + thought + app branding

**Screen 62: `62-notification-settings.html`**
- Nav header: "Notifications"
- Toggle rows for each notification type:
  - Daily Ritual Reminder
  - Mirror Check-in
  - Weekly Spectrum Summary
  - Streak Alerts
  - Goal Check-In Reminders (Guide)
  - Daily Attention Prompts (Guide)
  - Weekly Pulse (Guide)
- Time picker for reminder times

**Screen 63: `63-data-export.html`**
- Nav header: "Export Your Data"
- Explanation of what gets exported
- Format options: JSON, PDF summary
- "Export Data" primary button
- Processing state with loading animation

**Screen 64: `64-account-deletion.html`**
- Nav header: "Delete Account"
- Warning card (ruby border)
- Explanation of what gets deleted (irreversible)
- Confirmation text input: "Type DELETE to confirm"
- "Delete My Account" button (ruby, disabled until confirmed)
- "Cancel" ghost button

---

## 12. Evidence Wall — Detailed Build Spec

The Evidence Wall is Kalei's mastery tracking mosaic. Tiles are earned through activities and form a growing visual tapestry.

### Tile Types

| Type | Shape | Earned From | Color |
|------|-------|------------|-------|
| Diamond | ◇ | Completing a Turn | Amethyst |
| Hexagon | ⬡ | Mirror session | Amber |
| Circle | ● | Lens goal milestone | Emerald |
| Rectangle | ▭ | Ritual completion | Sapphire |
| Triangle | △ | Streak achievement | Rose |

### States

- **Screen 39 (Empty):** Ghost tile outlines with dashed borders, CTA "Complete your first Turn to earn a tile"
- **Screen 40 (Early, 3–5 tiles):** Tiles placed with gaps, faint connection lines between them
- **Screen 41 (Mid, 10–15 tiles):** Denser arrangement, connection web forming, pattern emerging
- **Screen 42 (Full, 20+ tiles):** Rich mosaic with glowing connections, celebration state
- **Screen 43 (Tile Detail):** Tap a tile → half-sheet showing: tile type, date earned, source activity, related thought/goal

### Layout Algorithm (CSS Grid)

```css
.evidence-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 16px;
}
.evidence-tile {
  aspect-ratio: 1;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  position: relative;
}
/* Some tiles span 2 columns or rows for visual interest */
.evidence-tile.wide { grid-column: span 2; aspect-ratio: 2/1; }
.evidence-tile.tall { grid-row: span 2; aspect-ratio: 1/2; }
```

---

## 13. The Guide — Active Coaching Layer Build Spec

The Guide is an intelligence layer that surfaces across all features through cards, conversations, and flows. It has its own screen folder (`screens/guide/`) plus enhancements to existing screens (Turn Results and Mirror Reflection).

### Guide Visual Identity

All Guide surfaces share a distinctive **prismatic gradient border** — a thin 1px border that cycles through all jewel tones (amethyst → sapphire → emerald → amber). This signals "the Guide is connecting something" and distinguishes it from feature-specific UI.

```css
.guide-border {
  border: 1px solid transparent;
  background-clip: padding-box;
  position: relative;
}
.guide-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--amethyst), var(--sapphire), var(--emerald), var(--amber));
  z-index: -1;
}
```

Guide icon: faceted diamond ◇ with a subtle directional pulse animation.

---

### Guide Screens (65–76) → `screens/guide/`

**Screen 65: `65-guide-checkin-conversation.html`**
- Shows within Lens goal detail context (include goal header at top)
- Chat interface below: Guide messages in cards with prismatic border, user messages in dark bubbles
- Guide opens with evidence-first message: "You completed X of Y planned sessions. That's Z% follow-through."
- Then asks about specific obstacle/milestone
- User response bubble (mock text)
- Guide follows up with if-then plan review and adjustment suggestion
- Closes with Evidence Wall proof point
- At bottom: text input area with send button
- Link to "Past check-ins" history

**Screen 66: `66-guide-checkin-summary.html`**
- Nav header: "Check-In Summary" with back arrow
- Summary card with prismatic border:
  - What was reviewed (goal name, time period)
  - Plan adjustments made (if-then plan old → new, amber highlight on changes)
  - Evidence highlighted (2-3 proof points with jewel-tone accent dots)
  - Next check-in date
- Footer: "Saved to your coaching history"

**Screen 67: `67-guide-bridge-discovery.html`**
- Shows the Turn Home screen as base (screen 10 layout)
- At top (below nav, above normal content): half-height bridge card
- Prismatic gradient border
- Header text: "◇ Something keeps coming up"
- Body: "Work has been on your mind — 4 Mirror sessions and 2 Turns this week. Want to focus that energy?" (with "4 Mirror sessions" and "2 Turns" in amber bold)
- CTAs: "Open Lens" (emerald primary) + "Just noticing" (ghost)
- The card should feel dismissible (X in top-right or swipe hint)

**Screen 68: `68-guide-bridge-reinforcement.html`**
- Shows the Lens Dashboard as base (screen 20 layout)
- At top: half-height bridge card with prismatic border
- Header: "◇ This connects to something you're building"
- Body references user's Turns linking to active goal: "Your last 2 Turns were about public speaking anxiety. Your Lens goal 'Present with confidence' has a Rehearsal ready."
- CTAs: "Start Rehearsal" (emerald primary) + "Not now" (ghost)

**Screen 69: `69-guide-bridge-integration.html`**
- Shows the Mirror Session screen as base (screen 16 layout — end of session)
- Integration bridge card appears after last message
- Prismatic border
- Header: "◇ You've seen this differently before"
- Shows quoted keepsake: *"One rough meeting doesn't define my skills"* (sapphire italic)
- Below: current session quote that contradicts it (amber italic)
- Body: "Both views are real. Which one has more evidence?"
- CTAs: "See your Evidence Wall" (amethyst primary) + "Continue writing" (ghost)

**Screen 70: `70-guide-attention-prompt.html`**
- Shows Lens Dashboard as base (screen 20 layout)
- Below active goals, a card with emerald accent border:
- Header: "Today's Focus: Notice"
- Body: "Today, notice one moment where you feel physically energized — even briefly. Walking up stairs easily, finishing a task with energy left. Just notice."
- Footer (dimmed): "For your goal: Run a 5K without stopping"
- CTA: "Got it" (emerald primary)
- Below CTA (initially hidden, revealed later in day): "Log a moment" (secondary)

**Screen 71: `71-guide-moment-log.html`**
- Nav header: "Log a Moment" with back arrow
- Reminder card: "Today's prompt was: Notice one moment of physical energy"
- Text input area (multiline, 3 rows)
- Below: mock logged entry: "After lunch I felt like taking the stairs instead of the elevator."
- Confirmation card: "That's evidence. Your body is changing and you're starting to notice. Added to your Evidence Wall."
- New Evidence Wall tile preview (emerald hexagon glow animation)

**Screen 72: `72-guide-evidence-mirror.html`**
- Shows Mirror Reflection screen as base (screen 19 layout)
- Below normal reflection content: additional card with prismatic border
- Header: "◇ Here's what I've seen"
- Body: "You said you're not a follow-through person. Your evidence says differently:"
- 3 numbered proof points:
  1. "18 of 22 planned training sessions completed (82%)" — emerald dot
  2. "14-day Mirror streak — active right now" — amber dot
  3. "All 5 micro-actions for your reading goal completed last month" — sapphire dot
- CTA: "See your full Evidence Wall" (amethyst primary) + Dismiss (ghost)

**Screen 73: `73-guide-evidence-turn.html`**
- Shows Turn Results screen as base (screen 13 layout)
- Below the 3 reframe cards, above action buttons: evidence intervention card
- Prismatic border
- Header: "◇ Here's what I've seen"
- Body: "This thought — doubting your capability — has come up before. Last time you Turned it, you saved this:" (shows quoted keepsake)
- Below: "Since then, you've completed 4 of 5 planned actions."
- No explicit CTA — integrates naturally into the Turn results flow

**Screen 74: `74-guide-pulse-report.html`**
- Full-screen flow (no tab bar — immersive like Ritual)
- Step indicator: "Step 1 of 3" at top
- Header: "Your Weekly Pulse"
- Subheader: "How did this week feel?"
- 5-point fragment scale (horizontal row of SVG diamonds):
  - Each at different opacity/glow level (dim cracked → brilliant faceted)
  - Labels below each: "Rough" / "Harder than usual" / "Steady" / "Good momentum" / "Breakthrough week"
  - Third one (Steady) shown as selected with amber glow
- Below: optional write-in text field: "If you want to say more..."
- CTA: "Next" at bottom

**Screen 75: `75-guide-pulse-read.html`**
- Full-screen flow continuation (Step 2 of 3)
- Header: "Here's what I noticed this week"
- 4-5 observation items, each with jewel-tone accent dot:
  - "4 Turns — all work-related. That's a theme." (amethyst dot)
  - "Mirror sessions showed increasing agency through the week" (amber dot)
  - "3 of 4 planned actions completed on your 5K goal" (emerald dot)
  - "Catastrophizing frequency dropped for the second week in a row" (sapphire dot)
- Highlighted callout card (subtle amber background):
  - "You said this was a rough week, but your data shows progress on two fronts. Sometimes the feeling lags behind the evidence."
- CTA: "Next" at bottom

**Screen 76: `76-guide-pulse-focus.html`**
- Full-screen flow completion (Step 3 of 3)
- Header: "For next week"
- 2-3 suggestion cards (each with emerald accent):
  - "Do a Rehearsal for your 5K — you haven't done one in 10 days" (Lens icon)
  - "Your Mirror streak is at 14 days — keep it going" (Mirror icon)
  - "Your rainy-day if-then plan hasn't been tested yet" (Turn icon)
- CTAs: "Sounds good" (emerald primary) + "Adjust" (ghost)
- Completion state: "Pulse complete. See you next week." + subtle prismatic flash

---

### Enhanced Existing Screens (Turn Results + Mirror Reflection)

**Screen 13 Enhancement (Turn Results):**

After the 3 reframe pattern cards and before action buttons, add two new elements:

1. **If-Then Micro-Action Card:**
   - Emerald accent border
   - Header: "◇ Make it real"
   - Format: "If [situation from the thought], then I will [specific action]"
   - CTA: "Save to Lens" (emerald) + "Skip" (ghost)

2. **Goal Connection Card** (conditional — only shows when Turn topic maps to active goal):
   - Small inline card, no border (just text)
   - "This connects to your goal: [goal title]"
   - CTA: "Check in on this goal" (text link)

**Screen 19 Enhancement (Mirror Reflection):**

After existing reflection content (themes, fragments, patterns, insight), add:

**"The Guide noticed..." section:**
- Prismatic-bordered card
- Header: "◇ The Guide noticed..."
- 1-2 cross-feature observations (e.g., "This week's Mirror themes align with your Lens goal about career growth" or "Your catastrophizing frequency is down 30% from last month")
- CTA appropriate to observation

---

## 13B. Reactive & Proactive AI Behavior Patterns

This section defines how Kalei's AI behaves **reactively** (responding to detected patterns) and **proactively** (surfacing content before the user asks). These behaviors are the connective tissue of the app — they make the features work as an integrated system, not isolated tools. Agent teams must understand this behavioral model to build mockups that feel alive and intelligent.

### The Core Problem

Without reactive behavior, Kalei is transactional: user opens feature → does thing → leaves. The science demands a **causal chain** — clear goal → attention bias → mental rehearsal → capability belief → if-then plans → habit formation → expectation reinforcement → expanded action. Reactive AI behavior is what drives users through that chain.

### The Manifestation Chain (How Features Connect)

This is the scientific model that all reactive behaviors serve:

```
Step 1: Name It → Mirror detects fragments, user becomes aware of thinking patterns
Step 2: See It → Lens sets a goal, The View creates the vision
Step 3: Believe It → Evidence Wall accumulates proof of capability
Step 4: Notice Differently → Attention Prompts train real-world noticing
Step 5: Act → If-Then micro-actions convert reframes into behavior
Step 6: Prepare → Rehearsal builds cognitive rehearsal of the process
Step 7: Compound → Ritual makes all of this automatic
Step 8: Understand → Spectrum reveals the full picture over time
```

The Guide is the intelligence layer that actively moves users through this chain by detecting where they are and what they need next.

---

### Reactive Behavior by Feature

#### Mirror — Reactive Fragment Detection

| Behavior | Trigger | Response | Frequency |
|----------|---------|----------|-----------|
| Fragment highlighting | User finishes typing a message | Subtle amber underline + ◇ icon on detected cognitive distortions (confidence > 0.75) | Every message |
| Inline reframe | User taps a highlighted fragment | Half-sheet card slides up with distortion name, reframe, Full Turn CTA | On demand |
| The Nudge | 5+ messages with zero taps AND significant negative patterns accumulating | One gentle prompt: "I noticed a few fragments. Want to look at them together?" | Once per session max |
| Session reflection | User closes Mirror or inactivity timeout | Generates The Mosaic (themes), Fragments Found (count), Patterns Revealed (engaged reframes), one-line insight | End of every session |
| Evidence intervention | AI detects self-efficacy dip in language (helplessness, capability doubt) | Evidence Wall card surfaces inline after session ends (Guide Pattern 4) | Max once per session |
| Integration bridge | Saved Turn reframe contradicts current Mirror writing | "You've seen this differently before" card with quoted keepsake (Guide Pattern 2) | Max once per day |

**Mockup representation:** Show the "detected" state — fragments already highlighted with amber glow and ◇ icons. For the nudge, show the prompt card at the bottom of a session with several unhighlighted messages above it.

#### Turn — Reactive Post-Reframe Actions

| Behavior | Trigger | Response | Frequency |
|----------|---------|----------|-----------|
| If-Then micro-action card | Every Turn completion | "Make it real" card with auto-generated if-then plan: "If [situation], then I will [action]" | Every Turn result |
| Goal connection card | Turn topic maps to an active Lens goal | Small inline text: "This connects to your goal: [title]" with check-in link | Conditional |
| Reframe style adaptation | Prism user selects a style (Stoic, Compassionate, etc.) | Reframes shift to selected perspective | Per Turn |
| Bridge trigger | 3+ Turns in 7 days share a theme NOT mapping to any goal | Discovery bridge appears on next Turn Home visit | Max once per day |

**Mockup representation:** Show Turn Results screen with the if-then micro-action card below the 3 reframe patterns, plus the goal connection text below that.

#### Lens — Proactive Goal Coaching

| Behavior | Trigger | Response | Frequency |
|----------|---------|----------|-----------|
| Scheduled check-in | User's chosen check-in time (default: weekly) | Goal check-in conversation opens within goal detail | Weekly per goal |
| Contextual check-in | Milestone date passed (completed or not), streak breaks, 3+ days no activity | Same check-in UI but triggered by event | As needed |
| Attention prompt | Daily at user's notification time | "Today's Focus: Notice" card in Lens tab | Once per day |
| Prompt chain progression | User progresses through manifestation chain | Prompt type evolves: Vision → Capability → Awareness → Action → Reflection | Automatic |
| Moment logging | User logs a noticed moment from an attention prompt | Confirmation + added to Evidence Wall as proof point | On demand |
| Reinforcement bridge | 3+ Mirror/Turn entries map to active goal | "This connects to something you're building" card with Rehearsal CTA | Max once per day |

**Attention Prompt Evolution Through the Chain:**

| Manifestation Step | Prompt Type | Example Mock Content |
|---|---|---|
| Step 2: See It | Vision prompt | "Picture yourself crossing that finish line. What are you wearing? Who's there?" |
| Step 3: Believe It | Capability prompt | "Think of the last time you pushed through something physical when you wanted to quit." |
| Step 4: Notice | Awareness prompt | "Today, notice one moment of physical strength or energy." |
| Step 5: Act | Action prompt | "Your if-then plan: 'If it's 6pm, put on running shoes.' How did it go?" |
| Step 6: Compound | Reflection prompt | "You've run 3 times this week. What's different about your mornings now?" |

**Mockup representation:** Show mid-chain state (Step 4: Notice) as the default, since it's the most common and most tangible.

#### Guide — 5 Proactive Patterns (Detection + Response)

**Pattern 1: Goal Check-Ins** — Conversational coaching within Lens

Detection triggers:
- Scheduled: user's chosen check-in cadence
- Milestone date passed (completed or missed)
- 3+ days no Lens activity on active goal
- Streak broken

Response rules:
1. Always start with what went well (evidence first, obstacles second)
2. Reference real data — specific numbers, dates, actions
3. Adjust if-then plans collaboratively based on what actually happened
4. Close every check-in with a concrete Evidence Wall proof point
5. Never shame — missing a day is data, not failure

**Pattern 2: Cross-Feature Bridges** — Connecting patterns across features

| Bridge Type | Trigger Condition | Card Header | Mock Example |
|---|---|---|---|
| Discovery | 3+ Mirror/Turn entries in 7 days share theme with NO matching goal | "◇ Something keeps coming up" | "Work has been on your mind — 4 Mirror sessions and 2 Turns this week." |
| Reinforcement | 3+ Mirror/Turn entries in 7 days share theme WITH matching goal | "◇ This connects to something you're building" | "Your last 2 Turns were about public speaking. Your goal 'Present with confidence' has a Rehearsal ready." |
| Integration | Saved Turn reframe contradicts current Mirror writing | "◇ You've seen this differently before" | Shows quoted keepsake vs. current statement, asks "Which has more evidence?" |

Rules: Never mid-stream in a session. Max one bridge per day. Always offer an exit. Use the user's own words.

**Pattern 3: Attention Prompts** — Daily micro-exercises

Detection: Daily timer at user's notification time
Response: One prompt per day, tied to active goal, progressing through the manifestation chain
Logging: Every noticed moment → Evidence Wall proof point

**Pattern 4: Evidence Interventions** — Proactive evidence surfacing during low moments

Detection signals (any 2+ in combination):

| Signal | Source | Detection Pattern |
|---|---|---|
| Helplessness language | Mirror | "I can never stick to anything" |
| Always/never frequency spike | Mirror/Turn | "Nothing I try ever works" |
| Capability doubt | Turn input | "I'm not the kind of person who..." |
| Goal abandonment behavior | Lens | 5+ days no activity on active goal |
| Streak break + no return | Ritual | Streak broken 3+ days ago, no Ritual since |
| Negative comparison | Mirror | "Everyone else seems to manage this" |

Response calibration: Select 2-3 specific, relevant proof points that directly counter the expressed doubt. Evidence, never cheerleading — numbers, dates, specific actions. Max once per session.

**Pattern 5: Weekly Pulse** — End-of-week feedback loop

Detection: Once per week at user's chosen time (default: Sunday evening)
Response: 3-step flow (< 90 seconds total):
1. Self-report (fragment-state 5-point scale)
2. AI read (4-5 specific observations with jewel-tone dots)
3. Next week's focus (2-3 actionable suggestions)

Key rule: When self-report and AI read diverge, name the gap gently: "You said this was rough, but your data shows progress on two fronts. Sometimes the feeling lags behind the evidence."

#### Spectrum — Proactive Insight Delivery

| Behavior | Trigger | Response | Timing |
|----------|---------|----------|--------|
| Weekly reflection | Sunday evening | "Your Spectrum updated. See what this week's light revealed." | Weekly |
| Monthly deep dive | First of each month | Month-over-month comparisons, rhythm detection, growth trajectory | Monthly |
| In-context nudge (Mirror) | Recurring pattern in current session | "You've used 'I should' 4 times this session. That's a pattern." | Max once per session |
| In-context nudge (Turn) | Post-Turn, topic matches tracked pattern | "This is the 3rd work-related fragment this week. The Spectrum can show more." | Max once per Turn |
| In-context nudge (Lens) | Lens goal aligns with processed fragments | "Your focus on career growth aligns with fragments you've been processing." | Max once per session |
| Growth pattern evolution | Monthly cumulative usage | Kaleidoscope pattern gains complexity and color range | Continuous |

**Mockup representation:** Show the weekly reflection notification state and one in-context nudge example.

#### Ritual — Context-Stability Tracking

| Behavior | Trigger | Response | Frequency |
|----------|---------|----------|-----------|
| Context stability feedback | 7+ days of consistent timing | "You've completed your Morning Ritual within the same 30-min window for 12 days. This is becoming automatic." | Weekly |
| Drift detection | Timing varies > 2 hours across week | "Your Ritual timing drifted this week. Consistency is the engine. Can we lock in a time?" | When detected |
| Evening ritual Guide step | Evening template reaches "Acknowledge" step | Guide-powered "What did you notice today?" logging | Daily |
| Morning ritual Guide step | Morning template starts | Today's attention prompt embedded in flow | Daily |

#### Evidence Wall — Contextual Surfacing

The Evidence Wall is primarily **passive storage** — it collects proof points automatically from all features. It becomes **active** only through the Guide's Evidence Interventions (Pattern 4). Without the Guide, the Evidence Wall just sits there. With the Guide, evidence becomes a coaching tool.

Auto-collected evidence types:

| Source | Evidence Type | Mock Data Example |
|---|---|---|
| Lens | Completed micro-actions | "Completed: 'Go for a 3km run' — Feb 18" |
| Turn | Saved keepsakes (turning points) | "Saved: 'One rough meeting doesn't define my skills' — Feb 12" |
| Mirror | Self-corrections (caught own fragment) | "Self-caught: identified catastrophizing before Kalei highlighted it — Feb 15" |
| Mirror | Reframe echoes (internalized language) | "Echo: language from saved Turn appeared in organic Mirror writing — Feb 20" |
| Ritual | Streak milestones | "14-day Morning Ritual streak — active" |
| Lens | Goal completions | "Completed goal: 'Read 2 books this month' — Feb 21" |
| Spectrum | Growth markers | "Fragment density dropped below 5/100 words — Feb 19" |

---

### Proactive AI Insight Card — Reusable Component

Many reactive behaviors surface through a shared UI pattern: the **Proactive AI Insight Card**. This is a reusable component distinct from feature-specific UI.

```html
<!-- Proactive AI Insight Card Template -->
<div class="ai-insight-card guide-border">
  <div class="ai-insight-header">
    <span class="fragment-icon">◇</span>
    <span class="ai-insight-title">[Header text]</span>
  </div>
  <div class="ai-insight-body">
    <p>[Observation text with <strong>key data</strong> in bold]</p>
  </div>
  <div class="ai-insight-actions">
    <button class="btn-primary btn-sm">[Primary CTA]</button>
    <button class="btn-ghost btn-sm">[Dismiss CTA]</button>
  </div>
</div>
```

```css
.ai-insight-card {
  background: var(--kalei-navy);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin: var(--space-3) 0;
}
.ai-insight-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.ai-insight-title {
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  color: var(--text-primary);
  letter-spacing: 0.02em;
}
.ai-insight-body {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}
.ai-insight-actions {
  display: flex;
  gap: var(--space-3);
}
```

This card is used for:
- Guide bridge cards (discovery, reinforcement, integration)
- Evidence intervention cards
- Spectrum in-context nudges
- Post-Turn goal connection suggestions
- Mirror session "The Guide noticed..." observations

The **prismatic gradient border** (via `.guide-border`) signals that the AI is actively connecting something. Feature-specific cards (Turn results, Lens goals) use their own feature color borders instead.

---

### Representing Reactive States in Static HTML Mockups

Since these are static HTML files, not a live app, here's how to represent each reactive state:

| Reactive Behavior | How to Show in Mockup |
|---|---|
| Fragment highlighting | Show 2-3 fragments already highlighted with amber glow + ◇ icon after user messages |
| The Nudge | Show the nudge card at screen bottom after 5+ messages with no highlights tapped |
| If-Then micro-action | Show the "Make it real" card below Turn results with a pre-filled if-then statement |
| Bridge card | Show as half-height card at top of screen (below nav), overlaying normal content |
| Evidence intervention | Show as card after Mirror/Turn content with 2-3 numbered proof points |
| Attention prompt | Show in Lens tab below goal cards as a daily focus card |
| Weekly Pulse | Show as 3-screen flow (self-report → AI read → focus) |
| Spectrum nudge | Show as small inline card within the feature where it appears |
| Context stability | Show as a text observation within Ritual completion screen |
| Goal check-in | Show as chat-like conversation within goal detail |

**Key principle:** Every reactive mockup should show the **"detected and responded" state** — the moment when the AI has already identified the pattern and is presenting its response. Don't show "loading" or "detecting" states unless that's the specific screen's purpose (like the Turn animation screen).

**Data continuity:** Reactive features reference data from multiple features. Ensure mock data is cross-referenced:
- If an Evidence intervention quotes "18 of 22 sessions," the Evidence Wall screen should show the same stat
- If a bridge card says "4 Mirror sessions this week," the Mirror Home screen should show a matching session count
- If the Weekly Pulse says "catastrophizing dropped," the Spectrum screens should reflect the same trend

---

## 14. Monetization & Rate Limiting UI

### Free Tier (Kalei)
- 3 Turns/day, 1 Mirror session/day, 3 Lens goals max
- No Spectrum access
- Basic Ritual templates only
- Guide: Discovery bridges only, 1 check-in/month/goal, 3 attention prompts/week, self-report Pulse only

### Prism Tier ($7.99/month)
- Unlimited Turns & Mirror sessions + if-then micro-action cards on Turn results
- Unlimited goals + weekly check-ins + daily attention prompts
- Full Spectrum access
- Advanced Ritual customization
- Full Guide: All 5 patterns (check-ins, all bridges, daily prompts, evidence interventions, full Pulse)
- Priority AI processing

### UI Implications
- Show `Prism` badge (prismatic gradient chip) next to premium features
- When rate-limited: inline card with count remaining, upgrade CTA
- Subscription screen: comparison table with checkmarks

---

## 15. Polish & Visual Quality Standards

This section defines the quality bar for "polished" screens. Every screen should meet these standards before being considered complete.

### 15.1 Visual Refinement Principles

| Principle | Implementation |
|-----------|---------------|
| **Anti-aliased text** | `body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }` |
| **Consistent surface depth** | Cards float above background (navy on void). Inputs are recessed (deep-glass). Modals are elevated (navy with twilight border). |
| **Breathing life** | Every screen with decorative elements should include at least one breathing animation (6s cycle) |
| **Glow, not shadow** | All interactive highlights use `box-shadow: 0 0 Npx rgba(color, 0.2-0.3)`. No `filter: drop-shadow` on UI elements. |
| **Jewel tone gradients on fragments** | Fragment diamonds always use gradient fills (light → dark stops), never flat colors. Include the specular highlight (white overlay on top-right facet). |
| **Micro-interactions** | Buttons have hover (slight lighten) and active (slight darken) states. Cards have hover (border color shift or subtle glow). |
| **Smooth transitions** | All state changes use CSS transitions: `transition: all 0.2s ease-out` minimum. |
| **Content hierarchy** | Every screen has exactly one primary heading, one primary CTA, and a clear visual flow from top to bottom. |

### 15.2 Spacing & Layout Standards

| Element | Spacing Rule |
|---------|-------------|
| Screen content padding | `var(--space-4)` (16px) horizontal |
| Section spacing | `var(--space-8)` (32px) between major sections |
| Card internal padding | `var(--space-4)` (16px) standard, `var(--space-3)` (12px) compact |
| Between cards in a list | `var(--space-3)` (12px) |
| Between label and content | `var(--space-2)` (8px) |
| Between icon and text | `var(--space-2)` (8px) |
| Status bar to content | Automatic via `.status-bar` height |
| Content to tab bar | Automatic via `.screen-content` flex |

### 15.3 Animation Standards

| Animation | Duration | Easing | Trigger |
|-----------|----------|--------|---------|
| Breathing (decorative) | 6s | ease-in-out infinite | Always running on decorative elements |
| Fade in (content) | 0.3s | ease-out | On screen load or content reveal |
| Slide up (modals/sheets) | 0.35s | ease-out | Modal present |
| Button press | 0.15s | ease-out | Active state |
| Focus ring | 0.2s | ease-out | Input focus |
| Turn animation (full) | 1.5s total | dramatic ease-in-out | Submit trigger |
| Fragment highlight | 0.4s | gentle ease-out | AI detection |
| Toast appear | 0.3s | ease-out | Event trigger |

```css
/* Standard breathing animation — include in every screen that has decorative elements */
@keyframes breathing {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* Standard fade in — for content appearing on load */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pulse for fragments */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(245, 158, 11, 0.3); }
  50% { box-shadow: 0 0 20px rgba(245, 158, 11, 0.5); }
}
```

### 15.4 Border & Divider Standards

- Card borders: `1px solid var(--twilight)` — subtle, never heavy
- Section dividers: `1px solid var(--twilight)` with `var(--space-6)` margin above and below
- Active/focus borders: feature color (e.g., `1px solid var(--amethyst)` for Turn-related inputs)
- Guide borders: prismatic gradient via `::before` pseudo-element
- **No solid white borders anywhere** — always use twilight or translucent jewel tones

---

## 16. Mock Data Guidelines

All mock data in screens should be realistic, emotionally appropriate, and consistent across related screens.

### 16.1 User Profile

Use this consistent mock user across all screens:
- **Name:** Alex (gender-neutral)
- **Member since:** January 2026
- **Coaching style:** Compassionate Friend
- **Subscription:** Free tier (show upgrade prompts where appropriate)

### 16.2 Thought Content

Mock thoughts and reframes should be:
- **Realistic** — things real people actually think, not textbook examples
- **Moderate emotional weight** — not trivial ("I lost my pen") and not crisis-level ("I want to end it")
- **Varied** — cover work stress, relationships, self-doubt, productivity, social anxiety
- **Consistent** — the same thought referenced in Turn History should match Turn Results

**Sample thoughts for mockups:**
- "I completely bombed my presentation today and everyone saw"
- "My friend didn't reply to my message. They must be upset with me."
- "I'm never going to be good enough for this promotion"
- "Everyone else seems to have it figured out except me"
- "I should be further along in life by now"

**Sample reframes:**
- Perspective Shift: "One presentation doesn't define your capability. What went well that you're overlooking?"
- Evidence Check: "Think of three presentations you've done well. The evidence contradicts 'always bombing it.'"
- Action Step: "Before your next presentation, rehearse the opening 3 times. Preparation builds confidence."

### 16.3 Date & Time Consistency

- Use **February 2026** as the current month
- Status bar always shows **9:41** (Apple convention)
- Recent activity dates: Feb 20, Feb 19, Feb 18, etc.
- Streak counts: 14 days (Mirror), 7 days (Ritual)
- Goal timelines: 30-day goals with realistic progress (60–80% complete)

### 16.4 Statistics

- Total Turns: 47
- Mirror Sessions: 23
- Goals Completed: 2 of 5
- Streak Days: 14
- Top Distortion: Catastrophizing (34% of fragments)
- Second Distortion: Black-and-White Thinking (22%)

### 16.5 Voice & Tone in Mock Content

Follow the Kalei brand voice strictly in all AI-generated mock text:

| Do | Don't |
|----|-------|
| "Let's see what this looks like from another angle." | "Let's turn that frown upside down!" |
| "There it is. A pattern worth keeping." | "Amazing job! You're so strong!" |
| "Still here. Ready when you are." | "We miss you! Come back!" |
| "Fragment detected" | "Negative thought identified" |
| "Your Turn" | "Your reframe" |
| "Your Gallery" | "Your history" |
| "Prism" | "Premium" or "Pro" |

**Words to avoid in ALL mockup text:**
- "Fix," "heal," "transform," "positive vibes," "journey," "self-care"
- "Unlock your potential," "you've got this!"
- Any exclamation marks in regular UI text (only for milestone celebrations, max 1 per message)

---

## 17. Accessibility Standards

Every screen must meet these accessibility requirements:

### 17.1 Visual Accessibility

- **Contrast ratios:** All text meets WCAG 2.1 AA minimum (4.5:1 normal text, 3:1 large text)
- **Color is never the only indicator:** Fragment highlights use underline + icon + color. Success/error uses icon + color + text.
- **Touch targets:** Minimum 44×44px for all interactive elements
- **No native emoji anywhere** — use geometric SVG abstractions for mood indicators

### 17.2 Motion Accessibility

Include this comment in every screen's `<style>` block for awareness (actual implementation will be in the production app):

```css
/* Respect "Reduce Motion" — in production, wrap animations in:
   @media (prefers-reduced-motion: reduce) { .animated { animation: none; } }
*/
```

### 17.3 Semantic Structure

- Use proper heading hierarchy (`h1` > `h2` > `h3`, no skipping levels)
- Buttons should be `<button>` elements, not styled `<div>`s
- Links should be `<a>` elements with meaningful `href` values
- Form inputs should have associated `<label>` elements
- Images/SVGs should have `aria-label` or `role="img"` with descriptive text

---

## 18. Cross-Screen Consistency Protocol

When working on multiple screens, ensure these elements are **identical** across all instances:

### 18.1 Chrome Elements (must match exactly)

| Element | Rule |
|---------|------|
| **Status bar** | Identical SVG markup across all screens. Time: 9:41. Battery: green. |
| **Tab bar** | Identical SVG icons, labels, and structure. Only `active`/`inactive` class changes. |
| **Nav header** | Same height, same back chevron SVG, same centered title styling. |
| **Device frame** | 390×844px, same corner radius, same background. |

### 18.2 Shared Components (must match pattern)

| Component | Consistency Rule |
|-----------|-----------------|
| **Fragment ◇** | Same SVG path (`M12 2L20 12L12 22L4 12Z`), same gradient structure, same specular highlight |
| **Cards** | Same border radius (16px), same background (`--kalei-navy`), same border style (`1px solid --twilight`) |
| **Buttons** | Same heights (52px primary, 44px secondary), same radius (12px/10px), same text styling |
| **Chips/Tags** | Same height (32px), same pill radius, same background (`--deep-glass`) |
| **Section headers** | Same `.label` styling (11px, 500 weight, 0.05em spacing, uppercase) |
| **Breathing auras** | Same animation timing (6s), same filter blur (40–60px), same opacity range |

### 18.3 Cross-Reference Checklist

When a screen references content from another screen, ensure consistency:

- Turn History (#14) cards should match the data shown in Turn Results (#13)
- Gallery All (#31) pattern cards should match Gallery Detail (#33)
- Mirror Home (#15) recent sessions should match Mirror Session (#16) content
- You Profile (#35) stats should match You Stats (#36) data
- Evidence Wall states (#39–42) should show progression using the same tile designs
- Guide bridge screens (#67–69) should accurately reproduce the base screen layouts they overlay

---

## 19. Build Order — Priority Sequence

Build screens in this order, which follows the user journey and ensures shared components are established first:

### Phase 1: Foundation (build first)
1. `01-splash.html` — establishes breathing logo animation
2. `02-welcome.html` — establishes onboarding layout + hero pattern
3. `10-turn-home.html` — establishes tab bar + greeting + card layout
4. `13-turn-results.html` — establishes reframe blocks + distortion chips

### Phase 2: Core Loop
5. `03-fragment-intro.html`
6. `04-turn-demo.html`
7. `05-style-selection.html`
8. `06-notifications.html`
9. `07-account-creation.html`
10. `08-first-turn.html`
11. `09-welcome-complete.html`
12. `11-turn-input-active.html`
13. `12-turn-animation.html`
14. `14-turn-history.html`

### Phase 3: Mirror Feature
15. `15-mirror-home.html`
16. `16-mirror-session.html`
17. `17-mirror-fragment-highlight.html`
18. `18-mirror-fragment-detail.html`
19. `19-mirror-reflection.html`

### Phase 4: Lens + Rehearsal
20. `20-lens-dashboard.html`
21. `21-lens-create-step1.html` through `26-lens-create-step6.html`
22. `27-lens-goal-detail.html`
23. `28-lens-affirmation.html`
24. `29-rehearsal-session.html`
25. `30-rehearsal-complete.html`

### Phase 5: Gallery + You
26. `31-gallery-all.html`
27. `32-gallery-keepsakes.html`
28. `33-gallery-detail.html`
29. `34-gallery-search.html`
30. `35-you-profile.html`
31. `36-you-stats.html`
32. `37-you-settings.html`
33. `38-you-subscription.html`

### Phase 6: Evidence Wall + Ritual
34. `39-evidence-wall-empty.html`
35. `40-evidence-wall-early.html`
36. `41-evidence-wall-mid.html`
37. `42-evidence-wall-full.html`
38. `43-evidence-wall-detail.html`
39. `44-ritual-templates.html`
40. `45-ritual-morning.html`
41. `46-ritual-evening.html`
42. `47-ritual-quick.html`
43. `48-ritual-complete.html`
44. `49-ritual-streak.html`

### Phase 7: Spectrum (Phase 2)
45. `50-spectrum-dashboard.html`
46. `51-spectrum-river.html`
47. `52-spectrum-glass.html`
48. `53-spectrum-impact.html`
49. `54-spectrum-rhythm.html`
50. `55-spectrum-growth.html`
51. `56-spectrum-weekly.html`
52. `57-spectrum-monthly.html`

### Phase 7B: The Guide (Active Coaching Layer)
53. `65-guide-checkin-conversation.html`
54. `66-guide-checkin-summary.html`
55. `67-guide-bridge-discovery.html`
56. `68-guide-bridge-reinforcement.html`
57. `69-guide-bridge-integration.html`
58. `70-guide-attention-prompt.html`
59. `71-guide-moment-log.html`
60. `72-guide-evidence-mirror.html`
61. `73-guide-evidence-turn.html`
62. `74-guide-pulse-report.html`
63. `75-guide-pulse-read.html`
64. `76-guide-pulse-focus.html`
65. Update `13-turn-results.html` with if-then micro-action card + goal connection
66. Update `19-mirror-reflection.html` with Guide noticed section

### Phase 8: System & Modals
67. `58-upgrade-modal.html`
68. `59-rate-limit.html`
69. `60-crisis-response.html`
70. `61-pattern-share.html`
71. `62-notification-settings.html`
72. `63-data-export.html`
73. `64-account-deletion.html`

---

## 20. Agent Review Protocol

Every screen modification should be validated against this protocol before being considered complete.

### 20.1 Pre-Modification Checklist

Before touching a screen:
- [ ] Read this instructions file (at minimum: sections 1, 2, 5, 8, 15, 16, 17, 18)
- [ ] Read `design-system.css` to know available tokens
- [ ] Read the screen's current HTML fully
- [ ] Read at least one sibling screen (same feature group) for consistency reference
- [ ] Identify the screen's spec in Section 11

### 20.2 Post-Modification Quality Gates

After modifying a screen, verify ALL of these:

**Structure:**
- [ ] Device frame renders at exactly 390 × 844px with 44px rounded corners
- [ ] Status bar shows 9:41, signal bars, wifi icon, green battery (unless splash screen)
- [ ] Tab bar (if present) has correct active tab with feature color
- [ ] Nav header (if present) has back chevron and centered title
- [ ] Content doesn't overflow the device frame vertically
- [ ] Scrollable areas have hidden scrollbars

**Design System Compliance:**
- [ ] All colors use CSS custom properties (`var(--amethyst)`, not `#8B5CF6`)
- [ ] All text uses design system typography classes (no raw `font-size` declarations)
- [ ] All spacing uses design system tokens (`var(--space-4)`, not `16px`)
- [ ] All radii use design system tokens (`var(--radius-lg)`, not `12px`)
- [ ] Buttons follow the component system (`.btn-primary`, `.btn-secondary`, `.btn-ghost`)

**Visual Polish:**
- [ ] Fragment diamonds use gradient fills with specular highlight
- [ ] Glow effects use `box-shadow` with color at 0.2–0.3 opacity
- [ ] Breathing animations use 6s `ease-in-out infinite` cycle
- [ ] No native emoji anywhere — geometric SVG abstractions only
- [ ] Cards have `--kalei-navy` background with `--twilight` borders
- [ ] Interactive elements have hover/active states
- [ ] Transitions use minimum `0.2s ease-out`
- [ ] Text rendering uses `-webkit-font-smoothing: antialiased`

**Content:**
- [ ] Mock data uses "Alex" as user name
- [ ] Dates are in February 2026
- [ ] Brand voice is correct (no "fix," "heal," "journey," etc.)
- [ ] Sentence case used throughout (not Title Case)
- [ ] No exclamation marks in regular UI text

**Self-Containment:**
- [ ] All SVGs are inlined (no broken external image references)
- [ ] CSS link points to `../../assets/design-system.css` (correct relative path)
- [ ] No CDN dependencies except Google Fonts (loaded by design-system.css)
- [ ] File opens correctly in browser without a server
- [ ] Links between screens use correct relative paths (`../feature/filename.html`)

---

## 21. Key Documents to Read

Read these documents in this order for full context:

1. **This file** — you're here
2. **`assets/ASSET-INDEX.md`** — what SVG elements exist and how to use them
3. **`assets/design-system.css`** — all tokens, components, utilities, animations
4. **`docs/product/kalei-complete-user-journey.md`** — every screen described in narrative detail
5. **`docs/product/kalei-complete-design.md`** — feature specs, interactions, flows, scientific basis
6. **`docs/brand/kalei-brand-guidelines.md`** — voice, tone, colors, typography, motion, accessibility (18 sections)
7. **`docs/brand/kalei-brand-metaphor.md`** — kaleidoscope metaphor, vocabulary, emotional framework
8. **`docs/product/kalei-mirror-feature.md`** — Mirror deep dive: fragment detection, session flow, reflection
9. **`docs/product/kalei-spectrum-phase2.md`** — Spectrum analytics: 5 visualization types, weekly/monthly summaries
10. **`docs/technical/kalei-user-journey-technical-map.md`** — API endpoints, DB schemas, component tree (for realistic mock data)
11. **`docs/technical/kalei-system-architecture-plan.md`** — Tech stack, AI model routing, billing, services
12. **`docs/technical/kalei-infrastructure-plan.md`** — Server specs, AI cost model ($0.26/MTok DeepSeek, $1.00/MTok Haiku)
13. **`logo-mockups/finalists/soft-elegance-final.svg`** — the visual DNA source

---

*Built for Kalei — Same pieces. New angle.*
