@kitlangton/knobs 0.3.0 → 0.4.0-next.1

package/dist/dev/{chunk-pmkvb9ep.js → chunk-8mabjeyk.js}

@@ -2,10 +2,203 @@ import {
   isTypingTarget,
   GRADIENT_SAMPLES,
   Spring,
+  springMotion2,
   springEasing,
   springCss2,
+  SPRINGS2,
+  springLinear,
+  DEFAULT_LINEAR,
+  motionCss,
   storageKey
-} from "./chunk-7xgkerd2.js";
+} from "./chunk-3ygqgy1x.js";
+
+// src/core/theme.ts
+var property = (k) => k.startsWith("--") ? k : `--k-${k}`;
+function presetCss(preset) {
+  if (!/^[\w-]+$/.test(preset.name))
+    throw Error(`Invalid preset name: ${preset.name}`);
+  let at = `.knobs-root[data-preset="${preset.name}"]`, light = preset.light ?? {}, decls = Object.entries(preset.dark).map(([k, dark]) => {
+    let l = light[k];
+    return l === void 0 || String(l) === String(dark) ? `${property(k)}:${dark}` : `${property(k)}:light-dark(${l},${dark})`;
+  });
+  for (let [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 glide = /* @__PURE__ */ springCss2({ duration: 0.185, bounce: 0.14 });
+var problemsPreset = {
+  name: "problems",
+  dark: {
+    bg: "#161618",
+    surface: "rgba(255,255,255,.055)",
+    "surface-hi": "rgba(255,255,255,.11)",
+    line: "rgba(255,255,255,.075)",
+    "line-hi": "rgba(255,255,255,.12)",
+    text: "#f5f5f7",
+    label: "rgba(235,235,245,.62)",
+    dim: "rgba(235,235,245,.36)",
+    accent: "#0091ff",
+    modified: "#0091ff",
+    "seg-bg": "rgba(120,120,128,.16)",
+    "seg-active": "rgba(120,120,128,.24)",
+    "toggle-track": "rgba(120,120,128,.32)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    font: 'system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif',
+    mono: '"Kit SF Mono",ui-monospace,Menlo,monospace',
+    "font-size": "13px",
+    "label-weight": 500,
+    row: "34px",
+    radius: "8px",
+    "panel-radius": "12px",
+    pad: "0px",
+    inset: "10px",
+    gap: "4px",
+    "row-gap": "4px",
+    glass: 0,
+    glow: 0,
+    blur: 0.6,
+    "hover-in": 0,
+    "hover-out": 100,
+    "handle-rest": 0.55,
+    handle: "var(--k-text)",
+    "handle-inset": "7.5px",
+    "fill-base": "transparent",
+    "fill-rest-mix": "24%",
+    "fill-hover-mix": "36%",
+    "fill-active-mix": "36%",
+    chrome: 0,
+    "group-transform": "none",
+    "value-font": "var(--k-mono)",
+    "unit-gap": "0px",
+    "unit-color": "currentColor",
+    "readout-mark": 1,
+    "group-size": "12px",
+    "group-color": "rgba(235,235,245,.62)",
+    "group-inset": "0px",
+    "group-tracking": "-.01em",
+    "group-divider": "rgba(255,255,255,.075)",
+    "group-divider-gap": "8px",
+    "curve-inset": "0px",
+    "curve-guide": "dashed",
+    "curve-dot": 0,
+    spring: "0.185 0.14",
+    "fill-ease": glide.easing,
+    "fill-ms": glide.duration
+  },
+  light: {
+    bg: "#fff",
+    surface: "rgba(0,0,0,.045)",
+    "surface-hi": "rgba(0,0,0,.09)",
+    line: "rgba(0,0,0,.07)",
+    "line-hi": "rgba(0,0,0,.11)",
+    text: "#000",
+    label: "rgba(60,60,67,.66)",
+    dim: "rgba(60,60,67,.38)",
+    accent: "#0088ff",
+    modified: "#0088ff",
+    "seg-bg": "rgba(120,120,128,.11)",
+    "seg-active": "#fff",
+    "toggle-track": "rgba(120,120,128,.2)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    "group-color": "rgba(60,60,67,.66)",
+    "group-divider": "rgba(0,0,0,.07)"
+  }
+};
+
+// src/core/appearance.ts
+var MODES = {
+  dark: "dark",
+  light: "light",
+  auto: "system"
+};
+function resolveLook(options = {}, base) {
+  let t = options.theme, mode = typeof t === "string" ? MODES[t] : void 0, theme = typeof t === "object" ? t : base?.theme, preset = options.preset ?? base?.preset;
+  return {
+    ...theme ? { theme } : {},
+    appearance: options.appearance ?? mode ?? base?.appearance ?? "inherit",
+    ...preset ? { preset } : {}
+  };
+}
+var themes = /* @__PURE__ */ new Map;
+function themeOf(el) {
+  let name = el.closest("[data-knobs-theme]")?.dataset.knobsTheme;
+  return name ? themes.get(name) : void 0;
+}
+var themeSelector = (name) => `:where(.knobs-root)[data-knobs-theme="${name}"]`;
+function upsertStyle(doc, key, value, content) {
+  let existing = doc.querySelector(`style[${key}="${value}"]`);
+  if (existing) {
+    if (existing.textContent !== content)
+      existing.textContent = content;
+    return;
+  }
+  let 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) }));
+}
+var presets = /* @__PURE__ */ new Map;
+function injectPreset(doc, preset) {
+  presets.set(preset.name, preset), upsertStyle(doc, "data-knobs-preset", preset.name, presetCss(preset));
+}
+var setAttr = (el, name, value) => {
+  if (value === void 0)
+    el.removeAttribute(name);
+  else if (el.getAttribute(name) !== value)
+    el.setAttribute(name, value);
+};
+function applyLook(el, look) {
+  let doc = el.ownerDocument;
+  if (look.theme)
+    injectTheme(doc, look.theme);
+  if (look.preset)
+    injectPreset(doc, look.preset);
+  if (setAttr(el, "data-knobs-theme", look.theme?.name), setAttr(el, "data-preset", look.preset?.name), setAttr(el, "data-appearance", look.appearance === "inherit" ? void 0 : look.appearance), look.appearance === "inherit")
+    followPage(el);
+  else
+    clearInherited(el);
+}
+var clearInherited = (el) => {
+  el.style.removeProperty("color-scheme"), el.style.removeProperty("--_k-light");
+};
+function resolveInherited(el) {
+  let parent = el.parentElement, win = el.ownerDocument.defaultView;
+  if (!parent || !win || el.hasAttribute("data-appearance"))
+    return;
+  if (parent.closest(".knobs-root"))
+    return clearInherited(el);
+  let scheme = win.getComputedStyle(parent).colorScheme.trim(), dark = /\bdark\b/.test(scheme), light = /\blight\b/.test(scheme);
+  if (!dark && !light)
+    return clearInherited(el);
+  let isLight = dark && light ? win.matchMedia?.("(prefers-color-scheme: light)").matches ?? !1 : light;
+  el.style.setProperty("color-scheme", "inherit"), el.style.setProperty("--_k-light", isLight ? "1" : "0");
+}
+var watched = /* @__PURE__ */ new WeakSet;
+function followPage(el) {
+  let doc = el.ownerDocument, win = doc.defaultView;
+  if (!win)
+    return;
+  let run = () => resolveInherited(el);
+  if (el.isConnected)
+    run();
+  if (queueMicrotask(run), win.requestAnimationFrame?.(run), watched.has(doc))
+    return;
+  watched.add(doc);
+  let all = () => {
+    for (let root of doc.querySelectorAll(".knobs-root:not([data-appearance])"))
+      resolveInherited(root);
+  }, observer = new MutationObserver(all), attributeFilter = ["class", "data-theme", "data-appearance"];
+  if (observer.observe(doc.documentElement, { attributes: !0, attributeFilter }), doc.body)
+    observer.observe(doc.body, { attributes: !0, attributeFilter });
+  win.matchMedia?.("(prefers-color-scheme: light)").addEventListener?.("change", all);
+}
+
+// src/core/adapter.ts
+var panelLook = (controls, look = {}) => resolveLook(look, resolveLook({ theme: controls.theme, appearance: controls.appearance }));
 
 // src/panel/icons.ts
 var ICONS = {
@@ -162,99 +355,8 @@ var rolling_css_default = `.rn-root {
 .rn-solid:not([data-rn-hydrated]) > .rn-mount { display: none; }
 `;
 
-// src/core/theme.ts
-var block = (tokens) => Object.entries(tokens).map(([k, v]) => `${k.startsWith("--") || k === "color-scheme" ? k : `--k-${k}`}:${v}`).join(";");
-function presetCss(preset) {
-  if (!/^[\w-]+$/.test(preset.name))
-    throw Error(`Invalid preset name: ${preset.name}`);
-  let at = `.knobs-panel[data-preset="${preset.name}"]`, 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)}`;
-}
-var glide = /* @__PURE__ */ springCss2({ duration: 0.185, bounce: 0.14 });
-var problemsPreset = {
-  name: "problems",
-  dark: {
-    bg: "#161618",
-    surface: "rgba(255,255,255,.055)",
-    "surface-hi": "rgba(255,255,255,.11)",
-    line: "rgba(255,255,255,.075)",
-    "line-hi": "rgba(255,255,255,.12)",
-    text: "#f5f5f7",
-    label: "rgba(235,235,245,.62)",
-    dim: "rgba(235,235,245,.36)",
-    accent: "#0091ff",
-    modified: "#0091ff",
-    "seg-bg": "rgba(120,120,128,.16)",
-    "seg-active": "rgba(120,120,128,.24)",
-    "toggle-track": "rgba(120,120,128,.32)",
-    "toggle-thumb": "#fff",
-    rim: "transparent",
-    font: 'system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif',
-    mono: '"Kit SF Mono",ui-monospace,Menlo,monospace',
-    "font-size": "13px",
-    "label-weight": 500,
-    row: "34px",
-    radius: "8px",
-    "panel-radius": "12px",
-    pad: "0px",
-    inset: "10px",
-    gap: "4px",
-    "row-gap": "4px",
-    glass: 0,
-    glow: 0,
-    blur: 0.6,
-    "hover-in": 0,
-    "hover-out": 100,
-    "handle-rest": 0.55,
-    handle: "var(--k-text)",
-    "handle-inset": "7.5px",
-    "fill-base": "transparent",
-    "fill-rest-mix": "24%",
-    "fill-hover-mix": "36%",
-    "fill-active-mix": "36%",
-    chrome: 0,
-    "group-transform": "none",
-    "value-font": "var(--k-mono)",
-    "unit-gap": "0px",
-    "unit-color": "currentColor",
-    "readout-mark": 1,
-    "group-size": "12px",
-    "group-color": "rgba(235,235,245,.62)",
-    "group-inset": "0px",
-    "group-tracking": "-.01em",
-    "group-divider": "rgba(255,255,255,.075)",
-    "group-divider-gap": "8px",
-    "curve-inset": "0px",
-    "curve-guide": "dashed",
-    "curve-dot": 0,
-    spring: "0.185 0.14",
-    "fill-ease": glide.easing,
-    "fill-ms": glide.duration
-  },
-  light: {
-    bg: "#fff",
-    surface: "rgba(0,0,0,.045)",
-    "surface-hi": "rgba(0,0,0,.09)",
-    line: "rgba(0,0,0,.07)",
-    "line-hi": "rgba(0,0,0,.11)",
-    text: "#000",
-    label: "rgba(60,60,67,.66)",
-    dim: "rgba(60,60,67,.38)",
-    accent: "#0088ff",
-    modified: "#0088ff",
-    "seg-bg": "rgba(120,120,128,.11)",
-    "seg-active": "#fff",
-    "toggle-track": "rgba(120,120,128,.2)",
-    "toggle-thumb": "#fff",
-    rim: "transparent",
-    "group-color": "rgba(60,60,67,.66)",
-    "group-divider": "rgba(0,0,0,.07)",
-    "color-scheme": "light"
-  }
-};
-
 // src/panel/motion.ts
-var FILL = { omega: 30, zeta: 0.88 };
+var FILL = springMotion2(SPRINGS2.default);
 var LEAD = { omega: 34, zeta: 0.86 }, TRAIL = { omega: 25, zeta: 1 }, trailScale = (blur) => 0.6 + 0.4 * clamp(blur, 0, 2);
 
 class Edges {
@@ -560,7 +662,7 @@ function digitHints(count, showing) {
 }
 
 // src/panel/crumbs.ts
-var glide2 = springEasing(2 * Math.PI / 0.3, 1), CRUMB_GLIDE = `${glide2.ms}ms ${glide2.easing}`, SLIDE = 5, GAP = 6, HINT_GAP = 10, SEP = "›";
+var glide2 = springLinear(SPRINGS2.default), CRUMB_GLIDE = `${glide2.ms}ms ${glide2.easing}`, SLIDE = 5, GAP = 6, HINT_GAP = 10, SEP = "›";
 function createCrumbs(o) {
   let doc = o.header.ownerDocument, element = doc.createElement("div");
   element.className = "knobs-crumbs", element.setAttribute("aria-hidden", "true"), o.header.append(element);
@@ -673,38 +775,1388 @@ function createCrumbs(o) {
   };
 }
 
-// src/panel/styles.ts
-var lead = springEasing(LEAD.omega, LEAD.zeta), trail = springEasing(TRAIL.omega, TRAIL.zeta), fill = springEasing(FILL.omega, FILL.zeta), LEAD_T = `${lead.ms}ms var(--k-lead)`, TRAIL_T = `calc(${trail.ms}ms * (.6 + .4 * clamp(0, var(--k-blur), 2))) var(--k-trail)`, FILL_T = "calc(var(--k-fill-ms) * 1ms * clamp(var(--k-blur),.1,2)) var(--k-fill-ease)", SLIDE_T = "calc(var(--k-fill-ms) * 1ms) var(--k-fill-ease)", snappy = springEasing(2 * Math.PI / 0.25, 1), snappyOut = springEasing(2 * Math.PI / 0.2, 1), BLOOM_IN = `${snappy.ms}ms ${snappy.easing}`, BLOOM_OUT = `${snappyOut.ms}ms ${snappyOut.easing}`, DELAY = "var(--k-delay,0ms)", armed = springEasing(2 * Math.PI / 0.3, 1), ARMED_T = `${armed.ms}ms ${armed.easing}`, POINTER_ROW = ".knobs-panel[data-k-row-hover]:not([data-keyboard])", DELAYED = ".knobs-fill,.knobs-handle,.knobs-seg-pill,.knobs-toggle,.knobs-toggle i,.knobs-arm,.knobs-curve,.knobs-swatch,.knobs-strip-thumb,.knobs-pad>i,.knobs-ease-handle,.knobs-range-track,.knobs-range-fill,.knobs-range-thumb,.knobs-dial-hand,.knobs-grad,.knobs-grad-mini,.knobs-grad-mini>i,.knobs-grad-stop,.knobs-graph-pt", GRAD_N = GRADIENT_SAMPLES, gradStops = (at) => Array.from({ length: GRAD_N }, (_, i) => `var(--kgrad-${i}) ${at(i)}`).join(","), GRAD_STRIP = `linear-gradient(to right,${gradStops((i) => `calc(var(--kg-r) + (100% - var(--kg-r) * 2) * ${Number((i / (GRAD_N - 1)).toFixed(5))})`)})`, GRAD_MINI = `linear-gradient(to right,${gradStops((i) => `${Number((i / (GRAD_N - 1) * 100).toFixed(3))}%`)})`, GRAD_PROPS = Array.from({ length: GRAD_N }, (_, i) => `@property --kgrad-${i}{syntax:"<color>";inherits:false;initial-value:transparent}`).join(`
-`), COLOR_TOKENS = [
+// src/tokens/color.ts
+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 ** 0.4166666666666667 - 0.055;
+function linearToOklch([r, g, b, a]) {
+  let l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b), m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b), s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b), L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s, A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s, B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s, c = Math.hypot(A, B), 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 }) {
+  let hr = h * Math.PI / 180, A = c * Math.cos(hr), B = c * Math.sin(hr), l = (L + 0.3963377774 * A + 0.2158037573 * B) ** 3, m = (L - 0.1055613458 * A - 0.0638541728 * B) ** 3, 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
+  ];
+}
+var inGamut = ([r, g, b]) => [r, g, b].every((x) => x >= -0.00001 && x <= 1.00001);
+function oklchToLinearInGamut(color) {
+  let rgb = oklchToLinear(color);
+  if (inGamut(rgb))
+    return clampRgba(rgb);
+  let lo = 0, hi = color.c;
+  for (let i = 0;i < 24; i++) {
+    let mid = (lo + hi) / 2;
+    if (rgb = oklchToLinear({ ...color, c: mid }), inGamut(rgb))
+      lo = mid;
+    else
+      hi = mid;
+  }
+  return clampRgba(oklchToLinear({ ...color, c: lo }));
+}
+var clampRgba = ([r, g, b, a]) => [clamp01(r), clamp01(g), clamp01(b), clamp01(a)];
+function parseColor(input) {
+  let 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 Error(`Invalid colour: ${input}`);
+    let 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];
+  }
+  let fn = /^(oklch|rgba?)\(([^)]*)\)$/.exec(s);
+  if (!fn)
+    throw Error(`Unsupported colour: ${input}`);
+  let parts = fn[2].split(/[\s,/]+/).filter(Boolean), num = (p, scale) => p === void 0 ? 1 : p.endsWith("%") ? Number.parseFloat(p) / 100 : Number.parseFloat(p) / scale;
+  if (fn[1] === "oklch") {
+    let 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)
+  ];
+}
+var toOklch = (input) => linearToOklch(parseColor(input)), byte = (c) => Math.round(clamp01(c) * 255).toString(16).padStart(2, "0");
+function formatHex([r, g, b, a]) {
+  let rgb = `#${byte(toGamma(r))}${byte(toGamma(g))}${byte(toGamma(b))}`;
+  return a >= 0.9995 ? rgb : rgb + byte(a);
+}
+var oklchToHex = (color) => formatHex(oklchToLinearInGamut(color)), normalize = (input) => formatHex(parseColor(input));
+function withAlpha(input, alpha) {
+  let [r, g, b, a] = parseColor(input);
+  return formatHex([r, g, b, a * alpha]);
+}
+function over(top, bottom) {
+  let t = parseColor(top), b = parseColor(bottom), a = t[3], mix = (i) => toLinear(toGamma(t[i]) * a + toGamma(b[i]) * (1 - a));
+  return formatHex([mix(0), mix(1), mix(2), 1]);
+}
+function apcaY(input) {
+  let [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) {
+  let bgOpaque = parseColor(background)[3] < 1 ? over(background, "#000") : background, fg = parseColor(text)[3] < 1 ? over(text, bgOpaque) : text, soft = (y) => y > 0.022 ? y : y + (0.022 - y) ** 1.414, yt = soft(apcaY(fg)), yb = soft(apcaY(bgOpaque));
+  if (Math.abs(yb - yt) < 0.0005)
+    return 0;
+  if (yb > yt) {
+    let sapc = (yb ** 0.56 - yt ** 0.57) * 1.14;
+    return sapc < 0.1 ? 0 : (sapc - 0.027) * 100;
+  }
+  let sapc = (yb ** 0.65 - yt ** 0.62) * 1.14;
+  return sapc > -0.1 ? 0 : -(sapc + 0.027) * 100;
+}
+
+// src/tokens/schema.ts
+var theme = { from: "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 = [
+  {
+    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])), cssName = (t) => `${t.tier === "private" ? "--_k-" : "--k-"}${t.name}`, PROPERTY_TO_NAME = new Map(TOKENS.map((t) => [cssName(t), t.name])), tokenForProperty = (property) => PROPERTY_TO_NAME.get(property), DEPRECATED = new Map(TOKENS.flatMap((t) => (t.deprecated ?? []).map((old) => [old, cssName(t)])));
+
+// src/tokens/css.ts
+function pair(def, dark, light) {
+  if (dark === void 0 && light === void 0)
+    return;
+  if (dark === void 0 || light === void 0 || dark === light || def.type !== "color")
+    return dark ?? light;
+  return `light-dark(${light},${dark})`;
+}
+function declaredValue(theme, def) {
+  let name = def.name, dark = theme.declared.dark[name], light = theme.declared.light[name];
+  if (def.type === "color" && dark === void 0 !== (light === void 0))
+    return pair(def, dark ?? theme.dark[name], light ?? theme.light[name]);
+  return pair(def, dark, light);
+}
+var 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]) => {
+  let rule = `${selector}{color-scheme:${scheme};--_k-light:${scheme === "light" ? "1" : scheme === "inherit" ? "inherit" : "0"}}`;
+  return scheme === "light dark" ? `${rule}
+@media(prefers-color-scheme:light){${selector}{--_k-light:1}}` : rule;
+}).join(`
+`), privately = (css) => css.replace(/var\(--k-([a-z0-9-]+)/g, (m, name) => tokenForProperty(`--k-${name}`) ? `var(--_k-${name}` : m);
+function resolver(def) {
+  let reads = [...def.deprecated ?? []];
+  if (def.tier !== "private")
+    reads.push(cssName(def));
+  let source = def.source, out = ("css" in source ? privately(source.css) : ("value" in source) && def.tier === "private" ? source.value : void 0) ?? "";
+  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) {
+  let root = [], resolved = [];
+  for (let def of TOKENS) {
+    let source = def.source, own = declaredValue(theme, def) ?? ("from" in source ? "" : ("value" in source) && def.tier !== "private" ? source.value : void 0);
+    if (own !== void 0 && 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) {
+  let decls = [];
+  for (let def of TOKENS) {
+    let own = declaredValue(theme, def);
+    if (own !== void 0)
+      decls.push(`${cssName(def)}:${own}`);
+  }
+  return `@layer knobs.tokens{${selector}{${decls.join(";")}}}`;
+}
+
+// src/tokens/evaluate.ts
+function splitTop(s) {
+  let out = [], depth = 0, start = 0;
+  for (let i = 0;i < s.length; i++) {
+    let 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;
+  }
+  return out.push(s.slice(start).trim()), out;
+}
+var call = (s, fn) => s.startsWith(`${fn}(`) && s.endsWith(")") ? s.slice(fn.length + 1, -1) : void 0;
+function evaluate(input, lookup) {
+  let s = input.trim(), v = call(s, "var");
+  if (v !== void 0) {
+    let [name, ...fallback] = splitTop(v), value = lookup(name);
+    if (value !== void 0)
+      return evaluate(value, lookup);
+    if (fallback.length)
+      return evaluate(fallback.join(","), lookup);
+    throw Error(`Unresolved ${name}`);
+  }
+  let mix = call(s, "color-mix");
+  if (mix !== void 0)
+    return colorMix(mix, lookup);
+  return normalize(s);
+}
+function percent(s, lookup) {
+  let c = call(s, "calc");
+  if (c === void 0)
+    return Number.parseFloat(s) / 100;
+  let [a, b] = c.split("*").map((x) => x.trim()), num = (x) => {
+    let inner = call(x, "var");
+    if (inner !== void 0)
+      return Number.parseFloat(lookup(splitTop(inner)[0]) ?? Number.NaN.toString());
+    return x.endsWith("%") ? Number.parseFloat(x) / 100 : Number.parseFloat(x);
+  }, out = num(a) * num(b);
+  if (!Number.isFinite(out))
+    throw Error(`Bad percentage: ${s}`);
+  return out;
+}
+function stop(s, lookup) {
+  let 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) {
+  let [space, a, b] = splitTop(args);
+  if (space !== "in oklch")
+    throw Error(`Only color-mix(in oklch, …) is supported, got ${space}`);
+  let x = stop(a, lookup), y = stop(b, lookup), p1 = x.p ?? (y.p === void 0 ? 0.5 : 1 - y.p), p2 = y.p ?? 1 - p1, sum = p1 + p2, scale = sum < 1 ? sum : 1;
+  p1 /= sum, p2 /= sum;
+  let ca = linearToOklch(parseColor(x.color)), cb = linearToOklch(parseColor(y.color)), a1 = ca.alpha ?? 1, a2 = cb.alpha ?? 1, alpha = a1 * p1 + a2 * p2;
+  if (alpha <= 0)
+    return "#00000000";
+  let powerless = (c, alpha) => c.c < 0.0002 || alpha === 0, h1 = powerless(ca, a1) ? cb.h : ca.h, dh = (powerless(cb, a2) ? h1 : cb.h) - h1;
+  if (dh > 180)
+    dh -= 360;
+  if (dh < -180)
+    dh += 360;
+  let pre = (u, v) => (u * a1 * p1 + v * a2 * p2) / alpha, 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]);
+}
+
+// src/themes/define.ts
+var DEFAULT_SANS = 'system-ui,-apple-system,"SF Pro Text",sans-serif', DEFAULT_MONO = '"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace', 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 } }, contrastMultiplier = (contrast) => 0.5 + Math.min(100, Math.max(0, contrast)) / 100;
+function fontStack(family, fallback) {
+  if (family.includes(","))
+    return family;
+  let 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, far = away > 0 ? 100 : 0;
+  if (apca(make(far), bg) <= target)
+    return far;
+  for (let i = 0;i < 30; i++) {
+    let 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 };
+  let dark = inputs.accent, o = toOklch(dark), 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) {
+  let m = contrastMultiplier(inputs.contrast), { hue, chroma } = inputs.gray, neutral = (l, tint) => oklchToHex({ l: l / 100, c: chroma * tint, h: hue }), user = inputs.tokens[appearance], out = {}, surfaces = SURFACES[appearance];
+  for (let [role, l] of Object.entries(surfaces)) {
+    let spread = surfaces.bg + (l - surfaces.bg) * m;
+    out[role] = user[role] ?? neutral(Math.min(100, Math.max(0, spread)), TINT.surface[appearance]);
+  }
+  let bg = out.bg, away = appearance === "dark" ? 1 : -1, inkSpread = 1 + (m - 1) * 0.4;
+  for (let [role, target] of Object.entries(INKS[appearance])) {
+    let tint = role === "fg" ? TINT.fg : role === "border-strong" ? TINT.border : TINT.ink, make = (x) => neutral(x, tint), l = solve(target * inkSpread, bg, away, make);
+    out[role] = meet(l, APCA_BUDGET[role], bg, away, make);
+  }
+  out.accent = accent;
+  let 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 (let [role, [l, c, h]] of Object.entries(STATUS[appearance]))
+    out[role] = oklchToHex({ l: l / 100, c, h });
+  let s = SERIES[appearance], 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;
+  let material = inputs.material;
+  if (out.glass = material === "glass" ? "0.6" : "0", out.glow = material === "glass" ? "0.5" : "0", out.rim = material === "flat" ? "transparent" : appearance === "dark" ? "#ffffff1a" : "#ffffff99", 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) {
+  let raw = (name) => {
+    let def = TOKEN_BY_NAME.get(name), own = declared[name];
+    if (own !== void 0)
+      return own;
+    let source = def.source;
+    if ("css" in source)
+      return source.css;
+    if ("value" in source)
+      return source.value;
+    throw Error(`Theme does not supply ${name}`);
+  }, lookup = (property) => {
+    let name = tokenForProperty(property);
+    return name ? raw(name) : void 0;
+  }, out = {};
+  for (let t of TOKENS)
+    out[t.name] = t.type === "color" ? evaluate(raw(t.name), lookup) : raw(t.name);
+  return out;
+}
+function gpuOf(resolved) {
+  let out = {};
+  for (let 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 Error(`Invalid theme name: ${name}`);
+  if (name === "dark" || name === "light")
+    throw Error(`Reserved theme name: ${name}`);
+  for (let appearance of ["dark", "light"])
+    for (let key of Object.keys(inputs.tokens[appearance]))
+      if (!TOKEN_BY_NAME.has(key))
+        throw Error(`Unknown token in theme ${name}: ${key}`);
+}
+function defineTheme(spec) {
+  let inputs = mergeInputs(spec.extends?.inputs ?? BASE, spec);
+  validate(spec.name, inputs);
+  let accent = accentPair(inputs), generated = {
+    dark: generate(inputs, "dark", accent.dark),
+    light: generate(inputs, "light", accent.light)
+  }, material = shadows(inputs.material, {
+    dark: inputs.tokens.dark["border-strong"] ?? generated.dark["border-strong"],
+    light: inputs.tokens.light["border-strong"] ?? generated.light["border-strong"]
+  }), declared = {
+    dark: { ...generated.dark, ...material, ...inputs.tokens.dark },
+    light: { ...generated.light, ...material, ...inputs.tokens.light }
+  };
+  for (let [key, dark] of Object.entries(declared.dark)) {
+    let def = TOKEN_BY_NAME.get(key), light = declared.light[key];
+    if (def.type !== "color" && light !== void 0 && light !== dark)
+      throw Error(`Theme ${spec.name}: only colours may differ by appearance (${key})`);
+  }
+  let dark = resolve(declared.dark), light = resolve(declared.light), 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;
+}
+
+// src/themes/knobs.ts
+var 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 = [
   "bg",
-  "surface",
-  "surface-hi",
-  "line",
-  "line-hi",
-  "text",
-  "label",
-  "dim",
+  "fill",
+  "fill-selected",
+  "border",
+  "border-strong",
+  "fg",
+  "fg-2",
+  "fg-3",
   "accent",
   "modified",
-  "seg-bg",
-  "seg-active",
+  "segmented-track",
+  "segmented-active",
   "toggle-track",
   "toggle-thumb",
+  "toggle-thumb-off",
+  "slider-handle",
   "rim",
-  "edge",
-  "page"
-], LENGTH_TOKENS = ["pad", "inset", "row", "gap", "radius", "panel-radius", "font-size"], NUMBER_TOKENS = ["label-weight", "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(","), register = (names, syntax, initial) => names.map((n) => `@property --kt-${n}{syntax:"${syntax}";inherits:false;initial-value:${initial}}`).join(`
-`), DRIVERS = `${register(COLOR_TOKENS, "<color>", "transparent")}
+  "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(","), 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(`
+`);
+var DRIVERS = `${register(COLOR_TOKENS, "<color>", "transparent")}
 ${register(LENGTH_TOKENS, "<length>", "0px")}
 ${register(NUMBER_TOKENS, "<number>", "0")}
 ${register(["width"], "<length-percentage>", "288px")}
-.knobs-panel,.knobs-chip,.knobs-toast{${ANIMATED.map((t) => `--kt-${t}:var(--k-${t});--kv-${t}:var(--kt-${t})`).join(";")}}`, aliased = (css) => css.replace(new RegExp(`var\\(--k-(${ANIMATED.join("|")})\\)`, "g"), "var(--kv-$1)"), lightVars = `
-  --k-bg:#f5f5f7;--k-surface:rgba(0,0,0,calc(.05 * var(--k-contrast)));--k-surface-hi:rgba(0,0,0,calc(.095 * var(--k-contrast)));--k-line:rgba(0,0,0,calc(.1 * var(--k-contrast)));--k-line-hi:rgba(0,0,0,calc(.2 * var(--k-contrast)));
-  --k-text:rgba(0,0,0,.88);--k-label:rgba(60,60,67,.68);--k-dim:rgba(60,60,67,.5);--k-accent:#1c1c1e;--k-modified:rgba(0,0,0,.42);
-  --k-seg-bg:rgba(0,0,0,.065);--k-seg-active:#fff;--k-toggle-track:rgba(0,0,0,.14);--k-toggle-thumb:#fff;--k-shadow:0 10px 32px rgba(0,0,0,.14),0 1px 3px rgba(0,0,0,.08);
-  --k-rim:rgba(255,255,255,.6);--k-edge:rgba(0,0,0,calc(.07 * var(--k-contrast)));--k-glass-tone:1.08;--k-page:#e6e6eb;--k-group-ink:var(--k-dim);
-  color-scheme:light;`, defaultsCss = `
-@property --k-fill{syntax:"<percentage>";inherits:false;initial-value:0%}
+:where(.knobs-panel,.knobs-chip,.knobs-notice,.knobs-ui){${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}}`, aliased = (css) => css.replace(new RegExp(`var\\(--_k-(${ANIMATED.join("|")})\\)`, "g"), "var(--kv-$1)").replace(/var\(--k-blur\)/g, "var(--kv-blur)");
+
+// src/core/root.ts
+var ROOT_CLASS = "knobs-root", 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}`;
+function injectTokens(doc) {
+  if (doc.querySelector("style[data-knobs-tokens]"))
+    return;
+  let style = doc.createElement("style");
+  style.dataset.knobsTokens = "", style.textContent = rootCss, doc.head.append(style);
+}
+
+// src/panel/styles.ts
+var lead = springEasing(LEAD.omega, LEAD.zeta), trail = springEasing(TRAIL.omega, TRAIL.zeta), LEAD_T = `${lead.ms}ms var(--k-lead)`, TRAIL_T = `calc(${trail.ms}ms * (.6 + .4 * clamp(0, var(--k-blur), 2))) var(--k-trail)`, FILL_T = "calc(var(--k-fill-ms) * 1ms * clamp(var(--k-blur),.1,2)) var(--k-fill-ease)", SLIDE_T = "calc(var(--k-fill-ms) * 1ms) var(--k-fill-ease)", snappy = springLinear(SPRINGS2.snappy), snappyOut = springLinear({ duration: 0.2, bounce: 0 }), BLOOM_IN = `${snappy.ms}ms ${snappy.easing}`, BLOOM_OUT = `${snappyOut.ms}ms ${snappyOut.easing}`, DELAY = "var(--k-delay,0ms)", armed = springLinear(SPRINGS2.default), ARMED_T = `${armed.ms}ms ${armed.easing}`, POINTER_ROW = ".knobs-panel[data-k-row-hover]:not([data-keyboard])", DELAYED = ".knobs-fill,.knobs-handle,.knobs-seg-pill,.knobs-toggle,.knobs-toggle i,.knobs-arm,.knobs-curve,.knobs-swatch,.knobs-strip-thumb,.knobs-pad>i,.knobs-ease-handle,.knobs-range-track,.knobs-range-fill,.knobs-range-thumb,.knobs-dial-hand,.knobs-grad,.knobs-grad-mini,.knobs-grad-mini>i,.knobs-grad-stop,.knobs-graph-pt", GRAD_N = GRADIENT_SAMPLES, gradStops = (at) => Array.from({ length: GRAD_N }, (_, i) => `var(--kgrad-${i}) ${at(i)}`).join(","), GRAD_STRIP = `linear-gradient(to right,${gradStops((i) => `calc(var(--kg-r) + (100% - var(--kg-r) * 2) * ${Number((i / (GRAD_N - 1)).toFixed(5))})`)})`, GRAD_MINI = `linear-gradient(to right,${gradStops((i) => `${Number((i / (GRAD_N - 1) * 100).toFixed(3))}%`)})`, GRAD_PROPS = Array.from({ length: GRAD_N }, (_, i) => `@property --kgrad-${i}{syntax:"<color>";inherits:false;initial-value:transparent}`).join(`
+`), defaultsCss = `
+@property --_k-fill-at{syntax:"<percentage>";inherits:false;initial-value:0%}
 @property --k-fill-mix{syntax:"<percentage>";inherits:false;initial-value:20%}
 @property --k-readout{syntax:"<length>";inherits:true;initial-value:0px}
 @property --k-copy{syntax:"<number>";inherits:true;initial-value:1}
@@ -712,7 +2164,6 @@ ${register(["width"], "<length-percentage>", "288px")}
 @property --k-check-a{syntax:"<number>";inherits:true;initial-value:0}
 @property --k-head-s{syntax:"<number>";inherits:true;initial-value:0}
 @property --k-head-v{syntax:"<number>";inherits:true;initial-value:0}
-@property --kc-value-size{syntax:"<length>";inherits:true;initial-value:11.5px}
 @property --k-armed{syntax:"<number>";inherits:false;initial-value:0}
 @property --kr-lo{syntax:"<number>";inherits:true;initial-value:0}
 @property --kpt-sel{syntax:"<number>";inherits:false;initial-value:1}
@@ -721,20 +2172,14 @@ ${register(["width"], "<length-percentage>", "288px")}
 @property --kr-show-lo{syntax:"<number>";inherits:true;initial-value:0}
 @property --kr-show-hi{syntax:"<number>";inherits:true;initial-value:0}
 ${GRAD_PROPS}
+/* The panel's own dials (the design tokens come from the token sheet, core/root.ts). */
 :where(:root,:host){
-  --k-bg:#1c1c1e;--k-contrast:1;--k-surface:rgba(255,255,255,calc(.055 * var(--k-contrast)));--k-surface-hi:rgba(255,255,255,calc(.11 * var(--k-contrast)));--k-line:rgba(255,255,255,calc(.1 * var(--k-contrast)));--k-line-hi:rgba(255,255,255,calc(.18 * var(--k-contrast)));
-  --k-text:rgba(255,255,255,.92);--k-label:rgba(255,255,255,.64);--k-dim:rgba(255,255,255,.42);--k-accent:#fff;--k-modified:rgba(255,255,255,.5);
-  --k-seg-bg:rgba(0,0,0,.26);--k-seg-active:var(--k-surface-hi);--k-toggle-track:rgba(255,255,255,.14);--k-toggle-thumb:var(--k-bg);--k-shadow:0 12px 36px rgba(0,0,0,.52),0 1px 2px rgba(0,0,0,.3);
-  --k-rim:rgba(255,255,255,.1);--k-edge:rgba(255,255,255,calc(.07 * var(--k-contrast)));--k-rim-width:1px;--k-glass-tone:.5;--k-page:#101012;
-  --k-group-ink:rgba(255,255,255,.48);
-  --k-unit:4px;--k-density:1;--k-width:288px;--k-row:round(calc(32px * var(--k-density)),2px);--k-pad:round(calc(10px * var(--k-density)),2px);--k-inset:var(--k-pad);--k-gap:round(calc(var(--k-unit) * var(--k-density)),1px);--k-radius:round(calc(8px * var(--k-density)),2px);--k-panel-radius:calc(var(--k-radius) + var(--k-unit));
-  --k-font-size:round(calc(12px * var(--k-density)),.5px);--k-label-weight:500;--k-blur:1;--k-glow:0.5;--k-roll:320;--k-drag-roll:0;--k-cascade:12;--k-glass:0.6;
-  --k-font:system-ui,-apple-system,"SF Pro Text",sans-serif;
-  --k-mono:"SF Mono",SFMono-Regular,ui-monospace,Menlo,monospace;
-  --k-spring:0.24 0.16;--k-ease:cubic-bezier(.2,.8,.2,1);--k-reveal-ease:var(--k-ease);
-  --k-font-weight:400;--k-title-weight:600;--k-thumb:#fff;--k-lift:1;--k-frame:card;
-  --k-row-gap:0px;--k-hover-in:0;--k-hover-out:120;--k-fill-base:var(--k-surface-hi);--k-fill-rest-mix:20%;--k-fill-hover-mix:var(--k-fill-rest-mix);--k-fill-active-mix:30%;--k-chrome:1;--k-handle:var(--k-accent);--k-handle-inset:0px;--k-handle-rest:0;--k-step-resist:0.25;--k-motion-blur:0;--k-range-blur:.5;--k-curve-blur:.5;--k-group-transform:uppercase;--k-value-font:var(--k-font);
-  --k-lead:${lead.easing};--k-trail:${trail.easing};--k-fill-ease:${fill.easing};--k-fill-ms:${fill.ms};
+  --k-rim-width:1px;
+  --k-blur:1;--k-roll:320;--k-drag-roll:0;--k-cascade:12;
+  --k-ease:cubic-bezier(.2,.8,.2,1);
+  --k-lift:1;--k-frame:card;
+  --k-row-gap:0px;--k-fill-rest-mix:20%;--k-fill-active-mix:30%;--k-chrome:1;--k-handle-inset:0px;--k-handle-rest:0;--k-step-resist:0.25;--k-motion-blur:0;--k-range-blur:.5;--k-curve-blur:.5;--k-group-transform:uppercase;
+  --k-lead:${lead.easing};--k-trail:${trail.easing};
   --k-lens-ms:180;--k-lens-lead:1;--k-lens-wash:.9;--k-lens-line:.65;--k-lens-panel-wash:.35;--k-lens-inset:0px;--k-lens-panel-inset:0px;
   --k-armed-edge:.1;--k-armed-glow:0;--k-armed-glow-a:0;--k-title-rest:.6;--k-esc-hint-ms:1800;
 }
@@ -742,45 +2187,23 @@ ${GRAD_PROPS}
 @media(min-resolution:1.5dppx){:where(:root,:host){--k-rim-width:.67px}}
 @media(min-resolution:2dppx){:where(:root,:host){--k-rim-width:.5px}}
 @media(min-resolution:3dppx){:where(:root,:host){--k-rim-width:.34px}}
-:where(.knobs-panel,.knobs-chip,.knobs-toast)[data-theme="light"],
-:where([data-knobs-theme="light"]) :where(.knobs-panel,.knobs-chip,.knobs-toast):not([data-theme="dark"]),
-:where(:root[data-theme="light"]) :where(.knobs-panel,.knobs-chip,.knobs-toast)[data-theme="auto"]{${lightVars}}
-@media(prefers-color-scheme:light){
-  :where(:root:not([data-theme="dark"])) :where(.knobs-panel,.knobs-chip,.knobs-toast)[data-theme="auto"]{${lightVars}}
-}
-:where(.knobs-panel)[data-density="compact"]{--k-density:.875;--k-row:28px;--k-gap:3px;--k-radius:6px;--k-panel-radius:calc(var(--k-radius) + var(--k-unit));--k-pad:8px;--k-inset:8px;--k-font-size:11px}
-:where(.knobs-panel)[data-density="comfortable"]{--k-density:1.1875;--k-row:38px;--k-gap:6px;--k-radius:10px;--k-panel-radius:calc(var(--k-radius) + var(--k-unit));--k-pad:12px;--k-inset:12px;--k-font-size:13px}
-`, css = `
+:where(.knobs-root)[data-density="compact"]{--k-density:.875}
+:where(.knobs-root)[data-density="comfortable"]{--k-density:1.1875}
+`, css2 = `
 :where(.knobs-panel,.knobs-chip,.knobs-menu){
-  --k-tray-pad:calc(var(--k-unit) * .5);
-  --k-section-gap:calc(var(--k-gap) * 2);
-  --k-group-gap:calc(var(--k-gap) * 3);
-  /* Public sizes a host may set anywhere (:root, the panel, a preset); derived otherwise. */
-  --kc-control-h:var(--k-control-h,calc(var(--k-row) - var(--k-unit) * 2));
-  --kc-value-size:var(--k-value-size,calc(var(--k-font-size) - .5px));
-  --k-action-h:calc(var(--k-row) - var(--k-unit));
-  --k-track-h:calc(var(--k-row) - 14px);
+  --k-section-gap:calc(var(--_k-gap) * 2);
+  --k-group-gap:calc(var(--_k-gap) * 3);
+  --k-action-h:calc(var(--_k-row) - var(--_k-unit));
+  --k-track-h:calc(var(--_k-row) - 14px);
   --k-icon-btn:22px;
   --k-icon-size:14px;
   --k-icon-sm:13px;
-  --k-radius-md:max(0px,calc(var(--k-radius) - var(--k-tray-pad)));
-  --k-radius-sm:max(0px,calc(var(--k-radius) - var(--k-tray-pad) * 2));
-  /* Round things (switches, icon buttons, handles, thumbs): capsules, or square with --k-radius 0. */
-  --k-round:calc(var(--k-radius) * 999);
-  --k-lift-shadow:0 1px 2px rgba(0,0,0,calc(.16 * var(--k-lift)));
-  --k-text-title:calc(var(--k-font-size) + 1px);
-  --k-text-body:var(--k-font-size);
-  --k-text-control:calc(var(--k-font-size) - .5px);
-  --k-text-meta:calc(var(--k-font-size) - 1px);
-  --k-text-cap:calc(var(--k-font-size) - 2px);
-  --k-row-hover:color-mix(in srgb,var(--k-surface) 50%,transparent);
-  --k-pill-bg:color-mix(in srgb,var(--k-accent) 18%,var(--k-seg-active));
-  --k-pill-border:color-mix(in srgb,var(--k-accent) 18%,transparent);
-  --k-fill-rest:color-mix(in srgb,var(--k-accent) var(--k-fill-rest-mix),var(--k-fill-base));
-  --k-fill-active:color-mix(in srgb,var(--k-accent) var(--k-fill-active-mix),var(--k-fill-base));
+  --k-pill-bg:color-mix(in srgb,var(--_k-accent) 18%,var(--_k-segmented-active));
+  --k-pill-border:color-mix(in srgb,var(--_k-accent) 18%,transparent);
+  --k-fill-active:color-mix(in srgb,var(--_k-accent) var(--k-fill-active-mix),var(--_k-fill-base));
   --k-disabled-opacity:.32;
-  --k-unit-gap:.28em;--k-unit-color:var(--k-dim);--k-readout-mark:0;
-  --k-group-size:var(--k-text-cap);--k-group-color:var(--k-group-ink);--k-group-inset:var(--k-inset);--k-group-tracking:.04em;--k-group-divider:transparent;--k-group-divider-gap:0px;
+  --k-unit-gap:.28em;--k-unit-color:var(--_k-fg-3);--k-readout-mark:0;
+  --k-group-size:var(--_k-text-cap);--k-group-inset:var(--_k-inset);--k-group-tracking:.04em;--k-group-divider:transparent;--k-group-divider-gap:0px;
   --k-curve-inset:6px;--k-curve-guide:solid;--k-curve-dot:1;
   --k-hint-typed-opacity:.42;
 }
@@ -790,11 +2213,11 @@ ${GRAD_PROPS}
 .knobs-panel *:where(:not(.knobs-accessory,.knobs-accessory *,.knobs-live *)),.knobs-menu *{box-sizing:border-box;color:inherit;letter-spacing:inherit;word-spacing:inherit;line-height:inherit;text-transform:inherit;text-shadow:inherit;font-style:inherit}
 /* Hover washes come in at --k-hover-in and leave at --k-hover-out (ms). Set per element, so a
    hovered card doesn't hand its quick entrance to the rows inside it. */
-:where(.knobs-panel,.knobs-menu) *{--k-hover-t:calc(var(--k-hover-out) * 1ms)}
-:where(.knobs-panel,.knobs-menu) :is(:hover,.knobs-active){--k-hover-t:calc(var(--k-hover-in) * 1ms)}
+:where(.knobs-panel,.knobs-menu) *{--k-hover-t:calc(var(--_k-hover-out) * 1ms)}
+:where(.knobs-panel,.knobs-menu) :is(:hover,.knobs-active){--k-hover-t:calc(var(--_k-hover-in) * 1ms)}
 
 .knobs-panel,.knobs-chip{
-  box-sizing:border-box;font:var(--k-font-weight) var(--k-font-size)/1.35 var(--k-font);color:var(--k-text);text-align:left;color-scheme:dark;
+  box-sizing:border-box;font:var(--_k-weight) var(--_k-font-size)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;
   -webkit-font-smoothing:antialiased;
 }
 /* Text properties a host page sets on its own elements (letter-spacing, capitals, shadows) stop
@@ -803,25 +2226,25 @@ ${GRAD_PROPS}
 :where(.knobs-panel,.knobs-chip) :where(*,*::before,*::after){box-sizing:border-box}
 .knobs-panel .rn-slot{box-sizing:content-box}
 .knobs-panel [hidden],.knobs-panel[hidden],.knobs-chip[hidden]{display:none!important}
-.knobs-mono{font-family:var(--k-mono);font-variant-numeric:tabular-nums}
+.knobs-mono{font-family:var(--_k-mono);font-variant-numeric:tabular-nums}
 
 /* The chip: a round cog button, or a capsule with a label beside the cog. */
-.knobs-chip{position:fixed;z-index:2147480000;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:26px;height:26px;padding:0;border-radius:999px;cursor:pointer;background:var(--k-bg);border:1px solid transparent;
-  color:var(--k-label);font-size:var(--k-text-control);line-height:1;letter-spacing:.01em;white-space:nowrap;--k-chip-edge:var(--k-edge);box-shadow:0 0 0 var(--k-rim-width) var(--k-chip-edge),0 4px 16px rgba(0,0,0,.35),inset 0 var(--k-rim-width) 0 var(--k-rim);transition:color .15s,border-color .15s,transform .2s var(--k-ease),opacity .2s,scale .12s var(--k-ease),${TOKEN_TRANSITIONS};}
+.knobs-chip{position:fixed;z-index:2147480000;display:inline-flex;align-items:center;justify-content:center;gap:5px;width:26px;height:26px;padding:0;border-radius:999px;cursor:pointer;background:var(--_k-bg);border:1px solid transparent;
+  color:var(--_k-fg-2);font-size:var(--_k-text-control);line-height:1;letter-spacing:.01em;white-space:nowrap;--k-chip-edge:var(--_k-border-subtle);box-shadow:0 0 0 var(--k-rim-width) var(--k-chip-edge),0 4px 16px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1))),inset 0 var(--k-rim-width) 0 var(--_k-rim);transition:color .15s,border-color .15s,transform .2s var(--k-ease),opacity .2s,scale .12s var(--k-ease),${TOKEN_TRANSITIONS};}
 .knobs-chip[data-label]{width:auto;padding:0 10px 0 7px}
 .knobs-chip .knobs-icon{display:block;flex:none;width:15px;height:15px}
-.knobs-chip:hover{color:var(--k-text);--k-chip-edge:var(--k-line-hi)}
+.knobs-chip:hover{color:var(--_k-fg);--k-chip-edge:var(--_k-border-strong)}
 .knobs-chip[data-shown="true"]{transition:color .15s,border-color .15s,opacity .16s var(--k-ease),transform .22s var(--k-ease),scale .12s var(--k-ease),visibility 0s,${TOKEN_TRANSITIONS}}
 .knobs-chip[data-shown="false"]{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-2px) scale(.94);transition:opacity .12s ease-in,transform .12s ease-in,visibility 0s .12s,${TOKEN_TRANSITIONS}}
 /* A press squeezes it, easing in (morph.ts carries the squeeze on into the glass). */
 .knobs-chip.knobs-chip[data-pressed]{scale:.94;transition:color .15s,border-color .15s,scale 50ms ease-in-out,${TOKEN_TRANSITIONS}}
-.knobs-chip:focus-visible{outline:none;color:var(--k-text);--k-chip-edge:var(--k-line-hi)}
+.knobs-chip:focus-visible{outline:none;color:var(--_k-fg);--k-chip-edge:var(--_k-border-strong)}
 @media(prefers-reduced-motion:reduce){.knobs-chip.knobs-chip{scale:none;transform:none}}
 /* "knobs on" / "knobs off" after the reveal shortcut. */
-.knobs-toast{position:fixed;left:50%;bottom:24px;z-index:2147480004;translate:-50% 0;padding:6px 12px;border-radius:999px;pointer-events:none;
-  background:var(--k-bg);border:1px solid var(--k-line);box-shadow:0 4px 16px rgba(0,0,0,.35);color:var(--k-text);font:500 12px/1.2 var(--k-font);letter-spacing:.01em;
+.knobs-notice{position:fixed;left:50%;bottom:24px;z-index:2147480004;translate:-50% 0;padding:6px 12px;border-radius:999px;pointer-events:none;
+  background:var(--_k-bg);border:1px solid var(--_k-border);box-shadow:0 4px 16px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1)));color:var(--_k-fg);font:500 12px/1.2 var(--_k-font);letter-spacing:.01em;
   transition:opacity .18s var(--k-ease),scale .18s var(--k-ease)}
-.knobs-toast[data-shown="false"]{opacity:0;scale:.96;transition:opacity .16s ease-in,scale .16s ease-in}
+.knobs-notice[data-shown="false"]{opacity:0;scale:.96;transition:opacity .16s ease-in,scale .16s ease-in}
 
 /* Tokens glide on the panel spring. While a control is dragged (data-knobs-scrub) they follow it
    step for step instead: the pointer already moves them continuously, and a declared transition
@@ -835,12 +2258,12 @@ ${GRAD_PROPS}
    backdrop, toned toward the theme (--k-glass-tone dims it under dark panels) so text keeps its
    contrast. Its edge is a hairline (--k-edge, --k-rim-width wide) and a hairline of light (--k-rim)
    catches its top. */
-.knobs-panel{-webkit-user-select:none;user-select:none;transition:${TOKEN_TRANSITIONS},--k-armed ${ARMED_T};position:fixed;z-index:2147480001;width:var(--k-width);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--k-pad);
-  background:color-mix(in srgb,var(--k-bg) calc(100% - var(--k-glass) * 20%),transparent);border:1px solid transparent;border-radius:var(--k-panel-radius);box-shadow:var(--k-shadow),0 0 0 var(--k-rim-width) var(--ka-edge),inset 0 var(--k-rim-width) 0 var(--k-rim),var(--ka-glow);scrollbar-width:thin;
+.knobs-panel{-webkit-user-select:none;user-select:none;transition:${TOKEN_TRANSITIONS},--k-armed ${ARMED_T};position:fixed;z-index:2147480001;width:var(--_k-width);max-width:calc(100vw - 16px);max-height:calc(100dvh - 16px);overflow:auto;padding:var(--_k-pad);
+  background:color-mix(in srgb,var(--_k-bg) calc(100% - var(--_k-glass) * 20%),transparent);border:1px solid transparent;border-radius:var(--_k-radius-panel);box-shadow:var(--_k-shadow-overlay),0 0 0 var(--k-rim-width) var(--ka-edge),inset 0 var(--k-rim-width) 0 var(--_k-rim),var(--ka-glow);scrollbar-width:thin;
   /* Armed (focus inside: keys come here), the edge takes the accent and a faint glow lifts it. */
-  --ka-edge:color-mix(in srgb,var(--k-accent) calc(var(--k-armed) * var(--k-armed-edge) * 100%),var(--k-edge));
-  --ka-glow:0 0 calc(var(--k-armed-glow) * 1px) color-mix(in srgb,var(--k-accent) calc(var(--k-armed) * var(--k-armed-glow-a) * var(--k-chrome,1) * 100%),transparent);
-  --k-backdrop:blur(calc(var(--k-glass) * 24px)) saturate(calc(1 + var(--k-glass) * .8)) brightness(calc(1 + (var(--k-glass-tone) - 1) * var(--k-glass)));
+  --ka-edge:color-mix(in srgb,var(--_k-accent) calc(var(--k-armed) * var(--k-armed-edge) * 100%),var(--_k-border-subtle));
+  --ka-glow:0 0 calc(var(--k-armed-glow) * 1px) color-mix(in srgb,var(--_k-accent) calc(var(--k-armed) * var(--k-armed-glow-a) * var(--k-chrome,1) * 100%),transparent);
+  --k-backdrop:blur(calc(var(--_k-glass) * 24px)) saturate(calc(1 + var(--_k-glass) * .8)) brightness(calc(1 + (var(--_k-glass-tone) - 1) * var(--_k-glass)));
   -webkit-backdrop-filter:var(--k-backdrop);backdrop-filter:var(--k-backdrop);
   animation:knobs-in .16s var(--k-ease);}
 .knobs-panel[data-restored]{animation:none}
@@ -848,21 +2271,21 @@ ${GRAD_PROPS}
    content, laid out at full size, is clipped to it and revealed top first. */
 .knobs-panel[data-morphing]{background:transparent;border-color:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;animation:none}
 .knobs-morph{position:fixed;left:0;top:0;z-index:2147480001;pointer-events:none;box-sizing:border-box;--p:0;--spec:0;
-  background:color-mix(in srgb,var(--k-bg) calc(100% - var(--k-glass) * 20% * var(--p)),transparent);border:1px solid transparent;
-  box-shadow:0 0 0 var(--k-rim-width) var(--k-edge),inset 0 0 0 var(--k-rim-width) rgb(255 255 255/var(--spec)),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--k-rim) calc(var(--p) * 100%),transparent);
-  --k-backdrop:blur(calc(var(--k-glass) * 24px)) saturate(calc(1 + var(--k-glass) * .8)) brightness(calc(1 + (var(--k-glass-tone) - 1) * var(--k-glass)));
+  background:color-mix(in srgb,var(--_k-bg) calc(100% - var(--_k-glass) * 20% * var(--p)),transparent);border:1px solid transparent;
+  box-shadow:0 0 0 var(--k-rim-width) var(--_k-border-subtle),inset 0 0 0 var(--k-rim-width) rgb(255 255 255/var(--spec)),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--_k-rim) calc(var(--p) * 100%),transparent);
+  --k-backdrop:blur(calc(var(--_k-glass) * 24px)) saturate(calc(1 + var(--_k-glass) * .8)) brightness(calc(1 + (var(--_k-glass-tone) - 1) * var(--_k-glass)));
   -webkit-backdrop-filter:var(--k-backdrop);backdrop-filter:var(--k-backdrop)}
 .knobs-morph::before,.knobs-morph::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none}
-.knobs-morph::before{box-shadow:0 4px 16px rgba(0,0,0,.35);opacity:calc(1 - var(--p))}
-.knobs-morph::after{box-shadow:var(--k-shadow);opacity:var(--p)}
+.knobs-morph::before{box-shadow:0 4px 16px rgba(0,0,0,calc(.35 * var(--_k-shadow-k,1)));opacity:calc(1 - var(--p))}
+.knobs-morph::after{box-shadow:var(--_k-shadow-overlay);opacity:var(--p)}
 /* Meanwhile the chip is just its label, fading on the shape. */
 .knobs-chip.knobs-chip[data-morph]{visibility:visible;pointer-events:auto;transform:none;transition:none;background:transparent;border-color:transparent;box-shadow:none}
-.knobs-panel.knobs-inline{position:relative;z-index:auto;left:auto!important;top:auto!important;max-width:100%;max-height:none;box-shadow:0 0 0 var(--k-rim-width) color-mix(in srgb,var(--ka-edge) calc(var(--k-chrome) * 100%),transparent),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--k-rim) calc(var(--k-chrome) * 100%),transparent),var(--ka-glow);animation:none;
+.knobs-panel.knobs-inline{position:relative;z-index:auto;left:auto!important;top:auto!important;max-width:100%;max-height:none;box-shadow:0 0 0 var(--k-rim-width) color-mix(in srgb,var(--ka-edge) calc(var(--k-chrome) * 100%),transparent),inset 0 var(--k-rim-width) 0 color-mix(in srgb,var(--_k-rim) calc(var(--k-chrome) * 100%),transparent),var(--ka-glow);animation:none;
   /* --k-chrome 0: an embedded panel sheds its card (background, border, rim) for the host's column,
      border width too, so its rows line up with the column's edges. */
   border-width:calc(var(--k-chrome) * 1px);
-  background:color-mix(in srgb,color-mix(in srgb,var(--k-bg) calc(100% - var(--k-glass) * 20%),transparent) calc(var(--k-chrome) * 100%),transparent);border-color:transparent;
-  --k-backdrop:blur(calc(var(--k-glass) * var(--k-chrome) * 24px)) saturate(calc(1 + var(--k-glass) * var(--k-chrome) * .8)) brightness(calc(1 + (var(--k-glass-tone) - 1) * var(--k-glass) * var(--k-chrome)))}
+  background:color-mix(in srgb,color-mix(in srgb,var(--_k-bg) calc(100% - var(--_k-glass) * 20%),transparent) calc(var(--k-chrome) * 100%),transparent);border-color:transparent;
+  --k-backdrop:blur(calc(var(--_k-glass) * var(--k-chrome) * 24px)) saturate(calc(1 + var(--_k-glass) * var(--k-chrome) * .8)) brightness(calc(1 + (var(--_k-glass-tone) - 1) * var(--_k-glass) * var(--k-chrome)))}
 @keyframes knobs-in{from{opacity:0;transform:translateY(4px) scale(.985)}to{opacity:1;transform:none}}
 @media(prefers-reduced-motion:reduce){.knobs-panel{animation:none}.knobs-panel *{transition:none!important}.knobs-keys .knobs-keys-text,.knobs-number,.knobs-cell-edit{animation:none}}
 
@@ -870,13 +2293,13 @@ ${GRAD_PROPS}
    input[type=text]{...}) and below every knobs rule that styles these elements, which are all
    (0,1,1) or more and come later. */
 :is(.knobs-panel,.knobs-menu) :is(button,input,select,textarea):where(:not(.knobs-accessory *)){all:revert;box-sizing:border-box;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;text-shadow:none;
-  background:var(--k-surface);border:0;border-radius:var(--k-radius);min-width:0;box-shadow:none;outline:none}
+  background:var(--_k-fill);border:0;border-radius:var(--_k-radius);min-width:0;box-shadow:none;outline:none}
 :is(.knobs-panel,.knobs-menu) :is(header,strong,p,kbd,aside,mark):where(:not(.knobs-accessory *)){all:revert;box-sizing:border-box;margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit}
 .knobs-panel .knobs-icon>path{fill:currentColor}
 :is(.knobs-panel,.knobs-menu) :is(:focus,:focus-visible):where(:not(.knobs-accessory *)){outline:none}
 
 /* Header */
-.knobs-panel header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:grab;touch-action:none;padding:0 var(--k-inset) var(--k-section-gap);min-height:var(--k-icon-btn)}
+.knobs-panel header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:grab;touch-action:none;padding:0 var(--_k-inset) var(--k-section-gap);min-height:var(--k-icon-btn)}
 .knobs-panel.knobs-inline header,.knobs-panel.knobs-inline header:active{cursor:default}
 /* The title row stays pinned while the rows scroll under it, in the panel (it scrolls once it's
    bounded) or, with .knobs-pin-ancestor (which also makes the panel overflow:visible), in the
@@ -892,8 +2315,8 @@ ${GRAD_PROPS}
 @supports (animation-timeline:scroll()){
   .knobs-panel:not(.knobs-page){scroll-timeline:--knobs-self block}
   .knobs-panel.knobs-pin-ancestor:not(.knobs-page){overflow:visible;view-timeline:--knobs-view block}
-  .knobs-panel:not(.knobs-page)>header{position:sticky;top:0;z-index:4;border-radius:max(0px,calc(var(--k-panel-radius) - 1px)) max(0px,calc(var(--k-panel-radius) - 1px)) 0 0;
-    --k-head-on:max(var(--k-head-s),var(--k-head-v));--k-head-bg:color-mix(in srgb,var(--k-bg) 88%,transparent);
+  .knobs-panel:not(.knobs-page)>header{position:sticky;top:0;z-index:4;border-radius:max(0px,calc(var(--_k-radius-panel) - 1px)) max(0px,calc(var(--_k-radius-panel) - 1px)) 0 0;
+    --k-head-on:max(var(--k-head-s),var(--k-head-v));--k-head-bg:color-mix(in srgb,var(--_k-bg) 88%,transparent);
     background:color-mix(in srgb,var(--k-head-bg) calc(var(--k-head-on) * 100%),transparent);
     animation:knobs-head-s linear both;animation-timeline:--knobs-self;animation-range:0px 24px}
   .knobs-panel.knobs-pin-ancestor:not(.knobs-page)>header{animation:knobs-head-v linear both;animation-timeline:--knobs-view;animation-range:exit-crossing 0px exit-crossing 24px}
@@ -903,41 +2326,41 @@ ${GRAD_PROPS}
   .knobs-panel[data-gpu-active="true"]:not(.knobs-page)>header::after{display:none}
 }
 .knobs-panel header:active{cursor:grabbing}
-.knobs-panel header strong{flex:1;min-width:0;font-weight:var(--k-title-weight);font-size:var(--k-text-title);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--k-ease),color ${ARMED_T};
-  color:color-mix(in srgb,var(--k-text) calc(var(--k-title-rest) * 100%),var(--k-label))}
+.knobs-panel header strong{flex:1;min-width:0;font-weight:var(--_k-weight-title);font-size:var(--_k-text-title);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s var(--k-ease),color ${ARMED_T};
+  color:color-mix(in srgb,var(--_k-fg) calc(var(--k-title-rest) * 100%),var(--_k-fg-2))}
 /* At rest a panel's title is a little quiet; armed (keys come here) it's at full strength. */
-.knobs-panel[data-k-armed] header strong{color:var(--k-text)}
+.knobs-panel[data-k-armed] header strong{color:var(--_k-fg)}
 /* The scope line beside the title (crumbs.ts): where keys go, and for a moment where Esc goes. */
-.knobs-crumbs{position:absolute;left:0;top:50%;height:0;pointer-events:none;white-space:nowrap;font-size:var(--k-text-meta);font-weight:var(--k-label-weight);line-height:1.2;letter-spacing:0;text-transform:none}
-.knobs-crumbs>*{position:absolute;left:0;top:0;translate:0 -50%;color:var(--k-dim);transition:opacity .2s var(--k-ease),translate ${CRUMB_GLIDE},color .2s var(--k-ease)}
+.knobs-crumbs{position:absolute;left:0;top:50%;height:0;pointer-events:none;white-space:nowrap;font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);line-height:1.2;letter-spacing:0;text-transform:none}
+.knobs-crumbs>*{position:absolute;left:0;top:0;translate:0 -50%;color:var(--_k-fg-3);transition:opacity .2s var(--k-ease),translate ${CRUMB_GLIDE},color .2s var(--k-ease)}
 .knobs-crumbs>[data-leaving]{transition:opacity .14s cubic-bezier(.4,0,1,1),translate .14s cubic-bezier(.4,0,1,1)}
 .knobs-crumbs>.knobs-crumb-crumb{pointer-events:auto;cursor:pointer}
-.knobs-crumbs>.knobs-crumb-crumb[data-deep]{color:var(--k-text)}
-.knobs-crumbs>.knobs-crumb-crumb:not([data-deep]):hover{color:var(--k-label)}
-.knobs-crumbs>.knobs-crumb-sep{color:color-mix(in srgb,var(--k-dim) 70%,transparent)}
-.knobs-crumbs>.knobs-crumb-esc{font-family:var(--k-mono);font-size:var(--k-text-cap);transition:opacity .35s var(--k-ease),translate ${CRUMB_GLIDE}}
+.knobs-crumbs>.knobs-crumb-crumb[data-deep]{color:var(--_k-fg)}
+.knobs-crumbs>.knobs-crumb-crumb:not([data-deep]):hover{color:var(--_k-fg-2)}
+.knobs-crumbs>.knobs-crumb-sep{color:color-mix(in srgb,var(--_k-fg-3) 70%,transparent)}
+.knobs-crumbs>.knobs-crumb-esc{font-family:var(--_k-mono);font-size:var(--_k-text-cap);transition:opacity .35s var(--k-ease),translate ${CRUMB_GLIDE}}
 @media(prefers-reduced-motion:reduce){.knobs-panel .knobs-crumbs>*{transition:opacity .15s linear!important}}
 .knobs-panel[data-gpu-active="true"] .knobs-crumbs>*{color:transparent!important}
 /* Holding \\ shows the values from before the last change; the title dims meanwhile. */
 .knobs-panel[data-comparing] header strong{opacity:.4}
 .knobs-head-actions{display:flex;align-items:center;margin-right:calc((var(--k-icon-size) - var(--k-icon-btn)) / 2)}
-.knobs-head-split{margin-left:calc(var(--k-unit) * 1.5)}
+.knobs-head-split{margin-left:calc(var(--_k-unit) * 1.5)}
 .knobs-icon{width:var(--k-icon-size);height:var(--k-icon-size);display:block;flex:none}
 .knobs-die-icon{position:relative;display:block;width:var(--k-icon-size);height:var(--k-icon-size);flex:none}
 .knobs-die-icon>canvas{position:absolute;margin:0}
 .knobs-panel[data-gpu-active="true"] .knobs-die-icon>canvas{visibility:hidden}
 /* The tools sit quiet (--k-dim) until the panel has the pointer or keyboard focus, then read as
    labels, and as text under the pointer. */
-.knobs-panel header button{position:relative;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--k-dim);background:transparent;border-radius:var(--k-round);cursor:pointer;font-size:12px;line-height:1;transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s}
-.knobs-panel:is(:hover,:has(:focus-visible)) header button{color:var(--k-label)}
-.knobs-panel header button:is(:hover:not([disabled]),:focus-visible),.knobs-panel header button[aria-expanded="true"]{background:var(--k-surface-hi);color:var(--k-text)}
+.knobs-panel header button{position:relative;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;color:var(--_k-fg-3);background:transparent;border-radius:var(--_k-round);cursor:pointer;font-size:12px;line-height:1;transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s}
+.knobs-panel:is(:hover,:has(:focus-visible)) header button{color:var(--_k-fg-2)}
+.knobs-panel header button:is(:hover:not([disabled]),:focus-visible),.knobs-panel header button[aria-expanded="true"]{background:var(--_k-fill-selected);color:var(--_k-fg)}
 .knobs-panel header button[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 /* The close X's ink sits a fifth of its box in from each side, a digit's barely: nudged right, its
    ink ends where the values' digits do. */
 .knobs-panel header .knobs-close>.knobs-icon{translate:calc(var(--k-icon-size) * .1) 0}
 /* Undo · Redo sit apart from Reset · Copy · Random. Undo, Redo and Reset (and a group's reset)
    keep their slots while they're away and bloom in and out of them: nothing beside them moves. */
-.knobs-head-history{display:flex;flex:none;margin-right:calc(var(--k-unit) * 1.5)}
+.knobs-head-history{display:flex;flex:none;margin-right:calc(var(--_k-unit) * 1.5)}
 .knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown]{transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_IN},scale ${BLOOM_IN},filter 0s,visibility 0s}
 .knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown="false"]{opacity:0;scale:.9;filter:blur(2.5px);visibility:hidden;
   transition:background var(--k-hover-t),color var(--k-hover-t),opacity ${BLOOM_OUT},scale ${BLOOM_OUT},filter ${BLOOM_OUT},visibility 0s ${snappyOut.ms}ms}
@@ -946,9 +2369,9 @@ ${GRAD_PROPS}
   .knobs-panel :is(.knobs-head-actions,.knobs-group-head) button[data-shown="false"]{scale:1;filter:none;transition:opacity .15s,visibility 0s .15s!important}}
 /* A press flash (flash.ts): from a key or a click, the button's wash brightens at once and eases
    back to its own, its ink with it. Two names, so a second press restarts it. */
-@keyframes knobs-flash-a{from{background-color:var(--k-flash-bg);color:var(--k-text)}}
-@keyframes knobs-flash-b{from{background-color:var(--k-flash-bg);color:var(--k-text)}}
-.knobs-panel :is(header,.knobs-group-head) button{--k-flash-bg:color-mix(in srgb,var(--k-surface-hi),var(--k-text) 10%)}
+@keyframes knobs-flash-a{from{background-color:var(--k-flash-bg);color:var(--_k-fg)}}
+@keyframes knobs-flash-b{from{background-color:var(--k-flash-bg);color:var(--_k-fg)}}
+.knobs-panel :is(header,.knobs-group-head) button{--k-flash-bg:color-mix(in srgb,var(--_k-fill-selected),var(--_k-fg) 10%)}
 .knobs-panel :is(header,.knobs-group-head) button[data-k-flash="a"]{animation:knobs-flash-a ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
 .knobs-panel :is(header,.knobs-group-head) button[data-k-flash="b"]{animation:knobs-flash-b ${FLASH_MS}ms cubic-bezier(.33,1,.68,1)}
 /* Copied: the glyph shrinks away and a check draws itself in its place, held, then they trade
@@ -956,7 +2379,7 @@ ${GRAD_PROPS}
    drawn) and --k-check-a (its opacity), which the GPU renderer reads too. */
 .knobs-panel header .knobs-copy{--k-copy:1;--k-check:0;--k-check-a:0;
   transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,--k-copy ${BLOOM_IN} .04s,--k-check 0s .1s,--k-check-a .1s cubic-bezier(.4,0,1,1)}
-.knobs-panel header .knobs-copy[data-copied]{--k-copy:0;--k-check:1;--k-check-a:1;color:var(--k-text);
+.knobs-panel header .knobs-copy[data-copied]{--k-copy:0;--k-check:1;--k-check-a:1;color:var(--_k-fg);
   transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,--k-copy .1s cubic-bezier(.4,0,1,1),--k-check .18s cubic-bezier(.2,.8,.2,1) .03s,--k-check-a .04s linear .03s}
 .knobs-copy>.knobs-icon:not(.knobs-check){opacity:var(--k-copy);scale:calc(.5 + .5 * var(--k-copy))}
 .knobs-copy>.knobs-check{position:absolute;inset:0;margin:auto;opacity:var(--k-check-a)}
@@ -965,56 +2388,56 @@ ${GRAD_PROPS}
 .knobs-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
 
 /* Shortcuts Popover */
-.knobs-popover{margin:0 0 var(--k-section-gap);padding:var(--k-section-gap) var(--k-inset);background:var(--k-surface-hi);border:1px solid var(--k-line);border-radius:var(--k-radius);font-size:var(--k-text-meta)}
+.knobs-popover{margin:0 0 var(--k-section-gap);padding:var(--k-section-gap) var(--_k-inset);background:var(--_k-fill-selected);border:1px solid var(--_k-border);border-radius:var(--_k-radius);font-size:var(--_k-text-meta)}
 .knobs-popover-grid{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;align-items:baseline}
-.knobs-popover-grid kbd{font:var(--k-text-cap)/1 var(--k-mono);font-variant-numeric:tabular-nums;color:var(--k-text);background:var(--k-seg-bg);padding:2px 5px;border-radius:var(--k-radius-sm);justify-self:start;white-space:nowrap}
-.knobs-popover-grid span{color:var(--k-label)}
+.knobs-popover-grid kbd{font:var(--_k-text-cap)/1 var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg);background:var(--_k-segmented-track);padding:2px 5px;border-radius:var(--_k-radius-sm);justify-self:start;white-space:nowrap}
+.knobs-popover-grid span{color:var(--_k-fg-2)}
 
 /* Custom Preset Strip */
-.knobs-presets{position:relative;display:flex;align-items:flex-start;gap:var(--k-tray-pad);margin:0 0 var(--k-section-gap);padding:var(--k-tray-pad);background:var(--k-seg-bg);border-radius:var(--k-radius);user-select:none;touch-action:none}
-.knobs-presets-track{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--k-preset-min,58px)),1fr));align-items:stretch;gap:var(--k-tray-pad)}
+.knobs-presets{position:relative;display:flex;align-items:flex-start;gap:var(--_k-tray-pad);margin:0 0 var(--k-section-gap);padding:var(--_k-tray-pad);background:var(--_k-segmented-track);border-radius:var(--_k-radius);user-select:none;touch-action:none}
+.knobs-presets-track{position:relative;flex:1;min-width:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--k-preset-min,58px)),1fr));align-items:stretch;gap:var(--_k-tray-pad)}
 /* The selected pill is placed by its edges: the edge facing the move leads, the other trails. */
-.knobs-presets-pill{position:absolute;top:0;left:0;background:var(--k-pill-bg);border:0;border-radius:var(--k-button-radius,var(--k-radius-md));box-shadow:inset 0 0 0 var(--k-rim-width) var(--k-pill-border),inset 0 var(--k-rim-width) 0 var(--k-rim),var(--k-lift-shadow),0 0 calc(var(--k-glow) * 10px) color-mix(in srgb,var(--k-accent) 24%,transparent);pointer-events:none;
+.knobs-presets-pill{position:absolute;top:0;left:0;background:var(--k-pill-bg);border:0;border-radius:var(--k-button-radius,var(--_k-radius-md));box-shadow:inset 0 0 0 var(--k-rim-width) var(--k-pill-border),inset 0 var(--k-rim-width) 0 var(--_k-rim),var(--_k-shadow-raised),0 0 calc(var(--_k-glow) * 10px) color-mix(in srgb,var(--_k-accent) 24%,transparent);pointer-events:none;
   transition:left ${TRAIL_T},right ${LEAD_T},top ${LEAD_T},opacity .15s,scale .15s}
 .knobs-presets-pill[data-dir="left"]{transition:left ${LEAD_T},right ${TRAIL_T},top ${LEAD_T},opacity .15s,scale .15s}
-.knobs-panel .knobs-preset-chip{position:relative;z-index:1;height:var(--k-button-h,var(--kc-control-h));min-height:20px;padding:0 6px;font-size:var(--k-button-font-size,var(--k-text-control));font-weight:var(--k-label-weight);color:var(--k-button-color,var(--k-label));background:transparent!important;border-radius:var(--k-button-radius,var(--k-radius-md));cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s,background .15s,box-shadow .15s}
+.knobs-panel .knobs-preset-chip{position:relative;z-index:1;height:var(--k-button-h,var(--_k-control-h));min-height:20px;padding:0 6px;font-size:var(--k-button-font-size,var(--_k-text-control));font-weight:var(--_k-weight-label);color:var(--k-button-color,var(--_k-fg-2));background:transparent!important;border-radius:var(--k-button-radius,var(--_k-radius-md));cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .15s,background .15s,box-shadow .15s}
 .knobs-panel[data-buttons] .knobs-presets{background:transparent;padding:0}
 .knobs-panel[data-buttons] .knobs-preset-chip{background:var(--k-button-bg,transparent)!important;box-shadow:inset 0 0 0 1px var(--k-button-line,transparent)}
-.knobs-panel[data-buttons] .knobs-preset-chip:hover{background:var(--k-button-hover-bg,var(--k-surface-hi))!important;box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent))}
-.knobs-panel .knobs-preset-chip:hover{color:var(--k-text)}
-.knobs-panel .knobs-preset-chip[aria-checked="true"]{color:var(--k-text);font-weight:var(--k-title-weight)}
-.knobs-panel .knobs-preset-save{flex:none;width:calc((var(--k-inset) - var(--k-tray-pad)) * 2 + 8px);padding:0!important;color:var(--k-dim)!important;font-weight:400!important;font-size:var(--k-text-title)!important}
-.knobs-panel .knobs-preset-save:hover{color:var(--k-text)!important}
+.knobs-panel[data-buttons] .knobs-preset-chip:hover{background:var(--k-button-hover-bg,var(--_k-fill-selected))!important;box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent))}
+.knobs-panel .knobs-preset-chip:hover{color:var(--_k-fg)}
+.knobs-panel .knobs-preset-chip[aria-checked="true"]{color:var(--_k-fg);font-weight:var(--_k-weight-title)}
+.knobs-panel .knobs-preset-save{flex:none;width:calc((var(--_k-inset) - var(--_k-tray-pad)) * 2 + 8px);padding:0!important;color:var(--_k-fg-3)!important;font-weight:400!important;font-size:var(--_k-text-title)!important}
+.knobs-panel .knobs-preset-save:hover{color:var(--_k-fg)!important}
 /* The active preset's modified mark: the values have drifted off it (a row's dot, in its corner). */
-.knobs-panel .knobs-preset-chip::after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;border-radius:50%;background:var(--k-modified);opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
+.knobs-panel .knobs-preset-chip::after{content:"";position:absolute;top:4px;right:4px;width:4px;height:4px;border-radius:50%;background:var(--_k-modified);opacity:0;transform:scale(.4);pointer-events:none;transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
 .knobs-panel .knobs-preset-chip[data-drifted]::after{opacity:.95;transform:none}
 /* Naming a saved preset: a field over its chip that opens out from the middle to the chip's width;
    the chip's own name hides beneath it. Leaving, it fades. */
 .knobs-panel .knobs-preset-chip[data-naming]{color:transparent!important}
-.knobs-panel .knobs-preset-name{position:absolute;z-index:2;box-sizing:border-box;min-width:0;margin:0;padding:0 6px;border:1px solid color-mix(in srgb,var(--k-accent) 55%,transparent);border-radius:var(--k-button-radius,var(--k-radius-md));outline:none;background:color-mix(in srgb,var(--k-accent) 10%,transparent);color:var(--k-text);caret-color:var(--k-accent);
-  font-family:inherit;font-size:var(--k-button-font-size,var(--k-text-control));font-weight:var(--k-title-weight);letter-spacing:inherit;text-align:center;animation:knobs-name-in .25s cubic-bezier(.2,.8,.2,1);transition:opacity .11s cubic-bezier(.4,0,1,1)}
-.knobs-preset-name::selection{background:color-mix(in srgb,var(--k-accent) 24%,transparent);color:var(--k-text)}
+.knobs-panel .knobs-preset-name{position:absolute;z-index:2;box-sizing:border-box;min-width:0;margin:0;padding:0 6px;border:1px solid color-mix(in srgb,var(--_k-accent) 55%,transparent);border-radius:var(--k-button-radius,var(--_k-radius-md));outline:none;background:color-mix(in srgb,var(--_k-accent) 10%,transparent);color:var(--_k-fg);caret-color:var(--_k-accent);
+  font-family:inherit;font-size:var(--k-button-font-size,var(--_k-text-control));font-weight:var(--_k-weight-title);letter-spacing:inherit;text-align:center;animation:knobs-name-in .25s cubic-bezier(.2,.8,.2,1);transition:opacity .11s cubic-bezier(.4,0,1,1)}
+.knobs-preset-name::selection{background:color-mix(in srgb,var(--_k-accent) 24%,transparent);color:var(--_k-fg)}
 .knobs-panel .knobs-preset-name[data-leaving]{opacity:0;pointer-events:none}
 @keyframes knobs-name-in{from{clip-path:inset(0 50% round 6px);opacity:.4}to{clip-path:inset(0 round 6px);opacity:1}}
 @media(prefers-reduced-motion:reduce){.knobs-panel .knobs-preset-name{animation:knobs-fade .15s ease-out}}
 
 /* Group headers */
-.knobs-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin:var(--k-group-gap) 0 var(--k-gap);padding:0 var(--k-group-inset);color:var(--k-group-color);font-size:var(--k-group-size);font-weight:var(--k-title-weight);letter-spacing:var(--k-group-tracking);text-transform:var(--k-group-transform)}
+.knobs-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px;margin:var(--k-group-gap) 0 var(--_k-gap);padding:0 var(--k-group-inset);color:var(--_k-group-label);font-size:var(--k-group-size);font-weight:var(--_k-weight-title);letter-spacing:var(--k-group-tracking);text-transform:var(--k-group-transform)}
 .knobs-panel:not(.knobs-page) .knobs-group-head:not(:first-child){border-top:1px solid var(--k-group-divider);padding-top:var(--k-group-divider-gap)}
 .knobs-group-head:first-child{margin-top:0}
-.knobs-group-head>span:last-child{display:flex;align-items:center;gap:var(--k-tray-pad);margin-right:calc((var(--k-icon-sm) - 20px) / 2)}
-.knobs-group-head button{height:20px;padding:0 6px;font-size:var(--k-text-meta);font-weight:500;letter-spacing:0;text-transform:none;color:var(--k-label);background:transparent;border-radius:var(--k-radius-sm);cursor:pointer}
-.knobs-group-head button:is(:hover:not([disabled]),:focus-visible){background:var(--k-surface-hi);color:var(--k-text)}
-.knobs-group-head .knobs-group-reset{width:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--k-round)}
+.knobs-group-head>span:last-child{display:flex;align-items:center;gap:var(--_k-tray-pad);margin-right:calc((var(--k-icon-sm) - 20px) / 2)}
+.knobs-group-head button{height:20px;padding:0 6px;font-size:var(--_k-text-meta);font-weight:500;letter-spacing:0;text-transform:none;color:var(--_k-fg-2);background:transparent;border-radius:var(--_k-radius-sm);cursor:pointer}
+.knobs-group-head button:is(:hover:not([disabled]),:focus-visible){background:var(--_k-fill-selected);color:var(--_k-fg)}
+.knobs-group-head .knobs-group-reset{width:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--_k-round)}
 .knobs-group-head :is(.knobs-icon,.knobs-die-icon){width:var(--k-icon-sm);height:var(--k-icon-sm)}
-.knobs-group-head .knobs-group-die{width:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--k-round);color:var(--k-dim)}
+.knobs-group-head .knobs-group-die{width:20px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--_k-round);color:var(--_k-fg-3)}
 .knobs-group-head .knobs-group-die[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 .knobs-panel .knobs-group-head button:where(:not(.knobs-group-reset)){transition:background var(--k-hover-t),color var(--k-hover-t),opacity .2s,transform .12s}
 
 /* Grouped cards: rows share one surface, split by hairlines that stay put whatever a row is doing */
-.knobs-card{position:relative;margin-bottom:var(--k-section-gap);border-radius:var(--k-radius);background:var(--k-surface);overflow:hidden}
+.knobs-card{position:relative;margin-bottom:var(--k-section-gap);border-radius:var(--_k-radius);background:var(--_k-fill);overflow:hidden}
 .knobs-card:last-child{margin-bottom:0}
-.knobs-card>*{position:relative;min-height:var(--k-row);transition:background var(--k-hover-t),opacity .2s}
+.knobs-card>*{position:relative;min-height:var(--_k-row);transition:background var(--k-hover-t),opacity .2s}
 .knobs-panel [data-tab-opacity]{transition:none!important}
 /* Rubber-band ends (drawStretch in give.ts): past a limit a control stretches about its far end
    and thins a little, its stretching corners rounding off; a row draws past its card's edge
@@ -1023,21 +2446,21 @@ ${GRAD_PROPS}
 .knobs-card[data-k-stretch]{overflow:visible}
 .knobs-card>:first-child{--k-rt:1}
 .knobs-card>:last-child{--k-rb:1}
-.knobs-card>.knobs-stretching{--k-r:var(--k-radius);border-radius:calc(var(--k-r) * var(--k-rt,0)) calc(var(--k-r) * var(--k-rt,0)) calc(var(--k-r) * var(--k-rb,0)) calc(var(--k-r) * var(--k-rb,0))}
+.knobs-card>.knobs-stretching{--k-r:var(--_k-radius);border-radius:calc(var(--k-r) * var(--k-rt,0)) calc(var(--k-r) * var(--k-rt,0)) calc(var(--k-r) * var(--k-rb,0)) calc(var(--k-r) * var(--k-rb,0))}
 .knobs-card>.knobs-stretching[data-stretch="end"]{border-top-right-radius:calc(var(--k-r) * max(var(--k-rt,0),var(--k-sf)));border-bottom-right-radius:calc(var(--k-r) * max(var(--k-rb,0),var(--k-sf)))}
 .knobs-card>.knobs-stretching[data-stretch="start"]{border-top-left-radius:calc(var(--k-r) * max(var(--k-rt,0),var(--k-sf)));border-bottom-left-radius:calc(var(--k-r) * max(var(--k-rb,0),var(--k-sf)))}
 .knobs-stretching>:is(.knobs-track,.knobs-range-track){border-radius:inherit}
 .knobs-slider.knobs-stretching :is(.knobs-label,.knobs-value),.knobs-range.knobs-stretching .knobs-range-text{scale:calc(1 / var(--k-sx)) calc(1 / var(--k-sy))}
-.knobs-slider.knobs-stretching .knobs-label{transform-origin:calc(var(--k-ox) - var(--k-inset)) 0}
-.knobs-panel .knobs-slider.knobs-stretching .knobs-value{transform-origin:calc(var(--k-ox) - var(--k-w) + var(--k-inset) + 100%) 0}
+.knobs-slider.knobs-stretching .knobs-label{transform-origin:calc(var(--k-ox) - var(--_k-inset)) 0}
+.knobs-panel .knobs-slider.knobs-stretching .knobs-value{transform-origin:calc(var(--k-ox) - var(--k-w) + var(--_k-inset) + 100%) 0}
 .knobs-range.knobs-stretching .knobs-range-text{transform-origin:var(--k-sox) 50%}
 .knobs-stretching>:is(.knobs-strip-thumb,.knobs-pad-puck,.knobs-pad-home){transform:scale(calc(1 / var(--k-sx)),calc(1 / var(--k-sy)))}
-.knobs-card>:hover,.knobs-card>.knobs-active{background:var(--k-row-hover)}
-.knobs-card>*+*::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;transform:scaleY(.5);transform-origin:top;background:var(--k-line);pointer-events:none;transition:opacity .15s}
-.knobs-card>::after{content:"";position:absolute;z-index:2;inset:0;background:var(--k-surface-hi);opacity:0;pointer-events:none;transition:opacity .15s,box-shadow .15s}
+.knobs-card>:hover,.knobs-card>.knobs-active{background:var(--_k-row-hover)}
+.knobs-card>*+*::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;transform:scaleY(.5);transform-origin:top;background:var(--_k-border);pointer-events:none;transition:opacity .15s}
+.knobs-card>::after{content:"";position:absolute;z-index:2;inset:0;background:var(--_k-fill-selected);opacity:0;pointer-events:none;transition:opacity .15s,box-shadow .15s}
 /* The card focus is on (a click on its empty area or heading, Esc from a row): a soft wash over all
    of it, for R and ⇧R acting on its group. */
-:is(.knobs-card,.knobs-tile)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--k-surface);opacity:0;pointer-events:none;transition:opacity .2s var(--k-ease)}
+:is(.knobs-card,.knobs-tile)::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--_k-fill);opacity:0;pointer-events:none;transition:opacity .2s var(--k-ease)}
 :is(.knobs-card,.knobs-tile)[data-k-scope]::after{opacity:1}
 .knobs-panel:focus{outline:none}
 .knobs-card>:has(:focus-visible)::after{opacity:1}
@@ -1048,18 +2471,18 @@ ${POINTER_ROW} :is(.knobs-card>*,.knobs-sub,.knobs-x-head):not(:hover)::after{op
    a soft wash and a hairline edge, placed from script (--kl-w, --kl-l). */
 .knobs-panel[data-k-lens] :is(.knobs-card>*,.knobs-sub,.knobs-x-head,.knobs-card,.knobs-tile)::after{opacity:0!important}
 .knobs-lens{position:absolute;left:0;top:0;z-index:2;width:0;height:0;opacity:0;pointer-events:none;box-sizing:border-box;contain:strict;will-change:transform,opacity;
-  background:color-mix(in srgb,var(--k-surface-hi) calc(var(--kl-w,0) * 100%),transparent);
-  box-shadow:inset 0 0 0 var(--k-rim-width) color-mix(in srgb,var(--k-line-hi) calc(var(--kl-l,0) * 100%),transparent)}
+  background:color-mix(in srgb,var(--_k-fill-selected) calc(var(--kl-w,0) * 100%),transparent);
+  box-shadow:inset 0 0 0 var(--k-rim-width) color-mix(in srgb,var(--_k-border-strong) calc(var(--kl-l,0) * 100%),transparent)}
 .knobs-panel[data-gpu-active="true"] .knobs-lens{visibility:hidden}
-.knobs-panel .knobs-slider{height:var(--k-row);contain:layout style}
-.knobs-panel .knobs-row:where(:not(.knobs-slider,.knobs-x,.knobs-spring)){display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--k-row);padding:0 var(--k-inset);contain:layout style}
-.knobs-panel .knobs-row>span:first-child{color:var(--k-label);font-weight:var(--k-label-weight);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.knobs-row>span:first-child::after{content:"";display:inline-block;width:4px;height:4px;margin-left:5px;border-radius:50%;background:var(--k-modified);vertical-align:middle;opacity:0;transform:scale(.4);transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
+.knobs-panel .knobs-slider{height:var(--_k-row);contain:layout style}
+.knobs-panel .knobs-row:where(:not(.knobs-slider,.knobs-x,.knobs-spring)){display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--_k-row);padding:0 var(--_k-inset);contain:layout style}
+.knobs-panel .knobs-row>span:first-child{color:var(--_k-fg-2);font-weight:var(--_k-weight-label);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.knobs-row>span:first-child::after{content:"";display:inline-block;width:4px;height:4px;margin-left:5px;border-radius:50%;background:var(--_k-modified);vertical-align:middle;opacity:0;transform:scale(.4);transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
 .knobs-modified.knobs-row>span:first-child::after{opacity:.95;transform:none}
 /* A locked row's lock sits just left of its readout (or its control), where the eye reads the value.
    Its room opens at once (it's right-aligned, so nothing beside it moves); the icon fades and
    scales in place. */
-.knobs-lock{position:relative;flex:none;order:-1;display:inline-block;width:0;height:10px;color:var(--k-dim)}
+.knobs-lock{position:relative;flex:none;order:-1;display:inline-block;width:0;height:10px;color:var(--_k-fg-3)}
 .knobs-lock>svg{position:absolute;right:0;top:0;width:10px;height:10px;opacity:0;transform:scale(.5);transition:opacity .14s ease-in,transform .14s ease-in}
 .knobs-locked .knobs-lock{width:10px}
 .knobs-value>.knobs-lock>svg{right:6px}
@@ -1073,74 +2496,74 @@ ${POINTER_ROW} :is(.knobs-card>*,.knobs-sub,.knobs-x-head):not(:hover)::after{op
    The ticks and handle fade where the label and readout sit (--k-text-mask). The fill and handle
    are moved by transforms, never layout or background sizes, which snap to whole pixels: the
    edge and the handle's centre both land on the value's exact sub-pixel position, as on the GPU. */
-.knobs-track{position:absolute;left:0;right:0;top:0;height:var(--k-row);overflow:hidden;contain:layout style paint;cursor:ew-resize;user-select:none;touch-action:none;transition:--k-readout .25s var(--k-ease);
-  --k-text-mask:linear-gradient(to right,transparent calc(var(--k-label-end,0px) + 4px),#000 calc(var(--k-label-end,0px) + 12px),#000 calc(100% - var(--k-inset) - var(--k-readout) - 12px),transparent calc(100% - var(--k-inset) - var(--k-readout) - 4px))}
+.knobs-track{position:absolute;left:0;right:0;top:0;height:var(--_k-row);overflow:hidden;contain:layout style paint;cursor:ew-resize;user-select:none;touch-action:none;transition:--k-readout .25s var(--k-ease);
+  --k-text-mask:linear-gradient(to right,transparent calc(var(--k-label-end,0px) + 4px),#000 calc(var(--k-label-end,0px) + 12px),#000 calc(100% - var(--_k-inset) - var(--k-readout) - 12px),transparent calc(100% - var(--_k-inset) - var(--k-readout) - 4px))}
 .knobs-panel .knobs-track:focus-visible{outline:none;box-shadow:none}
 .knobs-marks,.knobs-handle-zone{position:absolute;inset:0;pointer-events:none;-webkit-mask:var(--k-text-mask);mask:var(--k-text-mask)}
 .knobs-marks>i{position:absolute;top:50%;width:1px;height:7px;border-radius:999px;transform:translate(-50%,-50%);background:transparent;transition:background .2s}
-.knobs-fill{position:absolute;inset:0;pointer-events:none;--k-fill-mix:var(--k-fill-rest-mix);--k-fill-tint:color-mix(in srgb,var(--k-accent) var(--k-fill-mix),var(--k-fill-base));
-  background:var(--k-fill-tint);transform:translateX(calc(var(--k-fill) - 100%));transition:--k-fill-mix .15s}
-.knobs-slider:hover .knobs-fill{--k-fill-mix:var(--k-fill-hover-mix)}
+.knobs-fill{position:absolute;inset:0;pointer-events:none;--k-fill-mix:var(--k-fill-rest-mix);--k-fill-tint:color-mix(in srgb,var(--_k-accent) var(--k-fill-mix),var(--_k-fill-base));
+  background:var(--k-fill-tint);transform:translateX(calc(var(--_k-fill-at) - 100%));transition:--k-fill-mix .15s}
+.knobs-slider:hover .knobs-fill{--k-fill-mix:var(--_k-fill-hover-mix)}
 .knobs-active .knobs-fill,.knobs-active:hover .knobs-fill{--k-fill-mix:var(--k-fill-active-mix)}
 /* --k-motion-blur: a moving edge smears into a ramp as wide as its speed (--k-smear, px), as a
    horizontal box blur would; the handle widens and thins to match. */
-.knobs-smear .knobs-fill{background:linear-gradient(to left,transparent,var(--k-fill-tint) calc(var(--k-smear) * 1px));transform:translateX(calc(var(--k-fill) - 100% + var(--k-smear) * .5px))}
+.knobs-smear .knobs-fill{background:linear-gradient(to left,transparent,var(--k-fill-tint) calc(var(--k-smear) * 1px));transform:translateX(calc(var(--_k-fill-at) - 100% + var(--k-smear) * .5px))}
 .knobs-smear .knobs-handle::before{scale:calc(1 + var(--k-smear) / 3) 1;opacity:calc(3 / (3 + var(--k-smear)))}
 .knobs-animate .knobs-fill,.knobs-animate .knobs-handle{transition:--k-fill ${SLIDE_T} ${DELAY},--k-fill-mix .15s,opacity .15s}
 /* The default: a short notch rising from the bottom edge, only while the row is in hand. The
    active preset's value hangs one from the top edge. */
-.knobs-marks>.knobs-notch{top:auto;bottom:0;width:1.5px;height:4px;border-radius:999px 999px 0 0;transform:translateX(-50%);background:var(--k-accent);opacity:0;transition:opacity .2s,height .15s var(--k-ease)}
+.knobs-marks>.knobs-notch{top:auto;bottom:0;width:1.5px;height:4px;border-radius:999px 999px 0 0;transform:translateX(-50%);background:var(--_k-accent);opacity:0;transition:opacity .2s,height .15s var(--k-ease)}
 .knobs-marks>.knobs-base{top:0;bottom:auto;border-radius:0 0 999px 999px}
 .knobs-slider:is(:hover,.knobs-active,:has(:focus-visible)) .knobs-notch{opacity:.38}
 .knobs-slider.knobs-modified:is(:hover,.knobs-active,:has(:focus-visible)) .knobs-notch:not(.knobs-base){opacity:.55}
 .knobs-magnet .knobs-notch:not(.knobs-base),.knobs-held-base .knobs-base{opacity:.95;height:6px}
 /* Precision by distance: a fine ruler around the handle, a level for each halving of the rate,
    each finer, shorter and fainter than the last. */
-.knobs-ruler{position:absolute;inset:0;pointer-events:none;--k-ruler-w:linear-gradient(to right,transparent calc(var(--k-fill) - ${RULER_FADE}px),#000 calc(var(--k-fill) - ${RULER_NEAR}px),#000 calc(var(--k-fill) + ${RULER_NEAR}px),transparent calc(var(--k-fill) + ${RULER_FADE}px));-webkit-mask:var(--k-ruler-w);mask:var(--k-ruler-w)}
+.knobs-ruler{position:absolute;inset:0;pointer-events:none;--k-ruler-w:linear-gradient(to right,transparent calc(var(--_k-fill-at) - ${RULER_FADE}px),#000 calc(var(--_k-fill-at) - ${RULER_NEAR}px),#000 calc(var(--_k-fill-at) + ${RULER_NEAR}px),transparent calc(var(--_k-fill-at) + ${RULER_FADE}px));-webkit-mask:var(--k-ruler-w);mask:var(--k-ruler-w)}
 .knobs-ruler>i{position:absolute;left:0;right:0;top:50%;opacity:0;translate:-.5px 0;transition:opacity .18s var(--k-ease)}
-${RULER.map(([n, h, a], i) => `.knobs-ruler>i:nth-child(${i + 1}){height:${h}px;margin-top:${-h / 2}px;background:repeating-linear-gradient(to right,color-mix(in srgb,var(--k-accent) ${a * 100}%,transparent) 0 1px,transparent 1px calc(100% / ${n}))}`).join(`
+${RULER.map(([n, h, a], i) => `.knobs-ruler>i:nth-child(${i + 1}){height:${h}px;margin-top:${-h / 2}px;background:repeating-linear-gradient(to right,color-mix(in srgb,var(--_k-accent) ${a * 100}%,transparent) 0 1px,transparent 1px calc(100% / ${n}))}`).join(`
 `)}
 /* The handle is a full-width layer moved by the fill (translate's % is its own width, the track's). */
-.knobs-handle{position:absolute;inset:0;pointer-events:none;transform:translateX(var(--k-fill));opacity:var(--k-handle-rest);transition:opacity .15s}
-.knobs-handle::before{content:"";position:absolute;left:0;top:50%;width:3px;height:calc(var(--k-row) - 12px);margin-top:calc(6px - var(--k-row) / 2);translate:calc(-50% - var(--k-handle-inset)) 0;border-radius:var(--k-round);background:var(--k-handle);
-  box-shadow:0 0 calc(var(--k-glow) * 8px) color-mix(in srgb,var(--k-accent) 60%,transparent);transform:scaleX(calc(.25 + .75 * min(1, var(--k-handle-rest) * 4)));transition:transform .22s var(--k-ease)}
+.knobs-handle{position:absolute;inset:0;pointer-events:none;transform:translateX(var(--_k-fill-at));opacity:var(--k-handle-rest);transition:opacity .15s}
+.knobs-handle::before{content:"";position:absolute;left:0;top:50%;width:3px;height:calc(var(--_k-row) - 12px);margin-top:calc(6px - var(--_k-row) / 2);translate:calc(-50% - var(--k-handle-inset)) 0;border-radius:var(--_k-round);background:var(--_k-slider-handle);
+  box-shadow:0 0 calc(var(--_k-glow) * 8px) color-mix(in srgb,var(--_k-accent) 60%,transparent);transform:scaleX(calc(.25 + .75 * min(1, var(--k-handle-rest) * 4)));transition:transform .22s var(--k-ease)}
 .knobs-slider:hover .knobs-handle,.knobs-track:focus-visible .knobs-handle{opacity:max(.65,var(--k-handle-rest))}
 .knobs-active .knobs-handle{opacity:.95}
 .knobs-slider:is(:hover,.knobs-active) .knobs-handle::before,.knobs-track:focus-visible .knobs-handle::before{transform:scaleX(1)}
-.knobs-slider:is(:hover,:has(:focus-visible)) .knobs-marks>i:not(.knobs-notch){background:color-mix(in srgb,var(--k-accent) 15%,transparent)}
-.knobs-active .knobs-marks>i:not(.knobs-notch){background:color-mix(in srgb,var(--k-accent) 22%,transparent)}
+.knobs-slider:is(:hover,:has(:focus-visible)) .knobs-marks>i:not(.knobs-notch){background:color-mix(in srgb,var(--_k-accent) 15%,transparent)}
+.knobs-active .knobs-marks>i:not(.knobs-notch){background:color-mix(in srgb,var(--_k-accent) 22%,transparent)}
 /* A focused slider the pointer has left for another row rests meanwhile (one row lit at a time). */
 ${POINTER_ROW} .knobs-slider:not(:hover,.knobs-active) .knobs-marks>i:not(.knobs-notch){background:transparent}
 ${POINTER_ROW} .knobs-slider:not(:hover,.knobs-active) .knobs-notch{opacity:0}
 ${POINTER_ROW} .knobs-slider:not(:hover,.knobs-active) .knobs-handle{opacity:var(--k-handle-rest)}
 ${POINTER_ROW} .knobs-slider:not(:hover,.knobs-active) .knobs-handle::before{transform:scaleX(calc(.25 + .75 * min(1, var(--k-handle-rest) * 4)))}
-${POINTER_ROW} .knobs-slider:not(:hover,.knobs-active) .knobs-value{color:var(--k-label)}
-${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-value{color:color-mix(in srgb,var(--k-modified) calc(var(--k-readout-mark) * 100%),var(--k-label))}
+${POINTER_ROW} .knobs-slider:not(:hover,.knobs-active) .knobs-value{color:var(--_k-fg-2)}
+${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-value{color:color-mix(in srgb,var(--_k-modified) calc(var(--k-readout-mark) * 100%),var(--_k-fg-2))}
 .knobs-digits{display:inline-flex;align-items:center;line-height:2.1;margin-block:-.375em;--rn-edge-fade:.5em}
 .knobs-unit{color:var(--k-unit-color);margin-left:var(--k-unit-gap)}
 /* --k-readout-mark (0 or 1): a modified value takes the modified colour behind a small dot. */
-.knobs-value::before{content:"";flex:none;width:calc(5px * var(--k-readout-mark));height:5px;margin-right:calc(6px * var(--k-readout-mark));border-radius:50%;background:var(--k-modified);opacity:0;transform:scale(0);transition:opacity .16s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
-:is(.knobs-slider,.knobs-sub).knobs-modified .knobs-value{color:color-mix(in srgb,var(--k-modified) calc(var(--k-readout-mark) * 100%),var(--k-label))}
-:is(.knobs-slider,.knobs-sub).knobs-modified:is(.knobs-active,:has(.knobs-track:focus-visible)) .knobs-value{color:color-mix(in srgb,var(--k-modified) calc(var(--k-readout-mark) * 100%),var(--k-text))}
+.knobs-value::before{content:"";flex:none;width:calc(5px * var(--k-readout-mark));height:5px;margin-right:calc(6px * var(--k-readout-mark));border-radius:50%;background:var(--_k-modified);opacity:0;transform:scale(0);transition:opacity .16s ease,transform .3s cubic-bezier(.34,1.56,.64,1)}
+:is(.knobs-slider,.knobs-sub).knobs-modified .knobs-value{color:color-mix(in srgb,var(--_k-modified) calc(var(--k-readout-mark) * 100%),var(--_k-fg-2))}
+:is(.knobs-slider,.knobs-sub).knobs-modified:is(.knobs-active,:has(.knobs-track:focus-visible)) .knobs-value{color:color-mix(in srgb,var(--_k-modified) calc(var(--k-readout-mark) * 100%),var(--_k-fg))}
 :is(.knobs-slider,.knobs-sub).knobs-modified .knobs-value::before{opacity:var(--k-readout-mark);transform:none}
-.knobs-label{position:absolute;left:var(--k-inset);top:50%;transform:translateY(-50%);max-width:calc(100% - var(--k-inset) * 2 - var(--k-readout,48px) - 8px - var(--k-accessory-w,0px));overflow:hidden;text-overflow:ellipsis;color:var(--k-label);font-weight:var(--k-label-weight);pointer-events:none;white-space:nowrap}
-.knobs-panel .knobs-value{position:absolute;right:var(--k-inset);top:50%;transform:translateY(-50%);transform-origin:100% 0;display:inline-flex;align-items:center;justify-content:flex-end;gap:0;padding:4px 0 4px 8px;background:transparent!important;border-radius:0!important;line-height:1.35;overflow:visible;white-space:nowrap;
-  color:var(--k-label);font-family:var(--k-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:var(--kc-value-size);
+.knobs-label{position:absolute;left:var(--_k-inset);top:50%;transform:translateY(-50%);max-width:calc(100% - var(--_k-inset) * 2 - var(--k-readout,48px) - 8px - var(--k-accessory-w,0px));overflow:hidden;text-overflow:ellipsis;color:var(--_k-fg-2);font-weight:var(--_k-weight-label);pointer-events:none;white-space:nowrap}
+.knobs-panel .knobs-value{position:absolute;right:var(--_k-inset);top:50%;transform:translateY(-50%);transform-origin:100% 0;display:inline-flex;align-items:center;justify-content:flex-end;gap:0;padding:4px 0 4px 8px;background:transparent!important;border-radius:0!important;line-height:1.35;overflow:visible;white-space:nowrap;
+  color:var(--_k-fg-2);font-family:var(--_k-value-font);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-size:var(--_k-value-size);
   cursor:text;transition:color .15s}
-.knobs-active .knobs-value,.knobs-track:focus-visible .knobs-value{color:var(--k-text)}
+.knobs-active .knobs-value,.knobs-track:focus-visible .knobs-value{color:var(--_k-fg)}
 /* Editing: the digits' own text, in place (edit() gives it their right edge and width), with no
    box: a soft accent selection, an accent caret, and the unit still after it. */
 .knobs-panel :is(.knobs-number,.knobs-number-fit){position:absolute;top:50%;z-index:2;margin:0;padding:0 1px 0 0;border:0;border-radius:0;background:transparent;box-shadow:none;outline:none;
-  font-family:var(--k-value-font);font-size:var(--kc-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:normal;line-height:1.35;text-align:right;white-space:pre}
-.knobs-panel .knobs-number{transform:translateY(-50%);color:var(--k-text);caret-color:var(--k-accent)}
-.knobs-number::selection{background:color-mix(in srgb,var(--k-accent) 24%,transparent);color:var(--k-text)}
+  font-family:var(--_k-value-font);font-size:var(--_k-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";letter-spacing:normal;line-height:1.35;text-align:right;white-space:pre}
+.knobs-panel .knobs-number{transform:translateY(-50%);color:var(--_k-fg);caret-color:var(--_k-accent)}
+.knobs-number::selection{background:color-mix(in srgb,var(--_k-accent) 24%,transparent);color:var(--_k-fg)}
 .knobs-panel .knobs-number-fit{left:0;visibility:hidden;pointer-events:none}
 .knobs-editing .knobs-digits{visibility:hidden}
 .knobs-editing .knobs-value{pointer-events:none}
 
 /* Segmented choice */
-.knobs-seg{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:var(--k-tray-pad);height:var(--kc-control-h);padding:var(--k-tray-pad);max-width:76%;background:var(--k-seg-bg);border-radius:var(--k-radius-md)}
-.knobs-seg-pill{position:absolute;top:var(--k-tray-pad);bottom:var(--k-tray-pad);left:0;right:100%;border-radius:var(--k-radius-sm);background:var(--k-pill-bg);box-shadow:var(--k-lift-shadow);pointer-events:none;
+.knobs-seg{position:relative;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;gap:var(--_k-tray-pad);height:var(--_k-control-h);padding:var(--_k-tray-pad);max-width:76%;background:var(--_k-segmented-track);border-radius:var(--_k-radius-md)}
+.knobs-seg-pill{position:absolute;top:var(--_k-tray-pad);bottom:var(--_k-tray-pad);left:0;right:100%;border-radius:var(--_k-radius-sm);background:var(--k-pill-bg);box-shadow:var(--_k-shadow-raised);pointer-events:none;
   transition:left ${TRAIL_T} ${DELAY},right ${LEAD_T} ${DELAY},opacity .15s}
 .knobs-seg-pill[data-dir="left"]{transition:left ${LEAD_T} ${DELAY},right ${TRAIL_T} ${DELAY},opacity .15s}
 .knobs-seg-pill[data-off]{opacity:0}
@@ -1148,107 +2571,107 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-smear-pill{margin-inline:calc(var(--k-smear) * -.5px);
   -webkit-mask:linear-gradient(to right,transparent,#000 calc(var(--k-smear) * 1px),#000 calc(100% - var(--k-smear) * 1px),transparent);
   mask:linear-gradient(to right,transparent,#000 calc(var(--k-smear) * 1px),#000 calc(100% - var(--k-smear) * 1px),transparent)}
-.knobs-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0 7px;font-size:var(--k-text-control);font-weight:var(--k-label-weight);white-space:nowrap;color:var(--k-label);background:transparent;cursor:pointer;border-radius:var(--k-radius-sm);transition:background var(--k-hover-t),color var(--k-hover-t)}
-.knobs-seg button:is(:hover,:focus-visible){color:var(--k-text)}
-.knobs-seg button[aria-checked=true]{color:var(--k-text)}
+.knobs-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;height:100%;padding:0 7px;font-size:var(--_k-text-control);font-weight:var(--_k-weight-label);white-space:nowrap;color:var(--_k-fg-2);background:transparent;cursor:pointer;border-radius:var(--_k-radius-sm);transition:background var(--k-hover-t),color var(--k-hover-t)}
+.knobs-seg button:is(:hover,:focus-visible){color:var(--_k-fg)}
+.knobs-seg button[aria-checked=true]{color:var(--_k-fg)}
 
 /* Long choices: a compact button that drops down a menu */
-.knobs-panel .knobs-select{position:relative;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:62%;height:var(--kc-control-h);padding:0 6px 0 10px;background:var(--k-seg-bg);border-radius:var(--k-radius-md);color:var(--k-label);font-size:var(--k-text-control);font-weight:var(--k-label-weight);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
-.knobs-panel .knobs-select:is(:hover,:focus-visible,[aria-expanded="true"]),.knobs-panel .knobs-active>.knobs-select{background:var(--k-surface-hi);color:var(--k-text)}
+.knobs-panel .knobs-select{position:relative;display:inline-flex;align-items:center;gap:6px;min-width:0;max-width:62%;height:var(--_k-control-h);padding:0 6px 0 10px;background:var(--_k-segmented-track);border-radius:var(--_k-radius-md);color:var(--_k-fg-2);font-size:var(--_k-text-control);font-weight:var(--_k-weight-label);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
+.knobs-panel .knobs-select:is(:hover,:focus-visible,[aria-expanded="true"]),.knobs-panel .knobs-active>.knobs-select{background:var(--_k-fill-selected);color:var(--_k-fg)}
 .knobs-select-value{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .knobs-panel .knobs-row-full .knobs-select{flex:1;max-width:none;justify-content:space-between}
-.knobs-select .knobs-icon{width:calc(var(--k-icon-sm) - 2px);height:calc(var(--k-icon-sm) - 2px);color:var(--k-dim)}
+.knobs-select .knobs-icon{width:calc(var(--k-icon-sm) - 2px);height:calc(var(--k-icon-sm) - 2px);color:var(--_k-fg-3)}
 .knobs-menu[data-checks] .knobs-menu-item{padding-left:24px}
 .knobs-menu-item[aria-checked="true"]::before{content:"";position:absolute;left:9px;top:50%;width:7px;height:4px;margin-top:-3.5px;border:solid currentColor;border-width:0 0 1.5px 1.5px;transform:rotate(-45deg)}
 
 /* Action rows: a button the width of the row */
 .knobs-panel .knobs-action-row{padding:0}
-.knobs-panel .knobs-action{width:100%;height:100%;padding:0 var(--k-inset);text-align:left;background:transparent;border-radius:0;color:var(--k-button-color,var(--k-text));font-size:var(--k-button-font-size,calc(var(--k-text-control) + .5px));font-weight:var(--k-label-weight);cursor:pointer;transition:color var(--k-hover-t),background var(--k-hover-t),box-shadow var(--k-hover-t)}
-.knobs-panel .knobs-action:is(:hover,:focus-visible){color:var(--k-accent)}
+.knobs-panel .knobs-action{width:100%;height:100%;padding:0 var(--_k-inset);text-align:left;background:transparent;border-radius:0;color:var(--k-button-color,var(--_k-fg));font-size:var(--k-button-font-size,calc(var(--_k-text-control) + .5px));font-weight:var(--_k-weight-label);cursor:pointer;transition:color var(--k-hover-t),background var(--k-hover-t),box-shadow var(--k-hover-t)}
+.knobs-panel .knobs-action:is(:hover,:focus-visible){color:var(--_k-accent)}
 .knobs-panel .knobs-action:is(:active,.knobs-pressed){opacity:.7}
-.knobs-panel .knobs-action.knobs-pressed{color:var(--k-accent)}
+.knobs-panel .knobs-action.knobs-pressed{color:var(--_k-accent)}
 /* A shortcut: its key cap at the row's end, the button taking the rest. */
 .knobs-panel .knobs-action-row[data-keyed]{gap:6px}
 .knobs-panel .knobs-action-row[data-keyed]>.knobs-action{flex:1 1 0;width:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
-.knobs-panel .knobs-action-row>.knobs-keys{order:1;margin-right:var(--k-inset)}
+.knobs-panel .knobs-action-row>.knobs-keys{order:1;margin-right:var(--_k-inset)}
 /* With a button fill or outline (--k-button-bg, --k-button-line), an action is a sized button in
    its row, and the presets strip a row of them, as toolbar buttons are. */
-.knobs-panel[data-buttons] .knobs-action-row{padding:0 var(--k-inset)}
+.knobs-panel[data-buttons] .knobs-action-row{padding:0 var(--_k-inset)}
 .knobs-panel[data-buttons] .knobs-action-row[data-keyed]>.knobs-action{flex:0 1 auto;margin-right:auto}
 .knobs-panel[data-buttons] .knobs-action-row>.knobs-keys{margin-right:0}
-.knobs-panel[data-buttons] .knobs-action{width:auto;max-width:100%;height:var(--k-button-h,var(--kc-control-h));padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
-  background:var(--k-button-bg,transparent);box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);border-radius:var(--k-button-radius,var(--k-radius-md))}
-.knobs-panel[data-buttons] .knobs-action:is(:hover,:focus-visible){color:var(--k-text);background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent))}
+.knobs-panel[data-buttons] .knobs-action{width:auto;max-width:100%;height:var(--k-button-h,var(--_k-control-h));padding:0 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+  background:var(--k-button-bg,transparent);box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);border-radius:var(--k-button-radius,var(--_k-radius-md))}
+.knobs-panel[data-buttons] .knobs-action:is(:hover,:focus-visible){color:var(--_k-fg);background:var(--k-button-hover-bg,var(--_k-fill-selected));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent))}
 
 /* Switch */
 /* The thumb spans two edges: the leading one springs ahead and the other follows, so it stretches
    into a capsule as it travels; a press widens it toward where it will go. */
-.knobs-panel .knobs-toggle{position:relative;flex:none;width:32px;height:18px;padding:0;background:var(--k-toggle-track);border-radius:var(--k-round);cursor:pointer;transition:background .2s ${DELAY},box-shadow .2s ${DELAY}}
-.knobs-panel .knobs-toggle[aria-checked=true]{background:var(--k-accent);box-shadow:0 0 calc(var(--k-glow) * 10px) color-mix(in srgb,var(--k-accent) 42%,transparent)}
-.knobs-toggle i{position:absolute;top:var(--k-tray-pad);bottom:var(--k-tray-pad);left:var(--k-tray-pad);right:16px;border-radius:var(--k-round);background:var(--k-thumb);box-shadow:0 1px 2px rgba(0,0,0,calc(.25 * var(--k-lift)));transition:left ${LEAD_T} ${DELAY},right ${TRAIL_T} ${DELAY},background .2s ${DELAY}}
-.knobs-toggle[aria-checked=true] i{left:16px;right:var(--k-tray-pad);background:var(--k-toggle-thumb);transition:left ${TRAIL_T} ${DELAY},right ${LEAD_T} ${DELAY},background .2s ${DELAY}}
+.knobs-panel .knobs-toggle{position:relative;flex:none;width:32px;height:18px;padding:0;background:var(--_k-toggle-track);border-radius:var(--_k-round);cursor:pointer;transition:background .2s ${DELAY},box-shadow .2s ${DELAY}}
+.knobs-panel .knobs-toggle[aria-checked=true]{background:var(--_k-accent);box-shadow:0 0 calc(var(--_k-glow) * 10px) color-mix(in srgb,var(--_k-accent) 42%,transparent)}
+.knobs-toggle i{position:absolute;top:var(--_k-tray-pad);bottom:var(--_k-tray-pad);left:var(--_k-tray-pad);right:16px;border-radius:var(--_k-round);background:var(--_k-toggle-thumb-off);box-shadow:0 1px 2px rgba(0,0,0,calc(.25 * var(--k-lift)));transition:left ${LEAD_T} ${DELAY},right ${TRAIL_T} ${DELAY},background .2s ${DELAY}}
+.knobs-toggle[aria-checked=true] i{left:16px;right:var(--_k-tray-pad);background:var(--_k-toggle-thumb);transition:left ${TRAIL_T} ${DELAY},right ${LEAD_T} ${DELAY},background .2s ${DELAY}}
 .knobs-toggle:active i{right:12px;transition:right ${LEAD_T},background .2s}
-.knobs-toggle[aria-checked=true]:active i{left:12px;right:var(--k-tray-pad);transition:left ${LEAD_T},background .2s}
+.knobs-toggle[aria-checked=true]:active i{left:12px;right:var(--_k-tray-pad);transition:left ${LEAD_T},background .2s}
 
 /* Compound rows: a spring's two sliders beside its curve; disclosure rows with an editor body */
 .knobs-card>:is(.knobs-spring,.knobs-x):hover{background:transparent}
 .knobs-card>:is(.knobs-spring,.knobs-x):has(:focus-visible)::after{opacity:0}
 /* Selected rows: one accent-tinted wash, joined across neighbours. */
-.knobs-panel .knobs-card>.knobs-selected{background:color-mix(in srgb,var(--k-accent) 10%,transparent)}
+.knobs-panel .knobs-card>.knobs-selected{background:color-mix(in srgb,var(--_k-accent) 10%,transparent)}
 .knobs-card>.knobs-selected+.knobs-selected::before{opacity:0}
 .knobs-spring{display:flex}
 .knobs-spring-tracks{position:relative;flex:1;min-width:0;overflow:hidden}
 .knobs-sub{position:relative;transition:background var(--k-hover-t)}
-.knobs-sub:hover,.knobs-sub.knobs-active,.knobs-x-head:hover,.knobs-x-head[data-panned]{background:var(--k-row-hover)}
-.knobs-sub+.knobs-sub::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;transform:scaleY(.5);transform-origin:top;background:var(--k-line);pointer-events:none;transition:opacity .15s}
-:is(.knobs-sub,.knobs-x-head)::after{content:"";position:absolute;z-index:2;inset:0;background:var(--k-surface-hi);opacity:0;pointer-events:none;transition:opacity .15s}
+.knobs-sub:hover,.knobs-sub.knobs-active,.knobs-x-head:hover,.knobs-x-head[data-panned]{background:var(--_k-row-hover)}
+.knobs-sub+.knobs-sub::before{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:1px;transform:scaleY(.5);transform-origin:top;background:var(--_k-border);pointer-events:none;transition:opacity .15s}
+:is(.knobs-sub,.knobs-x-head)::after{content:"";position:absolute;z-index:2;inset:0;background:var(--_k-fill-selected);opacity:0;pointer-events:none;transition:opacity .15s}
 :is(.knobs-sub:has(:focus-visible),.knobs-x-head:focus-visible)::after{opacity:1}
-.knobs-spring-curve{position:relative;flex:none;width:calc(var(--k-row) * 2.5);margin:var(--k-gap) var(--k-inset) var(--k-gap) 0;border-radius:var(--k-radius-sm);background:var(--k-seg-bg);pointer-events:none}
+.knobs-spring-curve{position:relative;flex:none;width:calc(var(--_k-row) * 2.5);margin:var(--_k-gap) var(--_k-inset) var(--_k-gap) 0;border-radius:var(--_k-radius-sm);background:var(--_k-segmented-track);pointer-events:none}
 .knobs-panel :is(.knobs-spring-curve,.knobs-ease)>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
-.knobs-guide{fill:none;stroke:var(--k-line);stroke-width:1}
-.knobs-arm{fill:none;stroke:var(--k-dim);stroke-width:1}
-.knobs-curve{fill:none;stroke:var(--k-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:d ${FILL_T} ${DELAY}}
-.knobs-spring-dot{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--k-accent);box-shadow:0 0 calc(var(--k-glow) * 8px) var(--k-accent);opacity:0;scale:var(--k-curve-dot)}
-.knobs-guide-dashed{stroke:var(--k-line-hi)}
+.knobs-guide{fill:none;stroke:var(--_k-border);stroke-width:1}
+.knobs-arm{fill:none;stroke:var(--_k-fg-3);stroke-width:1}
+.knobs-curve{fill:none;stroke:var(--_k-accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:d ${FILL_T} ${DELAY}}
+.knobs-spring-dot{position:absolute;left:0;top:0;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--_k-accent);box-shadow:0 0 calc(var(--_k-glow) * 8px) var(--_k-accent);opacity:0;scale:var(--k-curve-dot)}
+.knobs-guide-dashed{stroke:var(--_k-border-strong)}
 .knobs-spring:has(.knobs-active) .knobs-curve{transition:none}
 
 .knobs-panel :is(input,textarea,[contenteditable]){-webkit-user-select:text;user-select:text}
-.knobs-x-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--k-row);padding:0 var(--k-inset);cursor:pointer;user-select:none;transition:background var(--k-hover-t)}
+.knobs-x-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--_k-row);padding:0 var(--_k-inset);cursor:pointer;user-select:none;transition:background var(--k-hover-t)}
 .knobs-x-head[data-panned]{cursor:ew-resize}
 .knobs-panel .knobs-x-head:focus-visible{outline:none;box-shadow:none}
-.knobs-x-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-label);font-weight:var(--k-label-weight)}
-.knobs-x-label::after{content:"";display:inline-block;width:4px;height:4px;margin-left:5px;border-radius:50%;background:var(--k-modified);vertical-align:middle;opacity:0;transform:scale(.4);transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
+.knobs-x-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--_k-fg-2);font-weight:var(--_k-weight-label)}
+.knobs-x-label::after{content:"";display:inline-block;width:4px;height:4px;margin-left:5px;border-radius:50%;background:var(--_k-modified);vertical-align:middle;opacity:0;transform:scale(.4);transition:opacity .16s ease-out,transform .28s cubic-bezier(.34,1.5,.64,1)}
 .knobs-modified .knobs-x-label::after{opacity:.95;transform:none}
 .knobs-x-sum{display:flex;align-items:center;gap:8px;min-width:0}
-.knobs-x-read,.knobs-strip-read{color:var(--k-label);font-size:var(--kc-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
+.knobs-x-read,.knobs-strip-read{color:var(--_k-fg-2);font-size:var(--_k-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap}
 /* A name crossfading (reel.ts fadeText): the old one fades out over the new, where it was. */
 .knobs-x-read{position:relative}
 .knobs-ghost{position:absolute;right:0;top:0;white-space:nowrap;pointer-events:none}
-.knobs-caret{width:10px;height:10px;flex:none;margin-right:-2.5px;color:var(--k-dim);transition:transform ${LEAD_T},color .15s}
+.knobs-caret{width:10px;height:10px;flex:none;margin-right:-2.5px;color:var(--_k-fg-3);transition:transform ${LEAD_T},color .15s}
 .knobs-caret path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
-.knobs-x-head:hover .knobs-caret{color:var(--k-label)}
+.knobs-x-head:hover .knobs-caret{color:var(--_k-fg-2)}
 .knobs-x-head[aria-expanded="true"] .knobs-caret{transform:rotate(90deg)}
-.knobs-swatch{flex:none;width:var(--k-track-h);height:var(--k-track-h);border-radius:var(--k-radius-sm);box-shadow:inset 0 0 0 1px var(--k-line);transition:background-color .2s ${DELAY}}
-.knobs-x-body{padding:0 var(--k-inset) var(--k-inset)}
+.knobs-swatch{flex:none;width:var(--k-track-h);height:var(--k-track-h);border-radius:var(--_k-radius-sm);box-shadow:inset 0 0 0 1px var(--_k-border);transition:background-color .2s ${DELAY}}
+.knobs-x-body{padding:0 var(--_k-inset) var(--_k-inset)}
 .knobs-strips{display:grid}
 .knobs-strip{display:grid;grid-template-columns:10px 1fr 36px;align-items:center;gap:8px;height:var(--k-action-h)}
-.knobs-strip-label{color:var(--k-dim);font-size:var(--k-text-cap);font-weight:var(--k-title-weight);text-align:left}
+.knobs-strip-label{color:var(--_k-fg-3);font-size:var(--_k-text-cap);font-weight:var(--_k-weight-title);text-align:left}
 .knobs-strip-read{text-align:right}
-.knobs-strip-track{position:relative;height:var(--k-track-h);border-radius:var(--k-round);box-shadow:inset 0 0 0 1px var(--k-line);cursor:ew-resize;touch-action:none}
-.knobs-strip-thumb{position:absolute;top:50%;left:0;width:calc(var(--k-row) - 12px);height:calc(var(--k-row) - 12px);margin:calc(6px - var(--k-row) / 2);border-radius:var(--k-round);box-shadow:0 0 0 2px var(--k-thumb),0 1px 4px rgba(0,0,0,calc(.4 * var(--k-lift)));pointer-events:none;transition:left ${FILL_T} ${DELAY},background-color .2s ${DELAY},scale .2s var(--k-ease)}
+.knobs-strip-track{position:relative;height:var(--k-track-h);border-radius:var(--_k-round);box-shadow:inset 0 0 0 1px var(--_k-border);cursor:ew-resize;touch-action:none}
+.knobs-strip-thumb{position:absolute;top:50%;left:0;width:calc(var(--_k-row) - 12px);height:calc(var(--_k-row) - 12px);margin:calc(6px - var(--_k-row) / 2);border-radius:var(--_k-round);box-shadow:0 0 0 2px var(--_k-toggle-thumb-off),0 1px 4px rgba(0,0,0,calc(.4 * var(--k-lift)));pointer-events:none;transition:left ${FILL_T} ${DELAY},background-color .2s ${DELAY},scale .2s var(--k-ease)}
 .knobs-strip.knobs-active .knobs-strip-thumb{transition:background-color .2s,scale .2s var(--k-ease)}
 .knobs-strip:is(.knobs-active,:has(:focus-visible)) .knobs-strip-thumb{scale:1.1}
-.knobs-pad,.knobs-ease{position:relative;border-radius:var(--k-radius-md);background:var(--k-seg-bg);touch-action:none}
-.knobs-pad{height:calc(var(--k-row) * 4);cursor:crosshair;overflow:hidden}
+.knobs-pad,.knobs-ease{position:relative;border-radius:var(--_k-radius-md);background:var(--_k-segmented-track);touch-action:none}
+.knobs-pad{height:calc(var(--_k-row) * 4);cursor:crosshair;overflow:hidden}
 .knobs-pad>i{position:absolute;left:0;top:0;pointer-events:none;transition:translate ${FILL_T} ${DELAY},scale .2s var(--k-ease)}
-.knobs-pad-v{bottom:0;width:1px;margin-left:-.5px;background:var(--k-line)}
-.knobs-pad-h{right:0;height:1px;margin-top:-.5px;background:var(--k-line)}
-.knobs-pad .knobs-pad-home{width:7px;height:7px;margin:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--k-dim);transition:none}
-.knobs-pad-puck{width:12px;height:12px;margin:-6px;border-radius:var(--k-round);background:var(--k-accent);box-shadow:0 0 0 1.5px var(--k-bg),0 0 calc(var(--k-glow) * 10px) color-mix(in srgb,var(--k-accent) 50%,transparent)}
+.knobs-pad-v{bottom:0;width:1px;margin-left:-.5px;background:var(--_k-border)}
+.knobs-pad-h{right:0;height:1px;margin-top:-.5px;background:var(--_k-border)}
+.knobs-pad .knobs-pad-home{width:7px;height:7px;margin:-3.5px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--_k-fg-3);transition:none}
+.knobs-pad-puck{width:12px;height:12px;margin:-6px;border-radius:var(--_k-round);background:var(--_k-accent);box-shadow:0 0 0 1.5px var(--_k-bg),0 0 calc(var(--_k-glow) * 10px) color-mix(in srgb,var(--_k-accent) 50%,transparent)}
 .knobs-pad.knobs-active>i{transition:scale .2s var(--k-ease)}
 .knobs-pad:is(.knobs-active,:focus-visible) .knobs-pad-puck{scale:1.2}
-.knobs-ease{height:calc(var(--k-row) * 4.5)}
-.knobs-panel .knobs-ease-handle{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;padding:0;border-radius:var(--k-round);background:var(--k-bg);box-shadow:inset 0 0 0 2px var(--k-accent),0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift)));cursor:grab;touch-action:none;transition:scale .2s var(--k-ease)}
+.knobs-ease{height:calc(var(--_k-row) * 4.5)}
+.knobs-panel .knobs-ease-handle{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px;padding:0;border-radius:var(--_k-round);background:var(--_k-bg);box-shadow:inset 0 0 0 2px var(--_k-accent),0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift)));cursor:grab;touch-action:none;transition:scale .2s var(--k-ease)}
 .knobs-ease-handle::before{content:"";position:absolute;inset:-8px;border-radius:50%}
 /* The row's morph moves the curve, arms and handles each frame (ramp-morph.ts), so they don't
    transition. */
