Deploy Epic Errands V1 private Space

.gitattributes

@@ -33,3 +33,11 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-hero-1-finish-class-project-8f64eeb3.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-hero-2-read-for-20-minutes-895e7642.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-hero-3-put-away-laundry-083482db.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/sc2-hero-illustration.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/sc2-hero-scene-clean.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/sc2-hero-scene-only.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/source-sc1.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/source-sc2.png filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,13 +1,77 @@
 ---
-title: Epic Errands
-emoji: 📚
-colorFrom: red
-colorTo: indigo
+title: Epic Errands V1 Mobile Review
+emoji: 🧭
+colorFrom: blue
+colorTo: purple
 sdk: gradio
 sdk_version: 6.18.0
-python_version: '3.13'
 app_file: app.py
 pinned: false
+license: mit
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Epic Errands V1 Mobile Review
+
+This Space package runs a hi-fi mobile review prototype for Epic Errands V1.
+The visible product surface is a fully-custom mobile UI served at `/` by
+`gradio.Server`. Gradio remains the HF Space-compatible server and API layer;
+the public app is not a `gr.HTML` island inside `gr.Blocks`.
+
+The prototype includes:
+
+- Home, Parent Goals, Kid Goals, and disabled DIY Lab navigation.
+- Classroom, Magical, and Comic style switching.
+- Theme-based parent/kid titles such as Chief Wizard and Junior Wizard.
+- Kid completion state separated from parent approval/reward state.
+- Parent approve-only reward flow.
+- Disabled V1.1 audio hook.
+- Session-only avatar note.
+
+## Runtime Honesty
+
+Current review-prototype package mode:
+
+```text
+lifecycle_stage=testing
+app_host=local or hf_space
+model_runtime=none
+model_backend=static_review_asset
+inference_engine=none
+model_artifact_format=png
+quantization=none
+model_id=none
+fallback_used=true
+```
+
+The visible hero images are cached review assets. This Space does not claim live
+image generation, generated audio, sponsor-model proof, or judge-ready status.
+
+Future live image generation may use:
+
+```text
+APP_MODAL_BASE_URL
+APP_MODAL_AUTH_TOKEN
+APP_MODAL_TIMEOUT_SECONDS
+```
+
+Secret values must be configured as HF Space secrets/variables and must never
+be committed.
+
+## Local Run
+
+```bash
+python3 app.py
+```
+
+Main routes:
+
+- `/`: custom mobile app shell.
+- `/frontend/...`: static CSS and JS.
+- `/assets/...`: static review images.
+- `/health`: hosted smoke endpoint.
+- `/api/bootstrap` and `/api/quest-pack`: lightweight JSON endpoints with
+  inline image data stripped.
+
+Future FLUX, HF Inference, Modal, or other image-generation paths should be
+added behind `epic_errands_space/adapters.py` and must keep provenance visible
+in the UI.

app.py

@@ -0,0 +1,122 @@
+from __future__ import annotations
+
+import os
+from pathlib import Path
+from typing import Any
+
+from fastapi import Body
+from fastapi.responses import FileResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
+from gradio import Server
+
+from epic_errands_space.quest_generation import (
+    build_initial_quest_pack,
+    build_quest_pack,
+)
+
+
+ROOT = Path(__file__).resolve().parent
+FRONTEND_ROOT = ROOT / "frontend"
+ASSETS_ROOT = FRONTEND_ROOT / "assets"
+
+
+def build_server() -> Server:
+    app = Server(
+        title="Epic Errands",
+        description="A fully-custom mobile UI served by a Gradio Server.",
+        docs_url=None,
+        redoc_url=None,
+    )
+
+    app.mount("/frontend", StaticFiles(directory=FRONTEND_ROOT), name="frontend")
+    app.mount("/assets", StaticFiles(directory=ASSETS_ROOT), name="assets")
+
+    @app.get("/")
+    async def homepage() -> FileResponse:
+        return FileResponse(FRONTEND_ROOT / "index.html")
+
+    @app.get("/health")
+    async def health() -> dict[str, str]:
+        return {
+            "status": "ok",
+            "app": "epic-errands",
+            "frontend": "fully-custom-ui",
+        }
+
+    @app.get("/api/bootstrap")
+    async def bootstrap() -> JSONResponse:
+        return JSONResponse(_strip_inline_media(build_initial_quest_pack()))
+
+    @app.post("/api/quest-pack")
+    async def quest_pack(payload: dict[str, Any] = Body(default_factory=dict)) -> JSONResponse:
+        return JSONResponse(_strip_inline_media(build_quest_pack(payload)))
+
+    @app.api(
+        name="generate-quest-pack",
+        description="Generate an Epic Errands quest pack with visible runtime provenance.",
+        queue=True,
+        api_visibility="public",
+    )
+    def generate_quest_pack(payload: dict[str, Any] | None = None) -> dict[str, Any]:
+        return _strip_inline_media(build_quest_pack(payload or {}))
+
+    return app
+
+
+def _strip_inline_media(pack: dict[str, Any]) -> dict[str, Any]:
+    """Keep API payloads lightweight; images are served as static assets."""
+    cleaned = dict(pack)
+    live_generation_enabled = os.environ.get("EPIC_ENABLE_LIVE_GENERATION") == "1"
+    runtime_metadata = cleaned.get("runtime_metadata")
+    if not live_generation_enabled:
+        runtime_metadata = _static_review_runtime_metadata()
+        cleaned["runtime_metadata"] = runtime_metadata
+        cleaned["fallback_used"] = True
+        cleaned["blocker"] = "Live generation is disabled for this review prototype."
+
+    cleaned["quests"] = [
+        _clean_quest(quest, runtime_metadata=runtime_metadata, static_review=not live_generation_enabled)
+        for quest in cleaned.get("quests", [])
+        if isinstance(quest, dict)
+    ]
+    return cleaned
+
+
+def _clean_quest(
+    quest: dict[str, Any],
+    *,
+    runtime_metadata: Any,
+    static_review: bool,
+) -> dict[str, Any]:
+    cleaned = {key: value for key, value in quest.items() if key != "hero_src"}
+    if static_review:
+        cleaned["image_origin"] = "static_review_asset"
+        cleaned["runtime_metadata"] = runtime_metadata
+    return cleaned
+
+
+def _static_review_runtime_metadata() -> dict[str, Any]:
+    return {
+        "lifecycle_stage": "testing" if os.environ.get("SPACE_ID") else "dev",
+        "app_host": "hf_space" if os.environ.get("SPACE_ID") else "local",
+        "model_runtime": "none",
+        "model_backend": "static_review_asset",
+        "inference_engine": "none",
+        "model_artifact_format": "png",
+        "quantization": "none",
+        "model_id": "none",
+        "latency_ms": 0,
+        "fallback_used": True,
+    }
+
+
+app = build_server()
+
+
+if __name__ == "__main__":
+    app.launch(
+        server_name=os.environ.get("HOST", "0.0.0.0"),
+        server_port=int(os.environ.get("PORT", "7860")),
+        footer_links=[],
+        show_error=True,
+    )

epic_errands_space/__init__.py

@@ -0,0 +1,19 @@
+"""Epic Errands Cozy Classroom Adventure Space package."""
+
+from .render import (
+    build_app_bootstrap_js,
+    build_app_css,
+    build_app_document,
+    build_app_head,
+    build_app_island,
+)
+from .quest_generation import build_quest_pack
+
+__all__ = [
+    "build_app_bootstrap_js",
+    "build_app_css",
+    "build_app_document",
+    "build_app_head",
+    "build_app_island",
+    "build_quest_pack",
+]

epic_errands_space/adapters.py

@@ -0,0 +1,42 @@
+from __future__ import annotations
+
+from abc import ABC, abstractmethod
+
+from .contracts import ImageRequest, ImageResult, RuntimeMetadata
+
+
+class ImageGenerationAdapter(ABC):
+    """Boundary for future FLUX/HF/Modal image generation backends."""
+
+    @abstractmethod
+    def generate_image(self, request: ImageRequest) -> ImageResult:
+        raise NotImplementedError
+
+
+class FixtureImageAdapter(ImageGenerationAdapter):
+    """Returns the source-crop fixture used by the deterministic dry run."""
+
+    def generate_image(self, request: ImageRequest) -> ImageResult:
+        return ImageResult(
+            asset_id="quest-hero-scene",
+            asset_path="frontend/assets/sc2-hero-scene-clean.png",
+            origin="source_crop",
+            prompt_summary=(
+                "Fixture art for a cozy classroom adventure bridge quest. "
+                "This is not runtime FLUX output."
+            ),
+            runtime_metadata=RuntimeMetadata(),
+        )
+
+
+class DeterministicFallbackAdapter(ImageGenerationAdapter):
+    """Safe fallback adapter used when a future model adapter is unavailable."""
+
+    def generate_image(self, request: ImageRequest) -> ImageResult:
+        return ImageResult(
+            asset_id="quest-hero-scene",
+            asset_path="frontend/assets/sc2-hero-scene-clean.png",
+            origin="deterministic_fallback",
+            prompt_summary=f"Fallback storybook bridge image for goal: {request.ordinary_goal}",
+            runtime_metadata=RuntimeMetadata(fallback_used=True),
+        )

epic_errands_space/contracts.py

@@ -0,0 +1,76 @@
+from __future__ import annotations
+
+from dataclasses import dataclass, field
+from typing import Literal
+
+
+Tone = Literal["cozy", "brave", "magical", "silly", "epic"]
+Mode = Literal["parent", "kid"]
+
+
+@dataclass(frozen=True)
+class RuntimeMetadata:
+    lifecycle_stage: str = "dev"
+    app_host: str = "local"
+    model_runtime: str = "none"
+    model_backend: str = "template"
+    inference_engine: str = "none"
+    model_artifact_format: str = "none"
+    quantization: str = "none"
+    model_id: str = "none"
+    latency_ms: int = 0
+    fallback_used: bool = True
+
+
+@dataclass(frozen=True)
+class GoalInput:
+    id: str
+    text: str
+    completed: bool = False
+
+
+@dataclass(frozen=True)
+class ImageRequest:
+    goal_id: str
+    ordinary_goal: str
+    tone: Tone
+    visual_direction: str = "cozy_classroom_adventure"
+
+
+@dataclass(frozen=True)
+class ImageResult:
+    asset_id: str
+    asset_path: str
+    origin: str
+    prompt_summary: str
+    runtime_metadata: RuntimeMetadata = field(default_factory=RuntimeMetadata)
+
+
+@dataclass(frozen=True)
+class QuestStep:
+    id: str
+    label: str
+    icon: str
+
+
+@dataclass(frozen=True)
+class QuestResult:
+    id: str
+    source_goal_id: str
+    title: str
+    subtitle: str
+    hero_asset_id: str
+    steps: list[QuestStep]
+    reward_label: str
+    reward_description: str
+    ordinary_goal: str
+    why_it_helps: str
+    runtime_metadata: RuntimeMetadata = field(default_factory=RuntimeMetadata)
+
+
+@dataclass
+class AppState:
+    mode: Mode = "parent"
+    tone: Tone = "cozy"
+    goals: list[GoalInput] = field(default_factory=list)
+    result: QuestResult | None = None

epic_errands_space/fixtures.py

