added blogs

.env.example

@@ -70,8 +70,8 @@ JOB_STALE_SECONDS=900
 # ---- ElevenLabs (audio overviews, video narration, voice cloning)
 ELEVENLABS_API_KEY=
 ELEVENLABS_MODEL=eleven_multilingual_v2
-ELEVENLABS_VOICE_A=21m00Tcm4TlvDq8ikWAM
-ELEVENLABS_VOICE_B=pNInz6obpgDQGcFMaJgB
+ELEVENLABS_VOICE_A=EXAVITQu4vr4xnSDxMaL
+ELEVENLABS_VOICE_B=JBFqnCBsd6RMkjVDRZzb
 
 # ---- Launchpad social publishing
 # Bluesky needs nothing here (users connect with an app password).

backend/app/config.py

@@ -78,8 +78,8 @@ class Settings(BaseSettings):
     # ElevenLabs (premade voices by default; a consented clone can replace host A)
     elevenlabs_api_key: str = ""
     elevenlabs_model: str = "eleven_multilingual_v2"
-    elevenlabs_voice_a: str = "21m00Tcm4TlvDq8ikWAM"  # Rachel
-    elevenlabs_voice_b: str = "pNInz6obpgDQGcFMaJgB"  # Adam
+    elevenlabs_voice_a: str = "EXAVITQu4vr4xnSDxMaL"  # Sarah (premade)
+    elevenlabs_voice_b: str = "JBFqnCBsd6RMkjVDRZzb"  # George (premade)
 
     # Social publishing (Launchpad). Redirect URIs: {API_URL}/api/social/{x,linkedin}/callback
     social_token_key: str = ""  # Fernet key; derived from JWT_SECRET when empty

backend/app/llm/signatures.py

@@ -115,7 +115,10 @@ class ResearchArchive(dspy.Signature):
     lines before relying on them. Answer ONLY from text you read. Every factual sentence needs a
     [n] marker, and every marker needs a citation with the file path and the line range you read.
     If the archive does not cover the question, say so plainly and set unsupported=true.
-    Write in plain, warm prose. Never use em dashes."""
+    Write in plain, warm prose formatted as Markdown: short paragraphs separated by blank lines,
+    bullet or numbered lists when comparing or listing things, **bold** for the key idea, and a
+    ### heading only when the answer has distinct parts. Put [n] markers right after the sentence
+    or list item they support. Never use em dashes."""
 
     question: str = dspy.InputField()
     archive_guide: str = dspy.InputField(desc="How this notebook's files are laid out")
@@ -190,7 +193,8 @@ class SummarizeNotebook(dspy.Signature):
 
     title: str = dspy.InputField()
     passages: list[str] = dspy.InputField(desc="Posts with path and numbered lines")
-    summary: str = dspy.OutputField(desc="3 to 6 paragraphs with [n] markers")
+    summary: str = dspy.OutputField(desc="Markdown: 3 to 6 short paragraphs or sections (### headings allowed), "
+                                         "blank lines between blocks, [n] markers after supported sentences")
     themes: list[str] = dspy.OutputField(desc="3 to 7 short theme names")
     citations: list[FileCitation] = dspy.OutputField()
 

backend/app/pipeline/media.py

@@ -39,6 +39,13 @@ def host_voices(db: Session, workspace_id: uuid.UUID) -> tuple[str, str]:
     return voices.get("host_a") or settings.elevenlabs_voice_a, voices.get("host_b") or settings.elevenlabs_voice_b
 
 
+def host_settings(db: Session, workspace_id: uuid.UUID) -> dict[str, tts.VoiceSettings]:
+    """Per host delivery settings (stability, similarity, style, speed) saved on the Voice page."""
+    vp = db.scalar(select(VoiceProfile).where(VoiceProfile.workspace_id == workspace_id))
+    saved = ((vp.host_voices if vp else None) or {}).get("settings") or {}
+    return {h: tts.VoiceSettings.from_dict(saved.get(h)) for h in ("host_a", "host_b")}
+
+
 def _require_tts() -> None:
     if not settings.elevenlabs_api_key:
         raise PermanentJobError("Audio needs ELEVENLABS_API_KEY in .env")
@@ -64,20 +71,30 @@ def audio_overview(db: Session, job: Job, artifact: Artifact) -> dict:
         raise RuntimeError("The script came back empty")
     tools = tools_for(corpus, docs)
     voice_a, voice_b = host_voices(db, artifact.workspace_id)
+    delivery = host_settings(db, artifact.workspace_id)
+    script = [
+        tts.Line(text=ln["text"], voice_id=voice_b if ln.get("speaker") == "host_b" else voice_a,
+                 settings=delivery["host_b" if ln.get("speaker") == "host_b" else "host_a"])
+        for ln in lines
+    ]
+    update_job(db, job, progress=0.2, message=f"Recording {len(script)} lines")
+
+    def progress(done: int) -> None:
+        if done % 3 == 0 or done == len(script):
+            update_job(db, job, progress=0.2 + 0.75 * done / len(script),
+                       message=f"Recorded {done} of {len(script)} lines")
+
+    clips = tts.synthesize_many(artifact.workspace_id, script, on_done=progress)
     audio = bytearray()
     segments = []
     t = 0.0
-    for i, line in enumerate(lines):
-        voice = voice_a if line.get("speaker") == "host_a" else voice_b
-        clip = tts.synthesize(artifact.workspace_id, line["text"], voice)
+    for line, clip in zip(lines, clips, strict=True):
         seconds = tts.mp3_seconds(clip)
         segments.append({"speaker": line.get("speaker", "host_a"), "text": line["text"],
                          "start": round(t, 2), "end": round(t + seconds, 2),
                          "sources": verify_refs(tools, line.get("sources") or [])})
         audio += clip
         t += seconds
-        update_job(db, job, progress=0.2 + 0.75 * (i + 1) / len(lines),
-                   message=f"Recording line {i + 1} of {len(lines)}")
     key = keys.artifact(artifact.workspace_id, artifact.id, "audio", "mp3")
     storage.put_bytes(key, bytes(audio), "audio/mpeg")
     artifact.storage_key = key
@@ -129,13 +146,14 @@ def make_video(db: Session, job: Job, artifact: Artifact) -> None:
     audio = bytearray()
     cursor = 0.0
     voice_a, _ = host_voices(db, artifact.workspace_id)
+    narrator = host_settings(db, artifact.workspace_id)["host_a"]
     out_scenes = []
     for i, s in enumerate(scenes):
         narration = (s.get("narration") or "").strip()
         duration = _clamp(s.get("duration_hint_s"), 2.0, 20.0)
         if narration and settings.elevenlabs_api_key:
             update_job(db, job, progress=0.15 + 0.5 * i / len(scenes), message=f"Narrating scene {i + 1}")
-            clip, words = tts.synthesize_with_timestamps(artifact.workspace_id, narration, voice_a)
+            clip, words = tts.synthesize_with_timestamps(artifact.workspace_id, narration, voice_a, narrator)
             seconds = tts.mp3_seconds(clip)
             # Pad with silence so each clip starts exactly when its scene does.
             audio += _silence(cursor - tts.mp3_seconds(bytes(audio)))

backend/app/pipeline/research.py