@@ -1256,18 +2679,18 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-ease-handle:active{scale:1.2;cursor:grabbing}
 .knobs-ease-handle:focus-visible{scale:1.2}
 .knobs-ease-mini{flex:none;width:30px;height:var(--k-track-h);overflow:visible}
-.knobs-ease-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--k-tray-pad);margin-top:6px;padding:var(--k-tray-pad);border-radius:var(--k-radius-md);background:var(--k-seg-bg)}
-.knobs-panel .knobs-ease-chip{min-width:0;height:calc(var(--k-row) - 10px);padding:0 6px;font-size:var(--k-text-control);font-weight:var(--k-label-weight);color:var(--k-label);background:transparent;border-radius:var(--k-radius-sm);cursor:pointer;white-space:nowrap;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s}
-.knobs-panel .knobs-ease-chip:is(:hover,:focus-visible){color:var(--k-text)}
-.knobs-panel .knobs-ease-chip[aria-checked="true"]{color:var(--k-text);background:var(--k-pill-bg);box-shadow:var(--k-lift-shadow)}
+.knobs-ease-chips{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--_k-tray-pad);margin-top:6px;padding:var(--_k-tray-pad);border-radius:var(--_k-radius-md);background:var(--_k-segmented-track)}
+.knobs-panel .knobs-ease-chip{min-width:0;height:calc(var(--_k-row) - 10px);padding:0 6px;font-size:var(--_k-text-control);font-weight:var(--_k-weight-label);color:var(--_k-fg-2);background:transparent;border-radius:var(--_k-radius-sm);cursor:pointer;white-space:nowrap;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s}
+.knobs-panel .knobs-ease-chip:is(:hover,:focus-visible){color:var(--_k-fg)}
+.knobs-panel .knobs-ease-chip[aria-checked="true"]{color:var(--_k-fg);background:var(--k-pill-bg);box-shadow:var(--_k-shadow-raised)}
 
 /* Gradients: a swatch strip with stop ticks in the head; a wide strip with a handle per stop (the
    selected one full size), then that stop's colour strips. The ramp runs a handle's radius in from
    each end, as the colour strips' do. */
