@kitlangton/knobs 0.4.0-next.2 → 0.4.0-next.4

package/dist/ui-react.js

@@ -571,12 +571,20 @@ var compareCss = `
   display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:160px;outline:none;user-select:none;-webkit-user-select: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-ui) :is(.knobs-cmp-mode,.knobs-cmp-toggle){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:2px;height:24px;padding:0 2px}
-.knobs-cmp-modes{display:flex;align-items:center;gap:2px}
-.knobs-ui .knobs-cmp-mode,.knobs-ui .knobs-cmp-toggle{height:22px;padding:0 7px;border-radius:max(0px,calc(var(--_k-radius) - 2px));color:var(--_k-fg-3);cursor:pointer;white-space:nowrap;
-  transition:color .15s,background .15s}
-.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible),.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
-.knobs-ui .knobs-cmp-mode[aria-checked="true"],.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
+.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:var(--_k-gap);height:var(--_k-control-h)}
+/* The modes: one fill, the selection pill on the one picked; a mode isn't brighter for being
+   picked: the pill's bright copy is. */
+.knobs-cmp-modes{position:relative;display:inline-flex;height:var(--_k-control-h);border-radius:var(--_k-radius);background:var(--_k-fill)}
+.knobs-cmp-modes[hidden]{display:none}
+.knobs-ui .knobs-cmp-mode{display:inline-flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
+  transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible){color:var(--_k-fg)}
+/* Toggles: icon buttons, the accent's wash when on. */
+.knobs-ui .knobs-cmp-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:var(--_k-radius);color:var(--_k-fg-3);cursor:pointer;
+  transition:color calc(var(--_k-hover-out) * 1ms),background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
+.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}
+.knobs-cmp-toggle svg{display:block}
 .knobs-cmp-fill{flex:1}
 .knobs-cmp-toggle[hidden]{display:none}
 /* One surface: on a card (a walkthrough's step, a split's pane, anything .knobs-surface) or marked
@@ -591,7 +599,8 @@ var compareCss = `
 /* 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}
-.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:ew-resize!important}
+/* Wiping, the grip stands in for the cursor. */
+.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:none!important}
 .knobs-cmp-sizer{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}
 .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}
@@ -599,18 +608,26 @@ var compareCss = `
 /* 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 .15s}
-.knobs-cmp-label[data-lit]{color:var(--_k-fg)}
-.knobs-cmp-label[data-dim]{color:var(--_k-fg-3)}
-/* The wipe: a hairline down the line with a grip at its middle; a wider strip takes the hand and
-   the keys (a slider). It fades with the mode. */
+/* ✗ 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)}
+.knobs-cmp-mark svg{display:block;width:12px;height:12px}
+/* 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)}
-.knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:var(--_ku-cmp-line);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
-.knobs-cmp-handle::after{content:"";position:absolute;top:50%;left:9px;width:6px;height:28px;margin-top:-14px;border-radius:3px;background:var(--_ku-cmp-line);
-  box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.2);transition:scale .18s var(--_ku-ease),box-shadow .15s}
-.knobs-compare[data-dragging] .knobs-cmp-handle::after{scale:1.12}
-.knobs-cmp-handle:focus-visible::after,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus::after{box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--_k-accent) 40%,transparent)}
+.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);
+  box-shadow:var(--_k-shadow-overlay),inset 0 0 0 1px var(--_k-border),inset 0 1px 0 var(--_k-rim);will-change:transform;transition:box-shadow calc(var(--_k-hover-out) * 1ms)}
+.knobs-cmp-grip::before,.knobs-cmp-grip::after{content:"";position:absolute;top:10px;width:1px;height:8px;background:var(--_k-fg-3);transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-cmp-grip::before{left:6px}
+.knobs-cmp-grip::after{left:9px}
+.knobs-compare[data-dragging] .knobs-cmp-grip{box-shadow:var(--_k-shadow-overlay),inset 0 0 0 1px var(--_k-border-strong),inset 0 1px 0 var(--_k-rim)}
+.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_k-fg)}
+.knobs-cmp-handle:focus-visible .knobs-cmp-grip,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus .knobs-cmp-grip{box-shadow:var(--_k-shadow-overlay),0 0 0 2px var(--_k-accent)}
 /* The split's hairline, down the middle side by side. */
 .knobs-cmp-split{position:absolute;left:0;top:0;width:1px;height:0;margin-left:-.5px;background:color-mix(in srgb,var(--_k-bg) 72%,transparent);pointer-events:none;will-change:transform,opacity}
 /* Zoomed: how far, and a way back, in the stage's corner; it fades in and out, nothing shifts. */
@@ -619,12 +636,12 @@ var compareCss = `
   opacity:0;scale:.96;pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,1,1),scale .16s cubic-bezier(.4,0,1,1)}
 .knobs-cmp-zoom[data-on]{opacity:1;scale:1;pointer-events:auto;transition:opacity .2s cubic-bezier(.2,.8,.2,1),scale .2s cubic-bezier(.2,.8,.2,1)}
 :where(.knobs-ui) .knobs-cmp-zoom-reset{all:revert;box-sizing:border-box;font:inherit;letter-spacing:inherit;margin:0;border:0;outline:none;box-shadow:none;
-  height:20px;padding:0 8px;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
+  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
 :where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--_k-fg);background:color-mix(in srgb,var(--_k-fg) 12%,transparent)}
 .knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);font-size:var(--_k-text-meta);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
 .knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
-.knobs-cmp-timeline-host{flex:none;height:56px;min-height:0}
+.knobs-cmp-timeline-host{flex:none;min-height:0}
 /* The frame strip: Before over After per column, a difference bar under them, a dot where it peaks. */
 .knobs-ui.knobs-cmp-strip{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));position:relative;width:100%;height:100%;min-height:40px;overflow:hidden;cursor:col-resize;touch-action:none;
   font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg)}
