diff --git a/.vitepress/theme/components/HomeLanding.vue b/.vitepress/theme/components/HomeLanding.vue
index c3a4bcb3e..39e355711 100644
--- a/.vitepress/theme/components/HomeLanding.vue
+++ b/.vitepress/theme/components/HomeLanding.vue
@@ -1,270 +1,463 @@
 <script setup lang="ts">
-import { computed } from 'vue'
-import BrandIcon from './BrandIcon.vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 
 type Locale = 'en' | 'zh'
 
-type Face = 'surprised' | 'skeptical' | 'smiling'
+type Accent = 'bow' | 'aqua' | 'straw'
 
 type Project = {
   id: string
-  face: Face
   title: string
   label: string
+  narration: string
   summary: string
   href: string
   external?: boolean
-  accent: 'bow' | 'aqua' | 'straw'
-}
-
-type QA = {
-  face: Face
-  question: string
-  title: string
-  lines: string[]
+  more: string
+  accent: Accent
 }
 
 const props = withDefaults(defineProps<{ locale?: Locale }>(), { locale: 'en' })
 
 const content = {
   en: {
-    kicker: 'clice.io',
     bubble: 'Next Generation C++ Tooling',
     lead:
-      'A language server on the surface, a real-time compilation scheduler underneath. It drives Clang over your whole project and serves editors, linters, indexers and agents from the same engine.',
-    primary: { text: 'Start with clice', href: '/clice/guide/what-is-clice' },
-    secondary: { text: 'Read the Blog', href: '/blog' },
-    worksWith: 'Works with',
-    runsOn: 'Runs on',
+      'C++ tooling has long been a mess. We\u2019re building new tools to fix it: a language server that understands your whole project, a build interceptor that gets compile commands out of any build, and the C++23 library beneath them both.',
+    start: { text: 'Get started with clice', href: '/clice/guide/quick-start' },
     projectsTitle: 'Projects',
     projects: [
       {
         id: 'clice',
-        face: 'smiling',
         title: 'clice',
-        label: 'language server · scheduler',
-        summary:
-          'Compiles, indexes and answers queries for a whole project from one multi-process scheduler. The LSP is its first consumer; lint, index, query and doc follow.',
+        label: 'language server',
+        narration: 'The commands reach clice. It reads the whole project and answers your editor: VS Code, Neovim, Zed.',
+        summary: 'Header contexts, C++20 modules and completion inside templates, and it keeps going when Clang crashes.',
         href: '/clice/guide/what-is-clice',
+        more: 'Read the docs',
         accent: 'bow'
       },
       {
         id: 'catter',
-        face: 'surprised',
         title: 'catter',
         label: 'build interceptor',
-        summary:
-          'Hooks every process a build spawns to capture commands, generate compile_commands.json from any build system, profile the build and patch invocations.',
+        narration: 'Somewhere, a build starts: CMake, Meson, Bazel, Make\u2026',
+        summary: 'Hooks every process a build spawns to write compile_commands.json for any build system, and profiles the build.',
         href: '/catter/guide/what-is-catter',
+        more: 'Read the docs',
         accent: 'aqua'
       },
       {
         id: 'kotatsu',
-        face: 'skeptical',
         title: 'kotatsu',
-        label: 'C++23 toolkit',
-        summary:
-          'The infrastructure clice is built on: a coroutine runtime over libuv, compile-time reflection, attribute-driven codecs, typed IPC with LSP bindings, options and CLI.',
+        label: 'C++23 library',
+        narration: 'And holding both of them up: kotatsu.',
+        summary: 'A coroutine runtime over libuv, compile-time reflection, typed IPC with LSP bindings, options and CLI.',
         href: 'https://github.com/clice-io/kotatsu',
         external: true,
+        more: 'On GitHub',
         accent: 'straw'
       }
     ] satisfies Project[],
-    qaTitle: 'Why Another One?',
-    qa: [
-      {
-        face: 'skeptical',
-        question: 'Isn\u2019t clangd good enough?',
-        title: 'It never solved the hard ones.',
-        lines: [
-          'A file with several compile commands, a header that only makes sense inside its includer, a Clang crash taking the whole server down: clangd has carried these since day one.',
-          'clice answers them with compilation contexts, a multi-process design that keeps serving queries while a worker restarts, a dynamic module graph with shared PCH and PCM caches, and a pseudo-instantiator that keeps completion useful inside templates.'
-        ]
-      },
-      {
-        face: 'surprised',
-        question: 'Why put a scheduler inside a language server?',
-        title: 'Because Clang never had one.',
-        lines: [
-          'Clang exposes a compiler, not the act of compiling a project. The language server is only the first consumer of clice\u2019s scheduler.',
-          'clice lint, index, query, doc and format run on the same engine, and a cross-TU cache lets them skip the work clang-tidy repeats for every header.'
-        ]
-      },
-      {
-        face: 'smiling',
-        question: 'Can I use it today?',
-        title: 'Install the extension and go.',
-        lines: [
-          'The binary ships inside the VS Code extension for Windows, Linux and macOS on x64 and arm64. Nightlies roll out every day, and Neovim and Zed have first-party clients too.'
-        ]
-      }
-    ] satisfies QA[]
+    handoff: 'compile_commands.json'
   },
   zh: {
-    kicker: 'clice.io',
     bubble: '下一代 C++ 工具链',
     lead:
-      '表面上是一个语言服务器，内核是一个实时的编译调度器。它在整个项目上驱动 Clang，用同一个引擎服务编辑器、静态检查、索引和 Agent。',
-    primary: { text: '从 clice 开始', href: '/zh/clice/guide/what-is-clice' },
-    secondary: { text: '读博客', href: '/zh/blog' },
-    worksWith: '支持的编辑器',
-    runsOn: '运行平台',
+      'C++ 的工具生态一直很混乱。我们正在开发一组全新的 C++ 工具来改变它：一个读懂整个项目的语言服务器，一个能从任何构建里拿到编译命令的拦截器，以及撑起它们俩的 C++23 基础库。',
+    start: { text: '上手 clice', href: '/zh/clice/guide/quick-start' },
     projectsTitle: '项目',
     projects: [
       {
         id: 'clice',
-        face: 'smiling',
         title: 'clice',
-        label: '语言服务器 · 调度器',
-        summary:
-          '用一个多进程调度器编译、索引整个项目并回答查询。LSP 是它的第一个消费者，lint、index、query 和 doc 紧随其后。',
+        label: '语言服务器',
+        narration: '命令交到 clice 手里。它读懂整个项目，回应你的编辑器：VS Code、Neovim、Zed。',
+        summary: '头文件上下文、C++20 模块、模板内补全都不在话下，Clang 崩溃也不会拖垮它。',
         href: '/zh/clice/guide/what-is-clice',
+        more: '看文档',
         accent: 'bow'
       },
       {
         id: 'catter',
-        face: 'surprised',
         title: 'catter',
         label: '构建拦截器',
-        summary:
-          '拦截构建过程中派生的每一个进程，捕获命令、从任意构建系统生成 compile_commands.json、分析构建耗时并改写调用。',
+        narration: '某处，一次构建开始了：CMake、Meson、Bazel、Make……',
+        summary: '拦截构建派生的每个进程，为任何构建系统生成 compile_commands.json，还能分析构建耗时。',
         href: '/zh/catter/guide/what-is-catter',
+        more: '看文档',
         accent: 'aqua'
       },
       {
         id: 'kotatsu',
-        face: 'skeptical',
         title: 'kotatsu',
-        label: 'C++23 工具箱',
-        summary:
-          'clice 赖以构建的基础设施：基于 libuv 的协程运行时、编译期反射、属性驱动的编解码、带 LSP 绑定的类型化 IPC、选项解析和 CLI。',
+        label: 'C++23 基础库',
+        narration: '而撑着它们俩的，是 kotatsu。',
+        summary: '基于 libuv 的协程运行时、编译期反射、带 LSP 绑定的类型化 IPC、选项解析和 CLI。',
         href: 'https://github.com/clice-io/kotatsu',
         external: true,
+        more: '去 GitHub',
         accent: 'straw'
       }
     ] satisfies Project[],
-    qaTitle: '为什么还要再写一个？',
-    qa: [
-      {
-        face: 'skeptical',
-        question: 'clangd 不是够用了吗？',
-        title: '难的它一个都没解决。',
-        lines: [
-          '一个文件对应多条编译命令、头文件只有在包含它的地方才有意义、Clang 一崩整个服务器跟着没，这些 clangd 从第一天起就背着。',
-          'clice 用编译上下文、worker 重启时查询照常回答的多进程架构、落盘共享 PCH / PCM 缓存的动态模块图、以及让模板内部补全依然好用的伪实例化器，把它们一个个解决掉。'
-        ]
-      },
-      {
-        face: 'surprised',
-        question: '语言服务器里为什么要塞一个调度器？',
-        title: '因为 Clang 从来没有过。',
-        lines: [
-          'Clang 提供了编译器，却没有提供「编译一个项目」这件事本身的抽象。语言服务器只是 clice 调度器的第一个消费者。',
-          'clice lint、index、query、doc、format 跑在同一个引擎上，跨 TU 缓存让它们跳过 clang-tidy 对每个头文件重复做的工作。'
-        ]
-      },
-      {
-        face: 'smiling',
-        question: '现在能用了吗？',
-        title: '装上插件就能用。',
-        lines: [
-          '二进制随 VS Code 插件打包，覆盖 Windows / Linux / macOS 的 x64 和 arm64。每天发 nightly，Neovim 和 Zed 也有官方客户端。'
-        ]
-      }
-    ] satisfies QA[]
+    handoff: 'compile_commands.json'
   }
 }
 
 const page = computed(() => content[props.locale])
 
