:root{

  --bg:#f0ede8;
  --bg2:#e8e4de;
  --panel:#faf8f4;
  --panel2:#f4f0ea;
  --brd:#c8c0b0;
  --brd2:#d4cfc8;
  /* Neon accents */
  --cyan:#00c8e8;
  --red:#e83040;
  --gold:#c8a020;
  --blue:#2060d8;
  --teal:#008870;
  --rose:#e840a0;

  --ar-orange:#e86820;
  --ar-blue:#1048c8;
  --ar-line:#c0b8a8;
  /* Text */
  --tx:white;
  --tx2:#5a5048;
  --tx3:#8a8078;
  /* Knobs */
  --knob-bg:radial-gradient(circle at 35% 30%,#484038,#1a1810);
  --knob-brd:#3a3430;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  background: url("fond.jpg") center / cover no-repeat fixed;
  font-family:'Share Tech Mono',monospace;
  color:var(--tx);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:20px 0 40px;
  overflow-x:hidden;
}


body::before{
  content:'';
  position:fixed;inset:0;
  pointer-events:none;z-index:0;
  background:repeating-linear-gradient(
    -55deg,
    transparent,transparent 40px,
    rgba(0,0,0,.018) 40px,rgba(0,0,0,.018) 41px
  );
}
/* Scan lines subtle */
.scan{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(0deg,transparent 2px,rgba(0,0,0,.025) 3px,transparent 4px);}

.wrap{position:relative;z-index:1;width:min(96vw,990px)}

/* ── TITLES ── */
.ttl{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.1rem,3vw,2rem);
  letter-spacing:.45em;
  color:var(--pi);
  text-align:center;margin-bottom:4px;
  animation:shimmer 4s ease-in-out infinite;
  
}
@keyframes shimmer{
  0%,100%{text-shadow:0 0 12px lightsteelblue;}
  90%{text-shadow:0 0 9px gold; }
}
.sub{
  font-family:'Rajdhani',sans-serif;font-size:.65rem;letter-spacing:.5em;
  color:black;margin-bottom:16px;text-align:center;
}

.arc-line{
  height:2px;
  background:linear-gradient(90deg,transparent,var(--ar-orange),var(--cyan),var(--ar-blue),transparent);
  margin-bottom:16px;border-radius:2px;opacity:.8;
}

/* ── PANELS ── */
.panel{
  background:#EDE7E0;
  border:1px solid var(--brd);
  border-radius:14px;
  padding:18px;
  box-shadow:
    0 2px 0 rgba(255,255,255,.9) inset,
    0 -1px 0 rgba(0,0,0,.08) inset,
    0 8px 32px rgba(0,0,0,.1),
    0 2px 8px rgba(0,0,0,.06);
  position:relative;overflow:hidden;
}
.panel::before{
  content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
.hr{height:1px;background:linear-gradient(90deg,transparent,var(--brd),transparent);margin:11px 0}

/* ── SECTION HEADERS ── */
.sec-hdr{
  font-family:'Orbitron',sans-serif;
  font-size:.5rem;letter-spacing:.22em;
  color:var(--tx3);
  margin-bottom:7px;
  display:flex;align-items:center;gap:8px;
}
.sec-hdr::after{content:'';flex:1;height:1px;background:var(--brd2);}

/* ── KNOBS (dark/reflective) ── */
.knob{
  width:36px;height:36px;border-radius:50%;
  background:var(--knob-bg);
  border:2px solid var(--knob-brd);
  position:relative;cursor:ns-resize;user-select:none;
  box-shadow:
    0 4px 10px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.15),
    inset 0 -2px 4px rgba(0,0,0,.4),
    0 0 0 1px rgba(255,255,255,.08);
}
.knob:hover{box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2),0 0 8px var(--cyan)40;}
.knob.dg{box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2),0 0 14px var(--cyan)80;}
.kdot{position:absolute;width:3px;height:3px;background:var(--cyan);border-radius:50%;
  top:4px;left:50%;transform:translateX(-50%);transform-origin:center 14px;box-shadow:0 0 4px var(--cyan)}
.kw2{display:flex;flex-direction:column;align-items:center;gap:2px}
.kl{font-size:.38rem;color:var(--tx3);text-align:center;max-width:42px;letter-spacing:.04em}
.kv{font-size:.38rem;color:var(--cyan);font-family:'Orbitron',sans-serif;min-width:30px;text-align:center}
.kr{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}

/* ── MIDI ── */
.mbar{display:flex;align-items:center;gap:8px;margin-bottom:10px;padding:5px 11px;
  background:var(--panel2);border:1px solid var(--brd2);border-radius:6px;flex-wrap:wrap}
.mbtn{font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.1em;padding:4px 9px;
  background:var(--panel);border:1px solid var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .2s}
.mbtn:hover,.mbtn.ok{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 8px var(--cyan)40;}
.mdev{font-size:.5rem;color:var(--cyan)}
.mhint{font-size:.43rem;color:var(--tx3);margin-left:auto}
.led{width:7px;height:7px;border-radius:50%;background:var(--brd);flex-shrink:0}
.led.on{background:var(--cyan);box-shadow:0 0 6px var(--cyan)}

/* ── OSCILLOSCOPE ── */
.olbl{font-size:.5rem;letter-spacing:.22em;color:var(--tx3);margin-bottom:3px}
.osc-wrap-inline{
  display:flex;flex-direction:column;gap:2px;
  background:var(--panel2);border:1px solid var(--brd);border-radius:8px;
  padding:6px 8px;flex-shrink:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(0,0,0,.06);
}
.osc-lbl-inline{font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.18em;color:var(--tx3)}
#osc{width:140px;height:46px;
  background:linear-gradient(180deg,#fdf9f4 0%,#f5f0e8 100%);
  border:1px solid var(--brd);border-radius:5px;display:block;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.08);}