@@ -767,7 +784,7 @@ var init_picker_css = __esm(() => {
 .knobs-picker-suggested{flex:none;color:var(--_k-fg-3);font-size:var(--_k-text-meta)}
 .knobs-picker-check{flex:none;display:flex;width:14px;height:14px;color:var(--_k-accent);opacity:0;scale:.6;filter:blur(2px);
   transition:opacity .11s ease-in,scale .11s ease-in,filter .11s ease-in}
-.knobs-picker-check svg{display:block;width:14px;height:14px}
+.knobs-picker-check svg{display:block;width:12px;height:12px}
 .knobs-picker-option[data-chosen] .knobs-picker-check{opacity:1;scale:1;filter:none;transition:opacity .15s ease-out,scale var(--kp-snappy-ms) var(--kp-snappy),filter .15s ease-out}
 .knobs-picker-body{position:relative;overflow:visible}
 .knobs-picker-body[data-moving]{overflow:hidden}
@@ -871,6 +888,15 @@ var readoutCss = `
 @media(prefers-reduced-motion:reduce){.knobs-rd :where(*){transition:none!important}}
 `;
 
+// src/ui/selection-pill-css.ts
+var selectionPillCss = `
+.knobs-pick-pill,.knobs-pick-copy{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:opacity .1s linear}
+.knobs-pick-pill{background:var(--_k-fill-selected);will-change:transform}
+.knobs-pick-copy{overflow:hidden;will-change:transform}
+.knobs-pick-copy-rows{position:absolute;left:0;top:0;width:0;height:0}
+:is(.knobs-pick-pill,.knobs-pick-copy)[data-off]{opacity:0}
+`;
+
 // src/tokens/color.ts
 function linearToOklch([r, g, b, a]) {
   const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
@@ -1311,6 +1337,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",
@@ -1401,6 +1443,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: "Section headings (a PR's title, under its kicker), 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: "A page's title, 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: "Labels over media, weight 500; mono inside body text."
+    },
+    {
+      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",
@@ -2365,16 +2551,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}`;
@@ -2585,6 +2773,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}
@@ -2719,11 +2913,9 @@ var css2 = `
 .knobs-tree:focus .knobs-tree-row[data-active][aria-selected="true"]::before{background:var(--_ku-select-focus)}
 .knobs-tree-row[data-drop="into"]::before{opacity:1;background:color-mix(in srgb,var(--_k-accent) 30%,transparent)}
 .knobs-tree-row[data-dragged]{opacity:.38}
-/* glide: one highlight under the selected row that glides between rows (the row's own stays off). */
-.knobs-tree-cursor{position:absolute;left:var(--_ku-row-x);right:var(--_ku-row-x);top:0;height:var(--_k-row);border-radius:var(--_ku-row-radius);background:var(--_ku-select);
-  opacity:0;pointer-events:none;will-change:transform;transition:opacity .15s ease-out,background .12s}
-.knobs-tree-cursor[data-on]{opacity:1}
-.knobs-tree:focus .knobs-tree-cursor{background:var(--_ku-select-focus)}
+/* glide: the selection pill on the selected row, in the selection's colour (the row's own stays off). */
+.knobs-tree>.knobs-pick-pill{background:var(--_ku-select)}
+.knobs-tree:focus>.knobs-pick-pill{background:var(--_ku-select-focus)}
 .knobs-tree[data-glide] .knobs-tree-row[aria-selected="true"]::before{opacity:0!important}
 .knobs-tree-row>*{position:relative}
 .knobs-tree-caret{flex:none;display:flex;align-items:center;justify-content:center;width:16px;height:100%;color:var(--_k-fg-3);transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
@@ -2755,22 +2947,20 @@ var css2 = `
   box-shadow:0 0 0 1px var(--_k-border-strong),0 6px 18px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1)));pointer-events:none;white-space:nowrap;font:var(--_k-weight) var(--_k-font-size)/1.6 var(--_k-font)}
 .knobs-tree-empty{padding:10px var(--_k-inset);color:var(--_k-fg-3)}
 
-/* Timeline: a transport (play, the time) beside a track: the ruler's canvas over a lane of
-   markers, ranges as soft bands, and the playhead, a hairline in the accent with a cap. */
+/* Timeline: play beside a track: the ruler's canvas over a lane of markers, ranges as soft bands,
+   and the playhead, a hairline in the accent with a cap. No clock: the time shows under the
+   pointer on the track (the tag), in seconds, while hovering or scrubbing. */
 :where(.knobs-timeline,.knobs-timeline *){box-sizing:border-box}
 .knobs-ui.knobs-timeline{display:flex;align-items:stretch;gap:10px;width:100%;height:100%;min-height:52px;padding:6px var(--_k-inset) 8px 8px;outline:none;user-select:none;-webkit-user-select: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-ui) :is(.knobs-tl-play,.knobs-tl-edit){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-tl-transport{flex:none;display:flex;align-items:center;gap:8px;min-width:96px}
+.knobs-tl-transport{flex:none;display:flex;align-items:center}
 .knobs-ui .knobs-tl-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);min-width:22px;min-height:22px;border-radius:calc(var(--_k-radius) * 999);
   background:var(--_k-fill-selected);color:var(--_k-fg);cursor:pointer;transition:background .15s,transform .15s var(--_ku-ease)}
 .knobs-ui .knobs-tl-play:hover{background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
 .knobs-ui .knobs-tl-play:active{transform:scale(.94)}
 .knobs-tl-play svg{width:12px;height:12px}
 .knobs-timeline[data-playing] .knobs-tl-play{background:var(--_k-accent);color:var(--_k-bg)}
-.knobs-tl-time{display:flex;flex-direction:column;line-height:1.2;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-tl-now{font:var(--_k-weight) var(--_k-value-size)/1.2 var(--_k-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--_k-fg);white-space:nowrap}
-.knobs-tl-sub{font-size:var(--_k-text-meta);color:var(--_k-fg-3);white-space:nowrap}
 .knobs-tl-track{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--_k-radius);background:var(--_k-fill);cursor:col-resize;touch-action:none;
   transition:background calc(var(--_k-hover-out) * 1ms)}
 .knobs-timeline:focus-visible .knobs-tl-track,.knobs-timeline[data-keyboard]:focus .knobs-tl-track{background:color-mix(in srgb,var(--_k-fill-selected) 80%,transparent)}
@@ -2794,7 +2984,8 @@ var css2 = `
 .knobs-tl-pin{position:absolute;top:13px;left:-5px;width:10px;height:10px;pointer-events:auto;cursor:grab}
 .knobs-tl-pin::after{content:"";position:absolute;inset:1.5px;border-radius:min(2px,var(--_k-radius));background:var(--knobs-tl-c);rotate:45deg;transition:background .15s,scale .2s var(--_ku-ease)}
 .knobs-tl-mlabel{position:absolute;top:26px;left:3px;max-width:140px;padding:0 6px;border-radius:max(0px,calc(var(--_k-radius) - 3px));background:var(--_k-fill-selected);color:var(--_k-fg);
-  font-size:var(--_k-text-meta);line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+  font-size:var(--_k-text-meta);line-height:17px;white-space:nowrap;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+.knobs-tl-mtext{display:block;overflow:hidden;white-space:nowrap}
 .knobs-tl-marker[data-selected]{--knobs-tl-c:var(--_k-accent)}
 .knobs-tl-marker[data-selected] .knobs-tl-mlabel{background:color-mix(in srgb,var(--_k-accent) 24%,var(--_k-fill-selected))}
 .knobs-tl-marker[data-selected] .knobs-tl-pin::after{scale:1.2}
@@ -2815,7 +3006,22 @@ var css2 = `
 .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}}
-`, uiCss = () => aliased(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss) + rolling_css_default, lookDefaults, tune = (s, m) => {
+.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
+   faint chapter ticks, the current one in text colour; nothing to edit. */
+.knobs-ui.knobs-timeline[data-variant="lane"]{height:auto;min-height:0;padding:0;gap:var(--_k-gap)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-track{height:var(--_k-control-h)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-ruler{height:100%}
+.knobs-timeline[data-variant="lane"] .knobs-tl-lane{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker::before{top:0;bottom:50%;left:-.75px;width:1.5px;background:var(--_k-fg-3)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker[data-current]::before{background:var(--_k-fg)}
+.knobs-timeline[data-variant="lane"] :is(.knobs-tl-pin,.knobs-tl-mlabel,.knobs-tl-rlabel){display:none}
+.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, lookDefaults, tune = (s, m) => {
   s.omega = m.omega;
   s.zeta = m.zeta;
   return s;
@@ -2973,33 +3179,29 @@ var init_diff_css = __esm(() => {
 .knobs-diff-fill{flex:1}
 .knobs-diff-nav{flex:none;display:inline-flex;align-items:center;gap:1px;color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-diff-nav>span{min-width:3.6em;text-align:center}
-:where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-seg>button,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-radius:0;
+:where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-choice,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){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-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
+.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
   transition:background .15s,color .15s,opacity .15s}
 .knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-diff-btn[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-ui .knobs-diff-btn:disabled{opacity:.35;cursor:default;background:transparent}
-.knobs-diff-btn svg{width:13px;height:13px}
+.knobs-diff-btn svg{width:16px;height:16px}
 /* Viewed: a check with its word, as on GitHub; the path dims once it's ticked. */
 .knobs-ui .knobs-diff-viewed{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--_k-control-h);padding:0 8px 0 6px;border-radius:var(--kd-ctl);color:var(--_k-fg-2);
   font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
 .knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
-.knobs-diff-viewed svg{width:13px;height:13px}
+.knobs-diff-viewed svg{width:16px;height:16px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
 .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: one pill that glides between the two, raised as a panel's segments are (a
-   lighter bg in dark, near white in light). */
-.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-segmented-track)}
-.knobs-ui .knobs-diff-seg>button{position:relative;z-index:1;padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
-  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color .15s}
-.knobs-ui .knobs-diff-seg>button:is(:hover,:focus-visible),.knobs-ui .knobs-diff-seg>button[aria-checked="true"]{color:var(--_k-fg)}
-.knobs-diff-pill{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:max(0px,calc(var(--kd-ctl) - 2px));background:color-mix(in srgb,var(--_k-accent) 18%,var(--_k-segmented-active));
-  box-shadow:0 1px 2px rgba(0,0,0,calc(.16 * var(--k-lift,1)));transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
-.knobs-diff-seg[data-value="unified"]>.knobs-diff-pill{transform:translateX(100%)}
-.knobs-diff[data-frame="flat"] .knobs-diff-pill{box-shadow:none}
+/* Split | Unified: the selection pill on the one picked, its bright copy the picked one's text; a
+   choice isn't brighter for being picked. Choices are styled by class, as the copy holds them too. */
+.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-fill)}
+.knobs-ui .knobs-diff-choice{padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
+  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-diff-choice:is(:hover,:focus-visible){color:var(--_k-fg)}
 /* The diff: one layer per file or layout on show, the old fading under the new. */
 .knobs-diff-body{position:relative;flex:1;min-height:0}
 .knobs-diff-probe{position:absolute;left:0;top:0;width:0;height:var(--kd-line);visibility:hidden;pointer-events:none}
@@ -3094,7 +3296,7 @@ var init_diff_css = __esm(() => {
 .knobs-ui .knobs-diff-filter>input::placeholder{color:var(--_k-fg-3)}
 .knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--_k-fg-3);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
 .knobs-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-diff-filter>button svg{width:10px;height:10px}
+.knobs-diff-filter>button svg{width:12px;height:12px}
 .knobs-diff-list{position:relative;flex:1;min-height:0}
 .knobs-diff-files .knobs-diff-counts{font-size:var(--_k-text-meta);align-items:center}
 .knobs-diff-files .knobs-diff-counts{gap:5px}
@@ -3861,6 +4063,283 @@ var init_rgba = __esm(() => {
   cache = new Map;
 });
 
+// src/ui/icons.ts
+function icon(name, options = {}) {
+  const size = options.small ? 12 : 16;
+  return `<svg class="knobs-icon" viewBox="0 0 256 256" width="${size}" height="${size}" fill="currentColor" aria-hidden="true" focusable="false"><path d="${PATHS[name]}"/></svg>`;
+}
+var PATHS, ICON_NAMES;
+var init_icons = __esm(() => {
+  PATHS = {
+    arrowLeft: "M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z",
+    arrowUpRight: "M200,64V168a8,8,0,0,1-16,0V83.31L69.66,197.66a8,8,0,0,1-11.32-11.32L172.69,72H88a8,8,0,0,1,0-16H192A8,8,0,0,1,200,64Z",
+    arrowSquareOut: "M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z",
+    arrowCounterClockwise: "M224,128a96,96,0,0,1-94.71,96H128A95.38,95.38,0,0,1,62.1,197.8a8,8,0,0,1,11-11.63A80,80,0,1,0,71.43,71.39a3.07,3.07,0,0,1-.26.25L44.59,96H72a8,8,0,0,1,0,16H24a8,8,0,0,1-8-8V56a8,8,0,0,1,16,0V85.8L60.25,60A96,96,0,0,1,224,128Z",
+    arrowUDownLeft: "M232,112a64.07,64.07,0,0,1-64,64H51.31l34.35,34.34a8,8,0,0,1-11.32,11.32l-48-48a8,8,0,0,1,0-11.32l48-48a8,8,0,0,1,11.32,11.32L51.31,160H168a48,48,0,0,0,0-96H80a8,8,0,0,1,0-16h88A64.07,64.07,0,0,1,232,112Z",
+    arrowsHorizontal: "M136,40V216a8,8,0,0,1-16,0V40a8,8,0,0,1,16,0ZM96,120H35.31l18.35-18.34A8,8,0,0,0,42.34,90.34l-32,32a8,8,0,0,0,0,11.32l32,32a8,8,0,0,0,11.32-11.32L35.31,136H96a8,8,0,0,0,0-16Zm149.66,2.34-32-32a8,8,0,0,0-11.32,11.32L220.69,120H160a8,8,0,0,0,0,16h60.69l-18.35,18.34a8,8,0,0,0,11.32,11.32l32-32A8,8,0,0,0,245.66,122.34Z",
+    caretDown: "M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z",
+    caretLeft: "M165.66,202.34a8,8,0,0,1-11.32,11.32l-80-80a8,8,0,0,1,0-11.32l80-80a8,8,0,0,1,11.32,11.32L91.31,128Z",
+    caretRight: "M181.66,133.66l-80,80a8,8,0,0,1-11.32-11.32L164.69,128,90.34,53.66a8,8,0,0,1,11.32-11.32l80,80A8,8,0,0,1,181.66,133.66Z",
+    caretUp: "M213.66,165.66a8,8,0,0,1-11.32,0L128,91.31,53.66,165.66a8,8,0,0,1-11.32-11.32l80-80a8,8,0,0,1,11.32,0l80,80A8,8,0,0,1,213.66,165.66Z",
+    check: "M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z",
+    checkCircle: "M173.66,98.34a8,8,0,0,1,0,11.32l-56,56a8,8,0,0,1-11.32,0l-24-24a8,8,0,0,1,11.32-11.32L112,148.69l50.34-50.35A8,8,0,0,1,173.66,98.34ZM232,128A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z",
+    circle: "M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Z",
+    copy: "M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z",
+    cornersIn: "M152,96V48a8,8,0,0,1,16,0V88h40a8,8,0,0,1,0,16H160A8,8,0,0,1,152,96ZM96,152H48a8,8,0,0,0,0,16H88v40a8,8,0,0,0,16,0V160A8,8,0,0,0,96,152Zm112,0H160a8,8,0,0,0-8,8v48a8,8,0,0,0,16,0V168h40a8,8,0,0,0,0-16ZM96,40a8,8,0,0,0-8,8V88H48a8,8,0,0,0,0,16H96a8,8,0,0,0,8-8V48A8,8,0,0,0,96,40Z",
+    cornersOut: "M216,48V88a8,8,0,0,1-16,0V56H168a8,8,0,0,1,0-16h40A8,8,0,0,1,216,48ZM88,200H56V168a8,8,0,0,0-16,0v40a8,8,0,0,0,8,8H88a8,8,0,0,0,0-16Zm120-40a8,8,0,0,0-8,8v32H168a8,8,0,0,0,0,16h40a8,8,0,0,0,8-8V168A8,8,0,0,0,208,160ZM88,40H48a8,8,0,0,0-8,8V88a8,8,0,0,0,16,0V56H88a8,8,0,0,0,0-16Z",
+    folder: "M216,72H130.67L102.93,51.2a16.12,16.12,0,0,0-9.6-3.2H40A16,16,0,0,0,24,64V200a16,16,0,0,0,16,16H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72Zm0,128H40V64H93.33L123.2,86.4A8,8,0,0,0,128,88h88Z",
+    keyboard: "M224,48H32A16,16,0,0,0,16,64V192a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V64A16,16,0,0,0,224,48Zm0,144H32V64H224V192Zm-16-64a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,128Zm0-32a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16H200A8,8,0,0,1,208,96ZM72,160a8,8,0,0,1-8,8H56a8,8,0,0,1,0-16h8A8,8,0,0,1,72,160Zm96,0a8,8,0,0,1-8,8H96a8,8,0,0,1,0-16h64A8,8,0,0,1,168,160Zm40,0a8,8,0,0,1-8,8h-8a8,8,0,0,1,0-16h8A8,8,0,0,1,208,160Z",
+    magnifyingGlass: "M229.66,218.34l-50.07-50.06a88.11,88.11,0,1,0-11.31,11.31l50.06,50.07a8,8,0,0,0,11.32-11.32ZM40,112a72,72,0,1,1,72,72A72.08,72.08,0,0,1,40,112Z",
+    magnifyingGlassMinus: "M152,112a8,8,0,0,1-8,8H80a8,8,0,0,1,0-16h64A8,8,0,0,1,152,112Zm77.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88.11,88.11,0,1,1,11.31-11.31l50.07,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
+    magnifyingGlassPlus: "M152,112a8,8,0,0,1-8,8H120v24a8,8,0,0,1-16,0V120H80a8,8,0,0,1,0-16h24V80a8,8,0,0,1,16,0v24h24A8,8,0,0,1,152,112Zm77.66,117.66a8,8,0,0,1-11.32,0l-50.06-50.07a88.11,88.11,0,1,1,11.31-11.31l50.07,50.06A8,8,0,0,1,229.66,229.66ZM112,184a72,72,0,1,0-72-72A72.08,72.08,0,0,0,112,184Z",
+    microphone: "M128,176a48.05,48.05,0,0,0,48-48V64a48,48,0,0,0-96,0v64A48.05,48.05,0,0,0,128,176ZM96,64a32,32,0,0,1,64,0v64a32,32,0,0,1-64,0Zm40,143.6V240a8,8,0,0,1-16,0V207.6A80.11,80.11,0,0,1,48,128a8,8,0,0,1,16,0,64,64,0,0,0,128,0,8,8,0,0,1,16,0A80.11,80.11,0,0,1,136,207.6Z",
+    paperPlaneRight: "M231.87,114l-168-95.89A16,16,0,0,0,40.92,37.34L71.55,128,40.92,218.67A16,16,0,0,0,56,240a16.15,16.15,0,0,0,7.93-2.1l167.92-96.05a16,16,0,0,0,.05-27.89ZM56,224a.56.56,0,0,0,0-.12L85.74,136H144a8,8,0,0,0,0-16H85.74L56.06,32.16A.46.46,0,0,0,56,32l168,95.83Z",
+    pencilSimple: "M227.31,73.37,182.63,28.68a16,16,0,0,0-22.63,0L36.69,152A15.86,15.86,0,0,0,32,163.31V208a16,16,0,0,0,16,16H92.69A15.86,15.86,0,0,0,104,219.31L227.31,96a16,16,0,0,0,0-22.63ZM92.69,208H48V163.31l88-88L180.69,120ZM192,108.68,147.31,64l24-24L216,84.68Z",
+    repeat: "M24,128A72.08,72.08,0,0,1,96,56H204.69L194.34,45.66a8,8,0,0,1,11.32-11.32l24,24a8,8,0,0,1,0,11.32l-24,24a8,8,0,0,1-11.32-11.32L204.69,72H96a56.06,56.06,0,0,0-56,56,8,8,0,0,1-16,0Zm200-8a8,8,0,0,0-8,8,56.06,56.06,0,0,1-56,56H51.31l10.35-10.34a8,8,0,0,0-11.32-11.32l-24,24a8,8,0,0,0,0,11.32l24,24a8,8,0,0,0,11.32-11.32L51.31,200H160a72.08,72.08,0,0,0,72-72A8,8,0,0,0,224,120Z",
+    sidebar: "M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40ZM40,56H80V200H40ZM216,200H96V56H216V200Z",
+    x: "M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
+  };
+  ICON_NAMES = Object.keys(PATHS);
+});
+
+// src/ui/selection-pill.ts
+function pillSpring(distance, base = SPRINGS.default) {
+  return distance > 400 ? { duration: base.duration * 1.4, bounce: base.bounce } : base;
+}
+function pillBoxOf(row, container) {
+  return {
+    x: row.left - container.left - container.clientLeft + container.scrollLeft,
+    y: row.top - container.top - container.clientTop + container.scrollTop,
+    w: row.width,
+    h: row.height
+  };
+}
+function pillRadius(from, to, h, k) {
+  const t = Math.abs(to.h - from.h) > 0.5 ? (h - from.h) / (to.h - from.h) : Number.isFinite(k) ? k : 1;
+  return from.r + (to.r - from.r) * Math.min(1, Math.max(0, t));
+}
+function pillProgress(from, to, at) {
+  const d = Math.hypot(to.x - from.x, to.y - from.y);
+  if (d < 0.5)
+    return 1;
+  const p = ((at.x - from.x) * (to.x - from.x) + (at.y - from.y) * (to.y - from.y)) / (d * d);
+  return Math.min(1, Math.max(0, p));
+}
+function planPill(state, next, flags = {}) {
+  if (!next)
+    return { kind: "hide" };
+  if (!state.shown || !state.at || flags.first || flags.reduced || flags.snap)
+    return { kind: "land", box: next };
+  const t = state.target;
+  if (t && t.x === next.x && t.y === next.y && t.w === next.w && t.h === next.h)
+    return { kind: "stay" };
+  const d = Math.hypot(next.x - state.at.x, next.y - state.at.y);
+  return { kind: "travel", box: next, spring: pillSpring(d) };
+}
+function selectionPill(container, options) {
+  const doc = container.ownerDocument;
+  const win = doc.defaultView;
+  injectUiStyles(doc);
+  if (win.getComputedStyle(container).position === "static")
+    container.style.position = "relative";
+  const pill = doc.createElement("i");
+  pill.className = "knobs-pick-pill";
+  pill.setAttribute("aria-hidden", "true");
+  pill.dataset.off = "";
+  const copyOn = options.copy !== false;
+  const copy = doc.createElement("div");
+  copy.className = "knobs-pick-copy";
+  copy.setAttribute("aria-hidden", "true");
+  copy.inert = true;
+  copy.dataset.off = "";
+  const copyRows = doc.createElement("div");
+  copyRows.className = "knobs-pick-copy-rows";
+  copy.append(copyRows);
+  container.prepend(pill);
+  if (copyOn)
+    container.append(copy);
+  const { omega, zeta } = springMotion(SPRINGS.default);
+  const springs = [0, 0, 0, 0].map(() => new Spring(0, omega, zeta, 0.01));
+  const [sx, sy, sw, sh] = springs;
+  let shown = false;
+  let first = true;
+  let target = null;
+  let from = { x: 0, y: 0, w: 0, h: 0 };
+  let fromR = 0;
+  let toR = 0;
+  let rowBoxes = [];
+  const clones = new Map;
+  let disposed = false;
+  const radiusOf = (row) => options.radius?.(row) ?? (Number.parseFloat(win.getComputedStyle(row).borderTopLeftRadius) || 0);
+  const rowsNow = () => options.rows ? [...options.rows()] : [...container.children].filter((n) => n !== pill && n !== copy);
+  const measure = (row) => {
+    const c = container.getBoundingClientRect();
+    const r = row.getBoundingClientRect();
+    return pillBoxOf(r, {
+      left: c.left,
+      top: c.top,
+      scrollLeft: container.scrollLeft,
+      scrollTop: container.scrollTop,
+      clientLeft: container.clientLeft,
+      clientTop: container.clientTop
+    });
+  };
+  const at = () => ({ x: sx.x, y: sy.x, w: sw.x, h: sh.x });
+  const syncCopy = (span) => {
+    if (!copyOn)
+      return;
+    const keep = new Set;
+    for (const { row, box } of rowBoxes) {
+      if (!boxesMeet(box, span))
+        continue;
+      keep.add(row);
+      let n = clones.get(row);
+      if (!n) {
+        n = row.cloneNode(true);
+        n.removeAttribute("id");
+        for (const d of n.querySelectorAll("[id]"))
+          d.removeAttribute("id");
+        clones.set(row, n);
+        copyRows.append(n);
+      }
+      const s = n.style;
+      s.position = "absolute";
+      s.inset = "auto";
+      s.left = `${box.x}px`;
+      s.top = `${box.y}px`;
+      s.width = `${box.w}px`;
+      s.height = `${box.h}px`;
+      s.margin = "0";
+      s.transform = "none";
+      s.clipPath = "";
+      s.opacity = "";
+      s.boxSizing = "border-box";
+      s.color = options.color ?? "var(--_k-fg)";
+    }
+    for (const [row, n] of clones)
+      if (!keep.has(row)) {
+        n.remove();
+        clones.delete(row);
+      }
+  };
+  const paint = () => {
+    const b = at();
+    const x0 = grid(b.x);
+    const y0 = grid(b.y);
+    const w = grid(b.x + b.w) - x0;
+    const h = grid(b.y + b.h) - y0;
+    const r = target ? pillRadius({ h: from.h, r: fromR }, { h: target.h, r: toR }, b.h, pillProgress(from, target, b)) : toR;
+    const radius = `${Math.max(0, Math.min(r, h / 2, w / 2)).toFixed(2)}px`;
+    for (const n of copyOn ? [pill, copy] : [pill]) {
+      n.style.transform = `translate3d(${x0}px,${y0}px,0)`;
+      n.style.width = `${w}px`;
+      n.style.height = `${h}px`;
+      n.style.borderRadius = radius;
+    }
+    if (copyOn)
+      copyRows.style.transform = `translate3d(${-x0}px,${-y0}px,0)`;
+  };
+  const loop = frameLoop(win, (dt) => {
+    for (const s of springs)
+      s.step(dt);
+    paint();
+    return springs.some((s) => !s.resting);
+  });
+  const show = (on) => {
+    shown = on;
+    pill.toggleAttribute("data-off", !on);
+    copy.toggleAttribute("data-off", !on);
+    container.toggleAttribute("data-pick-empty", !on);
+  };
+  const update = (o) => {
+    if (disposed)
+      return;
+    const row = options.selected();
+    const next = row?.isConnected ? measure(row) : null;
+    const plan = planPill({ shown, at: shown ? at() : null, target }, next, {
+      first,
+      reduced: reducedMotion(win),
+      ...o?.snap ? { snap: true } : {}
+    });
+    first = false;
+    for (const n of clones.values())
+      n.remove();
+    clones.clear();
+    rowBoxes = copyOn ? rowsNow().filter((r) => r.isConnected).map((r) => ({ row: r, box: measure(r) })) : [];
+    if (plan.kind === "hide") {
+      if (shown)
+        show(false);
+      return;
+    }
+    if (plan.kind === "stay") {
+      syncCopy(boxUnion(at(), target));
+      return;
+    }
+    const r = radiusOf(row);
+    if (plan.kind === "land") {
+      sx.snap(plan.box.x);
+      sy.snap(plan.box.y);
+      sw.snap(plan.box.w);
+      sh.snap(plan.box.h);
+      from = plan.box;
+      fromR = r;
+      toR = r;
+      target = plan.box;
+      syncCopy(plan.box);
+      paint();
+      loop.stop();
+      if (!shown)
+        show(true);
+      return;
+    }
+    const m = springMotion(plan.spring);
+    for (const s of springs) {
+      s.omega = m.omega;
+      s.zeta = m.zeta;
+    }
+    const now = at();
+    fromR = target ? pillRadius({ h: from.h, r: fromR }, { h: target.h, r: toR }, now.h, pillProgress(from, target, now)) : r;
+    from = now;
+    toR = r;
+    target = plan.box;
+    sx.set(plan.box.x);
+    sy.set(plan.box.y);
+    sw.set(plan.box.w);
+    sh.set(plan.box.h);
+    syncCopy(boxUnion(now, plan.box));
+    loop.wake();
+  };
+  const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => update({ snap: true })) : null;
+  ro?.observe(container);
+  update();
+  return {
+    element: pill,
+    update,
+    dispose() {
+      disposed = true;
+      loop.stop();
+      ro?.disconnect();
+      pill.remove();
+      copy.remove();
+      container.removeAttribute("data-pick-empty");
+    }
+  };
+}
+var boxesMeet = (a, b) => a.x < b.x + b.w && b.x < a.x + a.w && a.y < b.y + b.h && b.y < a.y + a.h, boxUnion = (a, b) => {
+  const x = Math.min(a.x, b.x);
+  const y = Math.min(a.y, b.y);
+  return {
+    x,
+    y,
+    w: Math.max(a.x + a.w, b.x + b.w) - x,
+    h: Math.max(a.y + a.h, b.y + b.h) - y
+  };
+}, grid = (v) => Math.round(v * 64) / 64;
+var init_selection_pill = __esm(() => {
+  init_motion();
+  init_look();
+});
+
 // src/panel/hints.ts
 function extractWords(text) {
   return text.toLowerCase().match(/[a-z]+/g) ?? [];
@@ -4689,34 +5168,27 @@ function tree(container, options) {
   const empty = doc.createElement("div");
   empty.className = "knobs-tree-empty";
   empty.hidden = true;
-  const cursor = doc.createElement("div");
-  cursor.className = "knobs-tree-cursor";
-  root.append(space, cursor, line, empty);
-  const cursorY = new Spring(0, MOVE.omega, MOVE.zeta, 0.1);
-  let cursorOn = false;
-  const drawCursor = () => {
-    cursor.style.transform = `translate3d(0,${Math.round(cursorY.x * 2) / 2}px,0)`;
+  root.append(space, line, empty);
+  let pill = null;
+  let picked = null;
+  let travelUntil = 0;
+  const pickedRow = () => {
+    const id = sel.ids.length === 1 ? sel.ids[0] : null;
+    const v = id === null ? undefined : views.get(id);
+    return v && !v.leaving && rowIndex.has(v.id) ? v : null;
   };
   const placeCursor = (animate) => {
-    if (!options.glide)
+    if (!pill)
       return;
     const id = sel.ids.length === 1 ? sel.ids[0] : null;
-    const i = id === null ? undefined : rowIndex.get(id);
-    root.toggleAttribute("data-glide", i !== undefined);
-    if (i === undefined) {
-      cursor.removeAttribute("data-on");
-      cursorOn = false;
-      return;
-    }
-    if (cursorOn && animate && !reducedMotion(win))
-      cursorY.set(i * h);
-    else
-      cursorY.snap(i * h);
-    cursorOn = true;
-    cursor.setAttribute("data-on", "");
-    drawCursor();
-    if (!cursorY.resting)
-      loop.wake();
+    root.toggleAttribute("data-glide", id !== null && rowIndex.has(id));
+    const fresh = id !== picked;
+    picked = id;
+    if (animate && fresh) {
+      travelUntil = performance.now() + 450;
+      pill.update();
+    } else if (performance.now() >= travelUntil)
+      pill.update({ snap: true });
   };
   container.append(root);
   const scrollbar = overlayScrollbar(root, space);
@@ -4745,6 +5217,12 @@ function tree(container, options) {
   };
   const views = new Map;
   const pool = [];
+  if (options.glide)
+    pill = selectionPill(root, {
+      rows: () => [...views.values()].filter((v) => !v.leaving).map((v) => v.el),
+      selected: () => pickedRow()?.el ?? null,
+      radius: (row) => Number.parseFloat(win.getComputedStyle(row, "::before").borderTopLeftRadius) || 0
+    });
   const makeView = (id) => {
     const v = pool.pop() ?? createView();
     v.id = id;
@@ -4925,12 +5403,6 @@ function tree(container, options) {
   function frame(dt) {
     let moving = false;
     let bottom = rows.length * h;
-    if (options.glide && !cursorY.resting) {
-      cursorY.step(dt);
-      drawCursor();
-      if (!cursorY.resting)
-        moving = true;
-    }
     for (const v of views.values()) {
       v.y.step(dt);
       if (!v.y.resting)
@@ -4950,6 +5422,8 @@ function tree(container, options) {
     }
     setSpace(moving ? bottom : rows.length * h);
     trim();
+    if (pill && moving && performance.now() >= travelUntil)
+      pill.update({ snap: true });
     return moving;
   }
   const trim = () => {
@@ -5578,6 +6052,7 @@ function tree(container, options) {
       autoScroll.stop();
       ro.disconnect();
       scrollbar.dispose();
+      pill?.dispose();
       dragging?.ghost.remove();
       root.remove();
     }
@@ -5596,6 +6071,7 @@ var init_tree = __esm(() => {
   init_motion();
   init_page_hints();
   init_look();
+  init_selection_pill();
   init_tree_model();
   MOVE = springMotion(SPRINGS.default);
 });
@@ -5732,7 +6208,7 @@ function codeDiff(container, options) {
   };
   const nav = make("span", "knobs-diff-nav");
   const prev = button("Previous file", PREV);
-  const next = button("Next file", ICONS.caret);
+  const next = button("Next file", NEXT);
   const place = make("span", "");
   nav.append(prev, place, next);
   const wrapButton = button("Wrap lines", WRAP);
@@ -5753,9 +6229,8 @@ function codeDiff(container, options) {
   const seg = make("div", "knobs-diff-seg");
   seg.setAttribute("role", "radiogroup");
   seg.setAttribute("aria-label", "Layout");
-  const pill = make("i", "knobs-diff-pill");
   const choice = (value, label) => {
-    const b = make("button", "");
+    const b = make("button", "knobs-diff-choice");
     b.type = "button";
     b.setAttribute("role", "radio");
     b.dataset.value = value;
@@ -5764,7 +6239,7 @@ function codeDiff(container, options) {
   };
   const splitButton = choice("split", "Split");
   const unifiedButton = choice("unified", "Unified");
-  seg.append(pill, splitButton, unifiedButton);
+  seg.append(splitButton, unifiedButton);
   if (options.lead)
     head.append(options.lead);
   head.append(path, stat, make("span", "knobs-diff-fill"), nav, wrapButton, seg, viewedButton);
@@ -5775,6 +6250,11 @@ function codeDiff(container, options) {
   body.append(note, probe);
   root.append(head, body);
   container.append(root);
+  const segPill = selectionPill(seg, {
+    rows: () => [splitButton, unifiedButton],
+    selected: () => layout === "split" ? splitButton : unifiedButton
+  });
+  let pilled = layout;
   const fileNow = () => files.find((f) => f.name === current) ?? null;
   const paintHead = () => {
     const file = fileNow();
@@ -5807,6 +6287,10 @@ function codeDiff(container, options) {
     next.disabled = at >= files.length - 1;
     wrapButton.setAttribute("aria-pressed", String(wrap));
     seg.dataset.value = layout;
+    if (pilled !== layout) {
+      pilled = layout;
+      segPill.update();
+    }
     splitButton.setAttribute("aria-checked", String(layout === "split"));
     unifiedButton.setAttribute("aria-checked", String(layout === "unified"));
     splitButton.tabIndex = layout === "split" ? 0 : -1;
@@ -6641,6 +7125,7 @@ function codeDiff(container, options) {
     dispose() {
       disposed = true;
       loop.stop();
+      segPill.dispose();
       sizes.disconnect();
       attaching.disconnect();
       resized.disconnect();
@@ -6996,7 +7481,7 @@ function diffReview(container, options) {
     }
   };
 }
-var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE4, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
+var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE4, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, NEXT, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
 var init_diff = __esm(() => {
   init_glide();
   init_motion();
@@ -7004,6 +7489,8 @@ var init_diff = __esm(() => {
   init_diff_model();
   init_look();
   init_rgba();
+  init_icons();
+  init_selection_pill();
   init_tree();
   SYNTAX = { dark: "pierre-dark", light: "pierre-light" };
   IN = springMotion(SPRINGS.default);
@@ -7011,13 +7498,14 @@ var init_diff = __esm(() => {
   FADE4 = springMotion(FADE);
   HEIGHT = springMotion(SPRINGS.calm);
   DRAWER = springMotion(SPRINGS.calm);
-  WRAP = svg('<path d="M2.5 4h11"/><path d="M2.5 8h9a2 2 0 0 1 0 4H8.5"/><path d="M10 10.5 8.5 12l1.5 1.5"/><path d="M2.5 12h3"/>');
-  PREV = svg('<path d="M10 3.5 5.5 8l4.5 4.5"/>');
-  UNVIEWED = svg('<circle cx="8" cy="8" r="5.5"/>');
-  VIEWED = svg('<circle cx="8" cy="8" r="5.5"/><path d="m5.6 8.1 1.7 1.7 3.2-3.5"/>');
-  SEARCH = svg('<circle cx="7" cy="7" r="4.5"/><path d="m10.5 10.5 3 3"/>');
-  CLEAR2 = svg('<path d="m5 5 6 6M11 5l-6 6"/>');
-  SIDEBAR = svg('<rect x="2" y="3" width="12" height="10" rx="2"/><path d="M6.5 3v10"/>');
+  WRAP = icon("arrowUDownLeft");
+  PREV = icon("caretLeft");
+  NEXT = icon("caretRight");
+  UNVIEWED = icon("circle");
+  VIEWED = icon("checkCircle");
+  SEARCH = icon("magnifyingGlass", { small: true });
+  CLEAR2 = icon("x", { small: true });
+  SIDEBAR = icon("sidebar");
 });
 
 // src/ui/layer.ts
@@ -8000,10 +8488,25 @@ function advance(t, dt, o) {
   }
   return { t: hi, ended: true, wrapped: false };
 }
-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;
+function moveHead(head, t, motion, catching, minGap = 0) {
+  if (motion === "jump" && Math.abs(t - head.x) > minGap)
+    return { x: head.x, target: t, catching: true };
+  if (catching)
+    return { x: head.x + (t - head.target), target: t, catching: true };
+  return { x: t, target: t, catching: false };
+}
+function currentMarker(markers, t, fps) {
+  let best = null;
+  for (const m of markers)
+    if (m.time <= t + 0.5 / fps && (!best || m.time >= best.time))
+      best = m;
+  return best;
+}
+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];
   FRAME_STEPS = [1, 2, 5, 10, 15, 30, 60, 120, 300, 600, 900, 1800, 3600, 9000, 18000];
+  CATCH_UP = { duration: 0.15, bounce: 0 };
 });
 
 // src/ui/timeline.ts
@@ -8016,6 +8519,7 @@ function timeline(container, options) {
   let speed = options.speed ?? 1;
   let repeat = options.repeat ?? true;
   const arrows = options.arrows ?? "frames";
+  const lane = options.variant === "lane";
   let time = Math.min(duration, Math.max(0, options.time ?? 0));
   let playing = false;
   let markers = [...options.markers ?? []];
@@ -8049,27 +8553,27 @@ function timeline(container, options) {
   root.setAttribute("aria-label", options.label ?? "Timeline");
   root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight , . Home End [ ] I O M");
   applyLook2(root, options);
+  if (lane)
+    root.dataset.variant = "lane";
   const transport = el("div", "knobs-tl-transport");
   const playBtn = el("button", "knobs-tl-play");
   playBtn.type = "button";
   playBtn.tabIndex = -1;
-  const readout = el("div", "knobs-tl-time");
-  const now = el("span", "knobs-tl-now");
-  const sub = el("span", "knobs-tl-sub");
-  readout.append(now, sub);
-  transport.append(playBtn, readout);
+  transport.append(playBtn);
   const track = el("div", "knobs-tl-track");
   const canvas = el("canvas", "knobs-tl-ruler");
   canvas.setAttribute("aria-hidden", "true");
-  const lane = el("div", "knobs-tl-lane");
+  const markerLane = el("div", "knobs-tl-lane");
   const hover = el("div", "knobs-tl-hover");
+  const tag = el("span", "knobs-tl-tag");
+  tag.setAttribute("aria-hidden", "true");
   const head = el("div", "knobs-tl-head");
   head.id = `${id}-head`;
   head.setAttribute("role", "slider");
   head.setAttribute("aria-label", "Playhead");
   head.setAttribute("aria-valuemin", "0");
   head.setAttribute("aria-valuemax", String(duration));
-  track.append(canvas, lane, hover, head);
+  track.append(canvas, markerLane, hover, head, tag);
   root.append(transport, track);
   container.append(root);
   let width = 1;
@@ -8116,13 +8620,14 @@ function timeline(container, options) {
   let drawn = "";
   const drawRuler = () => {
     const v = view();
-    const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${units}:${fps}`;
+    const key = `${v.start.toFixed(6)}:${v.span.toFixed(6)}:${width}:${height}:${units}:${fps}`;
     if (key === drawn)
       return;
     drawn = key;
     const dpr = win.devicePixelRatio || 1;
     const w = Math.max(1, Math.round(width * dpr));
-    const h = Math.round(RULER * dpr);
+    const rh = lane ? height : RULER;
+    const h = Math.round(rh * dpr);
     if (canvas.width !== w || canvas.height !== h) {
       canvas.width = w;
       canvas.height = h;
@@ -8131,8 +8636,19 @@ function timeline(container, options) {
     if (!ctx)
       return;
     ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
-    ctx.clearRect(0, 0, width, RULER);
+    ctx.clearRect(0, 0, width, rh);
     const ticks = rulerTicks(v, width, { fps, units });
+    if (lane) {
+      ctx.fillStyle = colors.tick;
+      for (const t of ticks.minor)
+        if (t >= -0.000000001 && t <= duration + 0.000000001)
+          ctx.fillRect(xOf(t) - 0.5, rh - 4, 1, 4);
+      ctx.fillStyle = colors.major;
+      for (const m of ticks.major)
+        if (m.t >= -0.000000001 && m.t <= duration + 0.000000001)
+          ctx.fillRect(xOf(m.t) - 0.5, rh - 7, 1, 7);
+      return;
+    }
     const px = (t) => Math.round(xOf(t)) + 0.5;
     ctx.fillStyle = colors.line;
     ctx.fillRect(0, RULER - 1, width, 1);
@@ -8172,18 +8688,21 @@ function timeline(container, options) {
         n.dataset.id = m.id;
         const pin = el("span", "knobs-tl-pin");
         const label = el("span", "knobs-tl-mlabel");
+        label.append(el("span", "knobs-tl-mtext knobs-scroll-fade-x"));
         n.append(pin, label);
-        lane.append(n);
+        markerLane.append(n);
         markerEls.set(m.id, n);
         if (built)
           enter(n);
       }
       const label = n.querySelector(".knobs-tl-mlabel");
-      if (label.textContent !== (m.label ?? ""))
-        label.textContent = m.label ?? "";
+      const text = label.firstElementChild;
+      if (text.textContent !== (m.label ?? ""))
+        text.textContent = m.label ?? "";
       label.hidden = !m.label;
       n.style.setProperty("--knobs-tl-color", m.color ?? "");
       n.toggleAttribute("data-selected", selected?.kind === "marker" && selected.id === m.id);
+      n.toggleAttribute("data-current", m.id === currentId);
       n.title = `${m.label ? `${m.label} · ` : ""}${clock(m.time)}`;
     }
     placeMarkers();
@@ -8211,7 +8730,7 @@ function timeline(container, options) {
         b.dataset.edge = "end";
         const label = el("span", "knobs-tl-rlabel");
         n.append(label, a, b);
-        track.insertBefore(n, lane);
+        track.insertBefore(n, markerLane);
         rangeEls.set(r.id, n);
         if (built)
           enter(n);
@@ -8260,16 +8779,17 @@ function timeline(container, options) {
   };
   const clock = (t) => units === "frames" ? `f${toFrame(t, fps)}` : `${timeLabel(t, "seconds", fps, 0.01)}`;
   let shownHead = time;
+  let currentId = null;
   const renderHead = () => {
     head.style.transform = `translateX(${xOf(shownHead).toFixed(2)}px)`;
-    const main = units === "frames" ? `f${toFrame(time, fps)}` : `${time.toFixed(2)}s`;
-    const minor = units === "frames" ? `${time.toFixed(2)}s` : `f${toFrame(time, fps)}`;
-    if (now.textContent !== main)
-      now.textContent = main;
-    if (sub.textContent !== minor)
-      sub.textContent = minor;
     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;
+    if (cur !== currentId) {
+      markerEls.get(currentId ?? "")?.removeAttribute("data-current");
+      currentId = cur;
+      markerEls.get(cur ?? "")?.setAttribute("data-current", "");
+    }
   };
   let viewSent = "";
   const render = () => {
@@ -8295,18 +8815,27 @@ function timeline(container, options) {
   };
   const caret = new Spring(time, GLIDE.omega, GLIDE.zeta, 0.00001);
   let gliding = false;
-  const setTime = (t, source, shown = t, glide = false) => {
-    const next = Math.min(duration, Math.max(0, t));
-    if (glide && !reducedMotion(win)) {
+  const headTo = (shown, motion) => {
+    const from = gliding ? { x: caret.x, target: caret.target } : { x: shownHead, target: shownHead };
+    const jump = motion === "jump" && !reducedMotion(win);
+    const next = moveHead(from, shown, jump ? "jump" : "follow", gliding, 2 / pxPerSec());
+    if (next.catching) {
       if (!gliding)
-        caret.snap(shownHead);
-      caret.set(next);
+        caret.snap(from.x);
+      caret.x = next.x;
+      caret.target = next.target;
       gliding = true;
+      shownHead = caret.x;
       loop.wake();
     } else {
       gliding = false;
-      shownHead = shown;
+      caret.snap(next.x);
+      shownHead = next.x;
     }
+  };
+  const setTime = (t, source, shown = t, glide = false) => {
+    const next = Math.min(duration, Math.max(0, t));
+    headTo(Math.min(duration, Math.max(0, shown)), glide ? "jump" : "follow");
     const moved = next !== time;
     time = next;
     renderHead();
@@ -8347,8 +8876,7 @@ function timeline(container, options) {
             options.onCross?.(m);
       }
       time = step.t;
-      shownHead = time;
-      gliding = false;
+      headTo(time, step.wrapped ? "jump" : "follow");
       emitSeek(time, "play");
       keepInView();
       if (step.ended) {
@@ -8361,7 +8889,7 @@ function timeline(container, options) {
       shownHead = caret.step(dt);
       if (caret.resting) {
         gliding = false;
-        shownHead = time;
+        shownHead = caret.target;
       }
     }
     vStart.step(dt);
@@ -8374,9 +8902,9 @@ function timeline(container, options) {
       return;
     const r = loopRange();
     if (r && (time < r.start || time >= r.end - 0.5 / fps))
-      setTime(r.start, "code");
+      setTime(r.start, "code", r.start, true);
     else if (!r && time >= duration - 0.5 / fps)
-      setTime(0, "code");
+      setTime(0, "code", 0, true);
     playing = true;
     syncPlay();
     emitPlay(true);
@@ -8505,24 +9033,35 @@ function timeline(container, options) {
   };
   const localX = (e) => e.clientX - track.getBoundingClientRect().left;
   let drag = null;
-  const scrubTo = (x) => {
+  const scrubTo = (x, press = false) => {
     const shownX = softClamp(x, xOf(0), xOf(duration), 10);
     const s = scrubTime(tOf(shownX), {
       duration,
       fps,
       pxPerSec: pxPerSec(),
-      stops: snapMarkers ? markers.map((m) => m.time) : [],
+      stops: snapMarkers && !lane ? markers.map((m) => m.time) : [],
       frames: snapFrames
     });
-    setTime(s.t, "scrub", s.shown);
+    setTime(s.t, "scrub", s.shown, press);
     root.toggleAttribute("data-stuck", s.stop !== null);
   };
+  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 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"})`;
+    tag.dataset.on = "";
+  };
+  const hideTag = () => delete tag.dataset.on;
   track.addEventListener("pointerdown", (e) => {
     if (e.button !== 0 || editing)
       return;
     root.focus({ preventScroll: true });
     const t = e.target;
-    const markerEl = t.closest(".knobs-tl-marker");
+    const markerEl = lane ? null : t.closest(".knobs-tl-marker");
     const edgeEl = t.closest(".knobs-tl-edge");
     const rangeEl = t.closest(".knobs-tl-range");
     track.setPointerCapture(e.pointerId);
@@ -8567,13 +9106,16 @@ function timeline(container, options) {
       root.dataset.scrubbing = "";
       for (const l of listeners)
         l.onScrub?.(true);
-      scrubTo(localX(e));
+      scrubTo(localX(e), true);
+      showTag(localX(e));
     }
     e.preventDefault();
   });
   track.addEventListener("pointermove", (e) => {
     const x = localX(e);
     hover.style.transform = `translateX(${x.toFixed(1)}px)`;
+    if (!drag || drag.kind === "scrub")
+      showTag(x);
     if (!drag)
       return;
     if (drag.kind === "scrub")
@@ -8619,8 +9161,10 @@ function timeline(container, options) {
     delete root.dataset.dragging;
     root.removeAttribute("data-stuck");
     if (d.kind === "scrub") {
-      shownHead = time;
+      headTo(time, "follow");
       renderHead();
+      if (!track.matches(":hover"))
+        hideTag();
       for (const l of listeners)
         l.onScrub?.(false);
       if (d.wasPlaying)
@@ -8633,7 +9177,7 @@ function timeline(container, options) {
       } else {
         const m = markers.find((x) => x.id === d.id);
         if (m)
-          setTime(m.time, "marker");
+          setTime(m.time, "marker", m.time, true);
       }
     } else if (d.kind === "edge" || d.moved)
       emitRanges();
@@ -8642,10 +9186,14 @@ function timeline(container, options) {
   track.addEventListener("pointercancel", endDrag);
   track.addEventListener("lostpointercapture", endDrag);
   track.addEventListener("pointerleave", () => {
-    if (!drag)
-      hover.style.transform = "translateX(-100px)";
+    if (drag)
+      return;
+    hover.style.transform = "translateX(-100px)";
+    hideTag();
   });
   track.addEventListener("dblclick", (e) => {
+    if (lane)
+      return;
     const markerEl = e.target.closest(".knobs-tl-marker");
     if (markerEl)
       return rename(markerEl.dataset.id);
@@ -8656,6 +9204,8 @@ function timeline(container, options) {
       rename(m.id);
   });
   track.addEventListener("wheel", (e) => {
+    if (lane)
+      return;
     e.preventDefault();
     const scale = e.deltaMode === 1 ? 16 : e.deltaMode === 2 ? height : 1;
     if (e.ctrlKey || e.metaKey) {
@@ -8719,7 +9269,7 @@ function timeline(container, options) {
         if (!m)
           return;
         select({ kind: "marker", id: m.id });
-        return setTime(m.time, "marker");
+        return setTime(m.time, "marker", m.time, true);
       }
       case "i":
       case "I":
@@ -8731,11 +9281,13 @@ function timeline(container, options) {
         return setEdge("end", time);
       case "m":
       case "M":
+        if (lane)
+          return;
         claim();
         addMarker(time);
         return;
       case "Enter":
-        if (selected?.kind === "marker") {
+        if (selected?.kind === "marker" && !lane) {
           claim();
           rename(selected.id);
         }
@@ -8753,19 +9305,25 @@ function timeline(container, options) {
         return;
       case "=":
       case "+":
+        if (lane)
+          return;
         claim();
         return zoom(1.5);
       case "-":
+        if (lane)
+          return;
         claim();
         return zoom(1 / 1.5);
       case "0":
+        if (lane)
+          return;
         claim();
         return fit();
     }
   });
   const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [
     { el: playBtn, label: playing ? "Pause" : "Play", activate: toggle },
-    ...markers.flatMap((m) => {
+    ...(lane ? [] : markers).flatMap((m) => {
       const n = markerEls.get(m.id);
       if (!n || n.dataset.leaving !== undefined)
         return [];
@@ -8777,7 +9335,7 @@ function timeline(container, options) {
           ...label && !label.hidden ? { labelEl: label } : {},
           activate: () => {
             select({ kind: "marker", id: m.id });
-            setTime(m.time, "marker");
+            setTime(m.time, "marker", m.time, true);
             root.focus({ preventScroll: true });
           }
         }
@@ -8789,7 +9347,7 @@ function timeline(container, options) {
       activate: () => root.focus({ preventScroll: true })
     }
   ], { listen: false, rank: 1 });
-  const menu = contextMenu(track, (e) => {
+  const menu = lane ? null : contextMenu(track, (e) => {
     const t = e?.target ?? null;
     const markerEl = t?.closest(".knobs-tl-marker");
     const rangeEl = t?.closest(".knobs-tl-range");
@@ -8804,7 +9362,7 @@ function timeline(container, options) {
           run: () => {
             const m = markers.find((x) => x.id === mid);
             if (m)
-              setTime(m.time, "marker");
+              setTime(m.time, "marker", m.time, true);
           }
         },
         { label: "Rename…", shortcut: "Enter", run: () => rename(mid) },
@@ -8968,7 +9526,7 @@ function timeline(container, options) {
       listeners.clear();
       loop.stop();
       ro.disconnect();
-      menu.dispose();
+      menu?.dispose();
       root.remove();
     }
   };
@@ -8985,10 +9543,21 @@ var init_timeline = __esm(() => {
   init_timeline_model();
   INSTANT2 = springMotion(SPRINGS.instant);
   CALM = springMotion(SPRINGS.calm);
-  GLIDE = springMotion(SPRINGS.snappy);
+  GLIDE = springMotion(CATCH_UP);
 });
 
 // src/ui/compare-model.ts
+function compareModes(modes, mode) {
+  const list = [...new Set((modes ?? ["side", "wipe"]).filter((m) => ALL_MODES.includes(m)))];
+  const offered = list.length ? list : ["side", "wipe"];
+  return { modes: offered, mode: mode && offered.includes(mode) ? mode : offered[0] };
+}
+function modeForKey(key, modes) {
+  const k = key.toLowerCase();
+  if (/^[1-9]$/.test(k))
+    return modes[Number(k) - 1] ?? null;
+  return modes.find((m) => MODE_KEYS[m] === k) ?? null;
+}
 function mediaKind(src, kind) {
   if (kind)
     return kind;
@@ -9067,6 +9636,18 @@ function wipeGrab(x, rect, wipe, slop = 12) {
   const onLine = Math.abs(x - line) <= slop;
   return { onLine, offset: onLine ? x - line : 0 };
 }
+function seamLabels(x, left, right, wb, wa, gap = 8) {
+  const room = (space, w) => Math.min(1, Math.max(0, (space - w - 2 * gap) / gap));
+  return {
+    before: { x: x - gap - wb, opacity: room(x - left, wb) },
+    after: { x: x + gap, opacity: room(right - x, wa) }
+  };
+}
+function gripTop(y, rect, grip, margin = 8) {
+  const lo = rect.y + margin;
+  const hi = rect.y + rect.h - margin - grip;
+  return hi < lo ? rect.y + (rect.h - grip) / 2 : Math.min(hi, Math.max(lo, y - grip / 2));
+}
 function stripColumns(view, width, o) {
   const { fps } = o;
   const total = Math.max(1, Math.round(o.duration * fps));
@@ -9117,7 +9698,7 @@ function stripPeaks(diffs, o = {}) {
   });
   return out;
 }
-var 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), 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), 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({
   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
@@ -9136,6 +9717,8 @@ var VIDEO, frameOf = (t, fps) => Math.max(0, Math.floor(t * fps + 0.0001)), last
   h: a.h + (b.h - a.h) * k
 }), wipeX = (rect, wipe) => rect.x + Math.min(1, Math.max(0, wipe)) * rect.w, wipeAt = (x, rect, offset = 0) => rect.w <= 0 ? 0.5 : Math.min(1, Math.max(0, (x - offset - rect.x) / rect.w)), wipeKey = (wipe, dir, big = false) => Math.min(1, Math.max(0, Math.round((wipe + dir * (big ? 0.1 : 0.01)) * 1000) / 1000));
 var init_compare_model = __esm(() => {
+  ALL_MODES = ["side", "wipe", "difference"];
+  MODE_KEYS = { side: "s", wipe: "w", difference: "d" };
   VIDEO = /\.(mp4|m4v|mov|webm|ogv|mkv)$/i;
   SEEK_IDLE = { seeking: false, pending: null };
   ZOOM_FIT = { u: 0, v: 0, w: 1, h: 1 };
@@ -9935,8 +10518,8 @@ async function createCompareGpu(canvas, onLost) {
       r(0, f.before);
       r(4, f.after);
       data.set([f.width, f.height, f.dpr, 0], 8);
-      data.set([f.wipeX, f.soft, 0, f.phase ? 1 : 0], 12);
-      data.set([f.from, f.to, f.mix, f.flick ? 1 : 0], 16);
+      data.set([f.wipeX, f.soft, 0, 0], 12);
+      data.set([f.from, f.to, f.mix, 0], 16);
       data.set([f.threshold, f.gain, ready[0], ready[1]], 20);
       data.set([f.accent[0], f.accent[1], f.accent[2], 1], 24);
       const l = f.loupe;
@@ -9978,8 +10561,8 @@ var MODE_INDEX, WGSL = `
 struct U {
   ra: vec4f, rb: vec4f,
   view: vec4f,   // w, h, dpr, _
-  wipe: vec4f,   // x, soft, _, phase
-  modes: vec4f,  // from, to, mix, flick
+  wipe: vec4f,   // x, soft, _, _
+  modes: vec4f,  // from, to, mix, _
   diff: vec4f,   // threshold, gain, readyA, readyB
   accent: vec4f,
   loupe: vec4f,  // x, y, r, zoom (0: none)
@@ -10030,21 +10613,14 @@ fn takeB(p: vec2f, r: vec4f, c0: vec4f, near: bool) -> vec4f {
 
 fn pm(c: vec4f) -> vec4f { return vec4f(c.rgb * c.a, c.a); }
 
-fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
-  let flick = u.modes.w > 0.5;
+fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f) -> vec4f {
   switch mode {
-    case 0u: {
-      let bb = select(b, vec4f(a2.rgb, b.a), flick);
-      return vec4f(a.rgb * a.a + bb.rgb * bb.a * (1.0 - a.a), a.a + bb.a * (1.0 - a.a));
-    }
     case 1u: {
-      if (flick) { return pm(a); }
       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: {
-      if (flick) { return pm(a); }
       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);
       let c = mix(vec3f(luma(b.rgb) * 0.35), u.accent.rgb, h);
@@ -10052,8 +10628,8 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
     }
     default: {}
   }
-  // Flicker: After, or Before while X is held or on the flicker's other beat.
-  return pm(select(b, a, flick || u.wipe.w > 0.5));
+  // 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));
 }
 
 @fragment fn fs(@builtin(position) q: vec4f) -> @location(0) vec4f {
@@ -10071,16 +10647,14 @@ fn composite(mode: u32, p: vec2f, a: vec4f, b: vec4f, a2: vec4f) -> vec4f {
   }
   let a = takeA(p, u.ra, u.ca, near);
   let b = takeB(p, u.rb, u.cb, near);
-  // Before in After's place (X held, side by side): After's rect, as if Before were zoomed there.
-  let a2 = takeA(p, u.rb, u.cb, near);
-  var o = mix(composite(u32(u.modes.x), p, a, b, a2), composite(u32(u.modes.y), p, a, b, a2), u.modes.z);
+  var o = mix(composite(u32(u.modes.x), p, a, b), composite(u32(u.modes.y), p, a, b), u.modes.z);
   if (near) { o = o + vec4f(0.05, 0.05, 0.06, 1.0) * (1.0 - o.a); }
   o = mix(o, vec4f(0.92), ring * 0.9);
   return o;
 }
 `, TEXTURE_BINDING = 4, COPY_DST = 2, RENDER_ATTACHMENT = 16, shared = null, lostListeners;
 var init_compare_gpu = __esm(() => {
-  MODE_INDEX = { side: 0, wipe: 1, difference: 2, flicker: 3 };
+  MODE_INDEX = { side: 0, wipe: 1, difference: 2 };
   lostListeners = new Set;
 });
 
@@ -10466,7 +11040,9 @@ function compare(container, options) {
     ...options.theme ? { theme: options.theme } : {},
     ...options.appearance ? { appearance: options.appearance } : {}
   };
-  let mode = options.mode ?? "side";
+  const offered = compareModes(options.modes, options.mode);
+  const modeList = offered.modes;
+  let mode = offered.mode;
   let wipe = Math.min(1, Math.max(0, options.wipe ?? 0.5));
   let loupeOn = options.loupe ?? false;
   let threshold = options.threshold ?? 4 / 255;
@@ -10484,7 +11060,7 @@ function compare(container, options) {
   root.setAttribute("role", "group");
   root.setAttribute("aria-roledescription", "compare");
   root.setAttribute("aria-label", options.label ?? "Compare");
-  root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . 1 2 3 4 S W D X Z L 0 = -");
+  root.setAttribute("aria-keyshortcuts", `Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . ${modeList.map((m, i) => `${i + 1} ${modeKey(m)}`).join(" ")} Z L 0 = -`);
   applyLook2(root, options);
   root.dataset.mode = mode;
   if (auto)
@@ -10493,35 +11069,37 @@ function compare(container, options) {
   const modes = el("div", "knobs-cmp-modes");
   modes.setAttribute("role", "radiogroup");
   modes.setAttribute("aria-label", "Mode");
-  const modeBtns = MODES2.map((m, i) => {
+  modes.hidden = modeList.length < 2;
+  const modeBtns = modeList.map((m, i) => {
     const b = el("button", "knobs-cmp-mode");
     b.type = "button";
     b.tabIndex = -1;
-    b.textContent = m.label;
-    b.title = `${m.label} · ${i + 1}${m.key ? ` or ${m.key}` : " (hold X to flick)"}`;
+    b.textContent = MODE_LABEL[m].short;
+    b.title = `${MODE_LABEL[m].long} · ${i + 1} or ${modeKey(m)}`;
     b.setAttribute("role", "radio");
-    b.setAttribute("aria-keyshortcuts", m.key ? `${i + 1} ${m.key}` : `${i + 1}`);
+    b.setAttribute("aria-keyshortcuts", `${i + 1} ${modeKey(m)}`);
     b.addEventListener("click", () => {
-      setMode(m.mode);
+      setMode(m);
       root.focus({ preventScroll: true });
     });
     modes.append(b);
     return b;
   });
-  const loupeBtn = el("button", "knobs-cmp-toggle");
-  loupeBtn.type = "button";
-  loupeBtn.tabIndex = -1;
-  loupeBtn.textContent = "Loupe";
-  loupeBtn.title = "Loupe · hold Z";
+  const toggleBtn = (name, label, title) => {
+    const b = el("button", "knobs-cmp-toggle");
+    b.type = "button";
+    b.tabIndex = -1;
+    b.innerHTML = icon(name);
+    b.setAttribute("aria-label", label);
+    b.title = title;
+    return b;
+  };
+  const loupeBtn = toggleBtn("magnifyingGlass", "Loupe", "Loupe · hold Z");
   loupeBtn.addEventListener("click", () => {
     setLoupe(!loupeOn);
     root.focus({ preventScroll: true });
   });
-  const loopBtn = el("button", "knobs-cmp-toggle");
-  loopBtn.type = "button";
-  loopBtn.tabIndex = -1;
-  loopBtn.textContent = "Loop";
-  loopBtn.title = "Loop · L (drag its ends on the timeline)";
+  const loopBtn = toggleBtn("repeat", "Loop", "Loop · L (drag its ends on the timeline)");
   loopBtn.setAttribute("aria-keyshortcuts", "L");
   loopBtn.addEventListener("click", () => {
     api.setLoop(!loopNow());
@@ -10538,7 +11116,8 @@ function compare(container, options) {
   const zoomReset = el("button", "knobs-cmp-zoom-reset");
   zoomReset.type = "button";
   zoomReset.tabIndex = -1;
-  zoomReset.textContent = "Reset";
+  zoomReset.innerHTML = icon("arrowCounterClockwise", { small: true });
+  zoomReset.setAttribute("aria-label", "Reset zoom");
   zoomReset.title = "Fit · 0 or double-click";
   zoomReset.addEventListener("click", () => {
     api.setZoom(null);
@@ -10548,11 +11127,25 @@ 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 handle = el("div", "knobs-cmp-handle");
   handle.setAttribute("role", "slider");
   handle.setAttribute("aria-label", "Wipe");
   handle.setAttribute("aria-valuemin", "0");
   handle.setAttribute("aria-valuemax", "100");
+  const grip = el("span", "knobs-cmp-grip");
+  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);
   root.append(bar, stage);
@@ -10569,6 +11162,7 @@ function compare(container, options) {
     root.append(host);
     tl = timeline(host, {
       ...look,
+      variant: "lane",
       duration: 1,
       fps: fps(),
       arrows: { step: 0.5, shift: 2 },
@@ -10587,9 +11181,9 @@ function compare(container, options) {
   const fade = new Spring(1, FADE6.omega, FADE6.zeta, 0.001);
   let fromMode = mode;
   let toMode = mode;
-  let phase = false;
-  let flickerTimer = 0;
-  let flickHeld = false;
+  const wipeLine = new Spring(wipe, WIPE_CATCH.omega, WIPE_CATCH.zeta, 0.0001);
+  let wipeCatching = false;
+  let gripY = null;
   let loupeHeld = false;
   let pointer = null;
   let drag = null;
@@ -10907,25 +11501,16 @@ function compare(container, options) {
     gpu = g;
     setRenderer("gpu");
   };
-  const syncFlicker = () => {
-    win.clearInterval(flickerTimer);
-    flickerTimer = 0;
-    phase = false;
-    if (mode === "flicker")
-      flickerTimer = win.setInterval(() => {
-        phase = !phase;
-        requestDraw();
-      }, FLICKER_MS);
-  };
   const syncModeUi = () => {
     root.dataset.mode = mode;
-    MODES2.forEach((m, i) => {
-      modeBtns[i].setAttribute("aria-checked", String(m.mode === mode));
+    modeList.forEach((m, i) => {
+      modeBtns[i].setAttribute("aria-checked", String(m === mode));
     });
     handle.tabIndex = mode === "wipe" ? 0 : -1;
+    modePill?.update();
   };
   const setMode = (next, emit = true) => {
-    if (next === mode)
+    if (next === mode || !modeList.includes(next))
       return;
     mode = next;
     const reduced = reducedMotion(win);
@@ -10941,19 +11526,29 @@ function compare(container, options) {
     else
       lay.set(next === "side" ? 0 : 1);
     syncModeUi();
-    syncFlicker();
     if (emit)
       options.onMode?.(next);
     requestDraw();
   };
-  const setWipe = (next, emit = true) => {
+  const setWipe = (next, emit = true, jump = false) => {
     const w = Math.min(1, Math.max(0, next));
-    if (w === wipe)
+    if (w === wipe && !jump)
       return;
     wipe = w;
+    const minGap = 2 / Math.max(1, wipeRect(layoutNow().L.overlay).w);
+    const head = moveHead({ x: wipeLine.x, target: wipeLine.target }, w, jump && !reducedMotion(win) ? "jump" : "follow", wipeCatching, minGap);
+    wipeCatching = head.catching;
+    if (head.catching) {
+      wipeLine.x = head.x;
+      wipeLine.target = head.target;
+    } else
+      wipeLine.snap(head.x);
     if (emit)
       options.onWipe?.(w);
-    drawNow();
+    if (head.catching)
+      requestDraw();
+    else
+      drawNow();
   };
   const setLoupe = (on) => {
     loupeOn = on;
@@ -11106,28 +11701,44 @@ 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 placeGrip = (wr) => {
+    const gy = gripTop(gripY ?? wr.y + wr.h / 2, wr, GRIP.h) - wr.y;
+    grip.style.transform = `translate3d(0,${gy.toFixed(2)}px,0)`;
+  };
   const draw = () => {
     dirty = false;
     const r = layoutNow();
     const wr = wipeRect(r.L.overlay);
-    const wx = wipeX(wr, wipe);
+    const wx = wipeX(wr, wipeLine.x);
     const k = lay.x;
-    const ax = r.after.x + INSET + (r.after.w - labelW[1] - INSET * 2) * k;
-    labels[0].style.transform = `translate(${(r.before.x + INSET).toFixed(2)}px,${(r.before.y + INSET).toFixed(2)}px)`;
-    labels[1].style.transform = `translate(${ax.toFixed(2)}px,${(r.after.y + INSET).toFixed(2)}px)`;
-    const showsBefore = flickHeld || mode === "flicker" && phase;
-    const flickering = flickHeld || mode === "flicker";
-    labels[0].toggleAttribute("data-lit", flickering && showsBefore);
-    labels[1].toggleAttribute("data-lit", flickering && !showsBefore);
-    labels[0].toggleAttribute("data-dim", flickering && !showsBefore || mode === "wipe" && wipe < 0.02);
-    labels[1].toggleAttribute("data-dim", flickering && showsBefore || mode === "wipe" && wipe > 0.98);
+    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 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 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));
-    handle.toggleAttribute("data-on", mode === "wipe" && !flickHeld);
+    handle.toggleAttribute("data-on", mode === "wipe");
     handle.style.transform = `translate(${wx.toFixed(2)}px,${wr.y.toFixed(2)}px)`;
     handle.style.height = `${Math.max(0, wr.h).toFixed(2)}px`;
+    placeGrip(wr);
     handle.setAttribute("aria-valuenow", String(Math.round(wipe * 100)));
     handle.setAttribute("aria-valuetext", `${Math.round(wipe * 100)}% Before`);
     const pct = `${Math.round(100 / zw.x)}%`;
@@ -11150,7 +11761,7 @@ function compare(container, options) {
         const right = Math.max(0, rect.x + rect.w - Math.min(clip.x + clip.w, cutAt));
         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 cut = mode === "wipe" && !flickHeld ? wx : Number.POSITIVE_INFINITY;
+      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;
@@ -11159,10 +11770,8 @@ function compare(container, options) {
         place(s.preview, rect, clip, at);
         if (s.index !== 0)
           continue;
-        for (const n of [s.el, s.preview]) {
-          n.style.mixBlendMode = mode === "difference" && !flickHeld ? "difference" : "";
-          n.style.opacity = mode === "flicker" && !showsBefore ? "0" : "";
-        }
+        for (const n of [s.el, s.preview])
+          n.style.mixBlendMode = mode === "difference" ? "difference" : "";
       }
       return;
     }
@@ -11183,8 +11792,6 @@ function compare(container, options) {
       from: MODE_INDEX[fromMode],
       to: MODE_INDEX[toMode],
       mix: Math.min(1, Math.max(0, fade.x)),
-      flick: flickHeld,
-      phase,
       threshold,
       gain: 1,
       accent,
@@ -11200,6 +11807,11 @@ function compare(container, options) {
   const loop = frameLoop(win, (dt) => {
     lay.step(dt);
     fade.step(dt);
+    if (wipeCatching) {
+      wipeLine.step(dt);
+      if (wipeLine.resting)
+        wipeCatching = false;
+    }
     zu.step(dt);
     zv.step(dt);
     zw.step(dt);
@@ -11233,7 +11845,7 @@ function compare(container, options) {
             pushFrame(s);
       }
     }
-    const moving = !lay.resting || !fade.resting || !zoomResting();
+    const moving = !lay.resting || !fade.resting || !zoomResting() || wipeCatching;
     if (moving)
       dirty = true;
     if (auto && !lay.resting)
@@ -11376,16 +11988,19 @@ function compare(container, options) {
       e.preventDefault();
       return startPinch();
     }
-    if (mode === "wipe" && !flickHeld) {
+    if (mode === "wipe") {
       const wr = wipeRect(layoutNow().L.overlay);
       const inside = p.x >= wr.x - SLOP && p.x <= wr.x + wr.w + SLOP && p.y >= wr.y && p.y <= wr.y + wr.h;
-      const grab = wipeGrab(p.x, wr, wipe, SLOP);
+      const grab = wipeGrab(p.x, wr, wipeLine.x, SLOP);
       if (inside && (grab.onLine || !zoomed())) {
         drag = { kind: "wipe", offset: grab.offset };
         root.dataset.dragging = "";
+        gripY = p.y;
         e.preventDefault();
         if (!grab.onLine)
-          setWipe(wipeAt(p.x, wr));
+          setWipe(wipeAt(p.x, wr), true, true);
+        else
+          drawNow();
         return;
       }
     }
@@ -11411,6 +12026,11 @@ 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") {
@@ -11483,12 +12103,6 @@ function compare(container, options) {
     const z = { u: zu.target, v: zv.target, w: zw.target, h: zw.target };
     glideZoom(zoomAbout(z, factor, 0.5, 0.5));
   };
-  const holdFlick = (on) => {
-    if (flickHeld === on)
-      return;
-    flickHeld = on;
-    drawNow();
-  };
   const holdLoupe = (on) => {
     if (loupeHeld === on)
       return;
@@ -11534,25 +12148,17 @@ function compare(container, options) {
       case "s":
       case "w":
       case "d":
-        if (e.altKey || e.shiftKey || key === "s" && claimsHintKey(doc, key))
-          return;
-        claim();
-        return setMode(KEY_MODE[key]);
       case "1":
       case "2":
-      case "3":
-      case "4":
-        if (e.altKey || e.shiftKey)
+      case "3": {
+        if (e.altKey || e.shiftKey || key === "s" && claimsHintKey(doc, key))
           return;
-        claim();
-        return setMode(MODES2[Number(key) - 1].mode);
-      case "x":
-        if (e.altKey)
+        const m = modeForKey(key, modeList);
+        if (!m)
           return;
         claim();
-        if (!e.repeat)
-          holdFlick(true);
-        return;
+        return setMode(m);
+      }
       case "z":
         if (e.altKey)
           return;
@@ -11593,7 +12199,7 @@ function compare(container, options) {
     old.preview.replaceWith(s.preview);
     sides[index] = s;
     note.textContent = "";
-    labels[index].textContent = labelOf(index);
+    setLabel(index, labelOf(index));
     if (near)
       loadSide(s);
     readColors();
@@ -11604,12 +12210,15 @@ 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));
   loupeBtn.setAttribute("aria-pressed", String(loupeOn));
   loopBtn.setAttribute("aria-pressed", String(loopNow() !== null));
+  const modePill = modeList.length > 1 ? selectionPill(modes, {
+    rows: () => modeBtns,
+    selected: () => modeBtns[modeList.indexOf(mode)] ?? null
+  }) : null;
   syncModeUi();
-  syncFlicker();
   const unlisten = tl?.listen({
     onSeek: (t, source) => {
       if (source === "play") {
@@ -11667,24 +12276,20 @@ function compare(container, options) {
   });
   root.addEventListener("keydown", onKey);
   root.addEventListener("keyup", (e) => {
-    const key = e.key.toLowerCase();
-    if (key === "x")
-      holdFlick(false);
-    else if (key === "z")
+    if (e.key.toLowerCase() === "z")
       holdLoupe(false);
   });
   root.addEventListener("focusout", (e) => {
     if (root.contains(e.relatedTarget))
       return;
-    holdFlick(false);
     holdLoupe(false);
   });
   const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [
-    ...MODES2.map((m, i) => ({
+    ...modeList.length > 1 ? modeList.map((m, i) => ({
       el: modeBtns[i],
-      label: m.label,
-      activate: () => setMode(m.mode)
-    })),
+      label: MODE_LABEL[m].long,
+      activate: () => setMode(m)
+    })) : [],
     { el: loopBtn, label: "Loop", activate: () => api.setLoop(!loopNow()) },
     ...loupeBtn.hidden ? [] : [{ el: loupeBtn, label: "Loupe", activate: () => setLoupe(!loupeOn) }],
     ...zoomed() ? [{ el: zoomReset, label: "Reset zoom", activate: () => api.setZoom(null) }] : [],
@@ -11709,6 +12314,7 @@ function compare(container, options) {
     get mode() {
       return mode;
     },
+    modes: modeList,
     get wipe() {
       return wipe;
     },
@@ -11745,11 +12351,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)
@@ -11764,7 +12370,7 @@ function compare(container, options) {
         tl?.update({ fps: next.fps });
       requestDraw();
     },
-    seek: (t) => tl ? tl.seek(t) : ownSeek(t),
+    seek: (t, o) => tl ? tl.seek(t, o?.glide ? { glide: true } : undefined) : ownSeek(t),
     seekBy(d) {
       const total = duration || tl?.duration || 0;
       const t = Math.min(total, Math.max(0, now() + d));
@@ -11805,7 +12411,7 @@ function compare(container, options) {
     dispose() {
       disposed = true;
       loop.stop();
-      win.clearInterval(flickerTimer);
+      modePill?.dispose();
       win.clearTimeout(releaseTimer);
       ro.disconnect();
       nearIo?.disconnect();
@@ -11835,7 +12441,7 @@ function compare(container, options) {
     wake();
   return api;
 }
-var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, FLICKER_MS = 400, SLOP = 12, INSET = 8, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODES2, KEY_MODE;
+var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, WIPE_CATCH, SLOP = 12, INSET = 8, GRIP, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODE_LABEL;
 var init_compare = __esm(() => {
   init_motion();
   init_page_hints();
@@ -11843,21 +12449,24 @@ var init_compare = __esm(() => {
   init_compare_gpu();
   init_compare_model();
   init_compare_strip();
+  init_icons();
   init_look();
   init_rgba();
+  init_selection_pill();
   init_timeline();
+  init_timeline_model();
   LAYOUT2 = springMotion({ duration: 0.35, bounce: 0 });
   FADE6 = springMotion(SPRINGS.snappy);
   FADE_REDUCED = springMotion(FADE);
   ZOOM = springMotion({ duration: 0.35, bounce: 0 });
+  WIPE_CATCH = springMotion(CATCH_UP);
+  GRIP = { w: 16, h: 28 };
   LOUPE = { r: 88, zoom: 4 };
-  MODES2 = [
-    { mode: "side", label: "Side by side", key: "S" },
-    { mode: "wipe", label: "Wipe", key: "W" },
-    { mode: "difference", label: "Difference", key: "D" },
-    { mode: "flicker", label: "Flicker", key: "" }
-  ];
-  KEY_MODE = { s: "side", w: "wipe", d: "difference" };
+  MODE_LABEL = {
+    side: { short: "Side", long: "Side by side" },
+    wipe: { short: "Wipe", long: "Wipe" },
+    difference: { short: "Difference", long: "Difference" }
+  };
 });
 
 // src/ui/react.tsx
@@ -14757,6 +15366,7 @@ function timelineChanges(now, changed) {
 // src/ui/picker.ts
 init_motion();
 init_look();
+init_icons();
 
 // src/ui/picker-model.ts
 function digitPick(ids, key) {
@@ -14811,7 +15421,7 @@ var CLOSE3 = springMotion(CLOSE);
 var CARD = springMotion(SPRINGS.default);
 var FADE5 = springMotion(FADE);
 var DRIFT = 6;
-var CHECK = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
+var CHECK = icon("check", { small: true });
 function optionPicker(container, options) {
   const doc = container.ownerDocument;
   const win = doc.defaultView;
@@ -16288,7 +16898,9 @@ function confirm(options) {
 }
 
 // src/ui/walkthrough.ts
+init_icons();
 init_look();
+init_selection_pill();
 
 // src/ui/toast.ts
 init_look();
@@ -16354,399 +16966,11 @@ function toast(message, options = {}) {
   };
 }
 
-// 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"];
@@ -16953,7 +17177,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();
@@ -17026,6 +17258,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() && list.length > 1 ? { more: step.more.trim() } : {},
         options,
         ask
       };
@@ -17037,6 +17271,7 @@ 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 } : {},
       steps: own
@@ -17047,14 +17282,25 @@ 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 {
@@ -17067,10 +17313,32 @@ function normalizeWalkthrough(doc) {
       id: slug(v),
       label: label(v)
     })),
-    sections,
+    sections: withKickers(sections, doc.sections, doc.kickers),
     steps
   };
 }
+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;
@@ -17355,6 +17623,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) => {
@@ -17375,6 +17646,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)
@@ -17404,9 +17679,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();
@@ -17531,7 +17807,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);
@@ -17586,175 +17862,775 @@ 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;
+}
+
+// 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,680px);--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: a readable column, centred, with a slim contents rail beside it (right by default);
+   one column where it's narrow ——— */
+.knobs-wt-layout{display:grid;grid-template-columns:minmax(0,var(--kw-width)) var(--kw-rail-w);justify-content:center;gap:var(--_k-space-column);align-items:start}
+.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="left"] .knobs-wt-layout{grid-template-columns:var(--kw-rail-w) minmax(0,var(--kw-width))}
+.knobs-walkthrough[data-rail="none"] .knobs-wt-layout{grid-template-columns:minmax(0,var(--kw-width))}
+.knobs-wt-main{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:940px){.knobs-walkthrough .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{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: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}
+.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-title)!important;line-height:var(--_k-leading-title);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 outranks the page's ——— */
+.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-heading)!important;line-height:var(--_k-leading-heading);font-weight:var(--kw-strong)!important;letter-spacing:-.01em!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)}
+/* 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:16px;display:flex;flex-direction:column;gap:var(--_k-space-title);max-height:calc(100vh - 32px);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: rows centred on one spine, 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 for being current. */
+.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:var(--kw-toc-n,0px) 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(--kw-strong);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);color:var(--_k-fg-3)}
+.knobs-wt-toc[data-bare] .knobs-wt-toc-row{grid-template-columns:minmax(0,1fr) auto}
+.knobs-wt-toc[data-bare] .knobs-wt-toc-n{display:none}
+.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-sub:is(:hover,:focus-visible){color:var(--_k-fg-2)}
+.knobs-ui .knobs-wt-toc-row:focus-visible{box-shadow:inset 0 0 0 1px var(--_k-focus)}
+.knobs-wt-toc-n,.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-row[data-active] .knobs-wt-toc-n{color:var(--_k-fg-2)}
+.knobs-wt-toc-label{min-width:0;overflow:hidden;${fade2}}
+.knobs-pick-copy .knobs-wt-toc-n,.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 rail becomes a bar along the top, with the progress and the export only. */
+@container knobs-wt (max-width:940px){
+  .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-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))}
+.knobs-wt-slot-label{display:block;font:var(--_k-weight-label) var(--_k-type-label)/var(--_k-leading-label) var(--_k-font);color:var(--_k-fg-2)}
+.knobs-wt-body{min-width:0}
+/* 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;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:calc(var(--_k-radius-panel) - 4px);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);font-size:var(--_k-type-title);line-height:var(--_k-leading-title)}
+.knobs-wt-mto{font-size:var(--_k-type-heading);line-height:var(--_k-leading-heading);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: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: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 grid = (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 = grid(x.x);
-    mark.style.transform = `translate(${left}px,${grid(y.x)}px)`;
-    mark.style.width = `${grid(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: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: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) {
@@ -18283,7 +19159,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) => {
@@ -18303,14 +19179,18 @@ var lookOf2 = (o) => ({
 });
 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;
@@ -18443,8 +19323,12 @@ 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 noteMode = options.noteBar ?? "collapsed";
+  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);
@@ -18468,9 +19352,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,
@@ -18478,13 +19359,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(${grid2(pillY.x)}px)`;
-      mark.style.height = `${grid2(pillY.x + pillH.x) - grid2(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);
@@ -18548,21 +19422,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)
@@ -18579,6 +19444,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();
@@ -18595,6 +19463,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;
@@ -18637,7 +19515,12 @@ 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();
@@ -18782,6 +19665,7 @@ function walkthrough(container, options) {
     ink.on = true;
     ink.layer.dataset.on = "";
     root.dataset.inking = "";
+    bar.setOpen(true);
     bar.sync();
   };
   const voice = {
@@ -18821,6 +19705,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();
@@ -18847,7 +19732,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);
@@ -18879,7 +19767,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`;
@@ -18895,6 +19817,8 @@ function walkthrough(container, options) {
       } else if (e.key === "Escape") {
         e.preventDefault();
         input.blur();
+        if (empty())
+          setOpen(false);
         viewOf(current)?.card.focus({ preventScroll: true });
       }
     });
@@ -18914,13 +19838,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;
@@ -18959,14 +19883,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)
@@ -19002,6 +19957,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) {
@@ -19009,7 +19968,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 });
       }
     }
   };
@@ -19096,22 +20056,105 @@ 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 metaLink = (line, text, href) => {
+    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 === "left" ? "left" : "right";
+    root.toggleAttribute("data-cards", options.cards === true);
     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;
@@ -19138,42 +20181,27 @@ 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");
@@ -19185,8 +20213,17 @@ function walkthrough(container, options) {
       progress.append(count, meter);
       tocEl = el2(doc, "nav", "knobs-wt-toc");
       tocEl.setAttribute("aria-label", "Contents");
-      mark = el2(doc, "div", "knobs-wt-toc-mark");
-      tocEl.append(mark);
+      const ns = page.sections.map((s) => s.kicker && s.link ? s.link.label : "");
+      const nw = Math.max(0, ...ns.map((n) => n.length));
+      tocEl.style.setProperty("--kw-toc-n", nw ? `${nw + 0.5}ch` : "0px");
+      if (!nw)
+        tocEl.dataset.bare = "";
+      if (feedEl) {
+        const group = el2(doc, "div", "knobs-wt-toc-group");
+        const target = feedEl;
+        group.append(tocRow("Latest", "", String(page.feed.length), false, () => target.scrollIntoView({ block: "start", behavior: reduced() ? "auto" : "smooth" })));
+        tocEl.append(group);
+      }
       rail.append(progress, tocEl, actions(true));
       if (options.keys !== false) {
         const keys = el2(doc, "div", "knobs-wt-keys");
@@ -19198,45 +20235,44 @@ 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.kicker || section.link || section.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 (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);
+          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));
+      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;
+        const n = section.kicker && section.link ? section.link.label : "";
+        group.append(tocRow(plainMarkdown(section.title), n, "", 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);
+    main.append(flow);
+    if (noteMode !== "hidden")
+      main.append(bar.dock);
     if (rail)
       layout.append(rail);
     layout.append(main);
@@ -19246,16 +20282,40 @@ 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 tocRow = (label, n, end, 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 ncol = el2(doc, "span", "knobs-wt-toc-n");
+    ncol.textContent = n;
+    const t = el2(doc, "span", "knobs-wt-toc-label");
+    t.textContent = label;
+    const e = el2(doc, "span", "knobs-wt-toc-end");
+    e.textContent = end;
+    b.title = label;
+    b.append(ncol, 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) => {
@@ -19296,30 +20356,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));
+    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)));
-      for (const m of step.media)
-        slots.push(mediaSlot(media, { ...look, media: m, onEvent, steps: stepLinks }));
+      const grid = (list) => {
+        const g = el2(doc, "div", "knobs-wt-media");
+        g.style.setProperty("--kw-n", String(Math.min(list.length, step.columns)));
+        for (const m of list)
+          slots.push(mediaSlot(g, { ...look, media: m, onEvent, steps: stepLinks }));
+        return g;
+      };
+      const [first, ...rest] = step.media;
+      media = grid(step.more ? [first] : step.media);
       card.append(media);
+      if (step.more && rest.length) {
+        const holder = el2(doc, "div", "knobs-wt-more");
+        discs.push(disclosure(holder, { label: step.more, count: rest.length, content: grid(rest) }));
+        card.append(holder);
+      }
     }
     let taste = null;
     if (step.question)
@@ -19344,16 +20412,11 @@ function walkthrough(container, options) {
     });
     let toc = null;
     let glyph = null;
-    if (tocEl) {
-      toc = el2(doc, "button", "knobs-wt-toc-step");
-      toc.type = "button";
+    if (group) {
+      toc = tocRow(plainMarkdown(step.title), "", "", true, () => go(step.key));
       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);
+      toc.querySelector(".knobs-wt-toc-end").append(glyph);
+      group.append(toc);
     }
     return { step, card, media, notes, toc, glyph, taste, slots };
   };
@@ -19412,15 +20475,21 @@ 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);
@@ -19499,6 +20568,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();