Deploy Epic Errands UI refresh

.gitattributes

@@ -47,3 +47,25 @@ frontend/assets/generated-audio-3-read-for-20-minutes-5e944b16.wav filter=lfs di
 frontend/assets/generated-hero-1-clean-up-my-room-before-dinner-07b300bc.png filter=lfs diff=lfs merge=lfs -text
 frontend/assets/generated-hero-2-finish-my-class-project-outline-4a8a06bc.png filter=lfs diff=lfs merge=lfs -text
 frontend/assets/generated-hero-3-read-for-20-minutes-3781199a.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/demo-placeholders/placeholder-boy-720.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/demo-placeholders/placeholder-female-parent-720.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/demo-placeholders/placeholder-girl-720.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/demo-placeholders/placeholder-male-parent-720.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/clean-room-classroom-c5cb506427.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/clean-room-classroom-cf6f43d6ce.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/clean-room-comic-88b770a8dc.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/clean-room-comic-9bce2b2b21.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/clean-room-questbook-01493f395c.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/clean-room-questbook-d35e6ee10c.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/project-outline-classroom-3783f10bae.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/project-outline-classroom-70a886be5a.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/project-outline-comic-4f9eaa443a.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/project-outline-comic-ef3f180846.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/project-outline-questbook-bddf03af1a.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/project-outline-questbook-e1d5ced2e8.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/read-20-classroom-7c13f43782.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/read-20-classroom-cca67b8288.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/read-20-comic-7ec8c91bf8.wav filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/read-20-comic-b5ae2d561a.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/read-20-questbook-39aac8ba25.png filter=lfs diff=lfs merge=lfs -text
+frontend/assets/generated-v2/read-20-questbook-5805518930.wav filter=lfs diff=lfs merge=lfs -text

README.md

@@ -21,8 +21,8 @@ The prototype includes:
 
 - Home, Parent Goals, Kid Goals, and disabled DIY Lab navigation.
 - Quest, Classroom, and Comic app theme switching.
-- Quest is the default visible theme; the internal style id `magical` is kept
-  only for V1 compatibility.
+- Questbook is the default visible theme; the canonical internal style id is
+  `questbook`, with legacy `magical` accepted only as a compatibility alias.
 - Theme-based parent/kid titles such as Quest Keeper and Young Adventurer.
 - Kid completion state separated from parent approval/reward state.
 - Parent approve-only reward flow.

epic_errands_space/quest_generation.py

