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

package/dist/ui.js

@@ -607,7 +607,12 @@ 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 calc(var(--_k-hover-out) * 1ms)}
+/* ✗ 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)}
@@ -1331,6 +1336,22 @@ var init_schema = __esm(() => {
       source: css("var(--k-warn)"),
       doc: "Modified lines."
     },
+    {
+      name: "before",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg-3)"),
+      doc: "Before in a comparison, and only Before: its label and side of the seam. Neutral unless a theme gives it a colour."
+    },
+    {
+      name: "after",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-fg)"),
+      doc: "After in a comparison, and only After."
+    },
     {
       name: "series-1",
       tier: "semantic",
@@ -1421,6 +1442,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",
@@ -2385,16 +2550,18 @@ function injectTokens(doc) {
   style.textContent = rootCss;
   doc.head.append(style);
 }
-var ROOT_CLASS = "knobs-root", extras, spring, rootCss;
+var ROOT_CLASS = "knobs-root", extras, narrow, spring, rootCss;
 var init_root = __esm(() => {
   init_knobs();
   init_css();
   init_glide();
   init_motion();
   extras = `:where(.${ROOT_CLASS}){--_k-shadow-k:calc(var(--k-shadow-strength,calc(.48 - .32 * var(--_k-light,0))) / .48);--_k-glass-tone:var(--k-glass-tone,calc(.5 + .58 * var(--_k-light,0)));--_k-fill-base:var(--k-fill-base,var(--_k-fill-selected));--_k-fill-hover-mix:var(--k-fill-hover-mix,var(--k-fill-rest-mix,20%));--_k-reveal-ease:var(--k-ease,cubic-bezier(.2,.8,.2,1))}`;
+  narrow = `@media(max-width:639.98px){:where(.${ROOT_CLASS}){--_k-pad-page:var(--k-pad-page,calc(var(--_k-unit) * 4))}}`;
   spring = `:where(:root,:host){--k-fill-ease:${DEFAULT_LINEAR.easing};--k-fill-ms:${DEFAULT_LINEAR.ms}}`;
   rootCss = `${tokensCss(knobs)}
 ${extras}
+${narrow}
 ${spring}
 ${DRIVERS}
 ${motionCss}`;
@@ -2684,6 +2851,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}
@@ -7930,6 +8103,17 @@ 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");
@@ -8991,7 +9175,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();
@@ -9002,8 +9186,8 @@ 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, {
@@ -9143,11 +9327,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)
@@ -19378,406 +19562,20 @@ function optionPicker(container, options) {
 // src/ui/walkthrough.ts
 init_motion();
 init_page_hints();
+init_icons();
 init_look();
+init_selection_pill();
 
-// src/ui/walkthrough-media.ts
-init_compare_model();
-init_glide();
-init_look();
-
-// src/ui/walkthrough-css.ts
+// src/ui/walkthrough-blocks.ts
 init_motion();
-var snappy3 = springCss(SPRINGS.snappy);
-var calm = springCss(SPRINGS.calm);
-var walkthroughCss = `
-:where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
-.knobs-ui.knobs-walkthrough{--kw-snappy:${snappy3.easing};--kw-snappy-ms:${snappy3.duration}ms;--kw-calm:${calm.easing};--kw-calm-ms:${calm.duration}ms;
-  --kw-text:var(--k-walkthrough-text,14px);--kw-measure:var(--k-walkthrough-measure,68ch);--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
-  --kw-card:var(--_ku-pane-bg);--kw-card-ring:var(--_ku-pane-ring);--kw-pad:16px;--kw-ink:var(--k-walkthrough-ink,#ff375f);
-  container:knobs-wt / inline-size;display:block;width:100%;color:var(--_k-fg);font:var(--_k-weight) var(--kw-text)/1.5 var(--_k-font);text-align:left;
-  letter-spacing:normal;-webkit-font-smoothing:antialiased}
-.knobs-walkthrough [hidden]{display:none!important}
-.knobs-walkthrough :is(h1,h2,h3,p){margin:0;font:inherit;letter-spacing:inherit}
-.knobs-walkthrough a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color .15s}
-.knobs-walkthrough a:hover{text-decoration-color:currentColor}
-.knobs-walkthrough code,.knobs-wt-slot code{font:calc(1em - 1px) var(--_k-mono);padding:1px 5px;border-radius:5px;background:var(--_k-fill)}
-:where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-step,button.knobs-wt-stitle,.knobs-wt-chapter){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
-  background:transparent;border:0;border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-
-/* ——— layout: the rail beside the column; one column where it's narrow ——— */
-.knobs-wt-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:40px;align-items:start}
-.knobs-wt-main{display:flex;flex-direction:column;gap:56px;min-width:0;max-width:1120px;padding-bottom:40vh}
-@container knobs-wt (max-width:880px){.knobs-wt-layout{grid-template-columns:minmax(0,1fr);gap:0}.knobs-wt-main{gap:44px}}
-
-/* ——— the page's head ——— */
-.knobs-wt-head{display:flex;flex-direction:column;gap:10px}
-.knobs-wt-title{font-size:calc(var(--kw-text) + 10px)!important;font-weight:var(--_k-weight-title)!important;line-height:1.2;letter-spacing:-.01em!important}
-.knobs-wt-summary{max-width:var(--kw-measure);color:var(--_k-fg-2)}
-.knobs-wt-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2px)}
-.knobs-wt-meta>span{display:inline-flex;gap:6px;white-space:nowrap}
-.knobs-wt-meta b{font-weight:var(--_k-weight);color:var(--_k-fg-2);font-family:var(--_k-mono);font-size:calc(1em - .5px)}
-
-/* ——— a section: a PR or topic ——— */
-.knobs-wt-section{display:flex;flex-direction:column;gap:14px;min-width:0}
-.knobs-wt-shead{display:flex;flex-direction:column;gap:6px;scroll-margin-top:16px}
-.knobs-wt-kicker{display:flex;align-items:center;gap:10px;font-size:calc(var(--kw-text) - 2px);color:var(--_k-fg-3)}
-.knobs-wt-kicker a{font-family:var(--_k-mono);color:var(--_k-fg-2);text-decoration:none}
-.knobs-wt-kicker a:hover{color:var(--_k-fg)}
-.knobs-wt-stitle{font-size:calc(var(--kw-text) + 4px)!important;font-weight:var(--_k-weight-title)!important;line-height:1.3}
-.knobs-wt-ssum{max-width:var(--kw-measure);color:var(--_k-fg-2)}
-.knobs-wt-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:999px;font-size:calc(var(--kw-text) - 3px);font-weight:var(--_k-weight-label);white-space:nowrap;
-  --kw-tone:var(--_k-fg-2);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
-.knobs-wt-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="good"]{--kw-tone:var(--kw-good)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="warn"]{--kw-tone:var(--_k-warn)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="bad"]{--kw-tone:var(--_k-danger)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="info"]{--kw-tone:var(--kw-info)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="dim"]{--kw-tone:var(--_k-fg-2)}
-
-/* ——— a step: one card ——— */
-.knobs-wt-step{position:relative;display:flex;flex-direction:column;gap:12px;padding:var(--kw-pad);border-radius:var(--_k-radius-panel);background:var(--kw-card);box-shadow:var(--kw-card-ring);
-  scroll-margin-top:16px;outline:none;container:knobs-wt-step / inline-size}
-.knobs-walkthrough[data-frame="flat"] .knobs-wt-step{box-shadow:inset 0 0 0 1px var(--_k-border)}
-.knobs-wt-step-head{display:flex;align-items:baseline;gap:10px;min-width:0}
-.knobs-wt-num{flex:none;font:var(--_k-weight) calc(var(--kw-text) - 2px)/1 var(--_k-mono);color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
-.knobs-wt-stepTitle{flex:1;min-width:0;font-weight:var(--_k-weight-title)!important}
-.knobs-wt-caption{max-width:var(--kw-measure);color:var(--_k-fg-2);margin-top:-6px!important}
-.knobs-wt-question{font-weight:var(--_k-weight-label)!important}
-/* The step Kit is on: its number lights, and its choices show their keys. */
-.knobs-wt-step[data-current] .knobs-wt-num{color:var(--_k-fg)}
-.knobs-wt-media{display:grid;grid-template-columns:repeat(var(--kw-n,1),minmax(0,1fr));gap:12px;min-width:0}
-@container knobs-wt-step (max-width:640px){.knobs-wt-media{grid-template-columns:minmax(0,1fr)}}
-
-/* ——— the feed: the agent's updates and answers, newest first, compact ——— */
-.knobs-wt-feed{margin-top:-24px}
-.knobs-wt-feed-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column}
-.knobs-wt-feed-list::-webkit-scrollbar{display:none}
-.knobs-wt-fi{display:grid;grid-template-columns:64px 56px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;font-size:calc(var(--kw-text) - 1px)}
-.knobs-wt-fi+.knobs-wt-fi{box-shadow:inset 0 1px 0 var(--_k-border)}
-.knobs-wt-fi-when{color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2.5px);font-variant-numeric:tabular-nums;white-space:nowrap}
-.knobs-wt-fi-kind{color:var(--_k-fg-2);font-size:calc(var(--kw-text) - 2.5px);font-weight:var(--_k-weight-label)}
-.knobs-wt-fi[data-kind="qa"] .knobs-wt-fi-kind{color:var(--kw-info)}
-.knobs-wt-fi-body{max-width:var(--kw-measure);color:var(--_k-fg)}
-.knobs-wt-fi-q{color:var(--_k-fg-2)}
-.knobs-wt-fi-q::before{content:"You asked: ";color:var(--_k-fg-3)}
-:where(.knobs-ui) :is(.knobs-wt-fi-step,.knobs-wt-steplink){all:revert;box-sizing:border-box;font:var(--_k-weight) calc(var(--k-walkthrough-text,14px) - 2.5px)/1 var(--_k-mono);color:var(--_k-fg-2);background:transparent;border:0;
-  padding:3px 6px;margin:0;border-radius:6px;cursor:pointer;outline:none;transition:background .15s,color .15s}
-.knobs-ui :is(.knobs-wt-fi-step,.knobs-wt-steplink):is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
-
-/* ——— a step's sent notes ——— */
-.knobs-wt-notes{display:flex;flex-direction:column}
-.knobs-wt-notes:empty{display:none}
-.knobs-wt-n{display:flex;align-items:flex-start;gap:10px;padding:6px 0;overflow:hidden;
-  transition:height var(--kw-snappy-ms) var(--kw-snappy),opacity var(--kw-snappy-ms) var(--kw-snappy),filter var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-n[data-entering]{opacity:0;filter:blur(3px)}
-.knobs-wt-n[data-leaving]{opacity:0;filter:blur(3px);padding-block:0}
-.knobs-wt-n+.knobs-wt-n{box-shadow:inset 0 1px 0 var(--_k-border)}
-.knobs-wt-n-meta{flex:none;min-width:44px;padding-top:2px;color:var(--_k-fg-3);font:var(--_k-weight) calc(var(--kw-text) - 2.5px)/1.4 var(--_k-mono);font-variant-numeric:tabular-nums}
-.knobs-wt-n-meta[data-seek]{cursor:pointer}
-.knobs-wt-n-meta[data-seek]:hover{color:var(--_k-fg)}
-.knobs-wt-n-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:calc(var(--kw-text) - 1px)}
-.knobs-wt-n-voice{height:30px;max-width:320px}
-.knobs-wt-n-ink{display:block;width:120px;max-height:80px;border-radius:6px;background:var(--_k-fill)}
-.knobs-wt-n-ink path{fill:none;stroke:var(--kw-ink);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
-
-/* ——— the note bar, docked at the bottom of the column ——— */
-.knobs-wt-dock{position:sticky;bottom:12px;z-index:40;margin-top:-24px}
-.knobs-wt-notebar{display:flex;flex-direction:column;gap:2px;padding:6px 6px 6px 14px;border-radius:calc(var(--_k-radius-panel) + 2px);background:var(--_k-bg);
-  box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay)}
-.knobs-wt-on{padding-top:3px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap;overflow:hidden;
-  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)}
-.knobs-wt-row{display:flex;align-items:flex-end;gap:4px}
-:where(.knobs-ui) :is(.knobs-wt-input,.knobs-wt-tool,.knobs-wt-x,.knobs-wt-back){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;
-  border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-ui .knobs-wt-input{flex:1;min-width:0;height:32px;max-height:140px;padding:6px 0;resize:none;color:var(--_k-fg);caret-color:var(--_k-accent);line-height:20px;font-size:var(--kw-text)}
-.knobs-ui .knobs-wt-input::placeholder{color:var(--_k-fg-3)}
-.knobs-wt-attach{display:flex;gap:4px;align-items:center;align-self:center}
-.knobs-wt-attach:empty{display:none}
-.knobs-wt-chip-a{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 9px;border-radius:999px;background:var(--_k-fill-selected);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap}
-.knobs-ui .knobs-wt-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--_k-fg-3);cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-x:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-wt-x svg{width:10px;height:10px}
-.knobs-ui .knobs-wt-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 8px;border-radius:calc(var(--_k-radius) + 2px);
-  color:var(--_k-fg-2);cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-tool:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
-.knobs-ui .knobs-wt-tool[aria-pressed="true"]{background:var(--_k-fill-selected);color:var(--_k-fg)}
-.knobs-wt-tool svg{width:15px;height:15px}
-.knobs-wt-rec{font-size:calc(var(--kw-text) - 2.5px);font-variant-numeric:tabular-nums}
-.knobs-wt-rec:empty{display:none}
-.knobs-ui .knobs-wt-tool[data-send]{color:var(--_k-fg-3)}
-.knobs-ui .knobs-wt-tool[data-send][data-ready]{background:var(--_k-accent);color:var(--_k-bg)}
-/* Back: in place over the bar for a few seconds after a note moves the page on. */
-.knobs-ui .knobs-wt-back{position:absolute;left:8px;bottom:calc(100% + 8px);height:28px;padding:0 12px;border-radius:999px;background:var(--_k-bg);color:var(--_k-fg);
-  box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font-size:calc(var(--kw-text) - 1.5px);font-weight:var(--_k-weight-label);cursor:pointer;
-  opacity:0;scale:.96;filter:blur(3px);pointer-events:none;transition:opacity .11s cubic-bezier(.4,0,1,1),scale .11s cubic-bezier(.4,0,1,1),filter .11s cubic-bezier(.4,0,1,1)}
-.knobs-ui .knobs-wt-back[data-on]{opacity:1;scale:1;filter:none;pointer-events:auto;transition:opacity .15s cubic-bezier(.2,.8,.2,1),scale .15s cubic-bezier(.2,.8,.2,1),filter .15s cubic-bezier(.2,.8,.2,1)}
-.knobs-ui .knobs-wt-back:hover{background:var(--_k-fill-selected)}
-
-/* ——— ink over a step's media ——— */
-.knobs-wt-media,.knobs-wt-options{position:relative}
-.knobs-wt-ink{position:absolute;inset:0;z-index:5;width:100%;height:100%;overflow:visible;pointer-events:none;touch-action:none}
-.knobs-wt-ink[data-on]{pointer-events:auto;cursor:crosshair}
-.knobs-wt-ink path{fill:none;stroke:var(--kw-ink);stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
-
-/* ——— full-window: the step over the page, its media filling it; its place held in the page ——— */
-.knobs-wt-scrim{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,var(--_k-bg-page) 82%,transparent);opacity:0;pointer-events:none}
-.knobs-wt-scrim[data-on]{pointer-events:auto}
-.knobs-wt-hold-card{flex:none}
-.knobs-wt-step[data-full]{position:fixed;z-index:35;margin:0;overflow:hidden;overscroll-behavior:contain;padding-bottom:84px;box-shadow:var(--kw-card-ring),var(--_k-shadow-overlay);background:var(--_k-bg)}
-.knobs-wt-step[data-full]>:not(.knobs-wt-media){flex:none}
-.knobs-wt-step[data-full] .knobs-wt-notes{display:none}
-.knobs-wt-step[data-full]>.knobs-wt-media{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
-.knobs-wt-step[data-full] .knobs-wt-slot{display:flex;flex-direction:column;min-height:0}
-.knobs-wt-step[data-full] .knobs-wt-body{flex:1;min-height:0}
-.knobs-wt-step[data-full] .knobs-wt-fit{height:100%;transition:none}
-.knobs-wt-step[data-full] .knobs-wt-frame{height:100%;aspect-ratio:auto}
-
-/* ——— a taste test: the options side by side, Kit's pick lit and the rest stepping back ——— */
-.knobs-wt-options{display:grid;grid-template-columns:repeat(var(--kw-n,2),minmax(0,1fr));gap:10px}
-@container knobs-wt-step (max-width:640px){.knobs-wt-options{grid-template-columns:minmax(0,1fr)}}
-.knobs-wt-option{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_ku-wash);
-  transition:background var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-option[data-picked]{background:color-mix(in srgb,var(--_k-accent) 12%,var(--_ku-wash))}
-.knobs-wt-option>:not(.knobs-wt-pick){transition:opacity var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-options[data-has-pick] .knobs-wt-option:not([data-picked])>:not(.knobs-wt-pick){opacity:.55}
-.knobs-ui .knobs-wt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:0 4px;border-radius:calc(var(--_k-radius) - 2px);cursor:pointer;color:var(--_k-fg-2);text-align:left}
-.knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){color:var(--_k-fg)}
-.knobs-wt-letter{flex:none;font:var(--_k-weight-title) calc(var(--kw-text) - 1px)/1 var(--_k-font);color:var(--_k-fg)}
-.knobs-wt-olabel{flex:1;min-width:0;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
-.knobs-wt-suggested{flex:none;font-size:calc(var(--kw-text) - 3px);color:var(--_k-fg-3)}
-.knobs-wt-check{flex:none;display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:var(--_k-fill);color:transparent;
-  transition:background var(--kw-snappy-ms) var(--kw-snappy),color var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-check svg{width:12px;height:12px}
-.knobs-wt-option[data-picked] .knobs-wt-check{background:var(--_k-accent);color:var(--_k-bg)}
-.knobs-wt-key{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:4px;background:var(--_k-fill);color:var(--_k-fg-3);
-  font:var(--_k-weight-label) calc(var(--kw-text) - 4px)/1 var(--_k-font);font-variant-numeric:tabular-nums;opacity:.5;transition:opacity .15s}
-.knobs-wt-step[data-current] .knobs-wt-key{opacity:1}
-.knobs-wt-ocap{color:var(--_k-fg-2);font-size:calc(var(--kw-text) - 1px);padding:0 4px}
+init_icons();
+init_look();
+init_selection_pill();
 
-/* ——— 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();
-
-// src/ui/walkthrough-model.ts
-var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
-function slug(text) {
-  return text.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^(.{0,48})-.*$/, (m, head) => m.length > 48 && head ? head : m).slice(0, 48) || "item";
+// src/ui/walkthrough-model.ts
+var DEFAULT_VERDICTS = ["ship", "change", "unsure"];
+function slug(text) {
+  return text.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").replace(/^(.{0,48})-.*$/, (m, head) => m.length > 48 && head ? head : m).slice(0, 48) || "item";
 }
 function uniqueIds() {
   const seen = new Map;
@@ -19979,7 +19777,15 @@ function fillTable(m) {
         out[k] = fillCell(v);
     return out;
   });
-  return { kind: "table", columns, rows, ...m.caption ? { caption: m.caption } : {} };
+  const primary = columns.find((c) => c.key === m.primary)?.key ?? columns[0]?.key ?? "";
+  return {
+    kind: "table",
+    columns,
+    rows,
+    ...m.caption ? { caption: m.caption } : {},
+    stack: m.stack ?? "auto",
+    primary
+  };
 }
 function fillChapters(chapters) {
   const id = uniqueIds();
@@ -20052,6 +19858,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
       };
@@ -20063,6 +19871,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
@@ -20073,14 +19882,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 {
@@ -20093,10 +19913,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;
@@ -20381,6 +20223,9 @@ function feedbackMarkdown(fb, verdicts) {
 `;
 }
 var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" })[c]);
+function plainMarkdown(text) {
+  return text.replace(/\[([^\]\n]+)\]\([^)\s]+\)/g, "$1").replace(/`([^`\n]+)`/g, "$1").replace(/\*\*([^*\n]+)\*\*/g, "$1").replace(/(^|[^*\w])\*([^*\n]+)\*(?!\w)/g, "$1$2").replace(/\s+/g, " ").trim();
+}
 function inlineMarkdown(text) {
   const codes = [];
   let s = text.replace(/`([^`\n]+)`/g, (_, c) => {
@@ -20401,6 +20246,10 @@ function inlineMarkdown(text) {
 }
 
 // src/ui/walkthrough-blocks.ts
+var GLYPH = {
+  go: icon("caretRight", { small: true }),
+  caret: icon("caretRight", { small: true })
+};
 var el = (doc, tag, cls) => {
   const n = doc.createElement(tag);
   if (cls)
@@ -20430,9 +20279,10 @@ function stepButton(doc, ref, steps) {
   const s = ref && steps?.find(ref);
   if (!s || !steps)
     return null;
-  const b = text(doc, "button", "knobs-wt-steplink", s.number);
+  const b = el(doc, "button", "knobs-wt-steplink");
+  b.innerHTML = GLYPH.go;
   b.type = "button";
-  b.title = `Go to ${s.number} ${s.title}`;
+  b.title = `Go to “${s.title}”`;
   b.setAttribute("aria-label", b.title);
   b.addEventListener("click", (e) => {
     e.stopPropagation();
@@ -20557,7 +20407,7 @@ function mountStack(host, m, steps) {
     if (target && steps) {
       const title = text(doc, "button", "knobs-wt-stitle", it.title);
       title.type = "button";
-      title.title = `Go to ${target.number} ${target.title}`;
+      title.title = `Go to “${target.title}”`;
       title.addEventListener("click", (e) => {
         e.stopPropagation();
         steps.go(target.key);
@@ -20612,9 +20462,38 @@ function delta(doc, d) {
   s.setAttribute("aria-label", `${d.add} added, ${d.del} removed`);
   return s;
 }
+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)
@@ -20633,34 +20512,12 @@ function mountTable(host, m, steps) {
     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 = "";
+      cellAttrs(td, c);
       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);
+        cellContent(doc, td, cell, steps);
       }
       tr.append(td);
     }
@@ -20668,10 +20525,73 @@ function mountTable(host, m, steps) {
   }
   table.append(head, body);
   scroller.append(table);
-  host.append(scroller);
+  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 = scroller.scrollWidth > scroller.clientWidth + 1 || scroller.scrollHeight > scroller.clientHeight + 1;
+    const scrolls = !stacked && (scroller.scrollWidth > scroller.clientWidth + 1 || scroller.scrollHeight > scroller.clientHeight + 1);
     if (scrolls) {
       scroller.tabIndex = 0;
       scroller.setAttribute("role", "region");
@@ -20682,106 +20602,636 @@ function mountTable(host, m, steps) {
       scroller.removeAttribute("aria-label");
     }
   };
+  if (m.stack === "always")
+    box.dataset.stacked = "";
   const ro = win && "ResizeObserver" in win ? new win.ResizeObserver(measure) : null;
-  ro?.observe(scroller);
+  ro?.observe(box);
   measure();
+  doc.fonts?.ready.then(() => {
+    if (!box.isConnected)
+      return;
+    natural = 0;
+    measure();
+  });
   return {
     dispose: () => {
       ro?.disconnect();
-      scroller.remove();
+      box.remove();
     },
     context: () => ({ kind: "table" })
   };
 }
-var grid2 = (v) => Math.round(v * 64) / 64;
 function chapterPills(host, chapters, io) {
   const doc = host.ownerDocument;
-  const win = doc.defaultView;
-  const bar = el(doc, "div", "knobs-wt-chapters");
-  bar.setAttribute("role", "group");
-  bar.setAttribute("aria-label", "Chapters");
-  const mark = el(doc, "span", "knobs-wt-chapter-mark");
-  mark.setAttribute("aria-hidden", "true");
-  bar.append(mark);
-  const pills = chapters.map((c) => {
+  const 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-time", clock(c.start)));
+    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);
-      sync();
+      select(i);
     });
-    bar.append(b);
+    list.append(b);
     return b;
   });
-  host.append(bar);
-  const x = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
-  const y = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
-  const w = new Spring(0, MOTION.calm.omega, MOTION.calm.zeta, 0.25);
-  const draw = () => {
-    const left = grid2(x.x);
-    mark.style.transform = `translate(${left}px,${grid2(y.x)}px)`;
-    mark.style.width = `${grid2(x.x + w.x) - left}px`;
-  };
-  const loop = frameLoop(win, (dt) => {
-    x.step(dt);
-    y.step(dt);
-    w.step(dt);
-    draw();
-    return !x.resting || !y.resting || !w.resting;
+  host.append(list);
+  const pill = selectionPill(list, {
+    selected: () => rows[at] ?? null,
+    rows: () => rows
   });
-  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)
+  const select = (i) => {
+    if (i === at)
       return;
-    at = next;
-    place(false);
+    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();
-  const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => place(true)) : null;
-  ro?.observe(bar);
   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();
-      ro?.disconnect();
-      bar.remove();
+      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}
+}
+
+/* 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) {
   if (doc.querySelector("style[data-knobs-ui-walkthrough]"))
@@ -21309,7 +21759,7 @@ function mediaSlot(container, options) {
     }
   };
 }
-var CHECK3 = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
+var CHECK3 = icon("check", { small: true });
 
 // src/ui/walkthrough.ts
 var el2 = (doc, tag, cls) => {
@@ -21327,16 +21777,20 @@ var lookOf2 = (o) => ({
   ...o.preset ? { preset: o.preset } : {},
   ...o.theme ? { theme: o.theme } : {}
 });
-var grid3 = (v) => Math.round(v * 64) / 64;
+var grid2 = (v) => Math.round(v * 64) / 64;
 var ICON = {
-  full: svg('<path d="M3 6.5V3h3.5M13 6.5V3H9.5M3 9.5V13h3.5M13 9.5V13H9.5"/>'),
-  exit: svg('<path d="M6.5 3v3.5H3M9.5 3v3.5H13M6.5 13V9.5H3M9.5 13V9.5H13"/>'),
-  pen: svg('<path d="M10.5 3.2 12.8 5.5 5.8 12.5 3 13l.5-2.8z"/><path d="M9.3 4.4l2.3 2.3"/>'),
-  mic: svg('<rect x="6" y="2.5" width="4" height="7" rx="2"/><path d="M3.8 8a4.2 4.2 0 0 0 8.4 0M8 12.2v1.8"/>'),
+  full: icon("cornersOut"),
+  exit: icon("cornersIn"),
+  pen: icon("pencilSimple"),
+  mic: icon("microphone"),
   stop: svg('<rect x="4.5" y="4.5" width="7" height="7" rx="1.5" fill="currentColor" stroke="none"/>'),
-  send: svg('<path d="M8 13V3.5M4 7.5 8 3.5l4 4"/>'),
-  close: svg('<path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/>')
+  send: icon("paperPlaneRight"),
+  close: icon("x", { small: true }),
+  back: icon("arrowLeft", { small: true }),
+  out: icon("arrowUpRight", { small: true })
 };
+var DOCK_INSET = 12;
+var DOCK_GAP = 12;
 var CALM2 = springMotion(SPRINGS.calm);
 var SMOOTH = springMotion(SPRINGS.smooth);
 var BACK_MS = 4500;
@@ -21469,8 +21923,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);
@@ -21494,9 +21952,6 @@ function walkthrough(container, options) {
     else
       run();
   };
-  const pillY = new Spring(0, CALM2.omega, CALM2.zeta, 0.25);
-  const pillH = new Spring(0, CALM2.omega, CALM2.zeta, 0.25);
-  let pillPlaced = false;
   const scroll = {
     spring: new Spring(0, CALM2.omega, CALM2.zeta, 0.5),
     to: null,
@@ -21504,13 +21959,6 @@ function walkthrough(container, options) {
   };
   const motion = frameLoop(win, (dt) => {
     let more = false;
-    if (mark) {
-      pillY.step(dt);
-      pillH.step(dt);
-      mark.style.transform = `translateY(${grid3(pillY.x)}px)`;
-      mark.style.height = `${grid3(pillY.x + pillH.x) - grid3(pillY.x)}px`;
-      more ||= !pillY.resting || !pillH.resting;
-    }
     if (scroll.to && scroll.el) {
       scroll.spring.set(scrollTarget(scroll.to, scroll.el));
       scroll.spring.step(dt);
@@ -21574,21 +22022,12 @@ function walkthrough(container, options) {
     v.glyph.dataset.tone = v.step.ask === "none" ? "none" : verdict ? verdictTone(verdict, page.verdicts.findIndex((x) => x.id === verdict)) : done ? "accent" : "dim";
   };
   const placeMark = () => {
-    if (!mark || !tocEl)
+    if (!pill || !tocEl)
       return;
+    pill.update();
     const row = viewOf(current)?.toc;
     if (!row)
-      return void mark.removeAttribute("data-on");
-    mark.dataset.on = "";
-    if (!pillPlaced || reduced()) {
-      pillY.snap(row.offsetTop);
-      pillH.snap(row.offsetHeight);
-      pillPlaced = true;
-    } else {
-      pillY.set(row.offsetTop);
-      pillH.set(row.offsetHeight);
-    }
-    motion.wake();
+      return;
     const top = row.offsetTop;
     const bottom = top + row.offsetHeight;
     if (top < tocEl.scrollTop + 8)
@@ -21605,6 +22044,9 @@ function walkthrough(container, options) {
     const v = viewOf(key);
     v?.card.setAttribute("data-current", "");
     v?.toc?.setAttribute("aria-current", "step");
+    for (const r of tocRows)
+      if (r.dataset.section)
+        r.toggleAttribute("data-active", r.dataset.section === v?.step.section);
     if (key)
       record({ what: "step", step: key });
     placeMark();
@@ -21621,6 +22063,16 @@ function walkthrough(container, options) {
       else
         break;
     }
+    const s = scrollerOf(root);
+    if (s.scrollTop > 0 && s.scrollTop >= s.scrollHeight - s.clientHeight - 2) {
+      const bottom = (s === doc.scrollingElement ? win.innerHeight : s.getBoundingClientRect().bottom) - reserve;
+      for (let i = views.length - 1;i >= 0; i--) {
+        if (views[i].card.getBoundingClientRect().top < bottom) {
+          pick = views[i].step.key;
+          break;
+        }
+      }
+    }
     setCurrent(pick);
   };
   let scrollRaf = 0;
@@ -21663,15 +22115,20 @@ function walkthrough(container, options) {
   };
   const scrim = el2(doc, "div", "knobs-wt-scrim");
   scrim.addEventListener("click", () => setFull(false));
-  const fullRect = () => ({ x: 12, y: 12, w: win.innerWidth - 24, h: win.innerHeight - 24 });
+  const fullRect = () => ({
+    x: DOCK_INSET,
+    y: DOCK_INSET,
+    w: win.innerWidth - DOCK_INSET * 2,
+    h: win.innerHeight - DOCK_INSET - reserve
+  });
   const placeFull = (f) => {
     const a = f.hold.getBoundingClientRect();
     const b = fullRect();
     const k = reduced() ? Math.round(f.p.target) : f.p.x;
-    const left = grid3(a.left + (b.x - a.left) * k);
-    const top = grid3(a.top + (b.y - a.top) * k);
-    const right = grid3(a.right + (b.x + b.w - a.right) * k);
-    const bottom = grid3(a.bottom + (b.y + b.h - a.bottom) * k);
+    const left = grid2(a.left + (b.x - a.left) * k);
+    const top = grid2(a.top + (b.y - a.top) * k);
+    const right = grid2(a.right + (b.x + b.w - a.right) * k);
+    const bottom = grid2(a.bottom + (b.y + b.h - a.bottom) * k);
     const s = f.v.card.style;
     s.left = `${left}px`;
     s.top = `${top}px`;
@@ -21808,6 +22265,7 @@ function walkthrough(container, options) {
     ink.on = true;
     ink.layer.dataset.on = "";
     root.dataset.inking = "";
+    bar.setOpen(true);
     bar.sync();
   };
   const voice = {
@@ -21847,6 +22305,7 @@ function walkthrough(container, options) {
       });
       voice.recorder = rec;
       voice.started = performance.now();
+      bar.setOpen(true);
       rec.start();
       voice.timer = win.setInterval(() => bar.sync(), 250);
       bar.sync();
@@ -21873,7 +22332,10 @@ function walkthrough(container, options) {
     if (!v)
       return;
     backTo = key;
-    backPill.textContent = `← Back to ${v.step.number}`;
+    backPill.innerHTML = ICON.back;
+    const words = el2(doc, "span", "knobs-wt-back-label");
+    words.textContent = `Back to ${plainMarkdown(v.step.title)}`;
+    backPill.append(words);
     backPill.dataset.on = "";
     win.clearTimeout(backTimer);
     backTimer = win.setTimeout(hideBack, BACK_MS);
@@ -21905,7 +22367,41 @@ function walkthrough(container, options) {
     sendBtn.dataset.send = "";
     row.append(input, attach, fullBtn, penBtn, micBtn, sendBtn);
     box.append(on, row);
-    dock.append(backPill, box);
+    const launch = el2(doc, "button", "knobs-wt-launch");
+    launch.type = "button";
+    launch.innerHTML = ICON.pen;
+    launch.append("Note");
+    const kbd = el2(doc, "kbd");
+    kbd.textContent = "n";
+    launch.append(kbd);
+    launch.setAttribute("aria-label", "Write a note (n)");
+    launch.addEventListener("click", () => setOpen(true, true));
+    dock.dataset.mode = noteMode;
+    dock.append(backPill, box, launch);
+    let open = noteMode !== "collapsed";
+    const setOpen = (on, focus = false) => {
+      if (noteMode === "collapsed" && on !== open) {
+        open = on;
+        dock.toggleAttribute("data-open", on);
+        box.inert = !on;
+        launch.inert = on;
+        syncReserve();
+      }
+      if (on && focus)
+        input.focus({ preventScroll: true });
+    };
+    dock.toggleAttribute("data-open", open);
+    box.inert = !open;
+    launch.inert = open;
+    const empty = () => !input.value.trim() && !voice.pending && !voice.recorder && !ink.on && !ink.paths.length;
+    const onOutside = (e) => {
+      if (open && noteMode === "collapsed" && !dock.contains(e.target) && empty())
+        setOpen(false);
+    };
+    doc.addEventListener("pointerdown", onOutside, true);
+    const ro = "ResizeObserver" in win ? new win.ResizeObserver(() => syncReserve()) : null;
+    ro?.observe(box);
+    ro?.observe(launch);
     const fit = () => {
       input.style.height = "auto";
       input.style.height = `${Math.min(140, input.scrollHeight)}px`;
@@ -21921,6 +22417,8 @@ function walkthrough(container, options) {
       } else if (e.key === "Escape") {
         e.preventDefault();
         input.blur();
+        if (empty())
+          setOpen(false);
         viewOf(current)?.card.focus({ preventScroll: true });
       }
     });
@@ -21940,13 +22438,13 @@ function walkthrough(container, options) {
     const sync = () => {
       const v = viewOf(current);
       const ctx = describeMedia(mediaContext(v));
-      const where = v ? `${v.step.number} ${v.step.title}` : "General note";
+      const where = v ? plainMarkdown(v.step.title) : "General note";
       const text = ctx ? `${where} · ${ctx}` : where;
       if (text !== lastOn) {
         on.textContent = text;
         lastOn = text;
       }
-      input.placeholder = v ? `Note on ${v.step.number}…  (n)` : "A note on the whole page…  (n)";
+      input.placeholder = v ? "A note on this step…  (n)" : "A note on the whole page…  (n)";
       const attached = `${voice.pending?.url ?? ""}|${ink.paths.length}`;
       if (attached !== lastAttached) {
         lastAttached = attached;
@@ -21985,14 +22483,45 @@ function walkthrough(container, options) {
     };
     return {
       dock,
+      box,
+      launch,
       input,
       sync,
+      get open() {
+        return open;
+      },
+      setOpen,
+      empty,
+      unobserve: () => {
+        ro?.disconnect();
+        doc.removeEventListener("pointerdown", onOutside, true);
+      },
       clear() {
         input.value = "";
         fit();
       }
     };
   })();
+  let padded = null;
+  function syncReserve() {
+    if (disposed)
+      return;
+    const h = (bar.open ? bar.box : bar.launch).offsetHeight;
+    if (noteMode === "hidden")
+      reserve = 0;
+    else if (h)
+      reserve = noteBarReserve(h, DOCK_INSET, DOCK_GAP);
+    root.style.setProperty("--kw-reserve", `${reserve}px`);
+    const s = scrollerOf(root);
+    if (padded?.el !== s) {
+      if (padded)
+        padded.el.style.scrollPaddingBottom = padded.was;
+      padded = { el: s, was: s.style.scrollPaddingBottom };
+    }
+    s.style.scrollPaddingBottom = `${reserve}px`;
+    if (full)
+      placeFull(full);
+  }
   const ticker = win.setInterval(() => !doc.hidden && bar.sync(), 500);
   const send = (text = bar.input.value) => {
     if (voice.recorder)
@@ -22028,6 +22557,10 @@ function walkthrough(container, options) {
     syncProgress();
     emit();
     bar.sync();
+    if (noteMode === "collapsed") {
+      bar.input.blur();
+      bar.setOpen(false);
+    }
     if (v && options.advance !== false) {
       const to = adjacentStep(views.map((x) => x.step.key), v.step.key, 1);
       if (to && to !== v.step.key) {
@@ -22035,7 +22568,8 @@ function walkthrough(container, options) {
           setFull(false);
         go(to);
         showBack(v.step.key);
-        bar.input.focus({ preventScroll: true });
+        if (noteMode === "docked")
+          bar.input.focus({ preventScroll: true });
       }
     }
   };
@@ -22122,22 +22656,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;
@@ -22164,42 +22781,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");
@@ -22211,8 +22813,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");
@@ -22224,45 +22835,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);
@@ -22272,16 +22882,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) => {
@@ -22322,30 +22956,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)
@@ -22370,16 +23012,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 };
   };
@@ -22438,15 +23075,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);
@@ -22525,6 +23168,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();