@kitlangton/knobs 0.4.0-next.3 → 0.4.0-next.5

package/dist/ui.js

@@ -595,6 +595,8 @@ var compareCss = `
 .knobs-cmp-stage{position:relative;flex:1;min-height:96px;overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_ku-cmp-stage);touch-action:pan-y;outline:none}
 .knobs-compare[data-frame="flat"] .knobs-cmp-stage{border-radius:0}
 .knobs-compare[data-mode="wipe"] .knobs-cmp-stage{cursor:ew-resize}
+/* Videos: a click on the stage plays and pauses. */
+.knobs-compare[data-video]:not([data-mode="wipe"],[data-zoomed]) .knobs-cmp-stage{cursor:pointer}
 /* Unzoomed, a finger still scrolls the page up and down; zoomed, the stage takes every gesture. */
 .knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:grab;touch-action:none}
 .knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:grabbing!important}
@@ -604,14 +606,28 @@ var compareCss = `
 .knobs-cmp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
 .knobs-cmp-media{position:absolute;left:0;top:0;display:block;max-width:none;margin:0;padding:0;border:0;object-fit:fill;transform-origin:0 0;pointer-events:none;will-change:transform}
 .knobs-compare[data-renderer="gpu"] .knobs-cmp-media{opacity:0}
+/* The media comes in with its first frames: a fade and a 4px blur on the default spring. */
+.knobs-cmp-canvas,.knobs-compare[data-renderer="dom"] .knobs-cmp-media{transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-compare:not([data-ready]) :is(.knobs-cmp-canvas,.knobs-cmp-media){opacity:0;filter:blur(4px)}
 /* Glass: what's behind shows through, blurred, on the knobs tokens. */
 .knobs-cmp-label,.knobs-cmp-zoom{background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
   box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim),0 2px 10px rgba(0,0,0,calc(.18 * var(--_k-shadow-k,1)))}