-const editors = [
-  { name: 'VS Code', icon: 'visualstudiocode', href: 'https://marketplace.visualstudio.com/items?itemName=clice-io.clice' },
-  { name: 'Neovim', icon: 'neovim', href: 'https://github.com/clice-io/clice/tree/main/editors/nvim' },
-  { name: 'Zed', icon: 'zedindustries', href: 'https://github.com/clice-io/clice/tree/main/editors/zed' }
-]
-
-const platforms = [
-  { name: 'Windows', icon: 'windows' },
-  { name: 'Linux', icon: 'linux' },
-  { name: 'macOS', icon: 'apple' }
-]
+// The project under the pointer; its portrait tilts.
+const active = ref('')
+
+// The projects are laid out by a CSS grid and then drawn as one manga page:
+// every panel gets a frame whose shared edges lean, leaving slanted gutters,
+// and arrows cross the gutters for how the projects hand work to each other.
+const mangaPage = ref<HTMLElement>()
+const panelEls = new Map<string, HTMLElement>()
+const frames = ref<{ id: string; d: string }[]>([])
+const arrows = ref<{ line: string; head: string }[]>([])
+const labels = ref<{ text: string; x: number; y: number }[]>([])
+
+function setPanel(id: string, el: unknown): void {
+  if (el instanceof HTMLElement) panelEls.set(id, el)
+  else panelEls.delete(id)
+}
+
+type Rect = { id: string; x: number; y: number; w: number; h: number }
+type HLine = { a: number; b: number } // y = a + b·x
+type VLine = { c: number; d: number } // x = c + d·y
+
+const GUTTER = 14 // visible white between two frames
+const LEAN = 18 // how far a gutter drifts from one end to the other
+
+function cross(h: HLine, v: VLine): number[] {
+  const x = (v.c + v.d * h.a) / (1 - v.d * h.b)
+  return [x, h.a + h.b * x]
+}
+
+// A portrait's centre and bottom in page coordinates.
+function portraitOf(id: string): { x: number; y: number; bottom: number } | undefined {
+  const el = panelEls.get(id)?.querySelector<HTMLElement>('.portrait')
+  if (!el) return
+  const o = offsetIn(el, mangaPage.value)
+  return { x: o.x + el.offsetWidth / 2, y: o.y + el.offsetHeight / 2, bottom: o.y + el.offsetHeight }
+}
+
+function arrow(from: number[], to: number[]): { line: string; head: string } {
+  const len = Math.hypot(to[0] - from[0], to[1] - from[1])
+  const ux = (to[0] - from[0]) / len
+  const uy = (to[1] - from[1]) / len
+  const base = [to[0] - ux * 12, to[1] - uy * 12]
+  const p = (q: number[]) => `${q[0].toFixed(1)},${q[1].toFixed(1)}`
+  return {
+    line: `M${p(from)}L${p(base)}`,
+    head: `M${p(to)}L${p([base[0] - uy * 7, base[1] + ux * 7])}L${p([base[0] + uy * 7, base[1] - ux * 7])}Z`
+  }
+}
+
+function drawPage(): void {
+  const root = mangaPage.value
+  if (!root || panelEls.size === 0) return
+  const rects: Rect[] = [...panelEls].map(([id, el]) => ({
+    id,
+    x: el.offsetLeft,
+    y: el.offsetTop,
+    w: el.offsetWidth,
+    h: el.offsetHeight
+  }))
+  const rows: Rect[][] = []
+  for (const r of [...rects].sort((a, b) => a.y - b.y || a.x - b.x)) {
+    const row = rows.find((q) => Math.abs(q[0].y - r.y) < 2)
+    if (row) row.push(r)
+    else rows.push([r])
+  }
+  const width = root.offsetWidth
+  // One slanted gutter between each pair of rows, leaning alternately.
+  const rowGutters: HLine[] = []
+  for (let i = 0; i + 1 < rows.length; i++) {
+    const bottom = Math.max(...rows[i].map((r) => r.y + r.h))
+    const top = Math.min(...rows[i + 1].map((r) => r.y))
+    const b = ((i % 2 ? -1 : 1) * LEAN) / width
+    rowGutters.push({ a: (bottom + top) / 2 - (b * width) / 2, b })
+  }
+  const half = GUTTER / 2
+  const colGutter = new Map<string, VLine>() // keyed by the left panel's id
+  const out: { id: string; d: string }[] = []
+  rows.forEach((row, ri) => {
+    const top = Math.min(...row.map((r) => r.y))
+    const bottom = Math.max(...row.map((r) => r.y + r.h))
+    for (let ci = 0; ci + 1 < row.length; ci++) {
+      const d = ((ci % 2 ? 1 : -1) * LEAN) / (bottom - top)
+      const mid = (row[ci].x + row[ci].w + row[ci + 1].x) / 2
+      colGutter.set(row[ci].id, { c: mid - (d * (top + bottom)) / 2, d })
+    }
+    row.forEach((r, ci) => {
+      const g = rowGutters
+      const topEdge: HLine = ri > 0 ? { a: g[ri - 1].a + half, b: g[ri - 1].b } : { a: r.y, b: 0 }
+      const bottomEdge: HLine = ri < rows.length - 1 ? { a: g[ri].a - half, b: g[ri].b } : { a: r.y + r.h, b: 0 }
+      const lg = ci > 0 ? colGutter.get(row[ci - 1].id)! : undefined
+      const rg = ci < row.length - 1 ? colGutter.get(r.id)! : undefined
+      const left: VLine = lg ? { c: lg.c + half, d: lg.d } : { c: r.x, d: 0 }
+      const right: VLine = rg ? { c: rg.c - half, d: rg.d } : { c: r.x + r.w, d: 0 }
+      const pts = [cross(topEdge, left), cross(topEdge, right), cross(bottomEdge, right), cross(bottomEdge, left)]
+      out.push({ id: r.id, d: 'M' + pts.map((q) => `${q[0].toFixed(1)},${q[1].toFixed(1)}`).join('L') + 'Z' })
+    })
+  })
+  frames.value = out
+
+  const nextArrows: { line: string; head: string }[] = []
+  const nextLabels: { text: string; x: number; y: number }[] = []
+  const byId = new Map(rects.map((r) => [r.id, r]))
+  const rowOf = (id: string) => rows.findIndex((row) => row.some((r) => r.id === id))
+  const gutterY = (i: number, x: number) => rowGutters[i].a + rowGutters[i].b * x
+
+  // catter hands compile_commands.json to clice.
+  const from = byId.get('catter')
+  const to = byId.get('clice')
+  const pa = portraitOf('catter')
+  const pb = portraitOf('clice')
+  if (from && to && pa && pb) {
+    if (rowOf('catter') === rowOf('clice')) {
+      // Side by side the two portraits face each other across the gutter; the
+      // label sits under the arrow, in the space below both portraits.
+      nextArrows.push(arrow([pa.x + 40, pa.y], [pb.x - 40, pb.y]))
+      const g = colGutter.get('catter')!
+      const y = Math.max(pa.bottom, pb.bottom) + 22
+      nextLabels.push({ text: page.value.handoff, x: g.c + g.d * y, y })
+    } else {
+      // Stacked: a short arrow down across the gutter near the right edge.
+      const i = rowOf('catter')
+      const x = from.x + from.w - 70
+      const y = gutterY(i, x)
+      nextArrows.push(arrow([x, y - 20], [x, y + 20]))
+      nextLabels.push({ text: page.value.handoff, x: x - 110, y })
+    }
+  }
+  // kotatsu holds up whatever sits directly above it, under that portrait.
+  const k = byId.get('kotatsu')
+  const ki = rowOf('kotatsu')
+  if (k && ki > 0) {
+    for (const r of rows[ki - 1]) {
+      const pr = portraitOf(r.id)
+      if (!pr) continue
+      const y = gutterY(ki - 1, pr.x)
+      nextArrows.push(arrow([pr.x, y + 18], [pr.x, y - 18]))
+    }
+  }
+  arrows.value = nextArrows
+  labels.value = nextLabels
+}
+
+// Line icons drawn on a 24 px grid with the site's ink stroke: code brackets
+// for clice, a cat for catter, a kotatsu with a mikan.
+const LINE_ICONS: Record<string, string> = {
+  clice: '<path d="M8 7l-5 5 5 5M16 7l5 5-5 5M13.5 5l-3 14"/>',
+  catter:
+    '<path d="M4 19V5l4.5 4h7L20 5v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1z"/>' +
+    '<circle class="dot" cx="9" cy="14" r="1.1"/><circle class="dot" cx="15" cy="14" r="1.1"/>',
+  kotatsu:
+    '<path d="M2 12h20M4.5 12L3 19.5q2.25-1.4 4.5 0t4.5 0 4.5 0 4.5 0L19.5 12"/>' +
+    '<circle cx="12" cy="7.6" r="2.6"/><path d="M12 5l1.6-1.6"/>'
+}
+
+// Layout position within `root`. offsetLeft/Top ignore transforms, so the
+// bubble's pop-in scale and the figure's sway don't disturb the maths.
+function offsetIn(el: HTMLElement, root: HTMLElement | undefined): { x: number; y: number } {
+  let x = 0
+  let y = 0
+  for (let e: HTMLElement | null = el; e && e !== root; e = e.offsetParent as HTMLElement | null) {
+    x += e.offsetLeft
+    y += e.offsetTop
+  }
+  return { x, y }
+}
+
+// The headline bubble's tail points at the mascot's mouth, so she is the one
+// saying it. Where the mouth sits in the hero image, as fractions of it.
+const HERO = { src: '/mascot/hero-home.webp', mouth: { x: 0.515, y: 0.198 } }
+
+const hero = ref<HTMLElement>()
+const bubble = ref<HTMLElement>()
+const figure = ref<HTMLImageElement>()
+const tail = ref({ fill: '', line: '' })
+
+// The figure's alpha channel, so the tail can stop at her outline instead of
+// being drawn across her.
+let alpha: { data: Uint8ClampedArray; w: number; h: number } | undefined
+
+function readAlpha(): void {
+  const img = figure.value
+  if (!img?.naturalWidth) return
+  const canvas = document.createElement('canvas')
+  canvas.width = img.naturalWidth
+  canvas.height = img.naturalHeight
+  const ctx = canvas.getContext('2d')
+  if (!ctx) return
+  ctx.drawImage(img, 0, 0)
+  alpha = { data: ctx.getImageData(0, 0, canvas.width, canvas.height).data, w: canvas.width, h: canvas.height }
+}
+
+function drawTail(): void {
+  const b = bubble.value
+  const img = figure.value
+  if (!b || !img || !img.offsetHeight) return
+  const bo = offsetIn(b, hero.value)
+  const io = offsetIn(img, hero.value)
+  const mx = io.x + HERO.mouth.x * img.offsetWidth
+  const my = io.y + HERO.mouth.y * img.offsetHeight
+  const clamp = (v: number, lo: number, hi: number) => Math.min(Math.max(v, lo), hi)
+  // Half the tail's width where it meets the bubble: a long reach across the
+  // gutter gets a sturdier base so it doesn't read as a thin line.
+  const reachGuess = Math.abs(mx - (mx > bo.x ? bo.x + b.offsetWidth : bo.x))
+  const half = clamp(reachGuess * 0.06, 13, 24)
+  // Side by side the tail leaves the bubble's edge facing her; stacked, its
+  // top edge. `edge` is on the bubble's border, `under` just inside it: the
+  // fill spans both so the border is erased where the tail joins.
+  let edge: number[][]
+  let under: number[][]
+  const right = bo.x + b.offsetWidth
+  const beside = mx < bo.x || mx > right
+  if (beside) {
+    const y = clamp(my, bo.y + 10 + half, bo.y + b.offsetHeight - 10 - half)
+    const [ex, ux] = mx > right ? [right - 1, right - 4] : [bo.x + 1, bo.x + 4]
+    edge = [[ex, y - half], [ex, y + half]]
+    under = [[ux, y - half], [ux, y + half]]
+  } else {
+    const x = clamp(mx, bo.x + 24 + half, bo.x + b.offsetWidth - 24 - half)
+    edge = [[x - half, bo.y + 1], [x + half, bo.y + 1]]
+    under = [[x - half, bo.y + 4], [x + half, bo.y + 4]]
+  }
+  const cx = (edge[0][0] + edge[1][0]) / 2
+  const cy = (edge[0][1] + edge[1][1]) / 2
+  const len = Math.hypot(mx - cx, my - cy)
+  const ux = (mx - cx) / len
+  const uy = (my - cy) / len
+  // Walk towards the mouth and stop a little before the first opaque pixel of
+  // the figure; without the alpha map, stop just short of the mouth.
+  let reach = len - 16
+  if (alpha) {
+    for (let t = 0; t < len; t += 2) {
+      const ix = Math.floor(((cx + ux * t - io.x) / img.offsetWidth) * alpha.w)
+      const iy = Math.floor(((cy + uy * t - io.y) / img.offsetHeight) * alpha.h)
+      if (ix >= 0 && iy >= 0 && ix < alpha.w && iy < alpha.h && alpha.data[(iy * alpha.w + ix) * 4 + 3] > 96) {
+        reach = t - 8
+        break
+      }
+    }
+  }
+  // Stacked, the figure stands above the bubble and the tail would end at her
+  // feet; a short stub pointing up at her reads better.
+  reach = beside ? Math.max(reach, 24) : 34
+  const tip = [cx + ux * reach, cy + uy * reach]
+  // Both sides bow the same way, so the tail curves like a drawn one.
+  const bend = reach * 0.12
+  const ctrl = (p: number[]) => [(p[0] + tip[0]) / 2 - uy * bend, (p[1] + tip[1]) / 2 + ux * bend]
+  const pt = (p: number[]) => `${p[0].toFixed(1)},${p[1].toFixed(1)}`
+  const sides = `M${pt(edge[0])}Q${pt(ctrl(edge[0]))} ${pt(tip)}Q${pt(ctrl(edge[1]))} ${pt(edge[1])}`
+  tail.value = {
+    line: sides,
+    fill: `M${pt(under[0])}L${sides.slice(1)}L${pt(under[1])}Z`
+  }
+}
+
+function onFigureLoad(): void {
+  readAlpha()
+  drawTail()
+}
+
+function redraw(): void {
+  drawTail()
+  drawPage()
+}
+
+let observer: ResizeObserver | undefined
+
+
+onMounted(() => {
+  if (figure.value?.complete) readAlpha()
+  redraw()
+  observer = new ResizeObserver(redraw)
+  if (hero.value) observer.observe(hero.value)
+  if (mangaPage.value) observer.observe(mangaPage.value)
+  document.fonts?.ready.then(redraw)
+})
+
+onBeforeUnmount(() => observer?.disconnect())
 </script>
 
 <template>
   <div class="landing">
