@popcraft/kit 0.24.3 → 0.26.0

package/src/templates/themes/comic-book-art.ts

@@ -0,0 +1,796 @@
+// The comic pages' art engine: a recurring cast, places drawn in perspective, and light that falls one way.
+//
+// ── The art direction ────────────────────────────────────────────────────────────────────────────────────────────
+//
+// The comic pages tell ONE short story, "The Long Night": on the night Harbour City's lights go out block by block,
+// Ada Okoye (a radio repairer, thirty-four) and her kid brother Teo climb the old harbour radio tower, where the
+// Lamplighter (the tower's last night watchman) has switched the city off for one hour so it can see the stars.
+//
+// Three people, drawn the same way on every page, so a reader knows them by their outline alone:
+//
+//   Ada         7½ heads tall. A chin-length bob, headphones round her neck, a knee-length coat that flares when
+//               she moves, a tool bag on a strap.
+//   Teo         5½ heads tall. A cap with a long brim, a hoodie two sizes too big, high-tops.
+//   Lamplighter 8 heads tall, and stooped. A wide-brimmed hat, a scarf, a long coat, and the lantern: the only warm
+//               light in a dark city, and the light every page after the blackout is lit by.
+//
+// Figures are built on a skeleton (pelvis, spine, limbs as tapered segments) so their proportions never drift
+// between poses; closeups are always the PROFILE bust, facing the way the figure faces in the shot before it.
+//
+// Every page is drawn in exactly one of four house styles, chosen for what the page has to do:
+//
+//   silver  Silver Age four-colour. A heavy ink line on everything, flat process colours, hard cel shadows,
+//           a warm rim on the light side, Ben-Day dots only where a panel needs to shout. The action pages.
+//   clair   Ligne claire (Hergé, Moebius's quiet pages). One even line weight, no hatching, no rim, flat bright
+//           colour and clear daylight-like readability even at night. The calm, wonder pages.
+//   noir    Noir / manga black and white. No outlines at all: solid black shapes, white rim light cut along the
+//           edge that faces the light, one light source per page. The waiting, the dark.
+//   riso    Riso zine. Two inks (blue and fluorescent pink) on cream stock, overprinting where they cross. The
+//           memory pages.
+//
+// A style is a set of palette roles plus line weights; the drawing code is shared. Every solid colour is a palette
+// or brand role (so a brand kit can recolour the page), and gradients are used only for skies and light.
+//
+// Grammar every page keeps (comic-book-page.ts lays it out): an establishing shot first, then medium shots, then
+// closeups; the camera stays on one side of the action (the 180° rule: Ada is on the left of every two-shot and
+// faces right; the Lamplighter, when he appears, faces left); balloons sit along the Z-path in reading order, their
+// tails pointing at the speaker's mouth; sound effects are drawn into the panel, on a burst or in the art.
+
+import type { Effect, VectorPath } from '@/lib/document/types'
+import type { Kit } from '../kit'
+import { curve, ellipsePts, type P } from '../anime/draw'
+import { rng } from '../shared/draw'
+
+// ─── Styles ───────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type Style = 'silver' | 'clair' | 'noir' | 'riso'
+
+/** The roles every style defines, so the drawing code never asks which style it is drawing in for a colour. */
+type Roles = {
+  skyTop: string; skyLow: string; far: string; mid: string; face: string; side: string; near: string
+  win: string; winOff: string; ink: string; rim: string; glow: string; shadow: string; star: string
+  skin: string; adaCoat: string; adaHair: string; teoHood: string; teoCap: string; lampCoat: string; lampHat: string; legs: string
+  g1: string; g2: string; g3: string; g4: string; g5: string
+}
+
+export const STYLE_ROLES: Record<Style, Roles> = {
+  // Process colours on newsprint: cyan-blue night, warm magenta-orange light, black ink.
+  silver: {
+    skyTop: '#16264F', skyLow: '#3E5A9C', far: '#2D4580', mid: '#22345F', face: '#5876B8', side: '#1B2747', near: '#121A30',
+    win: '#FFD34E', winOff: '#30416E', ink: '#14110E', rim: '#FFB03A', glow: '#FFE07A', shadow: '#0C1022', star: '#FFF6D8',
+    skin: '#F2B48A', adaCoat: '#D8352A', adaHair: '#1E1512', teoHood: '#F2A81D', teoCap: '#2C7BE5', lampCoat: '#3B6E4F', lampHat: '#2A2420', legs: '#2B3550',
+    g1: '#2E4A8A', g2: '#E8732A', g3: '#1B2C57', g4: '#C93A2C', g5: '#4F6FB0',
+  },
+  // Clear line: a flat dusk blue, a flat lamp yellow, clean local colour.
+  clair: {
+    skyTop: '#2F5D8C', skyLow: '#7FA9CF', far: '#9DB8D2', mid: '#7895B6', face: '#E9D9B8', side: '#B9A47E', near: '#5E6F86',
+    win: '#FFE38A', winOff: '#6B7FA0', ink: '#1C2430', rim: '#FFE38A', glow: '#FFE9A8', shadow: '#3D4B63', star: '#FFFFFF',
+    skin: '#F4C7A1', adaCoat: '#D9483B', adaHair: '#2A1E1A', teoHood: '#F2B632', teoCap: '#2F7FD0', lampCoat: '#4E7D5B', lampHat: '#3A302A', legs: '#3B4A66',
+    g1: '#2F5D8C', g2: '#E7C46A', g3: '#5E86B0', g4: '#C9604C', g5: '#8FB3D6',
+  },
+  // Black, white and one grey.
+  noir: {
+    skyTop: '#2A2A2A', skyLow: '#5C5C5C', far: '#3A3A3A', mid: '#575757', face: '#B8B8B8', side: '#2B2B2B', near: '#161616',
+    win: '#F2F2F2', winOff: '#262626', ink: '#000000', rim: '#FFFFFF', glow: '#FFFFFF', shadow: '#000000', star: '#FFFFFF',
+    skin: '#000000', adaCoat: '#000000', adaHair: '#000000', teoHood: '#000000', teoCap: '#000000', lampCoat: '#000000', lampHat: '#000000', legs: '#000000',
+    g1: '#D9D9D9', g2: '#9A9A9A', g3: '#F2F2F2', g4: '#6E6E6E', g5: '#BFBFBF',
+  },
+  // Two inks: riso blue and fluorescent pink, and their tints.
+  riso: {
+    skyTop: '#FFC7E4', skyLow: '#FBF0EC', far: '#C9D4F5', mid: '#8FA3E8', face: '#FF9BD0', side: '#5E74D0', near: '#0B2A8C',
+    win: '#FF48B0', winOff: '#8FA3E8', ink: '#0B2A8C', rim: '#FF48B0', glow: '#FFD9EC', shadow: '#0B2A8C', star: '#FF48B0',
+    skin: '#FFC7E4', adaCoat: '#FF48B0', adaHair: '#0B2A8C', teoHood: '#FF9BD0', teoCap: '#0B2A8C', lampCoat: '#5E74D0', lampHat: '#0B2A8C', legs: '#0B2A8C',
+    g1: '#FFC7E4', g2: '#C9D4F5', g3: '#FFE3F1', g4: '#E3E9FB', g5: '#FF9BD0',
+  },
+}
+
+/** How each style draws: line weights (px at page scale), whether figures carry a rim, and how shadows fall. */
+export const LOOK: Record<Style, { line: number; fig: number; arch: number; rim: number; cel: boolean; multiply: boolean }> = {
+  silver: { line: 4, fig: 2.6, arch: 1.6, rim: 2.4, cel: true, multiply: false },
+  clair: { line: 2.5, fig: 1.8, arch: 1.4, rim: 0, cel: false, multiply: false },
+  noir: { line: 4, fig: 0, arch: 0, rim: 2.6, cel: false, multiply: false },
+  riso: { line: 3, fig: 0, arch: 0, rim: 0, cel: false, multiply: true },
+}
+
+/**
+ * The style's palette roles on the document, named for the style (`silverInk`, `noirRim`), so a whole issue can
+ * carry pages in different styles side by side.
+ */
+export function stylePalette(k: Kit, style: Style) {
+  k.palette(Object.fromEntries(Object.entries(STYLE_ROLES[style]).map(([r, v]) => [`${style}${r[0].toUpperCase()}${r.slice(1)}`, v])))
+}
+
+/** A drawing role (`ink`, `skyTop`, `g2`) as the style's palette role; brand roles (`paper`, `card`) pass through. */
+export function role(style: Style, name: string): string {
+  return name in STYLE_ROLES.silver ? `${style}${name[0].toUpperCase()}${name.slice(1)}` : name
+}
+
+// ─── Paths ────────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type V = [number, number]
+const poly = (pts: readonly V[]): VectorPath => ({ closed: true, points: pts.map(([x, y]) => ({ x, y })) })
+const open = (pts: readonly V[]): VectorPath => ({ closed: false, points: pts.map(([x, y]) => ({ x, y })) })
+const smooth = (pts: readonly V[], corners: number[] = [], closed = true): VectorPath => ({ closed, points: curve(pts as unknown as P[], closed, corners) })
+const oval = (cx: number, cy: number, rx: number, ry: number, n = 14): VectorPath => smooth(ellipsePts(cx, cy, rx, ry, n) as V[])
+const lerp = (a: V, b: V, t: number): V => [a[0] + (b[0] - a[0]) * t, a[1] + (b[1] - a[1]) * t]
+/** A point inside the quad a-b-c-d (a top-left, b top-right, c bottom-right, d bottom-left) at (u, v). */
+const bilerp = (q: readonly V[], u: number, v: number): V => lerp(lerp(q[0], q[1], u), lerp(q[3], q[2], u), v)
+const sub = (q: readonly V[], u0: number, v0: number, u1: number, v1: number): V[] => [bilerp(q, u0, v0), bilerp(q, u1, v0), bilerp(q, u1, v1), bilerp(q, u0, v1)]
+
+/** What a panel's drawing is painted into: its box and the kit, plus the style. */
+export interface Canvas { k: Kit; parent: string; w: number; h: number; style: Style }
+
+/** A path as a polyline: its Bézier segments sampled. */
+function flatten(p: VectorPath): V[] {
+  const pts = p.points, n = pts.length, out: V[] = []
+  const segs = p.closed ? n : n - 1
+  for (let i = 0; i < segs; i++) {
+    const a = pts[i], b = pts[(i + 1) % n]
+    const c1 = a.handleOut ?? a, c2 = b.handleIn ?? b
+    const curved = !!(a.handleOut || b.handleIn)
+    const steps = curved ? 8 : 1
+    for (let s = 0; s < steps; s++) {
+      const t = s / steps, u = 1 - t
+      out.push([u * u * u * a.x + 3 * u * u * t * c1.x + 3 * u * t * t * c2.x + t * t * t * b.x, u * u * u * a.y + 3 * u * u * t * c1.y + 3 * u * t * t * c2.y + t * t * t * b.y])
+    }
+  }
+  if (!p.closed) out.push([pts[n - 1].x, pts[n - 1].y])
+  return out
+}
+
+/** A closed polygon cut to the box 0…w × 0…h (Sutherland–Hodgman). */
+function clipPoly(pts: V[], w: number, h: number): V[] {
+  const edges: [(p: V) => boolean, (a: V, b: V) => V][] = [
+    [p => p[0] >= 0, (a, b) => [0, a[1] + ((b[1] - a[1]) * (0 - a[0])) / (b[0] - a[0])]],
+    [p => p[0] <= w, (a, b) => [w, a[1] + ((b[1] - a[1]) * (w - a[0])) / (b[0] - a[0])]],
+    [p => p[1] >= 0, (a, b) => [a[0] + ((b[0] - a[0]) * (0 - a[1])) / (b[1] - a[1]), 0]],
+    [p => p[1] <= h, (a, b) => [a[0] + ((b[0] - a[0]) * (h - a[1])) / (b[1] - a[1]), h]],
+  ]
+  let out = pts
+  for (const [inside, cross] of edges) {
+    const src = out
+    out = []
+    for (let i = 0; i < src.length; i++) {
+      const a = src[i], b = src[(i + 1) % src.length]
+      if (inside(a)) { out.push(a); if (!inside(b)) out.push(cross(a, b)) } else if (inside(b)) out.push(cross(a, b))
+    }
+    if (!out.length) return out
+  }
+  return out
+}
+
+/** An open polyline cut to the box: the pieces inside it. */
+function clipLine(pts: V[], w: number, h: number): V[][] {
+  const pieces: V[][] = []
+  let cur: V[] = []
+  for (let i = 0; i + 1 < pts.length; i++) {
+    const [x0, y0] = pts[i], [x1, y1] = pts[i + 1]
+    let t0 = 0, t1 = 1
+    const dx = x1 - x0, dy = y1 - y0
+    let ok = true
+    for (const [pp, q] of [[-dx, x0], [dx, w - x0], [-dy, y0], [dy, h - y0]] as [number, number][]) {
+      if (pp === 0) { if (q < 0) { ok = false; break } continue }
+      const r = q / pp
+      if (pp < 0) { if (r > t1) { ok = false; break } if (r > t0) t0 = r } else { if (r < t0) { ok = false; break } if (r < t1) t1 = r }
+    }
+    if (!ok) { if (cur.length > 1) pieces.push(cur); cur = []; continue }
+    const a: V = [x0 + dx * t0, y0 + dy * t0], b: V = [x0 + dx * t1, y0 + dy * t1]
+    if (!cur.length || t0 > 0) { if (cur.length > 1) pieces.push(cur); cur = [a] }
+    cur.push(b)
+    if (t1 < 1) { pieces.push(cur); cur = [] }
+    void x1; void y1
+  }
+  if (cur.length > 1) pieces.push(cur)
+  return pieces
+}
+
+/**
+ * `paths` kept inside the panel's box: a mask group clips what is drawn inside its layers' boxes, not paths that run
+ * past them, so art is cut to the frame here. Paths already inside are left as drawn (curves stay curves).
+ */
+function within(paths: VectorPath[], w: number, h: number): VectorPath[] {
+  const out: VectorPath[] = []
+  for (const p of paths) {
+    const inside = p.points.every(q => q.x >= 0 && q.x <= w && q.y >= 0 && q.y <= h && (!q.handleIn || (q.handleIn.x >= 0 && q.handleIn.x <= w && q.handleIn.y >= 0 && q.handleIn.y <= h)) && (!q.handleOut || (q.handleOut.x >= 0 && q.handleOut.x <= w && q.handleOut.y >= 0 && q.handleOut.y <= h)))
+    if (inside) { out.push(p); continue }
+    const flat = flatten(p)
+    if (p.closed) { const c = clipPoly(flat, w, h); if (c.length > 2) out.push(poly(c)) } else for (const piece of clipLine(flat, w, h)) out.push(open(piece))
+  }
+  return out
+}
+
+/** Paths of one role as one layer, the full size of the panel (paths may run past it: the panel's mask cuts them). */
+export function paint(c: Canvas, paths: VectorPath[], role_: string, o: { name: string; line?: number; lineRole?: string; opacity?: number; effects?: Effect[]; stroke?: boolean } = { name: 'Art' }): string | null {
+  paths = within(paths, c.w, c.h)
+  if (!paths.length) return null
+  role_ = role(c.style, role_)
+  const stroke = o.line && o.line > 0 ? { color: role(c.style, o.lineRole ?? 'ink'), width: o.line, join: 'ROUND' as const } : undefined
+  return o.stroke
+    ? c.k.vector(c.parent, c.w, c.h, paths, role_, { name: o.name, strokeWidth: o.line ?? 2, ...(o.opacity !== undefined ? { opacity: o.opacity } : {}) })
+    : c.k.vector(c.parent, c.w, c.h, paths, role_, { name: o.name, ...(stroke ? { stroke } : {}), ...(o.opacity !== undefined ? { opacity: o.opacity } : {}), ...(o.effects ? { effects: o.effects } : {}) })
+}
+
+/** A sky: a gradient from `skyTop` to `skyLow` down to the horizon (gradients are for skies and light only). */
+function sky(c: Canvas, hy: number, world?: { w: number; at: number }) {
+  const { k } = c
+  const flat = c.style === 'clair' || c.style === 'riso'
+  // In a polyptych the sky is ONE sky across every frame: each frame shows its stretch of it.
+  const skyId = k.rect(c.parent, world ? world.w : c.w, Math.max(1, hy + 2), flat ? role(c.style, 'skyTop') : [k.gradient({ from: role(c.style, 'skyTop'), to: role(c.style, 'skyLow'), angle: 90 })], { name: 'Sky' })
+  if (world) k.patch(skyId, { x: -world.at })
+  if (flat) k.patch(k.rect(c.parent, c.w, Math.max(1, hy * 0.35), role(c.style, 'skyLow'), { name: 'Sky band', opacity: c.style === 'riso' ? 1 : 0.55 }), { y: Math.round(hy * 0.65) })
+}
+
+function stars(c: Canvas, hy: number, seed: number, n = 40, world?: { w: number; at: number }) {
+  const r = rng(seed), paths: VectorPath[] = [], W = world?.w ?? c.w, ox = world?.at ?? 0
+  n = Math.round(n * (W / c.w))
+  for (let i = 0; i < n; i++) {
+    const x = r() * W - ox, y = r() * hy * 0.85, s = 0.8 + r() * (i % 9 === 0 ? 2.6 : 1.2)
+    paths.push(i % 9 === 0 ? poly([[x, y - s * 2.4], [x + s * 0.5, y - s * 0.5], [x + s * 2.4, y], [x + s * 0.5, y + s * 0.5], [x, y + s * 2.4], [x - s * 0.5, y + s * 0.5], [x - s * 2.4, y], [x - s * 0.5, y - s * 0.5]]) : oval(x, y, s, s, 6))
+  }
+  paint(c, paths, 'star', { name: 'Stars' })
+}
+
+/** The Milky Way: a soft band of light across the world, thick with small stars along its spine. */
+function milkyWay(c: Canvas, seed: number, world?: { w: number; at: number }) {
+  const W = world?.w ?? c.w, ox = world?.at ?? 0, r = rng(seed + 5)
+  const a: V = [-ox - 20, c.h * 0.75], b: V = [W - ox + 20, c.h * 0.05]
+  const dx = b[0] - a[0], dy = b[1] - a[1], len = Math.hypot(dx, dy), nx = -dy / len, ny = dx / len
+  // A band that wanders: its spine bends, its edges are uneven, and it is brighter at the core.
+  const band = (wid: number, wobble: number, seed2: number): VectorPath => {
+    const rr = rng(seed2), n = 9, top: V[] = [], bot: V[] = []
+    for (let i = 0; i <= n; i++) {
+      const t = i / n, bend = Math.sin(t * Math.PI) * c.h * 0.08, cx = a[0] + dx * t + nx * bend, cy = a[1] + dy * t + ny * bend
+      const w1 = wid * (0.7 + rr() * wobble), w2 = wid * (0.7 + rr() * wobble)
+      top.push([cx + nx * w1, cy + ny * w1]); bot.push([cx - nx * w2, cy - ny * w2])
+    }
+    return smooth([...top, ...bot.reverse()], [n, n + 1])
+  }
+  paint(c, [band(c.h * 0.2, 0.6, seed)], 'skyLow', { name: 'Milky Way haze', opacity: 0.22 })
+  paint(c, [band(c.h * 0.11, 0.7, seed + 1)], 'skyLow', { name: 'Milky Way glow', opacity: 0.3 })
+  paint(c, [band(c.h * 0.045, 0.9, seed + 2)], 'glow', { name: 'Milky Way core', opacity: 0.35 })
+  const dust: VectorPath[] = []
+  for (let i = 0; i < 420 * (W / c.w); i++) {
+    const t = r(), off = (r() - 0.5) * (r() - 0.5) * c.h * 0.6 + Math.sin(t * Math.PI) * c.h * 0.08, x = a[0] + dx * t + nx * off, y = a[1] + dy * t + ny * off, s = 0.5 + r() * 0.9
+    dust.push(poly([[x - s, y], [x, y - s], [x + s, y], [x, y + s]]))
+  }
+  paint(c, dust, 'star', { name: 'Star dust', opacity: 0.8 })
+}
+
+/** A light: a moon, a bare bulb or the lantern, with its glow (a radial gradient: light is allowed one). */
+export type LightKind = 'moon' | 'lantern' | 'bulb' | 'none'
+function lightSource(c: Canvas, kind: LightKind, x: number, y: number, r: number) {
+  const { k } = c
+  if (kind === 'none') return
+  const g = r * (kind === 'moon' ? 3.2 : 4.4)
+  // The glow fills the panel's box, its radial gradient centred on the light (so the mask has nothing to cut).
+  if (c.style !== 'clair') k.rect(c.parent, c.w, c.h, [k.gradient({ from: role(c.style, 'glow'), to: role(c.style, 'glow'), kind: 'RADIAL', fromOpacity: kind === 'moon' ? 0.4 : 0.7, toOpacity: 0, handles: [{ x: x / c.w, y: y / c.h }, { x: (x + g) / c.w, y: y / c.h }, { x: x / c.w, y: (y + g) / c.h }] })], { name: 'Glow' })
+  if (kind === 'moon') {
+    paint(c, [oval(x, y, r, r, 20)], 'glow', { name: 'Moon', line: LOOK[c.style].arch })
+    paint(c, [oval(x - r * 0.3, y - r * 0.2, r * 0.18, r * 0.15, 8), oval(x + r * 0.25, y + r * 0.3, r * 0.12, r * 0.1, 8)], 'skyLow', { name: 'Moon seas', opacity: 0.35 })
+  } else if (kind === 'bulb') {
+    paint(c, [open([[x, 0], [x, y - r]])], 'ink', { name: 'Flex', stroke: true, line: 2 })
+    paint(c, [oval(x, y, r * 0.7, r, 12)], 'glow', { name: 'Bulb', line: LOOK[c.style].arch })
+  } else {
+    lantern(c, x, y, r)
+  }
+}
+
+/** The Lamplighter's lantern: a brass cage round a flame. `r` is its half-height. */
+function lantern(c: Canvas, x: number, y: number, r: number) {
+  const w = r * 0.62, line = Math.max(1.2, LOOK[c.style].fig || 1.6)
+  paint(c, [poly([[x - w, y - r * 0.7], [x + w, y - r * 0.7], [x + w * 0.85, y + r * 0.8], [x - w * 0.85, y + r * 0.8]])], 'glow', { name: 'Lantern glass', line, lineRole: 'ink' })
+  paint(c, [smooth([[x, y - r * 0.45], [x + w * 0.42, y + r * 0.2], [x, y + r * 0.55], [x - w * 0.42, y + r * 0.2]], [0])], 'win', { name: 'Lantern flame' })
+  paint(c, [poly([[x - w * 1.15, y - r * 0.7], [x + w * 1.15, y - r * 0.7], [x + w * 0.5, y - r * 1.05], [x - w * 0.5, y - r * 1.05]]), poly([[x - w, y + r * 0.8], [x + w, y + r * 0.8], [x + w, y + r * 0.98], [x - w, y + r * 0.98]])], 'ink', { name: 'Lantern cage' })
+  paint(c, [open([[x - w * 0.4, y - r * 1.05], [x, y - r * 1.45], [x + w * 0.4, y - r * 1.05]])], 'ink', { name: 'Lantern handle', stroke: true, line })
+}
+
+// ─── Places ───────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type Env = 'skyline' | 'rooftops' | 'street' | 'shop' | 'tower' | 'night-sky' | 'focus' | 'speed' | 'plain'
+
+export interface Shot {
+  env: Env
+  /** The horizon, as a share of the panel's height (eye level). */
+  horizon?: number
+  /** The vanishing point's x, as a share of the width. */
+  vp?: number
+  /** How many windows are still lit, 0…1: the blackout is told in windows. */
+  lit?: number
+  /** How tall the near blocks stand, as a share of their usual height (a view from higher up sees them lower). */
+  height?: number
+  /** The blackout sweeping in from one side: windows on that side are already out. */
+  outFrom?: 'left' | 'right'
+  light?: { kind: LightKind; x: number; y: number; r?: number }
+  stars?: boolean
+  cast?: Actor[]
+  seed?: number
+  /** A polyptych: this panel is a window onto a wider world, `world` px wide, starting `at` px in. */
+  world?: { w: number; at: number }
+  /** The Milky Way across a night sky. */
+  milky?: boolean
+  /** A platform edge across the foot of the frame for the cast to stand on (the tower top). */
+  platform?: number
+  /** Ben-Day screen over the ground (the flashback, a shock beat). */
+  tone?: boolean
+  /** Focus lines / speed lines on top of the place. */
+  lines?: 'focus' | 'speed'
+  /** Where the focus lines point to (shares). */
+  focus?: [number, number]
+}
+
+/** How lit a window at world x still is while the blackout sweeps in from `outFrom`. */
+function sweep(s: Shot, x: number, W: number): number {
+  if (!s.outFrom) return 1
+  const t = Math.min(1, Math.max(0, x / W)), u = s.outFrom === 'left' ? t : 1 - t
+  return Math.min(1, Math.max(0, (u - 0.3) / 0.35)) * 1.6
+}
+
+/**
+ * A skyline at eye level, in two-point perspective: far towers as flat planes with pinprick windows, nearer
+ * blocks with a lit face and a side running to the vanishing point.
+ */
+function skyline(c: Canvas, s: Shot, hy: number, ox: number, W: number) {
+  const r = rng(s.seed ?? 7), lit = s.lit ?? 0.7, vx = (s.vp ?? 0.5) * W - ox
+  const far: VectorPath[] = [], winsFar: VectorPath[] = [], faces: VectorPath[] = [], sides: VectorPath[] = [], wins: VectorPath[] = [], off: VectorPath[] = []
+  // Far: a dense band of flat towers.
+  for (let x = -ox - 20; x < c.w + 40;) {
+    const bw = 18 + r() * 40, bh = hy * (0.12 + r() * 0.32)
+    far.push(poly([[x, hy - bh], [x + bw, hy - bh], [x + bw, hy + 4], [x, hy + 4]]))
+    for (let wy = hy - bh + 6; wy < hy - 4; wy += 9) for (let wx = x + 4; wx < x + bw - 4; wx += 7) if (r() < lit * 0.5 * sweep(s, wx + ox, W)) winsFar.push(poly([[wx, wy], [wx + 2.4, wy], [wx + 2.4, wy + 3.4], [wx, wy + 3.4]]))
+    x += bw + 2 + r() * 6
+  }
+  // Near: blocks with their side to the vanishing point. A block left of it shows its right side, and vice versa.
+  const base = hy + (c.h - hy) * 0.45
+  for (let x = -ox - 30; x < c.w + 60;) {
+    const bw = 50 + r() * 70, top = hy - hy * (0.3 + r() * 0.55) * (s.height ?? 1), right = x + bw
+    const sideRight = right < vx, e = sideRight ? right : x
+    const depth = Math.min(36, Math.abs(vx - e) * 0.18)
+    const toVp = (p: V, d: number): V => { const len = Math.hypot(vx - p[0], hy - p[1]) || 1; const t = d / Math.max(1, Math.abs(vx - p[0])); return [p[0] + (vx - p[0]) * Math.min(t, 0.9), p[1] + (hy - p[1]) * Math.min(t, 0.9) + 0 * len] }
+    const front: V[] = [[x, top], [right, top], [right, base], [x, base]]
+    const sTop = toVp([e, top], depth), sBot = toVp([e, base], depth)
+    const side: V[] = sideRight ? [[right, top], sTop, sBot, [right, base]] : [sTop, [x, top], [x, base], sBot]
+    faces.push(poly(front)); sides.push(poly(side))
+    const cols = Math.max(2, Math.round(bw / 16)), rows = Math.max(3, Math.round((base - top) / 20))
+    for (let i = 0; i < cols; i++) for (let j = 0; j < rows; j++) {
+      const q = sub(front, (i + 0.25) / cols, (j + 0.22) / rows, (i + 0.72) / cols, (j + 0.66) / rows)
+      ;(r() < lit * sweep(s, q[0][0] + ox, W) ? wins : off).push(poly(q))
+    }
+    for (let i = 0; i < 2; i++) for (let j = 0; j < rows; j++) {
+      const q = sub(side, sideRight ? (i + 0.2) / 2 : (i + 0.3) / 2, (j + 0.22) / rows, sideRight ? (i + 0.7) / 2 : (i + 0.8) / 2, (j + 0.66) / rows)
+      ;(r() < lit * 0.8 * sweep(s, q[0][0] + ox, W) ? wins : off).push(poly(q))
+    }
+    x += bw + 26 + r() * 50
+  }
+  const L = LOOK[c.style]
+  paint(c, far, 'far', { name: 'Far towers' })
+  paint(c, winsFar, 'win', { name: 'Far windows', opacity: 0.85 })
+  paint(c, sides, 'side', { name: 'Block sides', line: L.arch })
+  paint(c, faces, 'mid', { name: 'Block faces', line: L.arch })
+  paint(c, off, 'winOff', { name: 'Dark windows' })
+  paint(c, wins, 'win', { name: 'Lit windows' })
+}
+
+/** The rooftop the camera stands on: a slab from `gy` down, its parapet, a water tank, vents. */
+function roofSlab(c: Canvas, gy: number, s: Shot, ox: number) {
+  const r = rng((s.seed ?? 7) + 31), L = LOOK[c.style]
+  paint(c, [poly([[-10, gy], [c.w + 10, gy], [c.w + 10, c.h + 10], [-10, c.h + 10]])], 'near', { name: 'Roof', line: L.arch })
+  paint(c, [poly([[-10, gy - 6], [c.w + 10, gy - 6], [c.w + 10, gy + 4], [-10, gy + 4]])], 'side', { name: 'Parapet', line: L.arch })
+  // Tar seams running to the vanishing point.
+  const vx = (s.vp ?? 0.5) * (s.world?.w ?? c.w) - ox, seams: VectorPath[] = []
+  for (let i = -4; i <= 4; i++) seams.push(open([[vx + i * (c.w / 5), c.h + 10], lerp([vx + i * (c.w / 5), c.h + 10], [vx, gy], 0.85)]))
+  void seams
+  // A water tank on legs, somewhere along the roof (the city's signature).
+  const tx = ((s.seed ?? 7) * 97) % (c.w * 0.7) + c.w * 0.1 - (ox % c.w) * 0, th = Math.min(c.h * 0.32, 120), tw = th * 0.7, ty = gy - th - th * 0.4
+  if (r() < 0.8 && c.w > 160) {
+    paint(c, [poly([[tx + tw * 0.15, ty + th], [tx + tw * 0.2, gy], [tx + tw * 0.26, gy], [tx + tw * 0.24, ty + th]]), poly([[tx + tw * 0.8, ty + th], [tx + tw * 0.76, gy], [tx + tw * 0.82, gy], [tx + tw * 0.86, ty + th]])], 'ink', { name: 'Tank legs' })
+    paint(c, [poly([[tx, ty + th * 0.18], [tx + tw, ty + th * 0.18], [tx + tw, ty + th], [tx, ty + th]])], 'mid', { name: 'Water tank', line: L.arch || 0 })
+    paint(c, [poly([[tx + tw * 0.62, ty + th * 0.18], [tx + tw, ty + th * 0.18], [tx + tw, ty + th], [tx + tw * 0.62, ty + th]])], 'side', { name: 'Tank shade' })
+    paint(c, [poly([[tx - 4, ty + th * 0.18], [tx + tw / 2, ty - th * 0.12], [tx + tw + 4, ty + th * 0.18]])], 'side', { name: 'Tank roof', line: L.arch || 0 })
+    const hoops: VectorPath[] = []
+    for (let i = 1; i < 4; i++) hoops.push(open([[tx, ty + th * (0.18 + i * 0.2)], [tx + tw, ty + th * (0.18 + i * 0.2)]]))
+    paint(c, hoops, 'ink', { name: 'Tank hoops', stroke: true, line: 1.6 })
+  }
+}
+
+/** Rooftops seen across: blocks of different heights with gaps between them, chimneys and vents. */
+function rooftops(c: Canvas, s: Shot, hy: number, ox: number, W: number) {
+  const r = rng(s.seed ?? 11), L = LOOK[c.style]
+  const tops: VectorPath[] = [], walls: VectorPath[] = [], chims: VectorPath[] = [], lit: VectorPath[] = []
+  let x = -ox - 40
+  while (x < c.w + 60) {
+    const bw = 140 + r() * 160, top = hy + (c.h - hy) * (0.15 + r() * 0.35), gap = 26 + r() * 30
+    tops.push(poly([[x, top], [x + bw, top], [x + bw - 8, top + 10], [x + 8, top + 10]]))
+    walls.push(poly([[x + 8, top + 10], [x + bw - 8, top + 10], [x + bw - 8, c.h + 20], [x + 8, c.h + 20]]))
+    for (let i = 0; i < 2; i++) {
+      const cx = x + 20 + r() * (bw - 50), ch = 20 + r() * 26
+      chims.push(poly([[cx, top - ch], [cx + 16, top - ch], [cx + 16, top], [cx, top]]))
+    }
+    for (let wy = top + 30; wy < c.h; wy += 34) for (let wx = x + 22; wx < x + bw - 30; wx += 30) if (r() < (s.lit ?? 0.2)) lit.push(poly([[wx, wy], [wx + 12, wy], [wx + 12, wy + 16], [wx, wy + 16]]))
+    x += bw + gap
+  }
+  void W
+  paint(c, walls, 'mid', { name: 'Walls', line: L.arch })
+  paint(c, lit, 'win', { name: 'Lit windows' })
+  paint(c, tops, 'near', { name: 'Roof edges', line: L.arch })
+  paint(c, chims, 'side', { name: 'Chimneys', line: L.arch })
+}
+
+/** A street in one-point perspective: façades both sides running to the vanishing point, lamp posts, the road. */
+function street(c: Canvas, s: Shot, hy: number) {
+  const r = rng(s.seed ?? 5), L = LOOK[c.style], vx = (s.vp ?? 0.5) * c.w, V0: V = [vx, hy]
+  const left: V[] = [[-10, -10], lerp([-10, -10], V0, 0.78), lerp([-10, c.h + 10], V0, 0.78), [-10, c.h + 10]]
+  const right: V[] = [lerp([c.w + 10, -10], V0, 0.78), [c.w + 10, -10], [c.w + 10, c.h + 10], lerp([c.w + 10, c.h + 10], V0, 0.78)]
+  paint(c, [poly([[-10, c.h + 10], [c.w + 10, c.h + 10], lerp([c.w + 10, c.h + 10], V0, 0.78), lerp([-10, c.h + 10], V0, 0.78)])], 'near', { name: 'Road', line: L.arch })
+  paint(c, [open([[vx, c.h + 10], V0])], 'win', { name: 'Road line', stroke: true, line: 3, opacity: 0.5 })
+  paint(c, [poly(left), poly(right)], 'mid', { name: 'Façades', line: L.arch })
+  const wins: VectorPath[] = [], off: VectorPath[] = []
+  for (const q of [left, right]) for (let i = 0; i < 7; i++) for (let j = 0; j < 6; j++) {
+    const u0 = Math.pow(i / 7, 0.7), u1 = Math.pow((i + 0.55) / 7, 0.7)
+    const w = sub(q, q === left ? u0 : 1 - u1, 0.08 + j * 0.13, q === left ? u1 : 1 - u0, 0.15 + j * 0.13)
+    ;(r() < (s.lit ?? 0.5) ? wins : off).push(poly(w))
+  }
+  paint(c, off, 'winOff', { name: 'Dark windows' })
+  paint(c, wins, 'win', { name: 'Lit windows' })
+  const posts: VectorPath[] = []
+  for (let i = 0; i < 4; i++) {
+    const t = 1 - Math.pow(0.62, i + 1), b = lerp([c.w * 0.12, c.h + 4], V0, t), top = lerp([c.w * 0.12, c.h * 0.05], V0, t), wd = 6 * (1 - t) + 1
+    posts.push(poly([[b[0] - wd / 2, b[1]], [b[0] + wd / 2, b[1]], [top[0] + wd / 2, top[1]], [top[0] - wd / 2, top[1]]]))
+  }
+  paint(c, posts, 'ink', { name: 'Lamp posts' })
+}
+
+/** The radio shop: a back wall on the vanishing point, shelves of sets down the left wall, a counter, a window. */
+function shop(c: Canvas, s: Shot, hy: number) {
+  const r = rng(s.seed ?? 3), L = LOOK[c.style], vx = (s.vp ?? 0.55) * c.w
+  const bw = c.w * 0.5, bh = c.h * 0.46, bx = vx - bw / 2, by = hy - bh * 0.62
+  const back: V[] = [[bx, by], [bx + bw, by], [bx + bw, by + bh], [bx, by + bh]]
+  paint(c, [poly([[-10, -10], [c.w + 10, -10], back[1], back[0]])], 'side', { name: 'Ceiling', line: L.arch })
+  paint(c, [poly([[-10, -10], back[0], back[3], [-10, c.h + 10]])], 'mid', { name: 'Left wall', line: L.arch })
+  paint(c, [poly([[c.w + 10, -10], back[1], back[2], [c.w + 10, c.h + 10]])], 'mid', { name: 'Right wall', line: L.arch })
+  paint(c, [poly([back[3], back[2], [c.w + 10, c.h + 10], [-10, c.h + 10]])], 'near', { name: 'Floor', line: L.arch })
+  paint(c, [poly(back)], 'face', { name: 'Back wall', line: L.arch })
+  // The window in the back wall, and the city through it.
+  const win = sub(back, 0.52, 0.12, 0.92, 0.62)
+  paint(c, [poly(win)], s.lit && s.lit > 0.3 ? 'skyLow' : 'skyTop', { name: 'Window', line: L.arch || 2 })
+  const city: VectorPath[] = []
+  for (let i = 0; i < 6; i++) { const u = i / 6, hgt = 0.3 + r() * 0.5; city.push(poly(sub(win, u, 1 - hgt, u + 0.15, 1))) }
+  paint(c, city, 'far', { name: 'City outside' })
+  paint(c, [open([lerp(win[0], win[1], 0.5), lerp(win[3], win[2], 0.5)]), open([lerp(win[0], win[3], 0.5), lerp(win[1], win[2], 0.5)])], 'ink', { name: 'Window bars', stroke: true, line: 3 })
+  // Shelves down the left wall, each a line to the vanishing point, with sets on them.
+  const shelves: VectorPath[] = [], sets: VectorPath[] = [], dials: VectorPath[] = []
+  const wallTop: V = [-10, -10], wallBot: V = [-10, c.h + 10]
+  for (let i = 0; i < 4; i++) {
+    const y0 = 0.12 + i * 0.2, a = lerp(wallTop, wallBot, y0), b = lerp(back[0], back[3], y0)
+    shelves.push(poly([a, b, [b[0], b[1] + 3], [a[0], a[1] + 10]]))
+    for (let j = 0; j < 4; j++) {
+      const t0 = 0.05 + j * 0.22, t1 = t0 + 0.15, p0 = lerp(a, b, t0), p1 = lerp(a, b, t1), hgt = (1 - t0) * 44 + 12
+      sets.push(poly([[p0[0], p0[1] - hgt], [p1[0], p1[1] - hgt * 0.92], p1, p0]))
+      dials.push(oval((p0[0] + p1[0]) / 2, (p0[1] + p1[1]) / 2 - hgt * 0.5, hgt * 0.16, hgt * 0.16, 10))
+    }
+  }
+  paint(c, shelves, 'side', { name: 'Shelves', line: L.arch })
+  paint(c, sets, 'g4', { name: 'Radio sets', line: L.arch || 0 })
+  paint(c, dials, c.style === 'noir' ? 'face' : 'win', { name: 'Dials' })
+  // The counter across the foreground.
+  paint(c, [poly([[c.w * 0.38, c.h * 0.8], [c.w + 10, c.h * 0.8], [c.w + 10, c.h + 10], [c.w * 0.38, c.h + 10]])], 'side', { name: 'Counter', line: L.arch })
+  paint(c, [poly([[c.w * 0.36, c.h * 0.78], [c.w + 10, c.h * 0.78], [c.w + 10, c.h * 0.82], [c.w * 0.36, c.h * 0.82]])], 'face', { name: 'Counter top', line: L.arch })
+}
+
+/** The harbour radio tower seen from below: a lattice mast narrowing to the sky, braced in Xs, a platform on top. */
+function tower(c: Canvas, s: Shot, hy: number) {
+  const L = LOOK[c.style], vx = (s.vp ?? 0.5) * c.w
+  const topY = c.h * 0.12, botY = c.h + 20, topW = c.w * 0.07, botW = c.w * 0.5
+  const legs: VectorPath[] = [], braces: VectorPath[] = []
+  const at = (t: number): [V, V] => { const y = topY + (botY - topY) * t, half = topW + (botW - topW) * t * t; return [[vx - half, y], [vx + half, y]] }
+  const [tl, tr] = at(0), [bl, br] = at(1)
+  legs.push(open([tl, ...Array.from({ length: 8 }, (_, i) => at((i + 1) / 8)[0])]), open([tr, ...Array.from({ length: 8 }, (_, i) => at((i + 1) / 8)[1])]))
+  for (let i = 0; i < 8; i++) {
+    const [a0, b0] = at(i / 8), [a1, b1] = at((i + 1) / 8)
+    braces.push(open([a0, b1]), open([b0, a1]), open([a1, b1]))
+  }
+  void bl; void br; void hy
+  paint(c, braces, 'ink', { name: 'Braces', stroke: true, line: Math.max(2, c.w * 0.006) })
+  paint(c, legs, 'ink', { name: 'Mast', stroke: true, line: Math.max(4, c.w * 0.014) })
+  paint(c, [poly([[vx - topW * 2.4, topY - 10], [vx + topW * 2.4, topY - 10], [vx + topW * 2, topY + 6], [vx - topW * 2, topY + 6]])], 'side', { name: 'Platform', line: L.arch || 0 })
+  paint(c, [open([[vx, topY - 10], [vx, topY - c.h * 0.1]])], 'ink', { name: 'Aerial', stroke: true, line: 3 })
+}
+
+/** Focus lines: wedges converging on (cx, cy), the speed-ray ornament. */
+export function focusLines(c: Canvas, cx: number, cy: number, o: { role?: string; n?: number; inner?: number; seed?: number; name?: string; opacity?: number } = {}) {
+  const r = rng(o.seed ?? 3), n = o.n ?? 44, R = Math.hypot(c.w, c.h) * 1.2, paths: VectorPath[] = []
+  for (let i = 0; i < n; i++) {
+    const a = ((i + r() * 0.7) * Math.PI * 2) / n, half = (Math.PI / n) * (0.12 + r() * 0.3), r0 = (o.inner ?? Math.min(c.w, c.h) * 0.22) * (0.75 + r() * 0.6)
+    paths.push(poly([[cx + r0 * Math.cos(a), cy + r0 * Math.sin(a)], [cx + R * Math.cos(a - half), cy + R * Math.sin(a - half)], [cx + R * Math.cos(a + half), cy + R * Math.sin(a + half)]]))
+  }
+  paint(c, paths, o.role ?? 'ink', { name: o.name ?? 'Speed rays', ...(o.opacity !== undefined ? { opacity: o.opacity } : {}) })
+}
+
+/** Speed lines: tapered streaks running behind a moving figure (`dir` 1: it moves right, so they trail left). */
+export function speedLines(c: Canvas, o: { role?: string; n?: number; seed?: number; dir?: 1 | -1; y0?: number; y1?: number; opacity?: number } = {}) {
+  const r = rng(o.seed ?? 5), n = o.n ?? 22, paths: VectorPath[] = [], y0 = o.y0 ?? 0, y1 = o.y1 ?? c.h
+  for (let i = 0; i < n; i++) {
+    const y = y0 + ((i + r()) * (y1 - y0)) / n, len = c.w * (0.25 + r() * 0.5), t = 1 + r() * 3.5
+    const x0 = (o.dir ?? 1) === 1 ? -10 + r() * c.w * 0.2 : c.w + 10 - r() * c.w * 0.2
+    const x1 = x0 + ((o.dir ?? 1) === 1 ? len : -len)
+    paths.push(poly([[x0, y - t], [x1, y], [x0, y + t]]))
+  }
+  paint(c, paths, o.role ?? 'ink', { name: 'Motion lines', ...(o.opacity !== undefined ? { opacity: o.opacity } : {}) })
+}
+
+/** A Ben-Day screen over the panel: the HALFTONE effect on a tint of `role`. */
+export function tone(c: Canvas, tint = 'ink', o: { opacity?: number; dot?: number } = {}) {
+  const fx: Effect[] = [{ id: 'e1', type: 'HALFTONE', angle: 45, dotSize: o.dot ?? 9, contrast: 0.5, colorMode: 'SOURCE', shape: 'CIRCLE', layout: 'UNIFORM', toneSource: 'LINEAR_GRADIENT', gradientAngle: 90, center: { x: 0.5, y: 0.5 }, visible: true } as Effect]
+  const id = c.k.rect(c.parent, c.w, c.h, role(c.style, tint), { name: 'Ben-Day screen', effects: fx, opacity: o.opacity ?? 0.5 })
+  c.k.patch(id, { blendMode: 'MULTIPLY' })
+}
+
+/**
+ * Draw a shot into a panel: the place (sky, horizon, buildings in perspective), its light, then the cast standing
+ * on the ground, each with a cast shadow away from the light and a rim on the side facing it.
+ */
+export function drawShot(c: Canvas, s: Shot) {
+  const W = s.world?.w ?? c.w, ox = s.world?.at ?? 0
+  const hy = (s.horizon ?? 0.6) * c.h
+  const light = s.light ?? { kind: 'moon' as LightKind, x: 0.8, y: 0.18 }
+  const lx = light.x * W - ox, ly = light.y * c.h, lr = light.r ?? Math.min(c.w, c.h) * 0.07
+  const wd = s.world
+  switch (s.env) {
+    case 'skyline':
+      sky(c, c.h, wd); if (s.stars !== false) stars(c, hy, s.seed ?? 1, 40, wd)
+      lightSource(c, light.kind === 'moon' ? 'moon' : 'none', lx, ly, lr)
+      skyline(c, s, hy, ox, W)
+      roofSlab(c, hy + (c.h - hy) * 0.45, s, ox)
+      break
+    case 'rooftops':
+      sky(c, c.h, wd); if (s.stars !== false) stars(c, hy, s.seed ?? 2, 40, wd)
+      lightSource(c, light.kind === 'moon' ? 'moon' : 'none', lx, ly, lr)
+      skyline(c, { ...s, lit: (s.lit ?? 0.1) * 0.6 }, hy, ox * 0.4, W)
+      rooftops(c, s, hy, ox, W)
+      break
+    case 'street':
+      sky(c, c.h); street(c, s, hy); break
+    case 'shop':
+      c.k.rect(c.parent, c.w, c.h, role(c.style, 'near'), { name: 'Room' }); shop(c, s, hy)
+      if (light.kind === 'bulb' || light.kind === 'lantern') lightSource(c, light.kind, lx, ly, lr)
+      break
+    case 'tower':
+      sky(c, c.h); stars(c, c.h * 0.9, s.seed ?? 4, 70)
+      if (light.kind === 'moon') lightSource(c, 'moon', lx, ly, lr)
+      if (light.kind === 'lantern' && c.style !== 'clair') c.k.rect(c.parent, c.w, c.h, [c.k.gradient({ from: role(c.style, 'glow'), to: role(c.style, 'glow'), kind: 'RADIAL', fromOpacity: 0.55, toOpacity: 0, handles: [{ x: lx / c.w, y: ly / c.h }, { x: (lx + lr * 9) / c.w, y: ly / c.h }, { x: lx / c.w, y: (ly + lr * 9) / c.h }] })], { name: 'Lantern glow' })
+      tower(c, s, hy)
+      break
+    case 'night-sky':
+      sky(c, c.h, wd)
+      if (s.milky) milkyWay(c, s.seed ?? 9, wd)
+      stars(c, c.h, s.seed ?? 9, 140, wd)
+      lightSource(c, light.kind === 'moon' ? 'moon' : 'none', lx, ly, lr)
+      break
+    case 'focus':
+      c.k.rect(c.parent, c.w, c.h, role(c.style, 'g2'), { name: 'Flash' })
+      break
+    case 'speed':
+    case 'plain':
+      break
+  }
+  if (s.platform !== undefined) {
+    const py = s.platform * c.h, W2 = s.world?.w ?? c.w, ox2 = s.world?.at ?? 0
+    paint(c, [poly([[-ox2 - 10, py], [W2 - ox2 + 10, py], [W2 - ox2 + 10, c.h + 10], [-ox2 - 10, c.h + 10]])], 'near', { name: 'Platform deck', line: LOOK[c.style].arch })
+    const rails: VectorPath[] = []
+    for (let x = -ox2; x < W2 - ox2; x += 46) rails.push(poly([[x, py - c.h * 0.06], [x + 4, py - c.h * 0.06], [x + 4, py], [x, py]]))
+    rails.push(poly([[-ox2 - 10, py - c.h * 0.065], [W2 - ox2 + 10, py - c.h * 0.065], [W2 - ox2 + 10, py - c.h * 0.055], [-ox2 - 10, py - c.h * 0.055]]))
+    paint(c, rails, 'side', { name: 'Platform rail' })
+  }
+  if (s.tone) tone(c, 'ink', { opacity: c.style === 'riso' ? 0.35 : 0.4 })
+  if (s.lines === 'focus') focusLines(c, (s.focus?.[0] ?? 0.5) * c.w, (s.focus?.[1] ?? 0.45) * c.h, { role: s.env === 'focus' ? 'ink' : 'rim', opacity: s.env === 'focus' ? 1 : 0.55, seed: s.seed })
+  if (s.lines === 'speed') speedLines(c, { role: 'rim', opacity: 0.7, seed: s.seed, dir: (s.cast?.[0]?.face ?? 1) as 1 | -1 })
+  for (const a of s.cast ?? []) actor(c, a, { lx, ly, ox, W, hy, glowLight: light.kind === 'lantern' || light.kind === 'bulb' })
+  if (light.kind === 'lantern' && s.env !== 'shop') lantern(c, lx, ly, lr)
+}
+
+// ─── The cast ─────────────────────────────────────────────────────────────────────────────────────────────────────
+
+export type Who = 'ada' | 'teo' | 'lamp' | 'young'
+export type PoseName = 'stand' | 'walk' | 'run' | 'leap' | 'point' | 'crouch' | 'reach' | 'look-up' | 'sit' | 'hold-lantern' | 'land' | 'fall'
+
+export interface Actor {
+  who: Who
+  pose: PoseName | 'bust'
+  /** Feet (or, for a bust, the chin) at this share of the width, of the world in a polyptych. */
+  x: number
+  /** Height of the figure (head to foot) as a share of the panel height; for a bust, the head's height. */
+  size: number
+  /** The ground line as a share of the panel height (default: just below the horizon's roof line). */
+  ground?: number
+  face?: 1 | -1
+  /** The bust's chin height as a share of the panel. */
+  y?: number
+}
+
+/** Segment angles in degrees from straight down; positive swings toward the way the figure faces. */
+interface Pose { lean: number; head: number; thighF: number; shinF: number; thighB: number; shinB: number; armF: number; foreF: number; armB: number; foreB: number; flow: number }
+const POSES: Record<PoseName, Pose> = {
+  stand: { lean: 2, head: 0, thighF: 5, shinF: 2, thighB: -5, shinB: -3, armF: 10, foreF: 18, armB: -8, foreB: -4, flow: 0.05 },
+  walk: { lean: 6, head: 0, thighF: 26, shinF: 6, thighB: -22, shinB: -36, armF: -18, foreF: -6, armB: 24, foreB: 50, flow: 0.25 },
+  run: { lean: 22, head: -8, thighF: 62, shinF: -4, thighB: -34, shinB: -100, armF: 55, foreF: 120, armB: -50, foreB: 10, flow: 0.8 },
+  leap: { lean: 32, head: -12, thighF: 88, shinF: 24, thighB: -40, shinB: -78, armF: 150, foreF: 150, armB: -80, foreB: -40, flow: 1 },
+  point: { lean: 0, head: 0, thighF: 8, shinF: 2, thighB: -8, shinB: -4, armF: 92, foreF: 94, armB: -6, foreB: -2, flow: 0.08 },
+  crouch: { lean: 34, head: -14, thighF: 96, shinF: -8, thighB: 58, shinB: -30, armF: 60, foreF: 20, armB: 30, foreB: 70, flow: 0.15 },
+  reach: { lean: 8, head: -22, thighF: 14, shinF: 4, thighB: -10, shinB: -8, armF: 165, foreF: 172, armB: 20, foreB: 40, flow: 0.12 },
+  'look-up': { lean: -4, head: -30, thighF: 4, shinF: 2, thighB: -4, shinB: -2, armF: 4, foreF: 8, armB: -4, foreB: -2, flow: 0.05 },
+  sit: { lean: 10, head: 6, thighF: 86, shinF: 6, thighB: 80, shinB: -2, armF: 40, foreF: 82, armB: 30, foreB: 76, flow: 0 },
+  'hold-lantern': { lean: 10, head: 6, thighF: 6, shinF: 2, thighB: -6, shinB: -4, armF: 46, foreF: 96, armB: -6, foreB: 4, flow: 0.12 },
+  land: { lean: 26, head: 10, thighF: 80, shinF: -14, thighB: -10, shinB: -60, armF: 70, foreF: 40, armB: -90, foreB: -70, flow: 0.6 },
+  fall: { lean: -30, head: -20, thighF: 50, shinF: 70, thighB: -10, shinB: 30, armF: 160, foreF: 130, armB: -150, foreB: -120, flow: 0.9 },
+}
+
+/** Proportions in head-heights: the cast's silhouettes stay theirs in every pose. */
+const BUILD: Record<Who, { heads: number; torso: number; thigh: number; shin: number; upper: number; fore: number; shoulder: number; hip: number; limb: number }> = {
+  ada: { heads: 7.5, torso: 2.6, thigh: 1.85, shin: 1.85, upper: 1.35, fore: 1.25, shoulder: 0.82, hip: 0.72, limb: 0.27 },
+  teo: { heads: 5.5, torso: 1.85, thigh: 1.2, shin: 1.2, upper: 0.95, fore: 0.9, shoulder: 0.78, hip: 0.68, limb: 0.3 },
+  young: { heads: 5.2, torso: 1.75, thigh: 1.15, shin: 1.15, upper: 0.9, fore: 0.85, shoulder: 0.74, hip: 0.66, limb: 0.29 },
+  lamp: { heads: 8, torso: 2.85, thigh: 2.0, shin: 2.0, upper: 1.5, fore: 1.4, shoulder: 0.95, hip: 0.8, limb: 0.27 },
+}
+const COAT: Record<Who, string> = { ada: 'adaCoat', teo: 'teoHood', lamp: 'lampCoat', young: 'adaCoat' }
+
+const rad = (d: number) => (d * Math.PI) / 180
+
+/** A limb through `pts` (shoulder, elbow, hand), `ws` its half-widths there: one outline with round ends. */
+function limb(pts: V[], ws: number[]): VectorPath[] {
+  const n = pts.length, nrm: V[] = []
+  for (let i = 0; i < n; i++) {
+    const a = pts[Math.max(0, i - 1)], b = pts[Math.min(n - 1, i + 1)], dx = b[0] - a[0], dy = b[1] - a[1], len = Math.hypot(dx, dy) || 1
+    nrm.push([-dy / len, dx / len])
+  }
+  const left = pts.map((p, i): V => [p[0] + nrm[i][0] * ws[i], p[1] + nrm[i][1] * ws[i]])
+  const right = pts.map((p, i): V => [p[0] - nrm[i][0] * ws[i], p[1] - nrm[i][1] * ws[i]])
+  const cap = (p: V, nv: V, w: number, sign: number): V[] => {
+    // From the left side round the end to the right side, bulging along the limb's direction.
+    const dir: V = [nv[1] * sign, -nv[0] * sign]
+    return [1, 2, 3].map(k => { const a = (k * Math.PI) / 4; return [p[0] + (nv[0] * Math.cos(a) + dir[0] * Math.sin(a)) * w, p[1] + (nv[1] * Math.cos(a) + dir[1] * Math.sin(a)) * w] as V })
+  }
+  const end = cap(pts[n - 1], nrm[n - 1], ws[n - 1], -1)
+  const start = cap(pts[0], [-nrm[0][0], -nrm[0][1]], ws[0], -1)
+  return [smooth([...left, ...end, ...[...right].reverse(), ...start])]
+}
+
+interface Part { role: string; paths: VectorPath[]; name: string; line?: boolean }
+
+/** The figure as parts in head units, feet on y = 0, facing +x. */
+function figureParts(who: Who, poseName: PoseName): Part[] {
+  const b = BUILD[who], p = POSES[poseName]
+  const d = (deg: number): V => [Math.sin(rad(deg)), Math.cos(rad(deg))]
+  const at = (o: V, deg: number, len: number): V => { const v = d(deg); return [o[0] + v[0] * len, o[1] + v[1] * len] }
+  const P0: V = [0, 0]
+  const neck = at(P0, 180 - p.lean, b.torso)
+  const shoulder = at(neck, -p.lean, 0.28)
+  const head: V = at(neck, 180 - p.lean - p.head * 0.6, 0.6)
+  const kneeF = at(P0, p.thighF, b.thigh), footF = at(kneeF, p.shinF, b.shin)
+  const kneeB = at(P0, p.thighB, b.thigh), footB = at(kneeB, p.shinB, b.shin)
+  const elbF = at(shoulder, p.armF, b.upper), handF = at(elbF, p.foreF, b.fore)
+  const elbB = at(shoulder, p.armB, b.upper), handB = at(elbB, p.foreB, b.fore)
+  const w = b.limb
+  const foot = (f: V, k: V): VectorPath => { const sole = Math.max(f[1], k[1] + 0.2); void sole; return smooth([[f[0] - w * 0.6, f[1] - w * 0.7], [f[0] + w * 2.2, f[1] - w * 0.4], [f[0] + w * 2.4, f[1] + w * 0.5], [f[0] - w * 0.8, f[1] + w * 0.5]], [2, 3]) }
+  const parts: Part[] = []
+  parts.push({ role: who === 'lamp' ? 'lampCoat' : 'legs', name: 'Back leg', paths: limb([P0, kneeB, footB], [w * 1.25, w, w * 0.8]), line: true })
+  parts.push({ role: 'ink', name: 'Back foot', paths: [foot(footB, kneeB)] })
+  parts.push({ role: COAT[who], name: 'Back arm', paths: limb([shoulder, elbB, handB], [w * 0.95, w * 0.85, w * 0.7]), line: true })
+  parts.push({ role: 'skin', name: 'Back hand', paths: [oval(handB[0], handB[1], w * 0.75, w * 0.75, 8)], line: true })
+  // Torso: shoulders to hips along the lean, with a chest.
+  const ax = d(180 - p.lean), nrm: V = [ax[1], -ax[0]]
+  const sh = b.shoulder / 2, hp = b.hip / 2
+  const torso: V[] = [[shoulder[0] - nrm[0] * sh, shoulder[1] - nrm[1] * sh], [shoulder[0] + nrm[0] * sh * 1.05, shoulder[1] + nrm[1] * sh * 1.05], [P0[0] + nrm[0] * hp, P0[1] + nrm[1] * hp + 0.1], [P0[0] - nrm[0] * hp, P0[1] - nrm[1] * hp + 0.1]]
+  parts.push({ role: 'legs', name: 'Front leg', paths: limb([P0, kneeF, footF], [w * 1.25, w, w * 0.8]), line: true })
+  parts.push({ role: 'ink', name: 'Front foot', paths: [foot(footF, kneeF)] })
+  if (who === 'teo') parts.push({ role: 'ink', name: 'High-top laces', paths: [oval(footF[0] + w * 0.5, footF[1] - w * 0.4, w * 0.3, w * 0.3, 6)] })
+  parts.push({ role: COAT[who], name: who === 'teo' ? 'Hoodie' : 'Coat body', paths: [smooth(torso, [0, 1])], line: true })
+  // Coats run to the knee and trail behind as the figure moves; Teo's hoodie stops at the hip, baggy.
+  if (who !== 'teo' && who !== 'young') {
+    const hemY = Math.max(kneeF[1], kneeB[1]) - 0.15, flow = p.flow
+    parts.push({ role: COAT[who], name: 'Coat skirt', line: true, paths: [smooth([[P0[0] - hp * 1.1, P0[1] - 0.25], [P0[0] + hp * 1.2, P0[1] - 0.25], [kneeF[0] * 0.7 + 0.3, hemY + 0.2], [-0.4 - flow * 1.4, hemY - flow * 0.7], [-0.55 - flow * 1.1, hemY + 0.1 - flow * 0.3]], [1, 2, 3])] })
+  } else {
+    parts.push({ role: COAT[who], name: 'Hoodie hem', line: true, paths: [smooth([[P0[0] - hp * 1.25, P0[1] - 0.4], [P0[0] + hp * 1.3, P0[1] - 0.4], [P0[0] + hp * 1.3, P0[1] + 0.35], [P0[0] - hp * 1.25, P0[1] + 0.35]], [0, 1, 2, 3])] })
+  }
+  if (who === 'ada') parts.push({ role: 'ink', name: 'Tool bag', paths: [poly([[P0[0] - hp - 0.35, P0[1] - 0.55], [P0[0] - hp + 0.25, P0[1] - 0.55], [P0[0] - hp + 0.2, P0[1] + 0.05], [P0[0] - hp - 0.3, P0[1] + 0.05]]), open([[shoulder[0] + nrm[0] * sh, shoulder[1]], [P0[0] - hp - 0.05, P0[1] - 0.55]])] })
+  // Head and what the head wears.
+  parts.push({ role: 'skin', name: 'Head', line: true, paths: [smooth([[head[0] - 0.36, head[1] - 0.1], [head[0], head[1] - 0.52], [head[0] + 0.36, head[1] - 0.12], [head[0] + 0.44, head[1] + 0.1], [head[0] + 0.3, head[1] + 0.44], [head[0] - 0.1, head[1] + 0.5], [head[0] - 0.34, head[1] + 0.2]], [3])] })
+  if (who === 'ada' || who === 'young') {
+    parts.push({ role: 'adaHair', name: 'Bob', paths: [smooth([[head[0] + 0.3, head[1] - 0.22], [head[0], head[1] - 0.58], [head[0] - 0.42, head[1] - 0.3], [head[0] - 0.5, head[1] + 0.2], [head[0] - 0.38, head[1] + 0.46], [head[0] - 0.08, head[1] + 0.28], [head[0] + 0.1, head[1] - 0.1]], [5])], line: true })
+    parts.push({ role: 'ink', name: 'Headphones', paths: [oval(head[0] - 0.1, head[1] + 0.68, 0.17, 0.13, 8)] })
+  } else if (who === 'teo') {
+    parts.push({ role: 'teoCap', name: 'Cap', line: true, paths: [smooth([[head[0] - 0.42, head[1] - 0.08], [head[0] - 0.2, head[1] - 0.56], [head[0] + 0.3, head[1] - 0.48], [head[0] + 0.42, head[1] - 0.18], [head[0] + 0.92, head[1] - 0.08], [head[0] + 0.86, head[1] + 0.02], [head[0] - 0.42, head[1] + 0.02]], [3, 4, 5, 6])] })
+    parts.push({ role: COAT.teo, name: 'Hood', line: true, paths: [smooth([[neck[0] - 0.5, neck[1] + 0.05], [neck[0] - 0.42, neck[1] - 0.28], [neck[0] + 0.2, neck[1] - 0.05], [neck[0] + 0.1, neck[1] + 0.2]])] })
+  } else {
+    parts.push({ role: 'lampHat', name: 'Hat brim', line: true, paths: [smooth([[head[0] - 0.85, head[1] - 0.22], [head[0], head[1] - 0.36], [head[0] + 0.95, head[1] - 0.18], [head[0] + 0.9, head[1] - 0.08], [head[0], head[1] - 0.2], [head[0] - 0.85, head[1] - 0.1]], [0, 2, 3, 5])] })
+    parts.push({ role: 'lampHat', name: 'Hat crown', line: true, paths: [poly([[head[0] - 0.42, head[1] - 0.28], [head[0] - 0.34, head[1] - 0.86], [head[0] + 0.38, head[1] - 0.86], [head[0] + 0.46, head[1] - 0.28]])] })
+    parts.push({ role: 'adaCoat', name: 'Scarf', line: true, paths: [smooth([[neck[0] - 0.4, neck[1] - 0.1], [neck[0] + 0.4, neck[1] - 0.1], [neck[0] + 0.32, neck[1] + 0.18], [neck[0] - 0.3, neck[1] + 0.2]], [0, 1]), poly([[neck[0] - 0.36, neck[1]], [neck[0] - 0.65 - p.flow, neck[1] + 0.9], [neck[0] - 0.4 - p.flow, neck[1] + 0.95], [neck[0] - 0.16, neck[1] + 0.1]])] })
+  }
+  parts.push({ role: COAT[who], name: 'Front arm', paths: limb([shoulder, elbF, handF], [w * 0.95, w * 0.85, w * 0.7]), line: true })
+  parts.push({ role: 'skin', name: 'Front hand', paths: [oval(handF[0], handF[1], w * 0.75, w * 0.75, 8)], line: true })
+  // Where the lantern hangs, for the caller.
+  ;(parts as Part[] & { hand?: V }).hand = handF
+  return parts
+}
+
+function mapPath(p: VectorPath, f: (v: V) => V): VectorPath {
+  const m = (q: { x: number; y: number }) => { const [x, y] = f([q.x, q.y]); return { x, y } }
+  return { ...p, points: p.points.map(q => ({ ...m(q), ...(q.handleIn ? { handleIn: m(q.handleIn) } : {}), ...(q.handleOut ? { handleOut: m(q.handleOut) } : {}) })) }
+}
+
+/** Draw `a` into the panel: shadow on the ground, rim, then the figure in the style's line. */
+function actor(c: Canvas, a: Actor, env: { lx: number; ly: number; ox: number; W: number; hy: number; glowLight: boolean }) {
+  if (a.pose === 'bust') return bust(c, a, env)
+  const parts = figureParts(a.who, a.pose)
+  const hand = (parts as Part[] & { hand?: V }).hand!
+  const b = BUILD[a.who], face = a.face ?? 1
+  // Feet on the ground: the lowest point of the figure sits on it.
+  let minY = 0, maxY = -Infinity
+  for (const part of parts) for (const p of part.paths) for (const q of p.points) { minY = Math.min(minY, q.y); maxY = Math.max(maxY, q.y) }
+  const unitPx = (a.size * c.h) / b.heads
+  const gy = (a.ground ?? 0.92) * c.h
+  const X = a.x * env.W - env.ox
+  const tf = (v: V): V => [X + v[0] * unitPx * face, gy + (v[1] - maxY) * unitPx]
+  const L = LOOK[c.style]
+  const all = parts.flatMap(p => p.paths.map(q => mapPath(q, tf)))
+  // The cast shadow falls away from the light, flattened on the ground.
+  const away = env.lx < X ? 1 : -1
+  const shadow = all.map(p => mapPath(p, ([x, y]) => [x + (gy - y) * 0.9 * away, gy + (gy - y) * 0.16]))
+  paint(c, shadow, 'shadow', { name: `${NAME[a.who]} shadow`, opacity: c.style === 'noir' ? 0.85 : 0.45 })
+  // Rim: the silhouette, nudged toward the light, under the figure.
+  if (L.rim > 0) {
+    const toward = env.lx > X ? 1 : -1, d = Math.max(1.6, L.rim * Math.min(1.6, unitPx / 30))
+    paint(c, all.map(p => mapPath(p, ([x, y]) => [x + toward * d, y - d * 0.6])), 'rim', { name: `${NAME[a.who]} rim light` })
+  }
+  for (const part of parts) {
+    const role = c.style === 'noir' ? 'ink' : part.role
+    paint(c, part.paths.map(q => mapPath(q, tf)), role, { name: `${NAME[a.who]} ${part.name.toLowerCase()}`, ...(part.line && L.fig > 0 ? { line: L.fig } : {}) })
+  }
+  if (a.who === 'lamp' && a.pose === 'hold-lantern') {
+    const [hx, hy2] = tf(hand)
+    lantern(c, hx, hy2 + unitPx * 0.55, unitPx * 0.45)
+  }
+}
+
+const NAME: Record<Who, string> = { ada: 'Ada', teo: 'Teo', lamp: 'Lamplighter', young: 'Young Ada' }
+
+/**
+ * The profile bust every closeup uses: crown to chin `size` of the panel height, the chin at (x, y), facing `face`.
+ * Lit from the side the light is on: a rim along that edge, a cel shadow across the jaw on the other.
+ */
+function bust(c: Canvas, a: Actor, env: { lx: number; ly: number }) {
+  const H = a.size * c.h, face = a.face ?? 1, cx = a.x * c.w, chin = (a.y ?? 0.75) * c.h
+  const tf = (v: V): V => [cx + v[0] * H * face, chin + (v[1] - 1) * H]
+  const L = LOOK[c.style]
+  const profile: V[] = [[-0.36, 1.45], [-0.3, 0.92], [-0.5, 0.5], [-0.34, 0.05], [0, -0.04], [0.3, 0.12], [0.37, 0.34], [0.33, 0.42], [0.37, 0.46], [0.48, 0.61], [0.37, 0.66], [0.39, 0.72], [0.35, 0.76], [0.38, 0.8], [0.32, 0.93], [0.18, 1.0], [0.08, 0.98], [0.12, 1.12], [0.14, 1.45]]
+  const shoulders: V[] = [[-1.1, 2.2], [-0.9, 1.5], [-0.3, 1.32], [0.2, 1.34], [0.75, 1.55], [0.95, 2.2]]
+  const headPath = smooth(profile, [0, 9, 18])
+  const body = smooth(shoulders, [0, 5])
+  const coat = c.style === 'noir' ? 'ink' : COAT[a.who], skin = c.style === 'noir' ? 'ink' : 'skin'
+  const toward = env.lx > cx ? 1 : -1
+  if (L.rim > 0) {
+    const d = Math.max(2.5, H * 0.012)
+    paint(c, [mapPath(body, tf), mapPath(headPath, tf)].map(p => mapPath(p, ([x, y]) => [x + toward * d, y - d * 0.5])), 'rim', { name: `${NAME[a.who]} rim light` })
+  }
+  paint(c, [mapPath(body, tf)], coat, { name: `${NAME[a.who]} shoulders`, ...(L.fig ? { line: L.fig * 1.4 } : {}) })
+  paint(c, [mapPath(headPath, tf)], skin, { name: `${NAME[a.who]} profile`, ...(L.fig ? { line: L.fig * 1.4 } : {}) })
+  if (L.cel) paint(c, [mapPath(smooth([[-0.32, 0.88], [0.1, 1.0], [0.12, 1.2], [-0.34, 1.26]], [0, 1]), tf)], 'shadow', { name: `${NAME[a.who]} cel shadow`, opacity: 0.22 })
+  if (c.style !== 'noir') {
+    paint(c, [mapPath(smooth([[0.16, 0.42], [0.24, 0.4], [0.27, 0.44], [0.2, 0.46]], [0, 2]), tf)], 'ink', { name: `${NAME[a.who]} eye` })
+    paint(c, [mapPath(open([[0.1, 0.35], [0.28, 0.33]]), tf), mapPath(open([[0.27, 0.77], [0.36, 0.76]]), tf)], 'ink', { name: `${NAME[a.who]} brow and mouth`, stroke: true, line: Math.max(1.5, H * 0.012) })
+  } else {
+    // Noir closeups cut the eye out of the black as a white sliver.
+    paint(c, [mapPath(smooth([[0.16, 0.42], [0.27, 0.41], [0.2, 0.45]], [0, 1]), tf)], 'rim', { name: `${NAME[a.who]} eye glint` })
+  }
+  const line = L.fig ? { line: L.fig * 1.4 } : {}
+  if (a.who === 'ada' || a.who === 'young') {
+    paint(c, [mapPath(smooth([[0.3, 0.1], [0.05, -0.1], [-0.42, -0.02], [-0.6, 0.4], [-0.56, 0.86], [-0.28, 0.88], [-0.26, 0.58], [-0.02, 0.3], [0.2, 0.28], [0.36, 0.22]], [4, 5, 9]), tf)], c.style === 'noir' ? 'ink' : 'adaHair', { name: 'Ada bob', ...line })
+    paint(c, [mapPath(open([[-0.3, 1.2], [-0.05, 1.34], [0.2, 1.24]]), tf)], 'ink', { name: 'Headphone band', stroke: true, line: Math.max(2.5, H * 0.03) })
+    paint(c, [mapPath(oval(-0.3, 1.2, 0.09, 0.12, 10), tf), mapPath(oval(0.2, 1.24, 0.07, 0.1, 10), tf)], c.style === 'noir' ? 'rim' : 'ink', { name: 'Headphone cups' })
+  } else if (a.who === 'teo') {
+    paint(c, [mapPath(smooth([[-0.5, 0.36], [-0.4, -0.06], [0.1, -0.1], [0.36, 0.14], [0.86, 0.3], [0.84, 0.38], [0.3, 0.32], [-0.5, 0.42]], [3, 4, 5, 6, 7]), tf)], c.style === 'noir' ? 'ink' : 'teoCap', { name: 'Teo cap', ...line })
+    paint(c, [mapPath(smooth([[-0.95, 1.6], [-0.75, 1.15], [-0.32, 1.12], [-0.2, 1.4]]), tf)], coat, { name: 'Teo hood', ...line })
+  } else {
+    paint(c, [mapPath(smooth([[-0.95, 0.2], [0, 0.04], [1.0, 0.26], [0.96, 0.34], [0, 0.18], [-0.95, 0.3]], [0, 2, 3, 5]), tf), mapPath(poly([[-0.42, 0.14], [-0.34, -0.42], [0.36, -0.42], [0.44, 0.14]]), tf)], c.style === 'noir' ? 'ink' : 'lampHat', { name: 'Lamplighter hat', ...line })
+    paint(c, [mapPath(smooth([[-0.5, 1.1], [0.3, 1.12], [0.4, 1.38], [-0.45, 1.45]], [0, 1]), tf)], c.style === 'noir' ? 'ink' : 'adaCoat', { name: 'Lamplighter scarf', ...line })
+    paint(c, [mapPath(open([[0.0, 0.96], [0.12, 0.99], [0.3, 0.93]]), tf)], c.style === 'noir' ? 'rim' : 'ink', { name: 'Lamplighter stubble', stroke: true, line: Math.max(1.5, H * 0.01) })
+  }
+}