@@ -64,7 +64,7 @@ def verify_citations(tools: ScopedTools, answer: str, citations) -> tuple[str, l
         return f"[{n}]" if n else ""
 
     text = _MARKER.sub(swap, answer)
-    text = re.sub(r"\s+([.,;:!?])", r"\1", text)
+    text = re.sub(r"[ \t]+([.,;:!?])", r"\1", text)  # keep line breaks: answers are Markdown
     return text.strip(), verified
 
 

backend/app/routers/voice.py

@@ -1,16 +1,17 @@
+import re
 import uuid
 from datetime import UTC, datetime
 
 from fastapi import APIRouter, Depends, HTTPException, Request
 from fastapi.concurrency import run_in_threadpool
 from pydantic import BaseModel, Field
-from sqlalchemy import select
+from sqlalchemy import func, select
 
 from app.auth import Ctx, get_ctx
 from app.config import settings
-from app.models import Upload, VoiceConsent, VoiceProfile
+from app.models import Document, Job, Upload, VoiceConsent, VoiceProfile
 from app.services import tts
-from app.services.jobs import create_job, serialize_job
+from app.services.jobs import create_job, record_usage, serialize_job
 from app.services.plans import effective_plan
 from app.services.storage import storage
 
@@ -21,27 +22,60 @@ CONSENT_TEXT = (
     "ElevenLabs, only for audio and video made in my workspace. I can revoke this at any time, which deletes "
     "the synthetic voice."
 )
+PREVIEW_LINE = "Here is how I sound reading your archive. Every line I say comes from something you wrote."
 
 
 class BuildIn(BaseModel):
     document_ids: list[uuid.UUID] = Field(default_factory=list, max_length=10)
 
 
+class DeliveryIn(BaseModel):
+    stability: float = Field(0.45, ge=0, le=1)
+    similarity_boost: float = Field(0.8, ge=0, le=1)
+    style: float = Field(0.2, ge=0, le=1)
+    speed: float = Field(1.0, ge=0.7, le=1.2)
+
+
 class ProfileIn(BaseModel):
     profile: dict | None = None
     host_voices: dict[str, str] | None = None
+    delivery: dict[str, DeliveryIn] | None = None  # per host: {"host_a": {...}, "host_b": {...}}
 
 
 class ConsentIn(BaseModel):
-    upload_id: uuid.UUID
+    upload_ids: list[uuid.UUID] = Field(default_factory=list, max_length=10)
+    upload_id: uuid.UUID | None = None  # single sample (older clients)
     agreed: bool
     consent_text: str
+    remove_background_noise: bool = True
+
+
+class PreviewIn(BaseModel):
+    voice_id: str = Field(min_length=5, max_length=60)
+    text: str | None = Field(None, max_length=400)
+    host: str | None = None  # use that host's saved delivery settings
+    delivery: DeliveryIn | None = None
+
+
+class LibraryAddIn(BaseModel):
+    public_owner_id: str = Field(min_length=5, max_length=100)
+    voice_id: str = Field(min_length=5, max_length=60)
+    name: str = Field(min_length=1, max_length=100)
+    use_as: str | None = None  # "host_a" | "host_b"
 
 
 def _profile(ctx: Ctx) -> VoiceProfile | None:
     return ctx.db.scalar(select(VoiceProfile).where(VoiceProfile.workspace_id == ctx.workspace.id))
 
 
+def _ensure_profile(ctx: Ctx) -> VoiceProfile:
+    vp = _profile(ctx)
+    if not vp:
+        vp = VoiceProfile(workspace_id=ctx.workspace.id)
+        ctx.db.add(vp)
+    return vp
+
+
 def _consent(ctx: Ctx) -> VoiceConsent | None:
     return ctx.db.scalar(
         select(VoiceConsent).where(VoiceConsent.workspace_id == ctx.workspace.id, VoiceConsent.revoked_at.is_(None))
@@ -49,25 +83,42 @@ def _consent(ctx: Ctx) -> VoiceConsent | None:
     )
 
 
+def _clone_job(ctx: Ctx, consent: VoiceConsent) -> Job | None:
+    return ctx.db.scalar(
+        select(Job).where(Job.workspace_id == ctx.workspace.id, Job.kind == "voice_clone")
+        .order_by(Job.created_at.desc()).limit(1)
+    )
+
+
 def _serialize(ctx: Ctx) -> dict:
     vp = _profile(ctx)
     consent = _consent(ctx)
     plan = effective_plan(ctx.db, ctx.workspace)
     voices = (vp.host_voices if vp else None) or {}
+    delivery = voices.get("settings") or {}
+    job = _clone_job(ctx, consent) if consent else None
+    preview_key = (job.result or {}).get("preview_key") if job and job.status == "done" else None
     return {
         "profile": vp.profile_json if vp else None,
         "sample_doc_ids": vp.sample_doc_ids if vp else [],
         "updated_at": vp.updated_at.isoformat() if vp and vp.updated_at else None,
         "host_voices": {"host_a": voices.get("host_a") or settings.elevenlabs_voice_a,
                         "host_b": voices.get("host_b") or settings.elevenlabs_voice_b},
+        "delivery": {h: tts.VoiceSettings.from_dict(delivery.get(h)).body() for h in ("host_a", "host_b")},
         "clone": {
             "allowed": plan.voice_cloning,
             "consent_text": CONSENT_TEXT,
-            "status": ("ready" if consent and consent.elevenlabs_voice_id else "processing" if consent else "none"),
+            "status": ("ready" if consent and consent.elevenlabs_voice_id
+                       else "failed" if consent and job and job.status == "failed"
+                       else "processing" if consent else "none"),
             "voice_id": consent.elevenlabs_voice_id if consent else None,
             "created_at": consent.created_at.isoformat() if consent else None,
+            "error": job.error if job and job.status == "failed" else None,
+            "preview_url": storage.presign_get(preview_key) if preview_key else None,
         },
         "tts_configured": bool(settings.elevenlabs_api_key),
+        "model": tts.model_id(),
+        "models": tts.MODELS,
     }
 
 
@@ -78,14 +129,17 @@ def get_voice(ctx: Ctx = Depends(get_ctx)):
 
 @router.put("")
 def update_voice(body: ProfileIn, ctx: Ctx = Depends(get_ctx)):
-    vp = _profile(ctx)
-    if not vp:
-        vp = VoiceProfile(workspace_id=ctx.workspace.id)
-        ctx.db.add(vp)
+    vp = _ensure_profile(ctx)
     if body.profile is not None:
         vp.profile_json = body.profile
+    voices = dict(vp.host_voices or {})
     if body.host_voices is not None:
-        vp.host_voices = {k: v for k, v in body.host_voices.items() if k in ("host_a", "host_b") and v}
+        voices.update({k: v for k, v in body.host_voices.items() if k in ("host_a", "host_b") and v})
+    if body.delivery is not None:
+        saved = dict(voices.get("settings") or {})
+        saved.update({h: d.model_dump() for h, d in body.delivery.items() if h in ("host_a", "host_b")})
+        voices["settings"] = saved
+    vp.host_voices = voices
     ctx.db.commit()
     return _serialize(ctx)
 
@@ -101,11 +155,95 @@ def build(body: BuildIn, ctx: Ctx = Depends(get_ctx)):
 async def voices(ctx: Ctx = Depends(get_ctx)):
     items = await run_in_threadpool(tts.list_voices)
     consent = _consent(ctx)
-    if consent and consent.elevenlabs_voice_id and not any(v["voice_id"] == consent.elevenlabs_voice_id for v in items):
-        items = [{"voice_id": consent.elevenlabs_voice_id, "name": "My voice", "category": "cloned"}, *items]
+    if consent and consent.elevenlabs_voice_id:
+        items = [{**v, "name": f"{v['name']} (my voice)", "category": "my voice"}
+                 if v["voice_id"] == consent.elevenlabs_voice_id else v for v in items]
+        if not any(v["voice_id"] == consent.elevenlabs_voice_id for v in items):
+            items = [{"voice_id": consent.elevenlabs_voice_id, "name": "My voice", "category": "my voice"}, *items]
     return items
 
 
+@router.get("/library")
+async def library(ctx: Ctx = Depends(get_ctx), search: str = "", gender: str = "", age: str = "",
+                  accent: str = "", language: str = "", use_case: str = "", page: int = 0):
+    if not settings.elevenlabs_api_key:
+        raise HTTPException(503, "Set ELEVENLABS_API_KEY in .env to browse the voice library.")
+    try:
+        return await run_in_threadpool(lambda: tts.search_library(
+            search=search, gender=gender, age=age, accent=accent, language=language, use_case=use_case,
+            page=max(page, 0)))
+    except tts.TTSError as exc:
+        raise HTTPException(502, str(exc)) from exc
+
+
+@router.post("/library/add")
+async def add_from_library(body: LibraryAddIn, ctx: Ctx = Depends(get_ctx)):
+    try:
+        voice_id = await run_in_threadpool(tts.add_library_voice, body.public_owner_id, body.voice_id, body.name)
+    except tts.TTSError as exc:
+        raise HTTPException(502, str(exc)) from exc
+    if body.use_as in ("host_a", "host_b"):
+        vp = _ensure_profile(ctx)
+        vp.host_voices = {**(vp.host_voices or {}), body.use_as: voice_id}
+        ctx.db.commit()
+    return {"voice_id": voice_id, **_serialize(ctx)}
+
+
+@router.post("/preview")
+async def preview(body: PreviewIn, ctx: Ctx = Depends(get_ctx)):
+    """Speak a short line in any voice with the given (or a host's saved) delivery. Cached, metered."""
+    if not settings.elevenlabs_api_key:
+        raise HTTPException(503, "Set ELEVENLABS_API_KEY in .env to preview voices.")
+    if body.delivery:
+        vs = tts.VoiceSettings.from_dict(body.delivery.model_dump())
+    else:
+        saved = (((_profile(ctx) or VoiceProfile()).host_voices or {}).get("settings") or {}).get(body.host or "")
+        vs = tts.VoiceSettings.from_dict(saved)
+    text = (body.text or PREVIEW_LINE).strip()[:400]
+    try:
+        clip = await run_in_threadpool(tts.synthesize, ctx.workspace.id, text, body.voice_id, vs)
+    except tts.TTSError as exc:
+        raise HTTPException(502, str(exc)) from exc
+    key = f"ws/{ctx.workspace.id}/voice-previews/{uuid.uuid4().hex}.mp3"
+    storage.put_bytes(key, clip, "audio/mpeg")
+    record_usage(ctx.db, workspace_id=ctx.workspace.id, kind="tts", provider="elevenlabs",
+                 quantity=round(tts.mp3_seconds(clip), 1), unit="seconds")
+    return {"url": storage.presign_get(key), "seconds": round(tts.mp3_seconds(clip), 1)}
+
+
+@router.get("/reading-script")
+def reading_script(ctx: Ctx = Depends(get_ctx)):
+    """About two minutes of the writer's own prose to read aloud for the clone (their words, their rhythm)."""
+    doc = ctx.db.scalar(
+        select(Document).where(Document.workspace_id == ctx.workspace.id, Document.clean_text != "")
+        .order_by(func.length(Document.clean_text).desc()).limit(1)
+    )
+    if not doc:
+        text = ("Writing is how I think out loud. I start with a question I cannot answer yet, then I follow it "
+                "until the answer surprises me. Some weeks that takes a paragraph; some weeks it takes a month. "
+                "What matters is that every sentence earns its place, and that the reader leaves with something "
+                "they did not have when they arrived.")
+        return {"title": "Sample passage", "text": text, "words": len(text.split())}
+    paragraphs = [p for p in re.split(r"\n\s*\n", doc.clean_text) if len(p.split()) > 12 and not p.startswith("## ")]
+    picked, words = [], 0
+    for p in paragraphs:
+        picked.append(p.strip())
+        words += len(p.split())
+        if words >= 280:  # roughly two minutes read aloud
+            break
+    if not picked:  # short or list heavy posts: read the text as is
+        plain = re.sub(r"^## .*$", "", doc.clean_text, flags=re.M).split()
+        picked, words = [" ".join(plain[:280])], min(len(plain), 280)
+    return {"title": doc.title, "text": "\n\n".join(picked), "words": words}
+
+
+@router.get("/quota")
+async def quota(ctx: Ctx = Depends(get_ctx)):
+    if not settings.elevenlabs_api_key:
+        return {}
+    return await run_in_threadpool(tts.subscription)
+
+
 @router.post("/consent")
 def give_consent(body: ConsentIn, request: Request, ctx: Ctx = Depends(get_ctx)):
     if not effective_plan(ctx.db, ctx.workspace).voice_cloning:
@@ -114,14 +252,24 @@ def give_consent(body: ConsentIn, request: Request, ctx: Ctx = Depends(get_ctx))
         raise HTTPException(400, "Please read and accept the consent statement.")
     if not settings.elevenlabs_api_key:
         raise HTTPException(503, "Voice cloning needs ELEVENLABS_API_KEY in .env")
-    upload = ctx.db.scalar(select(Upload).where(Upload.id == body.upload_id, Upload.workspace_id == ctx.workspace.id))
-    if not upload or upload.status != "complete" or not upload.content_type.startswith("audio/"):
-        raise HTTPException(400, "Upload an audio recording first.")
-    consent = VoiceConsent(workspace_id=ctx.workspace.id, user_id=ctx.user.id, sample_key=upload.key,
+    ids = body.upload_ids or ([body.upload_id] if body.upload_id else [])
+    uploads = ctx.db.scalars(select(Upload).where(Upload.id.in_(ids), Upload.workspace_id == ctx.workspace.id)).all()
+    uploads = [u for u in uploads if u.status == "complete" and u.content_type.startswith("audio/")]
+    if not uploads:
+        raise HTTPException(400, "Record or upload at least one audio sample first.")
+    # A new clone replaces the previous one.
+    old = _consent(ctx)
+    if old:
+        old.revoked_at = datetime.now(UTC)
+    consent = VoiceConsent(workspace_id=ctx.workspace.id, user_id=ctx.user.id, sample_key=uploads[0].key,
                            consent_text=CONSENT_TEXT, ip_address=request.client.host if request.client else None)
     ctx.db.add(consent)
     ctx.db.commit()
-    job = create_job(ctx.db, ctx.workspace.id, "voice_clone", {"consent_id": str(consent.id)}, max_attempts=1)
+    job = create_job(ctx.db, ctx.workspace.id, "voice_clone", {
+        "consent_id": str(consent.id), "sample_keys": [u.key for u in uploads],
+        "remove_background_noise": body.remove_background_noise,
+        "replaces_voice_id": old.elevenlabs_voice_id if old else None,
+    }, max_attempts=1)
     return {"job": serialize_job(job), **_serialize(ctx)}
 
 
@@ -133,7 +281,7 @@ async def revoke_consent(ctx: Ctx = Depends(get_ctx)):
     if consent.elevenlabs_voice_id and settings.elevenlabs_api_key:
         try:
             await run_in_threadpool(tts.delete_voice, consent.elevenlabs_voice_id)
-        except Exception:
+        except tts.TTSError:
             pass
     consent.revoked_at = datetime.now(UTC)
     storage.delete(consent.sample_key)

backend/app/services/tts.py

@@ -1,7 +1,23 @@
-"""ElevenLabs text to speech, cached in storage by (script, voice, settings)."""
+"""ElevenLabs: speech generation, voices (premade, Voice Library, consented clones), cached in storage.
+
+Generation
+- `synthesize` renders one line. Lines of a conversation pass the neighbouring text
+  (previous_text / next_text) so intonation flows across cuts, and are cached by
+  (text, voice, model, settings, context) so re-renders cost nothing.
+- 429 and 5xx responses retry with backoff; a long script renders in parallel (`synthesize_many`).
+
+Voices
+- premade voices and Voice Library ("shared") voices are licensed by ElevenLabs for commercial use on
+  paid ElevenLabs plans; library voices are added to the account before use.
+- cloning is Instant Voice Cloning from one or more consented samples, with background noise removal.
+"""
 
 import base64
 import json
+import time
+from collections.abc import Callable
+from concurrent.futures import ThreadPoolExecutor
+from dataclasses import dataclass
 
 import httpx
 
@@ -11,17 +27,49 @@ from app.services.storage import keys, storage
 API = "https://api.elevenlabs.io/v1"
 OUTPUT = "mp3_44100_128"
 BITRATE = 128_000
+MODELS = {
+    "eleven_multilingual_v2": "Multilingual v2 (most natural, default)",
+    "eleven_turbo_v2_5": "Turbo v2.5 (fast, half the cost)",
+    "eleven_flash_v2_5": "Flash v2.5 (fastest, cheapest)",
+}
 
-PREMADE = [
-    {"voice_id": "21m00Tcm4TlvDq8ikWAM", "name": "Rachel", "category": "premade"},
-    {"voice_id": "pNInz6obpgDQGcFMaJgB", "name": "Adam", "category": "premade"},
-    {"voice_id": "EXAVITQu4vr4xnSDxMaL", "name": "Bella", "category": "premade"},
-    {"voice_id": "ErXwobaYiN019PkySvjV", "name": "Antoni", "category": "premade"},
-    {"voice_id": "AZnzlk1XvdvUeBnXmlld", "name": "Domi", "category": "premade"},
-    {"voice_id": "TxGEqnHWrfWFTfGW9XjX", "name": "Josh", "category": "premade"},
+PREMADE = [  # current ElevenLabs default voices, shown when the account list cannot be fetched
+    {"voice_id": "EXAVITQu4vr4xnSDxMaL", "name": "Sarah", "category": "premade"},
+    {"voice_id": "JBFqnCBsd6RMkjVDRZzb", "name": "George", "category": "premade"},
+    {"voice_id": "CwhRBWXzGAHq8TQ4Fs17", "name": "Roger", "category": "premade"},
+    {"voice_id": "cgSgspJ2msm6clMCkdW9", "name": "Jessica", "category": "premade"},
+    {"voice_id": "nPczCjzI2devNBz1zQrb", "name": "Brian", "category": "premade"},
+    {"voice_id": "IKne3meq5aSn9XLyUdCD", "name": "Charlie", "category": "premade"},
 ]
 
 
+@dataclass(frozen=True)
+class VoiceSettings:
+    stability: float = 0.45
+    similarity_boost: float = 0.8
+    style: float = 0.2
+    speed: float = 1.0
+    use_speaker_boost: bool = True
+
+    @classmethod
+    def from_dict(cls, data: dict | None) -> "VoiceSettings":
+        data = data or {}
+
+        def clamp(key: str, lo: float, hi: float) -> float:
+            try:
+                return max(lo, min(hi, float(data.get(key, getattr(cls, key)))))
+            except (TypeError, ValueError):
+                return getattr(cls, key)
+
+        return cls(stability=clamp("stability", 0, 1), similarity_boost=clamp("similarity_boost", 0, 1),
+                   style=clamp("style", 0, 1), speed=clamp("speed", 0.7, 1.2),
+                   use_speaker_boost=bool(data.get("use_speaker_boost", True)))
+
+    def body(self) -> dict:
+        return {"stability": self.stability, "similarity_boost": self.similarity_boost, "style": self.style,
+                "speed": self.speed, "use_speaker_boost": self.use_speaker_boost}
+
+
 class TTSError(RuntimeError):
     pass
 
@@ -32,44 +80,112 @@ def _headers() -> dict:
     return {"xi-api-key": settings.elevenlabs_api_key}
 
 
+def _request(method: str, path: str, *, attempts: int = 4, **kwargs) -> httpx.Response:
+    """ElevenLabs call with retries for rate limits and transient errors."""
+    delay = 1.5
+    for attempt in range(attempts):
+        try:
+            resp = httpx.request(method, f"{API}{path}", headers=_headers(), timeout=kwargs.pop("timeout", 120),
+                                 **kwargs)
+        except httpx.TransportError as exc:
+            if attempt == attempts - 1:
+                raise TTSError(f"ElevenLabs unreachable: {exc}") from exc
+            time.sleep(delay)
+            delay *= 2
+            continue
+        if resp.status_code == 429 or resp.status_code >= 500:
+            if attempt == attempts - 1:
+                break
+            time.sleep(float(resp.headers.get("retry-after") or delay))
+            delay *= 2
+            continue
+        if resp.status_code >= 400:
+            raise TTSError(_explain(resp))
+        return resp
+    raise TTSError(_explain(resp))
+
+
+def _explain(resp: httpx.Response) -> str:
+    try:
+        detail = resp.json().get("detail")
+        message = detail.get("message") if isinstance(detail, dict) else detail
+    except ValueError:
+        message = resp.text[:300]
+    if resp.status_code == 401:
+        return "ElevenLabs rejected the API key."
+    if resp.status_code == 429:
+        return "ElevenLabs is rate limiting or the character quota is used up."
+    return f"ElevenLabs {resp.status_code}: {message}"
+
+
 def mp3_seconds(data: bytes) -> float:
     return len(data) * 8 / BITRATE
 
 
-def _voice_settings() -> dict:
-    return {"stability": 0.45, "similarity_boost": 0.8, "style": 0.2, "use_speaker_boost": True}
+def model_id() -> str:
+    return settings.elevenlabs_model if settings.elevenlabs_model in MODELS else "eleven_multilingual_v2"
 
 
-def _cache_key(workspace_id, text: str, voice_id: str, variant: str) -> str:
-    return keys.tts_cache(workspace_id, text, voice_id,
-                          json.dumps(_voice_settings(), sort_keys=True) + settings.elevenlabs_model + variant)
+def _cache_key(workspace_id, text: str, voice_id: str, vs: VoiceSettings, variant: str) -> str:
+    return keys.tts_cache(workspace_id, text, voice_id, json.dumps(vs.body(), sort_keys=True) + model_id() + variant)
 
 
-def synthesize(workspace_id, text: str, voice_id: str) -> bytes:
-    key = _cache_key(workspace_id, text, voice_id, OUTPUT)
+def synthesize(workspace_id, text: str, voice_id: str, voice_settings: VoiceSettings | None = None,
+               previous_text: str | None = None, next_text: str | None = None) -> bytes:
+    vs = voice_settings or VoiceSettings()
+    context = f"|{(previous_text or '')[-300:]}|{(next_text or '')[:300]}"
+    key = _cache_key(workspace_id, text, voice_id, vs, OUTPUT + context)
     if storage.exists(key):
         return storage.get_bytes(key)
-    body = {"text": text, "model_id": settings.elevenlabs_model, "voice_settings": _voice_settings()}
-    resp = httpx.post(f"{API}/text-to-speech/{voice_id}", params={"output_format": OUTPUT},
-                      headers=_headers(), json=body, timeout=120)
-    if resp.status_code >= 400:
-        raise TTSError(f"ElevenLabs {resp.status_code}: {resp.text[:300]}")
+    body: dict = {"text": text, "model_id": model_id(), "voice_settings": vs.body()}
+    if previous_text:
+        body["previous_text"] = previous_text[-300:]
+    if next_text:
+        body["next_text"] = next_text[:300]
+    resp = _request("POST", f"/text-to-speech/{voice_id}", params={"output_format": OUTPUT}, json=body)
     storage.put_bytes(key, resp.content, "audio/mpeg")
     return resp.content
 
 
-def synthesize_with_timestamps(workspace_id, text: str, voice_id: str) -> tuple[bytes, list[dict]]:
+@dataclass
+class Line:
+    text: str
+    voice_id: str
+    settings: VoiceSettings
+
+
+def synthesize_many(workspace_id, lines: list[Line], on_done: Callable[[int], None] | None = None,
+                    workers: int = 4) -> list[bytes]:
+    """Render a whole script in parallel, in order. Each line hears its neighbours for natural flow."""
+    def render(i: int) -> bytes:
+        line = lines[i]
+        prev_text = lines[i - 1].text if i > 0 else None
+        next_text = lines[i + 1].text if i + 1 < len(lines) else None
+        return synthesize(workspace_id, line.text, line.voice_id, line.settings, prev_text, next_text)
+
+    out: list[bytes | None] = [None] * len(lines)
+    done = 0
+    with ThreadPoolExecutor(max_workers=max(1, workers)) as pool:
+        futures = {pool.submit(render, i): i for i in range(len(lines))}
+        for fut, i in futures.items():
+            out[i] = fut.result()
+            done += 1
+            if on_done:
+                on_done(done)
+    return [b or b"" for b in out]
+
+
+def synthesize_with_timestamps(workspace_id, text: str, voice_id: str,
+                               voice_settings: VoiceSettings | None = None) -> tuple[bytes, list[dict]]:
     """Audio plus word timings [{text, startMs, endMs}] for captions."""
-    key = _cache_key(workspace_id, text, voice_id, "timestamps") + ".json"
+    vs = voice_settings or VoiceSettings()
+    key = _cache_key(workspace_id, text, voice_id, vs, "timestamps") + ".json"
     if storage.exists(key):
         data = json.loads(storage.get_bytes(key))
     else:
-        body = {"text": text, "model_id": settings.elevenlabs_model, "voice_settings": _voice_settings()}
-        resp = httpx.post(f"{API}/text-to-speech/{voice_id}/with-timestamps", params={"output_format": OUTPUT},
-                          headers=_headers(), json=body, timeout=120)
-        if resp.status_code >= 400:
-            raise TTSError(f"ElevenLabs {resp.status_code}: {resp.text[:300]}")
-        data = resp.json()
+        body = {"text": text, "model_id": model_id(), "voice_settings": vs.body()}
+        data = _request("POST", f"/text-to-speech/{voice_id}/with-timestamps", params={"output_format": OUTPUT},
+                        json=body).json()
         storage.put_bytes(key, json.dumps(data).encode(), "application/json")
     audio = base64.b64decode(data["audio_base64"])
     return audio, words_from_alignment(data.get("alignment") or {})
@@ -96,29 +212,94 @@ def words_from_alignment(alignment: dict) -> list[dict]:
     return words
 
 
+# Voices
+
+
+def _voice(v: dict) -> dict:
+    labels = v.get("labels") or {}
+    return {
+        "voice_id": v["voice_id"],
+        "name": v.get("name") or "Voice",
+        "category": v.get("category"),
+        "preview_url": v.get("preview_url"),
+        "description": v.get("description") or labels.get("description"),
+        "labels": {k: labels[k] for k in ("accent", "age", "gender", "use_case", "descriptive") if labels.get(k)},
+    }
+
+
 def list_voices() -> list[dict]:
+    """Voices on the account: premade, added library voices, clones."""
     if not settings.elevenlabs_api_key:
         return PREMADE
     try:
-        resp = httpx.get(f"{API}/voices", headers=_headers(), timeout=20)
-        resp.raise_for_status()
-    except httpx.HTTPError:
+        data = _request("GET", "/voices", attempts=2, timeout=20).json()
+    except TTSError:
         return PREMADE
-    return [
-        {"voice_id": v["voice_id"], "name": v["name"], "category": v.get("category"),
-         "preview_url": v.get("preview_url")}
-        for v in resp.json().get("voices", [])
+    return [_voice(v) for v in data.get("voices", [])]
+
+
+def search_library(*, search: str = "", gender: str = "", age: str = "", accent: str = "", language: str = "",
+                   use_case: str = "", page: int = 0, page_size: int = 24) -> dict:
+    """ElevenLabs Voice Library: community voices licensed for commercial use on paid ElevenLabs plans."""
+    params = {"page_size": page_size, "page": page, "sort": "trending"}
+    for k, v in {"search": search, "gender": gender, "age": age, "accent": accent, "language": language,
+                 "use_cases": use_case}.items():
+        if v:
+            params[k] = v
+    data = _request("GET", "/shared-voices", params=params, attempts=2, timeout=20).json()
+    voices = [
+        {
+            "public_owner_id": v["public_owner_id"],
+            "voice_id": v["voice_id"],
+            "name": v.get("name"),
+            "description": v.get("description"),
+            "preview_url": v.get("preview_url"),
+            "gender": v.get("gender"),
+            "age": v.get("age"),
+            "accent": v.get("accent"),
+            "language": v.get("language"),
+            "use_case": v.get("use_case"),
+            "descriptive": v.get("descriptive"),
+            "category": v.get("category"),
+            "cloned_by_count": v.get("cloned_by_count"),
+            "free_users_allowed": v.get("free_users_allowed", True),
+            "notice_period": v.get("notice_period"),
+        }
+        for v in data.get("voices", [])
     ]
+    return {"voices": voices, "has_more": bool(data.get("has_more"))}
+
+
+def add_library_voice(public_owner_id: str, voice_id: str, name: str) -> str:
+    resp = _request("POST", f"/voices/add/{public_owner_id}/{voice_id}", json={"new_name": name[:100]},
+                    attempts=2, timeout=30)
+    return resp.json()["voice_id"]
 
 
-def clone_voice(name: str, sample: bytes, filename: str, content_type: str) -> str:
-    resp = httpx.post(f"{API}/voices/add", headers=_headers(), timeout=120,
-                      data={"name": name, "description": "Notestack consented voice clone"},
-                      files={"files": (filename, sample, content_type)})
-    if resp.status_code >= 400:
-        raise TTSError(f"ElevenLabs {resp.status_code}: {resp.text[:300]}")
+def clone_voice(name: str, samples: list[tuple[str, bytes, str]], *, remove_background_noise: bool = True,
+                description: str = "") -> str:
+    """Instant Voice Clone from one or more (filename, bytes, content_type) samples."""
+    files = [("files", (fn, data, ct)) for fn, data, ct in samples]
+    resp = _request("POST", "/voices/add", attempts=2, timeout=180, files=files, data={
+        "name": name[:100],
+        "description": description or "Notestack consented voice clone",
+        "remove_background_noise": "true" if remove_background_noise else "false",
+        "labels": json.dumps({"source": "notestack"}),
+    })
     return resp.json()["voice_id"]
 
 
 def delete_voice(voice_id: str) -> None:
-    httpx.delete(f"{API}/voices/{voice_id}", headers=_headers(), timeout=30)
+    _request("DELETE", f"/voices/{voice_id}", attempts=2, timeout=30)
+
+
+def subscription() -> dict:
+    """Character quota, so the UI can warn before a long render."""
+    try:
+        data = _request("GET", "/user/subscription", attempts=1, timeout=15).json()
+    except TTSError:
+        return {}
+    return {"tier": data.get("tier"), "character_count": data.get("character_count"),
+            "character_limit": data.get("character_limit"),
+            "can_use_instant_voice_cloning": data.get("can_use_instant_voice_cloning"),
+            "voice_slots_used": data.get("voice_slots_used"), "voice_limit": data.get("voice_limit")}

backend/app/worker.py

@@ -37,6 +37,7 @@ from app.models import (
     Upload,
     User,
     VoiceConsent,
+    VoiceProfile,
     Workspace,
     WorkspaceMember,
 )
@@ -46,10 +47,10 @@ from app.pipeline.ingest import FeedNotFound, entry_from_upload, extract_article
 from app.services import launchpad, tts
 from app.services.email import email_service
 from app.services.email_verification import purge_old_codes
-from app.services.jobs import claim_next, create_job, retry_or_fail, stale_jobs, update_job
+from app.services.jobs import claim_next, create_job, record_usage, retry_or_fail, stale_jobs, update_job
 from app.services.plans import effective_plan
 from app.services.renderer import PermanentJobError, request_render
-from app.services.storage import storage
+from app.services.storage import keys, storage
 
 log = logging.getLogger("notestack.worker")
 
@@ -131,16 +132,41 @@ def handle_voice_clone(db: Session, job: Job):
     consent = db.get(VoiceConsent, uuid.UUID(job.params["consent_id"]))
     if not consent or consent.revoked_at:
         return Done({}, "Consent was revoked")
-    update_job(db, job, progress=0.2, message="Sending your sample to ElevenLabs")
-    head = storage.head(consent.sample_key) or {}
+    sample_keys = job.params.get("sample_keys") or [consent.sample_key]
+    update_job(db, job, progress=0.15, message=f"Sending {len(sample_keys)} recording(s) to ElevenLabs")
+    samples = []
+    for key in sample_keys:
+        head = storage.head(key) or {}
+        samples.append((key.rsplit("/", 1)[-1], storage.get_bytes(key), head.get("ContentType") or "audio/webm"))
+    owner = db.get(User, consent.user_id)
     try:
-        voice_id = tts.clone_voice(f"Notestack {consent.workspace_id}", storage.get_bytes(consent.sample_key),
-                                   consent.sample_key.rsplit("/", 1)[-1], head.get("ContentType") or "audio/webm")
+        voice_id = tts.clone_voice(f"{(owner.name if owner and owner.name else 'My')} (Notestack)", samples,
+                                   remove_background_noise=bool(job.params.get("remove_background_noise", True)))
     except tts.TTSError as exc:
         raise PermanentJobError(str(exc)) from exc
     consent.elevenlabs_voice_id = voice_id
     db.commit()
-    return Done({"voice_id": voice_id}, "Your voice is ready")
+
+    # Make the new voice host A and record a short preview so the writer can judge it straight away.
+    update_job(db, job, progress=0.7, message="Recording a preview in your voice")
+    vp = db.scalar(select(VoiceProfile).where(VoiceProfile.workspace_id == consent.workspace_id))
+    if not vp:
+        vp = VoiceProfile(workspace_id=consent.workspace_id)
+        db.add(vp)
+    vp.host_voices = {**(vp.host_voices or {}), "host_a": voice_id}
+    db.commit()
+    preview_text = job.params.get("preview_text") or (
+        "Hi, this is my Notestack voice. From now on, my audio overviews and videos can sound like me.")
+    preview_key = None
+    try:
+        clip = tts.synthesize(consent.workspace_id, preview_text[:600], voice_id)
+        preview_key = storage.put_bytes(keys.artifact(consent.workspace_id, consent.id, "voice-preview", "mp3"),
+                                        clip, "audio/mpeg")
+        record_usage(db, workspace_id=consent.workspace_id, kind="tts", provider="elevenlabs",
+                     quantity=round(tts.mp3_seconds(clip), 1), unit="seconds", job=job)
+    except tts.TTSError:
+        log.warning("voice preview failed for %s", voice_id, exc_info=True)
+    return Done({"voice_id": voice_id, "preview_key": preview_key}, "Your voice is ready and set as host A")
 
 
 def handle_resurface(db: Session, job: Job):

backend/tests/test_buildout.py

@@ -305,7 +305,16 @@ def test_audio_overview_and_limits(client, auth, run_jobs, feed, llm, monkeypatc
     connect(client, auth, run_jobs)
     doc = docs(client, auth)[0]
     monkeypatch.setattr(settings, "elevenlabs_api_key", "test")
-    monkeypatch.setattr(tts, "synthesize", lambda ws, text, voice: b"\x00" * 16000)  # 1 second at 128 kbps
+    calls = []
+
+    def fake_synth(ws, text, voice, vs=None, prev=None, nxt=None):
+        calls.append((text, voice, prev, nxt, vs.stability if vs else None))
+        return b"\x00" * 16000  # 1 second at 128 kbps
+
+    monkeypatch.setattr(tts, "synthesize", fake_synth)
+    client.put("/api/voice", json={"host_voices": {"host_a": "voiceA", "host_b": "voiceB"},
+                                   "delivery": {"host_b": {"stability": 0.9, "similarity_boost": 0.7,
+                                                           "style": 0.1, "speed": 1.1}}}, headers=auth)
     llm["PodcastScript"] = {"lines": [
         {"speaker": "host_a", "text": "Welcome in.", "sources": []},
         {"speaker": "host_b", "text": "Prices went up.", "sources": [{"path": doc["path"], "line_start": 12,
@@ -317,6 +326,11 @@ def test_audio_overview_and_limits(client, auth, run_jobs, feed, llm, monkeypatc
     done = client.get(f"/api/artifacts/{art['id']}", headers=auth).json()
     assert done["status"] == "ready", done["content"]
     assert done["content"]["duration_s"] == 2.0
+    # Each line hears its neighbour; hosts use their own voice and delivery settings.
+    by_text = {c[0]: c for c in calls}
+    assert by_text["Welcome in."][1] == "voiceA" and by_text["Welcome in."][3] == "Prices went up."
+    assert by_text["Prices went up."][1] == "voiceB" and by_text["Prices went up."][2] == "Welcome in."
+    assert by_text["Prices went up."][4] == 0.9
     assert done["url"] and client.get(done["url"].split("8000", 1)[1]).content == b"\x00" * 32000
 
     ws_id = db_session.get(Document, uuid.UUID(doc["id"])).workspace_id
@@ -610,3 +624,79 @@ def test_artifact_ownership(client, auth, db_session):
     db_session.add(other)
     db_session.commit()
     assert client.get(f"/api/artifacts/{other.id}", headers=auth).status_code == 404
+
+
+# Voice pipeline (ElevenLabs stubbed)
+
+
+def test_voice_library_preview_and_script(client, auth, monkeypatch, feed, run_jobs):
+    from app.config import settings
+    from app.services import tts
+
+    monkeypatch.setattr(settings, "elevenlabs_api_key", "test")
+    monkeypatch.setattr(tts, "search_library", lambda **kw: {"voices": [{
+        "public_owner_id": "owner-1", "voice_id": "lib-voice-1",
+                                                                          "name": "Narrator"}], "has_more": False})
+    monkeypatch.setattr(tts, "add_library_voice", lambda owner, vid, name: "added-" + vid)
+    monkeypatch.setattr(tts, "synthesize", lambda ws, text, voice, vs=None, *a: b"\x00" * 8000)
+
+    assert client.get("/api/voice/library", params={"gender": "female"}, headers=auth).json()["voices"][0]["name"] == \
+        "Narrator"
+    r = client.post("/api/voice/library/add", json={
+        "public_owner_id": "owner-1", "voice_id": "lib-voice-1", "name": "Narrator",
+                                                    "use_as": "host_b"}, headers=auth).json()
+    assert r["voice_id"] == "added-lib-voice-1" and r["host_voices"]["host_b"] == "added-lib-voice-1"
+
+    prev = client.post("/api/voice/preview", json={"voice_id": "added-lib-voice-1", "text": "Hello there",
+                                                   "delivery": {"stability": 0.3, "similarity_boost": 0.8,
+                                                                "style": 0, "speed": 0.9}}, headers=auth).json()
+    assert prev["seconds"] == 0.5 and client.get(prev["url"].split("8000", 1)[1]).status_code == 200
+
+    connect(client, auth, run_jobs)
+    script = client.get("/api/voice/reading-script", headers=auth).json()
+    assert script["words"] > 5 and script["title"]
+
+
+def test_voice_clone_multi_sample_sets_host_and_preview(client, auth, monkeypatch, run_jobs):
+    from app.config import settings
+    from app.services import tts
+
+    monkeypatch.setattr(settings, "elevenlabs_api_key", "test")
+    sent = {}
+
+    def fake_clone(name, samples, remove_background_noise=True, description=""):
+        sent.update(n=len(samples), noise=remove_background_noise, name=name)
+        return "clone-1"
+
+    monkeypatch.setattr(tts, "clone_voice", fake_clone)
+    monkeypatch.setattr(tts, "synthesize", lambda ws, text, voice, vs=None, *a: b"\x00" * 16000)
+    ids = []
+    for i in range(2):
+        start = client.post("/api/storage/uploads", json={"filename": f"take{i}.webm", "content_type": "audio/webm",
+                                                          "size_bytes": 4}, headers=auth).json()
+        client.put(start["upload_url"].split("8000", 1)[1], content=b"RIFF")
+        client.post(f"/api/storage/uploads/{start['upload_id']}/complete", headers=auth)
+        ids.append(start["upload_id"])
+    consent_text = client.get("/api/voice", headers=auth).json()["clone"]["consent_text"]
+    r = client.post("/api/voice/consent", json={"upload_ids": ids, "agreed": True, "consent_text": consent_text,
+                                                "remove_background_noise": False}, headers=auth)
+    assert r.status_code == 200, r.text
+    assert run_jobs()[0].status == "done"
+    assert sent == {"n": 2, "noise": False, "name": "Ada Lovelace (Notestack)"}
+    voice = client.get("/api/voice", headers=auth).json()
+    assert voice["clone"]["status"] == "ready" and voice["host_voices"]["host_a"] == "clone-1"
+    assert voice["clone"]["preview_url"]
+
+
+def test_tts_retries_rate_limits(monkeypatch):
+    from app.config import settings
+    from app.services import tts
+
+    monkeypatch.setattr(settings, "elevenlabs_api_key", "test")
+    monkeypatch.setattr(tts.time, "sleep", lambda s: None)
+    responses = [httpx.Response(429, json={"detail": "slow down"}), httpx.Response(200, content=b"mp3")]
+    monkeypatch.setattr(httpx, "request", lambda *a, **k: responses.pop(0))
+    assert tts._request("POST", "/text-to-speech/x").content == b"mp3"
+    monkeypatch.setattr(httpx, "request", lambda *a, **k: httpx.Response(401, json={"detail": {"message": "bad"}}))
+    with pytest.raises(tts.TTSError, match="API key"):
+        tts._request("GET", "/voices")

frontend/src/api/endpoints.ts

@@ -8,10 +8,12 @@ import type {
   Doc,
   DocDetail,
   Job,
+  LibraryVoice,
   Notebook,
   NotebookSummary,
   Page,
   Platform,
+  Quota,
   ResurfaceItem,
   Settings,
   SocialAccounts,
@@ -20,6 +22,7 @@ import type {
   TopicMap,
   Usage,
   Voice,
+  Delivery,
   VoiceProfileData,
   VoiceState,
 } from "./types";
@@ -99,14 +102,31 @@ export const topicsApi = {
 
 export const voiceApi = {
   get: () => api<VoiceState>("/api/voice"),
-  update: (body: { profile?: VoiceProfileData; host_voices?: { host_a: string; host_b: string } }) =>
-    put<VoiceState>("/api/voice", body),
+  update: (body: {
+    profile?: VoiceProfileData;
+    host_voices?: Partial<{ host_a: string; host_b: string }>;
+    delivery?: Partial<{ host_a: Delivery; host_b: Delivery }>;
+  }) => put<VoiceState>("/api/voice", body),
   build: (document_ids: string[]) => post<Job>("/api/voice/build", { document_ids }),
   voices: () => api<Voice[]>("/api/voice/voices"),
-  consent: async (file: File, consent_text: string) => {
-    const { upload_id } = await uploadFile(file);
-    return post<VoiceState & { job: Job }>("/api/voice/consent", { upload_id, agreed: true, consent_text });
+  consent: async (files: File[], consent_text: string, remove_background_noise: boolean) => {
+    const upload_ids = [];
+    for (const f of files) upload_ids.push((await uploadFile(f)).upload_id);
+    return post<VoiceState & { job: Job }>("/api/voice/consent", { upload_ids, agreed: true, consent_text, remove_background_noise });
   },
+  library: (p: { search?: string; gender?: string; age?: string; accent?: string; language?: string; use_case?: string; page?: number }) =>
+    api<{ voices: LibraryVoice[]; has_more: boolean }>(`/api/voice/library${qs(p)}`),
+  addFromLibrary: (v: LibraryVoice, use_as?: "host_a" | "host_b") =>
+    post<VoiceState & { voice_id: string }>("/api/voice/library/add", {
+      public_owner_id: v.public_owner_id,
+      voice_id: v.voice_id,
+      name: v.name,
+      use_as,
+    }),
+  preview: (voice_id: string, opts: { text?: string; host?: "host_a" | "host_b"; delivery?: Delivery } = {}) =>
+    post<{ url: string; seconds: number }>("/api/voice/preview", { voice_id, ...opts }),
+  readingScript: () => api<{ title: string; text: string; words: number }>("/api/voice/reading-script"),
+  quota: () => api<Quota>("/api/voice/quota"),
   revoke: () => del<VoiceState>("/api/voice/consent"),
 };
 

frontend/src/api/types.ts

@@ -142,17 +142,58 @@ export type VoiceState = {
   sample_doc_ids: string[];
   updated_at: string | null;
   host_voices: { host_a: string; host_b: string };
+  delivery: { host_a: Delivery; host_b: Delivery };
+  model: string;
+  models: Record<string, string>;
   clone: {
     allowed: boolean;
     consent_text: string;
-    status: "none" | "processing" | "ready";
+    status: "none" | "processing" | "ready" | "failed";
     voice_id: string | null;
     created_at: string | null;
+    error: string | null;
+    preview_url: string | null;
   };
   tts_configured: boolean;
 };
 
-export type Voice = { voice_id: string; name: string; category?: string | null; preview_url?: string | null };
+export type Delivery = { stability: number; similarity_boost: number; style: number; speed: number; use_speaker_boost?: boolean };
+
+export type Voice = {
+  voice_id: string;
+  name: string;
+  category?: string | null;
+  preview_url?: string | null;
+  description?: string | null;
+  labels?: Record<string, string>;
+};
+
+export type LibraryVoice = {
+  public_owner_id: string;
+  voice_id: string;
+  name: string;
+  description: string | null;
+  preview_url: string | null;
+  gender: string | null;
+  age: string | null;
+  accent: string | null;
+  language: string | null;
+  use_case: string | null;
+  descriptive: string | null;
+  category: string | null;
+  cloned_by_count: number | null;
+  free_users_allowed: boolean;
+  notice_period: number | null;
+};
+
+export type Quota = {
+  tier?: string;
+  character_count?: number;
+  character_limit?: number;
+  can_use_instant_voice_cloning?: boolean;
+  voice_slots_used?: number;
+  voice_limit?: number;
+};
 
 export type Platform = "x" | "linkedin" | "bluesky" | "substack_notes";
 

frontend/src/components/ArtifactCard.tsx

@@ -3,28 +3,9 @@ import { Link } from "react-router-dom";
 import { artifactsApi } from "../api/endpoints";
 import type { Artifact, Citation, Segment } from "../api/types";
 import { useJob } from "../hooks/useJob";
+import { Markdown } from "./Markdown";
 import { ConfirmButton, errorMessage, formatDate, formatDuration, JobProgress, StatusPill } from "./ui";
 
-/** Answer text with [n] markers turned into buttons that open the cited passage. */
-export function CitedText({ text, citations, onCite }: { text: string; citations: Citation[]; onCite?: (c: Citation) => void }) {
-  const byMarker = new Map(citations.map((c) => [c.marker, c]));
-  const parts = text.split(/(\[\d+\])/g);
-  return (
-    <>
-      {parts.map((part, i) => {
-        const m = part.match(/^\[(\d+)\]$/);
-        const cite = m ? byMarker.get(Number(m[1])) : undefined;
-        if (!cite) return <span key={i}>{part}</span>;
-        return (
-          <button key={i} type="button" className="cite-marker mono" title={cite.title} onClick={() => onCite?.(cite)}>
-            {cite.marker}
-          </button>
-        );
-      })}
-    </>
-  );
-}
-
 export function CitationList({ citations, onCite }: { citations: Citation[]; onCite?: (c: Citation) => void }) {
   if (!citations.length) return null;
   return (
@@ -80,13 +61,7 @@ function Body({ artifact, onCite }: { artifact: Artifact; onCite?: (c: Citation)
               ))}
             </div>
           ) : null}
-          {String(c.summary ?? "")
-            .split(/\n\n+/)
-            .map((p, i) => (
-              <p key={i}>
-                <CitedText text={p} citations={c.citations ?? []} onCite={onCite} />
-              </p>
-            ))}
+          <Markdown text={String(c.summary ?? "")} citations={c.citations ?? []} onCite={onCite} />
           <CitationList citations={c.citations ?? []} onCite={onCite} />
         </div>
       );

frontend/src/components/FeatureShowcase.tsx

@@ -0,0 +1,261 @@
+import type { ReactNode } from "react";
+import { Link } from "react-router-dom";
+
+/** Landing page feature tour: one full section per feature, alternating sides, each with a small
+ * product visual that animates when the section arrives (the parent adds .arrived via Landing's observer). */
+
+type Feature = {
+  id: string;
+  eyebrow: string;
+  title: string;
+  body: string;
+  points: string[];
+  visual: ReactNode;
+};
+
+function ChatVisual() {
+  return (
+    <div className="fx fx-chat">
+      <div className="fx-bubble fx-q">What have I written about pricing?</div>
+      <div className="fx-steps mono">
+        <span>Searching for pric(e|ing)|paid tier</span>
+        <span>Reading On Pricing, lines 12 to 20</span>
+      </div>
+      <p className="fx-answer">
+        You raised prices twice and the <b>paid tier doubled</b>
+        <span className="fx-cite">1</span>, because readers took the work more seriously<span className="fx-cite">2</span>.
+      </p>
+      <div className="fx-source">
+        <span className="mono">[1] On Pricing · lines 12 to 14</span>
+        <span className="fx-line">The paid tier doubled after I raised the price to ten dollars.</span>
+      </div>
+    </div>
+  );
+}
+
+function MapVisual() {
+  const nodes = [
+    { x: 50, y: 48, r: 14, label: "Pricing" },
+    { x: 22, y: 30, r: 9, label: "Habits" },
+    { x: 78, y: 26, r: 10, label: "Audience" },
+    { x: 30, y: 76, r: 8, label: "Craft" },
+    { x: 74, y: 74, r: 11, label: "Paid tier" },
+  ];
+  const edges = [
+    [0, 1],
+    [0, 2],
+    [0, 4],
+    [1, 3],
+    [2, 4],
+  ];
+  return (
+    <div className="fx fx-map">
+      <svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet" aria-hidden="true">
+        {edges.map(([a, b], i) => (
+          <line key={i} className="fx-edge" style={{ ["--d" as string]: `${i * 0.15}s` }} x1={nodes[a].x} y1={nodes[a].y} x2={nodes[b].x} y2={nodes[b].y} />
+        ))}
+        {nodes.map((n, i) => (
+          <g key={n.label} className="fx-node" style={{ ["--d" as string]: `${0.3 + i * 0.12}s` }}>
+            <circle cx={n.x} cy={n.y} r={n.r * 0.9} className="fx-halo" />
+            <circle cx={n.x} cy={n.y} r={n.r * 0.3} fill="#fff" />
+            <text x={n.x} y={n.y + n.r * 0.9 + 5} textAnchor="middle">
+              {n.label}
+            </text>
+          </g>
+        ))}
+      </svg>
+    </div>
+  );
+}
+
+function AudioVisual() {
+  return (
+    <div className="fx fx-audio">
+      <div className="fx-wave" aria-hidden="true">
+        {Array.from({ length: 36 }).map((_, i) => (
+          <span key={i} style={{ ["--d" as string]: `${(i % 9) * 0.09}s`, ["--h" as string]: `${30 + ((i * 37) % 60)}%` }} />
+        ))}
+      </div>
+      <div className="fx-lines">
+        <p>
+          <span className="fx-host a">A</span>So the big idea is that price is a signal.
+        </p>
+        <p>
+          <span className="fx-host b">B</span>And she has the numbers: the paid tier doubled.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+function VideoVisual() {
+  return (
+    <div className="fx fx-video">
+      <div className="fx-frame v916">
+        <span className="mono">9:16</span>
+        <b>I doubled my price.</b>
+      </div>
+      <div className="fx-frame v169">
+        <span className="mono">16:9</span>
+        <b>Why price is a signal</b>
+      </div>
+      <div className="fx-frame v11">
+        <span className="mono">1:1</span>
+        <i className="fx-mini-wave" />
+      </div>
+    </div>
+  );
+}
+
+function KitVisual() {
+  const cards = [
+    ["X thread", "I doubled my price. My paid tier doubled too."],
+    ["LinkedIn", "Most writers underprice. I did for two years."],
+    ["Notes", "Price is a signal. Readers told me so."],
+    ["Bluesky", "Raised my price to $10. Paid went up."],
+  ];
+  return (
+    <div className="fx fx-kit">
+      {cards.map(([label, body], i) => (
+        <div key={label} className="fx-card" style={{ ["--d" as string]: `${i * 0.12}s`, ["--r" as string]: `${(i - 1.5) * 4}deg` }}>
+          <span className="mono">{label}</span>
+          <p>{body}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+function VoiceVisual() {
+  const sliders = [
+    ["Stability", 62],
+    ["Similarity", 80],
+    ["Style", 28],
+  ] as const;
+  return (
+    <div className="fx fx-voice">
+      <div className="fx-profile">
+        <span className="mono">Your voice</span>
+        <p>Warm, direct, short paragraphs. Opens with a number. Never uses jargon.</p>
+      </div>
+      {sliders.map(([label, v], i) => (
+        <div key={label} className="fx-slider" style={{ ["--v" as string]: `${v}%`, ["--d" as string]: `${0.2 + i * 0.15}s` }}>
+          <span>{label}</span>
+          <i />
+        </div>
+      ))}
+      <div className="fx-clone mono">
+        <span className="fx-rec" /> Recording take 2 · 1:24
+      </div>
+    </div>
+  );
+}
+
+function PadVisual() {
+  const lit = [2, 5, 9, 12, 16, 19];
+  return (
+    <div className="fx fx-pad">
+      <div className="fx-cal">
+        {Array.from({ length: 21 }).map((_, i) => (
+          <span key={i} className={lit.includes(i) ? "on" : ""} style={{ ["--d" as string]: `${lit.indexOf(i) * 0.12}s` }}>
+            {i + 1}
+          </span>
+        ))}
+      </div>
+      <div className="fx-launch mono">
+        <span>X</span>
+        <span>LinkedIn</span>
+        <span>Bluesky</span>
+        <span>Notes reminder</span>
+      </div>
+    </div>
+  );
+}
+
+const FEATURES: Feature[] = [
+  {
+    id: "research",
+    eyebrow: "Research notebook",
+    title: "Ask your archive anything. It answers with receipts.",
+    body: "Notestack reads your posts the way a careful researcher would: it searches, opens the right post, and cites the exact lines. If you never wrote it, it tells you so instead of guessing.",
+    points: ["Every sentence links to the lines it came from", "Chats are saved per notebook", "Summaries of whole notebooks, cited"],
+    visual: <ChatVisual />,
+  },
+  {
+    id: "map",
+    eyebrow: "Topic map",
+    title: "See the constellations in your writing.",
+    body: "Every post is tagged with what it is really about, then linked to the topics it travels with. Zoom through years of work and spin any topic into a notebook.",
+    points: ["Topics merge automatically as you publish", "Spot the themes you keep coming back to", "One click from a topic to a notebook"],
+    visual: <MapVisual />,
+  },
+  {
+    id: "audio",
+    eyebrow: "Audio overview",
+    title: "Two hosts talk through your ideas.",
+    body: "Turn a post or a whole notebook into a natural conversation, voiced by ElevenLabs. Pick from a library of commercial voices, or clone your own with consent.",
+    points: ["Deep dive, brief or debate formats", "Every line grounded in your posts", "Your cloned voice as host, if you want"],
+    visual: <AudioVisual />,
+  },
+  {
+    id: "video",
+    eyebrow: "Video studio",
+    title: "Shorts, explainers and audiograms, from one post.",
+    body: "Notestack storyboards the post, narrates it and renders it with word by word captions and your brand colors. Vertical for Reels and TikTok, wide for YouTube, square for feeds.",
+    points: ["9:16 shorts with a hook in two seconds", "16:9 explainers and 1:1 audiograms", "Your logo and accent color on every frame"],
+    visual: <VideoVisual />,
+  },
+  {
+    id: "kit",
+    eyebrow: "Launch Kit",
+    title: "One post becomes a launch on every platform.",
+    body: "Hooks, an X thread, a LinkedIn post, Substack Notes, a Bluesky thread, an SEO pack, a carousel and quote cards, all written in your voice from claims the post actually makes.",
+    points: ["Edit anything, copy in one click", "Character counts per platform", "Quote cards rendered and ready"],
+    visual: <KitVisual />,
+  },
+  {
+    id: "voice",
+    eyebrow: "Voice profile",
+    title: "Sounds like you, on the page and out loud.",
+    body: "Notestack learns your tone from your own posts, so drafts read like you wrote them. For audio, tune two hosts or record a couple of minutes to clone your voice.",
+    points: ["Editable writing voice", "Commercially licensed voice library", "Consented cloning you can revoke anytime"],
+    visual: <VoiceVisual />,
+  },
+  {
+    id: "pad",
+    eyebrow: "Launchpad",
+    title: "Schedule the countdown. We handle liftoff.",
+    body: "Plan every post on one calendar. Notestack publishes to X, LinkedIn and Bluesky on time, emails you Substack Notes to paste, and tracks the clicks that follow.",
+    points: ["Auto posting with connected accounts", "Tracked links and engagement", "Resurface evergreen posts when they matter"],
+    visual: <PadVisual />,
+  },
+];
+
+export default function FeatureShowcase() {
+  return (
+    <div className="showcase">
+      {FEATURES.map((f, i) => (
+        <section key={f.id} id={`feature-${f.id}`} className={`showcase-row arrive${i % 2 ? " flip" : ""}`}>
+          <div className="showcase-copy">
+            <p className="eyebrow">
+              <span className="mono showcase-n">{String(i + 1).padStart(2, "0")}</span> {f.eyebrow}
+            </p>
+            <h3>{f.title}</h3>
+            <p className="muted">{f.body}</p>
+            <ul>
+              {f.points.map((p) => (
+                <li key={p}>{p}</li>
+              ))}
+            </ul>
+            {i === FEATURES.length - 1 && (
+              <Link to="/auth?mode=signup" className="btn btn-primary">
+                Launch my archive
+              </Link>
+            )}
+          </div>
+          <div className="showcase-visual card">{f.visual}</div>
+        </section>
+      ))}
+    </div>
+  );
+}

frontend/src/components/Markdown.tsx

@@ -0,0 +1,242 @@
+import type { ReactNode } from "react";
+import type { Citation } from "../api/types";
+
+/** Small, safe Markdown renderer for generated text. Builds React elements (never raw HTML), and turns
+ * [n] citation markers into buttons that open the cited lines.
+ * Supports: headings, paragraphs, bullet and numbered lists (one nested level), blockquotes, fenced
+ * code, tables, horizontal rules, bold, italic, strikethrough, inline code and links. */
+
+type Cite = { citations?: Citation[]; onCite?: (c: Citation) => void };
+
+const INLINE = /(`[^`]+`)|(\*\*[^*]+\*\*|__[^_]+__)|(\*[^*\s][^*]*\*|_[^_\s][^_]*_)|(~~[^~]+~~)|(\[[^\]]+\]\((https?:\/\/[^)\s]+)\))|(\[\d+\](?:\[\d+\])*)|(https?:\/\/[^\s)]+)/g;
+
+function inline(text: string, cite: Cite, keyBase: string): ReactNode[] {
+  const out: ReactNode[] = [];
+  const byMarker = new Map((cite.citations ?? []).map((c) => [c.marker, c]));
+  let last = 0;
+  let i = 0;
+  for (const m of text.matchAll(INLINE)) {
+    const idx = m.index ?? 0;
+    if (idx > last) out.push(text.slice(last, idx));
+    const key = `${keyBase}-${i++}`;
+    const [whole, code, bold, italic, strike, link, href, markers, bare] = m;
+    if (code) out.push(<code key={key}>{code.slice(1, -1)}</code>);
+    else if (bold) out.push(<strong key={key}>{inline(bold.slice(2, -2), cite, key)}</strong>);
+    else if (italic) out.push(<em key={key}>{inline(italic.slice(1, -1), cite, key)}</em>);
+    else if (strike) out.push(<del key={key}>{inline(strike.slice(2, -2), cite, key)}</del>);
+    else if (link && href) {
+      const label = link.slice(1, link.indexOf("]("));
+      out.push(
+        <a key={key} href={href} target="_blank" rel="noreferrer">
+          {inline(label, cite, key)}
+        </a>,
+      );
+    } else if (markers) {
+      for (const n of markers.matchAll(/\[(\d+)\]/g)) {
+        const c = byMarker.get(Number(n[1]));
+        out.push(
+          c ? (
+            <button key={`${key}-${n[1]}`} type="button" className="cite-marker mono" title={c.title} onClick={() => cite.onCite?.(c)}>
+              {c.marker}
+            </button>
+          ) : (
+            <sup key={`${key}-${n[1]}`} className="mono muted">
+              {n[1]}
+            </sup>
+          ),
+        );
+      }
+    } else if (bare) {
+      out.push(
+        <a key={key} href={bare} target="_blank" rel="noreferrer">
+          {bare}
+        </a>,
+      );
+    } else out.push(whole);
+    last = idx + whole.length;
+  }
+  if (last < text.length) out.push(text.slice(last));
+  return out;
+}
+
+type ListItem = { text: string; children: ListItem[] };
+type Block =
+  | { kind: "h"; level: number; text: string }
+  | { kind: "p"; text: string }
+  | { kind: "ul" | "ol"; items: ListItem[]; start: number }
+  | { kind: "quote"; text: string }
+  | { kind: "code"; text: string; lang: string }
+  | { kind: "table"; head: string[]; rows: string[][] }
+  | { kind: "hr" };
+
+const LIST = /^(\s*)([-*+]|\d+[.)])\s+(.*)$/;
+const splitRow = (line: string) =>
+  line
+    .trim()
+    .replace(/^\|/, "")
+    .replace(/\|$/, "")
+    .split("|")
+    .map((c) => c.trim());
+
+function parse(src: string): Block[] {
+  const lines = src.replace(/\r\n/g, "\n").split("\n");
+  const blocks: Block[] = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const trimmed = line.trim();
+    if (!trimmed) {
+      i++;
+      continue;
+    }
+    const fence = trimmed.match(/^```(\w*)/);
+    if (fence) {
+      const body: string[] = [];
+      i++;
+      while (i < lines.length && !lines[i].trim().startsWith("```")) body.push(lines[i++]);
+      i++;
+      blocks.push({ kind: "code", text: body.join("\n"), lang: fence[1] });
+      continue;
+    }
+    const heading = trimmed.match(/^(#{1,4})\s+(.*)$/);
+    if (heading) {
+      blocks.push({ kind: "h", level: heading[1].length, text: heading[2] });
+      i++;
+      continue;
+    }
+    if (/^(-{3,}|\*{3,}|_{3,})$/.test(trimmed)) {
+      blocks.push({ kind: "hr" });
+      i++;
+      continue;
+    }
+    if (trimmed.startsWith("|") && i + 1 < lines.length && /^\s*\|?\s*:?-{2,}/.test(lines[i + 1])) {
+      const head = splitRow(trimmed);
+      i += 2;
+      const rows: string[][] = [];
+      while (i < lines.length && lines[i].trim().startsWith("|")) rows.push(splitRow(lines[i++]));
+      blocks.push({ kind: "table", head, rows });
+      continue;
+    }
+    if (trimmed.startsWith(">")) {
+      const body: string[] = [];
+      while (i < lines.length && lines[i].trim().startsWith(">")) body.push(lines[i++].trim().replace(/^>\s?/, ""));
+      blocks.push({ kind: "quote", text: body.join("\n") });
+      continue;
+    }
+    const first = line.match(LIST);
+    if (first) {
+      const ordered = /\d/.test(first[2]);
+      const baseIndent = first[1].length;
+      const items: ListItem[] = [];
+      while (i < lines.length) {
+        const m = lines[i].match(LIST);
+        if (m) {
+          const item = { text: m[3], children: [] as ListItem[] };
+          if (m[1].length > baseIndent && items.length) items[items.length - 1].children.push(item);
+          else items.push(item);
+          i++;
+        } else if (lines[i].trim() && /^\s{2,}/.test(lines[i]) && items.length) {
+          // Continuation line of the previous item.
+          const target = items[items.length - 1];
+          const deepest = target.children.length ? target.children[target.children.length - 1] : target;
+          deepest.text += ` ${lines[i].trim()}`;
+          i++;
+        } else if (!lines[i].trim() && i + 1 < lines.length && LIST.test(lines[i + 1])) {
+          i++; // loose list: blank line between items
+        } else break;
+      }
+      blocks.push({ kind: ordered ? "ol" : "ul", items, start: ordered ? parseInt(first[2], 10) || 1 : 1 });
+      continue;
+    }
+    const para: string[] = [];
+    while (i < lines.length && lines[i].trim() && !LIST.test(lines[i]) && !/^(#{1,4}\s|>|```|\|)/.test(lines[i].trim())) {
+      para.push(lines[i++].trim());
+    }
+    if (para.length === 0) {
+      para.push(trimmed);
+      i++;
+    }
+    blocks.push({ kind: "p", text: para.join("\n") });
+  }
+  return blocks;
+}
+
+function withBreaks(text: string, cite: Cite, key: string): ReactNode[] {
+  return text.split("\n").flatMap((part, j, all) => [
+    ...inline(part, cite, `${key}-${j}`),
+    ...(j < all.length - 1 ? [<br key={`${key}-br-${j}`} />] : []),
+  ]);
+}
+
+function renderItems(items: ListItem[], ordered: boolean, cite: Cite, key: string, start = 1): ReactNode {
+  const children = items.map((it, j) => (
+    <li key={`${key}-${j}`}>
+      {inline(it.text, cite, `${key}-${j}`)}
+      {it.children.length > 0 && renderItems(it.children, ordered, cite, `${key}-${j}-c`)}
+    </li>
+  ));
+  return ordered ? (
+    <ol key={key} start={start}>
+      {children}
+    </ol>
+  ) : (
+    <ul key={key}>{children}</ul>
+  );
+}
+
+export function Markdown({ text, citations, onCite, className = "" }: { text: string; className?: string } & Cite) {
+  const cite = { citations, onCite };
+  return (
+    <div className={`md ${className}`}>
+      {parse(text).map((b, i) => {
+        const key = `b${i}`;
+        switch (b.kind) {
+          case "h": {
+            const Tag = (["h3", "h3", "h4", "h5"] as const)[b.level - 1];
+            return <Tag key={key}>{inline(b.text, cite, key)}</Tag>;
+          }
+          case "p":
+            return <p key={key}>{withBreaks(b.text, cite, key)}</p>;
+          case "ul":
+          case "ol":
+            return renderItems(b.items, b.kind === "ol", cite, key, b.start);
+          case "quote":
+            return <blockquote key={key}>{withBreaks(b.text, cite, key)}</blockquote>;
+          case "code":
+            return (
+              <pre key={key} data-lang={b.lang || undefined}>
+                <code>{b.text}</code>
+              </pre>
+            );
+          case "table":
+            return (
+              <div key={key} className="md-table">
+                <table>
+                  <thead>
+                    <tr>
+                      {b.head.map((h, j) => (
+                        <th key={j}>{inline(h, cite, `${key}-h${j}`)}</th>
+                      ))}
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {b.rows.map((r, j) => (
+                      <tr key={j}>
+                        {r.map((c, k) => (
+                          <td key={k}>{inline(c, cite, `${key}-${j}-${k}`)}</td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            );
+          case "hr":
+            return <hr key={key} />;
+          default:
+            return null;
+        }
+      })}
+    </div>
+  );
+}

frontend/src/components/SkyCanvas.tsx

@@ -8,6 +8,13 @@ import { useEffect, useRef } from "react";
 type Star = { x: number; y: number; r: number; a: number; layer: number; phase: number; speed: number };
 type Sparkle = Star & { size: number; blue: boolean };
 type Meteor = { x: number; y: number; vx: number; vy: number; life: number };
+type DeepStar = { x: number; y: number; z: number; blue: boolean };
+type Nebula = { x: number; y: number; z: number; size: number; hue: number };
+
+// Travel mode: scrolling the page flies the camera forward through a 3D field.
+const DEEP_STARS = 300;
+const NEBULAE = 5;
+const TRAVEL_PER_PX = 0.00022; // depth units per scrolled pixel: a whole page is a gentle glide
 
 const LAYERS = [
   { density: 0.00018, parallax: 6, drift: 0.004 },
@@ -21,7 +28,7 @@ function rand(min: number, max: number) {
   return min + Math.random() * (max - min);
 }
 
-export default function SkyCanvas({ intensity = 1 }: { intensity?: number }) {
+export default function SkyCanvas({ intensity = 1, travel = false }: { intensity?: number; travel?: boolean }) {
   const ref = useRef<HTMLCanvasElement>(null);
 
   useEffect(() => {
@@ -40,6 +47,22 @@ export default function SkyCanvas({ intensity = 1 }: { intensity?: number }) {
     const pointer = { x: 0, y: 0, tx: 0, ty: 0 };
     let raf = 0;
     let scroll = 0;
+    let camZ = 0;
+    let lastScrollY = window.scrollY;
+    let velocity = 0;
+    const deep: DeepStar[] = Array.from({ length: travel ? DEEP_STARS : 0 }, () => ({
+      x: rand(-1, 1),
+      y: rand(-1, 1),
+      z: Math.random(),
+      blue: Math.random() < 0.28,
+    }));
+    const nebulae: Nebula[] = Array.from({ length: travel ? NEBULAE : 0 }, (_, i) => ({
+      x: rand(-0.9, 0.9),
+      y: rand(-0.7, 0.7),
+      z: i / NEBULAE,
+      size: rand(0.5, 1.1),
+      hue: Math.random(),
+    }));
 
     const build = () => {
       const dpr = Math.min(window.devicePixelRatio || 1, 2);
@@ -116,6 +139,72 @@ export default function SkyCanvas({ intensity = 1 }: { intensity?: number }) {
       pointer.y += (pointer.ty - pointer.y) * 0.04;
       ctx.clearRect(0, 0, w, h);
 
+      if (travel && !reduced) {
+        // Camera depth follows scroll position; velocity (smoothed) stretches stars into streaks.
+        const y = window.scrollY;
+        velocity += (y - lastScrollY - velocity) * 0.06;
+        lastScrollY = y;
+        const idle = t * 0.0035; // a slow cruise even when not scrolling
+        camZ = y * TRAVEL_PER_PX + idle;
+        const cx = w / 2 + pointer.x * -40;
+        const cy = h / 2 + pointer.y * -30;
+        const focal = Math.max(w, h) * 0.55;
+        const warp = Math.min(1, Math.max(0, Math.abs(velocity) - 6) / 60);
+
+        // Nebula clouds swell and slide past as you approach them.
+        for (const n of nebulae) {
+          const z = (((n.z - camZ * 0.25) % 1) + 1) % 1;
+          const depth = 0.08 + z * 1.6;
+          const px = cx + (n.x * focal) / depth;
+          const py = cy + (n.y * focal) / depth;
+          const r = (n.size * focal * 0.5) / depth;
+          const fade = Math.min(1, (1 - z) * 2) * Math.min(1, z * 6);
+          const alpha = 0.1 * fade;
+          if (alpha < 0.005 || r < 4) continue;
+          const g = ctx.createRadialGradient(px, py, 0, px, py, r);
+          const color = n.hue > 0.5 ? BLUE : "120, 170, 255";
+          g.addColorStop(0, `rgba(${color}, ${alpha})`);
+          g.addColorStop(0.5, `rgba(${BLUE}, ${alpha * 0.35})`);
+          g.addColorStop(1, `rgba(${BLUE}, 0)`);
+          ctx.fillStyle = g;
+          ctx.beginPath();
+          ctx.arc(px, py, r, 0, Math.PI * 2);
+          ctx.fill();
+        }
+
+        // Stars stream toward the camera.
+        for (const s of deep) {
+          const z = (((s.z - camZ) % 1) + 1) % 1; // 1 far, 0 at the lens
+          const depth = 0.03 + z;
+          const px = cx + (s.x * focal) / depth;
+          const py = cy + (s.y * focal) / depth;
+          if (px < -50 || px > w + 50 || py < -50 || py > h + 50) continue;
+          const near = 1 - z;
+          const alpha = Math.min(0.85, near * near * 1.3) * intensity;
+          const size = 0.3 + near * near * 1.6;
+          const color = s.blue ? BLUE : "255, 255, 255";
+          if (warp > 0.08) {
+            // Where the star was a moment ago, further away: the streak points back to the vanishing point.
+            const dz = Math.min(0.06, Math.abs(velocity) * TRAVEL_PER_PX * 3) * warp;
+            const back = 0.03 + Math.min(1, z + (velocity > 0 ? dz : -dz));
+            const bx = cx + (s.x * focal) / back;
+            const by = cy + (s.y * focal) / back;
+            ctx.strokeStyle = `rgba(${color}, ${alpha * 0.8})`;
+            ctx.lineWidth = size;
+            ctx.lineCap = "round";
+            ctx.beginPath();
+            ctx.moveTo(bx, by);
+            ctx.lineTo(px, py);
+            ctx.stroke();
+          } else {
+            ctx.fillStyle = `rgba(${color}, ${alpha})`;
+            ctx.beginPath();
+            ctx.arc(px, py, size, 0, Math.PI * 2);
+            ctx.fill();
+          }
+        }
+      }
+
       for (const s of stars) {
         const layer = LAYERS[s.layer];
         const ox = reduced ? 0 : -pointer.x * layer.parallax;
@@ -198,7 +287,7 @@ export default function SkyCanvas({ intensity = 1 }: { intensity?: number }) {
       window.removeEventListener("scroll", onScroll);
       document.removeEventListener("visibilitychange", onVisibility);
     };
-  }, [intensity]);
+  }, [intensity, travel]);
 
   return (
     <div className="sky" aria-hidden="true">

frontend/src/lib/sound.ts

@@ -1,9 +1,12 @@
-/** Soft UI click: a short, quiet blip synthesized with Web Audio, so there is no asset to load.
- * Plays on buttons and button-styled links. Viewers can turn it off in Settings (stored per browser). */
+/** Space-flavored UI sounds, synthesized with Web Audio (no assets to load):
+ *  - tap: a soft sonar ping (sine with a shimmering detuned partner) that fades into a faint echo
+ *  - primary: a short rising "launch" chirp with a breath of filtered noise, also echoing
+ * Everything is very quiet. Viewers can turn sounds off in Settings (stored per browser). */
 
 const KEY = "ns_click_sounds";
 
 let ctx: AudioContext | null = null;
+let bus: GainNode | null = null;
 
 export function soundsEnabled(): boolean {
   try {
@@ -21,6 +24,64 @@ export function setSoundsEnabled(on: boolean): void {
   }
 }
 
+/** Master bus with a dark feedback echo, built once. */
+function output(ac: AudioContext): GainNode {
+  if (bus) return bus;
+  bus = ac.createGain();
+  bus.gain.value = 0.9;
+  const delay = ac.createDelay(1);
+  delay.delayTime.value = 0.19;
+  const feedback = ac.createGain();
+  feedback.gain.value = 0.32;
+  const tone = ac.createBiquadFilter();
+  tone.type = "lowpass";
+  tone.frequency.value = 1800;
+  const wet = ac.createGain();
+  wet.gain.value = 0.35;
+  bus.connect(ac.destination);
+  bus.connect(delay);
+  delay.connect(tone).connect(feedback).connect(delay);
+  tone.connect(wet).connect(ac.destination);
+  return bus;
+}
+
+function voice(ac: AudioContext, out: AudioNode, type: OscillatorType, from: number, to: number, start: number,
+               dur: number, peak: number, detune = 0): void {
+  const osc = ac.createOscillator();
+  const gain = ac.createGain();
+  osc.type = type;
+  osc.detune.value = detune;
+  osc.frequency.setValueAtTime(from, start);
+  osc.frequency.exponentialRampToValueAtTime(to, start + dur * 0.8);
+  gain.gain.setValueAtTime(0.0001, start);
+  gain.gain.exponentialRampToValueAtTime(peak, start + 0.012);
+  gain.gain.exponentialRampToValueAtTime(0.0001, start + dur);
+  osc.connect(gain).connect(out);
+  osc.start(start);
+  osc.stop(start + dur + 0.02);
+}
+
+function whoosh(ac: AudioContext, out: AudioNode, start: number, dur: number, peak: number): void {
+  const len = Math.floor(ac.sampleRate * dur);
+  const buffer = ac.createBuffer(1, len, ac.sampleRate);
+  const data = buffer.getChannelData(0);
+  for (let i = 0; i < len; i++) data[i] = Math.random() * 2 - 1;
+  const src = ac.createBufferSource();
+  src.buffer = buffer;
+  const band = ac.createBiquadFilter();
+  band.type = "bandpass";
+  band.Q.value = 6;
+  band.frequency.setValueAtTime(600, start);
+  band.frequency.exponentialRampToValueAtTime(3200, start + dur);
+  const gain = ac.createGain();
+  gain.gain.setValueAtTime(0.0001, start);
+  gain.gain.exponentialRampToValueAtTime(peak, start + dur * 0.3);
+  gain.gain.exponentialRampToValueAtTime(0.0001, start + dur);
+  src.connect(band).connect(gain).connect(out);
+  src.start(start);
+  src.stop(start + dur);
+}
+
 export function playClick(kind: "tap" | "primary" = "tap"): void {
   if (!soundsEnabled()) return;
   try {
@@ -28,20 +89,19 @@ export function playClick(kind: "tap" | "primary" = "tap"): void {
     if (!AC) return;
     ctx ??= new AC();
     if (ctx.state === "suspended") void ctx.resume();
-    const now = ctx.currentTime;
-    const osc = ctx.createOscillator();
-    const gain = ctx.createGain();
-    osc.type = "sine";
-    // Primary actions get a small rising two-tone; everything else a single soft tick.
-    const [from, to] = kind === "primary" ? [660, 990] : [520, 420];
-    osc.frequency.setValueAtTime(from, now);
-    osc.frequency.exponentialRampToValueAtTime(to, now + 0.07);
-    gain.gain.setValueAtTime(0.0001, now);
-    gain.gain.exponentialRampToValueAtTime(kind === "primary" ? 0.05 : 0.035, now + 0.008);
-    gain.gain.exponentialRampToValueAtTime(0.0001, now + 0.11);
-    osc.connect(gain).connect(ctx.destination);
-    osc.start(now);
-    osc.stop(now + 0.12);
+    const now = ctx.currentTime + 0.005;
+    const out = output(ctx);
+    if (kind === "primary") {
+      // Launch: two detuned voices sweep up an octave and a half, a thin noise trail rises with them.
+      voice(ctx, out, "sine", 330, 880, now, 0.28, 0.035);
+      voice(ctx, out, "triangle", 330, 880, now, 0.28, 0.012, 9);
+      voice(ctx, out, "sine", 1320, 1760, now + 0.09, 0.2, 0.01);
+      whoosh(ctx, out, now, 0.26, 0.012);
+    } else {
+      // Sonar ping: a clean tone with a slightly detuned shimmer, dropping a touch as it fades.
+      voice(ctx, out, "sine", 1046, 988, now, 0.22, 0.025);
+      voice(ctx, out, "sine", 1568, 1480, now, 0.16, 0.006, 7);
+    }
   } catch {
     /* audio is decoration only */
   }

frontend/src/pages/Landing.tsx

@@ -1,7 +1,9 @@
-import { useState, type FormEvent } from "react";
+import { useEffect, useRef, useState, type FormEvent } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import SkyCanvas from "../components/SkyCanvas";
+import FeatureShowcase from "../components/FeatureShowcase";
 import PricingTiers from "../components/PricingTiers";
+import "../styles/showcase.css";
 import { PublicFooter, PublicNav } from "../components/PublicChrome";
 import { blogPosts } from "../content/blogPosts";
 import { useAuth } from "../hooks/useAuth";
@@ -62,26 +64,105 @@ const STEPS = [
   { n: "03", title: "Launch", body: "Ask, listen, render and publish, all grounded in what you wrote." },
 ];
 
+/** The narrated demo. Browsers only autoplay muted, so a button turns the captain's log on. */
+function DemoVideo() {
+  const ref = useRef<HTMLVideoElement>(null);
+  const [muted, setMuted] = useState(true);
+  const toggle = () => {
+    const v = ref.current;
+    if (!v) return;
+    if (muted) {
+      v.currentTime = 0; // start the narration from the top
+      v.muted = false;
+      void v.play();
+    } else {
+      v.muted = true;
+    }
+    setMuted(!muted);
+  };
+  return (
+    <div className="demo-frame card arrive">
+      <div className="demo-bar mono">
+        <span>Mission log · 00:41</span>
+        <button type="button" className="demo-sound" onClick={toggle} aria-pressed={!muted}>
+          {muted ? "Play with sound" : "Mute"}
+        </button>
+      </div>
+      <div className="demo-stage">
+        <video
+          ref={ref}
+          className="demo-video"
+          src="/demo.mp4"
+          poster="/demo-poster.jpg"
+          autoPlay
+          muted
+          loop
+          playsInline
+          preload="metadata"
+          aria-label="Notestack product demo, narrated: paste your Substack, ask your archive, hear an audio overview and launch posts"
+        />
+        {muted && (
+          <button type="button" className="demo-unmute" onClick={toggle} aria-label="Play the demo with sound">
+            <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+              <path d="M4 9v6h4l5 4V5L8 9H4z" />
+              <path d="M16.5 8.5a5 5 0 0 1 0 7M19 6a8.5 8.5 0 0 1 0 12" />
+            </svg>
+            Hear the captain's log
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}
+
+/** Sections drift in out of the depth as they reach the viewport, like planets on approach. */
+function useArrivals() {
+  useEffect(() => {
+    const els = Array.from(document.querySelectorAll<HTMLElement>(".arrive"));
+    if (!("IntersectionObserver" in window) || window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      els.forEach((el) => el.classList.add("arrived"));
+      return;
+    }
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const e of entries) {
+          if (e.isIntersecting) {
+            e.target.classList.add("arrived");
+            io.unobserve(e.target);
+          }
+        }
+      },
+      { threshold: 0.35, rootMargin: "0px 0px -12% 0px" },
+    );
+    els.forEach((el) => io.observe(el));
+    return () => io.disconnect();
+  }, []);
+}
+
 export default function Landing() {
   const [url, setUrl] = useState("");
   const navigate = useNavigate();
   const { user } = useAuth();
+  useArrivals();
 
   const onSubmit = (e: FormEvent) => {
     e.preventDefault();
+    // Always go to sign in / sign up. A pasted URL rides along and starts connecting after signup
+    // (Welcome picks it up); signed in writers go straight to Mission Control, which does the same.
     const value = url.trim();
-    if (!value) return;
-    try {
-      sessionStorage.setItem(PENDING_SOURCE_KEY, value);
-    } catch {
-      /* ignore */
+    if (value) {
+      try {
+        sessionStorage.setItem(PENDING_SOURCE_KEY, value);
+      } catch {
+        /* ignore */
+      }
     }
     navigate(user ? "/app" : "/auth?mode=signup");
   };
 
   return (
     <div className="page">
-      <SkyCanvas />
+      <SkyCanvas travel />
       <PublicNav />
 
       <main>
@@ -91,7 +172,7 @@ export default function Landing() {
             <h1 className="hero-title">
               Your archive,
               <br />
-              <span className="glow-text">in orbit.</span>
+              <span className="glow-text shimmer">in orbit.</span>
             </h1>
             <p className="hero-sub muted">
               Notestack turns your posts into a research notebook you can question, podcasts you can publish and
@@ -117,23 +198,18 @@ export default function Landing() {
             </form>
             <p className="mono hero-meta">Free during early access. 20+ posts indexed in under 3 minutes.</p>
           </div>
-          <div className="horizon" aria-hidden="true" />
+          <div className="horizon" aria-hidden="true">
+            <span className="horizon-flare" />
+            <span className="horizon-glint g1" />
+            <span className="horizon-glint g2" />
+            <span className="horizon-glint g3" />
+          </div>
+          <div className="hero-sweep" aria-hidden="true" />
         </section>
 
         <section className="section demo">
           <div className="container">
-            <div className="demo-frame card">
-              <div className="demo-bar mono">
-                <span>T-minus 00:42</span>
-                <span className="muted">Rendering: vertical short</span>
-              </div>
-              <div className="demo-body">
-                <div className="orbit-loader" aria-hidden="true">
-                  <span />
-                </div>
-                <p className="muted">Product demo video lands here.</p>
-              </div>
-            </div>
+            <DemoVideo />
           </div>
         </section>
 
@@ -142,8 +218,8 @@ export default function Landing() {
             <p className="eyebrow">What you get</p>
             <h2 className="section-title">Everything your writing can become</h2>
             <div className="feature-grid">
-              {FEATURES.map(({ icon: Icon, label, title, body }) => (
-                <article key={label} className="card feature">
+              {FEATURES.map(({ icon: Icon, label, title, body }, i) => (
+                <article key={label} className="card feature arrive" style={{ ["--i" as string]: i % 3 }}>
                   <div className="feature-label">
                     <Icon />
                     <span className="mono">{label}</span>
@@ -156,13 +232,21 @@ export default function Landing() {
           </div>
         </section>
 
+        <section id="tour" className="section tour">
+          <div className="container">
+            <p className="eyebrow">The tour</p>
+            <h2 className="section-title">Seven stops across your archive</h2>
+            <FeatureShowcase />
+          </div>
+        </section>
+
         <section className="section">
           <div className="container">
             <p className="eyebrow">How it works</p>
             <h2 className="section-title">Three steps to liftoff</h2>
             <ol className="steps">
-              {STEPS.map((s) => (
-                <li key={s.n} className="step">
+              {STEPS.map((s, i) => (
+                <li key={s.n} className="step arrive" style={{ ["--i" as string]: i }}>
                   <span className="step-n mono">{s.n}</span>
                   <h3>{s.title}</h3>
                   <p className="muted">{s.body}</p>
@@ -185,8 +269,8 @@ export default function Landing() {
             <p className="eyebrow">From the blog</p>
             <h2 className="section-title">Field notes</h2>
             <div className="blog-grid">
-              {blogPosts.slice(0, 3).map((p) => (
-                <Link key={p.slug} to={`/blogs/${p.slug}`} className="card blog-card">
+              {blogPosts.slice(0, 3).map((p, i) => (
+                <Link key={p.slug} to={`/blogs/${p.slug}`} className="card blog-card arrive" style={{ ["--i" as string]: i }}>
                   <span className="mono muted">
                     {p.category} · {p.readTime}
                   </span>
@@ -198,7 +282,7 @@ export default function Landing() {
           </div>
         </section>
 
-        <section className="section final-cta">
+        <section className="section final-cta arrive">
           <div className="container">
             <h2 className="section-title">Clear skies ahead.</h2>
             <p className="muted">Paste your URL above or start with an empty notebook.</p>

frontend/src/pages/MissionControl.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Link } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { api } from "../api/client";
 import { artifactsApi, jobsApi, launchpadApi, notebooksApi, sourcesApi, voiceApi } from "../api/endpoints";
 import type { Artifact, CalendarItem, Job, NotebookSummary, Source } from "../api/types";
@@ -9,6 +9,15 @@ import { useAuth } from "../hooks/useAuth";
 import { useJobMap } from "../hooks/useJob";
 import { AddSource } from "./Sources";
 import { PENDING_SOURCE_KEY } from "./Landing";
+import { ONBOARDED_KEY } from "./Welcome";
+
+function onboarded(): boolean {
+  try {
+    return localStorage.getItem(ONBOARDED_KEY) === "1";
+  } catch {
+    return true;
+  }
+}
 
 type Plan = { name: string };
 
@@ -39,6 +48,7 @@ export default function MissionControl() {
   const [hasVoice, setHasVoice] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const started = useRef(false);
+  const navigate = useNavigate();
 
   const refresh = useCallback(async () => {
     const [s, n, p, a, c, v] = await Promise.all([
@@ -50,12 +60,17 @@ export default function MissionControl() {
       voiceApi.get(),
     ]);
     setSources(s);
+    // First visit with nothing connected: run the guided setup once.
+    if (s.length === 0 && !onboarded()) {
+      navigate("/welcome", { replace: true });
+      return;
+    }
     setNotebooks(n);
     setPlan(p.plan);
     setRecent(a.items);
     setUpcoming(c.slice(0, 5));
     setHasVoice(Boolean(v.profile));
-  }, []);
+  }, [navigate]);
 
   const { jobs, watch } = useJobMap(() => refresh());
 

frontend/src/pages/NotebookView.tsx

@@ -3,7 +3,8 @@ import { Link, useParams } from "react-router-dom";
 import { artifactsApi, notebooksApi, type GenerateBody } from "../api/endpoints";
 import { streamSSE } from "../api/stream";
 import type { Artifact, ChatSummary, Citation, Notebook } from "../api/types";
-import { ArtifactCard, CitationList, CitedText } from "../components/ArtifactCard";
+import { ArtifactCard, CitationList } from "../components/ArtifactCard";
+import { Markdown } from "../components/Markdown";
 import { DocPicker } from "../components/DocPicker";
 import { TelescopeIcon } from "../components/icons/Icons";
 import { Reader } from "../components/Reader";
@@ -295,11 +296,12 @@ export default function NotebookView() {
                 </details>
               )}
               {t.status && !t.steps?.length && <p className="mono muted">{t.status}...</p>}
-              {t.text && (
-                <p className="turn-text">
-                  {t.role === "assistant" ? <CitedText text={t.text} citations={t.citations ?? []} onCite={cite} /> : t.text}
-                </p>
-              )}
+              {t.text &&
+                (t.role === "assistant" ? (
+                  <Markdown text={t.text} citations={t.citations ?? []} onCite={cite} className="turn-md" />
+                ) : (
+                  <p className="turn-text">{t.text}</p>
+                ))}
               {t.citations && <CitationList citations={t.citations} onCite={cite} />}
             </div>
           ))}

frontend/src/pages/TopicMap.tsx

@@ -1,15 +1,103 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState, type MouseEvent as ReactMouseEvent, type PointerEvent as ReactPointerEvent, type RefObject } from "react";
 import { useNavigate } from "react-router-dom";
 import { notebooksApi, topicsApi } from "../api/endpoints";
 import type { Job, TopicDetail, TopicMap as TopicMapData } from "../api/types";
 import { Reader } from "../components/Reader";
 import { EmptyState, errorMessage, formatDate, JobProgress, Loading, PageHeader } from "../components/ui";
 import { useJob } from "../hooks/useJob";
+import { playClick } from "../lib/sound";
 
 const W = 900;
 const H = 620;
 
 type P = { id: string; x: number; y: number; vx: number; vy: number; r: number };
+type View = { x: number; y: number; w: number; h: number };
+
+const HOME: View = { x: 0, y: 0, w: W, h: H };
+const MIN_W = W / 8;
+const MAX_W = W * 1.6;
+
+/** Wheel to zoom around the cursor, drag to pan, buttons and keys for the rest. */
+function useZoomPan(svgRef: RefObject<SVGSVGElement>) {
+  const [view, setView] = useState<View>(HOME);
+  const drag = useRef<{ px: number; py: number; view: View; moved: boolean } | null>(null);
+
+  const toSvg = useCallback(
+    (clientX: number, clientY: number, v: View) => {
+      const rect = svgRef.current!.getBoundingClientRect();
+      return { x: v.x + ((clientX - rect.left) / rect.width) * v.w, y: v.y + ((clientY - rect.top) / rect.height) * v.h };
+    },
+    [svgRef],
+  );
+
+  const scaleView = (v: View, factor: number, fx: number, fy: number): View => {
+    const w = Math.max(MIN_W, Math.min(MAX_W, v.w * factor));
+    const h = (w / W) * H;
+    // Keep the focus point fixed on screen while scaling.
+    return { x: fx - ((fx - v.x) * w) / v.w, y: fy - ((fy - v.y) * h) / v.h, w, h };
+  };
+
+  const zoomAt = useCallback((factor: number, cx?: number, cy?: number) => {
+    setView((v) => scaleView(v, factor, cx ?? v.x + v.w / 2, cy ?? v.y + v.h / 2));
+  }, []);
+
+  useEffect(() => {
+    const el = svgRef.current;
+    if (!el) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      setView((v) => {
+        const p = toSvg(e.clientX, e.clientY, v);
+        return scaleView(v, Math.exp(Math.max(-0.4, Math.min(0.4, e.deltaY * 0.0015))), p.x, p.y);
+      });
+    };
+    el.addEventListener("wheel", onWheel, { passive: false });
+    return () => el.removeEventListener("wheel", onWheel);
+  });
+
+  const onPointerDown = (e: ReactPointerEvent<SVGSVGElement>) => {
+    if ((e.target as Element).closest(".map-node")) return;
+    drag.current = { px: e.clientX, py: e.clientY, view, moved: false };
+    svgRef.current?.setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e: ReactPointerEvent<SVGSVGElement>) => {
+    const d = drag.current;
+    if (!d || !svgRef.current) return;
+    const rect = svgRef.current.getBoundingClientRect();
+    const dx = ((e.clientX - d.px) / rect.width) * d.view.w;
+    const dy = ((e.clientY - d.py) / rect.height) * d.view.h;
+    if (Math.abs(dx) + Math.abs(dy) > 2) d.moved = true;
+    setView({ ...d.view, x: d.view.x - dx, y: d.view.y - dy });
+  };
+  const onPointerUp = (e: ReactPointerEvent<SVGSVGElement>) => {
+    drag.current = null;
+    if (svgRef.current?.hasPointerCapture(e.pointerId)) svgRef.current.releasePointerCapture(e.pointerId);
+  };
+  const onDoubleClick = (e: ReactMouseEvent<SVGSVGElement>) => {
+    if ((e.target as Element).closest(".map-node")) return;
+    const p = toSvg(e.clientX, e.clientY, view);
+    zoomAt(0.6, p.x, p.y);
+  };
+  const pan = (dx: number, dy: number) => setView((v) => ({ ...v, x: v.x + dx * v.w, y: v.y + dy * v.h }));
+  const reset = () => {
+    setView(HOME);
+  };
+  const focusOn = (x: number, y: number) =>
+    setView((v) => {
+      const w = Math.min(v.w, W / 2);
+      const h = (w / W) * H;
+      return { x: x - w / 2, y: y - h / 2, w, h };
+    });
+
+  return {
+    view,
+    zoomAt,
+    pan,
+    reset,
+    focusOn,
+    handlers: { onPointerDown, onPointerMove, onPointerUp, onPointerCancel: onPointerUp, onDoubleClick },
+  };
+}
 
 /** Small deterministic force layout: repulsion between all nodes, springs along edges, pull to center. */
 function layout(data: TopicMapData): Map<string, P> {
@@ -80,6 +168,8 @@ export default function TopicMap() {
   const [reading, setReading] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const navigate = useNavigate();
+  const svgRef = useRef<SVGSVGElement>(null);
+  const { view, zoomAt, pan, reset, focusOn, handlers } = useZoomPan(svgRef);
 
   const load = () => topicsApi.map().then(setData, () => setError("Could not load the topic map."));
   useEffect(() => {
@@ -113,7 +203,15 @@ export default function TopicMap() {
     }
   };
 
-  const open = async (id: string) => setSelected(await topicsApi.get(id));
+  const open = async (id: string, center = false) => {
+    playClick("tap");
+    if (center) {
+      const p = positions.get(id);
+      if (p) focusOn(p.x, p.y);
+    }
+    setSelected(await topicsApi.get(id));
+  };
+  const scale = view.w / W; // keeps labels and strokes a constant size on screen
 
   return (
     <div className="page-wrap">
@@ -142,7 +240,39 @@ export default function TopicMap() {
       {data && data.nodes.length > 0 && (
         <div className="map-layout">
           <div className="card map-canvas">
-            <svg viewBox={`0 0 ${W} ${H}`} role="img" aria-label="Topic constellation">
+            <div className="map-controls">
+              <button className="icon-btn" onClick={() => zoomAt(0.75)} aria-label="Zoom in" title="Zoom in">
+                +
+              </button>
+              <button className="icon-btn" onClick={() => zoomAt(1.33)} aria-label="Zoom out" title="Zoom out">
+                -
+              </button>
+              <button className="icon-btn mono" onClick={reset} aria-label="Reset view" title="Reset view">
+                1:1
+              </button>
+            </div>
+            <p className="map-hint mono muted">Scroll to zoom · drag to pan · double click to dive in</p>
+            <svg
+              ref={svgRef}
+              viewBox={`${view.x} ${view.y} ${view.w} ${view.h}`}
+              role="img"
+              aria-label="Topic constellation. Plus and minus zoom, arrow keys pan, 0 resets."
+              tabIndex={0}
+              className="map-svg"
+              {...handlers}
+              onKeyDown={(e) => {
+                const step = 0.12;
+                if (e.key === "+" || e.key === "=") zoomAt(0.8);
+                else if (e.key === "-") zoomAt(1.25);
+                else if (e.key === "0") reset();
+                else if (e.key === "ArrowLeft") pan(-step, 0);
+                else if (e.key === "ArrowRight") pan(step, 0);
+                else if (e.key === "ArrowUp") pan(0, -step);
+                else if (e.key === "ArrowDown") pan(0, step);
+                else return;
+                e.preventDefault();
+              }}
+            >
               <defs>
                 <radialGradient id="star" cx="50%" cy="50%" r="50%">
                   <stop offset="0%" stopColor="#ffffff" />
@@ -164,7 +294,7 @@ export default function TopicMap() {
                     y2={b.y}
                     stroke={lit ? "#217cff" : "#ffffff"}
                     strokeOpacity={lit ? 0.9 : focus ? 0.05 : 0.14}
-                    strokeWidth={lit ? 1.6 : 1}
+                    strokeWidth={(lit ? 1.6 : 1) * scale}
                   />
                 );
               })}
@@ -180,6 +310,7 @@ export default function TopicMap() {
                     onMouseEnter={() => setHover(n.id)}
                     onMouseLeave={() => setHover(null)}
                     onClick={() => open(n.id)}
+                    onDoubleClick={() => open(n.id, true)}
                     tabIndex={0}
                     role="button"
                     aria-label={`${n.name}, ${n.post_count} posts`}
@@ -187,7 +318,7 @@ export default function TopicMap() {
                   >
                     <circle cx={p.x} cy={p.y} r={p.r * 1.9} fill="url(#star)" opacity={active ? 0.9 : 0.45} />
                     <circle cx={p.x} cy={p.y} r={Math.max(3, p.r * 0.45)} fill="#ffffff" />
-                    <text x={p.x} y={p.y + p.r + 16} textAnchor="middle" className="map-label">
+                    <text x={p.x} y={p.y + p.r + 16 * scale} textAnchor="middle" className="map-label" style={{ fontSize: 12 * scale, strokeWidth: 4 * scale }}>
                       {n.name}
                     </text>
                   </g>
@@ -203,7 +334,7 @@ export default function TopicMap() {
                 <ol className="topic-rank">
                   {data.nodes.slice(0, 12).map((n) => (
                     <li key={n.id}>
-                      <button className="link-btn" onClick={() => open(n.id)}>
+                      <button className="link-btn" onClick={() => open(n.id, true)}>
                         {n.name}
                       </button>
                       <span className="mono muted"> {n.post_count}</span>

frontend/src/pages/VoiceProfile.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { voiceApi } from "../api/endpoints";
-import type { Job, Voice, VoiceProfileData, VoiceState } from "../api/types";
+import type { Delivery, Job, LibraryVoice, Quota, Voice, VoiceProfileData, VoiceState } from "../api/types";
 import { DocPicker } from "../components/DocPicker";
 import { ConfirmButton, errorMessage, formatDate, JobProgress, Loading, Modal, PageHeader } from "../components/ui";
 import { useJob } from "../hooks/useJob";
 
+type Host = "host_a" | "host_b";
+
 const LIST_FIELDS: { key: keyof VoiceProfileData; label: string; hint: string }[] = [
   { key: "tone", label: "Tone", hint: "warm, wry, direct" },
   { key: "vocabulary", label: "Signature words and phrases", hint: "readers, the long game" },
@@ -13,24 +15,303 @@ const LIST_FIELDS: { key: keyof VoiceProfileData; label: string; hint: string }[
   { key: "avoid", label: "Never does", hint: "jargon, hashtags" },
 ];
 
-function Recorder({ onFile }: { onFile: (f: File) => void }) {
+const SLIDERS: { key: keyof Delivery; label: string; min: number; max: number; step: number; hint: string }[] = [
+  { key: "stability", label: "Stability", min: 0, max: 1, step: 0.05, hint: "Lower is more expressive, higher is steadier" },
+  { key: "similarity_boost", label: "Clarity and similarity", min: 0, max: 1, step: 0.05, hint: "How closely it sticks to the original voice" },
+  { key: "style", label: "Style", min: 0, max: 1, step: 0.05, hint: "Exaggerates the speaker's style; keep low for news" },
+  { key: "speed", label: "Speed", min: 0.7, max: 1.2, step: 0.05, hint: "1.0 is natural pace" },
+];
+
+const HOST_LABEL: Record<Host, string> = { host_a: "Host A, leads and narrates videos", host_b: "Host B, the co-host" };
+
+/** Plays one URL at a time across the page. */
+function usePlayer() {
+  const audio = useRef<HTMLAudioElement | null>(null);
+  const [playing, setPlaying] = useState<string | null>(null);
+  const play = useCallback((url: string, id: string) => {
+    audio.current?.pause();
+    if (playing === id) {
+      setPlaying(null);
+      return;
+    }
+    const a = new Audio(url);
+    audio.current = a;
+    a.onended = () => setPlaying(null);
+    void a.play();
+    setPlaying(id);
+  }, [playing]);
+  useEffect(() => () => audio.current?.pause(), []);
+  return { play, playing };
+}
+
+function fmtSeconds(s: number) {
+  return `${Math.floor(s / 60)}:${String(Math.round(s % 60)).padStart(2, "0")}`;
+}
+
+// Speaking voices
+
+function HostCard({
+  host,
+  state,
+  voices,
+  onSaved,
+  onBrowse,
+}: {
+  host: Host;
+  state: VoiceState;
+  voices: Voice[];
+  onSaved: (s: VoiceState) => void;
+  onBrowse: (host: Host) => void;
+}) {
+  const [delivery, setDelivery] = useState<Delivery>(state.delivery[host]);
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [dirty, setDirty] = useState(false);
+  const { play, playing } = usePlayer();
+  const current = state.host_voices[host];
+  const groups = voices.reduce<Record<string, Voice[]>>((acc, v) => {
+    const k = v.category ?? "other";
+    (acc[k] ??= []).push(v);
+    return acc;
+  }, {});
+
+  useEffect(() => {
+    setDelivery(state.delivery[host]);
+    setDirty(false);
+  }, [state.delivery, host]);
+
+  const preview = async () => {
+    setBusy(true);
+    setError(null);
+    try {
+      const { url } = await voiceApi.preview(current, { delivery });
+      play(url, "preview");
+    } catch (e) {
+      setError(errorMessage(e));
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="host-card">
+      <div className="row between">
+        <strong>{HOST_LABEL[host]}</strong>
+        <button className="link-btn small" onClick={() => onBrowse(host)}>
+          Browse voice library
+        </button>
+      </div>
+      <div className="row">
+        <select
+          className="input input-sm"
+          value={current}
+          onChange={async (e) => onSaved(await voiceApi.update({ host_voices: { [host]: e.target.value } }))}
+          aria-label={`${HOST_LABEL[host]} voice`}
+        >
+          {Object.entries(groups).map(([cat, list]) => (
+            <optgroup key={cat} label={cat}>
+              {list.map((v) => (
+                <option key={v.voice_id} value={v.voice_id}>
+                  {v.name}
+                  {v.labels?.accent ? `, ${v.labels.accent}` : ""}
+                  {v.labels?.gender ? `, ${v.labels.gender}` : ""}
+                </option>
+              ))}
+            </optgroup>
+          ))}
+          {!voices.some((v) => v.voice_id === current) && <option value={current}>Current voice</option>}
+        </select>
+        <button className="btn btn-small" onClick={preview} disabled={busy || !state.tts_configured}>
+          {busy ? "Rendering..." : playing ? "Stop" : "Preview"}
+        </button>
+      </div>
+      <details className="delivery">
+        <summary className="mono muted small">Delivery settings</summary>
+        {SLIDERS.map((s) => (
+          <label key={s.key} className="slider" title={s.hint}>
+            <span className="row between">
+              <span>{s.label}</span>
+              <span className="mono muted">{Number(delivery[s.key]).toFixed(2)}</span>
+            </span>
+            <input
+              type="range"
+              min={s.min}
+              max={s.max}
+              step={s.step}
+              value={Number(delivery[s.key])}
+              onChange={(e) => {
+                setDelivery({ ...delivery, [s.key]: Number(e.target.value) });
+                setDirty(true);
+              }}
+            />
+          </label>
+        ))}
+        {dirty && (
+          <div className="row end">
+            <button className="btn btn-small" onClick={() => (setDelivery(state.delivery[host]), setDirty(false))}>
+              Reset
+            </button>
+            <button
+              className="btn btn-small btn-primary"
+              onClick={async () => {
+                onSaved(await voiceApi.update({ delivery: { [host]: delivery } }));
+                setDirty(false);
+              }}
+            >
+              Save delivery
+            </button>
+          </div>
+        )}
+      </details>
+      {error && <p className="error-text">{error}</p>}
+    </div>
+  );
+}
+
+// Voice library (commercially licensed voices from ElevenLabs)
+
+function LibraryModal({ host, onClose, onAdded }: { host: Host; onClose: () => void; onAdded: (s: VoiceState) => void }) {
+  const [filters, setFilters] = useState({ search: "", gender: "", age: "", accent: "", use_case: "" });
+  const [voices, setVoices] = useState<LibraryVoice[] | null>(null);
+  const [page, setPage] = useState(0);
+  const [hasMore, setHasMore] = useState(false);
+  const [adding, setAdding] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const { play, playing } = usePlayer();
+
+  const load = useCallback(
+    async (p = 0) => {
+      setError(null);
+      try {
+        const res = await voiceApi.library({ ...filters, page: p });
+        setVoices((cur) => (p ? [...(cur ?? []), ...res.voices] : res.voices));
+        setHasMore(res.has_more);
+        setPage(p);
+      } catch (e) {
+        setError(errorMessage(e));
+        setVoices([]);
+      }
+    },
+    [filters],
+  );
+
+  useEffect(() => {
+    const t = setTimeout(() => load(0), 250);
+    return () => clearTimeout(t);
+  }, [load]);
+
+  const select = (key: keyof typeof filters, options: [string, string][]) => (
+    <select className="input input-sm" value={filters[key]} onChange={(e) => setFilters({ ...filters, [key]: e.target.value })} aria-label={key}>
+      {options.map(([v, l]) => (
+        <option key={v} value={v}>
+          {l}
+        </option>
+      ))}
+    </select>
+  );
+
+  return (
+    <Modal title={`Voice library for ${host === "host_a" ? "Host A" : "Host B"}`} onClose={onClose} wide>
+      <div className="stack">
+        <p className="muted small">
+          Voices from the ElevenLabs Voice Library, licensed for commercial use on paid ElevenLabs plans. Adding one puts it in your ElevenLabs account.
+        </p>
+        <div className="library-filters">
+          <input className="input input-sm" placeholder="Search: calm narrator, british, podcast" value={filters.search} onChange={(e) => setFilters({ ...filters, search: e.target.value })} aria-label="Search voices" />
+          {select("gender", [["", "Any gender"], ["female", "Female"], ["male", "Male"], ["neutral", "Neutral"]])}
+          {select("age", [["", "Any age"], ["young", "Young"], ["middle_aged", "Middle aged"], ["old", "Older"]])}
+          {select("accent", [["", "Any accent"], ["american", "American"], ["british", "British"], ["australian", "Australian"], ["irish", "Irish"], ["indian", "Indian"], ["african", "African"]])}
+          {select("use_case", [["", "Any use"], ["conversational", "Conversational"], ["narrative_story", "Narration"], ["informative_educational", "Educational"], ["social_media", "Social media"], ["entertainment_tv", "Entertainment"]])}
+        </div>
+        {error && <p className="error-text">{error}</p>}
+        {!voices && <Loading label="Searching voices" />}
+        <ul className="library-grid">
+          {voices?.map((v) => (
+            <li key={`${v.public_owner_id}-${v.voice_id}`} className="library-voice">
+              <div className="row between">
+                <strong>{v.name}</strong>
+                {v.preview_url && (
+                  <button className="btn btn-small" onClick={() => play(v.preview_url!, v.voice_id)} aria-label={`Play ${v.name}`}>
+                    {playing === v.voice_id ? "Stop" : "Play"}
+                  </button>
+                )}
+              </div>
+              <p className="mono muted small">{[v.gender, v.age?.replace("_", " "), v.accent, v.use_case?.replace(/_/g, " ")].filter(Boolean).join(" · ")}</p>
+              {v.description && <p className="muted small clamp-3">{v.description}</p>}
+              {v.notice_period ? <p className="mono muted small">Owner notice period: {v.notice_period} days</p> : null}
+              <button
+                className="btn btn-small btn-primary"
+                disabled={adding !== null}
+                onClick={async () => {
+                  setAdding(v.voice_id);
+                  setError(null);
+                  try {
+                    onAdded(await voiceApi.addFromLibrary(v, host));
+                    onClose();
+                  } catch (e) {
+                    setError(errorMessage(e));
+                  } finally {
+                    setAdding(null);
+                  }
+                }}
+              >
+                {adding === v.voice_id ? "Adding..." : `Use as ${host === "host_a" ? "Host A" : "Host B"}`}
+              </button>
+            </li>
+          ))}
+          {voices?.length === 0 && !error && <li className="muted">No voices match those filters.</li>}
+        </ul>
+        {hasMore && (
+          <button className="btn" onClick={() => load(page + 1)}>
+            More voices
+          </button>
+        )}
+      </div>
+    </Modal>
+  );
+}
+
+// Cloning
+
+type Take = { file: File; url: string; seconds: number };
+
+function Recorder({ onTake }: { onTake: (t: Take) => void }) {
   const [recording, setRecording] = useState(false);
   const [seconds, setSeconds] = useState(0);
+  const [level, setLevel] = useState(0);
   const [error, setError] = useState<string | null>(null);
   const rec = useRef<MediaRecorder | null>(null);
   const timer = useRef<number>();
+  const raf = useRef<number>();
 
   const start = async () => {
     setError(null);
     try {
-      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: false, noiseSuppression: false, autoGainControl: true } });
+      const ac = new AudioContext();
+      const analyser = ac.createAnalyser();
+      ac.createMediaStreamSource(stream).connect(analyser);
+      const buf = new Uint8Array(analyser.fftSize);
+      const meter = () => {
+        analyser.getByteTimeDomainData(buf);
+        let peak = 0;
+        for (const b of buf) peak = Math.max(peak, Math.abs(b - 128));
+        setLevel(peak / 128);
+        raf.current = requestAnimationFrame(meter);
+      };
+      meter();
       const chunks: Blob[] = [];
       const mr = new MediaRecorder(stream);
+      const started = Date.now();
       mr.ondataavailable = (e) => chunks.push(e.data);
       mr.onstop = () => {
         stream.getTracks().forEach((t) => t.stop());
+        cancelAnimationFrame(raf.current!);
+        void ac.close();
         const type = mr.mimeType.split(";")[0] || "audio/webm";
-        onFile(new File(chunks, `voice-sample.${type.includes("mp4") ? "m4a" : "webm"}`, { type }));
+        const file = new File(chunks, `take-${Date.now()}.${type.includes("mp4") ? "m4a" : "webm"}`, { type });
+        onTake({ file, url: URL.createObjectURL(file), seconds: (Date.now() - started) / 1000 });
+        setLevel(0);
       };
       mr.start();
       rec.current = mr;
@@ -38,7 +319,7 @@ function Recorder({ onFile }: { onFile: (f: File) => void }) {
       setSeconds(0);
       timer.current = window.setInterval(() => setSeconds((s) => s + 1), 1000);
     } catch {
-      setError("Microphone access was blocked. You can upload a recording instead.");
+      setError("Microphone access was blocked. You can upload recordings instead.");
     }
   };
   const stop = () => {
@@ -48,42 +329,106 @@ function Recorder({ onFile }: { onFile: (f: File) => void }) {
   };
 
   return (
-    <div className="row">
-      {recording ? (
-        <button type="button" className="btn btn-danger" onClick={stop}>
-          Stop recording ({seconds}s)
-        </button>
-      ) : (
-        <button type="button" className="btn" onClick={start}>
-          Record a sample
-        </button>
-      )}
+    <div className="stack">
+      <div className="row">
+        {recording ? (
+          <button type="button" className="btn btn-danger armed" onClick={stop}>
+            Stop take ({fmtSeconds(seconds)})
+          </button>
+        ) : (
+          <button type="button" className="btn btn-primary" onClick={start}>
+            Record a take
+          </button>
+        )}
+        {recording && (
+          <div className="level" aria-label="Input level">
+            <div className="level-fill" style={{ width: `${Math.min(100, level * 160)}%` }} />
+          </div>
+        )}
+      </div>
+      {recording && level < 0.04 && seconds > 2 && <p className="muted small">We can barely hear you. Move closer to the microphone.</p>}
+      {level > 0.95 && <p className="muted small">Too loud: back off a little so it does not clip.</p>}
       {error && <p className="error-text">{error}</p>}
     </div>
   );
 }
 
 function CloneModal({ state, onClose, onDone }: { state: VoiceState; onClose: () => void; onDone: (job: Job) => void }) {
-  const [file, setFile] = useState<File | null>(null);
+  const [script, setScript] = useState<{ title: string; text: string } | null>(null);
+  const [takes, setTakes] = useState<Take[]>([]);
   const [agreed, setAgreed] = useState(false);
+  const [denoise, setDenoise] = useState(true);
   const [busy, setBusy] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const preview = file ? URL.createObjectURL(file) : null;
+  const total = takes.reduce((n, t) => n + t.seconds, 0);
+
+  useEffect(() => {
+    voiceApi.readingScript().then(setScript, () => setScript(null));
+  }, []);
+
+  const addFiles = (files: FileList | null) => {
+    for (const file of Array.from(files ?? [])) {
+      const url = URL.createObjectURL(file);
+      const probe = new Audio(url);
+      probe.onloadedmetadata = () =>
+        setTakes((t) => [...t, { file, url, seconds: Number.isFinite(probe.duration) ? probe.duration : 60 }]);
+    }
+  };
+
+  const quality = total < 30 ? "Too short: record at least 30 seconds" : total < 60 ? "Usable, but 1 to 3 minutes sounds much better" : total <= 300 ? "Great length" : "Plenty: more than 5 minutes adds little";
+
   return (
-    <Modal title="Clone your voice" onClose={onClose}>
+    <Modal title="Clone your voice" onClose={onClose} wide>
       <div className="stack">
-        <p className="muted">
-          Read one of your posts aloud for one to three minutes in a quiet room. The clone is used only for audio and video in this workspace.
-        </p>
-        <Recorder onFile={setFile} />
+        <ol className="clone-tips muted small">
+          <li>Quiet room, no music, phone on silent. Keep the same distance from the mic.</li>
+          <li>Read naturally, the way you would on a podcast. Pauses are fine.</li>
+          <li>Record in one or more takes: 1 to 3 minutes in total works best.</li>
+        </ol>
+        {script && (
+          <div className="reading-script">
+            <p className="eyebrow">Read this, from "{script.title}"</p>
+            {script.text.split(/\n\n+/).map((p, i) => (
+              <p key={i}>{p}</p>
+            ))}
+          </div>
+        )}
+        <Recorder onTake={(t) => setTakes((list) => [...list, t])} />
         <label className="field">
-          <span>Or upload a recording</span>
-          <input className="input file-input" type="file" accept="audio/*" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
+          <span>Or upload recordings (mp3, m4a, wav, webm)</span>
+          <input className="input file-input" type="file" accept="audio/*" multiple onChange={(e) => addFiles(e.target.files)} />
+        </label>
+        {takes.length > 0 && (
+          <ul className="takes">
+            {takes.map((t, i) => (
+              <li key={t.url} className="row">
+                <span className="mono muted">Take {i + 1} · {fmtSeconds(t.seconds)}</span>
+                <audio controls src={t.url} className="player take-player" />
+                <button className="icon-btn" aria-label={`Remove take ${i + 1}`} onClick={() => setTakes(takes.filter((x) => x !== t))}>
+                  <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6">
+                    <path d="M6 6l12 12M18 6L6 18" />
+                  </svg>
+                </button>
+              </li>
+            ))}
+          </ul>
+        )}
+        <div className="meter">
+          <div className="row between">
+            <span>Total {fmtSeconds(total)}</span>
+            <span className="mono muted small">{takes.length ? quality : "No takes yet"}</span>
+          </div>
+          <div className="ascent-track">
+            <div className="ascent-fill" style={{ width: `${Math.min(100, (total / 180) * 100)}%` }} />
+          </div>
+        </div>
+        <label className="check">
+          <input type="checkbox" checked={denoise} onChange={(e) => setDenoise(e.target.checked)} />
+          Remove background noise (turn off for studio quality recordings)
         </label>
-        {preview && <audio controls src={preview} className="player" />}
         <blockquote className="consent">{state.clone.consent_text}</blockquote>
         <label className="check">
-          <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />I agree to the statement above.
+          <input type="checkbox" checked={agreed} onChange={(e) => setAgreed(e.target.checked)} />I agree to the statement above, and this is my own voice.
         </label>
         {error && <p className="error-text">{error}</p>}
         <div className="row end">
@@ -92,12 +437,12 @@ function CloneModal({ state, onClose, onDone }: { state: VoiceState; onClose: ()
           </button>
           <button
             className="btn btn-primary"
-            disabled={!file || !agreed || busy}
+            disabled={!takes.length || total < 10 || !agreed || busy}
             onClick={async () => {
               setBusy(true);
               setError(null);
               try {
-                const res = await voiceApi.consent(file!, state.clone.consent_text);
+                const res = await voiceApi.consent(takes.map((t) => t.file), state.clone.consent_text, denoise);
                 onDone(res.job);
                 onClose();
               } catch (e) {
@@ -119,13 +464,16 @@ export default function VoiceProfile() {
   const [state, setState] = useState<VoiceState | null>(null);
   const [draft, setDraft] = useState<VoiceProfileData | null>(null);
   const [voices, setVoices] = useState<Voice[]>([]);
+  const [quota, setQuota] = useState<Quota>({});
   const [picking, setPicking] = useState(false);
   const [samples, setSamples] = useState<string[]>([]);
   const [buildJob, setBuildJob] = useState<Job | null>(null);
   const [cloneJob, setCloneJob] = useState<Job | null>(null);
   const [cloning, setCloning] = useState(false);
+  const [browsing, setBrowsing] = useState<Host | null>(null);
   const [saved, setSaved] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const { play, playing } = usePlayer();
 
   const load = () =>
     voiceApi.get().then((s) => {
@@ -133,26 +481,28 @@ export default function VoiceProfile() {
       setDraft(s.profile);
       setSamples(s.sample_doc_ids);
     });
+  const loadVoices = () => voiceApi.voices().then(setVoices, () => setVoices([]));
 
   useEffect(() => {
     load();
-    voiceApi.voices().then(setVoices, () => setVoices([]));
+    loadVoices();
+    voiceApi.quota().then(setQuota, () => setQuota({}));
   }, []);
 
   const build = useJob(buildJob, () => load());
   const clone = useJob(cloneJob, () => {
     load();
-    voiceApi.voices().then(setVoices);
+    loadVoices();
   });
 
   if (!state) return <Loading />;
   const building = build && (build.status === "queued" || build.status === "running");
+  const cloneRunning = clone && (clone.status === "queued" || clone.status === "running");
 
-  const save = async (patch: Parameters<typeof voiceApi.update>[0]) => {
+  const saveProfile = async () => {
     setError(null);
     try {
-      const s = await voiceApi.update(patch);
-      setState(s);
+      setState(await voiceApi.update({ profile: draft! }));
       setSaved(true);
       setTimeout(() => setSaved(false), 1500);
     } catch (e) {
@@ -160,22 +510,23 @@ export default function VoiceProfile() {
     }
   };
 
+  const used = quota.character_count ?? 0;
+  const limit = quota.character_limit ?? 0;
+
   return (
     <div className="page-wrap">
-      <PageHeader eyebrow="Voice profile" title="How you sound on the page">
+      <PageHeader eyebrow="Voice profile" title="How you sound, on the page and out loud">
         <button className="btn btn-primary" disabled={Boolean(building)} onClick={() => setPicking(true)}>
-          {state.profile ? "Rebuild from posts" : "Build my voice profile"}
+          {state.profile ? "Rebuild writing voice" : "Build my writing voice"}
         </button>
       </PageHeader>
-      <p className="muted lede">
-        Launch Kits, carousels, hooks and scripts are written in this voice. Edit anything that does not sound like you.
-      </p>
       {build && (building || build.status === "failed") && <JobProgress job={build} />}
       {error && <p className="error-text">{error}</p>}
 
       <div className="two-col">
         <section className="card stack">
           <h2>Writing voice</h2>
+          <p className="muted small">Launch Kits, carousels, hooks and scripts are written in this voice. Edit anything that does not sound like you.</p>
           {!draft && <p className="muted">No profile yet. Build one from 5 to 10 posts that feel most like you.</p>}
           {draft && (
             <>
@@ -203,8 +554,10 @@ export default function VoiceProfile() {
                 </label>
               ))}
               <div className="row between">
-                <span className="mono muted">Built {formatDate(state.updated_at, true)} from {state.sample_doc_ids.length} posts</span>
-                <button className="btn btn-primary btn-small" onClick={() => save({ profile: draft })}>
+                <span className="mono muted small">
+                  Built {formatDate(state.updated_at, true)} from {state.sample_doc_ids.length} posts
+                </span>
+                <button className="btn btn-primary btn-small" onClick={saveProfile}>
                   {saved ? "Saved" : "Save changes"}
                 </button>
               </div>
@@ -212,62 +565,70 @@ export default function VoiceProfile() {
           )}
         </section>
 
-        <section className="card stack">
-          <h2>Speaking voices</h2>
-          {!state.tts_configured && <p className="muted">Set ELEVENLABS_API_KEY in .env to generate audio.</p>}
-          {(["host_a", "host_b"] as const).map((host) => (
-            <label key={host} className="field">
-              <span>{host === "host_a" ? "Host A (leads, narrates videos)" : "Host B"}</span>
-              <div className="row">
-                <select
-                  className="input input-sm"
-                  value={state.host_voices[host]}
-                  onChange={(e) => save({ host_voices: { ...state.host_voices, [host]: e.target.value } })}
-                >
-                  {voices.map((v) => (
-                    <option key={v.voice_id} value={v.voice_id}>
-                      {v.name}
-                      {v.category ? ` (${v.category})` : ""}
-                    </option>
-                  ))}
-                  {!voices.some((v) => v.voice_id === state.host_voices[host]) && <option value={state.host_voices[host]}>Current voice</option>}
-                </select>
-                {voices.find((v) => v.voice_id === state.host_voices[host])?.preview_url && (
-                  <button type="button" className="btn btn-small" onClick={() => new Audio(voices.find((v) => v.voice_id === state.host_voices[host])!.preview_url!).play()}>
-                    Preview
-                  </button>
-                )}
-              </div>
-            </label>
-          ))}
+        <div className="stack">
+          <section className="card stack">
+            <div className="row between">
+              <h2>Speaking voices</h2>
+              {limit > 0 && (
+                <span className="mono muted small" title="ElevenLabs characters this billing period">
+                  {used.toLocaleString()} / {limit.toLocaleString()} chars
+                </span>
+              )}
+            </div>
+            {!state.tts_configured && <p className="muted">Set ELEVENLABS_API_KEY in .env to generate audio.</p>}
+            <p className="muted small">
+              Audio overviews use both hosts; videos are narrated by Host A. Model: {state.models[state.model] ?? state.model}.
+            </p>
+            {(["host_a", "host_b"] as Host[]).map((h) => (
+              <HostCard key={h} host={h} state={state} voices={voices} onSaved={setState} onBrowse={setBrowsing} />
+            ))}
+          </section>
 
-          <h3>Your own voice</h3>
-          {!state.clone.allowed && <p className="muted">Voice cloning is on the Writer and Studio plans.</p>}
-          {state.clone.allowed && state.clone.status === "none" && (
-            <>
-              <p className="muted">Clone your voice with a short recording and your consent. You can revoke it anytime.</p>
-              <button className="btn" onClick={() => setCloning(true)} disabled={!state.tts_configured}>
-                Clone my voice
-              </button>
-            </>
-          )}
-          {clone && (clone.status === "queued" || clone.status === "running" || clone.status === "failed") && <JobProgress job={clone} compact />}
-          {state.clone.status === "processing" && !clone && <p className="muted">Your voice is being created.</p>}
-          {state.clone.status === "ready" && (
-            <>
-              <p className="muted">Your cloned voice is ready. Pick "My voice" above to use it as a host.</p>
-              <ConfirmButton
-                confirmLabel="Revoke and delete my voice?"
-                onConfirm={async () => {
-                  setState(await voiceApi.revoke());
-                  voiceApi.voices().then(setVoices);
-                }}
-              >
-                Revoke consent
-              </ConfirmButton>
-            </>
-          )}
-        </section>
+          <section className="card stack">
+            <h2>Your own voice</h2>
+            {!state.clone.allowed && <p className="muted">Voice cloning is on the Writer and Studio plans.</p>}
+            {quota.can_use_instant_voice_cloning === false && (
+              <p className="muted small">Your ElevenLabs plan does not include instant voice cloning. Upgrade it at elevenlabs.io.</p>
+            )}
+            {state.clone.allowed && (state.clone.status === "none" || state.clone.status === "failed") && !cloneRunning && (
+              <>
+                <p className="muted">
+                  Record one to three minutes of your own writing, read aloud. Your voice becomes Host A, so audio overviews and videos sound like you.
+                </p>
+                {state.clone.status === "failed" && state.clone.error && <p className="error-text">{state.clone.error}</p>}
+                <button className="btn btn-primary" onClick={() => setCloning(true)} disabled={!state.tts_configured}>
+                  Clone my voice
+                </button>
+              </>
+            )}
+            {clone && (cloneRunning || clone.status === "failed") && <JobProgress job={clone} />}
+            {state.clone.status === "processing" && !clone && <p className="muted">Your voice is being created.</p>}
+            {state.clone.status === "ready" && (
+              <>
+                <p className="muted">Your voice is live and set as Host A. Adjust its delivery above.</p>
+                <div className="row">
+                  {state.clone.preview_url && (
+                    <button className="btn btn-small" onClick={() => play(state.clone.preview_url!, "clone")}>
+                      {playing === "clone" ? "Stop" : "Hear my voice"}
+                    </button>
+                  )}
+                  <button className="btn btn-small" onClick={() => setCloning(true)}>
+                    Record again
+                  </button>
+                  <ConfirmButton
+                    confirmLabel="Revoke and delete my voice?"
+                    onConfirm={async () => {
+                      setState(await voiceApi.revoke());
+                      loadVoices();
+                    }}
+                  >
+                    Revoke consent
+                  </ConfirmButton>
+                </div>
+              </>
+            )}
+          </section>
+        </div>
       </div>
 
       {picking && (
@@ -292,6 +653,16 @@ export default function VoiceProfile() {
         </Modal>
       )}
       {cloning && <CloneModal state={state} onClose={() => setCloning(false)} onDone={setCloneJob} />}
+      {browsing && (
+        <LibraryModal
+          host={browsing}
+          onClose={() => setBrowsing(null)}
+          onAdded={(s) => {
+            setState(s);
+            loadVoices();
+          }}
+        />
+      )}
     </div>
   );
 }

frontend/src/styles/app.css

@@ -1076,3 +1076,191 @@
   display: grid;
   gap: 2px;
 }
+
+/* ---------- Landing: flare, shimmer, arrivals, demo video ---------- */
+
+/* A soft light rides along the horizon; small glints twinkle where it passes. */
+.horizon {
+  overflow: visible;
+}
+
+.horizon-flare {
+  position: absolute;
+  top: -3px;
+  left: 50%;
+  width: 16vw;
+  height: 3px;
+  margin-left: -8vw;
+  border-radius: 999px;
+  background: radial-gradient(50% 50% at 50% 50%, #ffffff 0%, var(--blue) 35%, transparent 70%);
+  filter: blur(0.5px);
+  box-shadow: 0 0 26px 4px var(--blue-60), 0 0 60px 8px var(--blue-20);
+  transform-origin: 50% 75vw;
+  animation: flare-ride 18s cubic-bezier(0.45, 0, 0.55, 1) infinite;
+  opacity: 0;
+}
+
+.horizon-flare::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  width: 56px;
+  height: 56px;
+  margin: -28px 0 0 -28px;
+  border-radius: 50%;
+  background: radial-gradient(circle, #ffffff 0%, rgba(255, 255, 255, 0.6) 10%, var(--blue-60) 26%, transparent 64%);
+}
+
+@keyframes flare-ride {
+  0% {
+    transform: rotate(-26deg);
+    opacity: 0;
+  }
+  15% {
+    opacity: 0.9;
+  }
+  50% {
+    opacity: 1;
+  }
+  85% {
+    opacity: 0.8;
+  }
+  100% {
+    transform: rotate(26deg);
+    opacity: 0;
+  }
+}
+
+.horizon-glint {
+  position: absolute;
+  top: -10px;
+  width: 12px;
+  height: 12px;
+  margin-left: -6px;
+  background:
+    linear-gradient(90deg, transparent 45%, #ffffff 50%, transparent 55%),
+    linear-gradient(0deg, transparent 45%, #ffffff 50%, transparent 55%);
+  filter: drop-shadow(0 0 6px var(--blue)) drop-shadow(0 0 2px #ffffff);
+  opacity: 0;
+  animation: glint 18s ease-in-out infinite;
+}
+
+.horizon-glint.g1 {
+  left: 38%;
+  animation-delay: 5.2s;
+}
+
+.horizon-glint.g2 {
+  left: 50%;
+  top: -12px;
+  animation-delay: 8.8s;
+}
+
+.horizon-glint.g3 {
+  left: 62%;
+  animation-delay: 12.4s;
+}
+
+@keyframes glint {
+  0%,
+  100% {
+    opacity: 0;
+    transform: scale(0.2) rotate(0deg);
+  }
+  4% {
+    opacity: 1;
+    transform: scale(1.1) rotate(45deg);
+  }
+  10% {
+    opacity: 0;
+    transform: scale(0.4) rotate(90deg);
+  }
+}
+
+/* A light sweep crosses the hero every few seconds, catching the headline. */
+.hero-sweep {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.035) 48%, var(--blue-05) 50%, transparent 55%);
+  background-size: 250% 100%;
+  animation: sweep 16s ease-in-out infinite;
+  mix-blend-mode: screen;
+}
+
+@keyframes sweep {
+  0% {
+    background-position: 130% 0;
+  }
+  45%,
+  100% {
+    background-position: -40% 0;
+  }
+}
+
+.glow-text.shimmer {
+  background: linear-gradient(100deg, #ffffff 35%, #cfe2ff 45%, #ffffff 50%, var(--blue) 55%, #ffffff 65%);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: shimmer 16s ease-in-out infinite;
+  filter: drop-shadow(0 0 18px var(--blue-35)) drop-shadow(0 0 40px var(--blue-20));
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  45%,
+  100% {
+    background-position: 0% 0;
+  }
+}
+
+/* Sections arrive out of the depth. */
+.arrive {
+  opacity: 0;
+  transform: perspective(900px) translateZ(-90px) translateY(28px);
+  filter: blur(4px);
+  transition:
+    opacity 1.4s ease,
+    transform 1.8s cubic-bezier(0.22, 1, 0.36, 1),
+    filter 1.4s ease;
+  transition-delay: calc(var(--i, 0) * 260ms);
+}
+
+.arrive.arrived {
+  opacity: 1;
+  transform: none;
+  filter: none;
+}
+
+.demo-video {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: var(--black);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .horizon-flare,
+  .horizon-glint,
+  .hero-sweep,
+  .glow-text.shimmer {
+    animation: none;
+  }
+
+  .horizon-flare {
+    opacity: 0.8;
+    transform: none;
+  }
+
+  .arrive {
+    opacity: 1;
+    transform: none;
+    filter: none;
+  }
+}

frontend/src/styles/pages.css

@@ -1506,3 +1506,692 @@ select.input option {
     animation: none;
   }
 }
+
+/* Markdown in answers and summaries */
+.md {
+  display: grid;
+  gap: 0.85em;
+  line-height: 1.7;
+  font-size: 0.975rem;
+  color: var(--text);
+  overflow-wrap: anywhere;
+}
+
+.md > * {
+  margin: 0;
+}
+
+.md h3,
+.md h4,
+.md h5 {
+  font-family: var(--font-display);
+  line-height: 1.3;
+  margin-top: 0.4em;
+}
+
+.md h3 {
+  font-size: 1.15rem;
+}
+
+.md h4 {
+  font-size: 1.02rem;
+}
+
+.md h5 {
+  font-size: 0.95rem;
+  color: var(--text-2);
+}
+
+.md ul,
+.md ol {
+  padding-left: 1.4em;
+  display: grid;
+  gap: 0.4em;
+}
+
+.md li > ul,
+.md li > ol {
+  margin-top: 0.4em;
+}
+
+.md ul li::marker {
+  color: var(--blue);
+}
+
+.md ol li::marker {
+  color: var(--blue);
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+
+.md strong {
+  color: var(--white);
+  font-weight: 650;
+}
+
+.md em {
+  color: var(--text-2);
+}
+
+.md a {
+  color: var(--white);
+  text-decoration-color: var(--blue-60);
+  text-underline-offset: 3px;
+}
+
+.md code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  padding: 1px 6px;
+  border-radius: 6px;
+  background: var(--surface-2);
+  border: 1px solid var(--line);
+}
+
+.md pre {
+  padding: 14px 16px;
+  border-radius: var(--radius-sm);
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid var(--line);
+  overflow-x: auto;
+}
+
+.md pre code {
+  padding: 0;
+  border: none;
+  background: none;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+
+.md blockquote {
+  padding: 4px 0 4px 16px;
+  border-left: 3px solid var(--blue);
+  color: var(--text-2);
+}
+
+.md hr {
+  border: none;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, var(--blue-35), transparent);
+}
+
+.md-table {
+  overflow-x: auto;
+}
+
+.md table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+
+.md th,
+.md td {
+  padding: 8px 10px;
+  border-bottom: 1px solid var(--line);
+  text-align: left;
+  vertical-align: top;
+}
+
+.md th {
+  font-family: var(--font-mono);
+  font-size: 0.75rem;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--blue);
+}
+
+.turn-md {
+  padding: 4px 2px;
+}
+
+.turn-assistant + .turn-user {
+  margin-top: 8px;
+}
+
+/* Topic map zoom and pan */
+.map-canvas {
+  position: relative;
+  overflow: hidden;
+}
+
+.map-svg {
+  cursor: grab;
+  touch-action: none;
+  user-select: none;
+  aspect-ratio: 900 / 620;
+}
+
+.map-svg:active {
+  cursor: grabbing;
+}
+
+.map-svg:focus-visible {
+  outline: 1px solid var(--blue-60);
+  outline-offset: -1px;
+}
+
+.map-controls {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+  display: grid;
+  gap: 4px;
+  padding: 4px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.map-controls .icon-btn {
+  font: 600 1rem var(--font-mono);
+  color: var(--white);
+}
+
+.map-controls .icon-btn.mono {
+  font-size: 0.65rem;
+}
+
+.map-hint {
+  position: absolute;
+  left: 16px;
+  bottom: 10px;
+  z-index: 1;
+  font-size: 0.7rem;
+  pointer-events: none;
+}
+
+/* Voice page */
+.host-card {
+  display: grid;
+  gap: 10px;
+  padding: 14px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.host-card select {
+  flex: 1;
+  min-width: 0;
+}
+
+.delivery summary {
+  cursor: pointer;
+}
+
+.delivery[open] {
+  display: grid;
+  gap: 10px;
+}
+
+.slider {
+  display: grid;
+  gap: 4px;
+  font-size: 0.85rem;
+}
+
+.slider input[type="range"] {
+  width: 100%;
+  accent-color: var(--blue);
+}
+
+.library-filters {
+  display: grid;
+  gap: 8px;
+  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+}
+
+.library-filters .input:first-child {
+  grid-column: 1 / -1;
+}
+
+.library-grid {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+  max-height: 52vh;
+  overflow: auto;
+}
+
+.library-voice {
+  display: grid;
+  gap: 6px;
+  align-content: start;
+  padding: 12px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-sm);
+}
+
+.library-voice:hover {
+  border-color: var(--blue-35);
+}
+
+.clone-tips {
+  margin: 0;
+  padding-left: 18px;
+  display: grid;
+  gap: 4px;
+}
+
+.reading-script {
+  max-height: 220px;
+  overflow: auto;
+  padding: 14px 16px;
+  border: 1px solid var(--blue-35);
+  border-radius: var(--radius-sm);
+  background: var(--blue-05);
+  font-family: var(--font-display);
+  font-size: 1.05rem;
+  line-height: 1.6;
+  display: grid;
+  gap: 10px;
+}
+
+.reading-script p {
+  margin: 0;
+}
+
+.takes {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  gap: 6px;
+}
+
+.take-player {
+  flex: 1;
+  height: 32px;
+  min-width: 160px;
+}
+
+.level {
+  flex: 1;
+  height: 6px;
+  border-radius: 999px;
+  background: var(--surface-2);
+  overflow: hidden;
+}
+
+.level-fill {
+  height: 100%;
+  background: var(--blue);
+  box-shadow: 0 0 10px var(--blue);
+  transition: width 0.08s linear;
+}
+
+/* ---------- Density pass: tighter spacing, pages fit the window instead of forcing a scroll ---------- */
+:root {
+  --main-pad-top: 20px;
+  --main-pad-bottom: 20px;
+}
+
+.shell-main {
+  padding: var(--main-pad-top) var(--gutter) var(--main-pad-bottom);
+}
+
+@media (min-width: 900px) {
+  .shell-main {
+    padding-left: 28px;
+    padding-right: 28px;
+  }
+
+  /* Beats `.shell > :not(.sky) { position: relative }`, so the nav stays put while content scrolls. */
+  .shell > .sidebar {
+    position: sticky;
+    top: 0;
+    height: 100vh;
+    overflow-y: auto;
+    padding: 14px 12px;
+    gap: 14px;
+  }
+
+  .side-link {
+    padding: 7px 10px;
+    font-size: 0.9rem;
+  }
+}
+
+.card {
+  padding: 18px;
+}
+
+.page-wrap,
+.mc {
+  gap: 14px;
+}
+
+.page-head,
+.mc-head {
+  margin-bottom: 0;
+  align-items: center;
+}
+
+.page-head h1,
+.mc-head h1 {
+  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
+  margin-top: 4px;
+}
+
+.page-head .eyebrow,
+.mc-head .eyebrow {
+  font-size: 0.7rem;
+}
+
+.lede {
+  font-size: 0.9rem;
+  margin-top: -6px;
+}
+
+.stack {
+  gap: 10px;
+}
+
+.two-col,
+.grid-cards,
+.gallery,
+.mc-grid {
+  gap: 14px;
+  align-items: start; /* no stretched cards with dead space below short content */
+}
+
+.mc-card {
+  gap: 10px;
+}
+
+.empty-state {
+  padding: 32px 16px;
+  gap: 10px;
+}
+
+.empty-state.small {
+  padding: 20px 12px;
+}
+
+.empty-state .empty-art {
+  width: 72px;
+  height: 54px;
+}
+
+.artifact {
+  padding: 14px;
+  gap: 10px;
+}
+
+.video-short {
+  max-height: 360px;
+}
+
+.picker-list {
+  max-height: 260px;
+}
+
+.doc-row {
+  padding: 8px 0;
+}
+
+.source-row {
+  padding: 10px 12px;
+}
+
+.loading {
+  padding: 12px 0;
+}
+
+/* Notebook: exactly the window height, panes scroll inside. */
+@media (min-width: 1100px) {
+  .nbv {
+    height: calc(100vh - var(--main-pad-top) - var(--main-pad-bottom));
+    min-height: 480px;
+  }
+}
+
+.nbv-chat {
+  min-height: 360px;
+}
+
+/* Topic map: canvas fills the space left in the window, never taller. */
+@media (min-width: 1100px) {
+  .map-layout {
+    height: calc(100vh - 150px);
+    min-height: 420px;
+  }
+
+  .map-canvas,
+  .map-side {
+    height: 100%;
+    max-height: none;
+  }
+
+  .map-canvas {
+    display: grid;
+    place-items: center;
+  }
+
+  /* Keep the 900:620 aspect so pointer math matches the viewBox; fit inside the available box. */
+  .map-svg {
+    height: 100%;
+    width: auto;
+    max-width: 100%;
+    aspect-ratio: 900 / 620;
+  }
+}
+
+@media (max-width: 1099px) {
+  .map-svg {
+    max-height: 62vh;
+  }
+}
+
+/* Launch Kit: the post picker and kit list share the side column without pushing the page. */
+@media (min-width: 1100px) {
+  .kit-layout > aside {
+    position: sticky;
+    top: 0;
+    max-height: calc(100vh - var(--main-pad-top) - var(--main-pad-bottom));
+    overflow-y: auto;
+  }
+
+  .kit-layout .picker-list {
+    max-height: 220px;
+  }
+}
+
+/* Launchpad: a month fits on one screen. */
+.cal-day {
+  min-height: 72px;
+  padding: 4px 5px;
+  gap: 3px;
+}
+
+.cal-head {
+  margin-bottom: 8px;
+}
+
+.accounts {
+  gap: 8px;
+}
+
+/* Modals: compact padding, body scrolls instead of the page. */
+.modal {
+  gap: 12px;
+  padding: 18px;
+}
+
+/* ---------- Containment: text wraps inside its box instead of spilling past borders ---------- */
+.shell-main,
+.page-wrap > *,
+.mc > *,
+.two-col > *,
+.grid-cards > *,
+.gallery > *,
+.mc-grid > *,
+.kit-layout > *,
+.map-layout > *,
+.nbv > *,
+.stack > *,
+.row > *,
+.field,
+.artifact-head > div,
+.source-title,
+.nb-card,
+.library-voice,
+.host-card,
+.post-edit,
+.slide-edit,
+.resurface-row,
+.recent-list li,
+.recent-list a {
+  min-width: 0;
+}
+
+.card,
+.modal,
+.drawer,
+.md,
+.artifact-body,
+.cites,
+.transcript,
+.doc-title,
+.picker-title,
+.source-title,
+.nbv-doc,
+.kit-list,
+.topic-rank,
+.hooks,
+.claims,
+.seo dd,
+.account,
+.angle,
+.cite-span,
+.error-text,
+.notice {
+  overflow-wrap: anywhere;
+  word-break: normal;
+}
+
+/* Small buttons may wrap to two lines rather than punch out of narrow panes. */
+.btn-small {
+  white-space: normal;
+  height: auto;
+  min-height: 34px;
+  padding: 6px 14px;
+  line-height: 1.25;
+  text-align: center;
+}
+
+.btn {
+  max-width: 100%;
+}
+
+select.input,
+.input,
+.textarea {
+  max-width: 100%;
+  min-width: 0;
+  text-overflow: ellipsis;
+}
+
+.row > select.input {
+  flex: 1 1 160px;
+}
+
+.chip {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.small-link,
+.source-card a.mono {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.account {
+  max-width: 100%;
+}
+
+.account .mono {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 220px;
+  display: inline-block;
+  vertical-align: bottom;
+}
+
+.pill {
+  flex-shrink: 0;
+}
+
+.artifact-head h3,
+.nb-card h3,
+.kit-view h2 {
+  overflow-wrap: anywhere;
+}
+
+.metrics,
+.picker-actions,
+.artifact-actions {
+  flex-wrap: wrap;
+}
+
+.map-side h2,
+.map-side .doc-title {
+  overflow-wrap: anywhere;
+}
+
+.sidebar-user .mono {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.reader-line span:last-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+/* Content uses the full width next to the sidebar (open or collapsed); centred only on very wide screens. */
+.page-wrap,
+.mc,
+.nbv {
+  width: 100%;
+  max-width: 1760px;
+  margin-inline: auto;
+}
+
+.shell-main {
+  width: 100%;
+}
+
+@media (min-width: 900px) {
+  .shell.collapsed .shell-main {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+}
+
+@media (min-width: 1100px) {
+  /* Wider screens give the side columns room instead of leaving it empty. */
+  .nbv {
+    grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(320px, 400px);
+  }
+
+  .kit-layout {
+    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
+  }
+
+  .map-layout {
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
+  }
+}

frontend/src/styles/showcase.css

@@ -0,0 +1,521 @@
+/* ---------- Landing: feature tour ---------- */
+.showcase {
+  display: grid;
+  gap: clamp(64px, 12vh, 140px);
+  margin-top: 24px;
+}
+
+.showcase-row {
+  display: grid;
+  gap: 28px;
+  align-items: center;
+}
+
+@media (min-width: 900px) {
+  .showcase-row {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
+    gap: 56px;
+  }
+
+  .showcase-row.flip .showcase-copy {
+    order: 2;
+  }
+}
+
+.showcase-copy {
+  display: grid;
+  gap: 14px;
+  align-content: start;
+  justify-items: start;
+}
+
+.showcase-copy h3 {
+  font-size: clamp(1.5rem, 3vw, 2.1rem);
+  line-height: 1.12;
+}
+
+.showcase-copy ul {
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+  display: grid;
+  gap: 8px;
+}
+
+.showcase-copy li {
+  position: relative;
+  padding-left: 22px;
+  color: var(--text-2);
+}
+
+.showcase-copy li::before {
+  content: "";
+  position: absolute;
+  left: 2px;
+  top: 0.55em;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--blue);
+  box-shadow: 0 0 10px var(--blue);
+}
+
+.showcase-n {
+  color: var(--white);
+  opacity: 0.6;
+  margin-right: 6px;
+}
+
+.showcase-visual {
+  padding: 0;
+  overflow: hidden;
+  border-color: var(--blue-20);
+  box-shadow: var(--glow-lg);
+  aspect-ratio: 16 / 11;
+  background: radial-gradient(70% 60% at 50% 40%, var(--blue-10), transparent 70%), rgba(0, 0, 0, 0.6);
+}
+
+/* Visual primitives. Everything starts hidden and plays once the row is .arrived. */
+.fx {
+  height: 100%;
+  padding: clamp(16px, 3vw, 28px);
+  display: grid;
+  gap: 12px;
+  align-content: center;
+  font-size: 0.9rem;
+}
+
+.fx .mono {
+  font-size: 0.72rem;
+  color: var(--blue);
+}
+
+.fx > *,
+.fx-card,
+.fx-node,
+.fx-edge,
+.fx-cal span {
+  transition:
+    opacity 0.8s ease,
+    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
+    stroke-dashoffset 1.2s ease,
+    background 0.6s ease,
+    border-color 0.6s ease,
+    box-shadow 0.6s ease;
+}
+
+.showcase-row:not(.arrived) .fx > * {
+  opacity: 0;
+  transform: translateY(14px);
+}
+
+.fx > *:nth-child(2) {
+  transition-delay: 0.35s;
+}
+
+.fx > *:nth-child(3) {
+  transition-delay: 0.7s;
+}
+
+.fx > *:nth-child(4) {
+  transition-delay: 1.05s;
+}
+
+.fx > *:nth-child(5) {
+  transition-delay: 1.3s;
+}
+
+/* Chat */
+.fx-bubble {
+  justify-self: end;
+  padding: 8px 14px;
+  border-radius: 14px 14px 4px 14px;
+  background: var(--blue-10);
+  border: 1px solid var(--blue-35);
+}
+
+.fx-steps {
+  display: grid;
+  gap: 2px;
+}
+
+.fx-answer {
+  line-height: 1.6;
+}
+
+.fx-cite {
+  display: inline-grid;
+  place-items: center;
+  min-width: 16px;
+  height: 16px;
+  margin-left: 3px;
+  border-radius: 5px;
+  font: 600 0.6rem var(--font-mono);
+  vertical-align: super;
+  background: var(--blue);
+  box-shadow: 0 0 10px var(--blue);
+}
+
+.fx-source {
+  display: grid;
+  gap: 6px;
+  padding: 10px 12px;
+  border-radius: 10px;
+  border: 1px solid var(--line);
+}
+
+.fx-line {
+  padding: 4px 8px;
+  border-radius: 6px;
+  background: var(--blue-20);
+  box-shadow: inset 3px 0 0 var(--blue);
+}
+
+/* Topic map */
+.fx-map {
+  padding: 8px;
+}
+
+.fx-map svg {
+  width: 100%;
+  height: 100%;
+}
+
+.fx-edge {
+  stroke: var(--white);
+  stroke-opacity: 0.3;
+  stroke-width: 0.4;
+  stroke-dasharray: 60;
+  stroke-dashoffset: 60;
+  transition-delay: var(--d);
+}
+
+.fx-halo {
+  fill: var(--blue);
+  opacity: 0.35;
+  filter: blur(2px);
+}
+
+.fx-node text {
+  fill: var(--white);
+  font: 500 3.6px var(--font-body);
+}
+
+.fx-node {
+  opacity: 0;
+  transition-delay: var(--d);
+}
+
+.showcase-row.arrived .fx-edge {
+  stroke-dashoffset: 0;
+}
+
+.showcase-row.arrived .fx-node {
+  opacity: 1;
+}
+
+.showcase-row.arrived .fx-halo {
+  animation: pulse-halo 4s ease-in-out infinite;
+}
+
+@keyframes pulse-halo {
+  50% {
+    opacity: 0.6;
+  }
+}
+
+/* Audio */
+.fx-wave {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  height: 110px;
+}
+
+.fx-wave span {
+  flex: 1;
+  height: 12%;
+  border-radius: 99px;
+  background: var(--blue);
+  box-shadow: 0 0 8px var(--blue-60);
+}
+
+.fx-wave span:nth-child(2n) {
+  background: var(--white);
+}
+
+.showcase-row.arrived .fx-wave span {
+  animation: bar 1.4s ease-in-out infinite alternate;
+  animation-delay: var(--d);
+}
+
+@keyframes bar {
+  from {
+    height: 12%;
+  }
+  to {
+    height: var(--h);
+  }
+}
+
+.fx-lines {
+  display: grid;
+  gap: 8px;
+}
+
+.fx-lines p {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.fx-host {
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  font: 600 0.65rem var(--font-mono);
+}
+
+.fx-host.a {
+  background: var(--blue);
+}
+
+.fx-host.b {
+  background: var(--white);
+  color: var(--black);
+}
+
+/* Video */
+.fx-video {
+  grid-template-columns: 0.55fr 1.2fr 0.8fr;
+  align-items: center;
+}
+
+.fx-frame {
+  display: grid;
+  gap: 6px;
+  align-content: end;
+  padding: 10px;
+  border-radius: 10px;
+  border: 1px solid var(--blue-35);
+  background: radial-gradient(80% 60% at 50% 100%, var(--blue-20), transparent), var(--black);
+  box-shadow: 0 0 20px var(--blue-10);
+  font-size: 0.75rem;
+}
+
+.fx-frame b {
+  font-family: var(--font-display);
+  line-height: 1.2;
+}
+
+.v916 {
+  aspect-ratio: 9 / 16;
+}
+
+.v169 {
+  aspect-ratio: 16 / 9;
+}
+
+.v11 {
+  aspect-ratio: 1;
+}
+
+.fx-mini-wave {
+  display: block;
+  height: 18px;
+  background: repeating-linear-gradient(90deg, var(--blue) 0 3px, transparent 3px 6px);
+}
+
+/* Launch Kit */
+.fx-kit {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.fx-card {
+  display: grid;
+  gap: 6px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--line-strong);
+  background: rgba(0, 0, 0, 0.7);
+  transition-delay: var(--d);
+}
+
+.fx-card p {
+  font-size: 0.82rem;
+  line-height: 1.45;
+}
+
+.showcase-row:not(.arrived) .fx-kit .fx-card {
+  opacity: 0;
+  transform: translateY(40px) rotate(var(--r));
+}
+
+/* Voice */
+.fx-profile {
+  display: grid;
+  gap: 4px;
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--blue-35);
+  background: var(--blue-05);
+}
+
+.fx-slider {
+  display: grid;
+  grid-template-columns: 90px 1fr;
+  align-items: center;
+  gap: 10px;
+  font-size: 0.8rem;
+  color: var(--text-2);
+}
+
+.fx-slider i {
+  position: relative;
+  height: 4px;
+  border-radius: 99px;
+  background: var(--surface-2);
+}
+
+.fx-slider i::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: -3px;
+  width: 10px;
+  height: 10px;
+  margin-left: -5px;
+  border-radius: 50%;
+  background: var(--white);
+  box-shadow: 0 0 10px var(--blue);
+  transition: left 1.2s cubic-bezier(0.22, 1, 0.36, 1);
+  transition-delay: var(--d);
+}
+
+.showcase-row.arrived .fx-slider i::after {
+  left: var(--v);
+}
+
+.fx-clone {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.fx-rec {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--white);
+  box-shadow: 0 0 8px var(--white);
+  animation: pill-pulse 1.4s ease-in-out infinite;
+}
+
+/* Launchpad */
+.fx-cal {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 5px;
+}
+
+.fx-cal span {
+  aspect-ratio: 1.3;
+  padding: 3px 5px;
+  border-radius: 6px;
+  border: 1px solid var(--line);
+  font: 0.6rem var(--font-mono);
+  color: var(--text-3);
+}
+
+.fx-cal span.on {
+  transition-delay: var(--d);
+}
+
+.showcase-row.arrived .fx-cal span.on {
+  border-color: var(--blue);
+  background: var(--blue-20);
+  box-shadow: 0 0 12px var(--blue-35);
+  color: var(--white);
+}
+
+.fx-launch {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.fx-launch span {
+  padding: 4px 10px;
+  border-radius: 99px;
+  border: 1px solid var(--blue-35);
+  color: var(--white);
+  font-size: 0.72rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .showcase-row .fx > *,
+  .showcase-row .fx-node,
+  .showcase-row .fx-card {
+    opacity: 1 !important;
+    transform: none !important;
+  }
+
+  .fx-edge {
+    stroke-dashoffset: 0;
+  }
+
+  .fx-wave span,
+  .fx-halo,
+  .fx-rec {
+    animation: none !important;
+  }
+}
+
+/* Demo video sound controls */
+.demo-bar {
+  align-items: center;
+}
+
+.demo-sound {
+  border: 1px solid var(--blue-35);
+  border-radius: 999px;
+  padding: 3px 12px;
+  background: transparent;
+  color: var(--white);
+  font: inherit;
+  cursor: pointer;
+}
+
+.demo-sound:hover {
+  border-color: var(--blue);
+  box-shadow: var(--glow-sm);
+}
+
+.demo-stage {
+  position: relative;
+}
+
+.demo-unmute {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  border-radius: 999px;
+  border: 1px solid var(--blue-60);
+  background: rgba(0, 0, 0, 0.72);
+  backdrop-filter: blur(6px);
+  color: var(--white);
+  font: 600 0.875rem var(--font-body);
+  cursor: pointer;
+  box-shadow: var(--glow-md);
+}
+
+.demo-unmute:hover {
+  background: var(--blue);
+}

frontend/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/app.tsx","./src/main.tsx","./src/api/auth.ts","./src/api/client.ts","./src/api/endpoints.ts","./src/api/stream.ts","./src/api/types.ts","./src/components/appshell.tsx","./src/components/artifactcard.tsx","./src/components/docpicker.tsx","./src/components/logo.tsx","./src/components/pricingtiers.tsx","./src/components/publicchrome.tsx","./src/components/reader.tsx","./src/components/schedulemodal.tsx","./src/components/skycanvas.tsx","./src/components/ui.tsx","./src/components/icons/icons.tsx","./src/content/blogposts.ts","./src/content/seotypes.ts","./src/hooks/useauth.tsx","./src/hooks/usejob.ts","./src/pages/archive.tsx","./src/pages/authcallback.tsx","./src/pages/authpage.tsx","./src/pages/blog.tsx","./src/pages/landing.tsx","./src/pages/launchkit.tsx","./src/pages/launchpad.tsx","./src/pages/missioncontrol.tsx","./src/pages/notebookview.tsx","./src/pages/notebooks.tsx","./src/pages/resurface.tsx","./src/pages/settings.tsx","./src/pages/sources.tsx","./src/pages/studio.tsx","./src/pages/topicmap.tsx","./src/pages/voiceprofile.tsx"],"version":"5.6.3"}
+{"root":["./src/app.tsx","./src/main.tsx","./src/api/auth.ts","./src/api/client.ts","./src/api/endpoints.ts","./src/api/stream.ts","./src/api/types.ts","./src/components/appshell.tsx","./src/components/artifactcard.tsx","./src/components/docpicker.tsx","./src/components/featureshowcase.tsx","./src/components/logo.tsx","./src/components/markdown.tsx","./src/components/pricingtiers.tsx","./src/components/publicchrome.tsx","./src/components/reader.tsx","./src/components/schedulemodal.tsx","./src/components/skycanvas.tsx","./src/components/ui.tsx","./src/components/icons/icons.tsx","./src/content/blogposts.ts","./src/content/seotypes.ts","./src/hooks/useauth.tsx","./src/hooks/usejob.ts","./src/lib/sound.ts","./src/pages/archive.tsx","./src/pages/authcallback.tsx","./src/pages/authpage.tsx","./src/pages/blog.tsx","./src/pages/landing.tsx","./src/pages/launchkit.tsx","./src/pages/launchpad.tsx","./src/pages/missioncontrol.tsx","./src/pages/notebookview.tsx","./src/pages/notebooks.tsx","./src/pages/resurface.tsx","./src/pages/settings.tsx","./src/pages/sources.tsx","./src/pages/studio.tsx","./src/pages/topicmap.tsx","./src/pages/voiceprofile.tsx","./src/pages/welcome.tsx"],"version":"5.6.3"}

renderer/public/demo-vo/durations.json

@@ -0,0 +1,10 @@
+{
+  "warp": 3.79,
+  "paste": 3.27,
+  "orbit": 6.3,
+  "research": 4.29,
+  "audio": 3.74,
+  "launchkit": 6.53,
+  "launchpad": 3.22,
+  "outro": 2.48
+}

renderer/src/Root.tsx

@@ -2,6 +2,7 @@ import { Composition, Still } from "remotion";
 import { AudiogramSquare, audiogramDuration } from "./compositions/AudiogramSquare";
 import { CarouselSlide } from "./compositions/CarouselSlide";
 import { ExplainerLong, explainerDuration } from "./compositions/ExplainerLong";
+import { DEMO_DURATION, DEMO_FPS, LandingDemo } from "./compositions/LandingDemo";
 import { QuoteCard } from "./compositions/QuoteCard";
 import { ShortVertical, shortVerticalDuration } from "./compositions/ShortVertical";
 import {
@@ -42,6 +43,7 @@ const sampleAudiogram: AudiogramSquareProps = {
 export function Root() {
   return (
     <>
+      <Composition id="LandingDemo" component={LandingDemo} width={1920} height={1080} fps={DEMO_FPS} durationInFrames={DEMO_DURATION} />
       <Composition
         id="ShortVertical"
         component={ShortVertical}

renderer/src/compositions/LandingDemo.tsx

@@ -0,0 +1,540 @@
+import type { CSSProperties, ReactNode } from "react";
+import { AbsoluteFill, Audio as SoundTrack, Easing, interpolate, random, Sequence, spring, staticFile, useCurrentFrame, useVideoConfig } from "remotion";
+import { theme } from "../theme";
+
+/** Landing page product demo: a trip through the Notestack galaxy. 1920x1080, 30 fps, ~32 s.
+ * Scenes: warp in, paste URL, posts enter orbit, cited research, audio overview, Launch Kit,
+ * Launchpad, outro. Strict palette: black, #217cff, white. */
+
+export const DEMO_FPS = 30;
+const S = (seconds: number) => Math.round(seconds * DEMO_FPS);
+
+// Scene lengths fit the narration (public/demo-vo/*.mp3, voiced by "Nora Vale, Mission Control"):
+// each line starts `vo` seconds into its scene and ends with room to breathe before the crossfade.
+const SCENES = [
+  { id: "warp", len: 5.2, vo: 0.6 },
+  { id: "paste", len: 4.6, vo: 0.4 },
+  { id: "orbit", len: 7.6, vo: 0.4 },
+  { id: "research", len: 5.6, vo: 0.4 },
+  { id: "audio", len: 5.1, vo: 0.4 },
+  { id: "launchkit", len: 7.8, vo: 0.4 },
+  { id: "launchpad", len: 4.6, vo: 0.4 },
+  { id: "outro", len: 4.2, vo: 0.5 },
+] as const;
+const XFADE = 0.5; // seconds of overlap between scenes
+
+export const DEMO_DURATION = S(SCENES.reduce((n, s) => n + s.len, 0) - XFADE * (SCENES.length - 1));
+
+const BLUE = theme.blue;
+const ease = Easing.bezier(0.22, 1, 0.36, 1);
+
+// Shared pieces
+
+/** 3D starfield flying toward the camera. `speed` can ramp for warp streaks. */
+function WarpField({ speed, count = 420, streak = 0 }: { speed: number; count?: number; streak?: number }) {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const cx = width / 2;
+  const cy = height / 2;
+  return (
+    <AbsoluteFill style={{ backgroundColor: theme.black }}>
+      <AbsoluteFill
+        style={{
+          background: `radial-gradient(55% 45% at 50% 50%, ${BLUE}22, transparent 70%), radial-gradient(40% 30% at 80% 20%, ${BLUE}14, transparent 70%)`,
+        }}
+      />
+      <svg width={width} height={height}>
+        {Array.from({ length: count }).map((_, i) => {
+          const angle = random(`a${i}`) * Math.PI * 2;
+          const base = random(`z${i}`);
+          const z = (((base - frame * speed * 0.004) % 1) + 1) % 1; // 1 far, 0 at the camera
+          const depth = 0.04 + z;
+          const r = (random(`r${i}`) * 0.9 + 0.1) * 900;
+          const x = cx + (Math.cos(angle) * r) / depth / 6;
+          const y = cy + (Math.sin(angle) * r) / depth / 6;
+          const size = Math.max(0.4, (1 - z) * 2.6);
+          const alpha = Math.min(1, (1 - z) * 1.4);
+          const blue = random(`b${i}`) < 0.25;
+          if (streak > 0.02) {
+            const z2 = z + streak * 0.08;
+            const d2 = 0.04 + z2;
+            const x2 = cx + (Math.cos(angle) * r) / d2 / 6;
+            const y2 = cy + (Math.sin(angle) * r) / d2 / 6;
+            return (
+              <line key={i} x1={x} y1={y} x2={x2} y2={y2} stroke={blue ? BLUE : theme.white} strokeOpacity={alpha} strokeWidth={size * 0.8} strokeLinecap="round" />
+            );
+          }
+          return <circle key={i} cx={x} cy={y} r={size} fill={blue ? BLUE : theme.white} opacity={alpha} />;
+        })}
+      </svg>
+    </AbsoluteFill>
+  );
+}
+
+/** A diagonal light flare that sweeps across, with a hot core and anamorphic streak. */
+function Flare({ at, duration = 24, y = 50 }: { at: number; duration?: number; y?: number }) {
+  const frame = useCurrentFrame();
+  const p = interpolate(frame, [at, at + duration], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: ease });
+  if (p <= 0 || p >= 1) return null;
+  const x = interpolate(p, [0, 1], [-10, 110]);
+  const a = Math.sin(p * Math.PI);
+  return (
+    <AbsoluteFill style={{ pointerEvents: "none", mixBlendMode: "screen" }}>
+      <div
+        style={{
+          position: "absolute",
+          left: `${x}%`,
+          top: `${y}%`,
+          width: 520,
+          height: 520,
+          marginLeft: -260,
+          marginTop: -260,
+          borderRadius: "50%",
+          background: `radial-gradient(circle, rgba(255,255,255,${0.9 * a}) 0%, ${BLUE}${Math.round(a * 120).toString(16).padStart(2, "0")} 18%, transparent 60%)`,
+        }}
+      />
+      <div
+        style={{
+          position: "absolute",
+          left: 0,
+          right: 0,
+          top: `${y}%`,
+          height: 3,
+          marginTop: -1.5,
+          opacity: a * 0.9,
+          background: `linear-gradient(90deg, transparent, ${BLUE} ${x - 20}%, #ffffff ${x}%, ${BLUE} ${x + 20}%, transparent)`,
+          boxShadow: `0 0 30px ${BLUE}`,
+        }}
+      />
+    </AbsoluteFill>
+  );
+}
+
+function FadeScene({ len, children }: { len: number; children: ReactNode }) {
+  const frame = useCurrentFrame();
+  const total = S(len);
+  const fade = S(XFADE);
+  const opacity = interpolate(frame, [0, fade, total - fade, total], [0, 1, 1, 0], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  const scale = interpolate(frame, [0, total], [1.04, 1], { easing: ease });
+  return <AbsoluteFill style={{ opacity, transform: `scale(${scale})` }}>{children}</AbsoluteFill>;
+}
+
+function Caption({ eyebrow, title, delay = 0 }: { eyebrow: string; title: string; delay?: number }) {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const s = spring({ frame: frame - delay, fps, config: { damping: 18 } });
+  return (
+    <div style={{ position: "absolute", left: 140, top: 110, opacity: s, transform: `translateY(${(1 - s) * 24}px)` }}>
+      <p style={{ margin: 0, fontFamily: theme.mono, fontSize: 24, letterSpacing: 6, textTransform: "uppercase", color: BLUE }}>{eyebrow}</p>
+      <h2 style={{ margin: "14px 0 0", fontFamily: theme.display, fontSize: 64, lineHeight: 1.05, color: theme.white, maxWidth: 900 }}>{title}</h2>
+    </div>
+  );
+}
+
+const panel: CSSProperties = {
+  border: "1px solid rgba(255,255,255,0.14)",
+  borderRadius: 22,
+  background: "rgba(0,0,0,0.72)",
+  boxShadow: `0 0 60px ${BLUE}33, 0 0 2px ${BLUE}`,
+};
+
+function typed(text: string, frame: number, start: number, cps = 26): string {
+  const n = Math.max(0, Math.floor(((frame - start) / DEMO_FPS) * cps));
+  return text.slice(0, n);
+}
+
+// Scenes
+
+function Warp() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const speed = interpolate(frame, [0, 40, 70, 102], [14, 26, 6, 1.5], { extrapolateRight: "clamp" });
+  const streak = interpolate(frame, [0, 35, 70], [1, 1, 0], { extrapolateRight: "clamp" });
+  const title = spring({ frame: frame - 42, fps, config: { damping: 14 } });
+  const sub = spring({ frame: frame - 58, fps, config: { damping: 18 } });
+  return (
+    <AbsoluteFill>
+      <WarpField speed={speed} streak={streak} />
+      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", textAlign: "center" }}>
+        <h1 style={{ margin: 0, fontFamily: theme.display, fontSize: 150, lineHeight: 1, color: theme.white, opacity: title, transform: `scale(${0.8 + title * 0.2})` }}>
+          Your archive,
+          <br />
+          <span style={{ color: theme.white, textShadow: `0 0 30px ${BLUE}, 0 0 80px ${BLUE}` }}>in orbit.</span>
+        </h1>
+        <p style={{ marginTop: 40, fontFamily: theme.mono, fontSize: 30, letterSpacing: 4, color: "rgba(255,255,255,0.75)", opacity: sub }}>
+          NOTESTACK
+        </p>
+      </AbsoluteFill>
+      <Flare at={50} duration={30} y={46} />
+    </AbsoluteFill>
+  );
+}
+
+function Paste() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const url = typed("yourname.substack.com", frame, 18, 18);
+  const press = spring({ frame: frame - 62, fps, config: { damping: 10, mass: 0.5 } });
+  const ring = interpolate(frame, [64, 100], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" });
+  return (
+    <AbsoluteFill>
+      <WarpField speed={1.2} />
+      <Caption eyebrow="Step 01" title="Paste your Substack URL" />
+      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center" }}>
+        <div style={{ ...panel, display: "flex", alignItems: "center", gap: 18, padding: 14, width: 1100, borderRadius: 999, marginTop: 120 }}>
+          <div style={{ flex: 1, fontFamily: theme.body, fontSize: 40, color: url ? theme.white : "rgba(255,255,255,0.4)", paddingLeft: 30 }}>
+            {url || "yourname.substack.com"}
+            <span style={{ opacity: frame % 30 < 15 ? 1 : 0, color: BLUE }}>|</span>
+          </div>
+          <div
+            style={{
+              position: "relative",
+              padding: "24px 44px",
+              borderRadius: 999,
+              background: BLUE,
+              color: theme.white,
+              fontFamily: theme.body,
+              fontWeight: 600,
+              fontSize: 32,
+              transform: `scale(${1 - 0.06 * Math.sin(press * Math.PI)})`,
+              boxShadow: `0 0 ${30 + press * 40}px ${BLUE}`,
+            }}
+          >
+            Launch my archive
+            <div
+              style={{
+                position: "absolute",
+                inset: -ring * 60,
+                borderRadius: 999,
+                border: `2px solid ${BLUE}`,
+                opacity: 1 - ring,
+              }}
+            />
+          </div>
+        </div>
+      </AbsoluteFill>
+    </AbsoluteFill>
+  );
+}
+
+const POSTS = [
+  "On Pricing", "Writing Every Day", "The Paid Tier", "Why I Quit Twitter", "Notes on Craft", "Letters to Readers",
+  "The Long Game", "Small Audiences", "Habits Beat Talent", "Editing Myself", "A Year of Essays", "What Readers Want",
+];
+
+function Orbit() {
+  const frame = useCurrentFrame();
+  const { width, height, fps } = useVideoConfig();
+  const cx = width / 2 + 180;
+  const cy = height / 2 + 60;
+  const count = Math.floor(interpolate(frame, [20, 110], [0, 142], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }));
+  const planet = spring({ frame, fps, config: { damping: 20 } });
+  return (
+    <AbsoluteFill>
+      <WarpField speed={0.8} />
+      <Caption eyebrow="Step 02" title="Watch your posts come into orbit" />
+      <svg width={width} height={height} style={{ position: "absolute" }}>
+        <defs>
+          <radialGradient id="planet" cx="40%" cy="35%" r="70%">
+            <stop offset="0%" stopColor="#ffffff" stopOpacity="0.95" />
+            <stop offset="35%" stopColor={BLUE} />
+            <stop offset="100%" stopColor="#000000" />
+          </radialGradient>
+        </defs>
+        <circle cx={cx} cy={cy} r={150 * planet} fill="url(#planet)" style={{ filter: `drop-shadow(0 0 60px ${BLUE})` }} />
+        {[260, 360].map((r, i) => (
+          <ellipse key={r} cx={cx} cy={cy} rx={r * 1.6} ry={r * 0.45} fill="none" stroke={i ? "#ffffff" : BLUE} strokeOpacity={0.25} strokeWidth={2} />
+        ))}
+      </svg>
+      {POSTS.map((title, i) => {
+        const start = 8 + i * 6;
+        const p = interpolate(frame, [start, start + 36], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: ease });
+        const ring = i % 2 ? 360 : 260;
+        const angle = (i / POSTS.length) * Math.PI * 2 + frame * 0.012 * (i % 2 ? 1 : -1);
+        const tx = cx + Math.cos(angle) * ring * 1.6;
+        const ty = cy + Math.sin(angle) * ring * 0.45;
+        const fromX = width + 200;
+        const fromY = random(`py${i}`) * height;
+        const x = interpolate(p, [0, 1], [fromX, tx]);
+        const y = interpolate(p, [0, 1], [fromY, ty]);
+        const front = Math.sin(angle) > 0;
+        return (
+          <div
+            key={title}
+            style={{
+              ...panel,
+              position: "absolute",
+              left: x,
+              top: y,
+              transform: `translate(-50%, -50%) scale(${front ? 1 : 0.8})`,
+              padding: "12px 20px",
+              borderRadius: 12,
+              fontFamily: theme.body,
+              fontSize: 22,
+              color: theme.white,
+              opacity: p * (front ? 1 : 0.55),
+              zIndex: front ? 2 : 0,
+              whiteSpace: "nowrap",
+            }}
+          >
+            {title}
+          </div>
+        );
+      })}
+      <div style={{ position: "absolute", left: 140, bottom: 120, fontFamily: theme.mono, color: theme.white }}>
+        <span style={{ fontSize: 96, fontFamily: theme.display, textShadow: `0 0 30px ${BLUE}` }}>{count}</span>
+        <span style={{ fontSize: 28, marginLeft: 20, color: "rgba(255,255,255,0.7)", letterSpacing: 3 }}>POSTS IN ORBIT</span>
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+function Research() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const q = typed("What have I written about pricing?", frame, 10, 30);
+  const answer = spring({ frame: frame - 52, fps, config: { damping: 18 } });
+  const cite = spring({ frame: frame - 92, fps, config: { damping: 16 } });
+  const steps = ["Searching for pric(e|ing)|paid tier", "Reading On Pricing, lines 12 to 20", "Reading The Paid Tier, lines 4 to 9"];
+  return (
+    <AbsoluteFill>
+      <WarpField speed={0.6} count={260} />
+      <Caption eyebrow="Research" title="Ask your archive. Every answer cites you." />
+      <div style={{ position: "absolute", left: 140, right: 140, top: 360, display: "grid", gridTemplateColumns: "1.25fr 1fr", gap: 40 }}>
+        <div style={{ ...panel, padding: 36, display: "grid", gap: 22, alignContent: "start" }}>
+          <div style={{ justifySelf: "end", padding: "14px 22px", borderRadius: "18px 18px 4px 18px", background: `${BLUE}22`, border: `1px solid ${BLUE}66`, fontFamily: theme.body, fontSize: 30, color: theme.white }}>
+            {q || " "}
+          </div>
+          <div style={{ fontFamily: theme.mono, fontSize: 20, color: BLUE, display: "grid", gap: 6 }}>
+            {steps.map((s, i) => (
+              <span key={s} style={{ opacity: interpolate(frame, [26 + i * 8, 34 + i * 8], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }}>
+                {s}
+              </span>
+            ))}
+          </div>
+          <p style={{ margin: 0, fontFamily: theme.body, fontSize: 30, lineHeight: 1.5, color: theme.white, opacity: answer, transform: `translateY(${(1 - answer) * 16}px)` }}>
+            You raised prices twice and the <b>paid tier doubled</b>{" "}
+            <Marker n={1} glow={cite} /> because readers took the work more seriously{" "}
+            <Marker n={2} glow={cite} />.
+          </p>
+        </div>
+        <div style={{ ...panel, padding: 30, opacity: cite, transform: `translateX(${(1 - cite) * 60}px)`, alignSelf: "start" }}>
+          <p style={{ margin: 0, fontFamily: theme.mono, fontSize: 20, color: BLUE, letterSpacing: 2 }}>[1] ON PRICING · LINES 12 TO 14</p>
+          {["The paid tier doubled after I", "raised the price to ten dollars.", "Readers took the work seriously."].map((l, i) => (
+            <div key={l} style={{ display: "flex", gap: 18, marginTop: 14, fontFamily: theme.body, fontSize: 26, color: theme.white, background: `${BLUE}26`, boxShadow: `inset 4px 0 0 ${BLUE}`, padding: "6px 12px", borderRadius: 8 }}>
+              <span style={{ fontFamily: theme.mono, fontSize: 18, color: "rgba(255,255,255,0.5)", paddingTop: 5 }}>{12 + i}</span>
+              {l}
+            </div>
+          ))}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+function Marker({ n, glow }: { n: number; glow: number }) {
+  return (
+    <span style={{ display: "inline-block", minWidth: 34, padding: "0 8px", borderRadius: 8, fontFamily: theme.mono, fontSize: 20, verticalAlign: "super", color: theme.white, background: `${BLUE}${glow > 0.5 ? "" : "55"}`, border: `1px solid ${BLUE}`, boxShadow: `0 0 ${glow * 24}px ${BLUE}`, textAlign: "center" }}>
+      {n}
+    </span>
+  );
+}
+
+function Audio() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const lines = [
+    { who: "A", text: "So the big idea here is that price is a signal." },
+    { who: "B", text: "Right, and she has the numbers: the paid tier doubled." },
+    { who: "A", text: "Which she wrote about back in March, in On Pricing." },
+  ];
+  const active = Math.min(lines.length - 1, Math.floor(Math.max(0, frame - 20) / 34));
+  return (
+    <AbsoluteFill>
+      <WarpField speed={0.7} count={260} />
+      <Caption eyebrow="Audio overview" title="Two hosts. Your ideas. Grounded." />
+      <div style={{ position: "absolute", left: 140, right: 140, top: 380, display: "grid", gap: 40 }}>
+        <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 10, height: 220 }}>
+          {Array.from({ length: 64 }).map((_, i) => {
+            const v = Math.abs(Math.sin(frame * 0.35 + i * 0.55) * Math.cos(frame * 0.11 + i * 0.21));
+            const env = spring({ frame: frame - 6, fps, config: { damping: 20 } });
+            return <div key={i} style={{ width: 14, height: 12 + v * 200 * env, borderRadius: 7, background: i % 2 ? theme.white : BLUE, boxShadow: `0 0 18px ${BLUE}` }} />;
+          })}
+        </div>
+        <div style={{ display: "grid", gap: 14 }}>
+          {lines.map((l, i) => {
+            const on = i === active;
+            const seen = i <= active;
+            return (
+              <div key={i} style={{ display: "flex", gap: 22, alignItems: "center", opacity: seen ? (on ? 1 : 0.45) : 0, fontFamily: theme.body, fontSize: 34, color: theme.white }}>
+                <span style={{ width: 52, height: 52, borderRadius: "50%", display: "grid", placeItems: "center", fontFamily: theme.mono, fontSize: 22, background: l.who === "A" ? BLUE : theme.white, color: l.who === "A" ? theme.white : theme.black, boxShadow: on ? `0 0 26px ${BLUE}` : "none" }}>
+                  {l.who}
+                </span>
+                {l.text}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+function LaunchKit() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const cards = [
+    { label: "X THREAD", body: "I doubled my price. My paid tier doubled too. Here is what I learned." },
+    { label: "LINKEDIN", body: "Most writers underprice. I did for two years. Then I ran an experiment." },
+    { label: "SUBSTACK NOTES", body: "Price is a signal. Readers told me so, with their wallets." },
+    { label: "BLUESKY", body: "Raised my price to $10. Paid readers went up, not down." },
+  ];
+  return (
+    <AbsoluteFill>
+      <WarpField speed={0.9} count={260} />
+      <Caption eyebrow="Launch Kit" title="One post. Every platform. Your voice." />
+      <div style={{ position: "absolute", left: 140, right: 140, top: 380, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 28 }}>
+        {cards.map((c, i) => {
+          const s = spring({ frame: frame - 10 - i * 7, fps, config: { damping: 14 } });
+          const rot = interpolate(s, [0, 1], [(i - 1.5) * 14, 0]);
+          return (
+            <div key={c.label} style={{ ...panel, padding: 28, minHeight: 300, opacity: s, transform: `translateY(${(1 - s) * 180}px) rotate(${rot}deg)`, display: "grid", alignContent: "start", gap: 18 }}>
+              <span style={{ fontFamily: theme.mono, fontSize: 20, letterSpacing: 3, color: BLUE }}>{c.label}</span>
+              <span style={{ fontFamily: theme.body, fontSize: 28, lineHeight: 1.4, color: theme.white }}>{c.body}</span>
+            </div>
+          );
+        })}
+      </div>
+      <div style={{ position: "absolute", left: 140, bottom: 90, display: "flex", gap: 16, fontFamily: theme.mono, fontSize: 22, color: "rgba(255,255,255,0.7)", letterSpacing: 2 }}>
+        {["HOOKS", "SEO PACK", "CAROUSEL", "QUOTE CARDS"].map((t, i) => (
+          <span key={t} style={{ padding: "10px 18px", border: `1px solid ${BLUE}88`, borderRadius: 999, opacity: interpolate(frame, [50 + i * 6, 60 + i * 6], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }}>
+            {t}
+          </span>
+        ))}
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+function Launchpad() {
+  const frame = useCurrentFrame();
+  const { width, height } = useVideoConfig();
+  const lit = [2, 5, 9, 12, 16, 19, 23, 26];
+  const rocket = interpolate(frame, [70, 112], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp", easing: Easing.in(Easing.cubic) });
+  return (
+    <AbsoluteFill>
+      <WarpField speed={0.8} count={260} />
+      <Caption eyebrow="Launchpad" title="Schedule it. Watch it lift off." />
+      <div style={{ position: "absolute", left: 140, top: 360, display: "grid", gridTemplateColumns: "repeat(7, 120px)", gap: 12 }}>
+        {Array.from({ length: 28 }).map((_, i) => {
+          const on = lit.includes(i) && frame > 8 + lit.indexOf(i) * 6;
+          return (
+            <div key={i} style={{ height: 88, borderRadius: 12, border: `1px solid ${on ? BLUE : "rgba(255,255,255,0.14)"}`, background: on ? `${BLUE}33` : "rgba(0,0,0,0.5)", boxShadow: on ? `0 0 22px ${BLUE}88` : "none", padding: 10, fontFamily: theme.mono, fontSize: 16, color: "rgba(255,255,255,0.6)" }}>
+              {i + 1}
+              {on && <div style={{ marginTop: 18, height: 10, borderRadius: 5, background: theme.white, boxShadow: `0 0 12px ${BLUE}` }} />}
+            </div>
+          );
+        })}
+      </div>
+      <svg width={width} height={height} style={{ position: "absolute" }}>
+        <defs>
+          <linearGradient id="trail" x1="0" y1="1" x2="0" y2="0">
+            <stop offset="0%" stopColor={BLUE} stopOpacity="0" />
+            <stop offset="70%" stopColor={BLUE} stopOpacity="0.8" />
+            <stop offset="100%" stopColor="#ffffff" stopOpacity="1" />
+          </linearGradient>
+        </defs>
+        {(() => {
+          // A launch arc from the lower right: curved trail, hot head, exhaust sparks.
+          const pt = (u: number) => ({ x: 1360 + 300 * u + 120 * u * u, y: 1000 - 1050 * u + 120 * u * (1 - u) });
+          const head = pt(rocket);
+          const tail = pt(Math.max(0, rocket - 0.35));
+          const path = Array.from({ length: 24 }, (_, i) => pt(Math.max(0, rocket - 0.35) + ((rocket - Math.max(0, rocket - 0.35)) * i) / 23));
+          return (
+            <>
+              <circle cx={1360} cy={1000} r={140 * Math.min(1, rocket * 4)} fill={BLUE} opacity={0.25 * (1 - rocket)} style={{ filter: "blur(30px)" }} />
+              {rocket > 0 && (
+                <polyline points={path.map((q) => `${q.x},${q.y}`).join(" ")} fill="none" stroke="url(#trail)" strokeWidth={10} strokeLinecap="round" style={{ filter: `drop-shadow(0 0 18px ${BLUE})` }} />
+              )}
+              {rocket > 0 &&
+                Array.from({ length: 16 }).map((_, i) => {
+                  const u = Math.max(0, rocket - random(`s${i}`) * 0.3);
+                  const q = pt(u);
+                  const jitter = (random(`j${i}`) - 0.5) * 60;
+                  return <circle key={i} cx={q.x + jitter} cy={q.y + 20} r={2 + random(`k${i}`) * 3} fill="#ffffff" opacity={0.3 + 0.5 * random(`o${i}`)} />;
+                })}
+              {rocket > 0 && <circle cx={head.x} cy={head.y} r={16} fill="#ffffff" style={{ filter: `drop-shadow(0 0 28px ${BLUE}) drop-shadow(0 0 8px #ffffff)` }} />}
+              {rocket === 0 && <circle cx={tail.x} cy={tail.y} r={10} fill="#ffffff" opacity={interpolate(frame, [30, 60], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" })} style={{ filter: `drop-shadow(0 0 16px ${BLUE})` }} />}
+            </>
+          );
+        })()}
+      </svg>
+      <div style={{ position: "absolute", left: 1180, top: 400, fontFamily: theme.mono, color: theme.white, opacity: interpolate(frame, [20, 40], [0, 1], { extrapolateLeft: "clamp", extrapolateRight: "clamp" }) }}>
+        <p style={{ margin: 0, fontSize: 22, letterSpacing: 4, color: BLUE }}>NEXT LAUNCH</p>
+        <p style={{ margin: "10px 0 0", fontFamily: theme.display, fontSize: 88, textShadow: `0 0 30px ${BLUE}` }}>
+          T-{String(Math.max(0, 10 - Math.floor(frame / 7))).padStart(2, "0")}
+        </p>
+        <p style={{ margin: "6px 0 0", fontSize: 22, color: "rgba(255,255,255,0.7)", letterSpacing: 2 }}>X · LINKEDIN · BLUESKY</p>
+      </div>
+    </AbsoluteFill>
+  );
+}
+
+function Outro() {
+  const frame = useCurrentFrame();
+  const { fps } = useVideoConfig();
+  const s = spring({ frame: frame - 8, fps, config: { damping: 14 } });
+  const cta = spring({ frame: frame - 30, fps, config: { damping: 18 } });
+  return (
+    <AbsoluteFill>
+      <WarpField speed={interpolate(frame, [0, 60, 114], [0.5, 2, 12])} streak={interpolate(frame, [70, 114], [0, 1], { extrapolateLeft: "clamp" })} />
+      <AbsoluteFill style={{ justifyContent: "center", alignItems: "center", textAlign: "center", gap: 30 }}>
+        <div style={{ width: 120, height: 120, borderRadius: 30, background: theme.white, display: "grid", placeItems: "center", opacity: s, transform: `scale(${s})`, boxShadow: `0 0 80px ${BLUE}` }}>
+          <div style={{ width: 44, height: 44, borderRadius: "50%", background: theme.black, boxShadow: `18px -18px 0 -10px ${theme.black}` }} />
+        </div>
+        <h1 style={{ margin: 0, fontFamily: theme.display, fontSize: 120, color: theme.white, opacity: s, textShadow: `0 0 40px ${BLUE}` }}>Notestack</h1>
+        <p style={{ margin: 0, fontFamily: theme.body, fontSize: 40, color: "rgba(255,255,255,0.8)", opacity: cta }}>Your archive, in orbit.</p>
+        <p style={{ margin: 0, padding: "18px 40px", borderRadius: 999, background: BLUE, color: theme.white, fontFamily: theme.body, fontWeight: 600, fontSize: 32, opacity: cta, boxShadow: `0 0 40px ${BLUE}` }}>
+          Free during early access
+        </p>
+      </AbsoluteFill>
+      <Flare at={20} duration={34} y={42} />
+    </AbsoluteFill>
+  );
+}
+
+const RENDER: Record<(typeof SCENES)[number]["id"], () => JSX.Element> = {
+  warp: Warp,
+  paste: Paste,
+  orbit: Orbit,
+  research: Research,
+  audio: Audio,
+  launchkit: LaunchKit,
+  launchpad: Launchpad,
+  outro: Outro,
+};
+
+export function LandingDemo() {
+  let cursor = 0;
+  return (
+    <AbsoluteFill style={{ backgroundColor: theme.black }}>
+      <SoundTrack src={staticFile("demo-vo/ambience.wav")} volume={0.32} />
+      {SCENES.map((scene, i) => {
+        const from = cursor;
+        cursor += S(scene.len - XFADE);
+        const Scene = RENDER[scene.id];
+        return (
+          <Sequence key={scene.id} from={from} durationInFrames={S(scene.len)} name={scene.id}>
+            <FadeScene len={scene.len}>
+              <Scene />
+            </FadeScene>
+            <Sequence from={S(scene.vo)} name={`vo-${scene.id}`}>
+              <SoundTrack src={staticFile(`demo-vo/${scene.id}.mp3`)} volume={1} />
+            </Sequence>
+            {i === 0 && null}
+          </Sequence>
+        );
+      })}
+    </AbsoluteFill>
+  );
+}