@kitlangton/knobs 0.4.0-next.0 → 0.4.0-next.10

package/dist/dev/{chunk-stbcgz1y.js → chunk-5pb7ymrd.js}

@@ -35,12 +35,21 @@ import {
   springMotion2,
   springResponse,
   springEasing,
+  SPRINGS2,
+  FADE,
+  MOTION,
+  reducedMotion,
+  springLinear,
   REFRESHES,
   pushReadout,
   READOUT,
   storageKey
-} from "./chunk-7xgkerd2.js";
+} from "./chunk-3ygqgy1x.js";
 import {
+  resolveLook,
+  themeOf,
+  applyLook,
+  panelLook,
   CHECK_POINTS,
   CHECK_PATH,
   iconPath,
@@ -48,7 +57,6 @@ import {
   readSession,
   writeSession,
   rolling_css_default,
-  presetCss,
   FILL,
   LEAD,
   trailScale,
@@ -93,8 +101,11 @@ import {
   digitOption,
   digitHints,
   createCrumbs,
+  TOKENS,
+  knobs,
+  aliased,
+  injectTokens,
   DELAYED,
-  injectPreset,
   injectStyles,
   resolveSound,
   sound,
@@ -105,7 +116,7 @@ import {
   createHintController,
   pageHints,
   toggleLayer
-} from "./chunk-pmkvb9ep.js";
+} from "./chunk-dyq4m24m.js";
 
 // src/panel/die.ts
 var ROUND = 16 * Math.sqrt(5), DIE = { half: 64 + ROUND, round: ROUND, pip: 12 }, PIPS = {
@@ -1292,7 +1303,7 @@ function createPresetStrip(doc, controls, showVariants, run, onAfterChange, pres
 }
 
 // src/panel/spin.ts
-var TURN = springMotion2({ duration: 0.45, bounce: 0 }), BLINK_MS = 180, spins = /* @__PURE__ */ new WeakMap, reducedMotion = (el) => el.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1, blinkAt = (ms) => ms >= BLINK_MS ? 1 : 1 - 0.55 * Math.sin(Math.PI * ms / BLINK_MS);
+var TURN = springMotion2(SPRINGS2.smooth), BLINK_MS = 180, spins = /* @__PURE__ */ new WeakMap, reducedMotion2 = (el) => el.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1, blinkAt = (ms) => ms >= BLINK_MS ? 1 : 1 - 0.55 * Math.sin(Math.PI * ms / BLINK_MS);
 function spin(button, wake, rest) {
   let icon = button.querySelector(".knobs-icon"), win = button.ownerDocument.defaultView;
   if (!icon || !win)
@@ -1303,7 +1314,7 @@ function spin(button, wake, rest) {
   let state = s;
   state.rest = rest;
   let now = win.performance.now();
-  if (reducedMotion(button))
+  if (reducedMotion2(button))
     state.blinkAt = now;
   else
     state.spring.set(state.spring.target - 360);
@@ -1353,7 +1364,7 @@ function resize(node, from) {
     return;
   }
   node.style.overflow = "hidden";
-  let ease = win.getComputedStyle(node).getPropertyValue("--k-reveal-ease").trim() || EASE_OUT, animation = node.animate([{ height: `${from}px` }, { height: `${to}px` }], {
+  let ease = win.getComputedStyle(node).getPropertyValue("--_k-reveal-ease").trim() || EASE_OUT, animation = node.animate([{ height: `${from}px` }, { height: `${to}px` }], {
     duration: 200,
     easing: ease
   });
@@ -2179,7 +2190,7 @@ function rollMs(el) {
   let n = parseFloat(getComputedStyle(el).getPropertyValue("--k-roll"));
   return Number.isFinite(n) ? Math.max(0, n) : 320;
 }
-var reducedMotion2 = (el) => el.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1, onCanvas = (el) => el.closest('[data-gpu-active="true"]') !== null, readouts = /* @__PURE__ */ new WeakMap, rollingReadoutOf = (el) => readouts.get(el), settle = (value, decimals) => {
+var reducedMotion3 = (el) => el.ownerDocument.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1, onCanvas = (el) => el.closest('[data-gpu-active="true"]') !== null, readouts = /* @__PURE__ */ new WeakMap, rollingReadoutOf = (el) => readouts.get(el), settle = (value, decimals) => {
   let v = Number(value.toFixed(decimals));
   return v === 0 ? 0 : v;
 };
@@ -2197,7 +2208,7 @@ function rollingReadout(host) {
       return segments.map((s) => s.text).join("");
     },
     show(parts, ms, delay = 0) {
-      if (ms > 0 && reducedMotion2(host))
+      if (ms > 0 && reducedMotion3(host))
         ms = 0;
       let next = parts.map((p) => typeof p === "string" ? "t" : `n${p.decimals}`).join("|");
       if (next !== shape) {
@@ -2263,7 +2274,7 @@ function fadeText(el, text, fade) {
     return;
   el.dataset.text = text, el.toggleAttribute("data-fade", fade);
   let now = el.ownerDocument.createElement("span");
-  if (now.textContent = text, el.replaceChildren(now), !fade || !was || !el.isConnected || onCanvas(el) || reducedMotion2(el))
+  if (now.textContent = text, el.replaceChildren(now), !fade || !was || !el.isConnected || onCanvas(el) || reducedMotion3(el))
     return;
   let ghost = el.ownerDocument.createElement("span");
   ghost.className = "knobs-ghost", ghost.setAttribute("aria-hidden", "true"), ghost.textContent = was, el.append(ghost), now.animate([{ opacity: 0 }, { opacity: 1 }], {
@@ -2530,6 +2541,35 @@ var withAlpha = (c, k) => [
     a[3] + (b[3] - a[3]) * u
   ];
 };
+function pickScheme(raw, light) {
+  let s = raw;
+  for (let at = s.lastIndexOf("light-dark(");at >= 0; at = s.lastIndexOf("light-dark(")) {
+    let depth = 0, comma = -1, end = -1;
+    for (let i = at + 11;i < s.length; i++) {
+      let ch = s[i];
+      if (ch === "(")
+        depth++;
+      else if (ch === ")") {
+        if (depth === 0) {
+          end = i;
+          break;
+        }
+        depth--;
+      } else if (ch === "," && depth === 0 && comma < 0)
+        comma = i;
+    }
+    if (end < 0 || comma < 0)
+      break;
+    let side = light ? s.slice(at + 11, comma) : s.slice(comma + 1, end);
+    s = s.slice(0, at) + side.trim() + s.slice(end + 1);
+  }
+  return s;
+}
+var isLightStyle = (style) => style.getPropertyValue("--_k-light").trim() === "1";
+function tokenColor(style, name, fallback) {
+  let raw = style.getPropertyValue(name).trim();
+  return raw ? parseCssColor(pickScheme(raw, isLightStyle(style)), fallback) : fallback;
+}
 
 // src/panel/gpu/color.ts
 function cssMix(a, b, p) {
@@ -2539,7 +2579,7 @@ function cssMix(a, b, p) {
   let ch = (i) => (a[i] * a[3] * p + b[i] * b[3] * (1 - p)) / alpha;
   return [ch(0), ch(1), ch(2), alpha];
 }
-var token = (style, name) => style.getPropertyValue(`--kv-${name}`) || style.getPropertyValue(`--k-${name}`), numProp = (style, name, fallback) => {
+var token = (style, name) => pickScheme(style.getPropertyValue(`--kv-${name}`) || style.getPropertyValue(`--_k-${name}`) || style.getPropertyValue(`--k-${name}`), isLightStyle(style)), numProp = (style, name, fallback) => {
   let raw = parseFloat(token(style, name));
   return Number.isFinite(raw) ? raw : fallback;
 }, lengthProp = (style, name, em, fallback) => {
@@ -2549,7 +2589,7 @@ var token = (style, name) => style.getPropertyValue(`--kv-${name}`) || style.get
   return raw.endsWith("em") ? n * em : n;
 }, colorProp = (style, name, fallback) => token(style, name).trim() ? parseCssColor(token(style, name), fallback) : fallback, optColor = (style, name) => {
   let raw = style.getPropertyValue(`--k-${name}`).trim();
-  return raw ? parseCssColor(raw, [0, 0, 0, 0]) : null;
+  return raw ? parseCssColor(pickScheme(raw, isLightStyle(style)), [0, 0, 0, 0]) : null;
 }, optLength = (style, name, em) => {
   let raw = style.getPropertyValue(`--k-${name}`).trim();
   if (!raw)
@@ -2563,7 +2603,7 @@ function readPanelTokens(panel, version = -1) {
     if (hit && hit.version === version)
       return hit.tokens;
   }
-  let style = getComputedStyle(panel), bg = parseCssColor(token(style, "bg"), [0.11, 0.11, 0.12, 1]), isLight = bg[0] * 0.2126 + bg[1] * 0.7152 + bg[2] * 0.0722 > 0.55, surface = parseCssColor(token(style, "surface"), isLight ? [0, 0, 0, 0.05] : [1, 1, 1, 0.055]), surfaceHi = parseCssColor(token(style, "surface-hi"), isLight ? [0, 0, 0, 0.095] : [1, 1, 1, 0.11]), line = parseCssColor(token(style, "line"), isLight ? [0, 0, 0, 0.1] : [1, 1, 1, 0.1]), lineHi = parseCssColor(token(style, "line-hi"), isLight ? [0, 0, 0, 0.2] : [1, 1, 1, 0.18]), text = parseCssColor(token(style, "text"), isLight ? [0, 0, 0, 0.88] : [1, 1, 1, 0.92]), label = parseCssColor(token(style, "label"), isLight ? [0.23, 0.23, 0.26, 0.68] : [1, 1, 1, 0.64]), dim = parseCssColor(token(style, "dim"), isLight ? [0.235, 0.235, 0.263, 0.5] : [1, 1, 1, 0.42]), accent = parseCssColor(token(style, "accent"), isLight ? [0.11, 0.11, 0.12, 1] : [1, 1, 1, 1]), modified = parseCssColor(token(style, "modified"), isLight ? [0, 0, 0, 0.42] : [1, 1, 1, 0.5]), segBg = parseCssColor(token(style, "seg-bg"), isLight ? [0, 0, 0, 0.065] : [0, 0, 0, 0.26]), segActive = parseCssColor(token(style, "seg-active"), surfaceHi), toggleTrack = parseCssColor(token(style, "toggle-track"), isLight ? [0, 0, 0, 0.14] : [1, 1, 1, 0.14]), fillBase = style.getPropertyValue("--k-fill-base").trim() ? parseCssColor(token(style, "fill-base"), surfaceHi) : surfaceHi, accentLum = accent[0] * 0.2126 + accent[1] * 0.7152 + accent[2] * 0.0722, toggleThumb = parseCssColor(token(style, "toggle-thumb"), !isLight && accentLum > 0.78 ? bg : [1, 1, 1, 1]), [duration, bounce] = style.getPropertyValue("--k-spring").trim().split(/\s+/).map(Number), fill = Number.isFinite(duration) && Number.isFinite(bounce) ? springMotion2({ duration, bounce }) : { omega: 30, zeta: 0.88 }, fontFamily = style.fontFamily || style.getPropertyValue("--k-font").trim() || 'system-ui, -apple-system, "SF Pro Text", sans-serif', monoFamily = style.getPropertyValue("--k-mono").trim() || '"SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace', unit = numProp(style, "unit", 4), pad = numProp(style, "pad", 10), inset = numProp(style, "inset", pad), row = numProp(style, "row", 32), gap = numProp(style, "gap", 4), trayPad = numProp(style, "tray-pad", unit * 0.5), radius = numProp(style, "radius", 8), panelRadius = numProp(style, "panel-radius", radius + unit), radiusMd = Math.max(0, radius - trayPad), radiusSm = Math.max(0, radius - trayPad * 2), fontSize = parseFloat(style.fontSize) || numProp(style, "font-size", 12), roundRaw = style.getPropertyValue("--k-round").trim(), round = /^-?[\d.]+(px)?$/.test(roundRaw) ? Math.max(0, parseFloat(roundRaw)) : radius > 0 ? 1e4 : 0, tokens = {
+  let style = getComputedStyle(panel), light = isLightStyle(style), theme = gpuDefaults(themeOf(panel), light), bg = parseCssColor(token(style, "bg"), theme.bg), isLight = light || bg[0] * 0.2126 + bg[1] * 0.7152 + bg[2] * 0.0722 > 0.55, surface = parseCssColor(token(style, "fill"), theme.fill), surfaceHi = parseCssColor(token(style, "fill-selected"), theme["fill-selected"]), line = parseCssColor(token(style, "border"), theme.border), lineHi = parseCssColor(token(style, "border-strong"), theme["border-strong"]), text = parseCssColor(token(style, "fg"), theme.fg), label = parseCssColor(token(style, "fg-2"), theme["fg-2"]), dim = parseCssColor(token(style, "fg-3"), theme["fg-3"]), accent = parseCssColor(token(style, "accent"), theme.accent), modified = parseCssColor(token(style, "modified"), theme.modified), segBg = parseCssColor(token(style, "segmented-track"), theme["segmented-track"]), segActive = parseCssColor(token(style, "segmented-active"), theme["segmented-active"]), toggleTrack = parseCssColor(token(style, "toggle-track"), theme["toggle-track"]), fillBase = style.getPropertyValue("--k-fill-base").trim() ? parseCssColor(token(style, "fill-base"), surfaceHi) : surfaceHi, toggleThumb = parseCssColor(token(style, "toggle-thumb"), theme["toggle-thumb"]), [duration, bounce] = style.getPropertyValue("--k-spring").trim().split(/\s+/).map(Number), fill = Number.isFinite(duration) && Number.isFinite(bounce) ? springMotion2({ duration, bounce }) : MOTION.default, fontFamily = style.fontFamily || style.getPropertyValue("--_k-font").trim() || 'system-ui, -apple-system, "SF Pro Text", sans-serif', monoFamily = style.getPropertyValue("--_k-mono").trim() || '"SF Mono", SFMono-Regular, ui-monospace, Menlo, monospace', unit = numProp(style, "unit", 4), pad = numProp(style, "pad", 10), inset = numProp(style, "inset", pad), row = numProp(style, "row", 32), gap = numProp(style, "gap", 4), trayPad = numProp(style, "tray-pad", unit * 0.5), radius = numProp(style, "radius", 8), panelRadius = numProp(style, "radius-panel", radius + unit), radiusMd = Math.max(0, radius - trayPad), radiusSm = Math.max(0, radius - trayPad * 2), fontSize = parseFloat(style.fontSize) || numProp(style, "font-size", 12), roundRaw = style.getPropertyValue("--_k-round").trim(), round = /^-?[\d.]+(px)?$/.test(roundRaw) ? Math.max(0, parseFloat(roundRaw)) : radius > 0 ? 1e4 : 0, tokens = {
     bg,
     surface,
     surfaceHi,
@@ -2578,26 +2618,26 @@ function readPanelTokens(panel, version = -1) {
     segActive,
     toggleTrack,
     toggleThumb,
-    rim: parseCssColor(token(style, "rim"), isLight ? [1, 1, 1, 0.6] : [1, 1, 1, 0.1]),
-    edge: parseCssColor(token(style, "edge"), isLight ? [0, 0, 0, 0.07] : [1, 1, 1, 0.07]),
+    rim: parseCssColor(token(style, "rim"), theme.rim),
+    edge: parseCssColor(token(style, "border-subtle"), theme["border-subtle"]),
     rimWidth: lengthProp(style, "rim-width", fontSize, 1),
-    page: parseCssColor(token(style, "page"), isLight ? [0.902, 0.902, 0.922, 1] : [0.063, 0.063, 0.071, 1]),
+    page: parseCssColor(token(style, "bg-page"), theme["bg-page"]),
     rowHover: withAlpha(surface, 0.5),
     rowGap: numProp(style, "row-gap", 0),
     hoverIn: numProp(style, "hover-in", 0),
     hoverOut: numProp(style, "hover-out", 120),
     handleRest: numProp(style, "handle-rest", 0),
-    handle: colorProp(style, "handle", accent),
+    handle: colorProp(style, "slider-handle", accent),
     handleInset: lengthProp(style, "handle-inset", fontSize, 0),
     groupUpper: style.getPropertyValue("--k-group-transform").trim() !== "none",
     groupSize: lengthProp(style, "group-size", fontSize, fontSize - 2),
-    groupColor: colorProp(style, "group-color", dim),
+    groupColor: colorProp(style, "group-label", dim),
     groupTracking: lengthProp(style, "group-tracking", 1, 0.04),
     groupDivider: colorProp(style, "group-divider", [0, 0, 0, 0]),
     unitGap: lengthProp(style, "unit-gap", fontSize - 0.5, (fontSize - 0.5) * 0.28),
     unitColor: /^currentcolor$/i.test(token(style, "unit-color").trim()) ? null : colorProp(style, "unit-color", dim),
     readoutMark: numProp(style, "readout-mark", 0),
-    valueFamily: style.getPropertyValue("--k-value-font").trim() || fontFamily,
+    valueFamily: style.getPropertyValue("--_k-value-font").trim() || fontFamily,
     curveInset: lengthProp(style, "curve-inset", fontSize, 6),
     curveDashed: style.getPropertyValue("--k-curve-guide").trim() === "dashed",
     curveDot: numProp(style, "curve-dot", 1),
@@ -2622,7 +2662,7 @@ function readPanelTokens(panel, version = -1) {
     textControl: fontSize - 0.5,
     textMeta: fontSize - 1,
     textCap: fontSize - 2,
-    valueSize: parseFloat(style.getPropertyValue("--kc-value-size")) || fontSize - 0.5,
+    valueSize: parseFloat(style.getPropertyValue("--_k-value-size")) || fontSize - 0.5,
     buttonBg: optColor(style, "button-bg"),
     buttonLine: optColor(style, "button-line"),
     buttonHoverBg: optColor(style, "button-hover-bg"),
@@ -2633,7 +2673,7 @@ function readPanelTokens(panel, version = -1) {
     boxed: Boolean(style.getPropertyValue("--k-button-bg").trim() || style.getPropertyValue("--k-button-line").trim()),
     iconSize: numProp(style, "icon-size", 14),
     iconSm: numProp(style, "icon-sm", 13),
-    labelWeight: numProp(style, "label-weight", 500),
+    labelWeight: numProp(style, "weight-label", 500),
     disabledOpacity: numProp(style, "disabled-opacity", 0.32),
     hintTypedOpacity: numProp(style, "hint-typed-opacity", 0.42),
     blurStrength: numProp(style, "blur", 1),
@@ -2647,11 +2687,11 @@ function readPanelTokens(panel, version = -1) {
     fontFamily,
     monoFamily,
     isLight,
-    fontWeight: numProp(style, "font-weight", 400),
-    titleWeight: numProp(style, "title-weight", 600),
+    fontWeight: numProp(style, "weight", 400),
+    titleWeight: numProp(style, "weight-title", 600),
     round,
     flat: style.getPropertyValue("--k-frame").trim() === "flat",
-    thumb: colorProp(style, "thumb", [1, 1, 1, 1]),
+    thumb: colorProp(style, "toggle-thumb-off", theme["toggle-thumb-off"]),
     lift: Math.max(0, numProp(style, "lift", 1)),
     shadowStrength: Math.max(0, numProp(style, "shadow-strength", isLight ? 0.16 : 0.48))
   };
@@ -2659,6 +2699,15 @@ function readPanelTokens(panel, version = -1) {
     tokenCache.set(panel, { version, tokens });
   return tokens;
 }
+var toSrgb = (c) => c <= 0.0031308 ? 12.92 * c : 1.055 * c ** 0.4166666666666667 - 0.055, defaults = /* @__PURE__ */ new WeakMap;
+function gpuDefaults(theme, light) {
+  let t = theme ?? knobs, hit = defaults.get(t);
+  if (!hit) {
+    let convert = (g) => Object.fromEntries(Object.entries(g).map(([k, [r, gg, b, a]]) => [k, [toSrgb(r), toSrgb(gg), toSrgb(b), a]]));
+    hit = { dark: convert(t.gpu.dark), light: convert(t.gpu.light) }, defaults.set(t, hit);
+  }
+  return light ? hit.light : hit.dark;
+}
 
 // src/panel/gpu/die.wgsl.ts
 var f = (n) => Number.isInteger(n) ? `${n}.0` : String(n), v3 = (v) => `vec3f(${v.map(f).join(", ")})`, pipBranches = FACES.map(({ value }, i) => {
@@ -3511,7 +3560,7 @@ fn shadeAt(p: Prim, at: vec2f, rect: vec4f, frag: vec2f) -> vec4f {
 `;
 
 // src/panel/gpu/renderer.ts
-var LAYOUT_TOKENS = new Set(["width", "pad", "inset", "row", "gap", "font-size", "label-weight"].map((t) => `--kt-${t}`)), nudge = (r, dx) => dx === 0 ? r : {
+var LAYOUT_TOKENS = new Set(["width", "pad", "inset", "row", "gap", "font-size", "weight-label"].map((t) => `--kt-${t}`)), nudge = (r, dx) => dx === 0 ? r : {
   left: r.left + dx,
   right: r.right + dx,
   x: r.x + dx,
@@ -3719,7 +3768,13 @@ class GpuOverlayManager {
     });
     mo.observe(panel.root, {
       attributes: !0,
-      attributeFilter: ["data-theme", "data-density", "data-preset", "style"]
+      attributeFilter: [
+        "data-knobs-theme",
+        "data-appearance",
+        "data-density",
+        "data-preset",
+        "style"
+      ]
     });
     let onTokenEvent = (event) => {
       let name = event.propertyName;
@@ -5364,7 +5419,7 @@ class GpuOverlayManager {
     let t = this.curTokens, el = cap.chip, text = cap.text.textContent ?? "", key = textKey(text), r = this.rectOf(el, key);
     if (r.width <= 0)
       return;
-    let still = this.curReduced, capturing = cap.capturing(), on = interactive && (this.isHovered(el) || this.isFocused(el)), w = this.ease(el, "capw", r.width, still ? SNAP_OMEGA : 2 * Math.PI / 0.25), texts = this.capTexts.get(el);
+    let still = this.curReduced, capturing = cap.capturing(), on = interactive && (this.isHovered(el) || this.isFocused(el)), w = this.ease(el, "capw", r.width, still ? SNAP_OMEGA : MOTION.snappy.omega), texts = this.capTexts.get(el);
     if (!texts)
       this.capTexts.set(el, texts = { now: text, was: "" });
     if (texts.now !== text)
@@ -5635,7 +5690,7 @@ class GpuOverlayManager {
       this.curBypassRectCache = opening || leaving || panelRevealing && !bodyRevealing || layoutGliding || pageMoving || presenceRunning;
       let tokens = rawTokens;
       this.curTokens = tokens, this.curLocks = panel.locks, this.curLens = panel.lens !== void 0;
-      let armedLook = this.armedLook(panel.root), armed = this.ease(panel.root, "armed", panel.root.hasAttribute("data-k-armed") ? 1 : 0, reducedMotion ? SNAP_OMEGA : 2 * Math.PI / 0.3);
+      let armedLook = this.armedLook(panel.root), armed = this.ease(panel.root, "armed", panel.root.hasAttribute("data-k-armed") ? 1 : 0, reducedMotion ? SNAP_OMEGA : MOTION.default.omega);
       if (this.curDt = reducedMotion ? 1 : dt, this.curReduced = reducedMotion, opening || leaving)
         this.curAlpha = Number(getComputedStyle(panel.root).opacity) || 0, anyMoving = !0;
       else
@@ -6574,36 +6629,26 @@ function getGpuOverlayManager(doc) {
 }
 
 // src/panel/menu.ts
-var TOKENS = [
+var TOKEN_NAMES = TOKENS.map((t) => t.name), BORROWED = TOKEN_NAMES.map((t) => `--_k-${t}`), GLIDES = [
   "bg",
-  "surface",
-  "surface-hi",
-  "seg-bg",
-  "line",
-  "text",
-  "label",
-  "dim",
+  "fill",
+  "fill-selected",
+  "segmented-track",
+  "border",
+  "fg",
+  "fg-2",
+  "fg-3",
   "accent",
   "font-size",
   "radius",
   "row",
   "rim"
-], reduced = (doc) => doc.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1;
+].map((t) => `--kv-${t}`), reduced = (doc) => doc.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1;
 function openMenu(doc, panel, items, at, options = {}) {
   let win = doc.defaultView, previous = options.returnTo ?? doc.activeElement, menu = doc.createElement("div");
-  menu.className = "knobs-menu", menu.setAttribute("role", "menu"), menu.tabIndex = -1;
+  menu.className = "knobs-root knobs-menu", menu.setAttribute("role", "menu"), menu.tabIndex = -1;
   let cs = win.getComputedStyle(panel);
-  for (let t of TOKENS)
-    menu.style.setProperty(`--kv-${t}`, cs.getPropertyValue(`--kv-${t}`));
-  for (let t of [
-    "--k-font",
-    "--k-mono",
-    "--k-unit",
-    "--k-shadow",
-    "--k-font-weight",
-    "--k-title-weight",
-    "--k-control-h"
-  ])
+  for (let t of [...BORROWED, ...GLIDES])
     menu.style.setProperty(t, cs.getPropertyValue(t));
   menu.style.colorScheme = cs.colorScheme;
   let active = -1, enabled = (i) => !items[i]?.disabled && !nodes[i]?.hidden, list = doc.createElement("div");
@@ -7068,7 +7113,7 @@ function createPageLayout(doc, host, options) {
   }
   let lit = null, glows = /* @__PURE__ */ new Map, glowing = /* @__PURE__ */ new Set, dimAmount = 0.4, panelSpring = () => {
     let [duration, bounce] = getComputedStyle(host).getPropertyValue("--k-spring").trim().split(/\s+/).map(Number);
-    return Number.isFinite(duration) && Number.isFinite(bounce) ? springMotion2({ duration, bounce }) : { omega: 30, zeta: 0.88 };
+    return Number.isFinite(duration) && Number.isFinite(bounce) ? springMotion2({ duration, bounce }) : MOTION.default;
   }, idOf = (tile) => tile.dataset.group ?? tile.dataset.card, focusedIn = (node) => node.contains(doc.activeElement), litTile = (tile) => {
     if (!lit)
       return { on: !0, own: !1 };
@@ -7153,7 +7198,7 @@ function createPageLayout(doc, host, options) {
       let h = Math.max(0, m.h.x);
       if (node.style.height = `${h}px`, node.style.overflow = "clip", m.fold !== void 0) {
         let f = Math.min(1, m.fold > 0 ? h / m.fold : 0);
-        if (node.style.paddingTop = node.style.paddingBottom = `calc(var(--k-pad) * ${f})`, node.style.marginBottom = `${-gapPx * (1 - f) - Math.max(0, 2 - h)}px`, !m.o)
+        if (node.style.paddingTop = node.style.paddingBottom = `calc(var(--kv-pad) * ${f})`, node.style.marginBottom = `${-gapPx * (1 - f) - Math.max(0, 2 - h)}px`, !m.o)
           node.style.opacity = leaving.has(node) && f < 0.3333333333333333 ? String(f * 3) : "";
       }
     }
@@ -8076,7 +8121,7 @@ function createSlider(doc, key, initialField, set, onMotionWake, options = {}) {
     return r + (ratioOf(pulled) - r) * tokens.resist;
   }, gpuActive = () => root.closest('[data-gpu-active="true"]') !== null, reduced = doc.defaultView?.matchMedia("(prefers-reduced-motion: reduce)"), writeFill = (ratio) => {
     let p = `${ratio * 100}%`;
-    fill.style.setProperty("--k-fill", p), handle.style.setProperty("--k-fill", p), ruler.style.setProperty("--k-fill", p);
+    fill.style.setProperty("--_k-fill-at", p), handle.style.setProperty("--_k-fill-at", p), ruler.style.setProperty("--_k-fill-at", p);
   }, frame = 0, frameAt = 0, smear = 0, synced = !0, springDriven = () => frame !== 0 || inHand() && stepped() || readTokens().blur > 0, setSmear = (px) => {
     let next = px < 0.25 ? 0 : px;
     if (next === smear)
@@ -8094,7 +8139,7 @@ function createSlider(doc, key, initialField, set, onMotionWake, options = {}) {
     if (frame)
       return;
     if (!synced) {
-      let shown = parseFloat(getComputedStyle(fill).getPropertyValue("--k-fill"));
+      let shown = parseFloat(getComputedStyle(fill).getPropertyValue("--_k-fill-at"));
       if (Number.isFinite(shown))
         fillSpring.x = shown / 100, fillSpring.v = 0;
       synced = !0;
@@ -8727,7 +8772,7 @@ function smearFilters(doc, plot) {
 }
 
 // src/panel/editors.ts
-var reducedMotion3 = (doc) => doc.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1, rgbCss = (rgb) => `rgb(${rgb.map((v) => Math.round(v * 2550) / 10).join(" ")})`, pathOf = (pts) => {
+var reducedMotion4 = (doc) => doc.defaultView?.matchMedia("(prefers-reduced-motion: reduce)").matches ?? !1, rgbCss = (rgb) => `rgb(${rgb.map((v) => Math.round(v * 2550) / 10).join(" ")})`, pathOf = (pts) => {
   let d = "";
   for (let i = 0;i < pts.length; i += 2)
     d += `${i ? "L" : "M"}${pts[i].toFixed(2)} ${pts[i + 1].toFixed(2)}`;
@@ -8982,7 +9027,7 @@ function springRow(c) {
   }, size = measure2(box, () => {
     readLook(), draw(!0);
   }), dragging = () => parts.some((p) => p.slider.isDragging()), dotAnimation, play = (delay) => {
-    if (!size.w || reducedMotion3(c.doc))
+    if (!size.w || reducedMotion4(c.doc))
       return;
     let frames = points(), ms = SPRING_WINDOW * 1000;
     dotRun = { at: performance.now() + delay, frames, ms };
@@ -9534,7 +9579,7 @@ function easingRow(c) {
       let [x0, y0] = map(0, 0), [x1, y1] = map(1, 1);
       guides.setAttribute("d", `M${EASE_PAD.x} ${y0}H${size.w - EASE_PAD.x}M${EASE_PAD.x} ${y1}H${size.w - EASE_PAD.x}M${x0} ${y0}L${x1} ${y1}`);
     }
-    let still = instant || !placed || reducedMotion3(c.doc);
+    let still = instant || !placed || reducedMotion4(c.doc);
     if (placed = !0, morph.set(unitSamples(), unitHandles(), { instant: still, delay, now: performance.now() }), morph.moving)
       strength = curveBlur(x.row), loop.kick();
     draw();
@@ -9732,7 +9777,7 @@ function gradientRow(c) {
       stop.style.setProperty("--kgs-grow", grow >= 0.999 ? "" : grow.toFixed(3)), tick.style.left = `${d.at[0] * 100}%`, tick.style.setProperty("--kgs-grow", grow >= 0.999 ? "" : grow.toFixed(3)), smears.dot(stop, ...stopSmear(d));
     }
   }, loop = morphLoop(c, morph, draw), layout = (instant, delay = 0) => {
-    let still = instant || !initialized || reducedMotion3(c.doc);
+    let still = instant || !initialized || reducedMotion4(c.doc);
     if (morph.set(gradientSamples(shown, f.space), unitStops(), {
       instant: still,
       delay,
@@ -10068,7 +10113,7 @@ function curveRow(c) {
     }
     if (miniSize.h)
       mini.setAttribute("viewBox", `0 0 ${MINI_W} ${miniSize.h}`);
-    let still = instant || !initialized || reducedMotion3(c.doc);
+    let still = instant || !initialized || reducedMotion4(c.doc);
     if (morph.set(unitSamples(), unitPoints(), { instant: still, delay, now: performance.now() }), morph.moving)
       strength = curveBlur(x.row), loop.kick();
     draw(), drawHover();
@@ -10721,7 +10766,7 @@ function angleRow(c) {
     return f().wrap ? wrapAngle2(q, f().min, f().max) : clamp(q, f().min, f().max);
   }, rolling = rollingReadout(read), paint = (instant, delay = 0) => {
     let t = mixed ? "—" : `${fmt(value, places())}°`;
-    if (rolling.show(mixed ? ["—"] : [{ value, decimals: places() }, "°"], instant || row.classList.contains("knobs-active") ? 0 : rollMs(row), delay), control.setAttribute("aria-valuenow", String(value)), control.setAttribute("aria-valuetext", t), instant || reducedMotion3(c.doc))
+    if (rolling.show(mixed ? ["—"] : [{ value, decimals: places() }, "°"], instant || row.classList.contains("knobs-active") ? 0 : rollMs(row), delay), control.setAttribute("aria-valuenow", String(value)), control.setAttribute("aria-valuetext", t), instant || reducedMotion4(c.doc))
       hand.style.transition = "none";
     if (hand.style.rotate = `${turn.toFixed(3)}deg`, instant)
       hand.offsetWidth, hand.style.transition = "";
@@ -10964,14 +11009,14 @@ function seedRow(c) {
     gpu: [gpu]
   };
 }
-var CAP_MORPH = springEasing(2 * Math.PI / 0.25, 1);
+var CAP_MORPH = springLinear(SPRINGS2.snappy);
 function keyCap(o) {
   let chip = o.doc.createElement("button");
   chip.className = "knobs-keys", chip.type = "button";
   let text = o.doc.createElement("span");
   text.className = "knobs-keys-text", chip.append(text);
   let value = "", capturing = !1, preview = "", morph, write = (shown) => {
-    let glide = chip.isConnected && chip.offsetWidth > 0 && !chip.closest('[data-gpu-active="true"]') && !reducedMotion3(o.doc), from = glide ? chip.getBoundingClientRect().width : 0;
+    let glide = chip.isConnected && chip.offsetWidth > 0 && !chip.closest('[data-gpu-active="true"]') && !reducedMotion4(o.doc), from = glide ? chip.getBoundingClientRect().width : 0;
     if (morph?.cancel(), text.textContent = shown, !glide)
       return;
     let to = chip.getBoundingClientRect().width;
@@ -11161,7 +11206,7 @@ function toolbarRow(c, press, keyOf = toolbarShortcut2) {
     },
     press(item) {
       let i = field.items.indexOf(item), b = buttons[i];
-      if (b && !reducedMotion3(c.doc))
+      if (b && !reducedMotion4(c.doc))
         b.classList.add("knobs-pressed"), setTimeout(() => b.classList.remove("knobs-pressed"), 140), c.wake();
       press(item);
     },
@@ -11277,34 +11322,33 @@ function markLabel(label, text, span) {
 }
 
 // src/ui/activity-css.ts
-var open = springEasing(2 * Math.PI / 0.22, 1), activityCss = `
+var open = springLinear(SPRINGS2.snappy), activityCss = `
 :where(.knobs-activity,.knobs-activity *){box-sizing:border-box}
-:where(.knobs-activity){color-scheme:dark}
 .knobs-ui.knobs-activity{position:relative;display:block;height:100%;overflow:auto;overflow-anchor:none;outline:none;scrollbar-width:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none;
-  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;
-  --ka-gutter:var(--k-activity-gutter,28px);--ka-row:var(--k-activity-row,var(--ku-row));--ka-row-child:var(--k-activity-row-child,calc(var(--ka-row) - 6px));
-  --ka-line:var(--k-activity-line,var(--ku-line-hi));--ka-select:var(--k-activity-select,var(--ku-wash-hi));--ka-hover:var(--k-activity-hover,var(--ku-wash));
-  --ka-you:var(--k-activity-you,light-dark(#007aff,#0a84ff));--ka-agent:var(--k-activity-agent,var(--ku-label));--ka-proposal:var(--k-activity-proposal,var(--ku-text));
-  --ka-review:var(--k-activity-review,var(--ku-text));--ka-pr:var(--k-activity-pr,light-dark(#8944ab,#bf5af2));--ka-build:var(--k-activity-build,var(--ku-label));
-  --ka-blocked:var(--k-activity-blocked,var(--ku-warn));--ka-shipped:var(--k-activity-shipped,light-dark(#248a3d,#30d158));--ka-open-ease:${open.easing};--ka-open-ms:${open.ms}ms}
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;
+  --ka-gutter:var(--k-activity-gutter,28px);--ka-row:var(--k-activity-row,var(--_k-row));--ka-row-child:var(--k-activity-row-child,calc(var(--ka-row) - 6px));
+  --ka-line:var(--_k-activity-rail);--ka-select:var(--k-activity-select,var(--_ku-wash-hi));--ka-hover:var(--k-activity-hover,var(--_ku-wash));
+  --ka-you:var(--k-activity-you,var(--_k-info));--ka-agent:var(--k-activity-agent,var(--_k-fg-2));--ka-proposal:var(--k-activity-proposal,var(--_k-fg));
+  --ka-review:var(--k-activity-review,var(--_k-fg));--ka-pr:var(--k-activity-pr,var(--_k-series-5));--ka-build:var(--k-activity-build,var(--_k-fg-2));
+  --ka-blocked:var(--k-activity-blocked,var(--_k-warn));--ka-shipped:var(--k-activity-shipped,var(--_k-ok));--ka-open-ease:${open.easing};--ka-open-ms:${open.ms}ms}
 .knobs-activity [hidden]{display:none!important}
 /* Clipped below: the content grows on a spring, so a new last row shows as the rail makes room. */
 .knobs-activity-space{position:relative;width:100%;overflow-x:visible;overflow-y:clip;pointer-events:none}
-.knobs-activity-line{position:absolute;top:0;left:calc(var(--ku-row-x) + var(--ka-gutter) / 2 - 1px);width:2px;height:100%;overflow:visible;pointer-events:none;z-index:1}
+.knobs-activity-line{position:absolute;top:0;left:calc(var(--_ku-row-x) + var(--ka-gutter) / 2 - 1px);width:2px;height:100%;overflow:visible;pointer-events:none;z-index:1}
 .knobs-activity-line path{fill:none;stroke:var(--ka-line);stroke-width:1px}
 /* The selection's tint: a wash that glides between rows, shown only once keys move it. It leaves
    in 100 ms when the pointer is used, and comes back at once. */
-.knobs-activity-hl{position:absolute;left:var(--ku-row-x);right:var(--ku-row-x);top:0;height:0;border-radius:var(--ku-row-radius);background:var(--ka-select);opacity:0;
+.knobs-activity-hl{position:absolute;left:var(--_ku-row-x);right:var(--_ku-row-x);top:0;height:0;border-radius:var(--_ku-row-radius);background:var(--ka-select);opacity:0;
   transition:opacity 100ms ease-out;pointer-events:none;will-change:transform}
 .knobs-activity[data-keys] .knobs-activity-hl{opacity:1;transition:none}
-.knobs-activity-row{position:absolute;left:var(--ku-row-x);right:var(--ku-row-x);top:0;display:flex;align-items:center;height:var(--ka-row);padding-right:calc(var(--ku-inset) - 4px);
-  color:var(--ku-text);white-space:nowrap;cursor:default;will-change:transform;transform-origin:calc(var(--ka-gutter) / 2) 50%;pointer-events:auto;--ka-tint:var(--ka-agent)}
+.knobs-activity-row{position:absolute;left:var(--_ku-row-x);right:var(--_ku-row-x);top:0;display:flex;align-items:center;height:var(--ka-row);padding-right:calc(var(--_k-inset) - 4px);
+  color:var(--_k-fg);white-space:nowrap;cursor:default;will-change:transform;transform-origin:calc(var(--ka-gutter) / 2) 50%;pointer-events:auto;--ka-tint:var(--ka-agent)}
 .knobs-activity-row[data-leaving]{pointer-events:none}
 .knobs-activity-row[data-depth="1"]{height:var(--ka-row-child)}
 .knobs-activity-row>*{position:relative}
 /* Hover: in at once, out over 100 ms; not while keys drive the selection. */
-.knobs-activity-row::before{content:"";position:absolute;inset:0;border-radius:var(--ku-row-radius);background:var(--ka-hover);opacity:0;transition:opacity calc(var(--k-hover-out,100) * 1ms) ease-out;pointer-events:none}
-.knobs-activity:not([data-keys]) .knobs-activity-row:not([data-leaving]):hover::before{opacity:1;transition-duration:calc(var(--k-hover-in,0) * 1ms)}
+.knobs-activity-row::before{content:"";position:absolute;inset:0;border-radius:var(--_ku-row-radius);background:var(--ka-hover);opacity:0;transition:opacity calc(var(--_k-hover-out,100) * 1ms) ease-out;pointer-events:none}
+.knobs-activity:not([data-keys]) .knobs-activity-row:not([data-leaving]):hover::before{opacity:1;transition-duration:calc(var(--_k-hover-in,0) * 1ms)}
 .knobs-activity-row[data-kind="you"]{--ka-tint:var(--ka-you)}
 .knobs-activity-row[data-kind="agent"]{--ka-tint:var(--ka-agent)}
 .knobs-activity-row[data-kind="proposal"]{--ka-tint:var(--ka-proposal)}
@@ -11316,7 +11360,7 @@ var open = springEasing(2 * Math.PI / 0.22, 1), activityCss = `
 /* The node: the kind's icon on the line (which stops clear of it), or a small dot inside a group. */
 .knobs-activity-node{flex:none;display:flex;align-items:center;justify-content:center;width:var(--ka-gutter);height:100%;color:var(--ka-tint)}
 .knobs-activity-node svg{display:block;width:14px;height:14px}
-.knobs-activity-glyph{display:flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:calc(var(--ku-font-size) - 1px);line-height:1}
+.knobs-activity-glyph{display:flex;align-items:center;justify-content:center;width:14px;height:14px;font-size:calc(var(--_k-font-size) - 1px);line-height:1}
 .knobs-activity-node::before{content:"";position:absolute;left:50%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border-radius:50%;background:color-mix(in srgb,var(--ka-tint) 15%,transparent);
   opacity:0;scale:.8;transition:opacity .16s ease-out,scale var(--ka-open-ms) var(--ka-open-ease)}
 .knobs-activity-row[aria-selected="true"] .knobs-activity-node::before{opacity:1;scale:1}
@@ -11328,47 +11372,47 @@ var open = springEasing(2 * Math.PI / 0.22, 1), activityCss = `
 .knobs-activity-row[data-depth="1"] .knobs-activity-node::before,.knobs-activity-row[data-depth="1"] .knobs-activity-node::after{width:13px;height:13px;margin:-6.5px 0 0 -6.5px}
 /* The words: who in the text colour, then the title, one line that fades where it's cut off. */
 .knobs-activity-main{flex:1;min-width:0;overflow:hidden;white-space:nowrap}
-.knobs-activity-actor{margin-right:6px;font-weight:var(--ku-label-weight);color:var(--ku-text)}
+.knobs-activity-actor{margin-right:6px;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
 .knobs-activity-actor:empty{display:none}
-.knobs-activity-title{color:var(--ku-label)}
-.knobs-activity-row[data-depth="1"] .knobs-activity-main{font-size:var(--ku-text-meta)}
-.knobs-activity-row[data-depth="1"] .knobs-activity-actor{font-weight:var(--ku-font-weight);color:var(--ku-label)}
-.knobs-activity-row[data-depth="1"] .knobs-activity-title{color:var(--ku-dim)}
-.knobs-activity-row[aria-selected="true"] .knobs-activity-title{color:var(--ku-text)}
+.knobs-activity-title{color:var(--_k-fg-2)}
+.knobs-activity-row[data-depth="1"] .knobs-activity-main{font-size:var(--_k-text-meta)}
+.knobs-activity-row[data-depth="1"] .knobs-activity-actor{font-weight:var(--_k-weight);color:var(--_k-fg-2)}
+.knobs-activity-row[data-depth="1"] .knobs-activity-title{color:var(--_k-fg-3)}
+.knobs-activity-row[aria-selected="true"] .knobs-activity-title{color:var(--_k-fg)}
 .knobs-activity-row[data-dimmed] :is(.knobs-activity-main,.knobs-activity-meta){opacity:.55}
 .knobs-activity-row[data-dimmed] .knobs-activity-node{opacity:.6}
 /* Trailing: thumbnails, a duration chip, the group's chevron and the time. */
-.knobs-activity-meta{flex:none;display:flex;align-items:center;gap:6px;margin-left:8px;color:var(--ku-dim);font-size:var(--ku-text-meta);font-variant-numeric:tabular-nums}
+.knobs-activity-meta{flex:none;display:flex;align-items:center;gap:6px;margin-left:8px;color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-activity-meta:empty{display:none}
 .knobs-activity-thumbs{display:flex;gap:3px}
-.knobs-activity-thumbs img{display:block;width:18px;height:18px;border-radius:4px;object-fit:cover;background:var(--ku-surface);box-shadow:inset 0 0 0 .5px var(--ku-line)}
+.knobs-activity-thumbs img{display:block;width:18px;height:18px;border-radius:4px;object-fit:cover;background:var(--_k-fill);box-shadow:inset 0 0 0 .5px var(--_k-border)}
 .knobs-activity-row[data-depth="1"] .knobs-activity-thumbs img{width:15px;height:15px}
 :where(.knobs-ui) .knobs-activity-chip{all:revert;box-sizing:border-box;display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px 0 5px;border:0;margin:0;border-radius:9px;
-  background:var(--ku-surface);color:var(--ku-label);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:inherit;outline:none;transition:background calc(var(--k-hover-out,100) * 1ms) ease-out}
+  background:var(--_k-fill);color:var(--_k-fg-2);font:inherit;font-variant-numeric:tabular-nums;letter-spacing:inherit;outline:none;transition:background calc(var(--_k-hover-out,100) * 1ms) ease-out}
 .knobs-activity-chip svg{width:8px;height:8px}
 button.knobs-activity-chip{cursor:pointer}
-button.knobs-activity-chip:hover{background:var(--ku-surface-hi);color:var(--ku-text);transition-duration:0s}
-.knobs-activity-caret{display:flex;width:12px;height:12px;color:var(--ku-dim);transition:rotate .18s var(--ku-ease)}
+button.knobs-activity-chip:hover{background:var(--_k-fill-selected);color:var(--_k-fg);transition-duration:0s}
+.knobs-activity-caret{display:flex;width:12px;height:12px;color:var(--_k-fg-3);transition:rotate .18s var(--_ku-ease)}
 .knobs-activity-caret svg{width:10px;height:10px;margin:1px}
 .knobs-activity-row[aria-expanded="true"] .knobs-activity-caret{rotate:90deg;transition:rotate var(--ka-open-ms) var(--ka-open-ease)}
 .knobs-activity-time{min-width:2ch;text-align:right;white-space:nowrap}
 .knobs-activity-time:empty{display:none}
-.knobs-activity-empty{padding:10px var(--ku-inset);color:var(--ku-dim)}
+.knobs-activity-empty{padding:10px var(--_k-inset);color:var(--_k-fg-3)}
 @media(prefers-reduced-motion:reduce){.knobs-activity :where(*,::before,::after){transition:none!important;animation:none!important}}
 `;
 
 // src/ui/bento-css.ts
 var bentoCss = `
-.knobs-ui.knobs-bento{--ku-bento-radius:var(--k-ui-bento-radius,max(0px,calc(var(--ku-radius) - 5px)));
-  position:relative;width:100%;height:100%;overflow:hidden auto;outline:none;background:var(--k-ui-bento-bg,var(--ku-page));
+.knobs-ui.knobs-bento{--_ku-bento-radius:var(--k-ui-bento-radius,max(0px,calc(var(--_k-radius) - 5px)));
+  position:relative;width:100%;height:100%;overflow:hidden auto;outline:none;background:var(--k-ui-bento-bg,var(--_k-bg-page));
   scrollbar-width:thin;scrollbar-gutter:stable;overscroll-behavior:contain;touch-action:pan-y;user-select:none;-webkit-user-select:none;
-  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);letter-spacing:normal;text-align:left}
-.knobs-bento[data-frame="flat"]{--ku-bento-radius:var(--k-ui-bento-radius,0px)}
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
+.knobs-bento[data-frame="flat"]{--_ku-bento-radius:var(--k-ui-bento-radius,0px)}
 .knobs-bento[data-pending] .knobs-bento-space{visibility:hidden}
 :where(.knobs-bento-space,.knobs-bento-space *){box-sizing:border-box}
 .knobs-bento-space{position:relative;width:100%}
-.knobs-bento-tile{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:var(--ku-bento-radius);
-  background:var(--ku-surface);contain:strict;cursor:zoom-in}
+.knobs-bento-tile{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;border-radius:var(--_ku-bento-radius);
+  background:var(--_k-fill);contain:strict;cursor:zoom-in}
 .knobs-bento-tile[data-focus]{z-index:2;cursor:zoom-out}
 .knobs-bento-tile[data-focus][data-live]{cursor:auto}
 .knobs-bento-img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .18s cubic-bezier(.2,.8,.2,1);-webkit-user-drag:none}
@@ -11376,227 +11420,283 @@ var bentoCss = `
 .knobs-bento-tile[data-instant] .knobs-bento-img{transition:none}
 .knobs-bento-body{position:absolute;inset:0;pointer-events:none}
 .knobs-bento-tile[data-focus] .knobs-bento-body{pointer-events:auto}
-.knobs-bento-label{position:absolute;left:9px;right:9px;bottom:7px;color:#fff;font-size:var(--ku-text-meta);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
-  text-shadow:0 0 6px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity calc(var(--ku-hover-out) * 1ms)}
+.knobs-bento-label{position:absolute;left:9px;right:9px;bottom:7px;color:#fff;font-size:var(--_k-text-meta);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  text-shadow:0 0 6px rgba(0,0,0,.55),0 0 1px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity calc(var(--_k-hover-out) * 1ms)}
 .knobs-bento:not([data-keyboard]) .knobs-bento-tile:hover .knobs-bento-label,
 .knobs-bento[data-keyboard]:focus .knobs-bento-tile[data-active] .knobs-bento-label,
-.knobs-bento-tile[data-focus] .knobs-bento-label{opacity:1;transition-duration:calc(var(--ku-hover-in) * 1ms)}
+.knobs-bento-tile[data-focus] .knobs-bento-label{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
 /* A pick: a small dot in the accent, ringed in the page so it reads on any picture. */
-.knobs-bento-tile::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--ku-accent);
-  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--ku-page) 70%,transparent);opacity:0;scale:.4;pointer-events:none;
-  transition:opacity .11s cubic-bezier(.4,0,1,1),scale var(--ku-ease-ms) var(--ku-ease)}
-.knobs-bento-tile[aria-selected="true"]::after{opacity:1;scale:1;transition:opacity .15s cubic-bezier(.2,.8,.2,1),scale var(--ku-ease-ms) var(--ku-ease)}
-.knobs-bento-wash{position:absolute;left:0;top:0;width:100px;height:100px;transform-origin:0 0;z-index:3;pointer-events:none;border-radius:var(--ku-bento-radius);
-  background:color-mix(in srgb,var(--ku-accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ku-accent) 45%,transparent);
+.knobs-bento-tile::after{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--_k-accent);
+  box-shadow:0 0 0 1.5px color-mix(in srgb,var(--_k-bg-page) 70%,transparent);opacity:0;scale:.4;pointer-events:none;
+  transition:opacity .11s cubic-bezier(.4,0,1,1),scale var(--_ku-ease-ms) var(--_ku-ease)}
+.knobs-bento-tile[aria-selected="true"]::after{opacity:1;scale:1;transition:opacity .15s cubic-bezier(.2,.8,.2,1),scale var(--_ku-ease-ms) var(--_ku-ease)}
+.knobs-bento-wash{position:absolute;left:0;top:0;width:100px;height:100px;transform-origin:0 0;z-index:3;pointer-events:none;border-radius:var(--_ku-bento-radius);
+  background:color-mix(in srgb,var(--_k-accent) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_k-accent) 45%,transparent);
   opacity:0;transition:opacity .15s}
 .knobs-bento[data-keyboard]:focus:not([data-zoomed]) .knobs-bento-wash[data-on]{opacity:1}
-.knobs-bento-scrim{position:absolute;left:0;top:0;width:100%;z-index:1;background:var(--k-ui-scrim,var(--k-ui-bento-bg,var(--ku-page)));opacity:0;pointer-events:none;cursor:zoom-out}
+.knobs-bento-scrim{position:absolute;left:0;top:0;width:100%;z-index:1;background:var(--k-ui-scrim,var(--k-ui-bento-bg,var(--_k-bg-page)));opacity:0;pointer-events:none;cursor:zoom-out}
 .knobs-bento[data-zoomed] .knobs-bento-scrim{pointer-events:auto}
-.knobs-bento-head{position:absolute;left:0;top:0;display:flex;align-items:flex-end;padding:0 0 6px 2px;color:var(--ku-label);font-weight:var(--ku-label-weight);
-  font-size:var(--ku-text-meta);white-space:nowrap;pointer-events:none}
+.knobs-bento-head{position:absolute;left:0;top:0;display:flex;align-items:flex-end;padding:0 0 6px 2px;color:var(--_k-fg-2);font-weight:var(--_k-weight-label);
+  font-size:var(--_k-text-meta);white-space:nowrap;pointer-events:none}
 `;
 
 // src/ui/compare-css.ts
 var compareCss = `
 :where(.knobs-compare,.knobs-compare *,.knobs-cmp-strip,.knobs-cmp-strip *){box-sizing:border-box}
-.knobs-ui.knobs-compare{--ku-cmp-diff:var(--k-compare-diff,#7dcf9c);--ku-cmp-line:var(--k-compare-line,#fff);
-  --ku-cmp-stage:var(--k-compare-stage,var(--ku-surface));
+.knobs-ui.knobs-compare{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));--_ku-cmp-line:var(--_k-compare-divider);
+  --_ku-cmp-stage:var(--_k-compare-stage);
   display:flex;flex-direction:column;gap:6px;width:100%;height:100%;min-height:160px;outline:none;user-select:none;-webkit-user-select:none;
-  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);letter-spacing:normal;text-align:left}
+  font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
 :where(.knobs-ui) :is(.knobs-cmp-mode,.knobs-cmp-toggle){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:2px;height:24px;padding:0 2px}
-.knobs-cmp-modes{display:flex;align-items:center;gap:2px}
-.knobs-ui .knobs-cmp-mode,.knobs-ui .knobs-cmp-toggle{height:22px;padding:0 7px;border-radius:max(0px,calc(var(--ku-radius) - 2px));color:var(--ku-dim);cursor:pointer;white-space:nowrap;
-  transition:color .15s,background .15s}
-.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible),.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--ku-text);background:var(--ku-wash)}
-.knobs-ui .knobs-cmp-mode[aria-checked="true"],.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--ku-text);font-weight:var(--ku-label-weight)}
+.knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:var(--_k-gap);height:var(--_k-control-h)}
+/* The modes: one fill, the selection pill on the one picked; a mode isn't brighter for being
+   picked: the pill's bright copy is. */
+.knobs-cmp-modes{position:relative;display:inline-flex;height:var(--_k-control-h);border-radius:var(--_k-radius);background:var(--_k-fill)}
+.knobs-cmp-modes[hidden]{display:none}
+/* Hover is a quiet fill under the arrow cursor (no hand, no brightening), there at once. */
+.knobs-ui .knobs-cmp-mode{display:inline-flex;align-items:center;height:100%;padding:0 8px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:default;white-space:nowrap;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-mode:not([aria-checked="true"]):is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+/* Toggles: icon buttons, the accent's wash when on. */
+.knobs-ui .knobs-cmp-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:default;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-accent-fg);background:var(--_k-accent-soft)}
+.knobs-cmp-toggle svg{display:block}
 .knobs-cmp-fill{flex:1}
 .knobs-cmp-toggle[hidden]{display:none}
 /* One surface: on a card (a walkthrough's step, a split's pane, anything .knobs-surface) or marked
    data-nested, the stage drops its fill and the sides sit on that card. */
-:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-compare,.knobs-ui.knobs-compare[data-nested]{--ku-cmp-stage:var(--k-compare-stage,transparent)}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-compare,.knobs-ui.knobs-compare[data-nested]{--_ku-cmp-stage:var(--k-compare-stage,transparent)}
 /* In a page's flow (a container with no height), it takes the height its sides need. */
 .knobs-ui.knobs-compare[data-auto]{height:auto}
 .knobs-compare[data-auto] .knobs-cmp-stage{flex:none;min-height:0}
-.knobs-cmp-stage{position:relative;flex:1;min-height:96px;overflow:hidden;border-radius:var(--ku-panel-radius);background:var(--ku-cmp-stage);touch-action:pan-y;outline:none}
+.knobs-cmp-stage{position:relative;flex:1;min-height:96px;overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_ku-cmp-stage);touch-action:pan-y;outline:none}
 .knobs-compare[data-frame="flat"] .knobs-cmp-stage{border-radius:0}
 .knobs-compare[data-mode="wipe"] .knobs-cmp-stage{cursor:ew-resize}
 /* Unzoomed, a finger still scrolls the page up and down; zoomed, the stage takes every gesture. */
-.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:grab;touch-action:none}
-.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:grabbing!important}
-.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:ew-resize!important}
+/* Zoomed, it pans: a move cursor, never a hand. */
+.knobs-compare[data-zoomed] .knobs-cmp-stage{cursor:move;touch-action:none}
+.knobs-compare[data-panning],.knobs-compare[data-panning] *{cursor:move!important}
+/* Wiping, the grip stands in for the cursor. */
+.knobs-compare[data-dragging],.knobs-compare[data-dragging] *{cursor:none!important}
 .knobs-cmp-sizer{position:absolute;left:0;right:0;top:0;height:0;visibility:hidden;pointer-events:none}
 .knobs-cmp-canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
 .knobs-cmp-media{position:absolute;left:0;top:0;display:block;max-width:none;margin:0;padding:0;border:0;object-fit:fill;transform-origin:0 0;pointer-events:none;will-change:transform}
 .knobs-compare[data-renderer="gpu"] .knobs-cmp-media{opacity:0}
-/* Glass: what's behind shows through, blurred, on the knobs tokens. */
-.knobs-cmp-label,.knobs-cmp-zoom{background:color-mix(in srgb,var(--ku-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(--ku-line),inset 0 1px 0 var(--ku-rim),0 2px 10px rgba(0,0,0,.18)}
-.knobs-cmp-label{position:absolute;left:0;top:0;padding:1px 7px;border-radius:999px;font-size:var(--ku-text-meta);line-height:16px;color:var(--ku-label);white-space:nowrap;pointer-events:none;will-change:transform;transition:color .15s}
-.knobs-cmp-label[data-lit]{color:var(--ku-text)}
-.knobs-cmp-label[data-dim]{color:var(--ku-dim)}
-/* The wipe: a hairline down the line with a grip at its middle; a wider strip takes the hand and
-   the keys (a slider). It fades with the mode. */
-.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform;transition:opacity .18s cubic-bezier(.4,0,1,1)}
-.knobs-cmp-handle[data-on]{opacity:1;pointer-events:auto;transition:opacity .22s cubic-bezier(.2,.8,.2,1)}
-.knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:var(--ku-cmp-line);box-shadow:0 0 0 .5px rgba(0,0,0,.28),0 0 6px rgba(0,0,0,.25)}
-.knobs-cmp-handle::after{content:"";position:absolute;top:50%;left:9px;width:6px;height:28px;margin-top:-14px;border-radius:3px;background:var(--ku-cmp-line);
-  box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.2);transition:scale .18s var(--ku-ease),box-shadow .15s}
-.knobs-compare[data-dragging] .knobs-cmp-handle::after{scale:1.12}
-.knobs-cmp-handle:focus-visible::after,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus::after{box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--ku-accent) 40%,transparent)}
+/* The media comes in with its first frames: a fade and a 4px blur on the default spring. */
+.knobs-cmp-canvas,.knobs-compare[data-renderer="dom"] .knobs-cmp-media{transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-compare:not([data-ready]) :is(.knobs-cmp-canvas,.knobs-cmp-media){opacity:0;filter:blur(4px)}
+/* Over the pictures: a quiet scrim, dark in either appearance, blurred, with no ring. */
+.knobs-cmp-label,.knobs-cmp-zoom,.knobs-cmp-grip{background:var(--_ku-media-scrim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
+/* ✗ Before · ✓ After: Before quieter, After in full. 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-weight:var(--_k-weight-label);
+  white-space:nowrap;pointer-events:none;will-change:transform}
+.knobs-cmp-label[data-side="before"]{color:var(--_ku-on-media-2)}
+.knobs-cmp-label[data-side="after"]{color:var(--_ku-on-media)}
+/* Fusing, the mark folds away and the label is its name. */
+.knobs-cmp-mark{flex:none;display:flex;justify-content:flex-end;overflow:hidden}
+.knobs-cmp-mark svg{display:block;flex:none;width:12px;height:12px}
+/* The fuse's seam: a blurred strip over where the sides meet, soft at both sides. */
+.knobs-cmp-seam{position:absolute;left:0;top:0;width:8px;height:0;opacity:0;pointer-events:none;will-change:transform,opacity;
+  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent);mask-image:linear-gradient(to right,transparent,#000 35%,#000 65%,transparent)}
+/* The wipe: a hairline down the line with a raised grip in its middle (at the pointer's height
+   while dragged); a wider strip takes the hand and the keys (a slider). It fades in with the
+   fuse; wiping, line and grip brighten. */
+.knobs-cmp-handle{cursor:ew-resize;position:absolute;left:-12px;top:0;width:24px;height:0;opacity:0;pointer-events:none;outline:none;will-change:transform,opacity}
+.knobs-cmp-handle[data-on]{pointer-events:auto}
+.knobs-cmp-handle::before{content:"";position:absolute;top:0;bottom:0;left:11.5px;width:1px;background:color-mix(in srgb,var(--_ku-cmp-line) 72%,transparent);box-shadow:0 0 6px var(--_ku-media-scrim)}
+.knobs-compare[data-dragging] .knobs-cmp-handle::before{background:var(--_ku-cmp-line)}
+.knobs-cmp-grip{position:absolute;top:0;left:4px;width:16px;height:28px;border-radius:min(8px,calc(var(--_k-radius) * 999));will-change:transform}
+.knobs-cmp-grip::before,.knobs-cmp-grip::after{content:"";position:absolute;top:10px;width:1px;height:8px;background:var(--_ku-on-media-2);transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-cmp-grip::before{left:6px}
+.knobs-cmp-grip::after{left:9px}
+.knobs-compare[data-dragging] .knobs-cmp-grip::before,.knobs-compare[data-dragging] .knobs-cmp-grip::after{background:var(--_ku-on-media)}
+.knobs-cmp-handle:focus-visible .knobs-cmp-grip,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus .knobs-cmp-grip{box-shadow:0 0 0 2px var(--_k-accent)}
 /* The split's hairline, down the middle side by side. */
-.knobs-cmp-split{position:absolute;left:0;top:0;width:1px;height:0;margin-left:-.5px;background:color-mix(in srgb,var(--ku-bg) 72%,transparent);pointer-events:none;will-change:transform,opacity}
+.knobs-cmp-split{position:absolute;left:0;top:0;width:1px;height:0;margin-left:-.5px;background:color-mix(in srgb,var(--_k-bg) 72%,transparent);pointer-events:none;will-change:transform,opacity}
 /* Zoomed: how far, and a way back, in the stage's corner; it fades in and out, nothing shifts. */
 .knobs-cmp-zoom{position:absolute;right:8px;bottom:8px;display:flex;align-items:center;gap:4px;height:26px;padding:0 3px 0 10px;border-radius:999px;
-  color:var(--ku-text);font-size:var(--ku-text-meta);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;
+  color:var(--_ku-on-media);font-variant-numeric:tabular-nums;font-feature-settings:var(--_kr-data,"tnum");white-space:nowrap;
   opacity:0;scale:.96;pointer-events:none;transition:opacity .16s cubic-bezier(.4,0,1,1),scale .16s cubic-bezier(.4,0,1,1)}
 .knobs-cmp-zoom[data-on]{opacity:1;scale:1;pointer-events:auto;transition:opacity .2s cubic-bezier(.2,.8,.2,1),scale .2s cubic-bezier(.2,.8,.2,1)}
 :where(.knobs-ui) .knobs-cmp-zoom-reset{all:revert;box-sizing:border-box;font:inherit;letter-spacing:inherit;margin:0;border:0;outline:none;box-shadow:none;
-  height:20px;padding:0 8px;border-radius:999px;background:transparent;color:var(--ku-label);cursor:pointer;transition:color .15s,background .15s}
-:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--ku-text);background:color-mix(in srgb,var(--ku-text) 12%,transparent)}
-.knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--ku-dim);font-size:var(--ku-text-meta);pointer-events:none}
+  display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:0;border-radius:999px;background:transparent;color:var(--_ku-on-media-2);cursor:default;transition:background calc(var(--_k-hover-out) * 1ms),color calc(var(--_k-hover-out) * 1ms)}
+:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_ku-on-media) 16%,transparent);color:var(--_ku-on-media);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
 .knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
-.knobs-cmp-timeline-host{flex:none;height:56px;min-height:0}
+.knobs-cmp-timeline-host{flex:none;min-height:0}
 /* The frame strip: Before over After per column, a difference bar under them, a dot where it peaks. */
-.knobs-ui.knobs-cmp-strip{--ku-cmp-diff:var(--k-compare-diff,#7dcf9c);position:relative;width:100%;height:100%;min-height:40px;overflow:hidden;cursor:col-resize;touch-action:none;
-  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text)}
+.knobs-ui.knobs-cmp-strip{--_ku-cmp-diff:var(--k-compare-diff,var(--_k-ok));position:relative;width:100%;height:100%;min-height:40px;overflow:hidden;cursor:col-resize;touch-action:none;
+  font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);color:var(--_k-fg)}
 .knobs-cmp-strip>canvas{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none}
 @media(prefers-reduced-motion:reduce){:is(.knobs-compare,.knobs-cmp-strip) :where(*,::before,::after){transition-duration:.12s!important}}
 `;
 
+// src/ui/player-css.ts
+var playerCss = `
+:where(.knobs-player,.knobs-player *){box-sizing:border-box}
+.knobs-ui.knobs-player{--_kp-stage:var(--_k-compare-stage);display:flex;flex-direction:column;gap:6px;width:100%;outline:none;
+  font:var(--_k-weight) var(--_k-type-small)/var(--_k-leading-small) var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
+:where(.knobs-surface,.knobs-pane:not([data-nested])>.knobs-pane-clip) .knobs-ui.knobs-player,.knobs-ui.knobs-player[data-nested]{--_kp-stage:var(--k-compare-stage,transparent)}
+.knobs-player-frame{position:relative;width:100%;aspect-ratio:var(--kp-aspect,16/9);overflow:hidden;border-radius:var(--_k-radius-panel);background:var(--_kp-stage)}
+.knobs-player[data-frame="flat"] .knobs-player-frame{border-radius:0}
+.knobs-player-media{position:absolute;inset:0;display:block;width:100%;height:100%;margin:0;padding:0;border:0;object-fit:contain;
+  opacity:0;filter:blur(4px);transition:opacity calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default),filter calc(var(--_k-motion-default-ms) * 1ms) var(--_k-motion-default)}
+.knobs-player[data-ready] .knobs-player-media{opacity:1;filter:none}
+.knobs-player-line{flex:none;min-height:0}
+/* The timeline's own stylesheet is look.ts's; what the player's row and every timeline share
+   about the hand is set here, after it. No hand cursor anywhere (the arrow, or a resize where it
+   resizes); hover is a quiet fill (fill-hover), in at once (hover-in, 0 ms), out easing. */
+.knobs-ui .knobs-tl-play,.knobs-ui.knobs-timeline :is(.knobs-tl-pin,.knobs-tl-rlabel),
+.knobs-ui.knobs-timeline[data-dragging] .knobs-tl-marker :is(.knobs-tl-pin,.knobs-tl-mlabel){cursor:default}
+.knobs-ui .knobs-tl-play:hover,.knobs-tl-edge:hover::after,.knobs-tl-rlabel:hover,.knobs-tl-track:hover .knobs-tl-hover,
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs{transition-duration:calc(var(--_k-hover-in) * 1ms)}
+/* The line's row: a minimal play/pause (the filled pair, a 28px target, no fill at rest), then
+   the line, centred on it. */
+.knobs-ui.knobs-timeline[data-variant="line"]{gap:4px;align-items:center}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:flex}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-play{width:28px;height:28px;min-width:28px;min-height:28px;border-radius:var(--_k-radius);background:transparent;color:var(--_k-fg-2);
+  transition:background calc(var(--_k-hover-out) * 1ms),transform .15s var(--_ku-ease)}
+.knobs-ui.knobs-timeline[data-variant="line"][data-playing] .knobs-tl-play{background:transparent;color:var(--_k-fg-2)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-play:hover{background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{cursor:default;transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track:hover{background:var(--_k-fill-hover);transition-duration:calc(var(--_k-hover-in) * 1ms)}
+`;
+
 // src/ui/overlay-css.ts
 var overlayCss = `
 .knobs-layers{position:fixed;inset:0;z-index:2147480005;pointer-events:none}
 .knobs-layers>.knobs-layer,.knobs-ui.knobs-toast{position:fixed;left:0;top:0;box-sizing:border-box;pointer-events:auto;outline:none;
-  font:var(--ku-font-weight) var(--ku-font-size)/1.4 var(--ku-font);color:var(--ku-text);letter-spacing:normal;text-align:left;text-transform:none;
+  font:var(--_k-weight) var(--_k-font-size)/1.4 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left;text-transform:none;
   -webkit-font-smoothing:antialiased;will-change:transform,opacity,filter}
 /* The overlays' own elements stop a host's element rules; what you put in a popover is yours. */
 :where(.knobs-layers,.knobs-toast) :is(.knobs-kbd,.knobs-mitem,.knobs-menu-sep,.knobs-palette-input,.knobs-palette-label>mark,.knobs-confirm-title,.knobs-confirm-body,.knobs-confirm-btn,.knobs-toast-action){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;
   background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
 .knobs-layers .knobs-layer *{box-sizing:border-box}
 /* A floating surface: frosted, a hairline rim, a soft shadow. */
-.knobs-layers>:is(.knobs-popover-layer,.knobs-palette,.knobs-confirm,.knobs-menu-layer){background:color-mix(in srgb,var(--ku-bg) 88%,transparent);
-  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);border-radius:var(--ku-panel-radius);
-  box-shadow:0 0 0 .5px var(--ku-line-hi),inset 0 1px 0 var(--ku-rim),0 12px 40px rgba(0,0,0,.36),0 2px 8px rgba(0,0,0,.18)}
+.knobs-layers>:is(.knobs-popover-layer,.knobs-palette,.knobs-confirm,.knobs-menu-layer){background:color-mix(in srgb,var(--_k-bg) 88%,transparent);
+  -webkit-backdrop-filter:blur(28px) saturate(1.7);backdrop-filter:blur(28px) saturate(1.7);border-radius:var(--_k-radius-panel);
+  box-shadow:0 0 0 .5px var(--_k-border-strong),inset 0 1px 0 var(--_k-rim),0 12px 40px rgba(0,0,0,calc(.36 * var(--_k-shadow-k,1))),0 2px 8px rgba(0,0,0,calc(.18 * var(--_k-shadow-k,1)))}
 .knobs-layers>.knobs-popover-layer{min-width:120px;max-width:min(420px,calc(100vw - 16px));padding:6px}
-.knobs-popover-layer .knobs-popover-text{padding:4px 6px;color:var(--ku-label)}
+.knobs-popover-layer .knobs-popover-text{padding:4px 6px;color:var(--_k-fg-2)}
 
 /* Menus: rows of the panel's control height, a soft wash on the active one (never an outline),
    concentric corners inside the surface. */
 .knobs-layers>.knobs-menu-layer{display:flex;flex-direction:column;min-width:184px;max-width:min(340px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto;padding:5px;
   scrollbar-width:thin;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
-.knobs-menu-layer .knobs-mitem{position:relative;display:flex;align-items:center;gap:8px;flex:none;height:max(22px,calc(var(--ku-row) - 6px));padding:0 8px;
-  border-radius:max(0px,calc(var(--ku-panel-radius) - 5px));color:var(--ku-text);cursor:default;white-space:nowrap}
-.knobs-menu-layer .knobs-mitem[data-active],.knobs-menu-layer .knobs-mitem[data-open]{background:var(--ku-wash-hi)}
-.knobs-menu-layer .knobs-mitem[data-destructive]{color:var(--ku-critical)}
-.knobs-menu-layer .knobs-mitem[data-destructive][data-active]{background:color-mix(in srgb,var(--ku-critical) 16%,transparent)}
+.knobs-menu-layer .knobs-mitem{position:relative;display:flex;align-items:center;gap:8px;flex:none;height:max(22px,calc(var(--_k-row) - 6px));padding:0 8px;
+  border-radius:max(0px,calc(var(--_k-radius-panel) - 5px));color:var(--_k-fg);cursor:default;white-space:nowrap}
+.knobs-menu-layer .knobs-mitem[data-active],.knobs-menu-layer .knobs-mitem[data-open]{background:var(--_ku-wash-hi)}
+.knobs-menu-layer .knobs-mitem[data-destructive]{color:var(--_k-danger)}
+.knobs-menu-layer .knobs-mitem[data-destructive][data-active]{background:color-mix(in srgb,var(--_k-danger) 16%,transparent)}
 .knobs-menu-layer .knobs-mitem[aria-disabled="true"]{opacity:.38}
-.knobs-menu-layer .knobs-menu-lead{flex:none;display:flex;align-items:center;justify-content:center;width:14px;margin-left:-2px;color:var(--ku-label);font-size:calc(var(--ku-font-size) - 1px)}
+.knobs-menu-layer .knobs-menu-lead{flex:none;display:flex;align-items:center;justify-content:center;width:14px;margin-left:-2px;color:var(--_k-fg-2);font-size:calc(var(--_k-font-size) - 1px)}
 .knobs-menu-layer .knobs-mitem[data-destructive] .knobs-menu-lead,.knobs-menu-layer .knobs-mitem[aria-checked="true"] .knobs-menu-lead{color:inherit}
 .knobs-menu-layer .knobs-menu-lead svg{width:13px;height:13px}
 .knobs-menu-layer .knobs-menu-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
-.knobs-menu-layer .knobs-menu-hint{flex:none;color:var(--ku-dim)}
+.knobs-menu-layer .knobs-menu-hint{flex:none;color:var(--_k-fg-3)}
 .knobs-menu-layer .knobs-menu-keys{display:inline-flex;gap:2px;flex:none;margin-left:12px}
-.knobs-menu-layer .knobs-mitem[data-active] .knobs-kbd{background:color-mix(in srgb,var(--ku-text) 14%,transparent);color:var(--ku-text)}
-.knobs-menu-layer .knobs-menu-caret{flex:none;display:flex;margin-left:8px;margin-right:-3px;color:var(--ku-dim)}
+.knobs-menu-layer .knobs-mitem[data-active] .knobs-kbd{background:color-mix(in srgb,var(--_k-fg) 14%,transparent);color:var(--_k-fg)}
+.knobs-menu-layer .knobs-menu-caret{flex:none;display:flex;margin-left:8px;margin-right:-3px;color:var(--_k-fg-3)}
 .knobs-menu-layer .knobs-menu-caret svg{width:10px;height:10px}
-.knobs-menu-layer .knobs-menu-sep{flex:none;height:1px;margin:4px 8px;background:var(--ku-line)}
+.knobs-menu-layer .knobs-menu-sep{flex:none;height:1px;margin:4px 8px;background:var(--_k-border)}
 
 .knobs-layers>.knobs-tooltip{display:inline-flex;align-items:center;gap:7px;max-width:300px;padding:4px 8px;pointer-events:none;white-space:nowrap;
-  font-size:calc(var(--ku-font-size) - .5px);background:var(--ku-bg);color:var(--ku-text);border-radius:min(var(--ku-radius),6px);
-  box-shadow:0 0 0 .5px var(--ku-line-hi),0 4px 14px rgba(0,0,0,.3)}
+  font-size:calc(var(--_k-font-size) - .5px);background:var(--_k-bg);color:var(--_k-fg);border-radius:min(var(--_k-radius),6px);
+  box-shadow:0 0 0 .5px var(--_k-border-strong),0 4px 14px rgba(0,0,0,calc(.3 * var(--_k-shadow-k,1)))}
 .knobs-tooltip .knobs-tooltip-text{overflow:hidden;text-overflow:ellipsis}
 .knobs-layer :is(.knobs-tooltip-keys,.knobs-palette-keys){display:inline-flex;gap:2px;flex:none}
 .knobs-layer .knobs-tooltip-keys[hidden]{display:none}
 .knobs-layer .knobs-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;
-  border-radius:min(var(--ku-radius),4px);background:var(--ku-surface-hi);color:var(--ku-label);font:500 calc(var(--ku-font-size) - 1.5px)/1 var(--ku-font)}
+  border-radius:min(var(--_k-radius),4px);background:var(--_k-fill-selected);color:var(--_k-fg-2);font:500 calc(var(--_k-font-size) - 1.5px)/1 var(--_k-font)}
 
 .knobs-layers>.knobs-palette{left:50%;top:max(48px,15vh);translate:-50% 0;transform-origin:50% 0;display:flex;flex-direction:column;
   width:min(580px,calc(100vw - 32px));max-height:min(460px,72vh);overflow:hidden}
-.knobs-palette .knobs-palette-field{display:flex;align-items:center;gap:10px;flex:none;height:46px;padding:0 16px;border-bottom:1px solid var(--ku-line);color:var(--ku-dim)}
+.knobs-palette .knobs-palette-field{display:flex;align-items:center;gap:10px;flex:none;height:46px;padding:0 16px;border-bottom:1px solid var(--_k-border);color:var(--_k-fg-3)}
 .knobs-palette .knobs-palette-field svg{width:15px;height:15px;flex:none}
-.knobs-palette .knobs-palette-input{flex:1;min-width:0;height:100%;font-size:calc(var(--ku-font-size) + 3px);color:var(--ku-text);caret-color:var(--ku-accent)}
-.knobs-palette .knobs-palette-input::placeholder{color:var(--ku-dim)}
+.knobs-palette .knobs-palette-input{flex:1;min-width:0;height:100%;font-size:calc(var(--_k-font-size) + 3px);color:var(--_k-fg);caret-color:var(--_k-accent)}
+.knobs-palette .knobs-palette-input::placeholder{color:var(--_k-fg-3)}
 .knobs-palette .knobs-palette-list{position:relative;flex:1;min-height:0;overflow:auto;padding:6px;scrollbar-width:thin;overscroll-behavior:contain}
-.knobs-palette .knobs-palette-hl{position:absolute;left:6px;right:6px;top:0;border-radius:max(0px,calc(var(--ku-panel-radius) - 6px));background:var(--ku-wash-hi);opacity:0;pointer-events:none;
-  transition:transform var(--ku-ease-ms) var(--ku-ease),height var(--ku-ease-ms) var(--ku-ease),opacity .12s}
-.knobs-palette .knobs-palette-section{padding:10px 10px 4px;color:var(--ku-dim);font-size:calc(var(--ku-font-size) - 1px);font-weight:var(--ku-label-weight);user-select:none}
+.knobs-palette .knobs-palette-hl{position:absolute;left:6px;right:6px;top:0;border-radius:max(0px,calc(var(--_k-radius-panel) - 6px));background:var(--_ku-wash-hi);opacity:0;pointer-events:none;
+  transition:transform var(--_ku-ease-ms) var(--_ku-ease),height var(--_ku-ease-ms) var(--_ku-ease),opacity .12s}
+.knobs-palette .knobs-palette-section{padding:10px 10px 4px;color:var(--_k-fg-3);font-size:calc(var(--_k-font-size) - 1px);font-weight:var(--_k-weight-label);user-select:none}
 .knobs-palette .knobs-palette-section:first-of-type{padding-top:4px}
-.knobs-palette .knobs-palette-item{position:relative;display:flex;align-items:center;gap:8px;height:max(32px,var(--ku-row));padding:0 10px;
-  color:var(--ku-label);cursor:default;user-select:none}
-.knobs-palette .knobs-palette-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ku-text)}
+.knobs-palette .knobs-palette-item{position:relative;display:flex;align-items:center;gap:8px;height:max(32px,var(--_k-row));padding:0 10px;
+  color:var(--_k-fg-2);cursor:default;user-select:none}
+.knobs-palette .knobs-palette-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--_k-fg)}
 /* Searching, the label dims and its matched letters light up. */
