Finding Music

<!DOCTYPE html>

<html lang="en">
<head><script src="/gdpr/gdprscript.js?buildTime=1755180469"></script>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Chord Builder</title>
<style>
  :root{
    --navy:#66d1ff;
    --ivory:#F7F1E3;
    --panel:#1f2a48;
    --accent:#7bdcff;
    --key:#f5f7fb;
    --black:#2a3350;
    --text:#e8ecf8;
    --muted:#a8b0c6;
    --root:#f94144;
    --core:#ffe36e;
    /* Updated colour for added notes: swap orange for purple */
    --added:#b388ff;
    --alter:#22d095;
    --arrow:#9fb7ff;
  }
  *{box-sizing:border-box}
  body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    background: #151a2e;
    color:var(--text);
  }

/* Hero heading */
  .hero{
    text-align:center;
    padding:18px 10px 6px;
    color:#f5f7fb;
  }
  .hero .emblem{
    display:inline-flex; align-items:center; justify-content:center;
    padding:8px 14px; border:2px solid rgba(245,247,251,0.7); border-radius:999px;
    gap:10px; background:rgba(245,247,251,0.08);
   flex-direction: column; align-items: center; justify-content: center; min-width: 260px; padding:14px 18px; border-radius:16px;}
  .hero .emblem .logo{ width:28px; height:28px; }
  .hero h1{
    margin:0; font-weight:900; letter-spacing:.03em;
    font-family: "Brush Script MT", "Segoe Script", "Lucida Handwriting", "Dancing Script", cursive;
    font-size: clamp(22px, 3.6vw, 34px);
   font-style: italic; text-shadow: 0 2px 0 rgba(0,0,0,0.35); text-align:center; 
}

