:root{
  --bg:#0b1020;
  --text:#e9eeff;
  --line:rgba(255,255,255,.10);
  --accent:#7aa6ff;

  --neon-cyan: #37E8FF;
  --neon-green: #00fd0a;
  --neon-lime: #A8FF3E;
  --neon-blue: #2BA0FF;
  --neon-glow: rgba(55,232,255,0.35);
  --neon-glow2: rgba(168,255,62,0.22);
  --panel-bg: rgba(10,14,24,0.55);
  --panel-border: rgba(55,232,255,0.16);
  --accent: var(--neon-green);

  --keyboard-height: 180px;
}

/* --- W.O.M.P. full-screen layout overrides --- */
html,body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 70% 10%, rgba(55,232,255,0.18), transparent 55%),
    radial-gradient(900px 500px at 30% 30%, rgba(168,255,62,0.12), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(43,160,255,0.10), transparent 55%),
    repeating-linear-gradient(45deg, rgba(55,232,255,0.04) 0 2px, transparent 2px 12px),
    repeating-linear-gradient(-45deg, rgba(168,255,62,0.028) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #05070d 0%, #04050a 100%);
  overflow:hidden;
  height: 100%;
}

body {
    margin: 0; 
}

.app{
  display:flex;
  flex-direction:column;

  width: 100vw;
  height: 100vh;
  max-width: none !important;
  padding: 0 !important;
  touch-action: manipulation;
  * {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      user-select: none;
  }
}

/* Header simplified (no Audio locked pill / Start button) */
header{
  display:flex;
  gap:16px;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 0 18px;
  align-items:flex-end;
  justify-content:space-between;
  background: rgba(12,14,18,0.78);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);

  .actions{ display:none !important; }
}

main{
  padding-top: 86px; /* header height */
}



*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(900px 500px at 30% 10%, rgba(122,166,255,.22), transparent 60%),
    radial-gradient(800px 450px at 70% 20%, rgba(154,122,255,.18), transparent 62%),
    linear-gradient(180deg, #050815, var(--bg));
  color:var(--text);
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  padding:22px;
  &.blue {
    --accent: var(--neon-blue);
  }
}

.app{
  display:flex;
  flex-direction:column;

  width: 100%;
  max-width: none;
  min-height: 100vh;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  margin: 0;
  padding: 0;
}


.title{display:flex;flex-direction:column;gap:2px}
.title h1{font-size:18px;margin:0;letter-spacing:.2px}
.title .sub{font-size:12px;color:rgba(233,238,255,.75)}

.actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}

button{
  appearance:none;
  border:none;
  color:var(--text);
  background: linear-gradient(180deg, rgba(122,166,255,.22), rgba(122,166,255,.10));
  border:1px solid rgba(122,166,255,.35);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.2px;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  transition: transform .08s ease, filter .18s ease;
  user-select:none;
  &:hover{
      filter:brightness(1.1)
  }
  &:active{
      transform:translateY(1px)
  }
}

.pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background: rgba(0,0,0,.18);
  color:rgba(233,238,255,.85);
  font-size:12px;
  user-select:none;
}
.dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background: rgba(255,255,255,.25);
  box-shadow:0 0 0 1px rgba(255,255,255,.10) inset;
  &.on{ background: #39ff95; box-shadow:0 0 18px rgba(57,255,149,.35); }
}

main{
  flex:1;
  overflow-y:auto;
  padding-bottom: 360px;
}

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  h2{
    margin:0 0 10px 0;
    font-size:13px;
    color:rgba(233,238,255,.85);
    letter-spacing:.25px;
    font-weight:900;
    text-transform:uppercase;
  }
}

.control{
  background: linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.08));
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:12px 12px 10px 12px;
  position:relative;
  overflow:hidden;
  &:before{
    content:"";
    position:absolute; inset:-40% -30%;
    background: radial-gradient(circle at 30% 10%, rgba(122,166,255,.14), transparent 55%);
    pointer-events:none;
  }
  label{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:10px;
    font-size:12px;
    color:rgba(233,238,255,.88);
    position:relative;
    z-index:1;
    .val{
      font-variant-numeric: tabular-nums;
      color:rgba(233,238,255,.70);
      font-size:11px;
    }

  }
}

input[type="number"]{
  appearance:textfield;
  background: rgba(0,0,0,.20);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 900;
  font-size: 16px;
  width: 90px;
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button{
    -webkit-appearance: none;
    margin: 0;
  }
}

.row{display:grid;grid-template-columns: 1fr 1fr; gap:12px}

.hint{
  margin-top:10px;
  font-size:12px;
  color: rgba(233,238,255,.70);
  line-height:1.4;
}
.kbd{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  padding:1px 7px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(233,238,255,.85);
  font-size: 12px;
  margin-right:4px;
}

.scopeWrap{
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  overflow:hidden;
  padding:10px;
}
canvas#scope{
  width:100%;
  height:auto;
  display:block;
}