-.knobs-palette[data-query] .knobs-palette-label{color:var(--ku-label)}
-.knobs-palette .knobs-palette-label mark{color:var(--ku-accent);font-weight:var(--ku-title-weight)}
-.knobs-palette[data-query] .knobs-palette-item[data-active] .knobs-palette-label{color:var(--ku-text)}
-.knobs-palette .knobs-palette-hint{flex:none;color:var(--ku-dim)}
+.knobs-palette[data-query] .knobs-palette-label{color:var(--_k-fg-2)}
+.knobs-palette .knobs-palette-label mark{color:var(--_k-accent);font-weight:var(--_k-weight-title)}
+.knobs-palette[data-query] .knobs-palette-item[data-active] .knobs-palette-label{color:var(--_k-fg)}
+.knobs-palette .knobs-palette-hint{flex:none;color:var(--_k-fg-3)}
 .knobs-palette .knobs-palette-fill{flex:1}
-.knobs-palette .knobs-palette-tag{flex:none;color:var(--ku-dim);font-size:calc(var(--ku-font-size) - 1px);white-space:nowrap}
+.knobs-palette .knobs-palette-tag{flex:none;color:var(--_k-fg-3);font-size:calc(var(--_k-font-size) - 1px);white-space:nowrap}
 .knobs-palette .knobs-palette-item[aria-disabled="true"]{opacity:.4}