-.knobs-grad-mini{position:relative;flex:none;width:calc(var(--k-row) * 2.5);height:var(--k-track-h);border-radius:var(--k-radius-sm);box-shadow:inset 0 0 0 1px var(--k-line);background:${GRAD_MINI}}
-.knobs-grad-mini>i{position:absolute;top:calc(100% + 2px);left:0;width:1px;height:3px;margin-left:-.5px;background:var(--k-dim);scale:1 var(--kgs-grow,1);transform-origin:top;transition:opacity .15s}
-.knobs-grad{--kg-h:calc(var(--k-row) - 6px);--kg-r:calc(var(--kg-h) / 2);--kg-pin:round(calc(var(--kg-h) * .42),1px);position:relative;height:var(--kg-h);margin:2px 0 var(--k-gap);border-radius:var(--k-round);box-shadow:inset 0 0 0 1px var(--k-line);background:${GRAD_STRIP};cursor:pointer;touch-action:none;user-select:none;outline:none}
-.knobs-grad-stop{position:absolute;top:50%;left:0;width:var(--kg-pin);height:calc(var(--kg-h) - 4px);margin:calc(2px - var(--kg-h) / 2) 0 0 calc(var(--kg-pin) / -2);border-radius:var(--k-round);box-shadow:0 0 0 2px var(--k-thumb),0 1px 4px rgba(0,0,0,calc(.4 * var(--k-lift)));pointer-events:none;
+.knobs-grad-mini{position:relative;flex:none;width:calc(var(--_k-row) * 2.5);height:var(--k-track-h);border-radius:var(--_k-radius-sm);box-shadow:inset 0 0 0 1px var(--_k-border);background:${GRAD_MINI}}
+.knobs-grad-mini>i{position:absolute;top:calc(100% + 2px);left:0;width:1px;height:3px;margin-left:-.5px;background:var(--_k-fg-3);scale:1 var(--kgs-grow,1);transform-origin:top;transition:opacity .15s}
+.knobs-grad{--kg-h:calc(var(--_k-row) - 6px);--kg-r:calc(var(--kg-h) / 2);--kg-pin:round(calc(var(--kg-h) * .42),1px);position:relative;height:var(--kg-h);margin:2px 0 var(--_k-gap);border-radius:var(--_k-round);box-shadow:inset 0 0 0 1px var(--_k-border);background:${GRAD_STRIP};cursor:pointer;touch-action:none;user-select:none;outline:none}
+.knobs-grad-stop{position:absolute;top:50%;left:0;width:var(--kg-pin);height:calc(var(--kg-h) - 4px);margin:calc(2px - var(--kg-h) / 2) 0 0 calc(var(--kg-pin) / -2);border-radius:var(--_k-round);box-shadow:0 0 0 2px var(--_k-toggle-thumb-off),0 1px 4px rgba(0,0,0,calc(.4 * var(--k-lift)));pointer-events:none;
   --kgs-sel:.78;scale:calc(var(--kgs-sel) * var(--kgs-grow,1));transition:--kgs-sel .2s var(--k-ease),opacity .15s}
 /* The row's morph moves the strip, stops and ticks each frame (ramp-morph.ts), so none transition
    but a stop's focus scale (--kgs-sel); its growth (--kgs-grow) buds it from the strip or merges it
@@ -1286,42 +2709,42 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 /* Curves: a mini curve in the head; a graph with a grid, points (the selected one filled) and a
    hover crosshair whose readout sits in the corner. */
 .knobs-curve-mini{flex:none;width:36px;height:var(--k-track-h);overflow:visible}
-.knobs-graph{position:relative;height:calc(var(--k-row) * 4.5);border-radius:var(--k-radius-md);background:var(--k-seg-bg);cursor:crosshair;touch-action:none;user-select:none;outline:none;overflow:hidden}
+.knobs-graph{position:relative;height:calc(var(--_k-row) * 4.5);border-radius:var(--_k-radius-md);background:var(--_k-segmented-track);cursor:crosshair;touch-action:none;user-select:none;outline:none;overflow:hidden}
 .knobs-panel .knobs-graph>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
 .knobs-graph>i{position:absolute;left:0;top:0;pointer-events:none}
 /* The row's morph places the line and points each frame (ramp-morph.ts), so neither transitions:
    a point's size is its focus scale (--kpt-sel, which does) times its growth (--kpt-grow, budding
    from the line or merging into a neighbour). */
-.knobs-graph-pt{width:10px;height:10px;margin:-5px;border-radius:var(--k-round);background:var(--k-bg);box-shadow:inset 0 0 0 2px var(--k-accent),0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift)));
+.knobs-graph-pt{width:10px;height:10px;margin:-5px;border-radius:var(--_k-round);background:var(--_k-bg);box-shadow:inset 0 0 0 2px var(--_k-accent),0 1px 3px rgba(0,0,0,calc(.3 * var(--k-lift)));
   scale:calc(var(--kpt-sel) * var(--kpt-grow,1));transition:background-color .15s,--kpt-sel .2s var(--k-ease),opacity .15s}