-    <section class="hero koma">
+    <section ref="hero" class="hero koma">
       <div class="hero-figure">
-        <img src="/mascot/hero-welcome.webp" alt="clice mascot" />
+        <img ref="figure" :src="HERO.src" alt="clice mascot" @load="onFigureLoad" />
       </div>
       <div class="hero-copy">
-        <p class="kicker">{{ page.kicker }}</p>
-        <div class="bubble">
+        <div ref="bubble" class="bubble">
           <h1>{{ page.bubble }}</h1>
+          <p class="lead">{{ page.lead }}</p>
         </div>
-        <p class="lead">{{ page.lead }}</p>
         <div class="actions">
-          <a class="btn brand" :href="page.primary.href">{{ page.primary.text }}</a>
-          <a class="btn alt" :href="page.secondary.href">{{ page.secondary.text }}</a>
-        </div>
-        <div class="support">
-          <div class="support-row">
-            <span class="support-label">{{ page.worksWith }}</span>
-            <a v-for="e in editors" :key="e.name" class="chip link" :href="e.href" target="_blank" rel="noopener noreferrer">
-              <BrandIcon :name="e.icon" :size="15" />{{ e.name }}
-            </a>
-          </div>
-          <div class="support-row">
-            <span class="support-label">{{ page.runsOn }}</span>
-            <span v-for="pl in platforms" :key="pl.name" class="chip">
-              <BrandIcon :name="pl.icon" :size="15" />{{ pl.name }}
-            </span>
-            <span class="chip arch">x64</span>
-            <span class="chip arch">arm64</span>
-          </div>
+          <a class="btn brand" :href="page.start.href">{{ page.start.text }} →</a>
         </div>
       </div>