-.knobs-palette .knobs-palette-empty{padding:18px 10px;color:var(--ku-dim);text-align:center}
+.knobs-palette .knobs-palette-empty{padding:18px 10px;color:var(--_k-fg-3);text-align:center}
 
-.knobs-layers>.knobs-scrim{inset:0;width:100%;height:100%;background:rgba(0,0,0,.3)}
+.knobs-layers>.knobs-scrim{inset:0;width:100%;height:100%;background:var(--_k-scrim)}
 .knobs-layers>.knobs-confirm{left:50%;top:42%;translate:-50% -50%;width:min(340px,calc(100vw - 32px));padding:18px 18px 14px}
-.knobs-confirm .knobs-confirm-title{margin:0 0 6px;font-size:calc(var(--ku-font-size) + 1.5px);font-weight:var(--ku-title-weight);color:var(--ku-text);line-height:1.3}
-.knobs-confirm .knobs-confirm-body{margin:0;color:var(--ku-label);line-height:1.45}
+.knobs-confirm .knobs-confirm-title{margin:0 0 6px;font-size:calc(var(--_k-font-size) + 1.5px);font-weight:var(--_k-weight-title);color:var(--_k-fg);line-height:1.3}
+.knobs-confirm .knobs-confirm-body{margin:0;color:var(--_k-fg-2);line-height:1.45}
 .knobs-confirm .knobs-confirm-buttons{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
-.knobs-confirm .knobs-confirm-btn{height:28px;padding:0 14px;border-radius:min(var(--ku-radius),7px);background:var(--ku-surface-hi);color:var(--ku-text);
-  font-weight:var(--ku-label-weight);cursor:pointer;transition:background .15s,filter .15s}
-.knobs-confirm .knobs-confirm-cancel:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ku-text) 18%,transparent)}
-.knobs-confirm .knobs-confirm-ok{background:var(--ku-accent);color:var(--ku-bg)}
-.knobs-confirm .knobs-confirm-ok[data-destructive]{background:var(--ku-critical);color:#fff}
+.knobs-confirm .knobs-confirm-btn{height:28px;padding:0 14px;border-radius:min(var(--_k-radius),7px);background:var(--_k-fill-selected);color:var(--_k-fg);
+  font-weight:var(--_k-weight-label);cursor:pointer;transition:background .15s,filter .15s}
+.knobs-confirm .knobs-confirm-cancel:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_k-fg) 18%,transparent)}
+.knobs-confirm .knobs-confirm-ok{background:var(--_k-accent);color:var(--_k-bg)}
+.knobs-confirm .knobs-confirm-ok[data-destructive]{background:var(--_k-danger);color:#fff}
 .knobs-confirm .knobs-confirm-ok:is(:hover,:focus-visible){filter:brightness(1.14)}
 
 .knobs-ui.knobs-toast{left:50%;top:auto;bottom:24px;z-index:2147480005;translate:-50% 0;display:inline-flex;align-items:center;gap:10px;
-  max-width:min(480px,80vw);padding:8px 16px;background:var(--ku-bg);color:var(--ku-text);border-radius:calc(var(--ku-radius) * 999);
-  box-shadow:0 0 0 .5px var(--ku-line-hi),0 8px 28px rgba(0,0,0,.32)}
+  max-width:min(480px,80vw);padding:8px 16px;background:var(--_k-bg);color:var(--_k-fg);border-radius:calc(var(--_k-radius) * 999);
+  box-shadow:0 0 0 .5px var(--_k-border-strong),0 8px 28px rgba(0,0,0,calc(.32 * var(--_k-shadow-k,1)))}
 .knobs-toast .knobs-toast-text{overflow-wrap:anywhere}