.meter{
  height:12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  overflow:hidden;
  position:relative;
}
.meter > div{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(122,166,255,.85), rgba(57,255,149,.85));
  box-shadow: 0 0 20px rgba(122,166,255,.25);
  transition: width .06s linear;
}

.groupGrid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}

/* Panic */
.panicRow{display:flex;justify-content:flex-end;margin-top:12px}
button.panic{
  background: linear-gradient(180deg, rgba(255,80,80,.35), rgba(255,80,80,.12));
  border:1px solid rgba(255,110,110,.55);
  box-shadow: 0 16px 40px rgba(255,80,80,.12), 0 0 0 1px rgba(255,255,255,.06) inset;
}
button.panic:hover{filter:brightness(1.15)}

/* Wave buttons w/ labels */
.waveGrid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
  margin-top:10px;
  position:relative;
  z-index:1;
}
.waveBtn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:8px 6px 7px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  cursor:pointer;
  user-select:none;
  transition: filter .18s ease, transform .08s ease, border-color .18s ease, background .18s ease;
  &:hover{
    filter:brightness(1.1)

  }
  &:active{
    transform:translateY(1px)
  }
  &.active{
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 10%, transparent 100%), color-mix(in srgb, var(--accent) 20%, transparent 90%));
    border-color: color-mix(in srgb, var(--accent) 100%, black 50%);
    box-shadow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 18px 35px rgba(122,166,255,.12);
  }
  svg{width:26px;height:18px;opacity:.95}
  .waveTxt{
    font-size:10px;
    font-weight:900;
    letter-spacing:.2px;
    text-transform:uppercase;
    opacity:.85;
  }
}

/* Mix slider (handle-only track) */
.mixLabels{
  margin-top:8px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  font-weight:900;
  letter-spacing:.15px;
  text-transform:uppercase;
  opacity:.72;
  position:relative;
  z-index:1;
}
.mixLabels .mid{opacity:.55}

/* Presets */
.presetRow{
  display:flex;
  gap:10px;
  align-items:center;
}
.presetSelect{
  flex:1;
  background: rgba(0,0,0,.18);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 800;
}
.presetBtn{
  padding:10px 14px;
}

/* Piano + detune rail */
.pianoTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.pianoMain {
  flex-grow: 2;
}
.octRow{
  display:flex;
  align-items:center;
  gap:10px;
}
.octBtn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  box-shadow:none;
  font-weight:900;
  min-width:44px;
}
.octDisplay{
  font-size:12px;
  font-weight:900;
  letter-spacing:.15px;
  text-transform:uppercase;
  opacity:.80;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
}

.detuneRail{
  border-right:1px solid rgba(255,255,255,.12);
  padding:0px 10px;
  margin-right: 10px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.detuneLabel{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.85;
  z-index:1;
}
.detuneHint{
  font-size:10px;
  font-weight:800;
  opacity:.60;
  text-transform:uppercase;
  z-index:1;
}
.detuneCenter{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:11px;
  font-weight:900;
  opacity:.65;
  z-index:1;
  padding:2px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}
.detuneSpring{
  margin-top: 6px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .15px;
  text-transform: uppercase;
  opacity: .85;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: none;
  &[aria-pressed="false"]{
    opacity: .55;
    border-color: rgba(255,255,255,.10);
  }
}

input.detuneSlider {
    width: 15px;
    writing-mode: vertical-lr;
    -webkit-appearance: none;
    &::-moz-range-track{
        width: 10px;
        cursor: pointer;
        box-shadow: none;
        background: rgba(255,255,255,0.3);
        border-radius: 0px;
        border: 1px solid #010101;
    }
    &::-moz-range-thumb{
          box-shadow: none;
          border: 0px solid #ffffff;
          box-shadow: 0px 10px 10px rgba(0,0,0,0.25);
          height: 20px;
          width: 22px;
          border-radius: 22px;
          background: rgba(255,255,255,1);
          margin-left: -11px;
          cursor: pointer;
    }
    &::-moz-focus-outer {
      border: 0;
    }
    &::-webkit-slider-runnable-track {
        width: 15px;
        cursor: pointer;
        box-shadow: none;
        background: #ffffff;
        border-radius: 0px;
        border: 0px solid #010101;
    }
  
    &::-webkit-slider-thumb {
        box-shadow: none;
        border: 0px solid #ffffff;
        box-shadow: 0px 10px 10px rgba(0,0,0,0.25);
        height: 22px;
        width: 42px;
        border-radius: 22px;
        background: rgba(255,255,255,1);
        margin-left: -11px;
        cursor: pointer;
        -webkit-appearance: none;
    }
}
/* --- Sticky keyboard footer --- */
.keyboardUI{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  margin: 0 !important;
  background: rgba(10,12,18,0.82);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.10);
  /* Make the piano take remaining width nicely */
  display:flex;
  gap:14px;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(10,14,22,.35), rgba(10,14,22,.75));
  padding: 10px;
  .pianoWrap{
    display: flex;
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto 0;
    border-radius:16px;
    border:1px solid rgba(255,255,255,.12);
    background: rgba(0,0,0,.18);
    padding:10px;

    /* --- Octave / Transpose row --- */
    .keybControlRow{
      display:flex;
      gap:14px;
      width: 100%;
    }
    .keybControl {
      display:flex;
      gap:10px;
      align-items: center;
      padding: 0;
      .label{
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-size: 11px;
        opacity: .85;
      }
    }
    .transposeCtrl {
      margin-left: auto;
    }
    .octNum{
      min-width: 26px;
      text-align:center;
      font-weight: 900;
      font-size: 14px;
      opacity: .95;
    }


    /* actual piano key container */
    .piano{
      position:relative;
      height:calc(var(--keyboard-height) - 1px);
      user-select:none;
      touch-action:none;
      overflow-y: hidden;
      /* Keys */
      .whiteRow{
        display:flex;
        
        height:var(--keyboard-height);
        padding-bottom: 2px;
        top: -1px;
        position: relative;
      }
      .keyWhite{
        flex:1 1 0;
        border-right:1px solid rgba(0,0,0,.25);
        border-radius: 0 0 6px 6px;
        background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(220,226,255,.92));
        position:relative;
        cursor:pointer;
        &:last-child{
          border-right:none
        }
        &.active{
          background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, white 80%), color-mix(in srgb, var(--accent) 30%, white 50%));
        }
      }

      .whiteLabel{
        position:absolute;
        left:8px;
        bottom:8px;
        font-size:11px;
        font-weight:900;
        color: rgba(10,14,30,.75);
        opacity:.70;
      }
      .keyBlack{
        position:absolute;
        top:0;
        width: 4.2%;
        height: 62%;
        border-radius: 0 0 10px 10px;
        background: linear-gradient(180deg, rgba(25,28,44,.98), rgba(0,0,0,.98));
        border:1px solid rgba(255,255,255,.10);
        box-shadow: 0 10px 20px rgba(0,0,0,.45);
        cursor:pointer;
        &.active{
          background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 30%, black 20%), color-mix(in srgb, var(--accent) 30%, black 70%));
          border-color: rgba(122,166,255,.35);
        }
      }
      .keyHint{
        position:absolute;
        right:8px;
        bottom:8px;
        font-size:10px;
        font-weight:900;
        opacity:.28;
        color: rgba(10,14,30,.85);
        text-transform:uppercase;
      }
      .keyBlack .keyHint{
        color: rgba(255,255,255,.85);
        opacity:.25;
        right:6px;
        bottom:6px;
      }


    }

  }

}