+      <svg class="tail" aria-hidden="true">
+        <path class="tail-fill" :d="tail.fill" />
+        <path class="tail-line" :d="tail.line" />
+      </svg>
     </section>
 
-    <h2 class="section-title">{{ page.projectsTitle }}</h2>
-    <section class="projects">
-      <a
+    <h2 id="projects" class="section-title">{{ page.projectsTitle }}</h2>
+    <section ref="mangaPage" class="manga-page" :class="{ framed: frames.length > 0 }">
+      <svg class="page-frames" aria-hidden="true">
+        <path v-for="f in frames" :key="f.id" :d="f.d" />
+      </svg>
+      <article
         v-for="project in page.projects"
         :key="project.id"
-        class="koma project"
-        :class="project.accent"
-        :href="project.href"
-        :target="project.external ? '_blank' : undefined"
-        :rel="project.external ? 'noopener noreferrer' : undefined"
+        :ref="(el) => setPanel(project.id, el)"
+        class="panel"
+        :class="[project.id, project.accent, { lit: active === project.id }]"
+        @mouseenter="active = project.id"
+        @mouseleave="active = ''"
       >
-        <div class="art">
-          <img :src="`/mascot/project-${project.id}.webp`" :alt="project.title" />
-        </div>
-        <div class="project-head">
-          <h3>{{ project.title }}</h3>
-          <span class="tag">{{ project.label }}</span>
+        <p class="narration">{{ project.narration }}</p>
+        <div class="panel-main">
+          <div class="portrait">
+            <svg class="line-icon" viewBox="0 0 24 24" aria-hidden="true" v-html="LINE_ICONS[project.id]" />
+          </div>
+          <div class="panel-body">
+            <div class="project-head">
+              <h3>
+                <a
+                  class="stretch"
+                  :href="project.href"
+                  :target="project.external ? '_blank' : undefined"
+                  :rel="project.external ? 'noopener noreferrer' : undefined"
+                >{{ project.title }}</a>
+              </h3>
+              <span class="tag">{{ project.label }}</span>
+            </div>
+            <p class="summary">{{ project.summary }}</p>
+            <span class="more" aria-hidden="true">{{ project.more }} {{ project.external ? '↗' : '→' }}</span>
+          </div>
         </div>
-        <p>{{ project.summary }}</p>
-        <span class="arrow" aria-hidden="true">→</span>
-      </a>
+      </article>
+      <svg class="page-arrows" aria-hidden="true">
+        <g v-for="(ar, i) in arrows" :key="i">
+          <path class="halo" :d="ar.line" />
+          <path class="halo" :d="ar.head" />
+          <path class="shaft" :d="ar.line" />
+          <path class="head" :d="ar.head" />
+        </g>
+      </svg>
+      <span
+        v-for="l in labels"
+        :key="l.text + l.x"
+        class="arrow-label"
+        :style="{ left: `${l.x}px`, top: `${l.y}px` }"
+      >{{ l.text }}</span>
     </section>
 
-    <h2 class="section-title">{{ page.qaTitle }}</h2>
-    <section class="qa">
-      <div v-for="(item, i) in page.qa" :key="item.face" class="qa-row" :class="{ flip: i % 2 === 1 }">
-        <div class="caption">
-          <span class="q">Q</span>
-          <p>{{ item.question }}</p>
-        </div>
-        <div class="koma face">
-          <img :src="`/mascot/face-${item.face}.webp`" :alt="item.face" />
-          <span class="num">{{ i + 1 }}</span>
-        </div>
-        <div class="answer">
-          <h3>{{ item.title }}</h3>
-          <p v-for="line in item.lines" :key="line">{{ line }}</p>
-        </div>
-      </div>
-    </section>
   </div>
 </template>
 