-.knobs-toast[data-tone="warn"]::before,.knobs-toast[data-tone="error"]::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--ku-warn)}
-.knobs-toast[data-tone="error"]::before{background:var(--ku-critical)}
-.knobs-toast .knobs-toast-action{flex:none;color:var(--ku-accent);font-weight:var(--ku-title-weight);cursor:pointer}
+.knobs-toast[data-tone="warn"]::before,.knobs-toast[data-tone="error"]::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--_k-warn)}
+.knobs-toast[data-tone="error"]::before{background:var(--_k-danger)}
+.knobs-toast .knobs-toast-action{flex:none;color:var(--_k-accent);font-weight:var(--_k-weight-title);cursor:pointer}
 .knobs-toast .knobs-toast-action[hidden]{display:none}
 `;
 
 // src/ui/picker-css.ts
-var snappy = springEasing(2 * Math.PI / 0.25, 1), pickerCss = `
+var snappy = springLinear(SPRINGS2.snappy), pickerCss = `
 :where(.knobs-picker,.knobs-picker-option,.knobs-picker-head,.knobs-picker-head *,.knobs-picker-card,.knobs-picker-body){box-sizing:border-box}
 .knobs-ui.knobs-picker{position:relative;display:flex;flex-direction:column;gap:2px;padding:0;outline:none;
-  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;
-  --kp-card:var(--k-picker-card,var(--ku-surface));--kp-radius:var(--k-picker-radius,var(--ku-panel-radius));--kp-snappy:${snappy.easing};--kp-snappy-ms:${snappy.ms}ms}
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased;
+  --kp-card:var(--_k-picker-card);--kp-radius:var(--k-picker-radius,var(--_k-radius-panel));--kp-snappy:${snappy.easing};--kp-snappy-ms:${snappy.ms}ms}
 .knobs-picker [hidden]{display:none!important}
 /* The selection: one card behind the selected option and its parameters, gliding between them. */
-.knobs-picker-card{position:absolute;left:0;right:0;top:0;height:0;border-radius:var(--kp-radius);background:var(--kp-card);box-shadow:inset 0 0 0 1px var(--ku-line);pointer-events:none}
+.knobs-picker-card{position:absolute;left:0;right:0;top:0;height:0;border-radius:var(--kp-radius);background:var(--kp-card);box-shadow:inset 0 0 0 1px var(--_k-border);pointer-events:none}
 .knobs-picker[data-frame="flat"] .knobs-picker-card{box-shadow:none}
 .knobs-picker-option{position:relative;flex:none}
-:where(.knobs-ui) .knobs-picker-head{all:revert;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;width:100%;height:var(--ku-row);padding:0 calc(var(--ku-inset) - 2px) 0 calc(var(--ku-inset) - 4px);
-  border:0;margin:0;background:transparent;color:var(--ku-label);font:inherit;letter-spacing:inherit;text-align:left;cursor:default;outline:none;user-select:none;-webkit-user-select:none}
+:where(.knobs-ui) .knobs-picker-head{all:revert;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:8px;width:100%;height:var(--_k-row);padding:0 calc(var(--_k-inset) - 2px) 0 calc(var(--_k-inset) - 4px);
+  border:0;margin:0;background:transparent;color:var(--_k-fg-2);font:inherit;letter-spacing:inherit;text-align:left;cursor:default;outline:none;user-select:none;-webkit-user-select:none}
 /* Hover: in at once, out over 100 ms. Keyboard focus: the same wash, a little firmer. */
-.knobs-picker-head::before{content:"";position:absolute;inset:0;border-radius:var(--kp-radius);background:var(--ku-wash);opacity:0;transition:opacity calc(var(--k-hover-out,100) * 1ms) ease-out;pointer-events:none}
-.knobs-picker-option:not([data-selected]) .knobs-picker-head:hover::before{opacity:1;transition-duration:calc(var(--k-hover-in,0) * 1ms)}
-.knobs-picker-head:focus-visible::before{opacity:1;background:var(--ku-wash-hi);transition-duration:0s}
+.knobs-picker-head::before{content:"";position:absolute;inset:0;border-radius:var(--kp-radius);background:var(--_ku-wash);opacity:0;transition:opacity calc(var(--_k-hover-out,100) * 1ms) ease-out;pointer-events:none}
+.knobs-picker-option:not([data-selected]) .knobs-picker-head:hover::before{opacity:1;transition-duration:calc(var(--_k-hover-in,0) * 1ms)}
+.knobs-picker-head:focus-visible::before{opacity:1;background:var(--_ku-wash-hi);transition-duration:0s}
 .knobs-picker-head>*{position:relative}
-.knobs-picker-option[data-selected] .knobs-picker-head{color:var(--ku-text)}
+.knobs-picker-option[data-selected] .knobs-picker-head{color:var(--_k-fg)}
 /* Every row is numbered (only 1–9 are keys): tabular digits in a column two digits wide, so the
    names line up past the ninth. */
-.knobs-picker-key{flex:none;display:inline-flex;align-items:center;justify-content:center;width:max(17px,calc(2ch + 6px));height:17px;padding:0;border-radius:5px;background:var(--ku-surface);
-  color:var(--ku-dim);font:var(--ku-label-weight) calc(var(--ku-font-size) - 1.5px)/1 var(--ku-font);font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
+.knobs-picker-key{flex:none;display:inline-flex;align-items:center;justify-content:center;width:max(17px,calc(2ch + 6px));height:17px;padding:0;border-radius:5px;background:var(--_k-fill);
+  color:var(--_k-fg-3);font:var(--_k-weight-label) calc(var(--_k-font-size) - 1.5px)/1 var(--_k-font);font-variant-numeric:tabular-nums;transition:background .15s,color .15s}
 .knobs-picker-key:empty{visibility:hidden}
 /* An option's picture: cover-fit, the rows' corner language and a hairline drawn over it. Its
    space is kept while it loads (nothing drawn), it fades in once loaded, and one that fails
    gives its space back on the same ease. */
-.knobs-picker-thumb{flex:none;display:block;width:var(--k-picker-thumb,min(24px,calc(var(--ku-row) - 10px)));aspect-ratio:1;margin:0;border-radius:max(3px,calc(var(--ku-radius) - 2px));
-  object-fit:cover;background:none;outline:1px solid var(--ku-line);outline-offset:-1px;opacity:0;
+.knobs-picker-thumb{flex:none;display:block;width:var(--k-picker-thumb,min(24px,calc(var(--_k-row) - 10px)));aspect-ratio:1;margin:0;border-radius:max(3px,calc(var(--_k-radius) - 2px));
+  object-fit:cover;background:none;outline:1px solid var(--_k-border);outline-offset:-1px;opacity:0;
   transition:opacity .2s ease-out,width .18s ease-out,margin .18s ease-out}
 .knobs-picker-thumb[data-state="loaded"]{opacity:1}
 .knobs-picker-thumb[data-instant]{transition:none}
 .knobs-picker-thumb[data-state="failed"]{width:0;margin-right:-8px;outline-color:transparent}
-.knobs-picker-option[data-selected] .knobs-picker-key{background:var(--ku-surface-hi);color:var(--ku-text)}
-.knobs-picker-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-weight:var(--ku-label-weight)}
-.knobs-picker-suggested{flex:none;color:var(--ku-dim);font-size:var(--ku-text-meta)}
-.knobs-picker-check{flex:none;display:flex;width:14px;height:14px;color:var(--ku-accent);opacity:0;scale:.6;filter:blur(2px);
+.knobs-picker-option[data-selected] .knobs-picker-key{background:var(--_k-fill-selected);color:var(--_k-fg)}
+.knobs-picker-name{flex:1;min-width:0;overflow:hidden;white-space:nowrap;font-weight:var(--_k-weight-label)}
+.knobs-picker-suggested{flex:none;color:var(--_k-fg-3);font-size:var(--_k-text-meta)}
+.knobs-picker-check{flex:none;display:flex;width:14px;height:14px;color:var(--_k-accent);opacity:0;scale:.6;filter:blur(2px);
   transition:opacity .11s ease-in,scale .11s ease-in,filter .11s ease-in}
-.knobs-picker-check svg{display:block;width:14px;height:14px}
+.knobs-picker-check svg{display:block;width:12px;height:12px}
 .knobs-picker-option[data-chosen] .knobs-picker-check{opacity:1;scale:1;filter:none;transition:opacity .15s ease-out,scale var(--kp-snappy-ms) var(--kp-snappy),filter .15s ease-out}
 .knobs-picker-body{position:relative;overflow:visible}
 .knobs-picker-body[data-moving]{overflow:hidden}
@@ -11606,7 +11706,7 @@ var snappy = springEasing(2 * Math.PI / 0.25, 1), pickerCss = `
 .knobs-picker-inner{padding:var(--k-picker-pad,0 8px 8px)}
 .knobs-picker-inner:empty{padding:0}
 .knobs-picker-inner .knobs-panel.knobs-inline{--k-chrome:0;padding:0}