-.knobs-graph-pt[data-selected]{background:var(--k-accent)}
+.knobs-graph-pt[data-selected]{background:var(--_k-accent)}
 .knobs-graph:is(:focus-visible,.knobs-active) .knobs-graph-pt[data-selected]{--kpt-sel:1.2}
 .knobs-graph-pt[data-leaving]{opacity:.35;--kpt-sel:.7}
 .knobs-graph .knobs-curve,.knobs-curve-mini .knobs-curve{transition:none}
 .knobs-graph :is(.knobs-graph-v,.knobs-graph-h,.knobs-graph-dot,.knobs-graph-read){opacity:0;transition:opacity .15s}
 .knobs-graph[data-hover] :is(.knobs-graph-v,.knobs-graph-h,.knobs-graph-dot,.knobs-graph-read){opacity:1}
-.knobs-graph-v{bottom:0;width:1px;margin-left:-.5px;background:var(--k-line-hi)}
-.knobs-graph-h{right:0;height:1px;margin-top:-.5px;background:var(--k-line-hi)}
-.knobs-graph-dot{width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--k-accent)}
-.knobs-graph-read{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:var(--k-radius-sm);background:var(--k-bg);color:var(--k-label);font-family:var(--k-value-font);font-size:var(--kc-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none}
+.knobs-graph-v{bottom:0;width:1px;margin-left:-.5px;background:var(--_k-border-strong)}
+.knobs-graph-h{right:0;height:1px;margin-top:-.5px;background:var(--_k-border-strong)}
+.knobs-graph-dot{width:5px;height:5px;margin:-2.5px;border-radius:50%;background:var(--_k-accent)}
+.knobs-graph-read{position:absolute;top:4px;right:4px;padding:1px 5px;border-radius:var(--_k-radius-sm);background:var(--_k-bg);color:var(--_k-fg-2);font-family:var(--_k-value-font);font-size:var(--_k-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";white-space:nowrap;pointer-events:none}
 .knobs-mixed :is(.knobs-curve-mini,.knobs-graph .knobs-curve,.knobs-graph-pt){opacity:0}
 
 /* Rows as separate bars (--k-row-gap above 0): each row carries its own surface, no hairlines.
    A spring stacks its curve over its two sliders. */
 .knobs-panel[data-rows] .knobs-card{display:flex;flex-direction:column;gap:var(--k-row-gap);background:transparent;overflow:visible}
-.knobs-panel[data-rows] .knobs-card>*{background:var(--k-surface);border-radius:var(--k-radius);overflow:hidden;--k-rt:1;--k-rb:1}
-.knobs-panel[data-rows] .knobs-card>:is(:hover,.knobs-active){background:color-mix(in srgb,var(--k-surface-hi) 50%,var(--k-surface))}
+.knobs-panel[data-rows] .knobs-card>*{background:var(--_k-fill);border-radius:var(--_k-radius);overflow:hidden;--k-rt:1;--k-rb:1}
+.knobs-panel[data-rows] .knobs-card>:is(:hover,.knobs-active){background:color-mix(in srgb,var(--_k-fill-selected) 50%,var(--_k-fill))}
 .knobs-panel[data-rows] :is(.knobs-card>*,.knobs-sub)::before{display:none}
 .knobs-panel[data-rows] .knobs-card>.knobs-subhead{background:transparent}
 .knobs-panel[data-rows] .knobs-card>.knobs-spring{flex-direction:column-reverse;gap:var(--k-row-gap);background:transparent;overflow:visible}
 .knobs-panel[data-rows] .knobs-spring-tracks{display:flex;flex-direction:column;gap:var(--k-row-gap);overflow:visible}
-.knobs-panel[data-rows] .knobs-sub{background:var(--k-surface);border-radius:var(--k-radius);overflow:hidden}
-.knobs-panel[data-rows] .knobs-sub:is(:hover,.knobs-active){background:color-mix(in srgb,var(--k-surface-hi) 50%,var(--k-surface))}
-.knobs-panel[data-rows] .knobs-spring-curve{width:auto;height:calc(var(--k-row) * 2.8);margin:0;border-radius:var(--k-radius);background:var(--k-surface)}
+.knobs-panel[data-rows] .knobs-sub{background:var(--_k-fill);border-radius:var(--_k-radius);overflow:hidden}
+.knobs-panel[data-rows] .knobs-sub:is(:hover,.knobs-active){background:color-mix(in srgb,var(--_k-fill-selected) 50%,var(--_k-fill))}
+.knobs-panel[data-rows] .knobs-spring-curve{width:auto;height:calc(var(--_k-row) * 2.8);margin:0;border-radius:var(--_k-radius);background:var(--_k-fill)}
 /* --k-frame: flat. Groups are plain sections: no card surfaces, rows split by hairlines and a
    hairline over every group's label but the first. An inline panel sheds its own card and
    padding too, for a host's column or card, so nothing draws a card inside a card. */
-:where(.knobs-panel)[data-frame="flat"]{--k-group-divider:var(--k-line);--k-group-divider-gap:var(--k-gap)}
+:where(.knobs-panel)[data-frame="flat"]{--k-group-divider:var(--_k-border);--k-group-divider-gap:var(--_k-gap)}
 :where(.knobs-panel.knobs-inline:not(.knobs-page))[data-frame="flat"]{--k-chrome:0;--k-pad:0px}
 .knobs-panel[data-frame="flat"] .knobs-card{background:transparent;border-radius:0}
 .knobs-panel[data-frame="flat"][data-rows] .knobs-card>*,.knobs-panel[data-frame="flat"][data-rows] .knobs-sub{background:transparent;border-radius:0}
@@ -1335,9 +2758,9 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-slider:is([data-disabled],[data-readonly]):hover:not(:has(:focus-visible)) :is(.knobs-handle,.knobs-marks>i){opacity:var(--k-handle-rest);background-color:transparent}
 .knobs-slider:is([data-disabled],[data-readonly]):hover:not(:has(:focus-visible)) .knobs-handle::before{transform:scaleX(calc(.25 + .75 * min(1, var(--k-handle-rest) * 4)))}
 .knobs-panel :is([data-disabled],[data-readonly]) .knobs-value:hover{border-bottom-color:transparent}
-.knobs-panel :is([data-disabled],[data-readonly]) .knobs-seg button:not([aria-checked=true]):hover{color:var(--k-label)}
-.knobs-panel :is([data-disabled],[data-readonly]) .knobs-action:hover:not(:focus-visible){color:var(--k-text)}
-.knobs-panel :is([data-disabled],[data-readonly]) .knobs-select:hover:not(:focus-visible){background:var(--k-seg-bg);color:var(--k-label)}
+.knobs-panel :is([data-disabled],[data-readonly]) .knobs-seg button:not([aria-checked=true]):hover{color:var(--_k-fg-2)}
+.knobs-panel :is([data-disabled],[data-readonly]) .knobs-action:hover:not(:focus-visible){color:var(--_k-fg)}
+.knobs-panel :is([data-disabled],[data-readonly]) .knobs-select:hover:not(:focus-visible){background:var(--_k-segmented-track);color:var(--_k-fg-2)}
 /* A mixed value (a multi-selection whose items differ) reads "—" until it's edited. */
 .knobs-mixed :is(.knobs-fill,.knobs-handle-zone,.knobs-marks){opacity:0}
 .knobs-panel .knobs-mixed .knobs-value>:is(.knobs-digits,.knobs-unit,.knobs-lock){display:none}
@@ -1346,63 +2769,63 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-panel .knobs-toggle[aria-checked="mixed"] i{left:calc(50% - 7px);right:calc(50% - 7px)}
 
 /* Tabs: text over a hairline; the chosen one's underline slides to it, its leading edge first. */
-.knobs-tabs{position:relative;display:flex;align-items:stretch;gap:calc(var(--k-unit) * 4);margin:0 0 var(--k-section-gap);padding:0 var(--k-inset);overflow:hidden;transition:opacity .2s var(--k-ease)}
-.knobs-tabs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;transform:scaleY(.5);transform-origin:bottom;background:var(--k-line);pointer-events:none}
-.knobs-panel .knobs-tab{flex:none;height:calc(var(--k-row) - var(--k-unit));padding:0;background:transparent;border-radius:0;font-size:var(--k-text-control);font-weight:var(--k-label-weight);color:var(--k-label);white-space:nowrap;cursor:pointer;transition:color .15s}
-.knobs-panel .knobs-tab:is(:hover,:focus-visible),.knobs-panel .knobs-tab[aria-selected="true"]{color:var(--k-text)}
-.knobs-tabs-bar{position:absolute;bottom:0;left:0;right:100%;height:1.5px;border-radius:1px;background:var(--k-accent);pointer-events:none;transition:left ${TRAIL_T},right ${LEAD_T}}
+.knobs-tabs{position:relative;display:flex;align-items:stretch;gap:calc(var(--_k-unit) * 4);margin:0 0 var(--k-section-gap);padding:0 var(--_k-inset);overflow:hidden;transition:opacity .2s var(--k-ease)}
+.knobs-tabs::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;transform:scaleY(.5);transform-origin:bottom;background:var(--_k-border);pointer-events:none}
+.knobs-panel .knobs-tab{flex:none;height:calc(var(--_k-row) - var(--_k-unit));padding:0;background:transparent;border-radius:0;font-size:var(--_k-text-control);font-weight:var(--_k-weight-label);color:var(--_k-fg-2);white-space:nowrap;cursor:pointer;transition:color .15s}
+.knobs-panel .knobs-tab:is(:hover,:focus-visible),.knobs-panel .knobs-tab[aria-selected="true"]{color:var(--_k-fg)}
+.knobs-tabs-bar{position:absolute;bottom:0;left:0;right:100%;height:1.5px;border-radius:1px;background:var(--_k-accent);pointer-events:none;transition:left ${TRAIL_T},right ${LEAD_T}}
 .knobs-tabs-bar[data-dir="left"]{transition:left ${LEAD_T},right ${TRAIL_T}}
 /* A search spans every tab, so the strip steps back while it's on. */
 .knobs-panel[data-searching] .knobs-tabs{opacity:.4}
 
 /* Search: a field and its filter chips. Matches show in labels by colour alone. */
-.knobs-search{display:flex;align-items:center;gap:var(--k-tray-pad);margin:0 0 var(--k-section-gap)}
-.knobs-search-field{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:var(--kc-control-h);padding:0 8px;background:var(--k-seg-bg);border-radius:var(--k-radius-md);color:var(--k-dim);cursor:text}
+.knobs-search{display:flex;align-items:center;gap:var(--_k-tray-pad);margin:0 0 var(--k-section-gap)}
+.knobs-search-field{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:var(--_k-control-h);padding:0 8px;background:var(--_k-segmented-track);border-radius:var(--_k-radius-md);color:var(--_k-fg-3);cursor:text}
 .knobs-search-field>.knobs-icon{width:calc(var(--k-icon-sm) - 2px);height:calc(var(--k-icon-sm) - 2px)}
-.knobs-panel .knobs-search input{flex:1;min-width:0;height:100%;padding:0;background:transparent;border-radius:0;color:var(--k-text);font-size:var(--k-text-control);-webkit-appearance:none;appearance:none}
-.knobs-panel .knobs-search input::placeholder{color:var(--k-dim)}
+.knobs-panel .knobs-search input{flex:1;min-width:0;height:100%;padding:0;background:transparent;border-radius:0;color:var(--_k-fg);font-size:var(--_k-text-control);-webkit-appearance:none;appearance:none}
+.knobs-panel .knobs-search input::placeholder{color:var(--_k-fg-3)}
 .knobs-panel .knobs-search input::-webkit-search-cancel-button{display:none}
-.knobs-panel .knobs-search-chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--kc-control-h);padding:0 8px;background:transparent;border-radius:var(--k-radius-md);box-shadow:inset 0 0 0 1px var(--k-line);color:var(--k-label);font-size:var(--k-text-meta);font-weight:var(--k-label-weight);white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s,opacity .15s}
-.knobs-panel .knobs-search-chip:is(:hover,:focus-visible){color:var(--k-text);box-shadow:inset 0 0 0 1px var(--k-line-hi)}
-.knobs-panel .knobs-search-chip[aria-pressed="true"]{background:var(--k-pill-bg);box-shadow:inset 0 0 0 1px var(--k-pill-border);color:var(--k-text)}
+.knobs-panel .knobs-search-chip{flex:none;display:inline-flex;align-items:center;gap:5px;height:var(--_k-control-h);padding:0 8px;background:transparent;border-radius:var(--_k-radius-md);box-shadow:inset 0 0 0 1px var(--_k-border);color:var(--_k-fg-2);font-size:var(--_k-text-meta);font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s,opacity .15s}
+.knobs-panel .knobs-search-chip:is(:hover,:focus-visible){color:var(--_k-fg);box-shadow:inset 0 0 0 1px var(--_k-border-strong)}
+.knobs-panel .knobs-search-chip[aria-pressed="true"]{background:var(--k-pill-bg);box-shadow:inset 0 0 0 1px var(--k-pill-border);color:var(--_k-fg)}
 .knobs-panel .knobs-search-chip[data-none]{opacity:.5}
