bluebey-studio: /bluebey-studio/ をテスト公開用にBasic認証つきで復帰

準拠版アプリを public/bluebey-studio/ に戻し、.htaccess でBasic認証（ユーザー bluebey）を設定。/bluebey-studio/ のみ保護し他は素通し。本公開は市の確認後に認証を外す想定。

1 files changed, 1283 insertions, 0 deletions

diff --git a/public/bluebey-studio/src/faceArt.js b/public/bluebey-studio/src/faceArt.js
new file mode 100644
index 0000000..4aaa2d6
--- /dev/null
+++ b/public/bluebey-studio/src/faceArt.js
@@ -0,0 +1,1283 @@
+/**
+ * The face artwork: everything that used to be a hand-drawn PNG in GIMP is now
+ * drawn from parameters onto a canvas, which is then used as the texture of the
+ * two overlay planes that already exist on the model.
+ *
+ * The plates have a linear UV mapping fitted to the original artwork, so drawing
+ * in "texture pixels" lands exactly where the original artwork did. Every constant
+ * below was measured from the original textures (see README for the numbers), so
+ * the defaults reproduce the 2022 artwork while every part of it stays editable.
+ *
+ * Texture space: the artwork WINDOW, 1024 x 380, origin at the top-left, y grows
+ * downwards. `canvasLayout` then says where that window sits on the bigger canvas
+ * a face plate actually needs (see below), and `Face` hands the bounds back as
+ * `limits`, so the drawing can clamp against the real edge instead of assuming
+ * the window is all there is.
+ *
+ * glTF stores v downwards too, and the textures are uploaded with flipY = false,
+ * so no flipping is needed anywhere.
+ */
+
+const TAU = Math.PI * 2;
+const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
+const HUGE = 4000;
+
+/**
+ * The artwork window: the rectangle the 2022 hand-drawn textures occupied. Every
+ * constant below is written in this space.
+ */
+export const ART_WINDOW = { width: 1024, height: 380 };
+
+/** Keep this much clear at the canvas border, so filtering has room to breathe. */
+const EDGE_MARGIN = 8;
+
+/** What a drawing falls back to when no plate bounds are supplied. */
+const WINDOW_LIMITS = {
+  top: 0, bottom: ART_WINDOW.height, left: 0, right: ART_WINDOW.width,
+};
+
+/**
+ * The canvas a face plate's drawing needs, and where the artwork window sits on it.
+ *
+ * WHY: the plates are the *whole* front half of the body, so their UVs run far
+ * outside the 0..1 the artwork was drawn in (measured on the shipped model: the
+ * eye plate covers v -1.02..1.93, and 9 of 10 of its vertices sit within a
+ * twentieth of the border). Everything outside 0..1 used to clamp to the canvas
+ * edge row, so the moment a drawing reached the border - a tear dropped low, a
+ * brow lifted, a thick mouth pushed down - that edge row was copied across the
+ * rest of the plate and the mark stretched into a long smear.
+ *
+ * `Face` rewrites each plate's UVs so this range maps onto 0..1 instead, which
+ * removes the clamp altogether. The map is affine, so the artwork keeps its exact
+ * pixel size and position and merely shifts by `offset`; the canvas grows by the
+ * same factor, and those extra rows are the room a moved tear, brow or mouth
+ * needs (`limits` says where the real edge now is, in window coordinates).
+ *
+ * @param {{u0:number,u1:number,v0:number,v1:number}} range the plate's UV range
+ * @param {{width:number,height:number}} [window] the artwork window
+ */
+export function canvasLayout(range, window = ART_WINDOW) {
+  const u0 = Number.isFinite(range?.u0) ? range.u0 : 0;
+  const u1 = Number.isFinite(range?.u1) ? range.u1 : 1;
+  const v0 = Number.isFinite(range?.v0) ? range.v0 : 0;
+  const v1 = Number.isFinite(range?.v1) ? range.v1 : 1;
+  const du = Math.max(1e-6, u1 - u0);
+  const dv = Math.max(1e-6, v1 - v0);
+  const width = Math.max(1, Math.round(window.width * du));
+  const height = Math.max(1, Math.round(window.height * dv));
+  // `+ 0` turns a `-0` into a plain `0`, so the offsets compare cleanly.
+  const offsetX = Math.round(-u0 * window.width) + 0;
+  const offsetY = Math.round(-v0 * window.height) + 0;
+  return {
+    width,
+    height,
+    offsetX,
+    offsetY,
+    window,
+    // The canvas edges in the artwork's own coordinates. `top` is negative when
+    // the plate reaches above the window: that is the extra room.
+    limits: {
+      top: -offsetY + 0,
+      bottom: height - offsetY,
+      left: -offsetX + 0,
+      right: width - offsetX,
+    },
+  };
+}
+
+/** Fixed layout of the eye plane, measured from the original `eyes-open.png`. */
+export const EYE_LAYOUT = {
+  radius: 84,
+  irisRadius: 62.5,
+  highlightRadius: 28,
+  highlightOffset: { x: 29.5, y: -18 },
+  // The model's left eye (its own left, +x) sits in the u > 0.5 half.
+  eyes: [
+    { key: 'right', cx: 267.5, cy: 240, towardNose: 1 },
+    { key: 'left', cx: 755.5, cy: 240, towardNose: -1 },
+  ],
+  lidRadiusFactor: 1.35,
+  lidStroke: 14,
+  // A teardrop hangs well below the eye. The plate keeps the whole canvas, so
+  // the drop can sit low without being clipped (measured with a ruler grid).
+  tear: { size: 34, offsetX: 66, offsetY: 88 },
+  closedLine: {
+    // The single shut line is the *long* form of the eyelid, the same reach as
+    // the arms of the "ぎゅっ" below, so switching between 1 and 3 lines does not
+    // change how wide the eye reads.
+    length: 205,
+    offsetX: 6,
+    offsetY: -10,
+    slantDeg: 3.9,
+    bow: 3,
+    // 2- and 3-line shut eyes, copied from the original `eyes-close-tight`
+    // artwork: three strokes sharing one vertex that points at the nose, opening
+    // to a wide bird's foot / arrow shape. `spread` is half the height the arms
+    // open to at the far end.
+    armSpan: 205,
+    spread: 62,
+    vertex: 87.5,
+    armX: 104,
+  },
+  arch: { edgesUp: 8, apexUp: 44 },
+  // まつげ: a few strokes flicking out from the upper-outer lid (see drawEyes).
+  // `raise` lifts them a touch above the lid edge (2% of the lid slider).
+  lash: { length: 30, width: 8, angles: [46, 66, 86], raise: 0.04 },
+  // "ふつう"の目の瞳を、両目とも少し鼻側に寄せてかわいく見せる（px）。
+  irisInward: 7,
+};
+
+
+/**
+ * 眼鏡 / サングラス, drawn into the same texture as the eyes and brows.
+ *
+ * Not measured off any artwork - the character has no glasses - but the numbers
+ * are tied to the eyeball so a lens is always a little wider than the eye it
+ * covers.
+ *
+ * The two kinds get separate shapes on purpose. They used to share one ellipse
+ * and differ only in how dark the lens was filled, which made them hard to tell
+ * apart; the round 眼鏡 below and the wide, angular サングラス in
+ * `SUNGLASSES_LAYOUT` now read as different objects at a glance.
+ */
+const GLASSES_LAYOUT = {
+  widthFactor: 1.08,   // lens half-width, as a multiple of the eyeball radius
+  heightFactor: 1.0,   // a circle, so the round 眼鏡 stays round (a flatter
+                       // ellipse used to drift towards the shades below)
+  drop: 20,            // the lens centre hangs this far below the eye centre (artwork px)
+  bridgeRise: 8,       // how much the bridge arcs up over the nose
+  bridgeWidth: 0.75,   // bridge thickness, as a fraction of the frame stroke
+  templeLength: 1.5,   // temple stub length, as a multiple of the eyeball radius
+  templeRise: 30,      // how far the temple climbs towards the side of the head
+};
+
+/**
+ * サングラス: a long, pointed cat-eye rather than the round 眼鏡 lens. Each side is a
+ * slim wedge whose *outer end starts low*, rises to a *high, pointed outer corner*
+ * set further out (`tipX`), and whose top edge then sweeps back down towards the
+ * nose - the "外側が長くとがって上に上がる" shape the reference shows. The inner end is
+ * short, so the lens tapers inwards. The eye is allowed to poke out above and
+ * below it, so the lens no longer has to cover the whole eyeball. A level bar
+ * joins the two inner ends, so the pair still reads as one dark visor. The ratios
+ * are of the eyeball radius, exactly like `GLASSES_LAYOUT`, so `scale` means the
+ * same thing for both kinds.
+ */
+const SUNGLASSES_LAYOUT = {
+  widthFactor: 1.6,    // a long lens: the outer end reaches well past the eyeball
+  heightFactor: 0.58,  // slim, so the eye is free to show above and below it
+  drop: 8,             // sits a little lower than the round pair
+  corner: 0.05,        // corner rounding, as a fraction of the half-height; kept
+                       // tiny so the outer corner stays pointed
+  topSkew: 1.0,        // the pointed corner rises this far above the lens top (x half-height)
+  innerTop: 0.42,      // the inner top is low, which is what makes the top edge climb
+  innerBottom: 0.34,   // the inner bottom is pinched up towards the nose (x half-height)
+  outerEndX: 0.75,     // the low outer end sits this far out (x half-width)
+  outerBottom: 0.82,   // ...and this deep (x half-height)
+  tipX: 1.22,          // the pointed corner juts this far out (x half-width)
+  bridgeWidth: 1.15,   // a short, thick bar - thicker than the frame stroke
+  bridgeLift: 0.25,    // the bar sits this far above the lens centre (x half-height)
+  templeLength: 1.15,  // a short stub, like the round pair's but a little shorter
+  templeRise: 24,
+  // A heavy rim. It used to be slimmer than the round pair's stroke, which read
+  // as a thin pair of shades; the reference look is a chunky frame.
+  frameFactor: 1.6,
+};
+
+/** The mouth artwork is drawn on the `mouth-plate` shell, which covers the whole
+ *  1024 x 380 canvas (see tools/build-face-plates.py), so the drawing no longer
+ *  has to be squeezed into a band. The only limit left is the canvas itself. */
+export const MOUTH_LAYOUT = {
+  centreX: 511.5,
+  chordY: 88,
+  halfChord: 420.5,
+  sag: 177,
+  // With the ends and the depth both fixed - which is what the slider promises -
+  // the only thing left to choose about the curve is *where* it bends. 1/3 is a
+  // quadratic Bézier (a parabola): it is flattest at the apex and falls away
+  // fastest near the ends. Pulling the cubic's control points in towards the ends
+  // makes the middle of the smile straighter still and lets the fall happen near
+  // the corners, which is what reads as a *gentler* curve at the same depth.
+  sagBend: 0.2,
+  thickness: 21,
+  // How big the round "O" oval gets at `round: 1`, as a multiple of the smile's
+  // own sag. The oval's size comes from this and `round` alone: `thickness` is
+  // only the stroke weight, so 口の太さ and 丸く開く no longer move together.
+  roundScale: 1.3,
+  // Kept for reference: the 2022 plane only showed these rows.
+  bandTop: 46,
+  bandBottom: 332,
+  // Only used to cap the *size* of the round "O" mouth, so the surprise face
+  // stays a mouth and not a hole. The mouth's travel no longer stops here: the
+  // drawing is given the plate's real edges through `limits`.
+  safeBottom: 372,
+  // The nose is a separate mesh that pokes out in front of the plate. The plate
+  // is depth tested, so the nose hides whatever is drawn behind it - but a frown
+  // arcs *up* into that hiding place, so slide the mouth down until the middle
+  // of the arc clears the nose. Only the middle is checked: a smile curves away
+  // from the nose, and checking its ends instead is what used to pin the whole
+  // mouth in place and make the height slider do nothing.
+  noseClear: 132,
+  // The original hand-drawn mouth is a *shallow* arc with tall corner strokes
+  // flicking up at the ends (measured from the artwork: the arc's own sag is
+  // ~0.13 of its chord, while the corners reach ~90px above it). Keeping that
+  // split is what makes `smile: 1` read as the original; making the arc itself
+  // deep instead looked too steep.
+  //
+  // The tongue rises from the lip line to a rounded top just above the corner
+  // strokes. Measured off the original: its crown is a *super-ellipse* -
+  // `rise = height * (1 - |dx/half|^2.5)` - so it is steep-sided with a smooth,
+  // almost flat top. It is convex upwards, but it is **not** a point.
+  tongue: { pos: 0.84, width: 126, height: 115, crown: 2.5 },
+  corner: { fromX: 26, fromY: 3, toX: 32, toY: 42, width: 11, curve: 26 },
+  openRise: 64,
+  // Was 0.25: opening the mouth used to flatten the smile to stay inside the
+  // texture band. There is no band to stay inside now.
+  openFlatten: 0,
+};
+
+/* ------------------------------------------------------------------ helpers */
+
+function circlePath(ctx, cx, cy, r) {
+  ctx.beginPath();
+  ctx.arc(cx, cy, r, 0, TAU);
+  ctx.closePath();
+}
+
+function fillCircle(ctx, cx, cy, r, color) {
+  circlePath(ctx, cx, cy, r);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+
+/**
+ * A heart, used for the "love" eyes. The path is wider than it is tall, which
+ * is what makes it read as a heart rather than a blob at small sizes.
+ */
+function heartPath(ctx, cx, cy, r) {
+  ctx.beginPath();
+  ctx.moveTo(cx, cy + r * 0.80);
+  ctx.bezierCurveTo(cx - r * 1.24, cy - r * 0.34, cx - r * 0.50, cy - r * 1.18, cx, cy - r * 0.40);
+  ctx.bezierCurveTo(cx + r * 0.50, cy - r * 1.18, cx + r * 1.24, cy - r * 0.34, cx, cy + r * 0.80);
+  ctx.closePath();
+}
+
+function fillHeart(ctx, cx, cy, r, color) {
+  heartPath(ctx, cx, cy, r);
+  ctx.fillStyle = color;
+  ctx.fill();
+}
+
+/** A teardrop, used by the crying expression. */
+function dropPath(ctx, cx, cy, size) {
+  ctx.beginPath();
+  ctx.moveTo(cx, cy - size * 1.32);
+  ctx.bezierCurveTo(cx + size * 0.95, cy - size * 0.34, cx + size * 0.95, cy + size * 0.78, cx, cy + size * 0.78);
+  ctx.bezierCurveTo(cx - size * 0.95, cy + size * 0.78, cx - size * 0.95, cy - size * 0.34, cx, cy - size * 1.32);
+  ctx.closePath();
+}
+
+function strokeCircle(ctx, cx, cy, r, color, width) {
+  circlePath(ctx, cx, cy, r);
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  ctx.stroke();
+}
+
+function tracePolyline(ctx, points, closed) {
+  if (!points.length) return;
+  ctx.beginPath();
+  ctx.moveTo(points[0].x, points[0].y);
+  for (let i = 1; i < points.length; i++) ctx.lineTo(points[i].x, points[i].y);
+  if (closed) ctx.closePath();
+}
+
+function strokePolyline(ctx, points, { color, width, closed = false }) {
+  if (points.length < 2) return;
+  ctx.save();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = width;
+  ctx.lineJoin = 'round';
+  ctx.lineCap = 'round';
+  tracePolyline(ctx, points, closed);
+  ctx.stroke();
+  ctx.restore();
+}
+
+function fillPolygon(ctx, points, color) {
+  if (points.length < 3) return;
+  ctx.save();
+  ctx.fillStyle = color;
+  tracePolyline(ctx, points, true);
+  ctx.fill();
+  ctx.restore();
+}
+
+/**
+ * Trace a closed polygon with rounded corners. Used for the squarish
+ * サングラス lens: an ellipse cannot be angular, and a plain polygon has cusps.
+ * Each corner is cut back by `radius` (clamped so short edges cannot overlap)
+ * and joined with a quadratic through the original vertex.
+ */
+function traceRoundedPolygon(ctx, points, radius) {
+  const n = points.length;
+  ctx.beginPath();
+  for (let i = 0; i < n; i++) {
+    const prev = points[(i + n - 1) % n];
+    const cur = points[i];
+    const next = points[(i + 1) % n];
+    const inLen = Math.hypot(cur.x - prev.x, cur.y - prev.y) || 1;
+    const outLen = Math.hypot(next.x - cur.x, next.y - cur.y) || 1;
+    const cut = Math.min(radius, inLen / 2, outLen / 2);
+    const from = { x: cur.x + ((prev.x - cur.x) / inLen) * cut, y: cur.y + ((prev.y - cur.y) / inLen) * cut };
+    const to = { x: cur.x + ((next.x - cur.x) / outLen) * cut, y: cur.y + ((next.y - cur.y) / outLen) * cut };
+    if (i === 0) ctx.moveTo(from.x, from.y);
+    else ctx.lineTo(from.x, from.y);
+    ctx.quadraticCurveTo(cur.x, cur.y, to.x, to.y);
+  }
+  ctx.closePath();
+}
+
+/** Points along a quadratic Bézier, `steps` segments (steps + 1 points). */
+function quadraticPoints(p0, p1, p2, steps) {
+  const out = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const u = 1 - t;
+    out.push({
+      x: u * u * p0.x + 2 * u * t * p1.x + t * t * p2.x,
+      y: u * u * p0.y + 2 * u * t * p1.y + t * t * p2.y,
+    });
+  }
+  return out;
+}
+
+/** A point on a cubic Bézier. */
+function cubicPoint(p0, p1, p2, p3, t) {
+  const u = 1 - t;
+  const a = u * u * u;
+  const b = 3 * u * u * t;
+  const c = 3 * u * t * t;
+  const d = t * t * t;
+  return {
+    x: a * p0.x + b * p1.x + c * p2.x + d * p3.x,
+    y: a * p0.y + b * p1.y + c * p2.y + d * p3.y,
+  };
+}
+
+/** Points along a cubic Bézier, `steps` segments (steps + 1 points). */
+function cubicPoints(p0, p1, p2, p3, steps) {
+  const out = [];
+  for (let i = 0; i <= steps; i++) out.push(cubicPoint(p0, p1, p2, p3, i / steps));
+  return out;
+}
+
+/**
+ * The four control points of the mouth's centreline: the same two ends, the same
+ * depth, but `bend` decides where the curve actually bends (see `sagBend`).
+ */
+function mouthControls(left, right, sag, bend) {
+  const width = right.x - left.x;
+  const y = left.y + (4 / 3) * sag;
+  return {
+    p0: left,
+    p1: { x: left.x + width * bend, y },
+    p2: { x: right.x - width * bend, y },
+    p3: right,
+  };
+}
+
+function rotate(points, pivot, degrees) {
+  if (!degrees) return points;
+  const a = (degrees * Math.PI) / 180;
+  const cos = Math.cos(a);
+  const sin = Math.sin(a);
+  return points.map((p) => {
+    const dx = p.x - pivot.x;
+    const dy = p.y - pivot.y;
+    return { x: pivot.x + dx * cos - dy * sin, y: pivot.y + dx * sin + dy * cos };
+  });
+}
+
+/* --------------------------------------------------------------------- eyes */
+
+/**
+ * Intersect the canvas clip with the eyeball disc and the (possibly closed)
+ * lids. Because the overlay plane is transparent and sits in front of the face,
+ * clipping is all that is needed: whatever is clipped away shows the real
+ * shaded face behind it. That is what makes the eyelid blend perfectly without
+ * baking a face-coloured background into the texture.
+ */
+/** Clip to the upper and lower lids only, without the eyeball circle. */
+function clipLids(ctx, eye, open, lowerLid, flat = false, tiltDeg = 0) {
+  const tilt = (clamp(tiltDeg, -45, 45) * Math.PI) / 180;
+  const rotated = Math.abs(tilt) > 1e-4;
+  const spin = () => {
+    ctx.translate(eye.cx, eye.cy);
+    ctx.rotate(tilt);
+    ctx.translate(-eye.cx, -eye.cy);
+  };
+  if (rotated) spin();
+
+  const lower = clamp(lowerLid, 0, 1);
+  // The upper and lower lids are independent: 上まぶたの高さ sets where the upper
+  // lid sits on its own, so raising 下まぶたの高さ does not drag the upper lid
+  // down with it. A blink still shuts the eye because `open` reaching 0 (or the
+  // upper lid dropping to the lower one) hands over to the shut-eye drawing
+  // before this clip is used.
+  const upper = 1 - clamp(open, 0, 1);
+  if (upper > 0.0005) {
+    const rl = eye.r * EYE_LAYOUT.lidRadiusFactor;
+    const lowest = eye.cy - eye.r + 2 * eye.r * upper;
+    ctx.beginPath();
+    if (flat) {
+      // A flat lid: a straight edge straight across the eye.
+      ctx.rect(eye.cx - HUGE, lowest, HUGE * 2, HUGE);
+    } else {
+      const cy = lowest - rl;
+      ctx.moveTo(eye.cx - HUGE, cy);
+      ctx.lineTo(eye.cx - rl, cy);
+      ctx.arc(eye.cx, cy, rl, Math.PI, 0, true); // lower semicircle: bulges down
+      ctx.lineTo(eye.cx + HUGE, cy);
+      ctx.lineTo(eye.cx + HUGE, cy + HUGE);
+      ctx.lineTo(eye.cx - HUGE, cy + HUGE);
+    }
+    ctx.closePath();
+    ctx.clip();
+  }
+
+  const bottom = lower;
+  if (bottom > 0.0005) {
+    const rl = eye.r * EYE_LAYOUT.lidRadiusFactor;
+    const highest = eye.cy + eye.r - 2 * eye.r * bottom;
+    ctx.beginPath();
+    if (flat) {
+      ctx.rect(eye.cx - HUGE, highest - HUGE, HUGE * 2, HUGE);
+    } else {
+      const cy = highest + rl;
+      ctx.moveTo(eye.cx - HUGE, cy);
+      ctx.lineTo(eye.cx - rl, cy);
+      ctx.arc(eye.cx, cy, rl, Math.PI, 0, false); // upper semicircle: bulges up
+      ctx.lineTo(eye.cx + HUGE, cy);
+      ctx.lineTo(eye.cx + HUGE, cy - HUGE);
+      ctx.lineTo(eye.cx - HUGE, cy - HUGE);
+    }
+    ctx.closePath();
+    ctx.clip();
+  }
+
+  if (rotated) {
+    // Undo the rotation for the caller, but keep the clip we just set.
+    ctx.translate(eye.cx, eye.cy);
+    ctx.rotate(-tilt);
+    ctx.translate(-eye.cx, -eye.cy);
+  }
+}
+
+/** Clip to the eyeball circle as well (the iris and heart are eyeball content). */
+function clipEye(ctx, eye, open, lowerLid, flat = false, tiltDeg = 0) {
+  circlePath(ctx, eye.cx, eye.cy, eye.r);
+  ctx.clip();
+  clipLids(ctx, eye, open, lowerLid, flat, tiltDeg);
+}
+
+function lidPath(ctx, eye, amount, lower, flat = false) {
+  ctx.beginPath();
+  if (flat) {
+    // A straight lid edge; the caller clips it to the eyeball.
+    const y = lower
+      ? eye.cy + eye.r - 2 * eye.r * amount
+      : eye.cy - eye.r + 2 * eye.r * (1 - amount);
+    ctx.moveTo(eye.cx - eye.r * 2, y);
+    ctx.lineTo(eye.cx + eye.r * 2, y);
+    return;
+  }
+  const rl = eye.r * EYE_LAYOUT.lidRadiusFactor;
+  if (!lower) {
+    const lowest = eye.cy - eye.r + 2 * eye.r * (1 - amount);
+    ctx.arc(eye.cx, lowest - rl, rl, Math.PI, 0, true);
+  } else {
+    const highest = eye.cy + eye.r - 2 * eye.r * amount;
+    ctx.arc(eye.cx, highest + rl, rl, Math.PI, 0, false);
+  }
+}
+
+/** The "eyes shut" artwork: a line, a chevron or a happy arch. */
+function drawShutEye(ctx, eye, spec, style, shapeScale = 1, maxHalf = Infinity) {
+  const layout = EYE_LAYOUT.closedLine;
+  const { line, width } = style;
+  // 形の大きさ is a multiplier on the shape's *fitting* size. With the white shown
+  // that fitting size is what just fits inside the eyeball, so the default (1)
+  // sits in the white; raising it may push the shape out past the white, which is
+  // allowed. `maxHalf` is Infinity when the white is hidden, so nothing is scaled
+  // back there.
+  const k = (unitHalf) => shapeScale * (maxHalf === Infinity ? 1 : Math.min(1, maxHalf / unitHalf));
+
+  if (spec.closed === 'chevron') {
+    // The chevron points *at* the nose, matching the original artwork.
+    const scale = k(layout.armX);
+    const vertex = { x: eye.cx + eye.towardNose * layout.vertex * scale, y: eye.cy + layout.offsetY * scale - 8 * scale };
+    const armX = eye.cx - eye.towardNose * layout.armX * scale;
+    const spread = layout.spread * (spec.spread ?? 1) * scale;
+    strokePolyline(ctx, [vertex, { x: armX, y: vertex.y - spread }], { color: line, width });
+    strokePolyline(ctx, [vertex, { x: armX, y: vertex.y + spread }], { color: line, width });
+    return;
+  }
+
+  if (spec.closed === 'three') {
+    // A real "3": an upper bowl and a lower bowl that meet at a single pinch on
+    // the nose side. Stacking two C's instead made the two lobes sit on top of
+    // each other; joining them at a point is what makes it read as the digit.
+    const r = 34 * k(1.7 * 34);
+    // Which way the digit faces. It used to follow the nose side, which made the
+    // pair a mirror image; each eye can now be set either way, because a pair of
+    // mirrored 3s does not always read the way you want.
+    const dir = (spec.threeFlip ? -1 : 1) * eye.towardNose;
+    const sx = eye.cx;
+    const cy = eye.cy + layout.offsetY;
+    const at = (x, y) => ({ x: sx + dir * r * x, y: cy + r * y });
+    const pinch = at(0.72, 0);
+    const upper = quadraticPoints(at(0.02, -1.62), at(2.05, -1.40), pinch, 26);
+    const lower = quadraticPoints(pinch, at(2.05, 1.46), at(0.02, 1.78), 26);
+    strokePolyline(ctx, upper, { color: line, width });
+    strokePolyline(ctx, lower, { color: line, width });
+    return;
+  }
+
+  if (spec.closed === 'arch') {
+    const scale = k(eye.r);
+    const edges = { x: eye.r * scale, y: EYE_LAYOUT.arch.edgesUp * scale };
+    const points = quadraticPoints(
+      { x: eye.cx - edges.x, y: eye.cy + edges.y },
+      { x: eye.cx, y: eye.cy + edges.y - EYE_LAYOUT.arch.apexUp * 2 * scale },
+      { x: eye.cx + edges.x, y: eye.cy + edges.y },
+      24,
+    );
+    strokePolyline(ctx, points, { color: line, width });
+    return;
+  }
+
+  // Default: the gently slanted line of the original artwork, mirrored so it
+  // always slopes down towards the nose. With `closedLines` set to 2 or 3 the
+  // strokes share one endpoint instead - a ">" or bird's-foot shape, which is
+  // how manga draws a happily squeezed-shut eye.
+  const count = clamp(Math.round(spec.closedLines ?? 1), 1, 3);
+  const scale = k(layout.length / 2);
+  if (count >= 2) {
+    const vertex = { x: eye.cx + eye.towardNose * layout.vertex * scale, y: eye.cy + layout.offsetY * scale - 8 * scale };
+    // Reach as far as the single line does, not just a short stub: the arms are
+    // the *long* form of the same eyelid the one-line version covers.
+    const outX = -eye.towardNose * layout.armSpan * scale;
+    const spread = layout.spread * scale;
+    const arms = count === 2
+      ? [{ x: outX, y: -spread }, { x: outX, y: spread }]
+      : [
+        { x: outX, y: -spread },
+        { x: -eye.towardNose * Math.hypot(layout.armSpan, layout.spread) * scale, y: 0 },
+        { x: outX, y: spread },
+      ];
+    for (const arm of arms) {
+      strokePolyline(ctx, [vertex, { x: vertex.x + arm.x, y: vertex.y + arm.y }], { color: line, width });
+    }
+    return;
+  }
+
+  const half = (layout.length / 2) * (spec.length ?? 1) * scale;
+  const midX = eye.cx - eye.towardNose * layout.offsetX * scale;
+  const midY = eye.cy + layout.offsetY * scale;
+  const angle = ((layout.slantDeg * (spec.slant ?? 1) * eye.towardNose) * Math.PI) / 180;
+  const bow = (layout.bow ?? 0) * (spec.slant ?? 1) * scale;
+  const from = { x: midX - Math.cos(angle) * half, y: midY - Math.sin(angle) * half };
+  const to = { x: midX + Math.cos(angle) * half, y: midY + Math.sin(angle) * half };
+  const points = quadraticPoints(from, { x: midX, y: midY + bow * 2 }, to, 20);
+  strokePolyline(ctx, points, { color: line, width });
+}
+
+
+
+
+
+
+/**
+ * One lens of a pair of 眼鏡 / サングラス, plus this eye's half of the bridge and its
+ * temple.
+ *
+ * Called once per eye from `drawEyes`, after the eyeball (or the shut-eye artwork)
+ * so the lens sits in front of the eye, and before that eye's tear so a teardrop
+ * falls past the lens. Nothing about a pair of glasses is per-eye, so the two
+ * halves are mirrored from `eye.towardNose` and meet at the face's midline. The
+ * kind picks the shape: a round 眼鏡 lens, or a wide angular サングラス one.
+ *
+ * `style.glasses` is the shared spec. In a line drawing the lens is left empty, so
+ * the paper behind shows through exactly as the eyeball's white does (see the note
+ * in `drawEyes`); the frames are then stroked in the line colour.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {{cx:number,cy:number,r:number,towardNose:number}} eye
+ * @param {boolean} line                 true in 線画 mode
+ * @param {object} style                 the bag `drawEyes` received
+ * @param {{top:number,bottom:number,left:number,right:number}} limits
+ */
+function drawGlasses(ctx, eye, line, style, limits) {
+  const spec = style.glasses;
+  if (!spec?.enabled) return;
+
+  const r = eye.r;
+  const scale = clamp(spec.scale ?? 1, 0.2, 3);
+  // The two kinds share everything about *where* they sit but not their shape:
+  // 眼鏡 is a round lens, サングラス a wide angular one (see the layouts above).
+  const shades = spec.kind === 'sunglasses';
+  const L = shades ? SUNGLASSES_LAYOUT : GLASSES_LAYOUT;
+  const rx = r * L.widthFactor * scale;
+  const ry = rx * L.heightFactor;
+  const frame = Math.max(
+    1,
+    (spec.frameWidth ?? 1) * EYE_LAYOUT.lidStroke * (shades ? L.frameFactor : 1),
+  );
+  const colour = line ? (style.line ?? '#55386e') : (spec.frameColor ?? '#2a1e33');
+  // The outward direction (towards the temple) for this eye. The angular lens is
+  // built in a local frame whose u runs outwards, so the two sides mirror exactly.
+  const out = -eye.towardNose;
+  // The pointed outer corner makes the shades taller on that side; clamp against
+  // the full height so even that point cannot reach the canvas border.
+  const halfV = shades ? ry * Math.max(L.innerTop + L.topSkew, L.outerBottom) : ry;
+
+  // The face's midline: the two eyes are symmetric about it, so it is where the
+  // two halves of the bridge meet and what `tilt` turns the pair about.
+  const midX = (EYE_LAYOUT.eyes[0].cx + EYE_LAYOUT.eyes[1].cx) / 2;
+  // `lensGap` slides the two lenses apart (positive) or together (negative) along
+  // the face, symmetrically about the midline. It is clamped so the inner edges may
+  // meet at the midline but the two lenses can never cross each other.
+  const inwardRoom = Math.max(0, Math.abs(midX - eye.cx) - rx);
+  const gap = clamp(spec.lensGap ?? 0, -inwardRoom, HUGE);
+  // Keep the lens (and so everything that hangs off it) inside the artwork. The
+  // rest of the file clamps against `limits` for the same reason: a mark that
+  // reaches the canvas border gets the edge row copied across the whole plate.
+  const lensCx = clamp(
+    eye.cx + out * gap,
+    limits.left + EDGE_MARGIN + rx,
+    limits.right - EDGE_MARGIN - rx,
+  );
+  const lensCy = clamp(
+    eye.cy + L.drop + (spec.offsetY ?? 0),
+    limits.top + EDGE_MARGIN + halfV,
+    limits.bottom - EDGE_MARGIN - halfV,
+  );
+  // Local (u, v) -> canvas, with u outwards and v downwards.
+  const at = (u, v) => ({ x: lensCx + out * u, y: lensCy + v });
+
+  ctx.save();
+  // `tilt` leans the whole pair at once. Rotating about the midline keeps the
+  // bridge centred between the lenses instead of swinging it off to one side.
+  if (spec.tilt) {
+    ctx.translate(midX, lensCy);
+    ctx.rotate((clamp(spec.tilt, -90, 90) * Math.PI) / 180);
+    ctx.translate(-midX, -lensCy);
+  }
+
+  // --- lens ------------------------------------------------------------
+  // The one path is filled and then stroked, so the fill and the frame can never
+  // drift apart.
+  if (shades) {
+    // A long cat-eye, not an ellipse: the outer end starts low, rises to a
+    // pointed, lifted outer corner set further out, and the top edge sweeps back
+    // towards the nose. The inner end is short, so the lens tapers inwards.
+    const lens = [
+      at(-rx, -ry * L.innerTop),                          // inner top (near the nose)
+      at(rx * L.tipX, -ry * (L.innerTop + L.topSkew)),    // pointed, lifted outer corner
+      at(rx * L.outerEndX, ry * L.outerBottom),           // low outer end
+      at(-rx, ry * L.innerBottom),                        // inner bottom (pinched towards the nose)
+    ];
+    traceRoundedPolygon(ctx, lens, ry * L.corner);
+    if (!line) {
+      ctx.globalAlpha = clamp(spec.lensOpacity ?? 0, 0, 1);
+      ctx.fillStyle = spec.lensColor ?? '#2b2433';
+      ctx.fill();
+      ctx.globalAlpha = 1;
+    }
+    ctx.strokeStyle = colour;
+    ctx.lineWidth = frame;
+    ctx.stroke();
+  } else {
+    ctx.beginPath();
+    ctx.ellipse(lensCx, lensCy, rx, ry, 0, 0, TAU);
+    ctx.closePath();
+    if (!line) {
+      ctx.globalAlpha = clamp(spec.lensOpacity ?? 0, 0, 1);
+      ctx.fillStyle = spec.lensColor ?? '#2b2433';
+      ctx.fill();
+      ctx.globalAlpha = 1;
+    }
+    ctx.strokeStyle = colour;
+    ctx.lineWidth = frame;
+    ctx.stroke();
+  }
+
+  // --- bridge ----------------------------------------------------------
+  // Each eye draws the half of the bridge from its own lens to the midline.
+  const innerX = eye.towardNose > 0
+    ? Math.min(lensCx + rx, midX)
+    : Math.max(lensCx - rx, midX);
+  if (shades) {
+    // A short, thick, level bar high on the lenses: with the two lenses it reads
+    // as one continuous visor across the eyes.
+    const barY = lensCy - ry * L.bridgeLift;
+    strokePolyline(ctx, [{ x: innerX, y: barY }, { x: midX, y: barY }], {
+      color: colour,
+      width: frame * L.bridgeWidth,
+    });
+  } else {
+    // The two halves meet at the midline with a horizontal tangent, so the join is smooth.
+    const noseX = lensCy - L.bridgeRise;
+    strokePolyline(ctx, quadraticPoints(
+      { x: innerX, y: lensCy },
+      { x: (innerX + midX) / 2, y: noseX },
+      { x: midX, y: noseX },
+      12,
+    ), { color: colour, width: frame * L.bridgeWidth });
+  }
+
+  // --- temple ----------------------------------------------------------
+  // A stub outwards from the outer edge of the lens. It stays short on purpose:
+  // the plate only reaches so far, and a temple that ran off it would smear. The
+  // round pair's outer edge is a vertical line at the lens centre height. The
+  // shades' outer end drops low, so their arm leaves from the *top* edge instead
+  // - from the pointed outer corner - which is where a cat-eye's arm attaches.
+  const outerX = shades
+    ? lensCx - eye.towardNose * rx * L.tipX
+    : lensCx - eye.towardNose * rx;
+  const outerY = shades ? lensCy - ry * (L.innerTop + L.topSkew) : lensCy;
+  const reach = clamp(
+    outerX - eye.towardNose * r * L.templeLength,
+    limits.left + EDGE_MARGIN,
+    limits.right - EDGE_MARGIN,
+  );
+  strokePolyline(ctx, [
+    { x: outerX, y: outerY },
+    {
+      x: eye.towardNose > 0 ? Math.min(reach, outerX) : Math.max(reach, outerX),
+      y: clamp(outerY - L.templeRise, limits.top + EDGE_MARGIN, limits.bottom - EDGE_MARGIN),
+    },
+  ], { color: colour, width: frame });
+
+  ctx.restore();
+}
+
+/**
+ * Draw the pair of eyes into a 1024 x 380 canvas.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {object} p
+ * @param {'paint'|'line'} [p.mode]   paint = filled cartoon eyes, line = outline only
+ * @param {object} p.eyes             `{ left, right }`, each `{ open, lookX, lookY, closed }`
+ * @param {object} [p.style]          colours and shared shaping parameters
+ */
+/**
+ * Which artwork an eye shows: 'open', 'heart', 'line1'..'line3', 'three' or
+ * 'arch'. `shape` is the explicit choice; older saved states and the おまかせ
+ * rolls only set `open`/`closed`/`irisShape`, so this falls back to those.
+ */
+function eyeShapeKey(spec) {
+  const shape = spec.shape;
+  const explicitShut = shape === 'three' || shape === 'arch'
+    || (typeof shape === 'string' && shape.startsWith('line'));
+  // An explicit shut artwork is used as-is; the lid height only trims it.
+  if (explicitShut) return shape;
+  // A lowered lid on an open or heart eye reads as a shut line - a blink. It must
+  // NOT borrow a 3 or an arch from a stale `closed`, which used to flash on screen
+  // for a frame when blinking after picking 3/わらう and then switching to heart.
+  if ((spec.open ?? 1) <= 0.02) {
+    if (!shape) {
+      // Older saved states have no `shape`; derive the shut artwork from `closed`.
+      if (spec.closed === 'three') return 'three';
+      if (spec.closed === 'arch') return 'arch';
+      return `line${clamp(Math.round(spec.closedLines ?? 1), 1, 3)}`;
+    }
+    return 'line1';
+  }
+  if (shape) return shape;
+  return (spec.irisShape ?? 'circle') === 'heart' ? 'heart' : 'open';
+}
+
+export function drawEyes(ctx, p) {
+  const mode = p.mode ?? 'paint';
+  const line = mode === 'line';
+  const style = p.style ?? {};
+  const limits = style.limits ?? WINDOW_LIMITS;
+  const white = style.white ?? '#ffffff';
+  const irisColor = style.iris ?? '#150e1b';
+  const lineColor = style.line ?? '#55386e';
+  const lookMax = style.lookMax ?? 1;
+  const heartScale = 2;
+  const heartColor = style.heartColor ?? '#e0344f';
+  // A lens that is effectively opaque hides the eye completely, so a blink would
+  // show only as a flicker of the shut artwork through the lens. While such a
+  // lens is on, the eyes are drawn open and no blink is visible at all. This is a
+  // rendering decision, not an animation one - the blink still runs underneath.
+  const lensOpaque = style.glasses?.enabled === true
+    && clamp(style.glasses.lensOpacity ?? 0, 0, 1) >= 0.99;
+
+  for (const layout of EYE_LAYOUT.eyes) {
+    const spec = (p.eyes ?? {})[layout.key] ?? {};
+    const eye = {
+      // `eyeX` slides this eye - and its lid and tear - sideways on its own.
+      cx: layout.cx + clamp(spec.eyeX ?? 0, -400, 400),
+      cy: layout.cy,
+      r: EYE_LAYOUT.radius,
+      towardNose: layout.towardNose,
+    };
+    // Each lid can be set per eye, falling back to the shared value.
+    const lidWidth = spec.lidWidth ?? style.lidWidth ?? EYE_LAYOUT.lidStroke;
+    const lidFlat = (spec.lidShape ?? style.lidShape ?? 'curve') === 'flat';
+    // How much the whole narrowed eye is tilted (e.g. an angry or gentle squint).
+    const lidTilt = clamp(spec.lidTilt ?? style.lidTilt ?? 0, -45, 45);
+    const lineStyle = { line: lineColor, width: lidWidth };
+    // Which artwork this eye shows. `shape` is the explicit choice; older saved
+    // states and the おまかせ rolls only set `open`/`closed`, so fall back.
+    const shapeKey = eyeShapeKey(lensOpaque ? { ...spec, open: 1 } : spec);
+    const explicitShut = typeof spec.shape === 'string'
+      && (spec.shape === 'three' || spec.shape === 'arch' || spec.shape.startsWith('line'));
+    const isHeart = shapeKey === 'heart';
+    const isShutShape = shapeKey === 'three' || shapeKey === 'arch' || shapeKey.startsWith('line');
+    // The shut artwork reads `closed`/`closedLines`; build them from `shape` so a
+    // line, the 3 and the arch share one path with the older fields.
+    const shapeSpec = isShutShape
+      ? {
+        ...spec,
+        closed: shapeKey === 'three' ? 'three' : (shapeKey === 'arch' ? 'arch' : 'line'),
+        closedLines: shapeKey.startsWith('line') ? Number(shapeKey.slice(4)) : (spec.closedLines ?? 1),
+      }
+      : spec;
+    // The upper lid (`open`) and the lower lid are independent, and both shape
+    // every eye now: the shut artwork is drawn as the eye's content and is
+    // trimmed by them. A shut eye saved the old way stored open = 0 meaning
+    // "shut"; lift it or the artwork would be clipped away. An explicit shut
+    // `shape` keeps its own lid height, so the lid can be lowered onto it.
+    const rawOpen = spec.open ?? 1;
+    const open = lensOpaque
+      ? 1
+      : clamp(explicitShut ? rawOpen : (rawOpen <= 0.02 ? 1 : rawOpen), 0, 1);
+    const lowerLid = clamp(spec.lowerLid ?? style.lowerLid ?? 0, 0, 1);
+    // 大きさ: one knob for the iris, the heart and the shut artwork.
+    const shapeScale = clamp(style.irisScale ?? 1, 0.4, 2);
+    const irisRadius = EYE_LAYOUT.irisRadius * shapeScale;
+    // `white` is tri-state: only the plain open eye shows it by default.
+    const showWhite = spec.white != null ? spec.white === true : shapeKey === 'open';
+    // While the white is shown, a shape that would poke out of the eyeball is
+    // scaled back inside it; `shapeHalfLimit` is the half-size it may reach.
+    const shapeHalfLimit = showWhite ? eye.r * 0.92 : Infinity;
+
+    // --- tear ----------------------------------------------------------
+    // A teardrop hangs below the eye, so it is drawn on top of everything else
+    // (the opaque eyeball would otherwise cover it) and for a shut eye too. The
+    // amount, the height and the tilt are all *per eye*, because one eye crying
+    // while the other does not is a real expression.
+    const drawTear = () => {
+      if (spec.tearOn !== true) return;
+      const amount = clamp(spec.tear ?? 0.3, 0, 1.6);
+      if (amount <= 0.01) return;
+      const size = EYE_LAYOUT.tear.size * amount;
+      const tearX = eye.cx + clamp(spec.tearX ?? 0, -400, 400) - layout.towardNose * EYE_LAYOUT.tear.offsetX;
+      let tearY = eye.cy + EYE_LAYOUT.tear.offsetY + (spec.tearY ?? 0);
+      // The drop hangs from `cy - 1.32r` to `cy + 0.78r`. Keep its lower tip
+      // inside the artwork: a drop that reached the canvas border used to be
+      // smeared down the chin by the clamp.
+      const tearBottom = limits.bottom - EDGE_MARGIN;
+      if (tearY + size * 0.78 > tearBottom) tearY = tearBottom - size * 0.78;
+      ctx.save();
+      if (spec.tearTilt) {
+        ctx.translate(tearX, tearY);
+        ctx.rotate((spec.tearTilt * Math.PI) / 180);
+        ctx.translate(-tearX, -tearY);
+      }
+      dropPath(ctx, tearX, tearY, size);
+      if (!line) {
+        ctx.fillStyle = style.tearColor ?? '#8fd8ff';
+        ctx.fill();
+      }
+      ctx.strokeStyle = lineColor;
+      ctx.lineWidth = lidWidth * 0.55;
+      ctx.stroke();
+      ctx.restore();
+    };
+
+    // How far the gaze can push the content. A heart (or a shut line shown on the
+    // white) is much bigger than the iris, so it gets a smaller travel - and with
+    // the white shown the content is also clipped to the eyeball - so it never
+    // pokes outside the white.
+    const heartFit = isHeart && showWhite
+      ? Math.min(1, shapeHalfLimit / (EYE_LAYOUT.irisRadius * heartScale))
+      : 1;
+    const heartRadius = Math.min(
+      EYE_LAYOUT.irisRadius * heartScale * shapeScale * heartFit,
+      EYE_LAYOUT.radius * 2.1,
+    );
+    let travelBase = irisRadius;
+    if (isHeart) travelBase = heartRadius;
+    const eyeTravel = Math.max(0, EYE_LAYOUT.radius - travelBase) * lookMax;
+    let dx = clamp(spec.lookX ?? 0, -1, 1) * eyeTravel;
+    let dy = -clamp(spec.lookY ?? 0, -1, 1) * eyeTravel;
+    const dist = Math.hypot(dx, dy);
+    if (dist > eyeTravel && dist > 0) {
+      dx = (dx / dist) * eyeTravel;
+      dy = (dy / dist) * eyeTravel;
+    }
+
+    // --- the eye's content, clipped by the lids -------------------------
+    // Every shape is drawn the same way now: a white backing, then the artwork
+    // (iris, heart or the shut line/3/arch), trimmed by the upper and lower lids.
+    // The shut artwork and a heart both reach past the eyeball, so they are only
+    // lid-clipped - but once the white is shown they are clipped to the eyeball
+    // too, so they stay inside it. Clipping the heart by its *lids* rather than by
+    // the eyeball is also what lets a raised lower lid cover it from below: the
+    // heart replaces the eyeball, but it must still sit behind both lids.
+    ctx.save();
+    if ((isShutShape || isHeart) && !showWhite) {
+      clipLids(ctx, eye, open, lowerLid, lidFlat, lidTilt * eye.towardNose);
+    } else if (!isHeart || open < 0.999 || showWhite) {
+      clipEye(ctx, eye, open, lowerLid, lidFlat, lidTilt * eye.towardNose);
+    }
+    if (!line && showWhite) fillCircle(ctx, eye.cx, eye.cy, eye.r, white);
+    if (isShutShape) {
+      ctx.translate(dx, dy);
+      drawShutEye(ctx, eye, shapeSpec, lineStyle, shapeScale, shapeHalfLimit);
+    } else if (isHeart) {
+      fillHeart(ctx, eye.cx + dx, eye.cy + dy, heartRadius, line ? lineColor : heartColor);
+    } else {
+      const irisX = eye.cx + dx + eye.towardNose * EYE_LAYOUT.irisInward;
+      const irisY = eye.cy + dy;
+      fillCircle(ctx, irisX, irisY, irisRadius, line ? lineColor : irisColor);
+      // 光彩 (the white glint) is per eye, falling back to the shared switch.
+      const highlightOn = spec.highlight != null ? spec.highlight === true : style.highlight !== false;
+      if (highlightOn) {
+        const hx = irisX + layout.towardNose * EYE_LAYOUT.highlightOffset.x * shapeScale;
+        const hy = irisY + EYE_LAYOUT.highlightOffset.y * shapeScale;
+        const hr = EYE_LAYOUT.highlightRadius * shapeScale;
+        if (line) {
+          // Punch the sparkle out of the iris rather than painting it white. On
+          // screen the paper behind shows through, and in the SVG export (which
+          // only sees alpha) it stays a hole in the pupil.
+          ctx.save();
+          ctx.globalCompositeOperation = 'destination-out';
+          fillCircle(ctx, hx, hy, hr, '#000000');
+          ctx.restore();
+        } else {
+          fillCircle(ctx, hx, hy, hr, white);
+        }
+      }
+    }
+    ctx.restore();
+
+    // Between the eyeball and the tear: the lens covers the eye, and a tear still
+    // falls in front of it.
+    drawGlasses(ctx, eye, line, style, limits);
+
+    drawTear();
+
+    // --- lid strokes ---------------------------------------------------
+    // Faded in as the lid starts to cover the eye, so opening the eye all the
+    // way leaves the clean original artwork with no extra line.
+    const lidFade = clamp((0.95 - open) / 0.1, 0, 1);
+    // The tilt is mirrored between the eyes, so a positive value reads the same
+    // way on both (an inward, angry-looking squint).
+    const eyeTilt = lidTilt * eye.towardNose;
+    // The upper lid line has to sit where the clip put it - and that is set by
+    // `open` alone, so it stays put when the lower lid moves.
+    const upperAmt = clamp(open, 0, 1);
+    // A heart is a replacement for the eyeball, not an eye behind a lid: it keeps
+    // no lower-lid line, which used to cut across the heart.
+    const showLowerLid = lowerLid > 0.01;
+    if (lidFade > 0.01 || showLowerLid) {
+      ctx.save();
+      if (eyeTilt) {
+        ctx.translate(eye.cx, eye.cy);
+        ctx.rotate((eyeTilt * Math.PI) / 180);
+        ctx.translate(-eye.cx, -eye.cy);
+      }
+      circlePath(ctx, eye.cx, eye.cy, eye.r);
+      ctx.clip();
+      ctx.globalAlpha = line ? 1 : lidFade;
+      ctx.strokeStyle = lineColor;
+      ctx.lineWidth = lidWidth;
+      if (lidFade > 0.01) {
+        lidPath(ctx, eye, upperAmt, false, lidFlat);
+        ctx.stroke();
+      }
+      if (showLowerLid) {
+        ctx.globalAlpha = line ? 1 : lowerLid;
+        lidPath(ctx, eye, lowerLid, true, lidFlat);
+        ctx.stroke();
+      }
+      ctx.restore();
+    }
+
+    // --- まつげ --------------------------------------------------------
+    // Short strokes flicking outwards from the upper-outer lid. They sit outside
+    // the eyeball, so they are drawn after the lid block and are not clipped.
+    if (spec.lashes ?? style.lashes) {
+      // The lashes ride the upper lid: they drop as the lid lowers (2r per unit of
+      // open) and tilt with まぶたの傾き, so they stay on the lid edge. まつげの位置
+      // slides them along the lid, まつげの角度 tilts the strokes themselves.
+      const outDir = -eye.towardNose;
+      const lidDrop = 2 * eye.r * (1 - open);
+      const lashPos = clamp(spec.lashPos ?? style.lashPos ?? 0, -80, 80);
+      const lashAngle = clamp(spec.lashAngle ?? style.lashAngle ?? 0, -80, 80) * outDir;
+      const a = (lashAngle * Math.PI) / 180;
+      const ca = Math.cos(a);
+      const sa = Math.sin(a);
+      ctx.save();
+      if (eyeTilt) {
+        ctx.translate(eye.cx, eye.cy);
+        ctx.rotate((eyeTilt * Math.PI) / 180);
+        ctx.translate(-eye.cx, -eye.cy);
+      }
+      for (const deg of EYE_LAYOUT.lash.angles) {
+        const t = ((deg + lashPos) * Math.PI) / 180;
+        const ux = outDir * Math.cos(t);
+        const uy = -Math.sin(t);
+        // The stroke points along the radial direction, tilted by まつげの角度.
+        const dx = ux * ca - uy * sa;
+        const dy = ux * sa + uy * ca;
+        const r0 = eye.r * 0.96;
+        const bx = eye.cx + ux * r0;
+        const by = eye.cy + uy * r0 + lidDrop - eye.r * EYE_LAYOUT.lash.raise;
+        strokePolyline(ctx, [
+          { x: bx, y: by },
+          { x: bx + dx * EYE_LAYOUT.lash.length, y: by + dy * EYE_LAYOUT.lash.length },
+        ], { color: lineColor, width: EYE_LAYOUT.lash.width });
+      }
+      ctx.restore();
+    }
+
+    // --- outline (line-art mode only) ---------------------------------
+    if (line) strokeCircle(ctx, eye.cx, eye.cy, eye.r, lineColor, lidWidth * 0.75);
+  }
+}
+
+/* -------------------------------------------------------------------- mouth */
+
+/**
+ * Draw the mouth into a 1024 x 380 canvas.
+ *
+ * @param {CanvasRenderingContext2D} ctx
+ * @param {object} p
+ * @param {'paint'|'line'} [p.mode]
+ */
+export function drawMouth(ctx, p) {
+  const mode = p.mode ?? 'paint';
+  const line = mode === 'line';
+  const L = MOUTH_LAYOUT;
+  const limits = p.limits ?? WINDOW_LIMITS;
+  // The artwork's real edges, in the artwork's own coordinates, with a margin
+  // kept clear. `top` is negative when the plate reaches above the window, which
+  // is the room a moved mouth has to work with.
+  const edgeLeft = limits.left + EDGE_MARGIN;
+  const edgeRight = limits.right - EDGE_MARGIN;
+  const edgeTop = limits.top + EDGE_MARGIN;
+  const edgeBottom = limits.bottom - EDGE_MARGIN;
+
+  const openAmount = clamp(p.open ?? 0, 0, 1);
+  const thickness = L.thickness * clamp(p.thickness ?? 1, 0.2, 3);
+  const cornerAmount = clamp(p.corners ?? 1, 0, 1.6);
+  // The corner strokes flick out past the ends of the chord, so the ends cannot
+  // use the whole canvas: a very wide mouth used to smear sideways off the plate.
+  const cornerReach = L.corner.toX * cornerAmount;
+  const halfChord = Math.min(
+    L.halfChord * clamp(p.width ?? 1, 0.2, 1.6),
+    Math.min(L.centreX - (edgeLeft + cornerReach), (edgeRight - cornerReach) - L.centreX),
+  );
+
+  // A negative smile bulges the line upwards, which reads as a frown.
+  const sagRaw = L.sag * clamp(p.smile ?? 1, -0.55, 1.4);
+  // A frown's middle is the highest point of the mouth, and that is exactly
+  // where the nose is in the way, so slide the whole mouth down until the curve
+  // is in the open. The push is worked out from the *base* position and the
+  // height slider is added afterwards: adding it first made the push cancel the
+  // slider exactly, which is why dragging ‟口の高さ” did nothing at all on a
+  // frowning mouth like むっと.
+  const base = L.chordY + Math.max(0, L.noseClear - (L.chordY + sagRaw));
+  let y0 = base + (p.offsetY ?? 0);
+  // The smile flattens slightly as the mouth opens, so the whole mouth keeps
+  // fitting inside the band the mouth plane actually shows.
+  let sag = sagRaw * (1 - L.openFlatten * openAmount);
+  // Keep the whole mark on the canvas. The corner strokes sit *above* the ends of
+  // the chord, so the allowance is not symmetric - padding the bottom by the
+  // corner's depth used to cost most of the height slider's travel.
+  const cornerRise = L.corner.toY * cornerAmount + thickness;
+  const bottomEdge = y0 + Math.max(0, sag) + thickness;
+  if (bottomEdge > edgeBottom) y0 -= bottomEdge - edgeBottom;
+  const topEdge = y0 + Math.min(0, sag) - cornerRise;
+  if (topEdge < edgeTop) y0 += edgeTop - topEdge;
+  const pivot = { x: L.centreX, y: y0 + sag * 0.5 };
+  const tilt = p.tilt ?? 0;
+
+  const strokeColor = line ? (p.line ?? '#3a2a4a') : (p.color ?? '#ff1a44');
+  const innerColor = p.innerColor ?? '#4a0f1e';
+  const tongueColor = line ? (p.line ?? '#3a2a4a') : (p.tongueColor ?? '#ff2d2d');
+
+  const left = { x: L.centreX - halfChord, y: y0 };
+  const right = { x: L.centreX + halfChord, y: y0 };
+  const lip = mouthControls(left, right, sag, L.sagBend);
+  const arc = cubicPoints(lip.p0, lip.p1, lip.p2, lip.p3, 96);
+
+  const tongueAmount = clamp(p.tongue ?? 1, 0, 1.6);
+
+  // --- a round "O" mouth (surprised, singing) ---------------------------
+  const roundAmount = clamp(p.round ?? 0, 0, 1);
+  if (roundAmount > 0.004) {
+    let ry = L.sag * 1.05 * L.roundScale * roundAmount;
+    // Keep the oval below the nose and inside the plate, but allow it to grow to
+    // roughly half the head. The stroke's share is a fixed margin, not the live
+    // `thickness`: otherwise 口の太さ would quietly resize the oval too.
+    ry = Math.min(ry, (edgeBottom - L.thickness / 2 - L.noseClear) / 2.1);
+    const rx = Math.min(ry * 1.15 * clamp(p.width ?? 1, 0.2, 1.6), L.halfChord * 1.4);
+    const centreY = clamp(y0 + sag * 0.5, L.noseClear + ry * 1.02, edgeBottom - L.thickness / 2 - ry * 1.02);
+    if (ry > 5) {
+      ctx.save();
+      ctx.translate(pivot.x, pivot.y);
+      ctx.rotate((tilt * Math.PI) / 180);
+      ctx.translate(-pivot.x, -pivot.y);
+      ctx.beginPath();
+      ctx.ellipse(L.centreX, centreY, rx, ry, 0, 0, TAU);
+      if (!line) {
+        ctx.fillStyle = innerColor;
+        ctx.fill();
+        if (tongueAmount > 0.01) {
+          ctx.beginPath();
+          ctx.ellipse(L.centreX, centreY + ry * 0.46, rx * 0.52, ry * 0.4, 0, 0, TAU);
+          ctx.fillStyle = tongueColor;
+          ctx.fill();
+        }
+      }
+      ctx.strokeStyle = strokeColor;
+      ctx.lineWidth = line ? thickness * 0.8 : thickness;
+      ctx.stroke();
+      ctx.restore();
+    }
+    return;
+  }
+
+  // The smile line is the upper lip. Opening the mouth drops the lower jaw
+  // below it, and the room for that is limited by the texture band the mouth
+  // plane shows - otherwise the jaw is silently clipped away.
+  // Everything has to fit in the part of the plane that faces the camera.
+  let rise = L.openRise * openAmount;
+  const budget = edgeBottom - thickness / 2 - y0;
+  if (sag + rise > budget) {
+    rise = Math.max(0, budget - Math.min(sag, budget));
+    if (sag + rise > budget) sag = Math.max(-80, budget - rise);
+  }
+  const jawCubic = mouthControls(left, right, sag + rise, L.sagBend);
+  const jaw = cubicPoints(jawCubic.p0, jawCubic.p1, jawCubic.p2, jawCubic.p3, 96);
+  const jawAt = (t) => cubicPoint(jawCubic.p0, jawCubic.p1, jawCubic.p2, jawCubic.p3, t);
+  const lipAt = (t) => cubicPoint(lip.p0, lip.p1, lip.p2, lip.p3, t);
+  const openShape = rotate([...arc, ...jaw.slice(1, -1).reverse()], pivot, tilt);
+
+  const tonguePos = clamp(p.tonguePos ?? L.tongue.pos, 0.05, 0.95);
+  const tongueWidth = L.tongue.width * tongueAmount;
+  const tongueHeight = L.tongue.height * tongueAmount;
+
+  /**
+   * The tongue, rising from `curve` to `height` above its middle.
+   *
+   * `pointAt(t)` is that same curve as a function of t, so the tongue's foot can
+   * sit along it without this needing to know what kind of curve it is.
+   */
+  function drawTongue(pointAt, curve, height) {
+    const arcLength = Math.max(1, chordLength(curve));
+    const dt = clamp(tongueWidth / 2 / arcLength, 0.01, 0.45);
+    const t0 = clamp(tonguePos - dt, 0, 1);
+    const t1 = clamp(tonguePos + dt, 0, 1);
+    const base = [];
+    for (let i = 0; i <= 16; i++) base.push(pointAt(t0 + ((t1 - t0) * i) / 16));
+    const mid = pointAt(clamp(tonguePos, 0, 1));
+    const half = tongueWidth / 2;
+    // The foot runs left to right; the crown comes back right to left, so the two
+    // together are already a closed ring.
+    const footRight = base[base.length - 1];
+    const footLeft = base[0];
+    const crown = [];
+    const steps = 26;
+    for (let i = 0; i <= steps; i++) {
+      const f = i / steps;
+      const dx = 1 - 2 * f;
+      const footY = footRight.y + (footLeft.y - footRight.y) * f;
+      crown.push({
+        x: mid.x + dx * half,
+        y: footY - height * (1 - Math.pow(Math.abs(dx), L.tongue.crown)),
+      });
+    }
+    const shaped = rotate([...base, ...crown], pivot, tilt);
+    if (line) {
+      strokePolyline(ctx, shaped, { color: strokeColor, width: thickness * 0.8, closed: true });
+      return;
+    }
+    tracePolyline(ctx, shaped, true);
+    ctx.fillStyle = tongueColor;
+    ctx.fill();
+  }
+
+  if (openAmount > 0.004) {
+    if (!line) fillPolygon(ctx, openShape, innerColor);
+    // The tongue rises from the lower lip *into* the mouth, so it has to arrive
+    // with the opening: at a hair's width the jaw curve is a sliver, and the
+    // tongue used to burst straight out of it and sit on the chin.
+    const tongueOpen = clamp((openAmount - 0.06) / 0.24, 0, 1);
+    if (tongueAmount > 0.01 && tongueOpen > 0.01) {
+      ctx.save();
+      tracePolyline(ctx, openShape, true);
+      ctx.clip();
+      // Inside an open mouth the tongue sits on the lower jaw.
+      drawTongue(jawAt, jaw, tongueHeight * tongueOpen * (1 + openAmount * 0.3));
+      ctx.restore();
+    }
+    // One outline around the whole mouth reads as lips; the smile stroke alone
+    // would leave the lower edge as a bare colour change.
+    strokePolyline(ctx, openShape, { color: strokeColor, width: thickness, closed: true });
+  } else {
+    // Closed lips - but the tongue still pokes over the lip. That is what the
+    // original artwork does (the mouth reads as a smile with the tongue showing,
+    // like ペコちゃん), and it is why a plain line looked wrong there. The lip
+    // line goes on afterwards, so the tongue comes out from under it.
+    if (tongueAmount > 0.01) {
+      drawTongue(lipAt, arc, tongueHeight);
+    }
+    strokePolyline(ctx, rotate(arc, pivot, tilt), { color: strokeColor, width: thickness });
+  }
+
+  // --- corner marks ---------------------------------------------------
+  if (cornerAmount > 0.01) {
+    const C = L.corner;
+    const cornerAngle = p.cornerAngle ?? 0;
+    for (const [end, side] of [[left, -1], [right, 1]]) {
+      const from = { x: end.x + C.fromX * side * cornerAmount, y: end.y - C.fromY * cornerAmount };
+      const to = { x: end.x - C.toX * side * cornerAmount, y: end.y - C.toY * cornerAmount };
+      // A smooth curve, not a three-point kink. `mid` is the control point, so it
+      // is pulled twice as far as the bow should reach; both corners bow the same
+      // way (downwards on screen), which is what the original artwork does.
+      const control = {
+        x: (from.x + to.x) / 2,
+        y: (from.y + to.y) / 2 + (C.curve ?? 26) * cornerAmount,
+      };
+      const curve = quadraticPoints(from, control, to, 16);
+      // `cornerAngle` tilts the whole mark around the mouth corner, mirrored so
+      // both sides move together.
+      const shaped = cornerAngle ? rotate(curve, end, cornerAngle * side) : curve;
+      strokePolyline(ctx, rotate(shaped, pivot, tilt), {
+        color: line ? strokeColor : (p.cornerColor ?? '#725497'),
+        // The *length* of the corner mark follows `corners`, but its thickness
+        // does not: `corners: 0.71` is the length that matches the original, and
+        // the original's stroke is the full thickness.
+        width: C.width,
+      });
+    }
+  }
+}
+
+/** Approximate length of a polyline. */
+function chordLength(points) {
+  let total = 0;
+  for (let i = 1; i < points.length; i++) {
+    total += Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+  }
+  return total;
+}