-.knobs-picker-empty{padding:8px var(--ku-inset);color:var(--ku-dim)}
+.knobs-picker-empty{padding:8px var(--_k-inset);color:var(--_k-fg-3)}
 @media(prefers-reduced-motion:reduce){.knobs-picker :where(*,::before,::after){transition-duration:.15s!important;scale:none!important;filter:none!important}}
 `;
 
@@ -11616,25 +11716,25 @@ var readoutCss = `
 :where(.knobs-ui) :is(.knobs-rd-chip,.knobs-rd-copy,.knobs-rd-jump,.knobs-rd-find,.knobs-rd-match){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-rd,.knobs-rd *{box-sizing:border-box}
-.knobs-ui.knobs-rd{display:flex;align-items:center;gap:8px;min-width:0;color:var(--ku-text);letter-spacing:normal}
-.knobs-rd .knobs-rd-v{font:var(--ku-font-weight) var(--ku-value-size)/1.25 var(--ku-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
-.knobs-rd .knobs-rd-mono{font:400 var(--ku-text-meta)/1.25 var(--ku-mono);font-variant-numeric:tabular-nums;white-space:pre}
-.knobs-rd .knobs-rd-meta{font:var(--ku-font-weight) var(--ku-text-meta)/1.25 var(--ku-font);white-space:nowrap}
+.knobs-ui.knobs-rd{display:flex;align-items:center;gap:8px;min-width:0;color:var(--_k-fg);letter-spacing:normal}
+.knobs-rd .knobs-rd-v{font:var(--_k-weight) var(--_k-value-size)/1.25 var(--_k-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
+.knobs-rd .knobs-rd-mono{font:400 var(--_k-text-meta)/1.25 var(--_k-mono);font-variant-numeric:tabular-nums;white-space:pre}
+.knobs-rd .knobs-rd-meta{font:var(--_k-weight) var(--_k-text-meta)/1.25 var(--_k-font);white-space:nowrap}
 .knobs-rd .knobs-rd-value{display:inline-flex;justify-content:flex-end;align-items:baseline;flex:none;margin-left:auto;contain:layout paint style}
-.knobs-rd .knobs-rd-num{color:var(--ku-text);text-align:right;transition:color .15s}
-.knobs-rd .knobs-rd-unit{margin-left:var(--k-unit-gap,.28em);color:var(--ku-dim)}
+.knobs-rd .knobs-rd-num{color:var(--_k-fg);text-align:right;transition:color .15s}
+.knobs-rd .knobs-rd-unit{margin-left:var(--k-unit-gap,.28em);color:var(--_k-fg-3)}
 .knobs-rd .knobs-rd-unit[hidden]{display:none}
 .knobs-rd.knobs-rd-watch{flex:1 1 auto;justify-content:flex-end}
 .knobs-rd.knobs-rd-spark,.knobs-rd.knobs-rd-meter{flex:0 1 64%;margin-left:auto}
-.knobs-rd .knobs-rd-plot{display:block;flex:1 1 0;min-width:24px;height:max(12px,calc(var(--ku-control-h) - 2px))}
+.knobs-rd .knobs-rd-plot{display:block;flex:1 1 0;min-width:24px;height:max(12px,calc(var(--_k-control-h) - 2px))}
 .knobs-rd.knobs-rd-meter>.knobs-rd-plot{height:8px}
-.knobs-rd.knobs-rd-spark[data-hover] .knobs-rd-num{color:var(--ku-label)}
-.knobs-rd .knobs-rd-cap,.knobs-rd .knobs-rd-head>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ku-label);font-weight:var(--ku-label-weight)}
+.knobs-rd.knobs-rd-spark[data-hover] .knobs-rd-num{color:var(--_k-fg-2)}
+.knobs-rd .knobs-rd-cap,.knobs-rd .knobs-rd-head>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--_k-fg-2);font-weight:var(--_k-weight-label)}
 
 /* Blocks: a head line (the label and what goes with it) over a body. In a panel the row grows to fit. */
 .knobs-panel .knobs-row.knobs-rd-rowblock{display:block;height:auto}
 .knobs-rd.knobs-rd-block{display:flex;flex-direction:column;align-items:stretch;gap:2px;width:100%}
-.knobs-rd .knobs-rd-head{display:flex;align-items:center;gap:0 10px;min-height:var(--ku-row);min-width:0}
+.knobs-rd .knobs-rd-head{display:flex;align-items:center;gap:0 10px;min-height:var(--_k-row);min-width:0}
 /* The title keeps its words; the legend or tools beside it give way (see fitHead). */
 .knobs-rd .knobs-rd-head>span:first-child{flex:0 0 auto;max-width:100%}
 .knobs-rd .knobs-rd-legend{display:flex;align-items:center;gap:12px;margin-left:auto;min-width:0;overflow:hidden}
@@ -11642,16 +11742,16 @@ var readoutCss = `
 .knobs-rd .knobs-rd-tools>.knobs-rd-find{flex:1 1 56px;min-width:56px;max-width:84px}
 .knobs-rd .knobs-rd-head[data-short] .knobs-rd-legend .knobs-rd-unit{display:none}
 .knobs-rd .knobs-rd-head[data-wrap]{flex-wrap:wrap;padding-bottom:4px}
-.knobs-rd .knobs-rd-head[data-wrap]>span:first-child{display:flex;align-items:center;min-height:var(--ku-row)}
+.knobs-rd .knobs-rd-head[data-wrap]>span:first-child{display:flex;align-items:center;min-height:var(--_k-row)}
 .knobs-rd .knobs-rd-head[data-wrap]>:is(.knobs-rd-legend,.knobs-rd-tools){flex:1 0 100%;margin-left:0}
 .knobs-rd .knobs-rd-head[data-wrap]>.knobs-rd-tools{flex-wrap:wrap;row-gap:4px}
 .knobs-rd .knobs-rd-key{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
 .knobs-rd .knobs-rd-swatch{flex:none;width:8px;height:2px;border-radius:1px}
-.knobs-rd .knobs-rd-name{color:var(--ku-label)}
+.knobs-rd .knobs-rd-name{color:var(--_k-fg-2)}
 .knobs-rd .knobs-rd-key>.knobs-rd-value{margin-left:2px}
 .knobs-rd .knobs-rd-plotbox{position:relative;outline:none;margin-bottom:6px}
 .knobs-rd .knobs-rd-plotbox>.knobs-rd-plot{position:absolute;inset:0;width:100%;height:100%;min-width:0}
-.knobs-rd .knobs-rd-tick,.knobs-rd .knobs-rd-mark{position:absolute;color:var(--ku-dim);pointer-events:none;line-height:14px;height:14px}
+.knobs-rd .knobs-rd-tick,.knobs-rd .knobs-rd-mark{position:absolute;color:var(--_k-fg-3);pointer-events:none;line-height:14px;height:14px}
 .knobs-rd .knobs-rd-tick{left:0}
 .knobs-rd .knobs-rd-tick[data-at="top"]{top:-2px}
 .knobs-rd .knobs-rd-tick[data-at="bottom"]{bottom:0}
@@ -11660,36 +11760,36 @@ var readoutCss = `
 
 .knobs-rd .knobs-rd-grid{display:grid;column-gap:14px;align-items:center;outline:none;margin-bottom:4px}
 .knobs-rd .knobs-rd-tr{display:contents}
-.knobs-rd .knobs-rd-tr>*{height:calc(var(--ku-row) * .72);line-height:calc(var(--ku-row) * .72);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.knobs-rd .knobs-rd-thead>*{height:var(--ku-row);line-height:var(--ku-row)}
-.knobs-rd .knobs-rd-th{color:var(--ku-dim);text-align:right}
-.knobs-rd .knobs-rd-td{color:var(--ku-text)}
-.knobs-rd .knobs-rd-td:first-child{color:var(--ku-label)}
+.knobs-rd .knobs-rd-tr>*{height:calc(var(--_k-row) * .72);line-height:calc(var(--_k-row) * .72);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.knobs-rd .knobs-rd-thead>*{height:var(--_k-row);line-height:var(--_k-row)}
+.knobs-rd .knobs-rd-th{color:var(--_k-fg-3);text-align:right}
+.knobs-rd .knobs-rd-td{color:var(--_k-fg)}
+.knobs-rd .knobs-rd-td:first-child{color:var(--_k-fg-2)}
 .knobs-rd .knobs-rd-td[data-num]{text-align:right}
 
 .knobs-rd.knobs-rd-log{--rd-lh:18px}
 .knobs-rd .knobs-rd-chips{display:inline-flex;align-items:center;gap:2px;margin-right:auto}
-.knobs-ui .knobs-rd-chip,.knobs-ui .knobs-rd-copy{height:calc(var(--ku-control-h) - 2px);padding:0 7px;border-radius:min(var(--ku-radius),5px);color:var(--ku-label);cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-rd-chip:hover,.knobs-ui .knobs-rd-copy:hover{background:var(--ku-wash);color:var(--ku-text)}
-.knobs-ui .knobs-rd-chip[aria-checked="true"]{background:var(--ku-wash-hi);color:var(--ku-text)}
-.knobs-ui .knobs-rd-find{width:84px;height:calc(var(--ku-control-h) - 2px);padding:0 7px;border-radius:min(var(--ku-radius),5px);
-  background:color-mix(in srgb,var(--ku-surface-hi) 60%,transparent);color:var(--ku-text);caret-color:var(--ku-accent)}
-.knobs-rd .knobs-rd-find::placeholder{color:var(--ku-dim)}
+.knobs-ui .knobs-rd-chip,.knobs-ui .knobs-rd-copy{height:calc(var(--_k-control-h) - 2px);padding:0 7px;border-radius:min(var(--_k-radius),5px);color:var(--_k-fg-2);cursor:pointer;transition:background .15s,color .15s}
+.knobs-ui .knobs-rd-chip:hover,.knobs-ui .knobs-rd-copy:hover{background:var(--_ku-wash);color:var(--_k-fg)}
+.knobs-ui .knobs-rd-chip[aria-checked="true"]{background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-rd-find{width:84px;height:calc(var(--_k-control-h) - 2px);padding:0 7px;border-radius:min(var(--_k-radius),5px);
+  background:color-mix(in srgb,var(--_k-fill-selected) 60%,transparent);color:var(--_k-fg);caret-color:var(--_k-accent)}
+.knobs-rd .knobs-rd-find::placeholder{color:var(--_k-fg-3)}
 .knobs-rd .knobs-rd-find::-webkit-search-cancel-button{display:none}
 .knobs-rd .knobs-rd-logbody{position:relative;margin-bottom:6px}
 .knobs-rd .knobs-rd-scroll{position:relative;overflow-x:hidden;overflow-y:auto;height:calc(var(--knobs-rd-lines,8) * var(--rd-lh));outline:none;
-  background:color-mix(in srgb,var(--ku-surface-hi) 45%,transparent);border-radius:min(var(--ku-radius),6px);scrollbar-width:thin;overscroll-behavior:contain}
+  background:color-mix(in srgb,var(--_k-fill-selected) 45%,transparent);border-radius:min(var(--_k-radius),6px);scrollbar-width:thin;overscroll-behavior:contain}
 .knobs-rd .knobs-rd-space{position:relative;width:100%}
 .knobs-rd .knobs-rd-line{position:absolute;left:0;right:0;top:0;display:flex;gap:10px;height:var(--rd-lh);line-height:var(--rd-lh);padding:0 8px;contain:layout style;will-change:transform}
 .knobs-rd .knobs-rd-line[hidden]{display:none}
-.knobs-rd .knobs-rd-time{flex:none;color:var(--ku-dim)}
-.knobs-rd .knobs-rd-text{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ku-text)}
-.knobs-rd .knobs-rd-line[data-level="warn"]>.knobs-rd-text{color:var(--ku-warn)}
-.knobs-rd .knobs-rd-line[data-level="error"]>.knobs-rd-text{color:var(--ku-critical)}
-.knobs-rd .knobs-rd-line[data-level="debug"]>.knobs-rd-text{color:var(--ku-dim)}
-.knobs-ui .knobs-rd-match{color:var(--ku-accent)}
-.knobs-ui .knobs-rd-jump{position:absolute;left:50%;bottom:6px;height:20px;padding:0 10px;border-radius:calc(var(--ku-radius) * 999);
-  background:var(--ku-accent);color:var(--ku-bg);opacity:0;transform:translate(-50%,6px);cursor:pointer;white-space:nowrap}
+.knobs-rd .knobs-rd-time{flex:none;color:var(--_k-fg-3)}
+.knobs-rd .knobs-rd-text{min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--_k-fg)}
+.knobs-rd .knobs-rd-line[data-level="warn"]>.knobs-rd-text{color:var(--_k-warn)}
+.knobs-rd .knobs-rd-line[data-level="error"]>.knobs-rd-text{color:var(--_k-danger)}
+.knobs-rd .knobs-rd-line[data-level="debug"]>.knobs-rd-text{color:var(--_k-fg-3)}
+.knobs-ui .knobs-rd-match{color:var(--_k-accent)}
+.knobs-ui .knobs-rd-jump{position:absolute;left:50%;bottom:6px;height:20px;padding:0 10px;border-radius:calc(var(--_k-radius) * 999);
+  background:var(--_k-accent);color:var(--_k-bg);opacity:0;transform:translate(-50%,6px);cursor:pointer;white-space:nowrap}
 
 /* Under the GPU overlay the readouts' DOM stays for focus, hit-testing and screen readers; the
    overlay draws them. Their filter field sits above it. */
@@ -11699,96 +11799,62 @@ var readoutCss = `
 @media(prefers-reduced-motion:reduce){.knobs-rd :where(*){transition:none!important}}
 `;
 
+// src/ui/selection-pill-css.ts
+var selectionPillCss = `
+.knobs-pick-pill,.knobs-pick-copy{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;transition:opacity .1s linear}
+.knobs-pick-pill{background:var(--_k-fill-selected);will-change:transform}
+.knobs-pick-copy{overflow:hidden;will-change:transform}
+.knobs-pick-copy-rows{position:absolute;left:0;top:0;width:0;height:0}
+:is(.knobs-pick-pill,.knobs-pick-copy)[data-off]{opacity:0}
+`;
 // src/ui/look.ts
-var ease = springEasing(26, 1), TOKENS2 = {
-  bg: "#1c1c1e",
-  surface: "rgba(255,255,255,.055)",
-  "surface-hi": "rgba(255,255,255,.11)",
-  line: "rgba(255,255,255,.1)",
-  "line-hi": "rgba(255,255,255,.18)",
-  text: "rgba(255,255,255,.92)",
-  label: "rgba(255,255,255,.64)",
-  dim: "rgba(255,255,255,.42)",
-  accent: "#fff",
-  font: 'system-ui,-apple-system,"SF Pro Text",sans-serif',
-  mono: '"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace',
-  "font-size": "12px",
-  "font-weight": "400",
-  "label-weight": "500",
-  "title-weight": "600",
-  row: "32px",
-  inset: "10px",
-  radius: "8px",
-  "hover-in": "150",
-  "hover-out": "150",
-  warn: "#ff9f0a",
-  critical: "#ff453a",
-  rim: "rgba(255,255,255,.09)",
-  page: "#101012",
-  "seg-bg": "rgba(0,0,0,.26)",
-  shadow: "0 12px 36px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.3)"
-}, LIGHT = {
-  bg: "#f5f5f7",
-  surface: "rgba(0,0,0,.05)",
-  "surface-hi": "rgba(0,0,0,.095)",
-  line: "rgba(0,0,0,.1)",
-  "line-hi": "rgba(0,0,0,.2)",
-  text: "rgba(0,0,0,.88)",
-  label: "rgba(60,60,67,.68)",
-  dim: "rgba(60,60,67,.5)",
-  accent: "#1c1c1e",
-  warn: "#c56a00",
-  critical: "#e0352b",
-  rim: "rgba(255,255,255,.75)",
-  page: "#e6e6eb",
-  "seg-bg": "rgba(0,0,0,.065)",
-  shadow: "0 10px 32px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08)"
-}, lightBlock = `${Object.entries(LIGHT).map(([k, v]) => `--k-${k}:${v}`).join(";")};color-scheme:light`, css = `
-:where(.knobs-ui){${Object.entries(TOKENS2).map(([k, v]) => `--ku-${k}:var(--k-${k},${v})`).join(";")};
-  --ku-control-h:var(--k-control-h,calc(var(--ku-row) - 8px));
-  --ku-value-font:var(--k-value-font,var(--ku-font));
-  --ku-value-size:var(--kc-value-size,calc(var(--ku-font-size) - .5px));
-  --ku-text-meta:var(--k-text-meta,calc(var(--ku-font-size) - 1px));
-  --ku-hit:var(--k-ui-hit,9px);
-  --ku-rail:var(--k-ui-rail,var(--ku-row));
-  --ku-indent:var(--k-ui-indent,14px);
-  --ku-select:var(--k-ui-select,color-mix(in srgb,var(--ku-accent) 13%,transparent));
-  --ku-select-focus:var(--k-ui-select-focus,color-mix(in srgb,var(--ku-accent) 19%,transparent));
-  --ku-wash:var(--k-ui-wash,color-mix(in srgb,var(--ku-surface) 70%,transparent));
-  --ku-wash-hi:var(--k-ui-wash-hi,var(--ku-surface-hi));
-  --ku-ease:${ease.easing};--ku-ease-ms:${ease.ms}ms;
+var css = `
+:where(.knobs-ui){
+  --_ku-hit:var(--k-ui-hit,9px);
+  --_ku-rail:var(--k-ui-rail,var(--_k-row));
+  --_ku-indent:var(--k-ui-indent,14px);
+  --_ku-select:var(--k-ui-select,var(--k-selection,color-mix(in srgb,var(--_k-accent) 13%,transparent)));
+  --_ku-select-focus:var(--k-ui-select-focus,color-mix(in srgb,var(--_k-accent) 19%,transparent));
+  --_ku-wash:var(--k-ui-wash,color-mix(in srgb,var(--_k-fill) 70%,transparent));
+  --_ku-wash-hi:var(--k-ui-wash-hi,var(--_k-fill-selected));
+  --_ku-ease:var(--_k-motion-snappy);--_ku-ease-ms:calc(var(--_k-motion-snappy-ms) * 1ms);
+  /* Over a picture: a quiet dark scrim in either appearance (a picture is no lighter in light
+     mode), light type on it, no ring. */
+  --_ku-media-scrim:rgb(0 0 0/.5);--_ku-on-media:#fff;--_ku-on-media-2:color-mix(in srgb,var(--_ku-on-media) 64%,transparent);
   /* The card frame (knobs' own look): every leaf pane a rounded card on the page, half a gap
      inside its slot, so panes sit a gap apart with the dividers' grips between them; tree rows
      inset as soft rounded washes. --k-frame: flat (labPreset) puts panes edge to edge on
      hairlines, square, as a dense editor's columns. */
-  --ku-panel-radius:var(--k-panel-radius,calc(var(--ku-radius) + 4px));
-  --ku-gap:var(--k-ui-gap,6px);
-  --ku-pane-m:calc(var(--ku-gap) / 2);
-  --ku-pane-bg:var(--k-ui-pane,var(--ku-bg));
-  --ku-pane-radius:var(--ku-panel-radius);
-  --ku-pane-ring:inset 0 0 0 1px var(--ku-line),inset 0 1px 0 var(--ku-rim);
-  --ku-divider:var(--k-ui-divider,transparent);
-  --ku-row-x:var(--k-ui-row-x,6px);
-  --ku-row-radius:max(0px,calc(var(--ku-panel-radius) - var(--ku-row-x)));
+  --_ku-gap:var(--k-ui-gap,6px);
+  --_ku-pane-m:calc(var(--_ku-gap) / 2);
+  --_ku-pane-bg:var(--_k-pane-bg);
+  --_ku-pane-radius:var(--_k-radius-panel);
+  --_ku-pane-ring:inset 0 0 0 1px var(--_k-border),inset 0 1px 0 var(--_k-rim);
+  --_ku-divider:var(--k-ui-divider,var(--k-split-gutter,transparent));
+  --_ku-row-x:var(--k-ui-row-x,6px);
+  --_ku-row-radius:max(0px,calc(var(--_ku-pane-radius) - var(--_ku-row-x)));
 }
-:where(.knobs-ui)[data-frame="flat"]{--ku-gap:var(--k-ui-gap,0px);--ku-pane-bg:var(--k-ui-pane,transparent);--ku-pane-radius:0px;--ku-pane-ring:none;
-  --ku-divider:var(--k-ui-divider,var(--ku-line));--ku-row-x:var(--k-ui-row-x,0px);--ku-row-radius:0px;
-  --ku-select:var(--k-ui-select,color-mix(in srgb,var(--ku-accent) 24%,transparent));--ku-select-focus:var(--k-ui-select-focus,color-mix(in srgb,var(--ku-accent) 34%,transparent))}
+:where(.knobs-ui)[data-frame="flat"]{--_ku-gap:var(--k-ui-gap,0px);--_ku-pane-bg:var(--k-ui-pane,var(--k-pane-bg,transparent));--_ku-pane-radius:0px;--_ku-pane-ring:none;
+  --_ku-divider:var(--_k-split-gutter);--_ku-row-x:var(--k-ui-row-x,0px);--_ku-row-radius:0px;
+  --_ku-select:var(--_k-selection);--_ku-select-focus:var(--k-ui-select-focus,color-mix(in srgb,var(--_k-accent) 34%,transparent))}
 /* One surface per thing: a piece on another surface draws no card of its own. Whatever draws a
    card (a walkthrough's step, a host's own) carries .knobs-surface, and a split's pane that's a
    card (not only a slot for another split) counts as one; any piece inside it, or one
    marked data-nested, loses its fill and ring and parts its own panes on hairlines as the flat
    frame does, so cards never stack two or three borders deep. Pieces draw their card from
-   --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-ui-divider,var(--ku-line));--k-diff-bg:transparent}
-:where(.knobs-ui)[data-theme="light"],
-:where(:root[data-theme="light"]) :where(.knobs-ui)[data-theme="auto"]{${lightBlock}}
-@media(prefers-color-scheme:light){:where(:root:not([data-theme="dark"])) :where(.knobs-ui)[data-theme="auto"]{${lightBlock}}}
+   --_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}
-:is(.knobs-tree,.knobs-pane-head,.knobs-pane-rail,.knobs-tree-ghost){font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);text-align:left;
+:is(.knobs-tree,.knobs-pane-head,.knobs-pane-rail,.knobs-tree-ghost){font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;
   letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;font-style:normal;-webkit-font-smoothing:antialiased}
 /* A host's element rules (button{padding}, header{margin}, mark{background}) stop at these, as
    they do at panels; (0,1,0), so the pieces' own rules after it win. */
@@ -11826,17 +11892,17 @@ var ease = springEasing(26, 1), TOKENS2 = {
 :is(.knobs-tree,.knobs-activity)::-webkit-scrollbar{display:none}
 .knobs-scrollbar{position:sticky;top:0;z-index:3;height:0;pointer-events:none}
 .knobs-scrollbar[hidden]{display:none}
-.knobs-scrollbar-thumb{position:absolute;top:0;right:2px;width:5px;border-radius:3px;background:color-mix(in srgb,var(--ku-text) 30%,transparent);opacity:0;
+.knobs-scrollbar-thumb{position:absolute;top:0;right:2px;width:5px;border-radius:3px;background:color-mix(in srgb,var(--_k-fg) 30%,transparent);opacity:0;
   transition:opacity .3s ease-out,background .15s}
 :hover>.knobs-scrollbar>.knobs-scrollbar-thumb,.knobs-scrollbar:is([data-active],[data-dragging])>.knobs-scrollbar-thumb{opacity:1;pointer-events:auto;transition-duration:.12s,.15s}
-.knobs-scrollbar-thumb:hover,.knobs-scrollbar[data-dragging]>.knobs-scrollbar-thumb{background:color-mix(in srgb,var(--ku-text) 48%,transparent)}
+.knobs-scrollbar-thumb:hover,.knobs-scrollbar[data-dragging]>.knobs-scrollbar-thumb{background:color-mix(in srgb,var(--_k-fg) 48%,transparent)}
 
 /* Split: panes along a row or column, hairline dividers with a wider grip. */
 .knobs-split{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden}
 .knobs-split[data-direction="column"]{flex-direction:column}
 .knobs-pane{position:relative;flex:none;min-width:0;min-height:0;overflow:hidden}
-.knobs-pane-clip{position:absolute;inset:0;margin:var(--ku-pane-m);overflow:hidden;border-radius:var(--ku-pane-radius);background:var(--ku-pane-bg)}
-.knobs-pane-clip::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--ku-pane-ring);pointer-events:none}
+.knobs-pane-clip{position:absolute;inset:0;margin:var(--_ku-pane-m);overflow:hidden;border-radius:var(--_ku-pane-radius);background:var(--_ku-pane-bg)}
+.knobs-pane-clip::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:var(--_ku-pane-ring);pointer-events:none}
 /* A pane holding another split is only its slot: the split's own panes are the cards. */
 .knobs-pane[data-nested]>.knobs-pane-clip{margin:0;background:transparent}
 .knobs-pane[data-nested]>.knobs-pane-clip::after{content:none}
@@ -11844,36 +11910,36 @@ var ease = springEasing(26, 1), TOKENS2 = {
 .knobs-pane-body{position:relative;flex:1;min-width:0;min-height:0;overflow:hidden}
 .knobs-pane[data-scroll] .knobs-pane-body{overflow:auto;scrollbar-width:thin}
 .knobs-pane[data-rail][data-collapsed][data-settled]>.knobs-pane-clip>.knobs-pane-inner,.knobs-pane:not([data-rail])[data-collapsed][data-settled]>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-body{visibility:hidden}
-.knobs-ui .knobs-pane-head{display:flex;align-items:center;gap:6px;flex:none;height:var(--ku-row);padding:0 calc(var(--ku-inset) - 4px) 0 var(--ku-inset);user-select:none;-webkit-user-select:none}
-.knobs-pane-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--ku-title-weight);color:var(--ku-text)}
-.knobs-pane-count{flex:none;color:var(--ku-dim);font-variant-numeric:tabular-nums}
+.knobs-ui .knobs-pane-head{display:flex;align-items:center;gap:6px;flex:none;height:var(--_k-row);padding:0 calc(var(--_k-inset) - 4px) 0 var(--_k-inset);user-select:none;-webkit-user-select:none}
+.knobs-pane-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:var(--_k-weight-title);color:var(--_k-fg)}
+.knobs-pane-count{flex:none;color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
 .knobs-pane-fill{flex:1}
-.knobs-ui .knobs-pane-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:calc(var(--ku-radius) * 999);color:var(--ku-dim);cursor:pointer;
+.knobs-ui .knobs-pane-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
   transition:background var(--hover-t,.15s),color .15s}