.app{
    width:min(1100px, 98vw);
    margin:10px auto 18px;
    background: radial-gradient(1000px 600px at 20% 10%, #263466 0%, transparent 50%),
                radial-gradient(900px 600px at 85% 20%, #294a78 0%, transparent 60%),
                linear-gradient(180deg, #18203a, #151a2e 60%);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius:16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.06);
    overflow:hidden;
  }
  header{
    padding:14px 16px;
    display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.06);
    background: linear-gradient(180deg, rgba(123,220,255,0.08), rgba(123,220,255,0.0));
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .logo{ width:26px; height:26px; }
  .logo svg{ display:block; width:100%; height:100%; }
  header h2{ font-size:18px; margin:0; letter-spacing:.3px; color:#e9eefb; }
  .controls{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
  .control{
    background:rgba(23,26,43,0.9); border:1px solid rgba(255,255,255,0.08);
    padding:8px 10px; border-radius:10px; display:flex; align-items:center; gap:8px;
  }
  .control label{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }
  select{
    appearance:none; background:var(--black); color:var(--text);
    border:1px solid rgba(255,255,255,0.08); padding:8px 10px; border-radius:8px; font-size:14px; outline:none;
  }
  button{
    background:linear-gradient(180deg, var(--accent), #8ef6b3); color:#041014;
    border:none; border-radius:10px; padding:8px 12px; font-weight:700; letter-spacing:.3px;
    box-shadow: 0 6px 18px rgba(123,220,255,0.25); cursor:pointer;
  }
  main{ padding:12px; }
  .keyboard-wrap{
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border:1px solid rgba(255,255,255,0.06);
    padding:12px; border-radius:12px; position:relative;
  }

/* Clean legend */
  .legend{ 
    display:flex; flex-wrap:wrap; gap:14px; align-items:center; 
    background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
    padding:10px 12px; border-radius:12px; margin-bottom:10px;
  }
  .legend .sw{ display:flex; align-items:center; gap:8px; font-size:13px; color:#e9eefb; }
  .dot{ width:16px; height:16px; border-radius:4px; border:3px solid transparent; background:var(--core); }
  .dot.root{ background:var(--root); border-color:transparent; }
  .dot.core{ background:var(--core); border-color:transparent; }
  /* Display added note legend dot in purple instead of yellow */
  .dot.added{ background:var(--added); border-color:var(--added); }
  .dot.alter{ background:var(--core); border-color:var(--alter); }

.dot.sharp-outline{ background:transparent; border-color:#22d095; }
  .dot.flat-outline{  background:transparent; border-color:var(--navy); }
  .dot{ border-width:4px; }

.keyboard{
    position:relative; width:100%;
    height:36vh; max-height:250px; min-height:190px;
    user-select:none; touch-action:manipulation; overflow:hidden; margin-top:8px;
  }
  @media (orientation: landscape){
    .keyboard{ height:32vh; max-height:230px; }
  }
  .white-keys, .black-keys{
    position:absolute; left:0; right:0; bottom:0; top:0;
    display:flex; align-items:stretch; height:100%;
  }
  .white-keys{ gap:4px; padding:0 6px; }
  .key{
    position:relative; border-radius:0 0 8px 8px;
    display:flex; align-items:flex-end; justify-content:center;
    padding-bottom:18px; transition: all .12s ease; outline-offset:-2px;
  }
  /* 3D white: right shadow + left highlight */
  .key.white{
    flex:1;
    background: linear-gradient(180deg, #fafcff 0%, #f0f3f9 65%, #e5e9f4 100%);
    border:1px solid #cfd7e8;
    box-shadow:
      inset -4px 0 6px rgba(0,0,0,0.22),
      inset 2px 0 5px rgba(255,255,255,0.45),
      inset 0 1px 0 #fff,
      0 10px 20px rgba(0,0,0,0.35);
  }
  .key.black{
    position:absolute; height:62%; z-index:3;
    border:1px solid #0b0f1d;
    background: linear-gradient(180deg, #353b52 0%, #14192b 60%, #0b0f1d 100%);
    box-shadow:
      inset -3px 0 6px rgba(0,0,0,0.6),
      inset 2px 0 4px rgba(255,255,255,0.18),
      inset 0 1px 0 rgba(255,255,255,0.09),
      0 14px 26px rgba(0,0,0,0.65);
    border-radius:0 0 6px 6px;
  }
  /* Active fills overlay (covers ENTIRE key) */
  .fill{
    position:absolute; inset:0; border-radius:0 0 8px 8px; z-index:2;
    background:transparent; border:3px solid transparent;
  }
  .tone-active .fill{ background:var(--core); }
  .tone-root .fill{ background:var(--root); }
  .tone-added .fill{ background:var(--added); border-color:transparent; }
.tone-alter .fill{
    /* For altered notes (♭ or ♯) we only set the border colour. Leaving the background unset
       allows other classes like tone-added to control the fill colour. Core altered tones
       will still get the yellow fill via .tone-active .fill. */
    border-color: var(--alter);
}

/* Sharp/Flat outline classes */
  .tone-sharp .fill{ border-color:#22d095 !important; border-width:6px !important; }
  .tone-flat  .fill{ border-color:var(--navy) !important; border-width:6px !important; }

/* Make added and altered note outlines thicker for better visibility */
  .tone-added .fill,
  .tone-alter .fill{
    border-width:5px;
  }

/* Increase border visibility on scale map for added and altered degrees */
  .used.added .deg-cell{
    border-width:2px;
  }
  .used.alter .deg-cell{
    border-width:2px;
    box-shadow: inset 0 0 0 3px var(--alter);
  }

/* Precise accidental colours in Diatonic Scale grid */
  .used.alter.sharp .deg-cell { border-color: var(--alter) !important; box-shadow: inset 0 0 0 3px var(--alter) !important; }
  .used.alter.flat  .deg-cell { border-color: var(--navy)  !important; box-shadow: inset 0 0 0 3px var(--navy)  !important; }
  .used.added.alter.sharp .deg-cell { border-color: var(--alter) !important; box-shadow: inset 0 0 0 3px var(--alter) !important; }
  .used.added.alter.flat  .deg-cell { border-color: var(--navy)  !important; box-shadow: inset 0 0 0 3px var(--navy)  !important; }

/* labels */
  .label{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:6px; font-size:11px; line-height:1; text-align:center;
    color:#1a2034; font-weight:800; letter-spacing:.15px; z-index:4;
    white-space:nowrap; max-width:90%; overflow:hidden; text-overflow:ellipsis;
  }
  .label.black{ color:#f5f7fb; bottom:8px; white-space:normal; }
  .label.black .line{ display:block; line-height:1.05; }
  .degree-badge{
    position:absolute; left:50%; transform:translateX(-50%);
    bottom:26px; font-size:12px; font-weight:800; color:#0e1324; z-index:4;
    background:rgba(255,255,255,0.95); padding:2px 6px; border-radius:999px; border:1px solid rgba(0,0,0,0.15);
  }
  .key.black .degree-badge{ bottom:38px; }

/* Under-key diatonic degrees + arrows */
  .under-scale{
    position:relative; height:58px; margin-top:10px;
    border:1px dashed rgba(255,255,255,0.15); border-radius:10px;
    background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  }
  .badge{
    position:absolute; transform:translateX(-50%); bottom:6px;
    background:#1c2440; color:#eaf2ff; border:1px solid rgba(255,255,255,0.18);
    padding:3px 6px; border-radius:8px; font-weight:800; font-size:12px;
    box-shadow: 0 6px 12px rgba(0,0,0,0.35);
  }
  .arrow{
    position:absolute; width:2px; background:var(--arrow);
  }
  .arrow::before{
    content:""; position:absolute; top:-6px; left:-4px;
    border-left:5px solid transparent; border-right:5px solid transparent; border-bottom:6px solid var(--arrow);
  }

/* Sections */
  .section{ margin-top:12px; border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:12px; background:linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); }
  .title{ font-size:18px; font-weight:800; letter-spacing:.02em; margin:0 0 10px 0; }
  .scale-grid{ display:grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items:center; }
  .deg-cell, .note-cell{ justify-self:center; text-align:center; }
  .deg-cell{ font-size:14px; font-weight:800; color:#dfe7ff; padding:4px 8px; border-radius:10px; border:1px solid rgba(255,255,255,0.12); }
  .note-cell{ font-size:14px; color:#cfd7f7; }
  .used .deg-cell{ color:#0c1222; background:#ffffff; border-color:#ffffff; }
  .used.added .deg-cell{ background:var(--added); border-color:var(--added); color:#0d0d0d; }
  .used.core  .deg-cell{ background:var(--core); border-color:var(--core); color:#222; }
  .used.root  .deg-cell{ background:var(--root); border-color:var(--root); color:#fff; }
  .used.alter .deg-cell{ background:var(--core); border-color:var(--alter); color:#122; box-shadow: inset 0 0 0 2px var(--alter); }
  .used .note-cell{ color:#ffffff; font-weight:800; }
  .options-list{ display:flex; flex-wrap:wrap; gap:8px; }
  .pill{ padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,0.18); font-size:14px; color:#eef2ff; }
  .divider{ height:1px; background:rgba(255,255,255,0.06); margin:12px 0; }

.hero .subhead{margin-top:4px; font-style:italic; font-size:clamp(14px,2.4vw,18px); opacity:0.95; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; color:#f5f7fb; font-style: italic; font-weight: 600; opacity: 0.98; text-align:center; 
}

.key.tone-active:not(.tone-root) .label{ color:#000 !important; }

.subtext{ font-size:13px; color:#cfd7f7; opacity:0.95; margin:4px 0 10px 0; }

.controls button#play-scale, .controls button#clear-scale{ margin-left:auto; }
  .controls button#clear-scale{ margin-left:8px; }

.controls #relativeScale{ margin-left:6px; margin-right:6px; }
  .controls #clear-scale{ margin-left:6px; }
  .controls #play-scale{ margin-left:8px; }

/* === Banner header override (lightweight) === */
.hero{ padding: 10px 0 0; background: transparent; }
.hero .banner{
  width: min(1100px, 98vw);
  margin: 0 auto;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.45);
}
.hero .banner img{
  display: block;
  width: 100%;
  height: auto;
  /* Soft left/right fade for blending */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.app{ margin-top: 8px; }

/* Diatonic Chords layout to mirror Diatonic Scale */
#options-list.chords-grid { display:grid; grid-template-columns: repeat(8, 1fr); gap: 8px; align-items:stretch; }
#options-list.chords-grid .pill { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:6px 4px; border:1px solid rgba(207,215,232,0.8); border-radius:8px; background: var(--key); color: #0e1324; min-height:54px; }
#options-list.chords-grid .pill .roman { font-weight:700; letter-spacing:0.5px; }
#options-list.chords-grid .pill .note  { font-size:12px; opacity:0.85; margin-top:2px; text-align:center; }
</style>

/* Scoped accidental borders for Scales Trainer only */
#keyboard2 .key.tone-active.tone-alter.tone-flat  .fill { border-color: var(--navy)  !important; box-shadow: inset 0 0 0 3px var(--navy)  !important; }
#keyboard2 .key.tone-active.tone-alter.tone-sharp .fill { border-color: var(--alter) !important; box-shadow: inset 0 0 0 3px var(--alter) !important; }

</style>

// Names with true symbols
  const NAMES_SHARP = ["C","C♯","D","D♯","E","F","F♯","G","G♯","A","A♯","B"];
  const NAMES_FLAT  = ["C","D♭","D","E♭","E","F","G♭","G","A♭","A","B♭","B"];
  const IS_BLACK = [false,true,false,true,false,false,true,false,true,false,true,false];

// Spelling preferences by key (major/relative)
  const SHARP_KEYS = new Set(["G","D","A","E","B","F♯","C♯","C"]);
  const FLAT_KEYS  = new Set(["F","B♭","E♭","A♭","D♭","G♭","C♭"]);

// Populate root selects with single names for naturals, dual for accidentals
  const rootSel = document.getElementById("root");
  const srootSel = document.getElementById("sroot");
  for(let i=0;i<12;i++){
    const isBlack = IS_BLACK[i];
    const label = isBlack ? (NAMES_SHARP[i] + "/" + NAMES_FLAT[i]) : NAMES_SHARP[i];
    const opt = document.createElement("option"); opt.value = i; opt.textContent = label; if(i===0) opt.selected=true;
    rootSel.appendChild(opt);
    const opt2 = document.createElement("option"); opt2.value = i; opt2.textContent = label; if(i===0) opt2.selected=true;
    srootSel.appendChild(opt2);
  }

// Chord menu
  const qualitySel = document.getElementById("quality");
  const CHORD_LABELS = [
    ["Triads",[["maj","Major (maj)"],["min","Minor (min)"],["dim","Diminished (dim)"],["aug","Augmented (+)"],["sus2","Sus2"],["sus4","Sus4"],["add9","Add9"],["madd9","m(Add9)"],["6","6"],["m6","m6"]]],
    ["Sevenths",[["7","Dominant 7"],["maj7","Major 7"],["m7","Minor 7"],["m7b5","Half-diminished (m7♭5)"],["dim7","Diminished 7 (°7)"],["aug7","Augmented 7 (+7)"],["7b5","7♭5"],["7#5","7♯5"],["7b9","7♭9"],["7#9","7♯9"]]],
    ["Extensions",[["9","9"],["m9","m9"],["maj9","maj9"],["11","11"],["m11","m11"],["maj11","maj11"],["13","13"],["m13","m13"],["maj13","maj13"]]]
  ];
  CHORD_LABELS.forEach(([label,items])=>{
    const og = document.createElement("optgroup"); og.label=label;
    items.forEach(([val,txt])=>{ const o=document.createElement("option"); o.value=val; o.textContent=txt; og.appendChild(o); });
    qualitySel.appendChild(og);
  });

const CHORDS = {
    maj:     { iv:[0,4,7],               deg:["1","3","5"] },
    min:     { iv:[0,3,7],               deg:["1","b3","5"] },
    dim:     { iv:[0,3,6],               deg:["1","b3","b5"] },
    aug:     { iv:[0,4,8],               deg:["1","3","#5"] },
    sus2:    { iv:[0,2,7],               deg:["1","2","5"] },
    sus4:    { iv:[0,5,7],               deg:["1","4","5"] },
    add9:    { iv:[0,4,7,14],            deg:["1","3","5","9"] },
    madd9:   { iv:[0,3,7,14],            deg:["1","b3","5","9"] },
    "6":     { iv:[0,4,7,9],             deg:["1","3","5","6"] },
    m6:      { iv:[0,3,7,9],             deg:["1","b3","5","6"] },
    "7":     { iv:[0,4,7,10],            deg:["1","3","5","b7"] },
    maj7:    { iv:[0,4,7,11],            deg:["1","3","5","7"] },
    m7:      { iv:[0,3,7,10],            deg:["1","b3","5","b7"] },
    m7b5:    { iv:[0,3,6,10],            deg:["1","b3","b5","b7"] },
    dim7:    { iv:[0,3,6,9],             deg:["1","b3","b5","bb7"] },
    aug7:    { iv:[0,4,8,10],            deg:["1","3","#5","b7"] },
    "7b5":   { iv:[0,4,6,10],            deg:["1","3","b5","b7"] },
    "7#5":   { iv:[0,4,8,10],            deg:["1","3","#5","b7"] },
    "7b9":   { iv:[0,4,7,10,13],         deg:["1","3","5","b7","b9"] },
    "7#9":   { iv:[0,4,7,10,15],         deg:["1","3","5","b7","#9"] },
    "9":     { iv:[0,4,7,10,14],         deg:["1","3","5","b7","9"] },
    m9:      { iv:[0,3,7,10,14],         deg:["1","b3","5","b7","9"] },
    maj9:    { iv:[0,4,7,11,14],         deg:["1","3","5","7","9"] },
    "11":    { iv:[0,4,7,10,14,17],      deg:["1","3","5","b7","9","11"] },
    m11:     { iv:[0,3,7,10,14,17],      deg:["1","b3","5","b7","9","11"] },
    maj11:   { iv:[0,4,7,11,14,17],      deg:["1","3","5","7","9","11"] },
    "13":    { iv:[0,4,7,10,14,17,21],   deg:["1","3","5","b7","9","11","13"] },
    m13:     { iv:[0,3,7,10,14,17,21],   deg:["1","b3","5","b7","9","11","13"] },
    maj13:   { iv:[0,4,7,11,14,17,21],   deg:["1","3","5","7","9","11","13"] },
  };

function prettyDegree(deg){ return deg.replace(/b/g,"♭").replace(/#/g,"♯"); }

// Build keyboards
  function buildKeyboard(rootEl){
    const whiteLayer = rootEl.querySelector(".white-keys");
    const blackLayer = rootEl.querySelector(".black-keys");
    const keys = [], whites=[], blacks=[];
    for(let i=0;i<TOTAL_NOTES;i++){
      const pc = (START_PC + i) % 12;
      const isBlack = IS_BLACK[pc];
      const el = document.createElement("div");
      el.className = "key " + (isBlack ? "black" : "white");
      el.dataset.index = i;
      el.dataset.pc = pc;
      const fill = document.createElement("div"); fill.className="fill"; el.appendChild(fill);
      const label = document.createElement("div");
      label.className = "label " + (isBlack ? "black":"white");
      if(isBlack){
        label.innerHTML = '<span class="line">'+NAMES_SHARP[pc]+'</span><span class="line">'+NAMES_FLAT[pc]+'</span>';
      }else{
        label.textContent = NAMES_SHARP[pc];
      }
      el.appendChild(label);
      (isBlack?blackLayer:whiteLayer).appendChild(el);
      (isBlack?blacks:whites).push(el);
      keys.push(el);
    }
    return {rootEl, whiteLayer, blackLayer, keys, whites, blacks};
  }
  const kb1 = buildKeyboard(document.getElementById("keyboard"));
  const kb2 = buildKeyboard(document.getElementById("keyboard2"));

// Layout black keys precisely
  function layoutBlackKeysPrecise(kb){
    const whites = kb.whites;
    if(!whites.length) return;
    const containerRect = kb.whiteLayer.getBoundingClientRect();
    const rects = whites.map(el => el.getBoundingClientRect());
    const whiteWidth = rects[0].width; if(whiteWidth<2){ requestAnimationFrame(()=>layoutBlackKeysPrecise(kb)); return; }
    const blackWidth = whiteWidth * 0.6;
    kb.blacks.forEach(bk=>{
      const abs = Number(bk.dataset.index);
      let whitesUpTo = 0;
      for(let i=0;i<=abs;i++){ const pc = (START_PC + i) % 12; if(!IS_BLACK[pc]) whitesUpTo++; }
      const prevIdx = Math.max(0, whitesUpTo - 1);
      const nextIdx = Math.min(rects.length - 1, prevIdx + 1);
      const prev = rects[prevIdx], next = rects[nextIdx];
      const prevRight = prev.right - containerRect.left;
      const nextLeft  = next.left  - containerRect.left;
      const mid = (prevRight + nextLeft)/2;
      bk.style.width = blackWidth + "px";
      bk.style.left = (mid - blackWidth/2) + "px";
    });
  }
  function relayoutAll(){
    layoutBlackKeysPrecise(kb1);
    layoutBlackKeysPrecise(kb2);
    layoutUnderScale();
  }
  window.addEventListener("resize", relayoutAll);
  window.addEventListener("orientationchange", ()=> setTimeout(relayoutAll, 120));
  document.addEventListener("visibilitychange", ()=> { if(!document.hidden) setTimeout(relayoutAll, 90); });
  window.addEventListener("load", ()=> setTimeout(relayoutAll, 120));
  setTimeout(relayoutAll, 160);

// Degree-to-semitone
  function degToSemi(deg){
    switch(deg){
      case "1": return 0; case "b2": return 1; case "2": return 2; case "b3": return 3; case "3": return 4;
      case "4": return 5; case "b5": return 6; case "5": return 7; case "#5": return 8; case "b6": return 8;
      case "6": return 9; case "b7": return 10; case "7": return 11; case "8": return 12;
      case "b9": return 13; case "9": return 14; case "#9": return 15; case "10": return 16;
      case "11": return 17; case "#11": return 18; case "12": return 19; case "b13": return 20; case "13": return 21;
      default: return null;
    }
  }

// Classification rules
  
function classifyTone(deg, quality){
  // Root stays root
  if (deg === "1") return { root: true, alter: false, added: false, acc: null };

// Determine accidental and base degree (strip b/#)
  const acc = deg.startsWith("b") ? "flat" : (deg.startsWith("#") ? "sharp" : null);
  const base = deg.replace(/[b#]/g, "");

// Which degrees count as "added" (extensions) regardless of accidental
  // Include "7" so sevenths (dominant, major and minor) are treated as extensions and coloured purple
  const addedBases = new Set(["2","4","6","7","9","11","13"]);
  const isAddQuality = quality.includes("add") || quality.startsWith("sus");
  const added = addedBases.has(base) || isAddQuality;

// Any b/# means it's altered for outline purposes
  const altered = acc !== null;

return { root: false, alter: altered, added, acc };
}

// Scale Map (major vs natural minor)
  const scaleDeg = document.getElementById("scale-deg");
  const scaleNotes = document.getElementById("scale-notes");
  function buildScaleMap(rootPc, useMinor, used){
    const majorSteps = [0,2,4,5,7,9,11,12];
    const minorSteps = [0,2,3,5,7,8,10,12];
    const steps = useMinor ? minorSteps : majorSteps;
    const degLabelsMajor = ["1","2","3","4","5","6","7","8"];
    const degLabelsMinor = ["1","2","♭3","4","5","♭6","♭7","8"];
    const labels = useMinor ? degLabelsMinor : degLabelsMajor;
    const preferSharp = preferSharps(rootPc, useMinor);
    scaleDeg.innerHTML = ""; scaleNotes.innerHTML = "";
    for(let i=0;i<8;i++){
      const s = steps[i];
      const pc = (rootPc + s) % 12;
      const usedInfo = used.find(u=>u.semi===s);
      const wrapDeg = document.createElement("div");
      wrapDeg.className = "deg-wrap" + (usedInfo? " used " + usedInfo.kind : "");
      const degCell = document.createElement("div");
      degCell.className = "deg-cell";
      degCell.textContent = labels[i];
      wrapDeg.appendChild(degCell);
      scaleDeg.appendChild(wrapDeg);

const noteWrap = document.createElement("div");
      noteWrap.className = usedInfo? "used" : "";
      const noteCell = document.createElement("div");
      noteCell.className = "note-cell";
      noteCell.textContent = nameForPc(pc, preferSharp);
      noteWrap.appendChild(noteCell);
      scaleNotes.appendChild(noteWrap);
    }
  }

// Under-key scale badges with arrows; 1..8 single octave
  const underScale = document.getElementById("under-scale");
  function layoutUnderScale(){
    underScale.querySelectorAll(".badge, .arrow").forEach(b=>b.remove());
    const rootPc = Number(rootSel.value);
    const quality = qualitySel.value;
    const useMinor = CHORDS[quality].deg.includes("b3");
    // first visible root
    let rootAbs=0; for(let i=0;i<TOTAL_NOTES;i++){ if(((START_PC+i)%12)===rootPc){ rootAbs=i; break; } }
    const steps = useMinor ? [0,2,3,5,7,8,10,12] : [0,2,4,5,7,9,11,12];
    const labels = useMinor ? ["1","2","♭3","4","5","♭6","♭7","8"] : ["1","2","3","4","5","6","7","8"];
    const usRect = underScale.getBoundingClientRect();
    const kbRect = kb1.rootEl.getBoundingClientRect();
    for(let i=0;i<steps.length;i++){
      const abs = rootAbs + steps[i];
      if(abs<0 || abs>=TOTAL_NOTES) continue;
      const keyEl = kb1.keys[abs];
      const r = keyEl.getBoundingClientRect();
      const xCenter = r.left + r.width/2 - usRect.left;
      const badge = document.createElement("div");
      badge.className = "badge";
      badge.style.left = xCenter + "px";
      badge.textContent = labels[i];
      underScale.appendChild(badge);
      // arrow from top of under-scale to bottom of keyboard
      const arrow = document.createElement("div");
      arrow.className = "arrow";
      arrow.style.left = (xCenter - 1) + "px";
      arrow.style.top = "0px";
      arrow.style.height = (usRect.height - 22) + "px";
      underScale.appendChild(arrow);
    }
  }

// Chord Options (diatonic triads; compact labels Am, Bdim etc., with correct enharmonic)
  const optionsList = document.getElementById("options-list");
  
function buildChordOptions(rootPc, useMinor){
    optionsList.innerHTML = "";
    optionsList.classList.add("chords-grid"); // make grid like Diatonic Scale
    const majorQual = ["maj","min","min","maj","maj","min","dim"];
    const minorQual = ["min","dim","maj","min","min","maj","maj"];
    const steps = useMinor ? [0,2,3,5,7,8,10] : [0,2,4,5,7,9,11];
    const quals = useMinor ? minorQual : majorQual;
    const preferSharp = preferSharps(rootPc, useMinor);
    const romans = ["I","II","III","IV","V","VI","VII"];
    function numeral(i, q){
      if (q==="maj") return romans[i];
      if (q==="min") return romans[i].toLowerCase();
      if (q==="dim") return romans[i].toLowerCase() + "°";
      return romans[i];
    }
    // Build 7 core degrees
    const items = [];
    for(let i=0;i<7;i++){
      const pc = (rootPc + steps[i]) % 12;
      const name = nameForPc(pc, preferSharp);
      const suffix = (quals[i]==="maj"?"":(quals[i]==="min"?"m":"dim"));
      const pill = document.createElement("div");
      pill.className = "pill";
      pill.dataset.step = String(steps[i]);
      pill.dataset.order = String(i);
      pill.dataset.quality = quals[i];
// inner two lines
      const r = document.createElement("div");
      r.className = "roman";
      r.textContent = numeral(i, quals[i]);
      const n = document.createElement("div");
      n.className = "note";
      n.textContent = name + suffix;
      pill.appendChild(r);
      pill.appendChild(n);
      items.push(pill);
    }
    // Add the octave (degree 8) mirroring the first chord
    const first = items[0].cloneNode(true);
    first.dataset.step = "12"; // one octave up
    first.dataset.order = "7";
    first.dataset.quality = quals[0];
    // Roman for octave should mirror degree 1
    first.querySelector(".roman").textContent = numeral(0, quals[0]);
    optionsList.append(...items, first);
  }

// Render chord on keyboard 1
  function clearHighlights(kb){
    kb.keys.forEach(k=>{
      // Remove any previous tone-classes so they don't persist when switching chords
      k.classList.remove(
        "tone-root",
        "tone-active",
        "tone-added",
        "tone-alter",
        "tone-flat",
        "tone-sharp"
      );
      const old = k.querySelector(".degree-badge");
      if(old) old.remove();
    });
  }
  function setLitChord(rootPc, quality){
    clearHighlights(kb1);
    const spec = CHORDS[quality]; if(!spec) return;
    let rootAbs = null;
    const maxSemi = Math.max(...spec.iv);
    for(let i=0;i<TOTAL_NOTES;i++){
      const absPc = (START_PC + i) % 12;
      if(absPc !== rootPc) continue;
      if(i + maxSemi <= TOTAL_NOTES - 1){ rootAbs = i; break; }
    }
    if(rootAbs===null){ rootAbs = 0; }
    const absList = spec.iv.map(semi => rootAbs + semi).filter(a => a>=0 && a<TOTAL_NOTES);
    const useMinor = spec.deg.includes("b3");
    const usedForScale = [];
    absList.forEach((abs,i)=>{
      const el = kb1.keys[abs]; if(!el) return;
      const pc = (START_PC + abs) % 12;
      const deg = spec.deg[i];
      const cls = classifyTone(deg, quality);
      el.classList.add("tone-active");
      if(cls.root) el.classList.add("tone-root");
      if (cls.alter) el.classList.add("tone-alter");
      if (cls.added) el.classList.add("tone-added");
      if (/^#/.test(deg)) el.classList.add("tone-sharp");
      if (/^b/.test(deg)) el.classList.add("tone-flat");
      const badge = document.createElement("div");
      badge.className = "degree-badge";
      badge.textContent = prettyDegree(deg);
      el.appendChild(badge);
      const s = (degToSemi(deg) ?? 0);
let kind = "core";
      if(cls.root) kind = "root";
      else if(cls.added) kind = "added";
      else if(cls.alter) kind = "alter";
      const acc = /^#/.test(deg) ? "sharp" : (/^b/.test(deg) ? "flat" : null);
      usedForScale.push({semi: s % 24, kind, acc});
    });
    buildScaleMap(rootPc, useMinor, usedForScale);
    buildChordOptions(rootPc, useMinor);
    layoutUnderScale();
  }

document.getElementById("clear").addEventListener("click", ()=>{ clearHighlights(kb1); layoutUnderScale(); });
  rootSel.addEventListener("change", ()=> setLitChord(Number(rootSel.value), qualitySel.value));
  qualitySel.addEventListener("change", ()=> setLitChord(Number(rootSel.value), qualitySel.value));

// ---------- Scales Trainer ----------
  const STYLES = {
    maj:     { steps:[0,2,4,5,7,9,11,12], labels:["1","2","3","4","5","6","7","8"] },
    natmin:  { steps:[0,2,3,5,7,8,10,12], labels:["1","2","♭3","4","5","♭6","♭7","8"] },
    harmmin: { steps:[0,2,3,5,7,8,11,12], labels:["1","2","♭3","4","5","♭6","7","8"] },
    melmin:  { steps:[0,2,3,5,7,9,11,12], labels:["1","2","♭3","4","5","6","7","8"] },
    majpent: { steps:[0,2,4,7,9,12],      labels:["1","2","3","5","6","8"] },
    minpent: { steps:[0,3,5,7,10,12],     labels:["1","♭3","4","5","♭7","8"] },
    blues:   { steps:[0,3,5,6,7,10,12],   labels:["1","♭3","4","♭5","5","♭7","8"] },
  };

// ---------- WebAudio: Click-to-sound ----------
  let audioCtx = null;
  function ensureAudio(){
    if(!audioCtx){
      audioCtx = new (window.AudioContext || window.webkitAudioContext)();
    }
    if(audioCtx.state === "suspended"){ audioCtx.resume(); }
  }
  function midiToFreq(m){ return 440 * Math.pow(2, (m - 69) / 12); }
  function playNote(midi, when=0, dur=0.45){
    ensureAudio();
    const t0 = audioCtx.currentTime + when;
    const freq = midiToFreq(midi);
    const master = audioCtx.createGain(); master.gain.value = 0.0; master.connect(audioCtx.destination);
    const o1 = audioCtx.createOscillator(); o1.type="triangle"; o1.frequency.value=freq;
    const o2 = audioCtx.createOscillator(); o2.type="sine"; o2.frequency.value=freq*2;
    const g1 = audioCtx.createGain(), g2 = audioCtx.createGain();
    g1.gain.value = 0.8; g2.gain.value = 0.2;
    const lp = audioCtx.createBiquadFilter(); lp.type="lowpass"; lp.frequency.value = 6000; lp.Q.value = 0.4;
    o1.connect(g1); o2.connect(g2); g1.connect(lp); g2.connect(lp); lp.connect(master);
    const A=0.008, D=0.18, S=0.0001, R=Math.max(0.18, dur-0.22);
    master.gain.setValueAtTime(0.0001, t0);
    master.gain.linearRampToValueAtTime(0.55, t0+A);
    master.gain.exponentialRampToValueAtTime(0.12, t0+A+D);
    master.gain.linearRampToValueAtTime(S, t0+dur);
    master.gain.linearRampToValueAtTime(0.0001, t0+dur+R);
    o1.start(t0); o2.start(t0);
    o1.stop(t0+dur+R+0.02); o2.stop(t0+dur+R+0.02);
}
function playFreq(freq){
    ensureAudio();
    const t0 = audioCtx.currentTime;
    const master = audioCtx.createGain(); master.gain.value = 0.0; master.connect(audioCtx.destination);
    // Piano-ish: triangle + sine partials through gentle lowpass
    const o1 = audioCtx.createOscillator(); o1.type="triangle"; o1.frequency.value=freq;
    const o2 = audioCtx.createOscillator(); o2.type="sine"; o2.frequency.value=freq*2; // 2nd harmonic
    const g1 = audioCtx.createGain(), g2 = audioCtx.createGain();
    g1.gain.value = 0.8; g2.gain.value = 0.2;
    const lp = audioCtx.createBiquadFilter(); lp.type="lowpass"; lp.frequency.value = 6000; lp.Q.value = 0.4;
    o1.connect(g1); o2.connect(g2); g1.connect(lp); g2.connect(lp); lp.connect(master);
    // ADSR envelope
    const A=0.002, D=0.23, S=0.0001, R=0.35;
    master.gain.cancelScheduledValues(t0);
    master.gain.setValueAtTime(0.0001, t0);
    master.gain.linearRampToValueAtTime(0.6, t0+A);
    master.gain.exponentialRampToValueAtTime(0.12, t0+A+D);
    master.gain.linearRampToValueAtTime(S, t0+A+D+0.25);
    master.gain.linearRampToValueAtTime(0.0001, t0+A+D+0.25+R);
    o1.start(t0); o2.start(t0);
    o1.stop(t0+A+D+0.25+R+0.02); o2.stop(t0+A+D+0.25+R+0.02);
  }
  function attachKeyAudio(kb){
    kb.keys.forEach((el, i)=>{
      el.addEventListener("pointerdown", (e)=>{
        const midi = MIDI_START + i;
        const freq = midiToFreq(midi);
        playFreq(freq);
      }, {passive:true});
    });
  }
  attachKeyAudio(kb1);
  attachKeyAudio(kb2);

// Init after layout
  setTimeout(()=>{
    layoutBlackKeysPrecise(kb1);
    layoutBlackKeysPrecise(kb2);
    qualitySel.value = "maj";
    setLitChord(Number(rootSel.value), qualitySel.value);
    setLitScale(Number(srootSel.value), "maj");
  }, 180);

setTimeout(updateRelativeLabel, 50);
function playChord(rootPc, quality){
  ensureAudio();
  const spec = CHORDS[quality]; if(!spec) return;
  let rootAbs = null;
  const maxSemi = Math.max(...spec.iv);
  for(let i=0;i<TOTAL_NOTES;i++){
    const absPc = (START_PC + i) % 12;
    if(absPc !== rootPc) continue;
    if(i + maxSemi <= TOTAL_NOTES - 1){ rootAbs = i; break; }

// Play a diatonic chord anchored to the current key's first visible root
function playDiatonicChord(rootPcKey, degreeStep, quality){
  ensureAudio();
  const spec = CHORDS[quality]; if(!spec) return;
  // Find the first visible instance of the KEY root within the keyboard
  let keyRootAbs = 0;
  for(let i=0;i<TOTAL_NOTES;i++){
    if(((START_PC + i) % 12) === rootPcKey){ keyRootAbs = i; break; }
  }
  const chordRootAbs = keyRootAbs + (Number(degreeStep)||0);
  const absList = spec.iv.map(semi => chordRootAbs + semi).filter(a => a>=0 && a<TOTAL_NOTES);
  const baseWhen = 0;
  const spread = 0.015;
  absList.forEach((abs, idx)=>{
    const midi = MIDI_START + abs;
    playNote(midi, baseWhen + idx*spread, 0.7);
  });
}
  }
  if(rootAbs===null){ rootAbs = 0; }
  const absList = spec.iv.map(semi => rootAbs + semi).filter(a => a>=0 && a<TOTAL_NOTES);
  // Play all notes together (slight spread)
  const baseWhen = 0;
  const spread = 0.015; // tiny stagger for realism
  absList.forEach((abs, idx)=>{
    const midi = 57 + abs;
    playNote(midi, baseWhen + idx*spread, 0.7);
  });
}

// Play chord melodically (ascending)
function playChordMelodic(rootPc, quality){
  ensureAudio();
  const spec = CHORDS[quality]; if(!spec) return;
  // Determine an absolute root index that fits all chord tones within the keyboard range
  let rootAbs = null;
  const maxSemi = Math.max(...spec.iv);
  for(let i=0;i<TOTAL_NOTES;i++){
    const absPc = (START_PC + i) % 12;
    if(absPc !== rootPc) continue;
    if(i + maxSemi <= TOTAL_NOTES - 1){ rootAbs = i; break; }
  }
  if(rootAbs === null){ rootAbs = 0; }
  // Map semitone offsets to absolute keyboard positions
  const absList = spec.iv.map(semi => rootAbs + semi).filter(a => a>=0 && a < TOTAL_NOTES);
  // Play notes one after another
  const noteDur = 0.35;
  const gap = 0.05;
  absList.forEach((abs, idx) => {
    const midi = 57 + abs;
    const when = idx * (noteDur + gap);
    playNote(midi, when, noteDur);
  });
}

;(() => {
  function computeRelativeMinorFromRoot(rootPc){
    // relative minor = major down a minor third (+9 semitones)
    const relPc = (rootPc + 9) % 12;
    const prefer = preferSharps(rootPc, false); // use major key preference for spelling
    return nameForPc(relPc, prefer) + "m";
  }
  function safeUpdateRelativeBox(){
    try{
      const sroot = document.getElementById('sroot');
      const valEl = document.getElementById('relMinorVal');
      const labEl = document.querySelector('#relMinor label');
      if(!sroot || !valEl || !labEl) return;
      const rootPc = Number(sroot.value);
      labEl.textContent = "Relative minor";
      valEl.textContent = computeRelativeMinorFromRoot(rootPc);
    }catch(e){ /* no-op to avoid breaking the app */ }
  }
  // Attach exactly once
  const srootEl = document.getElementById('sroot');
  if (srootEl && !srootEl.__relHooked){
    srootEl.addEventListener('change', safeUpdateRelativeBox, {passive:true});
    srootEl.__relHooked = true;
  }
  // Initial fill after the rest of the UI sets up
  if (document.readyState === "complete") {
    setTimeout(safeUpdateRelativeBox, 120);
  } else {
    window.addEventListener('load', () => setTimeout(safeUpdateRelativeBox, 120), {once:true});
  }
})();
/* === Safe overrides: scale profile + 1..8 mapping for arrows & map === */
(function(){
  // If these already exist from previous patches, don't double-attach.
  if (window.__scaleProfileOverridesApplied) return;
  window.__scaleProfileOverridesApplied = true;

function scaleProfileForChord(quality){
    const minorLike = new Set(["min","m6","m7","m9","m11","m13"]);
    const locrianLike = new Set(["dim","m7b5","dim7"]);
    if (locrianLike.has(quality)) return "locrian";
    if (minorLike.has(quality)) return "minor";
    return "major";
  }

const SCALE_PROFILES = {
    major:  { steps:[0,2,4,5,7,9,11,12], labels:["1","2","3","4","5","6","7","8"] },
    minor:  { steps:[0,2,3,5,7,8,10,12], labels:["1","2","♭3","4","5","♭6","♭7","8"] },
    locrian:{ steps:[0,1,3,5,6,8,10,12], labels:["1","♭2","♭3","4","♭5","♭6","♭7","8"] },
  };

// Preserve original references if needed
  const _preferSharps = typeof preferSharps === "function" ? preferSharps : ()=>true;
  const _nameForPc = typeof nameForPc === "function" ? nameForPc : ()=>"";

// Replace buildScaleMap with profile-aware version
  window.buildScaleMap = function(rootPc, useMinorIgnored, used){
    const qualitySelEl = document.getElementById("quality");
    const quality = qualitySelEl ? qualitySelEl.value : "maj";
    const profileKey = scaleProfileForChord(quality);
    const profile = SCALE_PROFILES[profileKey] || SCALE_PROFILES.major;
    const steps = profile.steps.slice(0,8);
    const labels = profile.labels.slice(0,8);
    const preferSharp = _preferSharps(rootPc, profileKey === "minor");
    const scaleDeg = document.getElementById("scale-deg");
    const scaleNotes = document.getElementById("scale-notes");
    if (!scaleDeg || !scaleNotes) return;
    scaleDeg.innerHTML = ""; scaleNotes.innerHTML = "";
    for(let i=0;i<8;i++){
      const s = steps[i];
      const pc = (rootPc + s) % 12;
      const usedInfo = (used || []).find(u=>u.semi===s);
let wrapClass = "deg-wrap";
    if (usedInfo) {
      wrapClass += " used " + usedInfo.kind;
      if (usedInfo.acc) wrapClass += " " + usedInfo.acc; // add 'flat' or 'sharp' for styling
    }
    const wrapDeg = document.createElement("div");
    wrapDeg.className = wrapClass;
    const degCell = document.createElement("div");
      degCell.className = "deg-cell";
      degCell.textContent = labels[i];
      wrapDeg.appendChild(degCell);
      scaleDeg.appendChild(wrapDeg);

const noteWrap = document.createElement("div");
      noteWrap.className = usedInfo? "used" : "";
      const noteCell = document.createElement("div");
      noteCell.className = "note-cell";
      noteCell.textContent = _nameForPc(pc, preferSharp);
      noteWrap.appendChild(noteCell);
      scaleNotes.appendChild(noteWrap);
    }
  };

// Replace layoutUnderScale with profile-aware arrows
  window.layoutUnderScale = function(){
    const underScale = document.getElementById("under-scale");
    if (!underScale || !window.kb1) return;
    // Defer to ensure all key positions are laid out
    requestAnimationFrame(()=>{
      underScale.querySelectorAll(".badge, .arrow").forEach(b=>b.remove());
      const rootSelEl = document.getElementById("root");
      const qualitySelEl = document.getElementById("quality");
      if (!rootSelEl || !qualitySelEl) return;

const rootPc = Number(rootSelEl.value);
      const quality = qualitySelEl.value;
      const profileKey = scaleProfileForChord(quality);
      const profile = SCALE_PROFILES[profileKey] || SCALE_PROFILES.major;

// first visible root within keyboard range
      let rootAbs = 0;
      for (let i=0;i<TOTAL_NOTES;i++){
        if (((START_PC + i) % 12) === rootPc){ rootAbs=i; break; }
      }

const steps = profile.steps.slice(0,8);
      const labels = profile.labels.slice(0,8);
      const usRect = underScale.getBoundingClientRect();

for (let i=0;i<steps.length;i++){
        const abs = rootAbs + steps[i];
        if (abs < 0 || abs >= TOTAL_NOTES) continue;
        const keyEl = kb1.keys[abs];
        if (!keyEl) continue;
        const r = keyEl.getBoundingClientRect();
        const xCenter = r.left + r.width/2 - usRect.left;

const badge = document.createElement("div");
        badge.className = "badge";
        badge.style.left = xCenter + "px";
        badge.textContent = labels[i];
        underScale.appendChild(badge);

const arrow = document.createElement("div");
        arrow.className = "arrow";
        arrow.style.left = (xCenter - 1) + "px";
        arrow.style.top = "0px";
        arrow.style.height = (usRect.height - 22) + "px";
        underScale.appendChild(arrow);
      }
    });
  };

// Force initial render and keep in sync
  try {
    window.addEventListener("load", function(){ setTimeout(window.layoutUnderScale, 200); });
    const _root = document.getElementById("root");
    const _quality = document.getElementById("quality");
    if (_root)   _root.addEventListener("change", window.layoutUnderScale);
    if (_quality) _quality.addEventListener("change", window.layoutUnderScale);
    window.addEventListener("resize", ()=> setTimeout(window.layoutUnderScale, 120));
    window.addEventListener("orientationchange", ()=> setTimeout(window.layoutUnderScale, 160));
  } catch(e) { /* no-op */ }
})();

</script>

<script id="options-click-fix">
// This override attaches click handlers to the diatonic chord option pills
// so that selecting a pill updates the root and chord quality selectors.
(function(){
  if (window.__optionsClickFixApplied) return;
  window.__optionsClickFixApplied = true;
  function attachOptionsHandlers(){
    try{
      const list = document.getElementById('options-list');
      const rootSel = document.getElementById('root');
      const qualitySel = document.getElementById('quality');
      if (!list || !rootSel || !qualitySel) return;
      // Build mapping from note names (both sharp and flat) to pitch class numbers
      const nameToPc = {};
      if (window.NAMES_SHARP && window.NAMES_FLAT){
        for (let i=0; i<12; i++){
          nameToPc[NAMES_SHARP[i]] = i;
          nameToPc[NAMES_FLAT[i]]  = i;
        }
      }
      list.querySelectorAll('.pill').forEach((pill) => {
        // Avoid binding multiple times
        if (pill.__hasOptionsClick) return;
        pill.__hasOptionsClick = true;
        pill.style.cursor = 'pointer';
        pill.addEventListener('click', function(){
          try{
            // The pill may contain a roman numeral element; take the first token of its text as the chord name
            const txtEl = this.querySelector('.note');
            const txt = (txtEl ? txtEl.textContent : this.textContent)
              .trim().split(/\s+/)[0];
            // Determine the root name by matching the longest prefix in our mapping
            let match = null;
            Object.keys(nameToPc).forEach((key) => {
              if (txt.startsWith(key) && (!match || key.length > match.length)){
                match = key;
              }
            });
            if (!match) return;
            const pc = nameToPc[match];
            // Determine quality: suffix after root (e.g. 'm', 'dim', or empty for major)
            const suffix = txt.slice(match.length);
            let qual = 'maj';
            if (/^dim$/i.test(suffix)) qual = 'dim';
            else if (/^m$/i.test(suffix)) qual = 'min';
            // Update selects and redraw chord
            rootSel.value = String(pc);
            qualitySel.value = qual;
            if (typeof window.setLitChord === 'function'){
              window.setLitChord(pc, qual);
            }
          }catch(e){ /* swallow errors */ }
        });
      });
    }catch(e){ /* swallow errors */ }
  }
  function observeList(){
    const list = document.getElementById('options-list');
    if (!list || typeof MutationObserver === 'undefined') return;
    new MutationObserver(() => { attachOptionsHandlers(); }).observe(list, { childList: true });
  }
  if (document.readyState === 'complete' || document.readyState === 'interactive'){
    attachOptionsHandlers(); observeList();
  } else {
    document.addEventListener('DOMContentLoaded', function(){ attachOptionsHandlers(); observeList(); });
  }
})();
</script>

<script id="scale-audio-clear-fix">
(function(){
  // Prevent multiple audio sequences on Play Scale and ensure Clear resets selections
  if (window.__scaleAudioClearFixApplied) return;
  window.__scaleAudioClearFixApplied = true;
  const playBtn  = document.getElementById('play-scale');
  const clearBtn = document.getElementById('clear-scale');
  const srootSel = document.getElementById('sroot');
  const stypeSel = document.getElementById('stype');
  // Intercept Play click in capturing phase to stop other listeners firing
  if (playBtn && srootSel && stypeSel){
    playBtn.addEventListener('click', function(ev){
      // Stop all existing click handlers on this button from executing
      ev.stopImmediatePropagation();
      ev.preventDefault();
      try{
        if (typeof window.playScale === 'function'){
          const rootPc = Number(srootSel.value);
          const stype  = stypeSel.value;
          window.playScale(rootPc, stype);
        }
      }catch(e){ /* swallow errors */ }
    }, true);
  }
  // Override Clear button to reset highlights and selections
  if (clearBtn){
    clearBtn.addEventListener('click', function(ev){
      ev.stopImmediatePropagation();
      ev.preventDefault();
      try{
        // Clear highlights on the second keyboard manually since kb2 isn't globally exposed
        const keyEls = document.querySelectorAll('#keyboard2 .tone-root, #keyboard2 .tone-active, #keyboard2 .tone-added, #keyboard2 .tone-alter');
        keyEls.forEach(el => el.classList.remove('tone-root','tone-active','tone-added','tone-alter'));
        const badgeEls = document.querySelectorAll('#keyboard2 .degree-badge');
        badgeEls.forEach(el => el.remove());
      }catch(e){}
      // Reset dropdowns to no selection (selectedIndex = -1 yields no option selected)
      if (srootSel) srootSel.selectedIndex = -1;
      if (stypeSel) stypeSel.selectedIndex = -1;
      // Update relative label to dash
      const relVal = document.getElementById('relMinorVal');
      if (relVal) relVal.textContent = '—';
      // Mark cleared so highlight functions suppress future draws until user selects again
      window.__scaleCleared = true;
    }, true);
  }
})();
</script>

<script id="scales-audio-fix">
(function(){
  if (window.__scalesAudioFixApplied) return;
  window.__scalesAudioFixApplied = true;
  function setupPlayScaleFix(){
    try{
      const btn = document.getElementById('play-scale');
      const srootEl = document.getElementById('sroot');
      const stypeEl = document.getElementById('stype');
      if (!btn || !srootEl || !stypeEl || typeof window.playNote !== 'function' || !window.STYLES) return;
      // Clone the button to strip previous click listeners
      const clone = btn.cloneNode(true);
      btn.parentNode.replaceChild(clone, btn);
      clone.addEventListener('click', function(){
        try{
          const rootPc = Number(srootEl.value);
          const stype  = stypeEl.value || 'maj';
          const info = window.STYLES[stype];
          if (!info || !Array.isArray(info.steps)) return;
          // Compute absolute positions in keyboard for ascending scale
          let rootAbs = 0;
          for (let i=0; i<window.TOTAL_NOTES; i++){
            if (((window.START_PC + i) % 12) === rootPc){ rootAbs = i; break; }
          }
          const seqUp   = info.steps.map(s => rootAbs + s).filter(a => a >= 0 && a < window.TOTAL_NOTES);
          const seqDown = seqUp.slice(0, -1).reverse();
          const seq = seqUp.concat(seqDown);
          const gap = 0.2; // seconds between notes
          seq.forEach((abs, idx) => {
            const midi = window.MIDI_START + abs;
            setTimeout(() => {
              window.playNote(midi, 0, 0.45);
            }, idx * gap * 1000);
          });
        }catch(e){}
      }, {passive:true});
    }catch(e){}
  }
  if (document.readyState === 'complete' || document.readyState === 'interactive'){
    setupPlayScaleFix();
  } else {
    document.addEventListener('DOMContentLoaded', setupPlayScaleFix, {once:true});
  }
})();
</script>

function ensureOverlay(){
    const wrap = document.querySelector('.keyboard-wrap');
    if (!wrap) return null;
    let ov = document.getElementById('arrow-overlay');
    if (!ov){
      ov = document.createElement('div');
      ov.id = 'arrow-overlay';
      wrap.appendChild(ov);
    }
    // Position overlay to exactly cover the under-scale box
    const us = document.getElementById('under-scale');
    if (!us) return ov;
    const wrapRect = wrap.getBoundingClientRect();
    const usRect = us.getBoundingClientRect();
    ov.style.left = (usRect.left - wrapRect.left) + 'px';
    ov.style.top  = (usRect.top  - wrapRect.top)  + 'px';
    ov.style.width  = usRect.width + 'px';
    ov.style.height = usRect.height + 'px';
    return ov;
  }

function drawOverlay(){
    const ov = ensureOverlay();
    if (!ov || !window.kb1) return;
    ov.innerHTML = ""; // clear

const rootSelEl = document.getElementById("root");
    const qualitySelEl = document.getElementById("quality");
    if (!rootSelEl || !qualitySelEl) return;

const rootPc = Number(rootSelEl.value);
    const quality = qualitySelEl.value;

// Determine profile using existing global helpers if present; else fall back to major/minor heuristic
    let steps = [0,2,4,5,7,9,11,12];
    let labels = ["1","2","3","4","5","6","7","8"];
    try {
      if (typeof scaleProfileForChord === 'function' && typeof SCALE_PROFILES === 'object'){
        const profile = SCALE_PROFILES[scaleProfileForChord(quality)] || SCALE_PROFILES.major;
        steps = profile.steps.slice(0,8);
        labels = profile.labels.slice(0,8);
      } else {
        // Fallback: check if chord is minor-ish via b3 in CHORDS[quality].deg
        if (window.CHORDS && window.CHORDS[quality] && window.CHORDS[quality].deg.some(d=>/b3/.test(d))){
          steps = [0,2,3,5,7,8,10,12];
          labels = ["1","2","♭3","4","5","♭6","♭7","8"];
        }
      }
    } catch(e){}

// Find first visible root within keyboard range
    let rootAbs = 0;
    for (let i=0;i<TOTAL_NOTES;i++){
      if (((START_PC + i) % 12) === rootPc){ rootAbs=i; break; }
    }

// Compute positions relative to overlay
    const usRect = ov.getBoundingClientRect();
    for (let i=0;i<steps.length;i++){
      const abs = rootAbs + steps[i];
      if (abs < 0 || abs >= TOTAL_NOTES) continue;
      const keyEl = kb1.keys[abs];
      if (!keyEl) continue;
      const r = keyEl.getBoundingClientRect();
      const xCenter = r.left + r.width/2 - usRect.left;

const badge = document.createElement('div');
      badge.className = 'badge';
      badge.style.left = xCenter + 'px';
      badge.style.bottom = '6px';
      badge.textContent = labels[i];
      ov.appendChild(badge);

const arrow = document.createElement('div');
      arrow.className = 'arrow';
      arrow.style.left = (xCenter - 1) + 'px';
      arrow.style.top = '0px';
      arrow.style.height = (usRect.height - 22) + 'px';
      ov.appendChild(arrow);
    }
  }

function scheduleDraw(){
    requestAnimationFrame(()=> requestAnimationFrame(drawOverlay));
  }

// Hooks
  window.addEventListener('load', ()=> setTimeout(scheduleDraw, 200));
  window.addEventListener('resize', ()=> setTimeout(scheduleDraw, 120));
  window.addEventListener('orientationchange', ()=> setTimeout(scheduleDraw, 160));

const root = document.getElementById('root');
  const quality = document.getElementById('quality');
  if (root) root.addEventListener('change', scheduleDraw);
  if (quality) quality.addEventListener('change', scheduleDraw);

// Watch the keyboard for highlight changes
  try{
    const kb = document.getElementById('keyboard');
    if (kb && window.MutationObserver){
      const obs = new MutationObserver(()=> setTimeout(scheduleDraw, 20));
      obs.observe(kb, { childList:true, subtree:true, attributes:true });
    }
  }catch(e){}
})();
</script>

// Canonical step patterns
  const SCALE_STEPS = {
    maj:     { steps:[0,2,4,5,7,9,11,12], labels:["1","2","3","4","5","6","7","8"] },
    natmin:  { steps:[0,2,3,5,7,8,10,12], labels:["1","2","♭3","4","5","♭6","♭7","8"] },
    harmmin: { steps:[0,2,3,5,7,8,11,12], labels:["1","2","♭3","4","5","♭6","7","8"] },
    melmin:  { steps:[0,2,3,5,7,9,11,12], labels:["1","2","♭3","4","5","6","7","8"] },
    majpent: { steps:[0,2,4,7,9,12],      labels:["1","2","3","5","6","8"] },
    minpent: { steps:[0,3,5,7,10,12],     labels:["1","♭3","4","5","♭7","8"] },
    blues:   { steps:[0,3,5,6,7,10,12],   labels:["1","♭3","4","♭5","5","♭7","8"] },
  };

// Keep original for fallback if needed
  const _clearHighlights = window.clearHighlights;
  const _kb2 = window.kb2;
  const _TOTAL_NOTES = window.TOTAL_NOTES;
  const _START_PC = window.START_PC;

if (!_kb2 || !_clearHighlights) return; // don't break if not ready

window.setLitScale = function(rootPc, stype){
    _clearHighlights(_kb2);
    const info = SCALE_STEPS[stype];
    if (!info) return;

// Find first visible root
    let rootAbs = 0;
    for (let i=0;i<_TOTAL_NOTES;i++){
      if (((_START_PC + i) % 12) === rootPc){ rootAbs=i; break; }
    }

// Paint keys and badges
    const absList = info.steps.map(s=> rootAbs + s).filter(a=> a>=0 && a<_TOTAL_NOTES);
    absList.forEach((abs, idx)=>{
      const el = _kb2.keys[abs]; if (!el) return;
      const label = info.labels[idx] || "";
      const altered = /♭|♯/.test(label);
      el.classList.add("tone-active");
      if (idx===0) el.classList.add("tone-root");
      if (altered) el.classList.add("tone-alter");
      const badge = document.createElement("div");
      badge.className = "degree-badge";
      badge.textContent = label;
      el.appendChild(badge);
    });
  };

// Re-run once after load to refresh the scale display
  window.addEventListener("load", function(){
    try {
      const sroot = document.getElementById("sroot");
      const stype = document.getElementById("stype");
      if (sroot && stype) {
        setTimeout(()=> window.setLitScale(Number(sroot.value), stype.value), 200);
      }
    } catch(e){ /* no-op */ }
  });
})();
</script>

if (!playBtn || !clearBtn || !srootSel || !stypeSel) return;

// Reuse existing audio helpers if present
  function ensureAudio(){
    try {
      if (!window.audioCtx){
        window.audioCtx = new (window.AudioContext || window.webkitAudioContext)();
      }
      if (window.audioCtx.state === 'suspended'){ window.audioCtx.resume(); }
    } catch(e){}
  }
  function midiToFreq(m){ return 440 * Math.pow(2, (m - 69) / 12); }
  function playFreq(freq){
    if (typeof window.playFreq === 'function'){ return window.playFreq(freq); }
    ensureAudio();
    const t0 = audioCtx.currentTime;
    const master = audioCtx.createGain(); master.gain.value = 0.0; master.connect(audioCtx.destination);
    const o1 = audioCtx.createOscillator(); o1.type="triangle"; o1.frequency.value=freq;
    const o2 = audioCtx.createOscillator(); o2.type="sine"; o2.frequency.value=freq*2;
    const g1 = audioCtx.createGain(), g2 = audioCtx.createGain();
    g1.gain.value = 0.8; g2.gain.value = 0.2;
    const lp = audioCtx.createBiquadFilter(); lp.type="lowpass"; lp.frequency.value = 6000; lp.Q.value = 0.4;
    o1.connect(g1); o2.connect(g2); g1.connect(lp); g2.connect(lp); lp.connect(master);
    const A=0.002, D=0.23, S=0.0001, R=0.25;
    master.gain.setValueAtTime(0.0001, t0);
    master.gain.linearRampToValueAtTime(0.6, t0+A);
    master.gain.exponentialRampToValueAtTime(0.12, t0+A+D);
    master.gain.linearRampToValueAtTime(S, t0+A+D+0.18);
    master.gain.linearRampToValueAtTime(0.0001, t0+A+D+0.18+R);
    o1.start(t0); o2.start(t0);
    o1.stop(t0+A+D+0.18+R+0.02); o2.stop(t0+A+D+0.18+R+0.02);
  }

// Canonical scale steps (mirror the SAFE fix mapping)
  const SCALE_STEPS = {
    maj:     { steps:[0,2,4,5,7,9,11,12] },
    natmin:  { steps:[0,2,3,5,7,8,10,12] },
    harmmin: { steps:[0,2,3,5,7,8,11,12] },
    melmin:  { steps:[0,2,3,5,7,9,11,12] },
    majpent: { steps:[0,2,4,7,9,12] },
    minpent: { steps:[0,3,5,7,10,12] },
    blues:   { steps:[0,3,5,6,7,10,12] },
  };

// Working Clear: clears lower keyboard and waits for selection change
  clearBtn.addEventListener('click', function(){
    try { if (typeof clearHighlights === 'function' && window.kb2) clearHighlights(kb2); } catch(e){}
    window.__scaleCleared = true;
  });

// Resume render on menu change
  function resumeIfCleared(){
    if (window.__scaleCleared){
      window.__scaleCleared = false;
      try { if (typeof setLitScale === 'function') setLitScale(Number(srootSel.value), stypeSel.value); } catch(e){}
    }
  }
  srootSel.addEventListener('change', resumeIfCleared);
  stypeSel.addEventListener('change', resumeIfCleared);

// Play handler: always plays current selection (doesn't change highlights)
  playBtn.addEventListener('click', function(){
    const rootPc = Number(srootSel.value);
    const stype = stypeSel.value;
    playScaleOnce(rootPc, stype);
  });
})();
</script>

const clearBtn = document.getElementById('clear-scale');
  const playBtn  = document.getElementById('play-scale');
  const srootSel = document.getElementById('sroot');
  const stypeSel = document.getElementById('stype');

if (!srootSel || !stypeSel) return;

// Wrap setLitScale once to allow suppression after Clear
  if (typeof window.setLitScale === 'function' && !window.__setLitScaleWrapped){
    const _orig = window.setLitScale;
    window.__setLitScaleWrapped = true;
    window.setLitScale = function(rootPc, stype){
      if (window.__scaleCleared) return; // don't draw if cleared
      return _orig(rootPc, stype);
    };
  }

if (clearBtn){
    clearBtn.addEventListener('click', function(){
      try { if (window.kb2 && typeof clearHighlights === 'function') clearHighlights(kb2); } catch(e){}
      window.__scaleCleared = true;
    });
  }
  if (playBtn){
    playBtn.addEventListener('click', playScaleSequence);
  }

// If user changes selection after Clear, resume rendering and draw
  function resume(){
    if (window.__scaleCleared){
      window.__scaleCleared = false;
      try { if (typeof setLitScale === 'function') setLitScale(Number(srootSel.value), stypeSel.value); } catch(e){}
    }
  }
  srootSel.addEventListener('change', resume);
  stypeSel.addEventListener('change', resume);
})();
</script>

// 1) Theory-accurate classification of tones for colouring
  //    - root (1): red
  //    - core (yellow): 3,5,7 (and for sus: the suspended tone (2/4) + 5)
  //    - added (orange): 6,9,11,13 (and 2/4 ONLY when used as 'add2/add4', not sus)
  //    - altered (green): ANY degree with ♭ or ♯
  function __degreeBase(d){ return String(d||"").replace(/♭/g,'b').replace(/♯/g,'#'); }
  window.classifyTone = function classifyTone_fixed(deg, quality){
    const d = __degreeBase(deg);
    if (d === "1") return {root:true, alter:false, added:false};
    const altered = /b|#/.test(d);

// decide if chord is sus/add/extension/etc
    const isSus = /^sus/.test(quality);
    const isAdd = /add/.test(quality);
    const isSix = quality === "6" || quality === "m6";
    const isExtension = /^(9|m9|maj9|11|m11|maj11|13|m13|maj13)$/.test(quality);
    const isSeventh = /^(7|maj7|m7|m7b5|dim7|aug7|7b5|7#5|7b9|7#9)$/.test(quality);

// base (un-altered) degree symbol without accidentals
    const base = d.replace(/[b#]/g, "");

// SUS chords treat the 2/4 as core (not "added") because the 3rd is replaced.
    if (isSus){
      const coreSet = new Set(["2","4","5"]); // plus root handled above
      const added = false;
      const core = coreSet.has(base);
      return {root:false, alter:altered, added: added===true?true:false, core: core};
    }

// Default core for tertian harmony includes only 3 and 5. We treat 7th degrees as extensions (added)
    const coreSet = new Set(["3","5"]);
    let added = false;

// Added tones logic
    if (isAdd){
      // add-chords add 2/4/9/11 on top of a triad
      if (base==="2"||base==="4"||base==="9"||base==="11") added = true;
    }
    if (isSix){
      if (base==="6") added = true;
    }
    if (isExtension){
      // 9/11/13 are added on top of 1-3-5-(7)
      if (base==="9"||base==="11"||base==="13") added = true;
    }
    // Always treat the seventh degree as an added tone rather than a core tone
    if (base === "7") added = true;

// In seventh chords, the seventh is treated as an added tone rather than a core. Nothing to do here.

// If it's altered, it remains "alter" colour.  For non‑core degrees (extensions) we
    // still want the tone coloured as an added note (purple) with an outline
    // indicating the accidental.  Core degrees (3 and 5) should remain yellow even when
    // altered, so leave added=false for those.  Any 6, 7, 9, 11 or 13 – whether
    // natural or altered – is considered an added tone in this app.
    if (altered) {
      const extBases = new Set(["6","7","9","11","13"]);
      return {root:false, alter:true, added: extBases.has(base)};
    }

// Natural (un-altered) classification
    if (coreSet.has(base)) return {root:false, alter:false, added:false};
    if (added) return {root:false, alter:false, added:true};

// Natural 2 or 4 appearing in plain triads = treated as "added" only if the name indicates so (handled above).
    // Otherwise leave as non-core (won't be used in triads anyway).
    return {root:false, alter:false, added:false};
  };

// 2) Ensure the visuals use the updated classifier
  const _setLitChord = window.setLitChord;
  if (typeof _setLitChord === "function"){
    window.setLitChord = function(rootPc, quality){
      // identical to original, but pulls classifyTone from window (now overridden)
      // We'll mirror the original behaviour by calling the existing implementation but with patched classifier in global scope.
      return _setLitChord(rootPc, quality);
    };
  }

// 3) Make "Chord Options" pills interactive
  (function(){
    const list = document.getElementById("options-list");
    const rootSel = document.getElementById("root");
    const qualSel = document.getElementById("quality");
    if (!list || !rootSel || !qualSel) return;

function labelToQual(suffix){
      if (suffix === "") return "maj";
      if (suffix === "m") return "min";
      if (suffix === "dim") return "dim";
      return "maj";
    }

function attach(){
      const preferSharps = (typeof window.preferSharps === "function") ? window.preferSharps : ()=>true;
      const nameForPc = (typeof window.nameForPc === "function") ? window.nameForPc : (pc)=>pc;
      const children = Array.from(list.children);
      children.forEach((pill)=>{
        pill.style.cursor = "pointer";

pill.addEventListener("click", (ev)=>{
  try{
    ev.stopImmediatePropagation && ev.stopImmediatePropagation();
    ev.preventDefault && ev.preventDefault();
    const text = pill.firstChild ? pill.firstChild.textContent : pill.textContent;
    const m = String(text).trim().match(/^([A-G](?:#|♯|b|♭)?)(m|dim)?$/i);
    if (!m) return;
    let name = m[1].replace("#","♯").replace("b","♭");
    const suffix = (m[2]||"").toLowerCase();
    const sharpNames = ["C","C♯","D","D♯","E","F","F♯","G","G♯","A","A♯","B"];
    const flatNames  = ["C","D♭","D","E♭","E","F","G♭","G","A♭","A","B♭","B"];
    let pc = sharpNames.indexOf(name);
    if (pc < 0) pc = flatNames.indexOf(name);
    if (pc < 0) return;
    const q = labelToQual(suffix);
    // Degree step from dataset ensures ascending pitch with diatonic order
    const keyRootPc = Number(document.getElementById("root").value);
    const step = pill.dataset.step || "0";
    if (typeof window.playDiatonicChord === "function"){
      window.playDiatonicChord(keyRootPc, Number(step), q);
    } else if (typeof window.playChord === "function"){
      // Fallback: still play but may not guarantee ascending
      window.playChord(pc, q);
    }
  }catch(e){ console.warn(e); }
}, {passive:true});

});
    }

// Run initially and whenever options list changes
    attach();
    if (window.MutationObserver){
      new MutationObserver(()=> setTimeout(attach, 10)).observe(list, {childList:true});
    }
  })();

// 4) Fix Play Scale button listener (ID mismatch guard) + Clear Scale
  (function(){
    const playScaleBtn = document.getElementById("play-scale");
    const sroot = document.getElementById("sroot");
    const stype = document.getElementById("stype");
    if (playScaleBtn && sroot && stype && typeof window.playScale === "function"){
      playScaleBtn.addEventListener("click", ()=>{
        try{
          window.playScale(Number(sroot.value), stype.value);
        }catch(e){}
      }, {passive:true});
    }
    const clearBtn = document.getElementById("clear-scale");
    if (clearBtn && window.kb2 && typeof window.clearHighlights === "function"){
      clearBtn.addEventListener("click", ()=>{
        try{ window.clearHighlights(window.kb2); }catch(e){}
      }, {passive:true});
    }
  })();

// 5) Unify Relative label box wording and keep it in sync
  (function(){
    function safeUpdate(){
      try{
        const sroot = document.getElementById('sroot');
        const valEl = document.getElementById('relMinorVal');
        const labEl = document.querySelector('#relMinor label');
        if(!sroot || !valEl || !labEl) return;
        // Use major/minor family to pick relative
        const st = document.getElementById('stype')?.value || "maj";
        const majorLike = new Set(["maj","majpent"]);
        const rootPc = Number(sroot.value);
        let label = "";
        if (majorLike.has(st)){
          const relMin = (rootPc + 9) % 12; // relative minor down a minor third
          const name = (typeof nameForPc === "function") ? nameForPc(relMin, (typeof preferSharps==="function"?preferSharps(relMin,true):true)) : relMin;
          label = name + "m";
          labEl.textContent = "Relative minor";
        } else {
          const relMaj = (rootPc + 3) % 12;
          const name = (typeof nameForPc === "function") ? nameForPc(relMaj, (typeof preferSharps==="function"?preferSharps(relMaj,false):true)) : relMaj;
          label = name;
          labEl.textContent = "Relative major";
        }
        valEl.textContent = label;
      }catch(e){}
    }
    const srootEl = document.getElementById('sroot');
    const stypeEl = document.getElementById('stype');
    if (srootEl) srootEl.addEventListener('change', ()=> setTimeout(safeUpdate, 10), {passive:true});
    if (stypeEl) stypeEl.addEventListener('change', ()=> setTimeout(safeUpdate, 10), {passive:true});
    window.addEventListener('load', ()=> setTimeout(safeUpdate, 200), {once:true});
  })();

// 6) Ensure scales always highlight the full set of steps
  (function(){
    if (typeof window.setLitScale === "function"){
      // already overridden earlier to use canonical step patterns; no change needed other than ensuring it's called once on load.
      window.addEventListener("load", function(){
        try{
          const sroot = document.getElementById("sroot");
          const stype = document.getElementById("stype");
          if (sroot && stype){
            setTimeout(()=> window.setLitScale(Number(sroot.value), stype.value), 220);
          }
        }catch(e){}
      }, {once:true});
    }
  })();

// 7) Re-layout black keys and under-scale after any change for stability
  (function(){
    function refresh(){
      try{
        if (typeof layoutBlackKeysPrecise === "function"){
          layoutBlackKeysPrecise(window.kb1);
          layoutBlackKeysPrecise(window.kb2);
        }
        if (typeof window.layoutUnderScale === "function"){
          window.layoutUnderScale();
        }
      }catch(e){}
    }
    window.addEventListener('resize', ()=> setTimeout(refresh, 60));
    window.addEventListener('orientationchange', ()=> setTimeout(refresh, 120));
    const root = document.getElementById('root');
    const quality = document.getElementById('quality');
    if (root) root.addEventListener('change', ()=> setTimeout(refresh, 10), {passive:true});
    if (quality) quality.addEventListener('change', ()=> setTimeout(refresh, 10), {passive:true});
  })();

})();
</script>

function bind(){
    const list = document.getElementById('options-list');
    if (!list) return;

// Determine diatonic steps for display mode (major/minor) to keep degree order ascending
    const stepsMajor = [0,2,4,5,7,9,11,12];
    const stepsMinor = [0,2,3,5,7,8,10,12];
    const degree0Note = document.querySelector('#options-list .pill[data-order="0"] .note');
    const isMinor = degree0Note && /m($|[^a-z])/i.test(degree0Note.textContent||'');
    const steps = isMinor ? stepsMinor : stepsMajor;

const keyRootPc = rootPcFromFirstPill();

list.querySelectorAll('.pill').forEach(pill=>{
      if (pill.__hasPlayV2) return;
      pill.__hasPlayV2 = true;
      pill.addEventListener('mousedown', function(ev){
        try{
          const order = Number(this.dataset.order||'0'); // 0..7
          const step  = Number(this.dataset.step||String(steps[order]||0));
          const qual  = this.dataset.quality || 'maj';
          if (typeof window.playDiatonicChord === 'function'){
            window.playDiatonicChord(keyRootPc, step, qual);
          } else if (typeof window.playChord === 'function'){
            // Fallback: compute absolute chord root pc (key root + step) and call playChord
            const rootPc = (keyRootPc + step) % 12;
            window.playChord(rootPc, qual);
          }
        }catch(e){ /* no-op */ }
      }, true);
    });
  }

if (document.readyState === 'complete' || document.readyState === 'interactive'){
    bind(); observe();
  } else {
    document.addEventListener('DOMContentLoaded', function(){ bind(); observe(); });
  }
})();
</script>

DIRECTORS

Staff