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

package/dist/ui-solid.js

@@ -92,6 +92,30 @@ function springCss(value) {
   return { easing, duration: ms };
 }
 
+// src/core/motion.ts
+var SPRINGS, FADE, CLOSE, MOTION, reducedMotion = (win) => win?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false, springLinear = (spring) => {
+  const { omega, zeta } = springMotion(spring);
+  return springEasing(omega, zeta);
+}, names, linear, SPRING_TOKEN, DEFAULT_LINEAR, motionCss;
+var init_motion = __esm(() => {
+  SPRINGS = {
+    instant: { duration: 0.1, bounce: 0 },
+    snappy: { duration: 0.25, bounce: 0 },
+    default: { duration: 0.3, bounce: 0 },
+    calm: { duration: 0.4, bounce: 0 },
+    smooth: { duration: 0.45, bounce: 0 }
+  };
+  FADE = { duration: 0.16, bounce: 0 };
+  CLOSE = { duration: 0.18, bounce: 0 };
+  MOTION = Object.fromEntries(Object.entries(SPRINGS).map(([name, spring]) => [name, springMotion(spring)]));
+  names = Object.keys(SPRINGS);
+  linear = Object.fromEntries(names.map((n) => [n, springLinear(SPRINGS[n])]));
+  SPRING_TOKEN = `${SPRINGS.default.duration} ${SPRINGS.default.bounce}`;
+  DEFAULT_LINEAR = linear.default;
+  motionCss = `:where(:root,:host){${names.map((n) => `--_k-motion-${n}:${linear[n].easing};--_k-motion-${n}-ms:${linear[n].ms}`).join(";")}}
+@media(prefers-reduced-motion:reduce){:where(:root,:host){${names.map((n) => `--_k-motion-${n}-ms:0`).join(";")}}}`;
+});
+
 // src/panel/rolling-css.ts
 var rolling_css_default = `.rn-root {
   display: inline-block;
@@ -195,11 +219,18 @@ var rolling_css_default = `.rn-root {
 function presetCss(preset) {
   if (!/^[\w-]+$/.test(preset.name))
     throw new Error(`Invalid preset name: ${preset.name}`);
-  const at = `.knobs-panel[data-preset="${preset.name}"]`;
-  const light = preset.light ? `:where(.knobs-panel)[data-preset="${preset.name}"][data-theme="light"],` + `:where([data-knobs-theme="light"]) ${at}:not([data-theme="dark"]),` + `:where(:root[data-theme="light"]) ${at}[data-theme="auto"]{${block(preset.light)}}` + `@media(prefers-color-scheme:light){:where(:root:not([data-theme="dark"])) ${at}[data-theme="auto"]{${block(preset.light)}}}` : "";
-  return `${at}{${block(preset.dark)}}${light}${(preset.css ?? "").replaceAll("&", at)}`;
+  const at = `.knobs-root[data-preset="${preset.name}"]`;
+  const light = preset.light ?? {};
+  const decls = Object.entries(preset.dark).map(([k, dark]) => {
+    const l = light[k];
+    return l === undefined || String(l) === String(dark) ? `${property(k)}:${dark}` : `${property(k)}:light-dark(${l},${dark})`;
+  });
+  for (const [k, l] of Object.entries(light))
+    if (!(k in preset.dark) && k !== "color-scheme")
+      decls.push(`${property(k)}:${l}`);
+  return `${at}{${decls.join(";")}}${(preset.css ?? "").replaceAll("&", at)}`;
 }
-var block = (tokens) => Object.entries(tokens).map(([k, v]) => `${k.startsWith("--") || k === "color-scheme" ? k : `--k-${k}`}:${v}`).join(";"), glide, problemsPreset;
+var property = (k) => k.startsWith("--") ? k : `--k-${k}`, glide, problemsPreset;
 var init_theme = __esm(() => {
   glide = /* @__PURE__ */ springCss({ duration: 0.185, bounce: 0.14 });
   problemsPreset = {
@@ -279,44 +310,166 @@ var init_theme = __esm(() => {
       "toggle-thumb": "#fff",
       rim: "transparent",
       "group-color": "rgba(60,60,67,.66)",
-      "group-divider": "rgba(0,0,0,.07)",
-      "color-scheme": "light"
+      "group-divider": "rgba(0,0,0,.07)"
     }
   };
 });
 
+// src/core/appearance.ts
+function resolveLook(options = {}, base) {
+  const t = options.theme;
+  const mode = typeof t === "string" ? MODES[t] : undefined;
+  const theme = typeof t === "object" ? t : base?.theme;
+  const preset = options.preset ?? base?.preset;
+  return {
+    ...theme ? { theme } : {},
+    appearance: options.appearance ?? mode ?? base?.appearance ?? "inherit",
+    ...preset ? { preset } : {}
+  };
+}
+function themeOf(el) {
+  const name = el.closest("[data-knobs-theme]")?.dataset.knobsTheme;
+  return name ? themes.get(name) : undefined;
+}
+function upsertStyle(doc, key, value, content) {
+  const existing = doc.querySelector(`style[${key}="${value}"]`);
+  if (existing) {
+    if (existing.textContent !== content)
+      existing.textContent = content;
+    return;
+  }
+  const style = doc.createElement("style");
+  style.setAttribute(key, value);
+  style.textContent = content;
+  doc.head.append(style);
+}
+function injectTheme(doc, theme) {
+  themes.set(theme.name, theme);
+  upsertStyle(doc, "data-knobs-theme-css", theme.name, theme.css({ selector: themeSelector(theme.name) }));
+}
+function injectPreset(doc, preset) {
+  presets.set(preset.name, preset);
+  upsertStyle(doc, "data-knobs-preset", preset.name, presetCss(preset));
+}
+function applyLook(el, look) {
+  const doc = el.ownerDocument;
+  if (look.theme)
+    injectTheme(doc, look.theme);
+  if (look.preset)
+    injectPreset(doc, look.preset);
+  setAttr(el, "data-knobs-theme", look.theme?.name);
+  setAttr(el, "data-preset", look.preset?.name);
+  setAttr(el, "data-appearance", look.appearance === "inherit" ? undefined : look.appearance);
+  if (look.appearance === "inherit")
+    followPage(el);
+  else
+    clearInherited(el);
+}
+function resolveInherited(el) {
+  const parent = el.parentElement;
+  const win = el.ownerDocument.defaultView;
+  if (!parent || !win || el.hasAttribute("data-appearance"))
+    return;
+  if (parent.closest(".knobs-root"))
+    return clearInherited(el);
+  const scheme = win.getComputedStyle(parent).colorScheme.trim();
+  const dark = /\bdark\b/.test(scheme);
+  const light = /\blight\b/.test(scheme);
+  if (!dark && !light)
+    return clearInherited(el);
+  const isLight = dark && light ? win.matchMedia?.("(prefers-color-scheme: light)").matches ?? false : light;
+  el.style.setProperty("color-scheme", "inherit");
+  el.style.setProperty("--_k-light", isLight ? "1" : "0");
+}
+function followPage(el) {
+  const doc = el.ownerDocument;
+  const win = doc.defaultView;
+  if (!win)
+    return;
+  const run = () => resolveInherited(el);
+  if (el.isConnected)
+    run();
+  queueMicrotask(run);
+  win.requestAnimationFrame?.(run);
+  if (watched.has(doc))
+    return;
+  watched.add(doc);
+  const all = () => {
+    for (const root of doc.querySelectorAll(".knobs-root:not([data-appearance])"))
+      resolveInherited(root);
+  };
+  const observer = new MutationObserver(all);
+  const attributeFilter = ["class", "data-theme", "data-appearance"];
+  observer.observe(doc.documentElement, { attributes: true, attributeFilter });
+  if (doc.body)
+    observer.observe(doc.body, { attributes: true, attributeFilter });
+  win.matchMedia?.("(prefers-color-scheme: light)").addEventListener?.("change", all);
+}
+function lookAt(el) {
+  const win = el.ownerDocument.defaultView;
+  const light = win?.getComputedStyle(el).getPropertyValue("--_k-light").trim() === "1";
+  const theme = themeOf(el);
+  const name = el.closest("[data-preset]")?.dataset.preset;
+  const preset = name ? presets.get(name) : undefined;
+  return {
+    ...theme ? { theme } : {},
+    appearance: light ? "light" : "dark",
+    ...preset ? { preset } : {}
+  };
+}
+var MODES, themes, themeSelector = (name) => `:where(.knobs-root)[data-knobs-theme="${name}"]`, presets, setAttr = (el, name, value) => {
+  if (value === undefined)
+    el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value)
+    el.setAttribute(name, value);
+}, clearInherited = (el) => {
+  el.style.removeProperty("color-scheme");
+  el.style.removeProperty("--_k-light");
+}, watched;
+var init_appearance = __esm(() => {
+  init_theme();
+  MODES = {
+    dark: "dark",
+    light: "light",
+    auto: "system"
+  };
+  themes = new Map;
+  presets = new Map;
+  watched = new WeakSet;
+});
+
 // src/ui/activity-css.ts
 var open, activityCss;
 var init_activity_css = __esm(() => {
-  open = springEasing(2 * Math.PI / 0.22, 1);
+  init_motion();
+  open = springLinear(SPRINGS.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)}
@@ -328,7 +481,7 @@ var init_activity_css = __esm(() => {
 /* 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}
@@ -340,48 +493,48 @@ var init_activity_css = __esm(() => {
 .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}
@@ -389,49 +542,49 @@ 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-font-size)/1.35 var(--_k-font);color:var(--_k-fg);letter-spacing:normal;text-align:left}
 :where(.knobs-ui) :is(.knobs-cmp-mode,.knobs-cmp-toggle){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;margin:0;padding:0;outline:none;box-shadow:none}
 .knobs-cmp-bar{flex:none;display:flex;align-items:center;gap:2px;height:24px;padding:0 2px}
 .knobs-cmp-modes{display:flex;align-items:center;gap:2px}
-.knobs-ui .knobs-cmp-mode,.knobs-ui .knobs-cmp-toggle{height:22px;padding:0 7px;border-radius:max(0px,calc(var(--ku-radius) - 2px));color:var(--ku-dim);cursor:pointer;white-space:nowrap;
+.knobs-ui .knobs-cmp-mode,.knobs-ui .knobs-cmp-toggle{height:22px;padding:0 7px;border-radius:max(0px,calc(var(--_k-radius) - 2px));color:var(--_k-fg-3);cursor:pointer;white-space:nowrap;
   transition:color .15s,background .15s}
-.knobs-ui .knobs-cmp-mode:is(:hover,:focus-visible),.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--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-ui .knobs-cmp-mode:is(:hover,:focus-visible),.knobs-ui .knobs-cmp-toggle:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--_ku-wash)}
+.knobs-ui .knobs-cmp-mode[aria-checked="true"],.knobs-ui .knobs-cmp-toggle[aria-pressed="true"]{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
 .knobs-cmp-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. */
@@ -443,37 +596,37 @@ var compareCss = `
 .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)}
+.knobs-cmp-label,.knobs-cmp-zoom{background:color-mix(in srgb,var(--_k-bg) 52%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);
+  box-shadow:inset 0 0 0 .5px var(--_k-border),inset 0 1px 0 var(--_k-rim),0 2px 10px rgba(0,0,0,calc(.18 * var(--_k-shadow-k,1)))}
+.knobs-cmp-label{position:absolute;left:0;top:0;padding:1px 7px;border-radius:999px;font-size:var(--_k-text-meta);line-height:16px;color:var(--_k-fg-2);white-space:nowrap;pointer-events:none;will-change:transform;transition:color .15s}
+.knobs-cmp-label[data-lit]{color:var(--_k-fg)}
+.knobs-cmp-label[data-dim]{color:var(--_k-fg-3)}
 /* The wipe: a hairline down the line with a grip at its middle; a wider strip takes the hand and
    the keys (a slider). It fades with the mode. */
 .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-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)}
+.knobs-cmp-handle:focus-visible::after,.knobs-compare[data-keyboard] .knobs-cmp-handle:focus::after{box-shadow:0 1px 3px rgba(0,0,0,.35),0 0 0 3px color-mix(in srgb,var(--_k-accent) 40%,transparent)}
 /* 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(--_k-fg);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums;font-feature-settings:"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}
+  height:20px;padding:0 8px;border-radius:999px;background:transparent;color:var(--_k-fg-2);cursor:pointer;transition:color .15s,background .15s}
+:where(.knobs-ui) .knobs-cmp-zoom-reset:is(:hover,:focus-visible){color:var(--_k-fg);background:color-mix(in srgb,var(--_k-fg) 12%,transparent)}
+.knobs-cmp-note{position:absolute;left:50%;top:50%;translate:-50% -50%;color:var(--_k-fg-3);font-size:var(--_k-text-meta);pointer-events:none}
 .knobs-cmp-note:empty{display:none}
 .knobs-cmp-strip-host{flex:none;height:60px;min-height:0}
 .knobs-cmp-timeline-host{flex:none;height:56px;min-height:0}
 /* 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-font-size)/1.35 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}}
 `;
@@ -482,135 +635,136 @@ var compareCss = `
 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, pickerCss;
 var init_picker_css = __esm(() => {
-  snappy = springEasing(2 * Math.PI / 0.25, 1);
+  init_motion();
+  snappy = springLinear(SPRINGS.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-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}
@@ -622,7 +776,7 @@ var init_picker_css = __esm(() => {
 .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}}
 `;
 });
@@ -633,25 +787,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}
@@ -659,16 +813,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}
@@ -677,36 +831,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. */
@@ -716,6 +870,1515 @@ var readoutCss = `
 @media(prefers-reduced-motion:reduce){.knobs-rd :where(*){transition:none!important}}
 `;
 