@@ -0,0 +1,31 @@
+from __future__ import annotations
+
+from .contracts import GoalInput, QuestResult, QuestStep, RuntimeMetadata
+
+
+RUNTIME_METADATA = RuntimeMetadata()
+
+DEFAULT_GOALS = [
+    GoalInput(id="goal-1", text="Finish class project"),
+    GoalInput(id="goal-2", text="Read for 20 minutes"),
+    GoalInput(id="goal-3", text="Put away laundry"),
+]
+
+DEFAULT_QUEST = QuestResult(
+    id="quest-bridge-bright-ideas",
+    source_goal_id="goal-1",
+    title="Build the Bridge of Bright Ideas",
+    subtitle="Your quest today",
+    hero_asset_id="sc2-hero-scene-clean",
+    steps=[
+        QuestStep(id="step-1", label="Plan your ideas", icon="edit_note"),
+        QuestStep(id="step-2", label="Build your project", icon="construction"),
+        QuestStep(id="step-3", label="Check your work", icon="search"),
+        QuestStep(id="step-4", label="Share your masterpiece", icon="chat_bubble"),
+    ],
+    reward_label="Idea Builder",
+    reward_description="Reward earned after all steps are complete.",
+    ordinary_goal="Finish class project",
+    why_it_helps="Turns a school project into a clear sequence with a visible finish line.",
+    runtime_metadata=RUNTIME_METADATA,
+)

epic_errands_space/quest_generation.py

@@ -0,0 +1,367 @@
+from __future__ import annotations
+
+import base64
+from datetime import datetime, timezone
+import hashlib
+import json
+import mimetypes
+import os
+from pathlib import Path
+import re
+import time
+from typing import Any
+import urllib.error
+import urllib.request
+
+from .fixtures import DEFAULT_GOALS
+
+
+FRONTEND_ROOT = Path(__file__).resolve().parents[1] / "frontend"
+ASSETS_DIR = FRONTEND_ROOT / "assets"
+CACHE_MANIFEST = ASSETS_DIR / "generated-hero-manifest.json"
+FALLBACK_HERO = "sc2-hero-scene-clean.png"
+MODEL_ID = "black-forest-labs/FLUX.2-klein-9B"
+
+STEP_LIBRARY = {
+    "project": [
+        ("Plan your ideas", "edit_note"),
+        ("Build your project", "construction"),
+        ("Check your work", "search"),
+        ("Share your masterpiece", "chat_bubble"),
+    ],
+    "read": [
+        ("Find a cozy reading spot", "chair"),
+        ("Read the next pages", "menu_book"),
+        ("Collect three bright clues", "travel_explore"),
+        ("Tell someone the best part", "forum"),
+    ],
+    "laundry": [
+        ("Sort the tiny treasure piles", "inventory_2"),
+        ("Fold each cloth banner", "featured_seasonal_and_gifts"),
+        ("Deliver clothes to their homes", "home"),
+        ("Celebrate the tidy kingdom", "workspace_premium"),
+    ],
+    "default": [
+        ("Name the mission", "flag"),
+        ("Do the first brave bit", "bolt"),
+        ("Check what changed", "search"),
+        ("Mark the win", "workspace_premium"),
+    ],
+}
+
+
+def default_goal_payload() -> list[dict[str, str]]:
+    return [{"id": goal.id, "text": goal.text} for goal in DEFAULT_GOALS]
+
+
+def normalize_goals(raw_goals: Any) -> list[dict[str, str]]:
+    goals: list[dict[str, str]] = []
+    if isinstance(raw_goals, list):
+        for index, item in enumerate(raw_goals):
+            if not isinstance(item, dict):
+                continue
+            text = str(item.get("text") or "").strip()
+            if not text:
+                continue
+            goals.append({
+                "id": str(item.get("id") or f"goal-{index + 1}"),
+                "text": text,
+            })
+            if len(goals) == 3:
+                break
+
+    for fallback in default_goal_payload():
+        if len(goals) == 3:
+            break
+        if not any(goal["text"].casefold() == fallback["text"].casefold() for goal in goals):
+            goals.append(fallback)
+
+    return goals[:3]
+
+
+def generated_file_name(goal: dict[str, str], index: int) -> str:
+    slug = re.sub(r"[^a-z0-9]+", "-", goal["text"].lower()).strip("-")[:36] or f"goal-{index + 1}"
+    digest = hashlib.sha1(f"{goal['id']}:{goal['text']}".encode("utf-8")).hexdigest()[:8]
+    return f"generated-hero-{index + 1}-{slug}-{digest}.png"
+
+
+def _asset_to_data_uri(file_name: str) -> str:
+    path = ASSETS_DIR / file_name
+    mime_type = mimetypes.guess_type(path.name)[0] or "image/png"
+    return f"data:{mime_type};base64,{base64.b64encode(path.read_bytes()).decode('ascii')}"
+
+
+def _runtime_metadata(**overrides: Any) -> dict[str, Any]:
+    metadata = {
+        "lifecycle_stage": "testing" if os.environ.get("SPACE_ID") else "dev",
+        "app_host": "hf_space" if os.environ.get("SPACE_ID") else "local",
+        "model_runtime": "none",
+        "model_backend": "template",
+        "inference_engine": "none",
+        "model_artifact_format": "none",
+        "quantization": "none",
+        "model_id": "none",
+        "latency_ms": 0,
+        "fallback_used": True,
+    }
+    metadata.update(overrides)
+    return metadata
+
+
+def _step_key(goal_text: str) -> str:
+    lowered = goal_text.lower()
+    if "project" in lowered or "class" in lowered:
+        return "project"
+    if "read" in lowered or "book" in lowered:
+        return "read"
+    if "laundry" in lowered or "clothes" in lowered:
+        return "laundry"
+    return "default"
+
+
+def _quest_title(goal_text: str, tone: str) -> str:
+    lowered = goal_text.lower()
+    tone_word = {
+        "cozy": "Cozy",
+        "brave": "Brave",
+        "magical": "Magic",
+        "silly": "Silly",
+        "epic": "Epic",
+    }.get(tone, "Cozy")
+    if "project" in lowered or "class" in lowered:
+        return f"{tone_word} Bridge of Bright Ideas"
+    if "read" in lowered:
+        return f"{tone_word} Reading Lantern Quest"
+    if "laundry" in lowered or "clothes" in lowered:
+        return f"{tone_word} Laundry Kingdom Rescue"
+    return f"{tone_word} Quest for {goal_text[:28]}"
+
+
+def _why_it_helps(goal_text: str) -> str:
+    return (
+        "Keeps the ordinary goal visible for parents while giving the child a "
+        "small, story-shaped path to finish it."
+    )
+
+
+def _prompt_for_goal(goal: dict[str, str], tone: str) -> str:
+    return (
+        "A delightful storybook classroom adventure hero image for a children's "
+        "goal-planning app. Warm handcrafted illustration, cozy school supplies, "
+        "sunny classroom, gentle fantasy quest mood, no readable text, no UI, "
+        "kid-safe, expressive, polished. "
+        f"Tone: {tone}. Ordinary goal transformed visually: {goal['text']}."
+    )
+
+
+def _fallback_image_result(goal: dict[str, str], index: int, reason: str) -> dict[str, Any]:
+    return {
+        "goal_id": goal["id"],
+        "ordinary_goal": goal["text"],
+        "asset_name": FALLBACK_HERO,
+        "hero_src": _asset_to_data_uri(FALLBACK_HERO),
+        "origin": "deterministic_fallback",
+        "prompt_summary": f"Fallback classroom adventure image for goal: {goal['text']}",
+        "runtime_metadata": _runtime_metadata(
+            fallback_used=True,
+            fallback_reason=reason,
+        ),
+    }
+
+
+def _load_manifest() -> dict[str, Any]:
+    try:
+        return json.loads(CACHE_MANIFEST.read_text(encoding="utf-8"))
+    except (OSError, json.JSONDecodeError):
+        return {"items": []}
+
+
+def _write_manifest(items: list[dict[str, Any]], metadata: dict[str, Any]) -> None:
+    CACHE_MANIFEST.write_text(
+        json.dumps(
+            {
+                "generated_at": datetime.now(timezone.utc).isoformat(),
+                "model_id": MODEL_ID,
+                "items": items,
+                "runtime_metadata": metadata,
+            },
+            indent=2,
+            sort_keys=True,
+        )
+        + "\n",
+        encoding="utf-8",
+    )
+
+
+def _cached_images_for(goals: list[dict[str, str]]) -> list[dict[str, Any]] | None:
+    manifest = _load_manifest()
+    items = manifest.get("items")
+    if not isinstance(items, list) or len(items) < len(goals):
+        return None
+
+    by_goal = {
+        str(item.get("goal_id")): item
+        for item in items
+        if isinstance(item, dict) and item.get("goal_id") and item.get("asset_name")
+    }
+    results: list[dict[str, Any]] = []
+    for index, goal in enumerate(goals):
+        item = by_goal.get(goal["id"])
+        if not item:
+            return None
+        asset_name = str(item["asset_name"])
+        if not (ASSETS_DIR / asset_name).exists():
+            return None
+        results.append({
+            "goal_id": goal["id"],
+            "ordinary_goal": goal["text"],
+            "asset_name": asset_name,
+            "hero_src": _asset_to_data_uri(asset_name),
+            "origin": item.get("origin", "modal_flux_cached"),
+            "prompt_summary": item.get("prompt_summary", _prompt_for_goal(goal, "cozy")),
+            "runtime_metadata": item.get("runtime_metadata", manifest.get("runtime_metadata", {})),
+        })
+    return results
+
+
+def _call_modal(goals: list[dict[str, str]], tone: str) -> tuple[list[dict[str, Any]], dict[str, Any]]:
+    base_url = os.environ.get("APP_MODAL_BASE_URL", "").strip()
+    token = os.environ.get("APP_MODAL_AUTH_TOKEN", "").strip()
+    timeout = float(os.environ.get("APP_MODAL_TIMEOUT_SECONDS", "180"))
+    if not base_url or not token:
+        raise RuntimeError("APP_MODAL_BASE_URL and APP_MODAL_AUTH_TOKEN are required for Modal FLUX generation.")
+
+    payload = {
+        "items": [
+            {
+                "goal_id": goal["id"],
+                "ordinary_goal": goal["text"],
+                "prompt": _prompt_for_goal(goal, tone),
+                "seed": 26000 + index,
+            }
+            for index, goal in enumerate(goals)
+        ],
+        "tone": tone,
+        "height": 768,
+        "width": 768,
+        "steps": 4,
+        "guidance": 1.0,
+    }
+    request = urllib.request.Request(
+        base_url,
+        data=json.dumps(payload).encode("utf-8"),
+        headers={
+            "Authorization": f"Bearer {token}",
+            "Content-Type": "application/json",
+        },
+        method="POST",
+    )
+    started = time.monotonic()
+    with urllib.request.urlopen(request, timeout=timeout) as response:
+        body = json.loads(response.read().decode("utf-8"))
+    latency_ms = int((time.monotonic() - started) * 1000)
+    outputs = body.get("outputs")
+    if not isinstance(outputs, list) or len(outputs) < len(goals):
+        raise RuntimeError("Modal response missing generated image outputs.")
+
+    metadata = {
+        "lifecycle_stage": "testing" if os.environ.get("SPACE_ID") else "dev",
+        "app_host": "hf_space" if os.environ.get("SPACE_ID") else "local",
+        "model_runtime": "modal",
+        "model_backend": body.get("model_backend", "modal_http"),
+        "inference_engine": body.get("inference_engine", "diffusers"),
+        "model_artifact_format": body.get("model_artifact_format", "safetensors"),
+        "quantization": body.get("quantization", "bf16"),
+        "model_id": body.get("model_id", MODEL_ID),
+        "latency_ms": body.get("latency_ms", latency_ms),
+        "fallback_used": bool(body.get("fallback_used", False)),
+    }
+
+    saved: list[dict[str, Any]] = []
+    for index, goal in enumerate(goals):
+        output = outputs[index]
+        image_b64 = output.get("image_png_base64")
+        if not image_b64:
+            raise RuntimeError("Modal image output missing image_png_base64.")
+        image_bytes = base64.b64decode(image_b64)
+        asset_name = generated_file_name(goal, index)
+        (ASSETS_DIR / asset_name).write_bytes(image_bytes)
+        saved.append({
+            "goal_id": goal["id"],
+            "ordinary_goal": goal["text"],
+            "asset_name": asset_name,
+            "hero_src": f"data:image/png;base64,{base64.b64encode(image_bytes).decode('ascii')}",
+            "origin": "modal_flux_generated",
+            "prompt_summary": output.get("prompt_summary", _prompt_for_goal(goal, tone)),
+            "runtime_metadata": metadata,
+            "seed": output.get("seed", 26000 + index),
+        })
+    _write_manifest(saved, metadata)
+    return saved, metadata
+
+
+def _quest_for_goal(goal: dict[str, str], image_result: dict[str, Any], index: int, tone: str) -> dict[str, Any]:
+    steps = [
+        {"id": f"{goal['id']}-step-{step_index + 1}", "label": label, "icon": icon}
+        for step_index, (label, icon) in enumerate(STEP_LIBRARY[_step_key(goal["text"])])
+    ]
+    return {
+        "id": f"quest-{goal['id']}",
+        "source_goal_id": goal["id"],
+        "ordinary_goal": goal["text"],
+        "title": _quest_title(goal["text"], tone),
+        "subtitle": f"Quest {index + 1} of 3",
+        "hero_asset_name": image_result["asset_name"],
+        "hero_src": image_result.get("hero_src", ""),
+        "hero_alt": f"Storybook classroom adventure for {goal['text']}",
+        "reward": {
+            "label": ["Idea Builder", "Lantern Reader", "Tidy Hero"][index] if index < 3 else "Quest Hero",
+            "description": "Reward earned after all steps are complete.",
+        },
+        "steps": steps,
+        "why_it_helps": _why_it_helps(goal["text"]),
+        "image_origin": image_result.get("origin", "unknown"),
+        "prompt_summary": image_result.get("prompt_summary", ""),
+        "runtime_metadata": image_result.get("runtime_metadata", _runtime_metadata()),
+    }
+
+
+def build_quest_pack(payload: dict[str, Any] | None = None, *, use_cache: bool = True) -> dict[str, Any]:
+    payload = payload or {}
+    tone = str(payload.get("tone") or "cozy").strip().lower() or "cozy"
+    goals = normalize_goals(payload.get("goals"))
+    force_refresh = bool(payload.get("force_refresh"))
+
+    images: list[dict[str, Any]] | None = None
+    metadata = _runtime_metadata()
+    blocker = ""
+    if use_cache and not force_refresh:
+        images = _cached_images_for(goals)
+        if images:
+            metadata = dict(images[0].get("runtime_metadata", metadata))
+            metadata["fallback_used"] = any(
+                bool(item.get("runtime_metadata", {}).get("fallback_used", True))
+                for item in images
+            )
+
+    if images is None:
+        try:
+            images, metadata = _call_modal(goals, tone)
+        except (OSError, RuntimeError, ValueError, urllib.error.URLError, TimeoutError) as exc:
+            blocker = f"{type(exc).__name__}: {exc}"
+            images = [_fallback_image_result(goal, index, blocker) for index, goal in enumerate(goals)]
+            metadata = _runtime_metadata(fallback_used=True, fallback_reason=blocker)
+
+    quests = [_quest_for_goal(goal, images[index], index, tone) for index, goal in enumerate(goals)]
+    return {
+        "goals": goals,
+        "quests": quests,
+        "runtime_metadata": metadata,
+        "fallback_used": any(bool(quest["runtime_metadata"].get("fallback_used", True)) for quest in quests),
+        "blocker": blocker,
+        "generated_at": datetime.now(timezone.utc).isoformat(),
+    }
+
+
+def build_initial_quest_pack() -> dict[str, Any]:
+    return build_quest_pack({"goals": default_goal_payload(), "tone": "cozy"}, use_cache=True)