@@ -295,6 +488,7 @@ const platforms = [
 /* hero */
 
 .hero {
+  position: relative;
   display: grid;
   grid-template-columns: 1fr;
   gap: 0;
@@ -317,7 +511,7 @@ const platforms = [
 
 .hero-figure img {
   display: block;
-  width: 240px;
+  height: 300px;
   animation: sway 6s ease-in-out infinite;
   transform-origin: 50% 100%;
 }
@@ -326,19 +520,11 @@ const platforms = [
   padding: 28px 24px 32px;
 }
 
-.kicker {
-  margin: 0 0 12px;
-  font-family: var(--clice-font-display);
-  font-weight: 900;
-  font-size: 14px;
-  letter-spacing: 0.04em;
-  color: var(--bow);
-}
-
+/* She says the whole introduction: one balloon holds the headline and the
+   lead, filling the column so its edge (and the tail's root) sits by her. */
 .bubble {
   position: relative;
-  display: inline-block;
-  padding: 14px 22px;
+  padding: 20px 24px 22px;
   border: var(--line) solid var(--line-color);
   border-radius: 18px;
   background: var(--paper);
@@ -349,26 +535,29 @@ const platforms = [
   background: var(--paper);
 }
 
-.bubble::before,
-.bubble::after {
-  content: '';
+.tail {
   position: absolute;
-  top: 22px;
-  left: -14px;
-  border-style: solid;
-  border-width: 0 14px 12px 0;
-  border-color: transparent var(--line-color) transparent transparent;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  animation: fade-in 0.2s ease 0.5s both;
 }
 
-.bubble::after {
-  left: -9px;
-  top: 24px;
-  border-width: 0 10px 8px 0;
-  border-color: transparent var(--paper) transparent transparent;
+.tail-fill {
+  fill: var(--paper);
+}
+
+.tail-line {
+  fill: none;
+  stroke: var(--line-color);
+  stroke-width: var(--line);
+  stroke-linejoin: round;
 }
 
 .bubble h1 {
   margin: 0;
+  text-wrap: balance;
   font-family: var(--clice-font-display);
   font-weight: 900;
   font-size: 30px;
@@ -377,8 +566,7 @@ const platforms = [
 }
 
 .lead {
-  margin: 20px 0 0;
-  max-width: 560px;
+  margin: 12px 0 0;
   font-size: 16px;
   line-height: 1.7;
   color: var(--ink-2);
@@ -392,7 +580,9 @@ const platforms = [
 }
 
 .btn {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   padding: 8px 22px;
   border: var(--line) solid var(--line-color);
   border-radius: 999px;
@@ -425,93 +615,51 @@ const platforms = [
   color: #1d212d;
 }
 
-.btn.alt {
-  background: var(--straw);
-  color: #2b3040;
-}
-
+/* Side by side the copy leads on the left and she stands on the right, so
+   she doesn't sit directly under the navbar logo. */
 @media (min-width: 768px) {
   .hero {
-    grid-template-columns: 340px 1fr;
+    grid-template-columns: 1fr 340px;
   }
 
   .hero-figure {
+    order: 2;
     border-bottom: none;
-    border-right: var(--line) solid var(--line-color);
+    border-left: var(--line) solid var(--line-color);
     padding: 32px 24px 0;
   }
 
   .hero-figure img {
-    width: 280px;
+    height: 460px;
   }
 
   .hero-copy {
-    padding: 40px 40px 44px;
     display: flex;
     flex-direction: column;
     justify-content: center;
+    padding: 40px 40px 44px;
   }
 
   .bubble h1 {
-    font-size: 38px;
+    font-size: 32px;
   }
 }
 
-/* works with / runs on */
-
-.support {
-  margin-top: 26px;
-  padding-top: 18px;
-  border-top: var(--line-thin) dashed var(--line-color);
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.support-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.support-label {
-  min-width: 78px;
-  font-family: var(--clice-font-display);
-  font-weight: 900;
-  font-size: 12px;
-  letter-spacing: 0.04em;
-  color: var(--ink-3);
-}
-
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 0 10px;
-  border: var(--line-thin) solid var(--line-color);
-  border-radius: 999px;
-  background: var(--paper);
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 24px;
-  color: var(--ink);
-  text-decoration: none;
-}
-
-.chip.arch {
-  background: var(--straw-soft);
-}
+@media (min-width: 960px) {
+  .bubble {
+    padding: 26px 32px 28px;
+  }
 
-.chip.link:hover {
-  border-color: var(--bow);
-  color: var(--bow);
+  .bubble h1 {
+    font-size: 38px;
+  }
 }
 
 /* section titles */
 
 .section-title {
   position: relative;
+  scroll-margin-top: calc(var(--vp-nav-height) + 24px);
   margin: 56px 0 20px;
   padding: 4px 0 4px 16px;
   font-family: var(--clice-font-display);
@@ -532,341 +680,358 @@ const platforms = [
   box-sizing: border-box;
 }
 
-/* projects */
+/* projects: one manga page, a panel per project */
 
-.projects {
+.manga-page {
+  position: relative;
   display: grid;
-  grid-template-columns: 1fr;
-  gap: 20px;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 40px;
 }
 
-@media (min-width: 768px) {
-  .projects {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+@media (min-width: 960px) {
+  .manga-page {
+    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+    grid-template-areas:
+      'catter clice'
+      'kotatsu kotatsu';
+    gap: 34px 38px;
+  }
+
+  .panel.catter {
+    grid-area: catter;
+  }
+
+  .panel.clice {
+    grid-area: clice;
+  }
+
+  .panel.kotatsu {
+    grid-area: kotatsu;
   }
 }
 
-.project {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  padding: 22px 22px 26px;
-  text-decoration: none;
-  color: inherit;
-  overflow: hidden;
-  transition:
-    transform 0.12s ease,
-    box-shadow 0.12s ease;
+/* Panel order follows the story: the build, then clice, then what holds
+   them up. */
+.panel.catter {
+  order: 1;
 }
 
-.project::before {
-  content: '';
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 10px;
-  border-right: var(--line) solid var(--line-color);
-  background: var(--accent);
+.panel.clice {
+  order: 2;
 }
 
-.project.bow {
-  --accent: var(--bow);
+.panel.kotatsu {
+  order: 3;
 }
 
-.project.aqua {
-  --accent: var(--aqua);
+.page-frames,
+.page-arrows {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  overflow: visible;
+  pointer-events: none;
 }
 
-.project.straw {
-  --accent: var(--straw);
+.page-frames path {
+  fill: var(--panel);
+  stroke: var(--line-color);
+  stroke-width: 2.5;
+  stroke-linejoin: round;
 }
 
-.project:hover {
-  transform: translate(-2px, -2px);
-  box-shadow: 6px 6px 0 var(--shadow-color);
+.dark .page-frames path {
+  fill: var(--paper-2);
 }
 
-.project .art {
-  margin: -22px -22px 16px -22px;
-  padding-left: 10px;
-  height: 170px;
-  border-bottom: var(--line) solid var(--line-color);
-  background:
-    var(--screentone) 0 0 / 10px 10px,
-    #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-  overflow: hidden;
+.page-arrows {
+  z-index: 2;
 }
 
-.project .art img {
-  display: block;
-  height: 150px;
-  width: auto;
-  transition: transform 0.15s ease;
+.page-arrows .halo {
+  fill: var(--panel);
+  stroke: var(--panel);
+  stroke-width: 9;
+  stroke-linejoin: round;
+  stroke-linecap: round;
 }
 
-.project:hover .art img {
-  transform: translateY(-4px);
+.dark .page-arrows .halo {
+  fill: var(--paper-2);
+  stroke: var(--paper-2);
 }
 
-.project-head {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px 10px;
-  margin-left: 8px;
+.page-arrows .shaft {
+  fill: none;
+  stroke: var(--ink);
+  stroke-width: 3;
+  stroke-linecap: round;
 }
 
-.project h3 {
-  margin: 0;
-  font-family: var(--clice-font-display);
-  font-weight: 900;
-  font-size: 24px;
-  color: var(--ink);
+.page-arrows .head {
+  fill: var(--ink);
+  stroke: var(--ink);
+  stroke-width: 1.5;
+  stroke-linejoin: round;
 }
 
-.tag {
-  padding: 0 10px;
+/* What one project hands to the next, pinned to the arrow between them. */
+.arrow-label {
+  position: absolute;
+  z-index: 3;
+  padding: 1px 8px;
   border: var(--line-thin) solid var(--line-color);
-  border-radius: 999px;
-  background: var(--straw-soft);
-  font-size: 12px;
+  border-radius: 4px;
+  background: var(--panel);
+  font-family: var(--vp-font-family-mono);
   font-weight: 700;
-  line-height: 20px;
+  font-size: 11px;
+  line-height: 18px;
   color: var(--ink);
   white-space: nowrap;
+  transform: translate(-50%, -50%) rotate(-3deg);
 }
 
-.project p {
-  margin: 12px 0 0 8px;
-  font-size: 14px;
-  line-height: 1.65;
-  color: var(--ink-2);
-  flex-grow: 1;
+.dark .arrow-label {
+  background: var(--paper-2);
 }
 
-.arrow {
-  position: absolute;
-  right: 16px;
-  bottom: 10px;
-  font-family: var(--clice-font-display);
-  font-weight: 900;
-  font-size: 20px;
-  color: var(--bow);
-  transition: transform 0.12s ease;
+.panel {
+  position: relative;
+  z-index: 1;
+  padding: 20px 22px 18px;
 }
 
-.project:hover .arrow {
-  transform: translateX(4px);
+/* Until the frames are measured (and without JS) a plain border stands in. */
+.manga-page:not(.framed) .panel {
+  border: var(--line) solid var(--line-color);
+  border-radius: var(--radius);
+  background: var(--panel);
 }
 
-/* q&a comic */
+.dark .manga-page:not(.framed) .panel {
+  background: var(--paper-2);
+}
 
-.qa {
-  display: flex;
-  flex-direction: column;
-  gap: 28px;
+.bow {
+  --accent: var(--bow);
 }
 
-.qa-row {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    'caption'
-    'face'
-    'answer';
-  gap: 14px;
+.aqua {
+  --accent: var(--aqua);
 }
 
-.caption {
-  grid-area: caption;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 10px 16px;
-  border: var(--line) solid var(--line-color);
-  border-radius: 2px;
-  background: var(--paper-3);
-  box-shadow: var(--hard-shadow-sm);
+.straw {
+  --accent: var(--straw);
+}
+
+/* A narration box, square-cornered, in the top corner of the panel. */
+.narration {
   width: fit-content;
   max-width: 100%;
+  margin: 0 0 16px;
+  padding: 6px 12px;
+  border: var(--line-thin) solid var(--line-color);
+  border-left: 6px solid var(--accent);
+  background: var(--paper);
+  font-size: 13px;
+  line-height: 1.55;
+  color: var(--ink);
 }
 
-.caption .q {
-  flex: 0 0 auto;
-  width: 26px;
-  height: 26px;
-  border: var(--line) solid var(--line-color);
-  border-radius: 999px;
-  background: var(--ribbon);
-  font-family: var(--clice-font-display);
-  font-weight: 900;
-  font-size: 13px;
-  line-height: 22px;
-  text-align: center;
-  color: #ffffff;
-  transform: rotate(-8deg);
+.panel-main {
+  display: flex;
+  align-items: flex-start;
+  gap: 20px;
 }
 
-.caption p {
-  margin: 0;
-  font-family: var(--clice-font-display);
-  font-weight: 700;
-  font-size: 15px;
-  color: var(--ink);
+/* catter faces clice across the gutter, so its portrait sits on the right. */
+.panel.catter .panel-main {
+  flex-direction: row-reverse;
 }
 
-.qa-row .face {
-  grid-area: face;
-  position: relative;
-  width: 160px;
-  height: 160px;
-  overflow: hidden;
-  background: #ffffff;
+.panel-body {
+  flex: 1;
+  min-width: 0;
 }
 
-.qa-row .face img {
+.line-icon {
   display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  object-position: center 20%;
+  fill: none;
+  stroke: var(--ink);
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
-.num {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 26px;
-  height: 26px;
-  border-right: var(--line) solid var(--line-color);
-  border-bottom: var(--line) solid var(--line-color);
-  border-radius: 0 0 var(--radius) 0;
-  background: var(--straw);
-  font-family: var(--clice-font-display);
-  font-weight: 900;
-  font-size: 13px;
-  line-height: 26px;
-  text-align: center;
-  color: #2b3040;
+.line-icon :deep(.dot) {
+  fill: var(--ink);
+  stroke: none;
 }
 
-.answer {
-  grid-area: answer;
+/* A character's portrait frame; it tilts a little under the pointer. */
+.portrait {
   position: relative;
-  padding: 18px 22px 20px;
+  flex-shrink: 0;
+  display: grid;
+  place-items: center;
+  width: 68px;
+  height: 68px;
   border: var(--line) solid var(--line-color);
-  border-radius: 18px;
-  background: var(--panel);
-  box-shadow: var(--hard-shadow);
-}
-
-.dark .answer {
-  background: var(--paper-2);
+  border-radius: 50%;
+  background: var(--paper);
+  box-shadow: 3px 3px 0 var(--accent);
+  transition: transform 0.15s ease;
 }
 
-.answer::before,
-.answer::after {
-  content: '';
-  position: absolute;
-  top: -14px;
-  left: 28px;
-  border-style: solid;
-  border-width: 0 0 14px 14px;
-  border-color: transparent transparent var(--line-color) transparent;
+.portrait .line-icon {
+  width: 34px;
+  height: 34px;
 }
 
-.answer::after {
-  top: -9px;
-  left: 30px;
-  border-width: 0 0 10px 10px;
-  border-color: transparent transparent var(--panel) transparent;
+.lit .portrait {
+  transform: rotate(-6deg);
 }
 
-.dark .answer::after {
-  border-bottom-color: var(--paper-2);
+.project-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px 10px;
 }
 
-.answer h3 {
-  margin: 0 0 8px;
+.panel h3 {
+  margin: 0;
   font-family: var(--clice-font-display);
   font-weight: 900;
-  font-size: 20px;
+  font-size: 28px;
+  line-height: 1.2;
+}
+
+.panel h3 a {
   color: var(--ink);
+  text-decoration: none;
 }
 
-.answer p {
-  margin: 0;
+/* The title link covers the whole panel. */
+.stretch::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.tag {
+  padding: 0 10px;
+  border: var(--line-thin) solid var(--line-color);
+  border-radius: 999px;
+  background: var(--straw-soft);
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 20px;
+  color: var(--ink);
+  white-space: nowrap;
+}
+
+.summary {
+  margin: 12px 0 0;
   font-size: 14px;
-  line-height: 1.7;
+  line-height: 1.65;
   color: var(--ink-2);
 }
 
-.answer p + p {
-  margin-top: 8px;
+/* The whole panel is the link; this only says where it goes. */
+.more {
+  display: inline-block;
+  margin-top: 12px;
+  font-family: var(--clice-font-display);
+  font-weight: 900;
+  font-size: 13px;
+  color: var(--bow);
+  transition: transform 0.12s ease;
 }
 
-@media (min-width: 768px) {
-  .qa-row {
-    grid-template-columns: 160px 1fr;
+.lit .more {
+  transform: translateX(4px);
+}
+
+/* kotatsu's panel runs the full width: its name on the left, the
+   description beside it. */
+@media (min-width: 960px) {
+  .panel.kotatsu .panel-body {
+    display: grid;
+    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
     grid-template-areas:
-      '. caption'
-      'face answer';
-    column-gap: 28px;
-    row-gap: 12px;
-    align-items: start;
+      'head summary'
+      'head more';
+    column-gap: 32px;
   }
 
-  .qa-row.flip {
-    grid-template-columns: 1fr 160px;
-    grid-template-areas:
-      'caption .'
-      'answer face';
+  .panel.kotatsu .project-head {
+    grid-area: head;
+    align-self: center;
   }
 
-  .qa-row.flip .caption {
-    justify-self: end;
+  .panel.kotatsu .summary,
+  .panel.kotatsu .more {
+    padding-left: 28px;
+    border-left: var(--line-thin) dashed var(--line-color);
   }
 
-  .answer::before,
-  .answer::after {
-    top: 26px;
-    left: -14px;
-    border-width: 0 14px 12px 0;
-    border-color: transparent var(--line-color) transparent transparent;
+  .panel.kotatsu .summary {
+    grid-area: summary;
+    margin: 0;
+    align-self: end;
   }
 
-  .answer::after {
-    top: 28px;
-    left: -9px;
-    border-width: 0 10px 8px 0;
-    border-color: transparent var(--panel) transparent transparent;
+  .panel.kotatsu .more {
+    grid-area: more;
+    justify-self: start;
+    margin: 0;
+    padding-top: 12px;
   }
+}
 
-  .dark .answer::after {
-    border-right-color: var(--paper-2);
-    border-bottom-color: transparent;
+/* Narrow screens: the portrait sits beside the name only, and everything
+   below uses the panel's full width. */
+@media (max-width: 639px) {
+  .panel-main {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    gap: 0 14px;
   }
 
-  .qa-row.flip .answer::before,
-  .qa-row.flip .answer::after {
-    left: auto;
-    right: -14px;
-    border-width: 12px 0 0 14px;
-    border-color: transparent transparent transparent var(--line-color);
+  .panel.catter .panel-main {
+    grid-template-columns: minmax(0, 1fr) auto;
   }
 
-  .qa-row.flip .answer::after {
-    right: -9px;
-    top: 28px;
-    border-width: 8px 0 0 10px;
-    border-color: transparent transparent transparent var(--panel);
+  .panel.catter .portrait {
+    grid-column: 2;
+    grid-row: 1;
   }
 
-  .dark .qa-row.flip .answer::after {
-    border-left-color: var(--paper-2);
-    border-right-color: transparent;
+  .panel-body {
+    display: contents;
+  }
+
+  .project-head {
+    align-self: center;
+  }
+
+  .summary,
+  .more {
+    grid-column: 1 / -1;
+  }
+
+  .portrait {
+    width: 56px;
+    height: 56px;
+  }
+
+  .portrait .line-icon {
+    width: 28px;
+    height: 28px;
   }
 }
 
@@ -896,6 +1061,12 @@ const platforms = [
   }
 }
 
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+}
+
 @keyframes sway {
   0%,
   100% {
@@ -910,6 +1081,7 @@ const platforms = [
 @media (prefers-reduced-motion: reduce) {
   .hero,
   .bubble,
+  .tail,
   .hero-figure img {
     animation: none;
   }
diff --git a/.vitepress/theme/components/SiteFooter.vue b/.vitepress/theme/components/SiteFooter.vue
index 50a073dd9..c3fe4d17a 100644
--- a/.vitepress/theme/components/SiteFooter.vue
+++ b/.vitepress/theme/components/SiteFooter.vue
@@ -46,7 +46,7 @@ const other = computed(() => (zh.value ? { text: 'English', href: '/' } : { text
   <footer class="site-footer" :class="{ 'has-sidebar': hasSidebar }">
     <div class="inner">
       <div class="brand">
-        <img class="face" src="/mascot/avatar.webp" alt="" />
+        <img class="face" src="/mascot/logo-mark.webp" alt="" />
         <div>
           <p class="name">clice.io</p>
           <p class="line">{{ zh ? '下一代 C++ 工具链' : 'Next generation C++ tooling' }}</p>
@@ -115,14 +115,10 @@ const other = computed(() => (zh.value ? { text: 'English', href: '/' } : { text
   gap: 14px;
 }
 
+/* The site logo; its ring is part of the image. */
 .face {
-  width: 56px;
-  height: 56px;
-  border: var(--line) solid var(--line-color);
-  border-radius: 999px;
-  background: #ffffff;
-  object-fit: cover;
-  object-position: center 30%;
+  width: 60px;
+  height: 60px;
 }
 
 .brand p {
diff --git a/.vitepress/theme/index.ts b/.vitepress/theme/index.ts
index bd0c8e7bf..188572239 100644
--- a/.vitepress/theme/index.ts
+++ b/.vitepress/theme/index.ts
@@ -8,10 +8,10 @@ import HomeLanding from './components/HomeLanding.vue'
 import Mermaid from './components/Mermaid.vue'
 import SiteFooter from './components/SiteFooter.vue'
 import SnapExample from './components/SnapExample.vue'
-import '@fontsource/m-plus-rounded-1c/400.css'
-import '@fontsource/m-plus-rounded-1c/500.css'
-import '@fontsource/m-plus-rounded-1c/700.css'
-import '@fontsource/m-plus-rounded-1c/900.css'
+import '@fontsource/nunito/400.css'
+import '@fontsource/nunito/500.css'
+import '@fontsource/nunito/700.css'
+import '@fontsource/nunito/900.css'
 import '@fontsource/zen-kaku-gothic-new/700.css'
 import '@fontsource/zen-kaku-gothic-new/900.css'
 import '@fontsource/noto-sans-sc/400.css'
diff --git a/.vitepress/theme/style.css b/.vitepress/theme/style.css
index 543414a72..d30f45eac 100644
--- a/.vitepress/theme/style.css
+++ b/.vitepress/theme/style.css
@@ -139,13 +139,15 @@
   --vp-c-caution-3: var(--ribbon);
   --vp-c-caution-soft: var(--ribbon-soft);
 
+  /* Nunito's soft, rounded Latin keeps the manga warmth and stays legible at
+     body sizes; it has no CJK, so Chinese falls through to one SC font. */
   --vp-font-family-base:
-    "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yuanti SC", "PingFang SC",
-    "Noto Sans CJK SC", "Noto Sans SC", system-ui, sans-serif;
+    "Nunito", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans CJK SC", system-ui, sans-serif;
   --vp-font-family-mono:
     "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
   --clice-font-display:
-    "Zen Kaku Gothic New", "M PLUS Rounded 1c", "Hiragino Sans", "PingFang SC",
+    "Zen Kaku Gothic New", "Nunito", "Hiragino Sans", "PingFang SC",
     "Noto Sans CJK SC", system-ui, sans-serif;
 
   --vp-nav-bg-color: var(--paper);
@@ -849,8 +851,8 @@ html[lang^="zh"] {
     "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
     "Noto Sans CJK SC", system-ui, sans-serif;
   --vp-font-family-base:
-    "M PLUS Rounded 1c", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB",
-    "Microsoft YaHei", "Noto Sans CJK SC", system-ui, sans-serif;
+    "Nunito", "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
+    "Noto Sans CJK SC", system-ui, sans-serif;
 }
 
 /* ---------------------------------------------------------------------------
@@ -1212,22 +1214,6 @@ html[lang^="zh"] {
   }
 }
 
-.VPFooter .container {
-  position: relative;
-}
-
-.VPFooter .copyright::before {
-  content: "";
-  display: inline-block;
-  width: 40px;
-  height: 40px;
-  margin: -12px 10px -12px 0;
-  border: var(--line) solid var(--line-color);
-  border-radius: 999px;
-  background: var(--panel) url("/mascot/avatar.webp") center 30% / 130% no-repeat;
-  vertical-align: middle;
-}
-
 /* ---------------------------------------------------------------------------
  * Narrow screens: thinner shadows, no side rules
  * ------------------------------------------------------------------------ */
diff --git a/art/README.md b/art/README.md
index 5043ff829..f2d5945ec 100644
--- a/art/README.md
+++ b/art/README.md
@@ -36,8 +36,21 @@ approved original ink portrait and character sheet; `fav-bust-02` used
 | Output | Path |
 | --- | --- |
 | Navbar logo, 128 px | `public/mascot/logo-mark.webp` |
-| Favicons, 16/32/48/64 px | `public/favicon-*.png` |
+| Favicons, 16/32/48/64 px, and a 16/32/48 `.ico` | `public/favicon-*.png`, `public/favicon.ico` |
 | apple-touch icon, 180 px | `public/apple-touch-icon.png` |
 | VS Code extension icon, 256 px | `logo/exports/vscode-icon.png` |
 
 Requires Python 3 with Pillow: `art/logo/build.sh`.
+
+## home/
+
+| Source | Used for |
+| --- | --- |
+| `sources/hero-quiet-01.png` | Homepage hero (`public/mascot/hero-home.webp`): trimmed to the figure and sized 1120 px tall for 2x displays |
+
+Generated with Codex `image_gen` (gpt-image-2, reasoning effort xhigh): a
+redraw of an earlier clasped-hands candidate that kept its head and fixed the
+body (shoulders following the head tilt, narrower skirt), referencing the
+approved full-body illustration, character sheet and colour portrait. The
+homepage's speech-bubble tail aims at her mouth; its position in the image is
+`HERO.mouth` in `HomeLanding.vue` and needs updating if the image changes.
diff --git a/art/home/build.sh b/art/home/build.sh
new file mode 100755
index 000000000..a12f0d401
--- /dev/null
+++ b/art/home/build.sh
@@ -0,0 +1,23 @@
+#!/usr/bin/env bash
+# Rebuild the homepage art in ../../public/ from sources/.
+set -euo pipefail
+cd "$(dirname "$0")"
+
+python3 - <<'PY'
+from PIL import Image
+
+
+def hero(src, out):
+    """Trim a figure to her silhouette with a small margin and size it for a
+    2x display at up to 560 px tall."""
+    im = Image.open(src).convert("RGBA")
+    left, top, right, bottom = im.getchannel("A").getbbox()
+    pad = 12
+    im = im.crop((max(left - pad, 0), max(top - pad, 0), min(right + pad, im.width), min(bottom + pad, im.height)))
+    height = 1120
+    im = im.resize((round(im.width * height / im.height), height), Image.LANCZOS)
+    im.save(out, quality=90, method=6)
+
+
+hero("sources/hero-quiet-01.png", "../../public/mascot/hero-home.webp")
+PY
diff --git a/art/home/sources/hero-quiet-01.png b/art/home/sources/hero-quiet-01.png
new file mode 100644
index 000000000..5add02634
Binary files /dev/null and b/art/home/sources/hero-quiet-01.png differ
diff --git a/art/home/sources/hero-quiet-01.prompt.txt b/art/home/sources/hero-quiet-01.prompt.txt
new file mode 100644
index 000000000..aa77e6cf1
--- /dev/null
+++ b/art/home/sources/hero-quiet-01.prompt.txt
@@ -0,0 +1,15 @@
+Use case: website hero illustration, character layer, a corrected redraw. On the website this figure stands in a tall panel on the LEFT of the hero; the headline is an HTML speech bubble to her RIGHT whose tail points at her mouth. The bubble is NOT part of this image.
+Image 1 is the previous candidate. KEEP HER HEAD EXACTLY: face, eyes, the gentle open smile, the head tilt, hair shape, dark navy headband, the cornflower-blue bow with its small warm-gold C-shaped clasp, and the single short braid on HER LEFT (viewer's right). Also keep the idea of the pose: standing quietly with both hands lightly clasped in front at hip height.
+Image 2 is the approved full-body illustration: authoritative for BODY PROPORTIONS (shoulder width, arm length, skirt flare and length, leg length), the outfit and the pen and colour language.
+Image 3 is the approved character sheet: hair, braid side, headband, bow.
+Image 4 is the approved colour portrait: the bow's centre piece is a small warm-gold C-shaped clasp (the letter c, open on its right side); it must stay clearly readable as a C.
+
+Fix these problems of Image 1, which make her head look pasted onto a stiff body:
+1. The body ignores the head tilt. Make the body respond to it: the shoulders tilt with the head (the shoulder on the side her head leans towards sits a little lower), a slight natural S-curve through the torso, nothing mirror-symmetric.
+2. The shoulders are too narrow. Use the shoulder width of Image 2, with the hair mass only slightly wider than the shoulders. Upper arms hang naturally from the shoulders with the elbows a little away from the body; hands lightly clasped in front at hip height, hands a little smaller than in Image 1.
+3. The skirt is too wide. Use an A-line skirt with moderate flare like Image 2: hem about 1.6 times the shoulder width, ending just above the knee, legs as long as in Image 2.
+4. The skirt pocket is fully visible and clearly reads as a pocket, not hidden behind a wrist.
+5. Let a little of her shoulder show below the hair on the viewer's left, and reduce the sideways hair flick at eye level on the viewer's right.
+Stance: knees close together, one heel lifted slightly off the ground with only the toe touching, a small shy, cute stance.
+The overall impression is CUTE, GENTLE and QUIET. Expression: warm gentle smile with the mouth slightly open as if softly speaking, eyes soft and friendly, looking at the viewer. Pen and colour language of Image 2: confident hand-inked navy lines with thick-thin variation, sparse directional hatching, flat fills (straw-blonde hair, blue eyes, white blouse with thin red neck ribbon, blue pinafore dress, white socks, navy shoes), no gradients, airbrushed blush, glow or glossy highlights. Hands drawn simply and correctly.
+Canvas: portrait 1024 x 1536. The whole figure is visible with small margins, feet near the bottom. Background fully transparent; every area inside her silhouette fully opaque. No text, speech bubble, props, frame, floor shadow or other elements.
diff --git a/art/logo/build.sh b/art/logo/build.sh
index db2300d54..ca2e9b3c7 100755
--- a/art/logo/build.sh
+++ b/art/logo/build.sh
@@ -32,6 +32,10 @@ for size in (16, 32, 48, 64):
         # A light unsharp mask keeps the eyes from dissolving at tab size.
         im = im.filter(ImageFilter.UnsharpMask(radius=0.6, percent=80, threshold=0))
     im.save(f"{PUBLIC}favicon-{size}.png")
+# Some clients request /favicon.ico regardless of the <link> tags.
+Image.open(f"{PUBLIC}favicon-48.png").save(
+    PUBLIC + "favicon.ico", sizes=[(16, 16), (32, 32), (48, 48)],
+    append_images=[Image.open(f"{PUBLIC}favicon-{n}.png") for n in (16, 32)])
 Image.open("masters/apple-touch.png").convert("RGB").resize((180, 180), Image.LANCZOS).save(
     PUBLIC + "apple-touch-icon.png")
 Image.open("masters/vscode-icon.png").resize((256, 256), Image.LANCZOS).save("exports/vscode-icon.png")
diff --git a/package-lock.json b/package-lock.json
index 09c2b4f85..014431fe5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,9 +6,8 @@
     "": {
       "dependencies": {
         "@fontsource/jetbrains-mono": "^5.3.0",
-        "@fontsource/kosugi-maru": "^5.3.0",
-        "@fontsource/m-plus-rounded-1c": "^5.3.0",
         "@fontsource/noto-sans-sc": "^5.3.0",
+        "@fontsource/nunito": "^5.3.0",
         "@fontsource/zen-kaku-gothic-new": "^5.3.0"
       },
       "devDependencies": {
@@ -808,28 +807,19 @@
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/kosugi-maru": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/kosugi-maru/-/kosugi-maru-5.3.0.tgz",
-      "integrity": "sha512-fcYX3ecDrFiirzYdijGUaZbEkzqc6UTShMe/2ecd6JME7Q2txGHm6aFN8Lfd40RWS2H0RN68wFsS0YkJPFfmsg==",
-      "license": "Apache-2.0",
-      "funding": {
-        "url": "https://github.com/sponsors/ayuhito"
-      }
-    },
-    "node_modules/@fontsource/m-plus-rounded-1c": {
+    "node_modules/@fontsource/noto-sans-sc": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/m-plus-rounded-1c/-/m-plus-rounded-1c-5.3.0.tgz",
-      "integrity": "sha512-eB/JxJBRXLdfTsBDElsAZDMtHXM58Hf1tKkHoDVZAaUN7a+qYfwNKh4Q2f7Fk9YNg4xPFjTwooVlQyqbhi8CWQ==",
+      "resolved": "https://registry.npmjs.org/@fontsource/noto-sans-sc/-/noto-sans-sc-5.3.0.tgz",
+      "integrity": "sha512-HeqIlGm0+ohOKxZLuHj1qW6r6avHH0OWdKERAcSDI0RQ+MXrteuLKA+M+5eOA8rYy0MFvOR5AT0fQo2rUkye0Q==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
       }
     },
-    "node_modules/@fontsource/noto-sans-sc": {
+    "node_modules/@fontsource/nunito": {
       "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@fontsource/noto-sans-sc/-/noto-sans-sc-5.3.0.tgz",
-      "integrity": "sha512-HeqIlGm0+ohOKxZLuHj1qW6r6avHH0OWdKERAcSDI0RQ+MXrteuLKA+M+5eOA8rYy0MFvOR5AT0fQo2rUkye0Q==",
+      "resolved": "https://registry.npmjs.org/@fontsource/nunito/-/nunito-5.3.0.tgz",
+      "integrity": "sha512-vw9TaTQJ/zpEpKrsODuPmOvaVjXgdda6B+xXA4YqjrdeJ62MLgVoDerdRXFQHyBnSCt2yQ2nHKCHPP/Pv7Xq4Q==",
       "license": "OFL-1.1",
       "funding": {
         "url": "https://github.com/sponsors/ayuhito"
diff --git a/package.json b/package.json
index f0f0cf270..11e6cb1cc 100644
--- a/package.json
+++ b/package.json
@@ -15,9 +15,8 @@
   },
   "dependencies": {
     "@fontsource/jetbrains-mono": "^5.3.0",
-    "@fontsource/kosugi-maru": "^5.3.0",
-    "@fontsource/m-plus-rounded-1c": "^5.3.0",
     "@fontsource/noto-sans-sc": "^5.3.0",
+    "@fontsource/nunito": "^5.3.0",
     "@fontsource/zen-kaku-gothic-new": "^5.3.0"
   }
 }
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 000000000..71c9a00de
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/image.png b/public/image.png
deleted file mode 100644
index 088f6f8dc..000000000
Binary files a/public/image.png and /dev/null differ
diff --git a/public/mascot/avatar.webp b/public/mascot/avatar.webp
deleted file mode 100644
index 8db7995c3..000000000
Binary files a/public/mascot/avatar.webp and /dev/null differ
diff --git a/public/mascot/face-angry.webp b/public/mascot/face-angry.webp
deleted file mode 100644
index 42a26d8a2..000000000
Binary files a/public/mascot/face-angry.webp and /dev/null differ
diff --git a/public/mascot/face-proud.webp b/public/mascot/face-proud.webp
deleted file mode 100644
index de22d4523..000000000
Binary files a/public/mascot/face-proud.webp and /dev/null differ
diff --git a/public/mascot/face-shy.webp b/public/mascot/face-shy.webp
deleted file mode 100644
index aa0dd1ea7..000000000
Binary files a/public/mascot/face-shy.webp and /dev/null differ
diff --git a/public/mascot/face-skeptical.webp b/public/mascot/face-skeptical.webp
deleted file mode 100644
index 3a8a7f907..000000000
Binary files a/public/mascot/face-skeptical.webp and /dev/null differ
diff --git a/public/mascot/face-smiling.webp b/public/mascot/face-smiling.webp
deleted file mode 100644
index 118e459b7..000000000
Binary files a/public/mascot/face-smiling.webp and /dev/null differ
diff --git a/public/mascot/face-surprised.webp b/public/mascot/face-surprised.webp
deleted file mode 100644
index ddfa92a9c..000000000
Binary files a/public/mascot/face-surprised.webp and /dev/null differ
diff --git a/public/mascot/face-thinking.webp b/public/mascot/face-thinking.webp
deleted file mode 100644
index 9a1b28afc..000000000
Binary files a/public/mascot/face-thinking.webp and /dev/null differ
diff --git a/public/mascot/hero-home.webp b/public/mascot/hero-home.webp
new file mode 100644
index 000000000..c562e7adf
Binary files /dev/null and b/public/mascot/hero-home.webp differ
diff --git a/public/mascot/hero-welcome.webp b/public/mascot/hero-welcome.webp
deleted file mode 100644
index 32f8fa121..000000000
Binary files a/public/mascot/hero-welcome.webp and /dev/null differ
diff --git a/public/mascot/logo-mark-ink.webp b/public/mascot/logo-mark-ink.webp
deleted file mode 100644
index 1a1db1c6b..000000000
Binary files a/public/mascot/logo-mark-ink.webp and /dev/null differ
diff --git a/public/mascot/logo-mark-mono.webp b/public/mascot/logo-mark-mono.webp
deleted file mode 100644
index 876a63427..000000000
Binary files a/public/mascot/logo-mark-mono.webp and /dev/null differ
diff --git a/public/mascot/project-catter.webp b/public/mascot/project-catter.webp
deleted file mode 100644
index cad7c8530..000000000
Binary files a/public/mascot/project-catter.webp and /dev/null differ
diff --git a/public/mascot/project-clice.webp b/public/mascot/project-clice.webp
deleted file mode 100644
index 140596920..000000000
Binary files a/public/mascot/project-clice.webp and /dev/null differ
diff --git a/public/mascot/project-kotatsu.webp b/public/mascot/project-kotatsu.webp
deleted file mode 100644
index b22b6ec60..000000000
Binary files a/public/mascot/project-kotatsu.webp and /dev/null differ
diff --git a/public/mascot/under-construction.webp b/public/mascot/under-construction.webp
deleted file mode 100644
index 5bdea71c6..000000000
Binary files a/public/mascot/under-construction.webp and /dev/null differ
diff --git a/public/mascot/wordmark-io.webp b/public/mascot/wordmark-io.webp
deleted file mode 100644
index c4ec45263..000000000
Binary files a/public/mascot/wordmark-io.webp and /dev/null differ
diff --git a/public/mascot/wordmark.webp b/public/mascot/wordmark.webp
deleted file mode 100644
index c91522a6b..000000000
Binary files a/public/mascot/wordmark.webp and /dev/null differ