/* Metronome updated layout */
.rightCol {
  .controlGroup {
    padding: 10px 20px 20px;
    .metroHeader, .controlHeader{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:10px;
      margin-bottom:10px;
      .groupTitle {
        border: 0;
        padding: 0;
      }
      .toggle {
      }
    }  
  }
  
}
.metroTopRight{
  display:flex;
  align-items:center;
  gap:10px;
}
.led{
  width:14px;height:14px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(255,0,0,.12);
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
  &.on{
    background: rgba(255,30,30,.95);
    box-shadow: 0 0 18px rgba(255,30,30,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
  }
  &.fade{
    transition: background 0.35s ease, box-shadow 0.35s ease;
    background: rgba(255,0,0,.14);
    box-shadow: 0 0 0 rgba(255,30,30,0), 0 0 0 1px rgba(0,0,0,.25) inset;
  }
}

.metroLine{
  display:flex;
  align-items:center;
  gap:10px;
}
.bpmInput{
  width: 90px;
   -webkit-user-select: text;
    user-select: text;
}
.bpmTxt{
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.72;
}
.tapInline{
  margin-left: 6px;      /* adjacent to BPM */
  padding: 12px 16px;    /* bigger target */
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  box-shadow: none;
  font-weight: 900;
  &:hover{
    filter:brightness(1.1)
  }
}

.metroControls{
  margin-top:10px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  align-items:center;
}
.miniControl{
  display:flex;
  align-items:center;
  gap:8px;
}
.miniLabel{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  opacity:.72;
}
.miniControl input[type="range"]{
  width:120px;
  margin:0;
}

/* Toggle */
.toggle{
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
  cursor:pointer;
  input{
    display:none;
  }
}

.toggleUi{
  width:42px;height:24px;border-radius:999px;
  border:1px solid rgba(255,255,255,.3);
  background: rgba(0,0,0,.20);
  position:relative;
  &:after{
    content:"";
    position:absolute;
    width:18px;height:18px;border-radius:999px;
    left:3px;top:2px;
    background: rgba(255,255,255,.85);
    transition: transform .18s ease, background .18s ease;
  }

}
.toggle {

  input:checked + .toggleUi{
    background: color-mix(in srgb, var(--accent) 30%, black 100%);
    border-color: color-mix(in srgb, var(--accent) 100%, black 60%);
    &:after {
      transform: translateX(18px);
      background: var(--accent);
    }
  }
  &.compact .toggleUi{
    width:40px;
    height:22px;
    &:after{
      width:16px;
      height:16px;
      left:3px;
      top:2px;
    }
  }

}

/* Compact 2x2 grid for Cutoff/Q/Env/Noise */
.grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}