/* ── SYNTH VOICE MODE SELECTOR ── */
.voice-mode-wrap{
  display:flex;align-items:center;gap:6px;
  background:var(--panel2);
  border:1px solid var(--brd2);
  border-radius:8px;padding:6px 10px;
  margin-bottom:12px;
}
.voice-mode-lbl{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.12em;color:var(--tx3)}
.vm-btn{
  font-family:'Orbitron',sans-serif;font-size:.46rem;letter-spacing:.1em;
  padding:5px 14px;border-radius:6px;cursor:pointer;border:1.5px solid pink;
  color:var(--tx3);background:var(--panel);transition:all .2s;
}
.vm-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.vm-btn.feel.act{background:linear-gradient(135deg,#001830,#002850);border-color:pink;color:var(--cyan);box-shadow:0 0 12px var(--cyan)40,inset 0 0 8px rgba(0,200,232,.05);}
.vm-btn.love.act{background:linear-gradient(135deg,#1a0030,#280048);border-color:var(--rose);color:white;box-shadow:0 0 12px var(--rose)40;}
.vm-btn.bass.act{background:linear-gradient(135deg,#180808,#280a00);border-color:var(--ar-orange);color:lightgreen;box-shadow:0 0 12px var(--ar-orange)40;}
.vm-desc{font-size:.7rem;color:red;font-style:italic;margin-left:auto}

/* ── FX GRID (Synth) ── */
.fxgrid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.fxbox{
  background:var(--panel2);
  border:1px solid var(--brd2);
  border-radius:10px;padding:10px 8px;
  display:flex;flex-direction:column;align-items:center;gap:5px;
  position:relative;overflow:hidden;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 2px 6px rgba(0,0,0,.06);
}
.fxbox::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;border-radius:10px 10px 0 0}
.fx-rv::before{background:linear-gradient(90deg,grey,transparent)}
.fx-ch::before{background:linear-gradient(90deg,black,transparent)}
.fx-fl::before{background:linear-gradient(90deg,)}
.fx-dl::before{background:linear-gradient(90deg,transparent,black)}
.fx-fi::before{background:linear-gradient(90deg,transparent,grey)}
.fxtit{
  font-family:'Orbitron',sans-serif;font-size:.51rem;letter-spacing:.18em;
  align-self:flex-start; color: black!important;
  animation:sec-shimmer 5s ease-in-out infinite;
}
.fx-rv .fxtit{color:var(--ar-blue);text-shadow:0 0 8px var(--cyan)30;}
.fx-ch .fxtit{color:var(--rose);text-shadow:0 0 8px var(--rose)30;}
.fx-fl .fxtit{color:#a020e0;text-shadow:0 0 8px #a020e030;}
.fx-dl .fxtit{color:var(--gold);text-shadow:0 0 8px var(--gold)30;}
.fx-fi .fxtit{color:var(--teal);text-shadow:0 0 8px var(--teal)30;}

@keyframes sec-shimmer{
  0%,100%{opacity:.85}
  50%{opacity:1}
}

/* Toggle switch */
.tog{width:28px;height:14px;background:var(--brd2);border:1px solid var(--brd);border-radius:7px;
  position:relative;cursor:pointer;flex-shrink:0;transition:background .2s}
.tog.on{background:#002840;border-color:var(--cyan);box-shadow:0 0 6px var(--cyan)50;}
.tog::after{content:'';position:absolute;top:2px;left:2px;width:8px;height:8px;border-radius:50%;
  background:#b0a898;transition:left .18s}
.tog.on::after{left:16px;background:var(--cyan);box-shadow:0 0 4px var(--cyan)}
.tl{font-size:.43rem;color:var(--tx3)}.tl.on{color:var(--cyan)}

/* ── FX ROW 2 (Oscillators / LFO / Gater / EQ) ── */
.fx2grid{display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.osc-box{
  background:var(--panel2);border:1px solid var(--brd2);border-radius:10px;
  padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:5px;
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(0,0,0,.06);
}
.osc-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;border-radius:10px 10px 0 0;}
.osc1::before{background:linear-gradient(90deg,,transparent)}
.osc2::before{background:linear-gradient(90deg,,transparent)}
.lfo-box::before{background:linear-gradient(90deg,,transparent)}
.osc-tit{font-family:'Orbitron',sans-serif;font-size:.51rem;letter-spacing:.18em;align-self:flex-start;animation:sec-shimmer 5s ease-in-out infinite; color:black!important;}
.osc1 .osc-tit{color:var(--ar-orange);}
.osc2 .osc-tit{color:var(--ar-blue);}
.lfo-box .osc-tit{color:var(--teal);}
.gater-box .osc-tit{color:var(--gold);}
.seq-eq-box .osc-tit{color:#8020d0;}

/* OSC ON/OFF toggle inside osc box */
.osc-onoff{
  display:flex;align-items:center;gap:4px;
  font-family:'Orbitron',sans-serif;font-size:.38rem;letter-spacing:.06em;
  padding:2px 7px;border-radius:4px;cursor:pointer;border:1.5px solid var(--brd);
  background:var(--panel);color:var(--tx3);transition:all .15s;
}
.osc-onoff.on.osc1-on{border-color:var(--ar-orange);color:var(--ar-orange);background:#fff4ec;box-shadow:0 0 6px var(--ar-orange)30;}
.osc-onoff.on.osc2-on{border-color:green!important;color:green!important;background:;box-shadow:0 0 6px black 30;}
.osc-onoff-dot{width:6px;height:6px;border-radius:50%;background:var(--brd);transition:all .15s;}
.osc-onoff.on.osc1-on .osc-onoff-dot{background:var(--ar-orange);box-shadow:0 0 4px var(--ar-orange);}
.osc-onoff.on.osc2-on .osc-onoff-dot{background:green!important;box-shadow:0 0 4px green!important;}

/* wave buttons and LFO */
.osc-row{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.wave-btn{font-size:.4rem;padding:2px 6px;background:var(--panel);border:1.5px solid var(--brd);
  color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .12s;letter-spacing:.04em}
.wave-btn.on{background:#001820;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 6px var(--cyan)40;}
.lfo-row{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.lfo-btn{font-size:.4rem;padding:2px 6px;background:var(--panel);border:1.5px solid var(--brd);
  color:var(--tx3);border-radius:3px;cursor:pointer;transition:all .12s}
.lfo-btn.on{background:#001a18;border-color:var(--teal);color:var(--teal);box-shadow:0 0 6px var(--teal)40;}
.lfo-rate-wrap{display:flex;align-items:center;gap:4px;width:100%;flex-wrap:wrap}
.lfo-lbl{font-size:.38rem;color:var(--tx3)}

/* ── KEYBOARD ── */
.gin{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}
.trow{display:flex;align-items:center;gap:6px}
.tbr{display:flex;gap:2px}
.tb{padding:2px 5px;font-size:.4rem;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);border-radius:3px;cursor:pointer;transition:all .12s;font-family:'Orbitron',sans-serif;letter-spacing:.04em}
.tb.s{background:#fffbec;border-color:var(--gold);color:var(--gold);box-shadow:0 0 5px var(--gold)30;}

/* Synth EQ (3-band) faders — light style */
.seq-eq-faders{display:flex;gap:6px;justify-content:center;width:100%}
.seq-eq-band{display:flex;flex-direction:column;align-items:center;gap:2px}
.seq-eq-fader{position:relative;width:16px;height:54px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;user-select:none;}
.seq-eq-track{position:absolute;left:50%;transform:translateX(-50%);width:3px;height:100%;background:linear-gradient(180deg,#ddd8d0,#c8c0b8);border-radius:2px;border:1px solid var(--brd);}
.seq-eq-center{position:absolute;left:50%;transform:translateX(-50%);width:8px;height:1px;background:#8020d040;top:50%;pointer-events:none}
.seq-eq-thumb{position:absolute;left:50%;transform:translateX(-50%);width:14px;height:9px;background:linear-gradient(180deg,#e8e0d0,#b8b0a0);border:1px solid #9890808a;border-radius:2px;box-shadow:0 1px 0 rgba(255,255,255,.6),0 2px 4px rgba(0,0,0,.12);pointer-events:none}
.seq-eq-fader.active .seq-eq-thumb{background:linear-gradient(180deg,#f0e8d8,#c0b8a8);box-shadow:0 0 6px #8020d050,0 2px 4px rgba(0,0,0,.15)}
.seq-eq-lbl{font-size:.36rem;color:var(--tx3);text-align:center;}
.seq-eq-val{font-size:.36rem;color:#8020d0;font-family:'Orbitron',sans-serif;min-width:22px;text-align:center}

/* MOD wheel */
.mod-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.mod-lbl{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.15em;color:var(--tx3)}
.mod-scale-wrap{display:flex;gap:3px;align-items:stretch}
.mod-scale{display:flex;flex-direction:column;justify-content:space-between;padding:2px 0}
.mod-scale-tick{font-size:.3rem;color:var(--tx3);letter-spacing:0;line-height:1;white-space:nowrap}
.mod-body{width:18px;height:80px;background:linear-gradient(180deg,#2a2420,#1a1610);
  border:1px solid #4a4038;border-radius:8px;position:relative;cursor:ns-resize;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.15)}
.mod-groove{position:absolute;left:50%;top:5px;bottom:5px;width:2px;transform:translateX(-50%);background:rgba(255,255,255,.08);border-radius:2px}
.mod-center-line{position:absolute;left:2px;right:2px;height:1px;top:50%;background:rgba(0,200,232,.3);pointer-events:none}
.mod-thumb{position:absolute;left:50%;width:14px;height:18px;background:linear-gradient(180deg,#e0d8c8,#a09880);border:1px solid #7a7060;border-radius:3px;transform:translateX(-50%);top:calc(50% - 9px);
  box-shadow:0 2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.mod-val{font-family:'Orbitron',sans-serif;font-size:.36rem;color:var(--rose);min-width:20px;text-align:center}

/* ── DRUM PADS — styled ── */
.dpad{
  width:76px;height:76px;
  border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:'Orbitron',sans-serif;
  transition:all .07s;user-select:none;
  position:relative;overflow:hidden;
}
.dpad::before{
  content:'';position:absolute;top:0;left:0;right:0;height:35%;
  background:linear-gradient(180deg,rgba(255,255,255,.35),transparent);
  border-radius:10px 10px 0 0;pointer-events:none;
}
.dpad-key{font-size:.8rem;font-weight:900;line-height:1}
.dpad-name{font-size:.36rem;letter-spacing:.12em;line-height:1;opacity:.7}
.dk{
  background:linear-gradient(145deg,#2a2420 0%,#1a1610 50%,#222018 100%);
  border:1.5px solid #4a4038;color:#d0b880;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.1),0 6px 16px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04);
}
.ds{
  background:linear-gradient(145deg,#1a2420 0%,#101810 50%,#182018 100%);
  border:1.5px solid #385038;color:#80d090;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04);
}
.dh2{
  background:linear-gradient(145deg,#1a2028 0%,#101420 50%,#161820 100%);
  border:1.5px solid #303850;color:#80a0d0;
  box-shadow:inset 0 2px 0 rgba(255,255,255,.08),0 6px 16px rgba(0,0,0,.3),0 0 0 1px rgba(255,255,255,.04);
}
.dpad.hit{
  transform:scale(.9) translateY(2px);
}
.dk.hit{
  box-shadow:0 0 30px var(--gold),0 0 60px var(--gold)40,inset 0 2px 0 rgba(255,255,255,.15)!important;
  border-color:var(--gold)!important;color:var(--gold)!important;
  background:linear-gradient(145deg,#3a3010,#282008,#302808)!important;
}
.ds.hit{
  box-shadow:0 0 30px var(--teal),0 0 60px var(--teal)40,inset 0 2px 0 rgba(255,255,255,.12)!important;
  border-color:var(--teal)!important;color:var(--teal)!important;
  background:linear-gradient(145deg,#103020,#081808,#102018)!important;
}
.dh2.hit{
  box-shadow:0 0 30px var(--cyan),0 0 60px var(--cyan)40,inset 0 2px 0 rgba(255,255,255,.12)!important;
  border-color:var(--cyan)!important;color:var(--cyan)!important;
  background:linear-gradient(145deg,#102028,#081018,#102028)!important;
}
.kbsec{margin-top:10px}
.kbwrap{
  background:var(--panel2);
  border:1px solid var(--brd);
  border-radius:10px;
  padding:8px 10px 6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 12px rgba(0,0,0,.08);
  flex:1;
}
.kbinner{position:relative;height:78px;display:flex;}
.wkeys{display:flex;gap:2px}
.kyw{
  width:38px;height:78px;
  background:linear-gradient(to bottom,#faf8f4 82%,#e8e4de);
  border:1px solid #b0a898;border-radius:0 0 5px 5px;cursor:pointer;position:relative;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
  transition:background .05s;
  box-shadow:0 3px 5px rgba(0,0,0,.12),inset 0 -2px 3px rgba(0,0,0,.06),inset 0 1px 0 rgba(255,255,255,.9);
}
.kyw:hover{background:linear-gradient(to bottom,#eef8ff 82%,#d0e8f4)}
.kyw.on{background:linear-gradient(to bottom,var(--cyan),#0090b0)!important;
  box-shadow:0 0 18px var(--cyan),0 0 35px rgba(0,200,232,.35);
  transform:translateY(1px)}
.kh{font-size:.4rem;color:#8a8078;text-transform:uppercase;pointer-events:none}
.kyw.on .kh{color:#fff;text-shadow:0 0 4px rgba(255,255,255,.8)}
.bkeys{position:absolute;top:0;left:0;pointer-events:none}
.kyb{
  width:24px;height:50px;
  background:linear-gradient(to bottom,#2a2420 72%,#1a1610);
  border:1px solid #4a4038;border-radius:0 0 4px 4px;position:absolute;top:0;
  cursor:pointer;pointer-events:all;display:flex;align-items:flex-end;justify-content:center;
  padding-bottom:4px;box-shadow:0 4px 7px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.1);z-index:2;
}
.kyb:hover{background:linear-gradient(to bottom,#3a3028 72%,#2a2018)}
.kyb.on{background:linear-gradient(to bottom,var(--red),#a01020)!important;
  box-shadow:0 0 16px var(--red),0 0 30px rgba(230,0,40,.35);transform:translateY(1px)}
.kyb .kh{font-size:.35rem;color:#6a6058}.kyb.on .kh{color:#fff}

/* keyboard footer */
.kbfoot{display:flex;justify-content:space-between;align-items:center;margin-top:6px;gap:8px}
.kbhint{font-size:.4rem;color:var(--tx3)}
.kbright{display:flex;align-items:center;gap:8px}
.octw{display:flex;align-items:center;gap:4px}
.ob{width:20px;height:20px;background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);
  font-family:'Orbitron',sans-serif;font-size:.62rem;border-radius:4px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 2px 4px rgba(0,0,0,.1)}
.ob:hover{border-color:var(--cyan);color:var(--cyan)}
.od{font-family:'Orbitron',sans-serif;font-size:.52rem;color:var(--ar-blue);min-width:40px;text-align:center;font-weight:700}

/* KILL NOTES */
.kill-btn{
  font-family:'Orbitron',sans-serif;font-size:.46rem;letter-spacing:.08em;
  padding:5px 11px;border-radius:6px;cursor:pointer;
  background:var(--panel);
  border:1.5px solid var(--red);color:var(--red);
  box-shadow:0 0 8px var(--red)20,inset 0 1px 0 rgba(255,255,255,.6);
  transition:all .12s;
}
.kill-btn:hover{background:#fff0f0;border-color:var(--red);box-shadow:0 0 16px var(--red)40;}
.kill-btn:active{transform:scale(.94)}

/* ── PITCH WHEEL ── */
.pw-wrap{display:flex;flex-direction:column;align-items:center;gap:3px;flex-shrink:0}
.pw-lbl{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.15em;color:var(--tx3)}
.pw-body{width:18px;height:78px;background:linear-gradient(180deg,#2a2420,#1a1610);
  border:1px solid #4a4038;border-radius:10px;position:relative;cursor:ns-resize;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.15)}
.pw-groove{position:absolute;left:50%;top:5px;bottom:5px;width:2px;transform:translateX(-50%);
  background:rgba(255,255,255,.08);border-radius:2px}
.pw-thumb{position:absolute;left:50%;width:14px;height:22px;background:linear-gradient(180deg,#e0d8c8,#a09880);
  border:1px solid #7a7060;border-radius:4px;transform:translateX(-50%);top:39px;
  box-shadow:0 2px 4px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.4)}
.pw-val{font-family:'Orbitron',sans-serif;font-size:.38rem;color:var(--cyan);min-width:20px;text-align:center}
.pw-rst{font-size:.38rem;padding:2px 6px;background:var(--panel);border:1px solid var(--brd);
  color:var(--tx3);border-radius:3px;cursor:pointer;font-family:'Orbitron',sans-serif;letter-spacing:.06em}
.pw-keys{font-size:.36rem;color:var(--tx3);text-align:center}

/* ── PRESETS SYNTHÉ ── */
.preset-panel{
  background:var(--panel2);
  border:1px solid var(--brd);
  border-radius:10px;padding:12px 10px;min-width:162px;max-width:172px;flex-shrink:0;
  position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 4px 12px rgba(0,0,0,.06);
}
.preset-panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2.5px;
  background:linear-gradient(90deg,black,transparent);opacity:.9}
.preset-title{
  font-family:'Orbitron',sans-serif;font-size:.5rem;letter-spacing:.22em;
  color:var(--ar-blue);margin-bottom:9px;text-align:center;
  animation:shimmer 4s ease-in-out infinite;
}
.preset-item{background:var(--panel);border:1.5px solid var(--brd2);border-radius:7px;margin-bottom:6px;overflow:hidden;transition:all .15s}
.preset-item.active{border-color:var(--cyan);box-shadow:0 0 8px var(--cyan)30;}
.preset-item-top{display:flex;align-items:center;gap:4px;padding:5px 7px}
.preset-name-inp{background:transparent;border:none;color:black;font-family:'Share Tech Mono',monospace;font-size:.46rem;flex:1;outline:none;min-width:0;cursor:pointer}
.preset-name-inp:focus{color:var(--ar-blue);cursor:text}
.preset-name-inp::placeholder{color:var(--tx3)}
.preset-btns{display:flex;gap:3px}
.preset-btn{font-family:'Orbitron',sans-serif;font-size:.38rem;padding:2px 6px;border-radius:3px;cursor:pointer;border:1px solid;transition:all .12s;letter-spacing:.04em}
.preset-select-btn{border-color:var(--brd);color:var(--tx3);background:var(--panel2)}
.preset-select-btn:hover,.preset-item.active .preset-select-btn{border-color:var(--cyan);color:var(--cyan);background:#e8f8ff;}
.preset-save-btn{border-color:#b8e0b0;color:#508040;background:#f4fff4}
.preset-save-btn:hover{border-color:#20a020;color:#20a020;background:#e8ffe8;}
.preset-add-btn{width:100%;font-family:'Orbitron',sans-serif;font-size:.44rem;padding:6px;
  background:var(--panel);border:1.5px dashed var(--brd);color:var(--tx3);border-radius:6px;cursor:pointer;transition:all .15s;letter-spacing:.1em;margin-top:2px}
.preset-add-btn:hover{border-color:var(--cyan);color:var(--cyan);}
.preset-add-btn:disabled{opacity:.28;cursor:default;pointer-events:none}
.preset-empty{font-size:.4rem;color:var(--tx3);text-align:center;padding:4px 0;font-style:italic}

/* ── KBAREA ── */
.kbarea{display:flex;align-items:flex-start;gap:10px;justify-content:center}

/* ── VU METER ── */
.vu-wrap{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.vu-title{font-family:'Orbitron',sans-serif;font-size:.4rem;letter-spacing:.18em;color:var(--tx3);text-align:center}
.vu-inner{display:flex;flex-direction:row;align-items:flex-end;gap:10px}
.vu-body{
  width:28px;height:100px;
  background:linear-gradient(180deg,#1a1610,#100e0c);
  border-radius:5px;border:1px solid #3a3028;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.7),0 2px 8px rgba(0,0,0,.15);
  position:relative;overflow:hidden;padding:4px;
  display:flex;flex-direction:column;justify-content:flex-end;
}
.vu-body::before{content:'';position:absolute;inset:0;
  background:repeating-linear-gradient(180deg,transparent 0px,transparent 5px,rgba(0,0,0,.2) 5px,rgba(0,0,0,.2) 6px);
  pointer-events:none;z-index:3;}
.vu-body::after{content:'';position:absolute;top:0;left:0;right:0;height:30%;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent);pointer-events:none;z-index:4;}
.vu-seg{width:100%;flex-shrink:0;border-radius:2px;margin-bottom:1px;position:relative;transition:background .04s,box-shadow .04s}
.vu-scale{position:absolute;right:-22px;top:4px;bottom:4px;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;z-index:6}
.vu-tick{font-family:'Orbitron',sans-serif;font-size:.3rem;color:var(--tx3);line-height:1;white-space:nowrap}
.vu-tick.hot{color:var(--red)60;}
.vu-clip-led{width:10px;height:10px;border-radius:50%;background:var(--panel2);border:1px solid var(--brd);box-shadow:inset 0 1px 2px rgba(0,0,0,.1);transition:all .08s;flex-shrink:0;align-self:center;margin-bottom:4px}
.vu-clip-led.on{background:var(--red);box-shadow:0 0 8px var(--red),0 0 16px var(--red)60;border-color:var(--red)}
.vu-clip-lbl{font-family:'Orbitron',sans-serif;font-size:.3rem;color:var(--tx3);letter-spacing:.1em}
.vu-clip-lbl.on{color:var(--red)}

/* ── MASTER VOLUME ── */
.mvol-section{display:flex;flex-direction:column;align-items:center;gap:4px;
  background:var(--panel2);border:1px solid var(--brd2);border-radius:8px;padding:8px 10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 6px rgba(0,0,0,.06)}
.mvol-section::before{content:'';display:block;width:100%;height:2px;border-radius:2px;
  margin-bottom:2px}
.mvol-lbl{font-family:'Orbitron',sans-serif;font-size:.42rem;letter-spacing:.16em;color:var(--tx3)}
.mvol-knob{width:42px;height:42px;border-radius:50%;
  background:var(--knob-bg);border:2px solid var(--knob-brd);
  position:relative;cursor:ns-resize;user-select:none;
  box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15),0 0 10px var(--cyan)20;}
.mvol-knob:hover{box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2),0 0 18px var(--cyan)50;}
.mvol-knob.dg{box-shadow:0 4px 14px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.2),0 0 22px var(--ar-orange)80;}
.mvol-dot{position:absolute;width:3px;height:3px;background:var(--ar-orange);border-radius:50%;
  top:5px;left:50%;transform:translateX(-50%);transform-origin:center 16px;box-shadow:0 0 4px var(--ar-orange)}
.mvol-val{font-family:'Orbitron',sans-serif;font-size:.44rem;color:var(--ar-orange);min-width:32px;text-align:center}

/* ── SUSTAIN button ── */
.su-btn{font-family:'Orbitron',sans-serif;font-size:.46rem;letter-spacing:.1em;padding:5px 12px;
  background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);border-radius:6px;cursor:pointer;
  transition:all .18s;width:100%;margin-top:3px}
.su-btn.on{background:#e8fff4;border-color:#20c060;color:#20a050;box-shadow:0 0 10px #20c06030;}
#su2Btn{border-color:#2060a0;color:#2060a0;}
#su2Btn.on{background:#e8f4ff;border-color:#2080e0;color:#1060c0;box-shadow:0 0 10px #2080e030;}

/* ── COLLAPSIBLE (Drum / Loop) ── */
.csec{width:100%;margin-bottom:10px}
.cbar{
  display:flex;align-items:center;gap:9px;padding:7px 13px;
  background:var(--panel);border:1.5px solid var(--brd);border-radius:8px;
  cursor:pointer;user-select:none;transition:all .16s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.06);
}
.cbar:hover{background:var(--panel2)}
.cbar.op{border-radius:8px 8px 0 0;border-bottom-color:transparent}
.ci{font-size:.54rem;display:inline-block;transition:transform .22s}
.cbar.op .ci{transform:rotate(90deg)}
.cbar-drum .ci{color:var(--ar-orange)}
.cbar-loop .ci{color:var(--teal)}
.ct{font-family:'Orbitron',sans-serif;font-size:.56rem;letter-spacing:.22em;animation:shimmer 4s ease-in-out infinite;}
.cbar-drum .ct{color:var(--ar-orange);}
.cbar-loop .ct{color:var(--teal);}
.cbadge{font-size:.42rem;border:1.5px solid;border-radius:3px;padding:1px 4px;display:none}
.cbadge.sh{display:inline-block;animation:bl .8s ease-in-out infinite alternate}
@keyframes bl{from{opacity:1}to{opacity:.22}}
.bd-drum{color:var(--ar-orange);border-color:var(--ar-orange)}
.bd-loop{color:var(--teal);border-color:var(--teal)}
.csp{flex:1}.ch{font-size:.41rem;color:var(--tx3)}
.cbody{background:var(--panel2);border:1.5px solid var(--brd);border-top:none;border-radius:0 0 8px 8px;overflow:hidden;max-height:0;transition:max-height .3s ease}
.cbody.op{max-height:1000px}
.cinn{padding:12px}

/* ── DRUM MACHINE ── */
.dh{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.dbtn{font-family:'Orbitron',sans-serif;font-size:.46rem;letter-spacing:.1em;padding:4px 9px;
  background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .2s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.dbtn:hover,.dbtn.on{border-color:var(--ar-orange);color:var(--ar-orange);box-shadow:0 0 8px var(--ar-orange)30;}
.dht{font-size:.44rem;color:var(--tx3)}
.dpads{display:flex;gap:10px;margin-bottom:8px;opacity:.4;pointer-events:none;transition:opacity .2s}
.dpads.on{opacity:1;pointer-events:all}
.dp{display:flex;flex-direction:column;align-items:center;gap:4px}
.dp-t{font-family:'Orbitron',sans-serif;font-size:.42rem;letter-spacing:.12em;color:var(--tx3)}
.dp-s{font-size:.42rem;background:var(--panel);border:1px solid var(--brd);color:black;border-radius:3px;padding:2px 4px;cursor:pointer;outline:none}
.dpad{
  width:70px;height:70px;border-radius:10px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-family:'Orbitron',sans-serif;font-size:.6rem;font-weight:700;
  transition:all .08s;user-select:none;box-shadow: none;
  position:relative;overflow:hidden;
}
.dpad-key{font-size:.9rem;font-weight:900;letter-spacing:.05em;}
.dpad-name{font-size:.3rem;letter-spacing:.15em;opacity:.7;}
/* Relief sides */
.dk{
  background:linear-gradient(160deg,#3a3040,#1a1828);
  border:1.5px solid #50406080;
  color:#d0b8f8;
  
  text-shadow: 0 0 8px var(--rose), 0 0 16px var(--cyan);
}
.ds{
  background:linear-gradient(160deg,#302040,#180c28);
  border:1.5px solid #60308080;
  color:#f0a8e8;
  
  text-shadow: 0 0 8px var(--rose), 0 0 16px #c040e0;
}
.dh2{
  background:linear-gradient(160deg,#102038,#081020);
  border:1.5px solid #204080;
  color:#80d8ff;

  text-shadow: 0 0 8px var(--cyan), 0 0 16px var(--rose);
}
.dpad::before{
  content:'';position:absolute;top:0;left:0;width:4px;height:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02));border-radius:10px 0 0 10px;
}
.dpad::after{
  content:'';position:absolute;top:0;right:0;width:4px;height:100%;
  background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,.1));border-radius:0 10px 10px 0;
}
.dpad.hit{transform:scale(.9);filter:brightness(1.5);box-shadow:0 0 30px var(--rose)90,0 0 60px var(--cyan)60!important}

/* Drum FX */
.drum-fx-wrap{margin-top:10px;padding-top:10px;border-top:1px solid var(--brd2);display:flex;flex-direction:column;gap:8px}
.drum-fx-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.drum-fx-title{font-family:'Orbitron',sans-serif;font-size:.44rem;color:var(--ar-orange);letter-spacing:.14em}
.drum-fx-on-lbl{font-size:.42rem;color:var(--tx3)}
.drum-fx-on-lbl.on{color:var(--ar-orange)}
.drum-fx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;opacity:.3;pointer-events:none;transition:opacity .2s}
.drum-fx-grid.on{opacity:1;pointer-events:all}
.dfxbox{background:var(--panel);border:1px solid var(--brd2);border-radius:6px;padding:6px 5px 7px;
  display:flex;flex-direction:column;align-items:center;gap:3px;position:relative;overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.05)}
.dfxbox::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;border-radius:6px 6px 0 0}
.dfx-rv::before{background:linear-gradient(90deg,grey),transparent}
.dfx-eq::before{background:linear-gradient(90deg,green,transparent)}
.dfx-dl::before{background:linear-gradient(90deg,yellow,transparent)}
.dfx-fi::before{background:linear-gradient(90deg,red,transparent)}

.dfxtit{font-family:'Orbitron',sans-serif;font-size:.51rem;letter-spacing:.12em;
  color:black;align-self:flex-start}

/* EQ faders */
.eqr{display:flex;gap:5px;justify-content:center;width:100%}
.eqb{display:flex;flex-direction:column;align-items:center;gap:2px}
.eqsw{height:58px;display:flex;align-items:center}
input[type=range].vt{writing-mode:vertical-lr;direction:rtl;-webkit-appearance:slider-vertical;
  width:16px;height:54px;accent-color:#8020d0;cursor:pointer;background:transparent}
.eq-fader{position:relative;width:16px;height:60px;display:flex;align-items:center;justify-content:center;cursor:ns-resize;user-select:none;flex-shrink:0}
.eq-fader-track{position:absolute;left:50%;transform:translateX(-50%);width:3px;height:100%;
  background:linear-gradient(180deg,#e0d8c8,#c8c0b0);border-radius:2px;border:1px solid var(--brd);}
.eq-fader-center{position:absolute;left:50%;transform:translateX(-50%);width:9px;height:1px;background:#8020d040;top:50%;pointer-events:none}
.eq-fader-thumb{position:absolute;left:50%;transform:translateX(-50%);width:14px;height:10px;
  background:linear-gradient(180deg,#e8e0d0,#b8b0a0);border:1px solid #9890808a;border-radius:2px;
  box-shadow:0 1px 0 rgba(255,255,255,.6),0 -1px 0 rgba(0,0,0,.1),0 2px 4px rgba(0,0,0,.15);pointer-events:none}
.eq-fader.active .eq-fader-thumb{background:linear-gradient(180deg,#f0e8d8,#c8c0b0);box-shadow:0 0 6px #8020d050,0 2px 4px rgba(0,0,0,.15)}
.cf-wrap{display:flex;flex-direction:column;align-items:center;gap:1px;position:relative}
.eqf{font-size:.4rem;color:var(--tx3);text-align:center}
.eqv{font-size:.4rem;color:#8020d0;font-family:'Orbitron',sans-serif;min-width:24px;text-align:center}

/* Drum presets */
.drum-preset-add-btn{font-family:'Orbitron',sans-serif;font-size:.44rem;padding:3px 8px;background:var(--panel);border:1.5px dashed var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .15s;flex-shrink:0}
.drum-preset-add-btn:hover{border-color:var(--ar-orange);color:var(--ar-orange)}
.drum-preset-item{display:inline-flex;align-items:center;gap:2px;background:var(--panel);border:1.5px solid var(--brd2);border-radius:5px;overflow:hidden;flex-shrink:0}
.drum-preset-item.active{border-color:var(--ar-orange)}
.drum-preset-name-inp{background:transparent;border:none;color:black;font-family:'Share Tech Mono',monospace;font-size:.44rem;width:60px;padding:3px 4px;outline:none;cursor:pointer}
.drum-preset-name-inp:focus{color:var(--ar-orange);cursor:text}
.drum-preset-select-btn,.drum-preset-save-btn,.drum-preset-del-btn{font-family:'Orbitron',sans-serif;font-size:.36rem;padding:3px 4px;border:none;border-left:1px solid var(--brd2);cursor:pointer;transition:all .12s}
.drum-preset-select-btn{background:#f0eee8;color:var(--tx3)}
.drum-preset-select-btn:hover,.drum-preset-item.active .drum-preset-select-btn{background:#e8f8ff;color:var(--ar-blue)}
.drum-preset-save-btn{background:#f4fff4;color:#508040}
.drum-preset-save-btn:hover{background:#e8ffe8;color:#20a020}
.drum-preset-del-btn{background:#fff4f4;color:#c04040}
.drum-preset-del-btn:hover{background:#ffe8e8;color:var(--red)}

/* ── LOOP STATION ── */
.ltop{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.lbw{display:flex;align-items:center;gap:5px;font-size:.48rem;color:var(--tx3)}
.lbs{background:var(--panel);border:1px solid var(--brd);color:black;font-size:.48rem;border-radius:3px;padding:2px 4px;cursor:pointer;outline:none}
.bpm-wrap{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--brd2);border-radius:5px;padding:4px 9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.bpm-lbl{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.12em;color:var(--tx3)}
.bpm-in{width:42px;font-family:'Orbitron',sans-serif;font-size:.52rem;background:var(--panel2);border:1px solid var(--brd);color:var(--ar-blue);border-radius:3px;padding:2px 4px;text-align:center;outline:none}
.bpm-in:focus{border-color:var(--ar-blue)}
.tap-btn{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.1em;padding:3px 8px;
  background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);border-radius:4px;cursor:pointer;transition:all .15s}
.tap-btn:hover{border-color:var(--teal);color:var(--teal)}
.tap-btn.fl{background:#e8fff8;border-color:var(--teal);box-shadow:0 0 10px var(--teal)40;}
.bpm-dur{font-size:.42rem;color:var(--ar-orange);font-family:'Orbitron',sans-serif;white-space:nowrap}
.brow{display:flex;gap:2px;align-items:center;margin-left:auto}
.bdot{width:6px;height:6px;border-radius:50%;background:var(--brd)}
.bdot.bf{width:8px;height:8px}
.bdot.on{background:var(--ar-orange);box-shadow:0 0 4px var(--ar-orange)}
.bdot.bf.on{background:var(--gold);box-shadow:0 0 6px var(--gold)}
/* Metro button */
.metro-btn{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.08em;padding:4px 8px;
  background:var(--panel);border:1.5px solid #c04040;color:#c04040;border-radius:4px;cursor:pointer;transition:all .15s}

/* Track rows */
.ltrk{display:flex;align-items:center;gap:7px;background:var(--panel);border:1px solid var(--brd2);
  border-left:3px solid #40c08040;border-radius:7px;padding:7px 9px;margin-bottom:7px;
  transition:border-color .15s,box-shadow .15s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 2px 4px rgba(0,0,0,.05)}
.ltrk.armed{border-color:var(--gold)80!important}
.ltrk.rcing{border-color:var(--red)!important;box-shadow:0 0 10px var(--red)30!important;animation:rp .5s ease-in-out infinite alternate}
.ltrk.play{border-color:#20c06080!important}
@keyframes rp{from{box-shadow:0 0 5px var(--red)40}to{box-shadow:0 0 18px var(--red)80}}
.tnum{font-family:'Orbitron',sans-serif;font-size:.5rem;min-width:12px;text-align:center}
.tlayers{font-family:'Orbitron',sans-serif;font-size:.44rem;color:var(--tx3);min-width:20px;text-align:center}
.ltrk.play .tlayers{color:var(--teal)}.ltrk.rcing .tlayers{color:var(--red)}.ltrk.armed .tlayers{color:var(--gold)}
.twv{flex:1;height:32px;background:#ffffff;border:1px solid var(--brd2);border-radius:4px;position:relative;overflow:hidden}
.wvc{width:100%;height:100%;display:block}
.tph{position:absolute;top:0;bottom:0;width:2px;left:0;display:none;pointer-events:none}
.ltrk.play .tph,.ltrk.armed .tph,.ltrk.rcing .tph{display:block}
.ltrk.play .tph{background:var(--teal);box-shadow:0 0 4px var(--teal)}
.ltrk.rcing .tph{background:var(--red);box-shadow:0 0 4px var(--red);animation:bl .3s ease-in-out infinite alternate}
.ltrk.armed .tph{background:var(--gold);box-shadow:0 0 4px var(--gold)}
.tstat{font-family:'Orbitron',sans-serif;font-size:.42rem;color:var(--tx3);min-width:60px;text-align:center}
.ltrk.play .tstat{color:var(--teal)}.ltrk.rcing .tstat{color:var(--red)}.ltrk.armed .tstat{color:var(--gold);animation:bl .8s ease-in-out infinite alternate}
.tbtns{display:flex;gap:3px}
.lb{font-family:'Orbitron',sans-serif;font-size:.41rem;letter-spacing:.04em;padding:4px 6px;
  border-radius:4px;cursor:pointer;border:1px solid;transition:all .13s;white-space:nowrap}
.lb.rc{background:#fff4f4;border-color:#e0b0b0;color:#c04040}
.lb.rc:hover{border-color:var(--red);color:var(--red);box-shadow:0 0 6px var(--red)30}
.lb.rc.arm{background:#fffde8;border-color:var(--gold);color:var(--gold)}
.lb.rc.rcon{border-color:var(--red);color:var(--red);animation:bl .4s ease-in-out infinite alternate}
.lb.pl{background:#f0fff8;border-color:#b0d8b8;color:#408050}
.lb.pl:hover,.lb.pl.on{border-color:var(--teal);color:var(--teal);box-shadow:0 0 6px var(--teal)30}
.lb.st{background:#f8f6f0;border-color:var(--brd);color:var(--tx3);padding:4px 5px}
.lb.st:hover{border-color:var(--gold);color:var(--gold)}
.lb.cl{background:#fff4f4;border-color:#d0b0b0;color:#b04040;padding:4px 5px}
.lb.cl:hover{border-color:var(--red);color:var(--red)}
.tvol{display:flex;flex-direction:column;align-items:center;gap:2px}
.vsl{-webkit-appearance:none;width:42px;height:3px;background:var(--brd2);border-radius:2px;cursor:pointer;accent-color:var(--teal)}
.vsl::-webkit-slider-thumb{-webkit-appearance:none;width:9px;height:9px;background:var(--teal);border-radius:50%;box-shadow:0 0 4px var(--teal)}
.vll{font-size:.34rem;color:var(--tx3)}
.tdel{font-size:.43rem;padding:4px 5px;background:#fff4f4;border:1px solid #d0b0b0;color:#b04040;border-radius:4px;cursor:pointer}
.tdel:hover{border-color:var(--red);color:var(--red)}
.add-trk{display:flex;justify-content:center;margin:5px 0}
.atbtn{font-family:'Orbitron',sans-serif;font-size:.46rem;letter-spacing:.12em;padding:5px 13px;
  background:var(--panel);border:1.5px dashed var(--brd);color:var(--tx3);border-radius:6px;cursor:pointer;transition:all .18s;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.atbtn:hover{border-color:var(--teal);color:var(--teal);}
.lbot{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--brd2)}
.lb.sa{background:#fff8f0;border-color:#d8c0a0;color:#a08040}
.lb.sa:hover{border-color:var(--ar-orange);color:var(--ar-orange)}
.lb.ca{background:#fff4f4;border-color:#d0b0b0;color:#b04040}
.lb.ca:hover{border-color:var(--red);color:var(--red)}
.linfo{font-size:.41rem;color:var(--tx3);font-style:italic}
.ltmr{font-family:'Orbitron',sans-serif;font-size:.6rem;color:var(--ar-orange);margin-left:auto;letter-spacing:.1em}
.exrow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:8px;padding-top:8px;border-top:1px solid var(--brd2)}
.extit{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.14em;color:var(--ar-blue)}
.exsel{font-size:.44rem;background:var(--panel);border:1px solid var(--brd);color:black;border-radius:3px;padding:2px 4px;cursor:pointer;outline:none}
.exbtn{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.08em;padding:5px 10px;
  background:var(--panel);border:1.5px solid var(--ar-blue);color:var(--ar-blue);border-radius:4px;cursor:pointer;transition:all .2s;margin-left:auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.exbtn:hover{box-shadow:0 0 10px var(--ar-blue)40,inset 0 1px 0 rgba(255,255,255,.7)}
.exbtn:disabled{opacity:.28;cursor:default}
.exhint{font-size:.4rem;color:var(--tx3);font-style:italic}
.tc0{border-left-color:#e8204060!important}.tc1{border-left-color:#0068e060!important}
.tc2{border-left-color:#8020c060!important}.tc3{border-left-color:#c8a02060!important}
.tc4{border-left-color:#e8682060!important}.tc5{border-left-color:#20a06060!important}

/* ── SEQUENCER ── */
.seq-section{width:100%;margin-bottom:10px}
.cbar-seq .ci{color:var(--rose)}
.cbar-seq .ct{color:var(--rose);}
.bd-seq{color:var(--rose);border-color:var(--rose)}

.seq-inner{padding:14px 12px}

/* BPM + transport */
.seq-transport{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.seq-play-btn{
  font-family:'Orbitron',sans-serif;font-size:.54rem;letter-spacing:.14em;
  padding:7px 18px;border-radius:7px;cursor:pointer;
  background:var(--panel);border:2px solid green;color:green;
  transition:all .18s;
  box-shadow:0 0 10px var(--rose)20,inset 0 1px 0 rgba(255,255,255,.7);
}
.seq-play-btn.playing{
  background:var(--panel);
  border-color:green;color:red;
  box-shadow:0 0 18px var(--rose)60,inset 0 1px 0 rgba(255,255,255,.1);
  animation:seq-pulse .6s ease-in-out infinite alternate;
}
@keyframes seq-pulse{from{box-shadow:0 0 12px var(--rose)50}to{box-shadow:0 0 28px var(--rose)90,0 0 50px var(--rose)30}}
.seq-bpm-wrap{display:flex;align-items:center;gap:6px;background:var(--panel);border:1px solid var(--brd2);border-radius:5px;padding:4px 9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.seq-speed-wrap{display:flex;align-items:center;gap:5px;background:var(--panel);border:1px solid var(--brd2);border-radius:5px;padding:4px 9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
.seq-speed-sl{
  -webkit-appearance:none;appearance:none;
  width:90px;height:4px;border-radius:2px;
  background:var(--brd2);cursor:pointer;outline:none;
}
.seq-speed-sl::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid #a07000;box-shadow:0 0 6px var(--gold)80;cursor:grab;}
.seq-speed-sl::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold);border:2px solid #a07000;cursor:grab;}
.seq-speed-val{font-family:'Orbitron',sans-serif;font-size:.44rem;color:var(--gold);min-width:30px}
.seq-bpm-lbl{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.12em;color:var(--tx3)}
.seq-bpm-in{width:46px;font-family:'Orbitron',sans-serif;font-size:.54rem;background:var(--panel2);border:1px solid var(--brd);color:var(--rose);border-radius:3px;padding:2px 4px;text-align:center;outline:none}
.seq-bpm-in:focus{border-color:var(--rose)}
.seq-step-lbl{font-family:'Orbitron',sans-serif;font-size:.44rem;letter-spacing:.1em;color:black;}
.seq-steps-sel{font-size:.44rem;background:var(--panel);border:1px solid var(--brd);color:black;;border-radius:3px;padding:2px 4px;cursor:pointer;outline:none}
.seq-mode-sel{font-size:.44rem;background:var(--panel);border:1px solid var(--brd);color:black;;border-radius:3px;padding:2px 4px;cursor:pointer;outline:none}
.seq-status{font-family:'Orbitron',sans-serif;font-size:.44rem;color:var(--rose);margin-left:auto;letter-spacing:.1em;min-width:60px;text-align:right}
.seq-wipe-btn{
  font-family:'Orbitron',sans-serif;font-size:.42rem;letter-spacing:.1em;
  padding:5px 10px;border-radius:6px;cursor:pointer;
  background:var(--panel);border:1.5px solid #b03010;color:#b03010;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);transition:all .15s;
}
.seq-wipe-btn:hover{background:#fff2ee;border-color:#d04010;color:#d04010;box-shadow:0 0 8px #d0401030;}
.seq-wipe-btn.done{border-color:#20a040;color:#20a040;}
.seq-wipe-btn:active{transform:scale(.93)}
.seq-preset-slot{display:flex;align-items:center;gap:3px;background:var(--panel);border:1px solid var(--brd2);border-radius:6px;padding:3px 7px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7);}
.seq-preset-name{font-family:'Orbitron',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.06em;color:var(--tx2);min-width:12px;text-align:center;}
.seq-preset-slot.active .seq-preset-name{color:var(--rose);}
.seq-preset-save{
  font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.08em;
  padding:3px 6px;border-radius:4px;cursor:pointer;
  background:var(--panel);border:1px solid var(--brd2);color:var(--tx3);
  transition:all .15s;
}
.seq-preset-save:hover{border-color:var(--gold);color:var(--gold);}
.seq-preset-save.saved{border-color:var(--gold);color:var(--gold);}
.seq-preset-sel{
  font-family:'Orbitron',sans-serif;font-size:.34rem;letter-spacing:.08em;
  padding:3px 7px;border-radius:4px;cursor:pointer;
  background:var(--panel);border:1.5px solid var(--brd);color:var(--tx3);
  transition:all .15s;
}
.seq-preset-sel:hover{border-color:var(--rose);color:var(--rose);}
.seq-preset-slot.active .seq-preset-sel{
  background:var(--rose);color:#fff;border-color:var(--rose);
  box-shadow:0 0 8px var(--rose)70;
}
.seq-preset-slot.filled .seq-preset-name{color:var(--tx);}
.seq-preset-slot.filled .seq-preset-sel{border-color:#d080b0;color:#a04080;}

/* Step grid */
.seq-grid{
  display:grid;
  grid-template-columns:repeat(8,1fr);
  gap:7px;
}
@media(max-width:700px){.seq-grid{grid-template-columns:repeat(4,1fr)}}

.seq-step{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  background:var(--panel2);border:1px solid var(--brd2);border-radius:8px;
  padding:6px 4px 5px;
  position:relative;transition:all .12s;
}
.seq-step.active-step{
  background:gold;
  border-color:var(--rose);
  box-shadow:0 0 12px var(--rose)40;
}
.seq-step-num{font-family:'Orbitron',sans-serif;font-size:.32rem;color:var(--tx3);letter-spacing:.06em}
.seq-step.active-step .seq-step-num{color:var(--rose)}

/* LED */
.seq-led{
  width:7px;height:7px;border-radius:50%;
  background:var(--brd2);border:1px solid var(--brd);
  transition:all .12s;flex-shrink:0;
}
.seq-led.on{
  background:var(--rose);
  border-color:var(--rose);
  box-shadow:0 0 6px var(--rose),0 0 12px var(--rose)60;
}
.seq-led.playing{
  background:#fff;
  box-shadow:0 0 8px var(--rose),0 0 18px #fff;
  animation:led-flash .1s ease-in-out;
}
@keyframes led-flash{from{transform:scale(1.4)}to{transform:scale(1)}}

/* Note knob (click-cycle) */
.seq-knob-wrap{
  width:36px;height:36px;
  border-radius:50%;
  background:var(--knob-bg);
  border:2px solid var(--knob-brd);
  position:relative;cursor:pointer;
  box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .12s;
  user-select:none;
}
.seq-knob-wrap:hover{box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 8px var(--rose)40;}
.seq-knob-wrap.has-note{
  border-color:#c02080;
  box-shadow:0 3px 10px rgba(0,0,0,.4),0 0 10px var(--rose)50;
}
.seq-knob-wrap.playing-note{
  border-color:#fff;
  box-shadow:0 0 16px var(--rose),0 0 30px var(--rose)60;
}
.seq-knob-dot{
  width:4px;height:4px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 5px var(--gold);
  position:absolute;top:4px;left:50%;
  transform:translateX(-50%) rotate(-145deg);
  transform-origin:center 14px;
  transition:transform .08s ease;
}
.seq-note-lbl{
  font-family:'Orbitron',sans-serif;font-size:.34rem;
  color:var(--tx3);text-align:center;min-width:28px;
  letter-spacing:.04em;
}
.seq-step.has-note .seq-note-lbl{color:var(--rose);}
.seq-step.active-step .seq-note-lbl{color:#fff;}

/* Octave control */
.seq-oct-wrap{display:flex;align-items:center;gap:2px}
.seq-oct-btn{
  width:14px;height:14px;
  font-family:'Orbitron',sans-serif;font-size:.5rem;
  background:var(--panel);border:1px solid var(--brd);color:var(--tx3);
  border-radius:3px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .1s;line-height:1;padding:0;
}
.seq-oct-btn:hover{border-color:var(--rose);color:var(--rose)}
.seq-oct-disp{font-family:'Orbitron',sans-serif;font-size:.32rem;color:var(--tx3);min-width:16px;text-align:center}
.seq-step.has-note .seq-oct-disp{color:var(--rose)}

/* Arc Raider decorative borders */
.ar-accent {
  display: block;
  width: 100%;
  height: 10px;

  background:
   
    /* Rose */
    linear-gradient(
      45deg,
      black 0%,
      purple 9%,      
      transparent 9%, 
      transparent 13%, 
      purple 13%,
      black 100%
    ) 0 0px / 100% 5px no-repeat;
}

.logo {
  max-width: 150px;
  height: auto; /* garde les proportions */
}