diff --git a/docs/design/002-direction-round-notes.md b/docs/design/002-direction-round-notes.md
index 8b92ffa..5dd32e2 100644
--- a/docs/design/002-direction-round-notes.md
+++ b/docs/design/002-direction-round-notes.md
@@ -282,6 +282,28 @@ mockup of the transition.
     slim bar; when collapsed, A's strip appears in the panel; B's ribbons in the sea are an on/off
     switch ("Threads on the sea").
 
+### 17. Real content added outside the repo
+
+> "We have also added audio files, as well as a full version of Homer's Oddysey and Illiad to the
+> epic-the-musical-content directory in home."
+
+What is in `~/epic-the-musical-content/` (1.5 GB, checked 2026-10-30):
+- `Songs and Lyrics/EPIC - The <Saga> Saga (<year>)/`: all 9 sagas, **40 songs as FLAC**, **37 `.lrc`
+  timed-lyrics files** (3 songs have none), plus `album.nfo` (saga blurb, fandom-wiki credited) and
+  `folder.jpg` cover art. File names: `Jorge Rivera-Herrans - EPIC - The <Saga> Saga - NN - <Title>.flac|.lrc`.
+- `Homers the Odyssey Book/The Odyssey.txt` and `The Illiad.txt`: Project Gutenberg #1727 and #2199,
+  **Samuel Butler's prose translations** (public domain). Being prose, they have books and paragraphs,
+  not line numbers, so the sample data's "Book 9, lines 105–460" references will not map onto them.
+
+*(Claude's notes)*
+- The `.lrc` files make **synced lyrics** possible: the Listen & lyrics player can highlight the
+  current line, not just the current part.
+- The Odyssey text makes the "real place in the Odyssey" link able to open the actual passage.
+- The audio, lyrics and cover art are Jorge Rivera-Herrans' copyrighted work. AGENTS.md currently says
+  "lyrics are placeholders, never real lyrics". Proposed: keep this folder **out of git and out of the
+  Docker image**; the server reads it from a `CONTENT_DIR` path, mounted read-only into the container.
+  Needs the user's OK (it touches `src/server.ts`, the Dockerfile and the lyrics rule).
+
 ## Open questions (in priority order)
 
 1. ~~Which sea-chart approach (08–11) reads best, or which mix?~~ 11's navigation + 10's style (§9).
diff --git a/src/mockups/16-voyage-readable/main.ts b/src/mockups/16-voyage-readable/main.ts
index 88ded7e..6c962fe 100644
--- a/src/mockups/16-voyage-readable/main.ts
+++ b/src/mockups/16-voyage-readable/main.ts
@@ -1,3 +1,380 @@
+import { songs } from "../../data/sample";
+import type { Song } from "../../data/types";
 import { mountCredits } from "../../shared/credits";
+import { hereAt } from "./chart";
+import { cyclopsFrieze, GROUND_Y, MOUTH, troyFrieze, VB_FIT_H, VB_H, VB_W, VB_Y } from "./frieze";
+import { createPanel, TABS, type Tab } from "./panel";
+import { VoyageScene, ease, webglAvailable } from "./scene";
+import { applyPick, bright, byTrack, COURSE_Y_C, hStrip, indexOf, routeOf, songMotifs, stripX } from "./threads";
 
 mountCredits();
+
+/* ---------- beats (13's five, each with the song the panel follows) ---------- */
+
+interface Beat { short: string; eyebrow: string; caption: string; songId: string }
+const BEATS: Beat[] = [
+  { short: "Frieze", eyebrow: "The Troy Saga · year 0", caption: "Troy falls", songId: "the-horse-and-the-infant" },
+  { short: "To sea", eyebrow: "Between sagas · a year at sea", caption: "Out on the open sea", songId: "full-speed-ahead" },
+  { short: "Landfall", eyebrow: "The Cyclops Saga · year 1", caption: "Landfall: Cyclops' Island", songId: "polyphemus" },
+  { short: "Curtain", eyebrow: "The Cyclops Saga", caption: "Polyphemus", songId: "polyphemus" },
+  { short: "Cave", eyebrow: "Inside the cave", caption: "Into the cave", songId: "survive" },
+];
+const SEG_DUR = [1.8, 2.0, 1.2, 1.6];
+const HOLD = 3.4;
+const songById = (id: string) => songs.find((s) => s.id === id)!;
+/** Each beat's song as an index on the voyage (track order), so strip markers can sail between them. */
+const BEAT_IDX = BEATS.map((b) => indexOf(songById(b.songId)));
+
+type Paths = "a" | "b" | "c";
+const PATHS: Record<Paths, string> = { a: "In the panel", b: "In the world", c: "Timeline" };
+
+/* ---------- params ---------- */
+
+const params = new URLSearchParams(location.search);
+const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+const clampBeat = (n: number) => Math.min(5, Math.max(1, Math.round(n) || 1));
+const startBeat = clampBeat(Number(params.get("beat") ?? 1));
+const freezeT = params.has("t") ? Math.min(1, Math.max(0, Number(params.get("t")) || 0)) : null;
+const startTab: Tab = TABS.some((t) => t.id === params.get("tab")) ? (params.get("tab") as Tab) : "about";
+const startOpen = params.get("panel") !== "0";
+let paths: Paths = (["a", "b", "c"] as const).find((m) => m === params.get("paths")) ?? "a";
+let pick: string | null = params.get("motif");
+
+/* ---------- DOM ---------- */
+
+const app = document.getElementById("app")!;
+const esc = (s: string) => s.replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" })[c]!);
+app.className = "shell";
+app.innerHTML = `
+  <section class="stage" id="stage" aria-label="The voyage, in five beats">
+    <div class="stage__three" id="three"></div>
+    <div class="stage__fallback" id="fallback" hidden><p>3D needs WebGL; the frieze beats still play.</p></div>
+    <div class="frieze-box" id="fzbox" aria-hidden="true"></div>
+    <div class="frieze-host frieze-host--troy" id="troy">${troyFrieze(songById(BEATS[0]!.songId))}</div>
+    <div class="frieze-host frieze-host--cyclops" id="cyclops">${cyclopsFrieze(songById(BEATS[3]!.songId))}</div>
+    <div class="wlabels" id="wlabels" aria-label="Motif threads in the world"></div>
+    <div class="cut" id="cut" aria-hidden="true"></div>
+    <header class="cap" id="cap" aria-live="polite">
+      <p class="lbl cap__eyebrow" id="cap-eyebrow"></p>
+      <h1 class="cap__title" id="cap-title"></h1>
+      <button type="button" class="back" id="back" hidden>Back to sea</button>
+    </header>
+    <nav class="hud" id="hud" aria-label="Beats and paths">
+      <div class="hud__row">
+        <button type="button" class="hud__play" id="play" aria-pressed="false">Play</button>
+        <button type="button" class="hud__step" id="prev" aria-label="Previous beat">←</button>
+        <ol class="dots" id="dots">
+          ${BEATS.map((b, i) => `<li><button type="button" data-beat="${i + 1}"><span class="dots__n">${i + 1}</span><span class="lbl dots__label">${esc(b.short)}</span></button></li>`).join("")}
+        </ol>
+        <button type="button" class="hud__step" id="next" aria-label="Next beat">→</button>
+        <div class="ptoggle" role="group" aria-label="Where the motif paths are shown">
+          <span class="lbl ptoggle__label">Paths</span>
+          ${(["a", "b", "c"] as Paths[]).map((m) => `<button type="button" data-paths="${m}" title="${PATHS[m]}">${m.toUpperCase()}</button>`).join('<span class="ptoggle__sep" aria-hidden="true">·</span>')}
+          <span class="ptoggle__name" id="paths-name"></span>
+        </div>
+      </div>
+      <div class="tl" id="tl"></div>
+    </nav>
+  </section>
+  <aside class="panel" id="panel" aria-label="Song companion"></aside>`;
+
+const $ = (id: string) => document.getElementById(id)!;
+const stage = $("stage");
+const troy = $("troy");
+const cyclops = $("cyclops");
+const cut = $("cut");
+const capEl = $("cap");
+const tl = $("tl");
+const wlabels = $("wlabels");
+const playBtn = $("play") as HTMLButtonElement;
+const backBtn = $("back") as HTMLButtonElement;
+const troyParts = {
+  figs: troy.querySelector<SVGGElement>(".f-figs")!,
+  top: troy.querySelector<SVGGElement>(".f-top")!,
+  bottom: troy.querySelector<SVGGElement>(".f-bottom")!,
+  horizon: troy.querySelector<SVGPathElement>(".horizon-line")!,
+};
+const cyParts = {
+  zoom: cyclops.querySelector<SVGGElement>(".f-zoom")!,
+  mouth: cyclops.querySelector<SVGPathElement>(".mouth-fill")!,
+};
+
+const setParam = (k: string, v: string | null) => {
+  const u = new URL(location.href);
+  if (v === null) u.searchParams.delete(k);
+  else u.searchParams.set(k, v);
+  history.replaceState(null, "", u);
+};
+
+let scene: VoyageScene | null = null;
+if (webglAvailable()) {
+  try { scene = new VoyageScene($("three"), reduced); } catch { scene = null; }
+}
+if (!scene) $("fallback").hidden = false;
+
+const panel = createPanel($("panel"), {
+  tab: startTab,
+  open: startOpen,
+  reduced,
+  pick,
+  pinned: paths === "a",
+  onTab: (t) => setParam("tab", t),
+  onOpen: (o) => { app.dataset.panel = o ? "open" : "closed"; setParam("panel", o ? null : "0"); },
+  onPick: (id) => setPick(id),
+});
+app.dataset.panel = startOpen ? "open" : "closed";
+const here = panel.here;
+
+/* ---------- motif pick: one choice, highlighted everywhere ---------- */
+
+let song: Song = songById(BEATS[0]!.songId);
+
+function setPick(id: string | null) {
+  pick = id;
+  panel.setPick(id);
+  scene?.setPick(id);
+  applyPick(stage, id);
+  setParam("motif", id);
+}
+stage.addEventListener("click", (e) => {
+  const b = (e.target as Element).closest<Element>("[data-pick]");
+  if (b) { const id = b.getAttribute("data-pick"); setPick(pick === id ? null : id); }
+});
+
+/** The song the panel, the threads and the labels follow (switches at each transition's midpoint). */
+function setSong(next: Song) {
+  song = next;
+  if (pick && !songMotifs(next).some((m) => m.id === pick)) pick = null;
+  panel.setSong(next);
+  scene?.setThreadSong(next);
+  renderLabels();
+  renderTimeline();
+  setPick(pick);
+}
+
+/* ---------- paths B: floating labels over the 3D ribbons ---------- */
+
+function renderLabels() {
+  wlabels.innerHTML = songMotifs(song).map((m) => {
+    const r = routeOf(song, m.id);
+    return `<button type="button" class="wl" data-m="${m.id}" data-pick="${m.id}" aria-pressed="false" style="--c:${bright(m.id)}" title="${esc(m.name)}: ${esc(r.from)} · ${esc(r.next)}">
+      <span class="wl__name"><i aria-hidden="true"></i>${esc(m.name)}</span><span class="wl__note" data-note></span></button>`;
+  }).join("");
+}
+
+function placeLabels() {
+  if (!scene || paths !== "b") return;
+  const vis = p < 2 ? clamp01((p - 0.6) / 0.25) * (1 - clamp01((p - 2) / 0.25)) : p < 3.5 ? 1 - clamp01((p - 2) / 0.25) : clamp01((p - 3.78) / 0.15);
+  wlabels.style.opacity = String(vis);
+  wlabels.style.visibility = vis > 0.02 ? "visible" : "hidden";
+  if (vis <= 0.02) return;
+  const pts = scene.labelPoints(p);
+  const cur = indexOf(song);
+  const btns = [...wlabels.querySelectorAll<HTMLElement>(".wl")];
+  // stack labels that would overlap, nearest the knot first
+  const placed: { x: number; y: number }[] = [];
+  pts.map((pt, k) => ({ pt, k })).sort((a, b) => b.pt.y - a.pt.y).forEach(({ pt, k }) => {
+    const el = btns[k];
+    if (!el) return;
+    let y = pt.y;
+    for (const q of placed) if (Math.abs(q.x - pt.x) < 200 && Math.abs(q.y - y) < 54) y = q.y - 56;
+    placed.push({ x: pt.x, y });
+    el.hidden = !pt.visible;
+    el.style.transform = `translate(${Math.round(pt.x)}px, ${Math.round(y)}px)`;
+    const s = byTrack[pt.song]!;
+    const note = el.querySelector("[data-note]")!;
+    const text = pt.ahead ? `next: ${s.track}. ${s.title}` : pt.song === cur ? "not heard again after this" : `last heard: ${s.track}. ${s.title}`;
+    if (note.textContent !== text) note.textContent = text;
+  });
+}
+
+/* ---------- paths C: the timeline at the bottom ---------- */
+
+const TL = { labelW: 168, rowH: 20, titles: true } as const;
+function renderTimeline() {
+  if (paths !== "c") { tl.innerHTML = ""; return; }
+  const width = tl.clientWidth;
+  if (!width) return;
+  tl.innerHTML = hStrip({ ...TL, width, song, pick });
+}
+
+/* ---------- state ---------- */
+
+let p = freezeT !== null ? Math.max(0, startBeat - 2 + freezeT) : startBeat - 1;
+let anim: { from: number; to: number; start: number; dur: number } | null = null;
+let cutting = false;
+let playing = false;
+let holdUntil = 0;
+let shownBeat = -1;
+
+const clamp01 = (x: number) => Math.min(1, Math.max(0, x));
+const easeIn = (x: number) => { const t = clamp01(x); return t * t * t; };
+const easeInOut = (x: number) => { const t = clamp01(x); return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2; };
+
+/** The ship's place on the voyage (fractional song index) at beat position p. */
+function shipIdx(): number {
+  const i = Math.min(3, Math.floor(p));
+  const k = i === 1 ? easeInOut(p - 1) : ease(p - i);
+  return BEAT_IDX[i]! + (BEAT_IDX[i + 1]! - BEAT_IDX[i]!) * k;
+}
+
+/** How the band-cropped frieze sits in its box on the stage (px). */
+let fit = { s: 1, oy: 0 };
+function measureFit() {
+  const box = $("fzbox");
+  const w = box.clientWidth, h = box.clientHeight;
+  if (!w || !h) return;
+  const s = Math.min(w / VB_W, h / VB_FIT_H);
+  fit = { s, oy: box.offsetTop + (h - VB_FIT_H * s) / 2 };
+  const H = stage.clientHeight;
+  scene?.setHorizon((fit.oy + (GROUND_Y - VB_Y) * s) / H);
+}
+
+/* ---------- render: everything is a function of p ---------- */
+
+function renderDom() {
+  const s0 = clamp01(p);
+  troy.hidden = s0 >= 1;
+  if (!troy.hidden) {
+    const flat = ease(s0 / 0.32);
+    troyParts.figs.setAttribute("transform", `translate(0,${GROUND_Y}) scale(1,${(1 - flat).toFixed(4)}) translate(0,${-GROUND_Y})`);
+    troyParts.figs.style.opacity = String(1 - ease((s0 - 0.1) / 0.24));
+    const part = easeInOut((s0 - 0.12) / 0.5);
+    troyParts.top.setAttribute("transform", `translate(0,${(-part * (GROUND_Y + 700)).toFixed(1)})`);
+    troyParts.bottom.setAttribute("transform", `translate(0,${(part * (VB_H - GROUND_Y + 700)).toFixed(1)})`);
+    troyParts.horizon.style.opacity = String(1 - ease((s0 - 0.5) / 0.22));
+  }
+
+  // "You are here" on the route chart (Paths tab) follows the ship from open sea to the island.
+  const [hx, hy] = hereAt(ease((p - 1.1) / 0.8));
+  here.setAttribute("transform", `translate(${hx.toFixed(1)},${hy.toFixed(1)})`);
+
+  cyclops.hidden = p <= 2;
+  if (!cyclops.hidden) {
+    const drop = easeInOut(p - 2);
+    // the curtain falls from fully above the stage: its glaze reaches 600 units below the viewBox
+    const travel = fit.oy + (VB_H + 600 - VB_Y) * fit.s + 24;
+    cyclops.style.transform = `translateY(${((drop - 1) * travel).toFixed(1)}px)`;
+    const z = clamp01(p - 3);
+    cyParts.mouth.style.opacity = String(1 - ease(z / 0.28));
+    const scale = 1 + 15 * easeIn((z - 0.08) / 0.92);
+    cyParts.zoom.setAttribute("transform", `translate(${MOUTH.x},${MOUTH.y}) scale(${scale.toFixed(4)}) translate(${-MOUTH.x},${-MOUTH.y})`);
+    cyclops.style.opacity = String(1 - ease((z - 0.72) / 0.26));
+  }
+  stage.dataset.world = p < 0.5 ? "frieze" : p < 2.5 ? "sea" : p < 3.5 ? "frieze" : "cave";
+
+  // Captions dip and swap at each transition's midpoint; the panel and threads follow the same beat.
+  const near = Math.round(p);
+  const d = Math.abs(p - near);
+  capEl.style.opacity = String(clamp01(1 - d * 3.2));
+  if (near !== shownBeat) {
+    shownBeat = near;
+    const b = BEATS[near]!;
+    $("cap-eyebrow").textContent = b.eyebrow;
+    $("cap-title").textContent = b.caption;
+    backBtn.hidden = near !== 4;
+    if (b.songId !== song.id || !panelReady) { panelReady = true; setSong(songById(b.songId)); }
+  }
+  const target = anim ? anim.to : Math.round(p);
+  document.querySelectorAll<HTMLButtonElement>("#dots button").forEach((btn, i) => {
+    if (i === target) btn.setAttribute("aria-current", "step");
+    else btn.removeAttribute("aria-current");
+  });
+  ($("prev") as HTMLButtonElement).disabled = target <= 0;
+  ($("next") as HTMLButtonElement).disabled = target >= 4;
+
+  // the ship markers on the strips (A in the panel, C at the bottom) sail with the voyage
+  const idx = shipIdx();
+  if (paths === "a") panel.setShip(idx);
+  if (paths === "c") {
+    const m = tl.querySelector<SVGGElement>("[data-ship]");
+    if (m) m.setAttribute("transform", `translate(${stripX({ ...TL, width: tl.clientWidth }, idx).toFixed(1)},${COURSE_Y_C})`);
+  }
+  placeLabels();
+}
+let panelReady = false;
+
+/* ---------- navigation ---------- */
+
+function go(to: number) {
+  if (freezeT !== null || cutting) return;
+  to = Math.min(4, Math.max(0, to));
+  if (anim) { p = anim.to; anim = null; }
+  if (to === p) return;
+  if (reduced || Math.abs(to - p) !== 1) crossCut(to);
+  else anim = { from: p, to, start: performance.now(), dur: SEG_DUR[Math.min(p, to)]! * 1000 };
+}
+
+function crossCut(to: number) {
+  cutting = true;
+  cut.classList.add("is-on");
+  window.setTimeout(() => {
+    p = to;
+    renderDom();
+    cut.classList.remove("is-on");
+    window.setTimeout(() => { cutting = false; holdUntil = performance.now() + HOLD * 1000; }, 380);
+  }, reduced ? 260 : 300);
+}
+
+function setPlaying(on: boolean) {
+  playing = on;
+  playBtn.textContent = on ? "Pause" : "Play";
+  playBtn.setAttribute("aria-pressed", String(on));
+  if (on) {
+    if (Math.round(p) >= 4 && !anim) go(0);
+    holdUntil = performance.now() + 1200;
+  }
+}
+
+function setPaths(m: Paths) {
+  paths = m;
+  document.body.dataset.paths = m;
+  panel.setPinned(m === "a");
+  scene?.setPaths(m === "b");
+  wlabels.hidden = m !== "b";
+  document.querySelectorAll<HTMLButtonElement>(".ptoggle button").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.paths === m)));
+  $("paths-name").textContent = PATHS[m];
+  setParam("paths", m === "a" ? null : m);
+  measureFit();
+  renderTimeline();
+  applyPick(stage, pick);
+  renderDom();
+}
+
+playBtn.addEventListener("click", () => setPlaying(!playing));
+$("prev").addEventListener("click", () => { setPlaying(false); go((anim ? anim.to : p) - 1); });
+$("next").addEventListener("click", () => { setPlaying(false); go((anim ? anim.to : p) + 1); });
+backBtn.addEventListener("click", () => { setPlaying(false); go(1); });
+document.querySelectorAll<HTMLButtonElement>("#dots button").forEach((b) =>
+  b.addEventListener("click", () => { setPlaying(false); go(Number(b.dataset.beat) - 1); }));
+document.querySelectorAll<HTMLButtonElement>(".ptoggle button").forEach((b) =>
+  b.addEventListener("click", () => setPaths(b.dataset.paths as Paths)));
+window.addEventListener("keydown", (e) => {
+  // Keys inside the panel (tabs, audio, links) belong to the panel.
+  if (e.target instanceof Element && e.target.closest(".panel")) return;
+  if (e.key === "ArrowRight") { setPlaying(false); go((anim ? anim.to : p) + 1); }
+  else if (e.key === "ArrowLeft") { setPlaying(false); go((anim ? anim.to : p) - 1); }
+  else if (e.key === " " && !(e.target instanceof HTMLButtonElement)) { e.preventDefault(); setPlaying(!playing); }
+});
+
+/* ---------- loop ---------- */
+
+const t0 = performance.now();
+function frame(now: number) {
+  if (anim) {
+    const k = clamp01((now - anim.start) / anim.dur);
+    p = anim.from + (anim.to - anim.from) * k;
+    if (k >= 1) { p = anim.to; anim = null; holdUntil = now + HOLD * 1000; }
+  } else if (playing && !cutting && now >= holdUntil) {
+    if (Math.round(p) >= 4) setPlaying(false);
+    else go(Math.round(p) + 1);
+  }
+  scene?.render(p, (now - t0) / 1000 + 2.2);
+  renderDom();
+  requestAnimationFrame(frame);
+}
+
+new ResizeObserver(() => { measureFit(); renderTimeline(); applyPick(stage, pick); }).observe(stage);
+setPaths(paths);
+requestAnimationFrame(frame);
+if (params.get("play") === "1" && freezeT === null) setPlaying(true);
diff --git a/src/mockups/16-voyage-readable/style.css b/src/mockups/16-voyage-readable/style.css
index 75afc84..40c8682 100644
--- a/src/mockups/16-voyage-readable/style.css
+++ b/src/mockups/16-voyage-readable/style.css
@@ -1 +1,593 @@
-body { margin: 0; --stub-16: 1; }
+/* 15 · Voyage, look 2 — 14's voyage in look 2 only, with look 3's cohesion (one ornament, one type
+   pairing, terracotta + black accents across frieze, panel and HUD) and the motif paths out in the open. */
+@import "@fontsource/cormorant-garamond/latin-500.css";
+@import "@fontsource/cormorant-garamond/latin-600.css";
+@import "@fontsource/cormorant-garamond/latin-700.css";
+@import "@fontsource/cormorant-garamond/latin-500-italic.css";
+@import "@fontsource/inter/latin-400.css";
+@import "@fontsource/inter/latin-600.css";
+
+:root {
+  /* black-figure (04): the frieze, and now the accents of the whole interface */
+  --clay: #c46a33;
+  --clay-deep: #9a4520;
+  --glaze: #1d140e;
+  --added-white: #efe3c8;
+  /* vellum (12): the reading surfaces */
+  --vellum: #e3d6b4;
+  --vellum-hi: #ece2c6;
+  --vellum-lo: #e0d1ab;
+  --iron: #2b2118;
+  --iron-soft: #5a4836;
+  --line: rgb(43 33 24 / 0.2);
+  --serif: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
+  --sans: "Inter", system-ui, sans-serif;
+  --panel-w: 420px;
+  --panel-slim: 56px;
+  /* the frieze's key band, as a strip: shared by the frieze, the panel's top edge and the HUD */
+  --meander: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Crect width='28' height='28' fill='%23c46a33'/%3E%3Cpath d='M0 25.2H28M4.2 25.2V3H24V20.3H9.8V8.4H18.2V14.7' fill='none' stroke='%231d140e' stroke-width='3.2'/%3E%3C/svg%3E");
+  /* where the fitted frieze sits on the stage: between the caption and the HUD */
+  --fz-top: 116px;
+  --fz-bot: 92px;
+}
+body[data-paths="c"] { --fz-bot: 218px; }
+
+* { box-sizing: border-box; }
+html, body { height: 100%; }
+body {
+  margin: 0;
+  height: 100dvh;
+  display: grid;
+  grid-template-rows: minmax(0, 1fr) auto;
+  overflow: hidden;
+  background: var(--glaze);
+  color: var(--iron);
+  font-family: var(--sans);
+  -webkit-font-smoothing: antialiased;
+}
+button { font: inherit; color: inherit; }
+:focus-visible { outline: 3px solid var(--clay); outline-offset: 2px; }
+[hidden] { display: none !important; }
+
+/* one label style everywhere: the frieze's inscriptions (Cormorant, capitals, wide tracking) */
+.lbl { font: 600 0.875rem/1.2 var(--serif); letter-spacing: 0.16em; text-transform: uppercase; }
+
+/* the shared ornament: a meander strip between two glaze rules */
+.meander-edge::before, .cap::before, .hud::before, .panel::before {
+  content: "";
+  position: absolute;
+  left: 0; right: 0; top: 0;
+  height: 14px;
+  background: var(--meander) 0 0 / 14px 14px repeat-x;
+  border-top: 2px solid var(--glaze);
+  border-bottom: 2px solid var(--glaze);
+  pointer-events: none;
+}
+
+/* ---------- shell: stage | panel, credits below both ---------- */
+.shell {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) var(--panel-w);
+  transition: grid-template-columns 0.42s cubic-bezier(0.22, 0.8, 0.2, 1);
+}
+.shell[data-panel="closed"] { grid-template-columns: minmax(0, 1fr) var(--panel-slim); }
+[data-fan-credits] {
+  position: relative;
+  z-index: 5;
+  padding: 0.8rem 1.5rem;
+  background: var(--glaze);
+  color: var(--added-white);
+  opacity: 1;
+  border-top: 2px solid var(--clay);
+}
+
+/* ---------- stage ---------- */
+.stage {
+  position: relative;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  background: var(--glaze);
+  isolation: isolate;
+}
+.stage__three, .cut, .stage__fallback { position: absolute; inset: 0; }
+.stage__three { z-index: 0; }
+.stage__canvas { display: block; width: 100%; height: 100%; }
+.stage__fallback { display: grid; place-items: center; background: linear-gradient(#a9c3c0, #f4dfb4 60%, #1d5a6e 61%); color: var(--iron); }
+
+/* ---------- friezes: fitted between caption and HUD ---------- */
+.frieze-host, .frieze-box { position: absolute; left: 0; right: 0; top: var(--fz-top); bottom: var(--fz-bot); }
+.frieze-box { visibility: hidden; pointer-events: none; }
+.frieze-host { z-index: 2; pointer-events: none; will-change: transform, opacity; }
+.frieze { display: block; width: 100%; height: 100%; overflow: visible; }
+.frieze-host--cyclops { z-index: 3; }
+.f-surround { fill: var(--glaze); }
+.f-band { fill: var(--clay); }
+.ink { fill: var(--glaze); }
+.clay { fill: var(--clay); }
+.inc { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
+.limb { fill: none; stroke: var(--glaze); stroke-linecap: round; stroke-linejoin: round; }
+.limb-edge { fill: none; stroke: var(--clay); stroke-linecap: round; stroke-linejoin: round; }
+.oar { stroke: var(--glaze); stroke-width: 3.2; stroke-linecap: round; }
+.rig { fill: none; stroke: var(--glaze); stroke-width: 1.4; }
+.wave { fill: none; stroke: var(--glaze); stroke-linecap: round; }
+.ground { stroke: var(--glaze); stroke-width: 3.5; }
+.rule { fill: none; stroke: var(--glaze); stroke-width: 2.6; }
+.vol { fill: none; stroke: var(--glaze); stroke-width: 3; stroke-linecap: round; }
+.mean { fill: none; stroke: var(--glaze); stroke-width: 3; }
+.scroll { fill: none; stroke: var(--glaze); stroke-width: 3.4; stroke-linecap: round; }
+.frame-rule { display: none; }
+.inscr { font: 600 19px var(--serif); letter-spacing: 0.2em; fill: var(--glaze); }
+.saga-name { font: 600 15px var(--serif); letter-spacing: 0.22em; fill: var(--glaze); }
+.glow-a { stop-color: #e2803a; }
+.glow-b { stop-color: #3a170a; }
+.glow-c { stop-color: #0c0705; }
+
+/* paths B in the frieze: the register under the ground line carries the motif threads */
+.f-threads { display: none; }
+body[data-paths="b"] .f-threads { display: inline; }
+body[data-paths="b"] .f-scroll { display: none; }
+.ft { pointer-events: auto; cursor: pointer; transition: opacity 0.2s ease; }
+.ft__edge { fill: none; stroke: var(--glaze); stroke-width: 8; stroke-linecap: round; }
+.ft__line { fill: none; stroke: var(--c); stroke-width: 4.2; stroke-linecap: round; }
+.ft__knot { fill: var(--added-white); stroke: var(--glaze); stroke-width: 3; }
+.ft__knot.is-here { fill: var(--c); }
+.ft__dot { fill: var(--c); stroke: var(--glaze); stroke-width: 2.4; }
+.ft__name { font: 700 17px var(--serif); letter-spacing: 0.12em; fill: var(--glaze); }
+.ft.is-on .ft__line { stroke-width: 6; }
+.ft.is-on .ft__edge { stroke-width: 10; }
+.ft.is-dim { opacity: 0.28; }
+
+.cut {
+  z-index: 6;
+  background: var(--glaze);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+}
+.cut.is-on { opacity: 1; }
+
+/* ---------- caption card ---------- */
+.cap {
+  position: absolute;
+  z-index: 7;
+  top: 22px;
+  left: 24px;
+  max-width: 440px;
+  padding: 22px 20px 12px;
+  background: var(--vellum-hi);
+  color: var(--iron);
+  border: 2px solid var(--glaze);
+  border-radius: 2px;
+  box-shadow: 0 10px 28px -14px rgb(0 0 0 / 0.6);
+  overflow: hidden;
+}
+.cap::before { border-top: 0; }
+.cap__eyebrow { margin: 0; color: var(--clay-deep); }
+.cap__title { margin: 4px 0 0; font: 600 2rem/1.1 var(--serif); }
+.back {
+  margin-top: 8px;
+  padding: 5px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--glaze);
+  color: var(--added-white);
+  font-size: 0.875rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+/* ---------- HUD: the step bar (A, B) or the bottom timeline (C) ---------- */
+.hud {
+  position: absolute;
+  z-index: 7;
+  left: 50%;
+  bottom: 18px;
+  transform: translateX(-50%);
+  padding: 20px 12px 8px;
+  background: var(--vellum-hi);
+  color: var(--iron);
+  border: 2px solid var(--glaze);
+  border-radius: 2px;
+  box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.65);
+  white-space: nowrap;
+  overflow: hidden;
+}
+.hud::before { border-top: 0; height: 12px; background-size: 12px 12px; }
+.hud__row { display: flex; align-items: center; gap: 8px; }
+.hud button { cursor: pointer; }
+.hud__play {
+  min-width: 74px;
+  padding: 7px 14px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--glaze);
+  color: var(--added-white);
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+.hud__step {
+  width: 32px; height: 32px;
+  border: 1.5px solid var(--glaze);
+  border-radius: 50%;
+  background: transparent;
+}
+.hud__step:disabled { opacity: 0.3; cursor: default; }
+.dots { display: flex; gap: 0; margin: 0; padding: 0; list-style: none; }
+.dots button {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 6px 5px 4px;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--iron-soft);
+}
+.dots__label { font-size: 0.8125rem; letter-spacing: 0.1em; }
+.dots__n {
+  display: inline-grid;
+  place-items: center;
+  width: 21px; height: 21px;
+  border: 1.5px solid currentColor;
+  border-radius: 50%;
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+.dots button[aria-current] { color: var(--iron); }
+.dots button[aria-current] .dots__label { font-weight: 700; }
+.dots button[aria-current] .dots__n { background: var(--clay); border-color: var(--glaze); color: var(--glaze); }
+.ptoggle { display: flex; align-items: center; gap: 4px; margin-left: 6px; padding-left: 12px; border-left: 1.5px solid var(--line); }
+.ptoggle__label { margin-right: 4px; font-size: 0.8125rem; color: var(--iron-soft); }
+.ptoggle__sep { color: var(--iron-soft); }
+.ptoggle button {
+  width: 28px; height: 28px;
+  border: 1.5px solid transparent;
+  border-radius: 50%;
+  background: transparent;
+  font: 700 0.95rem var(--serif);
+}
+.ptoggle button:hover { border-color: var(--line); }
+.ptoggle button[aria-pressed="true"] { background: var(--clay); border-color: var(--glaze); color: var(--glaze); }
+.ptoggle__name { min-width: 84px; margin-left: 6px; font: italic 500 1rem var(--serif); color: var(--iron-soft); }
+.tl { display: none; }
+
+/* C: the HUD grows into the voyage timeline across the bottom of the stage */
+body[data-paths="c"] .hud { left: 20px; right: 20px; bottom: 16px; transform: none; padding: 20px 16px 6px; }
+body[data-paths="c"] .hud__row { padding-bottom: 6px; border-bottom: 1px solid var(--line); }
+body[data-paths="c"] .ptoggle { margin-left: auto; }
+body[data-paths="c"] .tl { display: block; padding-top: 4px; }
+
+/* ---------- horizontal thread strips (A in the panel, C at the bottom) ---------- */
+.hs { display: grid; grid-template-columns: var(--label-w) auto; align-items: start; }
+.hs__labels { display: flex; flex-direction: column; }
+.hs__course-label { height: var(--course-h); display: flex; align-items: center; padding-bottom: calc(var(--course-h) - 32px); font: 600 0.75rem var(--serif); letter-spacing: 0.16em; text-transform: uppercase; color: var(--iron-soft); }
+.hs__m {
+  display: flex; align-items: center; gap: 7px;
+  padding: 0 6px 0 0;
+  border: 0; border-radius: 3px;
+  background: transparent;
+  color: var(--c);
+  font-size: 0.78rem; font-weight: 600;
+  text-align: left; white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.hs__m i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--glaze); }
+.hs__m:hover { text-decoration: underline; text-underline-offset: 3px; }
+.hs__m.is-on { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
+.hs__m.is-dim { opacity: 0.4; }
+.hs__svg { display: block; overflow: visible; }
+.hs__here-band { fill: rgb(196 106 51 / 0.14); }
+.hs__course { fill: none; stroke: var(--clay-deep); stroke-width: 1.6; stroke-dasharray: 5 3.5; }
+.hs__saga { stroke: var(--glaze); stroke-width: 1.4; }
+.hs__saga-name { font: 600 9.5px var(--serif); letter-spacing: 0.16em; fill: var(--iron-soft); }
+.hs__stop circle { fill: var(--vellum-hi); stroke: var(--glaze); stroke-width: 1.6; }
+.hs__stop.is-current circle { fill: var(--clay); stroke-width: 2; }
+.hs__num { font: 600 10px var(--sans); fill: var(--iron-soft); text-anchor: middle; }
+.hs__num.is-current { fill: var(--iron); }
+.hs__title { font: 500 11px var(--sans); fill: var(--iron-soft); text-anchor: middle; }
+.hs__title.is-current { font-weight: 600; fill: var(--iron); }
+.hs__ship-hull, .hs__ship-sail { fill: var(--clay); stroke: var(--glaze); stroke-width: 1.4; stroke-linejoin: round; }
+.hs__ship-mast { stroke: var(--glaze); stroke-width: 1.6; }
+.hs__here { font: italic 600 12px var(--serif); fill: var(--clay-deep); }
+.thread { transition: opacity 0.2s ease; }
+.thread__line { fill: none; stroke: var(--c); stroke-width: 2.4; stroke-linecap: round; opacity: 0.85; }
+.thread__knot { fill: var(--vellum-hi); stroke: var(--c); stroke-width: 2.2; }
+.thread__knot.is-here { fill: var(--c); stroke: var(--glaze); stroke-width: 1.6; }
+.thread.is-on .thread__line { stroke-width: 3.8; opacity: 1; }
+.thread.is-on .thread__knot { fill: var(--c); }
+.thread.is-dim { opacity: 0.2; }
+
+/* ---------- B: floating labels over the 3D ribbons ---------- */
+.wlabels { position: absolute; inset: 0; z-index: 5; pointer-events: none; transition: opacity 0.2s linear; }
+.wl {
+  position: absolute;
+  left: 0; top: 0;
+  translate: -50% calc(-100% - 14px);
+  display: grid;
+  gap: 0;
+  padding: 4px 10px 5px;
+  border: 1.5px solid var(--glaze);
+  border-left: 5px solid var(--c);
+  border-radius: 2px;
+  background: var(--vellum-hi);
+  color: var(--iron);
+  text-align: left;
+  white-space: nowrap;
+  pointer-events: auto;
+  cursor: pointer;
+  box-shadow: 0 6px 14px -8px rgb(0 0 0 / 0.6);
+  transition: opacity 0.2s ease;
+}
+.wl::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 14px; background: var(--glaze); }
+.wl__name { display: flex; align-items: center; gap: 6px; font: 700 0.8125rem/1.2 var(--serif); letter-spacing: 0.12em; text-transform: uppercase; }
+.wl__name i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1.5px var(--glaze); }
+.wl__note { font-size: 0.75rem; color: var(--iron-soft); }
+.wl.is-on { outline: 2px solid var(--clay); outline-offset: 1px; }
+.wl.is-dim { opacity: 0.45; }
+
+/* ---------- the panel ---------- */
+.panel {
+  position: relative;
+  z-index: 8;
+  min-height: 0;
+  min-width: 0;
+  overflow: hidden;
+  background:
+    repeating-linear-gradient(90deg, rgb(91 65 40 / 0.03) 0 1px, transparent 1px 7px),
+    linear-gradient(180deg, var(--vellum-hi), #e6d9b8);
+  color: var(--iron);
+  border-left: 2px solid var(--glaze);
+  box-shadow: -14px 0 30px -18px rgb(0 0 0 / 0.7);
+  font-size: 15px;
+  line-height: 1.5;
+}
+.panel::before { z-index: 3; height: 18px; background-size: 18px 18px; border-top: 0; }
+.panel__body {
+  position: absolute;
+  inset: 0;
+  width: calc(var(--panel-w) - 2px);
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+  padding-top: 18px;
+  transition: opacity 0.25s ease, transform 0.42s cubic-bezier(0.22, 0.8, 0.2, 1);
+}
+.panel[data-open="false"] .panel__body { opacity: 0; transform: translateX(40px); pointer-events: none; }
+
+.panel__head { display: flex; align-items: flex-start; gap: 12px; padding: 16px 22px 10px 24px; }
+.panel__song { flex: 1; min-width: 0; transition: opacity 0.18s ease, transform 0.18s ease; }
+.panel__eyebrow { margin: 0; font-size: 0.8125rem; color: var(--clay-deep); }
+.panel__title { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 2px; font: 600 2rem/1.05 var(--serif); }
+.panel__n, .panel__tab-n {
+  flex: none;
+  display: inline-grid;
+  place-items: center;
+  width: 30px; height: 30px;
+  border: 1.5px solid var(--glaze);
+  border-radius: 50%;
+  background: var(--clay);
+  color: var(--glaze);
+  font: 700 0.9375rem var(--sans);
+}
+.panel__n { transform: translateY(-3px); }
+.panel__sub { margin: 0; color: var(--iron-soft); }
+.panel__hide {
+  flex: none;
+  margin-top: 2px;
+  padding: 5px 12px;
+  border: 1.5px solid var(--line);
+  border-radius: 999px;
+  background: transparent;
+  font-size: 0.875rem;
+  color: var(--iron-soft);
+  cursor: pointer;
+}
+.panel__hide:hover { color: var(--iron); border-color: var(--glaze); }
+
+/* A: the pinned strip */
+.pin { margin: 2px 0 0; padding: 8px 22px 6px 24px; border-top: 1px solid var(--line); background: rgb(255 250 236 / 0.35); transition: opacity 0.18s ease; }
+.pin__head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 2px; font-size: 0.8125rem; color: var(--iron); }
+.pin__head span { font: italic 500 0.95rem var(--serif); letter-spacing: 0; text-transform: none; color: var(--iron-soft); }
+
+.tabs { display: flex; gap: 4px; padding: 0 22px 0 24px; border-top: 1px solid var(--line); border-bottom: 1.5px solid var(--glaze); }
+.panel[data-pinned="false"] .tabs { border-top: 0; }
+.tabs button {
+  position: relative;
+  padding: 11px 9px 10px;
+  border: 0;
+  background: transparent;
+  color: var(--iron-soft);
+  font: 600 0.9375rem var(--serif);
+  letter-spacing: 0.1em;
+  white-space: nowrap;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+.tabs button[aria-selected="true"] { color: var(--iron); font-weight: 700; }
+.tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1.5px; height: 4px; background: var(--clay); border: 1px solid var(--glaze); border-bottom: 0; }
+.panel__view {
+  min-height: 0;
+  overflow: auto;
+  padding: 18px 22px 28px 24px;
+  scrollbar-width: thin;
+  scrollbar-color: var(--line) transparent;
+  transition: opacity 0.18s ease, transform 0.18s ease;
+}
+.panel.is-swapping .panel__view, .panel.is-swapping .panel__song, .panel.is-swapping .pin { opacity: 0; transform: translateY(6px); }
+
+/* the slim tab, shown when collapsed */
+.panel__tab {
+  position: absolute;
+  inset: 18px 0 0;
+  width: var(--panel-slim);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  padding: 22px 0;
+  border: 0;
+  background: transparent;
+  color: var(--iron);
+  cursor: pointer;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.25s ease 0.1s;
+}
+.panel[data-open="false"] .panel__tab { opacity: 1; pointer-events: auto; }
+.panel__tab-arrow { font-size: 1.5rem; line-height: 1; color: var(--clay-deep); }
+.panel__tab-label { writing-mode: vertical-rl; font: 600 1rem var(--serif); letter-spacing: 0.16em; text-transform: uppercase; }
+
+/* ---------- panel content ---------- */
+.sec { margin: 22px 0 8px; font: 600 1.3rem/1.2 var(--serif); }
+.panel__view > div > .sec:first-child, .panel__view > div > div:first-child > .sec:first-child { margin-top: 0; }
+.note {
+  margin: 0 0 16px;
+  padding: 9px 12px;
+  border: 1px dashed var(--line);
+  border-radius: 4px;
+  color: var(--iron-soft);
+  font-size: 0.875rem;
+}
+.hint { margin: 0 0 10px; color: var(--iron-soft); font-size: 0.875rem; }
+
+/* About */
+.facts { margin: 0; display: grid; gap: 0; }
+.facts div { display: grid; grid-template-columns: 112px 1fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
+.facts dt { padding-top: 2px; font: 600 0.8125rem var(--serif); letter-spacing: 0.14em; text-transform: uppercase; color: var(--iron-soft); }
+.facts dd { margin: 0; }
+.facts a, .about a { color: var(--clay-deep); text-underline-offset: 3px; }
+.about__fact { margin: 14px 0 0; font: italic 500 1.2rem/1.35 var(--serif); }
+.parts { margin: 0; padding: 0; list-style: none; }
+.parts li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
+.parts__name { font-weight: 600; }
+.parts__who { color: var(--iron-soft); text-align: right; }
+.panel .audio-slot { padding: 12px 14px; border: 1px dashed var(--line); border-radius: 4px; color: var(--iron-soft); opacity: 1; font-size: 0.875rem; }
+.panel .video-cards { gap: 8px; }
+.panel .video-card {
+  position: relative;
+  padding: 9px 14px 9px 36px;
+  border: 1.5px solid var(--glaze);
+  border-radius: 2px;
+  background: #f3ecd8;
+  color: var(--iron);
+  font-weight: 600;
+}
+.panel .video-card::before {
+  content: "";
+  position: absolute;
+  left: 13px; top: 50%;
+  border: 6px solid transparent;
+  border-left: 9px solid var(--clay);
+  transform: translateY(-50%);
+}
+
+/* Paths: route chart */
+.route {
+  margin: 0;
+  padding: 8px 9px 6px;
+  background: linear-gradient(160deg, #ece2c6, #dccca5);
+  color: var(--iron);
+  border: 1.5px solid var(--glaze);
+  border-radius: 2px;
+}
+.route figcaption { margin-top: 4px; font: italic 500 0.95rem var(--serif); color: var(--iron-soft); }
+.chart__svg { display: block; width: 100%; height: auto; }
+.c-vellum { fill: #e6dab9; }
+.c-frame { fill: none; stroke: var(--iron); stroke-width: 0.8; }
+.c-rhumb { fill: none; stroke: rgb(154 69 32 / 0.18); stroke-width: 0.5; }
+.c-land { fill: #c9b07a; stroke: var(--iron); stroke-width: 0.9; }
+.c-ink { fill: none; stroke: var(--iron); stroke-width: 0.7; }
+.c-course { fill: none; stroke: var(--clay-deep); stroke-width: 1.3; stroke-dasharray: 3 2.4; }
+.c-port { fill: #f3ebd6; stroke: var(--iron); stroke-width: 0.9; }
+.c-num { font: 600 7px var(--sans); fill: var(--iron); }
+.c-place { font: 600 italic 14px var(--serif); fill: var(--iron); }
+.c-sea { font: italic 500 9px var(--serif); fill: var(--clay-deep); }
+.c-rose circle { fill: none; stroke: var(--iron-soft); stroke-width: 0.6; }
+.c-rose path { fill: var(--iron-soft); }
+.c-here__ring { fill: rgb(196 106 51 / 0.25); stroke: var(--clay-deep); stroke-width: 1.4; }
+.c-here__dot { fill: var(--clay-deep); }
+.c-here__label { font: 600 9.5px var(--sans); fill: var(--clay-deep); paint-order: stroke; stroke: #efe6cd; stroke-width: 2.5px; }
+
+/* Paths: motif picks */
+.mlist { margin: 0 0 12px; padding: 0; list-style: none; display: grid; gap: 6px; }
+.mpick {
+  width: 100%;
+  display: grid;
+  gap: 1px;
+  padding: 8px 12px 9px;
+  border: 1px solid var(--line);
+  border-left: 4px solid var(--c);
+  border-radius: 2px;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+.mpick:hover { background: var(--vellum-lo); }
+.mpick[aria-pressed="true"] { background: var(--vellum-lo); border-color: var(--c); }
+.mpick.is-dim { opacity: 0.5; }
+.mpick__name { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--c); }
+.mpick__name i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
+.mpick__path { color: var(--iron-soft); font-size: 0.875rem; }
+
+/* Paths: the vertical thread strip */
+.vstrip { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: start; }
+.vstrip__rows { grid-column: 1 / -1; grid-row: 1; margin: 0; padding: 0; list-style: none; }
+.vstrip__row {
+  width: 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 0 calc(var(--cols) * 26px + 30px) 0 8px;
+  border: 0;
+  border-radius: 2px;
+  background: transparent;
+  color: var(--iron-soft);
+  text-align: left;
+  font-size: 0.9375rem;
+  cursor: pointer;
+}
+.vstrip__row:hover { background: var(--vellum-lo); }
+.vstrip__row.is-current { color: var(--iron); font-weight: 600; background: rgb(196 106 51 / 0.14); }
+.vstrip__row.is-picked { outline: 2px solid var(--clay); outline-offset: -2px; color: var(--iron); }
+.vstrip__n { width: 18px; text-align: right; font-size: 0.8125rem; font-variant-numeric: tabular-nums; }
+.vstrip__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.vstrip__now { padding: 0 7px; border: 1px solid var(--glaze); border-radius: 999px; background: var(--clay); color: var(--glaze); font-size: 0.75rem; font-weight: 600; }
+.vstrip__threads { grid-column: 2; grid-row: 1; margin-right: 12px; pointer-events: none; overflow: visible; }
+
+/* Lyrics */
+.part { margin: 0 0 16px; padding: 4px 0 6px 14px; border-left: 4px solid var(--c); transition: opacity 0.2s ease, background-color 0.2s ease; }
+.part.is-on { background: color-mix(in srgb, var(--c) 9%, transparent); }
+.part.is-dim { opacity: 0.45; }
+.part__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 4px; }
+.part__head h3 { margin: 0; font: 600 1.3rem/1.2 var(--serif); font-variant-numeric: lining-nums; }
+.part__who { display: flex; flex-wrap: wrap; gap: 4px; }
+.singer { padding: 1px 9px; border: 1px solid var(--line); border-radius: 999px; font-size: 0.8125rem; font-weight: 600; color: var(--iron-soft); }
+.part__lines p { margin: 2px 0; font: italic 500 1.15rem/1.45 var(--serif); }
+.part__motifs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
+.mtag { display: inline-flex; align-items: center; gap: 6px; padding: 1px 9px 1px 7px; border: 1px solid transparent; border-radius: 999px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--c); font-size: 0.8125rem; font-weight: 600; cursor: pointer; }
+.mtag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
+.mtag:hover, .mtag.is-on { border-color: var(--c); }
+.mtag.is-on { background: color-mix(in srgb, var(--c) 26%, transparent); }
+
+/* Fan works */
+.fw { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
+.fw__card { display: grid; align-content: start; gap: 2px; padding: 0 0 10px; border-radius: 2px; background: #f3ecd8; border: 1.5px solid var(--glaze); overflow: hidden; }
+.fw__card > p { margin: 0 10px; }
+.fw__thumb { display: block; width: 100%; aspect-ratio: 16 / 10; margin-bottom: 6px; border-bottom: 1.5px solid var(--glaze); }
+.t-bg, .t-frame, .t-hole { fill: #d9c8a0; }
+.t-ink { fill: var(--iron); }
+.t-line { fill: none; stroke: #f3ead6; stroke-width: 2; stroke-linecap: round; }
+.fw__type { font-size: 0.75rem; color: var(--clay-deep); }
+.fw__title { font: 600 1.05rem/1.25 var(--serif); }
+.fw__by { font-size: 0.875rem; color: var(--iron-soft); }
+.fw__credit { margin-top: 4px !important; font-size: 0.8125rem; color: var(--iron-soft); text-decoration: underline dotted; text-underline-offset: 3px; }
+.fw__credit span { text-decoration: none; display: inline-block; }
+
+@media (prefers-reduced-motion: reduce) {
+  .cut { transition-duration: 0.25s; }
+  .shell, .panel__body, .panel__view, .panel__song, .pin { transition: none; }
+}