/* Hide note-name labels on keys */
.whiteLabel{ display:none; }

/* Arp controls in piano top row */
.arpRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap;
}
.arpLabel{
  font-size:11px;
  font-weight:900;
  letter-spacing:.15px;
  text-transform:uppercase;
  opacity:.8;
}
.arpToggle{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  box-shadow:none;
  font-weight:900;
  min-width:62px;
  &[aria-pressed="true"]{
    border-color: rgba(122,166,255,.38);
    background: rgba(122,166,255,.14);
  }
}
.arpSel{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.92);
  padding:0 10px;
  font-weight:800;
}


/* Tap button flash */
.tapInline{
  position: relative;
  &:active{
    box-shadow: 0 0 0 2px rgba(255,255,255,.55), 0 10px 24px rgba(0,0,0,.35);
  }
  &.flash{
    border-color: rgba(255,255,255,.92) !important;
    box-shadow: 0 0 0 2px rgba(255,255,255,.65), 0 14px 28px rgba(0,0,0,.45);
  }
}

/* Arpeggiator box */
.arpHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.arpGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:10px;
}
.arpSel{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.92);
  padding:0 10px;
  font-weight:800;
}

.presetLabel{
  font-size:12px;
  font-weight:900;
  letter-spacing:.15px;
  text-transform:uppercase;
  opacity:.80;
  margin-right:10px;
}

/* Recorder */
.recHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.recStatus{
  font-size:11px;
  font-weight:900;
  letter-spacing:.15px;
  text-transform:uppercase;
  opacity:.85;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  flex: 0.4;
  text-align: center;
  &.recOn {
    border-color: color-mix(in srgb, var(--accent) 100%, white 90%);
  }
}
.recRow{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content: center;
  margin-bottom:20px;
}
.recTimer {
  background-color: rgb(255 255 255 / 20%);
  font-size: 26px;
  padding: 6px 10px;
  border-radius: 5px;
  box-shadow: inset 0 0 10px #000;
  font-family: monospace;
  flex: 1;
  text-align: center;
}
.recBtn{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.16);
  font-weight:900;
  min-width:92px;
  &.recPrimary{
    background: rgba(255,50,70,.22); border-color: rgba(255,90,110,.55); box-shadow: 0 0 0 1px rgba(255,90,110,.15) inset;
  }
  &.secondary{
    opacity:.9;
  }
  &.ghost{
    background: transparent;
  }
  &:disabled{
    opacity:.35;
    cursor:not-allowed;
  }
}

.recLink{
  flex:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.9);
  font-weight:900;
  text-decoration:none;
  background: color-mix(in srgb, var(--accent) 40%, black 80%);
  &.disabled{
    opacity:.35;
    pointer-events:none;
    background: rgba(0,0,0,.12);
  }
}

/* Arp layout v2 */
.arpGrid2{
  display:flex;
  flex-direction:column;
  gap:19px;
}
.arpPair{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.arpRateBtns{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:8px;
}
.arpRateBtn{
  height:40px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(255,255,255,.92);
  font-weight:900;
  letter-spacing:.1px;
  &.active{
    border-color: rgba(122,166,255,.42);
    background: rgba(122,166,255,.16);
    box-shadow: 0 0 0 2px rgba(122,166,255,.10);
  }
  &:active{ transform: translateY(1px); }
}

/* Arp Rate buttons: vertical fraction, narrower */
.arpRateBtns{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.arpRateBtn{
  width:46px;
  padding:6px 0;
  height:44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  .frac{
    display:grid;
    grid-template-rows: 1fr 2px 1fr;
    align-items:center;
    justify-items:center;
    line-height:1;
    font-weight:900;
  }
  .fbar{
    width:18px;
    height:2px;
    background: rgba(255,255,255,.55);
    border-radius:2px;
    opacity:.8;
  }

}
.arpRateBtn sup, .arpRateBtn sub{ font-size:12px; }

/* Presets in left column */
.presetBar{
  margin: 10px 0 14px;
  padding: 10px;
  border-radius: 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.presetRow{
  display:flex;
  gap:10px;
  align-items:center;
  .presetLabel{
    font-weight:800;
    opacity:.9;
    min-width:60px;
  }
  .presetSelect{
    flex: 1;
    min-width: 160px;
  }
}
.btnSavePreset{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  white-space: nowrap;
  &:disabled{
    opacity: .35;
    cursor: not-allowed;
    filter: grayscale(0.6);
  }
}
.presetIO{
  display:flex;
  gap:10px;
  margin-top: 10px;
}
.btnTiny{
  flex:1;
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.9);
  font-weight: 700;
}


/* Preset line: one row */
.presetBar{
  margin: 8px 0 10px;
  padding: 0;
  border: 0;
  background: transparent;
}
.presetLine{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}
.presetSelect{ flex: 1; min-width: 180px; max-width: 300px}

.btnIcon{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.92);
  font-weight: 800;
  display:flex;
  gap:8px;
  align-items:center;
  white-space:nowrap;
  .ico{ font-size: 14px; line-height: 1; opacity:.95; }
  .txt{ font-size: 12px; letter-spacing: .2px; }
}

.card{
  max-width: none !important;
  width: 100%;
  margin: 0;
  border-radius: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  display:grid;
  grid-template-columns: 1.35fr .65fr;
  gap:12px;
}

/* Topbar */
.topbar{
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 14px;
  width: 100%;
  #scopeWrapHeader {
    display: none;
  }
}
.brandTitle{
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .6px;
}
.brandSub{
  opacity: .75;
  font-size: 12px;
  margin-top: 2px;
}