-.knobs-search-count{color:var(--k-dim);font-variant-numeric:tabular-nums}
-.knobs-search-chip[aria-pressed="true"] .knobs-search-count{color:var(--k-label)}
-.knobs-panel mark.knobs-match{background:none;color:var(--k-accent)}
+.knobs-search-count{color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
+.knobs-search-chip[aria-pressed="true"] .knobs-search-count{color:var(--_k-fg-2)}
+.knobs-panel mark.knobs-match{background:none;color:var(--_k-accent)}
 .knobs-panel[data-gpu-active="true"] .knobs-search{position:relative;z-index:2147480003}
 
 /* Sub-headings: a flat heading inside the group's card, split off by the card's hairline. */
-.knobs-panel .knobs-card>.knobs-subhead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:0;height:calc(var(--k-row) - var(--k-unit) * 2);padding:0 var(--k-inset);color:var(--k-label);font-size:var(--k-text-meta);font-weight:var(--k-title-weight);cursor:pointer;user-select:none}
+.knobs-panel .knobs-card>.knobs-subhead{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:0;height:calc(var(--_k-row) - var(--_k-unit) * 2);padding:0 var(--_k-inset);color:var(--_k-fg-2);font-size:var(--_k-text-meta);font-weight:var(--_k-weight-title);cursor:pointer;user-select:none}
 .knobs-subhead-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .knobs-subhead[aria-expanded="true"] .knobs-caret{transform:rotate(90deg)}