epic_errands_space/render.py

@@ -0,0 +1,968 @@
+from __future__ import annotations
+
+import base64
+import json
+import mimetypes
+from pathlib import Path
+from typing import Any
+
+
+FRONTEND_ROOT = Path(__file__).resolve().parents[1] / "frontend"
+ASSETS_DIR = FRONTEND_ROOT / "assets"
+
+STYLE_MODES: dict[str, dict[str, str]] = {
+    "classroom": {
+        "label": "Classroom",
+        "mark": "CL",
+        "goal_noun": "Quest",
+        "parent_title": "Classroom Captain",
+        "kid_title": "Star Student",
+        "reward_noun": "badge",
+        "reward": "Helper badge",
+        "waiting": "Waiting for Classroom Captain approval.",
+        "copy": "Warm school adventure with stickers, notebooks, and clear wins.",
+        "image": "generated-hero-1-finish-class-project-8f64eeb3.png",
+    },
+    "magical": {
+        "label": "Magical",
+        "mark": "MG",
+        "goal_noun": "Spell Quest",
+        "parent_title": "Chief Wizard",
+        "kid_title": "Junior Wizard",
+        "reward_noun": "charm",
+        "reward": "Glow charm",
+        "waiting": "Waiting for Chief Wizard approval.",
+        "copy": "Gentle spellbook fantasy with cozy magic and glowing rewards.",
+        "image": "generated-hero-2-read-for-20-minutes-895e7642.png",
+    },
+    "comic": {
+        "label": "Comic",
+        "mark": "CM",
+        "goal_noun": "Mission",
+        "parent_title": "Comic Editor",
+        "kid_title": "Panel Hero",
+        "reward_noun": "starburst",
+        "reward": "Pow starburst",
+        "waiting": "Waiting for Comic Editor approval.",
+        "copy": "Bright panels, short action copy, and punchy kid-safe momentum.",
+        "image": "generated-hero-3-put-away-laundry-083482db.png",
+    },
+}
+
+INITIAL_GOALS: list[dict[str, str]] = [
+    {
+        "id": "goal-1",
+        "ordinary_goal": "Finish class project",
+        "title": "Spell Quest: Bright Idea Bridge",
+        "style_id": "magical",
+        "kid_completion_state": "completed",
+        "parent_reward_state": "waiting_for_approval",
+    },
+    {
+        "id": "goal-2",
+        "ordinary_goal": "Read for 20 minutes",
+        "title": "Quest: Reading Lantern",
+        "style_id": "classroom",
+        "kid_completion_state": "in_progress",
+        "parent_reward_state": "not_reviewed",
+    },
+    {
+        "id": "goal-3",
+        "ordinary_goal": "Put away laundry",
+        "title": "Mission: Laundry Launch",
+        "style_id": "comic",
+        "kid_completion_state": "not_started",
+        "parent_reward_state": "not_reviewed",
+    },
+]
+
+
+def _asset_data_uri(file_name: str) -> str:
+    path = ASSETS_DIR / file_name
+    if not path.exists():
+        return ""
+    mime_type = mimetypes.guess_type(path.name)[0] or "image/png"
+    encoded = base64.b64encode(path.read_bytes()).decode("ascii")
+    return f"data:{mime_type};base64,{encoded}"
+
+
+def _initial_state() -> dict[str, Any]:
+    images = {
+        style_id: _asset_data_uri(style["image"])
+        for style_id, style in STYLE_MODES.items()
+    }
+    return {
+        "activeTab": "home",
+        "defaultStyleId": "magical",
+        "selectedGoalId": "goal-1",
+        "parentName": "Maya",
+        "kidName": "Ari",
+        "avatarPreviews": {"parent": "", "kid": ""},
+        "styles": STYLE_MODES,
+        "images": images,
+        "goals": INITIAL_GOALS,
+    }
+
+
+def build_app_island() -> str:
+    return """
+<main class="ee-root" data-epic-root aria-label="Epic Errands V1 mobile review prototype">
+  <section class="ee-shell" data-design-id="mobile-app-shell">
+    <p class="ee-loading">Loading Epic Errands...</p>
+  </section>
+</main>
+"""
+
+
+def build_app_css() -> str:
+    return """
+.ee-root {
+  --ink: #172033;
+  --muted: #5b6678;
+  --line: rgba(23, 32, 51, 0.15);
+  --paper: #fffdf8;
+  --surface: #ffffff;
+  --soft: #f2f6fb;
+  --theme: #7652c7;
+  --theme-2: #0f877e;
+  --theme-3: #efb84a;
+  --theme-soft: #f2eaff;
+  --reward: #9b6500;
+  width: 100%;
+  max-width: 448px;
+  margin: 0 auto;
+  padding: 12px;
+  color: var(--ink);
+  background: #e9f1fb;
+  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+}
+
+.ee-root,
+.ee-root * {
+  box-sizing: border-box;
+}
+
+.ee-root button,
+.ee-root input {
+  font: inherit;
+}
+
+.ee-root button {
+  min-height: 44px;
+  border: 0;
+  cursor: pointer;
+}
+
+.ee-root button:focus-visible,
+.ee-root input:focus-visible {
+  outline: 3px solid rgba(28, 101, 242, 0.45);
+  outline-offset: 3px;
+}
+
+.ee-shell {
+  overflow: clip;
+  border: 1px solid var(--line);
+  border-radius: 22px;
+  background: var(--paper);
+  box-shadow: 0 14px 36px rgba(23, 32, 51, 0.14);
+}
+
+.ee-shell[data-style="classroom"] {
+  --theme: #c8332d;
+  --theme-2: #135f9d;
+  --theme-3: #f7c948;
+  --theme-soft: #fff2cf;
+  --reward: #11784f;
+}
+
+.ee-shell[data-style="magical"] {
+  --theme: #7652c7;
+  --theme-2: #0f877e;
+  --theme-3: #efb84a;
+  --theme-soft: #f2eaff;
+  --reward: #9b6500;
+}
+
+.ee-shell[data-style="comic"] {
+  --theme: #136bd9;
+  --theme-2: #c92754;
+  --theme-3: #ffd33d;
+  --theme-soft: #fff3a8;
+  --reward: #c34220;
+}
+
+.ee-top {
+  display: grid;
+  gap: 12px;
+  padding: 18px 16px 12px;
+  background: linear-gradient(135deg, var(--theme-soft), #ffffff 72%);
+  border-bottom: 1px solid var(--line);
+}
+
+.ee-brand-row,
+.ee-title-row,
+.ee-chip-row,
+.ee-name-row,
+.ee-card-action-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.ee-brand-row,
+.ee-title-row {
+  justify-content: space-between;
+}
+
+.ee-kicker,
+.ee-section-label {
+  margin: 0;
+  color: var(--theme-2);
+  font-size: 12px;
+  font-weight: 900;
+  letter-spacing: 0;
+  text-transform: uppercase;
+}
+
+.ee-brand {
+  margin: 0;
+  font-size: 30px;
+  line-height: 0.95;
+  font-weight: 950;
+}
+
+.ee-pill,
+.ee-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 28px;
+  padding: 0 9px;
+  border-radius: 999px;
+  background: #ffffff;
+  color: var(--theme);
+  border: 1px solid var(--line);
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.ee-chip {
+  min-height: 24px;
+  background: var(--theme-soft);
+  font-size: 11px;
+}
+
+.ee-chip[data-tone="waiting"] {
+  background: #fff3d0;
+  color: #805100;
+}
+
+.ee-chip[data-tone="success"] {
+  background: #e6f7ee;
+  color: #0b7048;
+}
+
+.ee-tabs {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.ee-tab {
+  display: grid;
+  align-content: center;
+  gap: 2px;
+  min-width: 0;
+  padding: 8px 4px;
+  border-radius: 12px;
+  background: rgba(255, 255, 255, 0.72);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.ee-tab[aria-current="page"] {
+  background: var(--theme);
+  color: #ffffff;
+}
+
+.ee-tab[aria-disabled="true"] {
+  opacity: 0.48;
+  cursor: not-allowed;
+}
+
+.ee-tab-mark {
+  font-size: 13px;
+}
+
+.ee-body {
+  display: grid;
+  gap: 14px;
+  padding: 16px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)), #f7f9fc;
+}
+
+.ee-screen,
+.ee-stack {
+  display: grid;
+  gap: 14px;
+}
+
+.ee-screen-title {
+  margin: 0;
+  font-size: 27px;
+  line-height: 1;
+  font-weight: 950;
+}
+
+.ee-copy {
+  margin: 4px 0 0;
+  color: var(--muted);
+  font-size: 14px;
+  font-weight: 750;
+  line-height: 1.36;
+}
+
+.ee-panel,
+.ee-goal-row,
+.ee-goal-card,
+.ee-kid-tile,
+.ee-avatar {
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 7px 18px rgba(23, 32, 51, 0.08);
+}
+
+.ee-panel {
+  display: grid;
+  gap: 10px;
+  padding: 13px;
+}
+
+.ee-style-list {
+  display: grid;
+  gap: 8px;
+}
+
+.ee-style-button {
+  display: grid;
+  grid-template-columns: 42px 1fr auto;
+  align-items: center;
+  gap: 10px;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  background: #ffffff;
+  color: var(--ink);
+  text-align: left;
+}
+
+.ee-style-button[aria-pressed="true"] {
+  border-color: var(--theme);
+  background: linear-gradient(135deg, var(--theme-soft), #ffffff);
+}
+
+.ee-mark,
+.ee-avatar-mark {
+  display: grid;
+  width: 42px;
+  height: 42px;
+  place-items: center;
+  border-radius: 13px;
+  background: var(--theme-soft);
+  color: var(--theme);
+  font-size: 13px;
+  font-weight: 950;
+}
+
+.ee-style-name,
+.ee-goal-name,
+.ee-tile-title {
+  display: block;
+  font-size: 16px;
+  line-height: 1.15;
+  font-weight: 950;
+}
+
+.ee-style-meta,
+.ee-goal-meta,
+.ee-small {
+  display: block;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1.3;
+}
+
+.ee-dot {
+  width: 17px;
+  height: 17px;
+  border: 2px solid var(--theme);
+  border-radius: 50%;
+}
+
+.ee-style-button[aria-pressed="true"] .ee-dot {
+  background: radial-gradient(circle, var(--theme) 45%, transparent 49%);
+}
+
+.ee-avatar-grid,
+.ee-counter-grid,
+.ee-kid-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.ee-avatar {
+  display: grid;
+  gap: 10px;
+  padding: 10px;
+  background: linear-gradient(135deg, var(--theme-soft), #ffffff);
+}
+
+.ee-avatar-photo {
+  width: 54px;
+  height: 54px;
+  object-fit: cover;
+  border-radius: 18px;
+  border: 3px solid #ffffff;
+  box-shadow: 0 5px 15px rgba(23, 32, 51, 0.12);
+}
+
+.ee-name-input {
+  width: 100%;
+  min-height: 40px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0 10px;
+  color: var(--ink);
+  background: #ffffff;
+  font-weight: 850;
+}
+
+.ee-file {
+  width: 100%;
+  min-height: 38px;
+  font-size: 12px;
+}
+
+.ee-privacy {
+  margin: 0;
+  color: #536273;
+  font-size: 12px;
+  font-weight: 750;
+  line-height: 1.35;
+}
+
+.ee-counter {
+  display: grid;
+  align-content: center;
+  min-height: 88px;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  background: #ffffff;
+}
+
+.ee-counter strong {
+  color: var(--theme);
+  font-size: 34px;
+  line-height: 0.9;
+}
+
+.ee-counter span {
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 850;
+}
+
+.ee-goal-list {
+  display: grid;
+  gap: 10px;
+}
+
+.ee-goal-row {
+  display: grid;
+  gap: 10px;
+  padding: 12px;
+}
+
+.ee-approve-button,
+.ee-complete-button,
+.ee-audio-button {
+  justify-self: start;
+  min-height: 44px;
+  padding: 0 14px;
+  border-radius: 999px;
+  background: var(--theme);
+  color: #ffffff;
+  font-weight: 950;
+}
+
+.ee-approve-button:disabled,
+.ee-audio-button:disabled,
+.ee-complete-button:disabled {
+  background: #e9eef5;
+  color: #657185;
+  border: 1px solid var(--line);
+  cursor: not-allowed;
+}
+
+.ee-kid-tile {
+  overflow: clip;
+  padding: 0;
+  color: var(--ink);
+  text-align: left;
+}
+
+.ee-kid-tile[aria-pressed="true"] {
+  border-color: var(--theme);
+}
+
+.ee-kid-tile img,
+.ee-card-image {
+  display: block;
+  width: 100%;
+  background: var(--theme-soft);
+  object-fit: cover;
+}
+
+.ee-kid-tile img {
+  height: 96px;
+}
+
+.ee-tile-body {
+  display: grid;
+  gap: 6px;
+  padding: 10px;
+}
+
+.ee-goal-card {
+  overflow: clip;
+}
+
+.ee-card-image {
+  height: 205px;
+}
+
+.ee-card-body {
+  display: grid;
+  gap: 11px;
+  padding: 13px;
+}
+
+.ee-card-body h2 {
+  margin: 0;
+  font-size: 26px;
+  line-height: 1;
+}
+
+.ee-step-list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.ee-step-list li {
+  display: grid;
+  grid-template-columns: 30px 1fr;
+  gap: 8px;
+  align-items: center;
+  min-height: 40px;
+  padding: 7px 9px;
+  border-radius: 13px;
+  background: var(--soft);
+  font-size: 13px;
+  font-weight: 850;
+}
+
+.ee-step-list b {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border-radius: 999px;
+  background: var(--theme-soft);
+  color: var(--theme);
+}
+
+.ee-status-panel {
+  display: grid;
+  gap: 4px;
+  padding: 11px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: #fff4d7;
+  color: #704800;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.ee-status-panel[data-tone="success"] {
+  background: #e7f8ef;
+  color: #0d5c3b;
+}
+
+.ee-loading {
+  margin: 0;
+  padding: 18px;
+  color: var(--muted);
+  font-weight: 850;
+}
+
+@media (max-width: 380px) {
+  .ee-root {
+    padding: 8px;
+  }
+
+  .ee-body {
+    padding: 12px;
+  }
+
+  .ee-brand {
+    font-size: 27px;
+  }
+
+  .ee-screen-title {
+    font-size: 24px;
+  }
+
+  .ee-avatar-grid,
+  .ee-kid-grid {
+    grid-template-columns: 1fr;
+  }
+}
+"""
+
+
+def build_app_head() -> str:
+    return """
+<meta name="viewport" content="width=device-width, initial-scale=1">
+"""
+
+
+def build_app_bootstrap_js(asset_base: str = "/file=frontend/assets/") -> str:
+    del asset_base
+    state_json = json.dumps(_initial_state())
+    return (
+        r"""
+const root = element.querySelector("[data-epic-root]");
+if (root && root.dataset.ready !== "true") {
+root.dataset.ready = "true";
+
+const state = __STATE_JSON__;
+const stepsByStyle = {
+  classroom: ["Find your reading spot", "Read the next pages", "Tell the best part"],
+  magical: ["Gather your project ideas", "Build the first bright piece", "Check your spellbook notes"],
+  comic: ["Sort the pile", "Fold the hero gear", "Launch it to the drawer"],
+};
+
+function escapeHtml(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
+
+function styleFor(goalOrStyleId) {
+  const styleId = typeof goalOrStyleId === "string" ? goalOrStyleId : goalOrStyleId.style_id;
+  return state.styles[styleId] || state.styles.classroom;
+}
+
+function shellStyle() {
+  return state.styles[state.defaultStyleId] || state.styles.magical;
+}
+
+function awaitingApprovalCount() {
+  return state.goals.filter((goal) => goal.parent_reward_state === "waiting_for_approval").length;
+}
+
+function stateChip(goal) {
+  if (goal.parent_reward_state === "approved_reward_given") {
+    return '<span class="ee-chip" data-tone="success">Reward given</span>';
+  }
+  if (goal.kid_completion_state === "completed") {
+    return '<span class="ee-chip" data-tone="waiting">Awaiting parent</span>';
+  }
+  if (goal.kid_completion_state === "in_progress") {
+    return '<span class="ee-chip">In progress</span>';
+  }
+  return '<span class="ee-chip">Ready</span>';
+}
+
+function renderTabs() {
+  const tabs = [
+    ["home", "Home", "HM"],
+    ["parent", "Parent", "PA"],
+    ["kid", "Kid", "KD"],
+    ["diy", "DIY Lab", "DIY"],
+  ];
+  return `<nav class="ee-tabs" data-design-id="mobile-tab-nav" aria-label="Epic Errands tabs">
+    ${tabs.map(([id, label, mark]) => {
+      const disabled = id === "diy";
+      return `<button class="ee-tab" data-action="tab" data-tab="${id}" ${state.activeTab === id ? 'aria-current="page"' : ""} ${disabled ? 'aria-disabled="true" data-design-id="diy-lab-nav" title="DIY Lab is planned for later."' : ""}>
+        <span class="ee-tab-mark">${mark}</span>
+        <span>${label}</span>
+      </button>`;
+    }).join("")}
+  </nav>`;
+}
+
+function renderHeader() {
+  const style = shellStyle();
+  return `<header class="ee-top">
+    <div class="ee-brand-row">
+      <div>
+        <p class="ee-kicker">V1 mobile review</p>
+        <h1 class="ee-brand">Epic Errands</h1>
+      </div>
+      <span class="ee-pill">${escapeHtml(style.label)}</span>
+    </div>
+    ${renderTabs()}
+  </header>`;
+}
+
+function renderHome() {
+  const style = shellStyle();
+  return `<section class="ee-screen" data-design-id="home-screen" aria-labelledby="home-title">
+    <div>
+      <h2 class="ee-screen-title" id="home-title">Choose today's style</h2>
+      <p class="ee-copy">${escapeHtml(state.parentName)} is ${escapeHtml(style.parent_title)}. ${escapeHtml(state.kidName)} is ${escapeHtml(style.kid_title)}.</p>
+    </div>
+
+    <section class="ee-panel" data-design-id="style-mode-picker" aria-labelledby="style-label">
+      <p class="ee-section-label" id="style-label">Goal style</p>
+      <div class="ee-style-list">
+        ${Object.entries(state.styles).map(([id, item]) => `<button class="ee-style-button" data-action="style" data-style="${id}" aria-pressed="${state.defaultStyleId === id}">
+          <span class="ee-mark">${escapeHtml(item.mark)}</span>
+          <span>
+            <span class="ee-style-name">${escapeHtml(item.label)}</span>
+            <span class="ee-style-meta">${escapeHtml(item.goal_noun)} / ${escapeHtml(item.reward_noun)}. ${escapeHtml(item.copy)}</span>
+          </span>
+          <span class="ee-dot" aria-hidden="true"></span>
+        </button>`).join("")}
+      </div>
+    </section>
+
+    <section class="ee-panel" data-design-id="avatar-creator" aria-labelledby="avatar-label">
+      <p class="ee-section-label" id="avatar-label">Avatars</p>
+      <div class="ee-avatar-grid">
+        ${renderAvatar("parent", state.parentName, style.parent_title)}
+        ${renderAvatar("kid", state.kidName, style.kid_title)}
+      </div>
+      <p class="ee-privacy">Photo previews are session-only in this prototype. Nothing is persisted.</p>
+    </section>
+
+    <section class="ee-counter-grid" data-design-id="active-goal-count" aria-label="Goal counts">
+      <div class="ee-counter"><strong>${state.goals.length}</strong><span>active goals</span></div>
+      <div class="ee-counter"><strong>${awaitingApprovalCount()}</strong><span>awaiting approval</span></div>
+    </section>
+  </section>`;
+}
+
+function renderAvatar(role, name, title) {
+  const preview = state.avatarPreviews[role];
+  const label = role === "parent" ? "Parent" : "Kid";
+  return `<div class="ee-avatar">
+    <div class="ee-name-row">
+      ${preview ? `<img class="ee-avatar-photo" src="${preview}" alt="${label} avatar preview">` : `<span class="ee-avatar-mark">${role === "parent" ? "PA" : "KD"}</span>`}
+      <div>
+        <span class="ee-style-name">${escapeHtml(label)}</span>
+        <span class="ee-small">${escapeHtml(title)}</span>
+      </div>
+    </div>
+    <label class="ee-small">${label} name
+      <input class="ee-name-input" data-action="name" data-role="${role}" value="${escapeHtml(name)}" autocomplete="off">
+    </label>
+    <input class="ee-file" data-action="avatar" data-role="${role}" type="file" accept="image/*" aria-label="Upload ${label} photo">
+  </div>`;
+}
+
+function renderParent() {
+  return `<section class="ee-screen" data-design-id="parent-goals-screen" aria-labelledby="parent-title">
+    <div>
+      <h2 class="ee-screen-title" id="parent-title">Parent Goals</h2>
+      <p class="ee-copy">Approve completed goals and grant the reward. Everything else is coordinated offline.</p>
+    </div>
+    <div class="ee-goal-list" data-design-id="parent-goal-list">
+      ${state.goals.map((goal) => {
+        const style = styleFor(goal);
+        const canApprove = goal.parent_reward_state === "waiting_for_approval";
+        const approved = goal.parent_reward_state === "approved_reward_given";
+        return `<article class="ee-goal-row" data-goal-id="${goal.id}">
+          <div class="ee-title-row">
+            <span class="ee-goal-name">${escapeHtml(goal.title)}</span>
+            ${stateChip(goal)}
+          </div>
+          <div class="ee-chip-row">
+            <span class="ee-chip">${escapeHtml(style.label)}</span>
+            <span class="ee-chip">${escapeHtml(style.reward)}</span>
+          </div>
+          <span class="ee-goal-meta">Ordinary goal: ${escapeHtml(goal.ordinary_goal)}</span>
+          <button class="ee-approve-button" data-design-id="parent-approve-action" data-action="approve" data-goal-id="${goal.id}" ${canApprove ? "" : "disabled"}>${approved ? "Approved" : "Approve reward"}</button>
+        </article>`;
+      }).join("")}
+    </div>
+  </section>`;
+}
+
+function renderKid() {
+  const selected = state.goals.find((goal) => goal.id === state.selectedGoalId) || state.goals[0];
+  return `<section class="ee-screen" data-design-id="kid-goals-screen" aria-labelledby="kid-title">
+    <div>
+      <h2 class="ee-screen-title" id="kid-title">Kid Goals</h2>
+      <p class="ee-copy">Tap a goal, open the card, mark it complete, then wait for your grown-up's themed approval.</p>
+    </div>
+    <div class="ee-kid-grid" data-design-id="kid-goal-thumbnail-grid">
+      ${state.goals.map((goal) => {
+        const style = styleFor(goal);
+        return `<button class="ee-kid-tile" data-action="select-goal" data-goal-id="${goal.id}" aria-pressed="${state.selectedGoalId === goal.id}">
+          <img src="${state.images[goal.style_id] || ""}" alt="${escapeHtml(style.label)} generated image for ${escapeHtml(goal.ordinary_goal)}">
+          <span class="ee-tile-body">
+            <span class="ee-tile-title">${escapeHtml(goal.title)}</span>
+            ${stateChip(goal)}
+          </span>
+        </button>`;
+      }).join("")}
+    </div>
+    ${renderGoalCard(selected)}
+  </section>`;
+}
+
+function renderGoalCard(goal) {
+  const style = styleFor(goal);
+  const steps = stepsByStyle[goal.style_id] || stepsByStyle.classroom;
+  const waiting = goal.parent_reward_state === "waiting_for_approval";
+  const rewarded = goal.parent_reward_state === "approved_reward_given";
+  return `<article class="ee-goal-card" data-design-id="kid-goal-card">
+    <img class="ee-card-image" src="${state.images[goal.style_id] || ""}" alt="${escapeHtml(style.label)} generated goal card image for ${escapeHtml(goal.ordinary_goal)}">
+    <div class="ee-card-body">
+      <div>
+        <p class="ee-kicker">${escapeHtml(style.kid_title)} ${escapeHtml(style.goal_noun)}</p>
+        <h2>${escapeHtml(goal.title)}</h2>
+        <p class="ee-copy">${escapeHtml(style.copy)}</p>
+      </div>
+      <ol class="ee-step-list">
+        ${steps.map((step, index) => `<li><b>${index + 1}</b><span>${escapeHtml(step)}</span></li>`).join("")}
+      </ol>
+      <div class="ee-card-action-row">
+        <button class="ee-audio-button" data-design-id="audio-play-hook" disabled>Audio in V1.1</button>
+        <button class="ee-complete-button" data-action="complete" data-goal-id="${goal.id}" ${goal.kid_completion_state === "completed" ? "disabled" : ""}>${goal.kid_completion_state === "completed" ? "Completed" : `Mark ${style.goal_noun} complete`}</button>
+      </div>
+      ${waiting ? `<div class="ee-status-panel" data-design-id="waiting-for-parent-approval"><strong>${escapeHtml(style.waiting)}</strong><span>Your ${escapeHtml(style.reward_noun)} unlocks when ${escapeHtml(style.parent_title)} approves.</span></div>` : ""}
+      ${rewarded ? `<div class="ee-status-panel" data-tone="success"><strong>${escapeHtml(style.reward)} earned!</strong><span>${escapeHtml(style.parent_title)} approved this goal.</span></div>` : ""}
+    </div>
+  </article>`;
+}
+
+function render() {
+  const shell = root.querySelector(".ee-shell");
+  const screen = state.activeTab === "parent" ? renderParent() : state.activeTab === "kid" ? renderKid() : renderHome();
+  shell.dataset.style = state.defaultStyleId;
+  shell.innerHTML = `${renderHeader()}<div class="ee-body">${screen}</div>`;
+}
+
+root.addEventListener("click", (event) => {
+  const target = event.target.closest("[data-action]");
+  if (!target) return;
+
+  if (target.dataset.action === "tab") {
+    if (target.getAttribute("aria-disabled") === "true") return;
+    state.activeTab = target.dataset.tab || "home";
+    render();
+    return;
+  }
+
+  if (target.dataset.action === "style") {
+    state.defaultStyleId = target.dataset.style || state.defaultStyleId;
+    render();
+    return;
+  }
+
+  if (target.dataset.action === "select-goal") {
+    state.selectedGoalId = target.dataset.goalId || state.selectedGoalId;
+    render();
+    return;
+  }
+
+  if (target.dataset.action === "complete") {
+    const goal = state.goals.find((item) => item.id === target.dataset.goalId);
+    if (goal) {
+      goal.kid_completion_state = "completed";
+      if (goal.parent_reward_state !== "approved_reward_given") {
+        goal.parent_reward_state = "waiting_for_approval";
+      }
+      render();
+    }
+    return;
+  }
+
+  if (target.dataset.action === "approve") {
+    const goal = state.goals.find((item) => item.id === target.dataset.goalId);
+    if (goal && goal.kid_completion_state === "completed") {
+      goal.parent_reward_state = "approved_reward_given";
+      render();
+    }
+  }
+});
+
+root.addEventListener("input", (event) => {
+  const target = event.target;
+  if (!target || target.dataset.action !== "name") return;
+  if (target.dataset.role === "parent") {
+    state.parentName = target.value || "Parent";
+  } else if (target.dataset.role === "kid") {
+    state.kidName = target.value || "Kid";
+  }
+});
+
+root.addEventListener("change", (event) => {
+  const target = event.target;
+  if (!target || target.dataset.action !== "avatar") return;
+  const file = target.files && target.files[0];
+  if (!file) return;
+  const role = target.dataset.role;
+  if (state.avatarPreviews[role]) {
+    URL.revokeObjectURL(state.avatarPreviews[role]);
+  }
+  state.avatarPreviews[role] = URL.createObjectURL(file);
+  render();
+});
+
+render();
+}
+"""
+    ).replace("__STATE_JSON__", state_json)
+
+
+def build_app_document(asset_base: str = "/file=frontend/assets/") -> str:
+    del asset_base
+    return f"""<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Epic Errands V1 - Mobile Review Prototype</title>
+    <style>
+      body {{
+        margin: 0;
+        background: #e9f1fb;
+      }}
+      {build_app_css()}
+    </style>
+  </head>
+  <body>
+    {build_app_island()}
+    <script>
+      const element = document;
+      {build_app_bootstrap_js()}
+    </script>
+  </body>
+</html>"""