.topbarCenter .presetLine{
  display:flex;
  gap:10px;
  align-items:center;
}
.topbarRight{
  justify-self: end;
  margin-left: auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.volLabel{
  font-weight: 900;
  opacity: .85;
  letter-spacing: .6px;
  font-size: 12px;
}

/* Knob */
.masterHidden{ display:none; }
.knob{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 55%, rgba(0,0,0,0.28) 100%);
  border: 1px solid rgba(255,255,255,0.14);
  position: relative;
  cursor: pointer;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  &::after{
    content:'';
    position:absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.06);
  }
  &:focus{
    outline: none;
    box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 10px 22px rgba(0,0,0,0.35);
  }
  .knobIndicator{
    position:absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 18px;
    background: var(--accent);
    transform-origin: 50% 100%;
    border-radius: 2px;
    transform: translate(-50%, -100%) rotate(var(--a, -135deg));
    box-shadow: 0 0 10px rgba(255,255,255,0.25);
  }
}

/* Group container */
.controlGroup{
  background: transparent !important;

  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  .groupTitle{
    font-size:12px;
    font-weight:900;
    letter-spacing:.25px;
    text-transform:uppercase;
    color:rgba(233,238,255,.82);
    margin-bottom:8px;

  }
}

/* Ensure main area uses full height below topbar */
main{ 
  min-height: calc(100vh - 86px); 
  padding-bottom: calc(var(--keyboard-height) + 60px); /* room for sticky keyboard footer */
}