-.knobs-subhead:hover .knobs-caret{color:var(--k-label)}
+.knobs-subhead:hover .knobs-caret{color:var(--_k-fg-2)}
 .knobs-card>.knobs-subhead:focus-visible::after{opacity:1}
 
 /* Inspector rows: number cells, ranges, dials, seeds and key combinations. */
 .knobs-panel .knobs-insp{gap:8px}
 .knobs-panel .knobs-insp[data-kind="vec"]>span:first-child{flex-shrink:0;max-width:34%}
-.knobs-cells{flex:0 1 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--k-tray-pad);width:calc(var(--k-row) * 5);max-width:64%}
-.knobs-cells[data-wide]{width:calc(var(--k-row) * 7.5);max-width:72%}
-.knobs-cell{position:relative;display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0;height:var(--kc-control-h);padding:0 5px;border-radius:var(--k-radius-md);background:var(--k-seg-bg);cursor:ew-resize;user-select:none;touch-action:none;outline:none;transition:background var(--k-hover-t)}
-.knobs-cell:hover,.knobs-cell:focus-visible{background:color-mix(in srgb,var(--k-surface-hi) 70%,var(--k-seg-bg))}
-.knobs-active .knobs-cell:focus,.knobs-cell[data-panned]{background:var(--k-surface-hi)}
-.knobs-cell-axis{flex:none;font-style:normal;font-size:var(--k-text-cap);font-weight:var(--k-title-weight);color:var(--k-dim)}
-.knobs-cell-read,.knobs-range-read,.knobs-angle-read,.knobs-seed-read{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-label);font-family:var(--k-value-font);font-size:var(--kc-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
-.knobs-cell:focus-visible .knobs-cell-read,.knobs-active .knobs-cell:focus .knobs-cell-read,.knobs-cell[data-panned] .knobs-cell-read{color:var(--k-text)}
-.knobs-panel .knobs-link{flex:none;width:20px;height:20px;margin:0 -4px 0 auto;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--k-round);color:var(--k-dim);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
-.knobs-panel .knobs-link:hover{background:var(--k-surface-hi);color:var(--k-text)}
-.knobs-panel .knobs-link[aria-pressed="true"]{color:var(--k-text)}
+.knobs-cells{flex:0 1 auto;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--_k-tray-pad);width:calc(var(--_k-row) * 5);max-width:64%}
+.knobs-cells[data-wide]{width:calc(var(--_k-row) * 7.5);max-width:72%}
+.knobs-cell{position:relative;display:flex;align-items:center;justify-content:space-between;gap:3px;min-width:0;height:var(--_k-control-h);padding:0 5px;border-radius:var(--_k-radius-md);background:var(--_k-segmented-track);cursor:ew-resize;user-select:none;touch-action:none;outline:none;transition:background var(--k-hover-t)}
+.knobs-cell:hover,.knobs-cell:focus-visible{background:color-mix(in srgb,var(--_k-fill-selected) 70%,var(--_k-segmented-track))}
+.knobs-active .knobs-cell:focus,.knobs-cell[data-panned]{background:var(--_k-fill-selected)}
+.knobs-cell-axis{flex:none;font-style:normal;font-size:var(--_k-text-cap);font-weight:var(--_k-weight-title);color:var(--_k-fg-3)}
+.knobs-cell-read,.knobs-range-read,.knobs-angle-read,.knobs-seed-read{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--_k-fg-2);font-family:var(--_k-value-font);font-size:var(--_k-value-size);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
+.knobs-cell:focus-visible .knobs-cell-read,.knobs-active .knobs-cell:focus .knobs-cell-read,.knobs-cell[data-panned] .knobs-cell-read{color:var(--_k-fg)}
+.knobs-panel .knobs-link{flex:none;width:20px;height:20px;margin:0 -4px 0 auto;padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--_k-round);color:var(--_k-fg-3);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
+.knobs-panel .knobs-link:hover{background:var(--_k-fill-selected);color:var(--_k-fg)}
+.knobs-panel .knobs-link[aria-pressed="true"]{color:var(--_k-fg)}
 .knobs-link .knobs-icon{width:var(--k-icon-sm);height:var(--k-icon-sm)}
 /* The inline editor over a readout: above the GPU canvas, which leaves that readout to it. */
-.knobs-panel .knobs-cell-edit{position:absolute;z-index:3;right:calc(var(--k-inset) - 6px);top:50%;transform:translateY(-50%);width:calc(7ch + 12px);height:var(--kc-control-h);padding:0 6px;text-align:right;background:linear-gradient(var(--k-surface-hi),var(--k-surface-hi)),var(--k-bg);border:0;border-radius:var(--k-radius-md);outline:none;color:var(--k-text);caret-color:var(--k-accent);font-family:var(--k-value-font);font-variant-numeric:tabular-nums;font-size:var(--kc-value-size);animation:knobs-fade .12s ease-out}
+.knobs-panel .knobs-cell-edit{position:absolute;z-index:3;right:calc(var(--_k-inset) - 6px);top:50%;transform:translateY(-50%);width:calc(7ch + 12px);height:var(--_k-control-h);padding:0 6px;text-align:right;background:linear-gradient(var(--_k-fill-selected),var(--_k-fill-selected)),var(--_k-bg);border:0;border-radius:var(--_k-radius-md);outline:none;color:var(--_k-fg);caret-color:var(--_k-accent);font-family:var(--_k-value-font);font-variant-numeric:tabular-nums;font-size:var(--_k-value-size);animation:knobs-fade .12s ease-out}
 .knobs-cell.knobs-editing>:not(.knobs-cell-edit){visibility:hidden}
 .knobs-panel .knobs-cell>.knobs-cell-edit{inset:0;width:auto;height:auto;transform:none}
 .knobs-panel[data-gpu-active="true"] .knobs-cell-edit{z-index:2147480003}
 
-.knobs-panel .knobs-row.knobs-range{display:block;height:var(--k-row);padding:0}
-.knobs-range-track{position:absolute;inset:0;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:none;transition:--kr-lo ${FILL_T} ${DELAY},--kr-hi ${FILL_T} ${DELAY};--kr-tint:var(--k-fill-rest)}
+.knobs-panel .knobs-row.knobs-range{display:block;height:var(--_k-row);padding:0}
+.knobs-range-track{position:absolute;inset:0;overflow:hidden;cursor:ew-resize;user-select:none;touch-action:none;transition:--kr-lo ${FILL_T} ${DELAY},--kr-hi ${FILL_T} ${DELAY};--kr-tint:var(--_k-slider-fill)}
 .knobs-range-fill{position:absolute;inset:0;transform-origin:0 0;transform:scaleX(0);background:var(--kr-tint);pointer-events:none;transition:transform ${FILL_T} ${DELAY},background .15s}
-.knobs-range:hover .knobs-range-track{--kr-tint:color-mix(in srgb,var(--k-accent) var(--k-fill-hover-mix),var(--k-fill-base))}
+.knobs-range:hover .knobs-range-track{--kr-tint:color-mix(in srgb,var(--_k-accent) var(--_k-fill-hover-mix),var(--_k-fill-base))}
 .knobs-range.knobs-active .knobs-range-track{--kr-tint:var(--k-fill-active)}
 /* --k-range-blur: while the ends glide, the band is a gradient in the track's space whose ends ramp
    over their smears (--kr-smear-lo/hi, px; see inspector.ts), standing in for the scaled fill. */
@@ -1421,41 +2844,41 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-range:not(.knobs-mixed):hover .knobs-range-text{--kr-show-lo:1;--kr-show-hi:1}
 .knobs-range:not(.knobs-mixed)[data-end-focus="lo"]:is([data-k-fv],.knobs-active) .knobs-range-text{--kr-show-lo:1}
 .knobs-range:not(.knobs-mixed)[data-end-focus="hi"]:is([data-k-fv],.knobs-active) .knobs-range-text{--kr-show-hi:1}
-.knobs-range-thumb::before{content:"";position:absolute;left:0;top:50%;width:3px;height:calc(var(--k-row) - 12px);margin-top:calc(6px - var(--k-row) / 2);translate:-50% 0;border-radius:var(--k-round);background:var(--k-handle);opacity:0;scale:.25 1;transition:opacity .15s,scale .22s var(--k-ease)}
+.knobs-range-thumb::before{content:"";position:absolute;left:0;top:50%;width:3px;height:calc(var(--_k-row) - 12px);margin-top:calc(6px - var(--_k-row) / 2);translate:-50% 0;border-radius:var(--_k-round);background:var(--_k-slider-handle);opacity:0;scale:.25 1;transition:opacity .15s,scale .22s var(--k-ease)}
 .knobs-range:hover .knobs-range-thumb::before{opacity:.5}
 .knobs-range-thumb:focus-visible::before,.knobs-range.knobs-active .knobs-range-thumb:focus::before{opacity:.95;scale:1}
-.knobs-range .knobs-label{max-width:calc(55% - var(--k-inset))}
-.knobs-range-read{position:absolute;right:var(--k-inset);top:50%;transform:translateY(-50%);pointer-events:none}
-.knobs-range.knobs-active .knobs-range-read,.knobs-range:has(:focus-visible) .knobs-range-read{color:var(--k-text)}
-.knobs-range.knobs-modified .knobs-range-read{color:color-mix(in srgb,var(--k-modified) calc(var(--k-readout-mark) * 100%),var(--k-label))}
+.knobs-range .knobs-label{max-width:calc(55% - var(--_k-inset))}
+.knobs-range-read{position:absolute;right:var(--_k-inset);top:50%;transform:translateY(-50%);pointer-events:none}
+.knobs-range.knobs-active .knobs-range-read,.knobs-range:has(:focus-visible) .knobs-range-read{color:var(--_k-fg)}
+.knobs-range.knobs-modified .knobs-range-read{color:color-mix(in srgb,var(--_k-modified) calc(var(--k-readout-mark) * 100%),var(--_k-fg-2))}
 .knobs-range.knobs-editing .knobs-range-read{opacity:0}
 