@@ -27,8 +27,9 @@ VOXCPM2_MODEL_ID = "openbmb/VoxCPM2"
 NEMOTRON_SPEECH_MODEL_ID = "nvidia/nemotron-speech-streaming-en-0.6b"
 
 THEME_ALIASES = {
-    "quest": "magical",
-    "magical": "magical",
+    "quest": "questbook",
+    "questbook": "questbook",
+    "magical": "questbook",
     "class": "classroom",
     "classroom": "classroom",
     "comic": "comic",
@@ -66,7 +67,7 @@ def default_goal_payload() -> list[dict[str, str]]:
     return [{"id": goal.id, "text": goal.text} for goal in DEFAULT_GOALS]
 
 
-def _theme(value: Any, fallback: str = "magical") -> str:
+def _theme(value: Any, fallback: str = "questbook") -> str:
     normalized = str(value or fallback).strip().lower()
     return THEME_ALIASES.get(normalized, fallback)
 
@@ -83,12 +84,12 @@ def normalize_goals(raw_goals: Any) -> list[dict[str, str]]:
             goals.append({
                 "id": str(item.get("id") or f"goal-{index + 1}"),
                 "text": text,
-                "theme": _theme(item.get("theme") or item.get("style_id"), "magical"),
+                "theme": _theme(item.get("theme") or item.get("style_id"), "questbook"),
             })
             if len(goals) == 3:
                 break
 
-    fallback_themes = ["magical", "classroom", "comic"]
+    fallback_themes = ["questbook", "classroom", "comic"]
     for fallback_index, fallback in enumerate(default_goal_payload()):
         if len(goals) == 3:
             break
@@ -144,7 +145,7 @@ def _step_key(goal_text: str) -> str:
     return "default"
 
 
-def _quest_title(goal_text: str, tone: str, theme: str = "magical") -> str:
+def _quest_title(goal_text: str, tone: str, theme: str = "questbook") -> str:
     lowered = goal_text.lower()
     if theme == "classroom":
         noun = "Quest"
@@ -155,7 +156,7 @@ def _quest_title(goal_text: str, tone: str, theme: str = "magical") -> str:
     tone_word = {
         "cozy": "Cozy",
         "brave": "Brave",
-        "magical": "Quest",
+        "questbook": "Quest",
         "silly": "Silly",
         "epic": "Epic",
     }.get(tone, "Cozy")
@@ -178,9 +179,9 @@ def _why_it_helps(goal_text: str) -> str:
 
 
 def _prompt_for_goal(goal: dict[str, str], tone: str) -> str:
-    theme = _theme(goal.get("theme"), "magical")
+    theme = _theme(goal.get("theme"), "questbook")
     visual_direction = {
-        "magical": (
+        "questbook": (
             "premium storybook quest card, warm paper, gentle fantasy props, "
             "earned crest, no monsters or threats"
         ),
@@ -202,6 +203,117 @@ def _prompt_for_goal(goal: dict[str, str], tone: str) -> str:
     )
 
 
+def _theme_label(theme: str) -> str:
+    return {
+        "questbook": "Questbook",
+        "classroom": "Classroom",
+        "comic": "Comic",
+    }.get(_theme(theme), theme.title())
+
+
+def _text_prompt_for_goal(goal: dict[str, str]) -> str:
+    theme = _theme_label(_theme(goal.get("theme"), "questbook"))
+    return (
+        "Create a kid-safe Epic Errands goal card for an 8-year-old. "
+        f"Theme: {theme}. Plain goal: \"{goal['text']}\". "
+        "Return compact JSON only with keys title, narration, and reward_label. "
+        "Do not include task lists, verification fields, snake_case, UI copy, or "
+        "image text. Keep the ordinary goal visible, positive, parent-readable, and "
+        "achievable. No shame, threats, monsters, weapons, private details, readable "
+        "image text, or user photo references."
+    )
+
+
+def _card_prompt_block(card_text: dict[str, Any] | None) -> str:
+    if not isinstance(card_text, dict) or not card_text:
+        return "Generated Epic Errand card text is unavailable; use the plain goal only."
+    return (
+        f"{str(card_text.get('title') or '').strip()}. "
+        f"{str(card_text.get('narration') or '').strip()}"
+    )
+
+
+def _scene_hint_for_goal(goal_text: str) -> str:
+    lowered = goal_text.lower()
+    if "room" in lowered or "clean" in lowered:
+        return (
+            "Show a child tidying a bright bedroom, placing toys in bins and books "
+            "on shelves, with a cozy dinner glow through the doorway. All papers, "
+            "walls, signs, books, covers, and surfaces are completely blank."
+        )
+    if "project" in lowered or "class" in lowered:
+        return (
+            "Show a child organizing blank papers, colored shapes, pencils, and a "
+            "calm desk, with an encouraging adult nearby. Every worksheet, poster, "
+            "paper, notebook, and board is completely blank."
+        )
+    if "read" in lowered:
+        return (
+            "Show a child enjoying a quiet reading moment in a cozy seat with warm "
+            "light and a single plain book. Use a simple background with no bookshelf, "
+            "no book spines, no posters, and no decorative labels. The book cover, "
+            "book pages, and all background surfaces are completely blank."
+        )
+    return "Show a child-safe everyday accomplishment scene tied to the plain goal."
+
+
+def _image_prompt_for_card(goal: dict[str, str], tone: str, card_text: dict[str, Any] | None) -> str:
+    theme = _theme(goal.get("theme"), "questbook")
+    visual_direction = {
+        "questbook": (
+            "Warm fantasy story illustration, soft lantern light, gentle adventure "
+            "props, cozy handcrafted polish, full-bleed scene, no parchment border, "
+            "no title plaque, no banner."
+        ),
+        "classroom": (
+            "Sunny learning illustration, tidy supplies, pencils, blank notebooks, "
+            "calm school-day polish, simple blank walls, no posters, no signs."
+        ),
+        "comic": (
+            "Bright cartoon action illustration, bold shapes, clean motion lines, "
+            "cheerful everyday hero energy, full-bleed scene, no frame, no panel, "
+            "no banner, no speech bubble."
+        ),
+    }[theme]
+    return (
+        "Generate an image-only hero illustration for a child goal app. "
+        f"Tone: {tone}. "
+        f"{visual_direction} {_scene_hint_for_goal(goal['text'])} "
+        "This is not a poster, title card, label, worksheet, book cover, or UI. Do not render any "
+        "words, alphabet letters, numerals, captions, labels, signs, handwriting, "
+        "book titles, speech bubbles, sound effects, logos, or UI text. Use image "
+        "composition only; all paper and book surfaces stay blank; no user photos, "
+        "no monsters or threats."
+    )
+
+
+def _audio_prompt_for_card(goal: dict[str, str], card_text: dict[str, Any] | None) -> str:
+    theme = _theme(goal.get("theme"), "questbook")
+    voice_direction = {
+        "questbook": "gentle Questbook narrator, warm, clear, encouraging, paced for a child",
+        "classroom": "warm teacher, clear, encouraging, calm classroom cadence",
+        "comic": "upbeat comic narrator, energetic but not loud or frantic, clear and encouraging",
+    }[theme]
+    return (
+        "Generate a friendly spoken version of the Epic Errand produced by the text model. "
+        f"Plain goal: \"{goal['text']}\". Theme: {_theme_label(theme)}. "
+        f"Voice direction: {voice_direction}. Speak only the title and short narration "
+        f"from this generated card text: {_card_prompt_block(card_text)} "
+        "Do not add internal field names, warnings, or unrelated commentary."
+    )
+
+
+def _spoken_text_for_card(goal: dict[str, str], card_text: dict[str, Any] | None) -> str:
+    if not isinstance(card_text, dict) or not card_text:
+        return f"Your Epic Errands card is ready. Today's goal is: {goal['text']}."
+    parts = [
+        str(card_text.get("title") or "").strip(),
+        str(card_text.get("narration") or "").strip(),
+    ]
+    spoken = " ".join(part for part in parts if part)
+    return spoken or f"Your Epic Errands card is ready. Today's goal is: {goal['text']}."
+
+
 def _fallback_image_result(goal: dict[str, str], index: int, reason: str) -> dict[str, Any]:
     return {
         "goal_id": goal["id"],
@@ -210,6 +322,7 @@ def _fallback_image_result(goal: dict[str, str], index: int, reason: str) -> dic
         "hero_src": _asset_to_data_uri(FALLBACK_HERO),
         "origin": "deterministic_fallback",
         "prompt_summary": f"Fallback classroom adventure image for goal: {goal['text']}",
+        "resolved_image_prompt": _image_prompt_for_card(goal, "cozy", None),
         "runtime_metadata": _runtime_metadata(
             fallback_used=True,
             fallback_reason=reason,
@@ -218,21 +331,19 @@ def _fallback_image_result(goal: dict[str, str], index: int, reason: str) -> dic
 
 
 def _fallback_card_text(goal: dict[str, str], tone: str, reason: str) -> dict[str, Any]:
-    steps = [label for label, _icon in STEP_LIBRARY[_step_key(goal["text"])]][:3]
     return {
         "goal_id": goal["id"],
         "ordinary_goal": goal["text"],
-        "theme": _theme(goal.get("theme"), "magical"),
+        "theme": _theme(goal.get("theme"), "questbook"),
         "model_key": "deterministic_fallback",
         "model_id": "none",
         "schema_valid": True,
         "raw_text": "",
+        "text_prompt": _text_prompt_for_goal(goal),
         "card_text": {
-            "title": _quest_title(goal["text"], tone, _theme(goal.get("theme"), "magical")),
+            "title": _quest_title(goal["text"], tone, _theme(goal.get("theme"), "questbook")),
             "narration": f"Your goal card is ready: {goal['text']}. Take it one small step at a time.",
-            "steps": steps,
             "reward_label": "Quest Hero",
-            "completion_check": "Done when the ordinary goal is truly finished.",
         },
         "runtime_metadata": _runtime_metadata(fallback_used=True, fallback_reason=reason),
     }
@@ -242,10 +353,11 @@ def _fallback_audio_result(goal: dict[str, str], index: int, reason: str) -> dic
     return {
         "goal_id": goal["id"],
         "ordinary_goal": goal["text"],
-        "theme": _theme(goal.get("theme"), "magical"),
+        "theme": _theme(goal.get("theme"), "questbook"),
         "audio_asset_name": "",
         "audio_src": "",
         "spoken_text": "",
+        "resolved_audio_prompt": _audio_prompt_for_card(goal, None),
         "runtime_metadata": _runtime_metadata(
             model_backend="modal_http",
             model_id=VOXCPM2_MODEL_ID,
@@ -310,7 +422,11 @@ def _cached_images_for(goals: list[dict[str, str]]) -> list[dict[str, Any]] | No
     return results
 
 
-def _call_modal(goals: list[dict[str, str]], tone: str) -> tuple[list[dict[str, Any]], dict[str, Any]]:
+def _call_modal(
+    goals: list[dict[str, str]],
+    tone: str,
+    card_texts: dict[str, dict[str, Any]] | None = None,
+) -> tuple[list[dict[str, Any]], dict[str, Any]]:
     base_url = os.environ.get("EPIC_MODAL_IMAGE_URL", "").strip() or 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"))
@@ -322,8 +438,9 @@ def _call_modal(goals: list[dict[str, str]], tone: str) -> tuple[list[dict[str,
             {
                 "goal_id": goal["id"],
                 "ordinary_goal": goal["text"],
-                "theme": _theme(goal.get("theme"), "magical"),
-                "prompt": _prompt_for_goal(goal, tone),
+                "theme": _theme(goal.get("theme"), "questbook"),
+                "card_text": (card_texts or {}).get(goal["id"], {}),
+                "prompt": _image_prompt_for_card(goal, tone, (card_texts or {}).get(goal["id"])),
                 "seed": 26000 + index,
             }
             for index, goal in enumerate(goals)
@@ -380,6 +497,7 @@ def _call_modal(goals: list[dict[str, str]], tone: str) -> tuple[list[dict[str,
             "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)),
+            "resolved_image_prompt": output.get("resolved_image_prompt", output.get("prompt_summary", "")),
             "runtime_metadata": metadata,
             "seed": output.get("seed", 26000 + index),
         })
@@ -418,7 +536,8 @@ def _call_text_model(goals: list[dict[str, str]], model_key: str) -> tuple[list[
                 {
                     "goal_id": goal["id"],
                     "ordinary_goal": goal["text"],
-                    "theme": _theme(goal.get("theme"), "magical"),
+                    "theme": _theme(goal.get("theme"), "questbook"),
+                    "text_prompt": _text_prompt_for_goal(goal),
                 }
                 for goal in goals
             ],
@@ -458,8 +577,10 @@ def _call_voxcpm2(goals: list[dict[str, str]], card_texts: dict[str, dict[str, A
                 {
                     "goal_id": goal["id"],
                     "ordinary_goal": goal["text"],
-                    "theme": _theme(goal.get("theme"), "magical"),
-                    "narration": str(card_texts.get(goal["id"], {}).get("narration") or ""),
+                    "theme": _theme(goal.get("theme"), "questbook"),
+                    "card_text": card_texts.get(goal["id"], {}),
+                    "audio_prompt": _audio_prompt_for_card(goal, card_texts.get(goal["id"])),
+                    "narration": _spoken_text_for_card(goal, card_texts.get(goal["id"])),
                 }
                 for goal in goals
             ],
@@ -497,11 +618,12 @@ def _call_voxcpm2(goals: list[dict[str, str]], card_texts: dict[str, dict[str, A
         saved.append({
             "goal_id": goal["id"],
             "ordinary_goal": goal["text"],
-            "theme": _theme(goal.get("theme"), "magical"),
+            "theme": _theme(goal.get("theme"), "questbook"),
             "audio_asset_name": asset_name,
             "audio_src": f"data:audio/wav;base64,{base64.b64encode(audio_bytes).decode('ascii')}",
             "audio_wav_base64": audio_b64,
             "spoken_text": output.get("spoken_text", ""),
+            "resolved_audio_prompt": output.get("resolved_audio_prompt", output.get("audio_prompt", "")),
             "sample_rate": output.get("sample_rate"),
             "runtime_metadata": metadata,
         })
@@ -557,19 +679,11 @@ def _quest_for_goal(
     audio_results: dict[str, dict[str, Any]] | None = None,
     asr_results: dict[str, dict[str, Any]] | None = None,
 ) -> 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"])])
-    ]
-    theme = _theme(goal.get("theme"), "magical")
+    steps: list[dict[str, str]] = []
+    theme = _theme(goal.get("theme"), "questbook")
     primary_text = (text_results or {}).get(goal["id"], {})
     secondary_text = (secondary_text_results or {}).get(goal["id"], {})
     card_text = primary_text.get("card_text") or _fallback_card_text(goal, tone, "Primary text model did not return card_text.")["card_text"]
-    if isinstance(card_text.get("steps"), list) and card_text["steps"]:
-        steps = [
-            {"id": f"{goal['id']}-step-{step_index + 1}", "label": str(label), "icon": "flag"}
-            for step_index, label in enumerate(card_text["steps"][:4])
-        ]
     audio = (audio_results or {}).get(goal["id"], {})
     asr = (asr_results or {}).get(goal["id"], {})
     return {
@@ -584,13 +698,22 @@ def _quest_for_goal(
         "hero_alt": f"Storybook classroom adventure for {goal['text']}",
         "reward": {
             "label": str(card_text.get("reward_label") or (["Idea Builder", "Lantern Reader", "Tidy Hero"][index] if index < 3 else "Quest Hero")),
-            "description": str(card_text.get("completion_check") or "Reward earned after all steps are complete."),
+            "description": "Reward earned when the ordinary goal is finished.",
         },
         "steps": steps,
         "narration": str(card_text.get("narration") or ""),
         "why_it_helps": _why_it_helps(goal["text"]),
         "image_origin": image_result.get("origin", "unknown"),
         "prompt_summary": image_result.get("prompt_summary", ""),
+        "generation_trace": {
+            "text_prompt": primary_text.get("text_prompt", _text_prompt_for_goal(goal)),
+            "card_text": card_text,
+            "image_prompt_template": "Generated Epic Errand meaning + theme visual direction + strict no-text negatives.",
+            "resolved_image_prompt": image_result.get("resolved_image_prompt", image_result.get("prompt_summary", "")),
+            "audio_prompt_template": "Generated Epic Errand title/narration + theme voice direction + no-field-name rule.",
+            "resolved_audio_prompt": audio.get("resolved_audio_prompt", _audio_prompt_for_card(goal, card_text)),
+            "spoken_text": audio.get("spoken_text", _spoken_text_for_card(goal, card_text)),
+        },
         "runtime_metadata": image_result.get("runtime_metadata", _runtime_metadata()),
         "text_models": {
             "primary": primary_text,
@@ -605,32 +728,57 @@ def _quest_for_goal(
     }
 
 
+def _agent_trace_row(quest: dict[str, Any], run_generated_at: str) -> dict[str, Any]:
+    trace = quest.get("generation_trace", {})
+    primary_text = quest.get("text_models", {}).get("primary", {})
+    secondary_text = quest.get("text_models", {}).get("secondary", {})
+    image_runtime = quest.get("runtime_metadata", _runtime_metadata())
+    speech_runtime = quest.get("speech_runtime_metadata", _runtime_metadata())
+    asr_runtime = quest.get("asr_runtime_metadata", _runtime_metadata())
+    plain_goal = str(quest.get("ordinary_goal") or "")
+    theme = str(quest.get("theme") or "")
+    trace_hash = hashlib.sha1(f"{plain_goal}:{theme}:{run_generated_at}".encode("utf-8")).hexdigest()[:10]
+    return {
+        "trace_id": f"epic-errands-v1-{trace_hash}",
+        "generated_at": run_generated_at,
+        "goal_id": quest.get("source_goal_id", ""),
+        "plain_goal": plain_goal,
+        "theme": theme,
+        "text_model_primary": primary_text.get("model_id", image_runtime.get("model_id", "none")),
+        "text_model_secondary": secondary_text.get("model_id", ""),
+        "text_prompt": trace.get("text_prompt", ""),
+        "card_text": trace.get("card_text", {}),
+        "image_model_id": image_runtime.get("model_id", MODEL_ID),
+        "image_prompt_template": trace.get("image_prompt_template", ""),
+        "resolved_image_prompt": trace.get("resolved_image_prompt", ""),
+        "image_asset_path": quest.get("hero_asset_name", ""),
+        "audio_model_id": speech_runtime.get("model_id", VOXCPM2_MODEL_ID),
+        "audio_prompt_template": trace.get("audio_prompt_template", ""),
+        "resolved_audio_prompt": trace.get("resolved_audio_prompt", ""),
+        "spoken_text": trace.get("spoken_text", quest.get("spoken_text", "")),
+        "audio_asset_path": quest.get("audio_asset_name", ""),
+        "asr_model_id": asr_runtime.get("model_id", NEMOTRON_SPEECH_MODEL_ID),
+        "asr_transcript": quest.get("asr_transcript", ""),
+        "runtime_axes": {
+            "image": image_runtime,
+            "audio": speech_runtime,
+            "asr": asr_runtime,
+        },
+        "fallback_used": (
+            bool(image_runtime.get("fallback_used", True))
+            or bool(speech_runtime.get("fallback_used", True))
+            or bool(asr_runtime.get("fallback_used", True))
+            or bool(primary_text.get("runtime_metadata", {}).get("fallback_used", False))
+        ),
+    }
+
+
 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)
-
     text_blocker = ""
     minicpm_results = [_fallback_card_text(goal, tone, "Live text generation is disabled.") for goal in goals]
     nemotron3_results = [_fallback_card_text(goal, tone, "Live text generation is disabled.") for goal in goals]
@@ -650,16 +798,36 @@ def build_quest_pack(payload: dict[str, Any] | None = None, *, use_cache: bool =
 
     minicpm_by_id = {item["goal_id"]: item for item in minicpm_results}
     nemotron3_by_id = {item["goal_id"]: item for item in nemotron3_results}
+    primary_card_texts = {
+        goal_id: result.get("card_text") or {}
+        for goal_id, result in minicpm_by_id.items()
+        if isinstance(result, dict)
+    }
+
+    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, primary_card_texts)
+        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)
 
     audio_blocker = ""
     audio_results = [_fallback_audio_result(goal, index, "Live speech generation is disabled.") for index, goal in enumerate(goals)]
     speech_metadata: dict[str, Any] = {}
     if os.environ.get("EPIC_ENABLE_LIVE_GENERATION") == "1":
-        primary_card_texts = {
-            goal_id: result.get("card_text") or {}
-            for goal_id, result in minicpm_by_id.items()
-            if isinstance(result, dict)
-        }
         try:
             audio_results, speech_metadata["voxcpm2"] = _call_voxcpm2(goals, primary_card_texts)
         except (OSError, RuntimeError, ValueError, urllib.error.URLError, TimeoutError) as exc:
@@ -719,9 +887,13 @@ def build_quest_pack(payload: dict[str, Any] | None = None, *, use_cache: bool =
         and not asr_results
     )
 
+    generated_at = datetime.now(timezone.utc).isoformat()
+    agent_traces = [_agent_trace_row(quest, generated_at) for quest in quests]
+
     return {
         "goals": goals,
         "quests": quests,
+        "agent_traces": agent_traces,
         "runtime_metadata": metadata,
         "model_runs": {
             "image": metadata,
@@ -735,7 +907,7 @@ def build_quest_pack(payload: dict[str, Any] | None = None, *, use_cache: bool =
             or any_asr_fallback
         ),
         "blocker": "; ".join(part for part in [blocker, text_blocker, audio_blocker, asr_blocker] if part),
-        "generated_at": datetime.now(timezone.utc).isoformat(),
+        "generated_at": generated_at,
     }
 
 

epic_errands_space/render.py

@@ -23,16 +23,16 @@ STYLE_MODES: dict[str, dict[str, str]] = {
         "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.",
+    "questbook": {
+        "label": "Questbook",
+        "mark": "QB",
+        "goal_noun": "Quest",
+        "parent_title": "Quest Keeper",
+        "kid_title": "Young Adventurer",
+        "reward_noun": "crest",
+        "reward": "Orderkeeper crest",
+        "waiting": "Waiting for Quest Keeper approval.",
+        "copy": "Premium questbook fantasy with warm paper, ink lines, and earned crests.",
         "image": "generated-hero-2-read-for-20-minutes-895e7642.png",
     },
     "comic": {
@@ -53,8 +53,8 @@ INITIAL_GOALS: list[dict[str, str]] = [
     {
         "id": "goal-1",
         "ordinary_goal": "Finish class project",
-        "title": "Spell Quest: Bright Idea Bridge",
-        "style_id": "magical",
+        "title": "Quest: Bright Idea Bridge",
+        "style_id": "questbook",
         "kid_completion_state": "completed",
         "parent_reward_state": "waiting_for_approval",
     },
@@ -93,7 +93,7 @@ def _initial_state() -> dict[str, Any]:
     }
     return {
         "activeTab": "home",
-        "defaultStyleId": "magical",
+        "defaultStyleId": "questbook",
         "selectedGoalId": "goal-1",
         "parentName": "Maya",
         "kidName": "Ari",
@@ -175,7 +175,7 @@ def build_app_css() -> str:
   --reward: #11784f;
 }
 
-.ee-shell[data-style="magical"] {
+.ee-shell[data-style="questbook"] {
   --theme: #7652c7;
   --theme-2: #0f877e;
   --theme-3: #efb84a;
@@ -656,9 +656,17 @@ if (root && root.dataset.ready !== "true") {
 root.dataset.ready = "true";
 
 const state = __STATE_JSON__;
+const styleAliases = {
+  quest: "questbook",
+  questbook: "questbook",
+  magical: "questbook",
+  class: "classroom",
+  classroom: "classroom",
+  comic: "comic",
+};
 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"],
+  questbook: ["Gather your project ideas", "Build the first bright piece", "Check your questbook notes"],
   comic: ["Sort the pile", "Fold the hero gear", "Launch it to the drawer"],
 };
 
@@ -671,13 +679,19 @@ function escapeHtml(value) {
     .replace(/'/g, "'");
 }
 
+function normalizeStyleId(value, fallback = "questbook") {
+  const normalized = String(value || fallback).trim().toLowerCase();
+  return styleAliases[normalized] || fallback;
+}
+
 function styleFor(goalOrStyleId) {
-  const styleId = typeof goalOrStyleId === "string" ? goalOrStyleId : goalOrStyleId.style_id;
+  const rawStyleId = typeof goalOrStyleId === "string" ? goalOrStyleId : goalOrStyleId.style_id;
+  const styleId = normalizeStyleId(rawStyleId);
   return state.styles[styleId] || state.styles.classroom;
 }
 
 function shellStyle() {
-  return state.styles[state.defaultStyleId] || state.styles.magical;
+  return state.styles[normalizeStyleId(state.defaultStyleId)] || state.styles.questbook;
 }
 
 function awaitingApprovalCount() {
@@ -824,7 +838,7 @@ function renderKid() {
       ${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)}">
+          <img src="${state.images[normalizeStyleId(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)}
@@ -838,11 +852,12 @@ function renderKid() {
 
 function renderGoalCard(goal) {
   const style = styleFor(goal);
-  const steps = stepsByStyle[goal.style_id] || stepsByStyle.classroom;
+  const styleId = normalizeStyleId(goal.style_id);
+  const steps = stepsByStyle[styleId] || 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)}">
+    <img class="ee-card-image" src="${state.images[styleId] || ""}" 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>
@@ -865,7 +880,7 @@ function renderGoalCard(goal) {
 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.dataset.style = normalizeStyleId(state.defaultStyleId);
   shell.innerHTML = `${renderHeader()}<div class="ee-body">${screen}</div>`;
 }
 
@@ -881,7 +896,7 @@ root.addEventListener("click", (event) => {
   }
 
   if (target.dataset.action === "style") {
-    state.defaultStyleId = target.dataset.style || state.defaultStyleId;
+    state.defaultStyleId = normalizeStyleId(target.dataset.style || state.defaultStyleId);
     render();
     return;
   }

frontend/assets/generated-v2/clean-room-classroom-cf6f43d6ce.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c28f904ffbeddd61d2c1c42c6feeb6a7f4ad6411df294e1798886e969ac49c8d
+size 476204

frontend/assets/generated-v2/clean-room-comic-88b770a8dc.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7d480728fb53c35e3736bc5962bed033d43d1820e9ee2d84dfc49f5819c55a92
+size 506924

frontend/assets/generated-v2/clean-room-questbook-01493f395c.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:1fd97b2e4646cc0a9b71a85e40a1934c49ec3d4dc56fef054205892a6d3380ed
+size 645164

frontend/assets/generated-v2/project-outline-classroom-70a886be5a.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:32205a5ba298d905addc223c1c440f6e28f12e8ad6360e73cd272acf930ad189
+size 476204

frontend/assets/generated-v2/project-outline-comic-ef3f180846.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:72f4d436bae6059ccba06f0b396d6232773b312dceefd17abc56dd1567efa91c
+size 491564

frontend/assets/generated-v2/project-outline-questbook-bddf03af1a.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f920054ef4f1dc56fb179afc39954362fca77d788b9053241d5a524a00aa2a15
+size 629804

frontend/assets/generated-v2/read-20-classroom-cca67b8288.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:43d6cae31493484882409f4221bba1e73a17120df1c0f67bc32bb42c3a737d82
+size 553004

frontend/assets/generated-v2/read-20-comic-7ec8c91bf8.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:def73d2835049162aa30cc8ebb44596cf90ccd55e2c0519fdb831432397a213c
+size 337964

frontend/assets/generated-v2/read-20-questbook-5805518930.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:16131b8c8a6711c2e09ea00732c74be78333f9486ebb25f2eacccc98cced828d
+size 798764

frontend/index.html

@@ -3,15 +3,38 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Epic Errands V1 - Mobile Review Prototype</title>
+    <title>Epic Errands V1 - Generated Media Prototype</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@600;700;800&family=Lora:wght@600;700&family=Nunito:wght@500;600;700;800&display=swap" rel="stylesheet">
-    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,500,0,0" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Nunito:wght@400;600;700;800;900&family=Bangers&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,500&family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="/frontend/styles/tokens.css">
+    <link rel="stylesheet" href="/frontend/styles/components.css">
     <link rel="stylesheet" href="/frontend/styles/app.css">
   </head>
   <body>
-    <main id="epic-errands-app" class="epic-app" aria-label="Epic Errands V1 mobile review prototype"></main>
+    <nav class="theme-rail" aria-label="Theme">
+      <span class="theme-rail__label">Theme</span>
+      <div class="theme-seg" role="group" aria-label="Choose Epic Errands theme">
+        <button class="theme-btn" type="button" data-app-theme="classroom" aria-pressed="false">
+          <span class="swatch" style="background:#e9382d"></span>
+          <span class="label">Classroom</span>
+        </button>
+        <button class="theme-btn" type="button" data-app-theme="comic" aria-pressed="false">
+          <span class="swatch" style="background:#f6a81d"></span>
+          <span class="label">Comic</span>
+        </button>
+        <button class="theme-btn" type="button" data-app-theme="questbook" aria-pressed="false">
+          <span class="swatch" style="background:#c8a25c"></span>
+          <span class="label">Questbook</span>
+        </button>
+      </div>
+    </nav>
+    <main class="stage" aria-label="Epic Errands V1 generated media prototype">
+      <div id="app"></div>
+    </main>
+    <script>
+      window.EPIC_ASSET_BASE = "/frontend/assets/";
+    </script>
     <script src="/frontend/scripts/app.js"></script>
   </body>
 </html>

frontend/scripts/app.js

@@ -1,88 +1,165 @@
 (function () {
   const ASSET_BASE = window.EPIC_ASSET_BASE || "assets/";
   const EMBEDDED_ASSETS = window.EPIC_ASSETS || {};
-  const root = document.getElementById("epic-errands-app");
+  const root = document.getElementById("app");
 
-  const styles = {
+  const themeToToken = {
+    classroom: "storybook",
+    comic: "comic",
+    questbook: "atelier",
+  };
+
+  const themes = {
     classroom: {
       label: "Classroom",
-      icon: "school",
-      goalNoun: "Quest",
-      parentTitle: "Classroom Captain",
-      kidTitle: "Star Student",
-      rewardNoun: "badge",
+      kidRole: "Star Student",
+      parentRole: "Classroom Captain",
+      cardLabel: "Classroom Card",
+      proofLabel: "Sticker earned",
       waitingCopy: "Waiting for Classroom Captain approval.",
-      copy: "Bright school adventure with stickers, notebooks, and sunny goals.",
-    },
-    magical: {
-      label: "Quest",
-      icon: "auto_stories",
-      goalNoun: "Quest",
-      parentTitle: "Quest Keeper",
-      kidTitle: "Young Adventurer",
-      rewardNoun: "crest",
-      waitingCopy: "Waiting for Quest Keeper approval.",
-      copy: "Premium questbook fantasy with warm paper, ink lines, and earned crests.",
     },
     comic: {
       label: "Comic",
-      icon: "comic_bubble",
-      goalNoun: "Mission",
-      parentTitle: "Comic Editor",
-      kidTitle: "Panel Hero",
-      rewardNoun: "starburst",
+      kidRole: "Panel Lead",
+      parentRole: "Comic Editor",
+      cardLabel: "Comic Card",
+      proofLabel: "Badge earned",
       waitingCopy: "Waiting for Comic Editor approval.",
-      copy: "Punchy action panels with bold copy and kid-safe energy.",
+    },
+    questbook: {
+      label: "Questbook",
+      kidRole: "Young Adventurer",
+      parentRole: "Quest Keeper",
+      cardLabel: "Questbook Card",
+      proofLabel: "Crest earned",
+      waitingCopy: "Waiting for Quest Keeper approval.",
     },
   };
 
-  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 generatedVariants = {
+    "clean-room": {
+      questbook: {
+        title: "Questbook: Room Cleanup",
+        narration: "You find a magical book that says, 'Before dinner, tidy your room and earn a shiny star!'",
+        rewardLabel: "Star",
+        image: "generated-v2/clean-room-questbook-d35e6ee10c.png",
+        audio: "generated-v2/clean-room-questbook-01493f395c.wav",
+        traceId: "epic-errands-v1-live-clean-room-questbook",
+      },
+      classroom: {
+        title: "Room Cleanup",
+        narration: "You tidy your room before dinner, making it ready for a fun day.",
+        rewardLabel: "Clean Room",
+        image: "generated-v2/clean-room-classroom-c5cb506427.png",
+        audio: "generated-v2/clean-room-classroom-cf6f43d6ce.wav",
+        traceId: "epic-errands-v1-live-clean-room-classroom",
+      },
+      comic: {
+        title: "Comic Cleanup",
+        narration: "You find a superhero cape in your room. It's time to put it back where it belongs before dinner.",
+        rewardLabel: "Superhero Cleanup",
+        image: "generated-v2/clean-room-comic-9bce2b2b21.png",
+        audio: "generated-v2/clean-room-comic-88b770a8dc.wav",
+        traceId: "epic-errands-v1-live-clean-room-comic",
+      },
+    },
+    "project-outline": {
+      questbook: {
+        title: "Questbook Quest",
+        narration: "You have a class project outline to finish. Gather your supplies and write it out step by step.",
+        rewardLabel: "Great job!",
+        image: "generated-v2/project-outline-questbook-e1d5ced2e8.png",
+        audio: "generated-v2/project-outline-questbook-bddf03af1a.wav",
+        traceId: "epic-errands-v1-live-project-outline-questbook",
+      },
+      classroom: {
+        title: "Classroom Project",
+        narration: "You finish your class project outline and get a high-five from your teacher.",
+        rewardLabel: "Great job!",
+        image: "generated-v2/project-outline-classroom-3783f10bae.png",
+        audio: "generated-v2/project-outline-classroom-70a886be5a.wav",
+        traceId: "epic-errands-v1-live-project-outline-classroom",
+      },
+      comic: {
+        title: "Comic Comic",
+        narration: "You finish your class project outline and get a shiny comic badge!",
+        rewardLabel: "Comic Badge",
+        image: "generated-v2/project-outline-comic-4f9eaa443a.png",
+        audio: "generated-v2/project-outline-comic-ef3f180846.wav",
+        traceId: "epic-errands-v1-live-project-outline-comic",
+      },
+    },
+    "read-20": {
+      questbook: {
+        title: "Questbook: Read 20 Minutes",
+        narration: "You've found a magical book that whispers stories. Spend 20 minutes reading to hear its magic.",
+        rewardLabel: "Storytime Star",
+        image: "generated-v2/read-20-questbook-39aac8ba25.png",
+        audio: "generated-v2/read-20-questbook-5805518930.wav",
+        traceId: "epic-errands-v1-live-read-20-questbook",
+      },
+      classroom: {
+        title: "Read for 20 Minutes",
+        narration: "Read for 20 minutes and earn a sticker.",
+        rewardLabel: "Sticker",
+        image: "generated-v2/read-20-classroom-7c13f43782.png",
+        audio: "generated-v2/read-20-classroom-cca67b8288.wav",
+        traceId: "epic-errands-v1-live-read-20-classroom",
+      },
+      comic: {
+        title: "Comic Quest",
+        narration: "Read for 20 minutes and earn a comic badge!",
+        rewardLabel: "Comic Badge",
+        image: "generated-v2/read-20-comic-b5ae2d561a.png",
+        audio: "generated-v2/read-20-comic-7ec8c91bf8.wav",
+        traceId: "epic-errands-v1-live-read-20-comic",
+      },
+    },
   };
 
   const state = {
-    activeTab: "home",
-    selectedGoalId: null,
-    nextGoalNumber: 4,
-    defaultStyleId: "magical",
-    parentAvatarReady: true,
-    kidAvatarReady: true,
+    activeTheme: "questbook",
+    view: "kid",
+    selectedGoalId: "goal-1",
     goals: [
       {
         id: "goal-1",
-        ordinaryGoal: "Finish class project",
-        styleId: "magical",
+        assetKey: "clean-room",
+        plainGoal: "Clean up my room before dinner",
         kidCompletionState: "completed",
         parentRewardState: "waiting_for_approval",
       },
       {
         id: "goal-2",
-        ordinaryGoal: "Read for 20 minutes",
-        styleId: "classroom",
+        assetKey: "project-outline",
+        plainGoal: "Finish my class project outline",
         kidCompletionState: "in_progress",
         parentRewardState: "not_reviewed",
       },
       {
         id: "goal-3",
-        ordinaryGoal: "Put away laundry",
-        styleId: "comic",
+        assetKey: "read-20",
+        plainGoal: "Read for 20 minutes",
         kidCompletionState: "not_started",
         parentRewardState: "not_reviewed",
       },
     ],
   };
 
+  const icons = {
+    check: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="m5 12.5 4.2 4L19 7" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+    image: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9A2.5 2.5 0 0 1 17.5 19h-11A2.5 2.5 0 0 1 4 16.5v-9Z" stroke="currentColor" stroke-width="2"/><path d="m7 16 3.2-3.3 2.2 2.1 2.3-2.8L18 16" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8.5 9h.01" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>',
+    sound: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M4 10v4h4l5 4V6l-5 4H4Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/><path d="M16 9.5c.8.7 1.2 1.5 1.2 2.5s-.4 1.8-1.2 2.5M18.6 7c1.5 1.3 2.3 3 2.3 5s-.8 3.7-2.3 5" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+    sparkle: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 3.5 13.8 9l5.7 1.7-5.7 1.8L12 18l-1.8-5.5-5.7-1.8L10.2 9 12 3.5Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/></svg>',
+    parent: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M8 11a3 3 0 1 0 0-6 3 3 0 0 0 0 6ZM16.5 12a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5ZM3.5 20c.5-3.8 2.1-5.7 4.5-5.7s4 1.9 4.5 5.7M13 19.5c.4-2.7 1.6-4 3.5-4 1.8 0 3 1.3 3.5 4" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+    kid: '<svg viewBox="0 0 24 24" fill="none" aria-hidden="true"><path d="M12 12a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7ZM5.5 20c.7-3.8 2.9-5.8 6.5-5.8s5.8 2 6.5 5.8" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
+  };
+
   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;")
@@ -92,410 +169,261 @@
       .replace(/'/g, "&#039;");
   }
 
-  function titleCase(value) {
-    return String(value)
-      .trim()
-      .split(/\s+/)
-      .map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
-      .join(" ");
+  function goalById(id) {
+    return state.goals.find((goal) => goal.id === id) || state.goals[0];
   }
 
-  function currentStyle() {
-    return styles[state.defaultStyleId];
+  function activeCard(goal, themeId = state.activeTheme) {
+    return generatedVariants[goal.assetKey]?.[themeId] || generatedVariants[goal.assetKey]?.questbook;
   }
 
-  function goalStyle(goal) {
-    return styles[goal.styleId] || styles.classroom;
+  function statusLabel(goal) {
+    if (goal.parentRewardState === "approved") return "Approved";
+    if (goal.parentRewardState === "waiting_for_approval") return "Review";
+    if (goal.kidCompletionState === "completed") return "Done";
+    if (goal.kidCompletionState === "in_progress") return "Active";
+    return "Ready";
   }
 
-  function activeGoals() {
-    return state.goals.length;
+  function parentStatusCopy(goal) {
+    if (goal.parentRewardState === "approved") return "Reward approved";
+    if (goal.parentRewardState === "waiting_for_approval") return "Ready for parent review";
+    if (goal.kidCompletionState === "completed") return "Completed by kid";
+    return "Not submitted yet";
   }
 
-  function awaitingApproval() {
-    return state.goals.filter((goal) => goal.parentRewardState === "waiting_for_approval").length;
+  function setTheme(themeId) {
+    if (!themes[themeId]) return;
+    state.activeTheme = themeId;
+    document.documentElement.dataset.theme = themeToToken[themeId];
+    updateThemeRail();
+    render();
   }
 
-  function goalTitle(goal) {
-    const style = goalStyle(goal);
-    const lower = goal.ordinaryGoal.toLowerCase();
-    if (goal.styleId === "magical" && lower.includes("class project")) return `${style.goalNoun}: Bridge of Bright Ideas`;
-    if (goal.styleId === "comic" && lower.includes("laundry")) return `${style.goalNoun}: Laundry Launch`;
-    if (lower.includes("read")) return `${style.goalNoun}: Reading Lantern`;
-    return `${style.goalNoun}: ${titleCase(goal.ordinaryGoal)}`;
+  function updateThemeRail() {
+    document.querySelectorAll(".theme-btn").forEach((button) => {
+      button.setAttribute("aria-pressed", String(button.dataset.appTheme === state.activeTheme));
+    });
   }
 
-  function rewardLabel(goal) {
-    const style = goalStyle(goal);
-    if (goal.styleId === "magical") return `Orderkeeper ${style.rewardNoun}`;
-    if (goal.styleId === "comic") return `Pow ${style.rewardNoun}`;
-    return `Helper ${style.rewardNoun}`;
+  function setView(view) {
+    state.view = view;
+    render();
   }
 
-  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 selectGoal(goalId) {
+    state.selectedGoalId = goalId;
+    render();
   }
 
-  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 completeSelectedGoal() {
+    const goal = goalById(state.selectedGoalId);
+    goal.kidCompletionState = "completed";
+    if (goal.parentRewardState !== "approved") goal.parentRewardState = "waiting_for_approval";
+    render();
   }
 
-  function stepsFor(goal) {
-    const style = goalStyle(goal);
-    if (goal.styleId === "magical") {
-      return [
-        "Gather the scattered clues",
-        "Build the first brave piece",
-        "Check the questbook 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 approveGoal(goalId) {
+    const goal = goalById(goalId);
+    goal.kidCompletionState = "completed";
+    goal.parentRewardState = "approved";
+    render();
   }
 
-  function renderHome() {
-    const style = currentStyle();
+  function flourishCorners() {
+    const flourish = '<svg viewBox="0 0 60 60" fill="none"><path d="M8 52c16-3 19-10 20-22 1 12 5 19 24 22M8 8c16 3 19 10 20 22 1-12 5-19 24-22" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>';
     return `
-      <section class="screen" data-design-id="home-screen" aria-labelledby="home-title">
-        <div class="screen-head">
-          <h1 class="screen-title" id="home-title">Set the app theme</h1>
-          <p class="screen-copy">Quest is the default visual style. Switch to Classroom or Comic before creating a new goal.</p>
-        </div>
-
-        <section class="panel" data-design-id="style-mode-picker" aria-labelledby="style-label">
-          <h2 class="section-label" id="style-label">App theme</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.parentTitle} / ${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>
+      <span class="corner-flourish tl">${flourish}</span>
+      <span class="corner-flourish tr">${flourish}</span>
+      <span class="corner-flourish bl">${flourish}</span>
+      <span class="corner-flourish br">${flourish}</span>
     `;
   }
 
-  function renderParentGoals() {
-    const style = currentStyle();
+  function headerHtml() {
+    const kidPressed = state.view === "kid";
+    const parentPressed = state.view === "parent";
     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">Create new goals, approve completed ones, and grant the reward.</p>
+      <div class="app-head">
+        <div class="wordmark" aria-label="Epic Errands">
+          <span class="display">Epic Errands</span>
+          <span class="sub">${escapeHtml(themes[state.activeTheme].kidRole)} mode</span>
         </div>
-        <form class="goal-create panel" data-design-id="parent-goal-create" aria-labelledby="create-goal-title">
-          <div>
-            <h2 class="section-label" id="create-goal-title">Create goal</h2>
-            <p class="goal-create-copy">New goals snapshot the current ${escapeHtml(style.label)} app theme.</p>
-          </div>
-          <label class="goal-input-label" for="new-goal-input">Ordinary goal</label>
-          <div class="goal-create-row">
-            <input id="new-goal-input" name="ordinaryGoal" type="text" autocomplete="off" placeholder="Practice spelling words">
-            <button class="create-button" type="submit">${icon("add_task")} Add</button>
-          </div>
-        </form>
-        <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 class="viewtoggle" role="group" aria-label="Choose view">
+          <button class="vt" type="button" data-action="view" data-view="kid" aria-pressed="${kidPressed}">
+            ${icons.kid}<span>Kid</span>
+          </button>
+          <button class="vt" type="button" data-action="view" data-view="parent" aria-pressed="${parentPressed}">
+            ${icons.parent}<span>Parent</span>
+          </button>
         </div>
-      </section>
+      </div>
     `;
   }
 
-  function renderKidGoals() {
+  function goalStripHtml() {
     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 thumbnail to open the goal card, finish it, then wait for your grown-up's approval.</p>
+      <div class="section">
+        <div class="section__head">
+          <div class="section__num">3</div>
+          <div class="section__titles">
+            <div class="section__title">Loaded goals <span class="note">${escapeHtml(themes[state.activeTheme].label)}</span></div>
+            <div class="section__sub">Pick a plain goal to preview its generated card.</div>
+          </div>
         </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="open-goal-card" data-goal-id="${goal.id}" aria-label="Open ${escapeHtml(goalTitle(goal))}">
-                <img src="${asset(imageByStyle[goal.styleId])}" alt="${escapeHtml(style.label)} illustration for ${escapeHtml(goal.ordinaryGoal)}">
-                <span class="tile-status" aria-hidden="true">${stateChip(goal)}</span>
-              </button>
-            `;
-          }).join("")}
+        <div class="goal-strip">
+          ${state.goals
+            .map((goal, index) => {
+              const card = activeCard(goal);
+              const selected = goal.id === state.selectedGoalId;
+              const complete = goal.kidCompletionState === "completed";
+              return `
+                <button class="goal-button ${complete ? "is-complete" : ""}" type="button" data-action="select-goal" data-goal-id="${goal.id}" aria-pressed="${selected}">
+                  <span class="goal-button__mark">${complete ? icons.check : index + 1}</span>
+                  <span class="goal-button__copy">
+                    <span class="goal-button__title">${escapeHtml(card.title)}</span>
+                    <span class="goal-button__meta">${escapeHtml(goal.plainGoal)}</span>
+                  </span>
+                  <span class="goal-button__status">${escapeHtml(statusLabel(goal))}</span>
+                </button>
+              `;
+            })
+            .join("")}
         </div>
-      </section>
+      </div>
     `;
   }
 
-  function renderGoalCard(goal, options = {}) {
-    const style = goalStyle(goal);
-    const isWaiting = goal.parentRewardState === "waiting_for_approval";
-    const rewarded = goal.parentRewardState === "approved_reward_given";
-    const steps = stepsFor(goal);
-    const modalChrome = options.modal ? `
-      <button class="modal-close" data-action="close-goal-card" aria-label="Close goal card">
-        ${icon("close")}
-      </button>
-    ` : "";
+  function selectedCardHtml() {
+    const goal = goalById(state.selectedGoalId);
+    const card = activeCard(goal);
+    const theme = themes[state.activeTheme];
+    const complete = goal.kidCompletionState === "completed";
+    const approved = goal.parentRewardState === "approved";
+    const waiting = goal.parentRewardState === "waiting_for_approval";
+    const buttonText = complete ? "Send Again" : "I Did It";
+
     return `
-      <article class="goal-card" data-design-id="kid-goal-card" ${options.modal ? 'role="dialog" aria-modal="true" aria-labelledby="goal-card-title"' : ""}>
-        ${modalChrome}
-        <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>
+      <section class="card-preview" aria-label="Generated goal card">
+        <div class="hero">
+          <img src="${asset(card.image)}" alt="${escapeHtml(card.title)} generated ${escapeHtml(theme.label)} artwork">
+          <span class="hero__rank">${escapeHtml(theme.cardLabel)}</span>
+          <span class="hero__points">${icons.sparkle}${escapeHtml(card.rewardLabel)}</span>
         </div>
-        <div class="goal-card-body">
-          <h2 id="goal-card-title">${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 class="quest-headline">
+          <div class="eyebrow">${escapeHtml(goal.plainGoal)}</div>
+          <h1 class="quest-title">${escapeHtml(card.title)}</h1>
+          <p class="narration">${escapeHtml(card.narration)}</p>
+        </div>
+        <div class="media-panel">
+          <div class="audio-shell">
+            <audio controls preload="metadata" src="${asset(card.audio)}"></audio>
+          </div>
+          <div class="asset-pills" aria-label="Generated assets">
+            <span class="asset-pill">${icons.image} Image</span>
+            <span class="asset-pill">${icons.sound} Audio</span>
+            <span class="asset-pill">${icons.sparkle} ${escapeHtml(theme.proofLabel)}</span>
           </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>
+        <div class="action-row">
+          <button class="btn-primary" type="button" data-action="complete-selected" ${approved ? "disabled" : ""}>
+            ${icons.check}<span>${approved ? "Reward Approved" : buttonText}</span>
+          </button>
+          ${waiting ? `<p class="state-note"><strong>${escapeHtml(theme.parentRole)}:</strong> ${escapeHtml(theme.waitingCopy)}</p>` : ""}
+          ${approved ? `<p class="state-note"><strong>Reward approved.</strong> The kid card can now show the earned reward in the UI.</p>` : ""}
+        </div>
+      </section>
     `;
   }
 
-  function renderGoalModal() {
-    const selected = state.goals.find((goal) => goal.id === state.selectedGoalId);
-    if (!selected || state.activeTab !== "kid") return "";
+  function kidViewHtml() {
     return `
-      <div class="goal-modal-backdrop" data-design-id="kid-goal-card-modal">
-        <button class="modal-scrim" data-action="close-goal-card" aria-label="Close goal card"></button>
-        <div class="goal-modal-shell">
-          ${renderGoalCard(selected, { modal: true })}
-        </div>
+      ${headerHtml()}
+      <div class="lead">
+        <h1>Today's <span class="u">epic errands</span></h1>
+        <p>Generated text, artwork, and voice are loaded into the same card system.</p>
       </div>
+      ${goalStripHtml()}
+      ${selectedCardHtml()}
     `;
   }
 
-  function renderNav() {
-    const items = [
-      ["home", "Home", "home"],
-      ["parent", "Parent", "fact_check"],
-      ["kid", "Kid", "view_carousel"],
-      ["diy", "DIY Lab", "experiment"],
-    ];
+  function parentViewHtml() {
+    const completeCount = state.goals.filter((goal) => goal.kidCompletionState === "completed").length;
+    const waitingCount = state.goals.filter((goal) => goal.parentRewardState === "waiting_for_approval").length;
+    const approvedCount = state.goals.filter((goal) => goal.parentRewardState === "approved").length;
+
     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>
+      ${headerHtml()}
+      <div class="lead">
+        <h1>${escapeHtml(themes[state.activeTheme].parentRole)}</h1>
+        <p>Review generated cards and approve rewards after completion.</p>
+      </div>
+      <div class="summary-grid" aria-label="Parent review summary">
+        <div class="summary-tile"><b>${completeCount}</b><span>Completed</span></div>
+        <div class="summary-tile"><b>${waitingCount}</b><span>Review</span></div>
+        <div class="summary-tile"><b>${approvedCount}</b><span>Approved</span></div>
+      </div>
+      <section class="parent">
+        <div class="parent__head">
+          ${icons.parent}
+          <h3>Reward Queue</h3>
+        </div>
+        <div class="parent-list">
+          ${state.goals
+            .map((goal) => {
+              const card = activeCard(goal);
+              const canApprove = goal.parentRewardState === "waiting_for_approval";
+              return `
+                <article class="parent-row">
+                  <div>
+                    <div class="parent-row__title">${escapeHtml(card.title)}</div>
+                    <div class="parent-row__meta">${escapeHtml(goal.plainGoal)} · ${escapeHtml(card.rewardLabel)}</div>
+                  </div>
+                  <div class="parent-actions">
+                    <span class="parent-row__status">${escapeHtml(parentStatusCopy(goal))}</span>
+                    <button class="btn-ghost" type="button" data-action="approve-goal" data-goal-id="${goal.id}" ${canApprove ? "" : "disabled"}>
+                      ${icons.check}<span>${goal.parentRewardState === "approved" ? "Approved" : "Approve"}</span>
+                    </button>
+                  </div>
+                </article>
+              `;
+            })
+            .join("")}
+        </div>
+      </section>
     `;
   }
 
   function render() {
-    const style = currentStyle();
-    const screen = state.activeTab === "parent"
-      ? renderParentGoals()
-      : state.activeTab === "kid"
-        ? renderKidGoals()
-        : renderHome();
-
+    if (!root) return;
+    const body = state.view === "parent" ? parentViewHtml() : kidViewHtml();
     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 visual 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>
-        ${renderGoalModal()}
-        ${renderNav()}
-      </div>
+      <article class="card screen-in ornate">
+        ${flourishCorners()}
+        <div class="card-inner app-shell">
+          ${body}
+        </div>
+      </article>
     `;
   }
 
-  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";
-      if (state.activeTab !== "kid") state.selectedGoalId = null;
-      render();
-      return;
-    }
-
-    if (action === "open-goal-card") {
-      state.selectedGoalId = target.dataset.goalId || state.selectedGoalId;
-      render();
-      return;
-    }
-
-    if (action === "close-goal-card") {
-      state.selectedGoalId = null;
-      render();
+  document.addEventListener("click", (event) => {
+    const themeButton = event.target.closest(".theme-btn");
+    if (themeButton) {
+      setTheme(themeButton.dataset.appTheme);
       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";
-        }
-      });
-      state.selectedGoalId = goalId || state.selectedGoalId;
-      render();
-      return;
-    }
+    const actionButton = event.target.closest("[data-action]");
+    if (!actionButton || actionButton.disabled) return;
 
-    if (action === "approve-goal") {
-      const goalId = target.dataset.goalId;
-      updateGoal(goalId, (goal) => {
-        if (goal.kidCompletionState === "completed") {
-          goal.parentRewardState = "approved_reward_given";
-        }
-      });
-      render();
-    }
-  });
-
-  root.addEventListener("submit", (event) => {
-    const form = event.target.closest("[data-design-id='parent-goal-create']");
-    if (!form) return;
-    event.preventDefault();
-
-    const input = form.querySelector("input[name='ordinaryGoal']");
-    const ordinaryGoal = input ? input.value.trim() : "";
-    if (!ordinaryGoal) {
-      if (input) input.focus();
-      return;
-    }
-
-    const goal = {
-      id: `goal-${state.nextGoalNumber}`,
-      ordinaryGoal,
-      styleId: state.defaultStyleId,
-      kidCompletionState: "not_started",
-      parentRewardState: "not_reviewed",
-    };
-    state.nextGoalNumber += 1;
-    state.goals.unshift(goal);
-    state.selectedGoalId = null;
-    render();
-  });
-
-  window.addEventListener("keydown", (event) => {
-    if (event.key === "Escape" && state.selectedGoalId) {
-      state.selectedGoalId = null;
-      render();
-    }
+    const action = actionButton.dataset.action;
+    if (action === "view") setView(actionButton.dataset.view);
+    if (action === "select-goal") selectGoal(actionButton.dataset.goalId);
+    if (action === "complete-selected") completeSelectedGoal();
+    if (action === "approve-goal") approveGoal(actionButton.dataset.goalId);
   });
 
-  render();
+  setTheme(state.activeTheme);
 })();

frontend/styles/app.css

@@ -1,913 +1,301 @@
-:root {
-  --font-display: "Baloo 2", system-ui, sans-serif;
-  --font-quest: "Lora", Georgia, serif;
-  --font-body: "Nunito", system-ui, sans-serif;
-  --font-heading: var(--font-display);
-  --ink: #241d19;
-  --muted: #655f59;
-  --line: rgba(62, 47, 33, 0.16);
-  --paper: #fff8e8;
-  --surface: #ffffff;
-  --soft: #f5efe3;
-  --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: #e9dcc5;
-  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 16% 12%, rgba(255, 252, 240, 0.95), transparent 28%),
-    radial-gradient(circle at 86% 16%, rgba(109, 84, 53, 0.18), transparent 22%),
-    linear-gradient(135deg, #d7c29e 0%, #fff1d5 48%, #dfe7d5 100%);
-}
-
-.phone {
-  position: relative;
-  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: 26px;
-  background: var(--paper);
-  box-shadow: var(--shadow);
-}
-
-.phone[data-style="classroom"] {
-  --font-heading: var(--font-display);
-  --theme: #e3403a;
-  --theme-2: #1467b3;
-  --theme-3: #f7c948;
-  --theme-soft: #fff3d7;
-  --theme-panel: #f8fbff;
-  --theme-border: #9bc4ef;
-  --reward: #128a55;
-}
-
-.phone[data-style="magical"] {
-  --font-heading: var(--font-quest);
-  --theme: #31583e;
-  --theme-2: #5a3f78;
-  --theme-3: #c79335;
-  --theme-soft: #f2e6cc;
-  --theme-panel: #fff6e3;
-  --theme-border: #aa8752;
-  --reward: #2f6b45;
-  --line: rgba(95, 66, 33, 0.24);
-  --surface: #fffaf0;
-}
-
-.phone[data-style="comic"] {
-  --font-heading: var(--font-display);
-  --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, 252, 244, 0.96), rgba(255, 252, 244, 0.55)),
-    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-heading);
-  font-size: 29px;
-  line-height: 1;
+.app-shell {
+  width: 100%;
 }
 
-.status-pill {
-  display: inline-flex;
+.app-head {
   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, 253, 247, 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-heading);
-  font-size: 28px;
-  line-height: 1.05;
-}
-
-.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,
-.goal-create {
-  border: 1px solid var(--line);
-  border-radius: var(--radius-sm);
-  background: rgba(255, 253, 247, 0.92);
-  box-shadow: var(--shadow-tight);
-}
-
-.panel {
-  padding: 15px;
-}
-
-.section-label {
-  margin: 0 0 10px;
-  color: var(--ink);
-  font-size: 13px;
-  font-weight: 1000;
+.wordmark .sub {
   text-transform: uppercase;
 }
 
-.style-grid {
+.goal-strip {
   display: grid;
-  gap: 9px;
+  gap: clamp(8px, 2.4cqw, 12px);
 }
 
-.style-option {
+.goal-button {
   width: 100%;
-  min-height: 78px;
+  border: 1.5px solid var(--field-border-color);
+  border-radius: var(--control-radius);
+  background: var(--field-bg);
+  box-shadow: var(--control-shadow);
+  color: var(--field-fg);
+  cursor: pointer;
   display: grid;
-  grid-template-columns: 46px 1fr auto;
+  grid-template-columns: auto 1fr auto;
+  gap: clamp(10px, 3cqw, 14px);
   align-items: center;
-  gap: 12px;
-  padding: 12px;
-  color: var(--ink);
+  padding: clamp(11px, 3.2cqw, 15px) clamp(13px, 3.6cqw, 17px);
   text-align: left;
+  transition: border-color .15s, background .15s, transform .1s;
 }
 
-.style-option[aria-pressed="true"] {
-  border-color: var(--theme);
-  background: linear-gradient(135deg, var(--theme-soft), #fff);
+.goal-button:hover,
+.goal-button[aria-pressed="true"] {
+  border-color: var(--accent);
+  background: var(--accent-soft);
 }
 
-.style-mark {
-  display: grid;
-  width: 46px;
-  height: 46px;
-  place-items: center;
-  border-radius: 12px;
-  background: var(--theme-soft);
-  color: var(--theme);
-}
-
-.style-name {
-  display: block;
-  font-family: var(--font-heading);
-  font-size: 18px;
-  font-weight: 1000;
-}
-
-.style-meta {
-  display: block;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 1.25;
+.goal-button:active {
+  transform: translateY(1px);
 }
 
-.selected-dot {
-  width: 18px;
-  height: 18px;
-  border: 2px solid var(--theme);
+.goal-button__mark {
+  width: 30px;
+  height: 30px;
   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);
+  background: var(--card-bg);
+  color: var(--accent);
+  border: 1.5px solid var(--field-border-color);
+  font-family: var(--font-display);
+  font-weight: var(--display-weight);
+  font-size: 14px;
 }
 
-.avatar-name {
-  margin: 10px 0 0;
-  font-size: 16px;
-  font-weight: 1000;
+.goal-button.is-complete .goal-button__mark {
+  background: var(--success);
+  border-color: var(--success);
+  color: var(--on-primary);
 }
 
-.avatar-title {
-  margin: 2px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-  font-weight: 900;
+.goal-button__copy {
+  min-width: 0;
 }
 
-.privacy-note {
-  display: flex;
-  gap: 8px;
-  align-items: flex-start;
-  margin: 0;
-  color: #4d6174;
-  font-size: 13px;
+.goal-button__title {
+  color: var(--field-fg);
   font-weight: 800;
-  line-height: 1.3;
-}
-
-.counter-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
+  font-size: clamp(15px, 4.2cqw, 18px);
+  line-height: 1.2;
 }
 
-.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);
+.goal-button__meta {
+  margin-top: 3px;
+  color: var(--field-fg-muted);
+  font-size: clamp(12px, 3.2cqw, 14px);
+  font-weight: 700;
 }
 
-.counter strong {
-  color: var(--theme);
-  font-family: var(--font-heading);
-  font-size: 38px;
-  line-height: 0.9;
-}
-
-.counter span {
-  color: var(--muted);
-  font-size: 13px;
+.goal-button__status {
+  border-radius: var(--pill-radius);
+  padding: 5px 9px;
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+  font-size: 11px;
   font-weight: 900;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
-.goal-list {
-  display: grid;
-  gap: 10px;
+.card-preview {
+  margin-top: clamp(20px, 6cqw, 28px);
 }
 
-.goal-create {
-  display: grid;
-  gap: 10px;
-  padding: 13px;
+.hero img {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  object-fit: cover;
+  background: var(--is-bg);
 }
 
-.goal-create-copy {
-  margin: 0;
-  color: var(--muted);
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 1.3;
+.hero__rank {
+  max-width: calc(100% - 92px);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.goal-input-label {
-  color: var(--ink);
-  font-size: 12px;
-  font-weight: 1000;
-  text-transform: uppercase;
+.quest-headline .narration {
+  max-width: 36rem;
+  margin: .65em auto 0;
+  color: var(--body-color);
+  font-family: var(--font-body);
+  font-size: clamp(14px, 3.6cqw, 17px);
+  font-weight: 650;
+  line-height: 1.45;
+  text-transform: none;
+  letter-spacing: 0;
 }
 
-.goal-create-row {
+.media-panel {
+  margin-top: clamp(16px, 4.4cqw, 22px);
   display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 8px;
-}
-
-.goal-create-row input {
-  width: 100%;
-  min-width: 0;
-  min-height: 46px;
-  border: 1px solid var(--line);
-  border-radius: 999px;
-  padding: 0 14px;
-  background: #fff;
-  color: var(--ink);
-  font-weight: 900;
-}
-
-.goal-create-row input::placeholder {
-  color: #8a98aa;
+  gap: 12px;
 }
 
-.goal-row {
-  display: grid;
-  grid-template-columns: 1fr auto;
-  gap: 10px;
-  padding: 13px;
+.audio-shell {
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border-color);
+  border-radius: var(--control-radius);
+  padding: 12px;
 }
 
-.goal-main {
-  min-width: 0;
+.audio-shell audio {
+  display: block;
+  width: 100%;
+  min-height: 38px;
 }
 
-.goal-title-line {
+.asset-pills {
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
-  gap: 6px;
-  margin-bottom: 5px;
-}
-
-.goal-name {
-  font-family: var(--font-heading);
-  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,
-.create-button {
-  min-height: 44px;
-  border: 0;
-  border-radius: 12px;
-  padding: 0 14px;
-  background: var(--theme);
-  color: var(--primary-ink);
-  font-weight: 1000;
-  box-shadow: var(--shadow-tight);
+  gap: 8px;
 }
 
-.create-button {
+.asset-pill {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  white-space: nowrap;
-}
-
-.approve-button:disabled,
-.complete-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 {
-  position: relative;
-  aspect-ratio: 1 / 1;
-  min-height: 132px;
-  overflow: hidden;
-  text-align: left;
-  color: var(--ink);
-  background: var(--theme-soft);
-}
-
-.kid-tile img {
-  width: 100%;
-  height: 100%;
-  display: block;
-  object-fit: cover;
-  background: var(--theme-soft);
-}
-
-.tile-status {
-  position: absolute;
-  left: 8px;
-  bottom: 8px;
-  max-width: calc(100% - 16px);
-  pointer-events: none;
+  min-height: 30px;
+  border-radius: var(--pill-radius);
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border-color);
+  color: var(--muted-color);
+  font-size: 12px;
+  font-weight: 850;
+  padding: 6px 10px;
 }
 
-.goal-card {
-  position: relative;
-  overflow: hidden;
+.asset-pill svg {
+  width: 14px;
+  height: 14px;
+  color: var(--accent);
 }
 
-.goal-modal-backdrop {
-  position: absolute;
-  z-index: 20;
-  inset: 0;
+.action-row {
+  margin-top: clamp(18px, 5cqw, 24px);
   display: grid;
-  place-items: end center;
-  padding: 18px 14px calc(var(--nav-h) + 14px);
+  gap: 12px;
 }
 
-.modal-scrim {
-  position: absolute;
-  inset: 0;
-  border: 0;
-  background: rgba(31, 42, 55, 0.42);
+.state-note {
+  border-radius: var(--control-radius);
+  border: 1px solid var(--panel-border-color);
+  background: var(--panel-bg);
+  padding: 14px 16px;
+  color: var(--body-color);
+  font-size: clamp(13px, 3.6cqw, 15px);
+  font-weight: 700;
+  line-height: 1.45;
 }
 
-.goal-modal-shell {
-  position: relative;
-  z-index: 1;
-  width: min(100%, 390px);
-  max-height: min(690px, calc(100dvh - var(--nav-h) - 44px));
-  overflow: auto;
-  border-radius: var(--radius-lg);
-  box-shadow: 0 24px 54px rgba(13, 24, 40, 0.28);
+.state-note strong {
+  color: var(--accent);
 }
 
-.modal-close {
-  position: absolute;
-  z-index: 2;
-  top: 10px;
-  right: 10px;
+.parent-list {
   display: grid;
-  width: 42px;
-  height: 42px;
-  place-items: center;
-  border: 1px solid rgba(255, 255, 255, 0.72);
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.94);
-  color: var(--ink);
-  box-shadow: var(--shadow-tight);
-}
-
-.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: 12px;
-  background: rgba(255, 255, 255, 0.9);
-  color: var(--theme);
-  font-size: 12px;
-  font-weight: 1000;
+  gap: 12px;
 }
 
-.goal-card-body {
+.parent-row {
   display: grid;
+  grid-template-columns: 1fr auto;
   gap: 12px;
-  padding: 14px;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0)),
-    var(--surface);
+  align-items: center;
+  background: var(--field-bg);
+  border: 1.5px solid var(--field-border-color);
+  border-radius: var(--control-radius);
+  box-shadow: var(--control-shadow);
+  padding: clamp(12px, 3.4cqw, 16px);
 }
 
-.goal-card h2 {
-  margin: 0;
-  font-family: var(--font-heading);
-  font-size: 28px;
-  line-height: 1.05;
+.parent-row__title {
+  color: var(--field-fg);
+  font-size: clamp(15px, 4cqw, 18px);
+  font-weight: 850;
+  line-height: 1.2;
 }
 
-.step-list {
-  display: grid;
-  gap: 8px;
-  margin: 0;
-  padding: 0;
-  list-style: none;
+.parent-row__meta {
+  margin-top: 5px;
+  color: var(--field-fg-muted);
+  font-size: clamp(12px, 3.2cqw, 14px);
+  font-weight: 700;
+  line-height: 1.35;
 }
 
-.step-list li {
-  display: grid;
-  grid-template-columns: 32px 1fr;
+.parent-row__status {
+  display: inline-flex;
   align-items: center;
-  gap: 9px;
-  min-height: 42px;
-  padding: 7px 10px;
-  border-radius: 13px;
-  background: var(--soft);
+  min-height: 30px;
+  border-radius: var(--pill-radius);
+  color: var(--accent-ink);
+  background: var(--accent-soft);
+  padding: 5px 10px;
+  font-size: 11px;
   font-weight: 900;
+  text-transform: uppercase;
+  white-space: nowrap;
 }
 
-.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;
+.parent-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: flex-end;
 }
 
-.complete-button {
-  min-height: 54px;
-  background: var(--reward);
-  font-size: 16px;
+.parent-actions .btn-ghost {
+  justify-content: center;
 }
 
-.waiting-panel,
-.reward-panel {
+.summary-grid {
   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;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 10px;
+  margin-top: clamp(16px, 4.4cqw, 22px);
 }
 
-.waiting-panel span,
-.reward-panel span {
-  font-size: 13px;
-  font-weight: 800;
-  line-height: 1.3;
+.summary-tile {
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border-color);
+  border-radius: var(--control-radius);
+  padding: 12px;
+  text-align: center;
 }
 
-.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);
+.summary-tile b {
+  display: block;
+  color: var(--heading-color);
+  font-family: var(--font-display);
+  font-size: clamp(20px, 5cqw, 26px);
+  line-height: 1;
 }
 
-.nav-button {
-  display: grid;
-  place-items: center;
-  align-content: center;
-  gap: 4px;
-  min-width: 0;
-  border: 0;
-  background: transparent;
-  color: #68778a;
+.summary-tile span {
+  display: block;
+  margin-top: 5px;
+  color: var(--muted-color);
   font-size: 11px;
-  font-weight: 1000;
-}
-
-.nav-button.is-active {
-  color: var(--theme);
-}
-
-.nav-button[aria-disabled="true"] {
-  cursor: not-allowed;
-  opacity: 0.46;
+  font-weight: 850;
+  text-transform: uppercase;
 }
 
-.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;
+.corner-flourish svg,
+.corner-flourish {
+  pointer-events: none;
 }
 
 @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;
-  }
-
-  .goal-create {
-    padding: 11px;
-  }
-
-  .goal-create-row {
+  .parent-row {
     grid-template-columns: 1fr;
   }
 
-  .create-button {
-    justify-content: center;
-  }
-
-  .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;
+  .parent-actions {
+    align-items: stretch;
   }
 
-  .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;
-  }
-
-  .goal-modal-backdrop {
-    padding: 12px 12px 78px;
-  }
-
-  .goal-modal-shell {
-    max-height: calc(100dvh - 96px);
-  }
-}
-
-@media (max-width: 374px) {
-  .screen-region {
-    padding-inline: 12px;
-  }
-
-  .kid-grid,
-  .counter-grid {
-    gap: 8px;
+  .summary-grid {
+    grid-template-columns: 1fr;
   }
 
-  .screen-title,
-  .goal-card h2 {
-    font-size: 25px;
+  .vt {
+    padding-inline: 10px;
   }
 }

frontend/styles/components.css

@@ -1,224 +1,400 @@
-* {
-  box-sizing: border-box;
-}
+/* ============================================================================
+   EPIC ERRANDS — STRUCTURAL COMPONENT CSS
+   Layout + structure only. Every color / font / radius / shadow comes from a
+   SEMANTIC token (see tokens.css). No literal theme values live here, so the
+   same stylesheet paints all three skins.
+   ========================================================================== */
 
-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%);
-}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { min-height: 100%; }
 
 body {
-  min-height: 100%;
-  margin: 0;
-  color: var(--color-ink);
   font-family: var(--font-body);
-  font-size: 16px;
-  line-height: 1.45;
+  color: var(--body-color);
+  background: var(--page-bg);
+  background-attachment: fixed;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  min-height: 100dvh;
 }
 
-button,
-input {
-  font: inherit;
-}
+button { font-family: inherit; }
+[contenteditable] { outline: none; }
+[contenteditable]:focus { box-shadow: 0 0 0 2px var(--accent); border-radius: 4px; }
 
-button {
-  cursor: pointer;
-}
+.display { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); line-height: var(--display-line); }
 
-button:focus-visible,
-input:focus-visible,
-summary:focus-visible {
-  outline: 3px solid rgba(27, 103, 213, 0.35);
-  outline-offset: 3px;
+/* ============================================================================
+   APP SHELL  (theme rail + stage)
+   ========================================================================== */
+.stage {
+  min-height: 100dvh;
+  display: grid;
+  place-items: start center;
+  padding: clamp(64px, 8vh, 96px) clamp(12px, 4vw, 40px) clamp(32px, 6vh, 64px);
 }
+#app { width: 100%; max-width: var(--card-max); display: flex; justify-content: center; }
 
-.material-symbols-rounded {
-  display: inline-flex;
+/* ---- Theme switcher rail (fixed top) ---- */
+.theme-rail {
+  position: fixed;
+  top: 0; left: 0; right: 0;
+  z-index: 50;
+  display: 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;
+  gap: 10px;
+  padding: 10px 16px;
+  background: rgba(20,22,28,.72);
+  backdrop-filter: blur(14px) saturate(1.2);
+  -webkit-backdrop-filter: blur(14px) saturate(1.2);
+  border-bottom: 1px solid rgba(255,255,255,.08);
+}
+.theme-rail__label {
+  font-family: 'Hanken Grotesk', system-ui, sans-serif;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: .14em;
+  text-transform: uppercase;
+  color: rgba(255,255,255,.5);
+  margin-right: 4px;
+}
+.theme-seg { display: flex; gap: 4px; background: rgba(255,255,255,.07); border-radius: 999px; padding: 4px; }
+.theme-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: none;
+  cursor: pointer;
+  background: transparent;
+  color: rgba(255,255,255,.7);
+  font-family: 'Hanken Grotesk', system-ui, sans-serif;
+  font-size: 13px;
+  font-weight: 700;
+  padding: 8px 16px;
+  border-radius: 999px;
+  transition: background .18s, color .18s;
   white-space: nowrap;
-  direction: ltr;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
+}
+.theme-btn:hover { color: #fff; }
+.theme-btn .swatch {
+  width: 13px; height: 13px; border-radius: 50%;
+  flex: none;
+  box-shadow: 0 0 0 2px rgba(255,255,255,.25);
+}
+.theme-btn[aria-pressed="true"] { background: #fff; color: #15171d; }
+.theme-btn[aria-pressed="true"] .swatch { box-shadow: 0 0 0 2px rgba(0,0,0,.12); }
+
+@media (max-width: 560px) {
+  .theme-rail__label { display: none; }
+  .theme-btn { padding: 8px 12px; }
+  .theme-btn .label { display: none; }
+  .theme-btn .swatch { width: 16px; height: 16px; }
 }
 
-.app-frame {
+/* ============================================================================
+   CARD  (the device-sized surface, shared by both screens)
+   ========================================================================== */
+.card {
   position: relative;
-  width: min(100%, var(--frame-width));
-  min-height: 100vh;
-  margin: 0 auto;
+  width: 100%;
+  max-width: var(--card-max);
+  background: var(--card-bg);
+  border-radius: var(--card-radius);
+  border: var(--card-border-width) solid var(--card-border-color);
+  box-shadow: var(--card-shadow);
   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;
+  isolation: isolate;
+  container-type: inline-size;
+}
+.card::before {
   content: "";
+  position: absolute; inset: 0;
+  background: var(--card-texture);
   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%);
+  z-index: 0;
 }
+.card-inner { position: relative; z-index: 1; padding: clamp(22px, 6cqw, 34px); }
 
-.screen {
-  position: relative;
-  z-index: 1;
-  min-height: 100vh;
-}
+/* ornate corner flourishes (atelier only — hidden elsewhere by token CSS) */
+.corner-flourish { position: absolute; width: 50px; height: 50px; color: var(--accent); z-index: 2; pointer-events: none; }
+.corner-flourish.tl { top: 10px; left: 10px; }
+.corner-flourish.tr { top: 10px; right: 10px; transform: scaleX(-1); }
+.corner-flourish.bl { bottom: 10px; left: 10px; transform: scaleY(-1); }
+.corner-flourish.br { bottom: 10px; right: 10px; transform: scale(-1,-1); }
+
+/* ============================================================================
+   SHARED PRIMITIVES
+   ========================================================================== */
+.divider { width: 100%; margin: clamp(18px, 5cqw, 26px) 0; border: none; border-top: 1px solid var(--field-border-color); }
 
-.brand-wordmark {
-  display: inline-grid;
-  gap: 0;
+/* Banner pill (top of quest screen) */
+.banner {
+  display: inline-flex; align-items: center; justify-content: center;
+  background: var(--banner-bg);
+  color: var(--banner-text);
   font-family: var(--font-display);
-  font-size: clamp(34px, 8vw, 50px);
-  font-weight: 800;
-  line-height: 0.82;
+  font-weight: var(--display-weight);
+  text-transform: var(--display-transform);
+  letter-spacing: var(--display-tracking);
+  font-size: clamp(16px, 3.6cqw, 22px);
+  padding: 11px 22px;
+  box-shadow: var(--control-shadow);
 }
 
-.brand-wordmark span:first-child {
-  color: var(--color-primary);
-  text-shadow: 0 2px 0 #ffe17d;
+/* Primary CTA */
+.btn-primary {
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center;
+  gap: .55em;
+  width: 100%;
+  border: none; cursor: pointer;
+  padding: clamp(15px, 4.2cqw, 19px);
+  border-radius: var(--primary-radius);
+  background: var(--primary);
+  color: var(--primary-text);
+  font-family: var(--font-display);
+  font-weight: var(--display-weight);
+  text-transform: var(--display-transform);
+  letter-spacing: var(--display-tracking);
+  font-size: clamp(19px, 5cqw, 25px);
+  box-shadow: var(--primary-shadow);
+  transition: transform .08s, box-shadow .08s, filter .15s;
 }
+.btn-primary:hover:not(:disabled) { filter: brightness(1.04); }
+.btn-primary:disabled { opacity: .45; cursor: not-allowed; }
+.btn-primary svg { width: 1.2em; height: 1.2em; }
 
-.brand-wordmark span:last-child {
-  color: #122346;
-  transform: rotate(-5deg);
+/* Secondary / ghost button */
+.btn-ghost {
+  display: inline-flex; align-items: center; gap: .5em;
+  border: 1.5px solid var(--field-border-color);
+  background: var(--field-bg);
+  color: var(--field-fg);
+  cursor: pointer;
+  font-family: var(--font-body);
+  font-weight: 700;
+  font-size: clamp(13px, 3.4cqw, 15px);
+  padding: 10px 16px;
+  border-radius: var(--control-radius);
+  box-shadow: var(--control-shadow);
+  white-space: nowrap;
+  transition: background .15s, border-color .15s, transform .1s;
 }
+.btn-ghost:hover { border-color: var(--accent); }
+.btn-ghost:active { transform: translateY(1px); }
+.btn-ghost svg { width: 1.1em; height: 1.1em; flex: none; }
 
-.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-btn {
+  flex: none; width: 44px; height: 44px; border-radius: var(--control-radius);
+  display: grid; place-items: center; cursor: pointer;
+  border: 1.5px solid var(--field-border-color);
+  background: var(--field-bg);
+  color: var(--field-fg);
+  box-shadow: var(--control-shadow);
+  transition: background .15s, transform .1s;
 }
+.icon-btn:hover { border-color: var(--accent); }
+.icon-btn:active { transform: translateY(1px); }
+.icon-btn svg { width: 22px; height: 22px; }
 
-.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;
-}
+/* ============================================================================
+   HEADER (shared)
+   ========================================================================== */
+.app-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
+.wordmark { display: flex; flex-direction: column; line-height: 1; }
+.wordmark .display { font-size: clamp(26px, 7cqw, 36px); color: var(--heading-color); }
+.wordmark .sub { font-family: var(--font-body); font-weight: 700; font-size: clamp(11px, 3cqw, 13px); color: var(--muted-color); letter-spacing: .04em; margin-top: 4px; }
 
-.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;
-}
+/* ============================================================================
+   TITLE / SECTION
+   ========================================================================== */
+.lead { text-align: center; margin-top: clamp(10px, 3cqw, 18px); }
+.lead h1 { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); line-height: var(--display-line); color: var(--heading-color); font-size: clamp(32px, 10cqw, 48px); }
+.lead p { margin-top: .55em; color: var(--muted-color); font-weight: 600; font-size: clamp(14px, 4cqw, 18px); }
+.lead .u { background-image: linear-gradient(var(--success), var(--success)); background-size: 100% 3px; background-position: 0 100%; background-repeat: no-repeat; padding-bottom: 1px; }
 
-.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;
+.section { margin-top: clamp(20px, 6cqw, 28px); }
+.section__head { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(12px, 3.4cqw, 16px); }
+.section__num {
+  flex: none; width: 30px; height: 30px; border-radius: 50%;
+  display: grid; place-items: center;
+  background: var(--accent-soft); color: var(--accent-ink);
+  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 16px;
 }
+.section__titles { min-width: 0; }
+.section__title { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); color: var(--heading-color); font-size: clamp(18px, 5cqw, 24px); display: flex; align-items: baseline; gap: .4em; flex-wrap: wrap; }
+.section__title .note { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: .62em; color: var(--faint-color); }
+.section__sub { color: var(--muted-color); font-size: clamp(13px, 3.6cqw, 15px); margin-top: 2px; }
 
-.status-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background: #5acb85;
+/* ============================================================================
+   GOAL ROWS
+   ========================================================================== */
+.goals { display: flex; flex-direction: column; gap: clamp(8px, 2.4cqw, 12px); }
+.goal {
+  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
+  gap: clamp(10px, 3cqw, 14px);
+  padding: clamp(11px, 3.2cqw, 15px) clamp(13px, 3.6cqw, 17px);
+  border: 1.5px solid var(--field-border-color);
+  border-radius: var(--control-radius);
+  background: var(--field-bg);
+  box-shadow: var(--control-shadow);
+  transition: border-color .15s;
 }
-
-.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;
+.goal:focus-within { border-color: var(--accent); }
+.goal__check {
+  flex: none; width: 24px; height: 24px; border-radius: 6px;
+  border: 2px solid var(--field-border-color);
+  background: var(--card-bg); cursor: pointer;
+  display: grid; place-items: center;
+  transition: background .12s, border-color .12s;
 }
-
-.primary-action {
-  background: linear-gradient(180deg, #ff3f38, var(--color-primary));
-  box-shadow: var(--shadow-button);
+.goal__check svg { width: 70%; height: 70%; opacity: 0; transition: opacity .12s; color: #fff; }
+.goal.done .goal__check { background: var(--success); border-color: var(--success); }
+.goal.done .goal__check svg { opacity: 1; }
+.goal__input {
+  border: none; outline: none; background: transparent;
+  font-family: var(--font-body); font-weight: 700;
+  font-size: clamp(15px, 4.2cqw, 18px); color: var(--field-fg);
+  min-width: 0;
 }
+.goal__input::placeholder { color: var(--field-fg-muted); font-weight: 600; }
+.goal.done .goal__input { text-decoration: line-through; color: var(--field-fg-muted); }
+.goal__clear { flex: none; width: 30px; height: 30px; border-radius: 8px; border: none; background: transparent; color: var(--field-fg-muted); cursor: pointer; display: grid; place-items: center; transition: background .15s, color .15s; }
+.goal__clear:hover { background: rgba(0,0,0,.06); color: var(--field-fg); }
+.goal__clear svg { width: 18px; height: 18px; }
 
-.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);
+.goal-add {
+  display: flex; align-items: center; justify-content: center; gap: .5em;
+  width: 100%;
+  padding: clamp(11px, 3.2cqw, 15px);
+  border: 1.5px dashed var(--control-border-color);
+  border-radius: var(--control-radius);
+  background: none; cursor: pointer;
+  font-family: var(--font-body); font-weight: 700;
+  color: var(--muted-color);
+  font-size: clamp(14px, 4cqw, 17px);
+  transition: border-color .15s, color .15s;
 }
+.goal-add:hover { border-color: var(--accent); color: var(--accent); }
+.goal-add svg { width: 20px; height: 20px; }
 
-.primary-action:active,
-.done-action:active {
-  transform: translateY(2px);
+/* ============================================================================
+   PHOTOS
+   ========================================================================== */
+.photos { display: flex; flex-wrap: wrap; gap: clamp(14px, 4cqw, 20px); }
+.photo { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 88px; }
+.photo__slot { position: relative; width: 88px; height: 88px; }
+.photo__slot image-slot { display: block; width: 88px; height: 88px; border: 3px solid var(--card-bg); border-radius: 50%; box-shadow: 0 0 0 1.5px var(--control-border-color), var(--control-shadow); }
+.photo__rm { position: absolute; top: -2px; right: -2px; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--control-border-color); background: var(--card-bg); color: var(--body-color); cursor: pointer; display: grid; place-items: center; box-shadow: var(--control-shadow); }
+.photo__rm svg { width: 13px; height: 13px; }
+.photo__name { width: 100%; text-align: center; border: none; outline: none; background: transparent; font-family: var(--font-body); font-weight: 600; font-size: 13px; color: var(--muted-color); }
+.photo-add {
+  width: 88px; height: 88px; border-radius: 50%; cursor: pointer;
+  border: 2px dashed var(--control-border-color); background: transparent;
+  color: var(--muted-color);
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
+  font-family: var(--font-body); font-weight: 700; font-size: 12px;
+  transition: border-color .15s, color .15s, background .15s;
 }
+.photo-add:hover { border-color: var(--accent); color: var(--accent); }
+.photo-add svg { width: 24px; height: 24px; }
 
-.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;
+/* ============================================================================
+   TONE CHIPS
+   ========================================================================== */
+.tones { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(8px, 2.4cqw, 12px); }
+.tone-chip {
+  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5em;
+  padding: clamp(12px, 3.4cqw, 17px) 4px;
+  border: 1.5px solid var(--field-border-color);
+  border-radius: var(--chip-radius);
+  background: var(--field-bg); cursor: pointer;
+  font-family: var(--font-body); font-weight: 700;
+  font-size: clamp(11px, 3cqw, 14px); color: var(--field-fg);
+  box-shadow: var(--control-shadow);
+  transition: border-color .15s, background .15s, box-shadow .15s;
 }
+.tone-chip svg { width: clamp(26px, 7cqw, 32px); height: clamp(26px, 7cqw, 32px); color: var(--field-fg-muted); transition: color .15s; }
+.tone-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+.tone-chip[aria-pressed="true"] svg { color: var(--accent-ink); }
+.tone-chip[aria-pressed="true"] span { color: var(--accent-ink); }
 
-.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;
+/* ============================================================================
+   STATUS FOOTER (builder)
+   ========================================================================== */
+.statusbar {
+  display: flex; align-items: center; gap: 14px;
+  margin-top: clamp(20px, 6cqw, 28px);
+  padding: 14px 18px;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border-color);
+  border-radius: var(--control-radius);
 }
+.statusbar__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
+.statusbar__info { flex: 1; min-width: 0; font-size: clamp(12px, 3.4cqw, 14px); line-height: 1.5; }
+.statusbar__info b { color: var(--accent); font-weight: 800; }
+.statusbar__info .k { color: var(--muted-color); font-weight: 700; }
 
-.field-label span {
-  color: var(--color-ink-soft);
-  font-size: 15px;
-  font-weight: 700;
+/* ============================================================================
+   QUEST SCREEN
+   ========================================================================== */
+.quest-top { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(14px, 4cqw, 20px); }
+.quest-top .banner { flex: 1 1 auto; }
+.viewtoggle { display: inline-flex; gap: 4px; background: var(--panel-bg); border: 1px solid var(--panel-border-color); padding: 4px; border-radius: var(--pill-radius); flex: none; }
+.vt { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer; background: transparent; color: var(--muted-color); font-family: var(--font-body); font-weight: 700; font-size: clamp(11px, 3cqw, 13px); padding: 8px 12px; border-radius: var(--pill-radius); transition: background .15s, color .15s; white-space: nowrap; }
+.vt svg { width: 15px; height: 15px; }
+.vt[aria-pressed="true"] { background: var(--accent); color: var(--on-primary); }
+
+.hero { position: relative; border-radius: var(--control-radius); overflow: hidden; box-shadow: var(--control-shadow); }
+.hero image-slot { display: block; width: 100%; aspect-ratio: 16 / 9; }
+.hero__points { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: var(--pill-radius); background: rgba(20,16,10,.5); backdrop-filter: blur(4px); color: #fff; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 16px; }
+.hero__points svg { width: 17px; height: 17px; color: var(--reward); }
+.hero__rank { position: absolute; top: 14px; left: 14px; padding: 5px 12px; border-radius: 6px; background: var(--accent); color: var(--on-primary); font-family: var(--font-display); font-weight: var(--display-weight); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
+
+.quest-headline { position: relative; margin-top: clamp(-30px, -6cqw, -18px); text-align: center; z-index: 2; }
+.quest-headline .eyebrow { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); color: var(--banner-text); font-size: clamp(15px, 3.6cqw, 20px); }
+.quest-headline .quest-title { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); line-height: var(--display-line); color: var(--quest-title-color); font-size: clamp(30px, 8cqw, 46px); margin: .12em 0; }
+
+/* parent panel */
+.parent {
+  margin-top: clamp(18px, 5cqw, 24px);
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border-color);
+  border-radius: var(--control-radius);
+  padding: clamp(16px, 4.4cqw, 22px);
 }
+.parent__head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
+.parent__head svg { width: 18px; height: 18px; color: var(--accent); }
+.parent__head h3 { font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); color: var(--heading-color); font-size: clamp(16px, 4cqw, 20px); }
+.parent__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 16px; margin-bottom: 18px; }
+.field .lab { font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-color); margin-bottom: 7px; }
+.field__input { width: 100%; background: var(--field-bg); color: var(--field-fg); border: 1.5px solid var(--field-border-color); border-radius: var(--control-radius); padding: 11px 13px; font-family: var(--font-body); font-size: 15px; font-weight: 600; outline: none; }
+.field__input:focus { border-color: var(--accent); }
+.field .big { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; color: var(--heading-color); }
+.field .pts { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 20px; color: var(--heading-color); }
+.field .pts svg { width: 18px; height: 18px; color: var(--reward); }
+.parent__btns { display: flex; gap: 12px; }
+.parent__btns .btn-ghost { flex: 1; justify-content: center; }
+.parent__btns .danger { flex: none; color: var(--accent); }
 
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
+.kidnote { margin-top: clamp(18px, 5cqw, 24px); border: 2px dashed var(--control-border-color); border-radius: var(--control-radius); padding: 22px; text-align: center; color: var(--muted-color); font-weight: 600; font-size: clamp(13px, 3.6cqw, 15px); }
+.kidnote b { display: block; margin-bottom: 6px; font-family: var(--font-display); font-weight: var(--display-weight); text-transform: var(--display-transform); letter-spacing: var(--display-tracking); color: var(--accent); font-size: 18px; }
+
+/* footer line on builder */
+.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 18px; margin-top: clamp(16px, 4cqw, 20px); color: var(--faint-color); font-weight: 700; font-size: clamp(11px, 3.2cqw, 14px); }
+.foot__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
+.foot span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
+
+/* screen transition */
+@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
+@media (prefers-reduced-motion: no-preference) { .screen-in { animation: screenIn .34s cubic-bezier(.2,.7,.3,1); } }
+
+/* loading spinner inside CTA */
+@keyframes spin { to { transform: rotate(360deg); } }
+.spinner { width: 1.2em; height: 1.2em; border-radius: 50%; border: 3px solid rgba(255,255,255,.4); border-top-color: currentColor; animation: spin .7s linear infinite; }
+
+@media (max-width: 520px) {
+  .tones { grid-template-columns: repeat(2, 1fr); }
+  .parent__grid { grid-template-columns: 1fr 1fr; }
 }

frontend/styles/tokens.css

@@ -1,54 +1,325 @@
+/* ============================================================================
+   EPIC ERRANDS — THEMEABLE TOKEN SYSTEM
+   ----------------------------------------------------------------------------
+   One app, three skins. The whole UI is painted from a single SEMANTIC token
+   contract (declared in :root below as documentation defaults). Each theme is
+   a complete re-binding of those tokens, scoped under [data-theme="…"], plus a
+   small block of theme-scoped "flourish" rules for decoration that a flat
+   token cannot express (halftone, speech bubbles, ornate frames, lined paper).
+
+   The DOM never changes between themes — only the values behind these names.
+
+   THEMES
+     storybook  — crayon / kids' picture-book      (Baloo 2 · Nunito)
+     comic      — comic-book command center         (Bangers · Hanken Grotesk)
+     atelier    — parchment questbook               (Playfair Display · Lora)
+   ========================================================================== */
+
+/* ============================================================================
+   SEMANTIC TOKEN CONTRACT  (names every component is allowed to reference)
+   The values here are neutral fallbacks; a theme always overrides them.
+   ========================================================================== */
 :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);
+  /* — Type — */
+  --font-display: system-ui, sans-serif;
+  --font-body: system-ui, sans-serif;
+  --display-weight: 800;
+  --display-transform: none;     /* none | uppercase */
+  --display-tracking: 0;
+  --display-line: 1.05;
+  --display-stroke: 0;           /* px of -webkit-text-stroke on display text */
+  --display-stroke-color: transparent;
+
+  /* — Page & surfaces — */
+  --page-bg: #f4f5f7;
+  --page-fg-pattern: none;       /* optional page texture overlay */
+  --card-bg: #ffffff;
+  --card-radius: 24px;
+  --card-border-width: 0px;
+  --card-border-color: transparent;
+  --card-shadow: 0 24px 60px -22px rgba(30,40,60,.4);
+  --card-texture: none;          /* background-image overlay inside the card */
+  --card-max: 540px;
+
+  --panel-bg: #f3f4f6;           /* raised inner panels: status bar, parent box */
+  --panel-border-color: #e5e7eb;
+  --field-bg: #fcfcfd;           /* text inputs / goal rows */
+  --field-border-color: #e2e5e9;
+  --field-fg: #353a42;           /* text ON a field surface (may differ from body) */
+  --field-fg-muted: #8b9097;     /* placeholder / secondary text on a field */
+
+  /* — Text roles — */
+  --heading-color: #1f2430;
+  --body-color: #353a42;
+  --muted-color: #8b9097;
+  --faint-color: #b3b8bf;
+  --on-primary: #ffffff;
+
+  /* — Accent + primary action — */
+  --accent: #2f7fd6;             /* selection ring, links, secondary highlight */
+  --accent-soft: #e7f0fb;        /* selected chip fill */
+  --accent-ink: #1d4f88;         /* text/icon on accent-soft */
+  --primary: #2f7fd6;            /* CTA fill (may be a gradient) */
+  --primary-edge: #1d5fa8;       /* 3D bottom edge under CTA */
+  --primary-text: #ffffff;
+
+  /* — Semantic status colors — */
+  --success: #2f9e4e;            /* checks and completed states */
+  --reward: #f6b81e;             /* points, stars, ribbons */
+  --quest-title-color: #1f2430;  /* the big generated quest title */
+  --banner-bg: #2f7fd6;          /* top banner on the quest screen */
+  --banner-text: #ffffff;
+
+  /* — Controls — */
+  --control-radius: 14px;
+  --chip-radius: 14px;
+  --pill-radius: 999px;
+  --control-border-color: #e2e5e9;
+  --control-shadow: 0 2px 5px -2px rgba(30,40,60,.12);
+
+  /* — Button geometry per theme — */
+  --primary-radius: 999px;
+  --primary-shadow: 0 10px 22px -8px rgba(47,127,214,.55);
+
+  /* image-slot theming hook */
+  --is-bg: #eef1f5;
+}
+
+/* ============================================================================
+   THEME 1 — STORYBOOK   (crayon, picture-book, soft & sunny)
+   ========================================================================== */
+[data-theme="storybook"] {
+  --font-display: 'Baloo 2', cursive;
+  --font-body: 'Nunito', system-ui, sans-serif;
+  --display-weight: 800;
+  --display-transform: none;
+  --display-tracking: -.01em;
+  --display-line: 1.02;
+  --display-stroke: 0;
+
+  --page-bg: radial-gradient(125% 90% at 50% 0%, #eef6fd 0%, #e4eff9 50%, #d9e7f4 100%);
+  --card-bg: #ffffff;
+  --card-radius: 30px;
+  --card-border-width: 0px;
+  --card-border-color: transparent;
+  --card-shadow: 0 24px 60px -22px rgba(40,55,80,.42);
+  --card-texture:
+    radial-gradient(60px 34px at 16% 5%, rgba(120,180,230,.10), transparent 70%),
+    radial-gradient(80px 40px at 88% 8%, rgba(120,180,230,.09), transparent 70%),
+    repeating-linear-gradient(180deg, transparent 0 33px, rgba(120,150,180,.045) 33px 34px);
+  --card-max: 500px;
+
+  --panel-bg: #f3f7fb;
+  --panel-border-color: #e4e9ef;
+  --field-bg: #fcfcfd;
+  --field-border-color: #e4e6e9;
+  --field-fg: #34373a;
+  --field-fg-muted: #a9aeb4;
+
+  --heading-color: #163154;
+  --body-color: #34373a;
+  --muted-color: #8b9097;
+  --faint-color: #a9aeb4;
+  --on-primary: #ffffff;
+
+  --accent: #e9382d;
+  --accent-soft: #eaf5ee;
+  --accent-ink: #2f7f47;
+  --primary: linear-gradient(180deg, #e9382d 0%, #c52b22 100%);
+  --primary-edge: #a82018;
+  --primary-text: #ffffff;
+  --primary-radius: 999px;
+  --primary-shadow: 0 7px 0 var(--primary-edge), 0 10px 22px -8px rgba(233,56,45,.55);
+
+  --success: #46a05d;
+  --reward: #f6b81e;
+  --quest-title-color: #3a2a15;
+  --banner-bg: #f4e8c8;
+  --banner-text: #3a2a15;
+
+  --control-radius: 13px;
+  --chip-radius: 13px;
+  --control-border-color: #e4e6e9;
+  --control-shadow: 0 2px 5px -2px rgba(40,55,80,.12);
+
+  --is-bg: #eaf2fa;
+}
+
+/* ============================================================================
+   THEME 2 — COMIC   (dark command center, halftone, bursts, bold ink)
+   ========================================================================== */
+[data-theme="comic"] {
+  --font-display: 'Bangers', system-ui, sans-serif;
+  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
+  --display-weight: 400;
+  --display-transform: uppercase;
+  --display-tracking: .04em;
+  --display-line: .92;
+  --display-stroke: 0;
+
+  --page-bg: radial-gradient(120% 80% at 50% -10%, #1a1a1f 0%, #0a0a0b 55%);
+  --card-bg: #121214;
+  --card-radius: 26px;
+  --card-border-width: 6px;
+  --card-border-color: #f6a81d;
+  --card-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.6);
+  --card-texture: radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.4px);
+  --card-max: 620px;
+
+  --panel-bg: #1b1b1f;
+  --panel-border-color: rgba(255,255,255,.12);
+  --field-bg: #f1ecdd;            /* cream input plates */
+  --field-border-color: rgba(0,0,0,.15);
+  --field-fg: #1a1a1a;            /* dark ink on cream plates */
+  --field-fg-muted: #8a8268;
+
+  --heading-color: #f6a81d;       /* gold display headings */
+  --body-color: #ededf0;
+  --muted-color: #a6a6ad;
+  --faint-color: #6f6f77;
+  --on-primary: #1a1208;
+
+  --accent: #2cb4e8;
+  --accent-soft: rgba(44,180,232,.12);
+  --accent-ink: #2cb4e8;
+  --primary: #f6a81d;
+  --primary-edge: #b9790a;
+  --primary-text: #1a1208;
+  --primary-radius: 16px;
+  --primary-shadow: 0 8px 0 var(--primary-edge), 0 16px 30px -8px rgba(246,168,29,.5);
+
+  --success: #74b62e;
+  --reward: #f6a81d;
+  --quest-title-color: #e23a2c;
+  --banner-bg: #f1ecdd;
+  --banner-text: #1a1a1a;
+
+  --control-radius: 12px;
+  --chip-radius: 12px;
+  --control-border-color: rgba(255,255,255,.16);
+  --control-shadow: 0 6px 18px rgba(0,0,0,.35);
+
+  --is-bg: #1b1b1f;
+}
+
+/* ============================================================================
+   THEME 3 — ATELIER   (parchment questbook, serif, ornate gold, calm)
+   ========================================================================== */
+[data-theme="atelier"] {
+  --font-display: 'Playfair Display', Georgia, serif;
+  --font-body: 'Lora', Georgia, serif;
+  --display-weight: 800;
+  --display-transform: none;
+  --display-tracking: 0;
+  --display-line: 1.05;
+  --display-stroke: 0;
+
+  --page-bg:
+    radial-gradient(120% 80% at 50% -10%, rgba(255,250,238,.9), transparent 60%),
+    radial-gradient(100% 60% at 100% 110%, rgba(214,196,156,.35), transparent 55%),
+    radial-gradient(80% 50% at 0% 100%, rgba(214,196,156,.25), transparent 55%),
+    #f3ead6;
+  --card-bg: #f8f1e1;
+  --card-radius: 22px;
+  --card-border-width: 1px;
+  --card-border-color: #e3d6b8;
+  --card-shadow: 0 2px 4px rgba(70,50,20,.12), 0 18px 40px -16px rgba(70,50,20,.40);
+  --card-texture:
+    radial-gradient(140% 90% at 50% 0%, rgba(255,251,242,.7), transparent 55%),
+    radial-gradient(100% 70% at 100% 100%, rgba(220,202,162,.25), transparent 60%);
+  --card-max: 600px;
+
+  --panel-bg: #f1e7cf;
+  --panel-border-color: #e3d6b8;
+  --field-bg: #fcf8ee;
+  --field-border-color: #d4c39c;
+  --field-fg: #574b39;
+  --field-fg-muted: #b0a286;
+
+  --heading-color: #2d2417;
+  --body-color: #574b39;
+  --muted-color: #8c7e66;
+  --faint-color: #b0a286;
+  --on-primary: #f4efd9;
+
+  --accent: #c8a25c;
+  --accent-soft: #f1e4c5;
+  --accent-ink: #8a6c3c;
+  --primary: linear-gradient(180deg, #4e6038 0%, #43542f 100%);
+  --primary-edge: #283318;
+  --primary-text: #f4efd9;
+  --primary-radius: 12px;
+  --primary-shadow: 0 2px 0 var(--primary-edge), 0 8px 18px -4px rgba(40,55,25,.5);
+
+  --success: #2e9e6a;
+  --reward: #e5b23c;
+  --quest-title-color: #573b7e;
+  --banner-bg: transparent;
+  --banner-text: #2d2417;
+
+  --control-radius: 12px;
+  --chip-radius: 12px;
+  --control-border-color: #d4c39c;
+  --control-shadow: 0 1px 2px rgba(80,60,30,.05), 0 8px 24px -12px rgba(80,60,30,.18);
+
+  --is-bg: #f1e7cf;
+}
+
+/* ============================================================================
+   FLOURISHES — theme-scoped decoration on the SHARED DOM.
+   These do not change structure; they layer ornament that flat tokens cannot.
+   ========================================================================== */
+
+/* ---- STORYBOOK: chunky candy buttons, dashed dividers, sunny chips ---- */
+[data-theme="storybook"] .divider { border: none; border-top: 2px dashed var(--field-border-color); }
+[data-theme="storybook"] .btn-primary:active { transform: translateY(5px); box-shadow: 0 2px 0 var(--primary-edge), 0 6px 12px -8px rgba(233,56,45,.5); }
+[data-theme="storybook"] .quest-headline { background: linear-gradient(180deg,#fbf3dd,#f4e8c8 55%,#e8d6a8); border-radius: 14px; padding: 22px 26px; box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -10px 22px -10px rgba(150,120,60,.35), 0 14px 26px -14px rgba(80,60,20,.5); }
+[data-theme="storybook"] .tone-chip[aria-pressed="true"] { border-color: var(--success); background: var(--accent-soft); }
+[data-theme="storybook"] .banner { border-radius: 999px; }
+
+/* ---- COMIC: halftone, black outlines, speech bubble, burst CTA ---- */
+[data-theme="comic"] .halftone { background-image: radial-gradient(rgba(0,0,0,.20) 1.3px, transparent 1.6px); background-size: 8px 8px; }
+[data-theme="comic"] .card-inner > * { color: inherit; }
+[data-theme="comic"] .btn-primary {
+  -webkit-text-stroke: 1px rgba(0,0,0,.25); paint-order: stroke fill;
 }
+[data-theme="comic"] .btn-primary:active { transform: translateY(4px); box-shadow: 0 4px 0 var(--primary-edge), 0 8px 14px -8px rgba(0,0,0,.4); }
+[data-theme="comic"] .tone-chip { border-width: 2px; }
+[data-theme="comic"] .tone-chip[aria-pressed="true"] { border-color: var(--reward); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--reward) inset; }
+/* cream banner with torn comic edge */
+[data-theme="comic"] .banner {
+  transform: rotate(-1.2deg);
+  background-image: radial-gradient(rgba(0,0,0,.10) 1.1px, transparent 1.4px);
+  background-size: 8px 8px;
+  clip-path: polygon(0 14%, 6% 0, 22% 10%, 40% 2%, 62% 11%, 82% 1%, 96% 12%, 100% 4%, 99% 84%, 92% 100%, 74% 90%, 52% 99%, 30% 89%, 12% 100%, 3% 88%, 0 96%);
+}
+/* quest headline becomes a speech bubble */
+[data-theme="comic"] .quest-headline {
+  background: var(--banner-bg);
+  color: var(--banner-text);
+  padding: 26px 30px 30px;
+  filter: drop-shadow(0 8px 16px rgba(0,0,0,.4));
+  clip-path: polygon(3% 18%, 12% 6%, 22% 16%, 33% 2%, 45% 14%, 57% 0%, 68% 13%, 80% 3%, 90% 15%, 99% 8%, 96% 30%, 100% 44%, 95% 58%, 100% 72%, 90% 80%, 94% 96%, 78% 90%, 70% 100%, 60% 90%, 50% 99%, 40% 89%, 30% 99%, 21% 88%, 10% 96%, 6% 80%, 0% 66%, 4% 50%, 0% 34%);
+}
+[data-theme="comic"] .quest-headline .quest-title { -webkit-text-stroke: 2px #1a1a1a; paint-order: stroke fill; }
+[data-theme="comic"] .divider { border: none; border-top: 1px solid var(--panel-border-color); }
+/* ---- ATELIER: ornate gold inset frame, diamond dividers, serif calm ---- */
+[data-theme="atelier"] .card.ornate {
+  box-shadow: var(--card-shadow), inset 0 0 0 2px var(--accent), inset 0 0 0 3px var(--card-bg), inset 0 0 0 4px rgba(200,162,92,.4);
+}
+[data-theme="atelier"] .card.ornate .corner-flourish { display: block; }
+[data-theme="atelier"] .divider {
+  border: none; height: 1px; background: var(--field-border-color);
+  position: relative; overflow: visible;
+}
+[data-theme="atelier"] .divider::after {
+  content: ""; position: absolute; left: 50%; top: 50%;
+  width: 9px; height: 9px; transform: translate(-50%,-50%) rotate(45deg);
+  background: var(--accent); box-shadow: 0 0 0 3px var(--card-bg);
+}
+[data-theme="atelier"] .quest-headline { background: linear-gradient(180deg, #fcf7ea, #f6eedb); border-radius: 14px; padding: clamp(20px,3.5vw,30px); box-shadow: 0 -2px 0 rgba(255,255,255,.6), 0 10px 30px -10px rgba(70,50,20,.35), inset 0 0 0 1px rgba(180,150,100,.18); }
+[data-theme="atelier"] .tone-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
+[data-theme="atelier"] .banner { border-radius: 12px; }
+
+/* corner flourishes are hidden unless the atelier ornate card shows them */
+.corner-flourish { display: none; }