/* Arp rate note-icon buttons */
.arpRateBtns{
  gap: 8px;
}
.arpRateBtn{
  width: 44px;
  padding: 10px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.arpRateBtn .noteGlyph{
  font-size: 20px;
  line-height: 1;
  transform: translateY(-1px);
}
.arpRateBtn .noteExtra{
  position: absolute;
  right: 8px;
  top: 7px;
  font-size: 11px;
  font-weight: 900;
  opacity: .95;
}

/* --- ARP rate SVG icons --- */
.arpRateBtn{
  width: 46px;
  padding: 10px 0;
}

.noteSvg,
.noteIcon{
  width: 22px;
  height: 22px;
  display:block;
  color: white;
  &.quarter {
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23fcfcfc;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M340.078-0.004v311.078c-23.641-9.969-52.828-14.047-84.422-10.125 c-78.516,9.75-141.969,64.594-141.766,122.407c0.203,57.875,64,96.906,142.469,87.156c78.5-9.766,141.953-64.594,141.75-122.469 V-0.004H340.078z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  &.eighth {
   background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='_x32_' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 512 512' xml:space='preserve' fill='%23000000'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23ffffff;%7D %3C/style%3E%3Cg%3E%3Cpath class='st0' d='M448.231,166.755C352.139,64.989,240.998,2.38,240.998,2.38c-3.297-2.625-7.813-3.125-11.609-1.281 c-3.813,1.844-6.219,5.688-6.219,9.906v329c-20.078-8.281-44.688-11.656-71.344-8.344C84.717,340.005,30.514,386.849,30.67,436.255 c0.188,49.453,54.703,82.813,121.75,74.469c67.078-8.328,121.297-55.188,121.125-104.641V164.817 c15.828,3.313,34.391,10.531,54.391,25.219c67.703,49.625,100.905,81.484,58.218,166.859 C475.403,321.974,514.2,236.599,448.231,166.755z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  &.triplet-eighth {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 800 800' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='color:%23ffffff;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg id='triplet-eighth' serif:id='triplet eighth' transform='matrix(1.5625,0,0,1.5625,0,0)'%3E%3Cpath d='M441.28,102.27C345.188,0.504 244.32,0.884 244.32,0.884C238.375,0.483 237.746,0.049 232.821,0.879C228.645,1.583 223.17,6.787 223.17,11.005L223.17,340.005C203.092,331.724 178.482,328.349 151.826,331.661C84.717,340.005 30.514,386.849 30.67,436.255C30.858,485.708 85.373,519.068 152.42,510.724C219.498,502.396 273.717,455.536 273.545,406.083L273.545,75.857C289.373,79.17 325.487,82.078 345.487,96.766C403.276,126.948 447.919,177.279 436.7,225.4C472.776,196.911 457.956,119.93 441.28,102.27Z' style='fill-rule:nonzero;' fill='currentColor'/%3E%3Cg transform='matrix(3.00486,0,0,3.35578,-1239.22,-1581.21)'%3E%3Cpath d='M543.791,580.378C546.666,580.378 549.143,579.534 551.221,577.847C553.299,576.159 554.338,573.738 554.338,570.581C554.338,568.175 553.51,566.105 551.854,564.37C550.198,562.636 547.963,561.769 545.151,561.769C543.244,561.769 541.674,562.034 540.44,562.566C539.205,563.097 538.229,563.8 537.51,564.675C536.791,565.55 536.112,566.675 535.471,568.05C534.83,569.425 534.244,570.722 533.713,571.941C533.401,572.597 532.838,573.113 532.026,573.488C531.213,573.863 530.276,574.05 529.213,574.05C527.963,574.05 526.815,573.542 525.768,572.527C524.721,571.511 524.198,570.159 524.198,568.472C524.198,566.847 524.69,565.136 525.674,563.339C526.659,561.542 528.096,559.831 529.987,558.206C531.877,556.581 534.229,555.277 537.041,554.292C539.854,553.308 542.994,552.816 546.463,552.816C549.494,552.816 552.26,553.23 554.76,554.058C557.26,554.886 559.432,556.081 561.276,557.644C563.119,559.206 564.51,561.019 565.448,563.081C566.385,565.144 566.854,567.363 566.854,569.738C566.854,572.863 566.174,575.542 564.815,577.777C563.455,580.011 561.51,582.191 558.979,584.316C561.416,585.628 563.471,587.128 565.143,588.816C566.815,590.503 568.073,592.37 568.916,594.417C569.76,596.464 570.182,598.675 570.182,601.05C570.182,603.894 569.612,606.644 568.471,609.3C567.33,611.956 565.651,614.323 563.432,616.402C561.213,618.48 558.58,620.105 555.534,621.277C552.487,622.448 549.119,623.034 545.432,623.034C541.682,623.034 538.323,622.363 535.354,621.019C532.385,619.675 529.94,617.995 528.018,615.98C526.096,613.964 524.643,611.878 523.659,609.722C522.674,607.566 522.182,605.784 522.182,604.378C522.182,602.566 522.768,601.105 523.94,599.995C525.112,598.886 526.573,598.331 528.323,598.331C529.198,598.331 530.041,598.589 530.854,599.105C531.666,599.62 532.198,600.238 532.448,600.956C534.073,605.3 535.815,608.527 537.674,610.636C539.534,612.745 542.151,613.8 545.526,613.8C547.463,613.8 549.33,613.323 551.127,612.37C552.924,611.417 554.409,610.003 555.58,608.128C556.752,606.253 557.338,604.081 557.338,601.613C557.338,597.956 556.338,595.089 554.338,593.011C552.338,590.933 549.557,589.894 545.994,589.894C545.369,589.894 544.401,589.956 543.088,590.081C541.776,590.206 540.932,590.269 540.557,590.269C538.838,590.269 537.51,589.839 536.573,588.98C535.635,588.12 535.166,586.925 535.166,585.394C535.166,583.894 535.729,582.683 536.854,581.761C537.979,580.839 539.651,580.378 541.869,580.378L543.791,580.378Z' style='fill-rule:nonzero;' fill='currentColor'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
  }
  &.sixteenth {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 800 800' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='color:%23ffffff;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg id='sixteenth' transform='matrix(1.5625,0,0,1.5625,0,0)'%3E%3Cpath d='M441.28,102.27C345.188,0.504 244.32,0.884 244.32,0.884C238.375,0.483 237.746,0.049 232.821,0.879C228.645,1.583 223.17,6.787 223.17,11.005L223.17,340.005C203.092,331.724 178.482,328.349 151.826,331.661C84.717,340.005 30.514,386.849 30.67,436.255C30.858,485.708 85.373,519.068 152.42,510.724C219.498,502.396 273.717,455.536 273.545,406.083L273.545,75.857C289.373,79.17 325.487,82.078 345.487,96.766C403.276,126.948 447.919,177.279 436.7,225.4C472.776,196.911 457.956,119.93 441.28,102.27Z' style='fill-rule:nonzero;' fill='currentColor'/%3E%3Cg transform='matrix(0.873897,0,0,0.917482,28.1425,111.6)'%3E%3Cpath d='M432.976,92.254C336.884,-9.512 244.32,0.884 244.32,0.884C238.375,0.483 237.746,0.049 232.821,0.879C228.645,1.583 223.17,6.787 223.17,11.005L273.545,75.857C289.373,79.17 325.487,82.078 345.487,96.766C403.276,126.948 447.919,177.279 436.7,225.4C472.776,196.911 449.651,109.914 432.976,92.254Z' style='fill-rule:nonzero;' fill='currentColor'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }
  &.thirty-second {
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='0 0 800 800' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' xmlns:serif='http://www.serif.com/' style='color:%23ffffff;fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;'%3E%3Cg id='thirty-second' serif:id='thirty second' transform='matrix(1.5625,0,0,1.5625,0,0)'%3E%3Cg transform='matrix(0.705192,0,0,0.740364,66.4322,194.872)'%3E%3Cpath d='M432.976,92.254C336.884,-9.512 244.32,0.884 244.32,0.884C238.375,0.483 237.746,0.049 232.821,0.879C228.645,1.583 223.17,6.787 223.17,11.005L273.545,75.857C289.373,79.17 325.487,82.078 345.487,96.766C403.276,126.948 447.919,177.279 436.7,225.4C472.776,196.911 449.651,109.914 432.976,92.254Z' style='fill-rule:nonzero;' fill='currentColor'/%3E%3C/g%3E%3Cg transform='matrix(0.873897,0,0,0.917482,28.1425,98.8001)'%3E%3Cpath d='M432.976,92.254C336.884,-9.512 244.32,0.884 244.32,0.884C238.375,0.483 237.746,0.049 232.821,0.879C228.645,1.583 223.17,6.787 223.17,11.005L273.545,75.857C289.373,79.17 325.487,82.078 345.487,96.766C403.276,126.948 447.919,177.279 436.7,225.4C472.776,196.911 449.651,109.914 432.976,92.254Z' style='fill-rule:nonzero;' fill='currentColor'/%3E%3C/g%3E%3Cpath d='M441.28,102.27C345.188,0.504 244.32,0.884 244.32,0.884C238.375,0.483 237.746,0.049 232.821,0.879C228.645,1.583 223.17,6.787 223.17,11.005L223.17,340.005C203.092,331.724 178.482,328.349 151.826,331.661C84.717,340.005 30.514,386.849 30.67,436.255C30.858,485.708 85.373,519.068 152.42,510.724C219.498,502.396 273.717,455.536 273.545,406.083L273.545,75.857C289.373,79.17 325.487,82.078 345.487,96.766C403.276,126.948 447.919,177.279 436.7,225.4C472.776,196.911 457.956,119.93 441.28,102.27Z' style='fill-rule:nonzero;' fill='currentColor'/%3E%3C/g%3E%3C/svg%3E");
  }
}


.tripletWrap{
  position: relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.triplet3{
  position:absolute;
  right: -2px;
  top: -3px;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  opacity: .95;
}

/* --- Layout tune: avoid giant empty right column --- */
.topRow{
  grid-template-columns: 1fr 420px;
  align-items: start;
}
@media (max-width: 1100px){
  .topRow{ grid-template-columns: 1fr; }
}

/* Remove the big 'Play' heading (we removed it in HTML) and keep footer clean */
main{ padding-bottom: 240px; }

/* Nicer ARP rate icons */
.arpRateBtn{
  width: 52px;
  height: 52px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.noteSvg{
  width: 26px;
  height: 26px;
  display:block;
}

.noteSvg .head{ fill: currentColor; }
.noteSvg .stem, .noteSvg .flag{
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.tripletWrap{
  position: relative;
  width: 34px;
  height: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.tripletWrap .noteSvg{
  width: 26px;
  height: 26px;
}
.tripletMark{
  position:absolute;
  left: 50%;
  bottom: -6px;
  width: 44px;
  height: 18px;
  transform: translateX(-50%);
  opacity: .95;
  pointer-events:none;
}






/* Mobile piano UX: prevent iOS text selection/callout and enable smooth pointer gliding */
#piano, .keyWhite, .keyBlack, .keyWhite *, .keyBlack * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.keyWhite, .keyBlack {
  touch-action: none; /* allow pointermove gliding without scrolling/zooming */
}

.whiteLabel, .keyHint {
  pointer-events: none; /* prevent selecting labels/hints */
}

/* --- Tron arcade neon pass (v51) --- */
.topbar{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  gap: 14px;
  width:100%;
  box-sizing:border-box;
  padding: 12px 16px;
  background: linear-gradient(180deg, rgba(9,12,20,0.92) 0%, rgba(6,8,14,0.75) 100%);
  box-shadow:
    0 10px 30px rgba(0,0,0,0.55),
    0 0 0 1px rgba(55,232,255,0.06) inset;
}
.topbarCenter{justify-self:center; max-width: 720px; width: 100%;}
.topbarRight{justify-self:end; margin-left:auto;}
.brandTitle{
  letter-spacing: 0.06em;
  text-shadow: 0 0 12px rgba(55,232,255,0.25), 0 0 22px rgba(168,255,62,0.12);
}
.brandSub{opacity:0.9; color: rgba(210,235,255,0.85);}

/* panels / boxes neon edges */
.panel, .module, .card, .section, .box{
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 28px rgba(55,232,255,0.07);
  backdrop-filter: blur(10px);
}

button, 
.btnIcon, 
.btnSavePreset, 
.btn {
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 10px 28px rgba(0,0,0,0.45);
  &:hover{
    border-color: rgba(55,232,255,0.35);
    box-shadow:
      0 0 0 1px rgba(55,232,255,0.12) inset,
      0 0 18px rgba(55,232,255,0.16),
      0 16px 36px rgba(0,0,0,0.55);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 40%, transparent 80%), 0 0 18px rgba(55,232,255,0.22);
  }
  &:active{
    transform: translateY(1px);
  }
}

/* active selections: neon ring */
.isActive, .active, .selected, .on{
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 100%, white 80%), 0 0 18px rgba(55,232,255,0.22) !important;

}


input[type="range"] {
  height: 15px;
  -webkit-appearance: none;
  background: #111;
  outline: none;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
  width:100%;
  margin:10px 0 0 0;
  accent-color: var(--accent);
  position:relative;
  z-index:1;
  &:focus {
      outline: none;
      border: 1px solid color-mix(in srgb, var(--accent) 50%, black 80%);
  }


  /* sliders accent */
  &::-webkit-slider-thumb{
    box-shadow: 0 0 0 2px rgba(255,255,255,0.12), 0 0 18px rgba(55,232,255,0.22);
  }
  &::-webkit-slider-runnable-track{
    background: linear-gradient(90deg, rgba(55,232,255,0.35), rgba(168,255,62,0.24));
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 50%, black 80%), color-mix(in srgb, var(--accent) 30%, black 70%));
  }
  &::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent); /* #00fd0a  */
    cursor: pointer;
    border: 4px solid #333;
    box-shadow: -407px 0 0 400px var(--accent);
  }
  &::-moz-range-thumb{
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
    border: 4px solid #333;
    box-shadow: -407px 0 0 400px var(--accent);
  }

  /* style the mix slider  */
  &.mixSlider{
    &::-webkit-slider-thumb{
      box-shadow: none !important;
      border: 4px solid var(--accent) !important;
      background-color: #333;
      padding: 5px;
    }
    &::-moz-range-thumb{
      box-shadow: none !important;
      border: 1px solid var(--accent);
      padding: 5px;
    }
  }

  /* style the detuning slider  */
  &.detuneSlider{
    writing-mode: vertical-lr;
    -webkit-appearance: none;
  

    width: 28px;
    height: calc(var(--keyboard-height) - 20px);
    margin: 14px 0 0;
  
    /* Make the track basically invisible (no “line indicator”) */
    &::-webkit-slider-runnable-track{
    }
    &::-moz-range-track{
    }

    /* Bigger “handle” */
    &::-webkit-slider-thumb{
      width: 28px;
      height: 28px;
      box-shadow: none !important;
      border: 4px solid var(--accent) !important;
      background-color: rgba(0,0,0,0);
      margin-left: -7px;
    }
    &::-moz-range-thumb{
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.25);

      width: 28px;
      height: 28px;
      box-shadow: none !important;
      border: 4px solid var(--accent) !important;
      background-color: rgba(0,0,0,0);
      margin-left: -7px;
    }

}
}



