/* widgets.js — The Dupre Kit: retro-instrument component library (DUPRE namespace).
   Classic script: load after the token :root block (tokens.json → gen_tokens.py),
   before any DUPRE.* call. Works from file:// — no modules, no build step.
   Contract: each gallery card in panel-widget-gallery.html is the visual +
   behavioral spec its builder is judged against.
   Spec: docs/specs/2026-07-12-component-generation-spec.org */
(function () {
'use strict';
const DUPRE = {};

/* ================= shared engine ================= */

const SVGNS = 'http://www.w3.org/2000/svg';
function svgEl(parent, tag, attrs) {
  const e = document.createElementNS(SVGNS, tag);
  for (const k in attrs) e.setAttribute(k, attrs[k]);
  parent.appendChild(e); return e;
}
function polar(cx, cy, r, deg) {
  const a = deg * Math.PI / 180;
  return [cx + r * Math.sin(a), cy - r * Math.cos(a)];
}

/* ---- pointer-drag helpers (rect-ratio based, so CSS zoom is transparent) ---- */
function dragX(el, onPct) {
  el.style.touchAction = 'none';
  const at = e => { const r = el.getBoundingClientRect(); onPct(Math.max(0, Math.min(100, (e.clientX - r.left) / r.width * 100))); };
  el.addEventListener('pointerdown', e => {
    el.setPointerCapture(e.pointerId); at(e);
    const mv = ev => at(ev), up = () => { el.removeEventListener('pointermove', mv); el.removeEventListener('pointerup', up); el.removeEventListener('pointercancel', up); };
    el.addEventListener('pointermove', mv); el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up); e.preventDefault();
  });
}
function dragY(el, onPct) {
  el.style.touchAction = 'none';
  const at = e => { const r = el.getBoundingClientRect(); onPct(Math.max(0, Math.min(100, (r.bottom - e.clientY) / r.height * 100))); };
  el.addEventListener('pointerdown', e => {
    el.setPointerCapture(e.pointerId); at(e);
    const mv = ev => at(ev), up = () => { el.removeEventListener('pointermove', mv); el.removeEventListener('pointerup', up); el.removeEventListener('pointercancel', up); };
    el.addEventListener('pointermove', mv); el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up); e.preventDefault();
  });
}
function dragDelta(el, get, set, opts) {
  opts = opts || {}; el.style.touchAction = 'none';
  const min = opts.min == null ? 0 : opts.min, max = opts.max == null ? 100 : opts.max, sens = opts.sens || ((max - min) / 160);
  el.addEventListener('pointerdown', e => {
    if (opts.stop) e.stopPropagation(); el.setPointerCapture(e.pointerId);
    const y0 = e.clientY, v0 = get();
    const mv = ev => { let v = v0 + (y0 - ev.clientY) * sens; set(Math.max(min, Math.min(max, v))); };
    const up = () => { el.removeEventListener('pointermove', mv); el.removeEventListener('pointerup', up); el.removeEventListener('pointercancel', up); };
    el.addEventListener('pointermove', mv); el.addEventListener('pointerup', up); el.addEventListener('pointercancel', up); e.preventDefault();
  });
}

/* ---- seven-segment digit builder ---- */
const SEG = { '0': 'abcdef', '1': 'bc', '2': 'abged', '3': 'abgcd', '4': 'fbgc', '5': 'afgcd', '6': 'afgedc', '7': 'abc', '8': 'abcdefg', '9': 'abcdfg', '-': 'g', ' ': '' };
function hseg(cy) { return `5,${cy} 7,${cy - 2} 17,${cy - 2} 19,${cy} 17,${cy + 2} 7,${cy + 2}`; }
function vseg(cx, ty, by) { return `${cx},${ty} ${cx - 2},${ty + 2} ${cx - 2},${by - 2} ${cx},${by} ${cx + 2},${by - 2} ${cx + 2},${ty + 2}`; }
const SEGPTS = { a: hseg(3), g: hseg(22), d: hseg(41), f: vseg(5, 4, 21), b: vseg(19, 4, 21), e: vseg(5, 23, 40), c: vseg(19, 23, 40) };
function seg7(ch, cls) {
  const lit = SEG[ch] || ''; let s = `<svg class="seg7 ${cls || ''}" viewBox="0 0 24 44">`;
  for (const k of 'abcdefg') {
    const on = lit.includes(k);
    const col = on ? (cls === 'red' ? 'var(--sevred)' : 'var(--sevgrn)') : 'var(--sevoff)';
    s += `<polygon points="${SEGPTS[k]}" fill="${col}"/>`;
  }
  return s + '</svg>';
}

function buildBars(el, n) { el.innerHTML = ''; for (let k = 0; k < n; k++) el.appendChild(document.createElement('i')); }

/* ---- VU law: authentic nonlinear dB scale, dB → 0..1 sweep position ---- */
const VUDB = [[-20, 0], [-10, .20], [-7, .31], [-5, .40], [-3, .50], [-2, .58], [-1, .66], [0, .75], [1, .84], [2, .91], [3, 1]];
/* interpolate a dB reading from a 0..1 sweep position */
function vuDb(t) {
  let i = 0; while (i < VUDB.length - 2 && VUDB[i + 1][1] < t) i++;
  const [d1, t1] = VUDB[i], [d2, t2] = VUDB[i + 1];
  return d1 + (d2 - d1) * Math.max(0, Math.min(1, (t - t1) / (t2 - t1)));
}

/* ---- screen-color families: period phosphor/LCD palettes as scoped CSS vars.
   Shipped literals are the fallbacks, so defaults are pixel-identical until applied. ---- */
const SCREEN_FAMS = {
  green: { '--scr-hi': '#7fe0a0', '--scr-ink': '#58b87e', '--scr-dim': '#3d5c46',
    '--scr-bg1': '#0a120c', '--scr-bg2': '#050c07', '--scr-bgc': '#04140a', '--scr-bge': '#020a05', '--scr-brd': '#123018',
    '--scr-grat': 'rgba(111,206,51,.18)', '--scr-gratc': 'rgba(111,206,51,.35)', '--scr-glow': 'rgba(127,224,160,.8)',
    '--crt-face1': '#b9d8c0', '--crt-face2': '#8bb296', '--crt-glow': '#eef7ee' },
  amber: { '--scr-hi': '#ffbe54', '--scr-ink': '#e2a038', '--scr-dim': '#7d5c16',
    '--scr-bg1': '#140d06', '--scr-bg2': '#0a0705', '--scr-bgc': '#140d06', '--scr-bge': '#0a0603', '--scr-brd': '#33230e',
    '--scr-grat': 'rgba(226,160,56,.18)', '--scr-gratc': 'rgba(226,160,56,.35)', '--scr-glow': 'rgba(255,190,84,.8)',
    '--crt-face1': '#d8cba6', '--crt-face2': '#b3a276', '--crt-glow': '#ffe7c0' },
  red: { '--scr-hi': '#ff9a4c', '--scr-ink': '#e0742e', '--scr-dim': '#5c3416',
    '--scr-bg1': '#140a05', '--scr-bg2': '#0c0603', '--scr-bgc': '#140a05', '--scr-bge': '#0a0502', '--scr-brd': '#331c0c',
    '--scr-grat': 'rgba(224,116,46,.18)', '--scr-gratc': 'rgba(224,116,46,.35)', '--scr-glow': 'rgba(255,154,76,.8)',
    '--crt-face1': '#d8b9a6', '--crt-face2': '#b39276', '--crt-glow': '#ffdcc0' },
  blue: { '--scr-hi': '#cfe4ff', '--scr-ink': '#94b8d8', '--scr-dim': '#3a4c60',
    '--scr-bg1': '#0a0e14', '--scr-bg2': '#05080c', '--scr-bgc': '#0a1018', '--scr-bge': '#04070c', '--scr-brd': '#16283a',
    '--scr-grat': 'rgba(148,184,216,.18)', '--scr-gratc': 'rgba(148,184,216,.35)', '--scr-glow': 'rgba(207,228,255,.8)',
    '--crt-face1': '#c2d2dd', '--crt-face2': '#93a8b6', '--crt-glow': '#eaf2ff' },
  vfd: { '--scr-hi': '#63e6c8', '--scr-ink': '#46b89e', '--scr-dim': '#1e4a40',
    '--scr-bg1': '#06100d', '--scr-bg2': '#040b09', '--scr-bgc': '#041410', '--scr-bge': '#020a08', '--scr-brd': '#0e3028',
    '--scr-grat': 'rgba(70,184,158,.18)', '--scr-gratc': 'rgba(70,184,158,.35)', '--scr-glow': 'rgba(99,230,200,.8)',
    '--crt-face1': '#b0d8cd', '--crt-face2': '#84ada2', '--crt-glow': '#dcfff5' },
  white: { '--scr-hi': '#f2f4f2', '--scr-ink': '#c8cac8', '--scr-dim': '#5a5c5a',
    '--scr-bg1': '#0b0c0b', '--scr-bg2': '#070807', '--scr-bgc': '#0d0e0d', '--scr-bge': '#060706', '--scr-brd': '#2a2c2a',
    '--scr-grat': 'rgba(200,202,200,.18)', '--scr-gratc': 'rgba(200,202,200,.35)', '--scr-glow': 'rgba(242,244,242,.7)',
    '--crt-face1': '#d0d2d0', '--crt-face2': '#a8aaa8', '--crt-glow': '#f7f7f7' },
};

/* ================= instrument builders =================
   Every builder: DUPRE.name(host, opts) → handle. host is an empty element the
   instrument renders into. opts.onChange(value, text) fires on every state change,
   including the initial paint; text is the instrument's canonical readout string. */

const noop = () => {};

/* ---- the accent family ----
   One named set of lit colours for the instruments whose colour IS their claim: a
   chip, a lamp, a badge, a status line. "On" is good in one panel, a warning in
   the next and a fault in the one after, so the colour belongs to the consumer
   rather than the builder.
   Deliberately NOT applied to instruments whose colour is the object rather than a
   state — the nixie (the palette is explicit that neon is only ever orange), the
   flip-disc's yellow, the dekatron's glow, a red needle — nor to the ones where
   the colour is a standard rather than a preference: three greens on the landing
   gear means down and locked, and a breaker's red/amber/green is its trip
   semantics. Recolouring those doesn't restyle them, it makes them lie.
   accentStyles(varName) builds a STYLES axis driving one CSS custom property, so
   each consumer names its own var and the family stays single-source. */
const ACCENTS = {
  amber: 'var(--gold)',
  green: 'var(--pass)',
  red: 'var(--fail)',
  white: 'var(--cream)',
  vfd: 'var(--vfd)',
};
DUPRE.accentStyles = varName => Object.fromEntries(
  Object.entries(ACCENTS).map(([name, colour]) => [name, { dot: colour, vars: { [varName]: colour } }]));

/* ---- policy ----
   Every instrument's colour is either the consumer's to pick or locked for a reason,
   and the reason is one of these six kinds. Declared per builder (DUPRE.<name>.POLICY)
   so it's a checked property rather than something the next person recalls — the
   colour pass kept turning up cards where "is this one a standard?" was answered
   from memory and answered wrong. The two FREE kinds get chips; the four LOCKED
   ones must not, and the probe enforces the split.
   Policy is a property of the INSTRUMENT, not the colour: the same vfd cyan is a free
   accent on a chip and a locked emissive identity on the marquee. A few cards are
   mixed (a free display with a coded red-line) and declare per element in time.
   Each builder's POLICY is a record { kind, why, authentic }:
     kind      — one of the six below.
     why       — why THIS instrument is bound that way, in its own terms.
     authentic — what may change and still be true to the reference (the range
                 that actually existed), or 'nothing' when the colour is fixed. */
DUPRE.POLICIES = {
  accent:     { free: true,  gist: 'A lit state whose meaning varies by panel; the consumer picks from the accent family.' },
  screen:     { free: true,  gist: 'A display whose phosphor was made in several real colours; the consumer picks from the screen family.' },
  coded:      { free: false, gist: 'Colour is meaning fixed by an external standard; a recolour misleads a trained operator (landing-gear three-greens, breaker trip).' },
  emissive:   { free: false, gist: 'Colour is what the physical source emits and no other was made; unrecognisable otherwise (nixie neon, dekatron glow).' },
  relational: { free: false, gist: 'Colour means what it does only by contrast with another on the same instrument; the set is a scale or legend (VU zones, crossed needles).' },
  material:   { free: false, gist: 'Colour of a static physical part, not a state — nothing to parameterise as a signal (needle, brass bezel, knife blade).' },
};

/* 01 slide toggle — on/off pill. State colors ride CSS vars (--sw-*).
   opts.onStyle / offStyle / offText / thumb pick a named style per axis from
   DUPRE.slideToggle.STYLES; defaults match the stylesheet fallbacks. The handle's
   setStyle(axis, name) restyles a live instance (the gallery chips use it). */
DUPRE.slideToggle = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const sw = document.createElement('span'); sw.className = 'switch'; host.appendChild(sw);
  const setStyle = (axis, name) => {
    const o = (DUPRE.slideToggle.STYLES[axis] || {})[name];
    if (!o) return;
    for (const [k, v] of Object.entries(o.vars)) sw.style.setProperty(k, v);
  };
  /* opts.preset names an intent; per-axis opts still win over it, so a caller can
     take 'armed' and swap only the thumb. setPreset re-applies all four axes at
     once and returns the axis map so a host UI can resync its own controls. */
  const preset = DUPRE.slideToggle.PRESETS[opts.preset] || DUPRE.slideToggle.PRESETS.panel;
  /* AXIS_ORDER is load-bearing, not cosmetic: onText overrides the ink that the
     `on` style sets, so applying the axes in any other order silently drops it. */
  const setPreset = name => {
    const p = DUPRE.slideToggle.PRESETS[name];
    if (!p) return null;
    for (const axis of DUPRE.slideToggle.AXIS_ORDER) if (p[axis]) setStyle(axis, p[axis]);
    return p;
  };
  const pick = { on: opts.onStyle, onText: opts.onText, off: opts.offStyle,
    offText: opts.offText, thumb: opts.thumb };
  for (const axis of DUPRE.slideToggle.AXIS_ORDER) setStyle(axis, pick[axis] || preset[axis]);
  let on;
  const set = v => { on = !!v; sw.classList.toggle('on', on); onChange(on, on ? 'ON' : 'OFF'); };
  sw.addEventListener('click', () => set(!on));
  set(opts.on !== undefined ? opts.on : true);
  return { el: sw, get: () => on, set, setStyle, setPreset };
};
/* named presets — a combination that carries intent, which is what a consumer
   actually reaches for; the STYLES axes below are how one is built. The `on`
   tone does the semantic work and the thumb material backs it: a touchscreen
   pill wears plastic, a run or armed switch wears metal. */
DUPRE.slideToggle.AXIS_ORDER = ['on', 'onText', 'off', 'offText', 'thumb'];
DUPRE.slideToggle.PRESETS = {
  panel: { on: 'amber', onText: 'panel', off: 'dark', offText: 'white', thumb: 'light' },
  run: { on: 'green', onText: 'panel', off: 'dark', offText: 'dim', thumb: 'chrome' },
  armed: { on: 'red', onText: 'cream', off: 'dark', offText: 'white', thumb: 'chrome' },
  caution: { on: 'warn', onText: 'panel', off: 'dark', offText: 'white', thumb: 'light' },
  /* dark — neither state lights the pill; the legend alone carries the state,
     green for on and Control red ("OFF marks") for off. The chrome thumb stays
     the position affordance, since with both pills dark it is the only one. */
  dark: { on: 'dark', onText: 'green', off: 'dark', offText: 'red', thumb: 'chrome' },
};
/* named styles per axis: dot = swatch color for pickers, vars = --sw-* overrides */
DUPRE.slideToggle.STYLES = {
  on: {
    amber: { dot: 'var(--gold-hi)', vars: { '--sw-on-bg': 'linear-gradient(180deg,var(--amber-grad-top),var(--gold))', '--sw-on-brd': 'var(--gold-hi)', '--sw-on-ink': 'var(--panel)' } },
    green: { dot: '#8fb944', vars: { '--sw-on-bg': 'linear-gradient(180deg,#a9c95f,var(--pass))', '--sw-on-brd': '#a9c95f', '--sw-on-ink': 'var(--panel)' } },
    /* red/warn make the ENGAGED state the notable one — mute, record, airplane
       mode. Before them the only red was on the `off` axis, which paints the
       disengaged state: the opposite claim. Palette semantics: --fail is
       "muted keys", --amber-warn is "warn cells", distinct from panel amber. */
    red: { dot: 'var(--fail)', vars: { '--sw-on-bg': 'linear-gradient(180deg,#d98a6f,var(--fail))', '--sw-on-brd': 'var(--fail)', '--sw-on-ink': 'var(--cream)' } },
    warn: { dot: 'var(--amber-warn)', vars: { '--sw-on-bg': 'linear-gradient(180deg,#f7d193,var(--amber-warn))', '--sw-on-brd': 'var(--amber-warn)', '--sw-on-ink': 'var(--panel)' } },
    dark: { dot: '#242019', vars: { '--sw-on-bg': 'linear-gradient(180deg,#15130f,#242019)', '--sw-on-brd': 'var(--slate)', '--sw-on-ink': 'var(--cream)' } },
  },
  off: {
    dark: { dot: '#242019', vars: { '--sw-off-bg': 'linear-gradient(180deg,#15130f,#242019)', '--sw-off-brd': 'var(--slate)' } },
    red: { dot: 'var(--fail)', vars: { '--sw-off-bg': 'linear-gradient(180deg,#d98a6f,var(--fail))', '--sw-off-brd': 'var(--fail)' } },
  },
  /* onText overrides the ink the `on` style sets. The two are not independent —
     ink must contrast with its own background, which is why each `on` atom still
     carries a sensible default; naming onText is how a caller says "keep the
     pill, change the legend". That is what makes the `dark` preset possible:
     both states unlit, the legend colour carrying the state on its own. */
  onText: {
    panel: { dot: 'var(--panel)', vars: { '--sw-on-ink': 'var(--panel)' } },
    cream: { dot: 'var(--cream)', vars: { '--sw-on-ink': 'var(--cream)' } },
    green: { dot: 'var(--sevgrn)', vars: { '--sw-on-ink': 'var(--sevgrn)' } },
  },
  offText: {
    white: { dot: 'var(--cream)', vars: { '--sw-off-ink': 'var(--cream)' } },
    /* Control red — the palette's "OFF marks" ink, so a red OFF legend is the
       kit's existing grammar rather than a new claim. */
    red: { dot: '#e0523a', vars: { '--sw-off-ink': '#e0523a' } },
    /* steel is the kit's engraved-caption ink: lets an off toggle recede where a
       panel carries many of them and eight cream OFFs would all shout equally. */
    dim: { dot: 'var(--steel)', vars: { '--sw-off-ink': 'var(--steel)' } },
    black: { dot: '#14110e', vars: { '--sw-off-ink': '#14110e' } },
  },
  thumb: {
    light: { dot: '#d8d2c4', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)' } },
    dark: { dot: '#2c2824', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#4a453e,#16130f)' } },
    chrome: { dot: '#9aa2b4', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#dfe6f2,#6d7484)' } },
    brass: { dot: '#b8944a', vars: { '--sw-thumb': 'radial-gradient(circle at 35% 28%,#e2c47a,#8a6a24)' } },
  },
};

/* 02 console keys — mutually exclusive push buttons; {label, tone} per key.
   tone picks the engaged look: undefined = gold (the default lit key), 'green' =
   run green, 'red' = terracotta. Reading order runs safe -> live -> muted, and
   LIVE takes green because that is what --pass means everywhere else in the kit
   (the palette names it "run lamps, gear greens, monitor bars, LIVE lamps"). */
DUPRE.consoleKeys = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const keys = opts.keys || DUPRE.consoleKeys.DEFAULT_KEYS;
  const wrap = document.createElement('span'); host.appendChild(wrap);
  const btns = keys.map(k => {
    const b = document.createElement('button'); b.className = 'key'; b.textContent = k.label;
    wrap.appendChild(b); return b;
  });
  let idx;
  const set = i => {
    idx = Math.max(0, Math.min(keys.length - 1, i));
    btns.forEach((b, j) => {
      b.classList.remove('on', 'green', 'red');
      if (j === idx) b.classList.add(keys[idx].tone || 'on');
    });
    onChange(idx, keys[idx].label);
  };
  btns.forEach((b, i) => b.addEventListener('click', () => set(i)));
  /* The default set engages LIVE, not the first key: it is the meaningful
     resting state for a console and it shows the green. A caller supplying its
     own keys gets the first one unless it says otherwise. */
  set(opts.active !== undefined ? opts.active
    : (keys === DUPRE.consoleKeys.DEFAULT_KEYS ? 1 : 0));
  return { el: wrap, get: () => idx, set };
};
DUPRE.consoleKeys.DEFAULT_KEYS = [
  { label: 'SCAN' }, { label: 'LIVE', tone: 'green' }, { label: 'MUTED', tone: 'red' },
];

/* R57 ABC entry keypad — alphanumeric text on a faceplate.
   Modelled on the industrial membrane keypad (reference: fleet/kiosk gear,
   2026-07-16-abc-keypad-membrane-color.png): a 0-9 block beside A-Z laid out
   ALPHABETICALLY, not QWERTY. That is the convention wherever the operator
   can't be assumed to touch-type, and it is what makes this a faceplate rather
   than a keyboard — R16's alphanumeric sibling.
   Departures from the photo, all deliberate and all noted at their site:
     - Its letters are blue. The kit has no blue control colour (blue appears
       only as a screen phosphor and a jewel lens), so the letters take the
       standard pale keycap and the digits a darker one — which keeps the
       photo's two-tone digit/letter grouping without importing a foreign hue.
       CLEAR/NO and ENTER/YES keep the reference's red and green, which are
       already --fail and --pass.
     - Letters left, digits right (the stainless reference's arrangement).
     - DEL added, CANCEL dropped. See the layout block below for both. */
DUPRE.abcKeypad = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const MAX = opts.max || 16;
  const s = stageSvg(host, 'rsvg', 232, 226);
  gradDef('abcKey', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#dbd8cf'], ['1', '#a29d92']]);
  gradDef('abcNum', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#6f6a61'], ['1', '#464239']]);
  gradDef('abcRed', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#d98a6f'], ['1', 'var(--fail)']]);
  gradDef('abcGrn', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#9cbf5e'], ['1', 'var(--pass)']]);
  gradDef('abcAmb', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', 'var(--amber-grad-top)'], ['1', 'var(--gold)']]);
  /* faceplate + the recessed window the legend prints into */
  svgEl(s, 'rect', { x: 2, y: 2, width: 228, height: 222, rx: 7, fill: '#17140f', stroke: '#0a0908', 'stroke-width': 2 });
  /* The window is a screen like the scope's or the marquee's, so it takes the
     screen families through the --scr-* vars, shipped colours as the fallbacks:
     nothing moves until a chip is clicked. Both the glass and the ink recolour —
     a screen that changes its text and keeps its backlight isn't a screen. */
  svgEl(s, 'rect', { class: 'kp-win', x: 12, y: 10, width: 208, height: 30, rx: 4,
    fill: 'var(--scr-bg1, #0a0806)', stroke: 'var(--scr-brd, #2c261d)', 'stroke-width': 2 });
  const disp = svgEl(s, 'text', { x: 20, y: 31, 'font-size': 14, 'letter-spacing': '.14em',
    'font-family': 'var(--mono)', fill: 'var(--scr-hi, var(--gold-hi))' });

  let buf = '';
  /* The window shows the tail: a passphrase outruns the plate long before MAX.
     Spaces are drawn as ␣ rather than as themselves. SVG collapses whitespace,
     so a real space is invisible — and past the truncation boundary there are no
     pad dots left for it to displace, which makes SPACE a keypress with no
     feedback at all: press, see nothing, press again, and now carry two spaces
     you can't see in a passphrase you can't read back. Only the DISPLAY is
     substituted; buf keeps the real character. */
  const show = t => t.replace(/ /g, '␣');
  const render = () => {
    disp.textContent = buf.length > 13 ? '‹' + show(buf.slice(-12)) : show(buf).padEnd(13, '·');
  };
  /* press is the allowlist, not the keydown handler above it. Filtering only in
     the handler guards the web and leaves the Emacs port wide open: that port
     installs KEYS into a keymap and calls press directly, with no handler in the
     stack, so an unguarded press would append a stray 'F1' as literal text.
     Gated on ACTIONS rather than on KEYS because they are different sets — CLR
     is a real key on the plate that no keystroke maps to. */
  const press = k => {
    if (!DUPRE.abcKeypad.ACTIONS.has(k)) return;
    if (k === 'ENT') { onChange(buf, buf ? 'ENTER · ' + buf : 'empty'); return; }
    if (k === 'DEL') { buf = buf.slice(0, -1); render(); onChange(buf, buf || 'empty'); return; }
    if (k === 'CLR') { buf = ''; render(); onChange(buf, 'cleared'); return; }
    if (buf.length >= MAX) { onChange(buf, 'full · ' + buf); return; }
    buf += (k === 'SPC' ? ' ' : k); render(); onChange(buf, buf);
  };
  /* [label, col, row, width-in-cols, tone].
     Letters left, numbers right — the stainless reference's arrangement rather
     than the membrane's. The membrane photo puts its digit block on the left,
     which lands A-L in columns 3-5 while M-X starts at column 0: the alphabet
     stops column-aligning with itself halfway down and the eye has to jump.
     This way A-Z reads straight down the plate in one continuous block and the
     digits keep their own quadrant. */
  const L = [];
  const DIG = ['1','2','3','4','5','6','7','8','9'];
  [...'ABCDEFGHIJKL'].forEach((c, i) => L.push([c, i % 3, Math.floor(i / 3), 1, 'key']));
  [...'MNOPQRSTUVWX'].forEach((c, i) => L.push([c, i % 6, 4 + Math.floor(i / 6), 1, 'key']));
  /* DEL earns its own key: without a backspace the only exit from a typo is CLR,
     which on a long passphrase means retyping the lot.
     The three function keys read as a ladder, so the colour says what a key
     costs before you read its legend: amber DEL takes one character back, red
     CLR throws the whole entry away, green ENT commits it. Plain caps do
     nothing you'd regret. (The stainless reference's backspace is plain steel,
     but that plate has no other coloured key to be graded against.)
     DEL sits in the block beside the digits and CLR is exiled to the far corner,
     which is the opposite of where they started. Two reasons, pulling the same
     way: DEL is the one you reach for constantly and CLR is the one you reach
     for almost never, and a mis-hit on DEL costs one character where a mis-hit
     on CLR costs the whole entry. Frequency and blast radius both say the safe
     key gets the good spot.
     The reference plate also carries CANCEL, and this one deliberately doesn't.
     On that device the plate IS the whole terminal, so CANCEL has a transaction
     to abandon; here the keypad is one control inside a panel that owns its own
     dismiss, which left CANCEL doing exactly what CLR does. A key that means
     nothing the panel doesn't already mean is a key worth removing. */
  L.push(['Y', 0, 6, 1, 'key'], ['Z', 1, 6, 1, 'key'], ['SPC', 2, 6, 3, 'key'],
    ['CLR', 5, 6, 1, 'red']);
  DIG.forEach((d, i) => L.push([d, 3 + (i % 3), Math.floor(i / 3), 1, 'num']));
  L.push(['DEL', 3, 3, 1, 'amb'], ['0', 4, 3, 1, 'num'], ['ENT', 5, 3, 1, 'grn']);
  const FILL = { key: 'url(#abcKey)', num: 'url(#abcNum)', red: 'url(#abcRed)', grn: 'url(#abcGrn)', amb: 'url(#abcAmb)' };
  const INK = { key: '#2b2721', num: '#efeae0', red: 'var(--cream)', grn: 'var(--cream)', amb: 'var(--panel)' };
  /* every function key wears a three-letter legend, so they read as one family
     and each fits a single-column cap; only SPACE has the width to spell out */
  const FACE = { SPC: 'SPACE' };
  /* per-key rotation: a real plate is printed, not typeset — the legends sit a
     fraction off true. Same trick R16 uses, keyed off the index so it is stable. */
  const jitter = i => [-1.4, .9, -.6, 1.2, 0, -1.1, .7, -.9, 1.3, .4, -.5, 1][i % 12];
  L.forEach(([k, c, r, w, tone], i) => {
    const x = 14 + c * 35.5, y = 50 + r * 24.5, wd = w * 35.5 - 5.5;
    const g = svgEl(s, 'g', {}); g.setAttribute('class', 'kp-key'); g.dataset.k = k;
    g.style.cursor = 'pointer'; g.style.transition = 'transform .07s';
    svgEl(g, 'rect', { x, y, width: wd, height: 20, rx: 3.5, fill: FILL[tone], stroke: '#4e4a42', 'stroke-width': 1, 'stroke-opacity': .8 });
    const t = svgEl(g, 'text', { x: x + wd / 2, y: y + 14.5, 'text-anchor': 'middle',
      'font-size': w > 1 ? 8 : 11, 'font-weight': 700, 'font-family': 'var(--mono)', fill: INK[tone],
      transform: `rotate(${jitter(i)},${x + wd / 2},${y + 10})` });
    t.textContent = FACE[k] || k;
    g.addEventListener('click', () => {
      g.style.transform = 'translateY(1.5px)';
      setTimeout(() => { g.style.transform = ''; }, 80);
      press(k);
    });
  });
  /* Keyboard, per the README's keyboard contract. The listener is bound to the
     pad's own focusable element, never to the document: a global binding would
     type into this card from anywhere on a 110-card page and fight the gallery's
     own Escape handler. DUPRE.slideRule is the precedent. */
  s.setAttribute('class', 'rsvg kp-pad');
  s.setAttribute('tabindex', '0');
  s.addEventListener('click', () => s.focus());
  s.addEventListener('keydown', e => {
    if (e.ctrlKey || e.metaKey || e.altKey) return;         /* leave shortcuts alone */
    const name = e.key === ' ' ? 'Space' : (e.key.length === 1 ? e.key.toUpperCase() : e.key);
    const k = DUPRE.abcKeypad.KEYS[name];
    if (!k) return;                                          /* not on the plate: let it bubble */
    /* Spend preventDefault only where there is a default worth killing — Space
       scrolls the page, Backspace can navigate back. Tab and Escape are never
       ours: Tab is how the page stays navigable, Escape belongs to the audit
       stepper, and neither reaches here anyway because they are not in KEYS. */
    if (name === 'Space' || name === 'Backspace') e.preventDefault();
    press(k);
  });
  render(); onChange('', 'type a passphrase');
  return { el: s, get: () => buf, press };
};
/* The plate's keys, declared as a table so every target reads the same intent.
   Deliberately not a function over a DOM event: the Emacs port installs this
   into a keymap and never sees a keydown, so a function would force it to
   re-derive what the instrument accepts and the two bindings would drift apart.
   This is also press()'s allowlist — press appends whatever it is handed, so
   without the table a stray 'F1' would land in the buffer as text. */
DUPRE.abcKeypad.KEYS = (() => {
  const m = {};
  for (const c of 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789') m[c] = c;
  m.Space = 'SPC'; m.Backspace = 'DEL'; m.Enter = 'ENT';
  return m;
})();
/* The plate's whole vocabulary — every argument press accepts, from any caller.
   A superset of the KEYS values: CLR is on the plate but no keystroke reaches it
   (Escape is the obvious candidate and belongs to the gallery's audit stepper). */
DUPRE.abcKeypad.ACTIONS = new Set([
  ...'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', 'SPC', 'DEL', 'ENT', 'CLR',
]);

/* R58 index typewriter — the oldest way to type without a keyboard.
   After the AEG Mignon Model 4 (1924), the best of the index machines: one hand
   walks a pointer over a printed plate of characters, the other pulls a lever,
   and only the lever prints. Select and commit live on two separate controls, so
   you can hunt as long as you like and nothing happens until the second hand
   moves. That separation is the whole card — R57 is a keypad, this is not.

   Two things kept from the Mignon and one deliberately dropped.
   Kept: the plate considered the characters a keyboard skips (accents, section
   mark, fractions, a full punctuation ring), and it carries BOTH cases with no
   shift key, which is how a keyless machine reaches a whole character set.
   Dropped: its key order. The real plate runs P U G Q / V I N A B / L D E T M,
   a frequency layout you cannot read your way around — and reading the plate is
   the entire interaction. Ours is alphabetical, capitals beside lowercase at the
   same column offset: find the letter, then pick the case.
   The layout is a table rather than drawing, because Craig has already said the
   keys will be revisited and a layout welded into the geometry never is. */
DUPRE.indexPlate = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const MAX = opts.max || 22;
  const L = DUPRE.indexPlate.LAYOUT;
  const COLS = Math.max(...L.map(r => r.length)), ROWS = L.length;
  /* Width is driven by the plate, not guessed: the lever and CLR live in a gutter
     to its right. Sized from the layout table so a wider plate can't slide them
     back on top of the characters (they were, at 300 wide — the last column and
     the PRINT legend went under the lever). */
  const PX = 16, PY = 60, CW = 22, CH = 22, GUT = 46;
  const PLATE_R = PX - 8 + COLS * CW + 14;
  /* The gutter stack (lever, PRINT legend, CLR) is anchored to PY and needs 130px
     whatever the plate does, so VH takes a floor. Without it a SHORTER table —
     five rows is a plausible edit — shrinks VH until CLR rides up over the PRINT
     legend and then the lever. Growth was always safe; shrink was the trap. */
  const VW = PLATE_R + GUT;
  const VH = Math.max(PY - 10 + ROWS * CH + 16 + 16, PY + 130);
  const s = stageSvg(host, 'rsvg ix-pad', VW, VH);
  gradDef('ixPlate', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#efe6c4'], ['1', '#d8caa0']]);
  gradDef('ixBody', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#26221c'], ['1', '#100e0b']]);
  gradDef('ixSteel', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 1 }, [['0', '#e6e9ef'], ['1', '#8d93a1']]);
  /* body, then the paper the machine prints onto */
  svgEl(s, 'rect', { x: 2, y: 2, width: VW - 4, height: VH - 4, rx: 8, fill: 'url(#ixBody)', stroke: '#0a0908', 'stroke-width': 2 });
  svgEl(s, 'rect', { x: 14, y: 10, width: VW - 28, height: 30, rx: 2,
    fill: 'var(--scr-bg1, #efe9da)', stroke: 'var(--scr-brd, #b3a883)', 'stroke-width': 1 });
  const paper = svgEl(s, 'text', { x: 22, y: 31, 'font-size': 13, 'letter-spacing': '.1em',
    'font-family': 'var(--mono)', fill: 'var(--scr-hi, #241d12)' });

  /* the index plate: cream, rounded, characters in printed rings like the Mignon's.
     The ring area carries a halftone screen, which is what the real plate prints
     its outer characters onto. */
  if (!document.getElementById('ixHalf')) {
    const defs = s.ownerDocument.querySelector('#dupre-defs') || svgEl(s, 'defs', {});
    const pat = svgEl(defs, 'pattern', { id: 'ixHalf', width: 4, height: 4, patternUnits: 'userSpaceOnUse' });
    svgEl(pat, 'rect', { width: 4, height: 4, fill: 'url(#ixPlate)' });
    svgEl(pat, 'circle', { cx: 1, cy: 1, r: 1.05, fill: '#2b2318', 'fill-opacity': .55 });
    svgEl(pat, 'circle', { cx: 3, cy: 3, r: 1.05, fill: '#2b2318', 'fill-opacity': .55 });
  }
  svgEl(s, 'rect', { x: PX - 8, y: PY - 10, width: COLS * CW + 14, height: ROWS * CH + 16, rx: 7,
    fill: 'url(#ixHalf)', stroke: '#8d8268', 'stroke-width': 1.5 });
  /* the inverted blocks, drawn under the cells: a light panel for the capitals,
     a dark one for the lowercase — the plate's photographic-negative trick */
  const ZFILL = { caps: '#e9e0bb', lower: '#231d13' };
  const zoneAt = (r, c) => {
    const z = DUPRE.indexPlate.ZONES.find(z =>
      r >= z.rows[0] && r <= z.rows[1] && c >= z.cols[0] && c <= z.cols[1]);
    return z ? z.zone : 'ring';
  };
  DUPRE.indexPlate.ZONES.forEach(z => {
    svgEl(s, 'rect', {
      x: PX + z.cols[0] * CW - 1, y: PY + z.rows[0] * CH - 1,
      width: (z.cols[1] - z.cols[0] + 1) * CW + 2, height: (z.rows[1] - z.rows[0] + 1) * CH + 2,
      fill: ZFILL[z.zone] || 'none',
    });
  });

  let sel = null, buf = '';
  /* null-prototype: cells is keyed by the plate's characters, and a plain {} would
     resolve select('constructor') through Object.prototype and throw. */
  const cells = Object.create(null);
  const render = () => { paper.textContent = (buf.length > 21 ? '‹' + buf.slice(-20) : buf.padEnd(21, ' ')).replace(/ /g, '␣'); };
  /* The stylus: a cone on a short shaft, hovering over the selected cell. The
     Mignon's arm reaches back to a pivot, but a full arm drawn here crosses the
     plate and hides the characters the operator is trying to read — the one thing
     this instrument must not do. A tip is enough to say "the pointer is here". */
  const arm = svgEl(s, 'g', {}); arm.setAttribute('class', 'ix-stylus');
  svgEl(arm, 'line', { x1: 0, y1: -9, x2: 0, y2: -20, stroke: 'url(#ixSteel)', 'stroke-width': 2.6 });
  svgEl(arm, 'circle', { cx: 0, cy: -21, r: 3.4, fill: 'url(#ixSteel)', stroke: '#5c626e', 'stroke-width': .6 });
  svgEl(arm, 'path', { d: 'M -3.6 -9 L 3.6 -9 L 0 0 Z', fill: 'url(#ixSteel)', stroke: '#41464f', 'stroke-width': .7 });
  arm.style.transition = 'transform .12s';
  arm.style.opacity = '0';

  const select = c => {
    const cell = cells[c]; if (!cell) return;
    sel = c;
    Object.values(cells).forEach(x => x.ring.setAttribute('stroke-opacity', '.35'));
    cell.ring.setAttribute('stroke-opacity', '1');
    arm.style.opacity = '1';
    arm.setAttribute('transform', `translate(${cell.x},${cell.y - 9})`);
    onChange(buf, 'stylus over ' + c);
  };
  L.forEach((row, r) => row.forEach((c, i) => {
    if (!c) return;
    const x = PX + i * CW + CW / 2, y = PY + r * CH + CH / 2;
    /* disc and glyph invert together, by zone: dark disc + light glyph inside the
       capitals block, the negative of that in the lowercase block, light-on-dark
       everywhere on the ring. */
    const z = zoneAt(r, i);
    const DISC = { caps: '#231d13', lower: '#f2ecd6', ring: '#f2ecd6' };
    const INK = { caps: '#f2ecd6', lower: '#231d13', ring: '#231d13' };
    const g = svgEl(s, 'g', {}); g.setAttribute('class', 'ix-cell');
    g.dataset.c = c; g.dataset.zone = z;
    g.style.cursor = 'pointer';
    const ring = svgEl(g, 'circle', { cx: x, cy: y, r: 8.6, fill: DISC[z],
      stroke: z === 'caps' ? '#e9e0bb' : '#7a6a3e', 'stroke-width': 1.4, 'stroke-opacity': .35 });
    svgEl(g, 'text', { x, y: y + 3.6, 'text-anchor': 'middle',
      'font-size': /[a-z]/.test(c) || /[A-Z]/.test(c) ? 9.5 : 8.5, 'font-weight': 600,
      'font-family': 'var(--mono)', fill: INK[z] }).textContent = c;
    cells[c] = { ring, x, y };
    g.addEventListener('click', () => press(c));
  }));
  s.appendChild(arm);

  /* the lever: the only thing that prints. Lives in the gutter right of the plate */
  const LX = PLATE_R + GUT / 2;
  const lever = svgEl(s, 'g', {}); lever.setAttribute('class', 'ix-lever');
  lever.style.cursor = 'pointer'; lever.style.transition = 'transform .08s';
  svgEl(lever, 'rect', { x: LX - 3.5, y: PY + 6, width: 7, height: 72, rx: 3.5, fill: 'url(#ixSteel)', stroke: '#5c626e', 'stroke-width': .8 });
  svgEl(lever, 'circle', { cx: LX, cy: PY + 2, r: 8, fill: 'url(#ixSteel)', stroke: '#5c626e', 'stroke-width': 1 });
  svgEl(s, 'text', { x: LX, y: PY + 94, 'text-anchor': 'middle', 'font-size': 6.5, 'letter-spacing': '.1em',
    'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = 'PRINT';
  const print = () => {
    if (!sel) { onChange(buf, 'no character selected'); return; }
    if (buf.length >= MAX) { onChange(buf, 'line full'); return; }
    buf += sel; render(); onChange(buf, buf);
    lever.style.transform = 'translateY(5px)';
    setTimeout(() => { lever.style.transform = ''; }, 90);
  };
  lever.addEventListener('click', () => press('PRINT'));
  s.appendChild(lever);

  /* fresh paper */
  const clr = svgEl(s, 'g', {}); clr.setAttribute('class', 'ix-clear'); clr.style.cursor = 'pointer';
  /* anchored to PY like the rest of the gutter stack, not to VH — mixing the two
     is what let a shorter plate slide this up onto the PRINT legend */
  svgEl(clr, 'rect', { x: LX - 16, y: PY + 104, width: 32, height: 18, rx: 3, fill: '#3a332a', stroke: '#5c5348', 'stroke-width': 1 });
  svgEl(clr, 'text', { x: LX, y: PY + 117, 'text-anchor': 'middle', 'font-size': 7.5, 'letter-spacing': '.08em',
    'font-family': 'var(--mono)', fill: 'var(--cream)' }).textContent = 'CLR';
  const fresh = () => { buf = ''; render(); onChange(buf, 'fresh paper'); };
  clr.addEventListener('click', () => press('CLR'));

  /* THE single entry. Every caller goes through it — cell clicks, the lever, CLR,
     the keyboard, and any port — so the mouse cannot quietly diverge from the keys.
     Binding the handlers straight to select/print/fresh worked only because press
     happened to be a pure dispatcher: the moment it grows a guard or a sound, the
     primary input on this card would skip it and every probe would stay green.
     Gated on ACTIONS, so it selects nothing it has no cell for. */
  const press = k => {
    if (!DUPRE.indexPlate.ACTIONS.has(k)) return;
    if (k === 'PRINT') return print();
    if (k === 'CLR') return fresh();
    select(k);
  };

  /* Keyboard, per the README's keyboard contract: bound to this element, never to
     the document. Typing SELECTS and Enter pulls the lever, which is the card's
     whole grammar carried onto the keys — a keypress that printed would make this
     R57 with a nicer plate. Nothing is uppercased on the way in, because the plate
     holds both cases: Shift picks the case, since 'a' and 'A' are different cells.
     Space isn't on the plate, so it isn't ours and still scrolls the page. */
  s.setAttribute('tabindex', '0');
  s.addEventListener('click', () => s.focus());
  s.addEventListener('keydown', e => {
    if (e.ctrlKey || e.metaKey || e.altKey) return;
    const k = DUPRE.indexPlate.KEYS[e.key];
    if (!k) return;
    e.preventDefault();          /* Enter would submit a form; a cell key has no default worth keeping */
    press(k);
  });

  render(); onChange('', 'point, then pull');
  return { el: s, get: () => buf, select, print, press, selected: () => sel };
};
/* The plate, as data. Capitals block beside lowercase at the same column offset,
   so a letter and its case sit in the same row six columns apart. Digits and the
   punctuation ring keep the Mignon's edges. Rewrite this table to relayout the
   plate: nothing below reads it except the renderer. */
/* The Mignon Model 4's own plate, transcribed from the reference photo
   (working/retro-stereo-widgets/references/2026-07-16-mignon-aeg-detail.jpg).
   Faithful first, iterate second — Craig's call, and the right order: the layout
   has things in it worth understanding before replacing.
   Two of its economies are load-bearing and easy to "fix" by accident:
     - There is no 1 and no 0. You type them with lowercase l and capital O.
     - J and j live out on the ring, not in the case blocks, which is why the
       inversion below is positional and not "capitals are dark".
   The two dashes differ: a long one top-right, a hyphen bottom-right. */
DUPRE.indexPlate.LAYOUT = [
  ['&','(',')',':','"','!', '?',"'",'ä','ö','ü','—'],
  ['§','P','F','U','G','Q', 'p','f','u','g','q',';'],
  ['J','V','I','N','A','B', 'v','i','n','a','b','j'],
  ['/','L','D','E','T','M', 'l','d','e','t','m',','],
  ['%','K','O','S','R','Z', 'k','o','s','r','z','='],
  ['¾','Y','C','H','W','X', 'y','c','h','w','x','+'],
  ['½','¼','2','3','4','5', '6','7','8','9','.','-'],
];
/* The plate's two inverted regions, as rectangles over LAYOUT rather than a rule
   about characters. On the real plate the capitals block is dark discs on a light
   panel and the lowercase block is its photographic negative, while everything on
   the outer ring stays light-on-halftone — including the capital J, which is why
   no case-based rule can describe this. Move a block, move its rectangle.
   rows and cols are inclusive [start, end] indices into LAYOUT. */
DUPRE.indexPlate.ZONES = [
  { rows: [1, 5], cols: [1, 5], zone: 'caps' },
  { rows: [1, 5], cols: [6, 10], zone: 'lower' },
];
/* Both tables are DERIVED from the layout, never maintained beside it: relaying
   the plate must not leave a keybinding aimed at a character it no longer has.
   Every plate character maps to itself (no case folding — the plate has both, so
   Shift does the work a shift key would), and Enter is the lever. Space is
   deliberately absent: there's no space cell yet, so Space isn't ours to claim. */
DUPRE.indexPlate.KEYS = (() => {
  const m = {};
  for (const c of DUPRE.indexPlate.LAYOUT.flat()) if (c) m[c] = c;
  m.Enter = 'PRINT';
  return m;
})();
/* Every argument press accepts. A superset of the KEYS values: CLR is a real
   control that no keystroke reaches, the same shape as the keypad's. */
DUPRE.indexPlate.ACTIONS = new Set([...DUPRE.indexPlate.LAYOUT.flat().filter(Boolean), 'PRINT', 'CLR']);

/* 03 horizontal fader — continuous 0-100 */
DUPRE.faderH = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const f = document.createElement('div'); f.className = 'fader';
  f.innerHTML = '<div class="slot"><div class="fill"></div></div><div class="cap"></div>';
  host.appendChild(f);
  let val;
  const set = p => {
    val = Math.max(0, Math.min(100, p));
    f.querySelector('.fill').style.width = val + '%';
    f.querySelector('.cap').style.left = val + '%';
    onChange(val, 'level ' + Math.round(val));
  };
  dragX(f, set);
  set(opts.value !== undefined ? opts.value : 68);
  return { el: f, get: () => val, set };
};

/* 04 vertical fader — one channel-strip fader; compose per channel */
DUPRE.faderV = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const f = document.createElement('div'); f.className = 'vfader';
  f.innerHTML = '<div class="slot"><div class="fill"></div></div><div class="cap"></div>';
  host.appendChild(f);
  let val;
  const set = p => {
    val = Math.max(0, Math.min(100, p));
    f.querySelector('.fill').style.height = val + '%';
    f.querySelector('.cap').style.bottom = val + '%';
    onChange(val, 'level ' + Math.round(val));
  };
  dragY(f, set);
  set(opts.value !== undefined ? opts.value : 60);
  return { el: f, get: () => val, set };
};

/* 05 rotary knob — drag up/down to turn, -150°..+150° sweep */
DUPRE.knob = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const min = opts.min !== undefined ? opts.min : 0, max = opts.max !== undefined ? opts.max : 100;
  const k = document.createElement('span'); k.className = 'knob';
  k.innerHTML = '<span class="ind"></span>';
  host.appendChild(k);
  let val;
  const set = v => {
    val = Math.max(min, Math.min(max, v));
    k.querySelector('.ind').style.transform = `rotate(${-150 + (val - min) / (max - min) * 300}deg)`;
    onChange(val, String(Math.round(val)));
  };
  dragDelta(k, () => val, set, { min, max });
  set(opts.value !== undefined ? opts.value : 53);
  return { el: k, get: () => val, set };
};

/* 06 segmented selector — pick one of a few. opts.accent picks the lit-segment
   color from DUPRE.segmented.STYLES (amber / green / red); defaults match the
   stylesheet fallbacks. setStyle(axis, name) restyles a live instance. */
DUPRE.segmented = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const items = opts.items || ['TIMER', 'ALARM', 'POMO'];
  const seg = document.createElement('div'); seg.className = 'seg'; host.appendChild(seg);
  const setStyle = (axis, name) => {
    const o = (DUPRE.segmented.STYLES[axis] || {})[name];
    if (!o) return;
    for (const [k, v] of Object.entries(o.vars)) seg.style.setProperty(k, v);
  };
  setStyle('accent', opts.accent || 'amber');
  const btns = items.map(t => { const b = document.createElement('button'); b.textContent = t; seg.appendChild(b); return b; });
  let idx;
  const set = i => { idx = i; btns.forEach((b, j) => b.classList.toggle('on', j === i)); onChange(i, items[i]); };
  btns.forEach((b, i) => b.addEventListener('click', () => set(i)));
  set(opts.active || 0);
  return { el: seg, get: () => idx, set, setStyle };
};
/* named styles per axis: dot = swatch color for pickers, vars = --seg-* overrides */
DUPRE.segmented.STYLES = {
  accent: {
    amber: { dot: 'var(--gold-hi)', vars: { '--seg-on-bg': 'linear-gradient(180deg,var(--amber-grad-top),var(--gold))', '--seg-on-ink': 'var(--panel)' } },
    green: { dot: '#8fb944', vars: { '--seg-on-bg': 'linear-gradient(180deg,#a9c95f,var(--pass))', '--seg-on-ink': 'var(--panel)' } },
    red: { dot: 'var(--fail)', vars: { '--seg-on-bg': 'linear-gradient(180deg,#d98a6f,var(--fail))', '--seg-on-ink': 'var(--panel)' } },
  },
};

/* 07 chip toggle — inline binary inside a line of text */
DUPRE.chipToggle = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const chip = document.createElement('span'); chip.className = 'chip';
  chip.textContent = opts.label || 'discoverable on';
  host.appendChild(chip);
  const setStyle = (axis, name) => {
    const o = (DUPRE.chipToggle.STYLES[axis] || {})[name];
    if (!o) return;
    for (const [k, v] of Object.entries(o.vars)) chip.style.setProperty(k, v);
  };
  setStyle('accent', opts.accent || 'amber');
  let on;
  const set = v => { on = !!v; chip.classList.toggle('on', on); onChange(on, on ? 'ON' : 'OFF'); };
  chip.addEventListener('click', () => set(!on));
  set(opts.on !== undefined ? opts.on : true);
  return { el: chip, get: () => on, set, setStyle };
};
/* The chip's lit colour, from the shared accent family. Gold was hardcoded, which
   let the chip say exactly one thing — but "on" is good in one panel, a warning in
   the next, and a fault in the one after. The colour is the claim, so it belongs
   to the consumer. */
DUPRE.chipToggle.STYLES = { accent: DUPRE.accentStyles('--chip-on') };

/* 08 arm-to-fire — two-stage confirm for destructive actions */
DUPRE.armButton = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const label = opts.label || 'forget', armLabel = opts.armLabel || label + '? again';
  const a = document.createElement('button'); a.className = 'arm'; a.textContent = label;
  host.appendChild(a);
  let armed = false;
  a.addEventListener('click', () => {
    if (!armed) { armed = true; a.classList.add('armed'); a.textContent = armLabel; onChange('armed', 'ARMED'); }
    else { armed = false; a.classList.remove('armed'); a.textContent = label; onChange('fired', 'FIRED · reset'); }
  });
  onChange('safe', 'SAFE');
  return { el: a, get: () => (armed ? 'armed' : 'safe'), fire: () => a.click() };
};

/* 09 lamp row — actionable list item: lamp + name + status, click to cycle */
DUPRE.lampRow = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const name = opts.name || 'WH-1000XM4';
  const states = opts.states || [['gold', 'tap to connect'], ['busy', 'connecting…'], ['', 'connected']];
  const row = document.createElement('div'); row.className = 'lrow';
  row.innerHTML = `<span class="dupre-lamp"></span><span class="who"><b></b></span><span class="what"></span>`;
  row.querySelector('b').textContent = name;
  host.appendChild(row);
  let idx;
  const set = i => {
    idx = i;
    row.querySelector('.dupre-lamp').className = 'dupre-lamp' + (states[i][0] ? ' dupre-' + states[i][0] : '');
    row.querySelector('.what').textContent = states[i][1];
    onChange(i, states[i][1]);
  };
  row.addEventListener('click', () => set((idx + 1) % states.length));
  set(opts.state || 0);
  return { el: row, get: () => idx, set };
};

/* 24 rotary selector — pick one of five printed detents by position */
DUPRE.rotarySelector = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const values = opts.values || [4, 6, 8, 10, 12];
  const fmt = opts.fmt || (v => 'size ' + v);
  const POS = [[14, 53], [28, 18], [50, 7], [72, 18], [86, 53]], ANG = [-70, -35, 0, 35, 70];
  const rs = document.createElement('span'); rs.className = 'rotsel';
  values.forEach((v, i) => {
    const p = document.createElement('span'); p.className = 'pos';
    p.style.left = POS[i][0] + '%'; p.style.top = POS[i][1] + '%'; p.textContent = v;
    rs.appendChild(p);
  });
  const k = document.createElement('span'); k.className = 'knob'; k.innerHTML = '<span class="ind"></span>'; rs.appendChild(k);
  host.appendChild(rs);
  let idx;
  const set = i => {
    idx = ((i % values.length) + values.length) % values.length;
    rs.querySelector('.ind').style.transform = `rotate(${ANG[idx]}deg)`;
    rs.querySelectorAll('.pos').forEach((p, j) => p.classList.toggle('on', j === idx));
    onChange(values[idx], fmt(values[idx]));
  };
  k.addEventListener('click', () => set(idx + 1));
  set(opts.index !== undefined ? opts.index : 2);
  return { el: rs, get: () => values[idx], set };
};

/* 25 slide-rule dial — lit pointer on a printed scale. The printed numerals
   are the majors; the integer units between them get minor ticks and are
   selectable too. Click a numeral, a mark, or between marks; ←/→ (↑/↓) step
   one unit. set() takes a stop index; get() returns the value. opts.skin picks
   a face from DUPRE.slideRule.STYLES (warm backlit / chrome / 80s black glass / marantz blue);
   setStyle(axis, name) restyles a live instance. */
DUPRE.slideRule = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const majors = opts.values || [4, 6, 8, 10, 12];
  const fmt = opts.fmt || (v => 'pos ' + v);
  const X = [12, 51, 90, 129, 168];
  /* expand to unit stops: every integer between adjacent numeric majors */
  const stops = [];
  majors.forEach((v, i) => {
    stops.push({ v, x: X[i], major: true });
    const b = majors[i + 1];
    if (typeof v === 'number' && typeof b === 'number')
      for (let u = v + 1; u < b; u++)
        stops.push({ v: u, x: X[i] + (X[i + 1] - X[i]) * (u - v) / (b - v), major: false });
  });
  const t = document.createElement('span'); t.className = 'tuner';
  t.tabIndex = 0; t.setAttribute('role', 'slider'); t.setAttribute('aria-label', 'slide-rule value');
  const setStyle = (axis, name) => {
    const o = (DUPRE.slideRule.STYLES[axis] || {})[name];
    if (!o) return;
    for (const [k, v] of Object.entries(o.vars)) t.style.setProperty(k, v);
  };
  setStyle('skin', opts.skin || 'warm');
  stops.forEach(s => {
    t.insertAdjacentHTML('beforeend', s.major
      ? `<span class="tick" style="left:${s.x}px"></span><span class="mk" style="left:${s.x}px">${s.v}</span>`
      : `<span class="tick mn" style="left:${s.x}px"></span>`);
  });
  const ndl = document.createElement('span'); ndl.className = 'ndl'; t.appendChild(ndl);
  host.appendChild(t);
  let idx;
  const set = i => {
    idx = Math.max(0, Math.min(stops.length - 1, i));
    ndl.style.left = stops[idx].x + 'px';
    t.querySelectorAll('.mk').forEach(m => m.classList.toggle('on', +m.textContent === stops[idx].v));
    onChange(stops[idx].v, fmt(stops[idx].v));
  };
  t.addEventListener('click', e => {
    const r = t.getBoundingClientRect();
    /* rect is visual px but stop coords are layout px — divide the CSS zoom out */
    const x = (e.clientX - r.left) * (t.offsetWidth / r.width);
    let best = 0, bd = 1e9; stops.forEach((s, j) => { const d = Math.abs(s.x - x); if (d < bd) { bd = d; best = j; } });
    set(best); t.focus();
  });
  t.addEventListener('keydown', e => {
    if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') { e.preventDefault(); set(idx - 1); }
    else if (e.key === 'ArrowRight' || e.key === 'ArrowUp') { e.preventDefault(); set(idx + 1); }
  });
  const initV = opts.value !== undefined ? opts.value : majors[opts.index !== undefined ? opts.index : 2];
  const init = stops.findIndex(s => s.v === initV);
  set(init < 0 ? 0 : init);
  return { el: t, get: () => stops[idx].v, set, setStyle };
};
/* named faces: dot = swatch color for pickers, vars = --tn-* overrides.
   warm restates the stylesheet fallbacks so switching back is exact. */
DUPRE.slideRule.STYLES = {
  skin: {
    warm: { dot: 'var(--gold-hi)', vars: {
      '--tn-bg': 'linear-gradient(180deg,#191510,#0b0908)', '--tn-brd': '#2a251c',
      '--tn-glow': 'rgba(var(--glow-lo),.12)', '--tn-tick': 'var(--steel)', '--tn-ink': 'var(--steel)',
      '--tn-on': 'var(--gold-hi)', '--tn-onglow': 'rgba(var(--glow-hi),.6)',
      '--tn-ndl': 'var(--fail)', '--tn-ndlglow': 'rgba(203,107,77,.85)' } },
    chrome: { dot: '#dfe6f2', vars: {
      '--tn-bg': 'linear-gradient(180deg,#e9e9e5,#bcbcb6)', '--tn-brd': '#8e8e88',
      '--tn-glow': 'rgba(255,255,255,.28)', '--tn-tick': '#3c3a34', '--tn-ink': '#3c3a34',
      '--tn-on': '#14110e', '--tn-onglow': 'none',
      '--tn-ndl': 'var(--fail)', '--tn-ndlglow': 'rgba(203,107,77,.45)' } },
    black: { dot: '#1c1a18', vars: {
      '--tn-bg': 'linear-gradient(180deg,#17181a,#08090a)', '--tn-brd': '#000',
      '--tn-glow': 'rgba(255,255,255,.05)', '--tn-tick': '#c8cac8', '--tn-ink': '#c8cac8',
      '--tn-on': '#f2f4f2', '--tn-onglow': 'rgba(242,244,242,.5)',
      '--tn-ndl': '#ff3b28', '--tn-ndlglow': 'rgba(255,59,40,.9)' } },
    blue: { dot: '#8fb4d8', vars: {
      '--tn-bg': 'linear-gradient(180deg,#0c1520,#070c14)', '--tn-brd': '#1c2c40',
      '--tn-glow': 'rgba(120,170,230,.16)', '--tn-tick': '#8fb4d8', '--tn-ink': '#8fb4d8',
      '--tn-on': '#cfe4ff', '--tn-onglow': 'rgba(150,200,255,.7)',
      '--tn-ndl': '#e8f2ff', '--tn-ndlglow': 'rgba(180,220,255,.9)' } },
  },
};

/* N01 rocker power switch — hard on/off, lit legend */
DUPRE.rocker = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const r = document.createElement('span'); r.className = 'rocker';
  r.innerHTML = `<span class="half top">${opts.onLabel || 'ON'}</span><span class="half bot">${opts.offLabel || 'OFF'}</span>`;
  host.appendChild(r);
  let on;
  const set = v => { on = !!v; r.classList.toggle('on', on); onChange(on, on ? 'ON' : 'OFF'); };
  r.addEventListener('click', () => set(!on));
  set(opts.on !== undefined ? opts.on : true);
  return { el: r, get: () => on, set };
};

/* N02 transport cluster — rew/play/stop/rec, one lit; reels turn while playing.
   opts.animate: reels obey play state (default: not prefers-reduced-motion) */
DUPRE.transport = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const animate = opts.animate !== undefined ? opts.animate : !matchMedia('(prefers-reduced-motion: reduce)').matches;
  const MODES = { rew: '⏮', play: '▶', stop: '⏹', rec: '⏺' };
  const NAMES = { rew: 'REW', play: 'PLAY', stop: 'STOP', rec: 'REC' };
  const wrap = document.createElement('div');
  wrap.style.cssText = 'display:flex;flex-direction:column;gap:6px;align-items:center';
  wrap.innerHTML = `<div class="reels"><span class="reel spin"><i></i><i></i><i></i></span><span class="reel spin"><i></i><i></i><i></i></span></div><div class="transport"></div>`;
  const bar = wrap.querySelector('.transport');
  const btns = {};
  for (const m of Object.keys(MODES)) {
    const b = document.createElement('button'); b.className = 'tbtn' + (m === 'rec' ? ' rec' : '');
    b.textContent = MODES[m]; bar.appendChild(b); btns[m] = b;
    b.addEventListener('click', () => set(m));
  }
  host.appendChild(wrap);
  let mode;
  const set = m => {
    mode = m;
    for (const k in btns) btns[k].classList.toggle('on', k === m);
    wrap.querySelectorAll('.reel.spin').forEach(r => r.style.animationPlayState = (m === 'play' && animate) ? 'running' : 'paused');
    onChange(m, NAMES[m]);
  };
  /* initial: light the mode but leave reel play-state to CSS, matching load behavior */
  mode = opts.mode || 'play';
  btns[mode].classList.add('on');
  onChange(mode, NAMES[mode]);
  return { el: wrap, get: () => mode, set };
};

/* N03 radio preset bank — mechanically exclusive presets */
DUPRE.presetBank = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const items = opts.items || ['WIFI', 'ETH', 'CELL', 'OFF'];
  const bank = document.createElement('div'); bank.className = 'radiobank'; host.appendChild(bank);
  const btns = items.map(t => { const b = document.createElement('button'); b.className = 'preset'; b.textContent = t; bank.appendChild(b); return b; });
  let idx;
  const set = i => { idx = i; btns.forEach((b, j) => b.classList.toggle('on', j === i)); onChange(i, items[i]); };
  btns.forEach((b, i) => b.addEventListener('click', () => set(i)));
  set(opts.active || 0);
  return { el: bank, get: () => idx, set };
};

/* N04 concentric dual knob — two values on one spindle, outer ring + inner cap */
DUPRE.dualKnob = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const dk = document.createElement('span'); dk.className = 'dualknob';
  dk.innerHTML = `<span class="outer"><span class="tick" style="transform:rotate(-120deg)"></span><span class="tick" style="transform:rotate(120deg)"></span></span><span class="inner"><span class="ind"></span></span>`;
  host.appendChild(dk);
  const o = dk.querySelector('.outer'), n = dk.querySelector('.inner');
  let oV, iV;
  const paint = () => {
    o.style.transform = `rotate(${-150 + oV / 100 * 300}deg)`;
    n.style.transform = `rotate(${-150 + iV / 100 * 300}deg)`;
    onChange(oV, iV);
  };
  dragDelta(o, () => oV, v => { oV = v; paint(); }, { min: 0, max: 100 });
  dragDelta(n, () => iV, v => { iV = v; paint(); }, { min: 0, max: 100, stop: true });
  oV = opts.outer !== undefined ? opts.outer : 50;
  iV = opts.inner !== undefined ? opts.inner : 50;
  paint();
  return { el: dk, get: () => [oV, iV], set: (a, b) => { if (a !== undefined) oV = a; if (b !== undefined) iV = b; paint(); } };
};

/* N05 rotary encoder + LED ring — endless dial, lit arc tracks the level */
DUPRE.encoder = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const enc = document.createElement('span'); enc.className = 'encoder'; host.appendChild(enc);
  const R = 27, cx = 33, cy = 33;
  for (let i = 0; i < 12; i++) {
    const a = (i * 30 - 90) * Math.PI / 180;
    const d = document.createElement('span'); d.className = 'led';
    d.style.left = (cx + R * Math.cos(a)) + 'px'; d.style.top = (cy + R * Math.sin(a)) + 'px';
    enc.appendChild(d);
  }
  const k = document.createElement('span'); k.className = 'knob'; k.innerHTML = '<span class="ind"></span>'; enc.appendChild(k);
  let val;
  const set = v => {
    val = v;
    const lit = ((Math.floor(val) % 12) + 12) % 12;
    enc.querySelectorAll('.led').forEach((l, i) => l.classList.toggle('on', i <= lit));
    k.style.transform = `rotate(${val * 30}deg)`;
    onChange(val, 'pos ' + Math.round(val));
  };
  dragDelta(enc, () => val, set, { min: 0, max: 100000, sens: 0.25 });
  set(opts.value !== undefined ? opts.value : 7);
  return { el: enc, get: () => val, set };
};

/* N06 keyed mode switch — guarded three-position mode, key-bit points at the live one */
DUPRE.keySwitch = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const items = opts.items || ['OFF', 'ON', 'RUN'];
  const ANG = [-70, 0, 70], POS = [[16, 64], [50, 12], [84, 64]];
  const kl = document.createElement('span'); kl.className = 'keylock';
  items.forEach((t, i) => {
    const p = document.createElement('span'); p.className = 'kpos';
    p.style.left = POS[i][0] + '%'; p.style.top = POS[i][1] + '%'; p.textContent = t;
    kl.appendChild(p);
  });
  const body = document.createElement('span'); body.className = 'body';
  body.innerHTML = '<span class="bit"></span><span class="barrel"></span>';
  kl.appendChild(body); host.appendChild(kl);
  let idx;
  const set = i => {
    idx = ((i % items.length) + items.length) % items.length;
    body.querySelector('.bit').style.transform = `rotate(${ANG[idx]}deg)`;
    kl.querySelectorAll('.kpos').forEach((p, j) => p.classList.toggle('on', j === idx));
    onChange(idx, items[idx]);
  };
  body.addEventListener('click', () => set(idx + 1));
  set(opts.index !== undefined ? opts.index : 1);
  return { el: kl, get: () => idx, set };
};

/* N07 center-detented crossfader — throw to either side of zero */
DUPRE.crossfader = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const xf = document.createElement('div'); xf.className = 'xfader';
  xf.innerHTML = `<div class="slot"></div><div class="detent"></div><span class="end" style="left:0">${opts.aLabel || 'A'}</span><span class="end" style="right:0">${opts.bLabel || 'B'}</span><div class="cap"></div>`;
  host.appendChild(xf);
  let pct;
  const set = p => {
    pct = Math.max(0, Math.min(100, p));
    xf.querySelector('.cap').style.left = pct + '%';
    const v = Math.round(pct - 50);
    onChange(v, (v > 0 ? '+' : '') + v);
  };
  dragX(xf, set);
  set(opts.value !== undefined ? opts.value : 50);
  return { el: xf, get: () => Math.round(pct - 50), set };
};

/* N08 thumbwheel — knurled edge-wheel with a windowed two-digit value */
DUPRE.thumbwheel = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const w = document.createElement('div'); w.className = 'thumbw';
  w.innerHTML = '<span class="thumbwheel"></span><span class="win"></span>';
  host.appendChild(w);
  let val;
  const set = v => {
    val = Math.round(v);
    const s = ((val % 100) + 100) % 100;
    w.querySelector('.win').textContent = String(s).padStart(2, '0');
    onChange(s, 'value ' + s);
  };
  dragDelta(w.querySelector('.thumbwheel'), () => val, set, { min: 0, max: 99, sens: 0.2 });
  set(opts.value !== undefined ? opts.value : 42);
  return { el: w, get: () => ((val % 100) + 100) % 100, set };
};

/* N09 DIP-switch bank — hard flags, up is on; readout is the binary word */
DUPRE.dipBank = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const bits = opts.bits || [true, false, true, true, false, false];
  const bank = document.createElement('span'); bank.className = 'dip'; host.appendChild(bank);
  const sws = bits.map(on => {
    const s = document.createElement('span'); s.className = 'dipsw' + (on ? ' on' : '');
    s.innerHTML = '<i></i>'; bank.appendChild(s); return s;
  });
  const word = () => sws.map(x => x.classList.contains('on') ? '1' : '0').join('');
  const upd = () => onChange(word(), word());
  sws.forEach(s => s.addEventListener('click', () => { s.classList.toggle('on'); upd(); }));
  upd();
  return { el: bank, get: word, set: w => { sws.forEach((s, i) => s.classList.toggle('on', w[i] === '1')); upd(); } };
};

/* N10 jog / shuttle wheel — scrub fine; position accumulates without limit */
DUPRE.jogWheel = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const j = document.createElement('span'); j.className = 'jog';
  j.innerHTML = `<span class="shuttle" style="--sh:40deg"></span><span class="inner"><span class="dimple"></span></span>`;
  host.appendChild(j);
  let val;
  const set = v => {
    val = v;
    j.querySelector('.inner').style.transform = `rotate(${val * 4}deg)`;
    onChange(val, 'pos ' + Math.round(val));
  };
  dragDelta(j, () => val, set, { min: -100000, max: 100000, sens: 0.5 });
  set(opts.value !== undefined ? opts.value : 0);
  return { el: j, get: () => val, set };
};

/* ---- shared SVG defs: gradients/filters referenced by url(#id) are
   document-scoped, and several are used across instruments. Builders ensure the
   defs they use; the first caller creates it, later calls are no-ops. ---- */
let defsRoot = null;
const defsMade = new Set();
function defsHost() {
  if (!defsRoot) {
    const svg = document.createElementNS(SVGNS, 'svg');
    svg.setAttribute('width', 0); svg.setAttribute('height', 0);
    svg.setAttribute('aria-hidden', 'true');
    svg.style.position = 'absolute';
    defsRoot = document.createElementNS(SVGNS, 'defs');
    svg.appendChild(defsRoot);
    document.body.appendChild(svg);
  }
  return defsRoot;
}
function def(id, make) { if (defsMade.has(id)) return; defsMade.add(id); make(defsHost(), id); }
function gradDef(id, kind, attrs, stops) {
  def(id, d => {
    const g = svgEl(d, kind, Object.assign({ id }, attrs));
    for (const [offset, color] of stops) svgEl(g, 'stop', { offset, 'stop-color': color });
  });
}
function stageSvg(host, cls, vw, vh) {
  const s = document.createElementNS(SVGNS, 'svg');
  s.setAttribute('class', cls); s.setAttribute('viewBox', `0 0 ${vw} ${vh}`);
  s.setAttribute('width', vw); s.setAttribute('height', vh);
  host.appendChild(s); return s;
}
/* instance-unique ids for defs that can't be shared (e.g. clip paths sized per instance) */
let uidN = 0;
function uid(prefix) { return prefix + '-' + (++uidN); }

/* R02 calibrated vernier dial — the disc turns under a fixed hairline */
DUPRE.vernierDial = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 150, 150), cx = 75, cy = 75;
  gradDef('vernFace', 'radialGradient', { cx: '50%', cy: '45%', r: '60%' }, [['0', '#f7f2da'], ['1', '#e4dfc2']]);
  gradDef('bakeKnob', 'radialGradient', { cx: '42%', cy: '36%', r: '75%' }, [['0', '#37332c'], ['1', '#060505']]);
  svgEl(s, 'circle', { cx, cy, r: 72, fill: '#0c0b0a', stroke: '#262320' });
  const disc = svgEl(s, 'g', {});
  svgEl(disc, 'circle', { cx, cy, r: 66, fill: 'url(#vernFace)', stroke: '#b7b29a', 'stroke-width': 1 });
  for (let u = 0; u <= 100; u++) {
    const a = u * 3, major = u % 10 === 0, half = u % 5 === 0;
    const len = major ? 10 : half ? 7 : 4.5, [x1, y1] = polar(cx, cy, 63, a), [x2, y2] = polar(cx, cy, 63 - len, a);
    svgEl(disc, 'line', { x1, y1, x2, y2, stroke: '#3a3128', 'stroke-width': major ? 1.3 : half ? 1 : .7 });
    if (major) {
      const g = svgEl(disc, 'g', { transform: `rotate(${a},${cx},${cy})` });
      svgEl(g, 'text', { x: cx, y: cy - 44, 'text-anchor': 'middle', 'font-size': 7.5, 'font-family': 'var(--mono)', fill: '#3a3128' }).textContent = u;
    }
  }
  for (let k = 0; k < 12; k++) { const [x, y] = polar(cx, cy, 24, k * 30); svgEl(s, 'circle', { cx: x, cy: y, r: 4.8, fill: 'url(#bakeKnob)' }); }
  svgEl(s, 'circle', { cx, cy, r: 24, fill: 'url(#bakeKnob)', stroke: '#000', 'stroke-width': .6 });
  svgEl(s, 'circle', { cx, cy, r: 16, fill: 'url(#bakeKnob)' });
  svgEl(s, 'ellipse', { cx: 69, cy: 66, rx: 7, ry: 4, fill: 'rgba(255,255,255,.10)', transform: 'rotate(-32,69,66)' });
  svgEl(s, 'line', { x1: cx, y1: 6, x2: cx, y2: 22, stroke: 'var(--fail)', 'stroke-width': 2.2, 'stroke-linecap': 'round' });
  let val;
  const set = v => { val = v; disc.setAttribute('transform', `rotate(${-v * 3},75,75)`); onChange(val, val.toFixed(1)); };
  dragDelta(s, () => val, set, { min: 0, max: 100, sens: 0.15 });
  set(opts.value !== undefined ? opts.value : 42.0);
  return { el: s, get: () => val, set };
};

/* R03 bat-handle toggle — chrome lever throws between lit legends */
DUPRE.batToggle = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 70, 90), cx = 35, cy = 44;
  gradDef('nutG', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#8a8578'], ['1', '#4e4a42']]);
  gradDef('chromeG', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 0 }, [['0', '#7e7a70'], ['.45', '#e8e5db'], ['1', '#8a867c']]);
  gradDef('tipG', 'radialGradient', { cx: '40%', cy: '32%', r: '75%' }, [['0', '#f2efe8'], ['1', '#7e7a70']]);
  const lblOn = svgEl(s, 'text', { x: cx, y: 9, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.1em', 'font-family': 'var(--mono)', fill: 'var(--gold-hi)' });
  lblOn.textContent = opts.onLabel || 'ON';
  const lblOff = svgEl(s, 'text', { x: cx, y: 87, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.1em', 'font-family': 'var(--mono)', fill: 'var(--dim)' });
  lblOff.textContent = opts.offLabel || 'OFF';
  const pts = []; for (let k = 0; k < 6; k++) { const a = (k * 60 + 30) * Math.PI / 180; pts.push((cx + 17 * Math.cos(a)) + ',' + (cy + 17 * Math.sin(a))); }
  svgEl(s, 'polygon', { points: pts.join(' '), fill: 'url(#nutG)', stroke: '#2b2822' });
  svgEl(s, 'circle', { cx, cy, r: 9, fill: '#14110e', stroke: '#000' });
  const lever = svgEl(s, 'g', {});
  svgEl(lever, 'path', { d: `M ${cx - 3.2} ${cy} L ${cx - 1.8} 21 L ${cx + 1.8} 21 L ${cx + 3.2} ${cy} Z`, fill: 'url(#chromeG)', stroke: '#4e4a42', 'stroke-width': .5 });
  svgEl(lever, 'ellipse', { cx, cy: 17, rx: 6.5, ry: 8, fill: 'url(#tipG)', stroke: '#5e5a52', 'stroke-width': .6 });
  lever.style.transformOrigin = `${cx}px ${cy}px`; lever.style.transition = 'transform .12s';
  let on;
  const set = v => {
    on = !!v;
    lever.style.transform = on ? 'rotate(0deg)' : 'rotate(180deg)';
    lblOn.setAttribute('fill', on ? 'var(--gold-hi)' : 'var(--dim)');
    lblOff.setAttribute('fill', on ? 'var(--dim)' : 'var(--gold-hi)');
    onChange(on, on ? 'ON' : 'OFF');
  };
  s.addEventListener('click', () => set(!on));
  set(opts.on !== undefined ? opts.on : true);
  return { el: s, get: () => on, set };
};

/* R04 bakelite fluted knob — scallop skirt over a printed 0-10 arc */
DUPRE.flutedKnob = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 110, 110), cx = 55, cy = 54;
  gradDef('bakeSk', 'radialGradient', { cx: '42%', cy: '36%', r: '80%' }, [['0', '#312d27'], ['1', '#050404']]);
  gradDef('bakeDome', 'radialGradient', { cx: '40%', cy: '32%', r: '80%' }, [['0', '#3a362f'], ['1', '#0a0908']]);
  for (let i = 0; i <= 10; i++) {
    const a = -135 + i * 27, major = i % 5 === 0;
    const [x1, y1] = polar(cx, cy, 38, a), [x2, y2] = polar(cx, cy, major ? 45 : 43.5, a);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--steel)', 'stroke-width': major ? 1.5 : 1 });
    if (major) {
      const [x, y] = polar(cx, cy, 50.5, a);
      svgEl(s, 'text', { x, y: y + 2.6, 'text-anchor': 'middle', 'font-size': 8, 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = i;
    }
  }
  for (let k = 0; k < 18; k++) { const [x, y] = polar(cx, cy, 31, k * 20); svgEl(s, 'circle', { cx: x, cy: y, r: 3.4, fill: 'url(#bakeSk)' }); }
  svgEl(s, 'circle', { cx, cy, r: 31, fill: 'url(#bakeSk)', stroke: '#000', 'stroke-width': .6 });
  const idx = svgEl(s, 'line', { x1: cx, y1: cy - 30, x2: cx, y2: cy - 21, stroke: 'var(--gold-hi)', 'stroke-width': 2.4, 'stroke-linecap': 'round' });
  svgEl(s, 'circle', { cx, cy, r: 19, fill: 'url(#bakeDome)' });
  svgEl(s, 'ellipse', { cx: 49, cy: 46, rx: 6, ry: 3.5, fill: 'rgba(255,255,255,.14)', transform: 'rotate(-28,49,46)' });
  let val;
  const set = v => { val = v; idx.setAttribute('transform', `rotate(${v * 2.7 - 135},55,54)`); onChange(val, (val / 10).toFixed(1) + ' / 10'); };
  dragDelta(s, () => val, set, { min: 0, max: 100, sens: 0.25 });
  set(opts.value !== undefined ? opts.value : 63);
  return { el: s, get: () => val, set };
};

/* R05 filter slider bank — a dense fader wall on a real faceplate. Period skins
   as constructor opts backed by DUPRE.filterBank.STYLES, three independent axes:
   panel (silver hi-fi aluminum / studio black), caps — the cap SHAPE
   (chrome T / short ribbed / tall block fader), and capColor — the cap
   FINISH (black white-index / color stripes / chrome / cream). opts.style
   picks a native trio (silver+chrome+chrome, studio+ribbed+red);
   opts.panel / opts.caps / opts.capColor override an axis; setStyle(axis, name)
   restyles live (values kept). After the Pioneer SG-9500, the Technics
   SH-8065, and the Zaxcom Oasis block faders. */
DUPRE.filterBank = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const freqs = opts.freqs || [78, 113, 163, 235, 339, 487, 701, 1010, 1450, 2090, 3010, 4340];
  const vals = (opts.values || [18, 30, 42, 25, 35, 55, 20, 48, 38, 26, 44, 32]).slice(0, freqs.length);
  while (vals.length < freqs.length) vals.push(30);
  const fmtHz = f => f < 1000 ? f : (f / 1000).toFixed(1).replace(/\.0$/, '') + 'k';
  const ST = DUPRE.filterBank.STYLES;
  const native = {
    silver: { caps: 'chrome', capColor: 'chrome' },
    studio: { caps: 'ribbed', capColor: 'red' },
  };
  const nat = native[opts.style] || {};
  const cur = {
    panel: ST.panel[opts.panel] ? opts.panel : (ST.panel[opts.style] ? opts.style : 'silver'),
    caps: ST.caps[opts.caps] ? opts.caps : (nat.caps || 'block'),
    capColor: ST.capColor[opts.capColor] ? opts.capColor : (nat.capColor || 'black'),
  };
  gradDef('fbPlateSilver', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#d8d8d4'], ['.5', '#c6c6c1'], ['1', '#adada7']]);
  gradDef('fbPlateStudio', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#221f1c'], ['1', '#131110']]);
  gradDef('sfChrome', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f0efec'], ['.45', '#c4c1b9'], ['1', '#75726a']]);
  gradDef('fbCapBlack', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#2a2724'], ['1', '#171412']]);
  gradDef('fbCapCream', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f2ecd8'], ['1', '#cfc8ae']]);
  const s = stageSvg(host, 'rsvg', 250, 112);
  const y0 = 20, y1 = 92, x0 = 36, dx = (214 - x0) / (freqs.length - 1);
  const yOf = db => y0 + db / 60 * (y1 - y0);
  const caps = [];
  const place = i => caps[i].setAttribute('transform', `translate(0,${yOf(vals[i])})`);
  const drawCap = (g, kind, x) => {
    const c = ST.capColor[cur.capColor];
    if (kind === 'chrome') {
      svgEl(g, 'rect', { x: x - 6, y: -3.25, width: 12, height: 6.5, rx: .9, fill: c.body, stroke: c.edge, 'stroke-width': .6 });
      /* bare metal needs no painted stripe — chrome-on-chrome stays lineless */
      if (cur.capColor !== 'chrome')
        svgEl(g, 'line', { x1: x - 6, y1: 0, x2: x + 6, y2: 0, stroke: c.index, 'stroke-width': 1 });
      svgEl(g, 'line', { x1: x - 6, y1: 2, x2: x + 6, y2: 2, stroke: c.rib, 'stroke-width': .5 });
    } else if (kind === 'ribbed') {
      svgEl(g, 'rect', { x: x - 5, y: -4, width: 10, height: 8, rx: 1, fill: c.body, stroke: c.edge, 'stroke-width': .6 });
      for (const dy of [-2.4, 2.4])
        svgEl(g, 'line', { x1: x - 4, y1: dy, x2: x + 4, y2: dy, stroke: c.rib, 'stroke-width': .6 });
      svgEl(g, 'line', { x1: x - 5, y1: 0, x2: x + 5, y2: 0, stroke: c.index, 'stroke-width': 1.1 });
    } else { /* block — tall ribbed fader after the Zaxcom Oasis; fine rib
      groups above and below a mid-cap index line that marks the value */
      svgEl(g, 'rect', { x: x - 4.5, y: -8, width: 9, height: 16, rx: 1.1, fill: c.body, stroke: c.edge, 'stroke-width': .6 });
      for (const dy of [-6.4, -4.8, -3.2, -1.6, 1.6, 3.2, 4.8, 6.4])
        svgEl(g, 'line', { x1: x - 3.7, y1: dy, x2: x + 3.7, y2: dy, stroke: c.rib, 'stroke-width': .6 });
      svgEl(g, 'line', { x1: x - 4.5, y1: 0, x2: x + 4.5, y2: 0, stroke: c.index, 'stroke-width': 1.2 });
    }
  };
  const set = (i, db) => {
    db = Math.max(0, Math.min(60, db)); vals[i] = db; place(i);
    onChange({ band: i, hz: freqs[i], db }, `${fmtHz(freqs[i])} Hz · −${Math.round(db)} dB`);
  };
  const render = () => {
    const st = ST.panel[cur.panel];
    s.replaceChildren(); caps.length = 0;
    svgEl(s, 'rect', { x: 1.5, y: 1.5, width: 247, height: 109, rx: 5, fill: st.plate, stroke: st.edge, 'stroke-width': 1 });
    svgEl(s, 'rect', { x: 3, y: 3, width: 244, height: 106, rx: 4, fill: 'none', stroke: st.bevel, 'stroke-width': .7 });
    [[9, 9], [241, 9], [9, 103], [241, 103]].forEach(([sx, sy], k) => {
      svgEl(s, 'circle', { cx: sx, cy: sy, r: 2.7, fill: st.screw, stroke: 'rgba(0,0,0,.55)', 'stroke-width': .6 });
      svgEl(s, 'line', { x1: sx - 1.9, y1: sy, x2: sx + 1.9, y2: sy, stroke: 'rgba(0,0,0,.6)', 'stroke-width': .7, transform: `rotate(${25 + k * 40},${sx},${sy})` });
    });
    for (let db = 0; db <= 60; db += 10) {
      const y = yOf(db), major = db % 20 === 0, len = major ? 4 : 2.5;
      svgEl(s, 'line', { x1: 24 - len, y1: y, x2: 24, y2: y, stroke: st.dim, 'stroke-width': major ? .9 : .6 });
      svgEl(s, 'line', { x1: 226, y1: y, x2: 226 + len, y2: y, stroke: st.dim, 'stroke-width': major ? .9 : .6 });
      if (major) {
        svgEl(s, 'text', { x: 17, y: y + 2, 'text-anchor': 'end', 'font-size': 5.2, 'font-family': 'var(--mono)', fill: st.ink }).textContent = db;
        svgEl(s, 'text', { x: 233, y: y + 2, 'text-anchor': 'start', 'font-size': 5.2, 'font-family': 'var(--mono)', fill: st.ink }).textContent = db;
      }
    }
    svgEl(s, 'text', { x: 20, y: 100, 'text-anchor': 'end', 'font-size': 4.6, 'font-family': 'var(--mono)', fill: st.dim }).textContent = 'dB';
    freqs.forEach((f, i) => {
      const x = x0 + i * dx;
      svgEl(s, 'text', { x, y: 13, 'text-anchor': 'middle', 'font-size': 4.6, 'font-family': 'var(--mono)', fill: st.ink }).textContent = fmtHz(f);
      svgEl(s, 'line', { x1: x, y1: y0, x2: x, y2: y1, stroke: st.track, 'stroke-width': st.trackW, 'stroke-linecap': 'round' });
      if (st.trackHi) svgEl(s, 'line', { x1: x - st.trackW / 2 - .35, y1: y0, x2: x - st.trackW / 2 - .35, y2: y1, stroke: st.trackHi, 'stroke-width': .7 });
      const cap = svgEl(s, 'g', {});
      drawCap(cap, cur.caps, x);
      caps.push(cap); place(i);
      const hit = svgEl(s, 'rect', { x: x - dx / 2, y: y0 - 6, width: dx, height: y1 - y0 + 12, fill: 'transparent' });
      hit.style.cursor = 'ns-resize';
      dragY(hit, pct => set(i, (100 - pct) / 100 * 60));
    });
  };
  const setStyle = (axis, name) => {
    if (!ST[axis] || !ST[axis][name]) return;
    cur[axis] = name; render();
  };
  render();
  onChange(null, 'drag a band');
  return { el: s, get: () => vals.slice(), set, setStyle };
};
/* named styles per axis: dot = swatch color for pickers. caps is the cap
   shape; capColor is the cap finish (body + rib + index line), applicable to
   any shape. */
DUPRE.filterBank.STYLES = {
  panel: {
    silver: { dot: '#c9c9c5', plate: 'url(#fbPlateSilver)', edge: '#8e8e88', bevel: 'rgba(255,255,255,.4)', ink: '#33332f', dim: '#5c5c56', screw: '#9c9c96', track: '#121210', trackW: 2.0, trackHi: null },
    studio: { dot: '#1c1a18', plate: 'url(#fbPlateStudio)', edge: '#000', bevel: 'rgba(255,255,255,.06)', ink: '#b9b4a6', dim: '#6f6a5e', screw: '#3c3832', track: '#050505', trackW: 2.2, trackHi: 'rgba(255,255,255,.05)' },
  },
  caps: {
    block: { dot: '#2c2824' },
    ribbed: { dot: '#6f6a5e' },
    chrome: { dot: '#dfe6f2' },
  },
  capColor: {
    black: { dot: '#211e1b', body: 'url(#fbCapBlack)', rib: 'rgba(255,255,255,.16)', index: '#f2f4f2', edge: '#000' },
    red: { dot: 'var(--sevred)', body: 'url(#fbCapBlack)', rib: 'rgba(255,255,255,.16)', index: 'var(--sevred)', edge: '#000' },
    green: { dot: 'var(--sevgrn)', body: 'url(#fbCapBlack)', rib: 'rgba(255,255,255,.16)', index: 'var(--sevgrn)', edge: '#000' },
    blue: { dot: '#4f9fe0', body: 'url(#fbCapBlack)', rib: 'rgba(255,255,255,.16)', index: '#4f9fe0', edge: '#000' },
    amber: { dot: 'var(--gold-hi)', body: 'url(#fbCapBlack)', rib: 'rgba(255,255,255,.16)', index: 'var(--gold-hi)', edge: '#000' },
    chrome: { dot: '#dfe6f2', body: 'url(#sfChrome)', rib: 'rgba(0,0,0,.28)', index: '#14110e', edge: '#3c3a34' },
    cream: { dot: '#efe9d4', body: 'url(#fbCapCream)', rib: 'rgba(0,0,0,.18)', index: '#3a3128', edge: '#8a8474' },
  },
};

/* R06 chicken-head selector — tapered lever aims at the position */
DUPRE.chickenHead = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const items = opts.items || [['OFF', -60], ['LO', -20], ['MID', 20], ['HI', 60]];
  const s = stageSvg(host, 'rsvg press', 110, 96), cx = 55, cy = 58;
  gradDef('chickG', 'radialGradient', { cx: '42%', cy: '34%', r: '80%' }, [['0', '#35312b'], ['1', '#070606']]);
  const lbls = [];
  items.forEach(([lbl, a]) => {
    const [tx, ty] = polar(cx, cy, 42, a);
    const t = svgEl(s, 'text', { x: tx, y: ty + 2.5, 'text-anchor': 'middle', 'font-size': 6.5, 'letter-spacing': '.06em', 'font-family': 'var(--mono)', fill: 'var(--dim)' });
    t.textContent = lbl; lbls.push(t);
    const [mx1, my1] = polar(cx, cy, 33, a), [mx2, my2] = polar(cx, cy, 29, a);
    svgEl(s, 'line', { x1: mx1, y1: my1, x2: mx2, y2: my2, stroke: 'var(--steel)', 'stroke-width': 1.2 });
  });
  svgEl(s, 'circle', { cx, cy, r: 12, fill: '#0c0b0a' });
  const lever = svgEl(s, 'g', {});
  svgEl(lever, 'path', { d: `M ${cx} ${cy - 29} L ${cx + 8.5} ${cy - 4} Q ${cx + 9} ${cy + 8} ${cx + 5} ${cy + 11} A 7 7 0 0 1 ${cx - 5} ${cy + 11} Q ${cx - 9} ${cy + 8} ${cx - 8.5} ${cy - 4} Z`, fill: 'url(#chickG)', stroke: '#000', 'stroke-width': .7 });
  svgEl(lever, 'line', { x1: cx, y1: cy - 26, x2: cx, y2: cy + 6, stroke: '#4a463e', 'stroke-width': 1.4, 'stroke-linecap': 'round' });
  lever.style.transformOrigin = `${cx}px ${cy}px`; lever.style.transition = 'transform .12s';
  let idx;
  const set = i => {
    idx = ((i % items.length) + items.length) % items.length;
    lever.style.transform = `rotate(${items[idx][1]}deg)`;
    lbls.forEach((t, k) => t.setAttribute('fill', k === idx ? 'var(--gold-hi)' : 'var(--dim)'));
    onChange(idx, items[idx][0]);
  };
  s.addEventListener('click', () => set(idx + 1));
  set(opts.index !== undefined ? opts.index : 2);
  return { el: s, get: () => idx, set };
};

/* R12 chrome slot fader — engraved dB scale, chrome T-handle in a screwed plate */
DUPRE.slotFader = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 90, 150), cx = 45, yTop = 30, yBot = 120;
  const yOf = db => yTop + (12 - db) / 36 * (yBot - yTop);
  gradDef('sfPlate', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 1 }, [['0', '#242019'], ['1', '#131110']]);
  gradDef('sfChrome', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f0efec'], ['.45', '#c4c1b9'], ['1', '#75726a']]);
  gradDef('sfScrew', 'radialGradient', { cx: '40%', cy: '35%', r: '75%' }, [['0', '#9b968a'], ['1', '#4a463e']]);
  svgEl(s, 'rect', { x: 14, y: 8, width: 62, height: 134, rx: 6, fill: 'url(#sfPlate)', stroke: '#0a0908', 'stroke-width': 1.5 });
  svgEl(s, 'rect', { x: 15.5, y: 9.5, width: 59, height: 131, rx: 5, fill: 'none', stroke: 'rgba(255,255,255,.05)', 'stroke-width': 1 });
  for (const sy of [16, 134]) {
    svgEl(s, 'circle', { cx, cy: sy, r: 3.2, fill: 'url(#sfScrew)', stroke: '#14110e', 'stroke-width': .6 });
    const [x1, y1] = polar(cx, sy, 3, 112), [x2, y2] = polar(cx, sy, 3, 292);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: '#221f1a', 'stroke-width': 1 });
  }
  svgEl(s, 'rect', { x: 40.5, y: yTop - 4, width: 9, height: yBot - yTop + 8, rx: 4, fill: '#0b0a09', stroke: '#050404' });
  for (const db of [12, 8, 4, 0, -4, -8, -12, -16, -20, -24]) {
    const y = yOf(db);
    svgEl(s, 'line', { x1: 26, y1: y, x2: 39, y2: y, stroke: 'var(--steel)', 'stroke-width': db === 0 ? 1.3 : .8, opacity: db === 0 ? 1 : .75 });
    svgEl(s, 'line', { x1: 51, y1: y, x2: 64, y2: y, stroke: 'var(--steel)', 'stroke-width': db === 0 ? 1.3 : .8, opacity: db === 0 ? 1 : .75 });
    svgEl(s, 'text', { x: 23, y: y + 2.2, 'text-anchor': 'end', 'font-size': 6, 'font-family': 'var(--mono)', fill: db === 0 ? 'var(--cream)' : 'var(--steel)' }).textContent = Math.abs(db);
  }
  const handle = svgEl(s, 'g', {});
  svgEl(handle, 'polygon', { points: '45,0 58,-5 58,5', fill: '#b9b6ae', stroke: '#5e5a52', 'stroke-width': .5 });
  svgEl(handle, 'rect', { x: 58, y: -7, width: 22, height: 14, rx: 3.5, fill: 'url(#sfChrome)', stroke: '#4e4a42', 'stroke-width': .6 });
  svgEl(handle, 'rect', { x: 60, y: -5.2, width: 18, height: 2.2, rx: 1, fill: 'rgba(255,255,255,.4)' });
  let db;
  const set = v => {
    db = Math.max(-24, Math.min(12, v));
    handle.setAttribute('transform', `translate(0,${30 + (12 - db) / 36 * 90})`);
    onChange(db, (db > 0 ? '+' : db < 0 ? '−' : '') + Math.abs(db).toFixed(1) + ' dB');
  };
  dragY(s, pct => set(-24 + pct / 100 * 36));
  set(opts.value !== undefined ? opts.value : -4);
  return { el: s, get: () => db, set };
};

/* R14 spade-pointer tuning knob — engraved relief arc, knurl ring turns with it */
DUPRE.spadeKnob = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 140, 124), cx = 70, cy = 82;
  const sweep = v => -80 + v / 10 * 160;
  gradDef('spadeKnob', 'radialGradient', { cx: '42%', cy: '34%', r: '80%' }, [['0', '#33302a'], ['1', '#080706']]);
  gradDef('spadeMetal', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 1 }, [['0', '#e9e7e0'], ['1', '#8d897f']]);
  /* engraved arc: every stroke carries a faint light twin offset below (incised relief) */
  const engrave = (x1, y1, x2, y2, w) => {
    svgEl(s, 'line', { x1, y1: y1 + .8, x2, y2: y2 + .8, stroke: 'rgba(255,255,255,.13)', 'stroke-width': w });
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: '#050404', 'stroke-width': w });
  };
  for (let i = 0; i <= 40; i++) {
    const v = i / 4, a = sweep(v), major = i % 4 === 0;
    const [x1, y1] = polar(cx, cy, major ? 50 : 52, a), [x2, y2] = polar(cx, cy, 58, a);
    engrave(x1, y1, x2, y2, major ? 1.6 : .9);
    if (major) {
      const [nx, ny] = polar(cx, cy, 65, a);
      svgEl(s, 'text', { x: nx, y: ny + 3.2, 'text-anchor': 'middle', 'font-size': 7.5, 'font-family': 'var(--mono)', fill: 'rgba(255,255,255,.13)' }).textContent = v;
      svgEl(s, 'text', { x: nx, y: ny + 2.4, 'text-anchor': 'middle', 'font-size': 7.5, 'font-family': 'var(--mono)', fill: '#0a0908' }).textContent = v;
    }
  }
  const grp = svgEl(s, 'g', {});
  svgEl(grp, 'path', { d: `M ${cx - 2} ${cy - 28} L ${cx - 4.5} ${cy - 42} L ${cx} ${cy - 54} L ${cx + 4.5} ${cy - 42} L ${cx + 2} ${cy - 28} Z`, fill: 'url(#spadeMetal)', stroke: '#55524a', 'stroke-width': .6 });
  svgEl(grp, 'circle', { cx, cy, r: 30, fill: 'url(#spadeKnob)', stroke: '#000', 'stroke-width': .8 });
  svgEl(grp, 'circle', { cx, cy, r: 28.5, fill: 'none', stroke: '#0a0908', 'stroke-width': 3, 'stroke-dasharray': '2.2 2.2' });
  svgEl(grp, 'circle', { cx, cy, r: 22, fill: 'url(#spadeKnob)' });
  svgEl(grp, 'ellipse', { cx: cx - 8, cy: cy - 9, rx: 8, ry: 5, fill: 'rgba(255,255,255,.08)', transform: `rotate(-30,${cx - 8},${cy - 9})` });
  let val;
  const set = v => {
    val = Math.max(0, Math.min(10, v));
    grp.setAttribute('transform', `rotate(${-80 + val / 10 * 160},70,82)`);
    onChange(val, val.toFixed(1));
  };
  dragDelta(s, () => val, set, { min: 0, max: 10, sens: .05 });
  set(opts.value !== undefined ? opts.value : 8.3);
  return { el: s, get: () => val, set };
};

/* R15 multi-band dial — nested arcs, one needle; the bandspread dial selects the ring */
DUPRE.multiBandDial = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const ranges = opts.ranges || [[0.54, 1.6], [1.6, 5.1], [5.1, 15.5], [15.5, 30.5]];
  const s = stageSvg(host, 'rsvg', 190, 110), cx = 62, cy = 62;
  const sweep = t => -70 + t * 140;
  gradDef('mbFace', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 1 }, [['0', '#eee5c8'], ['1', '#dcd2ae']]);
  gradDef('spadeKnob', 'radialGradient', { cx: '42%', cy: '34%', r: '80%' }, [['0', '#33302a'], ['1', '#080706']]);
  svgEl(s, 'rect', { x: 4, y: 4, width: 182, height: 102, rx: 12, fill: '#171412', stroke: '#060505' });
  svgEl(s, 'rect', { x: 9, y: 9, width: 172, height: 92, rx: 9, fill: 'url(#mbFace)', stroke: '#0a0908' });
  const INK = '#2c2318';
  const rings = [];
  [18, 26, 34, 42].forEach(r => {
    const ring = svgEl(s, 'g', {});
    const [x1, y1] = polar(cx, cy, r, -70), [x2, y2] = polar(cx, cy, r, 70);
    svgEl(ring, 'path', { d: `M ${x1} ${y1} A ${r} ${r} 0 0 1 ${x2} ${y2}`, fill: 'none', stroke: INK, 'stroke-width': .9 });
    for (let i = 0; i <= 8; i++) {
      const a = sweep(i / 8), [tx1, ty1] = polar(cx, cy, r, a), [tx2, ty2] = polar(cx, cy, r + 3, a);
      svgEl(ring, 'line', { x1: tx1, y1: ty1, x2: tx2, y2: ty2, stroke: INK, 'stroke-width': .8 });
    }
    rings.push(ring);
  });
  const needle = svgEl(s, 'line', { x1: cx, y1: cy, x2: cx, y2: cy - 46, stroke: '#1a1613', 'stroke-width': 1.6, 'stroke-linecap': 'round' });
  svgEl(s, 'circle', { cx, cy, r: 7, fill: 'url(#spadeKnob)', stroke: '#000', 'stroke-width': .6 });
  svgEl(s, 'text', { x: 14, y: 100, 'font-size': 5, 'letter-spacing': '.12em', 'font-family': 'var(--mono)', fill: INK, opacity: .8 }).textContent = 'MEGACYCLES';
  /* bandspread dial (click = band select) */
  const bx = 142, by = 56;
  for (let i = 0; i < 12; i++) { const a = i * 30, [x1, y1] = polar(bx, by, 24, a), [x2, y2] = polar(bx, by, 21, a); svgEl(s, 'line', { x1, y1, x2, y2, stroke: INK, 'stroke-width': .8 }); }
  svgEl(s, 'circle', { cx: bx, cy: by, r: 17, fill: 'none', stroke: INK, 'stroke-width': .7, opacity: .5 });
  const spread = svgEl(s, 'line', { x1: bx, y1: by, x2: bx, y2: by - 22, stroke: '#1a1613', 'stroke-width': 1.4, 'stroke-linecap': 'round' });
  svgEl(s, 'circle', { cx: bx, cy: by, r: 6, fill: 'url(#spadeKnob)', stroke: '#000', 'stroke-width': .6 });
  svgEl(s, 'text', { x: bx, y: 96, 'text-anchor': 'middle', 'font-size': 5, 'letter-spacing': '.12em', 'font-family': 'var(--mono)', fill: INK, opacity: .8 }).textContent = 'BANDSPREAD';
  let val, band;
  const set = (v, b) => {
    val = Math.max(0, Math.min(100, v)); band = b;
    needle.setAttribute('transform', `rotate(${-70 + val / 100 * 140},62,62)`);
    spread.setAttribute('transform', `rotate(${-45 + b * 30},142,56)`);
    rings.forEach((g, i) => g.setAttribute('opacity', i === b ? '1' : '.4'));
    const [lo, hi] = ranges[b]; const mc = lo + val / 100 * (hi - lo);
    onChange({ band: b, mc }, `B${b + 1} · ${mc.toFixed(2)} Mc`);
  };
  const dragHit = svgEl(s, 'rect', { x: 9, y: 9, width: 100, height: 92, fill: 'transparent' });
  dragHit.style.cursor = 'ns-resize';
  dragDelta(dragHit, () => val, v => set(v, band), { min: 0, max: 100 });
  const clickHit = svgEl(s, 'rect', { x: 112, y: 9, width: 69, height: 92, fill: 'transparent' });
  clickHit.style.cursor = 'pointer';
  clickHit.addEventListener('click', () => set(val, (band + 1) % ranges.length));
  set(opts.value !== undefined ? opts.value : 45, opts.band !== undefined ? opts.band : 2);
  return { el: s, get: () => [val, band], set };
};

/* R16 entry keypad — worn keys feed the amber display; lamps watch state */
DUPRE.entryKeypad = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 150, 190);
  gradDef('kpKey', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#dbd8cf'], ['1', '#a29d92']]);
  gradDef('kpAmber', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', 'var(--amber-grad-top)'], ['1', 'var(--amber-grad-mid)']]);
  const lamp = cy => svgEl(s, 'circle', { cx: 13, cy, r: 6.5, fill: '#3a0f0a', stroke: '#14100e', 'stroke-width': 1.5 });
  const lampTop = lamp(20), lampBot = lamp(38);
  svgEl(s, 'rect', { x: 26, y: 8, width: 116, height: 32, rx: 5, fill: '#0a0806', stroke: '#2c261d', 'stroke-width': 2 });
  const disp = svgEl(s, 'text', { x: 84, y: 31, 'text-anchor': 'middle', 'font-size': 16, 'letter-spacing': '.22em', 'font-family': 'var(--mono)', fill: 'var(--gold-hi)' });
  svgEl(s, 'rect', { x: 24, y: 48, width: 118, height: 138, rx: 8, fill: '#1a1714', stroke: '#0a0908', 'stroke-width': 1.5 });
  let buf = '';
  const render = () => {
    disp.textContent = buf.padEnd(6, '–');
    lampTop.setAttribute('fill', buf ? 'var(--jewel-r)' : '#3a0f0a');
  };
  const press = k => {
    if (k === '✓') { onChange(buf, buf ? 'OK · ' + buf : 'empty'); buf = ''; render(); return; }
    if (k === '✗') {
      buf = ''; render(); onChange(buf, 'cleared');
      lampBot.setAttribute('fill', 'var(--jewel-r)');
      setTimeout(() => lampBot.setAttribute('fill', '#3a0f0a'), 350); return;
    }
    if (buf.length < 6) { buf += k; render(); onChange(buf, buf); }
  };
  const KEYS = [['1', '2', '3'], ['4', '5', '6'], ['7', '8', '9'], ['✓', '0', '✗']];
  const jitter = [-2, 1, -1, 2, 0, -2, 1, -1, 2, 0, -1, 1];
  KEYS.forEach((row, r) => row.forEach((k, c) => {
    const x = 47 + c * 36, y = 68 + r * 32, amber = (k === '✓' || k === '✗');
    const g = svgEl(s, 'g', {}); g.style.cursor = 'pointer'; g.style.transition = 'transform .07s';
    svgEl(g, 'rect', { x: x - 14, y: y - 11, width: 28, height: 24, rx: 4, fill: amber ? 'url(#kpAmber)' : 'url(#kpKey)', stroke: '#4e4a42', 'stroke-width': 1, 'stroke-opacity': .8 });
    svgEl(g, 'text', { x, y: y + 6, 'text-anchor': 'middle', 'font-size': 13, 'font-weight': 700, 'font-family': 'var(--mono)', fill: k === '✓' ? '#3f5a1f' : k === '✗' ? '#7a2a1a' : '#2b2721', transform: `rotate(${jitter[r * 3 + c]},${x},${y})` }).textContent = k;
    g.addEventListener('click', () => { g.style.transform = 'translateY(1.5px)'; setTimeout(() => g.style.transform = '', 80); press(k); });
  }));
  render(); onChange('', 'enter a code');
  return { el: s, get: () => buf, press };
};

/* R18 thumb-slide attenuator pair — lit numeral strip, cream side tab */
DUPRE.thumbSlide = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const chans = (opts.channels || [{ name: 'BLEND', v: 74 }, { name: 'MIX', v: 92 }]).map(c => ({ name: c.name, v: c.v }));
  const s = stageSvg(host, 'rsvg', 130, 150), y0 = 22, y1 = 122;
  gradDef('thRail', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 0 }, [['0', '#3a3733'], ['.5', '#211f1c'], ['1', '#161412']]);
  gradDef('thTab', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f2efe6'], ['1', '#c6c1b3']]);
  gradDef('sfScrew', 'radialGradient', { cx: '40%', cy: '35%', r: '75%' }, [['0', '#9b968a'], ['1', '#4a463e']]);
  const parts = [];
  const set = (i, v) => {
    v = Math.max(0, Math.min(100, Math.round(v))); chans[i].v = v;
    const p = parts[i];
    p.tab.setAttribute('transform', `translate(0,${28 + (100 - v) * 0.88})`);
    p.nums.forEach(t => {
      const on = Math.abs(parseInt(t.textContent) - v) <= 5;
      t.setAttribute('fill', on ? 'var(--gold-hi)' : 'var(--gold)'); t.setAttribute('opacity', on ? '1' : '.55');
    });
    onChange(chans.map(c => c.v), `${chans[0].name} ${chans[0].v} · ${chans[1].name} ${chans[1].v}`);
  };
  chans.forEach((ch, i) => {
    const x = 40 + i * 50;
    svgEl(s, 'rect', { x: x - 9, y: y0 - 10, width: 18, height: y1 - y0 + 20, rx: 3, fill: 'url(#thRail)', stroke: '#0a0908', 'stroke-width': 1.2 });
    for (const sy of [y0 - 6, y1 + 6]) {
      svgEl(s, 'circle', { cx: x, cy: sy, r: 2.4, fill: 'url(#sfScrew)', stroke: '#0a0908', 'stroke-width': .5 });
      svgEl(s, 'line', { x1: x - 1.8, y1: sy - 1, x2: x + 1.8, y2: sy + 1, stroke: '#14110e', 'stroke-width': .8 });
    }
    svgEl(s, 'rect', { x: x - 5, y: y0, width: 10, height: y1 - y0, fill: '#0d0a08', stroke: '#050404' });
    const nums = [];
    for (let n = 0; n <= 10; n++) {
      const val = 100 - n * 10, y = y0 + 6 + n * (y1 - y0 - 12) / 10;
      const t = svgEl(s, 'text', { x, y: y + 2, 'text-anchor': 'middle', 'font-size': 5.5, 'font-family': 'var(--mono)', fill: 'var(--gold)', opacity: .55 });
      t.textContent = val; nums.push(t);
    }
    const tab = svgEl(s, 'g', {});
    svgEl(tab, 'rect', { x: x + 7, y: -6, width: 8, height: 12, rx: 2, fill: 'url(#thTab)', stroke: '#7a766a', 'stroke-width': .6 });
    svgEl(tab, 'rect', { x: x + 8.2, y: -1, width: 5.6, height: 1.6, fill: 'rgba(0,0,0,.25)' });
    svgEl(s, 'text', { x, y: 145, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.14em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = ch.name;
    const hit = svgEl(s, 'rect', { x: x - 12, y: y0 - 10, width: 30, height: y1 - y0 + 20, fill: 'transparent' });
    hit.style.cursor = 'ns-resize';
    parts.push({ tab, nums });
    dragY(hit, pct => set(i, pct));
  });
  set(0, chans[0].v); set(1, chans[1].v);
  return { el: s, get: () => chans.map(c => c.v), set };
};

/* R19 waveform region editor — monochrome LCD, draggable S/E flags */
DUPRE.waveRegion = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 190, 100), x0 = 10, x1 = 180, yMid = 48, N = 85;
  svgEl(s, 'rect', { x: 1, y: 1, width: 188, height: 98, rx: 6, fill: 'var(--scr-bg1,#0b0c0b)', stroke: 'var(--scr-brd,#2a2c2a)', 'stroke-width': 2 });
  svgEl(s, 'text', { x: 12, y: 13, 'font-size': 7, 'font-family': 'var(--mono)', fill: 'var(--scr-hi,#e8eae8)' }).textContent = 'C1:START';
  svgEl(s, 'text', { x: 78, y: 13, 'font-size': 7, 'font-family': 'var(--mono)', fill: 'var(--scr-hi,#e8eae8)' }).textContent = 'C2:OFF';
  svgEl(s, 'text', { x: 136, y: 13, 'font-size': 7, 'font-family': 'var(--mono)', fill: 'var(--scr-hi,#e8eae8)' }).textContent = 'C3:END';
  svgEl(s, 'line', { x1: x0, y1: yMid, x2: x1, y2: yMid, stroke: '#3a3c3a', 'stroke-width': .6, 'stroke-dasharray': '1.5 2' });
  const bars = [];
  for (let i = 0; i < N; i++) {
    const x = x0 + (i / (N - 1)) * (x1 - x0);
    const env = Math.abs(Math.sin(i * 0.19)) * Math.abs(Math.sin(i * 0.045)) * (i % 17 < 11 ? 1 : .25);
    const h = Math.max(1.2, env * 26);
    bars.push(svgEl(s, 'rect', { x: x - 0.8, y: yMid - h, width: 1.6, height: h * 2, fill: 'var(--scr-dim,#5a5c5a)' }));
  }
  const flag = lbl => {
    const g = svgEl(s, 'g', {});
    svgEl(g, 'line', { x1: 0, y1: 18, x2: 0, y2: 78, stroke: 'var(--scr-hi,#f2f4f2)', 'stroke-width': 1 });
    svgEl(g, 'rect', { x: lbl === 'S' ? 0 : -8, y: 70, width: 8, height: 8, fill: 'var(--scr-hi,#f2f4f2)' });
    svgEl(g, 'text', { x: lbl === 'S' ? 4 : -4, y: 76.5, 'text-anchor': 'middle', 'font-size': 6.5, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--scr-bg1,#0b0c0b)' }).textContent = lbl;
    return g;
  };
  const flagS = flag('S'), flagE = flag('E');
  svgEl(s, 'rect', { x: 10, y: 84, width: 78, height: 11, fill: 'var(--scr-hi,#e8eae8)' });
  svgEl(s, 'text', { x: 14, y: 92.5, 'font-size': 6.5, 'font-family': 'var(--mono)', fill: 'var(--scr-bg1,#0b0c0b)' }).textContent = 'ENC:ZOOM(1x)';
  svgEl(s, 'text', { x: 96, y: 92.5, 'font-size': 6.5, 'font-family': 'var(--mono)', fill: 'var(--scr-hi,#e8eae8)' }).textContent = 'A-3 M:[S]';
  svgEl(s, 'rect', { x: 148, y: 84, width: 32, height: 11, fill: 'var(--scr-hi,#e8eae8)' });
  svgEl(s, 'text', { x: 164, y: 92.5, 'text-anchor': 'middle', 'font-size': 6.5, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--scr-bg1,#0b0c0b)' }).textContent = 'MENU';
  s.style.cursor = 'ew-resize';
  let S, E;
  const set = (sv, ev) => {
    S = Math.max(0, Math.min(96, sv)); E = Math.max(4, Math.min(100, ev));
    const xOf = p => x0 + p / 100 * (x1 - x0);
    flagS.setAttribute('transform', `translate(${xOf(S)},0)`);
    flagE.setAttribute('transform', `translate(${xOf(E)},0)`);
    bars.forEach((b, i) => {
      const p = i / (bars.length - 1) * 100;
      b.setAttribute('fill', (p >= S && p <= E) ? 'var(--scr-hi,#f2f4f2)' : 'var(--scr-dim,#5a5c5a)');
    });
    onChange({ s: S, e: E }, `S ${Math.round(S)}% · E ${Math.round(E)}%`);
  };
  dragX(s, pct => {
    /* move whichever flag is nearer the pointer */
    if (Math.abs(pct - S) <= Math.abs(pct - E)) set(Math.min(pct, E - 4), E);
    else set(S, Math.max(pct, S + 4));
  });
  set(opts.start !== undefined ? opts.start : 22, opts.end !== undefined ? opts.end : 76);
  return { el: s, get: () => ({ s: S, e: E }), set };
};

/* R20 drum roller selector — numbered paper drum in a window, center chip reads it.

   Contract (everything a consumer needs; no page globals touched):
     opts: title (engraved header, default 'EQUALIZER'); channels (array of
           { name, v } drums, v 1-10, default HIGH/LOW pair — the layout is
           sized for two); onChange(values array, 'NAME v · NAME v') fires on
           every set, including the initial paint.
     handle: el, get() (values array), set(i, v) — v clamps 1-10; each drum
             drags vertically on its own hit strip.
   SVG-built: styling is inline attributes plus the shared .rsvg stage block
   of DUPRE_CSS; gradients register in the shared defs plate. */
DUPRE.drumRoller = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const chans = (opts.channels || [{ name: 'HIGH', v: 6 }, { name: 'LOW', v: 8 }]).map(c => ({ name: c.name, v: c.v }));
  const s = stageSvg(host, 'rsvg', 130, 140), cy = 76, step = 17;
  gradDef('thRail', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 0 }, [['0', '#3a3733'], ['.5', '#211f1c'], ['1', '#161412']]);
  gradDef('drPaper', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 0 }, [['0', '#cfc6a8'], ['.5', '#ece4c8'], ['1', '#c6bd9e']]);
  gradDef('drCurve', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', 'rgba(0,0,0,.4)'], ['.28', 'rgba(0,0,0,0)'], ['.72', 'rgba(0,0,0,0)'], ['1', 'rgba(0,0,0,.4)']]);
  const localDefs = svgEl(s, 'defs', {});
  svgEl(s, 'text', { x: 65, y: 12, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.18em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = opts.title || 'EQUALIZER';
  const grps = [];
  const set = (i, v) => {
    v = Math.max(1, Math.min(10, v)); chans[i].v = v;
    const p = grps[i];
    p.nums.style.transform = `translateY(${(v - p.base) * step}px)`;
    p.chip.textContent = Math.round(v);
    onChange(chans.map(c => c.v), `${chans[0].name} ${Math.round(chans[0].v)} · ${chans[1].name} ${Math.round(chans[1].v)}`);
  };
  chans.forEach((ch, i) => {
    const x = 45 + i * 50, cid = uid('drClip');
    svgEl(s, 'text', { x: x + 18, y: 34, 'text-anchor': 'middle', 'font-size': 8, fill: 'var(--steel)' }).textContent = '+';
    svgEl(s, 'text', { x: x + 18, y: 124, 'text-anchor': 'middle', 'font-size': 8, fill: 'var(--steel)' }).textContent = '−';
    svgEl(s, 'rect', { x: x - 12, y: 24, width: 24, height: 104, rx: 4, fill: 'url(#thRail)', stroke: '#0a0908', 'stroke-width': 1.2 });
    const clip = svgEl(localDefs, 'clipPath', { id: cid });
    svgEl(clip, 'rect', { x: x - 9, y: 28, width: 18, height: 96 });
    svgEl(s, 'rect', { x: x - 9, y: 28, width: 18, height: 96, fill: 'url(#drPaper)' });
    const g = svgEl(s, 'g', { 'clip-path': `url(#${cid})` });
    const nums = svgEl(g, 'g', {}); nums.style.transition = 'transform .12s';
    for (let n = 1; n <= 10; n++)
      svgEl(nums, 'text', { x, y: cy + 3 + (ch.v - n) * step, 'text-anchor': 'middle', 'font-size': 9, 'font-weight': 700, 'font-family': 'var(--mono)', fill: '#2b2418' }).textContent = n;
    svgEl(g, 'rect', { x: x - 9, y: 28, width: 18, height: 96, fill: 'url(#drCurve)', 'pointer-events': 'none' });
    svgEl(s, 'rect', { x: x - 8, y: cy - 6.5, width: 16, height: 13, rx: 1.5, fill: '#1a1613', opacity: .92 });
    const chip = svgEl(s, 'text', { x, y: cy + 3, 'text-anchor': 'middle', 'font-size': 9, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--cream)' });
    svgEl(s, 'text', { x, y: 136, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.12em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = ch.name;
    const hit = svgEl(s, 'rect', { x: x - 14, y: 24, width: 28, height: 104, fill: 'transparent' });
    hit.style.cursor = 'ns-resize';
    grps.push({ nums, chip, base: ch.v });
    dragDelta(hit, () => chans[i].v, v => set(i, v), { min: 1, max: 10, sens: .08 });
  });
  set(0, chans[0].v); set(1, chans[1].v);
  return { el: s, get: () => chans.map(c => c.v), set };
};

/* R21 LED program row — exclusive select, the LED above the key carries the state */
DUPRE.ledRow = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const items = opts.items || ['Sm Hall B', 'VocPlate', 'Lg Hall B', 'Chamber', 'ParcPlate', 'Sm Hall A', 'Room A', 'Const Plate'];
  const s = stageSvg(host, 'rsvg', 190, 58);
  gradDef('lrKey', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#2b2823'], ['1', '#171512']]);
  const leds = [];
  let idx;
  const set = i => {
    idx = i;
    leds.forEach((l, k) => {
      const on = k === i;
      l.setAttribute('fill', on ? 'var(--jewel-r)' : '#3a0f0a');
      l.setAttribute('style', on ? 'filter:drop-shadow(0 0 3px rgba(255,91,69,.8))' : '');
    });
    onChange(idx, `${idx + 1} · ${items[idx]}`);
  };
  items.forEach((_, i) => {
    const x = 16 + i * 22.6;
    svgEl(s, 'text', { x, y: 9, 'text-anchor': 'middle', 'font-size': 6, 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = i + 1;
    leds.push(svgEl(s, 'circle', { cx: x, cy: 17, r: 2.4, fill: '#3a0f0a' }));
    const g = svgEl(s, 'g', {}); g.style.cursor = 'pointer'; g.style.transition = 'transform .07s';
    svgEl(g, 'rect', { x: x - 8.5, y: 24, width: 17, height: 22, rx: 2.5, fill: 'url(#lrKey)', stroke: '#0a0908', 'stroke-width': 1 });
    svgEl(g, 'rect', { x: x - 6.5, y: 26.5, width: 13, height: 3, rx: 1.5, fill: 'rgba(255,255,255,.06)' });
    g.addEventListener('click', () => { g.style.transform = 'translateY(1.5px)'; setTimeout(() => g.style.transform = '', 80); set(i); });
  });
  svgEl(s, 'text', { x: 95, y: 56, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.16em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = opts.label || 'PROGRAM';
  set(opts.index !== undefined ? opts.index : 5);
  return { el: s, get: () => idx, set };
};

/* R22 three-position slide — chrome pill between detents, honest LED pair */
DUPRE.pillSlide = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const positions = opts.positions || ['A', 'AB', 'B'];
  const s = stageSvg(host, 'rsvg press', 110, 64), detX = [34, 55, 76];
  gradDef('sfChrome', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#f0efec'], ['.45', '#c4c1b9'], ['1', '#75726a']]);
  svgEl(s, 'text', { x: 55, y: 10, 'text-anchor': 'middle', 'font-size': 5.5, 'letter-spacing': '.16em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = opts.title || 'BASIC · VARIATION';
  svgEl(s, 'rect', { x: 20, y: 16, width: 70, height: 14, rx: 7, fill: '#0b0a09', stroke: '#000', 'stroke-width': 1 });
  svgEl(s, 'rect', { x: 21, y: 17, width: 68, height: 5, rx: 2.5, fill: 'rgba(255,255,255,.04)' });
  const pill = svgEl(s, 'rect', { x: -13, y: 18.5, width: 26, height: 9, rx: 4.5, fill: 'url(#sfChrome)', stroke: '#4e4a42', 'stroke-width': .6 });
  pill.style.transition = 'transform .12s';
  const lbls = positions.map((lbl, i) => {
    const t = svgEl(s, 'text', { x: detX[i], y: 40, 'text-anchor': 'middle', 'font-size': 6.5, 'font-family': 'var(--mono)', fill: 'var(--dim)' });
    t.textContent = lbl; return t;
  });
  svgEl(s, 'rect', { x: 32, y: 45, width: 46, height: 11, rx: 2, fill: '#141210', stroke: '#060505' });
  const leds = [44, 66].map(x => svgEl(s, 'circle', { cx: x, cy: 50.5, r: 2.4, fill: '#3a0f0a' }));
  let idx;
  const set = i => {
    idx = i;
    pill.setAttribute('transform', `translate(${detX[i]},0)`);
    lbls.forEach((t, k) => t.setAttribute('fill', k === i ? 'var(--gold-hi)' : 'var(--dim)'));
    const lit = [i === 0 || i === 1, i === 2 || i === 1];
    leds.forEach((l, k) => l.setAttribute('fill', lit[k] ? 'var(--jewel-r)' : '#3a0f0a'));
    onChange(idx, positions[i]);
  };
  s.addEventListener('click', e => {
    const r = s.getBoundingClientRect();
    const x = (e.clientX - r.left) / r.width * 110;
    set(x < 45 ? 0 : x < 66 ? 1 : 2);
  });
  set(opts.index !== undefined ? opts.index : 1);
  return { el: s, get: () => idx, set };
};

/* R23 spun-aluminum knob — machined rings in a knurled grip, red index */
DUPRE.spunKnob = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 110, 110), cx = 55, cy = 52;
  gradDef('spunFace', 'radialGradient', { cx: '42%', cy: '34%', r: '85%' }, [['0', '#e8e6e0'], ['.7', '#b3b0a8'], ['1', '#8a877e']]);
  for (let k = 0; k < 8; k++) { const [x, y] = polar(cx, cy, 45, -135 + k * 38.6); svgEl(s, 'circle', { cx: x, cy: y, r: 1.3, fill: 'var(--steel)' }); }
  for (let k = 0; k < 22; k++) { const [x, y] = polar(cx, cy, 36, k * 16.36); svgEl(s, 'circle', { cx: x, cy: y, r: 2.6, fill: '#14110e' }); }
  svgEl(s, 'circle', { cx, cy, r: 36, fill: '#1a1714', stroke: '#000', 'stroke-width': .8 });
  svgEl(s, 'circle', { cx, cy, r: 30, fill: 'url(#spunFace)', stroke: '#6e6b63', 'stroke-width': .8 });
  for (const r of [24, 18, 12, 6])
    svgEl(s, 'circle', { cx, cy, r, fill: 'none', stroke: r % 12 === 0 ? 'rgba(0,0,0,.12)' : 'rgba(255,255,255,.3)', 'stroke-width': .6 });
  const idx = svgEl(s, 'line', { x1: cx, y1: cy - 28, x2: cx, y2: cy - 10, stroke: 'var(--fail)', 'stroke-width': 2.6, 'stroke-linecap': 'round' });
  svgEl(s, 'ellipse', { cx: cx - 9, cy: cy - 11, rx: 9, ry: 5, fill: 'rgba(255,255,255,.28)', transform: `rotate(-32,${cx - 9},${cy - 11})` });
  svgEl(s, 'text', { x: cx, y: 103, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.16em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = opts.label || 'SPEED';
  let val;
  const set = v => {
    val = Math.max(0, Math.min(100, v));
    idx.setAttribute('transform', `rotate(${-135 + val / 100 * 270},${cx},${cy})`);
    onChange(val, Math.round(val) + '%');
  };
  dragDelta(s, () => val, set, { min: 0, max: 100 });
  set(opts.value !== undefined ? opts.value : 62);
  return { el: s, get: () => val, set };
};

/* R24 stomp switch + jewel — press to engage, the jewel reports */
DUPRE.stompSwitch = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 110, 110), cx = 55;
  gradDef('stompDome', 'radialGradient', { cx: '40%', cy: '30%', r: '80%' }, [['0', '#f4f2ec'], ['.55', '#b9b6ae'], ['1', '#6e6b63']]);
  gradDef('stompJewel', 'radialGradient', { cx: '38%', cy: '30%', r: '80%' }, [['0', '#ffe9b0'], ['.45', 'var(--jewel-a)'], ['1', '#5c3d0c']]);
  def('avGlow', d => {
    const fl = svgEl(d, 'filter', { id: 'avGlow', x: '-60%', y: '-60%', width: '220%', height: '220%' });
    svgEl(fl, 'feGaussianBlur', { in: 'SourceGraphic', stdDeviation: 1.4 });
  });
  const glow = svgEl(s, 'circle', { cx, cy: 22, r: 14, fill: 'rgba(255,180,58,.35)', filter: 'url(#avGlow)', opacity: 0 });
  const jewel = svgEl(s, 'circle', { cx, cy: 22, r: 9, fill: '#241f1b', stroke: '#0a0908', 'stroke-width': 1.5 });
  for (let k = 0; k < 6; k++) {
    const a1 = k * 60, a2 = k * 60 + 30;
    const [x1, y1] = polar(cx, 22, 9, a1), [x2, y2] = polar(cx, 22, 9, a2);
    svgEl(s, 'path', { d: `M ${cx} 22 L ${x1} ${y1} A 9 9 0 0 1 ${x2} ${y2} Z`, fill: k % 2 ? 'rgba(255,255,255,.09)' : 'rgba(0,0,0,.10)', 'pointer-events': 'none' });
  }
  for (let k = 0; k < 20; k++) { const [x, y] = polar(cx, 72, 25, k * 18); svgEl(s, 'circle', { cx: x, cy: y, r: 2.4, fill: '#14110e' }); }
  svgEl(s, 'circle', { cx, cy: 72, r: 25, fill: '#1a1714', stroke: '#000', 'stroke-width': .8 });
  const dome = svgEl(s, 'g', {}); dome.style.transition = 'transform .08s';
  svgEl(dome, 'circle', { cx, cy: 72, r: 19, fill: 'url(#stompDome)', stroke: '#55524a', 'stroke-width': .8 });
  svgEl(dome, 'ellipse', { cx: cx - 6, cy: 64, rx: 8, ry: 4.5, fill: 'rgba(255,255,255,.5)', transform: `rotate(-24,${cx - 6},64)` });
  let on;
  const set = v => {
    on = !!v;
    jewel.setAttribute('fill', on ? 'url(#stompJewel)' : '#241f1b');
    glow.setAttribute('opacity', on ? '1' : '0');
    onChange(on, on ? 'ENGAGED' : 'bypass');
  };
  s.addEventListener('click', () => { dome.style.transform = 'translateY(1.5px)'; setTimeout(() => dome.style.transform = '', 90); set(!on); });
  set(opts.on !== undefined ? opts.on : false);
  return { el: s, get: () => on, set };
};

/* R27 winged gain selector — red T-bar over a dot ring, stepped detents */
DUPRE.wingSelector = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const steps = opts.steps || [-80, -70, -60, -50, -40, -30, -20, -10, -5, 0, 5, 10];
  const s = stageSvg(host, 'rsvg drag', 110, 110), cx = 55, cy = 52;
  gradDef('wingRed', 'radialGradient', { cx: '40%', cy: '32%', r: '80%' }, [['0', '#d98a6f'], ['.6', 'var(--fail)'], ['1', '#6e2415']]);
  steps.forEach((db, i) => {
    const a = -135 + i / (steps.length - 1) * 270;
    const [dx, dy] = polar(cx, cy, 38, a);
    svgEl(s, 'circle', { cx: dx, cy: dy, r: 1.5, fill: 'var(--steel)' });
    if (i % 2 === 1 || db === 0 || db === 10 || db === -80) {
      const [tx, ty] = polar(cx, cy, 46.5, a);
      svgEl(s, 'text', { x: tx, y: ty + 2.2, 'text-anchor': 'middle', 'font-size': 5.5, 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = db > 0 ? '+' + db : db;
    }
  });
  const grp = svgEl(s, 'g', {}); grp.style.transition = 'transform .09s';
  svgEl(grp, 'rect', { x: cx - 6.5, y: cy - 30, width: 13, height: 60, rx: 6, fill: 'url(#wingRed)', stroke: '#4e150a', 'stroke-width': .8 });
  svgEl(grp, 'circle', { cx, cy, r: 15, fill: 'url(#wingRed)', stroke: '#4e150a', 'stroke-width': .8 });
  svgEl(grp, 'line', { x1: cx, y1: cy - 28, x2: cx, y2: cy - 18, stroke: 'var(--cream)', 'stroke-width': 2, 'stroke-linecap': 'round' });
  svgEl(grp, 'ellipse', { cx: cx - 4, cy: cy - 8, rx: 5, ry: 3, fill: 'rgba(255,255,255,.18)', transform: `rotate(-30,${cx - 4},${cy - 8})` });
  let idx;
  const set = v => {
    idx = Math.max(0, Math.min(steps.length - 1, Math.round(v)));
    grp.style.transform = `rotate(${-135 + idx / (steps.length - 1) * 270}deg)`;
    grp.style.transformOrigin = `${cx}px ${cy}px`;
    const db = steps[idx];
    onChange(db, (db > 0 ? '+' : '') + db + ' dB');
  };
  dragDelta(s, () => idx, set, { min: 0, max: steps.length - 1, sens: .05 });
  set(opts.index !== undefined ? opts.index : 7);
  return { el: s, get: () => idx, set };
};

/* R28 rotary disc switch — the whole disc turns between heavy positions */
DUPRE.discSwitch = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const positions = opts.positions || [['OFF', -45], ['ON', 45], ['COMBINE', 135]];
  const s = stageSvg(host, 'rsvg press', 110, 116), cx = 55, cy = 58;
  gradDef('discRed', 'radialGradient', { cx: '42%', cy: '34%', r: '85%' }, [['0', '#d98a6f'], ['.65', 'var(--fail)'], ['1', '#7a2a1a']]);
  gradDef('sfScrew', 'radialGradient', { cx: '40%', cy: '35%', r: '75%' }, [['0', '#9b968a'], ['1', '#4a463e']]);
  svgEl(s, 'circle', { cx, cy, r: 48, fill: '#1a1714', stroke: '#060505', 'stroke-width': 1.5 });
  for (let k = 0; k < 4; k++) {
    const [x, y] = polar(cx, cy, 44, 45 + k * 90);
    svgEl(s, 'circle', { cx: x, cy: y, r: 2.6, fill: 'url(#sfScrew)', stroke: '#0a0908', 'stroke-width': .5 });
  }
  const lbls = positions.map(([lbl, a]) => {
    const [tx, ty] = polar(cx, cy, 42, a);
    const t = svgEl(s, 'text', { x: tx, y: ty + 2.4, 'text-anchor': 'middle', 'font-size': 5.8, 'letter-spacing': '.06em', 'font-family': 'var(--mono)', fill: 'var(--dim)' });
    t.textContent = lbl; return t;
  });
  svgEl(s, 'circle', { cx, cy, r: 36, fill: 'url(#discRed)', stroke: '#4e150a', 'stroke-width': 1 });
  const grp = svgEl(s, 'g', {}); grp.style.transition = 'transform .15s'; grp.style.transformOrigin = `${cx}px ${cy}px`;
  svgEl(grp, 'rect', { x: cx - 27, y: cy - 8, width: 54, height: 16, rx: 8, fill: 'url(#discRed)', stroke: '#8f3520', 'stroke-width': 1 });
  svgEl(grp, 'rect', { x: cx - 25, y: cy - 6.5, width: 50, height: 4, rx: 2, fill: 'rgba(255,255,255,.16)' });
  svgEl(grp, 'line', { x1: cx + 20, y1: cy, x2: cx + 26, y2: cy, stroke: 'var(--cream)', 'stroke-width': 2.5, 'stroke-linecap': 'round' });
  svgEl(s, 'ellipse', { cx: cx - 12, cy: cy - 14, rx: 12, ry: 6, fill: 'rgba(255,255,255,.10)', transform: `rotate(-28,${cx - 12},${cy - 14})` });
  let idx;
  const set = i => {
    idx = i;
    grp.style.transform = `rotate(${positions[i][1]}deg)`;
    lbls.forEach((t, k) => t.setAttribute('fill', k === i ? 'var(--gold-hi)' : 'var(--dim)'));
    onChange(idx, positions[i][0]);
  };
  s.addEventListener('click', () => set((idx + 1) % positions.length));
  set(opts.index !== undefined ? opts.index : 1);
  return { el: s, get: () => idx, set };
};

/* R29 guarded toggle — guard posts + red collar mark the critical throw */
DUPRE.guardedToggle = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 90, 100), cx = 45, cy = 52;
  gradDef('discRed', 'radialGradient', { cx: '42%', cy: '34%', r: '85%' }, [['0', '#d98a6f'], ['.65', 'var(--fail)'], ['1', '#7a2a1a']]);
  gradDef('nutG', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#8a8578'], ['1', '#4e4a42']]);
  gradDef('chromeG', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 0 }, [['0', '#7e7a70'], ['.45', '#e8e5db'], ['1', '#8a867c']]);
  gradDef('tipG', 'radialGradient', { cx: '40%', cy: '32%', r: '75%' }, [['0', '#f2efe8'], ['1', '#7e7a70']]);
  const lblOn = svgEl(s, 'text', { x: cx, y: 12, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.1em', 'font-family': 'var(--mono)', fill: 'var(--gold-hi)' });
  lblOn.textContent = opts.onLabel || 'ON';
  const lblOff = svgEl(s, 'text', { x: cx, y: 96, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.1em', 'font-family': 'var(--mono)', fill: 'var(--dim)' });
  lblOff.textContent = opts.offLabel || 'OFF';
  svgEl(s, 'circle', { cx, cy, r: 13, fill: 'url(#discRed)', stroke: '#4e150a', 'stroke-width': 1 });
  const pts = []; for (let k = 0; k < 6; k++) { const a = (k * 60 + 30) * Math.PI / 180; pts.push((cx + 11 * Math.cos(a)) + ',' + (cy + 11 * Math.sin(a))); }
  svgEl(s, 'polygon', { points: pts.join(' '), fill: 'url(#nutG)', stroke: '#2b2822' });
  svgEl(s, 'circle', { cx, cy, r: 6, fill: '#14110e', stroke: '#000' });
  for (const gx of [16, 74]) {
    svgEl(s, 'rect', { x: gx - 6, y: cy - 24, width: 12, height: 48, rx: 6, fill: 'url(#nutG)', stroke: '#2b2822', 'stroke-width': 1 });
    svgEl(s, 'rect', { x: gx - 4, y: cy - 21, width: 3.5, height: 42, rx: 2, fill: 'rgba(255,255,255,.14)' });
  }
  const lever = svgEl(s, 'g', {});
  svgEl(lever, 'path', { d: `M ${cx - 3} ${cy} L ${cx - 2} 26 L ${cx + 2} 26 L ${cx + 3} ${cy} Z`, fill: 'url(#chromeG)', stroke: '#4e4a42', 'stroke-width': .5 });
  svgEl(lever, 'rect', { x: cx - 4.5, y: 16, width: 9, height: 12, rx: 2, fill: 'url(#tipG)', stroke: '#5e5a52', 'stroke-width': .6 });
  for (let r = 0; r < 4; r++) svgEl(lever, 'line', { x1: cx - 3.5, y1: 18.5 + r * 2.4, x2: cx + 3.5, y2: 18.5 + r * 2.4, stroke: 'rgba(0,0,0,.25)', 'stroke-width': .8 });
  lever.style.transformOrigin = `${cx}px ${cy}px`; lever.style.transition = 'transform .12s';
  let on;
  const set = v => {
    on = !!v;
    lever.style.transform = on ? 'rotate(0deg)' : 'rotate(180deg)';
    lblOn.setAttribute('fill', on ? 'var(--gold-hi)' : 'var(--dim)');
    lblOff.setAttribute('fill', on ? 'var(--dim)' : 'var(--gold-hi)');
    onChange(on, on ? 'ON' : 'OFF');
  };
  s.addEventListener('click', () => set(!on));
  set(opts.on !== undefined ? opts.on : true);
  return { el: s, get: () => on, set };
};

/* R32 mechanical timer dial — dial rotates under a fixed index; wind by drag, stop by the red knob.
   Runs its own 1 Hz wind-down (a demo minute per second) unless reduced motion is set. */
DUPRE.timerDial = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 158, 132), cx = 62, cy = 58;
  gradDef('mtFace', 'radialGradient', { cx: '50%', cy: '42%', r: '75%' }, [['0', '#282320'], ['1', '#14110e']]);
  gradDef('mtRed', 'radialGradient', { cx: '38%', cy: '32%', r: '80%' }, [['0', '#e0523a'], ['1', '#8f2416']]);
  gradDef('mtHub', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#c9c4b8'], ['1', '#6e685c']]);
  /* bezel + knurled coin edge */
  svgEl(s, 'circle', { cx, cy, r: 50, fill: '#17140f', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 47.5, fill: 'none', stroke: '#3a352c', 'stroke-width': 4, 'stroke-dasharray': '2 1.6' });
  svgEl(s, 'circle', { cx, cy, r: 44, fill: 'url(#mtFace)', stroke: '#0a0908', 'stroke-width': 1 });
  /* rotating scale: OFF at 0, minutes climb clockwise at 4.5 deg/min (60 at 270) */
  const rot = svgEl(s, 'g', {});
  for (let m = 0; m <= 60; m += 5) {
    const major = m % 20 === 0;
    const [x1, y1] = polar(cx, cy, 40, m * 4.5), [x2, y2] = polar(cx, cy, major ? 34 : 37, m * 4.5);
    svgEl(rot, 'line', { x1, y1, x2, y2, stroke: 'var(--cream)', 'stroke-width': major ? 1.2 : .55, opacity: major ? .9 : .55 });
  }
  for (const m of [20, 40, 60]) {
    const [x, y] = polar(cx, cy, 27, m * 4.5);
    svgEl(rot, 'text', { x, y: y + 3, 'text-anchor': 'middle', 'font-size': 9, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--cream)' }).textContent = String(m);
  }
  const [ox, oy] = polar(cx, cy, 27, 0);
  svgEl(rot, 'text', { x: ox, y: oy + 3, 'text-anchor': 'middle', 'font-size': 7.5, 'font-weight': 700, 'font-family': 'var(--mono)', fill: '#e0523a' }).textContent = 'OFF';
  const [mx, my] = polar(cx, cy, 16, 180);
  svgEl(rot, 'text', { x: mx, y: my + 2.5, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.14em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = 'MINUTES';
  /* hub with screw slot */
  svgEl(s, 'circle', { cx, cy, r: 9, fill: 'url(#mtHub)', stroke: '#3c382f', 'stroke-width': 1 });
  svgEl(s, 'line', { x1: cx - 5.5, y1: cy, x2: cx + 5.5, y2: cy, stroke: '#4a4438', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 2.2, fill: '#8f897b' });
  /* fixed red index at top + winding-direction arrow */
  svgEl(s, 'line', { x1: cx, y1: cy - 44, x2: cx, y2: cy - 32, stroke: '#e0523a', 'stroke-width': 1.6 });
  svgEl(s, 'path', { d: 'M 122 14 A 26 26 0 0 1 136 26', fill: 'none', stroke: 'var(--steel)', 'stroke-width': 1.6 });
  svgEl(s, 'polygon', { points: '136,26 130.5,24.5 134.5,19.5', fill: 'var(--steel)' });
  /* engraved plate captions */
  const cap = (t, y) => svgEl(s, 'text', { x: 4, y, 'font-size': 6.2, 'letter-spacing': '.1em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = t;
  cap('PUSH TO STOP', 118); cap('TURN TO START', 128);
  let min;
  const set = m => {
    min = Math.max(0, Math.min(60, m));
    rot.setAttribute('transform', `rotate(${(-min * 4.5).toFixed(2)},${cx},${cy})`);
    onChange(min, min > 0.5 ? 'T-' + Math.round(min) + ' MIN' : 'OFF');
  };
  /* dial drag surface (under the knob in DOM so the knob wins the overlap) */
  const hit = svgEl(s, 'circle', { cx, cy, r: 50, fill: 'transparent' });
  hit.style.cursor = 'grab';
  dragDelta(hit, () => min, set, { min: 0, max: 60 });
  /* red stop knob: fluted edge, domed center */
  const knob = svgEl(s, 'g', {});
  svgEl(knob, 'circle', { cx: 126, cy: 104, r: 20, fill: 'url(#mtRed)', stroke: '#5c150c', 'stroke-width': 1.5 });
  svgEl(knob, 'circle', { cx: 126, cy: 104, r: 18, fill: 'none', stroke: 'rgba(0,0,0,.4)', 'stroke-width': 3.4, 'stroke-dasharray': '3 2.4' });
  svgEl(knob, 'circle', { cx: 126, cy: 104, r: 8.5, fill: 'url(#mtRed)', stroke: 'rgba(0,0,0,.3)', 'stroke-width': .8 });
  svgEl(knob, 'ellipse', { cx: 121, cy: 98, rx: 6, ry: 3.4, fill: 'rgba(255,255,255,.18)', transform: 'rotate(-28,121,98)' });
  knob.style.cursor = 'pointer';
  knob.addEventListener('click', () => { set(0); onChange(0, 'STOP · OFF'); });
  set(opts.minutes !== undefined ? opts.minutes : 0);
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches)
    setInterval(() => { if (min > 0) { set(min - 1); if (min === 0) onChange(0, 'DING · OFF'); } }, 1000);
  return { el: s, get: () => min, set };
};

/* R33 four-way rocker — quadrant clicks step a tracked cursor; arrows flash on press */
DUPRE.rockerPad = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 110, 110), cx = 55, cy = 55;
  gradDef('rk4Pad', 'radialGradient', { cx: '42%', cy: '34%', r: '85%' }, [['0', '#33302b'], ['1', '#141210']]);
  gradDef('rk4Arr', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#e9e4d6'], ['1', '#9d988b']]);
  gradDef('rk4Nub', 'radialGradient', { cx: '38%', cy: '30%', r: '85%' }, [['0', '#4a453e'], ['1', '#0d0c0a']]);
  /* recessed plate + rubber pad */
  svgEl(s, 'rect', { x: 3, y: 3, width: 104, height: 104, rx: 18, fill: '#211e1a', stroke: '#0c0b09', 'stroke-width': 1.5 });
  svgEl(s, 'circle', { cx, cy, r: 45, fill: '#0f0d0b' });
  svgEl(s, 'circle', { cx, cy, r: 41, fill: 'url(#rk4Pad)', stroke: '#060505', 'stroke-width': 1 });
  /* four arrows, pointing outward */
  const ARR = { up: '55,22 45,36 65,36', down: '55,88 45,74 65,74', left: '22,55 36,45 36,65', right: '88,55 74,45 74,65' };
  const arrows = {};
  for (const [dir, pts] of Object.entries(ARR))
    arrows[dir] = svgEl(s, 'polygon', { points: pts, fill: 'url(#rk4Arr)', stroke: '#3c382f', 'stroke-width': .7 });
  /* center pivot nub */
  svgEl(s, 'circle', { cx, cy, r: 7, fill: 'url(#rk4Nub)', stroke: '#060505', 'stroke-width': .8 });
  svgEl(s, 'ellipse', { cx: cx - 2, cy: cy - 2.5, rx: 2.6, ry: 1.7, fill: 'rgba(255,255,255,.25)' });
  /* quadrant hit zones (drawn last so they win), press flash + tracked position */
  let rx = 0, ry = 0;
  const press = (dir, dx, dy) => {
    rx += dx; ry += dy;
    onChange({ x: rx, y: ry, dir }, dir.toUpperCase() + ' · x ' + rx + ' y ' + ry);
    arrows[dir].setAttribute('fill', 'var(--gold-hi)');
    setTimeout(() => arrows[dir].setAttribute('fill', 'url(#rk4Arr)'), 160);
  };
  const zone = (dir, pts, dx, dy) => {
    const z = svgEl(s, 'polygon', { points: pts, fill: 'transparent' });
    z.style.cursor = 'pointer'; z.addEventListener('click', () => press(dir, dx, dy));
  };
  zone('up', `${cx},${cy} 20,20 90,20`, 0, 1);
  zone('down', `${cx},${cy} 20,90 90,90`, 0, -1);
  zone('left', `${cx},${cy} 20,20 20,90`, -1, 0);
  zone('right', `${cx},${cy} 90,20 90,90`, 1, 0);
  onChange({ x: 0, y: 0, dir: null }, 'x 0 y 0');
  return { el: s, get: () => ({ x: rx, y: ry }) };
};

/* R34 four-way toggle selector — ball lever throws to a diagonal; corner lamps show the state */
DUPRE.fourWayToggle = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 130, 130), cx = 65, cy = 65;
  gradDef('fw4Chrome', 'linearGradient', { x1: 0, y1: 0, x2: 1, y2: 1 }, [['0', '#e8e6e0'], ['.5', '#9a968c'], ['1', '#55524a']]);
  gradDef('fw4Ball', 'radialGradient', { cx: '36%', cy: '30%', r: '80%' }, [['0', '#f2f0ea'], ['.55', '#8e8a80'], ['1', '#3c3a34']]);
  /* printed panel graphics: axes, circle, diagonal square, labels */
  svgEl(s, 'line', { x1: 8, y1: cy, x2: 122, y2: cy, stroke: 'var(--steel)', 'stroke-width': .7, opacity: .7 });
  svgEl(s, 'line', { x1: cx, y1: 8, x2: cx, y2: 122, stroke: 'var(--steel)', 'stroke-width': .7, opacity: .7 });
  svgEl(s, 'text', { x: cx + 2, y: 13, 'font-size': 7, 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = 'Y';
  svgEl(s, 'text', { x: 116, y: cy - 4, 'font-size': 7, 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = 'X';
  svgEl(s, 'circle', { cx, cy, r: 42, fill: 'none', stroke: 'var(--steel)', 'stroke-width': .9, opacity: .8 });
  const QUAD = { A: 315, B: 45, C: 135, D: 225 };
  const diag = Object.values(QUAD).map(a => polar(cx, cy, 42, a));
  svgEl(s, 'polygon', { points: diag.map(p => p.join(',')).join(' '), fill: 'none', stroke: 'var(--steel)', 'stroke-width': .8, opacity: .8 });
  const LAMP_AT = { A: [14, 14], B: [116, 14], C: [116, 116], D: [14, 116] };
  const lamps = {};
  for (const [q, a] of Object.entries(QUAD)) {
    const [lx, ly] = polar(cx, cy, 42, a);
    const [px, py] = LAMP_AT[q];
    svgEl(s, 'line', { x1: lx, y1: ly, x2: px, y2: py, stroke: 'var(--steel)', 'stroke-width': .7, opacity: .5 });
    svgEl(s, 'circle', { cx: lx, cy: ly, r: 6.5, fill: '#14110e', stroke: 'var(--steel)', 'stroke-width': .9 });
    svgEl(s, 'text', { x: lx, y: ly + 2.8, 'text-anchor': 'middle', 'font-size': 7.5, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--cream)' }).textContent = q;
    svgEl(s, 'circle', { cx: px, cy: py, r: 5.5, fill: '#0d0b09', stroke: '#2c2820', 'stroke-width': 1 });
    lamps[q] = svgEl(s, 'circle', { cx: px, cy: py, r: 3.6, fill: '#3a3426' });
  }
  /* bezel + boot */
  svgEl(s, 'circle', { cx, cy, r: 20, fill: '#0d0c0a', stroke: '#2a2722', 'stroke-width': 1.5 });
  svgEl(s, 'circle', { cx, cy, r: 15, fill: '#17140f', stroke: '#060505', 'stroke-width': 1 });
  /* lever: shaft + grip rotate to the selected diagonal; ball pivot stays centered */
  const lever = svgEl(s, 'g', {});
  svgEl(lever, 'polygon', { points: `${cx - 3},${cy} ${cx + 3},${cy} ${cx + 2},${cy - 26} ${cx - 2},${cy - 26}`, fill: 'url(#fw4Chrome)', stroke: '#3c3a34', 'stroke-width': .6 });
  svgEl(lever, 'rect', { x: cx - 3.4, y: cy - 40, width: 6.8, height: 16, rx: 3, fill: 'url(#fw4Chrome)', stroke: '#3c3a34', 'stroke-width': .6 });
  svgEl(s, 'circle', { cx, cy, r: 8.5, fill: 'url(#fw4Ball)', stroke: '#26241f', 'stroke-width': .8 });
  svgEl(s, 'ellipse', { cx: cx - 2.6, cy: cy - 3, rx: 2.8, ry: 1.9, fill: 'rgba(255,255,255,.5)' });
  let pos = null;
  const set = q => {
    pos = q;
    lever.setAttribute('transform', `rotate(${QUAD[q]},${cx},${cy})`);
    for (const k of Object.keys(QUAD)) {
      lamps[k].setAttribute('fill', k === q ? 'var(--jewel-a)' : '#3a3426');
      lamps[k].setAttribute('filter', k === q ? 'drop-shadow(0 0 4px rgba(255,180,58,.8))' : 'none');
    }
    onChange(pos, 'POS ' + q);
  };
  /* quadrant click zones (diagonal quadrants, drawn last) */
  const zone = (q, pts) => {
    const z = svgEl(s, 'polygon', { points: pts, fill: 'transparent' });
    z.style.cursor = 'pointer'; z.addEventListener('click', () => set(q));
  };
  zone('A', `${cx},${cy} ${cx},5 5,5 5,${cy}`);
  zone('B', `${cx},${cy} ${cx},5 125,5 125,${cy}`);
  zone('C', `${cx},${cy} 125,${cy} 125,125 ${cx},125`);
  zone('D', `${cx},${cy} ${cx},125 5,125 5,${cy}`);
  set(opts.position || 'C');
  return { el: s, get: () => pos, set };
};

/* R37 pin routing matrix — click an intersection to seat/pull a pin; many-to-many */
DUPRE.pinMatrix = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const ROWS = opts.rows || ['OSC1', 'OSC2', 'LFO', 'NOIS', 'ENV'];
  const COLS = opts.cols || ['VCF', 'VCA', 'PAN', 'DLY', 'OUT', 'MOD'];
  const pins = new Set(opts.pins || ['OSC1>VCF', 'LFO>PAN', 'ENV>VCA']);   /* a legible default patch */
  const s = stageSvg(host, 'rsvg press', 160, 110);
  const X0 = 42, Y0 = 30, DX = 19, DY = 15.5;
  svgEl(s, 'rect', { x: 2, y: 2, width: 156, height: 106, rx: 8, fill: '#1c1916', stroke: '#060505', 'stroke-width': 1.5 });
  COLS.forEach((c, j) => svgEl(s, 'text', { x: X0 + j * DX, y: 16, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.05em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = c);
  ROWS.forEach((r, i) => svgEl(s, 'text', { x: 34, y: Y0 + i * DY + 2, 'text-anchor': 'end', 'font-size': 5.4, 'letter-spacing': '.05em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = r);
  ROWS.forEach((r, i) => COLS.forEach((c, j) => {
    const cx = X0 + j * DX, cy = Y0 + i * DY, key = r + '>' + c;
    svgEl(s, 'circle', { cx, cy, r: 3.4, fill: '#0a0908', stroke: '#2c2820', 'stroke-width': 1 });
    const cap = svgEl(s, 'circle', { cx, cy, r: 4.4, fill: 'var(--gold)', stroke: '#7d5c16', 'stroke-width': 1, opacity: pins.has(key) ? 1 : 0, filter: 'drop-shadow(0 1px 2px rgba(0,0,0,.6))' });
    const hit = svgEl(s, 'circle', { cx, cy, r: 8, fill: 'transparent' });
    hit.style.cursor = 'pointer';
    hit.addEventListener('click', () => {
      const on = !pins.has(key);
      if (on) pins.add(key); else pins.delete(key);
      cap.setAttribute('opacity', on ? 1 : 0);
      onChange([...pins], (on ? r + ' → ' + c : 'pulled ' + r + ' → ' + c) + ' · ' + pins.size + ' routes');
    });
  }));
  onChange([...pins], pins.size + ' routes');
  return { el: s, get: () => [...pins] };
};

/* R38 dead-man button — state exists only while the pointer holds it down */
DUPRE.deadMan = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 120, 110), cx = 60, cy = 58;
  gradDef('dmBtn', 'radialGradient', { cx: '40%', cy: '32%', r: '85%' }, [['0', '#3a3631'], ['1', '#16130f']]);
  svgEl(s, 'rect', { x: 4, y: 4, width: 112, height: 102, rx: 12, fill: '#211e1a', stroke: '#0c0b09', 'stroke-width': 1.5 });
  svgEl(s, 'text', { x: cx, y: 18, 'text-anchor': 'middle', 'font-size': 6.2, 'letter-spacing': '.16em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = opts.caption || 'HOLD TO RUN';
  const lamp = svgEl(s, 'circle', { cx: 104, cy: 16, r: 4.5, fill: '#1e2a12' });
  const ring = svgEl(s, 'circle', { cx, cy, r: 33, fill: 'none', stroke: '#2c2820', 'stroke-width': 3 });
  const btn = svgEl(s, 'g', {});
  svgEl(btn, 'circle', { cx, cy, r: 28, fill: 'url(#dmBtn)', stroke: '#060505', 'stroke-width': 1.5 });
  svgEl(btn, 'circle', { cx, cy, r: 22, fill: 'none', stroke: 'rgba(255,255,255,.07)', 'stroke-width': 1 });
  svgEl(btn, 'text', { x: cx, y: cy + 2.5, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.1em', 'font-family': 'var(--mono)', fill: 'var(--silver)' }).textContent = opts.label || 'RUN';
  btn.style.cursor = 'pointer';
  let t0 = null, iv = null;
  const stop = () => {
    if (t0 === null) return;
    const held = ((Date.now() - t0) / 1000).toFixed(1);
    t0 = null; clearInterval(iv);
    btn.removeAttribute('transform');
    ring.setAttribute('stroke', '#2c2820'); ring.removeAttribute('filter');
    lamp.setAttribute('fill', '#1e2a12'); lamp.removeAttribute('filter');
    onChange(false, 'SAFE (held ' + held + 's)');
  };
  btn.addEventListener('pointerdown', e => {
    btn.setPointerCapture(e.pointerId);
    t0 = Date.now();
    btn.setAttribute('transform', 'translate(0,1.5)');
    ring.setAttribute('stroke', 'var(--gold)'); ring.setAttribute('filter', 'drop-shadow(0 0 5px rgba(var(--glow-lo),.7))');
    lamp.setAttribute('fill', 'var(--pass)'); lamp.setAttribute('filter', 'drop-shadow(0 0 4px rgba(116,147,47,.8))');
    onChange(true, 'RUNNING 0.0s');
    iv = setInterval(() => { if (t0 !== null) onChange(true, 'RUNNING ' + ((Date.now() - t0) / 1000).toFixed(1) + 's'); }, 100);
    e.preventDefault();
  });
  btn.addEventListener('pointerup', stop);
  btn.addEventListener('pointercancel', stop);
  onChange(false, 'SAFE');
  return { el: s, get: () => t0 !== null };
};

/* R39 rotary telephone dial — click a hole; the wheel winds to the stop and returns */
DUPRE.telephoneDial = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 130, 130), cx = 65, cy = 63;
  const DIGITS = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'];
  const angOf = i => (60 - i * 30 + 360) % 360;            /* 1 at 60cw, counterclockwise to 0 at 150 */
  const STOP = 105;
  gradDef('tdWheel', 'radialGradient', { cx: '42%', cy: '36%', r: '85%' }, [['0', '#8f8a7e'], ['1', '#4a463e']]);
  svgEl(s, 'circle', { cx, cy, r: 56, fill: '#14110e', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 50, fill: '#1e1a16', stroke: '#0a0908', 'stroke-width': 1 });
  /* rotating finger wheel: ring + hole openings (dark wells punched in the metal) */
  const wheel = svgEl(s, 'g', {});
  svgEl(wheel, 'circle', { cx, cy, r: 46, fill: 'none', stroke: 'url(#tdWheel)', 'stroke-width': 17, opacity: .95 });
  DIGITS.forEach((_, i) => {
    const [x, y] = polar(cx, cy, 38, angOf(i));
    svgEl(wheel, 'circle', { cx: x, cy: y, r: 7.2, fill: '#1e1a16', stroke: '#26221c', 'stroke-width': 1.4 });
  });
  /* fixed digits ON TOP so they read through the holes (they stay put while the wheel spins) */
  DIGITS.forEach((d, i) => {
    const [x, y] = polar(cx, cy, 38, angOf(i));
    svgEl(s, 'text', { x, y: y + 3, 'text-anchor': 'middle', 'font-size': 8.5, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--cream)' }).textContent = d;
  });
  svgEl(s, 'circle', { cx, cy, r: 16, fill: 'url(#tdWheel)', stroke: '#26221c', 'stroke-width': 1 });
  /* finger stop */
  const [fx, fy] = polar(cx, cy, 52, STOP);
  svgEl(s, 'rect', { x: fx - 2.5, y: fy - 8, width: 5, height: 16, rx: 2, fill: '#b8b2a4', stroke: '#3c382f', 'stroke-width': 1, transform: `rotate(${STOP},${fx},${fy})` });
  let dialed = '', spinning = false;
  const setW = a => wheel.setAttribute('transform', `rotate(${a},${cx},${cy})`);
  const finish = d => { dialed = (dialed + d).slice(-10); onChange(dialed, dialed); spinning = false; };
  DIGITS.forEach((d, i) => {
    const [x, y] = polar(cx, cy, 38, angOf(i));
    const hit = svgEl(s, 'circle', { cx: x, cy: y, r: 8.5, fill: 'transparent' });
    hit.style.cursor = 'pointer';
    hit.addEventListener('click', () => {
      if (spinning) return; spinning = true;
      const R = (STOP - angOf(i) + 360) % 360;
      if (matchMedia('(prefers-reduced-motion: reduce)').matches) { setW(R); setTimeout(() => { setW(0); finish(d); }, 160); return; }
      const t0 = performance.now(), Tf = R / 300 * 1000, Tb = R / 450 * 1000;
      const step = t => {
        const el = t - t0;
        if (el < Tf) { setW(R * el / Tf); requestAnimationFrame(step); }
        else if (el < Tf + 80) { setW(R); requestAnimationFrame(step); }
        else if (el < Tf + 80 + Tb) { setW(R * (1 - (el - Tf - 80) / Tb)); requestAnimationFrame(step); }
        else { setW(0); finish(d); }
      };
      requestAnimationFrame(step);
    });
  });
  onChange('', 'dial a number');
  return { el: s, get: () => dialed };
};

/* R40 circuit breaker panel — on/off by click, TRIP pops one to the amber mid-state, reset is two-step */
DUPRE.breakerPanel = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const NAMES = opts.names || ['MAIN', 'PUMP', 'LAMP', 'AUX'];
  const s = stageSvg(host, 'rsvg press', 160, 110);
  svgEl(s, 'rect', { x: 2, y: 2, width: 156, height: 106, rx: 8, fill: '#1c1916', stroke: '#060505', 'stroke-width': 1.5 });
  const brk = [];
  const draw = () => {
    let closed = 0, trip = null;
    brk.forEach(b => {
      if (b.state === 'on') closed++; if (b.state === 'tripped') trip = b.name;
      b.lamp.setAttribute('fill', b.state === 'on' ? 'var(--pass)' : '#1e2a12');
      b.lamp.setAttribute('filter', b.state === 'on' ? 'drop-shadow(0 0 3px rgba(116,147,47,.8))' : 'none');
      b.handle.setAttribute('y', b.state === 'on' ? 40 : b.state === 'tripped' ? 57 : 74);
      b.collar.setAttribute('opacity', b.state === 'tripped' ? 1 : 0);
    });
    onChange(brk.map(b => b.state), closed + '/' + NAMES.length + ' closed' + (trip ? ' · ' + trip + ' TRIPPED' : ''));
  };
  NAMES.forEach((name, i) => {
    const x = 14 + i * 30;
    svgEl(s, 'rect', { x, y: 36, width: 20, height: 52, rx: 4, fill: '#14110e', stroke: '#2c2820', 'stroke-width': 1 });
    const lamp = svgEl(s, 'circle', { cx: x + 10, cy: 26, r: 4, fill: '#1e2a12' });
    const collar = svgEl(s, 'rect', { x: x + 4, y: 69, width: 12, height: 5, fill: 'var(--amber-warn)', opacity: 0 });
    const handle = svgEl(s, 'rect', { x: x + 4, y: 40, width: 12, height: 14, rx: 2, fill: '#3a3631', stroke: '#060505', 'stroke-width': 1 });
    svgEl(s, 'text', { x: x + 10, y: 98, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.05em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = name;
    const hit = svgEl(s, 'rect', { x, y: 20, width: 20, height: 80, fill: 'transparent' });
    hit.style.cursor = 'pointer';
    const b = { name, state: i < 3 ? 'on' : 'off', lamp, collar, handle };
    hit.addEventListener('click', () => { b.state = b.state === 'on' ? 'off' : b.state === 'off' ? 'on' : 'off'; draw(); });
    brk.push(b);
  });
  const tb = svgEl(s, 'g', {});
  svgEl(tb, 'rect', { x: 132, y: 40, width: 22, height: 16, rx: 4, fill: 'var(--fail)', stroke: '#5c150c', 'stroke-width': 1 });
  svgEl(tb, 'text', { x: 143, y: 50.5, 'text-anchor': 'middle', 'font-size': 6, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--cream)' }).textContent = 'TRIP';
  tb.style.cursor = 'pointer';
  tb.addEventListener('click', () => { for (let i = brk.length - 1; i >= 0; i--) if (brk[i].state === 'on') { brk[i].state = 'tripped'; break; } draw(); });
  draw();
  return { el: s, get: () => brk.map(b => b.state) };
};

/* R41 DSKY — verb/noun command grammar with status lamps and a lamp-test verb */
DUPRE.dsky = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const LAMPS = ['UPLINK', 'TEMP', 'GIMBAL', 'PROG', 'RESTART', 'OPR ERR'];
  const el = document.createElement('div'); el.className = 'dsky'; host.appendChild(el);
  el.innerHTML =
    `<div class="lampcol">${LAMPS.map(l => `<div class="sl" data-l="${l}">${l}</div>`).join('')}</div>` +
    `<div class="right"><div class="wins">` +
    `<div class="win" data-w="prog"><span class="wl">PROG</span><span class="wd"></span></div>` +
    `<div class="win" data-w="verb"><span class="wl">VERB</span><span class="wd"></span></div>` +
    `<div class="win" data-w="noun"><span class="wl">NOUN</span><span class="wd"></span></div>` +
    `</div><div class="pad"></div></div>`;
  const win = w => el.querySelector(`[data-w="${w}"]`);
  const setWin = (w, txt) => { win(w).querySelector('.wd').innerHTML = seg7(txt[0] || ' ') + seg7(txt[1] || ' '); };
  const lampEl = l => el.querySelector(`[data-l="${l}"]`);
  let mode = null, vals = { prog: '  ', verb: '  ', noun: '  ' }, entry = '';
  const KEYS = ['VERB', 'NOUN', 'CLR', 'ENTR', 'RSET', '7', '8', '9', '4', '5', '6', '1', '2', '3', '0'];
  const pad = el.querySelector('.pad');
  const hot = () => { el.querySelectorAll('.win').forEach(w => w.classList.toggle('hot', w.dataset.w === mode)); };
  const oprErr = () => { lampEl('OPR ERR').classList.add('on'); setTimeout(() => lampEl('OPR ERR').classList.remove('on'), 1200); onChange(vals, 'OPR ERR'); };
  const commit = () => {
    if (vals.verb.trim().length < 2) { oprErr(); return; }
    const v = vals.verb, n = vals.noun.trim();
    if (v === '35') {
      LAMPS.forEach(l => lampEl(l).classList.add('on'));
      setTimeout(() => LAMPS.forEach(l => lampEl(l).classList.remove('on')), 1400);
      onChange(vals, 'V35 · lamp test');
    }
    else if (v === '16' && n === '36') { vals.prog = '16'; setWin('prog', vals.prog); onChange(vals, 'V16 N36 · monitor clock'); }
    else onChange(vals, 'V' + v + (n ? ' N' + n : '') + ' ENTR');
    vals.verb = '  '; vals.noun = '  '; entry = ''; mode = null; hot();
  };
  KEYS.forEach(k => {
    const b = document.createElement('button'); b.className = 'key'; b.textContent = k;
    b.addEventListener('click', () => {
      if (k === 'VERB' || k === 'NOUN') { mode = k.toLowerCase(); entry = ''; vals[mode] = '  '; setWin(mode, '  '); hot(); }
      else if (k === 'CLR') { if (mode) { vals[mode] = '  '; entry = ''; setWin(mode, '  '); } }
      else if (k === 'RSET') { LAMPS.forEach(l => lampEl(l).classList.remove('on')); onChange(vals, 'RSET'); }
      else if (k === 'ENTR') commit();
      else if (/\d/.test(k)) {
        if (!mode) { oprErr(); return; }
        entry = (entry + k).slice(0, 2); vals[mode] = entry.padEnd(2, ' '); setWin(mode, vals[mode]);
      }
    });
    pad.appendChild(b);
  });
  vals.prog = '00'; setWin('prog', vals.prog); setWin('verb', '  '); setWin('noun', '  ');
  onChange(vals, 'VERB ## ENTR');
  return { el, get: () => ({ ...vals }) };
};

/* R42 cam-timer program drum — the program is a ring; the pointer self-advances through it.
   Runs its own reduced-motion-gated 2 s step interval once started. */
DUPRE.camTimer = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const STEPS = opts.steps || ['OFF', 'FILL', 'WASH', 'WASH', 'WASH', 'RINSE', 'RINSE', 'DRAIN', 'SPIN', 'SPIN', 'FLUFF', 'COOL'];
  const COLS = opts.colors || { OFF: '#3a3426', FILL: '#54677d', WASH: '#d29638', RINSE: '#46b89e', DRAIN: '#969385', SPIN: '#cb6b4d', FLUFF: '#c9b98a', COOL: '#7c99b0' };
  const s = stageSvg(host, 'rsvg press', 130, 130), cx = 65, cy = 65;
  svgEl(s, 'circle', { cx, cy, r: 60, fill: '#17140f', stroke: '#060505', 'stroke-width': 2 });
  STEPS.forEach((st, i) => {
    const a0 = i * 30 - 90, a1 = a0 + 30;
    const p0o = polar(cx, cy, 52, a0 + 90), p1o = polar(cx, cy, 52, a1 + 90), p0i = polar(cx, cy, 38, a0 + 90), p1i = polar(cx, cy, 38, a1 + 90);
    svgEl(s, 'path', { d: `M ${p0i[0]} ${p0i[1]} L ${p0o[0]} ${p0o[1]} A 52 52 0 0 1 ${p1o[0]} ${p1o[1]} L ${p1i[0]} ${p1i[1]} A 38 38 0 0 0 ${p0i[0]} ${p0i[1]} Z`, fill: COLS[st], opacity: .75, stroke: '#0a0908', 'stroke-width': .8 });
    const [tx, ty] = polar(cx, cy, 45, i * 30 + 15);
    svgEl(s, 'text', { x: tx, y: ty + 2, 'text-anchor': 'middle', 'font-size': 4.4, 'font-weight': 700, 'font-family': 'var(--mono)', fill: st === 'OFF' ? 'var(--cream)' : '#14110e' }).textContent = st === 'OFF' ? 'OFF' : st[0];
  });
  svgEl(s, 'circle', { cx, cy, r: 34, fill: '#211e1a', stroke: '#0a0908', 'stroke-width': 1.5 });
  STEPS.forEach((st, i) => {
    if (i === 0) return; const [lx, ly] = polar(cx, cy, 27, i * 30 + 15);
    svgEl(s, 'text', { x: lx, y: ly + 1.8, 'text-anchor': 'middle', 'font-size': 4.2, 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = st;
  });
  svgEl(s, 'circle', { cx, cy, r: 17, fill: '#14110e', stroke: '#2c2820', 'stroke-width': 1.5 });
  const ptr = svgEl(s, 'polygon', { points: `${cx - 2.5},${cy} ${cx + 2.5},${cy} ${cx},${cy - 31}`, fill: 'var(--gold-hi)', filter: 'drop-shadow(0 0 3px rgba(var(--glow-lo),.7))' });
  svgEl(s, 'circle', { cx, cy, r: 5, fill: '#3a3631', stroke: '#060505', 'stroke-width': 1 });
  let pos;
  const set = i => {
    pos = i;
    ptr.setAttribute('transform', `rotate(${i * 30 + 15},${cx},${cy})`);
    onChange(pos, pos === 0 ? 'OFF' : 'STEP ' + pos + ' · ' + STEPS[pos]);
  };
  s.style.cursor = 'pointer';
  s.addEventListener('click', () => set((pos + 1) % STEPS.length));
  set(opts.position !== undefined ? opts.position : 0);
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches)
    setInterval(() => { if (pos > 0) { const n = (pos + 1) % STEPS.length; set(n); if (n === 0) onChange(0, 'CYCLE DONE · OFF'); } }, 2000);
  return { el: s, get: () => pos, set };
};

/* R48 knife switch (side view) — the blade hinges at the left post and lands in the right jaw */
DUPRE.knifeSwitch = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 130, 110);
  gradDef('ksCu', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#d09a5c'], ['1', '#8a5a2a']]);
  const HX = 32, HY = 74;                            /* hinge pivot */
  svgEl(s, 'rect', { x: 6, y: 56, width: 118, height: 44, rx: 6, fill: '#22262a', stroke: '#0c0d0e', 'stroke-width': 1.5 });
  const lamp = svgEl(s, 'circle', { cx: 116, cy: 22, r: 4.5, fill: '#1e2a12' });
  svgEl(s, 'text', { x: 116, y: 36, 'text-anchor': 'middle', 'font-size': 4.8, 'letter-spacing': '.08em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = 'LIVE';
  /* hinge post (left) and jaw clip (right), both on the base */
  svgEl(s, 'rect', { x: HX - 6, y: HY - 6, width: 12, height: 16, rx: 2, fill: 'url(#ksCu)', stroke: '#5c3a18', 'stroke-width': .8 });
  svgEl(s, 'rect', { x: 96, y: HY - 9, width: 5, height: 18, rx: 1.5, fill: 'url(#ksCu)', stroke: '#5c3a18', 'stroke-width': .7 });
  svgEl(s, 'rect', { x: 104, y: HY - 9, width: 5, height: 18, rx: 1.5, fill: 'url(#ksCu)', stroke: '#5c3a18', 'stroke-width': .7 });
  /* blade + upright handle, hinged at (HX,HY) */
  const blade = svgEl(s, 'g', {});
  svgEl(blade, 'rect', { x: HX, y: HY - 3, width: 71, height: 6, rx: 2.5, fill: 'url(#ksCu)', stroke: '#5c3a18', 'stroke-width': .8 });
  svgEl(blade, 'rect', { x: 88, y: HY - 26, width: 7, height: 26, rx: 3, fill: '#14110e', stroke: '#000', 'stroke-width': 1 });
  svgEl(blade, 'circle', { cx: 91.5, cy: HY - 26, r: 5, fill: '#14110e', stroke: '#000', 'stroke-width': 1 });
  svgEl(s, 'circle', { cx: HX, cy: HY, r: 3, fill: '#5c3a18' });
  blade.style.transformBox = 'view-box'; blade.style.transformOrigin = `${HX}px ${HY}px`;
  blade.style.transition = 'transform .28s ease';
  let closed;
  const set = v => {
    closed = !!v;
    blade.style.transform = closed ? 'rotate(0deg)' : 'rotate(-46deg)';
    lamp.setAttribute('fill', closed ? 'var(--pass)' : '#1e2a12');
    lamp.setAttribute('filter', closed ? 'drop-shadow(0 0 4px rgba(116,147,47,.8))' : 'none');
    onChange(closed, closed ? 'CLOSED · live' : 'OPEN · visibly dead');
  };
  s.style.cursor = 'pointer';
  s.addEventListener('click', () => set(!closed));
  set(opts.closed !== undefined ? opts.closed : true);
  return { el: s, get: () => closed, set };
};

/* R49 decade box — four skirted knobs, one digit each; the value is their sum */
DUPRE.decadeBox = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const MUL = [1000, 100, 10, 1], LBL = ['x1000', 'x100', 'x10', 'x1'];
  const digs = (opts.digits || [3, 5, 0, 0]).slice();
  const s = stageSvg(host, 'rsvg', 160, 100);
  svgEl(s, 'rect', { x: 2, y: 2, width: 156, height: 96, rx: 8, fill: '#17140f', stroke: '#060505', 'stroke-width': 1.5 });
  const wins = [], knobs = [];
  const total = () => digs.reduce((a, d, i) => a + d * MUL[i], 0);
  const draw = () => {
    wins.forEach((w, i) => w.textContent = String(digs[i]));
    knobs.forEach((k, i) => k.setAttribute('transform', `rotate(${digs[i] * 36},${28 + i * 35},58)`));
    onChange(total(), total().toLocaleString('en-US') + ' Ω');
  };
  MUL.forEach((_, i) => {
    const cx = 28 + i * 35, cy = 58;
    svgEl(s, 'rect', { x: cx - 8, y: 16, width: 16, height: 12, rx: 2, fill: '#0a0806', stroke: '#2c2820', 'stroke-width': 1 });
    wins.push(svgEl(s, 'text', { x: cx, y: 25.5, 'text-anchor': 'middle', 'font-size': 8, 'font-weight': 700, 'font-family': 'var(--mono)', fill: 'var(--cream)' }));
    svgEl(s, 'circle', { cx, cy, r: 15, fill: '#211e1a', stroke: '#0a0908', 'stroke-width': 1.5 });   /* skirt */
    for (let t = 0; t < 10; t++) {
      const [x1, y1] = polar(cx, cy, 14, t * 36), [x2, y2] = polar(cx, cy, 12, t * 36);
      svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--steel)', 'stroke-width': .6, opacity: .7 });
    }
    const k = svgEl(s, 'g', {});
    svgEl(k, 'circle', { cx, cy, r: 10, fill: '#2c2824', stroke: '#060505', 'stroke-width': 1 });
    svgEl(k, 'line', { x1: cx, y1: cy - 9, x2: cx, y2: cy - 4, stroke: 'var(--gold-hi)', 'stroke-width': 1.8 });
    knobs.push(k);
    svgEl(s, 'text', { x: cx, y: 88, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.06em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = LBL[i];
    const hit = svgEl(s, 'circle', { cx, cy, r: 16, fill: 'transparent' });
    hit.style.cursor = 'ns-resize';
    dragDelta(hit, () => digs[i], v => { digs[i] = Math.round(Math.max(0, Math.min(9, v))); draw(); }, { min: 0, max: 9, sens: 9 / 70 });
  });
  draw();
  return { el: s, get: () => total() };
};

/* R50 two-hand safety — one palm button arms a 500ms window; the other completes the cycle */
DUPRE.twoHandSafety = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 160, 100);
  svgEl(s, 'rect', { x: 2, y: 2, width: 156, height: 96, rx: 8, fill: '#1c1916', stroke: '#060505', 'stroke-width': 1.5 });
  const runLamp = svgEl(s, 'circle', { cx: 80, cy: 24, r: 5.5, fill: '#1e2a12' });
  svgEl(s, 'text', { x: 80, y: 40, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.12em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = 'CYCLE';
  const mkBtn = (cx, lbl) => {
    const g = svgEl(s, 'g', {});
    svgEl(g, 'ellipse', { cx, cy: 70, rx: 19, ry: 6, fill: '#0d0b09' });
    const cap = svgEl(g, 'circle', { cx, cy: 62, r: 16, fill: '#8f2416', stroke: '#5c150c', 'stroke-width': 1.5 });
    svgEl(g, 'ellipse', { cx: cx - 5, cy: 56, rx: 6, ry: 3.4, fill: 'rgba(255,255,255,.22)' });
    svgEl(s, 'text', { x: cx, y: 92, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.08em', 'font-family': 'var(--mono)', fill: 'var(--steel)' }).textContent = lbl;
    g.style.cursor = 'pointer'; return { g, cap };
  };
  const L = mkBtn(32, 'LEFT PALM'), R = mkBtn(128, 'RIGHT PALM');
  let armed = null, armT = null, busy = false;
  const flash = cap => { cap.setAttribute('fill', '#e0523a'); setTimeout(() => cap.setAttribute('fill', '#8f2416'), 200); };
  const fault = () => { armed = null; clearTimeout(armT); onChange('fault', 'TIE-DOWN FAULT · release and retry'); };
  const press = side => {
    if (busy) return;
    if (armed === null) {
      armed = side; flash(side === 'L' ? L.cap : R.cap);
      onChange('armed', side + ' armed · other hand within 0.5s');
      armT = setTimeout(fault, 500); return;
    }
    if (armed === side) { fault(); return; }                 /* same hand twice = tie-down */
    clearTimeout(armT); armed = null; busy = true;
    flash(side === 'L' ? L.cap : R.cap);
    runLamp.setAttribute('fill', 'var(--pass)');
    runLamp.setAttribute('filter', 'drop-shadow(0 0 5px rgba(116,147,47,.8))');
    onChange('running', 'CYCLE RUNNING');
    setTimeout(() => {
      runLamp.setAttribute('fill', '#1e2a12'); runLamp.removeAttribute('filter');
      busy = false; onChange('ready', 'ready');
    }, 1500);
  };
  L.g.addEventListener('click', () => press('L'));
  R.g.addEventListener('click', () => press('R'));
  onChange('ready', 'ready');
  return { el: s, press };
};

/* R51 voice-loop keyset — independent monitor states, exclusive talk, activity flicker */
DUPRE.voiceLoop = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const LOOPS = opts.loops || ['FD', 'GNC', 'ECOM', 'SURG', 'A/G', 'NET1', 'NET2', 'PAO'];
  const el = document.createElement('div'); el.className = 'vloop'; host.appendChild(el);
  const keys = LOOPS.map(l => {
    const k = document.createElement('div'); k.className = 'vk';
    k.innerHTML = l + '<span class="bar"></span>'; k.dataset.state = '0'; el.appendChild(k); return k;
  });
  /* a legible default: FD + A/G monitored, GNC talking */
  keys[0].dataset.state = '1'; keys[0].classList.add('mon');
  keys[4].dataset.state = '1'; keys[4].classList.add('mon');
  keys[1].dataset.state = '2'; keys[1].classList.add('mon', 'tlk');
  const refresh = () => {
    const mon = keys.filter(k => k.dataset.state !== '0').length;
    const tlk = keys.findIndex(k => k.dataset.state === '2');
    onChange(keys.map(k => k.dataset.state), mon === 0 ? 'all loops dropped' : mon + ' monitored' + (tlk >= 0 ? ' · talk ' + LOOPS[tlk] : ''));
  };
  keys.forEach(k => k.addEventListener('click', () => {
    const st = k.dataset.state;
    if (st === '0') { k.dataset.state = '1'; k.classList.add('mon'); }
    else if (st === '1') {
      keys.forEach(o => { if (o.dataset.state === '2') { o.dataset.state = '1'; o.classList.remove('tlk'); } });
      k.dataset.state = '2'; k.classList.add('tlk');
    }
    else { k.dataset.state = '0'; k.classList.remove('mon', 'tlk', 'act'); }
    refresh();
  }));
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches)
    setInterval(() => {
      const t = performance.now() / 1000;
      keys.forEach((k, i) => {
        if (k.dataset.state === '0') { k.classList.remove('act'); return; }
        k.classList.toggle('act', Math.sin(t * (1.1 + i * 0.37) + i * 2.1) > 0.55);
      });
    }, 300);
  refresh();
  return { el, get: () => keys.map(k => k.dataset.state) };
};

/* ---- meters & gauges ----
   Tick contract: the page owns the clock and the signal; live meters expose
   value-driven handles (set/push) that repaint synchronously and fire
   onChange(value, text) like every other builder. Display-side state that
   belongs to the instrument (peak-hold, history buffers) lives in here. */

/* 10 needle gauge — drag up/down sweeps the needle over a 120° arc.

   Contract (everything a consumer needs; no page globals touched):
     opts: value (0-100, default 50); onChange(value, 'value N%') fires on
           every set, including the initial paint.
     handle: el, get() (current value), set(v) — no clamping beyond the
             drag helper's 0-100; the needle maps value linearly to ±60°.
   CSS lives in the "needle gauge" block of DUPRE_CSS; no other styles involved. */
DUPRE.needleGauge = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  let v = opts.value ?? 50;
  const el = document.createElement('div'); el.className = 'dupre-gauge';
  el.innerHTML = `<div class="dupre-dial"><div class="dupre-arc"></div>
     <div class="dupre-tk" style="transform:rotate(-60deg)"></div><div class="dupre-tk" style="transform:rotate(0)"></div><div class="dupre-tk" style="transform:rotate(60deg)"></div>
     <div class="dupre-ndl"></div><div class="dupre-hub"></div></div><div class="dupre-gv"><span>0</span>%</div>`;
  host.appendChild(el);
  const ndl = el.querySelector('.dupre-ndl'), num = el.querySelector('.dupre-gv span');
  function set(nv) {
    v = nv;
    ndl.style.transform = `rotate(${-60 + v / 100 * 120}deg)`;
    num.textContent = Math.round(v);
    onChange(v, 'value ' + Math.round(v) + '%');
  }
  dragDelta(el, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el, get: () => v, set };
};

/* 11 stereo VU — two LED bars with peak-hold; set(l, r) drives both.

   Contract (everything a consumer needs; no page globals touched):
     opts: bars (cells per channel, default 16); onChange([l, r], 'L n · R n')
           fires on every set (values 0-1, readout in percent).
     handle: el, get() ([l, r] last set), set(l, r). Peak-hold is display-side
             state owned in here: each channel's peak cell decays 0.4 cells
             per set() call, so the page's tick cadence is the decay clock
             (the tick contract — the page owns the clock and the signal).
   CSS lives in the "segmented VU / LED bar" block of DUPRE_CSS; no other
   styles involved. */
DUPRE.vuPair = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const n = opts.bars || 16;
  const el = document.createElement('div'); el.className = 'dupre-vu';
  el.innerHTML = `<div class="dupre-vurow"><span class="dupre-ch">L</span><span class="dupre-vubar"></span></div>
     <div class="dupre-vurow"><span class="dupre-ch">R</span><span class="dupre-vubar"></span></div>`;
  host.appendChild(el);
  const bars = el.querySelectorAll('.dupre-vubar');
  bars.forEach(b => buildBars(b, n));
  const pkL = { v: 0 }, pkR = { v: 0 };
  function paint(bar, l, pk) {
    const b = bar.children, lit = Math.round(l * n);
    pk.v = Math.max(lit, (pk.v || 0) - 0.4); const p = Math.round(pk.v);
    for (let k = 0; k < n; k++) {
      let c = k < lit ? (k >= n - 2 ? 'dupre-clip' : k >= n - 4 ? 'dupre-hot' : 'dupre-on') : '';
      if (p > 0 && k === p - 1) c = (c ? c + ' ' : '') + 'dupre-peak';
      b[k].className = c;
    }
  }
  let lv = 0, rv = 0;
  function set(l, r) {
    lv = l; rv = r;
    paint(bars[0], l, pkL); paint(bars[1], r, pkR);
    onChange([l, r], 'L ' + Math.round(l * 100) + ' · R ' + Math.round(r * 100));
  }
  return { el, get: () => [lv, rv], set };
};

/* 12 mini 4-bar signal — compact activity meter; set(level) */
DUPRE.miniSig = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const el = document.createElement('span'); el.className = 'sig';
  el.innerHTML = '<i></i><i></i><i></i><i></i>';
  host.appendChild(el);
  let v = 0;
  function set(l) {
    v = l;
    const b = el.children, lit = Math.round(l * 4);
    for (let k = 0; k < 4; k++) b[k].className = k < lit ? (k >= 3 ? 'clip' : k >= 2 ? 'hot' : 'on') : '';
    onChange(l, Math.round(l * 100) + '%');
  }
  return { el, get: () => v, set };
};

/* 13 signal ladder — stepped 0-4 strength; click cycles.

   Contract (everything a consumer needs; no page globals touched):
     opts: value (0-4, default 3); onChange(v, 'v/4') fires on every set,
           including the initial paint.
     handle: el, get() (current step), set(v) — bars at or below v light
             gold; click advances (v + 1) % 5.
   CSS lives in the "signal ladder" block of DUPRE_CSS; the lit/unlit bar
   colours are inline (--gold / --wash), no other styles involved. */
DUPRE.signalLadder = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  let v = opts.value ?? 3;
  const el = document.createElement('span'); el.className = 'dupre-ladder';
  el.innerHTML = '<i></i><i></i><i></i><i></i>';
  host.appendChild(el);
  function set(nv) {
    v = nv;
    const bars = el.children;
    for (let i = 0; i < bars.length; i++) bars[i].style.background = i < v ? 'var(--gold)' : 'var(--wash)';
    onChange(v, v + '/4');
  }
  el.onclick = () => set((v + 1) % 5);
  set(v);
  return { el, get: () => v, set };
};

/* 14 linear fuel bar — one 0-100 bar, warn tint under the threshold; drag to set */
DUPRE.fuelBar = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const warnAt = opts.warnAt ?? 20;
  let v = opts.value ?? 50;
  const el = document.createElement('div'); el.className = 'bar';
  el.innerHTML = '<span></span>';
  host.appendChild(el);
  const fill = el.querySelector('span');
  function set(p) {
    v = p;
    fill.style.width = p + '%';
    el.classList.toggle('warn', p < warnAt);
    onChange(p, Math.round(p) + '%');
  }
  dragX(el, set);
  set(v);
  return { el, get: () => v, set };
};

/* 15 radial ring — percentage donut; drag up/down to set */
DUPRE.radialRing = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  let v = opts.value ?? 68;
  const el = document.createElement('span'); el.className = 'ring';
  el.innerHTML = '<b></b>';
  host.appendChild(el);
  const num = el.querySelector('b');
  function set(nv) {
    v = nv;
    el.style.setProperty('--p', v);
    num.textContent = Math.round(v);
    onChange(v, Math.round(v) + '%');
  }
  dragDelta(el, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el, get: () => v, set };
};

/* 16 sparkline — rolling history trace; push(v) appends a sample, fill(v) levels it */
DUPRE.sparkline = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const n = opts.samples || 40;
  const hist = Array.from({ length: n }, () => opts.value ?? 0.5);
  const el = document.createElement('span'); el.className = 'spark';
  el.innerHTML = '<svg viewBox="0 0 170 44" preserveAspectRatio="none"><polyline fill="none" stroke="var(--gold-hi)" stroke-width="1.5"/></svg>';
  host.appendChild(el);
  const line = el.querySelector('polyline');
  const clamp = x => Math.max(0, Math.min(1, x));
  function paint() {
    line.setAttribute('points', hist.map((v, i) => `${i / (n - 1) * 170},${44 - clamp(v) * 40 - 2}`).join(' '));
    onChange(hist[n - 1], String(Math.round(clamp(hist[n - 1]) * 100)));
  }
  function push(v) { hist.push(v); hist.shift(); paint(); }
  function fill(v) { hist.fill(v); paint(); }
  return { el, get: () => hist[n - 1], push, fill };
};

/* 17 waveform strip — sampled trace; set(samples, amp) with samples in -1..1 */
DUPRE.waveStrip = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const el = document.createElement('span'); el.className = 'wave';
  el.innerHTML = '<svg viewBox="0 0 170 38" preserveAspectRatio="none"><path fill="none" stroke="var(--gold)" stroke-width="1.2"/></svg>';
  host.appendChild(el);
  const path = el.querySelector('path');
  let amp = 0;
  function set(samples, a) {
    amp = a;
    let d = 'M0 19';
    if (samples.length < 2) d += ' L170 19';
    else for (let i = 0; i < samples.length; i++)
      d += ` L${(i / (samples.length - 1) * 170).toFixed(1)} ${(19 + samples[i] * 14).toFixed(1)}`;
    path.setAttribute('d', d);
    onChange(amp, 'amp ' + Math.round(amp * 100) + '%');
  }
  set([], opts.amp ?? 0.6);
  return { el, get: () => amp, set };
};

/* N11 oscilloscope — sampled phosphor trace; set(samples, vpp) with samples in -1..1 */
DUPRE.scope = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const el = document.createElement('span'); el.className = 'scope';
  el.innerHTML = '<span class="grat"></span><svg viewBox="0 0 176 78" preserveAspectRatio="none"><polyline/></svg>';
  host.appendChild(el);
  const line = el.querySelector('polyline');
  let vpp = 0;
  function set(samples, v) {
    vpp = v;
    const n = samples.length;
    line.setAttribute('points', samples.map((s, i) => `${(i / (n - 1) * 176).toFixed(1)},${(39 + s * 22).toFixed(1)}`).join(' '));
    onChange(vpp, 'Vpp ' + Math.round(vpp * 100));
  }
  return { el, get: () => vpp, set };
};

/* N12 spectrum / EQ bars — set(values) paints one column per band */
DUPRE.eqBars = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const bands = opts.bands || 11, cells = opts.cells || 9;
  const el = document.createElement('span'); el.className = 'eq';
  host.appendChild(el);
  for (let b = 0; b < bands; b++) {
    const band = document.createElement('span'); band.className = 'band';
    for (let s = 0; s < cells; s++) band.appendChild(document.createElement('i'));
    el.appendChild(band);
  }
  let vals = [];
  function set(values) {
    vals = values;
    let peak = 0;
    for (let b = 0; b < bands; b++) {
      const col = el.children[b].children, val = values[b], lit = Math.round(val * cells);
      peak = Math.max(peak, val);
      for (let k = 0; k < cells; k++) {
        let c = '';
        if (k < lit) c = (k >= cells - 1 ? 'clip' : k >= cells - 3 ? 'hot' : 'on');
        col[k].className = c;
      }
    }
    onChange(vals, 'peak ' + Math.round(peak * 100) + '%');
  }
  return { el, get: () => vals, set };
};

/* N13 crossed-needle meter — one drive value, FWD and RFL needles cross */
DUPRE.crossNeedle = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  let v = opts.value ?? 55;
  const el = document.createElement('div'); el.className = 'crossm';
  el.innerHTML = `<div class="face"><div class="arc"></div><div class="nA"></div><div class="nB"></div></div>
     <div class="lbl"><span>FWD</span><span>RFL</span></div>`;
  host.appendChild(el);
  const face = el.querySelector('.face'), nA = el.querySelector('.nA'), nB = el.querySelector('.nB');
  function set(nv) {
    v = nv;
    const fwd = v, rfl = v * 0.68;
    nA.style.transform = `rotate(${-42 + fwd / 100 * 84}deg)`;
    nB.style.transform = `rotate(${42 - rfl / 100 * 84}deg)`;
    onChange(v, 'FWD ' + Math.round(fwd) + ' · RFL ' + Math.round(rfl));
  }
  dragDelta(face, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el, get: () => v, set };
};

/* N14 thermometer column — mercury rises with the value */
DUPRE.thermometer = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  let v = opts.value ?? 58;
  const el = document.createElement('div'); el.className = 'thermo';
  el.innerHTML = `<div class="scale"><span>90</span><span>60</span><span>30</span></div>
     <div class="wrapcol"><div class="tube"><div class="fill"></div></div><div class="bulb"></div></div>`;
  host.appendChild(el);
  const fill = el.querySelector('.fill');
  function set(nv) {
    v = nv;
    fill.style.height = v + '%';
    onChange(v, Math.round(30 + v / 100 * 60) + '°');
  }
  dragDelta(el, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el, get: () => v, set };
};

/* N15 bourdon pressure gauge — needle over a printed arc with a redline */
DUPRE.bourdon = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  let v = opts.value ?? 45;
  const el = document.createElement('div'); el.className = 'bourdon';
  el.innerHTML = `<svg viewBox="0 0 82 82"><path d="M14 62 A34 34 0 0 1 68 62" fill="none" stroke="#2c2f32" stroke-width="3"/>
       <path d="M52 22 A34 34 0 0 1 68 62" fill="none" stroke="#cb6b4d" stroke-width="3"/></svg>
     <div class="ndl"></div><div class="hub"></div><div class="cap">PSI</div>`;
  host.appendChild(el);
  const ndl = el.querySelector('.ndl');
  function set(nv) {
    v = nv;
    ndl.style.transform = `rotate(${-60 + v / 100 * 120}deg)`;
    onChange(v, Math.round(v / 100 * 160) + ' PSI');
  }
  dragDelta(el, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el, get: () => v, set };
};

/* N16 strip-chart recorder — scrolling history, pen rides the newest value;
   push(v) appends, set(samples, current) replaces the trace (values 0..1) */
DUPRE.stripChart = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const n = opts.samples || 60;
  const hist = Array.from({ length: n }, () => opts.value ?? 0.5);
  const el = document.createElement('span'); el.className = 'strip';
  el.innerHTML = '<span class="rule"></span><svg viewBox="0 0 176 62" preserveAspectRatio="none"><polyline/></svg><span class="pen" style="top:31px"></span>';
  host.appendChild(el);
  const line = el.querySelector('polyline'), pen = el.querySelector('.pen');
  const clamp = x => Math.max(0, Math.min(1, x));
  const yPx = v => 59 - clamp(v) * 56;
  function paint(current) {
    line.setAttribute('points', hist.map((v, i) => `${i / (n - 1) * 176},${yPx(v).toFixed(1)}`).join(' '));
    pen.style.top = yPx(current) + 'px';
    onChange(current, String(Math.round(clamp(current) * 100)));
  }
  function push(v) { hist.push(v); hist.shift(); paint(v); }
  function set(samples, current) {
    for (let i = 0; i < n; i++) hist[i] = samples[i] ?? 0.5;
    paint(current ?? hist[n - 1]);
  }
  return { el, get: () => hist[n - 1], push, set };
};

/* N17 correlation meter — needle rests at 0 and swings ±; drag left/right */
DUPRE.corrMeter = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  let p = opts.value ?? 58;
  const el = document.createElement('div'); el.className = 'corr';
  el.innerHTML = `<div class="face"><div class="arc"></div><div class="zero"></div><div class="ndl"></div></div>
     <div class="lbl"><span>−1</span><span>0</span><span>+1</span></div>`;
  host.appendChild(el);
  const ndl = el.querySelector('.ndl');
  function set(np) {
    p = np;
    const v = (p - 50) / 50;
    ndl.style.transform = `rotate(${v * 38}deg)`;
    onChange(v, (v >= 0 ? '+' : '') + v.toFixed(2));
  }
  dragX(el, set);
  set(p);
  return { el, get: () => p, set };
};

/* N18 battery-cell gauge — charge as discrete cells, the low end warns */
DUPRE.battCells = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const cells = opts.cells || 8, warnAt = opts.warnAt ?? 25;
  let p = opts.value ?? 62;
  const el = document.createElement('div'); el.className = 'batt';
  el.innerHTML = '<div class="cells"></div><span class="nub"></span>';
  host.appendChild(el);
  const cc = el.querySelector('.cells');
  for (let i = 0; i < cells; i++) { const c = document.createElement('span'); c.className = 'cell'; cc.appendChild(c); }
  function set(np) {
    p = np;
    const lit = Math.round(p / 100 * cells);
    for (let i = 0; i < cells; i++) cc.children[i].className = 'cell' + (i < lit ? ' on' : '') + ((p <= warnAt && i < lit) ? ' warn' : '');
    onChange(p, Math.round(p) + '%');
  }
  dragX(el, set);
  set(p);
  return { el, get: () => p, set };
};

/* R01 moving-coil VU — pivot below the face, authentic nonlinear dB scale;
   set(t) positions instantly (0..1.02); ballistics belong to the signal owner */
DUPRE.mcVu = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 150, 96);
  const cx = 75, cy = 112, sweep = t => -43 + t * 86;
  const glassId = uid('vuGlass'), clipId = uid('vuFace');
  const defs = svgEl(s, 'defs', {});
  const g1 = svgEl(defs, 'linearGradient', { id: glassId, x1: 0, y1: 0, x2: 0, y2: 1 });
  svgEl(g1, 'stop', { offset: '0', 'stop-color': 'rgba(255,255,255,.13)' });
  svgEl(g1, 'stop', { offset: '.35', 'stop-color': 'rgba(255,255,255,0)' });
  const clip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(clip, 'rect', { x: 8, y: 8, width: 134, height: 74, rx: 3 });
  svgEl(s, 'rect', { x: .5, y: .5, width: 149, height: 95, rx: 7, fill: '#16130f', stroke: '#060505' });
  svgEl(s, 'rect', { x: 8, y: 8, width: 134, height: 74, rx: 3, fill: 'var(--cream)' });
  const face = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  const arcPt = t => polar(cx, cy, 58, sweep(t));
  const [ax1, ay1] = arcPt(0), [ax2, ay2] = arcPt(1);
  svgEl(face, 'path', { d: `M ${ax1} ${ay1} A 58 58 0 0 1 ${ax2} ${ay2}`, fill: 'none', stroke: '#3a3128', 'stroke-width': 1.2 });
  const [rx1, ry1] = arcPt(.75);
  svgEl(face, 'path', { d: `M ${rx1} ${ry1} A 58 58 0 0 1 ${ax2} ${ay2}`, fill: 'none', stroke: 'var(--fail)', 'stroke-width': 3.5 });
  for (const [db, t] of VUDB) {
    const a = sweep(t), [x1, y1] = polar(cx, cy, 55, a), [x2, y2] = polar(cx, cy, 63, a);
    svgEl(face, 'line', { x1, y1, x2, y2, stroke: db > 0 ? 'var(--fail)' : '#3a3128', 'stroke-width': 1.1 });
  }
  for (const [db, t] of VUDB) {
    if (![-20, -10, -5, -3, 0, 1, 2, 3].includes(db)) continue;
    const [x, y] = polar(cx, cy, 69, sweep(t));
    svgEl(face, 'text', {
      x, y: y + 2, 'text-anchor': 'middle', 'font-size': 5.8, 'font-family': 'var(--mono)',
      fill: db > 0 ? 'var(--fail)' : '#3a3128'
    }).textContent = Math.abs(db);
  }
  svgEl(face, 'text', {
    x: 75, y: 78, 'text-anchor': 'middle', 'font-size': 11, 'font-weight': 700,
    'font-family': 'var(--mono)', fill: '#3a3128'
  }).textContent = 'VU';
  const needle = svgEl(face, 'line', {
    x1: cx, y1: cy, x2: cx, y2: cy - 62, stroke: '#1a1613', 'stroke-width': 1.6,
    transform: `rotate(${sweep(.35)},${cx},${cy})`
  });
  svgEl(face, 'circle', { cx, cy: 88, r: 9, fill: '#16130f' });
  svgEl(s, 'rect', { x: 8, y: 8, width: 134, height: 74, rx: 3, fill: `url(#${glassId})` });
  let t = opts.value ?? .35;
  function set(nt) {
    t = Math.max(0, Math.min(1.02, nt));
    needle.setAttribute('transform', `rotate(${sweep(Math.min(1, t))},${cx},${cy})`);
    const db = vuDb(Math.min(1, t));
    onChange(t, (db > 0 ? '+' : '') + db.toFixed(1) + ' VU');
  }
  return { el: s, get: () => t, set };
};

/* R07 round panel meter — porthole bezel, same VU law as R01; drag up/down.

   Contract (everything a consumer needs; no page globals touched):
     opts: value (0-100, default 50); onChange(value, '+x.x dB') fires on
           every set — the readout maps the linear value through the shared
           VU law (VUDB/vuDb), like every VU-family meter.
     handle: el, get() (current value), set(v) — the needle sweeps -40°..+40°
             over the clamped 0-1 position.
   SVG-built: styling is inline attributes plus the shared .rsvg stage block
   of DUPRE_CSS; the face clip is a per-instance defs entry. */
DUPRE.roundMeter = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 110, 104);
  const cx = 55, fy = 54, py = 74, sweep = t => -40 + t * 80;
  const clipId = uid('rndFace');
  const defs = svgEl(s, 'defs', {});
  const clip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(clip, 'circle', { cx, cy: fy, r: 40 });
  svgEl(s, 'circle', { cx, cy: fy, r: 48, fill: '#141110', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy: fy, r: 40, fill: 'var(--cream)' });
  const g = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  const pt = (r, t) => polar(cx, py, r, sweep(t));
  const [ax1, ay1] = pt(44, 0), [ax2, ay2] = pt(44, 1);
  svgEl(g, 'path', { d: `M ${ax1} ${ay1} A 44 44 0 0 1 ${ax2} ${ay2}`, fill: 'none', stroke: '#3a3128', 'stroke-width': 1.1 });
  const [rzx, rzy] = pt(44, .75);
  svgEl(g, 'path', { d: `M ${rzx} ${rzy} A 44 44 0 0 1 ${ax2} ${ay2}`, fill: 'none', stroke: 'var(--fail)', 'stroke-width': 3 });
  for (const [db, t] of VUDB) {
    const [x1, y1] = pt(41.5, t), [x2, y2] = pt(47, t);
    svgEl(g, 'line', { x1, y1, x2, y2, stroke: db > 0 ? 'var(--fail)' : '#3a3128', 'stroke-width': 1 });
  }
  for (const [db, t] of VUDB) {
    if (![-20, -10, -5, -3, 0, 3].includes(db)) continue;
    const [x, y] = pt(52, t);
    svgEl(g, 'text', {
      x, y: y + 2, 'text-anchor': 'middle', 'font-size': 5.5, 'font-family': 'var(--mono)',
      fill: db > 0 ? 'var(--fail)' : '#3a3128'
    }).textContent = Math.abs(db);
  }
  svgEl(g, 'text', {
    x: cx, y: fy + 14, 'text-anchor': 'middle', 'font-size': 8, 'font-weight': 700,
    'font-family': 'var(--mono)', fill: '#3a3128'
  }).textContent = 'dB';
  const needle = svgEl(g, 'line', {
    x1: cx, y1: py, x2: cx, y2: py - 46, stroke: '#1a1613', 'stroke-width': 1.5,
    transform: `rotate(0,${cx},${py})`
  });
  svgEl(g, 'circle', { cx, cy: py, r: 5, fill: '#141110' });
  svgEl(s, 'ellipse', { cx: cx - 8, cy: fy - 22, rx: 20, ry: 9, fill: 'rgba(255,255,255,.07)', transform: `rotate(-18,${cx - 8},${fy - 22})` });
  let v = opts.value ?? 50;
  function set(nv) {
    v = nv;
    const t = Math.max(0, Math.min(1, v / 100));
    needle.setAttribute('transform', `rotate(${-40 + t * 80},${cx},${py})`);
    const db = vuDb(t);
    onChange(v, (db > 0 ? '+' : '') + db.toFixed(1) + ' dB');
  }
  dragDelta(s, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el: s, get: () => v, set };
};

/* R08 chrome MIN/MAX indicator — dark pointer over a brushed dome */
DUPRE.chromeMinMax = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 110, 104);
  const cx = 55, cy = 58;
  gradDef('chrRing', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#eceef0'], ['.5', '#9aa0a8'], ['1', '#54585e']]);
  gradDef('chrDome', 'radialGradient', { cx: '48%', cy: '20%', r: '85%' }, [['0', '#e6e8ec'], ['1', '#82878f']]);
  svgEl(s, 'circle', { cx, cy: 54, r: 47, fill: 'url(#chrRing)' });
  svgEl(s, 'circle', { cx, cy: 54, r: 40, fill: '#101214', stroke: '#2c2f33', 'stroke-width': 1 });
  svgEl(s, 'path', { d: `M 21 60 A 34 34 0 0 1 89 60 Z`, fill: 'url(#chrDome)', stroke: '#55595f', 'stroke-width': .5 });
  for (const r of [14, 22, 30])
    svgEl(s, 'path', { d: `M ${cx - r} 60 A ${r} ${r} 0 0 1 ${cx + r} 60`, fill: 'none', stroke: 'rgba(255,255,255,.13)', 'stroke-width': .7 });
  const ptr = svgEl(s, 'line', { x1: cx, y1: cy - 10, x2: cx, y2: cy - 31, stroke: '#17191b', 'stroke-width': 2.2, 'stroke-linecap': 'round' });
  svgEl(s, 'circle', { cx, cy, r: 6, fill: '#23262a' });
  for (let k = 0; k < 8; k++) {
    const [x, y] = polar(cx, cy, 6, k * 45);
    svgEl(s, 'circle', { cx: x, cy: y, r: 1.3, fill: '#23262a' });
  }
  svgEl(s, 'circle', { cx, cy, r: 1.6, fill: '#0c0d0e' });
  svgEl(s, 'text', {
    x: 24, y: 66, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.05em',
    'font-family': 'var(--mono)', fill: '#d7dade'
  }).textContent = 'MIN';
  svgEl(s, 'text', {
    x: 86, y: 66, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.05em',
    'font-family': 'var(--mono)', fill: '#d7dade'
  }).textContent = 'MAX';
  svgEl(s, 'text', {
    x: cx, y: 84, 'text-anchor': 'middle', 'font-size': 7, 'font-style': 'italic',
    'font-family': 'var(--mono)', fill: '#787c82'
  }).textContent = 'dupre.';
  svgEl(s, 'ellipse', { cx: 47, cy: 34, rx: 22, ry: 9, fill: 'rgba(255,255,255,.10)', transform: 'rotate(-16,47,34)' });
  let v = opts.value ?? 50;
  function set(nv) {
    v = Math.max(0, Math.min(100, nv));
    ptr.setAttribute('transform', `rotate(${-55 + v / 100 * 110},${cx},${cy})`);
    onChange(v, v <= 2 ? 'MIN' : v >= 98 ? 'MAX' : Math.round(v) + '%');
  }
  dragDelta(s, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el: s, get: () => v, set };
};

/* R09 black-face aviation gauge — zone arcs per the airspeed-indicator scheme */
DUPRE.aviationGauge = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg drag', 110, 104);
  const cx = 55, cy = 52, sweep = t => -135 + t * 270;
  def('avGlow', d => {
    const fl = svgEl(d, 'filter', { id: 'avGlow', x: '-60%', y: '-60%', width: '220%', height: '220%' });
    svgEl(fl, 'feGaussianBlur', { in: 'SourceGraphic', stdDeviation: 1.4 });
  });
  svgEl(s, 'circle', { cx, cy, r: 47, fill: '#1b1917', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 41, fill: '#0a0908', stroke: '#3a352c', 'stroke-width': 1 });
  const zone = (t1, t2, color) => {
    const [x1, y1] = polar(cx, cy, 37, sweep(t1)), [x2, y2] = polar(cx, cy, 37, sweep(t2));
    svgEl(s, 'path', { d: `M ${x1} ${y1} A 37 37 0 ${(t2 - t1) > .5 ? 1 : 0} 1 ${x2} ${y2}`, fill: 'none', stroke: color, 'stroke-width': 3, opacity: .85 });
  };
  zone(.15, .6, 'var(--pass)'); zone(.6, .85, 'var(--gold)'); zone(.85, 1, 'var(--fail)');
  for (let i = 0; i <= 40; i++) {
    const t = i / 40, major = i % 5 === 0, a = sweep(t);
    const [x1, y1] = polar(cx, cy, 40, a), [x2, y2] = polar(cx, cy, major ? 32 : 36, a);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--gold)', 'stroke-width': major ? 1.6 : .8, opacity: major ? 1 : .7 });
    if (major) {
      const [nx, ny] = polar(cx, cy, 25, a);
      svgEl(s, 'text', {
        x: nx, y: ny + 2.4, 'text-anchor': 'middle', 'font-size': 6.5, 'font-family': 'var(--mono)',
        fill: 'var(--gold-hi)'
      }).textContent = i / 5;
    }
  }
  svgEl(s, 'text', {
    x: cx, y: cy + 16, 'text-anchor': 'middle', 'font-size': 5.5, 'letter-spacing': '.14em',
    'font-family': 'var(--mono)', fill: 'var(--gold)', opacity: .8
  }).textContent = '×100 RPM';
  const needle = svgEl(s, 'g', {});
  svgEl(needle, 'line', {
    x1: cx, y1: cy + 8, x2: cx, y2: cy - 30, stroke: 'var(--gold-hi)', 'stroke-width': 4,
    'stroke-linecap': 'round', opacity: .5, filter: 'url(#avGlow)'
  });
  svgEl(needle, 'line', {
    x1: cx, y1: cy + 8, x2: cx, y2: cy - 30, stroke: 'var(--gold-hi)', 'stroke-width': 2.2,
    'stroke-linecap': 'round'
  });
  svgEl(s, 'circle', { cx, cy, r: 5, fill: '#1b1917', stroke: '#3a352c' });
  svgEl(s, 'ellipse', { cx: cx - 10, cy: cy - 24, rx: 18, ry: 8, fill: 'rgba(255,255,255,.05)', transform: `rotate(-18,${cx - 10},${cy - 24})` });
  let v = opts.value ?? 52;
  function set(nv) {
    v = Math.max(0, Math.min(100, nv));
    needle.setAttribute('transform', `rotate(${-135 + v / 100 * 270},${cx},${cy})`);
    onChange(v, (v / 100 * 8).toFixed(1) + ' ×100 rpm');
  }
  dragDelta(s, () => v, set, { min: 0, max: 100 });
  set(v);
  return { el: s, get: () => v, set };
};

/* R13 edgewise strip meter — compressed log scale, the bar rides the edge */
DUPRE.edgeMeter = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const SCALE = [[0, .08], [3, .26], [6, .44], [12, .62], [20, .78], [40, .94]];
  const s = stageSvg(host, 'rsvg drag', 70, 130);
  const wy0 = 12, wy1 = 118;
  const faceId = uid('edgeFace');
  const defs = svgEl(s, 'defs', {});
  const pg = svgEl(defs, 'linearGradient', { id: faceId, x1: 0, y1: 0, x2: 1, y2: 0 });
  svgEl(pg, 'stop', { offset: '0', 'stop-color': '#efe6ca' });
  svgEl(pg, 'stop', { offset: '1', 'stop-color': '#d9cfae' });
  svgEl(s, 'rect', { x: 8, y: 6, width: 54, height: 118, rx: 8, fill: '#171412', stroke: '#060505', 'stroke-width': 1.5 });
  svgEl(s, 'rect', { x: 14, y: wy0, width: 42, height: wy1 - wy0, fill: `url(#${faceId})`, stroke: '#0a0908' });
  const yOf = f => wy0 + f * (wy1 - wy0);
  for (const [db, f] of SCALE) {
    const y = yOf(f);
    svgEl(s, 'line', { x1: 19, y1: y, x2: 40, y2: y, stroke: '#3a3128', 'stroke-width': 1 });
    svgEl(s, 'text', {
      x: 52, y: y + 2.4, 'text-anchor': 'end', 'font-size': 7, 'font-family': 'var(--mono)',
      fill: '#3a3128'
    }).textContent = db;
  }
  for (let i = 0; i < SCALE.length - 1; i++) {
    const y = yOf((SCALE[i][1] + SCALE[i + 1][1]) / 2);
    svgEl(s, 'line', { x1: 19, y1: y, x2: 32, y2: y, stroke: '#3a3128', 'stroke-width': .6, opacity: .7 });
  }
  const bar = svgEl(s, 'polygon', { points: '56,0 24,-1.4 24,1.4', fill: '#1a1613' });
  svgEl(s, 'rect', { x: 14, y: wy0, width: 42, height: 24, fill: 'rgba(255,255,255,.08)' });
  let frac = opts.value ?? .62;
  function set(f) {
    frac = Math.max(.08, Math.min(.94, f));
    bar.setAttribute('transform', `translate(0,${wy0 + frac * (wy1 - wy0)})`);
    let i = 0; while (i < SCALE.length - 2 && SCALE[i + 1][1] < frac) i++;
    const [d1, f1] = SCALE[i], [d2, f2] = SCALE[i + 1];
    const db = d1 + (d2 - d1) * Math.max(0, Math.min(1, (frac - f1) / (f2 - f1)));
    onChange(frac, '−' + db.toFixed(1) + ' dB');
  }
  dragY(s, pct => set(.08 + (100 - pct) / 100 * .86));
  set(frac);
  return { el: s, get: () => frac, set };
};

/* R17 round CRT scope — pale phosphor face; the trace is the instrument's own
   animation, so it lives here with its reduced-motion gate */
DUPRE.roundCrt = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 110, 104);
  const cx = 55, cy = 52;
  const faceId = uid('rcrtFace'), clipId = uid('rcrtClip');
  gradDef('sfScrew', 'radialGradient', { cx: '40%', cy: '35%', r: '75%' }, [['0', '#9b968a'], ['1', '#4a463e']]);
  def('avGlow', d => {
    const fl = svgEl(d, 'filter', { id: 'avGlow', x: '-60%', y: '-60%', width: '220%', height: '220%' });
    svgEl(fl, 'feGaussianBlur', { in: 'SourceGraphic', stdDeviation: 1.4 });
  });
  /* the face gradient reads screen-family vars from this instrument's subtree,
     so it must live in the local defs, not the shared def sink */
  const defs = svgEl(s, 'defs', {});
  const ph = svgEl(defs, 'radialGradient', { id: faceId, cx: '50%', cy: '44%', r: '70%' });
  svgEl(ph, 'stop', { offset: '0', 'stop-color': 'var(--crt-face1,#b9d8c0)' });
  svgEl(ph, 'stop', { offset: '1', 'stop-color': 'var(--crt-face2,#8bb296)' });
  const clip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(clip, 'circle', { cx, cy, r: 38 });
  svgEl(s, 'circle', { cx, cy, r: 48, fill: '#141110', stroke: '#060505', 'stroke-width': 2 });
  for (let k = 0; k < 4; k++) {
    const [x, y] = polar(cx, cy, 43, 45 + k * 90);
    svgEl(s, 'circle', { cx: x, cy: y, r: 2.6, fill: 'url(#sfScrew)', stroke: '#0a0908', 'stroke-width': .5 });
  }
  svgEl(s, 'circle', { cx, cy, r: 38, fill: `url(#${faceId})` });
  const g = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  for (let i = -4; i <= 4; i++) {
    svgEl(g, 'line', { x1: cx + i * 9, y1: cy - 38, x2: cx + i * 9, y2: cy + 38, stroke: 'var(--scr-dim,#3d5c46)', 'stroke-width': i === 0 ? .9 : .5, opacity: .8 });
    svgEl(g, 'line', { x1: cx - 38, y1: cy + i * 9, x2: cx + 38, y2: cy + i * 9, stroke: 'var(--scr-dim,#3d5c46)', 'stroke-width': i === 0 ? .9 : .5, opacity: .8 });
  }
  const glow = svgEl(g, 'polyline', { points: '', fill: 'none', stroke: 'var(--crt-glow,#eef7ee)', 'stroke-width': 3, opacity: .35, filter: 'url(#avGlow)' });
  const trace = svgEl(g, 'polyline', { points: '', fill: 'none', stroke: '#f4fcf4', 'stroke-width': 1.3 });
  svgEl(s, 'ellipse', { cx: cx - 10, cy: cy - 16, rx: 20, ry: 10, fill: 'rgba(255,255,255,.10)', transform: `rotate(-20,${cx - 10},${cy - 16})` });
  let tph = 0;
  function tick() {
    tph += 0.12;
    const amp = 8 + 3 * Math.sin(tph * 0.35);
    let pts = '';
    for (let x = -38; x <= 38; x += 2) {
      const y = Math.sin(x * 0.55 + tph * 2.5) * amp;
      pts += `${cx + x},${(cy + y).toFixed(1)} `;
    }
    trace.setAttribute('points', pts.trim());
    glow.setAttribute('points', pts.trim());
    onChange(amp, 'Vpp ' + Math.round(amp * 2 * 4.5));
  }
  tick();
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) setInterval(tick, 80);
  return { el: s, tick };
};

/* R43 attitude indicator — sky/ground roll+shift behind a fixed miniature aircraft; 2D drag */
DUPRE.attitudeIndicator = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 130, 130);
  const cx = 65, cy = 65;
  const clipId = uid('aiClip');
  gradDef('aiSky', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#54677d'], ['1', '#3a4c60']]);
  gradDef('aiGnd', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#5c4630'], ['1', '#3c2e1e']]);
  const defs = svgEl(s, 'defs', {});
  const clip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(clip, 'circle', { cx, cy, r: 48 });
  svgEl(s, 'circle', { cx, cy, r: 56, fill: '#14110e', stroke: '#060505', 'stroke-width': 2 });
  const g = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  const ball = svgEl(g, 'g', {});
  svgEl(ball, 'rect', { x: cx - 90, y: cy - 180, width: 180, height: 180, fill: 'url(#aiSky)' });
  svgEl(ball, 'rect', { x: cx - 90, y: cy, width: 180, height: 180, fill: 'url(#aiGnd)' });
  svgEl(ball, 'line', { x1: cx - 90, y1: cy, x2: cx + 90, y2: cy, stroke: '#f3e7c5', 'stroke-width': 1.4 });
  for (const p of [-20, -10, 10, 20]) {
    const y = cy - p * 1.6, w = p % 20 === 0 ? 16 : 10;
    svgEl(ball, 'line', { x1: cx - w, y1: y, x2: cx + w, y2: y, stroke: '#f3e7c5', 'stroke-width': .8, opacity: .85 });
    svgEl(ball, 'text', {
      x: cx + w + 3, y: y + 2, 'font-size': 4.6, 'font-family': 'var(--mono)',
      fill: '#f3e7c5', opacity: .85
    }).textContent = String(Math.abs(p));
  }
  /* fixed bank scale + pointer + miniature aircraft */
  for (const b of [-60, -45, -30, -20, -10, 0, 10, 20, 30, 45, 60]) {
    const [x1, y1] = polar(cx, cy, 47, b), [x2, y2] = polar(cx, cy, b % 30 === 0 ? 42 : 44, b);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--cream)', 'stroke-width': b === 0 ? 1.6 : .9, opacity: .9 });
  }
  svgEl(s, 'polygon', { points: `${cx - 3.5},${cy - 38} ${cx + 3.5},${cy - 38} ${cx},${cy - 44}`, fill: 'var(--gold-hi)' });
  svgEl(s, 'path', {
    d: `M ${cx - 22} ${cy} L ${cx - 7} ${cy} L ${cx - 4} ${cy + 4} M ${cx + 22} ${cy} L ${cx + 7} ${cy} L ${cx + 4} ${cy + 4}`,
    fill: 'none', stroke: 'var(--gold-hi)', 'stroke-width': 2.4, 'stroke-linecap': 'round'
  });
  svgEl(s, 'circle', { cx, cy, r: 2, fill: 'var(--gold-hi)' });
  let bank = 0, pitch = 0;
  function set(b, p) {
    bank = Math.max(-60, Math.min(60, b)); pitch = Math.max(-20, Math.min(20, p));
    ball.setAttribute('transform', `rotate(${(-bank).toFixed(1)},${cx},${cy}) translate(0,${(pitch * 1.6).toFixed(1)})`);
    onChange({ bank, pitch }, 'BANK ' + (bank < 0 ? 'L' : bank > 0 ? 'R' : '') + Math.abs(Math.round(bank)) +
      ' · PITCH ' + (pitch >= 0 ? '+' : '-') + String(Math.abs(Math.round(pitch))).padStart(2, '0'));
  }
  s.style.touchAction = 'none'; s.style.cursor = 'move';
  s.addEventListener('pointerdown', e => {
    s.setPointerCapture(e.pointerId);
    const x0 = e.clientX, y0 = e.clientY, b0 = bank, p0 = pitch;
    const mv = ev => set(b0 + (ev.clientX - x0) * 0.4, p0 + (ev.clientY - y0) * 0.25);
    const up = () => { s.removeEventListener('pointermove', mv); s.removeEventListener('pointerup', up); s.removeEventListener('pointercancel', up); };
    s.addEventListener('pointermove', mv); s.addEventListener('pointerup', up); s.addEventListener('pointercancel', up); e.preventDefault();
  });
  set(opts.bank ?? 0, opts.pitch ?? 0);
  return { el: s, get: () => ({ bank, pitch }), set };
};

/* R44 heading bug + servo needle — drag parks the command; the needle chases
   with honest servo lag (instrument-owned animation, reduced-motion gated) */
DUPRE.headingBug = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 130, 130);
  const cx = 65, cy = 65;
  svgEl(s, 'circle', { cx, cy, r: 56, fill: '#14110e', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 50, fill: '#1a1714', stroke: '#2c2820', 'stroke-width': 1 });
  for (let d = 0; d < 360; d += 10) {
    const maj = d % 30 === 0;
    const [x1, y1] = polar(cx, cy, 48, d), [x2, y2] = polar(cx, cy, maj ? 42 : 45, d);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--cream)', 'stroke-width': maj ? 1 : .5, opacity: maj ? .9 : .5 });
  }
  for (let d = 0; d < 360; d += 30) {
    const lbl = d === 0 ? 'N' : d === 90 ? 'E' : d === 180 ? 'S' : d === 270 ? 'W' : String(d / 10);
    const [x, y] = polar(cx, cy, 35, d);
    svgEl(s, 'text', {
      x, y: y + 2.6, 'text-anchor': 'middle', 'font-size': d % 90 === 0 ? 8 : 6.4, 'font-weight': 700,
      'font-family': 'var(--mono)', fill: d % 90 === 0 ? 'var(--cream)' : 'var(--steel)'
    }).textContent = lbl;
  }
  svgEl(s, 'line', { x1: cx, y1: cy - 56, x2: cx, y2: cy - 48, stroke: 'var(--fail)', 'stroke-width': 2 });
  const bug = svgEl(s, 'path', {
    d: `M ${cx - 6} ${cy - 49} L ${cx - 6} ${cy - 44} L ${cx - 2.5} ${cy - 44} L ${cx} ${cy - 47} L ${cx + 2.5} ${cy - 44} L ${cx + 6} ${cy - 44} L ${cx + 6} ${cy - 49} Z`,
    fill: 'var(--gold-hi)', stroke: '#7d5c16', 'stroke-width': .7
  });
  const needle = svgEl(s, 'g', {});
  svgEl(needle, 'polygon', {
    points: `${cx - 2},${cy + 10} ${cx + 2},${cy + 10} ${cx + 1.2},${cy - 40} ${cx},${cy - 44} ${cx - 1.2},${cy - 40}`,
    fill: '#bfc4d0', stroke: '#4a4e58', 'stroke-width': .6
  });
  svgEl(s, 'circle', { cx, cy, r: 4.5, fill: '#3a3631', stroke: '#060505', 'stroke-width': 1 });
  let cmd = opts.value ?? 90, act = cmd;
  const draw = () => {
    bug.setAttribute('transform', `rotate(${cmd.toFixed(1)},${cx},${cy})`);
    needle.setAttribute('transform', `rotate(${act.toFixed(1)},${cx},${cy})`);
    onChange({ cmd, act }, 'CMD ' + String(Math.round((cmd % 360 + 360) % 360)).padStart(3, '0') +
      ' · ACT ' + String(Math.round((act % 360 + 360) % 360)).padStart(3, '0'));
  };
  function set(v) { cmd = (v % 360 + 360) % 360; draw(); }
  dragDelta(s, () => cmd, set, { min: -100000, max: 100000, sens: 1.2 });
  draw();
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches)
    setInterval(() => {
      const diff = ((cmd - act + 540) % 360) - 180;
      if (Math.abs(diff) < 0.4) { if (act !== cmd) { act = cmd; draw(); } return; }
      act = (act + diff * 0.07 + 360) % 360; draw();
    }, 80);
  return { el: s, get: () => ({ cmd, act }), set };
};

/* R53 circular chart recorder — a day per revolution; the pen draws the cycle
   (instrument-owned clock, reduced-motion paints the full day once); click for fresh paper */
DUPRE.chartRecorder = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 130, 130);
  const cx = 65, cy = 65;
  svgEl(s, 'circle', { cx, cy, r: 60, fill: '#17140f', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 54, fill: '#efe9da', stroke: '#8f897b', 'stroke-width': .8 });
  for (const r of [20, 31, 42])
    svgEl(s, 'circle', { cx, cy, r, fill: 'none', stroke: '#b8ae98', 'stroke-width': .5 });
  for (let h = 0; h < 24; h++) {
    const a = h * 15;
    const [x1, y1] = polar(cx, cy, 54, a), [x2, y2] = polar(cx, cy, h % 6 === 0 ? 12 : 48, a);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: '#b8ae98', 'stroke-width': h % 6 === 0 ? .6 : .35, opacity: .8 });
    if (h % 6 === 0) {
      const [tx, ty] = polar(cx, cy, 50, a + 5);
      svgEl(s, 'text', {
        x: tx, y: ty + 2, 'text-anchor': 'middle', 'font-size': 4.6, 'font-family': 'var(--mono)',
        fill: '#6e6552'
      }).textContent = String(h).padStart(2, '0');
    }
  }
  const trace = svgEl(s, 'path', { d: '', fill: 'none', stroke: '#8f2416', 'stroke-width': 1.1, 'stroke-linejoin': 'round' });
  const pen = svgEl(s, 'line', { x1: cx, y1: cy, x2: cx, y2: cy - 54, stroke: '#4a463e', 'stroke-width': 1 });
  const penDot = svgEl(s, 'circle', { cx, cy: cy - 30, r: 2, fill: '#8f2416' });
  svgEl(s, 'circle', { cx, cy, r: 4, fill: '#4a463e' });
  const val = h => 52 + 30 * Math.sin(h / 24 * 2 * Math.PI - 2.1) + 12 * Math.sin(h / 24 * 6 * Math.PI) + 4 * Math.sin(h * 2.7);
  const rOf = v => 12 + Math.max(0, Math.min(100, v)) * 0.36;
  let pts = [], hour = 0;
  const draw = () => {
    const a = hour * 15, r = rOf(val(hour));
    pts.push(polar(cx, cy, r, a));
    if (pts.length > 1) trace.setAttribute('d', 'M ' + pts.map(p => p[0].toFixed(1) + ' ' + p[1].toFixed(1)).join(' L '));
    pen.setAttribute('transform', `rotate(${a},${cx},${cy})`);
    const [px, py] = polar(cx, cy, r, a);
    penDot.setAttribute('cx', px); penDot.setAttribute('cy', py);
    onChange(hour, String(Math.floor(hour)).padStart(2, '0') + ':' + (hour % 1 >= 0.5 ? '30' : '00') + ' · ' + Math.round(val(hour)) + '%');
  };
  const reset = () => { pts = []; hour = 0; trace.setAttribute('d', ''); draw(); };
  s.style.cursor = 'pointer';
  s.addEventListener('click', reset);
  if (matchMedia('(prefers-reduced-motion: reduce)').matches) {
    for (hour = 0; hour < 24; hour += 0.25) draw();
    hour = 23.75;
  } else {
    reset();
    setInterval(() => { hour += 0.25; if (hour >= 24) { pts = []; hour = 0; } draw(); }, 375);
  }
  return { el: s, get: () => hour, reset };
};

/* R54 vertical tape instrument — the scale scrolls behind a fixed index; drag to drive */
DUPRE.verticalTape = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 70, 130);
  const CX = 38, CY = 65;
  const MIN = 5, MAX = 35, PPU = 5.5;            /* rpm x100, px per unit */
  const clipId = uid('vtClip');
  const defs = svgEl(s, 'defs', {});
  const clip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(clip, 'rect', { x: 14, y: 8, width: 48, height: 114, rx: 4 });
  svgEl(s, 'rect', { x: 2, y: 2, width: 66, height: 126, rx: 7, fill: '#1c1916', stroke: '#060505', 'stroke-width': 1.5 });
  svgEl(s, 'rect', { x: 14, y: 8, width: 48, height: 114, rx: 4, fill: '#0d0c0a', stroke: '#2c2820', 'stroke-width': 1 });
  const tapeG = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  const tape = svgEl(tapeG, 'g', {});
  for (let u = MIN; u <= MAX; u++) {
    const y = -u * PPU;                          /* higher value further up the tape */
    const maj = u % 5 === 0;
    svgEl(tape, 'line', { x1: maj ? 20 : 26, y1: y, x2: 34, y2: y, stroke: 'var(--cream)', 'stroke-width': maj ? 1.1 : .55, opacity: maj ? .95 : .6 });
    if (maj) svgEl(tape, 'text', {
      x: 48, y: y + 3, 'text-anchor': 'middle', 'font-size': 9, 'font-weight': 700,
      'font-family': 'var(--mono)', fill: 'var(--cream)'
    }).textContent = String(u);
  }
  /* fixed index: side pointer + line across the window at center height */
  svgEl(s, 'polygon', { points: `8,${CY} 15,${CY - 4} 15,${CY + 4}`, fill: 'var(--gold-hi)' });
  svgEl(s, 'line', { x1: 15, y1: CY, x2: 62, y2: CY, stroke: 'var(--gold-hi)', 'stroke-width': 1, opacity: .85 });
  svgEl(s, 'text', {
    x: CX, y: 126, 'text-anchor': 'middle', 'font-size': 5, 'letter-spacing': '.1em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  }).textContent = 'RPM x100';
  let v = opts.value ?? 24;
  function set(nv) {
    v = Math.max(MIN, Math.min(MAX, nv));
    tape.setAttribute('transform', `translate(0,${(CY + v * PPU).toFixed(1)})`);
    onChange(v, 'RPM ' + Math.round(v * 100));
  }
  s.style.cursor = 'ns-resize';
  dragDelta(s, () => v, set, { min: MIN, max: MAX, sens: (MAX - MIN) / 140 });
  set(v);
  return { el: s, get: () => v, set };
};

/* R55 twin-needle gauge — mirrored half-scales, one hub, two independent needles */
DUPRE.twinNeedle = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 120, 110);
  const cx = 60, cy = 62, R = 44;
  svgEl(s, 'circle', { cx, cy, r: 52, fill: '#14110e', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 46, fill: '#1a1714', stroke: '#2c2820', 'stroke-width': 1 });
  /* mirrored arcs: left = FUEL (0 at bottom-left up to 4 at top), right = OIL */
  const angL = v => -170 + v / 4 * 160;          /* 0..4 -> -170..-10 (left side, cw from top) */
  const angR = v => 170 - v / 4 * 160;           /* 0..4 -> 170..10 (right side) */
  for (let v = 0; v <= 4; v++) {
    for (const ang of [angL(v), angR(v)]) {
      const [x1, y1] = polar(cx, cy, R, ang), [x2, y2] = polar(cx, cy, R - 5, ang);
      svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--cream)', 'stroke-width': 1, opacity: .9 });
      const [tx, ty] = polar(cx, cy, R - 11, ang);
      svgEl(s, 'text', {
        x: tx, y: ty + 2.4, 'text-anchor': 'middle', 'font-size': 6, 'font-family': 'var(--mono)',
        fill: 'var(--cream)'
      }).textContent = String(v);
    }
  }
  for (let v = 0.5; v < 4; v += 0.5) {
    if (v % 1 === 0) continue;
    for (const ang of [angL(v), angR(v)]) {
      const [x1, y1] = polar(cx, cy, R, ang), [x2, y2] = polar(cx, cy, R - 3, ang);
      svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--cream)', 'stroke-width': .5, opacity: .55 });
    }
  }
  svgEl(s, 'text', {
    x: cx - 20, y: cy + 34, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.08em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  }).textContent = 'FUEL';
  svgEl(s, 'text', {
    x: cx + 20, y: cy + 34, 'text-anchor': 'middle', 'font-size': 5.4, 'letter-spacing': '.08em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  }).textContent = 'OIL';
  svgEl(s, 'text', {
    x: cx, y: cy - 26, 'text-anchor': 'middle', 'font-size': 4.6, 'letter-spacing': '.06em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  }).textContent = 'kg/cm2';
  const needle = color => {
    const g = svgEl(s, 'g', {});
    svgEl(g, 'polygon', {
      points: `${cx - 1.6},${cy + 8} ${cx + 1.6},${cy + 8} ${cx + 1},${cy - R + 8} ${cx},${cy - R + 4} ${cx - 1},${cy - R + 8}`,
      fill: color, stroke: 'rgba(0,0,0,.4)', 'stroke-width': .5
    }); return g;
  };
  const nF = needle('#e0523a'), nO = needle('#bfc4d0');
  svgEl(s, 'circle', { cx, cy, r: 5, fill: '#3a3631', stroke: '#060505', 'stroke-width': 1 });
  let vF = opts.fuel ?? 2.4, vO = opts.oil ?? 3.1;
  const draw = () => {
    nF.setAttribute('transform', `rotate(${angL(vF).toFixed(1)},${cx},${cy})`);
    nO.setAttribute('transform', `rotate(${angR(vO).toFixed(1)},${cx},${cy})`);
    onChange([vF, vO], 'FUEL ' + vF.toFixed(1) + ' · OIL ' + vO.toFixed(1));
  };
  function set(f, o) { vF = Math.max(0, Math.min(4, f)); vO = Math.max(0, Math.min(4, o)); draw(); }
  /* each half is its own drag surface */
  const half = (x, get, setV) => {
    const hit = svgEl(s, 'rect', { x, y: 10, width: 60, height: 104, fill: 'transparent' });
    hit.style.cursor = 'ns-resize';
    dragDelta(hit, get, v => { setV(Math.max(0, Math.min(4, v))); draw(); }, { min: 0, max: 4, sens: 4 / 110 });
  };
  half(0, () => vF, v => vF = v);
  half(60, () => vO, v => vO = v);
  draw();
  return { el: s, get: () => [vF, vO], set };
};

/* R56 comfort-zone crossed needles — temp and humidity cross over printed verdicts */
DUPRE.comfortMeter = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 130, 122);
  const cx = 65, cy = 60;
  const clipId = uid('cmClip');
  gradDef('cmBrass', 'linearGradient', { x1: 0, y1: 0, x2: 0, y2: 1 }, [['0', '#d8b25c'], ['.5', '#a07c30'], ['1', '#6e5218']]);
  const defs = svgEl(s, 'defs', {});
  svgEl(s, 'circle', { cx, cy, r: 56, fill: 'url(#cmBrass)', stroke: '#4a3610', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 53, fill: 'none', stroke: '#7a5c1e', 'stroke-width': 2.5, 'stroke-dasharray': '2 1.4' });
  svgEl(s, 'circle', { cx, cy, r: 49, fill: '#efe9da', stroke: '#8f897b', 'stroke-width': 1 });
  const PT = [38, 96], PH = [92, 96];            /* temp pivot (BL), humidity pivot (BR) */
  const angT = t => 105 - (t - 40) / 60 * 70;    /* 40..100F -> bearing 105..35 from PT */
  const angH = h => -105 + h / 100 * 70;         /* 0..100% -> bearing -105..-35 from PH */
  /* scale ticks along each sweep, near the rim */
  for (let t = 40; t <= 100; t += 10) {
    const a = angT(t);
    const [x1, y1] = polar(PT[0], PT[1], 86, a), [x2, y2] = polar(PT[0], PT[1], 82, a);
    if (Math.hypot(x1 - cx, y1 - cy) < 48) {
      svgEl(s, 'line', { x1, y1, x2, y2, stroke: '#3c382f', 'stroke-width': t % 20 === 0 ? 1 : .5 });
      if (t % 20 === 0) {
        const [tx, ty] = polar(PT[0], PT[1], 78, a);
        svgEl(s, 'text', {
          x: tx, y: ty + 2, 'text-anchor': 'middle', 'font-size': 4.6, 'font-family': 'var(--mono)',
          fill: '#3c382f'
        }).textContent = String(t);
      }
    }
  }
  for (let h = 0; h <= 100; h += 10) {
    const a = angH(h);
    const [x1, y1] = polar(PH[0], PH[1], 86, a), [x2, y2] = polar(PH[0], PH[1], 82, a);
    if (Math.hypot(x1 - cx, y1 - cy) < 48) {
      svgEl(s, 'line', { x1, y1, x2, y2, stroke: '#3c382f', 'stroke-width': h % 20 === 0 ? 1 : .5 });
      if (h % 20 === 0) {
        const [tx, ty] = polar(PH[0], PH[1], 78, a);
        svgEl(s, 'text', {
          x: tx, y: ty + 2, 'text-anchor': 'middle', 'font-size': 4.6, 'font-family': 'var(--mono)',
          fill: '#3c382f'
        }).textContent = String(h);
      }
    }
  }
  /* printed zone verdicts; the active one goes red */
  const zones = {};
  const zone = (key, txt, x, y, rot, size) => {
    zones[key] = svgEl(s, 'text', {
      x, y, 'text-anchor': 'middle',
      'font-size': size || 5.2, 'font-weight': 700, 'letter-spacing': '.06em', 'font-family': 'var(--mono)',
      fill: '#8f897b', transform: `rotate(${rot},${x},${y})`
    }); zones[key].textContent = txt;
  };
  zone('humid', 'TOO HUMID', 42, 34, -32);
  zone('warm', 'TOO WARM', 89, 34, 32);
  zone('right', 'JUST RIGHT', 65, 58, 0, 6.2);
  zone('dry', 'TOO DRY', 38, 74, 28);
  zone('cold', 'TOO COLD', 93, 74, -28);
  svgEl(s, 'text', {
    x: cx, y: 92, 'text-anchor': 'middle', 'font-size': 5.6, 'letter-spacing': '.18em',
    'font-family': 'var(--mono)', fill: '#3c382f'
  }).textContent = 'WEATHER STATION';
  /* needles: temp from bottom-left, humidity from bottom-right — clipped to the face */
  const nclip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(nclip, 'circle', { cx, cy, r: 49 });
  const ng = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  const needle = () => {
    const g = svgEl(ng, 'g', {});
    svgEl(g, 'line', { x1: 0, y1: 0, x2: 0, y2: -84, stroke: '#c23a28', 'stroke-width': 1.6, 'stroke-linecap': 'round' });
    svgEl(g, 'circle', { cx: 0, cy: 0, r: 2.6, fill: '#8f2416' }); return g;
  };
  const nT = needle(), nH = needle();
  nT.setAttribute('transform', `translate(${PT[0]},${PT[1]})`);
  nH.setAttribute('transform', `translate(${PH[0]},${PH[1]})`);
  let vT = opts.temp ?? 72, vH = opts.humidity ?? 45;
  const verdict = () => vT > 78 ? 'warm' : vT < 62 ? 'cold' : vH > 60 ? 'humid' : vH < 30 ? 'dry' : 'right';
  const draw = () => {
    nT.setAttribute('transform', `translate(${PT[0]},${PT[1]}) rotate(${angT(vT).toFixed(1)})`);
    nH.setAttribute('transform', `translate(${PH[0]},${PH[1]}) rotate(${angH(vH).toFixed(1)})`);
    const v = verdict();
    for (const k of Object.keys(zones)) zones[k].setAttribute('fill', k === v ? '#c23a28' : '#8f897b');
    onChange([vT, vH], Math.round(vT) + 'F · ' + Math.round(vH) + '% RH · ' + zones[v].textContent);
  };
  function set(t, h) { vT = Math.max(40, Math.min(100, t)); vH = Math.max(0, Math.min(100, h)); draw(); }
  const half = (x, get, setV, min, max) => {
    const hit = svgEl(s, 'rect', { x, y: 8, width: 65, height: 106, fill: 'transparent' });
    hit.style.cursor = 'ns-resize';
    dragDelta(hit, get, v => { setV(Math.max(min, Math.min(max, v))); draw(); }, { min, max, sens: (max - min) / 110 });
  };
  half(0, () => vT, v => vT = v, 40, 100);
  half(65, () => vH, v => vH = v, 0, 100);
  draw();
  return { el: s, get: () => [vT, vH], set };
};

/* ================= indicators & readouts ================= */

/* 18 status lamps — one lamp per health state; click any lamp to cycle it.

   Contract (everything a consumer needs; no page globals touched):
     opts: states (array of state indices, default [0,1,2,3,4] — one lamp
           per entry; 0 ok · 1 engaged · 2 fault · 3 off · 4 busy);
           onChange(states array copy, state name) fires per change and once
           at build with a count summary.
     handle: el, get() (states copy), set(i, st) — st wraps modulo 5.
   CSS lives in the "shared primitives" .dupre-lamp block of DUPRE_CSS
   (shared with the output well's step lamps); no other styles involved. */
DUPRE.statusLamps = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const CLS = ['dupre-lamp', 'dupre-lamp dupre-gold', 'dupre-lamp dupre-red', 'dupre-lamp dupre-off', 'dupre-lamp dupre-busy'];
  const NAMES = ['ok', 'engaged', 'fault', 'off', 'busy'];
  const states = (opts.states || [0, 1, 2, 3, 4]).slice();
  const wrap = document.createElement('span');
  wrap.style.cssText = 'display:inline-flex;gap:9px;align-items:center';
  const lamps = states.map((st, i) => {
    const l = document.createElement('span'); l.className = CLS[st]; l.style.cursor = 'pointer';
    l.addEventListener('click', () => set(i, states[i] + 1));
    wrap.appendChild(l); return l;
  });
  host.appendChild(wrap);
  function set(i, st) {
    states[i] = ((st % CLS.length) + CLS.length) % CLS.length;
    lamps[i].className = CLS[states[i]];
    onChange(states.slice(), NAMES[states[i]]);
  }
  onChange(states.slice(), states.length === 5 ? 'five states' : states.length + ' states');
  return { el: wrap, get: () => states.slice(), set };
};

/* 19 badges — labelled flags; click a badge to cycle its variant */
DUPRE.badges = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const CLS = ['badge', 'badge red', 'badge ghost'];
  const items = opts.items || [['TUNNEL', 0], ['LOW BATT', 1], ['2.4G', 2]];
  const vars = items.map(it => it[1]);
  const wrap = document.createElement('span');
  const els = items.map(([txt, v], i) => {
    const b = document.createElement('span'); b.className = CLS[v]; b.textContent = txt; b.style.cursor = 'pointer';
    b.addEventListener('click', () => set(i, vars[i] + 1));
    wrap.appendChild(b);
    if (i < items.length - 1) wrap.appendChild(document.createTextNode(' '));
    return b;
  });
  host.appendChild(wrap);
  function set(i, v) {
    vars[i] = ((v % CLS.length) + CLS.length) % CLS.length;
    els[i].className = CLS[vars[i]];
    onChange(vars.slice(), items[i][0]);
  }
  onChange(vars.slice(), items.length === 3 ? 'three variants' : items.length + ' variants');
  return { el: wrap, get: () => vars.slice(), set };
};

/* 20 tabular readout — mm:ss countdown; builder owns the state, the page
   drives tick() on its own clock (tick contract); click pauses/resumes */
DUPRE.tabularReadout = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const wrap = document.createElement('div'); wrap.style.textAlign = 'center';
  wrap.innerHTML = '<div class="readout"></div><span class="u"></span>';
  const out = wrap.querySelector('.readout');
  wrap.querySelector('.u').textContent = opts.unit || 'timer';
  host.appendChild(wrap);
  let secs, run = opts.run !== undefined ? !!opts.run : true;
  const draw = () => {
    out.textContent = String(Math.floor(secs / 60)).padStart(2, '0') + ':' + String(secs % 60).padStart(2, '0');
    onChange(secs, run ? 'running' : 'paused');
  };
  const set = v => { secs = ((v % 3600) + 3600) % 3600; draw(); };
  out.addEventListener('click', () => { run = !run; draw(); });
  set(opts.secs !== undefined ? opts.secs : 24 * 60 + 10);
  return { el: wrap, get: () => secs, set, tick: () => { if (run) set(secs - 1); } };
};

/* 21 engraved label — hairline-flanked caps label with a count; click bumps 1-9 */
DUPRE.engravedLabel = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const e = document.createElement('span'); e.className = 'engrave';
  e.append(opts.label || 'outputs');
  const c = document.createElement('span'); c.className = 'cnt'; e.appendChild(c);
  host.appendChild(e);
  let n;
  const set = v => { n = v; c.textContent = '· ' + n; onChange(n, 'count ' + n); };
  e.addEventListener('click', () => set(n % 9 + 1));
  set(opts.count !== undefined ? opts.count : 3);
  return { el: e, get: () => n, set };
};

/* 22 output well — streaming step log, lamp per step; click streams the next
   demo step; push([lampCls, name, evidence]) appends programmatically */
DUPRE.outputWell = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const seed = opts.seed || [['', 'Link', 'wlp170s0 · @Hyatt'], ['gold', 'DNS', 'resolving…']];
  const steps = opts.steps || [['gold', 'Probe', '8.8.8.8 …'], ['', 'Gateway', '10.0.0.1 ok'], ['', 'DNS', '1.1.1.1 ok'], ['red', 'Retry', 'timeout']];
  const keep = opts.keep || 5;
  const w = document.createElement('div'); w.className = 'owell'; host.appendChild(w);
  const add = s => {
    const d = document.createElement('div'); d.className = 'ostep';
    d.innerHTML = `<span class="dupre-lamp${s[0] ? ' dupre-' + s[0] : ''}"></span><span><b>${s[1]}</b><span class="ev">${s[2]}</span></span>`;
    w.appendChild(d); while (w.children.length > keep) w.removeChild(w.firstChild);
  };
  seed.forEach(add);
  const push = s => { add(s); onChange(s, '+ ' + s[1]); };
  let i = 0;
  w.addEventListener('click', () => { i = (i + 1) % steps.length; push(steps[i]); });
  onChange(null, 'click to stream');
  return { el: w, push };
};

/* 23 toast — one-line transient confirmation; click fires the next demo
   message; fire(msg) shows any message with the fade-in */
DUPRE.toast = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const msgs = opts.msgs || ['link up · 300 Mbps', 'bt paired — WH-1000XM4', 'profile switched', 'joined @Hyatt_WiFi — saved'];
  const t = document.createElement('span'); t.className = 'toastw';
  t.textContent = opts.text || msgs[msgs.length - 1];
  host.appendChild(t);
  const fire = msg => {
    t.textContent = msg; t.style.opacity = '0';
    requestAnimationFrame(() => { t.style.transition = 'opacity .3s'; t.style.opacity = '1'; });
  };
  let n = 0;
  t.addEventListener('click', () => { n++; fire(msgs[n % msgs.length]); onChange(n, 'fired ' + n); });
  onChange(0, 'click to fire');
  return { el: t, fire };
};

/* 26 nixie tubes — one lit numeral per tube, leading zeros dark; click increments.

   Contract (everything a consumer needs; no page globals touched):
     opts: digits (tube count, default 2); value (initial, default 8);
           onChange(value, zero-padded string) fires on every set.
     handle: el, get() (current value), set(v) — wraps modulo 10^digits;
             leading-zero tubes go dark rather than showing 0, like the
             hardware.
   CSS lives in the "nixie tube" block of DUPRE_CSS; no other styles involved. */
DUPRE.nixie = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const digits = opts.digits || 2;
  const max = Math.pow(10, digits);
  const nx = document.createElement('span'); nx.className = 'dupre-nixie';
  for (let i = 0; i < digits; i++) {
    const tu = document.createElement('span'); tu.className = 'dupre-tube'; tu.innerHTML = '<b></b>'; nx.appendChild(tu);
  }
  host.appendChild(nx);
  let v;
  const set = x => {
    v = ((x % max) + max) % max;
    const s = String(v).padStart(digits, '0');
    [...nx.children].forEach((tu, i) => {
      tu.classList.toggle('dupre-off', i < digits - 1 && v < Math.pow(10, digits - 1 - i));
      tu.querySelector('b').textContent = s[i];
    });
    onChange(v, s);
  };
  nx.addEventListener('click', () => set(v + 1));
  set(opts.value !== undefined ? opts.value : 8);
  return { el: nx, get: () => v, set };
};

/* N20 split-flap — an honest Solari mechanism. Each cell owns a stack of
   flaps in `chars` order (data, like R58's LAYOUT) and can only advance one
   flap at a time, so a changed reading cascades through intermediates and
   cells arrive staggered by travel distance. setText() mid-cascade re-aims
   the running cells; animate:false (the page's reduced-motion gate)
   collapses every move to an instant jump. One flip is two half-panel
   animations: the current top falls (rotateX 0 -> -180) while the next
   bottom lands (180 -> 0), backfaces hidden, crease preserved. First paint
   is silent (no cascade on load), like the original. The page drives next()
   on its own cadence.

   Contract (everything a consumer needs; no page globals touched):
     opts: rows (1) x cells (4) grid; chars (flap order, default space+A-Z+0-9);
           flapMs (100, per-cell rate jittered 0.8x-1.35x so letters finish
           at different times, base mutable via setFlapMs); animate (true);
           skin ('paper'|'white'|'dark'|'light', card default paper); font ('helv'|'mono', card default helv);
           words (the demo pool, at least rows+1 entries: next() sends every
           row to a different random word, mutually distinct; set(i) pins the
           top row for determinism); onChange(idx|-1, top word) fires at
           command time. get() is the last set() index, -1 after a scramble.
     handle: el, get(), set(i), next(), setText(multi-line string),
             reading() (displayed grid, rows joined with newline),
             setStyle(axis, name), chars, flapMs()/setFlapMs(ms) (base flap
             rate, clamped 20-400), onSettle(cb) — cb(reading) fires once per
             command when every cell has arrived (dwell hook).
   CSS lives in the "split-flap" block of DUPRE_CSS; no other styles involved. */
DUPRE.splitFlap = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const words = opts.words || ['DNS ', 'LINK', 'SYNC', 'WIFI', 'SCAN'];
  const animate = opts.animate !== undefined ? !!opts.animate : true;
  const rows = opts.rows || 1;
  const cells = opts.cells || 4;
  const chars = opts.chars || ' ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
  const clampMs = ms => Math.min(400, Math.max(20, ms | 0));
  let flapMs = clampMs(opts.flapMs || 100);

  const ci = ch => Math.max(0, chars.indexOf(ch));
  const fit = (str, w) => String(str).padEnd(w, ' ').slice(0, w);
  const wordAt = k => words[((k % words.length) + words.length) % words.length];

  // Four stacked half-panels per cell, painting order = stacking order:
  // top-next (revealed as the current top falls), bottom-current (covered as
  // the next bottom lands), top-current (the falling flap), bottom-next (the
  // landing flap, resting folded away at rotateX(180) with its back hidden).
  const st = []; // row-major cell states
  const settleCbs = []; if (opts.onSettle) settleCbs.push(opts.onSettle);
  let announced = true; // no announcement for the silent first paint
  let idx = 0;          // last set() index; -1 after a scramble
  let lastGrid = '';    // the last commanded grid — the demo picks against
                        // commands, not in-flight glyphs mid-cascade
  const allSettled = () => st.every(S => !S.running && S.cur === S.target);
  const fitGrid = str => Array.from({ length: rows },
    (_, r) => fit(String(str).split('\n')[r] || '', cells)).join('\n');
  const reading = () => Array.from({ length: rows },
    (_, r) => st.slice(r * cells, (r + 1) * cells).map(S => chars[S.cur]).join('')).join('\n');
  const makeCell = () => {
    const d = document.createElement('span'); d.className = 'flapd';
    d.innerHTML = '<b class="fh ftn"></b><b class="fh fbc"></b><b class="fh ftc"></b><b class="fh fbn"></b>';
    st.push({
      cur: 0, target: 0, running: false,
      // Each cell's mechanism has its own character: a fixed per-cell jitter
      // (0.8x-1.35x of the base rate) so letters finish at genuinely
      // different times, beyond what travel distance alone staggers.
      jitter: 0.8 + 0.55 * Math.random(),
      ftn: d.querySelector('.ftn'), fbc: d.querySelector('.fbc'),
      ftc: d.querySelector('.ftc'), fbn: d.querySelector('.fbn'),
    });
    return d;
  };
  const f = document.createElement('span'); f.className = 'flap' + (rows > 1 ? ' flap-rows' : '');
  for (let r = 0; r < rows; r++) {
    const line = rows > 1 ? document.createElement('span') : f;
    if (rows > 1) { line.className = 'flapline'; f.appendChild(line); }
    for (let c = 0; c < cells; c++) line.appendChild(makeCell());
  }
  host.appendChild(f);

  // One cell's cascade: flip one place through the charset until the (live)
  // target is reached. A retarget while running just moves the goalpost.
  const run = S => {
    if (S.running) return;
    S.running = true;
    (async () => {
      while (S.cur !== S.target) {
        const nk = (S.cur + 1) % chars.length;
        S.ftn.textContent = chars[nk]; S.fbn.textContent = chars[nk];
        if (animate) {
          try {
            const flip = { duration: Math.round(flapMs * S.jitter), easing: 'ease-in' };
            await Promise.all([
              S.ftc.animate([{ transform: 'rotateX(0deg)' }, { transform: 'rotateX(-180deg)' }], flip).finished,
              S.fbn.animate([{ transform: 'rotateX(180deg)' }, { transform: 'rotateX(0deg)' }], flip).finished,
            ]);
          } catch { break; /* cancelled (card torn down mid-flip) */ }
        }
        S.ftc.textContent = S.fbc.textContent = chars[nk];
        S.cur = nk;
      }
      S.running = false;
      maybeSettle();
    })();
  };
  // Announce once per command, when the whole board has arrived. Consumers
  // use it to dwell on the settled reading before commanding the next update.
  const maybeSettle = () => {
    if (announced || !allSettled()) return;
    announced = true;
    const r = reading();
    settleCbs.forEach(cb => cb(r));
  };

  // Map a multi-line string onto the grid; missing lines/cells pad with space.
  const gridTargets = str => {
    const lines = String(str).split('\n');
    return st.map((S, i) => ci(fit(lines[(i / cells) | 0] || '', cells)[i % cells]));
  };
  const setText = str => {
    announced = false;
    lastGrid = fitGrid(str);
    // Assign every target before running any cell: a cell that finishes
    // synchronously (animate:false) must not see its neighbours' stale,
    // already-satisfied targets and announce a partial board as settled.
    gridTargets(str).forEach((k, i) => { st[i].target = k; });
    st.forEach(run);
    maybeSettle(); // covers a command that changes nothing
  };
  const silent = str => {
    lastGrid = fitGrid(str);
    gridTargets(str).forEach((k, i) => {
      const S = st[i]; S.cur = S.target = k;
      S.ftn.textContent = S.fbc.textContent = S.ftc.textContent = S.fbn.textContent = chars[k];
    });
  };

  // The words demo: every advance sends each row to a completely different
  // word, drawn at random from the pool; rows stay mutually distinct. set(i)
  // pins the top row (deterministic callers, tests); next() scrambles all.
  const rowWords = () => lastGrid.split('\n');
  const pickNew = taken => {
    const open = words.filter(w => !taken.includes(fit(w, cells)));
    return fit(open[(Math.random() * open.length) | 0] || wordAt(0), cells);
  };
  const gridFor = top => {
    const out = [];
    const prev = rowWords();
    for (let r = 0; r < rows; r++)
      out.push(r === 0 && top !== null ? fit(top, cells) : pickNew(out.concat(prev[r])));
    return out.join('\n');
  };
  const set = i => { idx = ((i % words.length) + words.length) % words.length; setText(gridFor(wordAt(idx))); onChange(idx, wordAt(idx).trim()); };
  const scramble = () => { idx = -1; const g = gridFor(null); setText(g); onChange(-1, g.split('\n')[0].trim()); };
  f.addEventListener('click', scramble);

  // construction axes (skin, font): swap this axis's classes per STYLES.
  // Polarity and typeface are construction, not accent — no colour policy.
  const setStyle = (axis, name) => {
    const ax = DUPRE.splitFlap.STYLES[axis]; const o = ax && ax[name];
    if (!o) return;
    Object.values(ax).forEach(v => { if (v.cls) f.classList.remove(v.cls); });
    if (o.cls) f.classList.add(o.cls);
  };
  if (opts.skin) setStyle('skin', opts.skin);
  if (opts.font) setStyle('font', opts.font);

  // first paint: consecutive pool words, silent (no cascade on load)
  silent(Array.from({ length: rows }, (_, r) => fit(wordAt(r), cells)).join('\n'));
  return {
    el: f, get: () => idx, set, next: scramble, setStyle,
    setText, chars, reading, onSettle: cb => settleCbs.push(cb),
    flapMs: () => flapMs, setFlapMs: ms => { flapMs = clampMs(ms); },
  };
};
DUPRE.splitFlap.STYLES = {
  // board polarity + ink: dark board with the kit's cream ink (default),
  // dark board with true-white ink, or the inverse ivory board
  // dot: the board colour; the gallery card letters each chip in the skin's
  // ink so the swatch is a miniature flap cell, not an ambiguous colour dot
  skin: {
    paper: { cls: 'flap-paper', dot: '#ffffff' },
    white: { cls: 'flap-white', dot: '#141210' },
    dark:  { cls: '',           dot: '#141210' },
    light: { cls: 'flap-light', dot: '#f3e7c5' },
  },
  // typeface: the kit's Berkeley Mono, or the grotesque real boards wore
  font: {
    helv: { cls: 'flap-helv', dot: '#0d0c0b' },
    mono: { cls: '',          dot: '#0d0c0b' },
  },
};

/* N21 seven-segment countdown — mm:ss in lit segments; the page drives tick();
   click adds a minute.

   Contract (everything a consumer needs; no page globals touched):
     opts: secs (initial seconds, default 24:10); onChange(secs, 'mm:ss')
           fires on every set.
     handle: el, get() (current seconds), set(v) — wraps modulo 3600;
             tick() steps one second down (the tick contract — the page owns
             the clock); click adds 60.
   CSS lives in the "seven-segment" block of DUPRE_CSS; the digit glyphs come
   from the shared seg7() engine helper (.seg7, shared with the DSKY). */
DUPRE.sevenSeg = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const sv = document.createElement('span'); sv.className = 'dupre-seven'; host.appendChild(sv);
  let secs;
  const set = v => {
    secs = ((v % 3600) + 3600) % 3600;
    const mm = String(Math.floor(secs / 60)).padStart(2, '0'), ss = String(secs % 60).padStart(2, '0');
    sv.innerHTML = seg7(mm[0]) + seg7(mm[1]) + '<span class="dupre-colon"><i></i><i></i></span>' + seg7(ss[0]) + seg7(ss[1]);
    onChange(secs, mm + ':' + ss);
  };
  sv.addEventListener('click', () => set(secs + 60));
  set(opts.secs !== undefined ? opts.secs : 24 * 60 + 10);
  return { el: sv, get: () => secs, set, tick: () => set(secs - 1) };
};

/* N22 VFD marquee — teal dot-matrix scroll; the page drives tick(); click cycles the message.

   Contract (everything a consumer needs; no page globals touched):
     opts: msgs (message pool, default demo set); width (window px, 176);
           onChange(msg index, 'msg i/n') fires on click-cycle and once at
           build.
     handle: el, get() (current message index), tick() — advances the scroll
             1.1px and wraps when the text clears the window (the tick
             contract — the page owns the clock).
   CSS lives in the "VFD marquee" block of DUPRE_CSS; no other styles involved. */
DUPRE.vfdMarquee = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const msgs = opts.msgs || ['ARCHSETUP · NET OK · BT 2 · SND 62%', 'WIFI @Hyatt · 300 Mbps · VPN UP', 'BATTERY 84% · DISK 61% · TEMP 47C'];
  const W = opts.width || 176;
  const m = document.createElement('span'); m.className = 'dupre-vfdm';
  m.innerHTML = '<span class="dupre-txt"></span><span class="dupre-mesh"></span>';
  const t = m.querySelector('.dupre-txt'); t.textContent = msgs[0];
  host.appendChild(m);
  let mi = 0, x = W;
  m.addEventListener('click', () => {
    mi = (mi + 1) % msgs.length; t.textContent = msgs[mi]; x = W;
    onChange(mi, 'msg ' + (mi + 1) + '/' + msgs.length);
  });
  onChange(0, 'scrolling');
  return {
    el: m, get: () => mi,
    tick: () => { x -= 1.1; if (x < -t.offsetWidth) x = W; t.style.left = x + 'px'; }
  };
};

/* N23 annunciator — named alarm grid with the raise → MSTR CAUTION → ACK → RESET
   lifecycle; TEST proves the bulbs then restores the board */
DUPRE.annunciator = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const CLS = ['acell', 'acell warn', 'acell fault'];
  const NAMES = ['ok', 'warn', 'fault'];
  const cells = opts.cells || [['SYNC', 0], ['LOW BATT', 1], ['LINK', 0], ['NO DNS', 2], ['VPN', 0], ['DISK', 0]];
  const wrap = document.createElement('div'); wrap.className = 'annwrap';
  const grid = document.createElement('div'); grid.className = 'annun'; wrap.appendChild(grid);
  const bar = document.createElement('div'); bar.className = 'annbar';
  const mc = document.createElement('span'); mc.className = 'mc'; mc.textContent = 'MSTR CAUTION'; bar.appendChild(mc);
  ['ACK', 'TEST', 'RESET'].forEach(a => {
    const b = document.createElement('button'); b.className = 'key'; b.dataset.k = a; b.textContent = a; bar.appendChild(b);
  });
  wrap.appendChild(bar); host.appendChild(wrap);
  const els = cells.map(([label, st]) => {
    const c = document.createElement('span'); c.className = CLS[st]; c.textContent = label; grid.appendChild(c); return c;
  });
  let acked = false;
  const active = () => grid.querySelectorAll('.warn,.fault').length;
  const refresh = () => {
    const n = active();
    mc.classList.toggle('on', n > 0); mc.classList.toggle('fl', n > 0 && !acked);
    onChange(n, n === 0 ? 'clear' : n + ' active · ' + (acked ? 'ACK' : 'UNACK'));
  };
  els.forEach((c, i) => c.addEventListener('click', () => {
    let j = CLS.indexOf(c.className.trim()); if (j < 0) j = 0; j = (j + 1) % CLS.length; c.className = CLS[j];
    if (j > 0) acked = false;                 /* a new alarm re-arms the flasher */
    refresh(); onChange(j, cells[i][0] + ' → ' + NAMES[j]);
  }));
  bar.querySelectorAll('.key').forEach(k => k.addEventListener('click', () => {
    const a = k.dataset.k;
    if (a === 'ACK') { if (active() > 0) acked = true; refresh(); }
    else if (a === 'RESET') { els.forEach(c => c.className = 'acell'); acked = false; refresh(); }
    else if (a === 'TEST') {
      const prev = els.map(c => c.className);
      els.forEach(c => c.className = 'acell fault');
      mc.classList.add('on', 'fl'); onChange(null, 'lamp test');
      setTimeout(() => { els.forEach((c, i) => c.className = prev[i]); refresh(); }, 1100);
    }
  }));
  refresh();
  return {
    el: wrap, get: () => els.map(c => Math.max(0, CLS.indexOf(c.className.trim()))),
    set: (i, st) => { els[i].className = CLS[st]; if (st > 0) acked = false; refresh(); }
  };
};

/* N24 jewel pilot lamps — faceted bezel indicators; click cycles red · amber · green · dark.

   Contract (everything a consumer needs; no page globals touched):
     opts: states (array, one jewel per entry: 0 red · 1 amber · 2 green ·
           -1 dark; default [0,1,2,-1]); onChange(state, name) fires per
           change and once at build with a hint.
     handle: el, get() (states copy), set(i, st) — st clamps to the lens
             range, negatives dark the jewel. State lives in here; the DOM
             is a paint of it (was the reverse — the old builder kept state
             only in classList/--jc, so nothing could read or drive it).
   CSS lives in the "jewel" block of DUPRE_CSS; no other styles involved. */
DUPRE.jewels = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const cols = ['var(--jewel-r)', 'var(--jewel-a)', 'var(--jewel-g)'];
  const NAMES = ['red', 'amber', 'green'];
  const states = (opts.states || [0, 1, 2, -1]).slice();   /* index into cols; -1 = dark */
  const wrap = document.createElement('span');
  wrap.style.cssText = 'display:inline-flex;gap:10px;align-items:center';
  const paint = i => {
    const st = states[i], j = els[i];
    j.className = 'dupre-jewel' + (st < 0 ? ' dupre-dim' : '');
    if (st >= 0) j.style.setProperty('--jc', cols[st]); else j.style.removeProperty('--jc');
  };
  function set(i, st) {
    states[i] = st < 0 ? -1 : Math.min(st, cols.length - 1);
    paint(i);
    onChange(states[i], states[i] < 0 ? 'dark' : NAMES[states[i]]);
  }
  const els = states.map((_, i) => {
    const j = document.createElement('span');
    j.addEventListener('click', () => set(i, states[i] >= cols.length - 1 ? -1 : states[i] + 1));
    wrap.appendChild(j); return j;
  });
  host.appendChild(wrap);
  states.forEach((_, i) => paint(i));
  onChange(null, 'click to cycle');
  return { el: wrap, get: () => states.slice(), set };
};

/* N25 tape counter — odometer wheels; set(total) rolls each wheel to its digit */
DUPRE.tapeCounter = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const wheels = opts.wheels || 6, redFrom = opts.redFrom !== undefined ? opts.redFrom : 4;
  const ct = document.createElement('span'); ct.className = 'counter'; host.appendChild(ct);
  for (let idx = 0; idx < wheels; idx++) {
    const w = document.createElement('span'); w.className = 'cwheel' + (idx >= redFrom ? ' redw' : '');
    const col = document.createElement('span'); col.className = 'col';
    for (let n = -1; n <= 10; n++) { const sp = document.createElement('span'); sp.textContent = ((n + 10) % 10); col.appendChild(sp); }
    w.appendChild(col); ct.appendChild(w);
  }
  const max = Math.pow(10, wheels);
  let v;
  const set = x => {
    v = ((Math.round(x) % max) + max) % max;
    const s = String(v).padStart(wheels, '0');
    [...ct.children].forEach((w, i) => { w.querySelector('.col').style.top = (-(+s[i] + 1) * 34) + 'px'; });
    onChange(v, s);
  };
  set(opts.value !== undefined ? opts.value : 471300);
  return { el: ct, get: () => v, set };
};

/* N26 analog clock — engraved ticks + three hands; the page owns the time source
   and drives set(h, m, s); silent until the first set, like the live original.

   Contract (everything a consumer needs; no page globals touched):
     opts: onChange([h, m, s], 'hh:mm:ss') fires on every set.
     handle: el, set(h, m, s) — the minute hand carries a seconds fraction
             and the hour hand a minutes fraction, so the face reads like a
             real movement. Display-only: no state to get, no clock of its
             own (the tick contract — the page owns the time source).
   CSS lives in the "analog clock" block of DUPRE_CSS; no other styles involved. */
DUPRE.analogClock = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const cl = document.createElement('span'); cl.className = 'dupre-clock';
  for (let i = 0; i < 12; i++) { const t = document.createElement('span'); t.className = 'dupre-tk'; t.style.transform = `rotate(${i * 30}deg)`; cl.appendChild(t); }
  cl.insertAdjacentHTML('beforeend', '<span class="dupre-hh"></span><span class="dupre-mh"></span><span class="dupre-sh"></span><span class="dupre-pin"></span>');
  host.appendChild(cl);
  const hh = cl.querySelector('.dupre-hh'), mh = cl.querySelector('.dupre-mh'), sh = cl.querySelector('.dupre-sh');
  const set = (h, m, s) => {
    sh.style.transform = `rotate(${s * 6}deg)`;
    mh.style.transform = `rotate(${m * 6 + s * 0.1}deg)`;
    hh.style.transform = `rotate(${(h % 12) * 30 + m * 0.5}deg)`;
    onChange([h, m, s], String(h).padStart(2, '0') + ':' + String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0'));
  };
  return { el: cl, set };
};

/* N27 frequency-dial scale — printed log axis, marks crowd low and spread high;
   drag the pointer to tune */
DUPRE.freqScale = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const W = opts.width || 184;
  const marks = opts.marks || [0.5, 1, 2, 3, 5, 7, 10, 14, 20];
  const unit = opts.unit || 'MHz';
  const lo = Math.log10(marks[0]), hi = Math.log10(marks[marks.length - 1]);
  const px = m => 6 + ((Math.log10(m) - lo) / (hi - lo)) * (W - 12);
  const fs = document.createElement('span'); fs.className = 'freqscale';
  const band = document.createElement('span'); band.className = 'band'; band.textContent = unit; fs.appendChild(band);
  marks.forEach(m => {
    const tk = document.createElement('span'); tk.className = 'tick'; tk.style.left = px(m) + 'px'; tk.style.height = '11px'; fs.appendChild(tk);
    const mk = document.createElement('span'); mk.className = 'mk'; mk.style.left = px(m) + 'px'; mk.textContent = m; fs.appendChild(mk);
  });
  for (let m = marks[0]; m <= marks[marks.length - 1]; m += (m < 2 ? 0.25 : m < 10 ? 1 : 2)) {
    const tk = document.createElement('span'); tk.className = 'tick'; tk.style.left = px(m) + 'px'; tk.style.height = '6px'; tk.style.opacity = '.5'; fs.appendChild(tk);
  }
  const ptr = document.createElement('span'); ptr.className = 'fptr'; fs.appendChild(ptr);
  host.appendChild(fs);
  let pct;
  const set = p => {
    pct = Math.max(0, Math.min(100, p));
    ptr.style.left = (6 + pct / 100 * (W - 12)) + 'px';
    const f = Math.pow(10, lo + (pct / 100) * (hi - lo));
    onChange(f, (f < 10 ? f.toFixed(1) : Math.round(f)) + ' ' + unit);
  };
  dragX(fs, set);
  set(opts.value !== undefined ? opts.value : 45);
  return { el: fs, get: () => pct, set };
};

/* N28 patch bay — jack grid with SVG cables; click one jack then another to
   patch or unpatch the pair; redraws itself on window resize */
DUPRE.patchBay = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const rows = opts.rows || 2, cols = opts.cols || 4;
  const patch = document.createElement('div'); patch.className = 'patch';
  const jacks = [];
  for (let r = 0; r < rows; r++) {
    const rowEl = document.createElement('div'); rowEl.className = 'row';
    for (let c = 0; c < cols; c++) { const j = document.createElement('span'); j.className = 'jack'; j.dataset.id = (r * cols + c); rowEl.appendChild(j); jacks.push(j); }
    patch.appendChild(rowEl);
  }
  const svg = document.createElementNS(SVGNS, 'svg'); patch.appendChild(svg);
  host.appendChild(patch);
  let conns = (opts.conns || ['0-5', '2-7']).slice(); let pending = null;
  const key = (a, b) => Math.min(a, b) + '-' + Math.max(a, b);
  const draw = () => {
    while (svg.firstChild) svg.removeChild(svg.firstChild);
    const pr = patch.getBoundingClientRect();
    jacks.forEach(j => j.classList.remove('hot'));
    conns.forEach(pair => {
      const [a, b] = pair.split('-').map(Number);
      const ra = jacks[a].getBoundingClientRect(), rb = jacks[b].getBoundingClientRect();
      const x1 = ra.left - pr.left + ra.width / 2, y1 = ra.top - pr.top + ra.height / 2;
      const x2 = rb.left - pr.left + rb.width / 2, y2 = rb.top - pr.top + rb.height / 2;
      const p = document.createElementNS(SVGNS, 'path');
      const my = Math.max(y1, y2) + 16; p.setAttribute('d', `M${x1} ${y1} C${x1} ${my} ${x2} ${my} ${x2} ${y2}`); svg.appendChild(p);
      jacks[a].classList.add('hot'); jacks[b].classList.add('hot');
    });
    onChange(conns.slice(), conns.length ? conns.map(c => { const [a, b] = c.split('-'); return a + '↔' + b; }).join('  ') : 'no cables');
  };
  jacks.forEach(j => {
    j.addEventListener('click', () => {
      const id = +j.dataset.id;
      if (pending == null) { pending = id; j.classList.add('sel'); return; }
      if (pending === id) { pending = null; j.classList.remove('sel'); return; }
      const k = key(pending, id); const i = conns.indexOf(k); if (i >= 0) conns.splice(i, 1); else conns.push(k);
      jacks[pending].classList.remove('sel'); pending = null; draw();
    });
  });
  draw(); window.addEventListener('resize', draw);
  return { el: patch, get: () => conns.slice(), set: c => { conns = c.slice(); draw(); } };
};

/* R10 data matrix readout — a page of labeled amber fields; click cycles pages;
   a page marked live re-renders on the builder's own 1s clock (reduced-motion gated) */
DUPRE.dataMatrix = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const pages = opts.pages || [
    ['SYS', () => ['CPU 42   MEM 61', 'DSK 58   TMP 47C', 'ARCH 6.18 LTS']],
    ['NET', () => ['WIFI @HYATT  300M', 'VPN UP   DNS OK', 'BT 2 PAIRED']],
    ['TIME', () => {
      const d = new Date(), p = n => String(n).padStart(2, '0');
      return [`${d.getFullYear()}-${p(d.getMonth() + 1)}-${p(d.getDate())}`,
        `${p(d.getHours())}:${p(d.getMinutes())}:${p(d.getSeconds())}`,
        'UP 14D 06:12'];
    }, true]];
  const s = stageSvg(host, 'rsvg press', 190, 74);
  def('dmxGlow', d => {
    const fl = svgEl(d, 'filter', { id: 'dmxGlow', x: '-30%', y: '-30%', width: '160%', height: '160%' });
    svgEl(fl, 'feGaussianBlur', { in: 'SourceGraphic', stdDeviation: 1.1 });
  });
  /* the background gradient reads screen-family vars from this instrument's subtree,
     so it lives in the local defs, not the shared def sink */
  const bgId = uid('dmxBg');
  const defs = svgEl(s, 'defs', {});
  const bg = svgEl(defs, 'linearGradient', { id: bgId, x1: 0, y1: 0, x2: 0, y2: 1 });
  svgEl(bg, 'stop', { offset: '0', 'stop-color': 'var(--scr-bg1,#140d06)' });
  svgEl(bg, 'stop', { offset: '1', 'stop-color': 'var(--scr-bg2,#0a0705)' });
  svgEl(s, 'rect', { x: 1, y: 1, width: 188, height: 72, rx: 5, fill: `url(#${bgId})`, stroke: '#2c261d' });
  const lines = [];
  for (let r = 0; r < 3; r++) {
    const glow = svgEl(s, 'text', {
      x: 12, y: 24 + r * 18, 'font-size': 9, 'letter-spacing': '.15em',
      'font-family': 'var(--mono)', fill: 'var(--scr-hi,var(--gold-hi))', opacity: .6, filter: 'url(#dmxGlow)'
    });
    const crisp = svgEl(s, 'text', {
      x: 12, y: 24 + r * 18, 'font-size': 9, 'letter-spacing': '.15em',
      'font-family': 'var(--mono)', fill: 'var(--scr-hi,var(--gold-hi))'
    });
    lines.push([glow, crisp]);
  }
  let pi;
  const set = i => {
    pi = ((i % pages.length) + pages.length) % pages.length;
    const [name, rowsFn] = pages[pi];
    rowsFn().forEach((txt, r) => { lines[r][0].textContent = txt; lines[r][1].textContent = txt; });
    onChange(pi, 'page ' + name);
  };
  s.addEventListener('click', () => set(pi + 1));
  set(opts.page || 0);
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches)
    setInterval(() => { if (pages[pi][2]) set(pi); }, 1000);
  return { el: s, get: () => pi, set };
};

/* R11 warning flag window — the striped mechanical flag slides into the window
   when the condition trips; click trips and clears it */
DUPRE.warningFlag = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 120, 64);
  def('barber', d => {
    const pat = svgEl(d, 'pattern', { id: 'barber', width: 10, height: 10, patternUnits: 'userSpaceOnUse', patternTransform: 'rotate(45)' });
    svgEl(pat, 'rect', { x: 0, y: 0, width: 10, height: 10, fill: '#17130c' });
    svgEl(pat, 'rect', { x: 0, y: 0, width: 5, height: 10, fill: 'var(--gold)' });
  });
  const clipId = uid('flagWin');
  const defs = svgEl(s, 'defs', {});
  const clip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(clip, 'rect', { x: 14, y: 20, width: 56, height: 24 });
  svgEl(s, 'rect', { x: 11, y: 17, width: 62, height: 30, rx: 3, fill: '#0a0908', stroke: '#2c261d', 'stroke-width': 2 });
  const g = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  const stripes = svgEl(g, 'rect', { x: 14, y: 20, width: 56, height: 24, fill: 'url(#barber)' });
  stripes.style.transition = 'transform .18s'; stripes.style.transform = 'translateX(-58px)';
  svgEl(s, 'text', {
    x: 92, y: 35, 'text-anchor': 'middle', 'font-size': 7, 'letter-spacing': '.14em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  }).textContent = opts.label || 'VIB';
  let on;
  const set = v => { on = !!v; stripes.style.transform = on ? 'translateX(0)' : 'translateX(-58px)'; onChange(on, on ? 'FLAG' : 'clear'); };
  s.addEventListener('click', () => set(!on));
  set(opts.on || false);
  return { el: s, get: () => on, set };
};

/* R25 fourteen-segment display — the starburst alphanumeric that spells words;
   click cycles the word */
DUPRE.seg14 = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const words = opts.words || ['ZOOM', 'ECHO', 'TAPE', 'MOOD', 'HALL', 'COMP'];
  const MAP = {
    A: ['a', 'b', 'c', 'e', 'f', 'g1', 'g2'], C: ['a', 'd', 'e', 'f'],
    D: ['a', 'b', 'c', 'd', 'i', 'l'], E: ['a', 'd', 'e', 'f', 'g1', 'g2'], H: ['b', 'c', 'e', 'f', 'g1', 'g2'],
    L: ['d', 'e', 'f'], M: ['b', 'c', 'e', 'f', 'h', 'j'], O: ['a', 'b', 'c', 'd', 'e', 'f'],
    P: ['a', 'b', 'e', 'f', 'g1', 'g2'], T: ['a', 'i', 'l'], Z: ['a', 'd', 'j', 'k']
  };
  const s = stageSvg(host, 'rsvg press', 130, 54);
  svgEl(s, 'rect', { x: 1, y: 1, width: 128, height: 52, rx: 5, fill: '#0a0f08', stroke: '#1c2a16', 'stroke-width': 2 });
  /* segment shapes in a 22x36 local box */
  const TH = 2.6, W = 22, H = 36, mid = H / 2;
  const segs = {
    a: [[2, 0], [W - 2, 0], [W - 4, TH], [4, TH]],
    d: [[2, H], [W - 2, H], [W - 4, H - TH], [4, H - TH]],
    f: [[0, 2], [TH, 4], [TH, mid - 2], [0, mid - 1]],
    e: [[0, H - 2], [TH, H - 4], [TH, mid + 2], [0, mid + 1]],
    b: [[W, 2], [W - TH, 4], [W - TH, mid - 2], [W, mid - 1]],
    c: [[W, H - 2], [W - TH, H - 4], [W - TH, mid + 2], [W, mid + 1]],
    g1: [[2, mid], [4, mid - TH / 2], [W / 2 - 1, mid - TH / 2], [W / 2 - 1, mid + TH / 2], [4, mid + TH / 2]],
    g2: [[W - 2, mid], [W - 4, mid - TH / 2], [W / 2 + 1, mid - TH / 2], [W / 2 + 1, mid + TH / 2], [W - 4, mid + TH / 2]],
    i: [[W / 2 - TH / 2, 3], [W / 2 + TH / 2, 3], [W / 2 + TH / 2, mid - 2], [W / 2 - TH / 2, mid - 2]],
    l: [[W / 2 - TH / 2, H - 3], [W / 2 + TH / 2, H - 3], [W / 2 + TH / 2, mid + 2], [W / 2 - TH / 2, mid + 2]],
    h: [[3, 3], [5.5, 3], [W / 2 - 2, mid - 3], [W / 2 - 4.5, mid - 3]],
    j: [[W - 3, 3], [W - 5.5, 3], [W / 2 + 2, mid - 3], [W / 2 + 4.5, mid - 3]],
    k: [[3, H - 3], [5.5, H - 3], [W / 2 - 2, mid + 3], [W / 2 - 4.5, mid + 3]],
    m: [[W - 3, H - 3], [W - 5.5, H - 3], [W / 2 + 2, mid + 3], [W / 2 + 4.5, mid + 3]]
  };
  const cells = [];
  for (let d = 0; d < 4; d++) {
    const x0 = 13 + d * 28, y0 = 9, cell = {};
    for (const k in segs) {
      cell[k] = svgEl(s, 'polygon', { points: segs[k].map(p => `${x0 + p[0]},${y0 + p[1]}`).join(' '), fill: 'var(--sevoff)' });
    }
    cells.push(cell);
  }
  let wi;
  const set = i => {
    wi = ((i % words.length) + words.length) % words.length;
    const word = words[wi].padEnd(4, ' ');
    cells.forEach((cell, d) => {
      const lit = MAP[word[d]] || [];
      for (const k in cell) {
        const on = lit.includes(k);
        cell[k].setAttribute('fill', on ? 'var(--sevgrn)' : 'var(--sevoff)');
        cell[k].setAttribute('style', on ? 'filter:drop-shadow(0 0 2.5px rgba(87,211,87,.6))' : '');
      }
    });
    onChange(wi, words[wi]);
  };
  s.addEventListener('click', () => set(wi + 1));
  set(opts.index || 0);
  return { el: s, get: () => wi, set };
};

/* R26 response graph — log-frequency axes with a draggable amber peak; 2D drag
   places the peak in both axes at once */
DUPRE.responseGraph = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg', 190, 110);
  const RG = { x0: 30, x1: 182, y0: 8, y1: 86, fLo: Math.log10(32), fHi: Math.log10(16000), db: 12 };
  def('avGlow', d => {
    const fl = svgEl(d, 'filter', { id: 'avGlow', x: '-60%', y: '-60%', width: '220%', height: '220%' });
    svgEl(fl, 'feGaussianBlur', { in: 'SourceGraphic', stdDeviation: 1.4 });
  });
  svgEl(s, 'rect', { x: 1, y: 1, width: 188, height: 108, rx: 5, fill: '#0d1410', stroke: '#22301f', 'stroke-width': 2 });
  const FREQS = [32, 64, 128, 250, 500, 1000, 2000, 4000, 8000, 16000];
  const xOf = f => RG.x0 + (Math.log10(f) - RG.fLo) / (RG.fHi - RG.fLo) * (RG.x1 - RG.x0);
  const yOf = db => RG.y0 + (RG.db - db) / (2 * RG.db) * (RG.y1 - RG.y0);
  FREQS.forEach(f => {
    const x = xOf(f);
    svgEl(s, 'line', { x1: x, y1: RG.y0, x2: x, y2: RG.y1, stroke: '#22301f', 'stroke-width': .6 });
    svgEl(s, 'text', {
      x, y: RG.y1 + 9, 'text-anchor': 'middle', 'font-size': 4.8, 'font-family': 'var(--mono)',
      fill: 'var(--steel)'
    }).textContent = f < 1000 ? f : (f / 1000) + 'k';
  });
  for (const db of [12, 6, 0, -6, -12]) {
    const y = yOf(db);
    svgEl(s, 'line', { x1: RG.x0, y1: y, x2: RG.x1, y2: y, stroke: '#22301f', 'stroke-width': db === 0 ? 1 : .6 });
    svgEl(s, 'text', {
      x: RG.x0 - 4, y: y + 2, 'text-anchor': 'end', 'font-size': 4.8, 'font-family': 'var(--mono)',
      fill: 'var(--steel)'
    }).textContent = (db > 0 ? '+' : '') + db;
  }
  const glowLine = svgEl(s, 'polyline', { points: '', fill: 'none', stroke: 'var(--gold-hi)', 'stroke-width': 3, opacity: .35, filter: 'url(#avGlow)' });
  const curve = svgEl(s, 'polyline', { points: '', fill: 'none', stroke: 'var(--gold)', 'stroke-width': 1.6 });
  const handle = svgEl(s, 'circle', { r: 4, fill: 'var(--gold-hi)', stroke: '#7d5c16', 'stroke-width': 1 });
  handle.style.cursor = 'move';
  let fc, gain;
  const set = (f, g) => {
    fc = Math.max(32, Math.min(16000, f)); gain = Math.max(-12, Math.min(12, g));
    const sigma = 0.28; let pts = '';
    for (let i = 0; i <= 76; i++) {
      const lf = RG.fLo + i / 76 * (RG.fHi - RG.fLo);
      const db = gain * Math.exp(-Math.pow(lf - Math.log10(fc), 2) / (2 * sigma * sigma));
      pts += `${xOf(Math.pow(10, lf)).toFixed(1)},${yOf(db).toFixed(1)} `;
    }
    curve.setAttribute('points', pts.trim()); glowLine.setAttribute('points', pts.trim());
    handle.setAttribute('cx', xOf(fc)); handle.setAttribute('cy', yOf(gain));
    const fLbl = fc < 1000 ? Math.round(fc) + ' Hz' : (fc / 1000).toFixed(1) + ' kHz';
    onChange([fc, gain], `${fLbl} · ${gain >= 0 ? '+' : ''}${gain.toFixed(1)} dB`);
  };
  /* 2D drag: the plot places the peak in both axes at once */
  s.style.touchAction = 'none';
  s.addEventListener('pointerdown', e => {
    s.setPointerCapture(e.pointerId);
    const move = ev => {
      const r = s.getBoundingClientRect(), sx = 190 / r.width, sy = 110 / r.height;
      const px = (ev.clientX - r.left) * sx, py = (ev.clientY - r.top) * sy;
      const lf = RG.fLo + Math.max(0, Math.min(1, (px - RG.x0) / (RG.x1 - RG.x0))) * (RG.fHi - RG.fLo);
      const g = RG.db - Math.max(0, Math.min(1, (py - RG.y0) / (RG.y1 - RG.y0))) * 2 * RG.db;
      set(Math.pow(10, lf), g);
    };
    move(e);
    const up = () => { s.removeEventListener('pointermove', move); s.removeEventListener('pointerup', up); s.removeEventListener('pointercancel', up); };
    s.addEventListener('pointermove', move); s.addEventListener('pointerup', up); s.addEventListener('pointercancel', up);
    e.preventDefault();
  });
  set(opts.fc !== undefined ? opts.fc : 1200, opts.gain !== undefined ? opts.gain : 6.5);
  return { el: s, get: () => [fc, gain], set };
};

/* R30 telegraph indicator — the pointer names the active state on labeled
   sectors, engine-telegraph style; click steps the state */
DUPRE.telegraphIndicator = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const states = opts.states || ['OK', 'TEST', 'BUSY', 'STOP', 'ATTN', 'FAULT'];
  const s = stageSvg(host, 'rsvg press', 110, 110), cx = 55, cy = 55, N = states.length;
  svgEl(s, 'circle', { cx, cy, r: 50, fill: '#171412', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 43, fill: 'var(--cream)', stroke: '#b7b29a', 'stroke-width': 1 });
  states.forEach((st, i) => {
    const a = i * 360 / N - 90 + 180 / N;
    const [lx1, ly1] = polar(cx, cy, 9, i * 360 / N), [lx2, ly2] = polar(cx, cy, 43, i * 360 / N);
    svgEl(s, 'line', { x1: lx1, y1: ly1, x2: lx2, y2: ly2, stroke: '#2b2418', 'stroke-width': 1 });
    const g = svgEl(s, 'g', { transform: `rotate(${a + 90},${cx},${cy})` });
    svgEl(g, 'text', {
      x: cx, y: cy - 28, 'text-anchor': 'middle', 'font-size': 7, 'font-weight': 700,
      'font-family': 'var(--mono)', fill: '#2b2418'
    }).textContent = st;
  });
  const ptr = svgEl(s, 'g', {}); ptr.style.transition = 'transform .18s'; ptr.style.transformOrigin = `${cx}px ${cy}px`;
  svgEl(ptr, 'polygon', { points: `${cx - 2.5},${cy} ${cx},${cy - 38} ${cx + 2.5},${cy}`, fill: 'var(--fail)', stroke: '#7a2a1a', 'stroke-width': .5 });
  svgEl(ptr, 'rect', { x: cx + 1, y: cy - 16, width: 10, height: 7, rx: 1, fill: 'var(--gold)', stroke: '#7d5c16', 'stroke-width': .6 });
  svgEl(s, 'circle', { cx, cy, r: 8, fill: '#171412', stroke: '#000' });
  let si;
  const set = i => {
    si = ((i % N) + N) % N;
    ptr.style.transform = `rotate(${si * 360 / N + 180 / N}deg)`;
    onChange(si, states[si]);
  };
  s.addEventListener('click', () => set(si + 1));
  set(opts.index || 0);
  return { el: s, get: () => si, set };
};

/* R31 radar sweep — the beam circles the bearing ring on the builder's own
   clock (reduced-motion gated), contacts bloom as it passes; click marks the bearing */
DUPRE.radarSweep = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const contacts = opts.contacts || [[60, .55], [205, .7], [318, .4]];
  const s = stageSvg(host, 'rsvg press', 130, 130), cx = 65, cy = 65;
  const clipId = uid('radarClip');
  const defs = svgEl(s, 'defs', {});
  const clip = svgEl(defs, 'clipPath', { id: clipId });
  svgEl(clip, 'circle', { cx, cy, r: 46 });
  svgEl(s, 'circle', { cx, cy, r: 62, fill: '#1a1714', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 52, fill: 'var(--scr-bg1,#120b05)', stroke: 'var(--scr-brd,#3a2a12)', 'stroke-width': 1 });
  for (let d = 0; d < 360; d += 30) {
    const [x1, y1] = polar(cx, cy, 51, d), [x2, y2] = polar(cx, cy, 47, d);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--scr-ink,var(--gold))', 'stroke-width': 1, opacity: .8 });
    const g = svgEl(s, 'g', { transform: `rotate(${d},${cx},${cy})` });
    svgEl(g, 'text', {
      x: cx, y: cy - 47.5, 'text-anchor': 'middle', 'font-size': 4.6, 'font-family': 'var(--mono)',
      fill: 'var(--scr-ink,var(--gold))', opacity: .9
    }).textContent = String(d).padStart(3, '0');
  }
  for (let d = 0; d < 360; d += 10) {
    if (d % 30 === 0) continue;
    const [x1, y1] = polar(cx, cy, 51, d), [x2, y2] = polar(cx, cy, 49, d);
    svgEl(s, 'line', { x1, y1, x2, y2, stroke: 'var(--scr-ink,var(--gold))', 'stroke-width': .6, opacity: .5 });
  }
  const g = svgEl(s, 'g', { 'clip-path': `url(#${clipId})` });
  svgEl(g, 'circle', { cx, cy, r: 46, fill: 'var(--scr-bg2,#0d0803)' });
  for (const r of [15, 30, 45])
    svgEl(g, 'circle', { cx, cy, r, fill: 'none', stroke: 'var(--scr-ink,var(--gold))', 'stroke-opacity': .18, 'stroke-width': .7 });
  const sweep = svgEl(g, 'g', {});
  for (let t = 0; t < 5; t++) {
    const a0 = -14 + t * 2.8, a1 = a0 + 2.8;
    const [x1, y1] = polar(cx, cy, 46, a0), [x2, y2] = polar(cx, cy, 46, a1);
    svgEl(sweep, 'path', {
      d: `M ${cx} ${cy} L ${x1} ${y1} A 46 46 0 0 1 ${x2} ${y2} Z`,
      fill: 'var(--scr-ink,var(--gold))', 'fill-opacity': (0.04 + t * 0.045).toFixed(3)
    });
  }
  svgEl(sweep, 'line', {
    x1: cx, y1: cy, x2: cx, y2: cy - 46, stroke: 'var(--scr-hi,var(--gold-hi))', 'stroke-width': 1.4,
    transform: `rotate(0,${cx},${cy})`, opacity: .95
  });
  const blips = contacts.map(([bd, rf]) => {
    const [x, y] = polar(cx, cy, 46 * rf, bd);
    return svgEl(g, 'circle', { cx: x, cy: y, r: 2.2, fill: 'var(--scr-hi,var(--gold-hi))', opacity: 0 });
  });
  svgEl(s, 'circle', { cx, cy, r: 3, fill: 'var(--scr-ink,var(--gold))', opacity: .8 });
  const mark = svgEl(s, 'text', {
    x: cx, y: 124, 'text-anchor': 'middle', 'font-size': 6, 'letter-spacing': '.12em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  });
  mark.textContent = 'BEARING —';
  let a = opts.bearing !== undefined ? opts.bearing : 210;
  const tick = () => {
    a = (a + 2.6) % 360;
    sweep.setAttribute('transform', `rotate(${a},${cx},${cy})`);
    contacts.forEach(([bd], i) => {
      const d = (a - bd + 360) % 360;                 /* degrees since beam passed */
      blips[i].setAttribute('opacity', d < 200 ? Math.max(0, .95 - d / 200) : 0);
    });
    mark.textContent = mark.textContent.startsWith('MARK') ? mark.textContent :
      'BEARING ' + String(Math.round(a) % 360).padStart(3, '0');
  };
  s.addEventListener('click', () => {
    const b = String(Math.round(a) % 360).padStart(3, '0');
    mark.textContent = 'MARK ' + b;
    onChange(a, 'mark ' + b);
  });
  tick(); onChange(a, 'sweeping');
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) setInterval(tick, 50);
  return { el: s, get: () => a, tick };
};

/* R35 day-date disc calendar — coaxial printed discs rotate so today reads
   under the fixed hand; starts on today; click rolls midnight forward.

   Contract (everything a consumer needs; no page globals touched):
     opts: date (1-31) and day (0-6, SUN=0), both defaulting to today;
           onChange([date, day], 'DAY d') fires on every set, including the
           initial paint.
     handle: el, get() ([date, day]), set(d, w) — rotates both discs so the
             commanded pair reads under the fixed hand; click advances date
             and weekday together like a midnight rollover.
   SVG-built: styling is inline attributes plus the shared .rsvg stage block
   of DUPRE_CSS; gradients register in the shared defs plate. */
DUPRE.dayDateCal = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const DAYS = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  const s = stageSvg(host, 'rsvg press', 130, 130), cx = 65, cy = 65, HAND = 135;
  gradDef('ddFace', 'radialGradient', { cx: '46%', cy: '40%', r: '75%' }, [['0', '#efe9da'], ['1', '#cfc8b6']]);
  /* movement plate + white calendar disc */
  svgEl(s, 'circle', { cx, cy, r: 62, fill: '#17140f', stroke: '#060505', 'stroke-width': 2 });
  for (let k = 0; k < 5; k++) {
    const [x, y] = polar(cx, cy, 58, 20 + k * 72);
    svgEl(s, 'circle', { cx: x, cy: y, r: 1.8, fill: '#060505' });
  }
  svgEl(s, 'circle', { cx, cy, r: 54, fill: 'url(#ddFace)', stroke: '#8f897b', 'stroke-width': .8 });
  /* date ring: 31 radial numerals on its own group */
  const dateG = svgEl(s, 'g', {});
  for (let d = 1; d <= 31; d++) {
    const a = (d - 1) * (360 / 31);
    const g = svgEl(dateG, 'g', { transform: `rotate(${a},${cx},${cy})` });
    svgEl(g, 'text', {
      x: cx, y: cy - 46, 'text-anchor': 'middle', 'font-size': 7.5, 'font-weight': 700,
      'font-family': 'var(--mono)', fill: '#14110e'
    }).textContent = String(d);
  }
  /* inner weekday disc: 7 names twice around, separated by a hairline ring */
  svgEl(s, 'circle', { cx, cy, r: 38, fill: 'none', stroke: '#8f897b', 'stroke-width': .7 });
  const dayG = svgEl(s, 'g', {});
  for (let i = 0; i < 14; i++) {
    const a = i * (360 / 14);
    const g = svgEl(dayG, 'g', { transform: `rotate(${a},${cx},${cy})` });
    svgEl(g, 'text', {
      x: cx, y: cy - 28, 'text-anchor': 'middle', 'font-size': 6.8, 'font-weight': 700,
      'font-family': 'var(--mono)', fill: '#14110e'
    }).textContent = DAYS[i % 7];
  }
  /* fixed yellow hand from hub toward the read index, and the hub */
  const [hx, hy] = polar(cx, cy, 44, HAND);
  svgEl(s, 'line', { x1: cx, y1: cy, x2: hx, y2: hy, stroke: '#e8cf4a', 'stroke-width': 3, 'stroke-linecap': 'round' });
  svgEl(s, 'line', { x1: cx, y1: cy, x2: hx, y2: hy, stroke: 'rgba(0,0,0,.25)', 'stroke-width': .8 });
  svgEl(s, 'circle', { cx, cy, r: 6, fill: '#b8b2a4', stroke: '#5c574c', 'stroke-width': 1.2 });
  svgEl(s, 'circle', { cx, cy, r: 2.4, fill: '#7a7466' });
  s.style.cursor = 'pointer';
  let date, day;
  const set = (d, w) => {
    date = d; day = w;
    dateG.setAttribute('transform', `rotate(${(HAND - (d - 1) * (360 / 31)).toFixed(2)},${cx},${cy})`);
    dayG.setAttribute('transform', `rotate(${(HAND - w * (360 / 14)).toFixed(2)},${cx},${cy})`);
    onChange([d, w], DAYS[w] + ' ' + d);
  };
  s.addEventListener('click', () => set(date % 31 + 1, (day + 1) % 7));
  const now = new Date();
  set(opts.date !== undefined ? opts.date : now.getDate(),
    opts.day !== undefined ? opts.day : now.getDay());
  return { el: s, get: () => [date, day], set };
};

/* R36 LED dot matrix — 8x8 paintable bitmap behind a tinted window; click dots
   to paint; starts on the reference K */
DUPRE.dotMatrix = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const N = 8, STEP = 11, X0 = 10.5, Y0 = 10.5;
  const glyph = opts.glyph || ['10000100', '10001000', '10010000', '11100000', '10100000', '10010000', '10001000', '10000100'];
  const s = stageSvg(host, 'rsvg press', 108, 108);
  svgEl(s, 'rect', { x: 2, y: 2, width: 104, height: 104, rx: 8, fill: '#17140f', stroke: '#060505', 'stroke-width': 1.5 });
  svgEl(s, 'rect', { x: 6, y: 6, width: 96, height: 96, rx: 5, fill: '#0d0505', stroke: '#241010', 'stroke-width': 1 });
  let lit = 0;
  const paint = (d, on) => {
    d.on = on;
    d.el.setAttribute('fill', on ? '#ff4a30' : '#2a1210');
    d.el.setAttribute('filter', on ? 'drop-shadow(0 0 3.5px rgba(255,74,48,.85))' : 'none');
  };
  for (let r = 0; r < N; r++) for (let c = 0; c < N; c++) {
    const el = svgEl(s, 'circle', { cx: X0 + c * STEP + STEP / 2, cy: Y0 + r * STEP + STEP / 2, r: 4.1, fill: '#2a1210' });
    el.style.cursor = 'pointer';
    const d = { el, on: false };
    paint(d, glyph[r][c] === '1'); if (d.on) lit++;
    el.addEventListener('click', () => {
      paint(d, !d.on); lit += d.on ? 1 : -1;
      onChange(lit, lit + ' / 64 lit');
    });
  }
  onChange(lit, lit + ' / 64 lit');
  return { el: s, get: () => lit };
};

/* R45 flip-disc tile array — bistable mechanical pixels; scaleX flip with the
   color swap at the midpoint; click a disc to flip it */
DUPRE.flipDisc = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const COLS = 7, ROWS = 5, STEP = 14, X0 = 13, Y0 = 13;
  const glyph = opts.glyph || ['0000100', '0000010', '1111111', '0000010', '0000100'];   /* arrow right */
  const s = stageSvg(host, 'rsvg press', 120, 92);
  svgEl(s, 'rect', { x: 2, y: 2, width: 116, height: 88, rx: 7, fill: '#17140f', stroke: '#060505', 'stroke-width': 1.5 });
  let lit = 0;
  for (let r = 0; r < ROWS; r++) for (let c = 0; c < COLS; c++) {
    const el = svgEl(s, 'circle', { cx: X0 + c * STEP + STEP / 2 - 2, cy: Y0 + r * STEP + STEP / 2 - 2, r: 5.6, stroke: '#060505', 'stroke-width': .8 });
    el.style.transformBox = 'fill-box'; el.style.transformOrigin = 'center'; el.style.transition = 'transform .11s ease-in';
    el.style.cursor = 'pointer';
    const d = { el, on: glyph[r][c] === '1' };
    el.setAttribute('fill', d.on ? '#e3d44f' : '#141210'); if (d.on) lit++;
    el.addEventListener('click', () => {
      d.on = !d.on; lit += d.on ? 1 : -1;
      if (matchMedia('(prefers-reduced-motion: reduce)').matches) { el.setAttribute('fill', d.on ? '#e3d44f' : '#141210'); }
      else {
        el.style.transform = 'scaleX(0)';
        setTimeout(() => { el.setAttribute('fill', d.on ? '#e3d44f' : '#141210'); el.style.transform = 'scaleX(1)'; }, 115);
      }
      onChange(lit, lit + ' discs showing');
    });
  }
  onChange(lit, lit + ' discs showing');
  return { el: s, get: () => lit };
};

/* R46 dekatron counting ring — each click pulses the neon glow one cathode
   around; the wrap flashes the carry dot */
DUPRE.dekatron = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 120, 120), cx = 60, cy = 60;
  svgEl(s, 'circle', { cx, cy, r: 52, fill: '#171310', stroke: '#060505', 'stroke-width': 2 });
  svgEl(s, 'circle', { cx, cy, r: 46, fill: '#0d0a08', stroke: '#2a221c', 'stroke-width': 1 });
  svgEl(s, 'ellipse', { cx: cx - 14, cy: cy - 18, rx: 20, ry: 11, fill: 'rgba(255,255,255,.05)', transform: `rotate(-24,${cx - 14},${cy - 18})` });
  const dots = [];
  for (let i = 0; i < 10; i++) {
    const [x, y] = polar(cx, cy, 34, i * 36);
    svgEl(s, 'text', {
      x: polar(cx, cy, 43, i * 36)[0], y: polar(cx, cy, 43, i * 36)[1] + 2, 'text-anchor': 'middle', 'font-size': 5.2,
      'font-family': 'var(--mono)', fill: 'var(--steel)'
    }).textContent = String(i);
    dots.push(svgEl(s, 'circle', { cx: x, cy: y, r: 3.4, fill: '#3a2a20' }));
  }
  const carry = svgEl(s, 'circle', { cx, cy: cy - 6, r: 3, fill: '#2a1c14' });
  svgEl(s, 'text', {
    x: cx, y: cy + 8, 'text-anchor': 'middle', 'font-size': 4.6, 'letter-spacing': '.12em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  }).textContent = 'CARRY';
  let pos = opts.count || 0, carries = 0;
  const draw = () => {
    dots.forEach((d, i) => {
      const on = i === pos;
      d.setAttribute('fill', on ? '#ff9a4c' : '#3a2a20');
      d.setAttribute('filter', on ? 'drop-shadow(0 0 5px rgba(255,154,76,.9))' : 'none');
    });
    onChange(pos, 'COUNT ' + pos + (carries ? ' · CARRY x' + carries : ''));
  };
  s.style.cursor = 'pointer';
  s.addEventListener('click', () => {
    pos = (pos + 1) % 10;
    if (pos === 0) {
      carries++; carry.setAttribute('fill', '#ff9a4c');
      carry.setAttribute('filter', 'drop-shadow(0 0 4px rgba(255,154,76,.9))');
      setTimeout(() => { carry.setAttribute('fill', '#2a1c14'); carry.removeAttribute('filter'); }, 220);
    }
    draw();
  });
  draw();
  return { el: s, get: () => pos };
};

/* R47 landing gear indicator — three greens or nothing; the lever cycles
   down → transit (amber pulse) → up */
DUPRE.gearIndicator = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 140, 110);
  svgEl(s, 'rect', { x: 2, y: 2, width: 136, height: 106, rx: 9, fill: '#1c1916', stroke: '#060505', 'stroke-width': 1.5 });
  const POS = [['NOSE', 48, 28], ['L', 24, 74], ['R', 72, 74]];
  const lamps = {};
  POS.forEach(([n, x, y]) => {
    svgEl(s, 'circle', { cx: x, cy: y, r: 9, fill: '#0d0b09', stroke: '#2c2820', 'stroke-width': 1.5 });
    lamps[n] = svgEl(s, 'circle', { cx: x, cy: y, r: 6.2, fill: '#16240f' });
    svgEl(s, 'text', {
      x, y: y + 18, 'text-anchor': 'middle', 'font-size': 5.2, 'letter-spacing': '.08em',
      'font-family': 'var(--mono)', fill: 'var(--steel)'
    }).textContent = n;
  });
  /* gear lever: slot + wheel-shaped knob */
  svgEl(s, 'rect', { x: 106, y: 22, width: 8, height: 66, rx: 4, fill: '#0d0b09', stroke: '#2c2820', 'stroke-width': 1 });
  const lever = svgEl(s, 'g', {});
  svgEl(lever, 'rect', { x: 107.5, y: 36, width: 5, height: 26, fill: '#8f8a7e' });
  svgEl(lever, 'circle', { cx: 110, cy: 32, r: 8, fill: '#26221c', stroke: '#4a463e', 'stroke-width': 2.4 });
  svgEl(lever, 'circle', { cx: 110, cy: 32, r: 3, fill: '#4a463e' });
  svgEl(s, 'text', {
    x: 110, y: 100, 'text-anchor': 'middle', 'font-size': 5.2, 'letter-spacing': '.08em',
    'font-family': 'var(--mono)', fill: 'var(--steel)'
  }).textContent = 'GEAR';
  let state = opts.state || 'down', busy = false;
  const paint = () => {
    const c = state === 'down' ? 'var(--pass)' : state === 'transit' ? 'var(--amber-warn)' : '#16240f';
    for (const n of Object.keys(lamps)) {
      lamps[n].setAttribute('fill', c);
      lamps[n].setAttribute('filter', state === 'down' ? 'drop-shadow(0 0 4px rgba(116,147,47,.8))' :
        state === 'transit' ? 'drop-shadow(0 0 4px rgba(var(--glow-lo),.7))' : 'none');
      lamps[n].style.animation = state === 'transit' ? 'pulse var(--pulse-rate) ease-in-out infinite' : 'none';
    }
    lever.setAttribute('transform', state === 'up' ? 'translate(0,-8)' : state === 'transit' ? 'translate(0,-4)' : '');
    onChange(state, state === 'down' ? 'GEAR DOWN · 3 GREEN' : state === 'up' ? 'GEAR UP' : 'IN TRANSIT');
  };
  s.style.cursor = 'pointer';
  s.addEventListener('click', () => {
    if (busy) return;
    const target = state === 'down' ? 'up' : 'down';
    if (matchMedia('(prefers-reduced-motion: reduce)').matches) { state = target; paint(); return; }
    busy = true; state = 'transit'; paint();
    setTimeout(() => { state = target; busy = false; paint(); }, 1500);
  });
  paint();
  return { el: s, get: () => state };
};

/* R52 blinkenlights front panel — address/data lamps ripple with a live
   pseudo-PC (builder-owned clock, reduced-motion gated) that folds in the
   switch register; flip the SR bits and the pattern changes */
DUPRE.blinkenlights = function (host, opts = {}) {
  const onChange = opts.onChange || noop;
  const s = stageSvg(host, 'rsvg press', 170, 100);
  svgEl(s, 'rect', { x: 2, y: 2, width: 166, height: 96, rx: 8, fill: '#3a1420', stroke: '#060505', 'stroke-width': 1.5 });
  svgEl(s, 'rect', { x: 8, y: 8, width: 154, height: 62, rx: 5, fill: '#14090e' });
  const mkRow = (y, lbl) => {
    const row = [];
    svgEl(s, 'text', {
      x: 12, y: y + 2.6, 'font-size': 4.6, 'letter-spacing': '.08em', 'font-family': 'var(--mono)',
      fill: '#b08a96'
    }).textContent = lbl;
    for (let i = 0; i < 12; i++) row.push(svgEl(s, 'circle', { cx: 46 + i * 10, cy: y, r: 3, fill: '#2a1210' }));
    return row;
  };
  const addr = mkRow(24, 'ADDR'), data = mkRow(46, 'DATA');
  const paint = (row, val) => row.forEach((d, i) => {
    const on = (val >> (11 - i)) & 1;
    d.setAttribute('fill', on ? '#ffb43a' : '#2a1210');
    d.setAttribute('filter', on ? 'drop-shadow(0 0 3px rgba(255,180,58,.8))' : 'none');
  });
  /* switch register: 8 mini toggles */
  let sr = opts.sr !== undefined ? opts.sr : 0b10100101;
  const toggles = [];
  for (let i = 0; i < 8; i++) {
    const x = 46 + i * 14;
    svgEl(s, 'rect', { x: x - 3, y: 76, width: 6, height: 16, rx: 3, fill: '#0d0b09', stroke: '#4a2432', 'stroke-width': 1 });
    const t = svgEl(s, 'circle', { cx: x, cy: 80, r: 4, fill: '#8f8a7e', stroke: '#3c382f', 'stroke-width': 1 });
    t.style.cursor = 'pointer';
    const hit = svgEl(s, 'rect', { x: x - 7, y: 72, width: 14, height: 24, fill: 'transparent' });
    hit.style.cursor = 'pointer';
    hit.addEventListener('click', () => { sr ^= (1 << (7 - i)); draw(); });
    toggles.push(t);
  }
  svgEl(s, 'text', {
    x: 12, y: 83, 'font-size': 4.6, 'letter-spacing': '.08em', 'font-family': 'var(--mono)',
    fill: '#b08a96'
  }).textContent = 'SR';
  let pc = 0o1234;
  const draw = () => {
    toggles.forEach((t, i) => t.setAttribute('cy', ((sr >> (7 - i)) & 1) ? 76 : 84));
    onChange(sr, 'SR ' + sr.toString(8).padStart(3, '0') + ' (octal)');
  };
  const tick = () => { pc = ((pc * 5 + sr + 1) & 0xFFF); paint(addr, pc); paint(data, (pc ^ (pc << 3) ^ sr) & 0xFFF); };
  draw(); tick();
  if (!matchMedia('(prefers-reduced-motion: reduce)').matches) setInterval(tick, 250);
  return { el: s, get: () => sr, tick };
};

/* ---- instrument CSS: injected once, grows as builders move in ---- */
/* instrument-internal CSS (moved from the gallery <style> block; gallery keeps page furniture) */
const DUPRE_CSS = `
/* ---- shared primitives ---- */
.dupre-lamp{width:9px;height:9px;border-radius:50%;background:var(--pass);box-shadow:0 0 6px 1px rgba(116,147,47,.55)}
.dupre-lamp.dupre-gold{background:var(--gold);box-shadow:0 0 6px 1px rgba(var(--glow-lo),.6)}
.dupre-lamp.dupre-red{background:var(--fail);box-shadow:0 0 6px 1px rgba(203,107,77,.55)}
.dupre-lamp.dupre-off{background:var(--wash);box-shadow:none}
.dupre-lamp.dupre-busy{background:var(--gold);animation:pulse var(--pulse-rate) ease-in-out infinite}
/* standard pulse: 1s ease-in-out — the norm for every pulsing / flashing element */
@keyframes pulse{50%{opacity:.25}}

/* slide toggle — after the iPod-hold-switch pill: dome thumb, revealed state engraving.
   Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */
.switch{display:inline-flex;vertical-align:middle;align-items:center;justify-content:space-between;
  width:52px;height:23px;border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
  background:var(--sw-off-bg,linear-gradient(180deg,#15130f,#242019));
  border:1px solid var(--sw-off-brd,var(--slate));
  box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55)}
.switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700;
  font-family:var(--mono);color:var(--sw-off-ink,var(--cream))}
.switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%;
  background:var(--sw-thumb,radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a));
  box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.switch.on{background:var(--sw-on-bg,linear-gradient(180deg,var(--amber-grad-top),var(--gold)));
  border-color:var(--sw-on-brd,var(--gold-hi));
  padding:2px 2px 2px 7px;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.3)}
.switch.on::before{content:"ON";order:1;color:var(--sw-on-ink,var(--panel))}
.switch.on::after{order:2}
.switch.red{background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail);padding:2px 2px 2px 7px}
.switch.red::before{content:"OFF";order:1;color:var(--cream)}
.switch.red::after{order:2}

/* The ABC keypad takes keys, so it must show when it is the one listening: an
   unlit focus state means typing vanishes into a card you thought was live.
   :focus, not :focus-visible — Chrome won't match :focus-visible on a
   mouse-driven focus of a non-text element, and clicking the plate IS how it
   gets focus here, so the ring would have appeared only when tabbed to. */
.kp-pad,.ix-pad{outline:none}
.kp-pad:focus,.ix-pad:focus{outline:2px solid var(--gold-hi);outline-offset:3px;border-radius:9px}
.key{font:inherit;font-size:11.5px;letter-spacing:.06em;color:var(--silver);cursor:pointer;
  background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-bottom-color:#0c0b0a;
  border-radius:8px;padding:8px 12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 2px 3px rgba(0,0,0,.4)}
.key:hover{color:var(--gold);border-color:var(--gold)}
.key:active{transform:translateY(1px)}
.key.on{color:var(--panel);background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi);font-weight:700}
.key.green{color:var(--cream);background:linear-gradient(180deg,#9cbf5e,var(--pass));border-color:var(--pass);font-weight:700}
.key.red{color:var(--cream);background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail)}
.key.off{opacity:.4}

.chip{color:var(--dim);cursor:pointer;border-bottom:1px dotted var(--wash);font-size:12px}
.chip.on{color:var(--chip-on,var(--gold));border-color:var(--chip-on,var(--gold))}

.badge{font-size:.62rem;letter-spacing:.18em;color:var(--panel);background:var(--gold);border-radius:4px;padding:1px 6px}
.badge.red{background:var(--fail);color:var(--cream)}
.badge.ghost{background:transparent;border:1px solid var(--slate);color:var(--silver)}

/* fader */
.fader{width:150px;height:16px;position:relative;cursor:pointer;touch-action:none}
.fader .slot{position:absolute;top:6px;left:0;right:0;height:4px;border-radius:2px;background:#0d0f10;border:1px solid #231f18;overflow:hidden}
.fader .fill{position:absolute;top:0;left:0;bottom:0;background:linear-gradient(90deg,var(--amber-grad-bot),var(--gold))}
.fader .cap{position:absolute;top:1px;width:7px;height:14px;border-radius:2px;margin-left:-3.5px;
  background:linear-gradient(180deg,var(--amber-grad-top),var(--amber-grad-mid));border:1px solid var(--amber-edge);box-shadow:0 1px 2px rgba(0,0,0,.5)}
/* vertical fader */
.vfader{width:16px;height:64px;position:relative;cursor:pointer;touch-action:none}
.vfader .slot{position:absolute;left:6px;top:0;bottom:0;width:4px;border-radius:2px;background:#0d0f10;border:1px solid #231f18;overflow:hidden}
.vfader .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,var(--amber-grad-bot),var(--gold))}
.vfader .cap{position:absolute;left:1px;height:7px;width:14px;border-radius:2px;margin-top:-3.5px;
  background:linear-gradient(90deg,var(--amber-grad-mid),var(--amber-grad-top));border:1px solid var(--amber-edge)}

/* rotary knob */
.knob{width:52px;height:52px;border-radius:50%;position:relative;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 40% 35%,#2a2622,#141210);border:1px solid #3a352c;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.05),0 3px 6px rgba(0,0,0,.5)}
.knob .ind{position:absolute;left:50%;top:5px;width:2px;height:16px;background:var(--gold-hi);
  margin-left:-1px;transform-origin:50% 21px;border-radius:1px;box-shadow:0 0 5px rgba(var(--glow-hi),.6)}

/* needle gauge */
.dupre-gauge{width:96px;cursor:ns-resize;touch-action:none}
.dupre-gauge .dupre-dial{position:relative;height:48px;overflow:hidden}
.dupre-gauge .dupre-arc{position:absolute;inset:0 0 -48px 0;border:2px solid var(--wash);border-radius:50%}
.dupre-gauge .dupre-tk{position:absolute;left:50%;top:1px;width:1.5px;height:8px;margin-left:-.75px;background:var(--steel);transform-origin:50% 47px}
.dupre-gauge .dupre-ndl{position:absolute;left:50%;bottom:0;width:2px;height:40px;background:var(--gold-hi);
  transform-origin:50% 100%;transform:rotate(0deg);border-radius:2px;box-shadow:0 0 6px rgba(var(--glow-hi),.5);
  transition:transform .12s cubic-bezier(.3,1.3,.5,1)}
.dupre-gauge .dupre-hub{position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--gold)}
.dupre-gauge .dupre-gv{color:var(--cream);text-align:center;font-size:12px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}

/* segmented VU / LED bar */
.dupre-vu{width:170px;display:flex;flex-direction:column;gap:5px}
.dupre-vurow{display:flex;align-items:center;gap:7px}
.dupre-vurow .dupre-ch{color:var(--steel);font-size:.6rem;width:8px}
.dupre-vubar{flex:1;display:flex;gap:2px;height:9px}
.dupre-vubar i{flex:1;background:var(--wash);border-radius:1px;opacity:.3}
.dupre-vubar i.dupre-on{opacity:1;background:var(--pass)}.dupre-vubar i.dupre-hot{opacity:1;background:var(--gold)}
.dupre-vubar i.dupre-clip{opacity:1;background:var(--fail)}.dupre-vubar i.dupre-peak{outline:1px solid var(--gold-hi);outline-offset:-1px}

/* mini 4-bar signal */
.sig{display:flex;align-items:flex-end;gap:2px;height:18px}
.sig i{width:4px;background:var(--wash);border-radius:1px}
.sig i:nth-child(1){height:5px}.sig i:nth-child(2){height:9px}.sig i:nth-child(3){height:13px}.sig i:nth-child(4){height:17px}
.sig i.on{background:var(--pass)}.sig i.hot{background:var(--gold)}.sig i.clip{background:var(--fail)}

/* signal ladder (wifi bars) */
.dupre-ladder{display:inline-flex;gap:3px;align-items:flex-end;height:18px;cursor:pointer}
.dupre-ladder i{width:5px;background:var(--wash);border-radius:1px}
.dupre-ladder i:nth-child(1){height:6px}.dupre-ladder i:nth-child(2){height:10px}
.dupre-ladder i:nth-child(3){height:14px}.dupre-ladder i:nth-child(4){height:18px}

/* linear progress / fuel bar */
.bar{width:160px;height:12px;background:#0d0f10;border:1px solid #231f18;border-radius:6px;overflow:hidden;position:relative;cursor:pointer;touch-action:none}
.bar>span{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--amber-grad-bot),var(--gold));border-radius:6px}
.bar.warn>span{background:linear-gradient(90deg,#a35a3f,var(--fail))}

/* radial ring */
.ring{width:60px;height:60px;border-radius:50%;cursor:ns-resize;touch-action:none;
  background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--wash) 0);
  display:grid;place-items:center;position:relative}
.ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--well)}
.ring b{position:relative;color:var(--cream);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}

/* tabular readout */
.readout{color:var(--cream);font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;cursor:pointer}
.readout small{color:var(--dim);font-size:12px;font-weight:400}
.readout .u{color:var(--steel);font-size:.6rem;letter-spacing:.2em;display:block;text-align:center;margin-top:2px}

/* sparkline */
.spark{width:170px;height:44px}
.spark svg{display:block;width:100%;height:100%}

/* lamp row (list item) */
.lrow{width:190px;display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:7px;background:#141210;cursor:pointer;font-size:12.5px}
.lrow:hover{background:var(--wash)}
.lrow .who{color:var(--silver)}.lrow .who b{color:var(--cream)}
.lrow .what{margin-left:auto;color:var(--dim);font-size:11px}

/* arm-to-fire */
.arm{font:inherit;font-size:11.5px;color:var(--silver);cursor:pointer;background:#191715;border:1px solid #33302b;
  border-radius:8px;padding:7px 12px}
.arm.armed{background:rgba(203,107,77,.12);border-color:var(--fail);color:var(--fail)}

/* stepper / segmented selector */
.seg{display:flex;border:1px solid #33302b;border-radius:8px;overflow:hidden}
.seg button{font:inherit;font-size:11px;color:var(--silver);background:#191715;border:0;border-right:1px solid #33302b;padding:7px 11px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--seg-on-bg,linear-gradient(180deg,var(--amber-grad-top),var(--gold)));color:var(--seg-on-ink,var(--panel));font-weight:700}

/* engraved section label */
.engrave{width:180px;color:var(--steel);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;cursor:pointer;
  display:flex;align-items:center;gap:9px}
.engrave::before,.engrave::after{content:"";height:1px;background:var(--wash);flex:1}
.engrave::before{max-width:10px}
.engrave .cnt{color:var(--dim);letter-spacing:.1em;text-transform:none}

/* waveform strip */
.wave{width:170px;height:38px}
.wave svg{width:100%;height:100%;display:block}

/* toast */
.toastw{font-size:11px;color:var(--cream);background:var(--slate);border-radius:7px;padding:5px 10px;cursor:pointer}

/* output well (log step) */
.owell{width:200px;background:var(--well);border:1px solid var(--wash);border-radius:8px;padding:7px 9px;font-size:11px;cursor:pointer}
.ostep{display:flex;gap:7px;align-items:flex-start;padding:2px 0}
.ostep .dupre-lamp{margin-top:3px;width:7px;height:7px}
.ostep b{color:var(--cream);font-weight:700}.ostep .ev{color:var(--steel);display:block;font-size:10.5px}

/* rotary selector */
.rotsel{position:relative;width:118px;height:74px}
.rotsel>.knob{position:absolute;left:50%;top:20px;margin-left:-26px;cursor:pointer}
.rotsel .pos{position:absolute;font-size:9px;color:var(--dim);transform:translate(-50%,-50%);letter-spacing:.02em}
.rotsel .pos.on{color:var(--gold-hi);text-shadow:0 0 6px rgba(var(--glow-hi),.55)}

/* slide-rule tuner dial */
.tuner{width:180px;height:46px;position:relative;border-radius:6px;overflow:hidden;cursor:pointer;
  background:var(--tn-bg,linear-gradient(180deg,#191510,#0b0908));border:1px solid var(--tn-brd,#2a251c);
  box-shadow:inset 0 0 20px var(--tn-glow,rgba(var(--glow-lo),.12)),inset 0 1px 0 rgba(255,255,255,.03)}
.tuner .tick{position:absolute;top:6px;width:1px;height:11px;background:var(--tn-tick,var(--steel));transform:translateX(-50%)}
.tuner .tick.mn{height:6px;opacity:.5}
.tuner .mk{position:absolute;bottom:8px;transform:translateX(-50%);color:var(--tn-ink,var(--steel));font-size:10px}
.tuner .mk.on{color:var(--tn-on,var(--gold-hi));text-shadow:0 0 6px var(--tn-onglow,rgba(var(--glow-hi),.6))}
.tuner:focus{outline:1px solid rgba(var(--glow-lo),.5);outline-offset:2px}
.tuner:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.tuner .ndl{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;border-radius:1px;
  background:var(--tn-ndl,var(--fail));box-shadow:0 0 7px var(--tn-ndlglow,rgba(203,107,77,.85));transition:left .25s}

/* nixie tube */
.dupre-nixie{display:inline-flex;gap:5px;cursor:pointer}
.dupre-nixie .dupre-tube{width:30px;height:44px;border-radius:5px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 38%,#241a12,#0b0807);border:1px solid #2c261d;
  display:grid;place-items:center;box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.dupre-nixie .dupre-tube b{font-size:26px;font-weight:400;color:#ff9a3c;
  text-shadow:0 0 6px rgba(255,140,50,.85),0 0 15px rgba(255,120,40,.45)}
.dupre-nixie .dupre-tube.dupre-off b{color:#3a2a1c;text-shadow:none}
.dupre-nixie .dupre-tube::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 32%)}

/* ===== candidate-unique CSS ===== */
/* rocker */
.rocker{width:66px;height:40px;border-radius:7px;cursor:pointer;position:relative;
  background:linear-gradient(180deg,#25211c,#141210);border:1px solid #34302a;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 3px 6px rgba(0,0,0,.5);overflow:hidden}
.rocker .half{position:absolute;left:0;right:0;height:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;letter-spacing:.06em;color:var(--dim)}
.rocker .top{top:0;border-bottom:1px solid #0c0b0a;background:linear-gradient(180deg,#211d19,#181513)}
.rocker .bot{bottom:0;background:linear-gradient(180deg,#141210,#100e0c);box-shadow:inset 0 3px 5px rgba(0,0,0,.55)}
.rocker.on .top{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));color:var(--panel);font-weight:700;box-shadow:0 0 10px rgba(var(--glow-hi),.35)}
.rocker.on .bot{color:var(--steel)}
.rocker:not(.on) .top{color:var(--steel)}
.rocker:not(.on) .bot{background:linear-gradient(180deg,#2a1512,#1c0f0d);color:var(--fail);box-shadow:inset 0 3px 5px rgba(0,0,0,.55),0 0 8px rgba(203,107,77,.25)}

/* transport */
.reels{display:flex;gap:16px;align-items:center;justify-content:center;margin-bottom:2px}
.reel{width:26px;height:26px;border-radius:50%;border:2px solid #34302a;position:relative;
  background:radial-gradient(circle at 45% 40%,#211d18,#0d0b09)}
.reel::before{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid #4a443a;background:#161310}
.reel i{position:absolute;left:50%;top:50%;width:2px;height:11px;background:var(--steel);margin:-5.5px 0 0 -1px;transform-origin:50% 5.5px}
.reel i:nth-child(1){background:var(--gold-hi);box-shadow:0 0 4px rgba(var(--glow-hi),.55)}
.reel i:nth-child(2){transform:rotate(120deg)}.reel i:nth-child(3){transform:rotate(240deg)}
.transport{display:flex;gap:5px}
.tbtn{font:inherit;font-size:12px;color:var(--silver);cursor:pointer;width:30px;height:26px;display:grid;place-items:center;
  background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-bottom-color:#0c0b0a;border-radius:6px}
.tbtn:hover{color:var(--gold);border-color:var(--gold)}
.tbtn.on{color:var(--panel);background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi)}
.tbtn.rec.on{color:var(--cream);background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail)}

/* radio bank */
.radiobank{display:flex;gap:0;border:1px solid #0c0b0a;border-radius:7px;overflow:hidden;
  background:#0c0b0a;padding:3px;box-shadow:inset 0 2px 4px rgba(0,0,0,.5)}
.preset{font:inherit;font-size:11px;color:var(--dim);cursor:pointer;padding:8px 9px;border:0;border-radius:4px;
  background:linear-gradient(180deg,#211d19,#161310);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.preset+.preset{margin-left:3px}
.preset:hover{color:var(--silver)}
.preset.on{color:var(--panel);background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));font-weight:700;
  box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}

/* concentric dual knob */
.dualknob{width:64px;height:64px;position:relative}
.dualknob .outer{width:64px;height:64px;border-radius:50%;position:absolute;inset:0;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 40% 35%,#2a2622,#100e0c);border:1px solid #3a352c;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.05),0 3px 6px rgba(0,0,0,.5)}
.dualknob .outer .tick{position:absolute;left:50%;top:3px;width:2px;height:9px;background:var(--steel);margin-left:-1px;transform-origin:50% 29px}
.dualknob .inner{width:34px;height:34px;border-radius:50%;position:absolute;left:15px;top:15px;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 40% 35%,#37322a,#1a1713);border:1px solid #4a443a;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.dualknob .inner .ind{position:absolute;left:50%;top:3px;width:2px;height:11px;background:var(--gold-hi);margin-left:-1px;
  transform-origin:50% 14px;border-radius:1px;box-shadow:0 0 5px rgba(var(--glow-hi),.6)}

/* rotary encoder + LED ring */
.encoder{position:relative;width:66px;height:66px;display:grid;place-items:center;cursor:ns-resize;touch-action:none}
.encoder .led{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--wash);
  left:50%;top:50%;margin:-2.5px}
.encoder .led.on{background:var(--gold);box-shadow:0 0 5px 1px rgba(var(--glow-lo),.7)}
.encoder .knob{width:40px;height:40px;cursor:ns-resize}
.encoder .knob .ind{transform-origin:50% 15px;top:4px;height:12px}

/* keyed mode switch */
.keylock{position:relative;width:110px;height:70px}
.keylock .body{position:absolute;left:50%;top:30px;margin-left:-21px;width:42px;height:42px;border-radius:50%;
  background:radial-gradient(circle at 42% 36%,#2a2622,#0f0d0b);border:1px solid #3a352c;cursor:pointer;
  box-shadow:inset 0 2px 3px rgba(255,255,255,.05),0 3px 6px rgba(0,0,0,.5)}
.keylock .barrel{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:1px;background:#0a0908;
  box-shadow:0 0 2px rgba(0,0,0,.8)}
.keylock .bit{position:absolute;left:50%;top:50%;width:3px;height:15px;margin:-15px 0 0 -1.5px;background:var(--gold-hi);
  border-radius:1px;transform-origin:50% 100%;box-shadow:0 0 5px rgba(var(--glow-hi),.55);transition:transform .2s}
.keylock .kpos{position:absolute;font-size:9px;color:var(--dim);letter-spacing:.05em;transform:translate(-50%,-50%)}
.keylock .kpos.on{color:var(--gold-hi);text-shadow:0 0 6px rgba(var(--glow-hi),.55)}

/* crossfader */
.xfader{width:160px;height:22px;position:relative;cursor:pointer;touch-action:none}
.xfader .slot{position:absolute;top:9px;left:0;right:0;height:4px;border-radius:2px;background:#0d0f10;border:1px solid #231f18}
.xfader .detent{position:absolute;top:2px;left:50%;width:1px;height:18px;background:var(--steel);margin-left:-.5px;opacity:.7}
.xfader .end{position:absolute;top:11px;font-size:9px;color:var(--steel);transform:translateY(-50%)}
.xfader .cap{position:absolute;top:3px;width:9px;height:16px;border-radius:2px;margin-left:-4.5px;transition:left .05s;
  background:linear-gradient(180deg,var(--amber-grad-top),var(--amber-grad-mid));border:1px solid var(--amber-edge);box-shadow:0 1px 2px rgba(0,0,0,.5)}

/* thumbwheel */
.thumbw{display:flex;align-items:center;gap:10px}
.thumbwheel{width:34px;height:52px;border-radius:6px;cursor:ns-resize;touch-action:none;position:relative;overflow:hidden;
  border:1px solid #34302a;box-shadow:inset 0 0 8px rgba(0,0,0,.6);
  background:repeating-linear-gradient(0deg,#0e0c0a 0 2px,#221e19 2px 3px,#2f2a23 3px 5px,#221e19 5px 6px)}
.thumbwheel::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),transparent 30%,transparent 70%,rgba(0,0,0,.55))}
.thumbw .win{color:var(--cream);font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;
  background:var(--well);border:1px solid #231f18;border-radius:4px;padding:3px 8px}

/* DIP bank */
.dip{display:flex;gap:3px;padding:6px 7px;background:#0f1a2a;border:1px solid #24344a;border-radius:5px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5)}
.dipsw{width:12px;height:26px;background:#0a1220;border-radius:2px;position:relative;cursor:pointer;border:1px solid #1c2c42}
.dipsw i{position:absolute;left:1px;right:1px;height:11px;border-radius:1px;background:linear-gradient(180deg,#eae4d2,#b4ad98);
  bottom:1px;transition:bottom .12s,top .12s}
.dipsw.on i{bottom:auto;top:1px;background:linear-gradient(180deg,var(--amber-grad-top),var(--gold))}

/* jog / shuttle */
.jog{position:relative;width:74px;height:74px;cursor:ns-resize;touch-action:none}
.jog .shuttle{position:absolute;inset:0;border-radius:50%;border:6px solid #1a1713;
  background:conic-gradient(from -90deg,#3a352c 0 var(--sh,40deg),#141210 0 360deg);
  box-shadow:inset 0 0 8px rgba(0,0,0,.6)}
.jog .inner{position:absolute;inset:12px;border-radius:50%;transition:transform .05s linear;
  background:radial-gradient(circle at 42% 36%,#2c2822,#100e0c);border:1px solid #3a352c;box-shadow:0 2px 5px rgba(0,0,0,.6)}
.jog .dimple{position:absolute;left:50%;top:7px;width:8px;height:8px;margin-left:-4px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#151210,#000);box-shadow:inset 0 1px 2px rgba(0,0,0,.9)}

/* oscilloscope — screen-family vars with the original green as fallback */
.scope{width:176px;height:78px;border-radius:6px;position:relative;overflow:hidden;
  background:radial-gradient(circle at 50% 45%,var(--scr-bgc,#04140a),var(--scr-bge,#020a05));
  border:1px solid var(--scr-brd,#123018);
  box-shadow:inset 0 0 16px rgba(0,0,0,.7)}
.scope .grat{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--scr-grat,rgba(111,206,51,.18)) 1px,transparent 1px),linear-gradient(90deg,var(--scr-grat,rgba(111,206,51,.18)) 1px,transparent 1px);
  background-size:22px 19.5px}
.scope .grat::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--scr-gratc,rgba(111,206,51,.35))}
.scope svg{position:absolute;inset:0;width:100%;height:100%}
.scope polyline{fill:none;stroke:var(--scr-hi,var(--phos));stroke-width:1.6;filter:drop-shadow(0 0 3px var(--scr-glow,rgba(127,224,160,.8)))}

/* voice-loop keyset */
.vloop{display:grid;grid-template-columns:repeat(4,52px);gap:4px}
.vk{display:flex;flex-direction:column;align-items:stretch;gap:4px;font-size:7px;letter-spacing:.05em;
  text-align:center;padding:6px 4px 4px;cursor:pointer;
  color:var(--dim);background:linear-gradient(180deg,#23211e,#191715);border:1px solid #33302b;border-radius:4px;
  font-family:var(--mono)}
.vk .bar{height:3px;width:40px;align-self:center;border-radius:2px;background:#16240f}
.vk.mon{color:var(--silver)}
.vk.mon .bar{background:var(--pass);box-shadow:0 0 4px rgba(116,147,47,.6)}
.vk.mon.act .bar{background:#a8d84a;box-shadow:0 0 7px rgba(150,200,60,.9)}
.vk.tlk{color:var(--panel);background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));
  border-color:var(--gold-hi);font-weight:700}
.vk.tlk .bar{background:var(--pass);box-shadow:0 0 4px rgba(116,147,47,.6)}

/* spectrum / EQ */
.eq{display:flex;align-items:flex-end;gap:3px;height:60px}
.eq .band{width:9px;display:flex;flex-direction:column-reverse;gap:2px;height:100%}
.eq .band i{height:5px;border-radius:1px;background:var(--wash);opacity:.3}
.eq .band i.on{opacity:1;background:var(--pass)}
.eq .band i.hot{opacity:1;background:var(--gold)}
.eq .band i.clip{opacity:1;background:var(--fail)}

/* crossed-needle */
.crossm{width:120px}
.crossm .face{position:relative;height:56px;overflow:hidden;cursor:ns-resize;touch-action:none}
.crossm .arc{position:absolute;inset:2px 4px -56px;border:2px solid var(--wash);border-radius:50%}
.crossm .nA{position:absolute;left:14px;bottom:2px;width:2px;height:52px;background:var(--gold-hi);transform-origin:50% 100%;
  border-radius:2px;box-shadow:0 0 5px rgba(var(--glow-hi),.5);transition:transform .12s cubic-bezier(.3,1.2,.5,1)}
.crossm .nB{position:absolute;right:14px;bottom:2px;width:2px;height:52px;background:var(--fail);transform-origin:50% 100%;
  border-radius:2px;box-shadow:0 0 5px rgba(203,107,77,.5);transition:transform .12s cubic-bezier(.3,1.2,.5,1)}
.crossm .lbl{display:flex;justify-content:space-between;color:var(--steel);font-size:9px;margin-top:2px}

/* thermometer */
.thermo{display:flex;align-items:flex-end;gap:6px;height:74px;cursor:ns-resize;touch-action:none}
.thermo .tube{width:12px;height:64px;border-radius:6px 6px 0 0;position:relative;background:#0d0f10;border:1px solid #231f18;overflow:hidden}
.thermo .fill{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(0deg,#a35a3f,var(--fail))}
.thermo .bulb{width:20px;height:20px;border-radius:50%;background:var(--fail);position:absolute;left:-4px;bottom:-9px;
  box-shadow:0 0 6px rgba(203,107,77,.5)}
.thermo .scale{display:flex;flex-direction:column;justify-content:space-between;height:64px;font-size:9px;color:var(--steel)}
.thermo .wrapcol{position:relative;padding-bottom:9px}

/* bourdon */
.bourdon{width:82px;height:82px;border-radius:50%;position:relative;cursor:ns-resize;touch-action:none;
  background:radial-gradient(circle at 48% 42%,#1d1a16,#0c0b09);border:2px solid #2c261d;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.bourdon svg{position:absolute;inset:0}
.bourdon .ndl{position:absolute;left:50%;top:50%;width:2px;height:32px;margin:-32px 0 0 -1px;background:var(--gold-hi);
  transform-origin:50% 100%;border-radius:2px;box-shadow:0 0 5px rgba(var(--glow-hi),.55);transition:transform .12s cubic-bezier(.3,1.2,.5,1)}
.bourdon .hub{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--gold)}
.bourdon .cap{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:8px;letter-spacing:.16em;color:var(--steel)}

/* strip-chart */
.strip{width:176px;height:62px;border-radius:5px;position:relative;overflow:hidden;
  background:#0c0e0f;border:1px solid #231f18}
.strip .rule{position:absolute;inset:0;opacity:.4;
  background-image:linear-gradient(90deg,rgba(150,147,133,.14) 1px,transparent 1px);background-size:16px 100%}
.strip svg{position:absolute;inset:0;width:100%;height:100%}
.strip polyline{fill:none;stroke:var(--gold);stroke-width:1.4}
.strip .pen{position:absolute;right:2px;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--gold-hi);
  box-shadow:0 0 6px rgba(var(--glow-hi),.8);transition:top .08s linear}

/* correlation */
.corr{width:150px;cursor:pointer;touch-action:none}
.corr .face{position:relative;height:44px;overflow:hidden}
.corr .arc{position:absolute;inset:0 0 -44px;border:2px solid var(--wash);border-radius:50%}
.corr .zero{position:absolute;left:50%;top:2px;width:1px;height:10px;background:var(--gold);margin-left:-.5px}
.corr .ndl{position:absolute;left:50%;bottom:0;width:2px;height:38px;background:var(--gold-hi);transform-origin:50% 100%;
  border-radius:2px;box-shadow:0 0 5px rgba(var(--glow-hi),.5);transition:transform .1s ease-out}
.corr .lbl{display:flex;justify-content:space-between;color:var(--steel);font-size:9px;margin-top:2px}

/* battery */
.batt{display:flex;align-items:center;cursor:pointer;touch-action:none}
.batt .cells{display:flex;gap:2px;padding:3px;border:1px solid #34302a;border-radius:4px;background:#0d0f10}
.batt .cell{width:12px;height:26px;border-radius:1px;background:var(--wash);opacity:.35}
.batt .cell.on{opacity:1;background:linear-gradient(180deg,var(--pass),#5c7526)}
.batt .cell.warn.on{background:linear-gradient(180deg,var(--fail),#a04a34)}
.batt .nub{width:4px;height:12px;background:#34302a;border-radius:0 2px 2px 0}

/* split-flap — four clipped half-panels per cell; the fold happens on
   .ftc (falls) and .fbn (lands), driven by the builder's WAAPI flips */
.flap{display:inline-flex;gap:4px;cursor:pointer}
.flapd{width:30px;height:42px;border-radius:5px;position:relative;
  background:linear-gradient(180deg,#211d18,#141210);border:1px solid #34302a;box-shadow:0 2px 4px rgba(0,0,0,.5);
  perspective:220px;transform-style:preserve-3d}
.flapd .fh{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;color:var(--cream);
  text-shadow:0 1px 2px rgba(0,0,0,.7);backface-visibility:hidden;transform-origin:50% 50%}
.flapd .ftn,.flapd .ftc{clip-path:inset(0 0 50% 0)}
.flapd .fbc,.flapd .fbn{clip-path:inset(50% 0 0 0)}
.flapd .fbn{transform:rotateX(180deg)}
.flapd::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;z-index:5;
  background:rgba(0,0,0,.65);box-shadow:0 1px 0 rgba(255,255,255,.03)}
/* multi-row board: column of flap lines */
.flap-rows{flex-direction:column;gap:5px}
.flapline{display:inline-flex;gap:4px}
/* white skin — the dark board with true-white ink (the default ink is cream) */
.flap-white .flapd .fh{color:#fff}
/* helvetica — the grotesque face real Solari boards wore */
.flap-helv .flapd .fh{font-family:Helvetica,'Helvetica Neue',Arial,sans-serif;font-weight:600}
/* paper skin — true-white cards, dark lettering */
.flap-paper .flapd{background:linear-gradient(180deg,#ffffff,#e6e6e3);border-color:#b6b6b2}
.flap-paper .flapd .fh{color:#17181a;text-shadow:0 1px 0 rgba(255,255,255,.5)}
.flap-paper .flapd::after{background:rgba(0,0,0,.28);box-shadow:0 1px 0 rgba(255,255,255,.35)}
/* light skin — the inverse board: ivory flaps, near-black ink, softer crease */
.flap-light .flapd{background:linear-gradient(180deg,#f7eed3,#dccfa8);border-color:#a89c7e}
.flap-light .flapd .fh{color:#1b1813;text-shadow:0 1px 0 rgba(255,255,255,.45)}
.flap-light .flapd::after{background:rgba(0,0,0,.3);box-shadow:0 1px 0 rgba(255,255,255,.3)}

/* seven-segment */
.dupre-seven{display:inline-flex;gap:6px;padding:6px 9px;border-radius:6px;background:#0a0806;border:1px solid #231f18;cursor:pointer;
  box-shadow:inset 0 0 10px rgba(0,0,0,.6)}
.seg7{width:22px;height:40px;filter:drop-shadow(0 0 3px rgba(87,211,87,.55))}
.seg7.red{filter:drop-shadow(0 0 3px rgba(226,84,63,.55))}
.dupre-seven .dupre-colon{align-self:center;display:flex;flex-direction:column;gap:9px}
.dupre-seven .dupre-colon i{width:4px;height:4px;border-radius:50%;background:var(--sevgrn);box-shadow:0 0 4px rgba(87,211,87,.7)}

/* DSKY verb/noun panel */
.dsky{display:flex;gap:9px;align-items:stretch;background:#1c1916;border:1px solid #060505;border-radius:8px;padding:8px}
.dsky .lampcol{display:grid;grid-template-rows:repeat(6,1fr);gap:3px;width:52px}
.dsky .sl{font-size:6.5px;letter-spacing:.04em;display:flex;align-items:center;justify-content:center;text-align:center;
  background:#141210;color:#5c574c;border-radius:2px;border:1px solid #26221c}
.dsky .sl.on{background:linear-gradient(180deg,var(--amber-warn),var(--gold));color:var(--panel);font-weight:700;
  box-shadow:0 0 6px rgba(var(--glow-lo),.5)}
.dsky .right{display:flex;flex-direction:column;gap:6px}
.dsky .wins{display:flex;gap:8px}
.dsky .win{display:flex;flex-direction:column;align-items:center;gap:2px}
.dsky .win .wl{font-size:6px;letter-spacing:.14em;color:var(--steel)}
.dsky .win .wd{display:flex;gap:2px;background:#0a0806;border:1px solid #231f18;border-radius:4px;padding:3px 4px}
.dsky .win .wd .seg7{width:13px;height:24px}
.dsky .win.hot .wd{border-color:var(--gold);box-shadow:0 0 5px rgba(var(--glow-lo),.4)}
.dsky .pad{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.dsky .pad .key{padding:4px 0;font-size:8.5px;border-radius:5px;text-align:center;letter-spacing:.03em}

/* VFD marquee */
.dupre-vfdm{width:176px;height:34px;border-radius:5px;overflow:hidden;position:relative;cursor:pointer;
  background:linear-gradient(180deg,#04100e,#020807);border:1px solid #123028;box-shadow:inset 0 0 12px rgba(0,0,0,.6)}
.dupre-vfdm .dupre-txt{position:absolute;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:15px;letter-spacing:.22em;
  color:var(--vfd);text-shadow:0 0 6px rgba(99,230,200,.65)}
.dupre-vfdm .dupre-mesh{position:absolute;inset:0;pointer-events:none;opacity:.35;
  background-image:radial-gradient(rgba(0,0,0,.6) 40%,transparent 41%);background-size:3px 3px}

/* annunciator */
.annwrap{display:flex;flex-direction:column;gap:6px}
.annbar{display:flex;gap:5px;align-items:center}
.mc{font-size:7px;letter-spacing:.08em;padding:4px 8px;border-radius:3px;background:#141210;color:#5c574c;
  border:1px solid #26221c;text-align:center}
.mc.on{background:linear-gradient(180deg,#d98a6f,var(--fail));color:var(--cream);font-weight:700;
  box-shadow:0 0 8px rgba(203,107,77,.5)}
.mc.on.fl{animation:pulse var(--pulse-rate) ease-in-out infinite}
.annbar .key{padding:3px 7px;font-size:7.5px;border-radius:4px}
.annun{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}
.acell{font-size:8.5px;letter-spacing:.08em;text-align:center;color:var(--dim);padding:6px 4px;border-radius:3px;cursor:pointer;
  background:#141210;border:1px solid #262320;line-height:1.2}
.acell.warn{color:var(--panel);background:linear-gradient(180deg,var(--amber-warn),var(--gold));font-weight:700;box-shadow:0 0 8px rgba(var(--glow-lo),.4)}
.acell.fault{color:var(--cream);background:linear-gradient(180deg,#d98a6f,var(--fail));font-weight:700;box-shadow:0 0 8px rgba(203,107,77,.4);animation:pulse var(--pulse-rate) ease-in-out infinite}

/* jewel */
.dupre-jewel{width:24px;height:24px;border-radius:50%;position:relative;cursor:pointer;
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.75),var(--jc) 42%,#3a0d08 100%);
  box-shadow:0 0 10px 1px var(--jc),inset 0 -2px 3px rgba(0,0,0,.5)}
.dupre-jewel::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,255,255,.12) 0 22deg,transparent 22deg 45deg,rgba(0,0,0,.18) 45deg 67deg,transparent 67deg 90deg);
  background-repeat:repeat}
.dupre-jewel.dupre-dim{background:radial-gradient(circle at 36% 30%,rgba(120,120,120,.3),#241f1b 55%,#0e0c0a);box-shadow:inset 0 -2px 3px rgba(0,0,0,.5)}

/* tape counter */
.counter{display:inline-flex;gap:2px;padding:4px;background:#0c0b0a;border:1px solid #2c261d;border-radius:4px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.6)}
.cwheel{width:18px;height:34px;border-radius:2px;position:relative;overflow:hidden;
  background:linear-gradient(180deg,#efe9d6,#c7c0ac);box-shadow:inset 0 0 3px rgba(0,0,0,.3)}
.cwheel .col{position:absolute;left:0;right:0;text-align:center;color:#1a1613;font-size:18px;font-weight:700;line-height:34px;
  transition:top .35s cubic-bezier(.4,1.4,.5,1)}
.cwheel .col span{display:block;height:34px}
.cwheel::before,.cwheel::after{content:"";position:absolute;left:0;right:0;height:9px;z-index:2;pointer-events:none}
.cwheel::before{top:0;background:linear-gradient(180deg,rgba(0,0,0,.4),transparent)}
.cwheel::after{bottom:0;background:linear-gradient(0deg,rgba(0,0,0,.4),transparent)}
.counter .redw{background:linear-gradient(180deg,#e7b46a,#cf9440)}

/* analog clock */
.dupre-clock{width:78px;height:78px;border-radius:50%;position:relative;
  background:radial-gradient(circle at 46% 40%,#1c1915,#0c0b09);border:2px solid #2c261d;box-shadow:inset 0 2px 5px rgba(0,0,0,.6)}
.dupre-clock .dupre-tk{position:absolute;left:50%;top:4px;width:1.5px;height:6px;background:var(--steel);margin-left:-.75px;transform-origin:50% 35px}
.dupre-clock .dupre-hh{position:absolute;left:50%;top:50%;width:3px;height:20px;margin:-20px 0 0 -1.5px;background:var(--cream);
  transform-origin:50% 100%;border-radius:2px}
.dupre-clock .dupre-mh{position:absolute;left:50%;top:50%;width:2px;height:28px;margin:-28px 0 0 -1px;background:var(--silver);
  transform-origin:50% 100%;border-radius:2px}
.dupre-clock .dupre-sh{position:absolute;left:50%;top:50%;width:1px;height:30px;margin:-30px 0 0 -.5px;background:var(--gold-hi);
  transform-origin:50% 100%;box-shadow:0 0 4px rgba(var(--glow-hi),.5)}
.dupre-clock .dupre-pin{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--gold)}

/* frequency-dial scale */
.freqscale{width:184px;height:44px;position:relative;border-radius:5px;overflow:hidden;cursor:pointer;touch-action:none;
  background:linear-gradient(180deg,#191510,#0b0908);border:1px solid #2a251c;
  box-shadow:inset 0 0 16px rgba(var(--glow-lo),.1)}
.freqscale .tick{position:absolute;top:5px;width:1px;background:var(--steel);transform:translateX(-50%)}
.freqscale .mk{position:absolute;bottom:6px;transform:translateX(-50%);color:var(--steel);font-size:9px}
.freqscale .band{position:absolute;bottom:2px;left:6px;color:var(--gold);font-size:8px;letter-spacing:.18em}
.freqscale .fptr{position:absolute;top:3px;bottom:14px;width:2px;margin-left:-1px;border-radius:1px;
  background:var(--fail);box-shadow:0 0 7px rgba(203,107,77,.85)}

/* patch-bay */
.patch{padding:7px 9px;background:#141210;border:1px solid #2c261d;border-radius:5px;position:relative}
.patch .row{display:flex;gap:9px}
.patch .row+.row{margin-top:9px}
.patch .jack{width:13px;height:13px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 40% 35%,#3a352c,#0a0908 70%);
  border:1px solid #4a443a;box-shadow:inset 0 1px 2px rgba(0,0,0,.8)}
.patch .jack.hot{background:radial-gradient(circle at 40% 35%,var(--amber-edge),#1a1408 70%)}
.patch .jack.sel{border-color:var(--gold-hi);box-shadow:0 0 6px 1px rgba(var(--glow-hi),.7)}
.patch svg{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}
.patch svg path{fill:none;stroke:var(--gold);stroke-width:2.4;opacity:.85;stroke-linecap:round}

/* ===== reference-batch (R) instruments — SVG-first, after period hardware ===== */
.rsvg{display:block}
.rsvg.drag{cursor:ns-resize;touch-action:none}
.rsvg.press{cursor:pointer}

/* transport reels spin (was a page-side keyframe injector) */
@keyframes reelspin{to{transform:rotate(360deg)}}
.reel.spin{animation:reelspin 2.6s linear infinite}
`;
function ensureCss() {
  if (document.getElementById('dupre-css') || !DUPRE_CSS) return;
  const st = document.createElement('style'); st.id = 'dupre-css'; st.textContent = DUPRE_CSS;
  document.head.appendChild(st);
}
if (document.head) ensureCss();
else document.addEventListener('DOMContentLoaded', ensureCss);

/* Policy classification (see DUPRE.POLICIES). This is the colour pass's worklist made
   explicit: every card gets a record here as we review it — the kind it's bound
   by, why in its own terms, and the range it may vary and stay authentic. This
   round covers the cards already touched; the rest are unclassified on purpose,
   the review still to do card by card, not a memory dump to fill now. Assigned
   after the builders exist, in one place, so it reads as a catalogue. */
DUPRE.slideToggle.POLICY = { kind: 'accent',
  why: 'On means good in one panel and a fault in the next, so the lit colour is the consumer’s claim, not the instrument’s.',
  authentic: 'The on-colour from the accent family (red, amber, green, white, vfd), plus the pill and thumb finishes. The switch form stays.' };
DUPRE.segmented.POLICY = { kind: 'accent',
  why: 'The active segment signals a mode whose meaning depends on the panel it sits in.',
  authentic: 'The accent colour of the active segment. The segment count and labels are the deployment’s, not a colour choice.' };
DUPRE.chipToggle.POLICY = { kind: 'accent',
  why: 'A filter chip’s on-state reads as good, warning or fault entirely by where it is used.',
  authentic: 'The lit colour from the accent family. The chip keeps its inline weight and dotted underline.' };
DUPRE.dataMatrix.POLICY = { kind: 'screen',
  why: 'LED and LCD dot-matrix modules were sold in several emitter colours, so no one colour is definitive.',
  authentic: 'The screen family (amber, green, red, blue, vfd, white) — each a panel that was actually built. Not an arbitrary hue.' };
DUPRE.roundCrt.POLICY = { kind: 'screen',
  why: 'CRT phosphors were manufactured in more than one colour (P1 green, P3 amber, white), so the trace colour is a real choice.',
  authentic: 'The screen family, limited to phosphors that existed. The face tint follows the phosphor.' };
DUPRE.waveRegion.POLICY = { kind: 'screen',
  why: 'A backlit editor LCD was made in several tints; the ink colour is the panel’s, not fixed.',
  authentic: 'The screen family. The waveform and region handles recolour with the screen, staying legible on it.' };
DUPRE.radarSweep.POLICY = { kind: 'screen',
  why: 'PPI radar scopes ran amber and green phosphors both; neither is the one true colour.',
  authentic: 'The screen family, phosphors that shipped. The sweep and afterglow track the chosen screen.' };
DUPRE.abcKeypad.POLICY = { kind: 'screen',
  why: 'The entry window is a screen like any other; its phosphor was made in several colours. (Mixed card: the keys are fixed-function and not a colour choice.)',
  authentic: 'The window’s screen family. The keycap colours are functional and stay put.' };

Object.assign(DUPRE, { SVGNS, svgEl, polar, dragX, dragY, dragDelta, SEG, seg7, buildBars, VUDB, vuDb, SCREEN_FAMS });
window.DUPRE = DUPRE;
})();