frontend/index.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+    <meta name="theme-color" content="#fffdf8">
+    <title>Epic Errands</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@700;800&family=Nunito:wght@700;800;900&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,600,0,0&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/frontend/styles/app.css">
+  </head>
+  <body>
+    <main class="epic-app" aria-label="Epic Errands mobile prototype">
+      <div id="epic-errands-app"></div>
+    </main>
+    <script>
+      window.EPIC_ASSET_BASE = "/assets/";
+    </script>
+    <script src="/frontend/scripts/app.js" defer></script>
+  </body>
+</html>

frontend/scripts/app.js

@@ -0,0 +1,425 @@
+(function () {
+  const ASSET_BASE = window.EPIC_ASSET_BASE || "assets/";
+  const EMBEDDED_ASSETS = window.EPIC_ASSETS || {};
+  const root = document.getElementById("epic-errands-app");
+
+  const styles = {
+    classroom: {
+      label: "Classroom",
+      icon: "school",
+      goalNoun: "Quest",
+      parentTitle: "Classroom Captain",
+      kidTitle: "Star Student",
+      rewardNoun: "badge",
+      waitingCopy: "Waiting for Classroom Captain approval.",
+      copy: "Warm school adventure with stickers, notebooks, and sunny goals.",
+    },
+    magical: {
+      label: "Magical",
+      icon: "auto_fix_high",
+      goalNoun: "Spell Quest",
+      parentTitle: "Chief Wizard",
+      kidTitle: "Junior Wizard",
+      rewardNoun: "charm",
+      waitingCopy: "Waiting for Chief Wizard approval.",
+      copy: "Cozy spellbook fantasy with gentle magic and glowing rewards.",
+    },
+    comic: {
+      label: "Comic",
+      icon: "comic_bubble",
+      goalNoun: "Mission",
+      parentTitle: "Comic Editor",
+      kidTitle: "Panel Hero",
+      rewardNoun: "starburst",
+      waitingCopy: "Waiting for Comic Editor approval.",
+      copy: "Punchy action panels with bold copy and kid-safe energy.",
+    },
+  };
+
+  const imageByStyle = {
+    classroom: "generated-hero-1-finish-class-project-8f64eeb3.png",
+    magical: "generated-hero-2-read-for-20-minutes-895e7642.png",
+    comic: "generated-hero-3-put-away-laundry-083482db.png",
+  };
+
+  const state = {
+    activeTab: "home",
+    selectedGoalId: "goal-1",
+    defaultStyleId: "magical",
+    parentAvatarReady: true,
+    kidAvatarReady: true,
+    goals: [
+      {
+        id: "goal-1",
+        ordinaryGoal: "Finish class project",
+        styleId: "magical",
+        kidCompletionState: "completed",
+        parentRewardState: "waiting_for_approval",
+      },
+      {
+        id: "goal-2",
+        ordinaryGoal: "Read for 20 minutes",
+        styleId: "classroom",
+        kidCompletionState: "in_progress",
+        parentRewardState: "not_reviewed",
+      },
+      {
+        id: "goal-3",
+        ordinaryGoal: "Put away laundry",
+        styleId: "comic",
+        kidCompletionState: "not_started",
+        parentRewardState: "not_reviewed",
+      },
+    ],
+  };
+
+  function asset(name) {
+    if (EMBEDDED_ASSETS[name]) return EMBEDDED_ASSETS[name];
+    return `${ASSET_BASE}${name}`;
+  }
+
+  function icon(name) {
+    return `<span class="material-symbols-rounded" aria-hidden="true">${name}</span>`;
+  }
+
+  function escapeHtml(value) {
+    return String(value)
+      .replace(/&/g, "&amp;")
+      .replace(/</g, "&lt;")
+      .replace(/>/g, "&gt;")
+      .replace(/"/g, "&quot;")
+      .replace(/'/g, "&#039;");
+  }
+
+  function currentStyle() {
+    return styles[state.defaultStyleId];
+  }
+
+  function goalStyle(goal) {
+    return styles[goal.styleId] || styles.classroom;
+  }
+
+  function activeGoals() {
+    return state.goals.length;
+  }
+
+  function awaitingApproval() {
+    return state.goals.filter((goal) => goal.parentRewardState === "waiting_for_approval").length;
+  }
+
+  function goalTitle(goal) {
+    const style = goalStyle(goal);
+    const lower = goal.ordinaryGoal.toLowerCase();
+    if (goal.styleId === "magical") return `${style.goalNoun}: Bright Idea Bridge`;
+    if (goal.styleId === "comic") return `${style.goalNoun}: Laundry Launch`;
+    if (lower.includes("read")) return `${style.goalNoun}: Reading Lantern`;
+    return `${style.goalNoun}: ${goal.ordinaryGoal}`;
+  }
+
+  function rewardLabel(goal) {
+    const style = goalStyle(goal);
+    if (goal.styleId === "magical") return `Glow ${style.rewardNoun}`;
+    if (goal.styleId === "comic") return `Pow ${style.rewardNoun}`;
+    return `Helper ${style.rewardNoun}`;
+  }
+
+  function derivedState(goal) {
+    if (goal.parentRewardState === "approved_reward_given") return "reward_given";
+    if (goal.kidCompletionState === "completed") return "waiting_for_parent";
+    if (goal.kidCompletionState === "in_progress") return "working_on_it";
+    return "ready_to_start";
+  }
+
+  function stateChip(goal) {
+    const derived = derivedState(goal);
+    if (derived === "reward_given") return `<span class="chip success">Reward given</span>`;
+    if (derived === "waiting_for_parent") return `<span class="chip waiting">Awaiting parent</span>`;
+    if (derived === "working_on_it") return `<span class="chip">In progress</span>`;
+    return `<span class="chip">Ready</span>`;
+  }
+
+  function stepsFor(goal) {
+    const style = goalStyle(goal);
+    if (goal.styleId === "magical") {
+      return [
+        "Gather your project ideas",
+        "Build the first bright piece",
+        "Check your spellbook notes",
+      ];
+    }
+    if (goal.styleId === "comic") {
+      return ["Sort the pile", "Fold the hero gear", "Launch it to the drawer"];
+    }
+    return ["Find your reading spot", "Read the next pages", "Tell the best part"];
+  }
+
+  function renderHome() {
+    const style = currentStyle();
+    return `
+      <section class="screen" data-design-id="home-screen" aria-labelledby="home-title">
+        <div class="screen-head">
+          <h1 class="screen-title" id="home-title">Choose today's style</h1>
+          <p class="screen-copy">${escapeHtml(style.parentTitle)} and ${escapeHtml(style.kidTitle)} will use this style for new goals.</p>
+        </div>
+
+        <section class="panel" data-design-id="style-mode-picker" aria-labelledby="style-label">
+          <h2 class="section-label" id="style-label">Goal style</h2>
+          <div class="style-grid">
+            ${Object.entries(styles).map(([id, item]) => `
+              <button class="style-option" data-action="select-style" data-style="${id}" aria-pressed="${state.defaultStyleId === id}">
+                <span class="style-mark">${icon(item.icon)}</span>
+                <span>
+                  <span class="style-name">${item.label}</span>
+                  <span class="style-meta">${item.goalNoun} / ${item.rewardNoun}. ${item.copy}</span>
+                </span>
+                <span class="selected-dot" aria-hidden="true"></span>
+              </button>
+            `).join("")}
+          </div>
+        </section>
+
+        <section class="panel" data-design-id="avatar-creator" aria-labelledby="avatar-label">
+          <h2 class="section-label" id="avatar-label">Avatars</h2>
+          <div class="avatar-grid">
+            <div class="avatar-slot">
+              <div>
+                <div class="avatar-face">${icon("shield_person")}</div>
+                <p class="avatar-name">Maya</p>
+                <p class="avatar-title">${escapeHtml(style.parentTitle)}</p>
+              </div>
+            </div>
+            <div class="avatar-slot">
+              <div>
+                <div class="avatar-face">${icon("face_3")}</div>
+                <p class="avatar-name">Ari</p>
+                <p class="avatar-title">${escapeHtml(style.kidTitle)}</p>
+              </div>
+            </div>
+          </div>
+          <p class="privacy-note">${icon("lock")} Photos create session-only avatars in this prototype. Nothing is persisted.</p>
+        </section>
+
+        <section class="counter-grid" aria-label="Goal counts">
+          <div class="counter">
+            <strong>${activeGoals()}</strong>
+            <span>active goals</span>
+          </div>
+          <div class="counter">
+            <strong>${awaitingApproval()}</strong>
+            <span>awaiting approval</span>
+          </div>
+        </section>
+      </section>
+    `;
+  }
+
+  function renderParentGoals() {
+    return `
+      <section class="screen" data-design-id="parent-goals-screen" aria-labelledby="parent-title">
+        <div class="screen-head">
+          <h1 class="screen-title" id="parent-title">Parent Goals</h1>
+          <p class="screen-copy">Approve completed goals and grant the reward. Everything else is handled offline.</p>
+        </div>
+        <div class="goal-list" data-design-id="parent-goal-list">
+          ${state.goals.map((goal) => {
+            const style = goalStyle(goal);
+            const canApprove = goal.parentRewardState === "waiting_for_approval";
+            const approved = goal.parentRewardState === "approved_reward_given";
+            return `
+              <article class="goal-row" data-goal-id="${goal.id}">
+                <div class="goal-main">
+                  <div class="goal-title-line">
+                    <span class="goal-name">${escapeHtml(goalTitle(goal))}</span>
+                    <span class="chip">${escapeHtml(style.label)}</span>
+                    ${stateChip(goal)}
+                  </div>
+                  <p class="goal-plain">Ordinary goal: ${escapeHtml(goal.ordinaryGoal)}</p>
+                  <p class="goal-plain">Reward: ${escapeHtml(rewardLabel(goal))}</p>
+                </div>
+                <button class="approve-button" data-design-id="parent-approve-action" data-action="approve-goal" data-goal-id="${goal.id}" ${canApprove ? "" : "disabled"}>
+                  ${approved ? "Approved" : "Approve"}
+                </button>
+              </article>
+            `;
+          }).join("")}
+        </div>
+      </section>
+    `;
+  }
+
+  function renderKidGoals() {
+    const selected = state.goals.find((goal) => goal.id === state.selectedGoalId) || state.goals[0];
+    return `
+      <section class="screen" data-design-id="kid-goals-screen" aria-labelledby="kid-title">
+        <div class="screen-head">
+          <h1 class="screen-title" id="kid-title">Kid Goals</h1>
+          <p class="screen-copy">Tap a goal, finish it, then wait for your grown-up's themed approval.</p>
+        </div>
+        <div class="kid-grid" data-design-id="kid-goal-thumbnail-grid">
+          ${state.goals.map((goal) => {
+            const style = goalStyle(goal);
+            return `
+              <button class="kid-tile" data-action="select-goal" data-goal-id="${goal.id}" aria-pressed="${state.selectedGoalId === goal.id}">
+                <img src="${asset(imageByStyle[goal.styleId])}" alt="${escapeHtml(style.label)} illustration for ${escapeHtml(goal.ordinaryGoal)}">
+                <span class="tile-body">
+                  <span class="tile-title">${escapeHtml(goalTitle(goal))}</span>
+                  ${stateChip(goal)}
+                </span>
+              </button>
+            `;
+          }).join("")}
+        </div>
+        ${renderGoalCard(selected)}
+      </section>
+    `;
+  }
+
+  function renderGoalCard(goal) {
+    const style = goalStyle(goal);
+    const isWaiting = goal.parentRewardState === "waiting_for_approval";
+    const rewarded = goal.parentRewardState === "approved_reward_given";
+    const steps = stepsFor(goal);
+    return `
+      <article class="goal-card" data-design-id="kid-goal-card">
+        <div class="goal-card-hero">
+          <img src="${asset(imageByStyle[goal.styleId])}" alt="${escapeHtml(style.label)} goal card image for ${escapeHtml(goal.ordinaryGoal)}">
+          <span class="hero-badge">${escapeHtml(style.kidTitle)} ${escapeHtml(style.goalNoun)}</span>
+        </div>
+        <div class="goal-card-body">
+          <h2>${escapeHtml(goalTitle(goal))}</h2>
+          <p class="screen-copy">${escapeHtml(style.copy)}</p>
+          <ol class="step-list">
+            ${steps.map((step, index) => `
+              <li>
+                <span class="step-index">${index + 1}</span>
+                <span>${escapeHtml(step)}</span>
+              </li>
+            `).join("")}
+          </ol>
+          <div class="card-actions">
+            <button class="audio-button" data-design-id="audio-play-hook" disabled>
+              ${icon("volume_up")} Audio in V1.1
+            </button>
+            <button class="complete-button" data-action="complete-goal" data-goal-id="${goal.id}" ${goal.kidCompletionState === "completed" ? "disabled" : ""}>
+              ${goal.kidCompletionState === "completed" ? "Completed" : `Mark ${style.goalNoun} complete`}
+            </button>
+          </div>
+          ${isWaiting ? `
+            <div class="waiting-panel" data-design-id="waiting-for-parent-approval">
+              <strong>${escapeHtml(style.waitingCopy)}</strong>
+              <span>Your ${escapeHtml(style.rewardNoun)} unlocks when ${escapeHtml(style.parentTitle)} approves.</span>
+            </div>
+          ` : ""}
+          ${rewarded ? `
+            <div class="reward-panel">
+              <strong>${escapeHtml(rewardLabel(goal))} earned!</strong>
+              <span>${escapeHtml(style.parentTitle)} approved this goal.</span>
+            </div>
+          ` : ""}
+        </div>
+      </article>
+    `;
+  }
+
+  function renderNav() {
+    const items = [
+      ["home", "Home", "home"],
+      ["parent", "Parent", "fact_check"],
+      ["kid", "Kid", "view_carousel"],
+      ["diy", "DIY Lab", "experiment"],
+    ];
+    return `
+      <nav class="nav" data-design-id="mobile-tab-nav" aria-label="Epic Errands tabs">
+        ${items.map(([id, label, iconName]) => {
+          const isDisabled = id === "diy";
+          const active = state.activeTab === id;
+          return `
+            <button class="nav-button ${active ? "is-active" : ""}" data-action="nav" data-tab="${id}" ${isDisabled ? 'aria-disabled="true" data-design-id="diy-lab-nav" title="DIY Lab is planned for later."' : ""}>
+              ${icon(iconName)}
+              <span>${label}</span>
+            </button>
+          `;
+        }).join("")}
+      </nav>
+    `;
+  }
+
+  function render() {
+    const style = currentStyle();
+    const screen = state.activeTab === "parent"
+      ? renderParentGoals()
+      : state.activeTab === "kid"
+        ? renderKidGoals()
+        : renderHome();
+
+    root.innerHTML = `
+      <div class="phone" data-style="${state.defaultStyleId}" data-design-id="mobile-app-shell">
+        <header class="app-top">
+          <div class="brand-row">
+            <div class="brand-lockup">
+              <p class="eyebrow">V1 mobile review</p>
+              <h1 class="brand-title">Epic Errands</h1>
+            </div>
+            <span class="status-pill">${icon(style.icon)} ${escapeHtml(style.label)}</span>
+          </div>
+        </header>
+        <div class="screen-region">${screen}</div>
+        ${renderNav()}
+      </div>
+    `;
+  }
+
+  function updateGoal(goalId, updater) {
+    const goal = state.goals.find((item) => item.id === goalId);
+    if (goal) updater(goal);
+  }
+
+  root.addEventListener("click", (event) => {
+    const target = event.target.closest("[data-action]");
+    if (!target) return;
+
+    const action = target.dataset.action;
+    if (action === "select-style") {
+      state.defaultStyleId = target.dataset.style || state.defaultStyleId;
+      render();
+      return;
+    }
+
+    if (action === "nav") {
+      if (target.getAttribute("aria-disabled") === "true") return;
+      state.activeTab = target.dataset.tab || "home";
+      render();
+      return;
+    }
+
+    if (action === "select-goal") {
+      state.selectedGoalId = target.dataset.goalId || state.selectedGoalId;
+      render();
+      return;
+    }
+
+    if (action === "complete-goal") {
+      const goalId = target.dataset.goalId;
+      updateGoal(goalId, (goal) => {
+        goal.kidCompletionState = "completed";
+        if (goal.parentRewardState !== "approved_reward_given") {
+          goal.parentRewardState = "waiting_for_approval";
+        }
+      });
+      render();
+      return;
+    }
+
+    if (action === "approve-goal") {
+      const goalId = target.dataset.goalId;
+      updateGoal(goalId, (goal) => {
+        if (goal.kidCompletionState === "completed") {
+          goal.parentRewardState = "approved_reward_given";
+        }
+      });
+      render();
+    }
+  });
+
+  render();
+})();

frontend/styles/app.css

@@ -0,0 +1,786 @@
+:root {
+  --font-display: "Baloo 2", system-ui, sans-serif;
+  --font-body: "Nunito", system-ui, sans-serif;
+  --ink: #1f2a37;
+  --muted: #607086;
+  --line: rgba(31, 42, 55, 0.14);
+  --paper: #fffdf8;
+  --surface: #ffffff;
+  --soft: #f4f7fb;
+  --primary: #e3403a;
+  --primary-ink: #ffffff;
+  --success: #128a55;
+  --warning: #b36b00;
+  --shadow: 0 18px 42px rgba(30, 42, 64, 0.14);
+  --shadow-tight: 0 8px 22px rgba(30, 42, 64, 0.12);
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --nav-h: 76px;
+  color-scheme: light;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body {
+  min-height: 100%;
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  background: #dfe9f7;
+  color: var(--ink);
+  font-family: var(--font-body);
+  overflow: hidden;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:focus-visible,
+input:focus-visible {
+  outline: 3px solid rgba(31, 105, 255, 0.45);
+  outline-offset: 3px;
+}
+
+.material-symbols-rounded {
+  width: 1em;
+  max-width: 1em;
+  display: inline-block;
+  overflow: hidden;
+  font-family: "Material Symbols Rounded";
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  font-feature-settings: "liga";
+  line-height: 1;
+  text-transform: none;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.epic-app {
+  min-height: 100dvh;
+  height: 100dvh;
+  display: grid;
+  place-items: center;
+  padding: 18px;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.92), transparent 30%),
+    linear-gradient(135deg, #d8ebff 0%, #fff2d8 52%, #f5e9ff 100%);
+}
+
+.phone {
+  width: min(100%, 430px);
+  height: min(920px, calc(100dvh - 36px));
+  min-height: min(760px, calc(100dvh - 36px));
+  max-height: calc(100dvh - 36px);
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: auto minmax(0, 1fr) auto;
+  border: 1px solid rgba(31, 42, 55, 0.16);
+  border-radius: 30px;
+  background: var(--paper);
+  box-shadow: var(--shadow);
+}
+
+.phone[data-style="classroom"] {
+  --theme: #e3403a;
+  --theme-2: #1467b3;
+  --theme-3: #f7c948;
+  --theme-soft: #fff3d7;
+  --theme-panel: #f8fbff;
+  --theme-border: #9bc4ef;
+  --reward: #128a55;
+}
+
+.phone[data-style="magical"] {
+  --theme: #7652c7;
+  --theme-2: #0f877e;
+  --theme-3: #efb84a;
+  --theme-soft: #f2eaff;
+  --theme-panel: #fff7e4;
+  --theme-border: #c5b2f3;
+  --reward: #b36b00;
+}
+
+.phone[data-style="comic"] {
+  --theme: #136bd9;
+  --theme-2: #d62957;
+  --theme-3: #ffd33d;
+  --theme-soft: #fff2a8;
+  --theme-panel: #f8fbff;
+  --theme-border: #1f2a37;
+  --reward: #d64b20;
+}
+
+.app-top {
+  padding: 22px 20px 12px;
+  background:
+    linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.42)),
+    var(--theme-panel);
+  border-bottom: 1px solid var(--line);
+}
+
+.brand-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.brand-lockup {
+  min-width: 0;
+}
+
+.eyebrow {
+  margin: 0 0 2px;
+  color: var(--theme-2);
+  font-size: 12px;
+  font-weight: 900;
+  text-transform: uppercase;
+}
+
+.brand-title {
+  margin: 0;
+  color: var(--ink);
+  font-family: var(--font-display);
+  font-size: 29px;
+  line-height: 0.95;
+}
+
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.84);
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+  white-space: nowrap;
+}
+
+.screen-region {
+  min-height: 0;
+  overflow: auto;
+  overscroll-behavior: contain;
+  -webkit-overflow-scrolling: touch;
+  padding: 18px 18px calc(var(--nav-h) + 18px);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0)),
+    var(--theme-panel);
+}
+
+.screen {
+  display: grid;
+  gap: 14px;
+}
+
+.screen-head {
+  display: grid;
+  gap: 4px;
+}
+
+.screen-title {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 28px;
+  line-height: 1;
+}
+
+.screen-copy {
+  margin: 0;
+  color: var(--muted);
+  font-size: 15px;
+  font-weight: 800;
+  line-height: 1.35;
+}
+
+.panel,
+.goal-row,
+.kid-tile,
+.goal-card,
+.style-option,
+.avatar-slot {
+  border: 1px solid var(--line);
+  border-radius: var(--radius-md);
+  background: rgba(255, 255, 255, 0.9);
+  box-shadow: var(--shadow-tight);
+}
+
+.panel {
+  padding: 15px;
+}
+
+.section-label {
+  margin: 0 0 10px;
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 1000;
+  text-transform: uppercase;
+}
+
+.style-grid {
+  display: grid;
+  gap: 9px;
+}
+
+.style-option {
+  width: 100%;
+  min-height: 78px;
+  display: grid;
+  grid-template-columns: 46px 1fr auto;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  color: var(--ink);
+  text-align: left;
+}
+
+.style-option[aria-pressed="true"] {
+  border-color: var(--theme);
+  background: linear-gradient(135deg, var(--theme-soft), #fff);
+}
+
+.style-mark {
+  display: grid;
+  width: 46px;
+  height: 46px;
+  place-items: center;
+  border-radius: 14px;
+  background: var(--theme-soft);
+  color: var(--theme);
+}
+
+.style-name {
+  display: block;
+  font-size: 18px;
+  font-weight: 1000;
+}
+
+.style-meta {
+  display: block;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.25;
+}
+
+.selected-dot {
+  width: 18px;
+  height: 18px;
+  border: 2px solid var(--theme);
+  border-radius: 50%;
+}
+
+.style-option[aria-pressed="true"] .selected-dot {
+  background: radial-gradient(circle, var(--theme) 45%, transparent 49%);
+}
+
+.avatar-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.avatar-slot {
+  min-height: 134px;
+  padding: 12px;
+  display: grid;
+  align-content: space-between;
+  background:
+    linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.92)),
+    var(--theme-soft);
+}
+
+.avatar-face {
+  width: 62px;
+  height: 62px;
+  display: grid;
+  place-items: center;
+  border: 3px solid #fff;
+  border-radius: 22px;
+  background: linear-gradient(135deg, var(--theme-3), var(--theme-soft));
+  color: var(--ink);
+  box-shadow: var(--shadow-tight);
+}
+
+.avatar-name {
+  margin: 10px 0 0;
+  font-size: 16px;
+  font-weight: 1000;
+}
+
+.avatar-title {
+  margin: 2px 0 0;
+  color: var(--muted);
+  font-size: 12px;
+  font-weight: 900;
+}
+
+.privacy-note {
+  display: flex;
+  gap: 8px;
+  align-items: flex-start;
+  margin: 0;
+  color: #4d6174;
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.counter-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.counter {
+  min-height: 96px;
+  display: grid;
+  align-content: center;
+  gap: 2px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  background: var(--surface);
+  border: 1px solid var(--line);
+}
+
+.counter strong {
+  color: var(--theme);
+  font-family: var(--font-display);
+  font-size: 38px;
+  line-height: 0.9;
+}
+
+.counter span {
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 900;
+}
+
+.goal-list {
+  display: grid;
+  gap: 10px;
+}
+
+.goal-row {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 10px;
+  padding: 13px;
+}
+
+.goal-main {
+  min-width: 0;
+}
+
+.goal-title-line {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-bottom: 5px;
+}
+
+.goal-name {
+  font-size: 17px;
+  font-weight: 1000;
+}
+
+.goal-plain {
+  margin: 0;
+  color: var(--muted);
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  min-height: 24px;
+  padding: 0 8px;
+  border-radius: 999px;
+  background: var(--theme-soft);
+  color: var(--theme);
+  font-size: 11px;
+  font-weight: 1000;
+  white-space: nowrap;
+}
+
+.chip.success {
+  background: #e6f7ee;
+  color: var(--success);
+}
+
+.chip.waiting {
+  background: #fff4d8;
+  color: var(--warning);
+}
+
+.approve-button,
+.complete-button,
+.audio-button {
+  min-height: 44px;
+  border: 0;
+  border-radius: 999px;
+  padding: 0 14px;
+  background: var(--theme);
+  color: var(--primary-ink);
+  font-weight: 1000;
+  box-shadow: var(--shadow-tight);
+}
+
+.approve-button:disabled,
+.audio-button:disabled {
+  cursor: not-allowed;
+  border: 1px solid var(--line);
+  background: #eef2f7;
+  color: #6b7888;
+  box-shadow: none;
+}
+
+.kid-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.kid-tile {
+  min-height: 178px;
+  overflow: hidden;
+  text-align: left;
+  color: var(--ink);
+}
+
+.kid-tile img {
+  width: 100%;
+  height: 96px;
+  display: block;
+  object-fit: cover;
+  background: var(--theme-soft);
+}
+
+.tile-body {
+  display: grid;
+  gap: 6px;
+  padding: 10px;
+}
+
+.tile-title {
+  min-height: 38px;
+  font-size: 15px;
+  font-weight: 1000;
+  line-height: 1.1;
+}
+
+.goal-card {
+  overflow: hidden;
+}
+
+.goal-card-hero {
+  position: relative;
+  min-height: 188px;
+  background: var(--theme-soft);
+}
+
+.goal-card-hero img {
+  width: 100%;
+  height: 206px;
+  display: block;
+  object-fit: cover;
+}
+
+.hero-badge {
+  position: absolute;
+  left: 12px;
+  bottom: 12px;
+  max-width: calc(100% - 24px);
+  padding: 8px 10px;
+  border: 1px solid rgba(255, 255, 255, 0.72);
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.9);
+  color: var(--theme);
+  font-size: 12px;
+  font-weight: 1000;
+}
+
+.goal-card-body {
+  display: grid;
+  gap: 12px;
+  padding: 14px;
+  background: var(--surface);
+}
+
+.goal-card h2 {
+  margin: 0;
+  font-family: var(--font-display);
+  font-size: 28px;
+  line-height: 0.98;
+}
+
+.step-list {
+  display: grid;
+  gap: 8px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.step-list li {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  align-items: center;
+  gap: 9px;
+  min-height: 42px;
+  padding: 7px 10px;
+  border-radius: 13px;
+  background: var(--soft);
+  font-weight: 900;
+}
+
+.step-index {
+  display: grid;
+  width: 32px;
+  height: 32px;
+  place-items: center;
+  border-radius: 50%;
+  background: var(--theme-soft);
+  color: var(--theme);
+  font-weight: 1000;
+}
+
+.card-actions {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 10px;
+}
+
+.audio-button {
+  background: #eef2f7;
+  color: #536273;
+}
+
+.complete-button {
+  min-height: 54px;
+  background: var(--reward);
+  font-size: 16px;
+}
+
+.waiting-panel,
+.reward-panel {
+  display: grid;
+  gap: 5px;
+  padding: 12px;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--line);
+}
+
+.waiting-panel {
+  background: #fff5dd;
+  color: #744800;
+}
+
+.reward-panel {
+  background: #eaf9f0;
+  color: #105c3a;
+}
+
+.waiting-panel strong,
+.reward-panel strong {
+  font-size: 15px;
+}
+
+.waiting-panel span,
+.reward-panel span {
+  font-size: 13px;
+  font-weight: 800;
+  line-height: 1.3;
+}
+
+.nav {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  min-height: var(--nav-h);
+  border-top: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.96);
+}
+
+.nav-button {
+  display: grid;
+  place-items: center;
+  align-content: center;
+  gap: 4px;
+  min-width: 0;
+  border: 0;
+  background: transparent;
+  color: #68778a;
+  font-size: 11px;
+  font-weight: 1000;
+}
+
+.nav-button.is-active {
+  color: var(--theme);
+}
+
+.nav-button[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.46;
+}
+
+.empty-state {
+  display: grid;
+  place-items: center;
+  min-height: 260px;
+  padding: 24px;
+  border: 1px dashed var(--line);
+  border-radius: var(--radius-lg);
+  background: rgba(255, 255, 255, 0.58);
+  color: var(--muted);
+  text-align: center;
+  font-weight: 900;
+}
+
+@media (max-width: 520px) {
+  .epic-app {
+    padding: 0;
+    min-height: 100dvh;
+    height: 100dvh;
+  }
+
+  .phone {
+    width: 100%;
+    height: 100dvh;
+    min-height: 0;
+    max-height: 100dvh;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto;
+    overflow: hidden;
+    border: 0;
+    border-radius: 0;
+  }
+
+  .app-top {
+    padding: 14px 16px 10px;
+  }
+
+  .brand-title {
+    font-size: 25px;
+  }
+
+  .status-pill {
+    min-height: 30px;
+    font-size: 11px;
+  }
+
+  .screen-region {
+    min-height: 0;
+    overflow-y: auto;
+    padding: 14px 14px 16px;
+  }
+
+  .screen {
+    min-height: auto;
+    gap: 10px;
+  }
+
+  .screen-head {
+    gap: 2px;
+  }
+
+  .screen-title {
+    font-size: 26px;
+  }
+
+  .screen-copy {
+    font-size: 13px;
+  }
+
+  .panel {
+    padding: 11px;
+  }
+
+  .section-label {
+    margin-bottom: 7px;
+    font-size: 12px;
+  }
+
+  .style-grid {
+    gap: 7px;
+  }
+
+  .style-option {
+    min-height: 62px;
+    grid-template-columns: 38px 1fr auto;
+    gap: 9px;
+    padding: 9px;
+  }
+
+  .style-mark {
+    width: 38px;
+    height: 38px;
+    border-radius: 12px;
+  }
+
+  .style-name {
+    font-size: 16px;
+  }
+
+  .style-meta {
+    font-size: 12px;
+  }
+
+  .avatar-slot {
+    min-height: 108px;
+  }
+
+  .avatar-face {
+    width: 50px;
+    height: 50px;
+    border-radius: 18px;
+  }
+
+  .counter {
+    min-height: 76px;
+  }
+
+  .counter strong {
+    font-size: 30px;
+  }
+
+  .nav {
+    min-height: 68px;
+  }
+}
+
+@media (max-width: 374px) {
+  .screen-region {
+    padding-inline: 12px;
+  }
+
+  .kid-grid,
+  .counter-grid {
+    gap: 8px;
+  }
+
+  .screen-title,
+  .goal-card h2 {
+    font-size: 25px;
+  }
+}

