feat: adopt almanac frontend

Co-authored-by: Codex <noreply@openai.com>

README.md

@@ -22,9 +22,8 @@ tags:
 # Hackathon Advisor
 
 **Hackathon Advisor** is a text-first project advisor for the Build Small Hackathon. The user-facing experience is
-**The Unwritten Almanac**: Mothback, an archivist of unwritten project pages, compares your idea against real Spaces in
-the `build-small-hackathon` organization, finds under-explored territory, scores the idea, and drafts a practical build
-plan.
+**The Unwritten Almanac**: a journal-style workspace that compares your idea against real Spaces in the
+`build-small-hackathon` organization, finds under-explored territory, scores the idea, and drafts a practical build plan.
 
 The current milestone is a deployable, deterministic vertical slice:
 

hackathon_advisor/agent.py

@@ -344,7 +344,7 @@ class AdvisorEngine:
         profile[field] = str(call.arguments["value"])
         state["profile"] = profile
         tool_events.append(ToolEvent("update_profile", f"Remembered {field}."))
-        response = f"Mothback adds a margin note: {field} = {profile[field]}."
+        response = f"Profile updated: {field} = {profile[field]}."
         return self._result(normalized, corrections, response, state, tool_events, [], [], None, [], {})
 
     def _target_turn(
@@ -463,9 +463,9 @@ class AdvisorEngine:
     def _opening_response(self, projects: list[Project]) -> str:
         names = ", ".join(project.title for project in projects[:4])
         return (
-            "Mothback opens the Almanac. The Wood is already inked with "
+            "The current map is open with "
             f"{len(self.index.projects)} project pages; the brightest current echoes include {names}. "
-            "Give me one project instinct and I will test whether it bleeds red or blooms gold."
+            "Describe one project idea and I will test where it overlaps, where it is quiet, and what to build next."
         )
 
     def _overlap_response(self, idea: Idea, projects: list[Project], score: ScoreCard) -> str:
@@ -506,7 +506,7 @@ class AdvisorEngine:
     def _plan_response(self, idea: Idea, score: ScoreCard, plan: list[str]) -> str:
         steps = " ".join(f"{idx + 1}. {step}" for idx, step in enumerate(plan))
         return (
-            f"Mothback presses the wax for {idea.title}: {score.overall}/10, {score.verdict}. "
+            f"The wax seal for {idea.title} reads {score.overall}/10, {score.verdict}. "
             f"The build path is: {steps}"
         )
 
@@ -530,7 +530,7 @@ class AdvisorEngine:
             "title": idea.title,
             "verdict": score.verdict,
             "overall": score.overall,
-            "caption": f"Mothback inked my Build Small fate page: {idea.title} - {score.verdict}.",
+            "caption": f"Idea page: {idea.title} - {score.verdict}.",
             "seal": score.to_dict(),
             "wood_map": build_wood_map(self.index, idea, score),
         }

hackathon_advisor/model_runtime.py

@@ -4,6 +4,7 @@ from dataclasses import dataclass
 import os
 from typing import Any, Protocol
 
+from hackathon_advisor.tools import idea_from_text
 from hackathon_advisor.tool_contracts import ToolResolution, resolve_tool_call, tool_schemas
 
 
@@ -53,7 +54,12 @@ class RuleBasedPlanner:
         elif any(term in lower for term in ("search", "similar", "already", "existing", "overlap", "echo")):
             output = f'<function name="search_projects">{{"query":{_json_string(text)}}}</function>'
         else:
-            output = f'<function name="save_idea">{{"title":{_json_string(_title(text))},"pitch":{_json_string(text)}}}</function>'
+            title, pitch = idea_from_text(text)
+            output = (
+                f'<function name="save_idea">'
+                f'{{"title":{_json_string(title)},"pitch":{_json_string(pitch)}}}'
+                f"</function>"
+            )
         return resolve_tool_call(output, fallback_query=text)
 
 

hackathon_advisor/tools.py

@@ -175,10 +175,16 @@ def idea_from_text(text: str) -> tuple[str, str]:
         if cleaned.lower().startswith(prefix):
             title = cleaned[len(prefix) :].strip(" :-")
             break
-    title = title[:64].strip(" .") or "Unwritten Page"
-    if len(title) < len(cleaned):
+    pitch = cleaned
+    explicit_pitch = False
+    if " -- " in title:
+        title, pitch = (part.strip() for part in title.split(" -- ", 1))
+        explicit_pitch = True
+    raw_title = title
+    title = raw_title[:64].strip(" .") or "Unwritten Page"
+    if len(raw_title) > 64 or (not explicit_pitch and len(title) < len(cleaned)):
         title = f"{title[:58].strip()}..."
-    return _display_title(title), cleaned
+    return _display_title(title), pitch
 
 
 def _is_new_idea(current: Idea, title: str, pitch: str) -> bool:

static/app.js

@@ -16,6 +16,13 @@ const planEl = document.querySelector("#plan");
 const provenanceEl = document.querySelector("#provenance");
 const verdictEl = document.querySelector("#verdict");
 const overallEl = document.querySelector("#overall");
+const sealEl = document.querySelector("#seal");
+const sealVerdictEl = document.querySelector("#seal-verdict");
+const sealCopyEl = document.querySelector("#seal-copy");
+const verdictStampEl = document.querySelector("#verdict-stamp");
+const spreadEl = document.querySelector("#spread");
+const ideaCountEl = document.querySelector("#idea-count");
+const targetCountEl = document.querySelector("#target-count");
 const demoButton = document.querySelector("#load-demo");
 const exportButton = document.querySelector("#export-artifact");
 const exportNotesButton = document.querySelector("#export-notes");
@@ -49,6 +56,16 @@ form.addEventListener("submit", async (event) => {
   await runTurn(message);
 });
 