-.knobs-ui .knobs-pane-btn:is(:hover,:focus-visible){background:var(--ku-wash-hi);color:var(--ku-text)}
-.knobs-ui .knobs-pane-btn[aria-pressed="true"]{color:var(--ku-accent)}
+.knobs-ui .knobs-pane-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-pane-btn[aria-pressed="true"]{color:var(--_k-accent)}
 .knobs-pane-btn svg{width:13px;height:13px}
 .knobs-pane-head[data-toggles]{cursor:pointer}
 /* A collapsed pane's rail: its title along the edge; a click opens it. It holds on to the edge the
    pane folds toward, as wide as the rail, over the card (which folds to its size): only its label
    and chevron draw, and a nested split's slot, which has no card, gives it one of its own. */
-.knobs-ui .knobs-pane-rail{position:absolute;margin:var(--ku-pane-m);border-radius:var(--ku-pane-radius);background-color:transparent;display:flex;align-items:center;gap:8px;color:var(--ku-label);cursor:pointer;opacity:0;pointer-events:none;
-  font-weight:var(--ku-title-weight);transition:background .15s,color .15s}
-.knobs-ui .knobs-pane[data-nested]>.knobs-pane-rail{background-color:var(--ku-pane-bg);box-shadow:var(--ku-pane-ring)}
-.knobs-split[data-direction="row"]>.knobs-pane>.knobs-pane-rail{top:0;bottom:0;width:var(--ku-rail);writing-mode:vertical-rl;padding:10px 0}
+.knobs-ui .knobs-pane-rail{position:absolute;margin:var(--_ku-pane-m);border-radius:var(--_ku-pane-radius);background-color:transparent;display:flex;align-items:center;gap:8px;color:var(--_k-fg-2);cursor:pointer;opacity:0;pointer-events:none;
+  font-weight:var(--_k-weight-title);transition:background .15s,color .15s}
+.knobs-ui .knobs-pane[data-nested]>.knobs-pane-rail{background-color:var(--_ku-pane-bg);box-shadow:var(--_ku-pane-ring)}
+.knobs-split[data-direction="row"]>.knobs-pane>.knobs-pane-rail{top:0;bottom:0;width:var(--_ku-rail);writing-mode:vertical-rl;padding:10px 0}
 .knobs-split[data-direction="row"]>.knobs-pane[data-edge="start"]>.knobs-pane-rail{right:0}
 .knobs-split[data-direction="row"]>.knobs-pane[data-edge="end"]>.knobs-pane-rail{left:0}
-.knobs-split[data-direction="column"]>.knobs-pane>.knobs-pane-rail{left:0;right:0;height:var(--ku-rail);padding:0 var(--ku-inset)}
+.knobs-split[data-direction="column"]>.knobs-pane>.knobs-pane-rail{left:0;right:0;height:var(--_ku-rail);padding:0 var(--_k-inset)}
 .knobs-split[data-direction="column"]>.knobs-pane[data-edge="start"]>.knobs-pane-rail{bottom:0}
 .knobs-split[data-direction="column"]>.knobs-pane[data-edge="end"]>.knobs-pane-rail{top:0}
 .knobs-pane[data-collapsed]>.knobs-pane-rail{pointer-events:auto}
 /* Its hover wash fades, rather than going in one frame as a click opens the pane. */
-.knobs-ui .knobs-pane-rail::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--ku-wash);opacity:0;transition:opacity .15s;pointer-events:none}
+.knobs-ui .knobs-pane-rail::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--_ku-wash);opacity:0;transition:opacity .15s;pointer-events:none}
 .knobs-pane-rail>*{position:relative}
-.knobs-ui .knobs-pane[data-collapsed]>.knobs-pane-rail:is(:hover,:focus-visible){color:var(--ku-text)}
+.knobs-ui .knobs-pane[data-collapsed]>.knobs-pane-rail:is(:hover,:focus-visible){color:var(--_k-fg)}
 .knobs-ui .knobs-pane[data-collapsed]>.knobs-pane-rail:is(:hover,:focus-visible)::before{opacity:1}
 .knobs-pane-rail-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
-.knobs-pane-chevron{display:flex;flex:none;width:11px;height:11px;writing-mode:horizontal-tb;color:var(--ku-dim)}
+.knobs-pane-chevron{display:flex;flex:none;width:11px;height:11px;writing-mode:horizontal-tb;color:var(--_k-fg-3)}
 .knobs-pane-turn{display:flex;width:100%;height:100%;transform-origin:50% 50%}
 .knobs-pane-rail svg{width:11px;height:11px}
 /* The rail's chevron stands in for the header's collapse icon (it turns into the rail's), so the
@@ -11881,26 +11947,26 @@ var ease = springEasing(26, 1), TOKENS2 = {
 .knobs-pane[data-morph]>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head>.knobs-pane-collapse>svg{visibility:hidden}
 /* So does the rail's label for the title, when it travels (split's fold: { title: "travel" }). */
 .knobs-pane[data-travel]>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head>.knobs-pane-title{visibility:hidden}
-.knobs-pane[data-morph]:not([data-collapsed]):has(>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head>.knobs-pane-collapse:is(:hover,:focus-visible))>.knobs-pane-rail .knobs-pane-chevron{color:var(--ku-text)}
+.knobs-pane[data-morph]:not([data-collapsed]):has(>.knobs-pane-clip>.knobs-pane-inner>.knobs-pane-head>.knobs-pane-collapse:is(:hover,:focus-visible))>.knobs-pane-rail .knobs-pane-chevron{color:var(--_k-fg)}
 .knobs-pane[data-morph]:not([data-collapsed])>.knobs-pane-rail .knobs-pane-chevron{transition:color .15s}
 
-.knobs-divider{position:relative;z-index:2;flex:none;width:1px;background:var(--ku-divider);touch-action:none;outline:none}
+.knobs-divider{position:relative;z-index:2;flex:none;width:1px;background:var(--_ku-divider);touch-action:none;outline:none}
 .knobs-split[data-direction="column"]>.knobs-divider{width:auto;height:1px}
-.knobs-divider::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - var(--ku-hit) / 2);width:var(--ku-hit);cursor:col-resize}
-.knobs-split[data-direction="column"]>.knobs-divider::before{left:0;right:0;top:calc(50% - var(--ku-hit) / 2);bottom:auto;width:auto;height:var(--ku-hit);cursor:row-resize}
+.knobs-divider::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - var(--_ku-hit) / 2);width:var(--_ku-hit);cursor:col-resize}
+.knobs-split[data-direction="column"]>.knobs-divider::before{left:0;right:0;top:calc(50% - var(--_ku-hit) / 2);bottom:auto;width:auto;height:var(--_ku-hit);cursor:row-resize}
 /* Hover, focus and drags draw the hairline in the accent, with a soft wash beside it. */
-.knobs-divider::after{content:"";position:absolute;inset:0 -1px;background:var(--ku-accent);opacity:0;pointer-events:none;
-  box-shadow:0 0 0 2px color-mix(in srgb,var(--ku-accent) 18%,transparent);transition:opacity .16s}
+.knobs-divider::after{content:"";position:absolute;inset:0 -1px;background:var(--_k-accent);opacity:0;pointer-events:none;
+  box-shadow:0 0 0 2px color-mix(in srgb,var(--_k-accent) 18%,transparent);transition:opacity .16s}
 .knobs-split[data-direction="column"]>.knobs-divider::after{inset:-1px 0}
 .knobs-divider:hover::after{opacity:.7;transition-delay:.12s}
 .knobs-divider:focus-visible::after,.knobs-divider[data-active]::after{opacity:1;transition-delay:0s}
 /* Between cards, the hairline gives way to a grip: a small capsule in the gap that shows on
    hover, and lengthens and takes the accent while dragged or focused. */
-.knobs-split:not([data-frame="flat"])>.knobs-divider::after{inset:auto;left:50%;top:50%;width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px;background:var(--ku-line-hi);box-shadow:none;
-  transition:opacity .16s,background .16s,scale var(--ku-ease-ms) var(--ku-ease)}
+.knobs-split:not([data-frame="flat"])>.knobs-divider::after{inset:auto;left:50%;top:50%;width:4px;height:28px;margin:-14px 0 0 -2px;border-radius:2px;background:var(--_k-border-strong);box-shadow:none;
+  transition:opacity .16s,background .16s,scale var(--_ku-ease-ms) var(--_ku-ease)}
 .knobs-split[data-direction="column"]:not([data-frame="flat"])>.knobs-divider::after{inset:auto;left:50%;top:50%;width:28px;height:4px;margin:-2px 0 0 -14px}
 .knobs-split:not([data-frame="flat"])>.knobs-divider:hover::after{opacity:1}
-.knobs-split:not([data-frame="flat"])>.knobs-divider:is(:focus-visible,[data-active])::after{background:var(--ku-accent);opacity:.9;scale:1 1.45}
+.knobs-split:not([data-frame="flat"])>.knobs-divider:is(:focus-visible,[data-active])::after{background:var(--_k-accent);opacity:.9;scale:1 1.45}
 .knobs-split[data-direction="column"]:not([data-frame="flat"])>.knobs-divider:is(:focus-visible,[data-active])::after{scale:1.45 1}
 :root[data-knobs-resizing],:root[data-knobs-resizing] *{user-select:none!important;-webkit-user-select:none!important}
 :root[data-knobs-resizing="row"] *{cursor:col-resize!important}