/* waveform canvas frame */
#waveCanvas, canvas.waveform, .waveCanvas{
  border: 1px solid rgba(55,232,255,0.18);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 30px rgba(55,232,255,0.08);
}

/* recorder record button stays red */
.recBtn, #recBtn, button.rec, .btnRecord{
  background: linear-gradient(180deg, rgba(255,88,88,0.18), rgba(120,12,24,0.35));
  border-color: rgba(255,88,88,0.45);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 20px rgba(255,88,88,0.15);
}

/* Narrow display styling */
@media (max-width: 700px){
  /* now we really need to make the UI into one column */
  body {
    .card {
       grid-template-columns:1fr;
    }
    .keyHint {
      display: none;
    }
}
}

@media (max-width: 980px){
  /* UI can work as 2 column here */
  body {
    padding: 0;
  }
  main {
    padding-top: 100px;
  }
  header {
    padding: 10px;
    .topbar {
      padding: 0;
    }
    .knob {
      height: 45px;
      width: 45px;
    }
  }
  .card {
    padding: 14px;
    grid-template-columns:1fr 1fr;
  }
  .keyboardUI{
    padding: 8px 5px 5px;
    border-top: 3px solid rgba(255,255,255,.12);
    .pianoWrap {
      padding: 0;
      border: 0;
      background: transparent;
    }
    .detuneLabel {
      transform: rotate(-90deg);
      top: 22px;
      position: relative;
    }
    .detuneSpring {
      display: none;
    }
  }
  .topbar {
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px;
    .brand {
      clear: both;
      grid-column: span 2;
      * {display: inline-block;}
     .brandTitle {
        font-size: 16px;
        margin-right: 10px;
     }
     .brandSub {
     }
   }
   .topbarCenter {
      .presetLine {
          button, input {
            display: none;
          }
      }
    }
    .topbarRight {
    }
    #scopeWrapHeader {
        border-left: 1px solid rgba(255,255,255,0.10);
        display: grid;
        grid-row: span 2;
        grid-column: span 2;

        .scopeWrap {
          border-radius: 0;
          border: 0;
          canvas#scope {
            height: 60px;
          }
        }
     }
  }
  .groupGrid3{grid-template-columns: 1fr;}
  .arpPair{ grid-template-columns: 1fr; }
  .row{grid-template-columns:1fr} 
  .grid{grid-template-columns: 1fr;}
}