-.knobs-angle{display:inline-flex;align-items:center;gap:8px;height:var(--kc-control-h);margin-left:auto;cursor:ew-resize;user-select:none;touch-action:none;outline:none}
-.knobs-angle:focus-visible .knobs-angle-read,.knobs-active .knobs-angle-read{color:var(--k-text)}
-.knobs-dial{position:relative;flex:none;width:var(--kc-control-h);height:var(--kc-control-h);border-radius:50%;background:var(--k-seg-bg);box-shadow:inset 0 0 0 1px var(--k-line);cursor:grab;transition:box-shadow .15s}
-.knobs-angle:is(:hover,:focus-visible) .knobs-dial,.knobs-active .knobs-dial{box-shadow:inset 0 0 0 1px var(--k-line-hi)}
+.knobs-angle{display:inline-flex;align-items:center;gap:8px;height:var(--_k-control-h);margin-left:auto;cursor:ew-resize;user-select:none;touch-action:none;outline:none}
+.knobs-angle:focus-visible .knobs-angle-read,.knobs-active .knobs-angle-read{color:var(--_k-fg)}
+.knobs-dial{position:relative;flex:none;width:var(--_k-control-h);height:var(--_k-control-h);border-radius:50%;background:var(--_k-segmented-track);box-shadow:inset 0 0 0 1px var(--_k-border);cursor:grab;transition:box-shadow .15s}
+.knobs-angle:is(:hover,:focus-visible) .knobs-dial,.knobs-active .knobs-dial{box-shadow:inset 0 0 0 1px var(--_k-border-strong)}
 .knobs-active .knobs-dial{cursor:grabbing}
-.knobs-dial::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--k-accent)}
-.knobs-dial-hand{position:absolute;left:50%;top:18%;bottom:50%;width:1.5px;margin-left:-.75px;border-radius:1px;background:var(--k-accent);transform-origin:50% 100%;transition:rotate ${FILL_T} ${DELAY}}
+.knobs-dial::after{content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;margin:-1.5px;border-radius:50%;background:var(--_k-accent)}
+.knobs-dial-hand{position:absolute;left:50%;top:18%;bottom:50%;width:1.5px;margin-left:-.75px;border-radius:1px;background:var(--_k-accent);transform-origin:50% 100%;transition:rotate ${FILL_T} ${DELAY}}
 .knobs-active .knobs-dial-hand{transition:none}
 .knobs-insp.knobs-editing .knobs-angle-read,.knobs-insp.knobs-editing .knobs-seed-read{opacity:0}
 
 .knobs-panel .knobs-insp[data-kind="seed"]{gap:2px}
-.knobs-seed{display:inline-flex;align-items:center;height:var(--kc-control-h);margin-left:auto;padding:0 4px;border-radius:var(--k-radius-sm);cursor:text;outline:none}
-.knobs-seed:focus-visible .knobs-seed-read,.knobs-active>.knobs-seed .knobs-seed-read{color:var(--k-text)}
+.knobs-seed{display:inline-flex;align-items:center;height:var(--_k-control-h);margin-left:auto;padding:0 4px;border-radius:var(--_k-radius-sm);cursor:text;outline:none}
+.knobs-seed:focus-visible .knobs-seed-read,.knobs-active>.knobs-seed .knobs-seed-read{color:var(--_k-fg)}
 .knobs-seed-digits{display:inline-flex;align-items:center;line-height:2.1;margin-block:-.375em;--rn-edge-fade:.5em}
 .knobs-seed-read{display:inline-flex;align-items:center}
 .knobs-seed-read[data-mixed]::before{content:"—"}
 .knobs-seed-read[data-mixed]>.knobs-seed-digits{display:none}
-.knobs-panel .knobs-seed-roll{flex:none;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--k-round);color:var(--k-dim);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
-.knobs-panel .knobs-seed-roll:hover{background:var(--k-surface-hi);color:var(--k-text)}
+.knobs-panel .knobs-seed-roll{flex:none;width:var(--k-icon-btn);height:var(--k-icon-btn);padding:0;display:inline-flex;align-items:center;justify-content:center;background:transparent;border-radius:var(--_k-round);color:var(--_k-fg-3);cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
+.knobs-panel .knobs-seed-roll:hover{background:var(--_k-fill-selected);color:var(--_k-fg)}
 .knobs-seed-roll .knobs-die-icon{width:var(--k-icon-sm);height:var(--k-icon-sm)}
 
-.knobs-panel .knobs-keys{flex:none;display:inline-flex;align-items:center;justify-content:center;max-width:62%;height:var(--kc-control-h);padding:0 8px;overflow:hidden;background:var(--k-seg-bg);border-radius:var(--k-radius-md);color:var(--k-text);font-family:inherit;font-weight:inherit;font-size:var(--kc-value-size);letter-spacing:.08em;white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
-.knobs-panel .knobs-keys:is(:hover,:focus-visible){background:color-mix(in srgb,var(--k-surface-hi) 70%,var(--k-seg-bg))}
-.knobs-panel .knobs-keys[data-empty]{color:var(--k-dim);letter-spacing:0}
+.knobs-panel .knobs-keys{flex:none;display:inline-flex;align-items:center;justify-content:center;max-width:62%;height:var(--_k-control-h);padding:0 8px;overflow:hidden;background:var(--_k-segmented-track);border-radius:var(--_k-radius-md);color:var(--_k-fg);font-family:inherit;font-weight:inherit;font-size:var(--_k-value-size);letter-spacing:.08em;white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t)}
+.knobs-panel .knobs-keys:is(:hover,:focus-visible){background:color-mix(in srgb,var(--_k-fill-selected) 70%,var(--_k-segmented-track))}
+.knobs-panel .knobs-keys[data-empty]{color:var(--_k-fg-3);letter-spacing:0}
 /* Listening: a soft accent wash, no ring, and the text breathing in "Type keys…" (keyCap). */
-.knobs-panel .knobs-keys[aria-pressed="true"]{background:var(--k-pill-bg);color:var(--k-label)}
+.knobs-panel .knobs-keys[aria-pressed="true"]{background:var(--k-pill-bg);color:var(--_k-fg-2)}
 .knobs-keys[aria-pressed="true"] .knobs-keys-text{animation:knobs-breathe 1.6s ease-in-out infinite}
 @keyframes knobs-breathe{50%{opacity:.55}}
 .knobs-keys-text{min-width:0;overflow:hidden;text-overflow:ellipsis}
@@ -1466,35 +2889,35 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 /* Toolbars: icon, label and shortcut per button, in equal columns balanced across their rows
    (inspector.ts sets --k-tool-cols); one gap between them and around them. Buttons take the
    button tokens. */
-.knobs-panel .knobs-row.knobs-toolbar{--k-tool-gap:max(4px,calc((var(--k-row) - var(--k-button-h,var(--kc-control-h))) / 2));display:grid;grid-template-columns:repeat(var(--k-tool-cols,1),minmax(0,1fr));gap:var(--k-tool-gap);height:auto;min-height:var(--k-row);padding:var(--k-tool-gap) var(--k-inset)}
+.knobs-panel .knobs-row.knobs-toolbar{--k-tool-gap:max(4px,calc((var(--_k-row) - var(--k-button-h,var(--_k-control-h))) / 2));display:grid;grid-template-columns:repeat(var(--k-tool-cols,1),minmax(0,1fr));gap:var(--k-tool-gap);height:auto;min-height:var(--_k-row);padding:var(--k-tool-gap) var(--_k-inset)}
 .knobs-card>.knobs-toolbar:hover{background:transparent}
 .knobs-card>.knobs-toolbar:has(:focus-visible)::after{opacity:0}
-.knobs-panel .knobs-tool{display:flex;align-items:center;gap:6px;min-width:0;height:var(--k-button-h,var(--kc-control-h));padding:0 8px;background:var(--k-button-bg,var(--k-seg-bg));border-radius:var(--k-button-radius,var(--k-radius-md));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);
-  color:var(--k-button-color,var(--k-label));font-size:var(--k-button-font-size,var(--k-text-control));font-weight:var(--k-label-weight);white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color .15s,box-shadow .15s,scale .12s var(--k-ease),opacity .15s}
-.knobs-panel .knobs-tool:is(:hover:not([disabled]),:focus-visible){background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--k-text)}
+.knobs-panel .knobs-tool{display:flex;align-items:center;gap:6px;min-width:0;height:var(--k-button-h,var(--_k-control-h));padding:0 8px;background:var(--k-button-bg,var(--_k-segmented-track));border-radius:var(--k-button-radius,var(--_k-radius-md));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);
+  color:var(--k-button-color,var(--_k-fg-2));font-size:var(--k-button-font-size,var(--_k-text-control));font-weight:var(--_k-weight-label);white-space:nowrap;cursor:pointer;transition:background var(--k-hover-t),color .15s,box-shadow .15s,scale .12s var(--k-ease),opacity .15s}
+.knobs-panel .knobs-tool:is(:hover:not([disabled]),:focus-visible){background:var(--k-button-hover-bg,var(--_k-fill-selected));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--_k-fg)}
 .knobs-panel .knobs-tool:is(:active:not([disabled]),.knobs-pressed){scale:.96}
 .knobs-panel .knobs-tool[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 .knobs-tool .knobs-icon{flex:none;width:var(--k-icon-sm);height:var(--k-icon-sm)}
 .knobs-tool-label{min-width:0;overflow:hidden;text-overflow:ellipsis}
 /* The shortcut sits at the button's end, so a column of buttons lines their chips up. */
-.knobs-panel .knobs-tool-key{flex:none;margin-left:auto;padding-left:4px;font:inherit;font-size:var(--k-text-cap);font-variant-numeric:tabular-nums;color:var(--k-dim);letter-spacing:.06em}
+.knobs-panel .knobs-tool-key{flex:none;margin-left:auto;padding-left:4px;font:inherit;font-size:var(--_k-text-cap);font-variant-numeric:tabular-nums;color:var(--_k-fg-3);letter-spacing:.06em}
 .knobs-panel :is([data-disabled],[data-readonly]) :is(.knobs-cell,.knobs-range-track,.knobs-angle,.knobs-dial,.knobs-seed,.knobs-keys,.knobs-tool){cursor:default}
 
 /* Row accessories (rowAccessory): the host's node, just after the label. */
-.knobs-accessory{display:inline-flex;align-items:center;gap:var(--k-tray-pad);flex:none;min-width:0;color:var(--k-label)}
+.knobs-accessory{display:inline-flex;align-items:center;gap:var(--_k-tray-pad);flex:none;min-width:0;color:var(--_k-fg-2)}
 .knobs-accessory:empty{display:none}
 .knobs-panel .knobs-row:where(:not(.knobs-slider,.knobs-x,.knobs-spring))>.knobs-accessory{margin:0 auto 0 -4px}
 .knobs-track>.knobs-accessory{position:absolute;top:0;bottom:0;left:calc(var(--k-label-right,0px) + 4px);z-index:1}
 .knobs-x-head>.knobs-accessory{margin:0 auto 0 -4px}
-.knobs-action-row>.knobs-accessory{position:absolute;top:0;bottom:0;right:var(--k-inset)}
+.knobs-action-row>.knobs-accessory{position:absolute;top:0;bottom:0;right:var(--_k-inset)}
 .knobs-action-row[data-keyed]>.knobs-accessory{position:static}
 
 /* Foldable groups (folded / groupFolded): the header toggles its card. */
 .knobs-panel .knobs-group-head[data-foldable]{cursor:pointer;user-select:none;transition:background var(--k-hover-t)}
-.knobs-panel .knobs-group-head[data-foldable]:focus-visible{background:var(--k-surface)}
+.knobs-panel .knobs-group-head[data-foldable]:focus-visible{background:var(--_k-fill)}
 .knobs-group-head>span:last-child>.knobs-caret{margin:0 5px 0 3px}
 .knobs-group-head[aria-expanded="true"] .knobs-caret{transform:rotate(90deg)}
-.knobs-group-head[data-foldable]:hover .knobs-caret{color:var(--k-label)}
+.knobs-group-head[data-foldable]:hover .knobs-caret{color:var(--_k-fg-2)}
 
 /* A choice row: the label keeps its words and the value takes the rest, truncating at its end
    (the whole value is in the menu and the button's tooltip); choice.ts sets how far the label may
@@ -1513,61 +2936,61 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-hinting .knobs-hint-miss{opacity:var(--k-disabled-opacity);transition:opacity .1s}
 .knobs-hint-layer{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:5;animation:knobs-in .1s var(--k-ease)}
 /* The badges are <kbd>s, so they outrank the scoped reset's (0,1,1). */
-.knobs-panel .knobs-hint{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:15px;padding:0 4px;border-radius:var(--k-radius-sm);background:var(--k-accent);color:var(--k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
-  font:700 var(--k-text-cap)/1 var(--k-mono);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
+.knobs-panel .knobs-hint{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:15px;padding:0 4px;border-radius:var(--_k-radius-sm);background:var(--_k-accent);color:var(--_k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
+  font:700 var(--_k-text-cap)/1 var(--_k-mono);letter-spacing:.04em;text-transform:uppercase;pointer-events:none}
 .knobs-panel .knobs-hint[hidden]{display:none}
 .knobs-hint-typed{opacity:var(--k-hint-typed-opacity)}
 .knobs-hint-rest{opacity:1}
 
 /* A focused row's options: tiny digits in hint mode's look, once focus settles (optkeys.ts). */
 .knobs-optkeys{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:5}
-.knobs-panel .knobs-optkey{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:12px;padding:0 3px;border-radius:var(--k-radius-sm);background:var(--k-accent);color:var(--k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
-  font:700 calc(var(--k-text-cap) * .85)/1 var(--k-mono);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .12s var(--k-ease)}
+.knobs-panel .knobs-optkey{position:absolute;transform:translateY(-50%);display:inline-flex;align-items:center;height:12px;padding:0 3px;border-radius:var(--_k-radius-sm);background:var(--_k-accent);color:var(--_k-bg);box-shadow:0 1px 3px rgba(0,0,0,calc(.35 * var(--k-lift)));
+  font:700 calc(var(--_k-text-cap) * .85)/1 var(--_k-mono);letter-spacing:.04em;pointer-events:none;opacity:0;transition:opacity .12s var(--k-ease)}
 .knobs-panel .knobs-optkey-range{transform:translate(-100%,-50%)}
 .knobs-panel .knobs-optkey[data-shown]{opacity:.85;transition-duration:.15s}
 
 /* Custom actions */
-.knobs-panel .knobs-custom-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--k-gap);margin-top:var(--k-section-gap)}
-.knobs-panel .knobs-custom-actions button{height:var(--k-button-h,var(--k-action-h));min-height:24px;padding:0 8px;font-size:var(--k-button-font-size,var(--k-text-control));font-weight:var(--k-label-weight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--k-button-color,var(--k-label));cursor:pointer;
-  background:var(--k-button-bg,var(--k-surface));border-radius:var(--k-button-radius,var(--k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,transform .12s,box-shadow .15s}
-.knobs-panel .knobs-custom-actions button:is(:hover:not([disabled]),:focus-visible){background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--k-text)}
+.knobs-panel .knobs-custom-actions{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--_k-gap);margin-top:var(--k-section-gap)}
+.knobs-panel .knobs-custom-actions button{height:var(--k-button-h,var(--k-action-h));min-height:24px;padding:0 8px;font-size:var(--k-button-font-size,var(--_k-text-control));font-weight:var(--_k-weight-label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--k-button-color,var(--_k-fg-2));cursor:pointer;
+  background:var(--k-button-bg,var(--_k-fill));border-radius:var(--k-button-radius,var(--_k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);transition:background var(--k-hover-t),color var(--k-hover-t),opacity .15s,transform .12s,box-shadow .15s}
+.knobs-panel .knobs-custom-actions button:is(:hover:not([disabled]),:focus-visible){background:var(--k-button-hover-bg,var(--_k-fill-selected));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--_k-fg)}
 .knobs-panel .knobs-custom-actions button:active:not([disabled]){transform:scale(.97)}
 .knobs-panel .knobs-tile-body>.knobs-custom-actions button[disabled]{opacity:var(--k-disabled-opacity);cursor:default}
 
 /* Variants Disclosure Drawer */
-.knobs-transfer{display:grid;grid-template-columns:1fr 1fr;gap:var(--k-gap);margin-top:8px;padding-top:8px;border-top:1px solid var(--k-line)}
-.knobs-transfer button{height:var(--k-button-h,24px);padding:0 8px;background:var(--k-button-bg,var(--k-surface));border-radius:var(--k-button-radius,var(--k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);font-size:var(--k-button-font-size,var(--k-text-meta));color:var(--k-button-color,var(--k-label));cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s}
-.knobs-transfer button:is(:hover,:focus-visible){background:var(--k-button-hover-bg,var(--k-surface-hi));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--k-text)}
+.knobs-transfer{display:grid;grid-template-columns:1fr 1fr;gap:var(--_k-gap);margin-top:8px;padding-top:8px;border-top:1px solid var(--_k-border)}
+.knobs-transfer button{height:var(--k-button-h,24px);padding:0 8px;background:var(--k-button-bg,var(--_k-fill));border-radius:var(--k-button-radius,var(--_k-radius));box-shadow:inset 0 0 0 1px var(--k-button-line,transparent);font-size:var(--k-button-font-size,var(--_k-text-meta));color:var(--k-button-color,var(--_k-fg-2));cursor:pointer;transition:background var(--k-hover-t),color var(--k-hover-t),box-shadow .15s}
+.knobs-transfer button:is(:hover,:focus-visible){background:var(--k-button-hover-bg,var(--_k-fill-selected));box-shadow:inset 0 0 0 1px var(--k-button-hover-line,var(--k-button-line,transparent));color:var(--_k-fg)}
 .knobs-sound-pref{grid-template-columns:1fr}
 
 /* Context menu: borrows its panel's tokens (see menu.ts) and floats above everything. */
-.knobs-menu{position:fixed;z-index:2147480004;min-width:176px;padding:var(--k-unit);box-sizing:border-box;font:var(--k-font-weight) var(--k-text-control)/1.35 var(--k-font);color:var(--k-text);text-align:left;-webkit-font-smoothing:antialiased;
-  background:linear-gradient(var(--k-surface-hi),var(--k-surface-hi)),color-mix(in srgb,var(--k-bg) 90%,transparent);border:1px solid var(--k-line);border-radius:var(--k-radius);
-  box-shadow:var(--k-shadow),inset 0 1px 0 var(--k-rim);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);outline:none;user-select:none}
+.knobs-menu{position:fixed;z-index:2147480004;min-width:176px;padding:var(--_k-unit);box-sizing:border-box;font:var(--_k-weight) var(--_k-text-control)/1.35 var(--_k-font);color:var(--_k-fg);text-align:left;-webkit-font-smoothing:antialiased;
+  background:linear-gradient(var(--_k-fill-selected),var(--_k-fill-selected)),color-mix(in srgb,var(--_k-bg) 90%,transparent);border:1px solid var(--_k-border);border-radius:var(--_k-radius);
+  box-shadow:var(--_k-shadow-overlay),inset 0 1px 0 var(--_k-rim);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);outline:none;user-select:none}
 .knobs-menu{max-width:min(480px,calc(100vw - 12px))}
 .knobs-menu-list{max-height:min(360px,calc(100dvh - 120px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
-.knobs-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--kc-control-h);min-height:20px;padding:0 8px;border-radius:var(--k-radius-sm);cursor:default;white-space:nowrap;transition:background .08s}
+.knobs-menu-item{position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;height:var(--_k-control-h);min-height:20px;padding:0 8px;border-radius:var(--_k-radius-sm);cursor:default;white-space:nowrap;transition:background .08s}
 .knobs-menu-item>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .knobs-menu-item[hidden]{display:none}
 /* The match shows by colour, not weight, so a filtered label keeps the width the menu measured. */
-.knobs-menu-item>span[data-marked]{color:var(--k-label)}
-.knobs-menu-item mark{background:none;color:var(--k-text)}
-.knobs-menu .knobs-menu-search{display:block;width:100%;height:var(--kc-control-h);min-height:22px;margin:0 0 var(--k-unit);padding:0 8px;border:0;border-radius:var(--k-radius-sm);background:var(--k-seg-bg);color:var(--k-text);font:inherit;outline:none;-webkit-appearance:none;appearance:none}
-.knobs-menu .knobs-menu-search::placeholder{color:var(--k-dim)}
+.knobs-menu-item>span[data-marked]{color:var(--_k-fg-2)}
+.knobs-menu-item mark{background:none;color:var(--_k-fg)}
+.knobs-menu .knobs-menu-search{display:block;width:100%;height:var(--_k-control-h);min-height:22px;margin:0 0 var(--_k-unit);padding:0 8px;border:0;border-radius:var(--_k-radius-sm);background:var(--_k-segmented-track);color:var(--_k-fg);font:inherit;outline:none;-webkit-appearance:none;appearance:none}
+.knobs-menu .knobs-menu-search::placeholder{color:var(--_k-fg-3)}
 .knobs-menu .knobs-menu-search::-webkit-search-cancel-button{display:none}
 .knobs-menu [hidden]{display:none!important}
-.knobs-menu-empty{padding:0 8px;height:var(--kc-control-h);display:flex;align-items:center;color:var(--k-dim)}
-.knobs-menu-item[data-active]{background:color-mix(in srgb,var(--k-accent) 14%,transparent)}
-.knobs-menu-item[aria-disabled]{opacity:var(--k-disabled-opacity);color:var(--k-label)}
-.knobs-menu-item kbd{font:var(--k-text-cap)/1 var(--k-mono);font-variant-numeric:tabular-nums;color:var(--k-dim);letter-spacing:0}
-.knobs-menu-item[data-separated]{margin-top:calc(var(--k-unit) * 2 + 1px)}
-.knobs-menu-item[data-separated]::before{content:"";position:absolute;left:8px;right:8px;top:calc(var(--k-unit) * -1 - 1px);height:1px;transform:scaleY(.5);background:var(--k-line)}
+.knobs-menu-empty{padding:0 8px;height:var(--_k-control-h);display:flex;align-items:center;color:var(--_k-fg-3)}
+.knobs-menu-item[data-active]{background:color-mix(in srgb,var(--_k-accent) 14%,transparent)}
+.knobs-menu-item[aria-disabled]{opacity:var(--k-disabled-opacity);color:var(--_k-fg-2)}
+.knobs-menu-item kbd{font:var(--_k-text-cap)/1 var(--_k-mono);font-variant-numeric:tabular-nums;color:var(--_k-fg-3);letter-spacing:0}
+.knobs-menu-item[data-separated]{margin-top:calc(var(--_k-unit) * 2 + 1px)}
+.knobs-menu-item[data-separated]::before{content:"";position:absolute;left:8px;right:8px;top:calc(var(--_k-unit) * -1 - 1px);height:1px;transform:scaleY(.5);background:var(--_k-border)}
 
 /* Status & Transfer Textarea */
-.knobs-panel .knobs-status{margin:6px 0 0;padding:0 var(--k-inset);color:var(--k-label);font-size:var(--k-text-meta);overflow-wrap:anywhere}
+.knobs-panel .knobs-status{margin:6px 0 0;padding:0 var(--_k-inset);color:var(--_k-fg-2);font-size:var(--_k-text-meta);overflow-wrap:anywhere}
 
-.knobs-panel textarea{width:100%;min-height:84px;margin-top:6px;padding:6px var(--k-inset);resize:vertical;font:var(--k-text-meta)/1.4 var(--k-mono)}
-.knobs-panel .knobs-apply-btn{width:100%;height:26px;margin-top:var(--k-gap);font-size:var(--k-text-control);font-weight:500;color:var(--k-text);background:var(--k-surface-hi);cursor:pointer}
+.knobs-panel textarea{width:100%;min-height:84px;margin-top:6px;padding:6px var(--_k-inset);resize:vertical;font:var(--_k-text-meta)/1.4 var(--_k-mono)}
+.knobs-panel .knobs-apply-btn{width:100%;height:26px;margin-top:var(--_k-gap);font-size:var(--_k-text-control);font-weight:500;color:var(--_k-fg);background:var(--_k-fill-selected);cursor:pointer}
 
 /* WebGPU Overlay Active Mirror State */
 .knobs-panel[data-gpu-active="true"]{background:transparent!important;border-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
@@ -1606,26 +3029,26 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 /* Page: sections of cards in balanced columns, under a sticky glass header. The page scrolls the
    window, so nothing here may become a scroll container or a containing block for the fixed
    popover and status. Custom cards (.knobs-live) are drawn by the DOM in both renderers. */
-.knobs-panel.knobs-page{width:auto;max-width:none;min-height:100dvh;padding:0 0 calc(var(--k-unit) * 16);border:0;border-radius:0;box-shadow:none;overflow:visible;background:var(--k-page);-webkit-backdrop-filter:none;backdrop-filter:none;
-  --k-page-pad:calc(var(--k-unit) * 8);--k-page-gap:calc(var(--k-unit) * 4)}
-.knobs-panel.knobs-page[data-gpu-active="true"]{background:var(--k-page)!important}
-.knobs-panel.knobs-page>header{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center;gap:var(--k-page-gap);min-height:calc(var(--k-row) + var(--k-unit) * 6);padding:calc(var(--k-unit) * 2.5) var(--k-page-pad);
-  background:color-mix(in srgb,var(--k-page) 84%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid transparent;transition:border-color .2s}
-.knobs-panel.knobs-page>header[data-scrolled]{border-bottom-color:var(--k-line)}
-.knobs-panel.knobs-page>header strong{font-size:calc(var(--k-font-size) + 3px);letter-spacing:-.015em;padding-left:calc(var(--k-pad) + var(--k-inset) + 1px)}
+.knobs-panel.knobs-page{width:auto;max-width:none;min-height:100dvh;padding:0 0 calc(var(--_k-unit) * 16);border:0;border-radius:0;box-shadow:none;overflow:visible;background:var(--_k-bg-page);-webkit-backdrop-filter:none;backdrop-filter:none;
+  --k-page-pad:calc(var(--_k-unit) * 8);--k-page-gap:calc(var(--_k-unit) * 4)}
+.knobs-panel.knobs-page[data-gpu-active="true"]{background:var(--_k-bg-page)!important}
+.knobs-panel.knobs-page>header{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(max-content,1fr);align-items:center;gap:var(--k-page-gap);min-height:calc(var(--_k-row) + var(--_k-unit) * 6);padding:calc(var(--_k-unit) * 2.5) var(--k-page-pad);
+  background:color-mix(in srgb,var(--_k-bg-page) 84%,transparent);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6);border-bottom:1px solid transparent;transition:border-color .2s}
+.knobs-panel.knobs-page>header[data-scrolled]{border-bottom-color:var(--_k-border)}
+.knobs-panel.knobs-page>header strong{font-size:calc(var(--_k-font-size) + 3px);letter-spacing:-.015em;padding-left:calc(var(--_k-pad) + var(--_k-inset) + 1px)}
 .knobs-page>header .knobs-presets{margin:0;min-width:0;max-width:min(640px,46vw)}
 .knobs-page>header .knobs-presets-track{display:flex;flex-wrap:wrap}
 .knobs-page>header .knobs-preset-chip{flex:0 0 var(--k-preset-min,58px)}
 .knobs-page-tools{display:flex;align-items:center;justify-content:flex-end;min-width:0}
-.knobs-page-tools .knobs-head-actions{margin-right:calc((var(--k-icon-size) - var(--k-icon-btn)) / 2 + var(--k-pad) + var(--k-inset) - var(--k-unit))}
-.knobs-panel.knobs-page>header[data-narrow]{grid-template-columns:minmax(0,1fr) auto;row-gap:calc(var(--k-unit) * 2)}
+.knobs-page-tools .knobs-head-actions{margin-right:calc((var(--k-icon-size) - var(--k-icon-btn)) / 2 + var(--_k-pad) + var(--_k-inset) - var(--_k-unit))}
+.knobs-panel.knobs-page>header[data-narrow]{grid-template-columns:minmax(0,1fr) auto;row-gap:calc(var(--_k-unit) * 2)}
 .knobs-panel.knobs-page>header[data-narrow]>strong{grid-area:1/1}
 .knobs-panel.knobs-page>header[data-narrow] .knobs-page-tools{grid-area:1/2}
 .knobs-panel.knobs-page>header[data-narrow] .knobs-presets{grid-area:2/1/3/3;max-width:none}
 .knobs-page>header[data-narrow] .knobs-preset-chip{flex:1 0 var(--k-preset-min,58px)}
 @media(max-width:640px){
-  .knobs-panel.knobs-page{--k-page-pad:calc(var(--k-unit) * 4)}
-  .knobs-panel.knobs-page>header{grid-template-columns:minmax(0,1fr) auto;row-gap:calc(var(--k-unit) * 2)}
+  .knobs-panel.knobs-page{--k-page-pad:calc(var(--_k-unit) * 4)}
+  .knobs-panel.knobs-page>header{grid-template-columns:minmax(0,1fr) auto;row-gap:calc(var(--_k-unit) * 2)}
   .knobs-panel.knobs-page>header>strong{grid-area:1/1}
   .knobs-panel.knobs-page>header .knobs-page-tools{grid-area:1/2}
   .knobs-panel.knobs-page>header .knobs-presets{grid-area:2/1/3/3;max-width:none}
@@ -1633,27 +3056,27 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 }
 /* The jump strip (nav: true): a chip per section along the header's foot, the one in view
    underlined; it scrolls sideways when the chips don't fit. */
-.knobs-page>header>.knobs-nav{grid-column:1/-1;margin:0 calc(var(--k-page-pad) * -1) calc(var(--k-unit) * -2.5);padding:0 calc(var(--k-page-pad) + var(--k-pad) + var(--k-inset) + 1px);gap:calc(var(--k-unit) * 5);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
+.knobs-page>header>.knobs-nav{grid-column:1/-1;margin:0 calc(var(--k-page-pad) * -1) calc(var(--_k-unit) * -2.5);padding:0 calc(var(--k-page-pad) + var(--_k-pad) + var(--_k-inset) + 1px);gap:calc(var(--_k-unit) * 5);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain}
 .knobs-page>header>.knobs-nav::-webkit-scrollbar{display:none}
 .knobs-page>header>.knobs-nav::after{display:none}
-.knobs-panel.knobs-page>header>.knobs-nav .knobs-tab{display:inline-flex;align-items:center;width:auto;height:calc(var(--k-row) + var(--k-unit));padding:0;border-radius:0;font-size:var(--k-text-control);line-height:1.25;color:var(--k-label);background:transparent}
-.knobs-panel.knobs-page>header>.knobs-nav .knobs-tab:is(:hover,:focus-visible,[aria-selected="true"]){color:var(--k-text);background:transparent}
-.knobs-tab-count{margin-left:5px;font-size:var(--k-text-meta);font-weight:500;font-variant-numeric:tabular-nums;color:var(--k-modified)}
-.knobs-panel.knobs-page .knobs-page-tools .knobs-custom-actions{display:flex;gap:var(--k-tray-pad);margin:0 calc(var(--k-unit) * 2) 0 0}
-.knobs-panel.knobs-page .knobs-page-tools .knobs-custom-actions button{height:var(--k-icon-btn);min-height:0;padding:0 8px;background:transparent;border-radius:var(--k-round)}
-.knobs-panel .knobs-filter{width:0;height:var(--kc-control-h);padding:0;margin:0;opacity:0;pointer-events:none;background:var(--k-seg-bg);border-radius:var(--k-radius-md);font-size:var(--k-text-control);color:var(--k-text);-webkit-appearance:none;appearance:none;
+.knobs-panel.knobs-page>header>.knobs-nav .knobs-tab{display:inline-flex;align-items:center;width:auto;height:calc(var(--_k-row) + var(--_k-unit));padding:0;border-radius:0;font-size:var(--_k-text-control);line-height:1.25;color:var(--_k-fg-2);background:transparent}
+.knobs-panel.knobs-page>header>.knobs-nav .knobs-tab:is(:hover,:focus-visible,[aria-selected="true"]){color:var(--_k-fg);background:transparent}
+.knobs-tab-count{margin-left:5px;font-size:var(--_k-text-meta);font-weight:500;font-variant-numeric:tabular-nums;color:var(--_k-modified)}
+.knobs-panel.knobs-page .knobs-page-tools .knobs-custom-actions{display:flex;gap:var(--_k-tray-pad);margin:0 calc(var(--_k-unit) * 2) 0 0}
+.knobs-panel.knobs-page .knobs-page-tools .knobs-custom-actions button{height:var(--k-icon-btn);min-height:0;padding:0 8px;background:transparent;border-radius:var(--_k-round)}
+.knobs-panel .knobs-filter{width:0;height:var(--_k-control-h);padding:0;margin:0;opacity:0;pointer-events:none;background:var(--_k-segmented-track);border-radius:var(--_k-radius-md);font-size:var(--_k-text-control);color:var(--_k-fg);-webkit-appearance:none;appearance:none;
   transition:width ${LEAD_T},padding ${LEAD_T},margin ${LEAD_T},opacity .18s}
 .knobs-panel .knobs-filter::-webkit-search-cancel-button{display:none}
-.knobs-panel .knobs-filter::placeholder{color:var(--k-dim)}
-.knobs-panel .knobs-filter[data-open]{width:min(200px,22vw);padding:0 10px;margin-right:calc(var(--k-unit) * 2);opacity:1;pointer-events:auto}
-.knobs-panel.knobs-page>.knobs-popover{position:fixed;z-index:2147480003;top:calc(var(--k-head-h,56px) + var(--k-unit) * 2);right:var(--k-page-pad);width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - var(--k-head-h,56px) - 32px);overflow:auto;margin:0;padding:var(--k-pad) var(--k-inset);
-  background:color-mix(in srgb,var(--k-bg) 94%,transparent);border-radius:var(--k-panel-radius);box-shadow:var(--k-shadow),inset 0 1px 0 var(--k-rim);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
-.knobs-panel.knobs-page>.knobs-status{position:fixed;z-index:2147480003;left:50%;bottom:calc(var(--k-unit) * 6);translate:-50% 0;max-width:min(480px,80vw);margin:0;padding:calc(var(--k-unit) * 2) calc(var(--k-unit) * 3.5);
-  background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-round);box-shadow:var(--k-shadow);color:var(--k-text)}
+.knobs-panel .knobs-filter::placeholder{color:var(--_k-fg-3)}
+.knobs-panel .knobs-filter[data-open]{width:min(200px,22vw);padding:0 10px;margin-right:calc(var(--_k-unit) * 2);opacity:1;pointer-events:auto}
+.knobs-panel.knobs-page>.knobs-popover{position:fixed;z-index:2147480003;top:calc(var(--k-head-h,56px) + var(--_k-unit) * 2);right:var(--k-page-pad);width:min(360px,calc(100vw - 32px));max-height:calc(100dvh - var(--k-head-h,56px) - 32px);overflow:auto;margin:0;padding:var(--_k-pad) var(--_k-inset);
+  background:color-mix(in srgb,var(--_k-bg) 94%,transparent);border-radius:var(--_k-radius-panel);box-shadow:var(--_k-shadow-overlay),inset 0 1px 0 var(--_k-rim);-webkit-backdrop-filter:blur(24px) saturate(1.6);backdrop-filter:blur(24px) saturate(1.6)}
+.knobs-panel.knobs-page>.knobs-status{position:fixed;z-index:2147480003;left:50%;bottom:calc(var(--_k-unit) * 6);translate:-50% 0;max-width:min(480px,80vw);margin:0;padding:calc(var(--_k-unit) * 2) calc(var(--_k-unit) * 3.5);
+  background:var(--_k-bg);border:1px solid var(--_k-border);border-radius:var(--_k-round);box-shadow:var(--_k-shadow-overlay);color:var(--_k-fg)}
 .knobs-sections{padding:0 var(--k-page-pad);overflow-x:clip;overflow-anchor:none}
-.knobs-columns{display:grid;grid-template-columns:repeat(var(--k-cols,1),minmax(0,1fr));gap:var(--k-page-gap);align-items:start;padding-top:calc(var(--k-unit) * 3)}
+.knobs-columns{display:grid;grid-template-columns:repeat(var(--k-cols,1),minmax(0,1fr));gap:var(--k-page-gap);align-items:start;padding-top:calc(var(--_k-unit) * 3)}
 .knobs-column{display:flex;flex-direction:column;gap:var(--k-page-gap);min-width:0}
-.knobs-section-head{margin:0 0 calc(var(--k-page-gap) * -.25);padding:0 calc(var(--k-pad) + var(--k-inset) + 1px);font:var(--k-title-weight) calc(var(--k-font-size) + 3px)/1.25 var(--k-font);letter-spacing:-.015em;color:var(--k-text);white-space:nowrap;
+.knobs-section-head{margin:0 0 calc(var(--k-page-gap) * -.25);padding:0 calc(var(--_k-pad) + var(--_k-inset) + 1px);font:var(--_k-weight-title) calc(var(--_k-font-size) + 3px)/1.25 var(--_k-font);letter-spacing:-.015em;color:var(--_k-fg);white-space:nowrap;
   display:grid;grid-template-columns:minmax(0,max-content) minmax(0,1fr) auto;align-items:center;column-gap:8px;isolation:isolate}
 .knobs-column>:not([hidden],[data-away])~.knobs-section-head{margin-top:calc(var(--k-page-gap) * .75)}
 .knobs-section-name{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis}
@@ -1662,35 +3085,35 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-tile[data-away]{display:none}
 .knobs-section-head[data-foldable]{cursor:pointer;user-select:none}
 .knobs-section-head[data-folded]{margin-bottom:0}
-.knobs-section-head[data-foldable]::before{content:"";position:absolute;z-index:-1;inset:-4px 0;border-radius:var(--k-radius-md);background:var(--k-surface);opacity:0;transition:opacity var(--k-hover-t)}
+.knobs-section-head[data-foldable]::before{content:"";position:absolute;z-index:-1;inset:-4px 0;border-radius:var(--_k-radius-md);background:var(--_k-fill);opacity:0;transition:opacity var(--k-hover-t)}
 .knobs-section-head[data-foldable]:focus-visible{outline:none}
 .knobs-section-head[data-foldable]:focus-visible::before{opacity:1}
 .knobs-section-head>.knobs-caret{grid-area:1/3;margin:0 calc((var(--k-icon-sm) - 20px) / 2 + 5px) 0 0;opacity:0;transition:transform ${LEAD_T},opacity .15s,color .15s}
 .knobs-section-head:is(:hover,:focus-visible,[data-folded])>.knobs-caret{opacity:1}
-.knobs-section-head:hover>.knobs-caret{color:var(--k-label)}
+.knobs-section-head:hover>.knobs-caret{color:var(--_k-fg-2)}
 .knobs-section-head[aria-expanded="true"]>.knobs-caret{transform:rotate(90deg)}
-.knobs-section-summary{display:none;grid-area:1/2;justify-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;font:500 var(--k-text-control)/1.25 var(--k-font);letter-spacing:0;color:var(--k-dim);font-variant-numeric:tabular-nums}
+.knobs-section-summary{display:none;grid-area:1/2;justify-self:end;min-width:0;overflow:hidden;text-overflow:ellipsis;font:500 var(--_k-text-control)/1.25 var(--_k-font);letter-spacing:0;color:var(--_k-fg-3);font-variant-numeric:tabular-nums}
 .knobs-section-head[data-folded]>.knobs-section-summary{display:block;animation:knobs-fade .2s var(--k-ease) both}
-.knobs-section-desc,.knobs-group-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--k-label-weight) var(--k-text-meta)/1.35 var(--k-font);letter-spacing:0;color:var(--k-dim);text-transform:none}
+.knobs-section-desc,.knobs-group-desc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:var(--_k-weight-label) var(--_k-text-meta)/1.35 var(--_k-font);letter-spacing:0;color:var(--_k-fg-3);text-transform:none}
 .knobs-section-desc{grid-area:2/1/3/4;margin-top:1px}
 .knobs-group-desc{padding:0 var(--k-group-inset)}
 .knobs-tile>.knobs-group-desc{margin:calc(2px - var(--k-head-gap)) 0 var(--k-head-gap)}
 .knobs-tile:is([data-foldable],[data-collapsible])>.knobs-group-desc{margin:2px 0 0}
 @keyframes knobs-fade{from{opacity:0}}
-.knobs-tile{position:relative;min-width:0;padding:var(--k-pad);background:var(--k-bg);border:1px solid var(--k-line);border-radius:var(--k-panel-radius);box-shadow:inset 0 1px 0 var(--k-rim)}
+.knobs-tile{position:relative;min-width:0;padding:var(--_k-pad);background:var(--_k-bg);border:1px solid var(--_k-border);border-radius:var(--_k-radius-panel);box-shadow:inset 0 1px 0 var(--_k-rim)}
 .knobs-tile>.knobs-card{margin:0}
 .knobs-tile[data-foldable]>.knobs-group-head{margin-bottom:0}
 .knobs-tile[data-foldable]>.knobs-card{margin-top:var(--k-head-gap)}
 /* A card's header is compact: as tall as its 20px controls, then a gap and a half before its rows. */
-.knobs-tile>.knobs-group-head{position:relative;margin:0 0 var(--k-head-gap);min-height:20px;color:var(--k-text);font-size:var(--k-text-title);font-weight:var(--k-title-weight);letter-spacing:-.01em;text-transform:none}
-.knobs-panel.knobs-page{--k-head-gap:calc(var(--k-gap) * 1.5)}
+.knobs-tile>.knobs-group-head{position:relative;margin:0 0 var(--k-head-gap);min-height:20px;color:var(--_k-fg);font-size:var(--_k-text-title);font-weight:var(--_k-weight-title);letter-spacing:-.01em;text-transform:none}
+.knobs-panel.knobs-page{--k-head-gap:calc(var(--_k-gap) * 1.5)}
 /* The title wins the header's room: what's on the right (presets, a summary) gives way first. */
 .knobs-tile>.knobs-group-head>.knobs-group-title{flex:1 1 auto}
 .knobs-tile>.knobs-group-head>span:last-child{flex:0 1000 auto;min-width:0}
 .knobs-tile>.knobs-group-head :is(.knobs-group-reset,.knobs-group-die){flex:none}
 /* A folded card's header trades its controls (presets, reset, die) for a summary of the card. */
-.knobs-group-ctl{display:flex;align-items:center;gap:var(--k-tray-pad);min-width:0}
-.knobs-group-summary{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-dim);font-size:var(--k-text-control);font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
+.knobs-group-ctl{display:flex;align-items:center;gap:var(--_k-tray-pad);min-width:0}
+.knobs-group-summary{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--_k-fg-3);font-size:var(--_k-text-control);font-weight:500;letter-spacing:0;font-variant-numeric:tabular-nums}
 .knobs-tile[data-folded]>.knobs-group-head .knobs-group-summary:not(:empty){display:block}
 .knobs-tile[data-folded]>.knobs-group-head .knobs-group-ctl{display:none}
 .knobs-tile[data-fold-motion]>.knobs-group-head :is(.knobs-group-summary,.knobs-group-ctl){animation:knobs-fade .2s var(--k-ease) both}
@@ -1698,25 +3121,25 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
    full), and what's highlighted on its own gets a dot in the gutter by its title. The veil and
    dot are written each frame on the panel spring (see page.ts). */
 .knobs-panel.knobs-page{--k-page-dim:.4}