+// src/tokens/color.ts
+function linearToOklch([r, g, b, a]) {
+  const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+  const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+  const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+  const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+  const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+  const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+  const c = Math.hypot(A, B);
+  const h = c < 0.0000001 ? 0 : (Math.atan2(B, A) * 180 / Math.PI + 360) % 360;
+  return { l: L, c, h, alpha: a };
+}
+function oklchToLinear({ l: L, c, h, alpha = 1 }) {
+  const hr = h * Math.PI / 180;
+  const A = c * Math.cos(hr);
+  const B = c * Math.sin(hr);
+  const l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+  const m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+  const s = (L - 0.0894841775 * A - 1.291485548 * B) ** 3;
+  return [
+    4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+    -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+    -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+    alpha
+  ];
+}
+function oklchToLinearInGamut(color) {
+  let rgb = oklchToLinear(color);
+  if (inGamut(rgb))
+    return clampRgba(rgb);
+  let lo = 0;
+  let hi = color.c;
+  for (let i = 0;i < 24; i++) {
+    const mid = (lo + hi) / 2;
+    rgb = oklchToLinear({ ...color, c: mid });
+    if (inGamut(rgb))
+      lo = mid;
+    else
+      hi = mid;
+  }
+  return clampRgba(oklchToLinear({ ...color, c: lo }));
+}
+function parseColor(input) {
+  const s = input.trim().toLowerCase();
+  if (s === "transparent")
+    return [0, 0, 0, 0];
+  if (s.startsWith("#")) {
+    let hex = s.slice(1);
+    if (hex.length === 3 || hex.length === 4)
+      hex = [...hex].map((ch) => ch + ch).join("");
+    if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/.test(hex))
+      throw new Error(`Invalid colour: ${input}`);
+    const n = (i) => Number.parseInt(hex.slice(i, i + 2), 16) / 255;
+    return [toLinear(n(0)), toLinear(n(2)), toLinear(n(4)), hex.length === 8 ? n(6) : 1];
+  }
+  const fn = /^(oklch|rgba?)\(([^)]*)\)$/.exec(s);
+  if (!fn)
+    throw new Error(`Unsupported colour: ${input}`);
+  const parts = fn[2].split(/[\s,/]+/).filter(Boolean);
+  const num = (p, scale) => p === undefined ? 1 : p.endsWith("%") ? Number.parseFloat(p) / 100 : Number.parseFloat(p) / scale;
+  if (fn[1] === "oklch") {
+    const l = num(parts[0], 1);
+    return oklchToLinearInGamut({
+      l,
+      c: Number.parseFloat(parts[1]),
+      h: Number.parseFloat(parts[2]),
+      alpha: num(parts[3], 1)
+    });
+  }
+  return [
+    toLinear(num(parts[0], 255)),
+    toLinear(num(parts[1], 255)),
+    toLinear(num(parts[2], 255)),
+    num(parts[3], 1)
+  ];
+}
+function formatHex([r, g, b, a]) {
+  const rgb = `#${byte(toGamma(r))}${byte(toGamma(g))}${byte(toGamma(b))}`;
+  return a >= 0.9995 ? rgb : rgb + byte(a);
+}
+function withAlpha(input, alpha) {
+  const [r, g, b, a] = parseColor(input);
+  return formatHex([r, g, b, a * alpha]);
+}
+function over(top, bottom) {
+  const t = parseColor(top);
+  const b = parseColor(bottom);
+  const a = t[3];
+  const mix = (i) => toLinear(toGamma(t[i]) * a + toGamma(b[i]) * (1 - a));
+  return formatHex([mix(0), mix(1), mix(2), 1]);
+}
+function apcaY(input) {
+  const [r, g, b] = parseColor(input).map(toGamma);
+  return 0.2126729 * r ** 2.4 + 0.7151522 * g ** 2.4 + 0.072175 * b ** 2.4;
+}
+function apca(text, background) {
+  const bgOpaque = parseColor(background)[3] < 1 ? over(background, "#000") : background;
+  const fg = parseColor(text)[3] < 1 ? over(text, bgOpaque) : text;
+  const soft = (y) => y > 0.022 ? y : y + (0.022 - y) ** 1.414;
+  const yt = soft(apcaY(fg));
+  const yb = soft(apcaY(bgOpaque));
+  if (Math.abs(yb - yt) < 0.0005)
+    return 0;
+  if (yb > yt) {
+    const sapc = (yb ** 0.56 - yt ** 0.57) * 1.14;
+    return sapc < 0.1 ? 0 : (sapc - 0.027) * 100;
+  }
+  const sapc = (yb ** 0.65 - yt ** 0.62) * 1.14;
+  return sapc > -0.1 ? 0 : -(sapc + 0.027) * 100;
+}
+var clamp01 = (x) => Math.min(1, Math.max(0, x)), toLinear = (c) => c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4, toGamma = (c) => c <= 0.0031308 ? 12.92 * c : 1.055 * c ** (1 / 2.4) - 0.055, inGamut = ([r, g, b]) => [r, g, b].every((x) => x >= -0.00001 && x <= 1 + 0.00001), clampRgba = ([r, g, b, a]) => [clamp01(r), clamp01(g), clamp01(b), clamp01(a)], toOklch = (input) => linearToOklch(parseColor(input)), byte = (c) => Math.round(clamp01(c) * 255).toString(16).padStart(2, "0"), oklchToHex = (color) => formatHex(oklchToLinearInGamut(color)), normalize = (input) => formatHex(parseColor(input));
+
+// src/tokens/schema.ts
+var theme, css = (s) => ({ css: s }), value = (s) => ({ value: s }), alpha = (pct, of = "var(--k-fg)") => `color-mix(in oklch,${of} calc(${pct}% * var(--k-contrast)),transparent)`, TOKENS, TOKEN_BY_NAME, cssName = (t) => `${t.tier === "private" ? "--_k-" : "--k-"}${t.name}`, PROPERTY_TO_NAME, tokenForProperty = (property) => PROPERTY_TO_NAME.get(property), DEPRECATED;
+var init_schema = __esm(() => {
+  theme = { from: "theme" };
+  TOKENS = [
+    {
+      name: "accent",
+      tier: "input",
+      type: "color",
+      group: "Accent",
+      source: theme,
+      doc: "The one accent: primary actions, handles, focus. Hover, soft and selection derive from it in CSS.",
+      deprecated: ["--ku-accent"]
+    },
+    {
+      name: "contrast",
+      tier: "input",
+      type: "number",
+      group: "Inputs",
+      source: theme,
+      doc: "Contrast multiplier for fills and alpha borders (1 = default; the theme's 0–100 dial maps 50 → 1)."
+    },
+    {
+      name: "radius",
+      tier: "input",
+      type: "length",
+      group: "Shape",
+      source: theme,
+      doc: "Control corner radius. 0 squares everything, including capsules. Scales with density.",
+      deprecated: ["--ku-radius"],
+      resolve: "round(calc($ * (1 + (var(--_k-density) - 1) * 1.5)),2px)"
+    },
+    {
+      name: "density",
+      tier: "input",
+      type: "number",
+      group: "Size",
+      source: theme,
+      doc: "Size multiplier: compact .875, default 1, comfortable 1.1875."
+    },
+    {
+      name: "font",
+      tier: "input",
+      type: "font",
+      group: "Type",
+      source: theme,
+      doc: "UI font stack.",
+      deprecated: ["--ku-font"]
+    },
+    {
+      name: "mono",
+      tier: "input",
+      type: "font",
+      group: "Type",
+      source: theme,
+      doc: "Monospace font stack.",
+      deprecated: ["--ku-mono"]
+    },
+    {
+      name: "bg-page",
+      tier: "semantic",
+      type: "color",
+      group: "Surfaces",
+      source: theme,
+      doc: "The page behind panels; workspace backdrops.",
+      deprecated: ["--k-page", "--ku-page"]
+    },
+    {
+      name: "bg-inset",
+      tier: "semantic",
+      type: "color",
+      group: "Surfaces",
+      source: theme,
+      doc: "Wells sunk into a panel: tracks, inputs, segmented backgrounds."
+    },
+    {
+      name: "bg",
+      tier: "semantic",
+      type: "color",
+      group: "Surfaces",
+      source: theme,
+      doc: "The panel surface.",
+      deprecated: ["--ku-bg"]
+    },
+    {
+      name: "bg-raised",
+      tier: "semantic",
+      type: "color",
+      group: "Surfaces",
+      source: theme,
+      doc: "Raised within a panel: the active segment, cards on a panel."
+    },
+    {
+      name: "bg-overlay",
+      tier: "semantic",
+      type: "color",
+      group: "Surfaces",
+      source: theme,
+      doc: "Floating surfaces: menus, popovers, tooltips."
+    },
+    {
+      name: "fill",
+      tier: "semantic",
+      type: "color",
+      group: "Fills",
+      source: css(alpha(5.5)),
+      doc: "Resting fill for controls.",
+      deprecated: ["--k-surface", "--ku-surface"]
+    },
+    {
+      name: "fill-hover",
+      tier: "semantic",
+      type: "color",
+      group: "Fills",
+      source: css(alpha(8)),
+      doc: "Hovered fill."
+    },
+    {
+      name: "fill-selected",
+      tier: "semantic",
+      type: "color",
+      group: "Fills",
+      source: css(alpha(11)),
+      doc: "Pressed or selected fill.",
+      deprecated: ["--k-surface-hi", "--ku-surface-hi"]
+    },
+    {
+      name: "fg",
+      tier: "semantic",
+      type: "color",
+      group: "Foreground",
+      source: theme,
+      doc: "Primary text and icons (≥ Lc 90 on bg).",
+      deprecated: ["--k-text", "--ku-text"]
+    },
+    {
+      name: "fg-2",
+      tier: "semantic",
+      type: "color",
+      group: "Foreground",
+      source: theme,
+      doc: "Secondary text: labels (≥ Lc 75).",
+      deprecated: ["--k-label", "--ku-label"]
+    },
+    {
+      name: "fg-3",
+      tier: "semantic",
+      type: "color",
+      group: "Foreground",
+      source: theme,
+      doc: "Tertiary text: metadata, units, captions (≥ Lc 45).",
+      deprecated: ["--k-dim", "--ku-dim"]
+    },
+    {
+      name: "fg-4",
+      tier: "semantic",
+      type: "color",
+      group: "Foreground",
+      source: theme,
+      doc: "Placeholder and disabled text (≥ Lc 30)."
+    },
+    {
+      name: "border-subtle",
+      tier: "semantic",
+      type: "color",
+      group: "Borders",
+      source: css(alpha(6)),
+      doc: "Hairline edges and dividers (below Lc 15 by design).",
+      deprecated: ["--k-edge"]
+    },
+    {
+      name: "border",
+      tier: "semantic",
+      type: "color",
+      group: "Borders",
+      source: css(alpha(10)),
+      doc: "Default borders.",
+      deprecated: ["--k-line", "--ku-line"]
+    },
+    {
+      name: "border-strong",
+      tier: "semantic",
+      type: "color",
+      group: "Borders",
+      source: theme,
+      doc: "Interactive edges (≥ Lc 15; solid).",
+      deprecated: ["--k-line-hi", "--ku-line-hi"]
+    },
+    {
+      name: "accent-hover",
+      tier: "semantic",
+      type: "color",
+      group: "Accent",
+      source: css("color-mix(in oklch,var(--k-accent) 90%,var(--k-bg))"),
+      doc: "Hovered accent."
+    },
+    {
+      name: "accent-soft",
+      tier: "semantic",
+      type: "color",
+      group: "Accent",
+      source: css("color-mix(in oklch,var(--k-accent) 15%,transparent)"),
+      doc: "Accent tint behind accent content."
+    },
+    {
+      name: "accent-fg",
+      tier: "semantic",
+      type: "color",
+      group: "Accent",
+      source: theme,
+      doc: "Accent as text on bg (≥ Lc 60)."
+    },
+    {
+      name: "on-accent",
+      tier: "semantic",
+      type: "color",
+      group: "Accent",
+      source: theme,
+      doc: "Content placed on a solid accent."
+    },
+    { name: "ok", tier: "semantic", type: "color", group: "Status", source: theme, doc: "Success." },
+    {
+      name: "warn",
+      tier: "semantic",
+      type: "color",
+      group: "Status",
+      source: theme,
+      doc: "Warning.",
+      deprecated: ["--ku-warn"]
+    },
+    {
+      name: "danger",
+      tier: "semantic",
+      type: "color",
+      group: "Status",
+      source: theme,
+      doc: "Error, destructive. Put text on danger-soft rather than bare bg.",
+      deprecated: ["--k-critical", "--ku-critical"]
+    },
+    {
+      name: "info",
+      tier: "semantic",
+      type: "color",
+      group: "Status",
+      source: theme,
+      doc: "Informational."
+    },
+    {
+      name: "ok-soft",
+      tier: "semantic",
+      type: "color",
+      group: "Status",
+      source: css("color-mix(in oklch,var(--k-ok) 15%,transparent)"),
+      doc: "Success tint."
+    },
+    {
+      name: "warn-soft",
+      tier: "semantic",
+      type: "color",
+      group: "Status",
+      source: css("color-mix(in oklch,var(--k-warn) 15%,transparent)"),
+      doc: "Warning tint."
+    },
+    {
+      name: "danger-soft",
+      tier: "semantic",
+      type: "color",
+      group: "Status",
+      source: css("color-mix(in oklch,var(--k-danger) 15%,transparent)"),
+      doc: "Danger tint."
+    },
+    {
+      name: "info-soft",
+      tier: "semantic",
+      type: "color",
+      group: "Status",
+      source: css("color-mix(in oklch,var(--k-info) 15%,transparent)"),
+      doc: "Info tint."
+    },
+    {
+      name: "focus",
+      tier: "semantic",
+      type: "color",
+      group: "Interaction",
+      source: css("var(--k-accent)"),
+      doc: "Focus ring colour (drawn as a 2px bg gap, then 2px of focus)."
+    },
+    {
+      name: "selection",
+      tier: "semantic",
+      type: "color",
+      group: "Interaction",
+      source: css("color-mix(in oklch,var(--k-accent) 24%,transparent)"),
+      doc: "Selected rows and ranges.",
+      deprecated: ["--k-ui-select", "--ku-select"]
+    },
+    {
+      name: "scrim",
+      tier: "semantic",
+      type: "color",
+      group: "Interaction",
+      source: theme,
+      doc: "Dimming behind modal layers."
+    },
+    {
+      name: "diff-add",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-ok)"),
+      doc: "Added lines; line and word tints derive privately (12% / 38%)."
+    },
+    {
+      name: "diff-del",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-danger)"),
+      doc: "Deleted lines."
+    },
+    {
+      name: "diff-mod",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: css("var(--k-warn)"),
+      doc: "Modified lines."
+    },
+    {
+      name: "series-1",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: theme,
+      doc: "Chart series 1."
+    },
+    {
+      name: "series-2",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: theme,
+      doc: "Chart series 2."
+    },
+    {
+      name: "series-3",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: theme,
+      doc: "Chart series 3."
+    },
+    {
+      name: "series-4",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: theme,
+      doc: "Chart series 4."
+    },
+    {
+      name: "series-5",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: theme,
+      doc: "Chart series 5."
+    },
+    {
+      name: "series-6",
+      tier: "semantic",
+      type: "color",
+      group: "Data",
+      source: theme,
+      doc: "Chart series 6."
+    },
+    {
+      name: "radius-panel",
+      tier: "semantic",
+      type: "length",
+      group: "Shape",
+      source: css("calc(var(--k-radius) + var(--k-unit))"),
+      doc: "Panel and card radius, concentric with controls.",
+      deprecated: ["--k-panel-radius", "--ku-panel-radius"]
+    },
+    {
+      name: "round",
+      tier: "semantic",
+      type: "length",
+      group: "Shape",
+      source: css("calc(var(--k-radius) * 999)"),
+      doc: "Capsule radius that squares when --k-radius is 0. Use instead of 999px."
+    },
+    {
+      name: "unit",
+      tier: "semantic",
+      type: "length",
+      group: "Size",
+      source: value("4px"),
+      doc: "The spacing unit."
+    },
+    {
+      name: "row",
+      tier: "semantic",
+      type: "length",
+      group: "Size",
+      source: css("round(calc(32px * var(--k-density)),2px)"),
+      doc: "Row height.",
+      deprecated: ["--ku-row"]
+    },
+    {
+      name: "width",
+      tier: "semantic",
+      type: "length",
+      group: "Size",
+      source: value("288px"),
+      doc: "Panel width."
+    },
+    {
+      name: "font-size",
+      tier: "semantic",
+      type: "length",
+      group: "Type",
+      source: css("round(calc(12px * (1 + (var(--k-density) - 1) * .5)),1px)"),
+      doc: "Body size; a 5-step scale derives privately.",
+      deprecated: ["--ku-font-size"]
+    },
+    {
+      name: "value-font",
+      tier: "semantic",
+      type: "font",
+      group: "Type",
+      source: css("var(--k-font)"),
+      doc: "Font for readouts and values (labPreset: mono).",
+      deprecated: ["--ku-value-font"]
+    },
+    {
+      name: "shadow-raised",
+      tier: "semantic",
+      type: "shadow",
+      group: "Material",
+      source: theme,
+      doc: "Small lift for raised controls.",
+      deprecated: ["--k-lift-shadow"]
+    },
+    {
+      name: "shadow-overlay",
+      tier: "semantic",
+      type: "shadow",
+      group: "Material",
+      source: theme,
+      doc: "Floating panels, menus, popovers.",
+      deprecated: ["--k-shadow", "--ku-shadow"]
+    },
+    {
+      name: "glass",
+      tier: "semantic",
+      type: "number",
+      group: "Material",
+      source: theme,
+      doc: "Backdrop glass amount (0 = opaque)."
+    },
+    {
+      name: "glow",
+      tier: "semantic",
+      type: "number",
+      group: "Material",
+      source: theme,
+      doc: "Specular glow amount."
+    },
+    {
+      name: "rim",
+      tier: "semantic",
+      type: "color",
+      group: "Material",
+      source: theme,
+      doc: "Top-edge highlight hairline.",
+      deprecated: ["--ku-rim"]
+    },
+    {
+      name: "spring",
+      tier: "semantic",
+      type: "spring",
+      group: "Motion",
+      source: value("0.3 0"),
+      doc: "Default spring as `duration bounce` (the motion module's `default`)."
+    },
+    {
+      name: "hover-in",
+      tier: "semantic",
+      type: "number",
+      group: "Motion",
+      source: value("0"),
+      doc: "Hover wash fade-in, unitless milliseconds.",
+      deprecated: ["--ku-hover-in"]
+    },
+    {
+      name: "hover-out",
+      tier: "semantic",
+      type: "number",
+      group: "Motion",
+      source: value("120"),
+      doc: "Hover wash fade-out, unitless milliseconds.",
+      deprecated: ["--ku-hover-out"]
+    },
+    {
+      name: "z",
+      tier: "semantic",
+      type: "integer",
+      group: "Motion",
+      source: value("2147480000"),
+      doc: "Base of knobs' stacking ladder; layers add small offsets."
+    },
+    {
+      name: "slider-track",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fill)"),
+      doc: "Slider track."
+    },
+    {
+      name: "slider-fill",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("color-mix(in oklch,var(--k-accent) 20%,var(--k-fill-selected))"),
+      doc: "Slider value fill.",
+      deprecated: ["--k-fill-rest"]
+    },
+    {
+      name: "slider-handle",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-accent)"),
+      doc: "Slider handle and range thumbs.",
+      deprecated: ["--k-handle"]
+    },
+    {
+      name: "toggle-thumb-off",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("#ffffff"),
+      doc: "A switch's thumb while off, and the ring around colour and gradient thumbs.",
+      deprecated: ["--k-thumb"]
+    },
+    {
+      name: "toggle-track",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fill-selected)"),
+      doc: "Toggle track, off."
+    },
+    {
+      name: "toggle-track-on",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-accent)"),
+      doc: "Toggle track, on."
+    },
+    {
+      name: "toggle-thumb",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-on-accent)"),
+      doc: "Toggle thumb."
+    },
+    {
+      name: "segmented-track",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-bg-inset)"),
+      doc: "Segmented control background.",
+      deprecated: ["--k-seg-bg", "--ku-seg-bg"]
+    },
+    {
+      name: "segmented-active",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-bg-raised)"),
+      doc: "Active segment.",
+      deprecated: ["--k-seg-active"]
+    },
+    {
+      name: "timeline-playhead",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-accent)"),
+      doc: "Timeline playhead."
+    },
+    {
+      name: "split-gutter",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-border-subtle)"),
+      doc: "Split pane divider.",
+      deprecated: ["--k-ui-divider", "--ku-divider"]
+    },
+    {
+      name: "compare-divider",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fg)"),
+      doc: "Before/after divider line.",
+      deprecated: ["--k-compare-line"]
+    },
+    {
+      name: "compare-stage",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fill)"),
+      doc: "Compare stage background."
+    },
+    {
+      name: "activity-rail",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-border-strong)"),
+      doc: "Activity rail line.",
+      deprecated: ["--k-activity-line"]
+    },
+    {
+      name: "picker-card",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fill)"),
+      doc: "Picker card."
+    },
+    {
+      name: "pane-bg",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-bg)"),
+      doc: "knobs/ui pane card.",
+      deprecated: ["--k-ui-pane", "--ku-pane-bg"]
+    },
+    {
+      name: "button-bg",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fill)"),
+      doc: "Button fill."
+    },
+    {
+      name: "button-border",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("transparent"),
+      doc: "Button border.",
+      deprecated: ["--k-button-line"]
+    },
+    {
+      name: "button-fg",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fg)"),
+      doc: "Button text.",
+      deprecated: ["--k-button-color"]
+    },
+    {
+      name: "row-hover",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("color-mix(in oklch,var(--k-fill) 50%,transparent)"),
+      doc: "Row hover wash."
+    },
+    {
+      name: "group-label",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fg-3)"),
+      doc: "Folder and group headings.",
+      deprecated: ["--k-group-ink", "--k-group-color"]
+    },
+    {
+      name: "modified",
+      tier: "hook",
+      type: "color",
+      group: "Hooks",
+      source: css("var(--k-fg-3)"),
+      doc: "Marker for values changed from their default."
+    },
+    {
+      name: "tray-pad",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("calc(var(--k-unit) * .5)"),
+      doc: "Padding inside a tray around its controls.",
+      deprecated: ["--k-tray-pad"]
+    },
+    {
+      name: "pad",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("round(calc(10px * var(--k-density)),2px)"),
+      doc: "Panel padding.",
+      deprecated: ["--k-pad"]
+    },
+    {
+      name: "inset",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("var(--_k-pad)"),
+      doc: "Row content inset.",
+      deprecated: ["--k-inset", "--ku-inset"]
+    },
+    {
+      name: "gap",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("round(calc(var(--k-unit) * (1 + (var(--k-density) - 1) * 2.5)),1px)"),
+      doc: "Gap between rows.",
+      deprecated: ["--k-gap"]
+    },
+    {
+      name: "radius-md",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("max(0px,calc(var(--k-radius) - var(--_k-tray-pad)))"),
+      doc: "Concentric radius one tray in.",
+      deprecated: ["--k-radius-md"]
+    },
+    {
+      name: "radius-sm",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("max(0px,calc(var(--k-radius) - var(--_k-tray-pad) * 2))"),
+      doc: "Concentric radius two trays in.",
+      deprecated: ["--k-radius-sm"]
+    },
+    {
+      name: "control-h",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("calc(var(--k-row) - var(--k-unit) * 2)"),
+      doc: "Control height inside a row.",
+      deprecated: ["--k-control-h", "--ku-control-h"]
+    },
+    {
+      name: "value-size",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("calc(var(--k-font-size) - .5px)"),
+      doc: "Readout size.",
+      deprecated: ["--k-value-size", "--ku-value-size"]
+    },
+    {
+      name: "text-title",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("calc(var(--k-font-size) + 1px)"),
+      doc: "Type scale: titles.",
+      deprecated: ["--k-text-title"]
+    },
+    {
+      name: "text-body",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("var(--k-font-size)"),
+      doc: "Type scale: body.",
+      deprecated: ["--k-text-body"]
+    },
+    {
+      name: "text-control",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("calc(var(--k-font-size) - .5px)"),
+      doc: "Type scale: controls.",
+      deprecated: ["--k-text-control"]
+    },
+    {
+      name: "text-meta",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("calc(var(--k-font-size) - 1px)"),
+      doc: "Type scale: metadata.",
+      deprecated: ["--k-text-meta", "--ku-text-meta"]
+    },
+    {
+      name: "text-cap",
+      tier: "private",
+      type: "length",
+      group: "Private",
+      source: css("calc(var(--k-font-size) - 2px)"),
+      doc: "Type scale: caps and captions.",
+      deprecated: ["--k-text-cap"]
+    },
+    {
+      name: "weight",
+      tier: "private",
+      type: "number",
+      group: "Private",
+      source: value("400"),
+      doc: "Body weight.",
+      deprecated: ["--k-font-weight", "--ku-font-weight"]
+    },
+    {
+      name: "weight-label",
+      tier: "private",
+      type: "number",
+      group: "Private",
+      source: value("500"),
+      doc: "Label weight.",
+      deprecated: ["--k-label-weight", "--ku-label-weight"]
+    },
+    {
+      name: "weight-title",
+      tier: "private",
+      type: "number",
+      group: "Private",
+      source: value("600"),
+      doc: "Title weight.",
+      deprecated: ["--k-title-weight", "--ku-title-weight"]
+    },
+    {
+      name: "focus-ring",
+      tier: "private",
+      type: "shadow",
+      group: "Private",
+      source: css("0 0 0 2px var(--k-bg),0 0 0 4px var(--k-focus)"),
+      doc: "Two-layer focus ring: a bg gap, then the focus colour."
+    },
+    {
+      name: "diff-add-line",
+      tier: "private",
+      type: "color",
+      group: "Private",
+      source: css("color-mix(in oklch,var(--k-diff-add) 12%,transparent)"),
+      doc: "Added line tint."
+    },
+    {
+      name: "diff-add-word",
+      tier: "private",
+      type: "color",
+      group: "Private",
+      source: css("color-mix(in oklch,var(--k-diff-add) 38%,transparent)"),
+      doc: "Added word tint."
+    },
+    {
+      name: "diff-del-line",
+      tier: "private",
+      type: "color",
+      group: "Private",
+      source: css("color-mix(in oklch,var(--k-diff-del) 12%,transparent)"),
+      doc: "Deleted line tint."
+    },
+    {
+      name: "diff-del-word",
+      tier: "private",
+      type: "color",
+      group: "Private",
+      source: css("color-mix(in oklch,var(--k-diff-del) 38%,transparent)"),
+      doc: "Deleted word tint."
+    },
+    {
+      name: "diff-mod-line",
+      tier: "private",
+      type: "color",
+      group: "Private",
+      source: css("color-mix(in oklch,var(--k-diff-mod) 12%,transparent)"),
+      doc: "Modified line tint."
+    },
+    {
+      name: "diff-mod-word",
+      tier: "private",
+      type: "color",
+      group: "Private",
+      source: css("color-mix(in oklch,var(--k-diff-mod) 38%,transparent)"),
+      doc: "Modified word tint."
+    }
+  ];
+  TOKEN_BY_NAME = new Map(TOKENS.map((t) => [t.name, t]));
+  PROPERTY_TO_NAME = new Map(TOKENS.map((t) => [cssName(t), t.name]));
+  DEPRECATED = new Map(TOKENS.flatMap((t) => (t.deprecated ?? []).map((old) => [old, cssName(t)])));
+});
+
+// src/tokens/css.ts
+function pair(def, dark, light) {
+  if (dark === undefined && light === undefined)
+    return;
+  if (dark === undefined || light === undefined || dark === light || def.type !== "color")
+    return dark ?? light;
+  return `light-dark(${light},${dark})`;
+}
+function declaredValue(theme, def) {
+  const name = def.name;
+  const dark = theme.declared.dark[name];
+  const light = theme.declared.light[name];
+  if (def.type === "color" && dark === undefined !== (light === undefined))
+    return pair(def, dark ?? theme.dark[name], light ?? theme.light[name]);
+  return pair(def, dark, light);
+}
+function resolver(def) {
+  const reads = [...def.deprecated ?? []];
+  if (def.tier !== "private")
+    reads.push(cssName(def));
+  const source = def.source;
+  const fallback = "css" in source ? privately(source.css) : ("value" in source) && def.tier === "private" ? source.value : undefined;
+  let out = fallback ?? "";
+  for (let i = reads.length - 1;i >= 0; i--)
+    out = out === "" ? `var(${reads[i]})` : `var(${reads[i]},${out})`;
+  return def.resolve ? privately(def.resolve).replaceAll("$", out) : out;
+}
+function tokensCss(theme) {
+  const root = [];
+  const resolved = [];
+  for (const def of TOKENS) {
+    const source = def.source;
+    const own = declaredValue(theme, def) ?? ("from" in source ? "" : ("value" in source) && def.tier !== "private" ? source.value : undefined);
+    if (own !== undefined && def.tier !== "private")
+      root.push(`${cssName(def)}:${own}`);
+    resolved.push(`--_k-${def.name}:${resolver(def)}`);
+  }
+  return `@layer knobs.tokens{
+:where(:root,:host){${root.join(";")}}
+:where(.knobs-root){${resolved.join(";")}}
+${APPEARANCE_CSS}
+}`;
+}
+function themeCss(theme, selector) {
+  const decls = [];
+  for (const def of TOKENS) {
+    const own = declaredValue(theme, def);
+    if (own !== undefined)
+      decls.push(`${cssName(def)}:${own}`);
+  }
+  return `@layer knobs.tokens{${selector}{${decls.join(";")}}}`;
+}
+var SCHEMES, APPEARANCE_CSS, privately = (css) => css.replace(/var\(--k-([a-z0-9-]+)/g, (m, name) => tokenForProperty(`--k-${name}`) ? `var(--_k-${name}` : m);
+var init_css = __esm(() => {
+  init_schema();
+  SCHEMES = [
+    [":where(.knobs-root)", "light dark"],
+    [
+      ':where(.dark,.dark-theme,[data-theme="dark"],[data-appearance="dark"],[data-knobs-theme="dark"]) :where(.knobs-root)',
+      "dark"
+    ],
+    [
+      ':where(.light,.light-theme,[data-theme="light"],[data-appearance="light"],[data-knobs-theme="light"]) :where(.knobs-root)',
+      "light"
+    ],
+    [":where(.knobs-root) :where(.knobs-root:not([data-appearance]))", "inherit"],
+    [':where(.knobs-root[data-appearance="dark"])', "dark"],
+    [':where(.knobs-root[data-appearance="light"])', "light"],
+    [':where(.knobs-root[data-appearance="system"])', "light dark"],
+    [':where(.knobs-root[data-appearance="inherit"])', "inherit"]
+  ];
+  APPEARANCE_CSS = SCHEMES.map(([selector, scheme]) => {
+    const light = scheme === "light" ? "1" : scheme === "inherit" ? "inherit" : "0";
+    const rule = `${selector}{color-scheme:${scheme};--_k-light:${light}}`;
+    return scheme === "light dark" ? `${rule}
+@media(prefers-color-scheme:light){${selector}{--_k-light:1}}` : rule;
+  }).join(`
+`);
+});
+
+// src/tokens/evaluate.ts
+function splitTop(s) {
+  const out = [];
+  let depth = 0;
+  let start = 0;
+  for (let i = 0;i < s.length; i++) {
+    const ch = s[i];
+    if (ch === "(")
+      depth++;
+    else if (ch === ")")
+      depth--;
+    else if (ch === "," && depth === 0) {
+      out.push(s.slice(start, i).trim());
+      start = i + 1;
+    }
+  }
+  out.push(s.slice(start).trim());
+  return out;
+}
+function evaluate(input, lookup) {
+  const s = input.trim();
+  const v = call(s, "var");
+  if (v !== undefined) {
+    const [name, ...fallback] = splitTop(v);
+    const value = lookup(name);
+    if (value !== undefined)
+      return evaluate(value, lookup);
+    if (fallback.length)
+      return evaluate(fallback.join(","), lookup);
+    throw new Error(`Unresolved ${name}`);
+  }
+  const mix = call(s, "color-mix");
+  if (mix !== undefined)
+    return colorMix(mix, lookup);
+  return normalize(s);
+}
+function percent(s, lookup) {
+  const c = call(s, "calc");
+  if (c === undefined)
+    return Number.parseFloat(s) / 100;
+  const [a, b] = c.split("*").map((x) => x.trim());
+  const num = (x) => {
+    const inner = call(x, "var");
+    if (inner !== undefined)
+      return Number.parseFloat(lookup(splitTop(inner)[0]) ?? Number.NaN.toString());
+    return x.endsWith("%") ? Number.parseFloat(x) / 100 : Number.parseFloat(x);
+  };
+  const out = num(a) * num(b);
+  if (!Number.isFinite(out))
+    throw new Error(`Bad percentage: ${s}`);
+  return out;
+}
+function stop(s, lookup) {
+  const m = /^(.*?)\s+((?:calc\(.*\))|(?:[\d.]+%))$/.exec(s);
+  if (!m)
+    return { color: evaluate(s, lookup) };
+  return { color: evaluate(m[1], lookup), p: percent(m[2], lookup) };
+}
+function colorMix(args, lookup) {
+  const [space, a, b] = splitTop(args);
+  if (space !== "in oklch")
+    throw new Error(`Only color-mix(in oklch, …) is supported, got ${space}`);
+  const x = stop(a, lookup);
+  const y = stop(b, lookup);
+  let p1 = x.p ?? (y.p === undefined ? 0.5 : 1 - y.p);
+  let p2 = y.p ?? 1 - p1;
+  const sum = p1 + p2;
+  const scale = sum < 1 ? sum : 1;
+  p1 /= sum;
+  p2 /= sum;
+  const ca = linearToOklch(parseColor(x.color));
+  const cb = linearToOklch(parseColor(y.color));
+  const a1 = ca.alpha ?? 1;
+  const a2 = cb.alpha ?? 1;
+  const alpha = a1 * p1 + a2 * p2;
+  if (alpha <= 0)
+    return "#00000000";
+  const powerless = (c, alpha) => c.c < 0.0002 || alpha === 0;
+  const h1 = powerless(ca, a1) ? cb.h : ca.h;
+  const h2 = powerless(cb, a2) ? h1 : cb.h;
+  let dh = h2 - h1;
+  if (dh > 180)
+    dh -= 360;
+  if (dh < -180)
+    dh += 360;
+  const pre = (u, v) => (u * a1 * p1 + v * a2 * p2) / alpha;
+  const rgb = oklchToLinear({
+    l: pre(ca.l, cb.l),
+    c: pre(ca.c, cb.c),
+    h: (h1 + dh * p2 + 360) % 360
+  });
+  return formatHex([rgb[0], rgb[1], rgb[2], alpha * scale]);
+}
+var call = (s, fn) => s.startsWith(`${fn}(`) && s.endsWith(")") ? s.slice(fn.length + 1, -1) : undefined;
+var init_evaluate = () => {};
+
+// src/themes/define.ts
+function fontStack(family, fallback) {
+  if (family.includes(","))
+    return family;
+  const quoted = /\s/.test(family) && !/^["']/.test(family) ? `"${family}"` : family;
+  return family === fallback ? family : `${quoted},${fallback}`;
+}
+function mergeInputs(parent, spec) {
+  return {
+    gray: { ...parent.gray, ...spec.gray },
+    accent: spec.accent ?? parent.accent,
+    contrast: spec.contrast ?? parent.contrast,
+    radius: spec.radius ?? parent.radius,
+    density: spec.density ?? parent.density,
+    material: spec.material ?? parent.material,
+    font: {
+      sans: spec.font?.sans ? fontStack(spec.font.sans, DEFAULT_SANS) : parent.font.sans,
+      mono: spec.font?.mono ? fontStack(spec.font.mono, DEFAULT_MONO) : parent.font.mono
+    },
+    tokens: {
+      dark: { ...parent.tokens.dark, ...spec.tokens?.dark },
+      light: { ...parent.tokens.light, ...spec.tokens?.light }
+    }
+  };
+}
+function meet(l, floor, bg, away, make) {
+  let x = l;
+  while (apca(make(x), bg) < floor + 0.5 && x >= 0 && x <= 100)
+    x += away * 0.25;
+  return make(Math.min(100, Math.max(0, x)));
+}
+function solve(target, bg, away, make) {
+  let near = toOklch(bg).l * 100;
+  let far = away > 0 ? 100 : 0;
+  if (apca(make(far), bg) <= target)
+    return far;
+  for (let i = 0;i < 30; i++) {
+    const mid = (near + far) / 2;
+    if (apca(make(mid), bg) < target)
+      near = mid;
+    else
+      far = mid;
+  }
+  return far;
+}
+function accentPair(inputs) {
+  if (typeof inputs.accent !== "string")
+    return { ...inputs.accent };
+  const dark = inputs.accent;
+  const o = toOklch(dark);
+  const light = o.c < 0.02 ? oklchToHex({ l: 0.227, c: inputs.gray.chroma, h: inputs.gray.hue }) : oklchToHex({ l: Math.min(0.6, Math.max(0.45, o.l - 0.15)), c: o.c * 1.1, h: o.h });
+  return { dark, light };
+}
+function generate(inputs, appearance, accent) {
+  const m = contrastMultiplier(inputs.contrast);
+  const { hue, chroma } = inputs.gray;
+  const neutral = (l, tint) => oklchToHex({ l: l / 100, c: chroma * tint, h: hue });
+  const user = inputs.tokens[appearance];
+  const out = {};
+  const surfaces = SURFACES[appearance];
+  for (const [role, l] of Object.entries(surfaces)) {
+    const spread = surfaces.bg + (l - surfaces.bg) * m;
+    out[role] = user[role] ?? neutral(Math.min(100, Math.max(0, spread)), TINT.surface[appearance]);
+  }
+  const bg = out.bg;
+  const away = appearance === "dark" ? 1 : -1;
+  const inkSpread = 1 + (m - 1) * 0.4;
+  for (const [role, target] of Object.entries(INKS[appearance])) {
+    const tint = role === "fg" ? TINT.fg : role === "border-strong" ? TINT.border : TINT.ink;
+    const make = (x) => neutral(x, tint);
+    const l = solve(target * inkSpread, bg, away, make);
+    out[role] = meet(l, APCA_BUDGET[role], bg, away, make);
+  }
+  out.accent = accent;
+  const a = toOklch(accent);
+  out["accent-fg"] = meet(a.l * 100, APCA_BUDGET["accent-fg"], bg, away, (x) => oklchToHex({ l: x / 100, c: a.c, h: a.h }));
+  out["on-accent"] = apca("#111111", accent) >= apca("#ffffff", accent) ? "#111111" : "#ffffff";
+  for (const [role, [l, c, h]] of Object.entries(STATUS[appearance]))
+    out[role] = oklchToHex({ l: l / 100, c, h });
+  const s = SERIES[appearance];
+  const start = a.c >= 0.04 ? a.h - SERIES_HUES[0] : 0;
+  SERIES_HUES.forEach((h, i) => {
+    out[`series-${i + 1}`] = oklchToHex({ l: s.l / 100, c: s.c, h: (h + start + 360) % 360 });
+  });
+  out.scrim = appearance === "dark" ? "#00000099" : "#00000040";
+  out.contrast = String(Math.round(m * 1000) / 1000);
+  out.radius = `${inputs.radius}px`;
+  out.density = String(DENSITY[inputs.density]);
+  out.font = inputs.font.sans;
+  out.mono = inputs.font.mono;
+  const material = inputs.material;
+  out.glass = material === "glass" ? "0.6" : "0";
+  out.glow = material === "glass" ? "0.5" : "0";
+  out.rim = material === "flat" ? "transparent" : appearance === "dark" ? "#ffffff1a" : "#ffffff99";
+  if (material === "flat") {
+    out["border-subtle"] = over(withAlpha(out.fg, 0.06 * m), bg);
+    out.border = over(withAlpha(out.fg, 0.1 * m), bg);
+  }
+  return out;
+}
+function shadows(material, borderStrong) {
+  if (material === "flat")
+    return {
+      "shadow-raised": "none",
+      "shadow-overlay": `0 0 0 1px light-dark(${borderStrong.light},${borderStrong.dark})`
+    };
+  return {
+    "shadow-raised": "0 1px 2px light-dark(#0000001f,#00000029)",
+    "shadow-overlay": "0 12px 36px light-dark(#00000024,#00000085),0 1px 2px light-dark(#00000014,#0000004d)"
+  };
+}
+function resolve(declared) {
+  const raw = (name) => {
+    const def = TOKEN_BY_NAME.get(name);
+    const own = declared[name];
+    if (own !== undefined)
+      return own;
+    const source = def.source;
+    if ("css" in source)
+      return source.css;
+    if ("value" in source)
+      return source.value;
+    throw new Error(`Theme does not supply ${name}`);
+  };
+  const lookup = (property) => {
+    const name = tokenForProperty(property);
+    return name ? raw(name) : undefined;
+  };
+  const out = {};
+  for (const t of TOKENS)
+    out[t.name] = t.type === "color" ? evaluate(raw(t.name), lookup) : raw(t.name);
+  return out;
+}
+function gpuOf(resolved) {
+  const out = {};
+  for (const t of TOKENS)
+    if (t.type === "color")
+      out[t.name] = parseColor(resolved[t.name]);
+  return out;
+}
+function validate(name, inputs) {
+  if (!/^[\w-]+$/.test(name))
+    throw new Error(`Invalid theme name: ${name}`);
+  if (name === "dark" || name === "light")
+    throw new Error(`Reserved theme name: ${name}`);
+  for (const appearance of ["dark", "light"])
+    for (const key of Object.keys(inputs.tokens[appearance]))
+      if (!TOKEN_BY_NAME.has(key))
+        throw new Error(`Unknown token in theme ${name}: ${key}`);
+}
+function defineTheme(spec) {
+  const inputs = mergeInputs(spec.extends?.inputs ?? BASE, spec);
+  validate(spec.name, inputs);
+  const accent = accentPair(inputs);
+  const generated = {
+    dark: generate(inputs, "dark", accent.dark),
+    light: generate(inputs, "light", accent.light)
+  };
+  const material = shadows(inputs.material, {
+    dark: inputs.tokens.dark["border-strong"] ?? generated.dark["border-strong"],
+    light: inputs.tokens.light["border-strong"] ?? generated.light["border-strong"]
+  });
+  const declared = {
+    dark: { ...generated.dark, ...material, ...inputs.tokens.dark },
+    light: { ...generated.light, ...material, ...inputs.tokens.light }
+  };
+  for (const [key, dark] of Object.entries(declared.dark)) {
+    const def = TOKEN_BY_NAME.get(key);
+    const light = declared.light[key];
+    if (def.type !== "color" && light !== undefined && light !== dark)
+      throw new Error(`Theme ${spec.name}: only colours may differ by appearance (${key})`);
+  }
+  const dark = resolve(declared.dark);
+  const light = resolve(declared.light);
+  const theme = {
+    name: spec.name,
+    inputs,
+    dark,
+    light,
+    declared,
+    gpu: { dark: gpuOf(dark), light: gpuOf(light) },
+    css: (options) => options?.selector ? themeCss(theme, options.selector) : tokensCss(theme)
+  };
+  return theme;
+}
+var DEFAULT_SANS = 'system-ui,-apple-system,"SF Pro Text",sans-serif', DEFAULT_MONO = '"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace', BASE, DENSITY, SURFACES, INKS, APCA_BUDGET, TINT, STATUS, SERIES_HUES, SERIES, contrastMultiplier = (contrast) => 0.5 + Math.min(100, Math.max(0, contrast)) / 100;
+var init_define = __esm(() => {
+  init_css();
+  init_evaluate();
+  init_schema();
+  BASE = {
+    gray: { hue: 0, chroma: 0 },
+    accent: "#ffffff",
+    contrast: 50,
+    radius: 8,
+    density: "default",
+    material: "solid",
+    font: { sans: DEFAULT_SANS, mono: DEFAULT_MONO },
+    tokens: { dark: {}, light: {} }
+  };
+  DENSITY = { compact: 0.875, default: 1, comfortable: 1.1875 };
+  SURFACES = {
+    dark: { "bg-page": 14.5, "bg-inset": 19.6, bg: 22.6, "bg-raised": 25.7, "bg-overlay": 28.1 },
+    light: { "bg-page": 92.6, "bg-inset": 94.6, bg: 97.1, "bg-raised": 100, "bg-overlay": 100 }
+  };
+  INKS = {
+    dark: { fg: 99.7, "fg-2": 76.7, "fg-3": 48.4, "fg-4": 31.9, "border-strong": 15.8 },
+    light: { fg: 98.35, "fg-2": 78, "fg-3": 50, "fg-4": 34, "border-strong": 17 }
+  };
+  APCA_BUDGET = {
+    fg: 90,
+    "fg-2": 75,
+    "fg-3": 45,
+    "fg-4": 30,
+    "accent-fg": 60,
+    "border-strong": 15
+  };
+  TINT = { surface: { dark: 0.5, light: 0.7 }, fg: 1.35, ink: 1.5, border: 1.25 };
+  STATUS = {
+    dark: {
+      ok: [78, 0.15, 155],
+      warn: [83, 0.14, 80],
+      danger: [70, 0.18, 25],
+      info: [75, 0.13, 240]
+    },
+    light: {
+      ok: [52, 0.14, 150],
+      warn: [60, 0.14, 65],
+      danger: [55, 0.2, 27],
+      info: [53, 0.15, 245]
+    }
+  };
+  SERIES_HUES = [250, 155, 75, 25, 305, 195];
+  SERIES = { dark: { l: 74, c: 0.12 }, light: { l: 56, c: 0.14 } };
+});
+
+// src/themes/knobs.ts
+var knobs;
+var init_knobs = __esm(() => {
+  init_define();
+  knobs = defineTheme({
+    name: "knobs",
+    gray: { hue: 285, chroma: 0.004 },
+    accent: { dark: "#ffffff", light: "#1c1c1e" },
+    contrast: 50,
+    radius: 8,
+    density: "default",
+    material: "glass"
+  });
+});
+
+// src/core/glide.ts
+var COLOR_TOKENS, LENGTH_TOKENS, NUMBER_TOKENS, ANIMATED, TOKEN_TRANSITIONS, source = (t) => t === "blur" ? "--k-blur" : `--_k-${t}`, register = (names, syntax, initial) => names.map((n) => `@property --kt-${n}{syntax:"${syntax}";inherits:false;initial-value:${initial}}`).join(`
+`), GLIDING = ".knobs-panel,.knobs-chip,.knobs-notice,.knobs-ui", DRIVERS, aliased = (css) => css.replace(new RegExp(`var\\(--_k-(${ANIMATED.join("|")})\\)`, "g"), "var(--kv-$1)").replace(/var\(--k-blur\)/g, "var(--kv-blur)");
+var init_glide = __esm(() => {
+  COLOR_TOKENS = [
+    "bg",
+    "fill",
+    "fill-selected",
+    "border",
+    "border-strong",
+    "fg",
+    "fg-2",
+    "fg-3",
+    "accent",
+    "modified",
+    "segmented-track",
+    "segmented-active",
+    "toggle-track",
+    "toggle-thumb",
+    "toggle-thumb-off",
+    "slider-handle",
+    "rim",
+    "border-subtle",
+    "bg-page"
+  ];
+  LENGTH_TOKENS = ["pad", "inset", "row", "gap", "radius", "radius-panel", "font-size"];
+  NUMBER_TOKENS = ["weight-label", "blur", "glow", "glass", "glass-tone"];
+  ANIMATED = [...COLOR_TOKENS, ...LENGTH_TOKENS, ...NUMBER_TOKENS, "width"];
+  TOKEN_TRANSITIONS = ANIMATED.map((t) => `--kt-${t} var(--k-token-t)`).join(",");
+  DRIVERS = `${register(COLOR_TOKENS, "<color>", "transparent")}
+${register(LENGTH_TOKENS, "<length>", "0px")}
+${register(NUMBER_TOKENS, "<number>", "0")}
+${register(["width"], "<length-percentage>", "288px")}
+:where(${GLIDING}){${ANIMATED.map((t) => `--kt-${t}:var(${source(t)});--kv-${t}:var(--kt-${t})`).join(";")};--k-token-t:calc(var(--k-fill-ms) * 1ms) var(--k-fill-ease)}
+:where(.knobs-ui){transition:${TOKEN_TRANSITIONS}}
+:root[data-knobs-scrub] :where(.knobs-chip,.knobs-ui){--k-token-t:0s}
+@media(prefers-reduced-motion:reduce){:where(.knobs-chip,.knobs-ui){--k-token-t:0s}}`;
+});
+
+// src/core/root.ts
+function injectTokens(doc) {
+  if (doc.querySelector("style[data-knobs-tokens]"))
+    return;
+  const style = doc.createElement("style");
+  style.dataset.knobsTokens = "";
+  style.textContent = rootCss;
+  doc.head.append(style);
+}
+var ROOT_CLASS = "knobs-root", extras, spring, rootCss;
+var init_root = __esm(() => {
+  init_knobs();
+  init_css();
+  init_glide();
+  init_motion();
+  extras = `:where(.${ROOT_CLASS}){--_k-shadow-k:calc(var(--k-shadow-strength,calc(.48 - .32 * var(--_k-light,0))) / .48);--_k-glass-tone:var(--k-glass-tone,calc(.5 + .58 * var(--_k-light,0)));--_k-fill-base:var(--k-fill-base,var(--_k-fill-selected));--_k-fill-hover-mix:var(--k-fill-hover-mix,var(--k-fill-rest-mix,20%));--_k-reveal-ease:var(--k-ease,cubic-bezier(.2,.8,.2,1))}`;
+  spring = `:where(:root,:host){--k-fill-ease:${DEFAULT_LINEAR.easing};--k-fill-ms:${DEFAULT_LINEAR.ms}}`;
+  rootCss = `${tokensCss(knobs)}
+${extras}
+${spring}
+${DRIVERS}
+${motionCss}`;
+});
+
 // src/core/keys.ts
 function normalizeCombo(combo) {
   const trimmed = combo.trim();
@@ -834,36 +2497,18 @@ var init_keys = __esm(() => {
 
 // src/ui/look.ts
 function injectUiStyles(doc) {
+  injectTokens(doc);
   if (doc.querySelector("style[data-knobs-ui]"))
     return;
   const style = doc.createElement("style");
   style.dataset.knobsUi = "";
-  style.textContent = css + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss + rolling_css_default;
+  style.textContent = uiCss();
   doc.head.append(style);
 }
-function injectUiPreset(doc, preset) {
-  const content = presetCss({ ...preset, css: undefined }).replaceAll(".knobs-panel", ".knobs-ui");
-  const existing = doc.querySelector(`style[data-knobs-ui-preset="${preset.name}"]`);
-  if (existing) {
-    if (existing.textContent !== content)
-      existing.textContent = content;
-    return;
-  }
-  const style = doc.createElement("style");
-  style.dataset.knobsUiPreset = preset.name;
-  style.textContent = content;
-  doc.head.append(style);
-}
-function applyLook(root, look) {
-  const doc = root.ownerDocument;
-  injectUiStyles(doc);
-  root.classList.add("knobs-ui");
-  if (look.preset) {
-    injectUiPreset(doc, look.preset);
-    root.dataset.preset = look.preset.name;
-  }
-  if (look.theme)
-    root.dataset.theme = look.theme;
+function applyLook2(root, look) {
+  injectUiStyles(root.ownerDocument);
+  root.classList.add("knobs-root", "knobs-ui");
+  applyLook(root, resolveLook(look));
   syncFrame(root);
 }
 function syncFrame(root) {
@@ -905,109 +2550,44 @@ function frameLoop(win, step) {
     }
   };
 }
-var ease, TOKENS, LIGHT, lightBlock, css, lookDefaults, reducedMotion = (win) => win?.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false, tune = (s, m) => {
-  s.omega = m.omega;
-  s.zeta = m.zeta;
-  return s;
-}, svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS;
-var init_look = __esm(() => {
-  init_theme();
-  init_activity_css();
-  init_picker_css();
-  init_keys();
-  ease = springEasing(26, 1);
-  TOKENS = {
-    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(TOKENS).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 css2 = `
+: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);
   /* 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)));
-}
-: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))}
+  --_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,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}
 /* 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. */
@@ -1045,17 +2625,17 @@ var init_look = __esm(() => {
 :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}
@@ -1063,36 +2643,36 @@ var init_look = __esm(() => {
 .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
@@ -1100,26 +2680,26 @@ var init_look = __esm(() => {
 .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}
@@ -1129,112 +2709,124 @@ var init_look = __esm(() => {
 /* 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);
+.knobs-tree-cursor{position:absolute;left:var(--_ku-row-x);right:var(--_ku-row-x);top:0;height:var(--_k-row);border-radius:var(--_ku-row-radius);background:var(--_ku-select);
   opacity:0;pointer-events:none;will-change:transform;transition:opacity .15s ease-out,background .12s}
 .knobs-tree-cursor[data-on]{opacity:1}
-.knobs-tree:focus .knobs-tree-cursor{background:var(--ku-select-focus)}
+.knobs-tree:focus .knobs-tree-cursor{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. */
 :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-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-timeline[data-playing] .knobs-tl-play{background:var(--_k-accent);color:var(--_k-bg)}
 .knobs-tl-time{display:flex;flex-direction:column;line-height:1.2;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-tl-now{font:var(--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-tl-now{font:var(--_k-weight) var(--_k-value-size)/1.2 var(--_k-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--_k-fg);white-space:nowrap}
+.knobs-tl-sub{font-size:var(--_k-text-meta);color:var(--_k-fg-3);white-space:nowrap}
+.knobs-tl-track{position:relative;flex:1;min-width:0;overflow:hidden;border-radius:var(--_k-radius);background:var(--_k-fill);cursor:col-resize;touch-action:none;
+  transition:background calc(var(--_k-hover-out) * 1ms)}
+.knobs-timeline:focus-visible .knobs-tl-track,.knobs-timeline[data-keyboard]:focus .knobs-tl-track{background:color-mix(in srgb,var(--_k-fill-selected) 80%,transparent)}
 .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;overflow:hidden;text-overflow:ellipsis;pointer-events:auto;cursor:grab;transition:background .15s,color .15s}
+.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}
 @media(prefers-reduced-motion:reduce){.knobs-timeline :where(*,::before,::after){transition:none!important}}
 @media(prefers-reduced-motion:reduce){:is(.knobs-tree,.knobs-split>.knobs-divider,.knobs-pane-head,.knobs-pane-rail) :where(*,::before,::after){transition:none!important}}
-`;
+`, uiCss = () => aliased(css2 + readoutCss + overlayCss + bentoCss + activityCss + pickerCss + compareCss) + rolling_css_default, lookDefaults, tune = (s, m) => {
+  s.omega = m.omega;
+  s.zeta = m.zeta;
+  return s;
+}, svg = (body, box = 16) => `<svg viewBox="0 0 ${box} ${box}" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">${body}</svg>`, ICONS;
+var init_look = __esm(() => {
+  init_appearance();
+  init_activity_css();
+  init_picker_css();
+  init_root();
+  init_glide();
+  init_motion();
+  init_keys();
   lookDefaults = { current: {} };
   ICONS = {
     caret: svg('<path d="M6 3.5 10.5 8 6 12.5"/>'),
@@ -1338,73 +2930,73 @@ var storageKey = (id, part) => `knobs:${encodeURIComponent(id)}:${part}:v1`;
 // src/ui/diff-css.ts
 var snappy2, diffCss;
 var init_diff_css = __esm(() => {
-  snappy2 = springCss({ duration: 0.25, bounce: 0 });
+  init_motion();
+  snappy2 = springCss(SPRINGS.snappy);
   diffCss = `
 @property --kd-ft{syntax:"<length>";inherits:false;initial-value:0px}
 @property --kd-fb{syntax:"<length>";inherits:false;initial-value:0px}
-:where(.knobs-ui){--kd-add:var(--k-diff-add,color-mix(in oklab,#3fb950 70%,var(--ku-text)));--kd-del:var(--k-diff-del,color-mix(in oklab,#f0524a 70%,var(--ku-text)));
-  --kd-mod:var(--k-diff-mod,color-mix(in oklab,#d29922 72%,var(--ku-text)));--kd-move:var(--k-diff-move,color-mix(in oklab,#58a6ff 68%,var(--ku-text)))}
+:where(.knobs-ui){--kd-add:var(--_k-diff-add);--kd-del:var(--_k-diff-del);--kd-mod:var(--_k-diff-mod);--kd-move:var(--k-diff-move,var(--_k-info))}
 :where(.knobs-diff,.knobs-diff *,.knobs-diff-files,.knobs-diff-files *){box-sizing:border-box}
-.knobs-ui.knobs-diff{--kd-bg:var(--k-diff-bg,var(--ku-bg));--kd-solid:var(--kd-fill,var(--kd-bg));--kd-line:calc(var(--ku-font-size) * 1.5);
-  --kd-i:var(--k-diff-inset,8px);--kd-x:var(--kd-i);--kd-inner:max(3px,calc(var(--ku-pane-radius) - var(--kd-i)));--kd-ctl:var(--kd-inner);
-  --kd-head:calc(var(--ku-control-h) + 2 * var(--kd-i));--kd-fade:var(--k-diff-fade,20px);--kd-stick:0px;position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
-  background:var(--kd-bg);border-radius:var(--ku-pane-radius);font:var(--ku-font-weight) var(--ku-font-size)/1.35 var(--ku-font);color:var(--ku-text);text-align:left;
+.knobs-ui.knobs-diff{--kd-bg:var(--k-diff-bg,var(--_kd-bg,var(--_k-bg)));--kd-solid:var(--kd-fill,var(--kd-bg));--kd-line:calc(var(--_k-font-size) * 1.5);
+  --kd-i:var(--k-diff-inset,8px);--kd-x:var(--kd-i);--kd-inner:max(3px,calc(var(--_ku-pane-radius) - var(--kd-i)));--kd-ctl:var(--kd-inner);
+  --kd-head:calc(var(--_k-control-h) + 2 * var(--kd-i));--kd-fade:var(--k-diff-fade,20px);--kd-stick:0px;position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;
+  background:var(--kd-bg);border-radius:var(--_ku-pane-radius);font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;
   letter-spacing:normal;word-spacing:normal;text-transform:none;-webkit-font-smoothing:antialiased}
 .knobs-ui.knobs-diff[data-height="auto"]{height:auto}
-.knobs-diff::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:var(--ku-pane-ring);pointer-events:none}
+.knobs-diff::after{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;box-shadow:var(--_ku-pane-ring);pointer-events:none}
 .knobs-diff [hidden],.knobs-diff-files [hidden]{display:none!important}
 .knobs-diff svg{display:block;flex:none}
-.knobs-ui.knobs-diff[data-on="surface"]{--kd-x:0px;--kd-head:var(--ku-control-h);--kd-ctl:var(--ku-radius)}
+.knobs-ui.knobs-diff[data-on="surface"]{--kd-x:0px;--kd-head:var(--_k-control-h);--kd-ctl:var(--_k-radius)}
 /* The header's hairline shows only once the code has scrolled under it. */
 .knobs-diff-head{position:relative;z-index:1;flex:none;display:flex;align-items:center;gap:8px;height:var(--kd-head);padding:0 var(--kd-x);
   box-shadow:inset 0 -1px transparent;transition:box-shadow .15s;user-select:none;-webkit-user-select:none}
-.knobs-diff[data-scrolled]>.knobs-diff-head{box-shadow:inset 0 -1px var(--ku-line)}
+.knobs-diff[data-scrolled]>.knobs-diff-head{box-shadow:inset 0 -1px var(--_k-border)}
 .knobs-diff-path{flex:0 1 auto;min-width:0;overflow:hidden;white-space:nowrap}
-.knobs-diff-dir,.knobs-diff-from{color:var(--ku-dim)}
-.knobs-diff-base{color:var(--ku-text);font-weight:var(--ku-title-weight)}
+.knobs-diff-dir,.knobs-diff-from{color:var(--_k-fg-3)}
+.knobs-diff-base{color:var(--_k-fg);font-weight:var(--_k-weight-title)}
 .knobs-diff-stat,.knobs-diff-counts{flex:none;display:inline-flex;gap:6px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-diff-stat{font-size:var(--ku-text-meta);align-items:center}
+.knobs-diff-stat{font-size:var(--_k-text-meta);align-items:center}
 /* +/− as five squares, GitHub's way. */
 .knobs-diff-bar{display:inline-flex;gap:1px;margin-left:1px}
-.knobs-diff-bar>i{width:6px;height:6px;border-radius:1.5px;background:color-mix(in srgb,var(--ku-text) 14%,transparent)}
+.knobs-diff-bar>i{width:6px;height:6px;border-radius:1.5px;background:color-mix(in srgb,var(--_k-fg) 14%,transparent)}
 .knobs-diff-bar>i[data-kind="add"]{background:var(--kd-add)}
 .knobs-diff-bar>i[data-kind="del"]{background:var(--kd-del)}
 .knobs-diff-add{color:var(--kd-add)}
 .knobs-diff-del{color:var(--kd-del)}
 .knobs-diff-counts>:empty{display:none}
-.knobs-diff-status{font:600 calc(var(--ku-font-size) - 2px)/1 var(--ku-mono);color:var(--ku-dim)}
+.knobs-diff-status{font:600 calc(var(--_k-font-size) - 2px)/1 var(--_k-mono);color:var(--_k-fg-3)}
 .knobs-diff-status[data-change="change"]{color:var(--kd-mod)}
 .knobs-diff-status[data-change="new"]{color:var(--kd-add)}
 .knobs-diff-status[data-change="deleted"]{color:var(--kd-del)}
 .knobs-diff-status[data-change="rename"]{color:var(--kd-move)}
 .knobs-diff-fill{flex:1}
-.knobs-diff-nav{flex:none;display:inline-flex;align-items:center;gap:1px;color:var(--ku-dim);font-size:var(--ku-text-meta);font-variant-numeric:tabular-nums}
+.knobs-diff-nav{flex:none;display:inline-flex;align-items:center;gap:1px;color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-diff-nav>span{min-width:3.6em;text-align:center}
 :where(.knobs-ui) :is(.knobs-diff-btn,.knobs-diff-seg>button,.knobs-diff-viewed,.knobs-diff-filter>input,.knobs-diff-filter>button){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;border-radius:0;
   margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:calc(var(--ku-radius) * 999);color:var(--ku-dim);cursor:pointer;
+.knobs-ui .knobs-diff-btn{flex:none;display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:calc(var(--_k-radius) * 999);color:var(--_k-fg-3);cursor:pointer;
   transition:background .15s,color .15s,opacity .15s}
-.knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--ku-wash-hi);color:var(--ku-text)}
-.knobs-ui .knobs-diff-btn[aria-pressed="true"]{color:var(--ku-text);background:var(--ku-wash)}
+.knobs-ui .knobs-diff-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-diff-btn[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-ui .knobs-diff-btn:disabled{opacity:.35;cursor:default;background:transparent}
 .knobs-diff-btn svg{width:13px;height:13px}
 /* Viewed: a check with its word, as on GitHub; the path dims once it's ticked. */
-.knobs-ui .knobs-diff-viewed{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--ku-control-h);padding:0 8px 0 6px;border-radius:var(--kd-ctl);color:var(--ku-label);
-  font-size:var(--ku-text-meta);font-weight:var(--ku-label-weight);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--ku-wash-hi);color:var(--ku-text)}
-.knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--ku-text);background:var(--ku-wash)}
+.knobs-ui .knobs-diff-viewed{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--_k-control-h);padding:0 8px 0 6px;border-radius:var(--kd-ctl);color:var(--_k-fg-2);
+  font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
+.knobs-ui .knobs-diff-viewed:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-diff-viewed[aria-pressed="true"]{color:var(--_k-fg);background:var(--_ku-wash)}
 .knobs-diff-viewed svg{width:13px;height:13px}
 .knobs-diff-viewed[aria-pressed="true"] svg{color:var(--kd-add)}
 .knobs-diff-path{transition:opacity .2s}
 .knobs-diff[data-viewed]>.knobs-diff-head .knobs-diff-path,.knobs-diff-part[data-viewed] .knobs-diff-path{opacity:.6}
 /* Split | Unified: one pill that glides between the two, raised as a panel's segments are (a
    lighter bg in dark, near white in light). */
-.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--ku-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--ku-seg-bg)}
-.knobs-ui .knobs-diff-seg>button{position:relative;z-index:1;padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--ku-label);font-size:var(--ku-text-meta);
-  font-weight:var(--ku-label-weight);white-space:nowrap;cursor:pointer;transition:color .15s}
-.knobs-ui .knobs-diff-seg>button:is(:hover,:focus-visible),.knobs-ui .knobs-diff-seg>button[aria-checked="true"]{color:var(--ku-text)}
-.knobs-diff-pill{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:max(0px,calc(var(--kd-ctl) - 2px));background:var(--k-pill-bg,color-mix(in oklab,var(--ku-bg) 88%,#fff));
-  box-shadow:0 1px 2px rgba(0,0,0,calc(.16 * var(--k-lift,1)));transition:transform var(--ku-ease-ms) var(--ku-ease)}
+.knobs-diff-seg{position:relative;flex:none;display:grid;grid-template-columns:1fr 1fr;height:var(--_k-control-h);padding:2px;border-radius:var(--kd-ctl);background:var(--_k-segmented-track)}
+.knobs-ui .knobs-diff-seg>button{position:relative;z-index:1;padding:0 9px;border-radius:max(0px,calc(var(--kd-ctl) - 2px));color:var(--_k-fg-2);font-size:var(--_k-text-meta);
+  font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:color .15s}
+.knobs-ui .knobs-diff-seg>button:is(:hover,:focus-visible),.knobs-ui .knobs-diff-seg>button[aria-checked="true"]{color:var(--_k-fg)}
+.knobs-diff-pill{position:absolute;top:2px;bottom:2px;left:2px;width:calc(50% - 2px);border-radius:max(0px,calc(var(--kd-ctl) - 2px));background:color-mix(in srgb,var(--_k-accent) 18%,var(--_k-segmented-active));
+  box-shadow:0 1px 2px rgba(0,0,0,calc(.16 * var(--k-lift,1)));transition:transform var(--_ku-ease-ms) var(--_ku-ease)}
 .knobs-diff-seg[data-value="unified"]>.knobs-diff-pill{transform:translateX(100%)}
 .knobs-diff[data-frame="flat"] .knobs-diff-pill{box-shadow:none}
 /* The diff: one layer per file or layout on show, the old fading under the new. */
@@ -1425,30 +3017,30 @@ var init_diff_css = __esm(() => {
 .knobs-diff-scroll::-webkit-scrollbar{display:none;width:0;height:0}
 .knobs-diff-layer{position:absolute;inset:0;z-index:4;pointer-events:none;overflow:hidden}
 .knobs-diff-hbar{position:absolute;height:5px;pointer-events:none}
-.knobs-diff-hbar>i{position:absolute;left:0;top:0;height:5px;border-radius:3px;background:color-mix(in srgb,var(--ku-text) 30%,transparent);opacity:0;pointer-events:none;
+.knobs-diff-hbar>i{position:absolute;left:0;top:0;height:5px;border-radius:3px;background:color-mix(in srgb,var(--_k-fg) 30%,transparent);opacity:0;pointer-events:none;
   transition:opacity .3s,background .15s}
 .knobs-diff-body:hover .knobs-diff-hbar>i,.knobs-diff-hbar:is([data-active],[data-dragging])>i{opacity:1;pointer-events:auto;transition-duration:.12s,.15s}
-.knobs-diff-hbar>i:hover,.knobs-diff-hbar[data-dragging]>i{background:color-mix(in srgb,var(--ku-text) 48%,transparent)}
+.knobs-diff-hbar>i:hover,.knobs-diff-hbar[data-dragging]>i{background:color-mix(in srgb,var(--_k-fg) 48%,transparent)}
 /* stack: every file down one scroller, each header sticking until the next pushes it off. It's
    flush (square, no card around its file), opaque in the code's own colour, with a hairline
    under it only while it's stuck; a gap, not a line, parts one file from the next. */
-.knobs-diff[data-stack]{--kd-stick:var(--ku-row)}
+.knobs-diff[data-stack]{--kd-stick:var(--_k-row)}
 .knobs-diff-part+.knobs-diff-part{margin-top:var(--kd-i)}
-.knobs-diff-part-head{position:sticky;top:0;z-index:2;border-radius:0;display:flex;align-items:center;gap:8px;height:var(--ku-row);padding:0 var(--kd-x);background:var(--kd-solid);
+.knobs-diff-part-head{position:sticky;top:0;z-index:2;border-radius:0;display:flex;align-items:center;gap:8px;height:var(--_k-row);padding:0 var(--kd-x);background:var(--kd-solid);
   box-shadow:inset 0 0 transparent;transition:box-shadow .15s;user-select:none;-webkit-user-select:none}
-.knobs-diff-part>.knobs-diff-part-head[data-stuck]{box-shadow:inset 0 -1px var(--ku-line)}
-.knobs-diff-part-head .knobs-diff-counts{font-size:var(--ku-text-meta);align-items:center}
+.knobs-diff-part>.knobs-diff-part-head[data-stuck]{box-shadow:inset 0 -1px var(--_k-border)}
+.knobs-diff-part-head .knobs-diff-counts{font-size:var(--_k-text-meta);align-items:center}
 .knobs-diff-part-head .knobs-diff-status{flex:none;width:10px}
-.knobs-diff-part-note{padding:var(--kd-i) var(--kd-x);color:var(--ku-dim)}
+.knobs-diff-part-note{padding:var(--kd-i) var(--kd-x);color:var(--_k-fg-3)}
 .knobs-diff[data-height="auto"] .knobs-diff-scroll{overscroll-behavior:auto}
 .knobs-diff-slot[data-leaving]{pointer-events:none}
-.knobs-diff-note{position:absolute;inset:0;display:grid;place-items:center;padding:12px;color:var(--ku-dim);text-align:center;pointer-events:none;transition:opacity .2s}
-.knobs-diff[data-height="auto"] .knobs-diff-note{position:static;min-height:calc(var(--ku-row) * 2)}
+.knobs-diff-note{position:absolute;inset:0;display:grid;place-items:center;padding:12px;color:var(--_k-fg-3);text-align:center;pointer-events:none;transition:opacity .2s}
+.knobs-diff[data-height="auto"] .knobs-diff-note{position:static;min-height:calc(var(--_k-row) * 2)}
 .knobs-diff diffs-container{
   --diffs-bg:var(--kd-solid);
-  --diffs-font-family:var(--ku-mono);
-  --diffs-header-font-family:var(--ku-font);
-  --diffs-font-size:calc(var(--ku-font-size) - .5px);
+  --diffs-font-family:var(--_k-mono);
+  --diffs-header-font-family:var(--_k-font);
+  --diffs-font-size:calc(var(--_k-font-size) - .5px);
   --diffs-line-height:var(--kd-line);
   --diffs-gap-inline:var(--kd-x);
   --diffs-gap-block:var(--kd-i);
@@ -1463,47 +3055,47 @@ var init_diff_css = __esm(() => {
   --diffs-bg-deletion-number-override:color-mix(in srgb,var(--kd-del) 55%,var(--kd-solid));
   --diffs-bg-addition-emphasis-override:color-mix(in srgb,var(--kd-add) 22%,transparent);
   --diffs-bg-deletion-emphasis-override:color-mix(in srgb,var(--kd-del) 22%,transparent);
-  --diffs-bg-separator-override:color-mix(in srgb,var(--ku-text) 4.5%,var(--kd-solid));
-  --diffs-bg-context-override:color-mix(in srgb,var(--ku-text) 3%,var(--kd-solid));
-  --diffs-bg-buffer-override:color-mix(in srgb,var(--ku-text) 3.5%,var(--kd-solid));
-  --diffs-bg-selection-override:var(--ku-accent);
-  --diffs-fg-number-override:var(--ku-dim);
+  --diffs-bg-separator-override:color-mix(in srgb,var(--_k-fg) 4.5%,var(--kd-solid));
+  --diffs-bg-context-override:color-mix(in srgb,var(--_k-fg) 3%,var(--kd-solid));
+  --diffs-bg-buffer-override:color-mix(in srgb,var(--_k-fg) 3.5%,var(--kd-solid));
+  --diffs-bg-selection-override:var(--_k-accent);
+  --diffs-fg-number-override:var(--_k-fg-3);
 }
 /* diffReview: one card, the file list a drawer at its left (its width springs; the list inside
    is pinned to its right edge, so it slides out from under the diff), parted from the diff by a
    hairline. The diff in it draws no card of its own. */
-.knobs-ui.knobs-diff-review{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border-radius:var(--ku-pane-radius);background:var(--ku-pane-bg);
-  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}
-.knobs-diff-review::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:var(--ku-pane-ring);pointer-events:none}
+.knobs-ui.knobs-diff-review{position:relative;display:flex;width:100%;height:100%;min-width:0;min-height:0;overflow:hidden;border-radius:var(--_ku-pane-radius);background:var(--_ku-pane-bg);
+  font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;letter-spacing:normal;-webkit-font-smoothing:antialiased}
+.knobs-diff-review::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:var(--_ku-pane-ring);pointer-events:none}
 :where(.knobs-diff-review,.knobs-diff-review *){box-sizing:border-box}
-.knobs-diff-drawer{position:relative;flex:none;width:0;height:100%;overflow:hidden;box-shadow:inset -1px 0 var(--ku-line)}
+.knobs-diff-drawer{position:relative;flex:none;width:0;height:100%;overflow:hidden;box-shadow:inset -1px 0 var(--_k-border)}
 .knobs-diff-drawer[data-shut]{visibility:hidden}
 .knobs-diff-drawer-in{position:absolute;top:0;bottom:0;right:0;display:flex;flex-direction:column}
-.knobs-diff-drawer-head{flex:none;display:flex;align-items:center;gap:6px;height:calc(var(--ku-control-h) + 2 * var(--k-diff-inset,8px));padding:0 var(--k-diff-inset,8px) 0 calc(var(--ku-row-x) + 8px);
+.knobs-diff-drawer-head{flex:none;display:flex;align-items:center;gap:6px;height:calc(var(--_k-control-h) + 2 * var(--k-diff-inset,8px));padding:0 var(--k-diff-inset,8px) 0 calc(var(--_ku-row-x) + 8px);
   user-select:none;-webkit-user-select:none}
-.knobs-diff-drawer-title{font-weight:var(--ku-title-weight)}
-.knobs-diff-drawer-count{color:var(--ku-dim);font-size:var(--ku-text-meta);font-variant-numeric:tabular-nums}
+.knobs-diff-drawer-title{font-weight:var(--_k-weight-title)}
+.knobs-diff-drawer-count{color:var(--_k-fg-3);font-size:var(--_k-text-meta);font-variant-numeric:tabular-nums}
 .knobs-diff-drawer-in>.knobs-diff-files{flex:1;min-height:0;height:auto}
 .knobs-diff-main{position:relative;flex:1;min-width:0;height:100%}
 /* height: "auto": the card as tall as its diff; the drawer stretches to it. */
 .knobs-ui.knobs-diff-review[data-height="auto"],.knobs-diff-review[data-height="auto"]>:is(.knobs-diff-drawer,.knobs-diff-main){height:auto}
-.knobs-diff-review .knobs-ui.knobs-diff{--k-diff-bg:transparent;--ku-pane-ring:none;border-radius:0}
+.knobs-diff-review .knobs-ui.knobs-diff{--_kd-bg:transparent;--_ku-pane-ring:none;border-radius:0}
 .knobs-ui .knobs-diff-toggle{margin-left:-4px}
 .knobs-ui .knobs-diff-toggle[aria-pressed]:not(:hover,:focus-visible){background:transparent}
 /* diffReview's file list: a filter over a compact tree, a status letter, the counts and their
    bar on each file; one highlight glides to the file on show. Viewed files dim, with a tick. */
 .knobs-diff-files{--k-row:var(--k-diff-row,28px);display:flex;flex-direction:column;height:100%;min-height:0;padding-top:2px}
-.knobs-diff-filter{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:26px;margin:0 var(--ku-row-x) 4px;padding:0 4px 0 8px;
-  border-radius:max(6px,var(--ku-row-radius));background:var(--ku-wash);color:var(--ku-dim);box-shadow:inset 0 0 0 1px transparent;transition:background .15s,box-shadow .15s}
-.knobs-diff-filter:focus-within{background:var(--ku-wash-hi);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ku-accent) 45%,transparent)}
+.knobs-diff-filter{position:relative;flex:none;display:flex;align-items:center;gap:6px;height:26px;margin:0 var(--_ku-row-x) 4px;padding:0 4px 0 8px;
+  border-radius:max(6px,var(--_ku-row-radius));background:var(--_ku-wash);color:var(--_k-fg-3);box-shadow:inset 0 0 0 1px transparent;transition:background .15s,box-shadow .15s}
+.knobs-diff-filter:focus-within{background:var(--_ku-wash-hi);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--_k-accent) 45%,transparent)}
 .knobs-diff-filter svg{width:12px;height:12px;flex:none}
-.knobs-ui .knobs-diff-filter>input{flex:1;min-width:0;height:100%;font:var(--ku-font-weight) var(--ku-font-size)/1 var(--ku-font);color:var(--ku-text);caret-color:var(--ku-accent);background:transparent}
-.knobs-ui .knobs-diff-filter>input::placeholder{color:var(--ku-dim)}
-.knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--ku-dim);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
-.knobs-ui .knobs-diff-filter>button:hover{background:var(--ku-wash-hi);color:var(--ku-text)}
+.knobs-ui .knobs-diff-filter>input{flex:1;min-width:0;height:100%;font:var(--_k-weight) var(--_k-font-size)/1 var(--_k-font);color:var(--_k-fg);caret-color:var(--_k-accent);background:transparent}
+.knobs-ui .knobs-diff-filter>input::placeholder{color:var(--_k-fg-3)}
+.knobs-ui .knobs-diff-filter>button{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;color:var(--_k-fg-3);cursor:pointer;transition:background .12s,color .12s,opacity .12s}
+.knobs-ui .knobs-diff-filter>button:hover{background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-diff-filter>button svg{width:10px;height:10px}
 .knobs-diff-list{position:relative;flex:1;min-height:0}
-.knobs-diff-files .knobs-diff-counts{font-size:var(--ku-text-meta);align-items:center}
+.knobs-diff-files .knobs-diff-counts{font-size:var(--_k-text-meta);align-items:center}
 .knobs-diff-files .knobs-diff-counts{gap:5px}
 .knobs-diff-files .knobs-diff-bar{margin-left:0}
 .knobs-diff-files .knobs-diff-bar>i{width:4px;height:4px;border-radius:1px}
@@ -2218,6 +3810,40 @@ function parseCssColor(raw, fallback = [1, 1, 1, 1]) {
   cache.set(s, out);
   return out;
 }
+function pickScheme(raw, light) {
+  let s = raw;
+  for (let at = s.lastIndexOf("light-dark(");at >= 0; at = s.lastIndexOf("light-dark(")) {
+    let depth = 0;
+    let comma = -1;
+    let end = -1;
+    for (let i = at + 11;i < s.length; i++) {
+      const 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;
+    const 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;
+}
+function tokenColor(style, name, fallback) {
+  const raw = style.getPropertyValue(name).trim();
+  return raw ? parseCssColor(pickScheme(raw, isLightStyle(style)), fallback) : fallback;
+}
+function tokenCss(style, name, fallback) {
+  const raw = style.getPropertyValue(name).trim();
+  return raw ? pickScheme(raw, isLightStyle(style)) : fallback;
+}
 var cache, probe = null, probeCtx = () => {
   if (probe)
     return probe;
@@ -2229,7 +3855,7 @@ var cache, probe = null, probeCtx = () => {
     probe = c.getContext("2d", { willReadFrequently: true });
   }
   return probe;
-}, rgbaCss = (c) => `rgba(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)},${Math.round(c[3] * 1000) / 1000})`;
+}, rgbaCss = (c) => `rgba(${Math.round(c[0] * 255)},${Math.round(c[1] * 255)},${Math.round(c[2] * 255)},${Math.round(c[3] * 1000) / 1000})`, isLightStyle = (style) => style.getPropertyValue("--_k-light").trim() === "1";
 var init_rgba = __esm(() => {
   cache = new Map;
 });
@@ -2700,13 +4326,13 @@ function hintTokens(doc, groups) {
   };
   const panel = doc.querySelector(".knobs-panel");
   const piece = groups.find((g) => g.source && !g.source.paint)?.source?.root;
-  const pick = (k, fallback) => read(panel, [`--k-${k}`]) || read(piece, [`--ku-${k}`, `--k-${k}`]) || fallback;
+  const pick = (k, fallback) => read(panel, [`--_k-${k}`]) || read(piece, [`--_k-${k}`]) || fallback;
   return {
     "--kh-accent": pick("accent", "#fff"),
     "--kh-bg": pick("bg", "#1c1c1e"),
     "--kh-mono": pick("mono", "ui-monospace,Menlo,monospace"),
-    "--kh-radius": read(panel, ["--k-radius-sm"]) || "4px",
-    "--kh-size": read(panel, ["--k-text-cap"]) || "10px",
+    "--kh-radius": read(panel, ["--_k-radius-sm"]) || "4px",
+    "--kh-size": read(panel, ["--_k-text-cap"]) || "10px",
     "--kh-typed": read(panel, ["--k-hint-typed-opacity"]) || ".42",
     "--kh-lift": read(panel, ["--k-lift"]) || "1",
     "--kh-ease": read(panel, ["--k-ease"]) || "cubic-bezier(.2,.8,.2,1)"
@@ -3054,7 +4680,7 @@ function tree(container, options) {
   root.setAttribute("aria-multiselectable", "true");
   if (options.label)
     root.setAttribute("aria-label", options.label);
-  applyLook(root, options);
+  applyLook2(root, options);
   const space = doc.createElement("div");
   space.className = "knobs-tree-space";
   const line = doc.createElement("div");
@@ -3099,7 +4725,7 @@ function tree(container, options) {
   const measure = () => {
     syncFrame(root);
     const probe = doc.createElement("div");
-    probe.style.cssText = "position:absolute;visibility:hidden;height:var(--ku-row);width:var(--ku-indent);padding-left:var(--ku-inset)";
+    probe.style.cssText = "position:absolute;visibility:hidden;height:var(--_k-row);width:var(--_ku-indent);padding-left:var(--_k-inset)";
     root.append(probe);
     const r = probe.getBoundingClientRect();
     h = options.rowHeight ?? (r.height || 26);
@@ -3618,11 +5244,8 @@ function tree(container, options) {
   function beginDrag(id) {
     const ids = topmost(items, access, isSelected(id) ? sel.ids : [id]);
     const ghost = doc.createElement("div");
-    ghost.className = "knobs-ui knobs-tree-ghost";
-    if (options.preset)
-      ghost.dataset.preset = options.preset.name;
-    if (options.theme)
-      ghost.dataset.theme = options.theme;
+    ghost.className = "knobs-root knobs-ui knobs-tree-ghost";
+    applyLook(ghost, lookAt(root));
     ghost.textContent = ids.length === 1 ? renamed.get(ids[0]) ?? access.label(index.get(ids[0]).item) : `${ids.length} items`;
     doc.body.append(ghost);
     dragging = { ids, ghost, x: press.x, y: press.y, hoverAt: 0, hoverId: null };
@@ -3968,10 +5591,12 @@ function builtinIcon(id, on) {
 }
 var MOVE, EDGE = 28;
 var init_tree = __esm(() => {
+  init_appearance();
+  init_motion();
   init_page_hints();
   init_look();
   init_tree_model();
-  MOVE = springMotion({ duration: 0.3, bounce: 0 });
+  MOVE = springMotion(SPRINGS.default);
 });
 
 // src/ui/diff.ts
@@ -3980,7 +5605,7 @@ function injectDiffStyles(doc) {
     return;
   const style = doc.createElement("style");
   style.dataset.knobsUiDiff = "";
-  style.textContent = diffCss;
+  style.textContent = aliased(diffCss);
   doc.head.append(style);
 }
 function diffCounts(file, doc = document, options = {}) {
@@ -4036,10 +5661,10 @@ function backdrop(el, view) {
   if (!out)
     return null;
   for (let i = layers.length - 1;i >= 0; i--)
-    out = over(layers[i], out);
+    out = over2(layers[i], out);
   return out;
 }
-function over(top, under) {
+function over2(top, under) {
   const [r, g, b, a] = top;
   const [R, G, B, A] = under;
   const o = a + A * (1 - a);
@@ -4078,7 +5703,7 @@ function codeDiff(container, options) {
   root.dataset.height = auto ? "auto" : "fill";
   if (stack)
     root.dataset.stack = "";
-  applyLook(root, options);
+  applyLook2(root, options);
   injectDiffStyles(doc);
   const make = (tag, cls) => {
     const el = doc.createElement(tag);
@@ -4400,7 +6025,7 @@ function codeDiff(container, options) {
       scrolls.set(slot.file, slot.sc.scrollTop);
     slot.leaving = true;
     slot.el.dataset.leaving = "";
-    tune(slot.o, reducedMotion(win) ? FADE3 : OUT).set(0);
+    tune(slot.o, reducedMotion(win) ? FADE4 : OUT).set(0);
   };
   const say = (text) => {
     note.textContent = text ?? "";
@@ -4514,7 +6139,7 @@ function codeDiff(container, options) {
     slot.bars.rescan();
     slot.sc.scrollTop = same ? along * (slot.sc.scrollHeight - slot.sc.clientHeight) : scrolls.get(file.name) ?? 0;
     slot.fades.update();
-    tune(slot.o, reducedMotion(win) ? FADE3 : IN).snap(0).set(1);
+    tune(slot.o, reducedMotion(win) ? FADE4 : IN).snap(0).set(1);
     style(slot);
     live.push(slot);
     sizes.disconnect();
@@ -4829,7 +6454,7 @@ function codeDiff(container, options) {
       return;
     const behind = backdrop(root.parentElement, win);
     if (behind)
-      root.style.setProperty("--kd-fill", rgbaCss(over(own, behind)));
+      root.style.setProperty("--kd-fill", rgbaCss(over2(own, behind)));
   };
   const rescheme = () => {
     syncFrame(root);
@@ -5042,7 +6667,8 @@ function diffReview(container, options) {
   const doc = container.ownerDocument;
   const look = {
     ...options.preset ? { preset: options.preset } : {},
-    ...options.theme ? { theme: options.theme } : {}
+    ...options.theme ? { theme: options.theme } : {},
+    ...options.appearance ? { appearance: options.appearance } : {}
   };
   const title = options.title ?? "Files";
   const store = options.storage === undefined ? browserStorage() : options.storage;
@@ -5065,7 +6691,7 @@ function diffReview(container, options) {
   const root = doc.createElement("div");
   root.className = "knobs-diff-review";
   root.dataset.height = options.height ?? "fill";
-  applyLook(root, look);
+  applyLook2(root, look);
   injectDiffStyles(doc);
   const drawer = doc.createElement("div");
   drawer.className = "knobs-diff-drawer";
@@ -5369,19 +6995,21 @@ function diffReview(container, options) {
     }
   };
 }
-var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE3, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
+var lib, load = () => lib ??= import("@pierre/diffs"), SYNTAX, IN, OUT, FADE4, HEIGHT, DRAWER, BLUR = 3, WRAP, PREV, UNVIEWED, VIEWED, SEARCH, CLEAR2, SIDEBAR, SEPARATOR = 32;
 var init_diff = __esm(() => {
+  init_glide();
+  init_motion();
   init_diff_css();
   init_diff_model();
   init_look();
   init_rgba();
   init_tree();
   SYNTAX = { dark: "pierre-dark", light: "pierre-light" };
-  IN = springMotion({ duration: 0.3, bounce: 0 });
-  OUT = springMotion({ duration: 0.24, bounce: 0 });
-  FADE3 = springMotion({ duration: 0.16, bounce: 0 });
-  HEIGHT = springMotion({ duration: 0.4, bounce: 0 });
-  DRAWER = springMotion({ duration: 0.4, bounce: 0 });
+  IN = springMotion(SPRINGS.default);
+  OUT = springMotion(SPRINGS.snappy);
+  FADE4 = springMotion(FADE);
+  HEIGHT = springMotion(SPRINGS.calm);
+  DRAWER = springMotion(SPRINGS.calm);
   WRAP = svg('<path d="M2.5 4h11"/><path d="M2.5 8h9a2 2 0 0 1 0 4H8.5"/><path d="M10 10.5 8.5 12l1.5 1.5"/><path d="M2.5 12h3"/>');
   PREV = svg('<path d="M10 3.5 5.5 8l4.5 4.5"/>');
   UNVIEWED = svg('<circle cx="8" cy="8" r="5.5"/>');
@@ -5406,7 +7034,7 @@ function layerElement(doc, cls, look) {
   const el = doc.createElement("div");
   el.className = cls;
   layerRoot(doc).append(el);
-  applyLook(el, lookOf(look));
+  applyLook2(el, lookOf(look));
   return el;
 }
 function presence(el, o = {}) {
@@ -5445,7 +7073,7 @@ function presence(el, o = {}) {
   });
   const tune = (seconds, zeta) => {
     const reduced = reducedMotion(win);
-    spring.omega = 2 * Math.PI / (reduced ? 0.16 : seconds);
+    spring.omega = 2 * Math.PI / (reduced ? FADE.duration : seconds);
     spring.zeta = reduced ? 1 : zeta;
   };
   render();
@@ -5573,6 +7201,7 @@ var lookOf = (look) => ({ ...lookDefaults.current, ...look }), roots, stacks, FO
   h: doc.documentElement.clientHeight
 });
 var init_layer = __esm(() => {
+  init_motion();
   init_look();
   roots = new WeakMap;
   stacks = new WeakMap;
@@ -5667,7 +7296,7 @@ function softClamp(x, min, max, knee = 12) {
     return min + k * Math.exp(-(min + k - x) / k);
   return x;
 }
-function solve(input) {
+function solve2(input) {
   const { panes, sizes, collapsed, fixed = {} } = input;
   const rail = input.rail ?? (() => 0);
   const room = Math.max(0, input.total - (input.divider ?? 1) * Math.max(0, panes.length - 1));
@@ -5789,15 +7418,15 @@ function foldProgress(size, open, rail) {
   return Math.min(1, Math.max(0, (open - size) / span));
 }
 function face(prev, away) {
-  const lo = clamp01(1 - away / FACE_IN);
-  const hi = clamp01(1 - away / FACE_OUT);
+  const lo = clamp012(1 - away / FACE_IN);
+  const hi = clamp012(1 - away / FACE_OUT);
   return Math.min(hi, Math.max(lo, prev));
 }
 function foldFaces(prev, p) {
   return { content: face(prev.content, p), rail: face(prev.rail, 1 - p) };
 }
 function chevronTurn(p, edge) {
-  return (edge === "start" ? 180 : -180) * (1 - clamp01(p));
+  return (edge === "start" ? 180 : -180) * (1 - clamp012(p));
 }
 function chevronFlip(f, edge) {
   return chevronTurn(f, edge);
@@ -5811,7 +7440,7 @@ function foldStyle(options = {}) {
   };
 }
 function titleTravel(at, open, rail, edge, p) {
-  const k = 1 - clamp01(p);
+  const k = 1 - clamp012(p);
   const dx = at.title - at.label - (edge === "start" ? open - rail : 0);
   return { x: dx * k, y: at.dy * k, turn: -90 * k };
 }
@@ -5840,7 +7469,7 @@ function serializeLayout(layout) {
       collapsed[id] = true;
   return JSON.stringify({ sizes, collapsed });
 }
-var DEFAULT_MIN = 48, COLLAPSE_PAST = 40, paneMin = (p) => Math.max(0, p.min ?? DEFAULT_MIN), paneMax = (p) => Math.max(paneMin(p), p.max ?? Number.POSITIVE_INFINITY), FACE_OUT = 0.4, FACE_IN = 0.3, clamp01 = (x) => Math.min(1, Math.max(0, x)), FOLD_STYLE;
+var DEFAULT_MIN = 48, COLLAPSE_PAST = 40, paneMin = (p) => Math.max(0, p.min ?? DEFAULT_MIN), paneMax = (p) => Math.max(paneMin(p), p.max ?? Number.POSITIVE_INFINITY), FACE_OUT = 0.4, FACE_IN = 0.3, clamp012 = (x) => Math.min(1, Math.max(0, x)), FOLD_STYLE;
 var init_split_model = __esm(() => {
   FOLD_STYLE = { chevron: "flip", title: "travel", duration: 0.25 };
 });
@@ -6418,7 +8047,7 @@ function timeline(container, options) {
   root.setAttribute("aria-roledescription", "timeline");
   root.setAttribute("aria-label", options.label ?? "Timeline");
   root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight , . Home End [ ] I O M");
-  applyLook(root, options);
+  applyLook2(root, options);
   const transport = el("div", "knobs-tl-transport");
   const playBtn = el("button", "knobs-tl-play");
   playBtn.type = "button";
@@ -6475,11 +8104,11 @@ function timeline(container, options) {
   const readColors = () => {
     const cs = win.getComputedStyle(root);
     colors = {
-      tick: cs.getPropertyValue("--ku-line-hi").trim() || "rgba(255,255,255,.18)",
-      major: cs.getPropertyValue("--ku-dim").trim() || "rgba(255,255,255,.42)",
-      label: cs.getPropertyValue("--ku-label").trim() || "rgba(255,255,255,.64)",
-      line: cs.getPropertyValue("--ku-line").trim() || "rgba(255,255,255,.1)",
-      font: `${cs.getPropertyValue("--ku-font-weight").trim() || 400} ${cs.getPropertyValue("--ku-text-meta").trim() || "11px"} ${cs.getPropertyValue("--ku-font").trim() || "system-ui"}`
+      tick: tokenCss(cs, "--kv-border-strong", "rgba(255,255,255,.18)"),
+      major: tokenCss(cs, "--kv-fg-3", "rgba(255,255,255,.42)"),
+      label: tokenCss(cs, "--kv-fg-2", "rgba(255,255,255,.64)"),
+      line: tokenCss(cs, "--kv-border", "rgba(255,255,255,.1)"),
+      font: `${cs.getPropertyValue("--_k-weight").trim() || 400} ${(Number.parseFloat(cs.fontSize) || 12) - 1}px ${cs.getPropertyValue("--_k-font").trim() || "system-ui"}`
     };
     drawn = "";
   };
@@ -7346,14 +8975,16 @@ function timeline(container, options) {
 }
 var RULER = 22, INSTANT2, CALM, GLIDE, uid2 = 0, PLAY2 = '<svg viewBox="0 0 16 16" aria-hidden="true"><path d="M5 3.6v8.8c0 .5.5.8.9.5l6.6-4.4c.4-.3.4-.8 0-1L5.9 3.1c-.4-.3-.9 0-.9.5Z" fill="currentColor"/></svg>', PAUSE = '<svg viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/><rect x="9.2" y="3.2" width="2.8" height="9.6" rx="1" fill="currentColor"/></svg>';
 var init_timeline = __esm(() => {
+  init_rgba();
+  init_motion();
   init_page_hints();
   init_menu();
   init_look();
   init_split_model();
   init_timeline_model();
-  INSTANT2 = springMotion({ duration: 0.1, bounce: 0 });
-  CALM = springMotion({ duration: 0.4, bounce: 0 });
-  GLIDE = springMotion({ duration: 0.22, bounce: 0 });
+  INSTANT2 = springMotion(SPRINGS.instant);
+  CALM = springMotion(SPRINGS.calm);
+  GLIDE = springMotion(SPRINGS.snappy);
 });
 
 // src/ui/compare-model.ts
@@ -8464,7 +10095,7 @@ function compareStrip(container, options) {
   root.className = "knobs-cmp-strip";
   root.setAttribute("role", "img");
   root.setAttribute("aria-label", "Frame strip: Before over After, with how much they differ");
-  applyLook(root, options);
+  applyLook2(root, options);
   const canvas = doc.createElement("canvas");
   canvas.setAttribute("aria-hidden", "true");
   root.append(canvas);
@@ -8584,10 +10215,10 @@ function compareStrip(container, options) {
   const readColors = () => {
     const cs = win.getComputedStyle(root);
     colors = {
-      surface: rgba(cs.getPropertyValue("--ku-surface"), [1, 1, 1, 0.055]),
-      accent: rgba(cs.getPropertyValue("--ku-accent"), [1, 1, 1, 1]),
-      diff: rgba(cs.getPropertyValue("--ku-cmp-diff"), [0.49, 0.81, 0.61, 1]),
-      wash: rgba(cs.getPropertyValue("--ku-surface-hi"), [1, 1, 1, 0.11])
+      surface: rgba(tokenCss(cs, "--kv-fill", ""), [1, 1, 1, 0.055]),
+      accent: rgba(tokenCss(cs, "--kv-accent", ""), [1, 1, 1, 1]),
+      diff: rgba(tokenCss(cs, "--_ku-cmp-diff", ""), [0.49, 0.81, 0.61, 1]),
+      wash: rgba(tokenCss(cs, "--kv-fill-selected", ""), [1, 1, 1, 0.11])
     };
   };
   let hover = null;
@@ -8831,7 +10462,8 @@ function compare(container, options) {
   const win = doc.defaultView;
   const look = {
     ...options.preset ? { preset: options.preset } : {},
-    ...options.theme ? { theme: options.theme } : {}
+    ...options.theme ? { theme: options.theme } : {},
+    ...options.appearance ? { appearance: options.appearance } : {}
   };
   let mode = options.mode ?? "side";
   let wipe = Math.min(1, Math.max(0, options.wipe ?? 0.5));
@@ -8852,7 +10484,7 @@ function compare(container, options) {
   root.setAttribute("aria-roledescription", "compare");
   root.setAttribute("aria-label", options.label ?? "Compare");
   root.setAttribute("aria-keyshortcuts", "Space ArrowLeft ArrowRight Shift+ArrowLeft Shift+ArrowRight , . 1 2 3 4 S W D X Z L 0 = -");
-  applyLook(root, options);
+  applyLook2(root, options);
   root.dataset.mode = mode;
   if (auto)
     root.dataset.auto = "";
@@ -8860,7 +10492,7 @@ function compare(container, options) {
   const modes = el("div", "knobs-cmp-modes");
   modes.setAttribute("role", "radiogroup");
   modes.setAttribute("aria-label", "Mode");
-  const modeBtns = MODES.map((m, i) => {
+  const modeBtns = MODES2.map((m, i) => {
     const b = el("button", "knobs-cmp-mode");
     b.type = "button";
     b.tabIndex = -1;
@@ -8951,7 +10583,7 @@ function compare(container, options) {
   let pending = false;
   let gpu = null;
   const lay = new Spring(mode === "side" ? 0 : 1, LAYOUT2.omega, LAYOUT2.zeta, 0.0001);
-  const fade = new Spring(1, FADE5.omega, FADE5.zeta, 0.001);
+  const fade = new Spring(1, FADE6.omega, FADE6.zeta, 0.001);
   let fromMode = mode;
   let toMode = mode;
   let phase = false;
@@ -9286,7 +10918,7 @@ function compare(container, options) {
   };
   const syncModeUi = () => {
     root.dataset.mode = mode;
-    MODES.forEach((m, i) => {
+    MODES2.forEach((m, i) => {
       modeBtns[i].setAttribute("aria-checked", String(m.mode === mode));
     });
     handle.tabIndex = mode === "wipe" ? 0 : -1;
@@ -9296,7 +10928,7 @@ function compare(container, options) {
       return;
     mode = next;
     const reduced = reducedMotion(win);
-    tune(fade, reduced ? FADE_REDUCED : FADE5);
+    tune(fade, reduced ? FADE_REDUCED : FADE6);
     if (fade.x >= 0.5) {
       fromMode = toMode;
       fade.snap(0);
@@ -9646,7 +11278,7 @@ function compare(container, options) {
     stageRect = null;
   };
   const readColors = () => {
-    const c = parseCssColor(win.getComputedStyle(root).getPropertyValue("--ku-cmp-diff"), [0.49, 0.81, 0.61, 1]);
+    const c = tokenColor(win.getComputedStyle(root), "--_ku-cmp-diff", [0.49, 0.81, 0.61, 1]);
     accent = [c[0], c[1], c[2]];
     labelW = [labels[0].offsetWidth, labels[1].offsetWidth];
     requestDraw();
@@ -9912,7 +11544,7 @@ function compare(container, options) {
         if (e.altKey || e.shiftKey)
           return;
         claim();
-        return setMode(MODES[Number(key) - 1].mode);
+        return setMode(MODES2[Number(key) - 1].mode);
       case "x":
         if (e.altKey)
           return;
@@ -10047,7 +11679,7 @@ function compare(container, options) {
     holdLoupe(false);
   });
   const unregisterHints = options.hints === false ? undefined : hints.register(root, () => [
-    ...MODES.map((m, i) => ({
+    ...MODES2.map((m, i) => ({
       el: modeBtns[i],
       label: m.label,
       activate: () => setMode(m.mode)
@@ -10202,8 +11834,9 @@ function compare(container, options) {
     wake();
   return api;
 }
-var LAYOUT2, FADE5, FADE_REDUCED, ZOOM, FLICKER_MS = 400, SLOP = 12, INSET = 8, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODES, KEY_MODE;
+var LAYOUT2, FADE6, FADE_REDUCED, ZOOM, FLICKER_MS = 400, SLOP = 12, INSET = 8, LOUPE, FAST_SEEK_FRAMES = 15, RELEASE_MS = 3000, MODES2, KEY_MODE;
 var init_compare = __esm(() => {
+  init_motion();
   init_page_hints();
   init_compare_frames();
   init_compare_gpu();
@@ -10213,11 +11846,11 @@ var init_compare = __esm(() => {
   init_rgba();
   init_timeline();
   LAYOUT2 = springMotion({ duration: 0.35, bounce: 0 });
-  FADE5 = springMotion({ duration: 0.25, bounce: 0 });
-  FADE_REDUCED = springMotion({ duration: 0.15, bounce: 0 });
+  FADE6 = springMotion(SPRINGS.snappy);
+  FADE_REDUCED = springMotion(FADE);
   ZOOM = springMotion({ duration: 0.35, bounce: 0 });
   LOUPE = { r: 88, zoom: 4 };
-  MODES = [
+  MODES2 = [
     { mode: "side", label: "Side by side", key: "S" },
     { mode: "wipe", label: "Wipe", key: "W" },
     { mode: "difference", label: "Difference", key: "D" },
@@ -10961,6 +12594,10 @@ function rt(e, t) {
   let n = new oe(e, t, Fe);
   return _.add(e), n;
 }
+
+// src/ui/activity.ts
+init_motion();
+
 // src/ui/activity-model.ts
 function flattenActivity(events, expanded) {
   const rows = [];
@@ -11117,12 +12754,12 @@ var ACTIVITY_ICONS = {
   shipped: svg('<circle cx="8" cy="8" r="5.8"/><path d="m5.6 8.2 1.7 1.7 3.2-3.6"/>')
 };
 var PLAY = '<svg viewBox="0 0 8 8" aria-hidden="true"><path d="M1.5 1v6l5.2-3Z" fill="currentColor"/></svg>';
-var REFLOW = springMotion({ duration: 0.3, bounce: 0 });
-var OPEN = springMotion({ duration: 0.22, bounce: 0 });
-var CLOSE = springMotion({ duration: 0.18, bounce: 0 });
-var BLOOM = springMotion({ duration: 0.3, bounce: 0 });
-var EXIT = springMotion({ duration: 0.24, bounce: 0 });
-var FADE = springMotion({ duration: 0.16, bounce: 0 });
+var REFLOW = springMotion(SPRINGS.default);
+var OPEN = springMotion(SPRINGS.snappy);
+var CLOSE2 = springMotion(CLOSE);
+var BLOOM = springMotion(SPRINGS.default);
+var EXIT = springMotion(SPRINGS.snappy);
+var FADE2 = springMotion(FADE);
 var CLEAR = [11, 5];
 var PAD = 6;
 var SLIDE = 8;
@@ -11143,7 +12780,7 @@ function activity(container, options) {
   root.setAttribute("role", "tree");
   if (options.label)
     root.setAttribute("aria-label", options.label);
-  applyLook(root, options);
+  applyLook2(root, options);
   const space = doc.createElement("div");
   space.className = "knobs-activity-space";
   const hl = doc.createElement("div");
@@ -11447,7 +13084,7 @@ function activity(container, options) {
   function sync(cause, toggled) {
     const reduced = reducedMotion(win);
     const animate = cause !== "snap";
-    const glide = cause === "open" ? OPEN : cause === "close" ? CLOSE : REFLOW;
+    const glide = cause === "open" ? OPEN : cause === "close" ? CLOSE2 : REFLOW;
     const before = [...views.values()].filter((v) => !v.leaving).map((v) => v.id);
     rows = flattenActivity(events, expanded);
     selected = keepSelection(rows, selected, (id) => index.get(id)?.parent);
@@ -11485,7 +13122,7 @@ function activity(container, options) {
           v.p.snap(1);
         } else if (reduced) {
           v.y.snap(goal);
-          tune(v.p, FADE).snap(0).set(1);
+          tune(v.p, FADE2).snap(0).set(1);
         } else {
           const parent = row.parent !== null ? views.get(row.parent) : undefined;
           if (parent && !parent.leaving) {
@@ -11517,7 +13154,7 @@ function activity(container, options) {
       v.el.dataset.leaving = "";
       v.el.setAttribute("aria-selected", "false");
       if (reduced) {
-        tune(v.p, FADE).set(0);
+        tune(v.p, FADE2).set(0);
         continue;
       }
       const group = index.get(v.id)?.parent ?? null;
@@ -11525,8 +13162,8 @@ function activity(container, options) {
       if (parent && !parent.leaving && v.depth === 1) {
         v.under = group;
         const drawer = cause === "close" && group === toggled;
-        tune(v.y, drawer ? CLOSE : glide).set(drawer ? v.y.target - shut : targets.get(group) ?? parent.y.target);
-        tune(v.p, drawer ? CLOSE : EXIT).set(0);
+        tune(v.y, drawer ? CLOSE2 : glide).set(drawer ? v.y.target - shut : targets.get(group) ?? parent.y.target);
+        tune(v.p, drawer ? CLOSE2 : EXIT).set(0);
       } else {
         v.from = 0;
         tune(v.p, EXIT).set(0);
@@ -11629,7 +13266,7 @@ function activity(container, options) {
       const to = targets.get(id);
       const far = from !== undefined && to !== undefined && Math.abs(to - from) > 400;
       const reduced = reducedMotion(win);
-      moveHighlight(reduced || from === undefined ? null : springMotion({ duration: far ? 0.42 : 0.3, bounce: 0 }));
+      moveHighlight(reduced || from === undefined ? null : springMotion(far ? SPRINGS.calm : SPRINGS.default));
       root.setAttribute("aria-activedescendant", domId(id));
       if (source === "key") {
         scrollHold = null;
@@ -11797,6 +13434,10 @@ function activity(container, options) {
   };
   return handle;
 }
+
+// src/ui/bento.ts
+init_motion();
+
 // src/ui/bento-model.ts
 var FIT_MAX = 24;
 var clamp = (x, a, b) => Math.min(b, Math.max(a, x));
@@ -12117,16 +13758,16 @@ function motionBlur(speed, max = 3, per = 1600) {
 
 // src/ui/bento.ts
 init_look();
-var LAYOUT = springMotion({ duration: 0.4, bounce: 0 });
-var ZOOM_IN = springMotion({ duration: 0.45, bounce: 0 });
-var ZOOM_OUT = springMotion({ duration: 0.38, bounce: 0 });
-var SLIDE2 = springMotion({ duration: 0.3, bounce: 0 });
-var SLIDE_OUT = springMotion({ duration: 0.25, bounce: 0 });
-var ENTER = springMotion({ duration: 0.3, bounce: 0 });
-var EXIT2 = springMotion({ duration: 0.25, bounce: 0 });
-var WASH = springMotion({ duration: 0.25, bounce: 0 });
-var FADE2 = springMotion({ duration: 0.18, bounce: 0 });
-var INSTANT = springMotion({ duration: 0.1, bounce: 0 });
+var LAYOUT = springMotion(SPRINGS.calm);
+var ZOOM_IN = springMotion(SPRINGS.smooth);
+var ZOOM_OUT = springMotion(SPRINGS.calm);
+var SLIDE2 = springMotion(SPRINGS.default);
+var SLIDE_OUT = springMotion(SPRINGS.snappy);
+var ENTER = springMotion(SPRINGS.default);
+var EXIT2 = springMotion(SPRINGS.snappy);
+var WASH = springMotion(SPRINGS.snappy);
+var FADE3 = springMotion(FADE);
+var INSTANT = springMotion(SPRINGS.instant);
 var SLIDE_BY = 0.12;
 var EXIT_BLUR = 3;
 var px = (x) => new Spring(x, LAYOUT.omega, LAYOUT.zeta, 0.05);
@@ -12169,7 +13810,7 @@ function bento(container, options) {
   root.setAttribute("role", "listbox");
   root.setAttribute("aria-multiselectable", "true");
   root.setAttribute("aria-label", options.label ?? "Ideas");
-  applyLook(root, options);
+  applyLook2(root, options);
   const space = doc.createElement("div");
   space.className = "knobs-bento-space";
   const scrim = doc.createElement("div");
@@ -12291,7 +13932,7 @@ function bento(container, options) {
     if (enter && !reduced())
       drive(t.life.snap(0), ENTER, 1);
     else if (enter)
-      drive(t.life.snap(0), FADE2, 1);
+      drive(t.life.snap(0), FADE3, 1);
     if (reduced() || !from)
       for (const s of [t.x, t.y, t.w, t.h])
         s.snap(s.target);
@@ -12621,7 +14262,7 @@ function bento(container, options) {
     if (r)
       setBox(t, r.w, r.h);
     if (f.out || f.veil)
-      drive(t.life.snap(0), reduced() ? FADE2 : ENTER, 1);
+      drive(t.life.snap(0), reduced() ? FADE3 : ENTER, 1);
     t.drawn = "";
     draw(t);
     syncZoomed();
@@ -12654,7 +14295,7 @@ function bento(container, options) {
       f.z.snap(1);
       f.dx.snap(0);
       f.veil = true;
-      drive(f.alpha.snap(f.alpha.target === 0 ? f.alpha.x : 0), FADE2, 1);
+      drive(f.alpha.snap(f.alpha.target === 0 ? f.alpha.x : 0), FADE3, 1);
     } else {
       f.veil = false;
       drive(f.z, ZOOM_IN, 1);
@@ -12689,7 +14330,7 @@ function bento(container, options) {
     revealUnder(f.tile.id);
     if (reduced()) {
       f.veil = true;
-      drive(f.alpha, FADE2, 0);
+      drive(f.alpha, FADE3, 0);
     } else
       drive(f.z, ZOOM_OUT, 0);
     syncZoomed();
@@ -12710,7 +14351,7 @@ function bento(container, options) {
     cur.out = true;
     cur.veil = false;
     drive(cur.dx, SLIDE_OUT, -dir * by);
-    drive(cur.alpha, reduced() ? FADE2 : SLIDE_OUT, 0);
+    drive(cur.alpha, reduced() ? FADE3 : SLIDE_OUT, 0);
     let f = focusOf(t);
     if (!f) {
       f = beginFocus(t);
@@ -12722,7 +14363,7 @@ function bento(container, options) {
     f.veil = false;
     drive(f.z, ZOOM_IN, 1);
     drive(f.dx, SLIDE2, 0);
-    drive(f.alpha, reduced() ? FADE2 : SLIDE2, 1);
+    drive(f.alpha, reduced() ? FADE3 : SLIDE2, 1);
     setActive(id);
     syncZoomed();
     loop.wake();
@@ -13046,7 +14687,7 @@ function bento(container, options) {
         if (f)
           endFocus(f);
         t.leaving = true;
-        drive(t.life, reduced() ? FADE2 : EXIT2, 0);
+        drive(t.life, reduced() ? FADE3 : EXIT2, 0);
       }
       items = next;
       reindex();
@@ -13114,6 +14755,7 @@ function bento(container, options) {
 init_diff();
 
 // src/ui/picker.ts
+init_motion();
 init_look();
 
 // src/ui/picker-model.ts
@@ -13164,10 +14806,10 @@ function settleHeight(previous, now, frames, limit = 6) {
 }
 
 // src/ui/picker.ts
-var OPEN2 = springMotion({ duration: 0.22, bounce: 0 });
-var CLOSE2 = springMotion({ duration: 0.18, bounce: 0 });
-var CARD = springMotion({ duration: 0.3, bounce: 0 });
-var FADE4 = springMotion({ duration: 0.16, bounce: 0 });
+var OPEN2 = springMotion(SPRINGS.snappy);
+var CLOSE3 = springMotion(CLOSE);
+var CARD = springMotion(SPRINGS.default);
+var FADE5 = springMotion(FADE);
 var DRIFT = 6;
 var CHECK = svg('<path d="m3.5 8.4 3 3 6-6.6"/>');
 function optionPicker(container, options) {
@@ -13189,7 +14831,7 @@ function optionPicker(container, options) {
   root.setAttribute("role", "radiogroup");
   if (options.label)
     root.setAttribute("aria-label", options.label);
-  applyLook(root, options);
+  applyLook2(root, options);
   const card = doc.createElement("div");
   card.className = "knobs-picker-card";
   card.setAttribute("aria-hidden", "true");
@@ -13365,10 +15007,10 @@ function optionPicker(container, options) {
     e.body.dataset.moving = "";
     if (reduced) {
       e.h.snap(open ? natural(e) : 0);
-      tune(e.o, FADE4).set(open ? 1 : 0);
+      tune(e.o, FADE5).set(open ? 1 : 0);
     } else {
-      tune(e.h, open ? OPEN2 : CLOSE2).set(open ? natural(e) : 0);
-      tune(e.o, open ? OPEN2 : CLOSE2).set(open ? 1 : 0);
+      tune(e.h, open ? OPEN2 : CLOSE3).set(open ? natural(e) : 0);
+      tune(e.o, open ? OPEN2 : CLOSE3).set(open ? 1 : 0);
     }
     loop.wake();
   };
@@ -13545,7 +15187,7 @@ function optionPicker(container, options) {
       e.head.tabIndex = -1;
       if (e.open)
         setOpen(e, false, true);
-      tune(e.presence, reduced ? FADE4 : CLOSE2).set(0);
+      tune(e.presence, reduced ? FADE5 : CLOSE3).set(0);
     }
     let before = card;
     list.forEach((o, i) => {
@@ -13559,7 +15201,7 @@ function optionPicker(container, options) {
         e = make(o);
         ro.observe(e.el);
         if (animate)
-          tune(e.presence, reduced ? FADE4 : OPEN2).snap(0).set(1);
+          tune(e.presence, reduced ? FADE5 : OPEN2).snap(0).set(1);
       }
       if (before.nextElementSibling !== e.el)
         before.after(e.el);
@@ -13671,6 +15313,7 @@ function optionPicker(container, options) {
 }
 
 // src/ui/split.ts
+init_motion();
 init_look();
 init_page_hints();
 
@@ -13854,9 +15497,9 @@ function tooltip(el, content, options = {}) {
 
 // src/ui/split.ts
 init_split_model();
-var FLIP = springMotion({ duration: 0.25, bounce: 0 });
+var FLIP = springMotion(SPRINGS.snappy);
 var FLIP_DEPTH = 28;
-var SETTLE = springMotion({ duration: 0.3, bounce: 0 });
+var SETTLE = springMotion(SPRINGS.default);
 var CONTENT_BLUR = 3;
 var LABEL_BLUR = 2;
 var COUNT_CLEAR = 0.12;
@@ -13912,7 +15555,7 @@ function split(container, options) {
   const root = doc.createElement("div");
   root.className = "knobs-split";
   root.dataset.direction = direction;
-  applyLook(root, options);
+  applyLook2(root, options);
   const host = container.closest(".knobs-pane");
   host?.setAttribute("data-nested", "");
   const views = new Map;
@@ -14077,7 +15720,7 @@ function split(container, options) {
   const measure = () => {
     syncFrame(root);
     const probe = doc.createElement("div");
-    probe.style.cssText = "position:absolute;visibility:hidden;width:var(--ku-rail);height:var(--ku-pane-m)";
+    probe.style.cssText = "position:absolute;visibility:hidden;width:var(--_ku-rail);height:var(--_ku-pane-m)";
     root.append(probe);
     const r = probe.getBoundingClientRect();
     paneM = r.height;
@@ -14131,8 +15774,8 @@ function split(container, options) {
       out[id] = s.x;
     return out;
   };
-  const target = () => solve({ panes: specs, sizes, collapsed, total: total(), rail });
-  const current = () => solve({ panes: specs, sizes, collapsed, total: total(), rail, fixed: fixed() });
+  const target = () => solve2({ panes: specs, sizes, collapsed, total: total(), rail });
+  const current = () => solve2({ panes: specs, sizes, collapsed, total: total(), rail, fixed: fixed() });
   const SIDES = { row: ["right", "left"], column: ["bottom", "top"] };
   const sides = (v) => {
     const [a, b] = SIDES[direction];
@@ -14183,7 +15826,7 @@ function split(container, options) {
       put(label, "opacity", "");
       put(label, "filter", "");
       put(label, "transform", k === 0 ? "" : `translate(${t.x.toFixed(2)}px,${t.y.toFixed(2)}px) rotate(${t.turn.toFixed(2)}deg)`);
-      put(label, "color", k === 0 ? "" : `color-mix(in srgb,var(--ku-text) ${(k * 100).toFixed(1)}%,var(--ku-label))`);
+      put(label, "color", k === 0 ? "" : `color-mix(in srgb,var(--kv-fg) ${(k * 100).toFixed(1)}%,var(--kv-fg-2))`);
     } else {
       put(label, "transform", "");
       put(label, "color", "");
@@ -14473,7 +16116,7 @@ function split(container, options) {
     const first = target();
     for (const spec of specs) {
       const open = { ...collapsed, [spec.id]: false };
-      views.get(spec.id).open = collapsed[spec.id] ? solve({ panes: specs, sizes, collapsed: open, total: total(), rail })[spec.id] : first[spec.id];
+      views.get(spec.id).open = collapsed[spec.id] ? solve2({ panes: specs, sizes, collapsed: open, total: total(), rail })[spec.id] : first[spec.id];
     }
     render(first);
     measureChevrons();
@@ -14573,6 +16216,7 @@ init_compare_strip();
 init_tree();
 
 // src/ui/walkthrough.ts
+init_motion();
 init_page_hints();
 
 // src/ui/confirm.ts
@@ -14656,7 +16300,7 @@ function toast(message, options = {}) {
   const key = options.within ?? doc;
   let r = regions.get(key);
   if (!r || !r.el.isConnected) {
-    const el = options.within ? Object.assign(doc.createElement("div"), { className: "knobs-ui knobs-toast" }) : layerElement(doc, "knobs-layer knobs-toast", options.look);
+    const 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);
@@ -14712,25 +16356,25 @@ function toast(message, options = {}) {
 
 // src/ui/walkthrough-media.ts
 init_compare_model();
+init_glide();
 init_look();
 
 // src/ui/walkthrough-css.ts
-var snappy3 = springCss({ duration: 0.25, bounce: 0 });
-var calm = springCss({ duration: 0.4, bounce: 0 });
+init_motion();
+var snappy3 = springCss(SPRINGS.snappy);
+var calm = springCss(SPRINGS.calm);
 var walkthroughCss = `
 :where(.knobs-walkthrough,.knobs-walkthrough *,.knobs-wt-slot,.knobs-wt-slot *){box-sizing:border-box}
 .knobs-ui.knobs-walkthrough{--kw-snappy:${snappy3.easing};--kw-snappy-ms:${snappy3.duration}ms;--kw-calm:${calm.easing};--kw-calm-ms:${calm.duration}ms;
-  --kw-text:var(--k-walkthrough-text,14px);--kw-measure:var(--k-walkthrough-measure,68ch);--kw-good:var(--k-walkthrough-good,#30d158);--kw-info:var(--k-walkthrough-info,#64d2ff);
-  --kw-card:var(--ku-pane-bg);--kw-card-ring:var(--ku-pane-ring);--kw-pad:16px;--kw-ink:var(--k-walkthrough-ink,#ff375f);
-  container:knobs-wt / inline-size;display:block;width:100%;color:var(--ku-text);font:var(--ku-font-weight) var(--kw-text)/1.5 var(--ku-font);text-align:left;
+  --kw-text:var(--k-walkthrough-text,14px);--kw-measure:var(--k-walkthrough-measure,68ch);--kw-good:var(--k-walkthrough-good,var(--_k-ok));--kw-info:var(--k-walkthrough-info,var(--_k-info));
+  --kw-card:var(--_ku-pane-bg);--kw-card-ring:var(--_ku-pane-ring);--kw-pad:16px;--kw-ink:var(--k-walkthrough-ink,#ff375f);
+  container:knobs-wt / inline-size;display:block;width:100%;color:var(--_k-fg);font:var(--_k-weight) var(--kw-text)/1.5 var(--_k-font);text-align:left;
   letter-spacing:normal;-webkit-font-smoothing:antialiased}
-.knobs-ui.knobs-walkthrough[data-theme="light"],:where(:root[data-theme="light"]) .knobs-ui.knobs-walkthrough[data-theme="auto"]{--kw-good:var(--k-walkthrough-good,#248a3d);--kw-info:var(--k-walkthrough-info,#0071a4)}
-@media(prefers-color-scheme:light){:where(:root:not([data-theme="dark"])) .knobs-ui.knobs-walkthrough[data-theme="auto"]{--kw-good:var(--k-walkthrough-good,#248a3d);--kw-info:var(--k-walkthrough-info,#0071a4)}}
 .knobs-walkthrough [hidden]{display:none!important}
 .knobs-walkthrough :is(h1,h2,h3,p){margin:0;font:inherit;letter-spacing:inherit}
 .knobs-walkthrough a{color:inherit;text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);text-underline-offset:2px;transition:text-decoration-color .15s}
 .knobs-walkthrough a:hover{text-decoration-color:currentColor}
-.knobs-walkthrough code,.knobs-wt-slot code{font:calc(1em - 1px) var(--ku-mono);padding:1px 5px;border-radius:5px;background:var(--ku-surface)}
+.knobs-walkthrough code,.knobs-wt-slot code{font:calc(1em - 1px) var(--_k-mono);padding:1px 5px;border-radius:5px;background:var(--_k-fill)}
 :where(.knobs-ui) :is(.knobs-wt-btn,.knobs-wt-pick,.knobs-wt-toc-step){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}
 
@@ -14741,40 +16385,40 @@ var walkthroughCss = `
 
 /* ——— the page's head ——— */
 .knobs-wt-head{display:flex;flex-direction:column;gap:10px}
-.knobs-wt-title{font-size:calc(var(--kw-text) + 10px)!important;font-weight:var(--ku-title-weight)!important;line-height:1.2;letter-spacing:-.01em!important}
-.knobs-wt-summary{max-width:var(--kw-measure);color:var(--ku-label)}
-.knobs-wt-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--ku-dim);font-size:calc(var(--kw-text) - 2px)}
+.knobs-wt-title{font-size:calc(var(--kw-text) + 10px)!important;font-weight:var(--_k-weight-title)!important;line-height:1.2;letter-spacing:-.01em!important}
+.knobs-wt-summary{max-width:var(--kw-measure);color:var(--_k-fg-2)}
+.knobs-wt-meta{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2px)}
 .knobs-wt-meta>span{display:inline-flex;gap:6px;white-space:nowrap}
-.knobs-wt-meta b{font-weight:var(--ku-font-weight);color:var(--ku-label);font-family:var(--ku-mono);font-size:calc(1em - .5px)}
+.knobs-wt-meta b{font-weight:var(--_k-weight);color:var(--_k-fg-2);font-family:var(--_k-mono);font-size:calc(1em - .5px)}
 
 /* ——— a section: a PR or topic ——— */
 .knobs-wt-section{display:flex;flex-direction:column;gap:14px;min-width:0}
 .knobs-wt-shead{display:flex;flex-direction:column;gap:6px;scroll-margin-top:16px}
-.knobs-wt-kicker{display:flex;align-items:center;gap:10px;font-size:calc(var(--kw-text) - 2px);color:var(--ku-dim)}
-.knobs-wt-kicker a{font-family:var(--ku-mono);color:var(--ku-label);text-decoration:none}
-.knobs-wt-kicker a:hover{color:var(--ku-text)}
-.knobs-wt-stitle{font-size:calc(var(--kw-text) + 4px)!important;font-weight:var(--ku-title-weight)!important;line-height:1.3}
-.knobs-wt-ssum{max-width:var(--kw-measure);color:var(--ku-label)}
-.knobs-wt-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:999px;font-size:calc(var(--kw-text) - 3px);font-weight:var(--ku-label-weight);white-space:nowrap;
-  --kw-tone:var(--ku-label);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
+.knobs-wt-kicker{display:flex;align-items:center;gap:10px;font-size:calc(var(--kw-text) - 2px);color:var(--_k-fg-3)}
+.knobs-wt-kicker a{font-family:var(--_k-mono);color:var(--_k-fg-2);text-decoration:none}
+.knobs-wt-kicker a:hover{color:var(--_k-fg)}
+.knobs-wt-stitle{font-size:calc(var(--kw-text) + 4px)!important;font-weight:var(--_k-weight-title)!important;line-height:1.3}
+.knobs-wt-ssum{max-width:var(--kw-measure);color:var(--_k-fg-2)}
+.knobs-wt-chip{display:inline-flex;align-items:center;gap:6px;height:20px;padding:0 8px;border-radius:999px;font-size:calc(var(--kw-text) - 3px);font-weight:var(--_k-weight-label);white-space:nowrap;
+  --kw-tone:var(--_k-fg-2);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
 .knobs-wt-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
 :is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="good"]{--kw-tone:var(--kw-good)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="warn"]{--kw-tone:var(--ku-warn)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="bad"]{--kw-tone:var(--ku-critical)}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="warn"]{--kw-tone:var(--_k-warn)}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="bad"]{--kw-tone:var(--_k-danger)}
 :is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="info"]{--kw-tone:var(--kw-info)}
-:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="dim"]{--kw-tone:var(--ku-label)}
+:is(.knobs-wt-chip,.knobs-wt-toc-glyph)[data-tone="dim"]{--kw-tone:var(--_k-fg-2)}
 
 /* ——— a step: one card ——— */
-.knobs-wt-step{position:relative;display:flex;flex-direction:column;gap:12px;padding:var(--kw-pad);border-radius:var(--ku-panel-radius);background:var(--kw-card);box-shadow:var(--kw-card-ring);
+.knobs-wt-step{position:relative;display:flex;flex-direction:column;gap:12px;padding:var(--kw-pad);border-radius:var(--_k-radius-panel);background:var(--kw-card);box-shadow:var(--kw-card-ring);
   scroll-margin-top:16px;outline:none;container:knobs-wt-step / inline-size}
-.knobs-walkthrough[data-frame="flat"] .knobs-wt-step{box-shadow:inset 0 0 0 1px var(--ku-line)}
+.knobs-walkthrough[data-frame="flat"] .knobs-wt-step{box-shadow:inset 0 0 0 1px var(--_k-border)}
 .knobs-wt-step-head{display:flex;align-items:baseline;gap:10px;min-width:0}
-.knobs-wt-num{flex:none;font:var(--ku-font-weight) calc(var(--kw-text) - 2px)/1 var(--ku-mono);color:var(--ku-dim);font-variant-numeric:tabular-nums}
-.knobs-wt-stepTitle{flex:1;min-width:0;font-weight:var(--ku-title-weight)!important}
-.knobs-wt-caption{max-width:var(--kw-measure);color:var(--ku-label);margin-top:-6px!important}
-.knobs-wt-question{font-weight:var(--ku-label-weight)!important}
+.knobs-wt-num{flex:none;font:var(--_k-weight) calc(var(--kw-text) - 2px)/1 var(--_k-mono);color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
+.knobs-wt-stepTitle{flex:1;min-width:0;font-weight:var(--_k-weight-title)!important}
+.knobs-wt-caption{max-width:var(--kw-measure);color:var(--_k-fg-2);margin-top:-6px!important}
+.knobs-wt-question{font-weight:var(--_k-weight-label)!important}
 /* The step Kit is on: its number lights, and its choices show their keys. */
-.knobs-wt-step[data-current] .knobs-wt-num{color:var(--ku-text)}
+.knobs-wt-step[data-current] .knobs-wt-num{color:var(--_k-fg)}
 .knobs-wt-media{display:grid;grid-template-columns:repeat(var(--kw-n,1),minmax(0,1fr));gap:12px;min-width:0}
 @container knobs-wt-step (max-width:640px){.knobs-wt-media{grid-template-columns:minmax(0,1fr)}}
 
@@ -14783,16 +16427,16 @@ var walkthroughCss = `
 .knobs-wt-feed-list{list-style:none;margin:0;padding:0;max-height:260px;overflow:auto;scrollbar-width:none;display:flex;flex-direction:column}
 .knobs-wt-feed-list::-webkit-scrollbar{display:none}
 .knobs-wt-fi{display:grid;grid-template-columns:64px 56px minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:6px 0;font-size:calc(var(--kw-text) - 1px)}
-.knobs-wt-fi+.knobs-wt-fi{box-shadow:inset 0 1px 0 var(--ku-line)}
-.knobs-wt-fi-when{color:var(--ku-dim);font-size:calc(var(--kw-text) - 2.5px);font-variant-numeric:tabular-nums;white-space:nowrap}
-.knobs-wt-fi-kind{color:var(--ku-label);font-size:calc(var(--kw-text) - 2.5px);font-weight:var(--ku-label-weight)}
+.knobs-wt-fi+.knobs-wt-fi{box-shadow:inset 0 1px 0 var(--_k-border)}
+.knobs-wt-fi-when{color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2.5px);font-variant-numeric:tabular-nums;white-space:nowrap}
+.knobs-wt-fi-kind{color:var(--_k-fg-2);font-size:calc(var(--kw-text) - 2.5px);font-weight:var(--_k-weight-label)}
 .knobs-wt-fi[data-kind="qa"] .knobs-wt-fi-kind{color:var(--kw-info)}
-.knobs-wt-fi-body{max-width:var(--kw-measure);color:var(--ku-text)}
-.knobs-wt-fi-q{color:var(--ku-label)}
-.knobs-wt-fi-q::before{content:"You asked: ";color:var(--ku-dim)}
-:where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:var(--ku-font-weight) calc(var(--kw-text) - 2.5px)/1 var(--ku-mono);color:var(--ku-label);background:transparent;border:0;
+.knobs-wt-fi-body{max-width:var(--kw-measure);color:var(--_k-fg)}
+.knobs-wt-fi-q{color:var(--_k-fg-2)}
+.knobs-wt-fi-q::before{content:"You asked: ";color:var(--_k-fg-3)}
+:where(.knobs-ui) .knobs-wt-fi-step{all:revert;box-sizing:border-box;font:var(--_k-weight) calc(var(--kw-text) - 2.5px)/1 var(--_k-mono);color:var(--_k-fg-2);background:transparent;border:0;
   padding:3px 6px;margin:0;border-radius:6px;cursor:pointer;outline:none;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){background:var(--ku-wash-hi);color:var(--ku-text)}
+.knobs-ui .knobs-wt-fi-step:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 
 /* ——— a step's sent notes ——— */
 .knobs-wt-notes{display:flex;flex-direction:column}
@@ -14801,47 +16445,47 @@ var walkthroughCss = `
   transition:height var(--kw-snappy-ms) var(--kw-snappy),opacity var(--kw-snappy-ms) var(--kw-snappy),filter var(--kw-snappy-ms) var(--kw-snappy)}
 .knobs-wt-n[data-entering]{opacity:0;filter:blur(3px)}
 .knobs-wt-n[data-leaving]{opacity:0;filter:blur(3px);padding-block:0}
-.knobs-wt-n+.knobs-wt-n{box-shadow:inset 0 1px 0 var(--ku-line)}
-.knobs-wt-n-meta{flex:none;min-width:44px;padding-top:2px;color:var(--ku-dim);font:var(--ku-font-weight) calc(var(--kw-text) - 2.5px)/1.4 var(--ku-mono);font-variant-numeric:tabular-nums}
+.knobs-wt-n+.knobs-wt-n{box-shadow:inset 0 1px 0 var(--_k-border)}
+.knobs-wt-n-meta{flex:none;min-width:44px;padding-top:2px;color:var(--_k-fg-3);font:var(--_k-weight) calc(var(--kw-text) - 2.5px)/1.4 var(--_k-mono);font-variant-numeric:tabular-nums}
 .knobs-wt-n-meta[data-seek]{cursor:pointer}
-.knobs-wt-n-meta[data-seek]:hover{color:var(--ku-text)}
+.knobs-wt-n-meta[data-seek]:hover{color:var(--_k-fg)}
 .knobs-wt-n-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;font-size:calc(var(--kw-text) - 1px)}
 .knobs-wt-n-voice{height:30px;max-width:320px}
-.knobs-wt-n-ink{display:block;width:120px;max-height:80px;border-radius:6px;background:var(--ku-surface)}
+.knobs-wt-n-ink{display:block;width:120px;max-height:80px;border-radius:6px;background:var(--_k-fill)}
 .knobs-wt-n-ink path{fill:none;stroke:var(--kw-ink);stroke-width:2px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
 
 /* ——— the note bar, docked at the bottom of the column ——— */
 .knobs-wt-dock{position:sticky;bottom:12px;z-index:40;margin-top:-24px}
-.knobs-wt-notebar{display:flex;flex-direction:column;gap:2px;padding:6px 6px 6px 14px;border-radius:calc(var(--ku-panel-radius) + 2px);background:var(--ku-bg);
-  box-shadow:var(--ku-pane-ring),var(--ku-shadow)}
-.knobs-wt-on{padding-top:3px;color:var(--ku-dim);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap;overflow:hidden;
+.knobs-wt-notebar{display:flex;flex-direction:column;gap:2px;padding:6px 6px 6px 14px;border-radius:calc(var(--_k-radius-panel) + 2px);background:var(--_k-bg);
+  box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay)}
+.knobs-wt-on{padding-top:3px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap;overflow:hidden;
   -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)}
 .knobs-wt-row{display:flex;align-items:flex-end;gap:4px}
 :where(.knobs-ui) :is(.knobs-wt-input,.knobs-wt-tool,.knobs-wt-x,.knobs-wt-back){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;background:transparent;border:0;
   border-radius:0;margin:0;padding:0;min-width:0;box-shadow:none;outline:none}
-.knobs-ui .knobs-wt-input{flex:1;min-width:0;height:32px;max-height:140px;padding:6px 0;resize:none;color:var(--ku-text);caret-color:var(--ku-accent);line-height:20px;font-size:var(--kw-text)}
-.knobs-ui .knobs-wt-input::placeholder{color:var(--ku-dim)}
+.knobs-ui .knobs-wt-input{flex:1;min-width:0;height:32px;max-height:140px;padding:6px 0;resize:none;color:var(--_k-fg);caret-color:var(--_k-accent);line-height:20px;font-size:var(--kw-text)}
+.knobs-ui .knobs-wt-input::placeholder{color:var(--_k-fg-3)}
 .knobs-wt-attach{display:flex;gap:4px;align-items:center;align-self:center}
 .knobs-wt-attach:empty{display:none}
-.knobs-wt-chip-a{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 9px;border-radius:999px;background:var(--ku-surface-hi);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap}
-.knobs-ui .knobs-wt-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--ku-dim);cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-x:is(:hover,:focus-visible){background:var(--ku-wash-hi);color:var(--ku-text)}
+.knobs-wt-chip-a{display:inline-flex;align-items:center;gap:2px;height:24px;padding:0 2px 0 9px;border-radius:999px;background:var(--_k-fill-selected);font-size:calc(var(--kw-text) - 2.5px);white-space:nowrap}
+.knobs-ui .knobs-wt-x{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;color:var(--_k-fg-3);cursor:pointer;transition:background .15s,color .15s}
+.knobs-ui .knobs-wt-x:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
 .knobs-wt-x svg{width:10px;height:10px}
-.knobs-ui .knobs-wt-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 8px;border-radius:calc(var(--ku-radius) + 2px);
-  color:var(--ku-label);cursor:pointer;transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-tool:is(:hover,:focus-visible){background:var(--ku-wash-hi);color:var(--ku-text)}
-.knobs-ui .knobs-wt-tool[aria-pressed="true"]{background:var(--ku-surface-hi);color:var(--ku-text)}
+.knobs-ui .knobs-wt-tool{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;min-width:32px;height:32px;padding:0 8px;border-radius:calc(var(--_k-radius) + 2px);
+  color:var(--_k-fg-2);cursor:pointer;transition:background .15s,color .15s}
+.knobs-ui .knobs-wt-tool:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-wt-tool[aria-pressed="true"]{background:var(--_k-fill-selected);color:var(--_k-fg)}
 .knobs-wt-tool svg{width:15px;height:15px}
 .knobs-wt-rec{font-size:calc(var(--kw-text) - 2.5px);font-variant-numeric:tabular-nums}
 .knobs-wt-rec:empty{display:none}
-.knobs-ui .knobs-wt-tool[data-send]{color:var(--ku-dim)}
-.knobs-ui .knobs-wt-tool[data-send][data-ready]{background:var(--ku-accent);color:var(--ku-bg)}
+.knobs-ui .knobs-wt-tool[data-send]{color:var(--_k-fg-3)}
+.knobs-ui .knobs-wt-tool[data-send][data-ready]{background:var(--_k-accent);color:var(--_k-bg)}
 /* Back: in place over the bar for a few seconds after a note moves the page on. */
-.knobs-ui .knobs-wt-back{position:absolute;left:8px;bottom:calc(100% + 8px);height:28px;padding:0 12px;border-radius:999px;background:var(--ku-bg);color:var(--ku-text);
-  box-shadow:var(--ku-pane-ring),var(--ku-shadow);font-size:calc(var(--kw-text) - 1.5px);font-weight:var(--ku-label-weight);cursor:pointer;
+.knobs-ui .knobs-wt-back{position:absolute;left:8px;bottom:calc(100% + 8px);height:28px;padding:0 12px;border-radius:999px;background:var(--_k-bg);color:var(--_k-fg);
+  box-shadow:var(--_ku-pane-ring),var(--_k-shadow-overlay);font-size:calc(var(--kw-text) - 1.5px);font-weight:var(--_k-weight-label);cursor:pointer;
   opacity:0;scale:.96;filter:blur(3px);pointer-events:none;transition:opacity .11s cubic-bezier(.4,0,1,1),scale .11s cubic-bezier(.4,0,1,1),filter .11s cubic-bezier(.4,0,1,1)}
 .knobs-ui .knobs-wt-back[data-on]{opacity:1;scale:1;filter:none;pointer-events:auto;transition:opacity .15s cubic-bezier(.2,.8,.2,1),scale .15s cubic-bezier(.2,.8,.2,1),filter .15s cubic-bezier(.2,.8,.2,1)}
-.knobs-ui .knobs-wt-back:hover{background:var(--ku-surface-hi)}
+.knobs-ui .knobs-wt-back:hover{background:var(--_k-fill-selected)}
 
 /* ——— ink over a step's media ——— */
 .knobs-wt-media,.knobs-wt-options{position:relative}
@@ -14850,10 +16494,10 @@ var walkthroughCss = `
 .knobs-wt-ink path{fill:none;stroke:var(--kw-ink);stroke-width:3px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
 
 /* ——— full-window: the step over the page, its media filling it; its place held in the page ——— */
-.knobs-wt-scrim{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,var(--ku-page) 82%,transparent);opacity:0;pointer-events:none}
+.knobs-wt-scrim{position:fixed;inset:0;z-index:30;background:color-mix(in srgb,var(--_k-bg-page) 82%,transparent);opacity:0;pointer-events:none}
 .knobs-wt-scrim[data-on]{pointer-events:auto}
 .knobs-wt-hold-card{flex:none}
-.knobs-wt-step[data-full]{position:fixed;z-index:35;margin:0;overflow:hidden;overscroll-behavior:contain;padding-bottom:84px;box-shadow:var(--kw-card-ring),var(--ku-shadow);background:var(--ku-bg)}
+.knobs-wt-step[data-full]{position:fixed;z-index:35;margin:0;overflow:hidden;overscroll-behavior:contain;padding-bottom:84px;box-shadow:var(--kw-card-ring),var(--_k-shadow-overlay);background:var(--_k-bg)}
 .knobs-wt-step[data-full]>:not(.knobs-wt-media){flex:none}
 .knobs-wt-step[data-full] .knobs-wt-notes{display:none}
 .knobs-wt-step[data-full]>.knobs-wt-media{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
@@ -14865,71 +16509,71 @@ var walkthroughCss = `
 /* ——— a taste test: the options side by side, Kit's pick lit and the rest stepping back ——— */
 .knobs-wt-options{display:grid;grid-template-columns:repeat(var(--kw-n,2),minmax(0,1fr));gap:10px}
 @container knobs-wt-step (max-width:640px){.knobs-wt-options{grid-template-columns:minmax(0,1fr)}}
-.knobs-wt-option{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;border-radius:calc(var(--ku-panel-radius) - 4px);background:var(--ku-wash);
+.knobs-wt-option{position:relative;display:flex;flex-direction:column;gap:8px;min-width:0;padding:8px;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_ku-wash);
   transition:background var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-option[data-picked]{background:color-mix(in srgb,var(--ku-accent) 12%,var(--ku-wash))}
+.knobs-wt-option[data-picked]{background:color-mix(in srgb,var(--_k-accent) 12%,var(--_ku-wash))}
 .knobs-wt-option>:not(.knobs-wt-pick){transition:opacity var(--kw-snappy-ms) var(--kw-snappy)}
 .knobs-wt-options[data-has-pick] .knobs-wt-option:not([data-picked])>:not(.knobs-wt-pick){opacity:.55}
-.knobs-ui .knobs-wt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:0 4px;border-radius:calc(var(--ku-radius) - 2px);cursor:pointer;color:var(--ku-label);text-align:left}
-.knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){color:var(--ku-text)}
-.knobs-wt-letter{flex:none;font:var(--ku-title-weight) calc(var(--kw-text) - 1px)/1 var(--ku-font);color:var(--ku-text)}
-.knobs-wt-olabel{flex:1;min-width:0;font-weight:var(--ku-label-weight);color:var(--ku-text)}
-.knobs-wt-suggested{flex:none;font-size:calc(var(--kw-text) - 3px);color:var(--ku-dim)}
-.knobs-wt-check{flex:none;display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:var(--ku-surface);color:transparent;
+.knobs-ui .knobs-wt-pick{display:flex;align-items:center;gap:8px;width:100%;min-height:28px;padding:0 4px;border-radius:calc(var(--_k-radius) - 2px);cursor:pointer;color:var(--_k-fg-2);text-align:left}
+.knobs-ui .knobs-wt-pick:is(:hover,:focus-visible){color:var(--_k-fg)}
+.knobs-wt-letter{flex:none;font:var(--_k-weight-title) calc(var(--kw-text) - 1px)/1 var(--_k-font);color:var(--_k-fg)}
+.knobs-wt-olabel{flex:1;min-width:0;font-weight:var(--_k-weight-label);color:var(--_k-fg)}
+.knobs-wt-suggested{flex:none;font-size:calc(var(--kw-text) - 3px);color:var(--_k-fg-3)}
+.knobs-wt-check{flex:none;display:flex;width:18px;height:18px;align-items:center;justify-content:center;border-radius:50%;background:var(--_k-fill);color:transparent;
   transition:background var(--kw-snappy-ms) var(--kw-snappy),color var(--kw-snappy-ms) var(--kw-snappy)}
 .knobs-wt-check svg{width:12px;height:12px}
-.knobs-wt-option[data-picked] .knobs-wt-check{background:var(--ku-accent);color:var(--ku-bg)}
-.knobs-wt-key{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:4px;background:var(--ku-surface);color:var(--ku-dim);
-  font:var(--ku-label-weight) calc(var(--kw-text) - 4px)/1 var(--ku-font);font-variant-numeric:tabular-nums;opacity:.5;transition:opacity .15s}
+.knobs-wt-option[data-picked] .knobs-wt-check{background:var(--_k-accent);color:var(--_k-bg)}
+.knobs-wt-key{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 3px;border-radius:4px;background:var(--_k-fill);color:var(--_k-fg-3);
+  font:var(--_k-weight-label) calc(var(--kw-text) - 4px)/1 var(--_k-font);font-variant-numeric:tabular-nums;opacity:.5;transition:opacity .15s}
 .knobs-wt-step[data-current] .knobs-wt-key{opacity:1}
-.knobs-wt-ocap{color:var(--ku-label);font-size:calc(var(--kw-text) - 1px);padding:0 4px}
+.knobs-wt-ocap{color:var(--_k-fg-2);font-size:calc(var(--kw-text) - 1px);padding:0 4px}
 
 /* ——— the rail: progress, contents, export ——— */
 .knobs-wt-rail{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px;max-height:calc(100vh - 32px);min-height:0;font-size:calc(var(--kw-text) - 1.5px)}
 .knobs-wt-progress{display:flex;flex-direction:column;gap:7px}
-.knobs-wt-count{display:flex;align-items:baseline;justify-content:space-between;color:var(--ku-label);font-variant-numeric:tabular-nums}
-.knobs-wt-count b{color:var(--ku-text);font-weight:var(--ku-label-weight)}
-.knobs-wt-bar{position:relative;height:4px;border-radius:2px;overflow:hidden;background:var(--ku-surface)}
-.knobs-wt-fill{position:absolute;inset:0;border-radius:inherit;background:var(--ku-accent);transform-origin:0 50%;transform:scaleX(var(--kw-done,0))}
+.knobs-wt-count{display:flex;align-items:baseline;justify-content:space-between;color:var(--_k-fg-2);font-variant-numeric:tabular-nums}
+.knobs-wt-count b{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
+.knobs-wt-bar{position:relative;height:4px;border-radius:2px;overflow:hidden;background:var(--_k-fill)}
+.knobs-wt-fill{position:absolute;inset:0;border-radius:inherit;background:var(--_k-accent);transform-origin:0 50%;transform:scaleX(var(--kw-done,0))}
 .knobs-walkthrough[data-settled] .knobs-wt-fill{transition:transform var(--kw-calm-ms) var(--kw-calm)}
 /* The contents: no box, one text spine for sections and steps (the steps' dots hang in the
    gutter left of it), and one pill behind the current step that springs between rows. */
 .knobs-wt-toc{position:relative;flex:1 1 auto;min-height:0;overflow:auto;scrollbar-width:none;margin:0 -8px;padding:0 0 8px}
 .knobs-wt-toc::-webkit-scrollbar{display:none}
-.knobs-wt-toc-section{display:block;padding:12px 8px 4px 26px;color:var(--ku-dim);font-size:calc(var(--kw-text) - 3px);font-weight:var(--ku-label-weight);white-space:nowrap;overflow:hidden;
+.knobs-wt-toc-section{display:block;padding:12px 8px 4px 26px;color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 3px);font-weight:var(--_k-weight-label);white-space:nowrap;overflow:hidden;
   -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)}
 .knobs-wt-toc-section:first-of-type{padding-top:2px}
-.knobs-wt-toc-mark{position:absolute;left:0;right:0;top:0;height:0;border-radius:calc(var(--ku-radius) - 1px);background:var(--ku-wash-hi);pointer-events:none;opacity:0;will-change:transform}
+.knobs-wt-toc-mark{position:absolute;left:0;right:0;top:0;height:0;border-radius:calc(var(--_k-radius) - 1px);background:var(--_ku-wash-hi);pointer-events:none;opacity:0;will-change:transform}
 .knobs-wt-toc-mark[data-on]{opacity:1}
 .knobs-walkthrough[data-settled] .knobs-wt-toc-mark{transition:opacity .15s}
-.knobs-ui .knobs-wt-toc-step{position:relative;display:flex;align-items:center;width:100%;text-align:left;height:26px;padding:0 8px 0 26px;color:var(--ku-label);cursor:pointer;white-space:nowrap}
-.knobs-ui .knobs-wt-toc-step:is(:hover,:focus-visible){color:var(--ku-text)}
-.knobs-wt-toc-step[aria-current="step"]{color:var(--ku-text)}
+.knobs-ui .knobs-wt-toc-step{position:relative;display:flex;align-items:center;width:100%;text-align:left;height:26px;padding:0 8px 0 26px;color:var(--_k-fg-2);cursor:pointer;white-space:nowrap}
+.knobs-ui .knobs-wt-toc-step:is(:hover,:focus-visible){color:var(--_k-fg)}
+.knobs-wt-toc-step[aria-current="step"]{color:var(--_k-fg)}
 .knobs-wt-toc-label{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 1.5em),transparent)}
 /* A step's state: an open ring, a filled dot once answered, nothing to answer a faint ring. */
-.knobs-wt-toc-glyph{--kw-tone:var(--ku-dim);position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--kw-tone);
+.knobs-wt-toc-glyph{--kw-tone:var(--_k-fg-3);position:absolute;left:11px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--kw-tone);
   transition:background var(--kw-snappy-ms) var(--kw-snappy),box-shadow var(--kw-snappy-ms) var(--kw-snappy)}
-.knobs-wt-toc-glyph[data-tone="accent"]{--kw-tone:var(--ku-accent)}
+.knobs-wt-toc-glyph[data-tone="accent"]{--kw-tone:var(--_k-accent)}
 .knobs-wt-toc-glyph[data-done]{background:var(--kw-tone)}
-.knobs-wt-toc-glyph[data-tone="none"]{box-shadow:inset 0 0 0 1px var(--ku-line)}
+.knobs-wt-toc-glyph[data-tone="none"]{box-shadow:inset 0 0 0 1px var(--_k-border)}
 .knobs-wt-actions{display:flex;flex-wrap:wrap;gap:4px}
-.knobs-ui .knobs-wt-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--ku-radius);color:var(--ku-label);cursor:pointer;white-space:nowrap;
+.knobs-ui .knobs-wt-btn{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 9px;border-radius:var(--_k-radius);color:var(--_k-fg-2);cursor:pointer;white-space:nowrap;
   transition:background .15s,color .15s}
-.knobs-ui .knobs-wt-btn:is(:hover,:focus-visible){background:var(--ku-wash-hi);color:var(--ku-text)}
-.knobs-ui .knobs-wt-btn[data-primary]{background:var(--ku-surface-hi);color:var(--ku-text)}
-.knobs-ui .knobs-wt-btn[data-primary]:is(:hover,:focus-visible){background:color-mix(in srgb,var(--ku-text) 16%,transparent)}
-.knobs-wt-keys{color:var(--ku-dim);font-size:calc(var(--kw-text) - 3px);line-height:1.6}
-.knobs-wt-keys kbd{font:inherit;color:var(--ku-label)}
+.knobs-ui .knobs-wt-btn:is(:hover,:focus-visible){background:var(--_ku-wash-hi);color:var(--_k-fg)}
+.knobs-ui .knobs-wt-btn[data-primary]{background:var(--_k-fill-selected);color:var(--_k-fg)}
+.knobs-ui .knobs-wt-btn[data-primary]:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_k-fg) 16%,transparent)}
+.knobs-wt-keys{color:var(--_k-fg-3);font-size:calc(var(--kw-text) - 3px);line-height:1.6}
+.knobs-wt-keys kbd{font:inherit;color:var(--_k-fg-2)}
 /* Narrow: the rail becomes a bar along the top, with the progress and the export only. */
 @container knobs-wt (max-width:880px){
-  .knobs-wt-rail{z-index:4;flex-direction:row;align-items:center;gap:12px;max-height:none;margin:0 calc(var(--kw-pad) * -1) 20px;padding:8px var(--kw-pad);top:0;background:var(--ku-page)}
+  .knobs-wt-rail{z-index:4;flex-direction:row;align-items:center;gap:12px;max-height:none;margin:0 calc(var(--kw-pad) * -1) 20px;padding:8px var(--kw-pad);top:0;background:var(--_k-bg-page)}
   .knobs-wt-progress{flex:1}.knobs-wt-toc,.knobs-wt-keys{display:none}
   .knobs-wt-step,.knobs-wt-shead{scroll-margin-top:60px}
 }
 
 /* ——— media slots ——— */
-.knobs-ui.knobs-wt-slot{position:relative;min-width:0;container:knobs-wt-slot / inline-size;color:var(--ku-text);font:var(--ku-font-weight) var(--k-walkthrough-text,14px)/1.5 var(--ku-font)}
-.knobs-wt-slot-label{display:block;margin:0 0 6px 2px;font:var(--ku-label-weight) calc(var(--k-walkthrough-text,14px) - 3px)/1.3 var(--ku-font);color:var(--ku-label);letter-spacing:.04em;text-transform:uppercase}
+.knobs-ui.knobs-wt-slot{position:relative;min-width:0;container:knobs-wt-slot / inline-size;color:var(--_k-fg);font:var(--_k-weight) var(--k-walkthrough-text,14px)/1.5 var(--_k-font)}
+.knobs-wt-slot-label{display:block;margin:0 0 6px 2px;font:var(--_k-weight-label) calc(var(--k-walkthrough-text,14px) - 3px)/1.3 var(--_k-font);color:var(--_k-fg-2);letter-spacing:.04em;text-transform:uppercase}
 /* A compare is exactly as tall as its pictures at this width, so there's no letterbox: the two
    sides edge to edge (side) or one (overlaid), plus its mode bar, the timeline and their two gaps
    (92 px), and the frame strip with its gap (158 px). */
@@ -14937,37 +16581,37 @@ var walkthroughCss = `
 .knobs-wt-fit[data-overlay]{height:calc(100cqw / var(--kw-aspect,1.7778) + var(--kw-chrome,92px))}
 .knobs-wt-fit[data-strip]{--kw-chrome:158px}
 .knobs-wt-fit[data-settled]{transition:height var(--k-wt-calm-ms,${calm.duration}ms) ${calm.easing}}
-.knobs-wt-frame{position:relative;width:100%;overflow:hidden;border-radius:calc(var(--ku-panel-radius) - 4px);background:var(--ku-surface);aspect-ratio:var(--kw-aspect,16/9)}
+.knobs-wt-frame{position:relative;width:100%;overflow:hidden;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill);aspect-ratio:var(--kw-aspect,16/9)}
 .knobs-wt-frame>:is(video,img){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;margin:0;border:0}
 .knobs-wt-frame[data-natural]{aspect-ratio:auto}
 .knobs-wt-frame[data-natural]>img{position:static;height:auto}
-.knobs-wt-code{margin:0;padding:12px 14px;max-height:420px;overflow:auto;border-radius:calc(var(--ku-panel-radius) - 4px);background:var(--ku-surface);color:var(--ku-text);
-  font:calc(var(--k-walkthrough-text,14px) - 2px)/1.55 var(--ku-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
+.knobs-wt-code{margin:0;padding:12px 14px;max-height:420px;overflow:auto;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill);color:var(--_k-fg);
+  font:calc(var(--k-walkthrough-text,14px) - 2px)/1.55 var(--_k-mono);white-space:pre;tab-size:2;scrollbar-width:thin}
 .knobs-wt-code[data-terminal]{white-space:pre-wrap;overflow-wrap:anywhere}
-.knobs-wt-prompt{color:var(--ku-dim);user-select:none;-webkit-user-select:none}
-.knobs-wt-cmd{color:var(--ku-text);font-weight:var(--ku-label-weight)}
-.knobs-wt-out{color:var(--ku-label)}
-.knobs-wt-metric{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:calc(var(--ku-panel-radius) - 4px);background:var(--ku-surface)}
-.knobs-wt-mlabel{color:var(--ku-label);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
+.knobs-wt-prompt{color:var(--_k-fg-3);user-select:none;-webkit-user-select:none}
+.knobs-wt-cmd{color:var(--_k-fg);font-weight:var(--_k-weight-label)}
+.knobs-wt-out{color:var(--_k-fg-2)}
+.knobs-wt-metric{display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill)}
+.knobs-wt-mlabel{color:var(--_k-fg-2);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
 .knobs-wt-mvalue{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-wt-mfrom{color:var(--ku-dim);font-size:calc(var(--k-walkthrough-text,14px) + 2px)}
-.knobs-wt-mto{font-size:calc(var(--k-walkthrough-text,14px) + 12px);font-weight:var(--ku-title-weight);line-height:1}
-.knobs-wt-mof{color:var(--ku-dim)}
-.knobs-wt-mdelta{--kw-tone:var(--ku-label);padding:1px 7px;border-radius:999px;font-size:calc(var(--k-walkthrough-text,14px) - 3px);font-weight:var(--ku-label-weight);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
-.knobs-wt-mdelta[data-tone="good"]{--kw-tone:var(--k-walkthrough-good,#30d158)}
-.knobs-wt-mdelta[data-tone="bad"]{--kw-tone:var(--ku-critical)}
-.knobs-wt-mtrack{position:relative;height:4px;border-radius:2px;background:color-mix(in srgb,var(--ku-text) 8%,transparent)}
+.knobs-wt-mfrom{color:var(--_k-fg-3);font-size:calc(var(--k-walkthrough-text,14px) + 2px)}
+.knobs-wt-mto{font-size:calc(var(--k-walkthrough-text,14px) + 12px);font-weight:var(--_k-weight-title);line-height:1}
+.knobs-wt-mof{color:var(--_k-fg-3)}
+.knobs-wt-mdelta{--kw-tone:var(--_k-fg-2);padding:1px 7px;border-radius:999px;font-size:calc(var(--k-walkthrough-text,14px) - 3px);font-weight:var(--_k-weight-label);color:var(--kw-tone);background:color-mix(in srgb,var(--kw-tone) 14%,transparent)}
+.knobs-wt-mdelta[data-tone="good"]{--kw-tone:var(--kw-good)}
+.knobs-wt-mdelta[data-tone="bad"]{--kw-tone:var(--_k-danger)}
+.knobs-wt-mtrack{position:relative;height:4px;border-radius:2px;background:color-mix(in srgb,var(--_k-fg) 8%,transparent)}
 .knobs-wt-mtrack>span{position:absolute;top:0;bottom:0;left:0;border-radius:inherit}
-.knobs-wt-mtrack>.knobs-wt-mafter{background:var(--ku-accent)}
-.knobs-wt-mtrack>.knobs-wt-mbefore{background:color-mix(in srgb,var(--ku-text) 30%,transparent)}
-.knobs-wt-callout{--kw-tone:var(--k-walkthrough-info,#64d2ff);display:flex;gap:10px;padding:10px 14px;border-radius:calc(var(--ku-panel-radius) - 4px);background:color-mix(in srgb,var(--kw-tone) 11%,transparent);color:var(--ku-text)}
+.knobs-wt-mtrack>.knobs-wt-mafter{background:var(--_k-accent)}
+.knobs-wt-mtrack>.knobs-wt-mbefore{background:color-mix(in srgb,var(--_k-fg) 30%,transparent)}
+.knobs-wt-callout{--kw-tone:var(--kw-info);display:flex;gap:10px;padding:10px 14px;border-radius:calc(var(--_k-radius-panel) - 4px);background:color-mix(in srgb,var(--kw-tone) 11%,transparent);color:var(--_k-fg)}
 .knobs-wt-callout::before{content:"";flex:none;width:6px;height:6px;margin-top:.62em;border-radius:50%;background:var(--kw-tone)}
-.knobs-wt-callout[data-tone="good"]{--kw-tone:var(--k-walkthrough-good,#30d158)}
-.knobs-wt-callout[data-tone="warn"]{--kw-tone:var(--ku-warn)}
-.knobs-wt-callout[data-tone="bad"]{--kw-tone:var(--ku-critical)}
-.knobs-wt-text{max-width:var(--k-walkthrough-measure,68ch);color:var(--ku-label)}
-.knobs-wt-hold{border-radius:calc(var(--ku-panel-radius) - 4px);background:var(--ku-surface)}
-.knobs-wt-failed{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--ku-dim);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
+.knobs-wt-callout[data-tone="good"]{--kw-tone:var(--kw-good)}
+.knobs-wt-callout[data-tone="warn"]{--kw-tone:var(--_k-warn)}
+.knobs-wt-callout[data-tone="bad"]{--kw-tone:var(--_k-danger)}
+.knobs-wt-text{max-width:var(--k-walkthrough-measure,68ch);color:var(--_k-fg-2)}
+.knobs-wt-hold{border-radius:calc(var(--_k-radius-panel) - 4px);background:var(--_k-fill)}
+.knobs-wt-failed{display:flex;align-items:center;justify-content:center;min-height:80px;color:var(--_k-fg-3);font-size:calc(var(--k-walkthrough-text,14px) - 2px)}
 @media(prefers-reduced-motion:reduce){:is(.knobs-walkthrough,.knobs-wt-slot) :where(*,::before,::after){transition-duration:.15s!important;transition-property:opacity,background,color!important}}
 `;
 
@@ -15004,7 +16648,7 @@ function parseAspect(aspect) {
   const h = m[2] === undefined ? 1 : Number(m[2]);
   return w > 0 && h > 0 ? w / h : undefined;
 }
-function source(s, base) {
+function source2(s, base) {
   const v = typeof s === "string" ? { src: s } : s;
   return { ...v, src: resolveSrc(v.src, base) };
 }
@@ -15013,7 +16657,7 @@ function fillMedia(m, base) {
     return mediaOf(resolveSrc(m, base));
   switch (m.kind) {
     case "compare":
-      return { ...m, before: source(m.before, base), after: source(m.after, base) };
+      return { ...m, before: source2(m.before, base), after: source2(m.after, base) };
     case "video":
       return {
         ...m,
@@ -15414,7 +17058,7 @@ function injectWalkthroughStyles(doc) {
     return;
   const style = doc.createElement("style");
   style.dataset.knobsUiWalkthrough = "";
-  style.textContent = walkthroughCss;
+  style.textContent = aliased(walkthroughCss);
   doc.head.append(style);
 }
 var watchers = new WeakMap;
@@ -15769,7 +17413,7 @@ function mediaSlot(container, options) {
   const m = fillMedia(options.media);
   const root = div(doc, "knobs-wt-slot");
   root.dataset.kind = m.kind;
-  applyLook(root, options);
+  applyLook2(root, options);
   const label = labelOf2(m);
   if (label && (m.kind === "video" || m.kind === "image" || m.kind === "code" || m.kind === "terminal")) {
     const l = doc.createElement("span");
@@ -15915,8 +17559,8 @@ var ICON = {
   send: svg('<path d="M8 13V3.5M4 7.5 8 3.5l4 4"/>'),
   close: svg('<path d="M4.5 4.5l7 7M11.5 4.5l-7 7"/>')
 };
-var CALM2 = springMotion({ duration: 0.4, bounce: 0 });
-var SMOOTH = springMotion({ duration: 0.45, bounce: 0 });
+var CALM2 = springMotion(SPRINGS.calm);
+var SMOOTH = springMotion(SPRINGS.smooth);
 var BACK_MS = 4500;
 function tasteTest(container, options) {
   const doc = container.ownerDocument;
@@ -15936,7 +17580,7 @@ function tasteTest(container, options) {
   root.setAttribute("aria-label", "Options");
   root.style.setProperty("--kw-n", String(Math.min(list.length, 3)));
   if (!container.closest(".knobs-ui"))
-    applyLook(root, options);
+    applyLook2(root, options);
   const slots = [];
   const tiles = list.map((o, i) => {
     const tile = el(doc, "div", "knobs-wt-option");
@@ -16025,7 +17669,7 @@ function walkthrough(container, options) {
   const look = lookOf2(options);
   const storage = options.storage === undefined ? browserStorage() : options.storage;
   const root = el(doc, "div", "knobs-walkthrough");
-  applyLook(root, options);
+  applyLook2(root, options);
   container.append(root);
   let page = normalizeWalkthrough(options.doc);
   const keyOf = () => storageKey(page.id, "walkthrough");
@@ -16290,13 +17934,13 @@ function walkthrough(container, options) {
         placeFull(full);
         win.addEventListener("resize", onFullResize);
       }
-      tune(full.p, reduced() ? springMotion({ duration: 0.2, bounce: 0 }) : SMOOTH);
+      tune(full.p, reduced() ? springMotion(FADE) : SMOOTH);
       full.p.set(1);
       record({ what: "full", step: v.step.key, detail: "on" });
     } else {
       if (!full)
         return;
-      tune(full.p, reduced() ? springMotion({ duration: 0.16, bounce: 0 }) : SMOOTH);
+      tune(full.p, reduced() ? springMotion(FADE) : SMOOTH);
       full.p.set(0);
       record({ what: "full", step: full.v.step.key, detail: "off" });
     }