@@ -11910,135 +11976,150 @@ var ease = springEasing(26, 1), TOKENS2 = {
 /* Tree: one scroller, rows placed by transform, only those near the view in the DOM. */
 .knobs-tree{position:relative;overflow:auto;height:100%;outline:none;scrollbar-width:none;overscroll-behavior:contain;user-select:none;-webkit-user-select:none}
 .knobs-tree-space{position:relative;width:100%;pointer-events:none}
-.knobs-tree-row{position:absolute;left:var(--ku-row-x);right:var(--ku-row-x);top:0;display:flex;align-items:center;height:var(--ku-row);padding-right:calc(var(--ku-inset) - 4px);
-  color:var(--ku-text);white-space:nowrap;cursor:default;will-change:transform;contain:layout style}
-.knobs-tree-row::before{content:"";position:absolute;inset:0;border-radius:var(--ku-row-radius);background:var(--ku-wash);opacity:0;transition:opacity calc(var(--ku-hover-out) * 1ms),background .12s;pointer-events:none}
-.knobs-tree:not([data-keyboard]):not([data-dragging]) .knobs-tree-row:hover::before{opacity:1;transition-duration:calc(var(--ku-hover-in) * 1ms)}
-.knobs-tree-row[aria-selected="true"]::before{opacity:1;background:var(--ku-select)}
-.knobs-tree:focus-visible .knobs-tree-row[data-active]::before,.knobs-tree[data-keyboard]:focus .knobs-tree-row[data-active]::before{opacity:1;background:var(--ku-wash-hi)}
-.knobs-tree:focus .knobs-tree-row[data-active][aria-selected="true"]::before{background:var(--ku-select-focus)}
-.knobs-tree-row[data-drop="into"]::before{opacity:1;background:color-mix(in srgb,var(--ku-accent) 30%,transparent)}
+.knobs-tree-row{position:absolute;left:var(--_ku-row-x);right:var(--_ku-row-x);top:0;display:flex;align-items:center;height:var(--_k-row);padding-right:calc(var(--_k-inset) - 4px);
+  color:var(--_k-fg);white-space:nowrap;cursor:default;will-change:transform;contain:layout style}
+.knobs-tree-row::before{content:"";position:absolute;inset:0;border-radius:var(--_ku-row-radius);background:var(--_ku-wash);opacity:0;transition:opacity calc(var(--_k-hover-out) * 1ms),background .12s;pointer-events:none}
+.knobs-tree:not([data-keyboard]):not([data-dragging]) .knobs-tree-row:hover::before{opacity:1;transition-duration:calc(var(--_k-hover-in) * 1ms)}
+.knobs-tree-row[aria-selected="true"]::before{opacity:1;background:var(--_ku-select)}
+.knobs-tree:focus-visible .knobs-tree-row[data-active]::before,.knobs-tree[data-keyboard]:focus .knobs-tree-row[data-active]::before{opacity:1;background:var(--_ku-wash-hi)}
+.knobs-tree:focus .knobs-tree-row[data-active][aria-selected="true"]::before{background:var(--_ku-select-focus)}
+.knobs-tree-row[data-drop="into"]::before{opacity:1;background:color-mix(in srgb,var(--_k-accent) 30%,transparent)}
 .knobs-tree-row[data-dragged]{opacity:.38}
-/* glide: one highlight under the selected row that glides between rows (the row's own stays off). */
-.knobs-tree-cursor{position:absolute;left:var(--ku-row-x);right:var(--ku-row-x);top:0;height:var(--ku-row);border-radius:var(--ku-row-radius);background:var(--ku-select);
-  opacity:0;pointer-events:none;will-change:transform;transition:opacity .15s ease-out,background .12s}
-.knobs-tree-cursor[data-on]{opacity:1}
-.knobs-tree:focus .knobs-tree-cursor{background:var(--ku-select-focus)}
+/* glide: the selection pill on the selected row, in the selection's colour (the row's own stays off). */
+.knobs-tree>.knobs-pick-pill{background:var(--_ku-select)}
+.knobs-tree:focus>.knobs-pick-pill{background:var(--_ku-select-focus)}
 .knobs-tree[data-glide] .knobs-tree-row[aria-selected="true"]::before{opacity:0!important}
 .knobs-tree-row>*{position:relative}
-.knobs-tree-caret{flex:none;display:flex;align-items:center;justify-content:center;width:16px;height:100%;color:var(--ku-dim);transition:transform var(--ku-ease-ms) var(--ku-ease)}
+.knobs-tree-caret{flex:none;display:flex;align-items:center;justify-content:center;width:16px;height:100%;color:var(--_k-fg-3);transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
 .knobs-tree-caret svg{width:9px;height:9px}
 .knobs-tree-row[aria-expanded="true"]>.knobs-tree-caret{transform:rotate(90deg)}
 .knobs-tree-row:not([aria-expanded])>.knobs-tree-caret{visibility:hidden}
-.knobs-tree-icon{flex:none;display:flex;align-items:center;justify-content:center;width:14px;margin-right:6px;color:var(--ku-dim);font-size:calc(var(--ku-font-size) - 1px)}
-.knobs-tree-label{position:relative;flex:1;min-width:0;overflow:hidden;font-weight:var(--ku-font-weight)}
-.knobs-tree-row[data-ancestor] .knobs-tree-label{color:var(--ku-label)}
-.knobs-tree-label .knobs-tree-mark{color:var(--ku-accent)}
+.knobs-tree-icon{flex:none;display:flex;align-items:center;justify-content:center;width:14px;margin-right:6px;color:var(--_k-fg-3);font-size:calc(var(--_k-font-size) - 1px)}
+.knobs-tree-label{position:relative;flex:1;min-width:0;overflow:hidden;font-weight:var(--_k-weight)}
+.knobs-tree-row[data-ancestor] .knobs-tree-label{color:var(--_k-fg-2)}
+.knobs-tree-label .knobs-tree-mark{color:var(--_k-accent)}
 .knobs-tree-row[data-off~="visible"] :is(.knobs-tree-label,.knobs-tree-icon){opacity:.45}
-.knobs-tree-row[data-off~="locked"] .knobs-tree-label{color:var(--ku-label)}
-.knobs-tree-detail{flex:none;margin-left:6px;color:var(--ku-dim);font-variant-numeric:tabular-nums}
+.knobs-tree-row[data-off~="locked"] .knobs-tree-label{color:var(--_k-fg-2)}
+.knobs-tree-detail{flex:none;margin-left:6px;color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
 .knobs-tree-tools{flex:none;display:flex;align-items:center;gap:1px;margin-left:4px}
-.knobs-ui .knobs-tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:calc(var(--ku-radius) * 999);color:var(--ku-dim);cursor:pointer;opacity:0;transition:opacity .12s,color .12s,background .12s}
+.knobs-ui .knobs-tree-toggle{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;opacity:0;transition:opacity .12s,color .12s,background .12s}
 .knobs-ui .knobs-tree-toggle svg{width:12px;height:12px}
 .knobs-tree-row:is(:hover,[data-active],[aria-selected="true"]) .knobs-tree-toggle,.knobs-ui .knobs-tree-toggle[aria-pressed="false"]{opacity:1}
-.knobs-ui .knobs-tree-toggle:hover{background:var(--ku-wash-hi);color:var(--ku-text)}
-.knobs-ui .knobs-tree-toggle[aria-pressed="false"]{color:var(--ku-label)}
+.knobs-ui .knobs-tree-toggle:hover{background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-tree-toggle[aria-pressed="false"]{color:var(--_k-fg-2)}
 /* Renaming in place, as a number is edited in a panel: no box, just the text and an underline. */
-.knobs-ui .knobs-tree-edit{position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);width:100%;height:calc(var(--ku-font-size) * 1.5);padding:0;
-  background:transparent;color:var(--ku-text);caret-color:var(--ku-accent);font:inherit;font-weight:var(--ku-font-weight);border-bottom:1px solid var(--ku-text)}
-.knobs-tree-edit::selection{background:color-mix(in srgb,var(--ku-accent) 40%,transparent)}
+.knobs-ui .knobs-tree-edit{position:absolute;inset:auto 0 auto 0;top:50%;transform:translateY(-50%);width:100%;height:calc(var(--_k-font-size) * 1.5);padding:0;
+  background:transparent;color:var(--_k-fg);caret-color:var(--_k-accent);font:inherit;font-weight:var(--_k-weight);border-bottom:1px solid var(--_k-fg)}
+.knobs-tree-edit::selection{background:color-mix(in srgb,var(--_k-accent) 40%,transparent)}
 .knobs-tree-row[data-editing] .knobs-tree-text{visibility:hidden}
-.knobs-tree-line{position:absolute;left:0;right:6px;top:0;height:2px;margin-top:-1px;border-radius:1px;background:var(--ku-accent);pointer-events:none;opacity:0;transition:opacity .1s}
-.knobs-tree-line::before{content:"";position:absolute;left:-3px;top:-2px;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--ku-accent)}
+.knobs-tree-line{position:absolute;left:0;right:6px;top:0;height:2px;margin-top:-1px;border-radius:1px;background:var(--_k-accent);pointer-events:none;opacity:0;transition:opacity .1s}
+.knobs-tree-line::before{content:"";position:absolute;left:-3px;top:-2px;width:6px;height:6px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--_k-accent)}
 .knobs-tree[data-dragging] .knobs-tree-line[data-shown]{opacity:1}
-.knobs-tree-ghost{position:fixed;left:0;top:0;z-index:2147480004;padding:2px 8px;background:var(--ku-bg);color:var(--ku-text);border-radius:var(--ku-radius);
-  box-shadow:0 0 0 1px var(--ku-line-hi),0 6px 18px rgba(0,0,0,.35);pointer-events:none;white-space:nowrap;font:var(--ku-font-weight) var(--ku-font-size)/1.6 var(--ku-font)}
-.knobs-tree-empty{padding:10px var(--ku-inset);color:var(--ku-dim)}
+.knobs-tree-ghost{position:fixed;left:0;top:0;z-index:2147480004;padding:2px 8px;background:var(--_k-bg);color:var(--_k-fg);border-radius:var(--_k-radius);
+  box-shadow:0 0 0 1px var(--_k-border-strong),0 6px 18px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1)));pointer-events:none;white-space:nowrap;font:var(--_k-weight) var(--_k-font-size)/1.6 var(--_k-font)}
+.knobs-tree-empty{padding:10px var(--_k-inset);color:var(--_k-fg-3)}
 
-/* Timeline: a transport (play, the time) beside a track: the ruler's canvas over a lane of
-   markers, ranges as soft bands, and the playhead, a hairline in the accent with a cap. */
+/* Timeline: play beside a track: the ruler's canvas over a lane of markers, ranges as soft bands,
+   and the playhead, a hairline in the accent with a cap. No clock: the time shows under the
+   pointer on the track (the tag), in seconds, while hovering or scrubbing. */
 :where(.knobs-timeline,.knobs-timeline *){box-sizing:border-box}
-.knobs-ui.knobs-timeline{display:flex;align-items:stretch;gap:10px;width:100%;height:100%;min-height:52px;padding:6px var(--ku-inset) 8px 8px;outline:none;user-select:none;-webkit-user-select:none;
-  font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);letter-spacing:normal;text-align:left}
+.knobs-ui.knobs-timeline{display:flex;align-items:stretch;gap:10px;width:100%;height:100%;min-height:52px;padding:6px var(--_k-inset) 8px 8px;outline:none;user-select:none;-webkit-user-select:none;
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
 :where(.knobs-ui) :is(.knobs-tl-play,.knobs-tl-edit){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
-.knobs-tl-transport{flex:none;display:flex;align-items:center;gap:8px;min-width:96px}
-.knobs-ui .knobs-tl-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--ku-control-h);height:var(--ku-control-h);min-width:22px;min-height:22px;border-radius:calc(var(--ku-radius) * 999);
-  background:var(--ku-surface-hi);color:var(--ku-text);cursor:pointer;transition:background .15s,transform .15s var(--ku-ease)}
-.knobs-ui .knobs-tl-play:hover{background:color-mix(in srgb,var(--ku-text) 16%,transparent)}
+.knobs-tl-transport{flex:none;display:flex;align-items:center}
+.knobs-ui .knobs-tl-play{flex:none;display:inline-flex;align-items:center;justify-content:center;width:var(--_k-control-h);height:var(--_k-control-h);min-width:22px;min-height:22px;border-radius:calc(var(--_k-radius) * 999);
+  background:var(--_k-fill-selected);color:var(--_k-fg);cursor:pointer;transition:background .15s,transform .15s var(--_ku-ease)}
+.knobs-ui .knobs-tl-play:hover{background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
 .knobs-ui .knobs-tl-play:active{transform:scale(.94)}
 .knobs-tl-play svg{width:12px;height:12px}
-.knobs-timeline[data-playing] .knobs-tl-play{background:var(--ku-accent);color:var(--ku-bg)}
-.knobs-tl-time{display:flex;flex-direction:column;line-height:1.2;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-tl-now{font:var(--ku-font-weight) var(--ku-value-size)/1.2 var(--ku-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--ku-text);white-space:nowrap}
-.knobs-tl-sub{font-size:var(--ku-text-meta);color:var(--ku-dim);white-space:nowrap}
-.knobs-tl-track{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--ku-radius);background:var(--ku-surface);cursor:col-resize;touch-action:none;
-  transition:background calc(var(--ku-hover-out) * 1ms)}
-.knobs-timeline:focus-visible .knobs-tl-track,.knobs-timeline[data-keyboard]:focus .knobs-tl-track{background:color-mix(in srgb,var(--ku-surface-hi) 80%,transparent)}
+.knobs-timeline[data-playing] .knobs-tl-play{background:var(--_k-accent);color:var(--_k-bg)}
+.knobs-tl-track{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--_k-radius);background:var(--_k-fill);cursor:col-resize;touch-action:none;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-timeline:focus-visible .knobs-tl-track,.knobs-timeline[data-keyboard]:focus .knobs-tl-track{background:color-mix(in srgb,var(--_k-fill-selected) 80%,transparent)}
 .knobs-tl-ruler{position:absolute;left:0;top:0;height:22px;pointer-events:none}
 .knobs-tl-lane{position:absolute;left:0;right:0;top:22px;bottom:0;pointer-events:none}
 /* Ranges: a soft band through the lane, its edges handles; the loop range in the accent. */
-.knobs-tl-range{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--ku-text) 6%,transparent);will-change:transform}
-.knobs-tl-range[data-loop]{background:color-mix(in srgb,var(--ku-accent) 11%,transparent)}
-.knobs-tl-range[data-selected]{background:color-mix(in srgb,var(--ku-accent) 18%,transparent)}
+.knobs-tl-range{position:absolute;left:0;top:0;bottom:0;width:0;background:color-mix(in srgb,var(--_k-fg) 6%,transparent);will-change:transform}
+.knobs-tl-range[data-loop]{background:color-mix(in srgb,var(--_k-accent) 11%,transparent)}
+.knobs-tl-range[data-selected]{background:color-mix(in srgb,var(--_k-accent) 18%,transparent)}
 .knobs-tl-edge{position:absolute;top:0;bottom:0;width:9px;cursor:ew-resize}
 .knobs-tl-edge[data-edge="start"]{left:-4px}
 .knobs-tl-edge[data-edge="end"]{right:-5px}
-.knobs-tl-edge::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:color-mix(in srgb,var(--ku-accent) 55%,transparent);transition:background .15s,box-shadow .15s}
-.knobs-tl-edge:hover::after,.knobs-tl-range[data-selected] .knobs-tl-edge::after{background:var(--ku-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--ku-accent) 22%,transparent)}
-.knobs-tl-rlabel{position:absolute;left:5px;bottom:3px;padding:0 5px;border-radius:max(0px,calc(var(--ku-radius) - 3px));font-size:var(--ku-text-meta);line-height:16px;color:var(--ku-label);cursor:grab;white-space:nowrap}
+.knobs-tl-edge::after{content:"";position:absolute;top:0;bottom:0;left:4px;width:1px;background:color-mix(in srgb,var(--_k-accent) 55%,transparent);transition:background .15s,box-shadow .15s}
+.knobs-tl-edge:hover::after,.knobs-tl-range[data-selected] .knobs-tl-edge::after{background:var(--_k-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--_k-accent) 22%,transparent)}
+.knobs-tl-rlabel{position:absolute;left:5px;bottom:3px;padding:0 5px;border-radius:max(0px,calc(var(--_k-radius) - 3px));font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg-2);cursor:grab;white-space:nowrap}
 .knobs-tl-rlabel:empty{display:none}
-.knobs-tl-rlabel:hover{background:var(--ku-wash-hi);color:var(--ku-text)}
+.knobs-tl-rlabel:hover{background:var(--_ku-wash-hi);color:var(--_k-fg)}
 /* Markers: a diamond on the ruler's edge and a label chip below it. */
-.knobs-tl-marker{position:absolute;left:0;top:-22px;bottom:0;width:0;will-change:transform;pointer-events:none;--knobs-tl-c:var(--knobs-tl-color,var(--ku-label))}
+.knobs-tl-marker{position:absolute;left:0;top:-22px;bottom:0;width:0;will-change:transform;pointer-events:none;--knobs-tl-c:var(--knobs-tl-color,var(--_k-fg-2))}
 .knobs-tl-marker::before{content:"";position:absolute;top:22px;bottom:0;left:-.5px;width:1px;background:color-mix(in srgb,var(--knobs-tl-c) 40%,transparent)}
 .knobs-tl-pin{position:absolute;top:13px;left:-5px;width:10px;height:10px;pointer-events:auto;cursor:grab}
-.knobs-tl-pin::after{content:"";position:absolute;inset:1.5px;border-radius:min(2px,var(--ku-radius));background:var(--knobs-tl-c);rotate:45deg;transition:background .15s,scale .2s var(--ku-ease)}
-.knobs-tl-mlabel{position:absolute;top:26px;left:3px;max-width:140px;padding:0 6px;border-radius:max(0px,calc(var(--ku-radius) - 3px));background:var(--ku-surface-hi);color:var(--ku-text);
-  font-size:var(--ku-text-meta);line-height:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
-.knobs-tl-marker[data-selected]{--knobs-tl-c:var(--ku-accent)}
-.knobs-tl-marker[data-selected] .knobs-tl-mlabel{background:color-mix(in srgb,var(--ku-accent) 24%,var(--ku-surface-hi))}
+.knobs-tl-pin::after{content:"";position:absolute;inset:1.5px;border-radius:min(2px,var(--_k-radius));background:var(--knobs-tl-c);rotate:45deg;transition:background .15s,scale .2s var(--_ku-ease)}
+.knobs-tl-mlabel{position:absolute;top:26px;left:3px;max-width:140px;padding:0 6px;border-radius:max(0px,calc(var(--_k-radius) - 3px));background:var(--_k-fill-selected);color:var(--_k-fg);
+  font-size:var(--_k-text-meta);line-height:17px;white-space:nowrap;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+.knobs-tl-mtext{display:block;overflow:hidden;white-space:nowrap}
+.knobs-tl-marker[data-selected]{--knobs-tl-c:var(--_k-accent)}
+.knobs-tl-marker[data-selected] .knobs-tl-mlabel{background:color-mix(in srgb,var(--_k-accent) 24%,var(--_k-fill-selected))}
 .knobs-tl-marker[data-selected] .knobs-tl-pin::after{scale:1.2}
 .knobs-timeline[data-dragging] .knobs-tl-marker[data-selected] :is(.knobs-tl-pin,.knobs-tl-mlabel){cursor:grabbing}
 .knobs-tl-marker[data-editing] .knobs-tl-mlabel{visibility:hidden}
-.knobs-ui .knobs-tl-edit{position:absolute;top:26px;left:3px;width:120px;height:17px;padding:0 6px;font-size:var(--ku-text-meta);color:var(--ku-text);caret-color:var(--ku-accent);
-  background:var(--ku-bg);border-radius:max(0px,calc(var(--ku-radius) - 3px));box-shadow:inset 0 -1px 0 var(--ku-text);pointer-events:auto}
+.knobs-ui .knobs-tl-edit{position:absolute;top:26px;left:3px;width:120px;height:17px;padding:0 6px;font-size:var(--_k-text-meta);color:var(--_k-fg);caret-color:var(--_k-accent);
+  background:var(--_k-bg);border-radius:max(0px,calc(var(--_k-radius) - 3px));box-shadow:inset 0 -1px 0 var(--_k-fg);pointer-events:auto}
 /* The playhead: an accent hairline with a rounded cap in the ruler; it glows a little while held
    on a marker. */
 .knobs-tl-head{position:absolute;left:0;top:0;bottom:0;width:0;will-change:transform;pointer-events:none}
-.knobs-tl-head::before{content:"";position:absolute;top:4px;bottom:0;left:-.75px;width:1.5px;background:var(--ku-accent)}
-.knobs-tl-head::after{content:"";position:absolute;top:3px;left:-4.5px;width:9px;height:13px;border-radius:min(4.5px,var(--ku-radius)) min(4.5px,var(--ku-radius)) min(4.5px,var(--ku-radius)) min(4.5px,var(--ku-radius));
-  background:var(--ku-accent);box-shadow:0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift,1)));transition:box-shadow .15s,scale .18s var(--ku-ease)}
+.knobs-tl-head::before{content:"";position:absolute;top:4px;bottom:0;left:-.75px;width:1.5px;background:var(--_k-accent)}
+.knobs-tl-head::after{content:"";position:absolute;top:3px;left:-4.5px;width:9px;height:13px;border-radius:min(4.5px,var(--_k-radius)) min(4.5px,var(--_k-radius)) min(4.5px,var(--_k-radius)) min(4.5px,var(--_k-radius));
+  background:var(--_k-accent);box-shadow:0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift,1)));transition:box-shadow .15s,scale .18s var(--_ku-ease)}
 .knobs-timeline[data-scrubbing] .knobs-tl-head::after{scale:1.12}
-.knobs-timeline[data-stuck] .knobs-tl-head::after{box-shadow:0 0 0 3px color-mix(in srgb,var(--ku-accent) 26%,transparent)}
-.knobs-tl-hover{position:absolute;left:0;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--ku-line-hi);transform:translateX(-100px);pointer-events:none;opacity:0;transition:opacity .15s}
+.knobs-timeline[data-stuck] .knobs-tl-head::after{box-shadow:0 0 0 3px color-mix(in srgb,var(--_k-accent) 26%,transparent)}
+.knobs-tl-hover{position:absolute;left:0;top:0;bottom:0;width:1px;margin-left:-.5px;background:var(--_k-border-strong);transform:translateX(-100px);pointer-events:none;opacity:0;transition:opacity .15s}
 .knobs-tl-track:hover .knobs-tl-hover{opacity:1}
 .knobs-timeline[data-scrubbing] .knobs-tl-hover{opacity:0}