frontend/styles/components.css

@@ -0,0 +1,224 @@
+* {
+  box-sizing: border-box;
+}
+
+html {
+  min-height: 100%;
+  background:
+    radial-gradient(circle at 8% 0%, rgba(115, 202, 241, 0.28), transparent 34%),
+    radial-gradient(circle at 90% 18%, rgba(255, 242, 181, 0.45), transparent 30%),
+    linear-gradient(180deg, #f9fdff 0%, #fffaf3 100%);
+}
+
+body {
+  min-height: 100%;
+  margin: 0;
+  color: var(--color-ink);
+  font-family: var(--font-body);
+  font-size: 16px;
+  line-height: 1.45;
+}
+
+button,
+input {
+  font: inherit;
+}
+
+button {
+  cursor: pointer;
+}
+
+button:focus-visible,
+input:focus-visible,
+summary:focus-visible {
+  outline: 3px solid rgba(27, 103, 213, 0.35);
+  outline-offset: 3px;
+}
+
+.material-symbols-rounded {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: "Material Symbols Rounded";
+  font-size: 24px;
+  font-style: normal;
+  font-weight: normal;
+  line-height: 1;
+  text-transform: none;
+  white-space: nowrap;
+  direction: ltr;
+  -webkit-font-feature-settings: "liga";
+  -webkit-font-smoothing: antialiased;
+}
+
+.app-frame {
+  position: relative;
+  width: min(100%, var(--frame-width));
+  min-height: 100vh;
+  margin: 0 auto;
+  overflow: hidden;
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 252, 246, 0.98)),
+    repeating-linear-gradient(180deg, transparent 0 62px, rgba(38, 97, 165, 0.08) 63px 64px);
+  border: 1px solid rgba(204, 214, 225, 0.8);
+  border-radius: 10px;
+  box-shadow: var(--shadow-card);
+}
+
+.app-frame::before {
+  position: absolute;
+  inset: -10px -10px auto -10px;
+  height: 160px;
+  content: "";
+  pointer-events: none;
+  background:
+    radial-gradient(ellipse at 12% 12%, rgba(95, 185, 231, 0.16), transparent 44%),
+    radial-gradient(ellipse at 82% 0%, rgba(165, 221, 247, 0.42), transparent 36%);
+}
+
+.screen {
+  position: relative;
+  z-index: 1;
+  min-height: 100vh;
+}
+
+.brand-wordmark {
+  display: inline-grid;
+  gap: 0;
+  font-family: var(--font-display);
+  font-size: clamp(34px, 8vw, 50px);
+  font-weight: 800;
+  line-height: 0.82;
+}
+
+.brand-wordmark span:first-child {
+  color: var(--color-primary);
+  text-shadow: 0 2px 0 #ffe17d;
+}
+
+.brand-wordmark span:last-child {
+  color: #122346;
+  transform: rotate(-5deg);
+}
+
+.icon-button,
+.pill-button,
+.segmented-button,
+.tone-card,
+.goal-row,
+.photo-card,
+.photo-uploader {
+  border: 1px solid var(--color-line);
+  background: var(--color-paper);
+  color: var(--color-ink);
+  box-shadow: var(--shadow-soft);
+}
+
+.icon-button {
+  display: inline-flex;
+  width: 64px;
+  height: 64px;
+  align-items: center;
+  justify-content: center;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.95);
+  color: #10264a;
+}
+
+.pill-button {
+  display: inline-flex;
+  min-height: 46px;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-5);
+  border-radius: var(--radius-pill);
+  font-weight: 800;
+}
+
+.status-line,
+.runtime-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  color: var(--color-ink-muted);
+  font-size: 13px;
+  font-weight: 700;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #5acb85;
+}
+
+.primary-action,
+.done-action {
+  display: inline-flex;
+  width: min(100%, 392px);
+  min-height: 58px;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-3);
+  border: 0;
+  border-radius: var(--radius-pill);
+  color: white;
+  font-family: var(--font-display);
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.primary-action {
+  background: linear-gradient(180deg, #ff3f38, var(--color-primary));
+  box-shadow: var(--shadow-button);
+}
+
+.done-action {
+  background: linear-gradient(180deg, #18ba75, var(--color-success));
+  box-shadow: 0 6px 0 rgba(8, 115, 71, 0.16), 0 14px 28px rgba(17, 169, 104, 0.22);
+}
+
+.primary-action:active,
+.done-action:active {
+  transform: translateY(2px);
+}
+
+.screen-title {
+  margin: 0;
+  color: var(--color-ink);
+  font-family: var(--font-display);
+  font-size: clamp(42px, 10vw, 55px);
+  font-weight: 800;
+  line-height: 0.95;
+  text-align: center;
+}
+
+.field-label {
+  display: flex;
+  align-items: baseline;
+  gap: var(--space-1);
+  margin: 0 0 var(--space-3);
+  color: var(--color-ink);
+  font-size: 18px;
+  font-weight: 900;
+}
+
+.field-label span {
+  color: var(--color-ink-soft);
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}

frontend/styles/tokens.css

@@ -0,0 +1,54 @@
+:root {
+  color-scheme: light;
+
+  --font-display: "Baloo 2", "Trebuchet MS", system-ui, sans-serif;
+  --font-body: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+
+  --color-ink: #13213c;
+  --color-ink-soft: #536076;
+  --color-ink-muted: #7c8596;
+  --color-paper: #fffdfa;
+  --color-paper-warm: #fff7e7;
+  --color-line: #e7e1d8;
+  --color-line-strong: #d8cdbd;
+  --color-sky: #dff5ff;
+  --color-sky-strong: #43b7ee;
+  --color-primary: #ef332d;
+  --color-primary-deep: #cf241f;
+  --color-success: #11a968;
+  --color-success-deep: #078a54;
+  --color-school-blue: #1b67d5;
+  --color-pencil: #f6b21a;
+  --color-mint: #e9fff4;
+  --color-parchment: #fff0c9;
+  --color-parchment-edge: #e0b76b;
+  --color-warning: #ff8b20;
+  --color-lavender: #a64ce8;
+  --color-shadow: rgba(33, 43, 68, 0.16);
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 32px;
+  --space-8: 40px;
+  --space-9: 56px;
+
+  --radius-sm: 10px;
+  --radius-md: 14px;
+  --radius-lg: 18px;
+  --radius-xl: 24px;
+  --radius-pill: 999px;
+
+  --shadow-card: 0 12px 32px var(--color-shadow);
+  --shadow-soft: 0 8px 18px rgba(34, 42, 62, 0.11);
+  --shadow-sticker: 0 7px 14px rgba(47, 39, 28, 0.22);
+  --shadow-button: 0 6px 0 rgba(145, 28, 24, 0.16), 0 14px 28px rgba(239, 51, 45, 0.22);
+
+  --frame-width: 732px;
+  --duration-fast: 160ms;
+  --duration-med: 260ms;
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+}

requirements.txt

@@ -0,0 +1 @@
+gradio>=6.18.0