-.knobs-veil{position:absolute;inset:-1px;z-index:1;border-radius:inherit;background:var(--k-page);pointer-events:none}
-.knobs-mark{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--k-accent);pointer-events:none}
-.knobs-tile>.knobs-mark{z-index:2;top:calc(var(--k-pad) + 10px);left:calc((var(--k-pad) + var(--k-inset) + 1px) / 2 - 1px)}
+.knobs-veil{position:absolute;inset:-1px;z-index:1;border-radius:inherit;background:var(--_k-bg-page);pointer-events:none}
+.knobs-mark{position:absolute;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--_k-accent);pointer-events:none}
+.knobs-tile>.knobs-mark{z-index:2;top:calc(var(--_k-pad) + 10px);left:calc((var(--_k-pad) + var(--_k-inset) + 1px) / 2 - 1px)}
 .knobs-section-head{position:relative}
-.knobs-section-head>.knobs-mark{left:calc((var(--k-pad) + var(--k-inset) + 1px) / 2)}
+.knobs-section-head>.knobs-mark{left:calc((var(--_k-pad) + var(--_k-inset) + 1px) / 2)}
 .knobs-group-title{display:grid;flex:1;min-width:0}
 .knobs-group-title>*{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;transition:opacity .15s}
 .knobs-peek{opacity:0;pointer-events:none}
 .knobs-group-head[data-peek] .knobs-group-label{opacity:0}
 .knobs-group-head[data-peek] .knobs-peek{opacity:1}
-.knobs-group-head .knobs-chips.knobs-seg{flex:none;height:20px;max-width:none;gap:0;margin-right:var(--k-unit)}
-.knobs-group-head .knobs-chips button{width:18px;height:100%;padding:0;font-size:var(--k-text-meta);font-weight:500;font-variant-numeric:tabular-nums;border-radius:var(--k-radius-sm);background:transparent}
-.knobs-group-head .knobs-chips button[aria-checked="true"]{color:var(--k-text)}
+.knobs-group-head .knobs-chips.knobs-seg{flex:none;height:20px;max-width:none;gap:0;margin-right:var(--_k-unit)}
+.knobs-group-head .knobs-chips button{width:18px;height:100%;padding:0;font-size:var(--_k-text-meta);font-weight:500;font-variant-numeric:tabular-nums;border-radius:var(--_k-radius-sm);background:transparent}
+.knobs-group-head .knobs-chips button[aria-checked="true"]{color:var(--_k-fg)}
 /* Named presets: their names as segments beside the title, or a compact menu of them. */
-.knobs-group-presets{display:flex;align-items:center;flex:0 1 auto;min-width:0;margin-right:var(--k-unit)}
-.knobs-group-presets .knobs-seg{flex:none;height:20px;max-width:none;padding:var(--k-tray-pad)}
-.knobs-group-presets .knobs-seg button{height:100%;padding:0 6px;font-size:var(--k-text-meta);font-weight:500;background:transparent}
-.knobs-panel .knobs-group-presets .knobs-select{height:20px;max-width:11em;gap:3px;padding:0 3px 0 7px;font-size:var(--k-text-meta);font-weight:500;letter-spacing:0;text-transform:none}
-.knobs-group-presets .knobs-select[data-none]{color:var(--k-dim)}
+.knobs-group-presets{display:flex;align-items:center;flex:0 1 auto;min-width:0;margin-right:var(--_k-unit)}
+.knobs-group-presets .knobs-seg{flex:none;height:20px;max-width:none;padding:var(--_k-tray-pad)}
+.knobs-group-presets .knobs-seg button{height:100%;padding:0 6px;font-size:var(--_k-text-meta);font-weight:500;background:transparent}
+.knobs-panel .knobs-group-presets .knobs-select{height:20px;max-width:11em;gap:3px;padding:0 3px 0 7px;font-size:var(--_k-text-meta);font-weight:500;letter-spacing:0;text-transform:none}
+.knobs-group-presets .knobs-select[data-none]{color:var(--_k-fg-3)}
 .knobs-group-presets .knobs-select .knobs-icon{width:calc(var(--k-icon-sm) - 3px);height:calc(var(--k-icon-sm) - 3px)}
 .knobs-tile-body{display:flex;flex-direction:column}
 .knobs-tile-body>.knobs-card{margin:0}
@@ -1728,35 +3151,25 @@ ${POINTER_ROW} .knobs-slider.knobs-modified:not(:hover,.knobs-active) .knobs-val
 .knobs-card>.knobs-item:focus-visible{outline:none}
 .knobs-card>.knobs-item:focus-visible::after{opacity:1}
 /* A collapsible custom card: its header toggles it, with a caret and, while folded, a summary. */
-.knobs-live[data-collapsible]>.knobs-group-head{margin-bottom:0;cursor:pointer;border-radius:var(--k-radius-sm);transition:background var(--k-hover-t)}
-.knobs-live[data-collapsible]>.knobs-group-head:focus-visible{background:var(--k-surface)}
+.knobs-live[data-collapsible]>.knobs-group-head{margin-bottom:0;cursor:pointer;border-radius:var(--_k-radius-sm);transition:background var(--k-hover-t)}
+.knobs-live[data-collapsible]>.knobs-group-head:focus-visible{background:var(--_k-fill)}
 .knobs-live[data-collapsible]>.knobs-tile-body{margin-top:var(--k-head-gap);transition:opacity var(--k-token-t)}
 .knobs-live[data-collapsed]>.knobs-tile-body{opacity:0}
-.knobs-live>.knobs-tile-body[data-folding]{position:absolute;left:var(--k-pad);right:var(--k-pad);margin-top:0}
+.knobs-live>.knobs-tile-body[data-folding]{position:absolute;left:var(--_k-pad);right:var(--_k-pad);margin-top:0}
 .knobs-card-right{display:flex;align-items:center;gap:6px;min-width:0}
 .knobs-card-side{display:grid;justify-items:end;min-width:0}
 .knobs-card-side>*{grid-area:1/1;min-width:0;max-width:100%;transition:opacity var(--k-token-t)}
-.knobs-card-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--k-dim);font-size:var(--k-text-control);font-weight:500;letter-spacing:0;opacity:0;pointer-events:none}
+.knobs-card-summary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--_k-fg-3);font-size:var(--_k-text-control);font-weight:500;letter-spacing:0;opacity:0;pointer-events:none}
 .knobs-live[data-collapsed] .knobs-card-summary{opacity:1;pointer-events:auto}
 .knobs-live[data-collapsed] .knobs-card-summary:not(:empty)~*{opacity:0;pointer-events:none}
 .knobs-card-right>.knobs-caret{margin-right:calc((var(--k-icon-sm) - 20px) / 2 + 5px)}
-.knobs-live>.knobs-group-head:hover .knobs-caret{color:var(--k-label)}
+.knobs-live>.knobs-group-head:hover .knobs-caret{color:var(--_k-fg-2)}
 .knobs-live>.knobs-group-head[aria-expanded="true"] .knobs-caret{transform:rotate(90deg)}
-.knobs-item-detail{flex:none;color:var(--k-dim);font-size:var(--k-text-control);font-variant-numeric:tabular-nums;white-space:nowrap}
-`;
-function injectPreset(doc, preset) {
-  let content = presetCss(preset), existing = doc.querySelector(`style[data-knobs-preset="${preset.name}"]`);
-  if (existing) {
-    if (existing.textContent !== content)
-      existing.textContent = content;
-    return;
-  }
-  let style = doc.createElement("style");
-  style.dataset.knobsPreset = preset.name, style.textContent = content, doc.head.append(style);
-}
-var keyboardQuietsHover = (css) => css.replaceAll(":hover", ":hover:where(:not([data-k-quiet]))"), withoutHas = (css) => css.replaceAll(":has(:focus-visible)", "[data-k-fv]").replaceAll(":has(.knobs-track:focus-visible)", '[data-k-fv="track"]').replaceAll(":has(.knobs-active)", "[data-k-active]");
+.knobs-item-detail{flex:none;color:var(--_k-fg-3);font-size:var(--_k-text-control);font-variant-numeric:tabular-nums;white-space:nowrap}
+`, keyboardQuietsHover = (css) => css.replaceAll(":hover", ":hover:where(:not([data-k-quiet]))"), withoutHas = (css) => css.replaceAll(":has(:focus-visible)", "[data-k-fv]").replaceAll(":has(.knobs-track:focus-visible)", '[data-k-fv="track"]').replaceAll(":has(.knobs-active)", "[data-k-active]"), panelCss = () => rolling_css_default + defaultsCss + keyboardQuietsHover(withoutHas(aliased(css2)));
 function injectStyles(doc) {
-  let content = rolling_css_default + DRIVERS + defaultsCss + keyboardQuietsHover(withoutHas(aliased(css))), existing = doc.querySelector("style[data-knobs-style]");
+  injectTokens(doc);
+  let content = panelCss(), existing = doc.querySelector("style[data-knobs-style]");
   if (existing) {
     if (existing.textContent !== content)
       existing.textContent = content;
@@ -2690,13 +4103,13 @@ function hintTokens(doc, groups) {
         return v;
     }
     return "";
-  }, panel = doc.querySelector(".knobs-panel"), piece = groups.find((g) => g.source && !g.source.paint)?.source?.root, pick = (k, fallback) => read(panel, [`--k-${k}`]) || read(piece, [`--ku-${k}`, `--k-${k}`]) || fallback;
+  }, panel = doc.querySelector(".knobs-panel"), piece = groups.find((g) => g.source && !g.source.paint)?.source?.root, 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)"
@@ -2816,4 +4229,4 @@ function createLayer(doc) {
   };
 }
 
-export { CHECK_POINTS, CHECK_PATH, iconPath, iconSvg, readSession, writeSession, rolling_css_default, presetCss, FILL, LEAD, trailScale, Edges, POP_MS, popScale, settleScale, VelocityTracker, clamp, Roll, rollTarget, numeral, entranceOffset, FLASH_MS, flash, flashOf, offRow, precisionRate, RULER, RULER_NEAR, RULER_FADE, rulerLevels, rulerAlpha, rulerDepth, THIN, THINNEST, thinOf, roundOf, stretchOf, stretchAt, giveRoom, detentScale, detentsOf, roundValues, unwarp, Notches, escapeTo, commandScope, scopeLabel, crumbTrail, escTarget, digitOption, digitHints, createCrumbs, DELAYED, injectPreset, injectStyles, resolveSound, sound, SOUND_PREF, soundPanel, changed, cue, createHintController, pageHints, toggleLayer };
+export { resolveLook, themeOf, applyLook, panelLook, CHECK_POINTS, CHECK_PATH, iconPath, iconSvg, readSession, writeSession, rolling_css_default, FILL, LEAD, trailScale, Edges, POP_MS, popScale, settleScale, VelocityTracker, clamp, Roll, rollTarget, numeral, entranceOffset, FLASH_MS, flash, flashOf, offRow, precisionRate, RULER, RULER_NEAR, RULER_FADE, rulerLevels, rulerAlpha, rulerDepth, THIN, THINNEST, thinOf, roundOf, stretchOf, stretchAt, giveRoom, detentScale, detentsOf, roundValues, unwarp, Notches, escapeTo, commandScope, scopeLabel, crumbTrail, escTarget, digitOption, digitHints, createCrumbs, TOKENS, knobs, aliased, injectTokens, DELAYED, injectStyles, resolveSound, sound, SOUND_PREF, soundPanel, changed, cue, createHintController, pageHints, toggleLayer };