+.knobs-tl-tag{position:absolute;left:0;bottom:2px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none;opacity:0}
+.knobs-tl-tag[data-on]{opacity:1}
+/* The lane (variant: "lane"): one slim track of ticks under a compare or a video; markers are
+   faint chapter ticks, the current one in text colour; nothing to edit. */
+.knobs-ui.knobs-timeline[data-variant="lane"]{height:auto;min-height:0;padding:0;gap:var(--_k-gap)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-track{height:var(--_k-control-h)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-ruler{height:100%}
+.knobs-timeline[data-variant="lane"] .knobs-tl-lane{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker::before{top:0;bottom:50%;left:-.75px;width:1.5px;background:var(--_k-fg-3)}
+.knobs-timeline[data-variant="lane"] .knobs-tl-marker[data-current]::before{background:var(--_k-fg)}
+.knobs-timeline[data-variant="lane"] :is(.knobs-tl-pin,.knobs-tl-mlabel,.knobs-tl-rlabel){display:none}
+.knobs-timeline[data-variant="lane"] .knobs-tl-head::before{top:0}
+.knobs-timeline[data-variant="lane"] .knobs-tl-head::after{content:none}
+.knobs-timeline[data-variant="lane"] .knobs-tl-tag{top:2px;bottom:auto}
+/* The line (variant: "line"): a player's progress under its media. One 2px line, fg-3 with fg
+   filling it, a segment per chapter; it thickens under the pointer and while scrubbing. The
+   chapter and time under the pointer float over it; nothing else shows. */
+.knobs-ui.knobs-timeline[data-variant="line"]{height:auto;min-height:0;padding:0;gap:0}
+.knobs-timeline[data-variant="line"] .knobs-tl-transport{display:none}
+.knobs-ui.knobs-timeline[data-variant="line"] .knobs-tl-track{height:16px;overflow:visible;border-radius:var(--_k-radius);background:transparent;box-shadow:none;cursor:pointer}
+.knobs-timeline[data-variant="line"] :is(.knobs-tl-ruler,.knobs-tl-lane,.knobs-tl-hover,.knobs-tl-head,.knobs-tl-rlabel){display:none}
+.knobs-tl-segs{position:absolute;left:0;right:0;top:50%;height:2px;margin-top:-1px;pointer-events:none;transition:scale calc(var(--_k-hover-out) * 1ms) var(--_ku-ease)}
+.knobs-tl-seg{position:absolute;left:0;top:0;height:100%;overflow:hidden;border-radius:1px;background:var(--_k-fg-3);will-change:transform}
+.knobs-tl-seg-fill{position:absolute;inset:0;background:var(--_k-fg);transform-origin:0 0;will-change:transform}
+.knobs-timeline[data-variant="line"] .knobs-tl-track:hover .knobs-tl-segs,.knobs-timeline[data-variant="line"][data-scrubbing] .knobs-tl-segs{scale:1 2}
+.knobs-timeline[data-variant="line"] .knobs-tl-range{top:3px;bottom:3px;border-radius:3px}
+.knobs-timeline[data-variant="line"]:focus-visible .knobs-tl-track,.knobs-timeline[data-variant="line"][data-keyboard]:focus .knobs-tl-track{background:transparent;box-shadow:0 0 0 2px color-mix(in srgb,var(--_k-accent) 60%,transparent)}
+.knobs-timeline[data-variant="line"] .knobs-tl-tag{top:auto;bottom:calc(100% + 2px);display:flex;gap:6px;padding:0 6px;border-radius:calc(var(--_k-radius) * 999);background:var(--_ku-media-scrim);color:var(--_ku-on-media);
+  font-size:var(--_k-type-small);line-height:var(--_k-leading-small);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
+.knobs-tl-tag-label{color:var(--_k-fg-2)}
+.knobs-timeline[data-variant="line"] .knobs-tl-tag-label{color:var(--_ku-on-media-2)}
+.knobs-tl-tag-label:empty{display:none}
 @media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
 @media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
-`;
+`, uiCss = () => aliased(css + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + playerCss + selectionPillCss) + rolling_css_default;
 function injectUiStyles(doc) {
-  if (doc.querySelector("style[data-knobs-ui]"))
+  if (injectTokens(doc), doc.querySelector("style[data-knobs-ui]"))
     return;
   let style = doc.createElement("style");
-  style.dataset.knobsUi = "", style.textContent = css + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + rolling_css_default, doc.head.append(style);
-}
-function injectUiPreset(doc, preset) {
-  let content = presetCss({ ...preset, css: void 0 }).replaceAll(".knobs-panel", ".knobs-ui"), existing = doc.querySelector(`style[data-knobs-ui-preset="${preset.name}"]`);
-  if (existing) {
-    if (existing.textContent !== content)
-      existing.textContent = content;
-    return;
-  }
-  let style = doc.createElement("style");
-  style.dataset.knobsUiPreset = preset.name, style.textContent = content, doc.head.append(style);
+  style.dataset.knobsUi = "", style.textContent = uiCss(), doc.head.append(style);
 }
-function applyLook(root, look) {
-  let doc = root.ownerDocument;
-  if (injectUiStyles(doc), root.classList.add("knobs-ui"), look.preset)
-    injectUiPreset(doc, look.preset), root.dataset.preset = look.preset.name;
-  if (look.theme)
-    root.dataset.theme = look.theme;
-  syncFrame(root);
+function applyLook2(root, look) {
+  injectUiStyles(root.ownerDocument), root.classList.add("knobs-root", "knobs-ui"), applyLook(root, resolveLook(look)), syncFrame(root);
 }
 function syncFrame(root) {
   if (!root.isConnected)
@@ -12049,7 +12130,6 @@ function syncFrame(root) {
     delete root.dataset.frame;
 }
 var lookDefaults = { current: {} };
-var reducedMotion4 = (win) => win?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? !1;
 function frameLoop(win, step) {
   let raf = 0, last = 0, tick = (now) => {
     let dt = last ? Math.min(0.064, (now - last) / 1000) : 0.016666666666666666;
@@ -12081,7 +12161,14 @@ var svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="tru
 };
 
 // src/ui/readout-model.ts
-var SERIES = ["#5ac8fa", "#ff9f0a", "#bf5af2", "#30d158", "#ff6482"];
+var SERIES_TOKENS = [
+  "--_k-series-1",
+  "--_k-series-2",
+  "--_k-series-3",
+  "--_k-series-4",
+  "--_k-series-5",
+  "--_k-series-6"
+], SERIES = ["#5ac8fa", "#ff9f0a", "#bf5af2", "#30d158", "#ff6482", "#64d2ff"];
 function formatNumber(v, decimals) {
   if (!Number.isFinite(v))
     return "—";
@@ -12401,20 +12488,21 @@ function paletteOf(el, now = performance.now()) {
   let hit = palettes.get(el);
   if (hit && now - hit.at < 8)
     return hit.p;
-  let s = getComputedStyle(el), c = (name, fallback) => parseCssColor(s.getPropertyValue(name), fallback), p = {
-    accent: c("--ku-accent", [1, 1, 1, 1]),
-    text: c("--ku-text", [1, 1, 1, 0.92]),
-    label: c("--ku-label", [1, 1, 1, 0.64]),
-    dim: c("--ku-dim", [1, 1, 1, 0.42]),
-    line: c("--ku-line", [1, 1, 1, 0.1]),
-    surfaceHi: c("--ku-surface-hi", [1, 1, 1, 0.11]),
-    warn: c("--ku-warn", [0.96, 0.68, 0.2, 1]),
-    critical: c("--ku-critical", [1, 0.37, 0.34, 1]),
-    radius: Number.parseFloat(s.getPropertyValue("--ku-radius")) || 0
+  let s = getComputedStyle(el), c = (name, fallback) => tokenColor(s, name, fallback), p = {
+    accent: c("--kv-accent", [1, 1, 1, 1]),
+    text: c("--kv-fg", [1, 1, 1, 0.92]),
+    label: c("--kv-fg-2", [1, 1, 1, 0.64]),
+    dim: c("--kv-fg-3", [1, 1, 1, 0.42]),
+    line: c("--kv-border", [1, 1, 1, 0.1]),
+    surfaceHi: c("--kv-fill-selected", [1, 1, 1, 0.11]),
+    warn: c("--_k-warn", [0.96, 0.68, 0.2, 1]),
+    critical: c("--_k-danger", [1, 0.37, 0.34, 1]),
+    series: SERIES_TOKENS.map((name, i) => c(name, parseCssColor(SERIES[i % SERIES.length]))),
+    radius: Number.parseFloat(s.getPropertyValue("--kv-radius")) || 0
   };
   return palettes.set(el, { at: now, p }), p;
 }
-var reduced2 = (doc) => reducedMotion4(doc.defaultView);
+var reduced2 = (doc) => reducedMotion(doc.defaultView);
 function make2(doc) {
   return (tag, cls, text) => {
     let node = doc.createElement(tag);
@@ -12605,7 +12693,7 @@ function valueBox(doc, grew) {
   };
 }
 function createWatch(env) {
-  let root = make2(env.doc)("span", "knobs-ui knobs-rd knobs-rd-watch"), field = env.field, value = valueBox(env.doc);
+  let root = make2(env.doc)("span", "knobs-root knobs-ui knobs-rd knobs-rd-watch"), field = env.field, value = valueBox(env.doc);
   root.append(value.box);
   let seq = -1, text = throttle(() => field.hz ?? 4), rt = runtime(env, root, (now) => {
     if (env.state.seq === seq)
@@ -12632,7 +12720,7 @@ function createWatch(env) {
   };
 }
 function createSparkline(env) {
-  let root = make2(env.doc)("span", "knobs-ui knobs-rd knobs-rd-spark"), field = env.field, canvas = plot(env.doc, "knobs-rd-plot", () => {
+  let root = make2(env.doc)("span", "knobs-root knobs-ui knobs-rd knobs-rd-spark"), field = env.field, canvas = plot(env.doc, "knobs-rd-plot", () => {
     dirty = !0, rt.request();
   }), value = valueBox(env.doc);
   root.append(canvas.canvas, value.box);
@@ -12698,7 +12786,7 @@ function createSparkline(env) {
   };
 }
 function createGraph(env) {
-  let el = make2(env.doc), root = el("div", "knobs-ui knobs-rd knobs-rd-graph knobs-rd-block"), field = env.field, head = el("div", "knobs-rd-head");
+  let el = make2(env.doc), root = el("div", "knobs-root knobs-ui knobs-rd knobs-rd-graph knobs-rd-block"), field = env.field, head = el("div", "knobs-rd-head");
   if (env.label)
     head.append(env.label);
   let legend = el("span", "knobs-rd-legend");
@@ -12724,7 +12812,7 @@ function createGraph(env) {
   build();
   let range = new EasedRange, text = throttle(() => field.hz ?? 4), seq = -1, dirty = !0, hoverX = -1, hoverAt = -1, ops = [], ticks = { top: "", bottom: "" }, shownSeq = -1, rings = () => field.series.map((s) => env.state.series.get(s.id)), colorOf = (p, i) => {
     let s = field.series[i];
-    return s.color ? parseCssColor(s.color, p.accent) : i === 0 ? p.accent : parseCssColor(SERIES[(i - 1) % SERIES.length]);
+    return s.color ? parseCssColor(s.color, p.accent) : i === 0 ? p.accent : p.series[(i - 1) % p.series.length];
   }, rt = runtime(env, root, (now, dt) => {
     let rs = rings(), fresh = env.state.seq !== seq;
     seq = env.state.seq;
@@ -12874,7 +12962,7 @@ function createGraph(env) {
   };
 }
 function createMeter(env) {
-  let root = make2(env.doc)("span", "knobs-ui knobs-rd knobs-rd-meter"), field = env.field, canvas = plot(env.doc, "knobs-rd-plot", () => {
+  let root = make2(env.doc)("span", "knobs-root knobs-ui knobs-rd knobs-rd-meter"), field = env.field, canvas = plot(env.doc, "knobs-rd-plot", () => {
     dirty = !0, rt.request();
   }), value = valueBox(env.doc);
   root.append(canvas.canvas, value.box), root.setAttribute("role", "meter");
@@ -12952,7 +13040,7 @@ function createMeter(env) {
 }
 var isNumeric = (v) => typeof v === "number" || typeof v === "string" && /^[-+]?[\d.,]+\s*\S{0,3}$/.test(v);
 function createTable(env) {
-  let el = make2(env.doc), root = el("div", "knobs-ui knobs-rd knobs-rd-table knobs-rd-block"), field = env.field, grid = el("div", "knobs-rd-grid");
+  let el = make2(env.doc), root = el("div", "knobs-root knobs-ui knobs-rd knobs-rd-table knobs-rd-block"), field = env.field, grid = el("div", "knobs-rd-grid");
   grid.tabIndex = -1, grid.setAttribute("role", "table"), root.append(grid);
   let text = throttle(() => field.hz ?? 4), seq = -1, cols = 0, head, body = [], grows = [], header = (n) => {
     let names = field.columns ?? [], key = `${n}\x00${names.join("\x00")}`;
@@ -13061,7 +13149,7 @@ function logTime(t) {
 }
 var levelColor2 = (p, level) => level === "error" ? p.critical : level === "warn" ? p.warn : level === "debug" ? p.dim : p.text;
 function createLog(env) {
-  let doc = env.doc, el = make2(doc), root = el("div", "knobs-ui knobs-rd knobs-rd-log knobs-rd-block"), field = env.field, head = el("div", "knobs-rd-head");
+  let doc = env.doc, el = make2(doc), root = el("div", "knobs-root knobs-ui knobs-rd knobs-rd-log knobs-rd-block"), field = env.field, head = el("div", "knobs-rd-head");
   if (env.label)
     head.append(env.label);
   let chips = el("span", "knobs-rd-chips");
@@ -13357,11 +13445,11 @@ function layerRoot(doc) {
 }
 function layerElement(doc, cls, look) {
   let el = doc.createElement("div");
-  return el.className = cls, layerRoot(doc).append(el), applyLook(el, lookOf(look)), el;
+  return el.className = cls, layerRoot(doc).append(el), applyLook2(el, lookOf(look)), el;
 }
 function presence(el, o = {}) {
   let win = el.ownerDocument.defaultView, spring = new Spring(0, 1, 1, 0.002), dx = o.dx ?? 0, dy = o.dy ?? 0, gone = [], shown = !1, render = () => {
-    let reduced = reducedMotion4(win), p = spring.x, q = Math.max(0, Math.min(1, p)), scale = reduced ? 1 : (o.scale ?? 0.94) + (1 - (o.scale ?? 0.94)) * p, blur = reduced ? 0 : (1 - q) * (o.blur ?? 6), t = reduced ? 0 : 1 - p;
+    let reduced = reducedMotion(win), p = spring.x, q = Math.max(0, Math.min(1, p)), scale = reduced ? 1 : (o.scale ?? 0.94) + (1 - (o.scale ?? 0.94)) * p, blur = reduced ? 0 : (1 - q) * (o.blur ?? 6), t = reduced ? 0 : 1 - p;
     el.style.opacity = q.toFixed(3), el.style.transform = p === 1 ? "" : `translate(${(dx * t).toFixed(2)}px,${(dy * t).toFixed(2)}px) scale(${scale.toFixed(4)})`, el.style.filter = blur > 0.05 ? `blur(${blur.toFixed(2)}px)` : "", el.style.pointerEvents = shown ? "" : "none", o.onFrame?.(p);
   }, loop = frameLoop(win, (dt) => {
     if (spring.step(dt), render(), !spring.resting)
@@ -13375,8 +13463,8 @@ function presence(el, o = {}) {
     }
     return !1;
   }), tune = (seconds, zeta) => {
-    let reduced = reducedMotion4(win);
-    spring.omega = 2 * Math.PI / (reduced ? 0.16 : seconds), spring.zeta = reduced ? 1 : zeta;
+    let reduced = reducedMotion(win);
+    spring.omega = 2 * Math.PI / (reduced ? FADE.duration : seconds), spring.zeta = reduced ? 1 : zeta;
   };
   return render(), {
     show() {
@@ -13415,7 +13503,7 @@ var regions = /* @__PURE__ */ new WeakMap;
 function toast(message, options = {}) {
   let doc = options.within?.ownerDocument ?? options.doc ?? document, win = doc.defaultView, key = options.within ?? doc, r = regions.get(key);
   if (!r || !r.el.isConnected) {
-    let el = options.within ? Object.assign(doc.createElement("div"), { className: "knobs-ui knobs-toast" }) : layerElement(doc, "knobs-layer knobs-toast", options.look);
+    let el = options.within ? Object.assign(doc.createElement("div"), { className: "knobs-root knobs-ui knobs-toast" }) : layerElement(doc, "knobs-layer knobs-toast", options.look);
     if (options.within)
       injectUiStyles(doc), options.within.append(el);
     el.setAttribute("role", "status"), el.setAttribute("aria-live", "polite");
@@ -13552,7 +13640,7 @@ function createTabStrip(doc, choose) {
 }
 
 // src/panel/tab-transition.ts
-var LAYOUT = springMotion2({ duration: 0.3, bounce: 0 }), IN = springMotion2({ duration: 0.2, bounce: 0 }), OUT = springMotion2({ duration: 0.14, bounce: 0 }), STAGGER = 18, STAGGER_MAX = 6, RISE = 6;
+var LAYOUT = springMotion2(SPRINGS2.default), IN = springMotion2({ duration: 0.2, bounce: 0 }), OUT = springMotion2({ duration: 0.14, bounce: 0 }), STAGGER = 18, STAGGER_MAX = 6, RISE = 6;
 function tabTransition(body, root, wake) {
   let win = body.ownerDocument.defaultView, reduced = win.matchMedia("(prefers-reduced-motion: reduce)"), leavers = /* @__PURE__ */ new Map, arrivals = /* @__PURE__ */ new Map, moves = /* @__PURE__ */ new Map, heights = /* @__PURE__ */ new Map, wanted = /* @__PURE__ */ new Map, raf = 0, then = 0, held = 0, spring = (x, m, eps) => new Spring(x, m.omega, m.zeta, eps), opacityOf = (node) => Number(win.getComputedStyle(node).opacity) || 1, outermost = (nodes) => nodes.filter((node) => !nodes.some((other) => other !== node && other.contains(node))), showing = (node) => !node.hidden && !leavers.has(node), units = () => {
     let out = [];
@@ -13887,7 +13975,7 @@ function createLens(o) {
   }, all = (r) => [r, r, r, r], panelBox = (inset) => {
     let r = root.getBoundingClientRect();
     if (o.page) {
-      let top = Math.max(r.top, o.header?.getBoundingClientRect().bottom ?? 0), bottom = Math.min(r.bottom, win?.innerHeight ?? r.bottom), pad = 8 + inset, radius = parseFloat(getComputedStyle(root).getPropertyValue("--kt-panel-radius")) || 0;
+      let top = Math.max(r.top, o.header?.getBoundingClientRect().bottom ?? 0), bottom = Math.min(r.bottom, win?.innerHeight ?? r.bottom), pad = 8 + inset, radius = parseFloat(getComputedStyle(root).getPropertyValue("--kt-radius-panel")) || 0;
       return {
         x: r.left + pad,
         y: top + pad,
@@ -14192,13 +14280,15 @@ function morphFromChip(chip, root, wake, restored) {
   }, ensureShape = () => {
     if (shape)
       return shape;
-    let cs = getComputedStyle(root), r = parseFloat(cs.getPropertyValue("--kv-panel-radius"));
+    let cs = getComputedStyle(root), r = parseFloat(cs.getPropertyValue("--kv-radius-panel"));
     if (Number.isFinite(r))
       panelRadius = r;
-    shape = doc.createElement("div"), shape.className = "knobs-morph", shape.setAttribute("aria-hidden", "true");
-    for (let t of ["bg", "line", "rim", "edge", "glass", "glass-tone"])
+    shape = doc.createElement("div"), shape.className = "knobs-root knobs-morph", shape.setAttribute("aria-hidden", "true");
+    for (let t of ["bg", "border", "rim", "border-subtle", "glass", "glass-tone"])
       shape.style.setProperty(`--kv-${t}`, cs.getPropertyValue(`--kv-${t}`));
-    return shape.style.setProperty("--k-shadow", cs.getPropertyValue("--k-shadow")), root.before(shape), root.style.animation = "none", root.dataset.morphing = "", chip.dataset.morph = "", shape;
+    for (let t of ["--_k-shadow-overlay", "--_k-shadow-k", "--_k-light"])
+      shape.style.setProperty(t, cs.getPropertyValue(t));
+    return shape.style.colorScheme = cs.colorScheme, root.before(shape), root.style.animation = "none", root.dataset.morphing = "", chip.dataset.morph = "", shape;
   }, clear = () => {
     shape?.remove(), shape = void 0, delete root.dataset.morphing;
     for (let name of [
@@ -14388,7 +14478,7 @@ function positionPanel(panel, header, anchor, id, storage) {
 }
 
 // src/panel/presence.ts
-var EXIT = springMotion2({ duration: 0.25, bounce: 0 }), ENTER = springMotion2({ duration: 0.32, bounce: 0 }), FADE = springMotion2({ duration: 0.18, bounce: 0 }), BLUR2 = 4, SCALE = 0.96, LEAD2 = 0.4, FOLDED = [
+var EXIT = springMotion2(SPRINGS2.snappy), ENTER = springMotion2(SPRINGS2.default), FADE2 = springMotion2(FADE), BLUR2 = 4, SCALE = 0.96, LEAD2 = 0.4, FOLDED = [
   "height",
   "min-height",
   "flex",
@@ -14469,7 +14559,7 @@ function createPresence(root, options) {
         raf = 0, spring.snap(next ? 1 : 0), settle();
         return;
       }
-      let m = reduced ? FADE : next ? ENTER : EXIT;
+      let m = reduced ? FADE2 : next ? ENTER : EXIT;
       if (spring.omega = m.omega, spring.zeta = m.zeta, spring.set(next ? 1 : 0), root.dataset.presence = next ? "in" : "out", apply(spring.x), !raf)
         last = performance.now(), raf = win.requestAnimationFrame(tick);
       options.wake();
@@ -14478,7 +14568,7 @@ function createPresence(root, options) {
       if (!root.dataset.presence || root.hidden)
         return;
       let look = presenceLook(spring.x, inline, reduced), r = root.getBoundingClientRect();
-      radius ??= parseFloat(win.getComputedStyle(root).getPropertyValue("--kv-panel-radius")) || 12;
+      radius ??= parseFloat(win.getComputedStyle(root).getPropertyValue("--kv-radius-panel")) || 12;
       let s = look.scale, ox = r.left + r.width / 2, oy = inline ? r.top : r.top + r.height / 2;
       return {
         x: ox + (r.left - ox) * s,
@@ -14527,10 +14617,9 @@ function buildPanel(controls, host, options) {
       node.textContent = text;
     return node;
   }, inline = Boolean(options.inline), page = options.page, close = options.close ?? options.onClose, root = el(page ? "div" : "aside");
-  root.className = page ? "knobs-panel knobs-inline knobs-page" : inline ? "knobs-panel knobs-inline" : "knobs-panel", root.dataset.controls = controls.id;
+  root.className = page ? "knobs-root knobs-panel knobs-inline knobs-page" : inline ? "knobs-root knobs-panel knobs-inline" : "knobs-root knobs-panel", root.dataset.controls = controls.id;
   let untrackHas = trackHas(root);
-  if (root.dataset.theme = options.theme ?? controls.theme, root.dataset.density = options.density ?? controls.density, options.preset)
-    injectPreset(doc, options.preset), root.dataset.preset = options.preset.name;
+  applyLook(root, panelLook(controls, options)), root.dataset.density = options.density ?? controls.density;
   let titleText = options.title === void 0 ? controls.id : options.title, toggleKey = options.toggleKey !== void 0 ? options.toggleKey : page ? !1 : controls.toggleKey;
   if (options.restored)
     root.dataset.restored = "";
@@ -17387,7 +17476,14 @@ function buildPanel(controls, host, options) {
   }, rowsObserver = new MutationObserver(syncRows);
   rowsObserver.observe(root, {
     attributes: !0,
-    attributeFilter: ["style", "class", "data-theme", "data-preset", "data-density"]
+    attributeFilter: [
+      "style",
+      "class",
+      "data-appearance",
+      "data-knobs-theme",
+      "data-preset",
+      "data-density"
+    ]
   }), syncRows(), layoutRows(!1);
   let unsubscribe = controls.subscribe(update), unlisten = readoutPort?.listen((key) => readouts.get(key)?.notify()), gpuObserver = new MutationObserver(() => {
     for (let r of readouts.values())
@@ -17486,7 +17582,7 @@ function buildPanel(controls, host, options) {
   });
   modeObserver.observe(doc.documentElement, {
     attributes: !0,
-    attributeFilter: ["data-knobs-renderer", "data-theme", "style"]
+    attributeFilter: ["data-knobs-renderer", "data-theme", "data-appearance", "class", "style"]
   });
   let panel = {
     element: root,