+input.addEventListener("keydown", (event) => {
+  if (event.key !== "Enter" || event.shiftKey) return;
+  event.preventDefault();
+  form.requestSubmit();
+});
+
+document.querySelectorAll(".mobile-nav [data-tab]").forEach((button) => {
+  button.addEventListener("click", () => setActiveTab(button.dataset.tab || "page"));
+});
+
 document.querySelectorAll("[data-command]").forEach((button) => {
   button.addEventListener("click", async () => {
     await runTurn(button.dataset.command);
@@ -81,6 +98,7 @@ targetsEl.addEventListener("change", (event) => {
   session.targets = targetOptions.filter((option) => checked.has(option));
   syncCurrentIdeaTargets();
   saveSession();
+  renderTargets(session.targets);
   renderIdeas(session.ideas || []);
 });
 
@@ -104,8 +122,16 @@ ideasEl.addEventListener("click", (event) => {
   selectIdea(card.dataset.ideaId || "");
 });
 
+whitespaceEl.addEventListener("click", async (event) => {
+  const card = event.target.closest("[data-gap-prompt]");
+  if (!(card instanceof HTMLButtonElement) || !whitespaceEl.contains(card)) return;
+  if (card.disabled) return;
+  await runTurn(card.dataset.gapPrompt || "");
+});
+
 async function runTurn(message) {
   bumpSessionRevision();
+  setActiveTab("page");
   input.value = "";
   submit.disabled = true;
   setCommandDisabled(true);
@@ -177,8 +203,7 @@ function handleBootstrapError(error) {
   corrections.textContent = "Reload the page to try again.";
   provenanceEl.textContent = "index unavailable";
   renderScore(null);
-  verdictEl.textContent = "UNWRITTEN";
-  overallEl.textContent = "0.0";
+  setVerdictDisplay("INDEX CLOSED", 0, null);
   renderWoodMap(null);
   renderTargets([]);
   renderProfile({});
@@ -195,6 +220,44 @@ function defaultSession(data = bootstrapData) {
   };
 }
 
+function setActiveTab(tab) {
+  if (!spreadEl) return;
+  const next = ["page", "proof", "almanac"].includes(tab) ? tab : "page";
+  spreadEl.dataset.tab = next;
+  document.querySelectorAll(".mobile-nav [data-tab]").forEach((button) => {
+    button.classList.toggle("active", button.dataset.tab === next);
+  });
+}
+
+function setVerdictDisplay(verdict = "READY", overall = 0, score = null) {
+  const text = String(verdict || "READY");
+  const isEcho = text.startsWith("ECHO");
+  const isUnwritten = text.startsWith("UNWRITTEN");
+  const numericOverall = Number(overall || score?.overall || 0);
+
+  verdictEl.textContent = text;
+  overallEl.textContent = numericOverall.toFixed(1);
+  sealEl.classList.toggle("echo", isEcho);
+  sealEl.classList.toggle("unwritten", isUnwritten);
+
+  sealVerdictEl.textContent = text;
+  sealVerdictEl.classList.toggle("echo", isEcho);
+  sealVerdictEl.classList.toggle("unwritten", isUnwritten);
+  sealVerdictEl.classList.toggle("ready", !isEcho && !isUnwritten);
+
+  verdictStampEl.classList.toggle("verdict-echo", isEcho);
+  verdictStampEl.classList.toggle("verdict-unwritten", isUnwritten);
+  verdictStampEl.classList.toggle("verdict-ready", !isEcho && !isUnwritten);
+
+  if (!score) {
+    sealCopyEl.textContent = text === "INDEX CLOSED" ? "The project map did not load." : "No idea has been scored yet.";
+  } else if (isEcho) {
+    sealCopyEl.textContent = "Nearby projects already cover parts of this idea.";
+  } else {
+    sealCopyEl.textContent = "This idea sits in a quieter part of the current map.";
+  }
+}
+
 function bumpSessionRevision() {
   sessionRevision += 1;
   return sessionRevision;
@@ -205,9 +268,26 @@ function isCurrentSessionRevision(revision) {
 }
 
 function restoreExportButtonLabels() {
-  exportNotesButton.textContent = "Notes";
-  exportChapterButton.textContent = "Chapter";
-  exportButton.textContent = PNG_EXPORT_LABEL;
+  setActionButtonLabel(exportNotesButton, "Notes");
+  setActionButtonLabel(exportChapterButton, "Chapter");
+  setActionButtonLabel(exportButton, PNG_EXPORT_LABEL);
+}
+
+function actionButtonLabel(button) {
+  return button?.dataset.actionLabel || button?.textContent.trim() || "";
+}
+
+function setActionButtonLabel(button, label) {
+  if (!button) return;
+  button.dataset.actionLabel = label;
+  const textNode = Array.from(button.childNodes).find(
+    (node) => node.nodeType === Node.TEXT_NODE && node.textContent.trim(),
+  );
+  if (textNode) {
+    textNode.textContent = ` ${label}`;
+  } else {
+    button.append(document.createTextNode(` ${label}`));
+  }
 }
 
 function setSessionControlsDisabled(disabled) {
@@ -221,6 +301,9 @@ function setSessionControlsDisabled(disabled) {
   ideasEl.querySelectorAll("button[data-idea-id]").forEach((idea) => {
     idea.disabled = disabled;
   });
+  whitespaceEl.querySelectorAll("button[data-gap-prompt]").forEach((gap) => {
+    gap.disabled = disabled;
+  });
 }
 
 function resetSession() {
@@ -240,8 +323,7 @@ function resetSession() {
   renderTargets(session.targets);
   renderProfile(session.profile);
   renderScore(null);
-  verdictEl.textContent = "UNWRITTEN";
-  overallEl.textContent = "0.0";
+  setVerdictDisplay("READY", 0, null);
   renderWoodMap(null);
   renderIdeas([]);
   renderPlan([]);
@@ -257,6 +339,7 @@ function resetSession() {
 
 async function loadDemoSession() {
   bumpSessionRevision();
+  setActiveTab("page");
   submit.disabled = true;
   setCommandDisabled(true);
   setSessionControlsDisabled(true);
@@ -290,8 +373,7 @@ function applyDemoSession(data) {
   ink.textContent = data.response || "Demo rehearsal loaded.";
   ink.classList.remove("thinking");
   if (data.score) {
-    verdictEl.textContent = data.score.verdict;
-    overallEl.textContent = Number(data.score.overall).toFixed(1);
+    setVerdictDisplay(data.score.verdict, data.score.overall, data.score);
     renderScore(data.score);
     ink.classList.toggle("bleed", data.score.verdict.startsWith("ECHO"));
     ink.classList.toggle("gold", data.score.verdict.startsWith("UNWRITTEN"));
@@ -329,8 +411,7 @@ function renderRestoredSession(data) {
   if (score) {
     renderScore(score);
     const verdict = currentArtifact?.verdict || score.verdict || "UNWRITTEN";
-    verdictEl.textContent = verdict;
-    overallEl.textContent = Number(currentArtifact?.overall || score.overall || 0).toFixed(1);
+    setVerdictDisplay(verdict, currentArtifact?.overall || score.overall || 0, score);
     ink.classList.toggle("bleed", verdict.startsWith("ECHO"));
     ink.classList.toggle("gold", verdict.startsWith("UNWRITTEN"));
     renderWoodMap(currentArtifact?.wood_map || null);
@@ -342,6 +423,7 @@ function renderRestoredSession(data) {
     exportButton.disabled = !currentArtifact;
   } else {
     renderScore(null);
+    setVerdictDisplay("READY", 0, null);
     renderWoodMap(null);
     renderProjects(data.top_projects || []);
     exportButton.disabled = true;
@@ -424,6 +506,7 @@ function clearSavedSession() {
 
 function renderTargets(selectedTargets) {
   const selected = new Set(selectedTargets || []);
+  if (targetCountEl) targetCountEl.textContent = selected.size;
   targetsEl.innerHTML = "";
   if (!targetOptions.length) {
     targetsEl.innerHTML = `<div class="empty">No goals loaded.</div>`;
@@ -432,7 +515,7 @@ function renderTargets(selectedTargets) {
   for (const option of targetOptions) {
     const profile = targetProfileById.get(option) || { label: option, description: "" };
     const label = document.createElement("label");
-    label.className = "target-toggle";
+    label.className = `target-toggle goal ${selected.has(option) ? "on" : ""}`;
     label.innerHTML = `
       <input
         type="checkbox"
@@ -441,6 +524,9 @@ function renderTargets(selectedTargets) {
         ${sessionControlsLocked ? "disabled" : ""}
         ${selected.has(option) ? "checked" : ""}
       />
+      <span class="check" aria-hidden="true">
+        <svg class="icon"><use href="#icon-check"></use></svg>
+      </span>
       <span class="target-copy">
         <strong>${escapeHtml(profile.label)}</strong>
         ${profile.description ? `<small>${escapeHtml(profile.description)}</small>` : ""}
@@ -464,6 +550,7 @@ function renderProfile(profile) {
       <input
         data-profile-field="${escapeAttribute(field)}"
         value="${escapeAttribute(profile?.[field] || "")}"
+        placeholder="${escapeAttribute(fieldPlaceholder(field))}"
         autocomplete="off"
         ${sessionControlsLocked ? "disabled" : ""}
       />
@@ -510,8 +597,7 @@ function handleEvent(event) {
     renderIdeas(session.ideas || []);
     renderPlan(event.plan || []);
     if (event.score) {
-      verdictEl.textContent = event.score.verdict;
-      overallEl.textContent = Number(event.score.overall).toFixed(1);
+      setVerdictDisplay(event.score.verdict, event.score.overall, event.score);
       renderScore(event.score);
       ink.classList.toggle("bleed", event.score.verdict.startsWith("ECHO"));
       ink.classList.toggle("gold", event.score.verdict.startsWith("UNWRITTEN"));
@@ -528,25 +614,31 @@ function handleEvent(event) {
 }
 
 function renderIdeas(ideas) {
+  if (ideaCountEl) ideaCountEl.textContent = ideas.length;
   ideasEl.innerHTML = "";
   if (!ideas.length) {
-    ideasEl.innerHTML = `<div class="empty">No pages written.</div>`;
+    ideasEl.innerHTML = `<div class="empty">Your idea board is empty. Write an idea or open a gap.</div>`;
     return;
   }
   for (const idea of visibleIdeas(ideas)) {
     const score = idea.score?.overall ? Number(idea.score.overall).toFixed(1) : "0.0";
     const targets = (idea.targets || []).slice(0, 3).map(targetDisplayName).join(" · ");
     const selected = idea.id === session.current_idea_id;
+    const verdict = idea.score?.verdict || "DRAFT";
+    const isEcho = String(verdict).startsWith("ECHO");
     const item = document.createElement("button");
     item.type = "button";
-    item.className = `idea ${selected ? "current" : ""}`;
+    item.className = `idea idea-card ${selected ? "current" : ""} ${isEcho ? "bleed" : ""}`;
     item.disabled = sessionControlsLocked;
     item.dataset.ideaId = idea.id || "";
     item.setAttribute("aria-pressed", selected ? "true" : "false");
     item.innerHTML = `
-      <strong>${escapeHtml(idea.title)}</strong>
+      <div class="ihead">
+        <strong>${escapeHtml(idea.title)}</strong>
+        <span class="iscore">${score}</span>
+      </div>
       <p>${escapeHtml((idea.pitch || "").slice(0, 120))}</p>
-      <span>${escapeHtml(idea.score?.verdict || "DRAFT")} · ${score}</span>
+      <span class="iverdict ${isEcho ? "echo" : "unwritten"}">${escapeHtml(verdict)}</span>
       ${targets ? `<small>${escapeHtml(targets)}</small>` : ""}
     `;
     ideasEl.append(item);
@@ -576,8 +668,7 @@ function selectIdea(ideaId) {
   }
   const score = idea.score || null;
   if (score) {
-    verdictEl.textContent = score.verdict || "DRAFT";
-    overallEl.textContent = Number(score.overall || 0).toFixed(1);
+    setVerdictDisplay(score.verdict || "DRAFT", score.overall || 0, score);
     renderScore(score);
     ink.classList.toggle("bleed", String(score.verdict || "").startsWith("ECHO"));
     ink.classList.toggle("gold", String(score.verdict || "").startsWith("UNWRITTEN"));
@@ -605,19 +696,19 @@ function targetDisplayName(target) {
 
 function renderScore(score) {
   const rows = [
-    ["Originality", score?.originality || 0],
+    ["Original", score?.originality || 0],
     ["Delight", score?.delight || 0],
     ["AI Need", score?.ai_necessity || 0],
     ["Feasible", score?.feasibility || 0],
-    ["Prize Fit", score?.prize_fit || 0],
+    ["Goal Fit", score?.prize_fit || 0],
   ];
   scoreEl.innerHTML = rows
     .map(
       ([label, value]) => `
-        <div class="score-row">
-          <span>${label}</span>
-          <meter min="0" max="10" value="${value}"></meter>
-          <strong>${value}</strong>
+        <div class="quad">
+          <span class="ql">${label}</span>
+          <span class="qbar"><span class="qfill" style="width: ${Number(value) * 10}%"></span></span>
+          <span class="qv">${value}</span>
         </div>
       `,
     )
@@ -627,14 +718,14 @@ function renderScore(score) {
 function renderWoodMap(map) {
   woodMapEl.innerHTML = "";
   if (!map?.dots?.length) {
-    woodMapEl.innerHTML = `<div class="empty">No page has been placed yet.</div>`;
+    woodMapEl.innerHTML = `<div class="wood"><div class="empty wood-empty">No idea has been placed yet.</div></div>`;
     return;
   }
   const field = document.createElement("div");
-  field.className = "wood-map-field";
+  field.className = "wood";
   for (const dot of map.dots) {
     const marker = document.createElement(dot.url ? "a" : "span");
-    const verdictClass = dot.kind === "idea" && String(dot.verdict || "").startsWith("ECHO") ? "echo-idea" : "";
+    const verdictClass = dot.kind === "idea" && String(dot.verdict || "").startsWith("ECHO") ? "bleed" : "";
     marker.className = `wood-dot ${dot.kind || "inked"} ${verdictClass}`.trim();
     marker.style.left = `${boundedPercent(dot.x)}%`;
     marker.style.top = `${boundedPercent(dot.y)}%`;
@@ -649,10 +740,17 @@ function renderWoodMap(map) {
     }
     field.append(marker);
   }
+  const legend = document.createElement("div");
+  legend.className = "wood-legend";
+  legend.innerHTML = `
+    <span><i style="background: var(--leaf)"></i> You</span>
+    <span><i style="background: var(--oxblood)"></i> Echo</span>
+    <span><i style="background: rgba(73, 49, 22, 0.34)"></i> Indexed</span>
+  `;
   const caption = document.createElement("p");
-  caption.className = "wood-map-caption";
+  caption.className = "wood-cap";
   caption.textContent = map.caption || "Your page is plotted against the current Wood.";
-  woodMapEl.append(field, caption);
+  woodMapEl.append(field, legend, caption);
 }
 
 function renderProjects(projects) {
@@ -663,7 +761,7 @@ function renderProjects(projects) {
   }
   for (const project of projects.slice(0, 5)) {
     const item = document.createElement("a");
-    item.className = "project";
+    item.className = "project echo-item";
     item.href = project.url;
     item.target = "_blank";
     item.rel = "noreferrer";
@@ -684,7 +782,7 @@ function renderCitations(echoes) {
   for (const echo of echoes.slice(0, 5)) {
     const project = echo.project || {};
     const item = document.createElement("a");
-    item.className = "project citation";
+    item.className = "project echo-item citation";
     item.href = project.url || project.host || "#";
     item.target = "_blank";
     item.rel = "noreferrer";
@@ -693,7 +791,7 @@ function renderCitations(echoes) {
     item.innerHTML = `
       <strong>Page ${escapeHtml(echo.page_number || "?")} · ${escapeHtml(project.title || project.id || "Untitled")}</strong>
       <p>${escapeHtml(project.summary || project.id || "")}</p>
-      <span>${Number(echo.score || 0).toFixed(3)} · ${escapeHtml(matched)}</span>
+      <span class="matched">${Number(echo.score || 0).toFixed(3)} · ${escapeHtml(matched)}</span>
     `;
     projectsEl.append(item);
   }
@@ -706,11 +804,15 @@ function renderWhitespace(items) {
     return;
   }
   for (const item of items.slice(0, 4)) {
-    const gap = document.createElement("div");
-    gap.className = "gap";
+    const gap = document.createElement("button");
+    gap.type = "button";
+    gap.className = "gap gap-item";
+    gap.disabled = sessionControlsLocked;
+    gap.dataset.gapPrompt = `idea: ${item.label} -- ${item.pitch}`;
     gap.innerHTML = `
       <strong>${escapeHtml(item.label)}</strong>
       <p>${escapeHtml(item.pitch)}</p>
+      <span class="use">Use this direction</span>
     `;
     whitespaceEl.append(gap);
   }
@@ -804,9 +906,9 @@ async function exportChapter() {
 async function exportMarkdown({ endpoint, filename, button, busyLabel, pendingLabel, successLabel }) {
   if (!button || button.disabled) return;
   const revision = sessionRevision;
-  const idleLabel = button.textContent;
+  const idleLabel = actionButtonLabel(button);
   button.disabled = true;
-  button.textContent = busyLabel;
+  setActionButtonLabel(button, busyLabel);
   session.ui_status = pendingLabel;
   corrections.textContent = session.ui_status;
   saveSession();
@@ -827,7 +929,7 @@ async function exportMarkdown({ endpoint, filename, button, busyLabel, pendingLa
     session.ui_status = `Export failed: ${error.message}`;
     corrections.textContent = session.ui_status;
   } finally {
-    button.textContent = idleLabel;
+    setActionButtonLabel(button, idleLabel);
     if (!isCurrentSessionRevision(revision)) return;
     saveSession();
     setCommandDisabled(false);
@@ -835,9 +937,9 @@ async function exportMarkdown({ endpoint, filename, button, busyLabel, pendingLa
 }
 
 function exportArtifact(artifact) {
-  const idleLabel = exportButton.textContent;
+  const idleLabel = actionButtonLabel(exportButton);
   exportButton.disabled = true;
-  exportButton.textContent = "PNG...";
+  setActionButtonLabel(exportButton, "PNG...");
   session.ui_status = "Drawing PNG.";
   corrections.textContent = session.ui_status;
   saveSession();
@@ -857,7 +959,7 @@ function exportArtifact(artifact) {
     corrections.textContent = session.ui_status;
   } finally {
     saveSession();
-    exportButton.textContent = idleLabel || PNG_EXPORT_LABEL;
+    setActionButtonLabel(exportButton, idleLabel || PNG_EXPORT_LABEL);
     setCommandDisabled(false);
   }
 }
@@ -898,7 +1000,7 @@ function renderArtifactCanvas(artifact) {
     ["Delight", seal.delight || 0],
     ["AI Need", seal.ai_necessity || 0],
     ["Feasible", seal.feasibility || 0],
-    ["Prize Fit", seal.prize_fit || 0],
+    ["Goal Fit", seal.prize_fit || 0],
   ];
   rows.forEach(([label, value], index) => {
     const y = 418 + index * 34;
@@ -1048,6 +1150,16 @@ function fieldLabel(value) {
     .replace(/^\w/, (char) => char.toUpperCase());
 }
 
+function fieldPlaceholder(value) {
+  const placeholders = {
+    skills: "frontend, notebooks, prompt design",
+    time: "one evening, weekend, 3 hours",
+    preferences: "visual, playful, practical",
+    constraints: "CPU-only, no paid APIs, solo build",
+  };
+  return placeholders[value] || "";
+}
+
 function boundedPercent(value) {
   return Math.max(4, Math.min(96, Number(value || 50)));
 }

static/index.html

@@ -7,81 +7,227 @@
     <link rel="stylesheet" href="/static/styles.css" />
   </head>
   <body>
-    <main class="shell">
-      <section class="stage" aria-label="The Unwritten Almanac">
-        <div class="canopy"></div>
-        <div class="book">
-          <section class="page page-left">
-            <div class="kicker">The Unwritten Almanac</div>
-            <h1>Mothback</h1>
-            <p id="ink" class="ink">
-              The book is open. The next page waits for its first line.
-            </p>
-            <form id="turn-form" class="prompt-row">
-              <input
+    <svg class="icon-sprite" aria-hidden="true">
+      <symbol id="icon-quill" viewBox="0 0 24 24">
+        <path d="M20 4c-6 1-11 5-13 11l-2 5 5-2c6-2 10-7 11-13z" />
+        <path d="M9 15c2-3 4-5 7-7" />
+      </symbol>
+      <symbol id="icon-gap" viewBox="0 0 24 24">
+        <path d="M12 3v4M12 17v4M3 12h4M17 12h4" />
+        <circle cx="12" cy="12" r="3.2" />
+      </symbol>
+      <symbol id="icon-plan" viewBox="0 0 24 24">
+        <path d="M5 4h11l3 3v13H5z" />
+        <path d="M9 9h6M9 13h6M9 17h3" />
+      </symbol>
+      <symbol id="icon-rank" viewBox="0 0 24 24">
+        <path d="M6 20V10M12 20V4M18 20v-7" />
+      </symbol>
+      <symbol id="icon-example" viewBox="0 0 24 24">
+        <path d="M12 3l2.2 5.6L20 9l-4 4 1 6-5-3-5 3 1-6-4-4 5.8-.4z" />
+      </symbol>
+      <symbol id="icon-download" viewBox="0 0 24 24">
+        <path d="M12 4v11M7 11l5 5 5-5M5 20h14" />
+      </symbol>
+      <symbol id="icon-reset" viewBox="0 0 24 24">
+        <path d="M4 5v5h5" />
+        <path d="M5.5 14a7 7 0 1 0 1.2-6.7L4 10" />
+      </symbol>
+      <symbol id="icon-check" viewBox="0 0 24 24">
+        <path d="M5 12l4 4 10-11" />
+      </symbol>
+    </svg>
+
+    <div class="desk-glow"></div>
+    <main class="almanac">
+      <section class="sheet" aria-label="The Unwritten Almanac">
+        <header class="masthead">
+          <div class="masthead-l">
+            <svg class="crest" viewBox="0 0 64 64" aria-hidden="true">
+              <g
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.5"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="M32 30c-6-12-18-16-26-10 2 9 9 17 20 18" />
+                <path d="M32 30c6-12 18-16 26-10-2 9-9 17-20 18" />
+                <path d="M32 32c-5 9-14 12-21 9 2-6 7-11 15-12" opacity=".6" />
+                <path d="M32 32c5 9 14 12 21 9-2-6-7-11-15-12" opacity=".6" />
+                <path
+                  d="M32 20c-2.4 0-4 2-4 6s1.6 14 4 18c2.4-4 4-14 4-18s-1.6-6-4-6z"
+                  fill="currentColor"
+                  fill-opacity=".08"
+                />
+                <circle cx="28.5" cy="24.5" r="2.3" fill="currentColor" fill-opacity=".15" />
+                <circle cx="35.5" cy="24.5" r="2.3" fill="currentColor" fill-opacity=".15" />
+                <circle cx="28.5" cy="24.5" r=".7" fill="currentColor" />
+                <circle cx="35.5" cy="24.5" r=".7" fill="currentColor" />
+                <path d="M30 19c-1-2-2-3.4-3.6-4M34 19c1-2 2-3.4 3.6-4" />
+              </g>
+            </svg>
+            <div>
+              <h1>The Unwritten Almanac</h1>
+              <div class="sub">Originality map and build plan for your next idea</div>
+            </div>
+          </div>
+          <div id="provenance" class="provenance" aria-live="polite">Opening the current map.</div>
+        </header>
+
+        <nav class="mobile-nav" aria-label="Sections">
+          <button type="button" class="active" data-tab="page">Page</button>
+          <button type="button" data-tab="proof">Proof</button>
+          <button type="button" data-tab="almanac">Board</button>
+        </nav>
+
+        <div id="spread" class="spread" data-tab="page">
+          <aside class="col col-margin" aria-label="Idea board and setup">
+            <section class="section">
+              <div class="eyebrow">Idea board <span id="idea-count" class="count">0</span></div>
+              <div id="ideas" class="idea-list"></div>
+            </section>
+
+            <section class="section">
+              <div class="eyebrow">Builder profile</div>
+              <div id="profile" class="profile-grid"></div>
+            </section>
+
+            <section class="section">
+              <div class="eyebrow">Goals <span id="target-count" class="count">0</span></div>
+              <div id="targets" class="target-list"></div>
+            </section>
+          </aside>
+
+          <section class="col col-page" aria-label="Current idea">
+            <form id="turn-form" class="composer">
+              <label class="sr-only" for="message">Describe your idea</label>
+              <textarea
                 id="message"
                 name="message"
+                class="prompt"
+                rows="2"
                 autocomplete="off"
-                placeholder="A local-first agent for..."
-              />
-              <button id="submit" type="submit" title="Ink the page">Ink</button>
+                placeholder="A local-first agent that helps..."
+              ></textarea>
+              <div class="underline"></div>
+
+              <div class="toolbar command-row" aria-label="Advisor commands">
+                <button id="submit" class="btn btn-ink" type="submit" title="Score this idea">
+                  <svg class="icon"><use href="#icon-quill"></use></svg>
+                  Ink
+                </button>
+                <button
+                  type="button"
+                  class="btn"
+                  data-command="write bolder and find whitespace"
+                  title="Find an under-explored direction"
+                >
+                  <svg class="icon"><use href="#icon-gap"></use></svg>
+                  Gap
+                </button>
+                <button
+                  type="button"
+                  class="btn"
+                  data-command="make a build plan"
+                  title="Draft a build plan for the current idea"
+                >
+                  <svg class="icon"><use href="#icon-plan"></use></svg>
+                  Plan
+                </button>
+                <button
+                  type="button"
+                  class="btn"
+                  data-command="compare ideas"
+                  title="Rank the saved idea board"
+                >
+                  <svg class="icon"><use href="#icon-rank"></use></svg>
+                  Compare
+                </button>
+                <span class="spacer"></span>
+                <button type="button" id="load-demo" class="btn btn-ghost" title="Load a sample session">
+                  <svg class="icon"><use href="#icon-example"></use></svg>
+                  Example
+                </button>
+                <button type="button" id="export-notes" class="btn btn-ghost" title="Export build notes" disabled>
+                  <svg class="icon"><use href="#icon-download"></use></svg>
+                  Notes
+                </button>
+                <button
+                  type="button"
+                  id="export-chapter"
+                  class="btn btn-ghost"
+                  title="Export the idea-board chapter"
+                  disabled
+                >
+                  <svg class="icon"><use href="#icon-download"></use></svg>
+                  Chapter
+                </button>
+                <button type="button" id="export-artifact" class="btn btn-ghost" title="Export the current page" disabled>
+                  <svg class="icon"><use href="#icon-download"></use></svg>
+                  PNG
+                </button>
+                <button type="button" id="reset-session" class="btn btn-ghost btn-icon" title="Reset the session">
+                  <svg class="icon"><use href="#icon-reset"></use></svg>
+                  <span class="sr-only">Reset</span>
+                </button>
+              </div>
             </form>
-            <div class="command-row" aria-label="Advisor commands">
-              <button type="button" id="load-demo" title="Load a sample idea">Example</button>
-              <button type="button" data-command="write bolder and find whitespace" title="Find a gold margin">
-                Gap
-              </button>
-              <button type="button" data-command="make a build plan" title="Draft a build plan">Plan</button>
-              <button type="button" data-command="compare ideas" title="Compare the idea board">Rank</button>
-              <button type="button" id="export-notes" title="Export build notes" disabled>Notes</button>
-              <button type="button" id="export-chapter" title="Export the Almanac chapter" disabled>Chapter</button>
-              <button type="button" id="export-artifact" title="Export the current fate page" disabled>PNG</button>
-              <button type="button" id="reset-session" title="Clear the saved session">Reset</button>
-            </div>
-            <div id="corrections" class="corrections" aria-live="polite"></div>
-          </section>
 
-          <section class="page page-right">
-            <div class="seal" id="seal">
-              <span id="verdict">UNWRITTEN</span>
-              <strong id="overall">0.0</strong>
-            </div>
-            <div id="provenance" class="provenance"></div>
-            <div id="score" class="score-grid" aria-label="Seal quadrants"></div>
-            <div class="panels">
-              <article class="wide-panel">
-                <h2>You vs the Wood</h2>
-                <div id="wood-map" class="wood-map"></div>
-              </article>
-              <article>
-                <h2>Goals</h2>
-                <div id="targets" class="target-list"></div>
-              </article>
-              <article>
-                <h2>Profile</h2>
-                <div id="profile" class="profile-grid"></div>
-              </article>
-              <article>
-                <h2>Idea Board</h2>
-                <div id="ideas" class="idea-list"></div>
-              </article>
-              <article>
-                <h2>Echoes</h2>
-                <div id="projects" class="project-list"></div>
-              </article>
-              <article>
-                <h2>Gold Margins</h2>
-                <div id="whitespace" class="whitespace-list"></div>
-              </article>
-              <article>
-                <h2>Build Plan</h2>
-                <ol id="plan" class="plan-list"></ol>
-              </article>
-            </div>
+            <div id="corrections" class="marginalia" aria-live="polite"></div>
+
+            <article class="fate">
+              <span id="verdict-stamp" class="verdict-stamp verdict-ready">
+                <span class="seal-dot"></span>
+                <span id="verdict">READY</span>
+              </span>
+              <p id="ink" class="prophecy">
+                The book is open. Describe a project idea, compare it against the current map, then turn the result into
+                a build plan.
+              </p>
+            </article>
+
+            <section class="section plan">
+              <div class="eyebrow">Build path</div>
+              <ol id="plan" class="plan-list"></ol>
+            </section>
           </section>
+
+          <aside class="col col-proof" aria-label="Score and evidence">
+            <section class="section">
+              <div class="eyebrow">Score</div>
+              <div class="seal-wrap">
+                <div id="seal" class="seal">
+                  <span id="overall" class="seal-overall">0.0</span>
+                  <span class="seal-of">out of ten</span>
+                </div>
+                <div class="seal-meta">
+                  <div id="seal-verdict" class="v ready">READY</div>
+                  <div id="seal-copy" class="t">No idea has been scored yet.</div>
+                </div>
+              </div>
+              <div id="score" class="quadrants" aria-label="Score breakdown"></div>
+            </section>
+
+            <section class="section">
+              <div class="eyebrow">You vs the Wood</div>
+              <div id="wood-map" class="wood-map"></div>
+            </section>
+
+            <section class="section">
+              <div class="eyebrow">Closest echoes</div>
+              <div id="projects" class="project-list"></div>
+            </section>
+
+            <section class="section">
+              <div class="eyebrow">Gold margins</div>
+              <div id="whitespace" class="whitespace-list"></div>
+            </section>
+          </aside>
         </div>
       </section>
     </main>
+
     <script type="module" src="/static/app.js"></script>
   </body>
 </html>

static/styles.css

@@ -1,13 +1,25 @@
 :root {
   color-scheme: dark;
-  --ink: #24160e;
-  --muted-ink: #6b4e35;
-  --paper: #d9bd83;
-  --paper-deep: #b48a4b;
-  --gold: #e6bd3f;
-  --red: #8d2d26;
-  --leaf: #2f7a49;
-  --night: #121612;
+  --paper: #efe4c9;
+  --paper-2: #e7d7b7;
+  --paper-3: #f7eed9;
+  --edge: #d3bd92;
+  --ink: #271a0e;
+  --ink-soft: #5d4528;
+  --ink-faint: #8a714c;
+  --rule: rgba(73, 49, 22, 0.22);
+  --rule-soft: rgba(73, 49, 22, 0.12);
+  --oxblood: #9a2b22;
+  --oxblood-2: #74201b;
+  --gold: #b07d12;
+  --gold-2: #d8a226;
+  --gold-glow: rgba(216, 162, 38, 0.38);
+  --leaf: #2f6b41;
+  --leaf-2: #3f8453;
+  --night: #14130d;
+  --night-2: #202012;
+  --serif: Georgia, "Times New Roman", serif;
+  --label: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
 }
 
 * {
@@ -16,127 +28,448 @@
 
 html,
 body {
-  margin: 0;
   min-height: 100%;
-  background: radial-gradient(circle at 50% 16%, #33442c 0, #182117 42%, #080b08 100%);
-  color: #f5ead2;
-  font-family:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+  margin: 0;
+}
+
+body {
+  color: var(--ink);
+  background:
+    linear-gradient(180deg, rgba(65, 68, 41, 0.22), transparent 22%),
+    linear-gradient(115deg, #202012 0%, #14130d 48%, #0c0b07 100%);
+  font-family: var(--serif);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
 }
 
 button,
-input {
+input,
+textarea {
   font: inherit;
+  color: inherit;
 }
 
-.shell {
-  min-height: 100vh;
-  display: grid;
-  place-items: center;
-  padding: clamp(16px, 3vw, 42px);
+button {
+  cursor: pointer;
 }
 
-.stage {
-  position: relative;
-  width: min(1180px, 100%);
-  min-height: min(760px, calc(100vh - 40px));
-  display: grid;
-  place-items: center;
+button:disabled,
+input:disabled,
+textarea:disabled {
+  cursor: wait;
 }
 
-.canopy {
+.icon-sprite {
+  display: none;
+}
+
+.icon {
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.7;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.sr-only {
   position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.desk-glow {
+  position: fixed;
   inset: 0;
+  pointer-events: none;
   background:
-    linear-gradient(90deg, rgba(0, 0, 0, 0.5), transparent 24%, transparent 76%, rgba(0, 0, 0, 0.55)),
-    radial-gradient(circle at 50% 0, rgba(231, 191, 71, 0.18), transparent 42%);
-  border-radius: 8px;
+    linear-gradient(90deg, rgba(0, 0, 0, 0.22), transparent 22%, transparent 78%, rgba(0, 0, 0, 0.28)),
+    linear-gradient(180deg, rgba(216, 162, 38, 0.08), transparent 34%);
 }
 
-.book {
+.almanac {
   position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  width: min(1100px, 100%);
-  min-height: 680px;
-  background:
-    linear-gradient(90deg, rgba(71, 42, 23, 0.55), transparent 49%, rgba(62, 34, 20, 0.7) 50%, transparent 51%),
-    url("/static/assets/parchment.png");
-  background-size: cover;
+  z-index: 1;
+  width: min(1320px, 100%);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 32px;
+}
+
+.sheet {
+  position: relative;
+  min-height: calc(100vh - 64px);
+  overflow: hidden;
   color: var(--ink);
-  border: 1px solid rgba(255, 232, 169, 0.28);
-  border-radius: 8px;
+  background:
+    linear-gradient(180deg, var(--paper-3), var(--paper) 16%, var(--paper) 84%, var(--paper-2)),
+    var(--paper);
+  border: 1px solid var(--edge);
+  border-radius: 4px;
   box-shadow:
-    0 30px 80px rgba(0, 0, 0, 0.62),
-    inset 0 0 80px rgba(93, 48, 16, 0.38);
-  overflow: hidden;
+    0 40px 90px -30px rgba(0, 0, 0, 0.72),
+    0 4px 14px rgba(0, 0, 0, 0.35);
 }
 
-.page {
-  min-width: 0;
-  padding: clamp(22px, 4vw, 56px);
+.sheet::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(rgba(73, 49, 22, 0.018) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(73, 49, 22, 0.014) 1px, transparent 1px);
+  background-size: 34px 34px;
+  mix-blend-mode: multiply;
+}
+
+.sheet::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  box-shadow:
+    inset 0 0 120px rgba(99, 58, 20, 0.2),
+    inset 0 0 0 1px rgba(255, 247, 224, 0.26);
 }
 
-.page-left {
+.masthead {
+  position: relative;
+  z-index: 2;
   display: flex;
-  flex-direction: column;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 30px 42px 18px;
+  border-bottom: 1px solid var(--rule);
 }
 
-.kicker {
-  color: var(--muted-ink);
-  font-size: 0.78rem;
-  font-weight: 800;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
+.masthead-l {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  gap: 18px;
 }
 
-h1 {
-  margin: 10px 0 22px;
-  font-family: Georgia, "Times New Roman", serif;
-  font-size: clamp(3rem, 8vw, 6.4rem);
-  line-height: 0.9;
+.crest {
+  width: 52px;
+  height: 52px;
+  flex: 0 0 auto;
+  color: var(--ink);
+}
+
+.masthead h1 {
+  margin: 0;
+  font-family: var(--serif);
+  font-size: 2.5rem;
+  line-height: 0.98;
   font-weight: 700;
   letter-spacing: 0;
 }
 
-h2 {
-  margin: 0 0 10px;
-  color: var(--muted-ink);
+.masthead .sub {
+  margin-top: 7px;
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.64rem;
+  font-weight: 800;
+  line-height: 1.4;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+}
+
+.provenance {
+  max-width: 420px;
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.68rem;
+  font-weight: 750;
+  line-height: 1.55;
+  letter-spacing: 0.03em;
+  text-align: right;
+}
+
+.spread {
+  position: relative;
+  z-index: 2;
+  display: grid;
+  grid-template-columns: 270px minmax(0, 1fr) 350px;
+}
+
+.col {
+  min-width: 0;
+  padding: 30px;
+}
+
+.col-margin,
+.col-proof {
+  background: linear-gradient(180deg, rgba(255, 247, 224, 0.2), rgba(73, 49, 22, 0.045));
+}
+
+.col-margin,
+.col-page {
+  border-right: 1px solid var(--rule);
+}
+
+.eyebrow {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  margin: 0 0 14px;
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.66rem;
+  font-weight: 850;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+}
+
+.eyebrow::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--rule);
+}
+
+.eyebrow .count {
+  padding: 1px 8px;
+  color: var(--ink-soft);
+  background: rgba(73, 49, 22, 0.1);
+  border-radius: 999px;
+  font-size: 0.6rem;
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+}
+
+.section + .section {
+  margin-top: 30px;
+}
+
+.composer {
+  margin: 0 0 18px;
+}
+
+.prompt {
+  display: block;
+  width: 100%;
+  min-height: 72px;
+  padding: 4px 0 12px;
+  color: var(--ink);
+  background: transparent;
+  border: 0;
+  outline: 0;
+  resize: vertical;
+  font-family: var(--serif);
+  font-size: 1.32rem;
+  line-height: 1.42;
+}
+
+.prompt::placeholder {
+  color: var(--ink-faint);
+  font-style: italic;
+}
+
+.underline {
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, var(--ink-soft), transparent);
+  opacity: 0.55;
+  transition: opacity 0.2s, background 0.2s;
+}
+
+.composer:focus-within .underline {
+  background: linear-gradient(90deg, var(--ink), var(--ink-soft) 60%, transparent);
+  opacity: 1;
+}
+
+.toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.toolbar .spacer {
+  flex: 1 1 20px;
+}
+
+.btn {
+  display: inline-flex;
+  min-height: 36px;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  padding: 8px 13px;
+  color: var(--ink);
+  background: var(--paper-3);
+  border: 1px solid var(--edge);
+  border-radius: 7px;
+  font-family: var(--label);
   font-size: 0.78rem;
-  line-height: 1.2;
-  font-weight: 900;
-  letter-spacing: 0.08em;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: 0.03em;
+  white-space: nowrap;
+  transition: transform 0.12s, background 0.2s, border-color 0.2s, opacity 0.2s;
+}
+
+.btn:hover:not(:disabled) {
+  background: #fff6e2;
+  border-color: var(--ink-faint);
+  transform: translateY(-1px);
+}
+
+.btn:active:not(:disabled) {
+  transform: translateY(0);
+}
+
+.btn:disabled {
+  opacity: 0.42;
+  cursor: wait;
+}
+
+.btn-ink {
+  padding-inline: 18px;
+  color: #f6ecd2;
+  background: var(--ink);
+  border-color: var(--ink);
+}
+
+.btn-ink:hover:not(:disabled) {
+  background: #38260f;
+  border-color: #38260f;
+}
+
+.btn-ghost {
+  color: var(--ink-soft);
+  background: transparent;
+  border-color: transparent;
+}
+
+.btn-ghost:hover:not(:disabled) {
+  background: rgba(73, 49, 22, 0.08);
+  border-color: transparent;
+}
+
+.btn-icon {
+  width: 36px;
+  padding: 8px;
+}
+
+.marginalia {
+  min-height: 22px;
+  margin: 8px 0 22px;
+  color: var(--leaf);
+  font-family: var(--label);
+  font-size: 0.74rem;
+  font-weight: 750;
+  line-height: 1.4;
+  letter-spacing: 0.02em;
+}
+
+.marginalia.warn {
+  color: var(--oxblood);
+}
+
+.fate {
+  position: relative;
+  min-height: 245px;
+}
+
+.verdict-stamp {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 14px 7px 12px;
+  margin-bottom: 18px;
+  border: 1.5px solid currentColor;
+  border-radius: 999px;
+  color: var(--ink-faint);
+  background: rgba(73, 49, 22, 0.06);
+  font-family: var(--label);
+  font-size: 0.72rem;
+  font-weight: 850;
+  letter-spacing: 0.12em;
   text-transform: uppercase;
 }
 
-.ink {
-  min-height: 214px;
+.verdict-stamp .seal-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.verdict-unwritten {
+  color: var(--gold);
+  background: rgba(216, 162, 38, 0.1);
+}
+
+.verdict-echo {
+  color: var(--oxblood);
+  background: rgba(154, 43, 34, 0.09);
+}
+
+.verdict-ready {
+  color: var(--ink-faint);
+}
+
+.prophecy {
+  min-height: 150px;
   margin: 0;
-  color: #2a170d;
-  font-family: Georgia, "Times New Roman", serif;
-  font-size: clamp(1.1rem, 1.9vw, 1.55rem);
-  line-height: 1.48;
+  color: var(--ink);
+  font-family: var(--serif);
+  font-size: 1.55rem;
+  line-height: 1.52;
+  font-weight: 400;
+  text-wrap: pretty;
 }
 
-.ink.bleed {
-  color: var(--red);
+.prophecy::first-letter {
+  float: left;
+  padding: 7px 12px 0 0;
+  color: var(--ink);
+  font-size: 4.1em;
+  line-height: 0.76;
+  font-weight: 700;
+}
+
+.prophecy.bleed {
+  color: var(--oxblood-2);
 }
 
-.ink.gold {
-  color: #6a4b00;
-  text-shadow: 0 0 18px rgba(230, 189, 63, 0.42);
+.prophecy.bleed::first-letter {
+  color: var(--oxblood);
 }
 
-.ink.thinking {
-  color: var(--muted-ink);
+.prophecy.gold {
+  color: #6a4a08;
+}
+
+.prophecy.gold::first-letter {
+  color: var(--gold);
+  text-shadow: 0 0 22px var(--gold-glow);
+}
+
+.prophecy.thinking {
+  color: var(--ink-faint);
   font-style: italic;
-  animation: ink-pulse 1.6s ease-in-out infinite;
+  animation: breathe 1.7s ease-in-out infinite;
 }
 
-@keyframes ink-pulse {
+@keyframes breathe {
   0%,
   100% {
-    opacity: 0.62;
+    opacity: 0.58;
   }
 
   50% {
@@ -144,438 +477,799 @@ h2 {
   }
 }
 
-.prompt-row {
+.plan-list {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) 84px;
-  gap: 10px;
-  margin-top: auto;
+  gap: 2px;
+  min-height: 42px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: step;
 }
 
-.prompt-row input {
-  min-width: 0;
-  height: 48px;
-  border: 1px solid rgba(80, 47, 22, 0.38);
-  border-radius: 8px;
-  padding: 0 14px;
-  background: rgba(255, 243, 203, 0.55);
+.plan-list li {
+  position: relative;
+  counter-increment: step;
+  padding: 12px 4px 12px 44px;
   color: var(--ink);
-  outline: none;
-}
-
-.prompt-row input:focus {
-  border-color: rgba(141, 45, 38, 0.72);
-  box-shadow: 0 0 0 3px rgba(141, 45, 38, 0.15);
-}
-
-.prompt-row button {
-  height: 48px;
-  border: 0;
-  border-radius: 8px;
-  background: #51311d;
-  color: #fff3cc;
-  font-weight: 800;
-  cursor: pointer;
+  border-bottom: 1px solid var(--rule-soft);
+  font-size: 1rem;
+  line-height: 1.45;
+  text-wrap: pretty;
 }
 
-button:disabled {
-  opacity: 0.58;
-  cursor: wait;
+.plan-list li:last-child {
+  border-bottom: 0;
 }
 
-.command-row {
+.plan-list li::before {
+  content: counter(step);
+  position: absolute;
+  top: 11px;
+  left: 0;
   display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 8px;
-  margin-top: 10px;
+  width: 28px;
+  height: 28px;
+  place-items: center;
+  color: var(--gold);
+  background: rgba(216, 162, 38, 0.08);
+  border: 1.5px solid var(--gold);
+  border-radius: 50%;
+  font-family: var(--label);
+  font-size: 0.82rem;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
 }
 
-.command-row button {
-  min-width: 0;
-  height: 38px;
-  border: 1px solid rgba(80, 47, 22, 0.34);
-  border-radius: 8px;
-  background: rgba(255, 243, 203, 0.46);
-  color: #2a170d;
-  font-size: 0.86rem;
-  font-weight: 850;
-  cursor: pointer;
+.plan-list li.empty {
+  padding-left: 0;
+  color: var(--ink-faint);
+  font-style: italic;
+  border-bottom: 0;
 }
 
-.command-row button:hover:not(:disabled) {
-  background: rgba(255, 243, 203, 0.68);
+.plan-list li.empty::before {
+  display: none;
 }
 
-.corrections {
-  min-height: 30px;
-  padding-top: 10px;
-  color: var(--muted-ink);
-  font-size: 0.88rem;
+.seal-wrap {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  margin-bottom: 6px;
 }
 
 .seal {
-  width: min(220px, 52vw);
-  aspect-ratio: 1;
-  margin: 0 auto 28px;
+  position: relative;
   display: grid;
+  width: 124px;
+  height: 124px;
+  flex: 0 0 auto;
   place-items: center;
   align-content: center;
-  gap: 3px;
+  gap: 1px;
+  color: #f6ecd2;
+  background:
+    linear-gradient(145deg, rgba(255, 247, 224, 0.24), transparent 34%),
+    linear-gradient(180deg, #7c6849, #4d3924);
   border-radius: 50%;
+  box-shadow:
+    0 12px 26px rgba(91, 62, 35, 0.32),
+    inset 0 0 22px rgba(43, 25, 11, 0.42);
+  transform: rotate(-5deg);
+}
+
+.seal.unwritten {
+  color: #4a3404;
   background:
-    radial-gradient(circle at 36% 30%, rgba(255, 226, 134, 0.72), transparent 26%),
-    radial-gradient(circle, #9b2f27 0 58%, #6e211f 59% 100%);
-  color: #ffe9a0;
+    linear-gradient(145deg, rgba(255, 240, 190, 0.82), transparent 32%),
+    linear-gradient(180deg, var(--gold-2), var(--gold));
   box-shadow:
-    0 14px 30px rgba(91, 22, 16, 0.35),
-    inset 0 0 24px rgba(53, 11, 7, 0.45);
-  transform: rotate(-4deg);
+    0 12px 26px rgba(176, 125, 18, 0.36),
+    inset 0 0 22px rgba(120, 80, 8, 0.4),
+    0 0 34px var(--gold-glow);
 }
 
-.seal span {
-  max-width: 150px;
-  text-align: center;
+.seal.echo {
+  color: #ffe9a8;
+  background:
+    linear-gradient(145deg, rgba(255, 228, 150, 0.55), transparent 30%),
+    linear-gradient(180deg, var(--oxblood), var(--oxblood-2));
+  box-shadow:
+    0 12px 26px rgba(91, 22, 16, 0.4),
+    inset 0 0 22px rgba(53, 11, 7, 0.5);
+}
+
+.seal .seal-overall {
+  font-family: var(--serif);
+  font-size: 2.5rem;
+  font-weight: 700;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+}
+
+.seal .seal-of {
+  font-family: var(--label);
+  font-size: 0.54rem;
+  font-weight: 800;
+  letter-spacing: 0.16em;
+  text-transform: uppercase;
+  opacity: 0.86;
+}
+
+.seal-meta {
+  min-width: 0;
+}
+
+.seal-meta .v {
+  color: var(--ink-faint);
+  font-family: var(--label);
   font-size: 0.82rem;
-  font-weight: 900;
+  font-weight: 850;
+  line-height: 1.25;
   letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
-.seal strong {
-  font-family: Georgia, "Times New Roman", serif;
-  font-size: 3.4rem;
-  line-height: 1;
+.seal-meta .v.unwritten {
+  color: var(--gold);
 }
 
-.provenance {
-  margin: -10px 0 18px;
-  color: var(--muted-ink);
-  text-align: center;
-  font-size: 0.72rem;
+.seal-meta .v.echo {
+  color: var(--oxblood);
+}
+
+.seal-meta .t {
+  margin-top: 4px;
+  color: var(--ink-soft);
+  font-size: 0.92rem;
+  font-style: italic;
+  line-height: 1.35;
+  text-wrap: pretty;
+}
+
+.quadrants {
+  display: grid;
+  gap: 9px;
+  margin-top: 18px;
+}
+
+.quad {
+  display: grid;
+  grid-template-columns: 76px minmax(0, 1fr) 24px;
+  align-items: center;
+  gap: 10px;
+}
+
+.quad .ql {
+  color: var(--ink-soft);
+  font-family: var(--label);
+  font-size: 0.68rem;
   font-weight: 800;
-  line-height: 1.3;
+  line-height: 1.15;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.quad .qbar {
+  display: block;
+  height: 9px;
+  overflow: hidden;
+  background: rgba(73, 49, 22, 0.16);
+  border-radius: 999px;
+}
+
+.quad .qfill {
+  display: block;
+  width: 0;
+  height: 100%;
+  background: linear-gradient(90deg, var(--oxblood) 0%, var(--gold) 55%, var(--leaf-2) 100%);
+  border-radius: 999px;
+  transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.quad .qv {
+  color: var(--ink);
+  font-family: var(--label);
+  font-size: 0.76rem;
+  font-weight: 850;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.wood-map {
+  display: grid;
+  gap: 10px;
+}
+
+.wood,
+.wood-map-field {
+  position: relative;
+  height: 188px;
+  overflow: hidden;
+  background:
+    linear-gradient(rgba(73, 49, 22, 0.08) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(73, 49, 22, 0.08) 1px, transparent 1px),
+    rgba(255, 245, 222, 0.42);
+  background-size: 26px 26px;
+  border: 1px solid var(--rule);
+  border-radius: 8px;
+}
+
+.wood-empty {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  text-align: center;
+}
+
+.wood-dot {
+  position: absolute;
+  display: block;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  transition: opacity 0.5s;
+}
+
+.wood-dot.inked {
+  background: rgba(73, 49, 22, 0.34);
 }
 
-.score-grid {
-  display: grid;
-  gap: 7px;
-  margin: 0 0 22px;
+.wood-dot.echo {
+  background: var(--oxblood);
+  box-shadow: 0 0 0 2px rgba(255, 240, 181, 0.5);
+  animation: echo-pulse 2.4s ease-in-out infinite;
 }
 
-.score-row {
-  display: grid;
-  grid-template-columns: 88px minmax(0, 1fr) 28px;
-  align-items: center;
-  gap: 9px;
-  color: var(--muted-ink);
-  font-size: 0.8rem;
-  font-weight: 800;
+.wood-dot.idea {
+  z-index: 2;
+  background: var(--leaf);
+  box-shadow:
+    0 0 0 3px #fff0b5,
+    0 0 20px rgba(47, 107, 65, 0.5);
 }
 
-.score-row meter {
-  width: 100%;
-  height: 9px;
+.wood-dot.idea.bleed,
+.wood-dot.idea.echo-idea {
+  background: var(--oxblood);
+  box-shadow:
+    0 0 0 3px #fff0b5,
+    0 0 20px rgba(154, 43, 34, 0.5);
 }
 
-.score-row meter::-webkit-meter-bar {
-  border: 0;
-  border-radius: 999px;
-  background: rgba(80, 47, 22, 0.2);
+@keyframes echo-pulse {
+  0%,
+  100% {
+    opacity: 0.82;
+  }
+
+  50% {
+    opacity: 1;
+  }
 }
 
-.score-row meter::-webkit-meter-optimum-value {
-  border-radius: 999px;
-  background: linear-gradient(90deg, var(--red), var(--gold), var(--leaf));
+.wood-cap,
+.wood-map-caption {
+  margin: 0 2px;
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.68rem;
+  font-weight: 750;
+  line-height: 1.45;
+  letter-spacing: 0.02em;
 }
 
-.panels {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 16px;
+.wood-legend {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 14px;
+}
+
+.wood-legend span {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--ink-soft);
+  font-family: var(--label);
+  font-size: 0.62rem;
+  font-weight: 850;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 
-.wide-panel {
-  grid-column: 1 / -1;
+.wood-legend i {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
 }
 
 .project-list,
 .whitespace-list,
 .idea-list,
 .target-list,
-.profile-grid,
-.wood-map {
+.profile-grid {
   display: grid;
   gap: 9px;
 }
 
 .project,
+.echo-item,
 .gap,
-.idea,
-.target-toggle,
-.profile-field {
-  border-left: 3px solid rgba(80, 47, 22, 0.48);
-  padding: 8px 10px;
-  background: rgba(255, 241, 196, 0.34);
-  border-radius: 0 8px 8px 0;
-}
-
-.idea {
+.gap-item {
+  display: block;
   width: 100%;
-  border-top: 0;
-  border-right: 0;
-  border-bottom: 0;
-  appearance: none;
+  padding: 9px 0 9px 13px;
+  color: inherit;
+  background: transparent;
+  border: 0;
+  border-left: 2px solid var(--rule);
+  font: inherit;
   text-align: left;
-  cursor: pointer;
+  text-decoration: none;
+  transition: background 0.2s, border-color 0.2s, padding-left 0.2s;
 }
 
-.idea:hover,
-.idea:focus-visible,
-.idea.current {
-  border-left-color: var(--leaf);
-  background: rgba(255, 241, 196, 0.56);
-}
-
-.idea:disabled,
-.target-toggle:has(input:disabled),
-.profile-field:has(input:disabled) {
-  opacity: 0.64;
-  cursor: wait;
+.project,
+.echo-item {
+  border-left-color: rgba(154, 43, 34, 0.45);
 }
 
-.idea:disabled {
-  cursor: wait;
+.gap,
+.gap-item {
+  border-left-color: rgba(176, 125, 18, 0.5);
 }
 
-.idea:focus-visible {
-  outline: 2px solid rgba(47, 122, 73, 0.5);
-  outline-offset: 2px;
+.project:hover,
+.echo-item:hover,
+.gap-item:hover {
+  padding-left: 16px;
+  background: rgba(255, 247, 224, 0.58);
 }
 
 .project strong,
+.echo-item strong,
 .gap strong,
-.idea strong {
+.gap-item strong {
   display: block;
-  color: #2a170d;
+  color: var(--ink);
+  font-family: var(--serif);
   font-size: 0.98rem;
-  line-height: 1.25;
+  font-weight: 700;
+  line-height: 1.22;
 }
 
 .project p,
+.echo-item p,
 .gap p,
-.idea p {
+.gap-item p {
   margin: 4px 0 0;
-  color: var(--muted-ink);
-  font-size: 0.86rem;
-  line-height: 1.35;
+  color: var(--ink-soft);
+  font-family: var(--label);
+  font-size: 0.8rem;
+  line-height: 1.4;
 }
 
-.project span {
+.project span,
+.echo-item .matched {
   display: inline-block;
   margin-top: 6px;
-  color: #70401e;
-  font-size: 0.74rem;
-  line-height: 1.25;
-  font-weight: 900;
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.64rem;
+  font-weight: 800;
+  line-height: 1.3;
+  letter-spacing: 0.02em;
 }
 
-.idea span {
-  display: inline-block;
+.gap-item .use {
+  display: block;
   margin-top: 6px;
-  color: #70401e;
-  font-size: 0.76rem;
-  font-weight: 900;
-  letter-spacing: 0.04em;
+  color: var(--gold);
+  font-family: var(--label);
+  font-size: 0.62rem;
+  font-weight: 850;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  opacity: 0;
+  transition: opacity 0.2s;
 }
 
-.idea small {
+.gap-item:hover .use {
+  opacity: 1;
+}
+
+.idea-card,
+.idea {
   display: block;
-  margin-top: 4px;
-  color: #5f6d38;
-  font-size: 0.72rem;
-  line-height: 1.25;
-  font-weight: 900;
+  width: 100%;
+  padding: 12px 13px;
+  color: inherit;
+  background: var(--paper-3);
+  border: 1px solid var(--edge);
+  border-left: 3px solid var(--edge);
+  border-radius: 0 7px 7px 0;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition: border-color 0.2s, transform 0.12s, box-shadow 0.2s, opacity 0.2s;
 }
 
-.target-list {
-  grid-template-columns: 1fr;
-  gap: 7px;
+.idea-card:hover:not(:disabled),
+.idea:hover:not(:disabled) {
+  box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.42);
+  transform: translateX(2px);
 }
 
-.target-toggle {
-  min-width: 0;
-  min-height: 50px;
+.idea-card.current,
+.idea.current {
+  background: #fff7e3;
+  border-left-color: var(--leaf);
+}
+
+.idea.current.bleed {
+  border-left-color: var(--oxblood);
+}
+
+.idea:disabled,
+.gap-item:disabled,
+.target-toggle:has(input:disabled),
+.profile-field:has(input:disabled) {
+  opacity: 0.64;
+}
+
+.idea:focus-visible,
+.gap-item:focus-visible,
+.target-toggle:focus-within,
+.profile-field input:focus-visible,
+.btn:focus-visible,
+.prompt:focus-visible {
+  outline: 2px solid rgba(47, 107, 65, 0.55);
+  outline-offset: 2px;
+}
+
+.idea .ihead {
   display: flex;
-  align-items: flex-start;
+  align-items: baseline;
+  justify-content: space-between;
   gap: 8px;
-  color: #2a170d;
-  font-size: 0.76rem;
-  line-height: 1.2;
-  font-weight: 900;
-  cursor: pointer;
 }
 
-.target-toggle input {
+.idea strong {
+  color: var(--ink);
+  font-family: var(--serif);
+  font-size: 0.98rem;
+  font-weight: 700;
+  line-height: 1.22;
+}
+
+.idea .iscore {
   flex: 0 0 auto;
-  width: 16px;
-  height: 16px;
-  margin-top: 2px;
-  accent-color: var(--leaf);
+  color: var(--ink-soft);
+  font-family: var(--label);
+  font-size: 0.82rem;
+  font-weight: 850;
+  font-variant-numeric: tabular-nums;
 }
 
-.target-copy {
-  min-width: 0;
-  display: grid;
-  gap: 3px;
+.idea p {
+  margin: 5px 0 0;
+  color: var(--ink-soft);
+  font-family: var(--label);
+  font-size: 0.76rem;
+  line-height: 1.4;
 }
 
-.target-copy strong {
-  color: #2a170d;
-  font-size: 0.8rem;
-  line-height: 1.2;
+.idea .iverdict {
+  display: inline-block;
+  margin-top: 8px;
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.6rem;
+  font-weight: 850;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
 }
 
-.target-copy small {
-  color: var(--muted-ink);
-  font-size: 0.72rem;
-  line-height: 1.25;
+.idea .iverdict.unwritten {
+  color: var(--gold);
+}
+
+.idea .iverdict.echo {
+  color: var(--oxblood);
+}
+
+.idea small {
+  display: block;
+  margin-top: 5px;
+  color: var(--leaf);
+  font-family: var(--label);
+  font-size: 0.7rem;
   font-weight: 800;
+  line-height: 1.3;
 }
 
 .profile-field {
-  min-width: 0;
   display: grid;
-  grid-template-columns: 78px minmax(0, 1fr);
-  align-items: center;
-  gap: 8px;
+  gap: 5px;
 }
 
 .profile-field span {
-  color: var(--muted-ink);
-  font-size: 0.76rem;
-  line-height: 1.2;
-  font-weight: 900;
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.64rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
 }
 
 .profile-field input {
-  min-width: 0;
-  height: 32px;
-  border: 1px solid rgba(80, 47, 22, 0.32);
-  border-radius: 8px;
-  padding: 0 9px;
-  background: rgba(255, 243, 203, 0.48);
+  width: 100%;
+  min-height: 36px;
+  padding: 8px 10px;
   color: var(--ink);
-  outline: none;
+  background: rgba(255, 247, 224, 0.52);
+  border: 1px solid var(--rule);
+  border-radius: 6px;
+  outline: 0;
+  font-family: var(--label);
+  font-size: 0.84rem;
+  transition: border-color 0.2s, background 0.2s;
 }
 
 .profile-field input:focus {
-  border-color: rgba(47, 122, 73, 0.72);
-  box-shadow: 0 0 0 3px rgba(47, 122, 73, 0.13);
+  background: #fff8e6;
+  border-color: var(--leaf-2);
+  box-shadow: 0 0 0 3px rgba(47, 107, 65, 0.12);
 }
 
-.wood-map-field {
+.target-toggle {
   position: relative;
-  min-height: 138px;
-  border: 1px solid rgba(80, 47, 22, 0.3);
-  border-radius: 8px;
-  background:
-    linear-gradient(rgba(80, 47, 22, 0.12) 1px, transparent 1px),
-    linear-gradient(90deg, rgba(80, 47, 22, 0.12) 1px, transparent 1px),
-    rgba(255, 241, 196, 0.28);
-  background-size: 28px 28px;
-  overflow: hidden;
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 9px 10px;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: 7px;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s, opacity 0.2s;
 }
 
-.wood-dot {
-  position: absolute;
-  display: block;
-  border-radius: 50%;
-  transform: translate(-50%, -50%);
+.target-toggle:hover {
+  background: rgba(255, 247, 224, 0.52);
 }
 
-.wood-dot.inked {
-  background: rgba(80, 47, 22, 0.38);
+.target-toggle.on {
+  background: rgba(47, 107, 65, 0.07);
+  border-color: rgba(47, 107, 65, 0.4);
 }
 
-.wood-dot.echo {
-  background: var(--red);
-  box-shadow: 0 0 0 2px rgba(255, 240, 181, 0.48);
+.target-toggle input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 }
 
-.wood-dot.idea {
-  background: var(--leaf);
-  box-shadow:
-    0 0 0 3px #fff0b5,
-    0 0 18px rgba(47, 122, 73, 0.42);
+.target-toggle .check {
+  display: grid;
+  width: 18px;
+  height: 18px;
+  flex: 0 0 auto;
+  place-items: center;
+  margin-top: 1px;
+  color: transparent;
+  border: 1.5px solid var(--ink-faint);
+  border-radius: 5px;
+  transition: background 0.2s, border-color 0.2s, color 0.2s;
 }
 
-.wood-dot.idea.echo-idea {
-  background: var(--red);
+.target-toggle.on .check {
+  color: #f6ecd2;
+  background: var(--leaf);
+  border-color: var(--leaf);
 }
 
-.wood-map-caption {
-  margin: 0;
-  color: var(--muted-ink);
-  font-size: 0.84rem;
-  line-height: 1.35;
-  font-weight: 800;
+.target-toggle .check .icon {
+  width: 11px;
+  height: 11px;
+  stroke-width: 2.4;
 }
 
-.plan-list {
+.target-copy {
   display: grid;
-  gap: 7px;
-  min-height: 31px;
-  margin: 0;
-  padding-left: 20px;
+  min-width: 0;
+  gap: 3px;
 }
 
-.plan-list li {
-  color: #2a170d;
-  font-size: 0.86rem;
-  line-height: 1.32;
+.target-copy strong {
+  color: var(--ink);
+  font-family: var(--label);
+  font-size: 0.8rem;
+  font-weight: 850;
+  line-height: 1.2;
+}
+
+.target-copy small {
+  color: var(--ink-faint);
+  font-family: var(--label);
+  font-size: 0.7rem;
+  font-weight: 750;
+  line-height: 1.35;
 }
 
 .empty {
-  color: var(--muted-ink);
+  color: var(--ink-faint);
   font-size: 0.95rem;
+  font-style: italic;
+  line-height: 1.45;
 }
 
-@media (max-width: 820px) {
-  .shell {
-    display: block;
-    padding: 0;
+.mobile-nav {
+  display: none;
+}
+
+@media (max-width: 1080px) {
+  .almanac {
+    padding: 20px;
   }
 
-  .stage {
-    min-height: 100vh;
+  .spread {
+    grid-template-columns: 250px minmax(0, 1fr);
+  }
+
+  .col-proof {
+    grid-column: 1 / -1;
+    border-top: 1px solid var(--rule);
+  }
+
+  .col-page {
+    border-right: 0;
+  }
+}
+
+@media (max-width: 760px) {
+  .almanac {
+    width: 100%;
+    padding: 0;
   }
 
-  .book {
+  .sheet {
     min-height: 100vh;
-    grid-template-columns: 1fr;
+    border-right: 0;
+    border-left: 0;
     border-radius: 0;
-    overflow: visible;
   }
 
-  .page {
-    padding: 24px;
+  .masthead {
+    padding: 18px 18px 14px;
   }
 
-  .ink {
-    min-height: 168px;
+  .masthead h1 {
+    font-size: 1.58rem;
+    line-height: 1.05;
   }
 
-  .panels {
-    grid-template-columns: 1fr;
+  .masthead .sub {
+    max-width: 290px;
+    font-size: 0.58rem;
+    letter-spacing: 0.12em;
+  }
+
+  .crest {
+    width: 44px;
+    height: 44px;
+  }
+
+  .provenance {
+    display: none;
+  }
+
+  .mobile-nav {
+    position: sticky;
+    top: 0;
+    z-index: 20;
+    display: flex;
+    gap: 4px;
+    padding: 6px;
+    background: var(--paper-2);
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .mobile-nav button {
+    flex: 1;
+    padding: 9px 4px;
+    color: var(--ink-faint);
+    background: transparent;
+    border: 0;
+    border-radius: 6px;
+    font-family: var(--label);
+    font-size: 0.68rem;
+    font-weight: 850;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+
+  .mobile-nav button.active {
+    color: var(--paper);
+    background: var(--ink);
   }
 
-  .target-list {
+  .spread {
     grid-template-columns: 1fr;
   }
 
-  .command-row {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+  .col {
+    padding: 20px 18px 28px;
+    border-right: 0;
+  }
+
+  .col-page {
+    order: 1;
+  }
+
+  .col-proof {
+    order: 2;
+    border-top: 1px solid var(--rule);
+  }
+
+  .col-margin {
+    order: 3;
+    border-top: 1px solid var(--rule);
+  }
+
+  .spread[data-tab="page"] .col-proof,
+  .spread[data-tab="page"] .col-margin,
+  .spread[data-tab="proof"] .col-page,
+  .spread[data-tab="proof"] .col-margin,
+  .spread[data-tab="almanac"] .col-page,
+  .spread[data-tab="almanac"] .col-proof {
+    display: none;
+  }
+
+  .prompt {
+    min-height: 88px;
+    font-size: 1.12rem;
+  }
+
+  .prophecy {
+    min-height: 170px;
+    font-size: 1.2rem;
+  }
+
+  .prophecy::first-letter {
+    font-size: 3.2em;
+  }
+
+  .toolbar .spacer {
+    display: none;
+  }
+
+  .btn {
+    min-height: 38px;
+  }
+
+  .seal {
+    width: 104px;
+    height: 104px;
+  }
+
+  .seal .seal-overall {
+    font-size: 2.1rem;
+  }
+
+  .wood,
+  .wood-map-field {
+    height: 170px;
   }
+}
 
-  .score-row {
-    grid-template-columns: 82px minmax(0, 1fr) 26px;
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.001ms !important;
+    transition-duration: 0.001ms !important;
   }
 }

tests/test_model_runtime.py

@@ -49,6 +49,20 @@ def test_rule_planner_defaults_blank_to_list_projects() -> None:
     assert resolution.call.name == "list_projects"
 
 
+def test_rule_planner_splits_explicit_idea_pitch() -> None:
+    planner = RuleBasedPlanner()
+
+    resolution = planner.plan(
+        "idea: Hands-on science coach -- A lab-notebook companion for household experiments.",
+        {},
+    )
+
+    assert resolution.status == "valid"
+    assert resolution.call.name == "save_idea"
+    assert resolution.call.arguments["title"] == "Hands-on science coach"
+    assert resolution.call.arguments["pitch"] == "A lab-notebook companion for household experiments."
+
+
 def test_render_context_includes_state() -> None:
     context = render_context(
         "make a plan",

tests/test_tools.py

@@ -0,0 +1,10 @@
+from hackathon_advisor.tools import idea_from_text
+
+
+def test_idea_from_text_splits_explicit_title_and_pitch() -> None:
+    title, pitch = idea_from_text(
+        "idea: Hands-on science coach -- A lab-notebook companion for household experiments."
+    )
+
+    assert title == "Hands-on science coach"
+    assert pitch == "A lab-notebook companion for household experiments."