Killy Killette’s landing and music resource hub. Free music tools- no pay gates!

Swamp Puppy

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
  <meta name="theme-color" content="#07100d">
  <title>Swamp Puppy — Killette DSP</title>
  <meta name="description" content="Killette DSP Swamp Puppy browser amp and cabinet processor.">
  <style>
:root{color-scheme:dark;--bg: #07100d;--panel: #0d1814;--panel2: #111f19;--line: #254636;--acid: #68ff88;--acid2: #b7ff85;--text: #e6f4eb;--muted: #8fa79a;--warn: #ffc967;--danger: #ff7f7f;--shadow: 0 18px 55px rgba(0,0,0,.35)}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:radial-gradient(circle at 20% -10%,#173427 0,var(--bg) 40%,#030706 100%);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input,select{font:inherit}button,select,input[type=text]{border:1px solid var(--line);background:#0b1511;color:var(--text);border-radius:10px}button{cursor:pointer;padding:.66rem .9rem;transition:transform .12s ease,border-color .12s ease,background .12s ease}button:hover{border-color:var(--acid)}button:active{transform:translateY(1px)}button.primary{background:linear-gradient(180deg,#1a4e31,#11331f);border-color:#3b9d5c}button.danger{border-color:#6f3434;color:#ffb3b3}button.active{border-color:var(--acid);box-shadow:inset 0 0 0 1px #68ff8833,0 0 20px #68ff881f}select,input[type=text]{padding:.62rem .7rem;min-width:0;width:100%}.shell{width:min(1260px,calc(100% - 24px));margin:12px auto 28px}header{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px 20px;background:linear-gradient(135deg,#111f19f5,#050c09f5);border:1px solid var(--line);border-radius:18px 18px 8px 8px;box-shadow:var(--shadow)}.brand small{color:var(--acid);font-weight:800;letter-spacing:.18em}h1{margin:.2rem 0 0;font-size:clamp(1.65rem,5vw,3rem);line-height:.95;letter-spacing:.02em}.badge{white-space:nowrap;color:var(--acid2);border:1px solid var(--line);padding:.45rem .7rem;border-radius:999px;font-size:.8rem}.statusbar{margin-top:8px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#08110de0}#statusText{flex:1;color:var(--muted);min-width:220px}.dot{width:10px;height:10px;border-radius:50%;background:#5f6e66;box-shadow:0 0 10px #ffffff1a}.dot.live{background:var(--acid);box-shadow:0 0 14px #68ff88b3}.transport{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin-top:8px}.device-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.panel{margin-top:10px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,#0d1814fa,#070e0bfa);box-shadow:var(--shadow);overflow:hidden}.panel h2{margin:0;padding:12px 14px;font-size:.92rem;letter-spacing:.13em;text-transform:uppercase;color:var(--acid2);border-bottom:1px solid var(--line);background:#ffffff05}.scope-wrap{display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:12px;padding:12px}#scope{width:100%;height:154px;display:block;border-radius:10px;background:#030806;border:1px solid #183126}.meters{display:grid;gap:9px;align-content:center}.meter-row{display:grid;grid-template-columns:38px 1fr 48px;gap:8px;align-items:center;font-size:.75rem;color:var(--muted)}.meter{height:14px;background:#06100b;border:1px solid #173226;border-radius:999px;overflow:hidden}.meter>i{display:block;height:100%;width:0%;background:linear-gradient(90deg,#34b75f,#99ff71 72%,#ffbd63 88%,#ff6b6b);transition:width .06s linear}.main-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:10px;margin-top:10px}.controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}.control{border:1px solid #1b3529;border-radius:12px;padding:10px;background:linear-gradient(180deg,#14251dbf,#08100cd1)}.control label{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:.76rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#cfe8d7}.value{color:var(--acid);font-variant-numeric:tabular-nums}input[type=range]{width:100%;accent-color:var(--acid);margin-top:9px}.shape-readout{margin-top:5px;font-size:.7rem;color:var(--muted);text-align:right;min-height:1em}.cab-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px}.ir-card{border:1px solid #1b3529;border-radius:12px;padding:10px;background:#0a1410}.ir-card.active{border-color:var(--acid);box-shadow:inset 0 0 0 1px #68ff8829}.ir-top{display:flex;justify-content:space-between;align-items:center;gap:8px}.ir-name{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#dcebe1;font-size:.8rem}.ir-actions{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-top:8px}.ir-file{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.utility{padding:12px;display:grid;gap:10px}.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.row>*{flex:1 1 120px}.row .tight{flex:0 0 auto}.tonebox{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}.small{color:var(--muted);font-size:.75rem;line-height:1.45}.ab-grid{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:8px}.footer{color:var(--muted);font-size:.72rem;text-align:center;padding:14px 4px 0}.hidden{display:none!important}@media(max-width:920px){.main-grid{grid-template-columns:1fr}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.scope-wrap{grid-template-columns:1fr}.meters{grid-template-columns:1fr 1fr}}@media(max-width:620px){.shell{width:min(100% - 12px,1260px);margin-top:6px}header{align-items:flex-start;border-radius:14px 14px 7px 7px;padding:15px}.badge{font-size:.68rem}.transport{grid-template-columns:1fr 1fr}.device-grid{grid-template-columns:1fr}.controls{grid-template-columns:1fr 1fr;gap:7px;padding:8px}.control{padding:8px}.cab-grid{grid-template-columns:1fr;padding:8px}.ab-grid{grid-template-columns:1fr 1fr}.ab-grid .morph-wrap{grid-column:1/-1}.tonebox{grid-template-columns:1fr 1fr}.tonebox input{grid-column:1/-1}}
</style>
  <style>
/* dials.css — KDSP rotary dials + tighter control layout for Swamp Puppy. Loaded after styles.css. */
.controls { grid-template-columns:repeat(auto-fill, minmax(84px, 1fr)); gap:8px; padding:10px; }
.control.has-dial { position:relative; display:flex; flex-direction:column; align-items:center; gap:3px; padding:8px 6px 7px; text-align:center; }
.control.has-dial label { justify-content:center; font-size:.64rem; letter-spacing:.07em; line-height:1.15; min-height:1.5em; text-align:center; }
.kdial { width:58px; height:58px; flex:0 0 auto; border-radius:50%; cursor:ns-resize; touch-action:none; user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; outline:none; }
.kdial svg { display:block; width:100%; height:100%; overflow:visible; }
.kdial-track { fill:none; stroke:#1d3a2c; stroke-width:8; stroke-linecap:round; }
.kdial-fill { fill:none; stroke:var(--acid); stroke-width:8; stroke-linecap:round; filter:drop-shadow(0 0 4px rgba(104,255,136,.4)); }
.kdial-cap { fill:#0b1511; stroke:#2d5a43; stroke-width:2; }
.kdial-ptr { stroke:var(--acid2); stroke-width:5; stroke-linecap:round; }
.kdial:focus-visible { box-shadow:0 0 0 2px var(--acid); }
.kdial.is-drag .kdial-cap { stroke:var(--acid); }
.kdial-value { font-size:.72rem; font-weight:800; }
.kdial-native { position:absolute !important; width:1px !important; height:1px !important; margin:0 !important; opacity:0 !important; pointer-events:none !important; }
.control.has-dial .shape-readout { margin-top:0; text-align:center; }
.ir-card { display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"top top" "dial acts"; gap:6px 8px; align-items:center; }
.ir-card > .ir-top { grid-area:top; }
.ir-card > .ir-top b { white-space:nowrap; }
.ir-card > .control { grid-area:dial; margin-top:0 !important; padding:4px 6px 5px; }
.ir-card > .ir-actions { grid-area:acts; grid-template-columns:1fr; gap:4px; margin-top:0; }
.ir-card > .ir-actions button { padding:.38rem .5rem; font-size:.8rem; }
@media (max-width:620px) {
  .cab-grid { grid-template-columns:1fr 1fr; }
  .ab-grid { grid-template-columns:1fr 1fr 1.1fr; }
  .ab-grid .morph-wrap { grid-column:auto; }
  .controls { grid-template-columns:repeat(auto-fill, minmax(76px, 1fr)); gap:6px; padding:8px; }
  .kdial { width:52px; height:52px; }
}
</style>
  <style>
/* rig.css — Swamp Puppy head + 6x12 cab face, safety UI. Loaded after styles.css and dials.css. */
.rig { width:100%; max-width:920px; margin:12px auto 0; display:flex; flex-direction:column; align-items:center; gap:0; }

/* ---------- HEAD (Killy's Swamp Puppy head render as the chassis) ---------- */
.rig { max-width:620px; }
.rig-head {
  position:relative; width:90%;
  border-style:solid; border-width:18px 30px 24px 30px;
  border-image-slice:22 40 32 40 fill; border-image-repeat:stretch; border-image-width:18px 30px 24px 30px;
  padding:0; filter:drop-shadow(0 14px 22px rgba(0,0,0,.7));
}
/* screen on the amp face (sits where the head's grille is) */
.head-screen {
  position:relative; margin:4px 2px 0; padding:8px 8px 6px; border-radius:8px;
  background:#020604; border:5px solid #0b0d0c;
  box-shadow: inset 0 0 0 1px #1d3a2c, inset 0 0 26px rgba(104,255,136,.14), 0 0 0 1px #3c403e, 0 3px 10px rgba(0,0,0,.8);
}
.head-screen #scope { width:100%; height:clamp(90px, 20vw, 140px); display:block; border:none; border-radius:4px; background:#030806; }
.head-screen .meters { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; margin-top:6px; }
.head-screen .meter-row { grid-template-columns:28px 1fr 50px; font-size:.64rem; color:#9fe8b2; }
.screen-glass { position:absolute; inset:0; pointer-events:none; border-radius:4px;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px),
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 40%); }
/* control panel strip (sits where the head's knob row is) */
.head-panel {
  margin:3px 0 2px; border-radius:6px; padding:6px 8px 8px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #1b1d1c, #0c0d0d 60%, #161817);
  border:1px solid #3a3d3b; box-shadow:inset 0 1px 0 rgba(255,255,255,.07), inset 0 -6px 14px rgba(0,0,0,.5);
}
.head-top { display:flex; align-items:center; gap:10px; }
.head-top-gap { flex:1 1 auto; }
.lamp { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:.54rem; font-weight:800; letter-spacing:.12em; color:#9aa39e; }
.lamp i { width:13px; height:13px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #3a4540, #0f1311); border:1px solid #000; box-shadow:inset 0 0 3px #000; }
.lamp.on i { background:radial-gradient(circle at 35% 35%, #eaffef, var(--acid) 45%, #1b7a36); box-shadow:0 0 10px var(--acid), 0 0 18px rgba(104,255,136,.5); }
.lamp.mic.on i { background:radial-gradient(circle at 35% 35%, #fff4dc, var(--warn) 45%, #8a5a10); box-shadow:0 0 10px var(--warn); }
.lamp.limit.on i { background:radial-gradient(circle at 35% 35%, #ffe3e3, #ff5a5a 45%, #7a1010); box-shadow:0 0 10px #ff5a5a; }
.kill-btn {
  flex:0 0 auto; min-width:74px; padding:.5rem .8rem; font-weight:900; letter-spacing:.14em; color:#fff;
  background:radial-gradient(circle at 40% 30%, #ff6b6b, #c01616 55%, #5c0707); border:2px solid #2a0303; border-radius:10px;
  box-shadow:0 4px 0 #3a0404, 0 0 16px rgba(255,60,60,.35); text-shadow:0 1px 0 #000;
}
.kill-btn:hover { border-color:#ff9a9a; }
.kill-btn:active { transform:translateY(3px); box-shadow:0 1px 0 #3a0404; }
.kill-btn.is-killed { background:radial-gradient(circle at 40% 30%, #ffd36b, #d18a0c 55%, #5c3a07); animation:killPulse 1s ease-in-out infinite; }
@keyframes killPulse { 50% { box-shadow:0 4px 0 #3a2404, 0 0 26px rgba(255,190,60,.8); } }
.dial-strip { margin-top:6px; border-top:1px solid #34403a; padding-top:4px; }
.dial-strip .controls { grid-template-columns:repeat(auto-fit, minmax(58px, 1fr)); gap:2px; padding:4px 0 0; }
.dial-strip .control.has-dial { background:none; border:none; padding:3px 1px; }
.dial-strip .control.has-dial label { font-size:.56rem; letter-spacing:.05em; color:#dfe7e2; }
.dial-strip .kdial { width:48px; height:48px; }
.dial-strip .kdial-cap { fill:#121413; stroke:#555b58; }

/* ---------- CAB (Killy's 6x12 cab render; speakers are the tap targets) ---------- */
.rig-cab { width:100%; margin-top:-2px; }
.cab-grille { position:relative; width:100%; }
.cab-img { display:block; width:100%; height:auto; user-select:none; -webkit-user-select:none; filter:drop-shadow(0 18px 26px rgba(0,0,0,.75)); }
.speakers { position:absolute; inset:0; z-index:2; }
.speaker { position:absolute; width:38%; aspect-ratio:1; transform:translate(-50%, -50%); padding:0; border:none; background:none;
  border-radius:50%; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.speaker:hover { border:none; }
.spk-ring { position:absolute; inset:3%; border-radius:50%; border:3px solid transparent; transition:border-color .15s, box-shadow .15s; }
.speaker:hover .spk-ring { border-color:rgba(104,255,136,.35); }
.speaker.active .spk-ring { border-color:var(--acid); box-shadow:0 0 16px var(--acid), inset 0 0 22px rgba(104,255,136,.35); }
.speaker.open .spk-ring { border-color:var(--acid2); border-style:dashed; }
.speaker:focus-visible { outline:2px solid var(--acid); outline-offset:2px; }
.spk-tag { position:absolute; z-index:3; left:50%; bottom:3%; transform:translateX(-50%); font-size:.6rem; font-weight:900; letter-spacing:.14em;
  color:#cfe8d7; background:rgba(3,6,5,.85); border:1px solid #2b5a3f; border-radius:999px; padding:1px 7px; pointer-events:none; white-space:nowrap; }
.speaker.active .spk-tag { color:#07100d; background:var(--acid); border-color:var(--acid); }
/* mesh patch over the render's centre badge, then the spiked SWAMP PUPPY emblem on top */
.cab-badge-cover { position:absolute; z-index:3; left:35%; top:39.4%; width:29.5%; height:7%; pointer-events:none; border-radius:4px;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06) 0 1px, transparent 1.6px) 0 0/5px 5px,
    #0b0c0c;
  box-shadow:0 0 8px 6px #0b0c0c; }
.cab-emblem { position:absolute; z-index:4; left:19.5%; top:37.3%; width:60%; pointer-events:none; }
.cab-emblem .spiked-emblem { display:block; width:100%; height:auto; }
.cab-hint { margin-top:8px; text-align:center; font-size:.68rem; color:var(--muted); letter-spacing:.04em; }

/* speaker pop-up */
.cab-pop { position:absolute; z-index:8; left:50%; top:50%; transform:translate(-50%, -50%); width:min(92%, 320px);
  background:linear-gradient(180deg, #111f19, #07100c); border:1px solid var(--acid); border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.85), 0 0 20px rgba(104,255,136,.2); }
.cab-pop[hidden] { display:none; }
.cab-pop-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; border-bottom:1px solid var(--line); font-size:.72rem; letter-spacing:.12em; color:var(--acid2); }
.cab-pop-close { padding:.15rem .55rem; font-size:1.1rem; line-height:1; }
.cab-pop-body { padding:10px; }
.cab-pop-body .ir-card { border:none; background:none; padding:0; box-shadow:none; }
.cab-pop-body .controls { grid-template-columns:1fr; padding:0; }

/* ---------- safety ---------- */
.safety-note { margin:10px 0 0; }
.kdsp-safety-modal { margin-top:10px; display:grid; place-items:center; }
.kdsp-safety-card { width:100%; max-width:560px; background:linear-gradient(180deg, #13231b, #07100c); border:1px solid var(--warn); border-radius:14px; padding:18px; box-shadow:0 0 0 3px rgba(255,201,103,.25), 0 20px 60px rgba(0,0,0,.8); }
.kdsp-safety-card h3 { margin:0 0 8px; color:var(--warn); letter-spacing:.14em; font-size:1rem; }
.kdsp-safety-card p { margin:0 0 8px; color:var(--text); line-height:1.45; }
.kdsp-safety-small { font-size:.78rem; color:var(--muted) !important; }
.kdsp-safety-actions { display:grid; gap:8px; margin-top:12px; }

@media (max-width:620px) {
  .rig-head { width:94%; border-width:14px 18px 18px 18px; border-image-width:14px 18px 18px 18px; }
  .head-screen .meters { grid-template-columns:1fr; }
  .head-top { gap:8px; }
  .dial-strip .controls { grid-template-columns:repeat(auto-fit, minmax(56px, 1fr)); }
  .dial-strip .kdial { width:44px; height:44px; }
  .spk-tag { font-size:.52rem; padding:1px 5px; }
}
</style>

(function () {
  'use strict';

const CEILING = 0.891;            // -1 dBFS hard ceiling
  const SAFE_START_SECONDS = 1.5;   // fade-in time on start / resume
  const UNMUTE_SECONDS = 0.5;       // fade-in time after UNMUTE
  const MONITOR_MS = 100;           // safety monitor tick
  const FB_LEVEL = 0.3;             // feedback guard: RMS level that counts as loud (~ -10 dBFS)
  const FB_DOMINANCE = 0.6;         // feedback guard: share of energy inside one 3-bin peak
  const FB_MIN_HZ = 250;            // feedback guard: ignore low notes (chugs, low E, drop tunings)
  const FB_LIMIT_DB = -3;           // feedback guard: limiter must be clamping at least 3 dB
  const FB_TICKS = 25;              // feedback guard: one pinned pure tone for 2.5 s -> auto-mute
  const FB_NO_DECAY = 0.84;         // feedback guard: input must not fade more than 1.5 dB (played notes decay, howls don't)

const listeners = new Set();
  const streams = new Set();

let ctx = null;
  let entry = null, fade = null, limiter = null, ceiling = null, kill = null, watch = null, inWatch = null;
  let freqData = null, timeData = null, inData = null, timer = 0, fbStartIn = 0;
  let killed = false, killReason = '', headphonesOk = false, fbCount = 0, fbBin = -1, limitHold = 0;

const state = () => ({
    running: !!ctx && ctx.state === 'running',
    killed,
    killReason,
    limiting: limitHold > 0,
    micLive: micLive()
  });

function emit() {
    const s = state();
    listeners.forEach((fn) => { try { fn(s); } catch (_) {} });
  }

function micLive() {
    for (const st of streams) {
      if (st.getAudioTracks().some((t) => t.readyState === 'live' && t.enabled)) return true;
    }
    return false;
  }

function setStatus(text, danger) {
    const el = document.getElementById('statusText');
    if (!el) return;
    el.textContent = text;
    el.style.color = danger ? 'var(--danger)' : '';
  }

function ceilingCurve() {
    const n = 4097, curve = new Float32Array(n);
    for (let i = 0; i < n; i++) {
      const x = (i / (n - 1)) * 2 - 1;
      curve[i] = Math.max(-CEILING, Math.min(CEILING, x));
    }
    return curve;
  }

function safeStartFade() {
    if (!ctx || !fade) return;
    const now = ctx.currentTime;
    fade.gain.cancelScheduledValues(now);
    fade.gain.setValueAtTime(0, now);
    fade.gain.linearRampToValueAtTime(1, now + SAFE_START_SECONDS);
  }

function attach(audioCtx) {
    if (ctx === audioCtx && entry) return entry;
    ctx = audioCtx;

entry = ctx.createGain();
    fade = ctx.createGain();
    fade.gain.value = 0;

limiter = ctx.createDynamicsCompressor();
    limiter.threshold.value = -6;
    limiter.knee.value = 0;
    limiter.ratio.value = 20;
    limiter.attack.value = 0.001;
    limiter.release.value = 0.12;

ceiling = ctx.createWaveShaper();
    ceiling.curve = ceilingCurve();
    ceiling.oversample = 'none';

kill = ctx.createGain();
    kill.gain.value = killed ? 0 : 1;

watch = ctx.createAnalyser();
    watch.fftSize = 2048;
    watch.smoothingTimeConstant = 0.5;
    freqData = new Float32Array(watch.frequencyBinCount);
    timeData = new Float32Array(watch.fftSize);

entry.connect(fade).connect(limiter).connect(ceiling).connect(kill).connect(ctx.destination);
    ceiling.connect(watch);

// Input-side watch (the app exposes its input bus): lets the guard tell a decaying played
    // note from a howl that holds or grows.
    if (window.__spInputBus && window.__spInputBus.context === ctx) {
      inWatch = ctx.createAnalyser();
      inWatch.fftSize = 2048;
      inData = new Float32Array(inWatch.fftSize);
      window.__spInputBus.connect(inWatch);
    }

ctx.addEventListener('statechange', () => {
      if (ctx.state === 'running') safeStartFade();
      emit();
    });
    if (ctx.state === 'running') safeStartFade();

clearInterval(timer);
    timer = setInterval(monitor, MONITOR_MS);
    emit();
    return entry;
  }

function monitor() {
    if (!ctx || ctx.state !== 'running') return;

const wasLimiting = limitHold > 0;
    const reduction = typeof limiter.reduction === 'number' ? limiter.reduction : 0;
    if (reduction < -1) limitHold = 2; else if (limitHold > 0) limitHold--;

if (!killed && micLive()) {
      watch.getFloatTimeDomainData(timeData);
      let sum = 0;
      for (let i = 0; i < timeData.length; i++) sum += timeData[i] * timeData[i];
      const rms = Math.sqrt(sum / timeData.length);

watch.getFloatFrequencyData(freqData);
      let total = 0, peakBin = 2, peakPow = 0;
      for (let i = 2; i < freqData.length; i++) {
        const p = Math.pow(10, freqData[i] / 10);
        total += p;
        if (p > peakPow) { peakPow = p; peakBin = i; }
      }
      let band = 0;
      for (let i = Math.max(2, peakBin - 1); i <= Math.min(freqData.length - 1, peakBin + 1); i++) {
        band += Math.pow(10, freqData[i] / 10);
      }
      const dominance = total > 0 ? band / total : 0;
      const peakHz = peakBin * ctx.sampleRate / watch.fftSize;
      const samePitch = fbBin < 0 || Math.abs(peakBin - fbBin) <= 1;

let inRms = 0;
      if (inWatch) {
        inWatch.getFloatTimeDomainData(inData);
        let si = 0;
        for (let i = 0; i < inData.length; i++) si += inData[i] * inData[i];
        inRms = Math.sqrt(si / inData.length);
      }
      const notDecaying = !inWatch || fbCount === 0 || inRms >= fbStartIn * FB_NO_DECAY;

// Runaway howl = one steady pure tone, above the low-note range, loud, limiter pinned,
      // and not dying away like a played note does.
      if (rms > FB_LEVEL && dominance > FB_DOMINANCE && peakHz > FB_MIN_HZ && reduction < FB_LIMIT_DB && samePitch && notDecaying) {
        if (fbCount === 0) fbStartIn = inRms;
        fbCount++;
        fbBin = peakBin;
      } else {
        fbCount = 0;
        fbBin = -1;
      }

if (fbCount >= FB_TICKS) {
        doKill('feedback');
        setStatus('FEEDBACK DETECTED. Output muted. Turn down, use headphones, then press UNMUTE.', true);
      }
    } else {
      fbCount = 0;
      fbBin = -1;
    }

if (wasLimiting !== (limitHold > 0)) emit();
  }

function doKill(reason) {
    killed = true;
    killReason = reason || 'manual';
    fbCount = 0;
    if (ctx && kill) {
      const now = ctx.currentTime;
      kill.gain.cancelScheduledValues(now);
      kill.gain.setValueAtTime(0, now);
    }
    emit();
  }

function unmute() {
    killed = false;
    killReason = '';
    fbCount = 0;
    if (ctx && kill) {
      const now = ctx.currentTime;
      kill.gain.cancelScheduledValues(now);
      kill.gain.setValueAtTime(0, now);
      kill.gain.linearRampToValueAtTime(1, now + UNMUTE_SECONDS);
    }
    emit();
  }

// ---------- Headphones check before the microphone opens ----------
  function headphonesCheck() {
    return new Promise((resolve) => {
      const wrap = document.createElement('div');
      wrap.className = 'kdsp-safety-modal';
      wrap.setAttribute('role', 'dialog');
      wrap.setAttribute('aria-live', 'assertive');
      wrap.setAttribute('aria-labelledby', 'kdspSafetyTitle');
      wrap.innerHTML =
        '<div class="kdsp-safety-card">' +
          '<h3 id="kdspSafetyTitle">HEADPHONES CHECK</h3>' +
          '<p>A live mic plus speakers can cause loud feedback. Use headphones or an audio interface before going live.</p>' +
          '<p class="kdsp-safety-small">The output limiter, KILL button and feedback guard are on.</p>' +
          '<div class="kdsp-safety-actions">' +
            '<button type="button" class="primary" data-ok>I’m on headphones / interface — go live</button>' +
            '<button type="button" data-cancel>Cancel</button>' +
          '</div>' +
        '</div>';
      const done = (ok) => { wrap.remove(); resolve(ok); };
      wrap.querySelector('[data-ok]').addEventListener('click', () => done(true));
      wrap.querySelector('[data-cancel]').addEventListener('click', () => done(false));
      wrap.addEventListener('keydown', (e) => { if (e.key === 'Escape') done(false); });
      // Shown in-flow right under the Audio buttons: the app can sit inside an auto-height
      // iframe, where a screen-fixed pop-up could land off-screen.
      const startBtn = document.getElementById('startBtn');
      const anchor = startBtn ? startBtn.closest('.panel') : null;
      if (anchor) anchor.after(wrap); else document.body.prepend(wrap);
      wrap.scrollIntoView({ block: 'center', behavior: 'smooth' });
      wrap.querySelector('[data-ok]').focus({ preventScroll: true });
    });
  }

window.KDSPSafety = {
    attach,
    kill: () => doKill('manual'),
    unmute,
    toggleKill: () => (killed ? unmute() : doKill('manual')),
    state,
    onChange(fn) { listeners.add(fn); fn(state()); return () => listeners.delete(fn); },
    CEILING
  };
})();
</script>
</head>

<body>
  <main class="shell" id="app">
    <header>
      <div class="brand"><small>KILLETTE DSP</small><h1>SWAMP PUPPY</h1></div>
      <div class="badge">KillyKillette.com Web Edition RC1</div>
    </header>

<section class="statusbar" aria-live="polite">
      <span class="dot" id="audioDot"></span>
      <span id="statusText">Ready. Tap START AUDIO to activate the engine.</span>
      <button class="tight" id="resetBtn" type="button">Reset</button>
      <button class="tight" id="undoBtn" type="button">Undo</button>
      <button class="tight" id="redoBtn" type="button">Redo</button>
    </section>

<section class="panel">
      <h2>Audio</h2>
      <div style="padding:12px">
        <div class="transport">
          <button class="primary" id="startBtn" type="button">Start Audio</button>
          <button id="stopBtn" type="button">Stop</button>
          <button id="demoBtn" type="button">Demo Source</button>
          <button id="bypassBtn" type="button">Bypass</button>
        </div>
        <div class="device-grid">
          <label class="small">INPUT DEVICE<select id="inputDevice"><option value="">Default input</option></select></label>
          <label class="small">OUTPUT DEVICE<select id="outputDevice" disabled><option value="">Default output</option></select></label>
        </div>
      </div>
    </section>

<section class="panel">
      <h2>Scope / Level</h2>
      <div class="scope-wrap">
        <canvas id="scope" width="960" height="220" aria-label="Output waveform"></canvas>
        <div class="meters">
          <div class="meter-row"><b>IN</b><span class="meter"><i id="inMeter"></i></span><span id="inDb">-∞ dB</span></div>
          <div class="meter-row"><b>OUT</b><span class="meter"><i id="outMeter"></i></span><span id="outDb">-∞ dB</span></div>
        </div>
      </div>
    </section>

<div class="main-grid">
      <section class="panel">
        <h2>Amp / Character / Tone</h2>
        <div class="controls" id="ampControls"></div>
      </section>

<section class="panel">
      <h2>Recall / Share / Explore</h2>
      <div class="utility">
        <div class="row">
          <input id="presetName" type="text" maxlength="48" placeholder="Preset name">
          <button id="savePresetBtn" type="button">Save Preset</button>
          <select id="presetSelect"><option value="">Saved presets…</option></select>
          <button id="loadPresetBtn" type="button">Load</button>
          <button class="danger" id="deletePresetBtn" type="button">Delete</button>
        </div>

<div class="tonebox">
          <input id="toneCode" type="text" spellcheck="false" autocomplete="off" placeholder="Tone Code appears here">
          <button id="makeToneBtn" type="button">Make Tone Code</button>
          <button id="applyToneBtn" type="button">Apply Tone Code</button>
        </div>

<div class="ab-grid">
          <button id="storeABtn" type="button">Store A</button>
          <button id="storeBBtn" type="button">Store B</button>
          <div class="morph-wrap control">
            <label for="morph">A/B Morph <span class="value" id="morphValue">50%</span></label>
            <input id="morph" type="range" min="0" max="100" value="50" step="1">
          </div>
        </div>

<div class="row">
          <div class="control">
            <label for="mutationAmount">Mutation Amount <span class="value" id="mutationValue">25%</span></label>
            <input id="mutationAmount" type="range" min="1" max="100" value="25" step="1">
          </div>
          <button id="mutateBtn" type="button">Mutate Current Tone</button>
        </div>

<p class="small">Tone Codes store parameter state, active IR slot, bypass state, and cabinet levels. User-loaded IR audio itself is not embedded in a Tone Code. The browser remembers the last tone and named presets locally on this device.</p>
      </div>
    </section>

<div class="footer">Killy Killette © 2026 · Killette DSP · Swamp Puppy</div>
  </main>
  <script>window.__SP_WORKLET_URL = URL.createObjectURL(new Blob(["function t(r,n,o){return Math.min(o,Math.max(n,r))}function M(r){return t(Math.floor(t(Number(r)||0,0,10)/10*4),0,3)}function X(r,n){let o=t(Number(n)||0,0,10),i=1+o*o*.6,s=r*i,c=Math.tanh(s),g=Math.tanh(s*.85);return(s>=0?c:g)*.9}function E(r,n,o,i,s){let c=M(s);if(c===0)return X(r,n);let g=t(Number(n)||0,0,10),d=t(Number(o)||0,0,10),l=t(Number(i)||0,0,10),e=1+g*1.4,b=(d-5)*.1,f=t(.1+l*.09,.1,1),a=r*e+b,p=a;if(c===1){let m=t(a,-1,1);p=m-m*m*m/3}else c===2&&(p=a-a*a*a/3);return Number.isFinite(p)||(p=0),t(p,-f,f)}var v=class extends AudioWorkletProcessor{constructor(){super(),this.target={gain:5,drive:5,shape:0,bias:5,thresh:7.5,gate:2,tight:2.5,calibration:0},this.smooth={...this.target},this.gateEnv=0,this.hpX1=0,this.hpY1=0,this.dcX1=0,this.dcY1=0,this.port.onmessage=n=>{let o=n.data||{};if(o.type===\"params\"&&o.values){for(let i of Object.keys(this.target))if(Object.prototype.hasOwnProperty.call(o.values,i)){let s=Number(o.values[i]);Number.isFinite(s)&&(this.target[i]=s)}}}}process(n,o){let i=n[0],s=o[0];if(!s||s.length===0)return!0;let c=i&&i[0]?i[0]:null,g=s[0].length,d=Math.exp(-1/Math.max(1,sampleRate*.005));for(let l=0;l<g;l++){for(let h of Object.keys(this.target))this.smooth[h]=this.target[h]+d*(this.smooth[h]-this.target[h]);let e=c?c[l]:0;Number.isFinite(e)||(e=0);let b=t(this.smooth.calibration,-18,18);e*=Math.pow(10,b/20),e*=t(this.smooth.gain,0,10)/5;let f=t(this.smooth.gate,0,10),a=f<=0?0:Math.pow(10,(-70+f*5)/20),p=Math.abs(e);this.gateEnv+=(p-this.gateEnv)*(p>this.gateEnv?.3:8e-4);let m=a<=0||this.gateEnv>=a?1:Math.max(0,this.gateEnv/a);e*=m*m;let x=t(this.smooth.tight,0,10);if(x>.001){let h=25+Math.pow(x/10,1.35)*185,N=1/(2*Math.PI*h),F=1/sampleRate,y=N/(N+F)*(this.hpY1+e-this.hpX1);this.hpX1=e,this.hpY1=y,e=y}else this.hpX1=e,this.hpY1=e;let Y=M(this.smooth.shape),u=E(e,this.smooth.drive,this.smooth.bias,this.smooth.thresh,this.smooth.shape);if(Y!==0){let h=u-this.dcX1+.995*this.dcY1;this.dcX1=u,this.dcY1=h,u=h}else this.dcX1=0,this.dcY1=0;Number.isFinite(u)||(u=0),u=t(u,-1.5,1.5);for(let h=0;h<s.length;h++)s[h][l]=u}return!0}};registerProcessor(\"swamp-puppy-processor\",v);\n"], {type:"text/javascript"}));</script>
<script type="module">
var ie=["LEGACY","CUBIC SOFT","CUBIC FOLD","HARD"];function f(e,t,n){return Math.min(n,Math.max(t,e))}function se(e){return f(Math.floor(f(Number(e)||0,0,10)/10*4),0,3)}function Ce(e){let t=new TextEncoder().encode(e),n="";for(let r of t)n+=String.fromCharCode(r);return btoa(n).replaceAll("+","-").replaceAll("/","_").replace(/=+$/,"")}function $e(e){let t=e.replaceAll("-","+").replaceAll("_","/"),n=t+"=".repeat((4-t.length%4)%4),r=atob(n),i=Uint8Array.from(r,p=>p.charCodeAt(0));return new TextDecoder().decode(i)}function ce(e){if(!e||typeof e!="object")throw new Error("Tone state must be an object.");return`SP1.${Ce(JSON.stringify({v:1,p:e}))}`}function le(e){let t=String(e||"").trim();if(!t.startsWith("SP1."))throw new Error("Not a Swamp Puppy SP1 Tone Code.");let n=JSON.parse($e(t.slice(4)));if(n.v!==1||!n.p||typeof n.p!="object")throw new Error("Unsupported Tone Code version.");return n.p}function ue(e,t,n,r){if(!e||!t)throw new Error("Both A and B states are required.");let i=f(Number(n)||0,0,1),p=Object.keys(r||e),m={};for(let l of p){let u=e[l]??r?.[l],g=t[l]??r?.[l];l==="bypass"||l==="activeIR"?m[l]=i<.5?u:g:m[l]=Number(u)+(Number(g)-Number(u))*i}return m}function de(e,t,n=Math.random){let r=f(Number(t)||0,0,1),i={...e},p={gain:2.2,gate:1.5,tight:2.5,drive:2.6,bias:2.3,thresh:2,bass:2,mid:2,treble:2,presence:2,irMix:1.8,irLevel0:1.5,irLevel1:1.5,irLevel2:1.5,irLevel3:1.5};for(let[m,l]of Object.entries(p)){let u=(n()*2-1)*l*r;i[m]=f(Number(i[m])+u,0,10)}if(r>.5&&n()<r*.35){let m=[.5,3,5.5,8.5];i.shape=m[Math.floor(n()*m.length)%m.length]}return i.master=f(Number(i.master),0,7.5),i.activeIR=f(Math.round(Number(i.activeIR)||0),0,3),i.bypass=!!i.bypass,i}var B=Object.freeze({calibration:0,gain:5,drive:5,shape:0,bias:5,thresh:7.5,gate:2,tight:2.5,bass:5,mid:5,treble:5,presence:5,master:5,irMix:8.5,irLevel0:5,irLevel1:5,irLevel2:5,irLevel3:5,activeIR:0,bypass:!1}),Be=[{id:"calibration",label:"Input Cal",min:-18,max:18,step:.5,unit:" dB",group:"amp"},{id:"gain",label:"Gain",min:0,max:10,step:.1,group:"amp"},{id:"gate",label:"Gate",min:0,max:10,step:.1,group:"amp"},{id:"tight",label:"Tight",min:0,max:10,step:.1,group:"amp"},{id:"drive",label:"Drive",min:0,max:10,step:.1,group:"amp"},{id:"shape",label:"Shape",min:0,max:10,step:.1,group:"amp",shape:!0},{id:"bias",label:"Bias",min:0,max:10,step:.1,group:"amp"},{id:"thresh",label:"Threshold",min:0,max:10,step:.1,group:"amp"},{id:"bass",label:"Bass",min:0,max:10,step:.1,group:"amp"},{id:"mid",label:"Mid",min:0,max:10,step:.1,group:"amp"},{id:"treble",label:"Treble",min:0,max:10,step:.1,group:"amp"},{id:"presence",label:"Presence",min:0,max:10,step:.1,group:"amp"},{id:"master",label:"Master",min:0,max:10,step:.1,group:"amp"},{id:"irMix",label:"Cab Mix",min:0,max:10,step:.1,group:"cab"}],ve="KDSP_SWAMP_PUPPY_LAST_V1",he="KDSP_SWAMP_PUPPY_PRESETS_V1",ge="KDSP_SWAMP_PUPPY_AB_V1",o=e=>document.getElementById(e),te=new Map,s={...B},h=[],H=[],Z=!1,y={A:null,B:null},a=null,w=null,C=null,O=null,I=null,L=null,F=null,_=null,W=null,K=null,Y=null,P=null,$=null,N=null,G=null,J=null,x=null,A=null,v=null,b=null,E=null,z=null,pe=0,R=[null,null,null,null],M=[{name:"Factory Swamp 4x12",seed:1103,lowpass:4700,decay:.038,body:105},{name:"Factory Bark 2x12",seed:2207,lowpass:6200,decay:.026,body:165},{name:"Factory Bog 4x12",seed:3301,lowpass:3600,decay:.046,body:88},{name:"Factory Open 1x12",seed:4409,lowpass:7600,decay:.02,body:220}],S=M.map(e=>e.name);function d(e,t=!1,n=!1){o("statusText").textContent=e,o("audioDot").classList.toggle("live",t),o("statusText").style.color=n?"var(--danger)":""}function Me(){for(let e of Be){let t=e.group==="cab"?o("cabControls"):o("ampControls"),n=document.createElement("div");n.className="control";let r=Number(s[e.id]??B[e.id]);n.innerHTML=`
      <label for="ctl-${e.id}"><span>${e.label}</span><span class="value" id="val-${e.id}"></span></label>
      <input id="ctl-${e.id}" type="range" min="${e.min}" max="${e.max}" step="${e.step}" value="${r}" aria-label="${e.label}">
      ${e.shape?'<div class="shape-readout" id="shapeReadout"></div>':""}`,t.appendChild(n);let i=n.querySelector("input");te.set(e.id,{input:i,value:n.querySelector(`#val-${e.id}`),spec:e}),i.addEventListener("input",()=>{s[e.id]=Number(i.value),ee(e.id),ae(),U()}),i.addEventListener("change",()=>V()),ee(e.id)}}function ee(e){let t=te.get(e);if(!t)return;let n=Number(s[e]);t.value.textContent=`${n.toFixed(t.spec.step<1?1:0)}${t.spec.unit||""}`,e==="shape"&&(o("shapeReadout").textContent=ie[se(n)])}function ke(){let e=o("cabGrid");for(let t=0;t<4;t++){let n=document.createElement("div");n.className="ir-card",n.id=`ir-card-${t}`,n.innerHTML=`
      <div class="ir-top"><b>IR ${t+1}</b><span class="ir-name" id="ir-name-${t}" title="${M[t].name}">${M[t].name}</span></div>
      <div class="control" style="margin-top:8px">
        <label for="ir-level-${t}"><span>Level</span><span class="value" id="ir-level-value-${t}">5.0</span></label>
        <input id="ir-level-${t}" type="range" min="0" max="10" step="0.1" value="5">
      </div>
      <div class="ir-actions">
        <button type="button" id="ir-select-${t}">Select</button>
        <button type="button" id="ir-load-${t}">Load WAV</button>
        <button type="button" id="ir-factory-${t}">Factory</button>
      </div>
      <input class="ir-file" id="ir-file-${t}" type="file" accept="audio/wav,audio/x-wav,.wav">
    `,e.appendChild(n),o(`ir-select-${t}`).addEventListener("click",()=>D(t,!0)),o(`ir-load-${t}`).addEventListener("click",()=>o(`ir-file-${t}`).click()),o(`ir-factory-${t}`).addEventListener("click",async()=>{await q(!1),Ie(t)}),o(`ir-file-${t}`).addEventListener("change",r=>Ne(t,r.target.files?.[0])),o(`ir-level-${t}`).addEventListener("input",r=>{s[`irLevel${t}`]=Number(r.target.value),o(`ir-level-value-${t}`).textContent=Number(r.target.value).toFixed(1),ne(),U()}),o(`ir-level-${t}`).addEventListener("change",V)}D(s.activeIR,!1)}function k(){let e={};for(let t of Object.keys(B))e[t]=s[t];return e}function V(){if(Z)return;let e=k(),t=h[h.length-1];(!t||JSON.stringify(t)!==JSON.stringify(e))&&(h.push(e),h.length>80&&h.shift(),H=[])}function T(e,{record:t=!0}={}){Z=!0;let n={...B,...e};for(let r of Object.keys(B))s[r]=n[r];for(let[r,i]of te.entries())i.input.value=s[r],ee(r);for(let r=0;r<4;r++){let i=o(`ir-level-${r}`);i&&(i.value=s[`irLevel${r}`],o(`ir-level-value-${r}`).textContent=Number(s[`irLevel${r}`]).toFixed(1))}o("bypassBtn").classList.toggle("active",!!s.bypass),o("bypassBtn").textContent=s.bypass?"Bypass ON":"Bypass",D(Number(s.activeIR)||0,!1),ae(),U(),Z=!1,t&&V()}function U(){try{localStorage.setItem(ve,JSON.stringify(k()))}catch{}}function Le(){try{let e=JSON.parse(localStorage.getItem(ve)||"null");e&&typeof e=="object"&&(s={...s,...e});let t=JSON.parse(localStorage.getItem(ge)||"null");t&&typeof t=="object"&&(y={A:t.A||null,B:t.B||null})}catch{}}function D(e,t=!0){let n=f(Math.round(Number(e)||0),0,3);s.activeIR=n;for(let r=0;r<4;r++){o(`ir-card-${r}`)?.classList.toggle("active",r===n);let i=o(`ir-select-${r}`);i&&(i.textContent=r===n?"ACTIVE":"Select")}P&&a&&(P.buffer=R[n]||be()),ne(),U(),t&&V()}function be(){if(!a)return null;let e=a.createBuffer(1,1,a.sampleRate);return e.getChannelData(0)[0]=1,e}function ye(e){if(!a)return null;let t=Math.min(4096,Math.max(512,Math.round(a.sampleRate*.055))),n=a.createBuffer(1,t,a.sampleRate),r=n.getChannelData(0),i=e.seed>>>0,p=0,m=Math.exp(-2*Math.PI*e.lowpass/a.sampleRate),l=2*Math.PI*e.body/a.sampleRate;for(let c=0;c<t;c++){i=1664525*i+1013904223>>>0;let X=i/4294967296*2-1;p=(1-m)*X+m*p;let j=Math.exp(-c/Math.max(1,a.sampleRate*e.decay)),Ae=c===0?.82:c===13?-.16:c===31?.09:0,xe=Math.sin(l*c)*Math.exp(-c/Math.max(1,a.sampleRate*.024))*.1;r[c]=Ae+j*p*.18+xe}let u=0;for(let c=0;c<t;c++)u=Math.max(u,Math.abs(r[c]));let g=u>1e-4?.7/u:1;for(let c=0;c<t;c++)r[c]*=g;return n}function Ee(){if(a)for(let e=0;e<4;e++){R[e]||(R[e]=ye(M[e])),S[e]||(S[e]=M[e].name);let t=o(`ir-name-${e}`);t&&(t.textContent=S[e],t.title=S[e])}}function Ie(e){if(!a)return;R[e]=ye(M[e]),S[e]=M[e].name;let t=o(`ir-name-${e}`);t&&(t.textContent=S[e],t.title=S[e]),D(e,!0),d(`IR ${e+1} restored to ${S[e]}.`,a.state==="running")}function Pe(e){if(!a||!e)return e;let t=Math.min(e.length,4096),n=a.createBuffer(1,t,e.sampleRate),r=n.getChannelData(0),i=e.getChannelData(0),p=0;for(let l=0;l<t;l++)p=Math.max(p,Math.abs(i[l]||0));let m=p>1e-4?.7/p:1;for(let l=0;l<t;l++)r[l]=(i[l]||0)*m;return n}async function Ne(e,t){if(t)try{await q(!1);let n=await t.arrayBuffer(),r=await a.decodeAudioData(n.slice(0)),i=Pe(r);R[e]=i,S[e]=t.name;let p=o(`ir-name-${e}`);p.textContent=t.name,p.title=t.name,D(e,!0),d(`IR ${e+1} loaded: ${t.name}`,a?.state==="running")}catch(n){d(`IR load failed: ${n?.message||n}`,a?.state==="running",!0)}}function Re(){if(!a||!I)return;let e=a.currentTime;I.gain.setTargetAtTime((s.bass-5)*2.4,e,.01),L.gain.setTargetAtTime((s.mid-5)*2,e,.01),F.gain.setTargetAtTime((s.treble-5)*2.4,e,.01),_.gain.setTargetAtTime((s.presence-5)*1.6,e,.01)}function ne(){if(!a||!K||!Y)return;let e=a.currentTime,t=f(s.irMix/10,0,1),n=f(s[`irLevel${s.activeIR}`]/5,0,2);K.gain.setTargetAtTime(1-t,e,.012),Y.gain.setTargetAtTime(t*n,e,.012)}function De(){if(!a||!$||!N)return;let e=a.currentTime;$.gain.cancelScheduledValues(e),N.gain.cancelScheduledValues(e),$.gain.setTargetAtTime(s.bypass?0:1,e,.008),N.gain.setTargetAtTime(s.bypass?1:0,e,.008)}function ae(){if(!(!a||!O)&&(O.port.postMessage({type:"params",values:{calibration:s.calibration,gain:s.gain,gate:s.gate,tight:s.tight,drive:s.drive,shape:s.shape,bias:s.bias,thresh:s.thresh}}),Re(),ne(),De(),G)){let e=Math.pow(f(s.master,0,10)/5,2);G.gain.setTargetAtTime(e,a.currentTime,.012)}}function Fe(){let t=new Float32Array(2048);for(let n=0;n<2048;n++){let r=n/2047*2-1;t[n]=Math.tanh(r*1.35)/Math.tanh(1.35)}return t}async function q(e=!0){if(!a){a=new(window.AudioContext||window.webkitAudioContext)({latencyHint:"interactive"}),await a.audioWorklet.addModule(window.__SP_WORKLET_URL);let t=a.createGain();t.gain.value=1,window.__spInputBus=t,x=a.createAnalyser(),x.fftSize=1024,x.smoothingTimeConstant=.65,O=new AudioWorkletNode(a,"swamp-puppy-processor",{outputChannelCount:[2]}),I=a.createBiquadFilter(),I.type="lowshelf",I.frequency.value=120,L=a.createBiquadFilter(),L.type="peaking",L.frequency.value=650,L.Q.value=.8,F=a.createBiquadFilter(),F.type="highshelf",F.frequency.value=2800,_=a.createBiquadFilter(),_.type="highshelf",_.frequency.value=5500,W=a.createGain(),K=a.createGain(),P=a.createConvolver(),P.normalize=!1,Ee(),P.buffer=R[s.activeIR]||be(),Y=a.createGain(),$=a.createGain(),N=a.createGain(),G=a.createGain(),J=a.createWaveShaper(),J.curve=Fe(),J.oversample="4x",A=a.createAnalyser(),A.fftSize=2048,A.smoothingTimeConstant=.6,t.connect(x),x.connect(O),O.connect(I).connect(L).connect(F).connect(_).connect(W),W.connect(K).connect($),W.connect(P).connect(Y).connect($),t.connect(N),$.connect(G),G.connect(J).connect(A).connect(window.KDSPSafety?window.KDSPSafety.attach(a):a.destination),N.connect(A),ae(),D(s.activeIR,!1),qe()}if(a.state!=="running"&&await a.resume(),e&&!w)try{await we(o("inputDevice").value||void 0)}catch(t){d(`Audio engine running. Microphone unavailable: ${t?.message||t}. Demo Source still works.`,!0,!1)}return a}async function we(e){if(!navigator.mediaDevices?.getUserMedia)throw new Error("Microphone input is not supported in this browser.");if(w&&w.getTracks().forEach(n=>n.stop()),C)try{C.disconnect()}catch{}let t=e?{deviceId:{exact:e},echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1}:{echoCancellation:!1,noiseSuppression:!1,autoGainControl:!1};w=await navigator.mediaDevices.getUserMedia({audio:t,video:!1}),C=a.createMediaStreamSource(w),C.connect(window.__spInputBus),await Se(),d("Audio live. Guitar/microphone input connected.",!0)}async function Se(){if(!navigator.mediaDevices?.enumerateDevices)return;let e=await navigator.mediaDevices.enumerateDevices(),t=o("inputDevice"),n=o("outputDevice"),r=t.value,i=n.value;t.innerHTML='<option value="">Default input</option>',n.innerHTML='<option value="">Default output</option>';let p=1,m=1;for(let u of e)if(u.kind==="audioinput"){let g=new Option(u.label||`Input ${p++}`,u.deviceId);t.add(g)}else if(u.kind==="audiooutput"){let g=new Option(u.label||`Output ${m++}`,u.deviceId);n.add(g)}[...t.options].some(u=>u.value===r)&&(t.value=r),[...n.options].some(u=>u.value===i)&&(n.value=i);let l=a&&typeof a.setSinkId=="function";n.disabled=!l,n.title=l?"Select output device":"Output selection is not supported by this browser"}function _e(){if(oe(),w&&(w.getTracks().forEach(e=>e.stop()),w=null),C){try{C.disconnect()}catch{}C=null}a&&a.state==="running"&&a.suspend(),d("Audio stopped. Your tone is still saved locally.",!1)}function Oe(){if(!a||!window.__spInputBus)return;if(v){oe();return}v=a.createOscillator(),v.type="sawtooth",E=a.createBiquadFilter(),E.type="lowpass",E.frequency.value=1400,E.Q.value=.8,b=a.createGain(),b.gain.value=0,v.connect(E).connect(b).connect(window.__spInputBus),v.start();let e=[82.41,82.41,98,82.41,73.42,82.41,110,98,82.41,82.41,123.47,110,98,92.5,82.41,73.42],t=0,n=()=>{if(!v||!a)return;let r=a.currentTime+.04;for(let i=0;i<8;i++){let p=e[t++%e.length];v.frequency.setValueAtTime(p,r),b.gain.cancelScheduledValues(r),b.gain.setValueAtTime(1e-4,r),b.gain.exponentialRampToValueAtTime(.055,r+.008),b.gain.exponentialRampToValueAtTime(.009,r+.085),b.gain.exponentialRampToValueAtTime(1e-4,r+.115),r+=.125}};n(),z=setInterval(n,1e3),o("demoBtn").classList.add("active"),o("demoBtn").textContent="Stop Demo",d("Demo source running through Swamp Puppy.",!0)}function oe(){if(z&&clearInterval(z),z=null,v){try{v.stop()}catch{}try{v.disconnect()}catch{}}v=null,b=null,E=null,o("demoBtn").classList.remove("active"),o("demoBtn").textContent="Demo Source"}function me(e){return!Number.isFinite(e)||e<=1e-5?"-∞ dB":`${(20*Math.log10(e)).toFixed(1)} dB`}function Ge(e,t){if(!e)return 0;e.getFloatTimeDomainData(t);let n=0;for(let r=0;r<t.length;r++)n=Math.max(n,Math.abs(t[r]));return n}function qe(){cancelAnimationFrame(pe);let e=o("scope"),t=e.getContext("2d"),n=new Float32Array(A.fftSize),r=new Float32Array(x.fftSize),i=()=>{if(pe=requestAnimationFrame(i),!A)return;A.getFloatTimeDomainData(n);let p=Ge(x,r),m=0;for(let c=0;c<n.length;c++)m=Math.max(m,Math.abs(n[c]));o("inMeter").style.width=`${f(p*100,0,100)}%`,o("outMeter").style.width=`${f(m*100,0,100)}%`,o("inDb").textContent=me(p),o("outDb").textContent=me(m);let l=e.width,u=e.height;t.fillStyle="#030806",t.fillRect(0,0,l,u),t.strokeStyle="#143326",t.lineWidth=1,t.beginPath();for(let c=0;c<=l;c+=80)t.moveTo(c,0),t.lineTo(c,u);for(let c=0;c<=u;c+=44)t.moveTo(0,c),t.lineTo(l,c);t.stroke(),t.strokeStyle="#68ff88",t.lineWidth=2,t.beginPath();let g=n.length/l;for(let c=0;c<l;c++){let X=n[Math.floor(c*g)]||0,j=u*.5-X*u*.43;c===0?t.moveTo(c,j):t.lineTo(c,j)}t.stroke()};i()}function Ve(){try{let e=ce(k());o("toneCode").value=e,o("toneCode").select(),navigator.clipboard?.writeText(e).catch(()=>{}),d("Tone Code created. It is selected and ready to copy.",a?.state==="running")}catch(e){d(`Tone Code error: ${e?.message||e}`,a?.state==="running",!0)}}function Ue(){try{T(le(o("toneCode").value)),d("Tone Code applied.",a?.state==="running")}catch(e){d(`Tone Code error: ${e?.message||e}`,a?.state==="running",!0)}}function Q(){try{return JSON.parse(localStorage.getItem(he)||"{}")||{}}catch{return{}}}function Te(e){try{localStorage.setItem(he,JSON.stringify(e))}catch{}}function re(){let e=Q(),t=o("presetSelect"),n=t.value;t.innerHTML='<option value="">Saved presets…</option>';for(let r of Object.keys(e).sort((i,p)=>i.localeCompare(p)))t.add(new Option(r,r));e[n]&&(t.value=n)}function je(){let e=o("presetName").value.trim();if(!e){d("Enter a preset name first.",a?.state==="running",!0);return}let t=Q();t[e]=k(),Te(t),re(),o("presetSelect").value=e,d(`Preset saved: ${e}`,a?.state==="running")}function We(){let e=o("presetSelect").value,t=Q()[e];if(!e||!t){d("Choose a saved preset first.",a?.state==="running",!0);return}T(t),d(`Preset loaded: ${e}`,a?.state==="running")}function Je(){let e=o("presetSelect").value;if(!e)return;let t=Q();delete t[e],Te(t),re(),d(`Preset deleted: ${e}`,a?.state==="running")}function fe(e){y[e]=k();try{localStorage.setItem(ge,JSON.stringify(y))}catch{}o(`store${e}Btn`).classList.add("active"),d(`A/B slot ${e} stored.`,a?.state==="running")}function ze(e){o("morphValue").textContent=`${e}%`,!(!y.A||!y.B)&&T(ue(y.A,y.B,e/100,B),{record:!1})}function He(){let e=Number(o("mutationAmount").value)/100;T(de(k(),e)),d(`Tone mutated at ${Math.round(e*100)}%.`,a?.state==="running")}function Ke(){if(h.length<2)return;let e=h.pop();H.push(e),T(h[h.length-1],{record:!1}),d("Undo.",a?.state==="running")}function Ye(){if(!H.length)return;let e=H.pop();h.push(e),T(e,{record:!1}),d("Redo.",a?.state==="running")}function Qe(){o("startBtn").addEventListener("click",async()=>{try{await q(!0),await Se(),a.state==="running"&&w&&d("Audio live. Guitar/microphone input connected.",!0)}catch(e){d(`Audio start failed: ${e?.message||e}`,!1,!0)}}),o("stopBtn").addEventListener("click",_e),o("demoBtn").addEventListener("click",async()=>{try{await q(!1),v?oe():Oe()}catch(e){d(`Demo start failed: ${e?.message||e}`,!1,!0)}}),o("bypassBtn").addEventListener("click",()=>{s.bypass=!s.bypass,T(s)}),o("resetBtn").addEventListener("click",()=>T(B)),o("undoBtn").addEventListener("click",Ke),o("redoBtn").addEventListener("click",Ye),o("inputDevice").addEventListener("change",async e=>{try{await q(!1),await we(e.target.value||void 0)}catch(t){d(`Input switch failed: ${t?.message||t}`,a?.state==="running",!0)}}),o("outputDevice").addEventListener("change",async e=>{try{if(!a||typeof a.setSinkId!="function")throw new Error("Output device selection is not supported in this browser.");await a.setSinkId(e.target.value||""),d("Output device changed.",a.state==="running")}catch(t){d(`Output switch failed: ${t?.message||t}`,a?.state==="running",!0)}}),o("savePresetBtn").addEventListener("click",je),o("loadPresetBtn").addEventListener("click",We),o("deletePresetBtn").addEventListener("click",Je),o("makeToneBtn").addEventListener("click",Ve),o("applyToneBtn").addEventListener("click",Ue),o("storeABtn").addEventListener("click",()=>fe("A")),o("storeBBtn").addEventListener("click",()=>fe("B")),o("morph").addEventListener("input",e=>ze(Number(e.target.value))),o("morph").addEventListener("change",V),o("mutationAmount").addEventListener("input",e=>o("mutationValue").textContent=`${e.target.value}%`),o("mutateBtn").addEventListener("click",He),window.addEventListener("beforeunload",U)}Le();Me();ke();Qe();re();T(s,{record:!1});h=[k()];y.A&&o("storeABtn").classList.add("active");y.B&&o("storeBBtn").classList.add("active");"AudioContext"in window||"webkitAudioContext"in window||d("This browser does not expose Web Audio API.",!1,!0);

</script>

const SVG_NS = 'http://www.w3.org/2000/svg';
const START_DEG = -135;
const SWEEP_DEG = 270;
const DRAG_PX_FULL_RANGE = 180;
const nativeValue = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');

function polar(cx, cy, r, deg) {
  const a = (deg - 90) * Math.PI / 180;
  return [cx + r * Math.cos(a), cy + r * Math.sin(a)];
}

function svgEl(name, attrs) {
  const node = document.createElementNS(SVG_NS, name);
  for (const [k, v] of Object.entries(attrs)) node.setAttribute(k, String(v));
  return node;
}

function makeDial(input) {
  const control = input.closest('.control');
  if (!control || control.classList.contains('has-dial')) return;

const min = parseFloat(input.min);
  const max = parseFloat(input.max);
  const step = parseFloat(input.step) || 1;
  const label = control.querySelector('label');
  const valueEl = label ? label.querySelector('.value') : null;

let name = input.getAttribute('aria-label') || '';
  if (!name && label) {
    const clone = label.cloneNode(true);
    clone.querySelectorAll('.value').forEach((n) => n.remove());
    name = clone.textContent.trim();
  }

const dial = document.createElement('div');
  dial.className = 'kdial';
  dial.tabIndex = 0;
  dial.setAttribute('role', 'slider');
  dial.setAttribute('aria-label', name);
  dial.setAttribute('aria-valuemin', String(min));
  dial.setAttribute('aria-valuemax', String(max));

input.before(dial);
  if (valueEl) {
    valueEl.classList.add('kdial-value');
    dial.after(valueEl);
  }

input.classList.add('kdial-native');
  input.tabIndex = -1;
  input.setAttribute('aria-hidden', 'true');
  control.classList.add('has-dial');

const read = () => parseFloat(nativeValue.get.call(input));

// Keep the dial in sync when app.js sets input.value directly (presets, undo, morph, reset).
  Object.defineProperty(input, 'value', {
    configurable: true,
    get() { return nativeValue.get.call(this); },
    set(v) { nativeValue.set.call(this, v); render(); }
  });

let drag = null;

dial.addEventListener('pointerdown', (e) => {
    if (e.button !== undefined && e.button !== 0) return;
    e.preventDefault();
    dial.focus({ preventScroll: true });
    try { dial.setPointerCapture(e.pointerId); } catch (_) {}
    drag = { x: e.clientX, y: e.clientY, v: read(), moved: false };
    dial.classList.add('is-drag');
  });

dial.addEventListener('pointermove', (e) => {
    if (!drag) return;
    const px = (drag.y - e.clientY) + (e.clientX - drag.x);
    const fine = e.shiftKey ? 0.25 : 1;
    setFromDial(drag.v + (px * fine / DRAG_PX_FULL_RANGE) * (max - min));
    drag.moved = true;
  });

const endDrag = () => {
    if (!drag) return;
    const moved = drag.moved;
    drag = null;
    dial.classList.remove('is-drag');
    if (moved) input.dispatchEvent(new Event('change', { bubbles: true }));
  };
  dial.addEventListener('pointerup', endDrag);
  dial.addEventListener('pointercancel', endDrag);
  dial.addEventListener('lostpointercapture', endDrag);

dial.addEventListener('keydown', (e) => {
    const v = read();
    const big = (max - min) / 10;
    let next = null;
    switch (e.key) {
      case 'ArrowUp': case 'ArrowRight': next = v + step; break;
      case 'ArrowDown': case 'ArrowLeft': next = v - step; break;
      case 'PageUp': next = v + big; break;
      case 'PageDown': next = v - big; break;
      case 'Home': next = min; break;
      case 'End': next = max; break;
      default: return;
    }
    e.preventDefault();
    setFromDial(next);
    input.dispatchEvent(new Event('change', { bubbles: true }));
  });

render();
}

document.querySelectorAll('input[type="range"]').forEach(makeDial);
</script>
  <script type="module">
// rig.js — KDSP amp-rig face for Swamp Puppy, built on Killy's own Swamp Puppy stack render
// (KDSP 6x12 stack, uploaded to the site Media Library as swamp-puppy-head.webp + swamp-puppy-6x12-cab-v2.webp).
// Re-homes the app's existing, already-wired controls into that head + 6x12 cab:
//   HEAD: the head image frames a screen (scope + IN/OUT meters) on its face and the dial strip
//         (all amp dials) on its control panel, plus POWER / MIC / LIMIT lights and KILL.
//   CAB : the 6x12 cab image; each of its 6 real speakers is a tap target, and the spiked
//         SWAMP PUPPY metal emblem sits on the cab mesh over the centre badge.
//         Speakers 1-4 = IR slots 1-4 (tap = select slot + pop-up with level / Load WAV / Factory).
//         Speakers 5-6 = CAB MIX pop-up.
// Nothing is re-implemented: the original elements (and their app.js listeners) are moved, not copied.

(function () {
  'use strict';

const $ = (id) => document.getElementById(id);
  const SVG_NS = 'http://www.w3.org/2000/svg';
  const HEAD_IMG = 'https://killykillette.com/wp-content/uploads/2026/09/swamp-puppy-head.webp';
  const CAB_IMG = 'https://killykillette.com/wp-content/uploads/2026/09/swamp-puppy-6x12-cab-v2.webp';
  // Speaker centres on the cab image, in % of its width / height (measured on the render).
  const SPEAKER_POS = [[28.5, 19], [70, 19], [28.5, 45.5], [70, 45.5], [28.5, 72.5], [70, 72.5]];

const scope = $('scope');
  const ampControls = $('ampControls');
  const cabGrid = $('cabGrid');
  const cabControls = $('cabControls');
  if (!scope || !ampControls || !cabGrid || !cabControls) return;

const scopePanel = scope.closest('.panel');
  const meters = scopePanel.querySelector('.meters');
  const mainGrid = document.querySelector('.main-grid');
  const audioPanel = $('startBtn').closest('.panel');

// ---------- Spiked metal emblem ----------
  let emblemCount = 0;
  function spikedEmblem(title) {
    const id = 'kdspEmb' + (++emblemCount);
    const W = 600, X0 = 20, X1 = 580, TOP = 50, BASE = 122;
    const svg = document.createElementNS(SVG_NS, 'svg');
    svg.setAttribute('viewBox', '0 0 600 190');
    svg.setAttribute('class', 'spiked-emblem');
    svg.setAttribute('role', 'img');
    svg.setAttribute('aria-label', title);

svg.innerHTML =
      `<defs>
        <linearGradient id="${id}m" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" stop-color="#ffffff"/><stop offset=".22" stop-color="#c9d3cf"/>
          <stop offset=".48" stop-color="#5d6863"/><stop offset=".52" stop-color="#2c3430"/>
          <stop offset=".78" stop-color="#aab6b1"/><stop offset="1" stop-color="#e9f1ed"/>
        </linearGradient>
        <filter id="${id}g" x="-10%" y="-30%" width="120%" height="160%">
          <feDropShadow dx="0" dy="3" stdDeviation="2" flood-color="#000" flood-opacity=".9"/>
          <feDropShadow dx="0" dy="0" stdDeviation="6" flood-color="#68ff88" flood-opacity=".45"/>
        </filter>
      </defs>
      <g filter="url(#${id}g)" fill="url(#${id}m)" stroke="#0b0f0d" stroke-width="2.5" stroke-linejoin="miter">
        <g class="emblem-spikes">${spikes}</g>
        <text x="${X0}" y="${BASE}" textLength="${X1 - X0}" lengthAdjust="spacingAndGlyphs"
          font-family="Impact, 'Arial Black', 'Helvetica Neue', sans-serif" font-weight="900"
          font-size="96" letter-spacing="2">SWAMP PUPPY</text>
      </g>`;
    void W;
    return svg;
  }

// ---------- Build the rig ----------
  const rig = document.createElement('section');
  rig.className = 'rig';
  rig.setAttribute('aria-label', 'Swamp Puppy amp rig');

// HEAD
  const head = document.createElement('div');
  head.className = 'rig-head';
  head.style.borderImageSource = `url("${HEAD_IMG}")`;
  head.innerHTML =
    `<div class="head-screen"><div class="screen-glass"></div></div>
     <div class="head-panel">
       <div class="head-top">
         <span class="lamp" id="pilotLamp" title="Power"><i></i>POWER</span>
         <span class="head-top-gap"></span>
         <span class="lamp mic" id="micLamp" title="Mic live"><i></i>MIC</span>
         <span class="lamp limit" id="limitLamp" title="Limiter active"><i></i>LIMIT</span>
         <button type="button" class="kill-btn" id="killBtn" aria-pressed="false" title="Panic mute: silences all output instantly">KILL</button>
       </div>
       <div class="dial-strip"></div>
     </div>`;
  const screen = head.querySelector('.head-screen');
  screen.insertBefore(scope, screen.firstChild);
  screen.insertBefore(meters, screen.querySelector('.screen-glass'));
  head.querySelector('.dial-strip').appendChild(ampControls);

// CAB
  const cab = document.createElement('div');
  cab.className = 'rig-cab';
  cab.innerHTML =
    `<div class="cab-grille">
       <img decoding="async" class="cab-img" src="${CAB_IMG}" alt="Swamp Puppy 6x12 cabinet" draggable="false">
       <div class="speakers"></div>
       <div class="cab-badge-cover" aria-hidden="true"></div>
       <div class="cab-emblem"></div>
       <div class="cab-pop" id="cabPop" role="dialog" aria-modal="false" aria-labelledby="cabPopTitle" hidden>
         <div class="cab-pop-head"><b id="cabPopTitle"></b><button type="button" class="cab-pop-close" aria-label="Close">×</button></div>
         <div class="cab-pop-body"></div>
       </div>
     </div>
     <div class="cab-hint">Tap a speaker: 1–4 = IR slots · 5–6 = Cab Mix</div>`;
  cab.querySelector('.cab-emblem').appendChild(spikedEmblem('Swamp Puppy'));

const pop = cab.querySelector('#cabPop');
  const popBody = pop.querySelector('.cab-pop-body');
  const popTitle = pop.querySelector('#cabPopTitle');
  const cards = [0, 1, 2, 3].map((i) => $(`ir-card-${i}`));
  cards.forEach((c) => { if (c) popBody.appendChild(c); });
  popBody.appendChild(cabControls);

function slotName(i) {
    const n = $(`ir-name-${i}`);
    return n ? n.textContent : `IR ${i + 1}`;
  }

function labelSpeakers() {
    speakers.forEach((b, s) => {
      b.setAttribute('aria-label', s < 4
        ? `Speaker ${s + 1}: IR slot ${s + 1}, ${slotName(s)}. Select and edit.`
        : `Speaker ${s + 1}: Cab Mix.`);
    });
  }

speakers.forEach((b, s) => b.addEventListener('click', () => {
    if (s < 4) {
      const sel = $(`ir-select-${s}`);
      if (sel) sel.click();                 // the app's own slot-select (keeps undo/state/audio wiring)
    }
    if (!pop.hidden && openFor === s) closePop(); else openPop(s);
  }));
  pop.querySelector('.cab-pop-close').addEventListener('click', closePop);
  document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePop(); });
  document.addEventListener('pointerdown', (e) => {
    if (pop.hidden) return;
    if (pop.contains(e.target) || e.target.closest('.speaker')) return;
    closePop();
  });

// Active IR slot glows on its speaker (follows presets, undo, Tone Codes too).
  function syncActive() {
    cards.forEach((c, i) => speakers[i].classList.toggle('active', !!c && c.classList.contains('active')));
    labelSpeakers();
  }
  const mo = new MutationObserver(syncActive);
  cards.forEach((c, i) => {
    if (!c) return;
    mo.observe(c, { attributes: true, attributeFilter: ['class'] });
    const n = $(`ir-name-${i}`);
    if (n) mo.observe(n, { childList: true, characterData: true, subtree: true });
  });
  syncActive();

// Assemble: rig goes where the scope panel was; old containers are emptied and hidden.
  rig.append(head, cab);
  scopePanel.before(rig);
  scopePanel.style.display = 'none';
  if (mainGrid) mainGrid.style.display = 'none';

// Safety note in the Audio panel.
  const note = document.createElement('p');
  note.className = 'small safety-note';
  note.textContent = 'Safety: output limiter always on · KILL mutes instantly · feedback guard watches the mic · audio fades in on start. Headphones recommended.';
  audioPanel.querySelector('div').appendChild(note);

// ---------- Safety wiring ----------
  const killBtn = $('killBtn');
  const pilot = $('pilotLamp'), mic = $('micLamp'), limit = $('limitLamp');
  const S = window.KDSPSafety;
  if (S) {
    killBtn.addEventListener('click', () => {
      const wasKilled = S.state().killed;
      S.toggleKill();
      const st = $('statusText');
      if (st) {
        st.textContent = wasKilled ? 'Output unmuted.' : 'KILLED. All output muted. Press UNMUTE to bring it back.';
        st.style.color = wasKilled ? '' : 'var(--danger)';
      }
    });
    S.onChange((s) => {
      killBtn.classList.toggle('is-killed', s.killed);
      killBtn.setAttribute('aria-pressed', String(s.killed));
      killBtn.textContent = s.killed ? 'UNMUTE' : 'KILL';
      pilot.classList.toggle('on', s.running && !s.killed);
      mic.classList.toggle('on', s.micLive);
      limit.classList.toggle('on', s.limiting);
    });
    setInterval(() => mic.classList.toggle('on', S.state().micLive), 500);
  } else {
    killBtn.disabled = true;
  }
})();
</script>
</body>
</html>

Your cart (items: 0)

Products in cart
Product	Details	Total
	Available on backorder Previous price: Discounted price:	Save