-.knobs-cmp-label{position:absolute;left:0;top:0;padding:1px 7px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg-2);white-space:nowrap;pointer-events:none;will-change:transform;transition:color calc(var(--_k-hover-out) * 1ms)}
-/* The wipe: a hairline down the line with a raised grip at the pointer's height; a wider strip
-   takes the hand and the keys (a slider). It fades with the mode; wiping, line and grip brighten. */
-.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform;transition:opacity .18s cubic-bezier(.4,0,1,1)}
-.knobs-cmp-handle[data-on]{opacity:1;pointer-events:auto;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
+/* ✗ Before · ✓ After: Before quieter (fg-3), After in full text. Neutral: no colour of its own. */
+.knobs-cmp-label{position:absolute;left:0;top:0;display:flex;align-items:center;gap:4px;padding:1px 7px 1px 5px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;font-weight:var(--_k-weight-label);
+  white-space:nowrap;pointer-events:none;will-change:transform}
+.knobs-cmp-label[data-side="before"]{color:var(--_k-fg-3)}
+.knobs-cmp-label[data-side="after"]{color:var(--_k-fg)}
+/* Fusing, the mark folds away and the label is its name. */
+.knobs-cmp-mark{flex:none;display:flex;justify-content:flex-end;overflow:hidden}
+.knobs-cmp-mark svg{display:block;flex:none;width:12px;height:12px}
+/* The fuse's seam: a blurred strip over where the sides meet, soft at both sides. */
+.knobs-cmp-seam{position:absolute;left:0;top:0;width:8px;height:0;opacity:0;pointer-events:none;will-change:transform,opacity;
+  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent)}
+/* The wipe: a hairline down the line with a raised grip in its middle (at the pointer's height
+   while dragged); a wider strip takes the hand and the keys (a slider). It fades in with the
+   fuse; wiping, line and grip brighten. */
+.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform,opacity}
+.knobs-cmp-handle[data-on]{pointer-events:auto}
 .knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:color-mix(in srgb,var(--_ku-cmp-line) 72%,transparent);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
 .knobs-compare[data-dragging] .knobs-cmp-handle::before{background:var(--_ku-cmp-line)}
 .knobs-cmp-grip{position:absolute;top:0;left:4px;width:16px;height:28px;border-radius:min(8px,calc(var(--_k-radius) * 999));background:var(--_k-bg-overlay);
@@ -643,6 +659,27 @@ var compareCss = `
 @media(prefers-reduced-motion:reduce){:is(.knobs-compare,.knobs-cmp-strip) :where(*,::before,::after){transition-duration:.12s!important}}
 `;
 
+// src/ui/player-css.ts
+var playerCss = `
+:where(.knobs-player,.knobs-player *){box-sizing:border-box}
+.knobs-ui.knobs-player{--_kp-stage:var(--_k-compare-stage);display:flex;flex-direction:column;gap:6px;width:100%;outline:none;
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-player,.knobs-ui.knobs-player[data-nested]{--_kp-stage:var(--k-compare-stage,transparent)}
+.knobs-player-frame{position:relative;width:100%;aspect-ratio:var(--kp-aspect,16/9);overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_kp-stage);cursor:pointer}
+.knobs-player[data-frame="flat"] .knobs-player-frame{border-radius:0}
+.knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;
+  opacity:0;filter:blur(4px);transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}
+.knobs-player-glyph{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;color:var(--_k-fg);pointer-events:none;
+  opacity:0;filter:blur(4px);scale:.96;
+  background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
+  box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim);
+  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),filter calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy),scale calc(var(--_k-motion-snappy-ms) * 1ms) var(--_k-motion-snappy)}
+.knobs-player-glyph svg{width:16px;height:16px}
+.knobs-player-glyph[data-flash]{opacity:1;filter:none;scale:1}
+.knobs-player-line{flex:none;min-height:0}
+`;
+
 // src/ui/overlay-css.ts
 var overlayCss = `
 .knobs-layers{position:fixed;inset:0;z-index:2147480005;pointer-events:none}
@@ -1331,6 +1368,22 @@ var init_schema = __esm(() => {
       source: css("var(--k-warn)"),
       doc: "Modified lines."
     },
+    {
+      name: "before",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg-3)"),
+      doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour."
+    },
+    {
+      name: "after",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg)"),
+      doc: "After in a comparison, and only After."
+    },
     {
       name: "series-1",
       tier: "semantic",
@@ -1421,6 +1474,150 @@ var init_schema = __esm(() => {
       source: value("288px"),
       doc: "Panel width."
     },
+    {
+      name: "space-inside",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("var(--k-unit)"),
+      doc: "Parts of one thing: an icon and its label, a meta line and its title."
+    },
+    {
+      name: "space-sibling",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 2)"),
+      doc: "Siblings in a group: buttons in a row, a list item's lines."
+    },
+    {
+      name: "space-title",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 3)"),
+      doc: "A heading and what it heads."
+    },
+    {
+      name: "space-group",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 12)"),
+      doc: "Groups inside a section (prose, video, diff), stacked media, feed items (a hairline in the middle)."
+    },
+    {
+      name: "space-section",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 24)"),
+      doc: "Sections of a page (the intro, the updates, each PR), a hairline in the middle."
+    },
+    {
+      name: "space-column",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 6)"),
+      doc: "Columns: a contents rail and the page, media side by side."
+    },
+    {
+      name: "pad-page",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 6)"),
+      doc: "A page's edge; 16px under 640px wide."
+    },
+    {
+      name: "pad-card",
+      tier: "semantic",
+      type: "length",
+      group: "Space",
+      source: css("calc(var(--k-unit) * 3)"),
+      doc: "Inside a card or popover."
+    },
+    {
+      name: "type-heading",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("20px"),
+      doc: "A page's title, weight 500."
+    },
+    {
+      name: "leading-heading",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("28px"),
+      doc: "Line height for type-heading."
+    },
+    {
+      name: "type-title",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Section titles (under their kicker), weight 500."
+    },
+    {
+      name: "leading-title",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("24px"),
+      doc: "Line height for type-title."
+    },
+    {
+      name: "type-body",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("13px"),
+      doc: "Prose, questions, list rows, step titles; 400, or 500 for emphasis."
+    },
+    {
+      name: "leading-body",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("20px"),
+      doc: "Line height for type-body."
+    },
+    {
+      name: "type-label",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("12px"),
+      doc: "Mono inside body text: code and paths."
+    },
+    {
+      name: "leading-label",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Line height for type-label."
+    },
+    {
+      name: "type-small",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("11px"),
+      doc: "Meta, controls, keys, timestamps; mono inside labels."
+    },
+    {
+      name: "leading-small",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: value("16px"),
+      doc: "Line height for type-small."
+    },
     {
       name: "font-size",
       tier: "semantic",
@@ -2385,16 +2582,18 @@ function injectTokens(doc) {
   style.textContent = rootCss;
   doc.head.append(style);
 }
-var ROOT_CLASS = "knobs-root", extras, spring, rootCss;
+var ROOT_CLASS = "knobs-root", extras, narrow, spring, rootCss;
 var init_root = __esm(() => {
   init_knobs();
   init_css();
   init_glide();
   init_motion();
   extras = `:where(.${ROOT_CLASS}){--_k-shadow-k:calc(var(--k-shadow-strength,calc(.48 - .32 * var(--_k-light,0))) / .48);--_k-glass-tone:var(--k-glass-tone,calc(.5 + .58 * var(--_k-light,0)));--_k-fill-base:var(--k-fill-base,var(--_k-fill-selected));--_k-fill-hover-mix:var(--k-fill-hover-mix,var(--k-fill-rest-mix,20%));--_k-reveal-ease:var(--k-ease,cubic-bezier(.2,.8,.2,1))}`;
+  narrow = `@media(max-width:639.98px){:where(.${ROOT_CLASS}){--_k-pad-page:var(--k-pad-page,calc(var(--_k-unit) * 4))}}`;
   spring = `:where(:root,:host){--k-fill-ease:${DEFAULT_LINEAR.easing};--k-fill-ms:${DEFAULT_LINEAR.ms}}`;
   rootCss = `${tokensCss(knobs)}
 ${extras}
+${narrow}
 ${spring}
 ${DRIVERS}
 ${motionCss}`;
@@ -2684,6 +2883,12 @@ var css2 = `
    --_ku-pane-bg and --_ku-pane-ring so this reaches them. */
 :where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui:not(.knobs-surface),.knobs-ui[data-nested]{--_ku-gap:var(--k-ui-gap,0px);--_ku-pane-bg:transparent;--_ku-pane-ring:none;
   --_ku-divider:var(--_k-split-gutter);--_kd-bg:transparent}
+/* What draws its box without those: a picker's card keeps its fill as the highlight but drops its
+   ring; a timeline's track drops its well for a hairline under the lane; an inline panel sheds its
+   card (--k-chrome 0). A full-window step is the one raised exception (it is the surface). */
+:is(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-picker-card,.knobs-ui[data-nested] .knobs-picker-card{box-shadow:none}
+:is(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-tl-track,.knobs-ui[data-nested] .knobs-tl-track{background:transparent;border-radius:0;box-shadow:inset 0 -1px 0 var(--_k-border-subtle)}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-panel.knobs-inline:not(.knobs-page){--k-chrome:0}
 /* Only the pieces' own elements take their type and resets: what you put in a pane is yours. */
 .knobs-ui{box-sizing:border-box}
 :where(.knobs-split>*,.knobs-pane-clip,.knobs-pane-inner,.knobs-pane-body,.knobs-pane-head,.knobs-pane-head *,.knobs-pane-rail,.knobs-pane-rail *,.knobs-tree,.knobs-tree *,.knobs-tree-ghost){box-sizing:border-box}
@@ -2909,8 +3114,6 @@ var css2 = `
 .knobs-tl-hover{position:absolute;left:0;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--_k-border-strong);transform:translateX(-100px);pointer-events:none;opacity:0;transition:opacity .15s}
 .knobs-tl-track:hover .knobs-tl-hover{opacity:1}
 .knobs-timeline[data-scrubbing] .knobs-tl-hover{opacity:0}
-@media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
-@media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
 .knobs-tl-tag{position:absolute;left:0;bottom:2px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none;opacity:0}
 .knobs-tl-tag[data-on]{opacity:1}
 /* The lane (variant: "lane"): one slim track of ticks under a compare or a video; markers are
@@ -2926,7 +3129,26 @@ var css2 = `
 .knobs-timeline[data-variant="lane"] .knobs-tl-head::before{top:0}
 .knobs-timeline[data-variant="lane"] .knobs-tl-head::after{content:none}
 .knobs-timeline[data-variant="lane"] .knobs-tl-tag{top:2px;bottom:auto}
-`, uiCss = () => aliased(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + selectionPillCss) + rolling_css_default, RESTYLED = ".knobs-ui,.knobs-panel,.knobs-chip,.knobs-notice", lookDefaults, tune = (s, m) => {
+/* The line (variant: "line"): a player's progress under its media. One 2px line, fg-3 with fg
+   filling it, a segment per chapter; it thickens under the pointer and while scrubbing. The
+   chapter and time under the pointer float over it; nothing else shows. */
+.knobs-ui.knobs-timeline[data-variant="line"]{height:auto;min-height:0;padding:0;gap:0}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:none}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{height:16px;overflow:visible;border-radius:var(--_k-radius);background:transparent;box-shadow:none;cursor:pointer}
+.knobs-timeline[data-variant="line"] :is(.knobs-tl-ruler,.knobs-tl-lane,.knobs-tl-hover,.knobs-tl-head,.knobs-tl-rlabel){display:none}
+.knobs-tl-segs{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none;transition:scale calc(var(--_k-hover-out) * 1ms) var(--_ku-ease)}
+.knobs-tl-seg{position:absolute;left:0;top:0;height:100%;overflow:hidden;border-radius:1px;background:var(--_k-fg-3);will-change:transform}
+.knobs-tl-seg-fill{position:absolute;inset:0;background:var(--_k-fg);transform-origin:0 0;will-change:transform}
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs,.knobs-timeline[data-variant="line"][data-scrubbing] .knobs-tl-segs{scale:1 2}
+.knobs-timeline[data-variant="line"] .knobs-tl-range{top:3px;bottom:3px;border-radius:3px}
+.knobs-timeline[data-variant="line"]:focus-visible .knobs-tl-track,.knobs-timeline[data-variant="line"][data-keyboard]:focus .knobs-tl-track{background:transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--_k-accent) 60%,transparent)}
+.knobs-timeline[data-variant="line"] .knobs-tl-tag{top:auto;bottom:calc(100% + 2px);display:flex;gap:6px;padding:0 6px;border-radius:calc(var(--_k-radius) * 999);background:color-mix(in srgb,var(--_k-bg) 72%,transparent);
+  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 .5px var(--_k-border)}
+.knobs-tl-tag-label{color:var(--_k-fg-2)}
+.knobs-tl-tag-label:empty{display:none}
+@media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
+@media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
+`, uiCss = () => aliased(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + playerCss + selectionPillCss) + rolling_css_default, RESTYLED = ".knobs-ui,.knobs-panel,.knobs-chip,.knobs-notice", lookDefaults, tune = (s, m) => {
   s.omega = m.omega;
   s.zeta = m.zeta;
   return s;
@@ -5305,6 +5527,17 @@ function currentMarker(markers, t, fps) {
       best = m;
   return best;
 }
+function minutes(t) {
+  const s = Math.max(0, Math.floor(t + 0.000001));
+  const h = Math.floor(s / 3600);
+  const m = Math.floor(s % 3600 / 60);
+  const ss = String(s % 60).padStart(2, "0");
+  return h > 0 ? `${h}:${String(m).padStart(2, "0")}:${ss}` : `${m}:${ss}`;
+}
+function chapterBounds(times, duration) {
+  const inside = times.filter((t) => t > 0.000001 && t < duration - 0.000001);
+  return [0, ...[...new Set(inside)].sort((a, b) => a - b), duration];
+}
 var SECOND_STEPS, FRAME_STEPS, toFrame = (t, fps) => Math.round(t * fps), frameTime = (t, fps) => Math.round(t * fps) / fps, round = (t) => Math.round(t * 1e6) / 1e6, CATCH_UP;
 var init_timeline_model = __esm(() => {
   SECOND_STEPS = [0.1, 0.2, 0.25, 0.5, 1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600];
@@ -5322,7 +5555,8 @@ function timeline(container, options) {
   let speed = options.speed ?? 1;
   let repeat = options.repeat ?? true;
   const arrows = options.arrows ?? "frames";
-  const lane = options.variant === "lane";
+  const line = options.variant === "line";
+  const lane = line || options.variant === "lane";
   let time = Math.min(duration, Math.max(0, options.time ?? 0));
   let playing = false;
   let markers = [...options.markers ?? []];
@@ -5357,7 +5591,7 @@ function timeline(container, options) {
   root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight , . Home End [ ] I O M");
   applyLook2(root, options);
   if (lane)
-    root.dataset.variant = "lane";
+    root.dataset.variant = line ? "line" : "lane";
   const transport = el("div", "knobs-tl-transport");
   const playBtn = el("button", "knobs-tl-play");
   playBtn.type = "button";
@@ -5370,6 +5604,10 @@ function timeline(container, options) {
   const hover = el("div", "knobs-tl-hover");
   const tag = el("span", "knobs-tl-tag");
   tag.setAttribute("aria-hidden", "true");
+  const tagLabel = el("span", "knobs-tl-tag-label");
+  const tagTime = el("span", "knobs-tl-tag-time");
+  tag.append(tagLabel, tagTime);
+  const segs = el("div", "knobs-tl-segs");
   const head = el("div", "knobs-tl-head");
   head.id = `${id}-head`;
   head.setAttribute("role", "slider");
@@ -5377,11 +5615,13 @@ function timeline(container, options) {
   head.setAttribute("aria-valuemin", "0");
   head.setAttribute("aria-valuemax", String(duration));
   track.append(canvas, markerLane, hover, head, tag);
+  if (line)
+    track.insertBefore(segs, markerLane);
   root.append(transport, track);
   container.append(root);
   let width = 1;
   let height = 1;
-  const fitView = () => clampView({ start: 0, span: duration }, duration, { pad: 0.02 });
+  const fitView = () => clampView({ start: 0, span: duration }, duration, { pad: line ? 0 : 0.02 });
   let target = fitView();
   const vStart = new Spring(target.start, INSTANT.omega, 1, 0.00001);
   const vSpan = new Spring(target.span, INSTANT.omega, 1, 0.00001);
@@ -5390,13 +5630,13 @@ function timeline(container, options) {
   const xOf = (t) => (t - vStart.x) * pxPerSec();
   const tOf = (x) => vStart.x + x / pxPerSec();
   const minSpan = () => Math.max(4 / fps, 0.05);
-  const retarget = (next, motion = INSTANT) => {
-    target = clampView(next, duration, { pad: 0.04, minSpan: minSpan() });
+  const retarget = (next, motion = INSTANT, hand = false) => {
+    target = clampView(next, duration, { pad: line ? 0 : 0.04, minSpan: minSpan() });
     for (const s of [vStart, vSpan]) {
       s.omega = motion.omega;
       s.zeta = motion.zeta;
     }
-    if (reducedMotion(win) && motion === CALM) {
+    if (hand || reducedMotion(win) && motion === CALM) {
       vStart.snap(target.start);
       vSpan.snap(target.span);
     } else {
@@ -5422,6 +5662,8 @@ function timeline(container, options) {
   };
   let drawn = "";
   const drawRuler = () => {
+    if (line)
+      return;
     const v = view();
     const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${height}:${units}:${fps}`;
     if (key === drawn)
@@ -5509,6 +5751,8 @@ function timeline(container, options) {
       n.title = `${m.label ? `${m.label} · ` : ""}${clock(m.time)}`;
     }
     placeMarkers();
+    if (line)
+      syncSegments();
   };
   const placeMarkers = () => {
     for (const m of markers) {
@@ -5517,6 +5761,36 @@ function timeline(container, options) {
         n.style.transform = `translateX(${xOf(m.time).toFixed(2)}px)`;
     }
   };
+  let bounds = [];
+  const segEls = [];
+  const syncSegments = () => {
+    bounds = chapterBounds(markers.map((m) => m.time), duration);
+    while (segEls.length > bounds.length - 1)
+      segEls.pop().el.remove();
+    while (segEls.length < bounds.length - 1) {
+      const n = el("i", "knobs-tl-seg");
+      const fill = el("b", "knobs-tl-seg-fill");
+      n.append(fill);
+      segs.append(n);
+      segEls.push({ el: n, fill });
+    }
+    placeSegments();
+  };
+  const placeSegments = () => {
+    if (!line)
+      return;
+    const last = segEls.length - 1;
+    segEls.forEach((s, i) => {
+      const a = bounds[i];
+      const b = bounds[i + 1];
+      const x0 = xOf(a) + (i > 0 ? SEG_GAP / 2 : 0);
+      const x1 = xOf(b) - (i < last ? SEG_GAP / 2 : 0);
+      s.el.style.transform = `translateX(${x0.toFixed(2)}px)`;
+      s.el.style.width = `${Math.max(0, x1 - x0).toFixed(2)}px`;
+      const k = Math.min(1, Math.max(0, (shownHead - a) / Math.max(0.000000001, b - a)));
+      s.fill.style.transform = `scaleX(${k.toFixed(4)})`;
+    });
+  };
   const syncRanges = () => {
     const keep = new Set(ranges.map((r) => r.id));
     for (const [k, n] of rangeEls)
@@ -5533,7 +5807,7 @@ function timeline(container, options) {
         b.dataset.edge = "end";
         const label = el("span", "knobs-tl-rlabel");
         n.append(label, a, b);
-        track.insertBefore(n, markerLane);
+        track.insertBefore(n, line ? segs : markerLane);
         rangeEls.set(r.id, n);
         if (built)
           enter(n);
@@ -5585,6 +5859,7 @@ function timeline(container, options) {
   let currentId = null;
   const renderHead = () => {
     head.style.transform = `translateX(${xOf(shownHead).toFixed(2)}px)`;
+    placeSegments();
     head.setAttribute("aria-valuenow", time.toFixed(3));
     head.setAttribute("aria-valuetext", `${time.toFixed(2)} seconds, frame ${toFrame(time, fps)}`);
     const cur = currentMarker(markers, time, fps)?.id ?? null;
@@ -5848,14 +6123,25 @@ function timeline(container, options) {
     setTime(s.t, "scrub", s.shown, press);
     root.toggleAttribute("data-stuck", s.stop !== null);
   };
+  let pointerX = null;
+  const zoomAtHand = (factor) => zoom(factor, pointerX === null ? time : target.start + pointerX / width * target.span);
   const showTag = (x) => {
     const at = Math.min(duration, Math.max(0, tOf(x)));
-    const text = `${at.toFixed(2)} s`;
-    if (tag.textContent !== text)
-      tag.textContent = text;
+    const text = line ? minutes(at) : `${at.toFixed(2)} s`;
+    if (tagTime.textContent !== text)
+      tagTime.textContent = text;
+    const label = line ? currentMarker(markers, at, fps)?.label ?? "" : "";
+    if (tagLabel.textContent !== label)
+      tagLabel.textContent = label;
     const cx = Math.min(width, Math.max(0, x));
-    const flip = cx > width - tag.offsetWidth - 12;
-    tag.style.transform = `translateX(${cx.toFixed(1)}px) translateX(${flip ? "calc(-100% - 4px)" : "4px"})`;
+    if (line) {
+      const w = tag.offsetWidth;
+      const left = Math.min(Math.max(0, width - w), Math.max(0, cx - w / 2));
+      tag.style.transform = `translateX(${left.toFixed(1)}px)`;
+    } else {
+      const flip = cx > width - tag.offsetWidth - 12;
+      tag.style.transform = `translateX(${cx.toFixed(1)}px) translateX(${flip ? "calc(-100% - 4px)" : "4px"})`;
+    }
     tag.dataset.on = "";
   };
   const hideTag = () => delete tag.dataset.on;
@@ -5916,6 +6202,7 @@ function timeline(container, options) {
   });
   track.addEventListener("pointermove", (e) => {
     const x = localX(e);
+    pointerX = x;
     hover.style.transform = `translateX(${x.toFixed(1)}px)`;
     if (!drag || drag.kind === "scrub")
       showTag(x);
@@ -5989,6 +6276,7 @@ function timeline(container, options) {
   track.addEventListener("pointercancel", endDrag);
   track.addEventListener("lostpointercapture", endDrag);
   track.addEventListener("pointerleave", () => {
+    pointerX = null;
     if (drag)
       return;
     hover.style.transform = "translateX(-100px)";
@@ -5996,7 +6284,7 @@ function timeline(container, options) {
   });
   track.addEventListener("dblclick", (e) => {
     if (lane)
-      return;
+      return fit();
     const markerEl = e.target.closest(".knobs-tl-marker");
     if (markerEl)
       return rename(markerEl.dataset.id);
@@ -6007,18 +6295,40 @@ function timeline(container, options) {
       rename(m.id);
   });
   track.addEventListener("wheel", (e) => {
-    if (lane)
+    const zooming = e.ctrlKey || e.metaKey;
+    if (zooming && pinching)
+      return e.preventDefault();
+    const sideways = Math.abs(e.deltaX) > Math.abs(e.deltaY);
+    if (lane && !zooming && !sideways)
       return;
     e.preventDefault();
     const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? height : 1;
-    if (e.ctrlKey || e.metaKey) {
+    if (zooming) {
       const at = target.start + localX(e) / width * target.span;
-      retarget(zoomView(target, Math.exp(-e.deltaY * scale * (e.ctrlKey ? 0.01 : 0.002)), at));
+      const k = Math.exp(-e.deltaY * scale * (e.ctrlKey ? 0.01 : 0.002));
+      retarget(zoomView(target, k, at), INSTANT, lane);
     } else {
-      const d = (Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : e.deltaY) * scale;
-      retarget({ ...target, start: target.start + d / width * target.span });
+      const d = (sideways ? e.deltaX : e.deltaY) * scale;
+      retarget({ ...target, start: target.start + d / width * target.span }, INSTANT, lane);
     }
   }, { passive: false });
+  let pinchScale = 1;
+  let pinching = false;
+  const onGesture = (e) => {
+    const g = e;
+    e.preventDefault();
+    if (e.type === "gesturestart")
+      pinchScale = 1;
+    pinching = e.type !== "gestureend";
+    if (e.type !== "gesturechange")
+      return;
+    const s = g.scale ?? 1;
+    const x = g.clientX !== undefined ? localX({ clientX: g.clientX }) : width / 2;
+    retarget(zoomView(target, s / pinchScale, target.start + x / width * target.span), INSTANT, true);
+    pinchScale = s;
+  };
+  for (const type of ["gesturestart", "gesturechange", "gestureend"])
+    track.addEventListener(type, onGesture);
   root.addEventListener("keydown", (e) => {
     if (e.target !== root || e.metaKey || e.ctrlKey) {
       if ((e.metaKey || e.ctrlKey) && (e.key === "=" || e.key === "-" || e.key === "0") && e.target === root) {
@@ -6026,7 +6336,7 @@ function timeline(container, options) {
         if (e.key === "0")
           fit();
         else
-          zoom(e.key === "=" ? 1.5 : 1 / 1.5);
+          zoomAtHand(e.key === "=" ? 1.5 : 1 / 1.5);
       }
       return;
     }
@@ -6108,18 +6418,12 @@ function timeline(container, options) {
         return;
       case "=":
       case "+":
-        if (lane)
-          return;
         claim();
-        return zoom(1.5);
+        return zoomAtHand(1.5);
       case "-":
-        if (lane)
-          return;
         claim();
-        return zoom(1 / 1.5);
+        return zoomAtHand(1 / 1.5);
       case "0":
-        if (lane)
-          return;
         claim();
         return fit();
     }
@@ -6335,7 +6639,7 @@ function timeline(container, options) {
   };
   return api;
 }
-var RULER = 22, INSTANT, CALM, GLIDE, uid2 = 0, PLAY = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z" fill="currentColor"/></svg>', PAUSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/><rect x="9.2" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/></svg>';
+var RULER = 22, SEG_GAP = 3, INSTANT, CALM, GLIDE, uid2 = 0, PLAY = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z" fill="currentColor"/></svg>', PAUSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/><rect x="9.2" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/></svg>';
 var init_timeline = __esm(() => {
   init_rgba();
   init_motion();
@@ -6407,15 +6711,28 @@ function compareLayout(box, before, after) {
   const shape = after.w > 0 && after.h > 0 ? after : before;
   const pair = letterbox({ w: shape.w * 2, h: shape.h }, box);
   const half = pair.w / 2;
+  const fused = { x: pair.x + half / 2, y: pair.y, w: half, h: pair.h };
   return {
     side: {
       before: letterbox(before, { x: pair.x, y: pair.y, w: half, h: pair.h }),
       after: letterbox(after, { x: pair.x + half, y: pair.y, w: half, h: pair.h }),
       split: pair.x + half
     },
-    overlay: { before: letterbox(before, box), after: letterbox(after, box) }
+    overlay: { before: letterbox(before, fused), after: letterbox(after, fused) }
   };
 }
+function fuseFrame(L, before, after, k, wipe) {
+  const t = Math.min(1, Math.max(0, k));
+  const o = L.overlay;
+  const left = Math.min(o.before.x, o.after.x);
+  const line = wipeX({ x: left, y: 0, w: Math.max(o.before.x + o.before.w, o.after.x + o.after.w) - left, h: 0 }, wipe);
+  const cut = L.side.split + (line - L.side.split) * t;
+  const contact = Math.max(0, Math.min(cut - after.x, before.x + before.w - cut));
+  const feather = Math.min(contact, 1 + FUSE.feather * Math.sin(Math.PI * t));
+  const overlap = before.x + before.w - after.x;
+  const seam = t > 0.001 && overlap >= 0 ? Math.min(1, Math.max(0, overlap / FUSE.seamFade)) * Math.min(1, t * 4) : 0;
+  return { cut, feather, seam, blur: t < 0.995 ? FUSE.blur * (1 - t) : 0 };
+}
 function clampZoom(r) {
   const w = Math.min(1, Math.max(1 / ZOOM_MAX, r.w));
   const u = Math.min(1 - w, Math.max(0, r.u));
@@ -6501,7 +6818,15 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), seekTime = (t, fps, duration) => frameMidpoint(frameOf(t, fps), fps, duration), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, splitHeight = (w, media) => media.w > 0 && media.h > 0 ? w / 2 * (media.h / media.w) : w / 2 * (9 / 16), ZOOM_FIT, ZOOM_MAX = 16, panBy = (r, dx, dy, base) => clampZoom({
+var ALL_MODES, MODE_KEYS, modeKey = (mode) => MODE_KEYS[mode].toUpperCase(), VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), lastFrame = (duration, fps) => Math.max(0, Math.ceil(duration * fps - 0.0001) - 1), seekTime = (t, fps, duration) => frameMidpoint(frameOf(t, fps), fps, duration), sameFrame = (a, b, fps) => frameOf(a, fps) === frameOf(b, fps), SEEK_IDLE, FUSE, labelFold = (fold, mark, blur = 3) => {
+  const f = Math.min(1, Math.max(0, fold));
+  const open = 1 - f;
+  return {
+    width: mark * open,
+    opacity: Math.min(1, Math.max(0, (open - 0.2) / 0.8)),
+    blur: blur * Math.min(1, Math.max(0, (f - 0.25) / 0.75))
+  };
+}, splitHeight = (w, media) => media.w > 0 && media.h > 0 ? w / 2 * (media.h / media.w) : w / 2 * (9 / 16), ZOOM_FIT, ZOOM_MAX = 16, panBy = (r, dx, dy, base) => clampZoom({
   u: r.u - dx / Math.max(1, base.w) * r.w,
   v: r.v - dy / Math.max(1, base.h) * r.h,
   w: r.w
@@ -6524,6 +6849,7 @@ var init_compare_model = __esm(() => {
   MODE_KEYS = { side: "s", wipe: "w", difference: "d" };
   VIDEO = /\.(mp4|m4v|mov|webm|ogv|mkv)$/i;
   SEEK_IDLE = { seeking: false, pending: null };
+  FUSE = { feather: 24, blur: 4, seamFade: 48 };
   ZOOM_FIT = { u: 0, v: 0, w: 1, h: 1 };
 });
 
@@ -7418,11 +7744,6 @@ fn pm(c: vec4f) -> vec4f { return vec4f(c.rgb * c.a, c.a); }
 
 fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f) -> vec4f {
   switch mode {
-    case 1u: {
-      let s = max(u.wipe.y, 0.5);
-      let m = smoothstep(u.wipe.x - s, u.wipe.x + s, p.x);
-      return pm(vec4f(mix(a.rgb, b.rgb, m), mix(a.a, b.a, m)));
-    }
     case 2u: {
       let d = abs(a.rgb - b.rgb);
       let h = smoothstep(u.diff.x, u.diff.x + 0.06, max(d.r, max(d.g, d.b)) * u.diff.y) * min(a.a, b.a);
@@ -7431,8 +7752,10 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f) -> vec4f {
     }
     default: {}
   }
-  // Side by side: each side in its own place, Before over After where they meet.
-  return vec4f(a.rgb * a.a + b.rgb * b.a * (1.0 - a.a), a.a + b.a * (1.0 - a.a));
+  // Side by side, fusing and wiping: Before over After, cut at the seam with its feather.
+  let s = max(u.wipe.y, 0.5);
+  let ka = a.a * (1.0 - smoothstep(u.wipe.x - s, u.wipe.x + s, p.x));
+  return vec4f(a.rgb * ka + b.rgb * b.a * (1.0 - ka), ka + b.a * (1.0 - ka));
 }
 
 @fragment fn fs(@builtin(position) q: vec4f) -> @location(0) vec4f {
@@ -7834,6 +8157,196 @@ var init_compare_strip = __esm(() => {
   DIFF = { w: 32, h: 18 };
 });
 
+// src/ui/player.ts
+function player(container, options) {
+  const doc = container.ownerDocument;
+  const el = (tag, cls) => {
+    const n = doc.createElement(tag);
+    n.className = cls;
+    return n;
+  };
+  const look = {
+    ...options.preset ? { preset: options.preset } : {},
+    ...options.theme ? { theme: options.theme } : {},
+    ...options.appearance ? { appearance: options.appearance } : {}
+  };
+  const root = el("div", "knobs-player");
+  root.setAttribute("role", "group");
+  root.setAttribute("aria-label", options.label ?? "Video");
+  applyLook2(root, options);
+  const frame = el("div", "knobs-player-frame");
+  frame.style.setProperty("--kp-aspect", String(options.aspect ?? 16 / 9));
+  const v = el("video", "knobs-player-media");
+  v.muted = options.muted ?? true;
+  v.defaultMuted = v.muted;
+  v.playsInline = true;
+  v.preload = "metadata";
+  v.setAttribute("playsinline", "");
+  if (options.poster)
+    v.poster = options.poster;
+  if (options.captions) {
+    const track = doc.createElement("track");
+    track.kind = "captions";
+    track.label = "Captions";
+    track.srclang = doc.documentElement.lang || "en";
+    track.default = true;
+    track.src = options.captions;
+    v.append(track);
+  }
+  const glyph = playGlyph(doc);
+  frame.append(v, glyph.element);
+  const host = el("div", "knobs-player-line");
+  root.append(frame, host);
+  container.append(root);
+  const markers = (options.chapters ?? []).map((c, i) => ({
+    id: c.id ?? `c${i}`,
+    time: c.start,
+    label: c.label
+  }));
+  const tl = timeline(host, {
+    ...look,
+    variant: "line",
+    duration: 1,
+    fps: options.fps ?? 30,
+    markers,
+    repeat: options.loop ?? true,
+    arrows: { step: 5, shift: 10 },
+    label: options.label ? `${options.label} time` : "Video time",
+    ...options.hints === false ? { hints: false } : {}
+  });
+  const onFrame = () => root.setAttribute("data-ready", "");
+  let pending = null;
+  const seekVideo = (t) => {
+    if (v.readyState < 1)
+      return;
+    if (v.seeking)
+      pending = t;
+    else
+      v.currentTime = t;
+  };
+  let reported = 0;
+  const onSeeked = () => {
+    if (pending !== null) {
+      const t = pending;
+      pending = null;
+      v.currentTime = t;
+      return;
+    }
+    if (!v.paused || tl.playing || Math.abs(v.currentTime - reported) < 0.1)
+      return;
+    reported = v.currentTime;
+    options.onSeek?.(reported);
+  };
+  const onMeta = () => {
+    onFrame();
+    if (v.videoWidth)
+      frame.style.setProperty("--kp-aspect", String(v.videoWidth / v.videoHeight));
+    if (Number.isFinite(v.duration))
+      tl.update({ duration: v.duration });
+  };
+  v.addEventListener("loadedmetadata", onMeta);
+  v.addEventListener("loadeddata", onFrame);
+  v.addEventListener("seeked", onSeeked);
+  const unlisten = tl.listen({
+    onSeek(t, source) {
+      if (source === "play") {
+        if (Math.abs(v.currentTime - t) > 0.25)
+          v.currentTime = t;
+        return;
+      }
+      if (Math.abs(v.currentTime - t) < 1 / (options.fps ?? 30))
+        return;
+      seekVideo(t);
+    },
+    onPlay(on) {
+      if (on)
+        v.play().catch(() => tl.pause());
+      else {
+        v.pause();
+        reported = tl.time;
+      }
+      root.toggleAttribute("data-playing", on);
+      options.onPlay?.(on, tl.time);
+    },
+    onScrub(on) {
+      if (on)
+        v.pause();
+    }
+  });
+  tl.drive(() => {
+    if (v.readyState < 1)
+      return Number.NaN;
+    if (v.seeking)
+      return tl.time;
+    return v.ended ? Number.POSITIVE_INFINITY : v.currentTime;
+  });
+  const onClick = (e) => {
+    if (e.button !== 0)
+      return;
+    tl.toggle();
+    glyph.flash(tl.playing);
+    tl.focus();
+  };
+  frame.addEventListener("click", onClick);
+  v.src = options.src;
+  const api = {
+    element: root,
+    video: v,
+    timeline: tl,
+    get time() {
+      return tl.time;
+    },
+    get playing() {
+      return tl.playing;
+    },
+    get duration() {
+      return Number.isFinite(v.duration) ? v.duration : 0;
+    },
+    play: () => tl.play(),
+    pause: () => tl.pause(),
+    toggle: () => tl.toggle(),
+    seek: (t, o) => tl.seek(t, o?.glide ? { glide: true } : undefined),
+    seekBy: (d) => tl.seek(Math.min(tl.duration, Math.max(0, tl.time + d)), { glide: true }),
+    focus: () => tl.focus(),
+    dispose() {
+      unlisten();
+      glyph.dispose();
+      tl.drive(null);
+      tl.dispose();
+      v.pause();
+      v.removeEventListener("loadedmetadata", onMeta);
+      v.removeEventListener("loadeddata", onFrame);
+      v.removeEventListener("seeked", onSeeked);
+      v.removeAttribute("src");
+      v.load();
+      root.remove();
+    }
+  };
+  return api;
+}
+function playGlyph(doc) {
+  const element = doc.createElement("span");
+  element.className = "knobs-player-glyph";
+  element.setAttribute("aria-hidden", "true");
+  let timer = 0;
+  const win = doc.defaultView;
+  return {
+    element,
+    flash(playing) {
+      element.innerHTML = playing ? PLAY : PAUSE;
+      element.setAttribute("data-flash", "");
+      win.clearTimeout(timer);
+      timer = win.setTimeout(() => element.removeAttribute("data-flash"), FLASH_MS);
+    },
+    dispose: () => win.clearTimeout(timer)
+  };
+}
+var FLASH_MS = 450;
+var init_player = __esm(() => {
+  init_look();
+  init_timeline();
+});
+
 // src/ui/compare.ts
 function compare(container, options) {
   const doc = container.ownerDocument;
@@ -7930,6 +8443,19 @@ function compare(container, options) {
   const labels = [el("div", "knobs-cmp-label"), el("div", "knobs-cmp-label")];
   labels[0].dataset.side = "before";
   labels[1].dataset.side = "after";
+  const setLabel = (index, text) => {
+    const l = labels[index];
+    if (!l.firstElementChild) {
+      const mark = el("span", "knobs-cmp-mark");
+      mark.innerHTML = icon(index === 0 ? "x" : "check", { small: true });
+      l.append(mark, el("span", "knobs-cmp-name"));
+    }
+    const name = l.lastElementChild;
+    if (name.textContent !== text)
+      name.textContent = text;
+  };
+  const seam = el("div", "knobs-cmp-seam");
+  seam.setAttribute("aria-hidden", "true");
   const handle = el("div", "knobs-cmp-handle");
   handle.setAttribute("role", "slider");
   handle.setAttribute("aria-label", "Wipe");
@@ -7939,7 +8465,8 @@ function compare(container, options) {
   grip.setAttribute("aria-hidden", "true");
   handle.append(grip);
   const note = el("div", "knobs-cmp-note");
-  stage.append(canvas, split, labels[0], labels[1], handle, zoomPill, note);
+  const glyph = playGlyph(doc);
+  stage.append(canvas, split, seam, labels[0], labels[1], handle, zoomPill, note, glyph.element);
   root.append(bar, stage);
   const wantsStrip = options.strip === true;
   let tl = bound;
@@ -7954,7 +8481,7 @@ function compare(container, options) {
     root.append(host);
     tl = timeline(host, {
       ...look,
-      variant: "lane",
+      variant: "line",
       duration: 1,
       fps: fps(),
       arrows: { step: 0.5, shift: 2 },
@@ -7975,12 +8502,13 @@ function compare(container, options) {
   let toMode = mode;
   const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
   let wipeCatching = false;
-  let gripY = null;
+  const gripAt = new Spring(0.5, LAYOUT.omega, LAYOUT.zeta, 0.0001);
   let loupeHeld = false;
   let pointer = null;
   let drag = null;
   const touches = new Map;
   let pinch = null;
+  let press = null;
   const zu = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
   const zv = new Spring(0, ZOOM.omega, ZOOM.zeta, 0.00001);
   const zw = new Spring(1, ZOOM.omega, ZOOM.zeta, 0.00001);
@@ -8267,6 +8795,8 @@ function compare(container, options) {
     for (const s of sides) {
       const st = s.el.style;
       st.clipPath = "";
+      st.maskImage = "";
+      st.setProperty("-webkit-mask-image", "");
       st.mixBlendMode = "";
       st.opacity = "";
       s.shown = null;
@@ -8493,43 +9023,65 @@ function compare(container, options) {
     viewSent = key;
     options.onView({ zoom: clampZoom(z), loop: l });
   };
-  const labelsIn = (m, r, wr, wx) => {
-    if (m === "wipe") {
-      const at = seamLabels(wx, wr.x, wr.x + wr.w, labelW[0], labelW[1], INSET);
-      return [at.before, at.after];
-    }
-    const ax = r.after.x + INSET + (r.after.w - labelW[1] - INSET * 2) * lay.x;
-    return [
-      { x: r.before.x + INSET, opacity: 1 },
-      { x: ax, opacity: 1 }
-    ];
+  const differenceWeight = () => {
+    const f = Math.min(1, Math.max(0, fade.x));
+    return (fromMode === "difference" ? 1 - f : 0) + (toMode === "difference" ? f : 0);
   };
   const placeGrip = (wr) => {
-    const gy = gripTop(gripY ?? wr.y + wr.h / 2, wr, GRIP.h) - wr.y;
+    const gy = gripTop(wr.y + gripAt.x * wr.h, wr, GRIP.h) - wr.y;
     grip.style.transform = `translate3d(0,${gy.toFixed(2)}px,0)`;
   };
+  let folded = 0;
   const draw = () => {
     dirty = false;
+    if (!root.hasAttribute("data-ready") && sides.every((x) => x.shown || x.failed))
+      root.setAttribute("data-ready", "");
     const r = layoutNow();
     const wr = wipeRect(r.L.overlay);
-    const wx = wipeX(wr, wipeLine.x);
-    const k = lay.x;
-    const a = labelsIn(fromMode, r, wr, wx);
-    const b = labelsIn(toMode, r, wr, wx);
-    const f = Math.min(1, Math.max(0, fade.x));
+    const k = Math.min(1, Math.max(0, lay.x));
+    const fu = fuseFrame(r.L, r.before, r.after, k, wipeLine.x);
+    const dw = differenceWeight();
+    const fusing = 1 - dw;
+    folded = k * fusing;
+    const fold = labelFold(folded, MARK.w);
+    const w = labelW.map((x) => x - (MARK.w - fold.width) - MARK.gap * folded);
+    const ride = seamLabels(fu.cut, r.before.x, r.after.x + r.after.w, w[0], w[1], INSET);
+    const apart = [r.before.x + INSET, r.after.x + INSET];
+    const corner = [r.before.x + INSET, r.after.x + r.after.w - labelW[1] - INSET];
+    const rides = [ride.before, ride.after];
     const ys = [r.before.y + INSET, r.after.y + INSET];
     for (const i of [0, 1]) {
-      const x = a[i].x + (b[i].x - a[i].x) * f;
-      labels[i].style.transform = `translate(${x.toFixed(2)}px,${ys[i].toFixed(2)}px)`;
-      labels[i].style.opacity = (a[i].opacity + (b[i].opacity - a[i].opacity) * f).toFixed(3);
+      const fused = apart[i] + (rides[i].x - apart[i]) * k;
+      const x = fused + (corner[i] - fused) * dw;
+      const opacity = (1 - k + k * rides[i].opacity) * fusing + dw;
+      const l = labels[i];
+      l.style.transform = `translate(${x.toFixed(2)}px,${ys[i].toFixed(2)}px)`;
+      l.style.opacity = opacity.toFixed(3);
+      const mark = l.firstElementChild;
+      if (mark) {
+        mark.style.width = `${fold.width.toFixed(2)}px`;
+        mark.style.marginRight = `${(-MARK.gap * folded).toFixed(2)}px`;
+        mark.style.opacity = fold.opacity.toFixed(3);
+        mark.style.filter = fold.blur > 0.05 ? `blur(${fold.blur.toFixed(2)}px)` : "";
+      }
     }
     const top = Math.min(r.L.side.before.y, r.L.side.after.y);
     split.style.transform = `translate(${r.L.side.split.toFixed(2)}px,${top.toFixed(2)}px)`;
     split.style.height = `${Math.max(0, r.L.side.after.h).toFixed(2)}px`;
     split.style.opacity = String(Math.max(0, 1 - k * 2));
+    const seamOn = fu.seam * fusing;
+    const blur = fu.blur > 0.01 ? `blur(${fu.blur.toFixed(2)}px)` : "none";
+    seam.style.transform = `translate(${fu.cut.toFixed(2)}px,${wr.y.toFixed(2)}px) translateX(-50%)`;
+    seam.style.width = `${(8 + 2 * fu.feather).toFixed(2)}px`;
+    seam.style.height = `${Math.max(0, wr.h).toFixed(2)}px`;
+    seam.style.opacity = (blur === "none" ? 0 : seamOn).toFixed(3);
+    seam.style.backdropFilter = blur;
+    seam.style.setProperty("-webkit-backdrop-filter", blur);
     handle.toggleAttribute("data-on", mode === "wipe");
-    handle.style.transform = `translate(${wx.toFixed(2)}px,${wr.y.toFixed(2)}px)`;
+    handle.style.transform = `translate(${fu.cut.toFixed(2)}px,${wr.y.toFixed(2)}px)`;
     handle.style.height = `${Math.max(0, wr.h).toFixed(2)}px`;
+    handle.style.opacity = seamOn.toFixed(3);
+    handle.style.filter = blur;
     placeGrip(wr);
     handle.setAttribute("aria-valuenow", String(Math.round(wipe * 100)));
     handle.setAttribute("aria-valuetext", `${Math.round(wipe * 100)}% Before`);
@@ -8542,24 +9094,27 @@ function compare(container, options) {
     if (pending)
       return;
     if (renderer === "dom") {
-      const place = (n, rect, clip, cutAt) => {
+      const cut = mode === "difference" ? null : fu;
+      const place = (n, rect, clip, before) => {
         const st = n.style;
         st.transform = `translate(${rect.x.toFixed(2)}px,${rect.y.toFixed(2)}px)`;
         st.width = `${rect.w.toFixed(2)}px`;
         st.height = `${rect.h.toFixed(2)}px`;
+        const edge = before && cut ? cut.cut + cut.feather : Number.POSITIVE_INFINITY;
         const t = Math.max(0, clip.y - rect.y);
         const l = Math.max(0, clip.x - rect.x);
         const b = Math.max(0, rect.y + rect.h - (clip.y + clip.h));
-        const right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, cutAt));
+        const right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, edge));
         st.clipPath = t + l + b + right > 0.01 ? `inset(${t.toFixed(2)}px ${right.toFixed(2)}px ${b.toFixed(2)}px ${l.toFixed(2)}px)` : "";
+        const mask = before && cut && cut.feather > 0.5 ? `linear-gradient(to right,#000 ${(cut.cut - cut.feather - rect.x).toFixed(2)}px,transparent ${(edge - rect.x).toFixed(2)}px)` : "";
+        st.maskImage = mask;
+        st.setProperty("-webkit-mask-image", mask);
       };
-      const cut = mode === "wipe" ? wx : Number.POSITIVE_INFINITY;
       for (const s of sides) {
         const rect = s.index === 0 ? r.zBefore : r.zAfter;
         const clip = s.index === 0 ? r.before : r.after;
-        const at = s.index === 0 ? cut : Number.POSITIVE_INFINITY;
-        place(s.el, rect, clip, at);
-        place(s.preview, rect, clip, at);
+        place(s.el, rect, clip, s.index === 0);
+        place(s.preview, rect, clip, s.index === 0);
         if (s.index !== 0)
           continue;
         for (const n of [s.el, s.preview])
@@ -8579,8 +9134,8 @@ function compare(container, options) {
       width: Math.max(1, Math.round(stageW * dpr)),
       height: Math.max(1, Math.round(stageH * dpr)),
       dpr,
-      wipeX: wx * dpr,
-      soft: 0.75 * dpr,
+      wipeX: fu.cut * dpr,
+      soft: Math.max(0.75, fu.feather) * dpr,
       from: MODE_INDEX[fromMode],
       to: MODE_INDEX[toMode],
       mix: Math.min(1, Math.max(0, fade.x)),
@@ -8607,6 +9162,7 @@ function compare(container, options) {
     zu.step(dt);
     zv.step(dt);
     zw.step(dt);
+    gripAt.step(dt);
     const playing = isPlaying();
     if (playing) {
       const m = master();
@@ -8637,11 +9193,9 @@ function compare(container, options) {
             pushFrame(s);
       }
     }
-    const moving = !lay.resting || !fade.resting || !zoomResting() || wipeCatching;
+    const moving = !lay.resting || !fade.resting || !zoomResting() || wipeCatching || !gripAt.resting;
     if (moving)
       dirty = true;
-    if (auto && !lay.resting)
-      fitHeight();
     if (dirty)
       draw();
     return playing || moving;
@@ -8667,13 +9221,7 @@ function compare(container, options) {
     zw.set(c.w);
     requestDraw();
   };
-  const autoHeight = (w) => {
-    const shape = sizeOf(sides[1]);
-    const side = splitHeight(w, shape);
-    const over = w * shape.h / shape.w;
-    const h = side + (over - side) * lay.x;
-    return Math.max(60, Math.min(win.innerHeight * 0.8, h));
-  };
+  const autoHeight = (w) => Math.max(60, Math.min(win.innerHeight * 0.8, splitHeight(w, sizeOf(sides[1]))));
   const fitHeight = () => {
     const h = autoHeight(stageW);
     if (Math.abs(h - stageH) < 0.25)
@@ -8685,7 +9233,8 @@ function compare(container, options) {
   const readColors = () => {
     const c = tokenColor(win.getComputedStyle(root), "--_ku-cmp-diff", [0.49, 0.81, 0.61, 1]);
     accent = [c[0], c[1], c[2]];
-    labelW = [labels[0].offsetWidth, labels[1].offsetWidth];
+    const unfold = MARK.w - labelFold(folded, MARK.w).width + MARK.gap * folded;
+    labelW = [labels[0].offsetWidth + unfold, labels[1].offsetWidth + unfold];
     requestDraw();
   };
   const measure = () => {
@@ -8776,8 +9325,10 @@ function compare(container, options) {
       root.focus({ preventScroll: true });
     touches.set(e.pointerId, p);
     stage.setPointerCapture(e.pointerId);
+    press = touches.size === 1 && mode !== "wipe" && master() ? p : null;
     if (touches.size >= 2) {
       e.preventDefault();
+      press = null;
       return startPinch();
     }
     if (mode === "wipe") {
@@ -8787,7 +9338,7 @@ function compare(container, options) {
       if (inside && (grab.onLine || !zoomed())) {
         drag = { kind: "wipe", offset: grab.offset };
         root.dataset.dragging = "";
-        gripY = p.y;
+        gripAt.snap(wr.h > 0 ? (p.y - wr.y) / wr.h : 0.5);
         e.preventDefault();
         if (!grab.onLine)
           setWipe(wipeAt(p.x, wr), true, true);
@@ -8805,6 +9356,8 @@ function compare(container, options) {
   const onMove = (e) => {
     const p = local(e);
     pointer = p;
+    if (press && Math.hypot(p.x - press.x, p.y - press.y) > 4)
+      press = null;
     if (touches.has(e.pointerId))
       touches.set(e.pointerId, p);
     if (pinch && touches.size >= 2) {
@@ -8818,14 +9371,12 @@ function compare(container, options) {
       pinch = { d, x: mid.x, y: mid.y };
       return handZoom(zoomAbout(panned, k, q.pu, q.pv));
     }
-    if (mode === "wipe" && drag?.kind !== "pan") {
-      gripY = p.y;
-      if (!drag)
-        placeGrip(wipeRect(layoutNow().L.overlay));
-    }
-    if (drag?.kind === "wipe")
-      setWipe(wipeAt(p.x, wipeRect(layoutNow().L.overlay), drag.offset));
-    else if (drag?.kind === "pan") {
+    if (drag?.kind === "wipe") {
+      const wr = wipeRect(layoutNow().L.overlay);
+      gripAt.snap(wr.h > 0 ? (p.y - wr.y) / wr.h : 0.5);
+      setWipe(wipeAt(p.x, wr, drag.offset));
+      placeGrip(wr);
+    } else if (drag?.kind === "pan") {
       const dx = p.x - drag.x;
       const dy = p.y - drag.y;
       drag.x = p.x;
@@ -8836,11 +9387,23 @@ function compare(container, options) {
       drawNow();
   };
   const endDrag = (e) => {
+    if (press && e.type === "pointerup") {
+      api.toggle();
+      glyph.flash(isPlaying());
+    }
+    press = null;
     touches.delete(e.pointerId);
     if (touches.size < 2)
       pinch = null;
     if (!drag)
       return;
+    if (drag.kind === "wipe") {
+      if (reducedMotion(win))
+        gripAt.snap(0.5);
+      else
+        gripAt.set(0.5);
+      requestDraw();
+    }
     drag = null;
     delete root.dataset.dragging;
     delete root.dataset.panning;
@@ -8990,8 +9553,9 @@ function compare(container, options) {
     old.el.replaceWith(s.el);
     old.preview.replaceWith(s.preview);
     sides[index] = s;
+    root.toggleAttribute("data-video", sides.some((x) => x.kind === "video"));
     note.textContent = "";
-    labels[index].textContent = labelOf(index);
+    setLabel(index, labelOf(index));
     if (near)
       loadSide(s);
     readColors();
@@ -9002,8 +9566,9 @@ function compare(container, options) {
   stage.insertBefore(sides[1].preview, labels[0]);
   stage.insertBefore(sides[0].el, labels[0]);
   stage.insertBefore(sides[0].preview, labels[0]);
-  labels[0].textContent = labelOf(0);
-  labels[1].textContent = labelOf(1);
+  setLabel(0, labelOf(0));
+  setLabel(1, labelOf(1));
+  root.toggleAttribute("data-video", sides.some((s) => s.kind === "video"));
   loupeBtn.setAttribute("aria-pressed", String(loupeOn));
   loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
   const modePill = modeList.length > 1 ? selectionPill(modes, {
@@ -9143,11 +9708,11 @@ function compare(container, options) {
       if (before)
         replace(0, before);
       else if (next.before)
-        labels[0].textContent = next.before.label ?? "Before";
+        setLabel(0, next.before.label ?? "Before");
       if (after)
         replace(1, after);
       else if (next.after)
-        labels[1].textContent = next.after.label ?? "After";
+        setLabel(1, next.after.label ?? "After");
       if (before || after)
         strip?.update({ ...before ? { before } : {}, ...after ? { after } : {} });
       if (next.before || next.after)
@@ -9204,6 +9769,7 @@ function compare(container, options) {
       disposed = true;
       loop.stop();
       modePill?.dispose();
+      glyph.dispose();
       win.clearTimeout(releaseTimer);
       ro.disconnect();
       nearIo?.disconnect();
@@ -9233,7 +9799,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var COMPARE_FFMPEG = "ffmpeg -i in.mov -vf fps=30 -fps_mode cfr -c:v libx264 -preset slow -crf 18 -g 15 -keyint_min 15 -pix_fmt yuv420p -movflags +faststart -an out.mp4", LAYOUT, FADE2, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
+var COMPARE_FFMPEG = "ffmpeg -i in.mov -vf fps=30 -fps_mode cfr -c:v libx264 -preset slow -crf 18 -g 15 -keyint_min 15 -pix_fmt yuv420p -movflags +faststart -an out.mp4", LAYOUT, FADE2, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, MARK, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
 var init_compare = __esm(() => {
   init_motion();
   init_page_hints();
@@ -9244,15 +9810,17 @@ var init_compare = __esm(() => {
   init_icons();
   init_look();
   init_rgba();
+  init_player();
   init_selection_pill();
   init_timeline();
   init_timeline_model();
-  LAYOUT = springMotion({ duration: 0.35, bounce: 0 });
+  LAYOUT = springMotion(SPRINGS.default);
   FADE2 = springMotion(SPRINGS.snappy);
   FADE_REDUCED = springMotion(FADE);
   ZOOM = springMotion({ duration: 0.35, bounce: 0 });
   WIPE_CATCH = springMotion(CATCH_UP);
   GRIP = { w: 16, h: 28 };
+  MARK = { w: 12, gap: 4 };
   LOUPE = { r: 88, zoom: 4 };
   MODE_LABEL = {
     side: { short: "Side", long: "Side by side" },
@@ -10298,19 +10866,19 @@ var init_diff_css = __esm(() => {
 @property --kd-fb{syntax:"<length>";inherits:false;initial-value:0px}
 :where(.knobs-ui){--kd-add:var(--_k-diff-add);--kd-del:var(--_k-diff-del);--kd-mod:var(--_k-diff-mod);--kd-move:var(--k-diff-move,var(--_k-info))}
 :where(.knobs-diff,.knobs-diff *,.knobs-diff-files,.knobs-diff-files *){box-sizing:border-box}
-.knobs-ui.knobs-diff{--kd-bg:var(--k-diff-bg,var(--_kd-bg,var(--_k-bg)));--kd-solid:var(--kd-fill,var(--kd-bg));--kd-line:calc(var(--_k-font-size) * 1.5);
+.knobs-ui.knobs-diff{--kd-bg:var(--k-diff-bg,var(--_kd-bg,transparent));--kd-solid:var(--kd-fill,var(--kd-bg));--kd-line:calc(var(--_k-font-size) * 1.5);
   --kd-i:var(--k-diff-inset,8px);--kd-x:var(--kd-i);--kd-inner:max(3px,calc(var(--_ku-pane-radius) - var(--kd-i)));--kd-ctl:var(--kd-inner);
   --kd-head:calc(var(--_k-control-h) + 2 * var(--kd-i));--kd-fade:var(--k-diff-fade,20px);--kd-stick:0px;position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
   background:var(--kd-bg);border-radius:var(--_ku-pane-radius);font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;
   letter-spacing:normal;word-spacing:normal;text-transform:none;-webkit-font-smoothing:antialiased}
 .knobs-ui.knobs-diff[data-height="auto"]{height:auto}
-.knobs-diff::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:var(--_ku-pane-ring);pointer-events:none}
+.knobs-ui.knobs-diff:not([data-on="pane"])::after{content:"";position:absolute;inset:0;z-index:3;box-shadow:inset 0 -1px 0 var(--_k-border-subtle);pointer-events:none}
 .knobs-diff [hidden],.knobs-diff-files [hidden]{display:none!important}
 .knobs-diff svg{display:block;flex:none}
-.knobs-ui.knobs-diff[data-on="surface"]{--kd-x:0px;--kd-head:var(--_k-control-h);--kd-ctl:var(--_k-radius)}
-/* The header's hairline shows only once the code has scrolled under it. */
+.knobs-ui.knobs-diff:not([data-on="pane"]){--kd-x:0px;--kd-head:calc(var(--_k-control-h) + var(--kd-i));--kd-ctl:var(--_k-radius)}
+/* A hairline under the header, firmer once the code has scrolled under it. */
 .knobs-diff-head{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:8px;height:var(--kd-head);padding:0 var(--kd-x);
-  box-shadow:inset 0 -1px transparent;transition:box-shadow .15s;user-select:none;-webkit-user-select:none}
+  box-shadow:inset 0 -1px var(--_k-border-subtle);transition:box-shadow .15s;user-select:none;-webkit-user-select:none}
 .knobs-diff[data-scrolled]>.knobs-diff-head{box-shadow:inset 0 -1px var(--_k-border)}
 .knobs-diff-path{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
 .knobs-diff-dir,.knobs-diff-from{color:var(--_k-fg-3)}
@@ -10348,6 +10916,15 @@ var init_diff_css = __esm(() => {
 .knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-diff-viewed svg{width:16px;height:16px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
+/* Narrow, the header gives up words before anything is cut off at its end: Viewed keeps its
+   check, then the counts' bar goes, then the counts; the path fades at its end throughout. */
+.knobs-diff-head,.knobs-diff-part-head{container-type:inline-size}
+@container (max-width:520px){
+  .knobs-diff-viewed-label{display:none}
+  .knobs-ui .knobs-diff-viewed{width:var(--_k-control-h);padding:0;justify-content:center}
+  .knobs-diff-counts .knobs-diff-bar{display:none}
+}
+@container (max-width:400px){.knobs-diff-counts{display:none}.knobs-diff-nav>span{min-width:2.6em}}
 .knobs-diff-path{transition:opacity .2s}
 .knobs-diff[data-viewed]>.knobs-diff-head .knobs-diff-path,.knobs-diff-part[data-viewed] .knobs-diff-path{opacity:.6}
 /* Split | Unified: the selection pill on the one picked, its bright copy the picked one's text; a
@@ -10412,24 +10989,26 @@ var init_diff_css = __esm(() => {
   --diffs-bg-deletion-number-override:color-mix(in srgb,var(--kd-del) 55%,var(--kd-solid));
   --diffs-bg-addition-emphasis-override:color-mix(in srgb,var(--kd-add) 22%,transparent);
   --diffs-bg-deletion-emphasis-override:color-mix(in srgb,var(--kd-del) 22%,transparent);
-  --diffs-bg-separator-override:color-mix(in srgb,var(--_k-fg) 4.5%,var(--kd-solid));
-  --diffs-bg-context-override:color-mix(in srgb,var(--_k-fg) 3%,var(--kd-solid));
-  --diffs-bg-buffer-override:color-mix(in srgb,var(--_k-fg) 3.5%,var(--kd-solid));
+  /* Unchanged lines and the folds between hunks sit on the void; only a split's missing lines
+     are faintly filled. */
+  --diffs-bg-separator-override:var(--kd-solid);
+  --diffs-bg-context-override:var(--kd-solid);
+  --diffs-bg-buffer-override:color-mix(in srgb,var(--_k-fg) 2.5%,var(--kd-solid));
   --diffs-bg-selection-override:var(--_k-accent);
   --diffs-fg-number-override:var(--_k-fg-3);
 }
-/* diffReview: one card, the file list a drawer at its left (its width springs; the list inside
-   is pinned to its right edge, so it slides out from under the diff), parted from the diff by a
-   hairline. The diff in it draws no card of its own. */
-.knobs-ui.knobs-diff-review{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border-radius:var(--_ku-pane-radius);background:var(--_ku-pane-bg);
+/* diffReview, on the void as the diff is: the file list a drawer at its left (its width springs;
+   the list inside is pinned to its right edge, so it slides out from under the diff), parted
+   from the diff by a hairline; one hairline runs under both headers and one under it all. */
+.knobs-ui.knobs-diff-review{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
   font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased}
-.knobs-diff-review::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:var(--_ku-pane-ring);pointer-events:none}
+.knobs-diff-review::after{content:"";position:absolute;inset:0;z-index:5;box-shadow:inset 0 -1px 0 var(--_k-border-subtle);pointer-events:none}
 :where(.knobs-diff-review,.knobs-diff-review *){box-sizing:border-box}
-.knobs-diff-drawer{position:relative;flex:none;width:0;height:100%;overflow:hidden;box-shadow:inset -1px 0 var(--_k-border)}
+.knobs-diff-drawer{position:relative;flex:none;width:0;height:100%;overflow:hidden;box-shadow:inset -1px 0 var(--_k-border-subtle)}
 .knobs-diff-drawer[data-shut]{visibility:hidden}
 .knobs-diff-drawer-in{position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column}
 .knobs-diff-drawer-head{flex:none;display:flex;align-items:center;gap:6px;height:calc(var(--_k-control-h) + 2 * var(--k-diff-inset,8px));padding:0 var(--k-diff-inset,8px) 0 calc(var(--_ku-row-x) + 8px);
-  user-select:none;-webkit-user-select:none}
+  box-shadow:inset 0 -1px var(--_k-border-subtle);user-select:none;-webkit-user-select:none}
 .knobs-diff-drawer-title{font-weight:var(--_k-weight-title)}
 .knobs-diff-drawer-count{color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-diff-drawer-in>.knobs-diff-files{flex:1;min-height:0;height:auto}
@@ -10441,10 +11020,11 @@ var init_diff_css = __esm(() => {
 .knobs-ui .knobs-diff-toggle[aria-pressed]:not(:hover,:focus-visible){background:transparent}
 /* diffReview's file list: a filter over a compact tree, a status letter, the counts and their
    bar on each file; one highlight glides to the file on show. Viewed files dim, with a tick. */
-.knobs-diff-files{--k-row:var(--k-diff-row,28px);display:flex;flex-direction:column;height:100%;min-height:0;padding-top:2px}
+.knobs-diff-files{--k-row:var(--k-diff-row,28px);display:flex;flex-direction:column;height:100%;min-height:0;padding-top:4px}
 .knobs-diff-filter{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:26px;margin:0 var(--_ku-row-x) 4px;padding:0 4px 0 8px;
-  border-radius:max(6px,var(--_ku-row-radius));background:var(--_ku-wash);color:var(--_k-fg-3);box-shadow:inset 0 0 0 1px transparent;transition:background .15s,box-shadow .15s}
-.knobs-diff-filter:focus-within{background:var(--_ku-wash-hi);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_k-accent) 45%,transparent)}
+  border-radius:max(6px,var(--_ku-row-radius));color:var(--_k-fg-3);box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .15s}
+/* The filter is a line of text, no box; focused, a hairline ring. */
+.knobs-diff-filter:focus-within{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_k-accent) 45%,transparent)}
 .knobs-diff-filter svg{width:12px;height:12px;flex:none}
 .knobs-ui .knobs-diff-filter>input{flex:1;min-width:0;height:100%;font:var(--_k-weight) var(--_k-font-size)/1 var(--_k-font);color:var(--_k-fg);caret-color:var(--_k-accent);background:transparent}
 .knobs-ui .knobs-diff-filter>input::placeholder{color:var(--_k-fg-3)}
@@ -11263,7 +11843,10 @@ function codeDiff(container, options) {
   const viewedToggle = () => {
     const b = make("button", "knobs-diff-viewed");
     b.type = "button";
-    b.append(make("span", ""), "Viewed");
+    const label = make("span", "knobs-diff-viewed-label");
+    label.textContent = "Viewed";
+    b.append(make("span", ""), label);
+    b.setAttribute("aria-label", "Viewed");
     return b;
   };
   const paintViewed = (b, on) => {
@@ -15962,6 +16545,7 @@ init_timeline();
 init_timeline_model();
 init_compare();
 init_compare_strip();
+init_player();
 init_compare_model();
 init_tree();
 init_tree_model();
@@ -19378,401 +19962,15 @@ function optionPicker(container, options) {
 // src/ui/walkthrough.ts
 init_motion();
 init_page_hints();
+init_icons();
 init_look();
+init_selection_pill();
 
-// src/ui/walkthrough-media.ts
-init_compare_model();
-init_glide();
-init_look();
-
-// src/ui/walkthrough-css.ts
+// src/ui/walkthrough-blocks.ts
 init_motion();
-var snappy3 = springCss(SPRINGS.snappy);
-var calm = springCss(SPRINGS.calm);
-var walkthroughCss = `
-:where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
-.knobs-ui.knobs-walkthrough{--kw-snappy:${snappy3.easing};--kw-snappy-ms:${snappy3.duration}ms;--kw-calm:${calm.easing};--kw-calm-ms:${calm.duration}ms;
-  --kw-text:var(--k-walkthrough-text,14px);--kw-measure:var(--k-walkthrough-measure,68ch);--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
-  --kw-card:var(--_ku-pane-bg);--kw-card-ring:var(--_ku-pane-ring);--kw-pad:16px;--kw-ink:var(--k-walkthrough-ink,#ff375f);
-  container:knobs-wt / inline-size;display:block;width:100%;color:var(--_k-fg);font:var(--_k-weight) var(--kw-text)/1.5 var(--_k-font);text-align:left;
-  letter-spacing:normal;-webkit-font-smoothing:antialiased}
-.knobs-walkthrough [hidden]{display:none!important}
-.knobs-walkthrough :is(h1,h2,h3,p){margin:0;font:inherit;letter-spacing:inherit}
-.knobs-walkthrough a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color .15s}
-.knobs-walkthrough a:hover{text-decoration-color:currentColor}
-.knobs-walkthrough code,.knobs-wt-slot code{font:calc(1em - 1px) var(--_k-mono);padding:1px 5px;border-radius:5px;background:var(--_k-fill)}
-:where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-step,button.knobs-wt-stitle,.knobs-wt-chapter){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
-  background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-
-/* ——— layout: the rail beside the column; one column where it's narrow ——— */
-.knobs-wt-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
-.knobs-wt-main{display:flex;flex-direction:column;gap:56px;min-width:0;max-width:1120px;padding-bottom:40vh}
-@container knobs-wt (max-width:880px){.knobs-wt-layout{grid-template-columns:minmax(0,1fr);gap:0}.knobs-wt-main{gap:44px}}
-
-/* ——— the page's head ——— */
-.knobs-wt-head{display:flex;flex-direction:column;gap:10px}
-.knobs-wt-title{font-size:calc(var(--kw-text) + 10px)!important;font-weight:var(--_k-weight-title)!important;line-height:1.2;letter-spacing:-.01em!important}
-.knobs-wt-summary{max-width:var(--kw-measure);color:var(--_k-fg-2)}
-.knobs-wt-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2px)}
-.knobs-wt-meta>span{display:inline-flex;gap:6px;white-space:nowrap}
-.knobs-wt-meta b{font-weight:var(--_k-weight);color:var(--_k-fg-2);font-family:var(--_k-mono);font-size:calc(1em - .5px)}
-
-/* ——— a section: a PR or topic ——— */
-.knobs-wt-section{display:flex;flex-direction:column;gap:14px;min-width:0}
-.knobs-wt-shead{display:flex;flex-direction:column;gap:6px;scroll-margin-top:16px}
-.knobs-wt-kicker{display:flex;align-items:center;gap:10px;font-size:calc(var(--kw-text) - 2px);color:var(--_k-fg-3)}
-.knobs-wt-kicker a{font-family:var(--_k-mono);color:var(--_k-fg-2);text-decoration:none}
-.knobs-wt-kicker a:hover{color:var(--_k-fg)}
-.knobs-wt-stitle{font-size:calc(var(--kw-text) + 4px)!important;font-weight:var(--_k-weight-title)!important;line-height:1.3}
-.knobs-wt-ssum{max-width:var(--kw-measure);color:var(--_k-fg-2)}
-.knobs-wt-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:999px;font-size:calc(var(--kw-text) - 3px);font-weight:var(--_k-weight-label);white-space:nowrap;
-  --kw-tone:var(--_k-fg-2);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
-.knobs-wt-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="good"]{--kw-tone:var(--kw-good)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="warn"]{--kw-tone:var(--_k-warn)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="bad"]{--kw-tone:var(--_k-danger)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="info"]{--kw-tone:var(--kw-info)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="dim"]{--kw-tone:var(--_k-fg-2)}
-
-/* ——— a step: one card ——— */
-.knobs-wt-step{position:relative;display:flex;flex-direction:column;gap:12px;padding:var(--kw-pad);border-radius:var(--_k-radius-panel);background:var(--kw-card);box-shadow:var(--kw-card-ring);
-  scroll-margin-top:16px;outline:none;container:knobs-wt-step / inline-size}
-.knobs-walkthrough[data-frame="flat"] .knobs-wt-step{box-shadow:inset 0 0 0 1px var(--_k-border)}
-.knobs-wt-step-head{display:flex;align-items:baseline;gap:10px;min-width:0}
-.knobs-wt-num{flex:none;font:var(--_k-weight) calc(var(--kw-text) - 2px)/1 var(--_k-mono);color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
-.knobs-wt-stepTitle{flex:1;min-width:0;font-weight:var(--_k-weight-title)!important}
-.knobs-wt-caption{max-width:var(--kw-measure);color:var(--_k-fg-2);margin-top:-6px!important}
-.knobs-wt-question{font-weight:var(--_k-weight-label)!important}
-/* The step Kit is on: its number lights, and its choices show their keys. */
-.knobs-wt-step[data-current] .knobs-wt-num{color:var(--_k-fg)}
-.knobs-wt-media{display:grid;grid-template-columns:repeat(var(--kw-n,1),minmax(0,1fr));gap:12px;min-width:0}
-@container knobs-wt-step (max-width:640px){.knobs-wt-media{grid-template-columns:minmax(0,1fr)}}
-
-/* ——— the feed: the agent's updates and answers, newest first, compact ——— */
-.knobs-wt-feed{margin-top:-24px}
-.knobs-wt-feed-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column}
-.knobs-wt-feed-list::-webkit-scrollbar{display:none}
-.knobs-wt-fi{display:grid;grid-template-columns:64px 56px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;font-size:calc(var(--kw-text) - 1px)}
-.knobs-wt-fi+.knobs-wt-fi{box-shadow:inset 0 1px 0 var(--_k-border)}
-.knobs-wt-fi-when{color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2.5px);font-variant-numeric:tabular-nums;white-space:nowrap}
-.knobs-wt-fi-kind{color:var(--_k-fg-2);font-size:calc(var(--kw-text) - 2.5px);font-weight:var(--_k-weight-label)}
-.knobs-wt-fi[data-kind="qa"] .knobs-wt-fi-kind{color:var(--kw-info)}
-.knobs-wt-fi-body{max-width:var(--kw-measure);color:var(--_k-fg)}
-.knobs-wt-fi-q{color:var(--_k-fg-2)}
-.knobs-wt-fi-q::before{content:"You asked: ";color:var(--_k-fg-3)}
-:where(.knobs-ui) :is(.knobs-wt-fi-step,.knobs-wt-steplink){all:revert;box-sizing:border-box;font:var(--_k-weight) calc(var(--k-walkthrough-text,14px) - 2.5px)/1 var(--_k-mono);color:var(--_k-fg-2);background:transparent;border:0;
-  padding:3px 6px;margin:0;border-radius:6px;cursor:pointer;outline:none;transition:background .15s,color .15s}
-.knobs-ui :is(.knobs-wt-fi-step,.knobs-wt-steplink):is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
-
-/* ——— a step's sent notes ——— */
-.knobs-wt-notes{display:flex;flex-direction:column}
-.knobs-wt-notes:empty{display:none}
-.knobs-wt-n{display:flex;align-items:flex-start;gap:10px;padding:6px 0;overflow:hidden;
-  transition:height var(--kw-snappy-ms) var(--kw-snappy),opacity var(--kw-snappy-ms) var(--kw-snappy),filter var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-n[data-entering]{opacity:0;filter:blur(3px)}
-.knobs-wt-n[data-leaving]{opacity:0;filter:blur(3px);padding-block:0}
-.knobs-wt-n+.knobs-wt-n{box-shadow:inset 0 1px 0 var(--_k-border)}
-.knobs-wt-n-meta{flex:none;min-width:44px;padding-top:2px;color:var(--_k-fg-3);font:var(--_k-weight) calc(var(--kw-text) - 2.5px)/1.4 var(--_k-mono);font-variant-numeric:tabular-nums}
-.knobs-wt-n-meta[data-seek]{cursor:pointer}
-.knobs-wt-n-meta[data-seek]:hover{color:var(--_k-fg)}
-.knobs-wt-n-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:calc(var(--kw-text) - 1px)}
-.knobs-wt-n-voice{height:30px;max-width:320px}
-.knobs-wt-n-ink{display:block;width:120px;max-height:80px;border-radius:6px;background:var(--_k-fill)}
-.knobs-wt-n-ink path{fill:none;stroke:var(--kw-ink);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
-
-/* ——— the note bar, docked at the bottom of the column ——— */
-.knobs-wt-dock{position:sticky;bottom:12px;z-index:40;margin-top:-24px}
-.knobs-wt-notebar{display:flex;flex-direction:column;gap:2px;padding:6px 6px 6px 14px;border-radius:calc(var(--_k-radius-panel) + 2px);background:var(--_k-bg);
-  box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay)}
-.knobs-wt-on{padding-top:3px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap;overflow:hidden;
-  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)}
-.knobs-wt-row{display:flex;align-items:flex-end;gap:4px}
-:where(.knobs-ui) :is(.knobs-wt-input,.knobs-wt-tool,.knobs-wt-x,.knobs-wt-back){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;
-  border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-ui .knobs-wt-input{flex:1;min-width:0;height:32px;max-height:140px;padding:6px 0;resize:none;color:var(--_k-fg);caret-color:var(--_k-accent);line-height:20px;font-size:var(--kw-text)}
-.knobs-ui .knobs-wt-input::placeholder{color:var(--_k-fg-3)}
-.knobs-wt-attach{display:flex;gap:4px;align-items:center;align-self:center}
-.knobs-wt-attach:empty{display:none}
-.knobs-wt-chip-a{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 9px;border-radius:999px;background:var(--_k-fill-selected);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap}
-.knobs-ui .knobs-wt-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--_k-fg-3);cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-x:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-wt-x svg{width:10px;height:10px}
-.knobs-ui .knobs-wt-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 8px;border-radius:calc(var(--_k-radius) + 2px);
-  color:var(--_k-fg-2);cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-tool:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-ui .knobs-wt-tool[aria-pressed="true"]{background:var(--_k-fill-selected);color:var(--_k-fg)}
-.knobs-wt-tool svg{width:15px;height:15px}
-.knobs-wt-rec{font-size:calc(var(--kw-text) - 2.5px);font-variant-numeric:tabular-nums}
-.knobs-wt-rec:empty{display:none}
-.knobs-ui .knobs-wt-tool[data-send]{color:var(--_k-fg-3)}
-.knobs-ui .knobs-wt-tool[data-send][data-ready]{background:var(--_k-accent);color:var(--_k-bg)}
-/* Back: in place over the bar for a few seconds after a note moves the page on. */
-.knobs-ui .knobs-wt-back{position:absolute;left:8px;bottom:calc(100% + 8px);height:28px;padding:0 12px;border-radius:999px;background:var(--_k-bg);color:var(--_k-fg);
-  box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font-size:calc(var(--kw-text) - 1.5px);font-weight:var(--_k-weight-label);cursor:pointer;
-  opacity:0;scale:.96;filter:blur(3px);pointer-events:none;transition:opacity .11s cubic-bezier(.4,0,1,1),scale .11s cubic-bezier(.4,0,1,1),filter .11s cubic-bezier(.4,0,1,1)}
-.knobs-ui .knobs-wt-back[data-on]{opacity:1;scale:1;filter:none;pointer-events:auto;transition:opacity .15s cubic-bezier(.2,.8,.2,1),scale .15s cubic-bezier(.2,.8,.2,1),filter .15s cubic-bezier(.2,.8,.2,1)}
-.knobs-ui .knobs-wt-back:hover{background:var(--_k-fill-selected)}
-
-/* ——— ink over a step's media ——— */
-.knobs-wt-media,.knobs-wt-options{position:relative}
-.knobs-wt-ink{position:absolute;inset:0;z-index:5;width:100%;height:100%;overflow:visible;pointer-events:none;touch-action:none}
-.knobs-wt-ink[data-on]{pointer-events:auto;cursor:crosshair}
-.knobs-wt-ink path{fill:none;stroke:var(--kw-ink);stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
-
-/* ——— full-window: the step over the page, its media filling it; its place held in the page ——— */
-.knobs-wt-scrim{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,var(--_k-bg-page) 82%,transparent);opacity:0;pointer-events:none}
-.knobs-wt-scrim[data-on]{pointer-events:auto}
-.knobs-wt-hold-card{flex:none}
-.knobs-wt-step[data-full]{position:fixed;z-index:35;margin:0;overflow:hidden;overscroll-behavior:contain;padding-bottom:84px;box-shadow:var(--kw-card-ring),var(--_k-shadow-overlay);background:var(--_k-bg)}
-.knobs-wt-step[data-full]>:not(.knobs-wt-media){flex:none}
-.knobs-wt-step[data-full] .knobs-wt-notes{display:none}
-.knobs-wt-step[data-full]>.knobs-wt-media{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
-.knobs-wt-step[data-full] .knobs-wt-slot{display:flex;flex-direction:column;min-height:0}
-.knobs-wt-step[data-full] .knobs-wt-body{flex:1;min-height:0}
-.knobs-wt-step[data-full] .knobs-wt-fit{height:100%;transition:none}
-.knobs-wt-step[data-full] .knobs-wt-frame{height:100%;aspect-ratio:auto}
-
-/* ——— a taste test: the options side by side, Kit's pick lit and the rest stepping back ——— */
-.knobs-wt-options{display:grid;grid-template-columns:repeat(var(--kw-n,2),minmax(0,1fr));gap:10px}
-@container knobs-wt-step (max-width:640px){.knobs-wt-options{grid-template-columns:minmax(0,1fr)}}
-.knobs-wt-option{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_ku-wash);
-  transition:background var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-option[data-picked]{background:color-mix(in srgb,var(--_k-accent) 12%,var(--_ku-wash))}
-.knobs-wt-option>:not(.knobs-wt-pick){transition:opacity var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-options[data-has-pick] .knobs-wt-option:not([data-picked])>:not(.knobs-wt-pick){opacity:.55}
-.knobs-ui .knobs-wt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:0 4px;border-radius:calc(var(--_k-radius) - 2px);cursor:pointer;color:var(--_k-fg-2);text-align:left}
-.knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){color:var(--_k-fg)}
-.knobs-wt-letter{flex:none;font:var(--_k-weight-title) calc(var(--kw-text) - 1px)/1 var(--_k-font);color:var(--_k-fg)}
-.knobs-wt-olabel{flex:1;min-width:0;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
-.knobs-wt-suggested{flex:none;font-size:calc(var(--kw-text) - 3px);color:var(--_k-fg-3)}
-.knobs-wt-check{flex:none;display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:var(--_k-fill);color:transparent;
-  transition:background var(--kw-snappy-ms) var(--kw-snappy),color var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-check svg{width:12px;height:12px}
-.knobs-wt-option[data-picked] .knobs-wt-check{background:var(--_k-accent);color:var(--_k-bg)}
-.knobs-wt-key{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:4px;background:var(--_k-fill);color:var(--_k-fg-3);
-  font:var(--_k-weight-label) calc(var(--kw-text) - 4px)/1 var(--_k-font);font-variant-numeric:tabular-nums;opacity:.5;transition:opacity .15s}
-.knobs-wt-step[data-current] .knobs-wt-key{opacity:1}
-.knobs-wt-ocap{color:var(--_k-fg-2);font-size:calc(var(--kw-text) - 1px);padding:0 4px}
-
-/* ——— the rail: progress, contents, export ——— */
-.knobs-wt-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 32px);min-height:0;font-size:calc(var(--kw-text) - 1.5px)}
-.knobs-wt-progress{display:flex;flex-direction:column;gap:7px}
-.knobs-wt-count{display:flex;align-items:baseline;justify-content:space-between;color:var(--_k-fg-2);font-variant-numeric:tabular-nums}
-.knobs-wt-count b{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
-.knobs-wt-bar{position:relative;height:4px;border-radius:2px;overflow:hidden;background:var(--_k-fill)}
-.knobs-wt-fill{position:absolute;inset:0;border-radius:inherit;background:var(--_k-accent);transform-origin:0 50%;transform:scaleX(var(--kw-done,0))}
-.knobs-walkthrough[data-settled] .knobs-wt-fill{transition:transform var(--kw-calm-ms) var(--kw-calm)}
-/* The contents: no box, one text spine for sections and steps (the steps' dots hang in the
-   gutter left of it), and one pill behind the current step that springs between rows. */
-.knobs-wt-toc{position:relative;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;margin:0 -8px;padding:0 0 8px}
-.knobs-wt-toc::-webkit-scrollbar{display:none}
-.knobs-wt-toc-section{display:block;padding:12px 8px 4px 26px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 3px);font-weight:var(--_k-weight-label);white-space:nowrap;overflow:hidden;
-  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)}
-.knobs-wt-toc-section:first-of-type{padding-top:2px}
-.knobs-wt-toc-mark{position:absolute;left:0;right:0;top:0;height:0;border-radius:calc(var(--_k-radius) - 1px);background:var(--_ku-wash-hi);pointer-events:none;opacity:0;will-change:transform}
-.knobs-wt-toc-mark[data-on]{opacity:1}
-.knobs-walkthrough[data-settled] .knobs-wt-toc-mark{transition:opacity .15s}
-.knobs-ui .knobs-wt-toc-step{position:relative;display:flex;align-items:center;width:100%;text-align:left;height:26px;padding:0 8px 0 26px;color:var(--_k-fg-2);cursor:pointer;white-space:nowrap}
-.knobs-ui .knobs-wt-toc-step:is(:hover,:focus-visible){color:var(--_k-fg)}
-.knobs-wt-toc-step[aria-current="step"]{color:var(--_k-fg)}
-.knobs-wt-toc-label{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)}
-/* A step's state: an open ring, a filled dot once answered, nothing to answer a faint ring. */
-.knobs-wt-toc-glyph{--kw-tone:var(--_k-fg-3);position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--kw-tone);
-  transition:background var(--kw-snappy-ms) var(--kw-snappy),box-shadow var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-toc-glyph[data-tone="accent"]{--kw-tone:var(--_k-accent)}
-.knobs-wt-toc-glyph[data-done]{background:var(--kw-tone)}
-.knobs-wt-toc-glyph[data-tone="none"]{box-shadow:inset 0 0 0 1px var(--_k-border)}
-.knobs-wt-actions{display:flex;flex-wrap:wrap;gap:4px}
-.knobs-ui .knobs-wt-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
-  transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-ui .knobs-wt-btn[data-primary]{background:var(--_k-fill-selected);color:var(--_k-fg)}
-.knobs-ui .knobs-wt-btn[data-primary]:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
-.knobs-wt-keys{color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 3px);line-height:1.6}
-.knobs-wt-keys kbd{font:inherit;color:var(--_k-fg-2)}
-/* Narrow: the rail becomes a bar along the top, with the progress and the export only. */
-@container knobs-wt (max-width:880px){
-  .knobs-wt-rail{z-index:4;flex-direction:row;align-items:center;gap:12px;max-height:none;margin:0 calc(var(--kw-pad) * -1) 20px;padding:8px var(--kw-pad);top:0;background:var(--_k-bg-page)}
-  .knobs-wt-progress{flex:1}.knobs-wt-toc,.knobs-wt-keys{display:none}
-  .knobs-wt-step,.knobs-wt-shead{scroll-margin-top:60px}
-}
-
-/* ——— media slots ——— */
-.knobs-ui.knobs-wt-slot{position:relative;min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);font:var(--_k-weight) var(--k-walkthrough-text,14px)/1.5 var(--_k-font);
-  --kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info))}
-.knobs-wt-slot-label{display:block;margin:0 0 6px 2px;font:var(--_k-weight-label) calc(var(--k-walkthrough-text,14px) - 3px)/1.3 var(--_k-font);color:var(--_k-fg-2);letter-spacing:.04em;text-transform:uppercase}
-/* A compare is exactly as tall as its pictures at this width, so there's no letterbox: the two
-   sides edge to edge (side) or one (overlaid), plus its mode bar, the timeline and their two gaps
-   (92 px), and the frame strip with its gap (158 px). */
-.knobs-wt-fit{width:100%;height:calc(100cqw / 2 / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
-.knobs-wt-fit[data-overlay]{height:calc(100cqw / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
-.knobs-wt-fit[data-strip]{--kw-chrome:158px}
-.knobs-wt-fit[data-settled]{transition:height var(--k-wt-calm-ms,${calm.duration}ms) ${calm.easing}}
-.knobs-wt-frame{position:relative;width:100%;overflow:hidden;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill);aspect-ratio:var(--kw-aspect,16/9)}
-.knobs-wt-frame>:is(video,img){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;border:0}
-.knobs-wt-frame[data-natural]{aspect-ratio:auto}
-.knobs-wt-frame[data-natural]>img{position:static;height:auto}
-.knobs-wt-code{margin:0;padding:12px 14px;max-height:420px;overflow:auto;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill);color:var(--_k-fg);
-  font:calc(var(--k-walkthrough-text,14px) - 2px)/1.55 var(--_k-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
-.knobs-wt-code[data-terminal]{white-space:pre-wrap;overflow-wrap:anywhere}
-.knobs-wt-prompt{color:var(--_k-fg-3);user-select:none;-webkit-user-select:none}
-.knobs-wt-cmd{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
-.knobs-wt-out{color:var(--_k-fg-2)}
-.knobs-wt-metric{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill)}
-.knobs-wt-mlabel{color:var(--_k-fg-2);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
-.knobs-wt-mvalue{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-wt-mfrom{color:var(--_k-fg-3);font-size:calc(var(--k-walkthrough-text,14px) + 2px)}
-.knobs-wt-mto{font-size:calc(var(--k-walkthrough-text,14px) + 12px);font-weight:var(--_k-weight-title);line-height:1}
-.knobs-wt-mof{color:var(--_k-fg-3)}
-.knobs-wt-mdelta{--kw-tone:var(--_k-fg-2);padding:1px 7px;border-radius:999px;font-size:calc(var(--k-walkthrough-text,14px) - 3px);font-weight:var(--_k-weight-label);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
-.knobs-wt-mdelta[data-tone="good"]{--kw-tone:var(--kw-good)}
-.knobs-wt-mdelta[data-tone="bad"]{--kw-tone:var(--_k-danger)}
-.knobs-wt-mtrack{position:relative;height:4px;border-radius:2px;background:color-mix(in srgb,var(--_k-fg) 8%,transparent)}
-.knobs-wt-mtrack>span{position:absolute;top:0;bottom:0;left:0;border-radius:inherit}
-.knobs-wt-mtrack>.knobs-wt-mafter{background:var(--_k-accent)}
-.knobs-wt-mtrack>.knobs-wt-mbefore{background:color-mix(in srgb,var(--_k-fg) 30%,transparent)}
-.knobs-wt-callout{--kw-tone:var(--kw-info);display:flex;gap:10px;padding:10px 14px;border-radius:calc(var(--_k-radius-panel) - 4px);background:color-mix(in srgb,var(--kw-tone) 11%,transparent);color:var(--_k-fg)}
-.knobs-wt-callout::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--kw-tone)}
-.knobs-wt-callout[data-tone="good"]{--kw-tone:var(--kw-good)}
-.knobs-wt-callout[data-tone="warn"]{--kw-tone:var(--_k-warn)}
-.knobs-wt-callout[data-tone="bad"]{--kw-tone:var(--_k-danger)}
-.knobs-wt-text{max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
-.knobs-wt-hold{border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill)}
-.knobs-wt-failed{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--_k-fg-3);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
-
-/* ——— data blocks: history, stack, table, chapters. On the step's card, so no card of their own:
-   hairlines and fills only. Tones read the status tokens; hover fades are the panel's own. ——— */
-:where(.knobs-wt-history,.knobs-wt-stack,.knobs-wt-table,.knobs-wt-chapters){--kw-t:var(--k-walkthrough-text,14px);--kw-line:calc(var(--kw-t) + 6px);--kw-rail:var(--_k-border-strong)}
-:where(.knobs-wt-slot) [data-tone="good"]{--kw-tone:var(--kw-good)}
-:where(.knobs-wt-slot) [data-tone="warn"]{--kw-tone:var(--_k-warn)}
-:where(.knobs-wt-slot) [data-tone="bad"]{--kw-tone:var(--_k-danger)}
-:where(.knobs-wt-slot) [data-tone="info"]{--kw-tone:var(--kw-info)}
-:where(.knobs-wt-slot) [data-tone="dim"]{--kw-tone:var(--_k-fg-3)}
-.knobs-wt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
-.knobs-ui .knobs-wt-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-2);font:var(--_k-weight) calc(var(--kw-t) - 3px)/1 var(--_k-mono);
-  text-decoration:none;white-space:nowrap;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui a.knobs-wt-tag:is(:hover,:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-
-/* A history: dates down the left, a spine of tone dots joined by a hairline (broken around each
-   dot), the event beside it. Inferred events take a ring for a dot and a dashed tag. */
-.knobs-wt-history{--kw-hy:calc(5px + var(--kw-line) / 2);display:flex;flex-direction:column;gap:18px;font-size:calc(var(--kw-t) - 1px);line-height:var(--kw-line);color:var(--_k-fg)}
-.knobs-wt-hgroup{display:flex;flex-direction:column;gap:6px;min-width:0}
-.knobs-wt-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
-.knobs-ui .knobs-wt-hheading{margin:0;font:var(--_k-weight-label) calc(var(--kw-t) - 3px)/1.3 var(--_k-font);letter-spacing:.04em;text-transform:uppercase;color:var(--_k-fg-2)}
-.knobs-wt-hsum{color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 2px);font-variant-numeric:tabular-nums}
-.knobs-wt-hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
-.knobs-wt-hev{display:grid;grid-template-columns:var(--kw-hw,11ch) 14px minmax(0,1fr);grid-template-areas:"when spine main";column-gap:10px;align-items:baseline;padding:5px 0}
-.knobs-wt-hwhen{grid-area:when;display:flex;flex-direction:column;min-width:0;font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
-.knobs-wt-hage{color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 3px);line-height:1.35}
-.knobs-wt-hspine{grid-area:spine;position:relative;align-self:stretch;margin-block:-5px}
-.knobs-wt-hspine::before,.knobs-wt-hspine::after{content:"";position:absolute;left:6.5px;width:1px;background:var(--kw-rail)}
-.knobs-wt-hspine::before{top:0;height:calc(var(--kw-hy) - 6px)}
-.knobs-wt-hspine::after{top:calc(var(--kw-hy) + 6px);bottom:0}
-.knobs-wt-hev:first-child .knobs-wt-hspine::before,.knobs-wt-hev:last-child .knobs-wt-hspine::after{content:none}
-.knobs-wt-hdot{position:absolute;left:3.5px;top:calc(var(--kw-hy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--kw-tone,var(--_k-fg-3))}
-.knobs-wt-hev[data-type="release"] .knobs-wt-hdot{border-radius:1.5px;rotate:45deg;scale:.9}
-.knobs-wt-hev[data-type="audit"] .knobs-wt-hdot{border-radius:1.5px}
-.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-hdot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--kw-tone,var(--_k-fg-3))}
-.knobs-wt-hmain{grid-area:main;display:flex;flex-direction:column;gap:2px;min-width:0}
-.knobs-wt-htitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
-.knobs-wt-prov{padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-3);font:var(--_k-weight) calc(var(--kw-t) - 3.5px)/18px var(--_k-mono);white-space:nowrap}
-.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-prov{background:transparent;color:var(--_k-warn);outline:1px dashed color-mix(in oklch,var(--_k-warn) 50%,transparent);outline-offset:-1px}
-.knobs-ui .knobs-wt-hdetail{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
-@container knobs-wt-slot (max-width:520px){
-  .knobs-wt-hev{grid-template-columns:14px minmax(0,1fr);grid-template-areas:"spine when" "spine main"}
-  .knobs-wt-hwhen{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
-}
-
-/* A stack: the trunk at the top, each PR hanging off the branch it merges into, rails drawn as a
-   git graph (solid, so where two meet they don't darken). A PR with a step goes there on a click. */
-.knobs-wt-stack{--kw-spt:7px;--kw-spb:7px;--kw-sy:calc(var(--kw-spt) + var(--kw-line) / 2);display:flex;flex-direction:column;font-size:calc(var(--kw-t) - 1px);line-height:var(--kw-line);color:var(--_k-fg)}
-.knobs-wt-srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:start;margin:0 -8px;padding:var(--kw-spt) 8px var(--kw-spb);
-  border-radius:max(0px,calc(var(--_k-radius-panel) - 8px));transition:background calc(var(--_k-hover-out) * 1ms)}
-.knobs-wt-srow[data-trunk]{--kw-spb:0px;grid-template-columns:auto minmax(0,1fr)}
-.knobs-wt-srow[data-go]{cursor:pointer}
-.knobs-wt-srow[data-go]:hover{background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-wt-lanes{display:flex;align-self:stretch;margin-block:calc(var(--kw-spt) * -1) calc(var(--kw-spb) * -1)}
-.knobs-wt-lane{position:relative;flex:none;width:16px}
-.knobs-wt-lane:is([data-rail="pass"],[data-rail="tee"],[data-down])::before{content:"";position:absolute;left:7.5px;top:0;bottom:0;width:1px;background:var(--kw-rail)}
-.knobs-wt-lane[data-down]::before{top:calc(var(--kw-sy) + 3.5px)}
-.knobs-wt-lane:is([data-rail="tee"],[data-rail="end"])::after{content:"";position:absolute;left:7.5px;top:0;width:13px;height:calc(var(--kw-sy) + .5px);border:solid var(--kw-rail);border-width:0 0 1px 1px;border-bottom-left-radius:6px}
-.knobs-wt-lane[data-rail="node"]::after{content:"";position:absolute;left:4.5px;top:calc(var(--kw-sy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--_k-fg-3)}
-.knobs-wt-srow[data-trunk] .knobs-wt-lane[data-rail="node"]::after{background:var(--_k-fg-2)}
-.knobs-wt-trunk{font:var(--_k-weight-label) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2)}
-.knobs-wt-smain{display:flex;flex-direction:column;gap:1px;min-width:0}
-.knobs-wt-sline{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
-.knobs-wt-sord{font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3);white-space:nowrap}
-.knobs-ui .knobs-wt-spr{font:var(--_k-weight-label) calc(var(--kw-t) - 1.5px)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2);text-decoration:none;white-space:nowrap}
-.knobs-ui a.knobs-wt-spr:is(:hover,:focus-visible){color:var(--_k-fg);text-decoration:underline}
-.knobs-ui .knobs-wt-stitle{font-weight:var(--_k-weight-label);line-height:var(--kw-line);color:var(--_k-fg);text-align:left}
-.knobs-ui button.knobs-wt-stitle{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui :is(.knobs-wt-srow[data-go]:hover button.knobs-wt-stitle,button.knobs-wt-stitle:focus-visible){text-decoration-color:color-mix(in oklch,currentColor 45%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-ui .knobs-wt-ssummary{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
-.knobs-wt-smeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;font:var(--_k-weight) calc(var(--kw-t) - 2px)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
-.knobs-wt-delta{display:inline-flex;gap:6px}
-.knobs-wt-add{color:var(--_k-diff-add)}
-.knobs-wt-del{color:var(--_k-diff-del)}
-.knobs-wt-sstatus{margin-top:calc((var(--kw-line) - 20px) / 2)}
-.knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr) auto}
-.knobs-wt-stack[data-flat] .knobs-wt-srow+.knobs-wt-srow{box-shadow:inset 0 1px 0 var(--_k-border)}
-@container knobs-wt-slot (max-width:520px){
-  .knobs-wt-srow:not([data-trunk]){grid-template-columns:auto minmax(0,1fr)}
-  .knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr)}
-  .knobs-wt-sstatus{grid-column:-2;justify-self:start;margin-top:4px}
-}
-
-/* A table: a real one, its head stuck while it scrolls, both ways; edges fade where there's more
-   (the top one under the head), and thin bars show on hover. */
-@property --kw-fade-l{syntax:"<number>";inherits:false;initial-value:1}
-@property --kw-fade-r{syntax:"<number>";inherits:false;initial-value:1}
-@keyframes kw-fade-l{from{--kw-fade-l:1}to{--kw-fade-l:0}}
-@keyframes kw-fade-r{from{--kw-fade-r:0}to{--kw-fade-r:1}}
-.knobs-wt-table{max-height:520px;overflow:auto;overscroll-behavior-x:contain;outline:none;scrollbar-width:thin;scrollbar-color:transparent transparent;
-  transition:scrollbar-color calc(var(--_k-hover-out) * 1ms)}
-.knobs-wt-table:is(:hover,:focus-visible){scrollbar-color:color-mix(in oklch,var(--_k-fg) 28%,transparent) transparent;transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-wt-table:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus);border-radius:calc(var(--_k-radius-panel) - 4px)}
-@supports (animation-timeline:scroll()){
-  .knobs-wt-table{animation:knobs-fade-a linear both,knobs-fade-b linear both,kw-fade-l linear both,kw-fade-r linear both;animation-duration:auto;
-    animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 24px,calc(100% - 24px) 100%,0 8px,calc(100% - 8px) 100%;
-    --kw-table-mask-y:linear-gradient(to bottom,#000 var(--kw-thead,0px),rgb(0 0 0/var(--knobs-fade-a)) var(--kw-thead,0px),#000 calc(var(--kw-thead,0px) + 20px),#000 calc(100% - 20px),rgb(0 0 0/var(--knobs-fade-b)));
-    --kw-table-mask-x:linear-gradient(to right,rgb(0 0 0/var(--kw-fade-l)),#000 24px,#000 calc(100% - 24px),rgb(0 0 0/var(--kw-fade-r)));
-    -webkit-mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);-webkit-mask-composite:source-in;mask-composite:intersect}
-}
-.knobs-wt-table table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:calc(var(--kw-t) - 1.5px);line-height:1.45;font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
-.knobs-wt-table caption{caption-side:bottom;padding-top:8px;text-align:left;color:var(--_k-fg-3);font-size:calc(var(--kw-t) - 2px)}
-.knobs-wt-table th{position:sticky;top:0;padding:0 12px 7px;text-align:left;vertical-align:bottom;font-weight:var(--_k-weight-label);font-size:calc(var(--kw-t) - 2.5px);color:var(--_k-fg-3);white-space:nowrap;
-  background:var(--_k-pane-bg);box-shadow:inset 0 -1px 0 var(--_k-border)}
-.knobs-wt-table td{padding:8px 12px;vertical-align:baseline;box-shadow:inset 0 -1px 0 var(--_k-border)}
-.knobs-wt-table tr:last-child td{box-shadow:none}
-.knobs-wt-table :is(th,td):first-child{padding-left:0}
-.knobs-wt-table :is(th,td):last-child{padding-right:0}
-.knobs-wt-table td:first-child{color:var(--_k-fg)}
-.knobs-wt-table [data-align="right"]{text-align:right}
-.knobs-wt-table [data-align="center"]{text-align:center}
-.knobs-wt-table td[data-mono]{font-family:var(--_k-mono);font-size:calc(var(--kw-t) - 2.5px);color:var(--_k-fg);white-space:nowrap}
-.knobs-wt-table td[data-long]{min-width:24ch}
-.knobs-wt-table td>.knobs-wt-steplink{margin-left:4px}
-.knobs-ui .knobs-wt-table a.knobs-wt-chip{text-decoration:none}
-.knobs-wt-ctone{color:var(--kw-tone)}
-
-/* Chapters: timestamp pills under a video; one highlight springs to the one playing. */
-.knobs-wt-chapters{position:relative;display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
-.knobs-wt-chapter-mark{position:absolute;left:0;top:0;width:0;border-radius:calc(var(--_k-radius) + 2px);background:var(--_k-fill-selected);opacity:0;pointer-events:none;will-change:transform;
-  transition:opacity calc(var(--_k-motion-snappy-ms) * 1ms)}
-.knobs-wt-chapter-mark[data-on]{opacity:1}
-.knobs-ui .knobs-wt-chapter{position:relative;display:inline-flex;align-items:baseline;gap:6px;height:26px;padding:0 10px 0 8px;border-radius:calc(var(--_k-radius) + 2px);color:var(--_k-fg-2);
-  font-size:calc(var(--kw-t) - 2px);line-height:26px;white-space:nowrap;cursor:pointer;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
-.knobs-ui .knobs-wt-chapter:hover{background:var(--_ku-wash);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
-.knobs-ui .knobs-wt-chapter[aria-current]{background:transparent;color:var(--_k-fg)}
-.knobs-ui .knobs-wt-chapter:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus)}
-.knobs-wt-chapter-time{font:var(--_k-weight) calc(var(--kw-t) - 3px)/1 var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
-.knobs-wt-chapter[aria-current] .knobs-wt-chapter-time{color:var(--_k-fg-2)}
-@media(prefers-reduced-motion:reduce){:is(.knobs-walkthrough,.knobs-wt-slot) :where(*,::before,::after){transition-duration:.15s!important;transition-property:opacity,background,color!important}}
-`;
-
-// src/ui/walkthrough-blocks.ts
-init_motion();
-init_look();
+init_icons();
+init_look();
+init_selection_pill();
 
 // src/ui/walkthrough-model.ts
 var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
@@ -19979,7 +20177,15 @@ function fillTable(m) {
         out[k] = fillCell(v);
     return out;
   });
-  return { kind: "table", columns, rows, ...m.caption ? { caption: m.caption } : {} };
+  const primary = columns.find((c) => c.key === m.primary)?.key ?? columns[0]?.key ?? "";
+  return {
+    kind: "table",
+    columns,
+    rows,
+    ...m.caption ? { caption: m.caption } : {},
+    stack: m.stack ?? "auto",
+    primary
+  };
 }
 function fillChapters(chapters) {
   const id = uniqueIds();
@@ -20052,6 +20258,8 @@ function normalizeWalkthrough(doc) {
         ...step.caption ? { caption: step.caption } : {},
         ...step.question ? { question: step.question } : {},
         media: list.map((m) => fillMedia(m, doc.base)),
+        columns: Math.max(1, Math.min(3, Math.round(step.columns ?? 1))),
+        ...step.more?.trim() ? { more: step.more.trim() } : {},
         options,
         ask
       };
@@ -20063,8 +20271,10 @@ function normalizeWalkthrough(doc) {
       id,
       title: s.title,
       ...link ? { link } : {},
+      ...typeof s.kicker === "string" && s.kicker.trim() ? { kicker: s.kicker.trim() } : {},
       ...s.status ? { status: s.status } : {},
       ...s.summary ? { summary: s.summary } : {},
+      ...s.more?.trim() ? { more: s.more.trim() } : {},
       steps: own
     };
   });
@@ -20073,30 +20283,95 @@ function normalizeWalkthrough(doc) {
     value
   }));
   const stepRef = (ref) => findStep(steps, ref)?.key ?? null;
+  const extra = (x) => ({
+    ...x.status?.trim() ? { status: x.status.trim() } : {},
+    trail: (x.trail ?? []).filter((t) => typeof t === "string" && t.trim())
+  });
   const feed = sortFeed([
-    ...(doc.updates ?? []).map((u) => ({ kind: "update", at: parseAt(u.at), text: u.text, step: stepRef(u.step) })),
+    ...(doc.updates ?? []).map((u) => ({
+      kind: "update",
+      at: parseAt(u.at),
+      text: u.text,
+      step: stepRef(u.step),
+      ...extra(u)
+    })),
     ...(doc.qa ?? []).map((x) => ({
       kind: "qa",
       at: parseAt(x.at),
       text: x.a,
       q: x.q,
-      step: stepRef(x.step)
+      step: stepRef(x.step),
+      ...extra(x)
     }))
   ]);
   return {
     id: doc.id,
     title: doc.title,
     ...doc.summary ? { summary: doc.summary } : {},
+    ...doc.more?.trim() ? { more: doc.more.trim() } : {},
     meta,
     feed,
     verdicts: ((doc.verdicts?.length) ? doc.verdicts : DEFAULT_VERDICTS).map((v) => ({
       id: slug(v),
       label: label(v)
     })),
-    sections,
-    steps
+    sections: withKickers(sections, doc.sections, doc.kickers),
+    steps,
+    prs: knownPRs(doc, sections),
+    ...repoOf(doc) ? { repo: repoOf(doc) } : {}
   };
 }
+var prNumber = (href) => /\/(?:pull|merge_requests)\/(\d+)(?:[/?#]|$)/.exec(href)?.[1] ?? null;
+var repoOf = (doc) => doc.repo?.trim().replace(/^https?:\/\/github\.com\//, "").replace(/\/+$/, "") || undefined;
+function knownPRs(doc, sections) {
+  const out = {};
+  const repo = repoOf(doc);
+  for (const s of sections) {
+    const n = s.link && prNumber(s.link.href);
+    if (n)
+      out[n] = { href: s.link.href.replace(/(\/pull\/\d+).*$/, "$1") };
+  }
+  for (const [k, pr] of Object.entries(doc.prs ?? {})) {
+    const n = k.replace(/^#/, "");
+    if (!/^\d+$/.test(n))
+      continue;
+    out[n] = { ...out[n], ...pr };
+  }
+  if (repo) {
+    for (const n of Object.keys(out))
+      if (!out[n].href)
+        out[n] = { ...out[n], href: `https://github.com/${repo}/pull/${n}` };
+  }
+  return out;
+}
+function findPR(prs, n, repo) {
+  const known = prs[n];
+  if (known)
+    return known;
+  return repo ? { href: `https://github.com/${repo}/pull/${n}` } : null;
+}
+var isPullRequest = (href) => /\/(?:pull|merge_requests)\/\d+(?:[/?#]|$)/.test(href);
+function withKickers(sections, source, kickers = "pr") {
+  if (kickers === false)
+    return [...sections];
+  const noun = typeof kickers === "object" ? kickers.noun.trim() : "PR";
+  const counted = typeof kickers === "object" ? sections : sections.filter((s) => s.link && isPullRequest(s.link.href));
+  return sections.map((s, i) => {
+    const own = source[i]?.kicker;
+    if (own !== undefined || s.kicker)
+      return s;
+    const at = counted.indexOf(s);
+    return at < 0 ? s : { ...s, kicker: `${noun} ${at + 1} of ${counted.length}`.trim() };
+  });
+}
+function tableStacks(stack, room, natural) {
+  if (stack !== "auto")
+    return stack === "always";
+  return room > 0 && natural > room + 1;
+}
+function noteBarReserve(bar, inset, gap) {
+  return Math.max(0, Math.ceil(bar)) + inset + gap;
+}
 function parseAt(at) {
   if (!at)
     return null;
@@ -20381,6 +20656,9 @@ function feedbackMarkdown(fb, verdicts) {
 `;
 }
 var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+function plainMarkdown(text) {
+  return text.replace(/\[([^\]\n]+)\]\([^)\s]+\)/g, "$1").replace(/`([^`\n]+)`/g, "$1").replace(/\*\*([^*\n]+)\*\*/g, "$1").replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, "$1$2").replace(/\s+/g, " ").trim();
+}
 function inlineMarkdown(text) {
   const codes = [];
   let s = text.replace(/`([^`\n]+)`/g, (_, c) => {
@@ -20401,6 +20679,10 @@ function inlineMarkdown(text) {
 }
 
 // src/ui/walkthrough-blocks.ts
+var GLYPH = {
+  go: icon("caretRight", { small: true }),
+  caret: icon("caretRight", { small: true })
+};
 var el = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
@@ -20430,9 +20712,10 @@ function stepButton(doc, ref, steps) {
   const s = ref && steps?.find(ref);
   if (!s || !steps)
     return null;
-  const b = text(doc, "button", "knobs-wt-steplink", s.number);
+  const b = el(doc, "button", "knobs-wt-steplink");
+  b.innerHTML = GLYPH.go;
   b.type = "button";
-  b.title = `Go to ${s.number} ${s.title}`;
+  b.title = `Go to “${s.title}”`;
   b.setAttribute("aria-label", b.title);
   b.addEventListener("click", (e) => {
     e.stopPropagation();
@@ -20557,7 +20840,7 @@ function mountStack(host, m, steps) {
     if (target && steps) {
       const title = text(doc, "button", "knobs-wt-stitle", it.title);
       title.type = "button";
-      title.title = `Go to ${target.number} ${target.title}`;
+      title.title = `Go to “${target.title}”`;
       title.addEventListener("click", (e) => {
         e.stopPropagation();
         steps.go(target.key);
@@ -20612,175 +20895,861 @@ function delta(doc, d) {
   s.setAttribute("aria-label", `${d.add} added, ${d.del} removed`);
   return s;
 }
-function mountTable(host, m, steps) {
-  const doc = host.ownerDocument;
-  const win = doc.defaultView;
-  const scroller = el(doc, "div", "knobs-wt-table");
-  const table = el(doc, "table");
-  if (m.caption)
-    table.append(text(doc, "caption", "", m.caption));
-  const head = el(doc, "thead");
-  const hr = el(doc, "tr");
-  for (const c of m.columns) {
-    const th = text(doc, "th", "", c.label);
-    th.scope = "col";
-    th.dataset.align = c.align;
-    hr.append(th);
-  }
-  head.append(hr);
-  const body = el(doc, "tbody");
-  for (const r of m.rows) {
-    const tr = el(doc, "tr");
-    for (const c of m.columns) {
-      const td = el(doc, "td");
-      td.dataset.align = c.align;
-      if (c.mono)
-        td.dataset.mono = "";
-      const cell = r[c.key];
-      if (cell) {
-        if (cell.text.length > 40 && !c.mono && !cell.code)
-          td.dataset.long = "";
-        let content;
-        if (cell.badge) {
-          content = link(doc, "knobs-wt-chip", cell.text, cell.href);
-          content.dataset.tone = cell.badge;
-        } else {
-          const inner = cell.code ? text(doc, "code", "", cell.text) : null;
-          if (cell.href) {
-            content = link(doc, "knobs-wt-clink", inner ? "" : cell.text, cell.href);
-            if (inner)
-              content.append(inner);
-          } else
-            content = inner ?? text(doc, "span", "", cell.text);
-          if (cell.tone) {
-            content.classList.add("knobs-wt-ctone");
-            content.dataset.tone = cell.tone;
-          }
-        }
-        td.append(content);
-        const go = stepButton(doc, cell.step, steps);
-        if (go)
-          td.append(go);
-      }
-      tr.append(td);
-    }
-    body.append(tr);
-  }
-  table.append(head, body);
-  scroller.append(table);
-  host.append(scroller);
-  const measure = () => {
-    scroller.style.setProperty("--kw-thead", `${head.offsetHeight}px`);
-    const scrolls = scroller.scrollWidth > scroller.clientWidth + 1 || scroller.scrollHeight > scroller.clientHeight + 1;
-    if (scrolls) {
-      scroller.tabIndex = 0;
-      scroller.setAttribute("role", "region");
-      scroller.setAttribute("aria-label", m.caption ?? "Table");
-    } else {
-      scroller.removeAttribute("tabindex");
-      scroller.removeAttribute("role");
-      scroller.removeAttribute("aria-label");
-    }
-  };
-  const ro = win && "ResizeObserver" in win ? new win.ResizeObserver(measure) : null;
-  ro?.observe(scroller);
-  measure();
-  return {
-    dispose: () => {
-      ro?.disconnect();
-      scroller.remove();
-    },
-    context: () => ({ kind: "table" })
-  };
+function cellContent(doc, into, cell, steps) {
+  let content;
+  if (cell.badge) {
+    content = link(doc, "knobs-wt-chip", cell.text, cell.href);
+    content.dataset.tone = cell.badge;
+  } else {
+    const inner = cell.code ? text(doc, "code", "", cell.text) : null;
+    if (cell.href) {
+      content = link(doc, "knobs-wt-clink", inner ? "" : cell.text, cell.href);
+      if (inner)
+        content.append(inner);
+    } else
+      content = inner ?? text(doc, "span", "", cell.text);
+    if (cell.tone) {
+      content.classList.add("knobs-wt-ctone");
+      content.dataset.tone = cell.tone;
+    }
+  }
+  into.append(content);
+  const go = stepButton(doc, cell.step, steps);
+  if (go)
+    into.append(go);
+}
+var cellAttrs = (td, c) => {
+  td.dataset.align = c.align;
+  if (c.mono)
+    td.dataset.mono = "";
+};
+function mountTable(host, m, steps) {
+  const doc = host.ownerDocument;
+  const win = doc.defaultView;
+  const box = el(doc, "div", "knobs-wt-tablebox");
+  const scroller = el(doc, "div", "knobs-wt-table");
+  const table = el(doc, "table");
+  if (m.caption)
+    table.append(text(doc, "caption", "", m.caption));
+  const head = el(doc, "thead");
+  const hr = el(doc, "tr");
+  for (const c of m.columns) {
+    const th = text(doc, "th", "", c.label);
+    th.scope = "col";
+    th.dataset.align = c.align;
+    hr.append(th);
+  }
+  head.append(hr);
+  const body = el(doc, "tbody");
+  for (const r of m.rows) {
+    const tr = el(doc, "tr");
+    for (const c of m.columns) {
+      const td = el(doc, "td");
+      cellAttrs(td, c);
+      const cell = r[c.key];
+      if (cell) {
+        if (cell.text.length > 40 && !c.mono && !cell.code)
+          td.dataset.long = "";
+        cellContent(doc, td, cell, steps);
+      }
+      tr.append(td);
+    }
+    body.append(tr);
+  }
+  table.append(head, body);
+  scroller.append(table);
+  const stack = el(doc, "div", "knobs-wt-tstack");
+  stack.setAttribute("role", "list");
+  if (m.caption)
+    stack.setAttribute("aria-label", m.caption);
+  const primary = m.columns.find((c) => c.key === m.primary) ?? m.columns[0];
+  for (const r of m.rows) {
+    const item = el(doc, "div", "knobs-wt-trow");
+    item.setAttribute("role", "listitem");
+    const title = el(doc, "div", "knobs-wt-ttitle");
+    if (primary) {
+      cellAttrs(title, primary);
+      const cell = r[primary.key];
+      if (cell)
+        cellContent(doc, title, cell, steps);
+    }
+    const line = el(doc, "div", "knobs-wt-tline");
+    line.append(title);
+    const badges = el(doc, "div", "knobs-wt-tbadges");
+    for (const c of m.columns) {
+      const cell = r[c.key];
+      if (c !== primary && cell?.badge)
+        cellContent(doc, badges, cell, steps);
+    }
+    if (badges.childNodes.length)
+      line.append(badges);
+    item.append(line);
+    const terms = el(doc, "dl", "knobs-wt-tterms");
+    for (const c of m.columns) {
+      if (c === primary)
+        continue;
+      const cell = r[c.key];
+      if (!cell || cell.text === "" || cell.badge)
+        continue;
+      const dd = el(doc, "dd");
+      cellAttrs(dd, c);
+      dd.removeAttribute("data-align");
+      cellContent(doc, dd, cell, steps);
+      terms.append(text(doc, "dt", "", c.label), dd);
+    }
+    if (terms.childNodes.length)
+      item.append(terms);
+    stack.append(item);
+  }
+  if (m.caption)
+    stack.append(text(doc, "p", "knobs-wt-tcaption", m.caption));
+  box.append(scroller, stack);
+  host.append(box);
+  let natural = 0;
+  const measureNatural = () => {
+    if (!box.isConnected)
+      return 0;
+    const was = box.dataset.stacked;
+    delete box.dataset.stacked;
+    box.dataset.measure = "";
+    const w = table.getBoundingClientRect().width;
+    delete box.dataset.measure;
+    if (was !== undefined)
+      box.dataset.stacked = was;
+    return w;
+  };
+  const measure = () => {
+    if (!natural)
+      natural = measureNatural();
+    const stacked = tableStacks(m.stack, box.clientWidth, natural);
+    box.toggleAttribute("data-stacked", stacked);
+    scroller.style.setProperty("--kw-thead", `${head.offsetHeight}px`);
+    const scrolls = !stacked && (scroller.scrollWidth > scroller.clientWidth + 1 || scroller.scrollHeight > scroller.clientHeight + 1);
+    if (scrolls) {
+      scroller.tabIndex = 0;
+      scroller.setAttribute("role", "region");
+      scroller.setAttribute("aria-label", m.caption ?? "Table");
+    } else {
+      scroller.removeAttribute("tabindex");
+      scroller.removeAttribute("role");
+      scroller.removeAttribute("aria-label");
+    }
+  };
+  if (m.stack === "always")
+    box.dataset.stacked = "";
+  const ro = win && "ResizeObserver" in win ? new win.ResizeObserver(measure) : null;
+  ro?.observe(box);
+  measure();
+  doc.fonts?.ready.then(() => {
+    if (!box.isConnected)
+      return;
+    natural = 0;
+    measure();
+  });
+  return {
+    dispose: () => {
+      ro?.disconnect();
+      box.remove();
+    },
+    context: () => ({ kind: "table" })
+  };
+}
+function chapterPills(host, chapters, io) {
+  const doc = host.ownerDocument;
+  const list = el(doc, "div", "knobs-wt-chapters");
+  list.setAttribute("role", "group");
+  list.setAttribute("aria-label", "Chapters");
+  let at = -2;
+  const rows = chapters.map((c, i) => {
+    const b = el(doc, "button", "knobs-wt-chapter");
+    b.type = "button";
+    b.append(text(doc, "span", "knobs-wt-chapter-n", String(i + 1)));
+    b.append(text(doc, "span", "knobs-wt-chapter-label", c.label));
+    b.append(text(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
+    b.addEventListener("click", () => {
+      io.onEvent?.({ what: "seek", time: Math.round(c.start * 100) / 100, detail: c.label });
+      io.seek(c.start);
+      select(i);
+    });
+    list.append(b);
+    return b;
+  });
+  host.append(list);
+  const pill = selectionPill(list, {
+    selected: () => rows[at] ?? null,
+    rows: () => rows
+  });
+  const select = (i) => {
+    if (i === at)
+      return;
+    at = i;
+    rows.forEach((b, k) => k === at ? b.setAttribute("aria-current", "true") : b.removeAttribute("aria-current"));
+    pill.update();
+  };
+  const sync = () => select(chapterAt(chapters, io.now()));
+  sync();
+  return {
+    sync,
+    get current() {
+      return chapters[at] ?? null;
+    },
+    dispose() {
+      pill.dispose();
+      list.remove();
+    }
+  };
+}
+function disclosure(host, options) {
+  const doc = host.ownerDocument;
+  const win = doc.defaultView;
+  let open = options.open === true;
+  const root = el(doc, "div", "knobs-wt-disc");
+  const toggle = el(doc, "button", "knobs-wt-disc-toggle");
+  toggle.type = "button";
+  toggle.innerHTML = GLYPH.caret;
+  toggle.append(text(doc, "span", "", options.label));
+  if (options.count !== undefined)
+    toggle.append(text(doc, "span", "knobs-wt-disc-count", String(options.count)));
+  const viewport = el(doc, "div", "knobs-wt-disc-body");
+  const content = el(doc, "div", "knobs-wt-disc-content");
+  content.append(options.content);
+  viewport.append(content);
+  root.append(toggle, viewport);
+  host.append(root);
+  const STATE = springMotion(SPRINGS.default);
+  const h = new Spring(0, STATE.omega, STATE.zeta, 0.25);
+  let full = 0;
+  const paint = (moving) => {
+    const k = full > 0 ? Math.max(0, Math.min(1, h.x / full)) : open ? 1 : 0;
+    viewport.style.height = !moving && open ? "" : `${Math.max(0, h.x).toFixed(2)}px`;
+    viewport.toggleAttribute("data-moving", moving);
+    content.style.opacity = (open ? Math.min(1, k * 1.25) : Math.max(0, k * 1.5 - 0.5)).toFixed(3);
+  };
+  const loop = frameLoop(win, (dt) => {
+    h.step(dt);
+    const moving = !h.resting;
+    paint(moving);
+    return moving;
+  });
+  const sync = () => {
+    root.toggleAttribute("data-open", open);
+    toggle.setAttribute("aria-expanded", String(open));
+    viewport.inert = !open;
+  };
+  sync();
+  h.snap(0);
+  paint(false);
+  if (open) {
+    viewport.style.height = "";
+    content.style.opacity = "1";
+  }
+  const api = {
+    element: root,
+    get open() {
+      return open;
+    },
+    toggle(next = !open) {
+      if (next === open)
+        return;
+      open = next;
+      sync();
+      full = content.offsetHeight;
+      if (reducedMotion(win)) {
+        loop.stop();
+        h.snap(open ? full : 0);
+        viewport.style.height = open ? "" : "0px";
+        content.style.opacity = open ? "1" : "0";
+        return;
+      }
+      if (h.resting)
+        h.snap(open ? 0 : full);
+      h.set(open ? full : 0);
+      paint(true);
+      loop.wake();
+    },
+    dispose() {
+      loop.stop();
+      root.remove();
+    }
+  };
+  toggle.addEventListener("click", () => api.toggle());
+  return api;
+}
+var PR_PATHS = {
+  pull: "M104,64A32,32,0,1,0,64,95v66a32,32,0,1,0,16,0V95A32.06,32.06,0,0,0,104,64ZM56,64A16,16,0,1,1,72,80,16,16,0,0,1,56,64ZM88,192a16,16,0,1,1-16-16A16,16,0,0,1,88,192Zm120-31V110.63a23.85,23.85,0,0,0-7-17L163.31,56H192a8,8,0,0,0,0-16H144a8,8,0,0,0-8,8V96a8,8,0,0,0,16,0V67.31L189.66,105a8,8,0,0,1,2.34,5.66V161a32,32,0,1,0,16,0Zm-8,47a16,16,0,1,1,16-16A16,16,0,0,1,200,208Z",
+  merge: "M208,112a32.05,32.05,0,0,0-30.69,23l-42.21-6a8,8,0,0,1-4.95-2.71L94.43,84.55A32,32,0,1,0,72,87v82a32,32,0,1,0,16,0V101.63l30,35a24,24,0,0,0,14.83,8.14l44,6.28A32,32,0,1,0,208,112ZM64,56A16,16,0,1,1,80,72,16,16,0,0,1,64,56ZM96,200a16,16,0,1,1-16-16A16,16,0,0,1,96,200Zm112-40a16,16,0,1,1,16-16A16,16,0,0,1,208,160Z"
+};
+var prGlyph = (merged) => `<svg class="knobs-icon" viewBox="0 0 256 256" width="12" height="12" fill="currentColor" aria-hidden="true" focusable="false"><path d="${merged ? PR_PATHS.merge : PR_PATHS.pull}"/></svg>`;
+var PR_STATE = { merged: "Merged", open: "Open", draft: "Draft", closed: "Closed" };
+function prChip(doc, n, pr) {
+  const chip = el(doc, pr.href ? "a" : "span", "knobs-wt-pr");
+  if (pr.href) {
+    chip.setAttribute("href", pr.href);
+    chip.setAttribute("target", "_blank");
+    chip.setAttribute("rel", "noreferrer");
+  }
+  if (pr.state)
+    chip.dataset.state = pr.state;
+  chip.innerHTML = prGlyph(pr.state === "merged");
+  chip.append(text(doc, "span", "", `#${n}`));
+  const tip = [`#${n}`, pr.title, pr.state ? PR_STATE[pr.state] : ""].filter(Boolean).join(" · ");
+  chip.title = tip;
+  chip.setAttribute("aria-label", `Pull request ${tip}`);
+  return chip;
+}
+var PR_URL = /^https?:\/\/[^/]+\/.+\/(?:pull|merge_requests)\/(\d+)\/?(?:[?#].*)?$/;
+var PR_REF = /(^|[^\w&/#])#(\d{3,7})\b/g;
+function linkPRs(root, find) {
+  const doc = root.ownerDocument;
+  for (const a of Array.from(root.querySelectorAll("a[href]"))) {
+    if (a.classList.contains("knobs-wt-pr") || a.closest(".knobs-wt-slot,button"))
+      continue;
+    const n = PR_URL.exec(a.getAttribute("href") ?? "")?.[1];
+    const words = a.textContent?.trim() ?? "";
+    if (!n || !(words === `#${n}` || words === n || words === a.getAttribute("href")))
+      continue;
+    a.replaceWith(prChip(doc, n, { href: a.href, ...find(n) }));
+  }
+  const walker = doc.createTreeWalker(root, 5);
+  const hits = [];
+  for (let t = walker.nextNode();t; t = walker.nextNode()) {
+    if (t.nodeType !== 3)
+      continue;
+    const p = t.parentElement;
+    if (!p || p.closest("a,code,pre,button,.knobs-wt-slot,.knobs-wt-pr"))
+      continue;
+    PR_REF.lastIndex = 0;
+    if (PR_REF.test(t.nodeValue ?? ""))
+      hits.push(t);
+  }
+  for (const t of hits) {
+    const value = t.nodeValue ?? "";
+    const frag = doc.createDocumentFragment();
+    let last = 0;
+    let changed = false;
+    PR_REF.lastIndex = 0;
+    for (let m = PR_REF.exec(value);m; m = PR_REF.exec(value)) {
+      const pr = find(m[2]);
+      if (!pr)
+        continue;
+      const at = m.index + m[1].length;
+      frag.append(value.slice(last, at), prChip(doc, m[2], pr));
+      last = at + m[2].length + 1;
+      changed = true;
+    }
+    if (!changed)
+      continue;
+    frag.append(value.slice(last));
+    t.replaceWith(frag);
+  }
+}
+
+// src/ui/walkthrough-media.ts
+init_compare_model();
+init_glide();
+init_icons();
+init_look();
+
+// src/ui/walkthrough-css.ts
+init_motion();
+var snappy3 = springCss(SPRINGS.snappy);
+var calm = springCss(SPRINGS.calm);
+var state = springCss(SPRINGS.default);
+var quick = springCss(FADE);
+var fade2 = "-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)";
+var walkthroughCss = `
+:where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
+.knobs-ui.knobs-walkthrough{--kw-snappy:${snappy3.easing};--kw-snappy-ms:${snappy3.duration}ms;--kw-calm:${calm.easing};--kw-calm-ms:${calm.duration}ms;--kw-state:${state.easing};--kw-state-ms:${state.duration}ms;--kw-quick:${quick.easing};--kw-quick-ms:${quick.duration}ms;
+  --kw-measure:var(--k-walkthrough-measure,68ch);--kw-width:var(--k-walkthrough-width,960px);--kw-rail-w:220px;--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
+  --kw-card:var(--_ku-pane-bg);--kw-card-ring:var(--_ku-pane-ring);--kw-under:var(--_k-bg-page);--kw-ink:var(--k-walkthrough-ink,#ff375f);--kw-strong:var(--_k-weight-label);
+  container:knobs-wt / inline-size;display:block;width:100%;color:var(--_k-fg);font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;text-align:left;
+  letter-spacing:normal;-webkit-font-smoothing:antialiased}
+.knobs-walkthrough [hidden]{display:none!important}
+/* (0,0,1): a host's element rules stop here, and every class rule below wins over it. */
+:where(.knobs-walkthrough) :is(h1,h2,h3,p,ol,ul,dl,dd){margin:0;font:inherit;letter-spacing:inherit}
+.knobs-walkthrough a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color .15s}
+.knobs-walkthrough a:hover{text-decoration-color:currentColor}
+.knobs-walkthrough code,.knobs-wt-slot code{font:var(--_k-type-label) var(--_k-mono);padding:1px 5px;border-radius:calc(var(--_k-radius) / 2);background:var(--_k-fill)}
+:where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-row,button.knobs-wt-stitle,.knobs-wt-chapter,.knobs-wt-disc-toggle){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
+  background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
+
+/* ——— layout: the contents rail sticky at the left edge (right if asked), and the column centred
+   in the room beside it, up to --kw-width: media take the column, prose stops at the measure.
+   One column where it's narrow ——— */
+.knobs-wt-layout{display:grid;grid-template-columns:var(--kw-rail-w) minmax(0,1fr);gap:var(--_k-space-column);align-items:start}
+.knobs-walkthrough[data-rail="right"] .knobs-wt-layout{grid-template-columns:minmax(0,1fr) var(--kw-rail-w)}
+.knobs-walkthrough[data-rail="right"] .knobs-wt-main{grid-column:1;grid-row:1}
+.knobs-walkthrough[data-rail="right"] .knobs-wt-rail{grid-column:2;grid-row:1}
+.knobs-walkthrough[data-rail="none"] .knobs-wt-layout{grid-template-columns:minmax(0,1fr)}
+.knobs-wt-main{justify-self:center;width:100%;max-width:var(--kw-width);display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0;padding-bottom:12px}
+/* The intro, the updates and each section: a section's room apart, the hairline in the middle. */
+.knobs-wt-flow{display:flex;flex-direction:column;gap:calc(var(--_k-space-section) / 2);min-width:0}
+.knobs-wt-flow>*+*{padding-top:calc(var(--_k-space-section) / 2);box-shadow:inset 0 1px 0 var(--_k-border-subtle)}
+@container knobs-wt (max-width:960px){.knobs-walkthrough[data-rail] .knobs-wt-layout{grid-template-columns:minmax(0,1fr);gap:var(--_k-space-title)}
+  .knobs-walkthrough[data-rail] .knobs-wt-layout>*{grid-column:auto;grid-row:auto}}
+
+/* ——— one line of facts: small, faint, joined by ·, its trailing edge fading ——— */
+.knobs-wt-metaline{display:flex;align-items:baseline;gap:var(--_k-space-inside);min-width:0;overflow:hidden;white-space:nowrap;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3);${fade2}}
+.knobs-wt-metaline>*{flex:none}
+.knobs-wt-metaline>*+*::before{content:"·";margin-right:var(--_k-space-inside);color:var(--_k-fg-3)}
+.knobs-walkthrough .knobs-wt-metaline a:not(.knobs-wt-pr){display:inline-flex;align-items:baseline;color:inherit;text-decoration:none;transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-walkthrough .knobs-wt-metaline a:not(.knobs-wt-pr):hover{color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-metaline svg{align-self:center;width:12px;height:12px;margin-left:2px}
+/* A pull request: a small chip, its state's icon and number in a quiet tint of the state (open
+   the success hue, merged the violet series, draft and closed neutral), its title on hover. */
+.knobs-ui .knobs-wt-pr{--kw-pr:var(--_k-fg-2);display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 5px 0 4px;margin:0 1px;border-radius:calc(var(--_k-radius) / 2);vertical-align:1px;
+  background:color-mix(in oklch,var(--kw-pr) 12%,transparent);color:var(--kw-pr);font:var(--_k-weight-label) var(--_k-type-small)/1 var(--_k-font);font-variant-numeric:tabular-nums;white-space:nowrap;text-decoration:none;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-pr[data-state="open"]{--kw-pr:color-mix(in oklch,var(--_k-ok) 60%,var(--_k-fg-2))}
+.knobs-ui .knobs-wt-pr[data-state="merged"]{--kw-pr:color-mix(in oklch,var(--_k-series-5) 60%,var(--_k-fg-2))}
+.knobs-ui .knobs-wt-pr:is([data-state="draft"],[data-state="closed"]){--kw-pr:var(--_k-fg-3)}
+.knobs-ui a.knobs-wt-pr:is(:hover,:focus-visible){background:color-mix(in oklch,var(--kw-pr) 22%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-pr svg{flex:none}
+.knobs-wt-metaline .knobs-wt-pr{align-self:center;margin:0}
+.knobs-wt-kicker-lead{color:var(--_k-fg);font-weight:var(--kw-strong)}
+.knobs-wt-metaline [data-status="on"]{color:var(--_k-fg)}
+.knobs-wt-metaline [data-status="warn"]{color:var(--_k-warn)}
+
+/* ——— the page's head ——— */
+.knobs-wt-head{display:flex;flex-direction:column;gap:var(--_k-space-title)}
+.knobs-wt-title{font-size:var(--_k-type-heading)!important;line-height:var(--_k-leading-heading);font-weight:var(--kw-strong)!important;text-wrap:balance}
+.knobs-wt-summary{max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-wt-meta{display:flex;flex-wrap:wrap;gap:var(--_k-space-inside) var(--_k-space-title);color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
+.knobs-wt-meta>span{display:inline-flex;gap:var(--_k-space-inside);white-space:nowrap}
+.knobs-wt-meta b{font-weight:var(--_k-weight);color:var(--_k-fg-2);font-family:var(--_k-mono)}
+
+/* ——— a section: a PR or topic. Its kicker leads the meta line, its title under it (16/24, under
+   the page's 20/28), both on the column's edge ——— */
+.knobs-wt-section{display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0}
+.knobs-wt-sintro{display:flex;flex-direction:column;gap:var(--_k-space-title);min-width:0}
+.knobs-wt-shead{display:flex;flex-direction:column;gap:var(--_k-space-inside);min-width:0;scroll-margin-top:16px}
+.knobs-wt-heading{font-size:var(--_k-type-title)!important;line-height:var(--_k-leading-title);font-weight:var(--kw-strong)!important;text-wrap:balance}
+.knobs-wt-ssum{max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-wt-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:var(--_k-round);font-size:var(--_k-type-small);font-weight:var(--kw-strong);white-space:nowrap;
+  --kw-tone:var(--_k-fg-2);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
+.knobs-wt-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="good"]{--kw-tone:var(--kw-good)}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="warn"]{--kw-tone:var(--_k-warn)}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="bad"]{--kw-tone:var(--_k-danger)}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="info"]{--kw-tone:var(--kw-info)}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="dim"]{--kw-tone:var(--_k-fg-2)}
+
+/* ——— a step: on the page by default, a group's room between steps with a hairline in the middle;
+   or (cards) one card each, the one surface its pieces sit on ——— */
+.knobs-walkthrough:not([data-cards]) .knobs-wt-step:not([data-full]){padding:0;border-radius:0;background:transparent;box-shadow:none}
+.knobs-walkthrough:not([data-cards]) .knobs-wt-step+.knobs-wt-step::before{content:"";position:absolute;left:0;right:0;top:calc(var(--_k-space-group) / -2);height:1px;background:var(--_k-border-subtle);pointer-events:none}
+.knobs-wt-step{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-title);padding:var(--_k-pad-card);border-radius:var(--_k-radius-panel);background:var(--kw-card);box-shadow:var(--kw-card-ring);
+  scroll-margin-top:16px;outline:none;container:knobs-wt-step / inline-size}
+.knobs-walkthrough[data-cards]{--kw-under:var(--kw-card)}
+.knobs-walkthrough[data-cards][data-frame="flat"] .knobs-wt-step{box-shadow:inset 0 0 0 1px var(--_k-border)}
+.knobs-wt-step-head{display:flex;flex-direction:column;gap:var(--_k-space-inside);min-width:0}
+.knobs-wt-stepTitle{min-width:0;font-weight:var(--kw-strong)!important;text-wrap:balance}
+.knobs-wt-caption{max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
+.knobs-wt-question{font-weight:var(--kw-strong)!important;max-width:var(--kw-measure)}
+.knobs-wt-media{display:grid;grid-template-columns:repeat(var(--kw-n,1),minmax(0,1fr));gap:var(--_k-space-group) var(--_k-space-column);min-width:0}
+@container knobs-wt-step (max-width:640px){.knobs-wt-media{grid-template-columns:minmax(0,1fr)}}
+
+/* ——— the feed: updates and answers, newest first. Tight inside an item (4 / 8 / 4), a group's
+   room between items with the hairline in the middle; no boxes ——— */
+.knobs-wt-feed{display:flex;flex-direction:column;gap:var(--_k-space-title);min-width:0;scroll-margin-top:16px}
+.knobs-wt-feed-head{display:flex;align-items:baseline;gap:var(--_k-space-sibling)}
+.knobs-wt-feed-title{font-weight:var(--kw-strong)!important}
+.knobs-wt-feed-count{font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3)}
+.knobs-wt-feed-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--_k-space-group);min-width:0}
+.knobs-wt-fi{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0}
+.knobs-wt-fi+.knobs-wt-fi::before{content:"";position:absolute;left:0;right:0;top:calc(var(--_k-space-group) / -2);height:1px;background:var(--_k-border-subtle)}
+.knobs-wt-fi-q,.knobs-wt-fi-a{display:flex;flex-direction:column;gap:var(--_k-space-inside);min-width:0}
+.knobs-wt-fi-ask{max-width:var(--kw-measure);color:var(--_k-fg);font-weight:var(--kw-strong);text-wrap:pretty}
+.knobs-wt-fi-text{max-width:var(--kw-measure);color:var(--_k-fg);text-wrap:pretty}
+.knobs-wt-fi-answer{max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
+:where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:inherit;color:inherit;background:transparent;border:0;margin:0;padding:0;cursor:pointer;outline:none;
+  transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+:where(.knobs-ui) .knobs-wt-steplink{all:revert;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin:0 0 0 2px;padding:0;vertical-align:-5px;border:0;
+  border-radius:calc(var(--_k-radius) / 2);background:transparent;color:var(--_k-fg-3);cursor:pointer;outline:none;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-steplink:is(:hover,:focus-visible){background:var(--_k-fill);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-steplink svg{width:12px;height:12px}
+
+/* ——— a disclosure: a small faint toggle with a caret, no fill. The body's height springs (in
+   script) and its content fades in place, top-anchored, under a soft bottom mask ——— */
+.knobs-wt-disc{display:flex;flex-direction:column;min-width:0}
+.knobs-ui .knobs-wt-disc-toggle{display:inline-flex;align-items:center;gap:var(--_k-space-inside);width:max-content;height:20px;color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);cursor:pointer;
+  border-radius:calc(var(--_k-radius) / 2);transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-disc-toggle:is(:hover,:focus-visible),.knobs-wt-disc[data-open]>.knobs-wt-disc-toggle{color:var(--_k-fg-2);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-disc-toggle:focus-visible{box-shadow:0 0 0 2px var(--_k-focus)}
+.knobs-wt-disc-toggle svg{flex:none;width:12px;height:12px;transition:rotate var(--kw-state-ms) var(--kw-state)}
+.knobs-wt-disc[data-open]>.knobs-wt-disc-toggle svg{rotate:90deg}
+.knobs-wt-disc-count{color:var(--_k-fg-3)}
+.knobs-wt-disc-body{overflow:hidden}
+.knobs-wt-disc[data-open]>.knobs-wt-disc-body:not([data-moving]){overflow:visible}
+.knobs-wt-disc-body[data-moving]{-webkit-mask-image:linear-gradient(#000 calc(100% - 16px),transparent);mask-image:linear-gradient(#000 calc(100% - 16px),transparent)}
+.knobs-wt-disc-content{padding-top:var(--_k-space-inside)}
+/* "More" under a caption or summary: the rest of its words, in the same voice. */
+.knobs-wt-more-text{display:flex;flex-direction:column;gap:var(--_k-space-sibling);max-width:var(--kw-measure);color:var(--_k-fg-2);text-wrap:pretty}
+/* A trail sits on the toggle's label edge: faint lines, the time trailing. */
+.knobs-wt-trail{display:flex;flex-direction:column;list-style:none;padding:0 0 0 calc(12px + var(--_k-space-inside));font-size:var(--_k-type-small);line-height:var(--_k-leading-small);color:var(--_k-fg-3);min-width:0}
+.knobs-wt-trail li{display:flex;align-items:baseline;gap:var(--_k-space-sibling);min-width:0;white-space:nowrap}
+.knobs-wt-trail-text{flex:0 1 auto;min-width:0;overflow:hidden;${fade2}}
+.knobs-wt-trail-at{flex:none}
+
+/* ——— a step's sent notes ——— */
+.knobs-wt-notes{display:flex;flex-direction:column}
+.knobs-wt-notes:empty{display:none}
+.knobs-wt-n{display:flex;align-items:flex-start;gap:var(--_k-space-sibling);padding:6px 0;overflow:hidden;
+  transition:height var(--kw-snappy-ms) var(--kw-snappy),opacity var(--kw-snappy-ms) var(--kw-snappy),filter var(--kw-snappy-ms) var(--kw-snappy)}
+.knobs-wt-n[data-entering]{opacity:0;filter:blur(3px)}
+.knobs-wt-n[data-leaving]{opacity:0;filter:blur(3px);padding-block:0}
+.knobs-wt-n+.knobs-wt-n{box-shadow:inset 0 1px 0 var(--_k-border-subtle)}
+.knobs-wt-n-meta{flex:none;min-width:44px;color:var(--_k-fg-3);font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-body) var(--_k-mono)}
+.knobs-wt-n-meta[data-seek]{cursor:pointer}
+.knobs-wt-n-meta[data-seek]:hover{color:var(--_k-fg)}
+.knobs-wt-n-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
+.knobs-wt-n-voice{height:30px;max-width:320px}
+.knobs-wt-n-ink{display:block;width:120px;max-height:80px;border-radius:calc(var(--_k-radius) / 2);background:var(--_k-fill)}
+.knobs-wt-n-ink path{fill:none;stroke:var(--kw-ink);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
+
+/* ——— the note bar, docked at the bottom of the column. It holds its own place at the page's end
+   (so the last step stays clear of it), and script keeps its height as the scroller's
+   scroll-padding-bottom ——— */
+.knobs-wt-dock{position:sticky;bottom:12px;z-index:40;display:grid;pointer-events:none}
+.knobs-wt-dock>*{pointer-events:auto}
+.knobs-wt-dock>:is(.knobs-wt-notebar,.knobs-wt-launch){grid-area:1/1}
+.knobs-wt-dock[data-mode="docked"]>.knobs-wt-launch{display:none}
+/* Collapsed: the launcher and the bar swap in place, a quick fade with a little scale and blur
+   from the launcher's corner; the exit is the shorter. */
+:where(.knobs-ui) .knobs-wt-launch{all:revert;box-sizing:border-box;justify-self:end;align-self:end;display:inline-flex;align-items:center;gap:6px;height:32px;margin:0;padding:0 10px 0 9px;border:0;border-radius:var(--_k-round);
+  background:var(--_k-bg);color:var(--_k-fg-2);box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font:var(--kw-strong) var(--_k-type-small)/1 var(--_k-font);cursor:pointer;outline:none;transform-origin:100% 100%;
+  transition:color calc(var(--_k-hover-out) * 1ms),opacity var(--kw-quick-ms) var(--kw-quick),scale var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-ui .knobs-wt-launch:is(:hover,:focus-visible){color:var(--_k-fg)}
+.knobs-ui .knobs-wt-launch:focus-visible{box-shadow:var(--_k-focus-ring)}
+.knobs-wt-launch svg{width:16px;height:16px}
+.knobs-wt-launch kbd{font:inherit;font-weight:var(--_k-weight);color:var(--_k-fg-3)}
+.knobs-wt-dock[data-mode="collapsed"] .knobs-wt-notebar{transform-origin:100% 100%;transition:opacity var(--kw-quick-ms) var(--kw-quick),scale var(--kw-quick-ms) var(--kw-quick),filter var(--kw-quick-ms) var(--kw-quick)}
+.knobs-wt-dock[data-mode="collapsed"]:not([data-open])>.knobs-wt-notebar,.knobs-wt-dock[data-mode="collapsed"][data-open]>.knobs-wt-launch{opacity:0;scale:.98;filter:blur(3px);pointer-events:none;
+  transition-duration:calc(var(--kw-quick-ms) * .8)}
+.knobs-wt-notebar{display:flex;flex-direction:column;gap:2px;padding:6px 6px 6px 14px;border-radius:calc(var(--_k-radius-panel) + 2px);background:var(--_k-bg);
+  box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay)}
+.knobs-wt-on{padding-top:3px;color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);white-space:nowrap;overflow:hidden;${fade2}}
+.knobs-wt-row{display:flex;align-items:flex-end;gap:4px}
+:where(.knobs-ui) :is(.knobs-wt-input,.knobs-wt-tool,.knobs-wt-x,.knobs-wt-back){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;
+  border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
+.knobs-ui .knobs-wt-input{flex:1;min-width:0;height:32px;max-height:140px;padding:6px 0;resize:none;color:var(--_k-fg);caret-color:var(--_k-accent);line-height:var(--_k-leading-body);font-size:var(--_k-type-body)}
+.knobs-ui .knobs-wt-input::placeholder{color:var(--_k-fg-3)}
+.knobs-wt-attach{display:flex;gap:4px;align-items:center;align-self:center}
+.knobs-wt-attach:empty{display:none}
+.knobs-wt-chip-a{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 9px;border-radius:var(--_k-round);background:var(--_k-fill-selected);font-size:var(--_k-type-small);white-space:nowrap}
+.knobs-ui .knobs-wt-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--_k-fg-3);cursor:pointer;transition:background .15s,color .15s}
+.knobs-ui .knobs-wt-x:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-wt-x svg{width:12px;height:12px}
+.knobs-ui .knobs-wt-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 8px;border-radius:calc(var(--_k-radius) + 2px);
+  color:var(--_k-fg-2);cursor:pointer;transition:background .15s,color .15s}
+.knobs-ui .knobs-wt-tool:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-wt-tool[aria-pressed="true"]{background:var(--_k-fill-selected);color:var(--_k-fg)}
+.knobs-wt-tool svg{width:16px;height:16px}
+.knobs-wt-rec{font-size:var(--_k-type-small)}
+.knobs-wt-rec:empty{display:none}
+.knobs-ui .knobs-wt-tool[data-send]{color:var(--_k-fg-3)}
+.knobs-ui .knobs-wt-tool[data-send][data-ready]{background:var(--_k-accent);color:var(--_k-bg)}
+/* Back: in place over the bar for a few seconds after a note moves the page on. */
+.knobs-ui .knobs-wt-back{position:absolute;left:8px;bottom:calc(100% + 8px);display:inline-flex;align-items:center;gap:var(--_k-space-inside);max-width:min(360px,calc(100% - 16px));height:28px;padding:0 12px 0 9px;
+  border-radius:var(--_k-round);background:var(--_k-bg);color:var(--_k-fg);box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font-size:var(--_k-type-small);font-weight:var(--kw-strong);cursor:pointer;
+  opacity:0;scale:.96;filter:blur(3px);pointer-events:none;transition:opacity .11s cubic-bezier(.4,0,1,1),scale .11s cubic-bezier(.4,0,1,1),filter .11s cubic-bezier(.4,0,1,1)}
+.knobs-ui .knobs-wt-back[data-on]{opacity:1;scale:1;filter:none;pointer-events:auto;transition:opacity .15s cubic-bezier(.2,.8,.2,1),scale .15s cubic-bezier(.2,.8,.2,1),filter .15s cubic-bezier(.2,.8,.2,1)}
+.knobs-ui .knobs-wt-back:hover{background:var(--_k-fill-selected)}
+.knobs-wt-back svg{flex:none;width:12px;height:12px}
+.knobs-wt-back-label{min-width:0;overflow:hidden;white-space:nowrap;${fade2}}
+
+/* ——— ink over a step's media ——— */
+.knobs-wt-media,.knobs-wt-options{position:relative}
+.knobs-wt-ink{position:absolute;inset:0;z-index:5;width:100%;height:100%;overflow:visible;pointer-events:none;touch-action:none}
+.knobs-wt-ink[data-on]{pointer-events:auto;cursor:crosshair}
+.knobs-wt-ink path{fill:none;stroke:var(--kw-ink);stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
+
+/* ——— full-window: the step over the page above the note bar, its media filling it; its place held
+   in the page. The one raised surface ——— */
+.knobs-wt-scrim{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,var(--_k-bg-page) 82%,transparent);opacity:0;pointer-events:none}
+.knobs-wt-scrim[data-on]{pointer-events:auto}
+.knobs-wt-hold-card{flex:none}
+.knobs-wt-step[data-full]{position:fixed;z-index:35;margin:0;overflow:hidden;overscroll-behavior:contain;padding:var(--_k-pad-card);border-radius:var(--_k-radius-panel);box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);background:var(--_k-bg)}
+.knobs-wt-step[data-full]::before{content:none}
+.knobs-wt-step[data-full]>:not(.knobs-wt-media){flex:none}
+.knobs-wt-step[data-full] .knobs-wt-notes{display:none}
+.knobs-wt-step[data-full]>.knobs-wt-media{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
+.knobs-wt-step[data-full] .knobs-wt-slot{display:flex;flex-direction:column;min-height:0}
+.knobs-wt-step[data-full] .knobs-wt-body{flex:1;min-height:0}
+.knobs-wt-step[data-full] .knobs-wt-fit{height:100%;transition:none}
+.knobs-wt-step[data-full] .knobs-wt-frame{height:100%;aspect-ratio:auto}
+
+/* ——— a taste test: the options side by side, Kit's pick checked and the rest stepping back. On
+   the step's card, so no fill of their own ——— */
+.knobs-wt-options{display:grid;grid-template-columns:repeat(var(--kw-n,2),minmax(0,1fr));gap:var(--_k-space-group) var(--_k-space-column)}
+@container knobs-wt-step (max-width:640px){.knobs-wt-options{grid-template-columns:minmax(0,1fr)}}
+.knobs-wt-option{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0}
+.knobs-wt-option>:not(.knobs-wt-pick){transition:opacity var(--kw-snappy-ms) var(--kw-snappy)}
+.knobs-wt-options[data-has-pick] .knobs-wt-option:not([data-picked])>:not(.knobs-wt-pick){opacity:.55}
+.knobs-ui .knobs-wt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;margin:0 -6px;width:calc(100% + 12px);padding:0 6px;border-radius:var(--_k-radius);cursor:pointer;color:var(--_k-fg-2);text-align:left;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_k-fill);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-letter{flex:none;font-weight:var(--kw-strong);color:var(--_k-fg)}
+.knobs-wt-olabel{flex:1;min-width:0;font-weight:var(--kw-strong);color:var(--_k-fg)}
+.knobs-wt-suggested{flex:none;font-size:var(--_k-type-small);color:var(--_k-fg-3)}
+.knobs-wt-check{flex:none;display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:var(--_k-fill);color:transparent;
+  transition:background var(--kw-snappy-ms) var(--kw-snappy),color var(--kw-snappy-ms) var(--kw-snappy)}
+.knobs-wt-check svg{width:12px;height:12px}
+.knobs-wt-option[data-picked] .knobs-wt-check{background:var(--_k-accent);color:var(--_k-bg)}
+.knobs-wt-key{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:4px;background:var(--_k-fill);color:var(--_k-fg-3);
+  font:var(--kw-strong) var(--_k-type-small)/1 var(--_k-font);opacity:.5;transition:opacity .15s}
+.knobs-wt-step[data-current] .knobs-wt-key{opacity:1}
+.knobs-wt-ocap{color:var(--_k-fg-2);max-width:var(--kw-measure)}
+
+/* ——— the rail: progress, contents, export ——— */
+.knobs-wt-rail{position:sticky;top:var(--_k-pad-page);display:flex;flex-direction:column;gap:var(--_k-space-title);max-height:calc(100vh - var(--_k-pad-page) * 2);min-height:0;font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
+.knobs-wt-progress{display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
+.knobs-wt-count{display:flex;align-items:baseline;justify-content:space-between;color:var(--_k-fg-2)}
+.knobs-wt-count b{color:var(--_k-fg);font-weight:var(--kw-strong)}
+.knobs-wt-bar{position:relative;height:4px;border-radius:2px;overflow:hidden;background:var(--_k-fill)}
+.knobs-wt-fill{position:absolute;inset:0;border-radius:inherit;background:var(--_k-accent);transform-origin:0 50%;transform:scaleX(var(--kw-done,0))}
+.knobs-walkthrough[data-settled] .knobs-wt-fill{transition:transform var(--kw-calm-ms) var(--kw-calm)}
+/* The contents: every row on one text edge and in one colour, title rows (32 high, the control
+   radius) and the steps under them (20 high, half of it), bled out so their text sits on the
+   rail's edge; the selection pill slides to the current step, and base rows never brighten. */
+.knobs-wt-toc{position:relative;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:var(--_k-space-sibling);margin:0 calc(var(--_k-space-sibling) * -1);padding:0 0 8px}
+.knobs-wt-toc::-webkit-scrollbar{display:none}
+.knobs-wt-toc-group{display:flex;flex-direction:column;min-width:0}
+.knobs-ui .knobs-wt-toc-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--_k-space-sibling);align-items:center;flex:none;width:100%;height:32px;
+  padding:0 var(--_k-space-sibling);border-radius:var(--_k-radius);color:var(--_k-fg-2);font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-weight:var(--_k-weight);text-align:left;white-space:nowrap;cursor:pointer;
+  transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-toc-sub{height:20px;border-radius:calc(var(--_k-radius) / 2);font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight)}
+.knobs-ui .knobs-wt-toc-row:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-toc-row:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
+.knobs-wt-toc-end{display:flex;align-items:center;font-size:var(--_k-type-small);line-height:var(--_k-leading-small);font-weight:var(--_k-weight);color:var(--_k-fg-3)}
+.knobs-wt-toc-label{min-width:0;overflow:hidden;${fade2}}
+.knobs-pick-copy .knobs-wt-toc-end{color:var(--_k-fg-2)}
+/* A step's state: an open ring, a filled dot once answered, nothing to answer a faint ring. */
+.knobs-wt-toc-glyph{--kw-tone:var(--_k-fg-3);display:block;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--kw-tone);
+  transition:background var(--kw-snappy-ms) var(--kw-snappy),box-shadow var(--kw-snappy-ms) var(--kw-snappy)}
+.knobs-wt-toc-glyph[data-tone="accent"]{--kw-tone:var(--_k-accent)}
+.knobs-wt-toc-glyph[data-done]{background:var(--kw-tone)}
+.knobs-wt-toc-glyph[data-tone="none"]{box-shadow:inset 0 0 0 1px var(--_k-border)}
+.knobs-wt-actions{display:flex;flex-wrap:wrap;gap:4px}
+.knobs-ui .knobs-wt-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
+  transition:background .15s,color .15s}
+.knobs-ui .knobs-wt-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-wt-btn[data-primary]{background:var(--_k-fill-selected);color:var(--_k-fg)}
+.knobs-ui .knobs-wt-btn[data-primary]:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
+.knobs-wt-keys{color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
+.knobs-wt-keys kbd{font:inherit;color:var(--_k-fg-2)}
+/* Narrow: the contents go; with review on, the rail becomes a bar along the top with the
+   progress and the export. */
+@container knobs-wt (max-width:960px){
+  .knobs-wt-rail{z-index:4;flex-direction:row;align-items:center;gap:var(--_k-space-title);max-height:none;margin:0 calc(var(--_k-pad-page) * -1);padding:8px var(--_k-pad-page);top:0;background:var(--_k-bg-page)}
+  .knobs-wt-progress{flex:1}.knobs-wt-toc,.knobs-wt-keys{display:none}
+  .knobs-walkthrough:not([data-review]) .knobs-wt-rail{display:none}
+  .knobs-wt-step,.knobs-wt-shead,.knobs-wt-feed{scroll-margin-top:60px}
+}
+
+/* ——— media slots. Only a picture's frame (a quiet fill while it loads or letterboxes) and a code
+   block (a well) are bounded; a metric, a callout, a table, a stack and a history sit on the page,
+   set apart by space, hairlines and their own colours. On a card (.knobs-surface) code drops its
+   well for hairlines, so nothing draws a fill and a ring of its own there ——— */
+.knobs-ui.knobs-wt-slot{position:relative;display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);
+  font:var(--_k-weight) var(--_k-type-body)/var(--_k-leading-body) var(--_k-font);font-variant-numeric:tabular-nums;--kw-measure:var(--k-walkthrough-measure,68ch);
+  --kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));--kw-frame-r:var(--_k-radius-panel)}
+.knobs-surface .knobs-wt-slot{--kw-frame-r:calc(var(--_k-radius-panel) - 4px)}
+/* A slot's label: sentence case as written, small and faint, never a heading. */
+.knobs-wt-slot-label{display:block;min-width:0;overflow:hidden;white-space:nowrap;font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);letter-spacing:normal;text-transform:none;color:var(--_k-fg-3);${fade2}}
+.knobs-wt-body{min-width:0}
+/* One frame for every slot that has one (a picture, a video, a code block, a compare's stage, a
+   slot still loading): the panel radius and a quiet fill, no ring; concentric on a card. */
+.knobs-wt-slot .knobs-cmp-stage{border-radius:var(--kw-frame-r)}
+/* A compare is exactly as tall as its pictures at this width, so there's no letterbox: the two
+   sides edge to edge (side) or one (overlaid), plus its mode bar, the timeline and their two gaps
+   (92 px), and the frame strip with its gap (158 px). */
+.knobs-wt-fit{width:100%;height:calc(100cqw / 2 / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
+.knobs-wt-fit[data-overlay]{height:calc(100cqw / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
+.knobs-wt-fit[data-strip]{--kw-chrome:158px}
+.knobs-wt-fit[data-settled]{transition:height var(--k-wt-calm-ms,${calm.duration}ms) ${calm.easing}}
+.knobs-wt-frame{position:relative;width:100%;overflow:hidden;border-radius:var(--kw-frame-r);background:var(--_k-fill);aspect-ratio:var(--kw-aspect,16/9)}
+.knobs-wt-frame>:is(video,img){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;border:0}
+.knobs-wt-frame[data-natural]{aspect-ratio:auto;background:transparent}
+.knobs-wt-frame[data-natural]>img{position:static;height:auto}
+.knobs-wt-code{margin:0;padding:var(--_k-pad-card);max-height:420px;overflow:auto;border-radius:var(--kw-frame-r);background:var(--_k-fill);color:var(--_k-fg);
+  font:var(--_k-type-label)/var(--_k-leading-body) var(--_k-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
+.knobs-surface .knobs-wt-code{padding-inline:0;border-radius:0;background:transparent;box-shadow:inset 0 1px 0 var(--_k-border-subtle),inset 0 -1px 0 var(--_k-border-subtle)}
+.knobs-wt-code[data-terminal]{white-space:pre-wrap;overflow-wrap:anywhere}
+.knobs-wt-prompt{color:var(--_k-fg-3);user-select:none;-webkit-user-select:none}
+.knobs-wt-cmd{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
+.knobs-wt-out{color:var(--_k-fg-2)}
+.knobs-wt-metric{display:flex;flex-direction:column;gap:var(--_k-space-sibling)}
+.knobs-wt-mlabel{color:var(--_k-fg-2)}
+.knobs-wt-mvalue{display:flex;align-items:baseline;flex-wrap:wrap;gap:var(--_k-space-sibling);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
+.knobs-wt-mfrom{color:var(--_k-fg-3)}
+.knobs-wt-mto{font-size:var(--_k-type-title);line-height:var(--_k-leading-title);font-weight:var(--_k-weight-label)}
+.knobs-wt-mof{color:var(--_k-fg-3)}
+.knobs-wt-mdelta{--kw-tone:var(--_k-fg-2);font-size:var(--_k-type-small);font-weight:var(--_k-weight-label);color:var(--kw-tone)}
+.knobs-wt-mdelta[data-tone="good"]{--kw-tone:var(--kw-good)}
+.knobs-wt-mdelta[data-tone="bad"]{--kw-tone:var(--_k-danger)}
+.knobs-wt-mtrack{position:relative;height:4px;border-radius:2px;background:color-mix(in srgb,var(--_k-fg) 8%,transparent)}
+.knobs-wt-mtrack>span{position:absolute;top:0;bottom:0;left:0;border-radius:inherit}
+.knobs-wt-mtrack>.knobs-wt-mafter{background:var(--_k-accent)}
+.knobs-wt-mtrack>.knobs-wt-mbefore{background:color-mix(in srgb,var(--_k-fg) 30%,transparent)}
+.knobs-wt-callout{--kw-tone:var(--kw-info);display:flex;gap:var(--_k-space-sibling);max-width:var(--kw-measure);color:var(--_k-fg)}
+.knobs-wt-callout::before{content:"";flex:none;width:6px;height:6px;margin-top:7px;border-radius:50%;background:var(--kw-tone)}
+.knobs-wt-callout[data-tone="good"]{--kw-tone:var(--kw-good)}
+.knobs-wt-callout[data-tone="warn"]{--kw-tone:var(--_k-warn)}
+.knobs-wt-callout[data-tone="bad"]{--kw-tone:var(--_k-danger)}
+.knobs-wt-text{max-width:var(--kw-measure);color:var(--_k-fg-2)}
+.knobs-wt-hold{border-radius:var(--kw-frame-r);background:var(--_k-fill)}
+.knobs-wt-failed{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--_k-fg-3);font-size:var(--_k-type-small)}
+
+/* ——— data blocks: history, stack, table, chapters. On the step's card, so no card of their own:
+   hairlines and fills only. Tones read the status tokens; hover fades are the panel's own. ——— */
+:where(.knobs-wt-history,.knobs-wt-stack,.knobs-wt-tablebox,.knobs-wt-chapters){--kw-line:var(--_k-leading-body);--kw-rail:var(--_k-border-strong)}
+:where(.knobs-wt-slot) [data-tone="good"]{--kw-tone:var(--kw-good)}
+:where(.knobs-wt-slot) [data-tone="warn"]{--kw-tone:var(--_k-warn)}
+:where(.knobs-wt-slot) [data-tone="bad"]{--kw-tone:var(--_k-danger)}
+:where(.knobs-wt-slot) [data-tone="info"]{--kw-tone:var(--kw-info)}
+:where(.knobs-wt-slot) [data-tone="dim"]{--kw-tone:var(--_k-fg-3)}
+.knobs-wt-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
+.knobs-ui .knobs-wt-tag{display:inline-flex;align-items:center;height:20px;padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-2);font:var(--_k-weight) var(--_k-type-small)/1 var(--_k-mono);
+  text-decoration:none;white-space:nowrap;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui a.knobs-wt-tag:is(:hover,:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+
+/* A history: dates down the left, a spine of tone dots joined by a hairline (broken around each
+   dot), the event beside it. Inferred events take a ring for a dot and a dashed tag. */
+.knobs-wt-history{--kw-hy:calc(5px + var(--kw-line) / 2);display:flex;flex-direction:column;gap:18px;font-size:var(--_k-type-body);line-height:var(--kw-line);color:var(--_k-fg)}
+.knobs-wt-hgroup{display:flex;flex-direction:column;gap:6px;min-width:0}
+.knobs-wt-hhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
+.knobs-ui .knobs-wt-hheading{margin:0;font:var(--_k-weight-label) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);letter-spacing:.04em;text-transform:uppercase;color:var(--_k-fg-2)}
+.knobs-wt-hsum{color:var(--_k-fg-3);font-size:var(--_k-type-small);font-variant-numeric:tabular-nums}
+.knobs-wt-hlist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
+.knobs-wt-hev{display:grid;grid-template-columns:var(--kw-hw,11ch) 14px minmax(0,1fr);grid-template-areas:"when spine main";column-gap:10px;align-items:baseline;padding:5px 0}
+.knobs-wt-hwhen{grid-area:when;display:flex;flex-direction:column;min-width:0;font:var(--_k-weight) var(--_k-type-label)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
+.knobs-wt-hage{color:var(--_k-fg-3);font-size:var(--_k-type-small);line-height:var(--_k-leading-small)}
+.knobs-wt-hspine{grid-area:spine;position:relative;align-self:stretch;margin-block:-5px}
+.knobs-wt-hspine::before,.knobs-wt-hspine::after{content:"";position:absolute;left:6.5px;width:1px;background:var(--kw-rail)}
+.knobs-wt-hspine::before{top:0;height:calc(var(--kw-hy) - 6px)}
+.knobs-wt-hspine::after{top:calc(var(--kw-hy) + 6px);bottom:0}
+.knobs-wt-hev:first-child .knobs-wt-hspine::before,.knobs-wt-hev:last-child .knobs-wt-hspine::after{content:none}
+.knobs-wt-hdot{position:absolute;left:3.5px;top:calc(var(--kw-hy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--kw-tone,var(--_k-fg-3))}
+.knobs-wt-hev[data-type="release"] .knobs-wt-hdot{border-radius:1.5px;rotate:45deg;scale:.9}
+.knobs-wt-hev[data-type="audit"] .knobs-wt-hdot{border-radius:1.5px}
+.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-hdot{background:transparent;box-shadow:inset 0 0 0 1.5px var(--kw-tone,var(--_k-fg-3))}
+.knobs-wt-hmain{grid-area:main;display:flex;flex-direction:column;gap:2px;min-width:0}
+.knobs-wt-htitle{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
+.knobs-wt-prov{padding:0 6px;border-radius:5px;background:var(--_k-fill);color:var(--_k-fg-3);font:var(--_k-weight) var(--_k-type-small)/18px var(--_k-mono);white-space:nowrap}
+.knobs-wt-hev[data-provenance="inferred"] .knobs-wt-prov{background:transparent;color:var(--_k-warn);outline:1px dashed color-mix(in oklch,var(--_k-warn) 50%,transparent);outline-offset:-1px}
+.knobs-ui .knobs-wt-hdetail{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
+@container knobs-wt-slot (max-width:520px){
+  .knobs-wt-hev{grid-template-columns:14px minmax(0,1fr);grid-template-areas:"spine when" "spine main"}
+  .knobs-wt-hwhen{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:8px}
+}
+
+/* A stack: the trunk at the top, each PR hanging off the branch it merges into, rails drawn as a
+   git graph (solid, so where two meet they don't darken). A PR with a step goes there on a click. */
+.knobs-wt-stack{--kw-spt:7px;--kw-spb:7px;--kw-sy:calc(var(--kw-spt) + var(--kw-line) / 2);display:flex;flex-direction:column;font-size:var(--_k-type-body);line-height:var(--kw-line);color:var(--_k-fg)}
+.knobs-wt-srow{display:grid;grid-template-columns:auto minmax(0,1fr) auto;column-gap:10px;align-items:start;margin:0 -8px;padding:var(--kw-spt) 8px var(--kw-spb);
+  border-radius:max(0px,calc(var(--_k-radius-panel) - 8px));transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-srow[data-trunk]{--kw-spb:0px;grid-template-columns:auto minmax(0,1fr)}
+.knobs-wt-srow[data-go]{cursor:pointer}
+.knobs-wt-srow[data-go]:hover{background:var(--_ku-wash);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-lanes{display:flex;align-self:stretch;margin-block:calc(var(--kw-spt) * -1) calc(var(--kw-spb) * -1)}
+.knobs-wt-lane{position:relative;flex:none;width:16px}
+.knobs-wt-lane:is([data-rail="pass"],[data-rail="tee"],[data-down])::before{content:"";position:absolute;left:7.5px;top:0;bottom:0;width:1px;background:var(--kw-rail)}
+.knobs-wt-lane[data-down]::before{top:calc(var(--kw-sy) + 3.5px)}
+.knobs-wt-lane:is([data-rail="tee"],[data-rail="end"])::after{content:"";position:absolute;left:7.5px;top:0;width:13px;height:calc(var(--kw-sy) + .5px);border:solid var(--kw-rail);border-width:0 0 1px 1px;border-bottom-left-radius:6px}
+.knobs-wt-lane[data-rail="node"]::after{content:"";position:absolute;left:4.5px;top:calc(var(--kw-sy) - 3.5px);width:7px;height:7px;border-radius:50%;background:var(--_k-fg-3)}
+.knobs-wt-srow[data-trunk] .knobs-wt-lane[data-rail="node"]::after{background:var(--_k-fg-2)}
+.knobs-wt-trunk{font:var(--_k-weight-label) var(--_k-type-label)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2)}
+.knobs-wt-smain{display:flex;flex-direction:column;gap:1px;min-width:0}
+.knobs-wt-sline{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px}
+.knobs-wt-sord{font:var(--_k-weight) var(--_k-type-label)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3);white-space:nowrap}
+.knobs-ui .knobs-wt-spr{font:var(--_k-weight-label) var(--_k-type-label)/var(--kw-line) var(--_k-mono);color:var(--_k-fg-2);text-decoration:none;white-space:nowrap}
+.knobs-ui a.knobs-wt-spr:is(:hover,:focus-visible){color:var(--_k-fg);text-decoration:underline}
+.knobs-ui .knobs-wt-stitle{font-weight:var(--_k-weight-label);line-height:var(--kw-line);color:var(--_k-fg);text-align:left}
+.knobs-ui button.knobs-wt-stitle{cursor:pointer;text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui :is(.knobs-wt-srow[data-go]:hover button.knobs-wt-stitle,button.knobs-wt-stitle:focus-visible){text-decoration-color:color-mix(in oklch,currentColor 45%,transparent);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-ssummary{margin:0;max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
+.knobs-wt-smeta{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px;font:var(--_k-weight) var(--_k-type-small)/var(--kw-line) var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3)}
+.knobs-wt-delta{display:inline-flex;gap:6px}
+.knobs-wt-add{color:var(--_k-diff-add)}
+.knobs-wt-del{color:var(--_k-diff-del)}
+.knobs-wt-sstatus{margin-top:calc((var(--kw-line) - 20px) / 2)}
+.knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr) auto}
+.knobs-wt-stack[data-flat] .knobs-wt-srow+.knobs-wt-srow{box-shadow:inset 0 1px 0 var(--_k-border)}
+@container knobs-wt-slot (max-width:520px){
+  .knobs-wt-srow:not([data-trunk]){grid-template-columns:auto minmax(0,1fr)}
+  .knobs-wt-stack[data-flat] .knobs-wt-srow{grid-template-columns:minmax(0,1fr)}
+  .knobs-wt-sstatus{grid-column:-2;justify-self:start;margin-top:4px}
 }
-var grid2 = (v) => Math.round(v * 64) / 64;
-function chapterPills(host, chapters, io) {
-  const doc = host.ownerDocument;
-  const win = doc.defaultView;
-  const bar = el(doc, "div", "knobs-wt-chapters");
-  bar.setAttribute("role", "group");
-  bar.setAttribute("aria-label", "Chapters");
-  const mark = el(doc, "span", "knobs-wt-chapter-mark");
-  mark.setAttribute("aria-hidden", "true");
-  bar.append(mark);
-  const pills = chapters.map((c) => {
-    const b = el(doc, "button", "knobs-wt-chapter");
-    b.type = "button";
-    b.append(text(doc, "span", "knobs-wt-chapter-time", clock(c.start)));
-    b.append(text(doc, "span", "knobs-wt-chapter-label", c.label));
-    b.addEventListener("click", () => {
-      io.onEvent?.({ what: "seek", time: Math.round(c.start * 100) / 100, detail: c.label });
-      io.seek(c.start);
-      sync();
-    });
-    bar.append(b);
-    return b;
-  });
-  host.append(bar);
-  const x = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
-  const y = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
-  const w = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
-  const draw = () => {
-    const left = grid2(x.x);
-    mark.style.transform = `translate(${left}px,${grid2(y.x)}px)`;
-    mark.style.width = `${grid2(x.x + w.x) - left}px`;
-  };
-  const loop = frameLoop(win, (dt) => {
-    x.step(dt);
-    y.step(dt);
-    w.step(dt);
-    draw();
-    return !x.resting || !y.resting || !w.resting;
-  });
-  let at = -2;
-  let shown = false;
-  const place = (snap) => {
-    const p = pills[at];
-    if (!p) {
-      mark.removeAttribute("data-on");
-      pills.forEach((b) => b.removeAttribute("aria-current"));
-      shown = false;
-      return;
-    }
-    pills.forEach((b, i) => i === at ? b.setAttribute("aria-current", "true") : b.removeAttribute("aria-current"));
-    const to = [p.offsetLeft, p.offsetTop, p.offsetWidth];
-    if (snap || !shown || reducedMotion(win)) {
-      x.snap(to[0]);
-      y.snap(to[1]);
-      w.snap(to[2]);
-      draw();
-    } else {
-      x.set(to[0]);
-      y.set(to[1]);
-      w.set(to[2]);
-      loop.wake();
-    }
-    mark.style.height = `${p.offsetHeight}px`;
-    mark.dataset.on = "";
-    shown = true;
-  };
-  const sync = () => {
-    const next = chapterAt(chapters, io.now());
-    if (next === at)
-      return;
-    at = next;
-    place(false);
-  };
-  sync();
-  const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => place(true)) : null;
-  ro?.observe(bar);
-  return {
-    sync,
-    get current() {
-      return chapters[at] ?? null;
-    },
-    dispose() {
-      loop.stop();
-      ro?.disconnect();
-      bar.remove();
-    }
-  };
+
+/* A table: a real one, its head stuck while it scrolls, both ways; edges fade where there's more
+   (the top one under the head), and thin bars show on hover. */
+/* Too narrow for its columns, each row becomes a block: its primary cell titling the rest as term
+   and value, the blocks parted by hairlines. Scrolling sideways is the last resort (stack: never). */
+.knobs-wt-tablebox{min-width:0}
+.knobs-wt-tablebox[data-measure] table{width:min-content}
+.knobs-wt-tstack{display:none;flex-direction:column;min-width:0}
+.knobs-wt-tablebox[data-stacked]>.knobs-wt-table{display:none}
+.knobs-wt-tablebox[data-stacked]>.knobs-wt-tstack{display:flex}
+.knobs-wt-trow{display:flex;flex-direction:column;gap:var(--_k-space-sibling);min-width:0;padding-block:var(--_k-space-title);box-shadow:inset 0 -1px 0 var(--_k-border-subtle)}
+.knobs-wt-trow:first-child{padding-top:0}
+.knobs-wt-trow:last-of-type{padding-bottom:0;box-shadow:none}
+.knobs-wt-tline{display:flex;align-items:baseline;justify-content:space-between;gap:var(--_k-space-title);min-width:0}
+.knobs-wt-tbadges{flex:none;display:flex;align-items:center;gap:var(--_k-space-inside)}
+.knobs-wt-ttitle{flex:1 1 auto;min-width:0;color:var(--_k-fg);font-weight:var(--_k-weight-label);overflow-wrap:anywhere}
+.knobs-wt-ttitle[data-mono]{font-family:var(--_k-mono);font-size:var(--_k-type-label)}
+.knobs-wt-tterms{display:grid;grid-template-columns:minmax(6ch,max-content) minmax(0,1fr);gap:var(--_k-space-inside) var(--_k-space-title);min-width:0}
+.knobs-wt-tterms dt{color:var(--_k-fg-3);font-size:var(--_k-type-small)}
+.knobs-wt-tterms dd{min-width:0;color:var(--_k-fg-2);overflow-wrap:anywhere}
+.knobs-wt-tterms dd[data-mono]{font-family:var(--_k-mono);font-size:var(--_k-type-label);color:var(--_k-fg)}
+.knobs-wt-tcaption{padding-top:var(--_k-space-sibling);color:var(--_k-fg-3);font-size:var(--_k-type-small)}
+@property --kw-fade-l{syntax:"<number>";inherits:false;initial-value:1}
+@property --kw-fade-r{syntax:"<number>";inherits:false;initial-value:1}
+@keyframes kw-fade-l{from{--kw-fade-l:1}to{--kw-fade-l:0}}
+@keyframes kw-fade-r{from{--kw-fade-r:0}to{--kw-fade-r:1}}
+.knobs-wt-table{max-height:520px;overflow:auto;overscroll-behavior-x:contain;outline:none;scrollbar-width:thin;scrollbar-color:transparent transparent;
+  transition:scrollbar-color calc(var(--_k-hover-out) * 1ms)}
+.knobs-wt-table:is(:hover,:focus-visible){scrollbar-color:color-mix(in oklch,var(--_k-fg) 28%,transparent) transparent;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-wt-table:focus-visible{box-shadow:inset 0 0 0 2px var(--_k-focus);border-radius:var(--kw-frame-r)}
+@supports (animation-timeline:scroll()){
+  .knobs-wt-table{animation:knobs-fade-a linear both,knobs-fade-b linear both,kw-fade-l linear both,kw-fade-r linear both;animation-duration:auto;
+    animation-timeline:scroll(self block),scroll(self block),scroll(self inline),scroll(self inline);animation-range:0 24px,calc(100% - 24px) 100%,0 8px,calc(100% - 8px) 100%;
+    --kw-table-mask-y:linear-gradient(to bottom,#000 var(--kw-thead,0px),rgb(0 0 0/var(--knobs-fade-a)) var(--kw-thead,0px),#000 calc(var(--kw-thead,0px) + 20px),#000 calc(100% - 20px),rgb(0 0 0/var(--knobs-fade-b)));
+    --kw-table-mask-x:linear-gradient(to right,rgb(0 0 0/var(--kw-fade-l)),#000 24px,#000 calc(100% - 24px),rgb(0 0 0/var(--kw-fade-r)));
+    -webkit-mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);mask-image:var(--kw-table-mask-y),var(--kw-table-mask-x);-webkit-mask-composite:source-in;mask-composite:intersect}
 }
+.knobs-wt-table table{width:100%;margin:0;border-collapse:separate;border-spacing:0;font-size:var(--_k-type-body);line-height:var(--_k-leading-body);font-variant-numeric:tabular-nums;color:var(--_k-fg-2)}
+.knobs-wt-table caption{caption-side:bottom;padding-top:8px;text-align:left;color:var(--_k-fg-3);font-size:var(--_k-type-small)}
+.knobs-wt-table th{position:sticky;top:0;padding:0 12px 7px;text-align:left;vertical-align:bottom;font-weight:var(--_k-weight-label);font-size:var(--_k-type-small);color:var(--_k-fg-3);white-space:nowrap;
+  background:var(--kw-under,var(--_k-pane-bg));box-shadow:inset 0 -1px 0 var(--_k-border)}
+.knobs-wt-table td{padding:8px 12px;vertical-align:baseline;box-shadow:inset 0 -1px 0 var(--_k-border)}
+.knobs-wt-table tr:last-child td{box-shadow:none}
+.knobs-wt-table :is(th,td):first-child{padding-left:0}
+.knobs-wt-table :is(th,td):last-child{padding-right:0}
+.knobs-wt-table td:first-child{color:var(--_k-fg)}
+.knobs-wt-table [data-align="right"]{text-align:right}
+.knobs-wt-table [data-align="center"]{text-align:center}
+.knobs-wt-table td[data-mono]{font-family:var(--_k-mono);font-size:var(--_k-type-label);color:var(--_k-fg);white-space:nowrap}
+.knobs-wt-table td[data-long]{min-width:24ch}
+.knobs-ui :is(.knobs-wt-table,.knobs-wt-tstack) a.knobs-wt-chip{text-decoration:none}
+.knobs-wt-ctone{color:var(--kw-tone)}
+
+/* Chapters: a readout list under a video or compare: number, label, start; the selection pill
+   on the one playing, its rows bled out so their text sits on the media's edge. */
+.knobs-wt-body:has(>.knobs-wt-chapters){display:flex;flex-direction:column;gap:var(--_k-space-title)}
+.knobs-wt-chapters{position:relative;display:flex;flex-direction:column;margin:0 calc(var(--_k-space-sibling) * -1)}
+.knobs-ui .knobs-wt-chapter{position:relative;display:grid;grid-template-columns:2ch minmax(0,1fr) auto;column-gap:var(--_k-space-sibling);align-items:center;height:32px;padding:0 var(--_k-space-sibling);
+  border-radius:var(--_k-radius);color:var(--_k-fg-2);text-align:left;white-space:nowrap;cursor:pointer;transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-wt-chapter:is(:hover,:focus-visible){color:var(--_k-fg);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-wt-chapter:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
+.knobs-wt-chapter-n{font-size:var(--_k-type-small);color:var(--_k-fg-3)}
+.knobs-wt-chapter-label{min-width:0;overflow:hidden;${fade2}}
+.knobs-wt-chapter-time{font:var(--_k-weight) var(--_k-type-small)/1 var(--_k-mono);color:var(--_k-fg-3)}
+.knobs-pick-copy :is(.knobs-wt-chapter-n,.knobs-wt-chapter-time){color:var(--_k-fg-2)}
+@media(prefers-reduced-motion:reduce){:is(.knobs-walkthrough,.knobs-wt-slot) :where(*,::before,::after){transition-duration:.15s!important;transition-property:opacity,background,color!important}}
+@media(prefers-reduced-motion:reduce){.knobs-wt-disc-content{transition:opacity .15s}}
+`;
 
 // src/ui/walkthrough-media.ts
 function injectWalkthroughStyles(doc) {
@@ -21309,7 +22278,7 @@ function mediaSlot(container, options) {
     }
   };
 }
-var CHECK3 = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
+var CHECK3 = icon("check", { small: true });
 
 // src/ui/walkthrough.ts
 var el2 = (doc, tag, cls) => {
@@ -21327,16 +22296,20 @@ var lookOf2 = (o) => ({
   ...o.preset ? { preset: o.preset } : {},
   ...o.theme ? { theme: o.theme } : {}
 });
-var grid3 = (v) => Math.round(v * 64) / 64;
+var grid2 = (v) => Math.round(v * 64) / 64;
 var ICON = {
-  full: svg('<path d="M3 6.5V3h3.5M13 6.5V3H9.5M3 9.5V13h3.5M13 9.5V13H9.5"/>'),
-  exit: svg('<path d="M6.5 3v3.5H3M9.5 3v3.5H13M6.5 13V9.5H3M9.5 13V9.5H13"/>'),
-  pen: svg('<path d="M10.5 3.2 12.8 5.5 5.8 12.5 3 13l.5-2.8z"/><path d="M9.3 4.4l2.3 2.3"/>'),
-  mic: svg('<rect x="6" y="2.5" width="4" height="7" rx="2"/><path d="M3.8 8a4.2 4.2 0 0 0 8.4 0M8 12.2v1.8"/>'),
+  full: icon("cornersOut"),
+  exit: icon("cornersIn"),
+  pen: icon("pencilSimple"),
+  mic: icon("microphone"),
   stop: svg('<rect x="4.5" y="4.5" width="7" height="7" rx="1.5" fill="currentColor" stroke="none"/>'),
-  send: svg('<path d="M8 13V3.5M4 7.5 8 3.5l4 4"/>'),
-  close: svg('<path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/>')
+  send: icon("paperPlaneRight"),
+  close: icon("x", { small: true }),
+  back: icon("arrowLeft", { small: true }),
+  out: icon("arrowUpRight", { small: true })
 };
+var DOCK_INSET = 12;
+var DOCK_GAP = 12;
 var CALM2 = springMotion(SPRINGS.calm);
 var SMOOTH = springMotion(SPRINGS.smooth);
 var BACK_MS = 4500;
@@ -21352,16 +22325,25 @@ function tasteTest(container, options) {
     ...o.media !== undefined ? { media: fillMedia(o.media) } : {},
     suggested: o.suggested === true
   });
-  let picked = options.picked ?? null;
+  const pickable = options.pickable !== false;
+  let picked = pickable ? options.picked ?? null : null;
   const root = el2(doc, "div", "knobs-wt-options");
-  root.setAttribute("role", "radiogroup");
-  root.setAttribute("aria-label", "Options");
+  if (pickable) {
+    root.setAttribute("role", "radiogroup");
+    root.setAttribute("aria-label", "Options");
+  } else
+    root.dataset.static = "";
   root.style.setProperty("--kw-n", String(Math.min(list.length, 3)));
   if (!container.closest(".knobs-ui"))
     applyLook2(root, options);
   const slots = [];
   const tiles = list.map((o, i) => {
     const tile = el2(doc, "div", "knobs-wt-option");
+    if (!pickable) {
+      const name = el2(doc, "span", "knobs-wt-slot-label");
+      name.textContent = o.label;
+      tile.append(name);
+    }
     const pick = el2(doc, "button", "knobs-wt-pick");
     pick.type = "button";
     pick.setAttribute("role", "radio");
@@ -21390,7 +22372,8 @@ function tasteTest(container, options) {
       api.pick(next);
       options.onPick?.(next);
     });
-    tile.append(pick);
+    if (pickable)
+      tile.append(pick);
     if (o.media)
       slots.push(mediaSlot(tile, {
         ...look,
@@ -21469,8 +22452,13 @@ function walkthrough(container, options) {
   let count = null;
   let fill = null;
   let tocEl = null;
-  let mark = null;
+  let pill = null;
+  let tocRows = [];
+  let discs = [];
   let full = null;
+  const review = options.review === true;
+  const noteMode = review ? options.noteBar ?? "collapsed" : "hidden";
+  let reserve = noteBarReserve(52, DOCK_INSET, DOCK_GAP);
   const viewOf = (key) => views.find((v) => v.step.key === key);
   const feedback = () => collectFeedback(page, state);
   const markdown = () => feedbackMarkdown(feedback(), page.verdicts);
@@ -21494,9 +22482,6 @@ function walkthrough(container, options) {
     else
       run();
   };
-  const pillY = new Spring(0, CALM2.omega, CALM2.zeta, 0.25);
-  const pillH = new Spring(0, CALM2.omega, CALM2.zeta, 0.25);
-  let pillPlaced = false;
   const scroll = {
     spring: new Spring(0, CALM2.omega, CALM2.zeta, 0.5),
     to: null,
@@ -21504,13 +22489,6 @@ function walkthrough(container, options) {
   };
   const motion = frameLoop(win, (dt) => {
     let more = false;
-    if (mark) {
-      pillY.step(dt);
-      pillH.step(dt);
-      mark.style.transform = `translateY(${grid3(pillY.x)}px)`;
-      mark.style.height = `${grid3(pillY.x + pillH.x) - grid3(pillY.x)}px`;
-      more ||= !pillY.resting || !pillH.resting;
-    }
     if (scroll.to && scroll.el) {
       scroll.spring.set(scrollTarget(scroll.to, scroll.el));
       scroll.spring.step(dt);
@@ -21574,21 +22552,12 @@ function walkthrough(container, options) {
     v.glyph.dataset.tone = v.step.ask === "none" ? "none" : verdict ? verdictTone(verdict, page.verdicts.findIndex((x) => x.id === verdict)) : done ? "accent" : "dim";
   };
   const placeMark = () => {
-    if (!mark || !tocEl)
+    if (!pill || !tocEl)
       return;
+    pill.update();
     const row = viewOf(current)?.toc;
     if (!row)
-      return void mark.removeAttribute("data-on");
-    mark.dataset.on = "";
-    if (!pillPlaced || reduced()) {
-      pillY.snap(row.offsetTop);
-      pillH.snap(row.offsetHeight);
-      pillPlaced = true;
-    } else {
-      pillY.set(row.offsetTop);
-      pillH.set(row.offsetHeight);
-    }
-    motion.wake();
+      return;
     const top = row.offsetTop;
     const bottom = top + row.offsetHeight;
     if (top < tocEl.scrollTop + 8)
@@ -21605,6 +22574,9 @@ function walkthrough(container, options) {
     const v = viewOf(key);
     v?.card.setAttribute("data-current", "");
     v?.toc?.setAttribute("aria-current", "step");
+    for (const r of tocRows)
+      if (r.dataset.section)
+        r.toggleAttribute("data-active", r.dataset.section === v?.step.section);
     if (key)
       record({ what: "step", step: key });
     placeMark();
@@ -21621,6 +22593,16 @@ function walkthrough(container, options) {
       else
         break;
     }
+    const s = scrollerOf(root);
+    if (s.scrollTop > 0 && s.scrollTop >= s.scrollHeight - s.clientHeight - 2) {
+      const bottom = (s === doc.scrollingElement ? win.innerHeight : s.getBoundingClientRect().bottom) - reserve;
+      for (let i = views.length - 1;i >= 0; i--) {
+        if (views[i].card.getBoundingClientRect().top < bottom) {
+          pick = views[i].step.key;
+          break;
+        }
+      }
+    }
     setCurrent(pick);
   };
   let scrollRaf = 0;
@@ -21663,15 +22645,20 @@ function walkthrough(container, options) {
   };
   const scrim = el2(doc, "div", "knobs-wt-scrim");
   scrim.addEventListener("click", () => setFull(false));
-  const fullRect = () => ({ x: 12, y: 12, w: win.innerWidth - 24, h: win.innerHeight - 24 });
+  const fullRect = () => ({
+    x: DOCK_INSET,
+    y: DOCK_INSET,
+    w: win.innerWidth - DOCK_INSET * 2,
+    h: win.innerHeight - DOCK_INSET - reserve
+  });
   const placeFull = (f) => {
     const a = f.hold.getBoundingClientRect();
     const b = fullRect();
     const k = reduced() ? Math.round(f.p.target) : f.p.x;
-    const left = grid3(a.left + (b.x - a.left) * k);
-    const top = grid3(a.top + (b.y - a.top) * k);
-    const right = grid3(a.right + (b.x + b.w - a.right) * k);
-    const bottom = grid3(a.bottom + (b.y + b.h - a.bottom) * k);
+    const left = grid2(a.left + (b.x - a.left) * k);
+    const top = grid2(a.top + (b.y - a.top) * k);
+    const right = grid2(a.right + (b.x + b.w - a.right) * k);
+    const bottom = grid2(a.bottom + (b.y + b.h - a.bottom) * k);
     const s = f.v.card.style;
     s.left = `${left}px`;
     s.top = `${top}px`;
@@ -21808,6 +22795,7 @@ function walkthrough(container, options) {
     ink.on = true;
     ink.layer.dataset.on = "";
     root.dataset.inking = "";
+    bar.setOpen(true);
     bar.sync();
   };
   const voice = {
@@ -21847,6 +22835,7 @@ function walkthrough(container, options) {
       });
       voice.recorder = rec;
       voice.started = performance.now();
+      bar.setOpen(true);
       rec.start();
       voice.timer = win.setInterval(() => bar.sync(), 250);
       bar.sync();
@@ -21873,7 +22862,10 @@ function walkthrough(container, options) {
     if (!v)
       return;
     backTo = key;
-    backPill.textContent = `← Back to ${v.step.number}`;
+    backPill.innerHTML = ICON.back;
+    const words = el2(doc, "span", "knobs-wt-back-label");
+    words.textContent = `Back to ${plainMarkdown(v.step.title)}`;
+    backPill.append(words);
     backPill.dataset.on = "";
     win.clearTimeout(backTimer);
     backTimer = win.setTimeout(hideBack, BACK_MS);
@@ -21905,7 +22897,41 @@ function walkthrough(container, options) {
     sendBtn.dataset.send = "";
     row.append(input, attach, fullBtn, penBtn, micBtn, sendBtn);
     box.append(on, row);
-    dock.append(backPill, box);
+    const launch = el2(doc, "button", "knobs-wt-launch");
+    launch.type = "button";
+    launch.innerHTML = ICON.pen;
+    launch.append("Note");
+    const kbd = el2(doc, "kbd");
+    kbd.textContent = "n";
+    launch.append(kbd);
+    launch.setAttribute("aria-label", "Write a note (n)");
+    launch.addEventListener("click", () => setOpen(true, true));
+    dock.dataset.mode = noteMode;
+    dock.append(backPill, box, launch);
+    let open = noteMode !== "collapsed";
+    const setOpen = (on, focus = false) => {
+      if (noteMode === "collapsed" && on !== open) {
+        open = on;
+        dock.toggleAttribute("data-open", on);
+        box.inert = !on;
+        launch.inert = on;
+        syncReserve();
+      }
+      if (on && focus)
+        input.focus({ preventScroll: true });
+    };
+    dock.toggleAttribute("data-open", open);
+    box.inert = !open;
+    launch.inert = open;
+    const empty = () => !input.value.trim() && !voice.pending && !voice.recorder && !ink.on && !ink.paths.length;
+    const onOutside = (e) => {
+      if (open && noteMode === "collapsed" && !dock.contains(e.target) && empty())
+        setOpen(false);
+    };
+    doc.addEventListener("pointerdown", onOutside, true);
+    const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => syncReserve()) : null;
+    ro?.observe(box);
+    ro?.observe(launch);
     const fit = () => {
       input.style.height = "auto";
       input.style.height = `${Math.min(140, input.scrollHeight)}px`;
@@ -21921,6 +22947,8 @@ function walkthrough(container, options) {
       } else if (e.key === "Escape") {
         e.preventDefault();
         input.blur();
+        if (empty())
+          setOpen(false);
         viewOf(current)?.card.focus({ preventScroll: true });
       }
     });
@@ -21940,13 +22968,13 @@ function walkthrough(container, options) {
     const sync = () => {
       const v = viewOf(current);
       const ctx = describeMedia(mediaContext(v));
-      const where = v ? `${v.step.number} ${v.step.title}` : "General note";
+      const where = v ? plainMarkdown(v.step.title) : "General note";
       const text = ctx ? `${where} · ${ctx}` : where;
       if (text !== lastOn) {
         on.textContent = text;
         lastOn = text;
       }
-      input.placeholder = v ? `Note on ${v.step.number}…  (n)` : "A note on the whole page…  (n)";
+      input.placeholder = v ? "A note on this step…  (n)" : "A note on the whole page…  (n)";
       const attached = `${voice.pending?.url ?? ""}|${ink.paths.length}`;
       if (attached !== lastAttached) {
         lastAttached = attached;
@@ -21985,14 +23013,45 @@ function walkthrough(container, options) {
     };
     return {
       dock,
+      box,
+      launch,
       input,
       sync,
+      get open() {
+        return open;
+      },
+      setOpen,
+      empty,
+      unobserve: () => {
+        ro?.disconnect();
+        doc.removeEventListener("pointerdown", onOutside, true);
+      },
       clear() {
         input.value = "";
         fit();
       }
     };
   })();
+  let padded = null;
+  function syncReserve() {
+    if (disposed)
+      return;
+    const h = (bar.open ? bar.box : bar.launch).offsetHeight;
+    if (noteMode === "hidden")
+      reserve = 0;
+    else if (h)
+      reserve = noteBarReserve(h, DOCK_INSET, DOCK_GAP);
+    root.style.setProperty("--kw-reserve", `${reserve}px`);
+    const s = scrollerOf(root);
+    if (padded?.el !== s) {
+      if (padded)
+        padded.el.style.scrollPaddingBottom = padded.was;
+      padded = { el: s, was: s.style.scrollPaddingBottom };
+    }
+    s.style.scrollPaddingBottom = `${reserve}px`;
+    if (full)
+      placeFull(full);
+  }
   const ticker = win.setInterval(() => !doc.hidden && bar.sync(), 500);
   const send = (text = bar.input.value) => {
     if (voice.recorder)
@@ -22028,6 +23087,10 @@ function walkthrough(container, options) {
     syncProgress();
     emit();
     bar.sync();
+    if (noteMode === "collapsed") {
+      bar.input.blur();
+      bar.setOpen(false);
+    }
     if (v && options.advance !== false) {
       const to = adjacentStep(views.map((x) => x.step.key), v.step.key, 1);
       if (to && to !== v.step.key) {
@@ -22035,7 +23098,8 @@ function walkthrough(container, options) {
           setFull(false);
         go(to);
         showBack(v.step.key);
-        bar.input.focus({ preventScroll: true });
+        if (noteMode === "docked")
+          bar.input.focus({ preventScroll: true });
       }
     }
   };
@@ -22122,28 +23186,121 @@ function walkthrough(container, options) {
     row.addEventListener("transitionend", done, { once: true });
     win.setTimeout(done, 600);
   };
+  const metaLine = (cls) => el2(doc, "div", `knobs-wt-metaline ${cls}`);
+  const metaText = (line, text, cls) => {
+    const s = el2(doc, "span", cls);
+    s.textContent = text;
+    line.append(s);
+    return s;
+  };
+  const findPRIn = (n) => findPR(page.prs, n, page.repo);
+  const metaLink = (line, text, href) => {
+    const n = prNumber(href);
+    if (n) {
+      const chip = prChip(doc, n, { href, ...findPRIn(n) });
+      line.append(chip);
+      return chip;
+    }
+    const a = el2(doc, "a");
+    a.href = href;
+    a.target = "_blank";
+    a.rel = "noreferrer";
+    a.textContent = text;
+    a.insertAdjacentHTML("beforeend", ICON.out);
+    line.append(a);
+    return a;
+  };
+  const feedItem = (f, now) => {
+    const li = el2(doc, "li", "knobs-wt-fi");
+    li.dataset.kind = f.kind;
+    const q = el2(doc, "div", "knobs-wt-fi-q");
+    const meta = metaLine("knobs-wt-fi-meta");
+    if (f.at !== null) {
+      const when = metaText(meta, ago(f.at, now));
+      when.title = new Date(f.at).toLocaleString();
+    } else
+      metaText(meta, f.kind === "qa" ? "Answer" : "Update");
+    const step = f.step ? page.steps.find((s) => s.key === f.step) : undefined;
+    if (step) {
+      const section = page.sections.find((s) => s.id === step.section);
+      const b = el2(doc, "button", "knobs-wt-fi-step");
+      b.type = "button";
+      b.textContent = section?.link?.label ?? plainMarkdown(step.title);
+      b.title = `Go to “${plainMarkdown(step.title)}”`;
+      b.addEventListener("click", () => go(step.key));
+      meta.append(b);
+    }
+    if (f.status) {
+      const id = f.status.toLowerCase();
+      const shipped = /^(ship|shipped|merged|done)$/.test(id);
+      const changes = /^(changes?|changes queued)$/.test(id);
+      const s = metaText(meta, shipped ? "Shipped" : changes ? "Changes queued" : f.status);
+      s.dataset.status = shipped ? "on" : changes ? "warn" : "";
+    }
+    q.append(meta);
+    if (f.q)
+      q.append(prose2(doc, "p", "knobs-wt-fi-ask", f.q));
+    else
+      q.append(prose2(doc, "p", "knobs-wt-fi-text", f.text));
+    li.append(q);
+    if (f.q || f.trail.length) {
+      const a = el2(doc, "div", "knobs-wt-fi-a");
+      if (f.q)
+        a.append(prose2(doc, "div", "knobs-wt-fi-answer", f.text));
+      if (f.trail.length) {
+        const list = el2(doc, "ol", "knobs-wt-trail");
+        for (const line of f.trail) {
+          const i = line.indexOf(" · ");
+          const row = el2(doc, "li");
+          const words = el2(doc, "span", "knobs-wt-trail-text");
+          words.textContent = i < 0 ? line : line.slice(i + 3);
+          row.append(words);
+          if (i >= 0) {
+            const at = el2(doc, "span", "knobs-wt-trail-at");
+            at.textContent = line.slice(0, i);
+            row.append(at);
+          }
+          list.append(row);
+        }
+        discs.push(disclosure(a, { label: "Context", count: f.trail.length, content: list }));
+      }
+      li.append(a);
+    }
+    return li;
+  };
   const build = () => {
     for (const v of views) {
       v.slots.forEach((s) => s.dispose());
       v.taste?.dispose();
     }
+    for (const d of discs)
+      d.dispose();
+    discs = [];
+    pill?.dispose();
+    pill = null;
+    tocRows = [];
     if (full) {
       full.p.snap(0);
       closeFull();
     }
     clearInk();
     views = [];
-    pillPlaced = false;
     root.textContent = "";
     root.removeAttribute("data-settled");
+    root.dataset.rail = options.rail === false ? "none" : options.rail === "right" ? "right" : "left";
+    root.toggleAttribute("data-cards", options.cards === true);
+    root.toggleAttribute("data-review", review);
     const layout = el2(doc, "div", "knobs-wt-layout");
     const main = el2(doc, "div", "knobs-wt-main");
+    const flow = el2(doc, "div", "knobs-wt-flow");
     const head = el2(doc, "header", "knobs-wt-head");
     const h1 = el2(doc, "h1", "knobs-wt-title");
     h1.textContent = page.title;
     head.append(h1);
     if (page.summary)
       head.append(prose2(doc, "p", "knobs-wt-summary", page.summary));
+    if (page.more)
+      head.append(more(page.more));
     if (page.meta.length) {
       const meta = el2(doc, "div", "knobs-wt-meta");
       for (const m of page.meta) {
@@ -22164,57 +23321,51 @@ function walkthrough(container, options) {
       }
       head.append(meta);
     }
-    main.append(head);
+    flow.append(head);
+    let feedEl = null;
     if (page.feed.length) {
-      const feed = el2(doc, "section", "knobs-wt-feed");
-      feed.setAttribute("aria-label", "Latest");
-      const list = el2(doc, "ol", "knobs-wt-feed-list knobs-scroll-fade");
+      feedEl = el2(doc, "section", "knobs-wt-feed");
+      feedEl.id = "wt-latest";
+      feedEl.setAttribute("aria-label", "Updates and answers");
+      const fh = el2(doc, "header", "knobs-wt-feed-head");
+      const h = el2(doc, "h2", "knobs-wt-feed-title");
+      h.textContent = page.feed.some((f) => f.kind === "qa") ? "Updates & Q&A" : "Updates";
+      const n = el2(doc, "span", "knobs-wt-feed-count");
+      n.textContent = String(page.feed.length);
+      fh.append(h, n);
+      const list = el2(doc, "ol", "knobs-wt-feed-list");
       const now = Date.now();
-      for (const f of page.feed) {
-        const li = el2(doc, "li", "knobs-wt-fi");
-        li.dataset.kind = f.kind;
-        const when = el2(doc, "span", "knobs-wt-fi-when");
-        when.textContent = f.at === null ? "" : ago(f.at, now);
-        if (f.at !== null)
-          when.title = new Date(f.at).toLocaleString();
-        const kind = el2(doc, "span", "knobs-wt-fi-kind");
-        kind.textContent = f.kind === "qa" ? "Answer" : "Update";
-        const body = el2(doc, "div", "knobs-wt-fi-body");
-        if (f.q)
-          body.append(prose2(doc, "p", "knobs-wt-fi-q", f.q));
-        body.append(prose2(doc, "p", "knobs-wt-fi-text", f.text));
-        li.append(when, kind, body);
-        if (f.step) {
-          const target = f.step;
-          const link = el2(doc, "button", "knobs-wt-fi-step");
-          link.type = "button";
-          link.textContent = page.steps.find((s) => s.key === target)?.number ?? "";
-          link.title = "Go to the step";
-          link.addEventListener("click", () => go(target));
-          li.append(link);
-        }
-        list.append(li);
-      }
-      feed.append(list);
-      main.append(feed);
+      for (const f of page.feed)
+        list.append(feedItem(f, now));
+      feedEl.append(fh, list);
+      flow.append(feedEl);
     }
     let rail = null;
-    count = fill = tocEl = mark = null;
+    count = fill = tocEl = null;
     if (options.rail !== false) {
       rail = el2(doc, "aside", "knobs-wt-rail");
-      rail.setAttribute("aria-label", "Progress");
-      const progress = el2(doc, "div", "knobs-wt-progress");
-      count = el2(doc, "div", "knobs-wt-count");
-      const meter = el2(doc, "div", "knobs-wt-bar");
-      fill = el2(doc, "div", "knobs-wt-fill");
-      meter.append(fill);
-      progress.append(count, meter);
+      rail.setAttribute("aria-label", "Contents");
       tocEl = el2(doc, "nav", "knobs-wt-toc");
       tocEl.setAttribute("aria-label", "Contents");
-      mark = el2(doc, "div", "knobs-wt-toc-mark");
-      tocEl.append(mark);
-      rail.append(progress, tocEl, actions(true));
-      if (options.keys !== false) {
+      if (feedEl) {
+        const group = el2(doc, "div", "knobs-wt-toc-group");
+        const target = feedEl;
+        group.append(tocRow("Latest", false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
+        tocEl.append(group);
+      }
+      if (review) {
+        const progress = el2(doc, "div", "knobs-wt-progress");
+        count = el2(doc, "div", "knobs-wt-count");
+        const meter = el2(doc, "div", "knobs-wt-bar");
+        fill = el2(doc, "div", "knobs-wt-fill");
+        meter.append(fill);
+        progress.append(count, meter);
+        rail.append(progress);
+      }
+      rail.append(tocEl);
+      if (review)
+        rail.append(actions(true));
+      if (review && options.keys !== false) {
         const keys = el2(doc, "div", "knobs-wt-keys");
         keys.innerHTML = "<kbd>j</kbd> <kbd>k</kbd> steps · <kbd>←</kbd> <kbd>→</kbd> seek · <kbd>f</kbd> full · <kbd>n</kbd> note" + (page.steps.some((s) => s.ask === "pick") ? " · <kbd>1</kbd>–<kbd>9</kbd> pick" : "");
         rail.append(keys);
@@ -22224,45 +23375,47 @@ function walkthrough(container, options) {
       const sec = el2(doc, "section", "knobs-wt-section");
       sec.id = `wt-${section.id}`;
       const sh = el2(doc, "header", "knobs-wt-shead");
-      if (section.link || section.status) {
-        const kicker = el2(doc, "div", "knobs-wt-kicker");
-        if (section.link) {
-          const a = el2(doc, "a");
-          a.href = section.link.href;
-          a.target = "_blank";
-          a.rel = "noreferrer";
-          a.textContent = `${section.link.label} ↗`;
-          kicker.append(a);
-        }
-        if (section.status) {
-          const s = statusLook(section.status);
-          const chip = el2(doc, "span", "knobs-wt-chip");
-          chip.dataset.tone = s.tone;
-          chip.textContent = s.label;
-          kicker.append(chip);
+      const status = review ? section.status : undefined;
+      if (section.kicker || section.link || status) {
+        const meta = metaLine("knobs-wt-kicker");
+        if (section.kicker)
+          metaText(meta, section.kicker, "knobs-wt-kicker-lead");
+        if (section.link)
+          metaLink(meta, section.link.label, section.link.href);
+        if (status) {
+          const s = statusLook(status);
+          metaText(meta, s.label, "knobs-wt-status").dataset.tone = s.tone;
         }
-        sh.append(kicker);
+        sh.append(meta);
       }
-      const h2 = el2(doc, "h2", "knobs-wt-stitle");
-      h2.textContent = section.title;
+      const h2 = el2(doc, "h2", "knobs-wt-heading");
+      h2.innerHTML = inlineMarkdown(section.title);
       sh.append(h2);
+      const intro = el2(doc, "div", "knobs-wt-sintro");
+      intro.append(sh);
       if (section.summary)
-        sh.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
-      sec.append(sh);
+        intro.append(prose2(doc, "p", "knobs-wt-ssum", section.summary));
+      if (section.more)
+        intro.append(more(section.more));
+      sec.append(intro);
+      let group = null;
       if (tocEl) {
-        const t = el2(doc, "div", "knobs-wt-toc-section");
-        t.textContent = section.link ? `${section.link.label} ${section.title}` : section.title;
-        t.title = section.title;
-        tocEl.append(t);
+        group = el2(doc, "div", "knobs-wt-toc-group");
+        const first = section.steps[0]?.key;
+        group.append(tocRow(plainMarkdown(section.title), false, () => first ? go(first) : undefined, section.id));
+        tocEl.append(group);
       }
       for (const step of section.steps) {
-        const v = stepView(step);
+        const v = stepView(step, group);
         sec.append(v.card);
         views.push(v);
       }
-      main.append(sec);
+      flow.append(sec);
     }
-    main.append(bar.dock);
+    linkPRs(flow, findPRIn);
+    main.append(flow);
+    if (noteMode !== "hidden")
+      main.append(bar.dock);
     if (rail)
       layout.append(rail);
     layout.append(main);
@@ -22272,16 +23425,46 @@ function walkthrough(container, options) {
       for (const n of notesOn(state, v.step.key))
         renderNote(v, n);
     }
+    if (tocEl)
+      pill = selectionPill(tocEl, {
+        selected: () => viewOf(current)?.toc ?? null,
+        rows: () => tocRows
+      });
     syncProgress();
     current = null;
     fromScroll();
     placeMark();
     bar.sync();
+    syncReserve();
     win.requestAnimationFrame(() => win.requestAnimationFrame(() => {
       if (!disposed && !reduced())
         root.dataset.settled = "";
     }));
   };
+  const more = (text) => {
+    const box = el2(doc, "div", "knobs-wt-more");
+    const body = el2(doc, "div", "knobs-wt-more-text");
+    for (const para of text.split(/\n\s*\n/))
+      if (para.trim())
+        body.append(prose2(doc, "p", "", para.trim()));
+    discs.push(disclosure(box, { label: "More", content: body }));
+    return box;
+  };
+  const tocRow = (label, sub, run, section) => {
+    const b = el2(doc, "button", sub ? "knobs-wt-toc-row knobs-wt-toc-sub" : "knobs-wt-toc-row");
+    b.type = "button";
+    if (section)
+      b.dataset.section = section;
+    const t = el2(doc, "span", "knobs-wt-toc-label");
+    t.textContent = label;
+    const e = el2(doc, "span", "knobs-wt-toc-end");
+    b.title = label;
+    b.append(t, e);
+    b.addEventListener("mousedown", (ev) => ev.preventDefault());
+    b.addEventListener("click", run);
+    tocRows.push(b);
+    return b;
+  };
   const actions = (rail) => {
     const row = el2(doc, "div", "knobs-wt-actions");
     const btn = (text, run, primary = false) => {
@@ -22322,37 +23505,38 @@ function walkthrough(container, options) {
       toast("Couldn't reach the clipboard", { tone: "warn", look, doc });
     }
   };
-  const stepView = (step) => {
-    const card = el2(doc, "article", "knobs-wt-step knobs-surface");
+  const stepView = (step, group) => {
+    const card = el2(doc, "article", options.cards ? "knobs-wt-step knobs-surface" : "knobs-wt-step");
     card.id = `wt-${step.key.replace("/", "--")}`;
     card.tabIndex = -1;
     card.dataset.key = step.key;
-    card.setAttribute("aria-label", `${step.number} ${step.title}`);
+    card.setAttribute("aria-label", plainMarkdown(step.title));
     const head = el2(doc, "header", "knobs-wt-step-head");
-    const num = el2(doc, "span", "knobs-wt-num");
-    num.textContent = step.number;
     const h3 = el2(doc, "h3", "knobs-wt-stepTitle");
-    h3.textContent = step.title;
-    head.append(num, h3);
-    card.append(head);
+    h3.innerHTML = inlineMarkdown(step.title);
+    head.append(h3);
     if (step.caption)
-      card.append(prose2(doc, "p", "knobs-wt-caption", step.caption));
+      head.append(prose2(doc, "p", "knobs-wt-caption", step.caption));
+    if (step.more)
+      head.append(more(step.more));
+    card.append(head);
     const slots = [];
     const onEvent = (e) => record({ ...e, step: step.key });
     let media = null;
     if (step.media.length) {
       media = el2(doc, "div", "knobs-wt-media");
-      media.style.setProperty("--kw-n", String(Math.min(step.media.length, 3)));
+      media.style.setProperty("--kw-n", String(Math.min(step.media.length, step.columns)));
       for (const m of step.media)
         slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks }));
       card.append(media);
     }
     let taste = null;
-    if (step.question)
+    if (step.question && review)
       card.append(prose2(doc, "p", "knobs-wt-question", step.question));
     if (step.ask === "pick") {
       taste = tasteTest(card, {
         ...look,
+        pickable: review,
         options: step.options,
         picked: state.steps[step.key]?.pick ?? null,
         onPick: (id) => pick(step.key, id),
@@ -22361,7 +23545,8 @@ function walkthrough(container, options) {
       media ??= taste.element;
     }
     const notes = el2(doc, "div", "knobs-wt-notes");
-    card.append(notes);
+    if (review)
+      card.append(notes);
     card.addEventListener("focusin", () => {
       if (scroll.to)
         return;
@@ -22370,16 +23555,13 @@ function walkthrough(container, options) {
     });
     let toc = null;
     let glyph = null;
-    if (tocEl) {
-      toc = el2(doc, "button", "knobs-wt-toc-step");
-      toc.type = "button";
-      glyph = el2(doc, "span", "knobs-wt-toc-glyph");
-      const label = el2(doc, "span", "knobs-wt-toc-label");
-      label.textContent = step.title;
-      toc.title = `${step.number} ${step.title}`;
-      toc.append(glyph, label);
-      toc.addEventListener("click", () => go(step.key));
-      tocEl.append(toc);
+    if (group) {
+      toc = tocRow(plainMarkdown(step.title), true, () => go(step.key));
+      if (review) {
+        glyph = el2(doc, "span", "knobs-wt-toc-glyph");
+        toc.querySelector(".knobs-wt-toc-end").append(glyph);
+      }
+      group.append(toc);
     }
     return { step, card, media, notes, toc, glyph, taste, slots };
   };
@@ -22438,19 +23620,25 @@ function walkthrough(container, options) {
         setFull(false);
       return go(next);
     }
+    if ((key === "Home" || key === "End") && views.length) {
+      claim();
+      if (full)
+        setFull(false);
+      return go(views[key === "Home" ? 0 : views.length - 1].step.key);
+    }
     if (key === "ArrowLeft" || key === "ArrowRight") {
       const d = (key === "ArrowLeft" ? -1 : 1) * (e.shiftKey ? 2 : 0.5);
       if (seekBy(d))
         claim();
       return;
     }
-    if (key === "n") {
+    if (key === "n" && noteMode !== "hidden") {
       claim();
-      bar.input.focus({ preventScroll: true });
+      bar.setOpen(true, true);
       return;
     }
     const v = viewOf(current);
-    if (!v || e.shiftKey)
+    if (!v || e.shiftKey || !review)
       return;
     const choice = digitChoice(v.step, state.steps[v.step.key], key);
     if (choice === undefined)
@@ -22525,6 +23713,12 @@ function walkthrough(container, options) {
         win.removeEventListener(type, stopScroll);
       doc.removeEventListener("keydown", onKey);
       unregisterHints();
+      bar.unobserve();
+      pill?.dispose();
+      for (const d of discs)
+        d.dispose();
+      if (padded)
+        padded.el.style.scrollPaddingBottom = padded.was;
       for (const v of views) {
         v.slots.forEach((s) => s.dispose());
         v.taste?.dispose();
@@ -22609,6 +23803,7 @@ export {
   mediaKind,
   mediaSlot,
   menu,
+  minutes,
   modeForKey,
   motionBlur,
   moveHead,
@@ -22628,6 +23823,7 @@ export {
   plainAccess,
   planBento,
   planPill,
+  player,
   popover,
   railSegments,
   rank,